fix: 🐛 修复一些样式问题

nsnail · Dec 12, 2024 · 442a69f · 442a69f
1 parent f1fd53f
commit 442a69f
Show file tree

Hide file tree

Showing 8 changed files with 97 additions and 103 deletions.
diff --git a/src/frontend/admin/src/components/scEcharts/echarts-theme-T.js b/src/frontend/admin/src/components/scEcharts/echarts-theme-T.js
@@ -1,92 +1,95 @@
 import colorTool from '@/utils/color'
-const style = getComputedStyle(document.documentElement)
-const el_color_primary = style.getPropertyValue('--el-color-primary')
-const el_color_info = style.getPropertyValue('--el-color-info')
-const el_text_color_primary = style.getPropertyValue('--el-text-color-primary')
-const el_border_color_lighter = style.getPropertyValue('--el-border-color-lighter')
 
-const T = {
-    color: [el_color_primary, colorTool.lighten(el_color_primary, 0.5), ...colorTool.colorSets],
-    grid: {
-        left: '3%',
-        right: '3%',
-        bottom: '10',
-        top: '40',
-        containLabel: true,
-    },
-    pie: {
-        label: {
-            color: el_color_info,
-        },
-    },
-    gauge: {
-        axisTick: {
-            lineStyle: {
-                color: el_color_info,
-            },
-        },
-        splitLine: {
-            lineStyle: {
-                color: el_color_info,
-            },
-        },
-        axisLabel: {
-            color: el_color_info,
-        },
-        title: {
-            color: el_color_info,
-        },
-    },
-    legend: {
-        textStyle: {
-            color: el_color_info,
-        },
-        inactiveColor: 'rgba(128,128,128,0.4)',
-    },
-    categoryAxis: {
-        axisLine: {
-            show: true,
-            lineStyle: {
-                color: 'rgba(128,128,128,0.2)',
-                width: 1,
+export default {
+    build() {
+        const style = getComputedStyle(document.documentElement)
+        const el_color_primary = style.getPropertyValue('--el-color-primary')
+        const el_color_info = style.getPropertyValue('--el-color-info')
+        const el_text_color_primary = style.getPropertyValue('--el-text-color-primary')
+        const el_border_color_lighter = style.getPropertyValue('--el-border-color-lighter')
+
+        return {
+            color: [el_color_primary, colorTool.lighten(el_color_primary, 0.5), ...colorTool.colorSets],
+            grid: {
+                left: '3%',
+                right: '3%',
+                bottom: '10',
+                top: '40',
+                containLabel: true,
             },
-        },
-        axisTick: {
-            show: false,
-            lineStyle: {
-                color: el_text_color_primary,
+            pie: {
+                label: {
+                    color: el_color_info,
+                },
             },
-        },
-        axisLabel: {
-            color: el_color_info,
-        },
-        splitLine: {
-            show: false,
-            lineStyle: {
-                color: [el_border_color_lighter],
+            gauge: {
+                axisTick: {
+                    lineStyle: {
+                        color: el_color_info,
+                    },
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: el_color_info,
+                    },
+                },
+                axisLabel: {
+                    color: el_color_info,
+                },
+                title: {
+                    color: el_color_info,
+                },
             },
-        },
-        splitArea: {
-            show: false,
-            areaStyle: {
-                color: ['rgba(255,255,255,0.01)', 'rgba(0,0,0,0.01)'],
+            legend: {
+                textStyle: {
+                    color: el_color_info,
+                },
+                inactiveColor: 'rgba(128,128,128,0.4)',
             },
-        },
-    },
-    valueAxis: {
-        axisLine: {
-            show: false,
-            lineStyle: {
-                color: el_color_info,
+            categoryAxis: {
+                axisLine: {
+                    show: true,
+                    lineStyle: {
+                        color: 'rgba(128,128,128,0.2)',
+                        width: 1,
+                    },
+                },
+                axisTick: {
+                    show: false,
+                    lineStyle: {
+                        color: el_text_color_primary,
+                    },
+                },
+                axisLabel: {
+                    color: el_color_info,
+                },
+                splitLine: {
+                    show: false,
+                    lineStyle: {
+                        color: [el_border_color_lighter],
+                    },
+                },
+                splitArea: {
+                    show: false,
+                    areaStyle: {
+                        color: ['rgba(255,255,255,0.01)', 'rgba(0,0,0,0.01)'],
+                    },
+                },
             },
-        },
-        splitLine: {
-            show: true,
-            lineStyle: {
-                color: 'rgba(128,128,128,0.2)',
+            valueAxis: {
+                axisLine: {
+                    show: false,
+                    lineStyle: {
+                        color: el_color_info,
+                    },
+                },
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        color: 'rgba(128,128,128,0.2)',
+                    },
+                },
             },
-        },
+        }
     },
-}
-
-export default T
+}
diff --git a/src/frontend/admin/src/components/scEcharts/index.vue b/src/frontend/admin/src/components/scEcharts/index.vue
@@ -5,8 +5,6 @@
 <script>
 import * as echarts from 'echarts'
 import T from './echarts-theme-T.js'
-
-echarts.registerTheme('T', T)
 const unwarp = (obj) => obj && (obj.__v_raw || obj.valueOf() || obj)
 
 export default {
@@ -53,6 +51,7 @@ export default {
     mounted() {
         this.isActivat = true
         this.$nextTick(() => {
+            echarts.registerTheme('T', T.build())
             this.draw()
         })
     },

diff --git a/src/frontend/admin/src/layout/components/sideM.vue b/src/frontend/admin/src/layout/components/sideM.vue
@@ -14,11 +14,7 @@
             </el-header>
             <el-main>
                 <el-scrollbar>
-                    <el-menu
-                        :active-text-color="DEFAULT_CONFIG.APP_SET_COLOR"
-                        :default-active="$route.meta.active || $route.fullPath"
-                        @select="select"
-                        router>
+                    <el-menu :default-active="$route.meta.active || $route.fullPath" @select="select" router>
                         <NavMenu :navMenus="menu"></NavMenu>
                     </el-menu>
                 </el-scrollbar>

diff --git a/src/frontend/admin/src/style/fix.scss b/src/frontend/admin/src/style/fix.scss
@@ -7,10 +7,6 @@
     --el-menu-horizontal-height: 4rem;
 }
 
-.el-menu--inline {
-    --el-menu-active-color: var(--el-color-primary) !important;
-}
-
 .el-form-item--default {
     --font-size: 1rem;
 }

diff --git a/src/frontend/admin/src/views/home/index.vue b/src/frontend/admin/src/views/home/index.vue
@@ -1,8 +1,7 @@
 <template>
-    <div v-if="loading" v-loading="true" style="height: 100%"></div>
-    <el-main v-else :style="{ height: mainHeight }">
-        <widgets v-if="dashboard" @on-customizing="onCustomizing"></widgets>
-        <work v-else></work>
+    <el-main v-loading="loading" :style="{ height: mainHeight, minHeight: '100%' }">
+        <widgets v-if="dashboard" @on-customizing="onCustomizing" @on-mounted="this.loading = false"></widgets>
+        <work v-if="myapp" @on-mounted="this.loading = false"></work>
     </el-main>
 
     <el-tour v-model="tour.open" @close="$TOOL.data.set('TOUR_TIP_READ_INDEX', true)">
@@ -34,13 +33,14 @@ export default {
             loading: true,
             mainHeight: 'auto',
             dashboard: false,
+            myapp: false,
         }
     },
     async created() {
         //下载配置
         await this.$TOOL.data.downloadConfig()
         this.dashboard = this.$GLOBAL.user.roles.findIndex((x) => x.displayDashboard) >= 0
-        this.loading = false
+        this.myapp = !this.dashboard
     },
     mounted() {
         this.$nextTick(() => {

diff --git a/src/frontend/admin/src/views/home/widgets/index.vue b/src/frontend/admin/src/views/home/widgets/index.vue
@@ -153,7 +153,7 @@ export default {
         this.loadGrid()
     },
     mounted() {
-        this.$emit('on-mounted')
+        this.$nextTick(() => this.$emit('on-mounted'))
     },
     computed: {
         allCompsList() {

diff --git a/src/frontend/admin/src/views/home/work/index.vue b/src/frontend/admin/src/views/home/work/index.vue
@@ -15,7 +15,7 @@ export default {
         return {}
     },
     mounted() {
-        this.$emit('on-mounted')
+        this.$nextTick(() => this.$emit('on-mounted'))
     },
     methods: {},
 }

diff --git a/src/frontend/admin/src/views/sys/job/all/index.vue b/src/frontend/admin/src/views/sys/job/all/index.vue
@@ -245,7 +245,7 @@
 </template>
 
 <script>
-import { defineAsyncComponent } from 'vue'
+import { defineAsyncComponent, h } from 'vue'
 import table from '@/config/table'
 import naColOperation from '@/config/naColOperation'
 import naIndicator from '@/components/naIndicator/index.vue'
@@ -380,7 +380,7 @@ export default {
                 await this.$API.sys_job.execute.post({ id: row.id })
                 this.$notify.success({
                     dangerouslyUseHTMLString: true,
-                    message: `<div id="countdown">${this.$t('已发起执行请求，5 秒后弹出执行结果')}</div>`,
+                    message: h('div', { id: 'countdown' }, this.$t('已发起执行请求，5 秒后弹出执行结果')),
                     onClose: async () => {
                         clearInterval(this.timer)
                         this.dialog.save = { row, mode: 'view', tabId: 'record' }