ThemeConfig 主题配置

完整的主题配置抽屉。三个标签页分别控制 Header、顶部菜单和侧边菜单的颜色和字体大小。支持 Apply、Reset 和 Export JSON。

基本用法

<template>
  <ThemeConfigButton />
  <ThemeConfig ref="themeConfigRef" />
</template>

<script setup>
import { ThemeConfig, ThemeConfigButton } from '@/components/common'
import { ref } from 'vue'

const themeConfigRef = ref()
// 手动打开: themeConfigRef.value.open()
</script>

Expose 方法

方法名	说明
open()	用当前 store 配置初始化本地配置并打开抽屉

三个标签页

标签页	控制区域
Header	顶部 Header 的颜色、字体大小等
顶部菜单	顶部导航菜单的颜色配置
侧边菜单	侧边栏菜单的颜色和字体配置

操作按钮

• Apply：即时应用当前配置到 store
• Reset：重置为默认配置
• 导出 JSON：将当前配置导出为 JSON 文件

---

ThemeConfigButton 主题配置按钮

触发按钮组件，渲染一个悬浮的图标按钮（ai-icon:awesome），点击时打开其兄弟 ThemeConfig 抽屉。

<ThemeConfigButton />

无 Props、无 Events、无 Slots。

---

ToggleTheme 深色/浅色切换

深色/浅色模式切换按钮。日/月图标切换，支持 View Transition API 的圆形揭示过渡动画。

<ToggleTheme />

无 Props、无 Events、无 Slots。点击通过 useAppStore.toggleDark() 切换模式。