99 lines
2.3 KiB
TypeScript
99 lines
2.3 KiB
TypeScript
|
import { exportCanvas, importCanvas, recoveryDraft, setShowEm, undo } from 'open-data-v/designer'
|
||
|
|
import { h } from 'vue'
|
||
|
|
import type { RouteLocationNormalizedLoaded, Router } from 'vue-router'
|
||
|
|
|
||
|
|
import LogoView from '@/components/LogoView'
|
||
|
|
import type { ToolBarItemType } from '@/components/ToolBar'
|
||
|
|
import { useProjectSettingStoreWithOut } from '@/store/modules/projectSetting'
|
||
|
|
|
||
|
|
import showIconCard from './iconList'
|
||
|
|
import showSaveCard from './save'
|
||
|
|
import ThemeIcon from './themeSwitch/ThemeIcon.vue'
|
||
|
|
|
||
|
|
const projectStore = useProjectSettingStoreWithOut()
|
||
|
|
|
||
|
|
const toggleTheme = () => {
|
||
|
|
projectStore.setNavTheme(!projectStore.darkTheme ? 'light' : 'dark')
|
||
|
|
projectStore.setDarkTheme(!projectStore.darkTheme)
|
||
|
|
}
|
||
|
|
export default function useToolBars(
|
||
|
|
router: Router,
|
||
|
|
route: RouteLocationNormalizedLoaded
|
||
|
|
): Array<ToolBarItemType> {
|
||
|
|
return [
|
||
|
|
{
|
||
|
|
label: '首页',
|
||
|
|
action: async (_e: MouseEvent) => {
|
||
|
|
await router.push({
|
||
|
|
name: 'Pages'
|
||
|
|
})
|
||
|
|
},
|
||
|
|
icon: () =>
|
||
|
|
h(LogoView, {
|
||
|
|
width: '40px'
|
||
|
|
}),
|
||
|
|
divider: true
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '保存',
|
||
|
|
action: () => showSaveCard(route.params.index as string),
|
||
|
|
icon: 'save'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '预览',
|
||
|
|
action: (_e: MouseEvent) => {
|
||
|
|
const { href } = router.resolve('/preview')
|
||
|
|
window.open(href, '_blank')
|
||
|
|
},
|
||
|
|
icon: 'preview'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '撤销',
|
||
|
|
action: undo,
|
||
|
|
icon: 'back'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '恢复',
|
||
|
|
action: recoveryDraft,
|
||
|
|
icon: 'next'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '导出',
|
||
|
|
action: () => exportCanvas((route.params.index as string) || ''),
|
||
|
|
icon: 'download'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '导入',
|
||
|
|
action: importCanvas,
|
||
|
|
icon: 'upload'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '全屏',
|
||
|
|
action: () => {
|
||
|
|
const el: HTMLElement | null = document.querySelector('#editor')
|
||
|
|
if (document.fullscreenEnabled && el) {
|
||
|
|
el.requestFullscreen()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
icon: 'fullScreen'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '坐标',
|
||
|
|
action: setShowEm,
|
||
|
|
icon: 'axis'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '图标',
|
||
|
|
action: showIconCard,
|
||
|
|
icon: 'cube',
|
||
|
|
location: 'right'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '主题',
|
||
|
|
action: toggleTheme,
|
||
|
|
icon: () => h(ThemeIcon),
|
||
|
|
location: 'right'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|