From a339757596181cf1ca29e5ab2d33fbee26af4646 Mon Sep 17 00:00:00 2001
From: liuguancen <liuguancen@inspur.com>
Date: Thu, 2 Apr 2026 12:01:27 +0800
Subject: [PATCH] =?UTF-8?q?[=E5=89=8D=E7=AB=AF]=20=E7=A0=94=E8=AF=BB?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=E6=94=B9=E9=80=A0=E4=B8=BA=E4=B8=89=E6=A0=8F?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=EF=BC=9A=E6=96=87=E4=BB=B6=E6=A0=91+?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88+=E9=97=AE=E7=AD=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 chat_web_front/src/App.vue                    |    2 +-
 .../src/components/Introduction.vue           |   37 +-
 chat_web_front/src/components/Literatures.vue |   21 +-
 .../src/components/ReadingCreate.vue          |   38 +-
 chat_web_front/src/router/index.ts            |   10 -
 .../src/views/reading/fileDetail.vue          |  883 ----------
 chat_web_front/src/views/reading/fileList.vue |  766 --------
 chat_web_front/src/views/reading/index.vue    | 1540 ++++++++++++-----
 8 files changed, 1138 insertions(+), 2159 deletions(-)
 delete mode 100644 chat_web_front/src/views/reading/fileDetail.vue
 delete mode 100644 chat_web_front/src/views/reading/fileList.vue

diff --git a/chat_web_front/src/App.vue b/chat_web_front/src/App.vue
index 51e6122..498f295 100644
--- a/chat_web_front/src/App.vue
+++ b/chat_web_front/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="content">
-    <Operates v-show="url != '/login' && url != '/writing/edit'&& url != '/knowledgeBase/fileDetail'" />
+    <Operates v-show="url != '/login' && url != '/writing/edit'" />
     <RouterView />
   </div>
 </template>
diff --git a/chat_web_front/src/components/Introduction.vue b/chat_web_front/src/components/Introduction.vue
index 6dcad70..7d04a24 100644
--- a/chat_web_front/src/components/Introduction.vue
+++ b/chat_web_front/src/components/Introduction.vue
@@ -59,11 +59,11 @@
 import {copyToClip} from "@/utils";
 import {ElMessage} from "element-plus";
 import {fileGuidInfo} from "@/api";
-import {onMounted, ref} from "vue";
+import {computed, inject, ref, type Ref} from "vue";
 import MarkdownIt from "markdown-it";
 import {transforMd} from "@/utils/markdown";
 
-const state=history.state;
+const selectedFile = inject('selectedFile') as Ref<any>;
 
 const emits=defineEmits(["refreshAbs","refreshCon"]);
 const mardown=new MarkdownIt();
@@ -73,18 +73,29 @@ const refreshAbs=()=>{
 const refreshCon=()=>{
   emits('refreshCon');
 }
-const historyParams=history.state;
-const articleAbstract=ref(historyParams.articleAbstract);
-const articleKeywords=ref(historyParams.articleKeywords);
-const articleParagraph=ref(historyParams.articleParagraph);
 
-//总结提炼
-onMounted(async () => {
-  if(articleKeywords.value&&(articleKeywords.value.indexOf('关键词：')>-1||articleKeywords.value.indexOf('关键词:')>-1)){
-    articleKeywords.value=articleKeywords.value.substring(articleKeywords.value.indexOf('关键词：')+4,articleKeywords.value.length);
-    articleKeywords.value=articleKeywords.value.substring(articleKeywords.value.indexOf('关键词:')+4,articleKeywords.value.length);
+const articleAbstract=ref('');
+const articleKeywords=ref('');
+const articleParagraph=ref('');
+
+// 监听选中文件变化，更新导读内容
+import {watch} from "vue";
+watch(() => selectedFile.value, (newFile) => {
+  if (newFile) {
+    articleAbstract.value = newFile.articleAbstract || '';
+    let kw = newFile.articleKeywords || '';
+    if (kw && (kw.indexOf('关键词：') > -1 || kw.indexOf('关键词:') > -1)) {
+      kw = kw.substring(kw.indexOf('关键词：') + 4, kw.length);
+      kw = kw.substring(kw.indexOf('关键词:') + 4, kw.length);
+    }
+    articleKeywords.value = kw;
+    articleParagraph.value = newFile.articleParagraph || '';
+  } else {
+    articleAbstract.value = '';
+    articleKeywords.value = '';
+    articleParagraph.value = '';
   }
-})
+}, {immediate: true});
 const copyText=(text)=>{
   copyToClip(text);
   ElMessage.success("复制成功");
@@ -95,7 +106,7 @@ const refreshGuide=async (type:string)=>{
     let param = {
       type: type,
       context: fileBox.innerText,
-      fileId: historyParams.fileId,
+      fileId: selectedFile.value?.fileId,
     }
     if(type==='6'){
       articleAbstract.value=''
diff --git a/chat_web_front/src/components/Literatures.vue b/chat_web_front/src/components/Literatures.vue
index a087468..2a095a9 100644
--- a/chat_web_front/src/components/Literatures.vue
+++ b/chat_web_front/src/components/Literatures.vue
@@ -27,9 +27,9 @@
 
 <script setup lang="ts">
 import {getPaper} from "@/api";
-import {onMounted, ref} from "vue";
+import {inject, onMounted, ref, watch, type Ref} from "vue";
 
-const historyParams=history.state;
+const selectedFile = inject('selectedFile') as Ref<any>;
 
 type Literature = {
   doc_id: string,
@@ -53,9 +53,9 @@ const showNoData = ref(false);
 const getLiteratureList = async () => {
   try {
     let res = await  getPaper({
-      fileName: historyParams.fileName,
-      keywords: historyParams.articleKeywords,
-      id: historyParams.fileId,
+      fileName: selectedFile.value?.fileName,
+      keywords: selectedFile.value?.articleKeywords,
+      id: selectedFile.value?.fileId,
       retry: 0
     })
     if (res.code === 200 && res.data && res.data.articles && res.data.articles.length > 0) {
@@ -147,8 +147,17 @@ const publishDateFormat = (articles: Literature[]) => {
   })
 }
 
+// 监听文件切换，重新加载文献
+watch(() => selectedFile.value?.fileId, () => {
+  if (selectedFile.value?.fileId) {
+    getLiteratureList();
+  }
+});
+
 onMounted(() => {
-  getLiteratureList();
+  if (selectedFile.value?.fileId) {
+    getLiteratureList();
+  }
 })
 </script>
 
diff --git a/chat_web_front/src/components/ReadingCreate.vue b/chat_web_front/src/components/ReadingCreate.vue
index f5a6c12..ed89db3 100644
--- a/chat_web_front/src/components/ReadingCreate.vue
+++ b/chat_web_front/src/components/ReadingCreate.vue
@@ -47,7 +47,7 @@
 </template>
 
 <script setup lang='ts'>
-import {inject, onMounted, reactive, ref} from "vue";
+import {inject, onMounted, reactive, ref, watch, type Ref} from "vue";
 import {
   deleteChatMessageById,
   delHistoryChatById,
@@ -62,6 +62,9 @@ import ReadingCreateMessage from "@/components/ReadingCreateMessage.vue";
 import {withLoading} from "@/utils/loading";
 import {ElMessage} from "element-plus";
 import {debounce} from "@/utils";
+
+const selectedFile = inject('selectedFile') as Ref<any>;
+
 // 引用内容
 const quoteMsg = inject("quoteMsg");
 const updateQuoteMsg = inject("updateQuoteMsg");
@@ -79,7 +82,6 @@ const sendStatus = ref(false);
 const chatStatus = ref(false);
 const chatNumber = ref(0);
 const chatId = ref('');
-const historyParam = history.state;
 const conversationId = ref('');
 const chatInfo = reactive([]);
 let controller = null;
@@ -143,7 +145,7 @@ const getFetchChatAPI = async (prompt) => {
   const chatData = {
     prompt,
     type: 99,
-    fileId: historyParam.fileId
+    fileId: selectedFile.value?.fileId
   };
   try {
     const fetchChatAPIData = await fetchChatAPI(chatData);
@@ -196,10 +198,10 @@ const getFetchChatAPIProcess = async (type: string) => {
         headers: headers,
         signal: controller.signal,
         body: JSON.stringify({
-          fileNames: [historyParam.embeddingId],
+          fileNames: [selectedFile.value?.embeddingId],
           conversationId: conversationId.value,
           promptName: "default",
-          knowledgeBaseIdList: [historyParam.folderId],
+          knowledgeBaseIdList: [selectedFile.value?.folderId],
           chatType: type,
           quote: quoteMsg.value
         }),
@@ -313,15 +315,21 @@ const autoPositionToBottom = () => {
   element.scrollTop = element.scrollHeight + 55;
 }
 
-onMounted(async () => {
-  //请求文件对话的dataId
+const loadChatHistory = async () => {
+  // 重置对话状态
+  chatInfo.length = 0;
+  chatId.value = '';
+  firstChat.value = true;
+  chatNumber.value = 0;
+  conversationId.value = '';
+
+  if (!selectedFile.value?.fileId) return;
+
   try {
-    let hisResponse = await listFileChatHistory(historyParam.fileId);
-    //根据dataId请求获取历史记录
+    let hisResponse = await listFileChatHistory(selectedFile.value.fileId);
     if (hisResponse.code == 200 && hisResponse.data) {
       chatNumber.value = hisResponse.data;
       firstChat.value = false;
-      //请求文件对话的dataId
       let historyList = await listChatMessage({
         chatNumber: chatNumber.value,
         fileType: 1
@@ -358,9 +366,17 @@ onMounted(async () => {
       }
     }
   } catch (error: any) {
-    ElMessage.error(error && error.message ? error.message : '未知错误');
+    // 新文件没有历史记录，不报错
   }
+};
 
+// 监听文件切换，重新加载对话历史
+watch(() => selectedFile.value?.fileId, () => {
+  loadChatHistory();
+});
+
+onMounted(async () => {
+  await loadChatHistory();
   handleReadingMessageContentScroll();
 })
 let messageInstance = null;
diff --git a/chat_web_front/src/router/index.ts b/chat_web_front/src/router/index.ts
index c901cf6..9bc8670 100644
--- a/chat_web_front/src/router/index.ts
+++ b/chat_web_front/src/router/index.ts
@@ -34,16 +34,6 @@ const routes: RouteRecordRaw[] = [
     name: 'KnowledgeBase',
     component: () => import('@/views/reading/index.vue'),
   },
-  {
-    path: '/knowledgeBase/fileList',
-    name: 'FileList',
-    component: () => import('@/views/reading/fileList.vue'),
-  },
-  {
-    path: '/knowledgeBase/fileDetail',
-    name: 'FileDetail',
-    component: () => import('@/views/reading/fileDetail.vue'),
-  },
   {
     path: '/applications',
     name: 'Application',
diff --git a/chat_web_front/src/views/reading/fileDetail.vue b/chat_web_front/src/views/reading/fileDetail.vue
deleted file mode 100644
index 61e11b1..0000000
--- a/chat_web_front/src/views/reading/fileDetail.vue
+++ /dev/null
@@ -1,883 +0,0 @@
-<template>
-  <div class="body">
-    <div class="header">
-      <img @click="goback" src="@/assets/images/writing/back.png" alt="">
-      <div class="title" v-text="fileName"></div>
-    </div>
-    <div class="file-content-container">
-      <div class="file-content" ref="fileContent" id="file-content">
-        <div class="view-md" id="file-html-content"  v-html="docHtml" ></div><!--@click="handleAnchorClick"-->
-
-        <div id="note-content" :title="noteContent" class="file-note"></div>
-      </div>
-      <div class="doc-right">
-        <ReadingBox ref="readingBox"/>
-      </div>
-    </div>
-  </div>
-
-  <div class="click-bar-button" id="shortMenuDom" ref="shortMenuDom" v-show="shortMenuShow">
-    <template v-for="(item, index) in contentMenuList" :key="index">
-      <div class="menu-name" @click="fileContentMenu(index)">{{ item }}</div>
-      <div class="vertical-line" v-if="index < contentMenuList.length - 1"></div>
-    </template>
-  </div>
-
-  <!-- 添加笔记弹框 -->
-  <el-dialog v-model="showAddNoteDialog" class="add-note-dialog" title="写下你的想法吧"
-             width="715" style="padding: 0; box-shadow: 0px 0px 8px 1px rgba(180,189,221,0.56); border-radius: 16px;"
-             :close-on-click-modal="false" :modal-append-to-body="false" :close-on-press-escape="false"
-             @open="openAddNoteDialog">
-    <el-input ref="noteMsgRef" v-model="noteMsg" type="textarea" :rows="10" placeholder="请输入笔记内容"/>
-    <template #footer>
-      <div class="dialog-footer" style="text-align: center;">
-        <el-button type="primary" @click="submitNote()">
-          发表
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<script lang="ts" setup>
-import {nextTick, onBeforeUnmount, onMounted, provide, reactive, ref,getCurrentInstance} from 'vue';
-
-import ReadingBox from "@/components/ReadingBox.vue";
-import {addFileNote, getFileContent} from "@/api";
-import MarkdownIt from "markdown-it";
-import {copyToClip, escapeRegExp, getGlobalSelectionPosition} from "@/utils";
-import {withLoading} from "@/utils/loading";
-import {ElMessage} from "element-plus";
-import {transforMd} from "@/utils/markdown";
-import Mark from "mark.js";
-
-const readingBox = ref(null);
-const docxFlow = ref<any>(null)
-const pdfFlow = ref<any>(null)
-const historyParams = history.state;
-const fileContent = ref(null);
-const shortMenuDom = ref(null);
-const shortMenuShow = ref(false);
-const selectText = ref('');
-
-
-const docHtml = ref('');
-
-const fileName = historyParams.fileName;
-
-const suffix = fileName.slice(fileName.lastIndexOf('.') + 1);
-
-const goback = () => {
-  history.back();
-}
-
-const contentMenuList = ['引用', '复制', '名词解释', '添加笔记','翻译'];
-
-// 引用内容
-const quoteMsg = ref<string>('');
-provide('quoteMsg', quoteMsg);
-provide('updateQuoteMsg', (newValue) => {
-  quoteMsg.value = newValue;
-});
-
-const fileContentMenu = (index) => {
-  disShowShortMenu();
-  if (index === 0) {
-    // 引用内容
-    quoteMsg.value = selectText.value;
-    if (quoteMsg.value && quoteMsg.value.length > 1000) {
-      quoteMsg.value.slice(0, 1000);
-    }
-    readingBox.value.changeHead(2);
-    return;
-  }
-  if (index === 1) {
-    //复制内容
-    copyToClip(selectText.value);
-    ElMessage.success("复制成功");
-  }
-  if (index === 2) {
-    //名词解释
-    let sendText = "我想请你解释一下这个词语的含义：" + selectText.value;
-    if (readingBox.value) {
-      readingBox.value.changeHead(2);
-      readingBox.value.readingBoxSend(sendText, '1');
-    }
-  }
-  if (index === 3) {
-    // 添加笔记
-    readingBox.value.changeHead(3);
-    showAddNoteDialog.value = true;
-  }
-  if (index === 4) {
-    let sendText = selectText.value;
-    // 添加笔记
-    readingBox.value.changeHead(4);
-    readingBox.value.translateQuery(sendText);
-  }
-}
-
-/**
- * 隐藏
- */
-const disShowShortMenu = () => {
-  shortMenuShow.value = false;
-}
-
-/**
- * 获取文件html格式的内容
- */
-const fileNote = reactive({
-  notes: []
-});
-const noteContent = ref('');
-provide('fileNote', fileNote);
-
-// LaTeX 公式正则表达式
-
-const pattern = /(\$\$.*?\$\$|\$.*?\$)/g;
-
-
-/**
- * 获取文件内容
- */
-const getFileHtmlContent = async () => {
-  let offsets = [];
-  try {
-    let res = await withLoading(getFileContent)({
-      fileId: historyParams.fileId,
-      embeddingId: historyParams.embeddingId,
-      knowledgeBaseId: historyParams.folderId
-    });
-    if (res && res.code === 200 && res.data && res.data.content) {
-      let content = res.data.content;
-      // 处理公式
-      content = content.replace(pattern, (match, captureGroup, offset, originalString) => {
-        offsets.push(offset);
-        return transforMd(match);
-      });
-      docHtml.value = content.replace(/<p>(.*?<span class="katex">.*?<\/span>.*?)<\/p>/g, '$1');
-      fileNote.notes = res.data.notes;
-    } else {
-      ElMessage.error('文件内容获取失败');
-    }
-  } catch (error) {
-    ElMessage.error(error && error.message ? error.message : '未知错误');
-    console.log(error);
-  }
-  // 给公式标签加id
-  try {
-    await nextTick();
-    handelLaTeXElements(offsets);
-    handelCommentElements();
-  } catch (err) {
-    console.error(err);
-  }
-}
-
-// 给LaTeX公式标签加id
-const handelLaTeXElements = (offsets) => {
-  let katexElements = document.querySelectorAll('span[class="katex"]');
-  for (let i = 0; i < katexElements.length; i++) {
-    katexElements[i].setAttribute('id', 'katex-'+ offsets[i]);
-  }
-}
-// 给批注的a标签添加点击事件
-const handelCommentElements = () => {
-  document.querySelectorAll('a[href^="#comment-"]').forEach(element => {
-    let targetId = element.getAttribute('href');
-    element.onclick = function (e) {
-      e.preventDefault();
-
-      const targetElement = document.querySelector(targetId);
-      if (targetElement) {
-        targetElement.scrollIntoView({ behavior: 'smooth' });
-      }
-    }
-  })
-}
-
-// 笔记
-const showAddNoteDialog = ref(false);
-const noteMsg = ref('');
-const noteMsgRef = ref(null);
-type NoteParam = {
-  id:string,
-  fileId: number,
-  pstartId: string,
-  pendId: string,
-  wordContent: string,
-  startIndex: number,
-  endIndex: number,
-  noteContent: string
-}
-type PositionInfo = {
-  start: number,
-  end: number,
-  parentStart: string | null,
-  parentEnd: string | null
-}
-const noteParam = ref<NoteParam>({
-  id: '',
-  fileId: 0,
-  pstartId: '',
-  pendId: '',
-  wordContent: '',
-  startIndex: 0,
-  endIndex: 0,
-  noteContent: ''
-});
-provide('noteParam', noteParam);
-const positionInfo = ref<PositionInfo>({
-  start: -1,
-  end: -1,
-  parentStart: '',
-  parentEnd: ''
-})
-const activeNoteIndex = ref(-1);
-provide('activeNoteIndex', activeNoteIndex);
-provide('highlightContentFlag', (note: any, newIndex: number) => {
-  activeNoteIndex.value = newIndex;
-  // 显示笔记
-  showFileNote(note, true);
-});
-// 显示笔记的方式，mouseover | click
-const showFileNoteEvent = ref('');
-/**
- * 打开添加笔记弹框的监听钩子方法
- */
-const openAddNoteDialog = async () => {
-  await nextTick();
-  if (noteMsgRef.value) {
-    noteMsgRef.value.focus();
-  }
-}
-/**
- * 发表笔记
- */
-const submitNote = async () => {
-  if(noteParam.value.id){
-    noteParam.value.noteContent = noteMsg.value;
-    try {
-      let res = await withLoading(addFileNote)(noteParam.value);
-      if (res.code == 200) {
-        ElMessage.success('笔记修改成功');
-        showAddNoteDialog.value = false;
-        noteMsg.value = '';
-        await updateFileContent();
-      } else {
-        ElMessage.error('笔记修改失败');
-      }
-    } catch (error) {
-      ElMessage.error(error && error.message ? error.message : '未知错误');
-    }
-  } else {
-    noteParam.value.fileId = historyParams.fileId;
-    noteParam.value.pstartId = positionInfo.value.parentStart ? positionInfo.value.parentStart : '';
-    noteParam.value.pendId = positionInfo.value.parentEnd ? positionInfo.value.parentEnd : '';
-    noteParam.value.wordContent = selectText.value;
-    noteParam.value.startIndex = positionInfo.value.start;
-    noteParam.value.endIndex = positionInfo.value.end;
-    noteParam.value.noteContent = noteMsg.value;
-
-    try {
-      let res = await withLoading(addFileNote)(noteParam.value);
-      if (res.code == 200) {
-        ElMessage.success('笔记添加成功');
-        showAddNoteDialog.value = false;
-        noteMsg.value = '';
-        await updateFileContent();
-      } else {
-        ElMessage.error('笔记添加失败');
-      }
-    } catch (error) {
-      ElMessage.error(error && error.message ? error.message : '未知错误');
-    }
-  }
-
-}
-/**
- * 更新文章内容
- */
-const updateFileContent = async () => {
-  await getFileHtmlContent();
-  handelNoteFlagMouseEvent();
-}
-provide('updateFileContent', updateFileContent);
-/**
- * 隐藏笔记效果
- */
-const displayFileNote = () => {
-  // 隐藏笔记弹框
-  const noteElements = document.querySelectorAll('span[id^="note-"]');
-  noteElements.forEach((element) => {
-    element.classList.remove('note-flag-active');
-  });
-  let noteContentElement = document.getElementById('note-content');
-  if (noteContentElement) {
-    noteContentElement.style.display = 'none';
-  }
-
-  // 移除高亮
-  const previousHighlights = document.querySelectorAll('.highlight');
-  previousHighlights.forEach(highlight => {
-    const parent = highlight.parentNode;
-    const textNode = document.createTextNode(highlight.textContent);
-    parent.replaceChild(textNode, highlight);
-    parent.normalize();
-  });
-}
-/**
- * 显示笔记内容
- * @param note
- */
-const showFileNote = (note: any, isPosition: boolean = false) => {
-  displayFileNote();
-  if (!note) {
-    return;
-  }
-  let noteElement = document.getElementById('note-' + (activeNoteIndex.value + 1));
-  let noteContentElement = document.getElementById('note-content');
-  let fileContentElement = document.getElementById("file-content");
-  const rectFileContent = fileContentElement.getBoundingClientRect();
-  if (noteElement) {
-    // 选中正文中的笔记标号
-    noteElement.classList.add('note-flag-active');
-
-    // 高亮显示
-    highlightSelectedWord(note);
-
-    // 是否需要定位
-    if (isPosition) {
-      let selectedElements = document.querySelectorAll('mark[class^="highlight"]');
-      const fileContentElement = document.getElementById('file-content');
-      if (selectedElements.length > 0 && fileContentElement) {
-        selectedElements[0].scrollIntoView({
-          behavior:'smooth',
-          block: 'center'
-        });
-      }
-    }
-
-    // 控制笔记弹框的位置及内容
-    noteContent.value = note.noteContent;
-    const rectNoteElement = noteElement.getBoundingClientRect();
-    if (noteContentElement) {
-      noteContentElement.innerHTML = noteContent.value;
-      noteContentElement.style.display = 'block';
-      let rectNoteContentElement = noteContentElement.getBoundingClientRect();
-      let left = rectNoteElement.left - 10;
-      if (left + rectNoteContentElement.width > rectFileContent.width) {
-        left = rectFileContent.width - rectNoteContentElement.width;
-      }
-      noteContentElement.style.left = left + 'px';
-      noteContentElement.style.top = rectNoteElement.top - rectNoteElement.height - 8 + 'px';
-    }
-  }
-}
-/**
- * 对指定的文字高亮显示
- * @param word
- * @param pstartId
- * @param pendId
- */
-const highlightSelectedWord = (note: any = null) => {
-  if (!note) {
-    return;
-  }
-  let marked=new Mark('#file-html-content');
-  marked.markRanges([{start:note.startIndex,length:note.endIndex-note.startIndex}],{
-    className:'highlight',
-    exclude:['.note-flag']
-  });
-}
-/**
- * 获取p标签id为note-span标签以外的文字
- * @param p
- */
-const getPContent = (p: HTMLElement) => {
-  const clone = p.cloneNode(true) as HTMLElement;
-  const spans = clone.querySelectorAll('span[id^="note-"]');
-  spans.forEach(span => {
-    clone.removeChild(span);
-  });
-  return clone.textContent?.trim();
-}
-/**
- * 移除高亮
- */
-const removeHighlightSelectedWord = () => {
-  const previousHighlights = document.querySelectorAll('.highlight');
-  previousHighlights.forEach(highlight => {
-    const parent = highlight.parentNode;
-    const textNode = document.createTextNode(highlight.textContent);
-    parent.replaceChild(textNode, highlight);
-  });
-}
-/**
- * 正文中笔记标记的鼠标事件
- *  包括：移入、移出、点击
- */
-const handelNoteFlagMouseEvent = () => {
-  const noteElements = document.querySelectorAll('span[id^="note-"]');
-  // 鼠标移入
-  noteElements.forEach((element) => {
-    element.addEventListener('mouseover', (e) => {
-      showFileNoteEvent.value = 'mouseover';
-      let elementId = Number(element.id.replace('note-', ''));
-      for (let i = 0; i < fileNote.notes.length; i++) {
-        if (i + 1 == elementId) {
-          activeNoteIndex.value = i;
-          showFileNote(fileNote.notes[i]);
-          break;
-        }
-      }
-    });
-
-    // 鼠标移出
-    element.addEventListener('mouseleave', (e) => {
-      if (showFileNoteEvent.value === 'mouseover') {
-        activeNoteIndex.value = -1;
-        displayFileNote();
-      }
-    });
-
-    // 点击事件
-    element.addEventListener('click', async (e) => {
-      showFileNoteEvent.value = 'click';
-      let elementId = Number(element.id.replace('note-', ''));
-      for (let i = 0; i < fileNote.notes.length; i++) {
-        if (i + 1 == elementId) {
-          activeNoteIndex.value = i;
-          break;
-        }
-      }
-      // 打开笔记tab页面
-      if (readingBox.value) {
-        readingBox.value.changeHead(3);
-      }
-
-      await nextTick();
-      // 右侧笔记定位
-      let rightNoteElement = document.getElementById('right-note-' + elementId);
-      if (rightNoteElement) {
-        rightNoteElement.scrollIntoView({ behavior:'smooth' });
-      }
-      // 左侧显示笔记
-      showFileNote(fileNote.notes[activeNoteIndex.value]);
-      e.stopPropagation();
-    });
-  });
-}
-
-onMounted(async () => {
-  docxFlow.value = null;
-  pdfFlow.value = null;
-  try {
-    await getFileHtmlContent();
-  } catch (error: any) {
-    ElMessage.error(error && error.message ? error.message : '未知错误');
-  }
-
-  if (fileContent.value) {
-    // 绑定笔记标记的鼠标事件
-    handelNoteFlagMouseEvent();
-
-    //绑定mouseup事件
-    fileContent.value.addEventListener('mouseup', function (event) {
-      activeNoteIndex.value = -1;
-      displayFileNote();
-      removeHighlightSelectedWord();
-      // 实现右侧笔记的定位
-      setTimeout(() => {
-        const selection = window.getSelection();
-        selectText.value = selection.toString();
-        let position = getGlobalSelectionPosition(selection);
-        positionInfo.value = position;
-        if (selectText.value && shortMenuDom.value && fileContent.value.contains(selection.anchorNode)) {
-          //给selection赋值，然后弹出菜单，再添加一个菜单隐藏的事件
-          let offset = getViewportOffsetByEvent(event);
-          shortMenuShow.value = true;
-          shortMenuDom.value.style.left = offset.left + 'px';
-          shortMenuDom.value.style.top = offset.top + 'px';
-        }
-      })
-    });
-
-    // 绑定滚动条滚动事件
-    fileContent.value.addEventListener('scroll', () => {
-      // 滚动滚动条时，更新笔记弹框的位置并控制其显隐
-      let noteElement = document.getElementById('note-' + ( activeNoteIndex.value + 1));
-      let noteContentElement = document.getElementById('note-content');
-      if (noteElement && noteContentElement) {
-        const rectNoteElement = noteElement.getBoundingClientRect();
-        let top = rectNoteElement.top - rectNoteElement.height - 8;
-        noteContentElement.style.top = rectNoteElement.top - rectNoteElement.height - 8 + 'px';
-        if (top < 75) {
-          noteContentElement.style.display = 'none';
-        } else if (activeNoteIndex.value != -1) {
-          noteContentElement.style.display = 'block';
-        }
-      }
-    });
-
-    document.addEventListener('mousedown', function (event) {
-      let execlute = document.getElementById('shortMenuDom');
-      if (execlute && execlute.contains(event.target)) {
-      } else {
-        disShowShortMenu();
-      }
-    });
-  }
-
-  window.addEventListener('resize', handleResize);
-})
-
-onBeforeUnmount(() => {
-  window.removeEventListener('resize', handleResize);
-})
-
-// 用于触发重新渲染的响应式变量
-const reRenderDocKey = ref(0);
-const reRenderPdfKey = ref(0);
-// 处理窗口大小改变的函数
-const handleResize = async () => {
-  if (suffix == 'docx') {
-    reRenderDocKey.value++;
-  } else if (suffix == 'pdf') {
-    reRenderPdfKey.value++;
-  }
-
-  // 计算笔记弹框的位置
-  let noteElement = document.getElementById('note-' + (activeNoteIndex.value + 1));
-  let noteContentElement = document.getElementById('note-content');
-  let fileContentElement = document.getElementById("file-content");
-
-  if (noteElement && noteContentElement && fileContentElement) {
-    const rectFileContent = fileContentElement.getBoundingClientRect();
-    const rectNoteElement = noteElement.getBoundingClientRect();
-    let rectNoteContentElement = noteContentElement.getBoundingClientRect();
-    let left = rectNoteElement.left - 10;
-    if (left + rectNoteContentElement.width > rectFileContent.width) {
-      left = rectFileContent.width - rectNoteContentElement.width;
-    }
-    noteContentElement.style.left = left + 'px';
-    let top = rectNoteElement.top - rectNoteElement.height - 8;
-    noteContentElement.style.top = rectNoteElement.top - rectNoteElement.height - 8 + 'px';
-    if (top < 75) {
-      noteContentElement.style.display = 'none';
-    } else if (activeNoteIndex.value != -1) {
-      noteContentElement.style.display = 'block';
-    }
-  }
-}
-
-const getViewportOffsetByEvent = (evt) => {
-  var el = evt.target || evt.srcElement;
-  var frameEl = getWindow(el).frameElement;
-  var offset = {
-    left: evt.clientX,
-    top: evt.clientY
-  };
-  if (frameEl && el.ownerDocument !== document) {
-    var rect = getClientRect(frameEl);
-    offset.left += rect.left;
-    offset.top += rect.top;
-  }
-  return offset;
-}
-
-const getClientRect = (element) => {
-  var bcr;
-  //trace  IE6下在控制编辑器显隐时可能会报错，catch一下
-  try {
-    bcr = element.getBoundingClientRect();
-  } catch (e) {
-    bcr = {left: 0, top: 0, height: 0, width: 0}
-  }
-  var rect = {
-    left: Math.round(bcr.left),
-    top: Math.round(bcr.top),
-    height: Math.round(bcr.bottom - bcr.top),
-    width: Math.round(bcr.right - bcr.left)
-  };
-  var doc;
-  while ((doc = element.ownerDocument) !== document &&
-  (element = getWindow(doc).frameElement)) {
-    bcr = element.getBoundingClientRect();
-    rect.left += bcr.left;
-    rect.top += bcr.top;
-  }
-  return rect;
-}
-
-const getWindow = (node) => {
-  var doc = node.ownerDocument || node;
-  return doc.defaultView || doc.parentWindow;
-}
-
-const handleAnchorClick = (event) => {
-  // 检查点击的是否是 a 标签
-  if (event.target.tagName === 'A') {
-    const href = event.target.getAttribute('href');
-
-    // 检查是否是锚点链接（以 # 开头）
-    if (href && href.startsWith('#')) {
-      event.preventDefault();
-      const anchorId = href.substring(1);
-      scrollToAnchor(anchorId);
-    }
-  }
-};
-
-const scrollToAnchor = (id) => {
-  const element = document.getElementById(id);
-  if (element) {
-    element.scrollIntoView({ behavior: 'smooth' });
-  }
-};
-provide('noteMsg',noteMsg);
-provide('showAddNoteDialog',showAddNoteDialog);
-</script>
-
-<style scoped lang="less">
-.body {
-  width: 100%;
-
-  .header {
-    margin-top: 10px;
-    display: flex;
-    width: 100%;
-    height: 65px;
-    background: #FFFFFF;
-    border-radius: 0px 0px 0px 0px;
-
-    img {
-      width: 20px;
-      height: 20px;
-      margin-top: 20px;
-      margin-left: 20px;
-      cursor: pointer;
-    }
-
-    .title {
-      width: calc(100% - 40px);
-      line-height: 65px;
-      text-align: center;
-      font-weight: 400;
-      font-size: 18px;
-      color: #000000;
-      font-style: normal;
-      text-transform: none;
-    }
-  }
-
-  .file-content-container {
-    margin-top: 20px;
-    height: calc(100% - 95px);
-    display: flex;
-
-    .file-content {
-      overflow: auto;
-      width: calc(100% - 580px);
-      height: calc(100% - 30px);
-      background: #FFFFFF;
-      box-shadow: 0px 0px 8px 1px rgba(180, 189, 221, 0.56);
-      border-radius: 16px 16px 16px 16px;
-      margin-left: 20px;
-      .mark{
-        background: #D0EAC8;
-      }
-      textarea {
-        width: 100%;
-        height: 100%;
-        padding: 35px 35px;
-        border: none; /* 去掉边框 */
-        resize: none; /* 禁止调整大小 */
-        //overflow: hidden; /* 隐藏溢出的内容，如果内容超出可视区域 */
-        background: none;
-      }
-
-      textarea:focus {
-        outline: none;
-      }
-
-      .view-md {
-        padding: 30px;
-        height: 100%;
-        position: relative;
-
-        ::v-deep(p) {
-          font-size: 16px;
-          line-height: 1.8rem;
-          margin-block-start: 0;
-        }
-
-        ::v-deep(.highlight) {
-          background: #D0EAC8;
-        }
-
-        ::v-deep(.table-container) {
-          display: flex;
-          align-items: end;
-          flex-wrap: wrap;
-        }
-
-        ::v-deep(.note-flag) {
-          width: 23px;
-          height: 28px;
-          line-height: 28px;
-          display: inline-block;
-          text-align: center;
-          font-family: DIN Alternate, DIN Alternate;
-          font-weight: bold;
-          font-size: 10px;
-          margin-left: 8px;
-          cursor: pointer;
-          background: url("@/assets/images/reading/note.png");
-          color: #004EA0;
-          background-size: contain !important;
-          background-repeat: no-repeat !important;
-          background-position: center bottom !important;
-        }
-
-        ::v-deep(.note-flag:hover) {
-          color: #FAFBFF;
-          background: url("@/assets/images/reading/note_active.png");
-        }
-
-        ::v-deep(.note-flag-active) {
-          color: #FAFBFF;
-          background: url("@/assets/images/reading/note_active.png");
-        }
-
-        ::v-deep(#page-container-1) {
-          .note-flag {
-            width: 69px !important;
-            height: 84px !important;
-            font-size: 42px !important;
-            line-height: 84px !important;
-          }
-        }
-      }
-
-      .file-note {
-        max-width: 240px;
-        height: 36px;
-        line-height: 36px;
-        padding: 0 12px;
-        position: absolute;
-        display: none;
-        background: #004EA0;
-        box-shadow: 0px 0px 8px 1px rgba(180, 189, 221, 0.56);
-        border-radius: 8px 8px 8px 8px;
-        border: 1px solid #D5DDFF;
-        font-size: 14px;
-        color: #FFFFFF;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      ::v-deep(.docx-wrapper) {
-        background: transparent;
-        padding: 0;
-
-        span::selection {
-          background: #D0EAC8;
-        }
-
-        textarea::selection {
-          background: #D0EAC8;
-        }
-      }
-
-      ::v-deep(.docx-wrapper .docx) {
-        width: 100% !important;
-        padding: 20px 40px !important;
-        min-height: 100% !important;
-      }
-
-      ::v-deep(.docx-wrapper > section.docx) {
-        box-shadow: none !important;
-        background: none;
-      }
-
-      ::v-deep(.docx *) {
-        font-size: 16px !important;
-        font-family: PingFangSC !important;
-        line-height: 30px !important;
-        color: #333639 !important;
-      }
-
-      ::v-deep(.vue-office-pdf) {
-        padding: 20px 40px;
-        height: 100%;
-        box-sizing: border-box;
-      }
-
-      ::v-deep(.vue-office-pdf-wrapper) {
-        padding: 0px !important;
-        background: none !important;
-      }
-
-      ::v-deep(.vue-office-pdf-wrapper > canvas) {
-        width: 100% !important;
-      }
-
-      ::v-deep(p::selection) {
-        background: #D0EAC8;
-      }
-
-
-    }
-
-    .doc-right {
-      margin-left: 20px;
-      margin-right: 20px;
-      width: 510px;
-      height: calc(100% - 30px);
-      background: linear-gradient(180deg, rgba(178, 226, 255, 0.4) 0%, rgba(106, 148, 255, 0.4) 100%);
-      box-shadow: 0 0 8px 1px rgba(180, 189, 221, 0.56);
-      border-radius: 16px;
-
-    }
-  }
-}
-
-.click-bar-button {
-  height: 36px;
-  padding: 0 4px;
-  background: #FFFFFF;
-  box-shadow: 0px 0px 8px 1px rgba(180, 189, 221, 0.56);
-  border-radius: 8px 8px 8px 8px;
-  border: 1px solid #D5DDFF;
-  display: flex;
-  justify-content: space-evenly;
-  align-items: center;
-  position: absolute;
-  z-index: 9999;
-  font-size: 14px;
-
-  .menu-name {
-    line-height: 36px;
-    cursor: pointer;
-    padding: 0 12px;
-  }
-
-  .menu-name:hover {
-    color: #004EA0;
-  }
-
-  .vertical-line {
-    height: 16px;
-    width: 2px;
-    background-color: #D5DDFF;
-  }
-}
-
-.add-note-dialog {
-  box-shadow: 0px 0px 8px 1px rgba(180, 189, 221, 0.56);
-  border-radius: 16px 16px 16px 16px;
-}
-</style>
\ No newline at end of file
diff --git a/chat_web_front/src/views/reading/fileList.vue b/chat_web_front/src/views/reading/fileList.vue
deleted file mode 100644
index 2918240..0000000
--- a/chat_web_front/src/views/reading/fileList.vue
+++ /dev/null
@@ -1,766 +0,0 @@
-<template>
-  <div class="doc-writing">
-
-    <!-- 文件列表 -->
-    <div class="doc-list">
-      <div class="doc-list-top">
-        <div style="display: flex;">
-          <img @click="goBack" src="../../assets/images/writing/back.png" alt="" style="margin-top:5px">
-          <div class="doc-list-title" style="margin-left:15px" v-text="pageTitle"></div>
-        </div>
-
-        <div class="doc-list-operate">
-          <el-input style="width: 316px;height: 32px" v-model="searchWord" placeholder="请输入文件名称关键字搜索">
-            <template #suffix>
-              <img src="@/assets/images/search.png" class="doc-search">
-            </template>
-          </el-input>
-
-          <div class="doc-import" @click="clickUpload">
-            <img src="@/assets/images/writing/doc_import.png">
-            <span>导入</span>
-          </div>
-          <div class="batch-delete" @click="batchDelete">
-            <img src="@/assets/images/reading/del.png" alt="">
-            <p class="batch-del">批量删除</p>
-          </div>
-        </div>
-
-      </div>
-      <div class="doc-list-empty" v-if="myFileList.list.length === 0">
-        <img src="@/assets/images/writing/doc_file.png" alt="">
-        <div class="empty-tips">
-          <div class="tips-top">
-            <span>暂无相关内容，</span>
-            <span @click="clickUpload" style="color: #004EA0;cursor: pointer">点击上传文档</span>
-          </div>
-          <div class="tips-bottom">支持{{ allowFileTypes.join('/') }}格式文件，文件大小不超过10M。</div>
-        </div>
-      </div>
-
-      <div v-if="myFileList.list.length > 0" class="doc-list-non-empty">
-        <el-table :data="myFileList.list" style="width: 100%"
-                  :row-style="myFileRowStyle"
-                  :header-row-style="myFileHeaderRowStyle"
-                  @selection-change="handleSelectionChange">
-          <el-table-column type="selection" width="55"></el-table-column>
-          <el-table-column label="文件名称" min-width="300">
-            <template #default="scope">
-              <div class="doc-file-title" @click="showDetail(scope.row)">{{ scope.row.filename }}</div>
-            </template>
-          </el-table-column>
-          <el-table-column label="文档大小" width="180">
-            <template #default="scope">
-              <span>{{ formateSize(scope.row.size) }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="创建时间" width="180">
-            <template #default="scope">
-              <span>{{ scope.row.createTime }}</span>
-            </template>
-          </el-table-column>
-
-          <el-table-column label="操作" width="180">
-            <template #default="scope">
-              <div class="doc-operate">
-                <img @click="renameDoc(scope.row)" title="重命名" src="@/assets/images/writing/doc_edit.png" alt="">
-                <img @click="downLoadDoc(scope.row)" title="下载" src="@/assets/images/writing/doc_download.png" alt="">
-                <img @click="delDoc(scope.row)" title="删除" src="@/assets/images/writing/doc_del.png" alt="">
-              </div>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-    </div>
-  </div>
-
-  <!-- 文件重命名弹框 -->
-  <el-dialog v-model="showRenameDialog" title="重命名" width="500"
-             :close-on-click-modal="false" :modal-append-to-body="false" :close-on-press-escape="false">
-    <el-input v-model="docName" placeholder="请输入文件名称"/>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button @click="showRenameDialog = false">取消</el-button>
-        <el-button type="primary" @click="saveDocName()">
-          保存
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-
-  <!-- 上传文件弹框 -->
-  <el-dialog v-model="showUploadDialog" title="上传文件" width="715" @close="closeUpload()"
-             :close-on-click-modal="false" :modal-append-to-body="false" :close-on-press-escape="false">
-    <el-upload
-        style="display: inline-block;"
-        class="upload-demo"
-        action="#"
-        :auto-upload="false"
-        accept=".pdf,.docx,.txt,.xlsx,.xls"
-        name="files"
-        multiple
-        :show-file-list="false"
-        :file-list="uploadingFileList"
-        :on-change="handleFileChange"
-        :on-remove="handleRemove"
-    >
-      <el-icon :size="100" class="el-icon--upload" style="display: flex;flex-wrap: wrap">
-        <upload-filled  style="color: #004EA0"/>
-        <span style="margin-top:-50px;font-size:13px; font-style: normal;color:#004EA0">选择文件</span>
-      </el-icon>
-      <template #tip>
-        <div class="el-upload__tip">
-          支持{{ allowFileTypes.join('/') }}格式文件，文件大小不超过10M
-        </div>
-      </template>
-    </el-upload>
-    <div class="files-upload-result">
-      <div class="result" v-for="item in uploadingFileList">
-        <div class="file-name" :title="item.name">{{ item.name }}</div>
-        <div class="result-info">
-          <div class="fail-msg" v-if="item.status === 'fail'" :title="item.message">{{ item.message }}</div>
-          <img class="upload-remove" v-if="item.status === 'ready'" src="@/assets/images/reading/upload_remove.png"
-               alt="" @click="handleRemove(item)">
-          <div class="loading" v-if="item.status === 'uploading'">
-            <Loading></Loading>
-          </div>
-          <img v-if="item.status === 'success'" src="@/assets/images/reading/upload_success.png" alt="">
-          <img v-if="item.status === 'fail'" src="@/assets/images/reading/upload_fail.png" alt="">
-        </div>
-      </div>
-    </div>
-    <template #footer>
-      <div class="dialog-footer" style="text-align: center" v-if="uploadingFileList.length > 0">
-        <el-button @click="closeUpload()">关闭</el-button>
-        <div class="dialog-tips">
-          <img src="@/assets/images/reading/tips.png" alt="">
-          <span>关闭弹窗后文件将继续上传</span>
-        </div>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<script setup lang="ts">
-import {onMounted, reactive, ref, watch} from "vue";
-import {useRouter} from "vue-router";
-import {delFile, delFiles, downloadFile, editFile, getKnowledgeBaseContent, getSize, uploadFile} from "@/api";
-import {withLoading} from "@/utils/loading";
-import {formatFileSize} from "@/utils/index"
-import {ElMessage, ElMessageBox, type UploadFile, type UploadFiles} from "element-plus";
-import {UploadFilled} from '@element-plus/icons-vue'
-import Loading from '@/components/Loading.vue'
-
-type DocInfo = {
-  id: number;
-  filename: string;
-  context: string;
-  articleAbstract: string;
-  articleKeywords: string;
-  articleParagraph: string;
-  embeddingId: string;
-}
-
-interface CusUploadFile extends UploadFile {
-  message?: string | null
-}
-
-const historyParams = history.state;
-
-// 允许上传的文件类型
-const allowFileTypes = ["TXT", "DOCX", 'PDF','XLSX','XLS'];
-
-//文件夹id
-const knowledgeBaseId = historyParams.folderId;
-const pageTitle = historyParams.fileName;
-const uploadingFileList = ref([] as CusUploadFile[]);
-const isUploading = ref(false);
-const uploadFinishFlag = ref(true);
-const showUploadDialog = ref(false);
-// 单文件大小限制3M
-const FILE_MAX_SIZE = 10 * 1024 * 1024;
-// 总文件大小限制50M
-const TOTAL_FILE_MAX_SIZE = 50 * 1024 * 1024;
-// 已上传文件的大小
-const totalFileSize = ref<number>(0);
-// 当前正在上传的文件
-const currentIndex = ref(0);
-
-/**
- * 导入按钮及上传文档按钮的点击事件
- */
-const clickUpload = async () => {
-  await getUploadedSize();
-  showUploadDialog.value = true;
-  if (uploadFinishFlag.value) {
-    uploadingFileList.value = [];
-  }
-}
-
-/**
- * 文件状态改变时的钩子
- * @param file
- * @param newFileList
- */
-const handleFileChange = async (file: UploadFile, newFileList: UploadFiles) => {
-  const fileExtension = file.name.split('.').pop()?.toUpperCase();
-  if (!allowFileTypes.includes(fileExtension as string)) {
-    ElMessage.warning(file.name + '文件格式不匹配');
-    return;
-  }
-
-  if (file.size && file.size > FILE_MAX_SIZE) {
-    ElMessage.warning(file.name + '文件大小已超过10M，不允许上传');
-    return;
-  }
-
-  totalFileSize.value += file.size ? file.size : 0;
-  if (totalFileSize.value > TOTAL_FILE_MAX_SIZE) {
-    totalFileSize.value -= file.size ? file.size : 0;
-    ElMessage.warning('个人素材总量不能超过50M，文件' + file.name + '添加失败');
-    return;
-  }
-
-  uploadingFileList.value.push(file);
-};
-// 文件自动上传
-watch(uploadingFileList, newVal => {
-  if (!isUploading.value) {
-    for (let i = 0; i < newVal.length; i++) {
-      if (newVal[i].status === 'ready') {
-        isUploading.value = true;
-        newVal[i].status = 'uploading';
-        startUpload();
-        break;
-      }
-    }
-  }
-}, {immediate: true, deep: true});
-/**
- * 文件删除时的钩子
- * @param file
- * @param newFileList
- */
-const handleRemove = (file: UploadFile) => {
-  uploadingFileList.value = uploadingFileList.value.filter(item => item.uid !== file.uid);
-}
-/**
- * 开始上传文件
- */
-const startUpload = async () => {
-  await uploadNextFile();
-};
-/**
- * 获取已上传文件的大小
- */
-const getUploadedSize = async () => {
-  try {
-    let res = await withLoading(getSize)();
-    if (res.code === 200) {
-      totalFileSize.value = res.data;
-    }
-  } catch (error: any) {
-    ElMessage.error(error && error.message ? error.message : '未知错误');
-  }
-}
-/**
- * 上传下一个文件
- */
-const uploadNextFile = async () => {
-  uploadFinishFlag.value = true;
-  for (let i = 0; i < uploadingFileList.value.length; i++) {
-    if (uploadingFileList.value[i].status !== 'success' && uploadingFileList.value[i].status !== 'fail') {
-      uploadFinishFlag.value = false;
-    }
-  }
-
-  if (uploadFinishFlag.value) {
-    isUploading.value = false;
-    return;
-  }
-
-  const file = uploadingFileList.value[currentIndex.value];
-  file.status = 'uploading';
-  const formData = new FormData();
-  formData.append('files', file.raw);
-  formData.append('folderId', 0);
-  formData.append('knowledgeBaseId', knowledgeBaseId);
-
-  try {
-    let res = await uploadFile(formData);
-    if (res.code && res.code != 200) {
-      ElMessage.error(res.msg + "【" + file.name + "】");
-      file.status = 'fail';
-      file.message = res.msg;
-    } else {
-      // 文件上传成功
-      file.status = 'success';
-    }
-  } catch (error) {
-    // 文件上传失败
-    file.status = 'fail';
-    file.message = error && error.message ? error.message : '未知错误';
-  } finally {
-    // 处理下一个文件
-    currentIndex.value++;
-    await uploadNextFile();
-  }
-};
-/**
- * 关闭上传文件弹框
- */
-const closeUpload = () => {
-  showUploadDialog.value = false;
-  // uploadingFileList.value = [];
-  currentIndex.value = 0;
-  getMyFileList();
-};
-
-// 路由
-const router = useRouter();
-const goBack = () => {
-  router.push({name: 'KnowledgeBase'})
-}
-
-// 文件检索关键词
-const searchWord = ref('');
-// 我的文件列表
-const myFileList = reactive({list: []});
-const netFileList = reactive({list: []});
-
-/**
- * 获取我的文件列表
- */
-const getMyFileList = async () => {
-  try {
-    let res = await withLoading(getKnowledgeBaseContent)({
-      folderType: "1",
-      knowledgeBaseId: knowledgeBaseId + "",
-      patentId: "0"
-    });
-    if (res && res.data) {
-      netFileList.list = res.data;
-      myFileList.list = netFileList.list;
-    }
-  } catch (error: any) {
-    ElMessage.error(error && error.message ? error.message : '未知错误');
-  }
-}
-
-watch(searchWord, (newValue, oldValue) => {
-  if (newValue && newValue.trim()) {
-    myFileList.list = netFileList.list.filter(item => {
-      return item.filename.indexOf(newValue.trim()) !== -1
-    })
-  } else {
-    myFileList.list = netFileList.list;
-  }
-})
-
-/**
- * 表格体背景色
- */
-const myFileRowStyle = () => {
-  return '--el-table-tr-bg-color: rgba(250, 251, 255, 0.5);'
-}
-
-/**
- * 表头背景色
- */
-const myFileHeaderRowStyle = () => {
-  return '--el-table-header-bg-color: #FAFBFF;'
-}
-
-/**
- * 查看文件详情
- * @param doc
- */
-const showDetail = (doc: DocInfo) => {
-  if(!doc.articleAbstract){
-    doc.articleAbstract="暂无内容，请重试"
-  }
-  if(!doc.articleKeywords){
-    doc.articleKeywords="暂无内容，请重试"
-  }
-  if(!doc.articleParagraph){
-    doc.articleParagraph="暂无内容，请重试"
-  }
-  if (doc.articleAbstract.startsWith("\"")) {
-    doc.articleAbstract = JSON.parse(doc.articleAbstract);
-  }
-  if (doc.articleKeywords.startsWith("\"")) {
-    doc.articleKeywords = JSON.parse(doc.articleKeywords);
-  }
-  if (doc.articleParagraph.startsWith("\"")) {
-    doc.articleParagraph = JSON.parse(doc.articleParagraph);
-  }
-  router.push({
-    name: "FileDetail",
-    state: {
-      folderName: pageTitle,
-      folderId: knowledgeBaseId,
-      fileId: doc.id,
-      embeddingId: doc.embeddingId,
-      fileName: doc.filename,
-      articleAbstract: doc.articleAbstract,
-      articleKeywords: doc.articleKeywords,
-      articleParagraph: doc.articleParagraph,
-      fullContent: doc.context
-    }
-  })
-}
-
-/**
- * 重命名
- * @param doc
- */
-const showRenameDialog = ref(false);
-const docName = ref('');
-const docType = ref('');
-const docId = ref(0);
-const renameDoc = (doc: DocInfo) => {
-  if (doc.filename) {
-    let names = doc.filename.split('.');
-    docName.value = names[0];
-    if (names.length === 2) {
-      docType.value = names[1];
-    }
-  }
-  docId.value = doc.id;
-  showRenameDialog.value = true;
-}
-const saveDocName = async () => {
-  if (docName.value === '' || docName.value.trim() === '') {
-    ElMessage.error("请输入文件名");
-    return;
-  }
-  let param = new FormData();
-  param.append('fileId', docId.value + '');
-  param.append('fileName', docName.value + '.' + docType.value);
-  param.append('folderId', '0');
-  //保存成功后关闭弹窗
-  try {
-    await withLoading(editFile)(param);
-    //调用重命名接口
-    ElMessage.success("修改成功");
-    getMyFileList();
-  } catch {
-    ElMessage.error("修改失败");
-  }
-  showRenameDialog.value = false;
-}
-
-/**
- * 下载文档
- */
-const downLoadDoc = async function (file) {
-  try {
-    const response = await downloadFile({fileId: file.id});
-    const url = URL.createObjectURL(new Blob([response]));
-    const link = document.createElement('a');
-    link.href = url;
-    link.setAttribute('download', file.filename); // 设置下载文件的名称
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  } catch (error: any) {
-    ElMessage.error(error && error.message ? error.message : '未知错误');
-  }
-}
-
-/**
- * 删除文档
- */
-const delDoc = (doc: DocInfo) => {
-  delHistory(doc.id);
-}
-
-onMounted(() => {
-  getMyFileList();
-})
-
-// 删除文档
-const delHistory = async (id: number) => {
-  ElMessageBox.confirm("确认删除文档吗？", "提示", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  }).then(async () => {
-    try {
-      let res = await withLoading(delFile)(id + '');
-      if (res && res.code === 200) {
-        ElMessage.success("删除成功");
-        getMyFileList();
-        return;
-      }
-
-      ElMessage.error("删除失败");
-    } catch (error: any) {
-      ElMessage.error("删除失败");
-    }
-  });
-};
-
-const batchDelete = async () => {
-  if (idList.value.length > 0) {
-    ElMessageBox.confirm("确认删除文档吗？", "提示", {
-      confirmButtonText: "确定",
-      cancelButtonText: "取消",
-      type: "warning",
-    }).then(async () => {
-      try {
-        let res = await withLoading(delFiles)({
-          fileList: idList.value,
-          folderList: []
-        });
-
-        if (res && res.code === 200) {
-          ElMessage.success("删除成功");
-        } else {
-          ElMessage.error("删除失败");
-        }
-
-        await getMyFileList();
-      } catch (err) {
-        ElMessage.error("删除失败");
-      }
-    });
-  }
-}
-
-const formateSize = (size: string) => {
-  return formatFileSize(Number(size.substring(0, size.length - 1)));
-}
-
-const idList = ref([]);
-const handleSelectionChange = (rows) => {
-  idList.value.length = 0;
-  if (rows.length > 0) {
-    for (let i = 0; i < rows.length; i++) {
-      idList.value.push(rows[i].id);
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.doc-writing {
-  width: 100%;
-  padding: 20px 50px;
-  position: relative;
-}
-
-.doc-list {
-  width: calc(100% - 100px);
-  height: 100%;
-  margin-top: 20px;
-  box-sizing: border-box;
-}
-
-.doc-list .doc-list-top {
-  display: flex;
-  justify-content: space-between;
-}
-
-.doc-list .doc-list-top img {
-  width: 16px;
-  height: 13.8px;
-  cursor: pointer;
-  margin-left: 10px;
-}
-
-.doc-list .doc-list-top .doc-list-title {
-  font-weight: bold;
-  font-size: 20px;
-  color: #000000;
-  margin-bottom: 16px;
-}
-
-.doc-list .doc-list-top .doc-list-operate {
-  display: flex;
-}
-
-.doc-list .doc-list-top .batch-delete {
-  height: 32px;
-  width: 100px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-left: 16px;
-  cursor: pointer;
-  background: #FFFFFF;
-  border-radius: 4px 4px 4px 4px;
-  border: 1px solid #004EA0;
-}
-
-.doc-list .doc-list-top .batch-delete img {
-  margin-right: 5px;
-  width: 16px;
-  margin-left: -2px;
-}
-
-.doc-list .doc-list-top .batch-delete .batch-del {
-  color: #004EA0;
-  font-size: 14px;
-}
-
-.doc-list .doc-list-top .doc-list-operate .doc-search {
-  cursor: pointer;
-  width: 16px;
-  height: 16px;
-}
-
-.doc-list .doc-list-top .doc-list-operate .doc-import {
-  display: inline-block;
-  width: 80px;
-  height: 32px;
-  margin-left: 16px;
-  background: #004EA0;
-  border-radius: 4px;
-  font-size: 14px;
-  color: #FAFBFF;
-  line-height: 32px;
-  text-align: center;
-  cursor: pointer;
-}
-
-.doc-list .doc-list-top .doc-list-operate .doc-import img {
-  width: 9px;
-  height: 11px;
-  margin-right: 8px;
-  margin-left: -3px;
-}
-
-.doc-list .doc-list-empty {
-  height: 235px;
-  border-radius: 8px 8px 8px 8px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.doc-list .doc-list-empty img {
-  height: 44px;
-  margin-right: 18px;
-}
-
-.doc-list .doc-list-empty .empty-tips .tips-top {
-  font-weight: bold;
-  font-size: 16px;
-  color: #000000;
-}
-
-/*.doc-list .doc-list-empty .empty-tips .tips-top span {
-  color: #004EA0;
-}*/
-
-.doc-list .doc-list-empty .empty-tips .tips-bottom {
-  font-size: 14px;
-  color: #858A94;
-  margin-top: 4px;
-}
-
-.doc-list-non-empty {
-  height: calc(100% - 60px);
-  overflow-y: auto;
-}
-
-.doc-list-non-empty .doc-file-title {
-  font-size: 14px;
-  color: #004EA0;
-  cursor: pointer;
-}
-
-.doc-list-non-empty .doc-operate {
-  padding-right: 16px;
-}
-
-.doc-list-non-empty .doc-operate img {
-  width: 14px;
-  height: 14px;
-  cursor: pointer;
-  margin-right: 20px;
-}
-
-.upload-demo {
-  width: 100%;
-  text-align: center;
-
-  .upload-btn {
-    margin: auto;
-  }
-
-  .el-upload__tip {
-    text-align: center;
-    margin-top: 12px;
-  }
-}
-
-.files-upload-result {
-  max-height: 210px;
-  overflow-y: auto;
-  margin-top: 16px;
-  .result {
-    height: 30px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    overflow: hidden;
-
-    .file-name {
-      width: 434px;
-      font-size: 14px;
-      color: #606771;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      padding-left: 10px;
-    }
-
-    .result-info {
-      display: flex;
-      align-items: center;
-
-      .fail-msg {
-        width: 192px;
-        text-align: right;
-        font-size: 12px;
-        color: #BD0000;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        margin-right: 8px;
-      }
-
-      .loading {
-        width: 38px;
-        height: 38px;
-      }
-
-      img {
-        width: 14px;
-        margin-right: 10px;
-      }
-
-      .upload-remove {
-        cursor: pointer;
-      }
-    }
-  }
-}
-
-.dialog-tips {
-  font-size: 12px;
-  color: #858A94;
-  margin-top: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  img {
-    width: 12px;
-    height: 12px;
-    margin-right: 3px
-  }
-}
-</style>
\ No newline at end of file
diff --git a/chat_web_front/src/views/reading/index.vue b/chat_web_front/src/views/reading/index.vue
index 5754ed8..6d53906 100644
--- a/chat_web_front/src/views/reading/index.vue
+++ b/chat_web_front/src/views/reading/index.vue
@@ -1,565 +1,1167 @@
 <template>
-  <div class="reading">
-    <div class="reading-header">
-      <p>我的文献</p>
-      <div class="reading-operate">
-        <el-input style="width: 316px; height: 32px" v-model="searchWord" placeholder="请输入文件夹标题关键字搜索">
-          <template #suffix>
-            <img src="@/assets/images/search.png" class="reading-search"  >
+  <div class="reading-layout">
+    <!-- 左栏：文件管理树 -->
+    <div class="left-panel">
+      <div class="left-header">
+        <div class="left-title">文件管理</div>
+        <div class="left-actions">
+          <img src="@/assets/images/reading/create.png" alt="新建" title="新建文件夹" class="action-icon" @click="createFolder()">
+        </div>
+      </div>
+
+      <div class="left-search">
+        <el-input v-model="searchWord" placeholder="搜索文件..." size="small" clearable>
+          <template #prefix>
+            <img src="@/assets/images/search.png" style="width:14px;height:14px;">
           </template>
         </el-input>
-        <div class="reading-operate-btn reading-create" @click="createFolder()">
-          <img src="@/assets/images/reading/create.png" alt="">
-          <p class="reading-operate-tip">新建文件夹</p>
-        </div>
-        <div class="reading-operate-btn reading-del" @click="delBatch">
-          <img src="@/assets/images/reading/del.png" alt="">
-          <p class="reading-operate-tip">批量删除</p>
-        </div>
       </div>
-    </div>
-    <div class="empty-list" v-if="materialList.length === 0">
-      <div class="empty-list-container">
-        <img src="@/assets/images/reading/empty.png" alt="">
-        <div class="empty-list-tips">
-          暂未发现文件夹，<span class="go-create" @click="createFolder()">点击创建</span>
-        </div>
-      </div>
-    </div>
-    <div class="list" v-if="materialList.length > 0">
-      <div v-for="(item, index) in materialList" :key="item.id" class="material-list-item">
-        <img src="@/assets/images/reading/folder.png" alt="" @click="fileList(item.id,item.name)" style="cursor: pointer">
-        <div class="material-list-item-info">
-          <div class="top" @click="fileList(item.id,item.name)">
-            <div class="title" :title="item.name">{{ item.name }}</div>
-            <div class="operate-img" @click.stop="showOperates(index)">
-              <img src="@/assets/images/reading/operates.png" alt="">
+
+      <div class="left-tree">
+        <el-tree
+          ref="treeRef"
+          :data="filteredTreeData"
+          :props="treeProps"
+          node-key="id"
+          :expand-on-click-node="false"
+          :default-expand-all="false"
+          highlight-current
+          @node-click="handleNodeClick"
+        >
+          <template #default="{ node, data }">
+            <div class="tree-node" :class="{ 'is-file': !data.isFolder, 'is-selected-file': selectedFile && selectedFile.fileId === data.id && !data.isFolder }">
+              <div class="tree-node-content">
+                <img v-if="data.isFolder" src="@/assets/images/reading/folder.png" class="tree-icon folder-icon">
+                <span v-else class="tree-file-icon">{{ getFileIcon(data.label) }}</span>
+                <span class="tree-label" :title="data.label">{{ data.label }}</span>
+              </div>
+              <div class="tree-node-actions" v-if="data.isFolder" @click.stop>
+                <el-dropdown trigger="click" size="small">
+                  <img src="@/assets/images/reading/operates.png" class="tree-operate-icon">
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item @click="uploadToFolder(data)">上传文件</el-dropdown-item>
+                      <el-dropdown-item @click="createFolder(data)">重命名</el-dropdown-item>
+                      <el-dropdown-item @click="delFolder(data)" style="color:#BE0000">删除</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+              </div>
+              <div class="tree-node-actions" v-if="!data.isFolder" @click.stop>
+                <el-dropdown trigger="click" size="small">
+                  <img src="@/assets/images/reading/operates.png" class="tree-operate-icon">
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item @click="renameFile(data)">重命名</el-dropdown-item>
+                      <el-dropdown-item @click="downLoadDoc(data)">下载</el-dropdown-item>
+                      <el-dropdown-item @click="delFile(data)" style="color:#BE0000">删除</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+              </div>
             </div>
-          </div>
-          <div class="bottom">
-            <el-checkbox v-model="item.checked"></el-checkbox>
-          </div>
-          <div class="operates" v-if="index === showOperatesIndex">
-            <div class="btn update-name" @click="createFolder(item)">修改名称</div>
-            <div class="btn del-folder" @click="delFolder(item)">删除</div>
-          </div>
+          </template>
+        </el-tree>
+      </div>
+
+      <div class="left-footer">
+        <div class="batch-del-btn" @click="delBatch">
+          <img src="@/assets/images/reading/del.png" alt="">
+          <span>批量删除</span>
         </div>
       </div>
     </div>
-  </div>
 
-  <!-- 创建文件夹/重命名文件夹弹框 -->
-  <div class="create-folder-dialog" v-if="dialogVisible">
-    <div class="cus-container">
-      <div class="cus-header">
-        <div class="cus-title">{{ dialogTitle }}</div>
-        <img src="@/assets/images/close.png" alt="" @click="cancelSubmitFolderName">
+    <!-- 中间栏：文件预览 -->
+    <div class="center-panel">
+      <div v-if="!selectedFile" class="center-placeholder">
+        <div class="placeholder-content">
+          <img src="@/assets/images/reading/empty.png" alt="" style="width:80px;height:80px;opacity:0.5;">
+          <p>点击左侧文件查看内容</p>
+        </div>
       </div>
-
-      <div class="cus-content">
-        <el-input v-model="submitFolderParam.name" placeholder="请输入文件夹名称" style="height: 52px" @keyup.enter="submitFolderName"></el-input>
-      </div>
-
-      <div class="cus-footer">
-        <div class="submit" @click="submitFolderName">确定</div>
+      <div v-else class="center-content">
+        <div class="center-header">
+          <span class="center-title" :title="selectedFile.fileName">{{ selectedFile.fileName }}</span>
+        </div>
+        <div class="file-content" ref="fileContent" id="file-content">
+          <div class="view-md" id="file-html-content" v-html="docHtml"></div>
+          <div id="note-content" :title="noteContent" class="file-note"></div>
+        </div>
       </div>
     </div>
+
+    <!-- 右栏：ReadingBox -->
+    <div class="right-panel">
+      <div v-if="!selectedFile" class="right-placeholder">
+        <div class="placeholder-content">
+          <img src="@/assets/images/reading/empty.png" alt="" style="width:60px;height:60px;opacity:0.4;">
+          <p class="placeholder-title">知识库问答</p>
+          <p class="placeholder-sub">选择文件后开始提问</p>
+        </div>
+      </div>
+      <ReadingBox v-else ref="readingBox" />
+    </div>
+
+    <!-- 右键菜单 -->
+    <div class="click-bar-button" id="shortMenuDom" ref="shortMenuDom" v-show="shortMenuShow">
+      <template v-for="(item, index) in contentMenuList" :key="index">
+        <div class="menu-name" @click="fileContentMenu(index)">{{ item }}</div>
+        <div class="vertical-line" v-if="index < contentMenuList.length - 1"></div>
+      </template>
+    </div>
   </div>
-  <page-footer></page-footer>
+
+  <!-- 创建/重命名文件夹弹框 -->
+  <el-dialog v-model="folderDialogVisible" :title="folderDialogTitle" width="500"
+             :close-on-click-modal="false">
+    <el-input v-model="submitFolderParam.name" placeholder="请输入文件夹名称"
+              @keyup.enter="submitFolderName"></el-input>
+    <template #footer>
+      <el-button @click="folderDialogVisible = false">取消</el-button>
+      <el-button type="primary" @click="submitFolderName">确定</el-button>
+    </template>
+  </el-dialog>
+
+  <!-- 重命名文件弹框 -->
+  <el-dialog v-model="showRenameDialog" title="重命名" width="500" :close-on-click-modal="false">
+    <el-input v-model="renameDocName" placeholder="请输入文件名称" />
+    <template #footer>
+      <el-button @click="showRenameDialog = false">取消</el-button>
+      <el-button type="primary" @click="saveDocName">保存</el-button>
+    </template>
+  </el-dialog>
+
+  <!-- 上传文件弹框 -->
+  <el-dialog v-model="showUploadDialog" title="上传文件" width="715" @close="closeUpload()"
+             :close-on-click-modal="false">
+    <el-upload
+        class="upload-demo"
+        action="#"
+        :auto-upload="false"
+        accept=".pdf,.docx,.txt,.xlsx,.xls"
+        name="files"
+        multiple
+        :show-file-list="false"
+        :on-change="handleFileChange"
+    >
+      <el-icon :size="100" class="el-icon--upload" style="display: flex;flex-wrap: wrap">
+        <upload-filled style="color: #004EA0"/>
+        <span style="margin-top:-50px;font-size:13px; font-style: normal;color:#004EA0">选择文件</span>
+      </el-icon>
+      <template #tip>
+        <div class="el-upload__tip">
+          支持TXT/DOCX/PDF/XLSX/XLS格式文件，文件大小不超过10M
+        </div>
+      </template>
+    </el-upload>
+    <div class="files-upload-result">
+      <div class="result" v-for="item in uploadingFileList" :key="item.uid">
+        <div class="file-name" :title="item.name">{{ item.name }}</div>
+        <div class="result-info">
+          <div class="fail-msg" v-if="item.status === 'fail'" :title="item.message">{{ item.message }}</div>
+          <img class="upload-remove" v-if="item.status === 'ready'" src="@/assets/images/reading/upload_remove.png"
+               alt="" @click="handleRemove(item)">
+          <div class="loading" v-if="item.status === 'uploading'">
+            <Loading></Loading>
+          </div>
+          <img v-if="item.status === 'success'" src="@/assets/images/reading/upload_success.png" alt="">
+          <img v-if="item.status === 'fail'" src="@/assets/images/reading/upload_fail.png" alt="">
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div style="text-align: center" v-if="uploadingFileList.length > 0">
+        <el-button @click="closeUpload()">关闭</el-button>
+        <div class="dialog-tips">
+          <img src="@/assets/images/reading/tips.png" alt="">
+          <span>关闭弹窗后文件将继续上传</span>
+        </div>
+      </div>
+    </template>
+  </el-dialog>
+
+  <!-- 添加笔记弹框 -->
+  <el-dialog v-model="showAddNoteDialog" title="写下你的想法吧" width="715"
+             :close-on-click-modal="false" @open="openAddNoteDialog">
+    <el-input ref="noteMsgRef" v-model="noteMsg" type="textarea" :rows="10" placeholder="请输入笔记内容"/>
+    <template #footer>
+      <div style="text-align: center;">
+        <el-button type="primary" @click="submitNote()">发表</el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 
 <script setup lang="ts">
-import {onMounted, ref, onUnmounted, reactive, computed} from "vue";
-import { getKnowledgeBaseList, addKnowledgeBase, editKnowledgeBase, delKnowledgeBase } from "@/api";
-import { withLoading } from "@/utils/loading";
-import {useRouter} from "vue-router";
-import PageFooter from "@/components/pageFooter.vue";
+import {onMounted, onUnmounted, ref, reactive, provide, nextTick, computed, watch} from "vue";
+import {
+  getKnowledgeBaseList, addKnowledgeBase, editKnowledgeBase, delKnowledgeBase,
+  getKnowledgeBaseContent, uploadFile, editFile, delFile, delFiles,
+  downloadFile, getFileContent, addFileNote, getSize
+} from "@/api";
+import {withLoading} from "@/utils/loading";
+import {copyToClip, getGlobalSelectionPosition} from "@/utils";
+import {transforMd} from "@/utils/markdown";
+import ReadingBox from "@/components/ReadingBox.vue";
+import Loading from "@/components/Loading.vue";
+import {UploadFilled} from '@element-plus/icons-vue';
+import {ElMessage, ElMessageBox, type UploadFile, type UploadFiles} from "element-plus";
+import Mark from "mark.js";
 
-// 检索词
+// ===================== 文件树数据 =====================
+const treeRef = ref(null);
 const searchWord = ref('');
+const treeData = ref<any[]>([]);
+const treeProps = { children: 'children', label: 'label' };
 
+// ===================== 选中文件 =====================
+const selectedFile = ref<any>(null);
+provide('selectedFile', selectedFile);
 
-// 文献列表
+// ===================== 文件预览 =====================
+const docHtml = ref('');
+const fileContent = ref(null);
+const readingBox = ref(null);
 
-const netFolderList=ref([]);
+// ===================== 笔记 =====================
+const fileNote = reactive({ notes: [] as any[] });
+const noteContent = ref('');
+provide('fileNote', fileNote);
 
-// 创建文件夹/重命名弹框
-const dialogVisible = ref(false);
-const dialogTitle = ref("新建文件夹");
-interface FolderParam {
-  id: number;
-  name: string;
+// ===================== 右键菜单 =====================
+const shortMenuDom = ref(null);
+const shortMenuShow = ref(false);
+const selectText = ref('');
+const contentMenuList = ['引用', '复制', '名词解释', '添加笔记', '翻译'];
+
+// ===================== 引用 (provide to ReadingBox) =====================
+const quoteMsg = ref<string>('');
+provide('quoteMsg', quoteMsg);
+provide('updateQuoteMsg', (newValue: string) => { quoteMsg.value = newValue; });
+
+// ===================== 笔记弹框 =====================
+const showAddNoteDialog = ref(false);
+const noteMsg = ref('');
+const noteMsgRef = ref(null);
+provide('noteMsg', noteMsg);
+provide('showAddNoteDialog', showAddNoteDialog);
+
+interface NoteParam {
+  id: string; fileId: number; pstartId: string; pendId: string;
+  wordContent: string; startIndex: number; endIndex: number; noteContent: string;
 }
-const submitFolderParam = reactive<FolderParam>({
-  id: 0,
-  name: "",
-})
-
-const router = useRouter();
-const fileList=(id:any,fileName:string)=>{
-  router.push({
-    name: 'FileList',
-    state: {
-      folderId:id,
-      fileName:fileName
-    }
-  });
+interface PositionInfo {
+  start: number; end: number; parentStart: string | null; parentEnd: string | null;
 }
-// 控制文件夹操作弹框的显隐
-const showOperatesIndex = ref(-1);
-/**
- * 获取我的知识库列表，这里是文件夹列表
- */
-const getMyMaterialList = async () => {
+const noteParam = ref<NoteParam>({
+  id: '', fileId: 0, pstartId: '', pendId: '',
+  wordContent: '', startIndex: 0, endIndex: 0, noteContent: ''
+});
+provide('noteParam', noteParam);
+const positionInfo = ref<PositionInfo>({ start: -1, end: -1, parentStart: '', parentEnd: '' });
+const activeNoteIndex = ref(-1);
+provide('activeNoteIndex', activeNoteIndex);
+provide('highlightContentFlag', (note: any, newIndex: number) => {
+  activeNoteIndex.value = newIndex;
+  showFileNote(note, true);
+});
+const showFileNoteEvent = ref('');
+
+// ===================== 文件夹弹框 =====================
+const folderDialogVisible = ref(false);
+const folderDialogTitle = ref("新建文件夹");
+const submitFolderParam = reactive({ id: 0, name: "" });
+
+// ===================== 文件重命名弹框 =====================
+const showRenameDialog = ref(false);
+const renameDocName = ref('');
+const renameDocType = ref('');
+const renameDocId = ref(0);
+
+// ===================== 上传文件弹框 =====================
+const showUploadDialog = ref(false);
+const uploadFolderId = ref(0);
+interface CusUploadFile extends UploadFile { message?: string | null }
+const uploadingFileList = ref([] as CusUploadFile[]);
+const isUploading = ref(false);
+const uploadFinishFlag = ref(true);
+const currentIndex = ref(0);
+const totalFileSize = ref<number>(0);
+const allowFileTypes = ["TXT", "DOCX", "PDF", "XLSX", "XLS"];
+const FILE_MAX_SIZE = 10 * 1024 * 1024;
+const TOTAL_FILE_MAX_SIZE = 50 * 1024 * 1024;
+
+// ========================================
+// 文件树：加载、过滤
+// ========================================
+const loadTreeData = async () => {
   try {
-    searchWord.value='';
-    let res = await withLoading(getKnowledgeBaseList<JSON>)({
-      folderType: "0",
-    });
-    if (res && res.data !== null) {
-      netFolderList.value=res.data;
+    let res = await getKnowledgeBaseList<any>({ folderType: "0" });
+    if (res && res.data) {
+      const folders = res.data.map((f: any) => ({
+        id: f.id, label: f.name, isFolder: true, children: [], raw: f, loaded: false
+      }));
+      treeData.value = folders;
     }
   } catch (error: any) {
-    ElMessage.error(error && error.message ? error.message : '未知错误');
+    ElMessage.error(error?.message || '加载文件夹失败');
   }
-}
+};
 
-const materialList=computed(()=>{
-  if(searchWord.value===''||searchWord.value.trim()===''){
-    return netFolderList.value;
+const loadFolderFiles = async (folder: any) => {
+  if (folder.loaded) return;
+  try {
+    let res = await getKnowledgeBaseContent<any>({
+      folderType: "1", knowledgeBaseId: folder.id + "", patentId: "0"
+    });
+    if (res && res.data) {
+      folder.children = res.data.map((f: any) => ({
+        id: f.id, label: f.filename, isFolder: false, isLeaf: true, raw: f,
+        folderId: folder.id, folderName: folder.label
+      }));
+    }
+    folder.loaded = true;
+  } catch (error: any) {
+    ElMessage.error(error?.message || '加载文件列表失败');
   }
-  return netFolderList.value.filter((item, index) => {
-    return item.name.toLowerCase().includes(searchWord.value.toLowerCase())
-  })
-})
+};
 
-/**
- * 打开创建文件夹弹框
- */
+const filteredTreeData = computed(() => {
+  if (!searchWord.value.trim()) return treeData.value;
+  const keyword = searchWord.value.toLowerCase();
+  return treeData.value.filter((folder: any) => {
+    const folderMatch = folder.label.toLowerCase().includes(keyword);
+    const childMatch = folder.children?.some((f: any) => f.label.toLowerCase().includes(keyword));
+    return folderMatch || childMatch;
+  }).map((folder: any) => {
+    if (!searchWord.value.trim()) return folder;
+    return {
+      ...folder,
+      children: folder.children?.filter((f: any) =>
+        f.label.toLowerCase().includes(keyword) || folder.label.toLowerCase().includes(keyword)
+      )
+    };
+  });
+});
+
+const handleNodeClick = async (data: any) => {
+  if (data.isFolder) {
+    await loadFolderFiles(data);
+    return;
+  }
+  // 点击文件
+  const doc = data.raw;
+  selectedFile.value = {
+    fileId: doc.id,
+    fileName: doc.filename,
+    embeddingId: doc.embeddingId,
+    folderId: data.folderId,
+    folderName: data.folderName,
+    articleAbstract: doc.articleAbstract || '暂无内容，请重试',
+    articleKeywords: doc.articleKeywords || '暂无内容，请重试',
+    articleParagraph: doc.articleParagraph || '暂无内容，请重试',
+    fullContent: doc.context
+  };
+  await loadFileContent();
+};
+
+const getFileIcon = (filename: string) => {
+  const ext = filename?.split('.').pop()?.toLowerCase() || '';
+  const icons: Record<string, string> = {
+    'pdf': '📄', 'docx': '📝', 'doc': '📝', 'txt': '📃',
+    'xlsx': '📊', 'xls': '📊', 'md': '📋'
+  };
+  return icons[ext] || '📄';
+};
+
+// ========================================
+// 文件预览：加载内容、笔记、交互
+// ========================================
+const pattern = /(\$\$.*?\$\$|\$.*?\$)/g;
+
+const loadFileContent = async () => {
+  if (!selectedFile.value) return;
+  let offsets: number[] = [];
+  try {
+    let res = await withLoading(getFileContent)({
+      fileId: selectedFile.value.fileId,
+      embeddingId: selectedFile.value.embeddingId,
+      knowledgeBaseId: selectedFile.value.folderId
+    });
+    if (res && res.code === 200 && res.data && res.data.content) {
+      let content = res.data.content;
+      content = content.replace(pattern, (match: string, _cg: string, offset: number) => {
+        offsets.push(offset);
+        return transforMd(match);
+      });
+      docHtml.value = content.replace(/<p>(.*?<span class="katex">.*?<\/span>.*?)<\/p>/g, '$1');
+      fileNote.notes = res.data.notes || [];
+    } else {
+      docHtml.value = '<p style="color:#999;text-align:center;margin-top:40px;">文件内容获取失败</p>';
+    }
+  } catch (error: any) {
+    docHtml.value = '<p style="color:#999;text-align:center;margin-top:40px;">文件内容获取失败</p>';
+  }
+  await nextTick();
+  try {
+    handelLaTeXElements(offsets);
+    handelCommentElements();
+    bindFileContentEvents();
+    handelNoteFlagMouseEvent();
+  } catch (err) { /* ignore */ }
+};
+
+provide('updateFileContent', async () => {
+  await loadFileContent();
+});
+
+const handelLaTeXElements = (offsets: number[]) => {
+  let katexElements = document.querySelectorAll('span[class="katex"]');
+  for (let i = 0; i < katexElements.length; i++) {
+    katexElements[i].setAttribute('id', 'katex-' + offsets[i]);
+  }
+};
+
+const handelCommentElements = () => {
+  document.querySelectorAll('a[href^="#comment-"]').forEach(element => {
+    let targetId = element.getAttribute('href');
+    (element as HTMLElement).onclick = function (e) {
+      e.preventDefault();
+      const targetElement = document.querySelector(targetId!);
+      if (targetElement) targetElement.scrollIntoView({ behavior: 'smooth' });
+    };
+  });
+};
+
+// ========================================
+// 右键菜单
+// ========================================
+const fileContentMenu = (index: number) => {
+  disShowShortMenu();
+  if (index === 0) {
+    quoteMsg.value = selectText.value;
+    if (quoteMsg.value && quoteMsg.value.length > 1000) quoteMsg.value = quoteMsg.value.slice(0, 1000);
+    readingBox.value?.changeHead(2);
+  }
+  if (index === 1) {
+    copyToClip(selectText.value);
+    ElMessage.success("复制成功");
+  }
+  if (index === 2) {
+    let sendText = "我想请你解释一下这个词语的含义：" + selectText.value;
+    readingBox.value?.changeHead(2);
+    readingBox.value?.readingBoxSend(sendText, '1');
+  }
+  if (index === 3) {
+    readingBox.value?.changeHead(3);
+    showAddNoteDialog.value = true;
+  }
+  if (index === 4) {
+    readingBox.value?.changeHead(4);
+    readingBox.value?.translateQuery(selectText.value);
+  }
+};
+
+const disShowShortMenu = () => { shortMenuShow.value = false; };
+
+const bindFileContentEvents = () => {
+  if (!fileContent.value) return;
+
+  fileContent.value.addEventListener('mouseup', function (event: MouseEvent) {
+    activeNoteIndex.value = -1;
+    displayFileNote();
+    removeHighlightSelectedWord();
+    setTimeout(() => {
+      const selection = window.getSelection();
+      if (!selection) return;
+      selectText.value = selection.toString();
+      let position = getGlobalSelectionPosition(selection);
+      positionInfo.value = position;
+      if (selectText.value && shortMenuDom.value && fileContent.value?.contains(selection.anchorNode)) {
+        let offset = getViewportOffsetByEvent(event);
+        shortMenuShow.value = true;
+        (shortMenuDom.value as HTMLElement).style.left = offset.left + 'px';
+        (shortMenuDom.value as HTMLElement).style.top = offset.top + 'px';
+      }
+    });
+  });
+
+  fileContent.value.addEventListener('scroll', () => {
+    let noteElement = document.getElementById('note-' + (activeNoteIndex.value + 1));
+    let noteContentElement = document.getElementById('note-content');
+    if (noteElement && noteContentElement) {
+      const rectNoteElement = noteElement.getBoundingClientRect();
+      let top = rectNoteElement.top - rectNoteElement.height - 8;
+      noteContentElement.style.top = top + 'px';
+      if (top < 75) noteContentElement.style.display = 'none';
+      else if (activeNoteIndex.value != -1) noteContentElement.style.display = 'block';
+    }
+  });
+};
+
+// ========================================
+// 笔记功能
+// ========================================
+const openAddNoteDialog = async () => {
+  await nextTick();
+  noteMsgRef.value?.focus();
+};
+
+const submitNote = async () => {
+  if (noteParam.value.id) {
+    noteParam.value.noteContent = noteMsg.value;
+    try {
+      let res = await withLoading(addFileNote)(noteParam.value);
+      if (res.code == 200) {
+        ElMessage.success('笔记修改成功');
+        showAddNoteDialog.value = false;
+        noteMsg.value = '';
+        await loadFileContent();
+      } else ElMessage.error('笔记修改失败');
+    } catch (error: any) { ElMessage.error(error?.message || '未知错误'); }
+  } else {
+    noteParam.value.fileId = selectedFile.value?.fileId;
+    noteParam.value.pstartId = positionInfo.value.parentStart || '';
+    noteParam.value.pendId = positionInfo.value.parentEnd || '';
+    noteParam.value.wordContent = selectText.value;
+    noteParam.value.startIndex = positionInfo.value.start;
+    noteParam.value.endIndex = positionInfo.value.end;
+    noteParam.value.noteContent = noteMsg.value;
+    try {
+      let res = await withLoading(addFileNote)(noteParam.value);
+      if (res.code == 200) {
+        ElMessage.success('笔记添加成功');
+        showAddNoteDialog.value = false;
+        noteMsg.value = '';
+        await loadFileContent();
+      } else ElMessage.error('笔记添加失败');
+    } catch (error: any) { ElMessage.error(error?.message || '未知错误'); }
+  }
+};
+
+const displayFileNote = () => {
+  const noteElements = document.querySelectorAll('span[id^="note-"]');
+  noteElements.forEach((element) => { element.classList.remove('note-flag-active'); });
+  let noteContentElement = document.getElementById('note-content');
+  if (noteContentElement) noteContentElement.style.display = 'none';
+  const previousHighlights = document.querySelectorAll('.highlight');
+  previousHighlights.forEach(highlight => {
+    const parent = highlight.parentNode!;
+    const textNode = document.createTextNode(highlight.textContent || '');
+    parent.replaceChild(textNode, highlight);
+    parent.normalize();
+  });
+};
+
+const showFileNote = (note: any, isPosition: boolean = false) => {
+  displayFileNote();
+  if (!note) return;
+  let noteElement = document.getElementById('note-' + (activeNoteIndex.value + 1));
+  let noteContentEl = document.getElementById('note-content');
+  let fileContentEl = document.getElementById("file-content");
+  if (!fileContentEl) return;
+  const rectFileContent = fileContentEl.getBoundingClientRect();
+  if (noteElement) {
+    noteElement.classList.add('note-flag-active');
+    highlightSelectedWord(note);
+    if (isPosition) {
+      let selectedElements = document.querySelectorAll('mark[class^="highlight"]');
+      if (selectedElements.length > 0) selectedElements[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+    noteContent.value = note.noteContent;
+    const rectNoteElement = noteElement.getBoundingClientRect();
+    if (noteContentEl) {
+      noteContentEl.innerHTML = noteContent.value;
+      noteContentEl.style.display = 'block';
+      let rectNoteContentElement = noteContentEl.getBoundingClientRect();
+      let left = rectNoteElement.left - 10;
+      if (left + rectNoteContentElement.width > rectFileContent.width) left = rectFileContent.width - rectNoteContentElement.width;
+      noteContentEl.style.left = left + 'px';
+      noteContentEl.style.top = rectNoteElement.top - rectNoteElement.height - 8 + 'px';
+    }
+  }
+};
+
+const highlightSelectedWord = (note: any) => {
+  if (!note) return;
+  let marked = new Mark('#file-html-content');
+  marked.markRanges([{ start: note.startIndex, length: note.endIndex - note.startIndex }], {
+    className: 'highlight', exclude: ['.note-flag']
+  });
+};
+
+const removeHighlightSelectedWord = () => {
+  const previousHighlights = document.querySelectorAll('.highlight');
+  previousHighlights.forEach(highlight => {
+    const parent = highlight.parentNode!;
+    const textNode = document.createTextNode(highlight.textContent || '');
+    parent.replaceChild(textNode, highlight);
+  });
+};
+
+const handelNoteFlagMouseEvent = () => {
+  const noteElements = document.querySelectorAll('span[id^="note-"]');
+  noteElements.forEach((element) => {
+    element.addEventListener('mouseover', () => {
+      showFileNoteEvent.value = 'mouseover';
+      let elementId = Number(element.id.replace('note-', ''));
+      for (let i = 0; i < fileNote.notes.length; i++) {
+        if (i + 1 == elementId) { activeNoteIndex.value = i; showFileNote(fileNote.notes[i]); break; }
+      }
+    });
+    element.addEventListener('mouseleave', () => {
+      if (showFileNoteEvent.value === 'mouseover') { activeNoteIndex.value = -1; displayFileNote(); }
+    });
+    element.addEventListener('click', async (e) => {
+      showFileNoteEvent.value = 'click';
+      let elementId = Number(element.id.replace('note-', ''));
+      for (let i = 0; i < fileNote.notes.length; i++) {
+        if (i + 1 == elementId) { activeNoteIndex.value = i; break; }
+      }
+      readingBox.value?.changeHead(3);
+      await nextTick();
+      let rightNoteElement = document.getElementById('right-note-' + elementId);
+      if (rightNoteElement) rightNoteElement.scrollIntoView({ behavior: 'smooth' });
+      showFileNote(fileNote.notes[activeNoteIndex.value]);
+      e.stopPropagation();
+    });
+  });
+};
+
+// ========================================
+// 文件夹操作
+// ========================================
 const createFolder = (item: any = null) => {
   if (item) {
     submitFolderParam.id = item.id;
-    submitFolderParam.name = item.name;
-    dialogTitle.value = "重命名文件夹";
-    dialogVisible.value = true;
-    return;
+    submitFolderParam.name = item.label || item.name;
+    folderDialogTitle.value = "重命名文件夹";
+  } else {
+    submitFolderParam.id = 0;
+    submitFolderParam.name = "";
+    folderDialogTitle.value = "新建文件夹";
   }
+  folderDialogVisible.value = true;
+};
 
-  submitFolderParam.name = "";
-  submitFolderParam.id=0;
-  dialogTitle.value = "新建文件夹";
-  dialogVisible.value = true;
-}
-
-/**
- * 批量删除
- */
-const delBatch = async () => {
-  let selectedMaterialList = materialList.value.filter(item => item.checked)
-
-  if (selectedMaterialList.length === 0) {
-    ElMessage.warning('请选择要删除的文件夹');
-    return;
-  }
-
-  ElMessageBox.confirm("确定删除文件夹？", "提示", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  }).then(async () => {
-    let errorList: string[] = [];
-    await withLoading(delBatchSubmit)(selectedMaterialList, errorList);
-
-    if (errorList.length > 0) {
-      ElMessage.error(`文件夹${errorList.join('、')}删除失败`);
-    } else {
-      ElMessage.success('文件夹删除成功')
-    }
-
-    getMyMaterialList();
-  }).catch(() => {
-
-  })
-}
-
-/**
- * 循环调用删除接口，实现批量删除
- * @param selectedMaterialList
- * @param errorList
- */
-const delBatchSubmit = async (selectedMaterialList: any, errorList: string[]) => {
-  for (let i = 0; i < selectedMaterialList.length; i++) {
-    try {
-      let res = await delKnowledgeBase<JSON>({
-        knowledgeBaseId: selectedMaterialList[i].id + "",
-        folderType: "0"
-      })
-
-      if (!res || res.code != 200) {
-        errorList.push(selectedMaterialList[i].name);
-      }
-
-    } catch (error: any) {
-      errorList.push(selectedMaterialList[i].name);
-    }
-  }
-}
-
-/**
- * 提交
- */
 const submitFolderName = async () => {
   if (submitFolderParam.name.trim().length === 0) {
     ElMessage.warning("请输入文件夹名称");
     return;
   }
-  if (submitFolderParam.id != 0) {
-    submitUpdateFolder();
-    return;
-  }
-  submitCreateFolder();
-}
-
-/**
- * 新建文件夹
- */
-const submitCreateFolder = async () => {
   try {
-    let res = await withLoading(addKnowledgeBase<JSON>)({
-      name: submitFolderParam.name.trim()
-    })
-    if (res && res.code === 200) {
-      ElMessage.success("文件夹创建成功");
-      dialogVisible.value = false;
-      getMyMaterialList();
+    if (submitFolderParam.id !== 0) {
+      let res = await withLoading(editKnowledgeBase<any>)({
+        id: submitFolderParam.id + "", name: submitFolderParam.name.trim(), folderType: "0"
+      });
+      if (res?.code === 200) ElMessage.success("重命名成功");
+      else ElMessage.error(res.msg);
     } else {
-      ElMessage.error(res.msg);
+      let res = await withLoading(addKnowledgeBase<any>)({ name: submitFolderParam.name.trim() });
+      if (res?.code === 200) ElMessage.success("文件夹创建成功");
+      else ElMessage.error(res.msg);
     }
-  } catch (error: any) {
-    ElMessage.error(error && error.message ? error.message : '未知错误');
-  }
-}
+    folderDialogVisible.value = false;
+    await loadTreeData();
+  } catch (error: any) { ElMessage.error(error?.message || '未知错误'); }
+};
 
-/**
- * 重命名文件夹
- */
-const submitUpdateFolder = async () => {
+const delFolder = async (item: any) => {
+  ElMessageBox.confirm("确定删除该文件夹？", "提示", {
+    confirmButtonText: "确定", cancelButtonText: "取消", type: "warning",
+  }).then(async () => {
+    try {
+      let res = await withLoading(delKnowledgeBase<any>)({ knowledgeBaseId: item.id + "", folderType: "0" });
+      if (res?.code === 200) { ElMessage.success("删除成功"); await loadTreeData(); }
+      else ElMessage.error(res.msg);
+    } catch (error: any) { ElMessage.error(error?.message || '未知错误'); }
+  }).catch(() => {});
+};
+
+const delBatch = () => {
+  ElMessage.info("请使用文件夹或文件旁的操作菜单进行删除");
+};
+
+// ========================================
+// 文件操作
+// ========================================
+const renameFile = (data: any) => {
+  const filename = data.label || data.raw?.filename;
+  if (filename) {
+    let names = filename.split('.');
+    renameDocName.value = names[0];
+    renameDocType.value = names.length >= 2 ? names[names.length - 1] : '';
+  }
+  renameDocId.value = data.id;
+  showRenameDialog.value = true;
+};
+
+const saveDocName = async () => {
+  if (!renameDocName.value.trim()) { ElMessage.error("请输入文件名"); return; }
+  let param = new FormData();
+  param.append('fileId', renameDocId.value + '');
+  param.append('fileName', renameDocName.value + (renameDocType.value ? '.' + renameDocType.value : ''));
+  param.append('folderId', '0');
   try {
-    let res = await withLoading(editKnowledgeBase<JSON>)({
-      id: submitFolderParam.id + "",
-      name: submitFolderParam.name.trim(),
-      folderType: "0"
-    })
+    await withLoading(editFile)(param);
+    ElMessage.success("修改成功");
+    showRenameDialog.value = false;
+    await refreshCurrentFolder();
+  } catch { ElMessage.error("修改失败"); }
+};
 
-    if (res && res.code === 200) {
-      ElMessage.success("文件夹重命名成功");
-      dialogVisible.value = false;
-      getMyMaterialList();
-    } else {
-      ElMessage.error(res.msg);
+const downLoadDoc = async (data: any) => {
+  try {
+    const response = await downloadFile({ fileId: data.id });
+    const url = URL.createObjectURL(new Blob([response]));
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute('download', data.label || data.raw?.filename);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  } catch (error: any) { ElMessage.error(error?.message || '下载失败'); }
+};
+
+const delFile = (data: any) => {
+  ElMessageBox.confirm("确认删除文档吗？", "提示", {
+    confirmButtonText: "确定", cancelButtonText: "取消", type: "warning",
+  }).then(async () => {
+    try {
+      let res = await withLoading(delFiles)({ fileList: [data.id], folderList: [] });
+      if (res?.code === 200) {
+        ElMessage.success("删除成功");
+        if (selectedFile.value?.fileId === data.id) { selectedFile.value = null; docHtml.value = ''; }
+        await refreshCurrentFolder();
+      } else ElMessage.error("删除失败");
+    } catch { ElMessage.error("删除失败"); }
+  }).catch(() => {});
+};
+
+const refreshCurrentFolder = async () => {
+  // 重新加载所有已展开的文件夹
+  for (let folder of treeData.value) {
+    if (folder.loaded) {
+      folder.loaded = false;
+      await loadFolderFiles(folder);
     }
-  } catch (error: any) {
-    ElMessage.error(error && error.message ? error.message : '未知错误');
-  }
-}
-
-/**
- * 关闭创建文件夹/重命名文件夹弹框
- */
-const cancelSubmitFolderName = () => {
-  dialogVisible.value = false;
-}
-
-/**
- * 显示修改文件名称、删除按钮
- * @param index
- */
-const showOperates = (index: number) => {
-  showOperatesIndex.value = index;
-}
-
-/**
- * 关闭文件夹操作弹框
- */
-const closeOperates = () => {
-  if (showOperatesIndex.value != -1) {
-    showOperatesIndex.value = -1;
   }
 };
 
-/**
- * 删除文件夹
- */
-const delFolder = async (item: any) => {
-  ElMessageBox.confirm("确定删除该文件夹？", "提示", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  }).then(async () => {
-    try {
-      let res = await withLoading(delKnowledgeBase<JSON>)({
-        knowledgeBaseId: item.id + "",
-        folderType: "0"
-      })
+// ========================================
+// 上传文件
+// ========================================
+const uploadToFolder = async (data: any) => {
+  uploadFolderId.value = data.id;
+  await getUploadedSize();
+  showUploadDialog.value = true;
+  if (uploadFinishFlag.value) uploadingFileList.value = [];
+};
 
-      if (res && res.code === 200) {
-        ElMessage.success("文件夹删除成功");
-        getMyMaterialList();
-      } else {
-        ElMessage.error(res.msg);
+const getUploadedSize = async () => {
+  try {
+    let res = await getSize();
+    if (res.code === 200) totalFileSize.value = res.data;
+  } catch {}
+};
+
+const handleFileChange = async (file: UploadFile) => {
+  const fileExtension = file.name.split('.').pop()?.toUpperCase();
+  if (!allowFileTypes.includes(fileExtension as string)) {
+    ElMessage.warning(file.name + '文件格式不匹配');
+    return;
+  }
+  if (file.size && file.size > FILE_MAX_SIZE) {
+    ElMessage.warning(file.name + '文件大小已超过10M');
+    return;
+  }
+  totalFileSize.value += file.size || 0;
+  if (totalFileSize.value > TOTAL_FILE_MAX_SIZE) {
+    totalFileSize.value -= file.size || 0;
+    ElMessage.warning('个人素材总量不能超过50M');
+    return;
+  }
+  uploadingFileList.value.push(file as CusUploadFile);
+};
+
+watch(uploadingFileList, newVal => {
+  if (!isUploading.value) {
+    for (let i = 0; i < newVal.length; i++) {
+      if (newVal[i].status === 'ready') {
+        isUploading.value = true;
+        newVal[i].status = 'uploading';
+        startUpload();
+        break;
       }
-    } catch (error: any) {
-      ElMessage.error(error && error.message ? error.message : '未知错误');
     }
+  }
+}, { immediate: true, deep: true });
 
-  }).catch(() => {
-  })
-}
+const handleRemove = (file: UploadFile) => {
+  uploadingFileList.value = uploadingFileList.value.filter(item => item.uid !== file.uid);
+};
 
-onMounted(() => {
-  getMyMaterialList();
-  document.addEventListener('click', closeOperates);
-})
+const startUpload = async () => { await uploadNextFile(); };
 
-onUnmounted(() => {
-  document.removeEventListener('click', closeOperates);
+const uploadNextFile = async () => {
+  uploadFinishFlag.value = true;
+  for (let i = 0; i < uploadingFileList.value.length; i++) {
+    if (uploadingFileList.value[i].status !== 'success' && uploadingFileList.value[i].status !== 'fail') {
+      uploadFinishFlag.value = false;
+    }
+  }
+  if (uploadFinishFlag.value) { isUploading.value = false; return; }
+
+  const file = uploadingFileList.value[currentIndex.value];
+  file.status = 'uploading';
+  const formData = new FormData();
+  formData.append('files', file.raw as Blob);
+  formData.append('folderId', '0');
+  formData.append('knowledgeBaseId', uploadFolderId.value + '');
+
+  try {
+    let res = await uploadFile(formData);
+    if (res.code && res.code != 200) {
+      file.status = 'fail';
+      (file as CusUploadFile).message = res.msg;
+    } else {
+      file.status = 'success';
+    }
+  } catch (error: any) {
+    file.status = 'fail';
+    (file as CusUploadFile).message = error?.message || '未知错误';
+  } finally {
+    currentIndex.value++;
+    await uploadNextFile();
+  }
+};
+
+const closeUpload = () => {
+  showUploadDialog.value = false;
+  currentIndex.value = 0;
+  refreshCurrentFolder();
+};
+
+// ========================================
+// 工具函数
+// ========================================
+const getViewportOffsetByEvent = (evt: MouseEvent) => {
+  return { left: evt.clientX, top: evt.clientY };
+};
+
+// ========================================
+// 生命周期
+// ========================================
+onMounted(async () => {
+  await loadTreeData();
+  // 自动展开所有文件夹的文件
+  for (let folder of treeData.value) {
+    await loadFolderFiles(folder);
+  }
+
+  document.addEventListener('mousedown', (event: MouseEvent) => {
+    let execlute = document.getElementById('shortMenuDom');
+    if (execlute && execlute.contains(event.target as Node)) { /* noop */ }
+    else disShowShortMenu();
+  });
 });
 </script>
 
 <style lang="scss" scoped>
-.reading {
+.reading-layout {
+  display: flex;
+  height: 100%;
   width: 100%;
-  padding: 20px 50px;
-  position: relative;
+  overflow: hidden;
+}
 
-  .reading-header {
+// ========== 左栏 ==========
+.left-panel {
+  width: 280px;
+  min-width: 280px;
+  height: 100%;
+  background: #fff;
+  border-right: 1px solid #E6EDFF;
+  display: flex;
+  flex-direction: column;
+
+  .left-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    p {
-      width: 90px;
+    padding: 16px 16px 8px 16px;
+    .left-title {
       font-weight: bold;
-      font-size: 20px;
-      color: #000000;
+      font-size: 16px;
+      color: #000;
     }
-
-    .reading-operate {
-      width: 555px;
-      display: flex;
-      justify-content: space-between;
-
-      .reading-search {
-        cursor: pointer;
-        width: 16px;
-        height: 16px;
-      }
-
-      .reading-operate-btn {
-        height: 32px;
-        border-radius: 4px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-      }
-
-      .reading-operate-tip {
-        font-weight: normal;
-        font-size: 14px;
-        margin-left: 3px;
-      }
-
-      .reading-create {
-        width: 110px;
-        background: #004EA0;
-        text-align: center;
-        img {
-          width: 16px;
-        }
-        p {
-          width: 70px;
-          color: #FFFFFF;
-        }
-      }
-
-      .reading-del {
-        width: 96px;
-        background: #FFFFFF;
-        border: 1px solid #004EA0;
-        img {
-          width: 16px;
-        }
-        p {
-          width: 56px;
-          color: #004EA0;
-        }
-      }
+    .action-icon {
+      width: 18px;
+      height: 18px;
+      cursor: pointer;
+      opacity: 0.7;
+      &:hover { opacity: 1; }
     }
   }
 
-  .empty-list {
-    width: 100%;
-    height: calc(100% - 63px);
-    text-align: center;
-    position: relative;
-    .empty-list-container {
-      position: absolute;
-      top: 30%;
-      left: 50%;
-      transform: translate(-50%, -50%);
+  .left-search {
+    padding: 0 12px 8px 12px;
+  }
 
-      img {
-        width: 196px;
-        height: 196px;
+  .left-tree {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0 4px;
+
+    &::-webkit-scrollbar { width: 4px; }
+    &::-webkit-scrollbar-thumb { background: #D5DDFF; border-radius: 2px; }
+
+    :deep(.el-tree-node__content) {
+      height: auto;
+      padding: 2px 0;
+    }
+
+    .tree-node {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      padding: 4px 8px;
+      border-radius: 6px;
+
+      &:hover {
+        background: #F0F4FF;
+        .tree-node-actions { opacity: 1; }
       }
 
-      .empty-list-tips {
-        font-weight: bold;
-        font-size: 16px;
-        color: #000000;
+      &.is-selected-file {
+        background: #E0EAFF;
+      }
 
-        .go-create {
-          color: #004EA0;
+      .tree-node-content {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        min-width: 0;
+
+        .folder-icon {
+          width: 20px;
+          height: 18px;
+          margin-right: 6px;
+        }
+
+        .tree-file-icon {
+          font-size: 14px;
+          margin-right: 6px;
+        }
+
+        .tree-label {
+          font-size: 13px;
+          color: #333;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
           cursor: pointer;
         }
       }
-    }
 
-  }
+      .tree-node-actions {
+        opacity: 0;
+        margin-left: 4px;
 
-  .list {
-    display: flex;
-    flex-flow: row wrap;
-    .material-list-item {
-      width: 242px;
-      height: 70px;
-      background: #FFFFFF;
-      border-radius: 8px;
-      border: 1px solid #D5DDFF;
-      padding: 12px 14px 16px 20px;
-      display: flex;
-      justify-content: space-between;
-      margin-right: 16px;
-      margin-bottom: 10px;
-      img {
-        width: 45.39px;
-        height: 38px;
-      }
-      .material-list-item-info {
-        width: calc(100% - 57.39px);
-        margin-left: 12px;
-        position: relative;
-        .top {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          .title {
-            max-width: 136px;
-            font-weight: bold;
-            font-size: 16px;
-            color: #004EA0;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            cursor: pointer;
-          }
-          .operate-img {
-            width: 12px;
-            text-align: center;
-            cursor: pointer;
-            img {
-              width: 2px;
-              height: 11.11px;
-            }
-          }
-        }
-        .bottom {
-          text-align: right;
-          padding-right: 6px;
-        }
-        .operates {
-          width: 88px;
-          height: 72px;
-          background: #FFFFFF;
-          box-shadow: 0px 0px 8px 1px rgba(180,189,221,0.56);
-          border-radius: 8px 8px 8px 8px;
-          border: 1px solid #D5DDFF;
-          position: absolute;
-          top: 12px;
-          left: 151px;
-          z-index: 2;
-          .btn {
-            height: 36px;
-            text-align: center;
-            font-size: 14px;
-            line-height: 36px;
-            cursor: pointer;
-          }
-          .update-name {
-            color: #000000;
-            border-bottom: 1px solid #D5DDFF;
-          }
-          .del-folder {
-            color: #BE0000;
-          }
+        .tree-operate-icon {
+          width: 12px;
+          cursor: pointer;
+          padding: 4px;
         }
       }
     }
   }
-}
 
-.create-folder-dialog {
-  background: rgba(0, 0, 0, 0);
-  z-index: 999;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  .cus-container {
-    width: 715px;
-    background: #FFFFFF;
-    box-shadow: 0px 0px 8px 1px rgba(180,189,221,0.56);
-    border-radius: 16px 16px 16px 16px;
-    border: 1px solid #D5DDFF;
-    margin: 30vh auto;
-    .cus-header {
+  .left-footer {
+    padding: 8px 12px;
+    border-top: 1px solid #E6EDFF;
+
+    .batch-del-btn {
       display: flex;
-      justify-content: space-between;
       align-items: center;
-      padding: 16px 20px 16px 20px;
+      justify-content: center;
+      height: 32px;
+      border: 1px solid #004EA0;
+      border-radius: 4px;
+      cursor: pointer;
+      color: #004EA0;
+      font-size: 13px;
+
+      img { width: 14px; margin-right: 4px; }
+      &:hover { background: #F0F4FF; }
+    }
+  }
+}
+
+// ========== 中间栏 ==========
+.center-panel {
+  flex: 1;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .center-placeholder {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .placeholder-content {
+      text-align: center;
+      color: #999;
+      p { margin-top: 12px; font-size: 14px; }
+    }
+  }
+
+  .center-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    .center-header {
+      padding: 12px 20px;
       border-bottom: 1px solid #E6EDFF;
-      margin-bottom: 16px;
-      .cus-title {
+      background: #fff;
+
+      .center-title {
         font-weight: bold;
-        font-size: 18px;
-        color: #000000;
-      }
-      img {
-        width: 12px;
-        height: 12px;
-        cursor: pointer;
+        font-size: 16px;
+        color: #000;
       }
     }
-    .cus-content {
-      padding: 0 20px;
-      margin-bottom: 20px;
-    }
-    .cus-footer {
-      margin-bottom: 20px;
-      .submit {
-        width: 68px;
-        height: 32px;
+
+    .file-content {
+      flex: 1;
+      overflow: auto;
+      background: #FFFFFF;
+      margin: 10px;
+      box-shadow: 0px 0px 8px 1px rgba(180, 189, 221, 0.56);
+      border-radius: 12px;
+      position: relative;
+
+      .view-md {
+        padding: 24px;
+        position: relative;
+
+        :deep(p) {
+          font-size: 16px;
+          line-height: 1.8rem;
+          margin-block-start: 0;
+        }
+
+        :deep(.highlight) { background: #D0EAC8; }
+
+        :deep(.note-flag) {
+          width: 23px; height: 28px; line-height: 28px;
+          display: inline-block; text-align: center;
+          font-weight: bold; font-size: 10px; margin-left: 8px; cursor: pointer;
+          background: url("@/assets/images/reading/note.png");
+          color: #004EA0;
+          background-size: contain !important;
+          background-repeat: no-repeat !important;
+          background-position: center bottom !important;
+        }
+
+        :deep(.note-flag:hover) {
+          color: #FAFBFF;
+          background: url("@/assets/images/reading/note_active.png");
+        }
+
+        :deep(.note-flag-active) {
+          color: #FAFBFF;
+          background: url("@/assets/images/reading/note_active.png");
+        }
+      }
+
+      .file-note {
+        max-width: 240px; height: 36px; line-height: 36px;
+        padding: 0 12px; position: absolute; display: none;
         background: #004EA0;
-        border-radius: 4px;
-        font-size: 12px;
-        color: #FAFBFF;
-        text-align: center;
-        line-height: 32px;
-        margin: auto;
-        cursor: pointer;
+        box-shadow: 0px 0px 8px 1px rgba(180, 189, 221, 0.56);
+        border-radius: 8px; border: 1px solid #D5DDFF;
+        font-size: 14px; color: #FFFFFF;
+        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
       }
     }
   }
 }
-</style>
\ No newline at end of file
+
+// ========== 右栏 ==========
+.right-panel {
+  width: 400px;
+  min-width: 400px;
+  height: calc(100% - 20px);
+  margin: 10px 10px 10px 0;
+  background: linear-gradient(180deg, rgba(178, 226, 255, 0.4) 0%, rgba(106, 148, 255, 0.4) 100%);
+  box-shadow: 0 0 8px 1px rgba(180, 189, 221, 0.56);
+  border-radius: 16px;
+  overflow: hidden;
+
+  .right-placeholder {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .placeholder-content {
+      text-align: center;
+      color: #999;
+      .placeholder-title { margin-top: 12px; font-size: 16px; font-weight: bold; color: #666; }
+      .placeholder-sub { margin-top: 4px; font-size: 13px; }
+    }
+  }
+}
+
+// ========== 右键菜单 ==========
+.click-bar-button {
+  height: 36px; padding: 0 4px;
+  background: #FFFFFF;
+  box-shadow: 0px 0px 8px 1px rgba(180, 189, 221, 0.56);
+  border-radius: 8px; border: 1px solid #D5DDFF;
+  display: flex; justify-content: space-evenly; align-items: center;
+  position: fixed; z-index: 9999; font-size: 14px;
+
+  .menu-name { line-height: 36px; cursor: pointer; padding: 0 12px; }
+  .menu-name:hover { color: #004EA0; }
+  .vertical-line { height: 16px; width: 2px; background-color: #D5DDFF; }
+}
+
+// ========== 上传弹框 ==========
+.upload-demo {
+  width: 100%; text-align: center;
+  .el-upload__tip { text-align: center; margin-top: 12px; }
+}
+
+.files-upload-result {
+  max-height: 210px; overflow-y: auto; margin-top: 16px;
+  .result {
+    height: 30px; display: flex; justify-content: space-between; align-items: center;
+    .file-name {
+      width: 434px; font-size: 14px; color: #606771;
+      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 10px;
+    }
+    .result-info {
+      display: flex; align-items: center;
+      .fail-msg { width: 192px; text-align: right; font-size: 12px; color: #BD0000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 8px; }
+      .loading { width: 38px; height: 38px; }
+      img { width: 14px; margin-right: 10px; }
+      .upload-remove { cursor: pointer; }
+    }
+  }
+}
+
+.dialog-tips {
+  font-size: 12px; color: #858A94; margin-top: 8px;
+  display: flex; align-items: center; justify-content: center;
+  img { width: 12px; height: 12px; margin-right: 3px; }
+}
+</style>