feat: Variable Splitting Node and Parameter Extraction Node

ui/src/components/dynamics-form/items/table/ProgressTableItem.vue

@@ -55,7 +55,7 @@ const view_card = computed(() => {
 </script>
 <style lang="scss" scoped>
 @mixin valueScss() {
-  color: rgba(31, 35, 41, 1);
+  color: var(--el-text-color-primary);
   font-weight: 500;
   font-size: 12px;
   line-height: 22px;

ui/src/components/folder-tree/CreateFolderDialog.vue

@@ -24,11 +24,11 @@
           @blur="folderForm.name = folderForm.name.trim()"
         />
       </el-form-item>
-      <el-form-item :label="$t('components.folder.description')" prop="desc">
+      <el-form-item :label="$t('common.desc')" prop="desc">
         <el-input
           v-model="folderForm.desc"
           type="textarea"
-          :placeholder="$t('components.folder.descriptionPlaceholder')"
+          :placeholder="$t('common.descPlaceholder')"
           maxlength="128"
           show-word-limit
           :autosize="{ minRows: 3 }"

ui/src/components/layout-container/index.vue

@@ -56,7 +56,7 @@ const showBack = computed(() => {
       position: absolute;
       top: 36px;
       right: -12px;
-      box-shadow: 0px 5px 10px 0px rgba(31, 35, 41, 0.1);
+      box-shadow: 0px 5px 10px 0px var(--app-text-color-light-1);
       z-index: 1;
     }
 

ui/src/locales/lang/en-US/common.ts

@@ -78,6 +78,8 @@ export default {
   selectPlaceholder: 'Please select',
   title: 'Title',
   content: 'Content',
+  desc: 'Description',
+  descPlaceholder: 'Please enter description',
   rename: 'Rename',
   renameSuccess: 'Successful',
   EditAvatarDialog: {
@@ -114,4 +116,5 @@ export default {
     label: 'Prompt',
     placeholder: 'Please enter prompt',
   },
+  variable: 'Variable',
 }

ui/src/locales/lang/en-US/components.ts

@@ -15,8 +15,6 @@ export default {
     addChildFolder: 'Add Child Folder',
     editFolder: 'Edit Folder',
     folderNamePlaceholder: 'Please enter a name',
-    description: 'Description',
-    descriptionPlaceholder: 'Please enter a description',
     requiredMessage: 'Please select a folder',
     deleteConfirmMessage: 'Folders with resources will be deleted, please be cautious.',
   },

ui/src/locales/lang/en-US/views/application-workflow.ts

@@ -432,23 +432,21 @@ You are a master of problem optimization, adept at accurately inferring user int
       text: 'Used to split variables',
       result: 'Result',
       splitVariables: 'Split Variables',
+      inputVariables: 'Input Variable',
+      addVariables: 'Add Variables',
+      editVariables: 'Edit Variables',
+      variablePlaceholder: 'Please enter variable',
       expression: {
         label: 'Expression',
         placeholder: 'Please enter expression',
       },
     },
     parameterExtractionNode: {
-      label: '參數提取',
+      label: 'Parameter Extraction',
-      text: '利用 AI 模型提取結構化參數',
+      text: 'Use AI models to extract structured parameters',
-      result: '結果',
-      selectVariables: {
-        label: '選擇變數',
-        placeholder: '請選擇變數',
-      },
       extractParameters: {
-        label: '提取參數',
+        label: 'Extract Parameters',
-        desc: '描述',
+        parameterType: 'Parameter Type',
-        parameterType: '參數類型',
       },
     },
   },

ui/src/locales/lang/en-US/views/application.ts

@@ -43,7 +43,6 @@ export default {
       requiredMessage: 'APP name is required',
     },
     appDescription: {
-      label: 'Description',
       placeholder:
         'Describe the APP scenario and use, e.g.: XXX assistant answering user questions about XXX product usage',
     },

ui/src/locales/lang/en-US/views/tool.ts

@@ -54,11 +54,9 @@ export default {
       requiredMessage: 'Please enter the MCP name',
     },
     toolDescription: {
-      label: 'Description',
       placeholder: 'Please enter a description of the tool',
     },
     mcpDescription: {
-      label: 'Description',
       placeholder: 'Please enter a description of the MCP',
     },
     paramName: {

ui/src/locales/lang/zh-CN/common.ts

@@ -82,6 +82,8 @@ export default {
   selectPlaceholder: '请选择',
   title: '标题',
   content: '内容',
+  desc: '描述',
+  descPlaceholder: '请输入描述',
   rename: '重命名',
   renameSuccess: '重命名成功',
   EditAvatarDialog: {
@@ -117,4 +119,5 @@ export default {
     label: '提示词',
     placeholder: '请输入提示词',
   },
+  variable: '变量',
 }

ui/src/locales/lang/zh-CN/components.ts

@@ -15,9 +15,7 @@ export default {
     addChildFolder: '添加子文件夹',
     editFolder: '编辑文件夹',
     folderNamePlaceholder: '请输入名称',
-    description: '描述',
-    descriptionPlaceholder: '请输入描述',
     requiredMessage: '请选择文件夹',
-    deleteConfirmMessage: '文件夹下的资源会被删除，请谨慎操作。'
+    deleteConfirmMessage: '文件夹下的资源会被删除，请谨慎操作。',
   },
 }

ui/src/locales/lang/zh-CN/dynamics-form.ts

@@ -28,9 +28,6 @@ export default {
     placeholder: '请输入关键字搜索',
   },
   paramForm: {
-    variable: {
-      label: '变量',
-    },
     field: {
       label: '参数',
       placeholder: '请输入参数',

ui/src/locales/lang/zh-CN/views/application-workflow.ts

@@ -50,7 +50,6 @@ export default {
     beautify: '一键美化',
   },
   variable: {
-    label: '变量',
     global: '全局变量',
     chat: '会话变量',
     Referencing: '引用变量',
@@ -443,25 +442,22 @@ export default {
     variableSplittingNode: {
       label: '变量拆分',
       text: '用于拆分变量',
-      result: '结果',
       splitVariables: '拆分变量',
+      inputVariables: '输入变量',
+      addVariables: '添加变量',
+      editVariables: '编辑变量',
+      variablePlaceholder: '请输入变量',
       expression: {
         label: '表达式',
         placeholder: '请输入表达式',
       },
     },
     parameterExtractionNode: {
-      label: '參數提取',
+      label: '参数提取',
-      text: '利用 AI 模型提取結構化參數',
+      text: '利用 AI 模型提取结构化参数',
-      result: '結果',
-      selectVariables: {
-        label: '選擇變量',
-        placeholder: '請選擇變量',
-      },
       extractParameters: {
-        label: '提取參數',
+        label: '提取参数',
-        desc: '描述',
+        parameterType: '参数类型',
-        parameterType: '參數類型',
       },
     },
   },

ui/src/locales/lang/zh-CN/views/application.ts

@@ -42,7 +42,6 @@ export default {
       requiredMessage: '请输入应用名称',
     },
     appDescription: {
-      label: '描述',
       placeholder: '描述该应用的应用场景及用途，如：XXX 小助手回答用户提出的 XXX 产品使用问题',
     },
     appType: {

ui/src/locales/lang/zh-CN/views/tool.ts

@@ -48,11 +48,9 @@ export default {
       requiredMessage: '请输入MCP名称',
     },
     toolDescription: {
-      label: '描述',
       placeholder: '请输入工具的描述',
     },
     mcpDescription: {
-      label: '描述',
       placeholder: '请输入MCP的描述',
     },
     paramName: {

ui/src/locales/lang/zh-Hant/common.ts

@@ -78,6 +78,8 @@ export default {
   selectPlaceholder: '請選擇',
   title: '標題',
   content: '内容',
+  desc: '描述',
+  descPlaceholder: '請輸入描述',
   rename: '重命名',
   renameSuccess: '重命名成功',
   EditAvatarDialog: {
@@ -113,4 +115,5 @@ export default {
     label: '提示詞',
     placeholder: '請輸入提示詞',
   },
+  variable: '變量',
 }

ui/src/locales/lang/zh-Hant/components.ts

@@ -15,8 +15,6 @@ export default {
     addChildFolder: '添加子文件夾',
     editFolder: '編輯文件夾',
     folderNamePlaceholder: '請輸入名稱',
-    description: '描述',
-    descriptionPlaceholder: '請輸入描述',
     requiredMessage: '請選擇文件夾',
     deleteConfirmMessage: '文件夹下的資源會被刪除，請謹慎操作。',
   },

ui/src/locales/lang/zh-Hant/views/application-workflow.ts

@@ -418,6 +418,10 @@ export default {
       text: '用於拆分變量',
       result: '結果',
       splitVariables: '拆分變量',
+      inputVariables: '輸入變量',
+      addVariables: '添加變量',
+      editVariables: '編輯變量',
+      variablePlaceholder: '請輸入變量',
       expression: {
         label: '表達式',
         placeholder: '請輸入表達式',
@@ -425,16 +429,10 @@ export default {
     },
     parameterExtractionNode: {
       label: '參數提取',
-      text: ' ',
+      text: '利用 AI 模型提取結構化參數',
-      result: '結果',
-      selectVariables: {
-        label: ' ',
-        placeholder: '請選擇要提取的參數',
-      },
       extractParameters: {
         label: '提取參數',
-        desc: '從文本中提取參數',
+        parameterType: '參數類型',
-        parameterType: 'Parameter Type',
       },
     },
   },

ui/src/locales/lang/zh-Hant/views/application.ts

@@ -39,7 +39,6 @@ export default {
       requiredMessage: '請輸入應用名稱',
     },
     appDescription: {
-      label: '描述',
       placeholder: '描述該應用的應用場景及用途，如：XXX 小助手回答用戶提出的 XXX 產品使用問題',
     },
     appType: {

ui/src/locales/lang/zh-Hant/views/tool.ts

@@ -51,11 +51,9 @@ export default {
       requiredMessage: '請輸入MCP名稱',
     },
     toolDescription: {
-      label: '描述',
       placeholder: '請輸入工具的描述',
     },
     mcpDescription: {
-      label: '描述',
       placeholder: '請輸入MCP的描述',
     },
     paramName: {

ui/src/styles/element-plus.scss

@@ -4,6 +4,7 @@
   --el-text-color-primary: #1f2329;
   --el-border-radius-base: 6px;
   --el-menu-item-height: 45px;
+  --el-border-color: rgba(31, 35, 41, 0.15);
 }
 
 .el-avatar {
@@ -183,6 +184,7 @@
 .el-table {
   --el-table-header-bg-color: var(--app-layout-bg-color);
   --el-table-text-color: var(--app-text-color);
+  --el-table-border-color: #DEE0E3;
   font-weight: 400;
   thead {
     color: var(--app-text-color-secondary);

ui/src/views/application-overview/xpack-component/XPackDisplaySettingDialog.vue

@@ -706,7 +706,7 @@ defineExpose({ open })
     background-repeat: no-repeat;
     background-position: center;
     background-size: auto 100%;
-    box-shadow: 0px 4px 8px 0px rgba(31, 35, 41, 0.1);
+    box-shadow: 0px 4px 8px 0px var(--app-text-color-light-1);
     overflow: hidden;
     width: 330px;
     height: 520px;

ui/src/views/application-workflow/index.vue

@@ -673,7 +673,7 @@ onBeforeUnmount(() => {
   border-radius: 8px;
   border: 1px solid #ffffff;
   background: var(--dialog-bg-gradient-color);
-  box-shadow: 0px 4px 8px 0px rgba(31, 35, 41, 0.1);
+  box-shadow: 0px 4px 8px 0px var(--app-text-color-light-1);
   position: fixed;
   bottom: 16px;
   right: 16px;

ui/src/views/application/ApplicationSetting.vue

@@ -61,7 +61,7 @@
                     @blur="applicationForm.name = applicationForm.name?.trim()"
                   />
                 </el-form-item>
-                <el-form-item :label="$t('views.application.form.appDescription.label')">
+                <el-form-item :label="$t('common.desc')">
                   <el-input
                     v-model="applicationForm.desc"
                     type="textarea"

ui/src/views/application/component/CopyApplicationDialog.vue

@@ -23,7 +23,7 @@
           show-word-limit
         />
       </el-form-item>
-      <el-form-item :label="$t('views.application.form.appDescription.label')">
+      <el-form-item :label="$t('common.desc')">
         <el-input
           v-model="applicationForm.desc"
           type="textarea"

ui/src/views/application/component/CreateApplicationDialog.vue

@@ -28,7 +28,7 @@
           @blur="applicationForm.name = applicationForm.name?.trim()"
         />
       </el-form-item>
-      <el-form-item :label="$t('views.application.form.appDescription.label')">
+      <el-form-item :label="$t('common.desc')">
         <el-input
           v-model="applicationForm.desc"
           type="textarea"

ui/src/views/chat/component/HistoryPanel.vue

@@ -50,11 +50,7 @@
           </el-tooltip>
         </div>
       </div>
-      <div
+      <div v-show="!isPcCollapse" class="left-height" v-if="showHistory">
-        v-show="!isPcCollapse"
-        class="left-height"
-        v-if="showHistory"
-      >
         <el-scrollbar>
           <div class="p-16 pt-0">
             <common-list
@@ -111,11 +107,7 @@
         <template #title>{{ $t('chat.createChat') }}</template>
       </el-menu-item>
 
-      <el-sub-menu
+      <el-sub-menu v-show="isPcCollapse" index="2" v-if="showHistory">
-        v-show="isPcCollapse"
-        index="2"
-        v-if="showHistory"
-      >
         <template #title>
           <AppIcon iconName="app-history-outlined" />
         </template>
@@ -285,7 +277,7 @@ function refreshFieldTitle(chatId: string, abstract: string) {
     padding-left: 8px;
     padding-right: 8px;
     &:hover {
-      background-color: rgba(31, 35, 41, 0.1);
+      background-color: var(--app-text-color-light-1);
     }
     &.is-active {
       background-color: #ffffff;

ui/src/views/chat/embed/component/ChatHistoryDrawer.vue

@@ -152,7 +152,6 @@ const logout = () => {
       params: { accessToken: chatUser.accessToken },
       query: route.query,
     })
-
   })
 }
 </script>
@@ -168,7 +167,7 @@ const logout = () => {
       position: absolute;
       top: 20px;
       right: -13px;
-      box-shadow: 0px 5px 10px 0px rgba(31, 35, 41, 0.1);
+      box-shadow: 0px 5px 10px 0px var(--app-text-color-light-1);
       z-index: 1;
       width: 24px;
       height: 24px;

ui/src/views/chat/pc/index.vue

@@ -542,7 +542,7 @@ function closeExecutionDetail() {
       position: absolute;
       top: 20px;
       right: -13px;
-      box-shadow: 0px 5px 10px 0px rgba(31, 35, 41, 0.1);
+      box-shadow: 0px 5px 10px 0px var(--app-text-color-light-1);
       z-index: 1;
       width: 24px;
       height: 24px;

ui/src/views/knowledge/component/SyncWebDialog.vue

@@ -97,7 +97,7 @@ defineExpose({ open })
 }
 .active-breadcrumb {
   font-size: 16px;
-  color: rgba(31, 35, 41, 1);
+  color: var(--el-text-color-primary);
   font-weight: 500;
   line-height: 24px;
 }

ui/src/views/model/component/CreateModelDialog.vue

@@ -139,9 +139,7 @@
           :description="$t('views.model.tip.emptyMessage1')"
         />
         <el-empty
-          v-else-if="
+          v-else-if="base_form_data.model_type === 'RERANKER'"
-            base_form_data.model_type === 'RERANKER'
-          "
           :description="$t('views.model.tip.emptyMessage2')"
         />
         <div class="flex-between mb-8" v-else>
@@ -149,7 +147,11 @@
           <el-button
             type="text"
             @click.stop="openAddDrawer()"
-            :disabled="!['TTS', 'LLM', 'IMAGE', 'TTI', 'TTV', 'ITV','STT', 'EMBEDDING'].includes(base_form_data.model_type)"
+            :disabled="
+              !['TTS', 'LLM', 'IMAGE', 'TTI', 'TTV', 'ITV', 'STT', 'EMBEDDING'].includes(
+                base_form_data.model_type,
+              )
+            "
           >
             <AppIcon iconName="app-add-outlined" class="mr-4" /> {{ $t('common.add') }}
           </el-button>
@@ -464,7 +466,7 @@ defineExpose({ open, close })
 
 .active-breadcrumb {
   font-size: 16px;
-  color: rgba(31, 35, 41, 1);
+  color: var(--el-text-color-primary);
   font-weight: 500;
   line-height: 24px;
 }

ui/src/views/model/component/EditModel.vue

@@ -289,7 +289,7 @@ defineExpose({ open, close })
 
 .active-breadcrumb {
   font-size: 16px;
-  color: rgba(31, 35, 41, 1);
+  color: var(--el-text-color-primary);
   font-weight: 500;
   line-height: 24px;
 }

ui/src/views/paragraph/component/ParagraphCard.vue

@@ -33,11 +33,7 @@
             v-if="permissionPrecise.doc_edit(id)"
           >
             <el-button text @click.stop="editParagraph(data)">
-              <AppIcon
+              <AppIcon iconName="app-edit" :size="16" class="color-secondary"></AppIcon>
-                iconName="app-edit"
-                :size="16"
-                class="color-secondary"
-              ></AppIcon>
             </el-button>
           </el-tooltip>
         </span>
@@ -324,7 +320,7 @@ watch(dialogVisible, (val: boolean) => {
   position: relative;
   overflow: inherit;
   &:hover {
-    background: rgba(31, 35, 41, 0.1);
+    background: var(--app-text-color-light-1);
     border: 1px solid #dee0e3;
   }
   &.disabled {

ui/src/views/tool/McpToolFormDrawer.vue

@@ -63,7 +63,7 @@
           </div>
         </el-form-item>
 
-        <el-form-item :label="$t('views.tool.form.mcpDescription.label')">
+        <el-form-item :label="$t('common.desc')">
           <el-input
             v-model="form.desc"
             type="textarea"
@@ -78,7 +78,7 @@
           {{ $t('views.tool.form.mcp.title') }}
         </h4>
 
-        <el-form-item :label="$t('views.tool.form.mcpDescription.label')" prop="code">
+        <el-form-item prop="code">
           <template #label>
             {{ $t('views.tool.form.mcp.label') }}
             <span class="color-danger">*</span>
@@ -98,7 +98,9 @@
 
     <template #footer>
       <div>
-        <el-button :loading="loading" @click="testConnection">{{ $t('views.system.test') }}</el-button>
+        <el-button :loading="loading" @click="testConnection">{{
+          $t('views.system.test')
+        }}</el-button>
         <el-button :loading="loading" @click="visible = false">{{ $t('common.cancel') }}</el-button>
         <el-button
           type="primary"

ui/src/views/tool/ToolFormDrawer.vue

@@ -60,7 +60,7 @@
           </div>
         </el-form-item>
 
-        <el-form-item :label="$t('views.tool.form.toolDescription.label')">
+        <el-form-item :label="$t('common.desc')">
           <el-input
             v-model="form.desc"
             type="textarea"

ui/src/views/tool/component/McpToolConfigDialog.vue

@@ -52,7 +52,7 @@ defineExpose({ open })
     position: absolute;
     top: 12px;
     right: 12px;
-    box-shadow: 0px 4px 8px 0px rgba(31, 35, 41, 0.1);
+    box-shadow: 0px 4px 8px 0px var(--app-text-color-light-1);
     z-index: 2;
   }
   .config-textarea {

ui/src/workflow/common/data.ts

@@ -166,15 +166,15 @@ export const questionNode = {
 }
 export const variableSplittingNode = {
   type: WorkflowType.VariableSplittingNode,
-  text: t('views.applicationWorkflow.nodes.variableSplittingNode.text', '变量拆分'),
+  text: t('views.applicationWorkflow.nodes.variableSplittingNode.text'),
-  label: t('views.applicationWorkflow.nodes.variableSplittingNode.label', '变量拆分'),
+  label: t('views.applicationWorkflow.nodes.variableSplittingNode.label'),
   height: 345,
   properties: {
-    stepName: t('views.applicationWorkflow.nodes.variableSplittingNode.label', '变量拆分'),
+    stepName: t('views.applicationWorkflow.nodes.variableSplittingNode.label'),
     config: {
       fields: [
         {
-          label: t('views.applicationWorkflow.nodes.variableSplittingNode.result', '结果'),
+          label: t('common.result'),
           value: 'result',
         },
       ],
@@ -184,15 +184,16 @@ export const variableSplittingNode = {
 
 export const parameterExtractionNode = {
   type: WorkflowType.ParameterExtractionNode,
-  text: t('views.applicationWorkflow.nodes.parameterExtractionNode.text', '变量拆分'),
+  text: t('views.applicationWorkflow.nodes.parameterExtractionNode.text'),
-  label: t('views.applicationWorkflow.nodes.parameterExtractionNode.label', '变量拆分'),
+  label: t('views.applicationWorkflow.nodes.parameterExtractionNode.label'),
   height: 345,
   properties: {
-    stepName: t('views.applicationWorkflow.nodes.parameterExtractionNode.label', '变量拆分'),
+    width: 430,
+    stepName: t('views.applicationWorkflow.nodes.parameterExtractionNode.label'),
     config: {
       fields: [
         {
-          label: t('views.applicationWorkflow.nodes.parameterExtractionNode.result', '结果'),
+          label: t('common.result'),
           value: 'result',
         },
       ],
@@ -633,11 +634,16 @@ export const menuNodes = [
   },
   {
     label: t('views.applicationWorkflow.nodes.classify.businessLogic'),
-    list: [conditionNode, formNode, variableAssignNode, replyNode, loopNode],
+    list: [conditionNode, formNode, replyNode, loopNode],
   },
   {
-    label: t('views.applicationWorkflow.nodes.classify.dataProcessing', '数据处理'),
+    label: t('views.applicationWorkflow.nodes.classify.dataProcessing'),
-    list: [variableSplittingNode, parameterExtractionNode, variableAggregationNode],
+    list: [
+      variableAssignNode,
+      variableAggregationNode,
+      variableSplittingNode,
+      parameterExtractionNode,
+    ],
   },
   {
     label: t('views.applicationWorkflow.nodes.classify.other'),

ui/src/workflow/icons/variable-aggregation-node-icon.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-avatar shape="square" style="background: #7F3BF5">
+  <el-avatar shape="square" class="avatar-blue">
     <img src="@/assets/workflow/icon_aggregation.svg" style="width: 100%" alt="" />
   </el-avatar>
 </template>

ui/src/workflow/icons/variable-splitting-node-icon.vue

@@ -1,6 +1,6 @@
 <template>
   <el-avatar shape="square" class="avatar-blue">
-    <img src="@/assets/workflow/icon_variable_splitting.svg" style="width: 65%" alt="" />
+    <img src="@/assets/workflow/icon_variable_splitting.svg" style="width: 100%" alt="" />
   </el-avatar>
 </template>
 <script setup lang="ts"></script>

ui/src/workflow/nodes/base-node/component/ApiFieldFormDialog.vue

@@ -44,12 +44,12 @@
         />
       </el-form-item>
       <el-form-item
-        :label="$t('views.application.form.appDescription.label')"
+        :label="$t('common.desc')"
         prop="desc"
         :rules="{
           required: form.is_required,
           message:
-            $t('common.inputPlaceholder') + $t('views.application.form.appDescription.label'),
+            $t('common.inputPlaceholder') + $t('common.desc'),
           trigger: 'blur',
         }"
       >

ui/src/workflow/nodes/base-node/component/ApiInputFieldTable.vue

@@ -20,7 +20,7 @@
         </span>
       </template>
     </el-table-column>
-    <el-table-column prop="desc" :label="$t('views.application.form.appDescription.label')">
+    <el-table-column prop="desc" :label="$t('common.desc')">
       <template #default="{ row }">
         <span class="ellipsis-1" :title="row.desc">
           {{ row.desc }}

ui/src/workflow/nodes/parameter-extraction-node/component/ParametersFieldDialog.vue

@@ -69,27 +69,13 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item
+      <el-form-item :label="$t('common.desc')" prop="desc">
-        :label="
-          $t(
-            'views.applicationWorkflow.nodes.parameterExtractionNode.extractParameters.desc',
-            '描述',
-          )
-        "
-        prop="desc"
-      >
         <el-input
           v-model="form.desc"
           style="width: 100%"
           :rows="2"
           type="textarea"
-          :placeholder="
+          :placeholder="$t('common.descPlaceholder')"
-            $t('common.inputPlaceholder') +
-            $t(
-              'views.applicationWorkflow.nodes.parameterExtractionNode.extractParameters.desc',
-              '描述',
-            )
-          "
         />
       </el-form-item>
     </el-form>
@@ -97,7 +83,7 @@
       <span class="dialog-footer">
         <el-button @click.prevent="close"> {{ $t('common.cancel') }} </el-button>
         <el-button type="primary" @click="submit(fieldFormRef)" :loading="loading">
-          {{ isEdit ? $t('common.save') : $t('common.add') }}
+          {{ $t('common.save') }}
         </el-button>
       </span>
     </template>

ui/src/workflow/nodes/parameter-extraction-node/component/ParametersFieldTable.vue

@@ -1,34 +1,23 @@
 <template>
-  <div class="flex-between mb-16">
+  <div class="flex-between w-full">
-    <h5 class="break-all ellipsis lighter" style="max-width: 80%">
+    <h5 class="break-all lighter">
-      {{
+      {{ $t('views.applicationWorkflow.nodes.parameterExtractionNode.extractParameters.label') }}
-        $t(
+      <span class="color-danger">*</span>
-          'views.applicationWorkflow.nodes.parameterExtractionNode.extractParameters.label',
-          '提取参数',
-        )
-      }}
     </h5>
-    <div>
+    <span class="ml-4" style="margin-top: -4px">
-      <span class="ml-4">
       <el-button link type="primary" @click="openAddDialog()">
         <AppIcon iconName="app-add-outlined" class="mr-4"></AppIcon>
-          {{ $t('common.add') }}
       </el-button>
     </span>
   </div>
-  </div>
   <el-table
     v-if="props.nodeModel.properties.node_data.variable_list?.length > 0"
     :data="props.nodeModel.properties.node_data.variable_list"
-    class="mb-16"
     ref="tableRef"
     row-key="field"
+    class="border-l border-r"
   >
-    <el-table-column
+    <el-table-column prop="field" :label="$t('dynamicsForm.paramForm.field.label')" width="90">
-      prop="field"
-      :label="$t('dynamicsForm.paramForm.field.label', '变量')"
-      width="95"
-    >
       <template #default="{ row }">
         <span :title="row.field" class="ellipsis-1">{{ row.field }}</span>
       </template>
@@ -52,14 +41,10 @@
       "
     >
       <template #default="{ row }">
-        <span>
+        <el-tag type="info" class="info-tag"> {{ row.parameter_type }}</el-tag>
-          <span :title="row.parameter_type" class="ellipsis-1">
-            {{ row.parameter_type }}
-          </span></span
-        >
       </template>
     </el-table-column>
-    <el-table-column :label="$t('common.operation')" align="left" width="90">
+    <el-table-column :label="$t('common.operation')" align="left" width="80">
       <template #default="{ row, $index }">
         <span class="mr-4">
           <el-tooltip effect="dark" :content="$t('common.modify')" placement="top">
@@ -103,7 +88,7 @@ function deleteField(index: any) {
   inputFieldList.value.splice(index, 1)
   const fields = [
     {
-      label: t('views.applicationWorkflow.nodes.variableSplittingNode.result', '结果'),
+      label: t('common.result'),
       value: 'result',
     },
     ...inputFieldList.value.map((item) => ({ label: item.label, value: item.field })),
@@ -126,7 +111,7 @@ function refreshFieldList(data: any, index: any) {
   ParametersFieldDialogRef.value.close()
   const fields = [
     {
-      label: t('views.applicationWorkflow.nodes.variableSplittingNode.result', '结果'),
+      label: t('common.result'),
       value: 'result',
     },
     ...inputFieldList.value.map((item) => ({ label: item.label, value: item.field })),
@@ -141,7 +126,7 @@ onMounted(() => {
   set(props.nodeModel.properties.node_data, 'variable_list', inputFieldList)
   const fields = [
     {
-      label: t('views.applicationWorkflow.nodes.variableSplittingNode.result', '结果'),
+      label: t('common.result'),
       value: 'result',
     },
     ...inputFieldList.value.map((item) => ({ label: item.label, value: item.field })),

ui/src/workflow/nodes/parameter-extraction-node/index.vue

@@ -1,5 +1,7 @@
 <template>
   <NodeContainer :nodeModel="nodeModel">
+    <h5 class="title-decoration-1 mb-8">{{ $t('views.applicationWorkflow.nodeSetting') }}</h5>
+    <el-card shadow="never" class="card-never" style="--el-card-padding: 12px">
       <el-form
         @submit.prevent
         :model="form_data"
@@ -23,7 +25,7 @@
               <div>
                 <span
                   >{{ $t('views.application.form.aiModel.label')
-                }}<span class="color-danger">*</span></span
+                  }}<span class="color-danger ml-4">*</span></span
                 >
               </div>
 
@@ -51,22 +53,17 @@
           ></ModelSelect>
         </el-form-item>
         <el-form-item
-        :label="
+          prop="input_variable"
-          $t(
+          :rules="{
-            'views.applicationWorkflow.nodes.parameterExtractionNode.selectVariables.label',
+            message: $t('views.applicationWorkflow.variable.placeholder'),
-            '选择变量',
+            trigger: 'blur',
-          )
+            required: true,
-        "
+          }"
         >
           <template #label>
             <div class="flex-between">
               <div>
-              {{
+                {{ $t('views.applicationWorkflow.nodes.variableSplittingNode.inputVariables') }}
-                $t(
-                  'views.applicationWorkflow.nodes.parameterExtractionNode.selectVariables.label',
-                  '选择变量',
-                )
-              }}
                 <span class="color-danger">*</span>
               </div>
             </div>
@@ -75,19 +72,25 @@
             ref="nodeCascaderRef"
             :nodeModel="nodeModel"
             class="w-full"
-          :placeholder="
+            :placeholder="$t('views.applicationWorkflow.variable.placeholder')"
-            $t(
-              'views.applicationWorkflow.nodes.parameterExtractionNode.selectVariables.placeholder',
-            )
-          "
             v-model="form_data.input_variable"
           />
         </el-form-item>
+        <el-form-item
+          prop="variable_list"
+          :rules="{
+            message: $t('views.applicationWorkflow.nodes.parameterExtractionNode.extractParameters.label'),
+            trigger: 'blur',
+            required: true,
+          }"
+        >
           <ParametersFieldTable
             ref="ParametersFieldTableRef"
             :node-model="nodeModel"
           ></ParametersFieldTable>
+        </el-form-item>
       </el-form>
+    </el-card>
     <AIModeParamSettingDialog ref="AIModeParamSettingDialogRef" @refresh="refreshParam" />
   </NodeContainer>
 </template>
@@ -95,7 +98,6 @@
 import { computed, onMounted, ref, inject } from 'vue'
 import NodeContainer from '@/workflow/common/NodeContainer.vue'
 import NodeCascader from '@/workflow/common/NodeCascader.vue'
-import VariableFieldTable from '@/workflow/nodes/variable-splitting/component/VariableFieldTable.vue'
 import AIModeParamSettingDialog from '@/views/application/component/AIModeParamSettingDialog.vue'
 import ParametersFieldTable from '@/workflow/nodes/parameter-extraction-node/component/ParametersFieldTable.vue'
 import { useRoute } from 'vue-router'

ui/src/workflow/nodes/variable-assign-node/index.vue

@@ -11,11 +11,11 @@
     >
       <template v-for="(item, index) in form_data.variable_list" :key="item.id">
         <el-card shadow="never" class="card-never mb-8" style="--el-card-padding: 12px">
-          <el-form-item :label="$t('views.applicationWorkflow.variable.label')">
+          <el-form-item >
             <template #label>
               <div class="flex-between">
                 <div>
-                  {{ $t('views.applicationWorkflow.variable.label') }}
+                  {{ $t('common.variable') }}
                   <span class="color-danger">*</span>
                 </div>
                 <el-button

ui/src/workflow/nodes/variable-splitting/component/VariableFieldDialog.vue

@@ -1,6 +1,10 @@
 <template>
   <el-dialog
-    :title="isEdit ? $t('common.param.editParam') : $t('common.param.addParam')"
+    :title="
+      isEdit
+        ? $t('views.applicationWorkflow.nodes.variableSplittingNode.editVariables')
+        : $t('views.applicationWorkflow.nodes.variableSplittingNode.addVariables')
+    "
     v-model="dialogVisible"
     :close-on-click-modal="false"
     :close-on-press-escape="false"
@@ -16,7 +20,7 @@
       require-asterisk-position="right"
     >
       <el-form-item
-        :label="$t('dynamicsForm.paramForm.field.label')"
+        :label="$t('common.variable')"
         :required="true"
         prop="field"
         :rules="rules.field"
@@ -24,7 +28,9 @@
         <el-input
           v-model="form.field"
           :maxlength="64"
-          :placeholder="$t('dynamicsForm.paramForm.field.placeholder')"
+          :placeholder="
+            $t('views.applicationWorkflow.nodes.variableSplittingNode.variablePlaceholder')
+          "
           show-word-limit
         />
       </el-form-item>
@@ -42,9 +48,7 @@
         />
       </el-form-item>
       <el-form-item
-        :label="
+        :label="$t('views.applicationWorkflow.nodes.variableSplittingNode.expression.label')"
-          $t('views.applicationWorkflow.nodes.variableSplittingNode.expression.label', '表达式')
-        "
         :required="true"
         prop="label"
         :rules="rules.label"
@@ -54,10 +58,7 @@
           :maxlength="64"
           show-word-limit
           :placeholder="
-            $t(
+            $t('views.applicationWorkflow.nodes.variableSplittingNode.expression.placeholder')
-              'views.applicationWorkflow.nodes.variableSplittingNode.expression.placeholder',
-              '请输入表达式',
-            )
           "
         />
       </el-form-item>
@@ -66,7 +67,7 @@
       <span class="dialog-footer">
         <el-button @click.prevent="close"> {{ $t('common.cancel') }} </el-button>
         <el-button type="primary" @click="submit(fieldFormRef)" :loading="loading">
-          {{ isEdit ? $t('common.save') : $t('common.add') }}
+          {{ $t('common.save') }}
         </el-button>
       </span>
     </template>

ui/src/workflow/nodes/variable-splitting/component/VariableFieldTable.vue

@@ -1,27 +1,25 @@
 <template>
-  <div class="flex-between mb-16">
+  <div class="flex-between w-full">
-    <h5 class="break-all ellipsis lighter" style="max-width: 80%">
+    <h5 class="break-all lighter">
-      {{ $t('views.applicationWorkflow.nodes.variableSplittingNode.splitVariables', '拆分变量') }}
+      {{ $t('views.applicationWorkflow.nodes.variableSplittingNode.splitVariables') }}
+      <span class="color-danger">*</span>
     </h5>
-    <div>
+    <span class="ml-4" style="margin-top: -4px">
-      <span class="ml-4">
       <el-button link type="primary" @click="openAddDialog()">
-          <AppIcon iconName="app-add-outlined" class="mr-4"></AppIcon>
+        <AppIcon iconName="app-add-outlined"></AppIcon>
-          {{ $t('common.add') }}
       </el-button>
     </span>
   </div>
-  </div>
   <el-table
     v-if="props.nodeModel.properties.node_data.variable_list?.length > 0"
     :data="props.nodeModel.properties.node_data.variable_list"
-    class="mb-16"
     ref="tableRef"
     row-key="field"
+    class="border-l border-r"
   >
     <el-table-column
       prop="field"
-      :label="$t('dynamicsForm.paramForm.variable.label', '变量')"
+      :label="$t('common.variable')"
       width="95"
     >
       <template #default="{ row }">
@@ -31,11 +29,9 @@
 
     <el-table-column prop="label" :label="$t('dynamicsForm.paramForm.name.label')">
       <template #default="{ row }">
-        <span>
         <span :title="row.label" class="ellipsis-1">
           {{ row.label }}
-          </span></span
+        </span>
-        >
       </template>
     </el-table-column>
     <el-table-column :label="$t('common.operation')" align="left" width="90">
@@ -82,7 +78,7 @@ function deleteField(index: any) {
   inputFieldList.value.splice(index, 1)
   const fields = [
     {
-      label: t('views.applicationWorkflow.nodes.variableSplittingNode.result', '结果'),
+      label: t('common.result'),
       value: 'result',
     },
     ...inputFieldList.value.map((item) => ({ label: item.label, value: item.field })),
@@ -105,7 +101,7 @@ function refreshFieldList(data: any, index: any) {
   VariableFieldDialogRef.value.close()
   const fields = [
     {
-      label: t('views.applicationWorkflow.nodes.variableSplittingNode.result', '结果'),
+      label: t('common.result'),
       value: 'result',
     },
     ...inputFieldList.value.map((item) => ({ label: item.label, value: item.field })),
@@ -120,7 +116,7 @@ onMounted(() => {
   set(props.nodeModel.properties.node_data, 'variable_list', inputFieldList)
   const fields = [
     {
-      label: t('views.applicationWorkflow.nodes.variableSplittingNode.result', '结果'),
+      label: t('common.result'),
       value: 'result',
     },
     ...inputFieldList.value.map((item) => ({ label: item.label, value: item.field })),

ui/src/workflow/nodes/variable-splitting/index.vue

@@ -1,5 +1,7 @@
 <template>
   <NodeContainer :nodeModel="nodeModel">
+    <h5 class="title-decoration-1 mb-8">{{ $t('views.applicationWorkflow.nodeSetting') }}</h5>
+    <el-card shadow="never" class="card-never" style="--el-card-padding: 12px">
       <el-form
         @submit.prevent
         :model="form_data"
@@ -10,12 +12,17 @@
         hide-required-asterisk
       >
         <el-form-item
-        :label="$t('views.applicationWorkflow.nodes.variableSplittingNode.label', '输入变量')"
+          prop="input_variable"
+          :rules="{
+            message: $t('views.applicationWorkflow.variable.placeholder'),
+            trigger: 'blur',
+            required: true,
+          }"
         >
           <template #label>
             <div class="flex-between">
               <div>
-              {{ $t('views.applicationWorkflow.nodes.variableSplittingNode.label', '输入变量') }}
+                {{ $t('views.applicationWorkflow.nodes.variableSplittingNode.inputVariables') }}
                 <span class="color-danger">*</span>
               </div>
             </div>
@@ -28,8 +35,22 @@
             v-model="form_data.input_variable"
           />
         </el-form-item>
-      <VariableFieldTable ref="VariableFieldTableRef" :node-model="nodeModel"></VariableFieldTable>
+
+        <el-form-item
+          prop="variable_list"
+          :rules="{
+            message: $t('views.applicationWorkflow.variable.placeholder'),
+            trigger: 'blur',
+            required: true,
+          }"
+        >
+          <VariableFieldTable
+            ref="VariableFieldTableRef"
+            :node-model="nodeModel"
+          ></VariableFieldTable>
+        </el-form-item>
       </el-form>
+    </el-card>
   </NodeContainer>
 </template>
 <script setup lang="ts">