refactor: 数据处理向导拆分组合式函数与子面板

提取 useDataProcessDraft、useDataProcessGeneration 与 dataProcessCreateState 管理向导状态，新增 StructuredOptionsPanel、UnstructuredOptionsPanel、DatasetSplitEditor 子面板组件，样式抽离为独立 scss，DataProcessCreateView 与 TaskSetupStep 大幅瘦身，回归脚本适配。
2026-07-13 15:28:48 +08:00
parent 735a8a71f5
commit e580ec4791
13 changed files with 1801 additions and 1577 deletions
--- a/frontend/src/views/data-process/create/data-process-create.scss
+++ b/frontend/src/views/data-process/create/data-process-create.scss
@@ -0,0 +1,193 @@
+.create-wizard-layout {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  border: 1px solid #eef0f5;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.wizard-main {
+  flex: 1;
+  overflow-y: auto;
+  padding: 32px;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 3px;
+  }
+}
+
+.wizard-main-inner {
+  min-height: 100%;
+  box-sizing: border-box;
+}
+
+.wizard-steps-container {
+  margin-bottom: 32px;
+  padding-bottom: 24px;
+  border-bottom: 1px dashed #e2e8f0;
+}
+
+.custom-wizard-steps {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 860px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.step-item {
+  display: flex;
+  align-items: center;
+  flex: 1;
+
+  &:first-child {
+    flex: 0;
+  }
+}
+
+.step-connector {
+  flex: 1;
+  height: 2px;
+  margin: 0 16px;
+  background-color: #e2e8f0;
+  transition: background-color 0.3s;
+}
+
+.step-item.is-completed .step-connector,
+.step-item.is-active .step-connector {
+  background-color: #5146e5;
+}
+
+.step-node {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.step-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  color: #64748b;
+  font-size: 13px;
+  font-weight: 650;
+  background-color: #fff;
+  border: 2px solid #cbd5e1;
+  border-radius: 50%;
+  transition: all 0.3s;
+}
+
+.step-title {
+  color: #64748b;
+  font-size: 14px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.step-item.is-active {
+  .step-icon {
+    color: #5146e5;
+    background-color: #eef2ff;
+    border-color: #5146e5;
+  }
+
+  .step-title {
+    color: #1e293b;
+  }
+}
+
+.step-item.is-completed {
+  .step-icon {
+    color: #fff;
+    background-color: #5146e5;
+    border-color: #5146e5;
+  }
+
+  .step-title {
+    color: #1e293b;
+  }
+}
+
+.wizard-content {
+  min-height: 400px;
+}
+
+.wizard-footer {
+  display: grid;
+  flex-shrink: 0;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  height: 64px;
+  padding: 0 32px;
+  background: #fff;
+  border-top: 1px solid #e2e8f0;
+  box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.02);
+
+  .footer-left {
+    justify-self: start;
+  }
+
+  .footer-center {
+    justify-self: center;
+  }
+
+  .footer-right {
+    justify-self: end;
+  }
+}
+
+.wizard-primary-action {
+  min-width: 160px;
+}
+
+@media (max-width: 760px) {
+  .wizard-main {
+    padding: 24px 20px;
+  }
+
+  .custom-wizard-steps {
+    padding: 0;
+  }
+
+  .step-connector {
+    margin: 0 8px;
+  }
+
+  .step-node {
+    gap: 6px;
+  }
+
+  .step-title {
+    max-width: 72px;
+    font-size: 12px;
+    line-height: 1.35;
+    white-space: normal;
+  }
+
+  .wizard-footer {
+    padding: 0 20px;
+  }
+}
+
+@media (max-width: 600px) {
+  .step-title {
+    display: none;
+  }
+
+  .step-connector {
+    margin: 0 6px;
+  }
+
+  .wizard-primary-action {
+    min-width: 0;
+  }
+}