Merge pull request 'lyc-dev' (#187) from lyc-dev into main

src/renderer/src/api/ai/index.js

@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+// 创建对话
+export const createChart = ({ headers, data }) => {
+  return request({
+    url: '/qf/createChart',
+    method: 'post',
+    headers,
+    data,
+  })
+}
+// 大模型对话
+export const sendChart = ({ headers, data }) => {
+  return request({
+    url: '/qf/sendTalk',
+    method: 'post',
+    headers,
+    data,
+  })
+}

src/renderer/src/assets/iconfont/iconfont.css

@@ -1,9 +1,9 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2794390 */
-  src: url('iconfont.woff2?t=1725691484835') format('woff2'),
+  src: url('iconfont.woff2?t=1725847033097') format('woff2'),
-       url('iconfont.woff?t=1725691484835') format('woff'),
+       url('iconfont.woff?t=1725847033097') format('woff'),
-       url('iconfont.ttf?t=1725691484835') format('truetype'),
+       url('iconfont.ttf?t=1725847033097') format('truetype'),
-       url('iconfont.svg?t=1725691484835#iconfont') format('svg');
+       url('iconfont.svg?t=1725847033097#iconfont') format('svg');
 }
 
 .iconfont {
@@ -14,6 +14,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-aijiqiren:before {
+  content: "\e73c";
+}
+
 .icon-saoyisao:before {
   content: "\e691";
 }

src/renderer/src/assets/iconfont/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "34666608",
+      "name": "ai机器人",
+      "font_class": "aijiqiren",
+      "unicode": "e73c",
+      "unicode_decimal": 59196
+    },
     {
       "icon_id": "12657402",
       "name": "资源库",

src/renderer/src/assets/iconfont/iconfont.svg

@@ -14,6 +14,8 @@
     />
       <missing-glyph />
       
+      <glyph glyph-name="aijiqiren" unicode="&#59196;" d="M747.6 24.5H276.4c-70.7 0-129.6 58.9-129.6 129.6V509.3c0 70.7 58.9 129.6 129.6 129.6h471.1c70.7 0 129.6-58.9 129.6-129.6V154c0-72.6-56.9-129.5-129.5-129.5zM276.4 560.4c-27.5 0-51-23.6-51-51V154c0-27.5 23.6-51 51-51h471.1c27.5 0 51 23.6 51 51V509.3c0 27.5-23.6 51-51 51H276.4z m0 0M298.3-34.5c0 15.7 13.7 29.4 29.4 29.4l368.5 2c15.7 0 29.4-13.7 29.4-29.4S711.9-62 696.2-62l-368.5-2c-15.6 0.1-29.4 11.9-29.4 29.5zM304.796 736.844l55.018 21.022L420.06 600.19l-55.018-21.022zM267.4 752c11.6-30.4 45.6-45.6 76-34 30.4 11.6 45.6 45.6 34 76-11.6 30.4-45.6 45.6-76 34-30.3-11.6-45.6-45.6-34-76z m0 0M603.988 600.134l60.245 157.676 55.018-21.021-60.244-157.676zM756.6 752c11.6 30.4-3.6 64.4-34 76-30.4 11.6-64.4-3.6-76-34-11.6-30.4 3.6-64.4 34-76 30.3-11.6 64.3 3.6 76 34z m0 0M595.3 202.3c-10 0-19.2 5.9-23.3 15.1l-80.5 180.2-0.1 0.1c-1 2.6-3.3 4.6-6.9 6.3-4.4 2-9.1 3-14.1 3-4.9 0-9.6-1-14.1-3-3.7-1.6-5.9-3.7-6.9-6.2l-1.6-4.2h-0.6l-78.7-176.2c-4.1-9.2-13.2-15.1-23.3-15.1h-0.2c-8.7 0-16.7 4.3-21.4 11.6-4.7 7.3-5.4 16.4-1.9 24.3L403 419.7l0.8 1.5c5.1 10.3 12.4 18.9 21.5 25.5 9.1 6.7 19.1 11 29.7 12.8 5.1 0.9 10.4 1.3 15.5 1.3s10.3-0.4 15.4-1.3c10.5-1.8 20.4-6.1 29.5-12.8 9.1-6.7 16.4-15.2 21.8-25.4l0.8-1.6 81-181.6c3.5-7.9 2.8-17-1.9-24.3-4.7-7.3-12.7-11.6-21.4-11.6h-0.4z m-125 24.6c-9.8 0-18.4 3.5-25.4 10.5s-10.5 15.6-10.5 25.5c0 4.8 0.9 9.5 2.8 14 1.9 4.4 4.5 8.3 7.8 11.5 3.3 3.1 7.1 5.6 11.5 7.5 4.4 1.9 9.1 2.8 14 2.8 9.7 0 18.2-3.5 25.2-10.5s10.5-15.5 10.5-25.4c0-9.8-3.5-18.4-10.5-25.4s-15.6-10.5-25.4-10.5zM679 202.3c-14.1 0-25.5 11.4-25.5 25.5V435.6c0 14.1 11.4 25.5 25.5 25.5s25.5-11.4 25.5-25.5v-207.8c0-14.1-11.5-25.5-25.5-25.5z"  horiz-adv-x="1024" />
+      
       <glyph glyph-name="saoyisao" unicode="&#59025;" d="M213.333333 816.64H66.133333a59.733333 59.733333 0 0 1-42.666666-17.92 59.733333 59.733333 0 0 1-17.92-42.666667v-750.933333a60.586667 60.586667 0 0 1 60.586666-60.586667H213.333333a59.306667 59.306667 0 0 1 42.666667 17.493334 60.586667 60.586667 0 0 1 17.92 42.666666V756.053333a58.88 58.88 0 0 1-17.92 42.666667 59.733333 59.733333 0 0 1-42.666667 17.92z m17.92-810.666667a17.92 17.92 0 0 0-5.12-12.8 20.906667 20.906667 0 0 0-13.226666-4.693333H66.133333a18.346667 18.346667 0 0 0-18.346666 17.493333V756.053333A16.64 16.64 0 0 0 52.906667 768a17.066667 17.066667 0 0 0 12.373333 5.12h150.613333a17.066667 17.066667 0 0 0 17.066667-18.346667zM195.413333 535.893333H85.333333a18.773333 18.773333 0 0 1-18.773333-18.346666 18.773333 18.773333 0 0 1 18.773333-18.773334h110.933334a18.773333 18.773333 0 0 1 17.066666 18.773334 18.346667 18.346667 0 0 1-17.92 18.346666zM195.413333 654.08H85.333333a18.773333 18.773333 0 1 1 0-37.12h110.933334a18.773333 18.773333 0 1 1 0 37.12zM140.373333 144.64a49.493333 49.493333 0 0 1-34.986666-85.333333 49.92 49.92 0 0 1 34.986666-14.506667 51.2 51.2 0 0 1 19.2 3.84 49.493333 49.493333 0 0 1 30.293334 45.653333 49.92 49.92 0 0 1-49.493334 50.346667zM476.586667 654.08H365.226667a18.773333 18.773333 0 1 1 0-37.12h111.36a18.773333 18.773333 0 0 1 0 37.12zM476.586667 535.893333H365.226667a18.773333 18.773333 0 0 1-18.773334-18.346666 18.773333 18.773333 0 0 1 18.773334-18.773334h111.36a18.773333 18.773333 0 0 1 18.346666 18.773334 18.346667 18.346667 0 0 1-18.346666 18.346666zM419.413333 144.64a49.066667 49.066667 0 0 1-45.226666-30.72A47.786667 47.786667 0 0 1 384 60.16a48.64 48.64 0 0 1 34.56-14.506667 51.2 51.2 0 0 1 19.2 3.84 49.493333 49.493333 0 0 1-18.773333 95.146667zM803.84 576.853333a16.213333 16.213333 0 0 1-14.08 0L682.666667 544.853333a18.773333 18.773333 0 0 1-12.373334-23.466666A21.76 21.76 0 0 1 682.666667 512a19.626667 19.626667 0 0 1 8.533333-2.133333 13.226667 13.226667 0 0 1 5.546667 0l106.24 33.28a17.92 17.92 0 0 1 11.946666 23.466666 17.066667 17.066667 0 0 1-11.093333 10.24zM1024 67.413333L802.133333 785.066667a60.16 60.16 0 0 1-29.44 35.84 58.88 58.88 0 0 1-47.36 4.266666l-141.653333-42.666666a60.16 60.16 0 0 1-30.72-23.466667 60.586667 60.586667 0 0 1-60.16 58.453333H345.173333a61.013333 61.013333 0 0 1-61.013333-61.44v-750.933333a60.586667 60.586667 0 0 1 17.92-42.666667 61.44 61.44 0 0 1 42.666667-17.493333h148.48A60.16 60.16 0 0 1 554.666667 5.12V672.853333l210.773333-684.8a59.733333 59.733333 0 0 1 58.026667-42.666666 64.853333 64.853333 0 0 1 17.92 2.56l142.08 42.666666a60.16 60.16 0 0 1 40.533333 76.8z m-512-62.293333a19.2 19.2 0 0 0-18.773333-17.493333h-149.333334a17.493333 17.493333 0 0 0-17.493333 17.493333V756.053333A19.2 19.2 0 0 0 331.52 768a17.066667 17.066667 0 0 0 12.373333 5.12h151.893334a18.346667 18.346667 0 0 0 11.946666-5.12 18.773333 18.773333 0 0 0 5.546667-13.653333z m457.813333 28.16l-142.933333-42.666667a17.066667 17.066667 0 0 0-13.653333 0 17.493333 17.493333 0 0 0-8.96 10.24L584.533333 718.506667a16.64 16.64 0 0 0 0 14.08 16.213333 16.213333 0 0 0 11.093334 8.533333l142.08 42.666667a21.76 21.76 0 0 0 7.253333 0 16.64 16.64 0 0 0 7.68 0 18.773333 18.773333 0 0 0 8.96-11.52l221.866667-716.8a18.346667 18.346667 0 0 0-12.373334-22.186667zM890.453333 157.44a46.933333 46.933333 0 0 1-37.12 3.84 48.64 48.64 0 0 1-34.986666-42.666667 47.786667 47.786667 0 0 1 26.026666-48.213333 45.226667 45.226667 0 0 1 23.04-5.973333 48.213333 48.213333 0 0 1 31.573334 11.52 49.066667 49.066667 0 0 1 15.786666 52.053333 46.933333 46.933333 0 0 1-24.32 29.44z"  horiz-adv-x="1027" />
       
       <glyph glyph-name="jiaoxuezhiliangfenxi" unicode="&#59024;" d="M352.346331 405.138286a36.352 36.352 0 0 1-25.892571-11.190857 37.156571 37.156571 0 0 1-11.190857-26.112c0-9.654857 4.022857-18.870857 11.190857-26.185143l117.248-118.491429a37.010286 37.010286 0 0 1 27.282286-9.801143 37.156571 37.156571 0 0 1 27.209143 9.874286l234.203428 236.617143c9.654857 12.507429 9.508571 37.522286-5.266286 52.589714a35.401143 35.401143 0 0 1-51.785142 0L468.27776 303.030857l-89.965714 90.770286a36.498286 36.498286 0 0 1-25.965715 11.337143zM914.083474 684.178286h-0.219428C719.889189 695.369143 579.820617 820.297143 545.662903 875.52 536.739474 889.270857 525.402331 896 510.846903 896c-8.045714 0-23.113143-2.194286-32.182857-17.627429-15.36-26.331429-56.905143-71.68-123.538286-113.005714A524.946286 524.946286 0 0 0 110.462903 686.811429H110.243474A38.473143 38.473143 0 0 1 73.160046 648.777143c-2.706286-409.6 144.091429-677.156571 424.521143-774.070857 1.536-0.146286 3.072-0.731429 4.900571-1.170286 2.413714-0.804571 5.266286-1.609143 7.972571-1.609143 5.266286 0 7.168 0 11.849143 2.340572l0.512 0.292571C802.833189-28.964571 950.874331 238.811429 950.874331 648.996571c0.219429 19.382857-16.310857 35.108571-36.790857 35.108572z m-39.716571-74.24c-2.706286-173.787429-34.889143-317.732571-95.597714-427.885715-60.416-109.933714-150.235429-187.757714-266.605715-231.131428l-1.316571-0.585143-1.243429 0.512c-116.443429 43.446857-206.189714 121.270857-266.605714 231.131429-60.708571 110.226286-92.891429 254.171429-95.597714 427.885714v3.657143l3.510857 0.365714c161.353143 21.284571 290.377143 108.470857 357.229714 182.857143l2.925714 3.145143 2.779429-3.145143c66.852571-74.386286 195.876571-161.572571 357.302857-182.857143l3.437714-0.438857-0.219428-3.510857z"  horiz-adv-x="1024" />

src/renderer/src/components/ai-chart/container/text.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    {{ displayedText }}
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick  } from 'vue'
+  const props = defineProps({
+    text: {
+      type: String,
+      required: true,
+    },
+    speed: {
+      type: Number,
+      default: 50, // 默认每字符间隔100毫秒
+    },
+  })
+  const emit = defineEmits(['loaded'])
+
+  const displayedText = ref('')
+
+  const startTyping = async () =>{
+    if(!props.text || props.text.length == 0) return
+    for (let i = 0; i < props.text.length; i++) {
+      displayedText.value += props.text.charAt(i);
+      if(displayedText.value.length == props.text.length -1){
+        emit('onSuccess')
+      }
+      emit('loaded')
+      await wait(props.speed);
+      nextTick();
+    }
+  }
+
+  const wait = (ms) =>{
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
+  onMounted(() =>{
+    startTyping()
+  })
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/renderer/src/components/ai-chart/index.vue

@@ -0,0 +1,449 @@
+<template>
+  <div class="page-ai-chart">
+    <svg class="icon ai-icon" aria-hidden="true" @click="isOpen = true; isMax = false" v-if="!isOpen">
+      <use xlink:href="#icon-aijiqiren"></use>
+    </svg>
+    <el-card v-else shadow="always" class="chart-card" :class="[isMax ? 'card-max' : '']">
+      <template #header>
+        <div class="flex chart-header">
+          <div class="header-name flex">
+            <svg class="icon header-icon" aria-hidden="true">
+              <use xlink:href="#icon-aijiqiren"></use>
+            </svg>
+            <span>教学助手</span>
+          </div>
+          <div class="header-tool">
+            <i class="iconfont icon-window-max_line icon-tool" @click="isMax = !isMax"></i>
+            <i class="iconfont icon-close icon-tool" @click="closeChart"></i>
+          </div>
+        </div>
+      </template>
+      <div class="chart-body">
+        <el-scrollbar ref="chatref">
+          <div class="default-chart flex">
+            <div>你好，{{ userStore.nickName }}</div>
+            <div>我是AIx教学助手，我可以帮助你：</div>
+            <div class="outer-ai flex">
+              <ul class="ai-ul">
+                <li class="flex ai-li" v-for="item in outerAi" :key="item.id" @click="onClick(item)"
+                  :class="item.disabled ? 'li-disabled' : ''">
+                  <el-image class="ai-img" :src="item.img" />
+                  <div class="ai-name flex">
+                    <span class="title">{{ item.title }}</span>
+                    <span>{{ item.secondTit }}</span>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <!--对话-->
+          <div class="chart-content" ref="innerRef">
+            <div v-for="item in msgList" :key="item.timestamp">
+              <div class="author-con" v-if="item.name == 'user'">
+                <div class="author-msg">
+                  {{ item.content }}
+                </div>
+              </div>
+              <div v-else class="robot-msg">
+                <Answer :text="item.content ? item.content : ''" @loaded="chartLoaded" @onSuccess="isFinally = true"/>
+              </div>
+            </div>
+            <div v-if="loaded" class="chart-loading">
+              <div></div>
+              <div></div>
+              <div></div>
+            </div>
+          </div>
+        </el-scrollbar>
+      </div>
+      <div class="chart-input">
+        <el-input v-model="msgVal" size="large" class="chart-ipt" @keyup.enter="sendMsg" @focus="isFocus = true" @blur="isFocus = false" />
+        <i class="iconfont icon-tujing" :class="[isFocus ? 'icon-focus' : '']" @click="sendMsg"></i>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import useUserStore from '@/store/modules/user'
+import outLink from '@/utils/linkConfig'
+import Answer from './container/text.vue'
+import { createChart, sendChart } from '@/api/ai/index'
+
+import vDrag from '@/views/tool/directive/drag'
+
+
+const { ipcRenderer } = window.electron || {}
+
+const userStore = useUserStore().user
+
+
+/**
+ * 大模型相关
+ * conversation_id ： 会话ID 用于对话
+ * headers ： 请求头
+ * app_id ：大模型 应用id
+ * loaded : 回答状态
+ * msgList : 消息列表
+ * curAnswer : 当前回答的文字答案
+ */
+
+let conversation_id = null
+const app_id = '712ff0df-ed6b-470f-bf87-8cfbaf757be5'
+const headers = {
+  isToken: true,
+  Authorization: 'Bearer bce-v3/ALTAK-VpMGiUjWehcHSPZGjUKwB/c97384c2c71a0d3b1d1060d7f9e2a4eac3343732',
+  'Content-Type': 'application/json;charset=utf-8',
+}
+const loaded = ref(false)
+const msgList = ref([])
+const chatref = ref(null)
+
+const innerRef = ref(null)
+const isFinally = ref(true)
+// 是否最大化、打开对话框
+const isMax = ref(false)
+const isOpen = ref(false)
+// 对话框框输入的值
+const msgVal = ref('')
+// 对话框是否聚焦
+const isFocus = ref(false)
+
+const outerAi = [
+  {
+    id: 1,
+    title: '生成图片',
+    secondTit: '文生图大模型',
+    img: '../../../src/assets/images/ai-01.png',
+    path: '/ais/aisd3'
+  },
+  {
+    id: 2,
+    title: '教学大模型',
+    secondTit: '中小学基础教学大模型',
+    img: '../../../src/assets/images/ai-02.png',
+    disabled: true,
+  },
+  {
+    id: 3,
+    title: '育人大模型',
+    secondTit: '全场域育人大模型',
+    img: '../../../src/assets/images/ai-03.png',
+    path: '/ais/aimodel'
+  },
+  {
+    id: 4,
+    title: 'ChatTTS',
+    secondTit: '文字转语音大模型',
+    img: '../../../src/assets/images/ai-04.png',
+    path: '/ais/aiChatTTS'
+  }
+]
+
+// 打开web端相关内容
+const onClick = ({ path, disabled }) => {
+  if (disabled) return
+  let configObj = outLink().getBaseData()
+  let fullPath = configObj.fullPath + path
+  fullPath = fullPath.replaceAll('//', '/')
+  // 通知主进程
+  ipcRenderer.send('openWindow', {
+    key: path,
+    fullPath: fullPath,
+    cookieData: { ...configObj.data }
+  })
+}
+
+// 创建对话
+const getChartId = () =>{
+  const data = { app_id }
+  createChart({ data, headers }).then( res =>{
+    if( res.code == 200){
+      localStorage.setItem("conversation_id", res.data.conversation_id);
+      conversation_id = res.data.conversation_id;
+    }
+  })
+}
+
+// 大模型对话
+const sendMsg = () =>{
+  //发送的内容不能为空
+  if(msgVal.value == '') return
+
+  if(!isFinally.value) return
+  isFinally.value = false
+  let msg = msgVal.value
+  msgVal.value = ''
+  msgList.value.push({ name: 'user', timestamp: + new Date(), content: msg})
+  chatref.value.setScrollTop(innerRef.value.clientHeight)
+  loaded.value = true
+
+  const data = {
+    appId: app_id,
+    content: msg,
+    stream: false,
+    conversationId: conversation_id,
+  }
+  sendChart({ data, headers }).then(res =>{
+    loaded.value = false
+    msgList.value.push({name: 'robot', timestamp: + new Date(), content: res.data.answer})
+  })
+}
+
+const chartLoaded = () =>{
+  chatref.value.setScrollTop(innerRef.value.clientHeight)
+}
+
+const closeChart = () =>{
+  loaded.value = false
+  msgList.value = []
+  isOpen.value = false
+}
+
+
+onMounted(() => {
+  conversation_id = localStorage.getItem("conversation_id");
+  if (!conversation_id) {
+    getChartId();
+  }
+})
+
+</script>
+
+<style lang="scss" scoped>
+@mixin flex-direction-c {
+  display: flex;
+  flex-direction: column;
+}
+
+.page-ai-chart {
+  .ai-icon {
+    position: fixed;
+    right: 30px;
+    bottom: 30px;
+    font-size: 40px;
+    cursor: pointer;
+  }
+
+  .chart-card {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    width: 300px;
+    height: calc(100% - 110px);
+    border-radius: 10px;
+
+    :deep(.el-card__header) {
+      padding: 10px;
+    }
+
+    :deep(.el-card__body) {
+      height: calc(100% - 50px);
+      padding: 10px 15px;
+    }
+
+    .chart-body {
+      height: calc(100% - 60px);
+    }
+  }
+
+  .card-max {
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+  }
+
+  .chart-header {
+    justify-content: space-between;
+    font-size: 14px;
+
+    .header-name {
+      align-items: center;
+
+      .header-icon {
+        font-size: 28px;
+        align-items: center;
+        margin-right: 5px;
+      }
+    }
+
+    .icon-tool {
+      font-size: 15px;
+      font-weight: bold;
+      color: #8a8a8a;
+      margin-left: 10px;
+      cursor: pointer;
+    }
+
+  }
+
+  .default-chart {
+    background-color: #F2F2F2;
+    font-size: 13px;
+    border-radius: 5px;
+    align-items: flex-start;
+    flex-direction: column;
+    padding: 8px;
+    box-sizing: border-box;
+
+    .outer-ai {
+      width: 100%;
+      flex-direction: column;
+      margin-top: 5px;
+
+      .ai-ul {
+        @include flex-direction-c;
+
+        .ai-li {
+          cursor: pointer;
+          width: 100%;
+          align-items: center;
+          background-color: #fff;
+          border-radius: 5px;
+          padding: 5px 10px;
+          margin-bottom: 2px;
+
+          .ai-img {
+            width: 40px;
+            height: 40px;
+            margin-right: 10px
+          }
+
+          .ai-name {
+            @include flex-direction-c;
+            align-items: flex-start;
+            font-size: 13px;
+
+            .title {
+              font-weight: bold;
+            }
+          }
+        }
+
+        .li-disabled {
+          cursor: not-allowed;
+          opacity: .3;
+        }
+      }
+    }
+  }
+
+  .chart-content {
+    font-size: 14px;
+    margin-top: 20px;
+
+    .author-con {
+      @include flex-direction-c;
+      align-items: flex-end;
+    }
+
+    .author-msg {
+      display: inline-block;
+      background-color: #E0DFFF;
+      padding: 5px 8px;
+      border-radius: 7px;
+
+    }
+
+    .robot-msg {
+      background-color: #fff;
+      text-align: left;
+    }
+  }
+
+  .chart-input {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding-top: 15px;
+
+    .icon-tujing {
+      font-size: 26px;
+      position: absolute;
+      right: 8px;
+      color: #c0c0c2;
+      cursor: pointer;
+    }
+
+    .icon-focus {
+      color: #409EFF;
+    }
+
+  }
+
+  .chart-ipt {
+    :deep(.el-input__wrapper) {
+      padding-right: 40px;
+    }
+
+  }
+}
+
+.chart-loading,
+.chart-loading>div {
+  position: relative;
+  box-sizing: border-box;
+}
+
+.chart-loading {
+  display: block;
+  font-size: 0;
+  color: #66b1ff;
+}
+
+.chart-loading.la-dark {
+  color: #66b1ff;
+}
+
+.chart-loading>div {
+  display: inline-block;
+  float: none;
+  background-color: currentColor;
+  border: 0 solid currentColor;
+}
+
+.chart-loading {
+  width: 54px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.chart-loading>div:nth-child(1) {
+  animation-delay: -200ms;
+}
+
+.chart-loading>div:nth-child(2) {
+  animation-delay: -100ms;
+}
+
+.chart-loading>div:nth-child(3) {
+  animation-delay: 0ms;
+}
+
+.chart-loading>div {
+  width: 8px;
+  height: 8px;
+  border-radius: 100%;
+  margin-right: 4px;
+  animation: ball-pulse 1s ease infinite;
+}
+
+@keyframes ball-pulse {
+
+  0%,
+  60%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  30% {
+    opacity: 0.1;
+    transform: scale(0.01);
+  }
+}
+</style>

src/renderer/src/layout/index.vue

@@ -14,6 +14,7 @@
       <AppMain :style="{ height: currentRoute.path == '/home' ? '100%' : 'calc(100% - 45px)'}" />
     </el-main>
     <Uploader v-if="uploaderStore.uploadList && uploaderStore.uploadList.length > 0" />
+    <AiChart/>
   </el-container>
 </template>
 
@@ -23,6 +24,7 @@ import { useRouter } from 'vue-router'
 import Header from './components/Header.vue'
 import AppMain from './components/AppMain.vue'
 import Uploader from './components/Uploader.vue'
+import AiChart from '@/components/ai-chart/index.vue'
 import uploaderState from '@/store/modules/uploader'
 import { ref } from 'vue'
 

src/renderer/src/views/desktop/index.vue

@@ -254,6 +254,7 @@ onMounted(async ()=>{
           .iconfont{
             font-size: 28px;
             color: #707070;
+            font-weight: bold;
           }
           &:hover{
             color: #409EFF;