lyc-dev #187
|
|
@ -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,
|
||||
})
|
||||
}
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 2794390 */
|
||||
src: url('iconfont.woff2?t=1725691484835') format('woff2'),
|
||||
url('iconfont.woff?t=1725691484835') format('woff'),
|
||||
url('iconfont.ttf?t=1725691484835') format('truetype'),
|
||||
url('iconfont.svg?t=1725691484835#iconfont') format('svg');
|
||||
src: url('iconfont.woff2?t=1725847033097') format('woff2'),
|
||||
url('iconfont.woff?t=1725847033097') format('woff'),
|
||||
url('iconfont.ttf?t=1725847033097') format('truetype'),
|
||||
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";
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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": "资源库",
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@
|
|||
/>
|
||||
<missing-glyph />
|
||||
|
||||
<glyph glyph-name="aijiqiren" unicode="" 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="" 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="" 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" />
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 352 KiB After Width: | Height: | Size: 354 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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'
|
||||
|
||||
|
|
|
|||
|
|
@ -254,6 +254,7 @@ onMounted(async ()=>{
|
|||
.iconfont{
|
||||
font-size: 28px;
|
||||
color: #707070;
|
||||
font-weight: bold;
|
||||
}
|
||||
&:hover{
|
||||
color: #409EFF;
|
||||
|
|
|
|||
Loading…
Reference in New Issue