🔨 perf(server): 部分参数、环境变量配置交互优化取消文本输入框采用标签模式

CHANGELOG-BETA.md

@@ -1,5 +1,13 @@
 # 🚀 版本日志
 
+## 2.11.6.1-beta
+
+### 🐞 解决BUG、优化功能
+
+1. 【server】优化 部分参数、环境变量配置交互优化取消文本输入框采用标签模式（感谢@湘江夜色）
+
+------
+
 ## 2.11.5.2-beta (2024-05-30)
 
 ### 🐞 解决BUG、优化功能

web-vue/src/components/parameterWidget/index.vue

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <a-tag v-for="(data, key) in parameterMap" closable @close="delteParameters(key)" @click="handleEdit(key)">
+      <a-tooltip :title="parameterMap[key]">{{ key }}</a-tooltip>
+    </a-tag>
+    <a-tag
+      :style="{
+        borderStyle: 'dashed'
+      }"
+      @click="handleAdd"
+    >
+      <PlusOutlined /> 添加
+    </a-tag>
+
+    <!-- 编辑区 -->
+    <a-modal
+      v-model:open="editVisible"
+      :z-index="1009"
+      destroy-on-close
+      title="编辑变量"
+      :mask-closable="false"
+      @ok="handleEditOk"
+    >
+      <a-form ref="editForm" :model="temp" :rules="rules" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
+        <a-form-item label="key" name="key">
+          <a-input v-model:value="temp.key" :disabled="!!temp.oldKey" placeholder="请输入 key 的值" />
+        </a-form-item>
+        <a-form-item label="value" name="value">
+          <a-input v-model:value="temp.value" placeholder="请输入 value 的值" />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+<script setup lang="ts">
+import Qs from 'qs'
+const props = withDefaults(
+  defineProps<{
+    value?: String
+  }>(),
+  {
+    value: ''
+  }
+)
+const emit = defineEmits<{ (e: 'update:value', value: object): void }>()
+const useData = ref(props.value)
+
+const parameterMap = ref<Record<String, any>>({})
+
+// 删除
+const delteParameters = (key: number) => {
+  delete parameterMap.value[key]
+  useData.value = Qs.stringify(parameterMap.value)
+}
+
+watch(
+  () => useData.value,
+  (val) => {
+    emit('update:value', val)
+  },
+  {
+    immediate: false
+  }
+)
+watch(
+  () => props.value,
+  (val) => {
+    useData.value = val
+    parameterMap.value = Qs.parse(props.value)
+  },
+  {
+    immediate: true
+  }
+)
+
+// 监听变量变化
+watch(
+  () => parameterMap.value,
+  () => {
+    useData.value = Qs.stringify(parameterMap.value)
+  },
+  {
+    deep: true,
+    immediate: false
+  }
+)
+
+const rules = ref({
+  key: [{ required: true, message: '请输入 key 的值', trigger: 'blur' }]
+})
+
+const editVisible = ref(false)
+const editForm = ref()
+const temp = ref({
+  key: '',
+  value: ''
+})
+
+const handleAdd = () => {
+  editVisible.value = true
+  temp.value = { key: '', value: '' }
+}
+
+const handleEdit = (key) => {
+  editVisible.value = true
+  temp.value = { key: key, value: parameterMap.value[key], oldKey: key }
+}
+
+const handleEditOk = () => {
+  editForm.value.validate().then(() => {
+    editVisible.value = false
+    parameterMap.value[temp.value.key] = temp.value.value
+    if (temp.value.key !== temp.value.oldKey) {
+      delete parameterMap.value[temp.value.oldKey]
+    }
+  })
+}
+</script>

web-vue/src/d.ts/components.d.ts

@@ -142,6 +142,7 @@ declare module 'vue' {
     MessageOutlined: typeof import('@ant-design/icons-vue')['MessageOutlined']
     MinusCircleOutlined: typeof import('@ant-design/icons-vue')['MinusCircleOutlined']
     MoreOutlined: typeof import('@ant-design/icons-vue')['MoreOutlined']
+    ParameterWidget: typeof import('./../components/parameterWidget/index.vue')['default']
     PlayCircleOutlined: typeof import('@ant-design/icons-vue')['PlayCircleOutlined']
     PlusOutlined: typeof import('@ant-design/icons-vue')['PlusOutlined']
     PlusSquareOutlined: typeof import('@ant-design/icons-vue')['PlusSquareOutlined']

web-vue/src/i18n/locales/en_US/pages/node/script-edit.ts

@@ -12,11 +12,11 @@ export default {
     name: 'Name',
     scriptContent: 'Script Content',
     defaultParams: 'Default Parameters',
-    paramDescriptionTemplate: "Parameter {'${index + 1}'} Description`",
+    paramDescriptionTemplate: "Parameter {'${index + 1}'} Description",
     paramDescription: 'Parameter Description',
     paramDescriptionNote: 'Parameter descriptions do not have any practical effect',
     paramDescriptionHint: ',,They are only used to indicate the meaning of the parameters',
-    paramValueTemplate: "Parameter {'${index + 1}'} Value`",
+    paramValueTemplate: "Parameter {'${index + 1}'} Value",
     paramValue: 'Parameter Value',
     newParamValueNote:
       ',After adding new default parameters, you need to fill in the parameter values when manually executing the script',

web-vue/src/i18n/locales/zh-CN/pages/node/script-edit.ts

@@ -12,11 +12,11 @@ export default {
     name: '名称',
     scriptContent: 'Script 内容',
     defaultParams: '默认参数',
-    paramDescriptionTemplate: '参数{index}描述`',
+    paramDescriptionTemplate: '参数{index}描述',
     paramDescription: '参数描述',
     paramDescriptionNote: '参数描述没有实际作用',
     paramDescriptionHint: ',仅是用于提示参数的含义',
-    paramValueTemplate: '参数{index}值`',
+    paramValueTemplate: '参数{index}值',
     paramValue: '参数值',
     newParamValueNote: ',新增默认参数后在手动执行脚本时需要填写参数值',
     addNewParam: '新增参数',

web-vue/src/pages/dispatch/list.vue

@@ -694,7 +694,7 @@
                   <a-segmented
                     v-model:value="dslEditTabKey"
                     :options="[
-                      { label: `DSL {{$tl('c.configuration')}}`, value: 'content' },
+                      { label: `DSL ${$tl('c.configuration')}`, value: 'content' },
                       { label: $tl('c.configurationExample'), value: 'demo' }
                     ]"
                   />
@@ -910,10 +910,11 @@
                 </div>
               </a-form-item>
               <a-form-item v-if="temp.runMode === 'Dsl'" name="dslEnv" :label="$tl('p.dslEnvironmentVariables')">
-                <a-input
+                <!-- <a-input
                   v-model:checked="temp[`${nodeId}_dslEnv`]"
                   placeholder="DSL{{$tl('p.environmentVariables')}},{{$tl('p.exampleVariable')}}=values1&keyvalue2"
-                />
+                /> -->
+                <parameter-widget v-model:value="temp[`${nodeId}_dslEnv`]"></parameter-widget>
               </a-form-item>
               <a-form-item v-show="noFileModes.includes(temp.runMode)" name="token">
                 <template #label>

web-vue/src/pages/docker/buildContainer.vue

@@ -357,7 +357,8 @@
           <a-input v-model:value="temp.runtime" :placeholder="$tl('p.containerRuntime')" />
         </a-form-item>
         <a-form-item :label="$tl('p.containerLabels')">
-          <a-input v-model:value="temp.labels" :placeholder="$tl('p.containerLabelExample')" />
+          <parameter-widget v-model:value="temp.labels"></parameter-widget>
+          <!-- <a-input v-model:value="temp.labels" :placeholder="$tl('p.containerLabelExample')" /> -->
         </a-form-item>
         <a-form-item :label="$tl('p.autoStart')">
           <a-form-item-rest>
@@ -567,6 +568,10 @@ export default {
       }).then((res) => {
         this.buildVisible = true
         const storageOpt = res.data.hostConfig?.storageOpt || { '': '' }
+        const extraHosts = res.data?.hostConfig?.extraHosts || ['']
+        if (!extraHosts.length) {
+          extraHosts.push('')
+        }
 
         this.temp = {
           name: res.data?.name,
@@ -602,7 +607,7 @@ export default {
           networkMode: res.data?.hostConfig?.networkMode,
           runtime: res.data?.hostConfig?.runtime,
           privileged: res.data.hostConfig?.privileged || false,
-          extraHosts: res.data?.hostConfig?.extraHosts || [''],
+          extraHosts: extraHosts,
           ...this.temp
         }
         this.$refs['editForm']?.resetFields()

web-vue/src/pages/docker/list.vue

@@ -106,7 +106,7 @@
       :mask-closable="false"
       @ok="handleEditOk"
     >
-      <a-form ref="editForm" :rules="rules" :model="temp" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
+      <a-form ref="editForm" :rules="rules" :model="temp" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
         <a-form-item :label="$tl('c.containerName')" name="name">
           <a-input v-model:value="temp.name" :placeholder="$tl('c.containerName')" />
         </a-form-item>

web-vue/src/pages/node/node-layout/project/project-edit.vue

@@ -290,10 +290,11 @@
           name="dslEnv"
           :label="$tl('p.dslEnvVariables')"
         >
-          <a-input
+          <!-- <a-input
             v-model:value="temp.dslEnv"
             placeholder="DSL{{$tl('p.environmentVariables')}},{{$tl('p.envExample')}}=values1&keyvalue2"
-          />
+          /> -->
+          <parameter-widget v-model:value="temp.dslEnv"></parameter-widget>
         </a-form-item>
 
         <a-form-item v-show="noFileModes.includes(temp.runMode)" name="autoStart">