feat: 输入框增加查看密码和隐藏密码事件和动作，调整自定义样式配置 (#11334)

* feat: 文本框自定义样式配置调整

* feat: 输入框增加查看密码和隐藏密码事件和动作

packages/amis-editor/src/plugin/Form/InputText.tsx

@@ -16,7 +16,7 @@ import {
   getActionCommonProps
 } from '../../renderer/event-control/helper';
 import {inputStateTpl} from '../../renderer/style-control/helper';
-import {resolveOptionType} from '../../util';
+import {resolveOptionEventDataSchame, resolveOptionType} from '../../util';
 
 const isText = 'this.type === "input-text"';
 const isPassword = 'this.type === "input-password"';
@@ -174,6 +174,52 @@ export class TextControlPlugin extends BasePlugin {
           }
         ];
       }
+    },
+    {
+      eventName: 'review',
+      eventLabel: '查看密码',
+      description: '点击查看密码图标时',
+      dataSchema: (manager: EditorManager) => {
+        const {value} = resolveOptionEventDataSchame(manager);
+
+        return [
+          {
+            type: 'object',
+            properties: {
+              data: {
+                type: 'object',
+                title: '数据',
+                properties: {
+                  value
+                }
+              }
+            }
+          }
+        ];
+      }
+    },
+    {
+      eventName: 'encrypt',
+      eventLabel: '隐藏密码',
+      description: '点击隐藏密码图标时',
+      dataSchema: (manager: EditorManager) => {
+        const {value} = resolveOptionEventDataSchame(manager);
+
+        return [
+          {
+            type: 'object',
+            properties: {
+              data: {
+                type: 'object',
+                title: '数据',
+                properties: {
+                  value
+                }
+              }
+            }
+          }
+        ];
+      }
     }
     // 貌似无效，先下掉
     // {
@@ -207,6 +253,16 @@ export class TextControlPlugin extends BasePlugin {
       actionLabel: '赋值',
       description: '触发组件数据更新',
       ...getActionCommonProps('setValue')
+    },
+    {
+      actionType: 'review',
+      actionLabel: '查看密码',
+      description: '密码类型时触发查看真实密码'
+    },
+    {
+      actionType: 'encrypt',
+      actionLabel: '隐藏密码',
+      description: '密码类型时触发隐藏真实密码'
     }
   ];
 
@@ -447,21 +503,30 @@ export class TextControlPlugin extends BasePlugin {
                 })
               ]
             },
-            getSchemaTpl('theme:cssCode', {
-              themeClass: [
+            getSchemaTpl('theme:singleCssCode', {
+              selectors: [
                 {
-                  name: '输入框',
-                  value: '',
-                  className: 'inputControlClassName',
-                  state: ['default', 'hover', 'active']
+                  label: '表单项基本样式',
+                  isRoot: true,
+                  selector: '.cxd-from-item'
                 },
                 {
-                  name: 'addOn',
-                  value: 'addOn',
-                  className: 'addOnClassName'
+                  label: '标题样式',
+                  selector: '.cxd-Form-label'
+                },
+                {
+                  label: '文本框基本样式',
+                  selector: '.cxd-TextControl'
+                },
+                {
+                  label: '输入框外层样式',
+                  selector: '.cxd-TextControl-input'
+                },
+                {
+                  label: '输入框样式',
+                  selector: '.cxd-TextControl-input input'
                 }
-              ],
-              isFormItem: true
+              ]
             })
           ],
           {...context?.schema, configTitle: 'style'}

packages/amis/src/renderers/Form/InputText.tsx

@@ -125,6 +125,8 @@ export type InputTextRendererEvent =
   | 'focus'
   | 'click'
   | 'change'
+  | 'review' // 查看密码事件
+  | 'encrypt' // 隐藏密码事件
   | 'enter';
 
 export interface TextProps extends OptionsControlProps, SpinnerExtraProps {
@@ -277,6 +279,10 @@ export default class TextControl extends React.PureComponent<
       this.clearValue();
     } else if (actionType === 'focus') {
       this.focus();
+    } else if (actionType === 'review') {
+      this.setState({revealPassword: true});
+    } else if (actionType === 'encrypt') {
+      this.setState({revealPassword: false});
     }
   }
 
@@ -986,7 +992,21 @@ export default class TextControl extends React.PureComponent<
     );
   }
 
-  toggleRevealPassword() {
+  async toggleRevealPassword() {
+    const {dispatchEvent, value} = this.props;
+    const eventName = this.state.revealPassword ? 'encrypt' : 'review';
+
+    const rendererEvent = await dispatchEvent(
+      eventName,
+      resolveEventData(this.props, {
+        value
+      })
+    );
+
+    if (rendererEvent?.prevented || rendererEvent?.stoped) {
+      return;
+    }
+
     this.setState({revealPassword: !this.state.revealPassword});
   }