From 5bf038baa4644fe42581c97793dfc87482ecb416 Mon Sep 17 00:00:00 2001
From: luofann <fannluowork@gmail.com>
Date: Mon, 14 Aug 2023 11:49:58 +0800
Subject: [PATCH] =?UTF-8?q?optimization:=20password=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81texarea=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/develop/tag_usage_dev.md                 |  1 +
 en_docs/develop/tag_usage_dev.md              |  1 +
 .../common/RenderForm/RenderForm.vue          |  7 +-
 .../common/RenderForm/tags/TagPassword.vue    | 66 +++++++++++++++----
 4 files changed, 59 insertions(+), 16 deletions(-)

diff --git a/docs/develop/tag_usage_dev.md b/docs/develop/tag_usage_dev.md
index 2f1451f674..91d69ab65f 100644
--- a/docs/develop/tag_usage_dev.md
+++ b/docs/develop/tag_usage_dev.md
@@ -314,6 +314,7 @@ ip 选择器，支持静态 ip 或动态 ip 的单选和多选。
   - `pubKey`: 加密公钥
   - `disabled`：设置是否禁用组件
   - `canUseVar`: 是否可以使用全局变量，默认为true
+  - `textareaMode`: 手动输入密码时，表单类型为textarea，默认为false
   - `value`：加密后的密码值
 
 **方法**
diff --git a/en_docs/develop/tag_usage_dev.md b/en_docs/develop/tag_usage_dev.md
index cc9649b9a7..2d0568e069 100644
--- a/en_docs/develop/tag_usage_dev.md
+++ b/en_docs/develop/tag_usage_dev.md
@@ -316,6 +316,7 @@ Password input box.
   - `pubKey`: crypto public key
   - `disabled`: set whether this component is disabled.
   - `canUseVar`: whether global variables can be used, which defaults to true
+  - `textareaMode`: When entering a password manually, the form type is textarea and the default is false
   - `value`: the encrypted password value
 
 **Methods**
diff --git a/frontend/desktop/src/components/common/RenderForm/RenderForm.vue b/frontend/desktop/src/components/common/RenderForm/RenderForm.vue
index 8404f68c22..07aff3fa97 100644
--- a/frontend/desktop/src/components/common/RenderForm/RenderForm.vue
+++ b/frontend/desktop/src/components/common/RenderForm/RenderForm.vue
@@ -292,11 +292,8 @@
                             break
                         case 'password':
                             val = {
-                                type: 'object',
-                                value: {
-                                    tag: 'value',
-                                    value: ''
-                                }
+                                tag: 'value',
+                                value: ''
                             }
                             break
                         default:
diff --git a/frontend/desktop/src/components/common/RenderForm/tags/TagPassword.vue b/frontend/desktop/src/components/common/RenderForm/tags/TagPassword.vue
index 863b55d139..4f77febd5c 100644
--- a/frontend/desktop/src/components/common/RenderForm/tags/TagPassword.vue
+++ b/frontend/desktop/src/components/common/RenderForm/tags/TagPassword.vue
@@ -16,15 +16,28 @@
                 <bk-option id="value" :name="$t('password_手动输入')"></bk-option>
                 <bk-option id="variable" :name="$t('password_使用密码变量')"></bk-option>
             </bk-select>
-            <input
-                v-if="localVal.tag === 'value'"
-                class="value-input"
-                type="password"
-                :value="inputText"
-                :placeholder="inputPlaceholder"
-                @input="handleInput"
-                @focus="handleFocus"
-                @blur="handleBlur" />
+            <template v-if="localVal.tag === 'value'">
+                <input
+                    v-if="!textareaMode"
+                    class="value-input"
+                    type="password"
+                    :value="inputText"
+                    :placeholder="inputPlaceholder"
+                    @input="handleInput"
+                    @focus="handleFocus"
+                    @blur="handleBlur" />
+                <textarea
+                    v-else
+                    class="value-textarea"
+                    type="textarea"
+                    rows="4"
+                    :value="inputText"
+                    :placeholder="inputPlaceholder"
+                    @input="handleTextareaInput"
+                    @focus="handleFocus"
+                    @blur="handleBlur">
+                </textarea>
+            </template>
             <bk-select v-else class="select-var" :value="localVal.value" @selected="handleSelectVariable">
                 <bk-option v-for="item in variables" :key="item.id" :id="item.id" :name="item.name"></bk-option>
             </bk-select>
@@ -51,6 +64,11 @@
             required: false,
             default: true
         },
+        textareaMode: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
         disabled: {
             type: Boolean,
             required: false,
@@ -125,6 +143,12 @@
                 this.localVal.value = e.target.value
                 this.inputPlaceholder = ''
             },
+            handleTextareaInput (e) {
+                console.log('textarea input: ', e.target.value)
+                this.localVal.value = e.target.value
+                this.inputPlaceholder = ''
+                e.target.value = e.target.value.replace(/[^\n]/g, '·')
+            },
             handleFocus () {
                 if (this.localVal.value.length > 0) {
                     this.inputPlaceholder = i18n.t('要修改密码请点击后重新输入密码')
@@ -135,7 +159,7 @@
             },
             // 输入框失焦后执行加密逻辑
             handleBlur () {
-                this.inputText = this.localVal.value
+                this.inputText = this.textareaMode ? this.localVal.value.replace(/[^\n]/g, '·') : this.localVal.value
                 const encryptedVal = this.encryptPassword()
                 this.localVal.value = encryptedVal
                 this.change()
@@ -171,7 +195,7 @@
 <style lang="scss" scoped>
     .password-edit-wrapper {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         .select-type {
             flex: 0 0 120px;
             border-right: none;
@@ -199,6 +223,26 @@
                 background-color: #ffffff;
             }
         }
+        .value-textarea {
+            flex: 1;
+            padding: 6px 10px;
+            width: 100%;
+            line-height: 16px;
+            color: #63656e;
+            background-color: #fff;
+            border-top-right-radius: 2px;
+            border-bottom-right-radius: 2px;
+            font-size: 12px;
+            border: 1px solid #c4c6cc;
+            text-align: left;
+            outline: none;
+            resize: none;
+            // -webkit-text-security: disc !important;
+            &:focus {
+                border-color: #3a84ff;
+                background-color: #ffffff;
+            }
+        }
         .select-var {
             flex: 1;
             border-top-left-radius: 0;