From f1961011bdae70dca09bd132a78ab37cb4f7e5f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E7=8E=89=E9=9C=9E?= <liuyuxia@jsspisoft.com>
Date: Fri, 1 Nov 2024 12:45:46 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E6=8A=98=E5=8F=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/layouts/backend/components/aside.vue  | 78 ++++++++++++++++++-
 .../backend/components/menus/menuVertical.vue |  7 +-
 ui/dasadmin/src/layouts/backend/index.vue     |  2 +-
 ui/dasadmin/src/stores/config.ts              |  4 +-
 ui/dasadmin/vite.config.ts                    | 25 +++---
 5 files changed, 100 insertions(+), 16 deletions(-)

diff --git a/ui/dasadmin/src/layouts/backend/components/aside.vue b/ui/dasadmin/src/layouts/backend/components/aside.vue
index 162e22f6..0297ec81 100644
--- a/ui/dasadmin/src/layouts/backend/components/aside.vue
+++ b/ui/dasadmin/src/layouts/backend/components/aside.vue
@@ -1,8 +1,19 @@
 <template>
-    <el-aside v-if="!navTabs.state.tabFullScreen" :class="'layout-aside-' + config.layout.layoutMode + ' ' + (config.layout.shrink ? 'shrink' : '')">
+    <el-aside
+        v-if="!navTabs.state.tabFullScreen"
+        :class="[
+            config.layout.menuCollapse ? '' : 'layout-aside-collapse',
+            'layout-aside-' + config.layout.layoutMode + ' ' + (config.layout.shrink ? 'shrink' : ''),
+        ]"
+    >
         <Logo v-if="config.layout.menuShowTopBar" />
+
         <MenuVerticalChildren v-if="config.layout.layoutMode == 'Double'" />
         <MenuVertical v-else />
+        <div class="layout-toggle-bar" @click="onMenuCollapse">
+            <div class="layout-toggle-bar__top"></div>
+            <div class="layout-toggle-bar__bottom"></div>
+        </div>
     </el-aside>
 </template>
 
@@ -22,6 +33,14 @@ const config = useConfig()
 const navTabs = useNavTabs()
 
 const menuWidth = computed(() => config.menuWidth())
+
+const onMenuCollapse = () => {
+    if (config.layout.menuCollapse) {
+        config.setLayout('menuCollapse', false)
+    } else {
+        config.setLayout('menuCollapse', true)
+    }
+}
 </script>
 
 <style scoped lang="scss">
@@ -43,6 +62,7 @@ const menuWidth = computed(() => config.menuWidth())
     overflow: hidden;
     transition: width 0.3s ease;
     width: v-bind(menuWidth);
+    position: relative;
 }
 .shrink {
     position: fixed;
@@ -50,4 +70,60 @@ const menuWidth = computed(() => config.menuWidth())
     left: 0;
     z-index: 9999999;
 }
+.layout-toggle-bar {
+    cursor: pointer;
+    height: 72px;
+    width: 32px;
+    position: absolute;
+    top: calc(50% - 36px);
+
+    right: -9px;
+    .layout-toggle-bar__top {
+        background-color: rgba(191, 191, 191, 1);
+        position: absolute;
+        width: 4px;
+        border-radius: 2px;
+        height: 38px;
+        left: 14px;
+        transition:
+            background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+            transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .layout-toggle-bar__bottom {
+        background-color: rgba(191, 191, 191, 1);
+        position: absolute;
+        width: 4px;
+        border-radius: 2px;
+        height: 38px;
+        left: 14px;
+        top: 34px;
+        transition:
+            background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+            transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    &:hover {
+        .layout-toggle-bar__top {
+            background-color: rgba(153, 153, 153, 1);
+            transform: rotate(-12deg) scale(1.15) translateY(-2px);
+        }
+        .layout-toggle-bar__bottom {
+            background-color: rgba(153, 153, 153, 1);
+            transform: rotate(12deg) scale(1.15) translateY(2px);
+        }
+    }
+}
+.layout-aside-collapse {
+    .layout-toggle-bar {
+        &:hover {
+            .layout-toggle-bar__top {
+                background-color: rgba(153, 153, 153, 1);
+                transform: rotate(12deg) scale(1.15) translateY(-2px);
+            }
+            .layout-toggle-bar__bottom {
+                background-color: rgba(153, 153, 153, 1);
+                transform: rotate(-12deg) scale(1.15) translateY(2px);
+            }
+        }
+    }
+}
 </style>
diff --git a/ui/dasadmin/src/layouts/backend/components/menus/menuVertical.vue b/ui/dasadmin/src/layouts/backend/components/menus/menuVertical.vue
index a9ca45a6..978e835b 100644
--- a/ui/dasadmin/src/layouts/backend/components/menus/menuVertical.vue
+++ b/ui/dasadmin/src/layouts/backend/components/menus/menuVertical.vue
@@ -29,6 +29,10 @@ const state = reactive({
     defaultActive: '',
 })
 
+const width = computed(() => {
+    return config.layout.menuCollapse ? '5px' : '20px'
+})
+
 const verticalMenusScrollbarHeight = computed(() => {
     let menuTopBarHeight = 0
     if (config.layout.menuShowTopBar) {
@@ -70,7 +74,8 @@ onBeforeRouteUpdate((to) => {
 }
 .layouts-menu-vertical {
     border: 0;
-    padding: 10px 20px 30px 20px;
+    width: 100%;
+    padding: 10px v-bind(width) 30px v-bind(width);
     --el-menu-bg-color: transparent;
     --el-menu-active-color: #ffffff;
     li,
diff --git a/ui/dasadmin/src/layouts/backend/index.vue b/ui/dasadmin/src/layouts/backend/index.vue
index 42132a9d..b476a965 100644
--- a/ui/dasadmin/src/layouts/backend/index.vue
+++ b/ui/dasadmin/src/layouts/backend/index.vue
@@ -350,7 +350,7 @@ const menu = [
         ],
     },
 ]
-debugger
+
 function transformNode(menu: any) {
     menu = menu.map((node: any) => {
         return {
diff --git a/ui/dasadmin/src/stores/config.ts b/ui/dasadmin/src/stores/config.ts
index 27ece963..8f137b64 100644
--- a/ui/dasadmin/src/stores/config.ts
+++ b/ui/dasadmin/src/stores/config.ts
@@ -10,7 +10,7 @@ export const useConfig = defineStore(
             /* 全局 */
             showDrawer: false,
             // 是否收缩布局(小屏设备)
-            shrink: false,
+            shrink: true,
             // 后台布局方式，可选值<Default|Classic|Streamline|Double>
             layoutMode: 'Classic',
             // 后台主页面切换动画，可选值<slide-right|slide-left|el-fade-in-linear|el-fade-in|el-zoom-in-center|el-zoom-in-top|el-zoom-in-bottom>
@@ -70,7 +70,7 @@ export const useConfig = defineStore(
                 return layout.menuCollapse ? '0px' : layout.menuWidth + 'px'
             }
             // 菜单是否折叠
-            return layout.menuCollapse ? '64px' : layout.menuWidth + 'px'
+            return layout.menuCollapse ? '74px' : layout.menuWidth + 'px'
         }
 
         function setLang(val: string) {
diff --git a/ui/dasadmin/vite.config.ts b/ui/dasadmin/vite.config.ts
index 6ed844c5..0a6f01da 100644
--- a/ui/dasadmin/vite.config.ts
+++ b/ui/dasadmin/vite.config.ts
@@ -57,23 +57,26 @@ const viteConfig = ({ mode }: ConfigEnv): UserConfig => {
                 ...createProxy(VITE_APP_PROXY),
             },
         },
+        esbuild: {
+            drop: ['console', 'debugger'],
+        },
         build: {
             cssCodeSplit: false,
             sourcemap: false,
             outDir: VITE_OUT_DIR,
             emptyOutDir: true,
             chunkSizeWarningLimit: 1500,
-            terserOptions: {
-                compress: {
-                    keep_infinity: true,
-                    // Used to delete console in production environment
-                    drop_console: true,
-                    drop_debugger: true,
-                },
-                output: {
-                    comments: true, // 去掉注释内容
-                },
-            },
+            // terserOptions: {
+            //     compress: {
+            //         keep_infinity: true,
+            //         // Used to delete console in production environment
+            //         drop_console: true,
+            //         drop_debugger: true,
+            //     },
+            //     output: {
+            //         comments: true, // 去掉注释内容
+            //     },
+            // },
             rollupOptions: {
                 output: {
                     manualChunks: {