Date: Sat, 23 Mar 2024 08:19:37 +0800
Subject: [PATCH 5/5] =?UTF-8?q?perf:=20=E5=BD=93=E6=B5=8F=E8=A7=88?=
=?UTF-8?q?=E5=99=A8=E7=AA=97=E5=8F=A3=E7=9A=84=E5=8F=AF=E8=A7=86=E5=8C=BA?=
=?UTF-8?q?=E5=9F=9F=E5=B0=8F=E4=BA=8E=E6=88=96=E7=AD=89=E4=BA=8E`1280`?=
=?UTF-8?q?=E6=97=B6=E9=9A=90=E8=97=8F=E9=A1=B5=E5=AE=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/layout/components/setting/index.vue | 2 +-
src/layout/index.vue | 3 ++-
src/store/modules/app.ts | 14 ++++++++++++++
src/store/modules/types.ts | 1 +
4 files changed, 18 insertions(+), 2 deletions(-)
diff --git a/src/layout/components/setting/index.vue b/src/layout/components/setting/index.vue
index 4d18137fe..0676f0584 100644
--- a/src/layout/components/setting/index.vue
+++ b/src/layout/components/setting/index.vue
@@ -387,7 +387,7 @@ onUnmounted(() => removeMatchMedia);
-
+
页宽
{
if (isMobile) return;
const entry = entries[0];
- const [{ inlineSize: width }] = entry.borderBoxSize;
+ const [{ inlineSize: width, blockSize: height }] = entry.borderBoxSize;
+ useAppStoreHook().setViewportSize({ width, height });
width <= 760 ? setTheme("vertical") : setTheme(useAppStoreHook().layout);
/** width app-wrapper类容器宽度
* 0 < width <= 760 隐藏侧边栏
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index fa626f73d..4fe0b8226 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -21,6 +21,11 @@ export const useAppStore = defineStore({
`${responsiveStorageNameSpace()}layout`
)?.layout ?? getConfig().Layout,
device: deviceDetection() ? "mobile" : "desktop",
+ // 浏览器窗口的可视区域大小
+ viewportSize: {
+ width: document.documentElement.clientWidth,
+ height: document.documentElement.clientHeight
+ },
// 作用于 src/views/components/draggable/index.vue 页面，当离开页面并不会销毁 new Swap()，sortablejs 官网也没有提供任何销毁的 api
sortSwap: false
}),
@@ -30,6 +35,12 @@ export const useAppStore = defineStore({
},
getDevice(state) {
return state.device;
+ },
+ getViewportWidth(state) {
+ return state.viewportSize.width;
+ },
+ getViewportHeight(state) {
+ return state.viewportSize.height;
}
},
actions: {
@@ -62,6 +73,9 @@ export const useAppStore = defineStore({
setLayout(layout) {
this.layout = layout;
},
+ setViewportSize(size) {
+ this.viewportSize = size;
+ },
setSortSwap(val) {
this.sortSwap = val;
}
diff --git a/src/store/modules/types.ts b/src/store/modules/types.ts
index 5192f5679..b8cb592e6 100644
--- a/src/store/modules/types.ts
+++ b/src/store/modules/types.ts
@@ -19,6 +19,7 @@ export type appType = {
};
layout: string;
device: string;
+ viewportSize: { width: number; height: number };
sortSwap: boolean;
};