新增知识库上传文件的功能

llm-back/ruoyi-admin/src/main/resources/application.yml

@@ -7,7 +7,7 @@ cmc:
   # 版权年份
   copyrightYear: 2024
   # 文件路径 示例（ Windows配置D:/ruoyi/uploadPath，Linux配置 /home/ruoyi/uploadPath）
-  profile: /home/cmc/projects/cmc-llm
+  profile: D:/ruoyi/uploadPath
   # 获取ip地址开关
   addressEnabled: false
   # 验证码类型 math 数字计算 char 字符验证

llm-back/ruoyi-agent/src/main/java/com/ruoyi/agent/service/MilvusService.java

@@ -153,16 +153,26 @@ public class MilvusService {
     public List<String> listDocument(String collectionName, String fileType) {
         List<String> documentList = new ArrayList<>();
         loadCollectionName(collectionName);
-        QuerySimpleParam queryParam = QuerySimpleParam.newBuilder()
+        QuerySimpleParam queryParam = QuerySimpleParam.newBuilder()        
+                .withCollectionName(collectionName)
+                .withFilter("id > 0")
+                .withOutputFields(Arrays.asList("file_type", "file_name"))
+                .withLimit(16384L)
+                .build();
+        if (fileType != null && !fileType.equals(""))
+            queryParam = QuerySimpleParam.newBuilder()
                 .withCollectionName(collectionName)
                 .withFilter(String.format("file_type == \"%s\"", fileType))
                 .withOutputFields(Arrays.asList("file_type", "file_name"))
                 .withLimit(16384L)
                 .build();
         QueryResponse queryResults = milvusClient.query(queryParam).getData();
-        List<QueryResultsWrapper.RowRecord> rowRecordList = queryResults.getRowRecords();
-        for (QueryResultsWrapper.RowRecord rowRecord : rowRecordList) {
-            documentList.add(rowRecord.get("file_name").toString());
+        List<QueryResultsWrapper.RowRecord> rowRecordList = new ArrayList<>();
+        if (queryResults != null) {
+            rowRecordList = queryResults.getRowRecords();
+            for (QueryResultsWrapper.RowRecord rowRecord : rowRecordList) {
+                documentList.add(rowRecord.get("file_name").toString());
+            }
         }
         releaseCollectionName(collectionName);
         return documentList.stream().distinct().collect(Collectors.toList());
@@ -172,6 +182,7 @@ public class MilvusService {
      * 删除知识库文件
      */
     public void removeDocument(String collectionName, String fileName) {
+        loadCollectionName(collectionName);
         DeleteParam deleteParam = DeleteParam.newBuilder()
                 .withCollectionName(collectionName)
                 .withExpr(String.format("file_name == \"%s\"", fileName))

llm-ui/src/api/llm/knowLedge.js

@@ -0,0 +1,77 @@
+/*
+ * @Author: ysh
+ * @Date: 2025-06-30 09:56:10
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2025-07-03 10:47:54
+ */
+import request from '@/utils/request'
+
+// 查询知识库列表
+export function listKnowledge(query) {
+  return request({
+    url: '/llm/knowledge/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 新增知识库
+export function addKnowledge(collectionName, description) {
+  return request({
+    url: '/llm/knowledge/create',
+    method: 'post',
+    params: { collectionName, description }
+  })
+}
+
+// 修改知识库
+export function updateKnowledge(collectionName, newCollectionName) {
+  return request({
+    url: '/llm/knowledge/modify',
+    method: 'post',
+    params: { collectionName, newCollectionName }
+  })
+}
+
+// 删除知识库
+export function delKnowledge(collectionName) {
+  return request({
+    url: '/llm/knowledge/remove',
+    method: 'delete',
+    params: { collectionName }
+  })
+}
+
+// 插入知识库文件
+export function insertKnowledgeFile(file, collectionName) {
+  const formData = new FormData()
+  formData.append('file', file)
+  formData.append('collectionName', collectionName)
+  return request({
+    url: '/llm/knowledge/insertDocument',
+    method: 'post',
+    data: formData,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}
+
+// 查看知识库文件
+export function listKnowledgeDocument(collectionName, fileType) {
+  return request({
+    url: '/llm/knowledge/listDocument',
+    method: 'get',
+    params: { collectionName, fileType }
+  })
+}
+
+
+// 删除知识库文件
+export function deleteKnowledgeFile(fileName,collectionName) {
+  return request({
+    url: '/llm/knowledge/removeDocument',
+    method: 'delete',
+    params: { fileName, collectionName }
+  })
+}

llm-ui/src/views/llm/knowledge/index.vue

@@ -1,3 +1,867 @@
-<template></template>
-<script></script>
-<style></style>
+<template>
+  <div class="app-container">
+    <!-- 顶部搜索和操作栏 -->
+    <div class="top-toolbar">
+      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
+        <el-form-item label="知识库名称" prop="collectionName">
+          <el-input v-model="queryParams.collectionName" placeholder="请输入知识库名称" clearable @keyup.enter="handleQuery" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
+          <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+
+      <div class="toolbar-actions">
+        <el-button type="primary" plain :icon="Plus" @click="handleAdd" v-hasPermi="['llm:knowledge:add']">
+          新增知识库
+        </el-button>
+        <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+      </div>
+    </div>
+
+    <!-- 主要内容区域 -->
+    <div class="main-content">
+      <!-- 左侧知识库列表 -->
+      <div class="left-panel">
+        <div class="panel-header">
+          <h3>知识库列表</h3>
+          <span class="knowledge-count">{{ knowledgeList.length }} 个知识库</span>
+        </div>
+
+        <div class="knowledge-cards" v-loading="loading">
+          <div v-for="(item, index) in knowledgeList" :key="index" class="knowledge-card"
+            :class="{ 'active': selectedKnowledge?.collectionName === item.collectionName }"
+            @click="selectKnowledge(item)">
+            <div class="card-header">
+              <div class="card-title">
+                <el-icon class="folder-icon">
+                  <Folder />
+                </el-icon>
+                <span class="title-text">{{ item.collectionName }}</span>
+              </div>
+              <div class="card-actions">
+                <el-dropdown trigger="click" @command="handleCardAction">
+                  <el-button type="text" size="small">
+                    <el-icon>
+                      <MoreFilled />
+                    </el-icon>
+                  </el-button>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item :command="{ action: 'edit', data: item }" :icon="Edit">编辑</el-dropdown-item>
+                      <el-dropdown-item :command="{ action: 'upload', data: item }"
+                        :icon="Upload">上传文件</el-dropdown-item>
+                      <el-dropdown-item :command="{ action: 'delete', data: item }" :icon="Delete"
+                        divided>删除</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+              </div>
+            </div>
+
+            <div class="card-content">
+              <p class="description">{{ item.description || '暂无描述' }}</p>
+              <div class="meta-info">
+                <span class="create-time">{{ parseTime(item.createdTime, '{y}-{m}-{d}') }}</span>
+                <span class="file-count">{{ item.fileCount || 0 }} 个文件</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- 空状态 -->
+          <div v-if="knowledgeList.length === 0 && !loading" class="empty-state">
+            <el-icon class="empty-icon">
+              <FolderOpened />
+            </el-icon>
+            <p>暂无知识库</p>
+            <el-button type="primary" @click="handleAdd">创建第一个知识库</el-button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧文件列表 -->
+      <div class="right-panel">
+        <div class="panel-header">
+          <h3>文件列表</h3>
+          <div class="header-actions">
+            <el-button type="primary" :icon="Upload" @click="handleUpload(selectedKnowledge)"
+              :disabled="!selectedKnowledge" v-hasPermi="['llm:knowledge:upload']">
+              上传文件
+            </el-button>
+          </div>
+        </div>
+
+        <div class="file-content" v-loading="fileLoading">
+          <div v-if="selectedKnowledge" class="selected-knowledge">
+            <el-icon class="folder-icon">
+              <Folder />
+            </el-icon>
+            <span class="knowledge-name">{{ selectedKnowledge.collectionName }}</span>
+          </div>
+
+          <div v-if="!selectedKnowledge" class="empty-state">
+            <el-icon class="empty-icon">
+              <Document />
+            </el-icon>
+            <p>请选择一个知识库查看文件</p>
+          </div>
+
+          <div v-else-if="fileList.length === 0" class="empty-state">
+            <el-icon class="empty-icon">
+              <Document />
+            </el-icon>
+            <p>该知识库暂无文件</p>
+            <el-button type="primary" @click="handleUpload(selectedKnowledge)">上传文件</el-button>
+          </div>
+
+          <div v-else class="file-list">
+            <div v-for="(file, index) in fileList" :key="index" class="file-item">
+              <div class="file-info">
+                <el-icon class="file-icon">
+                  <Document />
+                </el-icon>
+                <div class="file-details">
+                  <div class="file-name">{{ file }}</div>
+                  <div class="file-meta">
+                    <span class="file-type">{{ getFileType(file) }}</span>
+                  </div>
+                </div>
+              </div>
+              <div class="file-actions">
+                <el-button type="danger" size="small" :icon="Delete" @click="handleDeleteFile(file)">
+                  删除
+                </el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 添加或修改知识库对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="knowledgeFormRef" :model="form" :rules="rules" label-width="120px">
+        <el-form-item label="知识库名称" prop="collectionName">
+          <el-input v-model="form.collectionName" placeholder="请输入知识库名称" :disabled="isModify" />
+        </el-form-item>
+        <el-form-item label="新知识库名称" prop="newCollectionName" v-if="isModify">
+          <el-input v-model="form.newCollectionName" placeholder="请输入新知识库名称" />
+        </el-form-item>
+        <el-form-item label="描述" prop="description" v-if="!isModify">
+          <el-input type="textarea" v-model="form.description" placeholder="请输入描述" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 上传文件对话框 -->
+    <el-dialog title="上传文件到知识库" v-model="uploadOpen" width="500px" append-to-body>
+      <el-form ref="uploadFormRef" :model="uploadForm" :rules="uploadRules" label-width="80px">
+        <el-form-item label="知识库" prop="collectionName">
+          <el-input v-model="uploadForm.collectionName" disabled />
+        </el-form-item>
+        <el-form-item label="选择文件" prop="file">
+          <el-upload ref="knowledgeUpload" :limit="1" accept=".doc,.docx,.pdf" :headers="upload.headers" :action="''"
+            :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess"
+            :auto-upload="false" drag :on-change="handleFileChange">
+            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+            <template #tip>
+              <div class="el-upload__tip text-center">
+                <div class="el-upload__tip">
+                  <el-checkbox v-model="upload.updateSupport" />
+                  是否更新已经存在的文件数据
+                </div>
+                <span>支持 .doc、.docx、.pdf 格式文件</span>
+              </div>
+            </template>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitUpload">确 定</el-button>
+          <el-button @click="cancelUpload">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, getCurrentInstance, onMounted, nextTick, watch, computed } from 'vue'
+import { Search, Refresh, Plus, Edit, Delete, Upload, UploadFilled, Folder, MoreFilled, FolderOpened, Document } from '@element-plus/icons-vue'
+import { listKnowledge, addKnowledge, updateKnowledge, delKnowledge, insertKnowledgeFile, listKnowledgeDocument, deleteKnowledgeFile } from "@/api/llm/knowLedge";
+import { getToken } from "@/utils/auth";
+
+const { proxy } = getCurrentInstance();
+
+const knowledgeList = ref([]);
+const open = ref(false);
+const uploadOpen = ref(false);
+const loading = ref(true);
+const fileLoading = ref(false);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+const isModify = ref(false);
+const selectedKnowledge = ref(null);
+const fileList = ref([]);
+
+// 表单数据
+const form = reactive({
+  collectionName: '',
+  description: '',
+  newCollectionName: ''
+});
+
+// 查询参数
+const queryParams = reactive({
+  collectionName: ''
+});
+
+// 表单验证规则
+const rules = reactive({
+  collectionName: [
+    { required: true, message: "知识库名称不能为空", trigger: "blur" }
+  ]
+});
+
+// 上传配置
+const upload = reactive({
+  file: null,
+  fileList: [],
+  // 是否禁用上传
+  isUploading: false,
+  // 是否更新已经存在的文件数据
+  updateSupport: false,
+  // 设置上传的请求头部
+  headers: { Authorization: "Bearer " + getToken() }
+});
+
+// 上传表单
+const uploadForm = reactive({
+  collectionName: '',
+  file: null
+});
+
+// 上传验证规则
+const uploadRules = reactive({
+  file: [
+    { required: true, message: "请选择要上传的文件", trigger: "blur" }
+  ]
+});
+
+/** 查询知识库列表 */
+function getList() {
+  loading.value = true;
+  listKnowledge().then(response => {
+    // 确保返回的数据是数组格式
+    if (Array.isArray(response.data)) {
+      knowledgeList.value = response.data;
+    } else {
+      knowledgeList.value = [];
+    }
+    loading.value = false;
+  }).catch(error => {
+    loading.value = false;
+    proxy.$modal.msgError("获取知识库列表失败：" + error.message);
+  });
+}
+
+/** 选择知识库 */
+function selectKnowledge(knowledge) {
+  selectedKnowledge.value = knowledge;
+  fileLoading.value = true;
+  listKnowledgeDocument(knowledge.collectionName).then(response => {
+    fileList.value = response.data;
+    fileLoading.value = false;
+  }).catch(error => {
+    fileLoading.value = false;
+    proxy.$modal.msgError("获取文件列表失败：" + error.message);
+  });
+}
+
+
+
+/** 处理卡片操作 */
+function handleCardAction(command) {
+  const { action, data } = command;
+  switch (action) {
+    case 'edit':
+      handleUpdate(data);
+      break;
+    case 'upload':
+      handleUpload(data);
+      break;
+    case 'delete':
+      handleDelete(data);
+      break;
+  }
+}
+
+/** 删除文件 */
+function handleDeleteFile(file) {
+  proxy.$modal.confirm(`是否确认删除文件"${file}"？`).then(() => {
+    deleteKnowledgeFile(file, selectedKnowledge.value.collectionName).then(response => {
+      proxy.$modal.msgSuccess("删除成功");
+      // 刷新文件列表
+      if (selectedKnowledge.value) {
+        fileLoading.value = true;
+        listKnowledgeDocument(selectedKnowledge.value.collectionName).then(response => {
+          fileList.value = response.data;
+          fileLoading.value = false;
+        }).catch(error => {
+          fileLoading.value = false;
+          proxy.$modal.msgError("刷新文件列表失败：" + error.message);
+        });
+      }
+    }).catch(error => {
+      proxy.$modal.msgError("删除失败：" + error.message);
+    });
+  }).catch(() => { });
+}
+
+/** 获取文件类型 */
+function getFileType(fileName) {
+  if (!fileName) return '未知';
+  const extension = fileName.split('.').pop()?.toLowerCase();
+  switch (extension) {
+    case 'pdf':
+      return 'PDF文档';
+    case 'doc':
+      return 'Word文档';
+    case 'docx':
+      return 'Word文档';
+    default:
+      return '文档';
+  }
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false;
+  reset();
+}
+
+// 表单重置
+function reset() {
+  form.collectionName = '';
+  form.description = '';
+  form.newCollectionName = '';
+  // 强制更新DOM
+  nextTick(() => {
+    proxy.resetForm("form");
+  });
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryForm");
+  handleQuery();
+}
+
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  open.value = true;
+  title.value = "添加知识库";
+  isModify.value = false;
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const collectionName = row?.collectionName || ids.value[0];
+  if (!collectionName) {
+    proxy.$modal.msgWarning("请先选择要修改的知识库");
+    return;
+  }
+  form.collectionName = collectionName;
+  form.newCollectionName = '';
+  isModify.value = true;
+  open.value = true;
+  title.value = "修改知识库";
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["knowledgeFormRef"].validate(valid => {
+    if (valid) {
+      if (form.newCollectionName) {
+        // 修改操作
+        updateKnowledge(form.collectionName, form.newCollectionName).then(response => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        }).catch(error => {
+          proxy.$modal.msgError("修改失败：" + error.message);
+        });
+      } else {
+        // 新增操作
+        addKnowledge(form.collectionName, form.description).then(response => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        }).catch(error => {
+          proxy.$modal.msgError("新增失败：" + error.message);
+        });
+      }
+    }
+  });
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const collectionNames = row?.collectionName || ids.value;
+  if (!collectionNames) {
+    proxy.$modal.msgWarning("请先选择要删除的知识库");
+    return;
+  }
+  proxy.$modal.confirm('是否确认删除知识库名称为"' + collectionNames + '"的数据项？').then(function () {
+    return delKnowledge(collectionNames);
+  }).then(() => {
+    getList();
+    // 如果删除的是当前选中的知识库，清空选择
+    if (selectedKnowledge.value?.collectionName === collectionNames) {
+      selectedKnowledge.value = null;
+      fileList.value = [];
+    }
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch((error) => {
+    if (error !== 'cancel') {
+      proxy.$modal.msgError("删除失败：" + error.message);
+    }
+  });
+}
+
+/** 上传文件按钮操作 */
+function handleUpload(row) {
+  const collectionName = row?.collectionName;
+  if (!collectionName) {
+    proxy.$modal.msgWarning("请先选择要上传文件的知识库");
+    return;
+  }
+  uploadForm.collectionName = collectionName;
+  uploadOpen.value = true;
+}
+
+// 文件上传中处理
+function handleFileUploadProgress(event, file, fileList) {
+  upload.isUploading = true;
+}
+
+function handleFileChange(file, fileList) {
+  upload.file = file.raw;
+}
+
+// 文件上传成功处理
+function handleFileSuccess(response, file, fileList) {
+  upload.isUploading = false;
+  proxy.$refs.upload.clearFiles();
+  proxy.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
+  uploadOpen.value = false;
+  getList();
+  // 如果当前有选中的知识库，刷新文件列表
+  if (selectedKnowledge.value) {
+    fileLoading.value = true;
+    listKnowledgeDocument(selectedKnowledge.value.collectionName).then(response => {
+      fileList.value = response.data;
+      fileLoading.value = false;
+    }).catch(error => {
+      fileLoading.value = false;
+      proxy.$modal.msgError("刷新文件列表失败：" + error.message);
+    });
+  }
+}
+
+// 提交上传
+function submitUpload() {
+  insertKnowledgeFile(upload.file, uploadForm.collectionName).then(response => {
+    proxy.$modal.msgSuccess("上传成功");
+    uploadOpen.value = false;
+    proxy.$refs.knowledgeUpload.clearFiles();
+    getList();
+  }).catch(error => {
+    proxy.$modal.msgError("上传失败：" + error.message);
+  });
+}
+
+// 取消上传
+function cancelUpload() {
+  uploadOpen.value = false;
+  proxy.$refs.knowledgeUpload.clearFiles();
+}
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: #f5f7fa;
+}
+
+.top-toolbar {
+  background: white;
+  padding: 16px 24px;
+  border-bottom: 1px solid #e4e7ed;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+
+  .toolbar-actions {
+    margin-top: 12px;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+}
+
+.main-content {
+  flex: 1;
+  display: flex;
+  gap: 16px;
+  padding: 16px;
+  overflow: hidden;
+}
+
+.left-panel {
+  width: 400px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.right-panel {
+  flex: 1;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.panel-header {
+  padding: 20px 24px;
+  border-bottom: 1px solid #e4e7ed;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #fafbfc;
+
+  h3 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: #303133;
+  }
+
+  .knowledge-count {
+    font-size: 12px;
+    color: #909399;
+    background: #f0f2f5;
+    padding: 4px 8px;
+    border-radius: 4px;
+  }
+
+  .header-actions {
+    display: flex;
+    gap: 8px;
+  }
+}
+
+.knowledge-cards {
+  flex: 1;
+  padding: 16px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.knowledge-card {
+  background: white;
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+  padding: 16px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+
+  &:hover {
+    border-color: #409eff;
+    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
+    transform: translateY(-2px);
+  }
+
+  &.active {
+    border-color: #409eff;
+    background: #f0f9ff;
+    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
+  }
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 12px;
+
+    .card-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex: 1;
+
+      .folder-icon {
+        color: #409eff;
+        font-size: 18px;
+      }
+
+      .title-text {
+        font-weight: 600;
+        color: #303133;
+        font-size: 14px;
+        line-height: 1.4;
+      }
+    }
+
+    .card-actions {
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    }
+  }
+
+  &:hover .card-actions {
+    opacity: 1;
+  }
+
+  .card-content {
+    .description {
+      color: #606266;
+      font-size: 13px;
+      line-height: 1.5;
+      margin: 0 0 12px 0;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+
+    .meta-info {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 12px;
+      color: #909399;
+
+      .create-time {
+        background: #f0f2f5;
+        padding: 2px 6px;
+        border-radius: 3px;
+      }
+
+      .file-count {
+        background: #e1f3d8;
+        color: #67c23a;
+        padding: 2px 6px;
+        border-radius: 3px;
+      }
+    }
+  }
+}
+
+.file-content {
+  flex: 1;
+  padding: 20px;
+  overflow-y: auto;
+}
+
+.selected-knowledge {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  background: #f0f9ff;
+  border-radius: 6px;
+  margin-bottom: 20px;
+
+  .folder-icon {
+    color: #409eff;
+    font-size: 16px;
+  }
+
+  .knowledge-name {
+    font-weight: 600;
+    color: #303133;
+  }
+}
+
+.file-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.file-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  background: #fafbfc;
+  border: 1px solid #e4e7ed;
+  border-radius: 6px;
+  transition: all 0.3s ease;
+
+  &:hover {
+    border-color: #409eff;
+    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
+  }
+
+  .file-info {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex: 1;
+
+    .file-icon {
+      color: #409eff;
+      font-size: 20px;
+    }
+
+    .file-details {
+      .file-name {
+        font-weight: 500;
+        color: #303133;
+        margin-bottom: 4px;
+      }
+
+      .file-meta {
+        display: flex;
+        gap: 12px;
+        font-size: 12px;
+        color: #909399;
+
+        .file-type {
+          background: #e1f3d8;
+          color: #67c23a;
+          padding: 2px 6px;
+          border-radius: 3px;
+        }
+      }
+    }
+  }
+
+  .file-actions {
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+
+  &:hover .file-actions {
+    opacity: 1;
+  }
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  text-align: center;
+  color: #909399;
+
+  .empty-icon {
+    font-size: 48px;
+    margin-bottom: 16px;
+    opacity: 0.5;
+  }
+
+  p {
+    margin: 0 0 16px 0;
+    font-size: 14px;
+  }
+}
+
+.dialog-footer {
+  text-align: right;
+}
+
+.el-upload__tip {
+  font-size: 12px;
+  color: #606266;
+  margin-top: 7px;
+}
+
+:deep(.el-upload-dragger) {
+  width: 100%;
+}
+
+:deep(.el-upload__text) {
+  margin: 10px 0 16px;
+  color: #606266;
+  font-size: 14px;
+}
+
+:deep(.el-upload__tip) {
+  font-size: 12px;
+  color: #606266;
+  margin-top: 7px;
+}
+
+// 响应式设计
+@media (max-width: 1200px) {
+  .main-content {
+    flex-direction: column;
+  }
+
+  .left-panel {
+    width: 100%;
+    height: 300px;
+  }
+}
+
+@media (max-width: 768px) {
+  .top-toolbar {
+    padding: 12px 16px;
+  }
+
+  .main-content {
+    padding: 12px;
+    gap: 12px;
+  }
+
+  .panel-header {
+    padding: 16px 20px;
+  }
+
+  .knowledge-cards {
+    padding: 12px;
+  }
+
+  .file-content {
+    padding: 16px;
+  }
+}
+</style>