refactor(projects): 恢复pinia默认写法

This commit is contained in:
Soybean
2022-01-16 20:13:11 +08:00
parent 28b5d22401
commit b2a4ddf5e3
34 changed files with 1242 additions and 965 deletions

View File

@ -1,6 +1,6 @@
<template>
<hover-container class="w-40px" content-class="hover:text-primary" tooltip-content="主题模式">
<dark-mode-switch :dark="theme.darkMode" class="wh-full" @update:dark="setDarkMode" />
<dark-mode-switch :dark="theme.darkMode" class="wh-full" @update:dark="theme.setDarkMode" />
</hover-container>
</template>
@ -9,6 +9,5 @@ import { HoverContainer, DarkModeSwitch } from '@/components';
import { useThemeStore } from '@/store';
const theme = useThemeStore();
const { setDarkMode } = useThemeStore();
</script>
<style scoped></style>

View File

@ -45,7 +45,7 @@ function handleDropdown(optionKey: string) {
positiveText: '确定',
negativeText: '取消',
onPositiveClick: () => {
auth.resetAuthStore(true);
auth.resetAuthStore();
}
});
}

View File

@ -1,7 +1,9 @@
<template>
<router-link :to="routeHomePath" class="flex-center w-full nowrap-hidden">
<system-logo class="w-32px h-32px text-primary" />
<h2 v-if="showTitle" class="pl-8px text-16px font-bold text-primary">{{ title }}</h2>
<h2 v-show="showTitle" class="pl-8px text-16px font-bold text-primary transition duration-300 ease-in-out">
{{ title }}
</h2>
</router-link>
</template>

View File

@ -44,7 +44,7 @@ function getActiveKeysInMenus(menu: GlobalMenuOption) {
keys.push(menu.routeName);
}
if (menu.children) {
keys.push(...menu.children.map(item => getActiveKeysInMenus(item as GlobalMenuOption)).flat());
keys.push(...menu.children.map(item => getActiveKeysInMenus(item as GlobalMenuOption)).flat(1));
}
return keys;
}

View File

@ -3,7 +3,7 @@
type="primary"
:class="[{ '!right-330px': app.settingDrawerVisible }, app.settingDrawerVisible ? 'ease-out' : 'ease-in']"
class="fixed top-240px right-14px z-10000 w-42px h-42px !p-0 transition-all duration-300"
@click="toggleSettingdrawerVisible"
@click="app.toggleSettingdrawerVisible"
>
<icon-ant-design:close-outlined v-if="app.settingDrawerVisible" class="text-24px" />
<icon-ant-design:setting-outlined v-else class="text-24px" />
@ -15,6 +15,5 @@ import { NButton } from 'naive-ui';
import { useAppStore } from '@/store';
const app = useAppStore();
const { toggleSettingdrawerVisible } = useAppStore();
</script>
<style scoped></style>

View File

@ -2,7 +2,7 @@
<n-divider title-placement="center">界面功能</n-divider>
<n-space vertical size="large">
<setting-menu label="固定头部和多页签">
<n-switch :value="theme.fixedHeaderAndTab" @update:value="setIsFixedHeaderAndTab" />
<n-switch :value="theme.fixedHeaderAndTab" @update:value="theme.setIsFixedHeaderAndTab" />
</setting-menu>
<setting-menu label="顶部菜单位置">
<n-select
@ -10,7 +10,7 @@
size="small"
:value="theme.menu.horizontalPosition"
:options="theme.menu.horizontalPositionList"
@update:value="setHorizontalMenuPosition"
@update:value="theme.setHorizontalMenuPosition"
/>
</setting-menu>
<setting-menu label="头部高度">
@ -19,7 +19,7 @@
size="small"
:value="theme.header.height"
:step="1"
@update:value="handleSetNumber($event, setHeaderHeight)"
@update:value="theme.setHeaderHeight"
/>
</setting-menu>
<setting-menu label="多页签高度">
@ -28,11 +28,11 @@
size="small"
:value="theme.tab.height"
:step="1"
@update:value="handleSetNumber($event, setTabHeight)"
@update:value="theme.setTabHeight"
/>
</setting-menu>
<setting-menu label="多页签缓存">
<n-switch :value="theme.tab.isCache" @update:value="setTabIsCache" />
<n-switch :value="theme.tab.isCache" @update:value="theme.setTabIsCache" />
</setting-menu>
<setting-menu label="侧边栏展开宽度">
<n-input-number
@ -40,7 +40,7 @@
size="small"
:value="theme.sider.width"
:step="10"
@update:value="handleSetNumber($event, setSiderWidth)"
@update:value="theme.setSiderWidth"
/>
</setting-menu>
<setting-menu label="左侧混合侧边栏展开宽度">
@ -49,11 +49,11 @@
size="small"
:value="theme.sider.mixWidth"
:step="5"
@update:value="handleSetNumber($event, setMixSiderWidth)"
@update:value="theme.setMixSiderWidth"
/>
</setting-menu>
<setting-menu label="固定底部">
<n-switch :value="theme.footer.fixed" @update:value="setFooterIsFixed" />
<n-switch :value="theme.footer.fixed" @update:value="theme.setFooterIsFixed" />
</setting-menu>
</n-space>
</template>
@ -64,21 +64,5 @@ import { useThemeStore } from '@/store';
import SettingMenu from '../SettingMenu/index.vue';
const theme = useThemeStore();
const {
setHorizontalMenuPosition,
setIsFixedHeaderAndTab,
setHeaderHeight,
setTabHeight,
setSiderWidth,
setMixSiderWidth,
setTabIsCache,
setFooterIsFixed
} = useThemeStore();
function handleSetNumber(value: number | null, callback: (value: number) => void) {
if (value !== null) {
callback(value);
}
}
</script>
<style scoped></style>

View File

@ -2,13 +2,13 @@
<n-divider title-placement="center">界面显示</n-divider>
<n-space vertical size="large">
<setting-menu label="面包屑">
<n-switch :value="theme.header.crumb.visible" @update:value="setHeaderCrumbVisible" />
<n-switch :value="theme.header.crumb.visible" @update:value="theme.setHeaderCrumbVisible" />
</setting-menu>
<setting-menu label="面包屑图标">
<n-switch :value="theme.header.crumb.showIcon" @update:value="setHeaderCrumbIconVisible" />
<n-switch :value="theme.header.crumb.showIcon" @update:value="theme.setHeaderCrumbIconVisible" />
</setting-menu>
<setting-menu label="多页签">
<n-switch :value="theme.tab.visible" @update:value="setTabVisible" />
<n-switch :value="theme.tab.visible" @update:value="theme.setTabVisible" />
</setting-menu>
<setting-menu label="多页签风格">
<n-select
@ -16,11 +16,11 @@
size="small"
:value="theme.tab.mode"
:options="theme.tab.modeList"
@update:value="setTabMode"
@update:value="theme.setTabMode"
/>
</setting-menu>
<setting-menu label="页面切换动画">
<n-switch :value="theme.page.animate" @update:value="setPageIsAnimate" />
<n-switch :value="theme.page.animate" @update:value="theme.setPageIsAnimate" />
</setting-menu>
<setting-menu label="页面切换动画类型">
<n-select
@ -28,7 +28,7 @@
size="small"
:value="theme.page.animateMode"
:options="theme.page.animateModeList"
@update:value="setPageAnimateMode"
@update:value="theme.setPageAnimateMode"
/>
</setting-menu>
</n-space>
@ -40,13 +40,5 @@ import { useThemeStore } from '@/store';
import SettingMenu from '../SettingMenu/index.vue';
const theme = useThemeStore();
const {
setHeaderCrumbVisible,
setHeaderCrumbIconVisible,
setTabVisible,
setTabMode,
setPageIsAnimate,
setPageAnimateMode
} = useThemeStore();
</script>
<style scoped></style>