feat：下拉类型变量选项编辑优化 TencentBlueKing#10747

# Reviewed, transaction id: 22672
useryuyu · Nov 4, 2024 · e3bbe52 · e3bbe52
1 parent 51649a0
commit e3bbe52
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 2 deletions.
diff --git a/...devops-pipeline/src/components/PipelineEditTabs/components/children/batch-add-options.vue b/...devops-pipeline/src/components/PipelineEditTabs/components/children/batch-add-options.vue
@@ -1,5 +1,23 @@
 <template>
     <section>
+        <div class="batch-add">
+            {{ $t('editPage.batchAddTit') }}
+            <i
+                v-bk-tooltips="{ content: '#demo-html1', width: 225 }"
+                class="bk-icon icon-info-circle"
+            >
+            </i>
+            <div id="demo-html1">
+                <ul id="restore-dots">
+                    <li
+                        v-for="(item, i) in tooltipsText"
+                        :key="i"
+                    >
+                        {{ item }}
+                    </li>
+                </ul>
+            </div>
+        </div>
         <form-field
             :hide-colon="true"
             :desc="$t('editPage.batchAddTips')"
@@ -32,6 +50,15 @@
                 batchInput: ''
             }
         },
+        computed: {
+            tooltipsText () {
+                return [
+                    this.$t('editPage.lineBreak'),
+                    this.$t('editPage.noEnglishCommas'),
+                    this.$t('editPage.formatSupport')
+                ]
+            }
+        },
         methods: {
             handleBatchInput () {
                 this.submitBatchAdd(this.batchInput)
@@ -50,4 +77,26 @@
         cursor: pointer;
         font-size: 12px;
     }
+    .batch-add {
+        display: flex;
+        align-items: center;
+        margin-bottom: 8px;
+        font-size: 14px;
+        color: #63656E;
+
+        .icon-info-circle {
+            width: 14px;
+            height: 14px;
+            margin-left: 9px;
+            color: #979BA5;
+        }
+    }
+    #restore-dots, li{
+        list-style: circle !important;
+        list-style-type: disc !important;
+    }
+    #restore-dots {
+        padding-left: 10px;
+
+    }
 </style>
diff --git a/src/frontend/locale/pipeline/en-US.json b/src/frontend/locale/pipeline/en-US.json
@@ -1047,7 +1047,11 @@
     "alwaysPull": "Always pull on each run",
     "ifNotPresent": "Pull only if not present locally",
     "enableDockerTips": "When using this feature, please ensure that the build machine has Docker installed, and that the user running the third-party build agent has the necessary permissions to operate Docker.",
-    "enabledPrivileged": "Enable Privileged Mode"
+    "enabledPrivileged": "Enable Privileged Mode",
+    "batchAddTit": "Batch Add",
+    "lineBreak": "Separate multiple options with line breaks",
+    "noEnglishCommas": "Each option cannot contain English commas",
+    "formatSupport": "Similar to the HTML select tag, options support value=name / value formats"
   },
   "storeMap": {
     "textarea": "Textarea",

diff --git a/src/frontend/locale/pipeline/zh-CN.json b/src/frontend/locale/pipeline/zh-CN.json
@@ -1046,7 +1046,11 @@
     "alwaysPull": "每次运行时拉取",
     "ifNotPresent": "当本地不存在时才拉取",
     "enableDockerTips": "使用此功能时，请确保构建机已经安装Docker运行环境，且第三方构建机Agent的启动用户拥有Docker的操作权限",
-    "enabledPrivileged": "是否开启特权模式"
+    "enabledPrivileged": "是否开启特权模式",
+    "batchAddTit": "批量添加",
+    "lineBreak": "多个选项用换行符分隔",
+    "noEnglishCommas": "每个选项不能包含英文逗号",
+    "formatSupport": "与 HTML select 标签类似，选项支持 value=name / value 两种格式"
   },
   "storeMap": {
     "textarea": "文本框",