opt: 优化页面分割组件split功能和样式

src/assets/main.css

@@ -600,3 +600,44 @@ body,
 .dark .monaco-editor.vs-dark .monaco-editor-background {
     background-color: #1e1e1e !important;
 }
+
+.home-main.is-maximized {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 2000;
+    background-color: var(--el-bg-color);
+}
+
+.fullscreen-btn {
+    position: fixed;
+    top: auto;
+    right: 40px;
+    bottom: 90px;
+    z-index: 999;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: var(--el-bg-color-overlay);
+    color: var(--el-color-primary);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    box-shadow: var(--el-box-shadow-lighter);
+    opacity: 1;
+    transition: opacity 0.3s;
+    font-size: 20px;
+}
+
+.fullscreen-btn:hover {
+    opacity: 1;
+    box-shadow: var(--el-box-shadow);
+}
+
+/* Layout Improvements */
+.height100 {
+    height: 100%;
+}

src/components/common-form/index.vue

@@ -115,6 +115,9 @@ onMounted(() => {
   }
   if (props.submitByEnter) {
     removeEnterFn.value = onKeyStroke('Enter', (event) => {
+      if (event?.target?.tagName === 'TEXTAREA' || event?.target?.isContentEditable) {
+        return
+      }
       event?.stopImmediatePropagation()
       if (form.value) {
         console.info('=========================submitByEnter', formDiv.value)

src/components/common-split/index.vue

@@ -1,6 +1,7 @@
 <script setup>
-import { onMounted, ref, useAttrs } from 'vue'
+import { onMounted, ref, useAttrs, shallowRef, watch, computed } from 'vue'
 import Split from 'split.js'
+import { useElementSize } from '@vueuse/core'
 
 /**
  * 更多属性配置可以参考文档
@@ -32,31 +33,104 @@ const props = defineProps({
     validator (value) {
       return ['start', 'center', 'end'].includes(value)
     }
+  },
+  disabled: {
+    type: Boolean,
+    default: false
   }
 })
+const elementSizesRefs = ref([])
 const itemRefs = ref([])
+const isDragging = ref(false)
 
 const attrs = useAttrs()
+const splitInstance = shallowRef()
 
-onMounted(() => {
+const initSplit = () => {
-  Split(itemRefs.value.map(itemRef => itemRef), {
+  if (splitInstance.value) {
+    splitInstance.value.destroy()
+    splitInstance.value = null
+  }
+  // Clear previous size refs to avoid duplicates/leaks on re-init
+  elementSizesRefs.value = []
+
+  if (props.disabled) return
+
+  const elements = itemRefs.value.filter(el => el)
+  if (elements.length === 0) return
+
+  splitInstance.value = Split(elements.map(itemRef => {
+    const { width, height } = useElementSize(itemRef)
+    elementSizesRefs.value.push(props.direction === 'vertical' ? height : width)
+    return itemRef
+  }), {
     sizes: props.sizes,
     minSize: props.minSize,
     maxSize: props.maxSize,
     gutterAlign: props.gutterAlign,
+    gutterSize: 5,
     direction: props.direction,
-    ...attrs
+    ...attrs,
+    gutter: (index, direction) => {
+      const gutter = document.createElement('div')
+      gutter.className = `gutter gutter-${direction}`
+      gutter.addEventListener('mousedown', () => {
+        gutter.classList.add('is-active')
       })
+      return gutter
+    },
+    onDragStart: (sizes) => {
+      isDragging.value = true
+      if (attrs.onDragStart) {
+        attrs.onDragStart(sizes)
+      }
+    },
+    onDragEnd: (sizes) => {
+      isDragging.value = false
+      // remove is-active from all gutters
+      const container = itemRefs.value[0]?.parentNode
+      if (container) {
+        container.querySelectorAll('.gutter.is-active').forEach(el => el.classList.remove('is-active'))
+      }
+
+      if (attrs.onDragEnd) {
+        attrs.onDragEnd(sizes)
+      }
+    }
+  })
+}
+
+onMounted(() => {
+  initSplit()
+})
+
+watch(() => props.sizes, () => {
+  initSplit()
+}, { flush: 'post' })
+
+watch(() => props.disabled, () => {
+  initSplit()
+}, { flush: 'post' })
+
+const elementSizes = computed(() => elementSizesRefs.value?.map(sizeRef => sizeRef.value))
+
+defineExpose({
+  splitInstance,
+  elementSizes
 })
 
 </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 +138,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) */
+:deep(.gutter.is-active) {
+  background-color: #409eff !important;
+}
 </style>

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>

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>

src/stores/TabsViewStore.js

@@ -39,6 +39,7 @@ const serializer = {
  */
 export const useTabsViewStore = defineStore('tabsView', () => {
   const isTabMode = ref(false)
+  const isMainMaximized = ref(false)
   const isCachedTabMode = ref(true)
   const isShowTabIcon = ref(true)
   const currentTab = ref('')
@@ -204,6 +205,10 @@ export const useTabsViewStore = defineStore('tabsView', () => {
   })
 
   return {
+    isMainMaximized,
+    toggleMainFullscreen () {
+      isMainMaximized.value = !isMainMaximized.value
+    },
     isTabMode,
     isCachedTabMode,
     isShowTabIcon,

src/views/HomeView.vue

@@ -1,105 +1,78 @@
 <script setup>
 import LeftMenu from '@/layout/LeftMenu.vue'
-import TopNav from '@/layout/TopNav.vue'
+import MainContent from '@/layout/MainContent.vue'
-import { useGlobalConfigStore } from '@/stores/GlobalConfigStore'
-import { useTabsViewStore } from '@/stores/TabsViewStore'
-import { GlobalLayoutMode } from '@/consts/GlobalConstants'
-import { computed } from '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 { useTabModeScrollSaver } from '@/route/RouteUtils'
-import { APP_VERSION } from '@/config'
-import { useTabModeScrollSaver, getParentRootKey } 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"
+      :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"
+    >
+      <template #split-0>
+        <el-aside
+          ref="leftMenuAsideRef"
           class="index-aside menu"
           width="auto"
+          style="height: 100%; width: 100% !important;"
         >
-      <left-menu />
+          <left-menu class="height100" />
         </el-aside>
-    <el-container>
+      </template>
-      <el-header>
+      <template #split-1>
-        <top-nav />
+        <main-content class="height100" />
-      </el-header>
+      </template>
-      <el-header
+    </common-split>
-        v-if="globalConfigStore.layoutMode === GlobalLayoutMode.TOP && globalConfigStore.isShowBreadcrumb"
+
-        class="tabs-header"
+    <main-content v-else />
-      >
-        <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>
-  </el-container>
 </template>
+
 <style scoped>
-.tabs-header {
+.index-container {
-  padding-top: 6px !important;
+  height: 100vh;
-  height: auto !important;
+  overflow: hidden;
-  border-bottom: none !important;
+}
-  box-shadow: none !important;
+.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>