From b01f61b773954c01a4ae9744f677cb75fac4bbe4 Mon Sep 17 00:00:00 2001
From: xuhongjie <1943105267@qq.com>
Date: Sun, 20 Apr 2025 11:52:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AF=B9=E6=8E=A5ai=E5=AF=B9=E7=AD=94,?=
=?UTF-8?q?=E7=BA=AF=E6=96=87=E6=9C=AC,=E6=8A=98=E7=BA=BF,=E6=9F=B1?=
=?UTF-8?q?=E7=8A=B6,=E9=A5=BC=E5=9B=BE,=E4=B8=BB=E9=A2=98=E5=88=87?=
=?UTF-8?q?=E6=8D=A2,=E9=97=AE=E7=AD=94=E4=BD=93=E9=AA=8C=E4=BC=98?=
=?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/styles/pages/index.scss | 6 +
src/views/AI/chat/class/bar.ts | 2 +-
src/views/AI/chat/class/line.ts | 6 +-
src/views/AI/chat/class/pie.ts | 2 +-
src/views/AI/chat/index.vue | 176 ++++++++++++++++++-----
src/views/AI/components/aiHint/index.vue | 2 +-
vite.config.ts | 2 +-
7 files changed, 152 insertions(+), 44 deletions(-)
diff --git a/src/styles/pages/index.scss b/src/styles/pages/index.scss
index 68dd9a4..d35cdf5 100644
--- a/src/styles/pages/index.scss
+++ b/src/styles/pages/index.scss
@@ -69,7 +69,9 @@
align-items: flex-start;
}
.ai-hint {
+ margin-top: 6px;
font-size: 12px;
+ color: #c3cad9;
}
}
.message-content {
@@ -138,6 +140,10 @@
box-sizing: border-box;
padding: 2px 10px;
}
+ .activeTheme{
+ color: #3F7BF8;
+ background: rgba(63,123,248,0.1);
+ }
}
}
}
\ No newline at end of file
diff --git a/src/views/AI/chat/class/bar.ts b/src/views/AI/chat/class/bar.ts
index 1ff8c39..1f43b9d 100644
--- a/src/views/AI/chat/class/bar.ts
+++ b/src/views/AI/chat/class/bar.ts
@@ -43,7 +43,7 @@ export class BarChart {
}
},
grid: {
- top: '18%',
+ top: '25%',
left: '3%',
right: '3%',
bottom: '3%',
diff --git a/src/views/AI/chat/class/line.ts b/src/views/AI/chat/class/line.ts
index 9241c59..36bc1c2 100644
--- a/src/views/AI/chat/class/line.ts
+++ b/src/views/AI/chat/class/line.ts
@@ -36,7 +36,7 @@ export class LineChart {
const option = {
backgroundColor: this.styleColor.backgroundColor,
title: {
- text: '图表标题',
+ text:this.chartData.title ,
left: 'center',
top: '3%',
textStyle: {
@@ -45,7 +45,7 @@ export class LineChart {
}
},
grid: {
- top: '18%',
+ top: '25%',
left: '3%',
right: '3%',
bottom: '3%',
@@ -65,7 +65,7 @@ export class LineChart {
},
yAxis: {
type: 'value',
- name:'个',
+ name:this.chartData.unit,
nameTextStyle:{
color:this.styleColor.axisLabelColor
},
diff --git a/src/views/AI/chat/class/pie.ts b/src/views/AI/chat/class/pie.ts
index 06a904a..85cd5c6 100644
--- a/src/views/AI/chat/class/pie.ts
+++ b/src/views/AI/chat/class/pie.ts
@@ -58,7 +58,7 @@ export class PieChart {
formatter:`{b0}: {c0}${this.chartData.unit}`
},
grid: {
- top: '18%',
+ top: '20%',
left: '3%',
right: '3%',
bottom: '3%',
diff --git a/src/views/AI/chat/index.vue b/src/views/AI/chat/index.vue
index f42c4a5..7c47ccc 100644
--- a/src/views/AI/chat/index.vue
+++ b/src/views/AI/chat/index.vue
@@ -26,9 +26,10 @@
{{ item.time }}
+
{{ item.text }}
-
+
+
+
- 思考中
+ 思考中
+
+
+
+ （注：本回答由AI生成，内容仅供参考）
-
（注：本回答由AI生成，内容仅供参考）
@@ -93,12 +116,13 @@ let loading = ref(false)
let keyWord = ref('')
//聊天记录list
let messageList = reactive([])
+//聊天室容器
+const scrollContainer = ref(null)
//聊天记录最后一个索引
let lastIndex = ref(0)
//主题
const echartsTheme = ['简约风', '商务风', '科技风']
-
-// let bar = null
+let stopWatch = null
/**
* 页面初始完成
@@ -128,36 +152,81 @@ const handleSend = async () => {
setMessageItem({
from: 'user',
text: keyWord.value,
- time: moment().format('YYYY/MM/DD HH:mm:ss')
+ time: moment().format('YYYY/MM/DD HH:mm:ss'),
+ add: true
})
- // //先存储AI回答，作为交互提示，接口响应后再做更新
- // setMessageItem({
- // from: 'ai',
- // text: '',
- // time: moment().format('YYYY/MM/DD HH:mm:ss'),
- // loading: true //ai思考中
- // })
- // try {
- // const res = await getAiMsg({ prompt: keyWord.value })
- // if (res.type) {
- // console.log('图表形式')
- // } else {
- // //纯文本
- // updataMessageItem({
- // from: 'ai',
- // text: res,
- // time: moment().format('YYYY/MM/DD HH:mm:ss'),
- // loading: false
- // })
- // }
- // } catch {
- // updataMessageItem({
- // from: 'ai',
- // text: '服务器繁忙，请稍后再试。',
- // time: moment().format('YYYY/MM/DD HH:mm:ss'),
- // loading: false
- // })
- // }
+ //先存储AI回答，作为交互提示，接口响应后再做更新
+ setMessageItem({
+ from: 'ai',
+ text: '',
+ time: moment().format('YYYY/MM/DD HH:mm:ss'),
+ loading: true, //ai思考中
+ chartInstanceItem: null,
+ chartInstanceActiveIndex: 0,
+ chartType: null,
+ xData: [],
+ yData: []
+ })
+ try {
+ const res = await getAiMsg({ prompt: keyWord.value })
+ if (res.type) {
+ // 更新
+ updataMessageItem({
+ from: 'ai',
+ text: '',
+ time: moment().format('YYYY/MM/DD HH:mm:ss'),
+ loading: false, //ai思考中
+ chartInstanceItem: null,
+ chartInstanceActiveIndex: 0,
+ chartType: res.chartType,
+ xData: res.xData,
+ yData: res.yData,
+ title: res.title,
+ unit: res.unit
+ })
+ nextTick(() => {
+ const itemData = messageList[lastIndex.value]
+ //饼图
+ if (res.chartType === 'pie') {
+ itemData.chartInstanceItem = new PieChart(`${res.chartType}${lastIndex.value}`, {
+ title: res.title,
+ unit: res.unit,
+ xData: res.xData,
+ data: res.yData
+ })
+ } else if (res.chartType === 'bar') {
+ itemData.chartInstanceItem = new BarChart(`${res.chartType}${lastIndex.value}`, {
+ title: res.title,
+ unit: res.unit,
+ xData: res.xData,
+ data: res.yData
+ })
+ } else if (res.chartType === 'line') {
+ itemData.chartInstanceItem = new LineChart(`${res.chartType}${lastIndex.value}`, {
+ title: res.title,
+ unit: res.unit,
+ xData: res.xData,
+ data: res.yData
+ })
+ }
+ })
+ } else {
+ //纯文本
+ updataMessageItem({
+ from: 'ai',
+ text: res,
+ time: moment().format('YYYY/MM/DD HH:mm:ss'),
+ loading: false
+ })
+ }
+ } catch {
+ updataMessageItem({
+ from: 'ai',
+ text: '服务器繁忙，请稍后再试。',
+ time: moment().format('YYYY/MM/DD HH:mm:ss'),
+ loading: false
+ })
+ }
}
/**
* 存储聊天室数据
@@ -183,9 +252,42 @@ const updataMessageItem = data => {
* 图表切换主题
* @param index
*/
-const handlerTheme = index => {
- bar.changeColorStyle(index)
+const handlerTheme = (item, index) => {
+ pauseWatching()
+ item.chartInstanceActiveIndex = index
+ item.chartInstanceItem.changeColorStyle(index)
+ setTimeout(()=>{
+ startWatching()
+ },1000)
+
}
+
+// 聊天室自动滚动条下拉
+
+const startWatching = () => {
+ stopWatch = watch(messageList, newVal => {
+ nextTick(() => {
+ if (scrollContainer.value) {
+ scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight
+ }
+ })
+ })
+}
+
+const pauseWatching = () => {
+ if (stopWatch) {
+ stopWatch() // 调用停止函数
+ stopWatch = null
+ }
+}
+onMounted(() => {
+ startWatching()
+})
-
+
diff --git a/src/views/AI/components/aiHint/index.vue b/src/views/AI/components/aiHint/index.vue
index 0961cb6..8255889 100644
--- a/src/views/AI/components/aiHint/index.vue
+++ b/src/views/AI/components/aiHint/index.vue
@@ -85,7 +85,7 @@ let list = reactive([
}
}
.issue-list{
- margin-top: 15px;
+ margin-top: 10px;
display: flex;
flex-direction: column;
gap: 10px;
diff --git a/vite.config.ts b/vite.config.ts
index 9e2be7d..1277c93 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -56,7 +56,7 @@ export default ({ mode }) => defineConfig({
},
'/ai': {
- target: 'http://5179zv4ns298.vicp.fun/',
+ target: 'http://baijiahu.mynatapp.cc',
changeOrigin: true,
rewrite: (p) => p.replace(/^\/ai/, '')
},