fix: 环境编辑加密 value 清空交互处理，icon 位置调整 (#2394)

Author: leafage-collb

webfe/package_vue/src/views/dev-center/app/engine/cloud-deployment/deploy-env.vue

@@ -1294,7 +1294,7 @@ a.is-disabled {
 }
 .built-in-env {
   text-decoration: none !important;
-  color: #699df4;
+  color: #3a84ff;
 
   &:hover {
     cursor: pointer;

webfe/package_vue/src/views/dev-center/app/engine/env-vars/env-var-table.vue

@@ -103,8 +103,8 @@
             <bk-form-item
               v-else
               :property="`varList.${$index}.value`"
-              :rules="rules.value"
-              ext-cls="var-value-form-item"
+              :rules="getValueRules($index)"
+              :icon-offset="varList[$index].is_sensitive && !varList[$index].isNew ? 28 : 8"
             >
               <div class="input-wrapper">
                 <bk-input
@@ -113,7 +113,7 @@
                   :password-icon="[]"
                   type="text"
                   :ext-cls="row.value === ENCRYPTED_PLACEHOLDER ? 'encrypted-input' : ''"
-                  @input="(value, event) => handleValueInput(row, event, value)"
+                  @focus="handleValueFocus(row)"
                   @keydown="(value, event) => handleKeyDown(`descriptionInput${$index}`, event)"
                 ></bk-input>
                 <i
@@ -288,18 +288,6 @@ export default {
       // 批量编辑模式
       isBatchEditing: false,
       rules: {
-        value: [
-          {
-            required: true,
-            message: this.$t('VALUE是必填项'),
-            trigger: 'blur',
-          },
-          {
-            max: 2048,
-            message: this.$t('不能超过2048个字符'),
-            trigger: 'blur',
-          },
-        ],
         description: [
           {
             max: 200,
@@ -378,6 +366,25 @@ export default {
       return baseRules;
     },
 
+    // 动态生成value的校验规则
+    getValueRules(index) {
+      const currentRow = this.formData.varList[index];
+      const isSensitiveAndNotNew = currentRow?.is_sensitive && !currentRow?.isNew;
+      const baseRules = [
+        {
+          required: true,
+          message: this.$t('VALUE是必填项'),
+          trigger: isSensitiveAndNotNew ? 'change' : 'blur',
+        },
+        {
+          max: 2048,
+          message: this.$t('不能超过2048个字符'),
+          trigger: 'blur',
+        },
+      ];
+      return baseRules;
+    },
+
     // 校验KEY是否重复
     validateDuplicateKey(value, index) {
       if (!value) return true;
@@ -408,12 +415,9 @@ export default {
       this.formData.varList = [...this.filteredVarList];
     },
 
-    // 处理输入事件，特殊按钮清空输入框
-    handleValueInput(row, event) {
-      if (!row.is_sensitive || row.isNew) {
-        return;
-      }
-      if (row.value.startsWith(this.ENCRYPTED_PLACEHOLDER.substring(0, 5))) {
+    // 聚焦后清空加密占位符
+    handleValueFocus(row) {
+      if (row.is_sensitive && !row.isNew && row.value === this.ENCRYPTED_PLACEHOLDER) {
         row.value = '';
       }
     },
@@ -690,7 +694,7 @@ export default {
       }
       i.paasng-undo {
         position: absolute;
-        right: 10px;
+        right: 8px;
         top: 50%;
         transform: translateY(-50%);
         font-size: 16px;
@@ -702,9 +706,6 @@ export default {
         }
       }
     }
-    .var-value-form-item.is-error .input-wrapper i.paasng-undo {
-      right: 28px;
-    }
     .key-wrapper {
       display: flex;
       align-items: center;