From 6ae72740953d37513d3dc92f3969653b82fe775f Mon Sep 17 00:00:00 2001
From: zhengkunwang223 <zhengkun@fit2cloud.com>
Date: Wed, 1 Feb 2023 12:05:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E6=8A=98=E5=8F=A0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components.d.ts                      |  1 +
 .../app-layout/menu/components/Collapse.vue   | 28 +++++++++++++++++++
 .../src/components/app-layout/menu/index.scss |  6 ++++
 .../src/components/app-layout/menu/index.vue  |  4 ++-
 4 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/app-layout/menu/components/Collapse.vue

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index a2be18cd0..234eb0714 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -14,6 +14,7 @@ declare module 'vue' {
     BreadCrumbsItem: typeof import('./src/components/bread-crumbs/bread-crumbs-item.vue')['default']
     CardWithHeader: typeof import('./src/components/card-with-header/index.vue')['default']
     Codemirror: typeof import('./src/components/codemirror-dialog/codemirror.vue')['default']
+    Collapse: typeof import('./src/components/app-layout/menu/components/Collapse.vue')['default']
     ComplexTable: typeof import('./src/components/complex-table/index.vue')['default']
     ConfirmDialog: typeof import('./src/components/confirm-dialog/index.vue')['default']
     ContainerLog: typeof import('./src/components/container-log/index.vue')['default']
diff --git a/frontend/src/components/app-layout/menu/components/Collapse.vue b/frontend/src/components/app-layout/menu/components/Collapse.vue
new file mode 100644
index 000000000..67bb4688c
--- /dev/null
+++ b/frontend/src/components/app-layout/menu/components/Collapse.vue
@@ -0,0 +1,28 @@
+<template>
+    <div class="collapse">
+        <el-icon class="collapse-icon" :size="25" @click="menuStore.setCollapse()">
+            <component :is="isCollapse ? 'expand' : 'fold'"></component>
+        </el-icon>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { MenuStore } from '@/store/modules/menu';
+const menuStore = MenuStore();
+const isCollapse = computed((): boolean => menuStore.isCollapse);
+</script>
+
+<style scoped lang="scss">
+@import '../index.scss';
+
+.collapse {
+    height: 47px;
+    border-top: 1px solid #e4e7ed;
+}
+
+.collapse-icon {
+    margin-top: 10px;
+    margin-left: 25px;
+}
+</style>
diff --git a/frontend/src/components/app-layout/menu/index.scss b/frontend/src/components/app-layout/menu/index.scss
index ce0a75fa7..425b61f2f 100644
--- a/frontend/src/components/app-layout/menu/index.scss
+++ b/frontend/src/components/app-layout/menu/index.scss
@@ -122,3 +122,9 @@
         }
     }
 }
+
+.el-menu--collapse {
+    width: 85px;
+
+    // margin-right: 10px;
+}
diff --git a/frontend/src/components/app-layout/menu/index.vue b/frontend/src/components/app-layout/menu/index.vue
index 4a4b98249..539834edc 100644
--- a/frontend/src/components/app-layout/menu/index.vue
+++ b/frontend/src/components/app-layout/menu/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div
         class="menu"
-        :style="{ width: isCollapse ? '65px' : '180px' }"
+        :style="{ width: isCollapse ? '75px' : '180px' }"
         element-loading-text="Loading..."
         :element-loading-spinner="loadingSvg"
         element-loading-svg-view-box="-10, -10, 50, 50"
@@ -30,6 +30,7 @@
                 </el-menu-item>
             </el-menu>
         </el-scrollbar>
+        <Collapse />
     </div>
 </template>
 
@@ -39,6 +40,7 @@ import { RouteRecordRaw, useRoute } from 'vue-router';
 import { MenuStore } from '@/store/modules/menu';
 import { loadingSvg } from '@/utils/svg';
 import Logo from './components/logo.vue';
+import Collapse from './components/Collapse.vue';
 import SubItem from './components/sub-item.vue';
 import router, { menuList } from '@/routers/router';
 import { logOutApi } from '@/api/modules/auth';