From 3e2d07a502c15e4694c0efb039b5429e50008e97 Mon Sep 17 00:00:00 2001
From: Developer <developer@example.com>
Date: Wed, 18 Mar 2026 16:08:16 +0800
Subject: [PATCH] =?UTF-8?q?refactor(frontend):=20=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E8=A7=86=E5=9B=BE=E5=92=8C=E6=96=87=E6=9C=AC?=
 =?UTF-8?q?=E5=88=86=E5=89=B2=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- App.vue: 更新样式和路由配置
- ProjectView.vue: 布局调整
- TextSplit.vue: 分割功能完善

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/App.vue                     |   72 +-
 frontend/src/views/ProjectView.vue       |    2 +-
 frontend/src/views/project/TextSplit.vue | 1010 ++++++++++++++++------
 3 files changed, 802 insertions(+), 282 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 3cdd8ac..87cda5d 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -33,12 +33,12 @@ const locale = ref(zhCn)
 @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
 
 :root {
-  /* Core Colors - Deep Space */
-  --bg-primary: #030407;
-  --bg-secondary: #0a0a0f;
-  --bg-tertiary: #12121a;
-  --bg-elevated: #1a1a24;
-  --bg-hover: #22222e;
+  /* Core Colors - Deep Space with Gradient */
+  --bg-primary: #0a0a14;
+  --bg-secondary: #12121f;
+  --bg-tertiary: #1a1a2a;
+  --bg-elevated: #222233;
+  --bg-hover: #2a2a3d;
 
   /* Accent - Cyan Violet */
   --accent-primary: #00d4ff;
@@ -69,8 +69,8 @@ const locale = ref(zhCn)
   /* Effects */
   --glow-primary: 0 0 30px rgba(0, 212, 255, 0.25);
   --glow-secondary: 0 0 30px rgba(124, 58, 237, 0.25);
-  --glass-bg: rgba(18, 18, 26, 0.6);
-  --glass-border: rgba(255, 255, 255, 0.06);
+  --glass-bg: rgba(26, 26, 42, 0.65);
+  --glass-border: rgba(255, 255, 255, 0.08);
 
   /* Spacing */
   --radius-sm: 6px;
@@ -110,6 +110,12 @@ html, body, #app {
   min-height: 100vh;
   position: relative;
   overflow: hidden;
+  background:
+    radial-gradient(ellipse 100% 80% at 50% 120%, rgba(99, 102, 241, 0.15), transparent 50%),
+    radial-gradient(ellipse 80% 60% at 80% 10%, rgba(0, 212, 255, 0.12), transparent 40%),
+    radial-gradient(ellipse 70% 50% at 10% 80%, rgba(124, 58, 237, 0.1), transparent 40%),
+    radial-gradient(ellipse 60% 40% at 90% 90%, rgba(236, 72, 153, 0.08), transparent 40%),
+    linear-gradient(180deg, var(--bg-primary) 0%, #0f0f1a 100%);
 }
 
 .bg-mesh {
@@ -123,50 +129,50 @@ html, body, #app {
 .mesh-gradient {
   position: absolute;
   border-radius: 50%;
-  filter: blur(120px);
-  opacity: 0.5;
-  animation: float 25s ease-in-out infinite;
+  filter: blur(80px);
+  opacity: 0.6;
+  animation: float 20s ease-in-out infinite;
 }
 
 .mesh-1 {
-  width: 700px;
-  height: 700px;
-  background: radial-gradient(circle, rgba(0, 212, 255, 0.35) 0%, transparent 70%);
-  top: -250px;
-  right: -150px;
+  width: 800px;
+  height: 800px;
+  background: radial-gradient(circle, rgba(0, 212, 255, 0.4) 0%, rgba(6, 182, 212, 0.2) 40%, transparent 70%);
+  top: -300px;
+  right: -200px;
   animation-delay: 0s;
 }
 
 .mesh-2 {
-  width: 600px;
-  height: 600px;
-  background: radial-gradient(circle, rgba(124, 58, 237, 0.3) 0%, transparent 70%);
-  bottom: -200px;
-  left: -150px;
-  animation-delay: -8s;
+  width: 700px;
+  height: 700px;
+  background: radial-gradient(circle, rgba(124, 58, 237, 0.4) 0%, rgba(139, 92, 246, 0.2) 40%, transparent 70%);
+  bottom: -250px;
+  left: -200px;
+  animation-delay: -7s;
 }
 
 .mesh-3 {
-  width: 500px;
-  height: 500px;
-  background: radial-gradient(circle, rgba(6, 182, 212, 0.2) 0%, transparent 70%);
-  top: 40%;
-  left: 30%;
-  animation-delay: -16s;
+  width: 600px;
+  height: 600px;
+  background: radial-gradient(circle, rgba(236, 72, 153, 0.3) 0%, rgba(168, 85, 247, 0.15) 40%, transparent 70%);
+  top: 30%;
+  left: 25%;
+  animation-delay: -14s;
 }
 
 @keyframes float {
   0%, 100% { transform: translate(0, 0) scale(1); }
-  25% { transform: translate(40px, -40px) scale(1.08); }
-  50% { transform: translate(-30px, 30px) scale(0.95); }
-  75% { transform: translate(-40px, -25px) scale(1.03); }
+  25% { transform: translate(60px, -50px) scale(1.1); }
+  50% { transform: translate(-40px, 40px) scale(0.95); }
+  75% { transform: translate(-50px, -30px) scale(1.05); }
 }
 
 .noise-overlay {
   position: absolute;
   inset: 0;
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
-  opacity: 0.025;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+  opacity: 0.035;
 }
 
 .app-content {
diff --git a/frontend/src/views/ProjectView.vue b/frontend/src/views/ProjectView.vue
index de45a7b..c8a06cd 100644
--- a/frontend/src/views/ProjectView.vue
+++ b/frontend/src/views/ProjectView.vue
@@ -64,7 +64,7 @@ const project = ref({ name: '加载中...', description: '' })
 
 const navItems = [
   { path: 'files', label: '文件管理', icon: 'Folder' },
-  { path: 'split', label: '文本分割', icon: 'Operation' },
+  { path: 'split', label: '分割生成', icon: 'Operation' },
   { path: 'questions', label: '问答管理', icon: 'ChatDotSquare' },
   { path: 'datasets', label: '数据集', icon: 'Collection' },
   { path: 'eval', label: '评估系统', icon: 'DataAnalysis' },
diff --git a/frontend/src/views/project/TextSplit.vue b/frontend/src/views/project/TextSplit.vue
index dabaedb..8e16f85 100644
--- a/frontend/src/views/project/TextSplit.vue
+++ b/frontend/src/views/project/TextSplit.vue
@@ -1,150 +1,258 @@
 <template>
   <div class="text-split">
-    <!-- Page Header -->
+    <!-- Header -->
     <div class="page-header">
       <div class="header-left">
-        <h2>文本分割</h2>
-        <p class="header-desc">将文档内容智能分割为文本块</p>
+        <h2 class="page-title">分割生成</h2>
+        <p class="page-subtitle">选择文件进行智能分割</p>
       </div>
       <div class="header-actions">
-        <el-button @click="refreshChunks" class="action-btn">
+        <el-button @click="refreshFiles" class="refresh-btn">
           <el-icon><Refresh /></el-icon>
-          刷新
+          <span>刷新</span>
         </el-button>
-        <el-button type="primary" @click="showSplitDialog = true" class="action-btn">
-          <el-icon><Plus /></el-icon>
-          新建分割
+        <el-button
+          type="primary"
+          @click="handleBatchGenerateQA"
+          :disabled="!hasProcessedFiles"
+          class="generate-btn"
+        >
+          <el-icon><ChatDotSquare /></el-icon>
+          <span>批量生成问答对</span>
         </el-button>
       </div>
     </div>
 
-    <!-- Split Config Card -->
-    <div class="config-card" v-if="selectedFile">
-      <div class="config-header">
-        <div class="config-title">
-          <div class="file-badge">
-            <el-icon><Document /></el-icon>
-          </div>
-          <span>{{ selectedFile.filename }}</span>
+    <!-- Stats Cards -->
+    <div class="stats-grid">
+      <div class="stat-card">
+        <div class="stat-icon total">
+          <el-icon><Document /></el-icon>
+        </div>
+        <div class="stat-content">
+          <span class="stat-value">{{ files.length }}</span>
+          <span class="stat-label">总文件</span>
         </div>
       </div>
-
-      <div class="config-form">
-        <div class="form-row">
-          <div class="form-item">
-            <label>分割算法</label>
-            <el-select v-model="splitConfig.method" placeholder="选择算法">
-              <el-option label="Markdown 结构分割" value="markdown_structure" />
-              <el-option label="递归字符分割" value="recursive" />
-              <el-option label="Token 数量分割" value="token" />
-              <el-option label="代码感知分割" value="code" />
-              <el-option label="自定义分隔符" value="custom" />
-            </el-select>
-          </div>
+      <div class="stat-card success">
+        <div class="stat-icon">
+          <el-icon><CircleCheckFilled /></el-icon>
         </div>
-
-        <div class="form-row sliders">
-          <div class="form-item">
-            <label>块大小: {{ splitConfig.chunk_size }}</label>
-            <el-slider v-model="splitConfig.chunk_size" :min="100" :max="2000" :step="100" :marks="{100: '100', 500: '500', 1000: '1k', 2000: '2k'}" />
-          </div>
-          <div class="form-item">
-            <label>重叠字符: {{ splitConfig.overlap }}</label>
-            <el-slider v-model="splitConfig.overlap" :min="0" :max="500" :step="50" :marks="{0: '0', 250: '250', 500: '500'}" />
-          </div>
-        </div>
-
-        <div class="form-item" v-if="splitConfig.method === 'custom'">
-          <label>自定义分隔符</label>
-          <el-input v-model="splitConfig.separator" placeholder="例如: \n\n 或 || 或 ---" />
-        </div>
-
-        <div class="config-action">
-          <el-button type="primary" size="large" @click="handleSplit" :loading="splitting" class="start-btn">
-            <el-icon><CaretRight /></el-icon>
-            开始分割
-          </el-button>
+        <div class="stat-content">
+          <span class="stat-value">{{ completedFiles }}</span>
+          <span class="stat-label">已分割</span>
         </div>
       </div>
-    </div>
-
-    <div v-else class="empty-state">
-      <div class="empty-illustration">
-        <div class="ring"></div>
-        <el-icon size="56"><Document /></el-icon>
+      <div class="stat-card processing">
+        <div class="stat-icon">
+          <el-icon><Loading /></el-icon>
+        </div>
+        <div class="stat-content">
+          <span class="stat-value">{{ processingCount }}</span>
+          <span class="stat-label">分割中</span>
+        </div>
       </div>
-      <h3>未选择文件</h3>
-      <p>请从文件管理中选择一个文件开始分割</p>
-    </div>
-
-    <!-- Chunk List -->
-    <div class="chunks-card" v-if="selectedFile && chunks.length > 0">
-      <div class="chunks-header">
-        <div class="chunks-title">
+      <div class="stat-card">
+        <div class="stat-icon chunks">
           <el-icon><List /></el-icon>
-          <span>文本块 ({{ chunks.length }})</span>
         </div>
-        <el-tag type="primary" effect="dark">
-          总计 {{ totalWords }} 字
-        </el-tag>
-      </div>
-
-      <div class="chunk-list" v-loading="loading">
-        <div
-          v-for="(chunk, index) in chunks"
-          :key="chunk.id"
-          class="chunk-item"
-          :style="{ '--delay': index * 0.03 + 's' }"
-        >
-          <div class="chunk-header">
-            <div class="chunk-badge">{{ index + 1 }}</div>
-            <span class="chunk-title">{{ chunk.name || '未命名' }}</span>
-            <span class="chunk-meta">{{ chunk.word_count || 0 }} 字</span>
-          </div>
-          <div class="chunk-content">{{ chunk.content }}</div>
+        <div class="stat-content">
+          <span class="stat-value">{{ totalChunks }}</span>
+          <span class="stat-label">总文本块</span>
         </div>
       </div>
     </div>
 
-    <!-- Select File Dialog -->
-    <el-dialog v-model="showSplitDialog" title="选择文件" width="500px" class="select-dialog">
-      <el-select v-model="selectedFileId" placeholder="选择要分割的文件" style="width: 100%" size="large">
-        <el-option
-          v-for="file in files"
-          :key="file.id"
-          :label="file.filename"
-          :value="file.id"
-        >
-          <div class="file-option">
-            <el-icon><Document /></el-icon>
-            <span>{{ file.filename }}</span>
+    <!-- File List / Split View -->
+    <div class="content-area">
+      <!-- Empty State -->
+      <div v-if="!loading && files.length === 0" class="empty-state">
+        <div class="empty-icon">
+          <el-icon size="56"><FolderOpened /></el-icon>
+        </div>
+        <h3 class="empty-title">暂无可分割文件</h3>
+        <p class="empty-desc">请先在文件管理中上传文档</p>
+      </div>
+
+      <!-- File Table -->
+      <div v-else-if="!selectedFile" class="files-table-wrapper">
+        <div class="table-header">
+          <span class="table-title">文件列表</span>
+        </div>
+        <div class="files-list">
+          <div
+            v-for="(file, index) in files"
+            :key="file.id"
+            class="file-row"
+            :class="{ processing: file.status === 'processing' }"
+            :style="{ '--delay': index * 0.03 + 's' }"
+            @click="handleFileClick(file)"
+          >
+            <div class="col-icon">
+              <div class="file-type-icon" :style="{ background: getFileBg(file.file_type) }">
+                <el-icon size="18" color="white">
+                  <component :is="getFileIcon(file.file_type)" />
+                </el-icon>
+              </div>
+            </div>
+            <div class="col-name">
+              <span class="file-name">{{ file.filename }}</span>
+              <span class="file-meta">{{ formatSize(file.size) }}</span>
+            </div>
+            <div class="col-chunks">
+              <span v-if="fileChunks[file.id]" class="chunk-count">
+                {{ fileChunks[file.id] }} 块
+              </span>
+              <span v-else class="chunk-count empty">-</span>
+            </div>
+            <div class="col-status">
+              <div v-if="file.status === 'processing'" class="status-badge processing">
+                <el-icon class="spin" size="12"><Loading /></el-icon>
+                <span>分割中</span>
+              </div>
+              <div v-else-if="fileChunks[file.id]" class="status-badge success">
+                <el-icon size="12"><CircleCheckFilled /></el-icon>
+                <span>已完成</span>
+              </div>
+              <div v-else class="status-badge pending">
+                <el-icon size="12"><Clock /></el-icon>
+                <span>待分割</span>
+              </div>
+            </div>
+            <div class="col-action">
+              <el-icon><ArrowRight /></el-icon>
+            </div>
           </div>
-        </el-option>
-      </el-select>
-      <template #footer>
-        <el-button @click="showSplitDialog = false">取消</el-button>
-        <el-button type="primary" @click="confirmSelectFile">确认</el-button>
-      </template>
-    </el-dialog>
+        </div>
+      </div>
+
+      <!-- Split Detail View -->
+      <div v-else class="split-detail">
+        <div class="detail-header">
+          <el-button text @click="selectedFile = null" class="back-btn">
+            <el-icon><ArrowLeft /></el-icon>
+            <span>返回文件列表</span>
+          </el-button>
+          <div class="file-info">
+            <div class="file-type-icon small" :style="{ background: getFileBg(selectedFile.file_type) }">
+              <el-icon size="14" color="white">
+                <component :is="getFileIcon(selectedFile.file_type)" />
+              </el-icon>
+            </div>
+            <span class="file-name">{{ selectedFile.filename }}</span>
+          </div>
+        </div>
+
+        <!-- Split Config -->
+        <div class="config-card">
+          <div class="config-title">分割配置</div>
+          <div class="config-form">
+            <div class="form-row">
+              <div class="form-item">
+                <label>分割算法</label>
+                <el-select v-model="splitConfig.method" placeholder="选择算法">
+                  <el-option label="Markdown 结构分割" value="markdown_structure" />
+                  <el-option label="递归字符分割" value="recursive" />
+                  <el-option label="Token 数量分割" value="token" />
+                  <el-option label="代码感知分割" value="code" />
+                  <el-option label="自定义分隔符" value="custom" />
+                </el-select>
+              </div>
+            </div>
+            <div class="form-row sliders">
+              <div class="form-item">
+                <label>块大小: {{ splitConfig.chunk_size }}</label>
+                <el-slider
+                  v-model="splitConfig.chunk_size"
+                  :min="100"
+                  :max="2000"
+                  :step="100"
+                  :marks="{100: '100', 500: '500', 1000: '1k', 2000: '2k'}"
+                />
+              </div>
+              <div class="form-item">
+                <label>重叠字符: {{ splitConfig.overlap }}</label>
+                <el-slider
+                  v-model="splitConfig.overlap"
+                  :min="0"
+                  :max="500"
+                  :step="50"
+                  :marks="{0: '0', 250: '250', 500: '500'}"
+                />
+              </div>
+            </div>
+            <div class="form-item" v-if="splitConfig.method === 'custom'">
+              <label>自定义分隔符</label>
+              <el-input v-model="splitConfig.separator" placeholder="例如: \n\n 或 || 或 ---" />
+            </div>
+            <div class="config-actions">
+              <el-button type="primary" @click="handleSplit" :loading="splitting" class="split-btn">
+                <el-icon><CaretRight /></el-icon>
+                开始分割
+              </el-button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Chunks List -->
+        <div class="chunks-card" v-if="chunks.length > 0">
+          <div class="chunks-header">
+            <div class="chunks-title">
+              <el-icon><List /></el-icon>
+              <span>文本块 ({{ chunks.length }})</span>
+            </div>
+            <el-tag type="primary" effect="dark">
+              总计 {{ totalWords }} 字
+            </el-tag>
+          </div>
+          <div class="chunks-list" v-loading="loadingChunks">
+            <div
+              v-for="(chunk, index) in chunks"
+              :key="chunk.id"
+              class="chunk-item"
+            >
+              <div class="chunk-header">
+                <div class="chunk-badge">{{ index + 1 }}</div>
+                <el-input
+                  v-model="chunk.name"
+                  class="chunk-name-input"
+                  placeholder="输入块名称"
+                  @blur="saveChunkName(chunk)"
+                />
+                <span class="chunk-meta">{{ chunk.word_count || 0 }} 字</span>
+              </div>
+              <el-input
+                v-model="chunk.content"
+                type="textarea"
+                :rows="4"
+                class="chunk-content-input"
+                @blur="saveChunkContent(chunk)"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { ref, reactive, computed, onMounted } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import { fileApi, chunkApi } from '@/api'
 
 const route = useRoute()
+const router = useRouter()
 const projectId = computed(() => route.params.id)
 
 const loading = ref(false)
+const loadingChunks = ref(false)
 const splitting = ref(false)
 const files = ref([])
-const chunks = ref([])
-const selectedFileId = ref('')
 const selectedFile = ref(null)
-const showSplitDialog = ref(false)
+const chunks = ref([])
+const fileChunks = ref({})
 
 const splitConfig = reactive({
   method: 'recursive',
@@ -153,35 +261,71 @@ const splitConfig = reactive({
   separator: '\n\n'
 })
 
+const completedFiles = computed(() => {
+  return Object.keys(fileChunks.value).length
+})
+
+const processingCount = computed(() => {
+  return files.value.filter(f => f.status === 'processing').length
+})
+
+const totalChunks = computed(() => {
+  return Object.values(fileChunks.value).reduce((sum, count) => sum + count, 0)
+})
+
+const hasProcessedFiles = computed(() => {
+  return Object.keys(fileChunks.value).length > 0
+})
+
 const totalWords = computed(() => {
   return chunks.value.reduce((sum, c) => sum + (c.word_count || 0), 0)
 })
 
 const fetchFiles = async () => {
-  try {
-    const res = await fileApi.list(projectId.value)
-    files.value = res.data.files || []
-  } catch (error) {
-    console.error(error)
-  }
-}
-
-const fetchChunks = async () => {
-  if (!selectedFile.value) return
   loading.value = true
   try {
-    const res = await chunkApi.list(projectId.value, { file_id: selectedFile.value.id })
-    chunks.value = res.data.chunks || []
+    const res = await fileApi.list(projectId.value)
+    files.value = res.data || []
+    // 获取每个文件的 chunk 数量
+    await fetchChunksCount()
   } catch (error) {
-    ElMessage.error('获取分割结果失败')
+    console.error(error)
   } finally {
     loading.value = false
   }
 }
 
-const confirmSelectFile = () => {
-  selectedFile.value = files.value.find(f => f.id === selectedFileId.value)
-  showSplitDialog.value = false
+const fetchChunksCount = async () => {
+  const counts = {}
+  for (const file of files.value) {
+    try {
+      const res = await chunkApi.list(projectId.value, { file_id: file.id })
+      const chunks = res.data?.chunks || []
+      if (chunks.length > 0) {
+        counts[file.id] = chunks.length
+      }
+    } catch (e) {
+      console.error(e)
+    }
+  }
+  fileChunks.value = counts
+}
+
+const fetchChunks = async () => {
+  if (!selectedFile.value) return
+  loadingChunks.value = true
+  try {
+    const res = await chunkApi.list(projectId.value, { file_id: selectedFile.value.id })
+    chunks.value = res.data?.chunks || []
+  } catch (error) {
+    ElMessage.error('获取分割结果失败')
+  } finally {
+    loadingChunks.value = false
+  }
+}
+
+const handleFileClick = (file) => {
+  selectedFile.value = file
   fetchChunks()
 }
 
@@ -194,7 +338,11 @@ const handleSplit = async () => {
   try {
     await chunkApi.split(projectId.value, { file_id: selectedFile.value.id, ...splitConfig })
     ElMessage.success('分割任务已启动')
-    fetchChunks()
+    // 等待一下再获取结果
+    setTimeout(() => {
+      fetchChunks()
+      fetchFiles()
+    }, 2000)
   } catch (error) {
     ElMessage.error('分割失败')
   } finally {
@@ -202,44 +350,124 @@ const handleSplit = async () => {
   }
 }
 
-const refreshChunks = () => fetchChunks()
+const saveChunkName = async (chunk) => {
+  try {
+    await chunkApi.update(projectId.value, chunk.id, { name: chunk.name })
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+const saveChunkContent = async (chunk) => {
+  try {
+    await chunkApi.update(projectId.value, chunk.id, { content: chunk.content })
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+const handleBatchGenerateQA = () => {
+  if (!hasProcessedFiles.value) {
+    ElMessage.warning('请先分割文件')
+    return
+  }
+  ElMessage.info('跳转到问答生成页面')
+  router.push(`/project/${projectId.value}/questions`)
+}
+
+const refreshFiles = () => {
+  fetchFiles()
+}
+
+const formatSize = (bytes) => {
+  if (!bytes) return '0 B'
+  const units = ['B', 'KB', 'MB', 'GB']
+  let i = 0
+  while (bytes >= 1024 && i < units.length - 1) {
+    bytes /= 1024
+    i++
+  }
+  return `${bytes.toFixed(1)} ${units[i]}`
+}
+
+const getFileBg = (type) => {
+  const colors = {
+    pdf: '#ef4444',
+    docx: '#3b82f6',
+    xlsx: '#22c55e',
+    csv: '#f59e0b',
+    md: '#8b5cf6',
+    txt: '#6b7280',
+    epub: '#ec4899'
+  }
+  return colors[type] || '#6b7280'
+}
+
+const getFileIcon = (type) => {
+  const icons = {
+    pdf: 'Document',
+    docx: 'Document',
+    xlsx: 'Grid',
+    csv: 'Grid',
+    md: 'Document',
+    txt: 'Document',
+    epub: 'Book'
+  }
+  return icons[type] || 'Document'
+}
 
 onMounted(() => {
   fetchFiles()
-  const fileId = route.query.fileId
-  if (fileId) {
-    selectedFileId.value = fileId
-    setTimeout(() => {
-      selectedFile.value = files.value.find(f => f.id === fileId)
-      if (selectedFile.value) fetchChunks()
-    }, 500)
-  }
 })
 </script>
 
 <style scoped>
 .text-split {
-  padding: 32px;
-  max-width: 1200px;
+  --accent-cyan: #00d4ff;
+  --accent-cyan-dim: rgba(0, 212, 255, 0.15);
+  --accent-cyan-glow: rgba(0, 212, 255, 0.4);
+  --bg-elevated: #0f1117;
+  --bg-card: #161920;
+  --bg-hover: #1c2029;
+  --border-subtle: rgba(255, 255, 255, 0.08);
+  --border-active: rgba(0, 212, 255, 0.3);
+  --text-secondary: #9ca3af;
+  --text-muted: #6b7280;
+  --success: #22c55e;
+  --warning: #f59e0b;
+  --danger: #ef4444;
+  --radius-lg: 12px;
+  --radius-md: 8px;
+  --radius-sm: 6px;
+  padding: 28px 32px;
 }
 
 /* Header */
 .page-header {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
   margin-bottom: 28px;
 }
 
-.header-left h2 {
-  font-size: 24px;
-  font-weight: 600;
-  margin-bottom: 4px;
+.header-left {
+  position: relative;
 }
 
-.header-desc {
+.page-title {
+  font-size: 28px;
+  font-weight: 700;
+  margin: 0;
+  background: linear-gradient(135deg, #ffffff 0%, var(--accent-cyan) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.page-subtitle {
   font-size: 14px;
-  color: var(--text-tertiary);
+  color: var(--text-muted);
+  margin: 6px 0 0;
 }
 
 .header-actions {
@@ -247,43 +475,361 @@ onMounted(() => {
   gap: 12px;
 }
 
-.action-btn {
+.refresh-btn {
+  background: var(--bg-card) !important;
+  border: 1px solid var(--border-subtle) !important;
+  color: var(--text-secondary) !important;
+  font-weight: 500;
   padding: 10px 18px;
   border-radius: var(--radius-md);
 }
 
-/* Config Card */
-.config-card {
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  padding: 24px;
+.refresh-btn:hover {
+  background: var(--bg-hover) !important;
+  border-color: var(--accent-cyan) !important;
+}
+
+.generate-btn {
+  background: var(--accent-cyan) !important;
+  border: none !important;
+  color: #030407 !important;
+  font-weight: 600;
+  padding: 10px 22px;
+  border-radius: var(--radius-md);
+  box-shadow: 0 0 20px var(--accent-cyan-dim);
+}
+
+.generate-btn:hover:not(:disabled) {
+  box-shadow: 0 0 35px var(--accent-cyan-glow);
+  transform: translateY(-1px);
+}
+
+.generate-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Stats Grid */
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
   margin-bottom: 24px;
 }
 
-.config-header {
-  margin-bottom: 20px;
-  padding-bottom: 20px;
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.config-title {
+.stat-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  padding: 20px;
   display: flex;
   align-items: center;
-  gap: 12px;
-  font-size: 15px;
-  font-weight: 600;
+  gap: 16px;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.2s ease;
 }
 
-.file-badge {
-  width: 36px;
-  height: 36px;
+.stat-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+}
+
+.stat-card.total::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
+.stat-card.success::before { background: linear-gradient(90deg, #22c55e, #4ade80); }
+.stat-card.processing::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
+
+.stat-card:hover {
+  border-color: var(--border-active);
+  transform: translateY(-2px);
+}
+
+.stat-icon {
+  width: 48px;
+  height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--accent-primary-muted);
   border-radius: var(--radius-md);
-  color: var(--accent-primary);
+  font-size: 22px;
+}
+
+.stat-icon.total { background: rgba(139, 92, 246, 0.15); color: #a78bfa; }
+.stat-icon.success { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
+.stat-icon.processing { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
+.stat-icon.chunks { background: var(--accent-cyan-dim); color: var(--accent-cyan); }
+
+.stat-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.stat-value {
+  font-size: 26px;
+  font-weight: 700;
+  font-family: 'SF Mono', Monaco, monospace;
+  color: #fff;
+}
+
+.stat-label {
+  font-size: 13px;
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+
+/* Content Area */
+.content-area {
+  min-height: 400px;
+}
+
+/* Empty State */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 80px 20px;
+  background: var(--bg-card);
+  border: 2px dashed var(--border-subtle);
+  border-radius: var(--radius-lg);
+}
+
+.empty-icon {
+  width: 100px;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-hover);
+  border-radius: 50%;
+  margin-bottom: 24px;
+  border: 1px solid var(--border-subtle);
+}
+
+.empty-icon .el-icon {
+  color: var(--text-muted);
+}
+
+.empty-title {
+  font-size: 22px;
+  font-weight: 600;
+  color: #ffffff;
+  margin: 0 0 8px;
+}
+
+.empty-desc {
+  font-size: 14px;
+  color: var(--text-muted);
+  margin: 0;
+}
+
+/* Files Table */
+.files-table-wrapper {
+  background: var(--bg-card);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.table-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.table-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+.files-list {
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+.file-row {
+  display: grid;
+  grid-template-columns: 50px 1fr 80px 100px 40px;
+  align-items: center;
+  gap: 16px;
+  padding: 14px 20px;
+  border-bottom: 1px solid var(--border-subtle);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  animation: slideIn 0.3s ease backwards;
+  animation-delay: var(--delay);
+}
+
+.file-row:last-child {
+  border-bottom: none;
+}
+
+.file-row:hover {
+  background: var(--bg-hover);
+}
+
+.file-row.processing {
+  opacity: 0.7;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+}
+
+.col-icon {
+  display: flex;
+  justify-content: center;
+}
+
+.file-type-icon {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+}
+
+.col-name {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.file-name {
+  font-weight: 500;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.file-meta {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+
+.col-chunks {
+  text-align: center;
+}
+
+.chunk-count {
+  font-size: 14px;
+  color: var(--text-secondary);
+}
+
+.chunk-count.empty {
+  color: var(--text-muted);
+}
+
+.col-status {
+  display: flex;
+  justify-content: center;
+}
+
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.status-badge.processing {
+  background: rgba(245, 158, 11, 0.15);
+  color: #fbbf24;
+}
+
+.status-badge.success {
+  background: rgba(34, 197, 94, 0.15);
+  color: #4ade80;
+}
+
+.status-badge.pending {
+  background: rgba(107, 114, 128, 0.15);
+  color: var(--text-muted);
+}
+
+.col-action {
+  color: var(--text-muted);
+  display: flex;
+  justify-content: center;
+}
+
+.file-row:hover .col-action {
+  color: var(--accent-cyan);
+}
+
+.spin {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* Split Detail */
+.split-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.detail-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.back-btn {
+  color: var(--text-secondary) !important;
+  font-weight: 500;
+}
+
+.back-btn:hover {
+  color: var(--accent-cyan) !important;
+}
+
+.file-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.file-type-icon.small {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-sm);
+}
+
+.file-info .file-name {
+  font-weight: 600;
+}
+
+/* Config Card */
+.config-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+}
+
+.config-title {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 20px;
+  color: var(--text-secondary);
 }
 
 .config-form {
@@ -310,70 +856,25 @@ onMounted(() => {
   color: var(--text-secondary);
 }
 
-.config-action {
+.config-actions {
   display: flex;
   justify-content: flex-end;
-  padding-top: 20px;
+  padding-top: 16px;
   border-top: 1px solid var(--border-subtle);
 }
 
-.start-btn {
+.split-btn {
+  background: var(--accent-cyan) !important;
+  border: none !important;
+  color: #030407 !important;
+  font-weight: 600;
   padding: 12px 28px;
-}
-
-/* Empty State */
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 80px 20px;
-  background: var(--bg-secondary);
-  border: 1px dashed var(--border-default);
-  border-radius: var(--radius-lg);
-  text-align: center;
-}
-
-.empty-illustration {
-  position: relative;
-  width: 100px;
-  height: 100px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 20px;
-}
-
-.ring {
-  position: absolute;
-  inset: 0;
-  border: 2px dashed var(--border-default);
-  border-radius: 50%;
-  animation: spin 15s linear infinite;
-}
-
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-.empty-illustration .el-icon {
-  color: var(--text-muted);
-  z-index: 1;
-}
-
-.empty-state h3 {
-  font-size: 18px;
-  margin-bottom: 8px;
-}
-
-.empty-state p {
-  color: var(--text-tertiary);
+  border-radius: var(--radius-md);
 }
 
 /* Chunks Card */
 .chunks-card {
-  background: var(--bg-secondary);
+  background: var(--bg-card);
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-lg);
   overflow: hidden;
@@ -394,34 +895,20 @@ onMounted(() => {
   font-weight: 600;
 }
 
-.chunk-list {
-  max-height: 600px;
+.chunks-list {
+  max-height: 500px;
   overflow-y: auto;
 }
 
 .chunk-item {
-  padding: 20px;
+  padding: 16px 20px;
   border-bottom: 1px solid var(--border-subtle);
-  transition: background var(--transition-fast);
-  animation: slideIn 0.3s ease backwards;
-  animation-delay: var(--delay);
-}
-
-@keyframes slideIn {
-  from {
-    opacity: 0;
-    transform: translateX(-10px);
-  }
 }
 
 .chunk-item:last-child {
   border-bottom: none;
 }
 
-.chunk-item:hover {
-  background: var(--bg-hover);
-}
-
 .chunk-header {
   display: flex;
   align-items: center;
@@ -435,36 +922,63 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--accent-gradient);
+  background: linear-gradient(135deg, var(--accent-cyan), #06b6d4);
   color: white;
   border-radius: 50%;
   font-size: 12px;
   font-weight: 600;
+  flex-shrink: 0;
 }
 
-.chunk-title {
-  font-weight: 600;
+.chunk-name-input {
   flex: 1;
+  max-width: 300px;
+}
+
+.chunk-name-input :deep(.el-input__wrapper) {
+  background: var(--bg-hover);
+  border: 1px solid var(--border-subtle);
+  box-shadow: none;
+}
+
+.chunk-name-input :deep(.el-input__inner) {
+  color: #fff;
+  font-weight: 500;
 }
 
 .chunk-meta {
   font-size: 12px;
   color: var(--text-muted);
+  flex-shrink: 0;
 }
 
-.chunk-content {
-  font-size: 13px;
+.chunk-content-input :deep(.el-textarea__inner) {
+  background: var(--bg-hover);
+  border: 1px solid var(--border-subtle);
+  box-shadow: none;
   color: var(--text-secondary);
+  font-size: 13px;
   line-height: 1.7;
-  white-space: pre-wrap;
-  max-height: 120px;
-  overflow-y: auto;
 }
 
-/* File Option */
-.file-option {
-  display: flex;
-  align-items: center;
-  gap: 10px;
+.chunk-content-input :deep(.el-textarea__inner:focus) {
+  border-color: var(--accent-cyan);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .file-row {
+    grid-template-columns: 40px 1fr 60px;
+  }
+
+  .col-chunks,
+  .col-status,
+  .col-action {
+    display: none;
+  }
 }
 </style>