From 4ab97486268e6baf2bc454d47429e5b102131531 Mon Sep 17 00:00:00 2001 From: Hisn00w <1415574326@qq.com> Date: Wed, 19 Nov 2025 10:47:29 +0800 Subject: [PATCH 01/12] Add dark/light theme toggle feature --- web/src/App.vue | 9 +- web/src/assets/css/App.vue | 25 ++++ web/src/assets/css/base.css | 203 +++++++++++++++++++++++++++++ web/src/components/ThemeToggle.vue | 33 +++++ web/src/layouts/AppLayout.vue | 12 +- web/src/stores/theme.js | 83 ++++++++++++ 6 files changed, 360 insertions(+), 5 deletions(-) create mode 100644 web/src/assets/css/App.vue create mode 100644 web/src/components/ThemeToggle.vue create mode 100644 web/src/stores/theme.js diff --git a/web/src/App.vue b/web/src/App.vue index 3d705f8cd..a43e3d0fa 100644 --- a/web/src/App.vue +++ b/web/src/App.vue @@ -1,11 +1,13 @@ diff --git a/web/src/assets/css/App.vue b/web/src/assets/css/App.vue new file mode 100644 index 000000000..a43e3d0fa --- /dev/null +++ b/web/src/assets/css/App.vue @@ -0,0 +1,25 @@ + + diff --git a/web/src/assets/css/base.css b/web/src/assets/css/base.css index 0b3d78cd5..33e621029 100644 --- a/web/src/assets/css/base.css +++ b/web/src/assets/css/base.css @@ -112,3 +112,206 @@ --min-width: 400px; } + +/* 深色模式 */ +:root.dark { + --main-1000: #e1f6fb; + --main-900: #c4eaf5; + --main-800: #a3d8e8; + --main-700: #82c3d6; + --main-600: #5faec2; + --main-500: #4a9fb8; + --main-400: #3996ae; + --main-300: #24839a; + --main-200: #046a82; + --main-100: #035065; + --main-50: #023944; + --main-40: #01151f; + --main-30: #010d14; + --main-20: #010a0f; + --main-10: #00070a; + --main-5: #000405; + --main-1: #000102; + --main-0: #000000; + + --gray-10000: #ffffff; + --gray-2000: #f8fafa; + --gray-1000: #f5f7f7; + --gray-900: #eff2f2; + --gray-800: #eef0f0; + --gray-700: #e4e6e6; + --gray-600: #d7d9d9; + --gray-500: #bdbfbf; + --gray-400: #979999; + --gray-300: #697070; + --gray-200: #4c4d4d; + --gray-150: #323333; + --gray-100: #1e1f1f; + --gray-50: #151616; + --gray-25: #0c0d0d; + --gray-10: #050505; + --gray-0: #000000; + + --main-color: #4a9fb8; + --main-bright: #5faec2; + --secondry-color: #8fa5b0; + --error-color: #ff6b6b; + --color-primary: #4a9fb8; + --color-primary-bg: #1a3a42; + --color-success: #52c41a; + --color-error: #ff4d4f; + --color-info: #3d8fff; + --color-warning: #faad14; + + /* Chart Colors - 深色模式图表颜色 */ + --chart-primary: var(--main-500); + --chart-primary-light: var(--main-600); + --chart-primary-dark: var(--main-400); + + --chart-success: #52c41a; + --chart-success-light: #73d13d; + --chart-success-dark: #389e0d; + + --chart-warning: #faad14; + --chart-warning-light: #ffc53d; + --chart-warning-dark: #d48806; + + --chart-error: #ff4d4f; + --chart-error-light: #ff7875; + --chart-error-dark: #cf1322; + + --chart-info: #1890ff; + --chart-info-light: #40a9ff; + --chart-info-dark: #096dd9; + + --chart-secondary: #722ed1; + --chart-secondary-light: #9254de; + --chart-secondary-dark: #531dab; + + --chart-accent: #13c2c2; + --chart-accent-light: #36cfc9; + --chart-accent-dark: #08979c; + + /* Stats Card Colors - 深色模式统计卡片 */ + --stats-primary-bg: #1e3a8a; + --stats-primary-color: #93c5fd; + --stats-success-bg: #14532d; + --stats-success-color: #86efac; + --stats-info-bg: #0c4a6e; + --stats-info-color: #7dd3fc; + --stats-warning-bg: #78350f; + --stats-warning-color: #fcd34d; + --stats-secondary-bg: #581c87; + --stats-secondary-color: #d8b4fe; + --stats-error-bg: #7f1d1d; + --stats-error-color: #fca5a5; + + --bg-sider: #1f1f1f; + --color-text: #ffffff; +} + +/* 深色模式全局样式 */ +:root.dark { + background-color: #141414; + color: rgba(255, 255, 255, 0.85); +} + +:root.dark body { + background-color: #141414; + color: rgba(255, 255, 255, 0.85); +} + +:root.dark #app { + background-color: #141414; + color: rgba(255, 255, 255, 0.85); +} + +:root.dark #app-router-view { + background-color: #141414; + color: rgba(255, 255, 255, 0.85); +} + +/* 深色模式下覆盖所有白色背景 */ +:root.dark .action-button, +:root.dark .database, +:root.dark .graphbase, +:root.dark .left-panel, +:root.dark .right-panel, +:root.dark .agent-card, +:root.dark .database-card, +:root.dark .setting-card { + background-color: #1f1f1f !important; + border-color: #434343 !important; +} + +/* 深色模式下的浅色背景区域 */ +:root.dark [style*="background-color: #fafafa"], +:root.dark [style*="background-color: #f5f5f5"], +:root.dark [style*="background: white"], +:root.dark [style*="background-color: #fff"] { + background-color: #262626 !important; +} + +/* 深色模式下的聊天和内容区域 */ +:root.dark .agent-view, +:root.dark .agent-view-body, +:root.dark .content, +:root.dark .chat-container, +:root.dark .message-list, +:root.dark .chat-component, +:root.dark .messages-container, +:root.dark .chat-header, +:root.dark .input-container, +:root.dark .chat { + background-color: #141414 !important; + color: rgba(255, 255, 255, 0.85) !important; +} + +/* 深色模式下的输入区域 */ +:root.dark .bottom, +:root.dark .message-input-wrapper { + background-color: #141414 !important; +} + +/* 深色模式下的消息区域 */ +:root.dark .chat-box, +:root.dark .conv-box, +:root.dark .message-bubble, +:root.dark .user-message { + background-color: #1f1f1f !important; + border-color: #434343 !important; +} + +:root.dark .assistant-message { + background-color: #262626 !important; + border-color: #434343 !important; +} + +/* 深色模式下的消息内容 */ +:root.dark .message-content, +:root.dark .markdown-body, +:root.dark .message-md, +:root.dark .md-editor-preview-wrapper, +:root.dark .md-editor-preview { + background-color: transparent !important; + color: rgba(255, 255, 255, 0.85) !important; +} + +/* 深色模式下的 markdown 编辑器 */ +:root.dark .md-editor, +:root.dark .md-editor-content { + background-color: #1f1f1f !important; + color: rgba(255, 255, 255, 0.85) !important; +} + +/* 深色模式下的代码块 */ +:root.dark pre, +:root.dark code { + background-color: #1f1f1f !important; + border-color: #434343 !important; +} + +/* 平滑过渡 */ +* { + transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; +} diff --git a/web/src/components/ThemeToggle.vue b/web/src/components/ThemeToggle.vue new file mode 100644 index 000000000..02c391f3d --- /dev/null +++ b/web/src/components/ThemeToggle.vue @@ -0,0 +1,33 @@ + + + + + diff --git a/web/src/layouts/AppLayout.vue b/web/src/layouts/AppLayout.vue index 22358cf27..6dd024ff1 100644 --- a/web/src/layouts/AppLayout.vue +++ b/web/src/layouts/AppLayout.vue @@ -16,6 +16,7 @@ import { storeToRefs } from 'pinia' import UserInfoComponent from '@/components/UserInfoComponent.vue' import DebugComponent from '@/components/DebugComponent.vue' import TaskCenterDrawer from '@/components/TaskCenterDrawer.vue' +import ThemeToggle from '@/components/ThemeToggle.vue' const configStore = useConfigStore() const databaseStore = useDatabaseStore() @@ -169,7 +170,7 @@ const mainList = [{ - + {{ (githubStars / 1000).toFixed(1) }}k @@ -189,6 +190,11 @@ const mainList = [{ + + +
+ +
-

对话/工具调用分布 (TOP 3)

+

对话/工具调用分布

 @@ -182,31 +182,11 @@ const initConversationToolChart = () => { const conversationData = props.agentStats.agent_conversation_counts || [] const toolData = props.agentStats.agent_tool_usage || [] - // 获取所有智能体ID并按对话数+工具调用数排序，取前3个 - const allAgentStats = {} - - // 统计每个智能体的总数据量（对话数 + 工具调用数） - conversationData.forEach(item => { - if (!allAgentStats[item.agent_id]) { - allAgentStats[item.agent_id] = { conversation: 0, tool: 0, total: 0 } - } - allAgentStats[item.agent_id].conversation = item.conversation_count - allAgentStats[item.agent_id].total += item.conversation_count - }) - - toolData.forEach(item => { - if (!allAgentStats[item.agent_id]) { - allAgentStats[item.agent_id] = { conversation: 0, tool: 0, total: 0 } - } - allAgentStats[item.agent_id].tool = item.tool_usage_count - allAgentStats[item.agent_id].total += item.tool_usage_count - }) - - // 按总数据量降序排序，取前3个 - const topAgentIds = Object.entries(allAgentStats) - .sort(([,a], [,b]) => b.total - a.total) - .slice(0, 3) - .map(([agentId]) => agentId) + // 获取所有智能体ID + const allAgentIds = [...new Set([ + ...conversationData.map(item => item.agent_id), + ...toolData.map(item => item.agent_id) + ])] const option = { tooltip: { @@ -236,7 +216,7 @@ const initConversationToolChart = () => { }, xAxis: { type: 'category', - data: topAgentIds, + data: allAgentIds, axisLine: { lineStyle: { color: '#e8e8e8' @@ -268,7 +248,7 @@ const initConversationToolChart = () => { { name: '对话数', type: 'bar', - data: topAgentIds.map(agentId => { + data: allAgentIds.map(agentId => { const item = conversationData.find(d => d.agent_id === agentId) return item ? item.conversation_count : 0 }), @@ -287,7 +267,7 @@ const initConversationToolChart = () => { { name: '工具调用数', type: 'bar', - data: topAgentIds.map(agentId => { + data: allAgentIds.map(agentId => { const item = toolData.find(d => d.agent_id === agentId) return item ? item.tool_usage_count : 0 }), @@ -373,4 +353,17 @@ defineExpose({ :deep(.ant-progress-bg) { transition: all 0.3s ease; } + +// 深色模式适配 +:root.dark { + .top-performers, .metrics-comparison { + h4 { + color: rgba(255, 255, 255, 0.85); + } + + h5 { + color: rgba(255, 255, 255, 0.65); + } + } +} \ No newline at end of file diff --git a/web/src/components/dashboard/FeedbackModalComponent.vue b/web/src/components/dashboard/FeedbackModalComponent.vue index 891f12f3f..c8b295340 100644 --- a/web/src/components/dashboard/FeedbackModalComponent.vue +++ b/web/src/components/dashboard/FeedbackModalComponent.vue @@ -339,6 +339,72 @@ watch(() => props.agentId, () => { } +// 深色模式适配 +:root.dark { + .feedback-cards-container { + &::-webkit-scrollbar-track { + background: #262626; + } + + &::-webkit-scrollbar-thumb { + background: #434343; + + &:hover { + background: #595959; + } + } + } + + .feedback-card { + background: #1f1f1f; + border-color: #434343; + + &:hover { + border-color: var(--main-500); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); + } + } + + .card-header { + background: #262626; + border-bottom-color: #434343; + } + + .user-details .username { + color: rgba(255, 255, 255, 0.85); + } + + .message-content { + background: #262626; + color: rgba(255, 255, 255, 0.85); + } + + .info-item { + .label { + color: rgba(255, 255, 255, 0.65); + } + + .value { + color: rgba(255, 255, 255, 0.85); + } + } + + .reason-content { + background: rgba(250, 173, 20, 0.15); + border-left-color: #faad14; + color: rgba(255, 255, 255, 0.85); + } + + .card-footer { + background: #262626; + border-top-color: #434343; + } + + .time-info { + color: rgba(255, 255, 255, 0.65); + } +} + // 响应式设计 @media (max-width: 768px) { .feedback-cards-container { diff --git a/web/src/views/AgentView.vue b/web/src/views/AgentView.vue index 786ec6cc6..47368db74 100644 --- a/web/src/views/AgentView.vue +++ b/web/src/views/AgentView.vue @@ -737,6 +737,47 @@ const handlePreview = () => { } } +// 深色模式适配 - 多选卡片 +:root.dark { + .multi-select-cards { + .multi-select-label { + color: rgba(255, 255, 255, 0.65); + } + + .option-card { + background: #262626; + border-color: #434343; + + &:hover { + border-color: var(--main-500); + } + + &.selected { + border-color: var(--main-500); + background: rgba(74, 159, 184, 0.15); + + .option-indicator { + color: var(--main-400); + } + + .option-text { + color: var(--main-400); + } + } + + &.unselected { + .option-indicator { + color: rgba(255, 255, 255, 0.45); + } + + .option-text { + color: rgba(255, 255, 255, 0.65); + } + } + } + } +} + // 智能体选择器样式 .agent-selector { border: 1px solid var(--gray-300); @@ -880,6 +921,71 @@ const handlePreview = () => { } } +// 深色模式适配 - 智能体选择器和模态框 +:root.dark { + .agent-selector { + background: #1f1f1f; + border-color: #434343; + + &:hover { + border-color: var(--main-500); + } + + .selected-agent-display { + .agent-name { + color: rgba(255, 255, 255, 0.85); + } + } + } + + .agent-modal { + :deep(.ant-modal-header) { + background: #1f1f1f; + border-bottom-color: #434343; + + .ant-modal-title { + color: rgba(255, 255, 255, 0.85); + } + } + + :deep(.ant-modal-body) { + background: #1f1f1f; + } + + .agent-modal-content { + .agent-card { + background: #262626; + border-color: #434343; + + &:hover { + border-color: var(--main-500); + } + + .agent-card-header .agent-card-title .agent-card-name { + color: rgba(255, 255, 255, 0.85); + } + + .agent-card-description { + color: rgba(255, 255, 255, 0.65); + } + + &.selected { + border-color: var(--main-500); + background: rgba(74, 159, 184, 0.15); + + .agent-card-header .agent-card-title .agent-card-name { + color: var(--main-400); + } + + .agent-card-description { + color: rgba(255, 255, 255, 0.85); + } + } + } + } + } +} + // 自定义更多菜单样式 .more-popup-menu { position: fixed; @@ -937,6 +1043,33 @@ const handlePreview = () => { } } +// 深色模式适配 +:root.dark .more-popup-menu { + background: #1f1f1f; + border-color: #434343; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2); + + .menu-item { + color: rgba(255, 255, 255, 0.85); + + .menu-icon { + color: rgba(255, 255, 255, 0.65); + } + + &:hover { + background: #262626; + } + + &:active { + background: #303030; + } + } + + .menu-divider { + background: #434343; + } +} + // 菜单淡入淡出动画 .menu-fade-enter-active { animation: menuSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1); diff --git a/web/src/views/DashboardView.vue b/web/src/views/DashboardView.vue index 9c852424d..df06b0ddd 100644 --- a/web/src/views/DashboardView.vue +++ b/web/src/views/DashboardView.vue @@ -696,4 +696,88 @@ onUnmounted(() => { } } } + +// 深色模式适配 +:root.dark { + .dashboard-container { + background-color: #141414; + } + + .conversations-section, + .call-stats-section { + background-color: #1f1f1f; + border-color: #434343; + + &:hover { + background-color: #1f1f1f; + border-color: #595959; + } + + :deep(.ant-card-head) { + background-color: #1f1f1f; + border-bottom-color: #434343; + + .ant-card-head-title { + color: rgba(255, 255, 255, 0.85); + } + } + + :deep(.ant-card-body) { + background-color: #1f1f1f; + } + } + + .conversations-section { + .conversation-title { + color: var(--main-400); + + &:hover { + color: var(--main-500); + } + } + + .time-text { + color: rgba(255, 255, 255, 0.65); + } + } + + .call-stats-section { + .call-stats-container { + .call-summary { + .summary-card { + background: linear-gradient(135deg, #262626 0%, #2a2a2a 100%); + border-color: #434343; + + .summary-value { + color: rgba(255, 255, 255, 0.85); + } + + .summary-label { + color: rgba(255, 255, 255, 0.65); + } + } + } + } + } + + .placeholder-content { + color: rgba(255, 255, 255, 0.65); + + .placeholder-icon { + background-color: #262626; + + .icon { + color: rgba(255, 255, 255, 0.45); + } + } + + .placeholder-text { + color: rgba(255, 255, 255, 0.85); + } + + .placeholder-subtitle { + color: rgba(255, 255, 255, 0.65); + } + } +} From 50d6467584599fa57ec1f2e12dbb6b856251fab8 Mon Sep 17 00:00:00 2001 From: Wenjie Zhang Date: Wed, 19 Nov 2025 20:24:04 +0800 Subject: [PATCH 06/12] =?UTF-8?q?style:=20=E6=9B=BF=E6=8D=A2=E7=A1=AC?= =?UTF-8?q?=E7=BC=96=E7=A0=81=E9=A2=9C=E8=89=B2=E5=80=BC=E4=B8=BACSS?= =?UTF-8?q?=E5=8F=98=E9=87=8F=E4=BB=A5=E6=94=AF=E6=8C=81=E4=B8=BB=E9=A2=98?= =?UTF-8?q?=E5=88=87=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 将多处硬编码的颜色值（如#fff、#f0f0f0等）替换为CSS变量（如--gray-0、--gray-150等），统一管理颜色样式，便于主题切换和样式维护。主要修改包括背景色、边框色、文字色等视觉元素，同时移除不再需要的深色模式适配代码。 --- web/src/assets/css/base.css | 388 +---------- web/src/assets/css/sigma.css | 18 +- web/src/components/AgentChatComponent.vue | 18 - web/src/components/AgentConfigSidebar.vue | 360 +--------- web/src/components/AgentMessageComponent.vue | 2 +- .../components/AttachmentStatusIndicator.vue | 4 +- web/src/components/DebugComponent.vue | 8 +- web/src/components/FileTable.vue | 4 +- web/src/components/GraphInfoPanel.vue | 2 +- web/src/components/HeaderComponent.vue | 4 +- web/src/components/HumanApprovalModal.vue | 4 +- web/src/components/ImagePreviewComponent.vue | 2 +- web/src/components/KnowledgeBaseCard.vue | 2 +- web/src/components/KnowledgeGraphSection.vue | 2 +- web/src/components/KnowledgeGraphViewer.vue | 76 +-- web/src/components/MarkdownContentViewer.vue | 22 +- web/src/components/MessageInputComponent.vue | 6 +- web/src/components/MindMapSection.vue | 32 +- .../components/ModelProvidersComponent.vue | 28 +- web/src/components/ModelSelectorComponent.vue | 42 -- web/src/components/RefsSidebar.vue | 624 ------------------ web/src/components/SearchConfigTab.vue | 2 +- web/src/components/StatusBar.vue | 6 +- web/src/components/TaskCenterDrawer.vue | 24 +- web/src/components/UserInfoComponent.vue | 14 +- .../components/UserManagementComponent.vue | 2 +- .../dashboard/AgentStatsComponent.vue | 14 +- .../dashboard/CallStatsComponent.vue | 2 +- .../dashboard/FeedbackModalComponent.vue | 72 +- .../dashboard/ToolStatsComponent.vue | 2 +- .../dashboard/UserStatsComponent.vue | 2 +- web/src/layouts/AppLayout.vue | 74 ++- web/src/views/AgentSingleView.vue | 2 +- web/src/views/AgentView.vue | 163 +---- web/src/views/DashboardView.vue | 84 --- web/src/views/DataBaseInfoView.vue | 27 +- web/src/views/DataBaseView.vue | 30 +- web/src/views/GraphView.vue | 54 +- web/src/views/HomeView.vue | 14 +- web/src/views/LoginView.vue | 34 +- web/src/views/SettingView.vue | 2 +- 41 files changed, 304 insertions(+), 1968 deletions(-) delete mode 100644 web/src/components/RefsSidebar.vue diff --git a/web/src/assets/css/base.css b/web/src/assets/css/base.css index ec2a9c46b..55083dc50 100644 --- a/web/src/assets/css/base.css +++ b/web/src/assets/css/base.css @@ -119,6 +119,15 @@ --shadow-5: rgba(0, 0, 0, 0.20); --min-width: 400px; + + /* Ant Design 兼容变量 */ + --color-bg-container: var(--main-0); + --color-bg-elevated: var(--gray-10); + --color-text-secondary: rgba(0, 0, 0, 0.65); + --color-text-tertiary: rgba(0, 0, 0, 0.45); + --color-trans-light: rgba(255, 255, 255, 0.85); + --color-trans-dark: rgba(0, 0, 0, 0.85); + --color-border: var(--gray-200); } /* 深色模式 */ @@ -217,6 +226,13 @@ --bg-sider: #141414; --color-text: #ffffff; + /* Ant Design 兼容变量 - 深色模式 */ + --color-bg-container: #1f1f1f; + --color-bg-elevated: #262626; + --color-text-secondary: rgba(255, 255, 255, 0.65); + --color-text-tertiary: rgba(255, 255, 255, 0.45); + --color-border: #434343; + /* Shadow System - 深色模式阴影系统 */ --shadow-0: rgba(0, 0, 0, 0.1); --shadow-1: rgba(0, 0, 0, 0.2); @@ -224,376 +240,40 @@ --shadow-3: rgba(0, 0, 0, 0.4); --shadow-4: rgba(0, 0, 0, 0.5); --shadow-5: rgba(0, 0, 0, 0.6); + + + --color-trans-light: rgba(0, 0, 0, 0.85); + --color-trans-dark: rgba(255, 255, 255, 0.85); } /* 深色模式全局样式 */ :root.dark { background-color: #141414; - color: rgba(255, 255, 255, 0.85); + color: var(--color-trans-dark); } -:root.dark body { - background-color: #141414; - color: rgba(255, 255, 255, 0.85); +/* md-editor - 深色模式 */ +:root.dark .md-editor { + background-color: var(--gray-0); } -:root.dark #app { - background-color: #141414; - color: rgba(255, 255, 255, 0.85); +/* 覆盖 Ant Design 全局样式 */ +:root.dark .ant-tag { + background-color: var(--gray-50); + border-color: currentColor; } -:root.dark #app-router-view { +:root.dark body { background-color: #141414; - color: rgba(255, 255, 255, 0.85); -} - -/* 深色模式下的卡片和面板 */ -:root.dark .left-panel, -:root.dark .right-panel { - background-color: #1f1f1f; - border-color: #434343; -} - -/* 深色模式下的浅色背景区域 */ -:root.dark [style*="background-color: #fafafa"], -:root.dark [style*="background-color: #f5f5f5"], -:root.dark [style*="background: white"], -:root.dark [style*="background-color: #fff"] { - background-color: #262626 !important; + color: var(--color-trans-dark); } -/* 深色模式下的聊天和内容区域 */ -:root.dark .agent-view, -:root.dark .agent-view-body, -:root.dark .content { +:root.dark #app { background-color: #141414; - color: rgba(255, 255, 255, 0.85); + color: var(--color-trans-dark); } -/* 深色模式下的输入区域 */ -:root.dark .message-input-wrapper { +:root.dark #app-router-view { background-color: #141414; -} - -/* 深色模式下的输入框 */ -:root.dark .input-box { - background-color: #1f1f1f !important; - border-color: #434343 !important; - box-shadow: 0 2px 12px var(--shadow-2) !important; -} - -:root.dark .input-box .user-input { - background-color: transparent !important; - color: rgba(255, 255, 255, 0.85) !important; -} - -:root.dark .input-box .user-input::placeholder { - color: rgba(255, 255, 255, 0.45) !important; -} - -/* 深色模式下的消息区域 */ -:root.dark .chat-box, -:root.dark .conv-box, -:root.dark .message-bubble, -:root.dark .user-message { - background-color: #1f1f1f !important; - border-color: #434343 !important; -} - -:root.dark .assistant-message { - background-color: #262626 !important; - border-color: #434343 !important; -} - -/* 深色模式下的消息内容 */ -:root.dark .message-content, -:root.dark .markdown-body, -:root.dark .message-md, -:root.dark .md-editor-preview-wrapper, -:root.dark .md-editor-preview { - background-color: transparent !important; - color: rgba(255, 255, 255, 0.85) !important; -} - -/* 深色模式下的 markdown 编辑器 */ -:root.dark .md-editor, -:root.dark .md-editor-content { - background-color: #1f1f1f !important; - color: rgba(255, 255, 255, 0.85) !important; -} - -/* 深色模式下的代码块 */ -:root.dark pre, -:root.dark code { - background-color: #1f1f1f !important; - border-color: #434343 !important; -} - -/* 深色模式下的设置页面 */ -:root.dark .setting-view, -:root.dark .setting-container, -:root.dark .setting { - background-color: #141414 !important; - color: rgba(255, 255, 255, 0.85) !important; -} - -:root.dark .setting-view .card, -:root.dark .setting-view .service-link-card { - background-color: #1f1f1f !important; - border-color: #434343 !important; -} - -:root.dark .setting-view .card:hover, -:root.dark .setting-view .service-link-card:hover { - box-shadow: 0 1px 8px var(--shadow-2) !important; -} - -:root.dark .setting-view .sider { - background-color: #141414 !important; - border-color: #434343 !important; -} - -/* 深色模式下的图表组件 */ -:root.dark .graph-container, -:root.dark .graph-canvas-container { - background-color: #141414 !important; -} - -:root.dark .status-wrapper { - color: rgba(255, 255, 255, 0.65) !important; -} - -/* 深色模式下的配置侧边栏 */ -:root.dark .agent-config-sidebar { - background-color: #1f1f1f !important; - border-color: #434343 !important; -} - -:root.dark .agent-config-sidebar .sidebar-header, -:root.dark .agent-config-sidebar .sidebar-content, -:root.dark .agent-config-sidebar .config-section { - background-color: #1f1f1f !important; -} - -:root.dark .agent-config-sidebar .config-card, -:root.dark .agent-config-sidebar .model-card { - background-color: #141414 !important; - border-color: #434343 !important; -} - -:root.dark .agent-config-sidebar .ant-btn, -:root.dark .agent-config-sidebar button { - background-color: #141414 !important; - border-color: #434343 !important; - color: rgba(255, 255, 255, 0.85) !important; -} - -:root.dark .agent-config-sidebar .ant-btn-primary { - background-color: var(--color-primary) !important; - border-color: var(--color-primary) !important; - color: #ffffff !important; -} - -/* 深色模式下的通用文本颜色 - 排除图谱容器，避免影响 G6 渲染 */ -:root.dark h1:not(.graph-canvas *), -:root.dark h2:not(.graph-canvas *), -:root.dark h3:not(.graph-canvas *), -:root.dark h4:not(.graph-canvas *), -:root.dark h5:not(.graph-canvas *), -:root.dark h6:not(.graph-canvas *), -:root.dark p:not(.graph-canvas *), -:root.dark span:not(.graph-canvas *), -:root.dark div:not(.graph-canvas *), -:root.dark label:not(.graph-canvas *), -:root.dark a:not(.graph-canvas *) { - color: rgba(255, 255, 255, 0.85); -} - -/* 深色模式下的次要文本 */ -:root.dark .text-secondary, -:root.dark .ant-typography-secondary { - color: rgba(255, 255, 255, 0.65) !important; -} - -/* 深色模式下的禁用文本 */ -:root.dark .text-disabled, -:root.dark .ant-typography-disabled { - color: rgba(255, 255, 255, 0.45) !important; -} - -/* 深色模式下的输入框 */ -:root.dark input, -:root.dark textarea, -:root.dark .ant-input, -:root.dark .ant-input-affix-wrapper { - background-color: #1f1f1f !important; - border-color: #434343 !important; - color: rgba(255, 255, 255, 0.85) !important; -} - -:root.dark input::placeholder, -:root.dark textarea::placeholder, -:root.dark .ant-input::placeholder { - color: rgba(255, 255, 255, 0.45) !important; -} - -/* 深色模式下的按钮 */ -:root.dark .ant-btn-default { - background-color: #1f1f1f !important; - border-color: #434343 !important; - color: rgba(255, 255, 255, 0.85) !important; -} - -:root.dark .ant-btn-default:hover { - background-color: #262626 !important; - border-color: #4a9fb8 !important; - color: #4a9fb8 !important; -} - -/* 深色模式下的卡片 */ -:root.dark .ant-card { - background-color: #1f1f1f !important; - border-color: #434343 !important; -} - -:root.dark .ant-card-head { - background-color: #1f1f1f !important; - border-color: #434343 !important; - color: rgba(255, 255, 255, 0.85) !important; -} - -:root.dark .ant-card-body { - background-color: #1f1f1f !important; - color: rgba(255, 255, 255, 0.85) !important; -} - -/* 深色模式下的表格 */ -:root.dark .ant-table { - background-color: #1f1f1f !important; - color: rgba(255, 255, 255, 0.85) !important; -} - -:root.dark .ant-table-thead > tr > th { - background-color: #262626 !important; - border-color: #434343 !important; - color: rgba(255, 255, 255, 0.85) !important; -} - -:root.dark .ant-table-tbody > tr > td { - border-color: #434343 !important; - color: rgba(255, 255, 255, 0.85) !important; -} - -:root.dark .ant-table-tbody > tr:hover > td { - background-color: #262626 !important; -} - -/* 深色模式下的模态框 */ -:root.dark .ant-modal-content { - background-color: #1f1f1f !important; - color: rgba(255, 255, 255, 0.85) !important; -} - -:root.dark .ant-modal-header { - background-color: #1f1f1f !important; - border-color: #434343 !important; - color: rgba(255, 255, 255, 0.85) !important; -} - -:root.dark .ant-modal-footer { - background-color: #1f1f1f !important; - border-color: #434343 !important; -} - -/* 深色模式下的下拉菜单 */ -:root.dark .ant-dropdown-menu { - background-color: #1f1f1f !important; - border-color: #434343 !important; -} - -:root.dark .ant-dropdown-menu-item { - color: rgba(255, 255, 255, 0.85) !important; -} - -:root.dark .ant-dropdown-menu-item:hover { - background-color: #262626 !important; -} - -/* 深色模式下的选择器 */ -:root.dark .ant-select-selector { - background-color: #1f1f1f !important; - border-color: #434343 !important; - color: rgba(255, 255, 255, 0.85) !important; -} - -:root.dark .ant-select-dropdown { - background-color: #1f1f1f !important; - border-color: #434343 !important; -} - -:root.dark .ant-select-item { - color: rgba(255, 255, 255, 0.85) !important; -} - -:root.dark .ant-select-item-option-selected { - background-color: #262626 !important; -} - -:root.dark .ant-select-item-option-active { - background-color: #262626 !important; -} - -/* 深色模式下的标签 */ -:root.dark .ant-tag { - border-color: #434343 !important; -} - -/* 预设颜色标签在深色模式下的适配 */ -:root.dark .ant-tag-blue { - background-color: rgba(61, 143, 255, 0.18) !important; - border-color: var(--color-info) !important; - color: rgba(255, 255, 255, 0.9) !important; -} - -:root.dark .ant-tag-green { - background-color: rgba(82, 196, 26, 0.22) !important; - border-color: var(--color-success) !important; - color: rgba(255, 255, 255, 0.9) !important; -} - -:root.dark .ant-tag-red { - background-color: rgba(255, 77, 79, 0.22) !important; - border-color: var(--color-error) !important; - color: rgba(255, 255, 255, 0.9) !important; -} - -/* 深色模式下的分割线 */ -:root.dark .ant-divider { - border-color: #434343 !important; -} - -/* 深色模式下的空状态 */ -:root.dark .ant-empty-description { - color: rgba(255, 255, 255, 0.65) !important; -} - -/* 深色模式下的图谱相关组件 - 已禁用，改为在 GraphView.vue 中单独控制 */ -/* :root.dark .graph-container, -:root.dark .graph-section, -:root.dark .container-outter { - background-color: #141414 !important; - color: rgba(255, 255, 255, 0.85) !important; -} */ - -/* 深色模式下的操作按钮区域 */ -:root.dark .actions, -:root.dark .actions-left, -:root.dark .actions-right, -:root.dark .footer { - color: rgba(255, 255, 255, 0.85) !important; -} - -/* 平滑过渡 - 移除 color transition，防止 Canvas 读取中间态颜色 */ -*:not(.graph-canvas):not(.graph-canvas *) { - transition: background-color 0.3s ease, border-color 0.3s ease; + color: var(--color-trans-dark); } diff --git a/web/src/assets/css/sigma.css b/web/src/assets/css/sigma.css index ec73888e8..8e4ee98de 100644 --- a/web/src/assets/css/sigma.css +++ b/web/src/assets/css/sigma.css @@ -3,7 +3,7 @@ position: relative; width: 100%; height: 100%; - background: #fafafa; + background: var(--gray-25); } .sigma-container canvas { @@ -22,34 +22,34 @@ /* 高亮样式 */ .node-highlighted { - stroke: #ff0000 !important; + stroke: var(--color-error) !important; stroke-width: 3px !important; } .edge-highlighted { - stroke: #ff0000 !important; + stroke: var(--color-error) !important; stroke-width: 3px !important; } /* 选中样式 */ .node-selected { - stroke: #1890ff !important; + stroke: var(--color-info) !important; stroke-width: 4px !important; } .edge-selected { - stroke: #1890ff !important; + stroke: var(--color-info) !important; stroke-width: 4px !important; } /* 悬停样式 */ .node-focused { - stroke: #52c41a !important; + stroke: var(--color-success) !important; stroke-width: 2px !important; } .edge-focused { - stroke: #52c41a !important; + stroke: var(--color-success) !important; stroke-width: 2px !important; } @@ -65,8 +65,8 @@ /* 工具提示 */ .sigma-tooltip { position: absolute; - background: rgba(0, 0, 0, 0.8); - color: white; + background: var(--shadow-5); + color: var(--gray-0); padding: 8px 12px; border-radius: 4px; font-size: 12px; diff --git a/web/src/components/AgentChatComponent.vue b/web/src/components/AgentChatComponent.vue index 43501b980..2a547ec0a 100644 --- a/web/src/components/AgentChatComponent.vue +++ b/web/src/components/AgentChatComponent.vue @@ -1875,24 +1875,6 @@ watch(conversations, () => { } } -/* 深色模式适配 */ -:root.dark .agent-nav-btn { - color: rgba(255, 255, 255, 0.85); - - &:hover:not(.is-disabled) { - background-color: #262626; - } - - &.agent-state-btn.has-content { - color: var(--main-500); - - &:hover:not(.is-disabled) { - color: var(--main-400); - background-color: rgba(74, 159, 184, 0.15); - } - } -} - @keyframes spin { from { transform: rotate(0deg); diff --git a/web/src/components/AgentConfigSidebar.vue b/web/src/components/AgentConfigSidebar.vue index 2c0ae6fc5..0af27ec2b 100644 --- a/web/src/components/AgentConfigSidebar.vue +++ b/web/src/components/AgentConfigSidebar.vue @@ -592,7 +592,7 @@ watch(() => props.isOpen, (newVal) => { align-items: center; padding: 10px 20px; border-bottom: 1px solid var(--gray-200); - background: #fff; + background: var(--gray-0); flex-shrink: 0; min-width: 400px; @@ -645,7 +645,7 @@ watch(() => props.isOpen, (newVal) => { bottom: 0px; padding: 12px 0; border-top: 1px solid var(--gray-100); - background: #fff; + background: var(--gray-0); // min-width: 400px; z-index: 10; @@ -664,7 +664,7 @@ watch(() => props.isOpen, (newVal) => { &.changed { background-color: var(--main-color); - color: #fff; + color: var(--gray-0); } &:hover { @@ -972,7 +972,7 @@ watch(() => props.isOpen, (newVal) => { height: 36px; font-size: 14px; transition: all 0.2s ease; - background: white; + background: var(--gray-0); .search-icon { color: var(--gray-500); @@ -1002,7 +1002,7 @@ watch(() => props.isOpen, (newVal) => { overflow-y: auto; border-radius: 8px; margin-bottom: 16px; - background: white; + background: var(--gray-0); // 在小屏幕下调整为单列布局 @media (max-width: 480px) { @@ -1034,7 +1034,7 @@ watch(() => props.isOpen, (newVal) => { transition: all 0.2s ease; border-radius: 8px; margin-bottom: 4px; - background: white; + background: var(--gray-0); border: 1px solid var(--gray-200); &:hover { @@ -1129,7 +1129,7 @@ watch(() => props.isOpen, (newVal) => { &.ant-btn-default { border: 1px solid var(--gray-300); color: var(--gray-700); - background: white; + background: var(--gray-0); &:hover { border-color: var(--main-color); @@ -1140,7 +1140,7 @@ watch(() => props.isOpen, (newVal) => { &.ant-btn-primary { background: var(--main-color); border: none; - color: white; + color: var(--gray-0); &:hover { background: var(--main-color); @@ -1159,348 +1159,4 @@ watch(() => props.isOpen, (newVal) => { width: 100vw; } } - -// 深色模式适配 -:root.dark { - .agent-config-sidebar { - background: #1f1f1f; - border-left-color: #434343; - - .sidebar-header { - background: #1f1f1f; - border-bottom-color: #434343; - - .sidebar-title { - color: rgba(255, 255, 255, 0.85); - - .title-icon { - color: var(--main-500); - } - } - - .close-btn { - color: rgba(255, 255, 255, 0.65); - - &:hover { - color: rgba(255, 255, 255, 0.85); - background: #262626; - } - } - } - - .sidebar-content { - .agent-info { - .agent-basic-info { - .agent-description { - color: rgba(255, 255, 255, 0.65); - } - } - } - - .sidebar-footer { - background: #1f1f1f; - border-top-color: #434343; - - .form-actions { - .save-btn { - background-color: #262626; - color: rgba(255, 255, 255, 0.85); - - &.changed { - background-color: var(--main-500); - color: #fff; - } - - &:hover { - opacity: 0.9; - } - } - - .reset-btn { - border-color: #434343; - color: rgba(255, 255, 255, 0.85); - background: #262626; - - &:hover { - border-color: var(--main-500); - color: var(--main-400); - } - } - } - } - - .config-form-content { - .config-form { - .config-item { - .config-description { - color: rgba(255, 255, 255, 0.65); - } - - .system-prompt-input { - background: #262626; - border-color: #434343; - color: rgba(255, 255, 255, 0.85); - - &::placeholder { - color: rgba(255, 255, 255, 0.45); - } - } - - .system-prompt-display { - background: #262626; - border-color: #434343; - - &:hover { - border-color: var(--main-500); - background: #2a2a2a; - } - - .system-prompt-content { - color: rgba(255, 255, 255, 0.85); - - &.is-placeholder { - color: rgba(255, 255, 255, 0.45); - } - } - - .edit-hint { - color: rgba(255, 255, 255, 0.65); - background: rgba(31, 31, 31, 0.9); - } - } - } - } - } - } - } - - // 工具选择器深色模式 - .tools-selector { - .tools-summary { - background: #262626; - border-color: #434343; - - .tools-summary-info { - color: rgba(255, 255, 255, 0.85); - - .tools-count { - color: rgba(255, 255, 255, 0.85); - } - } - - .select-tools-btn { - background: var(--main-500); - - &:hover { - background: var(--main-500); - } - } - } - - .selected-tools-preview { - .tool-tag { - background: #262626; - border-color: #434343; - color: rgba(255, 255, 255, 0.85); - - :deep(.anticon-close) { - color: rgba(255, 255, 255, 0.65); - - &:hover { - color: rgba(255, 255, 255, 0.85); - } - } - } - } - } - - // 多选卡片深色模式 - .multi-select-cards { - .multi-select-label { - color: rgba(255, 255, 255, 0.65); - } - - .option-card { - background: #262626; - border-color: #434343; - - &:hover { - border-color: var(--main-500); - } - - &.selected { - border-color: var(--main-500); - background: rgba(74, 159, 184, 0.15); - - .option-indicator { - color: var(--main-400); - } - - .option-text { - color: var(--main-400); - } - } - - &.unselected { - .option-indicator { - color: rgba(255, 255, 255, 0.45); - } - - .option-text { - color: rgba(255, 255, 255, 0.65); - } - } - } - } - - // 工具选择弹窗深色模式 - .tools-modal { - :deep(.ant-modal-content) { - background: #1f1f1f; - border-color: #434343; - } - - :deep(.ant-modal-header) { - background: #1f1f1f; - border-bottom-color: #434343; - - .ant-modal-title { - color: rgba(255, 255, 255, 0.85); - } - } - - :deep(.ant-modal-body) { - background: #1f1f1f; - } - - .tools-modal-content { - .tools-search { - .search-input { - background: #262626; - border-color: #434343; - color: rgba(255, 255, 255, 0.85); - - :deep(input) { - background: transparent; - color: rgba(255, 255, 255, 0.85); - - &::placeholder { - color: rgba(255, 255, 255, 0.45); - } - } - - .search-icon { - color: rgba(255, 255, 255, 0.65); - } - - &:focus-within { - border-color: var(--main-500); - - .search-icon { - color: var(--main-400); - } - } - - &:hover { - border-color: #595959; - } - } - } - - .tools-list { - background: #1f1f1f; - - &::-webkit-scrollbar-track { - background: #262626; - } - - &::-webkit-scrollbar-thumb { - background: #434343; - - &:hover { - background: #595959; - } - } - - .tool-item { - background: #262626; - border-color: #434343; - - &:hover { - border-color: #595959; - background: #2a2a2a; - } - - .tool-content { - .tool-header { - .tool-name { - color: rgba(255, 255, 255, 0.85); - } - - .tool-indicator { - color: rgba(255, 255, 255, 0.45); - } - } - - .tool-description { - color: rgba(255, 255, 255, 0.65); - } - } - - &.selected { - background: rgba(74, 159, 184, 0.15); - border-color: var(--main-500); - - .tool-content { - .tool-name { - color: var(--main-400); - } - - .tool-indicator { - color: var(--main-400); - } - - .tool-description { - color: rgba(255, 255, 255, 0.85); - } - } - } - } - } - - .tools-modal-footer { - border-top-color: #434343; - - .selected-count { - background: #262626; - border-color: #434343; - color: rgba(255, 255, 255, 0.85); - } - - .modal-actions { - :deep(.ant-btn) { - &.ant-btn-default { - background: #262626; - border-color: #434343; - color: rgba(255, 255, 255, 0.85); - - &:hover { - border-color: var(--main-500); - color: var(--main-400); - } - } - - &.ant-btn-primary { - background: var(--main-500); - - &:hover { - background: var(--main-500); - } - } - } - } - } - } - } -} diff --git a/web/src/components/AgentMessageComponent.vue b/web/src/components/AgentMessageComponent.vue index 42adc209f..d74f6df2b 100644 --- a/web/src/components/AgentMessageComponent.vue +++ b/web/src/components/AgentMessageComponent.vue @@ -247,7 +247,7 @@ const toggleToolCall = (toolCallId) => { font-size: 15px; line-height: 24px; box-sizing: border-box; - color: black; + color: var(--gray-10000); max-width: 100%; position: relative; letter-spacing: .25px; diff --git a/web/src/components/AttachmentStatusIndicator.vue b/web/src/components/AttachmentStatusIndicator.vue index f165eca4f..50da13573 100644 --- a/web/src/components/AttachmentStatusIndicator.vue +++ b/web/src/components/AttachmentStatusIndicator.vue @@ -159,7 +159,7 @@ const handleRemoveAttachment = (fileId) => { top: -4px; right: -4px; background-color: var(--main-500); - color: white; + color: var(--gray-0); border-radius: 10px; width: 18px; height: 18px; @@ -168,7 +168,7 @@ const handleRemoveAttachment = (fileId) => { align-items: center; justify-content: center; font-weight: 600; - border: 2px solid white; + border: 2px solid var(--gray-0); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } } diff --git a/web/src/components/DebugComponent.vue b/web/src/components/DebugComponent.vue index 32a3d364a..a4a2d0c14 100644 --- a/web/src/components/DebugComponent.vue +++ b/web/src/components/DebugComponent.vue @@ -471,7 +471,7 @@ const printAgentConfig = async () => { - - diff --git a/web/src/components/RefsSidebar.vue b/web/src/components/RefsSidebar.vue deleted file mode 100644 index 4753bebac..000000000 --- a/web/src/components/RefsSidebar.vue +++ /dev/null @@ -1,624 +0,0 @@ - - - - - diff --git a/web/src/components/SearchConfigTab.vue b/web/src/components/SearchConfigTab.vue index af15ce036..3d67047a9 100644 --- a/web/src/components/SearchConfigTab.vue +++ b/web/src/components/SearchConfigTab.vue @@ -173,7 +173,7 @@ onMounted(() => { height: 100%; display: flex; flex-direction: column; - background: #fff; + background: var(--gray-0); } .config-header { diff --git a/web/src/components/StatusBar.vue b/web/src/components/StatusBar.vue index b39dbf3f4..c2eb9b33e 100644 --- a/web/src/components/StatusBar.vue +++ b/web/src/components/StatusBar.vue @@ -121,7 +121,7 @@ onUnmounted(() => { \ No newline at end of file diff --git a/web/src/components/UserManagementComponent.vue b/web/src/components/UserManagementComponent.vue index adc9af3dd..681bd488e 100644 --- a/web/src/components/UserManagementComponent.vue +++ b/web/src/components/UserManagementComponent.vue @@ -670,7 +670,7 @@ onMounted(() => { .user-modal { :deep(.ant-modal-header) { padding: 20px 24px; - border-bottom: 1px solid #f0f0f0; + border-bottom: 1px solid var(--gray-800); .ant-modal-title { font-size: 16px; diff --git a/web/src/components/dashboard/AgentStatsComponent.vue b/web/src/components/dashboard/AgentStatsComponent.vue index faf48986f..17080cc45 100644 --- a/web/src/components/dashboard/AgentStatsComponent.vue +++ b/web/src/components/dashboard/AgentStatsComponent.vue @@ -240,7 +240,7 @@ const initConversationToolChart = () => { }, splitLine: { lineStyle: { - color: '#f0f0f0' + color: 'var(--gray-150)' } } }, @@ -354,16 +354,4 @@ defineExpose({ transition: all 0.3s ease; } -// 深色模式适配 -:root.dark { - .top-performers, .metrics-comparison { - h4 { - color: rgba(255, 255, 255, 0.85); - } - - h5 { - color: rgba(255, 255, 255, 0.65); - } - } -} \ No newline at end of file diff --git a/web/src/components/dashboard/CallStatsComponent.vue b/web/src/components/dashboard/CallStatsComponent.vue index d0542977f..736ff6896 100644 --- a/web/src/components/dashboard/CallStatsComponent.vue +++ b/web/src/components/dashboard/CallStatsComponent.vue @@ -355,7 +355,7 @@ onUnmounted(() => { .simple-toggle.active { background-color: #3996ae; - color: white; + color: var(--gray-0); } .divider { diff --git a/web/src/components/dashboard/FeedbackModalComponent.vue b/web/src/components/dashboard/FeedbackModalComponent.vue index c8b295340..9040b95e2 100644 --- a/web/src/components/dashboard/FeedbackModalComponent.vue +++ b/web/src/components/dashboard/FeedbackModalComponent.vue @@ -198,7 +198,7 @@ watch(() => props.agentId, () => { // 反馈卡片 - 紧凑设计 .feedback-card { - background: white; + background: var(--gray-0); border: 1px solid var(--gray-100); border-radius: 8px; transition: all 0.2s ease; @@ -218,7 +218,7 @@ watch(() => props.agentId, () => { align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--gray-100); - background: #fafafa; + background: var(--gray-25); border-radius: 8px 8px 0 0; } @@ -318,7 +318,7 @@ watch(() => props.agentId, () => { .card-footer { padding: 8px 16px; border-top: 1px solid var(--gray-100); - background: #fafafa; + background: var(--gray-25); border-radius: 0 0 8px 8px; } @@ -339,72 +339,6 @@ watch(() => props.agentId, () => { } -// 深色模式适配 -:root.dark { - .feedback-cards-container { - &::-webkit-scrollbar-track { - background: #262626; - } - - &::-webkit-scrollbar-thumb { - background: #434343; - - &:hover { - background: #595959; - } - } - } - - .feedback-card { - background: #1f1f1f; - border-color: #434343; - - &:hover { - border-color: var(--main-500); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); - } - } - - .card-header { - background: #262626; - border-bottom-color: #434343; - } - - .user-details .username { - color: rgba(255, 255, 255, 0.85); - } - - .message-content { - background: #262626; - color: rgba(255, 255, 255, 0.85); - } - - .info-item { - .label { - color: rgba(255, 255, 255, 0.65); - } - - .value { - color: rgba(255, 255, 255, 0.85); - } - } - - .reason-content { - background: rgba(250, 173, 20, 0.15); - border-left-color: #faad14; - color: rgba(255, 255, 255, 0.85); - } - - .card-footer { - background: #262626; - border-top-color: #434343; - } - - .time-info { - color: rgba(255, 255, 255, 0.65); - } -} - // 响应式设计 @media (max-width: 768px) { .feedback-cards-container { diff --git a/web/src/components/dashboard/ToolStatsComponent.vue b/web/src/components/dashboard/ToolStatsComponent.vue index 813ba5175..f645201f8 100644 --- a/web/src/components/dashboard/ToolStatsComponent.vue +++ b/web/src/components/dashboard/ToolStatsComponent.vue @@ -168,7 +168,7 @@ const initToolsChart = () => { }, splitLine: { lineStyle: { - color: '#f0f0f0' + color: 'var(--gray-150)' } } }, diff --git a/web/src/components/dashboard/UserStatsComponent.vue b/web/src/components/dashboard/UserStatsComponent.vue index 58ec0129e..7edfe390a 100644 --- a/web/src/components/dashboard/UserStatsComponent.vue +++ b/web/src/components/dashboard/UserStatsComponent.vue @@ -96,7 +96,7 @@ const initActivityChart = () => { }, splitLine: { lineStyle: { - color: '#f0f0f0' + color: 'var(--gray-150)' } } }, diff --git a/web/src/layouts/AppLayout.vue b/web/src/layouts/AppLayout.vue index 6dd024ff1..46cde3b67 100644 --- a/web/src/layouts/AppLayout.vue +++ b/web/src/layouts/AppLayout.vue @@ -3,25 +3,25 @@ import { ref, reactive, onMounted, useTemplateRef, computed } from 'vue' import { RouterLink, RouterView, useRoute } from 'vue-router' import { GithubOutlined, - ExclamationCircleOutlined, } from '@ant-design/icons-vue' -import { Bot, Waypoints, LibraryBig, Settings, BarChart3, BookOpen, CircleCheck } from 'lucide-vue-next'; +import { Bot, Waypoints, LibraryBig, Settings, BarChart3, BookOpen, CircleCheck, Sun, Moon } from 'lucide-vue-next'; import { onLongPress } from '@vueuse/core' import { useConfigStore } from '@/stores/config' import { useDatabaseStore } from '@/stores/database' import { useInfoStore } from '@/stores/info' import { useTaskerStore } from '@/stores/tasker' +import { useThemeStore } from '@/stores/theme' import { storeToRefs } from 'pinia' import UserInfoComponent from '@/components/UserInfoComponent.vue' import DebugComponent from '@/components/DebugComponent.vue' import TaskCenterDrawer from '@/components/TaskCenterDrawer.vue' -import ThemeToggle from '@/components/ThemeToggle.vue' const configStore = useConfigStore() const databaseStore = useDatabaseStore() const infoStore = useInfoStore() const taskerStore = useTaskerStore() +const themeStore = useThemeStore() const { activeCount: activeCountRef, isDrawerOpen } = storeToRefs(taskerStore) const layoutSettings = reactive({ @@ -190,16 +190,22 @@ const mainList = [{ - + -
- +
+ + +
+ +
+
- @@ -329,7 +335,7 @@ div.header, #app-router-view { text-decoration: none; font-size: 24px; font-weight: bold; - color: #333; + color: var(--gray-900); } } @@ -359,13 +365,13 @@ div.header, #app-router-view { } &.active { - background-color: var(--gray-150); + background-color: var(--gray-100); font-weight: bold; color: var(--main-color); } &.warning { - color: red; + color: var(--color-error); } &:hover { @@ -394,7 +400,7 @@ div.header, #app-router-view { margin-top: 4px; .star-icon { - color: #f0a742; + color: var(--color-warning); font-size: 12px; margin-right: 2px; } @@ -426,6 +432,23 @@ div.header, #app-router-view { } } + &.theme-toggle-nav { + .theme-toggle-icon { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + cursor: pointer; + color: var(--gray-1000); + transition: color 0.2s ease-in-out; + + &:hover { + color: var(--main-color); + } + } + } + &.setting { margin: 8px 0; @@ -471,7 +494,7 @@ div.header, #app-router-view { transition: color 0.1s ease-in-out, font-size 0.1s ease-in-out; &.active { - color: black; + color: var(--gray-10000); font-size: 1.1rem; } } @@ -572,12 +595,35 @@ div.header, #app-router-view { margin-left: 6px; .star-icon { - color: #f0a742; + color: var(--color-warning); font-size: 14px; margin-right: 2px; } } } + + &.theme-toggle-nav { + padding: 8px 12px; + + .theme-toggle-icon { + display: flex; + align-items: center; + justify-content: center; + color: var(--gray-1000); + transition: color 0.2s ease-in-out; + cursor: pointer; + + &:hover { + color: var(--main-color); + } + } + + &.active { + .theme-toggle-icon { + color: var(--main-color); + } + } + } } } diff --git a/web/src/views/AgentSingleView.vue b/web/src/views/AgentSingleView.vue index 221de8868..3a6bb4731 100644 --- a/web/src/views/AgentSingleView.vue +++ b/web/src/views/AgentSingleView.vue @@ -113,7 +113,7 @@ const handleShareChat = async () => { transform: translateY(-50%); width: 30px; height: 30px; - background-color: #fff; + background-color: var(--gray-0); border-radius: 50%; display: flex; align-items: center; diff --git a/web/src/views/AgentView.vue b/web/src/views/AgentView.vue index 47368db74..3cf2f2078 100644 --- a/web/src/views/AgentView.vue +++ b/web/src/views/AgentView.vue @@ -387,7 +387,7 @@ const handlePreview = () => { } .action-button { - background-color: white; + background-color: var(--gray-0); border: 1px solid var(--main-20); text-align: left; height: auto; @@ -436,7 +436,7 @@ const handlePreview = () => { } .default-icon { - color: #faad14; + color: var(--color-warning); font-size: 14px; margin-left: 4px; } @@ -469,7 +469,7 @@ const handlePreview = () => { .select-tools-btn { background: var(--main-color); border: none; - color: #fff; + color: var(--gray-0); border-radius: 6px; padding: 4px 12px; font-size: 13px; @@ -525,7 +525,7 @@ const handlePreview = () => { overflow: hidden; } :deep(.ant-modal-header) { - background: #fff; + background: var(--gray-0); border-bottom: 1px solid var(--gray-200); padding: 16px 20px; .ant-modal-title { @@ -536,7 +536,7 @@ const handlePreview = () => { } :deep(.ant-modal-body) { padding: 20px; - background: #fff; + background: var(--gray-0); } .tools-modal-content { .tools-search { @@ -558,7 +558,7 @@ const handlePreview = () => { border: 1px solid var(--gray-200); border-radius: 8px; margin-bottom: 16px; - background: #fff; + background: var(--gray-0); .tool-item { padding: 14px 16px; border-bottom: 1px solid var(--gray-100); @@ -626,7 +626,7 @@ const handlePreview = () => { &.ant-btn-default { border: 1px solid var(--gray-300); color: var(--gray-900); - background: #fff; + background: var(--gray-0); &:hover { border-color: var(--main-color); color: var(--main-color); @@ -636,7 +636,7 @@ const handlePreview = () => { &.ant-btn-primary { background: var(--main-color); border: none; - color: #fff; + color: var(--gray-0); &:hover { background: var(--main-color); } @@ -671,7 +671,7 @@ const handlePreview = () => { padding: 8px 12px; cursor: pointer; transition: all 0.2s ease; - background: white; + background: var(--gray-0); user-select: none; &:hover { @@ -737,53 +737,13 @@ const handlePreview = () => { } } -// 深色模式适配 - 多选卡片 -:root.dark { - .multi-select-cards { - .multi-select-label { - color: rgba(255, 255, 255, 0.65); - } - - .option-card { - background: #262626; - border-color: #434343; - - &:hover { - border-color: var(--main-500); - } - - &.selected { - border-color: var(--main-500); - background: rgba(74, 159, 184, 0.15); - - .option-indicator { - color: var(--main-400); - } - - .option-text { - color: var(--main-400); - } - } - - &.unselected { - .option-indicator { - color: rgba(255, 255, 255, 0.45); - } - - .option-text { - color: rgba(255, 255, 255, 0.65); - } - } - } - } -} // 智能体选择器样式 .agent-selector { border: 1px solid var(--gray-300); border-radius: 8px; padding: 8px 12px; - background: white; + background: var(--gray-0); transition: border-color 0.2s ease; &:hover { @@ -802,7 +762,7 @@ const handlePreview = () => { } .default-icon { - color: #faad14; + color: var(--color-warning); font-size: 14px; } } @@ -816,7 +776,7 @@ const handlePreview = () => { } :deep(.ant-modal-header) { - background: #fff; + background: var(--gray-0); border-bottom: 1px solid var(--gray-200); padding: 16px 20px; @@ -829,7 +789,7 @@ const handlePreview = () => { :deep(.ant-modal-body) { padding: 20px; - background: #fff; + background: var(--gray-0); } .agent-modal-content { @@ -847,7 +807,7 @@ const handlePreview = () => { padding: 16px; cursor: pointer; transition: border-color 0.2s ease; - background: white; + background: var(--gray-0); &:hover { border-color: var(--main-color); @@ -873,7 +833,7 @@ const handlePreview = () => { } .default-icon { - color: #faad14; + color: var(--color-warning); font-size: 16px; flex-shrink: 0; } @@ -921,76 +881,11 @@ const handlePreview = () => { } } -// 深色模式适配 - 智能体选择器和模态框 -:root.dark { - .agent-selector { - background: #1f1f1f; - border-color: #434343; - - &:hover { - border-color: var(--main-500); - } - - .selected-agent-display { - .agent-name { - color: rgba(255, 255, 255, 0.85); - } - } - } - - .agent-modal { - :deep(.ant-modal-header) { - background: #1f1f1f; - border-bottom-color: #434343; - - .ant-modal-title { - color: rgba(255, 255, 255, 0.85); - } - } - - :deep(.ant-modal-body) { - background: #1f1f1f; - } - - .agent-modal-content { - .agent-card { - background: #262626; - border-color: #434343; - - &:hover { - border-color: var(--main-500); - } - - .agent-card-header .agent-card-title .agent-card-name { - color: rgba(255, 255, 255, 0.85); - } - - .agent-card-description { - color: rgba(255, 255, 255, 0.65); - } - - &.selected { - border-color: var(--main-500); - background: rgba(74, 159, 184, 0.15); - - .agent-card-header .agent-card-title .agent-card-name { - color: var(--main-400); - } - - .agent-card-description { - color: rgba(255, 255, 255, 0.85); - } - } - } - } - } -} - // 自定义更多菜单样式 .more-popup-menu { position: fixed; min-width: 130px; - background: white; + background: var(--gray-0); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04); border: 1px solid var(--gray-100); @@ -1043,32 +938,6 @@ const handlePreview = () => { } } -// 深色模式适配 -:root.dark .more-popup-menu { - background: #1f1f1f; - border-color: #434343; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2); - - .menu-item { - color: rgba(255, 255, 255, 0.85); - - .menu-icon { - color: rgba(255, 255, 255, 0.65); - } - - &:hover { - background: #262626; - } - - &:active { - background: #303030; - } - } - - .menu-divider { - background: #434343; - } -} // 菜单淡入淡出动画 .menu-fade-enter-active { diff --git a/web/src/views/DashboardView.vue b/web/src/views/DashboardView.vue index df06b0ddd..9c852424d 100644 --- a/web/src/views/DashboardView.vue +++ b/web/src/views/DashboardView.vue @@ -696,88 +696,4 @@ onUnmounted(() => { } } } - -// 深色模式适配 -:root.dark { - .dashboard-container { - background-color: #141414; - } - - .conversations-section, - .call-stats-section { - background-color: #1f1f1f; - border-color: #434343; - - &:hover { - background-color: #1f1f1f; - border-color: #595959; - } - - :deep(.ant-card-head) { - background-color: #1f1f1f; - border-bottom-color: #434343; - - .ant-card-head-title { - color: rgba(255, 255, 255, 0.85); - } - } - - :deep(.ant-card-body) { - background-color: #1f1f1f; - } - } - - .conversations-section { - .conversation-title { - color: var(--main-400); - - &:hover { - color: var(--main-500); - } - } - - .time-text { - color: rgba(255, 255, 255, 0.65); - } - } - - .call-stats-section { - .call-stats-container { - .call-summary { - .summary-card { - background: linear-gradient(135deg, #262626 0%, #2a2a2a 100%); - border-color: #434343; - - .summary-value { - color: rgba(255, 255, 255, 0.85); - } - - .summary-label { - color: rgba(255, 255, 255, 0.65); - } - } - } - } - } - - .placeholder-content { - color: rgba(255, 255, 255, 0.65); - - .placeholder-icon { - background-color: #262626; - - .icon { - color: rgba(255, 255, 255, 0.45); - } - } - - .placeholder-text { - color: rgba(255, 255, 255, 0.85); - } - - .placeholder-subtitle { - color: rgba(255, 255, 255, 0.65); - } - } -} diff --git a/web/src/views/DataBaseInfoView.vue b/web/src/views/DataBaseInfoView.vue index 957ccd145..6fcb63e34 100644 --- a/web/src/views/DataBaseInfoView.vue +++ b/web/src/views/DataBaseInfoView.vue @@ -155,7 +155,7 @@ const resetFileSelectionState = () => { watch(() => route.params.database_id, async (newId, oldId) => { // 切换知识库时，标记为初次加载 isInitialLoad.value = true; - + store.databaseId = newId; resetFileSelectionState(); resetGraphStats(); @@ -173,22 +173,22 @@ watch( () => database.value?.files, (newFiles, oldFiles) => { if (!newFiles) return; - + const newFileCount = Object.keys(newFiles).length; const oldFileCount = previousFileCount.value; - + // 首次加载时，只更新计数，不触发任何操作 if (isInitialLoad.value) { previousFileCount.value = newFileCount; isInitialLoad.value = false; return; } - + // 如果文件数量发生变化（增加或减少），都重新生成问题和思维导图 if (newFileCount !== oldFileCount) { const changeType = newFileCount > oldFileCount ? '增加' : '减少'; console.log(`文件数量从 ${oldFileCount} ${changeType}到 ${newFileCount}，准备重新生成问题和思维导图`); - + // 只要有文件，就重新生成思维导图（无论增加还是减少） if (newFileCount > 0) { setTimeout(() => { @@ -208,7 +208,7 @@ watch( // 如果文件数量变为0，清空思维导图（如果需要的话） console.log('文件数量为0，思维导图将自动清空'); } - + // 只要有文件，就重新生成问题（无论之前是否有问题） if (newFileCount > 0) { setTimeout(async () => { @@ -238,7 +238,7 @@ watch( }, 1000); } } - + previousFileCount.value = newFileCount; }, { deep: true } @@ -332,11 +332,11 @@ const handleMouseUp = () => { .unified-layout { display: flex; height: 100vh; + background-color: var(--gray-0); gap: 0; .left-panel, .right-panel { - background-color: #fff; display: flex; flex-direction: column; overflow: hidden; @@ -347,7 +347,6 @@ const handleMouseUp = () => { display: flex; flex-shrink: 0; flex-grow: 1; - background-color: var(--gray-0); padding-right: 0; // max-height: calc(100% - 16px); } @@ -395,15 +394,11 @@ const handleMouseUp = () => { :deep(.ant-tabs-nav) { margin-bottom: 0; - // background-color: #fff; + // background-color: var(--gray-0); border-bottom: 1px solid var(--gray-200); } } -/* Simplify resize handle */ -.resize-handle { - opacity: 0.8; -} /* Responsive design for smaller screens */ @media (max-width: 768px) { @@ -484,8 +479,8 @@ const handleMouseUp = () => { justify-content: space-between; align-items: center; padding: 8px 12px; - border-bottom: 1px solid #f0f0f0; - background-color: #fafafa; + border-bottom: 1px solid var(--gray-150); + background-color: var(--gray-25); .header-left { display: flex; diff --git a/web/src/views/DataBaseView.vue b/web/src/views/DataBaseView.vue index dd7ffdd89..15d91037c 100644 --- a/web/src/views/DataBaseView.vue +++ b/web/src/views/DataBaseView.vue @@ -604,7 +604,7 @@ onMounted(() => { border-radius: 12px; padding: 16px; margin-top: 16px; - background: #fafafa; + background: var(--gray-25); .reranker-row { display: flex; @@ -670,12 +670,12 @@ onMounted(() => { } .kb-type-card { - border: 2px solid #f0f0f0; + border: 2px solid var(--gray-150); border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.3s ease; - background: white; + background: var(--gray-0); position: relative; overflow: hidden; @@ -804,9 +804,9 @@ onMounted(() => { .chunk-config { margin-top: 16px; padding: 12px 16px; - background-color: #fafafa; + background-color: var(--gray-25); border-radius: 6px; - border: 1px solid #f0f0f0; + border: 1px solid var(--gray-150); h3 { margin-top: 0; @@ -871,11 +871,9 @@ onMounted(() => { } .database, .graphbase { - background: linear-gradient(145deg, #ffffff 0%, #fafbfc 100%); - box-shadow: - 0px 1px 2px 0px rgba(16,24,40,.06), - inset 0px 1px 0px 0px rgba(255,255,255,.6); - border: 1px solid rgba(233, 236, 239, 0.6); + background: linear-gradient(145deg, var(--gray-0) 0%, var(--gray-10) 100%); + box-shadow: 0px 1px 2px 0px var(--shadow-2); + border: 1px solid var(--gray-100); transition: none; position: relative; } @@ -896,16 +894,16 @@ onMounted(() => { top: 20px; right: 20px; color: var(--gray-600); - background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,250,252,0.9) 100%); + background: linear-gradient(135deg, var(--gray-0) 0%, var(--gray-100) 100%); font-size: 12px; border-radius: 8px; padding: 6px; z-index: 2; - box-shadow: 0px 2px 4px rgba(0,0,0,0.1); - border: 1px solid rgba(229, 231, 235, 0.5); + box-shadow: 0px 2px 4px var(--shadow-2); + border: 1px solid var(--gray-100); } - + .top { display: flex; align-items: center; @@ -922,7 +920,7 @@ onMounted(() => { align-items: center; background: var(--main-30); border-radius: 12px; - border: 1px solid rgba(1, 97, 121, 0.05); + border: 1px solid var(--shadow-2); color: var(--main-color); position: relative; } @@ -930,7 +928,7 @@ onMounted(() => { .info { h3, p { margin: 0; - color: black; + color: var(--gray-10000); } h3 { diff --git a/web/src/views/GraphView.vue b/web/src/views/GraphView.vue index 8960649f1..94a1d266c 100644 --- a/web/src/views/GraphView.vue +++ b/web/src/views/GraphView.vue @@ -354,18 +354,13 @@ const openLink = (url) => { .graph-container { padding: 0; - background-color: #ffffff; + background-color: var(--gray-0); .header-container { height: @graph-header-height; } } -/* 深色模式下，强制知识图谱页面保持白色背景 */ -:root.dark .graph-container { - background-color: #ffffff !important; -} - .status-wrapper { display: flex; align-items: center; @@ -443,53 +438,6 @@ const openLink = (url) => { } } -/* 深色模式下，强制知识图谱页面保持白色背景和深色文字 */ -:root.dark .container-outter { - background: #ffffff !important; - color: rgba(0, 0, 0, 0.85) !important; -} - -:root.dark .container-outter .actions, -:root.dark .container-outter .footer { - color: rgba(0, 0, 0, 0.85) !important; -} - -:root.dark .container-outter .status-text { - color: rgba(0, 0, 0, 0.65) !important; -} - -/* 深色模式下，底部标签使用深色主题样式 */ -:root.dark .footer .tags :deep(.ant-tag) { - background-color: rgba(31, 41, 55, 0.9) !important; /* 深色底 */ - border-color: rgba(148, 163, 184, 0.3) !important; /* 灰色边框 */ - color: rgba(248, 250, 252, 0.95) !important; /* 浅色文字 */ -} - -/* 深色模式下，标签的不同颜色类型 */ -:root.dark .footer .tags :deep(.ant-tag-blue) { - background-color: rgba(37, 99, 235, 0.2) !important; - border-color: rgba(96, 165, 250, 0.4) !important; - color: rgba(147, 197, 253, 1) !important; -} - -:root.dark .footer .tags :deep(.ant-tag-success) { - background-color: rgba(34, 197, 94, 0.2) !important; - border-color: rgba(74, 222, 128, 0.4) !important; - color: rgba(134, 239, 172, 1) !important; -} - -:root.dark .footer .tags :deep(.ant-tag-purple) { - background-color: rgba(168, 85, 247, 0.2) !important; - border-color: rgba(192, 132, 252, 0.4) !important; - color: rgba(216, 180, 254, 1) !important; -} - -:root.dark .footer .tags :deep(.ant-tag-warning) { - background-color: rgba(245, 158, 11, 0.2) !important; - border-color: rgba(251, 191, 36, 0.4) !important; - color: rgba(253, 224, 71, 1) !important; -} - .actions { top: 0; diff --git a/web/src/views/HomeView.vue b/web/src/views/HomeView.vue index 9f090f4b9..ac8ee4c7a 100644 --- a/web/src/views/HomeView.vue +++ b/web/src/views/HomeView.vue @@ -232,7 +232,7 @@ const actionLinks = computed(() => { align-items: center; width: 100%; padding: 0.75rem 2.5rem; - background-color: rgba(255, 255, 255, 0.85); + background-color: var(--color-trans-light); backdrop-filter: blur(20px); // border-bottom: 1px solid var(--main-30); position: fixed; @@ -255,7 +255,7 @@ const actionLinks = computed(() => { gap: 0.5rem; padding: 0.6rem 1rem; text-decoration: none; - color: #555; + color: var(--gray-800); font-weight: 500; font-size: 0.95rem; transition: color 0.2s ease; @@ -263,7 +263,9 @@ const actionLinks = computed(() => { overflow: hidden; &:hover { - color: #333; + color: var(--gray-900); + + svg { transform: scale(1.1); @@ -272,7 +274,7 @@ const actionLinks = computed(() => { &.router-link-active { background: linear-gradient(135deg, var(--main-600), var(--main-500)); - color: white; + color: var(--gray-0); border-radius: 1.5rem; &:hover { @@ -418,7 +420,7 @@ const actionLinks = computed(() => { .button-base.primary { background: linear-gradient(135deg, var(--main-600), var(--main-500)); - color: #fff; + color: var(--gray-0); border-color: transparent; &:hover { @@ -623,7 +625,7 @@ const actionLinks = computed(() => { transition: opacity 0.3s ease; .overlay-content { - color: white; + color: var(--gray-0); h3 { font-size: 1.5rem; diff --git a/web/src/views/LoginView.vue b/web/src/views/LoginView.vue index 1096ef08e..370a5336a 100644 --- a/web/src/views/LoginView.vue +++ b/web/src/views/LoginView.vue @@ -581,7 +581,7 @@ onUnmounted(() => { left: 0; right: 0; bottom: 0; - background: rgba(0, 0, 0, 0.35); + background: var(--shadow-2); display: flex; flex-direction: column; justify-content: space-between; @@ -590,14 +590,14 @@ onUnmounted(() => { .brand-info { text-align: left; - color: white; + color: var(--gray-0); max-width: 520px; .brand-title { font-size: 52px; font-weight: 700; margin-bottom: 20px; - text-shadow: 0 3px 6px rgba(0, 0, 0, 0.35); + text-shadow: 0 3px 6px var(--shadow-2); letter-spacing: -0.5px; } @@ -606,7 +606,7 @@ onUnmounted(() => { font-weight: 500; margin-bottom: 24px; opacity: 0.92; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.28); + text-shadow: 0 2px 4px var(--shadow-1); line-height: 1.4; } @@ -615,7 +615,7 @@ onUnmounted(() => { line-height: 1.6; margin: 0; opacity: 0.82; - text-shadow: 0 1px 3px rgba(0, 0, 0, 0.28); + text-shadow: 0 1px 3px var(--shadow-1); } } @@ -625,8 +625,8 @@ onUnmounted(() => { p { margin: 0; font-size: 14px; - color: rgba(255, 255, 255, 0.7); - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); + color: color-mix(in srgb, var(--gray-0) 70%, transparent); + text-shadow: 0 1px 2px var(--shadow-1); font-weight: 400; } } @@ -649,7 +649,7 @@ onUnmounted(() => { background: var(--gray-0); border-radius: 24px; border: 1px solid var(--gray-150); - box-shadow: 0 18px 36px rgba(66, 66, 66, 0.05); + box-shadow: 0 18px 36px var(--shadow-1); display: flex; flex-direction: column; gap: 32px; @@ -783,7 +783,7 @@ onUnmounted(() => { margin-top: 16px; padding: 10px 12px; background-color: var(--stats-error-bg); - border: 1px solid rgba(220, 38, 38, 0.25); + border: 1px solid color-mix(in srgb, var(--color-error) 25%, transparent); border-radius: 8px; color: var(--stats-error-color); font-size: 14px; @@ -874,10 +874,10 @@ onUnmounted(() => { left: 0; right: 0; padding: 12px 20px; - background: linear-gradient(135deg, #ff4d4f, #ff7875); - color: white; + background: linear-gradient(135deg, var(--color-error), var(--chart-error-light)); + color: var(--gray-0); z-index: 1000; - box-shadow: 0 2px 8px rgba(255, 77, 79, 0.3); + box-shadow: 0 2px 8px color-mix(in srgb, var(--color-error) 30%, transparent); .alert-content { display: flex; @@ -888,7 +888,7 @@ onUnmounted(() => { .alert-icon { font-size: 20px; margin-right: 12px; - color: white; + color: var(--gray-0); } .alert-text { @@ -907,12 +907,12 @@ onUnmounted(() => { } :deep(.ant-btn-link) { - color: white; - border-color: white; + color: var(--gray-0); + border-color: var(--gray-0); &:hover { - color: white; - background-color: rgba(255, 255, 255, 0.1); + color: var(--gray-0); + background-color: color-mix(in srgb, var(--gray-0) 10%, transparent); } } } diff --git a/web/src/views/SettingView.vue b/web/src/views/SettingView.vue index b2663d413..40f305d3c 100644 --- a/web/src/views/SettingView.vue +++ b/web/src/views/SettingView.vue @@ -446,7 +446,7 @@ const openLink = (url) => { padding: 12px 16px; border: 1px solid var(--gray-150); border-radius: 8px; - background: white; + background: var(--gray-0); transition: all 0.2s; min-height: 60px; From 2c0088e7e742f1b11e0fc9ff1e52464eb28e972d Mon Sep 17 00:00:00 2001 From: Wenjie Zhang Date: Wed, 19 Nov 2025 20:42:22 +0800 Subject: [PATCH 07/12] =?UTF-8?q?style:=20=E4=BD=BF=E7=94=A8CSS=E5=8F=98?= =?UTF-8?q?=E9=87=8F=E6=9B=BF=E6=8D=A2=E7=A1=AC=E7=BC=96=E7=A0=81=E9=A2=9C?= =?UTF-8?q?=E8=89=B2=E5=80=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/assets/css/App.vue | 25 ------------------- web/src/components/UserInfoComponent.vue | 10 ++++---- .../components/UserManagementComponent.vue | 4 +-- web/src/views/AgentSingleView.vue | 2 +- 4 files changed, 8 insertions(+), 33 deletions(-) delete mode 100644 web/src/assets/css/App.vue diff --git a/web/src/assets/css/App.vue b/web/src/assets/css/App.vue deleted file mode 100644 index a43e3d0fa..000000000 --- a/web/src/assets/css/App.vue +++ /dev/null @@ -1,25 +0,0 @@ - - diff --git a/web/src/components/UserInfoComponent.vue b/web/src/components/UserInfoComponent.vue index 1a5064b8e..91e956626 100644 --- a/web/src/components/UserInfoComponent.vue +++ b/web/src/components/UserInfoComponent.vue @@ -453,7 +453,7 @@ const handleAvatarChange = async (info) => { .ant-modal-title { font-size: 18px; font-weight: 600; - color: #262626; + color: var(--gray-900); } } @@ -488,7 +488,7 @@ const handleAvatarChange = async (info) => { width: 80px; height: 80px; border-radius: 50%; - background: #f5f5f5; + background: var(--gray-50); display: flex; margin: 0 auto; align-items: center; @@ -521,7 +521,7 @@ const handleAvatarChange = async (info) => { display: flex; align-items: center; padding: 12px 0; - border-bottom: 1px solid #f5f5f5; + border-bottom: 1px solid var(--gray-50); &:last-child { border-bottom: none; @@ -536,12 +536,12 @@ const handleAvatarChange = async (info) => { .info-value { flex: 1; - color: #262626; + color: var(--gray-900); font-size: 14px; &.user-id { font-family: 'Monaco', 'Consolas', monospace; - // background: #f5f5f5; + // background: var(--gray-50); // padding: 4px 8px; border-radius: 4px; display: inline-block; diff --git a/web/src/components/UserManagementComponent.vue b/web/src/components/UserManagementComponent.vue index 681bd488e..550be99d2 100644 --- a/web/src/components/UserManagementComponent.vue +++ b/web/src/components/UserManagementComponent.vue @@ -675,7 +675,7 @@ onMounted(() => { .ant-modal-title { font-size: 16px; font-weight: 600; - color: #262626; + color: var(--gray-900); } } @@ -692,7 +692,7 @@ onMounted(() => { label { font-weight: 500; - color: #262626; + color: var(--gray-900); } } } diff --git a/web/src/views/AgentSingleView.vue b/web/src/views/AgentSingleView.vue index 3a6bb4731..f048335bd 100644 --- a/web/src/views/AgentSingleView.vue +++ b/web/src/views/AgentSingleView.vue @@ -80,7 +80,7 @@ const handleShareChat = async () => { top: 0; height: 100%; width: 240px; - background-color: #f5f5f5; + background-color: var(--gray-50); transition: all 0.3s ease; z-index: 20; display: flex; From 1822db61e45ca6377a8f4752beb521b004a7d81d Mon Sep 17 00:00:00 2001 From: Wenjie Zhang Date: Sat, 22 Nov 2025 15:15:41 +0800 Subject: [PATCH 08/12] =?UTF-8?q?refactor(theme):=20=E9=87=8D=E6=9E=84?= =?UTF-8?q?=E4=B8=BB=E9=A2=98=E7=B3=BB=E7=BB=9F=EF=BC=8C=E7=BB=9F=E4=B8=80?= =?UTF-8?q?=E4=BD=BF=E7=94=A8CSS=E5=8F=98=E9=87=8F=E5=B9=B6=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E6=9A=97=E8=89=B2=E6=A8=A1=E5=BC=8F=E5=AE=9E=E7=8E=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 移除冗余的theme.js配置文件，将主题配置集中到theme store - 使用ant-design-vue的darkAlgorithm实现暗色模式 - 在多个组件中替换硬编码颜色值为CSS变量 - 优化用户信息组件，整合文档中心和主题切换功能 - 更新基础CSS样式，完善颜色系统和滚动条样式 --- web/pnpm-lock.yaml | 270 +++++++++++++++++- web/src/App.vue | 4 +- web/src/assets/css/base.css | 71 ++++- web/src/assets/theme.js | 14 - web/src/components/AgentMessageComponent.vue | 24 +- web/src/components/MarkdownContentViewer.vue | 15 +- web/src/components/MessageInputComponent.vue | 12 +- web/src/components/QuerySection.vue | 10 +- web/src/components/TaskCenterDrawer.vue | 40 +-- web/src/components/UserInfoComponent.vue | 125 +++++--- .../dashboard/FeedbackModalComponent.vue | 6 +- web/src/layouts/AppLayout.vue | 37 +-- web/src/stores/theme.js | 41 +-- web/src/views/AgentView.vue | 5 +- web/src/views/DataBaseView.vue | 36 +-- web/src/views/GraphView.vue | 8 +- web/src/views/LoginView.vue | 12 +- web/src/views/SettingView.vue | 10 +- 18 files changed, 518 insertions(+), 222 deletions(-) delete mode 100644 web/src/assets/theme.js diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml index 3708cb298..0d26237df 100644 --- a/web/pnpm-lock.yaml +++ b/web/pnpm-lock.yaml @@ -59,6 +59,12 @@ importers: marked-highlight: specifier: ^2.2.2 version: 2.2.2(marked@16.3.0) + markmap-lib: + specifier: ^0.18.12 + version: 0.18.12(markmap-common@0.18.9) + markmap-view: + specifier: ^0.18.12 + version: 0.18.12(markmap-common@0.18.9) md-editor-v3: specifier: ^5.8.4 version: 5.8.5(vue@3.5.21) @@ -80,7 +86,7 @@ importers: version: 1.12.0 '@vitejs/plugin-vue': specifier: ^6.0.1 - version: 6.0.1(vite@7.1.5(@types/node@24.5.2)(less@4.4.1)(terser@5.44.0))(vue@3.5.21) + version: 6.0.1(vite@7.1.5(@types/node@24.5.2)(less@4.4.1)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.21) '@vue/eslint-config-prettier': specifier: ^10.2.0 version: 10.2.0(@types/eslint@9.6.1)(eslint@9.36.0)(prettier@3.6.2) @@ -95,7 +101,7 @@ importers: version: 3.6.2 vite: specifier: ^7.1.5 - version: 7.1.5(@types/node@24.5.2)(less@4.4.1)(terser@5.44.0) + version: 7.1.5(@types/node@24.5.2)(less@4.4.1)(terser@5.44.0)(yaml@2.8.1) vue-eslint-parser: specifier: ^10.2.0 version: 10.2.0(eslint@9.36.0) @@ -506,6 +512,9 @@ packages: resolution: {integrity: sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + '@gera2ld/jsx-dom@2.2.2': + resolution: {integrity: sha512-EOqf31IATRE6zS1W1EoWmXZhGfLAoO9FIlwTtHduSrBdud4npYBxYAkv8dZ5hudDPwJeeSjn40kbCL4wAzr8dA==} + '@humanfs/core@0.19.1': resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==} engines: {node: '>=18.18.0'} @@ -834,6 +843,9 @@ packages: vite: ^5.0.0 || ^6.0.0 || ^7.0.0 vue: ^3.2.25 + '@vscode/markdown-it-katex@1.1.2': + resolution: {integrity: sha512-+4IIv5PgrmhKvW/3LpkpkGg257OViEhXkOOgCyj5KMsjsOfnRXkni8XAuuF9Ui5p3B8WnUovlDXAQNb8RJ/RaQ==} + '@vue/compiler-core@3.5.21': resolution: {integrity: sha512-8i+LZ0vf6ZgII5Z9XmUvrCyEzocvWT+TeR2VBUVlzIH6Tyv57E20mPZ1bCS+tbejgUgmjrEh7q/0F0bibskAmw==} @@ -1037,6 +1049,13 @@ packages: resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==} engines: {node: '>=10'} + cheerio-select@2.1.0: + resolution: {integrity: sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==} + + cheerio@1.0.0: + resolution: {integrity: sha512-quS9HgjQpdaXOvsZz82Oz7uxtXiy6UIsIQcpBj7HRw2M63Skasm9qlDocAM7jNuaxdhpPU7c4kJN+gA5MCu4ww==} + engines: {node: '>=18.17'} + chrome-trace-event@1.0.4: resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==} engines: {node: '>=6.0'} @@ -1067,6 +1086,10 @@ packages: resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==} engines: {node: '>= 10'} + commander@8.3.0: + resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==} + engines: {node: '>= 12'} + compute-scroll-into-view@1.0.20: resolution: {integrity: sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==} @@ -1090,6 +1113,13 @@ packages: resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==} engines: {node: '>= 8'} + css-select@5.2.2: + resolution: {integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==} + + css-what@6.2.2: + resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==} + engines: {node: '>= 6'} + cssesc@3.0.0: resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} engines: {node: '>=4'} @@ -1273,6 +1303,19 @@ packages: dom-scroll-into-view@2.0.1: resolution: {integrity: sha512-bvVTQe1lfaUr1oFzZX80ce9KLDlZ3iU+XGNE/bz9HnGdklTieqsbmsLHe+rT2XWqopvL0PckkYqN7ksmm5pe3w==} + dom-serializer@2.0.0: + resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==} + + domelementtype@2.3.0: + resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==} + + domhandler@5.0.3: + resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==} + engines: {node: '>= 4'} + + domutils@3.2.2: + resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==} + echarts-gl@2.0.9: resolution: {integrity: sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==} peerDependencies: @@ -1288,6 +1331,9 @@ packages: resolution: {integrity: sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==} engines: {node: '>= 4'} + encoding-sniffer@0.2.1: + resolution: {integrity: sha512-5gvq20T6vfpekVtqrYQsSCFZ1wEg5+wW0/QaZMWkFr6BqD3NfKs0rLCx4rrVlSWJeZb5NBJgVLswK/w2MWU+Gw==} + enhanced-resolve@5.18.3: resolution: {integrity: sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==} engines: {node: '>=10.13.0'} @@ -1296,6 +1342,10 @@ packages: resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==} engines: {node: '>=0.12'} + entities@6.0.1: + resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==} + engines: {node: '>=0.12'} + errno@0.1.8: resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==} hasBin: true @@ -1521,6 +1571,9 @@ packages: hookable@5.5.3: resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==} + htmlparser2@9.1.0: + resolution: {integrity: sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==} + iconv-lite@0.6.3: resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==} engines: {node: '>=0.10.0'} @@ -1605,6 +1658,10 @@ packages: engines: {node: '>=6'} hasBin: true + katex@0.16.25: + resolution: {integrity: sha512-woHRUZ/iF23GBP1dkDQMh1QBad9dmr8/PAwNA54VrSOVYgI12MAcE14TqnDdQOdzyEonGzMepYnqBMYdsoAr8Q==} + hasBin: true + keyv@4.5.4: resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==} @@ -1672,6 +1729,12 @@ packages: peerDependencies: markdown-it: '*' + markdown-it-ins@4.0.0: + resolution: {integrity: sha512-sWbjK2DprrkINE4oYDhHdCijGT+MIDhEupjSHLXe5UXeVr5qmVxs/nTUVtgi0Oh/qtF+QKV0tNWDhQBEPxiMew==} + + markdown-it-mark@4.0.0: + resolution: {integrity: sha512-YLhzaOsU9THO/cal0lUjfMjrqSMPjjyjChYM7oyj4DnyaXEzA8gnW6cVJeyCrCVeyesrY2PlEdUYJSPFYL4Nkg==} + markdown-it-sub@2.0.0: resolution: {integrity: sha512-iCBKgwCkfQBRg2vApy9vx1C1Tu6D8XYo8NvevI3OlwzBRmiMtsJ2sXupBgEA7PPxiDwNni3qIUkhZ6j5wofDUA==} @@ -1692,6 +1755,24 @@ packages: engines: {node: '>= 20'} hasBin: true + markmap-common@0.18.9: + resolution: {integrity: sha512-MV2HQO7IGIm3jWEJXSG8vmdpqf4WIDXcEyAEN52lrWR1qD53Zg5l81JwjXoZ2l0rY5mofKYqUFlmdM2fqTGMVg==} + + markmap-html-parser@0.18.11: + resolution: {integrity: sha512-+kC5C4sCGntGUhGvTa5VIb5rtM75cSy/VCy3tzZoNAcn2qZGdgYvljN0WvjsOzrEzp+V6XKgwzO0u2TdzNAiOg==} + peerDependencies: + markmap-common: '*' + + markmap-lib@0.18.12: + resolution: {integrity: sha512-WCA4OT+b71jYg0e4PS/6NRKqihod5OpPsvw1jEGHQwCtqQrY/yXXCeRyuL3axOS5cMy5pV8BSl4CwKfJU1LxJg==} + peerDependencies: + markmap-common: '*' + + markmap-view@0.18.12: + resolution: {integrity: sha512-D8bzT1YwIC/8rkbwm6WzigVUrpOAGv7ioEGTi1Lj+Oo8gO5sAm6hhli27jvTgUcZ9TwBeIWZ+dSUP+AupYUGlQ==} + peerDependencies: + markmap-common: '*' + md-editor-v3@5.8.5: resolution: {integrity: sha512-NsqAmmAx/ykA1AcwxcHH4Hkn4VAPkqMX7Hd6Lv4FcwQoMQ70wWmJfs/mokyPGkqr4oYqqn8LRMBTqFNfoP0O0A==} peerDependencies: @@ -1765,6 +1846,9 @@ packages: node-releases@2.0.21: resolution: {integrity: sha512-5b0pgg78U3hwXkCM8Z9b2FJdPZlr9Psr9V2gQPESdGHqbntyFJKFW4r5TeWGFzafGY3hzs1JC62VEQMbl1JFkw==} + npm2url@0.2.4: + resolution: {integrity: sha512-arzGp/hQz0Ey+ZGhF64XVH7Xqwd+1Q/po5uGiBbzph8ebX6T0uvt3N7c1nBHQNsQVykQgHhqoRTX7JFcHecGuw==} + nth-check@2.1.1: resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==} @@ -1794,6 +1878,15 @@ packages: resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==} engines: {node: '>= 0.10'} + parse5-htmlparser2-tree-adapter@7.1.0: + resolution: {integrity: sha512-ruw5xyKs6lrpo9x9rCZqZZnIUntICjQAd0Wsmp396Ul9lN/h+ifgVV1x1gZHi8euej6wTfpqX8j+BFQxF0NS/g==} + + parse5-parser-stream@7.1.2: + resolution: {integrity: sha512-JyeQc9iwFLn5TbvvqACIF/VXG6abODeB3Fwmv/TGdLk2LfbWkaySGY72at4+Ty7EkPZj854u4CrICqNk2qIbow==} + + parse5@7.3.0: + resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==} + path-exists@4.0.0: resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==} engines: {node: '>=8'} @@ -1846,6 +1939,10 @@ packages: engines: {node: '>=14'} hasBin: true + prismjs@1.30.0: + resolution: {integrity: sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==} + engines: {node: '>=6'} + prr@1.0.1: resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==} @@ -2029,6 +2126,10 @@ packages: undici-types@7.12.0: resolution: {integrity: sha512-goOacqME2GYyOZZfb5Lgtu+1IDmAlAEu5xnD3+xTzS10hT0vzpf0SPjkXwAw9Jm+4n/mQGDP3LO8CPbYROeBfQ==} + undici@6.22.0: + resolution: {integrity: sha512-hU/10obOIu62MGYjdskASR3CUAiYaFTtC9Pa6vHyf//mAipSvSQg6od2CnJswq7fvzNS3zJhxoRkgNVaHurWKw==} + engines: {node: '>=18.17'} + update-browserslist-db@1.1.3: resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==} hasBin: true @@ -2130,6 +2231,14 @@ packages: webpack-cli: optional: true + whatwg-encoding@3.1.1: + resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==} + engines: {node: '>=18'} + + whatwg-mimetype@4.0.0: + resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==} + engines: {node: '>=18'} + which@2.0.2: resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==} engines: {node: '>= 8'} @@ -2153,6 +2262,11 @@ packages: engines: {node: '>= 0.10.0'} hasBin: true + yaml@2.8.1: + resolution: {integrity: sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==} + engines: {node: '>= 14.6'} + hasBin: true + yocto-queue@0.1.0: resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==} engines: {node: '>=10'} @@ -2796,6 +2910,10 @@ snapshots: '@eslint/core': 0.15.2 levn: 0.4.1 + '@gera2ld/jsx-dom@2.2.2': + dependencies: + '@babel/runtime': 7.28.3 + '@humanfs/core@0.19.1': {} '@humanfs/node@0.16.6': @@ -3095,12 +3213,16 @@ snapshots: '@vavt/util@2.1.0': {} - '@vitejs/plugin-vue@6.0.1(vite@7.1.5(@types/node@24.5.2)(less@4.4.1)(terser@5.44.0))(vue@3.5.21)': + '@vitejs/plugin-vue@6.0.1(vite@7.1.5(@types/node@24.5.2)(less@4.4.1)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.21)': dependencies: '@rolldown/pluginutils': 1.0.0-beta.29 - vite: 7.1.5(@types/node@24.5.2)(less@4.4.1)(terser@5.44.0) + vite: 7.1.5(@types/node@24.5.2)(less@4.4.1)(terser@5.44.0)(yaml@2.8.1) vue: 3.5.21 + '@vscode/markdown-it-katex@1.1.2': + dependencies: + katex: 0.16.25 + '@vue/compiler-core@3.5.21': dependencies: '@babel/parser': 7.28.3 @@ -3380,6 +3502,29 @@ snapshots: ansi-styles: 4.3.0 supports-color: 7.2.0 + cheerio-select@2.1.0: + dependencies: + boolbase: 1.0.0 + css-select: 5.2.2 + css-what: 6.2.2 + domelementtype: 2.3.0 + domhandler: 5.0.3 + domutils: 3.2.2 + + cheerio@1.0.0: + dependencies: + cheerio-select: 2.1.0 + dom-serializer: 2.0.0 + domhandler: 5.0.3 + domutils: 3.2.2 + encoding-sniffer: 0.2.1 + htmlparser2: 9.1.0 + parse5: 7.3.0 + parse5-htmlparser2-tree-adapter: 7.1.0 + parse5-parser-stream: 7.1.2 + undici: 6.22.0 + whatwg-mimetype: 4.0.0 + chrome-trace-event@1.0.4: {} claygl@1.3.0: {} @@ -3411,6 +3556,8 @@ snapshots: commander@7.2.0: {} + commander@8.3.0: {} + compute-scroll-into-view@1.0.20: {} concat-map@0.0.1: {} @@ -3433,6 +3580,16 @@ snapshots: shebang-command: 2.0.0 which: 2.0.2 + css-select@5.2.2: + dependencies: + boolbase: 1.0.0 + css-what: 6.2.2 + domhandler: 5.0.3 + domutils: 3.2.2 + nth-check: 2.1.1 + + css-what@6.2.2: {} + cssesc@3.0.0: {} cssfilter@0.0.10: {} @@ -3632,6 +3789,24 @@ snapshots: dom-scroll-into-view@2.0.1: {} + dom-serializer@2.0.0: + dependencies: + domelementtype: 2.3.0 + domhandler: 5.0.3 + entities: 4.5.0 + + domelementtype@2.3.0: {} + + domhandler@5.0.3: + dependencies: + domelementtype: 2.3.0 + + domutils@3.2.2: + dependencies: + dom-serializer: 2.0.0 + domelementtype: 2.3.0 + domhandler: 5.0.3 + echarts-gl@2.0.9(echarts@6.0.0): dependencies: claygl: 1.3.0 @@ -3647,6 +3822,11 @@ snapshots: emojis-list@3.0.0: {} + encoding-sniffer@0.2.1: + dependencies: + iconv-lite: 0.6.3 + whatwg-encoding: 3.1.1 + enhanced-resolve@5.18.3: dependencies: graceful-fs: 4.2.11 @@ -3654,6 +3834,8 @@ snapshots: entities@4.5.0: {} + entities@6.0.1: {} + errno@0.1.8: dependencies: prr: 1.0.1 @@ -3896,6 +4078,13 @@ snapshots: hookable@5.5.3: {} + htmlparser2@9.1.0: + dependencies: + domelementtype: 2.3.0 + domhandler: 5.0.3 + domutils: 3.2.2 + entities: 4.5.0 + iconv-lite@0.6.3: dependencies: safer-buffer: 2.1.2 @@ -3956,6 +4145,10 @@ snapshots: json5@2.2.3: {} + katex@0.16.25: + dependencies: + commander: 8.3.0 + keyv@4.5.4: dependencies: json-buffer: 3.0.1 @@ -4029,6 +4222,10 @@ snapshots: dependencies: markdown-it: 14.1.0 + markdown-it-ins@4.0.0: {} + + markdown-it-mark@4.0.0: {} + markdown-it-sub@2.0.0: {} markdown-it-sup@2.0.0: {} @@ -4048,6 +4245,41 @@ snapshots: marked@16.3.0: {} + markmap-common@0.18.9: + dependencies: + '@babel/runtime': 7.28.3 + '@gera2ld/jsx-dom': 2.2.2 + npm2url: 0.2.4 + + markmap-html-parser@0.18.11(markmap-common@0.18.9): + dependencies: + '@babel/runtime': 7.28.3 + cheerio: 1.0.0 + markmap-common: 0.18.9 + + markmap-lib@0.18.12(markmap-common@0.18.9): + dependencies: + '@babel/runtime': 7.28.3 + '@vscode/markdown-it-katex': 1.1.2 + highlight.js: 11.11.1 + katex: 0.16.25 + markdown-it: 14.1.0 + markdown-it-ins: 4.0.0 + markdown-it-mark: 4.0.0 + markdown-it-sub: 2.0.0 + markdown-it-sup: 2.0.0 + markmap-common: 0.18.9 + markmap-html-parser: 0.18.11(markmap-common@0.18.9) + markmap-view: 0.18.12(markmap-common@0.18.9) + prismjs: 1.30.0 + yaml: 2.8.1 + + markmap-view@0.18.12(markmap-common@0.18.9): + dependencies: + '@babel/runtime': 7.28.3 + d3: 7.9.0 + markmap-common: 0.18.9 + md-editor-v3@5.8.5(vue@3.5.21): dependencies: '@codemirror/autocomplete': 6.18.6 @@ -4135,6 +4367,8 @@ snapshots: node-releases@2.0.21: {} + npm2url@0.2.4: {} + nth-check@2.1.1: dependencies: boolbase: 1.0.0 @@ -4168,6 +4402,19 @@ snapshots: parse-node-version@1.0.1: {} + parse5-htmlparser2-tree-adapter@7.1.0: + dependencies: + domhandler: 5.0.3 + parse5: 7.3.0 + + parse5-parser-stream@7.1.2: + dependencies: + parse5: 7.3.0 + + parse5@7.3.0: + dependencies: + entities: 6.0.1 + path-exists@4.0.0: {} path-key@3.1.1: {} @@ -4205,6 +4452,8 @@ snapshots: prettier@3.6.2: {} + prismjs@1.30.0: {} + prr@1.0.1: optional: true @@ -4380,6 +4629,8 @@ snapshots: undici-types@7.12.0: {} + undici@6.22.0: {} + update-browserslist-db@1.1.3(browserslist@4.26.2): dependencies: browserslist: 4.26.2 @@ -4392,7 +4643,7 @@ snapshots: util-deprecate@1.0.2: {} - vite@7.1.5(@types/node@24.5.2)(less@4.4.1)(terser@5.44.0): + vite@7.1.5(@types/node@24.5.2)(less@4.4.1)(terser@5.44.0)(yaml@2.8.1): dependencies: esbuild: 0.25.10 fdir: 6.5.0(picomatch@4.0.3) @@ -4405,6 +4656,7 @@ snapshots: fsevents: 2.3.3 less: 4.4.1 terser: 5.44.0 + yaml: 2.8.1 vue-eslint-parser@10.2.0(eslint@9.36.0): dependencies: @@ -4480,6 +4732,12 @@ snapshots: - esbuild - uglify-js + whatwg-encoding@3.1.1: + dependencies: + iconv-lite: 0.6.3 + + whatwg-mimetype@4.0.0: {} + which@2.0.2: dependencies: isexe: 2.0.0 @@ -4498,6 +4756,8 @@ snapshots: commander: 2.20.3 cssfilter: 0.0.10 + yaml@2.8.1: {} + yocto-queue@0.1.0: {} zrender@5.6.1: diff --git a/web/src/App.vue b/web/src/App.vue index a43e3d0fa..cc8ba07a2 100644 --- a/web/src/App.vue +++ b/web/src/App.vue @@ -3,7 +3,6 @@ import { useAgentStore } from '@/stores/agent' import { useUserStore } from '@/stores/user' import { useThemeStore } from '@/stores/theme' import { onMounted } from 'vue' -import { theme } from 'ant-design-vue' const agentStore = useAgentStore(); const userStore = useUserStore(); @@ -16,9 +15,8 @@ onMounted(async () => { })