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

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>