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

.eslintrc.js

@@ -17,6 +17,7 @@ module.exports = {
   },
   rules: {
     'vue/multi-word-component-names': 'off',
+    '@typescript-eslint/no-unused-expressions': 'off',
     '@typescript-eslint/no-explicit-any': 'off'
   }
 }

package.json

@@ -14,44 +14,44 @@
     "url": "https://github.com/fugary/simple-element-plus-template"
   },
   "dependencies": {
-    "@element-plus/icons-vue": "^2.3.1",
+    "@element-plus/icons-vue": "^2.3.2",
-    "@guolao/vue-monaco-editor": "^1.5.5",
+    "@guolao/vue-monaco-editor": "^1.6.0",
     "@howiefh/ant-path-matcher": "^0.0.4",
-    "@vicons/material": "^0.12.0",
+    "@vicons/material": "^0.13.0",
-    "@vueuse/core": "^10.11.1",
+    "@vueuse/core": "^14.2.0",
     "async-validator": "^4.2.5",
-    "axios": "^1.7.9",
+    "axios": "^1.13.4",
-    "dayjs": "^1.11.13",
+    "dayjs": "^1.11.19",
-    "echarts": "^5.5.0",
+    "echarts": "^6.0.0",
-    "element-plus": "^2.9.11",
+    "element-plus": "^2.13.2",
-    "lodash-es": "^4.17.21",
+    "lodash-es": "^4.17.23",
-    "monaco-editor": "^0.52.2",
+    "monaco-editor": "^0.55.1",
     "nprogress": "^0.2.0",
     "numeral": "^2.0.6",
-    "pinia": "^2.3.1",
+    "pinia": "^3.0.4",
-    "pinia-plugin-persistedstate": "^3.2.3",
+    "pinia-plugin-persistedstate": "^4.7.1",
     "sortablejs": "^1.15.6",
     "split.js": "^1.6.5",
-    "ua-parser-js": "^1.0.38",
+    "ua-parser-js": "^2.0.8",
-    "vite-plugin-mock": "^3.0.1",
+    "vite-plugin-mock": "^3.0.2",
-    "vue": "^3.4.38",
+    "vue": "^3.5.27",
-    "vue-echarts": "^6.7.3",
+    "vue-echarts": "^8.0.1",
-    "vue-i18n": "^9.14.4",
+    "vue-i18n": "^11.2.8",
-    "vue-router": "^4.5.1",
+    "vue-router": "^5.0.1",
     "vue-virtual-scroller": "^2.0.0-beta.8"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.10.5",
+    "@rushstack/eslint-patch": "^1.15.0",
-    "@typescript-eslint/eslint-plugin": "^7.13.1",
+    "@typescript-eslint/eslint-plugin": "^8.54.0",
-    "@typescript-eslint/parser": "^7.18.0",
+    "@typescript-eslint/parser": "^8.54.0",
-    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitejs/plugin-vue": "^6.0.3",
-    "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "@vitejs/plugin-vue-jsx": "^5.1.3",
     "@vue/eslint-config-standard": "^8.0.1",
     "eslint": "^8.57.1",
-    "eslint-plugin-vue": "^9.32.0",
+    "eslint-plugin-vue": "^9.33.0",
-    "rollup-plugin-visualizer": "^5.14.0",
+    "rollup-plugin-visualizer": "^6.0.5",
-    "typescript": "^5.7.3",
+    "typescript": "^5.9.3",
-    "vite": "^5.4.19",
+    "vite": "^7.3.1",
     "vite-plugin-eslint": "^1.8.1"
   }
 }

src/assets/login.css

@@ -0,0 +1,263 @@
+/* Login Page Styles */
+.login-container {
+    height: 100vh;
+    width: 100%;
+    display: flex;
+    overflow: hidden;
+    background-color: #f0f2f5;
+}
+
+/* Left Branding Section */
+.login-branding {
+    width: 50%;
+    background: linear-gradient(135deg, #001529 0%, #003a73 100%);
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    overflow: hidden;
+    transition: all 0.3s ease;
+}
+
+/* Decorative Circle */
+.branding-decoration {
+    position: absolute;
+    top: -10%;
+    left: -10%;
+    width: 50vw;
+    height: 50vw;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
+    animation: float 20s infinite ease-in-out;
+    pointer-events: none;
+}
+
+.branding-content {
+    z-index: 2;
+    text-align: center;
+    padding: 0 40px;
+    animation: fadeIn 1.2s ease-out;
+}
+
+.branding-title {
+    font-size: 48px;
+    font-weight: 700;
+    margin-bottom: 20px;
+    letter-spacing: 2px;
+    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+}
+
+.branding-subtitle {
+    font-size: 20px;
+    font-weight: 300;
+    opacity: 0.9;
+    letter-spacing: 1px;
+    margin-top: 0;
+}
+
+.branding-footer {
+    position: absolute;
+    bottom: 40px;
+    font-size: 14px;
+    opacity: 0.6;
+}
+
+/* Right Form Section */
+.login-form-section {
+    width: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--el-bg-color);
+    position: relative;
+}
+
+.login-tools {
+    position: absolute;
+    top: 20px;
+    right: 30px;
+    z-index: 10;
+}
+
+.form-wrapper {
+    width: 100%;
+    max-width: 420px;
+    padding: 40px;
+    animation: slideUp 0.8s ease-out;
+}
+
+.form-header {
+    margin-bottom: 40px;
+    text-align: left;
+}
+
+.form-header h2 {
+    font-size: 32px;
+    font-weight: 700;
+    color: var(--el-text-color-primary);
+    margin: 0 0 10px;
+}
+
+.form-subtitle {
+    font-size: 16px;
+    color: var(--el-text-color-secondary);
+    margin: 0;
+}
+
+/* Form Styles */
+.modern-form .el-form-item {
+    margin-bottom: 24px;
+}
+
+.modern-form .el-input__wrapper {
+    box-shadow: none;
+    background-color: var(--el-fill-color-light);
+    border: 1px solid transparent;
+    border-radius: 8px;
+    padding: 1px 11px;
+    transition: all 0.3s;
+}
+
+.modern-form .el-input__wrapper:hover {
+    background-color: var(--el-fill-color);
+}
+
+.modern-form .el-input__wrapper.is-focus {
+    background-color: var(--el-bg-color);
+    border-color: var(--el-color-primary);
+    box-shadow: 0 0 0 1px var(--el-color-primary) inset;
+}
+
+.modern-form .el-input__inner {
+    height: 48px;
+    font-size: 16px;
+    color: var(--el-text-color-primary);
+}
+
+/* Button Styles */
+.form-actions {
+    margin-top: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.login-btn {
+    width: 100%;
+    height: 50px;
+    font-size: 18px;
+    font-weight: 600;
+    border-radius: 8px;
+    transition: all 0.3s;
+    letter-spacing: 1px;
+}
+
+.login-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 16px rgba(64, 158, 255, 0.3);
+}
+
+.reset-btn {
+    margin-left: 10px;
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes float {
+    0% {
+        transform: translateY(0px) rotate(0deg);
+    }
+
+    50% {
+        transform: translateY(-20px) rotate(5deg);
+    }
+
+    100% {
+        transform: translateY(0px) rotate(0deg);
+    }
+}
+
+.fade-slide-enter-active,
+.fade-slide-leave-active {
+    transition: all 0.3s ease;
+}
+
+.fade-slide-enter-from {
+    opacity: 0;
+    transform: translateY(10px);
+}
+
+.fade-slide-leave-to {
+    opacity: 0;
+    transform: translateY(-10px);
+}
+
+/* Responsive */
+@media (max-width: 900px) {
+    .login-container {
+        flex-direction: column;
+    }
+
+    .login-branding {
+        width: 100%;
+        height: 200px;
+        flex: none;
+    }
+
+    .branding-title {
+        font-size: 32px;
+        margin-bottom: 5px;
+    }
+
+    .branding-subtitle {
+        font-size: 16px;
+    }
+
+    .branding-decoration {
+        width: 100vw;
+        height: 100vw;
+        top: -50vw;
+        left: 0;
+    }
+
+    .login-form-section {
+        width: 100%;
+        flex: 1;
+        align-items: flex-start;
+        padding-top: 40px;
+    }
+
+    .form-wrapper {
+        padding: 20px;
+    }
+
+    .login-tools {
+        top: 10px;
+        right: 10px;
+    }
+}

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;
+    border-radius: 5px;
-    width:6px;
+    width: 6px;
-    background:var(--el-text-color-disabled)
+    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-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-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-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(() => {
+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/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/messages/common_cn.js

@@ -3,6 +3,7 @@ export const common = baseMessages()
 
 common.label.title = '简单Element+模板'
 common.label.login = '登录'
+common.label.logining = '登录中...'
 common.label.index = '首页'
 common.label.settings = '设置'
 common.label.confirm = '确认'
@@ -88,6 +89,8 @@ common.msg.commonInput = '请输入{0}'
 common.msg.networkError = '网络异常，请稍后再试.'
 common.msg.networkTimeout = '系统处理超时，请稍后再试.'
 common.msg.loginTitle = '用户登录'
+common.msg.loginSubtitle = '企业级快速开发平台'
+common.msg.loginWelcome = '欢迎回来，请输入您的账号密码'
 common.msg.loading = '系统正在处理中，请稍候...'
 common.msg.saveSuccess = '保存成功。'
 common.msg.operationSuccess = '操作成功。'

src/messages/common_en.js

@@ -3,6 +3,7 @@ export const common = baseMessages()
 
 common.label.title = 'Simple Element+'
 common.label.login = 'Login'
+common.label.logining = 'Logging in...'
 common.label.index = 'Home'
 common.label.settings = 'Settings'
 common.label.confirm = 'Confirm'
@@ -88,6 +89,8 @@ common.msg.commonInput = 'Please input {0}'
 common.msg.networkError = 'Network error, please try later.'
 common.msg.networkTimeout = 'System process timeout, please try later.'
 common.msg.loginTitle = 'User Login'
+common.msg.loginSubtitle = 'Enterprise Rapid Development Platform'
+common.msg.loginWelcome = 'Welcome back, please enter your credentials'
 common.msg.loading = 'Loading, please wait...'
 common.msg.saveSuccess = 'Save Success.'
 common.msg.operationSuccess = 'Operation Success.'

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 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"
-      class="index-aside menu"
+      :disabled="globalConfigStore.isCollapseLeft"
-      width="auto"
+      :class="{ 'collapsed-split': globalConfigStore.isCollapseLeft }"
+      :sizes="[20, 80]"
+      :min-size="[60, 500]"
+      :max-size="[500, Infinity]"
+      class="flex-grow"
+      @drag-end="handleDragEnd"
     >
-      <left-menu />
+      <template #split-0>
-    </el-aside>
+        <el-aside
-    <el-container>
+          ref="leftMenuAsideRef"
-      <el-header>
+          class="index-aside menu"
-        <top-nav />
+          width="auto"
-      </el-header>
+          style="height: 100%; width: 100% !important;"
-      <el-header
+        >
-        v-if="globalConfigStore.layoutMode === GlobalLayoutMode.TOP && globalConfigStore.isShowBreadcrumb"
+          <left-menu class="height100" />
-        class="tabs-header"
+        </el-aside>
-      >
+      </template>
-        <common-breadcrumb
+      <template #split-1>
-          :show-icon="tabsViewStore.isShowTabIcon"
+        <main-content class="height100" />
-          :label-config="breadcrumbConfigStore.breadcrumbConfig"
+      </template>
-        />
+    </common-split>
-      </el-header>
+
-      <el-header
+    <main-content v-else />
-        v-if="tabsViewStore.isTabMode"
+    <global-settings />
-        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>
 
+<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/Login.vue

@@ -4,40 +4,51 @@ import { useRouter } from 'vue-router'
 import { useThemeAndLocaleMenus } from '@/services/menu/MenuService'
 import { useLoginConfigStore } from '@/stores/LoginConfigStore'
 import { ElMessage } from 'element-plus'
+import { Lock, User } from '@element-plus/icons-vue'
 
 const router = useRouter()
 const loginConfigStore = useLoginConfigStore()
 
 const themeAndLocaleMenus = ref(useThemeAndLocaleMenus())
 
-/**
- * @type {[CommonFormOption]}
- */
 const loginFormOptions = [{
   labelKey: 'common.label.username',
   required: true,
-  prop: 'userName'
+  prop: 'userName',
+  attrs: {
+    size: 'large',
+    'prefix-icon': User
+  }
 }, {
   labelKey: 'common.label.password',
   required: true,
   prop: 'userPassword',
   attrs: {
-    showPassword: true
+    size: 'large',
+    showPassword: true,
+    'prefix-icon': Lock
   }
 }]
 
-/**
- * @type {LoginVo}
- */
 const loginVo = ref({
   userName: 'admin',
   userPassword: '123456'
 })
 
-const submitForm = form => {
+const loading = ref(false)
-  form.validate(async (valid) => {
+const formRef = ref()
+
+const submitForm = async () => {
+  const form = formRef.value?.form
+  if (!form) return
+
+  await form.validate(async (valid) => {
     if (valid) {
+      loading.value = true
       const loginResult = await loginConfigStore.login(loginVo.value)
+        .finally(() => {
+          loading.value = false
+        })
       if (loginResult.success) {
         router.push('/')
       } else {
@@ -46,60 +57,92 @@ const submitForm = form => {
     }
   })
 }
-const formRef = ref()
 </script>
 
 <template>
-  <el-container>
+  <div class="login-container">
-    <el-card class="login-form">
+    <!-- Tools -->
-      <template #header>
+    <div class="login-tools">
-        <div class="card-header">
+      <common-menu
-          <span>{{ $t('common.msg.loginTitle') }}</span>
+        :menus="themeAndLocaleMenus"
-          <common-menu
+        mode="horizontal"
-            :menus="themeAndLocaleMenus"
+        :ellipsis="false"
-            mode="horizontal"
-            :ellipsis="false"
-          />
-        </div>
-      </template>
-      <common-form
-        ref="formRef"
-        :model="loginVo"
-        :options="loginFormOptions"
-        label-width="100px"
-        :show-buttons="false"
       />
-      <template #footer>
+    </div>
-        <el-button
+
-          type="primary"
+    <!-- Left Branding -->
-          @click="submitForm(formRef.form)"
+    <div class="login-branding">
+      <div class="branding-decoration" />
+      <div class="branding-content">
+        <transition
+          name="fade-slide"
+          mode="out-in"
         >
-          {{ $t('common.label.submit') }}
+          <div :key="$i18n.locale">
-        </el-button>
+            <h1 class="branding-title">
-        <el-button
+              {{ $t('common.label.title') }}
-          @click="formRef.form.resetFields()"
+            </h1>
-        >
+            <p class="branding-subtitle">
-          {{ $t('common.label.reset') }}
+              {{ $t('common.msg.loginSubtitle') }}
-        </el-button>
+            </p>
-      </template>
+          </div>
-    </el-card>
+        </transition>
-  </el-container>
+      </div>
+    </div>
+
+    <!-- Right Form Section -->
+    <div class="login-form-section">
+      <div class="form-wrapper">
+        <div class="form-header">
+          <h2>{{ $t('common.msg.loginTitle') }}</h2>
+          <p class="form-subtitle">
+            {{ $t('common.msg.loginWelcome') }}
+          </p>
+        </div>
+
+        <common-form
+          ref="formRef"
+          :model="loginVo"
+          :options="loginFormOptions"
+          class="modern-form"
+          label-position="top"
+          :show-buttons="false"
+          @submit-form="submitForm"
+        />
+
+        <div class="form-actions">
+          <el-button
+            type="primary"
+            class="login-btn"
+            :loading="loading"
+            @click="submitForm"
+          >
+            {{ loading ? $t('common.label.logining') : $t('common.label.login') }}
+          </el-button>
+
+          <el-button
+            class="reset-btn"
+            text
+            @click="formRef.form.resetFields()"
+          >
+            {{ $t('common.label.reset') }}
+          </el-button>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
+<style scoped src="@/assets/login.css"></style>
+
 <style scoped>
-.login-form {
+:deep(.el-menu--horizontal) {
-  width: 500px;
+  border-bottom: none !important;
-  margin: 5% auto;
 }
-
+:deep(.el-menu--horizontal > .el-menu-item) {
-.card-header {
+  border-bottom: none !important;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
 }
-
+:deep(.el-menu--horizontal > .el-menu-item.is-active) {
-.el-menu--horizontal.el-menu {
+  border-bottom: none !important;
-  border-bottom: none;
 }
-
 </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) {
+  $copyText({ text: iconStr, success: `Copied: ${iconStr}` })
-    copy(iconStr)
-    ElMessage({
-      message: `Copied: ${iconStr}`,
-      type: 'success'
-    })
-  } else {
-    ElMessage({
-      message: `Copy Not supported: ${iconStr}`,
-      type: 'error'
-    })
-  }
 }
 
 </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%;
 }

vite.config.js

@@ -1,6 +1,6 @@
 import { fileURLToPath, URL } from 'node:url'
 
-import { defineConfig, loadEnv, splitVendorChunkPlugin } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import { viteMockServe } from 'vite-plugin-mock'
 import vueJsx from '@vitejs/plugin-vue-jsx'
@@ -16,9 +16,6 @@ const optionalPlugins = [{
     mockPath: './mock'
   }),
   enabled: true
-}, {
-  plugin: splitVendorChunkPlugin(),
-  enabled: true
 }].filter(p => p.enabled).map(p => p.plugin)
 
 const JS_FILE_NAMES = 'js/[name]-[hash].js'
@@ -49,7 +46,7 @@ export default ({ mode }) => {
         output: {
           chunkFileNames: JS_FILE_NAMES, // 引入文件名的名称
           entryFileNames: JS_FILE_NAMES, // 包的入口文件名称
-          assetFileNames (assetInfo) {
+          assetFileNames(assetInfo) {
             if (assetInfo.name?.endsWith('.css')) { // CSS文件
               return CSS_FILE_NAMES
             } else if (IMG_EXT_LIST.some((ext) => assetInfo.name?.endsWith(ext))) { // 图片
@@ -57,7 +54,7 @@ export default ({ mode }) => {
             }
             return 'assets/[name]-[hash].[ext]' // 其他资源
           },
-          manualChunks (id) {
+          manualChunks(id) {
             if (id.includes('element-plus')) {
               return 'elp'
             }