68 lines
1.4 KiB
Vue
68 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<ToolBar :bars="toolBars" />
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { h } from 'vue'
|
||
|
|
import { useRouter } from 'vue-router'
|
||
|
|
|
||
|
|
import type { ToolBarItemType } from '@/components/ToolBar'
|
||
|
|
import { ToolBar } from '@/components/ToolBar'
|
||
|
|
import docsRouters from '@/router/modules/docs'
|
||
|
|
|
||
|
|
import ActionDetail from './modules/ActionDetail.vue'
|
||
|
|
import { toggleTheme } from './modules/actions'
|
||
|
|
import Logo from './modules/Logo.vue'
|
||
|
|
import ThemeIcon from './modules/themeSwitch/ThemeIcon.vue'
|
||
|
|
|
||
|
|
const router = useRouter()
|
||
|
|
const emits = defineEmits<{
|
||
|
|
(e: 'change', value: string): void
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const leftBars: ToolBarItemType[] = docsRouters[0].children.map((el) => {
|
||
|
|
return {
|
||
|
|
label: el.meta.title,
|
||
|
|
action: async () => {
|
||
|
|
emits('change', 'help')
|
||
|
|
await router.push({
|
||
|
|
name: el.name
|
||
|
|
})
|
||
|
|
},
|
||
|
|
icon: () =>
|
||
|
|
h(ActionDetail, {
|
||
|
|
icon: el.meta.icon,
|
||
|
|
label: el.meta.title
|
||
|
|
}),
|
||
|
|
location: 'left'
|
||
|
|
}
|
||
|
|
})
|
||
|
|
const toolBars: ToolBarItemType[] = [
|
||
|
|
{
|
||
|
|
label: '首页',
|
||
|
|
action: async (_e: MouseEvent) => {
|
||
|
|
await router.push({
|
||
|
|
name: 'Pages'
|
||
|
|
})
|
||
|
|
},
|
||
|
|
icon: () => h(Logo),
|
||
|
|
divider: true,
|
||
|
|
location: 'left'
|
||
|
|
},
|
||
|
|
...leftBars,
|
||
|
|
{
|
||
|
|
label: '主题',
|
||
|
|
action: toggleTheme,
|
||
|
|
icon: () => h(ThemeIcon),
|
||
|
|
location: 'right'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="less">
|
||
|
|
.tool-bar-title {
|
||
|
|
font-size: 20px;
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
</style>
|