Skip to content
GitLab
Commit 79ac702a authored by 水玉婷's avatar 水玉婷
Browse files

feat:修改思考模式样式

parent c2cb67a9
Hide whitespace changes
Inline Side-by-side
src/assets/right.svg 0 → 100644
View file @ 79ac702a
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><g transform="matrix(0,1,1,0,0,0)"><g transform="matrix(0,1,-1,0,16,-12)"><g><path d="M17.000362568064354,2.999951124191284L21.750148263464354,7.998192524191285L16.997019737204354,12.999951124191284L19.063601763464355,12.999951124191284L23.300084563464356,8.541863224191285L23.816730063464355,7.998192524191285L23.300084563464356,7.454522324191284L19.066943863464356,2.999951124191284L17.000362568064354,2.999951124191284Z" fill-rule="evenodd" fill="#323232" fill-opacity="1"/></g></g></g></svg>
\ No newline at end of file
src/assets/think.svg 0 → 100644
View file @ 79ac702a
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="22" height="22" viewBox="0 0 22 22"><defs><clipPath id="master_svg0_121_8115"><rect x="0" y="0" width="22" height="22" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_121_8115)"><path d="M16.035705999999998,8.0129995L16.035705999999998,9.3953524C17.210765000000002,9.7378268,17.964272,10.3292413,17.964272,10.8795886C17.964272,11.7177935,16.223004,12.6552486,13.892852,12.6552486C12.790864,12.6552486,11.8238211,12.4442244,11.107132,12.1345882L11.107132,13.561231C11.9092922,13.833097,12.857735,13.986986,13.892852,13.986986C16.946835999999998,13.98701,19.25,12.651145,19.25,10.8795886C19.25,9.554954500000001,17.962080999999998,8.4741578,16.035705999999998,8.0129995ZM14.39801,4.855721C15.098812,5.2748118999999996,15.011995,7.305562699999999,13.846909,9.3957906C13.295926,10.384297400000001,12.6359987,11.1463032,12.0187321,11.6343422L13.211541,12.3476858C13.839953,11.76406,14.442795,10.9901891,14.960351,10.0616713C16.487357,7.3221397,16.522031,4.5881999,15.040874,3.70243344C13.93337,3.04014087,12.3857393,3.65501867,11.0370064,5.1524888L12.1927586,5.8436158C13.066647,4.9608039,13.937895,4.5805581,14.39801,4.855721ZM7.1817808,7.3279274C6.880609,6.1026156,6.9983015,5.1310037,7.4584389,4.855818C8.159265000000001,4.43672717,9.813697300000001,5.529927,10.9787617,7.6201549C11.5297432,8.608661699999999,11.8369026,9.5816412,11.936305,10.3793416L13.129112,9.6660447C12.955369,8.8105049,12.6098108,7.882792,12.0922279,6.9542744C10.5652246,4.21479195,8.2967339,2.81669235,6.8155756,3.70248333C5.7080717,4.36477602,5.448362100000001,6.060524,6.0260031000000005,8.0190787L7.1817808,7.3279274ZM5.9642937,12.6046591C4.7892342,12.2621841,4.0357264,11.6707687,4.0357264,11.1204205C4.0357264,10.2822151,5.7770188000000005,9.3447623,8.1071491,9.3447623C9.2091374,9.3447623,10.176178,9.5557117,10.892869,9.8654203L10.892869,8.438778899999999C10.0907092,8.1669135,9.1422663,8.0130234,8.1071491,8.0130234C5.053164499999999,8.0129991,2.75,9.348864599999999,2.75,11.120423299999999C2.75,12.4450312,4.0379190000000005,13.525876,5.964294000000001,13.987012L5.9642937,12.6046591ZM7.6729155,17.144291000000003C6.9721136,16.725199,7.0589271,14.694449,8.224016200000001,12.6042204C8.7749972,11.6157131,9.4349513,10.8537087,10.052192699999999,10.3656693L8.8593841,9.652324199999999C8.2309928,10.2359486,7.62813,11.009820000000001,7.1105714,11.9383392C5.5835676,14.677871,5.548894199999999,17.411811,7.0300522,18.297577C8.1375785,18.959868,9.6851854,18.344991999999998,11.0339413,16.847521L9.8781853,16.156343C9.0042996,17.039205000000003,8.1330519,17.419401999999998,7.6729155,17.144291000000003ZM14.88919,14.672059C15.190363,15.897369,15.072649,16.868983,14.61251,17.144168999999998C13.911708,17.563257,12.2572527,16.470058,11.0921879,14.379831C10.541205399999999,13.391324,10.234046,12.4183445,10.134646400000001,11.6205711L8.9418368,12.3339167C9.1155825,13.1894579,9.4611859,14.117168,9.978744500000001,15.045689C11.5057487,17.785217,13.774216,19.183293,15.255373,18.297524C16.362902,17.635233,16.622588,15.939487,16.04497,13.980882L14.88919,14.672059Z" fill="#1890FF" fill-opacity="1"/></g></svg>
\ No newline at end of file
src/views/components/AiChat.vue
View file @ 79ac702a
......@@ -54,6 +54,9 @@
<!-- 思考过程框 -->
<div v-if="item.hasThinkBox" class="think-box-wrapper">
<div :class="['think-box-toggle', item.thinkBoxExpanded ? 'expanded' : 'collapsed']" @click="toggleThinkBox(index, i)">
<div class="think-icon">
<img :src="thinkIcon" class="think-icon-image" />
</div>
<div v-if="item.thinkingTimeText" class="thinking-loading">
<span class="thinking-text">{{ item.thinkingTimeText }}</span>
<div v-if="item.thinkingTimeText === '正在思考中'" class="loading-dots">
......@@ -62,9 +65,9 @@
<span class="dot"></span>
</div>
</div>
<component
:is="item.thinkBoxExpanded ? UpOutlined : DownOutlined"
class="toggle-icon"
<img
:src="rightIcon"
:class="['toggle-icon', item.thinkBoxExpanded ? 'expanded' : 'collapsed']"
v-if="item.thinkingTimeText !== '正在思考中'"
/>
</div>
......@@ -119,8 +122,10 @@
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
import dayjs from 'dayjs';
import { markdownTemplate, isLastBlockMarkdown, getLastMarkdownBlockIndex, mergeMarkdownContent } from './utils/markdownTemplate';
import { SendOutlined, UserOutlined, UpOutlined, DownOutlined, ReloadOutlined } from '@ant-design/icons-vue';
import { SendOutlined, UserOutlined, ReloadOutlined } from '@ant-design/icons-vue';
import defaultAvatar from '@/assets/logo.png';
import rightIcon from '@/assets/right.svg'
import thinkIcon from '@/assets/think.svg'
import ChartComponent from './ChartComponent.vue'; // 导入独立的图表组件
import VoiceRecognition from './VoiceRecognition.vue'; // 导入语音识别组件
import AudioPlayer from './AudioPlayer.vue'; // 导入音频播放器组件
......
src/views/components/ChartComponent.vue
View file @ 79ac702a
......@@ -2,124 +2,126 @@
<div class="chart-container">
<div class="tips" v-if="chartData?.description" v-html="renderedDescription">
</div>
<!-- 图表类型选择器 -->
<div class="chart-controls">
<div class="chart-type-selector">
<a-select
v-model:value="selectedChartType"
:options="chartTypeOptions"
:getPopupContainer="triggerNode => triggerNode.parentNode"
@change="handleChartTypeChange"
/>
</div>
<!-- 指标和维度选择器（非表格时显示） -->
<div v-if="showChartControls" class="chart-fields-selector">
<div class="field-selector">
<span class="control-label">维度</span>
<a-tooltip placement="top">
<template #title>
<span>维度用于对数据进行分类，如时间、地区等</span>
</template>
<question-circle-outlined/>
</a-tooltip>
<!-- 维度选择器 -->
<a-select
v-model:value="selectedDimensions"
:mode="selectedChartType === CHART_TYPES.PIE ? undefined : 'multiple'"
:maxTagCount="12"
:maxTagTextLength="6"
:showSearch="false"
:dropdownMatchSelectWidth="false"
<div class="chart-main-box">
<!-- 图表类型选择器 -->
<div class="chart-controls">
<div class="chart-type-selector">
<a-select
v-model:value="selectedChartType"
:options="chartTypeOptions"
:getPopupContainer="triggerNode => triggerNode.parentNode"
placeholder="请选择维度"
@change="handleFieldChange"
>
<a-select-option
v-for="dim in availableDimensions"
:key="dim"
:value="dim"
:disabled="
(selectedDimensions.length >= 2 && !selectedDimensions.includes(dim))"
>
{{ dim }}
</a-select-option>
</a-select>
</div>
@change="handleChartTypeChange"
/>
</div>
<div class="field-selector">
<span class="control-label">指标</span>
<a-tooltip placement="top">
<template #title>
<span>指标用于衡量数据，如销售额、用户数等</span>
</template>
<question-circle-outlined/>
</a-tooltip>
<!-- 指标选择器 -->
<a-select
v-model:value="selectedIndexes"
:mode="selectedChartType === CHART_TYPES.PIE ? undefined : 'multiple'"
:maxTagCount="2"
:maxTagTextLength="6"
:dropdownMatchSelectWidth="false"
:getPopupContainer="triggerNode => triggerNode.parentNode"
placeholder="请选择指标"
@change="handleFieldChange"
>
<a-select-option
v-for="index in availableIndexes"
:key="index"
:value="index"
:disabled="(selectedIndexes.length >= 2 && !selectedIndexes.includes(index))"
<!-- 指标和维度选择器（非表格时显示） -->
<div v-if="showChartControls" class="chart-fields-selector">
<div class="field-selector">
<span class="control-label">维度</span>
<a-tooltip placement="top">
<template #title>
<span>维度用于对数据进行分类，如时间、地区等</span>
</template>
<question-circle-outlined/>
</a-tooltip>
<!-- 维度选择器 -->
<a-select
v-model:value="selectedDimensions"
:mode="selectedChartType === CHART_TYPES.PIE ? undefined : 'multiple'"
:maxTagCount="12"
:maxTagTextLength="6"
:showSearch="false"
:dropdownMatchSelectWidth="false"
:getPopupContainer="triggerNode => triggerNode.parentNode"
placeholder="请选择维度"
@change="handleFieldChange"
>
<a-select-option
v-for="dim in availableDimensions"
:key="dim"
:value="dim"
:disabled="
(selectedDimensions.length >= 2 && !selectedDimensions.includes(dim))"
>
{{ dim }}
</a-select-option>
</a-select>
</div>
<div class="field-selector">
<span class="control-label">指标</span>
<a-tooltip placement="top">
<template #title>
<span>指标用于衡量数据，如销售额、用户数等</span>
</template>
<question-circle-outlined/>
</a-tooltip>
<!-- 指标选择器 -->
<a-select
v-model:value="selectedIndexes"
:mode="selectedChartType === CHART_TYPES.PIE ? undefined : 'multiple'"
:maxTagCount="2"
:maxTagTextLength="6"
:dropdownMatchSelectWidth="false"
:getPopupContainer="triggerNode => triggerNode.parentNode"
placeholder="请选择指标"
@change="handleFieldChange"
>
{{ index }}
</a-select-option>
</a-select>
<a-select-option
v-for="index in availableIndexes"
:key="index"
:value="index"
:disabled="(selectedIndexes.length >= 2 && !selectedIndexes.includes(index))"
>
{{ index }}
</a-select-option>
</a-select>
</div>
</div>
</div>
</div>
<!-- 图表渲染区域 -->
<div class="chart-render-area">
<!-- 表格渲染 -->
<template v-if="selectedChartType === CHART_TYPES.TABLE">
<TableComponent
:table-data="props.chartData"
:config="{ title: title }"
<!-- 图表渲染区域 -->
<div class="chart-render-area">
<!-- 表格渲染 -->
<template v-if="selectedChartType === CHART_TYPES.TABLE">
<TableComponent
:table-data="props.chartData"
:config="{ title: title }"
/>
</template>
<!-- 柱状图渲染 -->
<ColumnChart
v-else-if="selectedChartType === CHART_TYPES.COLUMN && processedChartData"
:chart-data="processedChartData"
:title="title"
:width="width"
:height="height"
/>
</template>
<!-- 柱状图渲染 -->
<ColumnChart
v-else-if="selectedChartType === CHART_TYPES.COLUMN && processedChartData"
:chart-data="processedChartData"
:title="title"
:width="width"
:height="height"
/>
<!-- 折线图渲染 -->
<LineChart
v-else-if="selectedChartType === CHART_TYPES.LINE && processedChartData"
:chart-data="processedChartData"
:title="title"
:width="width"
:height="height"
/>
<!-- 饼图渲染 -->
<PieChart
v-else-if="selectedChartType === CHART_TYPES.PIE && processedChartData"
:chart-data="processedChartData"
:title="title"
:width="width"
:height="height"
/>
<!-- 空数据提示 -->
<div v-else-if="!processedChartData" class="chart-empty">
<div class="empty-icon">📊</div>
<div class="empty-text">请选择维度和指标</div>
<!-- 折线图渲染 -->
<LineChart
v-else-if="selectedChartType === CHART_TYPES.LINE && processedChartData"
:chart-data="processedChartData"
:title="title"
:width="width"
:height="height"
/>
<!-- 饼图渲染 -->
<PieChart
v-else-if="selectedChartType === CHART_TYPES.PIE && processedChartData"
:chart-data="processedChartData"
:title="title"
:width="width"
:height="height"
/>
<!-- 空数据提示 -->
<div v-else-if="!processedChartData" class="chart-empty">
<div class="empty-icon">📊</div>
<div class="empty-text">请选择维度和指标</div>
</div>
</div>
</div>
</div>
......@@ -345,10 +347,20 @@ onMounted(() => {
overflow: hidden;
width: 100% !important;
max-width: 100% !important;
border: 1px solid #EBEDF0;
.tips {
margin-bottom: 8px;
.chart-main-box {
border: 1px solid #EBEDF0;
}
:deep(.tips ){
font-size:0;
.message-markdown{
margin:0 0 12px;
.markdown-content{
br{
display: none;
}
}
}
}
}
......
src/views/components/style.less
View file @ 79ac702a
......@@ -18,7 +18,7 @@
@gray-5: #999999;
@gray-6: #666666;
@gray-7: #323232;
@gray-8:#686566;
@gray-8:#969799;
@gray-9:#222629;
@gray-10:#C8C9CC;
@success-color: #52c41a;
......@@ -172,14 +172,11 @@ li {
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 12px 16px;
}
// 输入容器
.chat-input-container {
padding: 20px;
border-top: 1px solid #e8f2f1; // 保持灰色系
background: #FCFCFC; // 保持灰色系
padding: 40px 0 30px;
flex-shrink: 0;
}
}
......@@ -297,7 +294,7 @@ li {
// 图表块样式
.chart-block {
margin-top: 16px;
margin-top: 12px;
}
// 失败消息样式
......@@ -367,9 +364,31 @@ li {
align-items: center;
gap: 8px;
.think-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
color: white;
font-size: 12px;
font-weight: bold;
position: relative;
}
.toggle-icon {
width: 16px;
height: 16px;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
&.collapsed {
transform: rotate(0deg);
}
&.expanded {
transform: rotate(90deg);
}
}
.thinking-loading {
......@@ -404,10 +423,10 @@ li {
}
.thinking-text {
color: @gray-8;
color: @gray-7;
font-size: 14px;
transition: color 0.3s ease;
font-weight: 400;
font-weight: 500;
}
}
......@@ -459,13 +478,43 @@ li {
opacity: 0;
transform: translateY(5px);
transition: opacity 0.3s ease-in-out 0.1s, transform 0.3s ease-in-out 0.1s;
padding-left:8px;
border-left: 1px solid #C8C9CC;
padding-left:24px;
position: relative;
&::before {
content: '';
position: absolute;
left: 10px;
top: 8px;
width: 4px;
height: 4px;
background-color: #646566;
border-radius: 50%;
transform: translateY(-50%);
}
&::after {
content: '';
position: absolute;
left: 11.5px;
top: 16px;
width: 1px;
height: calc(100% - 16px);
background-color: #C8C9CC;
}
}
&.expanded .think-content {
opacity: 1;
transform: translateY(0);
&::before {
opacity: 1;
}
&::after {
opacity: 1;
}
}
}
......@@ -737,81 +786,7 @@ li {
}
}
// =============================================
// 响应式样式
// =============================================
@media (max-width: 768px) {
:deep(.message-table) {
.data-table {
font-size: 12px;
th,
td {
padding: 8px 4px;
height: 30px;
min-width: 60px;
}
}
.table-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 8px;
color: #333;
width: 100%;
box-sizing: border-box;
text-align: center;
}
.table-summary {
font-size: 12px;
padding: 8px 10px;
}
}
}
@media (max-width: 480px) {
:deep(.message-table) {
.data-table {
th,
td {
min-width: 50px;
height: 28px;
}
}
}
}
@media (max-width: 600px) {
.chat-container{
.chat-header {
padding: 2px 10px;
.header-info {
h2 {
font-size: 16px;
}
}
}
.header-avatar {
width: 40px;
height: 40px;
}
}
.avatar-container {
display: none;
}
.message{
margin-bottom: 8px;
}
.chat-container{
.chat-input-container{
padding:12px;
}
}
}
// =============================================
// 选项消息样式 - 纯渲染版本
......@@ -886,23 +861,7 @@ li {
}
}
// 响应式调整
@media (max-width: 768px) {
:deep(.message-options) {
.option-item {
.option-content {
.option-number-title {
font-size: 14px;
}
.option-url {
font-size: 11px;
max-width: 100%;
}
}
}
}
}
......@@ -937,7 +896,7 @@ li {
:deep(.message-markdown) {
width: 100%;
max-width: 100%;
margin:8px 0;
margin:12px 0;
border-radius:8px;
overflow: hidden;
......@@ -1235,33 +1194,7 @@ li {
}
}
// 响应式调整
@media (max-width: 768px) {
:deep(.message-markdown) {
.markdown-content {
h1 {
font-size: 18px;
}
h2 {
font-size: 16px;
}
h3 {
font-size: 15px;
}
pre {
padding: 8px;
code {
font-size: 12px;
}
}
}
}
}
// 语音识别组件样式调整
.chat-input {
......@@ -1272,7 +1205,7 @@ li {
textarea {
flex: 1;
padding: 14px 110px 14px 16px; // 调整内边距：右侧为两个按钮留空间，左侧恢复正常
border-radius: 12px;
border-radius: 8px;
outline: none;
resize: none;
height: 52px;
......@@ -1328,4 +1261,134 @@ li {
transform: scaleY(1);
opacity: 1;
}
}
// =============================================
// 响应式样式 - 统一放在文件底部
// =============================================
@media (max-width: 1000px) {
.chat-messages {
padding: 12px 14px;
}
.chat-container{
.chat-input-container {
padding: 10px 10px 20px;
border-top: 1px solid #e8f2f1; // 保持灰色系
background: #FCFCFC; // 保持灰色系
}
}
}
@media (max-width: 768px) {
:deep(.message-table) {
.data-table {
font-size: 12px;
th,
td {
padding: 8px 4px;
height: 30px;
min-width: 60px;
}
}
.table-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 8px;
color: #333;
width: 100%;
box-sizing: border-box;
text-align: center;
}
.table-summary {
font-size: 12px;
padding: 8px 10px;
}
}
:deep(.message-markdown) {
.markdown-content {
h1 {
font-size: 18px;
}
h2 {
font-size: 16px;
}
h3 {
font-size: 15px;
}
pre {
padding: 8px;
code {
font-size: 12px;
}
}
}
}
:deep(.message-options) {
.option-item {
.option-content {
.option-number-title {
font-size: 14px;
}
.option-url {
font-size: 11px;
max-width: 100%;
}
}
}
}
.avatar-container {
display: none;
}
.message{
margin-bottom: 8px;
}
.chat-container{
.chat-input-container{
padding:12px;
}
}
}
@media (max-width: 600px) {
.chat-container{
.chat-header {
padding: 2px 10px;
.header-info {
h2 {
font-size: 16px;
}
}
}
.header-avatar {
width: 40px;
height: 40px;
}
}
}
@media (max-width: 480px) {
:deep(.message-table) {
.data-table {
th,
td {
min-width: 50px;
height: 28px;
}
}
}
}
\ No newline at end of file
src/views/components/utils/contentTemplateService.ts
View file @ 79ac702a
......@@ -138,7 +138,7 @@ export class ContentTemplateService {
// 思考过程
thinking: (content: string) => {
return `<div class="think-content">${content}</div>`;
return `<div class="think-content"><div class="think-icon"></div>${content}</div>`;
},
// 错误信息
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment