修改通用chat页面，修改会话管理页面，添加文件上传功能、文件管理功能（未全部完成）

README.md

@@ -1,306 +1,72 @@
 <template>
-  <div class="chat-container">
+    <div>
-    <!-- 消息列表 -->
+      <el-upload
-    <el-card class="chat-messages" shadow="never" ref="messageContainer">
+        class="upload-demo"
-      <div
+        action="http://localhost:8080/upload"
-        v-for="(message, index) in messages"
+        :data="uploadData"
-        :key="index"
+        :headers="headers"
-        :class="['message', message.role]"
+        :on-success="handleSuccess"
+        :on-error="handleError"
+        :before-upload="beforeUpload"
+        ref="uploadRef"
       >
-        <div class="message-avatar">
+        <el-button size="small" type="primary">点击上传</el-button>
-          <span v-if="message.role === 'assistant'">💬</span>
+      </el-upload>
-          <span v-else>👤</span>
+    </div>
-        </div>
+  </template>
-        <div class="message-content">
-          <div v-html="renderMarkdown(message.content)"></div>
-        </div>
-      </div>
-      <div v-if="loading" class="loading-indicator">Loading...</div>
-    </el-card>
   
-    <!-- 输入区域 -->
+  <script lang="ts">
-    <el-card class="chat-input" shadow="never">
+  import { defineComponent, ref } from 'vue';
-      <el-row :gutter="10">
-        <el-col :span="20">
-          <el-input
-            v-model="inputMessage"
-            type="textarea"
-            :rows="2"
-            placeholder="输入消息..."
-            @keyup.enter="sendMessage"
-          />
-        </el-col>
-        <el-col :span="4">
-          <el-button type="primary" @click="sendMessage">Send</el-button>
-        </el-col>
-      </el-row>
-    </el-card>
-  </div>
-</template>
   
-<script setup lang="ts">
+  interface UploadData {
-import { ref, onMounted, onUnmounted, reactive, nextTick } from "vue";
+    upload_type: string;
-import { ElCard, ElInput, ElButton } from "element-plus";
+    auth_type: string;
-import { WSMessage, AIQMessage, OllamaMessage } from "@/types/im";
+    md5: string;
-import { ElMessage } from "element-plus";
+    type: string;
-import { GetMessageService } from "@/api/im";
-import MarkdownIt from "markdown-it";
-import hljs from "highlight.js";
-import bash from "highlight.js/lib/languages/bash";
-import javascript from "highlight.js/lib/languages/javascript";
-import typescript from "highlight.js/lib/languages/typescript";
-import java from "highlight.js/lib/languages/java";
-import sql from "highlight.js/lib/languages/sql";
-import nginx from "highlight.js/lib/languages/nginx";
-import json from "highlight.js/lib/languages/json";
-import yaml from "highlight.js/lib/languages/yaml";
-import xml from "highlight.js/lib/languages/xml";
-import shell from "highlight.js/lib/languages/shell";
-interface Message {
-  role: "user" | "assistant";
-  content: string;
-  finished?: boolean;
-}
-hljs.registerLanguage("bash", bash);
-hljs.registerLanguage("javascript", javascript);
-hljs.registerLanguage("typescript", typescript);
-hljs.registerLanguage("java", java);
-hljs.registerLanguage("sql", sql);
-hljs.registerLanguage("nginx", nginx);
-hljs.registerLanguage("json", json);
-hljs.registerLanguage("yaml", yaml);
-hljs.registerLanguage("xml", xml);
-hljs.registerLanguage("shell", shell);
-
-const md = new MarkdownIt({
-  html: true,
-  linkify: true,
-  breaks: true,
-  xhtmlOut: true,
-  typographer: true,
-  highlight: function (str, lang) {
-    if (lang && hljs.getLanguage(lang)) {
-      try {
-        return (
-          '<pre class="hljs"><code>' +
-          hljs.highlight(lang, str, true).value +
-          "</code></pre>"
-        );
-      } catch (__) {}
-    }
-
-    return (
-      '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + "</code></pre>"
-    );
-  },
-});
-
-const loading = ref(false);
-const isUserScrolling = ref<boolean>(false);
-const messages = reactive([]);
-const inputMessage = ref("");
-const socket = ref(null);
-const currentAIMessage = ref("");
-const messageContainer = ref(null);
-const sessionID = ref(0);
-
-const renderMarkdown = (content: string) => {
-  return md.render(content);
-};
-
-onMounted(() => {
-  let url =
-    "wss://pm.ljsea.top/im/ai_chat_ws?" +
-    "token=" +
-    localStorage.getItem("token");
-  socket.value = new WebSocket(url);
-  socket.value.onopen = () => {
-    console.log("WebSocket 连接已建立");
-    ElMessage.success("连接成功");
-  };
-
-  const container = document.querySelector('.messages-wrapper') as HTMLElement | null;
-      if (container) {
-        container.addEventListener('scroll', handleScroll);
-      }
-
-  socket.value.onmessage = (event) => {
-    let msg: WSMessage = JSON.parse(event.data);
-    const existingMessage = messages.find(
-      (msg) => msg.role === "assistant" && !msg.finished
-    );
-    // if (msg.msg.msg.done) {
-    //   messages.push({ role: 'assistant', content: currentAIMessage.value });
-    //   currentAIMessage.value = '';
-    //   scrollToBottom();
-    //   return;
-    // }
-    if (existingMessage) {
-      // 追加内容
-      existingMessage.content += msg.msg.msg.response;
-    } else {
-      // 新消息
-      messages.push({
-        role: "assistant",
-        content: msg.msg.msg.response,
-        finished: false,
-      });
-    }
-    console.log("resp:", msg);
-    sessionID.value = msg.session_id;
-    currentAIMessage.value += msg.msg.msg.response;
-    scrollToBottom();
-    if (msg.msg.msg.done) {
-      const assistantMessage = messages[messages.length - 1];
-      assistantMessage.finished = true;
-    }
-  };
-
-  socket.value.onclose = () => {
-    console.log("WebSocket 连接已关闭");
-    ElMessage.error("连接已关闭");
-  };
-
-  socket.value.onerror = (error) => {
-    console.error("WebSocket 发生错误:", error);
-  };
-});
-
-onUnmounted(() => {
-  if (socket.value) {
-    socket.value.close();
   }
-});
   
-const sendMessage = () => {
+  export default defineComponent({
-  let msg = {
+    setup() {
-    msg: inputMessage.value,
+      const uploadData: UploadData = {
-    type: "ollama",
+        upload_type: 'your_upload_type',
-    function: "gen-ai-chat",
+        auth_type: 'your_auth_type',
-    session_id: sessionID.value,
+        md5: 'your_md5_value',
-  };
+        type: 'your_type'
-  if (inputMessage.value.trim() === "") return;
+      };
-  messages.push({ role: "user", content: inputMessage.value, finished: true });
-  socket.value.send(JSON.stringify(msg));
-  inputMessage.value = "";
-  //getMessage();
-  scrollToBottom();
-};
   
-const scrollToBottom = (): void => {
+      const headers = {
-  nextTick(() => {
+        'Content-Type': 'multipart/form-data'
-    if (messageContainer.value && !isUserScrolling.value) {
+      };
-      messageContainer.value.scrollTop = messageContainer.value.scrollHeight;
+  
+      const uploadRef = ref(null);
+  
+      const handleSuccess = (response: any, file: any, fileList: any) => {
+        console.log('上传成功', response);
+      };
+  
+      const handleError = (error: any, file: any, fileList: any) => {
+        console.log('上传失败', error);
+      };
+  
+      const beforeUpload = (file: any) => {
+        // 可以在这里进行文件验证等操作
+        return true;
+      };
+  
+      return {
+        uploadData,
+        headers,
+        uploadRef,
+        handleSuccess,
+        handleError,
+        beforeUpload
+      };
     }
   });
-};
+  </script>
   
-// 监听用户滚动行为，判断是否在手动滚动历史消息
+  <style scoped>
-const handleScroll = (): void => {
+  .upload-demo {
-  const container = document.querySelector(
+    margin-top: 20px;
-    ".messages-wrapper"
-  ) as HTMLElement | null;
-  if (container) {
-    const scrollBottom =
-      container.scrollHeight - container.scrollTop - container.clientHeight;
-    isUserScrolling.value = scrollBottom > 50; // 如果距离底部超过50px，则认为在查看历史消息
   }
-};
+  </style>    
-
-const getMessage = async () => {
-  let result = {};
-  try {
-    let req = {
-      token: localStorage.getItem("token"),
-      session_id: sessionID.value,
-    };
-    result = await GetMessageService(req);
-    if (result["code"] === 0) {
-      console.log(result["data"]);
-    }
-  } catch (e) {
-    console.log(e);
-  }
-  return {};
-};
-</script>
-
-<style scoped>
-.chat-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%; /* 使用视口高度确保容器占满整个屏幕 */
-  padding: 20px;
-  box-sizing: border-box;
-}
-
-.chat-messages {
-  flex: 1;
-  overflow-y: auto; /* 允许垂直滚动 */
-  padding: 10px;
-  margin-bottom: 20px;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-}
-
-.messages-wrapper {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end; /* 默认将新消息对齐到底部 */
-  overflow-y: auto; /* 确保内部可以滚动 */
-  height: 100%;
-}
-
-.message {
-  display: flex;
-  margin-bottom: 15px;
-}
-
-.message.user {
-  justify-content: flex-end;
-}
-
-.message-avatar {
-  width: 40px;
-  text-align: center;
-  line-height: 40px;
-  font-size: 20px;
-  margin-right: 10px;
-}
-
-.message.assistant .message-avatar {
-  margin-right: 0;
-  margin-left: 10px;
-}
-
-.message-content {
-  background-color: #f0f9eb;
-  border: 1px solid #e1f3d8;
-  border-radius: 4px;
-  padding: 10px 15px;
-  white-space: pre-wrap;
-  max-width: 70%;
-}
-
-.message.assistant .message-content {
-  background-color: #f3f4f6;
-  border: 1px solid #dce4eb;
-  max-width: 70%;
-}
-
-.loading-indicator {
-  text-align: center;
-  color: #999;
-  font-size: 16px;
-}
-
-.chat-input {
-  width: 100%;
-}
-
-.el-input {
-  width: 100%;
-}
-</style>

src/api/file.ts

@@ -0,0 +1,49 @@
+import request from '@/utils/request2';
+
+export const FindUserFileService = (Data) => {
+    const params = new URLSearchParams();
+    for (let key in Data) {
+        params.append(key, Data[key])
+    }
+    return request.post('/file/file_list', params,{
+        headers: {
+            'token': Data.token, //token
+        }
+    })
+}
+
+export const AddUserFileService = (Data) => {
+    const params = new URLSearchParams();
+    for (let key in Data) {
+        params.append(key, Data[key])
+    }
+    return request.post('/model/create', params,{
+        headers: {
+            'token': Data.token, //token
+        }
+    })
+}
+
+export const UpdateUserFileService = (Data) => {
+    const params = new URLSearchParams();
+    for (let key in Data) {
+        params.append(key, Data[key])
+    }
+    return request.post('/file/file_update', params,{
+        headers: {
+            'token': Data.token, //token
+        }
+    })
+}
+
+export const DelUserFileService = (Data) => {
+    const params = new URLSearchParams();
+    for (let key in Data) {
+        params.append(key, Data[key])
+    }
+    return request.post('/file/file_delete', params,{
+        headers: {
+            'token': Data.token, //token
+        }
+    })
+}

src/components/menu.ts

@@ -36,7 +36,13 @@ export const menuData: Menus[] = [
                 pid: '1',
                 index: '/function',
                 title: '功能管理',
-            }
+            },
+            {
+                id: '56',
+                pid: '1',
+                index: '/manage-file',
+                title: '文件管理',
+            },
 
         ],
     },

src/router/index.ts

@@ -50,6 +50,15 @@ const routes: RouteRecordRaw[] = [
                 },
                 component: () => import(/* webpackChunkName: "system-user" */ '../views/system/function.vue'),
             },
+            {
+                path: '/manage-file',
+                name: 'manage-file',
+                meta: {
+                    title: '文件管理',
+                    permiss: '56',
+                },
+                component: () => import(/* webpackChunkName: "system-user" */ '../views/system/manage-file.vue'),
+            },
             {
                 path: '/manage-session',
                 name: 'manage-session',

src/store/permiss.ts

@@ -52,6 +52,7 @@ export const usePermissStore = defineStore('permiss', {
                     '53', //通用人机对话
                     '54', //功能管理
                     '55', //提示词生成
+                    '56', //文件管理
                 ],
                 user: ['0', '8', '7','9',  '61','53'],
             },

src/types/file.ts

@@ -0,0 +1,6 @@
+export interface File {
+    name: string;
+    size: number;
+    type: string;
+    lastModified: number;
+}

src/views/element/upload.vue

@@ -1,11 +1,13 @@
 <template>
     <div class="container">
         <div class="content-title">支持拖拽</div>
-        <div class="plugins-tips">
+        <el-upload class="upload-demo" drag 
-            Element Plus自带上传组件。 访问地址：
+           action="https://pm.ljsea.top/file/upload" multiple
-            <a href="https://element-plus.org/zh-CN/component/upload.html" target="_blank">Element Plus Upload</a>
+           :data="uploadData"
-        </div>
+           :headers="headers"
-        <el-upload class="upload-demo" drag action="http://jsonplaceholder.typicode.com/api/posts/" multiple
+            :on-success="handleSuccess"
+            :on-error="handleError"
+            :before-upload="beforeUpload"
             :on-change="handle">
             <el-icon class="el-icon--upload"><upload-filled /></el-icon>
             <div class="el-upload__text">
@@ -13,20 +15,51 @@
                 <em>点击上传</em>
             </div>
         </el-upload>
-
-        <div class="content-title">支持裁剪</div>
-        <div class="plugins-tips">
-            vue-cropper：一个简单的vue图片裁剪插件。 访问地址：
-            <a href="https://github.com/xyxiao001/vue-cropper" target="_blank">vue-cropper</a>。 示例请查看
-            <router-link to="/ucenter">个人中心-我的头像</router-link>
-        </div>
     </div>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue';
+import { ElMessage } from 'element-plus';
 const handle = (rawFile: any) => {
     console.log(rawFile);
 };
+
+interface UploadData {
+    upload_type: string;
+    auth_type: string;
+    md5: string;
+    type: string;
+  }
+const uploadData: UploadData = {
+    upload_type: 'file',
+    auth_type: 'public',
+    md5: '',
+    type: 'file',
+};
+const headers = {
+        "token": localStorage.getItem('token') || '',
+      };
+
+      const handleSuccess = (response: any, file: any, fileList: any) => {
+        let res = response;
+        if (res.code !== 0){
+            ElMessage.error(res.error);
+            return;
+        }
+        console.log('上传成功', res);
+        ElMessage.success('上传成功');
+      };
+  
+      const handleError = (error: any, file: any, fileList: any) => {
+        console.log('上传失败', error);
+        ElMessage.error('上传失败');
+      };
+  
+      const beforeUpload = (file: any) => {
+        // 可以在这里进行文件验证等操作
+        return true;
+      };
 </script>
 
 <style scoped>
@@ -39,6 +72,6 @@ const handle = (rawFile: any) => {
 }
 
 .upload-demo {
-    width: 360px;
+    width: 30%;
 }
 </style>

src/views/system/file-chat.vue

@@ -0,0 +1,9 @@
+<template>
+
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+</style>

src/views/system/gen-chat.vue

@@ -2,9 +2,9 @@
   <div class="chat-app">
     <!-- 历史会话侧边栏 -->
     <div class="history-sessions" v-if="sessionIsShow">
-        <div >
+      <div>
-          <el-button type="primary" @click="clearCurrent">新会话</el-button>
+        <el-button type="primary" @click="clearCurrent">新会话</el-button>
-        </div>
+      </div>
       <el-card class="session-card">
         <template #header>
           <h3>当前会话</h3>
@@ -30,21 +30,26 @@
         </el-scrollbar>
       </el-card>
     </div>
+    <div>
+      <div @click="showSession" style="cursor: pointer">
+        <el-icon v-if="sessionIsShow">
+          <Expand />
+        </el-icon>
+        <el-icon v-else>
+          <Fold />
+        </el-icon>
+      </div>
+    </div>
 
     <!-- 原有的聊天区域 -->
     <div class="chat-container">
-      <div>
-        <div @click="showSession" style="cursor: pointer">
-          <el-icon v-if="sessionIsShow">
-            <Expand />
-          </el-icon>
-          <el-icon v-else>
-            <Fold />
-          </el-icon>
-        </div>
-      </div>
       <!-- 消息列表 -->
-      <el-card class="chat-messages" shadow="never" ref="messagesContainer" v-if="messages.length > 0">
+      <el-card
+        class="chat-messages"
+        shadow="never"
+        ref="messagesContainer"
+        v-if="messages.length > 0"
+      >
         <div
           v-for="(message, index) in messages"
           :key="index"
@@ -58,8 +63,12 @@
             <div v-html="renderMarkdown(message.content)"></div>
             <!-- 添加复制 -->
             <div>
-            <el-button type="text" :icon="DocumentCopy" @click="copyMessage(message.content)"></el-button>
+              <el-button
-          </div>
+                type="text"
+                :icon="DocumentCopy"
+                @click="copyMessage(message.content)"
+              ></el-button>
+            </div>
           </div>
         </div>
         <div v-if="loading" class="loading-indicator">Loading...</div>
@@ -72,14 +81,24 @@
             <el-input
               v-model="inputMessage"
               type="textarea"
-              :rows="2"
+              :rows="5"
               placeholder="输入消息..."
               @keyup.enter="sendMessage"
             />
-            <el-text v-model="inputMessage" aria-placeholder="输入信息...."></el-text>
+            <el-text
+              v-model="inputMessage"
+              aria-placeholder="输入信息...."
+            ></el-text>
           </el-col>
           <el-col :span="4" style="text-align: center">
-            <el-button  @click="sendMessage" type="success" :icon="Check" round :disabled="loading">发送</el-button>
+            <el-button
+              @click="sendMessage"
+              type="success"
+              :icon="Check"
+              round
+              :disabled="loading"
+              >发送</el-button
+            >
           </el-col>
         </el-row>
       </el-card>
@@ -93,13 +112,13 @@ import { ElCard, ElInput, ElButton } from "element-plus";
 import { WSMessage, AIQMessage, OllamaMessage } from "@/types/im";
 import { ElMessage } from "element-plus";
 import { GetMessageService } from "@/api/im";
-import {Check, Loading, DocumentCopy} from '@element-plus/icons-vue'
+import { Check, Loading, DocumentCopy } from "@element-plus/icons-vue";
 import MarkdownIt from "markdown-it";
 import hljs from "highlight.js";
 import { Session } from "@/types/session";
 import { FindSessionService } from "@/api/session";
-import markdownItHighlightjs from 'markdown-it-highlightjs';
+import markdownItHighlightjs from "markdown-it-highlightjs";
-import markdownItKatex from 'markdown-it-katex';
+import markdownItKatex from "markdown-it-katex";
 import mermaidPlugin from "@agoose77/markdown-it-mermaid";
 import "katex/dist/katex.min.css";
 interface Message {
@@ -147,34 +166,34 @@ const copyCode = (code: string) => {
 };
 
 const doButtonD = () => {
-  const codeBlocks = document.querySelectorAll('pre code');
+  const codeBlocks = document.querySelectorAll("pre code");
   codeBlocks.forEach((codeBlock) => {
     //先查看是否已经添加了复制按钮
-    if (codeBlock.parentNode.querySelector('.code-controls')) {
+    if (codeBlock.parentNode.querySelector(".code-controls")) {
       return;
     }
 
     // 获取代码类型
-    const codeType = codeBlock.className.replace('hljs ', '');
+    const codeType = codeBlock.className.replace("hljs ", "");
     // 创建代码类型显示元素
-    const codeTypeElement = document.createElement('span');
+    const codeTypeElement = document.createElement("span");
-    codeTypeElement.textContent = codeType.split('-')[1];
+    codeTypeElement.textContent = codeType.split("-")[1];
     codeTypeElement.setAttribute("background-color", "rgba(0, 0, 0, 0.1)");
     codeTypeElement.setAttribute("padding", "3px 6px");
     codeTypeElement.setAttribute("border-radius", "4px");
     codeTypeElement.setAttribute("font-size", "0.9em");
 
     // 创建复制按钮
-    const copyButton = document.createElement('button');
+    const copyButton = document.createElement("button");
     copyButton.setAttribute("background-color", "dodgerblue");
     copyButton.setAttribute("display", "flex");
     copyButton.setAttribute("align-items", "center");
     copyButton.setAttribute("padding", "5px 10px");
     copyButton.setAttribute("cursor", "pointer");
     copyButton.setAttribute("border-radius", "4px");
-    copyButton.textContent = '复制';
+    copyButton.textContent = "复制";
     copyButton.classList.add();
-    copyButton.addEventListener('click', () => {
+    copyButton.addEventListener("click", () => {
       copyCode(codeBlock.textContent);
     });
 
@@ -183,16 +202,14 @@ const doButtonD = () => {
     // pre.style.position = 'relative';
 
     // 创建一个容器用于放置代码类型和复制按钮
-    const controlsContainer = document.createElement('div');
+    const controlsContainer = document.createElement("div");
-    controlsContainer.classList.add('code-controls');
+    controlsContainer.classList.add("code-controls");
     controlsContainer.appendChild(codeTypeElement);
     controlsContainer.appendChild(copyButton);
 
     // 将容器添加到代码块父元素中
     pre.insertBefore(controlsContainer, codeBlock);
   });
-
-
 };
 
 onMounted(() => {
@@ -250,6 +267,7 @@ onMounted(() => {
   };
 
   socket.value.onerror = (error) => {
+    socket.value = new WebSocket(url);
     console.error("WebSocket 发生错误:", error);
   };
 });
@@ -271,10 +289,20 @@ const sendMessage = () => {
     function: "gen-ai-chat",
     session_id: sessionID.value,
   };
+  try {
+    socket.value.send(JSON.stringify(msg));
+  } catch (e) {
+    ElMessage.error("发送失败!连接已断开！");
+    return;
+  }
+  if (sessionID.value == 0) {
+    sessionName.value = inputMessage.value;
+  }
   messages.push({ role: "user", content: inputMessage.value, finished: true });
-  socket.value.send(JSON.stringify(msg));
   inputMessage.value = "";
-  scrollToBottom();
+  nextTick(() => {
+      scrollToBottom(); // 新增滚动调用
+    });
   loading.value = true;
   if (sessionID.value == 0) {
     sessionName.value = msg.msg;
@@ -351,11 +379,14 @@ const getMessage = async (session_id: number) => {
   return {};
 };
 const copyMessage = (content: string) => {
-  navigator.clipboard.writeText(content).then(() => {
+  navigator.clipboard
-    ElMessage.success('复制成功');
+    .writeText(content)
-  }).catch((error) => {
+    .then(() => {
-    ElMessage.error('复制失败: ' + error);
+      ElMessage.success("复制成功");
-  });
+    })
+    .catch((error) => {
+      ElMessage.error("复制失败: " + error);
+    });
 };
 </script>
 <style scoped>
@@ -393,6 +424,7 @@ const copyMessage = (content: string) => {
   display: flex;
   flex-direction: column;
   padding: 20px;
+  height: 100%;
   box-sizing: border-box;
 }
 
@@ -401,7 +433,8 @@ const copyMessage = (content: string) => {
   overflow-y: auto; /* 允许垂直滚动 */
   padding: 10px;
   margin-bottom: 20px;
-  scrollbar-width: 20px;
+  scrollbar-width: 10px;
+  height: 90%;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -505,18 +538,16 @@ const copyMessage = (content: string) => {
 }
 
 .copy-code-button {
-  background-color:dodgerblue;
+  background-color: dodgerblue;
-  color:white;
+  color: white;
   width: 30px;
   height: 20px;
-  border:0;
+  border: 0;
   display: flex;
   align-items: center;
 }
 
-
 .el-icon-copy {
   margin-right: 5px;
 }
-
 </style>

src/views/system/manage-file.vue

@@ -0,0 +1,211 @@
+<template>
+    <div>
+        <TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
+        <div class="container">
+            <TableCustom :columns="columns" :tableData="tableData" :total="page.total" :viewFunc="handleView"
+                :delFunc="handleDelete" :page-change="changePage" :editFunc="handleEdit">
+                <template #toolbarBtn>
+                    <el-button type="warning" :icon="CirclePlusFilled" @click="visible_add = true" v-if="userRole">新增</el-button>
+                </template>
+            </TableCustom>
+
+        </div>
+        <el-dialog :title="isEdit ? '编辑': '编辑'" v-model="visible" width="700px" destroy-on-close
+            :close-on-click-modal="false" @close="closeDialog">
+            <TableEdit :form-data="rowData" :options="options_edit" :edit="isEdit" :update="updateData" />
+        </el-dialog>
+        <el-dialog :title="isAdd ? '新增' : '新增'" v-model="visible_add" width="700px" destroy-on-close
+            :close-on-click-modal="false" @close="closeDialog">
+            <TableEdit :form-data="rowData" :options="options" :edit="isAdd" :update="addData" />
+        </el-dialog>
+        <el-dialog title="查看详情" v-model="visible1" width="700px" destroy-on-close>
+            <TableDetail :data="viewData"></TableDetail>
+        </el-dialog>
+    </div>
+</template>
+
+<script setup lang="ts" name="system-user">
+import { ref, reactive } from 'vue';
+import { ElMessage } from 'element-plus';
+import { CirclePlusFilled } from '@element-plus/icons-vue';
+import { Session } from '@/types/session';
+import {FindUserFileService} from "@/api/file";
+import {UpdateUserFileService} from "@/api/file";
+import {DelUserFileService} from "@/api/file";
+import TableCustom from '@/components/table-custom.vue';
+import TableDetail from '@/components/table-detail.vue';
+import TableSearch from '@/components/table-search.vue';
+import { FormOption, FormOptionList } from '@/types/form-option';
+
+const userRole = localStorage.getItem('role') == 'admin';
+const page = reactive({
+    index: 1,
+    size: 10,
+    total: 122,
+})
+const tableData = ref<[]>([]);
+
+// 查询相关
+const query = reactive({
+    name: '',
+});
+const searchOpt = ref<FormOptionList[]>([
+    { type: 'input', label: '会话ID：', prop: 'name' }
+])
+const handleSearch = async () => {
+    // if (isFinite(query.name) == false){
+    //     ElMessage.error("请输入正确的会话ID");
+    //     return;
+    // }
+    let req={
+        token: localStorage.getItem('token'),
+        type: "ID",
+        id: parseInt(query.name)
+    }
+    let result = await FindUserFileService(req);
+    tableData.value = result.data;
+    page.total = result.data.length;
+};
+
+// 表格相关
+let columns = ref([
+    { type: 'index', label: '序号', width: 55, align: 'center' },
+    { prop: 'ID', label: '文件ID', width: 50 },
+    { prop: 'UserFileName', label: '文件名' ,width: 300},
+    { prop: "UploadType", label: "上传类型",width: 100},
+    { prop: 'CreatedAt', label: '创建时间',type: 'date',width: 200 },
+    { prop: 'UpdatedAt', label: '更新时间',type: 'date',width: 200 },
+    { prop: 'operator', label: '操作' , operate: { view: false, edit: true, delete: true,push: {link: false,label:"继续该会话"} }},
+])
+
+const getData = async () => {
+    let req={
+        token: localStorage.getItem('token'),
+        type: "all"
+    }
+    let result = await FindUserFileService(req);
+    tableData.value = result.data;
+    page.total = result.data.length;
+};
+getData();
+
+const changePage = (val: number) => {
+    page.index = val;
+    getData();
+};
+
+// 新增弹窗
+let options = ref<FormOption>({
+    labelWidth: '100px',
+    span: 12,
+    list: [
+        { type: 'input', label: '文件名称', prop: 'UserFileName', required: true },
+    ]
+})
+
+//编辑弹窗
+let options_edit = ref<FormOption>({
+    labelWidth: '100px',
+    span: 12,
+    list: [
+        { type: 'input', label: '文件名称', prop: 'UserFileName', required: true },
+    ]
+})
+
+const visible = ref(false);
+const visible_add = ref(false);
+const isEdit = ref(false);
+const isAdd = ref(false);
+const rowData = ref({});
+const handleEdit = async (row: Session) => {
+    let data = row;
+    rowData.value = data;
+    console.log("edit_row_data:", rowData.value);
+    isEdit.value = true;
+    visible.value = true;
+};
+const updateData = async (data) => {
+    let result ={}
+      try{
+        let req={
+            token:localStorage.getItem("token"),
+            id: data.ID,
+            name: data.Name
+        };
+        result = await UpdateUserFileService(req)
+        if (result["code"] === 0) {
+          ElMessage.success("更新成功");
+        } else {
+          ElMessage.error("更新失败");
+        }
+
+      }catch(e){
+        console.log(e);
+      }
+      closeDialog();
+    handleSearch();
+};
+
+const addData = async (data) => {
+    let result ={}
+      try{
+        let req={
+            token:localStorage.getItem("token"),
+            name: data.Name
+        };
+        result = await AddSessionService(req)
+        if (result["code"] === 0) {
+          ElMessage.success("新增成功");
+        } else {
+          ElMessage.error("新增失败");
+        }
+
+      }catch(e){
+        console.log(e);
+      }
+    closeDialog();
+    handleSearch();
+};
+
+
+const closeDialog = () => {
+    visible.value = false;
+    visible_add.value = false;
+    isEdit.value = false;
+};
+
+// 查看详情弹窗相关
+const visible1 = ref(false);
+const viewData = ref({
+    row: {},
+    list: []
+});
+const handleView =async (row: Session) => {
+    viewData.value.row = row;
+    viewData.value.list = [
+        
+    ]
+    visible1.value = true;
+};
+
+// 删除相关
+const handleDelete = async (row: Session) => {
+    let req={
+        token: localStorage.getItem('token'),
+        id: row.ID,
+    }
+    try{
+        let result = await DelUserFileService(req);
+        if(result["code"] === 0){
+            ElMessage.success("删除成功");
+            handleSearch();
+        }else{
+            ElMessage.error("删除失败");
+        }
+    }catch(e){
+        console.log(e);
+    }
+}
+</script>
+
+<style scoped></style>

src/views/system/manage-session.vue

@@ -42,6 +42,12 @@ import TableSearch from '@/components/table-search.vue';
 import { FormOption, FormOptionList } from '@/types/form-option';
 
 const userRole = localStorage.getItem('role') == 'admin';
+const page = reactive({
+    index: 1,
+    size: 10,
+    total: 122,
+})
+const tableData = ref<Session[]>([]);
 
 // 查询相关
 const query = reactive({
@@ -76,12 +82,7 @@ let columns = ref([
     { prop: 'UpdatedAt', label: '更新时间',type: 'date',width: 150 },
     { prop: 'operator', label: '操作' , operate: { view: false, edit: true, delete: true,push: {link: true,label:"继续该会话"} }},
 ])
-const page = reactive({
+
-    index: 1,
-    size: 10,
-    total: 122,
-})
-const tableData = ref<Session[]>([]);
 const getData = async () => {
     let req={
         token: localStorage.getItem('token'),