From 8a50eea4cee101dc0e91383be214ea35bd6ac371 Mon Sep 17 00:00:00 2001
From: zhuoqinglian <1035449612@qq.com>
Date: Wed, 3 Jun 2026 16:49:08 +0800
Subject: [PATCH 1/5] =?UTF-8?q?update:=20=E7=9F=A5=E8=AF=86=E5=BA=93?=
 =?UTF-8?q?=E6=95=B4=E4=BD=93=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/KnowledgeBaseItem.vue           |  597 ++++++
 .../src/views/KnowledgeBaseManagement.vue     | 1709 ++++++++++-------
 2 files changed, 1661 insertions(+), 645 deletions(-)
 create mode 100644 main/manager-web/src/views/KnowledgeBaseItem.vue

diff --git a/main/manager-web/src/views/KnowledgeBaseItem.vue b/main/manager-web/src/views/KnowledgeBaseItem.vue
new file mode 100644
index 00000000..f0a6a6a1
--- /dev/null
+++ b/main/manager-web/src/views/KnowledgeBaseItem.vue
@@ -0,0 +1,597 @@
+<template>
+  <div class="doc-section">
+    <div class="doc-section-header">
+      <div class="doc-section-left">
+        <div class="doc-section-title">{{`当前知识库文档资产（${kb?.name}）`}}</div>
+        <div class="doc-section-count" v-if="kb">共 {{ documents.length }} 个文档</div>
+      </div>
+      <div class="doc-section-actions">
+        <el-input
+          placeholder="搜索文档..."
+          v-model="searchDocName"
+          class="doc-search-input"
+          size="small"
+          prefix-icon="el-icon-search"
+          clearable
+        />
+        <el-button size="small" @click="handleSearch">查询</el-button>
+        <el-button size="small" @click="handleUpload">新增</el-button>
+        <el-button size="small" @click="handleRetrievalTest">召回测试</el-button>
+      </div>
+    </div>
+    <div class="doc-grid" v-loading="docLoading" element-loading-text="加载中...">
+      <div v-for="doc in documents" :key="doc.id" class="doc-card">
+        <div class="doc-card-top">
+          <div class="doc-file-icon" :class="getFileIconClass(doc.name)">
+            <i :class="getFileIcon(doc.name)"></i>
+          </div>
+          <div class="doc-card-info">
+            <div class="doc-card-name" :title="doc.name">{{ doc.name }}</div>
+            <div class="doc-card-meta">上传时间 {{ formatDate(doc.createdAt) }}</div>
+          </div>
+        </div>
+        <div class="doc-card-bottom">
+          <div class="doc-card-progress">
+            <div class="progress-ring">
+              <svg viewBox="0 0 36 36">
+                <circle class="bg" cx="18" cy="18" r="14"/>
+                <circle class="fg" :class="getProgressClass(doc)" cx="18" cy="18" r="14"
+                  stroke-dasharray="87.96"
+                  :stroke-dashoffset="getProgressOffset(doc)"/>
+              </svg>
+              <span class="progress-ring-text" :style="{ color: getProgressTextColor(doc) }">{{ getProgressText(doc) }}</span>
+            </div>
+            <span class="progress-label" :class="getProgressClass(doc)">{{ getDocStatusText(doc) }}</span>
+            <span class="doc-slice-count" v-if="doc.sliceCount > 0">切片 {{ doc.sliceCount }}</span>
+          </div>
+          <div class="doc-card-actions">
+            <el-button
+              v-if="doc.parseStatusCode === 3"
+              type="text"
+              @click.stop="$emit('view-slices', doc)"
+            >
+              查看切片
+            </el-button>
+            <el-button
+              v-else
+              type="text"
+              :disabled="doc.parseStatusCode === 1"
+              :loading="doc.parsing"
+              @click.stop="handleParse(doc)"
+            >
+              解析
+            </el-button>
+            <el-button type="text" class="delete-btn" @click.stop="handleDelete(doc)">
+              删除
+            </el-button>
+          </div>
+        </div>
+      </div>
+      <div v-if="documents.length === 0 && !docLoading" class="doc-empty">
+        <el-empty description="暂无文档"></el-empty>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Api from "@/apis/api";
+
+export default {
+  name: 'LibraryItem',
+  props: {
+    kb: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      documents: [],
+      docLoading: false,
+      searchDocName: '',
+    };
+  },
+  watch: {
+    kb: {
+      handler(newKb) {
+        if (newKb && newKb.datasetId) {
+          this.fetchDocuments();
+        } else {
+          this.documents = [];
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    fetchDocuments() {
+      if (!this.kb || !this.kb.datasetId) return;
+      this.docLoading = true;
+      const params = {
+        page: 1,
+        page_size: 100,
+        name: this.searchDocName
+      };
+      Api.knowledgeBase.getDocumentList(
+        this.kb.datasetId,
+        params,
+        ({ data }) => {
+          this.docLoading = false;
+          if (data && data.code === 0) {
+            this.documents = data.data.list || [];
+            this.fetchSliceCountsForDocuments();
+          } else {
+            this.$message.error(data?.msg || '获取文档列表失败');
+            this.documents = [];
+          }
+        },
+        (err) => {
+          this.docLoading = false;
+          if (err && err.data) {
+            this.$message.error(err.data.msg || err.msg || '获取文档列表失败');
+          } else {
+            this.$message.error('获取文档列表失败');
+          }
+          this.documents = [];
+        }
+      );
+    },
+
+    handleSearch() {
+      this.fetchDocuments();
+    },
+
+    handleUpload() {
+      if (!this.kb) {
+        this.$message.warning('请先选择知识库');
+        return;
+      }
+      this.$emit('upload');
+    },
+
+    handleRetrievalTest() {
+      if (!this.kb) {
+        this.$message.warning('请先选择知识库');
+        return;
+      }
+      this.$emit('retrieval-test');
+    },
+
+    handleDelete(doc) {
+      if (!this.kb) return;
+      this.$confirm(
+        '确定要删除该文档吗？',
+        '警告',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        Api.knowledgeBase.deleteDocument(this.kb.datasetId, doc.id, (res) => {
+          if (res.data && res.data.code === 0) {
+            this.fetchDocuments();
+            this.$message.success('文档删除成功');
+          } else {
+            this.$message.error(res.data?.msg || '文档删除失败');
+          }
+        }, () => {
+          this.$message.error('文档删除失败');
+        });
+      }).catch(() => {});
+    },
+
+    handleParse(doc) {
+      this.$confirm('确定要解析该文档吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'info'
+      }).then(() => {
+        this.$set(doc, 'parsing', true);
+        doc.parseStatusCode = 1;
+        Api.knowledgeBase.parseDocument(
+          this.kb.datasetId,
+          doc.id,
+          ({ data }) => {
+            if (data && data.code === 0) {
+              this.$message.success('解析请求已提交，正在处理中');
+              this.$set(doc, 'parsing', false);
+              this.startParsePolling(doc);
+            } else {
+              this.$set(doc, 'parsing', false);
+              doc.parseStatusCode = 0;
+              this.$message.error(data?.msg || '解析失败');
+            }
+          },
+          (err) => {
+            this.$set(doc, 'parsing', false);
+            doc.parseStatusCode = 0;
+            this.$message.error(err?.data?.msg || '解析失败');
+          }
+        );
+      }).catch(() => {});
+    },
+
+    startParsePolling(doc) {
+      const poll = () => {
+        if (!this.kb) return;
+        Api.knowledgeBase.getDocumentList(
+          this.kb.datasetId,
+          { page: 1, page_size: 100, name: this.searchDocName },
+          ({ data }) => {
+            if (data && data.code === 0) {
+              const list = data.data.list || [];
+              const updated = list.find(d => d.id === doc.id);
+              if (updated) {
+                this.$set(doc, 'parseStatusCode', updated.parseStatusCode);
+                if (updated.parseStatusCode !== 1) {
+                  this.$set(doc, 'parsing', false);
+                  if (updated.parseStatusCode === 3) {
+                    this.$message.success(`文档「${doc.name}」解析完成`);
+                    this.fetchSliceCountForSingleDocument(doc);
+                  } else if (updated.parseStatusCode === 4) {
+                    this.$message.error(`文档「${doc.name}」解析失败`);
+                  }
+                  return;
+                }
+              }
+              setTimeout(poll, 5000);
+            }
+          },
+          () => {
+            setTimeout(poll, 5000);
+          }
+        );
+      };
+      setTimeout(poll, 3000);
+    },
+
+    fetchSliceCountsForDocuments() {
+      if (!this.documents || this.documents.length === 0) return;
+      this.documents.forEach(doc => {
+        this.fetchSliceCountForSingleDocument(doc);
+      });
+    },
+
+    fetchSliceCountForSingleDocument(doc) {
+      const params = { page: 1, page_size: 1 };
+      Api.knowledgeBase.listChunks(
+        this.kb.datasetId,
+        doc.id,
+        params,
+        ({ data }) => {
+          if (data && data.code === 0) {
+            this.$set(doc, 'sliceCount', data.data.total || 0);
+          }
+        },
+        () => {}
+      );
+    },
+
+    getFileIconClass(fileName) {
+      if (!fileName) return 'txt';
+      const ext = fileName.split('.').pop().toLowerCase();
+      if (ext === 'pdf') return 'pdf';
+      if (['doc', 'docx'].includes(ext)) return 'word';
+      if (['xls', 'xlsx', 'csv'].includes(ext)) return 'excel';
+      if (['ppt', 'pptx'].includes(ext)) return 'ppt';
+      if (['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp'].includes(ext)) return 'img';
+      return 'txt';
+    },
+
+    getFileIcon(fileName) {
+      if (!fileName) return 'el-icon-document';
+      const ext = fileName.split('.').pop().toLowerCase();
+      if (ext === 'pdf') return 'el-icon-document';
+      if (['doc', 'docx'].includes(ext)) return 'el-icon-document';
+      if (['xls', 'xlsx', 'csv'].includes(ext)) return 'el-icon-s-grid';
+      if (['ppt', 'pptx'].includes(ext)) return 'el-icon-data-board';
+      if (['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp'].includes(ext)) return 'el-icon-picture';
+      return 'el-icon-document';
+    },
+
+    getProgressClass(doc) {
+      const code = doc.parseStatusCode;
+      if (code === 3) return 'complete';
+      if (code === 1) return 'processing';
+      return 'pending';
+    },
+
+    getProgressOffset(doc) {
+      const code = doc.parseStatusCode;
+      const circumference = 87.96;
+      if (code === 3) return 0;
+      if (code === 1) {
+        const progress = doc.chunkNum && doc.totalChunkNum
+          ? Math.round((doc.chunkNum / doc.totalChunkNum) * 100)
+          : 50;
+        return circumference * (1 - progress / 100);
+      }
+      return circumference;
+    },
+
+    getProgressText(doc) {
+      const code = doc.parseStatusCode;
+      if (code === 3) return '✓';
+      if (code === 1) {
+        if (doc.chunkNum && doc.totalChunkNum) {
+          return Math.round((doc.chunkNum / doc.totalChunkNum) * 100) + '%';
+        }
+        return '50%';
+      }
+      return '0%';
+    },
+
+    getProgressTextColor(doc) {
+      const code = doc.parseStatusCode;
+      if (code === 3) return '#34c759';
+      if (code === 1) return '#2f5bff';
+      return '#7888a8';
+    },
+
+    getDocStatusText(doc) {
+      const code = doc.parseStatusCode;
+      if (code === 3) return '已完成';
+      if (code === 1) return '处理中';
+      if (code === 0) return '未开始';
+      if (code === 4) return '失败';
+      if (code === 2) return '已取消';
+      return '未开始';
+    },
+
+    formatDate(dateString) {
+      if (!dateString) return '';
+      const date = new Date(dateString);
+      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+/* ========== Document Section ========== */
+.doc-section {
+  background: #fff;
+  border-radius: 16px;
+  padding: 16px 20px;
+  box-shadow: 0 4px 16px rgba(31, 42, 68, 0.06);
+  border: 1px solid #f0f3f9;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.doc-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.doc-section-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.doc-section-title {
+  font-size: 20px;
+  font-weight: 700;
+  color: #1f2a44;
+}
+
+.doc-section-count {
+  font-size: 14px;
+  color: #788ba8;
+}
+
+.doc-section-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.doc-search-input {
+  width: 200px;
+  margin-left: 8px;
+}
+
+/* ========== Document Grid ========== */
+.doc-grid {
+  padding: 10px;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px 20px;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+
+.doc-card {
+  height: 110px;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 18px;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+  transition: all 0.25s;
+  position: relative;
+  box-shadow: 0 0 6px rgba(47, 91, 255, 0.15);
+
+  &:hover {
+    box-shadow: 0 0 6px rgba(47, 91, 255, 0.15);
+    border: 1px solid #6b80eb;
+  }
+}
+
+.doc-card-top {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 12px;
+}
+
+.doc-file-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  flex-shrink: 0;
+
+  &.pdf { background: #fff0f0; color: #ff5a5f; }
+  &.word { background: #e8ecff; color: #2f5bff; }
+  &.excel { background: #e8f9ee; color: #34c759; }
+  &.ppt { background: #fff3e0; color: #ff9500; }
+  &.txt { background: #f0f3f9; color: #788ba8; }
+  &.img { background: #f3e8ff; color: #9b59b6; }
+}
+
+.doc-card-info {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  text-align: left;
+}
+
+.doc-card-name {
+  font-size: 15px;
+  font-weight: 600;
+  color: #1f2a44;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 4px;
+}
+
+.doc-card-meta {
+  font-size: 13px;
+  color: #7888a8;
+}
+
+.doc-card-bottom {
+  margin-top: auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.doc-card-progress {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* ========== Progress Ring ========== */
+.progress-ring {
+  width: 36px;
+  height: 36px;
+  position: relative;
+
+  svg {
+    width: 36px;
+    height: 36px;
+    transform: rotate(-90deg);
+  }
+
+  .bg {
+    fill: none;
+    stroke: #e7ecf5;
+    stroke-width: 4;
+  }
+
+  .fg {
+    fill: none;
+    stroke-width: 4;
+    stroke-linecap: round;
+    transition: stroke-dashoffset 0.5s ease;
+
+    &.complete { stroke: #34c759; }
+    &.processing { stroke: #2f5bff; }
+    &.pending { stroke: #e7ecf5; }
+  }
+}
+
+.progress-ring-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 10px;
+  font-weight: 600;
+  color: #7888a8;
+}
+
+.progress-label {
+  font-size: 12px;
+  color: #7888a8;
+
+  &.complete { color: #34c759; }
+  &.processing { color: #2f5bff; }
+}
+
+.doc-card-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  :deep(.el-button--text) {
+    padding: 4px 8px;
+    font-size: 13px;
+  }
+
+  .delete-btn {
+    color: #f56c6c !important;
+    &:hover {
+      color: #f78989 !important;
+    }
+  }
+}
+
+.doc-slice-count {
+  font-size: 12px;
+  color: #6b80eb;
+  background: #f0f3ff;
+  padding: 2px 8px;
+  border-radius: 4px;
+  margin-left: 4px;
+}
+
+.doc-empty {
+  grid-column: 1 / -1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 300px;
+  color: #b0bbc9;
+  font-size: 14px;
+
+  i {
+    font-size: 48px;
+    margin-bottom: 12px;
+  }
+}
+
+@media (max-width: 1144px) {
+  .doc-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 900px) {
+  .doc-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/main/manager-web/src/views/KnowledgeBaseManagement.vue b/main/manager-web/src/views/KnowledgeBaseManagement.vue
index e04fc785..6353e2a8 100644
--- a/main/manager-web/src/views/KnowledgeBaseManagement.vue
+++ b/main/manager-web/src/views/KnowledgeBaseManagement.vue
@@ -1,116 +1,236 @@
 <template>
   <div class="welcome">
     <HeaderBar />
-
     <div class="operation-bar">
-      <h2 class="page-title">{{ $t('knowledgeBaseManagement.title') }}</h2>
+      <h2 class="page-title">知识库中心</h2>
       <div class="right-operations">
-        <el-input :placeholder="$t('knowledgeBaseManagement.searchPlaceholder')" v-model="searchName" class="search-input"
-          @keyup.enter.native="handleSearch" clearable />
-        <el-button class="btn-search" @click="handleSearch">{{ $t('knowledgeBaseManagement.search') }}</el-button>
+        <el-input
+          placeholder="搜索知识库..."
+          v-model="searchKbName"
+          class="search-input"
+          @keyup.enter.native="handleSearchKb"
+          clearable
+          prefix-icon="el-icon-search"
+        />
+        <el-button class="btn-upload" @click="handleSearchKb">
+          <i class="el-icon-search"></i>
+          查询
+        </el-button>
+        <el-button class="btn-new-kb" @click="showAddDialog">
+          <i class="el-icon-plus"></i>
+          新建知识库
+        </el-button>
       </div>
     </div>
 
     <div class="main-wrapper">
       <div class="content-panel">
-        <div class="content-area">
-          <el-card class="params-card" shadow="never">
-            <div>
-              <el-table ref="paramsTable" :data="knowledgeBaseList" class="transparent-table" v-loading="loading"
-                :element-loading-text="$t('common.loading')" element-loading-spinner="el-icon-loading"
-                element-loading-background="rgba(255, 255, 255, 0.7)"
-                :header-cell-class-name="headerCellClassName" @selection-change="handleSelectionChange">
-                <el-table-column type="selection" width="55" align="center" />
-                <el-table-column :label="$t('knowledgeBaseManagement.name')" prop="name" align="center">
-                  <template slot-scope="scope">
-                    <span class="knowledge-base-name">{{ scope.row.name }}</span>
-                  </template>
-                </el-table-column>
-                <el-table-column :label="$t('knowledgeBaseManagement.description')" prop="description" align="center" show-overflow-tooltip>
-                  <template slot-scope="scope">
-                    <span>{{ scope.row.description || '-' }}</span>
-                  </template>
-                </el-table-column>
-                <el-table-column :label="$t('knowledgeBaseManagement.documentCount')" align="center">
-                  <template slot-scope="scope">
-                    <span>{{ scope.row.documentCount || 0 }}</span>
-                  </template>
-                </el-table-column>
-                <el-table-column :label="$t('knowledgeBaseManagement.status')" align="center">
-                  <template slot-scope="scope">
-                    <el-switch
-                      v-model="scope.row.status"
-                      :active-value="1"
-                      :inactive-value="0"
-                      active-color="#13ce66"
-                      inactive-color="#909399"
-                      @change="handleStatusChange(scope.row)"
-                    ></el-switch>
-                  </template>
-                </el-table-column>
-                <el-table-column :label="$t('knowledgeBaseManagement.createdAt')" prop="createdAt" align="center">
-                  <template slot-scope="scope">
-                    <span>{{ formatDate(scope.row.createdAt) }}</span>
-                  </template>
-                </el-table-column>
-                <el-table-column :label="$t('knowledgeBaseManagement.operation')" align="center">
-                  <template slot-scope="scope">
-                    <el-button size="mini" type="text" @click="showViewDialog(scope.row)">
-                      {{ $t('knowledgeBaseManagement.view') }}
-                    </el-button>
-                    <el-button size="mini" type="text" @click="showEditDialog(scope.row)">
-                      {{ $t('knowledgeBaseManagement.edit') }}
-                    </el-button>
-                    <el-button size="mini" type="text" @click="deleteSingleKnowledgeBase(scope.row)">
-                      {{ $t('knowledgeBaseManagement.delete') }}
-                    </el-button>
-                  </template>
-                </el-table-column>
-              </el-table>
+        <div class="content-area" v-loading="loading" element-loading-text="加载中...">
+          <!-- Knowledge Base Cards Section -->
+          <div class="kb-section">
+            <div class="kb-section-header">
+              <div class="kb-section-title">知识库切换</div>
             </div>
+            <div class="kb-cards-wrapper">
+              <div class="kb-arrow left" @click="scrollCards(-1)" v-if="filteredKnowledgeBases.length > 0">
+                <i class="el-icon-arrow-left"></i>
+              </div>
+              <div class="kb-cards" ref="kbCards">
+                <div
+                  v-for="(kb, index) in filteredKnowledgeBases"
+                  :key="kb.datasetId"
+                  class="kb-card"
+                  :class="{ active: selectedKb && selectedKb.datasetId === kb.datasetId }"
+                  @click="selectKnowledgeBase(kb)"
+                >
+                  <div class="kb-card-actions-top">
+                    <button class="kb-action-icon" title="编辑" @click.stop="editKnowledgeBase(kb)">
+                      <i class="el-icon-edit"></i>
+                    </button>
+                    <button class="kb-action-icon delete" title="删除" @click.stop="deleteKnowledgeBase(kb)">
+                      <i class="el-icon-delete"></i>
+                    </button>
+                  </div>
+                  <div class="kb-card-top">
+                    <div class="kb-card-icon" :class="getCardColorClass(index)">
+                      <i class="el-icon-document"></i>
+                    </div>
+                    <div class="kb-card-info">
+                      <div class="kb-card-name">{{ kb.name }}</div>
+                      <div class="kb-card-bottom">
+                        <div class="kb-card-meta">
+                          <span>{{`文档&nbsp;&nbsp;${kb.documentCount || 0}` }}</span>
+                          <el-divider direction="vertical" />
+                          <span>{{ formatDate(kb.createdAt) }}</span>
+                          <el-divider direction="vertical" />
+                          <el-switch
+                            v-model="kb.status"
+                            :active-value="1"
+                            :inactive-value="0"
+                            active-color="#13ce66"
+                            inactive-color="#ff4949"
+                            @click.native.stop
+                            @change="handleStatusChange(kb)"
+                          ></el-switch>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="kb-card-desc">{{ kb.description || '-' }}</div>
+                </div>
+                <div v-if="filteredKnowledgeBases.length === 0 && !loading" class="kb-empty">
+                  <i class="el-icon-folder-opened"></i>
+                  <p>暂无知识库</p>
+                </div>
+              </div>
+              <div class="kb-arrow right" @click="scrollCards(1)" v-if="filteredKnowledgeBases.length > 0">
+                <i class="el-icon-arrow-right"></i>
+              </div>
+            </div>
+          </div>
 
-            <div class="table_bottom">
-              <div class="ctrl_btn">
-                <el-button size="mini" type="primary" @click="toggleSelectAll">
-                  {{ isAllSelected ? $t('knowledgeBaseManagement.cancelSelectAll') : $t('knowledgeBaseManagement.selectAll') }}
-                </el-button>
-                <el-button size="mini" type="success" @click="showAddDialog">
-                  {{ $t('knowledgeBaseManagement.add') }}
-                </el-button>
-                <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteSelectedKnowledgeBase" :disabled="selectedKnowledgeBase.length === 0">
-                  {{ $t('knowledgeBaseManagement.delete') }}
-                </el-button>
-              </div>
-              <div class="custom-pagination">
-                <el-select v-model="pageSize" @change="handlePageSizeChange" class="page-size-select">
-                  <el-option v-for="item in pageSizeOptions" :key="item"
-                    :label="`${item}${$t('knowledgeBaseManagement.itemsPerPage')}`" :value="item">
-                  </el-option>
-                </el-select>
-                <button class="pagination-btn" :disabled="currentPage === 1" @click="goFirst">
-                  {{ $t('knowledgeBaseManagement.firstPage') }}
-                </button>
-                <button class="pagination-btn" :disabled="currentPage === 1" @click="goPrev">
-                  {{ $t('knowledgeBaseManagement.prevPage') }}
-                </button>
-                <button v-for="page in visiblePages" :key="page" class="pagination-btn"
-                  :class="{ active: page === currentPage }" @click="goToPage(page)">
-                  {{ page }}
-                </button>
-                <button class="pagination-btn" :disabled="currentPage === pageCount" @click="goNext">
-                  {{ $t('knowledgeBaseManagement.nextPage') }}
-                </button>
-                <span class="total-text">{{ $t('knowledgeBaseManagement.totalRecords', { total }) }}</span>
-              </div>
-            </div>
-          </el-card>
+          <!-- Document Section -->
+          <KnowledgeBaseItem
+            ref="knowledgeBaseItem"
+            v-if="selectedKb"
+            :kb="selectedKb"
+            @upload="showUploadDialog"
+            @retrieval-test="showRetrievalTestDialog"
+            @view-slices="handleViewSlices"
+            @refresh="refreshDocuments"
+          />
+          <div v-else class="doc-empty-placeholder">
+            <el-empty description="请先选择一个知识库"></el-empty>
+          </div>
         </div>
       </div>
     </div>
 
-    <!-- 新增/编辑知识库对话框 -->
-    <knowledge-base-dialog ref="knowledgeBaseDialog" :title="dialogTitle" :visible.sync="dialogVisible" :form="knowledgeBaseForm"
-      @submit="handleSubmit" @cancel="dialogVisible = false" />
+    <!-- Knowledge Base Dialog -->
+    <knowledge-base-dialog
+      ref="knowledgeBaseDialog"
+      :title="dialogTitle"
+      :visible.sync="dialogVisible"
+      :form="knowledgeBaseForm"
+      @submit="handleSubmit"
+      @cancel="dialogVisible = false"
+    />
+
+    <!-- Slice Dialog -->
+    <el-dialog
+      :title="`切片管理 - ${currentDocumentName}`"
+      :visible.sync="sliceDialogVisible"
+      width="900px"
+      :close-on-click-modal="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>切片 {{ (sliceCurrentPage - 1) * slicePageSize + index + 1 }}</strong></p>
+              </div>
+              <div class="slice-card-content">
+                <div class="content-text">{{ slice.content }}</div>
+              </div>
+            </div>
+          </div>
+          <div v-else class="no-slice-data">
+            <el-empty description="暂无切片数据"></el-empty>
+          </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}条/页`" :value="item"></el-option>
+          </el-select>
+          <button class="slice-page-btn" :disabled="sliceCurrentPage === 1" @click="sliceCurrentPage = 1; fetchSlices()">首页</button>
+          <button class="slice-page-btn" :disabled="sliceCurrentPage === 1" @click="sliceCurrentPage--; fetchSlices()">上一页</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()">下一页</button>
+          <span class="slice-total-text">共 {{ sliceTotal }} 条</span>
+        </div>
+      </div>
+    </el-dialog>
+
+    <!-- Upload Dialog -->
+    <el-dialog
+      title="上传文档"
+      :visible.sync="uploadDialogVisible"
+      width="800px"
+      :close-on-click-modal="false"
+      @close="handleUploadDialogClose"
+    >
+      <el-upload
+        ref="uploadRef"
+        action="#"
+        :auto-upload="false"
+        :on-change="handleFileChange"
+        multiple
+        accept=".doc,.docx,.pdf,.txt,.md,.mdx,.csv,.xls,.xlsx,.ppt,.pptx"
+        drag
+      >
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">将文件拖到此处，或点击上传</div>
+        <div class="el-upload__tip" slot="tip">支持的文档类型：PDF、DOC、DOCX、TXT、MD、CSV、XLS、XLSX、PPT、PPTX，单次批量上传文件数不超过 32 个</div>
+      </el-upload>
+      <!-- 已选择文件列表 -->
+      <div class="selected-files-section" v-if="selectedFilesList.length > 0">
+        <h4>已选择文件 ({{ selectedFilesList.length }})</h4>
+        <div class="selected-files-list">
+          <div v-for="(file, index) in selectedFilesList" :key="index" class="selected-file-item">
+            <div class="file-info">
+              <i class="el-icon-document"></i>
+              <span class="file-name">{{ file.name }}</span>
+              <span class="file-size">{{ formatFileSize(file.size) }}</span>
+            </div>
+            <el-button type="text" class="remove-btn" @click="removeSelectedFile(index)">
+              <i class="el-icon-close"></i>
+            </el-button>
+          </div>
+        </div>
+      </div>
+      <span slot="footer">
+        <el-button @click="uploadDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleBatchUploadSubmit" :loading="uploading" :disabled="selectedFilesList.length === 0">
+          确认上传 ({{ selectedFilesList.length }})
+        </el-button>
+      </span>
+    </el-dialog>
+
+    <!-- Retrieval Test Dialog -->
+    <el-dialog
+      title="召回测试"
+      :visible.sync="retrievalTestDialogVisible"
+      width="900px"
+      :close-on-click-modal="false"
+    >
+      <div class="retrieval-test-form">
+        <el-form :model="retrievalTestForm" label-width="100px">
+          <el-form-item label="测试问题" required>
+            <el-input
+              v-model="retrievalTestForm.question"
+              type="textarea"
+              :rows="3"
+              placeholder="请输入测试问题"
+            />
+          </el-form-item>
+        </el-form>
+        <div style="text-align: center; margin-top: 20px;">
+          <el-button type="primary" @click="runRetrievalTest" :loading="retrievalTestLoading">执行测试</el-button>
+          <el-button @click="retrievalTestDialogVisible = false">取消</el-button>
+        </div>
+        <div v-if="retrievalTestResult" class="retrieval-test-result" style="margin-top: 20px;">
+          <h4 style="margin-bottom: 12px;">测试结果</h4>
+          <div class="result-chunks">
+            <div v-for="(chunk, index) in retrievalTestResult.chunks" :key="index" class="result-chunk">
+              <p><strong>切片 {{ index + 1 }}</strong></p>
+              <div style="margin: 8px 0; font-size: 12px; color: #409eff;">相似度: {{ (chunk.similarity || 0).toFixed(4) }}</div>
+              <div class="chunk-content">{{ chunk.content }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
 
     <el-footer>
       <version-footer />
@@ -123,703 +243,1002 @@ import Api from "@/apis/api";
 import HeaderBar from "@/components/HeaderBar.vue";
 import VersionFooter from "@/components/VersionFooter.vue";
 import KnowledgeBaseDialog from "@/components/KnowledgeBaseDialog.vue";
+import KnowledgeBaseItem from "./KnowledgeBaseItem.vue";
 
 export default {
-  components: { HeaderBar, VersionFooter, KnowledgeBaseDialog },
+  components: { HeaderBar, VersionFooter, KnowledgeBaseDialog, KnowledgeBaseItem },
   data() {
     return {
-      searchName: "",
-      knowledgeBaseList: [],
-      currentPage: 1,
+      knowledgeBases: [],
+      selectedKb: null,
+      searchKbName: '',
       loading: false,
-      pageSize: 10,
-      pageSizeOptions: [10, 20, 50, 100],
-      total: 0,
       dialogVisible: false,
-      dialogTitle: "",
-      selectedKnowledgeBase: [],
-      isAllSelected: false,
+      dialogTitle: '',
       knowledgeBaseForm: {
         id: null,
         datasetId: null,
-        name: "",
-        description: "",
+        name: '',
+        description: '',
         status: 1
-      }
+      },
+      uploadDialogVisible: false,
+      sliceDialogVisible: false,
+      retrievalTestDialogVisible: false,
+      retrievalTestForm: {
+        question: ''
+      },
+      retrievalTestResult: null,
+      retrievalTestLoading: false,
+      selectedFilesList: [],
+      uploading: false,
+      currentDocumentId: '',
+      currentDocumentName: '',
+      sliceList: [],
+      sliceLoading: false,
+      sliceCurrentPage: 1,
+      slicePageSize: 10,
+      sliceTotal: 0,
     };
   },
-  created() {
-    this.fetchKnowledgeBaseList();
-  },
   computed: {
-    pageCount() {
-      return Math.ceil(this.total / this.pageSize);
+    filteredKnowledgeBases() {
+      if (!this.searchKbName) return this.knowledgeBases;
+      const keyword = this.searchKbName.toLowerCase();
+      return this.knowledgeBases.filter(kb =>
+        kb.name.toLowerCase().includes(keyword)
+      );
     },
-    visiblePages() {
+    slicePageCount() {
+      return Math.ceil(this.sliceTotal / this.slicePageSize);
+    },
+    sliceVisiblePages() {
       const pages = [];
       const maxVisible = 3;
-      let start = Math.max(1, this.currentPage - 1);
-      let end = Math.min(this.pageCount, start + maxVisible - 1);
-
+      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();
+  },
   methods: {
-    handlePageSizeChange: function(val) {
-      this.pageSize = val;
-      this.currentPage = 1;
-      this.fetchKnowledgeBaseList();
-    },
-    fetchKnowledgeBaseList: function() {
+    fetchKnowledgeBases() {
       this.loading = true;
       Api.knowledgeBase.getKnowledgeBaseList(
-        {
-          page: this.currentPage,
-          page_size: this.pageSize,
-          name: this.searchName,
-        },
+        { page: 1, page_size: 100, name: this.searchKbName },
         (res) => {
           this.loading = false;
-          console.log('getKnowledgeBaseList response:', res); // 添加调试日志
-          
-          // 修复：从 res.data 获取分页数据，而不是 res.data.data
-          // 因为 knowledgeBase.js 直接传递了整个响应对象
           if (res.data && res.data.code === 0) {
             const pageData = res.data.data || {};
-            this.knowledgeBaseList = pageData.list || [];
-            this.total = pageData.total || 0;
-            console.log('Updated knowledgeBaseList:', this.knowledgeBaseList); // 添加调试日志
+            this.knowledgeBases = pageData.list || [];
+            if (this.knowledgeBases.length > 0 && !this.selectedKb) {
+              this.selectKnowledgeBase(this.knowledgeBases[0]);
+            } else if (this.selectedKb) {
+              const updated = this.knowledgeBases.find(kb => kb.datasetId === this.selectedKb.datasetId);
+              if (updated) this.selectedKb = updated;
+            }
           } else {
-            this.$message.error({
-              message: res.data?.msg || this.$t('knowledgeBaseManagement.getKnowledgeBaseListFailed'),
-              showClose: true
-            });
+            this.$message.error(res.data?.msg || '获取知识库列表失败');
           }
         },
         () => {
           this.loading = false;
-          this.$message.error(this.$t('knowledgeBaseManagement.getKnowledgeBaseListFailed'));
+          this.$message.error('获取知识库列表失败');
         }
       );
     },
-    handleSearch: function() {
-      this.currentPage = 1;
-      this.fetchKnowledgeBaseList();
+
+    selectKnowledgeBase(kb) {
+      this.selectedKb = kb;
     },
-    handleSelectionChange: function(val) {
-      this.selectedKnowledgeBase = val;
+
+    refreshDocuments() {
+      this.$refs.knowledgeBaseItem?.fetchDocuments();
     },
-    toggleSelectAll: function() {
-      if (this.isAllSelected) {
-        // 取消全选
-        this.$refs.paramsTable.clearSelection();
-        this.isAllSelected = false;
-      } else {
-        // 全选
-        this.knowledgeBaseList.forEach(row => {
-          this.$refs.paramsTable.toggleRowSelection(row, true);
-        });
-        this.isAllSelected = true;
+
+    handleSearchKb() {
+      this.fetchKnowledgeBases();
+    },
+
+    scrollCards(direction) {
+      const container = this.$refs.kbCards;
+      if (container) {
+        container.scrollBy({ left: direction * 364, behavior: 'smooth' });
       }
     },
-    headerCellClassName: function({ row, column, rowIndex, columnIndex }) {
-      if (columnIndex === 0) {
-        return 'header-cell-first';
-      }
-      return 'header-cell';
-    },
-    showAddDialog: function() {
-      console.log('showAddDialog called');
-      this.dialogTitle = this.$t('knowledgeBaseManagement.addKnowledgeBase');
+
+    showAddDialog() {
+      this.dialogTitle = '新增知识库';
       this.knowledgeBaseForm = {
         id: null,
         datasetId: null,
-        name: "",
-        description: "",
+        name: '',
+        description: '',
         status: 1
       };
       this.dialogVisible = true;
-      console.log('dialogVisible set to:', this.dialogVisible);
     },
-    showViewDialog: function(row) {
-      // 跳转到上传文件页面，传递知识库ID和名称
-      this.$router.push({
-        path: '/knowledge-file-upload',
-        query: {
-          datasetId: row.datasetId,
-          knowledgeBaseName: row.name
-        }
-      });
-    },
-    showEditDialog: function(row) {
-      this.dialogTitle = this.$t('knowledgeBaseManagement.editKnowledgeBase');
+
+    editKnowledgeBase(kb) {
+      this.dialogTitle = '编辑知识库';
       this.knowledgeBaseForm = {
-        id: row.id,
-        datasetId: row.datasetId,
-        name: row.name,
-        description: row.description || "",
-        status: row.status,
-        ragModelId: row.ragModelId || null
+        id: kb.id,
+        datasetId: kb.datasetId,
+        name: kb.name,
+        description: kb.description || '',
+        status: kb.status,
+        ragModelId: kb.ragModelId
       };
       this.dialogVisible = true;
     },
-    handleSubmit: function(form) {
-      console.log('handleSubmit called with form:', form);
-      if (form.id) {
-        console.log('Editing knowledge base:', form.datasetId);
-        Api.knowledgeBase.updateKnowledgeBase(form.datasetId, form, (res) => {
-          console.log('Update response:', res);
+
+    handleStatusChange(kb) {
+      const updateForm = {
+        id: kb.id,
+        datasetId: kb.datasetId,
+        name: kb.name,
+        description: kb.description,
+        status: kb.status
+      };
+      Api.knowledgeBase.updateKnowledgeBase(kb.datasetId, updateForm, (res) => {
+        if (res.data && res.data.code !== 0) {
+          this.fetchKnowledgeBases();
+          this.$message.error(res.data?.msg || '更新失败');
+        } else {
+          this.$message.success(kb.status === 1 ? '已启用' : '已停用');
+          if (this.selectedKb && this.selectedKb.datasetId === kb.datasetId) {
+            this.selectedKb = { ...kb };
+          }
+        }
+      }, () => {
+        this.fetchKnowledgeBases();
+        this.$message.error('更新失败');
+      });
+    },
+
+    deleteKnowledgeBase(kb) {
+      this.$confirm(
+        `确定要删除知识库「${kb.name}」吗？删除后不可恢复。`,
+        '警告',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        Api.knowledgeBase.deleteKnowledgeBase(kb.datasetId, (res) => {
           if (res.data && res.data.code === 0) {
-            this.dialogVisible = false;
-            this.fetchKnowledgeBaseList();
-            this.$message.success(this.$t('knowledgeBaseManagement.updateSuccess'));
+            this.$message.success('删除成功');
+            if (this.selectedKb && this.selectedKb.datasetId === kb.datasetId) {
+              this.selectedKb = null;
+            }
+            this.fetchKnowledgeBases();
           } else {
-            this.$message.error(res.data?.msg || this.$t('knowledgeBaseManagement.updateFailed'));
+            this.$message.error(res.data?.msg || '删除失败');
           }
         }, (err) => {
-          console.log('Error callback received:', err);
-          // 错误回调处理后端返回的错误信息
-          if (err && err.data) {
-            console.log('后端返回错误消息:', err.data.msg || err.msg);
-            this.$message.error(err.data.msg || err.msg || this.$t('knowledgeBaseManagement.updateFailed'));
+          this.$message.error(err?.data?.msg || '删除失败');
+        });
+      }).catch(() => {});
+    },
+
+    showUploadDialog() {
+      if (!this.selectedKb) {
+        this.$message.warning('请先选择知识库');
+        return;
+      }
+      this.uploadDialogVisible = true;
+    },
+
+    handleSubmit(form) {
+      if (form.id) {
+        Api.knowledgeBase.updateKnowledgeBase(form.datasetId, form, (res) => {
+          if (res.data && res.data.code === 0) {
+            this.dialogVisible = false;
+            this.fetchKnowledgeBases();
+            this.$message.success('修改成功');
           } else {
-            this.$message.error(this.$t('knowledgeBaseManagement.updateFailed'));
+            this.$message.error(res.data?.msg || '更新失败');
           }
+        }, (err) => {
+          this.$message.error(err?.data?.msg || '更新失败');
         });
       } else {
-        // 新增 - 只传递必要的字段，不传递id
         const createData = {
           name: form.name,
           description: form.description,
           status: form.status,
           ragModelId: form.ragModelId
         };
-        console.log('Creating knowledge base with data:', createData);
         Api.knowledgeBase.createKnowledgeBase(createData, (res) => {
-          console.log('Create response:', res);
           if (res.data && res.data.code === 0) {
             this.dialogVisible = false;
-            this.fetchKnowledgeBaseList();
-            this.$message.success(this.$t('knowledgeBaseManagement.addSuccess'));
+            this.fetchKnowledgeBases();
+            this.$message.success('新增成功');
           } else {
-            this.$message.error(res.data?.msg || this.$t('knowledgeBaseManagement.addFailed'));
+            this.$message.error(res.data?.msg || '新增失败');
           }
         }, (err) => {
-          console.log('Error callback received:', err);
-          // 错误回调处理后端返回的错误信息
-          if (err && err.data) {
-            console.log('后端返回错误消息:', err.data.msg || err.msg);
-            this.$message.error(err.data.msg || err.msg || this.$t('knowledgeBaseManagement.addFailed'));
-          } else {
-            this.$message.error(this.$t('knowledgeBaseManagement.addFailed'));
-          }
+          this.$message.error(err?.data?.msg || '新增失败');
         });
       }
     },
-    deleteSelectedKnowledgeBase: function() {
-      if (this.selectedKnowledgeBase.length === 0) {
-        this.$message.warning(this.$t('knowledgeBaseManagement.selectKnowledgeBaseFirst'));
+
+    handleUploadDialogClose() {
+      if (this.$refs.uploadRef) {
+        this.$refs.uploadRef.clearFiles();
+      }
+      this.selectedFilesList = [];
+    },
+
+    handleFileChange(file, fileList) {
+      if (!file || !file.raw) return;
+      const isLt10M = file.size / 1024 / 1024 < 10;
+      if (!isLt10M) {
+        this.$message.error('文件大小不能超过10MB!');
+        return;
+      }
+      this.selectedFilesList.push({
+        name: file.name,
+        size: file.size,
+        raw: file.raw
+      });
+    },
+
+    removeSelectedFile(index) {
+      this.selectedFilesList.splice(index, 1);
+    },
+
+    formatFileSize(bytes) {
+      if (bytes === 0) return '0 B';
+      const k = 1024;
+      const sizes = ['B', 'KB', 'MB', 'GB'];
+      const i = Math.floor(Math.log(bytes) / Math.log(k));
+      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    },
+
+    handleBatchUploadSubmit() {
+      if (this.selectedFilesList.length === 0) {
+        this.$message.error('请选择要上传的文件');
         return;
       }
 
-      this.$confirm(
-        this.$t('knowledgeBaseManagement.confirmBatchDelete', { count: this.selectedKnowledgeBase.length }),
-        this.$t('common.warning'),
-        {
-          confirmButtonText: this.$t('common.confirm'),
-          cancelButtonText: this.$t('common.cancel'),
-          type: 'warning'
-        }).then(() => {
-        const ids = this.selectedKnowledgeBase.map(item => item.datasetId).join(',');
-        Api.knowledgeBase.deleteKnowledgeBases(ids, (res) => {
-          if (res.data && res.data.code === 0) {
-            this.fetchKnowledgeBaseList();
-            this.$message.success(this.$t('knowledgeBaseManagement.batchDeleteSuccess', { count: this.selectedKnowledgeBase.length }));
-          } else {
-            this.$message.error(res.data?.msg || this.$t('knowledgeBaseManagement.deleteFailed'));
-          }
-        }, (err) => {
-          console.log('Error callback received:', err);
-          // 错误回调处理后端返回的错误信息
-          if (err && err.data) {
-            console.log('后端返回错误消息:', err.data.msg || err.msg);
-            this.$message.error(err.data.msg || err.msg || this.$t('knowledgeBaseManagement.deleteFailed'));
-          } else {
-            this.$message.error(this.$t('knowledgeBaseManagement.deleteFailed'));
-          }
-        });
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: this.$t('knowledgeBaseManagement.operationCancelled'),
-          duration: 1000
+      this.uploading = true;
+
+      const uploadPromises = this.selectedFilesList.map(file => {
+        return new Promise((resolve, reject) => {
+          const formData = new FormData();
+          formData.append('file', file.raw);
+
+          Api.knowledgeBase.uploadDocument(this.selectedKb.datasetId, formData,
+            ({ data }) => {
+              if (data && data.code === 0) {
+                resolve({ success: true, fileName: file.name });
+              } else {
+                reject({ success: false, fileName: file.name, error: data?.msg || '上传失败' });
+              }
+            },
+            (err) => {
+              if (err && err.data) {
+                reject({ success: false, fileName: file.name, error: err.data.msg || err.msg || '上传失败' });
+              } else {
+                reject({ success: false, fileName: file.name, error: '上传失败' });
+              }
+              console.error('上传文档失败:', err);
+            }
+          );
         });
       });
-    },
-    deleteSingleKnowledgeBase: function(row) {
-      this.$confirm(
-        this.$t('knowledgeBaseManagement.confirmBatchDelete', { count: 1 }),
-        this.$t('common.warning'),
-        {
-          confirmButtonText: this.$t('common.confirm'),
-          cancelButtonText: this.$t('common.cancel'),
-          type: 'warning'
-        }).then(() => {
-        Api.knowledgeBase.deleteKnowledgeBase(row.datasetId, (res) => {
-          if (res.data && res.data.code === 0) {
-            this.fetchKnowledgeBaseList();
-            this.$message.success(this.$t('knowledgeBaseManagement.batchDeleteSuccess', { count: 1 }));
-          } else {
-            this.$message.error(res.data?.msg || this.$t('knowledgeBaseManagement.deleteFailed'));
+
+      Promise.all(uploadPromises.map(p => p.catch(e => e)))
+        .then(results => {
+          this.uploading = false;
+
+          const successCount = results.filter(r => r.success).length;
+          const failedCount = results.filter(r => !r.success).length;
+
+          if (successCount > 0) {
+            this.$message.success(`成功上传 ${successCount} 个文件`);
           }
-        }, (err) => {
-          console.log('Error callback received:', err);
-          // 错误回调处理后端返回的错误信息
-          if (err && err.data) {
-            console.log('后端返回错误消息:', err.data.msg || err.msg);
-            this.$message.error(err.data.msg || err.msg || this.$t('knowledgeBaseManagement.deleteFailed'));
-          } else {
-            this.$message.error(this.$t('knowledgeBaseManagement.deleteFailed'));
+
+          if (failedCount > 0) {
+            const failedFiles = results.filter(r => !r.success).map(r => r.fileName);
+            this.$message.error(`上传失败 ${failedCount} 个文件: ${failedFiles.join(', ')}`);
           }
+
+          if (successCount > 0) {
+            this.uploadDialogVisible = false;
+            this.refreshDocuments();
+          }
+        })
+        .catch(error => {
+          this.uploading = false;
+          this.$message.error('批量上传失败');
+          console.error('批量上传失败:', error);
         });
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: this.$t('knowledgeBaseManagement.operationCancelled'),
-          duration: 1000
-        });
-      });
     },
-    handleStatusChange: function(row) {
-      // 只传递需要更新的字段，确保包含id字段
-      const updateForm = {
-        id: row.id, // 添加id字段，后端需要此字段来定位记录
-        datasetId: row.datasetId,
-        name: row.name,
-        description: row.description,
-        status: row.status
-      };
-      console.log('Updating knowledge base status:', updateForm); // 添加调试日志
-      Api.knowledgeBase.updateKnowledgeBase(row.datasetId, updateForm, (res) => {
-        console.log('Status update response:', res); // 添加调试日志
-        if (res.data && res.data.code !== 0) {
-          // 恢复原来的状态
-          this.fetchKnowledgeBaseList();
-          this.$message.error(res.data?.msg || this.$t('knowledgeBaseManagement.updateFailed'));
-        } else {
-          // 更新成功，显示成功消息
-          this.$message.success(this.$t('knowledgeBaseManagement.updateSuccess'));
+
+    showRetrievalTestDialog() {
+      if (!this.selectedKb) {
+        this.$message.warning('请先选择知识库');
+        return;
+      }
+      this.retrievalTestForm.question = '';
+      this.retrievalTestResult = null;
+      this.retrievalTestDialogVisible = true;
+    },
+
+    runRetrievalTest() {
+      if (!this.retrievalTestForm.question.trim()) {
+        this.$message.error('请输入测试问题');
+        return;
+      }
+      this.retrievalTestLoading = true;
+      Api.knowledgeBase.retrievalTest(
+        this.selectedKb.datasetId,
+        { question: this.retrievalTestForm.question.trim() },
+        ({ data }) => {
+          this.retrievalTestLoading = false;
+          if (data && data.code === 0) {
+            this.retrievalTestResult = data.data || data;
+          } else {
+            this.$message.error(data?.msg || '召回测试失败');
+          }
+        },
+        (err) => {
+          this.retrievalTestLoading = false;
+          this.$message.error(err?.data?.msg || '召回测试失败');
         }
-      }, () => {
-        // 恢复原来的状态
-        this.fetchKnowledgeBaseList();
-        this.$message.error(this.$t('knowledgeBaseManagement.updateFailed'));
-      });
+      );
     },
-    goToPage: function(page) {
-      if (page !== this.currentPage) {
-        this.currentPage = page;
-        this.fetchKnowledgeBaseList();
-      }
+
+    handleViewSlices(doc) {
+      this.currentDocumentId = doc.id;
+      this.currentDocumentName = doc.name;
+      this.sliceDialogVisible = true;
+      this.sliceCurrentPage = 1;
+      this.fetchSlices();
     },
-    goFirst: function() {
-      if (this.currentPage !== 1) {
-        this.currentPage = 1;
-        this.fetchKnowledgeBaseList();
-      }
+
+    fetchSlices() {
+      if (!this.selectedKb || !this.currentDocumentId) return;
+      this.sliceLoading = true;
+      const params = {
+        page: this.sliceCurrentPage,
+        page_size: this.slicePageSize
+      };
+      Api.knowledgeBase.listChunks(
+        this.selectedKb.datasetId,
+        this.currentDocumentId,
+        params,
+        ({ data }) => {
+          this.sliceLoading = false;
+          if (data && data.code === 0) {
+            const responseData = data.data;
+            if (responseData && responseData.list) {
+              this.sliceList = responseData.list;
+              this.sliceTotal = responseData.total || responseData.list.length;
+            } else if (responseData && responseData.chunks && Array.isArray(responseData.chunks)) {
+              this.sliceList = responseData.chunks;
+              this.sliceTotal = responseData.total || responseData.chunks.length;
+            } else if (Array.isArray(responseData)) {
+              this.sliceList = responseData;
+              this.sliceTotal = responseData.length;
+            } else {
+              this.sliceList = [];
+              this.sliceTotal = 0;
+            }
+          } else {
+            this.$message.error(data?.msg || '获取切片列表失败');
+            this.sliceList = [];
+            this.sliceTotal = 0;
+          }
+        },
+        (err) => {
+          this.sliceLoading = false;
+          if (err && err.data) {
+            this.$message.error(err.data.msg || err.msg || '获取切片列表失败');
+          } else {
+            this.$message.error('获取切片列表失败');
+          }
+          this.sliceList = [];
+          this.sliceTotal = 0;
+        }
+      );
     },
-    goPrev: function() {
-      if (this.currentPage > 1) {
-        this.currentPage--;
-        this.fetchKnowledgeBaseList();
-      }
+
+    handleSliceSizeChange(val) {
+      this.slicePageSize = val;
+      this.sliceCurrentPage = 1;
+      this.fetchSlices();
     },
-    goNext: function() {
-      if (this.currentPage < this.pageCount) {
-        this.currentPage++;
-        this.fetchKnowledgeBaseList();
-      }
+
+    getCardColorClass(index) {
+      const colors = ['blue', 'purple', 'green', 'orange'];
+      return colors[index % colors.length];
     },
-    formatDate: function(dateString) {
+
+    getStatusClass(kb) {
+      return kb.status === 1 ? 'active' : 'inactive';
+    },
+
+    getStatusText(kb) {
+      return kb.status === 1 ? '已启用' : '未启用';
+    },
+
+    formatDate(dateString) {
       if (!dateString) return '';
       const date = new Date(dateString);
-      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
-    }
+      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+    },
+
+    formatFileSize(bytes) {
+      if (!bytes) return '0 B';
+      const units = ['B', 'KB', 'MB', 'GB'];
+      let i = 0;
+      let size = bytes;
+      while (size >= 1024 && i < units.length - 1) {
+        size /= 1024;
+        i++;
+      }
+      return size.toFixed(1) + ' ' + units[i];
+    },
   }
 };
 </script>
 
 <style lang="scss" scoped>
 .welcome {
-    min-width: 900px;
-    min-height: 506px;
-    height: 100vh;
-    display: flex;
-    position: relative;
-    flex-direction: column;
-    background-size: cover;
-    background: linear-gradient(to bottom right, #dce8ff, #e4eeff, #e6cbfd) center;
-    -webkit-background-size: cover;
-    -o-background-size: cover;
-    overflow: hidden;
+  min-width: 900px;
+  min-height: 506px;
+  height: 100vh;
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  background: linear-gradient(to bottom right, #dce8ff, #e4eeff, #e6cbfd) center;
+  background-size: cover;
+  -webkit-background-size: cover;
+  -o-background-size: cover;
+  overflow: hidden;
 }
 
 .main-wrapper {
-    // 顶部 63px 底部 35px 查询72px
-    height: calc(100vh - 63px - 35px - 72px);
-    margin: 0 22px;
-    border-radius: 15px;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-    position: relative;
-    background: rgba(237, 242, 255, 0.5);
-    display: flex;
-    flex-direction: column;
+  height: calc(100vh - 63px - 35px - 72px);
+  margin: 0 22px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
 }
 
 .operation-bar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 16px 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
 }
 
 .page-title {
-    font-size: 24px;
-    margin: 0;
+  font-size: 24px;
+  margin: 0;
 }
 
 .right-operations {
-    display: flex;
-    gap: 10px;
-    margin-left: auto;
+  display: flex;
+  gap: 10px;
+  margin-left: auto;
+  align-items: center;
 }
 
 .search-input {
-    width: 240px;
+  width: 240px;
 }
 
-.btn-search {
-    background: linear-gradient(135deg, #6b8cff, #a966ff);
-    border: none;
-    color: white;
+.btn-upload {
+  height: 40px;
+  padding: 0 20px;
+  border: 1px solid #2f5bff !important;
+  border-radius: 8px;
+  background: #fff;
+  color: #2f5bff;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.2s;
+
+  &:hover {
+    background: #f2f6ff;
+  }
+}
+
+.btn-new-kb {
+  height: 40px;
+  padding: 0 20px;
+  border: none !important;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #6a5cff, #2f5bff) !important;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 500;
+  transition: opacity 0.2s;
+
+  &:hover {
+    opacity: 0.9;
+  }
 }
 
 .content-panel {
-    flex: 1;
-    display: flex;
-    overflow: hidden;
-    height: 100%;
-    border-radius: 15px;
-    background: transparent;
-    border: 1px solid #fff;
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+  height: 100%;
+  border-radius: 15px;
 }
 
 .content-area {
-    flex: 1;
-    height: 100%;
-    min-width: 600px;
-    overflow: auto;
-    background-color: white;
-    display: flex;
-    flex-direction: column;
+  flex: 1;
+  height: 100%;
+  min-width: 600px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
 }
 
-.params-card {
-    background: white;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    border: none;
-    box-shadow: none;
-    overflow: hidden;
-
-    ::v-deep .el-card__body {
-        padding: 15px;
-        display: flex;
-        flex-direction: column;
-        flex: 1;
-        overflow: hidden;
-    }
+/* ========== Knowledge Base Cards Section ========== */
+.kb-section {
+  background: #fff;
+  border-radius: 16px;
+  padding: 14px 20px;
+  box-shadow: 0 4px 16px rgba(31, 42, 68, 0.06);
+  border: 1px solid #f0f3f9;
 }
 
-.table_bottom {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: auto; 
-    width: 100%;
+.kb-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
 }
 
-.ctrl_btn {
-    display: flex;
-    gap: 8px;
-    padding-left: 26px;
-
-    .el-button {
-        min-width: 72px;
-        height: 32px;
-        padding: 7px 12px 7px 10px;
-        font-size: 12px;
-        border-radius: 4px;
-        line-height: 1;
-        font-weight: 500;
-        border: none;
-        transition: all 0.3s ease;
-        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-
-        &:hover {
-            transform: translateY(-1px);
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-        }
-    }
-
-    .el-button--primary {
-        background: #5f70f3;
-        color: white;
-    }
-
-    .el-button--danger {
-        background: #fd5b63;
-        color: white;
-    }
+.kb-section-title {
+  font-size: 20px;
+  font-weight: 700;
+  color: #1f2a44;
 }
 
-.custom-pagination {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-
-    .el-select {
-        margin-right: 8px;
-    }
-
-    .pagination-btn:first-child,
-    .pagination-btn:nth-child(2),
-    .pagination-btn:nth-last-child(2),
-    .pagination-btn:nth-child(3) {
-        min-width: 60px;
-        height: 32px;
-        padding: 0 12px;
-        border-radius: 4px;
-        border: 1px solid #e4e7ed;
-        background: #dee7ff;
-        color: #606266;
-        font-size: 14px;
-        cursor: pointer;
-        transition: all 0.3s ease;
-
-        &:hover {
-            background: #d7dce6;
-        }
-
-        &:disabled {
-            opacity: 0.6;
-            cursor: not-allowed;
-        }
-    }
-
-    .pagination-btn:not(:first-child):not(:nth-child(3)):not(:nth-child(2)):not(:nth-last-child(2)) {
-        min-width: 28px;
-        height: 32px;
-        padding: 0;
-        border-radius: 4px;
-        border: 1px solid transparent;
-        background: transparent;
-        color: #606266;
-        font-size: 14px;
-        cursor: pointer;
-        transition: all 0.3s ease;
-
-        &:hover {
-            background: rgba(245, 247, 250, 0.3);
-        }
-    }
-
-    .pagination-btn.active {
-        background: #5f70f3 !important;
-        color: #ffffff !important;
-        border-color: #5f70f3 !important;
-
-        &:hover {
-            background: #6d7cf5 !important;
-        }
-    }
+.kb-cards-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
 
-.total-text {
-    margin-left: 10px;
-    color: #606266;
+.kb-cards {
+  flex: 1;
+  display: flex;
+  gap: 24px;
+  overflow-x: auto;
+  padding: 10px;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.kb-arrow {
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  background: #fff;
+  border: 1px solid #e7ecf5;
+  box-shadow: 0 4px 16px rgba(31, 42, 68, 0.06);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  color: #2f5bff;
+  font-size: 18px;
+
+  &:hover {
+    border-color: #2f5bff;
+    box-shadow: 0 4px 20px rgba(47, 91, 255, 0.15);
+  }
+}
+
+.kb-card {
+  width: 340px;
+  border-radius: 8px;
+  padding: 20px;
+  border: 1px solid transparent;
+  background: #fff;
+  cursor: pointer;
+  transition: all 0.25s;
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 340px;
+  position: relative;
+  box-shadow: 0 0 10px rgba(47, 91, 255, 0.15);
+
+  &:hover {
+    box-shadow: 0 0 10px rgba(47, 91, 255, 0.15);
+    border: 1px solid #6b80eb;
+  }
+
+  &.active {
+    border: 1px solid #6b80eb;
+  }
+}
+
+.kb-card-top {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  margin-bottom: 12px;
+}
+
+.kb-card-actions-top {
+  position: absolute;
+  top: 10px;
+  right: 4px;
+  display: flex;
+  z-index: 2;
+}
+
+.kb-action-icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  border: none;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: #6b7280;
+  font-size: 13px;
+  transition: all 0.2s;
+  padding: 0;
+
+  &:hover {
+    color: #2f5bff;
+  }
+
+  &.delete:hover {
+    color: #ff5a5f;
+  }
+}
+
+.kb-card-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  flex-shrink: 0;
+
+  &.blue {
+    background: linear-gradient(135deg, #e8ecff, #d4daff);
+    color: #2f5bff;
+  }
+  &.purple {
+    background: linear-gradient(135deg, #ede8ff, #dcd4ff);
+    color: #6a5cff;
+  }
+  &.green {
+    background: linear-gradient(135deg, #e2f9ed, #c8f0d8);
+    color: #34c759;
+  }
+  &.orange {
+    background: linear-gradient(135deg, #fff3e0, #ffe4b8);
+    color: #ff9500;
+  }
+}
+
+.kb-card-info {
+  height: 100%;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.kb-card-name {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1f2a44;
+  margin-bottom: 6px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: left;
+}
+
+.kb-card-desc {
+  margin-top: 10px;
+  font-size: 14px;
+  text-align: left;
+  color: #7888a8;
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.kb-card-bottom {
+  margin-top: auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.kb-card-meta {
+  font-size: 12px;
+  color: #a0aec0;
+}
+
+.kb-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 120px;
+  width: 100%;
+  color: #b0bbc9;
+  font-size: 14px;
+
+  i {
+    font-size: 36px;
+    margin-bottom: 8px;
+  }
+}
+
+/* ========== Slice Dialog ========== */
+.slice-management {
+  display: flex;
+  flex-direction: column;
+  max-height: 65vh;
+}
+
+.slice-content-container {
+  flex: 1;
+  overflow: hidden;
+}
+
+.slice-cards-container {
+  max-height: 50vh;
+  overflow-y: auto;
+  padding-right: 4px;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: #e0e0e0;
+    border-radius: 3px;
+  }
+}
+
+.slice-card {
+  background: #f8f9fa;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 14px;
+  margin-bottom: 12px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.slice-header-info {
+  margin-bottom: 10px;
+  p {
+    margin: 0;
     font-size: 14px;
+    strong {
+      color: #374151;
+    }
+  }
 }
 
-.page-size-select {
-    width: 100px;
-    margin-right: 10px;
+.slice-card-content {
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 4px;
+  padding: 12px;
+  max-height: 200px;
+  overflow-y: auto;
 
-    :deep(.el-input__inner) {
-        height: 32px;
-        line-height: 32px;
-        border-radius: 4px;
-        border: 1px solid #e4e7ed;
-        background: #dee7ff;
-        color: #606266;
-        font-size: 14px;
-    }
-
-    :deep(.el-input__suffix) {
-        right: 6px;
-        width: 15px;
-        height: 20px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        top: 6px;
-        border-radius: 4px;
-    }
-
-    :deep(.el-input__suffix-inner) {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-    }
-
-    :deep(.el-icon-arrow-up:before) {
-        content: "";
-        display: inline-block;
-        border-left: 6px solid transparent;
-        border-right: 6px solid transparent;
-        border-top: 9px solid #606266;
-        position: relative;
-        transform: rotate(0deg);
-        transition: transform 0.3s;
-    }
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: #e0e0e0;
+    border-radius: 2px;
+  }
 }
 
-:deep(.transparent-table) {
-    background: white;
-    flex: 1;
-    width: 100%;
+.content-text {
+  font-size: 14px;
+  line-height: 1.6;
+  color: #333;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.no-slice-data {
+  min-height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.slice-pagination {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 16px;
+  padding-top: 12px;
+  border-top: 1px solid #e5e7eb;
+}
+
+.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 {
+  margin-top: 16px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 16px;
+  background-color: #f8f9fa;
+
+  h4 {
+    margin: 0 0 12px 0;
+    font-size: 14px;
+    font-weight: 600;
+    color: #606266;
+  }
+}
+
+.selected-files-list {
+  max-height: 180px;
+  overflow-y: auto;
+}
+
+.selected-file-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  background-color: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 4px;
+  margin-bottom: 8px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  .file-info {
     display: flex;
-    flex-direction: column;
-
-    .el-table__body-wrapper {
-        flex: 1;
-        overflow-y: auto;
-        max-height: none !important;
-    }
-
-    .el-table__header-wrapper {
-        flex-shrink: 0;
-    }
-
-    .el-table__header th {
-        background: white !important;
-        color: black;
-        font-weight: 600;
-        height: 40px;
-        padding: 8px 0;
-        font-size: 14px;
-        border-bottom: 1px solid #e4e7ed;
-    }
-
-    .el-table__body tr {
-        background-color: white;
-
-        td {
-            border-top: 1px solid rgba(0, 0, 0, 0.04);
-            border-bottom: 1px solid rgba(0, 0, 0, 0.04);
-            padding: 8px 0;
-            height: 40px;
-            color: #606266;
-            font-size: 14px;
-        }
-    }
-
-    .el-table__row:hover>td {
-        background-color: #f5f7fa !important;
-    }
-
-    &::before {
-        display: none;
-    }
-}
-
-:deep(.el-table .el-button--text) {
-    color: #7079aa !important;
-}
-
-:deep(.el-table .el-button--text:hover) {
-    color: #5a64b5 !important;
-}
-
-:deep(.el-checkbox__inner) {
-    background-color: #ffffff !important;
-    border-color: #cccccc !important;
-}
-
-:deep(.el-checkbox__inner:hover) {
-    border-color: #cccccc !important;
-}
-
-:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
-    background-color: #5f70f3 !important;
-    border-color: #5f70f3 !important;
-}
-
-:deep(.el-loading-mask) {
-    background-color: rgba(255, 255, 255, 0.6) !important;
-    backdrop-filter: blur(2px);
-}
-
-:deep(.el-loading-spinner .path) {
-    stroke: #6b8cff;
-}
-
-:deep(.el-table__empty-block) {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
     align-items: center;
-    min-height: 300px;
-}
-
-.el-table {
-    --table-max-height: calc(100vh - 40vh);
-    max-height: var(--table-max-height);
     flex: 1;
 
-    .el-table__body-wrapper {
-        max-height: calc(var(--table-max-height) - 40px);
+    .el-icon-document {
+      color: #409eff;
+      margin-right: 8px;
+      font-size: 16px;
     }
+
+    .file-name {
+      font-size: 14px;
+      color: #303133;
+      margin-right: 12px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 300px;
+    }
+
+    .file-size {
+      font-size: 12px;
+      color: #909399;
+    }
+  }
+
+  .remove-btn {
+    color: #f56c6c;
+    padding: 4px;
+
+    &:hover {
+      color: #f78989;
+      background-color: #fef0f0;
+      border-radius: 4px;
+    }
+  }
 }
 
-@media (min-width: 1144px) {
-    .table_bottom {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-top: auto;
+/* ========== Retrieval Test Dialog ========== */
+.retrieval-test-form {
+  .result-chunks {
+    max-height: 400px;
+    overflow-y: auto;
+  }
+
+  .result-chunk {
+    background: #f8f9fa;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    padding: 14px;
+    margin-bottom: 12px;
+
+    p {
+      margin: 0 0 8px 0;
+      font-size: 14px;
     }
 
-    :deep(.transparent-table) {
-        .el-table__body tr {
-            td {
-                padding-top: 16px;
-                padding-bottom: 16px;
-            }
-
-            &+tr {
-                margin-top: 10px;
-            }
-        }
+    .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;
     }
+  }
 }
 </style>

From 0173c7abe1c599a6b8494b30b353a537daa587ff Mon Sep 17 00:00:00 2001
From: zhuoqinglian <1035449612@qq.com>
Date: Fri, 5 Jun 2026 17:37:21 +0800
Subject: [PATCH 2/5] =?UTF-8?q?update:=20=E7=9F=A5=E8=AF=86=E5=BA=93?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96=E3=80=81=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=A4=9A=E8=AF=AD=E8=A8=80=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/knowledge-base/MD.png          | Bin 0 -> 659 bytes
 .../src/assets/knowledge-base/default.png     | Bin 0 -> 721 bytes
 .../src/assets/knowledge-base/docX.png        | Bin 0 -> 1130 bytes
 .../src/assets/knowledge-base/pdf.png         | Bin 0 -> 913 bytes
 .../src/assets/knowledge-base/txt.png         | Bin 0 -> 889 bytes
 .../src/assets/knowledge-base/xlsx.png        | Bin 0 -> 995 bytes
 .../manager-web/src/components/ManualIcon.vue |  20 ++
 main/manager-web/src/i18n/de.js               |  11 +
 main/manager-web/src/i18n/en.js               |  11 +
 main/manager-web/src/i18n/pt_BR.js            |  11 +
 main/manager-web/src/i18n/vi.js               |  11 +
 main/manager-web/src/i18n/zh_CN.js            |   9 +
 main/manager-web/src/i18n/zh_TW.js            |  11 +
 .../src/views/KnowledgeBaseItem.vue           | 197 ++++++++----------
 .../src/views/KnowledgeBaseManagement.vue     | 176 ++++++++--------
 15 files changed, 263 insertions(+), 194 deletions(-)
 create mode 100644 main/manager-web/src/assets/knowledge-base/MD.png
 create mode 100644 main/manager-web/src/assets/knowledge-base/default.png
 create mode 100644 main/manager-web/src/assets/knowledge-base/docX.png
 create mode 100644 main/manager-web/src/assets/knowledge-base/pdf.png
 create mode 100644 main/manager-web/src/assets/knowledge-base/txt.png
 create mode 100644 main/manager-web/src/assets/knowledge-base/xlsx.png
 create mode 100644 main/manager-web/src/components/ManualIcon.vue

diff --git a/main/manager-web/src/assets/knowledge-base/MD.png b/main/manager-web/src/assets/knowledge-base/MD.png
new file mode 100644
index 0000000000000000000000000000000000000000..4c96572080eba4f06f4515bb7656f69e04d672ef
GIT binary patch
literal 659
zcmV;E0&M+>P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00077Nkl<Zc%1E;
zJ!lj`7>3^kuTi`N{HYXIA&5EQwh0DBvlh0B2x_Z^wT-1gZLKV=EERu9P=X+Wu~3vW
zu}DA!UGN7{0%rs*Hs1Pvds(uV>?S+ez0EAl1H*hbHyrcK|J|O29$-JdKLQI50=NKk
zz=jY6*S%BcuAx9Ird-%h$87iuO`z@a<D{`J($GO5wRf{nwt!OaW}z$r_VO4rX|RnV
zDN!I`rWYylr3wtz`?0lFW2DA!-^c8H3*O1IE84rFK<Jggy~8dJZQH>}jkj|@asKtB
z5y*`ZFakL-0$Bt)*9ZR-!@|iT@aVILGrMiXQ4@Ibz~!m;f??sTB@i`K4!papTVFi%
zqH^s8jy|8jm%o1)0TahgV6d;BQAGr#k(Z`kVV>89Vb+lmh>-WR7r6C)2G72KV+34n
zG%>t=C!-G93tX9=!b2|Ji+cwkm%YpT8!TNyYk@l-Kd|S&GD5g$Zx0<|)Q#2xGIeC$
z3%fRN!G(PTjJnZUKt|xr+>cP=rZW^uEJqsw+23WF#E~*NxS}mH2_*rc(pL$=2&7;H
zj6jLR??XnQC@MdNDlahFa8^BW<J33RaA2{nHUcVWxd!CkBlrC*NZrwc4kL{OD!&Gd
zfDy=v$~GEj_E!rxW~Mh@ASdrA;4tr^Y=M{jx;hC}EX(8mJMJAn-Que*(gentIZS()
ziX-JoV;&L(BEny)7yePC?efVybBr*ppRxs#==^FSGJy-#QPM$RIpHYzzKf;*Pc)g5
t(NQ3YaFp7dc9!K*%7KMG7NZve{{hr08&BMCy}<wg002ovPDHLkV1jTWCzSvI

literal 0
HcmV?d00001

diff --git a/main/manager-web/src/assets/knowledge-base/default.png b/main/manager-web/src/assets/knowledge-base/default.png
new file mode 100644
index 0000000000000000000000000000000000000000..cc1b9a5fed3b3d95e80b67f42f5de52fb7ba4367
GIT binary patch
literal 721
zcmV;?0xtcDP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm0007*Nkl<Zc%1E-
z-EI;=7>2)H*zyyw#YjnQQ%kTFjLMoO;z5(HiS@ed9e5}9yos%eC+I;XvBlIxs-lEY
z1Bk6{y6pH4q^1<1`$KoP$v(+sz8N;K&wTTfFaliyuih4yH4<dTG=-tYkIYe*)s<Z4
zIgJnj#S$A^#W__KvcyOsjmh{%g$Coiz>v|^gS`R<M^_K_2(0IKUYZzPJ=i5sWT;#O
zYY-DxS01NdpwWY^0-_+4eSUEtp&>Mlh1zZH4zkzxzI`2>%MwUjk8a+-J*|*IYK`CT
z3%h066R?UW;0aj76YvBq;t7mWAQlZ%>>3K{dh3wtzfe#Q!!-hTlT&mvK8~mtE>ZYY
zCbg}h)sHI#2EF_#KWa_dDOC{l<G28yE{mC2M8nB{C{gS17*Q{d3B+TO&d5uCA6gf~
zrxITee~wS6vfo5c7e@qwV-hXNDMaRI9UM`9dyhDd2+Ss8v~Vkd$UM7Ws`Ry5w_o7F
z{4`C*qKK?ftGBQ_eJ8))*HG2=1iEw)4F@Q9FKJFd?}F8XSpmOKBxP~IoB&_A+4&i?
zth4>O(pk)raNr{{nnsr{rf!T=C?J^=;Py+|6dyJ8nCI-dVEY>2JJ2LDVOD}qowMhG
z?E<656L4A}7?8@LF-iB%z_(F;2DwH6Yst_y%6a-I?H&Q6+bEvLCK7dzz?EMEo`5G{
z5l_Hr0US(kQZw-gLPPv)9yGsI>&uP{SOG6oc$Uk^2z#(w;5Eu78AKFlPn3ddPaY;4
zX!anW^nq*EHGHHH(cnLT%wf+p>nZ%ATRS0z5tB70D0n!FZY$U;@IThy6&2F>jXiGe
zjc3Vuf%6#5lKTYCv$0j0P}L*3o25=crv7DV<N|*IVuNr`oc*j>00000NkvXXu0mjf
DGFwJ8

literal 0
HcmV?d00001

diff --git a/main/manager-web/src/assets/knowledge-base/docX.png b/main/manager-web/src/assets/knowledge-base/docX.png
new file mode 100644
index 0000000000000000000000000000000000000000..4161ebeea2566d7e2741c09292e55f7514d0102e
GIT binary patch
literal 1130
zcmV-w1eN=VP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm000CrNkl<Zc%1E;
zOGp(_7{|XsNzk-01a*-`t_t&BgciNH)1tI8FlbQ`*{-r>&|}kU(F<Dk+NEW+=mkB<
zS|nt(a8c<(sFc!8Zt@wG<xJmyrlaScx!E|*ol)=yXXf*q%k}){`@a7uGa98CeM3XS
zG_ANrnxT<p3^vu~^K@VYDnPHfr_=YrgsD;7vNVHu!=y0OR2%5;oYI%+RW}!n(nvzH
ztT=y_VG;3pVj>lwZ)}X4qrVe>%Yn;+7SSXLO@LhvKZjzbWf}h}2S0=&Ag{9i4PV{=
zmV+Nc5s+J1&-+ggGhV>QhN|P_1Jg9?i;IgtkwWMKKGaw8(HH$iMMbWA$V?JIEWov2
z*94dqFafgy6kHP^odTLqmGN<63JMA+D=UkmWTu6H#{DiMagmXcL9tkjGBY#zr*V7<
z=()3v=H<-ci0{x<4SaOa=gy(-+uJyDkk{6f7t*71l^hZ6IQg6&zUtw~!HWO@0csX}
z33z;NJ*_S;;)tkZ>n-XZ9^oi?lR#cOvNL86uzLRkYU}Ld$iYhqWoKtoe!g3%F9B!w
zE~kApOE@Chbg+qDwDodCRJUabo!PUTBL{g6o5uihW<cmoEN@gU2U!?6e5I8x-s|9K
zJZtS;Uujj{L!KEYbOCayoWB0f9zbkTaOr*r9lG4g5mC#9YAP?CPmf-A)Ake1B;%!o
zbX}*MoE(ml@g+cR)*H_{Y47=$9FaX|uk{X7N#R^-Y5PJO4?g7;qQNJ-_?RqM;H8NJ
zbs->}NNm#HI12!{@+hUxEM!^j-J~_S<OE&>00;=gg@7m*u}M)@1K&nyA7|vo(Y5?3
zr(wk!P#p+(DWO1J2*?eKO~PR?kP$R*%Z1In;y4k?>C%B!{FC!pmC&0Q$WDZ-T354_
zcC0J4%Lk1sY91xCZ1H?sTq*|wkqD5>0#_LuL`k818o9AwUaYn^j)q;x8Gtys;bpv(
zP;PE6<>lpZl#Fiya$}-oL^dD>H?Nz=4BE7!#I{W|JH$Z@hKkoFuBfO8&V_(*B3xNq
zVIXQ88NonLlyN2?Scp@JOn`7A;rlq3u_J-%l?%q4NC3BjYpHlCp}<`T$W8=swQ)}X
z<)!&!P9zZ7QHi99f$T&8^^GAAP6T9eDv=40od^gA5(p;(=#x|q1iX|`;4TEvn8JyG
z+N8pX05XG-ipZK6APWL{^8o%|Qt12z+1}MR_Roz<qymD#O9`dLg@PioCJu^O0Sc}O
zFe_jJrXXN|1?YTEB6I=oudYAACqFdv1CC}=(0I5=r+}~?F}>wej7Q*vA^_NrS$_=2
zO)?Emhd~x4czVi&CLk5|gKlfouuRL)?AHlsAx}?=NCl`kuNwR^@T!4@EO{uqX(d3#
wOW93p0jbcdt{JAr8A90+Uboq;^K@YR0Y=O)Pkp&L)Bpeg07*qoM6N<$f<Np5rvLx|

literal 0
HcmV?d00001

diff --git a/main/manager-web/src/assets/knowledge-base/pdf.png b/main/manager-web/src/assets/knowledge-base/pdf.png
new file mode 100644
index 0000000000000000000000000000000000000000..c6e91a08f3d0e0040c2cf3ff2ea0aa69b525691d
GIT binary patch
literal 913
zcmV;C18)3@P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm000A6Nkl<Zc%1E-
z%TE(g6o-Ger4(9un24^#x)lsv_}Cbk$ijp~garl@6G?m|K0@Ng4JN_@O+X`P!pa0z
zK44QZai_pe!piViD*go$OIseDxt`N9NZT1;`eI1tOD1#f=}dFJdvEWZbOZ`OxV^1W
zgBlb<C=xO#Bmy9$KyTI9L=W<apd%+@9j$>4DH?=S6)8oK%2Z&2Ed<PZcQ43d3s~vh
zy-*YZ+1Xkhj>-{fv3K`^EQUb1qg9crHc6qakS^Dws*j;T3R5^R0!-!jL`J<Ci9!mv
z0w>|Ud5a=zY)nrgKJ|6~1>AM@@ICFL$Qo<oAFw|D-Vw+dN5B!t5l6rg$Ppufjj3<&
zD3>TQ$F>4o{Oa%!eEoxP(=KgB)&jis3!k4NK>hs-h(zE%RZlH?xQa%gEm4lpbBunS
z5$OW4;n#^r1mDXya38Owj4@dYl=t+ZWV5*V!W?3~Pf#)TiCRfw1J4nk{hpGG_I5*E
zn5QU{bOHTZ--{u*YXdMNCjq`urJk-Bd57?|tBGRy%*B-5>q6w=-L2ei@I4s<o8P??
z1rcEMn9tFkZpzRUS~Tu`#z;Wa97Fm2E^3*Rlfc##qQYWSBp1s?GkVNt9d4VEF0k_8
z4!rHx3%3ffKzw$Feyl$ebCuy@^&<6HKkvqNf%Pw+u{Qb^r8hd^ZE2&7IhF*NzwIrO
zP6+|NQ7@k1VtKl7G48t48Kbfjd=Cro3dX(9_y>mII#NTCIe8agxCj>ErId441oYLb
zjOM;aX@a)=2d?VFbcHcl3*;LX@HDqzb>JDblKTvI0OwiE4BH66Pn)92CdaUdr|B|0
z7cNrkKlTwIN@&WYFPkbY5>eVDb-A*~-SC__M^O^n2#A`a@b|xh@E@X9D%&Nzowrfi
ze1)<}Y$L!^WT&|<BP;ado<Ygk^C^-CM!*b5AYV8FjzEq$0**kAI0E}Ez|TVb{BIR?
zagL7pAC+ShL29N@Q~_d|-c(M(B0{>BD*OnE(a<tAQ!o<<Nr<3;JVDL8LB$vTHS2Z~
zFS<3*`(jOzK#)?6bYxA@1&rW-Ei_3|8cSIlC0hujlNcoxihvfR0u@L!P}&gs+<pQ^
nBu0rwNJuD~qf|xdf(ZNrERy|CjKAF500000NkvXXu0mjf*#4Y`

literal 0
HcmV?d00001

diff --git a/main/manager-web/src/assets/knowledge-base/txt.png b/main/manager-web/src/assets/knowledge-base/txt.png
new file mode 100644
index 0000000000000000000000000000000000000000..74b32e5e2f0b39a1c8d5471a5340505b7a99525d
GIT binary patch
literal 889
zcmV-<1BU#GP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm0009(Nkl<Zc%1E;
zze^io7{{N>(1b#bphU1>;-GbjW~fsm9{w1Lf(4<2(xHxVax^aOlKch6KcIEgT5xdC
z{=jx}YFw;BEibeXsi3$Rp?Cd0Z<@x$yPEUP<O27B<DNV@-uL~yKknWmQRo&(r80v)
zpB~dRQi&*rBSJve>E*)0><e-b1&1xt>7|IG{O;2<pGvZ^x=JRvLcpwdtD)usR(iJ@
zY9^3MExy4C4W<Y=NG%0)oLq&Od`$(~+FHr)zk|pc`TPata=$2<oW0WCD+%Vd1g57a
zsH5XPB5MfogO-=ydIGlb1UvzocmmZ3@b*F1wL^rCQ;opx?jA*>J%~yOivlVH-XnCJ
z>jcE#hVlb%YHET40Y9>(yz2!rnOAgrdWMK-X6C6BVMHSc2sCnKWrNPo^SGuR*FHhE
z0DtFtf$i-bIyg8)L^M47h{EC0b>b!hypW>N2gnrQ!n?XUX?1mjLZKGw?d?HtUC6k|
z*4Aga=`zDiV150aT)h4Lz1ZyeX<(oq*%IO=0z8ad85hRABTxv(+3Z*JPCK2PoXPph
zF<+O>?#V`Q&I}`got-T0?|(x?a?wssK1Ngy*KJt<p=5qOfm{X=q4IVb8yk`pEiJvq
z2o&Zki*W_lVI;tvlh5Z75e0)yaug~NP6;r4cM#$yZEk+Tr-GCn0UiN?26AU`=QKAr
zAzKcA&*j?|2nO#-0j`WkfUzRLx5dgA8qV>0<FgsUiU4zYD{)z1e0)gG{qF8g*>gPS
ztq2&6Ks5*_1i1GTiD&X*!;Of?AIed1y#P0m=R6DW;w|1LIe&C?jHocRiuwOh7Xc^n
z1nMnd1)ieC{gChk9HQZ;P{Rw1jKuN8Z9#NByelm}orPNjtl-Kuz&%>I7cwIhYNgT9
zI3gDbH2fOy1UvzoSh<Z}CYL*wZ-8|du!r&`nM}kGlu>JekGf7D$Ra);eGdfguFcIo
zKf%W`3<c8Z#WhqELm0;47%0>5mqt4n3KYQ$eni*xn4;(^DrccV95)7K)K<U<NU0T4
zVH{O~>+3I234|g<no9U(U)L2C&Fmu+Tq$4#q*P7QR7LsshmatSTM_sJL_?-eTU{Z?
P00000NkvXXu0mjfZ&#Gw

literal 0
HcmV?d00001

diff --git a/main/manager-web/src/assets/knowledge-base/xlsx.png b/main/manager-web/src/assets/knowledge-base/xlsx.png
new file mode 100644
index 0000000000000000000000000000000000000000..3374603423b0f2e862ecb4a6a00c5acb349f30d4
GIT binary patch
literal 995
zcmV<9104K`P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm000B3Nkl<Zc%1E;
zPe_wt9LIm_5Qb)dE|m%m^`eCqBw0}IvL$%1)Po*8)S;Z0#3lrlm=*-i;i=gr2@iVk
zPX<EGizI|$hm^2Os~t@0QY1!^x%K@%<F$OZg>!r72K&IX=g;0}@9+Eke!u5^<<TSt
zU~aQk$ePI_BF97m77^Kt0!+7kE>DNVk(dRTuUDF7)n6e27;A#DtRs>H0@UjIVPs%^
zh0U^Q5-dQi?(aaU__4C40E`xk#6*Gwm|JaQsG?lmO<<BKcy3Cz!p<F!eD|LEL`MVx
z)&Q#H!X&SKJ(I`L+CV}D)Roz!_JkF!=y<#IUOLC!;&V-g*c&oHj1tgtu2HVq8qtc5
zm)?1)zwby3h?(+&QYkMiK`RKwEPnYUBd;dW+eq%d11jW5(g@J=p~oXL@8+bz-G<&q
zP8O8NP_q-Qv;gBsIRVT88m7UdW)2L`hUP%t{v^x+8qCCvmZTBD6=l(&H<o{_s0Wpv
z-5HruoLhia5(&_gayg(UEdYcJ5DKszJ*{G}_t}74I$MKLk%f<5e2UC?=kO_#y(>#@
zRX0f<o|^sBV;G;8qMUqnL+&Ek8CkNh6r4j6x(m^`=^F#mfQf_6-BRVUum2!L5elQw
z;aQIoQhKu{ILGaf7VI_@#P2j{a6)$>-jJ`q+$Apecc?zm1h8LpC||ms^uY@U)oN3u
z^~foBuMmPR;HtmyI~EOk!_Zx*IHy1+uDRt3jQ6~Gp$sOP0J?e5?o{=|=cCd!-lxKf
zUg)15UB508hUNe&WiVYnf-rClIaQx%hS6A3j+=GYx2bSj{<)$AXmkFD;R5FF1Xs1Y
z-hptaLCgn3LKDzlZC3`fKhf$|*VdI;5f<O27NJt*YC@8J#+BhQQ~+a@g%h0+u=q7-
z2t7jhqcr@%#SVBP6LIWSc{0)3Cui<9DzV(1{`CSwjqmvyG>|)6C;nX2!|-iCZ$~S5
zFWM260R8}1mn+Cnp)u?;SqYPmNlT+R#x{j$Tc<XMZ4HK?wgAzvB>|}7PRa|=V`vVb
zGMuyk5HdiF62OE{*e--B?xcJYr@R0?DVGC!(gHxp07(moK*}d^TEKP-;FFlI-qE7H
zx^KIH82AQLd&3>kMi5|oEP``kk;5o)BthrI8tR~X)ej*73l6zaO9e^{Bv?Q=%#KP6
zPVONFqN4Uv5(v<vy!30$A|`l9{r^OuR3egu0>TmWlHUR`C=e#H2L;4mz#kW(2VUZR
RfWH6$002ovPDHLkV1k*j&2s<%

literal 0
HcmV?d00001

diff --git a/main/manager-web/src/components/ManualIcon.vue b/main/manager-web/src/components/ManualIcon.vue
new file mode 100644
index 00000000..6ee0f27b
--- /dev/null
+++ b/main/manager-web/src/components/ManualIcon.vue
@@ -0,0 +1,20 @@
+<template>
+  <svg t="1780649285700" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="79487" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48">
+    <path
+      d="M917.333333 138.666667C917.333333 85.333333 870.4 42.666667 810.666667 42.666667H219.733333C157.866667 42.666667 106.666667 89.6 106.666667 145.066667V855.466667c0 70.4 57.6 128 128 128h576c59.733333 0 106.666667-46.933333 106.666666-106.666667V138.666667zM234.666667 213.333333h362.666666c23.466667 0 42.666667 19.2 42.666667 42.666667s-19.2 42.666667-42.666667 42.666667H234.666667c-23.466667 0-42.666667-19.2-42.666667-42.666667s19.2-42.666667 42.666667-42.666667z m0 128h277.333333c23.466667 0 42.666667 19.2 42.666667 42.666667s-19.2 42.666667-42.666667 42.666667H234.666667c-23.466667 0-42.666667-19.2-42.666667-42.666667s19.2-42.666667 42.666667-42.666667z m597.333333 533.333334c0 12.8-8.533333 21.333333-21.333333 21.333333H236.8c-21.333333 0-40.533333-14.933333-44.8-36.266667-4.266667-25.6 17.066667-49.066667 42.666667-49.066666h576c12.8 0 21.333333 8.533333 21.333333 21.333333v42.666667z"
+      :fill="color" p-id="79488"></path>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'ManualIcon',
+  props: {
+    color: {
+      type: String,
+      default: '#b3a0fa',
+    },
+  },
+}
+</script>
\ No newline at end of file
diff --git a/main/manager-web/src/i18n/de.js b/main/manager-web/src/i18n/de.js
index 89aecd11..32c931fc 100644
--- a/main/manager-web/src/i18n/de.js
+++ b/main/manager-web/src/i18n/de.js
@@ -1384,8 +1384,19 @@ export default {
   'knowledgeFileUpload.comprehensiveSimilarity': 'Umfassende Ähnlichkeit',
   'knowledgeFileUpload.content': 'Inhalt:',
   'knowledgeFileUpload.testQuestionRequired': 'Bitte Testfrage eingeben',
+  'knowledgeFileUpload.parsing': 'Analysiere...',
   'knowledgeBaseDialog.descriptionRequired': 'Bitte Wissensbasis-Beschreibung eingeben',
 
+  // Knowledge Base Management page text
+  'knowledgeBaseManagement.loading': 'Laden...',
+  'knowledgeBaseManagement.noData': 'Keine Daten',
+  'knowledgeBaseManagement.switchKnowledgeBase': 'Wissensbasis wechseln',
+  'knowledgeBaseManagement.currentKnowledgeBaseDocuments': 'Aktuelle Wissensbasis-Dokumentassets',
+  'knowledgeBaseManagement.enabled': 'Aktiviert',
+  'knowledgeBaseManagement.disabled': 'Deaktiviert',
+  'knowledgeBaseManagement.totalDocuments': 'Gesamt {total} Dokumente',
+  'knowledgeBaseManagement.getListFailed': 'Liste konnte nicht abgerufen werden',
+
   // Feature Management page text
   'featureManagement.selectAll': 'Alle auswählen',
   'featureManagement.deselectAll': 'Alle abwählen',
diff --git a/main/manager-web/src/i18n/en.js b/main/manager-web/src/i18n/en.js
index d7013848..8e8e1845 100644
--- a/main/manager-web/src/i18n/en.js
+++ b/main/manager-web/src/i18n/en.js
@@ -1384,8 +1384,19 @@ export default {
   'knowledgeFileUpload.comprehensiveSimilarity': 'Comprehensive Similarity',
   'knowledgeFileUpload.content': 'Content:',
   'knowledgeFileUpload.testQuestionRequired': 'Please enter test question',
+  'knowledgeFileUpload.parsing': 'Parsing...',
   'knowledgeBaseDialog.descriptionRequired': 'Please enter knowledge base description',
 
+  // Knowledge Base Management page text
+  'knowledgeBaseManagement.loading': 'Loading...',
+  'knowledgeBaseManagement.noData': 'No data',
+  'knowledgeBaseManagement.switchKnowledgeBase': 'Switch Knowledge Base',
+  'knowledgeBaseManagement.currentKnowledgeBaseDocuments': 'Current Knowledge Base Document Assets',
+  'knowledgeBaseManagement.enabled': 'Enabled',
+  'knowledgeBaseManagement.disabled': 'Disabled',
+  'knowledgeBaseManagement.totalDocuments': 'Total {total} documents',
+  'knowledgeBaseManagement.getListFailed': 'Failed to get list',
+
   // Feature Management page text
   'featureManagement.selectAll': 'Select All',
   'featureManagement.deselectAll': 'Deselect All',
diff --git a/main/manager-web/src/i18n/pt_BR.js b/main/manager-web/src/i18n/pt_BR.js
index c8aa4906..fd1d58ac 100644
--- a/main/manager-web/src/i18n/pt_BR.js
+++ b/main/manager-web/src/i18n/pt_BR.js
@@ -1384,8 +1384,19 @@ export default {
   'knowledgeFileUpload.comprehensiveSimilarity': 'Similaridade Geral',
   'knowledgeFileUpload.content': 'Conteúdo:',
   'knowledgeFileUpload.testQuestionRequired': 'Por favor, insira a pergunta de teste',
+  'knowledgeFileUpload.parsing': 'Analisando...',
   'knowledgeBaseDialog.descriptionRequired': 'Por favor, insira a descrição da base de conhecimento',
 
+  // Página de gerenciamento de base de conhecimento
+  'knowledgeBaseManagement.loading': 'Carregando...',
+  'knowledgeBaseManagement.noData': 'Sem dados',
+  'knowledgeBaseManagement.switchKnowledgeBase': 'Alternar Base de Conhecimento',
+  'knowledgeBaseManagement.currentKnowledgeBaseDocuments': 'Ativos de Documentos da Base de Conhecimento Atual',
+  'knowledgeBaseManagement.enabled': 'Ativado',
+  'knowledgeBaseManagement.disabled': 'Desativado',
+  'knowledgeBaseManagement.totalDocuments': 'Total de {total} documentos',
+  'knowledgeBaseManagement.getListFailed': 'Falha ao obter lista',
+
   // Página de gerenciamento de funcionalidades
   'featureManagement.selectAll': 'Selecionar Tudo',
   'featureManagement.deselectAll': 'Desmarcar Tudo',
diff --git a/main/manager-web/src/i18n/vi.js b/main/manager-web/src/i18n/vi.js
index 58d69bd1..c9ed418b 100644
--- a/main/manager-web/src/i18n/vi.js
+++ b/main/manager-web/src/i18n/vi.js
@@ -1384,8 +1384,19 @@ 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.parsing': 'Đang phân tích...',
   'knowledgeBaseDialog.descriptionRequired': 'Vui lòng nhập mô tả cơ sở kiến thức',
 
+  // Knowledge Base Management page text
+  'knowledgeBaseManagement.loading': 'Đang tải...',
+  'knowledgeBaseManagement.noData': 'Không có dữ liệu',
+  'knowledgeBaseManagement.switchKnowledgeBase': 'Chuyển đổi cơ sở kiến thức',
+  'knowledgeBaseManagement.currentKnowledgeBaseDocuments': 'Tài sản tài liệu cơ sở kiến thức hiện tại',
+  'knowledgeBaseManagement.enabled': 'Đã bật',
+  'knowledgeBaseManagement.disabled': 'Đã tắt',
+  'knowledgeBaseManagement.totalDocuments': 'Tổng {total} tài liệu',
+  'knowledgeBaseManagement.getListFailed': 'Lấy danh sách thất bại',
+
   // Feature Management page text
   'featureManagement.selectAll': 'Chọn tất cả',
   'featureManagement.deselectAll': 'Bỏ chọn tất cả',
diff --git a/main/manager-web/src/i18n/zh_CN.js b/main/manager-web/src/i18n/zh_CN.js
index 023a5379..d488f9d0 100644
--- a/main/manager-web/src/i18n/zh_CN.js
+++ b/main/manager-web/src/i18n/zh_CN.js
@@ -1385,6 +1385,15 @@ export default {
   'knowledgeFileUpload.content': '内容:',
   'knowledgeFileUpload.testQuestionRequired': '请输入测试问题',
   'knowledgeBaseDialog.descriptionRequired': '请输入知识库描述',
+  'knowledgeFileUpload.parsing': '正在解析中...',
+  'knowledgeBaseManagement.loading': '加载中...',
+  'knowledgeBaseManagement.noData': '暂无数据',
+  'knowledgeBaseManagement.switchKnowledgeBase': '切换知识库',
+  'knowledgeBaseManagement.currentKnowledgeBaseDocuments': '当前知识库文档资产',
+  'knowledgeBaseManagement.enabled': '已启用',
+  'knowledgeBaseManagement.disabled': '已禁用',
+  'knowledgeBaseManagement.totalDocuments': '共 {total} 个文档',
+  'knowledgeBaseManagement.getListFailed': '获取列表失败',
 
   // 系统功能配置页面文本
   'featureManagement.selectAll': '全选',
diff --git a/main/manager-web/src/i18n/zh_TW.js b/main/manager-web/src/i18n/zh_TW.js
index ad38a0c0..ccfce91b 100644
--- a/main/manager-web/src/i18n/zh_TW.js
+++ b/main/manager-web/src/i18n/zh_TW.js
@@ -1384,8 +1384,19 @@ export default {
   'knowledgeFileUpload.comprehensiveSimilarity': '綜合相似度',
   'knowledgeFileUpload.content': '內容:',
   'knowledgeFileUpload.testQuestionRequired': '請輸入測試問題',
+  'knowledgeFileUpload.parsing': '正在解析中...',
   'knowledgeBaseDialog.descriptionRequired': '請輸入知识库描述',
 
+  // 知識庫管理頁面文本
+  'knowledgeBaseManagement.loading': '加載中...',
+  'knowledgeBaseManagement.noData': '暫無數據',
+  'knowledgeBaseManagement.switchKnowledgeBase': '切換知識庫',
+  'knowledgeBaseManagement.currentKnowledgeBaseDocuments': '當前知識庫文檔資產',
+  'knowledgeBaseManagement.enabled': '已啟用',
+  'knowledgeBaseManagement.disabled': '已禁用',
+  'knowledgeBaseManagement.totalDocuments': '共 {total} 個文檔',
+  'knowledgeBaseManagement.getListFailed': '獲取列表失敗',
+
   // 功能管理頁面文本
   'featureManagement.selectAll': '全選',
   'featureManagement.deselectAll': '取消全選',
diff --git a/main/manager-web/src/views/KnowledgeBaseItem.vue b/main/manager-web/src/views/KnowledgeBaseItem.vue
index f0a6a6a1..68d83eba 100644
--- a/main/manager-web/src/views/KnowledgeBaseItem.vue
+++ b/main/manager-web/src/views/KnowledgeBaseItem.vue
@@ -2,47 +2,47 @@
   <div class="doc-section">
     <div class="doc-section-header">
       <div class="doc-section-left">
-        <div class="doc-section-title">{{`当前知识库文档资产（${kb?.name}）`}}</div>
-        <div class="doc-section-count" v-if="kb">共 {{ documents.length }} 个文档</div>
+        <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>
       <div class="doc-section-actions">
         <el-input
-          placeholder="搜索文档..."
+          :placeholder="$t('knowledgeFileUpload.documentNamePlaceholder')"
           v-model="searchDocName"
           class="doc-search-input"
           size="small"
           prefix-icon="el-icon-search"
           clearable
         />
-        <el-button size="small" @click="handleSearch">查询</el-button>
-        <el-button size="small" @click="handleUpload">新增</el-button>
-        <el-button size="small" @click="handleRetrievalTest">召回测试</el-button>
+        <el-button size="small" @click="handleSearch">{{ $t('knowledgeBaseManagement.search') }}</el-button>
+        <el-button size="small" @click="handleUpload">{{ $t('knowledgeBaseManagement.add') }}</el-button>
+        <el-button size="small" @click="handleRetrievalTest">{{ $t('knowledgeFileUpload.retrievalTest') }}</el-button>
       </div>
     </div>
-    <div class="doc-grid" v-loading="docLoading" element-loading-text="加载中...">
+    <div class="doc-grid" v-loading="docLoading" :element-loading-text="$t('knowledgeBaseManagement.loading')">
       <div v-for="doc in documents" :key="doc.id" class="doc-card">
         <div class="doc-card-top">
-          <div class="doc-file-icon" :class="getFileIconClass(doc.name)">
-            <i :class="getFileIcon(doc.name)"></i>
-          </div>
+          <img class="doc-file-icon" :src="getFileIconSrc(doc.name)" />
           <div class="doc-card-info">
             <div class="doc-card-name" :title="doc.name">{{ doc.name }}</div>
-            <div class="doc-card-meta">上传时间 {{ formatDate(doc.createdAt) }}</div>
+            <div class="doc-card-meta">{{ $t('knowledgeFileUpload.uploadTime') }} {{ formatDate(doc.createdAt) }}</div>
           </div>
         </div>
         <div class="doc-card-bottom">
           <div class="doc-card-progress">
             <div class="progress-ring">
-              <svg viewBox="0 0 36 36">
-                <circle class="bg" cx="18" cy="18" r="14"/>
-                <circle class="fg" :class="getProgressClass(doc)" cx="18" cy="18" r="14"
-                  stroke-dasharray="87.96"
+              <svg viewBox="0 0 44 44">
+                <circle class="bg" cx="22" cy="22" r="17"/>
+                <circle class="fg" :class="getProgressClass(doc)" cx="22" cy="22" r="17"
+                  stroke-dasharray="106.81"
                   :stroke-dashoffset="getProgressOffset(doc)"/>
               </svg>
               <span class="progress-ring-text" :style="{ color: getProgressTextColor(doc) }">{{ getProgressText(doc) }}</span>
             </div>
-            <span class="progress-label" :class="getProgressClass(doc)">{{ getDocStatusText(doc) }}</span>
-            <span class="doc-slice-count" v-if="doc.sliceCount > 0">切片 {{ doc.sliceCount }}</span>
+            <div class="progress-container">
+              <span class="progress-label" :class="getProgressClass(doc)">{{ getDocStatusText(doc) }}</span>
+              <span class="doc-slice-count">{{ $t('knowledgeFileUpload.sliceCount') }} <b>{{ doc.sliceCount }}</b></span>
+            </div>
           </div>
           <div class="doc-card-actions">
             <el-button
@@ -50,7 +50,7 @@
               type="text"
               @click.stop="$emit('view-slices', doc)"
             >
-              查看切片
+              {{ $t('knowledgeFileUpload.viewSlices') }}
             </el-button>
             <el-button
               v-else
@@ -59,16 +59,16 @@
               :loading="doc.parsing"
               @click.stop="handleParse(doc)"
             >
-              解析
+              {{ $t('knowledgeFileUpload.parse') }}
             </el-button>
             <el-button type="text" class="delete-btn" @click.stop="handleDelete(doc)">
-              删除
+              {{ $t('knowledgeBaseManagement.delete') }}
             </el-button>
           </div>
         </div>
       </div>
       <div v-if="documents.length === 0 && !docLoading" class="doc-empty">
-        <el-empty description="暂无文档"></el-empty>
+        <el-empty :description="$t('knowledgeBaseManagement.noData')"></el-empty>
       </div>
     </div>
   </div>
@@ -77,6 +77,18 @@
 <script>
 import Api from "@/apis/api";
 
+const iconMap = {
+  pdf: require('@/assets/knowledge-base/pdf.png'),
+  doc: require('@/assets/knowledge-base/docX.png'),
+  docx: require('@/assets/knowledge-base/docX.png'),
+  xls: require('@/assets/knowledge-base/xlsx.png'),
+  xlsx: require('@/assets/knowledge-base/xlsx.png'),
+  csv: require('@/assets/knowledge-base/xlsx.png'),
+  md: require('@/assets/knowledge-base/MD.png'),
+  markdown: require('@/assets/knowledge-base/MD.png'),
+  txt: require('@/assets/knowledge-base/txt.png'),
+};
+
 export default {
   name: 'LibraryItem',
   props: {
@@ -143,49 +155,41 @@ export default {
     },
 
     handleUpload() {
-      if (!this.kb) {
-        this.$message.warning('请先选择知识库');
-        return;
-      }
       this.$emit('upload');
     },
 
     handleRetrievalTest() {
-      if (!this.kb) {
-        this.$message.warning('请先选择知识库');
-        return;
-      }
       this.$emit('retrieval-test');
     },
 
     handleDelete(doc) {
       if (!this.kb) return;
       this.$confirm(
-        '确定要删除该文档吗？',
-        '警告',
+        this.$t('knowledgeFileUpload.confirmDelete'),
+        this.$t('message.warning'),
         {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
+          confirmButtonText: this.$t('knowledgeBaseDialog.confirm'),
+          cancelButtonText: this.$t('knowledgeBaseDialog.cancel'),
           type: 'warning'
         }
       ).then(() => {
         Api.knowledgeBase.deleteDocument(this.kb.datasetId, doc.id, (res) => {
           if (res.data && res.data.code === 0) {
             this.fetchDocuments();
-            this.$message.success('文档删除成功');
+            this.$message.success(this.$t('knowledgeFileUpload.deleteSuccess'));
           } else {
-            this.$message.error(res.data?.msg || '文档删除失败');
+            this.$message.error(res.data?.msg || this.$t('knowledgeFileUpload.deleteFailed'));
           }
         }, () => {
-          this.$message.error('文档删除失败');
+          this.$message.error(this.$t('knowledgeFileUpload.deleteFailed'));
         });
       }).catch(() => {});
     },
 
     handleParse(doc) {
-      this.$confirm('确定要解析该文档吗？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
+      this.$confirm(this.$t('knowledgeFileUpload.confirmParse'), this.$t('message.info'), {
+        confirmButtonText: this.$t('knowledgeFileUpload.confirm'),
+        cancelButtonText: this.$t('knowledgeFileUpload.cancel'),
         type: 'info'
       }).then(() => {
         this.$set(doc, 'parsing', true);
@@ -195,19 +199,19 @@ export default {
           doc.id,
           ({ data }) => {
             if (data && data.code === 0) {
-              this.$message.success('解析请求已提交，正在处理中');
+              this.$message.success(this.$t('knowledgeFileUpload.parsing'));
               this.$set(doc, 'parsing', false);
               this.startParsePolling(doc);
             } else {
               this.$set(doc, 'parsing', false);
               doc.parseStatusCode = 0;
-              this.$message.error(data?.msg || '解析失败');
+              this.$message.error(data?.msg || this.$t('knowledgeFileUpload.parseFailed'));
             }
           },
           (err) => {
             this.$set(doc, 'parsing', false);
             doc.parseStatusCode = 0;
-            this.$message.error(err?.data?.msg || '解析失败');
+            this.$message.error(err?.data?.msg || this.$t('knowledgeFileUpload.parseFailed'));
           }
         );
       }).catch(() => {});
@@ -228,10 +232,10 @@ export default {
                 if (updated.parseStatusCode !== 1) {
                   this.$set(doc, 'parsing', false);
                   if (updated.parseStatusCode === 3) {
-                    this.$message.success(`文档「${doc.name}」解析完成`);
+                    this.$message.success(`「${doc.name}」${this.$t('knowledgeFileUpload.parseSuccess')}`);
                     this.fetchSliceCountForSingleDocument(doc);
                   } else if (updated.parseStatusCode === 4) {
-                    this.$message.error(`文档「${doc.name}」解析失败`);
+                    this.$message.error(`「${doc.name}」${this.$t('knowledgeFileUpload.parseFailed')}`);
                   }
                   return;
                 }
@@ -269,26 +273,10 @@ export default {
       );
     },
 
-    getFileIconClass(fileName) {
-      if (!fileName) return 'txt';
+    getFileIconSrc(fileName) {
+      if (!fileName) return require('@/assets/knowledge-base/default.png');
       const ext = fileName.split('.').pop().toLowerCase();
-      if (ext === 'pdf') return 'pdf';
-      if (['doc', 'docx'].includes(ext)) return 'word';
-      if (['xls', 'xlsx', 'csv'].includes(ext)) return 'excel';
-      if (['ppt', 'pptx'].includes(ext)) return 'ppt';
-      if (['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp'].includes(ext)) return 'img';
-      return 'txt';
-    },
-
-    getFileIcon(fileName) {
-      if (!fileName) return 'el-icon-document';
-      const ext = fileName.split('.').pop().toLowerCase();
-      if (ext === 'pdf') return 'el-icon-document';
-      if (['doc', 'docx'].includes(ext)) return 'el-icon-document';
-      if (['xls', 'xlsx', 'csv'].includes(ext)) return 'el-icon-s-grid';
-      if (['ppt', 'pptx'].includes(ext)) return 'el-icon-data-board';
-      if (['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp'].includes(ext)) return 'el-icon-picture';
-      return 'el-icon-document';
+      return iconMap[ext] || require('@/assets/knowledge-base/default.png');
     },
 
     getProgressClass(doc) {
@@ -300,7 +288,7 @@ export default {
 
     getProgressOffset(doc) {
       const code = doc.parseStatusCode;
-      const circumference = 87.96;
+      const circumference = 106.81;
       if (code === 3) return 0;
       if (code === 1) {
         const progress = doc.chunkNum && doc.totalChunkNum
@@ -332,12 +320,12 @@ export default {
 
     getDocStatusText(doc) {
       const code = doc.parseStatusCode;
-      if (code === 3) return '已完成';
-      if (code === 1) return '处理中';
-      if (code === 0) return '未开始';
-      if (code === 4) return '失败';
-      if (code === 2) return '已取消';
-      return '未开始';
+      if (code === 3) return this.$t('knowledgeFileUpload.statusCompleted');
+      if (code === 1) return this.$t('knowledgeFileUpload.statusProcessing');
+      if (code === 0) return this.$t('knowledgeFileUpload.statusNotStarted');
+      if (code === 4) return this.$t('knowledgeFileUpload.statusFailed');
+      if (code === 2) return this.$t('knowledgeFileUpload.statusCancelled');
+      return this.$t('knowledgeFileUpload.statusNotStarted');
     },
 
     formatDate(dateString) {
@@ -353,7 +341,7 @@ export default {
 /* ========== Document Section ========== */
 .doc-section {
   background: #fff;
-  border-radius: 16px;
+  border-radius: 10px;
   padding: 16px 20px;
   box-shadow: 0 4px 16px rgba(31, 42, 68, 0.06);
   border: 1px solid #f0f3f9;
@@ -378,7 +366,7 @@ export default {
 
 .doc-section-title {
   font-size: 20px;
-  font-weight: 700;
+  font-weight: 500;
   color: #1f2a44;
 }
 
@@ -402,7 +390,7 @@ export default {
 .doc-grid {
   padding: 10px;
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(auto-fill,minmax(300px, 1fr));
   gap: 16px 20px;
   flex: 1;
   min-height: 0;
@@ -411,7 +399,7 @@ export default {
 }
 
 .doc-card {
-  height: 110px;
+  height: 120px;
   border-radius: 8px;
   border: 1px solid transparent;
   padding: 18px;
@@ -437,21 +425,11 @@ export default {
 }
 
 .doc-file-icon {
-  width: 44px;
-  height: 44px;
+  width: 46px;
+  height: 46px;
   border-radius: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 20px;
+  object-fit: contain;
   flex-shrink: 0;
-
-  &.pdf { background: #fff0f0; color: #ff5a5f; }
-  &.word { background: #e8ecff; color: #2f5bff; }
-  &.excel { background: #e8f9ee; color: #34c759; }
-  &.ppt { background: #fff3e0; color: #ff9500; }
-  &.txt { background: #f0f3f9; color: #788ba8; }
-  &.img { background: #f3e8ff; color: #9b59b6; }
 }
 
 .doc-card-info {
@@ -466,7 +444,7 @@ export default {
 
 .doc-card-name {
   font-size: 15px;
-  font-weight: 600;
+  font-weight: 500;
   color: #1f2a44;
   white-space: nowrap;
   overflow: hidden;
@@ -494,13 +472,13 @@ export default {
 
 /* ========== Progress Ring ========== */
 .progress-ring {
-  width: 36px;
-  height: 36px;
+  width: 44px;
+  height: 44px;
   position: relative;
 
   svg {
-    width: 36px;
-    height: 36px;
+    width: 44px;
+    height: 44px;
     transform: rotate(-90deg);
   }
 
@@ -532,14 +510,30 @@ export default {
   color: #7888a8;
 }
 
-.progress-label {
-  font-size: 12px;
-  color: #7888a8;
+.progress-container {
+  height: 32px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  .progress-label {
+    font-size: 12px;
+    color: #7888a8;
+  
+    &.complete { color: #34c759; }
+    &.processing { color: #2f5bff; }
+  }
 
-  &.complete { color: #34c759; }
-  &.processing { color: #2f5bff; }
+  .doc-slice-count {
+    font-size: 12px;
+    > b {
+      font-weight: bold;
+      font-size: 14px;
+    }
+  }
 }
 
+
 .doc-card-actions {
   display: flex;
   align-items: center;
@@ -558,15 +552,6 @@ export default {
   }
 }
 
-.doc-slice-count {
-  font-size: 12px;
-  color: #6b80eb;
-  background: #f0f3ff;
-  padding: 2px 8px;
-  border-radius: 4px;
-  margin-left: 4px;
-}
-
 .doc-empty {
   grid-column: 1 / -1;
   display: flex;
diff --git a/main/manager-web/src/views/KnowledgeBaseManagement.vue b/main/manager-web/src/views/KnowledgeBaseManagement.vue
index 6353e2a8..ceec6b41 100644
--- a/main/manager-web/src/views/KnowledgeBaseManagement.vue
+++ b/main/manager-web/src/views/KnowledgeBaseManagement.vue
@@ -2,10 +2,10 @@
   <div class="welcome">
     <HeaderBar />
     <div class="operation-bar">
-      <h2 class="page-title">知识库中心</h2>
+      <h2 class="page-title">{{ $t('knowledgeBaseManagement.title') }}</h2>
       <div class="right-operations">
         <el-input
-          placeholder="搜索知识库..."
+          :placeholder="$t('knowledgeBaseManagement.searchPlaceholder')"
           v-model="searchKbName"
           class="search-input"
           @keyup.enter.native="handleSearchKb"
@@ -14,22 +14,22 @@
         />
         <el-button class="btn-upload" @click="handleSearchKb">
           <i class="el-icon-search"></i>
-          查询
+          {{ $t('knowledgeBaseManagement.search') }}
         </el-button>
         <el-button class="btn-new-kb" @click="showAddDialog">
           <i class="el-icon-plus"></i>
-          新建知识库
+          {{ $t('knowledgeBaseManagement.addKnowledgeBase') }}
         </el-button>
       </div>
     </div>
 
     <div class="main-wrapper">
       <div class="content-panel">
-        <div class="content-area" v-loading="loading" element-loading-text="加载中...">
+        <div class="content-area" v-loading="loading" :element-loading-text="$t('knowledgeBaseManagement.loading')">
           <!-- Knowledge Base Cards Section -->
           <div class="kb-section">
             <div class="kb-section-header">
-              <div class="kb-section-title">知识库切换</div>
+              <div class="kb-section-title">{{ $t('knowledgeBaseManagement.switchKnowledgeBase') }}</div>
             </div>
             <div class="kb-cards-wrapper">
               <div class="kb-arrow left" @click="scrollCards(-1)" v-if="filteredKnowledgeBases.length > 0">
@@ -44,16 +44,16 @@
                   @click="selectKnowledgeBase(kb)"
                 >
                   <div class="kb-card-actions-top">
-                    <button class="kb-action-icon" title="编辑" @click.stop="editKnowledgeBase(kb)">
+                    <button class="kb-action-icon" :title="$t('knowledgeBaseManagement.edit')" @click.stop="editKnowledgeBase(kb)">
                       <i class="el-icon-edit"></i>
                     </button>
-                    <button class="kb-action-icon delete" title="删除" @click.stop="deleteKnowledgeBase(kb)">
+                    <button class="kb-action-icon delete" :title="$t('knowledgeBaseManagement.delete')" @click.stop="deleteKnowledgeBase(kb)">
                       <i class="el-icon-delete"></i>
                     </button>
                   </div>
                   <div class="kb-card-top">
                     <div class="kb-card-icon" :class="getCardColorClass(index)">
-                      <i class="el-icon-document"></i>
+                      <ManualIcon :color="getIconColor(index)" />
                     </div>
                     <div class="kb-card-info">
                       <div class="kb-card-name">{{ kb.name }}</div>
@@ -80,7 +80,7 @@
                 </div>
                 <div v-if="filteredKnowledgeBases.length === 0 && !loading" class="kb-empty">
                   <i class="el-icon-folder-opened"></i>
-                  <p>暂无知识库</p>
+                  <p>{{ $t('knowledgeBaseManagement.noData') }}</p>
                 </div>
               </div>
               <div class="kb-arrow right" @click="scrollCards(1)" v-if="filteredKnowledgeBases.length > 0">
@@ -100,7 +100,7 @@
             @refresh="refreshDocuments"
           />
           <div v-else class="doc-empty-placeholder">
-            <el-empty description="请先选择一个知识库"></el-empty>
+            <el-empty :description="$t('knowledgeBaseManagement.noData')"></el-empty>
           </div>
         </div>
       </div>
@@ -118,7 +118,7 @@
 
     <!-- Slice Dialog -->
     <el-dialog
-      :title="`切片管理 - ${currentDocumentName}`"
+      :title="`${$t('knowledgeFileUpload.viewSlices')} - ${currentDocumentName}`"
       :visible.sync="sliceDialogVisible"
       width="900px"
       :close-on-click-modal="false"
@@ -128,7 +128,7 @@
           <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>切片 {{ (sliceCurrentPage - 1) * slicePageSize + index + 1 }}</strong></p>
+                <p><strong>{{ $t('knowledgeFileUpload.slice') }} {{ (sliceCurrentPage - 1) * slicePageSize + index + 1 }}</strong></p>
               </div>
               <div class="slice-card-content">
                 <div class="content-text">{{ slice.content }}</div>
@@ -136,25 +136,25 @@
             </div>
           </div>
           <div v-else class="no-slice-data">
-            <el-empty description="暂无切片数据"></el-empty>
+            <el-empty :description="$t('knowledgeFileUpload.noSliceData')"></el-empty>
           </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}条/页`" :value="item"></el-option>
+            <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()">首页</button>
-          <button class="slice-page-btn" :disabled="sliceCurrentPage === 1" @click="sliceCurrentPage--; fetchSlices()">上一页</button>
+          <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()">下一页</button>
-          <span class="slice-total-text">共 {{ sliceTotal }} 条</span>
+          <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>
         </div>
       </div>
     </el-dialog>
 
     <!-- Upload Dialog -->
     <el-dialog
-      title="上传文档"
+      :title="$t('knowledgeFileUpload.uploadDocument')"
       :visible.sync="uploadDialogVisible"
       width="800px"
       :close-on-click-modal="false"
@@ -170,12 +170,12 @@
         drag
       >
         <i class="el-icon-upload"></i>
-        <div class="el-upload__text">将文件拖到此处，或点击上传</div>
-        <div class="el-upload__tip" slot="tip">支持的文档类型：PDF、DOC、DOCX、TXT、MD、CSV、XLS、XLSX、PPT、PPTX，单次批量上传文件数不超过 32 个</div>
+        <div class="el-upload__text">{{ $t('knowledgeFileUpload.dragOrClick') }}</div>
+        <div class="el-upload__tip" slot="tip">{{ $t('knowledgeFileUpload.uploadTip') }}</div>
       </el-upload>
       <!-- 已选择文件列表 -->
       <div class="selected-files-section" v-if="selectedFilesList.length > 0">
-        <h4>已选择文件 ({{ selectedFilesList.length }})</h4>
+        <h4>{{ $t('knowledgeFileUpload.selectedFiles') }} ({{ selectedFilesList.length }})</h4>
         <div class="selected-files-list">
           <div v-for="(file, index) in selectedFilesList" :key="index" class="selected-file-item">
             <div class="file-info">
@@ -190,41 +190,41 @@
         </div>
       </div>
       <span slot="footer">
-        <el-button @click="uploadDialogVisible = false">取消</el-button>
+        <el-button @click="uploadDialogVisible = false">{{ $t('knowledgeFileUpload.cancel') }}</el-button>
         <el-button type="primary" @click="handleBatchUploadSubmit" :loading="uploading" :disabled="selectedFilesList.length === 0">
-          确认上传 ({{ selectedFilesList.length }})
+          {{ $t('knowledgeFileUpload.confirm') }} ({{ selectedFilesList.length }})
         </el-button>
       </span>
     </el-dialog>
 
     <!-- Retrieval Test Dialog -->
     <el-dialog
-      title="召回测试"
+      :title="$t('knowledgeFileUpload.retrievalTest')"
       :visible.sync="retrievalTestDialogVisible"
       width="900px"
       :close-on-click-modal="false"
     >
       <div class="retrieval-test-form">
         <el-form :model="retrievalTestForm" label-width="100px">
-          <el-form-item label="测试问题" required>
+          <el-form-item :label="$t('knowledgeFileUpload.testQuestion')" required>
             <el-input
               v-model="retrievalTestForm.question"
               type="textarea"
               :rows="3"
-              placeholder="请输入测试问题"
+              :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">执行测试</el-button>
-          <el-button @click="retrievalTestDialogVisible = false">取消</el-button>
+          <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;">测试结果</h4>
+          <h4 style="margin-bottom: 12px;">{{ $t('knowledgeFileUpload.testResult') }}</h4>
           <div class="result-chunks">
             <div v-for="(chunk, index) in retrievalTestResult.chunks" :key="index" class="result-chunk">
-              <p><strong>切片 {{ index + 1 }}</strong></p>
-              <div style="margin: 8px 0; font-size: 12px; color: #409eff;">相似度: {{ (chunk.similarity || 0).toFixed(4) }}</div>
+              <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>
           </div>
@@ -244,9 +244,10 @@ import HeaderBar from "@/components/HeaderBar.vue";
 import VersionFooter from "@/components/VersionFooter.vue";
 import KnowledgeBaseDialog from "@/components/KnowledgeBaseDialog.vue";
 import KnowledgeBaseItem from "./KnowledgeBaseItem.vue";
+import ManualIcon from "@/components/ManualIcon.vue";
 
 export default {
-  components: { HeaderBar, VersionFooter, KnowledgeBaseDialog, KnowledgeBaseItem },
+  components: { HeaderBar, VersionFooter, KnowledgeBaseDialog, KnowledgeBaseItem, ManualIcon },
   data() {
     return {
       knowledgeBases: [],
@@ -326,12 +327,12 @@ export default {
               if (updated) this.selectedKb = updated;
             }
           } else {
-            this.$message.error(res.data?.msg || '获取知识库列表失败');
+            this.$message.error(res.data?.msg || this.$t('knowledgeBaseManagement.getListFailed'));
           }
         },
         () => {
           this.loading = false;
-          this.$message.error('获取知识库列表失败');
+          this.$message.error(this.$t('knowledgeBaseManagement.getListFailed'));
         }
       );
     },
@@ -356,7 +357,7 @@ export default {
     },
 
     showAddDialog() {
-      this.dialogTitle = '新增知识库';
+      this.dialogTitle = this.$t('knowledgeBaseManagement.addKnowledgeBase');
       this.knowledgeBaseForm = {
         id: null,
         datasetId: null,
@@ -368,7 +369,7 @@ export default {
     },
 
     editKnowledgeBase(kb) {
-      this.dialogTitle = '编辑知识库';
+      this.dialogTitle = this.$t('knowledgeBaseManagement.editKnowledgeBase');
       this.knowledgeBaseForm = {
         id: kb.id,
         datasetId: kb.datasetId,
@@ -391,50 +392,46 @@ export default {
       Api.knowledgeBase.updateKnowledgeBase(kb.datasetId, updateForm, (res) => {
         if (res.data && res.data.code !== 0) {
           this.fetchKnowledgeBases();
-          this.$message.error(res.data?.msg || '更新失败');
+          this.$message.error(res.data?.msg || this.$t('knowledgeBaseManagement.updateFailed'));
         } else {
-          this.$message.success(kb.status === 1 ? '已启用' : '已停用');
+          this.$message.success(kb.status === 1 ? this.$t('knowledgeBaseManagement.enabled') : this.$t('knowledgeBaseManagement.disabled'));
           if (this.selectedKb && this.selectedKb.datasetId === kb.datasetId) {
             this.selectedKb = { ...kb };
           }
         }
       }, () => {
         this.fetchKnowledgeBases();
-        this.$message.error('更新失败');
+        this.$message.error(this.$t('knowledgeBaseManagement.updateFailed'));
       });
     },
 
     deleteKnowledgeBase(kb) {
       this.$confirm(
-        `确定要删除知识库「${kb.name}」吗？删除后不可恢复。`,
-        '警告',
+        this.$t("knowledgeBaseManagement.confirmBatchDelete", {count: 1}),
+        this.$t('message.warning'),
         {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
+          confirmButtonText: this.$t('knowledgeBaseDialog.confirm'),
+          cancelButtonText: this.$t('knowledgeBaseDialog.cancel'),
           type: 'warning'
         }
       ).then(() => {
         Api.knowledgeBase.deleteKnowledgeBase(kb.datasetId, (res) => {
           if (res.data && res.data.code === 0) {
-            this.$message.success('删除成功');
+            this.$message.success(this.$t('knowledgeBaseManagement.batchDeleteSuccess', { count: 1 }));
             if (this.selectedKb && this.selectedKb.datasetId === kb.datasetId) {
               this.selectedKb = null;
             }
             this.fetchKnowledgeBases();
           } else {
-            this.$message.error(res.data?.msg || '删除失败');
+            this.$message.error(res.data?.msg || this.$t('knowledgeBaseManagement.deleteFailed'));
           }
         }, (err) => {
-          this.$message.error(err?.data?.msg || '删除失败');
+          this.$message.error(err?.data?.msg || this.$t('knowledgeBaseManagement.deleteFailed'));
         });
       }).catch(() => {});
     },
 
     showUploadDialog() {
-      if (!this.selectedKb) {
-        this.$message.warning('请先选择知识库');
-        return;
-      }
       this.uploadDialogVisible = true;
     },
 
@@ -444,12 +441,12 @@ export default {
           if (res.data && res.data.code === 0) {
             this.dialogVisible = false;
             this.fetchKnowledgeBases();
-            this.$message.success('修改成功');
+            this.$message.success(this.$t('knowledgeBaseManagement.updateSuccess'));
           } else {
-            this.$message.error(res.data?.msg || '更新失败');
+            this.$message.error(res.data?.msg || this.$t('knowledgeBaseManagement.updateFailed'));
           }
         }, (err) => {
-          this.$message.error(err?.data?.msg || '更新失败');
+          this.$message.error(err?.data?.msg || this.$t('knowledgeBaseManagement.updateFailed'));
         });
       } else {
         const createData = {
@@ -462,12 +459,12 @@ export default {
           if (res.data && res.data.code === 0) {
             this.dialogVisible = false;
             this.fetchKnowledgeBases();
-            this.$message.success('新增成功');
+            this.$message.success(this.$t('knowledgeBaseManagement.addSuccess'));
           } else {
-            this.$message.error(res.data?.msg || '新增失败');
+            this.$message.error(res.data?.msg || this.$t('knowledgeBaseManagement.addFailed'));
           }
         }, (err) => {
-          this.$message.error(err?.data?.msg || '新增失败');
+          this.$message.error(err?.data?.msg || this.$t('knowledgeBaseManagement.addFailed'));
         });
       }
     },
@@ -479,13 +476,8 @@ export default {
       this.selectedFilesList = [];
     },
 
-    handleFileChange(file, fileList) {
+    handleFileChange(file) {
       if (!file || !file.raw) return;
-      const isLt10M = file.size / 1024 / 1024 < 10;
-      if (!isLt10M) {
-        this.$message.error('文件大小不能超过10MB!');
-        return;
-      }
       this.selectedFilesList.push({
         name: file.name,
         size: file.size,
@@ -507,7 +499,7 @@ export default {
 
     handleBatchUploadSubmit() {
       if (this.selectedFilesList.length === 0) {
-        this.$message.error('请选择要上传的文件');
+        this.$message.error(this.$t('knowledgeFileUpload.fileRequired'));
         return;
       }
 
@@ -523,14 +515,14 @@ export default {
               if (data && data.code === 0) {
                 resolve({ success: true, fileName: file.name });
               } else {
-                reject({ success: false, fileName: file.name, error: data?.msg || '上传失败' });
+                reject({ success: false, fileName: file.name, error: data?.msg || this.$t('knowledgeFileUpload.uploadFailed') });
               }
             },
             (err) => {
               if (err && err.data) {
-                reject({ success: false, fileName: file.name, error: err.data.msg || err.msg || '上传失败' });
+                reject({ success: false, fileName: file.name, error: err.data.msg || err.msg || this.$t('knowledgeFileUpload.uploadFailed') });
               } else {
-                reject({ success: false, fileName: file.name, error: '上传失败' });
+                reject({ success: false, fileName: file.name, error: this.$t('knowledgeFileUpload.uploadFailed') });
               }
               console.error('上传文档失败:', err);
             }
@@ -546,12 +538,11 @@ export default {
           const failedCount = results.filter(r => !r.success).length;
 
           if (successCount > 0) {
-            this.$message.success(`成功上传 ${successCount} 个文件`);
+            this.$message.success(this.$t('knowledgeFileUpload.uploadSuccess'));
           }
 
           if (failedCount > 0) {
-            const failedFiles = results.filter(r => !r.success).map(r => r.fileName);
-            this.$message.error(`上传失败 ${failedCount} 个文件: ${failedFiles.join(', ')}`);
+            this.$message.error(this.$t('knowledgeFileUpload.uploadFailed'));
           }
 
           if (successCount > 0) {
@@ -561,16 +552,12 @@ export default {
         })
         .catch(error => {
           this.uploading = false;
-          this.$message.error('批量上传失败');
-          console.error('批量上传失败:', error);
+          this.$message.error(this.$t('knowledgeFileUpload.uploadFailed'));
+          console.error(error);
         });
     },
 
     showRetrievalTestDialog() {
-      if (!this.selectedKb) {
-        this.$message.warning('请先选择知识库');
-        return;
-      }
       this.retrievalTestForm.question = '';
       this.retrievalTestResult = null;
       this.retrievalTestDialogVisible = true;
@@ -578,7 +565,7 @@ export default {
 
     runRetrievalTest() {
       if (!this.retrievalTestForm.question.trim()) {
-        this.$message.error('请输入测试问题');
+        this.$message.error(this.$t('knowledgeFileUpload.testQuestionRequired'));
         return;
       }
       this.retrievalTestLoading = true;
@@ -637,7 +624,7 @@ export default {
               this.sliceTotal = 0;
             }
           } else {
-            this.$message.error(data?.msg || '获取切片列表失败');
+            this.$message.error(data?.msg || this.$t('knowledgeBaseManagement.getListFailed'));
             this.sliceList = [];
             this.sliceTotal = 0;
           }
@@ -645,9 +632,9 @@ export default {
         (err) => {
           this.sliceLoading = false;
           if (err && err.data) {
-            this.$message.error(err.data.msg || err.msg || '获取切片列表失败');
+            this.$message.error(err.data.msg || err.msg || this.$t('knowledgeBaseManagement.getListFailed'));
           } else {
-            this.$message.error('获取切片列表失败');
+            this.$message.error(this.$t('knowledgeBaseManagement.getListFailed'));
           }
           this.sliceList = [];
           this.sliceTotal = 0;
@@ -662,7 +649,12 @@ export default {
     },
 
     getCardColorClass(index) {
-      const colors = ['blue', 'purple', 'green', 'orange'];
+      const colors = ['blue', 'green', 'purple', 'orange', 'pink', 'cyan'];
+      return colors[index % colors.length];
+    },
+
+    getIconColor(index) {
+      const colors = ['#2f5bff', '#34c759', '#6a5cff', '#ff9500', '#f43f7a', '#00c9db'];
       return colors[index % colors.length];
     },
 
@@ -671,7 +663,7 @@ export default {
     },
 
     getStatusText(kb) {
-      return kb.status === 1 ? '已启用' : '未启用';
+      return kb.status === 1 ? this.$t('knowledgeBaseManagement.enabled') : this.$t('knowledgeBaseManagement.disabled');
     },
 
     formatDate(dateString) {
@@ -794,7 +786,7 @@ export default {
 /* ========== Knowledge Base Cards Section ========== */
 .kb-section {
   background: #fff;
-  border-radius: 16px;
+  border-radius: 10px;
   padding: 14px 20px;
   box-shadow: 0 4px 16px rgba(31, 42, 68, 0.06);
   border: 1px solid #f0f3f9;
@@ -809,7 +801,7 @@ export default {
 
 .kb-section-title {
   font-size: 20px;
-  font-weight: 700;
+  font-weight: 500;
   color: #1f2a44;
 }
 
@@ -856,7 +848,7 @@ export default {
 }
 
 .kb-card {
-  width: 340px;
+  width: 300px;
   border-radius: 8px;
   padding: 20px;
   border: 1px solid transparent;
@@ -865,7 +857,7 @@ export default {
   transition: all 0.25s;
   display: flex;
   flex-direction: column;
-  flex: 0 0 340px;
+  flex: 0 0 300px;
   position: relative;
   box-shadow: 0 0 10px rgba(47, 91, 255, 0.15);
 
@@ -944,6 +936,14 @@ export default {
     background: linear-gradient(135deg, #fff3e0, #ffe4b8);
     color: #ff9500;
   }
+  &.pink {
+    background: linear-gradient(135deg, #ffe4ed, #ffc8db);
+    color: #f43f7a;
+  }
+  &.cyan {
+    background: linear-gradient(135deg, #dff8fa, #c4f0f4);
+    color: #00c9db;
+  }
 }
 
 .kb-card-info {
@@ -956,7 +956,7 @@ export default {
 
 .kb-card-name {
   font-size: 18px;
-  font-weight: 600;
+  font-weight: 500;
   color: #1f2a44;
   margin-bottom: 6px;
   white-space: nowrap;

From 1a3ffbc8e2188a92c32913731c732a249c01a081 Mon Sep 17 00:00:00 2001
From: zhuoqinglian <1035449612@qq.com>
Date: Tue, 9 Jun 2026 14:25:49 +0800
Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E7=BB=84=E4=BB=B6=E6=8A=BD=E7=A6=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/CustomDialog.vue           | 228 ++++++++++++++++++
 1 file changed, 228 insertions(+)
 create mode 100644 main/manager-web/src/components/CustomDialog.vue

diff --git a/main/manager-web/src/components/CustomDialog.vue b/main/manager-web/src/components/CustomDialog.vue
new file mode 100644
index 00000000..14829429
--- /dev/null
+++ b/main/manager-web/src/components/CustomDialog.vue
@@ -0,0 +1,228 @@
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="dialogVisible"
+    :width="width"
+    :close-on-click-modal="closeOnClickModal"
+    :close-on-press-escape="closeOnPressEscape"
+    :show-close="showClose"
+    :destroy-on-close="destroyOnClose"
+    :custom-class="customClass"
+    class="custom-dialog"
+    @close="handleClose"
+    @open="handleOpen"
+  >
+    <template slot="title">
+      <div class="dialog-title">
+        <img src="@/assets/knowledge-base/level.png" class="title-icon" />
+        <span>{{ title }}</span>
+      </div>
+    </template>
+    <slot></slot>
+    <template slot="footer">
+      <div v-if="footer" class="dialog-footer">
+        <el-button @click="handleCancel">{{ cancelText }}</el-button>
+        <el-button :loading="confirmLoading" type="primary" @click="handleConfirm">
+          <span class="confirm-inner">
+            <img src="@/assets/knowledge-base/star.png" class="confirm-icon" />
+            {{ confirmText }}
+          </span>
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: "CustomDialog",
+  props: {
+    title: {
+      type: String,
+      default: ""
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    confirmLoading: {
+      type: Boolean,
+      default: false
+    },
+    width: {
+      type: String,
+      default: "600px"
+    },
+    footer: {
+      type: Boolean,
+      default: true
+    },
+    closeOnClickModal: {
+      type: Boolean,
+      default: false
+    },
+    closeOnPressEscape: {
+      type: Boolean,
+      default: true
+    },
+    showClose: {
+      type: Boolean,
+      default: true
+    },
+    destroyOnClose: {
+      type: Boolean,
+      default: true
+    },
+    customClass: {
+      type: String,
+      default: ""
+    },
+    cancelText: {
+      type: String,
+      default: "取消"
+    },
+    confirmText: {
+      type: String,
+      default: "确认保存"
+    }
+  },
+  data() {
+    return {
+      dialogVisible: this.visible
+    };
+  },
+  watch: {
+    visible(val) {
+      this.dialogVisible = val;
+    }
+  },
+  methods: {
+    handleClose() {
+      this.dialogVisible = false;
+      this.$emit("update:visible", false);
+      this.$emit("close");
+    },
+    handleOpen() {
+      this.$emit("open");
+    },
+    handleCancel() {
+      this.dialogVisible = false;
+      this.$emit("update:visible", false);
+      this.$emit("cancel");
+    },
+    handleConfirm() {
+      this.$emit("confirm");
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.custom-dialog {
+  ::v-deep .el-dialog {
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  ::v-deep .el-dialog__header {
+    padding: 16px 20px 12px;
+    background: linear-gradient(135deg, #e2eeff, #edeafe);
+    text-align: left;
+  }
+
+  ::v-deep .el-dialog__title {
+    font-size: 16px;
+    font-weight: 500;
+    color: #1a1a1a;
+  }
+
+  .dialog-title {
+    font-size: 18px;
+    display: inline-flex;
+    align-items: center;
+    > span {
+      line-height: 18px;
+      font-weight: 500;
+    }
+  }
+
+  .title-icon {
+    width: 24px;
+    height: 24px;
+    margin-right: 8px;
+  }
+
+  ::v-deep .el-dialog__headerbtn {
+    top: 12px;
+    right: 16px;
+    width: 32px;
+    height: 32px;
+    border: none;
+    border-radius: 50%;
+    background: #fff;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .el-dialog__close {
+      font-size: 18px;
+      color: #666;
+      position: static;
+      transform: none;
+    }
+
+    &:hover {
+      background: #fff;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
+
+      .el-dialog__close {
+        color: #333;
+      }
+    }
+  }
+
+  ::v-deep .el-dialog__body {
+    padding: 20px;
+  }
+
+  ::v-deep .el-dialog__footer {
+    padding: 12px 20px 16px;
+  }
+
+  .dialog-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+
+    .el-button {
+      padding: 10px 20px;
+      display: flex;
+      align-items: center;
+    }
+
+    .el-button--primary {
+      background: linear-gradient(to right, #4a7cfd, #8154fc);
+      border: none;
+
+      &:hover,
+      &:focus {
+        background: linear-gradient(to right, #4a7cfd, #8154fc);
+        opacity: 0.85;
+      }
+    }
+
+    .confirm-inner {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    .confirm-icon {
+      width: 16px;
+      height: 16px;
+      margin-right: 4px;
+    }
+  }
+}
+</style>

From fe0f7dcf7564c5330467d9aacdfc04b18e68abd6 Mon Sep 17 00:00:00 2001
From: zhuoqinglian <1035449612@qq.com>
Date: Tue, 9 Jun 2026 15:05:16 +0800
Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E5=88=86?=
 =?UTF-8?q?=E9=A1=B5=E7=BB=84=E4=BB=B6=E6=8A=BD=E7=A6=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/CustomPagination.vue       | 68 +++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 main/manager-web/src/components/CustomPagination.vue

diff --git a/main/manager-web/src/components/CustomPagination.vue b/main/manager-web/src/components/CustomPagination.vue
new file mode 100644
index 00000000..3e5ed7b5
--- /dev/null
+++ b/main/manager-web/src/components/CustomPagination.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="pagination-wrapper">
+    <el-pagination
+      :current-page="currentPage"
+      :page-size="pageSize"
+      :page-sizes="pageSizeOptions"
+      :total="total"
+      layout="sizes, prev, pager, next, total"
+      background
+      @size-change="handleSizeChange"
+      @current-change="handlePageChange"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Pagination',
+  props: {
+    total: {
+      type: Number,
+      default: 0
+    },
+    currentPage: {
+      type: Number,
+      default: 1
+    },
+    pageSize: {
+      type: Number,
+      default: 10
+    },
+    pageSizeOptions: {
+      type: Array,
+      default: () => [10, 20, 50, 100]
+    }
+  },
+  methods: {
+    handleSizeChange(val) {
+      this.$emit('size-change', val);
+    },
+    handlePageChange(page) {
+      this.$emit('page-change', page);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.pagination-wrapper {
+  margin-top: 20px;
+}
+::v-deep .el-pagination {
+  .btn-next,
+  .btn-prev,
+  .el-pager li {
+    background: transparent !important;
+    min-width: 36px !important;
+  }
+  .el-pager li:not(.disabled).active {
+    background: linear-gradient(135deg, #2a6dfe 0%, #6b8cff 50%, #2a6dfe 100%) !important;
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(45, 111, 254, 0.3);
+    color: #fff;
+    font-weight: 600;
+    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
+  }
+}
+</style>

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 5/5] =?UTF-8?q?update:=20=E7=9F=A5=E8=AF=86=E5=BA=93?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=A4=8D=E7=94=A8=E5=BC=B9=E7=AA=97=E3=80=81?=
 =?UTF-8?q?=E5=88=86=E9=A1=B5=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=90=8C=E6=AD=A5?=
 =?UTF-8?q?=E4=BF=AE=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;
+        }
+      }
     }
   }
 }