version: v4.9.2

CHANGELOG.md

@@ -1,5 +1,16 @@
 # CHANGE LOG
 
+## 4.9.2
+
+## Feats
+
+- `useDevice` 支持 `observer` 配置项
+- `postcss` 自动尺寸转换插件配置更新
+
+## Fixes
+
+- 修复菜单在小尺寸屏幕并且处于折叠状态，导致显示不完整的问题
+
 ## 4.9.1
 
 更新核心依赖版本为主流版本。

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ray-template",
   "private": false,
-  "version": "4.9.0",
+  "version": "4.9.2",
   "type": "module",
   "engines": {
     "node": "^18.0.0 || >=20.0.0",

postcss.config.cjs

@@ -30,7 +30,7 @@ module.exports = {
       minPixelValue: 1,
       /** 允许在媒体查询中转换 px */
       mediaQuery: false,
-      // exclude: /(\/|\\)(node_modules)(\/|\\)/, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
+      exclude: /(\/|\\)(node_modules)(\/|\\)/, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
       include: [/^src[/\\].*\.(vue|tsx|jsx|ts(?!d))$/],
       preserve: true,
     },

src/hooks/web/useDevice.ts

@@ -19,6 +19,11 @@ import { watchEffectWithTarget } from '@/utils'
 
 import type { UseWindowSizeOptions } from '@vueuse/core'
 
+type Callback = (
+  isSmaller: boolean,
+  size: { width: number; height: number },
+) => void
+
 export interface UseDeviceOptions extends UseWindowSizeOptions {
   /**
    *
@@ -28,6 +33,7 @@ export interface UseDeviceOptions extends UseWindowSizeOptions {
    * @default 768
    */
   media?: number
+  observer?: Callback
 }
 
 /**
@@ -47,11 +53,17 @@ export interface UseDeviceOptions extends UseWindowSizeOptions {
 export function useDevice(options?: UseDeviceOptions) {
   const { width, height } = useWindowSize(options)
   const isTabletOrSmaller = ref(false)
+  const { observer } = options ?? {}
 
   const update = () => {
     const { media = 768 } = options ?? {}
 
     isTabletOrSmaller.value = width.value <= media
+
+    observer?.(isTabletOrSmaller.value, {
+      width: width.value,
+      height: height.value,
+    })
   }
 
   watchEffectWithTarget(update)

src/layout/components/Menu/index.tsx

@@ -55,7 +55,14 @@ export default defineComponent({
         }
       },
     })
-    const { isTabletOrSmaller } = useDevice()
+    const { isTabletOrSmaller } = useDevice({
+      observer: (isSmaller) => {
+        if (isSmaller) {
+          // 避免菜单折叠时，在小尺寸屏幕导致菜单显示不完整
+          updateMenuState('collapsed', false)
+        }
+      },
+    })
     const modelGlobalDrawerValue = computed({
       get: () => getVariableToRefs('globalDrawerValue').value,
       set: (val) => {

vite.config.ts

@@ -58,7 +58,6 @@ export default defineConfig(({ mode }) => {
         'lodash-es',
         'vue-hooks-plus',
         'interactjs',
-        'awesome-qr',
         'pinia-plugin-persistedstate',
         'currency.js',
         'mockjs',