From fb3b864565dd6b423f47f8c2e851c630eac80cbe Mon Sep 17 00:00:00 2001 From: Wenjie Zhang Date: Sun, 23 Nov 2025 19:42:51 +0800 Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E6=96=B0=E5=A2=9E=E6=9A=97?= =?UTF-8?q?=E8=89=B2=E6=A8=A1=E5=BC=8F=E6=94=AF=E6=8C=81=E5=B9=B6=E8=B0=83?= =?UTF-8?q?=E6=95=B4=E6=99=BA=E8=83=BD=E4=BD=93=E9=80=89=E6=8B=A9=E5=99=A8?= =?UTF-8?q?=E4=BD=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 将智能体选择器从侧边栏移动到主聊天界面头部 调整相关样式以匹配新的布局 --- docs/latest/changelog/roadmap.md | 3 +- web/src/components/AgentChatComponent.vue | 24 +++++++- web/src/components/AgentConfigSidebar.vue | 14 ++++- web/src/components/ChatSidebarComponent.vue | 62 ++++----------------- web/src/layouts/AppLayout.vue | 2 +- 5 files changed, 46 insertions(+), 59 deletions(-) diff --git a/docs/latest/changelog/roadmap.md b/docs/latest/changelog/roadmap.md index b770fc2c..2a5fc7a4 100644 --- a/docs/latest/changelog/roadmap.md +++ b/docs/latest/changelog/roadmap.md @@ -11,7 +11,7 @@ - 开发与生产环境隔离，构建生产镜像 - 集成 LangFuse (观望) 添加用户日志与用户反馈模块，可以在 AgentView 中查看信息 - 集成 neo4j mcp （或者自己构建工具） -- 文档解析部分的 markdown 中的图片替换为内部可访问的链接 +- 文档解析部分的 markdown 中的图片替换为内部可访问的链接 (2/4) ### Bugs - 部分异常状态下，智能体的模型名称出现重叠[#279](https://github.com/xerrors/Yuxi-Know/issues/279) @@ -28,6 +28,7 @@ - 新增基于知识库文件生成示例问题功能（[#335](https://github.com/xerrors/Yuxi-Know/pull/335#issuecomment-3530976425)） - 新增知识库支持文件夹/压缩包上传的功能（[#335](https://github.com/xerrors/Yuxi-Know/pull/335#issuecomment-3530976425)） - 新增自定义模型支持、新增 dashscope rerank/embeddings 模型的支持 +- 新增暗色模式支持并调整整体 UI（[#343](https://github.com/xerrors/Yuxi-Know/pull/343)） ### 修复 - 修复重排序模型实际未生效的问题 diff --git a/web/src/components/AgentChatComponent.vue b/web/src/components/AgentChatComponent.vue index 3d046942..f6506864 100644 --- a/web/src/components/AgentChatComponent.vue +++ b/web/src/components/AgentChatComponent.vue @@ -30,7 +30,7 @@
-
新对话
+
+ {{ currentAgentName || '选择智能体' }} + +
+
@@ -234,7 +243,7 @@ import AgentMessageComponent from '@/components/AgentMessageComponent.vue' import ImagePreviewComponent from '@/components/ImagePreviewComponent.vue' import ChatSidebarComponent from '@/components/ChatSidebarComponent.vue' import RefsComponent from '@/components/RefsComponent.vue' -import { PanelLeftOpen, MessageCirclePlus, LoaderCircle, Layers } from 'lucide-vue-next'; +import { PanelLeftOpen, MessageCirclePlus, LoaderCircle, Layers, ChevronDown } from 'lucide-vue-next'; import { handleChatError, handleValidationError } from '@/utils/errorHandler'; import { ScrollController } from '@/utils/scrollController'; import { AgentValidator } from '@/utils/agentValidator'; @@ -1432,10 +1441,19 @@ watch(conversations, () => { align-items: center; padding: 1rem 8px; - .header__left, .header__right, .header__center { + .header__left, .header__right { display: flex; align-items: center; } + + .switch-icon { + color: var(--gray-500); + transition: all 0.2s ease; + } + + .agent-nav-btn:hover .switch-icon { + color: var(--main-500); + } } } diff --git a/web/src/components/AgentConfigSidebar.vue b/web/src/components/AgentConfigSidebar.vue index 0af27ec2..23f1b070 100644 --- a/web/src/components/AgentConfigSidebar.vue +++ b/web/src/components/AgentConfigSidebar.vue @@ -22,7 +22,7 @@

{{ selectedAgent.description }}

- +
@@ -357,7 +357,8 @@ const closeSidebar = () => { const getConfigLabel = (key, value) => { // console.log(configurableItems) if (value.description && value.name !== key) { - return `${value.name}（${key}）`; + return `${value.name}`; + // return `${value.name}（${key}）`; } return key; }; @@ -695,7 +696,14 @@ watch(() => props.isOpen, (newVal) => { } .config-item { - margin: 30px 0; + background-color: var(--gray-50); + padding: 12px; + border-radius: 8px; + box-shadow: 0px 1px 1px var(--shadow-2); + + :deep(label.form_item_model) { + font-weight: 600; + } .config-description { margin: 4px 0 8px 0; diff --git a/web/src/components/ChatSidebarComponent.vue b/web/src/components/ChatSidebarComponent.vue index f3e50307..972da053 100644 --- a/web/src/components/ChatSidebarComponent.vue +++ b/web/src/components/ChatSidebarComponent.vue @@ -2,15 +2,7 @@
-
{{ selectedAgentName }}
-
- {{ selectedAgentName || '选择智能体' }} - -
+
{{ branding.name }}
@@ -73,12 +65,17 @@ import { MoreOutlined } from '@ant-design/icons-vue'; import { message, Modal } from 'ant-design-vue'; -import { PanelLeftClose, MessageSquarePlus, ChevronDown, LoaderCircle } from 'lucide-vue-next'; +import { PanelLeftClose, MessageSquarePlus, LoaderCircle } from 'lucide-vue-next'; import dayjs, { parseToShanghai } from '@/utils/time'; import { useChatUIStore } from '@/stores/chatUI'; +import { useInfoStore } from '@/stores/info'; +import { storeToRefs } from 'pinia'; // 使用 chatUI store const chatUIStore = useChatUIStore(); +const infoStore = useInfoStore(); + +const { branding } = storeToRefs(infoStore); const props = defineProps({ currentAgentId: { @@ -113,13 +110,7 @@ const props = defineProps({ const emit = defineEmits(['create-chat', 'select-chat', 'delete-chat', 'rename-chat', 'toggle-sidebar', 'open-agent-modal']); -const selectedAgentName = computed(() => { - if (props.selectedAgentId && props.agents && props.agents.length > 0) { - const agent = props.agents.find(a => a.id === props.selectedAgentId); - return agent ? agent.name : ''; - } - return ''; -}); + const groupedChats = computed(() => { const groups = { @@ -221,16 +212,14 @@ const toggleCollapse = () => { emit('toggle-sidebar'); }; -const openAgentModal = () => { - emit('open-agent-modal'); -}; + diff --git a/web/src/layouts/AppLayout.vue b/web/src/layouts/AppLayout.vue index fb137001..cb259606 100644 --- a/web/src/layouts/AppLayout.vue +++ b/web/src/layouts/AppLayout.vue @@ -202,7 +202,7 @@ const mainList = [{
- 对话 + 对话 知识 设置