fix: 🐛 修复一些样式问题

2025-11-01 03:35:28 +08:00 · 2024-12-12 23:22:58 +08:00
parent f1fd53f72b
commit 442a69f90d
8 changed files with 103 additions and 109 deletions
--- 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,
-            },
-        },
-        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)'],
-            },
-        },
-    },
-    valueAxis: {
-        axisLine: {
-            show: false,
-            lineStyle: {
-                color: el_color_info,
-            },
-        },
-        splitLine: {
-            show: true,
-            lineStyle: {
-                color: 'rgba(128,128,128,0.2)',
-            },
-        },
-    },
-}
+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')

-export default T
+        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,
+            },
+            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,
+                    },
+                },
+                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)'],
+                    },
+                },
+            },
+            valueAxis: {
+                axisLine: {
+                    show: false,
+                    lineStyle: {
+                        color: el_color_info,
+                    },
+                },
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        color: 'rgba(128,128,128,0.2)',
+                    },
+                },
+            },
+        }
+    },
+}
--- 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()
        })
    },
--- 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>
--- 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;
 }
--- 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(() => {
--- 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() {
--- 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: {},
 }
--- 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' }