新增数据类型转换

frontend/src/api/modules/data-convert.ts

@@ -0,0 +1,43 @@
+import { del, get, post } from '../request'
+
+export interface DataConvertTask {
+  id: string
+  name: string
+  description: string
+  status: string
+  output_filename: string
+  input_count: number
+  output_count: number
+  error_message: string
+  create_time: string
+  update_time?: string
+  input_files?: Array<{ name: string; size: number }>
+}
+
+export const getDataConvertTasks = (page = 1, pageSize = 20) =>
+  get<{ items: DataConvertTask[]; total: number }>('/data-convert', { params: { page, page_size: pageSize } })
+
+export const getDataConvertTask = (id: string) =>
+  get<DataConvertTask>(`/data-convert/${id}`)
+
+export const createDataConvertTask = (payload: Partial<DataConvertTask>) =>
+  post<DataConvertTask>('/data-convert', payload)
+
+export const uploadSourceFiles = (id: string, files: File[]) => {
+  const formData = new FormData()
+  files.forEach(f => formData.append('files', f))
+  return post(`/data-convert/${id}/source-files`, formData)
+}
+
+export const runConvert = (id: string) =>
+  post<DataConvertTask>(`/data-convert/${id}/run`)
+
+export const downloadResult = (id: string) =>
+  get(`/data-convert/${id}/download`, { responseType: 'blob' })
+
+export const deleteDataConvertTask = (id: string) =>
+  del(`/data-convert/${id}`)
+
+/** 把转换结果导入为数据集管理中的上传任务记录 */
+export const importAsDataset = (id: string, payload: { name?: string; description?: string } = {}) =>
+  post(`/data-convert/${id}/import-as-dataset`, payload)

frontend/src/stores/auth.ts

@@ -5,6 +5,7 @@ import type { PermissionCode, SystemUser } from '@/types'
 
 const USER_STORAGE_KEY = 'currentUser'
 const SESSION_STORAGE_KEY = 'sessionId'
+const AUTHED_FLAG_KEY = 'hasAuthed'
 
 const allPermissions: PermissionCode[] = [
   'dashboard',
@@ -21,25 +22,24 @@ const allPermissions: PermissionCode[] = [
   'user-settings',
 ]
 
-function restoreUser(): SystemUser | null {
-  const persisted = localStorage.getItem(USER_STORAGE_KEY)
-  if (persisted) {
+/**
+ * 认证 store
+ * - 用户信息持久化到 localStorage（刷新页面不丢失）
+ * - 但每次新开标签页/窗口必须重新点击登录（sessionStorage 标记本次会话已登录）
+ */
+export const useAuthStore = defineStore('auth', () => {
+  // 仅当 sessionStorage 里标记了"已登录"时，才从 localStorage 恢复用户
+  const hasAuthed = sessionStorage.getItem(AUTHED_FLAG_KEY) === '1'
+  const persistedUser = hasAuthed ? localStorage.getItem(USER_STORAGE_KEY) : null
+  let initialUser: SystemUser | null = null
+  if (persistedUser) {
     try {
-      return JSON.parse(persisted) as SystemUser
+      initialUser = JSON.parse(persistedUser) as SystemUser
     } catch {
       localStorage.removeItem(USER_STORAGE_KEY)
     }
   }
-  return null
-}
-
-/**
- * 认证 store
- * 登录态管理：有 currentUser 即视为已登录。
- * 离开页面超时由 App.vue 的 visibilitychange 监听接管。
- */
-export const useAuthStore = defineStore('auth', () => {
-  const currentUser = ref<SystemUser | null>(restoreUser())
+  const currentUser = ref<SystemUser | null>(initialUser)
   const username = computed(() => currentUser.value?.username || '')
   const displayName = computed(() => currentUser.value?.display_name || username.value)
   const roleLabel = computed(() => {
@@ -54,10 +54,10 @@ export const useAuthStore = defineStore('auth', () => {
   async function login(user: string, password: string) {
     const response = await loginApi(user, password)
     currentUser.value = response.user
-    localStorage.setItem('username', response.user.username)
     localStorage.setItem(USER_STORAGE_KEY, JSON.stringify(response.user))
+    sessionStorage.setItem(AUTHED_FLAG_KEY, '1')
     if (response.session_id) {
-      localStorage.setItem(SESSION_STORAGE_KEY, response.session_id)
+      sessionStorage.setItem(SESSION_STORAGE_KEY, response.session_id)
     }
   }
 
@@ -69,14 +69,14 @@ export const useAuthStore = defineStore('auth', () => {
 
   /** 退出 */
   async function logout() {
-    const sessionId = localStorage.getItem(SESSION_STORAGE_KEY)
+    const sessionId = sessionStorage.getItem(SESSION_STORAGE_KEY)
     if (sessionId) {
       try { await logoutApi(sessionId) } catch { /* 静默 */ }
     }
     currentUser.value = null
-    localStorage.removeItem('username')
     localStorage.removeItem(USER_STORAGE_KEY)
-    localStorage.removeItem(SESSION_STORAGE_KEY)
+    sessionStorage.removeItem(AUTHED_FLAG_KEY)
+    sessionStorage.removeItem(SESSION_STORAGE_KEY)
   }
 
   return {

frontend/src/views/data-convert/DataConvertView.vue

@@ -1,305 +1,165 @@
 <script setup lang="ts">
-import { reactive } from 'vue'
-import { ElMessage } from 'element-plus'
+import { onMounted, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Delete, Refresh } from '@element-plus/icons-vue'
+import type { UploadRequestOptions } from 'element-plus'
 import PageCard from '@/components/PageCard.vue'
+import {
+  getDataConvertTasks,
+  createDataConvertTask,
+  uploadSourceFiles,
+  deleteDataConvertTask,
+  type DataConvertTask,
+} from '@/api/modules/data-convert'
 
-const settings = reactive({
-  outputName: 'converted-data',
-  encoding: 'UTF-8',
-})
+const loading = ref(false)
+const tasks = ref<DataConvertTask[]>([])
+const showCreate = ref(false)
+const form = ref({ name: '', outputName: 'converted-data' })
 
-function showPrototypeNotice() {
-  ElMessage.info('当前仅完成界面设计，转换功能将在后续接入')
+async function load() {
+  loading.value = true
+  try {
+    const res = await getDataConvertTasks()
+    tasks.value = res.items || []
+  } finally {
+    loading.value = false
+  }
 }
 
-function resetSettings() {
-  Object.assign(settings, {
-    outputName: 'converted-data',
-    encoding: 'UTF-8',
+async function submitCreate() {
+  if (!form.value.name) {
+    ElMessage.warning('请填写任务名称')
+    return
+  }
+  await createDataConvertTask({
+    name: form.value.name,
+    output_filename: form.value.outputName + '.jsonl',
   })
+  ElMessage.success('任务创建成功')
+  showCreate.value = false
+  form.value = { name: '', outputName: 'converted-data' }
+  load()
 }
+
+async function customUpload(options: UploadRequestOptions) {
+  const taskId = options.data?.taskId as string
+  if (!taskId) {
+    ElMessage.error('任务 ID 缺失')
+    return
+  }
+  try {
+    const res = await uploadSourceFiles(taskId, [options.file])
+    const data = (res as any)?.data || res
+    if (data?.auto_converted) {
+      ElMessage.success(
+        `上传并自动转换完成，输入 ${data.input_count} / 输出 ${data.output_count}，已自动导入数据集`,
+      )
+    } else {
+      ElMessage.warning('上传完成，但转换失败：' + (data?.error || '未知错误'))
+    }
+    load()
+  } catch {
+    ElMessage.error('上传失败')
+  }
+}
+
+async function handleDelete(task: DataConvertTask) {
+  try {
+    await ElMessageBox.confirm(
+      `确定要删除任务「${task.name}」吗？`,
+      '删除确认',
+      { confirmButtonText: '确定删除', cancelButtonText: '取消', type: 'warning' },
+    )
+  } catch {
+    return
+  }
+  await deleteDataConvertTask(task.id)
+  ElMessage.success('任务已删除')
+  load()
+}
+
+function statusTag(status: string) {
+  const map: Record<string, { type: string; label: string }> = {
+    pending: { type: 'info', label: '待上传' },
+    uploaded: { type: 'warning', label: '已上传' },
+    running: { type: 'warning', label: '转换中' },
+    completed: { type: 'success', label: '已完成' },
+    failed: { type: 'danger', label: '失败' },
+  }
+  return map[status] || { type: 'info', label: status }
+}
+
+onMounted(load)
 </script>
 
 <template>
   <PageCard
     class="data-convert-page"
     title="数据类型转换"
-    subtitle="将 JSON 文件转换为便于训练和评测使用的 JSONL 格式"
+    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 class="toolbar">
+      <el-button type="primary" :icon="Plus" @click="showCreate = true">新建转换任务</el-button>
+      <el-button :icon="Refresh" @click="load">刷新</el-button>
     </div>
+
+    <el-table :data="tasks" v-loading="loading" border stripe>
+      <el-table-column prop="name" label="任务名称" min-width="140" />
+      <el-table-column label="状态" min-width="100">
+        <template #default="{ row }">
+          <el-tag :type="statusTag(row.status).type">{{ statusTag(row.status).label }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="数据量" min-width="120">
+        <template #default="{ row }">
+          {{ row.output_count }} 条
+        </template>
+      </el-table-column>
+      <el-table-column prop="output_filename" label="输出文件名" min-width="160" />
+      <el-table-column prop="create_time" label="创建时间" min-width="180" />
+      <el-table-column label="操作" width="240" fixed="right">
+        <template #default="{ row }">
+          <el-upload
+            v-if="row.status === 'pending'"
+            :auto-upload="true"
+            :show-file-list="false"
+            accept=".json"
+            :http-request="customUpload"
+            :data="{ taskId: row.id }"
+            style="display: inline-block; margin-right: 8px"
+          >
+            <el-button link type="primary">上传文件</el-button>
+          </el-upload>
+          <el-button link type="danger" :icon="Delete" @click="handleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 新建任务弹窗 -->
+    <el-dialog v-model="showCreate" title="新建转换任务" width="480px">
+      <el-form label-width="100px">
+        <el-form-item label="任务名称" required>
+          <el-input v-model="form.name" placeholder="请输入任务名称" />
+        </el-form-item>
+        <el-form-item label="输出文件名">
+          <el-input v-model="form.outputName" placeholder="converted-data">
+            <template #append>.jsonl</template>
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="showCreate = false">取消</el-button>
+        <el-button type="primary" @click="submitCreate">创建</el-button>
+      </template>
+    </el-dialog>
   </PageCard>
 </template>
 
 <style scoped lang="scss">
-.converter-panel {
-  width: 100%;
-  min-height: calc(100vh - 220px);
-  border: 1px solid #e4e7ed;
-  border-radius: 8px;
-  background: #fff;
+.toolbar {
   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;
-  }
+  gap: 10px;
+  margin-bottom: 16px;
 }
 </style>