From 6117d9203438c05f6b115b32c208cd26d591b339 Mon Sep 17 00:00:00 2001
From: junleea <354425203@qq.com>
Date: Tue, 25 Mar 2025 19:51:06 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=AF=B9=E8=AF=9D=E8=BE=93?=
 =?UTF-8?q?=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                       | 306 +++++++++++++++++++-
 index.html                      |   2 +-
 src/views/system/gen-chat.vue   | 476 ++++++++++++++++++--------------
 src/views/system/reco-topic.vue |   1 +
 4 files changed, 580 insertions(+), 205 deletions(-)

diff --git a/README.md b/README.md
index a4838eb..7152702 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,306 @@
-{"model":"spark","appid":"d3a4647c","apiSecret":"YjRlNGNjYzM5ZjIxNGM5NzhkNDJjMGM4","apiKey":"3ee5ae2b03a4039e79ba1a490631309e","domain":"pro-128k"}
+<template>
+  <div class="chat-container">
+    <!-- 消息列表 -->
+    <el-card class="chat-messages" shadow="never" ref="messageContainer">
+      <div
+        v-for="(message, index) in messages"
+        :key="index"
+        :class="['message', message.role]"
+      >
+        <div class="message-avatar">
+          <span v-if="message.role === 'assistant'">💬</span>
+          <span v-else>👤</span>
+        </div>
+        <div class="message-content">
+          <div v-html="renderMarkdown(message.content)"></div>
+        </div>
+      </div>
+      <div v-if="loading" class="loading-indicator">Loading...</div>
+    </el-card>
 
+    <!-- 输入区域 -->
+    <el-card class="chat-input" shadow="never">
+      <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">
+import { ref, onMounted, onUnmounted, reactive, nextTick } from "vue";
+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 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 = () => {
+  let msg = {
+    msg: inputMessage.value,
+    type: "ollama",
+    function: "gen-ai-chat",
+    session_id: sessionID.value,
+  };
+  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 => {
+  nextTick(() => {
+    if (messageContainer.value && !isUserScrolling.value) {
+      messageContainer.value.scrollTop = messageContainer.value.scrollHeight;
+    }
+  });
+};
+
+// 监听用户滚动行为，判断是否在手动滚动历史消息
+const handleScroll = (): void => {
+  const container = document.querySelector(
+    ".messages-wrapper"
+  ) as HTMLElement | null;
+  if (container) {
+    const scrollBottom =
+      container.scrollHeight - container.scrollTop - container.clientHeight;
+    isUserScrolling.value = scrollBottom > 50; // 如果距离底部超过50px，则认为在查看历史消息
+  }
+};
+
+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>
diff --git a/index.html b/index.html
index 48b17bf..8735335 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <title>vue-manage-system后台管理系统</title>
+  <title>大学生学业作品AI生成工具</title>
   <link rel="stylesheet" href="//at.alicdn.com/t/c/font_830376_92o68tc95je.css">
 </head>
 
diff --git a/src/views/system/gen-chat.vue b/src/views/system/gen-chat.vue
index 28c6f56..b7ba797 100644
--- a/src/views/system/gen-chat.vue
+++ b/src/views/system/gen-chat.vue
@@ -1,218 +1,288 @@
 <template>
-    <div class="chat-container">
-      <div class="chat-messages" ref="messageContainer">
-        <el-card
-          v-for="(message, index) in messages"
-          :key="index"
-          :class="{ 'user-message': message.sender === 'user', 'ai-message': message.sender === 'ai' }"
-          shadow="never"
-        >
-          <!-- <template #header>
-            <span>{{ message.sender === 'user' ? '你' : 'AI' }}</span>
-          </template> -->
+  <div class="chat-container">
+    <!-- 消息列表 -->
+    <el-card class="chat-messages" shadow="never" ref="messagesContainer">
+      <div
+        v-for="(message, index) in messages"
+        :key="index"
+        :class="['message', message.role]"
+      >
+        <div class="message-avatar">
+          <span v-if="message.role === 'assistant'">💬</span>
+          <span v-else>👤</span>
+        </div>
+        <div class="message-content">
           <div v-html="renderMarkdown(message.content)"></div>
-        </el-card>
-        <el-card
-          v-if="currentAIMessage.length > 0"
-          class="ai-message"
-          shadow="never"
-        >
-          <!-- <template #header>
-            <span>AI</span>
-          </template> -->
-          <div v-html="renderMarkdown(currentAIMessage)"></div>
-        </el-card>
+        </div>
       </div>
-      <div class="input-container">
-        <el-input
-        type="textarea"
-        :row = "3"
-          v-model="inputMessage"
-          placeholder="输入你的消息..."
-          @keyup.enter="sendMessage"
-        ></el-input>
-        <el-button @click="sendMessage">发送</el-button>
-      </div>
-    </div>
-  </template>
-  
+      <div v-if="loading" class="loading-indicator">Loading...</div>
+    </el-card>
+
+    <!-- 输入区域 -->
+    <el-card class="chat-input" shadow="never">
+      <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" style="text-align: center;" >
+          <el-button type="primary" @click="sendMessage">Send</el-button>
+        </el-col>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
-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 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'
-
-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 (__) { }
-        }
+import { ref, onMounted, onUnmounted, reactive, nextTick } from "vue";
+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 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>' +
-        md.utils.escapeHtml(str) +
-        "</code></pre>"
+          '<pre class="hljs"><code>' +
+          hljs.highlight(lang, str, true).value +
+          "</code></pre>"
         );
-    },
-});
-  
-  const messages = ref([]);
-  const inputMessage = ref('');
-  const socket = ref(null);
-  const currentAIMessage = ref('');
-  const messageContainer = ref(null);
-  const sessionID = ref(0);
-  const AIIsSending =ref(false);
+      } catch (__) {}
+    }
 
-  
-  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('连接成功');
-    };
-  
-    socket.value.onmessage = (event) => {
-        let msg : WSMessage = JSON.parse(event.data);
-       const chunk = event.data;
-      if (msg.msg.msg.done) {
-        messages.value.push({ sender: 'ai', content: currentAIMessage.value });
-        currentAIMessage.value = '';
-        scrollToBottom();
-        return;
-      }
-      console.log("resp:",msg);
-      sessionID.value =msg.session_id;
-      currentAIMessage.value += msg.msg.msg.response;
-      scrollToBottom();
-    };
-  
-    socket.value.onclose = () => {
-      console.log('WebSocket 连接已关闭');
-      ElMessage.error('连接已关闭');
-    };
-  
-    socket.value.onerror = (error) => {
-      console.error('WebSocket 发生错误:', error);
-    };
-  });
-  
-  onUnmounted(() => {
-    if (socket.value) {
-      socket.value.close();
+    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 sessionID = ref(0);
+const messagesContainer = ref<HTMLDivElement | null>(null);
+
+const renderMarkdown = (content: string) => {
+  return md.render(content);
+};
+
+const scrollToBottom = () => {
+  nextTick(() => {
+    if (messagesContainer.value) {
+      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
     }
   });
-  
-  const sendMessage = () => {
-    let msg = {
-        msg: inputMessage.value,
-        type: "ollama",
-        function: "gen-ai-chat",
-        session_id: sessionID.value,
-    }
-    if (inputMessage.value.trim() === '') return;
-    messages.value.push({ sender: 'user', content: inputMessage.value });
-    socket.value.send(JSON.stringify(msg));
-    inputMessage.value = '';
-    //getMessage();
-    scrollToBottom();
+};
+
+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 scrollToBottom = () => {
-    if (messageContainer.value) {
-      messageContainer.value.scrollTop = messageContainer.value.scrollHeight;
+  messagesContainer.value = document.querySelector(".chat-messages");
+
+  socket.value.onmessage = (event) => {
+    let msg: WSMessage = JSON.parse(event.data);
+    const existingMessage = messages.find(
+      (msg) => msg.role === "assistant" && !msg.finished
+    );
+    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;
+    if (msg.msg.msg.done) {
+      const assistantMessage = messages[messages.length - 1];
+      assistantMessage.finished = true;
+      loading.value = false;
+    }
+    nextTick(() => {
+      scrollToBottom(); // 新增滚动调用
+    });
   };
-  
-  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);
+
+  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 = () => {
+  let msg = {
+    msg: inputMessage.value,
+    type: "ollama",
+    function: "gen-ai-chat",
+    session_id: sessionID.value,
+  };
+  if (inputMessage.value.trim() === "") return;
+  messages.push({ role: "user", content: inputMessage.value, finished: true });
+  socket.value.send(JSON.stringify(msg));
+  inputMessage.value = "";
+  scrollToBottom();
+  loading.value = true;
+  //getMessage();
+};
+
+
+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"]);
     }
-    return {};
+  } catch (e) {
+    console.log(e);
   }
-  </script>
-  
-  <style scoped>
-  .chat-container {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-  
-  .chat-messages {
-    flex: 1;
-    overflow-y: auto;
-    padding: 10px;
-    border: 1px solid #ccc;
-    margin-bottom: 10px;
-    height: 80%;
-  }
-  
-  .user-message {
-    text-align: right;
-    background-color: #ccc;
-    margin-bottom: 10px;
-  }
-  
-  .ai-message {
-    text-align: left;
-    max-width: 60%;
-    margin-bottom: 10px;
-  }
-  
-  .input-container {
-    display: flex;
-    gap: 10px;
-  }
-  </style>    
\ No newline at end of file
+  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;
+  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>
diff --git a/src/views/system/reco-topic.vue b/src/views/system/reco-topic.vue
index 6c176b5..7eca35b 100644
--- a/src/views/system/reco-topic.vue
+++ b/src/views/system/reco-topic.vue
@@ -6,6 +6,7 @@
 </template>
 
 <script lang="ts">
+import { ref, reactive } from 'vue';
 </script>
 
 <style lang="scss" scoped>