feat: 更新组件样式和逻辑，优化用户体验

Author: xerrors

web/src/components/FileTable.vue

@@ -46,7 +46,7 @@
       </div>
     </div>
 
-    <div class="batch-actions-compact" v-if="selectedRowKeys.length > 0">
+    <div class="batch-actions" v-if="selectedRowKeys.length > 0">
       <div class="batch-info">
         <span>{{ selectedRowKeys.length }} 项</span>
         <a-button
@@ -74,7 +74,7 @@
         :columns="columnsCompact"
         :data-source="filteredFiles"
         row-key="file_id"
-        class="my-table-compact"
+        class="my-table"
         size="small"
         :pagination="paginationCompact"
         :row-selection="{
@@ -373,7 +373,8 @@ import { parseToShanghai } from '@/utils/time';
 .file-table-container {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  max-height: 100%;
+  overflow: hidden;
   border-radius: 12px;
   border: 1px solid var(--gray-150);
   padding-top: 6px;
@@ -416,12 +417,12 @@ import { parseToShanghai } from '@/utils/time';
   }
 }
 
-.batch-actions-compact {
+.batch-actions {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 2px 4px;
-  background-color: var(--main-5);
+  padding: 2px 12px;
+  background-color: var(--main-10);
   border-radius: 4px;
   margin-bottom: 4px;
   flex-shrink: 0;
@@ -434,31 +435,31 @@ import { parseToShanghai } from '@/utils/time';
 }
 
 .batch-info span {
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 500;
   color: var(--gray-700);
 }
 
-.batch-actions-compact .ant-btn {
-  font-size: 11px;
+.batch-actions .ant-btn {
+  font-size: 12px;
   padding: 0 6px;
   height: 22px;
   border-radius: 3px;
 }
 
-.batch-actions-compact .ant-btn:hover {
+.batch-actions .ant-btn:hover {
   background-color: var(--main-20);
   color: var(--main-color);
 }
 
-.my-table-compact {
+.my-table {
   flex: 1;
   overflow: auto;
   background-color: transparent;
   min-height: 0; /* 让 flex 子项可以正确缩小 */
 }
 
-.my-table-compact .main-btn {
+.my-table .main-btn {
   padding: 0;
   height: auto;
   line-height: 1.4;
@@ -468,32 +469,32 @@ import { parseToShanghai } from '@/utils/time';
   text-decoration: none;
 }
 
-.my-table-compact .main-btn:hover {
+.my-table .main-btn:hover {
   cursor: pointer;
   color: var(--main-color);
 }
 
-.my-table-compact .del-btn {
+.my-table .del-btn {
   color: var(--gray-500);
 }
 
-.my-table-compact .download-btn {
+.my-table .download-btn {
   color: var(--gray-500);
 }
 
-.my-table-compact .download-btn:hover {
+.my-table .download-btn:hover {
   color: var(--main-color);
 }
 
-.my-table-compact .del-btn:hover {
+.my-table .del-btn:hover {
   color: var(--error-color);
 }
 
-.my-table-compact .del-btn:disabled {
+.my-table .del-btn:disabled {
   cursor: not-allowed;
 }
 
-.my-table-compact .span-type {
+.my-table .span-type {
   display: inline-block;
   padding: 1px 5px;
   font-size: 10px;

web/src/components/FileUploadModal.vue

@@ -21,12 +21,12 @@
     <div class="add-files-content">
       <div class="upload-header">
         <div class="source-selector">
-          <div class="upload-mode-selector" @click="uploadMode = 'file'" :class="{ active: uploadMode === 'file' }">
-            <FileOutlined /> 上传文件
-          </div>
-          <div class="upload-mode-selector" @click="uploadMode = 'url'" :class="{ active: uploadMode === 'url' }">
-            <LinkOutlined /> 输入网址
-          </div>
+          <a-segmented
+            v-model:value="uploadMode"
+            :options="uploadModeOptions"
+            size="large"
+            class="source-segmented"
+          />
         </div>
         <div class="config-controls">
           <a-button type="dashed" @click="showChunkConfigModal" v-if="!isGraphBased">
@@ -35,7 +35,7 @@
         </div>
       </div>
 
-      <div class="ocr-config">
+      <div class="ocr-config" v-if="uploadMode === 'file'">
         <a-form layout="horizontal">
           <a-form-item label="使用OCR" name="enable_ocr">
             <div class="ocr-controls">
@@ -67,36 +67,6 @@
         </a-form>
       </div>
 
-      <div class="qa-split-config" v-if="isQaSplitSupported">
-        <a-form layout="horizontal">
-          <a-form-item label="QA分割模式" name="use_qa_split">
-            <div class="toggle-controls">
-              <a-switch
-                v-model:checked="chunkParams.use_qa_split"
-                style="margin-right: 12px;"
-              />
-              <span class="param-description">
-                {{ chunkParams.use_qa_split ? '启用QA分割（忽略chunk大小设置）' : '使用普通分割模式' }}
-              </span>
-            </div>
-          </a-form-item>
-          <a-form-item
-            v-if="chunkParams.use_qa_split"
-            label="QA分隔符"
-            name="qa_separator"
-          >
-            <a-input
-              v-model:value="chunkParams.qa_separator"
-              placeholder="输入QA分隔符"
-              style="width: 200px; margin-right: 12px;"
-            />
-            <span class="param-description">
-              用于分割不同QA对的分隔符，默认为3个换行符
-            </span>
-          </a-form-item>
-        </a-form>
-      </div>
-
             <!-- PDF/图片OCR提醒 -->
       <div v-if="uploadMode === 'file' && hasPdfOrImageFiles && !isOcrEnabled" class="ocr-warning-alert">
         ⚠️ 检测到PDF或图片文件，请启用OCR功能以提取文本内容
@@ -181,7 +151,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, watch } from 'vue';
 import { message, Upload } from 'ant-design-vue';
 import { useUserStore } from '@/stores/user';
 import { useDatabaseStore } from '@/stores/database';
@@ -295,6 +265,24 @@ const chunkLoading = computed(() => store.state.chunkLoading);
 
 // 上传模式
 const uploadMode = ref('file');
+const previousOcrSelection = ref('disable');
+
+const uploadModeOptions = computed(() => [
+  {
+    value: 'file',
+    label: h('div', { class: 'segmented-option' }, [
+      h(FileOutlined, { class: 'option-icon' }),
+      h('span', { class: 'option-text' }, '上传文件'),
+    ]),
+  },
+  {
+    value: 'url',
+    label: h('div', { class: 'segmented-option' }, [
+      h(LinkOutlined, { class: 'option-icon' }),
+      h('span', { class: 'option-text' }, '输入网址'),
+    ]),
+  },
+]);
 
 // 文件列表
 const fileList = ref([]);
@@ -349,6 +337,15 @@ const isOcrEnabled = computed(() => {
   return chunkParams.value.enable_ocr !== 'disable';
 });
 
+watch(uploadMode, (mode, previous) => {
+  if (mode === 'url') {
+    previousOcrSelection.value = chunkParams.value.enable_ocr;
+    chunkParams.value.enable_ocr = 'disable';
+  } else if (mode === 'file' && previous === 'url') {
+    chunkParams.value.enable_ocr = previousOcrSelection.value || 'disable';
+  }
+});
+
 // 计算属性：是否有PDF或图片文件
 const hasPdfOrImageFiles = computed(() => {
   if (fileList.value.length === 0) {
@@ -647,45 +644,60 @@ const chunkData = async () => {
 
 .source-selector {
   display: flex;
-  gap: 12px;
+  align-items: center;
 }
 
-.upload-mode-selector {
-  padding: 8px 16px;
-  border: 1px solid var(--gray-300);
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.3s;
+.config-controls {
+  display: flex;
+  align-items: center;
+}
+
+.source-segmented {
+  background-color: var(--gray-100);
+  border-radius: 999px;
+  padding: 4px;
+  border: 1px solid var(--gray-200);
 }
 
-.upload-mode-selector:hover {
-  border-color: var(--main-color);
+.source-segmented :deep(.ant-segmented-item) {
+  border-radius: 999px;
+}
+
+.source-segmented :deep(.ant-segmented-item-label) {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 16px;
+  font-weight: 500;
+  color: var(--gray-600);
 }
 
-.upload-mode-selector.active {
-  border-color: var(--main-color);
+.source-segmented :deep(.ant-segmented-thumb) {
   background-color: var(--main-30);
+  border-radius: 999px;
+}
+
+.source-segmented :deep(.ant-segmented-item-selected .ant-segmented-item-label) {
   color: var(--main-color);
 }
 
-.config-controls {
+.source-segmented :deep(.segmented-option) {
   display: flex;
   align-items: center;
+  gap: 8px;
+}
+
+.source-segmented :deep(.option-icon) {
+  font-size: 16px;
 }
 
-.ocr-config,
-.qa-split-config {
+.ocr-config {
   margin-bottom: 20px;
   padding: 16px;
   background-color: var(--gray-50);
   border-radius: 6px;
 }
 
-.toggle-controls {
-  display: flex;
-  align-items: center;
-}
-
 .param-description {
   font-size: 12px;
   color: var(--gray-600);