From 2bf5725048e906bac5e179ecfc19b09a98eda19c Mon Sep 17 00:00:00 2001
From: zhuoqinglian <1035449612@qq.com>
Date: Tue, 9 Jun 2026 17:22:18 +0800
Subject: [PATCH] =?UTF-8?q?update:=20=E7=9F=A5=E8=AF=86=E5=BA=93=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=A4=8D=E7=94=A8=E5=BC=B9=E7=AA=97=E3=80=81=E5=88=86?=
 =?UTF-8?q?=E9=A1=B5=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=90=8C=E6=AD=A5=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/knowledge-base/level.png       | Bin 0 -> 1350 bytes
 .../src/assets/knowledge-base/star.png        | Bin 0 -> 769 bytes
 .../src/components/KnowledgeBaseDialog.vue    |  12 +-
 main/manager-web/src/i18n/de.js               |   2 +
 main/manager-web/src/i18n/en.js               |   2 +
 main/manager-web/src/i18n/pt_BR.js            |   2 +
 main/manager-web/src/i18n/vi.js               |   2 +
 main/manager-web/src/i18n/zh_CN.js            |   4 +-
 main/manager-web/src/i18n/zh_TW.js            |   2 +
 .../src/views/KnowledgeBaseItem.vue           |  53 +++-
 .../src/views/KnowledgeBaseManagement.vue     | 274 ++++++++++--------
 11 files changed, 218 insertions(+), 135 deletions(-)
 create mode 100644 main/manager-web/src/assets/knowledge-base/level.png
 create mode 100644 main/manager-web/src/assets/knowledge-base/star.png

diff --git a/main/manager-web/src/assets/knowledge-base/level.png b/main/manager-web/src/assets/knowledge-base/level.png
new file mode 100644
index 0000000000000000000000000000000000000000..91d5370541b00312a2ae3881f3156952cff07f52
GIT binary patch
literal 1350
zcmV-M1-bf(P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm000F0Nkl<ZcmeF!
zy^`Ei5Cve(Kwts_mLekcGbmnX1mG&(gV2sKu^sXrR2c#?JKkq-N<^^)1UP^l->*kk
zb)}I;Ga6}KuJYEjbbtDGpL4pUncY?&_}@nY@4JAjRp8s_e_nt0;`Y_!=YKsjUW@1|
z1c2UdK6$mNs_SaA`O(-~wZh+`1Sm~)pke*`>QlG9B_fYs-0qepvKRrtDIKaO$o0bq
z)%W%1)eql%Q5mPD{RffMR{P22*NX{Iow6A?)d8;`e%7Kh-mg8_uOYEeHD(h4JgdG(
zRfW=kB9Yhf-5Mfws!U$fYL~XuECQ02?E)O&b)k9-vNzz<X{!sXaTbBBI_2QXz=1cm
zcB&y#_o|_ya-152-^m2}s!KixxTM+YRI#!eo+Fi&EBj2{Ckar5GJVx0p9+5JzF2jt
zMq9-*+Uh6)z$ro*U?jOzb#aEQPSp^*PDI*$L?&Ljg9Mat>ebjLS$I$<B4t~tJS;E`
zr8*!Gj){48u9G5^Y0H~8R=(GXNS$)GX%Z&w+|HZ90fD>f?sc;l@AWzb%Jcia%Uu^F
zw$=8!k73(i`0eReErFXiZ>yU(|Mp$(W&X$Qf7LHH|D^nH+k7vde)+7OG=l>I)?Yrk
z+ElyUPsT|6{QKW2(ESl18t_QKu&b)qfytz2g9P{l+lGWWA_5z)WdH*%SI%*_`~T6e
zPp%&2dH+62fFlyYydfg+TGb#9@JPs=RWDoGdf$!`$j*pVyM0SpLqtO3B@A#ebF3-V
zv!8p1fY+2SuXvT(EewgJt3hoQb(iXx>M+3uBj0Qt0v6+2H@$NmFz*{8`2n{_xjEIK
zIunB(Qyp+$Xt4EPr5ys%Z%w~DF!l|I#N297yRSO%ksFi3s0{<)mZL(wS80a;C*Vqj
zgUHD5k-qO#H7L&H2}@#m!wi9^y5C{pmo7;1O~cOTfPh`VN`-^O$iIMnUnD48w$+&G
z&dOKXpz7&+X^5nAg9L1_NRU)A4x908ATn2VoiL<&U}-K#3GhMUl4_`kIQmx`h-Y3J
z)wN97>tnv<IpYoifxLZ~&C(+AjA{U$l^kjVx%7GlKjxdUxtF*)1mYEy+9Y~@;K4;g
zH3F0<$=6!~2-DKCuNE*a_lyCdx?JXBj;Ss_l6(WB1C4bEM53(n5pY0Js)<nvEJ=0Z
zA76k@QN2$xFcx__1gwWcCSd`Qk!nzka@>%RjIuEwxY*;v*S51_L{1BZjgc%|Vt7En
zs(=DZU@oCn0U+khMNgO2peSV}Z(Q1&HG6zwF^S}?7%^`ya-2%ikwF4B1eTy|6#xLS
zU)m61Ab?@UL~w>E#Bs*FG_mEFB3YgpC6JvYl2GDUODzQuU@>nleZoKh!;HgiA=M*R
zbD1Q-Zwws8?3adcSv7me6Cw626eh+gB#R@R;YkGYi2#sP%yVrqR1JP!w?QQNYegco
z=h8q0ofRWZt79bXkJ(uS1nGcF3)+K%luXmkCwzOq9y#!J##wVjhe*cW#N})PIUaBl
z=Q$+-Yv%)lrBp9N&n6%U5^bwkNDsKz?GO=bOQ|kZwu=blAc!2RM%nAmj6Kly&b37d
zNQy*T4GXy%>Hmn_>mF1-{Rf)+Tw9Dl27pMX8qEgPJ*drevD@MVAVY%Eh^(Qy9NAVO
zkb@(#hUz)K`>F&aSld2$0`C9-0RR8?7ZNi7000I_L_t&o0OXOtj?z>XuK)l507*qo
IM6N<$f>!x=E&u=k

literal 0
HcmV?d00001

diff --git a/main/manager-web/src/assets/knowledge-base/star.png b/main/manager-web/src/assets/knowledge-base/star.png
new file mode 100644
index 0000000000000000000000000000000000000000..71dd5f38d9695aae304413c45d4aa3836198067b
GIT binary patch
literal 769
zcmV+c1OEJpP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm0008ENkl<ZcmeE~
zfo`iX3`ODn*jvAB-IuNVGImderH}-0h*?{yQ@lV(?0f8#RQ)%+_}?4g(FJ^0AhH6}
zG+kxivJbD{r>THMUnTlehIo2i?zg7_$fSM<2#{>JynQBsJnOFmplq{!^7MYLj4$Rr
zv;q>yR{55qJo_5Dw_S*b07&@#Z6k?@-`grcXvtKo((va1Qi5PIPA>*`0|em3f<FgX
zL~p<O$(MuykXadrP?4oH=s1oy*{HEEnYZ0E@uGFbHVOk!0EDwG?1QPH^@bSP9*7A?
zJlBQ85CCO9&kPX26an)AL9n)34Lw^GZhk@l%vsjE09YfTK;#*&LNPzJC;;9nsb8-D
z^RK}cf@i4R<=p_4?PEdR+lU1coK|1~!}B%k29V=g_BDKOThHzj(tm>BL(RTtOQnxi
zue$&?vTp&Yf?EuW1d&#Pp-pQ5So)E8KBS%ubAmE==^*It5I}=?lj#AqxlMgDfW)&U
z?9lQCV=HNC{R^4bNo}4RK+zF_@Sbe4o%kk75^8#y$2I{>wE9V&5g)OaNdO?Y?FOj=
z$g^cTO0@W^tsA5YpipNESBOOegqVv#&&?WuXYEtWSp#q%<v|o2UWZ~<0dyK(WgP1`
z#e#GeZV=8_2aM}t!rnj?z!nJt5X@lgQBRLh1k3$M&;4P4n*gcTaU3H+zU1d3>k^&n
zas${R1?Sz}x~&k5aMqfukiHp!s58WcYp0QUAe__v(+&aPUJwYvxZSeT#1r%|0E-2&
zR|S4T3EwuvHtPbIoosy`iXWopHDO%@!0I+qg-*>rS?C6kNB}VWrM6X>bY9nWH^3ad
z5G%0Lvrp_00Ex{jklz#Q6bk{EmDwBVHVi{ik$Fyd7Y0BTWHe6Pm#jc|c0CTmD&Prr
z#+*068Ch-d`3nF5|NnT}hY0`x00v1!K~w_($Q$EfS`HBR00000NkvXXu0mjf$Rt*1

literal 0
HcmV?d00001

diff --git a/main/manager-web/src/components/KnowledgeBaseDialog.vue b/main/manager-web/src/components/KnowledgeBaseDialog.vue
index 6e72d2da..5141a1d1 100644
--- a/main/manager-web/src/components/KnowledgeBaseDialog.vue
+++ b/main/manager-web/src/components/KnowledgeBaseDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="title" :visible="dialogVisible" width="600px" class="knowledge-base-dialog" @close="handleClose">
+  <CustomDialog :title="title" :visible.sync="dialogVisible" width="600px" class="knowledge-base-dialog" @close="handleClose" @confirm="handleSubmit">
     <el-form ref="knowledgeBaseForm" :model="form" :rules="rules" label-width="100px" size="medium">
       <el-form-item :label="$t('knowledgeBaseDialog.name')" prop="name">
         <el-input v-model="form.name" :placeholder="$t('knowledgeBaseDialog.namePlaceholder')" clearable></el-input>
@@ -16,15 +16,12 @@
         </el-select>
       </el-form-item>
     </el-form>
-    <div slot="footer" class="dialog-footer">
-      <el-button @click="handleClose">{{ $t('knowledgeBaseDialog.cancel') }}</el-button>
-      <el-button type="primary" @click="handleSubmit">{{ $t('knowledgeBaseDialog.confirm') }}</el-button>
-    </div>
-  </el-dialog>
+  </CustomDialog>
 </template>
 
 <script>
 import Api from "@/apis/api";
+import CustomDialog from "./CustomDialog.vue";
 
 export default {
   name: "KnowledgeBaseDialog",
@@ -93,6 +90,9 @@ export default {
       }
     };
   },
+  components: {
+    CustomDialog
+  },
   watch: {
     visible(val) {
       this.dialogVisible = val;
diff --git a/main/manager-web/src/i18n/de.js b/main/manager-web/src/i18n/de.js
index 32c931fc..4955a4e1 100644
--- a/main/manager-web/src/i18n/de.js
+++ b/main/manager-web/src/i18n/de.js
@@ -1351,6 +1351,7 @@ export default {
   'knowledgeFileUpload.confirmParse': 'Sind Sie sicher, dass Sie dieses Dokument parsen möchten?',
   'knowledgeFileUpload.nameRequired': 'Bitte Dokumentnamen eingeben',
   'knowledgeFileUpload.fileRequired': 'Bitte wählen Sie eine Datei zum Hochladen aus',
+  'knowledgeFileUpload.fileSizeExceeded': 'Dateigröße darf 10MB nicht überschreiten!',
   'knowledgeFileUpload.getListFailed': 'Dokumentenliste konnte nicht abgerufen werden',
   'knowledgeFileUpload.parseCancelled': 'Parsen abgebrochen',
   'knowledgeFileUpload.deleteCancelled': 'Löschen abgebrochen',
@@ -1384,6 +1385,7 @@ export default {
   'knowledgeFileUpload.comprehensiveSimilarity': 'Umfassende Ähnlichkeit',
   'knowledgeFileUpload.content': 'Inhalt:',
   'knowledgeFileUpload.testQuestionRequired': 'Bitte Testfrage eingeben',
+  'knowledgeFileUpload.sourceDocument': 'Quelldokument',
   'knowledgeFileUpload.parsing': 'Analysiere...',
   'knowledgeBaseDialog.descriptionRequired': 'Bitte Wissensbasis-Beschreibung eingeben',
 
diff --git a/main/manager-web/src/i18n/en.js b/main/manager-web/src/i18n/en.js
index 8e8e1845..a98de47d 100644
--- a/main/manager-web/src/i18n/en.js
+++ b/main/manager-web/src/i18n/en.js
@@ -1351,6 +1351,7 @@ export default {
   'knowledgeFileUpload.confirmParse': 'Are you sure you want to parse this document?',
   'knowledgeFileUpload.nameRequired': 'Please enter document name',
   'knowledgeFileUpload.fileRequired': 'Please select a file to upload',
+  'knowledgeFileUpload.fileSizeExceeded': 'File size cannot exceed 10MB!',
   'knowledgeFileUpload.getListFailed': 'Failed to get document list',
   'knowledgeFileUpload.parseCancelled': 'Parse cancelled',
   'knowledgeFileUpload.deleteCancelled': 'Delete cancelled',
@@ -1382,6 +1383,7 @@ export default {
   'knowledgeFileUpload.testResult': 'Test Result:',
   'knowledgeFileUpload.noRelatedSlices': 'No related slices found',
   'knowledgeFileUpload.comprehensiveSimilarity': 'Comprehensive Similarity',
+  'knowledgeFileUpload.sourceDocument': 'Source Document',
   'knowledgeFileUpload.content': 'Content:',
   'knowledgeFileUpload.testQuestionRequired': 'Please enter test question',
   'knowledgeFileUpload.parsing': 'Parsing...',
diff --git a/main/manager-web/src/i18n/pt_BR.js b/main/manager-web/src/i18n/pt_BR.js
index fd1d58ac..47e7cb61 100644
--- a/main/manager-web/src/i18n/pt_BR.js
+++ b/main/manager-web/src/i18n/pt_BR.js
@@ -1351,6 +1351,7 @@ export default {
   'knowledgeFileUpload.confirmParse': 'Tem certeza de que deseja analisar este documento?',
   'knowledgeFileUpload.nameRequired': 'Por favor, insira o nome do documento',
   'knowledgeFileUpload.fileRequired': 'Por favor, selecione um arquivo para enviar',
+  'knowledgeFileUpload.fileSizeExceeded': 'O tamanho do arquivo não pode exceder 10MB!',
   'knowledgeFileUpload.getListFailed': 'Falha ao obter lista de documentos',
   'knowledgeFileUpload.parseCancelled': 'Análise cancelada',
   'knowledgeFileUpload.deleteCancelled': 'Exclusão cancelada',
@@ -1384,6 +1385,7 @@ export default {
   'knowledgeFileUpload.comprehensiveSimilarity': 'Similaridade Geral',
   'knowledgeFileUpload.content': 'Conteúdo:',
   'knowledgeFileUpload.testQuestionRequired': 'Por favor, insira a pergunta de teste',
+  'knowledgeFileUpload.sourceDocument': 'Documento de origem',
   'knowledgeFileUpload.parsing': 'Analisando...',
   'knowledgeBaseDialog.descriptionRequired': 'Por favor, insira a descrição da base de conhecimento',
 
diff --git a/main/manager-web/src/i18n/vi.js b/main/manager-web/src/i18n/vi.js
index c9ed418b..34ea651c 100644
--- a/main/manager-web/src/i18n/vi.js
+++ b/main/manager-web/src/i18n/vi.js
@@ -1351,6 +1351,7 @@ export default {
   'knowledgeFileUpload.confirmParse': 'Bạn có chắc chắn muốn phân tích cú pháp tài liệu này?',
   'knowledgeFileUpload.nameRequired': 'Vui lòng nhập tên tài liệu',
   'knowledgeFileUpload.fileRequired': 'Vui lòng chọn tệp để tải lên',
+  'knowledgeFileUpload.fileSizeExceeded': 'Kích thước tệp không được vượt quá 10MB!',
   'knowledgeFileUpload.getListFailed': 'Không thể lấy danh sách tài liệu',
   'knowledgeFileUpload.parseCancelled': 'Đã hủy phân tích cú pháp',
   'knowledgeFileUpload.deleteCancelled': 'Đã hủy xóa',
@@ -1384,6 +1385,7 @@ export default {
   'knowledgeFileUpload.comprehensiveSimilarity': 'Độ tương đồng toàn diện',
   'knowledgeFileUpload.content': 'Nội dung:',
   'knowledgeFileUpload.testQuestionRequired': 'Vui lòng nhập câu hỏi kiểm tra',
+  'knowledgeFileUpload.sourceDocument': 'Tài liệu nguồn',
   'knowledgeFileUpload.parsing': 'Đang phân tích...',
   'knowledgeBaseDialog.descriptionRequired': 'Vui lòng nhập mô tả cơ sở kiến thức',
 
diff --git a/main/manager-web/src/i18n/zh_CN.js b/main/manager-web/src/i18n/zh_CN.js
index d488f9d0..41069fbc 100644
--- a/main/manager-web/src/i18n/zh_CN.js
+++ b/main/manager-web/src/i18n/zh_CN.js
@@ -1347,10 +1347,11 @@ export default {
   'knowledgeFileUpload.parseFailed': '文档解析失败',
   'knowledgeFileUpload.deleteSuccess': '文档删除成功',
   'knowledgeFileUpload.deleteFailed': '文档删除失败',
-  'knowledgeFileUpload.confirmDelete': '确定要删除此文檔吗？',
+  'knowledgeFileUpload.confirmDelete': '确定要删除此文档吗？',
   'knowledgeFileUpload.confirmParse': '确定要解析该文档吗？',
   'knowledgeFileUpload.nameRequired': '请输入文档名称',
   'knowledgeFileUpload.fileRequired': '请选择要上传的文件',
+  'knowledgeFileUpload.fileSizeExceeded': '文件大小不能超过10MB!',
   'knowledgeFileUpload.getListFailed': '获取文档列表失败',
   'knowledgeFileUpload.parseCancelled': '已取消解析',
   'knowledgeFileUpload.deleteCancelled': '已取消删除',
@@ -1382,6 +1383,7 @@ export default {
   'knowledgeFileUpload.testResult': '测试结果：',
   'knowledgeFileUpload.noRelatedSlices': '未找到相关切片',
   'knowledgeFileUpload.comprehensiveSimilarity': '综合相似度',
+  'knowledgeFileUpload.sourceDocument': '来源文档',
   'knowledgeFileUpload.content': '内容:',
   'knowledgeFileUpload.testQuestionRequired': '请输入测试问题',
   'knowledgeBaseDialog.descriptionRequired': '请输入知识库描述',
diff --git a/main/manager-web/src/i18n/zh_TW.js b/main/manager-web/src/i18n/zh_TW.js
index ccfce91b..cfb2c594 100644
--- a/main/manager-web/src/i18n/zh_TW.js
+++ b/main/manager-web/src/i18n/zh_TW.js
@@ -1351,6 +1351,7 @@ export default {
   'knowledgeFileUpload.confirmParse': '確定要解析該文檔嗎？',
   'knowledgeFileUpload.nameRequired': '請輸入文檔名稱',
   'knowledgeFileUpload.fileRequired': '請選擇要上傳的文件',
+  'knowledgeFileUpload.fileSizeExceeded': '文件大小不能超過10MB!',
   'knowledgeFileUpload.getListFailed': '獲取文檔列表失敗',
   'knowledgeFileUpload.parseCancelled': '已取消解析',
   'knowledgeFileUpload.deleteCancelled': '已取消删除',
@@ -1384,6 +1385,7 @@ export default {
   'knowledgeFileUpload.comprehensiveSimilarity': '綜合相似度',
   'knowledgeFileUpload.content': '內容:',
   'knowledgeFileUpload.testQuestionRequired': '請輸入測試問題',
+  'knowledgeFileUpload.sourceDocument': '來源文檔',
   'knowledgeFileUpload.parsing': '正在解析中...',
   'knowledgeBaseDialog.descriptionRequired': '請輸入知识库描述',
 
diff --git a/main/manager-web/src/views/KnowledgeBaseItem.vue b/main/manager-web/src/views/KnowledgeBaseItem.vue
index 68d83eba..ed7d7cf3 100644
--- a/main/manager-web/src/views/KnowledgeBaseItem.vue
+++ b/main/manager-web/src/views/KnowledgeBaseItem.vue
@@ -3,7 +3,7 @@
     <div class="doc-section-header">
       <div class="doc-section-left">
         <div class="doc-section-title">{{`${$t('knowledgeBaseManagement.currentKnowledgeBaseDocuments')}（${kb?.name}）`}}</div>
-        <div class="doc-section-count" v-if="kb">{{ $t('knowledgeBaseManagement.totalDocuments', { total: documents.length }) }}</div>
+        <div class="doc-section-count" v-if="kb">{{ $t('knowledgeBaseManagement.totalDocuments', { total }) }}</div>
       </div>
       <div class="doc-section-actions">
         <el-input
@@ -61,7 +61,7 @@
             >
               {{ $t('knowledgeFileUpload.parse') }}
             </el-button>
-            <el-button type="text" class="delete-btn" @click.stop="handleDelete(doc)">
+            <el-button type="text" class="delete-btn" :loading="deleteLoadingMap[doc.id]" @click.stop="handleDelete(doc)">
               {{ $t('knowledgeBaseManagement.delete') }}
             </el-button>
           </div>
@@ -71,11 +71,20 @@
         <el-empty :description="$t('knowledgeBaseManagement.noData')"></el-empty>
       </div>
     </div>
+    <CustomPagination
+      :total="total"
+      :current-page="currentPage"
+      :page-size="pageSize"
+      :page-size-options="pageSizeOptions"
+      @page-change="handlePageChange"
+      @size-change="handleSizeChange"
+    />
   </div>
 </template>
 
 <script>
 import Api from "@/apis/api";
+import CustomPagination from "@/components/CustomPagination.vue";
 
 const iconMap = {
   pdf: require('@/assets/knowledge-base/pdf.png'),
@@ -91,6 +100,7 @@ const iconMap = {
 
 export default {
   name: 'LibraryItem',
+  components: { CustomPagination },
   props: {
     kb: {
       type: Object,
@@ -101,16 +111,23 @@ export default {
     return {
       documents: [],
       docLoading: false,
+      deleteLoadingMap: {},
       searchDocName: '',
+      total: 0,
+      currentPage: 1,
+      pageSize: 10,
+      pageSizeOptions: [10, 20, 50, 100],
     };
   },
   watch: {
     kb: {
       handler(newKb) {
         if (newKb && newKb.datasetId) {
+          this.currentPage = 1;
           this.fetchDocuments();
         } else {
           this.documents = [];
+          this.total = 0;
         }
       },
       immediate: true
@@ -121,8 +138,8 @@ export default {
       if (!this.kb || !this.kb.datasetId) return;
       this.docLoading = true;
       const params = {
-        page: 1,
-        page_size: 100,
+        page: this.currentPage,
+        page_size: this.pageSize,
         name: this.searchDocName
       };
       Api.knowledgeBase.getDocumentList(
@@ -132,10 +149,12 @@ export default {
           this.docLoading = false;
           if (data && data.code === 0) {
             this.documents = data.data.list || [];
+            this.total = data.data.total || 0;
             this.fetchSliceCountsForDocuments();
           } else {
             this.$message.error(data?.msg || '获取文档列表失败');
             this.documents = [];
+            this.total = 0;
           }
         },
         (err) => {
@@ -146,11 +165,24 @@ export default {
             this.$message.error('获取文档列表失败');
           }
           this.documents = [];
+          this.total = 0;
         }
       );
     },
 
     handleSearch() {
+      this.currentPage = 1;
+      this.fetchDocuments();
+    },
+
+    handlePageChange(page) {
+      this.currentPage = page;
+      this.fetchDocuments();
+    },
+
+    handleSizeChange(size) {
+      this.pageSize = size;
+      this.currentPage = 1;
       this.fetchDocuments();
     },
 
@@ -173,14 +205,20 @@ export default {
           type: 'warning'
         }
       ).then(() => {
+        this.$set(this.deleteLoadingMap, doc.id, true);
         Api.knowledgeBase.deleteDocument(this.kb.datasetId, doc.id, (res) => {
+          this.$set(this.deleteLoadingMap, doc.id, false);
           if (res.data && res.data.code === 0) {
+            if (this.documents.length === 1 && this.currentPage > 1) {
+              this.currentPage--;
+            }
             this.fetchDocuments();
             this.$message.success(this.$t('knowledgeFileUpload.deleteSuccess'));
           } else {
             this.$message.error(res.data?.msg || this.$t('knowledgeFileUpload.deleteFailed'));
           }
         }, () => {
+          this.$set(this.deleteLoadingMap, doc.id, false);
           this.$message.error(this.$t('knowledgeFileUpload.deleteFailed'));
         });
       }).catch(() => {});
@@ -301,7 +339,7 @@ export default {
 
     getProgressText(doc) {
       const code = doc.parseStatusCode;
-      if (code === 3) return '✓';
+      if (code === 3) return '100%';
       if (code === 1) {
         if (doc.chunkNum && doc.totalChunkNum) {
           return Math.round((doc.chunkNum / doc.totalChunkNum) * 100) + '%';
@@ -377,13 +415,12 @@ export default {
 
 .doc-section-actions {
   display: flex;
-  gap: 8px;
   align-items: center;
 }
 
 .doc-search-input {
   width: 200px;
-  margin-left: 8px;
+  margin-right: 10px;
 }
 
 /* ========== Document Grid ========== */
@@ -399,7 +436,7 @@ export default {
 }
 
 .doc-card {
-  height: 120px;
+  max-height: 120px;
   border-radius: 8px;
   border: 1px solid transparent;
   padding: 18px;
diff --git a/main/manager-web/src/views/KnowledgeBaseManagement.vue b/main/manager-web/src/views/KnowledgeBaseManagement.vue
index ceec6b41..e15650a0 100644
--- a/main/manager-web/src/views/KnowledgeBaseManagement.vue
+++ b/main/manager-web/src/views/KnowledgeBaseManagement.vue
@@ -117,20 +117,18 @@
     />
 
     <!-- Slice Dialog -->
-    <el-dialog
+    <CustomDialog
       :title="`${$t('knowledgeFileUpload.viewSlices')} - ${currentDocumentName}`"
       :visible.sync="sliceDialogVisible"
-      width="900px"
-      :close-on-click-modal="false"
+      width="1200px"
+      :footer="false"
     >
       <div class="slice-management">
         <div v-loading="sliceLoading" class="slice-content-container">
           <div v-if="sliceList.length > 0" class="slice-cards-container">
             <div v-for="(slice, index) in sliceList" :key="index" class="slice-card">
-              <div class="slice-header-info">
-                <p><strong>{{ $t('knowledgeFileUpload.slice') }} {{ (sliceCurrentPage - 1) * slicePageSize + index + 1 }}</strong></p>
-              </div>
               <div class="slice-card-content">
+                <span class="clice-index">{{ $t('knowledgeFileUpload.slice') }} {{ (sliceCurrentPage - 1) * slicePageSize + index + 1 }}</span>
                 <div class="content-text">{{ slice.content }}</div>
               </div>
             </div>
@@ -140,30 +138,31 @@
           </div>
         </div>
         <div class="slice-pagination">
-          <el-select v-model="slicePageSize" @change="handleSliceSizeChange" class="slice-page-size-select">
-            <el-option v-for="item in [10, 20, 50]" :key="item" :label="`${item}${$t('knowledgeFileUpload.itemsPerPage')}`" :value="item"></el-option>
-          </el-select>
-          <button class="slice-page-btn" :disabled="sliceCurrentPage === 1" @click="sliceCurrentPage = 1; fetchSlices()">{{ $t('knowledgeBaseManagement.firstPage') }}</button>
-          <button class="slice-page-btn" :disabled="sliceCurrentPage === 1" @click="sliceCurrentPage--; fetchSlices()">{{ $t('knowledgeBaseManagement.prevPage') }}</button>
-          <button v-for="page in sliceVisiblePages" :key="page" class="slice-page-btn" :class="{ active: page === sliceCurrentPage }" @click="sliceCurrentPage = page; fetchSlices()">{{ page }}</button>
-          <button class="slice-page-btn" :disabled="sliceCurrentPage >= slicePageCount" @click="sliceCurrentPage++; fetchSlices()">{{ $t('knowledgeBaseManagement.nextPage') }}</button>
-          <span class="slice-total-text"> {{ $t('knowledgeBaseManagement.totalRecords', { total: sliceTotal }) }}</span>
+          <CustomPagination
+            :total="parseInt(sliceTotal)"
+            :current-page="sliceCurrentPage"
+            :page-size="slicePageSize"
+            :page-size-options="[10, 20, 50]"
+            @size-change="handleSliceSizeChange"
+            @page-change="handleSlicePageChange"
+          />
         </div>
       </div>
-    </el-dialog>
+    </CustomDialog>
 
     <!-- Upload Dialog -->
-    <el-dialog
+    <CustomDialog
       :title="$t('knowledgeFileUpload.uploadDocument')"
       :visible.sync="uploadDialogVisible"
       width="800px"
-      :close-on-click-modal="false"
       @close="handleUploadDialogClose"
+      @confirm="handleBatchUploadSubmit"
     >
       <el-upload
         ref="uploadRef"
         action="#"
         :auto-upload="false"
+        :show-file-list="false"
         :on-change="handleFileChange"
         multiple
         accept=".doc,.docx,.pdf,.txt,.md,.mdx,.csv,.xls,.xlsx,.ppt,.pptx"
@@ -189,48 +188,61 @@
           </div>
         </div>
       </div>
-      <span slot="footer">
-        <el-button @click="uploadDialogVisible = false">{{ $t('knowledgeFileUpload.cancel') }}</el-button>
-        <el-button type="primary" @click="handleBatchUploadSubmit" :loading="uploading" :disabled="selectedFilesList.length === 0">
-          {{ $t('knowledgeFileUpload.confirm') }} ({{ selectedFilesList.length }})
-        </el-button>
-      </span>
-    </el-dialog>
+    </CustomDialog>
 
     <!-- Retrieval Test Dialog -->
-    <el-dialog
+    <CustomDialog
       :title="$t('knowledgeFileUpload.retrievalTest')"
       :visible.sync="retrievalTestDialogVisible"
       width="900px"
       :close-on-click-modal="false"
+      :confirm-text="$t('knowledgeFileUpload.executeTest')"
+      :confirmLoading="retrievalTestLoading"
+      @confirm="runRetrievalTest"
     >
       <div class="retrieval-test-form">
         <el-form :model="retrievalTestForm" label-width="100px">
           <el-form-item :label="$t('knowledgeFileUpload.testQuestion')" required>
             <el-input
               v-model="retrievalTestForm.question"
-              type="textarea"
-              :rows="3"
+              @keyup.enter.native="runRetrievalTest"
+              clearable
               :placeholder="$t('knowledgeFileUpload.testQuestionPlaceholder')"
             />
           </el-form-item>
         </el-form>
-        <div style="text-align: center; margin-top: 20px;">
-          <el-button type="primary" @click="runRetrievalTest" :loading="retrievalTestLoading">{{ $t('knowledgeFileUpload.executeTest') }}</el-button>
-          <el-button @click="retrievalTestDialogVisible = false">{{ $t('knowledgeFileUpload.cancel') }}</el-button>
-        </div>
         <div v-if="retrievalTestResult" class="retrieval-test-result" style="margin-top: 20px;">
-          <h4 style="margin-bottom: 12px;">{{ $t('knowledgeFileUpload.testResult') }}</h4>
-          <div class="result-chunks">
+          <div class="result-chunks" v-if="retrievalTestResult.chunks.length">
             <div v-for="(chunk, index) in retrievalTestResult.chunks" :key="index" class="result-chunk">
-              <p><strong>{{ $t('knowledgeFileUpload.slice') }} {{ index + 1 }}</strong></p>
-              <div style="margin: 8px 0; font-size: 12px; color: #409eff;">{{ $t('knowledgeFileUpload.comprehensiveSimilarity') }}: {{ (chunk.similarity || 0).toFixed(4) }}</div>
-              <div class="chunk-content">{{ chunk.content }}</div>
+              <div class="chunk-left">
+                <div class="chunk-similarity">
+                  <p class="similarity-label">{{ $t('knowledgeFileUpload.comprehensiveSimilarity') }}</p>
+                  <p class="similarity-value">{{ (chunk.similarity || 0).toFixed(4) }}</p>
+                  <el-progress
+                    :percentage="Math.round((chunk.similarity || 0) * 100)"
+                    :stroke-width="6"
+                    :show-text="false"
+                    class="similarity-progress"
+                  />
+                </div>
+              </div>
+              <el-divider direction="vertical"></el-divider>
+              <div class="chunk-right">
+                
+                <div class="chunk-content">
+                  <div class="chunk-right-header">
+                    <span class="chunk-source">{{ $t('knowledgeFileUpload.sourceDocument') }}：{{ chunk.document_keyword || '-' }}</span>
+                    <span class="chunk-index">{{ $t('knowledgeFileUpload.slice') }} {{ index + 1 }}</span>
+                  </div>
+                  <p>{{ chunk.content }}</p>
+                </div>
+              </div>
             </div>
           </div>
+          <el-empty v-else :description="$t('knowledgeFileUpload.noSliceData')"></el-empty>
         </div>
       </div>
-    </el-dialog>
+    </CustomDialog>
 
     <el-footer>
       <version-footer />
@@ -245,9 +257,11 @@ import VersionFooter from "@/components/VersionFooter.vue";
 import KnowledgeBaseDialog from "@/components/KnowledgeBaseDialog.vue";
 import KnowledgeBaseItem from "./KnowledgeBaseItem.vue";
 import ManualIcon from "@/components/ManualIcon.vue";
+import CustomDialog from "@/components/CustomDialog.vue";
+import CustomPagination from "@/components/CustomPagination.vue";
 
 export default {
-  components: { HeaderBar, VersionFooter, KnowledgeBaseDialog, KnowledgeBaseItem, ManualIcon },
+  components: { HeaderBar, VersionFooter, KnowledgeBaseDialog, KnowledgeBaseItem, ManualIcon, CustomDialog, CustomPagination },
   data() {
     return {
       knowledgeBases: [],
@@ -290,22 +304,6 @@ export default {
         kb.name.toLowerCase().includes(keyword)
       );
     },
-    slicePageCount() {
-      return Math.ceil(this.sliceTotal / this.slicePageSize);
-    },
-    sliceVisiblePages() {
-      const pages = [];
-      const maxVisible = 3;
-      let start = Math.max(1, this.sliceCurrentPage - 1);
-      let end = Math.min(this.slicePageCount, start + maxVisible - 1);
-      if (end - start + 1 < maxVisible) {
-        start = Math.max(1, end - maxVisible + 1);
-      }
-      for (let i = start; i <= end; i++) {
-        pages.push(i);
-      }
-      return pages;
-    },
   },
   created() {
     this.fetchKnowledgeBases();
@@ -478,6 +476,12 @@ export default {
 
     handleFileChange(file) {
       if (!file || !file.raw) return;
+       // 文件上传前的验证
+      const isLt10M = file.size / 1024 / 1024 < 10;
+      if (!isLt10M) {
+        this.$message.error(this.$t('knowledgeFileUpload.fileSizeExceeded'));
+        return;
+      }
       this.selectedFilesList.push({
         name: file.name,
         size: file.size,
@@ -564,6 +568,7 @@ export default {
     },
 
     runRetrievalTest() {
+      if (this.retrievalTestLoading) return;
       if (!this.retrievalTestForm.question.trim()) {
         this.$message.error(this.$t('knowledgeFileUpload.testQuestionRequired'));
         return;
@@ -648,6 +653,11 @@ export default {
       this.fetchSlices();
     },
 
+    handleSlicePageChange(page) {
+      this.sliceCurrentPage = page;
+      this.fetchSlices();
+    },
+
     getCardColorClass(index) {
       const colors = ['blue', 'green', 'purple', 'orange', 'pink', 'cyan'];
       return colors[index % colors.length];
@@ -1009,7 +1019,6 @@ export default {
 .slice-management {
   display: flex;
   flex-direction: column;
-  max-height: 65vh;
 }
 
 .slice-content-container {
@@ -1018,7 +1027,7 @@ export default {
 }
 
 .slice-cards-container {
-  max-height: 50vh;
+  max-height: 60vh;
   overflow-y: auto;
   padding-right: 4px;
 
@@ -1033,9 +1042,6 @@ export default {
 
 .slice-card {
   background: #f8f9fa;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  padding: 14px;
   margin-bottom: 12px;
 
   &:last-child {
@@ -1057,10 +1063,9 @@ export default {
 .slice-card-content {
   background: #fff;
   border: 1px solid #f0f0f0;
-  border-radius: 4px;
+  border-radius: 8px;
   padding: 12px;
-  max-height: 200px;
-  overflow-y: auto;
+  text-align: left;
 
   &::-webkit-scrollbar {
     width: 4px;
@@ -1069,6 +1074,13 @@ export default {
     background: #e0e0e0;
     border-radius: 2px;
   }
+  .clice-index {
+    color: #467afe;
+    display: inline-block;
+    padding: 4px 6px;
+    background: #e6f0fe;
+    border-radius: 4px;
+  }
 }
 
 .content-text {
@@ -1088,51 +1100,9 @@ export default {
 
 .slice-pagination {
   display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-top: 16px;
-  padding-top: 12px;
-  border-top: 1px solid #e5e7eb;
+  justify-content: center;
 }
 
-.slice-page-size-select {
-  width: 100px;
-  margin-right: 8px;
-}
-
-.slice-page-btn {
-  min-width: 32px;
-  height: 28px;
-  padding: 0 8px;
-  border-radius: 4px;
-  border: 1px solid #e5e7eb;
-  background: #fff;
-  color: #606266;
-  font-size: 13px;
-  cursor: pointer;
-  transition: all 0.2s;
-
-  &:hover {
-    background: #f5f7fa;
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  &.active {
-    background: #6b80eb;
-    color: #fff;
-    border-color: #6b80eb;
-  }
-}
-
-.slice-total-text {
-  margin-left: 8px;
-  color: #9ca3af;
-  font-size: 13px;
-}
 
 /* ========== Selected Files List ========== */
 .selected-files-section {
@@ -1216,28 +1186,92 @@ export default {
   }
 
   .result-chunk {
-    background: #f8f9fa;
     border: 1px solid #e5e7eb;
     border-radius: 8px;
     padding: 14px;
     margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+    gap: 14px;
 
-    p {
-      margin: 0 0 8px 0;
-      font-size: 14px;
+    .chunk-left {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+
+      .chunk-similarity {
+        // font-size: 12px;
+        color: #409eff;
+        white-space: nowrap;
+
+        .similarity-label {
+          // font-size: 12px;
+          color: #333;
+          margin-bottom: 4px;
+        }
+
+        .similarity-value {
+          text-align: left;
+          margin-top: 4px;
+          font-size: 16px;
+          font-weight: 600;
+          margin-bottom: 12px;
+        }
+
+        .similarity-progress {
+          margin-top: 8px;
+
+          ::v-deep(.el-progress-bar__outer) {
+            border-radius: 3px;
+            background-color: rgba(64, 158, 255, 0.1);
+          }
+          ::v-deep(.el-progress-bar__inner) {
+            border-radius: 3px;
+            background: #4a7cfd;
+          }
+        }
+      }
     }
 
-    .chunk-content {
-      background: #fff;
-      border: 1px solid #f0f0f0;
-      border-radius: 4px;
-      padding: 12px;
-      max-height: 150px;
-      overflow-y: auto;
-      font-size: 14px;
-      line-height: 1.6;
-      white-space: pre-wrap;
-      word-break: break-word;
+    .chunk-right {
+      flex: 1;
+      min-width: 0;
+
+      .chunk-right-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 8px;
+
+        .chunk-source {
+          font-size: 14px;
+          font-weight: 600;
+        }
+
+        .chunk-index {
+          color: #467afe;
+          display: inline-block;
+          padding: 4px 6px;
+          background: #e6f0fe;
+          border-radius: 4px;
+        }
+      }
+
+      .chunk-content {
+        text-align: left;
+        white-space: normal;
+        background: #fff;
+        border-radius: 4px;
+        // max-height: 150px;
+        // overflow-y: auto;
+        font-size: 14px;
+        line-height: 1.6;
+        // white-space: pre-wrap;
+        // word-break: break-word;
+        > p {
+          margin: 0;
+        }
+      }
     }
   }
 }