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

2026-02-22 22:27:00 +00:00 · 2026-02-02 17:02:05 +08:00
parent d7c4a47a11
commit 4e052c28ae
4 changed files with 282 additions and 90 deletions
--- a/src/components/common-split/index.vue
+++ b/src/components/common-split/index.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref, useAttrs } from 'vue'
+import { onMounted, onUnmounted, ref, useAttrs, watch } from 'vue'
 import Split from 'split.js'

 /**
@@ -32,31 +32,93 @@ const props = defineProps({
    validator (value) {
      return ['start', 'center', 'end'].includes(value)
    }
+  },
+  disabled: {
+    type: Boolean,
+    default: false
  }
 })
 const itemRefs = ref([])
+const isDragging = ref(false)

 const attrs = useAttrs()
+let splitInstance = null

-onMounted(() => {
-  Split(itemRefs.value.map(itemRef => itemRef), {
+const initSplit = () => {
+  if (splitInstance) {
+    splitInstance.destroy()
+    splitInstance = null
+  }
+  if (props.disabled) return
+
+  splitInstance = Split(itemRefs.value.map(itemRef => itemRef), {
    sizes: props.sizes,
    minSize: props.minSize,
    maxSize: props.maxSize,
    gutterAlign: props.gutterAlign,
+    gutterSize: 5,
    direction: props.direction,
-    ...attrs
+    ...attrs,
+    onDragStart: (sizes) => {
+      isDragging.value = true
+      if (attrs.onDragStart) {
+        attrs.onDragStart(sizes)
+      }
+      if (props.onDragStart) {
+        props.onDragStart(sizes)
+      }
+    },
+    onDragEnd: (sizes) => {
+      isDragging.value = false
+      if (attrs.onDragEnd) {
+        attrs.onDragEnd(sizes)
+      }
+      if (props.onDragEnd) {
+        props.onDragEnd(sizes)
+      }
+    }
  })
+}
+
+onMounted(() => {
+  initSplit()
+})
+
+onUnmounted(() => {
+  if (splitInstance) {
+    splitInstance.destroy()
+  }
+})
+
+watch(() => props.disabled, () => {
+  initSplit()
+})
+
+watch(() => props.sizes, (newSizes) => {
+  if (splitInstance) {
+    splitInstance.setSizes(newSizes)
+  }
+})
+
+defineExpose({
+  splitInstance,
+  getSizes: () => {
+    return splitInstance ? splitInstance.getSizes() : props.sizes
+  }
 })

 </script>

 <template>
-  <div class="common-split">
+  <div
+    class="common-split"
+    :class="{ 'is-disabled': disabled, 'is-dragging': isDragging }"
+  >
    <div
      v-for="(_, index) in sizes"
      ref="itemRefs"
      :key="index"
+      class="split-pane"
    >
      <slot :name="`split-${index}`" />
    </div>
@@ -64,5 +126,33 @@ onMounted(() => {
 </template>

 <style scoped>
-
+.common-split {
+  height: 100%;
+  width: 100%;
+}
+.split-pane {
+  overflow: hidden;
+  height: 100%;
+}
+.common-split.is-disabled {
+  display: flex;
+  flex-direction: row;
+}
+.common-split.is-disabled > .split-pane:first-child {
+  width: auto !important;
+  flex: none;
+}
+.common-split.is-disabled > .split-pane:last-child {
+  flex: 1;
+  width: auto !important;
+}
+:deep(.gutter) {
+  background-color: #eee;
+  background-repeat: no-repeat;
+  background-position: 50%;
+}
+/* Highlight when dragging (controlled by JS state) */
+.is-dragging > :deep(.gutter) {
+  background-color: #409eff !important;
+}
 </style>
--- a/src/layout/LeftMenu.vue
+++ b/src/layout/LeftMenu.vue
@@ -8,7 +8,10 @@ const businessMenus = computed(() => menuConfigStore.calcBusinessMenus())
 </script>

 <template>
-  <el-scrollbar>
+  <el-scrollbar
+    view-class="height100"
+    class="height100"
+  >
    <common-menu
      class="el-menu-left"
      :collapse="globalConfigStore.isCollapseLeft"
@@ -19,4 +22,17 @@ const businessMenus = computed(() => menuConfigStore.calcBusinessMenus())
 </template>

 <style scoped>
+:deep(.el-menu-left) {
+  height: 100%;
+  width: 100%;
+  border-right: none;
+  background-color: var(--el-bg-color-overlay); /* Or specific menu background color */
+}
+:deep(.el-scrollbar__view) {
+  height: 100%;
+  width: 100%;
+}
+.el-scrollbar {
+  width: 100%;
+}
 </style>
--- a/src/layout/MainContent.vue
+++ b/src/layout/MainContent.vue
@@ -0,0 +1,113 @@
+<script setup>
+import TopNav from '@/layout/TopNav.vue'
+import { useGlobalConfigStore } from '@/stores/GlobalConfigStore'
+import { useTabsViewStore } from '@/stores/TabsViewStore'
+import { GlobalLayoutMode } from '@/consts/GlobalConstants'
+import { useBreadcrumbConfigStore } from '@/stores/BreadcrumbConfigStore'
+import { APP_VERSION } from '@/config'
+import { getParentRootKey } from '@/route/RouteUtils'
+import { onKeyStroke } from '@vueuse/core'
+
+const globalConfigStore = useGlobalConfigStore()
+const tabsViewStore = useTabsViewStore()
+const breadcrumbConfigStore = useBreadcrumbConfigStore()
+
+const toggleMainFullscreen = () => {
+  tabsViewStore.toggleMainFullscreen()
+}
+
+onKeyStroke('Escape', (e) => {
+  if (tabsViewStore.isMainMaximized) {
+    e.preventDefault()
+    tabsViewStore.isMainMaximized = false
+  }
+})
+</script>
+
+<template>
+  <el-container class="height100">
+    <el-header>
+      <top-nav />
+    </el-header>
+    <el-header
+      v-if="globalConfigStore.layoutMode === GlobalLayoutMode.TOP && globalConfigStore.isShowBreadcrumb"
+      class="breadcrumb-header"
+      style="height: 40px"
+    >
+      <common-breadcrumb
+        style="padding-top:15px"
+        :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"
+      :class="{ 'is-maximized': tabsViewStore.isMainMaximized }"
+    >
+      <div
+        class="fullscreen-btn"
+        @click="toggleMainFullscreen"
+      >
+        <common-icon
+          :icon="tabsViewStore.isMainMaximized ? 'FullscreenExitFilled' : 'FullscreenFilled'"
+          :size="20"
+        />
+      </div>
+      <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>
+  </el-container>
+</template>
+
+<style scoped>
+.tabs-header {
+  padding-top: 6px !important;
+  height: auto !important;
+  border-bottom: none !important;
+  box-shadow: none !important;
+}
+</style>
--- a/src/views/HomeView.vue
+++ b/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>