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

src/assets/main.css

@@ -1,13 +1,18 @@
-body, #app .el-header{
+body,
+#app .el-header {
     padding: 0;
 }
 
-html, body {
+html,
+body {
     margin: 0;
     --el-border-radius-large: 6px;
 }
 
-html, body, #app, .index-container {
+html,
+body,
+#app,
+.index-container {
     height: 100%;
 }
 
@@ -60,18 +65,23 @@ html, body, #app, .index-container {
 .padding-left1 {
     padding-left: 5px;
 }
+
 .padding-left2 {
     padding-left: 10px;
 }
+
 .padding-left3 {
     padding-left: 15px;
 }
+
 .padding-right1 {
     padding-right: 5px;
 }
+
 .padding-right2 {
     padding-right: 10px;
 }
+
 .padding-right3 {
     padding-right: 15px;
 }
@@ -79,18 +89,23 @@ html, body, #app, .index-container {
 .padding-top1 {
     padding-top: 5px;
 }
+
 .padding-top2 {
     padding-top: 10px;
 }
+
 .padding-top3 {
     padding-top: 15px;
 }
+
 .padding-bottom1 {
     padding-bottom: 5px;
 }
+
 .padding-bottom2 {
     padding-bottom: 10px;
 }
+
 .padding-bottom3 {
     padding-bottom: 15px;
 }
@@ -98,9 +113,11 @@ html, body, #app, .index-container {
 .margin-bottom1 {
     margin-bottom: 5px;
 }
+
 .margin-bottom2 {
     margin-bottom: 10px;
 }
+
 .margin-bottom3 {
     margin-bottom: 15px;
 }
@@ -108,9 +125,11 @@ html, body, #app, .index-container {
 .margin-left1 {
     margin-left: 5px;
 }
+
 .margin-left2 {
     margin-left: 10px;
 }
+
 .margin-left3 {
     margin-left: 15px;
 }
@@ -118,9 +137,11 @@ html, body, #app, .index-container {
 .margin-right1 {
     margin-right: 5px;
 }
+
 .margin-right2 {
     margin-right: 10px;
 }
+
 .margin-right3 {
     margin-right: 15px;
 }
@@ -128,9 +149,11 @@ html, body, #app, .index-container {
 .margin-top1 {
     margin-top: 5px;
 }
+
 .margin-top2 {
     margin-top: 10px;
 }
+
 .margin-top3 {
     margin-top: 15px;
 }
@@ -138,20 +161,22 @@ html, body, #app, .index-container {
 .text-center {
     text-align: center;
 }
+
 .text-left {
     text-align: left;
 }
+
 .text-right {
     text-align: right;
 }
 
-.flex-center{
+.flex-center {
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
-.flex-center-col{
+.flex-center-col {
     display: flex;
     align-items: center;
 }
@@ -165,26 +190,30 @@ html, body, #app, .index-container {
 }
 
 .el-dialog.is-fullscreen .el-dialog__header,
-.el-dialog.is-fullscreen .el-dialog__footer{
+.el-dialog.is-fullscreen .el-dialog__footer {
     position: fixed;
     left: 0;
-    right:0;
+    right: 0;
     z-index: 999;
     border-radius: 0;
     padding-left: 20px;
 }
-.el-dialog.is-fullscreen .el-dialog__header{
+
+.el-dialog.is-fullscreen .el-dialog__header {
     margin-top: -20px;
     padding-top: 20px;
     background: inherit;
 }
-.el-dialog.is-fullscreen .el-dialog__footer{
+
+.el-dialog.is-fullscreen .el-dialog__footer {
     bottom: var(--el-dialog-padding-primary);
 }
-.el-dialog.is-fullscreen .dialog-footer{
+
+.el-dialog.is-fullscreen .dialog-footer {
     border-radius: 0;
 }
-.el-dialog.is-fullscreen .el-dialog__body{
+
+.el-dialog.is-fullscreen .el-dialog__body {
     padding: 48px 12px;
 }
 
@@ -192,13 +221,14 @@ html, body, #app, .index-container {
     z-index: 10;
     width: 6px;
 }
+
 .icon-list::-webkit-scrollbar-thumb {
-    border-radius:5px;
-    width:6px;
-    background:var(--el-text-color-disabled)
+    border-radius: 5px;
+    width: 6px;
+    background: var(--el-text-color-disabled)
 }
 
-.login-form .el-card__header{
+.login-form .el-card__header {
     padding-top: 0;
     padding-bottom: 0;
 }
@@ -230,7 +260,7 @@ html, body, #app, .index-container {
     padding-top: 20px;
 }
 
-.reason-code-container .el-radio__label{
+.reason-code-container .el-radio__label {
     white-space: break-spaces;
 }
 
@@ -250,40 +280,40 @@ html, body, #app, .index-container {
 }
 
 .common-form.el-form--inline .el-select,
-.common-subform.el-form--inline .el-select{
+.common-subform.el-form--inline .el-select {
     --el-select-width: 200px;
 }
 
 .common-form.el-form--inline .el-input,
-.common-subform.el-form--inline .el-input{
+.common-subform.el-form--inline .el-input {
     --el-input-width: 200px;
     --el-date-editor-width: 200px;
 }
 
-.common-form-small.common-form.el-form--inline .el-select{
+.common-form-small.common-form.el-form--inline .el-select {
     --el-select-width: 160px;
 }
 
-.common-form-small.common-form.el-form--inline .el-input{
+.common-form-small.common-form.el-form--inline .el-input {
     --el-input-width: 160px;
     --el-date-editor-width: 160px;
 }
 
 .form-edit-width-70 {
-    width:70%
+    width: 70%
 }
 
 .form-edit-width-90 {
-    width:90%
+    width: 90%
 }
 
 .form-edit-width-100 {
-    width:100%
+    width: 100%
 }
 
-.form-edit-width-70 .el-select:not(:is(.el-form--inline .el-select,.el-pagination .el-select)),
-.form-edit-width-90 .el-select:not(:is(.el-form--inline .el-select,.el-pagination .el-select)),
-.form-edit-width-100 .el-select:not(:is(.el-form--inline .el-select,.el-pagination .el-select)){
+.form-edit-width-70 .el-select:not(:is(.el-form--inline .el-select, .el-pagination .el-select)),
+.form-edit-width-90 .el-select:not(:is(.el-form--inline .el-select, .el-pagination .el-select)),
+.form-edit-width-100 .el-select:not(:is(.el-form--inline .el-select, .el-pagination .el-select)) {
     width: 100%;
 }
 
@@ -291,17 +321,18 @@ html, body, #app, .index-container {
     cursor: pointer;
 }
 
-.common-autocomplete .el-popover__title{
+.common-autocomplete .el-popover__title {
     font-size: 14px;
     font-weight: 600;
 }
 
-.common-autocomplete .autocomplete-table .el-table__cell{
+.common-autocomplete .autocomplete-table .el-table__cell {
     padding: 3px 0;
     cursor: pointer;
 }
 
-.common-autocomplete .el-tabs__nav-next, .el-tabs__nav-prev {
+.common-autocomplete .el-tabs__nav-next,
+.el-tabs__nav-prev {
     line-height: 30px;
 }
 
@@ -331,7 +362,7 @@ html, body, #app, .index-container {
     right: -20px;
 }
 
-.small-card .el-card__header{
+.small-card .el-card__header {
     padding: 10px;
 }
 
@@ -354,7 +385,7 @@ html, body, #app, .index-container {
 }
 
 .common-data-row label {
-    font-weight: 600 ;
+    font-weight: 600;
 }
 
 .common-data-row .el-col {
@@ -408,7 +439,7 @@ html, body, #app, .index-container {
     flex-direction: row-reverse;
 }
 
-.common-message-confirm .el-message-box__btns .el-button+.el-button{
+.common-message-confirm .el-message-box__btns .el-button+.el-button {
     margin-right: 12px;
 }
 
@@ -441,6 +472,7 @@ html, body, #app, .index-container {
     float: right;
     width: calc(100% - 140px) !important;
 }
+
 .common-params-edit .el-upload-list {
     margin-left: -515px;
     width: 700px;
@@ -453,13 +485,16 @@ html, body, #app, .index-container {
 .request-table {
     overflow: auto;
 }
+
 .request-table .el-table__row {
     cursor: pointer;
 }
-.request-table .current-row td:first-child{
+
+.request-table .current-row td:first-child {
     border-left: 4px solid var(--el-color-primary);
 }
-.request-table td{
+
+.request-table td {
     border-left: 4px solid transparent;
 }
 
@@ -506,6 +541,103 @@ html, body, #app, .index-container {
     resize: horizontal;
     overflow: auto;
 }
+
 .disable-affix .el-affix--fixed {
     position: unset;
 }
+
+/* Theme transition animation (from Element Plus) */
+::view-transition-old(root),
+::view-transition-new(root) {
+    animation: none;
+    mix-blend-mode: normal;
+}
+
+::view-transition-old(root) {
+    z-index: 1;
+}
+
+::view-transition-new(root) {
+    z-index: 2147483646;
+}
+
+.dark::view-transition-old(root) {
+    z-index: 2147483646;
+}
+
+.dark::view-transition-new(root) {
+    z-index: 1;
+}
+
+/* 整体编辑器区域 */
+.monaco-editor.vs {
+    background-color: #f5f7fa;
+}
+
+/* gutter（行号区） */
+.monaco-editor.vs .margin {
+    background-color: #f0f2f5;
+    box-shadow: inset -1px 0 0 #dcdfe6;
+}
+
+/* 内容区 */
+.monaco-editor.vs .monaco-editor-background {
+    background-color: #ffffff;
+}
+
+/* Dark Mode Editor Contrast */
+.dark .monaco-editor.vs-dark {
+    background-color: var(--el-bg-color);
+    border: none;
+}
+
+.dark .monaco-editor.vs-dark .margin {
+    background-color: #252526 !important;
+    box-shadow: inset -1px 0 0 #424242;
+    border: none;
+}
+
+.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-menu/index.vue

@@ -51,5 +51,38 @@ const activeRoutePath = computed(() => {
 </template>
 
 <style scoped>
+:deep(.el-menu) {
+  border-right: none;
+}
 
+/* Base Item Style */
+:deep(.el-menu-item),
+:deep(.el-sub-menu__title) {
+  transition: all 0.3s;
+}
+
+/* Vertical Menu Active State (Default) */
+:deep(.el-menu:not(.el-menu--horizontal) .el-menu-item.is-active) {
+  background-color: var(--el-color-primary-light-9);
+  border-right: 3px solid var(--el-color-primary);
+  color: var(--el-color-primary);
+  font-weight: 500;
+}
+
+/* Dark Mode Active Override */
+.dark :deep(.el-menu:not(.el-menu--horizontal) .el-menu-item.is-active) {
+  background-color: rgba(64, 158, 255, 0.2);
+}
+
+/* Hover Effects */
+:deep(.el-menu-item:hover),
+:deep(.el-sub-menu__title:hover) {
+  background-color: var(--el-fill-color-light);
+  color: var(--el-menu-text-color);
+}
+
+.dark :deep(.el-menu-item:hover),
+.dark :deep(.el-sub-menu__title:hover) {
+  background-color: var(--el-bg-color-overlay);
+}
 </style>

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(() => {
-  Split(itemRefs.value.map(itemRef => itemRef), {
+const initSplit = () => {
+  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/components/common-tabs-view/index.vue

@@ -121,7 +121,96 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
-.common-tabs .el-tabs__header {
+:deep(.el-tabs__header) {
   margin: 0;
+  border-bottom: 1px solid var(--el-border-color-light) !important;
+  position: relative;
+}
+
+:deep(.el-tabs__nav) {
+  border: 0 !important;
+}
+
+/* Allow pseudo-elements to overflow and cover the header border */
+:deep(.el-tabs__nav-wrap),
+:deep(.el-tabs__nav-scroll) {
+  overflow: visible !important;
+}
+
+:deep(.el-tabs__item) {
+  border: 1px solid transparent !important;
+  margin: 0 4px 0 0;
+  border-radius: 4px 4px 0 0;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  /* Default inactive background */
+  background-color: var(--el-fill-color-light);
+}
+
+/* Bottom border for inactive tabs */
+:deep(.el-tabs__item:not(.is-active)) {
+  border-bottom: 1px solid var(--el-border-color-light) !important;
+}
+
+/* Specific styling for active tab to look "connected" to content */
+:deep(.el-tabs__item.is-active) {
+  background-color: var(--el-bg-color);
+  border-left: 1px solid var(--el-border-color-light) !important;
+  border-right: 1px solid var(--el-border-color-light) !important;
+  border-top: 1px solid var(--el-border-color-light) !important;
+  border-bottom: 1px solid transparent !important;
+  position: relative;
+  font-weight: 600;
+}
+
+/* Cover the header bottom border under active tab */
+:deep(.el-tabs__item.is-active)::before {
+  content: "";
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background-color: var(--el-bg-color);
+  z-index: 10;
+}
+
+/* Top highlight line for active tab */
+:deep(.el-tabs__item.is-active)::after {
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  width: calc(100% + 2px);
+  height: 2px;
+  background-color: var(--el-color-primary);
+  border-radius: 4px 4px 0 0;
+}
+
+:deep(.el-tabs__item:not(.is-active):hover) {
+  background-color: var(--el-fill-color);
+  color: var(--el-color-primary);
+}
+
+/* Dark mode adjustments */
+.dark :deep(.el-tabs__header) {
+  border-bottom: 1px solid var(--el-border-color-darker) !important;
+}
+
+.dark :deep(.el-tabs__item) {
+  background-color: var(--el-bg-color-overlay);
+}
+
+.dark :deep(.el-tabs__item:not(.is-active)) {
+  border-bottom: 1px solid var(--el-border-color-darker) !important;
+}
+
+.dark :deep(.el-tabs__item.is-active) {
+  background-color: var(--el-bg-color);
+  border-color: var(--el-border-color-darker) !important;
+  border-bottom-color: transparent !important;
+}
+
+.dark :deep(.el-tabs__item.is-active)::before {
+  background-color: var(--el-bg-color);
 }
 </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/services/menu/MenuService.js

@@ -16,6 +16,7 @@ import { GlobalLocales } from '@/consts/GlobalConstants'
 import { useLoginConfigStore } from '@/stores/LoginConfigStore'
 import { I18N_ENABLED, THEME_ENABLED } from '@/config'
 import { $logout } from '@/utils'
+import { nextTick } from 'vue'
 
 export const searchMenusResult = (queryParam, config) => {
   return $httpPost('/api/searchMenus', queryParam, config)
@@ -135,6 +136,67 @@ const processMenus = (menus, parent = undefined) => {
 
 export const useThemeAndLocaleMenus = () => {
   const globalConfigStore = useGlobalConfigStore()
+
+  const toggleTheme = (event) => {
+    // Attempt to get coordinates from the event or global event
+    // Element Plus el-menu-item emits a custom object, not a MouseEvent, so event.clientX might be missing.
+    const mouseEvent = event && typeof event.clientX === 'number' ? event : window.event
+    const x = mouseEvent?.clientX ?? window.innerWidth / 2
+    const y = mouseEvent?.clientY ?? window.innerHeight / 2
+
+    const endRadius = Math.hypot(
+      Math.max(x, innerWidth - x),
+      Math.max(y, innerHeight - y)
+    )
+
+    // Fallback for browsers without View Transition API
+    if (!document.startViewTransition) {
+      globalConfigStore.changeTheme(!globalConfigStore.isDarkTheme)
+      return
+    }
+
+    // Disable transitions to prevent "fading" snapshot
+    const css = document.createElement('style')
+    css.appendChild(document.createTextNode(`* {
+      -webkit-transition: none !important;
+      -moz-transition: none !important;
+      -o-transition: none !important;
+      -ms-transition: none !important;
+      transition: none !important;
+    }`))
+    document.head.appendChild(css)
+
+    const transition = document.startViewTransition(async () => {
+      globalConfigStore.changeTheme(!globalConfigStore.isDarkTheme)
+      await nextTick()
+    })
+
+    transition.ready.then(() => {
+      const clipPath = [
+        `circle(0px at ${x}px ${y}px)`,
+        `circle(${endRadius}px at ${x}px ${y}px)`
+      ]
+      document.documentElement.animate(
+        {
+          clipPath: globalConfigStore.isDarkTheme ? [...clipPath].reverse() : clipPath
+        },
+        {
+          duration: 400,
+          easing: 'ease-in',
+          fill: 'forwards',
+          pseudoElement: globalConfigStore.isDarkTheme
+            ? '::view-transition-old(root)'
+            : '::view-transition-new(root)'
+        }
+      )
+    })
+
+    // Clean up the transition disable style after the animation finishes
+    transition.finished.then(() => {
+      document.head.removeChild(css)
+    })
+  }
+
   return [{
     icon: 'LanguageFilled',
     isDropdown: true,
@@ -156,7 +218,7 @@ export const useThemeAndLocaleMenus = () => {
     isDropdown: true,
     enabled: THEME_ENABLED,
     iconIf: () => !globalConfigStore.isDarkTheme ? 'moon' : 'sunny',
-    click: () => globalConfigStore.changeTheme(!globalConfigStore.isDarkTheme)
+    click: (event) => toggleTheme(event)
   }]
 }
 

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/vendors/monaco-editor.js

@@ -17,7 +17,6 @@ const defaultConfig = {
   automaticLayout: true,
   autoIndent: 'full',
   scrollBeyondLastLine: false,
-  theme: 'vs-dark',
   wordWrap: 'on',
   readOnly: true
 }

src/views/HomeView.vue

@@ -1,100 +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>
 
+<style scoped>
+.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>

src/views/tools/Charts.vue

@@ -45,6 +45,7 @@ const chartConfig = {
     <v-chart
       v-if="chartConfig"
       class="chart"
+      :key="theme"
       :theme="theme"
       :option="chartConfig"
       autoresize

src/views/tools/Editors.vue

@@ -1,9 +1,17 @@
 <script setup>
 import { useMonacoEditorOptions } from '@/vendors/monaco-editor'
 import { $copyText } from '@/utils'
+import { useGlobalConfigStore } from '@/stores/GlobalConfigStore'
+import { computed } from 'vue'
+
+const globalConfigStore = useGlobalConfigStore()
 const { contentRef, languageRef, editorRef, monacoEditorOptions, formatDocument } = useMonacoEditorOptions({
   readOnly: false
 })
+const theme = computed(() => {
+  return globalConfigStore.isDarkTheme ? 'vs-dark' : 'vs'
+})
+
 </script>
 
 <template>
@@ -13,6 +21,7 @@ const { contentRef, languageRef, editorRef, monacoEditorOptions, formatDocument
       :language="languageRef"
       height="400px"
       :options="monacoEditorOptions"
+      :theme="theme"
       @mount="editorRef=$event"
     />
     <el-footer

src/views/tools/Icons.vue

@@ -1,8 +1,7 @@
 <script setup>
 import { computed, ref } from 'vue'
-import { useClipboard } from '@vueuse/core'
-import { ElMessage } from 'element-plus'
 import { filterIconsByKeywords } from '@/services/icon/IconService'
+import { $copyText } from '@/utils'
 
 const colSize = ref(8)
 const keyWords = ref('')
@@ -12,20 +11,8 @@ const filterIcons = computed(() => {
 })
 
 const copyIcon = (icon) => {
-  const { copy, isSupported } = useClipboard()
   const iconStr = `<common-icon icon="${icon}"/>`
-  if (isSupported) {
-    copy(iconStr)
-    ElMessage({
-      message: `Copied: ${iconStr}`,
-      type: 'success'
-    })
-  } else {
-    ElMessage({
-      message: `Copy Not supported: ${iconStr}`,
-      type: 'error'
-    })
-  }
+  $copyText({ text: iconStr, success: `Copied: ${iconStr}` })
 }
 
 </script>
@@ -75,14 +62,23 @@ const copyIcon = (icon) => {
           </el-col>
         </el-row>
       </recycle-scroller>
+      <el-backtop
+        v-common-tooltip="$t('common.label.backtop')"
+        target=".scroller"
+        :right="40"
+        :bottom="40"
+      />
     </el-main>
   </el-container>
 </template>
 
 <style scoped>
-.scroller, .icon-container  {
+.scroller {
   height: 100%;
 }
+.icon-container {
+  height: calc(100% - 70px);
+}
 .icon-container .el-input {
   width: 80%;
 }