From d6dfa2b5e3f06f192f7836ee50fc831727449749 Mon Sep 17 00:00:00 2001 From: Wenjie Zhang Date: Thu, 11 Sep 2025 03:09:17 +0800 Subject: [PATCH] =?UTF-8?q?refactor(ui):=20=E4=BC=98=E5=8C=96=E8=B0=83?= =?UTF-8?q?=E8=AF=95=E6=A8=A1=E5=BC=8F=E5=AE=9E=E7=8E=B0=E5=B9=B6=E6=94=B9?= =?UTF-8?q?=E8=BF=9B=E7=95=8C=E9=9D=A2=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 将调试模式状态管理移至 infoStore 实现全局统一控制 - 移除各组件中分散的调试模式状态管理代码 - 调整侧边栏和头部组件的边框和背景颜色 - 优化按钮和交互元素的悬停效果 - 更新文档中的 changelog 记录待办事项 --- docs/changelog/update.md | 2 ++ web/src/components/AgentChatComponent.vue | 11 +++---- web/src/components/AgentConfigSidebar.vue | 34 -------------------- web/src/components/AgentMessageComponent.vue | 11 ++++--- web/src/components/ChatSidebarComponent.vue | 24 ++++++++------ web/src/components/DebugComponent.vue | 15 ++++++++- web/src/layouts/AppLayout.vue | 2 +- web/src/stores/info.js | 12 +++++++ web/src/views/AgentView.vue | 25 ++++++-------- 9 files changed, 65 insertions(+), 71 deletions(-) diff --git a/docs/changelog/update.md b/docs/changelog/update.md index fc34bf9a..9731edf1 100644 --- a/docs/changelog/update.md +++ b/docs/changelog/update.md @@ -9,6 +9,8 @@ - [x] 将现在的 graphview.vue 文件中 GraphContainer相关的代码分离到一个单独的组件中，然后 actions 和 footer 都是作为 slot top/bottom 提供的 - [x] 然后应用到 web/src/components/ToolCallingResult/KnowledgeGraphResult.vue 中，替换现有的 GraphContainer。 - [ ] 知识图谱的上传和可视化，支持属性，标签的展示 +- [ ] 集成智能体评估，首先使用命令行来实现，然后考虑放在 UI 里面展示 +- [ ] 开发与生产环境隔离 🐛**BUGs** - [x] LlightRAG 知识库中，点击边，没有显示，但是在全屏的时候却又能够显示出来。 diff --git a/web/src/components/AgentChatComponent.vue b/web/src/components/AgentChatComponent.vue index 17c825fe..d066dc50 100644 --- a/web/src/components/AgentChatComponent.vue +++ b/web/src/components/AgentChatComponent.vue @@ -100,7 +100,6 @@ :message="message" :key="msgIndex" :is-processing="isProcessing && conv.status === 'streaming' && msgIndex === conv.messages.length - 1" - :debug-mode="state.debug_mode" :show-refs="showMsgRefs(message)" @retry="retryMessage(message)" > @@ -207,7 +206,6 @@ const threadMessages = ref({}); const uiState = reactive({ ...props.state, - debug_mode: computed(() => props.state.debug_mode ?? false), isSidebarOpen: localStorage.getItem('chat_sidebar_open', 'true') === 'true', isInitialRender: true, showRenameButton: false, @@ -1004,8 +1002,8 @@ watch(conversations, () => { .example-chip { padding: 6px 12px; - background: var(--gray-100); - border: 1px solid var(--gray-200); + background: var(--gray-25); + // border: 1px solid var(--gray-100); border-radius: 16px; cursor: pointer; font-size: 0.8rem; @@ -1017,11 +1015,10 @@ watch(conversations, () => { text-overflow: ellipsis; &:hover { - background: var(--main-50); + // background: var(--main-25); border-color: var(--main-200); color: var(--main-700); - transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + box-shadow: 0 0px 4px rgba(0, 0, 0, 0.03); } &:active { diff --git a/web/src/components/AgentConfigSidebar.vue b/web/src/components/AgentConfigSidebar.vue index 41d5abd2..63d1fab3 100644 --- a/web/src/components/AgentConfigSidebar.vue +++ b/web/src/components/AgentConfigSidebar.vue @@ -21,11 +21,6 @@

{{ selectedAgent.description }}

-
@@ -334,7 +329,6 @@ const { // console.log(availableTools.value) // 本地状态 -const debugMode = ref(false); const toolsModalOpen = ref(false); const selectedTools = ref([]); const toolsSearchText = ref(''); @@ -362,10 +356,6 @@ const closeSidebar = () => { emit('close'); }; -const toggleDebugMode = () => { - debugMode.value = !debugMode.value; -}; - const getConfigLabel = (key, value) => { // console.log(configurableItems) if (value.description && value.name !== key) { @@ -648,30 +638,6 @@ watch(() => props.isOpen, (newVal) => { color: var(--gray-700); line-height: 1.5; } - - .debug-toggle { - display: flex; - justify-content: space-between; - align-items: center; - padding: 8px 0; - cursor: pointer; - - .debug-text { - font-size: 13px; - color: var(--gray-600); - } - } - - .debug-info { - margin-top: 12px; - padding: 12px; - background: var(--gray-50); - border-radius: 6px; - font-size: 12px; - color: var(--gray-700); - max-height: 200px; - overflow-y: auto; - } } } diff --git a/web/src/components/AgentMessageComponent.vue b/web/src/components/AgentMessageComponent.vue index 60b67b9e..4446e8a8 100644 --- a/web/src/components/AgentMessageComponent.vue +++ b/web/src/components/AgentMessageComponent.vue @@ -71,7 +71,7 @@
-
{{ message }}
+
{{ message }}
@@ -85,6 +85,7 @@ import RefsComponent from '@/components/RefsComponent.vue' import { Loader, CircleCheckBig } from 'lucide-vue-next'; import { ToolResultRenderer } from '@/components/ToolCallingResult' import { useAgentStore } from '@/stores/agent' +import { useInfoStore } from '@/stores/info' import { storeToRefs } from 'pinia' @@ -112,12 +113,13 @@ const props = defineProps({ type: [Array, Boolean], default: () => false }, - debugMode: { + // 是否为最新消息 + isLatestMessage: { type: Boolean, default: false }, - // 是否为最新消息 - isLatestMessage: { + // 是否显示调试信息 (已废弃，使用 infoStore.debugMode) + debugMode: { type: Boolean, default: false } @@ -133,6 +135,7 @@ const expandedToolCalls = ref(new Set()); // 展开的工具调用集合 // 引入智能体 store const agentStore = useAgentStore(); +const infoStore = useInfoStore(); const { availableTools } = storeToRefs(agentStore); // 工具相关方法 diff --git a/web/src/components/ChatSidebarComponent.vue b/web/src/components/ChatSidebarComponent.vue index f166d610..8b01c809 100644 --- a/web/src/components/ChatSidebarComponent.vue +++ b/web/src/components/ChatSidebarComponent.vue @@ -244,7 +244,7 @@ const openAgentModal = () => { align-items: center; justify-content: space-between; padding: 0 16px; - border-bottom: 1px solid var(--gray-200); + border-bottom: 1px solid var(--gray-50); flex-shrink: 0; .header-title { @@ -261,6 +261,7 @@ const openAgentModal = () => { display: flex; align-items: center; gap: 8px; + // color: var(--gray-600); } } @@ -360,10 +361,10 @@ const openAgentModal = () => { } &:hover { - background-color: var(--gray-50); + background-color: var(--gray-25); .actions-mask { - background: linear-gradient(to right, transparent, var(--gray-100) 20px); + background: linear-gradient(to right, transparent, var(--gray-25) 20px); } .actions-mask, .conversation-actions { @@ -372,14 +373,14 @@ const openAgentModal = () => { } &.active { - background-color: var(--gray-100); + background-color: var(--gray-50); .conversation-title { color: var(--main-600); font-weight: 500; } .actions-mask { - background: linear-gradient(to right, transparent, var(--gray-100) 20px); + background: linear-gradient(to right, transparent, var(--gray-50) 20px); } } } @@ -415,20 +416,25 @@ const openAgentModal = () => { justify-content: center; align-items: center; border-radius: 8px; - color: var(--gray-500); // padding: 0.5rem; transition: background-color 0.3s; - &:hover { - color: var(--main-color); + + svg { + stroke: var(--gray-600); + } + + &:hover svg { + stroke: var(--main-color); } } // 智能体选择器样式 .agent-selector { cursor: pointer; - font-size: 14px; + font-size: 15px; color: var(--gray-900); transition: color 0.2s ease; + font-weight: 500; &:hover { color: var(--main-500); diff --git a/web/src/components/DebugComponent.vue b/web/src/components/DebugComponent.vue index 05ea33a2..163c8d08 100644 --- a/web/src/components/DebugComponent.vue +++ b/web/src/components/DebugComponent.vue @@ -22,6 +22,10 @@ 智能体配置 + + + Debug 模式: {{ infoStore.debugMode ? '开启' : '关闭' }} +