From c9ddc3b6527b74ef4fa02f15befc353fa1dcff0e Mon Sep 17 00:00:00 2001
From: caoxiaozhu <leocaoxiaozhu@gmail.com>
Date: Mon, 13 Jul 2026 16:39:16 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=95=B0=E6=8D=AE=E5=A4=84?=
 =?UTF-8?q?=E7=90=86=E5=90=91=E5=AF=BC=E7=94=9F=E6=88=90=E9=80=89=E9=A1=B9?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BA=E5=B9=B3=E9=93=BA=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

移除生成选项面板的高级设置折叠抽屉，温度、最大输出长度、JSON 模式等配置直接平铺展示，简化非结构化与任务设置步骤的嵌套结构，列表新建按钮文案精简。
---
 .../data-process/DataProcessListView.vue      |   2 +-
 .../create/GenerationOptionsPanel.vue         | 158 +++++-----------
 .../create/StructuredOptionsPanel.vue         |  15 +-
 .../data-process/create/TaskSetupStep.vue     |  21 ++-
 .../create/UnstructuredOptionsPanel.vue       | 170 +++---------------
 5 files changed, 86 insertions(+), 280 deletions(-)

diff --git a/frontend/src/views/data-process/DataProcessListView.vue b/frontend/src/views/data-process/DataProcessListView.vue
index 7a4267d..03f23e0 100644
--- a/frontend/src/views/data-process/DataProcessListView.vue
+++ b/frontend/src/views/data-process/DataProcessListView.vue
@@ -92,7 +92,7 @@ function formatDateTime(value?: string) {
       :data="dataList"
       searchable
       :search-fields="['name']"
-      create-text="新建数据处理任务"
+      create-text="新建数据处理"
       create-to="/data-process/create"
       row-key="id"
       :page-size="10"
diff --git a/frontend/src/views/data-process/create/GenerationOptionsPanel.vue b/frontend/src/views/data-process/create/GenerationOptionsPanel.vue
index 144bb1b..35776dc 100644
--- a/frontend/src/views/data-process/create/GenerationOptionsPanel.vue
+++ b/frontend/src/views/data-process/create/GenerationOptionsPanel.vue
@@ -10,8 +10,6 @@ const props = defineProps<{
   validationMessage?: string
 }>()
 
-const advancedModelSettingsOpen = ref(false)
-
 const emit = defineEmits<{
   'update:options': [value: GenerationControlOptions]
 }>()
@@ -99,64 +97,49 @@ function sectionValidationMessage() {
       </div>
     </div>
 
-    <button
-      type="button"
-      class="advanced-settings-toggle"
-      :aria-expanded="advancedModelSettingsOpen"
-      @click="advancedModelSettingsOpen = !advancedModelSettingsOpen"
-    >
-      <span>
-        <strong>高级设置</strong>
-        <small>温度、最大输出长度与格式约束</small>
-      </span>
-      <i class="fa" :class="advancedModelSettingsOpen ? 'fa-chevron-up' : 'fa-chevron-down'" />
-    </button>
-
-    <div v-if="advancedModelSettingsOpen" class="advanced-settings-panel">
-      <div class="advanced-settings-grid">
-        <label class="config-field">
-          <span class="config-field-label">生成温度 (Temperature)</span>
-          <el-slider
-            :model-value="options.temperature"
-            :min="0"
-            :max="1"
-            :step="0.1"
-            show-input
-            @update:model-value="updateField('temperature', Number($event) || 0)"
-          />
-          <small>较低值输出更确定、保守，较高值输出更多样、有创造性</small>
-        </label>
-
-        <label class="config-field">
-          <span class="config-field-label">最大输出长度 (Max Tokens)</span>
-          <span class="unit-input">
-            <el-input-number
-              :model-value="options.maxTokens"
-              :min="100"
-              :max="8192"
-              :step="256"
-              controls-position="right"
-              @update:model-value="updateField('maxTokens', Number($event) || 1024)"
-            />
-            <span>Token</span>
-          </span>
-          <small>限制单次生成的最大内容长度，防止过度发散</small>
-        </label>
-      </div>
-
-      <div class="json-mode-row">
-        <div class="field-copy">
-          <strong>强制 JSON 格式输出</strong>
-          <small>要求大模型返回纯 JSON 对象，有助于提高下游结构化提取的稳定性</small>
-        </div>
-        <el-switch
-          :model-value="options.jsonMode"
-          inline-prompt
-          active-text="开"
-          inactive-text="关"
-          @update:model-value="updateField('jsonMode', Boolean($event))"
+    <div class="advanced-settings-grid">
+      <label class="config-field">
+        <span class="config-field-label">生成温度 (Temperature)</span>
+        <el-slider
+          :model-value="options.temperature"
+          :min="0"
+          :max="1"
+          :step="0.1"
+          show-input
+          @update:model-value="updateField('temperature', Number($event) || 0)"
         />
+        <small>较低值输出更确定、保守，较高值输出更多样、有创造性</small>
+      </label>
+
+      <label class="config-field">
+        <span class="config-field-label">最大输出长度 (Max Tokens)</span>
+        <span class="unit-input">
+          <el-input-number
+            :model-value="options.maxTokens"
+            :min="100"
+            :max="8192"
+            :step="256"
+            controls-position="right"
+            @update:model-value="updateField('maxTokens', Number($event) || 1024)"
+          />
+          <span>Token</span>
+        </span>
+        <small>限制单次生成的最大内容长度，防止过度发散</small>
+      </label>
+    </div>
+
+    <div class="json-mode-row">
+      <div class="field-copy">
+        <strong>强制 JSON 格式输出</strong>
+        <small>要求大模型返回纯 JSON 对象，有助于提高下游结构化提取的稳定性</small>
       </div>
+      <el-switch
+        :model-value="options.jsonMode"
+        inline-prompt
+        active-text="开"
+        inactive-text="关"
+        @update:model-value="updateField('jsonMode', Boolean($event))"
+      />
     </div>
 
     <p v-if="sectionValidationMessage()" class="generation-validation-message" role="alert">
@@ -297,61 +280,6 @@ function sectionValidationMessage() {
   }
 }
 
-.advanced-settings-toggle {
-  display: flex;
-  width: 100%;
-  min-height: 48px;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  margin-top: 4px;
-  padding: 10px 14px;
-  color: #344054;
-  text-align: left;
-  background: #fff;
-  border: 1px solid #e2e5ec;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: border-color 0.18s ease, background-color 0.18s ease;
-
-  &:hover {
-    background: #f8f7ff;
-    border-color: #b7b2f7;
-  }
-
-  > span {
-    display: grid;
-    gap: 3px;
-  }
-
-  strong {
-    font-size: 13px;
-    font-weight: 600;
-  }
-
-  small {
-    color: #8a93a3;
-    font-size: 12px;
-    line-height: 1.5;
-  }
-
-  i {
-    flex: 0 0 auto;
-    color: #7b8495;
-    font-size: 12px;
-  }
-}
-
-.advanced-settings-panel {
-  display: grid;
-  gap: 16px;
-  margin-top: -8px;
-  padding: 16px;
-  background: #fff;
-  border: 1px solid #e2e5ec;
-  border-radius: 8px;
-}
-
 .advanced-settings-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -401,8 +329,8 @@ function sectionValidationMessage() {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 20px;
-  padding: 14px;
+  gap: 16px;
+  padding: 12px 14px;
   background: #fff;
   border: 1px solid #e2e5ec;
   border-radius: 8px;
diff --git a/frontend/src/views/data-process/create/StructuredOptionsPanel.vue b/frontend/src/views/data-process/create/StructuredOptionsPanel.vue
index edc6029..9aed67d 100644
--- a/frontend/src/views/data-process/create/StructuredOptionsPanel.vue
+++ b/frontend/src/views/data-process/create/StructuredOptionsPanel.vue
@@ -94,19 +94,7 @@ function updatePreprocessOptions(value: Array<string | number | boolean>) {
         :validation-message="validationAttempted ? generationValidationMessage : ''"
         @update:options="updateGenerationOptions"
       />
-      <div class="generation-option-row">
-        <div class="generation-option-copy">
-          <strong>语义丰富表达</strong>
-          <small>使用大模型将问答表述得更自然、柔和</small>
-        </div>
-        <el-switch
-          :model-value="options.semanticEnrichment"
-          inline-prompt
-          active-text="开"
-          inactive-text="关"
-          @update:model-value="updateField('semanticEnrichment', Boolean($event))"
-        />
-      </div>
+
       <div class="generation-option-row">
         <div class="generation-option-copy">
           <strong>每行生成数量</strong>
@@ -192,6 +180,7 @@ function updatePreprocessOptions(value: Array<string | number | boolean>) {
 
 .preprocess-option {
   display: flex;
+  gap: 10px;
   width: 100%;
   min-height: 64px;
   margin-right: 0;
diff --git a/frontend/src/views/data-process/create/TaskSetupStep.vue b/frontend/src/views/data-process/create/TaskSetupStep.vue
index 62ec863..20a9b9a 100644
--- a/frontend/src/views/data-process/create/TaskSetupStep.vue
+++ b/frontend/src/views/data-process/create/TaskSetupStep.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
 import type { ModelItem } from '@/types'
 import type {
   GenerationControlOptions,
@@ -97,17 +97,28 @@ async function validate() {
   if (!formRef.value) return false
   try {
     await formRef.value.validate()
-    if (props.processType === 'structured' && splitTotal.value !== 100) return false
+    if (props.processType === 'structured' && splitTotal.value !== 100) {
+      ElMessage.error('结构化数据处理：数据集划分比例总和必须为 100%')
+      return false
+    }
     if (props.processType === 'unstructured') {
-      if (unstructuredSplitTotal.value !== 100) return false
+      if (unstructuredSplitTotal.value !== 100) {
+        ElMessage.error('非结构化数据处理：数据集划分比例总和必须为 100%')
+        return false
+      }
       if (chunkValidationMessage.value) {
         unstructuredOptionsPanelRef.value?.revealValidation()
+        ElMessage.error(chunkValidationMessage.value)
         return false
       }
     }
-    if (generationValidationMessage.value) return false
+    if (generationValidationMessage.value) {
+      ElMessage.error(generationValidationMessage.value)
+      return false
+    }
     return true
   } catch {
+    ElMessage.error('请完善标红的必填项')
     return false
   }
 }
@@ -117,7 +128,7 @@ defineExpose({ validate })
 
 <template>
   <section class="task-setup-step">
-    <el-form ref="formRef" :model="formModel" :rules="rules" label-position="top">
+    <el-form ref="formRef" :model="formModel" :rules="rules" label-position="top" scroll-to-error>
       <div class="form-section">
         <h3>基本信息</h3>
         <div class="basic-grid">
diff --git a/frontend/src/views/data-process/create/UnstructuredOptionsPanel.vue b/frontend/src/views/data-process/create/UnstructuredOptionsPanel.vue
index c72a333..2f8896a 100644
--- a/frontend/src/views/data-process/create/UnstructuredOptionsPanel.vue
+++ b/frontend/src/views/data-process/create/UnstructuredOptionsPanel.vue
@@ -47,8 +47,6 @@ const UNSTRUCTURED_NUMBER_LIMITS = {
 
 type UnstructuredNumberField = keyof typeof UNSTRUCTURED_NUMBER_LIMITS
 
-const advancedChunkSettingsOpen = ref(props.options.chunkMethod === 'custom')
-
 const smartPreprocessEnabled = computed(() => SMART_PREPROCESS_OPTIONS.every(
   (option) => props.options.preprocessOptions.includes(option),
 ))
@@ -61,14 +59,6 @@ const preserveSpecialContentEnabled = computed(() => (
   && props.options.preserveLists
 ))
 
-watch(() => props.options.chunkMethod, (method) => {
-  if (method === 'custom') advancedChunkSettingsOpen.value = true
-})
-
-watch(() => props.chunkValidationMessage, (message) => {
-  if (message) advancedChunkSettingsOpen.value = true
-})
-
 function updateField<K extends keyof UnstructuredProcessOptions>(
   field: K,
   value: UnstructuredProcessOptions[K],
@@ -117,7 +107,7 @@ function updateUnstructuredNumber(field: UnstructuredNumberField, value: number
 }
 
 function revealValidation() {
-  advancedChunkSettingsOpen.value = true
+  // Advanced settings are now flattened, no need to open toggle
 }
 
 defineExpose({ revealValidation })
@@ -153,6 +143,17 @@ defineExpose({ revealValidation })
           <small>处理姓名、手机号等隐私信息</small>
         </span>
       </label>
+
+      <label class="preprocess-option" :class="{ 'is-checked': preserveSpecialContentEnabled }">
+        <el-checkbox
+          :model-value="preserveSpecialContentEnabled"
+          @update:model-value="updateSpecialContentProtection"
+        />
+        <span class="preprocess-option-copy">
+          <strong>保护表格、代码和列表</strong>
+          <small>避免切分点破坏特殊内容块的完整性</small>
+        </span>
+      </label>
     </div>
   </div>
 
@@ -217,36 +218,6 @@ defineExpose({ revealValidation })
         </span>
         <small>在相邻切片中最多重复保留的上下文，默认 100 Token</small>
       </label>
-    </div>
-
-    <p class="chunk-estimation-note">
-      Token 数为轻量估算值，实际长度以训练使用的模型分词器为准。
-    </p>
-
-    <p v-if="chunkValidationMessage" class="option-validation-message" role="alert">
-      {{ chunkValidationMessage }}
-    </p>
-
-    <button
-      type="button"
-      class="advanced-settings-toggle"
-      :aria-expanded="advancedChunkSettingsOpen"
-      aria-controls="unstructured-advanced-settings"
-      @click="advancedChunkSettingsOpen = !advancedChunkSettingsOpen"
-    >
-      <span>
-        <strong>高级设置</strong>
-        <small>最小切片长度、自定义分隔符和特殊内容保护</small>
-      </span>
-      <i class="fa" :class="advancedChunkSettingsOpen ? 'fa-chevron-up' : 'fa-chevron-down'" />
-    </button>
-
-    <div
-      v-if="advancedChunkSettingsOpen"
-      id="unstructured-advanced-settings"
-      class="advanced-settings-panel"
-    >
-      <div class="advanced-settings-grid">
         <label class="config-field">
           <span class="config-field-label">最小切片长度</span>
           <span class="unit-input">
@@ -277,23 +248,15 @@ defineExpose({ revealValidation })
           />
           <small>系统会优先在分隔符位置结束当前切片</small>
         </label>
-      </div>
-
-      <div class="generation-option-row advanced-protection-row">
-        <div class="generation-option-copy">
-          <strong>保护表格、代码和列表</strong>
-          <small>避免切分点破坏特殊内容块的完整性</small>
-        </div>
-        <el-switch
-          :model-value="preserveSpecialContentEnabled"
-          aria-label="保护表格、代码和列表"
-          inline-prompt
-          active-text="开"
-          inactive-text="关"
-          @update:model-value="updateSpecialContentProtection"
-        />
-      </div>
     </div>
+
+    <p class="chunk-estimation-note">
+      Token 数为轻量估算值，实际长度以训练使用的模型分词器为准。
+    </p>
+
+    <p v-if="chunkValidationMessage" class="option-validation-message" role="alert">
+      {{ chunkValidationMessage }}
+    </p>
   </div>
 
   <div class="form-section generation-options-section">
@@ -311,20 +274,7 @@ defineExpose({ revealValidation })
         :validation-message="validationAttempted ? generationValidationMessage : ''"
         @update:options="updateGenerationOptions"
       />
-      <div class="generation-option-row">
-        <div class="generation-option-copy">
-          <strong>语义丰富表达</strong>
-          <small>使用大模型将问答表述得更自然、柔和</small>
-        </div>
-        <el-switch
-          :model-value="options.semanticEnrichment"
-          aria-label="非结构化语义丰富表达"
-          inline-prompt
-          active-text="开"
-          inactive-text="关"
-          @update:model-value="updateField('semanticEnrichment', Boolean($event))"
-        />
-      </div>
+
 
       <div class="generation-option-row">
         <div class="generation-option-copy">
@@ -421,6 +371,7 @@ defineExpose({ revealValidation })
 
 .preprocess-option {
   display: flex;
+  gap: 10px;
   width: 100%;
   min-height: 64px;
   margin-right: 0;
@@ -559,75 +510,8 @@ defineExpose({ revealValidation })
   line-height: 1.5;
 }
 
-.advanced-settings-toggle {
-  display: flex;
-  width: 100%;
-  min-height: 48px;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  margin-top: 12px;
-  padding: 10px 14px;
-  color: #344054;
-  text-align: left;
-  background: #fff;
-  border: 1px solid #e2e5ec;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: border-color 0.18s ease, background-color 0.18s ease;
-
-  &:hover {
-    background: #f8f7ff;
-    border-color: #b7b2f7;
-  }
-
-  &:focus-visible {
-    outline: 2px solid #5b50f2;
-    outline-offset: 2px;
-  }
-
-  > span {
-    display: grid;
-    gap: 3px;
-  }
-
-  strong {
-    font-size: 13px;
-    font-weight: 600;
-  }
-
-  small {
-    color: #8a93a3;
-    font-size: 12px;
-    line-height: 1.5;
-  }
-
-  i {
-    flex: 0 0 auto;
-    color: #7b8495;
-    font-size: 12px;
-  }
-}
-
-.advanced-settings-panel {
-  display: grid;
-  gap: 12px;
-  margin-top: 8px;
-  padding: 12px;
-  background: #fff;
-  border: 1px solid #e2e5ec;
-  border-radius: 8px;
-}
-
-.advanced-settings-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
-}
-
 @media (max-width: 900px) {
-  .chunk-settings-grid,
-  .advanced-settings-grid {
+  .chunk-settings-grid {
     grid-template-columns: minmax(0, 1fr);
   }
 
@@ -636,17 +520,11 @@ defineExpose({ revealValidation })
     flex-direction: column;
   }
 
-  .compact-option-list .generation-option-row,
-  .advanced-protection-row {
+  .compact-option-list .generation-option-row {
     align-items: center;
     flex-direction: row;
   }
 
-  .advanced-protection-row {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-
   .preprocess-option-grid {
     grid-template-columns: minmax(0, 1fr);
   }