chore: 同步完整版代码

src/layout/components/setting/index.vue

@@ -387,7 +387,7 @@ onUnmounted(() => removeMatchMedia);
         </li>
       </ul>
 
-      <span v-if="device !== 'mobile'">
+      <span v-if="useAppStoreHook().getViewportWidth > 1280">
         <p :class="['mt-5', pClass]">页宽</p>
         <Segmented
           class="mb-2 select-none"
@@ -406,7 +406,7 @@ onUnmounted(() => removeMatchMedia);
         <button
           v-else
           v-ripple="{ class: 'text-gray-300' }"
-          class="bg-transparent flex-c w-full h-20 rounded-md border border-gray-100"
+          class="bg-transparent flex-c w-full h-20 rounded-md border border-[var(--pure-border-color)]"
           @click="setStretch(!settings.stretch)"
         >
           <div

src/layout/index.vue

@@ -89,7 +89,8 @@ let isAutoCloseSidebar = true;
 useResizeObserver(appWrapperRef, entries => {
   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 隐藏侧边栏

src/plugins/elementPlus.ts

@@ -10,6 +10,8 @@ import {
   ElAutocomplete,
   ElAutoResizer,
   ElAvatar,
+  ElAnchor,
+  ElAnchorLink,
   ElBacktop,
   ElBadge,
   ElBreadcrumb,
@@ -123,6 +125,8 @@ const components = [
   ElAutocomplete,
   ElAutoResizer,
   ElAvatar,
+  ElAnchor,
+  ElAnchorLink,
   ElBacktop,
   ElBadge,
   ElBreadcrumb,

src/store/modules/app.ts

@@ -20,7 +20,12 @@ export const useAppStore = defineStore({
       storageLocal().getItem<StorageConfigs>(
         `${responsiveStorageNameSpace()}layout`
       )?.layout ?? getConfig().Layout,
-    device: deviceDetection() ? "mobile" : "desktop"
+    device: deviceDetection() ? "mobile" : "desktop",
+    // 浏览器窗口的可视区域大小
+    viewportSize: {
+      width: document.documentElement.clientWidth,
+      height: document.documentElement.clientHeight
+    }
   }),
   getters: {
     getSidebarStatus(state) {
@@ -28,6 +33,12 @@ export const useAppStore = defineStore({
     },
     getDevice(state) {
       return state.device;
+    },
+    getViewportWidth(state) {
+      return state.viewportSize.width;
+    },
+    getViewportHeight(state) {
+      return state.viewportSize.height;
     }
   },
   actions: {
@@ -59,6 +70,12 @@ export const useAppStore = defineStore({
     },
     setLayout(layout) {
       this.layout = layout;
+    },
+    setViewportSize(size) {
+      this.viewportSize = size;
+    },
+    setSortSwap(val) {
+      this.sortSwap = val;
     }
   }
 });

src/store/modules/types.ts

@@ -19,6 +19,7 @@ export type appType = {
   };
   layout: string;
   device: string;
+  viewportSize: { width: number; height: number };
 };
 
 export type multiType = {