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);
   }

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;

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>