From 0917206191c1394fd07a2f78568a49a3b9950708 Mon Sep 17 00:00:00 2001
From: caoxiaozhu <leocaoxiaozhu@gmail.com>
Date: Mon, 13 Jul 2026 16:16:50 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E5=A4=84=E7=90=86=E5=90=91=E5=AF=BC=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

数据集划分编辑器调整宽屏与窄屏布局，结构化预处理选项修正 flex 占满，非结构化智能预处理由开关改为复选卡片并补充可访问性标签。
---
 .../create/DatasetSplitEditor.vue             |  15 ++-
 .../create/StructuredOptionsPanel.vue         |   1 +
 .../create/UnstructuredOptionsPanel.vue       | 104 +++++++++++++-----
 3 files changed, 90 insertions(+), 30 deletions(-)

diff --git a/frontend/src/views/data-process/create/DatasetSplitEditor.vue b/frontend/src/views/data-process/create/DatasetSplitEditor.vue
index d65d846..770402f 100644
--- a/frontend/src/views/data-process/create/DatasetSplitEditor.vue
+++ b/frontend/src/views/data-process/create/DatasetSplitEditor.vue
@@ -128,19 +128,19 @@ function ariaLabel(label: string) {
 }
 
 .dataset-split-row {
-  align-items: stretch;
-  flex-direction: column;
+  align-items: flex-start;
 }
 
 .dataset-split-config {
   display: grid;
   gap: 10px;
+  flex: 0 0 460px;
 }
 
 .dataset-split-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 16px;
+  gap: 12px;
 }
 
 .dataset-split-field {
@@ -173,6 +173,15 @@ function ariaLabel(label: string) {
 }
 
 @media (max-width: 900px) {
+  .dataset-split-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  
+  .dataset-split-config {
+    flex: auto;
+  }
+
   .dataset-split-grid {
     grid-template-columns: minmax(0, 1fr);
   }
diff --git a/frontend/src/views/data-process/create/StructuredOptionsPanel.vue b/frontend/src/views/data-process/create/StructuredOptionsPanel.vue
index e08deb2..edc6029 100644
--- a/frontend/src/views/data-process/create/StructuredOptionsPanel.vue
+++ b/frontend/src/views/data-process/create/StructuredOptionsPanel.vue
@@ -191,6 +191,7 @@ function updatePreprocessOptions(value: Array<string | number | boolean>) {
 }
 
 .preprocess-option {
+  display: flex;
   width: 100%;
   min-height: 64px;
   margin-right: 0;
diff --git a/frontend/src/views/data-process/create/UnstructuredOptionsPanel.vue b/frontend/src/views/data-process/create/UnstructuredOptionsPanel.vue
index d1676a7..c72a333 100644
--- a/frontend/src/views/data-process/create/UnstructuredOptionsPanel.vue
+++ b/frontend/src/views/data-process/create/UnstructuredOptionsPanel.vue
@@ -131,35 +131,28 @@ defineExpose({ revealValidation })
         <p>默认使用推荐策略，只需决定是否需要脱敏</p>
       </div>
     </div>
-    <div class="generation-option-list compact-option-list">
-      <div class="generation-option-row">
-        <div class="generation-option-copy">
-          <strong>智能预处理</strong>
-          <small>自动完成内容清理、结构解析、短段合并、质量过滤、去重及上下文保留</small>
-        </div>
-        <el-switch
+    <div class="preprocess-option-grid">
+      <label class="preprocess-option" :class="{ 'is-checked': smartPreprocessEnabled }">
+        <el-checkbox
           :model-value="smartPreprocessEnabled"
-          aria-label="智能预处理"
-          inline-prompt
-          active-text="开"
-          inactive-text="关"
           @update:model-value="updateSmartPreprocess"
         />
-      </div>
-      <div class="generation-option-row">
-        <div class="generation-option-copy">
-          <strong>敏感信息脱敏</strong>
-          <small>处理姓名、手机号、邮箱和证件号等信息</small>
-        </div>
-        <el-switch
+        <span class="preprocess-option-copy">
+          <strong>智能预处理</strong>
+          <small>自动清理、解析、去重及保留上下文</small>
+        </span>
+      </label>
+
+      <label class="preprocess-option" :class="{ 'is-checked': desensitizeEnabled }">
+        <el-checkbox
           :model-value="desensitizeEnabled"
-          aria-label="敏感信息脱敏"
-          inline-prompt
-          active-text="开"
-          inactive-text="关"
           @update:model-value="updateDesensitize"
         />
-      </div>
+        <span class="preprocess-option-copy">
+          <strong>敏感信息脱敏</strong>
+          <small>处理姓名、手机号等隐私信息</small>
+        </span>
+      </label>
     </div>
   </div>
 
@@ -419,11 +412,59 @@ defineExpose({ revealValidation })
   margin-top: 16px;
 }
 
-.compact-option-list {
-  gap: 8px;
+.preprocess-option-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  margin-top: 16px;
+}
 
-  .generation-option-row {
-    min-height: 58px;
+.preprocess-option {
+  display: flex;
+  width: 100%;
+  min-height: 64px;
+  margin-right: 0;
+  padding: 12px 14px;
+  box-sizing: border-box;
+  align-items: flex-start;
+  border: 1px solid #e2e5ec;
+  border-radius: 8px;
+  transition: border-color 0.18s ease, background-color 0.18s ease;
+
+  &:hover {
+    border-color: #b7b2f7;
+  }
+
+  &.is-checked {
+    background: #fafaff;
+    border-color: #8b82f4;
+  }
+
+  :deep(.el-checkbox__input) {
+    margin-top: 3px;
+  }
+
+  :deep(.el-checkbox__label) {
+    min-width: 0;
+    padding-left: 10px;
+    white-space: normal;
+  }
+}
+
+.preprocess-option-copy {
+  display: grid;
+  gap: 4px;
+
+  strong {
+    color: #344054;
+    font-size: 13px;
+    font-weight: 600;
+  }
+
+  small {
+    color: #8a93a3;
+    font-size: 12px;
+    line-height: 1.5;
   }
 }
 
@@ -600,5 +641,14 @@ defineExpose({ revealValidation })
     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);
+  }
 }
 </style>