From 3f7e3722fdf0206850710120fd4dd367bd5f33a4 Mon Sep 17 00:00:00 2001
From: XiaoDaiGua-Ray <443547225@qq.com>
Date: Sat, 27 Jul 2024 12:40:41 +0800
Subject: [PATCH] version: v4.9.2

---
 CHANGELOG.md                         | 11 +++++++++++
 package.json                         |  2 +-
 postcss.config.cjs                   |  2 +-
 src/hooks/web/useDevice.ts           | 12 ++++++++++++
 src/layout/components/Menu/index.tsx |  9 ++++++++-
 vite.config.ts                       |  1 -
 6 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 586d1744..8731cb48 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,16 @@
 # CHANGE LOG
 
+## 4.9.2
+
+## Feats
+
+- `useDevice` 支持 `observer` 配置项
+- `postcss` 自动尺寸转换插件配置更新
+
+## Fixes
+
+- 修复菜单在小尺寸屏幕并且处于折叠状态，导致显示不完整的问题
+
 ## 4.9.1
 
 更新核心依赖版本为主流版本。
diff --git a/package.json b/package.json
index 8e803c9f..df3c8d63 100755
--- a/package.json
+++ b/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",
diff --git a/postcss.config.cjs b/postcss.config.cjs
index be83e78f..a8400a98 100644
--- a/postcss.config.cjs
+++ b/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,
     },
diff --git a/src/hooks/web/useDevice.ts b/src/hooks/web/useDevice.ts
index 24437c78..f3c94190 100644
--- a/src/hooks/web/useDevice.ts
+++ b/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)
diff --git a/src/layout/components/Menu/index.tsx b/src/layout/components/Menu/index.tsx
index fc952f52..51e90c69 100644
--- a/src/layout/components/Menu/index.tsx
+++ b/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) => {
diff --git a/vite.config.ts b/vite.config.ts
index 83e6ee53..4dcd3847 100644
--- a/vite.config.ts
+++ b/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',