style: 登录页高度与滚动行为修正

登录页主区域改为 height 100% 避免内部双滚动条，移动端恢复 min-height 并允许整体滚动。

design-qa.md

@@ -325,3 +325,105 @@ Verification evidence:
 Design-QA final result: blocked
 
 final result: blocked
+
+---
+
+# Dataset Version Actions Design QA
+
+## Evidence
+
+- Source visual truth: `/Users/caoxiaozhu/.codex/generated_images/019f5e2e-3bee-77f0-b285-89ef139db56c/exec-48a163b6-d4c9-4646-9199-135957c6e72e.png`
+- Historical-version implementation: `/Users/caoxiaozhu/.codex/visualizations/2026/07/14/019f5e2e-3bee-77f0-b285-89ef139db56c/dataset-version-build/implementation-historical-version-final.png`
+- Delete-confirm implementation: `/Users/caoxiaozhu/.codex/visualizations/2026/07/14/019f5e2e-3bee-77f0-b285-89ef139db56c/dataset-version-build/implementation-delete-confirm.png`
+- Full-view comparison: `/Users/caoxiaozhu/.codex/visualizations/2026/07/14/019f5e2e-3bee-77f0-b285-89ef139db56c/dataset-version-build/comparison-full.png`
+- Focused version-control comparison: `/Users/caoxiaozhu/.codex/visualizations/2026/07/14/019f5e2e-3bee-77f0-b285-89ef139db56c/dataset-version-build/comparison-version-controls-final.png`
+- Viewport: 1316 × 768 browser window; source crop normalized for the focused comparison.
+- State: authenticated dataset detail, V3 current, V2 selected as a read-only historical version.
+
+## Full-view comparison
+
+The existing product shell, dataset summary, version selector, read-only alert, file toolbar, and sample table remain unchanged. The former standalone primary action has been replaced by one compact rounded-square overflow button at the far right of the version-control row, matching the selected hierarchy.
+
+## Focused comparison and required fidelity surfaces
+
+- Fonts and typography: existing system/PingFang stack, 13px labels, 12px metadata, and Element Plus menu text are preserved.
+- Spacing and layout rhythm: the 40px overflow trigger aligns with the version selector and leaves the central status copy flexible; the 168px menu provides 40px action rows.
+- Colors and visual tokens: the existing indigo primary token is used for the activate icon; the delete item and confirmation action use the danger token.
+- Image and icon fidelity: no new raster assets are needed. Existing Font Awesome ellipsis, check-circle, and trash icons match the repository's icon system.
+- Copy and content: the menu contains exactly “设为当前版本” and “删除版本”, separated visually; the confirmation names V2 and explains that current V3 is unaffected.
+
+## Interaction checks
+
+- Created V2 and V3 through the real edit-and-save flow, then switched from current V3 to historical V2.
+- Historical records became read-only and the overflow trigger appeared; current V3 showed no history-operation trigger.
+- Opening the trigger exposed exactly two accessible menu items: “设为当前版本” and “删除版本”.
+- Choosing “删除版本” opened the danger confirmation dialog; cancelling returned focus without deleting data.
+- Actual deletion behavior, protected-version rejection, optimistic-lock handling, and non-reused version numbers are covered by `test:dataset-preview`.
+
+## Comparison history
+
+### Iteration 1 — blocked
+
+- [P2] The overflow trigger was circular while the selected mock used a small rounded square.
+- [P2] The menu did not explicitly lock its target width or primary-action icon color.
+
+Fixes:
+
+- Replaced the circular trigger with a 40px square and 10px radius.
+- Set the menu minimum width to 168px, action height to 40px, and the activate icon to the product primary color.
+
+### Iteration 2 — passed
+
+No actionable P0/P1/P2 differences remain. The desktop capture API does not retain the transient popup layer in screenshots, so the open-menu labels were additionally verified through the accessibility tree; exact popup shadow rendering remains a non-blocking P3 capture gap.
+
+final result: passed
+
+---
+
+# Login Page Responsive Design QA
+
+## Evidence
+
+- Source visual truth: `/Users/caoxiaozhu/.codex/generated_images/019f5f3f-f7e1-7e41-9605-ea307d9f09e6/exec-d376c603-0c47-45ad-86fd-3e99c1a95ec7.png`
+- Implementation route: `http://localhost:6801/login`
+- Implementation screenshot: unavailable because the in-app browser runtime could not initialize in this session.
+- Intended desktop viewport: 1536 × 1024.
+- Intended laptop viewports: 1366 × 768 and 1280 × 720.
+- State: unauthenticated login page, default username and password populated.
+
+## Static and automated evidence
+
+- Added a 1440px width breakpoint that shifts the split from 58/42 to 55/45 and caps the form at 440px.
+- Added a short-screen breakpoint for heights up to 820px that reduces title, form, input, footer, and panel spacing without hiding the left visual.
+- Kept the single-column fallback at 900px and below.
+- `regression-login-layout.mjs`: passed.
+- `regression-default-dashboard.mjs`: passed.
+- `vue-tsc -b --noEmit`: passed.
+- Vite dev transform for `LoginView.vue`: HTTP 200.
+- Production build: blocked by the pre-existing missing route component `UserPermissionView.vue`, outside the login-page change.
+
+## Required fidelity surfaces
+
+- Fonts and typography: code uses the existing product font stack with laptop-specific display-size reductions; visual comparison remains unavailable.
+- Spacing and layout rhythm: dedicated width and height media queries are present; rendered measurements remain unavailable.
+- Colors and visual tokens: existing indigo tokens and the selected dark-purple visual asset are preserved.
+- Image quality and asset fidelity: the generated `login-hero-flow.png` is used directly; the official `logo.png` is reused for the brand lockup.
+- Copy and content: platform title, supporting copy, form labels, actions, and footer match the selected design.
+
+## Findings
+
+- [P2] Browser-rendered laptop comparison unavailable
+  Location: login page at 1366 × 768 and 1280 × 720.
+  Evidence: the in-app browser runtime failed during initialization, so no implementation screenshot or side-by-side comparison could be captured.
+  Impact: static checks cannot prove that all visible spacing and crop details match the selected design at laptop sizes.
+  Fix: capture both laptop viewports in a working in-app browser session, compare them with the source, and resolve any remaining P0/P1/P2 differences.
+
+## Comparison history
+
+### Iteration 1 — blocked
+
+- User reported that the initial implementation was optimized for large displays and did not compose well on laptop screens.
+- Added explicit laptop-width and short-screen layout rules and passed targeted regression/type checks.
+- Post-fix visual evidence remains unavailable because browser capture is blocked.
+
+final result: blocked

frontend/package.json

@@ -8,6 +8,8 @@
     "build": "vue-tsc -b && vite build",
     "preview": "vite preview",
     "type-check": "vue-tsc -b --noEmit",
+    "test": "node scripts/run-regressions.mjs",
+    "test:login-layout": "node scripts/regression-login-layout.mjs",
     "test:default-dashboard": "node scripts/regression-default-dashboard.mjs",
     "test:dashboard": "node scripts/regression-dashboard.mjs",
     "test:data-process-list": "node scripts/regression-data-process-list.mjs",
@@ -20,7 +22,9 @@
     "test:eval-detail": "node scripts/regression-eval-detail.mjs",
     "test:model-manage": "node scripts/regression-model-manage.mjs",
     "test:hardware": "node scripts/regression-hardware-dashboard.mjs",
+    "test:user-settings": "node scripts/regression-user-settings.mjs",
     "test:training-log-layout": "node scripts/regression-training-log-layout.mjs",
+    "test:fine-tune-create": "node scripts/regression-fine-tune-create-ui.mjs",
     "test:page-surface": "node scripts/regression-page-surface.mjs"
   },
   "dependencies": {

frontend/scripts/regression-dashboard.mjs

@@ -19,6 +19,8 @@ assert.match(
 
 assert.match(echartsSource, /import\s*\{[^}]*BarChart[^}]*\}\s*from\s*['"]echarts\/charts['"]/, 'ECharts 未注册 BarChart')
 assert.match(echartsSource, /use\(\[[\s\S]*?BarChart[\s\S]*?\]\)/, 'BarChart 未加入 ECharts 按需注册列表')
+assert.match(echartsSource, /import\s*\{[^}]*PieChart[^}]*\}\s*from\s*['"]echarts\/charts['"]/, 'ECharts 未注册 PieChart')
+assert.match(echartsSource, /use\(\[[\s\S]*?PieChart[\s\S]*?\]\)/, 'PieChart 未加入 ECharts 按需注册列表')
 
 for (const copy of [
   '平台运行状态',
@@ -39,16 +41,24 @@ assert.match(dashboardSource, /router\.push\(['"]\/fine-tune['"]\)/, '查看全
 assert.match(dashboardSource, /router\.push\(`\/training-log\/\$\{task\.id\}`\)/, '训练任务详情应进入训练日志页')
 assert.doesNotMatch(dashboardSource, /class=["']dashboard-heading["']/, '服务看板不应重复展示页面标题栏')
 assert.doesNotMatch(dashboardSource, /查看告警/, '服务看板不应保留冗余的顶部告警按钮')
-assert.match(dashboardSource, /\.dashboard-view\s*\{[\s\S]*?gap:\s*10px;/, '服务看板应使用紧凑的区块间距')
+assert.match(dashboardSource, /\.dashboard-view\s*\{[\s\S]*?gap:\s*16px;/, '服务看板区块间距应保持舒展')
-assert.match(dashboardSource, /\.dashboard-middle\s*\{[\s\S]*?flex:\s*1 1 auto;[\s\S]*?min-height:\s*0;/, '中间区域应弹性占满剩余高度')
+assert.match(dashboardSource, /\.dashboard-view\s*\{[\s\S]*?min-height:\s*100%;/, '服务看板应至少填满页面可用高度')
+assert.match(dashboardSource, /\.dashboard-middle\s*\{[\s\S]*?flex:\s*0 0 auto;[\s\S]*?min-height:\s*0;/, '中间区域不应因新增统计卡片被压缩')
 assert.match(dashboardSource, /grid-template-columns:\s*minmax\(0,\s*1\.9fr\)\s*minmax\(300px,\s*0\.82fr\);/, '服务状态列应收窄，为训练图表释放更多宽度')
-assert.match(dashboardSource, /\.training-chart\s*\{[\s\S]*?flex:\s*1 1 auto;[\s\S]*?height:\s*auto;[\s\S]*?min-height:\s*230px;/, '训练统计图应随可用空间自动拉伸')
+assert.match(dashboardSource, /\.training-chart\s*\{[\s\S]*?height:\s*300px;[\s\S]*?min-height:\s*300px;/, '训练统计图应保持舒展、稳定的展示高度')
-assert.match(dashboardSource, /@media\s*\(max-height:\s*900px\)[\s\S]*?\.training-chart\s*\{[\s\S]*?min-height:\s*200px;/, '较矮桌面视口应保留图表最小可读高度')
 assert.match(dashboardSource, /\.service-table\s*\{[\s\S]*?grid-template-rows:[^;]*repeat\(4,\s*minmax\(48px,\s*1fr\)\)/, '服务状态行应随中间区域同步拉伸')
 assert.match(dashboardSource, /\.tasks-heading\s*\{[\s\S]*?min-height:\s*32px;[\s\S]*?padding:\s*0 14px 10px;/, '训练任务标题区应适当加高')
 assert.match(dashboardSource, /\.tasks-table\s*\{[\s\S]*?th,\s*td\s*\{[\s\S]*?height:\s*42px;[\s\S]*?th\s*\{[\s\S]*?height:\s*36px;/, '训练任务表格行应适当加高')
 assert.match(dashboardSource, /@media\s*\(max-height:\s*900px\)[\s\S]*?\.tasks-heading\s*\{[\s\S]*?min-height:\s*28px;[\s\S]*?padding:\s*0 12px 8px;[\s\S]*?\.tasks-table\s*\{[\s\S]*?height:\s*36px;[\s\S]*?th\s*\{[\s\S]*?height:\s*32px;/, '低高度桌面视口也应提高训练任务占比')
-assert.match(mainLayoutSource, /\.layout-content:has\(\.dashboard-view\)[\s\S]*?overflow-y:\s*hidden;/, '服务看板容器应避免产生页面纵向滚动条')
+assert.match(dashboardSource, /class=["']user-stats-row["'][\s\S]*?用户操作分布[\s\S]*?登录时长排行[\s\S]*?最近登录用户/, '服务看板应展示三块用户统计卡片')
-assert.match(mainLayoutSource, /\.page-canvas\s*\{[\s\S]*?flex:\s*1 1 auto;[\s\S]*?overflow:\s*hidden;/, '服务看板页面画布应约束在可用视口内')
+assert.match(dashboardSource, /class=["']duration-chart["'][\s\S]*?loginDurationChartOption/, '登录时长应使用 ECharts 图表展示')
+assert.match(dashboardSource, /const loginDurationChartOption[\s\S]*?type:\s*['"]bar['"][\s\S]*?formatter:\s*['"]\{c\} 小时['"]/, '登录时长应以横向柱状图展示具体小时数')
+assert.match(dashboardSource, /const operationChartOption[\s\S]*?position:\s*['"]outside['"][\s\S]*?labelLine:\s*\{[\s\S]*?show:\s*true/, '饼图应以外侧引导线标注操作名称')
+assert.match(dashboardSource, /const loginDurationChartOption[\s\S]*?grid:\s*\{\s*top:\s*8,\s*right:\s*12,\s*bottom:\s*6,\s*left:\s*8,[\s\S]*?max:\s*Math\.ceil\(Math\.max[\s\S]*?position:\s*['"]insideRight['"]/, '登录时长图应收紧左右边距、按数据范围拉伸，并将数值置于柱内')
+assert.match(dashboardSource, /\.user-stats-row\s*\{[\s\S]*?repeat\(3,\s*minmax\(0,\s*1fr\)\)/, '宽屏用户统计卡片应保持三列')
+assert.match(dashboardSource, /@media\s*\(max-width:\s*1180px\)[\s\S]*?\.user-stats-row\s*\{[\s\S]*?repeat\(2,\s*minmax\(0,\s*1fr\)\)/, '中等宽度应将用户统计卡片降为两列')
+assert.match(dashboardSource, /@media\s*\(max-width:\s*720px\)[\s\S]*?\.user-stats-row\s*\{[\s\S]*?grid-template-columns:\s*1fr;/, '窄屏应将用户统计卡片降为单列')
+assert.match(mainLayoutSource, /\.layout-content:has\(\.dashboard-view\)[\s\S]*?overflow-y:\s*auto;/, '服务看板应允许在内容超出视口时纵向滚动')
+assert.match(mainLayoutSource, /\.page-canvas\s*\{[\s\S]*?flex:\s*1 0 auto;[\s\S]*?overflow:\s*visible;/, '服务看板画布应允许新增卡片完整显示')
 
 console.log('服务看板回归检查通过')

frontend/scripts/regression-data-process-wizard.mjs

@@ -13,6 +13,13 @@ const confirmDialogPath = path.resolve(scriptDir, '../src/components/AppConfirmD
 const layoutPath = path.resolve(scriptDir, '../src/layouts/MainLayout.vue')
 const viewSource = await readFile(viewPath, 'utf8')
 const layoutSource = await readFile(layoutPath, 'utf8')
+const [draftSource, stateSource, generationSource, viewStyleSource] = await Promise.all([
+  readFile(path.join(createDir, 'useDataProcessDraft.ts'), 'utf8'),
+  readFile(path.join(createDir, 'dataProcessCreateState.ts'), 'utf8'),
+  readFile(path.join(createDir, 'useDataProcessGeneration.ts'), 'utf8'),
+  readFile(path.join(createDir, 'data-process-create.scss'), 'utf8'),
+])
+const implementationSource = [viewSource, draftSource, stateSource, generationSource].join('\n')
 
 assert.ok(existsSync(confirmDialogPath), '缺少公共确认弹窗组件 AppConfirmDialog')
 const confirmDialogSource = await readFile(confirmDialogPath, 'utf8')
@@ -34,21 +41,28 @@ assert.match(viewSource, /onBeforeRouteLeave\(async \(\) =>/, '路由离开确
 assert.doesNotMatch(viewSource, /window\.confirm|ElMessageBox/, '创建页仍在使用系统或 Element Plus 确认框')
 
 assert.match(viewSource, /const WIZARD_STEPS = \[/, '向导步骤尚未改为固定常量')
-for (const title of ['创建任务', '上传文件', '数据预览', '开始生成', '结果编辑与保存']) {
+for (const title of ['创建任务', '大模型选择', '上传文件', '数据预览', '开始生成', '结果编辑与保存']) {
   assert.ok(viewSource.includes(`title: '${title}'`), `缺少固定步骤：${title}`)
 }
 assert.match(
   viewSource,
-  /\{ id: 'create',[\s\S]*?\{ id: 'upload',[\s\S]*?\{ id: 'preview',[\s\S]*?\{ id: 'generate',[\s\S]*?\{ id: 'results'/,
+  /\{ id: 'create',[\s\S]*?\{ id: 'model',[\s\S]*?\{ id: 'upload',[\s\S]*?\{ id: 'preview',[\s\S]*?\{ id: 'generate',[\s\S]*?\{ id: 'results'/,
-  '五步向导顺序必须为创建任务、上传文件、数据预览、开始生成、结果编辑与保存',
+  '六步向导顺序必须为创建任务、大模型选择、上传文件、数据预览、开始生成、结果编辑与保存',
 )
 assert.doesNotMatch(viewSource, /steps\s*=\s*computed|all\.filter/, '步骤仍根据处理类型动态增减')
-assert.match(viewSource, /localStorage\.setItem\(DRAFT_STORAGE_KEY/, '草稿没有持久化')
+assert.match(
-assert.match(viewSource, /localStorage\.getItem\(DRAFT_STORAGE_KEY\)/, '草稿没有恢复读取')
+  viewStyleSource,
+  /@media \(max-width: 1100px\)[\s\S]*?\.step-title\s*\{[\s\S]*?display:\s*none[\s\S]*?\.step-item\.is-active \.step-title\s*\{[\s\S]*?display:\s*block/,
+  '六步向导在中等宽度下没有收起非当前步骤标题',
+)
+assert.match(draftSource, /localStorage\.setItem\(DATA_PROCESS_DRAFT_STORAGE_KEY/, '草稿没有持久化')
+assert.match(draftSource, /localStorage\.getItem\(DATA_PROCESS_DRAFT_STORAGE_KEY\)/, '草稿没有恢复读取')
 assert.match(viewSource, /restoreDraft\(\)/, '页面没有恢复草稿')
+assert.ok(viewSource.split('\n').length < 800, 'DataProcessCreateView 拆分后仍超过 800 行')
 
 const expectedComponents = [
   'TaskSetupStep.vue',
+  'ModelSelectionStep.vue',
   'SourceUploadStep.vue',
   'PreviewCompareStep.vue',
   'GenerationStep.vue',
@@ -74,7 +88,7 @@ for (const field of ['sourceStart', 'sourceEnd', 'originalContent', 'editedConte
   assert.ok(typesSource.includes(field), `PreviewItem 缺少字段：${field}`)
 }
 assert.match(typesSource, /sourceFileId/, 'PreviewItem 缺少来源文件标识')
-assert.match(typesSource, /export type StepId = 'create' \| 'upload' \| 'preview' \| 'generate' \| 'results'/, '步骤类型缺少独立上传步骤')
+assert.match(typesSource, /export type StepId = 'create' \| 'model' \| 'upload' \| 'preview' \| 'generate' \| 'results'/, '步骤类型缺少独立大模型选择步骤')
 assert.match(modelSource, /export function buildPreviewItems/, '缺少切片来源映射生成函数')
 assert.match(modelSource, /export function sourceLines/, '缺少源文件行偏移生成函数')
 assert.match(modelSource, /sourceFileId/, '切片生成没有写入来源文件标识')
@@ -94,10 +108,10 @@ for (const marker of [
   'preview-editor',
   'scrollIntoView',
 ]) {
-  assert.ok(previewSource.includes(marker), `第三步缺少结构或行为：${marker}`)
+  assert.ok(previewSource.includes(marker), `第四步缺少结构或行为：${marker}`)
 }
-assert.match(previewSource, /sourceStart/, '第三步未使用来源起始偏移')
+assert.match(previewSource, /sourceStart/, '第四步未使用来源起始偏移')
-assert.match(previewSource, /sourceEnd/, '第三步未使用来源结束偏移')
+assert.match(previewSource, /sourceEnd/, '第四步未使用来源结束偏移')
 assert.match(previewSource, /filterable/, '文件选择器必须可搜索')
 assert.match(previewSource, /当前文件/, '预览缺少当前文件切换器')
 assert.doesNotMatch(previewSource, /located-badge|sync-label|已定位到/, '源文件栏不应显示冗余定位提示')
@@ -122,41 +136,89 @@ assert.match(previewSource, />保存修改<\/el-button>/, '编辑器缺少保存
 assert.match(previewSource, /\.editor-actions\s*\{[\s\S]*?justify-content:\s*flex-end/, '取消和保存按钮必须在编辑器右侧对齐')
 assert.doesNotMatch(previewSource, /item-token|item-status|modifiedOnly|仅看已修改/, '切片列表不应再显示 Token 或修改状态')
 assert.match(previewSource, /\.preview-editor\s*\{[\s\S]*?flex:\s*1 1 auto[\s\S]*?overflow-y:\s*auto/, '编辑模式必须占据右侧剩余区域并可滚动')
-assert.match(previewSource, /@media \(max-width: 900px\)/, '第三步缺少窄屏上下布局')
+assert.match(previewSource, /@media \(max-width: 900px\)/, '第四步缺少窄屏上下布局')
 
 const taskSetupPath = path.join(createDir, 'TaskSetupStep.vue')
-const taskSetupSource = await readFile(taskSetupPath, 'utf8')
+const structuredOptionsPath = path.join(createDir, 'StructuredOptionsPanel.vue')
+const unstructuredOptionsPath = path.join(createDir, 'UnstructuredOptionsPanel.vue')
+const datasetSplitEditorPath = path.join(createDir, 'DatasetSplitEditor.vue')
 const generationOptionsPath = path.join(createDir, 'GenerationOptionsPanel.vue')
-const generationControlSource = await readFile(generationOptionsPath, 'utf8')
+const modelSelectionPath = path.join(createDir, 'ModelSelectionStep.vue')
 const sourceUploadPath = path.join(createDir, 'SourceUploadStep.vue')
-const sourceUploadSource = await readFile(sourceUploadPath, 'utf8')
+const [
+  taskSetupSource,
+  structuredOptionsSource,
+  unstructuredOptionsSource,
+  datasetSplitEditorSource,
+  generationControlSource,
+  modelSelectionSource,
+  sourceUploadSource,
+] = await Promise.all([
+  readFile(taskSetupPath, 'utf8'),
+  readFile(structuredOptionsPath, 'utf8'),
+  readFile(unstructuredOptionsPath, 'utf8'),
+  readFile(datasetSplitEditorPath, 'utf8'),
+  readFile(generationOptionsPath, 'utf8'),
+  readFile(modelSelectionPath, 'utf8'),
+  readFile(sourceUploadPath, 'utf8'),
+])
+const taskSetupFeatureSource = [
+  taskSetupSource,
+  structuredOptionsSource,
+  unstructuredOptionsSource,
+  datasetSplitEditorSource,
+].join('\n')
+
+for (const componentPath of [structuredOptionsPath, unstructuredOptionsPath, datasetSplitEditorPath]) {
+  assert.ok(existsSync(componentPath), `缺少任务配置拆分组件：${path.basename(componentPath)}`)
+}
+assert.ok(taskSetupSource.split('\n').length < 800, 'TaskSetupStep 拆分后仍超过 800 行')
+assert.match(taskSetupSource, /<StructuredOptionsPanel/, '任务配置没有挂载结构化选项面板')
+assert.match(taskSetupSource, /<UnstructuredOptionsPanel/, '任务配置没有挂载非结构化选项面板')
+assert.match(structuredOptionsSource, /<DatasetSplitEditor/, '结构化选项没有复用数据集划分编辑器')
+assert.match(unstructuredOptionsSource, /<DatasetSplitEditor/, '非结构化选项没有复用数据集划分编辑器')
 
 for (const marker of ['<el-upload', '源数据上传', '数据源配置', 'uploadedFiles']) {
-  assert.ok(!taskSetupSource.includes(marker), `第一步仍包含上传职责：${marker}`)
+  assert.ok(!taskSetupFeatureSource.includes(marker), `第一步仍包含上传职责：${marker}`)
 }
-assert.match(viewSource, /<SourceUploadStep\s+[\s\S]*?v-else-if="currentStepId === 'upload'"/, '第二步没有挂载独立上传组件')
+assert.match(viewSource, /<ModelSelectionStep\s+[\s\S]*?v-else-if="currentStepId === 'model'"/, '第二步没有挂载独立大模型选择组件')
-assert.match(viewSource, /if \(currentStepId\.value === 'create'\) return '继续：上传文件'/, '第一步主按钮没有指向上传文件')
+assert.match(viewSource, /<SourceUploadStep\s+[\s\S]*?v-else-if="currentStepId === 'upload'"/, '第三步没有挂载独立上传组件')
-assert.match(viewSource, /if \(currentStepId\.value === 'upload'\) return '继续：数据预览'/, '第二步主按钮没有指向数据预览')
+assert.match(viewSource, /if \(currentStepId\.value === 'create'\) return '继续：选择大模型'/, '第一步主按钮没有指向大模型选择')
-assert.match(viewSource, /const DRAFT_SCHEMA_VERSION = 5/, '生成配置扩展后必须升级草稿版本')
+assert.match(viewSource, /if \(currentStepId\.value === 'model'\) return '继续：上传文件'/, '第二步主按钮没有指向上传文件')
+assert.match(viewSource, /if \(currentStepId\.value === 'upload'\) return '继续：数据预览'/, '第三步主按钮没有指向数据预览')
+assert.match(draftSource, /DATA_PROCESS_DRAFT_SCHEMA_VERSION = 6/, '安全草稿格式必须升级到 v6')
 
 const nextFromCreateStart = viewSource.indexOf('async function nextFromCreate()')
-const nextFromUploadStart = viewSource.indexOf('function nextFromUpload()', nextFromCreateStart)
+const nextFromModelStart = viewSource.indexOf('async function nextFromModel()', nextFromCreateStart)
+const nextFromUploadStart = viewSource.indexOf('function nextFromUpload()', nextFromModelStart)
 const selectPreviewFileStart = viewSource.indexOf('function selectPreviewFile(', nextFromUploadStart)
-assert.ok(nextFromCreateStart >= 0 && nextFromUploadStart > nextFromCreateStart, '缺少创建步骤与上传步骤的独立跳转函数')
+assert.ok(
-const nextFromCreateSource = viewSource.slice(nextFromCreateStart, nextFromUploadStart)
+  nextFromCreateStart >= 0 && nextFromModelStart > nextFromCreateStart && nextFromUploadStart > nextFromModelStart,
+  '缺少创建、大模型选择与上传步骤的独立跳转函数',
+)
+const nextFromCreateSource = viewSource.slice(nextFromCreateStart, nextFromModelStart)
+const nextFromModelSource = viewSource.slice(nextFromModelStart, nextFromUploadStart)
 const nextFromUploadSource = viewSource.slice(nextFromUploadStart, selectPreviewFileStart)
 assert.match(nextFromCreateSource, /taskSetupRef\.value\?\.validate\(\)/, '创建步骤继续前没有校验任务配置')
-assert.match(nextFromCreateSource, /goToStep\('upload'\)/, '创建步骤校验通过后没有进入上传文件')
+assert.match(nextFromCreateSource, /goToStep\('model'\)/, '创建步骤校验通过后没有进入大模型选择')
 assert.doesNotMatch(nextFromCreateSource, /uploadedFiles|buildPreviewItems/, '创建步骤仍在校验文件或提前生成预览')
+assert.match(nextFromModelSource, /modelSelectionRef\.value\?\.validate\(\)/, '大模型选择步骤继续前没有校验模型配置')
+assert.match(nextFromModelSource, /goToStep\('upload'\)/, '大模型选择完成后没有进入上传文件')
 assert.match(nextFromUploadSource, /uploadedFiles\.value\.length === 0/, '上传步骤继续前没有校验源数据')
 assert.match(nextFromUploadSource, /buildPreviewItems\(/, '上传步骤没有在进入预览前生成预览数据')
 assert.match(nextFromUploadSource, /goToStep\('preview'\)/, '上传步骤完成后没有进入数据预览')
 assert.match(viewSource, /function goToStep\(stepId: StepId\)[\s\S]*?WIZARD_STEPS\.findIndex/, '向导跳转没有使用稳定步骤标识')
 assert.match(viewSource, /currentStepId\.value === 'preview'[\s\S]*?goToStep\('generate'\)/, '数据预览步骤没有进入开始生成')
 assert.match(viewSource, /generation\.status === 'success'[\s\S]*?goToStep\('results'\)/, '生成成功后没有进入结果编辑与保存')
-assert.match(viewSource, /currentStepId:\s*currentStepId\.value/, '草稿没有保存稳定步骤标识')
+assert.match(draftSource, /currentStepId:\s*bindings\.currentStepId\.value/, '草稿没有保存稳定步骤标识')
-assert.match(viewSource, /const LEGACY_V3_STEP_IDS:[^=]*= \['create', 'preview', 'generate', 'results'\]/, 'v3 草稿缺少旧步骤索引映射')
+const draftSnapshotSource = draftSource.slice(
-assert.match(viewSource, /snapshotSchemaVersion === 3[\s\S]*?LEGACY_V3_STEP_IDS/, 'v3 草稿没有迁移到五步索引')
+  draftSource.indexOf('function draftSnapshot()'),
+  draftSource.indexOf('function writeDraft'),
+)
+for (const forbiddenField of ['uploadedFiles', 'previewItems', 'results', 'password', 'token']) {
+  assert.ok(!draftSnapshotSource.includes(forbiddenField), `安全草稿不应持久化：${forbiddenField}`)
+}
+assert.match(draftSource, /writeDraft\(false\)/, '恢复旧草稿后没有立即覆盖潜在敏感数据')
 assert.match(viewSource, /<ResultEditorStep\s+[\s\S]*?v-else-if="currentStepId === 'results'"/, '结果编辑器必须只在结果步骤渲染')
 assert.match(viewSource, /watch\(processType,[\s\S]*?resetSourceDataForProcessTypeChange\(\)/, '切换处理类型后没有失效旧源数据')
 assert.match(viewSource, /function resetSourceDataForProcessTypeChange\(\)[\s\S]*?uploadedFiles\.value = \[\][\s\S]*?selectedPreviewFileId\.value = null/, '旧源数据失效没有同步清理文件与预览选择')
@@ -170,32 +232,29 @@ for (const option of [
   '异常数据过滤',
   '敏感信息脱敏',
 ]) {
-  assert.ok(taskSetupSource.includes(option), `结构化预处理缺少选项：${option}`)
+  assert.ok(structuredOptionsSource.includes(option), `结构化预处理缺少选项：${option}`)
 }
-assert.ok(taskSetupSource.includes('生成选项'), '结构化配置缺少生成选项分类')
+assert.ok(structuredOptionsSource.includes('生成选项'), '结构化配置缺少生成选项分类')
-assert.ok(taskSetupSource.includes('语义丰富表达'), '生成选项缺少语义丰富表达开关')
-assert.ok(taskSetupSource.includes('使用大模型将问答表述得更自然、柔和'), '语义丰富表达缺少辅助说明')
 for (const splitName of ['训练集', '验证集', '测试集']) {
-  assert.ok(taskSetupSource.includes(splitName), `生成选项缺少数据集划分：${splitName}`)
+  assert.ok(datasetSplitEditorSource.includes(splitName), `生成选项缺少数据集划分：${splitName}`)
 }
-assert.match(taskSetupSource, /const splitTotal = computed/, '数据集划分缺少比例总和计算')
+assert.match(datasetSplitEditorSource, /const splitTotal = computed/, '数据集划分缺少比例总和计算')
 assert.match(taskSetupSource, /splitTotal\.value !== 100/, '数据集划分缺少总和 100% 校验')
-assert.ok(taskSetupSource.includes('训练集、验证集和测试集比例总和必须为 100%'), '数据集划分缺少就地错误提示')
+assert.ok(datasetSplitEditorSource.includes('训练集、验证集和测试集比例总和必须为 100%'), '数据集划分缺少就地错误提示')
 for (const splitField of ['train', 'validation', 'test']) {
   assert.match(
-    taskSetupSource,
+    datasetSplitEditorSource,
-    new RegExp(`structuredOptions\\.datasetSplit\\.${splitField}[\\s\\S]*?:min="0"[\\s\\S]*?:max="100"[\\s\\S]*?:step="1"[\\s\\S]*?:precision="0"`),
+    new RegExp(`modelValue\\.${splitField}[\\s\\S]*?:min="0"[\\s\\S]*?:max="100"[\\s\\S]*?:step="1"[\\s\\S]*?:precision="0"`),
     `数据集划分字段 ${splitField} 缺少 0～100 的整数限制`,
   )
 }
-assert.match(taskSetupSource, /<el-switch[\s\S]*structuredOptions\.semanticEnrichment/, '语义丰富表达必须使用开关控件')
+assert.match(structuredOptionsSource, /<el-input-number[\s\S]*options\.qaPairsPerRow[\s\S]*:min="1"[\s\S]*:max="5"/, '每行生成数量必须限制在 1 到 5')
-assert.match(taskSetupSource, /<el-input-number[\s\S]*structuredOptions\.qaPairsPerRow[\s\S]*:min="1"[\s\S]*:max="5"/, '每行生成数量必须限制在 1 到 5')
 assert.match(viewSource, /const structuredOptions = ref<StructuredProcessOptions>/, '父页面缺少结构化配置状态')
-assert.match(viewSource, /datasetSplit:\s*\{ train: 80, validation: 10, test: 10 \}/, '数据集划分默认值必须为 80/10/10')
+assert.match(stateSource, /datasetSplit:\s*\{ train: 80, validation: 10, test: 10 \}/, '数据集划分默认值必须为 80/10/10')
-assert.match(viewSource, /structuredOptions:\s*\{[\s\S]*\.\.\.structuredOptions\.value/, '结构化配置没有写入草稿')
+assert.match(draftSource, /structuredOptions:\s*\{[\s\S]*\.\.\.bindings\.structuredOptions\.value/, '结构化配置没有写入草稿')
-assert.match(viewSource, /structuredOptions\.value = \{[\s\S]*\.\.\.snapshot\.structuredOptions/, '结构化配置没有从草稿恢复')
+assert.match(draftSource, /bindings\.structuredOptions\.value = \{[\s\S]*\.\.\.snapshot\.structuredOptions/, '结构化配置没有从草稿恢复')
 assert.match(viewSource, /v-model:structured-options="structuredOptions"/, '父页面没有双向绑定结构化配置')
-assert.match(viewSource, /createResults\([\s\S]*structuredOptions\.value/, '每行生成数量没有接入结果生成逻辑')
+assert.match(generationSource, /createResults\([\s\S]*bindings\.structuredOptions\.value/, '每行生成数量没有接入结果生成逻辑')
 
 for (const field of [
   'generationModelId',
@@ -206,30 +265,42 @@ for (const field of [
   'minOutputLength',
 ]) {
   assert.ok(typesSource.includes(field), `生成控制配置缺少字段：${field}`)
-  assert.ok(viewSource.includes(field), `父页面默认值或草稿状态缺少字段：${field}`)
+  assert.ok(implementationSource.includes(field), `父页面默认值或草稿状态缺少字段：${field}`)
 }
-assert.match(taskSetupSource, /GenerationOptionsPanel/, '生成选项没有复用统一的大模型与质量筛选组件')
+assert.match(structuredOptionsSource, /GenerationOptionsPanel/, '结构化生成选项没有复用统一的质量筛选组件')
-assert.match(taskSetupSource, /:options="structuredOptions"/, '结构化生成选项未接入统一配置组件')
+assert.match(unstructuredOptionsSource, /GenerationOptionsPanel/, '非结构化生成选项没有复用统一的质量筛选组件')
-assert.match(taskSetupSource, /:options="unstructuredOptions"/, '非结构化生成选项未接入统一配置组件')
+assert.match(structuredOptionsSource, /:options="options"/, '结构化生成选项未接入统一配置组件')
-assert.match(taskSetupSource, /<h3>大模型<\/h3>/, '大模型必须作为与生成选项平级的独立分类')
+assert.match(unstructuredOptionsSource, /:options="options"/, '非结构化生成选项未接入统一配置组件')
-assert.match(taskSetupSource, /section="model"/, '独立大模型分类没有挂载模型配置')
+assert.doesNotMatch(taskSetupFeatureSource, /<h3>大模型<\/h3>|section="model"/, '第一步不应继续承载大模型配置')
-assert.match(taskSetupSource, /section="quality"/, '质量筛选没有保留在生成选项分类中')
+assert.match(modelSelectionSource, /<h3[^>]*>大模型选择<\/h3>/, '独立步骤缺少大模型选择标题')
+assert.match(modelSelectionSource, /section="model"/, '独立步骤没有挂载模型配置')
+assert.match(modelSelectionSource, /defineExpose\(\{ validate \}\)/, '独立大模型选择步骤没有暴露继续前校验')
+assert.match(modelSelectionSource, /class="form-section"/, '大模型选择步骤没有沿用第一步的通栏表单分区')
+assert.doesNotMatch(modelSelectionSource, /max-width:\s*980px/, '大模型选择步骤不应使用比第一步更窄的固定内容宽度')
+assert.match(taskSetupFeatureSource, /section="quality"/, '质量筛选没有保留在生成选项分类中')
 assert.doesNotMatch(generationControlSource, /<h4>大模型<\/h4>/, '大模型不应继续作为生成选项内部子分类')
 for (const label of ['大模型', '数据生成模型', '默认提示语', '质量筛选', '过滤低质量内容', '过滤过短内容', '最少字数']) {
   assert.ok(generationControlSource.includes(label), `生成控制界面缺少：${label}`)
 }
 assert.match(generationControlSource, /filterable/, '数据生成模型下拉必须支持搜索')
 assert.match(generationControlSource, /maxlength="500"/, '默认提示语缺少合理的长度限制')
-assert.match(generationControlSource, /\.model-option-row\s*\{[\s\S]*?display:\s*flex[\s\S]*?border:\s*1px solid #e2e5ec/, '大模型配置没有与上方生成选项使用一致的配置行样式')
+assert.match(generationControlSource, /\.model-field\s*\{[\s\S]*?display:\s*flex[\s\S]*?flex-direction:\s*column/, '大模型字段没有使用稳定的纵向表单布局')
-assert.match(viewSource, /const DEFAULT_GENERATION_PROMPT\s*=\s*['"][^'"]{40,}['"]/, '大模型配置缺少可直接使用的默认提示语')
+assert.match(generationControlSource, /\.generation-config-group\s*\{[\s\S]*?border:\s*1px solid #e2e5ec/, '大模型配置没有保留统一配置面板边框')
-assert.equal((viewSource.match(/generationPrompt:\s*DEFAULT_GENERATION_PROMPT/g) || []).length, 2, '结构化与非结构化任务必须共用默认提示语')
+assert.match(generationControlSource, /\.model-config-group\s*\{[\s\S]*?padding:\s*0[\s\S]*?border:\s*0/, '独立大模型步骤仍存在嵌套卡片挤压')
+assert.match(
+  generationControlSource,
+  /\.model-config-group \.advanced-settings-grid\s*\{[\s\S]*?grid-template-columns:\s*1fr/,
+  '大模型高级参数没有改为与第一步一致的纵向布局',
+)
+assert.match(stateSource, /const DEFAULT_GENERATION_PROMPT\s*=\s*['"][^'"]{40,}['"]/, '大模型配置缺少可直接使用的默认提示语')
+assert.equal((stateSource.match(/generationPrompt:\s*DEFAULT_GENERATION_PROMPT/g) || []).length, 2, '结构化与非结构化任务必须共用默认提示语')
 assert.match(generationControlSource, /v-if="options\.qualityFilterEnabled"/, '质量规则没有随总开关渐进显示')
 assert.match(generationControlSource, /v-if="options\.filterShortContent"/, '最少字数没有随短内容规则显示')
 assert.match(generationControlSource, /:min="1"[\s\S]*:max="1000"/, '最少字数缺少 1 到 1000 的边界限制')
-assert.match(taskSetupSource, /generationValidationMessage/, '生成模型与质量规则缺少继续前校验')
+assert.match(taskSetupSource, /qualityValidationMessage/, '质量规则缺少继续前校验')
 assert.match(viewSource, /useModelsStore/, '创建页没有加载模型列表')
 assert.match(viewSource, /model\.type === 'LLM'/, '数据生成模型列表没有排除非大模型')
-assert.match(viewSource, /:generation-models="generationModels"/, '创建页没有向生成选项传递模型列表')
+assert.match(viewSource, /<ModelSelectionStep[\s\S]*?:models="generationModels"/, '创建页没有向独立大模型选择步骤传递模型列表')
 
 assert.match(typesSource, /export interface UnstructuredProcessOptions/, '缺少非结构化处理选项类型')
 for (const field of [
@@ -253,60 +324,51 @@ for (const removedField of ['contextScope', 'generationTypes', 'skipUnanswerable
 }
 
 assert.match(taskSetupSource, /v-if="processType === 'unstructured'"/, '非结构化配置必须仅在非结构化数据类型下显示')
-assert.ok(taskSetupSource.includes('智能预处理'), '简化后缺少智能预处理总开关')
+assert.ok(unstructuredOptionsSource.includes('智能预处理'), '简化后缺少智能预处理总开关')
-assert.ok(taskSetupSource.includes('敏感信息脱敏'), '简化后缺少脱敏开关')
+assert.ok(unstructuredOptionsSource.includes('敏感信息脱敏'), '简化后缺少脱敏开关')
-assert.match(taskSetupSource, /const smartPreprocessEnabled = computed/, '智能预处理没有映射到内部处理项')
+assert.match(unstructuredOptionsSource, /const smartPreprocessEnabled = computed/, '智能预处理没有映射到内部处理项')
-assert.match(taskSetupSource, /function updateSmartPreprocess/, '智能预处理开关缺少更新逻辑')
+assert.match(unstructuredOptionsSource, /function updateSmartPreprocess/, '智能预处理开关缺少更新逻辑')
-assert.match(taskSetupSource, /function updateDesensitize/, '脱敏开关缺少更新逻辑')
+assert.match(unstructuredOptionsSource, /function updateDesensitize/, '脱敏开关缺少更新逻辑')
 
-assert.ok(taskSetupSource.includes('切分选项'), '非结构化配置缺少切分选项分类')
+assert.ok(unstructuredOptionsSource.includes('切分选项'), '非结构化配置缺少切分选项分类')
 for (const method of ['自动语义切分', '按标题和段落', '按固定长度', '自定义分隔符']) {
-  assert.ok(taskSetupSource.includes(method), `切分方式缺少选项：${method}`)
+  assert.ok(unstructuredOptionsSource.includes(method), `切分方式缺少选项：${method}`)
 }
 for (const label of ['切片长度', '重叠长度', '最小切片长度', '保护表格、代码和列表']) {
-  assert.ok(taskSetupSource.includes(label), `切分选项缺少配置：${label}`)
+  assert.ok(unstructuredOptionsSource.includes(label), `切分选项缺少配置：${label}`)
 }
-assert.ok(taskSetupSource.includes('高级设置'), '切分选项缺少渐进式高级设置入口')
+assert.doesNotMatch(unstructuredOptionsSource, /advancedChunkSettingsOpen|>高级设置</, '切分核心参数不应再隐藏在高级设置中')
-assert.match(taskSetupSource, /:aria-expanded="advancedChunkSettingsOpen"/, '高级设置入口缺少展开状态的可访问性标记')
+assert.match(taskSetupSource, /if \(chunkValidationMessage\.value\) \{[\s\S]*?revealValidation\(\)[\s\S]*?return false/, '高级切分配置校验失败时没有重新展开定位')
-assert.match(taskSetupSource, /v-if="advancedChunkSettingsOpen"/, '高级设置内容没有默认收起')
+assert.match(unstructuredOptionsSource, /const preserveSpecialContentEnabled = computed/, '特殊内容保护没有合并为单一开关')
-assert.match(taskSetupSource, /watch\(\(\) => props\.unstructuredOptions\.chunkMethod,[\s\S]*?method === 'custom'[\s\S]*?advancedChunkSettingsOpen\.value = true/, '选择自定义分隔符时没有自动展开高级设置')
+assert.match(unstructuredOptionsSource, /function updateSpecialContentProtection/, '特殊内容保护开关缺少更新逻辑')
-assert.match(taskSetupSource, /if \(chunkValidationMessage\.value\) \{[\s\S]*?advancedChunkSettingsOpen\.value = true[\s\S]*?return false/, '高级切分配置校验失败时没有重新展开定位')
+assert.match(unstructuredOptionsSource, /options\.chunkSize[\s\S]*?:min="200"[\s\S]*?:max="2000"/, '切片长度必须限制在 200 到 2000 Token')
-assert.match(taskSetupSource, /const preserveSpecialContentEnabled = computed/, '特殊内容保护没有合并为单一开关')
+assert.match(unstructuredOptionsSource, /options\.chunkOverlap[\s\S]*?:min="0"[\s\S]*?:max="500"/, '重叠长度必须限制在 0 到 500 Token')
-assert.match(taskSetupSource, /function updateSpecialContentProtection/, '特殊内容保护开关缺少更新逻辑')
+assert.match(unstructuredOptionsSource, /options\.minChunkSize[\s\S]*?:min="20"[\s\S]*?:max="500"/, '最小切片长度必须限制在 20 到 500 Token')
-assert.match(taskSetupSource, /unstructuredOptions\.chunkSize[\s\S]*?:min="200"[\s\S]*?:max="2000"/, '切片长度必须限制在 200 到 2000 Token')
-assert.match(taskSetupSource, /unstructuredOptions\.chunkOverlap[\s\S]*?:min="0"[\s\S]*?:max="500"/, '重叠长度必须限制在 0 到 500 Token')
-assert.match(taskSetupSource, /unstructuredOptions\.minChunkSize[\s\S]*?:min="20"[\s\S]*?:max="500"/, '最小切片长度必须限制在 20 到 500 Token')
 
-for (const label of ['语义丰富表达', '每个切片生成数量', '数据集划分']) {
+for (const label of ['每个切片生成数量', '数据集划分']) {
-  assert.ok(taskSetupSource.includes(label), `非结构化生成选项缺少：${label}`)
+  assert.ok(taskSetupFeatureSource.includes(label), `非结构化生成选项缺少：${label}`)
 }
 for (const removedLabel of ['上下文范围', '问题类型', '跳过无法回答的内容']) {
-  assert.ok(!taskSetupSource.includes(removedLabel), `简化后仍显示低频选项：${removedLabel}`)
+  assert.ok(!taskSetupFeatureSource.includes(removedLabel), `简化后仍显示低频选项：${removedLabel}`)
 }
-assert.match(taskSetupSource, /unstructuredOptions\.qaPairsPerChunk[\s\S]*?:min="1"[\s\S]*?:max="3"/, '每个切片生成数量必须限制在 1 到 3')
+assert.match(unstructuredOptionsSource, /options\.qaPairsPerChunk[\s\S]*?:min="1"[\s\S]*?:max="3"/, '每个切片生成数量必须限制在 1 到 3')
 assert.match(taskSetupSource, /unstructuredSplitTotal\.value !== 100/, '非结构化数据集划分缺少总和 100% 校验')
 assert.match(taskSetupSource, /chunkOverlap \+ props\.unstructuredOptions\.minChunkSize[\s\S]*?> props\.unstructuredOptions\.chunkSize/, '切分配置未校验重叠长度与最小切片长度的组合边界')
-assert.ok(taskSetupSource.includes('Token 数为轻量估算值'), '切片长度缺少 Token 估算说明')
+assert.ok(unstructuredOptionsSource.includes('Token 数为轻量估算值'), '切片长度缺少 Token 估算说明')
-assert.match(taskSetupSource, /\.chunk-settings-grid\s*\{[\s\S]*?grid-template-columns:\s*repeat\(3,\s*minmax\(0,\s*1fr\)\)/, '核心切分参数没有收紧为三列布局')
+assert.match(unstructuredOptionsSource, /\.chunk-settings-grid\s*\{[\s\S]*?grid-template-columns:\s*repeat\(3,\s*minmax\(0,\s*1fr\)\)/, '核心切分参数没有收紧为三列布局')
 
 assert.match(viewSource, /const unstructuredOptions = ref<UnstructuredProcessOptions>/, '父页面缺少非结构化配置状态')
-assert.match(viewSource, /chunkMethod:\s*'semantic'/, '非结构化默认切分方式必须为自动语义切分')
+assert.match(stateSource, /chunkMethod:\s*'semantic'/, '非结构化默认切分方式必须为自动语义切分')
-assert.match(viewSource, /chunkSize:\s*800/, '默认切片长度必须为 800 Token')
+assert.match(stateSource, /chunkSize:\s*800/, '默认切片长度必须为 800 Token')
-assert.match(viewSource, /chunkOverlap:\s*100/, '默认重叠长度必须为 100 Token')
+assert.match(stateSource, /chunkOverlap:\s*100/, '默认重叠长度必须为 100 Token')
-assert.match(viewSource, /minChunkSize:\s*100/, '默认最小切片长度必须为 100 Token')
+assert.match(stateSource, /minChunkSize:\s*100/, '默认最小切片长度必须为 100 Token')
-assert.match(viewSource, /qaPairsPerChunk:\s*1/, '默认每个切片必须生成 1 个问答对')
+assert.match(stateSource, /qaPairsPerChunk:\s*1/, '默认每个切片必须生成 1 个问答对')
-assert.match(viewSource, /unstructuredOptions:\s*\{[\s\S]*\.\.\.unstructuredOptions\.value/, '非结构化配置没有写入草稿')
+assert.match(draftSource, /unstructuredOptions:\s*\{[\s\S]*\.\.\.bindings\.unstructuredOptions\.value/, '非结构化配置没有写入草稿')
-assert.match(viewSource, /unstructuredOptions\.value = \{[\s\S]*restoredUnstructuredOptions\.chunkSize/, '非结构化配置没有从草稿恢复')
+assert.match(draftSource, /bindings\.unstructuredOptions\.value = \{[\s\S]*\.\.\.snapshot\.unstructuredOptions/, '非结构化配置没有从草稿恢复')
 assert.match(viewSource, /v-model:unstructured-options="unstructuredOptions"/, '父页面没有双向绑定非结构化配置')
-assert.match(viewSource, /const DRAFT_SCHEMA_VERSION = \d+/, '草稿缺少版本标识')
+assert.match(draftSource, /DATA_PROCESS_DRAFT_SCHEMA_VERSION = \d+/, '草稿缺少版本标识')
-assert.match(viewSource, /schemaVersion:\s*DRAFT_SCHEMA_VERSION/, '草稿快照没有写入版本标识')
+assert.match(draftSource, /schemaVersion:\s*DATA_PROCESS_DRAFT_SCHEMA_VERSION/, '草稿快照没有写入版本标识')
-assert.match(viewSource, /requiresPreviewMigration/, '旧草稿没有失效旧切片预览')
+assert.match(draftSource, /bindings\.goToStep\('create'\)/, '恢复配置后应回到安全的创建步骤')
-assert.doesNotMatch(
-  viewSource,
-  /snapshot\.unstructuredOptions\s*&&\s*!requiresPreviewMigration/,
-  '草稿版本迁移不应丢失仍受支持的非结构化配置',
-)
-assert.match(viewSource, /const restoredUnstructuredOptions = snapshot\.unstructuredOptions/, '旧草稿没有通过白名单恢复仍受支持的配置')
 assert.match(viewSource, /JSON\.stringify\(previewAffectingOptions\(\)\)/, '影响切分的非结构化配置没有纳入预览失效判断')
 
 const previewOptionsStart = viewSource.indexOf('function previewAffectingOptions()')
@@ -810,10 +872,10 @@ assert.match(sourceUploadSource, /@click="emit\('remove-file', file\.uid\)"/, '
 const { descriptor } = parseSfc(viewSource, { filename: viewPath })
 const template = descriptor.template?.content || ''
 assert.equal((template.match(/class="wizard-primary-action"/g) || []).length, 1, '页面必须只有一个主操作入口')
-assert.match(viewSource, /onBeforeUnmount\(stopGenerationTimer\)/, '生成计时器没有在卸载时清理')
+assert.match(viewSource, /onBeforeUnmount\(\(\) => \{[\s\S]*?stopGenerationTimer\(\)[\s\S]*?clearTimeout\(connectionTimer\)[\s\S]*?clearTimeout\(pullTimer\)/, '生成与外部数据源计时器没有在卸载时清理')
 assert.match(viewSource, /function scrollToStepTop/, '步骤切换后没有恢复页面顶部上下文')
 assert.match(viewSource, /nextTick\(scrollToStepTop\)/, '步骤切换没有触发页面滚动复位')
-assert.match(viewSource, /\.wizard-content\s*\{[\s\S]*min-height:\s*400px/, '第一步内容区必须保留足够高度以显示底部操作栏')
+assert.match(viewStyleSource, /\.wizard-content\s*\{[\s\S]*min-height:\s*400px/, '第一步内容区必须保留足够高度以显示底部操作栏')
 assert.match(
   layoutSource,
   /&:has\(\.create-wizard-layout\)\s*\{[\s\S]*?overflow-y:\s*hidden[\s\S]*?\.page-canvas\s*\{[\s\S]*?flex:\s*1 1 auto[\s\S]*?min-height:\s*0/,
@@ -821,4 +883,4 @@ assert.match(
 )
 assert.match(previewSource, /height:\s*clamp\(560px,\s*calc\(100vh - 370px\),\s*720px\)/, '对照预览高度不足以展示切片正文')
 
-console.log('数据处理五步向导回归检查通过')
+console.log('数据处理六步向导回归检查通过')

frontend/scripts/regression-dataset-preview.mjs

@@ -4,12 +4,25 @@ import ts from 'typescript'
 
 const root = process.cwd()
 const previewPath = path.join(root, 'src/views/dataset/DatasetPreviewView.vue')
+const previewComponentsDir = path.join(root, 'src/views/dataset/preview')
+const previewComponentPaths = [
+  'DatasetVersionBar.vue',
+  'DatasetRecordTable.vue',
+  'DatasetRecordEditorDialog.vue',
+  'DatasetRawPreview.vue',
+].map((name) => path.join(previewComponentsDir, name))
 const apiPath = path.join(root, 'src/api/modules/dataset.ts')
 const adapterPath = path.join(root, 'src/mock/adapter.ts')
 const mockPath = path.join(root, 'src/mock/data.ts')
 const recordsPath = path.join(root, 'src/views/dataset/datasetRecords.ts')
 const versionsPath = path.join(root, 'src/mock/datasetVersions.ts')
 const source = fs.readFileSync(previewPath, 'utf8')
+const previewLogicSource = source.slice(0, source.indexOf('<style'))
+const previewComponentSources = previewComponentPaths.map((componentPath) => {
+  expect(fs.existsSync(componentPath), `缺少数据集预览叶子组件：${path.basename(componentPath)}`)
+  return fs.readFileSync(componentPath, 'utf8')
+})
+const previewSurfaceSource = [source, ...previewComponentSources].join('\n')
 const apiSource = fs.readFileSync(apiPath, 'utf8')
 const adapterSource = fs.readFileSync(adapterPath, 'utf8')
 const mockSource = fs.readFileSync(mockPath, 'utf8')
@@ -28,6 +41,7 @@ const {
   activateDatasetVersion,
   appendDatasetVersion,
   createInitialVersionState,
+  deleteDatasetVersion,
   getActiveDatasetVersion,
 } = await import(`data:text/javascript;base64,${Buffer.from(versionsModuleCode).toString('base64')}`)
 
@@ -35,35 +49,61 @@ function expect(condition, message) {
   if (!condition) throw new Error(message)
 }
 
+expect(previewLogicSource.split('\n').length < 520, 'DatasetPreviewView.vue 的逻辑与模板应保持在 520 行以内')
+for (const componentName of ['DatasetVersionBar', 'DatasetRecordTable', 'DatasetRecordEditorDialog', 'DatasetRawPreview']) {
+  expect(source.includes(`import ${componentName}`), `主页面未导入叶子组件：${componentName}`)
+  expect(source.includes(`<${componentName}`), `主页面未挂载叶子组件：${componentName}`)
+}
 expect(source.includes('class="preview-workspace"'), '详情页应提供数据文件工作区')
 expect(!source.includes('class="file-pane"'), '单文件数据集详情不应展示文件选择侧栏')
-expect(source.includes('class="code-line"'), '内容查看器应提供逐行展示')
+expect(previewSurfaceSource.includes('class="code-line"'), '内容查看器应提供逐行展示')
-expect(source.includes('class="line-number"'), '内容查看器应显示行号')
+expect(previewSurfaceSource.includes('class="line-number"'), '内容查看器应显示行号')
 expect(source.includes('previewLoading'), '切换文件时应提供独立加载状态')
 expect(source.includes('previewError'), '内容加载失败时应提供错误状态')
-expect(source.includes('class="records-viewer"'), '详情页应将结构化文件展示为样本列表')
+expect(previewSurfaceSource.includes('class="records-viewer"'), '详情页应将结构化文件展示为样本列表')
-expect(source.includes('class="record-table"'), '样本数据应使用企业级表格展示')
+expect(previewSurfaceSource.includes('class="record-table"'), '样本数据应使用企业级表格展示')
-expect(source.includes('fixed="right"'), '逐条编辑操作列应固定在表格右侧')
+expect(previewSurfaceSource.includes('fixed="right"'), '逐条编辑操作列应固定在表格右侧')
-expect(source.includes('v-for="fieldKey in tableFieldKeys"'), '企业表格应根据数据结构动态生成字段列')
+expect(previewSurfaceSource.includes('v-for="fieldKey in tableFieldKeys"'), '企业表格应根据数据结构动态生成字段列')
-expect(source.includes('openRecordEditor(asDatasetRecord(row))'), '每条样本应提供独立编辑入口')
+expect(previewSurfaceSource.includes("emit('edit', asDatasetRecord(row))"), '每条样本应向主页面发送编辑事件')
-expect(source.includes('暂存修改'), '单条编辑应先暂存到当前页面')
+expect(previewSurfaceSource.includes('暂存修改'), '单条编辑应先暂存到当前页面')
 expect(source.includes('hasPendingVersionChanges && isViewingActiveVersion'), '存在暂存修改时才应显示保存版本按钮')
 expect(source.includes('保存版本'), '文件工具栏应提供保存版本按钮')
 expect(source.includes('baseVersionContent'), '页面应区分已保存版本与待保存工作副本')
-expect(source.includes('class="version-control-bar"'), '详情页应提供独立版本控制区')
+expect(previewSurfaceSource.includes('class="version-control-bar"'), '详情页应提供独立版本控制区')
-expect(source.includes('设为当前版本'), '历史版本应支持显式切换为当前版本')
+expect(previewSurfaceSource.includes('设为当前版本'), '历史版本应支持显式切换为当前版本')
-expect(source.includes('历史版本（只读）'), '历史版本应明确展示只读状态')
+expect(previewSurfaceSource.includes('class="version-actions"'), '历史版本操作应收纳到省略号菜单')
+expect(previewSurfaceSource.includes('删除版本'), '历史版本操作菜单应提供删除入口')
+expect(previewSurfaceSource.includes('历史版本（只读）'), '历史版本应明确展示只读状态')
+expect(source.includes('AppConfirmDialog'), '删除历史版本前应使用公共危险确认弹窗')
+expect(source.includes("tone: 'danger'"), '删除历史版本确认弹窗应使用危险态')
 expect(source.includes('loadedVersionId.value'), '下载和展示应绑定正在查看的具体版本')
 expect(source.includes('versionRequestId'), '快速切换历史版本时应防止旧响应覆盖新内容')
-expect(source.includes('v-model:current-page="currentPage"'), '样本列表应支持分页浏览')
+expect(previewSurfaceSource.includes('v-model:current-page="currentPage"'), '样本列表应支持分页浏览')
 expect(!source.includes('class="content-editor"'), '详情页不应继续提供整文件编辑器')
 expect(source.includes('saveRecord'), '逐条编辑器应提供单条保存动作')
 expect(source.includes('hasUnsavedChanges'), '在线编辑器应跟踪未保存修改')
 expect(source.includes('onBeforeRouteLeave'), '离开页面时应保护未保存修改')
-expect(source.includes("event.key.toLowerCase() === 's'"), '在线编辑器应支持快捷键保存')
+expect(previewSurfaceSource.includes("event.key.toLowerCase() === 's'"), '在线编辑器应支持快捷键保存')
 expect(source.includes('loadVersions(selectedFile)'), '版本内容加载失败后应支持重新加载')
+expect(source.includes('function resetRecordEditor()'), '主页面应提供统一的编辑器状态清理函数')
+const resetEditorStart = source.indexOf('function resetRecordEditor()')
+const updateFieldStart = source.indexOf('function updateEditField', resetEditorStart)
+const resetEditorSource = source.slice(resetEditorStart, updateFieldStart)
+for (const marker of [
+  'editorVisible.value = false',
+  'editingRecord.value = null',
+  'editFields.value = []',
+  "rawDraft.value = ''",
+  "originalDraft.value = ''",
+]) {
+  expect(resetEditorSource.includes(marker), `编辑器状态清理不完整：${marker}`)
+}
+const versionChangeStart = source.indexOf('async function handleViewedVersionChange')
+const activateVersionStart = source.indexOf('async function activateViewedVersion', versionChangeStart)
+const versionChangeSource = source.slice(versionChangeStart, activateVersionStart)
+expect(versionChangeSource.includes('resetRecordEditor()'), '成功切换版本后必须关闭并清空旧编辑器状态')
 expect(!source.includes('handleDownloadAll'), '页面不应保留整包下载逻辑')
-expect(!source.includes('handleDelete'), '页面不应保留删除逻辑')
+expect(!source.includes('deleteDataset('), '详情页不应恢复删除整个数据集的逻辑')
 expect(!source.includes('router.back()'), '页面不应保留页头返回逻辑')
 expect(mockSource.includes('files: ['), 'Mock 数据集应包含可验收的文件列表')
 expect(mockSource.includes('mockDatasetPreviews'), 'Mock 数据应包含文件预览内容')
@@ -73,12 +113,15 @@ expect(mockSource.includes('.map((dataset)'), '所有 Mock 数据集都应自动
 expect(mockSource.includes(': [{ id: `dataset-${dataset.id}-samples`'), '每个 Mock 数据集应只对应一个数据文件')
 expect(apiSource.includes('createDatasetFileVersion'), '数据集 API 应提供创建新版本方法')
 expect(apiSource.includes('activateDatasetFileVersion'), '数据集 API 应提供切换当前版本方法')
+expect(apiSource.includes('deleteDatasetFileVersion'), '数据集 API 应提供删除历史版本方法')
 expect(apiSource.includes('getDatasetFileVersionContent'), '数据集 API 应支持读取历史版本内容')
 expect(apiSource.includes('expected_current_version_id'), '创建和激活版本应携带乐观锁版本指针')
 expect(!apiSource.includes('updateDatasetFileContent'), '数据编辑不应继续覆盖历史版本内容')
 expect(adapterSource.includes('mock:dataset-versions:'), 'Mock 版本历史应支持刷新持久化')
 expect(adapterSource.includes('当前版本已被其他用户更新'), 'Mock 应拒绝基于过期版本的并发覆盖')
 expect(adapterSource.includes('历史版本不可覆盖'), '旧的覆盖保存接口应明确拒绝修改历史版本')
+expect(versionsSource.includes('当前版本不可删除'), 'Mock 应拒绝删除当前版本')
+expect(versionsSource.includes('初始版本不可删除'), 'Mock 应拒绝删除初始版本')
 expect(adapterSource.includes('Mock 存储空间不足'), 'Mock 存储失败时应返回明确错误且保留编辑草稿')
 
 const jsonl = [
@@ -111,6 +154,21 @@ expect(v2State.versions[1].version === 2 && v2State.active_version_id === 'v2',
 const switchedToV1 = activateDatasetVersion(v2State, 'v1')
 expect(getActiveDatasetVersion(switchedToV1).content === 'A', '切换当前版本后应读取对应历史内容')
 expect(v2State.active_version_id === 'v2' && v2State.versions[1].content === 'B', '切换版本不得污染原状态或历史快照')
+const v3State = appendDatasetVersion(v2State, 'C', '2026-07-13T02:00:00Z', '修改第二条')
+const deletedV2State = deleteDatasetVersion(v3State, 'v2')
+expect(!deletedV2State.versions.some((item) => item.id === 'v2'), '删除历史版本后不应继续返回该版本')
+expect(deletedV2State.active_version_id === 'v3', '删除历史版本不得改变当前版本指针')
+const v4State = appendDatasetVersion(deletedV2State, 'D', '2026-07-13T03:00:00Z', '继续编辑')
+expect(v4State.versions.at(-1)?.version === 4, '删除历史版本后不得复用旧版本号')
+for (const protectedVersionId of ['v1', 'v3']) {
+  let protectedVersionRejected = false
+  try {
+    deleteDatasetVersion(v3State, protectedVersionId)
+  } catch {
+    protectedVersionRejected = true
+  }
+  expect(protectedVersionRejected, `${protectedVersionId} 受保护版本不得删除`)
+}
 let invalidVersionRejected = false
 try {
   activateDatasetVersion(v2State, 'missing')

frontend/scripts/regression-eval-create-wizard.mjs

@@ -11,6 +11,8 @@ const [
   createSource,
   taskStepSource,
   ruleStepSource,
+  basicMetricStepSource,
+  startStepSource,
   dimensionFieldsSource,
   listSource,
   routerSource,
@@ -19,6 +21,8 @@ const [
   readFile(path.join(evalViewDir, 'EvalCreateView.vue'), 'utf8'),
   readFile(path.join(evalViewDir, 'create/EvalTaskSetupStep.vue'), 'utf8'),
   readFile(path.join(evalViewDir, 'create/EvalRuleSetupStep.vue'), 'utf8'),
+  readFile(path.join(evalViewDir, 'create/BasicMetricSetupStep.vue'), 'utf8'),
+  readFile(path.join(evalViewDir, 'create/StartEvalStep.vue'), 'utf8'),
   readFile(path.join(evalViewDir, 'create/DimensionFormFields.vue'), 'utf8'),
   readFile(path.join(evalViewDir, 'EvalView.vue'), 'utf8'),
   readFile(path.join(sourceRoot, 'router/index.ts'), 'utf8'),
@@ -74,21 +78,43 @@ assert.match(
 
 assert.match(createSource, /EvalTaskSetupStep/, '向导缺少任务配置子组件')
 assert.match(createSource, /EvalRuleSetupStep/, '向导缺少评测规则子组件')
+assert.match(createSource, /BasicMetricSetupStep/, '向导缺少基础评测指标子组件')
+assert.match(createSource, /StartEvalStep/, '向导缺少开始评测确认子组件')
 assert.match(
   createSource,
-  /任务配置[\s\S]*?评测规则/,
+  /任务配置[\s\S]*?大模型评测指标[\s\S]*?基础评测指标[\s\S]*?开始评测/,
-  '评测创建向导必须按“任务配置、评测规则”定义两个步骤',
+  '评测创建向导必须按“任务配置、大模型评测指标、基础评测指标、开始评测”定义四个步骤',
 )
 assert.match(
   ruleStepSource,
   /:show-description=["']false["']/,
-  '新建评测任务第二步不应显示重复的规则描述输入框',
+  '大模型评测指标步骤不应显示重复的规则描述输入框',
+)
+assert.match(
+  ruleStepSource,
+  /:show-status-settings=["']false["']/,
+  '大模型评测指标步骤不应显示维度管理状态字段',
+)
+assert.match(
+  ruleStepSource,
+  /LLM_METRIC_TYPES[^=]*=\s*\[['"]classification['"],\s*['"]metric['"]\][\s\S]*?:allowed-types=["']LLM_METRIC_TYPES["']/,
+  '大模型评测指标步骤只应提供依赖大模型的分类与评分指标',
 )
 assert.match(
   dimensionFieldsSource,
   /v-if=["']showDescription["'][^>]*label=["']描述["']/,
   '共享维度字段必须支持按场景隐藏描述输入框',
 )
+assert.match(
+  dimensionFieldsSource,
+  /score_min[\s\S]*?score_max[\s\S]*?pass_threshold[\s\S]*?Math\.min[\s\S]*?Math\.max/,
+  '指标型评分区间变化时必须把通过阈值约束在合法范围内',
+)
+assert.match(
+  dimensionFieldsSource,
+  /prop=["']score_min["'][\s\S]*?:max=["'][^"']*score_max[^"']*["'][\s\S]*?prop=["']score_max["'][\s\S]*?:min=["'][^"']*score_min[^"']*["']/,
+  '评分最小值和最大值输入必须具备交叉边界约束',
+)
 assert.match(createSource, /currentStep\s*=\s*ref\(0\)/, '评测创建向导缺少当前步骤状态')
 assert.match(createSource, /class=["']custom-wizard-steps["']/, '评测向导未复用数据处理的自定义步骤条结构')
 assert.match(createSource, /class=["']step-connector["']/, '评测向导步骤条缺少连接线')
@@ -102,8 +128,18 @@ assert.match(
 )
 assert.match(
   createSource,
-  /<EvalRuleSetupStep[\s\S]*?v-else/,
+  /<EvalRuleSetupStep[\s\S]*?currentStep[^"']*1/,
-  '评测规则子组件没有绑定第二步',
+  '大模型评测指标子组件没有绑定第二步',
+)
+assert.match(
+  createSource,
+  /<BasicMetricSetupStep[\s\S]*?currentStep[^"']*2/,
+  '基础评测指标子组件没有绑定第三步',
+)
+assert.match(
+  createSource,
+  /<StartEvalStep[\s\S]*?v-else/,
+  '开始评测确认子组件没有绑定第四步',
 )
 
 assert.match(taskStepSource, /prop=["']dataset_id["']/, '数据集字段缺少表单校验标识')
@@ -113,16 +149,15 @@ assert.match(
   '选择评测数据集时必须校验 dataset_id',
 )
 
-assert.match(createSource, /['"]baseline['"]/, '向导缺少基线评测分支')
 assert.match(
-  `${createSource}\n${ruleStepSource}`,
+  basicMetricStepSource,
-  /已有维度|existing/,
+  /BLEU[\s\S]*?ROUGE[\s\S]*?(?:Cosine|余弦)/,
-  '评测规则步骤缺少使用已有维度的分支',
+  '基础评测指标步骤必须提供 BLEU、ROUGE 与余弦相似度配置',
 )
 assert.match(
-  `${createSource}\n${ruleStepSource}`,
+  basicMetricStepSource,
-  /新建(?:评测)?(?:维度|规则)|create/,
+  /bleu_enabled[\s\S]*?rouge_enabled[\s\S]*?cosine_enabled/,
-  '评测规则步骤缺少新建维度的分支',
+  '基础评测指标必须支持分别决定是否启用',
 )
 
 assert.match(
@@ -137,17 +172,18 @@ assert.match(
 )
 assert.match(
   createSource,
-  /eval_type[\s\S]*?baseline[\s\S]*?(?:dimension_id|createDimension)/,
+  /basic_metrics[\s\S]*?bleu[\s\S]*?rouge[\s\S]*?cosine/,
-  '基线评测必须有明确的不创建自定义维度分支',
+  '启动评测时必须提交基础评测指标配置',
 )
 assert.match(
-  createSource,
+  startStepSource,
-  /ruleMode[\s\S]*?['"]existing['"]/,
+  /任务信息[\s\S]*?大模型评测指标[\s\S]*?基础评测指标/,
-  '已有维度模式必须有独立的提交分支',
+  '开始评测步骤必须展示前三步配置摘要',
 )
 
 assert.match(createSource, /:loading=["']submitting["']/, '最终提交按钮缺少 loading 状态')
 assert.match(createSource, /:disabled=["'][^"']*submitting/, '提交期间必须禁用重复操作')
+assert.match(createSource, />\s*开始评测\s*</, '最终提交按钮必须命名为“开始评测”')
 assert.match(createSource, /class=["'][^"']*wizard-footer/, '评测向导缺少统一底部操作栏')
 assert.match(
   createSource,

frontend/scripts/regression-fine-tune-create-ui.mjs

@@ -1,10 +1,12 @@
 import { readFileSync } from 'node:fs'
 import { resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
+import ts from 'typescript'
 
 const root = resolve(fileURLToPath(new URL('..', import.meta.url)))
 const source = readFileSync(resolve(root, 'src/views/fine-tune/FineTuneCreateView.vue'), 'utf8')
 const modelDialogSource = readFileSync(resolve(root, 'src/components/ModelSelectDialog.vue'), 'utf8')
+const formModelSource = readFileSync(resolve(root, 'src/views/fine-tune/fineTuneFormModel.ts'), 'utf8')
 
 function assert(condition, message) {
   if (!condition) {
@@ -24,11 +26,32 @@ assert(modelDialogSource.includes('width="860px"'), 'Model dialog should use a c
 assert(modelDialogSource.includes('model-series-list'), 'Model dialog should include a model series list column')
 assert(modelDialogSource.includes('model-version-list'), 'Model dialog should include a snapshot/version list column')
 assert(modelDialogSource.includes('handleConfirm'), 'Model dialog should confirm the selected model before updating the form')
-assert(source.includes("auto_merge: false"), 'Auto merge should default to disabled')
+assert(formModelSource.includes('auto_merge: false'), 'Auto merge should default to disabled')
 assert(source.includes('v-if="form.train_type === \'SFT\'"'), 'Merge model settings should only be visible for SFT')
 assert(source.includes('content-position="left">合并模型'), 'SFT form should include a merge model section below data configuration')
 assert(source.includes('v-model="form.auto_merge"'), 'Merge model section should provide an auto merge selector')
 assert(source.includes('label="自动合并权重并保存"'), 'Auto merge selector should use a clear visible label')
-assert((source.match(/auto_merge: form\.train_type === 'SFT' && form\.auto_merge/g) || []).length === 2, 'Auto merge should be sent for SFT when creating and starting the task')
+assert(formModelSource.includes("auto_merge: form.train_type === 'SFT' && form.auto_merge"), 'Auto merge should be normalized by the shared payload builder')
+assert(source.includes('const payload = buildFineTunePayload(form, selectedGpus.value)'), 'Create and start should share one normalized payload')
+assert(source.includes('startFineTune({ ...payload, task_id: taskId })'), 'Start request should reuse the normalized payload')
+assert(source.includes('Object.assign(form, DEFAULT_TRAINING_PARAMS)'), 'Reset should reuse the canonical defaults')
+assert(!source.includes('const taskData = {'), 'The duplicated create payload should be removed')
+assert(!source.includes('const createRes: any'), 'Create response should use the API return type')
+assert(!source.includes('(check as any).exists'), 'Name-check response should use its API return type')
+assert(source.includes('任务名校验失败'), 'Name-check failures should be visible and block submission')
+
+const runnableSource = ts.transpileModule(
+  formModelSource.replace("import type { FineTuneStartPayload, FineTuneTask } from '@/types'", ''),
+  { compilerOptions: { module: ts.ModuleKind.ESNext, target: ts.ScriptTarget.ES2022 } },
+).outputText
+const model = await import(`data:text/javascript;base64,${Buffer.from(runnableSource).toString('base64')}`)
+const defaults = model.createDefaultFineTuneForm()
+const customized = { ...defaults, train_type: 'DPO', train_method: 'full', auto_merge: true, quantization_bit: 4 }
+const payload = model.buildFineTunePayload(customized, [0, 2])
+assert(payload.auto_merge === false, 'Non-SFT tasks must never enable auto merge')
+assert(payload.quantization_bit === 0, 'Full fine-tuning must never send QLoRA quantization')
+assert(payload.gpus.join(',') === '0,2', 'Selected GPUs should be preserved in the shared payload')
+const resetDefaults = { ...model.DEFAULT_TRAINING_PARAMS }
+assert(resetDefaults.lora_alpha === defaults.lora_alpha, 'Reset and initial defaults must share LoRA values')
 
 console.log('fine-tune create UI regression checks passed')

frontend/scripts/regression-page-surface.mjs

@@ -6,11 +6,12 @@ import { parse as parseTemplate } from '@vue/compiler-dom'
 import { parse as parseSfc } from '@vue/compiler-sfc'
 
 const scriptDir = path.dirname(fileURLToPath(import.meta.url))
-const [globalStyles, routerSource, mainLayoutSource, trainingLogSource, fineTuneCreateSource] = await Promise.all([
+const [globalStyles, routerSource, mainLayoutSource, trainingLogSource, trainingOverviewSource, fineTuneCreateSource] = await Promise.all([
   readFile(path.resolve(scriptDir, '../src/styles/index.scss'), 'utf8'),
   readFile(path.resolve(scriptDir, '../src/router/index.ts'), 'utf8'),
   readFile(path.resolve(scriptDir, '../src/layouts/MainLayout.vue'), 'utf8'),
   readFile(path.resolve(scriptDir, '../src/views/system/TrainingLogView.vue'), 'utf8'),
+  readFile(path.resolve(scriptDir, '../src/views/system/training-log/TrainingTaskOverview.vue'), 'utf8'),
   readFile(path.resolve(scriptDir, '../src/views/fine-tune/FineTuneCreateView.vue'), 'utf8'),
 ])
 
@@ -70,9 +71,12 @@ const selfSurfaceRoutes = [
   'fine-tune',
   'model-eval',
   'model-inference',
+  'model-inference/chat/:id',
   'model-manage',
   'data-process',
+  'data-process/create',
   'dataset',
+  'user-settings',
 ]
 for (const routePath of selfSurfaceRoutes) {
   const routeBlock = extractRouteBlock(routerSource, routePath)
@@ -138,8 +142,8 @@ assert.doesNotMatch(
 const layoutContentBlock = extractCssBlock(mainLayoutStyle, '.layout-content')
 assert.match(layoutContentBlock, /background-color:\s*var\(--app-shell-bg\);/, '主内容区未使用灰色外层背景')
 
-const pageCanvasBlock = extractCssBlock(mainLayoutStyle, '.page-canvas')
+const pageCanvasBlock = extractCssBlock(mainLayoutStyle, '\n.page-canvas {')
-assert.match(pageCanvasBlock, /min-height:\s*100%;/, '白色页面画布没有铺满可用高度')
+assert.match(pageCanvasBlock, /flex:\s*1 0 auto;/, '白色页面画布没有铺满可用高度')
 assert.match(pageCanvasBlock, /padding:\s*24px;/, '白色页面画布缺少统一内容内边距')
 assert.match(pageCanvasBlock, /border-radius:\s*16px;/, '白色页面画布圆角与参考不一致')
 assert.match(pageCanvasBlock, /background-color:\s*var\(--app-page-bg\);/, '全局页面画布未使用白色背景')
@@ -174,7 +178,9 @@ assert.match(rootPageCardBlock, /background-color:\s*transparent;/, '页面根
 assert.match(rootPageCardBlock, /border-radius:\s*0\s*!important;/, '页面根卡片仍形成第二层圆角边界')
 assert.match(rootPageCardBlock, /box-shadow:\s*none\s*!important;/, '页面根卡片仍形成重复卡片层级')
 
-const trainingLogStyle = parseSfc(trainingLogSource).descriptor.styles.map((item) => item.content).join('\n')
+const trainingLogStyle = [trainingLogSource, trainingOverviewSource]
+  .flatMap((source) => parseSfc(source).descriptor.styles.map((item) => item.content))
+  .join('\n')
 const businessSurfaceBlock = extractCssBlock(trainingLogStyle, '.profile-section,\n.runtime-panel')
 assert.match(
   businessSurfaceBlock,

frontend/scripts/regression-training-log-layout.mjs

@@ -2,17 +2,35 @@ import assert from 'node:assert/strict'
 import { readFile } from 'node:fs/promises'
 import { fileURLToPath } from 'node:url'
 import path from 'node:path'
+import ts from 'typescript'
 import { parse as parseTemplate } from '@vue/compiler-dom'
 import { parse as parseSfc } from '@vue/compiler-sfc'
 
 const scriptDir = path.dirname(fileURLToPath(import.meta.url))
 const viewPath = path.resolve(scriptDir, '../src/views/system/TrainingLogView.vue')
-const source = await readFile(viewPath, 'utf8')
+const overviewPath = path.resolve(scriptDir, '../src/views/system/training-log/TrainingTaskOverview.vue')
+const modelPath = path.resolve(scriptDir, '../src/views/system/training-log/trainingLogModel.ts')
+const [source, overviewSource, modelSource] = await Promise.all([
+  readFile(viewPath, 'utf8'),
+  readFile(overviewPath, 'utf8'),
+  readFile(modelPath, 'utf8'),
+])
 const { descriptor } = parseSfc(source, { filename: viewPath })
-const template = descriptor.template?.content || ''
+const { descriptor: overviewDescriptor } = parseSfc(overviewSource, { filename: overviewPath })
-const style = descriptor.styles.map((item) => item.content).join('\n')
+const template = [descriptor.template?.content, overviewDescriptor.template?.content].filter(Boolean).join('\n')
+const viewStyle = descriptor.styles.map((item) => item.content).join('\n')
+const overviewStyle = overviewDescriptor.styles.map((item) => item.content).join('\n')
+const style = `${viewStyle}\n${overviewStyle}`
 const templateAst = parseTemplate(template)
 
+const modelModuleCode = ts.transpileModule(modelSource, {
+  compilerOptions: { module: ts.ModuleKind.ESNext, target: ts.ScriptTarget.ES2022 },
+}).outputText
+const {
+  parseTrainingLog,
+  resolveTrainingLogFile,
+} = await import(`data:text/javascript;base64,${Buffer.from(modelModuleCode).toString('base64')}`)
+
 function findElements(node, predicate, result = []) {
   if (node?.type === 1 && predicate(node)) result.push(node)
   for (const child of node?.children || []) findElements(child, predicate, result)
@@ -50,41 +68,71 @@ function extractCssBlock(css, marker) {
   assert.fail(`样式规则缺少右花括号：${marker}`)
 }
 
-function relativeLuminance(hex) {
+const logFiles = [
-  const channels = hex
+  { file: 'first_pid111.log', name: 'first-task', size: '1 KB', pid: 111 },
-    .replace('#', '')
+  { file: 'target_pid222.log', name: 'target-task', size: '1 KB', pid: 222 },
-    .match(/.{2}/g)
+]
-    .map((channel) => Number.parseInt(channel, 16) / 255)
+assert.equal(
-    .map((value) => (value <= 0.03928 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4))
+  resolveTrainingLogFile(logFiles, { process_id: 222, name: 'target-task' })?.file,
-  return 0.2126 * channels[0] + 0.7152 * channels[1] + 0.0722 * channels[2]
+  'target_pid222.log',
-}
+  '训练日志必须按 task.process_id 精确匹配文件 pid，不能只判断两者是否存在',
+)
+assert.equal(
+  resolveTrainingLogFile(logFiles, { process_id: 999, name: 'target-task' })?.file,
+  'target_pid222.log',
+  'PID 无匹配时应按任务名回退选择日志',
+)
+assert.equal(
+  resolveTrainingLogFile(logFiles, { process_id: 999, name: 'missing-task' }),
+  undefined,
+  '任务无匹配日志时不得静默退回第一份日志',
+)
 
-function contrastRatio(foreground, background) {
+const parsed = parseTrainingLog([
-  const lighter = Math.max(relativeLuminance(foreground), relativeLuminance(background))
+  "INFO {'epoch': .5, 'learning_rate': 1.2E-5, 'grad_norm': -2.5e+0, 'loss': +3.25}",
-  const darker = Math.min(relativeLuminance(foreground), relativeLuminance(background))
+  '***** train metrics *****',
-  return (lighter + 0.05) / (darker + 0.05)
+  'train_runtime = 1.7852e3',
-}
+  "'train_loss': -3.42e-1",
+  'epoch: 1.0',
+  '***** train metrics end *****',
+].join('\n'))
+assert.deepEqual(parsed.metrics.loss, [3.25], '指标解析应允许字段乱序和带符号数值')
+assert.deepEqual(parsed.metrics.gradNorm, [-2.5], '梯度范数应支持科学计数法')
+assert.deepEqual(parsed.metrics.lr, [1.2e-5], '学习率应支持大小写科学计数法')
+assert.deepEqual(
+  parsed.summary,
+  { epoch: '1.0', trainLoss: '-3.42e-1', runtime: '1.7852e3' },
+  '训练汇总应同时支持等号、冒号、可选引号和科学计数法',
+)
+assert.deepEqual(
+  parseTrainingLog('普通日志，无训练指标').summary,
+  { epoch: '', trainLoss: '', runtime: '' },
+  '每次解析必须返回全新的空汇总，避免保留上一份日志的旧值',
+)
+assert.match(
+  source,
+  /const currentTask = await loadTask\(\)[\s\S]*?loadLog\(currentTask\)/,
+  '刷新流程必须先加载 task，再使用该 task 选择日志',
+)
+assert.match(source, /import \{ getSystemInfo \} from '@\/api\/modules\/system'/, '训练概览必须复用系统 GPU 监控数据源')
+assert.match(source, /Promise\.all\(\[datasetPromise, loadLog\(currentTask\), loadGpuStatus\(\)\]\)/, 'GPU 状态必须和训练日志一起刷新')
+assert.match(source, /if \(refreshInFlight\) return/, '轮询刷新必须阻止并发重叠')
+assert.match(source, /onUnmounted\([\s\S]*?clearInterval\(timer\)/, '组件卸载时必须清理轮询定时器')
 
 const overview = findElements(
   templateAst,
   (node) => staticAttribute(node, 'class')?.split(/\s+/).includes('overview-layout'),
 )
-assert.equal(overview.length, 1, '双栏任务档案容器必须且只能存在一个')
+assert.equal(overview.length, 1, '标准任务概况容器必须且只能存在一个')
-
+assert.doesNotMatch(overviewSource, /<aside\b/, '任务概况仍保留左右侧栏结构')
-for (const expectedClass of ['task-profile', 'dataset-profile', 'runtime-panel', 'parameter-groups']) {
+assert.doesNotMatch(overviewSource, /<i class="fa\b/, '任务概况仍包含过多装饰性图标')
-  const matched = findElements(
-    templateAst,
-    (node) => staticAttribute(node, 'class')?.split(/\s+/).includes(expectedClass),
-  )
-  assert.equal(matched.length, 1, `缺少或重复布局结构：${expectedClass}`)
-}
 
 const toggleButtons = findElements(
   templateAst,
-  (node) => node.tag === 'button'
+  (node) => node.tag === 'el-button'
     && staticAttribute(node, 'class')?.split(/\s+/).includes('params-toggle-button'),
 )
-assert.equal(toggleButtons.length, 1, '参数折叠必须使用唯一的原生 button')
+assert.equal(toggleButtons.length, 1, '参数折叠必须使用唯一的标准按钮')
 
 const toggleButton = toggleButtons[0]
 assert.equal(boundExpression(toggleButton, 'aria-expanded'), 'paramsExpanded', '折叠按钮未绑定 aria-expanded')
@@ -96,33 +144,80 @@ const controlledRegions = findElements(
 )
 assert.equal(controlledRegions.length, 1, 'aria-controls 指向的参数内容区域不存在或重复')
 
+const pageTitleIndex = source.indexOf('id="task-page-title"')
+const summaryCardIndex = source.indexOf('id="training-overview-title"')
+const taskOverviewIndex = source.indexOf('<TrainingTaskOverview')
+assert.notEqual(pageTitleIndex, -1, '页面缺少独立的训练任务标题')
+assert.ok(pageTitleIndex < summaryCardIndex, '训练任务标题必须出现在训练概览之前')
+assert.ok(summaryCardIndex < taskOverviewIndex, '训练概览必须出现在任务信息之前')
+assert.equal((source.match(/<h1\b/g) || []).length, 1, '训练详情页必须且只能有一个一级标题')
+assert.doesNotMatch(overviewSource, /<h1\b/, '任务信息卡片不得重复渲染页面一级标题')
+assert.ok(overviewSource.includes('title="任务信息"'), '任务详情卡片缺少明确的“任务信息”标题')
+
 const firstChartIndex = template.indexOf('<!-- 训练曲线 -->')
 assert.notEqual(firstChartIndex, -1, '未找到训练曲线边界，无法限定首屏检查范围')
-assert.equal(
+assert.ok(template.includes('training-progress-panel'), '训练概览缺少独立的主进度区域')
-  template.slice(0, firstChartIndex).includes('<el-descriptions'),
+assert.ok(template.includes('training-metric-grid'), '训练概览缺少次级训练指标摘要')
-  false,
+assert.ok(template.includes('gpu-device-list'), '训练概览缺少紧凑的 GPU 设备列表')
-  '任务概览、数据集和训练参数仍使用带表格感的 el-descriptions',
+assert.ok(template.includes('gpu-list-header'), 'GPU 设备列表缺少企业表格式列标题')
+assert.ok(template.includes('gpu-device-row'), 'GPU 设备列表缺少统一行结构')
+assert.doesNotMatch(template, /training-summary-strip|gpu-device-card/, '训练概览仍保留同级宫格或 GPU 嵌套卡片结构')
+assert.ok(template.includes('id="training-overview-title"'), '训练概览缺少可访问的卡片标题')
+assert.ok(
+  template.indexOf('id="training-overview-title"') < template.indexOf('<TrainingTaskOverview'),
+  '训练概览必须位于任务档案之前，成为页面第一块内容',
 )
+assert.ok(
+  template.indexOf('training-progress-panel') < template.indexOf('training-metric-grid')
+    && template.indexOf('training-metric-grid') < template.indexOf('gpu-device-list'),
+  '训练概览必须按主进度、次级指标、GPU 设备列表的顺序展示',
+)
+assert.ok(template.includes('id="gpu-monitor-title"'), '训练概览缺少 GPU 运行状态区域')
+assert.ok(template.includes('计算利用率'), 'GPU 运行状态缺少计算利用率')
+assert.ok(template.includes('显存占用'), 'GPU 运行状态缺少显存占用')
+assert.ok(template.includes('每 5 秒刷新'), 'GPU 运行状态缺少刷新频率说明')
+assert.ok(template.includes(':aria-label="`GPU ${item.index} 计算利用率'), 'GPU 强度条缺少可访问说明')
+assert.match(source, /const GPU_PREVIEW_LIMIT = 4/, '多 GPU 默认预览数量必须限制为 4 张')
+assert.match(source, /const visibleGpuItems = computed/, '多 GPU 缺少渐进披露列表计算')
+assert.match(source, /gpuRuntimePriority/, '折叠状态必须优先展示异常和运行中的 GPU')
+assert.ok(template.includes('v-for="item in visibleGpuItems"'), 'GPU 列表没有使用受控预览数据')
+assert.ok(template.includes('taskGpuItems.length > GPU_PREVIEW_LIMIT'), 'GPU 数量超过预览上限时没有展开入口')
+
+const gpuToggleButtons = findElements(
+  templateAst,
+  (node) => node.tag === 'el-button'
+    && staticAttribute(node, 'class')?.split(/\s+/).includes('gpu-toggle-button'),
+)
+assert.equal(gpuToggleButtons.length, 1, '多 GPU 展开控制必须且只能存在一个')
+assert.equal(boundExpression(gpuToggleButtons[0], 'aria-expanded'), 'gpuExpanded', 'GPU 展开按钮未绑定 aria-expanded')
+assert.equal(staticAttribute(gpuToggleButtons[0], 'aria-controls'), 'gpu-device-list', 'GPU 展开按钮缺少正确的 aria-controls')
+assert.ok(template.includes('title="训练曲线"'), '训练曲线没有使用标准 PageCard 标题')
+assert.ok(template.includes('title="训练日志"'), '训练日志没有使用标准 PageCard 标题')
+assert.ok(template.includes('每 5 秒刷新'), '训练监控区缺少自动刷新状态说明')
+assert.ok((template.match(/<el-descriptions\b/g) || []).length >= 3, '任务概况和训练参数没有使用标准详情表格')
+assert.equal((template.match(/class="chart-section"/g) || []).length, 3, '三组训练曲线没有按上下结构完整展示')
+assert.doesNotMatch(template, /<el-row\b|<el-col\b/, '训练曲线仍保留左右分栏布局')
+assert.doesNotMatch(template, /class="chart-card"/, '训练曲线仍存在卡片嵌套')
+assert.doesNotMatch(template, /summary-metric is-primary/, '训练概览仍保留大块装饰性主色背景')
+
+for (const selector of ['.summary-card', '.parameters-card', '.metrics-panel', '.log-card']) {
+  const cardBlock = extractCssBlock(style, selector)
+  assert.match(cardBlock, /border-radius:\s*8px/, `${selector} 未统一为 8px 企业卡片圆角`)
+  assert.match(cardBlock, /box-shadow:\s*none/, `${selector} 仍保留不统一的浮层阴影`)
+}
 
 assert.ok(template.includes("task?.output_model_name || '暂未生成'"), '输出模型缺失值文案不正确')
 assert.ok(template.includes("task?.batch_size ?? '未配置'"), '训练参数缺失值文案不正确')
 
-const media1100 = extractCssBlock(style, '@media (max-width: 1100px)')
+const overviewLayoutBlock = extractCssBlock(overviewStyle, '.overview-layout')
-const overviewAt1100 = extractCssBlock(media1100, '.overview-layout')
+assert.match(overviewLayoutBlock, /width:\s*100%/, '任务概况没有使用全宽单列布局')
-assert.match(overviewAt1100, /grid-template-columns:\s*minmax\(0,\s*1fr\)/, '1100px 断点未将双栏改为单栏')
+assert.doesNotMatch(overviewLayoutBlock, /grid-template-columns/, '任务档案仍保留左右分栏规则')
 
-const media700 = extractCssBlock(style, '@media (max-width: 700px)')
+const overviewMedia700 = extractCssBlock(overviewStyle, '@media (max-width: 700px)')
-for (const selector of ['.dataset-metrics', '.runtime-list', '.parameter-grid']) {
+assert.ok(overviewMedia700.includes('.task-descriptions'), '700px 断点缺少任务详情表单列规则')
-  assert.ok(media700.includes(selector), `700px 断点缺少单列规则：${selector}`)
+assert.match(overviewMedia700, /display:\s*block/, '移动端任务详情表没有转换为单列')
-}
+const viewMedia600 = extractCssBlock(viewStyle, '@media (max-width: 600px)')
-assert.match(media700, /grid-template-columns:\s*minmax\(0,\s*1fr\)/, '700px 断点未设置单列网格')
+assert.ok(viewMedia600.includes('.parameter-descriptions'), '600px 断点缺少训练参数表单列规则')
-
+assert.match(viewMedia600, /display:\s*block/, '移动端训练参数表没有转换为单列')
-const mutedBlock = extractCssBlock(style, '.is-muted')
-const mutedColor = mutedBlock.match(/color:\s*(#[0-9a-f]{6})/i)?.[1]
-assert.ok(mutedColor, '未配置文本缺少明确颜色')
-assert.ok(
-  contrastRatio(mutedColor, '#ffffff') >= 4.5,
-  `未配置文本颜色 ${mutedColor} 与白色背景对比度不足 4.5:1`,
-)
 
 console.log('训练日志详情布局回归检查通过')

frontend/scripts/regression-training-log-mock.mjs

@@ -0,0 +1,77 @@
+import assert from 'node:assert/strict'
+import { readFile } from 'node:fs/promises'
+import { fileURLToPath } from 'node:url'
+import path from 'node:path'
+
+const scriptDir = path.dirname(fileURLToPath(import.meta.url))
+const mockDataPath = path.resolve(scriptDir, '../src/mock/data.ts')
+const mockAdapterPath = path.resolve(scriptDir, '../src/mock/adapter.ts')
+const modelPath = path.resolve(scriptDir, '../src/views/system/training-log/trainingLogModel.ts')
+const [mockData, mockAdapter, modelSource] = await Promise.all([
+  readFile(mockDataPath, 'utf8'),
+  readFile(mockAdapterPath, 'utf8'),
+  readFile(modelPath, 'utf8'),
+])
+
+function objectFromMarker(source, marker) {
+  const markerIndex = source.indexOf(marker)
+  assert.notEqual(markerIndex, -1, `未找到 Mock 数据标记：${marker}`)
+  const openBrace = source.lastIndexOf('{', markerIndex)
+  assert.notEqual(openBrace, -1, `Mock 数据缺少对象起点：${marker}`)
+
+  let depth = 0
+  for (let index = openBrace; index < source.length; index += 1) {
+    if (source[index] === '{') depth += 1
+    if (source[index] === '}') depth -= 1
+    if (depth === 0) return source.slice(openBrace, index + 1)
+  }
+
+  assert.fail(`Mock 数据缺少对象终点：${marker}`)
+}
+
+const taskNames = [
+  'finance-sft-001',
+  'legal-sft-002',
+  'medical-cpt-001',
+  'service-dpo-001',
+  'finance-sft-002',
+  'general-sft-001',
+]
+const commonTrainingFields = [
+  'output_model_name',
+  'batch_size',
+  'learning_rate',
+  'n_epochs',
+  'save_steps',
+  'lr_scheduler_type',
+  'max_length',
+  'warmup_ratio',
+  'weight_decay',
+]
+
+for (const taskName of taskNames) {
+  const task = objectFromMarker(mockData, `name: '${taskName}'`)
+  for (const field of commonTrainingFields) {
+    assert.match(task, new RegExp(`\\b${field}\\s*:`), `${taskName} 缺少训练参数：${field}`)
+  }
+
+  if (/train_method:\s*'lora'/.test(task)) {
+    for (const field of ['lora_rank', 'lora_alpha', 'lora_dropout']) {
+      assert.match(task, new RegExp(`\\b${field}\\s*:`), `${taskName} 缺少 LoRA 参数：${field}`)
+    }
+  }
+}
+
+const medicalTask = objectFromMarker(mockData, "name: 'medical-cpt-001'")
+assert.match(medicalTask, /\bprocess_id\s*:/, '运行中的医疗训练任务缺少进程 ID')
+assert.match(mockData, /medical-cpt-001_pid28741\.log/, '医疗训练任务缺少 PID 对应的日志文件')
+assert.match(mockData, /export const mockTrainingLogContents/, '训练日志没有按文件提供独立 Mock 内容')
+assert.match(mockData, /Num examples\s*=\s*9,800/, '医疗训练日志缺少样本规模信息')
+assert.match(mockData, /Total optimization steps\s*=\s*921/, '医疗训练日志缺少真实训练步数信息')
+assert.match(mockData, /\\'epoch\\':\s*1\.92/, '医疗训练日志的 Epoch 未与 64% 进度对齐')
+assert.match(mockData, /\\'loss\\':\s*1\.146/, '医疗训练日志缺少当前 Loss 指标')
+assert.match(mockAdapter, /const file = String\(params\.file/, '训练日志接口没有读取请求中的日志文件名')
+assert.match(mockAdapter, /mockTrainingLogContents\[file\]/, '训练日志接口没有按请求文件返回对应内容')
+assert.match(modelSource, /epoch:\s*number\[\]/, '训练指标模型没有保留逐步 Epoch')
+
+console.log('训练日志 Mock 数据回归检查通过')

frontend/scripts/run-regressions.mjs

@@ -0,0 +1,15 @@
+import { readdir } from 'node:fs/promises'
+import { pathToFileURL } from 'node:url'
+import path from 'node:path'
+
+const scriptsDir = path.resolve(process.cwd(), 'scripts')
+const regressionScripts = (await readdir(scriptsDir))
+  .filter((file) => file.startsWith('regression-') && file.endsWith('.mjs'))
+  .sort()
+
+for (const script of regressionScripts) {
+  console.log(`\n▶ ${script}`)
+  await import(pathToFileURL(path.join(scriptsDir, script)).href)
+}
+
+console.log(`\n✅ ${regressionScripts.length} 个前端回归脚本全部通过`)

frontend/src/api/modules/dataset.ts

@@ -72,6 +72,17 @@ export const activateDatasetFileVersion = (
     { version_id: versionId, expected_current_version_id: expectedCurrentVersionId },
   )
 
+/** 删除非当前、非初始的历史版本 */
+export const deleteDatasetFileVersion = (
+  fileId: string | number,
+  versionId: string,
+  expectedCurrentVersionId: string,
+) =>
+  del<DatasetVersionList>(
+    `/dataset-manage/versions/${encodeURIComponent(fileId)}/${encodeURIComponent(versionId)}`,
+    { expected_current_version_id: expectedCurrentVersionId },
+  )
+
 /** 下载文件 URL */
 export const downloadFileUrl = (
   datasetId: string | number,

frontend/src/api/modules/eval.ts

@@ -1,5 +1,5 @@
 import { get, post, put, del } from '../request'
-import type { EvalTask, EvalTaskDetail, Dimension } from '@/types'
+import type { EvalTask, EvalTaskDetail, Dimension, StartEvalPayload } from '@/types'
 
 /** 评测任务列表 */
 export const getEvalList = () => get<EvalTask[]>('/model-eval')
@@ -11,7 +11,7 @@ export const getEvalDetail = (id: string | number) => get<EvalTaskDetail>(`/mode
 export const deleteEval = (id: string | number) => del(`/model-eval/${id}`)
 
 /** 启动评测 */
-export const startEval = (data: any) => post('/model-eval/start', data)
+export const startEval = (data: StartEvalPayload) => post('/model-eval/start', data)
 
 /** 评测维度列表 */
 export const getDimensionList = () => get<Dimension[]>('/dimension')

frontend/src/api/modules/fineTune.ts

@@ -1,5 +1,5 @@
 import { get, post, put, del } from '../request'
-import type { FineTuneTask, TrainingProgress } from '@/types'
+import type { FineTuneStartPayload, FineTuneTask, TrainingProgress } from '@/types'
 
 /** 训练任务列表 */
 export const getFineTuneList = () => get<FineTuneTask[]>('/fine-tune')
@@ -16,7 +16,7 @@ export const createFineTune = (data: Partial<FineTuneTask>) =>
   post<{ id: string | number }>('/fine-tune', data)
 
 /** 启动训练（第二步） */
-export const startFineTune = (data: any) => post('/fine-tune/start', data)
+export const startFineTune = (data: FineTuneStartPayload) => post('/fine-tune/start', data)
 
 /** 更新训练任务 */
 export const updateFineTune = (id: string | number, data: Partial<FineTuneTask>) =>

frontend/src/api/modules/system.ts

@@ -1,5 +1,12 @@
-import { get, post } from '../request'
+import { del, get, post, put } from '../request'
-import type { SystemInfo, HealthMetrics } from '@/types'
+import type {
+  CreateUserPayload,
+  HealthMetrics,
+  LoginResponse,
+  SystemInfo,
+  SystemUser,
+  UpdateUserAccessPayload,
+} from '@/types'
 
 /** 系统信息（CPU/内存/磁盘/GPU/网络/系统） */
 export const getSystemInfo = () => get<SystemInfo>('/system-info')
@@ -9,4 +16,21 @@ export const getHealth = () => get<HealthMetrics>('/health')
 
 /** 登录 */
 export const login = (username: string, password: string) =>
-  post('/login', { username, password })
+  post<LoginResponse>('/login', { username, password })
+
+/** 用户列表 */
+export const getUsers = () => get<SystemUser[]>('/users')
+
+/** 创建用户 */
+export const createUser = (payload: CreateUserPayload) =>
+  post<SystemUser>('/users', payload)
+
+/** 删除用户，currentUsername 用于防止删除当前登录账号 */
+export const deleteUser = (id: string, currentUsername: string) =>
+  del<{ deleted: string }>(`/users/${encodeURIComponent(id)}`, {
+    current_username: currentUsername,
+  })
+
+/** 更新用户角色、状态及页面权限 */
+export const updateUserAccess = (id: string, payload: UpdateUserAccessPayload) =>
+  put<SystemUser>(`/users/${encodeURIComponent(id)}`, payload)

frontend/src/components/AppSidebar.vue

@@ -2,6 +2,7 @@
 import { computed, nextTick, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
+import type { PermissionCode } from '@/types'
 
 const route = useRoute()
 const router = useRouter()
@@ -27,41 +28,65 @@ const activeMenu = computed(() => {
   return seg
 })
 
-const menuGroups = [
+interface MenuItem {
+  key: string
+  label: string
+  icon: string
+  to: string
+  permission: PermissionCode
+}
+
+interface MenuGroup {
+  title?: string
+  showTitle?: boolean
+  items: MenuItem[]
+}
+
+const menuGroups: MenuGroup[] = [
   {
     // 服务看板：独立入口，不显示分类小标题
     showTitle: false,
-    items: [{ key: 'dashboard', label: '服务看板', icon: 'fa-tachometer', to: '/dashboard' }],
+    items: [{ key: 'dashboard', label: '服务看板', icon: 'fa-tachometer', to: '/dashboard', permission: 'dashboard' }],
   },
   {
     title: '模型服务',
     items: [
-      { key: 'fine-tune', label: '模型微调', icon: 'fa-cogs', to: '/fine-tune' },
+      { key: 'fine-tune', label: '模型训练', icon: 'fa-cogs', to: '/fine-tune', permission: 'fine-tune' },
-      { key: 'model-eval', label: '模型评测', icon: 'fa-line-chart', to: '/model-eval' },
+      { key: 'model-eval', label: '模型评测', icon: 'fa-line-chart', to: '/model-eval', permission: 'model-eval' },
-      { key: 'model-inference', label: '模型推理', icon: 'fa-server', to: '/model-inference' },
+      { key: 'model-inference', label: '模型推理', icon: 'fa-server', to: '/model-inference', permission: 'model-inference' },
-      { key: 'model-manage', label: '模型管理', icon: 'fa-cube', to: '/model-manage' },
+      { key: 'model-manage', label: '模型管理', icon: 'fa-cube', to: '/model-manage', permission: 'model-manage' },
     ],
   },
   {
     title: '数据治理',
     items: [
-      { key: 'data-process', label: '数据处理', icon: 'fa-filter', to: '/data-process' },
+      { key: 'dataset', label: '数据集管理', icon: 'fa-file-text', to: '/dataset', permission: 'dataset' },
-      { key: 'dataset', label: '数据集管理', icon: 'fa-file-text', to: '/dataset' },
+      { key: 'data-process', label: '数据处理', icon: 'fa-filter', to: '/data-process', permission: 'data-process' },
     ],
   },
   {
     title: '其他工具',
-    items: [{ key: 'data-convert', label: '数据类型转换', icon: 'fa-exchange', to: '/data-convert' }],
+    items: [{ key: 'data-convert', label: '数据类型转换', icon: 'fa-exchange', to: '/data-convert', permission: 'data-convert' }],
   },
   {
     title: '系统设置',
     items: [
-      { key: 'hardware', label: '平台性能', icon: 'fa-bar-chart', to: '/hardware' },
+      { key: 'user-settings', label: '用户设置', icon: 'fa-users', to: '/user-settings', permission: 'user-settings' },
-      { key: 'logs', label: '查看日志', icon: 'fa-file-text', to: '/logs' },
+      { key: 'hardware', label: '平台性能', icon: 'fa-bar-chart', to: '/hardware', permission: 'hardware' },
+      { key: 'logs', label: '查看日志', icon: 'fa-file-text', to: '/logs', permission: 'logs' },
     ],
   },
 ]
 
+const visibleMenuGroups = computed(() =>
+  menuGroups
+    .map((group) => ({
+      ...group,
+      items: group.items.filter((item) => auth.hasPermission(item.permission)),
+    }))
+    .filter((group) => group.items.length > 0),
+)
+
 /**
  * 传给 el-menu 的激活值。
  *
@@ -78,7 +103,7 @@ watch(activeMenu, (value) => {
 })
 
 async function handleSelect(key: string) {
-  const all = menuGroups.flatMap((g) => g.items)
+  const all = visibleMenuGroups.value.flatMap((g) => g.items)
   const target = all.find((i) => i.key === key)
   if (!target) return
 
@@ -115,7 +140,7 @@ function handleLogout() {
         active-text-color="var(--sidebar-active-text)"
         @select="handleSelect"
       >
-        <template v-for="group in menuGroups" :key="group.title || group.items[0].key">
+        <template v-for="group in visibleMenuGroups" :key="group.title || group.items[0].key">
           <div v-if="group.title" class="sidebar-section-title">{{ group.title }}</div>
           <el-menu-item
             v-for="item in group.items"
@@ -134,8 +159,8 @@ function handleLogout() {
       <div class="footer-user" v-if="auth.username">
         <el-avatar :size="36" src="https://picsum.photos/id/1005/36/36" class="user-avatar" />
         <div class="user-info">
-          <span class="user-name">{{ auth.username }}</span>
+          <span class="user-name">{{ auth.displayName }}</span>
-          <span class="user-role">Administrator</span>
+          <span class="user-role">{{ auth.roleLabel }}</span>
         </div>
         <el-tooltip content="退出登录" placement="top">
           <div class="logout-btn" @click="handleLogout">

frontend/src/layouts/MainLayout.vue

@@ -84,13 +84,13 @@ onUnmounted(() => {
 
 @media (min-width: 1181px) {
   .layout-content:has(.dashboard-view) {
-    overflow-y: hidden;
+    overflow-y: auto;
 
     .page-canvas {
-      flex: 1 1 auto;
+      flex: 1 0 auto;
       min-height: 0;
       padding: 16px;
-      overflow: hidden;
+      overflow: visible;
     }
   }
 }

frontend/src/mock/adapter.ts

@@ -3,9 +3,8 @@
  * 拦截所有 API 请求并返回 mock 数据
  * 通过 URL + method 路由到对应的 mock 响应
  */
-import type { AxiosInstance, AxiosRequestConfig } from 'axios'
+import type { AxiosAdapter, AxiosInstance, AxiosRequestConfig } from 'axios'
 import {
-  mockLoginOk,
   mockHealth,
   mockSystemInfo,
   mockModels,
@@ -21,14 +20,26 @@ import {
   mockLogFiles,
   mockTrainingLogFiles,
   mockLogContent,
+  mockTrainingLogContents,
 } from './data'
 import {
   activateDatasetVersion,
   appendDatasetVersion,
   createInitialVersionState,
+  deleteDatasetVersion,
+  DatasetVersionMutationError,
   getActiveDatasetVersion,
+  normalizeDatasetVersionState,
 } from './datasetVersions'
 import type { StoredDatasetVersion, StoredDatasetVersionState } from './datasetVersions'
+import {
+  authenticateMockUser,
+  createMockUser,
+  deleteMockUser,
+  listMockUsers,
+  updateMockUserAccess,
+  UserMutationError,
+} from './users'
 
 /** 模拟网络延迟 */
 function delay(ms = 200): Promise<void> {
@@ -82,7 +93,13 @@ function getVersionState(fileId: string): StoredDatasetVersionState {
   if (persisted) {
     try {
       const state = JSON.parse(persisted) as StoredDatasetVersionState
-      if (state.versions?.length && state.active_version_id) return state
+      if (state.versions?.length && state.active_version_id) {
+        const normalizedState = normalizeDatasetVersionState(state)
+        if (state.next_version_number !== normalizedState.next_version_number) {
+          persistVersionState(fileId, normalizedState)
+        }
+        return normalizedState
+      }
     } catch {
       // 版本数据损坏时回退到初始版本
     }
@@ -99,6 +116,14 @@ function versionMetadata(version: StoredDatasetVersion) {
   return metadata
 }
 
+function versionListResponse(state: StoredDatasetVersionState) {
+  return {
+    versions: state.versions.map(versionMetadata).sort((a, b) => b.version - a.version),
+    active_version_id: state.active_version_id,
+    next_version_number: state.next_version_number,
+  }
+}
+
 /** 通过路径 + method 匹配 mock 响应 */
 async function handleMock(config: AxiosRequestConfig) {
   await delay(150) // 模拟网络延迟
@@ -110,10 +135,12 @@ async function handleMock(config: AxiosRequestConfig) {
 
   // ==================== 认证 ====================
   if (url === '/login' && method === 'post') {
-    if (body.username === 'admin' && body.password === 'admin') {
+    try {
-      return ok(mockLoginOk.data)
+      return ok(authenticateMockUser(String(body.username || ''), String(body.password || '')))
+    } catch (error) {
+      if (error instanceof UserMutationError) return fail(error.message, error.status)
+      return fail('登录失败', 500)
     }
-    return fail('账号或密码错误', 401)
   }
   if (url === '/web-log' && method === 'post') {
     return ok({ received: true })
@@ -123,6 +150,37 @@ async function handleMock(config: AxiosRequestConfig) {
   if (url === '/health' && method === 'get') return ok(mockHealth)
   if (url === '/system-info' && method === 'get') return ok(mockSystemInfo)
 
+  // ==================== 用户设置 ====================
+  if (url === '/users' && method === 'get') return ok(listMockUsers())
+  if (url === '/users' && method === 'post') {
+    try {
+      return ok(createMockUser(body))
+    } catch (error) {
+      if (error instanceof UserMutationError) return fail(error.message, error.status)
+      return fail('创建用户失败', 500)
+    }
+  }
+  let userMatch = url.match(/^\/users\/([^/]+)$/)
+  if (userMatch && method === 'put') {
+    try {
+      return ok(updateMockUserAccess(decodeURIComponent(userMatch[1]), body))
+    } catch (error) {
+      if (error instanceof UserMutationError) return fail(error.message, error.status)
+      return fail('更新用户失败', 500)
+    }
+  }
+  if (userMatch && method === 'delete') {
+    try {
+      return ok(deleteMockUser(
+        decodeURIComponent(userMatch[1]),
+        String(params.current_username || ''),
+      ))
+    } catch (error) {
+      if (error instanceof UserMutationError) return fail(error.message, error.status)
+      return fail('删除用户失败', 500)
+    }
+  }
+
   // ==================== 模型管理 ====================
   if (url === '/model-manage' && method === 'get') return ok(mockModels)
   if (url === '/model-manage/local-models' && method === 'get') return ok(mockLocalModels)
@@ -164,7 +222,8 @@ async function handleMock(config: AxiosRequestConfig) {
   }
   m = url.match(/^\/dataset-manage\/([^/]+)$/)
   if (m && method === 'get') {
-    const found = mockDatasets.find((x) => String(x.id) === m[1])
+    const datasetId = m[1]
+    const found = mockDatasets.find((x) => String(x.id) === datasetId)
     return found ? ok(found) : fail('数据集不存在', 404)
   }
   if (m && (method === 'put' || method === 'delete')) {
@@ -183,10 +242,7 @@ async function handleMock(config: AxiosRequestConfig) {
   if (m && method === 'get') {
     const fileId = decodeURIComponent(m[1])
     const state = getVersionState(fileId)
-    return ok({
+    return ok(versionListResponse(state))
-      versions: state.versions.map(versionMetadata).sort((a, b) => b.version - a.version),
-      active_version_id: state.active_version_id,
-    })
   }
   if (m && method === 'post') {
     const fileId = decodeURIComponent(m[1])
@@ -247,6 +303,30 @@ async function handleMock(config: AxiosRequestConfig) {
       ? ok({ version: versionMetadata(version), content: version.content })
       : fail('数据集版本不存在', 404)
   }
+  if (m && method === 'delete') {
+    const fileId = decodeURIComponent(m[1])
+    const versionId = decodeURIComponent(m[2])
+    const currentState = getVersionState(fileId)
+    if (params.expected_current_version_id !== currentState.active_version_id) {
+      return fail('当前版本已被其他用户更新，请刷新后重试', 409)
+    }
+
+    let nextState: StoredDatasetVersionState
+    try {
+      nextState = deleteDatasetVersion(currentState, versionId)
+    } catch (error) {
+      if (error instanceof DatasetVersionMutationError) {
+        return fail(error.message, error.status)
+      }
+      return fail('删除版本失败', 500)
+    }
+    try {
+      persistVersionState(fileId, nextState)
+    } catch {
+      return fail('浏览器 Mock 存储空间不足', 413)
+    }
+    return ok(versionListResponse(nextState))
+  }
 
   // ==================== 训练任务 ====================
   if (url === '/fine-tune' && method === 'get') return ok(mockFineTuneList)
@@ -261,7 +341,8 @@ async function handleMock(config: AxiosRequestConfig) {
   }
   m = url.match(/^\/fine-tune\/progress\/([^/]+)$/)
   if (m && method === 'get') {
-    const task = mockFineTuneList.find((t) => String(t.id) === m[1])
+    const taskId = m[1]
+    const task = mockFineTuneList.find((t) => String(t.id) === taskId)
     if (!task) return fail('任务不存在', 404)
     if (task.status === 'running') {
       return ok({
@@ -276,7 +357,8 @@ async function handleMock(config: AxiosRequestConfig) {
   }
   m = url.match(/^\/fine-tune\/([^/]+)$/)
   if (m && method === 'get') {
-    const found = mockFineTuneList.find((x) => String(x.id) === m[1])
+    const taskId = m[1]
+    const found = mockFineTuneList.find((x) => String(x.id) === taskId)
     return found ? ok(found) : fail('任务不存在', 404)
   }
   m = url.match(/^\/fine-tune\/stop\/([^/]+)$/)
@@ -296,7 +378,8 @@ async function handleMock(config: AxiosRequestConfig) {
   }
   m = url.match(/^\/model-compare\/([^/]+)$/)
   if (m && method === 'get') {
-    const found = mockCompareList.find((x) => String(x.id) === m[1])
+    const compareId = m[1]
+    const found = mockCompareList.find((x) => String(x.id) === compareId)
     return found ? ok(found) : fail('任务不存在', 404)
   }
   if (m && method === 'delete') return ok({ deleted: m[1] })
@@ -363,7 +446,14 @@ async function handleMock(config: AxiosRequestConfig) {
   if (url === '/log-files' && method === 'get') return ok(mockLogFiles)
   if (url === '/log-content' && method === 'get') return ok(mockLogContent)
   if (url === '/training-log-files' && method === 'get') return ok(mockTrainingLogFiles)
-  if (url === '/training-log-content' && method === 'get') return ok(mockLogContent)
+  if (url === '/training-log-content' && method === 'get') {
+    const file = String(params.file || '')
+    return ok(mockTrainingLogContents[file] || {
+      file,
+      size: '0 KB',
+      content: `[Mock] 未找到训练日志内容：${file}`,
+    })
+  }
 
   // 未匹配的请求 → 兜底返回空成功（避免阻断 UI）
   console.warn('[Mock] 未匹配路由:', method.toUpperCase(), url, params)
@@ -380,12 +470,13 @@ function safeJSON(str: string) {
 
 /** 给 axios instance 安装 mock adapter */
 export function installMockAdapter(instance: AxiosInstance) {
-  instance.defaults.adapter = async (config: AxiosRequestConfig) => {
+  const adapter = async (config: AxiosRequestConfig) => {
     try {
       const response = await handleMock(config)
       return response
-    } catch (e: any) {
+    } catch (error: unknown) {
-      return fail(e.message || 'Mock 错误', 500, config)
+      return fail(error instanceof Error ? error.message : 'Mock 错误', 500, config)
     }
   }
+  instance.defaults.adapter = adapter as AxiosAdapter
 }

frontend/src/mock/data.ts

@@ -58,37 +58,40 @@ export const mockSystemInfo: SystemInfo = {
       id: 0,
       uuid: 'GPU-MOCK-A800-00',
       name: 'NVIDIA A800',
-      status: 'idle',
+      status: 'busy',
-      gpu_percent: 0,
+      gpu_percent: 74,
-      memory_used_gb: 0,
+      memory_used_gb: 41.8,
       memory_total_gb: 80,
-      memory_percent: 0,
+      memory_percent: 52.3,
-      temperature: 32,
+      temperature: 63,
-      power_w: 38,
+      power_w: 286,
       power_limit_w: 400,
-      fan_speed: 0,
+      fan_speed: 51,
       clock_mhz: 1410,
       driver_version: '535.86.10',
-      processes: [],
+      processes: [
+        { pid: 28741, name: 'python', task_name: 'medical-cpt-001 / rank 0', user: 'trainer', memory_used_gb: 39.6 },
+        { pid: 28768, name: 'python', task_name: '训练指标采集', user: 'trainer', memory_used_gb: 2.2 },
+      ],
     },
     {
       id: 1,
       uuid: 'GPU-MOCK-A800-01',
       name: 'NVIDIA A800',
       status: 'busy',
-      gpu_percent: 28,
+      gpu_percent: 71,
-      memory_used_gb: 22.5,
+      memory_used_gb: 42.1,
       memory_total_gb: 80,
-      memory_percent: 28.1,
+      memory_percent: 52.6,
-      temperature: 52,
+      temperature: 62,
-      power_w: 165,
+      power_w: 279,
       power_limit_w: 400,
-      fan_speed: 32,
+      fan_speed: 49,
       clock_mhz: 1410,
       driver_version: '535.86.10',
       processes: [
-        { pid: 18421, name: 'python', task_name: '指令微调任务', user: 'trainer', memory_used_gb: 18.6 },
+        { pid: 28742, name: 'python', task_name: 'medical-cpt-001 / rank 1', user: 'trainer', memory_used_gb: 39.9 },
-        { pid: 18503, name: 'python', task_name: '训练指标采集', user: 'trainer', memory_used_gb: 3.9 },
+        { pid: 28769, name: 'python', task_name: '训练指标采集', user: 'trainer', memory_used_gb: 2.2 },
       ],
     },
     {
@@ -249,7 +252,7 @@ export const mockLocalModels = {
 }
 
 // ============ 数据集 ============
-export const mockDatasets: DatasetItem[] = [
+export const mockDatasets: DatasetItem[] = ([
   {
     id: 1,
     name: '金融问答-训练集',
@@ -273,7 +276,7 @@ export const mockDatasets: DatasetItem[] = [
   { id: 8, name: '通用指令构造集', type: 'train', storage_type: 'local', source: 'task', task_id: 492015, size: '148 MB', count: 12600, description: '由指令微调数据构造任务生成', create_time: '2026-07-09T01:42:00Z' },
   { id: 9, name: '用户反馈脱敏集', type: 'test', storage_type: 'minio', source: 'task', task_id: 731948, size: '72 MB', count: 9340, description: '由敏感信息脱敏任务生成', create_time: '2026-07-09T09:18:00Z' },
   { id: 10, name: '多轮对话增强集', type: 'eval', storage_type: 'local', source: 'task', task_id: 582012, size: '41 MB', count: 2780, description: '由多轮对话拼接任务生成', create_time: '2026-07-10T02:06:00Z' },
-].map((dataset) => ({
+] satisfies DatasetItem[]).map((dataset) => ({
   ...dataset,
   files: dataset.files?.length
     ? dataset.files
@@ -339,12 +342,181 @@ export const mockDatasetPreviews: Record<string, string> = {
 
 // ============ 训练任务 ============
 export const mockFineTuneList: FineTuneTask[] = [
-  { id: 103942, name: 'finance-sft-001', description: '金融领域 SFT 训练', status: 'completed', train_type: 'SFT', train_method: 'lora', template: 'qwen', base_model: 1, train_dataset_id: 1, gpus: [0], progress: 100, train_duration: '2小时18分钟', create_time: '2026-01-15T08:00:00Z' },
+  {
-  { id: 349102, name: 'legal-sft-002', description: '法律文书 SFT', status: 'completed', train_type: 'SFT', train_method: 'lora', template: 'qwen', base_model: 1, train_dataset_id: 2, gpus: [1], progress: 100, train_duration: '1小时46分钟', create_time: '2026-01-18T10:00:00Z' },
+    id: 103942,
-  { id: 849301, name: 'medical-cpt-001', description: '医疗领域继续预训练', status: 'running', train_type: 'CPT', train_method: 'lora', template: 'qwen2_5', base_model: 2, train_dataset_id: 6, gpus: [0, 1], progress: 64, train_duration: '36分钟', create_time: '2026-02-05T09:00:00Z' },
+    name: 'finance-sft-001',
-  { id: 593021, name: 'service-dpo-001', description: '客服对话偏好训练', status: 'pending', train_type: 'DPO', train_method: 'lora', template: 'qwen', base_model: 1, train_dataset_id: 3, gpus: [2], progress: 0, train_duration: '-', create_time: '2026-02-08T14:00:00Z' },
+    description: '金融领域 SFT 训练',
-  { id: 201948, name: 'finance-sft-002', description: '金融领域二轮微调', status: 'failed', train_type: 'SFT', train_method: 'lora', template: 'qwen', base_model: 1, train_dataset_id: 1, gpus: [3], progress: 32, train_duration: '18分钟', create_time: '2026-02-10T11:00:00Z' },
+    status: 'completed',
-  { id: 940212, name: 'general-sft-001', description: '通用能力微调', status: 'completed', train_type: 'SFT', train_method: 'full', template: 'llama3', base_model: 3, train_dataset_id: 3, gpus: [0, 2], progress: 100, train_duration: '3小时05分钟', create_time: '2026-02-12T13:00:00Z' },
+    train_type: 'SFT',
+    train_method: 'lora',
+    template: 'qwen',
+    base_model: 1,
+    train_dataset_id: 1,
+    output_model_name: 'qwen2.5-7b-finance-sft-v1',
+    auto_merge: true,
+    gpus: [0],
+    batch_size: 8,
+    learning_rate: 0.00002,
+    n_epochs: 3,
+    save_steps: 100,
+    lr_scheduler_type: 'cosine',
+    max_length: 2048,
+    warmup_ratio: 0.05,
+    weight_decay: 0.01,
+    lora_rank: 16,
+    lora_alpha: 32,
+    lora_dropout: 0.05,
+    quantization_bit: 0,
+    process_id: 12345,
+    progress: 100,
+    train_duration: '2小时18分钟',
+    create_time: '2026-01-15T08:00:00Z',
+  },
+  {
+    id: 349102,
+    name: 'legal-sft-002',
+    description: '法律文书 SFT',
+    status: 'completed',
+    train_type: 'SFT',
+    train_method: 'lora',
+    template: 'qwen',
+    base_model: 1,
+    train_dataset_id: 2,
+    output_model_name: 'qwen2.5-7b-legal-sft-v2',
+    auto_merge: true,
+    gpus: [1],
+    batch_size: 4,
+    learning_rate: 0.000015,
+    n_epochs: 4,
+    save_steps: 120,
+    lr_scheduler_type: 'linear',
+    max_length: 4096,
+    warmup_ratio: 0.03,
+    weight_decay: 0.01,
+    lora_rank: 32,
+    lora_alpha: 64,
+    lora_dropout: 0.05,
+    quantization_bit: 0,
+    process_id: 12350,
+    progress: 100,
+    train_duration: '1小时46分钟',
+    create_time: '2026-01-18T10:00:00Z',
+  },
+  {
+    id: 849301,
+    name: 'medical-cpt-001',
+    description: '医疗领域继续预训练',
+    status: 'running',
+    train_type: 'CPT',
+    train_method: 'lora',
+    template: 'qwen2_5',
+    base_model: 2,
+    train_dataset_id: 6,
+    output_model_name: 'qwen2.5-14b-medical-cpt-v1',
+    auto_merge: true,
+    gpus: [0, 1],
+    batch_size: 2,
+    learning_rate: 0.0001,
+    n_epochs: 3,
+    save_steps: 200,
+    lr_scheduler_type: 'cosine',
+    max_length: 4096,
+    warmup_ratio: 0.03,
+    weight_decay: 0.01,
+    lora_rank: 16,
+    lora_alpha: 32,
+    lora_dropout: 0.05,
+    quantization_bit: 0,
+    process_id: 28741,
+    progress: 64,
+    train_duration: '36分钟',
+    create_time: '2026-07-13T06:40:00Z',
+  },
+  {
+    id: 593021,
+    name: 'service-dpo-001',
+    description: '客服对话偏好训练',
+    status: 'pending',
+    train_type: 'DPO',
+    train_method: 'lora',
+    template: 'qwen',
+    base_model: 1,
+    train_dataset_id: 3,
+    output_model_name: 'qwen2.5-7b-service-dpo-v1',
+    auto_merge: true,
+    gpus: [2],
+    batch_size: 4,
+    learning_rate: 0.000005,
+    n_epochs: 2,
+    save_steps: 100,
+    lr_scheduler_type: 'cosine',
+    max_length: 2048,
+    warmup_ratio: 0.1,
+    weight_decay: 0,
+    lora_rank: 16,
+    lora_alpha: 32,
+    lora_dropout: 0.1,
+    quantization_bit: 0,
+    progress: 0,
+    train_duration: '等待调度',
+    create_time: '2026-02-08T14:00:00Z',
+  },
+  {
+    id: 201948,
+    name: 'finance-sft-002',
+    description: '金融领域二轮微调',
+    status: 'failed',
+    train_type: 'SFT',
+    train_method: 'lora',
+    template: 'qwen',
+    base_model: 1,
+    train_dataset_id: 1,
+    output_model_name: 'qwen2.5-7b-finance-sft-v2',
+    auto_merge: false,
+    gpus: [3],
+    batch_size: 8,
+    learning_rate: 0.00002,
+    n_epochs: 3,
+    save_steps: 100,
+    lr_scheduler_type: 'cosine',
+    max_length: 2048,
+    warmup_ratio: 0.05,
+    weight_decay: 0.01,
+    lora_rank: 16,
+    lora_alpha: 32,
+    lora_dropout: 0.05,
+    quantization_bit: 0,
+    process_id: 27654,
+    progress: 32,
+    train_duration: '18分钟',
+    create_time: '2026-02-10T11:00:00Z',
+  },
+  {
+    id: 940212,
+    name: 'general-sft-001',
+    description: '通用能力全参数微调',
+    status: 'completed',
+    train_type: 'SFT',
+    train_method: 'full',
+    template: 'llama3',
+    base_model: 3,
+    train_dataset_id: 3,
+    output_model_name: 'llama3-8b-general-sft-v1',
+    auto_merge: false,
+    gpus: [0, 2],
+    batch_size: 2,
+    learning_rate: 0.00001,
+    n_epochs: 2,
+    save_steps: 250,
+    lr_scheduler_type: 'cosine',
+    max_length: 4096,
+    warmup_ratio: 0.03,
+    weight_decay: 0.1,
+    process_id: 26318,
+    progress: 100,
+    train_duration: '3小时05分钟',
+    create_time: '2026-02-12T13:00:00Z',
+  },
 ]
 
 // ============ 模型推理/对比 ============
@@ -549,11 +721,48 @@ export const mockLogFiles: LogFile[] = [
 ]
 
 export const mockTrainingLogFiles: TrainingLogFile[] = [
+  { file: 'medical-cpt-001_pid28741.log', name: 'medical-cpt-001', size: '6.8 MB', pid: 28741, date: '2026-07-13' },
   { file: 'qwen-ft-finance-001_pid12345.log', name: 'finance-sft-001', size: '4.5 MB', pid: 12345, date: '2026-02-15' },
   { file: 'llama3-ft-customer-service_pid12346.log', name: 'service-dpo-001', size: '2.1 MB', pid: 12346, date: '2026-02-18' },
   { file: 'qwen-ft-legal-002_pid12350.log', name: 'legal-sft-002', size: '5.8 MB', pid: 12350, date: '2026-02-20' },
 ]
 
+const medicalTrainingLogLines = [
+  '[2026-07-13 14:40:01] INFO: Launching distributed training with torchrun --nproc_per_node=2',
+  '[2026-07-13 14:40:02] INFO: Process rank: 0, world size: 2, device: cuda:0, distributed training: True',
+  '[2026-07-13 14:40:04] INFO: Loading tokenizer from /data/models/qwen2.5-14b-instruct',
+  '[2026-07-13 14:40:16] INFO: Loading checkpoint shards: 100% | 8/8 | 00:12',
+  '[2026-07-13 14:40:18] INFO: Loading dataset 医疗问答-训练集 (9,800 samples)',
+  '[2026-07-13 14:40:27] INFO: Tokenizing dataset: 100% | 9,800/9,800 | 00:09',
+  '[2026-07-13 14:40:28] INFO: LoRA config: rank=16, alpha=32, dropout=0.05, target_modules=q_proj,k_proj,v_proj,o_proj',
+  '[2026-07-13 14:40:29] INFO: Trainable params: 83,886,080 / 14,787,584,000 (0.5673%)',
+  '[2026-07-13 14:40:30] INFO: ***** Running training *****',
+  '[2026-07-13 14:40:30] INFO:   Num examples = 9,800',
+  '[2026-07-13 14:40:30] INFO:   Num Epochs = 3',
+  '[2026-07-13 14:40:30] INFO:   Instantaneous batch size per device = 2',
+  '[2026-07-13 14:40:30] INFO:   Total train batch size = 32',
+  '[2026-07-13 14:40:30] INFO:   Gradient Accumulation steps = 8',
+  '[2026-07-13 14:40:30] INFO:   Total optimization steps = 921',
+  '[2026-07-13 14:42:18] INFO: step=40 {\'loss\': 2.684, \'grad_norm\': 1.184, \'learning_rate\': 9.82e-05, \'epoch\': 0.13}',
+  '[2026-07-13 14:44:26] INFO: step=80 {\'loss\': 2.312, \'grad_norm\': 1.092, \'learning_rate\': 9.68e-05, \'epoch\': 0.26}',
+  '[2026-07-13 14:46:34] INFO: step=120 {\'loss\': 2.084, \'grad_norm\': 1.037, \'learning_rate\': 9.43e-05, \'epoch\': 0.39}',
+  '[2026-07-13 14:48:42] INFO: step=160 {\'loss\': 1.932, \'grad_norm\': 0.986, \'learning_rate\': 9.08e-05, \'epoch\': 0.52}',
+  '[2026-07-13 14:50:49] INFO: step=200 {\'loss\': 1.801, \'grad_norm\': 0.944, \'learning_rate\': 8.64e-05, \'epoch\': 0.65}',
+  '[2026-07-13 14:50:54] INFO: Saving checkpoint to /data/checkpoints/medical-cpt-001/checkpoint-200',
+  '[2026-07-13 14:52:58] INFO: step=240 {\'loss\': 1.696, \'grad_norm\': 0.913, \'learning_rate\': 8.15e-05, \'epoch\': 0.78}',
+  '[2026-07-13 14:55:06] INFO: step=280 {\'loss\': 1.611, \'grad_norm\': 0.887, \'learning_rate\': 7.61e-05, \'epoch\': 0.91}',
+  '[2026-07-13 14:57:13] INFO: step=320 {\'loss\': 1.532, \'grad_norm\': 0.852, \'learning_rate\': 7.06e-05, \'epoch\': 1.04}',
+  '[2026-07-13 14:59:21] INFO: step=360 {\'loss\': 1.461, \'grad_norm\': 0.829, \'learning_rate\': 6.49e-05, \'epoch\': 1.17}',
+  '[2026-07-13 15:01:29] INFO: step=400 {\'loss\': 1.396, \'grad_norm\': 0.811, \'learning_rate\': 5.91e-05, \'epoch\': 1.30}',
+  '[2026-07-13 15:01:34] INFO: Saving checkpoint to /data/checkpoints/medical-cpt-001/checkpoint-400',
+  '[2026-07-13 15:03:37] INFO: step=440 {\'loss\': 1.337, \'grad_norm\': 0.795, \'learning_rate\': 5.35e-05, \'epoch\': 1.43}',
+  '[2026-07-13 15:05:45] INFO: step=480 {\'loss\': 1.286, \'grad_norm\': 0.776, \'learning_rate\': 4.80e-05, \'epoch\': 1.56}',
+  '[2026-07-13 15:07:53] INFO: step=520 {\'loss\': 1.232, \'grad_norm\': 0.758, \'learning_rate\': 4.28e-05, \'epoch\': 1.69}',
+  '[2026-07-13 15:11:59] INFO: step=560 {\'loss\': 1.184, \'grad_norm\': 0.741, \'learning_rate\': 3.79e-05, \'epoch\': 1.82}',
+  '[2026-07-13 15:16:05] INFO: step=590 {\'loss\': 1.146, \'grad_norm\': 0.728, \'learning_rate\': 3.44e-05, \'epoch\': 1.92}',
+  '[2026-07-13 15:16:06] INFO: Training is running normally, estimated remaining time: 00:20:15',
+]
+
 const fakeLogLines = [
   "[2026-02-15 08:30:12] INFO: Loading model from /data/models/qwen2.5-7b",
   "[2026-02-15 08:30:13] INFO: Loading dataset finance-train-001 (8560 samples)",
@@ -591,3 +800,16 @@ export const mockLogContent: LogContent = {
   size: '2.3 MB',
   content: fakeLogLines.join('\n'),
 }
+
+export const mockTrainingLogContents: Record<string, LogContent> = {
+  'medical-cpt-001_pid28741.log': {
+    file: 'medical-cpt-001_pid28741.log',
+    size: '6.8 MB',
+    content: medicalTrainingLogLines.join('\n'),
+  },
+  'qwen-ft-finance-001_pid12345.log': {
+    file: 'qwen-ft-finance-001_pid12345.log',
+    size: '4.5 MB',
+    content: fakeLogLines.join('\n'),
+  },
+}

frontend/src/mock/datasetVersions.ts

@@ -9,6 +9,18 @@ export interface StoredDatasetVersion {
 export interface StoredDatasetVersionState {
   versions: StoredDatasetVersion[]
   active_version_id: string
+  /** 下次创建版本时使用的序号，确保已删除的版本号不会被复用。 */
+  next_version_number: number
+}
+
+export class DatasetVersionMutationError extends Error {
+  constructor(
+    message: string,
+    readonly status: number,
+  ) {
+    super(message)
+    this.name = 'DatasetVersionMutationError'
+  }
 }
 
 export function createInitialVersionState(
@@ -22,7 +34,24 @@ export function createInitialVersionState(
     description: '初始版本',
     content,
   }
-  return { versions: [version], active_version_id: version.id }
+  return { versions: [version], active_version_id: version.id, next_version_number: 2 }
+}
+
+/** 为旧版 localStorage 数据补齐单调递增的版本号游标。 */
+export function normalizeDatasetVersionState(
+  state: Omit<StoredDatasetVersionState, 'next_version_number'> & {
+    next_version_number?: number
+  },
+): StoredDatasetVersionState {
+  const minimumNextNumber = Math.max(0, ...state.versions.map((item) => item.version)) + 1
+  const nextVersionNumber = Number.isInteger(state.next_version_number)
+    ? Math.max(minimumNextNumber, state.next_version_number as number)
+    : minimumNextNumber
+
+  return {
+    ...state,
+    next_version_number: nextVersionNumber,
+  }
 }
 
 /** 追加不可变版本快照，并自动把新版本设为当前版本。 */
@@ -32,7 +61,7 @@ export function appendDatasetVersion(
   createTime: string,
   description = '在线编辑',
 ): StoredDatasetVersionState {
-  const nextNumber = Math.max(0, ...state.versions.map((item) => item.version)) + 1
+  const nextNumber = state.next_version_number
   const version: StoredDatasetVersion = {
     id: `v${nextNumber}`,
     version: nextNumber,
@@ -43,6 +72,32 @@ export function appendDatasetVersion(
   return {
     versions: [...state.versions, version],
     active_version_id: version.id,
+    next_version_number: nextNumber + 1,
+  }
+}
+
+/** 删除非当前、非初始的历史版本，并保留版本号游标。 */
+export function deleteDatasetVersion(
+  state: StoredDatasetVersionState,
+  versionId: string,
+): StoredDatasetVersionState {
+  const version = state.versions.find((item) => item.id === versionId)
+  if (!version) {
+    throw new DatasetVersionMutationError('数据集版本不存在', 404)
+  }
+  if (state.versions.length === 1) {
+    throw new DatasetVersionMutationError('唯一版本不可删除', 400)
+  }
+  if (version.id === state.active_version_id) {
+    throw new DatasetVersionMutationError('当前版本不可删除，请先切换到其他版本', 409)
+  }
+  if (version.version === 1) {
+    throw new DatasetVersionMutationError('初始版本不可删除', 400)
+  }
+
+  return {
+    ...state,
+    versions: state.versions.filter((item) => item.id !== versionId),
   }
 }
 

frontend/src/plugins/echarts.ts

@@ -4,7 +4,7 @@
  */
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
-import { BarChart, LineChart } from 'echarts/charts'
+import { BarChart, LineChart, PieChart } from 'echarts/charts'
 import {
   GridComponent,
   TooltipComponent,
@@ -17,6 +17,7 @@ use([
   CanvasRenderer,
   BarChart,
   LineChart,
+  PieChart,
   GridComponent,
   TooltipComponent,
   LegendComponent,

frontend/src/router/index.ts

@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
+import type { PermissionCode } from '@/types'
 
 const routes: RouteRecordRaw[] = [
   {
@@ -25,7 +26,7 @@ const routes: RouteRecordRaw[] = [
         path: 'fine-tune',
         name: 'fine-tune',
         component: () => import('@/views/fine-tune/FineTuneListView.vue'),
-        meta: { title: '模型微调', pageSurface: 'self' },
+        meta: { title: '模型训练', pageSurface: 'self' },
       },
       {
         path: 'fine-tune/create',
@@ -191,6 +192,12 @@ const routes: RouteRecordRaw[] = [
         meta: { title: '数据类型转换' },
       },
       // 系统设置
+      {
+        path: 'permission-denied',
+        name: 'permission-denied',
+        component: () => import('@/views/system/PermissionDeniedView.vue'),
+        meta: { title: '无权访问', skipPermission: true },
+      },
       {
         path: 'hardware',
         name: 'hardware',
@@ -203,6 +210,24 @@ const routes: RouteRecordRaw[] = [
         component: () => import('@/views/system/LogsView.vue'),
         meta: { title: '查看日志' },
       },
+      {
+        path: 'user-settings',
+        name: 'user-settings',
+        component: () => import('@/views/system/UserSettingsView.vue'),
+        meta: { title: '用户设置', pageSurface: 'self', permission: 'user-settings' },
+      },
+      {
+        path: 'user-settings/create',
+        name: 'user-create',
+        component: () => import('@/views/system/UserCreateView.vue'),
+        meta: { title: '创建用户', permission: 'user-settings' },
+      },
+      {
+        path: 'user-settings/:id/permission',
+        name: 'user-permission',
+        component: () => import('@/views/system/UserPermissionView.vue'),
+        meta: { title: '权限设置', permission: 'user-settings' },
+      },
       {
         path: 'training-log/:id',
         name: 'training-log',
@@ -222,6 +247,29 @@ const router = createRouter({
   routes,
 })
 
+const permissionBySegment: Record<string, PermissionCode> = {
+  dashboard: 'dashboard',
+  'fine-tune': 'fine-tune',
+  'training-log': 'fine-tune',
+  'model-eval': 'model-eval',
+  'model-inference': 'model-inference',
+  'model-compare': 'model-inference',
+  'model-manage': 'model-manage',
+  dataset: 'dataset',
+  'data-process': 'data-process',
+  'data-convert': 'data-convert',
+  tools: 'data-convert',
+  hardware: 'hardware',
+  logs: 'logs',
+  'user-settings': 'user-settings',
+}
+
+function requiredPermission(path: string, explicit?: unknown) {
+  if (explicit) return explicit as PermissionCode
+  const segment = path.split('/')[1]
+  return permissionBySegment[segment]
+}
+
 // 全局守卫：登录校验 + 会话超时
 router.beforeEach((to, _from, next) => {
   const auth = useAuthStore()
@@ -242,6 +290,14 @@ router.beforeEach((to, _from, next) => {
     return
   }
 
+  if (!to.meta.skipPermission) {
+    const permission = requiredPermission(to.path, to.meta.permission)
+    if (permission && !auth.hasPermission(permission)) {
+      next({ name: 'permission-denied', replace: true })
+      return
+    }
+  }
+
   // 续期会话
   auth.refresh()
   next()

frontend/src/stores/auth.ts

@@ -2,13 +2,63 @@ import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 import { login as loginApi } from '@/api/modules/system'
 import { SESSION_TIMEOUT } from '@/constants'
+import type { PermissionCode, SystemUser } from '@/types'
+
+const USER_STORAGE_KEY = 'currentUser'
+
+const allPermissions: PermissionCode[] = [
+  'dashboard',
+  'fine-tune',
+  'model-eval',
+  'model-inference',
+  'model-manage',
+  'dataset',
+  'data-process',
+  'data-convert',
+  'hardware',
+  'logs',
+  'user-settings',
+]
+
+function restoreUser(): SystemUser | null {
+  const persisted = localStorage.getItem(USER_STORAGE_KEY)
+  if (persisted) {
+    try {
+      return JSON.parse(persisted) as SystemUser
+    } catch {
+      localStorage.removeItem(USER_STORAGE_KEY)
+    }
+  }
+
+  // 兼容改造前已经登录的 admin 会话。
+  if (localStorage.getItem('username') === 'admin') {
+    return {
+      id: 'USR-0001',
+      username: 'admin',
+      display_name: '系统管理员',
+      role: 'admin',
+      status: 'active',
+      permissions: allPermissions,
+      create_time: '2026-01-01T08:00:00+08:00',
+      protected: true,
+    }
+  }
+  return null
+}
 
 /**
  * 认证 store
  * 沿用原项目 localStorage 的登录时间戳 + 5 分钟会话超时机制
  */
 export const useAuthStore = defineStore('auth', () => {
-  const username = ref<string>(localStorage.getItem('username') || '')
+  const currentUser = ref<SystemUser | null>(restoreUser())
+  const username = computed(() => currentUser.value?.username || '')
+  const displayName = computed(() => currentUser.value?.display_name || username.value)
+  const roleLabel = computed(() => {
+    if (currentUser.value?.role === 'admin') return '超级管理员'
+    if (currentUser.value?.role === 'operator') return '操作员'
+    return '观察员'
+  })
   const loginTime = ref<number>(parseInt(localStorage.getItem('loginTime') || '0', 10) || 0)
 
   const isLoggedIn = computed(() => {
@@ -18,13 +68,20 @@ export const useAuthStore = defineStore('auth', () => {
 
   /** 登录 */
   async function login(user: string, password: string) {
-    await loginApi(user, password)
+    const response = await loginApi(user, password)
-    username.value = user
+    currentUser.value = response.user
     loginTime.value = Date.now()
-    localStorage.setItem('username', user)
+    localStorage.setItem('username', response.user.username)
+    localStorage.setItem(USER_STORAGE_KEY, JSON.stringify(response.user))
     localStorage.setItem('loginTime', String(loginTime.value))
   }
 
+  /** 检查当前账号是否拥有指定模块权限。 */
+  function hasPermission(permission?: PermissionCode) {
+    if (!permission) return true
+    return currentUser.value?.permissions.includes(permission) ?? false
+  }
+
   /** 续期会话（活跃时刷新） */
   function refresh() {
     if (isLoggedIn.value) {
@@ -35,11 +92,23 @@ export const useAuthStore = defineStore('auth', () => {
 
   /** 退出 */
   function logout() {
-    username.value = ''
+    currentUser.value = null
     loginTime.value = 0
     localStorage.removeItem('username')
+    localStorage.removeItem(USER_STORAGE_KEY)
     localStorage.removeItem('loginTime')
   }
 
-  return { username, loginTime, isLoggedIn, login, refresh, logout }
+  return {
+    currentUser,
+    username,
+    displayName,
+    roleLabel,
+    loginTime,
+    isLoggedIn,
+    hasPermission,
+    login,
+    refresh,
+    logout,
+  }
 })

frontend/src/styles/index.scss

@@ -124,10 +124,18 @@ body {
 .el-button:active {
   transform: translateY(0);
 }
-.el-button.is-link:hover {
+.el-button.is-link:hover,
+.el-button.is-text:hover {
   transform: none;
   box-shadow: none;
 }
+.el-button.is-link:focus,
+.el-button.is-text:focus {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+  outline: none !important;
+}
 
 /* 4. 标签 (el-tag) 圆润化 */
 .el-tag {

frontend/src/types/index.ts

@@ -90,6 +90,7 @@ export interface DatasetVersion {
 export interface DatasetVersionList {
   versions: DatasetVersion[]
   active_version_id: string
+  next_version_number?: number
 }
 
 // ============ 训练任务 ============
@@ -139,6 +140,37 @@ export interface FineTuneTask {
   create_time?: string
 }
 
+export type FineTuneStartPayload = Omit<
+  FineTuneTask,
+  'id' | 'status' | 'progress' | 'process_id' | 'train_duration' | 'create_time'
+> & {
+  task_id: string | number
+  description: string
+  template: string
+  train_method: TrainMethodType
+  train_dataset_id: string | number
+  auto_merge: boolean
+  output_model_name: string
+  gpus: number[]
+  batch_size: number
+  learning_rate: number
+  n_epochs: number
+  save_steps: number
+  lr_scheduler_type: string
+  max_length: number
+  warmup_ratio: number
+  weight_decay: number
+  lora_alpha: number
+  lora_dropout: number
+  lora_rank: number
+  quantization_bit: number
+  export_quantized: boolean
+  quant_method: string
+  quant_bits: number
+  quant_group_size: number
+  export_format: string
+}
+
 export interface TrainingProgress {
   status?: string
   progress?: number
@@ -193,6 +225,34 @@ export interface EvalTask {
   create_time?: string
 }
 
+/** 启动评测时提交的可选基础指标配置。 */
+export interface BasicEvalMetricsConfig {
+  bleu: {
+    enabled: boolean
+    ngram: number
+  }
+  rouge: {
+    enabled: boolean
+    methods: string[]
+  }
+  cosine: {
+    enabled: boolean
+  }
+  output_precision: number
+}
+
+export interface StartEvalPayload {
+  eval_task_name: string
+  eval_type: EvalType
+  model_id: string | number
+  gpu_id: string | number
+  dataset_id: string | number
+  dimension_id: string | number
+  data_source: 'dataset' | 'inference'
+  leaderboard: boolean
+  basic_metrics: BasicEvalMetricsConfig
+}
+
 /** 单个测试样本的评测结果 */
 export interface EvalSampleResult {
   id: number | string
@@ -323,6 +383,57 @@ export interface HealthMetrics {
   disk_percent?: number
 }
 
+// ============ 用户与权限 ============
+/** 页面级权限编码，与路由模块保持一一对应 */
+export type PermissionCode =
+  | 'dashboard'
+  | 'fine-tune'
+  | 'model-eval'
+  | 'model-inference'
+  | 'model-manage'
+  | 'dataset'
+  | 'data-process'
+  | 'data-convert'
+  | 'hardware'
+  | 'logs'
+  | 'user-settings'
+
+export type UserRole = 'admin' | 'operator' | 'viewer'
+
+export type UserStatus = 'active' | 'disabled'
+
+export interface SystemUser {
+  id: string
+  username: string
+  display_name: string
+  role: UserRole
+  status: UserStatus
+  permissions: PermissionCode[]
+  create_time: string
+  last_login?: string
+  protected?: boolean
+}
+
+export interface LoginResponse {
+  token: string
+  user: SystemUser
+}
+
+export interface CreateUserPayload {
+  username: string
+  display_name: string
+  password: string
+  role: UserRole
+  status?: UserStatus
+  permissions?: PermissionCode[]
+}
+
+export interface UpdateUserAccessPayload {
+  role?: UserRole
+  status?: UserStatus
+  permissions?: PermissionCode[]
+}
+
 // ============ 日志 ============
 export interface LogFile {
   file: string

frontend/src/views/dashboard/DashboardView.vue

@@ -25,6 +25,19 @@ interface DashboardTask {
   startedAt: string
 }
 
+interface LoginDurationStat {
+  id: number
+  username: string
+  duration: number
+}
+
+interface RecentLoginUser {
+  id: number
+  username: string
+  role: string
+  lastLogin: string
+}
+
 const router = useRouter()
 const period = ref('7d')
 
@@ -185,6 +198,110 @@ const chartOption = computed<EChartsOption>(() => ({
   ],
 }))
 
+const operationChartOption = computed<EChartsOption>(() => ({
+  animationDuration: 500,
+  tooltip: { trigger: 'item' },
+  color: ['#4f46e5', '#10b981', '#f59e0b', '#3b82f6', '#ec4899'],
+  series: [
+    {
+      name: '操作分类',
+      type: 'pie',
+      radius: ['40%', '64%'],
+      center: ['50%', '50%'],
+      avoidLabelOverlap: true,
+      itemStyle: {
+        borderRadius: 6,
+        borderColor: '#fff',
+        borderWidth: 2
+      },
+      label: {
+        show: true,
+        position: 'outside',
+        formatter: '{b}',
+        color: '#475569',
+        fontSize: 11,
+        lineHeight: 16,
+        width: 70,
+        overflow: 'truncate',
+      },
+      emphasis: {
+        label: { show: true, fontSize: 12, fontWeight: 'bold', color: '#1e293b' }
+      },
+      labelLine: {
+        show: true,
+        length: 10,
+        length2: 8,
+        lineStyle: { color: '#94a3b8', width: 1 },
+      },
+      data: [
+        { value: 1048, name: '模型训练' },
+        { value: 735, name: '数据处理' },
+        { value: 580, name: '模型评测' },
+        { value: 484, name: '模型推理' },
+        { value: 300, name: '系统设置' }
+      ]
+    }
+  ]
+}))
+
+const loginDurationStats: LoginDurationStat[] = [
+  { id: 1, username: 'admin', duration: 124 },
+  { id: 2, username: 'zhangsan', duration: 86 },
+  { id: 3, username: 'lisi', duration: 42 },
+  { id: 4, username: 'wangwu', duration: 18 },
+]
+
+const loginDurationChartOption = computed<EChartsOption>(() => ({
+  animationDuration: 500,
+  grid: { top: 8, right: 40, bottom: 6, left: 8, containLabel: true },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: { type: 'shadow' },
+    valueFormatter: (value) => `${value} 小时`,
+  },
+  xAxis: {
+    type: 'value',
+    max: Math.ceil(Math.max(...loginDurationStats.map((user) => user.duration)) / 10) * 10,
+    splitNumber: 4,
+    axisLabel: { color: '#94a3b8', fontSize: 11, formatter: '{value}h' },
+    axisLine: { show: false },
+    axisTick: { show: false },
+    splitLine: { lineStyle: { color: '#eef2f7' } },
+  },
+  yAxis: {
+    type: 'category',
+    inverse: true,
+    data: loginDurationStats.map((user) => user.username),
+    axisLabel: { color: '#475569', fontSize: 12 },
+    axisLine: { show: false },
+    axisTick: { show: false },
+  },
+  series: [
+    {
+      name: '登录时长',
+      type: 'bar',
+      data: loginDurationStats.map((user) => user.duration),
+      barMaxWidth: 18,
+      barCategoryGap: '34%',
+      itemStyle: { color: '#4f46e5', borderRadius: [0, 4, 4, 0] },
+      label: { show: true, position: 'right', distance: 8, color: '#64748b', fontSize: 11, formatter: '{c} 小时' },
+    },
+  ],
+}))
+
+const recentLoginUsers: RecentLoginUser[] = [
+  { id: 1, username: 'admin', role: '超级管理员', lastLogin: '10 分钟前' },
+  { id: 2, username: 'zhangsan', role: '操作员', lastLogin: '2 小时前' },
+  { id: 5, username: 'zhaoliu', role: '观察员', lastLogin: '5 小时前' },
+  { id: 3, username: 'lisi', role: '操作员', lastLogin: '昨天 15:30' },
+]
+
+const roleTagType: Record<string, 'danger' | 'primary' | 'info'> = {
+  '超级管理员': 'danger',
+  '操作员': 'primary',
+  '观察员': 'info',
+}
+
 function viewAllTasks() {
   router.push('/fine-tune')
 }
@@ -262,6 +379,38 @@ function viewTask(task: DashboardTask) {
       </section>
     </div>
 
+    <div class="user-stats-row">
+      <section class="stat-card" aria-labelledby="op-dist-title">
+        <h2 id="op-dist-title" class="section-title">用户操作分布</h2>
+        <div class="chart-container">
+          <VChart class="pie-chart" :option="operationChartOption" autoresize />
+        </div>
+      </section>
+
+      <section class="stat-card" aria-labelledby="login-dur-title">
+        <h2 id="login-dur-title" class="section-title">登录时长排行 (本月)</h2>
+        <VChart class="duration-chart" :option="loginDurationChartOption" autoresize />
+      </section>
+
+      <section class="stat-card" aria-labelledby="recent-login-title">
+        <h2 id="recent-login-title" class="section-title">最近登录用户</h2>
+        <div class="list-container">
+          <div v-for="user in recentLoginUsers" :key="user.id" class="list-item recent-user-item">
+            <div class="user-info">
+              <el-avatar :size="32" class="user-avatar" :style="{ backgroundColor: '#e2e8f0', color: '#475569' }">
+                {{ user.username.slice(0, 1).toUpperCase() }}
+              </el-avatar>
+              <div class="user-meta">
+                <span class="username">{{ user.username }}</span>
+                <span class="login-time">{{ user.lastLogin }}</span>
+              </div>
+            </div>
+            <el-tag :type="roleTagType[user.role]" size="small">{{ user.role }}</el-tag>
+          </div>
+        </div>
+      </section>
+    </div>
+
     <section class="tasks-section" aria-labelledby="tasks-title">
       <div class="section-heading-row tasks-heading">
         <h2 id="tasks-title" class="section-title">训练任务</h2>
@@ -319,22 +468,102 @@ function viewTask(task: DashboardTask) {
 .dashboard-view {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  min-height: 100%;
-  gap: 10px;
+  gap: 16px;
   min-width: 0;
-  min-height: 0;
   color: #1e293b;
 }
 
 .overview-section,
 .chart-section,
 .service-section,
+.stat-card,
 .tasks-section {
   border: 1px solid #e2e8f0;
   border-radius: 10px;
   background: #ffffff;
 }
 
+.user-stats-row {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.stat-card {
+  display: flex;
+  flex-direction: column;
+  padding: 16px 18px;
+  min-height: 284px;
+  min-width: 0;
+}
+
+.chart-container {
+  flex: 1 1 auto;
+  min-height: 224px;
+  margin-top: 10px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pie-chart {
+  width: 100%;
+  height: 224px;
+}
+
+.duration-chart {
+  width: 100%;
+  height: 224px;
+  margin-top: 10px;
+}
+
+.list-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.list-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.user-avatar {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.username {
+  font-size: 13px;
+  font-weight: 500;
+  color: #334155;
+}
+
+.user-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.login-time {
+  font-size: 11px;
+  color: #94a3b8;
+}
+
+.recent-user-item {
+  padding: 2px 0;
+}
+
 .section-title {
   margin: 0;
   font-size: 15px;
@@ -429,8 +658,8 @@ function viewTask(task: DashboardTask) {
 .dashboard-middle {
   display: grid;
   grid-template-columns: minmax(0, 1.9fr) minmax(300px, 0.82fr);
-  flex: 1 1 auto;
+  flex: 0 0 auto;
-  gap: 10px;
+  gap: 16px;
   min-height: 0;
 }
 
@@ -438,8 +667,8 @@ function viewTask(task: DashboardTask) {
 .service-section {
   display: flex;
   flex-direction: column;
-  min-height: 280px;
+  min-height: 360px;
-  padding: 12px 14px;
+  padding: 16px 18px;
 }
 
 .section-heading-row {
@@ -460,8 +689,8 @@ function viewTask(task: DashboardTask) {
 .training-chart {
   flex: 1 1 auto;
   width: 100%;
-  height: auto;
+  height: 300px;
-  min-height: 230px;
+  min-height: 300px;
 }
 
 .service-table {
@@ -614,10 +843,6 @@ function viewTask(task: DashboardTask) {
 }
 
 @media (max-height: 900px) and (min-width: 1181px) {
-  .dashboard-view {
-    gap: 8px;
-  }
-
   .section-title {
     font-size: 14px;
   }
@@ -666,20 +891,6 @@ function viewTask(task: DashboardTask) {
     }
   }
 
-  .dashboard-middle {
-    gap: 8px;
-  }
-
-  .chart-section,
-  .service-section {
-    min-height: 240px;
-    padding: 10px 12px;
-  }
-
-  .training-chart {
-    min-height: 200px;
-  }
-
   .service-table {
     grid-template-rows: 32px repeat(4, minmax(40px, 1fr));
     margin-top: 8px;
@@ -741,6 +952,17 @@ function viewTask(task: DashboardTask) {
   .dashboard-middle {
     grid-template-columns: 1fr;
   }
+
+  .user-stats-row {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 720px) {
+  .user-stats-row {
+    grid-template-columns: 1fr;
+  }
+
 }
 
 @media (prefers-reduced-motion: reduce) {

frontend/src/views/data-process/DataProcessCreateView.vue

@@ -5,21 +5,31 @@ import { ElMessage, type UploadFile } from 'element-plus'
 import { storeToRefs } from 'pinia'
 import AppConfirmDialog from '@/components/AppConfirmDialog.vue'
 import TaskSetupStep from './create/TaskSetupStep.vue'
+import ModelSelectionStep from './create/ModelSelectionStep.vue'
 import SourceUploadStep from './create/SourceUploadStep.vue'
 import PreviewCompareStep from './create/PreviewCompareStep.vue'
 import GenerationStep from './create/GenerationStep.vue'
 import ResultEditorStep from './create/ResultEditorStep.vue'
-import { buildPreviewItems, createResults, DEFAULT_SOURCE_TEXT } from './create/previewModel'
+import { buildPreviewItems, DEFAULT_SOURCE_TEXT } from './create/previewModel'
+import {
+  createDefaultStructuredOptions,
+  createDefaultUnstructuredOptions,
+} from './create/dataProcessCreateState'
+import {
+  DATA_PROCESS_DRAFT_STORAGE_KEY,
+  useDataProcessDraft,
+} from './create/useDataProcessDraft'
+import { useDataProcessGeneration } from './create/useDataProcessGeneration'
 import { useModelsStore } from '@/stores/models'
 import type {
   ExternalDataSource,
-  GenerationState,
+  GenerationControlOptions,
   PreviewItem,
   ProcessType,
-  ResultItem,
   StepId,
   StructuredProcessOptions,
   UnstructuredProcessOptions,
+  UploadedDataFile,
 } from './create/types'
 
 const router = useRouter()
@@ -27,78 +37,27 @@ const modelsStore = useModelsStore()
 const { list: modelList } = storeToRefs(modelsStore)
 const generationModels = computed(() => modelList.value.filter((model) => model.type === 'LLM'))
 const taskSetupRef = ref<InstanceType<typeof TaskSetupStep>>()
+const modelSelectionRef = ref<InstanceType<typeof ModelSelectionStep>>()
 const confirmDialogRef = ref<InstanceType<typeof AppConfirmDialog>>()
-const DRAFT_STORAGE_KEY = 'yg-data-process-create-draft'
-const DRAFT_SCHEMA_VERSION = 5
 const PREVIEW_MODEL_VERSION = 'document-chunk-v2'
-const DEFAULT_GENERATION_PROMPT = '你是一名专业的数据生成助手。请根据输入内容生成准确、完整、可直接用于模型训练的问答数据。仅输出符合目标格式的内容，答案应事实清晰、语言自然，不要添加分析过程、说明或无关内容。'
 
 const WIZARD_STEPS = [
   { id: 'create', title: '创建任务', desc: '填写任务信息与处理配置' },
+  { id: 'model', title: '大模型选择', desc: '选择生成模型并设置输出要求' },
   { id: 'upload', title: '上传文件', desc: '上传或接入待处理的源数据' },
   { id: 'preview', title: '数据预览', desc: '核对源文件与预览内容' },
   { id: 'generate', title: '开始生成', desc: '确认摘要并启动处理' },
-  { id: 'results', title: '结果编辑与保存', desc: '检查、修改并保存结果' },
+  { id: 'results', title: '编辑与保存', desc: '检查、修改并保存结果' },
 ] as const satisfies ReadonlyArray<{ id: StepId; title: string; desc: string }>
-const LEGACY_V3_STEP_IDS: ReadonlyArray<StepId> = ['create', 'preview', 'generate', 'results']
-
 const currentStep = ref(0)
 const currentStepId = computed<StepId>(() => WIZARD_STEPS[currentStep.value]?.id ?? 'create')
 const task = reactive({ name: '', description: '' })
-const processType = ref<ProcessType>('unstructured')
+const processType = ref<ProcessType>('structured')
-const structuredOptions = ref<StructuredProcessOptions>({
+const structuredOptions = ref<StructuredProcessOptions>(createDefaultStructuredOptions())
-  preprocessOptions: ['clean_invalid', 'detect_structure', 'deduplicate', 'normalize_format'],
+const unstructuredOptions = ref<UnstructuredProcessOptions>(createDefaultUnstructuredOptions())
-  semanticEnrichment: false,
+const modelSelectionOptions = computed<GenerationControlOptions>(() => (
-  qaPairsPerRow: 1,
+  processType.value === 'unstructured' ? unstructuredOptions.value : structuredOptions.value
-  datasetSplit: { train: 80, validation: 10, test: 10 },
+))
-  generationModelId: '',
-  generationPrompt: DEFAULT_GENERATION_PROMPT,
-  temperature: 0.7,
-  maxTokens: 1024,
-  jsonMode: false,
-  qualityFilterEnabled: false,
-  filterLowQuality: true,
-  filterShortContent: true,
-  minOutputLength: 20,
-})
-const unstructuredOptions = ref<UnstructuredProcessOptions>({
-  preprocessOptions: [
-    'clean_invalid_content',
-    'detect_document_structure',
-    'merge_short_content',
-    'filter_low_quality',
-    'deduplicate_content',
-    'preserve_context',
-  ],
-  chunkMethod: 'semantic',
-  chunkSize: 800,
-  chunkOverlap: 100,
-  minChunkSize: 100,
-  customDelimiter: '',
-  preserveTables: true,
-  preserveCodeBlocks: true,
-  preserveLists: true,
-  semanticEnrichment: false,
-  qaPairsPerChunk: 1,
-  datasetSplit: { train: 80, validation: 10, test: 10 },
-  generationModelId: '',
-  generationPrompt: DEFAULT_GENERATION_PROMPT,
-  temperature: 0.7,
-  maxTokens: 1024,
-  jsonMode: false,
-  qualityFilterEnabled: false,
-  filterLowQuality: true,
-  filterShortContent: true,
-  minOutputLength: 20,
-})
-interface UploadedDataFile {
-  uid: number | string
-  name: string
-  size: number
-  count: number
-  content: string
-}
-
 const uploadedFiles = ref<UploadedDataFile[]>([])
 
 const externalSource = reactive<ExternalDataSource>({
@@ -112,35 +71,53 @@ const externalSource = reactive<ExternalDataSource>({
 })
 const externalPulling = ref(false)
 const externalConnected = ref(false)
+let connectionTimer: ReturnType<typeof setTimeout> | null = null
+let pullTimer: ReturnType<typeof setTimeout> | null = null
 
 const fileName = computed(() => uploadedFiles.value.map(f => f.name).join(', '))
-const fileSize = computed(() => uploadedFiles.value.reduce((sum, f) => sum + f.size, 0))
-const fileCount = computed(() => uploadedFiles.value.reduce((sum, f) => sum + f.count, 0))
 const previewSignature = ref('')
 const previewItems = ref<PreviewItem[]>([])
 const selectedPreviewFileId = ref<string | null>(null)
 const selectedPreviewId = ref<string | null>(null)
 const selectedPreviewIdsByFile = ref<Record<string, string>>({})
-const results = ref<ResultItem[]>([])
-const selectedResultId = ref<string | null>(null)
 const dirty = ref(false)
 const restoringDraft = ref(false)
 let allowLeave = false
 
-const generation = reactive<GenerationState>({
+const {
-  status: 'idle',
+  generation,
-  progress: 0,
+  results,
-  message: '确认摘要后即可开始生成，过程中可查看实时进度。',
+  selectedResultId,
+  resetDownstream,
+  restoreResult,
+  startGeneration,
+  stopGeneration,
+  stopGenerationTimer,
+  updateResultField,
+  validateResults,
+} = useDataProcessGeneration({
+  previewItems,
+  processType,
+  structuredOptions,
+  unstructuredOptions,
+  dirty,
 })
 
-let generationTimer: ReturnType<typeof setInterval> | null = null
-
 const modifiedPreviewCount = computed(() => previewItems.value.filter((item) => item.status !== 'original').length)
+const previewItemsByFile = computed(() => {
+  const grouped = new Map<string, PreviewItem[]>()
+  for (const item of previewItems.value) {
+    const items = grouped.get(item.sourceFileId) || []
+    items.push(item)
+    grouped.set(item.sourceFileId, items)
+  }
+  return grouped
+})
 const activePreviewFile = computed(() => uploadedFiles.value.find((file) => String(file.uid) === selectedPreviewFileId.value))
-const activePreviewItems = computed(() => previewItems.value.filter((item) => item.sourceFileId === selectedPreviewFileId.value))
+const activePreviewItems = computed(() => previewItemsByFile.value.get(selectedPreviewFileId.value || '') || [])
 const activeSourceText = computed(() => activePreviewFile.value?.content ?? '')
 const previewFiles = computed(() => uploadedFiles.value.map((file) => {
-  const items = previewItems.value.filter((item) => item.sourceFileId === String(file.uid))
+  const items = previewItemsByFile.value.get(String(file.uid)) || []
   return {
     id: String(file.uid),
     name: file.name,
@@ -149,7 +126,8 @@ const previewFiles = computed(() => uploadedFiles.value.map((file) => {
   }
 }))
 const primaryActionLabel = computed(() => {
-  if (currentStepId.value === 'create') return '继续：上传文件'
+  if (currentStepId.value === 'create') return '继续：选择大模型'
+  if (currentStepId.value === 'model') return '继续：上传文件'
   if (currentStepId.value === 'upload') return '继续：数据预览'
   if (currentStepId.value === 'preview') return '确认预览并继续'
   if (currentStepId.value === 'results') return '保存任务'
@@ -169,45 +147,31 @@ const previousStepLabel = computed(() => currentStep.value > 0
   ? WIZARD_STEPS[currentStep.value - 1].title
   : '')
 
-function isStepId(value: unknown): value is StepId {
-  return typeof value === 'string' && WIZARD_STEPS.some((step) => step.id === value)
-}
-
 function goToStep(stepId: StepId) {
   const nextStepIndex = WIZARD_STEPS.findIndex((step) => step.id === stepId)
   if (nextStepIndex >= 0) currentStep.value = nextStepIndex
 }
 
-function draftSnapshot() {
+function updateModelSelectionOptions(value: GenerationControlOptions) {
-  return {
+  if (processType.value === 'unstructured') {
-    schemaVersion: DRAFT_SCHEMA_VERSION,
+    unstructuredOptions.value = { ...unstructuredOptions.value, ...value }
-    currentStep: currentStep.value,
+    return
-    currentStepId: currentStepId.value,
-    task: { ...task },
-    processType: processType.value,
-    structuredOptions: {
-      ...structuredOptions.value,
-      preprocessOptions: [...structuredOptions.value.preprocessOptions],
-      datasetSplit: { ...structuredOptions.value.datasetSplit },
-    },
-    unstructuredOptions: {
-      ...unstructuredOptions.value,
-      preprocessOptions: [...unstructuredOptions.value.preprocessOptions],
-      datasetSplit: { ...unstructuredOptions.value.datasetSplit },
-    },
-    uploadedFiles: uploadedFiles.value,
-    externalSource: { ...externalSource },
-    previewSignature: previewSignature.value,
-    previewItems: previewItems.value,
-    selectedPreviewFileId: selectedPreviewFileId.value,
-    selectedPreviewId: selectedPreviewId.value,
-    selectedPreviewIdsByFile: selectedPreviewIdsByFile.value,
-    results: results.value,
-    selectedResultId: selectedResultId.value,
-    generation: { ...generation },
   }
+  structuredOptions.value = { ...structuredOptions.value, ...value }
 }
 
+const { persistDraft, restoreDraft } = useDataProcessDraft({
+  currentStepId,
+  task,
+  processType,
+  structuredOptions,
+  unstructuredOptions,
+  externalSource,
+  restoringDraft,
+  dirty,
+  goToStep,
+})
+
 function previewAffectingOptions() {
   if (processType.value === 'structured') {
     return {
@@ -291,191 +255,11 @@ const generationOptionsSignature = computed(() => JSON.stringify(generationAffec
 
 function buildPreviewSignature() {
   const filesSignature = uploadedFiles.value
-    .map((file) => `${file.uid}:${file.content}`)
+    .map((file) => `${file.uid}:${file.name}:${file.size}:${file.count}`)
     .join('|')
   return `${PREVIEW_MODEL_VERSION}:${processType.value}:${JSON.stringify(previewAffectingOptions())}:${filesSignature}`
 }
 
-function persistDraft() {
-  if (restoringDraft.value) return
-  try {
-    localStorage.setItem(DRAFT_STORAGE_KEY, JSON.stringify(draftSnapshot()))
-  } catch {
-    ElMessage.warning('草稿保存失败，请检查浏览器存储空间')
-  }
-}
-
-type DraftSnapshot = Partial<ReturnType<typeof draftSnapshot>> & {
-  fileName?: string
-  fileSize?: number
-  fileCount?: number
-  sourceText?: string
-}
-
-function restoreDraft() {
-  try {
-    const raw = localStorage.getItem(DRAFT_STORAGE_KEY)
-    if (!raw) return
-    const snapshot = JSON.parse(raw) as DraftSnapshot
-    if (!snapshot?.uploadedFiles && (!snapshot?.fileName || !snapshot?.sourceText)) return
-    const snapshotSchemaVersion = Number(snapshot.schemaVersion) || 0
-    const requiresPreviewMigration = snapshotSchemaVersion < 3
-    const legacyStepId = snapshotSchemaVersion === 3
-      ? LEGACY_V3_STEP_IDS[Math.min(Math.max(Number(snapshot.currentStep) || 0, 0), LEGACY_V3_STEP_IDS.length - 1)]
-      : undefined
-    const indexedStepId = WIZARD_STEPS[Math.min(
-      Math.max(Number(snapshot.currentStep) || 0, 0),
-      WIZARD_STEPS.length - 1,
-    )]?.id
-    const restoredStepId = isStepId(snapshot.currentStepId)
-      ? snapshot.currentStepId
-      : legacyStepId || indexedStepId || 'create'
-
-    restoringDraft.value = true
-    goToStep(requiresPreviewMigration ? 'create' : restoredStepId)
-    task.name = snapshot.task?.name || ''
-    task.description = snapshot.task?.description || ''
-    processType.value = snapshot.processType === 'structured' || snapshot.processType === 'external'
-      ? snapshot.processType
-      : 'unstructured'
-    if (snapshot.structuredOptions) {
-      structuredOptions.value = {
-        ...structuredOptions.value,
-        ...snapshot.structuredOptions,
-        preprocessOptions: Array.isArray(snapshot.structuredOptions.preprocessOptions)
-          ? snapshot.structuredOptions.preprocessOptions
-          : structuredOptions.value.preprocessOptions,
-        datasetSplit: {
-          ...structuredOptions.value.datasetSplit,
-          ...snapshot.structuredOptions.datasetSplit,
-        },
-      }
-    }
-    if (snapshot.unstructuredOptions) {
-      const restoredUnstructuredOptions = snapshot.unstructuredOptions
-      const restoredDatasetSplit = restoredUnstructuredOptions.datasetSplit
-      unstructuredOptions.value = {
-        ...unstructuredOptions.value,
-        preprocessOptions: Array.isArray(restoredUnstructuredOptions.preprocessOptions)
-          ? restoredUnstructuredOptions.preprocessOptions
-          : unstructuredOptions.value.preprocessOptions,
-        chunkMethod: restoredUnstructuredOptions.chunkMethod || unstructuredOptions.value.chunkMethod,
-        chunkSize: Number.isFinite(restoredUnstructuredOptions.chunkSize)
-          ? restoredUnstructuredOptions.chunkSize
-          : unstructuredOptions.value.chunkSize,
-        chunkOverlap: Number.isFinite(restoredUnstructuredOptions.chunkOverlap)
-          ? restoredUnstructuredOptions.chunkOverlap
-          : unstructuredOptions.value.chunkOverlap,
-        minChunkSize: Number.isFinite(restoredUnstructuredOptions.minChunkSize)
-          ? restoredUnstructuredOptions.minChunkSize
-          : unstructuredOptions.value.minChunkSize,
-        customDelimiter: typeof restoredUnstructuredOptions.customDelimiter === 'string'
-          ? restoredUnstructuredOptions.customDelimiter
-          : unstructuredOptions.value.customDelimiter,
-        preserveTables: typeof restoredUnstructuredOptions.preserveTables === 'boolean'
-          ? restoredUnstructuredOptions.preserveTables
-          : unstructuredOptions.value.preserveTables,
-        preserveCodeBlocks: typeof restoredUnstructuredOptions.preserveCodeBlocks === 'boolean'
-          ? restoredUnstructuredOptions.preserveCodeBlocks
-          : unstructuredOptions.value.preserveCodeBlocks,
-        preserveLists: typeof restoredUnstructuredOptions.preserveLists === 'boolean'
-          ? restoredUnstructuredOptions.preserveLists
-          : unstructuredOptions.value.preserveLists,
-        semanticEnrichment: typeof restoredUnstructuredOptions.semanticEnrichment === 'boolean'
-          ? restoredUnstructuredOptions.semanticEnrichment
-          : unstructuredOptions.value.semanticEnrichment,
-        qaPairsPerChunk: Number.isFinite(restoredUnstructuredOptions.qaPairsPerChunk)
-          ? restoredUnstructuredOptions.qaPairsPerChunk
-          : unstructuredOptions.value.qaPairsPerChunk,
-        generationModelId: restoredUnstructuredOptions.generationModelId ?? unstructuredOptions.value.generationModelId,
-        generationPrompt: typeof restoredUnstructuredOptions.generationPrompt === 'string'
-          ? restoredUnstructuredOptions.generationPrompt
-          : unstructuredOptions.value.generationPrompt,
-        temperature: Number.isFinite(restoredUnstructuredOptions.temperature)
-          ? restoredUnstructuredOptions.temperature
-          : unstructuredOptions.value.temperature,
-        maxTokens: Number.isFinite(restoredUnstructuredOptions.maxTokens)
-          ? restoredUnstructuredOptions.maxTokens
-          : unstructuredOptions.value.maxTokens,
-        jsonMode: typeof restoredUnstructuredOptions.jsonMode === 'boolean'
-          ? restoredUnstructuredOptions.jsonMode
-          : unstructuredOptions.value.jsonMode,
-        qualityFilterEnabled: typeof restoredUnstructuredOptions.qualityFilterEnabled === 'boolean'
-          ? restoredUnstructuredOptions.qualityFilterEnabled
-          : unstructuredOptions.value.qualityFilterEnabled,
-        filterLowQuality: typeof restoredUnstructuredOptions.filterLowQuality === 'boolean'
-          ? restoredUnstructuredOptions.filterLowQuality
-          : unstructuredOptions.value.filterLowQuality,
-        filterShortContent: typeof restoredUnstructuredOptions.filterShortContent === 'boolean'
-          ? restoredUnstructuredOptions.filterShortContent
-          : unstructuredOptions.value.filterShortContent,
-        minOutputLength: Number.isFinite(restoredUnstructuredOptions.minOutputLength)
-          ? restoredUnstructuredOptions.minOutputLength
-          : unstructuredOptions.value.minOutputLength,
-        datasetSplit: {
-          train: Number.isFinite(restoredDatasetSplit?.train)
-            ? restoredDatasetSplit.train
-            : unstructuredOptions.value.datasetSplit.train,
-          validation: Number.isFinite(restoredDatasetSplit?.validation)
-            ? restoredDatasetSplit.validation
-            : unstructuredOptions.value.datasetSplit.validation,
-          test: Number.isFinite(restoredDatasetSplit?.test)
-            ? restoredDatasetSplit.test
-            : unstructuredOptions.value.datasetSplit.test,
-        },
-      }
-    }
-    
-    if (snapshot.uploadedFiles) {
-      uploadedFiles.value = Array.isArray(snapshot.uploadedFiles) ? snapshot.uploadedFiles : []
-    } else if (snapshot.fileName && snapshot.sourceText) {
-      // Migrate old draft
-      uploadedFiles.value = [{
-        uid: 'migrated-draft',
-        name: snapshot.fileName,
-        size: Number(snapshot.fileSize) || 0,
-        count: Number(snapshot.fileCount) || 0,
-        content: snapshot.sourceText
-      }]
-    }
-
-    previewSignature.value = requiresPreviewMigration ? '' : snapshot.previewSignature || ''
-    if (snapshot.externalSource) {
-      Object.assign(externalSource, snapshot.externalSource)
-    }
-    const defaultSourceFileId = String(uploadedFiles.value[0]?.uid ?? '')
-    previewItems.value = !requiresPreviewMigration && Array.isArray(snapshot.previewItems)
-      ? snapshot.previewItems.map((item) => ({ ...item, sourceFileId: item.sourceFileId ?? defaultSourceFileId }))
-      : []
-    selectedPreviewFileId.value = snapshot.selectedPreviewFileId || defaultSourceFileId || null
-    selectedPreviewIdsByFile.value = requiresPreviewMigration ? {} : snapshot.selectedPreviewIdsByFile || {}
-    selectedPreviewId.value = requiresPreviewMigration
-      ? null
-      : snapshot.selectedPreviewId
-        || selectedPreviewIdsByFile.value[selectedPreviewFileId.value ?? '']
-        || activePreviewItems.value[0]?.id
-        || null
-    results.value = !requiresPreviewMigration && Array.isArray(snapshot.results) ? snapshot.results : []
-    selectedResultId.value = requiresPreviewMigration ? null : snapshot.selectedResultId || results.value[0]?.id || null
-    if (!requiresPreviewMigration) {
-      const restoredGeneration = snapshot.generation || {}
-      Object.assign(generation, restoredGeneration)
-      if (generation.status === 'running') {
-        generation.status = 'idle'
-        generation.progress = 0
-        generation.message = '草稿已恢复，请重新开始生成。'
-      }
-    }
-    dirty.value = false
-    nextTick(() => { restoringDraft.value = false })
-    ElMessage.info(requiresPreviewMigration
-      ? '已恢复任务信息，切分规则已更新，请重新生成预览'
-      : '已恢复上次保存的草稿')
-  } catch {
-    localStorage.removeItem(DRAFT_STORAGE_KEY)
-  }
-}
-
 watch(
   [() => task.name, () => task.description, processType, structuredOptions, unstructuredOptions, externalSource],
   () => {
@@ -496,9 +280,7 @@ watch(generationOptionsSignature, (currentSignature, previousSignature) => {
 })
 
 watch(
-  [currentStep, task, processType, structuredOptions, unstructuredOptions, uploadedFiles, externalSource, previewSignature,
+  [task, processType, structuredOptions, unstructuredOptions, externalSource],
-    previewItems, selectedPreviewFileId, selectedPreviewId, selectedPreviewIdsByFile,
-    results, selectedResultId, generation],
   persistDraft,
   { deep: true },
 )
@@ -566,8 +348,10 @@ function handleTestConnection() {
     ElMessage.warning('请先填写数据源地址')
     return
   }
+  if (connectionTimer) clearTimeout(connectionTimer)
   externalPulling.value = true
-  setTimeout(() => {
+  connectionTimer = setTimeout(() => {
+    connectionTimer = null
     externalPulling.value = false
     externalConnected.value = true
     ElMessage.success('数据源连接测试成功')
@@ -579,8 +363,10 @@ function handlePullData() {
     ElMessage.warning('请先填写数据源地址')
     return
   }
+  if (pullTimer) clearTimeout(pullTimer)
   externalPulling.value = true
-  setTimeout(() => {
+  pullTimer = setTimeout(() => {
+    pullTimer = null
     externalPulling.value = false
     externalConnected.value = true
     const typeName = externalSource.type.toUpperCase()
@@ -620,18 +406,15 @@ function resetSourceDataForProcessTypeChange() {
   resetDownstream()
 }
 
-function resetDownstream() {
-  stopGenerationTimer()
-  generation.status = 'idle'
-  generation.progress = 0
-  generation.message = '确认摘要后即可开始生成，过程中可查看实时进度。'
-  results.value = []
-  selectedResultId.value = null
-}
-
 async function nextFromCreate() {
   const valid = await taskSetupRef.value?.validate()
   if (!valid) return
+  goToStep('model')
+}
+
+async function nextFromModel() {
+  const valid = await modelSelectionRef.value?.validate()
+  if (!valid) return
   goToStep('upload')
 }
 
@@ -738,86 +521,15 @@ async function removePreviewItem(id: string) {
   dirty.value = true
 }
 
-function stopGenerationTimer() {
-  if (generationTimer) clearInterval(generationTimer)
-  generationTimer = null
-}
-
-function startGeneration() {
-  stopGenerationTimer()
-  generation.status = 'running'
-  generation.progress = 0
-  generation.message = '正在应用预览修改并生成标准化结果，请稍候。'
-
-  generationTimer = setInterval(() => {
-    generation.progress = Math.min(100, generation.progress + 8)
-    if (generation.progress < 100) return
-
-    stopGenerationTimer()
-    generation.status = 'success'
-    results.value = createResults(
-      previewItems.value,
-      processType.value === 'structured'
-        ? structuredOptions.value
-        : processType.value === 'unstructured'
-          ? unstructuredOptions.value
-          : undefined,
-    )
-    generation.message = `已完成 ${results.value.length.toLocaleString()} 条数据处理，可进入结果页检查。`
-    selectedResultId.value = results.value[0]?.id ?? null
-    dirty.value = true
-    ElMessage.success('数据处理完成')
-  }, 180)
-}
-
-function stopGeneration() {
-  stopGenerationTimer()
-  generation.status = 'failed'
-  generation.message = '任务已停止，预览修改仍然保留，可以重新生成。'
-}
-
-function updateResultField(id: string, field: 'instruction' | 'input' | 'output', value: string) {
-  const item = results.value.find((entry) => entry.id === id)
-  if (!item) return
-  item[field] = value
-  const valid = item.instruction.trim() && item.output.trim()
-  item.error = valid ? undefined : 'Instruction 和 Output 不能为空'
-  const changed = item.instruction !== item.originalInstruction
-    || item.input !== item.originalInput
-    || item.output !== item.originalOutput
-  item.status = item.error ? 'invalid' : changed ? 'modified' : 'valid'
-  dirty.value = true
-}
-
-function restoreResult(id: string) {
-  const item = results.value.find((entry) => entry.id === id)
-  if (!item) return
-  item.instruction = item.originalInstruction
-  item.input = item.originalInput
-  item.output = item.originalOutput
-  item.error = undefined
-  item.status = 'valid'
-  dirty.value = true
-}
-
-function validateResults() {
-  let firstInvalidId: string | null = null
-  for (const item of results.value) {
-    if (!item.instruction.trim() || !item.output.trim()) {
-      item.error = 'Instruction 和 Output 不能为空'
-      item.status = 'invalid'
-      firstInvalidId ??= item.id
-    }
-  }
-  if (firstInvalidId) selectedResultId.value = firstInvalidId
-  return firstInvalidId == null
-}
-
 async function handlePrimaryAction() {
   if (currentStepId.value === 'create') {
     await nextFromCreate()
     return
   }
+  if (currentStepId.value === 'model') {
+    await nextFromModel()
+    return
+  }
   if (currentStepId.value === 'upload') {
     nextFromUpload()
     return
@@ -856,7 +568,7 @@ async function saveTask() {
     return
   }
   dirty.value = false
-  localStorage.removeItem(DRAFT_STORAGE_KEY)
+  localStorage.removeItem(DATA_PROCESS_DRAFT_STORAGE_KEY)
   allowLeave = true
   ElMessage.success('数据处理任务已保存')
   await router.push('/data-process')
@@ -893,7 +605,11 @@ onBeforeRouteLeave(async () => {
   return Boolean(confirmed)
 })
 
-onBeforeUnmount(stopGenerationTimer)
+onBeforeUnmount(() => {
+  stopGenerationTimer()
+  if (connectionTimer) clearTimeout(connectionTimer)
+  if (pullTimer) clearTimeout(pullTimer)
+})
 onMounted(() => {
   restoreDraft()
   modelsStore.load()
@@ -906,9 +622,13 @@ onMounted(() => {
       <div class="wizard-main-inner">
         <div class="wizard-steps-container">
           <div class="custom-wizard-steps">
+            <template v-for="(step, index) in WIZARD_STEPS" :key="step.id">
+              <div 
+                v-if="index !== 0" 
+                class="step-connector"
+                :class="{ 'is-active': currentStep >= index }"
+              ></div>
               <div 
-              v-for="(step, index) in WIZARD_STEPS" 
-              :key="step.id"
                 class="step-item"
                 :class="{ 
                   'is-active': currentStep === index, 
@@ -916,7 +636,6 @@ onMounted(() => {
                 }"
                 :aria-current="currentStep === index ? 'step' : undefined"
               >
-              <div v-if="index !== 0" class="step-connector"></div>
                 <div class="step-node">
                   <div class="step-icon">
                     <i v-if="currentStep > index" class="fa fa-check" />
@@ -927,6 +646,7 @@ onMounted(() => {
                   </div>
                 </div>
               </div>
+            </template>
           </div>
         </div>
 
@@ -939,7 +659,14 @@ onMounted(() => {
             v-model:process-type="processType"
             v-model:structured-options="structuredOptions"
             v-model:unstructured-options="unstructuredOptions"
-            :generation-models="generationModels"
+          />
+
+          <ModelSelectionStep
+            v-else-if="currentStepId === 'model'"
+            ref="modelSelectionRef"
+            :options="modelSelectionOptions"
+            :models="generationModels"
+            @update:options="updateModelSelectionOptions"
           />
 
           <SourceUploadStep
@@ -1023,198 +750,4 @@ onMounted(() => {
   <AppConfirmDialog ref="confirmDialogRef" />
 </template>
 
-<style scoped lang="scss">
+<style scoped lang="scss" src="./create/data-process-create.scss"></style>
-.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;
-  background-color: #e2e8f0;
-  margin: 0 16px;
-  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;
-  border-radius: 50%;
-  border: 2px solid #cbd5e1;
-  background-color: #fff;
-  color: #64748b;
-  font-size: 13px;
-  font-weight: 650;
-  transition: all 0.3s;
-}
-
-.step-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: #64748b;
-  white-space: nowrap;
-}
-
-/* State: Active */
-.step-item.is-active {
-  .step-icon {
-    border-color: #5146e5;
-    background-color: #eef2ff;
-    color: #5146e5;
-  }
-  .step-title {
-    color: #1e293b;
-  }
-}
-
-/* State: Completed */
-.step-item.is-completed {
-  .step-icon {
-    background-color: #5146e5;
-    border-color: #5146e5;
-    color: #fff;
-  }
-  .step-title {
-    color: #1e293b;
-  }
-}
-
-.wizard-content {
-  min-height: 400px;
-}
-
-.wizard-footer {
-  flex-shrink: 0;
-  height: 64px;
-  background: #ffffff;
-  border-top: 1px solid #e2e8f0;
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  align-items: center;
-  padding: 0 32px;
-  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;
-  }
-}
-</style>

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"

frontend/src/views/data-process/create/DatasetSplitEditor.vue

@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { DatasetSplitOptions } from './types'
+
+const props = withDefaults(defineProps<{
+  modelValue: DatasetSplitOptions
+  ariaLabelPrefix?: string
+}>(), {
+  ariaLabelPrefix: '',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: DatasetSplitOptions]
+}>()
+
+const splitTotal = computed(() => {
+  const { train, validation, test } = props.modelValue
+  return train + validation + test
+})
+
+function updateField(field: keyof DatasetSplitOptions, value: number | undefined) {
+  emit('update:modelValue', {
+    ...props.modelValue,
+    [field]: Math.min(100, Math.max(0, Number(value) || 0)),
+  })
+}
+
+function ariaLabel(label: string) {
+  return `${props.ariaLabelPrefix}${label}比例`
+}
+</script>
+
+<template>
+  <div class="generation-option-row dataset-split-row">
+    <div class="generation-option-copy">
+      <strong>数据集划分</strong>
+      <small>按比例将生成后的问答对随机划分为训练集、验证集和测试集</small>
+    </div>
+    <div class="dataset-split-config">
+      <div class="dataset-split-grid">
+        <label class="dataset-split-field">
+          <span>训练集</span>
+          <span class="dataset-split-input">
+            <el-input-number
+              :model-value="modelValue.train"
+              :min="0"
+              :max="100"
+              :step="1"
+              :precision="0"
+              controls-position="right"
+              :aria-label="ariaLabel('训练集')"
+              @update:model-value="updateField('train', $event)"
+            />
+            <span>%</span>
+          </span>
+        </label>
+        <label class="dataset-split-field">
+          <span>验证集</span>
+          <span class="dataset-split-input">
+            <el-input-number
+              :model-value="modelValue.validation"
+              :min="0"
+              :max="100"
+              :step="1"
+              :precision="0"
+              controls-position="right"
+              :aria-label="ariaLabel('验证集')"
+              @update:model-value="updateField('validation', $event)"
+            />
+            <span>%</span>
+          </span>
+        </label>
+        <label class="dataset-split-field">
+          <span>测试集</span>
+          <span class="dataset-split-input">
+            <el-input-number
+              :model-value="modelValue.test"
+              :min="0"
+              :max="100"
+              :step="1"
+              :precision="0"
+              controls-position="right"
+              :aria-label="ariaLabel('测试集')"
+              @update:model-value="updateField('test', $event)"
+            />
+            <span>%</span>
+          </span>
+        </label>
+      </div>
+      <div class="dataset-split-summary" :class="{ 'is-invalid': splitTotal !== 100 }">
+        <span>总计 {{ splitTotal }}%</span>
+        <span v-if="splitTotal !== 100" role="alert">
+          训练集、验证集和测试集比例总和必须为 100%
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.generation-option-row {
+  display: flex;
+  min-height: 64px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 12px 14px;
+  box-sizing: border-box;
+  border: 1px solid #e2e5ec;
+  border-radius: 8px;
+}
+
+.generation-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;
+  }
+}
+
+.dataset-split-row {
+  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: 12px;
+}
+
+.dataset-split-field {
+  display: grid;
+  gap: 7px;
+  color: #5f6878;
+  font-size: 12px;
+}
+
+.dataset-split-input {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  :deep(.el-input-number) {
+    width: 100%;
+  }
+}
+
+.dataset-split-summary {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  color: #2ca66a;
+  font-size: 12px;
+
+  &.is-invalid {
+    color: #dc2626;
+  }
+}
+
+@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);
+  }
+
+  .dataset-split-summary {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
+</style>

frontend/src/views/data-process/create/GenerationOptionsPanel.vue

@@ -5,13 +5,11 @@ import type { GenerationControlOptions } from './types'
 
 const props = defineProps<{
   options: GenerationControlOptions
-  models: ModelItem[]
+  models?: ModelItem[]
   section: 'model' | 'quality'
   validationMessage?: string
 }>()
 
-const advancedModelSettingsOpen = ref(false)
-
 const emit = defineEmits<{
   'update:options': [value: GenerationControlOptions]
 }>()
@@ -61,7 +59,7 @@ function sectionValidationMessage() {
         @update:model-value="updateField('generationModelId', $event)"
       >
         <el-option
-          v-for="model in models"
+          v-for="model in models || []"
           :key="model.id"
           :label="model.name"
           :value="model.id"
@@ -95,24 +93,10 @@ function sectionValidationMessage() {
         @update:model-value="updateField('generationPrompt', $event)"
       />
       <div class="prompt-variables-hint">
-        提示：可在文本中通过 <code>{{ content }}</code> 引用当前正在处理的数据内容。
+        提示：可在文本中通过 <code v-text="'{{ content }}'" /> 引用当前正在处理的数据内容。
       </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>
@@ -157,7 +141,6 @@ function sectionValidationMessage() {
         @update:model-value="updateField('jsonMode', Boolean($event))"
       />
     </div>
-    </div>
 
     <p v-if="sectionValidationMessage()" class="generation-validation-message" role="alert">
       {{ sectionValidationMessage() }}
@@ -251,7 +234,22 @@ function sectionValidationMessage() {
 .model-config-group {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 20px;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.model-config-group .advanced-settings-grid {
+  grid-template-columns: 1fr;
+  gap: 20px;
+}
+
+.model-config-group .config-field {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
 }
 
 .model-field {
@@ -297,61 +295,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 +344,8 @@ function sectionValidationMessage() {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 20px;
+  gap: 16px;
-  padding: 14px;
+  padding: 12px 14px;
   background: #fff;
   border: 1px solid #e2e5ec;
   border-radius: 8px;

frontend/src/views/data-process/create/ModelSelectionStep.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import type { ModelItem } from '@/types'
+import type { GenerationControlOptions } from './types'
+import GenerationOptionsPanel from './GenerationOptionsPanel.vue'
+
+const props = defineProps<{
+  options: GenerationControlOptions
+  models: ModelItem[]
+}>()
+
+const emit = defineEmits<{
+  'update:options': [value: GenerationControlOptions]
+}>()
+
+const validationAttempted = ref(false)
+const modelValidationMessage = computed(() => (
+  props.options.generationModelId === '' ? '请选择数据生成模型' : ''
+))
+
+function validate() {
+  validationAttempted.value = true
+  if (!modelValidationMessage.value) return true
+  ElMessage.error(modelValidationMessage.value)
+  return false
+}
+
+defineExpose({ validate })
+</script>
+
+<template>
+  <section class="model-selection-step" aria-labelledby="model-selection-title">
+    <div class="form-section">
+      <div class="section-title-row">
+        <div>
+          <h3 id="model-selection-title">大模型选择</h3>
+          <p>选择本次数据生成使用的模型，并设置统一的输出要求</p>
+        </div>
+      </div>
+
+      <div class="model-form-content">
+        <GenerationOptionsPanel
+          :options="options"
+          :models="models"
+          section="model"
+          :validation-message="validationAttempted ? modelValidationMessage : ''"
+          @update:options="emit('update:options', $event)"
+        />
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.model-selection-step {
+  width: 100%;
+}
+
+.form-section {
+  padding: 0 0 26px;
+  margin-bottom: 26px;
+  border-bottom: 1px solid #edf0f5;
+}
+
+.section-title-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+
+  h3 {
+    margin: 0 0 5px;
+    color: #2f3747;
+    font-size: 15px;
+    font-weight: 650;
+  }
+
+  p {
+    margin: 0;
+    color: #8a93a3;
+    font-size: 12px;
+    line-height: 1.6;
+  }
+}
+
+.model-form-content {
+  margin-top: 16px;
+}
+</style>

frontend/src/views/data-process/create/SourceUploadStep.vue

@@ -1,18 +1,11 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import type { UploadFile } from 'element-plus'
-import type { ExternalDataSource, ProcessType } from './types'
+import type { ExternalDataSource, ProcessType, UploadedDataFile } from './types'
-
-interface UploadedSourceFile {
-  uid: string | number
-  name: string
-  size: number
-  count: number
-}
 
 const props = defineProps<{
   processType: ProcessType
-  uploadedFiles: UploadedSourceFile[]
+  uploadedFiles: UploadedDataFile[]
   externalSource: ExternalDataSource
   externalPulling: boolean
   externalConnected: boolean

frontend/src/views/data-process/create/StructuredOptionsPanel.vue

@@ -0,0 +1,240 @@
+<script setup lang="ts">
+import type {
+  GenerationControlOptions,
+  PreprocessOption,
+  StructuredProcessOptions,
+} from './types'
+import DatasetSplitEditor from './DatasetSplitEditor.vue'
+import GenerationOptionsPanel from './GenerationOptionsPanel.vue'
+
+const props = defineProps<{
+  options: StructuredProcessOptions
+  validationAttempted: boolean
+  qualityValidationMessage: string
+}>()
+
+const emit = defineEmits<{
+  'update:options': [value: StructuredProcessOptions]
+}>()
+
+const PREPROCESS_OPTIONS: Array<{
+  value: PreprocessOption
+  label: string
+  description: string
+}> = [
+  { value: 'clean_invalid', label: '清理无效数据', description: '处理空行、空列和残缺行' },
+  { value: 'detect_structure', label: '识别表格结构', description: '识别表头、多级表头和合并单元格' },
+  { value: 'deduplicate', label: '重复数据去重', description: '删除完全重复或关键字段重复的数据' },
+  { value: 'normalize_format', label: '数据格式标准化', description: '统一日期、数字、单位和枚举值格式' },
+  { value: 'filter_anomaly', label: '异常数据过滤', description: '过滤乱码、无效内容和异常记录' },
+  { value: 'desensitize', label: '敏感信息脱敏', description: '处理姓名、手机号、邮箱等敏感信息' },
+]
+
+function updateField<K extends keyof StructuredProcessOptions>(
+  field: K,
+  value: StructuredProcessOptions[K],
+) {
+  emit('update:options', { ...props.options, [field]: value })
+}
+
+function updateGenerationOptions(value: GenerationControlOptions) {
+  emit('update:options', { ...props.options, ...value })
+}
+
+function updatePreprocessOptions(value: Array<string | number | boolean>) {
+  const allowedValues = new Set(PREPROCESS_OPTIONS.map((option) => option.value))
+  const preprocessOptions = value.filter(
+    (option): option is PreprocessOption => typeof option === 'string' && allowedValues.has(option as PreprocessOption),
+  )
+  updateField('preprocessOptions', preprocessOptions)
+}
+</script>
+
+<template>
+  <div class="form-section structured-options-section">
+    <div class="section-title-row">
+      <div>
+        <h3>预处理选项</h3>
+        <p>选择在生成问答对之前需要执行的数据处理方式</p>
+      </div>
+    </div>
+    <el-checkbox-group
+      :model-value="options.preprocessOptions"
+      class="preprocess-option-grid"
+      @update:model-value="updatePreprocessOptions"
+    >
+      <el-checkbox
+        v-for="option in PREPROCESS_OPTIONS"
+        :key="option.value"
+        :value="option.value"
+        class="preprocess-option"
+      >
+        <span class="preprocess-option-copy">
+          <strong>{{ option.label }}</strong>
+          <small>{{ option.description }}</small>
+        </span>
+      </el-checkbox>
+    </el-checkbox-group>
+  </div>
+
+  <div class="form-section generation-options-section">
+    <div class="section-title-row">
+      <div>
+        <h3>生成选项</h3>
+        <p>配置每条结构化记录生成问答对的方式和数量</p>
+      </div>
+    </div>
+    <div class="generation-option-list">
+      <GenerationOptionsPanel
+        :options="options"
+        section="quality"
+        :validation-message="validationAttempted ? qualityValidationMessage : ''"
+        @update:options="updateGenerationOptions"
+      />
+
+      <div class="generation-option-row">
+        <div class="generation-option-copy">
+          <strong>每行生成数量</strong>
+          <small>每行结构化数据生成的问答对数量</small>
+        </div>
+        <el-input-number
+          :model-value="options.qaPairsPerRow"
+          :min="1"
+          :max="5"
+          :step="1"
+          controls-position="right"
+          @update:model-value="updateField('qaPairsPerRow', Number($event) || 1)"
+        />
+      </div>
+      <DatasetSplitEditor
+        :model-value="options.datasetSplit"
+        @update:model-value="updateField('datasetSplit', $event)"
+      />
+    </div>
+  </div>
+
+</template>
+
+<style scoped lang="scss">
+.form-section {
+  padding: 0 0 26px;
+  margin-bottom: 26px;
+  border-bottom: 1px solid #edf0f5;
+
+  &:last-child {
+    margin-bottom: 0;
+    border-bottom: 0;
+  }
+
+  h3 {
+    margin: 0 0 16px;
+    color: #2f3747;
+    font-size: 15px;
+    font-weight: 650;
+  }
+}
+
+.section-title-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+
+  h3 {
+    margin-bottom: 5px;
+  }
+
+  p {
+    margin: 0;
+    color: #8a93a3;
+    font-size: 12px;
+  }
+}
+
+.preprocess-option-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.preprocess-option {
+  display: flex;
+  gap: 10px;
+  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,
+.generation-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;
+  }
+}
+
+.generation-option-list {
+  display: grid;
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.generation-option-row {
+  display: flex;
+  min-height: 64px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 12px 14px;
+  box-sizing: border-box;
+  border: 1px solid #e2e5ec;
+  border-radius: 8px;
+}
+
+@media (max-width: 900px) {
+  .preprocess-option-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .generation-option-row {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
+</style>

frontend/src/views/data-process/create/UnstructuredOptionsPanel.vue

@@ -0,0 +1,512 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type {
+  ChunkMethod,
+  GenerationControlOptions,
+  UnstructuredPreprocessOption,
+  UnstructuredProcessOptions,
+} from './types'
+import DatasetSplitEditor from './DatasetSplitEditor.vue'
+import GenerationOptionsPanel from './GenerationOptionsPanel.vue'
+
+const props = defineProps<{
+  options: UnstructuredProcessOptions
+  validationAttempted: boolean
+  qualityValidationMessage: string
+  chunkValidationMessage: string
+}>()
+
+const emit = defineEmits<{
+  'update:options': [value: UnstructuredProcessOptions]
+}>()
+
+const SMART_PREPROCESS_OPTIONS: UnstructuredPreprocessOption[] = [
+  'clean_invalid_content',
+  'detect_document_structure',
+  'merge_short_content',
+  'filter_low_quality',
+  'deduplicate_content',
+  'preserve_context',
+]
+
+const CHUNK_METHODS: Array<{ value: ChunkMethod; label: string }> = [
+  { value: 'semantic', label: '自动语义切分' },
+  { value: 'heading', label: '按标题和段落' },
+  { value: 'fixed', label: '按固定长度' },
+  { value: 'custom', label: '自定义分隔符' },
+]
+
+const UNSTRUCTURED_NUMBER_LIMITS = {
+  chunkSize: { min: 200, max: 2000 },
+  chunkOverlap: { min: 0, max: 500 },
+  minChunkSize: { min: 20, max: 500 },
+  qaPairsPerChunk: { min: 1, max: 3 },
+} as const
+
+type UnstructuredNumberField = keyof typeof UNSTRUCTURED_NUMBER_LIMITS
+
+const smartPreprocessEnabled = computed(() => SMART_PREPROCESS_OPTIONS.every(
+  (option) => props.options.preprocessOptions.includes(option),
+))
+
+const desensitizeEnabled = computed(() => props.options.preprocessOptions.includes('desensitize'))
+
+const preserveSpecialContentEnabled = computed(() => (
+  props.options.preserveTables
+  && props.options.preserveCodeBlocks
+  && props.options.preserveLists
+))
+
+function updateField<K extends keyof UnstructuredProcessOptions>(
+  field: K,
+  value: UnstructuredProcessOptions[K],
+) {
+  emit('update:options', { ...props.options, [field]: value })
+}
+
+function updateGenerationOptions(value: GenerationControlOptions) {
+  emit('update:options', { ...props.options, ...value })
+}
+
+function updateSmartPreprocess(value: string | number | boolean) {
+  const enabled = Boolean(value)
+  const remainingOptions = props.options.preprocessOptions.filter(
+    (option) => !SMART_PREPROCESS_OPTIONS.includes(option),
+  )
+  updateField(
+    'preprocessOptions',
+    enabled ? [...SMART_PREPROCESS_OPTIONS, ...remainingOptions] : remainingOptions,
+  )
+}
+
+function updateDesensitize(value: string | number | boolean) {
+  const preprocessOptions: UnstructuredPreprocessOption[] = props.options.preprocessOptions.filter(
+    (option) => option !== 'desensitize',
+  )
+  if (Boolean(value)) preprocessOptions.push('desensitize')
+  updateField('preprocessOptions', preprocessOptions)
+}
+
+function updateSpecialContentProtection(value: string | number | boolean) {
+  const enabled = Boolean(value)
+  emit('update:options', {
+    ...props.options,
+    preserveTables: enabled,
+    preserveCodeBlocks: enabled,
+    preserveLists: enabled,
+  })
+}
+
+function updateUnstructuredNumber(field: UnstructuredNumberField, value: number | undefined) {
+  const limits = UNSTRUCTURED_NUMBER_LIMITS[field]
+  const parsedValue = Number(value)
+  const nextValue = Number.isFinite(parsedValue) ? parsedValue : limits.min
+  updateField(field, Math.min(limits.max, Math.max(limits.min, nextValue)))
+}
+
+function revealValidation() {
+  // Advanced settings are now flattened, no need to open toggle
+}
+
+defineExpose({ revealValidation })
+</script>
+
+<template>
+  <div class="form-section unstructured-options-section">
+    <div class="section-title-row">
+      <div>
+        <h3>预处理选项</h3>
+        <p>默认使用推荐策略，只需决定是否需要脱敏</p>
+      </div>
+    </div>
+    <div class="preprocess-option-grid">
+      <label class="preprocess-option" :class="{ 'is-checked': smartPreprocessEnabled }">
+        <el-checkbox
+          :model-value="smartPreprocessEnabled"
+          @update:model-value="updateSmartPreprocess"
+        />
+        <span class="preprocess-option-copy">
+          <strong>智能预处理</strong>
+          <small>自动清理、解析、去重及保留上下文</small>
+        </span>
+      </label>
+
+      <label class="preprocess-option" :class="{ 'is-checked': desensitizeEnabled }">
+        <el-checkbox
+          :model-value="desensitizeEnabled"
+          @update:model-value="updateDesensitize"
+        />
+        <span class="preprocess-option-copy">
+          <strong>敏感信息脱敏</strong>
+          <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>
+
+  <div class="form-section chunk-options-section">
+    <div class="section-title-row">
+      <div>
+        <h3>切分选项</h3>
+        <p>以语义完整为优先，将长文档拆成可独立生成问答的内容块</p>
+      </div>
+    </div>
+
+    <div class="chunk-settings-grid is-basic">
+      <label class="config-field">
+        <span class="config-field-label">切分方式</span>
+        <el-select
+          :model-value="options.chunkMethod"
+          aria-label="切分方式"
+          @update:model-value="updateField('chunkMethod', $event)"
+        >
+          <el-option
+            v-for="method in CHUNK_METHODS"
+            :key="method.value"
+            :label="method.label"
+            :value="method.value"
+          />
+        </el-select>
+        <small>推荐使用自动语义切分，在长度限制内优先保留完整句段</small>
+      </label>
+
+      <label class="config-field">
+        <span class="config-field-label">切片长度</span>
+        <span class="unit-input">
+          <el-input-number
+            :model-value="options.chunkSize"
+            :min="200"
+            :max="2000"
+            :step="50"
+            :precision="0"
+            controls-position="right"
+            aria-label="切片长度"
+            @update:model-value="updateUnstructuredNumber('chunkSize', $event)"
+          />
+          <span>Token</span>
+        </span>
+        <small>单个切片的目标上限，默认 800 Token</small>
+      </label>
+
+      <label class="config-field">
+        <span class="config-field-label">重叠长度</span>
+        <span class="unit-input">
+          <el-input-number
+            :model-value="options.chunkOverlap"
+            :min="0"
+            :max="500"
+            :step="10"
+            :precision="0"
+            controls-position="right"
+            aria-label="重叠长度"
+            @update:model-value="updateUnstructuredNumber('chunkOverlap', $event)"
+          />
+          <span>Token</span>
+        </span>
+        <small>在相邻切片中最多重复保留的上下文，默认 100 Token</small>
+      </label>
+        <label class="config-field">
+          <span class="config-field-label">最小切片长度</span>
+          <span class="unit-input">
+            <el-input-number
+              :model-value="options.minChunkSize"
+              :min="20"
+              :max="500"
+              :step="10"
+              :precision="0"
+              controls-position="right"
+              aria-label="最小切片长度"
+              @update:model-value="updateUnstructuredNumber('minChunkSize', $event)"
+            />
+            <span>Token</span>
+          </span>
+          <small>过短的尾部内容会尽量并入前一个切片</small>
+        </label>
+
+        <label v-if="options.chunkMethod === 'custom'" class="config-field">
+          <span class="config-field-label">自定义分隔符</span>
+          <el-input
+            :model-value="options.customDelimiter"
+            maxlength="40"
+            show-word-limit
+            placeholder="例如：--- 或 ###"
+            aria-label="自定义分隔符"
+            @update:model-value="updateField('customDelimiter', $event)"
+          />
+          <small>系统会优先在分隔符位置结束当前切片</small>
+        </label>
+    </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">
+    <div class="section-title-row">
+      <div>
+        <h3>生成选项</h3>
+        <p>只保留会直接影响输出的核心设置</p>
+      </div>
+    </div>
+    <div class="generation-option-list">
+      <GenerationOptionsPanel
+        :options="options"
+        section="quality"
+        :validation-message="validationAttempted ? qualityValidationMessage : ''"
+        @update:options="updateGenerationOptions"
+      />
+
+
+      <div class="generation-option-row">
+        <div class="generation-option-copy">
+          <strong>每个切片生成数量</strong>
+          <small>每个内容切片最多生成 3 个不同角度的问答对</small>
+        </div>
+        <el-input-number
+          :model-value="options.qaPairsPerChunk"
+          :min="1"
+          :max="3"
+          :step="1"
+          :precision="0"
+          controls-position="right"
+          aria-label="每个切片生成数量"
+          @update:model-value="updateUnstructuredNumber('qaPairsPerChunk', $event)"
+        />
+      </div>
+
+      <DatasetSplitEditor
+        :model-value="options.datasetSplit"
+        aria-label-prefix="非结构化"
+        @update:model-value="updateField('datasetSplit', $event)"
+      />
+    </div>
+  </div>
+
+</template>
+
+<style scoped lang="scss">
+.form-section {
+  padding: 0 0 26px;
+  margin-bottom: 26px;
+  border-bottom: 1px solid #edf0f5;
+
+  &:last-child {
+    margin-bottom: 0;
+    border-bottom: 0;
+  }
+
+  h3 {
+    margin: 0 0 16px;
+    color: #2f3747;
+    font-size: 15px;
+    font-weight: 650;
+  }
+}
+
+.section-title-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+
+  h3 {
+    margin-bottom: 5px;
+  }
+
+  p {
+    margin: 0;
+    color: #8a93a3;
+    font-size: 12px;
+  }
+}
+
+.generation-option-list {
+  display: grid;
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.preprocess-option-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.preprocess-option {
+  display: flex;
+  gap: 10px;
+  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;
+  }
+}
+
+.generation-option-row {
+  display: flex;
+  min-height: 64px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 12px 14px;
+  box-sizing: border-box;
+  border: 1px solid #e2e5ec;
+  border-radius: 8px;
+}
+
+.generation-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;
+  }
+}
+
+.chunk-settings-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.config-field {
+  display: grid;
+  align-content: start;
+  gap: 8px;
+  min-width: 0;
+  padding: 14px;
+  color: #344054;
+  background: #fff;
+  border: 1px solid #e2e5ec;
+  border-radius: 8px;
+
+  > small {
+    color: #8a93a3;
+    font-size: 12px;
+    line-height: 1.5;
+  }
+
+  :deep(.el-select),
+  :deep(.el-input) {
+    width: 100%;
+  }
+}
+
+.config-field-label {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.unit-input {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #7b8495;
+  font-size: 12px;
+
+  :deep(.el-input-number) {
+    width: 100%;
+  }
+}
+
+.option-validation-message {
+  display: block;
+  margin: 8px 0 0;
+  color: #dc2626;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.chunk-estimation-note {
+  margin: 9px 0 0;
+  color: #8a93a3;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+@media (max-width: 900px) {
+  .chunk-settings-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .generation-option-row {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .compact-option-list .generation-option-row {
+    align-items: center;
+    flex-direction: row;
+  }
+
+  .preprocess-option-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+</style>

frontend/src/views/data-process/create/data-process-create.scss

@@ -0,0 +1,211 @@
+.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: 1040px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.step-item {
+  display: flex;
+  align-items: center;
+  flex: none;
+}
+
+.step-connector {
+  flex: 1;
+  height: 2px;
+  margin: 0 16px;
+  background-color: #e2e8f0;
+  transition: background-color 0.3s;
+}
+
+.step-connector.is-active {
+  background-color: #5146e5;
+}
+
+.step-node {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  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: 1100px) {
+  .custom-wizard-steps {
+    padding: 0;
+  }
+
+  .step-connector {
+    margin: 0 8px;
+  }
+
+  .step-node {
+    gap: 7px;
+  }
+
+  .step-title {
+    display: none;
+  }
+
+  .step-item.is-active .step-title {
+    display: block;
+    font-size: 12px;
+    white-space: nowrap;
+  }
+}
+
+@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;
+    line-height: 1.35;
+  }
+
+  .wizard-footer {
+    padding: 0 20px;
+  }
+}
+
+@media (max-width: 600px) {
+  .step-title {
+    display: none;
+  }
+
+  .step-connector {
+    margin: 0 6px;
+  }
+
+  .wizard-primary-action {
+    min-width: 0;
+  }
+}

frontend/src/views/data-process/create/dataProcessCreateState.ts

@@ -0,0 +1,54 @@
+import type { StructuredProcessOptions, UnstructuredProcessOptions } from './types'
+
+export const DEFAULT_GENERATION_PROMPT = '你是一名专业的数据生成助手。请根据输入内容生成准确、完整、可直接用于模型训练的问答数据。仅输出符合目标格式的内容，答案应事实清晰、语言自然，不要添加分析过程、说明或无关内容。'
+
+export function createDefaultStructuredOptions(): StructuredProcessOptions {
+  return {
+    preprocessOptions: ['clean_invalid', 'detect_structure', 'deduplicate', 'normalize_format'],
+    semanticEnrichment: false,
+    qaPairsPerRow: 1,
+    datasetSplit: { train: 80, validation: 10, test: 10 },
+    generationModelId: '',
+    generationPrompt: DEFAULT_GENERATION_PROMPT,
+    temperature: 0.7,
+    maxTokens: 1024,
+    jsonMode: false,
+    qualityFilterEnabled: false,
+    filterLowQuality: true,
+    filterShortContent: true,
+    minOutputLength: 20,
+  }
+}
+
+export function createDefaultUnstructuredOptions(): UnstructuredProcessOptions {
+  return {
+    preprocessOptions: [
+      'clean_invalid_content',
+      'detect_document_structure',
+      'merge_short_content',
+      'filter_low_quality',
+      'deduplicate_content',
+      'preserve_context',
+    ],
+    chunkMethod: 'semantic',
+    chunkSize: 800,
+    chunkOverlap: 100,
+    minChunkSize: 100,
+    customDelimiter: '',
+    preserveTables: true,
+    preserveCodeBlocks: true,
+    preserveLists: true,
+    semanticEnrichment: false,
+    qaPairsPerChunk: 1,
+    datasetSplit: { train: 80, validation: 10, test: 10 },
+    generationModelId: '',
+    generationPrompt: DEFAULT_GENERATION_PROMPT,
+    temperature: 0.7,
+    maxTokens: 1024,
+    jsonMode: false,
+    qualityFilterEnabled: false,
+    filterLowQuality: true,
+    filterShortContent: true,
+    minOutputLength: 20,
+  }
+}

frontend/src/views/data-process/create/types.ts

@@ -1,6 +1,6 @@
 export type ProcessType = 'structured' | 'unstructured' | 'external'
 
-export type StepId = 'create' | 'upload' | 'preview' | 'generate' | 'results'
+export type StepId = 'create' | 'model' | 'upload' | 'preview' | 'generate' | 'results'
 
 export type PreprocessOption =
   | 'clean_invalid'
@@ -71,6 +71,14 @@ export interface ExternalDataSource {
   limit: number
 }
 
+export interface UploadedDataFile {
+  uid: string | number
+  name: string
+  size: number
+  count: number
+  content: string
+}
+
 export interface SourceLine {
   number: number
   content: string

frontend/src/views/data-process/create/useDataProcessDraft.ts

@@ -0,0 +1,147 @@
+import { nextTick, type Reactive, type Ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import type {
+  ExternalDataSource,
+  ProcessType,
+  StepId,
+  StructuredProcessOptions,
+  UnstructuredProcessOptions,
+} from './types'
+
+export const DATA_PROCESS_DRAFT_STORAGE_KEY = 'yg-data-process-create-draft'
+export const DATA_PROCESS_DRAFT_SCHEMA_VERSION = 6
+
+interface DraftSnapshot {
+  schemaVersion?: number
+  currentStepId?: StepId
+  task?: { name?: string; description?: string }
+  processType?: ProcessType
+  structuredOptions?: Partial<StructuredProcessOptions>
+  unstructuredOptions?: Partial<UnstructuredProcessOptions>
+  externalSource?: Partial<ExternalDataSource>
+}
+
+interface DraftBindings {
+  currentStepId: Readonly<Ref<StepId>>
+  task: Reactive<{ name: string; description: string }>
+  processType: Ref<ProcessType>
+  structuredOptions: Ref<StructuredProcessOptions>
+  unstructuredOptions: Ref<UnstructuredProcessOptions>
+  externalSource: Reactive<ExternalDataSource>
+  restoringDraft: Ref<boolean>
+  dirty: Ref<boolean>
+  goToStep: (stepId: StepId) => void
+}
+
+function sanitizeExternalSource(source: Partial<ExternalDataSource>) {
+  return {
+    type: typeof source.type === 'string' ? source.type : 'mysql',
+    url: typeof source.url === 'string' ? source.url : '',
+    authMode: typeof source.authMode === 'string' ? source.authMode : 'none',
+    username: typeof source.username === 'string' ? source.username : '',
+    limit: Number.isFinite(source.limit) ? Number(source.limit) : 1000,
+  }
+}
+
+function isDraftSnapshot(value: unknown): value is DraftSnapshot {
+  return Boolean(value && typeof value === 'object')
+}
+
+/**
+ * 只持久化可重建的配置。密码、令牌、文件正文、预览与结果都不进入 localStorage。
+ */
+export function useDataProcessDraft(bindings: DraftBindings) {
+  function draftSnapshot(): DraftSnapshot {
+    return {
+      schemaVersion: DATA_PROCESS_DRAFT_SCHEMA_VERSION,
+      currentStepId: bindings.currentStepId.value,
+      task: { ...bindings.task },
+      processType: bindings.processType.value,
+      structuredOptions: {
+        ...bindings.structuredOptions.value,
+        preprocessOptions: [...bindings.structuredOptions.value.preprocessOptions],
+        datasetSplit: { ...bindings.structuredOptions.value.datasetSplit },
+      },
+      unstructuredOptions: {
+        ...bindings.unstructuredOptions.value,
+        preprocessOptions: [...bindings.unstructuredOptions.value.preprocessOptions],
+        datasetSplit: { ...bindings.unstructuredOptions.value.datasetSplit },
+      },
+      externalSource: sanitizeExternalSource(bindings.externalSource),
+    }
+  }
+
+  function writeDraft(showWarning: boolean) {
+    try {
+      localStorage.setItem(DATA_PROCESS_DRAFT_STORAGE_KEY, JSON.stringify(draftSnapshot()))
+    } catch {
+      if (showWarning) ElMessage.warning('草稿保存失败，请检查浏览器存储空间')
+    }
+  }
+
+  function persistDraft() {
+    if (!bindings.restoringDraft.value) writeDraft(true)
+  }
+
+  function restoreDraft() {
+    try {
+      const raw = localStorage.getItem(DATA_PROCESS_DRAFT_STORAGE_KEY)
+      if (!raw) return
+      const snapshot: unknown = JSON.parse(raw)
+      if (!isDraftSnapshot(snapshot)) return
+
+      bindings.restoringDraft.value = true
+      bindings.goToStep('create')
+      bindings.task.name = snapshot.task?.name || ''
+      bindings.task.description = snapshot.task?.description || ''
+      bindings.processType.value = snapshot.processType === 'unstructured' || snapshot.processType === 'external'
+        ? snapshot.processType
+        : 'structured'
+
+      if (snapshot.structuredOptions) {
+        bindings.structuredOptions.value = {
+          ...bindings.structuredOptions.value,
+          ...snapshot.structuredOptions,
+          preprocessOptions: Array.isArray(snapshot.structuredOptions.preprocessOptions)
+            ? snapshot.structuredOptions.preprocessOptions
+            : bindings.structuredOptions.value.preprocessOptions,
+          datasetSplit: {
+            ...bindings.structuredOptions.value.datasetSplit,
+            ...snapshot.structuredOptions.datasetSplit,
+          },
+        }
+      }
+
+      if (snapshot.unstructuredOptions) {
+        bindings.unstructuredOptions.value = {
+          ...bindings.unstructuredOptions.value,
+          ...snapshot.unstructuredOptions,
+          preprocessOptions: Array.isArray(snapshot.unstructuredOptions.preprocessOptions)
+            ? snapshot.unstructuredOptions.preprocessOptions
+            : bindings.unstructuredOptions.value.preprocessOptions,
+          datasetSplit: {
+            ...bindings.unstructuredOptions.value.datasetSplit,
+            ...snapshot.unstructuredOptions.datasetSplit,
+          },
+        }
+      }
+
+      Object.assign(bindings.externalSource, sanitizeExternalSource(snapshot.externalSource || {}), {
+        password: '',
+        token: '',
+      })
+      bindings.dirty.value = false
+
+      nextTick(() => {
+        bindings.restoringDraft.value = false
+        // 立即覆盖 v5 及更早草稿，清除其中可能存在的敏感值和大段正文。
+        writeDraft(false)
+      })
+      ElMessage.info('已恢复上次的任务配置，请重新上传或拉取源数据')
+    } catch {
+      localStorage.removeItem(DATA_PROCESS_DRAFT_STORAGE_KEY)
+    }
+  }
+
+  return { draftSnapshot, persistDraft, restoreDraft }
+}

frontend/src/views/data-process/create/useDataProcessGeneration.ts

@@ -0,0 +1,127 @@
+import { reactive, ref, type Ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { createResults } from './previewModel'
+import type {
+  GenerationState,
+  PreviewItem,
+  ProcessType,
+  ResultItem,
+  StructuredProcessOptions,
+  UnstructuredProcessOptions,
+} from './types'
+
+interface GenerationBindings {
+  previewItems: Ref<PreviewItem[]>
+  processType: Ref<ProcessType>
+  structuredOptions: Ref<StructuredProcessOptions>
+  unstructuredOptions: Ref<UnstructuredProcessOptions>
+  dirty: Ref<boolean>
+}
+
+export function useDataProcessGeneration(bindings: GenerationBindings) {
+  const results = ref<ResultItem[]>([])
+  const selectedResultId = ref<string | null>(null)
+  const generation = reactive<GenerationState>({
+    status: 'idle',
+    progress: 0,
+    message: '确认摘要后即可开始生成，过程中可查看实时进度。',
+  })
+  let generationTimer: ReturnType<typeof setInterval> | null = null
+
+  function stopGenerationTimer() {
+    if (generationTimer) clearInterval(generationTimer)
+    generationTimer = null
+  }
+
+  function resetDownstream() {
+    stopGenerationTimer()
+    generation.status = 'idle'
+    generation.progress = 0
+    generation.message = '确认摘要后即可开始生成，过程中可查看实时进度。'
+    results.value = []
+    selectedResultId.value = null
+  }
+
+  function startGeneration() {
+    stopGenerationTimer()
+    generation.status = 'running'
+    generation.progress = 0
+    generation.message = '正在应用预览修改并生成标准化结果，请稍候。'
+
+    generationTimer = setInterval(() => {
+      generation.progress = Math.min(100, generation.progress + 8)
+      if (generation.progress < 100) return
+
+      stopGenerationTimer()
+      generation.status = 'success'
+      results.value = createResults(
+        bindings.previewItems.value,
+        bindings.processType.value === 'structured'
+          ? bindings.structuredOptions.value
+          : bindings.processType.value === 'unstructured'
+            ? bindings.unstructuredOptions.value
+            : undefined,
+      )
+      generation.message = `已完成 ${results.value.length.toLocaleString()} 条数据处理，可进入结果页检查。`
+      selectedResultId.value = results.value[0]?.id ?? null
+      bindings.dirty.value = true
+      ElMessage.success('数据处理完成')
+    }, 180)
+  }
+
+  function stopGeneration() {
+    stopGenerationTimer()
+    generation.status = 'failed'
+    generation.message = '任务已停止，预览修改仍然保留，可以重新生成。'
+  }
+
+  function updateResultField(id: string, field: 'instruction' | 'input' | 'output', value: string) {
+    const item = results.value.find((entry) => entry.id === id)
+    if (!item) return
+    item[field] = value
+    const valid = item.instruction.trim() && item.output.trim()
+    item.error = valid ? undefined : 'Instruction 和 Output 不能为空'
+    const changed = item.instruction !== item.originalInstruction
+      || item.input !== item.originalInput
+      || item.output !== item.originalOutput
+    item.status = item.error ? 'invalid' : changed ? 'modified' : 'valid'
+    bindings.dirty.value = true
+  }
+
+  function restoreResult(id: string) {
+    const item = results.value.find((entry) => entry.id === id)
+    if (!item) return
+    item.instruction = item.originalInstruction
+    item.input = item.originalInput
+    item.output = item.originalOutput
+    item.error = undefined
+    item.status = 'valid'
+    bindings.dirty.value = true
+  }
+
+  function validateResults() {
+    let firstInvalidId: string | null = null
+    for (const item of results.value) {
+      if (!item.instruction.trim() || !item.output.trim()) {
+        item.error = 'Instruction 和 Output 不能为空'
+        item.status = 'invalid'
+        firstInvalidId ??= item.id
+      }
+    }
+    if (firstInvalidId) selectedResultId.value = firstInvalidId
+    return firstInvalidId == null
+  }
+
+  return {
+    generation,
+    results,
+    selectedResultId,
+    resetDownstream,
+    restoreResult,
+    startGeneration,
+    stopGeneration,
+    stopGenerationTimer,
+    updateResultField,
+    validateResults,
+  }
+}

frontend/src/views/dataset/DatasetPreviewView.vue

@@ -2,10 +2,12 @@
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { onBeforeRouteLeave, useRoute } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import AppConfirmDialog from '@/components/AppConfirmDialog.vue'
 import PageCard from '@/components/PageCard.vue'
 import {
   activateDatasetFileVersion,
   createDatasetFileVersion,
+  deleteDatasetFileVersion,
   downloadFileUrl,
   getDataset,
   getDatasetFileVersionContent,
@@ -14,16 +16,16 @@ import {
 import { DATASET_TYPE_MAP, STORAGE_MAP } from '@/constants'
 import { parseDatasetRecords, updateDatasetRecord } from './datasetRecords'
 import type { DatasetRecord } from './datasetRecords'
+import DatasetVersionBar from './preview/DatasetVersionBar.vue'
+import DatasetRecordTable from './preview/DatasetRecordTable.vue'
+import DatasetRecordEditorDialog from './preview/DatasetRecordEditorDialog.vue'
+import DatasetRawPreview from './preview/DatasetRawPreview.vue'
+import type { EditField } from './preview/types'
 import type { DatasetFile, DatasetItem, DatasetVersion } from '@/types'
 
-interface EditField {
-  key: string
-  value: string
-  isJson: boolean
-}
-
 const route = useRoute()
 const datasetId = route.params.id as string
+const confirmDialogRef = ref<InstanceType<typeof AppConfirmDialog>>()
 
 const loading = ref(false)
 const previewLoading = ref(false)
@@ -32,9 +34,6 @@ const selectedFileId = ref('')
 const previewContent = ref('')
 const baseVersionContent = ref('')
 const previewError = ref('')
-const searchText = ref('')
-const currentPage = ref(1)
-const pageSize = 10
 const editorVisible = ref(false)
 const editingRecord = ref<DatasetRecord | null>(null)
 const editFields = ref<EditField[]>([])
@@ -48,6 +47,8 @@ const activeVersionId = ref('')
 const loadedVersionId = ref('')
 const versionLoading = ref(false)
 const activatingVersion = ref(false)
+const deletingVersion = ref(false)
+const nextVersionNumber = ref(1)
 let versionRequestId = 0
 
 const files = computed<DatasetFile[]>(() => dataset.value?.files || [])
@@ -56,37 +57,8 @@ const totalLines = computed(() => previewContent.value ? previewContent.value.sp
 const recordResult = computed(() => parseDatasetRecords(previewContent.value, selectedFile.value?.name || ''))
 const isRecordFile = computed(() => recordResult.value.supported)
 const records = computed(() => recordResult.value.records)
-const invalidRecordCount = computed(() => records.value.filter((record) => record.kind === 'invalid').length)
-const allTableFieldKeys = computed(() => {
-  const keys = new Set<string>()
-  records.value.forEach((record) => {
-    if (record.kind !== 'object') return
-    Object.keys(record.value as Record<string, unknown>).forEach((key) => keys.add(key))
-  })
-  const preferred = ['instruction', 'question', 'prompt', 'input', 'context', 'output', 'answer', 'response']
-  return [...keys].sort((a, b) => {
-    const rank = (key: string) => {
-      const index = preferred.indexOf(key)
-      return index === -1 ? preferred.length : index
-    }
-    return rank(a) - rank(b)
-  })
-})
-const tableFieldKeys = computed(() => allTableFieldKeys.value.slice(0, 6))
-const hasExtraTableFields = computed(() => allTableFieldKeys.value.length > tableFieldKeys.value.length)
 const viewedVersion = computed(() => versions.value.find((item) => item.id === loadedVersionId.value))
 const isViewingActiveVersion = computed(() => Boolean(loadedVersionId.value) && loadedVersionId.value === activeVersionId.value)
-const nextVersionNumber = computed(() => Math.max(0, ...versions.value.map((item) => item.version)) + 1)
-const filteredRecords = computed(() => {
-  const query = searchText.value.trim().toLowerCase()
-  if (!query) return records.value
-  return records.value.filter((record) => JSON.stringify(record.value).toLowerCase().includes(query))
-})
-const pagedRecords = computed(() => {
-  const start = (currentPage.value - 1) * pageSize
-  return filteredRecords.value.slice(start, start + pageSize)
-})
-const rawPreviewLines = computed(() => previewContent.value ? previewContent.value.split('\n').slice(0, 100) : [])
 const currentDraft = computed(() => editingRecord.value?.kind === 'object'
   ? JSON.stringify(editFields.value)
   : rawDraft.value)
@@ -105,47 +77,10 @@ const createdAt = computed(() => dataset.value?.create_time
   ? new Date(dataset.value.create_time).toLocaleString('zh-CN')
   : '-')
 
-function formatVersionTime(value: string) {
-  return new Date(value).toLocaleString('zh-CN', { hour12: false })
-}
-
-function versionOptionLabel(version: DatasetVersion) {
-  const status = version.id === activeVersionId.value ? '当前版本' : '历史版本'
-  return `V${version.version} · ${status} · ${formatVersionTime(version.create_time)}`
-}
-
 function fileKey(file: DatasetFile) {
   return String(file.id || file.name)
 }
 
-function formatFieldValue(value: unknown) {
-  if (typeof value === 'string') return value || '（空）'
-  return JSON.stringify(value)
-}
-
-function asDatasetRecord(row: unknown) {
-  return row as DatasetRecord
-}
-
-function recordFieldValue(record: DatasetRecord, key: string) {
-  if (record.kind !== 'object') return record.kind === 'invalid' ? record.raw : formatFieldValue(record.value)
-  const data = record.value as Record<string, unknown>
-  return Object.prototype.hasOwnProperty.call(data, key) ? formatFieldValue(data[key]) : '-'
-}
-
-function extraFieldValue(record: DatasetRecord) {
-  if (record.kind !== 'object') return '-'
-  const data = record.value as Record<string, unknown>
-  return allTableFieldKeys.value
-    .filter((key) => !tableFieldKeys.value.includes(key) && Object.prototype.hasOwnProperty.call(data, key))
-    .map((key) => `${key}: ${formatFieldValue(data[key])}`)
-    .join('；') || '-'
-}
-
-function recordRowClassName({ row }: { row: unknown }) {
-  return asDatasetRecord(row).kind === 'invalid' ? 'record-table-row-invalid' : ''
-}
-
 async function loadDataset() {
   loading.value = true
   try {
@@ -169,11 +104,14 @@ async function loadVersions(file: DatasetFile) {
     const activeContent = await getDatasetFileVersionContent(fileKey(file), result.active_version_id)
     if (requestId !== versionRequestId) return
     versions.value = result.versions
+    nextVersionNumber.value = result.next_version_number
+      ?? Math.max(0, ...result.versions.map((item) => item.version)) + 1
     activeVersionId.value = result.active_version_id
     selectedVersionId.value = result.active_version_id
     loadedVersionId.value = result.active_version_id
     previewContent.value = activeContent.content
     baseVersionContent.value = activeContent.content
+    resetRecordEditor()
   } catch {
     if (requestId === versionRequestId) previewError.value = '版本内容加载失败，请稍后重试'
   } finally {
@@ -197,8 +135,7 @@ async function handleViewedVersionChange(nextVersionId: string) {
     previewContent.value = result.content
     baseVersionContent.value = result.content
     loadedVersionId.value = result.version.id
-    currentPage.value = 1
+    resetRecordEditor()
-    searchText.value = ''
   } catch {
     if (requestId === versionRequestId) selectedVersionId.value = previousVersionId
   } finally {
@@ -238,6 +175,52 @@ async function activateViewedVersion() {
   }
 }
 
+async function deleteViewedVersion() {
+  if (
+    !selectedFile.value
+    || !viewedVersion.value
+    || isViewingActiveVersion.value
+    || deletingVersion.value
+  ) return
+
+  const targetVersion = viewedVersion.value
+  const confirmed = await confirmDialogRef.value?.open({
+    title: `删除 V${targetVersion.version} 版本？`,
+    message: `删除后无法恢复。当前版本 V${versions.value.find((item) => item.id === activeVersionId.value)?.version || '-'} 不受影响。`,
+    confirmText: '删除版本',
+    cancelText: '取消',
+    tone: 'danger',
+  })
+  if (!confirmed) return
+
+  deletingVersion.value = true
+  versionLoading.value = true
+  try {
+    const result = await deleteDatasetFileVersion(
+      fileKey(selectedFile.value),
+      targetVersion.id,
+      activeVersionId.value,
+    )
+    const activeContent = await getDatasetFileVersionContent(
+      fileKey(selectedFile.value),
+      result.active_version_id,
+    )
+    versions.value = result.versions
+    nextVersionNumber.value = result.next_version_number
+      ?? Math.max(0, ...result.versions.map((item) => item.version)) + 1
+    activeVersionId.value = result.active_version_id
+    selectedVersionId.value = result.active_version_id
+    loadedVersionId.value = result.active_version_id
+    previewContent.value = activeContent.content
+    baseVersionContent.value = activeContent.content
+    resetRecordEditor()
+    ElMessage.success(`V${targetVersion.version} 版本已删除`)
+  } finally {
+    versionLoading.value = false
+    deletingVersion.value = false
+  }
+}
+
 function openRecordEditor(record: DatasetRecord) {
   if (!isViewingActiveVersion.value) {
     ElMessage.warning('历史版本为只读，请先设为当前版本')
@@ -259,6 +242,19 @@ function openRecordEditor(record: DatasetRecord) {
   originalDraft.value = record.kind === 'object' ? JSON.stringify(editFields.value) : rawDraft.value
 }
 
+function resetRecordEditor() {
+  editorVisible.value = false
+  editingRecord.value = null
+  editFields.value = []
+  rawDraft.value = ''
+  originalDraft.value = ''
+}
+
+function updateEditField(index: number, value: string) {
+  const field = editFields.value[index]
+  if (field) field.value = value
+}
+
 async function confirmDiscardChanges(message = '当前存在尚未保存为版本的修改，放弃后将无法恢复。') {
   if (!hasUnsavedChanges.value) return true
   try {
@@ -287,18 +283,11 @@ async function confirmEditorDiscardChanges() {
   }
 }
 
-async function closeRecordEditor() {
+async function closeRecordEditor(done?: () => void) {
   if (savingRecord.value) return
   if (!await confirmEditorDiscardChanges()) return
-  editorVisible.value = false
+  resetRecordEditor()
-  editingRecord.value = null
+  done?.()
-}
-
-async function handleDialogBeforeClose(done: () => void) {
-  if (savingRecord.value) return
-  if (!await confirmEditorDiscardChanges()) return
-  editingRecord.value = null
-  done()
 }
 
 function buildNextRecordValue() {
@@ -330,9 +319,7 @@ async function saveRecord() {
       nextValue,
     )
     previewContent.value = nextContent
-    originalDraft.value = currentDraft.value
+    resetRecordEditor()
-    editorVisible.value = false
-    editingRecord.value = null
     ElMessage.success(`第 ${record.displayIndex} 条修改已暂存`)
   } finally {
     savingRecord.value = false
@@ -361,6 +348,7 @@ async function saveVersion() {
     previewContent.value = result.content
     baseVersionContent.value = result.content
     versions.value = [result.version, ...versions.value]
+    nextVersionNumber.value = result.version.version + 1
     activeVersionId.value = result.version.id
     selectedVersionId.value = result.version.id
     loadedVersionId.value = result.version.id
@@ -370,13 +358,6 @@ async function saveVersion() {
   }
 }
 
-function handleEditorKeydown(event: KeyboardEvent) {
-  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 's') {
-    event.preventDefault()
-    saveRecord()
-  }
-}
-
 function handleBeforeUnload(event: BeforeUnloadEvent) {
   if (!hasUnsavedChanges.value) return
   event.preventDefault()
@@ -419,46 +400,21 @@ onBeforeUnmount(() => window.removeEventListener('beforeunload', handleBeforeUnl
       <div class="overview-item overview-item-wide"><span>创建时间</span><strong>{{ createdAt }}</strong></div>
     </section>
 
-    <section class="version-control-bar" aria-label="数据集版本控制">
+    <DatasetVersionBar
-      <div class="version-selector-group">
-        <label for="dataset-version-select">数据版本</label>
-        <el-select
-          id="dataset-version-select"
       v-model="selectedVersionId"
-          class="version-select"
+      :versions="versions"
-          :loading="versionLoading"
+      :viewed-version="viewedVersion"
-          :disabled="versionLoading || savingRecord"
+      :active-version-id="activeVersionId"
-          aria-label="选择要查看的数据集版本"
+      :is-viewing-active-version="isViewingActiveVersion"
+      :has-pending-version-changes="hasPendingVersionChanges"
+      :version-loading="versionLoading"
+      :saving-record="savingRecord"
+      :activating-version="activatingVersion"
+      :deleting-version="deletingVersion"
       @change="handleViewedVersionChange"
-        >
+      @activate="activateViewedVersion"
-          <el-option
+      @delete="deleteViewedVersion"
-            v-for="version in versions"
-            :key="version.id"
-            :label="versionOptionLabel(version)"
-            :value="version.id"
     />
-        </el-select>
-      </div>
-
-      <div class="version-status" role="status" aria-live="polite">
-        <template v-if="viewedVersion">
-          <el-tag v-if="isViewingActiveVersion" type="success">V{{ viewedVersion.version }} · 当前版本</el-tag>
-          <el-tag v-else type="info">V{{ viewedVersion.version }} · 历史版本（只读）</el-tag>
-          <el-tag v-if="hasPendingVersionChanges" type="warning">有待保存修改</el-tag>
-          <span>{{ viewedVersion.description || '无版本说明' }} · {{ formatVersionTime(viewedVersion.create_time) }}</span>
-        </template>
-      </div>
-
-      <el-button
-        v-if="viewedVersion && !isViewingActiveVersion"
-        type="primary"
-        :loading="activatingVersion"
-        @click="activateViewedVersion"
-      >
-        <i class="fa fa-check-circle" />
-        设为当前版本
-      </el-button>
-    </section>
 
     <el-alert
       v-if="viewedVersion && !isViewingActiveVersion"
@@ -508,78 +464,19 @@ onBeforeUnmount(() => window.removeEventListener('beforeunload', handleBeforeUnl
           </div>
           <div v-else-if="!previewContent" class="viewer-state"><i class="fa fa-file-o" aria-hidden="true" /><span>当前文件暂无可预览内容</span></div>
 
-          <div v-else-if="isRecordFile" class="records-viewer">
+          <DatasetRecordTable
-            <div class="records-toolbar">
+            v-else-if="isRecordFile"
-              <div><strong>样本数据</strong><span>共 {{ records.length.toLocaleString() }} 条</span><el-tag v-if="invalidRecordCount" size="small" type="danger">{{ invalidRecordCount }} 条格式错误</el-tag></div>
+            :records="records"
-              <el-input v-model="searchText" class="record-search" clearable placeholder="搜索样本内容" aria-label="搜索样本内容" @input="currentPage = 1">
+            :is-viewing-active-version="isViewingActiveVersion"
-                <template #prefix><i class="fa fa-search" /></template>
+            :version-id="loadedVersionId"
-              </el-input>
+            @edit="openRecordEditor"
-            </div>
+          />
 
-            <div v-if="!filteredRecords.length" class="viewer-state record-empty-state"><i class="fa fa-search" aria-hidden="true" /><span>没有找到匹配的样本</span></div>
+          <DatasetRawPreview
-            <div v-else class="record-table-shell" aria-label="数据样本表格">
+            v-else
-              <el-table
+            :content="previewContent"
-                :data="pagedRecords"
+            :file-name="selectedFile?.name"
-                row-key="sourceIndex"
+          />
-                stripe
-                border
-                class="record-table"
-                :row-class-name="recordRowClassName"
-              >
-                <el-table-column label="序号" width="76" align="center">
-                  <template #default="{ row }">
-                    <div class="table-index">
-                      <strong>{{ asDatasetRecord(row).displayIndex }}</strong>
-                      <small>第 {{ asDatasetRecord(row).sourceIndex + 1 }} 行</small>
-                    </div>
-                  </template>
-                </el-table-column>
-                <el-table-column v-for="fieldKey in tableFieldKeys" :key="fieldKey" :label="fieldKey" min-width="220">
-                  <template #default="{ row }">
-                    <el-tooltip :content="recordFieldValue(asDatasetRecord(row), fieldKey)" placement="top" :show-after="400">
-                      <div class="table-cell-text">{{ recordFieldValue(asDatasetRecord(row), fieldKey) }}</div>
-                    </el-tooltip>
-                  </template>
-                </el-table-column>
-                <el-table-column v-if="hasExtraTableFields" label="其他字段" min-width="240">
-                  <template #default="{ row }">
-                    <el-tooltip :content="extraFieldValue(asDatasetRecord(row))" placement="top" :show-after="400">
-                      <div class="table-cell-text">{{ extraFieldValue(asDatasetRecord(row)) }}</div>
-                    </el-tooltip>
-                  </template>
-                </el-table-column>
-                <el-table-column label="状态" width="96" align="center">
-                  <template #default="{ row }">
-                    <el-tag v-if="asDatasetRecord(row).kind === 'invalid'" size="small" type="danger">格式错误</el-tag>
-                    <el-tag v-else-if="asDatasetRecord(row).kind === 'primitive'" size="small" type="warning">非对象</el-tag>
-                    <el-tag v-else size="small" type="success">正常</el-tag>
-                  </template>
-                </el-table-column>
-                <el-table-column label="操作" width="96" align="center" fixed="right">
-                  <template #default="{ row }">
-                    <el-button
-                      type="primary"
-                      link
-                      :disabled="!isViewingActiveVersion"
-                      :title="isViewingActiveVersion ? '' : '历史版本为只读，请先设为当前版本'"
-                      :aria-label="`${asDatasetRecord(row).kind === 'invalid' ? '修复' : '编辑'}第 ${asDatasetRecord(row).displayIndex} 条数据`"
-                      @click="openRecordEditor(asDatasetRecord(row))"
-                    >
-                      <i :class="asDatasetRecord(row).kind === 'invalid' ? 'fa fa-wrench' : 'fa fa-pencil'" />
-                      {{ asDatasetRecord(row).kind === 'invalid' ? '修复' : '编辑' }}
-                    </el-button>
-                  </template>
-                </el-table-column>
-              </el-table>
-            </div>
-            <div v-if="filteredRecords.length > pageSize" class="records-pagination">
-              <el-pagination v-model:current-page="currentPage" :page-size="pageSize" :total="filteredRecords.length" layout="prev, pager, next" background />
-            </div>
-          </div>
-
-          <div v-else class="code-viewer" tabindex="0" :aria-label="`${selectedFile?.name || ''} 文件内容`">
-            <div v-for="(line, index) in rawPreviewLines" :key="index" class="code-line"><span class="line-number" aria-hidden="true">{{ index + 1 }}</span><code>{{ line || ' ' }}</code></div>
-          </div>
         </div>
 
         <div class="viewer-footer"><span v-if="isRecordFile"><i class="fa fa-list-alt" aria-hidden="true" /> 逐条查看与编辑</span><span v-else><i class="fa fa-eye" aria-hidden="true" /> 文本预览</span><span>UTF-8</span></div>
@@ -590,30 +487,21 @@ onBeforeUnmount(() => window.removeEventListener('beforeunload', handleBeforeUnl
       <span class="empty-icon" aria-hidden="true"><i class="fa fa-folder-open-o" /></span><h2>暂无数据文件</h2><p>该数据集还没有可供预览的文件。</p>
     </section>
 
-    <el-dialog v-model="editorVisible" class="record-editor-dialog" width="min(720px, 92vw)" :title="editingRecord ? `编辑第 ${editingRecord.displayIndex} 条数据` : '编辑数据'" :close-on-click-modal="false" :close-on-press-escape="!savingRecord" :show-close="!savingRecord" :before-close="handleDialogBeforeClose" destroy-on-close>
+    <DatasetRecordEditorDialog
-      <div v-if="editingRecord" class="record-editor" @keydown="handleEditorKeydown">
+      :model-value="editorVisible"
-        <div class="editor-hint">
+      :record="editingRecord"
-          <i class="fa fa-info-circle" aria-hidden="true" />
+      :edit-fields="editFields"
-          当前修改会先暂存；完成多条修改后，点击文件工具栏中的“保存版本”创建 V{{ nextVersionNumber }}。
+      :raw-draft="rawDraft"
-        </div>
+      :saving-record="savingRecord"
-        <el-form v-if="editingRecord.kind === 'object'" label-position="top">
+      :has-draft-changes="hasEditorDraftChanges"
-          <el-form-item v-for="field in editFields" :key="field.key" :label="field.key">
+      :next-version-number="nextVersionNumber"
-            <el-input v-model="field.value" type="textarea" :rows="field.isJson ? 5 : 3" :aria-label="`编辑字段 ${field.key}`" :placeholder="field.isJson ? '请输入合法 JSON' : `请输入 ${field.key}`" />
+      @close="closeRecordEditor"
-            <small v-if="field.isJson" class="field-helper">该字段为对象、数组或数值，请保持合法 JSON 格式。</small>
+      @save="saveRecord"
-          </el-form-item>
+      @update:field="updateEditField"
-        </el-form>
+      @update:raw-draft="rawDraft = $event"
-        <div v-else class="raw-record-editor">
+    />
-          <label for="raw-record-draft">{{ editingRecord.kind === 'invalid' ? '修复 JSON 内容' : 'JSON 内容' }}</label>
+
-          <el-input id="raw-record-draft" v-model="rawDraft" type="textarea" :rows="10" aria-label="编辑当前条 JSON 内容" placeholder="请输入合法 JSON" />
+    <AppConfirmDialog ref="confirmDialogRef" />
-        </div>
-      </div>
-      <template #footer>
-        <div class="record-editor-actions">
-          <span>{{ hasEditorDraftChanges ? '有未暂存修改' : '尚未修改' }} · Ctrl/⌘ + S 暂存</span>
-          <div><el-button :disabled="savingRecord" @click="closeRecordEditor">取消</el-button><el-button type="primary" :loading="savingRecord" :disabled="!hasEditorDraftChanges" @click="saveRecord">暂存修改</el-button></div>
-        </div>
-      </template>
-    </el-dialog>
   </PageCard>
 </template>
 
@@ -715,61 +603,6 @@ onBeforeUnmount(() => window.removeEventListener('beforeunload', handleBeforeUnl
   white-space: nowrap;
 }
 
-.version-control-bar {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  min-height: 64px;
-  margin-bottom: 12px;
-  padding: 10px 14px;
-  box-sizing: border-box;
-  border: 1px solid #dfe5ee;
-  border-radius: 10px;
-  background: #fff;
-}
-
-.version-selector-group {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  flex: 0 0 auto;
-}
-
-.version-selector-group label {
-  color: #344054;
-  font-size: 13px;
-  font-weight: 600;
-}
-
-.version-select {
-  width: 300px;
-}
-
-.version-status {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  gap: 10px;
-  min-width: 0;
-}
-
-.version-status > span {
-  overflow: hidden;
-  color: #7c8799;
-  font-size: 12px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.version-control-bar > .el-button {
-  min-height: 40px;
-  flex: 0 0 auto;
-}
-
-.version-control-bar > .el-button i {
-  margin-right: 6px;
-}
-
 .historical-version-alert {
   margin-bottom: 12px;
 }
@@ -868,153 +701,6 @@ onBeforeUnmount(() => window.removeEventListener('beforeunload', handleBeforeUnl
   background: #fbfcfe;
 }
 
-.records-viewer {
-  min-height: 468px;
-  padding: 16px;
-  box-sizing: border-box;
-}
-
-.records-toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  margin-bottom: 14px;
-}
-
-.records-toolbar > div {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-}
-
-.records-toolbar strong {
-  color: #253047;
-  font-size: 14px;
-}
-
-.records-toolbar span {
-  color: #8a94a6;
-  font-size: 12px;
-}
-
-.record-search {
-  width: 240px;
-}
-
-.record-table-shell {
-  overflow: hidden;
-  border: 1px solid #e4e9f1;
-  border-radius: 8px;
-}
-
-.record-table {
-  width: 100%;
-}
-
-.record-table :deep(.el-table__header th) {
-  height: 44px;
-  background: #f5f7fa;
-  color: #475467;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.record-table :deep(.el-table__cell) {
-  padding: 10px 0;
-}
-
-.record-table :deep(.record-table-row-invalid td) {
-  background: #fff7f7 !important;
-}
-
-.table-index {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  gap: 1px;
-  color: #667085;
-  font-variant-numeric: tabular-nums;
-}
-
-.table-index strong {
-  font-size: 13px;
-  font-weight: 600;
-}
-
-.table-index small {
-  color: #98a2b3;
-  font-size: 10px;
-}
-
-.table-cell-text {
-  display: -webkit-box;
-  overflow: hidden;
-  color: #526076;
-  font-size: 12px;
-  line-height: 1.6;
-  overflow-wrap: anywhere;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-}
-
-.record-table .el-button i {
-  margin-right: 5px;
-}
-
-.records-pagination {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 16px;
-}
-
-.record-empty-state {
-  min-height: 320px;
-}
-
-.code-viewer {
-  height: 100%;
-  max-height: 468px;
-  overflow: auto;
-  padding: 12px 0 18px;
-  outline: none;
-}
-
-.code-viewer:focus-visible {
-  box-shadow: inset 0 0 0 2px var(--el-color-primary-light-5);
-}
-
-.code-line {
-  display: grid;
-  grid-template-columns: 54px minmax(0, 1fr);
-  min-height: 25px;
-  color: #344054;
-  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
-  font-size: 12px;
-  line-height: 1.65;
-}
-
-.code-line:hover {
-  background: #f4f6fa;
-}
-
-.line-number {
-  padding-right: 14px;
-  border-right: 1px solid #edf0f5;
-  color: #a4adbc;
-  font-variant-numeric: tabular-nums;
-  text-align: right;
-  user-select: none;
-}
-
-.code-line code {
-  display: block;
-  min-width: max-content;
-  padding: 0 18px;
-  white-space: pre;
-}
-
 .viewer-state {
   display: flex;
   align-items: center;
@@ -1057,47 +743,6 @@ onBeforeUnmount(() => window.removeEventListener('beforeunload', handleBeforeUnl
   margin-right: 5px;
 }
 
-.editor-hint {
-  margin-bottom: 18px;
-  padding: 10px 12px;
-  border: 1px solid #dbe2ff;
-  border-radius: 8px;
-  background: #f5f7ff;
-  color: #56627a;
-  font-size: 13px;
-}
-
-.editor-hint i {
-  margin-right: 6px;
-  color: var(--primary-color);
-}
-
-.field-helper {
-  margin-top: 5px;
-  color: #8a94a6;
-  line-height: 1.5;
-}
-
-.raw-record-editor label {
-  display: block;
-  margin-bottom: 8px;
-  color: #344054;
-  font-size: 13px;
-  font-weight: 600;
-}
-
-.record-editor-actions {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-}
-
-.record-editor-actions > span {
-  color: #8a94a6;
-  font-size: 12px;
-}
-
 .empty-files {
   display: flex;
   align-items: center;
@@ -1149,18 +794,6 @@ onBeforeUnmount(() => window.removeEventListener('beforeunload', handleBeforeUnl
     grid-template-columns: 1fr;
   }
 
-  .version-control-bar,
-  .version-selector-group,
-  .version-status {
-    align-items: stretch;
-    flex-direction: column;
-  }
-
-  .version-select,
-  .version-control-bar > .el-button {
-    width: 100%;
-  }
-
   .overview-item {
     padding: 0 0 12px;
     border-right: 0;
@@ -1176,22 +809,6 @@ onBeforeUnmount(() => window.removeEventListener('beforeunload', handleBeforeUnl
     align-items: flex-start;
   }
 
-  .records-toolbar,
-  .record-editor-actions {
-    align-items: stretch;
-    flex-direction: column;
-  }
-
-  .record-search {
-    width: 100%;
-  }
-
-  .record-editor-actions > div {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 8px;
-  }
-
   .download-button {
     width: 44px;
     padding: 8px;
@@ -1204,7 +821,4 @@ onBeforeUnmount(() => window.removeEventListener('beforeunload', handleBeforeUnl
   }
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .record-table :deep(.el-table__row) { transition: none; }
-}
 </style>

frontend/src/views/dataset/preview/DatasetRawPreview.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  content: string
+  fileName?: string
+}>()
+
+const lines = computed(() => props.content.split('\n').slice(0, 100))
+</script>
+
+<template>
+  <div class="code-viewer" tabindex="0" :aria-label="`${fileName || ''} 文件内容`">
+    <div v-for="(line, index) in lines" :key="index" class="code-line">
+      <span class="line-number" aria-hidden="true">{{ index + 1 }}</span>
+      <code>{{ line || ' ' }}</code>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.code-viewer {
+  height: 100%;
+  max-height: 468px;
+  overflow: auto;
+  padding: 12px 0 18px;
+  outline: none;
+}
+
+.code-viewer:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--el-color-primary-light-5);
+}
+
+.code-line {
+  display: grid;
+  grid-template-columns: 54px minmax(0, 1fr);
+  min-height: 25px;
+  color: #344054;
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
+  font-size: 12px;
+  line-height: 1.65;
+}
+
+.code-line:hover {
+  background: #f4f6fa;
+}
+
+.line-number {
+  padding-right: 14px;
+  border-right: 1px solid #edf0f5;
+  color: #a4adbc;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  user-select: none;
+}
+
+.code-line code {
+  display: block;
+  min-width: max-content;
+  padding: 0 18px;
+  white-space: pre;
+}
+</style>

frontend/src/views/dataset/preview/DatasetRecordEditorDialog.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import type { DatasetRecord } from '../datasetRecords'
+import type { EditField } from './types'
+
+defineProps<{
+  modelValue: boolean
+  record: DatasetRecord | null
+  editFields: EditField[]
+  rawDraft: string
+  savingRecord: boolean
+  hasDraftChanges: boolean
+  nextVersionNumber: number
+}>()
+
+const emit = defineEmits<{
+  close: [done?: () => void]
+  save: []
+  'update:field': [index: number, value: string]
+  'update:rawDraft': [value: string]
+}>()
+
+function handleBeforeClose(done: () => void) {
+  emit('close', done)
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 's') {
+    event.preventDefault()
+    emit('save')
+  }
+}
+</script>
+
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    class="record-editor-dialog"
+    width="min(720px, 92vw)"
+    :title="record ? `编辑第 ${record.displayIndex} 条数据` : '编辑数据'"
+    :close-on-click-modal="false"
+    :close-on-press-escape="!savingRecord"
+    :show-close="!savingRecord"
+    :before-close="handleBeforeClose"
+    destroy-on-close
+  >
+    <div v-if="record" class="record-editor" @keydown="handleKeydown">
+      <div class="editor-hint">
+        <i class="fa fa-info-circle" aria-hidden="true" />
+        当前修改会先暂存；完成多条修改后，点击文件工具栏中的“保存版本”创建
+        V{{ nextVersionNumber }}。
+      </div>
+      <el-form v-if="record.kind === 'object'" label-position="top">
+        <el-form-item v-for="(field, index) in editFields" :key="field.key" :label="field.key">
+          <el-input
+            :model-value="field.value"
+            type="textarea"
+            :rows="field.isJson ? 5 : 3"
+            :aria-label="`编辑字段 ${field.key}`"
+            :placeholder="field.isJson ? '请输入合法 JSON' : `请输入 ${field.key}`"
+            @update:model-value="emit('update:field', index, $event)"
+          />
+          <small v-if="field.isJson" class="field-helper">
+            该字段为对象、数组或数值，请保持合法 JSON 格式。
+          </small>
+        </el-form-item>
+      </el-form>
+      <div v-else class="raw-record-editor">
+        <label for="raw-record-draft">
+          {{ record.kind === 'invalid' ? '修复 JSON 内容' : 'JSON 内容' }}
+        </label>
+        <el-input
+          id="raw-record-draft"
+          :model-value="rawDraft"
+          type="textarea"
+          :rows="10"
+          aria-label="编辑当前条 JSON 内容"
+          placeholder="请输入合法 JSON"
+          @update:model-value="emit('update:rawDraft', $event)"
+        />
+      </div>
+    </div>
+    <template #footer>
+      <div class="record-editor-actions">
+        <span>{{ hasDraftChanges ? '有未暂存修改' : '尚未修改' }} · Ctrl/⌘ + S 暂存</span>
+        <div>
+          <el-button :disabled="savingRecord" @click="emit('close')">取消</el-button>
+          <el-button
+            type="primary"
+            :loading="savingRecord"
+            :disabled="!hasDraftChanges"
+            @click="emit('save')"
+          >
+            暂存修改
+          </el-button>
+        </div>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped lang="scss">
+.editor-hint {
+  margin-bottom: 18px;
+  padding: 10px 12px;
+  border: 1px solid #dbe2ff;
+  border-radius: 8px;
+  background: #f5f7ff;
+  color: #56627a;
+  font-size: 13px;
+}
+
+.editor-hint i {
+  margin-right: 6px;
+  color: var(--primary-color);
+}
+
+.field-helper {
+  margin-top: 5px;
+  color: #8a94a6;
+  line-height: 1.5;
+}
+
+.raw-record-editor label {
+  display: block;
+  margin-bottom: 8px;
+  color: #344054;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.record-editor-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.record-editor-actions > span {
+  color: #8a94a6;
+  font-size: 12px;
+}
+
+@media (max-width: 680px) {
+  .record-editor-actions {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .record-editor-actions > div {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+  }
+}
+</style>

frontend/src/views/dataset/preview/DatasetRecordTable.vue

@@ -0,0 +1,335 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { DatasetRecord } from '../datasetRecords'
+
+const props = defineProps<{
+  records: DatasetRecord[]
+  isViewingActiveVersion: boolean
+  versionId: string
+}>()
+
+const emit = defineEmits<{
+  edit: [record: DatasetRecord]
+}>()
+
+const pageSize = 10
+const searchText = ref('')
+const currentPage = ref(1)
+
+const allTableFieldKeys = computed(() => {
+  const keys = new Set<string>()
+  props.records.forEach((record) => {
+    if (record.kind !== 'object') return
+    Object.keys(record.value as Record<string, unknown>).forEach((key) => keys.add(key))
+  })
+  const preferred = ['instruction', 'question', 'prompt', 'input', 'context', 'output', 'answer', 'response']
+  return [...keys].sort((a, b) => {
+    const rank = (key: string) => {
+      const index = preferred.indexOf(key)
+      return index === -1 ? preferred.length : index
+    }
+    return rank(a) - rank(b)
+  })
+})
+const tableFieldKeys = computed(() => allTableFieldKeys.value.slice(0, 6))
+const invalidRecordCount = computed(() => props.records.filter((record) => record.kind === 'invalid').length)
+const hasExtraTableFields = computed(() => allTableFieldKeys.value.length > tableFieldKeys.value.length)
+const filteredRecords = computed(() => {
+  const query = searchText.value.trim().toLowerCase()
+  if (!query) return props.records
+  return props.records.filter((record) => JSON.stringify(record.value).toLowerCase().includes(query))
+})
+const pagedRecords = computed(() => {
+  const start = (currentPage.value - 1) * pageSize
+  return filteredRecords.value.slice(start, start + pageSize)
+})
+
+watch(
+  () => props.versionId,
+  () => {
+    searchText.value = ''
+    currentPage.value = 1
+  },
+)
+
+function asDatasetRecord(row: unknown) {
+  return row as DatasetRecord
+}
+
+function formatFieldValue(value: unknown) {
+  if (typeof value === 'string') return value || '（空）'
+  return JSON.stringify(value)
+}
+
+function recordFieldValue(record: DatasetRecord, key: string) {
+  if (record.kind !== 'object') {
+    return record.kind === 'invalid' ? record.raw : formatFieldValue(record.value)
+  }
+  const data = record.value as Record<string, unknown>
+  return Object.prototype.hasOwnProperty.call(data, key) ? formatFieldValue(data[key]) : '-'
+}
+
+function extraFieldValue(record: DatasetRecord) {
+  if (record.kind !== 'object') return '-'
+  const data = record.value as Record<string, unknown>
+  return allTableFieldKeys.value
+    .filter((key) => !tableFieldKeys.value.includes(key) && Object.prototype.hasOwnProperty.call(data, key))
+    .map((key) => `${key}: ${formatFieldValue(data[key])}`)
+    .join('；') || '-'
+}
+
+function recordRowClassName({ row }: { row: unknown }) {
+  return asDatasetRecord(row).kind === 'invalid' ? 'record-table-row-invalid' : ''
+}
+</script>
+
+<template>
+  <div class="records-viewer">
+    <div class="records-toolbar">
+      <div>
+        <strong>样本数据</strong>
+        <span>共 {{ records.length.toLocaleString() }} 条</span>
+        <el-tag v-if="invalidRecordCount" size="small" type="danger">
+          {{ invalidRecordCount }} 条格式错误
+        </el-tag>
+      </div>
+      <el-input
+        v-model="searchText"
+        class="record-search"
+        clearable
+        placeholder="搜索样本内容"
+        aria-label="搜索样本内容"
+        @input="currentPage = 1"
+      >
+        <template #prefix><i class="fa fa-search" /></template>
+      </el-input>
+    </div>
+
+    <div v-if="!filteredRecords.length" class="viewer-state record-empty-state">
+      <i class="fa fa-search" aria-hidden="true" />
+      <span>没有找到匹配的样本</span>
+    </div>
+    <div v-else class="record-table-shell" aria-label="数据样本表格">
+      <el-table
+        :data="pagedRecords"
+        row-key="sourceIndex"
+        stripe
+        border
+        class="record-table"
+        :row-class-name="recordRowClassName"
+      >
+        <el-table-column label="序号" width="76" align="center">
+          <template #default="{ row }">
+            <div class="table-index">
+              <strong>{{ asDatasetRecord(row).displayIndex }}</strong>
+              <small>第 {{ asDatasetRecord(row).sourceIndex + 1 }} 行</small>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-for="fieldKey in tableFieldKeys"
+          :key="fieldKey"
+          :label="fieldKey"
+          min-width="220"
+        >
+          <template #default="{ row }">
+            <el-tooltip
+              :content="recordFieldValue(asDatasetRecord(row), fieldKey)"
+              placement="top"
+              :show-after="400"
+            >
+              <div class="table-cell-text">
+                {{ recordFieldValue(asDatasetRecord(row), fieldKey) }}
+              </div>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="hasExtraTableFields" label="其他字段" min-width="240">
+          <template #default="{ row }">
+            <el-tooltip
+              :content="extraFieldValue(asDatasetRecord(row))"
+              placement="top"
+              :show-after="400"
+            >
+              <div class="table-cell-text">{{ extraFieldValue(asDatasetRecord(row)) }}</div>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="96" align="center">
+          <template #default="{ row }">
+            <el-tag v-if="asDatasetRecord(row).kind === 'invalid'" size="small" type="danger">
+              格式错误
+            </el-tag>
+            <el-tag v-else-if="asDatasetRecord(row).kind === 'primitive'" size="small" type="warning">
+              非对象
+            </el-tag>
+            <el-tag v-else size="small" type="success">正常</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="96" align="center" fixed="right">
+          <template #default="{ row }">
+            <el-button
+              type="primary"
+              link
+              :disabled="!isViewingActiveVersion"
+              :title="isViewingActiveVersion ? '' : '历史版本为只读，请先设为当前版本'"
+              :aria-label="`${asDatasetRecord(row).kind === 'invalid' ? '修复' : '编辑'}第 ${asDatasetRecord(row).displayIndex} 条数据`"
+              @click="emit('edit', asDatasetRecord(row))"
+            >
+              <i :class="asDatasetRecord(row).kind === 'invalid' ? 'fa fa-wrench' : 'fa fa-pencil'" />
+              {{ asDatasetRecord(row).kind === 'invalid' ? '修复' : '编辑' }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div v-if="filteredRecords.length > pageSize" class="records-pagination">
+      <el-pagination
+        v-model:current-page="currentPage"
+        :page-size="pageSize"
+        :total="filteredRecords.length"
+        layout="prev, pager, next"
+        background
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.records-viewer {
+  min-height: 468px;
+  padding: 16px;
+  box-sizing: border-box;
+}
+
+.records-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 14px;
+}
+
+.records-toolbar > div {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.records-toolbar strong {
+  color: #253047;
+  font-size: 14px;
+}
+
+.records-toolbar span {
+  color: #8a94a6;
+  font-size: 12px;
+}
+
+.record-search {
+  width: 240px;
+}
+
+.record-table-shell {
+  overflow: hidden;
+  border: 1px solid #e4e9f1;
+  border-radius: 8px;
+}
+
+.record-table {
+  width: 100%;
+}
+
+.record-table :deep(.el-table__header th) {
+  height: 44px;
+  background: #f5f7fa;
+  color: #475467;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.record-table :deep(.el-table__cell) {
+  padding: 10px 0;
+}
+
+.record-table :deep(.record-table-row-invalid td) {
+  background: #fff7f7 !important;
+}
+
+.table-index {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: 1px;
+  color: #667085;
+  font-variant-numeric: tabular-nums;
+}
+
+.table-index strong {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.table-index small {
+  color: #98a2b3;
+  font-size: 10px;
+}
+
+.table-cell-text {
+  display: -webkit-box;
+  overflow: hidden;
+  color: #526076;
+  font-size: 12px;
+  line-height: 1.6;
+  overflow-wrap: anywhere;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.record-table .el-button i {
+  margin-right: 5px;
+}
+
+.records-pagination {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 16px;
+}
+
+.viewer-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 10px;
+  height: 100%;
+  min-height: 400px;
+  color: #8b96a8;
+  font-size: 13px;
+}
+
+.viewer-state > i {
+  color: #aeb7c5;
+  font-size: 24px;
+}
+
+.record-empty-state {
+  min-height: 320px;
+}
+
+@media (max-width: 680px) {
+  .records-toolbar {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .record-search {
+    width: 100%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .record-table :deep(.el-table__row) { transition: none; }
+}
+</style>

frontend/src/views/dataset/preview/DatasetVersionBar.vue

@@ -0,0 +1,267 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { DatasetVersion } from '@/types'
+
+const props = defineProps<{
+  modelValue: string
+  versions: DatasetVersion[]
+  viewedVersion?: DatasetVersion
+  activeVersionId: string
+  isViewingActiveVersion: boolean
+  hasPendingVersionChanges: boolean
+  versionLoading: boolean
+  savingRecord: boolean
+  activatingVersion: boolean
+  deletingVersion: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  change: [versionId: string]
+  activate: []
+  delete: []
+}>()
+
+type VersionAction = 'activate' | 'delete'
+
+const actionsDisabled = computed(
+  () =>
+    props.versionLoading ||
+    props.savingRecord ||
+    props.activatingVersion ||
+    props.deletingVersion,
+)
+
+const deleteDisabledReason = computed(() => {
+  if (props.viewedVersion?.version === 1) return '初始版本不可删除'
+  if (props.versions.length <= 1) return '至少需要保留一个版本'
+  return ''
+})
+
+const deleteDisabled = computed(
+  () => actionsDisabled.value || Boolean(deleteDisabledReason.value),
+)
+
+function formatVersionTime(value: string) {
+  return new Date(value).toLocaleString('zh-CN', { hour12: false })
+}
+
+function versionOptionLabel(version: DatasetVersion) {
+  const status = version.id === props.activeVersionId ? '当前版本' : '历史版本'
+  return `V${version.version} · ${status} · ${formatVersionTime(version.create_time)}`
+}
+
+function handleVersionChange(versionId: string) {
+  emit('update:modelValue', versionId)
+  emit('change', versionId)
+}
+
+function handleVersionAction(command: VersionAction) {
+  if (actionsDisabled.value) return
+  if (command === 'activate') {
+    emit('activate')
+    return
+  }
+  if (deleteDisabled.value) return
+  emit('delete')
+}
+</script>
+
+<template>
+  <section class="version-control-bar" aria-label="数据集版本控制">
+    <div class="version-selector-group">
+      <label for="dataset-version-select">数据版本</label>
+      <el-select
+        id="dataset-version-select"
+        :model-value="modelValue"
+        class="version-select"
+        :loading="versionLoading"
+        :disabled="versionLoading || savingRecord"
+        aria-label="选择要查看的数据集版本"
+        @change="handleVersionChange"
+      >
+        <el-option
+          v-for="version in versions"
+          :key="version.id"
+          :label="versionOptionLabel(version)"
+          :value="version.id"
+        />
+      </el-select>
+    </div>
+
+    <div class="version-status" role="status" aria-live="polite">
+      <template v-if="viewedVersion">
+        <el-tag v-if="isViewingActiveVersion" type="success">
+          V{{ viewedVersion.version }} · 当前版本
+        </el-tag>
+        <el-tag v-else type="info">V{{ viewedVersion.version }} · 历史版本（只读）</el-tag>
+        <el-tag v-if="hasPendingVersionChanges" type="warning">有待保存修改</el-tag>
+        <span>
+          {{ viewedVersion.description || '无版本说明' }} ·
+          {{ formatVersionTime(viewedVersion.create_time) }}
+        </span>
+      </template>
+    </div>
+
+    <el-dropdown
+      v-if="viewedVersion && !isViewingActiveVersion"
+      class="version-actions"
+      trigger="click"
+      placement="bottom-end"
+      popper-class="version-actions-popper"
+      :disabled="actionsDisabled"
+      @command="handleVersionAction"
+    >
+      <el-button
+        class="version-actions-button"
+        :loading="activatingVersion || deletingVersion"
+        :disabled="actionsDisabled"
+        aria-label="打开历史版本操作菜单"
+      >
+        <i
+          v-if="!activatingVersion && !deletingVersion"
+          class="fa fa-ellipsis-h"
+          aria-hidden="true"
+        />
+      </el-button>
+
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item
+            command="activate"
+            class="version-action-primary"
+            :disabled="actionsDisabled"
+          >
+            <i class="fa fa-check-circle" aria-hidden="true" />
+            设为当前版本
+          </el-dropdown-item>
+          <el-dropdown-item
+            command="delete"
+            class="version-action-danger"
+            :disabled="deleteDisabled"
+            :title="deleteDisabledReason || undefined"
+            divided
+          >
+            <i class="fa fa-trash-o" aria-hidden="true" />
+            删除版本
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.version-control-bar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  min-height: 64px;
+  margin-bottom: 12px;
+  padding: 10px 14px;
+  box-sizing: border-box;
+  border: 1px solid #dfe5ee;
+  border-radius: 10px;
+  background: #fff;
+}
+
+.version-selector-group {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 0 0 auto;
+}
+
+.version-selector-group label {
+  color: #344054;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.version-select {
+  width: 300px;
+}
+
+.version-status {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  gap: 10px;
+  min-width: 0;
+}
+
+.version-status > span {
+  overflow: hidden;
+  color: #7c8799;
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.version-actions {
+  flex: 0 0 auto;
+  line-height: 1;
+}
+
+.version-actions-button {
+  width: 40px;
+  height: 40px;
+  flex: 0 0 auto;
+  padding: 0;
+  border-radius: 10px;
+}
+
+.version-actions-button i {
+  font-size: 16px;
+}
+
+:global(.version-actions-popper .el-dropdown-menu__item) {
+  gap: 8px;
+  min-height: 40px;
+}
+
+:global(.version-actions-popper .el-dropdown-menu) {
+  min-width: 168px;
+}
+
+:global(.version-actions-popper .version-action-primary:not(.is-disabled) i) {
+  color: var(--primary-color);
+}
+
+:global(.version-actions-popper .version-action-danger:not(.is-disabled)) {
+  color: var(--el-color-danger);
+}
+
+:global(.version-actions-popper .version-action-danger:not(.is-disabled):hover) {
+  color: var(--el-color-danger);
+  background: var(--el-color-danger-light-9);
+}
+
+@media (max-width: 680px) {
+  .version-control-bar,
+  .version-selector-group,
+  .version-status {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .version-select,
+  .version-selector-group {
+    width: 100%;
+  }
+
+  .version-status {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .version-status > span {
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+
+  .version-actions {
+    align-self: flex-end;
+  }
+}
+</style>

frontend/src/views/dataset/preview/types.ts

@@ -0,0 +1,5 @@
+export interface EditField {
+  key: string
+  value: string
+  isJson: boolean
+}

frontend/src/views/eval/EvalCreateView.vue

@@ -5,7 +5,9 @@ import { ElMessage } from 'element-plus'
 import PageCard from '@/components/PageCard.vue'
 import EvalTaskSetupStep, { type EvalTaskSetupDraft } from './create/EvalTaskSetupStep.vue'
 import EvalRuleSetupStep, { type EvalRuleSetupDraft } from './create/EvalRuleSetupStep.vue'
-import { createDimension, getDimensionList, startEval } from '@/api/modules/eval'
+import BasicMetricSetupStep, { type BasicMetricSetupDraft } from './create/BasicMetricSetupStep.vue'
+import StartEvalStep from './create/StartEvalStep.vue'
+import { createDimension, startEval } from '@/api/modules/eval'
 import { getTrainedModels, getModelList } from '@/api/modules/model'
 import { getDatasetList } from '@/api/modules/dataset'
 import { getSystemInfo } from '@/api/modules/system'
@@ -19,15 +21,17 @@ const submitting = ref(false)
 const currentStep = ref(0)
 const taskStepRef = ref<StepExposed>()
 const ruleStepRef = ref<StepExposed>()
+const basicMetricStepRef = ref<StepExposed>()
 
 const WIZARD_STEPS = [
   { title: '任务配置', description: '选择模型、算力与评测数据' },
-  { title: '评测规则', description: '选择或创建评测维度' },
+  { title: '大模型评测指标', description: '配置评测模型、方式与标准' },
+  { title: '基础评测指标', description: '选择 BLEU、ROUGE 等参考指标' },
+  { title: '开始评测', description: '确认配置并启动评测任务' },
 ] as const
 
 const trainedModels = ref<TrainedModel[]>([])
 const evalDatasets = ref<DatasetItem[]>([])
-const dimensions = ref<Dimension[]>([])
 const evalModels = ref<ModelItem[]>([])
 const gpus = ref<GpuInfo[]>([])
 const createdDimensionId = ref<string | number>('')
@@ -42,9 +46,6 @@ const taskForm = ref<EvalTaskSetupDraft>({
 })
 
 const ruleForm = ref<EvalRuleSetupDraft>({
-  ruleMode: 'new',
-  dimension_id: '',
-  newDimension: {
   type: '',
   description: '',
   eval_model: '',
@@ -57,11 +58,19 @@ const ruleForm = ref<EvalRuleSetupDraft>({
   score_min: 0,
   score_max: 5,
   pass_threshold: 3,
-  },
+})
+
+const basicMetricForm = ref<BasicMetricSetupDraft>({
+  bleu_enabled: false,
+  bleu_n: 4,
+  rouge_enabled: false,
+  rouge_methods: ['rouge_1', 'rouge_2'],
+  cosine_enabled: false,
+  output_precision: 3,
 })
 
 watch(
-  () => ruleForm.value.newDimension,
+  ruleForm,
   () => {
     createdDimensionId.value = ''
   },
@@ -72,20 +81,18 @@ async function loadData() {
   loading.value = true
   const results = await Promise.allSettled([
     getTrainedModels(),
-    getDimensionList(),
     getDatasetList(),
     getSystemInfo(),
     getModelList(),
   ])
 
   if (results[0].status === 'fulfilled') trainedModels.value = results[0].value?.models || []
-  if (results[1].status === 'fulfilled') dimensions.value = results[1].value || []
+  if (results[1].status === 'fulfilled') {
-  if (results[2].status === 'fulfilled') {
+    evalDatasets.value = (results[1].value || []).filter((dataset) => dataset.type === 'eval')
-    evalDatasets.value = (results[2].value || []).filter((dataset) => dataset.type === 'eval')
   }
-  if (results[3].status === 'fulfilled') gpus.value = results[3].value?.gpu || []
+  if (results[2].status === 'fulfilled') gpus.value = results[2].value?.gpu || []
-  if (results[4].status === 'fulfilled') {
+  if (results[3].status === 'fulfilled') {
-    evalModels.value = (results[4].value || []).filter((model) => model.purpose === 'evaluation')
+    evalModels.value = (results[3].value || []).filter((model) => model.purpose === 'evaluation')
   }
 
   const failedCount = results.filter((result) => result.status === 'rejected').length
@@ -95,25 +102,19 @@ async function loadData() {
   loading.value = false
 }
 
-
-
 function buildDimensionPayload() {
-  const draft = ruleForm.value.newDimension
+  const draft = ruleForm.value
   const payload: Partial<Dimension> = {
     name: `Custom_Dim_${Date.now()}`,
     type: draft.type,
     description: draft.description,
-    eval_model: draft.type === 'text_similarity' ? undefined : draft.eval_model,
+    eval_model: draft.eval_model,
     eval_method: draft.eval_method,
-    eval_prompt: draft.type === 'text_similarity' ? undefined : draft.eval_prompt,
+    eval_prompt: draft.eval_prompt,
     is_active: draft.is_active,
     is_default: draft.is_default,
     create_time: new Date().toISOString(),
   }
-  if (draft.type === 'text_similarity') {
-    payload.bleu_n = draft.bleu_n
-    payload.output_precision = draft.output_precision
-  }
   if (draft.type === 'metric') {
     payload.score_min = draft.score_min
     payload.score_max = draft.score_max
@@ -123,8 +124,6 @@ function buildDimensionPayload() {
 }
 
 async function resolveDimensionId() {
-  if (ruleForm.value.ruleMode === 'baseline') return ''
-  if (ruleForm.value.ruleMode === 'existing') return ruleForm.value.dimension_id
   if (createdDimensionId.value !== '') return createdDimensionId.value
 
   const created = await createDimension(buildDimensionPayload())
@@ -137,24 +136,32 @@ async function resolveDimensionId() {
 
 async function handleSubmit() {
   if (loading.value || submitting.value) return
-  const ruleValid = await ruleStepRef.value?.validate()
-  if (!ruleValid) {
-    ElMessage.warning('请检查并完善评测规则')
-    return
-  }
-
   submitting.value = true
   try {
     const dimensionId = await resolveDimensionId()
     await startEval({
       eval_task_name: taskForm.value.eval_task_name,
-      eval_type: ruleForm.value.ruleMode === 'baseline' ? 'baseline' : 'custom',
+      eval_type: 'custom',
       model_id: taskForm.value.model_id,
       gpu_id: taskForm.value.gpu_id,
       dataset_id: taskForm.value.data_source === 'dataset' ? taskForm.value.dataset_id : '',
       dimension_id: dimensionId,
       data_source: taskForm.value.data_source,
       leaderboard: taskForm.value.leaderboard,
+      basic_metrics: {
+        bleu: {
+          enabled: basicMetricForm.value.bleu_enabled,
+          ngram: basicMetricForm.value.bleu_n,
+        },
+        rouge: {
+          enabled: basicMetricForm.value.rouge_enabled,
+          methods: basicMetricForm.value.rouge_methods,
+        },
+        cosine: {
+          enabled: basicMetricForm.value.cosine_enabled,
+        },
+        output_precision: basicMetricForm.value.output_precision,
+      },
     })
     ElMessage.success('评测任务已创建并启动')
     router.push('/model-eval')
@@ -168,17 +175,33 @@ async function handleSubmit() {
 
 async function handleNext() {
   if (loading.value || submitting.value) return
+  if (currentStep.value === 0) {
     const taskValid = await taskStepRef.value?.validate()
     if (!taskValid) {
       ElMessage.warning('请检查并完善任务配置')
       return
     }
-  currentStep.value = 1
+  }
+  if (currentStep.value === 1) {
+    const ruleValid = await ruleStepRef.value?.validate()
+    if (!ruleValid) {
+      ElMessage.warning('请检查并完善大模型评测指标')
+      return
+    }
+  }
+  if (currentStep.value === 2) {
+    const basicMetricValid = await basicMetricStepRef.value?.validate()
+    if (!basicMetricValid) {
+      ElMessage.warning('请检查并完善基础评测指标')
+      return
+    }
+  }
+  currentStep.value = Math.min(currentStep.value + 1, WIZARD_STEPS.length - 1)
 }
 
 function handleBack() {
   if (submitting.value) return
-  currentStep.value = 0
+  currentStep.value = Math.max(currentStep.value - 1, 0)
 }
 
 function handleCancel() {
@@ -189,22 +212,29 @@ onMounted(loadData)
 </script>
 
 <template>
-  <PageCard title="新建评测任务" subtitle="完成任务配置与评测规则设置后启动评测">
+  <PageCard
+    title="新建评测任务"
+    subtitle="依次配置任务、大模型评测指标与基础评测指标，确认后开始评测"
+  >
     <div class="create-wizard-layout">
       <main v-loading="loading" class="wizard-main">
         <div class="wizard-steps-container" aria-label="评测任务创建步骤">
           <div class="custom-wizard-steps">
+            <template v-for="(step, index) in WIZARD_STEPS" :key="step.title">
+              <div
+                v-if="index !== 0"
+                class="step-connector"
+                :class="{ 'is-active': currentStep >= index }"
+              ></div>
               <div
-              v-for="(step, index) in WIZARD_STEPS"
-              :key="step.title"
                 class="step-item"
                 :class="{
                   'is-active': currentStep === index,
                   'is-completed': currentStep > index,
                 }"
                 :aria-current="currentStep === index ? 'step' : undefined"
+                :aria-label="`${index + 1}. ${step.title}：${step.description}`"
               >
-              <div v-if="index !== 0" class="step-connector"></div>
                 <div class="step-node">
                   <div class="step-icon" aria-hidden="true">
                     <i v-if="currentStep > index" class="fa fa-check" />
@@ -216,6 +246,7 @@ onMounted(loadData)
                   </div>
                 </div>
               </div>
+            </template>
           </div>
         </div>
 
@@ -231,37 +262,53 @@ onMounted(loadData)
             :disabled="submitting"
           />
           <EvalRuleSetupStep
-          v-else
+            v-else-if="currentStep === 1"
             ref="ruleStepRef"
             v-model="ruleForm"
-          :dimensions="dimensions"
             :eval-models="evalModels"
-          :loading="loading"
             :disabled="submitting"
           />
+          <BasicMetricSetupStep
+            v-else-if="currentStep === 2"
+            ref="basicMetricStepRef"
+            v-model="basicMetricForm"
+            :disabled="submitting"
+          />
+          <StartEvalStep
+            v-else
+            :task="taskForm"
+            :llm-metric="ruleForm"
+            :basic-metrics="basicMetricForm"
+            :trained-models="trainedModels"
+            :eval-datasets="evalDatasets"
+            :eval-models="evalModels"
+            :gpus="gpus"
+          />
         </div>
       </main>
 
       <footer class="wizard-footer">
         <el-button
-          v-if="currentStep === 1"
+          v-if="currentStep > 0"
           class="footer-back"
           :disabled="submitting"
           @click="handleBack"
         >
-          <i class="fa fa-arrow-left footer-button-icon" />返回：任务配置
+          <i class="fa fa-arrow-left footer-button-icon" />返回：{{ WIZARD_STEPS[currentStep - 1].title }}
         </el-button>
         <el-button v-else class="footer-back" :disabled="submitting" @click="handleCancel">
           取消
         </el-button>
 
         <el-button
-          v-if="currentStep === 0"
+          v-if="currentStep < WIZARD_STEPS.length - 1"
           type="primary"
           :disabled="loading || submitting"
           @click="handleNext"
         >
-          下一步：评测规则<i class="fa fa-arrow-right footer-button-icon is-right" />
+          下一步：{{ WIZARD_STEPS[currentStep + 1].title }}<i
+            class="fa fa-arrow-right footer-button-icon is-right"
+          />
         </el-button>
         <el-button
           v-else
@@ -270,7 +317,7 @@ onMounted(loadData)
           :disabled="loading || submitting"
           @click="handleSubmit"
         >
-          创建并启动评测
+          开始评测
         </el-button>
       </footer>
     </div>
@@ -301,31 +348,26 @@ onMounted(loadData)
   display: flex;
   align-items: center;
   justify-content: space-between;
-  max-width: 760px;
+  max-width: 1120px;
   margin: 0 auto;
   padding: 0 20px;
 }
 
 .step-item {
   display: flex;
-  flex: 1;
+  flex: none;
   align-items: center;
 }
 
-.step-item:first-child {
-  flex: 0;
-}
-
 .step-connector {
   flex: 1;
   height: 2px;
-  margin: 0 20px;
+  margin: 0 12px;
   background: #e2e8f0;
   transition: background-color 0.2s ease;
 }
 
-.step-item.is-active .step-connector,
+.step-connector.is-active {
-.step-item.is-completed .step-connector {
   background: #5146e5;
 }
 
@@ -415,6 +457,12 @@ onMounted(loadData)
   margin-left: 6px;
 }
 
+@media (max-width: 1100px) {
+  .step-description {
+    display: none;
+  }
+}
+
 @media (max-width: 760px) {
   .wizard-main {
     padding: 24px 20px;
@@ -425,10 +473,10 @@ onMounted(loadData)
   }
 
   .step-connector {
-    margin: 0 10px;
+    margin: 0 8px;
   }
 
-  .step-description {
+  .step-text {
     display: none;
   }
 

frontend/src/views/eval/create/DimensionFormFields.vue

@@ -21,19 +21,28 @@ export interface DimensionFormDraft {
   pass_threshold: number
 }
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     evalModels: ModelItem[]
     showDescription?: boolean
+    showStatusSettings?: boolean
+    allowedTypes?: DimensionType[]
   }>(),
   {
     showDescription: true,
+    showStatusSettings: true,
+    allowedTypes: () => ['classification', 'metric', 'text_similarity'],
   },
 )
 
 const form = defineModel<DimensionFormDraft>({ required: true })
+const SCORE_STEP = 0.5
 
-const typeOptions = Object.entries(DIMENSION_TYPE_MAP).map(([value, label]) => ({ value, label }))
+const typeOptions = computed(() =>
+  Object.entries(DIMENSION_TYPE_MAP)
+    .filter(([value]) => props.allowedTypes.includes(value as DimensionType))
+    .map(([value, label]) => ({ value, label })),
+)
 const currentMethods = computed(() => (form.value.type ? EVAL_METHODS[form.value.type] || [] : []))
 
 /**
@@ -65,6 +74,23 @@ watch(
   },
   { flush: 'sync' },
 )
+
+/** 始终保持评分区间合法，并把通过阈值收敛到当前区间内。 */
+watch(
+  () => [form.value.type, form.value.score_min, form.value.score_max] as const,
+  ([type, scoreMin, scoreMax]) => {
+    if (type !== 'metric') return
+    if (scoreMax <= scoreMin) {
+      form.value.score_max = scoreMin + SCORE_STEP
+      return
+    }
+    form.value.pass_threshold = Math.min(
+      Math.max(form.value.pass_threshold, scoreMin),
+      scoreMax,
+    )
+  },
+  { flush: 'sync' },
+)
 </script>
 
 <template>
@@ -134,13 +160,24 @@ watch(
   </template>
 
   <template v-if="form.type === 'metric'">
-    <el-form-item label="评分最小值">
+    <el-form-item label="评分最小值" prop="score_min">
-      <el-input-number v-model="form.score_min" :min="0" :step="1" style="width: 160px" />
+      <el-input-number
+        v-model="form.score_min"
+        :min="0"
+        :max="Math.max(form.score_max - SCORE_STEP, 0)"
+        :step="SCORE_STEP"
+        style="width: 160px"
+      />
     </el-form-item>
-    <el-form-item label="评分最大值">
+    <el-form-item label="评分最大值" prop="score_max">
-      <el-input-number v-model="form.score_max" :min="0" :step="1" style="width: 160px" />
+      <el-input-number
+        v-model="form.score_max"
+        :min="form.score_min + SCORE_STEP"
+        :step="SCORE_STEP"
+        style="width: 160px"
+      />
     </el-form-item>
-    <el-form-item label="通过阈值">
+    <el-form-item label="通过阈值" prop="pass_threshold">
       <div style="width: 100%">
         <el-slider
           v-model="form.pass_threshold"
@@ -154,6 +191,7 @@ watch(
     </el-form-item>
   </template>
 
+  <template v-if="showStatusSettings">
     <el-form-item label="启用该维度">
       <el-switch v-model="form.is_active" />
     </el-form-item>
@@ -161,6 +199,7 @@ watch(
       <el-switch v-model="form.is_default" />
     </el-form-item>
   </template>
+</template>
 
 <style scoped>
 .method-desc {

frontend/src/views/eval/create/EvalRuleSetupStep.vue

@@ -1,49 +1,31 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import DimensionFormFields, { type DimensionFormDraft } from './DimensionFormFields.vue'
-import type { Dimension, ModelItem } from '@/types'
+import type { DimensionType, ModelItem } from '@/types'
 
-export type EvalRuleMode = 'existing' | 'new' | 'baseline'
+export type EvalRuleSetupDraft = DimensionFormDraft
 
-export interface EvalRuleSetupDraft {
+defineProps<{
-  ruleMode: EvalRuleMode
-  dimension_id: string | number
-  newDimension: DimensionFormDraft
-}
-
-const props = defineProps<{
-  dimensions: Dimension[]
   evalModels: ModelItem[]
-  loading?: boolean
   disabled?: boolean
 }>()
 
 const form = defineModel<EvalRuleSetupDraft>({ required: true })
-const existingFormRef = ref<FormInstance>()
 const newFormRef = ref<FormInstance>()
-
+const LLM_METRIC_TYPES: DimensionType[] = ['classification', 'metric']
-const existingRules: FormRules = {
-  dimension_id: [{ required: true, message: '请选择评测维度', trigger: 'change' }],
-}
 
 const dimensionRules: FormRules<DimensionFormDraft> = {
-  type: [{ required: true, message: '请选择指标类型', trigger: 'change' }],
+  type: [{ required: true, message: '请选择大模型评测指标类型', trigger: 'change' }],
-  eval_model: [{ required: true, message: '请选择大模型', trigger: 'change' }],
+  eval_model: [{ required: true, message: '请选择评测大模型', trigger: 'change' }],
   eval_method: [{ required: true, message: '请选择评估方式', trigger: 'change' }],
   eval_prompt: [{ required: true, message: '请填写评估 Prompt', trigger: 'blur' }],
 }
 
-const selectedDimension = computed(() =>
-  props.dimensions.find((dimension) => String(dimension.id) === String(form.value.dimension_id)),
-)
-
 async function validate() {
-  const target = newFormRef.value
+  if (!newFormRef.value) return false
-  if (!target) return false
   try {
-    const valid = await target.validate()
+    return !!(await newFormRef.value.validate())
-    return !!valid
   } catch {
     return false
   }
@@ -56,7 +38,7 @@ defineExpose({ validate })
   <div class="rule-step">
     <el-form
       ref="newFormRef"
-      :model="form.newDimension"
+      :model="form"
       :rules="dimensionRules"
       label-width="130px"
       class="step-form step-form-wide"
@@ -64,17 +46,17 @@ defineExpose({ validate })
       scroll-to-error
     >
       <DimensionFormFields
-        v-model="form.newDimension"
+        v-model="form"
         :eval-models="evalModels"
         :show-description="false"
+        :show-status-settings="false"
+        :allowed-types="LLM_METRIC_TYPES"
       />
     </el-form>
   </div>
 </template>
 
 <style scoped>
-
-
 .step-form {
   max-width: 760px;
 }
@@ -82,6 +64,4 @@ defineExpose({ validate })
 .step-form-wide {
   max-width: 920px;
 }
-
-
 </style>

frontend/src/views/fine-tune/FineTuneCreateView.vue

@@ -14,6 +14,14 @@ import { getModelList } from '@/api/modules/model'
 import { getDatasetList } from '@/api/modules/dataset'
 import { getSystemInfo } from '@/api/modules/system'
 import { TEMPLATE_GROUPS, LR_SCHEDULER_OPTIONS, QUANTIZATION_BIT_OPTIONS, QUANT_METHOD_OPTIONS, GGUF_FORMAT_OPTIONS } from '@/constants'
+import {
+  DEFAULT_TRAINING_PARAMS,
+  buildFineTuneCommand,
+  buildFineTunePayload,
+  createDefaultFineTuneForm,
+  toCreateFineTunePayload,
+} from './fineTuneFormModel'
+import type { FineTuneFormModel } from './fineTuneFormModel'
 import type { ModelItem, DatasetItem, GpuInfo } from '@/types'
 
 const router = useRouter()
@@ -26,36 +34,7 @@ const gpus = ref<GpuInfo[]>([])
 const selectedGpus = ref<number[]>([])
 const modelDialogVisible = ref(false)
 
-const form = reactive({
+const form = reactive(createDefaultFineTuneForm())
-  name: '',
-  description: '',
-  train_type: 'SFT' as 'SFT' | 'DPO' | 'CPT',
-  base_model: '' as string | number,
-  template: 'qwen',
-  train_method: 'lora' as 'lora' | 'full',
-  train_dataset_id: '' as string | number,
-  auto_merge: false,
-  // 训练参数
-  batch_size: 1,
-  learning_rate: 0.0001,
-  n_epochs: 1,
-  save_steps: 100,
-  lr_scheduler_type: 'cosine',
-  max_length: 512,
-  warmup_ratio: 0.05,
-  weight_decay: 0.01,
-  // LoRA 参数
-  lora_alpha: 16, // 修复原项目 lora_alpha 默认值不一致 bug
-  lora_dropout: 0.1,
-  lora_rank: 8,
-  // 量化参数
-  quantization_bit: 0, // 训练时量化（QLoRA）：0=不量化
-  export_quantized: false, // 训练后是否导出量化模型
-  quant_method: 'bnb', // 导出量化方法
-  quant_bits: 4, // 导出量化位数
-  quant_group_size: 128, // 分组大小（GPTQ/AWQ）
-  export_format: 'Q4_K_M', // GGUF 导出格式
-})
 
 const rules: FormRules = {
   name: [
@@ -78,45 +57,8 @@ const selectedModel = computed(() => models.value.find((model) => model.id === f
 
 const modelDialogTitle = computed(() => selectedModel.value?.name || '')
 
-/** 训练命令实时预览 */
+/** 训练命令与提交载荷共用同一份表单模型。 */
-const commandPreview = computed(() => {
+const commandPreview = computed(() => buildFineTuneCommand(form, selectedGpus.value))
-  const gpuIds = selectedGpus.value.length ? selectedGpus.value.join(',') : '0'
-  let cmd = `CUDA_VISIBLE_DEVICES=${gpuIds} llamafactory-cli train \\\n`
-  cmd += `  --stage ${form.train_type === 'DPO' ? 'dpo' : form.train_type === 'CPT' ? 'cpt' : 'sft'} \\\n`
-  cmd += `  --do_train \\\n`
-  cmd += `  --model_name_or_path <base_model_path> \\\n`
-  cmd += `  --dataset <dataset> \\\n`
-  cmd += `  --template ${form.template} \\\n`
-  cmd += `  --finetuning_type ${form.train_method} \\\n`
-  cmd += `  --output_dir ./saves/${form.name || 'output'} \\\n`
-  cmd += `  --per_device_train_batch_size ${form.batch_size} \\\n`
-  cmd += `  --learning_rate ${form.learning_rate} \\\n`
-  cmd += `  --num_train_epochs ${form.n_epochs} \\\n`
-  cmd += `  --save_steps ${form.save_steps} \\\n`
-  cmd += `  --lr_scheduler_type ${form.lr_scheduler_type} \\\n`
-  cmd += `  --cutoff_len ${form.max_length} \\\n`
-  cmd += `  --warmup_ratio ${form.warmup_ratio} \\\n`
-  cmd += `  --weight_decay ${form.weight_decay}`
-  if (showLoraParams.value) {
-    cmd += ` \\\n  --lora_alpha ${form.lora_alpha}`
-    cmd += ` \\\n  --lora_dropout ${form.lora_dropout}`
-    cmd += ` \\\n  --lora_rank ${form.lora_rank}`
-  }
-  if (showLoraParams.value && form.quantization_bit) {
-    cmd += ` \\\n  --quantization_bit ${form.quantization_bit}`
-  }
-  if (form.export_quantized) {
-    const method = form.quant_method
-    const bits = form.quant_bits
-    cmd += ` \\\n  # 训练后导出量化模型：${method} ${bits}bit`
-    if (method === 'gguf') {
-      cmd += ` \\\n  # export_format=${form.export_format}`
-    } else if (method === 'gptq' || method === 'awq') {
-      cmd += ` \\\n  # group_size=${form.quant_group_size}`
-    }
-  }
-  return cmd
-})
 
 /** GPU 多选切换 */
 function toggleGpu(index: number) {
@@ -140,31 +82,26 @@ function handleModelConfirm(modelId: string | number) {
 }
 
 function resetParams() {
-  Object.assign(form, {
+  Object.assign(form, DEFAULT_TRAINING_PARAMS)
-    batch_size: 1,
-    learning_rate: 0.0001,
-    n_epochs: 1,
-    save_steps: 100,
-    lr_scheduler_type: 'cosine',
-    max_length: 512,
-    warmup_ratio: 0.05,
-    weight_decay: 0.01,
-    lora_alpha: 16,
-    lora_dropout: 0.1,
-    lora_rank: 8,
-    quantization_bit: 0,
-    export_quantized: false,
-    quant_method: 'bnb',
-    quant_bits: 4,
-    quant_group_size: 128,
-    export_format: 'Q4_K_M',
-  })
 }
 
 const isParamsExpanded = ref(false)
 
+interface ParameterDefinition {
+  key: keyof FineTuneFormModel
+  name: string
+  desc: string
+  hint: string
+  type: 'number' | 'select'
+  min?: number
+  max?: number
+  step?: number
+  precision?: number
+  options?: Array<{ label: string; value: string | number }>
+}
+
 const allParams = computed(() => {
-  const params = [
+  const params: ParameterDefinition[] = [
     { key: 'batch_size', name: 'batch_size', desc: '批次大小，代表模型训练过程中，模型更新一次参数所需要的数据样本数。', hint: '[1, 64], step:1', type: 'number', min: 1, max: 64, step: 1 },
     { key: 'learning_rate', name: 'learning_rate', desc: '学习率，代表每次更新数据的增量参数权重比例。', hint: '[0.000001, 1]', type: 'number', min: 0.000001, max: 1, step: 0.00001, precision: 6 },
     { key: 'n_epochs', name: 'n_epochs', desc: '循环次数，代表模型训练过程中模型学习数据集的次数，可理解为看几遍数据，一般建议的范围是 1-3 遍即可，可依据需求进行调整', hint: '[1, 100], step:1', type: 'number', min: 1, max: 100, step: 1 },
@@ -178,7 +115,7 @@ const allParams = computed(() => {
     params.push(
       { key: 'lora_alpha', name: 'lora_alpha', desc: 'LoRA 缩放系数。', hint: '16/32/64/128', type: 'select', options: [{ label: '16', value: 16 }, { label: '32', value: 32 }, { label: '64', value: 64 }, { label: '128', value: 128 }] },
       { key: 'lora_rank', name: 'lora_rank', desc: 'LoRA 秩大小，控制低秩矩阵的维度。', hint: '8/16/32/64', type: 'select', options: [{ label: '8', value: 8 }, { label: '16', value: 16 }, { label: '32', value: 32 }, { label: '64', value: 64 }] },
-      { key: 'lora_dropout', name: 'lora_dropout', desc: 'LoRA 层的 dropout 比例。', hint: '[0, 1]', type: 'number', min: 0, max: 1, step: 0.05, precision: 2 }
+      { key: 'lora_dropout', name: 'lora_dropout', desc: 'LoRA 层的 dropout 比例。', hint: '[0, 1]', type: 'number', min: 0, max: 1, step: 0.05, precision: 2 },
     )
   }
   return params
@@ -188,6 +125,15 @@ const visibleParams = computed(() => {
   return isParamsExpanded.value ? allParams.value : allParams.value.slice(0, 3)
 })
 
+function parameterValue(key: keyof FineTuneFormModel) {
+  const value = form[key]
+  return typeof value === 'boolean' ? Number(value) : value
+}
+
+function updateParameterValue(key: keyof FineTuneFormModel, value: string | number | undefined) {
+  if (value !== undefined) Reflect.set(form, key, value)
+}
+
 async function loadModels() {
   try {
     models.value = (await getModelList()) || []
@@ -225,88 +171,32 @@ async function handleSubmit() {
     }
     submitting.value = true
     try {
-      // 任务名查重
+      let check: { exists: boolean }
-      const check = await checkFineTuneName(form.name).catch(() => ({ exists: false }))
+      try {
-      if ((check as any).exists) {
+        check = await checkFineTuneName(form.name)
+      } catch {
+        ElMessage.error('任务名校验失败，请稍后重试')
+        return
+      }
+      if (check.exists) {
         ElMessage.error('任务名称已存在，请更换')
-        submitting.value = false
         return
       }
 
-      // 第一步：创建任务记录
+      const payload = buildFineTunePayload(form, selectedGpus.value)
-      const taskData = {
+      const createRes = await createFineTune(toCreateFineTunePayload(payload))
-        name: form.name,
+      const taskId = createRes.id
-        description: form.description,
-        base_model: form.base_model,
-        template: form.template,
-        train_type: form.train_type,
-        train_method: form.train_method,
-        gpus: selectedGpus.value,
-        train_dataset_id: form.train_dataset_id,
-        auto_merge: form.train_type === 'SFT' && form.auto_merge,
-        output_model_name: form.name,
-        batch_size: form.batch_size,
-        learning_rate: form.learning_rate,
-        n_epochs: form.n_epochs,
-        save_steps: form.save_steps,
-        lr_scheduler_type: form.lr_scheduler_type,
-        max_length: form.max_length,
-        warmup_ratio: form.warmup_ratio,
-        weight_decay: form.weight_decay,
-        lora_alpha: form.lora_alpha,
-        lora_dropout: form.lora_dropout,
-        lora_rank: form.lora_rank,
-        quantization_bit: form.train_method === 'lora' ? form.quantization_bit : 0,
-        export_quantized: form.export_quantized,
-        quant_method: form.export_quantized ? form.quant_method : '',
-        quant_bits: form.export_quantized ? form.quant_bits : 0,
-        quant_group_size: form.export_quantized ? form.quant_group_size : 0,
-        export_format: form.export_quantized && form.quant_method === 'gguf' ? form.export_format : '',
-        status: 'pending',
-        progress: 0,
-      }
-      const createRes: any = await createFineTune(taskData)
-      const taskId = createRes?.id || createRes
 
-      // 第二步：启动训练
       try {
-        await startFineTune({
+        await startFineTune({ ...payload, task_id: taskId })
-          task_id: taskId,
-          name: form.name,
-          base_model: form.base_model,
-          template: form.template,
-          train_type: form.train_type,
-          train_method: form.train_method,
-          train_dataset_id: form.train_dataset_id,
-          auto_merge: form.train_type === 'SFT' && form.auto_merge,
-          output_model_name: form.name,
-          gpus: selectedGpus.value,
-          batch_size: form.batch_size,
-          learning_rate: form.learning_rate,
-          n_epochs: form.n_epochs,
-          save_steps: form.save_steps,
-          lr_scheduler_type: form.lr_scheduler_type,
-          max_length: form.max_length,
-          warmup_ratio: form.warmup_ratio,
-          weight_decay: form.weight_decay,
-          lora_alpha: form.lora_alpha,
-          lora_dropout: form.lora_dropout,
-          lora_rank: form.lora_rank,
-          quantization_bit: form.train_method === 'lora' ? form.quantization_bit : 0,
-          export_quantized: form.export_quantized,
-          quant_method: form.export_quantized ? form.quant_method : '',
-          quant_bits: form.export_quantized ? form.quant_bits : 0,
-          quant_group_size: form.export_quantized ? form.quant_group_size : 0,
-          export_format: form.export_quantized && form.quant_method === 'gguf' ? form.export_format : '',
-        })
         ElMessage.success('训练任务已创建并启动')
-      } catch (e) {
+      } catch {
-        // 启动失败，回写状态
         await updateFineTune(taskId, { status: 'failed' })
+        ElMessage.error('任务已创建，但训练启动失败')
       }
       router.push('/fine-tune')
     } catch {
-      // ignore
+      ElMessage.error('训练任务创建失败，请稍后重试')
     } finally {
       submitting.value = false
     }
@@ -427,15 +317,17 @@ onMounted(() => {
                 <div class="param-col config">
                   <el-input-number 
                     v-if="param.type === 'number'" 
-                    v-model="(form as any)[param.key]" 
+                    :model-value="Number(parameterValue(param.key))"
                     :min="param.min" :max="param.max" :step="param.step" :precision="param.precision" 
                     controls-position="right"
                     style="width: 200px"
+                    @update:model-value="updateParameterValue(param.key, $event)"
                   />
                   <el-select 
                     v-else-if="param.type === 'select'" 
-                    v-model="(form as any)[param.key]" 
+                    :model-value="parameterValue(param.key)"
                     style="width: 200px"
+                    @update:model-value="updateParameterValue(param.key, $event)"
                   >
                     <el-option v-for="o in param.options" :key="o.value" :label="o.label" :value="o.value" />
                   </el-select>

frontend/src/views/fine-tune/FineTuneListView.vue

@@ -37,7 +37,7 @@ const filteredList = computed(() => {
     if (filters.value.trainType.length && !filters.value.trainType.includes(row.train_type)) {
       return false
     }
-    if (filters.value.trainMethod.length && !filters.value.trainMethod.includes(row.train_method)) {
+    if (filters.value.trainMethod.length && (!row.train_method || !filters.value.trainMethod.includes(row.train_method))) {
       return false
     }
     return true

frontend/src/views/fine-tune/fineTuneFormModel.ts

@@ -0,0 +1,146 @@
+import type { FineTuneStartPayload, FineTuneTask } from '@/types'
+
+export type FineTuneFormModel = {
+  name: string
+  description: string
+  train_type: 'SFT' | 'DPO' | 'CPT'
+  base_model: string | number
+  template: string
+  train_method: 'lora' | 'full'
+  train_dataset_id: string | number
+  auto_merge: boolean
+  batch_size: number
+  learning_rate: number
+  n_epochs: number
+  save_steps: number
+  lr_scheduler_type: string
+  max_length: number
+  warmup_ratio: number
+  weight_decay: number
+  lora_alpha: number
+  lora_dropout: number
+  lora_rank: number
+  quantization_bit: number
+  export_quantized: boolean
+  quant_method: string
+  quant_bits: number
+  quant_group_size: number
+  export_format: string
+}
+
+export const DEFAULT_TRAINING_PARAMS = {
+  batch_size: 1,
+  learning_rate: 0.0001,
+  n_epochs: 1,
+  save_steps: 100,
+  lr_scheduler_type: 'cosine',
+  max_length: 512,
+  warmup_ratio: 0.05,
+  weight_decay: 0.01,
+  lora_alpha: 16,
+  lora_dropout: 0.1,
+  lora_rank: 8,
+  quantization_bit: 0,
+  export_quantized: false,
+  quant_method: 'bnb',
+  quant_bits: 4,
+  quant_group_size: 128,
+  export_format: 'Q4_K_M',
+} as const
+
+export function createDefaultFineTuneForm(): FineTuneFormModel {
+  return {
+    name: '',
+    description: '',
+    train_type: 'SFT',
+    base_model: '',
+    template: 'qwen',
+    train_method: 'lora',
+    train_dataset_id: '',
+    auto_merge: false,
+    ...DEFAULT_TRAINING_PARAMS,
+  }
+}
+
+export function buildFineTunePayload(
+  form: FineTuneFormModel,
+  gpus: number[],
+): Omit<FineTuneStartPayload, 'task_id'> {
+  return {
+    name: form.name,
+    description: form.description,
+    base_model: form.base_model,
+    template: form.template,
+    train_type: form.train_type,
+    train_method: form.train_method,
+    gpus: [...gpus],
+    train_dataset_id: form.train_dataset_id,
+    auto_merge: form.train_type === 'SFT' && form.auto_merge,
+    output_model_name: form.name,
+    batch_size: form.batch_size,
+    learning_rate: form.learning_rate,
+    n_epochs: form.n_epochs,
+    save_steps: form.save_steps,
+    lr_scheduler_type: form.lr_scheduler_type,
+    max_length: form.max_length,
+    warmup_ratio: form.warmup_ratio,
+    weight_decay: form.weight_decay,
+    lora_alpha: form.lora_alpha,
+    lora_dropout: form.lora_dropout,
+    lora_rank: form.lora_rank,
+    quantization_bit: form.train_method === 'lora' ? form.quantization_bit : 0,
+    export_quantized: form.export_quantized,
+    quant_method: form.export_quantized ? form.quant_method : '',
+    quant_bits: form.export_quantized ? form.quant_bits : 0,
+    quant_group_size: form.export_quantized ? form.quant_group_size : 0,
+    export_format: form.export_quantized && form.quant_method === 'gguf' ? form.export_format : '',
+  }
+}
+
+export function buildFineTuneCommand(form: FineTuneFormModel, gpus: number[]) {
+  const gpuIds = gpus.length ? gpus.join(',') : '0'
+  const stage = form.train_type === 'DPO' ? 'dpo' : form.train_type === 'CPT' ? 'cpt' : 'sft'
+  const lines = [
+    `CUDA_VISIBLE_DEVICES=${gpuIds} llamafactory-cli train`,
+    `  --stage ${stage}`,
+    '  --do_train',
+    '  --model_name_or_path <base_model_path>',
+    '  --dataset <dataset>',
+    `  --template ${form.template}`,
+    `  --finetuning_type ${form.train_method}`,
+    `  --output_dir ./saves/${form.name || 'output'}`,
+    `  --per_device_train_batch_size ${form.batch_size}`,
+    `  --learning_rate ${form.learning_rate}`,
+    `  --num_train_epochs ${form.n_epochs}`,
+    `  --save_steps ${form.save_steps}`,
+    `  --lr_scheduler_type ${form.lr_scheduler_type}`,
+    `  --cutoff_len ${form.max_length}`,
+    `  --warmup_ratio ${form.warmup_ratio}`,
+    `  --weight_decay ${form.weight_decay}`,
+  ]
+
+  if (form.train_method === 'lora') {
+    lines.push(
+      `  --lora_alpha ${form.lora_alpha}`,
+      `  --lora_dropout ${form.lora_dropout}`,
+      `  --lora_rank ${form.lora_rank}`,
+    )
+    if (form.quantization_bit) lines.push(`  --quantization_bit ${form.quantization_bit}`)
+  }
+
+  if (form.export_quantized) {
+    lines.push(`  # 训练后导出量化模型：${form.quant_method} ${form.quant_bits}bit`)
+    if (form.quant_method === 'gguf') lines.push(`  # export_format=${form.export_format}`)
+    if (form.quant_method === 'gptq' || form.quant_method === 'awq') {
+      lines.push(`  # group_size=${form.quant_group_size}`)
+    }
+  }
+
+  return lines.join(' \\\n')
+}
+
+export function toCreateFineTunePayload(
+  payload: Omit<FineTuneStartPayload, 'task_id'>,
+): Partial<FineTuneTask> {
+  return { ...payload, status: 'pending', progress: 0 }
+}

frontend/src/views/login/LoginView.vue

@@ -40,41 +40,63 @@ async function handleLogin() {
 
 <template>
   <div class="login-page">
-    <div class="login-card">
+    <section class="login-visual" aria-labelledby="platform-title">
-      <!-- LOGO 和标题 -->
+      <div class="login-visual-content">
-      <div class="login-header">
+        <div class="login-visual-copy">
-        <img src="/logo.png" alt="Logo" class="login-logo" />
+          <h1 id="platform-title">远光软件微调平台</h1>
-        <h1 class="login-title">远光软件微调平台</h1>
+          <p>大模型微调、评测与推理的一体化工作台</p>
-        <p class="login-subtitle">模型管理平台</p>
+        </div>
+
+        <div class="login-visual-footer" aria-label="平台核心能力">
+          <span>数据准备</span>
+          <span aria-hidden="true">·</span>
+          <span>模型训练</span>
+          <span aria-hidden="true">·</span>
+          <span>效果评测</span>
+        </div>
+      </div>
+    </section>
+
+    <main class="login-panel">
+      <div class="brand-lockup" role="img" aria-label="远光软件">
+        <span class="brand-logo-crop brand-logo-crop-mark" aria-hidden="true">
+          <img src="/logo.png" alt="" />
+        </span>
+        <span class="brand-logo-crop brand-logo-crop-wordmark" aria-hidden="true">
+          <img src="/logo.png" alt="" />
+        </span>
+      </div>
+
+      <div class="login-form-wrap">
+        <div class="login-heading">
+          <span>账号登录</span>
+          <h2>欢迎回来</h2>
+          <p>登录后继续使用微调平台</p>
         </div>
 
-      <!-- 登录表单 -->
         <el-form
           ref="loginFormRef"
           :model="loginForm"
           :rules="rules"
+          label-position="top"
           size="large"
           @keyup.enter="handleLogin"
         >
-        <el-form-item prop="username">
+          <el-form-item label="账号" prop="username">
             <el-input
               v-model="loginForm.username"
-            placeholder="请输入账号/手机号/邮箱"
+              placeholder="请输入账号"
               clearable
-          >
+            />
-            <template #prefix><i class="fa fa-user-o" /></template>
-          </el-input>
           </el-form-item>
 
-        <el-form-item prop="password">
+          <el-form-item label="密码" prop="password">
             <el-input
               v-model="loginForm.password"
               type="password"
               placeholder="请输入密码"
               show-password
-          >
+            />
-            <template #prefix><i class="fa fa-lock-o" /></template>
-          </el-input>
           </el-form-item>
 
           <div class="login-options">
@@ -88,177 +110,238 @@ async function handleLogin() {
             :loading="loading"
             @click="handleLogin"
           >
-          <i class="fa fa-sign-in login-btn-icon" />
             登录
           </el-button>
         </el-form>
       </div>
+
+      <footer>© 2026 远光软件</footer>
+    </main>
   </div>
 </template>
 
 <style scoped lang="scss">
 .login-page {
-  min-height: 100vh;
+  height: 100vh;
-  display: flex;
+  height: 100dvh;
-  align-items: center;
+  display: grid;
-  justify-content: center;
+  grid-template-columns: minmax(0, 58fr) minmax(500px, 42fr);
-  padding: 16px;
+  overflow: hidden;
-  background-color: #f8fafc;
+  background: #fcfcfe;
-  /* Beautiful light mesh gradient for AI platform */
+}
-  background-image: 
+
-    radial-gradient(at 10% 20%, rgba(99, 102, 241, 0.15) 0px, transparent 50%),
+.login-visual {
-    radial-gradient(at 80% 0%, rgba(236, 72, 153, 0.15) 0px, transparent 50%),
+  min-height: 0;
-    radial-gradient(at 40% 60%, rgba(56, 189, 248, 0.15) 0px, transparent 50%),
+  height: 100%;
-    radial-gradient(at 90% 80%, rgba(139, 92, 246, 0.15) 0px, transparent 50%);
-  background-size: 100% 100%;
   position: relative;
+  color: #fff;
+  background-color: #121127;
+  background-image: url('@/assets/login-hero-flow.png');
+  background-size: cover;
+  background-position: center;
   overflow: hidden;
 }
 
-/* Add some dynamic floating orbs for extra premium feel */
+.login-visual::after {
-.login-page::before,
-.login-page::after {
   content: '';
   position: absolute;
-  border-radius: 50%;
+  inset: 0;
-  filter: blur(60px);
+  background: linear-gradient(180deg, rgba(12, 12, 35, 0.2), transparent 36%, rgba(12, 12, 35, 0.2));
-  z-index: 0;
+  pointer-events: none;
-  animation: float 20s infinite ease-in-out alternate;
 }
 
-.login-page::before {
+.login-visual-content {
-  width: 400px;
+  min-height: 0;
-  height: 400px;
+  height: 100%;
-  background: rgba(99, 102, 241, 0.1);
-  top: -100px;
-  left: -100px;
-}
-
-.login-page::after {
-  width: 500px;
-  height: 500px;
-  background: rgba(236, 72, 153, 0.08);
-  bottom: -150px;
-  right: -150px;
-  animation-delay: -10s;
-}
-
-@keyframes float {
-  0% { transform: translate(0, 0) rotate(0deg); }
-  100% { transform: translate(50px, 50px) rotate(10deg); }
-}
-
-.login-card {
   position: relative;
   z-index: 1;
-  width: 100%;
+  display: flex;
-  max-width: 440px;
+  flex-direction: column;
-  /* Glassmorphism */
+  padding: clamp(80px, 10vh, 132px) clamp(56px, 6vw, 112px) clamp(56px, 7vh, 84px);
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: blur(24px);
-  border: 1px solid rgba(255, 255, 255, 0.8);
-  border-radius: 24px;
-  padding: 48px 40px;
-  box-shadow: 
-    0 20px 40px -10px rgba(0, 0, 0, 0.05),
-    0 1px 3px rgba(0, 0, 0, 0.02),
-    inset 0 1px 0 rgba(255, 255, 255, 1);
-  /* Entrance animation */
-  transform: translateY(30px);
-  opacity: 0;
-  animation: slideUpFade 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
 }
 
-@keyframes slideUpFade {
+.login-visual-copy {
-  to {
+  max-width: 680px;
-    transform: translateY(0);
+  margin-top: clamp(80px, 11vh, 136px);
-    opacity: 1;
-  }
-}
 
-.login-header {
+  h1 {
-  text-align: center;
-  margin-bottom: 40px;
-
-  .login-logo {
-    width: 56px;
-    height: 56px;
-    object-fit: contain;
-    margin-bottom: 20px;
-    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.05));
-  }
-
-  .login-title {
-    font-size: 28px;
-    font-weight: 700;
-    letter-spacing: -0.5px;
-    margin: 0 0 8px;
-    /* Gradient text */
-    background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-  }
-
-  .login-subtitle {
-    font-size: 15px;
-    color: #64748b;
-    font-weight: 500;
     margin: 0;
+    font-size: clamp(38px, 3.8vw, 62px);
+    line-height: 1.2;
+    letter-spacing: -0.035em;
+    font-weight: 700;
+    text-wrap: balance;
+  }
+
+  p {
+    margin: 22px 0 0;
+    color: rgba(226, 232, 240, 0.76);
+    font-size: clamp(17px, 1.5vw, 24px);
+    line-height: 1.6;
+    letter-spacing: 0.01em;
   }
 }
 
-/* Custom Input Styling */
+.login-visual-footer {
-:deep(.el-form-item) {
+  width: min(100%, 640px);
+  margin-top: auto;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr auto 1fr;
+  align-items: center;
+  gap: 24px;
+  color: rgba(226, 232, 240, 0.72);
+  font-size: 16px;
+  letter-spacing: 0.04em;
+
+  span:nth-child(3),
+  span:nth-child(5) {
+    text-align: center;
+  }
+
+  span:nth-child(even) {
+    color: rgba(199, 210, 254, 0.8);
+  }
+}
+
+.login-panel {
+  min-height: 0;
+  height: 100%;
+  position: relative;
+  display: grid;
+  place-items: center;
+  padding: 120px clamp(48px, 5vw, 88px) 96px;
+  border-left: 1px solid #e8eaf1;
+  background: #fcfcfe;
+}
+
+.brand-lockup {
+  position: absolute;
+  top: 42px;
+  right: clamp(36px, 4vw, 64px);
+  display: flex;
+  align-items: center;
+  gap: 9px;
+}
+
+.brand-logo-crop {
+  position: relative;
+  display: block;
+  overflow: hidden;
+
+  img {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    max-width: none;
+  }
+}
+
+.brand-logo-crop-mark {
+  width: 40px;
+  height: 38px;
+
+  img {
+    top: 0;
+  }
+}
+
+.brand-logo-crop-wordmark {
+  width: 96px;
+  height: 25px;
+
+  img {
+    bottom: 0;
+  }
+}
+
+.login-form-wrap {
+  width: min(100%, 480px);
+}
+
+.login-heading {
+  margin-bottom: 42px;
+
+  > span {
+    display: block;
     margin-bottom: 24px;
+    color: #4f46e5;
+    font-size: 16px;
+    line-height: 1;
+    font-weight: 600;
+  }
+
+  h2 {
+    margin: 0;
+    color: #17182c;
+    font-size: clamp(38px, 3vw, 48px);
+    line-height: 1.15;
+    letter-spacing: -0.035em;
+    font-weight: 700;
+  }
+
+  p {
+    margin: 14px 0 0;
+    color: #8a93a6;
+    font-size: 16px;
+    line-height: 1.6;
+  }
+}
+
+:deep(.el-form-item) {
+  margin-bottom: 26px;
+}
+
+:deep(.el-form-item__label) {
+  height: auto;
+  margin-bottom: 10px;
+  padding: 0;
+  color: #272a3a;
+  font-size: 15px;
+  line-height: 1.4;
+  font-weight: 600;
 }
 
 :deep(.el-input__wrapper) {
-  background-color: rgba(255, 255, 255, 0.6) !important;
+  min-height: 54px;
-  border-radius: 12px !important;
+  padding: 0 18px;
-  box-shadow: 0 0 0 1px rgba(203, 213, 225, 0.5) inset !important;
+  border-radius: 8px;
-  padding: 0 16px;
+  background: #fff;
-  transition: all 0.3s ease;
+  box-shadow: 0 0 0 1px #cfd4df inset;
+  transition: box-shadow 160ms ease, background-color 160ms ease;
 
   &:hover {
-    background-color: rgba(255, 255, 255, 0.9) !important;
+    box-shadow: 0 0 0 1px #aeb6c6 inset;
-    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.6) inset !important;
   }
 
   &.is-focus {
-    background-color: #ffffff !important;
+    box-shadow: 0 0 0 1px #4f46e5 inset, 0 0 0 3px rgba(79, 70, 229, 0.12);
-    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2) inset, 0 0 0 1px #4f46e5 inset !important;
   }
 }
 
 :deep(.el-input__inner) {
-  height: 48px;
   font-size: 15px;
   color: #1e293b;
-  &::placeholder {
-    color: #94a3b8;
-  }
-}
 
-:deep(.el-input__prefix) {
+  &::placeholder {
-  color: #94a3b8;
+    color: #a4acba;
-  font-size: 16px;
+  }
-  margin-right: 8px;
 }
 
 .login-options {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 28px;
+  margin: -2px 0 30px;
-  margin-top: -8px;
 
   :deep(.el-checkbox__label) {
-    color: #64748b;
+    color: #556070;
+    font-size: 14px;
   }
+
   :deep(.el-link) {
     font-weight: 500;
     color: #4f46e5;
+
     &:hover {
       color: #4338ca;
     }
@@ -267,30 +350,227 @@ async function handleLogin() {
 
 .login-btn {
   width: 100%;
-  height: 48px;
+  height: 54px;
   font-size: 16px;
   font-weight: 600;
-  border-radius: 12px;
+  border-radius: 8px;
   border: none;
   background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
   color: #fff;
-  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
+  box-shadow: 0 10px 22px rgba(79, 70, 229, 0.18);
-  transition: all 0.3s ease;
+  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
-
-  .login-btn-icon {
-    margin-right: 8px;
-    font-size: 18px;
-  }
 
   &:hover {
     transform: translateY(-1px);
-    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.4);
+    box-shadow: 0 14px 26px rgba(79, 70, 229, 0.24);
     background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
   }
 
   &:active {
-    transform: translateY(1px);
+    transform: translateY(0);
-    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
+    box-shadow: 0 6px 14px rgba(79, 70, 229, 0.2);
+  }
+}
+
+.login-panel footer {
+  position: absolute;
+  right: clamp(36px, 4vw, 64px);
+  bottom: 34px;
+  color: #9aa2b2;
+  font-size: 13px;
+}
+
+@media (max-width: 1440px) {
+  .login-page {
+    grid-template-columns: minmax(0, 55fr) minmax(500px, 45fr);
+  }
+
+  .login-visual-content {
+    padding-inline: clamp(52px, 5vw, 72px);
+  }
+
+  .login-visual-copy {
+    max-width: 580px;
+
+    h1 {
+      font-size: clamp(42px, 3.6vw, 52px);
+    }
+
+    p {
+      font-size: clamp(16px, 1.45vw, 20px);
+    }
+  }
+
+  .login-panel {
+    padding-inline: clamp(44px, 4.2vw, 64px);
+  }
+
+  .login-form-wrap {
+    max-width: 440px;
+  }
+}
+
+@media (max-width: 1180px) {
+  .login-page {
+    grid-template-columns: minmax(0, 52fr) minmax(470px, 48fr);
+  }
+
+  .login-visual-content {
+    padding-inline: 48px;
+  }
+
+  .login-visual-copy h1 {
+    font-size: 42px;
+  }
+
+  .login-visual-footer {
+    gap: 14px;
+    font-size: 14px;
+  }
+}
+
+@media (max-height: 820px) and (min-width: 901px) {
+  .login-visual {
+    background-position: center 54%;
+  }
+
+  .login-visual-content {
+    padding-top: 48px;
+    padding-bottom: 38px;
+  }
+
+  .login-visual-copy {
+    max-width: 560px;
+    margin-top: clamp(52px, 9vh, 72px);
+
+    h1 {
+      font-size: clamp(38px, 3.4vw, 46px);
+    }
+
+    p {
+      margin-top: 14px;
+      font-size: clamp(15px, 1.35vw, 18px);
+    }
+  }
+
+  .login-visual-footer {
+    gap: 14px;
+    font-size: 14px;
+  }
+
+  .login-panel {
+    padding-top: 78px;
+    padding-bottom: 56px;
+  }
+
+  .brand-lockup {
+    top: 24px;
+  }
+
+  .login-heading {
+    margin-bottom: 26px;
+
+    > span {
+      margin-bottom: 16px;
+      font-size: 15px;
+    }
+
+    h2 {
+      font-size: 38px;
+    }
+
+    p {
+      margin-top: 8px;
+      font-size: 15px;
+    }
+  }
+
+  :deep(.el-form-item) {
+    margin-bottom: 18px;
+  }
+
+  :deep(.el-form-item__label) {
+    margin-bottom: 7px;
+    font-size: 14px;
+  }
+
+  :deep(.el-input__wrapper) {
+    min-height: 48px;
+  }
+
+  .login-options {
+    margin-bottom: 20px;
+  }
+
+  .login-btn {
+    height: 50px;
+  }
+
+  .login-panel footer {
+    bottom: 18px;
+  }
+}
+
+@media (max-width: 900px) {
+  .login-page {
+    display: block;
+    height: auto;
+    min-height: 100vh;
+    min-height: 100dvh;
+    overflow: auto;
+  }
+
+  .login-visual {
+    display: none;
+  }
+
+  .login-panel {
+    height: auto;
+    min-height: 100vh;
+    min-height: 100dvh;
+    padding: 116px 32px 84px;
+    border-left: 0;
+  }
+
+  .login-panel footer {
+    right: 50%;
+    transform: translateX(50%);
+    white-space: nowrap;
+  }
+}
+
+@media (max-width: 560px) {
+  .login-panel {
+    display: flex;
+    align-items: center;
+    padding: 100px 24px 72px;
+  }
+
+  .brand-lockup {
+    top: 28px;
+    right: 24px;
+    transform: scale(0.88);
+    transform-origin: top right;
+  }
+
+  .login-heading {
+    margin-bottom: 32px;
+
+    > span {
+      margin-bottom: 18px;
+    }
+
+    h2 {
+      font-size: 36px;
+    }
+  }
+
+  :deep(.el-form-item) {
+    margin-bottom: 22px;
+  }
+
+  .login-options {
+    margin-bottom: 26px;
   }
 }
 </style>

frontend/src/views/system/training-log/TrainingTaskOverview.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import PageCard from '@/components/PageCard.vue'
+import { DATASET_TYPE_MAP, STORAGE_MAP, TRAIN_METHOD_MAP, TRAIN_TYPE_MAP } from '@/constants'
+import type { DatasetItem, FineTuneTask } from '@/types'
+
+defineProps<{
+  task: FineTuneTask | null
+  dataset: DatasetItem | null
+  baseModelName: string
+}>()
+
+function formatDateTime(value?: string) {
+  if (!value) return '-'
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return value
+  return date.toLocaleString('zh-CN', { hour12: false })
+}
+</script>
+
+<template>
+  <PageCard class="task-overview" title="任务信息" subtitle="模型、数据集与运行配置">
+    <div class="overview-layout" aria-label="训练任务信息">
+      <el-descriptions class="task-descriptions task-profile" :column="2" border>
+        <el-descriptions-item label="任务 ID">{{ task?.id ?? '-' }}</el-descriptions-item>
+        <el-descriptions-item label="创建时间">{{ formatDateTime(task?.create_time) }}</el-descriptions-item>
+        <el-descriptions-item label="基座模型">{{ baseModelName }}</el-descriptions-item>
+        <el-descriptions-item label="输出模型">{{ task?.output_model_name || '暂未生成' }}</el-descriptions-item>
+        <el-descriptions-item label="训练方式">
+          {{ task?.train_type ? (TRAIN_TYPE_MAP[task.train_type] || task.train_type) : '未配置' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="训练方法">
+          {{ task?.train_method ? (TRAIN_METHOD_MAP[task.train_method] || task.train_method) : '未配置' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="训练数据集" class-name="dataset-profile">
+          {{ dataset?.name || (task?.train_dataset_id ? '正在加载' : '未配置') }}
+        </el-descriptions-item>
+        <el-descriptions-item label="数据类型">
+          {{ dataset ? (DATASET_TYPE_MAP[dataset.type] || dataset.type || '未配置') : '未配置' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="数据条数">
+          {{ dataset?.count?.toLocaleString('zh-CN') ?? '未配置' }}{{ dataset?.count != null ? ' 条' : '' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="数据大小">{{ dataset?.size || '未配置' }}</el-descriptions-item>
+        <el-descriptions-item label="训练开始时间" class-name="runtime-panel">
+          {{ formatDateTime(task?.create_time) }}
+        </el-descriptions-item>
+        <el-descriptions-item label="训练时长">{{ task?.train_duration || '未配置' }}</el-descriptions-item>
+        <el-descriptions-item label="存储位置">
+          {{ STORAGE_MAP[dataset?.storage_type || ''] || dataset?.storage_type || '未配置' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="使用 GPU">
+          {{ task?.gpus?.length ? task.gpus.join('、') : '未配置' }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </div>
+  </PageCard>
+</template>
+
+<style scoped lang="scss">
+.task-overview {
+  margin-bottom: 0;
+  border: 1px solid #e4e7ed !important;
+  border-radius: 8px !important;
+  box-shadow: none !important;
+}
+.overview-layout { width: 100%; }
+.task-descriptions :deep(.el-descriptions__label) {
+  width: 132px;
+  color: #606266;
+  font-weight: 500;
+  background: #f7f8fa !important;
+}
+.task-descriptions :deep(.el-descriptions__content) {
+  color: #303133;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+.task-descriptions :deep(.el-descriptions__cell) { padding: 12px 16px !important; }
+
+@media (max-width: 700px) {
+  .task-descriptions :deep(.el-descriptions__body),
+  .task-descriptions :deep(.el-descriptions__table),
+  .task-descriptions :deep(.el-descriptions__tbody),
+  .task-descriptions :deep(.el-descriptions__row),
+  .task-descriptions :deep(.el-descriptions__cell) { display: block; width: 100%; box-sizing: border-box; }
+  .task-descriptions :deep(.el-descriptions__label) { width: 100%; border-bottom: 0 !important; }
+}
+</style>

frontend/src/views/system/training-log/trainingLogModel.ts

@@ -0,0 +1,165 @@
+import type { EChartsOption } from 'echarts'
+import type { FineTuneTask, TrainingLogFile } from '@/types'
+
+export interface TrainingMetricData {
+  loss: number[]
+  gradNorm: number[]
+  lr: number[]
+  epoch: number[]
+}
+
+export interface TrainingSummary {
+  epoch: string
+  trainLoss: string
+  runtime: string
+}
+
+export interface ParsedTrainingLog {
+  metrics: TrainingMetricData
+  summary: TrainingSummary
+}
+
+const NUMBER_SOURCE = '[-+]?(?:\\d+(?:\\.\\d*)?|\\.\\d+)(?:[eE][-+]?\\d+)?'
+
+function escapeRegExp(value: string) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+function extractNumber(source: string, key: string) {
+  const match = source.match(new RegExp(`['"]?${escapeRegExp(key)}['"]?\\s*:\\s*(${NUMBER_SOURCE})`, 'i'))
+  return match ? Number(match[1]) : undefined
+}
+
+function extractSummaryValue(source: string, key: string) {
+  const match = source.match(new RegExp(`['"]?${escapeRegExp(key)}['"]?\\s*(?:=|:)\\s*(${NUMBER_SOURCE})`, 'i'))
+  return match?.[1] || ''
+}
+
+/** 根据任务精确选择日志；PID 优先，任务名仅作为明确兜底。 */
+export function resolveTrainingLogFile(
+  files: TrainingLogFile[],
+  task: Pick<FineTuneTask, 'process_id' | 'name'>,
+) {
+  const processId = task.process_id
+  if (processId != null) {
+    const pidMatch = files.find((file) => file.pid === processId)
+    if (pidMatch) return pidMatch
+
+    const pidPattern = new RegExp(`(?:^|[^0-9])(?:pid)?${processId}(?:[^0-9]|$)`, 'i')
+    const filenameMatch = files.find((file) => pidPattern.test(file.file))
+    if (filenameMatch) return filenameMatch
+  }
+
+  const taskName = task.name.trim()
+  if (!taskName) return undefined
+  return files.find((file) => file.name.includes(taskName) || file.file.includes(taskName))
+}
+
+/** 解析日志中的逐步指标。字段顺序和常见数值格式均不受限制。 */
+export function parseTrainingMetrics(text: string): TrainingMetricData {
+  const metrics: TrainingMetricData = { loss: [], gradNorm: [], lr: [], epoch: [] }
+  const blocks = text.match(/\{[^{}\r\n]*\}/g) || []
+
+  for (const block of blocks) {
+    const loss = extractNumber(block, 'loss')
+    const gradNorm = extractNumber(block, 'grad_norm')
+    const learningRate = extractNumber(block, 'learning_rate')
+    const epoch = extractNumber(block, 'epoch')
+    if (loss == null || gradNorm == null || learningRate == null) continue
+    metrics.loss.push(loss)
+    metrics.gradNorm.push(gradNorm)
+    metrics.lr.push(learningRate)
+    if (epoch != null) metrics.epoch.push(epoch)
+  }
+
+  return metrics
+}
+
+/** 每次都返回新对象，日志截断或切换时不会残留上一轮汇总。 */
+export function parseTrainingSummary(text: string): TrainingSummary {
+  const emptySummary: TrainingSummary = { epoch: '', trainLoss: '', runtime: '' }
+  const startMatch = /\*{5}\s*train metrics\s*\*{5}/i.exec(text)
+  if (!startMatch) return emptySummary
+
+  const tail = text.slice(startMatch.index + startMatch[0].length)
+  const endMatch = /\*{5}\s*train metrics end\s*\*{5}/i.exec(tail)
+  const body = endMatch ? tail.slice(0, endMatch.index) : tail
+  return {
+    epoch: extractSummaryValue(body, 'epoch'),
+    trainLoss: extractSummaryValue(body, 'train_loss'),
+    runtime: extractSummaryValue(body, 'train_runtime'),
+  }
+}
+
+export function parseTrainingLog(text: string): ParsedTrainingLog {
+  return {
+    metrics: parseTrainingMetrics(text),
+    summary: parseTrainingSummary(text),
+  }
+}
+
+/** 构建单条训练指标曲线。 */
+export function buildMetricChartOption(
+  label: string,
+  data: number[],
+  color: string,
+  logScale = false,
+): EChartsOption {
+  return {
+    grid: { top: 24, right: 20, bottom: 56, left: 56 },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'cross' },
+      backgroundColor: 'rgba(15, 23, 42, 0.9)',
+      borderWidth: 0,
+      textStyle: { color: '#fff', fontSize: 12 },
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      name: 'Step',
+      nameTextStyle: { color: '#94a3b8', fontSize: 11 },
+      axisLine: { lineStyle: { color: '#e2e8f0' } },
+      axisLabel: { color: '#94a3b8', fontSize: 11 },
+      splitLine: { show: false },
+    },
+    yAxis: {
+      type: logScale ? 'log' : 'value',
+      name: label,
+      nameTextStyle: { color: '#94a3b8', fontSize: 11 },
+      axisLine: { show: false },
+      axisTick: { show: false },
+      axisLabel: { color: '#94a3b8', fontSize: 11 },
+      splitLine: { lineStyle: { color: '#f1f5f9' } },
+    },
+    dataZoom: data.length > 30
+      ? [
+          { type: 'inside', start: 0, end: 100 },
+          { type: 'slider', height: 16, bottom: 8, borderColor: 'transparent', fillerColor: 'rgba(79,70,229,0.08)', handleStyle: { color: '#4f46e5' } },
+        ]
+      : [],
+    series: [
+      {
+        name: label,
+        type: 'line',
+        data,
+        smooth: true,
+        symbol: 'none',
+        lineStyle: { width: 2, color },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: `${color}55` },
+              { offset: 1, color: `${color}05` },
+            ],
+          },
+        },
+      },
+    ],
+  }
+}