From a3e8d8630226e51c3e58405ab20ecfd3fdd9b69e Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Thu, 25 Apr 2024 11:43:28 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E7=B3=BB=E7=BB=9F=E7=AE=A1=E7=90=86):=20?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=B3=BB=E7=BB=9F=E8=AE=BE=E7=BD=AE=E3=80=81?=
 =?UTF-8?q?=E7=BB=84=E7=BB=87=E7=AE=A1=E7=90=86=E4=B8=AD=E5=BF=83=E3=80=81?=
 =?UTF-8?q?=E5=B7=A5=E5=85=B7=E7=AE=B1-=E4=BE=A7=E8=BE=B9=E6=A0=8F?=
 =?UTF-8?q?=E5=8F=AF=E5=B1=95=E5=BC=80=E6=94=B6=E8=B5=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/core-frontend/package.json               |  2 +-
 .../assets/svg/icon_side-expand_outlined.svg  |  4 ++
 .../assets/svg/icon_side-fold_outlined.svg    |  4 ++
 .../src/custom-component/v-query/Time.vue     |  1 -
 .../src/layout/components/CollapseBar.vue     | 41 +++++++++++++++++++
 .../src/layout/components/Menu.vue            |  9 ++--
 .../src/layout/components/MenuItem.vue        |  8 ++--
 core/core-frontend/src/layout/index.vue       | 37 +++++++++++++++--
 8 files changed, 95 insertions(+), 11 deletions(-)
 create mode 100644 core/core-frontend/src/assets/svg/icon_side-expand_outlined.svg
 create mode 100644 core/core-frontend/src/assets/svg/icon_side-fold_outlined.svg
 create mode 100644 core/core-frontend/src/layout/components/CollapseBar.vue

diff --git a/core/core-frontend/package.json b/core/core-frontend/package.json
index b77fd311f6..cd6505eb63 100644
--- a/core/core-frontend/package.json
+++ b/core/core-frontend/package.json
@@ -24,7 +24,7 @@
     "axios": "^1.3.3",
     "crypto-js": "^4.1.1",
     "dayjs": "^1.11.9",
-    "element-plus-secondary": "^0.5.6",
+    "element-plus-secondary": "^0.5.8",
     "element-resize-detector": "^1.2.4",
     "file-saver": "^2.0.5",
     "html-to-image": "^1.11.11",
diff --git a/core/core-frontend/src/assets/svg/icon_side-expand_outlined.svg b/core/core-frontend/src/assets/svg/icon_side-expand_outlined.svg
new file mode 100644
index 0000000000..8278cbbf99
--- /dev/null
+++ b/core/core-frontend/src/assets/svg/icon_side-expand_outlined.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.5 4H19.5C19.7761 4 20 4.22386 20 4.5V5.5C20 5.77614 19.7761 6 19.5 6H2.5C2.22386 6 2 5.77614 2 5.5V4.5C2 4.22386 2.22386 4 2.5 4ZM2.5 18H19.5C19.7761 18 20 18.2239 20 18.5V19.5C20 19.7761 19.7761 20 19.5 20H2.5C2.22386 20 2 19.7761 2 19.5V18.5C2 18.2239 2.22386 18 2.5 18ZM2.5 11H13.5C13.7761 11 14 11.2239 14 11.5V12.5C14 12.7761 13.7761 13 13.5 13H2.5C2.22386 13 2 12.7761 2 12.5V11.5C2 11.2239 2.22386 11 2.5 11Z" fill="#1F2329"/>
+<path d="M21.4107 12.3072C21.3607 12.3901 21.2913 12.4596 21.2083 12.5096L16.9643 15.0679C16.6829 15.2375 16.3173 15.1469 16.1477 14.8655C16.0918 14.7728 16.0623 14.6667 16.0623 14.5584L16.0622 9.44156C16.0622 9.11302 16.3285 8.84667 16.6571 8.84666C16.7653 8.84666 16.8715 8.87619 16.9642 8.93208L21.2084 11.4906C21.4897 11.6602 21.5803 12.0258 21.4107 12.3072Z" fill="#1F2329"/>
+</svg>
diff --git a/core/core-frontend/src/assets/svg/icon_side-fold_outlined.svg b/core/core-frontend/src/assets/svg/icon_side-fold_outlined.svg
new file mode 100644
index 0000000000..5a46a3580e
--- /dev/null
+++ b/core/core-frontend/src/assets/svg/icon_side-fold_outlined.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.43781 4H21.4378C21.7139 4 21.9378 4.22386 21.9378 4.5V5.5C21.9378 5.77614 21.7139 6 21.4378 6H4.43781C4.16166 6 3.93781 5.77614 3.93781 5.5V4.5C3.93781 4.22386 4.16166 4 4.43781 4ZM4.43781 18H21.4378C21.7139 18 21.9378 18.2239 21.9378 18.5V19.5C21.9378 19.7761 21.7139 20 21.4378 20H4.43781C4.16166 20 3.93781 19.7761 3.93781 19.5V18.5C3.93781 18.2239 4.16166 18 4.43781 18ZM10.4378 11H21.4378C21.7139 11 21.9378 11.2239 21.9378 11.5V12.5C21.9378 12.7761 21.7139 13 21.4378 13H10.4378C10.1617 13 9.93781 12.7761 9.93781 12.5V11.5C9.93781 11.2239 10.1617 11 10.4378 11Z" fill="#1F2329"/>
+<path d="M2.0855 12.3072C2.13548 12.3901 2.20494 12.4596 2.28785 12.5096L6.53189 15.0679C6.81326 15.2375 7.17886 15.1469 7.34848 14.8655C7.40435 14.7729 7.43388 14.6667 7.43389 14.5584L7.43401 9.44158C7.43401 9.11303 7.16768 8.84669 6.83914 8.84668C6.73089 8.84668 6.6247 8.87621 6.532 8.93209L2.28785 11.4906C2.00647 11.6602 1.91588 12.0259 2.0855 12.3072Z" fill="#1F2329"/>
+</svg>
diff --git a/core/core-frontend/src/custom-component/v-query/Time.vue b/core/core-frontend/src/custom-component/v-query/Time.vue
index e15a1fa556..085df88b69 100644
--- a/core/core-frontend/src/custom-component/v-query/Time.vue
+++ b/core/core-frontend/src/custom-component/v-query/Time.vue
@@ -14,7 +14,6 @@ import 'vant/es/popup/style'
 import 'vant/es/date-picker/style'
 import 'vant/es/picker-group/style'
 import 'vant/es/time-picker/style'
-import { Icon } from '@/components/icon-custom'
 
 interface SelectConfig {
   selectValue: any
diff --git a/core/core-frontend/src/layout/components/CollapseBar.vue b/core/core-frontend/src/layout/components/CollapseBar.vue
new file mode 100644
index 0000000000..51f51598ff
--- /dev/null
+++ b/core/core-frontend/src/layout/components/CollapseBar.vue
@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+const props = defineProps({
+  isCollapse: Boolean
+})
+const emits = defineEmits(['setCollapse'])
+const setCollapse = () => {
+  emits('setCollapse', !props.isCollapse)
+}
+</script>
+
+<template>
+  <div class="de-collapse-bar" @click="setCollapse">
+    <el-icon>
+      <Icon :name="!isCollapse ? 'icon_side-fold_outlined' : 'icon_side-expand_outlined'"></Icon>
+    </el-icon>
+    {{ !isCollapse ? '收起导航' : '' }}
+  </div>
+</template>
+
+<style lang="less" scoped>
+.de-collapse-bar {
+  position: fixed;
+  cursor: pointer;
+  z-index: 10;
+  left: 0;
+  bottom: 0;
+  height: 48px;
+  padding: 14px 22px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  color: #646a73;
+  display: flex;
+  align-items: center;
+
+  .ed-icon {
+    font-size: 20px;
+    margin-right: 10px;
+  }
+}
+</style>
diff --git a/core/core-frontend/src/layout/components/Menu.vue b/core/core-frontend/src/layout/components/Menu.vue
index 31f9faa6e0..0847ad7969 100644
--- a/core/core-frontend/src/layout/components/Menu.vue
+++ b/core/core-frontend/src/layout/components/Menu.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, computed } from 'vue'
+import { computed } from 'vue'
 import { ElMenu } from 'element-plus-secondary'
 import { useRoute, useRouter } from 'vue-router'
 import { isExternal } from '@/utils/validate'
@@ -12,7 +12,10 @@ const tempColor = computed(() => {
       (appearanceStore.themeColor === 'custom' ? appearanceStore.customColor : '#3370FF') + '1A'
   }
 })
-const isCollapse = ref(false)
+defineProps({
+  collapse: Boolean
+})
+
 const route = useRoute()
 const { push } = useRouter()
 const menuList = computed(() => route.matched[0]?.children || [])
@@ -38,7 +41,7 @@ const menuSelect = (index: string, indexPath: string[]) => {
     @select="menuSelect"
     :default-active="activeIndex"
     class="el-menu-vertical"
-    :collapse="isCollapse"
+    :collapse="collapse"
   >
     <MenuItem v-for="menu in menuList" :key="menu.path" :menu="menu"></MenuItem>
   </el-menu>
diff --git a/core/core-frontend/src/layout/components/MenuItem.vue b/core/core-frontend/src/layout/components/MenuItem.vue
index 72712b3e0a..1dbc35a205 100644
--- a/core/core-frontend/src/layout/components/MenuItem.vue
+++ b/core/core-frontend/src/layout/components/MenuItem.vue
@@ -3,7 +3,7 @@ import { h } from 'vue'
 import { Icon } from '@/components/icon-custom'
 import { ElMenuItem, ElSubMenu, ElIcon } from 'element-plus-secondary'
 
-const title = props => {
+const titleWithIcon = props => {
   const { title, icon } = props.menu?.meta || {}
   return [
     h(ElIcon, null, { default: () => h(Icon, { className: 'logo', name: icon }) }),
@@ -21,16 +21,18 @@ const MenuItem = props => {
       ElSubMenu,
       { index: path },
       {
-        title: () => title(props),
+        title: () => titleWithIcon(props),
         default: () => children.map(ele => h(MenuItem, { menu: ele }))
       }
     )
   }
+  const { title, icon } = props.menu?.meta || {}
   return h(
     ElMenuItem,
     { index: path },
     {
-      title: () => title(props)
+      title: h('span', null, { default: () => title }),
+      default: h(ElIcon, null, { default: () => h(Icon, { className: 'logo', name: icon }) })
     }
   )
 }
diff --git a/core/core-frontend/src/layout/index.vue b/core/core-frontend/src/layout/index.vue
index 4dd7b7b7de..5e7192e437 100644
--- a/core/core-frontend/src/layout/index.vue
+++ b/core/core-frontend/src/layout/index.vue
@@ -1,10 +1,11 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import Header from './components/Header.vue'
 import HeaderSystem from './components/HeaderSystem.vue'
 import Sidebar from './components/Sidebar.vue'
 import Menu from './components/Menu.vue'
 import Main from './components/Main.vue'
+import CollapseBar from './components/CollapseBar.vue'
 import { ElContainer } from 'element-plus-secondary'
 import { useRoute } from 'vue-router'
 const route = useRoute()
@@ -12,6 +13,10 @@ const systemMenu = computed(() => route.path.includes('system'))
 const settingMenu = computed(() => route.path.includes('sys-setting'))
 const marketMenu = computed(() => route.path.includes('template-market'))
 const toolboxMenu = computed(() => route.path.includes('toolbox'))
+const isCollapse = ref(false)
+const setCollapse = () => {
+  isCollapse.value = !isCollapse.value
+}
 </script>
 
 <template>
@@ -22,10 +27,22 @@ const toolboxMenu = computed(() => route.path.includes('toolbox'))
     />
     <Header v-else></Header>
     <el-container class="layout-container">
-      <Sidebar v-if="systemMenu || settingMenu || toolboxMenu" class="layout-sidebar">
-        <div v-if="systemMenu" class="org-config-center">组织管理中心</div>
+      <Sidebar
+        v-if="(systemMenu || settingMenu || toolboxMenu) && !isCollapse"
+        class="layout-sidebar"
+      >
+        <div @click="setCollapse" v-if="systemMenu && !isCollapse" class="org-config-center">
+          组织管理中心
+        </div>
         <Menu :style="{ height: systemMenu ? 'calc(100% - 48px)' : '100%' }"></Menu>
       </Sidebar>
+      <el-aside class="layout-sidebar layout-sidebar-collapse" v-else>
+        <Menu
+          :collapse="isCollapse"
+          :style="{ height: systemMenu ? 'calc(100% - 48px)' : '100%' }"
+        ></Menu>
+      </el-aside>
+      <CollapseBar @setCollapse="setCollapse" :isCollapse="isCollapse"></CollapseBar>
       <Main
         class="layout-main"
         :class="{ 'with-sider': systemMenu || settingMenu || toolboxMenu }"
@@ -47,6 +64,20 @@ const toolboxMenu = computed(() => route.path.includes('toolbox'))
   .layout-container {
     .layout-sidebar {
       height: calc(100vh - 56px);
+      position: relative;
+      &::after {
+        content: '';
+        width: 100%;
+        height: 1px;
+        background: #1f232926;
+        position: absolute;
+        bottom: 48px;
+        left: 0;
+      }
+    }
+
+    .layout-sidebar-collapse {
+      width: 64px;
     }
 
     .org-config-center {