From e8279a2deba53ef6dbd4a7230d072fd5b2256ca0 Mon Sep 17 00:00:00 2001 From: zhangkai <17600160566@163.com> Date: Tue, 15 Oct 2024 12:17:14 +0800 Subject: [PATCH] 1 --- package-lock.json | 28 +++++++ package.json | 1 + src/components/Chart/index.tsx | 74 +++++++++++++++++++ .../bs-comp/chatComponent/MessageBs.tsx | 18 ++++- .../bs-comp/chatComponent/MessagePanne.tsx | 2 +- src/modals/formModal/chatMessage/index.tsx | 10 ++- vite.config.ts | 2 +- 7 files changed, 128 insertions(+), 7 deletions(-) create mode 100644 src/components/Chart/index.tsx diff --git a/package-lock.json b/package-lock.json index edfd2da..fc61cdd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -51,6 +51,7 @@ "cmdk": "^0.2.0", "daisyui": "^3.6.3", "dompurify": "^3.0.5", + "echarts": "^5.5.1", "esbuild": "^0.17.19", "i18next": "^23.6.0", "i18next-http-backend": "^2.2.2", @@ -6778,6 +6779,20 @@ "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz", "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==" }, + "node_modules/echarts": { + "version": "5.5.1", + "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz", + "integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==", + "dependencies": { + "tslib": "2.3.0", + "zrender": "5.6.0" + } + }, + "node_modules/echarts/node_modules/tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" + }, "node_modules/electron-to-chromium": { "version": "1.4.750", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.750.tgz", @@ -17240,6 +17255,19 @@ "url": "https://github.com/sponsors/colinhacks" } }, + "node_modules/zrender": { + "version": "5.6.0", + "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.0.tgz", + "integrity": "sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==", + "dependencies": { + "tslib": "2.3.0" + } + }, + "node_modules/zrender/node_modules/tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" + }, "node_modules/zustand": { "version": "4.5.2", "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.2.tgz", diff --git a/package.json b/package.json index c3aa430..7e35e8a 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "cmdk": "^0.2.0", "daisyui": "^3.6.3", "dompurify": "^3.0.5", + "echarts": "^5.5.1", "esbuild": "^0.17.19", "i18next": "^23.6.0", "i18next-http-backend": "^2.2.2", diff --git a/src/components/Chart/index.tsx b/src/components/Chart/index.tsx new file mode 100644 index 0000000..4f42504 --- /dev/null +++ b/src/components/Chart/index.tsx @@ -0,0 +1,74 @@ +import { useEffect, useRef } from "react"; +import * as echarts from "echarts"; + +function Chart({ options }) { + const chartRef = useRef(null); + let chartInstance = null; + + options = eval('('+options.substring(8)+')'); + console.log(options) + + const options1 = { + tooltip: {}, + legend: { + data: [""], + }, + xAxis: { + data: options.data.map(obj => {return obj.name}), + }, + yAxis: {}, + series: [ + { + name: "", + type: options.chartType, + data: options.data.map(obj => {return obj.value}), + }, + ], +}; + // 定义渲染函数 + function renderChart() { + try { + // `echarts.getInstanceByDom` 可以从已经渲染成功的图表中获取实例，其目的就是在 options 发生改变的时候，不需要 + // 重新创建图表，而是复用该图表实例，提升性能 + const renderedInstance = echarts.getInstanceByDom(chartRef.current); + if (renderedInstance) { + chartInstance = renderedInstance; + } else { + chartInstance = echarts.init(chartRef.current); + } + chartInstance.setOption(options1); + } catch (error) { + console.error("error", error.message); + chartInstance && chartInstance.dispose(); + } + } + + // 定义窗口大小发生改变执行的回调函数 + function resizeHandler() { + chartInstance.resize(); + } + + // 页面初始化时，开始渲染图表 + useEffect(() => { + renderChart(); + + return () => { + // 销毁图表实例，释放内存 + chartInstance && chartInstance.dispose(); + }; + }, []); + + // 监听窗口大小改变 + useEffect(() => { + window.addEventListener("resize", resizeHandler); + return () => window.removeEventListener("resize", resizeHandler); + }, []); + + return ( +
+
+
+ ); +} + +export default Chart; \ No newline at end of file diff --git a/src/components/bs-comp/chatComponent/MessageBs.tsx b/src/components/bs-comp/chatComponent/MessageBs.tsx index d053ad2..dfd21dc 100644 --- a/src/components/bs-comp/chatComponent/MessageBs.tsx +++ b/src/components/bs-comp/chatComponent/MessageBs.tsx @@ -22,7 +22,7 @@ import npcIcon from "../../../assets/npc/npcIcon.png"; import nengliIcon from "../../../assets/npc/nengliIcon.png"; import { TitleIconBg } from "../cardComponent"; import Thumbs from "@/pages/ChatAppPage/components/Thumbs"; - +import Chart from "@/components/Chart" // 颜色列表 const colorList = [ "#111", @@ -104,16 +104,26 @@ export default function MessageBs({ data, onUnlike = () => { }, flow_type, onSou {/* 光标 */} {/* {data.message.toString() && !data.end &&
} */} {/*
*/} + {/*
+ +
{data.message.toString() ?
+ {mkdown} + {data.receiver &&

@ {data.receiver.user_name}

} + +
+ :
+ } */} + {data.message.toString() && data.message.toString().includes('```chart') && } + {data.message.toString() && !data.message.toString().includes('```chart') &&
{mkdown} {/* @user */} {data.receiver &&

@ {data.receiver.user_name}

} {/* 光标 */} {/* {data.message.toString() && !data.end &&
} */} -
- :
- } + } + {!data.message.toString() &&
} {/* 赞 踩 */} {!!data.id && data.end && ; diff --git a/src/modals/formModal/chatMessage/index.tsx b/src/modals/formModal/chatMessage/index.tsx index d9a6c65..b9440b5 100644 --- a/src/modals/formModal/chatMessage/index.tsx +++ b/src/modals/formModal/chatMessage/index.tsx @@ -13,6 +13,7 @@ import { ChatMessageType } from "../../../types/chat"; import { classNames } from "../../../utils"; import FileCard from "../fileComponent"; import { CodeBlock } from "./codeBlock"; +import Chart from "@/components/Chart"; export default function ChatMessage({ chat, lockChat, @@ -26,6 +27,8 @@ export default function ChatMessage({ const [hidden, setHidden] = useState(true); const template = chat.template; const [promptOpen, setPromptOpen] = useState(false); + + console.log(chat.message) return (
+ + {chat.message.toString() && chat.message.toString().includes('```chart') && } + {useMemo( () => ( - {chat.message.toString()} + {chat.message.toString() && !chat.message.toString().includes('```chart') && chat.message.toString()} + + {/* {chat.message.toString()} */} ), [chat.message, chat.message.toString()] diff --git a/vite.config.ts b/vite.config.ts index 3ae5fe7..2b150a2 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -8,7 +8,7 @@ import path from "path"; // Use environment variable to determine the target. // const target = process.env.VITE_PROXY_TARGET || "http://localhost:7860"; const target = process.env.VITE_PROXY_TARGET || "http://npcall.ai:3003"; -// const target = process.env.VITE_PROXY_TARGET || "http://172.30.40.241:7866"; +// const target = process.env.VITE_PROXY_TARGET || "http://172.30.96.205:7880"; const proxyTargets = apiRoutes.reduce((proxyObj, route) => { proxyObj[route] = {