+
+ {this.modelMenuTagLog ? : ''}
import('@/views/error/index'),
+ meta: {
+ i18nKey: 'Error',
+ icon: 'error',
+ },
+}
diff --git a/src/router/modules/index.ts b/src/router/modules/index.ts
index 4ad7e60b..389eb8a9 100644
--- a/src/router/modules/index.ts
+++ b/src/router/modules/index.ts
@@ -1,7 +1,8 @@
import dashboard from './dashboard'
import reyl from './rely'
+import error from './error'
-const routes = [dashboard, reyl]
+const routes = [dashboard, error, reyl]
export default routes
diff --git a/src/store/index.ts b/src/store/index.ts
index 6f394921..64e51525 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,3 +1,5 @@
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+
import type { App } from 'vue'
export { useSetting } from './modules/setting' // import { useSetting } from '@/store' 即可使用
@@ -7,4 +9,6 @@ const store = createPinia()
export const setupStore = (app: App) => {
app.use(store)
+
+ store.use(piniaPluginPersistedstate)
}
diff --git a/src/store/modules/menu.ts b/src/store/modules/menu.ts
index 9850bead..a1b10365 100644
--- a/src/store/modules/menu.ts
+++ b/src/store/modules/menu.ts
@@ -9,15 +9,28 @@ export const useMenu = defineStore('menu', () => {
const router = useRouter()
const { t } = useI18n()
- const cacheMenuKey = getCache('menuKey') === 'no' ? '' : getCache('menuKey')
+ const cacheMenuKey =
+ getCache('menuKey') === 'no' ? '/dashboard' : getCache('menuKey')
const menuState = reactive({
menuKey: cacheMenuKey as string | null, // 当前菜单 `key`
options: [] as RouteRecordRaw[], // 菜单列表
collapsed: false, // 是否折叠菜单
- reloadRouteLog: true, // 刷新路由开关
+ menuTagOptions: [] as RouteRecordRaw[],
})
+ const handleMenuTagOptions = (item: RouteRecordRaw) => {
+ if (item.path !== menuState.menuKey) {
+ const tag = menuState.menuTagOptions.find(
+ (curr) => curr.path === item.path,
+ )
+
+ if (!tag) {
+ menuState.menuTagOptions.push(item)
+ }
+ }
+ }
+
/**
*
* @param key 菜单更新后的 `key`
@@ -26,6 +39,8 @@ export const useMenu = defineStore('menu', () => {
* 修改 `menu key` 后的回调函数
*/
const menuModelValueChange = (key: string, item: MenuOption) => {
+ handleMenuTagOptions(item as unknown as RouteRecordRaw)
+
menuState.menuKey = key
router.push(`${item.path}`)
@@ -69,7 +84,14 @@ export const useMenu = defineStore('menu', () => {
),
}
- return curr.meta?.icon ? Object.assign(route, expandIcon) : route
+ const attr = curr.meta?.icon ? Object.assign(route, expandIcon) : route
+
+ // 初始化 `menu tag`
+ if (curr.path === cacheMenuKey) {
+ menuState.menuTagOptions.push(attr)
+ }
+
+ return attr
})
}
@@ -83,17 +105,14 @@ export const useMenu = defineStore('menu', () => {
const collapsedMenu = (collapsed: boolean) =>
(menuState.collapsed = collapsed)
- /**
- *
- * @param bool 刷新页面开关
- */
- const changeReloadLog = (bool: boolean) => (menuState.reloadRouteLog = bool)
+ const spliceMenTagOptions = (idx: number) =>
+ menuState.menuTagOptions.splice(idx, 1)
return {
...toRefs(menuState),
menuModelValueChange,
setupAppRoutes,
collapsedMenu,
- changeReloadLog,
+ spliceMenTagOptions,
}
})
diff --git a/src/store/modules/setting.ts b/src/store/modules/setting.ts
index f8b91f20..1e9baac7 100644
--- a/src/store/modules/setting.ts
+++ b/src/store/modules/setting.ts
@@ -1,49 +1,57 @@
-import { setCache, getCache } from '@/utils/cache'
-
-export const useSetting = defineStore('setting', () => {
- const cachePrimaryColor: string =
- getCache('primaryColor', 'localStorage') === 'no'
- ? '#18A058'
- : getCache('primaryColor', 'localStorage')
- const cacheTheme =
- getCache('theme', 'localStorage') === 'no'
- ? false
- : getCache('theme', 'localStorage')
-
- const settingState = reactive({
- drawerPlacement: 'right' as NaiveDrawerPlacement,
- primaryColorOverride: {
- common: {
- primaryColor: cachePrimaryColor, // 主题色
+export const useSetting = defineStore(
+ 'setting',
+ () => {
+ const settingState = reactive({
+ drawerPlacement: 'right' as NaiveDrawerPlacement,
+ primaryColorOverride: {
+ common: {
+ primaryColor: '#18A058', // 主题色
+ },
},
+ themeValue: false, // `true` 为黑夜主题, `false` 为白色主题
+ reloadRouteLog: true, // 刷新路由开关
+ menuTagLog: true, // 多标签页开关
+ })
+ const { locale } = useI18n()
+
+ const updateLocale = (key: string) => {
+ // TODO: 修改语言
+ locale.value = key
+ }
+
+ const changeTheme = (bool: boolean) => {
+ settingState.themeValue = bool
+ }
+
+ const changePrimaryColor = (value: string) => {
+ settingState.primaryColorOverride.common.primaryColor = value
+ }
+
+ /**
+ *
+ * @param bool 刷新页面开关
+ */
+ const changeReloadLog = (bool: boolean) =>
+ (settingState.reloadRouteLog = bool)
+
+ /**
+ *
+ * @param bool 刷新页面开关
+ */
+ const changeMenuTagLog = (bool: boolean) => (settingState.menuTagLog = bool)
+
+ return {
+ ...toRefs(settingState),
+ updateLocale,
+ changeTheme,
+ changePrimaryColor,
+ changeReloadLog,
+ changeMenuTagLog,
+ }
+ },
+ {
+ persist: {
+ key: 'piniaSettingStore',
},
- themeValue: cacheTheme, // `true` 为黑夜主题, `false` 为白色主题
- })
- const { locale } = useI18n()
-
- const updateLocale = (key: string) => {
- // TODO: 修改语言
- locale.value = key
-
- setCache('localeLanguage', key, 'localStorage')
- }
-
- const changeTheme = (bool: boolean) => {
- settingState.themeValue = bool
-
- setCache('theme', bool, 'localStorage')
- }
-
- const changePrimaryColor = (value: string) => {
- settingState.primaryColorOverride.common.primaryColor = value
-
- setCache('primaryColor', value, 'localStorage')
- }
-
- return {
- ...toRefs(settingState),
- updateLocale,
- changeTheme,
- changePrimaryColor,
- }
-})
+ },
+)
diff --git a/src/styles/setting.scss b/src/styles/setting.scss
index d7aeb144..e6146e3d 100644
--- a/src/styles/setting.scss
+++ b/src/styles/setting.scss
@@ -1,2 +1,3 @@
$layoutRouterViewContainer: 18px;
$layoutHeaderHeight: 64px;
+$layoutMenuHeight: 46px;
diff --git a/src/views/login/index.tsx b/src/views/login/index.tsx
index 98357ee8..9e112fb3 100644
--- a/src/views/login/index.tsx
+++ b/src/views/login/index.tsx
@@ -22,13 +22,11 @@ const Login = defineComponent({
const { t } = useI18n()
const { height: windowHeight } = useWindowSize()
const settingStore = useSetting()
- const { themeValue } = storeToRefs(settingStore)
const { updateLocale } = settingStore
return {
...toRefs(state),
windowHeight,
- themeValue,
updateLocale,
ray: t,
}
diff --git a/yarn.lock b/yarn.lock
index f3dbd889..60ea79df 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3489,6 +3489,11 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.3.1:
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+pinia-plugin-persistedstate@^2.4.0:
+ version "2.4.0"
+ resolved "https://registry.yarnpkg.com/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-2.4.0.tgz#fda569b3c397517a0cf8aba83a628283767da620"
+ integrity sha512-bQcpv47jk3ISl+InuJWsFaS/K7pRZ97kfoD2WCf/suhnlLy48k3BnFM2tI6YZ1xMsDaPv4yOsaPuPAUuSmEO2Q==
+
pinia@^2.0.17:
version "2.0.17"
resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.0.17.tgz#f925e5e4f73c15e16dfb4838176a9ca50752f26b"