opt: 优化编辑器、charts等页面主题样式

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,9 +161,11 @@ html, body, #app, .index-container {
 .text-center {
     text-align: center;
 }
+
 .text-left {
     text-align: left;
 }
+
 .text-right {
     text-align: right;
 }
@@ -173,17 +198,21 @@ html, body, #app, .index-container {
     border-radius: 0;
     padding-left: 20px;
 }
+
 .el-dialog.is-fullscreen .el-dialog__header {
     margin-top: -20px;
     padding-top: 20px;
     background: inherit;
 }
+
 .el-dialog.is-fullscreen .el-dialog__footer {
     bottom: var(--el-dialog-padding-primary);
 }
+
 .el-dialog.is-fullscreen .dialog-footer {
     border-radius: 0;
 }
+
 .el-dialog.is-fullscreen .el-dialog__body {
     padding: 48px 12px;
 }
@@ -192,6 +221,7 @@ html, body, #app, .index-container {
     z-index: 10;
     width: 6px;
 }
+
 .icon-list::-webkit-scrollbar-thumb {
     border-radius: 5px;
     width: 6px;
@@ -301,7 +331,8 @@ html, body, #app, .index-container {
     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;
 }
 
@@ -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,12 +485,15 @@ html, body, #app, .index-container {
 .request-table {
     overflow: auto;
 }
+
 .request-table .el-table__row {
     cursor: pointer;
 }
+
 .request-table .current-row td:first-child {
     border-left: 4px solid var(--el-color-primary);
 }
+
 .request-table td {
     border-left: 4px solid transparent;
 }
@@ -506,6 +541,62 @@ 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;
+}

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-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/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/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

@@ -96,5 +96,10 @@ useMenuConfigStore().loadBusinessMenus()
   </el-container>
 </template>
 <style scoped>
-
+.tabs-header {
+  padding-top: 6px !important;
+  height: auto !important;
+  border-bottom: none !important;
+  box-shadow: none !important;
+}
 </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%;
 }