From 6da8d7c3e2fb6aa02b14b0af63a8b5fadc0716bc Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期三, 29 四月 2026 17:24:13 +0800
Subject: [PATCH] 合格率加百分号
---
src/components/AIChatSidebar/index.vue | 2609 ++++++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 2,202 insertions(+), 407 deletions(-)
diff --git a/src/components/AIChatSidebar/index.vue b/src/components/AIChatSidebar/index.vue
index d14978c..548ec31 100644
--- a/src/components/AIChatSidebar/index.vue
+++ b/src/components/AIChatSidebar/index.vue
@@ -2,46 +2,64 @@
<div class="ai-chat-sidebar-wrapper">
<!-- 鎮诞鍥炬爣 -->
<div class="ai-chat-trigger" @click="toggleSidebar" v-show="!visible">
- <el-tooltip content="AI 鍔╂墜" placement="left">
+ <el-tooltip :content="currentAssistant.tooltip" placement="left">
<div class="trigger-icon">
- <el-icon :size="30" color="#fff"><Cpu /></el-icon>
+ <el-icon :size="30" color="#fff"><component :is="currentAssistant.icon" /></el-icon>
</div>
</el-tooltip>
</div>
<!-- 渚ц竟鏍忓璇濇 -->
<el-drawer
- v-model="visible"
- :size="drawerSize"
- direction="rtl"
- :with-header="true"
- class="ai-chat-drawer"
- :modal="false"
- :show-close="true"
- :append-to-body="false"
- @close="handleClose"
+ v-model="visible"
+ :size="drawerSize"
+ direction="rtl"
+ :with-header="true"
+ class="ai-chat-drawer"
+ :modal="false"
+ modal-class="ai-chat-overlay"
+ :show-close="false"
+ :append-to-body="false"
+ @close="handleClose"
>
<template #header>
<div class="drawer-header">
<div class="header-left">
- <el-icon :size="20" class="header-icon"><Cpu /></el-icon>
- <span class="title">AI 鏅鸿兘鍔╂墜</span>
+ <el-icon :size="20" class="header-icon"><component :is="currentAssistant.icon" /></el-icon>
+ <span class="title">{{ currentAssistant.title }}</span>
+ </div>
+ <div v-if="showAssistantSwitch" class="assistant-switcher">
+ <el-radio-group v-model="selectedAssistantKey" size="small">
+ <el-radio-button
+ v-for="assistant in assistants"
+ :key="assistant.key"
+ :label="assistant.key"
+ >
+ {{ assistant.label }}
+ </el-radio-button>
+ </el-radio-group>
</div>
<div class="header-actions">
<el-tooltip content="浼氳瘽鍘嗗彶" placement="bottom">
- <el-button link @click="toggleHistory">
+ <el-button link class="header-action-btn" @click="handleToggleHistory">
<el-icon :size="18"><Timer /></el-icon>
</el-button>
</el-tooltip>
<el-tooltip content="寮�鍚柊浼氳瘽" placement="bottom">
- <el-button link @click="newChat">
+ <el-button link class="header-action-btn" @click="handleNewChat">
<el-icon :size="18"><Plus /></el-icon>
+ </el-button>
+ </el-tooltip>
+ <div class="action-divider"></div>
+ <el-tooltip content="鍏抽棴" placement="bottom">
+ <el-button link class="header-action-btn close-btn" @click="handleManualClose">
+ <el-icon :size="18"><Close /></el-icon>
</el-button>
</el-tooltip>
</div>
</div>
</template>
-
+
<div class="chat-container">
<!-- 鍘嗗彶浼氳瘽鍒楄〃 -->
<div v-if="showHistory" class="history-panel">
@@ -56,124 +74,200 @@
</div>
</template>
<div class="session-list">
- <div
- v-for="session in sessions"
- :key="session.memoryId"
- :class="['session-item', { active: uuid === session.memoryId }]"
- @click="selectSession(session)"
+ <div
+ v-for="session in sessions"
+ :key="session.memoryId"
+ :class="['session-item', { active: uuid === session.memoryId }]"
+ @click="selectSession(session)"
>
<el-icon><ChatDotSquare /></el-icon>
<span class="session-name" :title="session.lastMessage || '鏂颁細璇�'">
{{ session.lastMessage || '鏂颁細璇�' }}
</span>
- <el-button
- link
- type="danger"
- class="delete-btn"
- @click.stop="handleDeleteSession(session.memoryId)"
+ <el-button
+ link
+ type="danger"
+ class="delete-btn"
+ @click.stop="handleDeleteSession(session.memoryId)"
>
<el-icon><Delete /></el-icon>
</el-button>
</div>
- <el-empty v-if="sessions.length === 0" description="鏆傛棤鍘嗗彶浼氳瘽" />
+ <el-empty v-if="sessions.length === 0" :description="currentAssistant.emptySessionText" />
</div>
</el-skeleton>
</div>
<div v-else class="chat-main">
+ <div :class="['chat-hero', { compact: hasMessages }]">
+ <div :class="['assistant-stand', { thinking: isSending, compact: hasMessages }]">
+ <div class="assistant-halo"></div>
+ <div class="assistant-scan-ring"></div>
+ <div class="assistant-orbit assistant-orbit-a"></div>
+ <div class="assistant-orbit assistant-orbit-b"></div>
+ <div class="assistant-bot">
+ <div class="assistant-bot-antenna assistant-bot-antenna-left"></div>
+ <div class="assistant-bot-antenna assistant-bot-antenna-right"></div>
+ <div class="assistant-bot-head">
+ <div class="assistant-bot-head-glow"></div>
+ <div class="assistant-bot-eye assistant-bot-eye-left"></div>
+ <div class="assistant-bot-eye assistant-bot-eye-right"></div>
+ <div class="assistant-bot-mouth"></div>
+ </div>
+ <div class="assistant-bot-neck"></div>
+ <div class="assistant-bot-body">
+ <div class="assistant-bot-core">
+ <div class="assistant-bot-core-ring"></div>
+ <el-icon :size="22"><component :is="currentAssistant.icon" /></el-icon>
+ </div>
+ <div class="assistant-bot-arm assistant-bot-arm-left"></div>
+ <div class="assistant-bot-arm assistant-bot-arm-right"></div>
+ </div>
+ </div>
+ <div class="assistant-status">
+ <span class="assistant-status-dot"></span>
+ {{ isSending ? '鎬濊�冧腑...' : currentAssistant.label }}
+ </div>
+ <div class="assistant-base assistant-base-lg"></div>
+ <div class="assistant-base assistant-base-md"></div>
+ <div class="assistant-base assistant-base-sm"></div>
+ </div>
+
+ <div :class="['welcome-card', { compact: hasMessages }]">
+ <div class="welcome-eyebrow">鏅鸿兘鍔╂墜</div>
+ <h3 class="welcome-title">
+ 鎮ㄥソ
+ <br />
+ 鎴戞槸{{ currentAssistant.label }}鍒嗘瀽瑙ｈ鍔╂墜
+ </h3>
+ <p class="welcome-desc">
+ {{ currentAssistant.description || '鎴戝彲浠ュ洿缁曚笟鍔￠棶棰樻彁渚涜В璇汇�佹煡璇㈠缓璁拰鍒嗘瀽鏀寔锛屽府鍔╀綘鏇村揩瀹屾垚鍒ゆ柇涓庡鐞嗐��' }}
+ </p>
+
+ <div class="quick-prompt-list">
+ <button
+ v-for="prompt in displayedQuickPrompts"
+ :key="prompt"
+ type="button"
+ class="quick-prompt-btn"
+ :disabled="isSending"
+ @click="sendQuickPrompt(prompt)"
+ >
+ {{ prompt }}
+ </button>
+ </div>
+
+ <button
+ v-if="quickPrompts.length > quickPromptLimit"
+ type="button"
+ class="more-prompts-btn"
+ @click="refreshQuickPrompts"
+ >
+ <el-icon><RefreshRight /></el-icon>
+ <span>鎹竴鎹�</span>
+ </button>
+ </div>
+ </div>
+
+ <div v-show="!hasMessages" class="hero-dot-grid" aria-hidden="true">
+ <span v-for="dot in 28" :key="dot"></span>
+ </div>
+
<div class="message-list" ref="messageListRef">
- <div
- v-for="(message, index) in messages"
- :key="index"
- :class="['message-item', message.isUser ? 'user-message' : 'bot-message']"
- >
- <div class="avatar">
- <el-icon v-if="message.isUser"><User /></el-icon>
- <el-icon v-else><Cpu /></el-icon>
- </div>
- <div class="message-content">
- <!-- 鏂囨湰鍐呭 -->
- <div class="text-box" v-html="message.htmlContent"></div>
-
- <!-- 鍥捐〃鍐呭 -->
- <div v-if="message.chartOptions && message.chartRenderReady" class="charts-wrapper">
- <div
- v-for="(option, key) in message.chartOptions"
- :key="key"
- class="chart-item"
- :id="`ai-chart-${index}-${key}`"
- ></div>
+ <div
+ v-for="(message, index) in messages"
+ :key="index"
+ :class="['message-item', message.isUser ? 'user-message' : 'bot-message']"
+ >
+ <div class="avatar">
+ <el-icon v-if="message.isUser"><User /></el-icon>
+ <el-icon v-else><Cpu /></el-icon>
</div>
+ <div class="message-content">
+ <!-- 鏂囨湰鍐呭 -->
+ <div class="text-box" v-html="message.htmlContent"></div>
- <!-- 琛ㄦ牸鍐呭 -->
- <div v-if="message.type === 'todo_list' && message.tableData" class="table-wrapper">
- <el-table :data="message.tableData.items" border stripe size="small" style="width: 100%">
- <el-table-column
- v-for="col in message.tableData.columns"
- :key="col"
- :prop="col"
- :label="columnLabelMap[col] || col"
- min-width="100"
- show-overflow-tooltip
- />
- </el-table>
- </div>
+ <!-- 鍥捐〃鍐呭 -->
+ <div v-if="message.chartOptions && message.chartRenderReady" class="charts-wrapper">
+ <div
+ v-for="(option, key) in message.chartOptions"
+ :key="key"
+ class="chart-item"
+ :id="`ai-chart-${index}-${key}`"
+ ></div>
+ </div>
- <!-- 鎵撳瓧涓姩鐢� -->
- <div v-if="message.isTyping" class="typing-indicator">
- <span class="dot"></span>
- <span class="dot"></span>
- <span class="dot"></span>
+ <!-- 琛ㄦ牸鍐呭 -->
+ <div v-if="message.type === 'todo_list' && message.tableData" class="table-wrapper">
+ <el-table :data="message.tableData.items" border stripe size="small" style="width: 100%">
+ <el-table-column
+ v-for="col in message.tableData.columns"
+ :key="col"
+ :prop="col"
+ :label="columnLabelMap[col] || col"
+ min-width="100"
+ show-overflow-tooltip
+ />
+ </el-table>
+ </div>
+
+ <!-- 鎵撳瓧涓姩鐢� -->
+ <div v-if="message.isTyping" class="typing-indicator">
+ <span class="dot"></span>
+ <span class="dot"></span>
+ <span class="dot"></span>
+ </div>
</div>
</div>
</div>
- </div>
- <div class="input-area">
- <div class="input-actions">
- <el-button link type="primary" size="small" @click="newChat">
- <el-icon><Plus /></el-icon>鏂颁細璇�
- </el-button>
- <el-button v-if="isSending" link type="danger" size="small" @click="stopGeneration">
- <el-icon><VideoPause /></el-icon>鍋滄鐢熸垚
- </el-button>
- <el-upload
- class="file-upload-trigger"
- action="#"
- :auto-upload="false"
- :show-file-list="false"
- :on-change="handleFileChange"
- :disabled="isSending"
- >
- <el-button link type="primary" size="small" :disabled="isSending">
- <el-icon><Upload /></el-icon>鍒嗘瀽鏂囦欢
+ <div class="input-area">
+ <div class="input-actions">
+ <el-button link class="utility-action-btn" type="primary" size="small" @click="handleNewChat">
+ <el-icon><Plus /></el-icon>鏂颁細璇�
</el-button>
- </el-upload>
- </div>
- <div class="input-box">
- <div v-if="selectedFile" class="selected-file-tag">
- <el-icon><Document /></el-icon>
- <span class="file-name">{{ selectedFile.name }}</span>
- <el-icon class="remove-file" @click="removeSelectedFile"><Close /></el-icon>
+ <el-button v-if="isSending" link class="utility-action-btn stop-action-btn" type="danger" size="small" @click="stopGeneration">
+ <el-icon><VideoPause /></el-icon>鍋滄鐢熸垚
+ </el-button>
+ <el-upload
+ v-if="currentAssistant.allowFileUpload"
+ class="file-upload-trigger"
+ action="#"
+ :auto-upload="false"
+ :show-file-list="false"
+ :on-change="handleFileChange"
+ :disabled="isSending"
+ >
+ <el-button link class="utility-action-btn upload-action-btn" type="primary" size="small" :disabled="isSending">
+ <el-icon><Upload /></el-icon>鍒嗘瀽鏂囦欢
+ </el-button>
+ </el-upload>
</div>
- <el-input
- v-model="inputMessage"
- type="textarea"
- :rows="selectedFile ? 2 : 3"
- placeholder="璇疯緭鍏ユ偍鐨勯棶棰�... (Enter 鍙戦��, Shift+Enter 鎹㈣)"
- resize="none"
- @keydown.enter.exact.prevent="sendMessage"
- />
- <el-button
- type="primary"
- class="send-btn"
- :disabled="isSending || (!inputMessage.trim() && !selectedFile)"
- @click="sendMessage"
- >
- 鍙戦��
- </el-button>
+ <div class="input-box">
+ <div v-if="selectedFile" class="selected-file-tag">
+ <el-icon><Document /></el-icon>
+ <span class="file-name">{{ selectedFile.name }}</span>
+ <el-icon class="remove-file" @click="removeSelectedFile"><Close /></el-icon>
+ </div>
+ <el-input
+ v-model="inputMessage"
+ type="textarea"
+ :rows="selectedFile ? 2 : 3"
+ :placeholder="currentAssistant.placeholder"
+ resize="none"
+ @keydown.enter.exact.prevent="sendMessage"
+ />
+ <el-button
+ type="primary"
+ class="send-btn"
+ :disabled="isSending || (!inputMessage.trim() && !selectedFile)"
+ @click="sendMessage"
+ aria-label="鍙戦��"
+ >
+ <el-icon><Promotion /></el-icon>
+ </el-button>
+ </div>
</div>
- </div>
</div>
</div>
</el-drawer>
@@ -184,8 +278,101 @@
import { ref, onMounted, onUnmounted, nextTick, watch, computed } from 'vue'
import request from '@/utils/request'
import * as echarts from 'echarts'
-import { Cpu, User, Plus, Loading, Timer, Delete, ChatDotSquare, VideoPause, Upload, Document, Close } from '@element-plus/icons-vue'
+import { Cpu, User, Plus, Timer, Delete, ChatDotSquare, VideoPause, Upload, Document, Close, ShoppingCart, Promotion, RefreshRight } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
+
+const props = defineProps({
+ assistants: {
+ type: Array,
+ default: () => []
+ },
+ defaultAssistant: {
+ type: String,
+ default: ''
+ }
+})
+
+const builtInAssistants = [
+ {
+ key: 'general',
+ label: '寰呭姙鍔╃悊',
+ title: '寰呭姙鏅鸿兘鍔╃悊',
+ tooltip: '寰呭姙鍔╂墜',
+ icon: Cpu,
+ apiBase: '/xiaozhi',
+ storageKey: 'ai_chat_uuid',
+ placeholder: '璇疯緭鍏ユ偍鐨勯棶棰�... (Enter 鍙戦��, Shift+Enter 鎹㈣)',
+ welcomeMessage: '浣犲ソ',
+ description: '鎴戝彲浠ュ洖绛斾綘鐨勯棶棰橈紝涓轰綘鎻愪緵涓氬姟鏁版嵁瑙ｈ淇℃伅銆佸鐞嗗缓璁拰杈呭姪鍐崇瓥鏀寔銆�',
+ allowFileUpload: true,
+ emptySessionText: '鏆傛棤鍘嗗彶浼氳瘽'
+ },
+ {
+ key: 'purchase',
+ label: '閲囪喘鍔╃悊',
+ title: '閲囪喘鏅鸿兘鍔╃悊',
+ tooltip: '閲囪喘鏅鸿兘鍔╃悊',
+ icon: ShoppingCart,
+ apiBase: '/purchase-ai',
+ storageKey: 'purchase_ai_chat_uuid',
+ placeholder: '璇疯緭鍏ラ噰璐棶棰�... (Enter 鍙戦��, Shift+Enter 鎹㈣)',
+ welcomeMessage: '浣犲ソ',
+ description: '鎴戝彲浠ュ崗鍔╀綘鍒嗘瀽閲囪喘璁㈠崟銆佸埌璐ц繘搴︺�佷緵搴斿晢琛ㄧ幇鍜屼粯娆炬儏鍐碉紝甯姪浣犲揩閫熷畾浣嶉噰璐紓甯搞��',
+ allowFileUpload: false,
+ emptySessionText: '鏆傛棤閲囪喘浼氳瘽'
+ }
+]
+
+const assistants = computed(() => props.assistants?.length ? props.assistants : builtInAssistants)
+const selectedAssistantKey = ref(props.defaultAssistant || assistants.value[0]?.key || 'general')
+const currentAssistant = computed(() => assistants.value.find(item => item.key === selectedAssistantKey.value) || assistants.value[0] || builtInAssistants[0])
+const showAssistantSwitch = computed(() => assistants.value.length > 1)
+const assistantQuickPromptMap = {
+ general: [
+ '鎴戝綋鍓嶆湁鍝簺瀹℃壒寰呭姙闇�瑕佸鐞嗭紵',
+ '甯垜鍒楀嚭浠婂ぉ鏂板鐨勫鎵瑰緟鍔炪��',
+ '褰撳墠寰呮垜瀹℃壒鐨勫崟鎹紝鎸夋椂闂村�掑簭鍒楀嚭鏉ャ��',
+ '鎴戝彂璧风殑瀹℃壒閲岋紝鍝簺杩樺湪澶勭悊涓紵',
+ '鏌ヨ娴佺▼缂栧彿 XXX 鐨勫鎵硅鎯呫��',
+ '娴佺▼缂栧彿 XXX 鐜板湪鍗″湪鍝釜瀹℃壒鑺傜偣锛熷綋鍓嶅鎵逛汉鏄皝锛�',
+ '甯垜鏌ョ湅娴佺▼缂栧彿 XXX 鐨勫鎵规祦杞褰曘��',
+ '杩�7澶╂垜鐨勫鎵瑰緟鍔炵粺璁℃儏鍐垫�庝箞鏍凤紵',
+ '鏈湀鎴戠殑瀹℃壒涓紝閫氳繃銆侀┏鍥炪�佸鐞嗕腑鍚勬湁澶氬皯锛�',
+ '杩�30澶╁悇绫诲瀷瀹℃壒鏁伴噺鍒嗗竷鏄粈涔堬紵',
+ '甯垜瀹℃壒閫氳繃娴佺▼缂栧彿 XXX锛屽娉ㄢ�滃悓鎰忊�濄��',
+ '甯垜椹冲洖娴佺▼缂栧彿 XXX锛屽娉ㄢ�滆琛ュ厖璇存槑鈥濄��',
+ '鎾ら攢鎴戝垰鍒氬娴佺▼缂栧彿 XXX 鐨勫鎵规搷浣溿��',
+ '甯垜淇敼娴佺▼缂栧彿 XXX 鐨勫娉ㄤ负鈥滃凡琛ュ厖闄勪欢鈥濄��',
+ '鍒犻櫎鎴戝彂璧风殑娴佺▼缂栧彿 XXX銆�'
+ ],
+ purchase: [
+ '鏈湀閲囪喘閲戦鎺掑悕鍓嶅崄鐨勭墿鏂欐湁鍝簺锛�',
+ '鍝簺閲囪喘璁㈠崟杩樻湭鍏ュ簱锛�',
+ '鏈�杩�7澶╀緵搴斿晢鍒拌揣寮傚父鏈夊摢浜涳紵',
+ '甯垜缁熻寰呬粯娆鹃噰璐崟',
+ '鍒楀嚭鏈湀閲囪喘閫�璐ф儏鍐�'
+ ]
+}
+const quickPromptLimit = 3
+const quickPromptStart = ref(0)
+const quickPrompts = computed(() => {
+ const assistant = currentAssistant.value || {}
+ if (Array.isArray(assistant.quickPrompts) && assistant.quickPrompts.length) {
+ return assistant.quickPrompts
+ }
+ return assistantQuickPromptMap[assistant.key] || assistantQuickPromptMap.general
+})
+const displayedQuickPrompts = computed(() => {
+ const prompts = quickPrompts.value || []
+ if (prompts.length <= quickPromptLimit) return prompts
+
+ const result = []
+ for (let i = 0; i < quickPromptLimit; i++) {
+ result.push(prompts[(quickPromptStart.value + i) % prompts.length])
+ }
+ return result
+})
+const hasMessages = computed(() => messages.value.length > 0)
const visible = ref(false)
const windowWidth = ref(window.innerWidth)
@@ -210,6 +397,19 @@
const sessions = ref([])
const loadingSessions = ref(false)
+const abortCurrentRequest = () => {
+ if (!currentAbortController.value) return
+
+ currentAbortController.value.abort()
+ currentAbortController.value = null
+ isSending.value = false
+
+ const lastMsg = messages.value[messages.value.length - 1]
+ if (lastMsg && !lastMsg.isUser) {
+ lastMsg.isTyping = false
+ }
+}
+
const toggleHistory = () => {
showHistory.value = !showHistory.value
if (showHistory.value) {
@@ -217,10 +417,17 @@
}
}
+const handleToggleHistory = () => {
+ if (isSending.value) {
+ abortCurrentRequest()
+ }
+ toggleHistory()
+}
+
const loadSessions = async () => {
loadingSessions.value = true
try {
- const res = await request.get('/xiaozhi/history/sessions')
+ const res = await request.get(`${currentAssistant.value.apiBase}/history/sessions`)
if (res.code === 200) {
sessions.value = res.data || []
}
@@ -234,21 +441,21 @@
const selectSession = async (session) => {
showHistory.value = false
uuid.value = session.memoryId
- localStorage.setItem('ai_chat_uuid', uuid.value)
-
+ localStorage.setItem(currentAssistant.value.storageKey, uuid.value)
+
// 鍔犺浇浼氳瘽娑堟伅
try {
- const res = await request.get(`/xiaozhi/history/messages/${uuid.value}`)
+ const res = await request.get(`${currentAssistant.value.apiBase}/history/messages/${uuid.value}`)
if (res.code === 200) {
disposeCharts()
messages.value = []
const historyMsgs = res.data || []
-
+
// 閲嶆柊鏋勯�犳秷鎭垪琛ㄥ苟瑙ｆ瀽
historyMsgs.forEach((msg, idx) => {
const isUser = msg.role === 'user'
const botMsgIndex = messages.value.length
-
+
const messageObj = {
isUser,
content: msg.content,
@@ -259,9 +466,9 @@
type: '',
tableData: null
}
-
+
messages.value.push(messageObj)
-
+
if (!isUser) {
outputState.value[botMsgIndex] = {
isPaused: false,
@@ -270,27 +477,13 @@
blockEndPos: -1,
hasRenderedChart: false
}
-
+
// 瑙ｆ瀽鍘嗗彶娑堟伅涓殑 JSON
- const jsonRegex = /\{"success":\s*true,[\s\S]*\}/
- const jsonMatch = msg.content.match(jsonRegex)
- if (jsonMatch) {
- try {
- const parsedData = JSON.parse(jsonMatch[0])
- if (parsedData.success) {
- messageObj.type = parsedData.type || ''
- if (messageObj.type === 'todo_list' && parsedData.data) {
- messageObj.tableData = parsedData.data
- }
- if (parsedData.charts && Object.keys(parsedData.charts).length > 0) {
- messageObj.chartOptions = parsedData.charts
- messageObj.chartRenderReady = true
- renderCharts(botMsgIndex, messageObj.chartOptions)
- }
- }
- } catch (err) {}
+ const extracted = extractEmbeddedSuccessJson(msg.content)
+ if (extracted) {
+ applyStructuredMessageData(messageObj, extracted.data, botMsgIndex)
}
-
+
updateOutputState(msg.content, botMsgIndex)
messageObj.htmlContent = convertStreamOutput(msg.content, botMsgIndex)
} else {
@@ -306,7 +499,7 @@
const handleDeleteSession = async (memoryId) => {
try {
- const res = await request.delete(`/xiaozhi/history/${memoryId}`)
+ const res = await request.delete(`${currentAssistant.value.apiBase}/history/${memoryId}`)
if (res.code === 200) {
loadSessions()
if (uuid.value === memoryId) {
@@ -342,6 +535,22 @@
window.removeEventListener('resize', handleWindowResize)
})
+watch(selectedAssistantKey, (nextKey, prevKey) => {
+ if (!prevKey || nextKey === prevKey) return
+
+ abortCurrentRequest()
+ disposeCharts()
+ messages.value = []
+ outputState.value = {}
+ sessions.value = []
+ showHistory.value = false
+ selectedFile.value = null
+ inputMessage.value = ''
+ quickPromptStart.value = 0
+ initUUID()
+ hello()
+})
+
const handleWindowResize = () => {
windowWidth.value = window.innerWidth
}
@@ -357,26 +566,56 @@
visible.value = false
}
+const handleManualClose = () => {
+ if (isSending.value) {
+ abortCurrentRequest()
+ }
+ handleClose()
+}
+
const initUUID = () => {
- let storedUUID = localStorage.getItem('ai_chat_uuid')
+ let storedUUID = localStorage.getItem(currentAssistant.value.storageKey)
if (!storedUUID) {
storedUUID = Math.random().toString(36).substring(2, 10) + Date.now().toString(36).substring(4)
- localStorage.setItem('ai_chat_uuid', storedUUID)
+ localStorage.setItem(currentAssistant.value.storageKey, storedUUID)
}
uuid.value = storedUUID
}
const hello = () => {
- sendRequest('浣犲ソ')
+ sendRequest(currentAssistant.value.welcomeMessage || '浣犲ソ')
}
const newChat = () => {
disposeCharts()
messages.value = []
outputState.value = {}
- localStorage.removeItem('ai_chat_uuid')
+ sessions.value = []
+ showHistory.value = false
+ selectedFile.value = null
+ quickPromptStart.value = 0
+ localStorage.removeItem(currentAssistant.value.storageKey)
initUUID()
hello()
+}
+
+const handleNewChat = () => {
+ if (isSending.value) {
+ abortCurrentRequest()
+ }
+ newChat()
+}
+
+const sendQuickPrompt = (prompt) => {
+ if (!prompt || isSending.value) return
+ inputMessage.value = prompt
+ sendMessage()
+}
+
+const refreshQuickPrompts = () => {
+ const prompts = quickPrompts.value || []
+ if (prompts.length <= quickPromptLimit) return
+ quickPromptStart.value = (quickPromptStart.value + quickPromptLimit) % prompts.length
}
const disposeCharts = () => {
@@ -384,6 +623,86 @@
resizeHandlers.value.forEach(handler => window.removeEventListener('resize', handler))
chartInstances.value = {}
resizeHandlers.value = []
+}
+
+const extractEmbeddedSuccessJson = (text) => {
+ if (!text || typeof text !== 'string') return null
+
+ const startIdx = text.indexOf('{"success"')
+ if (startIdx === -1) return null
+
+ for (let i = startIdx; i < text.length; i++) {
+ if (text[i] !== '{') continue
+
+ let depth = 0
+ let inString = false
+ let escaped = false
+
+ for (let j = i; j < text.length; j++) {
+ const char = text[j]
+
+ if (inString) {
+ if (escaped) {
+ escaped = false
+ } else if (char === '\\') {
+ escaped = true
+ } else if (char === '"') {
+ inString = false
+ }
+ continue
+ }
+
+ if (char === '"') {
+ inString = true
+ continue
+ }
+
+ if (char === '{') {
+ depth++
+ } else if (char === '}') {
+ depth--
+ if (depth === 0) {
+ const candidate = text.slice(i, j + 1)
+ try {
+ const parsed = JSON.parse(candidate)
+ if (parsed?.success === true) {
+ return {
+ data: parsed,
+ startIdx: i,
+ endIdx: j + 1
+ }
+ }
+ } catch (err) {
+ continue
+ }
+ }
+ }
+ }
+ }
+
+ return null
+}
+
+const applyStructuredMessageData = (messageObj, parsedData, msgIndex, shouldRenderCharts = true) => {
+ if (!messageObj || !parsedData?.success) return
+
+ messageObj.type = parsedData.type || ''
+
+ if (messageObj.type === 'todo_list' && parsedData.data) {
+ messageObj.tableData = parsedData.data
+ }
+
+ if (parsedData.charts && Object.keys(parsedData.charts).length > 0) {
+ messageObj.chartOptions = parsedData.charts
+ messageObj.chartRenderReady = true
+
+ if (shouldRenderCharts) {
+ renderCharts(msgIndex, messageObj.chartOptions)
+ if (outputState.value[msgIndex]) {
+ outputState.value[msgIndex].hasRenderedChart = true
+ }
+ }
+ }
}
const scrollToBottom = () => {
@@ -416,7 +735,7 @@
if (isSending.value) return
isSending.value = true
currentAbortController.value = new AbortController()
-
+
const userMsg = message ? `${message}\n[涓婁紶鏂囦欢鍒嗘瀽] ${file.name}` : `[涓婁紶鏂囦欢鍒嗘瀽] ${file.name}`
messages.value.push({
isUser: true,
@@ -454,7 +773,7 @@
formData.append('message', message.trim())
}
- request.post('/xiaozhi/analyze-file', formData, {
+ request.post(`${currentAssistant.value.apiBase}/analyze-file`, formData, {
headers: {
'Content-Type': 'multipart/form-data'
},
@@ -462,34 +781,16 @@
onDownloadProgress: (e) => {
const fullText = e.target ? e.target.responseText : (e.event ? e.event.target.responseText : '')
if (!fullText) return
-
+
const currentMsg = messages.value[botMsgIndex]
if (!currentMsg) return
-
+
currentMsg.content = fullText
// 瑙ｆ瀽 JSON 鏁版嵁锛堥拡瀵瑰祵鍏ュ紡 JSON锛�
- const jsonRegex = /\{"success":\s*true,[\s\S]*\}/
- const jsonMatch = fullText.match(jsonRegex)
-
- if (jsonMatch) {
- try {
- const parsedData = JSON.parse(jsonMatch[0])
- if (parsedData.success) {
- currentMsg.type = parsedData.type || ''
- if (currentMsg.type === 'todo_list' && parsedData.data) {
- currentMsg.tableData = parsedData.data
- }
- if (parsedData.charts && Object.keys(parsedData.charts).length > 0) {
- currentMsg.chartOptions = parsedData.charts
- currentMsg.chartRenderReady = true
- if (!outputState.value[botMsgIndex].hasRenderedChart) {
- renderCharts(botMsgIndex, currentMsg.chartOptions)
- outputState.value[botMsgIndex].hasRenderedChart = true
- }
- }
- }
- } catch (err) {}
+ const extracted = extractEmbeddedSuccessJson(fullText)
+ if (extracted) {
+ applyStructuredMessageData(currentMsg, extracted.data, botMsgIndex, !outputState.value[botMsgIndex].hasRenderedChart)
}
updateOutputState(fullText, botMsgIndex)
@@ -501,7 +802,7 @@
currentMsg.isTyping = false
isSending.value = false
currentAbortController.value = null
-
+
// 鏈�缁堣В鏋愮‘淇濆浘琛ㄦ覆鏌�
if (currentMsg.chartOptions && !outputState.value[botMsgIndex].hasRenderedChart) {
renderCharts(botMsgIndex, currentMsg.chartOptions)
@@ -538,17 +839,7 @@
}
const stopGeneration = () => {
- if (currentAbortController.value) {
- currentAbortController.value.abort()
- currentAbortController.value = null
- isSending.value = false
-
- // 灏嗘渶鍚庝竴鏉℃秷鎭爣璁颁负闈炴墦瀛楃姸鎬�
- const lastMsg = messages.value[messages.value.length - 1]
- if (lastMsg && !lastMsg.isUser) {
- lastMsg.isTyping = false
- }
- }
+ abortCurrentRequest()
}
const sendRequest = (message) => {
@@ -556,14 +847,12 @@
currentAbortController.value = new AbortController()
// 鐢ㄦ埛娑堟伅
- if (messages.value.length > 0) {
- messages.value.push({
- isUser: true,
- content: message,
- htmlContent: convertTextToHtml(message),
- isTyping: false
- })
- }
+ messages.value.push({
+ isUser: true,
+ content: message,
+ htmlContent: convertTextToHtml(message),
+ isTyping: false
+ })
// 鏈哄櫒浜哄崰浣�
const botMsgIndex = messages.value.length
@@ -578,7 +867,7 @@
tableData: null
}
messages.value.push(botMsg)
-
+
outputState.value[botMsgIndex] = {
isPaused: false,
jsonBlockStartPos: -1,
@@ -586,31 +875,46 @@
blockEndPos: -1,
hasRenderedChart: false
}
-
+
scrollToBottom()
- request.post('/xiaozhi/chat',
- { memoryId: uuid.value, message },
- {
- signal: currentAbortController.value.signal,
- onDownloadProgress: (e) => {
- // 鍏煎涓嶅悓鐗堟湰鐨� axios 鑾峰彇鍝嶅簲鏂囨湰鐨勬柟寮�
- const fullText = e.target ? e.target.responseText : (e.event ? e.event.target.responseText : '')
- if (!fullText) return
-
- const currentMsg = messages.value[botMsgIndex]
- if (!currentMsg) return
-
- currentMsg.content = fullText
+ request.post(`${currentAssistant.value.apiBase}/chat`,
+ { memoryId: uuid.value, message },
+ {
+ signal: currentAbortController.value.signal,
+ onDownloadProgress: (e) => {
+ // 鍏煎涓嶅悓鐗堟湰鐨� axios 鑾峰彇鍝嶅簲鏂囨湰鐨勬柟寮�
+ const fullText = e.target ? e.target.responseText : (e.event ? e.event.target.responseText : '')
+ if (!fullText) return
- // 瑙ｆ瀽 JSON 鏁版嵁锛堥拡瀵瑰祵鍏ュ紡 JSON锛�
- const jsonRegex = /\{"success":\s*true,[\s\S]*\}/
- const jsonMatch = fullText.match(jsonRegex)
+ const currentMsg = messages.value[botMsgIndex]
+ if (!currentMsg) return
- if (jsonMatch) {
- try {
- const parsedData = JSON.parse(jsonMatch[0])
- if (parsedData.success) {
+ currentMsg.content = fullText
+
+ // 灏濊瘯鎻愬彇骞惰В鏋� JSON
+ const extracted = extractEmbeddedSuccessJson(fullText)
+ if (extracted) {
+ applyStructuredMessageData(currentMsg, extracted.data, botMsgIndex)
+ } else {
+ const extractJson = (text) => {
+ const startIdx = text.indexOf('{"success": true')
+ if (startIdx === -1) return null
+
+ // 浠庡悗寰�鍓嶆壘鏈�鍚庝竴涓� '}'
+ const lastBraceIdx = text.lastIndexOf('}')
+ if (lastBraceIdx === -1 || lastBraceIdx < startIdx) return null
+
+ const potentialJson = text.substring(startIdx, lastBraceIdx + 1)
+ try {
+ return JSON.parse(potentialJson)
+ } catch (err) {
+ return null
+ }
+ }
+
+ const parsedData = extractJson(fullText)
+ if (parsedData) {
currentMsg.type = parsedData.type || ''
if (currentMsg.type === 'todo_list' && parsedData.data) {
currentMsg.tableData = parsedData.data
@@ -618,54 +922,54 @@
if (parsedData.charts && Object.keys(parsedData.charts).length > 0) {
currentMsg.chartOptions = parsedData.charts
currentMsg.chartRenderReady = true
- if (!outputState.value[botMsgIndex].hasRenderedChart) {
- renderCharts(botMsgIndex, currentMsg.chartOptions)
- outputState.value[botMsgIndex].hasRenderedChart = true
- }
+ // 姣忔瑙ｆ瀽鎴愬姛閮藉皾璇曟覆鏌�/鏇存柊鍥捐〃锛屼互鏀寔娴佸紡鏇存柊
+ renderCharts(botMsgIndex, currentMsg.chartOptions)
}
}
- } catch (err) {}
- }
- updateOutputState(fullText, botMsgIndex)
- currentMsg.htmlContent = convertStreamOutput(fullText, botMsgIndex)
- scrollToBottom()
+ }
+
+ updateOutputState(fullText, botMsgIndex)
+ currentMsg.htmlContent = convertStreamOutput(fullText, botMsgIndex)
+ scrollToBottom()
+ }
}
- }
).then(() => {
const currentMsg = messages.value[botMsgIndex]
currentMsg.isTyping = false
isSending.value = false
currentAbortController.value = null
-
+
// 鏈�缁堣В鏋�
- const fullText = currentMsg.content
- const jsonRegex = /\{"success":\s*true,[\s\S]*\}/
- const jsonMatch = fullText.match(jsonRegex)
- if (jsonMatch) {
- try {
- const parsedData = JSON.parse(jsonMatch[0])
- if (parsedData.success) {
- currentMsg.type = parsedData.type || ''
- if (currentMsg.type === 'todo_list' && parsedData.data) {
- currentMsg.tableData = parsedData.data
- }
- if (parsedData.charts && Object.keys(parsedData.charts).length > 0) {
- currentMsg.chartOptions = parsedData.charts
- currentMsg.chartRenderReady = true
- if (!outputState.value[botMsgIndex].hasRenderedChart) {
- renderCharts(botMsgIndex, currentMsg.chartOptions)
- outputState.value[botMsgIndex].hasRenderedChart = true
- }
- }
- currentMsg.htmlContent = convertStreamOutput(fullText, botMsgIndex)
+ const extracted = extractEmbeddedSuccessJson(currentMsg.content)
+ if (extracted) {
+ applyStructuredMessageData(currentMsg, extracted.data, botMsgIndex)
+ } else {
+ const extractJson = (text) => {
+ const startIdx = text.indexOf('{"success": true')
+ if (startIdx === -1) return null
+ const lastBraceIdx = text.lastIndexOf('}')
+ if (lastBraceIdx === -1 || lastBraceIdx < startIdx) return null
+ const potentialJson = text.substring(startIdx, lastBraceIdx + 1)
+ try {
+ return JSON.parse(potentialJson)
+ } catch (err) {
+ return null
}
- } catch (err) {}
- }
-
- // 鍏滃簳娓叉煋
- if (currentMsg.chartOptions && !outputState.value[botMsgIndex].hasRenderedChart) {
- renderCharts(botMsgIndex, currentMsg.chartOptions)
+ }
+
+ const finalParsed = extractJson(currentMsg.content)
+ if (finalParsed) {
+ currentMsg.type = finalParsed.type || ''
+ if (currentMsg.type === 'todo_list' && finalParsed.data) {
+ currentMsg.tableData = finalParsed.data
+ }
+ if (finalParsed.charts && Object.keys(finalParsed.charts).length > 0) {
+ currentMsg.chartOptions = finalParsed.charts
+ currentMsg.chartRenderReady = true
+ renderCharts(botMsgIndex, currentMsg.chartOptions)
+ }
+ }
}
}).catch(err => {
if (err.name === 'CanceledError' || err.name === 'AbortError') {
@@ -704,10 +1008,10 @@
const convertTextToHtml = (text) => {
if (!text) return ''
return text
- .replace(/&/g, '&')
- .replace(/</g, '<')
- .replace(/>/g, '>')
- .replace(/\n/g, '<br>')
+ .replace(/&/g, '&')
+ .replace(/</g, '<')
+ .replace(/>/g, '>')
+ .replace(/\n/g, '<br>')
}
const convertStreamOutput = (output, msgIndex) => {
@@ -715,29 +1019,82 @@
const state = outputState.value[msgIndex]
let display = output
- const jsonRegex = /\{"success":\s*true,[\s\S]*\}/
- const jsonMatch = output.match(jsonRegex)
- if (jsonMatch) {
- try {
- const parsed = JSON.parse(jsonMatch[0])
- display = output.replace(jsonMatch[0], '').trim()
- if (!display && parsed.description) display = parsed.description
- } catch (e) {
- const start = output.search(/\{"success":\s*true/)
- display = output.substring(0, start) + '... (姝ｅ湪鐢熸垚鏁版嵁鍥捐〃)'
+ // 灏濊瘯鎻愬彇 JSON 閮ㄥ垎
+ const extracted = extractEmbeddedSuccessJson(output)
+ const startIdx = extracted ? extracted.startIdx : output.indexOf('{"success"')
+
+ // 濡傛灉杩樺湪浠ｇ爜鍧椾腑涓旀湭缁撴潫锛屾樉绀烘彁绀烘枃瀛�
+ if (state && ((state.jsonBlockStartPos !== -1) || (state.jsBlockStartPos !== -1)) && state.blockEndPos === -1) {
+ const startPos = state.jsonBlockStartPos !== -1 ? state.jsonBlockStartPos : state.jsBlockStartPos
+ const textBeforeBlock = display.substring(0, startPos).trim()
+ display = textBeforeBlock || '姝ｅ湪鍒嗘瀽鏁版嵁骞剁敓鎴愬浘琛�...'
+ return convertTextToHtml(display)
+ }
+
+ if (extracted) {
+ const parsed = extracted.data
+ display = (output.substring(0, extracted.startIdx) + output.substring(extracted.endIdx)).trim()
+
+ if (/^[\s}\],锛屻��.:锛�;锛沒+$/.test(display)) {
+ display = ''
+ }
+
+ if (parsed.description) {
+ display = parsed.description
+ }
+
+ if (!display) {
+ if (parsed.type === 'todo_list') {
+ display = '宸蹭负鎮ㄦ暣鐞嗗ソ鐩稿叧鏁版嵁銆�'
+ } else if (parsed.charts && Object.keys(parsed.charts).length > 0) {
+ display = '宸蹭负鎮ㄧ敓鎴愬垎鏋愬浘琛ㄣ��'
+ } else {
+ display = '姝ｅ湪涓烘偍灞曠ず鍒嗘瀽缁撴灉...'
+ }
+ }
+ } else if (startIdx !== -1) {
+ const lastBraceIdx = output.lastIndexOf('}')
+ if (lastBraceIdx !== -1 && lastBraceIdx > startIdx) {
+ const potentialJson = output.substring(startIdx, lastBraceIdx + 1)
+ try {
+ const parsed = JSON.parse(potentialJson)
+ // 鎴愬姛瑙ｆ瀽锛岀Щ闄� JSON 閮ㄥ垎鏄剧ず鏂囧瓧
+ display = (output.substring(0, startIdx) + output.substring(lastBraceIdx + 1)).trim()
+
+ if (/^[\s}\],锛屻��.:锛�;锛沒+$/.test(display)) {
+ display = ''
+ }
+
+ if (parsed.description) {
+ display = parsed.description
+ }
+
+ if (!display) {
+ if (parsed.type === 'todo_list') {
+ display = '宸蹭负鎮ㄦ暣鐞嗗ソ鐩稿叧鏁版嵁锛�'
+ } else if (parsed.charts && Object.keys(parsed.charts).length > 0) {
+ display = '宸蹭负鎮ㄧ敓鎴愬垎鏋愬浘琛細'
+ } else {
+ display = '姝ｅ湪涓烘偍灞曠ず鍒嗘瀽缁撴灉...'
+ }
+ }
+ } catch (e) {
+ // 瑙ｆ瀽澶辫触锛岃鏄� JSON 杩樺湪浼犺緭涓垨鏍煎紡涓嶆纭�
+ display = output.substring(0, startIdx).trim() || '姝ｅ湪鍒嗘瀽鏁版嵁骞剁敓鎴愬浘琛�...'
+ }
+ } else {
+ // 鎵惧埌浜嗗紑濮嬩絾杩樻病鎵惧埌缁撴潫
+ display = output.substring(0, startIdx).trim() || '姝ｅ湪鍒嗘瀽鏁版嵁骞剁敓鎴愬浘琛�...'
}
}
- if (state.jsonBlockStartPos !== -1 && state.blockEndPos === -1) {
- display = display.substring(0, state.jsonBlockStartPos)
- } else if (state.jsBlockStartPos !== -1 && state.blockEndPos === -1) {
- display = display.substring(0, state.jsBlockStartPos)
- }
+ let html = convertTextToHtml(display)
- display = display.replace(/```(javascript|js)([\s\S]*?)```/g, '<pre class="code-block js-code">$2</pre>')
- display = display.replace(/```([\s\S]*?)```/g, '<pre class="code-block">$1</pre>')
+ // 杩樺師浠ｇ爜鍧�
+ html = html.replace(/```(javascript|js)([\s\S]*?)```/g, '<pre class="code-block js-code">$2</pre>')
+ html = html.replace(/```([\s\S]*?)```/g, '<pre class="code-block">$1</pre>')
- return convertTextToHtml(display)
+ return html || '...'
}
const renderCharts = (msgIndex, chartOptions) => {
@@ -747,14 +1104,27 @@
const tryInit = (count = 0) => {
const dom = document.getElementById(id)
if (dom) {
- if (chartInstances.value[id]) chartInstances.value[id].dispose()
+ if (chartInstances.value[id]) {
+ // 濡傛灉宸茬粡鍒濆鍖栬繃锛岀洿鎺ユ洿鏂版暟鎹�
+ const chart = chartInstances.value[id]
+ const option = normalizeAiChartOption(chartOptions[key])
+ if (option) chart.setOption(option)
+ return
+ }
+
const chart = echarts.init(dom)
chartInstances.value[id] = chart
- chart.setOption(chartOptions[key])
+ const option = normalizeAiChartOption(chartOptions[key])
+ if (option) {
+ chart.setOption(option)
+ } else {
+ console.warn('Invalid chart option for:', id, chartOptions[key])
+ }
+
const handler = () => chart.resize()
resizeHandlers.value.push(handler)
window.addEventListener('resize', handler)
- } else if (count < 10) {
+ } else if (count < 15) { // 绋嶅井澧炲姞閲嶈瘯娆℃暟
setTimeout(() => tryInit(count + 1), 200)
}
}
@@ -763,19 +1133,198 @@
})
}
+// 鏍煎紡鍖� AI 杩斿洖鐨勫浘琛ㄩ厤缃紝灏嗗叾杞崲涓烘爣鍑嗙殑 ECharts 閰嶇疆
+const formatChartOption = (rawOption) => {
+ if (!rawOption) return null
+
+ // 濡傛灉宸茬粡鏄爣鍑� ECharts 閰嶇疆锛堝寘鍚� series锛夛紝鍒欑洿鎺ヨ繑鍥�
+ const hasSeries = rawOption.series && Array.isArray(rawOption.series)
+
+ // 灏濊瘯杞崲绠�鏄撴牸寮�
+ try {
+ const isPie = rawOption.type === 'pie' || (rawOption.title && rawOption.title.includes('鍗犳瘮'))
+
+ const option = {
+ title: {
+ text: rawOption.title || '',
+ left: 'center',
+ textStyle: { fontSize: 14 }
+ },
+ tooltip: {
+ trigger: isPie ? 'item' : 'axis'
+ },
+ legend: {
+ bottom: '0'
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '15%',
+ containLabel: true
+ },
+ xAxis: isPie ? undefined : {
+ type: 'category',
+ data: rawOption.xAxisData || (Array.isArray(rawOption.xAxis) ? rawOption.xAxis : []),
+ name: typeof rawOption.xAxis === 'string' ? rawOption.xAxis : ''
+ },
+ yAxis: isPie ? undefined : {
+ type: 'value',
+ name: typeof rawOption.yAxis === 'string' ? rawOption.yAxis : ''
+ },
+ series: rawOption.series || [{
+ name: rawOption.title || '鏁板��',
+ type: rawOption.type || 'line',
+ data: rawOption.seriesData || (Array.isArray(rawOption.data) ? rawOption.data : []),
+ smooth: true,
+ radius: isPie ? '50%' : undefined
+ }]
+ }
+
+ // 閽堝楗煎浘鐨勭壒娈婂鐞�
+ if (isPie && !option.series[0].data && Array.isArray(rawOption.data)) {
+ option.series[0].data = rawOption.data
+ }
+
+ return option
+ } catch (err) {
+ console.error('Chart option conversion failed:', err)
+ return null
+ }
+}
+
+const normalizeAiChartOption = (rawOption) => {
+ if (!rawOption) return null
+
+ try {
+ const hasSeries = Array.isArray(rawOption.series) && rawOption.series.length > 0
+ const firstSeriesType = hasSeries ? rawOption.series[0]?.type : rawOption.type
+ const titleConfig = rawOption.title && typeof rawOption.title === 'object'
+ ? rawOption.title
+ : null
+ const tooltipConfig = rawOption.tooltip && typeof rawOption.tooltip === 'object'
+ ? rawOption.tooltip
+ : null
+ const legendConfig = rawOption.legend && typeof rawOption.legend === 'object'
+ ? rawOption.legend
+ : null
+ const rawXAxisConfig = rawOption.xAxis && typeof rawOption.xAxis === 'object' && !Array.isArray(rawOption.xAxis)
+ ? rawOption.xAxis
+ : null
+ const rawYAxisConfig = rawOption.yAxis && typeof rawOption.yAxis === 'object' && !Array.isArray(rawOption.yAxis)
+ ? rawOption.yAxis
+ : null
+ const titleText = typeof rawOption.title === 'string' ? rawOption.title : rawOption.title?.text || ''
+ const isPie = firstSeriesType === 'pie' || titleText.includes('鍗犳瘮')
+ const baseXAxisData = Array.isArray(rawOption.xAxisData)
+ ? rawOption.xAxisData
+ : (Array.isArray(rawOption.xAxis) ? rawOption.xAxis : (Array.isArray(rawXAxisConfig?.data) ? rawXAxisConfig.data : []))
+ const fallbackSeries = [{
+ name: titleText || '鏁版嵁',
+ type: rawOption.type || 'line',
+ data: Array.isArray(rawOption.seriesData) ? rawOption.seriesData : (Array.isArray(rawOption.data) ? rawOption.data : [])
+ }]
+ const normalizedSeries = (hasSeries ? rawOption.series : fallbackSeries).map((seriesItem, index) => {
+ const seriesType = seriesItem?.type || rawOption.type || 'line'
+ const nextSeries = {
+ ...seriesItem,
+ name: seriesItem?.name || titleText || `绯诲垪${index + 1}`,
+ type: seriesType
+ }
+
+ if (isPie) {
+ nextSeries.radius = nextSeries.radius || '55%'
+ nextSeries.data = Array.isArray(nextSeries.data) ? nextSeries.data : (Array.isArray(rawOption.data) ? rawOption.data : [])
+ } else {
+ nextSeries.smooth = typeof nextSeries.smooth === 'boolean' ? nextSeries.smooth : seriesType === 'line'
+ nextSeries.data = Array.isArray(nextSeries.data) ? nextSeries.data : []
+ }
+
+ return nextSeries
+ })
+ const categorySource = !isPie
+ ? normalizedSeries.find(seriesItem => Array.isArray(seriesItem.data) && seriesItem.data.every(item => item && typeof item === 'object' && 'name' in item && 'value' in item))
+ : null
+ const xAxisData = categorySource
+ ? categorySource.data.map(item => item.name)
+ : baseXAxisData
+ const finalSeries = !isPie && categorySource
+ ? normalizedSeries.map(seriesItem => ({
+ ...seriesItem,
+ data: Array.isArray(seriesItem.data)
+ ? seriesItem.data.map(item => (item && typeof item === 'object' && 'value' in item ? item.value : item))
+ : []
+ }))
+ : normalizedSeries
+
+ return {
+ title: titleConfig || {
+ text: titleText,
+ left: 'center',
+ textStyle: { fontSize: 14 }
+ },
+ tooltip: tooltipConfig || {
+ trigger: isPie ? 'item' : 'axis'
+ },
+ legend: legendConfig || {
+ bottom: '0'
+ },
+ grid: isPie ? undefined : {
+ left: '3%',
+ right: '4%',
+ bottom: '15%',
+ containLabel: true
+ },
+ xAxis: isPie ? undefined : {
+ ...(rawXAxisConfig || {}),
+ type: 'category',
+ data: xAxisData,
+ name: typeof rawOption.xAxis === 'string' ? rawOption.xAxis : (rawXAxisConfig?.name || '')
+ },
+ yAxis: isPie ? undefined : (rawYAxisConfig || {
+ type: 'value',
+ name: typeof rawOption.yAxis === 'string' ? rawOption.yAxis : ''
+ }),
+ series: finalSeries
+ }
+ } catch (err) {
+ console.error('AI chart normalization failed:', err, rawOption)
+ return formatChartOption(rawOption)
+ }
+}
+
watch(messages, () => scrollToBottom(), { deep: true })
</script>
-<style scoped lang="scss">
-.ai-chat-sidebar-wrapper {
- position: fixed;
- inset: 0;
- z-index: 2000;
- pointer-events: none;
+<style lang="scss">
+.ai-chat-overlay {
+ pointer-events: none !important;
+ background: transparent !important;
+}
- :deep(.el-drawer__container) {
- pointer-events: none;
- }
+.ai-chat-overlay .el-drawer {
+ pointer-events: auto;
+}
+</style>
+
+<style scoped lang="scss">
+$primary-blue: #0055d4;
+$secondary-blue: #2e8ce0;
+$light-blue: #7ab8ff;
+$pale-blue: #c5dcff;
+$ice-white: #e8f2ff;
+$deep-blue: #003b8e;
+$deepest-blue: #002b66;
+$gradient-blue: linear-gradient(145deg, #004fc7 0%, #0066e0 40%, #2580e8 70%, #5a9fe0 100%);
+$gradient-dark: linear-gradient(145deg, #003b8e 0%, #0055d4 50%, #0077e8 100%);
+$gradient-ice: linear-gradient(180deg, #e0ecff 0%, #d4e5ff 50%, #e8f0ff 100%);
+$shadow-blue: 0 8px 40px rgba(0, 85, 212, 0.35);
+$shadow-deep: 0 12px 48px rgba(0, 40, 120, 0.4);
+$shadow-card: 0 6px 24px rgba(0, 51, 136, 0.12);
+
+.ai-chat-sidebar-wrapper {
+ position: static;
+ z-index: 2000;
+ pointer-events: auto;
:deep(.el-drawer) {
pointer-events: auto;
@@ -785,29 +1334,82 @@
.ai-chat-trigger {
pointer-events: auto;
position: fixed;
- right: 20px;
+ right: 24px;
bottom: 100px;
- width: 60px;
- height: 60px;
- background: linear-gradient(135deg, #409eff 0%, #007aff 100%);
+ width: 56px;
+ height: 56px;
+ background: $gradient-dark;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
- box-shadow: 0 4px 12px rgba(0, 122, 255, 0.4);
- transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+ box-shadow: $shadow-deep, 0 0 0 2px rgba(0, 85, 212, 0.3) inset, 0 0 30px rgba(0, 119, 232, 0.2);
+ transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 2001;
+ animation: triggerPulse 3s ease-in-out infinite;
+
+ &::before {
+ content: '';
+ position: absolute;
+ inset: -6px;
+ background: linear-gradient(135deg, rgba(0, 85, 212, 0.4), rgba(0, 136, 232, 0.3), rgba(90, 159, 224, 0.2));
+ border-radius: 50%;
+ z-index: -1;
+ filter: blur(16px);
+ animation: glowPulse 2s ease-in-out infinite alternate;
+ }
+
+ &::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ border-radius: 50%;
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, transparent 50%);
+ pointer-events: none;
+ }
&:hover {
- transform: scale(1.1) translateY(-5px);
- box-shadow: 0 8px 20px rgba(0, 122, 255, 0.5);
+ transform: scale(1.12) translateY(-4px);
+ box-shadow: $shadow-deep, 0 0 0 3px rgba(0, 136, 232, 0.4) inset, 0 0 50px rgba(0, 136, 232, 0.3);
+
+ &::before {
+ animation: glowPulse 1s ease-in-out infinite alternate;
+ }
+
+ .trigger-icon {
+ transform: rotate(-8deg) scale(1.05);
+ filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
+ }
}
.trigger-icon {
display: flex;
align-items: center;
justify-content: center;
+ transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+ color: #fff;
+ filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
+ }
+}
+
+@keyframes triggerPulse {
+ 0%, 100% {
+ box-shadow: $shadow-blue, 0 0 0 2px rgba(0, 85, 212, 0.25) inset, 0 0 20px rgba(0, 119, 232, 0.15);
+ }
+ 50% {
+ box-shadow: $shadow-deep, 0 0 0 3px rgba(0, 136, 232, 0.35) inset, 0 0 40px rgba(0, 136, 232, 0.25);
+ }
+}
+
+@keyframes glowPulse {
+ 0% {
+ opacity: 0.6;
+ transform: scale(1);
+ }
+ 100% {
+ opacity: 1;
+ transform: scale(1.1);
}
}
@@ -815,13 +1417,15 @@
:deep(.el-drawer__body) {
padding: 0;
overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
}
:deep(.el-drawer__header) {
margin-bottom: 0;
- padding: 12px 16px;
- background: #fff;
- border-bottom: 1px solid #ebeef5;
- color: #303133;
+ padding: 0;
+ background: $gradient-dark;
+ color: #fff;
}
}
@@ -830,27 +1434,202 @@
justify-content: space-between;
align-items: center;
width: 100%;
- padding-right: 32px;
+ padding: 18px 20px;
+ background: $gradient-dark;
+ position: relative;
+ overflow: hidden;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: -60%;
+ right: -25%;
+ width: 250px;
+ height: 250px;
+ background: radial-gradient(circle, rgba(0, 136, 232, 0.4) 0%, transparent 70%);
+ pointer-events: none;
+ animation: headerGlow 4s ease-in-out infinite alternate;
+ }
+
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: -40%;
+ left: -15%;
+ width: 200px;
+ height: 200px;
+ background: radial-gradient(circle, rgba(0, 85, 212, 0.3) 0%, transparent 70%);
+ pointer-events: none;
+ animation: headerGlow 5s ease-in-out infinite alternate-reverse;
+ }
.header-left {
display: flex;
align-items: center;
- gap: 8px;
-
+ gap: 12px;
+ position: relative;
+ z-index: 1;
+
.header-icon {
- color: #409eff;
+ color: rgba(255, 255, 255, 0.95);
+ filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
+ animation: iconFloat 3s ease-in-out infinite;
}
-
+
.title {
- font-size: 16px;
+ font-size: 17px;
font-weight: 600;
- color: #303133;
+ color: #fff;
+ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+ letter-spacing: 0.5px;
}
}
.header-actions {
display: flex;
- gap: 8px;
+ align-items: center;
+ gap: 10px;
+ position: relative;
+ z-index: 1;
+
+ .action-divider {
+ width: 1px;
+ height: 16px;
+ background: rgba(255, 255, 255, 0.2);
+ margin: 0 2px;
+ }
+
+ :deep(.el-button) {
+ color: rgba(255, 255, 255, 0.85);
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ background: rgba(255, 255, 255, 0.12);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 8px;
+ padding: 8px;
+ height: 32px;
+ width: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &:hover {
+ color: #fff;
+ background: rgba(255, 255, 255, 0.25);
+ border-color: rgba(255, 255, 255, 0.3);
+ transform: translateY(-1px);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ }
+
+ &:active {
+ transform: translateY(0);
+ }
+
+ &.close-btn {
+ background: rgba(255, 255, 255, 0.1);
+ &:hover {
+ background: rgba(245, 108, 108, 0.8);
+ border-color: rgba(245, 108, 108, 0.5);
+ }
+ }
+ }
+
+ :deep(.header-action-btn) {
+ position: relative;
+ overflow: hidden;
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08));
+ border: 1px solid rgba(255, 255, 255, 0.16);
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 18px rgba(0, 0, 0, 0.12);
+
+ &::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 55%);
+ pointer-events: none;
+ }
+
+ &::after {
+ content: '';
+ position: absolute;
+ top: -120%;
+ left: -40%;
+ width: 60%;
+ height: 260%;
+ background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.28), transparent);
+ transform: rotate(24deg);
+ opacity: 0;
+ transition: all 0.35s ease;
+ }
+
+ &:hover::after {
+ left: 100%;
+ opacity: 1;
+ }
+ }
+ }
+
+ .assistant-switcher {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex: 1;
+ padding: 0 12px;
+ position: relative;
+ z-index: 1;
+
+ :deep(.el-radio-group) {
+ display: flex;
+ gap: 6px;
+ flex-wrap: wrap;
+ justify-content: center;
+ padding: 4px;
+ border-radius: 999px;
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08));
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 18px rgba(0, 0, 0, 0.1);
+ }
+
+ :deep(.el-radio-button__inner) {
+ border-radius: 999px;
+ border: 1px solid rgba(255, 255, 255, 0.18);
+ background: rgba(255, 255, 255, 0.12);
+ color: rgba(255, 255, 255, 0.86);
+ box-shadow: none;
+ padding: 7px 14px;
+ font-weight: 500;
+ }
+
+ :deep(.el-radio-button:first-child .el-radio-button__inner),
+ :deep(.el-radio-button:last-child .el-radio-button__inner) {
+ border-radius: 999px;
+ }
+
+ :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
+ background: #fff;
+ color: $primary-blue;
+ border-color: #fff;
+ box-shadow: 0 6px 14px rgba(0, 40, 120, 0.16);
+ }
+ }
+}
+
+@keyframes headerGlow {
+ 0% {
+ opacity: 0.6;
+ transform: scale(1);
+ }
+ 100% {
+ opacity: 1;
+ transform: scale(1.15);
+ }
+}
+
+@keyframes iconFloat {
+ 0%, 100% {
+ transform: translateY(0) rotate(0);
+ }
+ 50% {
+ transform: translateY(-2px) rotate(3deg);
}
}
@@ -858,61 +1637,122 @@
display: flex;
flex-direction: column;
height: 100%;
- background-color: #f5f7fa;
+ width: 100%;
+ background: $ice-white;
position: relative;
+ overflow: hidden;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 240px;
+ background: linear-gradient(180deg, rgba(0, 85, 212, 0.06) 0%, transparent 100%);
+ pointer-events: none;
+ }
}
.history-panel {
position: absolute;
inset: 0;
- background: #fff;
+ background: linear-gradient(180deg, #fff 0%, $ice-white 100%);
z-index: 10;
display: flex;
flex-direction: column;
-
+ box-shadow: -8px 0 32px rgba(0, 85, 212, 0.15);
+
.history-header {
- padding: 16px;
- border-bottom: 1px solid #ebeef5;
+ padding: 18px 20px;
+ border-bottom: 1px solid rgba(0, 85, 212, 0.12);
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
font-size: 14px;
+ color: $deep-blue;
+ background: linear-gradient(135deg, rgba(0, 85, 212, 0.08) 0%, rgba(0, 136, 232, 0.05) 100%);
+ position: relative;
+
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 1px;
+ background: linear-gradient(90deg, transparent, rgba(0, 85, 212, 0.2), transparent);
+ }
}
.session-list {
flex: 1;
overflow-y: auto;
- padding: 8px;
+ padding: 12px 16px;
+
+ &::-webkit-scrollbar {
+ width: 8px;
+ }
+ &::-webkit-scrollbar-thumb {
+ background: linear-gradient(180deg, $secondary-blue, $primary-blue);
+ border-radius: 4px;
+ box-shadow: 0 0 6px rgba(0, 85, 212, 0.25);
+ }
.session-item {
display: flex;
align-items: center;
- padding: 12px;
- margin-bottom: 4px;
- border-radius: 8px;
+ padding: 14px 16px;
+ margin-bottom: 6px;
+ border-radius: 12px;
cursor: pointer;
- transition: all 0.2s;
- gap: 10px;
+ transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+ gap: 12px;
position: relative;
border: 1px solid transparent;
+ background: #fff;
+ animation: sessionSlideIn 0.35s ease;
+
+ @keyframes sessionSlideIn {
+ from {
+ opacity: 0;
+ transform: translateX(-15px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+ }
&:hover {
- background-color: #f5f7fa;
+ background: linear-gradient(135deg, rgba(0, 85, 212, 0.06) 0%, rgba(0, 136, 232, 0.08) 100%);
+ border-color: rgba(0, 85, 212, 0.12);
+ box-shadow: 0 4px 16px rgba(0, 85, 212, 0.1);
+ transform: translateX(4px);
+
.delete-btn {
opacity: 1;
+ transform: scale(1);
}
}
&.active {
- background-color: #ecf5ff;
- border-color: #d9ecff;
- color: #409eff;
+ background: linear-gradient(135deg, rgba(0, 85, 212, 0.12) 0%, rgba(0, 136, 232, 0.15) 100%);
+ border-color: rgba(0, 85, 212, 0.25);
+ color: $primary-blue;
+ box-shadow: 0 4px 16px rgba(0, 85, 212, 0.15);
+
+ .el-icon {
+ color: $primary-blue;
+ }
}
.el-icon {
- font-size: 16px;
+ font-size: 18px;
flex-shrink: 0;
+ color: $secondary-blue;
+ transition: color 0.2s;
}
.session-name {
@@ -921,14 +1761,22 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
+ color: #1a1a2e;
+ font-weight: 500;
}
.delete-btn {
opacity: 0;
- transition: opacity 0.2s;
- padding: 4px;
+ transform: scale(0.8);
+ transition: all 0.25s ease;
+ padding: 6px;
+ border-radius: 6px;
+ color: #c0c4cc;
+
&:hover {
- color: #f56c6c;
+ color: #fff;
+ background: rgba(245, 108, 108, 0.85);
+ transform: scale(1.1) rotate(8deg);
}
}
}
@@ -946,58 +1794,98 @@
.message-list {
flex: 1;
overflow-y: auto;
- padding: 20px;
+ padding: 24px 20px;
display: flex;
flex-direction: column;
gap: 20px;
+ background: linear-gradient(180deg, transparent 0%, rgba(0, 85, 212, 0.02) 100%);
&::-webkit-scrollbar {
- width: 6px;
+ width: 8px;
}
&::-webkit-scrollbar-thumb {
- background: #dcdfe6;
- border-radius: 3px;
+ background: linear-gradient(180deg, $secondary-blue, $primary-blue);
+ border-radius: 4px;
+ box-shadow: 0 0 8px rgba(0, 85, 212, 0.3);
}
}
.message-item {
display: flex;
- gap: 12px;
+ gap: 14px;
width: 100%;
+ animation: messageSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+ @keyframes messageSlideIn {
+ from {
+ opacity: 0;
+ transform: translateY(20px) scale(0.95);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0) scale(1);
+ }
+ }
.avatar {
- width: 36px;
- height: 36px;
- border-radius: 8px;
+ width: 42px;
+ height: 42px;
+ border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
- font-size: 20px;
+ font-size: 24px;
+ position: relative;
+ overflow: hidden;
+
+ &::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: inherit;
+ filter: blur(10px);
+ opacity: 0.5;
+ z-index: -1;
+ }
+
+ &::after {
+ content: '';
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.2) 50%, transparent 60%);
+ animation: shimmer 3s infinite;
+ }
}
.message-content {
flex: 1;
- overflow-x: hidden; // 淇敼涓� hidden锛屽唴閮ㄥ鍣ㄥ鐞嗘粴鍔�
+ overflow-x: hidden;
display: flex;
flex-direction: column;
- max-width: calc(100% - 48px); // 鍑忓幓澶村儚鍜岄棿璺�
-
+ max-width: calc(100% - 56px);
+
.text-box {
- padding: 12px 16px;
- border-radius: 12px;
+ padding: 14px 20px;
+ border-radius: 18px;
font-size: 14px;
- line-height: 1.6;
+ line-height: 1.7;
word-break: break-word;
max-width: 100%;
width: fit-content;
overflow-x: auto;
+ transition: all 0.3s ease;
+ position: relative;
+
&::-webkit-scrollbar {
- height: 6px;
+ height: 4px;
}
&::-webkit-scrollbar-thumb {
- background: #dcdfe6;
- border-radius: 3px;
+ background: rgba(0, 85, 212, 0.25);
+ border-radius: 2px;
}
}
}
@@ -1007,13 +1895,26 @@
align-items: flex-start;
}
.avatar {
- background-color: #409eff;
+ background: $gradient-dark;
color: #fff;
+ box-shadow: 0 6px 20px rgba(0, 85, 212, 0.35);
}
.text-box {
- background-color: #fff;
- color: #303133;
- box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+ background: #fff;
+ color: #1a1a2e;
+ box-shadow: $shadow-card;
+ border: 1px solid rgba(0, 85, 212, 0.08);
+ border-top-left-radius: 6px;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 1px;
+ background: linear-gradient(90deg, rgba(0, 85, 212, 0.15), transparent);
+ }
}
}
@@ -1023,29 +1924,52 @@
align-items: flex-end;
}
.avatar {
- background-color: #95d475;
+ background: linear-gradient(145deg, #5a9fe0, #3d8bd4);
color: #fff;
+ box-shadow: 0 6px 20px rgba(0, 85, 212, 0.4);
}
.text-box {
- background-color: #409eff;
+ background: $gradient-dark;
color: #fff;
+ border-top-right-radius: 6px;
+ box-shadow: 0 6px 24px rgba(0, 85, 212, 0.3);
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 1px;
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
+ }
}
}
}
+@keyframes shimmer {
+ 0% {
+ transform: translateX(-100%) rotate(45deg);
+ }
+ 100% {
+ transform: translateX(100%) rotate(45deg);
+ }
+}
+
.charts-wrapper {
- margin-top: 10px;
+ margin-top: 12px;
display: flex;
flex-direction: column;
- gap: 10px;
+ gap: 12px;
overflow-x: auto;
width: 100%;
padding-bottom: 8px;
+
&::-webkit-scrollbar {
height: 6px;
}
&::-webkit-scrollbar-thumb {
- background: #dcdfe6;
+ background: linear-gradient(90deg, $light-blue, $secondary-blue);
border-radius: 3px;
}
}
@@ -1054,153 +1978,1024 @@
width: 100%;
min-width: 300px;
height: 300px;
- background: #fff;
- border-radius: 8px;
- padding: 10px;
+ border-radius: 12px;
+ padding: 12px;
+ margin-bottom: 12px;
}
.table-wrapper {
- margin-top: 10px;
+ margin-top: 12px;
background: #fff;
- border-radius: 8px;
+ border-radius: 12px;
overflow: hidden;
overflow-x: auto;
width: 100%;
+ box-shadow: $shadow-card;
+ border: 1px solid rgba(0, 122, 255, 0.06);
+
&::-webkit-scrollbar {
height: 6px;
}
&::-webkit-scrollbar-thumb {
- background: #dcdfe6;
+ background: linear-gradient(90deg, $light-blue, $secondary-blue);
border-radius: 3px;
}
+
.el-table {
min-width: 300px;
+ --el-table-border-color: rgba(0, 122, 255, 0.08);
+ --el-table-header-bg-color: $ice-white;
}
}
.input-area {
- padding: 16px;
- background-color: #fff;
- border-top: 1px solid #dcdfe6;
+ padding: 18px 20px;
+ background: linear-gradient(180deg, rgba(232, 242, 255, 0.95) 0%, #fff 100%);
+ border-top: 1px solid rgba(0, 85, 212, 0.1);
+ position: relative;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 20px;
+ right: 20px;
+ height: 1px;
+ background: linear-gradient(90deg, transparent, rgba(0, 85, 212, 0.15), transparent);
+ }
.input-actions {
- display: flex;
- gap: 12px;
- margin-bottom: 8px;
- align-items: center;
-
- .file-upload-trigger {
- display: inline-flex;
+ display: flex;
+ gap: 14px;
+ margin-bottom: 12px;
align-items: center;
+
+ .file-upload-trigger {
+ display: inline-flex;
+ align-items: center;
+ }
+
+ :deep(.utility-action-btn) {
+ position: relative;
+ height: 34px;
+ padding: 0 14px;
+ border-radius: 999px;
+ border: 1px solid rgba(92, 119, 255, 0.18);
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(236, 243, 255, 0.98));
+ color: $primary-blue;
+ font-weight: 600;
+ box-shadow: 0 10px 20px rgba(0, 85, 212, 0.08);
+ transition: all 0.25s ease;
+
+ .el-icon {
+ margin-right: 5px;
+ }
+
+ &:hover:not(.is-disabled) {
+ color: #fff;
+ border-color: transparent;
+ background: linear-gradient(135deg, #1f6dff 0%, #6b38ef 100%);
+ box-shadow: 0 14px 24px rgba(64, 90, 255, 0.2);
+ transform: translateY(-1px);
+ }
+ }
+
+ :deep(.stop-action-btn) {
+ border-color: rgba(255, 99, 123, 0.18);
+ color: #d33e5e;
+
+ &:hover:not(.is-disabled) {
+ background: linear-gradient(135deg, #f5536e 0%, #a33cff 100%);
+ }
+ }
}
-}
.input-box {
- padding: 12px;
+ padding: 16px;
position: relative;
background: #fff;
- border: 1px solid #dcdfe6;
- border-radius: 8px;
- margin: 0 16px 16px;
- transition: border-color 0.2s;
+ border: 2px solid rgba(0, 85, 212, 0.12);
+ border-radius: 16px;
+ margin: 0 4px;
+ transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
&:focus-within {
- border-color: #409eff;
+ border-color: $primary-blue;
+ box-shadow: 0 0 0 4px rgba(0, 85, 212, 0.12), $shadow-deep;
+ transform: translateY(-2px);
+ background: #fff;
}
.selected-file-tag {
display: flex;
align-items: center;
- background: #f0f7ff;
- border: 1px solid #d9ecff;
- border-radius: 4px;
- padding: 4px 8px;
- margin-bottom: 8px;
- gap: 6px;
+ background: linear-gradient(135deg, rgba(0, 85, 212, 0.1) 0%, rgba(0, 136, 232, 0.15) 100%);
+ border: 1px solid rgba(0, 85, 212, 0.2);
+ border-radius: 10px;
+ padding: 8px 12px;
+ margin-bottom: 12px;
+ gap: 10px;
width: fit-content;
max-width: 100%;
+ animation: tagSlideIn 0.3s ease;
+
+ @keyframes tagSlideIn {
+ from {
+ opacity: 0;
+ transform: translateX(-10px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+ }
.el-icon {
- color: #409eff;
- font-size: 14px;
+ color: $primary-blue;
+ font-size: 18px;
}
.file-name {
- font-size: 12px;
- color: #606266;
+ font-size: 13px;
+ color: $deep-blue;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
+ font-weight: 600;
}
.remove-file {
cursor: pointer;
- color: #909399;
- transition: color 0.2s;
+ color: $secondary-blue;
+ transition: all 0.2s;
+ padding: 4px;
+ border-radius: 50%;
+
&:hover {
- color: #f56c6c;
+ color: #fff;
+ background: rgba(245, 108, 108, 0.8);
+ transform: scale(1.1) rotate(90deg);
}
}
}
:deep(.el-textarea__inner) {
padding: 0;
+ padding-bottom: 35px;
border: none;
box-shadow: none;
background: transparent;
font-family: inherit;
font-size: 14px;
- line-height: 1.5;
- color: #303133;
+ line-height: 1.6;
+ color: #1a1a2e;
+
&::placeholder {
- color: #c0c4cc;
+ color: #7ab8ff;
+ }
+
+ &:focus {
+ box-shadow: none;
}
}
.send-btn {
position: absolute;
- right: 12px;
- bottom: 12px;
- padding: 8px 16px;
+ right: 16px;
+ bottom: 16px;
+ padding: 10px 22px;
+ background: $gradient-dark;
+ border: none;
+ border-radius: 10px;
+ font-weight: 600;
+ font-size: 14px;
+ color: #fff;
+ box-shadow: 0 6px 20px rgba(0, 85, 212, 0.4);
+ transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+ overflow: hidden;
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ letter-spacing: 0.3px;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: -100%;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+ transition: left 0.5s;
+ }
+
+ &:hover:not(:disabled) {
+ transform: translateY(-3px) scale(1.02);
+ box-shadow: 0 10px 30px rgba(0, 85, 212, 0.5);
+
+ &::before {
+ left: 100%;
+ }
+ }
+
+ &:active:not(:disabled) {
+ transform: translateY(-1px) scale(0.98);
+ }
+
+ &:disabled {
+ background: linear-gradient(145deg, #b0b0b0, #c5c5c5);
+ box-shadow: none;
+ cursor: not-allowed;
+ }
+
+ .el-icon {
+ font-size: 15px;
+ transform: translateY(-1px);
+ }
}
}
}
.typing-indicator {
display: flex;
- gap: 4px;
- padding: 8px 12px;
+ gap: 5px;
+ padding: 10px 14px;
background: #fff;
- border-radius: 12px;
+ border-radius: 14px;
width: fit-content;
- box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
- margin-top: 4px;
+ box-shadow: $shadow-card;
+ margin-top: 6px;
+ border: 1px solid rgba(0, 122, 255, 0.06);
+ border-top-left-radius: 4px;
+
.dot {
- width: 6px;
- height: 6px;
- background-color: #909399;
+ width: 7px;
+ height: 7px;
+ background: $secondary-blue;
border-radius: 50%;
animation: typing 1.4s infinite ease-in-out;
- &:nth-child(2) { animation-delay: 0.2s; }
- &:nth-child(3) { animation-delay: 0.4s; }
+
+ &:nth-child(2) {
+ animation-delay: 0.2s;
+ background: $primary-blue;
+ }
+ &:nth-child(3) {
+ animation-delay: 0.4s;
+ background: $deep-blue;
+ }
}
}
@keyframes typing {
- 0%, 80%, 100% { transform: scale(0); }
- 40% { transform: scale(1); }
+ 0%, 80%, 100% {
+ transform: scale(0.6);
+ opacity: 0.4;
+ }
+ 40% {
+ transform: scale(1);
+ opacity: 1;
+ }
}
.code-block {
- background: #2d2d2d;
- color: #ccc;
- padding: 12px;
- border-radius: 6px;
- font-family: monospace;
- margin: 8px 0;
+ background: linear-gradient(145deg, #1a1a2e, #16213e);
+ color: #a8d8ff;
+ padding: 14px;
+ border-radius: 10px;
+ font-family: 'Fira Code', 'Consolas', monospace;
+ margin: 10px 0;
overflow-x: auto;
+ border: 1px solid rgba(90, 200, 250, 0.15);
+ box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
+
&.js-code {
- color: #f08d49;
+ color: #5ac8fa;
+ }
+}
+
+.chat-main {
+ background:
+ radial-gradient(circle at top left, rgba(46, 140, 224, 0.12) 0%, transparent 34%),
+ linear-gradient(180deg, #fff 0%, #f7fbff 46%, #fff 100%);
+}
+
+.chat-hero {
+ display: grid;
+ grid-template-columns: 164px minmax(0, 1fr);
+ gap: 18px;
+ align-items: start;
+ padding: 14px 18px 6px;
+
+ &.compact {
+ grid-template-columns: 122px minmax(0, 1fr);
+ gap: 12px;
+ padding: 8px 18px 2px;
+ }
+}
+
+.assistant-stand {
+ position: relative;
+ min-height: 252px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ padding-top: 18px;
+ overflow: hidden;
+
+ &.compact {
+ min-height: 176px;
+ padding-top: 8px;
+ }
+
+ &.thinking {
+ .assistant-halo {
+ opacity: 1;
+ transform: scale(1.08);
+ filter: blur(8px);
+ }
+
+ .assistant-scan-ring {
+ opacity: 1;
+ animation-duration: 1.6s;
+ }
+
+ .assistant-orbit {
+ opacity: 1;
+ }
+
+ .assistant-bot {
+ transform: translateY(-4px) scale(1.02);
+ }
+
+ .assistant-bot-head {
+ box-shadow: 0 0 30px rgba(80, 157, 255, 0.36);
+ }
+
+ .assistant-bot-eye {
+ animation: robotBlinkFast 1.1s infinite;
+ box-shadow: 0 0 16px rgba(72, 186, 255, 0.95);
+ }
+
+ .assistant-bot-mouth {
+ width: 28px;
+ opacity: 1;
+ animation: robotTalk 1.2s ease-in-out infinite;
+ }
+
+ .assistant-bot-core {
+ animation: corePulse 1.4s ease-in-out infinite;
+ box-shadow: 0 0 24px rgba(78, 120, 255, 0.26);
+ }
+
+ .assistant-bot-core-ring {
+ animation: coreRotate 3s linear infinite;
+ }
+
+ .assistant-status {
+ color: #6a3bee;
+ box-shadow: 0 10px 22px rgba(106, 59, 238, 0.14);
+ }
+
+ .assistant-status-dot {
+ background: #6a3bee;
+ box-shadow: 0 0 12px rgba(106, 59, 238, 0.9);
+ animation: thinkingDot 1s ease-in-out infinite;
+ }
+
+ .assistant-base-sm {
+ box-shadow: 0 0 24px rgba(255, 93, 122, 0.48);
+ }
+ }
+}
+
+.assistant-halo {
+ position: absolute;
+ top: 22px;
+ width: 130px;
+ height: 130px;
+ border-radius: 50%;
+ background: radial-gradient(circle, rgba(46, 140, 224, 0.3) 0%, rgba(0, 85, 212, 0.18) 42%, rgba(113, 54, 244, 0.12) 60%, transparent 78%);
+ filter: blur(6px);
+ opacity: 0.82;
+ transition: all 0.35s ease;
+}
+
+.assistant-scan-ring {
+ position: absolute;
+ top: 40px;
+ width: 132px;
+ height: 132px;
+ border-radius: 50%;
+ border: 1px solid rgba(90, 159, 224, 0.22);
+ box-shadow: inset 0 0 16px rgba(255, 255, 255, 0.25);
+ opacity: 0.55;
+ animation: scanRing 4s linear infinite;
+}
+
+.assistant-orbit {
+ position: absolute;
+ top: 52px;
+ width: 150px;
+ height: 150px;
+ border-radius: 50%;
+ border: 1px dashed rgba(92, 135, 255, 0.22);
+ opacity: 0.45;
+}
+
+.assistant-orbit-a {
+ animation: orbitRotate 8s linear infinite;
+}
+
+.assistant-orbit-b {
+ width: 118px;
+ height: 118px;
+ top: 68px;
+ border-color: rgba(255, 108, 150, 0.22);
+ animation: orbitRotateReverse 5.6s linear infinite;
+}
+
+.assistant-bot {
+ position: relative;
+ z-index: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-top: 12px;
+ transition: transform 0.35s ease;
+}
+
+.assistant-bot-antenna {
+ position: absolute;
+ top: -4px;
+ width: 4px;
+ height: 20px;
+ border-radius: 999px;
+ background: linear-gradient(180deg, #fefefe, #aac9ff);
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: -6px;
+ left: 50%;
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ transform: translateX(-50%);
+ background: linear-gradient(135deg, #54bfff, #7a41ff);
+ box-shadow: 0 0 14px rgba(84, 191, 255, 0.65);
+ }
+}
+
+.assistant-bot-antenna-left {
+ left: 36px;
+ transform: rotate(-14deg);
+}
+
+.assistant-bot-antenna-right {
+ right: 36px;
+ transform: rotate(14deg);
+}
+
+.assistant-bot-head {
+ position: relative;
+ width: 92px;
+ height: 78px;
+ border-radius: 28px;
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, #e8f1ff 100%);
+ border: 1px solid rgba(0, 85, 212, 0.14);
+ box-shadow: 0 16px 32px rgba(0, 85, 212, 0.14);
+}
+
+.assistant-bot-head-glow {
+ position: absolute;
+ inset: 10px 16px auto;
+ height: 20px;
+ border-radius: 999px;
+ background: linear-gradient(180deg, rgba(0, 85, 212, 0.16), transparent);
+}
+
+.assistant-bot-eye {
+ position: absolute;
+ top: 30px;
+ width: 16px;
+ height: 16px;
+ border-radius: 50%;
+ background: radial-gradient(circle, #8ef0ff 0%, #56c0ff 42%, #2869ff 100%);
+ box-shadow: 0 0 12px rgba(72, 186, 255, 0.72);
+ animation: robotBlink 3.2s infinite;
+}
+
+.assistant-bot-eye-left {
+ left: 22px;
+}
+
+.assistant-bot-eye-right {
+ right: 22px;
+}
+
+.assistant-bot-mouth {
+ position: absolute;
+ left: 50%;
+ bottom: 16px;
+ width: 22px;
+ height: 4px;
+ transform: translateX(-50%);
+ border-radius: 999px;
+ background: linear-gradient(90deg, rgba(72, 186, 255, 0.2), rgba(72, 186, 255, 0.9), rgba(72, 186, 255, 0.2));
+}
+
+.assistant-bot-neck {
+ width: 16px;
+ height: 10px;
+ border-radius: 0 0 10px 10px;
+ background: linear-gradient(180deg, #dceaff, #bdd5ff);
+ margin-top: -2px;
+}
+
+.assistant-bot-body {
+ position: relative;
+ width: 104px;
+ height: 92px;
+ margin-top: 2px;
+ border-radius: 28px 28px 34px 34px;
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, #e3eeff 100%);
+ border: 1px solid rgba(0, 85, 212, 0.14);
+ box-shadow: 0 18px 36px rgba(0, 85, 212, 0.16);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.assistant-bot-arm {
+ position: absolute;
+ top: 18px;
+ width: 16px;
+ height: 44px;
+ border-radius: 999px;
+ background: linear-gradient(180deg, #eff5ff, #c7dbff);
+ border: 1px solid rgba(0, 85, 212, 0.12);
+}
+
+.assistant-bot-arm-left {
+ left: -10px;
+ transform: rotate(16deg);
+}
+
+.assistant-bot-arm-right {
+ right: -10px;
+ transform: rotate(-16deg);
+}
+
+.assistant-bot-core {
+ position: relative;
+ width: 46px;
+ height: 46px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: $primary-blue;
+ background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, #dae8ff 55%, #adc7ff 100%);
+}
+
+.assistant-bot-core-ring {
+ position: absolute;
+ inset: -6px;
+ border-radius: 50%;
+ border: 1px solid rgba(88, 135, 255, 0.3);
+ border-top-color: rgba(255, 96, 139, 0.85);
+ border-right-color: rgba(79, 145, 255, 0.9);
+}
+
+.assistant-status {
+ position: relative;
+ z-index: 1;
+ margin-top: 14px;
+ padding: 6px 12px;
+ border-radius: 999px;
+ font-size: 12px;
+ font-weight: 600;
+ color: $deep-blue;
+ background: rgba(255, 255, 255, 0.95);
+ border: 1px solid rgba(0, 85, 212, 0.12);
+ box-shadow: 0 8px 20px rgba(0, 85, 212, 0.08);
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.assistant-status-dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background: #2e8ce0;
+ box-shadow: 0 0 10px rgba(46, 140, 224, 0.72);
+}
+
+.assistant-base {
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ border-radius: 50%;
+ border: 2px solid rgba(255, 93, 122, 0.22);
+ background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 111, 145, 0.1) 70%, transparent 100%);
+}
+
+.assistant-base-lg {
+ width: 118px;
+ height: 30px;
+}
+
+.assistant-base-md {
+ bottom: 6px;
+ width: 88px;
+ height: 20px;
+ border-color: rgba(255, 93, 122, 0.34);
+}
+
+.assistant-base-sm {
+ bottom: 11px;
+ width: 54px;
+ height: 10px;
+ background: linear-gradient(90deg, rgba(255, 93, 122, 0.95), rgba(255, 173, 188, 0.9));
+ border: none;
+ box-shadow: 0 0 18px rgba(255, 93, 122, 0.38);
+}
+
+@keyframes robotBlink {
+ 0%, 44%, 48%, 100% {
+ transform: scaleY(1);
+ }
+ 46% {
+ transform: scaleY(0.14);
+ }
+}
+
+@keyframes robotBlinkFast {
+ 0%, 100% {
+ transform: scaleY(1);
+ }
+ 50% {
+ transform: scaleY(0.3);
+ }
+}
+
+@keyframes robotTalk {
+ 0%, 100% {
+ transform: translateX(-50%) scaleX(1);
+ }
+ 50% {
+ transform: translateX(-50%) scaleX(1.35);
+ }
+}
+
+@keyframes corePulse {
+ 0%, 100% {
+ transform: scale(1);
+ filter: brightness(1);
+ }
+ 50% {
+ transform: scale(1.08);
+ filter: brightness(1.08);
+ }
+}
+
+@keyframes coreRotate {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+@keyframes orbitRotate {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+@keyframes orbitRotateReverse {
+ from {
+ transform: rotate(360deg);
+ }
+ to {
+ transform: rotate(0deg);
+ }
+}
+
+@keyframes scanRing {
+ 0%, 100% {
+ transform: scale(0.96);
+ opacity: 0.42;
+ }
+ 50% {
+ transform: scale(1.04);
+ opacity: 0.86;
+ }
+}
+
+@keyframes thinkingDot {
+ 0%, 100% {
+ transform: scale(1);
+ }
+ 50% {
+ transform: scale(1.35);
+ }
+}
+
+.welcome-card {
+ position: relative;
+ padding: 14px 14px 12px;
+ border-radius: 16px;
+ background:
+ linear-gradient(#fff, #fff) padding-box,
+ linear-gradient(135deg, rgba(255, 64, 96, 0.85), rgba(117, 65, 255, 0.9)) border-box;
+ border: 1px solid transparent;
+ box-shadow: 0 16px 36px rgba(0, 85, 212, 0.12);
+
+ &.compact {
+ padding: 10px 12px;
+ border-radius: 12px;
+ box-shadow: 0 8px 16px rgba(0, 85, 212, 0.07);
+
+ .welcome-eyebrow {
+ margin-bottom: 4px;
+ }
+
+ .welcome-title {
+ font-size: 17px;
+ line-height: 1.3;
+
+ br {
+ display: none;
+ }
+ }
+
+ .welcome-desc {
+ margin-top: 6px;
+ font-size: 12px;
+ line-height: 1.55;
+ }
+
+ .quick-prompt-list {
+ margin-top: 10px;
+ gap: 6px;
+ }
+
+ .quick-prompt-btn {
+ padding: 8px 10px;
+ font-size: 12px;
+ border-radius: 7px;
+ }
+
+ .more-prompts-btn {
+ margin-top: 8px;
+ font-size: 12px;
+ }
+ }
+}
+
+.welcome-eyebrow {
+ font-size: 11px;
+ font-weight: 700;
+ letter-spacing: 2px;
+ color: rgba(0, 85, 212, 0.58);
+ margin-bottom: 8px;
+}
+
+.welcome-title {
+ margin: 0;
+ font-size: 26px;
+ line-height: 1.2;
+ font-weight: 800;
+ color: #172033;
+}
+
+.welcome-desc {
+ margin: 10px 0 0;
+ font-size: 13px;
+ line-height: 1.7;
+ color: #5f6980;
+}
+
+.quick-prompt-list {
+ display: grid;
+ gap: 8px;
+ margin-top: 14px;
+}
+
+.quick-prompt-btn {
+ width: 100%;
+ border: none;
+ border-radius: 10px;
+ padding: 11px 14px;
+ text-align: left;
+ font-size: 13px;
+ font-weight: 600;
+ color: #fff;
+ cursor: pointer;
+ background: linear-gradient(90deg, #ff4c55 0%, #7c38ef 100%);
+ box-shadow: 0 12px 22px rgba(124, 56, 239, 0.18);
+ transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.2s ease;
+ position: relative;
+ overflow: hidden;
+
+ &::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 56%);
+ pointer-events: none;
+ }
+
+ &::after {
+ content: '';
+ position: absolute;
+ top: -120%;
+ left: -30%;
+ width: 45%;
+ height: 260%;
+ background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+ transform: rotate(22deg);
+ opacity: 0;
+ transition: all 0.35s ease;
+ }
+
+ &:hover:not(:disabled) {
+ transform: translateY(-2px) scale(1.01);
+ box-shadow: 0 16px 28px rgba(124, 56, 239, 0.24);
+
+ &::after {
+ left: 100%;
+ opacity: 1;
+ }
+ }
+
+ &:disabled {
+ cursor: not-allowed;
+ opacity: 0.65;
+ }
+}
+
+.more-prompts-btn {
+ margin-top: 10px;
+ padding: 0 12px;
+ height: 32px;
+ border: 1px solid rgba(208, 65, 81, 0.12);
+ border-radius: 999px;
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 241, 245, 0.96));
+ color: #d04151;
+ font-size: 13px;
+ font-weight: 600;
+ cursor: pointer;
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ box-shadow: 0 10px 18px rgba(208, 65, 81, 0.08);
+ transition: all 0.25s ease;
+
+ &:hover {
+ transform: translateY(-1px);
+ background: linear-gradient(135deg, #ff5570 0%, #8a3df6 100%);
+ border-color: transparent;
+ color: #fff;
+ box-shadow: 0 14px 24px rgba(138, 61, 246, 0.18);
+ }
+}
+
+.hero-dot-grid {
+ display: grid;
+ grid-template-columns: repeat(14, 1fr);
+ gap: 7px;
+ padding: 0 18px 14px;
+
+ span {
+ display: block;
+ width: 100%;
+ aspect-ratio: 1;
+ border-radius: 2px;
+ background: linear-gradient(135deg, rgba(255, 110, 138, 0.95), rgba(255, 190, 201, 0.55));
+ }
+}
+
+.message-list {
+ padding: 8px 18px 18px;
+ gap: 16px;
+ background: transparent;
+}
+
+.input-area {
+ padding: 12px 18px 16px;
+ background: #fff;
+ border-top: none;
+
+ &::before {
+ display: none;
+ }
+
+ .input-box {
+ padding: 14px 16px 16px;
+ border: 1px solid rgba(123, 56, 239, 0.9);
+ border-radius: 22px;
+ margin: 0;
+ transition: all 0.25s ease;
+ box-shadow: 0 14px 34px rgba(0, 85, 212, 0.08);
+
+ &:focus-within {
+ border-color: #7c38ef;
+ box-shadow: 0 0 0 3px rgba(124, 56, 239, 0.1), 0 18px 40px rgba(0, 85, 212, 0.12);
+ transform: none;
+ }
+
+ :deep(.el-textarea__inner) {
+ padding-right: 58px;
+ padding-bottom: 0;
+ min-height: 104px;
+
+ &::placeholder {
+ color: #a0a9bc;
+ }
+ }
+
+ .send-btn {
+ right: 25px;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 36px;
+ min-width: 36px;
+ height: 36px;
+ padding: 0;
+ background: linear-gradient(135deg, #ff5570 0%, #7a36f2 58%, #2d79ff 100%);
+ border-radius: 50%;
+ box-shadow: 0 12px 24px rgba(109, 50, 236, 0.24);
+ transition: all 0.25s ease;
+ gap: 0;
+
+ &:hover:not(:disabled) {
+ transform: translateY(calc(-50% - 1px)) scale(1.04);
+ box-shadow: 0 16px 28px rgba(109, 50, 236, 0.3);
+ }
+
+ &:active:not(:disabled) {
+ transform: translateY(-50%) scale(0.96);
+ }
+
+ .el-icon {
+ margin: 0;
+ font-size: 16px;
+ transform: translate(0, -1px);
+ }
+ }
+ }
+}
+
+@media (max-width: 767px) {
+ .chat-hero {
+ grid-template-columns: 1fr;
+ gap: 10px;
+ padding: 14px 14px 6px;
+
+ &.compact {
+ padding: 8px 14px 4px;
+ }
+ }
+
+ .assistant-stand {
+ min-height: 184px;
+ }
+
+ .welcome-card {
+ padding: 12px 12px 10px;
+ }
+
+ .welcome-title {
+ font-size: 21px;
+ }
+
+ .hero-dot-grid {
+ grid-template-columns: repeat(12, 1fr);
+ gap: 6px;
+ padding: 0 14px 12px;
+ }
+
+ .message-list {
+ padding: 8px 14px 14px;
+ }
+
+ .input-area {
+ padding: 10px 14px 14px;
+ }
+
+ .input-area .input-actions {
+ gap: 10px;
+ flex-wrap: wrap;
}
}
</style>
--
Gitblit v1.9.3