From 1af5b33ccc28e1b23da2c83f71e43ee6048eefbf Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Tue, 17 Mar 2026 00:58:56 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E5=AE=9E=E7=8E=B0=E6=99=AE?=
 =?UTF-8?q?=E9=80=9A=E7=94=A8=E6=88=B7=E5=92=8C=E7=AE=A1=E7=90=86=E5=91=98?=
 =?UTF-8?q?=E5=B7=AE=E5=BC=82=E5=8C=96=E6=9D=83=E9=99=90=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 知识库API区分：管理员调用getDatabases，普通用户调用getAccessibleDatabases
- UI权限控制：隐藏普通用户的顶部导航栏、知识库管理、任务中心等管理员功能
- 路由调整：普通用户可访问/agent页面，移除requiresAdmin限制
- 代码优化：删除AgentSingleView.vue，合并到AgentView.vue统一处理
- 错误处理增强：AppLayout中增加配置和知识库加载的try-catch
---
 web/src/apis/knowledge_api.js               |   4 +-
 web/src/components/AgentChatComponent.vue   |  65 +++-
 web/src/components/ChatSidebarComponent.vue |  34 +-
 web/src/layouts/AppLayout.vue               |  89 +++--
 web/src/router/index.js                     |  24 +-
 web/src/stores/config.js                    |  10 +-
 web/src/stores/database.js                  |  10 +-
 web/src/stores/tasker.js                    |   9 +
 web/src/views/AgentSingleView.vue           | 376 --------------------
 web/src/views/AgentView.vue                 |  78 +++-
 web/src/views/LoginView.vue                 |  30 +-
 11 files changed, 248 insertions(+), 481 deletions(-)
 delete mode 100644 web/src/views/AgentSingleView.vue

diff --git a/web/src/apis/knowledge_api.js b/web/src/apis/knowledge_api.js
index 75834f44..9fda90f9 100644
--- a/web/src/apis/knowledge_api.js
+++ b/web/src/apis/knowledge_api.js
@@ -1,4 +1,4 @@
-import { apiAdminGet, apiAdminPost, apiAdminPut, apiAdminDelete, apiRequest } from './base'
+import { apiGet, apiAdminGet, apiAdminPost, apiAdminPut, apiAdminDelete, apiRequest } from './base'
 
 /**
  * 知识库管理API模块
@@ -75,7 +75,7 @@ export const databaseApi = {
    * @returns {Promise} - 可访问的知识库列表
    */
   getAccessibleDatabases: async () => {
-    return apiAdminGet('/api/knowledge/databases/accessible')
+    return apiGet('/api/knowledge/databases/accessible')
   }
 }
 
diff --git a/web/src/components/AgentChatComponent.vue b/web/src/components/AgentChatComponent.vue
index 32be7e80..89386291 100644
--- a/web/src/components/AgentChatComponent.vue
+++ b/web/src/components/AgentChatComponent.vue
@@ -27,10 +27,22 @@
       <div class="chat-header">
         <div class="header__left">
           <slot name="header-left" class="nav-btn"></slot>
+          <div
+            v-if="!chatUIStore.isSidebarOpen && !userStore.isAdmin"
+            type="button"
+            class="sidebar-logo-toggle"
+            @click="toggleSidebar"
+          >
+            <img v-if="sidebarLogo" :src="sidebarLogo" alt="logo" class="sidebar-logo-image" />
+            <PanelLeftOpen v-else class="sidebar-logo-fallback" size="18" />
+            <div class="sidebar-expand-overlay">
+              <PanelLeftOpen class="nav-btn-icon" size="18" />
+            </div>
+          </div>
           <div
             type="button"
             class="agent-nav-btn"
-            v-if="!chatUIStore.isSidebarOpen"
+            v-if="!chatUIStore.isSidebarOpen && userStore.isAdmin"
             @click="toggleSidebar"
           >
             <PanelLeftOpen class="nav-btn-icon" size="18" />
@@ -52,6 +64,7 @@
           </div>
         </div>
         <div class="header__right">
+          <UserInfoComponent v-if="!userStore.isAdmin" />
           <!-- AgentState 显示按钮已移动到输入框底部 -->
           <slot name="header-right"></slot>
         </div>
@@ -219,6 +232,8 @@ import { ScrollController } from '@/utils/scrollController'
 import { AgentValidator } from '@/utils/agentValidator'
 import { useAgentStore } from '@/stores/agent'
 import { useChatUIStore } from '@/stores/chatUI'
+import { useInfoStore } from '@/stores/info'
+import { useUserStore } from '@/stores/user'
 import { storeToRefs } from 'pinia'
 import { MessageProcessor } from '@/utils/messageProcessor'
 import { agentApi, threadApi } from '@/apis'
@@ -226,6 +241,7 @@ import HumanApprovalModal from '@/components/HumanApprovalModal.vue'
 import { useApproval } from '@/composables/useApproval'
 import { useAgentStreamHandler } from '@/composables/useAgentStreamHandler'
 import AgentPanel from '@/components/AgentPanel.vue'
+import UserInfoComponent from '@/components/UserInfoComponent.vue'
 
 // ==================== PROPS & EMITS ====================
 const props = defineProps({
@@ -236,6 +252,8 @@ const props = defineProps({
 // ==================== STORE MANAGEMENT ====================
 const agentStore = useAgentStore()
 const chatUIStore = useChatUIStore()
+const infoStore = useInfoStore()
+const userStore = useUserStore()
 const {
   agents,
   selectedAgentId,
@@ -247,9 +265,11 @@ const {
   availableMcps,
   availableSkills
 } = storeToRefs(agentStore)
+const { organization } = storeToRefs(infoStore)
 
 // ==================== LOCAL CHAT & UI STATE ====================
 const userInput = ref('')
+const sidebarLogo = computed(() => organization.value?.logo || organization.value?.avatar || '')
 const useRunsApi =
   import.meta.env.VITE_USE_RUNS_API === 'true' &&
   localStorage.getItem('force_legacy_stream') !== 'true'
@@ -1910,6 +1930,7 @@ watch(
     .header__right {
       display: flex;
       align-items: center;
+      gap: 8px;
     }
 
     .switch-icon {
@@ -1920,6 +1941,48 @@ watch(
     .agent-nav-btn:hover .switch-icon {
       color: var(--main-500);
     }
+
+    .sidebar-logo-toggle {
+      position: relative;
+      width: 32px;
+      height: 32px;
+      border-radius: 8px;
+      border: 1px solid var(--gray-150);
+      background: var(--gray-0);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      cursor: pointer;
+      flex-shrink: 0;
+    }
+
+    .sidebar-logo-image {
+      width: 24px;
+      height: 24px;
+      border-radius: 6px;
+      object-fit: cover;
+    }
+
+    .sidebar-logo-fallback {
+      color: var(--gray-700);
+    }
+
+    .sidebar-expand-overlay {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--gray-100);
+      color: var(--gray-900);
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    }
+
+    .sidebar-logo-toggle:hover .sidebar-expand-overlay {
+      opacity: 1;
+    }
   }
 }
 
diff --git a/web/src/components/ChatSidebarComponent.vue b/web/src/components/ChatSidebarComponent.vue
index 8941dbc9..c24da204 100644
--- a/web/src/components/ChatSidebarComponent.vue
+++ b/web/src/components/ChatSidebarComponent.vue
@@ -5,7 +5,15 @@
   >
     <div class="sidebar-content">
       <div class="sidebar-header">
-        <div class="header-title">{{ branding.name }}</div>
+        <div class="header-brand">
+          <img
+            v-if="!userStore.isAdmin && (organization.logo || organization.avatar)"
+            :src="organization.logo || organization.avatar"
+            alt="logo"
+            class="brand-logo"
+          />
+          <div class="header-title">{{ branding.name || organization.name || 'Yuxi-Know' }}</div>
+        </div>
         <div class="header-actions">
           <div
             class="toggle-sidebar nav-btn"
@@ -96,7 +104,7 @@
 </template>
 
 <script setup>
-import { computed, h, ref } from 'vue'
+import { computed, h } from 'vue'
 import { message, Modal } from 'ant-design-vue'
 import {
   PanelLeftClose,
@@ -111,13 +119,15 @@ import {
 import dayjs, { parseToShanghai } from '@/utils/time'
 import { useChatUIStore } from '@/stores/chatUI'
 import { useInfoStore } from '@/stores/info'
+import { useUserStore } from '@/stores/user'
 import { storeToRefs } from 'pinia'
 
 // 使用 chatUI store
 const chatUIStore = useChatUIStore()
 const infoStore = useInfoStore()
+const userStore = useUserStore()
 
-const { branding } = storeToRefs(infoStore)
+const { branding, organization } = storeToRefs(infoStore)
 
 const props = defineProps({
   currentAgentId: {
@@ -300,6 +310,24 @@ const togglePin = (chatId) => {
     border-bottom: 1px solid var(--gray-50);
     flex-shrink: 0;
 
+    .header-brand {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      min-width: 0;
+      flex: 1;
+    }
+
+    .brand-logo {
+      width: 26px;
+      height: 26px;
+      border-radius: 6px;
+      object-fit: cover;
+      flex-shrink: 0;
+      border: 1px solid var(--gray-100);
+      background: var(--gray-0);
+    }
+
     .header-title {
       font-weight: 600;
       font-size: 16px;
diff --git a/web/src/layouts/AppLayout.vue b/web/src/layouts/AppLayout.vue
index 95fb9567..ad35e9a6 100644
--- a/web/src/layouts/AppLayout.vue
+++ b/web/src/layouts/AppLayout.vue
@@ -47,12 +47,21 @@ const handleDebugModalClose = () => {
   showDebugModal.value = false
 }
 
-const getRemoteConfig = () => {
-  configStore.refreshConfig()
+const getRemoteConfig = async () => {
+  if (!userStore.isAdmin) return
+  try {
+    await configStore.refreshConfig()
+  } catch (error) {
+    console.warn('加载系统配置失败:', error)
+  }
 }
 
-const getRemoteDatabase = () => {
-  databaseStore.loadDatabases()
+const getRemoteDatabase = async () => {
+  try {
+    await databaseStore.loadDatabases()
+  } catch (error) {
+    console.warn('加载知识库列表失败:', error)
+  }
 }
 
 // Fetch GitHub stars count
@@ -73,12 +82,14 @@ const fetchGithubStars = async () => {
 onMounted(async () => {
   // 加载信息配置
   await infoStore.loadInfoConfig()
-  // 加载其他配置
-  getRemoteConfig()
-  getRemoteDatabase()
-  fetchGithubStars() // Fetch GitHub stars on mount
-  // 预加载任务数据，确保任务中心打开时有内容
-  taskerStore.loadTasks()
+  // 加载知识库数据（普通用户加载可访问知识库）
+  await getRemoteDatabase()
+  // 仅管理员加载系统配置和任务中心数据
+  if (userStore.isAdmin) {
+    await getRemoteConfig()
+    taskerStore.loadTasks()
+    fetchGithubStars() // Fetch GitHub stars on mount
+  }
 })
 
 // 打印当前页面的路由信息，使用 vue3 的 setup composition API
@@ -95,37 +106,42 @@ const mainList = computed(() => {
       path: '/agent',
       icon: Bot,
       activeIcon: Bot
-    },
-    {
-      name: '图谱',
-      path: '/graph',
-      icon: Waypoints,
-      activeIcon: Waypoints
-    },
-    {
-      name: '知识库',
-      path: '/database',
-      icon: LibraryBig,
-      activeIcon: LibraryBig
     }
   ]
 
-  if (userStore.isSuperAdmin) {
+  if (userStore.isAdmin) {
+    items.push(
+      {
+        name: '图谱',
+        path: '/graph',
+        icon: Waypoints,
+        activeIcon: Waypoints
+      },
+      {
+        name: '知识库',
+        path: '/database',
+        icon: LibraryBig,
+        activeIcon: LibraryBig
+      }
+    )
+
+    if (userStore.isSuperAdmin) {
+      items.push({
+        name: '扩展管理',
+        path: '/extensions',
+        icon: Blocks,
+        activeIcon: Blocks
+      })
+    }
+
     items.push({
-      name: '扩展管理',
-      path: '/extensions',
-      icon: Blocks,
-      activeIcon: Blocks
+      name: 'Dashboard',
+      path: '/dashboard',
+      icon: BarChart3,
+      activeIcon: BarChart3
     })
   }
 
-  items.push({
-    name: 'Dashboard',
-    path: '/dashboard',
-    icon: BarChart3,
-    activeIcon: BarChart3
-  })
-
   return items
 })
 
@@ -137,7 +153,7 @@ provide('settingsModal', {
 
 <template>
   <div class="app-layout" :class="{ 'use-top-bar': layoutSettings.useTopBar }">
-    <div class="header" :class="{ 'top-bar': layoutSettings.useTopBar }">
+    <div v-if="userStore.isAdmin" class="header" :class="{ 'top-bar': layoutSettings.useTopBar }">
       <div class="logo circle">
         <router-link to="/">
           <img :src="infoStore.organization.avatar" />
@@ -163,6 +179,7 @@ provide('settingsModal', {
           </a-tooltip>
         </RouterLink>
         <div
+          v-if="userStore.isAdmin"
           class="nav-item task-center"
           :class="{ active: isDrawerOpen }"
           @click="taskerStore.openDrawer()"
@@ -217,7 +234,7 @@ provide('settingsModal', {
     >
       <DebugComponent />
     </a-modal>
-    <TaskCenterDrawer />
+    <TaskCenterDrawer v-if="userStore.isAdmin" />
     <SettingsModal v-model:visible="showSettingsModal" @close="() => (showSettingsModal = false)" />
   </div>
 </template>
diff --git a/web/src/router/index.js b/web/src/router/index.js
index 7b31f0d5..4386d882 100644
--- a/web/src/router/index.js
+++ b/web/src/router/index.js
@@ -35,16 +35,16 @@ const router = createRouter({
           path: '',
           name: 'AgentComp',
           component: () => import('../views/AgentView.vue'),
-          meta: { keepAlive: true, requiresAuth: true, requiresAdmin: true }
+          meta: { keepAlive: true, requiresAuth: true }
+        },
+        {
+          path: ':agent_id',
+          name: 'AgentCompWithId',
+          component: () => import('../views/AgentView.vue'),
+          meta: { keepAlive: true, requiresAuth: true }
         }
       ]
     },
-    {
-      path: '/agent/:agent_id',
-      name: 'AgentSinglePage',
-      component: () => import('../views/AgentSingleView.vue'),
-      meta: { requiresAuth: true }
-    },
     {
       path: '/graph',
       name: 'graph',
@@ -173,13 +173,13 @@ router.beforeEach(async (to, from, next) => {
         if (agentIds.length > 0) {
           next(`/agent/${agentIds[0]}`)
         } else {
-          // 没有可用的智能体，跳转到首页
-          next('/')
+          // 没有可用的智能体，跳转到聊天页
+          next('/agent')
         }
       }
     } catch (error) {
       console.error('获取智能体信息失败:', error)
-      next('/')
+      next('/agent')
     }
     return
   }
@@ -195,11 +195,11 @@ router.beforeEach(async (to, from, next) => {
       if (defaultAgent && defaultAgent.id) {
         next(`/agent/${defaultAgent.id}`)
       } else {
-        next('/')
+        next('/agent')
       }
     } catch (error) {
       console.error('获取智能体信息失败:', error)
-      next('/')
+      next('/agent')
     }
     return
   }
diff --git a/web/src/stores/config.js b/web/src/stores/config.js
index 58204185..ba469586 100644
--- a/web/src/stores/config.js
+++ b/web/src/stores/config.js
@@ -39,11 +39,11 @@ export const useConfigStore = defineStore('config', () => {
     })
   }
 
-  function refreshConfig() {
-    configApi.getConfig().then((data) => {
-      console.log('config', data)
-      setConfig(data)
-    })
+  async function refreshConfig() {
+    const data = await configApi.getConfig()
+    console.log('config', data)
+    setConfig(data)
+    return data
   }
 
   return { config, setConfig, setConfigValue, refreshConfig, setConfigValues }
diff --git a/web/src/stores/database.js b/web/src/stores/database.js
index c6dbe44d..44387e35 100644
--- a/web/src/stores/database.js
+++ b/web/src/stores/database.js
@@ -3,12 +3,14 @@ import { ref, reactive } from 'vue'
 import { message, Modal } from 'ant-design-vue'
 import { databaseApi, documentApi, queryApi } from '@/apis/knowledge_api'
 import { useTaskerStore } from '@/stores/tasker'
+import { useUserStore } from '@/stores/user'
 import { useRouter } from 'vue-router'
 import { parseToShanghai } from '@/utils/time'
 
 export const useDatabaseStore = defineStore('database', () => {
   const router = useRouter()
   const taskerStore = useTaskerStore()
+  const userStore = useUserStore()
 
   // State
   const databases = ref([])
@@ -41,11 +43,15 @@ export const useDatabaseStore = defineStore('database', () => {
   let autoRefreshManualOverride = false // Indicates user explicitly disabled auto-refresh
 
   // Actions
+  // 管理员获取所有知识库，普通用户获取有权限访问的知识库
   async function loadDatabases() {
     state.listLoading = true
     try {
-      const data = await databaseApi.getDatabases()
-      databases.value = data.databases.sort((a, b) => {
+      const data = userStore.isAdmin
+        ? await databaseApi.getDatabases()
+        : await databaseApi.getAccessibleDatabases()
+      const list = data?.databases || []
+      databases.value = list.sort((a, b) => {
         const timeA = parseToShanghai(a.created_at)
         const timeB = parseToShanghai(b.created_at)
         if (!timeA && !timeB) return 0
diff --git a/web/src/stores/tasker.js b/web/src/stores/tasker.js
index e78e4447..4633c695 100644
--- a/web/src/stores/tasker.js
+++ b/web/src/stores/tasker.js
@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 import { message } from 'ant-design-vue'
 import { taskerApi } from '@/apis/tasker'
+import { useUserStore } from '@/stores/user'
 import { parseToShanghai } from '@/utils/time'
 
 const ACTIVE_STATUSES = new Set(['pending', 'running', 'queued'])
@@ -32,6 +33,7 @@ const toTask = (raw = {}) => ({
 })
 
 export const useTaskerStore = defineStore('tasker', () => {
+  const userStore = useUserStore()
   const tasks = ref([])
   const loading = ref(false)
   const lastError = ref(null)
@@ -80,6 +82,13 @@ export const useTaskerStore = defineStore('tasker', () => {
   }
 
   async function loadTasks(params = {}) {
+    if (!userStore.isAdmin) {
+      tasks.value = []
+      summary.value = createDefaultSummary()
+      lastError.value = null
+      return
+    }
+
     loading.value = true
     lastError.value = null
     try {
diff --git a/web/src/views/AgentSingleView.vue b/web/src/views/AgentSingleView.vue
deleted file mode 100644
index 80d83aea..00000000
--- a/web/src/views/AgentSingleView.vue
+++ /dev/null
@@ -1,376 +0,0 @@
-<template>
-  <div class="agent-single-view">
-    <!-- 智能体选择弹窗 -->
-    <a-modal
-      v-model:open="agentModalOpen"
-      title="选择智能体"
-      :width="800"
-      :footer="null"
-      :maskClosable="true"
-      class="agent-modal"
-    >
-      <div class="agent-modal-content">
-        <div class="agents-grid">
-          <div
-            v-for="agent in agents"
-            :key="agent.id"
-            class="agent-card"
-            :class="{ selected: agent.id === agentId }"
-            @click="selectAgentFromModal(agent.id)"
-          >
-            <div class="agent-card-header">
-              <div class="agent-card-title">
-                <span class="agent-card-name">{{ agent.name || 'Unknown' }}</span>
-              </div>
-              <StarFilled v-if="agent.id === defaultAgentId" class="default-icon" />
-              <StarOutlined
-                v-else
-                @click.prevent="setAsDefaultAgent(agent.id)"
-                class="default-icon"
-              />
-            </div>
-
-            <div class="agent-card-description">
-              {{ agent.description || '' }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </a-modal>
-
-    <!-- 智能体聊天界面 -->
-    <AgentChatComponent ref="chatComponentRef" :agent-id="agentId" :single-mode="true">
-      <template #header-left>
-        <div type="button" class="agent-nav-btn" @click="openAgentModal">
-          <span class="text">{{ currentAgentName || '选择智能体' }}</span>
-          <ChevronDown size="16" class="switch-icon" />
-        </div>
-      </template>
-      <template #header-right>
-        <div type="button" class="agent-nav-btn" @click="handleShareChat">
-          <Share2 size="18" class="nav-btn-icon" />
-          <span class="text">分享</span>
-        </div>
-        <UserInfoComponent />
-      </template>
-    </AgentChatComponent>
-  </div>
-</template>
-
-<script setup>
-import { computed, ref, onMounted } from 'vue'
-import { message } from 'ant-design-vue'
-import { useRoute, useRouter } from 'vue-router'
-import { Share2, ChevronDown } from 'lucide-vue-next'
-import { StarFilled, StarOutlined } from '@ant-design/icons-vue'
-import AgentChatComponent from '@/components/AgentChatComponent.vue'
-import UserInfoComponent from '@/components/UserInfoComponent.vue'
-import { ChatExporter } from '@/utils/chatExporter'
-import { handleChatError } from '@/utils/errorHandler'
-import { useAgentStore } from '@/stores/agent'
-import { storeToRefs } from 'pinia'
-
-const route = useRoute()
-const router = useRouter()
-const agentStore = useAgentStore()
-
-const agentId = computed(() => route.params.agent_id)
-const chatComponentRef = ref(null)
-
-// 智能体选择弹窗状态
-const agentModalOpen = ref(false)
-
-// 从 store 获取智能体数据
-const { agents, defaultAgentId } = storeToRefs(agentStore)
-
-// 当前智能体名称
-const currentAgentName = computed(() => {
-  if (!agentId.value || !agents.value?.length) return '智能体加载中……'
-  const agent = agents.value.find((a) => a.id === agentId.value)
-  return agent ? agent.name : '未知智能体'
-})
-
-// 打开智能体选择弹窗
-const openAgentModal = () => {
-  agentModalOpen.value = true
-}
-
-// 从弹窗中选择智能体 - 切换路由
-const selectAgentFromModal = (newAgentId) => {
-  if (newAgentId === agentId.value) {
-    // 如果选择的是当前智能体，只需要关闭弹窗
-    agentModalOpen.value = false
-    return
-  }
-
-  // 跳转到新的智能体页面
-  router.push(`/agent/${newAgentId}`)
-  agentModalOpen.value = false
-}
-
-// 设置默认智能体
-const setAsDefaultAgent = async (agentIdToSet) => {
-  try {
-    await agentStore.setDefaultAgent(agentIdToSet)
-    message.success('已设置为默认智能体')
-  } catch (error) {
-    handleChatError(error, 'save')
-  }
-}
-
-const handleShareChat = async () => {
-  try {
-    const exportData = chatComponentRef.value?.getExportPayload?.()
-
-    if (!exportData) {
-      message.warning('当前没有可导出的对话内容')
-      return
-    }
-
-    const hasMessages = Boolean(exportData.messages?.length)
-    const hasOngoingMessages = Boolean(exportData.onGoingMessages?.length)
-
-    if (!hasMessages && !hasOngoingMessages) {
-      message.warning('当前对话暂无内容可导出，请先进行对话')
-      return
-    }
-
-    const result = await ChatExporter.exportToHTML(exportData)
-    message.success(`对话已导出为HTML文件: ${result.filename}`)
-  } catch (error) {
-    if (error?.message?.includes('没有可导出的对话内容')) {
-      message.warning('当前对话暂无内容可导出，请先进行对话')
-      return
-    }
-    handleChatError(error, 'export')
-  }
-}
-
-// 初始化时确保智能体 store 已加载
-onMounted(async () => {
-  if (!agentStore.isInitialized) {
-    try {
-      await agentStore.initialize()
-    } catch (error) {
-      console.error('初始化智能体 store 失败:', error)
-    }
-  }
-})
-</script>
-
-<style lang="less" scoped>
-.agent-single-view {
-  width: 100%;
-  height: 100vh;
-  overflow: hidden;
-  position: relative;
-  display: flex;
-  flex-direction: row;
-}
-
-.user-info-wrapper {
-  position: absolute;
-  top: 10px;
-  right: 20px;
-  z-index: 10;
-}
-
-// 智能体选择弹窗样式
-.agent-modal {
-  :deep(.ant-modal-content) {
-    border-radius: 8px;
-    overflow: hidden;
-  }
-
-  :deep(.ant-modal-header) {
-    background: var(--gray-0);
-    border-bottom: 1px solid var(--gray-200);
-    padding: 16px 20px;
-
-    .ant-modal-title {
-      font-weight: 600;
-      color: var(--gray-900);
-    }
-  }
-
-  :deep(.ant-modal-body) {
-    padding: 20px;
-    background: var(--gray-0);
-  }
-
-  .agent-modal-content {
-    .agents-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-      gap: 12px;
-      max-height: 500px;
-      overflow-y: auto;
-    }
-
-    .agent-card {
-      border: 1px solid var(--gray-200);
-      border-radius: 8px;
-      padding: 16px;
-      cursor: pointer;
-      transition: all 0.2s ease;
-      background: var(--gray-0);
-
-      &:hover {
-        border-color: var(--main-color);
-      }
-
-      .agent-card-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-start;
-        margin-bottom: 12px;
-
-        .agent-card-title {
-          flex: 1;
-
-          .agent-card-name {
-            font-size: 16px;
-            font-weight: 600;
-            color: var(--gray-900);
-            line-height: 1.4;
-          }
-        }
-
-        .default-icon {
-          color: var(--color-warning-500);
-          font-size: 16px;
-          flex-shrink: 0;
-          margin-left: 8px;
-          cursor: pointer;
-
-          &:hover {
-            color: var(--color-warning-600);
-          }
-        }
-      }
-
-      .agent-card-description {
-        font-size: 14px;
-        color: var(--gray-700);
-        line-height: 1.5;
-        word-break: break-word;
-        white-space: pre-wrap;
-      }
-
-      &.selected {
-        border-color: var(--main-color);
-        background: var(--main-20);
-
-        .agent-card-header .agent-card-title .agent-card-name {
-          color: var(--main-color);
-        }
-
-        .agent-card-description {
-          color: var(--gray-900);
-        }
-      }
-    }
-  }
-}
-
-// 响应式适配智能体弹窗
-@media (max-width: 768px) {
-  .agent-modal {
-    .agent-modal-content {
-      .agents-grid {
-        grid-template-columns: 1fr;
-      }
-    }
-  }
-}
-
-// 侧边栏样式
-.sidebar {
-  // position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  width: 240px;
-  background-color: var(--gray-50);
-  transition: all 0.3s ease;
-  z-index: 20;
-  display: flex;
-
-  &.collapsed {
-    width: 60px;
-  }
-
-  .sidebar-content {
-    flex: 1;
-    padding: 20px 10px;
-    overflow-y: auto;
-  }
-
-  .user-icon {
-    cursor: pointer;
-    margin-bottom: 20px;
-    padding-left: 4px 8px;
-
-    img {
-      width: 32px;
-      height: 32px;
-    }
-  }
-
-  .toggle-button {
-    position: absolute;
-    right: -15px;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 30px;
-    height: 30px;
-    background-color: var(--gray-0);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-
-    img {
-      width: 16px;
-      height: 16px;
-    }
-  }
-}
-</style>
-
-<style lang="less">
-.agent-nav-btn {
-  display: flex;
-  gap: 6px;
-  padding: 6px 8px;
-  justify-content: center;
-  align-items: center;
-  border-radius: 6px;
-  color: var(--gray-900);
-  cursor: pointer;
-  width: auto;
-  font-size: 15px;
-  transition: background-color 0.3s;
-  border: none;
-  background: transparent;
-
-  &:hover {
-    background-color: var(--gray-50);
-  }
-
-  .nav-btn-icon {
-    height: 24px;
-  }
-
-  .switch-icon {
-    color: var(--gray-500);
-    transition: all 0.2s ease;
-  }
-
-  &:hover .switch-icon {
-    color: var(--main-500);
-  }
-}
-</style>
diff --git a/web/src/views/AgentView.vue b/web/src/views/AgentView.vue
index ed347e47..7805236a 100644
--- a/web/src/views/AgentView.vue
+++ b/web/src/views/AgentView.vue
@@ -82,7 +82,7 @@
             </a-dropdown>
           </template>
 
-          <template #header-right>
+          <template #header-right v-if="userStore.isAdmin">
             <div
               v-if="selectedAgentId"
               ref="moreButtonRef"
@@ -103,13 +103,13 @@
       />
 
       <!-- 反馈模态框 -->
-      <FeedbackModalComponent ref="feedbackModal" :agent-id="selectedAgentId" />
+      <FeedbackModalComponent v-if="userStore.isAdmin" ref="feedbackModal" :agent-id="selectedAgentId" />
 
       <!-- 自定义更多菜单 -->
       <Teleport to="body">
         <Transition name="menu-fade">
           <div
-            v-if="chatUIStore.moreMenuOpen"
+            v-if="userStore.isAdmin && chatUIStore.moreMenuOpen"
             ref="moreMenuRef"
             class="more-popup-menu"
             :style="{
@@ -125,10 +125,6 @@
               <MessageOutlined class="menu-icon" />
               <span class="menu-text">查看反馈</span>
             </div>
-            <div class="menu-item" @click="handlePreview">
-              <EyeOutlined class="menu-icon" />
-              <span class="menu-text">预览页面</span>
-            </div>
           </div>
         </Transition>
       </Teleport>
@@ -137,10 +133,11 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { MessageOutlined, ShareAltOutlined, EyeOutlined } from '@ant-design/icons-vue'
+import { ref, watch } from 'vue'
+import { MessageOutlined, ShareAltOutlined } from '@ant-design/icons-vue'
 import { message } from 'ant-design-vue'
 import { Settings2, Ellipsis, ChevronDown, Star, CirclePlus, SquarePen } from 'lucide-vue-next'
+import { useRoute, useRouter } from 'vue-router'
 import AgentChatComponent from '@/components/AgentChatComponent.vue'
 import AgentConfigSidebar from '@/components/AgentConfigSidebar.vue'
 import FeedbackModalComponent from '@/components/dashboard/FeedbackModalComponent.vue'
@@ -162,12 +159,65 @@ const configDropdownOpen = ref(false)
 const userStore = useUserStore()
 const agentStore = useAgentStore()
 const chatUIStore = useChatUIStore()
+const route = useRoute()
+const router = useRouter()
 
 // 从 agentStore 中获取响应式状态
-const { selectedAgentId, agentConfigs, selectedAgentConfigId, selectedConfigSummary } =
+const { agents, selectedAgentId, agentConfigs, selectedAgentConfigId, selectedConfigSummary } =
   storeToRefs(agentStore)
 
+const syncingRouteAgent = ref(false)
+
+const getRouteAgentId = () => {
+  const value = route.params.agent_id
+  return typeof value === 'string' ? value : ''
+}
+
+const syncSelectedAgentFromRoute = async () => {
+  const routeAgentId = getRouteAgentId()
+  if (!routeAgentId) return
+
+  syncingRouteAgent.value = true
+  try {
+    if (!agentStore.isInitialized) {
+      await agentStore.initialize()
+    }
+
+    const routeAgentExists = (agents.value || []).some((agent) => agent.id === routeAgentId)
+    if (!routeAgentExists) {
+      if (selectedAgentId.value) {
+        await router.replace({ name: 'AgentCompWithId', params: { agent_id: selectedAgentId.value } })
+      }
+      return
+    }
+
+    if (selectedAgentId.value !== routeAgentId) {
+      await agentStore.selectAgent(routeAgentId)
+    }
+  } catch (error) {
+    handleChatError(error, 'load')
+  } finally {
+    syncingRouteAgent.value = false
+  }
+}
+
+watch(
+  () => route.params.agent_id,
+  () => {
+    syncSelectedAgentFromRoute()
+  },
+  { immediate: true }
+)
+
+watch(selectedAgentId, (newAgentId) => {
+  if (!newAgentId || syncingRouteAgent.value) return
+  const routeAgentId = getRouteAgentId()
+  if (routeAgentId === newAgentId) return
+  router.replace({ name: 'AgentCompWithId', params: { agent_id: newAgentId } })
+})
+
 const openConfigSidebar = () => {
+  configDropdownOpen.value = false
   chatUIStore.isConfigSidebarOpen = true
 }
 
@@ -176,6 +226,7 @@ const createConfigLoading = ref(false)
 const createConfigName = ref('')
 
 const openCreateConfigModal = () => {
+  configDropdownOpen.value = false
   createConfigName.value = ''
   createConfigModalOpen.value = true
 }
@@ -288,13 +339,6 @@ const handleFeedback = () => {
   closeMoreMenu()
   feedbackModal.value?.show()
 }
-
-const handlePreview = () => {
-  closeMoreMenu()
-  if (selectedAgentId.value) {
-    window.open(`/agent/${selectedAgentId.value}`, '_blank')
-  }
-}
 </script>
 
 <style lang="less" scoped>
diff --git a/web/src/views/LoginView.vue b/web/src/views/LoginView.vue
index 0302f896..1b5a4934 100644
--- a/web/src/views/LoginView.vue
+++ b/web/src/views/LoginView.vue
@@ -414,37 +414,13 @@ const handleLogin = async () => {
 
     // 根据用户角色决定重定向目标
     if (redirectPath === '/') {
-      // 如果是管理员，直接跳转到/chat页面
-      if (userStore.isAdmin) {
+      // 统一跳转到聊天页面（管理员与普通用户共享同一聊天界面）
+      try {
         await agentStore.initialize()
         router.push('/agent')
-        return
-      }
-
-      // 普通用户跳转到默认智能体
-      try {
-        // 初始化agentStore并获取智能体信息
-        await agentStore.initialize()
-
-        // 尝试获取默认智能体
-        if (agentStore.defaultAgentId) {
-          // 如果存在默认智能体，直接跳转
-          router.push(`/agent/${agentStore.defaultAgentId}`)
-          return
-        }
-
-        // 没有默认智能体，获取第一个可用智能体
-        const agentIds = Object.keys(agentStore.agents)
-        if (agentIds.length > 0) {
-          router.push(`/agent/${agentIds[0]}`)
-          return
-        }
-
-        // 没有可用智能体，回退到首页
-        router.push('/')
       } catch (error) {
         console.error('获取智能体信息失败:', error)
-        router.push('/')
+        router.push('/agent')
       }
     } else {
       // 跳转到其他预设的路径