Merge pull request #3209 from xinnan-tech/update-theme

Update theme

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>

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>

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">
+  </CustomDialog>
-      <el-button @click="handleClose">{{ $t('knowledgeBaseDialog.cancel') }}</el-button>
-      <el-button type="primary" @click="handleSubmit">{{ $t('knowledgeBaseDialog.confirm') }}</el-button>
-    </div>
-  </el-dialog>
 </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;

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>

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,8 +1385,20 @@ 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',
 
+  // 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',

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,10 +1383,22 @@ 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...',
   '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',

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,8 +1385,20 @@ 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',
 
+  // 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',

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,8 +1385,20 @@ 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',
 
+  // 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ả',

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,9 +1383,19 @@ export default {
   'knowledgeFileUpload.testResult': '测试结果：',
   'knowledgeFileUpload.noRelatedSlices': '未找到相关切片',
   'knowledgeFileUpload.comprehensiveSimilarity': '综合相似度',
+  'knowledgeFileUpload.sourceDocument': '来源文档',
   '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': '全选',

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,8 +1385,20 @@ export default {
   'knowledgeFileUpload.comprehensiveSimilarity': '綜合相似度',
   'knowledgeFileUpload.content': '內容:',
   'knowledgeFileUpload.testQuestionRequired': '請輸入測試問題',
+  'knowledgeFileUpload.sourceDocument': '來源文檔',
+  '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': '取消全選',

main/manager-web/src/views/KnowledgeBaseItem.vue

@@ -0,0 +1,619 @@
+<template>
+  <div class="doc-section">
+    <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 }) }}</div>
+      </div>
+      <div class="doc-section-actions">
+        <el-input
+          :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">{{ $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="$t('knowledgeBaseManagement.loading')">
+      <div v-for="doc in documents" :key="doc.id" class="doc-card">
+        <div class="doc-card-top">
+          <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">{{ $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 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>
+            <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
+              v-if="doc.parseStatusCode === 3"
+              type="text"
+              @click.stop="$emit('view-slices', doc)"
+            >
+              {{ $t('knowledgeFileUpload.viewSlices') }}
+            </el-button>
+            <el-button
+              v-else
+              type="text"
+              :disabled="doc.parseStatusCode === 1"
+              :loading="doc.parsing"
+              @click.stop="handleParse(doc)"
+            >
+              {{ $t('knowledgeFileUpload.parse') }}
+            </el-button>
+            <el-button type="text" class="delete-btn" :loading="deleteLoadingMap[doc.id]" @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="$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'),
+  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',
+  components: { CustomPagination },
+  props: {
+    kb: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    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
+    }
+  },
+  methods: {
+    fetchDocuments() {
+      if (!this.kb || !this.kb.datasetId) return;
+      this.docLoading = true;
+      const params = {
+        page: this.currentPage,
+        page_size: this.pageSize,
+        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.total = data.data.total || 0;
+            this.fetchSliceCountsForDocuments();
+          } else {
+            this.$message.error(data?.msg || '获取文档列表失败');
+            this.documents = [];
+            this.total = 0;
+          }
+        },
+        (err) => {
+          this.docLoading = false;
+          if (err && err.data) {
+            this.$message.error(err.data.msg || err.msg || '获取文档列表失败');
+          } else {
+            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();
+    },
+
+    handleUpload() {
+      this.$emit('upload');
+    },
+
+    handleRetrievalTest() {
+      this.$emit('retrieval-test');
+    },
+
+    handleDelete(doc) {
+      if (!this.kb) return;
+      this.$confirm(
+        this.$t('knowledgeFileUpload.confirmDelete'),
+        this.$t('message.warning'),
+        {
+          confirmButtonText: this.$t('knowledgeBaseDialog.confirm'),
+          cancelButtonText: this.$t('knowledgeBaseDialog.cancel'),
+          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(() => {});
+    },
+
+    handleParse(doc) {
+      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);
+        doc.parseStatusCode = 1;
+        Api.knowledgeBase.parseDocument(
+          this.kb.datasetId,
+          doc.id,
+          ({ data }) => {
+            if (data && data.code === 0) {
+              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.$t('knowledgeFileUpload.parseFailed'));
+            }
+          },
+          (err) => {
+            this.$set(doc, 'parsing', false);
+            doc.parseStatusCode = 0;
+            this.$message.error(err?.data?.msg || this.$t('knowledgeFileUpload.parseFailed'));
+          }
+        );
+      }).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.$t('knowledgeFileUpload.parseSuccess')}`);
+                    this.fetchSliceCountForSingleDocument(doc);
+                  } else if (updated.parseStatusCode === 4) {
+                    this.$message.error(`「${doc.name}」${this.$t('knowledgeFileUpload.parseFailed')}`);
+                  }
+                  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);
+          }
+        },
+        () => {}
+      );
+    },
+
+    getFileIconSrc(fileName) {
+      if (!fileName) return require('@/assets/knowledge-base/default.png');
+      const ext = fileName.split('.').pop().toLowerCase();
+      return iconMap[ext] || require('@/assets/knowledge-base/default.png');
+    },
+
+    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 = 106.81;
+      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 '100%';
+      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 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) {
+      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: 10px;
+  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: 500;
+  color: #1f2a44;
+}
+
+.doc-section-count {
+  font-size: 14px;
+  color: #788ba8;
+}
+
+.doc-section-actions {
+  display: flex;
+  align-items: center;
+}
+
+.doc-search-input {
+  width: 200px;
+  margin-right: 10px;
+}
+
+/* ========== Document Grid ========== */
+.doc-grid {
+  padding: 10px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill,minmax(300px, 1fr));
+  gap: 16px 20px;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+
+.doc-card {
+  max-height: 120px;
+  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: 46px;
+  height: 46px;
+  border-radius: 10px;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+
+.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: 500;
+  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: 44px;
+  height: 44px;
+  position: relative;
+
+  svg {
+    width: 44px;
+    height: 44px;
+    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-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; }
+  }
+
+  .doc-slice-count {
+    font-size: 12px;
+    > b {
+      font-weight: bold;
+      font-size: 14px;
+    }
+  }
+}
+
+
+.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-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>