diff --git a/src/styles/pages/index.scss b/src/styles/pages/index.scss index 75c53ad..68dd9a4 100644 --- a/src/styles/pages/index.scss +++ b/src/styles/pages/index.scss @@ -12,4 +12,132 @@ body { background-color: #18181c; } +} + +.chat-container { + box-sizing: border-box; + padding: 20px; + height: 100%; + gap: 15px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + + .chat-list { + overflow-y: auto; + display: flex; + flex-direction: column; + gap: 25px; + width: 50%; + height: 100%; + // border: 1px solid red; + + .chat-item { + display: flex; + gap: 6px; + } + .user-icon { + height: 50px; + width: 50px; + } + .user-message { + flex-direction: row-reverse; + .message-content { + display: flex; + flex-direction: column; + align-items: flex-end; + } + } + .text-ros { + display: flex; + align-items: center; + gap: 6px; + } + .ai-loading { + display: flex; + align-items: center; + font-size: 14px; + gap: 10px; + color: #ffffff; + } + .ai-message { + flex-direction: row; + .message-content { + display: flex; + flex-direction: column; + align-items: flex-start; + } + .ai-hint { + font-size: 12px; + } + } + .message-content { + font-size: 14px; + font-weight: 400; + .message-time { + color: #c3cad9; + } + width: calc(100% - 110px); + padding-top: 15px; + .message-text { + width: auto; + color: #ffffff; + font-size: 15px; + margin-top: 10px; + padding: 10px 18px; + background: #282a31; + border-radius: 10px 10px 10px 10px; + } + } + } + .chat-input { + width: 50%; + .chat-suffix { + font-size: 14px; + height: 100%; + display: flex; + align-items: center; + flex-direction: column; + justify-content: space-between; + } + .chat-send { + cursor: pointer; + width: 46px; + height: 30px; + margin-bottom: 10px; + background: url('@/assets/images/ai/chat-send.png'); + background-size: 100% 100%; + } + } + .echarts-box { + height: 220px; + width: 400px; +} +.echatrs-theme { + margin-top: 10px; + display: flex; + align-items: center; + gap: 6px; + .theme-title { + font-size: 14px; + color: #cfd5e5; + font-weight: 400; + } + .theme-list { + display: flex; + align-items: center; + gap: 10px; + .theme-item { + cursor: pointer; + background: #31363e; + border-radius: 2px; + font-size: 14px; + color: #cfd5e5; + font-weight: 400; + box-sizing: border-box; + padding: 2px 10px; + } + } +} } \ No newline at end of file diff --git a/src/views/AI/chat/class/BarChart.ts b/src/views/AI/chat/class/BarChart.ts deleted file mode 100644 index ecffa1b..0000000 --- a/src/views/AI/chat/class/BarChart.ts +++ /dev/null @@ -1,150 +0,0 @@ -import * as echarts from 'echarts'; - - interface ChartData { - xData: string[]; // X轴分类数据（如['一月', '二月', '三月']） - yData: number[]; // 单一数值数组（对应X轴每个分类的值） - seriesName?: string; // 系列名称（默认'数据系列'） - color?: string; // 柱状图颜色（默认主题蓝色） - } - - export class BarChart { - private chart: echarts.ECharts | null = null; - private dom: HTMLElement; - private xData: string[]; - private yData: number[]; - private seriesName: string = '数据系列'; - private currentColor: string = '#1890ff'; // 默认颜色 - - constructor(containerId: string, chartData: ChartData) { - - this.dom = document.getElementById(containerId)!; - this.xData = chartData.xData; - this.yData = chartData.yData; - this.seriesName = chartData.seriesName || this.seriesName; - this.currentColor = chartData.color || this.currentColor; - this.initChart(); - } - - private initChart(): void { - this.chart = echarts.init(this.dom); - this.setChartOptions(); - window.addEventListener('resize', () => this.chart?.resize()); - } - - private setChartOptions(): void { - const option= { - - // tooltip: { - // trigger: 'axis', - // formatter: (params) => ` - //
${params[0].name}
- //
- // - // ${this.seriesName}: ${params[0].value} - //
- // ` - // }, - // legend: { - // data: [this.seriesName], - // top: '16px', - // left: 'center', - // textStyle: { color: '#666', fontSize: 14 } - // }, - grid: { - left: '0%', - right: '0%', - bottom: '5%', - containLabel: true - }, - xAxis: { - type: 'category', - data: this.xData, - axisTick: { alignWithLabel: true, length: 8, color: '#e0e0e0' }, - axisLine: { lineStyle: { color: '#C3CAD9', width: 1 } }, - textStyle: { color: '#C3CAD9', fontSize: 12 } - }, - yAxis: { - type: 'value', - name: '', - // nameTextStyle: { color: 'red', fontSize: 14, margin: 20 }, - splitLine: { lineStyle: { type: 'dashed', color: '#f0f0f0' } }, - // textStyle: { color: '#666', fontSize: 14 } - axisLabel:{ - color: '#C3CAD9', - fontSize: 12, - } - }, - series: [{ - name: this.seriesName, - type: 'bar', - data: this.yData, - barWidth: '25%', // 柱体宽度 - barRadius: 4, // 柱体圆角 - itemStyle: { - color: this.currentColor, - emphasis: { - shadowBlur: 8, - shadowColor: 'rgba(0, 0, 0, 0.2)' - } - }, - label: { - show: true, - position: 'top', - color: '#fff', - fontSize: 12, - formatter: '{c}' // 显示数值 - } - }] - }; - - this.chart?.setOption(option); - } - - /** - * 更换柱状图颜色 - * @param index 新颜色值（十六进制/RGB/HSL等合法颜色字符串） - */ - - changeColorStyle(index: number): void { - if (!this.chart) { - console.warn('未读取到元素！') - return - } - if (index === 0) { - this.currentColor = '#3071EC' - } else if (index === 1) { - this.currentColor = '#6790EA' - } else if (index === 2) { - this.currentColor = '#0A50FF' - } - this.chart.setOption({ - series: [ - { - itemStyle: { color: this.currentColor } - } - ] - }); - } - - /** - * 动态更新数据 - * @param newData 新数据对象 - */ - updateData(newData: ChartData): void { - if (!this.chart) return; - this.xData = newData.xData; - this.yData = newData.yData; - this.seriesName = newData.seriesName || this.seriesName; - this.currentColor = newData.color || this.currentColor; - this.setChartOptions(); - } - - dispose(): void { - if (this.chart) { - this.chart.dispose(); - this.chart = null; - } - window.removeEventListener('resize', () => this.chart?.resize()); - } - } - \ No newline at end of file diff --git a/src/views/AI/chat/class/LineChart.ts b/src/views/AI/chat/class/LineChart.ts deleted file mode 100644 index 34669b7..0000000 --- a/src/views/AI/chat/class/LineChart.ts +++ /dev/null @@ -1,149 +0,0 @@ -import * as echarts from 'echarts'; - - interface ChartData { - xData: string[]; // X轴分类数据（如['周一', '周二', '周三']） - yData: number[]; // 单一折线数据（数值数组） - seriesName?: string; // 系列名称（默认'数据趋势'） - color?: string; // 折线颜色（默认主题蓝色） - } - - export class LineChart { - private chart: echarts.ECharts | null = null; - private dom: HTMLElement; - private xData: string[]; - private yData: number[]; - private seriesName: string = '数据趋势'; - private currentColor: string = '#1890ff'; // 默认颜色（ECharts主题蓝） - - constructor(containerId: string, chartData: ChartData) { - this.dom = document.getElementById(containerId)!; - this.xData = chartData.xData; - this.yData = chartData.yData; - this.seriesName = chartData.seriesName || this.seriesName; - this.currentColor = chartData.color || this.currentColor; - this.initChart(); - } - - private initChart(): void { - this.chart = echarts.init(this.dom); - this.setChartOptions(); - window.addEventListener('resize', () => this.chart?.resize()); - } - - private setChartOptions(): void { - const option= { - // tooltip: { - // trigger: 'axis', - // formatter: (params) => ` - //
${params[0].name}
- //
- // - // ${this.seriesName}: ${params[0].value} - //
- // ` - // }, - // legend: { - // data: [this.seriesName], - // top: '16px', - // left: 'center', - // textStyle: { color: '#666', fontSize: 14 } - // }, - grid: { - top:'5%', - left: '0%', - right: '0%', - bottom: '5%', - containLabel: true - }, - xAxis: { - type: 'category', - data: this.xData, - axisTick: { alignWithLabel: true, color: '#e0e0e0' }, - axisLine: { lineStyle: { color: '#C3CAD9', width: 1 } }, - axisLabel:{ - color: '#C3CAD9', - fontSize: 12, - } - }, - yAxis: { - type: 'value', - name: '', - splitLine: { lineStyle: { type: 'dashed', color: '#f0f0f0' } }, - axisLabel:{ - color: '#C3CAD9', - fontSize: 12, - } - }, - series: [{ - name: this.seriesName, - type: 'line', - data: this.yData, - color: this.currentColor, - smooth: true, // 曲线平滑 - symbol: 'circle', // 标记样式 - symbolSize: 8, // 标记大小 - itemStyle: { - emphasis: { scale: 1.2 } // 悬停时标记放大 - }, - lineStyle: { width: 2 }, // 线宽 - label: { - show: true, - position: 'top', - color: '#fff', - fontSize: 12, - formatter: '{c}' // 显示数值 - } - }] - }; - - this.chart?.setOption(option); - } - - /** - * 更换折线颜色 - * @param newColor 新颜色值（十六进制/RGB/HSL等合法颜色字符串） - */ - changeColorStyle(index: number): void { - - if (!this.chart) { - console.warn('未读取到元素！') - return - } - if (index === 0) { - this.currentColor = '#3071EC' - } else if (index === 1) { - this.currentColor = '#6790EA' - } else if (index === 2) { - this.currentColor = '#0A50FF' - } - this.chart.setOption({ - series: [{ - color: this.currentColor, - itemStyle: { color: this.currentColor }, - lineStyle: { color: this.currentColor } - }] - }); - } - - /** - * 动态更新数据 - * @param newData 新数据对象 - */ - updateData(newData: ChartData): void { - if (!this.chart) return; - this.xData = newData.xData; - this.yData = newData.yData; - this.seriesName = newData.seriesName || this.seriesName; - this.currentColor = newData.color || this.currentColor; - this.setChartOptions(); - } - - dispose(): void { - if (this.chart) { - this.chart.dispose(); - this.chart = null; - } - window.removeEventListener('resize', () => this.chart?.resize()); - } - } - \ No newline at end of file diff --git a/src/views/AI/chat/class/PieChart.ts b/src/views/AI/chat/class/PieChart.ts deleted file mode 100644 index 5ecfc82..0000000 --- a/src/views/AI/chat/class/PieChart.ts +++ /dev/null @@ -1,115 +0,0 @@ -import * as echarts from 'echarts' - -interface ChartData { - xData: string[] - yData: number[] -} - -export class PieChart { - private chart: echarts.ECharts | null = null - private dom: HTMLElement - private xData: string[] - private yData: number[] - private currentColors: string[] = ['#0A50FF', '#23CAF4', '#E96F69', '#F2F7F8', '#35C75D', '#35C75D', '#E6FA72'] - private scienceColors: string[] = ['#3071EC', '#41B7FD', '#54D360', '#DAE8F7', '#F6A450', '#EA7261', '#CA68F5'] // 科技风 - private businessColors: string[] = ['#6790EA', '#63C8EA', '#88DE95', '#CFEE5F', '#F3D088', '#F99774', '#F17E7E'] // 商务风 - private simpleColors: string[] = ['#0A50FF', '#23CAF4', '#E96F69', '#F2F7F8', '#35C75D', '#35C75D', '#E6FA72'] // 简约风 - - constructor(containerId: string, { xData, yData }: ChartData) { - this.dom = document.getElementById(containerId)! - this.xData = xData - this.yData = yData - this.initChart() - } - - private initChart(): void { - this.chart = echarts.init(this.dom) - this.setChartOptions() - window.addEventListener('resize', () => this.chart?.resize()) - } - - private setChartOptions(): void { - const option = { - tooltip: { - trigger: 'item', - formatter: '{a}
{b}: {c} ({d}%)' - }, - legend: { - bottom: '10%', - left: 'center', - icon: 'rect', - itemWidth: 10, - itemHeight: 5, - textStyle: { - color: '#C3CAD9', - fontSize: 12 - }, - data: this.xData - }, - series: [ - { - name: '访问来源', - type: 'pie', - radius: ['30%', '50%'], // 设置内外半径，形成环形 - center: ['50%', '50%'], - color: this.currentColors, // 应用颜色配置 - data: this.xData.map((name, index) => ({ - name, - value: this.yData[index] - })), - label: { - show: false, - position: 'center' - } - // labelLine: { - // show: false - // }, - // emphasis: { - - // itemStyle: { - // shadowBlur: 10, - // shadowOffsetX: 0, - // shadowColor: 'rgba(0, 0, 0, 0.5)' - // } - // } - } - ] - } - - this.chart?.setOption(option) - } - - /** - * 更换饼图块颜色样式 - * @param newColors 新颜色数组（需与数据项数量一致） - */ - changeColorStyle(index: number): void { - if (!this.chart) { - console.warn('未读取到元素！') - return - } - if (index === 0) { - this.currentColors = this.simpleColors - } else if (index === 1) { - this.currentColors = this.businessColors - } else if (index === 2) { - this.currentColors = this.scienceColors - } - // 仅更新颜色配置，避免重新初始化图表 - this.chart.setOption({ - series: [ - { - color: this.currentColors - } - ] - }) - } - - dispose(): void { - if (this.chart) { - this.chart.dispose() - this.chart = null - } - window.removeEventListener('resize', () => this.chart?.resize()) - } -} diff --git a/src/views/AI/chat/index.vue b/src/views/AI/chat/index.vue index 9a7eec9..f42c4a5 100644 --- a/src/views/AI/chat/index.vue +++ b/src/views/AI/chat/index.vue @@ -1,7 +1,7 @@