fix: 🐛 样式问题

src/frontend/admin/package.json

@@ -36,7 +36,7 @@
         "prettier-plugin-organize-attributes": "1.0.0",
         "sass": "1.82.0",
         "terser": "5.37.0",
-        "vite": "6.0.3"
+        "vite": "5.1.8"
     },
     "browserslist": [
         "> 1%",

src/frontend/admin/src/components/scIconSelect/index.vue

@@ -39,7 +39,7 @@
                 </el-tabs>
             </div>
             <template #footer>
-                <el-button @click="clear" text>{{ $t('清除') }}</el-button>
+                <el-button @click="clear">{{ $t('清除') }}</el-button>
                 <el-button @click="dialogVisible = false">{{ $t('取消') }}</el-button>
             </template>
         </el-dialog>

src/frontend/admin/src/components/scTable/index.vue

@@ -55,11 +55,11 @@
                     :page-size="scPageSize"
                     :page-sizes="pageSizes"
                     :pager-count="pagerCount"
-                    :small="true"
                     :total="total"
                     @current-change="paginationChange"
                     @update:page-size="pageSizeChange"
-                    background></el-pagination>
+                    background
+                    size="small"></el-pagination>
             </div>
             <div v-if="!hideDo" class="scTable-do">
                 <el-button
@@ -105,9 +105,9 @@
                     <el-form label-position="left" label-width="10rem">
                         <el-form-item :label="$t('表格尺寸')">
                             <el-radio-group v-model="config.size" @change="configSizeChange" size="small">
-                                <el-radio-button label="large">{{ $t('大') }}</el-radio-button>
+                                <el-radio-button value="large">{{ $t('大') }}</el-radio-button>
-                                <el-radio-button label="default">{{ $t('正常') }}</el-radio-button>
+                                <el-radio-button value="default">{{ $t('正常') }}</el-radio-button>
-                                <el-radio-button label="small">{{ $t('小') }}</el-radio-button>
+                                <el-radio-button value="small">{{ $t('小') }}</el-radio-button>
                             </el-radio-group>
                         </el-form-item>
                         <el-form-item :label="$t('样式')">
@@ -232,6 +232,7 @@ export default {
         fieldFilter,
     },
     props: {
+        dblClickDisable: { type: Boolean, default: false },
         vue: { type: Object },
         contextMenus: { type: Array },
         contextOpers: { type: Array, default: ['copy', 'add', 'view', 'edit', 'del'] },
@@ -309,7 +310,7 @@ export default {
     },
     data() {
         return {
-            pagerCount: 10,
+            pagerCount: 11,
             current: {
                 row: null,
                 column: null,
@@ -338,7 +339,7 @@ export default {
         }
     },
     mounted() {
-        this.pagerCount = document.body.clientWidth < 1000 ? 3 : 10
+        this.pagerCount = document.body.clientWidth < 1000 ? 3 : 11
         //判断是否开启自定义列
         if (this.column) {
             this.getCustomColumn()
@@ -363,6 +364,9 @@ export default {
     },
     methods: {
         dbClick(row) {
+            if (this.dblClickDisable) {
+                return
+            }
             if (this.vue.dialog) {
                 this.vue.dialog.save = { mode: 'view', row: { id: row.id } }
             }

src/frontend/admin/src/layout/components/search.vue

@@ -48,7 +48,6 @@ export default {
     data() {
         return {
             cursor: {
-                position: 0,
                 index: 0,
             },
             input: '',
@@ -59,7 +58,6 @@ export default {
     },
     watch: {
         result() {
-            this.cursor.position = 0
             this.cursor.index = 0
         },
     },
@@ -86,12 +84,15 @@ export default {
                 return
             }
             if (e.keyCode === 40) {
-                this.cursor.index = Math.abs(++this.cursor.position % this.result.length)
+                this.cursor.index = ++this.cursor.index % this.result.length
                 e.preventDefault()
                 return
             }
             if (e.keyCode === 38) {
-                this.cursor.index = Math.abs(--this.cursor.position % this.result.length)
+                this.cursor.index = --this.cursor.index % this.result.length
+                if (this.cursor.index < 0) {
+                    this.cursor.index += this.result.length
+                }
                 e.preventDefault()
                 return
             }

src/frontend/admin/src/layout/components/tasks.vue

@@ -1,13 +1,41 @@
 <template>
     <el-container v-loading="loading">
+        <el-header class="flex" style="justify-content: space-evenly; height: unset">
+            <div v-if="failJobs">
+                <el-badge :hidden="fail === 0" :value="`${$TOOL.time.getFormatTime(new Date(failJobViewTime).getTime())} 至今 ${fail}个`">
+                    <el-button
+                        @click="
+                            () => {
+                                this.$router.push({ path: '/sys/job', query: { view: 'fail' } })
+                                this.$emit('closed')
+                            }
+                        "
+                        plain
+                        type="danger"
+                        >{{ $t('异常日志') }}
+                    </el-button>
+                </el-badge>
+            </div>
+            <el-button @click="refresh" circle icon="el-icon-refresh"></el-button>
+            <div>
+                <el-badge :hidden="jobsCnt === 0" :value="jobsCnt" type="primary">
+                    <el-button
+                        @click="
+                            () => {
+                                this.$router.push({ path: '/sys/job' })
+                                this.$emit('closed')
+                            }
+                        "
+                        >{{ $t('作业管理') }}
+                    </el-button>
+                </el-badge>
+            </div>
+        </el-header>
         <el-main>
             <el-empty v-if="jobs.length === 0" :image-size="120">
                 <template #description>
                     <h2>{{ $t('没有正在执行的作业') }}</h2>
                 </template>
-                <p style="color: var(--el-color-info); line-height: 1.5; margin: 0 3rem">
-                    在处理耗时过久的作业时为了不阻碍正在处理的工作，可在作业中心进行异步执行。
-                </p>
             </el-empty>
             <el-row :gutter="10">
                 <el-col :lg="12">
@@ -18,7 +46,13 @@
                             <p>未发现新的异常作业</p>
                         </template>
                     </el-empty>
-                    <el-card v-else v-for="job in failJobs" :class="`user-bar-jobs-item alert`" :key="job.job.id" shadow="hover">
+                    <el-card
+                        v-else
+                        v-for="job in failJobs"
+                        :class="`user-bar-jobs-item alert`"
+                        :key="job.job.id"
+                        @click="dialog.jobRecordSave = { mode: 'view', row: { id: job.id } }"
+                        shadow="hover">
                         <div class="user-bar-jobs-item-body">
                             <div class="jobIcon">
                                 {{ job.httpStatusCode.toUpperCase().slice(0, 2) }}
@@ -32,15 +66,8 @@
                                     </p>
                                 </div>
                                 <div class="bottom">
-                                    <div class="status failJobs">
+                                    <div class="status">
-                                        {{ job.responseBody }}
+                                        <el-tag type="danger">{{ job.responseBody }}</el-tag>
-                                    </div>
-                                    <div class="handler">
-                                        <el-button
-                                            @click="dialog.jobRecordSave = { mode: 'view', row: { id: job.id } }"
-                                            circle
-                                            icon="el-icon-view"
-                                            type="danger"></el-button>
                                     </div>
                                 </div>
                             </div>
@@ -52,6 +79,7 @@
                         v-for="job in jobs"
                         :class="`user-bar-jobs-item ${job.lastStatusCode === 'oK' ? '' : 'alert'}`"
                         :key="job.id"
+                        @click="dialog.jobSave = { mode: 'view', row: { id: job.id }, tabId: 'record' }"
                         shadow="hover">
                         <div class="user-bar-jobs-item-body">
                             <div class="jobIcon">
@@ -72,13 +100,6 @@
                                             >{{ $t('空闲') }}
                                         </el-tag>
                                     </div>
-                                    <div class="handler">
-                                        <el-button
-                                            :type="job.lastStatusCode === 'oK' ? 'primary' : 'danger'"
-                                            @click="dialog.jobSave = { mode: 'view', row: { id: job.id }, tabId: 'record' }"
-                                            circle
-                                            icon="el-icon-view"></el-button>
-                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -86,37 +107,6 @@
                 </el-col>
             </el-row>
         </el-main>
-        <el-footer class="flex" style="justify-content: space-evenly; height: unset">
-            <div v-if="failJobs">
-                <el-badge :hidden="fail === 0" :value="`${$TOOL.time.getFormatTime(new Date(failJobViewTime).getTime())} 至今 ${fail}个`">
-                    <el-button
-                        @click="
-                            () => {
-                                this.$router.push({ path: '/sys/job', query: { view: 'fail' } })
-                                this.$emit('closed')
-                            }
-                        "
-                        plain
-                        type="danger"
-                        >{{ $t('异常日志') }}</el-button
-                    >
-                </el-badge>
-            </div>
-            <el-button @click="refresh" circle icon="el-icon-refresh"></el-button>
-            <div>
-                <el-badge :hidden="jobsCnt === 0" :value="jobsCnt">
-                    <el-button
-                        @click="
-                            () => {
-                                this.$router.push({ path: '/sys/job' })
-                                this.$emit('closed')
-                            }
-                        "
-                        >{{ $t('作业管理') }}</el-button
-                    >
-                </el-badge>
-            </div>
-        </el-footer>
     </el-container>
 
     <jobSaveDialog
@@ -133,6 +123,7 @@
 
 <script>
 import { defineAsyncComponent } from 'vue'
+import scPageHeader from '@/components/scPageHeader'
 
 const jobSaveDialog = defineAsyncComponent(() => import('@/views/sys/job/all/save.vue'))
 const jobRecordSaveDialog = defineAsyncComponent(() => import('@/views/sys/job/record/save.vue'))
@@ -144,6 +135,7 @@ export default {
         },
     },
     components: {
+        scPageHeader,
         jobSaveDialog,
         jobRecordSaveDialog,
     },
@@ -170,6 +162,7 @@ export default {
                         value: true,
                         operator: 'eq',
                     },
+                    pageSize: 10,
                 }),
                 this.$API.sys_job.pagedQueryRecord.post({
                     dynamicFilter: {
@@ -204,6 +197,7 @@ export default {
                         operator: 'greaterThan',
                         value: this.failJobViewTime,
                     },
+                    pageSize: 10,
                 }),
             ])
 
@@ -229,6 +223,7 @@ export default {
 <style scoped>
 .user-bar-jobs-item {
     margin-bottom: 0.5rem;
+    cursor: pointer;
 }
 
 .user-bar-jobs-item:hover {
@@ -241,48 +236,44 @@ export default {
 
 .user-bar-jobs-item-body {
     display: flex;
+    gap: 1rem;
 }
 
 .user-bar-jobs-item-body .jobIcon {
     width: 3rem;
     height: 3rem;
     background: var(--el-color-primary-light-9);
-    margin-right: 2rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: var(--el-color-primary);
     border-radius: 1.5rem;
+    text-align: center;
+    color: var(--el-color-primary);
+    line-height: 3rem;
 }
 
 .user-bar-jobs-item-body .jobMain {
     flex: 1;
+    overflow: hidden;
 }
 
 .user-bar-jobs-item-body .title h2 {
     font-size: 1rem;
+    margin-bottom: 0.5rem;
 }
 
 .user-bar-jobs-item-body .title p {
     font-size: 1rem;
     color: var(--el-color-info);
-    margin-top: 0.5rem;
+    line-height: 1.5rem;
 }
 
 .user-bar-jobs-item-body .bottom {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    margin-top: 0.5rem;
 }
 
 .user-bar-jobs-item.alert .jobIcon {
     background: var(--el-color-danger-light-9);
     color: var(--el-color-danger);
 }
-
-.status.failJobs {
-    color: var(--el-color-danger);
-    width: 18rem;
-    overflow: hidden;
-}
 </style>

src/frontend/admin/src/layout/components/userbar.vue

@@ -74,7 +74,7 @@
         <search @success="searchVisible = false"></search>
     </el-dialog>
 
-    <el-drawer v-model="tasksVisible" :size="800" :title="$t('作业中心')" destroy-on-close>
+    <el-drawer v-model="tasksVisible" :size="800" :title="$t('作业中心')" @close="taskClose" destroy-on-close>
         <tasks :fail="failJobCnt" @closed="tasksVisible = false"></tasks>
     </el-drawer>
 </template>
@@ -100,49 +100,7 @@ export default {
         this.user = this.$GLOBAL.user
         let res = await this.$API.sys_sitemsg.unreadCount.post()
         this.unreadCnt = res.data
-
+        await this.getFailJobsCnt()
-        if (this.$GLOBAL.permissions.some((x) => x === '*/*/*' || x === 'sys/job/userbar')) {
-            res = await this.$API.sys_job.countRecord.post({
-                dynamicFilter: {
-                    filters: [
-                        {
-                            field: 'createdTime',
-                            operator: 'dateRange',
-                            value: [
-                                this.$TOOL.data.get('APP_SET_FAIL_JOB_VIEW_TIME') ?? this.$TOOL.dateFormat(new Date(), 'yyyy-MM-dd'),
-                                this.$TOOL.dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
-                            ],
-                        },
-                        {
-                            logic: 'or',
-                            filters: [
-                                {
-                                    field: 'httpStatusCode',
-                                    operator: 'range',
-                                    value: '300,399',
-                                },
-                                {
-                                    field: 'httpStatusCode',
-                                    operator: 'range',
-                                    value: '400,499',
-                                },
-                                {
-                                    field: 'httpStatusCode',
-                                    operator: 'range',
-                                    value: '500,599',
-                                },
-                                {
-                                    field: 'httpStatusCode',
-                                    operator: 'range',
-                                    value: '900,999',
-                                },
-                            ],
-                        },
-                    ],
-                },
-            })
-            this.failJobCnt = res.data
-        }
     },
     data() {
         return {
@@ -160,6 +118,55 @@ export default {
         }
     },
     methods: {
+        async getFailJobsCnt() {
+            if (this.$GLOBAL.permissions.some((x) => x === '*/*/*' || x === 'sys/job/userbar')) {
+                const res = await this.$API.sys_job.countRecord.post({
+                    dynamicFilter: {
+                        filters: [
+                            {
+                                field: 'createdTime',
+                                operator: 'dateRange',
+                                value: [
+                                    this.$TOOL.data.get('APP_SET_FAIL_JOB_VIEW_TIME') ?? this.$TOOL.dateFormat(new Date(), 'yyyy-MM-dd'),
+                                    this.$TOOL.dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
+                                ],
+                            },
+                            {
+                                logic: 'or',
+                                filters: [
+                                    {
+                                        field: 'httpStatusCode',
+                                        operator: 'range',
+                                        value: '300,399',
+                                    },
+                                    {
+                                        field: 'httpStatusCode',
+                                        operator: 'range',
+                                        value: '400,499',
+                                    },
+                                    {
+                                        field: 'httpStatusCode',
+                                        operator: 'range',
+                                        value: '500,599',
+                                    },
+                                    {
+                                        field: 'httpStatusCode',
+                                        operator: 'range',
+                                        value: '900,999',
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                })
+                this.failJobCnt = res.data
+            }
+        },
+        taskClose() {
+            setTimeout(() => {
+                this.getFailJobsCnt()
+            }, 2000)
+        },
         clearData(fullClear) {
             const loading = this.$loading()
             this.$TOOL.cookie.clear()

src/frontend/admin/src/main.js

@@ -8,12 +8,14 @@ import router from './router'
 import store from './store'
 import App from './App.vue'
 import preload from '@/utils/preload'
+import passiveEventListener from '@/utils/passiveEventListener'
 
 const app = createApp(App)
 app.use(ElementPlus)
 app.use(store)
 app.use(i18n)
 app.use(global)
+app.use(passiveEventListener)
 
 preload.install(app).then(() => {
     app.use(router)

src/frontend/admin/src/style/fix.scss

@@ -332,4 +332,8 @@
 
 .el-collapse-item__header {
     color: var(--el-text-color-regular);
+}
+
+.adminui-header .el-drawer__header {
+    margin-bottom: 0;
 }

src/frontend/admin/src/utils/passiveEventListener.js

@@ -0,0 +1,77 @@
+export default {
+    install() {
+        const eventListenerOptionsSupported = () => {
+            let supported = false
+
+            try {
+                const opts = Object.defineProperty({}, 'passive', {
+                    get() {
+                        supported = true
+                    },
+                })
+
+                window.addEventListener('test', null, opts)
+                window.removeEventListener('test', null, opts)
+            } catch (e) {}
+
+            return supported
+        }
+
+        const defaultOptions = {
+            passive: true,
+            capture: false,
+        }
+        const supportedPassiveTypes = [
+            'scroll',
+            'wheel',
+            'touchstart',
+            'touchmove',
+            'touchenter',
+            'touchend',
+            'touchleave',
+            'mouseout',
+            'mouseleave',
+            'mouseup',
+            'mousedown',
+            'mousemove',
+            'mouseenter',
+            'mousewheel',
+            'mouseover',
+        ]
+        const getDefaultPassiveOption = (passive, eventName) => {
+            if (passive !== undefined) return passive
+
+            return supportedPassiveTypes.indexOf(eventName) === -1 ? false : defaultOptions.passive
+        }
+
+        const getWritableOptions = (options) => {
+            const passiveDescriptor = Object.getOwnPropertyDescriptor(options, 'passive')
+
+            return passiveDescriptor && passiveDescriptor.writable !== true && passiveDescriptor.set === undefined
+                ? Object.assign({}, options)
+                : options
+        }
+
+        const overwriteAddEvent = (superMethod) => {
+            EventTarget.prototype.addEventListener = function (type, listener, options) {
+                const usesListenerOptions = typeof options === 'object' && options !== null
+                const useCapture = usesListenerOptions ? options.capture : options
+
+                options = usesListenerOptions ? getWritableOptions(options) : {}
+                options.passive = getDefaultPassiveOption(options.passive, type)
+                options.capture = useCapture === undefined ? defaultOptions.capture : useCapture
+
+                superMethod.call(this, type, listener, options)
+            }
+
+            EventTarget.prototype.addEventListener._original = superMethod
+        }
+
+        const supportsPassive = eventListenerOptionsSupported()
+
+        if (supportsPassive) {
+            const addEvent = EventTarget.prototype.addEventListener
+            overwriteAddEvent(addEvent)
+        }
+    },
+}

src/frontend/admin/src/views/home/widgets/components/components/chart-pie.vue

@@ -44,9 +44,6 @@ export default {
                     show: true,
                     alignTo: 'labelLine',
                     formatter: '{b} {d}%',
-                    textStyle: {
-                        textBorderColor: 'transparent',
-                    },
                 },
                 radius: this.api[i++].radius,
                 type: 'pie',

src/frontend/admin/src/views/sys/job/all/save.vue

@@ -45,7 +45,9 @@
                             :theme="this.$TOOL.data.get('APP_SET_DARK') || this.$CONFIG.APP_SET_DARK ? 'github_dark' : 'github'"
                             lang="json"
                             style="height: 10rem; width: 100%" />
-                        <el-button @click="form.requestHeader = jsonFormat(form.requestHeader)" type="text">{{ $t('JSON 格式化') }}</el-button>
+                        <el-button @click="form.requestHeader = jsonFormat(form.requestHeader)" link type="primary"
+                            >{{ $t('JSON 格式化') }}
+                        </el-button>
                     </el-form-item>
                     <el-form-item :label="$t('请求体')" prop="requestBody">
                         <VAceEditor
@@ -53,7 +55,7 @@
                             :theme="this.$TOOL.data.get('APP_SET_DARK') || this.$CONFIG.APP_SET_DARK ? 'github_dark' : 'github'"
                             lang="json"
                             style="height: 15rem; width: 100%" />
-                        <el-button @click="form.requestBody = jsonFormat(form.requestBody)" type="text">{{ $t('JSON 格式化') }}</el-button>
+                        <el-button @click="form.requestBody = jsonFormat(form.requestBody)" link type="primary">{{ $t('JSON 格式化') }}</el-button>
                     </el-form-item>
                     <el-form-item :label="$t('请求的网络地址')" prop="requestUrl">
                         <el-input v-model="form.requestUrl" clearable />

src/frontend/admin/src/views/sys/role/index.vue

@@ -137,7 +137,7 @@
                 <el-table-column :label="$t('用户数量')" align="right" width="100">
                     <template #default="{ row }">
                         <el-link @click.native="dialog.save = { mode: 'view', row, tabId: 'user' }"
-                            >{{ statistics.roleId?.find((x) => x.key.roleId === row.id.toString())?.value ?? '...' }}
+                            >{{ statistics.roleId?.find((x) => x.key.roleId === row.id.toString())?.value ?? '0' }}
                         </el-link>
                     </template>
                 </el-table-column>

src/frontend/admin/src/views/sys/role/save.vue

@@ -79,7 +79,7 @@
                                 :theme="this.$TOOL.data.get('APP_SET_DARK') || this.$CONFIG.APP_SET_DARK ? 'github_dark' : 'github'"
                                 lang="json"
                                 style="height: 30rem; width: 100%" />
-                            <el-button @click="form.dashboardLayout = jsonFormat(form.dashboardLayout)" type="text"
+                            <el-button @click="form.dashboardLayout = jsonFormat(form.dashboardLayout)" link type="primary"
                                 >{{ $t('JSON 格式化') }}
                             </el-button>
                         </el-form-item>

src/frontend/admin/src/views/sys/user/index.vue

@@ -189,6 +189,12 @@ export default {
         },
     },
     async created() {
+        if (this.roleId) {
+            this.query.filter.roleId = this.roleId
+        }
+        if (this.deptId) {
+            this.query.filter.deptId = this.deptId
+        }
         const res = await this.$API.sys_dept.query.post({})
 
         this.deptTree = [
@@ -198,13 +204,6 @@ export default {
                 children: res.data,
             },
         ]
-
-        if (this.roleId) {
-            this.query.filter.roleId = this.roleId
-        }
-        if (this.deptId) {
-            this.query.filter.deptId = this.deptId
-        }
     },
     data() {
         return {