From 450f29d93a005867ae81aaa0c2f730ef3d43f2b4 Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Thu, 26 Dec 2024 12:00:33 +0800
Subject: [PATCH 1/2] feat: intput v15

---
 migrate-from-v2.md                       |  4 ++
 src/packages/formitem/formitem.scss      |  2 +
 src/packages/input/demos/h5/demo1.tsx    |  6 ++-
 src/packages/input/demos/h5/demo10.tsx   |  6 +--
 src/packages/input/demos/h5/demo11.tsx   |  6 +--
 src/packages/input/demos/h5/demo13.tsx   | 38 +++++++++----------
 src/packages/input/demos/h5/demo4.tsx    |  6 +--
 src/packages/input/demos/h5/demo5.tsx    |  8 ++--
 src/packages/input/demos/h5/demo6.tsx    |  6 +--
 src/packages/input/demos/h5/demo7.tsx    | 26 ++++++-------
 src/packages/input/demos/h5/demo8.tsx    | 34 ++++++++---------
 src/packages/input/demos/h5/demo9.tsx    | 38 +++++++++----------
 src/packages/input/demos/taro/demo1.tsx  | 12 ++----
 src/packages/input/demos/taro/demo10.tsx | 13 ++-----
 src/packages/input/demos/taro/demo11.tsx | 18 +++------
 src/packages/input/demos/taro/demo12.tsx |  2 +-
 src/packages/input/demos/taro/demo13.tsx | 47 +++++++++++-------------
 src/packages/input/demos/taro/demo14.tsx |  1 -
 src/packages/input/demos/taro/demo2.tsx  |  6 +--
 src/packages/input/demos/taro/demo3.tsx  |  1 -
 src/packages/input/demos/taro/demo4.tsx  | 30 ++++-----------
 src/packages/input/demos/taro/demo5.tsx  | 10 ++---
 src/packages/input/demos/taro/demo6.tsx  | 19 +++-------
 src/packages/input/demos/taro/demo7.tsx  |  7 +---
 src/packages/input/demos/taro/demo8.tsx  | 45 +++++++++++------------
 src/packages/input/demos/taro/demo9.tsx  | 46 ++++++++++-------------
 src/packages/input/input.scss            | 37 ++++++++++++-------
 src/packages/input/input.taro.tsx        | 10 ++++-
 src/packages/input/input.tsx             | 10 ++++-
 src/styles/variables.scss                | 14 +++----
 30 files changed, 233 insertions(+), 275 deletions(-)

diff --git a/migrate-from-v2.md b/migrate-from-v2.md
index 6e386b6808..576f9cc8bf 100644
--- a/migrate-from-v2.md
+++ b/migrate-from-v2.md
@@ -417,6 +417,10 @@ plugins: [
 
 #### Input
 
+- 新增 `plain` 属性，标记为 纯文本型；该值默认为false，标记为 container 容器型；
+- 区分了 readonly 和 disabled 的样式；
+- 删除一些样式变量，统一到由通用变量控制，如`$input-color`、`$input-disabled-color`
+
 #### InputNumber
 
 - 增加 `allowEmpty`, 用于允许内容是否为空
diff --git a/src/packages/formitem/formitem.scss b/src/packages/formitem/formitem.scss
index 77678cc0c7..fe248e72b4 100644
--- a/src/packages/formitem/formitem.scss
+++ b/src/packages/formitem/formitem.scss
@@ -1,5 +1,7 @@
 .nut-form-item {
   display: flex;
+  align-items: center;
+  padding: 4px 12px;
 
   &.error {
     &.line {
diff --git a/src/packages/input/demos/h5/demo1.tsx b/src/packages/input/demos/h5/demo1.tsx
index 82871f8551..7df8ef3c07 100644
--- a/src/packages/input/demos/h5/demo1.tsx
+++ b/src/packages/input/demos/h5/demo1.tsx
@@ -1,10 +1,12 @@
 import React from 'react'
-import { Input } from '@nutui/nutui-react'
+import { Divider, Input } from '@nutui/nutui-react'
 
 const Demo1 = () => {
   return (
     <>
-      <Input placeholder="请输入文本" />
+      <Input placeholder="请输入文本：容器型" />
+      <Divider />
+      <Input placeholder="请输入文本：纯文本型" plain />
     </>
   )
 }
diff --git a/src/packages/input/demos/h5/demo10.tsx b/src/packages/input/demos/h5/demo10.tsx
index 58d5613b42..a3d40355fd 100644
--- a/src/packages/input/demos/h5/demo10.tsx
+++ b/src/packages/input/demos/h5/demo10.tsx
@@ -1,17 +1,17 @@
 import React from 'react'
-import { Input } from '@nutui/nutui-react'
+import { Input, Space } from '@nutui/nutui-react'
 
 const Demo10 = () => {
   const formatter = (value: string) => value.replace(/\d/g, '')
   return (
-    <>
+    <Space direction="vertical" style={{ marginBottom: 10 }}>
       <Input formatter={formatter} placeholder="在输入时移除数字" />
       <Input
         formatter={formatter}
         formatTrigger="onBlur"
         placeholder="在失焦时移除数字"
       />
-    </>
+    </Space>
   )
 }
 export default Demo10
diff --git a/src/packages/input/demos/h5/demo11.tsx b/src/packages/input/demos/h5/demo11.tsx
index 8b73a36b5b..a5276fda2e 100644
--- a/src/packages/input/demos/h5/demo11.tsx
+++ b/src/packages/input/demos/h5/demo11.tsx
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Input } from '@nutui/nutui-react'
+import { Input, Space } from '@nutui/nutui-react'
 
 const Demo11 = () => {
   return (
-    <>
+    <Space direction="vertical" style={{ marginBottom: 10 }}>
       <Input align="left" placeholder="文本内容对齐" />
       <Input align="right" placeholder="文本内容对齐" />
-    </>
+    </Space>
   )
 }
 export default Demo11
diff --git a/src/packages/input/demos/h5/demo13.tsx b/src/packages/input/demos/h5/demo13.tsx
index 60e34ecf2c..bc7968275f 100644
--- a/src/packages/input/demos/h5/demo13.tsx
+++ b/src/packages/input/demos/h5/demo13.tsx
@@ -4,27 +4,25 @@ import { Tips } from '@nutui/icons-react'
 
 const Demo13 = () => {
   return (
-    <>
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          background: '#fff',
-          padding: '0 10px',
-        }}
-      >
-        <Tips color="var(--nutui-gray-7)" />
-        <Input
-          placeholder="请输入短信验证码"
-          style={{ '--nutui-input-padding': '10px' }}
-        />
-        <div className="right">
-          <Button type="primary" size="small">
-            获取验证码
-          </Button>
-        </div>
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        background: '#fff',
+        padding: '0 10px',
+      }}
+    >
+      <Tips color="var(--nutui-gray-7)" />
+      <Input
+        placeholder="请输入短信验证码"
+        style={{ '--nutui-input-padding': '10px' }}
+      />
+      <div className="right">
+        <Button type="primary" size="small">
+          获取验证码
+        </Button>
       </div>
-    </>
+    </div>
   )
 }
 export default Demo13
diff --git a/src/packages/input/demos/h5/demo4.tsx b/src/packages/input/demos/h5/demo4.tsx
index 08ba29e80d..db78cf4c13 100644
--- a/src/packages/input/demos/h5/demo4.tsx
+++ b/src/packages/input/demos/h5/demo4.tsx
@@ -1,14 +1,14 @@
 import React from 'react'
-import { Input } from '@nutui/nutui-react'
+import { Input, Space } from '@nutui/nutui-react'
 
 const Demo4 = () => {
   return (
-    <>
+    <Space direction="vertical" style={{ marginBottom: 10 }}>
       <Input type="text" placeholder="请输入文本" />
       <Input type="password" placeholder="请输入密码" />
       <Input type="digit" placeholder="请输入数字" />
       <Input type="number" placeholder="请输入整数" />
-    </>
+    </Space>
   )
 }
 export default Demo4
diff --git a/src/packages/input/demos/h5/demo5.tsx b/src/packages/input/demos/h5/demo5.tsx
index e30fb98637..49ced99272 100644
--- a/src/packages/input/demos/h5/demo5.tsx
+++ b/src/packages/input/demos/h5/demo5.tsx
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Input } from '@nutui/nutui-react'
+import { Input, Space } from '@nutui/nutui-react'
 
 const Demo5 = () => {
   return (
-    <>
-      <Input readOnly placeholder="输入框只读" />
+    <Space direction="vertical" style={{ marginBottom: 10 }}>
+      <Input readOnly value="输入框只读" />
       <Input disabled placeholder="输入框禁用" />
-    </>
+    </Space>
   )
 }
 export default Demo5
diff --git a/src/packages/input/demos/h5/demo6.tsx b/src/packages/input/demos/h5/demo6.tsx
index 442499fb60..1ac0c3563b 100644
--- a/src/packages/input/demos/h5/demo6.tsx
+++ b/src/packages/input/demos/h5/demo6.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
-import { Input } from '@nutui/nutui-react'
+import { Input, Space } from '@nutui/nutui-react'
 import { Close } from '@nutui/icons-react'
 
 const Demo6 = () => {
   return (
-    <>
+    <Space direction="vertical" style={{ marginBottom: 10 }}>
       <Input clearable placeholder="显示清除图标" />
       <Input clearable clearIcon={<Close />} placeholder="显示清除图标" />
-    </>
+    </Space>
   )
 }
 export default Demo6
diff --git a/src/packages/input/demos/h5/demo7.tsx b/src/packages/input/demos/h5/demo7.tsx
index 55d08c272a..d06187dc53 100644
--- a/src/packages/input/demos/h5/demo7.tsx
+++ b/src/packages/input/demos/h5/demo7.tsx
@@ -4,20 +4,18 @@ import Form from '@/packages/form'
 
 const Demo7 = () => {
   return (
-    <>
-      <Form>
-        <Form.Item label="文本" name="username">
-          <Input
-            className="nut-input-text"
-            placeholder="请输入文本"
-            type="text"
-            onChange={(val) => {
-              console.log('change value:', val)
-            }}
-          />
-        </Form.Item>
-      </Form>
-    </>
+    <Form>
+      <Form.Item label="文本" name="username">
+        <Input
+          className="nut-input-text"
+          placeholder="请输入文本"
+          type="text"
+          onChange={(val) => {
+            console.log('change value:', val)
+          }}
+        />
+      </Form.Item>
+    </Form>
   )
 }
 export default Demo7
diff --git a/src/packages/input/demos/h5/demo8.tsx b/src/packages/input/demos/h5/demo8.tsx
index 430b78a599..ba77725299 100644
--- a/src/packages/input/demos/h5/demo8.tsx
+++ b/src/packages/input/demos/h5/demo8.tsx
@@ -4,25 +4,23 @@ import { Input } from '@nutui/nutui-react'
 const Demo8 = () => {
   const [currentLength, setCurrentLength] = useState(0)
   return (
-    <>
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          background: '#fff',
-          padding: '0 10px',
-        }}
-      >
-        <Input
-          type="text"
-          maxLength={20}
-          onChange={(val) => setCurrentLength(val.length)}
-        />
-        <div className="right" style={{ fontSize: '12px' }}>
-          {currentLength} / 20
-        </div>
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        background: '#fff',
+        padding: '0 10px',
+      }}
+    >
+      <Input
+        type="text"
+        maxLength={20}
+        onChange={(val) => setCurrentLength(val.length)}
+      />
+      <div className="right" style={{ fontSize: '12px' }}>
+        {currentLength} / 20
       </div>
-    </>
+    </div>
   )
 }
 export default Demo8
diff --git a/src/packages/input/demos/h5/demo9.tsx b/src/packages/input/demos/h5/demo9.tsx
index c8c4b806f5..29671d4970 100644
--- a/src/packages/input/demos/h5/demo9.tsx
+++ b/src/packages/input/demos/h5/demo9.tsx
@@ -5,30 +5,26 @@ import { Eye, Marshalling } from '@nutui/icons-react'
 const Demo9 = () => {
   const [inputType, setInputType] = useState('password')
   return (
-    <>
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        background: '#fff',
+        padding: '0 10px',
+      }}
+    >
+      <Input type={inputType} placeholder="请输入密码" />
       <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          background: '#fff',
-          padding: '0 10px',
-        }}
+        className="right"
+        onClick={() => setInputType(inputType === 'text' ? 'password' : 'text')}
       >
-        <Input type={inputType} placeholder="请输入密码" />
-        <div
-          className="right"
-          onClick={() =>
-            setInputType(inputType === 'text' ? 'password' : 'text')
-          }
-        >
-          {inputType === 'text' ? (
-            <Eye color="var(--nutui-gray-7)" />
-          ) : (
-            <Marshalling color="var(--nutui-gray-7)" />
-          )}
-        </div>
+        {inputType === 'text' ? (
+          <Eye color="var(--nutui-gray-7)" />
+        ) : (
+          <Marshalling color="var(--nutui-gray-7)" />
+        )}
       </div>
-    </>
+    </div>
   )
 }
 export default Demo9
diff --git a/src/packages/input/demos/taro/demo1.tsx b/src/packages/input/demos/taro/demo1.tsx
index 0596c0414c..443c596372 100644
--- a/src/packages/input/demos/taro/demo1.tsx
+++ b/src/packages/input/demos/taro/demo1.tsx
@@ -1,16 +1,12 @@
 import React from 'react'
-import { Input } from '@nutui/nutui-react-taro'
+import { Divider, Input } from '@nutui/nutui-react-taro'
 
 const Demo1 = () => {
   return (
     <>
-      <Input
-        placeholder="请输入文本"
-        placeholderTextColor="#757575"
-        onChange={(v) => {
-          console.log('onChange', v)
-        }}
-      />
+      <Input placeholder="请输入文本：容器型" />
+      <Divider />
+      <Input plain placeholder="请输入文本：纯文本型" />
     </>
   )
 }
diff --git a/src/packages/input/demos/taro/demo10.tsx b/src/packages/input/demos/taro/demo10.tsx
index d96ff4ecae..20ad48abb9 100644
--- a/src/packages/input/demos/taro/demo10.tsx
+++ b/src/packages/input/demos/taro/demo10.tsx
@@ -1,22 +1,17 @@
 import React from 'react'
-import { Input } from '@nutui/nutui-react-taro'
+import { Input, Space } from '@nutui/nutui-react-taro'
 
 const Demo10 = () => {
   const formatter = (value: string) => value.replace(/\d/g, '')
   return (
-    <>
-      <Input
-        formatter={formatter}
-        placeholder="在输入时执行格式化"
-        placeholderTextColor="#757575"
-      />
+    <Space direction="vertical" style={{ marginBottom: 10 }}>
+      <Input formatter={formatter} placeholder="在输入时执行格式化" />
       <Input
         formatter={formatter}
         formatTrigger="onBlur"
         placeholder="在失焦时执行格式化"
-        placeholderTextColor="#757575"
       />
-    </>
+    </Space>
   )
 }
 export default Demo10
diff --git a/src/packages/input/demos/taro/demo11.tsx b/src/packages/input/demos/taro/demo11.tsx
index 5e6f9ad7e3..77d3108a5f 100644
--- a/src/packages/input/demos/taro/demo11.tsx
+++ b/src/packages/input/demos/taro/demo11.tsx
@@ -1,20 +1,12 @@
 import React from 'react'
-import { Input } from '@nutui/nutui-react-taro'
+import { Input, Space } from '@nutui/nutui-react-taro'
 
 const Demo11 = () => {
   return (
-    <>
-      <Input
-        align="left"
-        placeholder="文本内容对齐"
-        placeholderTextColor="#757575"
-      />
-      <Input
-        align="right"
-        placeholder="文本内容对齐"
-        placeholderTextColor="#757575"
-      />
-    </>
+    <Space direction="vertical" style={{ marginBottom: 10 }}>
+      <Input align="left" placeholder="文本内容对齐" />
+      <Input align="right" placeholder="文本内容对齐" />
+    </Space>
   )
 }
 export default Demo11
diff --git a/src/packages/input/demos/taro/demo12.tsx b/src/packages/input/demos/taro/demo12.tsx
index c3c757fe0a..d7021976be 100644
--- a/src/packages/input/demos/taro/demo12.tsx
+++ b/src/packages/input/demos/taro/demo12.tsx
@@ -4,7 +4,7 @@ import { Input } from '@nutui/nutui-react-taro'
 const Demo12 = () => {
   return (
     <>
-      <Input placeholder="事件" placeholderTextColor="#757575" />
+      <Input placeholder="事件" />
     </>
   )
 }
diff --git a/src/packages/input/demos/taro/demo13.tsx b/src/packages/input/demos/taro/demo13.tsx
index a0c271a84a..4477e7e17c 100644
--- a/src/packages/input/demos/taro/demo13.tsx
+++ b/src/packages/input/demos/taro/demo13.tsx
@@ -6,38 +6,35 @@ import pxTransform from '@/utils/px-transform'
 
 const Demo13 = () => {
   return (
-    <>
+    <View
+      style={{
+        display: 'flex',
+        flexWrap: 'nowrap',
+        alignItems: 'center',
+        flexDirection: 'row',
+        backgroundColor: '#ffffff',
+      }}
+    >
+      <Tips style={{ marginLeft: pxTransform(10) }} />
+      <Input
+        placeholder="请输入短信验证码"
+        style={{ '--nutui-input-padding': '10px' }}
+      />
       <View
         style={{
           display: 'flex',
-          flexWrap: 'nowrap',
+          width: pxTransform(100),
+          marginRight: pxTransform(10),
           alignItems: 'center',
-          flexDirection: 'row',
-          backgroundColor: '#ffffff',
         }}
       >
-        <Tips style={{ marginLeft: pxTransform(10) }} />
-        <Input
-          placeholder="请输入短信验证码"
-          placeholderTextColor="#757575"
-          style={{ '--nutui-input-padding': '10px' }}
-        />
-        <View
-          style={{
-            display: 'flex',
-            width: pxTransform(100),
-            marginRight: pxTransform(10),
-            alignItems: 'center',
-          }}
-        >
-          <Button type="primary" size="small" style={{ flexShrink: 1 }}>
-            <Text style={{ fontSize: pxTransform(12), color: '#ffffff' }}>
-              获取验证码
-            </Text>
-          </Button>
-        </View>
+        <Button type="primary" size="small" style={{ flexShrink: 1 }}>
+          <Text style={{ fontSize: pxTransform(12), color: '#ffffff' }}>
+            获取验证码
+          </Text>
+        </Button>
       </View>
-    </>
+    </View>
   )
 }
 export default Demo13
diff --git a/src/packages/input/demos/taro/demo14.tsx b/src/packages/input/demos/taro/demo14.tsx
index 9a0e3660c2..def6bba07b 100644
--- a/src/packages/input/demos/taro/demo14.tsx
+++ b/src/packages/input/demos/taro/demo14.tsx
@@ -7,7 +7,6 @@ const Demo11 = () => {
       <Input
         style={{ '--nutui-input-border-bottom-width': '1px' }}
         placeholder="边框"
-        placeholderTextColor="#757575"
       />
     </>
   )
diff --git a/src/packages/input/demos/taro/demo2.tsx b/src/packages/input/demos/taro/demo2.tsx
index 9f82674a08..89c1d9b50c 100644
--- a/src/packages/input/demos/taro/demo2.tsx
+++ b/src/packages/input/demos/taro/demo2.tsx
@@ -4,11 +4,7 @@ import { Input } from '@nutui/nutui-react-taro'
 const Demo2 = () => {
   return (
     <>
-      <Input
-        defaultValue="NutUI React"
-        placeholder="请输入文本"
-        placeholderTextColor="#757575"
-      />
+      <Input defaultValue="NutUI React" placeholder="请输入文本" />
     </>
   )
 }
diff --git a/src/packages/input/demos/taro/demo3.tsx b/src/packages/input/demos/taro/demo3.tsx
index fa9fb055b9..cceac2a656 100644
--- a/src/packages/input/demos/taro/demo3.tsx
+++ b/src/packages/input/demos/taro/demo3.tsx
@@ -9,7 +9,6 @@ const Demo3 = () => {
         value={val}
         onChange={(val) => setVal(val)}
         placeholder="请输入文本"
-        placeholderTextColor="#757575"
       />
     </>
   )
diff --git a/src/packages/input/demos/taro/demo4.tsx b/src/packages/input/demos/taro/demo4.tsx
index 2b9cd3f063..213bf9afb9 100644
--- a/src/packages/input/demos/taro/demo4.tsx
+++ b/src/packages/input/demos/taro/demo4.tsx
@@ -1,30 +1,14 @@
 import React from 'react'
-import { Input } from '@nutui/nutui-react-taro'
+import { Input, Space } from '@nutui/nutui-react-taro'
 
 const Demo4 = () => {
   return (
-    <>
-      <Input
-        type="text"
-        placeholder="请输入文本"
-        placeholderTextColor="#757575"
-      />
-      <Input
-        type="password"
-        placeholder="请输入密码"
-        placeholderTextColor="#757575"
-      />
-      <Input
-        type="digit"
-        placeholder="请输入数字"
-        placeholderTextColor="#757575"
-      />
-      <Input
-        type="number"
-        placeholder="请输入整数"
-        placeholderTextColor="#757575"
-      />
-    </>
+    <Space direction="vertical" style={{ marginBottom: 10 }}>
+      <Input type="text" placeholder="请输入文本" />
+      <Input type="password" placeholder="请输入密码" />
+      <Input type="digit" placeholder="请输入数字" />
+      <Input type="number" placeholder="请输入整数" />
+    </Space>
   )
 }
 export default Demo4
diff --git a/src/packages/input/demos/taro/demo5.tsx b/src/packages/input/demos/taro/demo5.tsx
index 66b318076c..6a3b0fd556 100644
--- a/src/packages/input/demos/taro/demo5.tsx
+++ b/src/packages/input/demos/taro/demo5.tsx
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Input } from '@nutui/nutui-react-taro'
+import { Input, Space } from '@nutui/nutui-react-taro'
 
 const Demo5 = () => {
   return (
-    <>
-      <Input readOnly placeholder="输入框只读" placeholderTextColor="#757575" />
-      <Input disabled placeholder="输入框禁用" placeholderTextColor="#757575" />
-    </>
+    <Space direction="vertical" style={{ marginBottom: 10 }}>
+      <Input readOnly value="输入框只读" />
+      <Input disabled placeholder="输入框禁用" />
+    </Space>
   )
 }
 export default Demo5
diff --git a/src/packages/input/demos/taro/demo6.tsx b/src/packages/input/demos/taro/demo6.tsx
index dc0452bce8..d97f34afee 100644
--- a/src/packages/input/demos/taro/demo6.tsx
+++ b/src/packages/input/demos/taro/demo6.tsx
@@ -1,22 +1,13 @@
 import React from 'react'
-import { Input } from '@nutui/nutui-react-taro'
+import { Input, Space } from '@nutui/nutui-react-taro'
 import { Close } from '@nutui/icons-react-taro'
 
 const Demo6 = () => {
   return (
-    <>
-      <Input
-        clearable
-        placeholder="显示清除图标"
-        placeholderTextColor="#757575"
-      />
-      <Input
-        clearable
-        clearIcon={<Close />}
-        placeholder="显示清除图标"
-        placeholderTextColor="#757575"
-      />
-    </>
+    <Space direction="vertical" style={{ marginBottom: 10 }}>
+      <Input clearable placeholder="显示清除图标" />
+      <Input clearable clearIcon={<Close />} placeholder="显示清除图标" />
+    </Space>
   )
 }
 export default Demo6
diff --git a/src/packages/input/demos/taro/demo7.tsx b/src/packages/input/demos/taro/demo7.tsx
index 6e49144e79..3ef4ee3cd4 100644
--- a/src/packages/input/demos/taro/demo7.tsx
+++ b/src/packages/input/demos/taro/demo7.tsx
@@ -15,12 +15,7 @@ const Demo7 = () => {
         backgroundColor: '#ffffff',
       }}
     >
-      <Input
-        placeholder="受控下的清除"
-        value={keyword}
-        onChange={setKeyword}
-        placeholderTextColor="#757575"
-      />
+      <Input placeholder="受控下的清除" value={keyword} onChange={setKeyword} />
       <Button
         type="primary"
         size="small"
diff --git a/src/packages/input/demos/taro/demo8.tsx b/src/packages/input/demos/taro/demo8.tsx
index e5076e83de..86d5f5367a 100644
--- a/src/packages/input/demos/taro/demo8.tsx
+++ b/src/packages/input/demos/taro/demo8.tsx
@@ -6,38 +6,35 @@ import pxTransform from '@/utils/px-transform'
 const Demo8 = () => {
   const [currentLength, setCurrentLength] = useState(0)
   return (
-    <>
+    <View
+      style={{
+        display: 'flex',
+        flexWrap: 'nowrap',
+        alignItems: 'center',
+        flexDirection: 'row',
+        backgroundColor: '#ffffff',
+      }}
+    >
+      <Input
+        type="text"
+        maxLength={20}
+        onChange={(val) => setCurrentLength(val.length)}
+      />
       <View
         style={{
-          display: 'flex',
-          flexWrap: 'nowrap',
-          alignItems: 'center',
-          flexDirection: 'row',
-          backgroundColor: '#ffffff',
+          marginRight: pxTransform(10),
         }}
       >
-        <Input
-          type="text"
-          maxLength={20}
-          onChange={(val) => setCurrentLength(val.length)}
-          placeholderTextColor="#757575"
-        />
-        <View
+        <Text
           style={{
-            marginRight: pxTransform(10),
+            width: pxTransform(40),
+            fontSize: pxTransform(12),
           }}
         >
-          <Text
-            style={{
-              width: pxTransform(40),
-              fontSize: pxTransform(12),
-            }}
-          >
-            {currentLength} / 20
-          </Text>
-        </View>
+          {currentLength} / 20
+        </Text>
       </View>
-    </>
+    </View>
   )
 }
 export default Demo8
diff --git a/src/packages/input/demos/taro/demo9.tsx b/src/packages/input/demos/taro/demo9.tsx
index 4b2c972000..324537f10f 100644
--- a/src/packages/input/demos/taro/demo9.tsx
+++ b/src/packages/input/demos/taro/demo9.tsx
@@ -7,40 +7,32 @@ import pxTransform from '@/utils/px-transform'
 const Demo9 = () => {
   const [inputType, setInputType] = useState('password')
   return (
-    <>
+    <View
+      style={{
+        display: 'flex',
+        flexWrap: 'nowrap',
+        alignItems: 'center',
+        flexDirection: 'row',
+        backgroundColor: '#ffffff',
+      }}
+    >
+      <Input type={inputType} placeholder="请输入密码" />
       <View
         style={{
           display: 'flex',
-          flexWrap: 'nowrap',
+          marginRight: pxTransform(10),
           alignItems: 'center',
-          flexDirection: 'row',
-          backgroundColor: '#ffffff',
         }}
+        onClick={() => setInputType(inputType === 'text' ? 'password' : 'text')}
       >
-        <Input
-          type={inputType}
-          placeholder="请输入密码"
-          placeholderTextColor="#757575"
-        />
-        <View
-          style={{
-            display: 'flex',
-            marginRight: pxTransform(10),
-            alignItems: 'center',
-          }}
-          onClick={() =>
-            setInputType(inputType === 'text' ? 'password' : 'text')
-          }
-        >
-          {/* eslint-disable-next-line no-nested-ternary */}
-          {inputType === 'text' ? (
-            <Eye color="var(--nutui-gray-7)" />
-          ) : (
-            <Marshalling color="var(--nutui-gray-7)" />
-          )}
-        </View>
+        {/* eslint-disable-next-line no-nested-ternary */}
+        {inputType === 'text' ? (
+          <Eye color="var(--nutui-gray-7)" />
+        ) : (
+          <Marshalling color="var(--nutui-gray-7)" />
+        )}
       </View>
-    </>
+    </View>
   )
 }
 export default Demo9
diff --git a/src/packages/input/input.scss b/src/packages/input/input.scss
index e6db531f8a..cd23a323f7 100644
--- a/src/packages/input/input.scss
+++ b/src/packages/input/input.scss
@@ -5,23 +5,29 @@
   flex-wrap: nowrap;
   flex: 1;
   align-items: center;
-  padding: $input-padding;
-  line-height: 24px;
   font-size: $input-font-size;
   box-sizing: border-box;
-  border-radius: $input-border-radius;
-  background-color: $input-background-color;
-  border-bottom: $input-border-bottom-width solid $input-border-bottom;
 
   .nut-icon {
-    color: #c8c9cc;
+    color: $color-text-disabled;
+    width: 14px;
+    height: 14px;
+    font-size: 14px;
+  }
+  &-container {
+    height: 38px;
+    padding: $input-padding;
+    background-color: $input-background-color;
+    border-radius: $input-border-radius;
+    border-bottom: $input-border-bottom-width solid $input-border-bottom;
   }
 }
 
 .nut-input-native {
   flex: 1;
-  color: $input-color;
+  color: $color-title;
   font-size: $input-font-size;
+  line-height: $input-font-size;
   padding: 0;
   border: 0;
   outline: 0 none;
@@ -31,23 +37,28 @@
 
 /* #ifndef rn */
 .nut-input-native::placeholder {
-  color: #757575;
+  color: $color-text-help;
 }
-
 /* #endif */
 
+.nut-input-readonly {
+  .nut-input-native {
+    color: $color-text-help;
+  }
+}
+
 .nut-input-disabled {
-  color: $input-disabled-color !important;
+  color: $color-text-disabled !important;
 
   input:disabled {
-    color: $input-disabled-color;
+    color: $color-text-disabled;
     cursor: not-allowed;
     background: none;
     opacity: 1;
-    -webkit-text-fill-color: $input-disabled-color;
+    -webkit-text-fill-color: $color-text-disabled;
   }
 }
 
 .nut-input-clear {
-  flex: 0;
+  // flex: 0;
 }
diff --git a/src/packages/input/input.taro.tsx b/src/packages/input/input.taro.tsx
index 8a696cce53..14bf459591 100644
--- a/src/packages/input/input.taro.tsx
+++ b/src/packages/input/input.taro.tsx
@@ -38,6 +38,7 @@ export interface InputProps extends BasicComponent {
   formatTrigger: InputFormatTrigger
   autoFocus: boolean
   confirmType: InputConfirmType
+  plain: boolean
   formatter?: (value: string) => void
   onChange?: (value: string) => void
   onBlur?: (value: string) => void
@@ -61,6 +62,7 @@ const defaultProps = {
   clearIcon: null,
   formatTrigger: 'onChange',
   autoFocus: false,
+  plain: false,
 } as InputProps
 
 export const Input = forwardRef(
@@ -90,6 +92,7 @@ export const Input = forwardRef(
       autoFocus,
       style,
       className,
+      plain,
       onChange,
       onFocus,
       onBlur,
@@ -132,7 +135,12 @@ export const Input = forwardRef(
 
     const inputClass = useCallback(() => {
       const classPrefix = 'nut-input'
-      return [classPrefix, `${disabled ? `${classPrefix}-disabled` : ''}`]
+      return [
+        classPrefix,
+        `${disabled ? `${classPrefix}-disabled` : ''}`,
+        readOnly ? `${classPrefix}-readonly` : '',
+        `${plain ? `${classPrefix}-plain` : `${classPrefix}-container`}`,
+      ]
         .filter(Boolean)
         .join(' ')
     }, [disabled])
diff --git a/src/packages/input/input.tsx b/src/packages/input/input.tsx
index 7940b20c80..4d79153a28 100644
--- a/src/packages/input/input.tsx
+++ b/src/packages/input/input.tsx
@@ -33,6 +33,7 @@ export interface InputProps extends BasicComponent {
   formatTrigger: InputFormatTrigger
   autoFocus: boolean
   confirmType: InputConfirmType
+  plain: boolean
   formatter?: (value: string) => void
   onChange?: (value: string) => void
   onBlur?: (value: string) => void
@@ -56,6 +57,7 @@ const defaultProps = {
   clearIcon: null,
   formatTrigger: 'onChange',
   autoFocus: false,
+  plain: false,
 } as InputProps
 
 export const Input = forwardRef(
@@ -89,6 +91,7 @@ export const Input = forwardRef(
       formatter,
       onClick,
       confirmType,
+      plain,
       defaultValue,
       value: _value,
       onCompositionStart,
@@ -127,7 +130,12 @@ export const Input = forwardRef(
 
     const inputClass = useCallback(() => {
       const classPrefix = 'nut-input'
-      return [classPrefix, `${disabled ? `${classPrefix}-disabled` : ''}`]
+      return [
+        classPrefix,
+        disabled ? `${classPrefix}-disabled` : '',
+        readOnly ? `${classPrefix}-readonly` : '',
+        plain ? `${classPrefix}-plain` : `${classPrefix}-container`,
+      ]
         .filter(Boolean)
         .join(' ')
     }, [disabled])
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 3fd4faf536..7dd00e897b 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -547,18 +547,18 @@ $input-border-bottom-width: var(
   --nutui-input-border-bottom-width,
   0px
 ) !default;
-$input-disabled-color: var(
-  --nutui-input-disabled-color,
-  $color-text-disabled
-) !default;
+// $input-disabled-color: var(
+//   --nutui-input-disabled-color,
+//   $color-text-disabled
+// ) !default;
 $input-font-size: var(--nutui-input-font-size, $font-size-base) !default;
-$input-border-radius: var(--nutui-input-border-radius, 0) !default;
-$input-color: var(--nutui-input-color, $color-title) !default;
+$input-border-radius: var(--nutui-input-border-radius, $radius-s) !default;
+// $input-color: var(--nutui-input-color, $color-title) !default;
 $input-background-color: var(
   --nutui-input-background-color,
   $color-background-overlay
 ) !default;
-$input-padding: var(--nutui-input-padding, 10px 25px) !default;
+$input-padding: var(--nutui-input-padding, 12px) !default;
 
 // textarea（✅）
 $textarea-font: var(--nutui-textarea-font, $font-size-base) !default;

From 250d44ee7ead38ad9e066f3e7f5fb510529084f2 Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Thu, 26 Dec 2024 12:01:52 +0800
Subject: [PATCH 2/2] feat: intput v15

---
 src/config.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/config.json b/src/config.json
index 57a6efe126..0d67582c1e 100644
--- a/src/config.json
+++ b/src/config.json
@@ -538,6 +538,7 @@
           "sort": 1,
           "show": true,
           "taro": true,
+          "v15": true,
           "author": "VickyYe"
         },
         {