From 0f8f41057aaa9085a1e3a62fd1c0607553107fbd Mon Sep 17 00:00:00 2001
From: caoxiaozhu <leocaoxiaozhu@gmail.com>
Date: Mon, 13 Jul 2026 11:04:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E8=BD=AC=E6=8D=A2=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

实现 DataConvertView 替换占位页，工具页 JSON 转 JSONL 入口跳转到该页面，路由指向真实视图，配套回归脚本。
---
 frontend/scripts/regression-data-convert.mjs  |  56 ++++
 frontend/src/router/index.ts                  |   2 +-
 .../views/data-convert/DataConvertView.vue    | 305 ++++++++++++++++++
 frontend/src/views/tools/ToolsView.vue        |   2 +-
 4 files changed, 363 insertions(+), 2 deletions(-)
 create mode 100644 frontend/scripts/regression-data-convert.mjs
 create mode 100644 frontend/src/views/data-convert/DataConvertView.vue

diff --git a/frontend/scripts/regression-data-convert.mjs b/frontend/scripts/regression-data-convert.mjs
new file mode 100644
index 0000000..d9b62e0
--- /dev/null
+++ b/frontend/scripts/regression-data-convert.mjs
@@ -0,0 +1,56 @@
+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 sourceRoot = path.resolve(scriptDir, '../src')
+
+const [viewSource, routerSource, toolsSource] = await Promise.all([
+  readFile(path.join(sourceRoot, 'views/data-convert/DataConvertView.vue'), 'utf8'),
+  readFile(path.join(sourceRoot, 'router/index.ts'), 'utf8'),
+  readFile(path.join(sourceRoot, 'views/tools/ToolsView.vue'), 'utf8'),
+])
+
+assert.match(viewSource, /JSON 转 JSONL/, '转换页缺少明确的格式标题')
+assert.match(viewSource, /class="upload-zone"/, '转换页缺少源文件上传区域')
+assert.match(viewSource, /class="converter-form"/, '转换页缺少标准表单区域')
+assert.match(viewSource, /class="form-row"/, '转换页缺少输出配置区域')
+assert.match(viewSource, /开始转换/, '转换页缺少主操作按钮')
+assert.match(viewSource, /当前为 UI 原型/, '转换页没有明确说明 UI 原型范围')
+assert.match(viewSource, /<el-button type="primary" disabled>/, '未接入功能前主操作按钮必须禁用')
+assert.match(viewSource, /var\(--primary-color\)/, '转换页没有使用项目主色变量')
+assert.match(viewSource, /var\(--el-color-primary-light-9\)/, '转换页没有使用项目主色浅色变量')
+assert.doesNotMatch(viewSource, /#1890ff/i, '转换页仍包含未对齐当前主题的旧蓝色')
+assert.match(viewSource, /\.converter-panel\s*\{[\s\S]*?width:\s*100%;/, '转换区域没有铺满页面宽度')
+assert.match(viewSource, /min-height:\s*calc\(100vh\s*-\s*220px\)/, '转换区域没有铺满页面可用高度')
+assert.doesNotMatch(viewSource, /max-width:\s*860px/, '转换区域仍被限制为窄卡片')
+
+// 当前迭代只允许界面开发，防止误接入文件读取、解析、转换或下载逻辑。
+for (const forbiddenImplementation of [
+  /FileReader/,
+  /\.text\(\)/,
+  /JSON\.parse/,
+  /new Blob/,
+  /createObjectURL/,
+]) {
+  assert.doesNotMatch(viewSource, forbiddenImplementation, 'UI 原型中不应包含实际转换实现')
+}
+
+assert.match(
+  routerSource,
+  /path:\s*['"]data-convert['"][\s\S]*?DataConvertView\.vue/,
+  '数据类型转换路由未接入新页面',
+)
+assert.doesNotMatch(
+  routerSource,
+  /path:\s*['"]data-convert['"][\s\S]{0,180}?PlaceholderView\.vue/,
+  '数据类型转换路由仍指向占位页',
+)
+assert.match(
+  toolsSource,
+  /id === ['"]json2jsonl['"][\s\S]{0,100}?router\.push\(['"]\/data-convert['"]\)/,
+  '其他工具中的 JSON 转 JSONL 卡片未接入转换页',
+)
+
+console.log('JSON 转 JSONL UI 原型回归检查通过')
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 074d94a..7f74203 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -181,7 +181,7 @@ const routes: RouteRecordRaw[] = [
       {
         path: 'data-convert',
         name: 'data-convert',
-        component: () => import('@/components/PlaceholderView.vue'),
+        component: () => import('@/views/data-convert/DataConvertView.vue'),
         meta: { title: '数据类型转换' },
       },
       // 系统设置
diff --git a/frontend/src/views/data-convert/DataConvertView.vue b/frontend/src/views/data-convert/DataConvertView.vue
new file mode 100644
index 0000000..511ac97
--- /dev/null
+++ b/frontend/src/views/data-convert/DataConvertView.vue
@@ -0,0 +1,305 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+import PageCard from '@/components/PageCard.vue'
+
+const settings = reactive({
+  outputName: 'converted-data',
+  encoding: 'UTF-8',
+})
+
+function showPrototypeNotice() {
+  ElMessage.info('当前仅完成界面设计，转换功能将在后续接入')
+}
+
+function resetSettings() {
+  Object.assign(settings, {
+    outputName: 'converted-data',
+    encoding: 'UTF-8',
+  })
+}
+</script>
+
+<template>
+  <PageCard
+    class="data-convert-page"
+    title="数据类型转换"
+    subtitle="将 JSON 文件转换为便于训练和评测使用的 JSONL 格式"
+  >
+    <div class="converter-panel">
+      <div class="panel-header">
+        <div class="tool-icon" aria-hidden="true">
+          <i class="fa fa-exchange" />
+        </div>
+        <div>
+          <h3>JSON 转 JSONL</h3>
+          <p>每条 JSON 数据将输出为 JSONL 文件中的一行记录</p>
+        </div>
+      </div>
+
+      <el-form class="converter-form" label-position="top">
+        <el-form-item label="转换类型">
+          <div class="format-field" aria-label="JSON 转 JSONL">
+            <span>JSON</span>
+            <i class="fa fa-long-arrow-right" aria-hidden="true" />
+            <span>JSONL</span>
+          </div>
+        </el-form-item>
+
+        <el-form-item label="源文件" required>
+          <button class="upload-zone" type="button" @click="showPrototypeNotice">
+            <i class="fa fa-cloud-upload" aria-hidden="true" />
+            <span class="upload-content">
+              <strong>点击选择或拖拽 JSON 文件到此处</strong>
+              <small>仅支持 .json 格式，单文件不超过 200 MB</small>
+            </span>
+            <span class="select-button">选择文件</span>
+          </button>
+        </el-form-item>
+
+        <div class="form-row">
+          <el-form-item label="输出文件名">
+            <el-input v-model="settings.outputName">
+              <template #append>.jsonl</template>
+            </el-input>
+          </el-form-item>
+
+          <el-form-item label="字符编码">
+            <el-select v-model="settings.encoding" style="width: 100%">
+              <el-option label="UTF-8" value="UTF-8" />
+            </el-select>
+          </el-form-item>
+        </div>
+
+        <div class="format-tip">
+          <i class="fa fa-info-circle" aria-hidden="true" />
+          <span>支持由 JSON 数组转换为 JSONL，每个数组元素输出为一行。</span>
+        </div>
+      </el-form>
+
+      <div class="panel-footer">
+        <span class="prototype-label">当前为 UI 原型，暂不执行实际转换</span>
+        <div class="actions">
+          <el-button @click="resetSettings">重置</el-button>
+          <el-tooltip content="转换功能将在后续开发中接入" placement="top">
+            <span><el-button type="primary" disabled>开始转换</el-button></span>
+          </el-tooltip>
+        </div>
+      </div>
+    </div>
+  </PageCard>
+</template>
+
+<style scoped lang="scss">
+.converter-panel {
+  width: 100%;
+  min-height: calc(100vh - 220px);
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+}
+
+.panel-header {
+  min-height: 72px;
+  padding: 16px 20px;
+  border-bottom: 1px solid #ebeef5;
+  background: #fafafa;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  box-sizing: border-box;
+
+  .tool-icon {
+    width: 38px;
+    height: 38px;
+    flex: 0 0 auto;
+    border-radius: 6px;
+    background: var(--el-color-primary-light-9);
+    color: var(--primary-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  h3 {
+    margin: 0;
+    color: #303133;
+    font-size: 15px;
+    font-weight: 600;
+  }
+
+  p {
+    margin: 4px 0 0;
+    color: #909399;
+    font-size: 12px;
+  }
+}
+
+.converter-form {
+  flex: 1;
+  padding: 22px 24px 6px;
+
+  :deep(.el-form-item) {
+    margin-bottom: 20px;
+  }
+
+  :deep(.el-form-item__label) {
+    padding-bottom: 8px;
+    color: #606266;
+    font-size: 13px;
+  }
+}
+
+.format-field {
+  width: 100%;
+  min-height: 40px;
+  padding: 0 14px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  background: #f5f7fa;
+  color: #303133;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  box-sizing: border-box;
+  font-size: 13px;
+  font-weight: 500;
+
+  i {
+    color: #909399;
+  }
+}
+
+.upload-zone {
+  width: 100%;
+  min-height: 112px;
+  padding: 20px;
+  border: 1px dashed #b8c4d1;
+  border-radius: 6px;
+  background: #fafcff;
+  color: #606266;
+  cursor: pointer;
+  font: inherit;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  text-align: left;
+  transition: border-color 0.2s ease, background 0.2s ease;
+
+  &:hover,
+  &:focus-visible {
+    border-color: var(--primary-color);
+    background: var(--el-color-primary-light-9);
+    outline: none;
+  }
+
+  > i {
+    color: var(--primary-color);
+    font-size: 24px;
+  }
+
+  .upload-content {
+    min-width: 0;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 5px;
+  }
+
+  strong {
+    color: #303133;
+    font-size: 13px;
+    font-weight: 500;
+  }
+
+  small {
+    color: #909399;
+    font-size: 12px;
+  }
+
+  .select-button {
+    min-height: 32px;
+    padding: 0 14px;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    background: #fff;
+    color: #606266;
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+  }
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr);
+  gap: 16px;
+}
+
+.format-tip {
+  min-height: 38px;
+  padding: 9px 12px;
+  border-radius: 4px;
+  background: var(--el-color-primary-light-9);
+  color: #606266;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  box-sizing: border-box;
+  font-size: 12px;
+
+  i {
+    color: var(--primary-color);
+  }
+}
+
+.panel-footer {
+  min-height: 64px;
+  padding: 12px 24px;
+  border-top: 1px solid #ebeef5;
+  background: #fafafa;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  box-sizing: border-box;
+
+  .prototype-label {
+    color: #909399;
+    font-size: 12px;
+  }
+
+  .actions {
+    display: flex;
+    gap: 10px;
+  }
+}
+
+@media (max-width: 640px) {
+  .converter-form {
+    padding: 18px 16px 4px;
+  }
+
+  .form-row {
+    grid-template-columns: 1fr;
+    gap: 0;
+  }
+
+  .upload-zone {
+    align-items: flex-start;
+    flex-wrap: wrap;
+
+    .select-button {
+      margin-left: 38px;
+    }
+  }
+
+  .panel-footer {
+    padding: 12px 16px;
+    align-items: flex-end;
+    flex-direction: column;
+  }
+}
+</style>
diff --git a/frontend/src/views/tools/ToolsView.vue b/frontend/src/views/tools/ToolsView.vue
index 9e6e5e2..ae4e077 100644
--- a/frontend/src/views/tools/ToolsView.vue
+++ b/frontend/src/views/tools/ToolsView.vue
@@ -16,7 +16,7 @@ function handleDefaultTool(id: string) {
   if (id === 'data-generate') {
     ElMessage.info('数据生成工具开发中...')
   } else if (id === 'json2jsonl') {
-    ElMessage.info('JSON转JSONL 工具开发中...')
+    router.push('/data-convert')
   } else if (id === 'md-convert') {
     ElMessage.info('转换Markdown 工具开发中...')
   }