Update: 优化拖拽性能

Author: T-miracle

package.json

@@ -21,7 +21,7 @@
     "overlayscrollbars": "^2.10.1",
     "overlayscrollbars-vue": "^0.5.9",
     "pinia": "^2.3.0",
-    "pinia-plugin-persistedstate": "^3.2.3",
+    "pinia-plugin-persistedstate": "3.2.3",
     "uuid": "^11.0.3",
     "viewerjs": "^1.11.7",
     "vitepress": "^1.5.0",

package/App.vue

@@ -5,7 +5,7 @@
         :style="{ backgroundImage: `url(${ bgList[0] })` }"
     >
         <slot name="homePage">
-            <div class="w-80vw max-w-800px mb-12vh h-a flex-center flex-col rounded-xl py-10">
+            <div class="w-80vw max-w-800px mb-12vh h-a flex-center flex-col py-10">
                 <div
                     class="relative w-60 h-60 max-w-80vw max-h-80vw"
                     style="filter: drop-shadow(0 0 16px rgba(0,0,0,.36));"

package/components/NanoBody/index.vue

@@ -1,19 +1,19 @@
 <template>
     <div ref="container" class="relative grow flex items-stretch min-h-0">
         <NanoLeftActionBar v-if="!ctl.hideLeftActionBar" ref="leftActionBar"/>
-        <NanoLeftSidebar v-if="!ctl.hideLeftSidebar" ref="leftSidebar" :style="layout.leftSidebarLayout">
+        <NanoLeftSidebar v-if="!ctl.hideLeftSidebar" ref="leftSidebar" :style="leftSidebarLayout">
             <!--draggable line-->
             <div
                 ref="leftDraggableLine"
                 class="absolute z-4 right--2 top-0 h-full w-2 bg-transparent cursor-col-resize"
             />
         </NanoLeftSidebar>
         <NanoMain ref="main"/>
-        <NanoRightSidebar v-if="!ctl.hideRightSidebar" ref="rightSidebar" :style="layout.rightSidebarLayout">
+        <NanoRightSidebar v-if="!ctl.hideRightSidebar" ref="rightSidebar" :style="rightSidebarLayout">
             <!--draggable line-->
             <div
                 ref="rightDraggableLine"
-                class="absolute z-4 left--2 top-0 h-full w-2 bg-transparent cursor-col-resize"
+                class="absolute z-4 left-0 top-0 h-full w-2 bg-transparent cursor-col-resize"
             />
         </NanoRightSidebar>
         <NanoRightActionBar v-if="!ctl.hideRightActionBar" ref="rightActionBar"/>
@@ -27,14 +27,24 @@
     import NanoLeftActionBar from '@NanoUI/NanoLeftActionBar/index.vue';
     import NanoRightActionBar from '@NanoUI/NanoRightActionBar/index.vue';
     import { controllerStore } from '@store/controller';
-    import { onMounted, ref } from 'vue';
+    import { onMounted, ref, watch } from 'vue';
     import { drag } from '../../utils/drag';
     import { contentLayoutStore } from '@store/contentLayout';
+    import { debounce } from 'lodash-es';
 
     const ctl = controllerStore();
-
     const layout = contentLayoutStore();
 
+    const leftSidebarLayout = ref(layout.leftSidebarLayout);
+    const rightSidebarLayout = ref(layout.rightSidebarLayout);
+
+    watch(leftSidebarLayout, debounce((val) => {
+        layout.setLeftSidebarLayout(val);
+    }, 200), { deep: true });
+    watch(rightSidebarLayout, debounce((val) => {
+        layout.setRightSidebarLayout(val);
+    }, 200), { deep: true });
+
     const container = ref<HTMLElement | null>(null);
     const leftActionBar = ref<InstanceType<typeof NanoLeftActionBar> | null>();
     const leftSidebar = ref<InstanceType<typeof NanoLeftSidebar> | null>();
@@ -80,9 +90,7 @@
                     if (newWidth < 120) {
                         return;
                     }
-                    layout.setLeftSidebarLayout({
-                        width: newWidth / cw * 100 + '%'
-                    });
+                    leftSidebarLayout.value = { width: newWidth / cw * 100 + '%' };
                 }
             });
             drag<OriginalDataType>({
@@ -97,9 +105,7 @@
                     if (newWidth < 120) {
                         return;
                     }
-                    layout.setRightSidebarLayout({
-                        width: newWidth / cw * 100 + '%'
-                    });
+                    rightSidebarLayout.value = { width: newWidth / cw * 100 + '%' };
                 }
             });
         }

package/components/NanoContainer/index.vue

@@ -2,10 +2,10 @@
     <div
         ref="container"
         class="nano-theme absolute"
-        :style="{ ...layout.containerLayout, ...animation }"
+        :style="{ ...containerLayout, ...animation }"
     >
         <div v-show="!loading" class="relative w-full h-full flex flex-col">
-            <NanoHeader ref="header" @dblclick="ctl.fullscreen = !ctl.fullscreen"/>
+            <NanoHeader ref="header" @dblclick.self="ctl.fullscreen = !ctl.fullscreen"/>
             <NanoBody/>
             <NanoFooter/>
         </div>
@@ -25,10 +25,11 @@
     import NanoBackdrop from '@NanoUI/NanoBackdrop/index.vue';
     import NanoNavModal from '@NanoUI/NanoNavModal/index.vue';
     import NanoSidebarDirModal from '@NanoUI/NanoSidebarDirModal/index.vue';
-    import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+    import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
     import { controllerStore } from '@store/controller';
-    import { contentLayoutStore, getWidthFromString } from '@store/contentLayout';
+    import { contentLayoutStore, getWidthFromString, LayoutBaseInfo } from '@store/contentLayout';
     import { drag } from '../../utils/drag';
+    import { debounce } from 'lodash-es';
 
     const ctl = controllerStore();
     const layout = contentLayoutStore();
@@ -47,6 +48,13 @@
         };
     });
 
+    const containerLayout = ref<LayoutBaseInfo>(layout.containerLayout);
+
+    watch(containerLayout, debounce((val) => {
+        // console.log('containerLayout changed', val);
+        layout.setContainerLayout(val);
+    }, 200), { deep: true });
+
     onMounted(() => {
         const containerEl = container.value!;
         resizeObserver.value = new ResizeObserver((entries: ResizeObserverEntry[]) => {
@@ -81,7 +89,7 @@
                 }, 1200);
             }
         });
-        resizeObserver.value.observe(containerEl!);
+        resizeObserver.value.observe(containerEl);
 
         type OriginLayout = {
             isFullscreen: boolean;
@@ -107,26 +115,26 @@
                     top: offsetTop
                 };
             },
-            handlerFn: ({ x, y, originalData: { isFullscreen, notFullScreenWidth, screenWidth, screenHeight, left, top }, pointerWelt, initial }) => {
+            handlerFn: ({
+                x,
+                y,
+                originalData: { isFullscreen, notFullScreenWidth, screenWidth, screenHeight, left, top },
+                pointerWelt,
+                initial
+            }) => {
                 let newLeft = left + x;
                 const newTop = top + y;
                 if (isFullscreen) {
                     ctl.fullscreen = false;
                     newLeft = initial.x - (initial.x / screenWidth) * notFullScreenWidth + x;
                 }
                 if (!pointerWelt.top && !pointerWelt.bottom && newTop > 0) {
-                    layout.setContainerLayout({
-                        top: newTop / screenHeight * 100 + '%'
-                    });
+                    containerLayout.value.top = newTop / screenHeight * 100 + '%';
                 } else {
-                    layout.setContainerLayout({
-                        top: pointerWelt.bottom ? '98%' : '0'
-                    });
+                    containerLayout.value.top = pointerWelt.bottom ? '98%' : '0';
                 }
                 if (!pointerWelt.left && !pointerWelt.right) {
-                    layout.setContainerLayout({
-                        left: newLeft / screenWidth * 100 + '%'
-                    });
+                    containerLayout.value.left = newLeft / screenWidth * 100 + '%';
                 }
             },
             beforeFn: () => enableAnimation.value = false,

package/components/NanoLogo/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="relative flex-center px-[calc(var(--s)*0.25)] whitespace-nowrap pointer-events-none">
+    <div class="relative flex-center px-[calc(var(--s)*0.25)] whitespace-nowrap pointer-events-none select-none">
         <img
             class="w-[calc(var(--s)*0.72)] h-[calc(var(--s)*0.72)] rounded-[calc(var(--s)*.1)]"
             :src="theme.logo"

package/store/contentLayout.ts

@@ -3,11 +3,11 @@ import { merge } from 'lodash-es';
 import { controllerStore } from '@store/controller';
 
 export type LayoutBaseInfo = {
-    top?: string;
-    left?: string;
+    top?: string | number;
+    left?: string | number;
     width?: string;
     height?: string;
-} | undefined;
+};
 
 export const contentLayoutStore = defineStore('contentLayout', {
     state: () => ({
@@ -18,25 +18,25 @@ export const contentLayoutStore = defineStore('contentLayout', {
                 width: '90vw',
                 height: '90vh'
             } as LayoutBaseInfo,
-            changed: undefined as LayoutBaseInfo
+            changed: undefined as LayoutBaseInfo | undefined
         },
         leftSidebar: {
             default: {
                 width: '20%',
                 height: undefined
             } as LayoutBaseInfo,
-            changed: undefined as LayoutBaseInfo
+            changed: undefined as LayoutBaseInfo | undefined
         },
         rightSidebar: {
             default: {
                 width: '20%',
                 height: undefined
             } as LayoutBaseInfo,
-            changed: undefined as LayoutBaseInfo
+            changed: undefined as LayoutBaseInfo | undefined
         }
     }),
     getters: {
-        containerLayout: (state) => {
+        containerLayout: (state): LayoutBaseInfo => {
             const ctl = controllerStore();
             return !ctl.onlyFullscreen && !ctl.fullscreen ?
                 merge({}, state.container.default, state.container.changed) :