feat: LDAP适配深色模式

web/admin-spa/src/components/layout/MainLayout.vue

@@ -20,30 +20,43 @@
 </template>
 
 <script setup>
-import { ref, watch, nextTick } from 'vue'
+import { ref, watch, nextTick, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
 import AppHeader from './AppHeader.vue'
 import TabBar from './TabBar.vue'
 
 const route = useRoute()
 const router = useRouter()
+const authStore = useAuthStore()
 
 // 根据路由设置当前激活的标签
 const activeTab = ref('dashboard')
 
-const tabRouteMap = {
-  dashboard: '/dashboard',
-  apiKeys: '/api-keys',
-  accounts: '/accounts',
-  userManagement: '/user-management',
-  tutorial: '/tutorial',
-  settings: '/settings'
-}
+// 根据 LDAP 配置动态生成路由映射
+const tabRouteMap = computed(() => {
+  const baseMap = {
+    dashboard: '/dashboard',
+    apiKeys: '/api-keys',
+    accounts: '/accounts',
+    tutorial: '/tutorial',
+    settings: '/settings'
+  }
+
+  // 只有在 LDAP 启用时才包含用户管理路由
+  if (authStore.oemSettings?.ldapEnabled) {
+    baseMap.userManagement = '/user-management'
+  }
+
+  return baseMap
+})
 
 // 初始化当前激活的标签
 const initActiveTab = () => {
   const currentPath = route.path
-  const tabKey = Object.keys(tabRouteMap).find((key) => tabRouteMap[key] === currentPath)
+  const tabKey = Object.keys(tabRouteMap.value).find(
+    (key) => tabRouteMap.value[key] === currentPath
+  )
 
   if (tabKey) {
     activeTab.value = tabKey
@@ -73,7 +86,7 @@ initActiveTab()
 watch(
   () => route.path,
   (newPath) => {
-    const tabKey = Object.keys(tabRouteMap).find((key) => tabRouteMap[key] === newPath)
+    const tabKey = Object.keys(tabRouteMap.value).find((key) => tabRouteMap.value[key] === newPath)
     if (tabKey) {
       activeTab.value = tabKey
     } else {
@@ -96,7 +109,7 @@ watch(
 // 处理标签切换
 const handleTabChange = async (tabKey) => {
   // 如果已经在目标路由，不需要做任何事
-  if (tabRouteMap[tabKey] === route.path) {
+  if (tabRouteMap.value[tabKey] === route.path) {
     return
   }
 
@@ -105,7 +118,7 @@ const handleTabChange = async (tabKey) => {
 
   // 使用 await 确保路由切换完成
   try {
-    await router.push(tabRouteMap[tabKey])
+    await router.push(tabRouteMap.value[tabKey])
     // 等待下一个DOM更新周期，确保组件正确渲染
     await nextTick()
   } catch (err) {

web/admin-spa/src/components/layout/TabBar.vue

@@ -37,6 +37,9 @@
 </template>
 
 <script setup>
+import { computed } from 'vue'
+import { useAuthStore } from '@/stores/auth'
+
 defineProps({
   activeTab: {
     type: String,
@@ -46,14 +49,33 @@ defineProps({
 
 defineEmits(['tab-change'])
 
-const tabs = [
-  { key: 'dashboard', name: '仪表板', shortName: '仪表板', icon: 'fas fa-tachometer-alt' },
-  { key: 'apiKeys', name: 'API Keys', shortName: 'API', icon: 'fas fa-key' },
-  { key: 'accounts', name: '账户管理', shortName: '账户', icon: 'fas fa-user-circle' },
-  { key: 'userManagement', name: '用户管理', shortName: '用户', icon: 'fas fa-users' },
-  { key: 'tutorial', name: '使用教程', shortName: '教程', icon: 'fas fa-graduation-cap' },
-  { key: 'settings', name: '系统设置', shortName: '设置', icon: 'fas fa-cogs' }
-]
+const authStore = useAuthStore()
+
+// 根据 LDAP 配置动态生成 tabs
+const tabs = computed(() => {
+  const baseTabs = [
+    { key: 'dashboard', name: '仪表板', shortName: '仪表板', icon: 'fas fa-tachometer-alt' },
+    { key: 'apiKeys', name: 'API Keys', shortName: 'API', icon: 'fas fa-key' },
+    { key: 'accounts', name: '账户管理', shortName: '账户', icon: 'fas fa-user-circle' }
+  ]
+
+  // 只有在 LDAP 启用时才显示用户管理
+  if (authStore.oemSettings?.ldapEnabled) {
+    baseTabs.push({
+      key: 'userManagement',
+      name: '用户管理',
+      shortName: '用户',
+      icon: 'fas fa-users'
+    })
+  }
+
+  baseTabs.push(
+    { key: 'tutorial', name: '使用教程', shortName: '教程', icon: 'fas fa-graduation-cap' },
+    { key: 'settings', name: '系统设置', shortName: '设置', icon: 'fas fa-cogs' }
+  )
+
+  return baseTabs
+})
 </script>
 
 <style scoped>