Sunlight UI

主题

Teeker2023-07-20
1075
4.2m

布局 ​

布局 ​

sunlight-admin 的布局组件有顶部栏、菜单栏、面包屑、标签栏、内容区、页脚等，位于 src/layout/components 目录下：

  • Breadcrumb: 面包屑导航组件
  • Footer: 页脚组件
  • Fullscreen: 全屏切换组件
  • Guide: 引导组件
  • Language: 语言切换组件
  • LayoutHorizontal: 横向布局组件
  • LayoutVertical: 纵向布局组件
  • Logo: Logo 组件
  • Menu: 菜单组件
  • SettingsDrawer: 布局设置抽屉组件
  • Tabs: 标签栏组件
  • ToolBar: 工具栏组件
  • AppMain: 主内容区组件

内容区（AppMain）专门加载路由组件，路由组件在 src/views 下。

布局支持 2 种形式动态切换：

  • 横向布局：src/layout/components/LayoutHorizontal
  • 纵向布局：src/layout/components/LayoutVertical

sunlight-admin 使用 Vue 的 <component :is="layoutComponents" /> 动态组件来实现布局的动态切换，具体实现请查看 src/layout/index.vue 内容。

默认布局 ​

可以在 src/store/modules/global.ts 的 layout 字段配置默认布局：

ts
export const useGlobalStore = defineStore({
  id: 'app-global',
  state: (): GlobalState => ({
    // 布局模式 (horizontal | vertical)
    layout: 'vertical',
    // 其他配置...
  }),
  // 其他配置...
})

页面切换 ​

虽然设置了默认布局，但是可以手动在页面上切换布局。

点击页面右上角的设置图标，打开设置抽屉，即可看到两种布局的预览图，点击进行切换布局。

提示

sunlight-admin 通过 Pinia 状态管理结合 piniaPersistConfig 实现了配置缓存功能，因此下次进入的布局会是切换后的布局。

标签栏 ​

sunlight-admin 的标签栏组件位于 src/layout/components/Tabs，支持以下功能：

  • 显示当前打开的路由页面
  • 支持标签页的新增、切换、关闭
  • 支持右键菜单操作（关闭当前、关闭其他、关闭所有）
  • 支持标签页的拖拽排序
  • 支持标签页的缓存

标签页缓存 ​

标签页缓存功能通过 Vue Router 的 keep-alive 组件实现，在 src/layout/components/Tabs 组件中配置：

vue
<keep-alive :include="cachedViews">
  <router-view :key="$route.fullPath" />
</keep-alive>

页面刷新 ​

方法一：使用 inject/provide 机制 ​

如果您想在执行完某些操作（增删改）之后刷新页面，sunlight-admin 提供了刷新页面的方法。

在组件中使用以下方式进行页面刷新：

ts
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

const refreshPage = () => {
  router.replace('/redirect' + route.fullPath)
}

// 调用刷新函数
refreshPage()

方法二：使用 mittBus 事件总线 ​

ts
import mittBus from '@/utils/mittBus'

// 发送刷新事件
mittBus.emit('refresh-page')

布局设置 ​

在设置抽屉中，除了可以切换布局模式外，还可以配置以下布局相关选项：

  • 主题颜色: 支持自定义主题色
  • 暗黑模式: 切换亮色/暗色主题
  • 面包屑: 显示/隐藏面包屑导航
  • 面包屑图标: 显示/隐藏面包屑导航图标
  • 标签栏: 显示/隐藏标签栏
  • 标签栏图标: 显示/隐藏标签栏图标
  • 页脚: 显示/隐藏页脚

这些配置都会通过 Pinia 进行管理，并持久化到本地存储中。

状态管理 Pinia ​

状态管理文件存储了 sunlight-admin 的共享数据，位于 src/store/modules 下：

  • global.ts：全局状态 Store，存储布局信息、主题配置、多语言信息等
  • user.ts：用户信息 Store，存储用户登录的信息
  • menu.ts：菜单信息 Store，存储菜单数据
  • tabs.ts：标签栏信息 Store，存储标签页数据

事件总线 ​

Vue3 已经去掉了事件总线，sunlight-admin 使用 mitt 库实现了事件总线功能，位于 src/utils/mittBus.ts。

在某个组件里注册一个事件到事件总线：

ts
import mittBus from '@/utils/mittBus'

mittBus.on('open-setting-drawer', () => (drawerVisible.value = true))

在任意组件中触发该事件：

ts
import mittBus from '@/utils/mittBus'

const openSettingsDrawer = () => {
  mittBus.emit('open-setting-drawer')
}

主题配置 ​

sunlight-admin 支持动态主题颜色和暗黑模式切换，通过 src/hooks/useTheme.ts 实现：

ts
import { useTheme } from '@/hooks/useTheme'

const { changePrimary, switchDark } = useTheme()

// 切换主题颜色
changePrimary('#409eff')

// 切换暗黑模式
switchDark(true)

进度条 ​

sunlight-admin 使用 nprogress 插件来实现页面加载过程的进度条显示，配置位于 src/plugins/nprogress.ts 文件里：

ts
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

NProgress.configure({
  easing: 'ease', // 动画方式
  speed: 500, // 递增进度条的速度
  showSpinner: true, // 是否显示加载 ico
  trickleSpeed: 200, // 自动递增间隔
  minimum: 0.3, // 初始化时的最小百分比
})

export default NProgress