feat: 增加左侧菜单拖动控制

src/views/HomeView.vue

@@ -1,105 +1,78 @@
 <script setup>
 import LeftMenu from '@/layout/LeftMenu.vue'
-import TopNav from '@/layout/TopNav.vue'
-import { useGlobalConfigStore } from '@/stores/GlobalConfigStore'
-import { useTabsViewStore } from '@/stores/TabsViewStore'
-import { GlobalLayoutMode } from '@/consts/GlobalConstants'
-import { computed } from 'vue'
+import MainContent from '@/layout/MainContent.vue'
 import GlobalSettings from '@/views/components/global/GlobalSettings.vue'
+import { useGlobalConfigStore } from '@/stores/GlobalConfigStore'
+import { GlobalLayoutMode } from '@/consts/GlobalConstants'
+import { computed, ref } from 'vue'
 import { useMenuConfigStore } from '@/stores/MenuConfigStore'
-import { useBreadcrumbConfigStore } from '@/stores/BreadcrumbConfigStore'
-import { APP_VERSION } from '@/config'
-import { useTabModeScrollSaver, getParentRootKey } from '@/route/RouteUtils'
+import { useTabModeScrollSaver } from '@/route/RouteUtils'
 
 const globalConfigStore = useGlobalConfigStore()
-const tabsViewStore = useTabsViewStore()
-const breadcrumbConfigStore = useBreadcrumbConfigStore()
 const showLeftMenu = computed(() => {
   return globalConfigStore.layoutMode === GlobalLayoutMode.LEFT
 })
+const leftMenuAsideRef = ref(null)
+
+const handleDragEnd = () => {
+  if (leftMenuAsideRef.value) {
+    const width = leftMenuAsideRef.value.$el.offsetWidth
+    if (width < 100) {
+      globalConfigStore.isCollapseLeft = true
+    }
+  }
+}
+
 useTabModeScrollSaver()
 useMenuConfigStore().loadBusinessMenus()
 </script>
 
 <template>
   <el-container class="index-container">
-    <el-aside
+    <common-split
       v-if="showLeftMenu"
-      class="index-aside menu"
-      width="auto"
+      :disabled="globalConfigStore.isCollapseLeft"
+      :class="{ 'collapsed-split': globalConfigStore.isCollapseLeft }"
+      :sizes="[20, 80]"
+      :min-size="[60, 500]"
+      :max-size="[500, Infinity]"
+      class="flex-grow"
+      @drag-end="handleDragEnd"
     >
-      <left-menu />
-    </el-aside>
-    <el-container>
-      <el-header>
-        <top-nav />
-      </el-header>
-      <el-header
-        v-if="globalConfigStore.layoutMode === GlobalLayoutMode.TOP && globalConfigStore.isShowBreadcrumb"
-        class="tabs-header"
-      >
-        <common-breadcrumb
-          :show-icon="tabsViewStore.isShowTabIcon"
-          :label-config="breadcrumbConfigStore.breadcrumbConfig"
-        />
-      </el-header>
-      <el-header
-        v-if="tabsViewStore.isTabMode"
-        class="tabs-header tabMode"
-      >
-        <common-tabs-view />
-      </el-header>
-      <el-main class="home-main">
-        <router-view v-slot="{ Component, route }">
-          <transition
-            :name="route.meta?.transition!==false?'slide-fade':''"
-            mode="out-in"
-          >
-            <KeepAlive
-              v-if="tabsViewStore.isTabMode&&tabsViewStore.isCachedTabMode"
-              :include="tabsViewStore.cachedTabs"
-              :max="tabsViewStore.maxCacheCount"
-            >
-              <component
-                :is="Component"
-                :key="getParentRootKey(route)"
-              />
-            </KeepAlive>
-            <component
-              :is="Component"
-              v-else
-              :key="route.fullPath"
-            />
-          </transition>
-        </router-view>
-        <el-container class="text-center padding-10 flex-center">
-          <span>
-            <el-text>Copyright © 2024 Version: {{ APP_VERSION }}</el-text>&nbsp;
-            <el-link
-              href="https://github.com/fugary/simple-element-plus-template"
-              type="primary"
-              target="_blank"
-            >
-              https://github.com/fugary/simple-element-plus-template
-            </el-link>
-          </span>
-        </el-container>
-        <el-backtop
-          v-common-tooltip="$t('common.label.backtop')"
-          target=".home-main"
-          :right="50"
-          :bottom="50"
-        />
-      </el-main>
-      <global-settings />
-    </el-container>
+      <template #split-0>
+        <el-aside
+          ref="leftMenuAsideRef"
+          class="index-aside menu"
+          width="auto"
+          style="height: 100%; width: 100% !important;"
+        >
+          <left-menu class="height100" />
+        </el-aside>
+      </template>
+      <template #split-1>
+        <main-content class="height100" />
+      </template>
+    </common-split>
+
+    <main-content v-else />
+    <global-settings />
   </el-container>
 </template>
+
 <style scoped>
-.tabs-header {
-  padding-top: 6px !important;
-  height: auto !important;
-  border-bottom: none !important;
-  box-shadow: none !important;
+.index-container {
+  height: 100vh;
+  overflow: hidden;
+}
+.index-aside {
+  background-color: var(--el-bg-color-overlay);
+  border-right: none;
+}
+:deep(.collapsed-split.is-disabled > .split-pane:first-child) {
+  width: 64px !important;
+}
+:deep(.common-split:not(.is-dragging) > .split-pane) {
+  will-change: width;
+  transition: width 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
 }
 </style>