From 5f5b91826187375a1cbda113019114c86e41f4e6 Mon Sep 17 00:00:00 2001
From: fujianchao <fujianchao@baidu.com>
Date: Fri, 6 Dec 2024 17:50:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=BE=93=E5=85=A5=E6=A1=86=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E6=9F=A5=E7=9C=8B=E5=AF=86=E7=A0=81=E5=92=8C=E9=9A=90?=
 =?UTF-8?q?=E8=97=8F=E5=AF=86=E7=A0=81=E4=BA=8B=E4=BB=B6=E5=92=8C=E5=8A=A8?=
 =?UTF-8?q?=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../amis-editor/src/plugin/Form/InputText.tsx | 58 ++++++++++++++++++-
 .../amis/src/renderers/Form/InputText.tsx     | 22 ++++++-
 2 files changed, 78 insertions(+), 2 deletions(-)

diff --git a/packages/amis-editor/src/plugin/Form/InputText.tsx b/packages/amis-editor/src/plugin/Form/InputText.tsx
index 675f5b112ab..727d909cd31 100644
--- a/packages/amis-editor/src/plugin/Form/InputText.tsx
+++ b/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: '密码类型时触发隐藏真实密码'
     }
   ];
 
diff --git a/packages/amis/src/renderers/Form/InputText.tsx b/packages/amis/src/renderers/Form/InputText.tsx
index 5643f022190..f7200a6794e 100644
--- a/packages/amis/src/renderers/Form/InputText.tsx
+++ b/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});
   }