Browse Source

添加ai页面

yangg 9 months ago
parent
commit
a25623ab20
45 changed files with 439 additions and 39 deletions
  1. 0 0
      dist/index.html
  2. 0 0
      dist/static/css/app.0e645e46.css
  3. 0 0
      dist/static/css/chunk-0a651140.775a21e3.css
  4. 0 0
      dist/static/css/chunk-47fa645a.7131743c.css
  5. 1 0
      dist/static/css/chunk-6b49e032.35543b1d.css
  6. 0 0
      dist/static/js/app.a30d5e3a.js
  7. 0 0
      dist/static/js/app.c2cf4e86.js
  8. 0 0
      dist/static/js/chunk-09c6c984.176e2c2d.js
  9. 1 1
      dist/static/js/chunk-0a651140.65d3ce79.js
  10. 0 0
      dist/static/js/chunk-0a97e1f4.317fc6ba.js
  11. 0 0
      dist/static/js/chunk-0aff232d.6044a099.js
  12. 0 0
      dist/static/js/chunk-227fce26.758d66d8.js
  13. 0 0
      dist/static/js/chunk-2b49eda5.b8742509.js
  14. 0 0
      dist/static/js/chunk-35464144.e795ead5.js
  15. 0 0
      dist/static/js/chunk-359e4600.e7311a4f.js
  16. 0 0
      dist/static/js/chunk-3d9675b3.f01c0ed2.js
  17. 0 0
      dist/static/js/chunk-4139ed56.683be18b.js
  18. 0 0
      dist/static/js/chunk-44eee83d.f5067198.js
  19. 0 0
      dist/static/js/chunk-47fa645a.9abdc039.js
  20. 0 0
      dist/static/js/chunk-52f685c2.6e0d1263.js
  21. 0 0
      dist/static/js/chunk-5a3bdf57.6b643fb2.js
  22. 0 0
      dist/static/js/chunk-5b1b00c6.64a30a77.js
  23. 0 0
      dist/static/js/chunk-6155c71d.e659c4af.js
  24. 0 0
      dist/static/js/chunk-62250b71.aba939b7.js
  25. 0 0
      dist/static/js/chunk-6a80e4ca.18a7894d.js
  26. 1 0
      dist/static/js/chunk-6b49e032.905555a0.js
  27. 0 0
      dist/static/js/chunk-6ddf6871.007db15a.js
  28. 0 0
      dist/static/js/chunk-76756389.d763329d.js
  29. 0 0
      dist/static/js/chunk-7a88741c.ee63f65f.js
  30. 0 0
      dist/static/js/chunk-aeb9b426.51ca49bb.js
  31. 0 0
      dist/static/js/chunk-c5d7799a.194677e9.js
  32. 0 0
      dist/static/js/chunk-d649fd9a.04a273aa.js
  33. 0 0
      dist/static/js/chunk-e6bc7406.0356416c.js
  34. 0 0
      dist/static/js/chunk-f23301fc.0846967e.js
  35. 0 0
      dist/static/js/chunk-libs.9ba6ec80.js
  36. 0 0
      dist/static/js/chunk-libs.fe317445.js
  37. 1 0
      package.json
  38. BIN
      src/components/webAi/assets/机器人.png
  39. BIN
      src/components/webAi/assets/用户.png
  40. 129 0
      src/components/webAi/css/ChatBox.css
  41. 25 0
      src/components/webAi/index.vue
  42. 184 0
      src/components/webAi/js/ChatBox.js
  43. 62 38
      src/layout/components/Navbar.vue
  44. 7 0
      src/router/index.js
  45. 28 0
      src/views/login/aiIndex.vue

File diff suppressed because it is too large
+ 0 - 0
dist/index.html


File diff suppressed because it is too large
+ 0 - 0
dist/static/css/app.0e645e46.css


+ 0 - 0
dist/static/css/chunk-2a3a8f9f.775a21e3.css → dist/static/css/chunk-0a651140.775a21e3.css


+ 0 - 0
dist/static/css/chunk-62250b71.7131743c.css → dist/static/css/chunk-47fa645a.7131743c.css


+ 1 - 0
dist/static/css/chunk-6b49e032.35543b1d.css

@@ -0,0 +1 @@
+[data-v-43c76dc8] .chat-container{height:100vh}[data-v-43c76dc8] .messages{margin-bottom:0;height:calc(100vh - 120px)}[data-v-43c76dc8] .input-container{max-width:1200px}

File diff suppressed because it is too large
+ 0 - 0
dist/static/js/app.a30d5e3a.js


File diff suppressed because it is too large
+ 0 - 0
dist/static/js/app.c2cf4e86.js


+ 0 - 0
dist/static/js/chunk-09c6c984.e9fe1c69.js → dist/static/js/chunk-09c6c984.176e2c2d.js


File diff suppressed because it is too large
+ 1 - 1
dist/static/js/chunk-0a651140.65d3ce79.js


+ 0 - 0
dist/static/js/chunk-0a97e1f4.078f84a0.js → dist/static/js/chunk-0a97e1f4.317fc6ba.js


File diff suppressed because it is too large
+ 0 - 0
dist/static/js/chunk-0aff232d.6044a099.js


+ 0 - 0
dist/static/js/chunk-227fce26.44eb40b6.js → dist/static/js/chunk-227fce26.758d66d8.js


+ 0 - 0
dist/static/js/chunk-2b49eda5.1f544992.js → dist/static/js/chunk-2b49eda5.b8742509.js


+ 0 - 0
dist/static/js/chunk-35464144.478fb4b1.js → dist/static/js/chunk-35464144.e795ead5.js


+ 0 - 0
dist/static/js/chunk-359e4600.b504c746.js → dist/static/js/chunk-359e4600.e7311a4f.js


+ 0 - 0
dist/static/js/chunk-3d9675b3.75ba048f.js → dist/static/js/chunk-3d9675b3.f01c0ed2.js


+ 0 - 0
dist/static/js/chunk-4139ed56.25124ea6.js → dist/static/js/chunk-4139ed56.683be18b.js


+ 0 - 0
dist/static/js/chunk-44eee83d.43170938.js → dist/static/js/chunk-44eee83d.f5067198.js


File diff suppressed because it is too large
+ 0 - 0
dist/static/js/chunk-47fa645a.9abdc039.js


+ 0 - 0
dist/static/js/chunk-52f685c2.39ffce79.js → dist/static/js/chunk-52f685c2.6e0d1263.js


+ 0 - 0
dist/static/js/chunk-5a3bdf57.14b3ef26.js → dist/static/js/chunk-5a3bdf57.6b643fb2.js


+ 0 - 0
dist/static/js/chunk-5b1b00c6.871a533c.js → dist/static/js/chunk-5b1b00c6.64a30a77.js


+ 0 - 0
dist/static/js/chunk-6155c71d.802ce98e.js → dist/static/js/chunk-6155c71d.e659c4af.js


File diff suppressed because it is too large
+ 0 - 0
dist/static/js/chunk-62250b71.aba939b7.js


+ 0 - 0
dist/static/js/chunk-6a80e4ca.6018209b.js → dist/static/js/chunk-6a80e4ca.18a7894d.js


+ 1 - 0
dist/static/js/chunk-6b49e032.905555a0.js

@@ -0,0 +1 @@
+(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-6b49e032"],{"1f47":function(n,t,c){"use strict";c("a668")},"5cb5":function(n,t,c){"use strict";c.r(t);var e=function(){var n=this,t=n.$createElement,c=n._self._c||t;return c("div",[c("ChatBox")],1)},o=[],u=c("c3b3"),a={components:{ChatBox:u["default"]}},s=a,i=(c("1f47"),c("2877")),f=Object(i["a"])(s,e,o,!1,null,"43c76dc8",null);t["default"]=f.exports},a668:function(n,t,c){}}]);

+ 0 - 0
dist/static/js/chunk-6ddf6871.25664145.js → dist/static/js/chunk-6ddf6871.007db15a.js


File diff suppressed because it is too large
+ 0 - 0
dist/static/js/chunk-76756389.d763329d.js


+ 0 - 0
dist/static/js/chunk-7a88741c.9065085d.js → dist/static/js/chunk-7a88741c.ee63f65f.js


+ 0 - 0
dist/static/js/chunk-aeb9b426.52e0f818.js → dist/static/js/chunk-aeb9b426.51ca49bb.js


+ 0 - 0
dist/static/js/chunk-c5d7799a.fb698bf4.js → dist/static/js/chunk-c5d7799a.194677e9.js


+ 0 - 0
dist/static/js/chunk-d649fd9a.87efbdda.js → dist/static/js/chunk-d649fd9a.04a273aa.js


+ 0 - 0
dist/static/js/chunk-e6bc7406.f6d6c8d3.js → dist/static/js/chunk-e6bc7406.0356416c.js


+ 0 - 0
dist/static/js/chunk-f23301fc.0b0fb9a1.js → dist/static/js/chunk-f23301fc.0846967e.js


File diff suppressed because it is too large
+ 0 - 0
dist/static/js/chunk-libs.9ba6ec80.js


File diff suppressed because it is too large
+ 0 - 0
dist/static/js/chunk-libs.fe317445.js


+ 1 - 0
package.json

@@ -48,6 +48,7 @@
     "luckyexcel": "^1.0.1",
     "luckysheet": "^2.1.13",
     "mammoth": "^1.6.0",
+    "markdown-it": "^13.0.2",
     "normalize.css": "7.0.0",
     "nprogress": "^0.2.0",
     "path-to-regexp": "2.4.0",

BIN
src/components/webAi/assets/机器人.png


BIN
src/components/webAi/assets/用户.png


+ 129 - 0
src/components/webAi/css/ChatBox.css

@@ -0,0 +1,129 @@
+
+.chat-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+     /* 或者按照实际需要调整高度 */
+}
+
+.messages {
+    width: 1200px; /* 设置消息列表宽度为屏幕宽度的 80% */
+    max-width: 80%; /* 限制最大宽度,避免超出视口 */
+    margin: 0 auto; /* 上下保持原有的 margin,左右自动调整以居中 */
+    overflow-y: auto; /* 如果消息太多,允许滚动 */
+    height: calc(100vh - 230px); /* 高度需要根据输入框和其他元素的高度调整 */
+    padding: 10px; /* 或你希望的内边距大小 */
+    margin-bottom: 120px;
+}
+
+.messages li {
+    display: flex;
+    align-items: flex-start; /* 这将确保所有子元素对齐到容器的顶部 */
+    margin-bottom: 10px;
+}
+
+.avatar {
+    width: 40px; /* 头像的尺寸 */
+    height: 40px;
+    border-radius: 50%; /* 圆形头像 */
+    background-color: #e9e0e0; /* 暂时用灰色代替,你可以用图片替换 */
+    align-self: start; /* 这将覆盖 flex 容器的 align-items 并将头像对齐到顶部 */
+    margin-right: 10px; /* 按需调整以在头像和消息之间提供空间 */
+}
+
+
+.user-avatar {
+    background-image: url('../assets/用户.png') ;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+   /*  background-color: #93939d; */ /* 用户头像颜色 */
+}
+
+.bot-avatar {
+    background-image: url('../assets/机器人.png');
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    /* background-color: green; */ /* AI头像颜色 */
+}
+
+.message-content {
+    background-color: #f0f0f0; /* 消息背景 */
+    padding-left: 20px; /* 上下左右的内边距 */
+    padding-right: 20px; /* 上下左右的内边距 */
+    padding-top: 10px; /* 上下左右的内边距 */
+    padding-bottom: 0px; /* 上下左右的内边距 */
+    max-width: calc(82% - 10px); /* 计算头像和间距 */
+    border-radius: 15px; /* 边框圆角 */
+    margin-bottom: 10px; /* 和下一条消息之间的间距 */
+    /* 消息内容样式 */
+    display: flex;
+    flex-direction: column; /* 排列文本 */
+    margin-top: 0;
+}
+
+
+.message-text {
+    margin: 0;
+    white-space: normal; /* 确保文本会换行 */
+    word-wrap: break-word; /* 长单词或 URL 会被断开以适应容器宽度 */
+}
+
+.input-container {
+    position: absolute; /* 改为绝对定位 */
+    bottom: 10px; /* 距离底部的距离 */
+    left: 50%;
+    transform: translateX(-50%);
+    width: 90%; /* 设置宽度为弹窗宽度的90% */
+    max-width: 800px; /* 设置最大宽度 */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    background: white;
+    border-radius: 10px;
+    box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
+}
+
+textarea {
+    font-size: 16px;
+    width: 100%; /* 可以根据需要调整 */
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    border: none;
+  outline: none;
+  resize: none;
+}
+
+.input-container textarea {
+    width: 100%; /* 输入框占据所有可用空间 */
+    padding: 10px;
+    margin-right: 10px; /* 与按钮的间隔 */
+    box-sizing: border-box;
+}
+
+.input-container button {
+    min-width: 100px; /* 例如,按钮的最小宽度为 100px */
+    white-space: nowrap; /* 防止文字折行 */
+    padding: 10px 20px;
+    cursor: pointer;
+}
+
+
+
+
+.sender-name {
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 5px;
+}
+
+.btn{
+    font-size: 16px;
+    color: #ffffff;
+    border-radius: 5px;
+    border: #3cbade;
+    background-color: #3cbade;
+}

+ 25 - 0
src/components/webAi/index.vue

@@ -0,0 +1,25 @@
+<template>
+    <div class="chat-container">
+      <div class="messages">
+        <ul>
+          <li v-for="message in messages" :key="message.id" :class="message.user">
+            <!-- 添加判断,如果是机器人的消息也显示头像 -->
+            <div class="avatar" :class="{ 'user-avatar': message.user === 'user', 'bot-avatar': message.user === 'bot' }"></div>
+            <div class="message-content">
+              <span class="sender-name" v-if="message.user === 'user'">你</span>
+              <span class="sender-name" v-if="message.user === 'bot'">轻良AI助理</span>
+              <!-- 使用 v-html 来渲染 Markdown 文本 -->
+              <div class="message-text" v-html="renderMarkdown(message.message)"></div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="input-container">
+        <textarea v-model="userInput" rows="4" @keydown="handleKeydown" placeholder="Type a message..."></textarea>
+        <button @click="sendMessage" class="btn">发送</button>
+      </div>
+    </div>
+  </template>
+  
+  <script src="./js/ChatBox.js"></script>
+  <style src="./css/ChatBox.css" scoped></style>

+ 184 - 0
src/components/webAi/js/ChatBox.js

@@ -0,0 +1,184 @@
+import MarkdownIt from "markdown-it";
+const md = new MarkdownIt();
+
+export default {
+  data() {
+    return {
+      messages: [
+        {
+          user: "bot",
+          messageType: "TEXT",
+          message: "欢迎使用ChatGPT",
+          html: "",
+          time: "",
+          done: true,
+        },
+      ],
+      generating: false,
+      userInput: "",
+      websocket: null,
+    };
+  },
+  created() {
+    this.connectWebSocket();
+  },
+  methods: {
+    getUuid() {
+      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
+        /[xy]/g,
+        function (c) {
+          var r = (Math.random() * 16) | 0,
+            v = c == "x" ? r : (r & 0x3) | 0x8;
+          return v.toString(16);
+        }
+      );
+    },
+    connectWebSocket() {
+      const wsUrl = 'http://58.246.234.210:7860/api/v1/run/951e3ba4-c66a-496c-9497-7dbddc2647f8?stream=false'//process.env.VUE_APP_WS_URL;
+      // 这里做一个简单的鉴权,只有符合条件的鉴权才能握手成功
+      // 移除这里的fetch调用,改用WebSocket
+      this.websocket = new WebSocket(wsUrl);
+    
+      this.websocket.onerror = (event) => {
+        console.error("WebSocket 连接错误:", event);
+      };
+    
+      this.websocket.onclose = (event) => {
+        console.log("WebSocket 连接关闭:", event);
+      };
+    
+      this.websocket.onopen = (event) => {
+        console.log("WebSocket 连接已建立:", event);
+      };
+      this.websocket.onmessage = (event) => {
+        // 解析收到的消息
+        const result = JSON.parse(event.data);
+
+        console.log(result.content);
+
+        // 检查消息是否完结
+        if (result.done) {
+          this.messages[this.messages.length - 1].done = true;
+          return;
+        }
+
+        if (this.messages[this.messages.length - 1].done) {
+          // 添加新的消息
+          this.messages.push({
+            time: Date.now(),
+            message: result.content,
+            messageType: "TEXT",
+            user: "bot",
+            done: false,
+          });
+        } else {
+          // 更新最后一条消息
+          let lastMessage = this.messages[this.messages.length - 1];
+          lastMessage.message += result.content;
+          this.messages[this.messages.length - 1] = lastMessage;
+        }
+      };
+    },
+    async sendMessage() {
+      const chatId = this.getUuid();
+      const wsUrl ='http://58.246.234.210:7860/api/v1/run/951e3ba4-c66a-496c-9497-7dbddc2647f8?stream=false'// process.env.VUE_APP_WS_URL;
+      let message = this.userInput.trim();
+      if (message) {
+        // Markdown换行:在每个换行符之前添加两个空格
+        message = message.replace(/(\r\n|\r|\n)/g, "  \n");
+
+        this.messages.push({
+          time: Date.now(),
+          message: message,
+          messageType: "TEXT",
+          user: "user",
+          done: true,
+        });
+        this.userInput = "";
+        console.log(this.messages);
+        // 通过 HTTP 发送消息
+        try {
+          ///send-message
+          const response = await fetch(`${wsUrl}`, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              chatId: chatId,
+              input_value: message,
+              output_type: "chat",
+              input_type: "chat",
+              tweaks: {
+                "ChatInput-dDbhW": {},
+              "Prompt-1stgH": {},
+              "ChatOutput-b1zWw": {},
+              "OllamaModel-5n7vc": {},
+              "Milvus-1X7fT": {},
+              "OllamaEmbeddings-V29wK": {},
+              "Memory-GrHZr": {},
+              "ParseData-0dk9n": {}
+              },
+            }),
+          });
+
+          if (!response.ok) {
+            const errorText = await response.text(); // 获取错误文本
+            throw new Error(
+              `HTTP error! status: ${response.status}, message: ${errorText}`
+            );
+          }
+
+          const result = await response.json();
+          this.handleResponse(result);
+        } catch (error) {
+          console.error("Error sending message:", error);
+        }
+      }
+    },
+    handleResponse(value) {
+       const data =value.outputs[0].outputs[0].results.message
+      this.messages.push({
+        user: "bot",
+        messageType: data.text_key,
+        message: data.text,
+        html: "",
+        time: data.timestamp,
+        done: true,
+      });
+    },
+    renderMarkdown(rawMarkdown) {
+      return md.render(rawMarkdown);
+    },
+    handleKeydown(event) {
+      // Check if 'Enter' is pressed without the 'Alt' key
+      if (event.key === "Enter" && !(event.shiftKey || event.altKey)) {
+        event.preventDefault(); // Prevent the default action to avoid line break in textarea
+        this.sendMessage();
+      } else if (event.key === "Enter" && event.altKey) {
+        // Allow 'Alt + Enter' to insert a newline
+        const cursorPosition = event.target.selectionStart;
+        const textBeforeCursor = this.userInput.slice(0, cursorPosition);
+        const textAfterCursor = this.userInput.slice(cursorPosition);
+
+        // Insert the newline character at the cursor position
+        this.userInput = textBeforeCursor + "\n" + textAfterCursor;
+
+        // Move the cursor to the right after the inserted newline
+        this.$nextTick(() => {
+          event.target.selectionStart = cursorPosition + 1;
+          event.target.selectionEnd = cursorPosition + 1;
+        });
+      }
+    },
+    beforeDestroy() {
+      if (this.websocket) {
+        this.websocket.close();
+      }
+    },
+  },
+  updated() {
+    const messagesContainer = this.$el.querySelector(".messages");
+    messagesContainer.scrollTop = messagesContainer.scrollHeight;
+  },
+};

+ 62 - 38
src/layout/components/Navbar.vue

@@ -1,48 +1,63 @@
 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <hamburger
+      id="hamburger-container"
+      :is-active="sidebar.opened"
+      class="hamburger-container"
+      @toggleClick="toggleSideBar"
+    />
 
     <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
 
     <div class="right-menu">
-      <template v-if="device!=='mobile'">
-          <search id="header-search" class="right-menu-item" />
-          <error-log class="errLog-container right-menu-item hover-effect" />
-          <screenfull id="screenfull" class="right-menu-item hover-effect" />
-          <el-tooltip content="字号" effect="dark" placement="bottom">
-            <size-select id="size-select" class="right-menu-item hover-effect" />
-          </el-tooltip>
+      <template v-if="device !== 'mobile'">
+        <div class="right-menu-item">
+          <svg-icon className="svg-style" size="120" icon-class="AI模块" @click="openChatDialog" />
+        </div>
+        <search id="header-search" class="right-menu-item" />
+        <error-log class="errLog-container right-menu-item hover-effect" />
+        <screenfull id="screenfull" class="right-menu-item hover-effect" />
+        <el-tooltip content="字号" effect="dark" placement="bottom">
+          <size-select id="size-select" class="right-menu-item hover-effect" />
+        </el-tooltip>
       </template>
 
-      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
+      <el-dropdown
+        class="avatar-container right-menu-item hover-effect"
+        trigger="click"
+      >
         <div class="avatar-wrapper">
-          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
+          <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" />
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">
-           <router-link to="/profile/index">
+          <router-link to="/profile/index">
             <el-dropdown-item>用户资料</el-dropdown-item>
           </router-link>
-         <!-- <router-link to="/">
+          <!-- <router-link to="/">
             <el-dropdown-item>用户首页</el-dropdown-item>
           </router-link> -->
           <el-dropdown-item divided @click.native="logout">
-            <span style="display:block;">退出登录</span>
+            <span style="display: block">退出登录</span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
     </div>
+    <el-dialog title="ai" :close-on-click-modal="false" top="20px" :visible.sync="chatDialogVisible" append-to-body v-el-drag-dialog>
+      <ChatBox />
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
-import Hamburger from '@/components/Hamburger'
-import ErrorLog from '@/components/ErrorLog'
-import Screenfull from '@/components/Screenfull'
-import SizeSelect from '@/components/SizeSelect'
-import Search from '@/components/HeaderSearch'
+import { mapGetters } from "vuex";
+import Breadcrumb from "@/components/Breadcrumb";
+import Hamburger from "@/components/Hamburger";
+import ErrorLog from "@/components/ErrorLog";
+import Screenfull from "@/components/Screenfull";
+import SizeSelect from "@/components/SizeSelect";
+import Search from "@/components/HeaderSearch";
+import ChatBox from "@/components/webAi/index.vue";
 
 export default {
   components: {
@@ -51,25 +66,30 @@ export default {
     ErrorLog,
     Screenfull,
     SizeSelect,
-    Search
+    Search,
+    ChatBox,
+  },
+  data() {
+    return {
+      chatDialogVisible: false, // 控制聊天对话框的显示
+    };
   },
   computed: {
-    ...mapGetters([
-      'sidebar',
-      'avatar',
-      'device'
-    ])
+    ...mapGetters(["sidebar", "avatar", "device"]),
   },
   methods: {
+    openChatDialog() {
+      this.chatDialogVisible = true;
+    },
     toggleSideBar() {
-      this.$store.dispatch('app/toggleSideBar')
+      this.$store.dispatch("app/toggleSideBar");
     },
     async logout() {
-      await this.$store.dispatch('user/logout')
-      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
-    }
-  }
-}
+      await this.$store.dispatch("user/logout");
+      this.$router.push(`/login?redirect=${this.$route.fullPath}`);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -78,18 +98,18 @@ export default {
   overflow: hidden;
   position: relative;
   background: #fff;
-/*   box-shadow: 0 1px 4px rgba(0,21,41,.08); */
+  /*   box-shadow: 0 1px 4px rgba(0,21,41,.08); */
 
   .hamburger-container {
     line-height: 46px;
     height: 100%;
     float: left;
     cursor: pointer;
-    transition: background .3s;
-    -webkit-tap-highlight-color:transparent;
+    transition: background 0.3s;
+    -webkit-tap-highlight-color: transparent;
 
     &:hover {
-      background: rgba(0, 0, 0, .025)
+      background: rgba(0, 0, 0, 0.025);
     }
   }
 
@@ -118,13 +138,17 @@ export default {
       font-size: 18px;
       color: #5a5e66;
       vertical-align: text-bottom;
+      .svg-style {
+        cursor: pointer;
+      
+      }
 
       &.hover-effect {
         cursor: pointer;
-        transition: background .3s;
+        transition: background 0.3s;
 
         &:hover {
-          background: rgba(0, 0, 0, .025)
+          background: rgba(0, 0, 0, 0.025);
         }
       }
     }

+ 7 - 0
src/router/index.js

@@ -112,6 +112,13 @@ export const constantRoutes = [
     hidden:true,
     meta: { title: '解析块',  noCache: true }
   },
+  {
+    path: '/ai',
+    component: () => import('@/views/login/aiIndex.vue'),
+    name: 'ai',
+    hidden:true,
+    meta: { title: 'ai',  noCache: true }
+  },
   {
     path: '/error',
     component: Layout,

+ 28 - 0
src/views/login/aiIndex.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <ChatBox />
+  </div>
+</template>
+
+<script>
+import ChatBox from "@/components/webAi/index.vue";
+export default {
+  components: {
+    ChatBox,
+  },
+};
+</script>
+
+<style scoped>
+::v-deep .chat-container{
+    height: 100vh;
+}
+::v-deep .messages{
+  /* 在这里添加您想要的样式 */
+ margin-bottom: 0;
+ height: calc(100vh - 120px);
+}
+::v-deep .input-container{
+    max-width:1200px;
+}
+</style>

Some files were not shown because too many files changed in this diff