fix: 一些bug修复

.gitignore

@@ -15,6 +15,7 @@ dist/
 *.local
 visualizer.*
 .eslintcache
+.history
 
 # Editor directories and files
 .idea

CHANGELOG.md

@@ -1,5 +1,15 @@
 # CHANGE LOG
 
+## 4.8.6
+
+## Fixes
+
+- 修复动态路由的情况下，始终会被跳转到 `404` 页面的问题
+- 修复 `RIcon` 组件 `color` 配置项无效的问题
+- 修复 `svg-icon` 页面可能会在更新 `icon` 后出现报错的问题
+- 修复 `updateDocumentTitle` 方法可能会更新标题出错的问题
+- 修复菜单的折叠问题
+
 ## 4.8.5
 
 ## Feats

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ray-template",
   "private": false,
-  "version": "4.8.5",
+  "version": "4.8.6",
   "type": "module",
   "engines": {
     "node": "^18.0.0 || >=20.0.0",
@@ -25,7 +25,7 @@
     }
   },
   "lint-staged": {
-    "/src/**/*.{ts,tsx,vue}": [
+    "./src/**/*.{ts,tsx,vue}": [
       "vue-tsc --noEmit"
     ],
     "*.{ts,tsx,json}": [

src/components/RIcon/src/index.scss

@@ -8,12 +8,12 @@
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  fill: currentColor;
+  color: var(--ray-icon-color);
   transform: translateZ(0);
   opacity: var(--ray-icon-depth);
   cursor: var(--ray-icon-cursor);
 
-  & svg[RayIconAttribute="ray-icon"] {
+  & svg[RayIconAttribute='ray-icon'] {
     width: var(--ray-icon-width);
     height: var(--ray-icon-height);
     fill: currentColor;

src/components/RIcon/src/index.tsx

@@ -29,6 +29,7 @@ export default defineComponent({
           : completeSize(props.size),
         '--ray-icon-depth': props.depth,
         '--ray-icon-cursor': props.cursor,
+        '--ray-icon-color': props.color,
       }
 
       return cssVar

src/layout/components/Menu/index.tsx

@@ -28,7 +28,8 @@ export default defineComponent({
   setup() {
     const menuRef = ref<MenuInst | null>(null)
 
-    const { changeMenuModelValue, collapsedMenu } = useMenuActions()
+    const { changeMenuModelValue, collapsedMenu, updateMenuState } =
+      useMenuActions()
     const { getMenuOptions, getCollapsed, getMenuKey } = useMenuGetters()
 
     const modelMenuKey = computed({
@@ -84,6 +85,13 @@ export default defineComponent({
         onUpdateCollapsed={collapsedMenu.bind(this)}
         nativeScrollbar={false}
         ref={LAYOUT_SIDER_REF}
+        collapsed={getCollapsed.value}
+        onExpand={() => {
+          updateMenuState('collapsed', false)
+        }}
+        onCollapse={() => {
+          updateMenuState('collapsed', true)
+        }}
       >
         <SiderBarLogo collapsed={getCollapsed.value} />
         <NMenu

src/router/app-route-modules.ts

@@ -21,8 +21,7 @@
  */
 
 import { combineRawRouteModules } from '@/router/utils'
-import { orderRoutes } from '@/router/utils'
-import { expandRoutes } from '@/router/utils'
+import { orderRoutes, expandRoutes } from '@/router/utils'
 
 /** 获取所有被合并与排序的路由 */
 export const getAppRawRoutes = () => orderRoutes(combineRawRouteModules())

src/router/modules/error-404.ts

@@ -1,17 +0,0 @@
-import { t } from '@/hooks/web/useI18n'
-import { LAYOUT } from '@/router/constant'
-
-import type { AppRouteRecordRaw } from '@/router/types'
-
-const error404: AppRouteRecordRaw = {
-  path: '/:catchAll(.*)',
-  component: () => import('@/views/error/views/Error404'),
-  meta: {
-    i18nKey: t('menu.Error'),
-    icon: 'error',
-    hidden: true,
-    sameLevel: true,
-  },
-}
-
-export default error404

src/router/routes.ts

@@ -1,5 +1,6 @@
 import Layout from '@/layout'
 import { appExpandRoutes } from './app-route-modules'
+import { t } from '@/hooks/web/useI18n'
 
 export default [
   /**
@@ -20,6 +21,23 @@ export default [
     path: '/',
     name: 'RLayout',
     component: Layout,
-    children: appExpandRoutes(),
+    children: [
+      ...appExpandRoutes(),
+      /**
+       *
+       * @description
+       * 404 页面一定要放在最后面，避免奇奇怪怪的问题。
+       */
+      {
+        path: '/:catchAll(.*)',
+        component: () => import('@/views/error/views/Error404'),
+        meta: {
+          i18nKey: t('menu.Error'),
+          icon: 'error',
+          hidden: true,
+          sameLevel: true,
+        },
+      },
+    ],
   },
 ]

src/store/hooks/useMenuStore.ts

@@ -83,6 +83,7 @@ export const useMenuActions = () => {
     spliceMenTagOptions,
     setMenuTagOptions,
     resolveOption,
+    updateMenuState,
   } = piniaMenuStore()
 
   return {
@@ -91,5 +92,6 @@ export const useMenuActions = () => {
     spliceMenTagOptions,
     setMenuTagOptions,
     resolveOption,
+    updateMenuState,
   }
 }

src/store/modules/menu/index.ts

@@ -46,6 +46,7 @@ import { pick } from 'lodash-es'
 import type { AppMenuOption, MenuTagOptions } from '@/types'
 import type { MenuState } from '@/store/modules/menu/types'
 import type { LocationQuery } from 'vue-router'
+import type { UpdateMenuState } from './types'
 
 let cachePreNormal: AppMenuOption | undefined = void 0
 
@@ -106,6 +107,20 @@ export const piniaMenuStore = defineStore(
     })
     const isSetupAppMenuLock = ref(true)
 
+    /**
+     *
+     * @param key menu state key
+     * @param value updated value
+     *
+     * @description
+     * 更新 menu state 指定 key 的值。
+     */
+    const updateMenuState: UpdateMenuState = (key, value) => {
+      if (Object.hasOwn(menuState, key as string)) {
+        menuState[key] = value
+      }
+    }
+
     /**
      *
      * @param option 菜单项（类似于菜单项的数据结构也可以）
@@ -426,6 +441,7 @@ export const piniaMenuStore = defineStore(
       spliceMenTagOptions,
       setMenuTagOptions,
       resolveOption,
+      updateMenuState,
     }
   },
   {

src/store/modules/menu/types.ts

@@ -8,3 +8,10 @@ export interface MenuState {
   breadcrumbOptions: AppMenuOption[]
   currentMenuOption: AppMenuOption | null
 }
+
+type PickUpdateKeys = 'collapsed' | 'currentMenuOption'
+
+export type UpdateMenuState = <T extends keyof Pick<MenuState, PickUpdateKeys>>(
+  key: T,
+  value: MenuState[T],
+) => void

src/store/modules/menu/utils.ts

@@ -119,6 +119,11 @@ export const parseAndFindMatchingNodes = (
  */
 export const updateDocumentTitle = (option: AppMenuOption) => {
   const { breadcrumbLabel } = option
+
+  if (!breadcrumbLabel) {
+    return
+  }
+
   const {
     layout: { sideBarLogo },
   } = __APP_CFG__

src/views/demo/svg-icons/index.tsx

@@ -21,7 +21,7 @@ const PreviewSVGIcons = defineComponent({
     const iconsModules = import.meta.glob('@/icons/**/**.svg')
 
     Object.keys(iconsModules).forEach((curr) => {
-      const iconName = curr.match(/\/(\w+)\.svg/)![1]
+      const iconName = curr.match(/\/(\w+)\.svg/)?.[1]
 
       if (iconName) {
         icons.value.push(iconName)