feat: art-design-pro 脚手架落地与品牌化（八页骨架/代理配置/权限菜单）

- 模板 art-design-pro（MIT）GitHub 直连克隆后裁剪落地 admin/：删除演示页面/示例数据/mock/未用组件，保留构建与依赖清单 - 品牌化：应用名/标题/侧栏与登录页 logo/浏览器 favicon 全部替换为 all-kefu 自有资源（static/kefu-small.png），中文界面 - 八页骨架：login / force-change-password / dashboard / tenants / conversations / config / stats / settings 占位页 + 6 组路由模块 - 权限菜单：meta.roles 前端过滤，super 全量，tenant 隐藏租户管理/平台设置（角色值与后端一致） - 开发代理：/api 直转 + /api/public 与 /static 携带租户 Host 改写（VITE_TENANT_PREVIEW_HOST），适配后端 TenantHostMiddleware - 认证 API 为开发桩（角色调试开关），Task 3 对接真实登录 Co-Authored-By: Claude Code <noreply@anthropic.com>
2026-10-13 14:51:24 +08:00
parent 0c25287c19
commit 78ff060420
290 changed files with 38981 additions and 0 deletions
@@ -0,0 +1,201 @@
+/**
+ * useHeaderBar - 顶部栏功能管理
+ *
+ * 统一管理顶部栏各个功能模块的显示状态和配置信息。
+ * 提供灵活的功能开关控制，支持动态显示/隐藏顶部栏的各个功能按钮。
+ *
+ * ## 主要功能
+ *
+ * 1. 功能开关控制 - 统一管理菜单按钮、刷新按钮、快速入口等功能的显示状态
+ * 2. 配置信息获取 - 获取各个功能模块的详细配置信息
+ * 3. 功能列表查询 - 快速获取所有启用或禁用的功能列表
+ * 4. 响应式状态 - 所有状态自动响应配置和 store 变化
+ *
+ * @module useHeaderBar
+ * @author Art Design Pro Team
+ */
+
+import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useSettingStore } from '@/store/modules/setting'
+import { headerBarConfig } from '@/config/modules/headerBar'
+import { HeaderBarFeatureConfig } from '@/types'
+
+/**
+ * 顶部栏功能管理
+ * @returns 顶部栏功能相关的状态和方法
+ */
+export function useHeaderBar() {
+  const settingStore = useSettingStore()
+
+  // 获取顶部栏配置
+  const headerBarConfigRef = computed<HeaderBarFeatureConfig>(() => headerBarConfig)
+
+  // 从store中获取相关状态
+  const { showMenuButton, showFastEnter, showRefreshButton, showCrumbs, showLanguage } =
+    storeToRefs(settingStore)
+
+  /**
+   * 检查特定功能是否启用
+   * @param feature 功能名称
+   * @returns 是否启用
+   */
+  const isFeatureEnabled = (feature: keyof HeaderBarFeatureConfig): boolean => {
+    return headerBarConfigRef.value[feature]?.enabled ?? false
+  }
+
+  /**
+   * 获取功能配置信息
+   * @param feature 功能名称
+   * @returns 功能配置信息
+   */
+  const getFeatureConfig = (feature: keyof HeaderBarFeatureConfig) => {
+    return headerBarConfigRef.value[feature]
+  }
+
+  // 检查菜单按钮是否显示
+  const shouldShowMenuButton = computed(() => {
+    return isFeatureEnabled('menuButton') && showMenuButton.value
+  })
+
+  // 检查刷新按钮是否显示
+  const shouldShowRefreshButton = computed(() => {
+    return isFeatureEnabled('refreshButton') && showRefreshButton.value
+  })
+
+  // 检查快速入口是否显示
+  const shouldShowFastEnter = computed(() => {
+    return isFeatureEnabled('fastEnter') && showFastEnter.value
+  })
+
+  // 检查面包屑是否显示
+  const shouldShowBreadcrumb = computed(() => {
+    return isFeatureEnabled('breadcrumb') && showCrumbs.value
+  })
+
+  // 检查全局搜索是否显示
+  const shouldShowGlobalSearch = computed(() => {
+    return isFeatureEnabled('globalSearch')
+  })
+
+  // 检查全屏按钮是否显示
+  const shouldShowFullscreen = computed(() => {
+    return isFeatureEnabled('fullscreen')
+  })
+
+  // 检查通知中心是否显示
+  const shouldShowNotification = computed(() => {
+    return isFeatureEnabled('notification')
+  })
+
+  // 检查聊天功能是否显示
+  const shouldShowChat = computed(() => {
+    return isFeatureEnabled('chat')
+  })
+
+  // 检查语言切换是否显示
+  const shouldShowLanguage = computed(() => {
+    return isFeatureEnabled('language') && showLanguage.value
+  })
+
+  // 检查设置面板是否显示
+  const shouldShowSettings = computed(() => {
+    return isFeatureEnabled('settings')
+  })
+
+  // 检查主题切换是否显示
+  const shouldShowThemeToggle = computed(() => {
+    return isFeatureEnabled('themeToggle')
+  })
+
+  // 获取快速入口的最小宽度
+  const fastEnterMinWidth = computed(() => {
+    const config = getFeatureConfig('fastEnter')
+    return (config as any)?.minWidth || 1200
+  })
+
+  /**
+   * 检查功能是否启用（别名）
+   * @param feature 功能名称
+   * @returns 是否启用
+   */
+  const isFeatureActive = (feature: keyof HeaderBarFeatureConfig): boolean => {
+    return isFeatureEnabled(feature)
+  }
+
+  /**
+   * 获取功能配置（别名）
+   * @param feature 功能名称
+   * @returns 功能配置
+   */
+  const getFeatureInfo = (feature: keyof HeaderBarFeatureConfig) => {
+    return getFeatureConfig(feature)
+  }
+
+  /**
+   * 获取所有启用的功能列表
+   * @returns 启用的功能名称数组
+   */
+  const getEnabledFeatures = (): (keyof HeaderBarFeatureConfig)[] => {
+    return Object.keys(headerBarConfigRef.value).filter(
+      (key) => headerBarConfigRef.value[key as keyof HeaderBarFeatureConfig]?.enabled
+    ) as (keyof HeaderBarFeatureConfig)[]
+  }
+
+  /**
+   * 获取所有禁用的功能列表
+   * @returns 禁用的功能名称数组
+   */
+  const getDisabledFeatures = (): (keyof HeaderBarFeatureConfig)[] => {
+    return Object.keys(headerBarConfigRef.value).filter(
+      (key) => !headerBarConfigRef.value[key as keyof HeaderBarFeatureConfig]?.enabled
+    ) as (keyof HeaderBarFeatureConfig)[]
+  }
+
+  /**
+   * 获取所有启用的功能（别名）
+   * @returns 启用的功能列表
+   */
+  const getActiveFeatures = () => {
+    return getEnabledFeatures()
+  }
+
+  /**
+   * 获取所有禁用的功能（别名）
+   * @returns 禁用的功能列表
+   */
+  const getInactiveFeatures = () => {
+    return getDisabledFeatures()
+  }
+
+  return {
+    // 配置
+    headerBarConfig: headerBarConfigRef,
+
+    // 显示状态计算属性
+    shouldShowMenuButton, // 是否显示菜单按钮
+    shouldShowRefreshButton, // 是否显示刷新按钮
+    shouldShowFastEnter, // 是否显示快速入口
+    shouldShowBreadcrumb, // 是否显示面包屑
+    shouldShowGlobalSearch, // 是否显示全局搜索
+    shouldShowFullscreen, // 是否显示全屏按钮
+    shouldShowNotification, // 是否显示通知中心
+    shouldShowChat, // 是否显示聊天功能
+    shouldShowLanguage, // 是否显示语言切换
+    shouldShowSettings, // 是否显示设置面板
+    shouldShowThemeToggle, // 是否显示主题切换
+
+    // 配置相关
+    fastEnterMinWidth, // 快速入口最小宽度
+
+    // 方法
+    isFeatureEnabled, // 检查功能是否启用
+    isFeatureActive, // 检查功能是否启用（别名）
+    getFeatureConfig, // 获取功能配置
+    getFeatureInfo, // 获取功能配置（别名）
+    getEnabledFeatures, // 获取所有启用的功能
+    getDisabledFeatures, // 获取所有禁用的功能
+    getActiveFeatures, // 获取所有启用的功能（别名）
+    getInactiveFeatures // 获取所有禁用的功能（别名）
+  }
+}