diff --git a/src/interface/index.ts b/src/interface/index.ts index 35991447..1ee945d2 100644 --- a/src/interface/index.ts +++ b/src/interface/index.ts @@ -1,2 +1,2 @@ export { UserInfo } from './business'; -export { ThemeSettings, NavMode } from './theme'; +export { ThemeSettings, NavMode, AnimateType } from './theme'; diff --git a/src/interface/theme.ts b/src/interface/theme.ts index 1ab38fc6..c15cd53f 100644 --- a/src/interface/theme.ts +++ b/src/interface/theme.ts @@ -81,11 +81,18 @@ interface CrumbsStyle { showIcon: boolean; } -type AnimateType = keyof typeof EnumAnimate; +export type AnimateType = keyof typeof EnumAnimate; + +interface AnimateTypeList { + value: AnimateType; + label: EnumAnimate; +} interface PageStyle { /** 页面是否开启动画 */ animate: boolean; /** 动画类型 */ animateType: AnimateType; + /** 动画类型列表 */ + animateTypeList: AnimateTypeList[]; } diff --git a/src/layouts/BasicLayout/components/SettingDrawer/components/PageFunc/index.vue b/src/layouts/BasicLayout/components/SettingDrawer/components/PageFunc/index.vue index ed54df37..7d715125 100644 --- a/src/layouts/BasicLayout/components/SettingDrawer/components/PageFunc/index.vue +++ b/src/layouts/BasicLayout/components/SettingDrawer/components/PageFunc/index.vue @@ -1,22 +1,39 @@ diff --git a/src/layouts/BasicLayout/components/SettingDrawer/components/PageView/index.vue b/src/layouts/BasicLayout/components/SettingDrawer/components/PageView/index.vue index b4c6b197..705c1b91 100644 --- a/src/layouts/BasicLayout/components/SettingDrawer/components/PageView/index.vue +++ b/src/layouts/BasicLayout/components/SettingDrawer/components/PageView/index.vue @@ -1,8 +1,42 @@ diff --git a/src/layouts/BasicLayout/components/SettingDrawer/components/common/SettingMenuItem.vue b/src/layouts/BasicLayout/components/SettingDrawer/components/common/SettingMenuItem.vue new file mode 100644 index 00000000..73ab9e71 --- /dev/null +++ b/src/layouts/BasicLayout/components/SettingDrawer/components/common/SettingMenuItem.vue @@ -0,0 +1,16 @@ + + + + diff --git a/src/layouts/BasicLayout/components/SettingDrawer/components/common/index.ts b/src/layouts/BasicLayout/components/SettingDrawer/components/common/index.ts index e521812b..169aa21b 100644 --- a/src/layouts/BasicLayout/components/SettingDrawer/components/common/index.ts +++ b/src/layouts/BasicLayout/components/SettingDrawer/components/common/index.ts @@ -1,3 +1,4 @@ import ColorBlock from './ColorBlock.vue'; +import SettingMenuItem from './SettingMenuItem.vue'; -export { ColorBlock }; +export { ColorBlock, SettingMenuItem }; diff --git a/src/plugins/index.ts b/src/plugins/index.ts index ba9de06c..5c72f7db 100644 --- a/src/plugins/index.ts +++ b/src/plugins/index.ts @@ -1,5 +1,4 @@ import setupSmoothScroll from './smooth-scroll'; -import setupNaive from './naive'; import setupWindicssDarkMode from './dark-mode'; -export { setupSmoothScroll, setupNaive, setupWindicssDarkMode }; +export { setupSmoothScroll, setupWindicssDarkMode }; diff --git a/src/plugins/naive.ts b/src/plugins/naive.ts deleted file mode 100644 index a0d2b8da..00000000 --- a/src/plugins/naive.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { - create, - NLayout, - NLayoutSider, - NLayoutHeader, - NLayoutContent, - NLayoutFooter, - NSpace, - NButton, - NDatePicker, - NInput -} from 'naive-ui'; -import type { App } from 'vue'; - -export default function setupNaive(app: App) { - const naive = create({ - components: [ - NLayout, - NLayoutSider, - NLayoutHeader, - NLayoutContent, - NLayoutFooter, - NSpace, - NButton, - NDatePicker, - NInput - ] - }); - app.use(naive); -} diff --git a/src/settings/theme/index.ts b/src/settings/theme/index.ts index 985b8a1a..24987720 100644 --- a/src/settings/theme/index.ts +++ b/src/settings/theme/index.ts @@ -1,4 +1,5 @@ import type { ThemeSettings } from '@/interface'; +import { EnumAnimate } from '@/enum'; const themeColorList = [ '#409EFF', @@ -36,7 +37,6 @@ const themeSettings: ThemeSettings = { theme: 'light' }, menuStyle: { - collapsed: false, width: 200, collapsedWidth: 64, fixed: true, @@ -58,7 +58,15 @@ const themeSettings: ThemeSettings = { }, pageStyle: { animate: true, - animateType: 'zoom-fade' + animateType: 'zoom-fade', + animateTypeList: [ + { value: 'zoom-fade', label: EnumAnimate['zoom-fade'] }, + { value: 'zoom-out', label: EnumAnimate['zoom-out'] }, + { value: 'fade-slide', label: EnumAnimate['fade-slide'] }, + { value: 'fade', label: EnumAnimate.fade }, + { value: 'fade-bottom', label: EnumAnimate['fade-bottom'] }, + { value: 'fade-scale', label: EnumAnimate['fade-scale'] } + ] } }; diff --git a/src/store/modules/theme/index.ts b/src/store/modules/theme/index.ts index c87e939a..453a8de8 100644 --- a/src/store/modules/theme/index.ts +++ b/src/store/modules/theme/index.ts @@ -2,7 +2,7 @@ import { defineStore } from 'pinia'; import type { GlobalThemeOverrides } from 'naive-ui'; import { themeSettings } from '@/settings'; import { store } from '@/store'; -import type { ThemeSettings, NavMode } from '@/interface'; +import type { ThemeSettings, NavMode, AnimateType } from '@/interface'; import { getHoverAndPressedColor } from './helpers'; type ThemeState = ThemeSettings; @@ -69,9 +69,39 @@ const themeStore = defineStore({ handleSplitMenu(isSplit: boolean) { this.menuStyle.splitMenu = isSplit; }, + /** 更改菜单展开的宽度 */ + handleMenuWidth(width: number) { + this.menuStyle.width = width; + }, + /** 更改头部的高度(不包含tab标签) */ + handleHeaderHeight(height: number) { + this.headerStyle.height = height; + }, /** 固定头部 */ handleFixedHeader(isFixed: boolean) { this.headerStyle.fixed = isFixed; + }, + /** 设置多标签的显示 */ + handleMultiTabVisible(visible: boolean) { + this.multiTabStyle.visible = visible; + }, + /** 设置面包屑的显示 */ + handleCrumbsVisible(visible: boolean) { + this.crumbsStyle.visible = visible; + }, + /** 设置面包屑图标的显示 */ + handleCrumbsIconVisible(visible: boolean) { + this.crumbsStyle.showIcon = visible; + }, + /** 开启页面切换动画 */ + handlePageAnimate(animate: boolean) { + this.pageStyle.animate = animate; + }, + /** 设置页面切换动画类型 */ + handlePageAnimateType(animateType: AnimateType) { + if (this.pageStyle.animate) { + this.pageStyle.animateType = animateType; + } } } });