version: v4.9.0

CHANGELOG.md

@@ -1,5 +1,23 @@
 # CHANGE LOG
 
+## 4.9.0
+
+主要修复了一个歧义问题，就是新开页面输入 `url`，或者是 `window.open` 打开当前系统的页面时，会导致初始化异常的问题。这是因为以前的 `appMenu`, `appSigning` 相关的缓存都是防止与 `sessionStorage`，但是该缓存并不能共享，所以导致了这个问题。在该版本中将该缓存调整为了 `localStorage`。
+
+## Feats
+
+- 移除 `vite-plugin-imp` 插件
+- 更新 `vue` 版本至 `3.4.31`
+- 更新 `vite` 版本至 `5.3.3`
+- 将 `appPiniaMenuStore`, `appPiniaSigningStore` 缓存由 `sessionStorage` 更改为 `localStorage` 缓存
+- 现在在模拟退出的时候，会清理 `appPiniaMenuStore`, `appPiniaSigningStore` 的 `localStorage` 缓存
+- 将 `route` 待提取字段单独抽离，统一维护为 `pickRouteRecordNormalizedConstant`
+
+## Fixes
+
+- 修复 `RTable` 自定义 `tool` 时抛出的优化警告问题
+- 修复在复制 `url` 打开新标签页输入网址后（包括新开页面），会导致项目初始化异常的问题
+
 ## 4.8.9
 
 ## Fixes

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ray-template",
   "private": false,
-  "version": "4.8.9",
+  "version": "4.9.0",
   "type": "module",
   "engines": {
     "node": "^18.0.0 || >=20.0.0",
@@ -48,7 +48,7 @@
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.0",
     "print-js": "^1.6.0",
-    "vue": "^3.4.30",
+    "vue": "^3.4.31",
     "vue-demi": "0.14.6",
     "vue-hooks-plus": "2.2.0",
     "vue-i18n": "^9.13.1",
@@ -92,13 +92,12 @@
     "typescript": "^5.2.2",
     "unplugin-auto-import": "^0.17.5",
     "unplugin-vue-components": "^0.26.0",
-    "vite": "^5.3.1",
+    "vite": "^5.3.3",
     "vite-bundle-analyzer": "0.9.4",
     "vite-plugin-cdn2": "1.1.0",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-ejs": "^1.7.0",
     "vite-plugin-eslint": "1.8.1",
-    "vite-plugin-imp": "^2.4.0",
     "vite-plugin-inspect": "^0.8.3",
     "vite-plugin-mock-dev-server": "1.4.7",
     "vite-plugin-svg-icons": "^2.0.1",

src/app-components/app/AppAvatar/index.tsx

@@ -47,7 +47,10 @@ const AppAvatar = defineComponent({
     },
   },
   setup(props) {
-    const signing = getStorage<SigningCallback>(APP_CATCH_KEY.signing)
+    const signing = getStorage<SigningCallback>(
+      APP_CATCH_KEY.signing,
+      'localStorage',
+    )
 
     return {
       signing,

src/axios/axios-interceptor/request/plugins/request-headers.ts

@@ -16,7 +16,7 @@ import type {
  * 当然你也可以根据 request instance 来特殊处理, 这里暂时不做演示
  */
 const requestHeaderToken = (ins: RequestInterceptorConfig, mode: string) => {
-  const token = getStorage<string>(APP_CATCH_KEY.token)
+  const token = getStorage<string>(APP_CATCH_KEY.token, 'localStorage')
 
   if (ins.url) {
     // TODO: 根据 url 不同是否设置 token

src/components/RTable/src/Table.tsx

@@ -186,7 +186,7 @@ export default defineComponent({
         return renderDefaultToolOptions
       } else {
         if (props.coverTool) {
-          return <NFlex align="center">{renderToolOptions()}</NFlex>
+          return () => <NFlex align="center">{renderToolOptions()}</NFlex>
         } else {
           return () => (
             <NFlex align="center">

src/hooks/template/useSiderBar.ts

@@ -12,6 +12,7 @@
 import { useMenuGetters, useMenuActions } from '@/store'
 import { useVueRouter, useAppRoot } from '@/hooks'
 import { pick } from 'lodash-es'
+import { pickRouteRecordNormalizedConstant } from '@/store/modules/menu/constant'
 
 import type { MenuTagOptions, Key, AppMenuOption } from '@/types'
 
@@ -206,13 +207,7 @@ export function useSiderBar() {
     )
 
     if (findMenuOption) {
-      const pickOption = pick(findMenuOption, [
-        'children',
-        'meta',
-        'path',
-        'name',
-        'redirect',
-      ])
+      const pickOption = pick(findMenuOption, pickRouteRecordNormalizedConstant)
       const res = resolveOption(pickOption as unknown as AppMenuOption)
 
       changeMenuModelValue(

src/router/utils/permission.ts

@@ -40,7 +40,7 @@ export const permissionRouter = (router: Router) => {
   ) => to.path === '/' || from.path === '/login'
 
   beforeEach((to, from, next) => {
-    const token = getStorage<string>(APP_CATCH_KEY.token)
+    const token = getStorage<string>(APP_CATCH_KEY.token, 'localStorage')
     const catchRoutePath = getStorage(
       APP_CATCH_KEY.appMenuKey,
       'sessionStorage',

src/router/utils/redirect-router-to-dashboard.ts

@@ -15,7 +15,7 @@ export const redirectRouterToDashboard = (isReplace = true) => {
   const { push, replace } = router
   const { getRootPath } = useAppRoot()
 
-  setStorage(APP_CATCH_KEY.appMenuKey, getRootPath.value)
+  setStorage(APP_CATCH_KEY.appMenuKey, getRootPath.value, 'localStorage')
 
   isReplace ? replace(getRootPath.value) : push(getRootPath.value)
 }

src/store/modules/menu/constant.ts

@@ -0,0 +1,11 @@
+export const pickRouteRecordNormalizedConstant = [
+  'redirect',
+  'breadcrumbLabel',
+  'children',
+  'key',
+  'meta',
+  'name',
+  'path',
+  'show',
+  'fullPath',
+]

src/store/modules/menu/index.ts

@@ -42,6 +42,7 @@ import { getAppRawRoutes } from '@/router/app-route-modules'
 import { useKeepAliveActions } from '@/store'
 import { APP_CATCH_KEY } from '@/app-config'
 import { pick } from 'lodash-es'
+import { pickRouteRecordNormalizedConstant } from './constant'
 
 import type { AppMenuOption, MenuTagOptions } from '@/types'
 import type { MenuState } from '@/store/modules/menu/types'
@@ -271,15 +272,10 @@ export const piniaMenuStore = defineStore(
           setStorage(APP_CATCH_KEY.appMenuKey, key)
         } else {
           // 使用 pick 提取仅需要的字段，避免 vue 抛错空引用，导致性能损耗
-          const breadcrumbOption = pick(resolveOption(option), [
-            'breadcrumbLabel',
-            'children',
-            'key',
-            'meta',
-            'name',
-            'path',
-            'show',
-          ]) as unknown as AppMenuOption
+          const breadcrumbOption = pick(
+            resolveOption(option),
+            pickRouteRecordNormalizedConstant,
+          ) as unknown as AppMenuOption
           // 查看是否重复
           const find = menuState.breadcrumbOptions.find(
             (curr) => curr.key === breadcrumbOption.key,
@@ -314,13 +310,10 @@ export const piniaMenuStore = defineStore(
 
       if (findMenuOption) {
         // 使用 pick 提取仅需要的字段，避免 vue 抛错空引用，导致性能损耗
-        const pickOption = pick(findMenuOption, [
-          'children',
-          'meta',
-          'path',
-          'name',
-          'redirect',
-        ]) as unknown as AppMenuOption
+        const pickOption = pick(
+          findMenuOption,
+          pickRouteRecordNormalizedConstant,
+        ) as unknown as AppMenuOption
 
         changeMenuModelValue(
           routePath,
@@ -452,7 +445,7 @@ export const piniaMenuStore = defineStore(
   {
     persist: {
       key: APP_CATCH_KEY.appPiniaMenuStore,
-      storage: window.sessionStorage,
+      storage: window.localStorage,
       paths: ['breadcrumbOptions', 'menuKey', 'menuTagOptions', 'collapsed'],
     },
   },

src/store/modules/signing/index.ts

@@ -80,11 +80,18 @@ export const piniaSigningStore = defineStore(
      */
     const logout = () => {
       const { closeAll } = useSiderBar()
+      const { appPiniaMenuStore, appPiniaSigningStore } = APP_CATCH_KEY
 
+      // 提示信息
       window.$message.info('账号退出中...')
+      // 移除所有 sessionStorage 缓存
       removeStorage('__all_sessionStorage__', 'sessionStorage')
+      // 移除指定 localStorage 缓存
+      removeStorage(appPiniaMenuStore, 'localStorage')
+      removeStorage(appPiniaSigningStore, 'localStorage')
+      // 关闭所有侧边栏标签
       closeAll()
-
+      // 延迟 300ms 后强制刷新当前系统
       setTimeout(() => window.location.reload())
     }
 
@@ -98,7 +105,7 @@ export const piniaSigningStore = defineStore(
     persist: {
       key: APP_CATCH_KEY.appPiniaSigningStore,
       paths: ['signingCallback'],
-      storage: sessionStorage,
+      storage: window.localStorage,
     },
   },
 )

src/views/login/components/Signing/index.tsx

@@ -50,8 +50,8 @@ export default defineComponent({
                 setTimeout(() => {
                   window.$message.success(`欢迎${signingForm.value.name}登陆~`)
 
-                  setStorage(APP_CATCH_KEY.token, 'tokenValue')
-                  setStorage(APP_CATCH_KEY.signing, res.data)
+                  setStorage(APP_CATCH_KEY.token, 'tokenValue', 'localStorage')
+                  setStorage(APP_CATCH_KEY.signing, res.data, 'localStorage')
 
                   router.push(getRootPath.value)
 

vite.plugin.config.ts

@@ -16,7 +16,6 @@ import viteVueJSX from '@vitejs/plugin-vue-jsx'
 import viteVeI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
 import viteInspect from 'vite-plugin-inspect'
 import viteSvgLoader from 'vite-svg-loader'
-import vitePluginImp from 'vite-plugin-imp'
 import { analyzer, adapter } from 'vite-bundle-analyzer'
 import viteCompression from 'vite-plugin-compression'
 import { ViteEjsPlugin as viteEjsPlugin } from 'vite-plugin-ejs'
@@ -176,20 +175,6 @@ function baseOptions(mode: string): PluginOption[] {
           cache: true,
         })
       : null,
-    vitePluginImp({
-      libList: [
-        {
-          libName: 'lodash-es',
-          libDirectory: '',
-          camel2DashComponentName: false,
-        },
-        {
-          libName: '@vueuse',
-          libDirectory: '',
-          camel2DashComponentName: false,
-        },
-      ],
-    }),
     viteEjsPlugin({
       preloadingConfig,
       appPrimaryColor,