feat: 增强 Knowledge 页面功能

- 优化知识库创建流程
- 添加更多知识库配置选项
- 改进样式和交互

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

web/src/views/Knowledge.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useModelSettings } from './settings/useModelSettings'
 import './knowledge/knowledge.css'
@@ -7,10 +7,31 @@ import './knowledge/knowledge.css'
 // 获取已配置的模型列表
 const { models, fetchModels } = useModelSettings()
 
+// 页面加载时获取模型列表
+onMounted(() => {
+  fetchModels()
+})
+
+// 筛选 LLM (chat) 模型
+const llmModels = computed(() => {
+  return models.value.filter((m: any) => m.model_type === 'chat')
+})
+
+// 筛选 Embedding 模型
+const embeddingModels = computed(() => {
+  return models.value.filter((m: any) => m.model_type === 'embedding')
+})
+
 // 步骤验证
 const step1Valid = computed(() => !!newKbForm.value.name.trim())
-const step2Valid = computed(() => !!embeddingConfig.value.modelId)
+const step2Valid = computed(() => !!modelConfig.value.llmModelId && !!modelConfig.value.embeddingModelId)
-const step3Valid = computed(() => true) // Parsing - 暂时默认通过
+const step3Valid = computed(() => {
+  // Parsing - 如果选择 docling，则需要填写 URL
+  if (parsingConfig.value.engine === 'docling') {
+    return !!parsingConfig.value.doclingUrl.trim()
+  }
+  return true
+})
 const step4Valid = computed(() => true) // Storage - 暂时默认通过
 
 // 获取当前步骤是否有效
@@ -106,17 +127,26 @@ const filteredKnowledgeBases = () => {
 // 新建知识库 - 分步骤
 const showCreateDialog = ref(false)
 const createStep = ref(1)
+
+// 文件上传弹窗
+const showFileUploadDialog = ref(false)
+const selectedKnowledge = ref<any>(null)
+const fileFilter = ref('all') // all, parsed, parsing, failed
+const selectedFile = ref<any>(null) // 当前选中的文件
 const newKbForm = ref({
   name: '',
   description: '',
 })
-const embeddingConfig = ref({
+// 模型配置
-  modelId: '',
+const modelConfig = ref({
+  llmModelId: '',
+  embeddingModelId: '',
 })
 
 const parsingConfig = ref({
   enablePdf: true,
-  engine: 'default',
+  engine: 'markitdown',
+  doclingUrl: '',
   pandoc: true,
   academic: false,
   highRes: false,
@@ -126,12 +156,11 @@ const parsingConfig = ref({
 const openCreateDialog = () => {
   createStep.value = 1
   newKbForm.value = { name: '', description: '' }
-  embeddingConfig.value = { modelId: '' }
+  modelConfig.value = { llmModelId: '', embeddingModelId: '' }
-  // 获取已配置的模型列表
-  fetchModels()
   parsingConfig.value = {
     enablePdf: true,
-    engine: 'default',
+    engine: 'markitdown',
+    doclingUrl: '',
     pandoc: true,
     academic: false,
     highRes: false,
@@ -142,10 +171,11 @@ const openCreateDialog = () => {
 
 const cancelCreate = () => {
   newKbForm.value = { name: '', description: '' }
-  embeddingConfig.value = { modelId: '' }
+  modelConfig.value = { llmModelId: '', embeddingModelId: '' }
   parsingConfig.value = {
     enablePdf: true,
-    engine: 'default',
+    engine: 'markitdown',
+    doclingUrl: '',
     pandoc: true,
     academic: false,
     highRes: false,
@@ -165,7 +195,7 @@ const createKnowledgeBase = () => {
     status: 'ready'
   })
   newKbForm.value = { name: '', description: '' }
-  embeddingConfig.value = { modelId: '' }
+  modelConfig.value = { llmModelId: '', embeddingModelId: '' }
   showCreateDialog.value = false
   ElMessage.success('Knowledge base created successfully')
 }
@@ -210,9 +240,10 @@ const deleteKb = (id: string) => {
   }
 }
 
-// 查看详情
+// 进入知识库（上传文档界面）
-const viewDetail = (kb: any) => {
+const enterKnowledge = (kb: any) => {
-  ElMessage.info(`Viewing ${kb.name}`)
+  selectedKnowledge.value = kb
+  showFileUploadDialog.value = true
 }
 </script>
 
@@ -286,11 +317,11 @@ const viewDetail = (kb: any) => {
             <td class="px-5 py-4">
               <div class="flex items-center justify-center gap-2">
                 <button
-                  @click="viewDetail(kb)"
+                  @click="enterKnowledge(kb)"
                   class="p-2 rounded-lg transition-colors hover:bg-dark-600"
-                  title="View"
+                  title="Enter"
                 >
-                  <i class="fa-solid fa-eye text-gray-400 hover:text-primary-danger"></i>
+                  <i class="fa-solid fa-door-open text-gray-400 hover:text-primary-orange"></i>
                 </button>
                 <button
                   @click="openEdit(kb)"
@@ -325,7 +356,7 @@ const viewDetail = (kb: any) => {
     <!-- 新建知识库弹窗 -->
     <el-dialog
       v-model="showCreateDialog"
-      title="创建知识库"
+      title="Create Knowledge Base"
       width="1100px"
       :close-on-click-modal="false"
       :show-close="false"
@@ -413,10 +444,25 @@ const viewDetail = (kb: any) => {
               <span class="section-title">Model Config</span>
             </div>
             <el-form label-position="top" class="kb-form">
-              <el-form-item label="Embedding Model">
+              <el-form-item label="LLM Model">
-                <el-select v-model="embeddingConfig.modelId" placeholder="Select a configured model" class="w-full" popper-class="dark-select-dropdown">
+                <el-select v-model="modelConfig.llmModelId" placeholder="Select a chat model" class="w-full" popper-class="dark-select-dropdown">
                   <el-option
-                    v-for="model in models"
+                    v-for="model in llmModels"
+                    :key="model.id"
+                    :label="model.name"
+                    :value="model.id"
+                  >
+                    <div class="model-option">
+                      <span class="model-name">{{ model.name }}</span>
+                      <span class="model-info">{{ model.provider }} - {{ model.model }}</span>
+                    </div>
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="Embedding Model">
+                <el-select v-model="modelConfig.embeddingModelId" placeholder="Select an embedding model" class="w-full" popper-class="dark-select-dropdown">
+                  <el-option
+                    v-for="model in embeddingModels"
                     :key="model.id"
                     :label="model.name"
                     :value="model.id"
@@ -439,60 +485,24 @@ const viewDetail = (kb: any) => {
             </div>
 
             <div class="parsing-section">
-              <div class="parsing-row">
-                <span class="parsing-label">Enable PDF Parsing</span>
-                <el-switch v-model="parsingConfig.enablePdf" />
-              </div>
-
               <div class="parsing-row">
                 <span class="parsing-label">Parsing Engine</span>
-                <el-select v-model="parsingConfig.engine" placeholder="Select engine" class="parsing-select">
+                <el-select v-model="parsingConfig.engine" placeholder="Select engine" class="parsing-select" popper-class="dark-select-dropdown">
-                  <el-option label="Default Engine" value="default" />
+                  <el-option label="MarkItDown" value="markitdown" />
-                  <el-option label="DeepDoc" value="deepdoc" />
+                  <el-option label="Docling" value="docling" />
                 </el-select>
               </div>
 
-              <div class="parsing-divider"></div>
+              <!-- Docling URL 配置 -->
-
+              <div v-if="parsingConfig.engine === 'docling'" class="parsing-row" style="margin-top: 12px; align-items: center;">
-              <div class="parsing-label">Enabled Post-processing</div>
+                <span class="parsing-label" style="flex: 1;">Docling URL</span>
-
+                <input
-              <div class="postprocess-list">
+                  v-model="parsingConfig.doclingUrl"
-                <div class="postprocess-item" :class="{ active: parsingConfig.pandoc }">
+                  type="text"
-                  <div class="postprocess-toggle">
+                  placeholder="http://localhost:8080"
-                    <el-switch v-model="parsingConfig.pandoc" />
+                  class="input-field"
-                  </div>
+                  style="width: 350px;"
-                  <div class="postprocess-info">
+                >
-                    <span class="postprocess-title">Use Pandoc Markdown Enrichment</span>
-                    <span class="postprocess-desc">Enable Pandoc conversion for rich formatting</span>
-                  </div>
-                </div>
-
-                <div class="postprocess-item" :class="{ active: parsingConfig.academic }">
-                  <div class="postprocess-toggle">
-                    <el-switch v-model="parsingConfig.academic" />
-                  </div>
-                  <div class="postprocess-info">
-                    <span class="postprocess-title">Use Academic Document Parsing</span>
-                    <span class="postprocess-desc">Parse formulas, tables, and academic structures</span>
-                  </div>
-                </div>
-
-                <div class="postprocess-item" :class="{ active: parsingConfig.highRes }">
-                  <div class="postprocess-toggle">
-                    <el-switch v-model="parsingConfig.highRes" />
-                  </div>
-                  <div class="postprocess-info">
-                    <span class="postprocess-title">Use High Resolution Parsing</span>
-                    <span class="postprocess-desc">High quality mode for complex documents</span>
-                  </div>
-                </div>
-              </div>
-
-              <div class="parsing-divider"></div>
-
-              <div class="parsing-row">
-                <span class="parsing-label">File Size Limit</span>
-                <el-input v-model="parsingConfig.fileSizeLimit" class="parsing-input" />
               </div>
             </div>
           </div>
@@ -566,5 +576,138 @@ const viewDetail = (kb: any) => {
         </div>
       </template>
     </el-dialog>
+
+    <!-- 文件上传弹窗 -->
+    <el-dialog
+      v-model="showFileUploadDialog"
+      :title="selectedKnowledge?.name || 'Knowledge Base'"
+      width="95vw"
+      top="20px"
+      :close-on-click-modal="false"
+      class="kb-dialog file-upload-dialog"
+    >
+      <div class="file-upload-layout">
+        <!-- 顶部导航 -->
+        <div class="file-header">
+          <button class="back-btn" @click="showFileUploadDialog = false">
+            <i class="fa-solid fa-arrow-left"></i>
+          </button>
+          <h2 class="file-title">{{ selectedKnowledge?.name || 'Knowledge Base' }}</h2>
+          <button class="btn-primary">
+            <i class="fa-solid fa-upload"></i>
+            上传文档
+          </button>
+        </div>
+
+        <!-- 标签栏 -->
+        <div class="file-tabs">
+          <div
+            class="file-tab"
+            :class="{ active: fileFilter === 'all' }"
+            @click="fileFilter = 'all'"
+          >
+            全部
+          </div>
+          <div
+            class="file-tab"
+            :class="{ active: fileFilter === 'parsed' }"
+            @click="fileFilter = 'parsed'"
+          >
+            已解析
+          </div>
+          <div
+            class="file-tab"
+            :class="{ active: fileFilter === 'parsing' }"
+            @click="fileFilter = 'parsing'"
+          >
+            解析中
+          </div>
+          <div
+            class="file-tab"
+            :class="{ active: fileFilter === 'failed' }"
+            @click="fileFilter = 'failed'"
+          >
+            解析失败
+          </div>
+        </div>
+
+        <!-- 内容区 - 左侧文件列表 + 右侧预览 -->
+        <div class="file-main">
+          <!-- 左侧文件列表 -->
+          <div class="file-list">
+            <!-- 模拟文件项 -->
+            <div
+              class="file-item"
+              :class="{ selected: selectedFile === i }"
+              v-for="i in 8"
+              :key="i"
+              @click="selectedFile = i"
+            >
+              <div class="file-item-icon">
+                <i class="fa-solid fa-file-pdf"></i>
+              </div>
+              <div class="file-item-info">
+                <div class="file-item-name">产品手册_v2.0.pdf</div>
+                <div class="file-item-meta">
+                  <span>2.4 MB</span>
+                  <span>2024-01-15</span>
+                </div>
+              </div>
+              <div class="file-item-status success">
+                <i class="fa-solid fa-check-circle"></i>
+              </div>
+            </div>
+          </div>
+
+          <!-- 右侧预览面板 -->
+          <div class="file-preview">
+            <div class="preview-header">
+              <div class="preview-header-left">
+                <i class="fa-solid fa-file-pdf"></i>
+                <span class="preview-filename">产品手册_v2.0.pdf</span>
+              </div>
+              <div class="preview-header-info">
+                <span class="info-tag">2.4 MB</span>
+                <span class="info-tag">2024-01-15 10:30</span>
+                <span class="info-tag success">解析成功</span>
+                <span class="info-tag">156 个切片</span>
+              </div>
+            </div>
+            <div class="preview-content">
+              <!-- PDF文件预览 -->
+              <div class="pdf-preview">
+                <iframe
+                  src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
+                  class="pdf-iframe"
+                ></iframe>
+              </div>
+              <div class="preview-pagination">
+                <button class="page-btn" disabled>
+                  <i class="fa-solid fa-chevron-left"></i>
+                </button>
+                <span class="page-info">1 / 3</span>
+                <button class="page-btn">
+                  <i class="fa-solid fa-chevron-right"></i>
+                </button>
+              </div>
+            </div>
+            <div class="preview-actions">
+              <button class="action-btn delete">
+                <i class="fa-solid fa-trash"></i>
+                删除
+              </button>
+              <button class="action-btn reparse">
+                <i class="fa-solid fa-rotate"></i>
+                重新解析
+              </button>
+              <button class="action-btn confirm">
+                <i class="fa-solid fa-check"></i>
+                确认
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>

web/src/views/knowledge/knowledge.css

@@ -364,25 +364,41 @@
   box-shadow: 0 0 0 3px rgba(54, 191, 250, 0.15);
 }
 
-.kb-form :deep(.el-input__inner) {
+.kb-form :deep(.el-input__wrapper input) {
-  color: #e8eaed;
+  color: #e8eaed !important;
+  -webkit-text-fill-color: #e8eaed !important;
   font-size: 14px;
 }
 
-.kb-form :deep(.el-input__inner::placeholder) {
+.kb-form :deep(.el-input__wrapper input::placeholder) {
-  color: #5f6368;
+  color: #6b7280 !important;
+  -webkit-text-fill-color: #6b7280 !important;
+}
+
+.kb-form :deep(.el-input__wrapper) {
+  background-color: #161b22 !important;
+}
+
+.kb-form :deep(.el-input__wrapper input) {
+  background-color: transparent !important;
 }
 
 .kb-form :deep(.el-textarea__inner) {
   background-color: #161b22;
   border: 1px solid #2d3640;
   border-radius: 8px;
-  color: #e8eaed;
+  color: #e8eaed !important;
+  -webkit-text-fill-color: #e8eaed !important;
   font-size: 14px;
   box-shadow: none;
   padding: 12px;
 }
 
+.kb-form :deep(.el-textarea__inner::placeholder) {
+  color: #6b7280 !important;
+  -webkit-text-fill-color: #6b7280 !important;
+}
+
 .kb-form :deep(.el-textarea__inner:hover) {
   border-color: #ffffff;
 }
@@ -557,6 +573,510 @@
   color: #5f6368;
 }
 
+/* 文件上传弹窗布局 */
+.file-upload-dialog .el-dialog {
+  position: absolute !important;
+  top: 8px !important;
+  left: 50% !important;
+  transform: translateX(-50%) !important;
+  margin-bottom: 8px !important;
+  max-height: calc(100vh - 16px);
+}
+
+.file-upload-dialog .el-dialog__body {
+  padding: 0;
+}
+
+.file-upload-layout {
+  display: flex;
+  flex-direction: column;
+  height: 85vh;
+  background-color: #0f1419;
+}
+
+/* 顶部导航 */
+.file-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  background-color: #121218;
+  border-bottom: 1px solid #2a2a3a;
+}
+
+.back-btn {
+  background: none;
+  border: none;
+  color: #9ca3af;
+  font-size: 18px;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 6px;
+}
+
+.back-btn:hover {
+  background-color: #1e2832;
+  color: #ffffff;
+}
+
+.file-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #ffffff;
+}
+
+/* 标签栏 */
+.file-tabs {
+  display: flex;
+  gap: 4px;
+  padding: 12px 20px;
+  background-color: #121218;
+  border-bottom: 1px solid #2a2a3a;
+}
+
+.file-tab {
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 14px;
+  color: #9ca3af;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.file-tab:hover {
+  background-color: rgba(249, 115, 22, 0.1);
+  color: #f97316;
+}
+
+.file-tab.active {
+  background-color: rgba(249, 115, 22, 0.15);
+  color: #f97316;
+}
+
+/* 主内容区 */
+.file-main {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+/* 左侧文件列表 */
+.file-list {
+  width: 420px;
+  background-color: #0f1419;
+  border-right: 1px solid #2a2a3a;
+  overflow-y: auto;
+  padding: 12px;
+}
+
+.file-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+  margin-bottom: 8px;
+  border: 2px solid transparent;
+}
+
+.file-item:hover {
+  background-color: rgba(249, 115, 22, 0.08);
+}
+
+.file-item.selected {
+  background-color: rgba(249, 115, 22, 0.12);
+  border-color: #f97316;
+}
+
+.file-item-icon {
+  width: 40px;
+  height: 40px;
+  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.file-item-icon i {
+  font-size: 18px;
+  color: white;
+}
+
+.file-item-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.file-item-name {
+  font-size: 14px;
+  color: #e8eaed;
+  font-weight: 500;
+  margin-bottom: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.file-item-meta {
+  font-size: 12px;
+  color: #6b7280;
+  display: flex;
+  gap: 8px;
+}
+
+.file-item-status {
+  flex-shrink: 0;
+}
+
+.file-item-status i {
+  font-size: 14px;
+}
+
+.file-item-status.success i {
+  color: #22c55e;
+}
+
+.file-item-status.failed i {
+  color: #ef4444;
+}
+
+.file-item-status.parsing i {
+  color: #f59e0b;
+}
+
+/* 右侧预览面板 */
+.file-preview {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: #121218;
+}
+
+.preview-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #2a2a3a;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.preview-header-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.preview-header-left i {
+  font-size: 28px;
+  color: #3b82f6;
+}
+
+.preview-filename {
+  font-size: 15px;
+  color: #e8eaed;
+  font-weight: 500;
+}
+
+.preview-header-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.info-tag {
+  font-size: 12px;
+  color: #9ca3af;
+  background-color: #1e2832;
+  padding: 4px 10px;
+  border-radius: 4px;
+}
+
+.info-tag.success {
+  background-color: rgba(34, 197, 94, 0.15);
+  color: #22c55e;
+}
+
+.preview-content {
+  flex: 1;
+  padding: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.pdf-preview {
+  flex: 1;
+  min-height: 0;
+  background-color: #1a1a1a;
+}
+
+.pdf-iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+.preview-info {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.info-row {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.info-label {
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.info-value {
+  font-size: 14px;
+  color: #e8eaed;
+}
+
+.info-value.success {
+  color: #22c55e;
+}
+
+.preview-text {
+  border: 1px solid #2a2a3a;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.preview-section-title {
+  font-size: 13px;
+  font-weight: 500;
+  color: #e8eaed;
+  padding: 12px 16px;
+  background-color: #1a1c25;
+  border-bottom: 1px solid #2a2a3a;
+}
+
+.preview-text-content {
+  padding: 16px;
+  background-color: #0f1419;
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+.preview-text-content p {
+  font-size: 13px;
+  color: #9ca3af;
+  line-height: 1.7;
+  margin: 0 0 8px 0;
+}
+
+.preview-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  margin-top: 16px;
+}
+
+.page-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  border: 1px solid #2a2a3a;
+  background-color: #1a1c25;
+  color: #9ca3af;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+
+.page-btn:hover:not(:disabled) {
+  border-color: #f97316;
+  color: #f97316;
+}
+
+.page-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.page-info {
+  font-size: 13px;
+  color: #9ca3af;
+}
+
+.preview-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 16px 20px;
+  border-top: 1px solid #2a2a3a;
+  background-color: #0f1419;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.2s;
+  border: none;
+}
+
+.action-btn.delete {
+  background-color: rgba(239, 68, 68, 0.15);
+  color: #ef4444;
+}
+
+.action-btn.delete:hover {
+  background-color: rgba(239, 68, 68, 0.25);
+}
+
+.action-btn.reparse {
+  background-color: rgba(249, 115, 22, 0.15);
+  color: #f97316;
+}
+
+.action-btn.reparse:hover {
+  background-color: rgba(249, 115, 22, 0.25);
+}
+
+.action-btn.confirm {
+  background-color: #f97316;
+  color: white;
+}
+
+.action-btn.confirm:hover {
+  background-color: #ea580c;
+}
+
+.file-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 20px;
+  color: #9ca3af;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-size: 14px;
+}
+
+.file-menu-item:hover {
+  background-color: rgba(249, 115, 22, 0.1);
+  color: #f97316;
+}
+
+.file-menu-item.active {
+  background-color: rgba(249, 115, 22, 0.15);
+  color: #f97316;
+  border-right: 3px solid #f97316;
+}
+
+.file-menu-item i {
+  font-size: 16px;
+  width: 20px;
+  text-align: center;
+}
+
+.file-content {
+  flex: 1;
+  padding: 24px;
+  overflow-y: auto;
+}
+
+.content-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #e8eaed;
+  margin-bottom: 20px;
+}
+
+/* 上传区域 */
+.upload-area {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.upload-box {
+  flex: 1;
+  border: 2px dashed #3a3a4a;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  cursor: pointer;
+  transition: all 0.2s;
+  position: relative;
+}
+
+.upload-box:hover {
+  border-color: #f97316;
+  background-color: rgba(249, 115, 22, 0.05);
+}
+
+.upload-btn {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+}
+
+.upload-icon {
+  font-size: 48px;
+  color: #5f6368;
+  margin-bottom: 16px;
+}
+
+.upload-text {
+  font-size: 16px;
+  color: #e8eaed;
+  margin-bottom: 8px;
+}
+
+.upload-hint {
+  font-size: 13px;
+  color: #6b7280;
+}
+
+.upload-btn {
+  margin-top: 8px;
+}
+
+.file-count {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 0;
+  color: #9ca3af;
+  font-size: 14px;
+}
+
+.doc-list,
+.doc-chunks,
+.parsing-config,
+.storage-config {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
 .footer-right {
   display: flex;
   gap: 10px;
@@ -588,7 +1108,7 @@
   font-weight: 500;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
 }
 
 .prev-btn:hover {
@@ -597,7 +1117,7 @@
 }
 
 .next-btn {
-  background: linear-gradient(135deg, #ffffff 0%, #0ea5e9 100%);
+  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
   border: none;
   color: white;
   padding: 10px 20px;
@@ -606,13 +1126,13 @@
   font-weight: 600;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
-  box-shadow: 0 4px 12px rgba(54, 191, 250, 0.25);
+  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.25);
 }
 
 .next-btn:hover {
-  background: linear-gradient(135deg, #4dc3ff 0%, #ffffff 100%);
+  background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
-  box-shadow: 0 6px 16px rgba(54, 191, 250, 0.35);
+  box-shadow: 0 6px 16px rgba(249, 115, 22, 0.35);
 }
 
 .confirm-btn {