refactor: ♻️ 前端体验优化

[skip ci]

src/frontend/admin/src/App.vue

@@ -92,8 +92,8 @@ export default {
         // 设置语言
         this.$i18n.locale = this.$TOOL.data.get('APP_SET_LANG') || this.$CONFIG.APP_SET_LANG
 
-        //ctrl + enter 触发主按钮点击事件
         document.onkeydown = (e) => {
+            //ctrl + enter 触发主按钮点击事件
             if (e.ctrlKey && e.keyCode === 13) {
                 document
                     .getElementsByClassName('el-dialog__footer')[0]
@@ -118,9 +118,23 @@ export default {
                         break
                     }
                 }
-            } else if (e.altKey && e.keyCode === 81) {
+            } else if (e.altKey) {
+                if (e.keyCode === 81) {
+                    if (e.ctrlKey) {
+                        UseTabs.closeOther()
+                    } else {
                         UseTabs.close()
                     }
+                } else if (e.keyCode === 65) {
+                    document.getElementsByClassName('userbar-btn-search')[0]?.dispatchEvent(
+                        new MouseEvent('click', {
+                            view: window,
+                            bubbles: true,
+                            cancelable: false,
+                        }),
+                    )
+                }
+            }
         }
     },
 }

src/frontend/admin/src/components/scEcharts/echarts-theme-T.js

@@ -1,13 +1,15 @@
 import colorTool from '@/utils/color'
 
 export default {
-    build() {
+    async build() {
         const style = getComputedStyle(document.documentElement)
-        const el_color_primary = style.getPropertyValue('--el-color-primary')
+        let el_color_primary
+        while ((el_color_primary = style.getPropertyValue('--el-color-primary')) === 'rgba(0, 0, 0, 0)') {
+            await new Promise((x) => setTimeout(x, 100))
+        }
         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: {

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

@@ -29,7 +29,7 @@ export default {
         option: {
             deep: true,
             handler(v) {
-                unwarp(this.myChart).setOption(v, { notMerge: true })
+                unwarp(this.myChart)?.setOption(v, { notMerge: true })
             },
         },
     },
@@ -48,12 +48,11 @@ export default {
     deactivated() {
         this.isActivat = false
     },
-    mounted() {
+    async mounted() {
         this.isActivat = true
-        this.$nextTick(() => {
+        await this.$nextTick()
-            echarts.registerTheme('T', T.build())
+        echarts.registerTheme('T', await T.build())
         this.draw()
-        })
     },
     methods: {
         draw() {

src/frontend/admin/src/directives/time.js

@@ -1,64 +1,5 @@
 import tool from '@/utils/tool'
 
-const Time = {
-    //获取当前时间戳
-    getUnix: function () {
-        const date = new Date()
-        return date.getTime()
-    },
-    //获取今天0点0分0秒的时间戳
-    getTodayUnix: function () {
-        const date = new Date()
-        date.setHours(0)
-        date.setMinutes(0)
-        date.setSeconds(0)
-        date.setMilliseconds(0)
-        return date.getTime()
-    },
-    //获取今年1月1日0点0秒的时间戳
-    getYearUnix: function () {
-        const date = new Date()
-        date.setMonth(0)
-        date.setDate(1)
-        date.setHours(0)
-        date.setMinutes(0)
-        date.setSeconds(0)
-        date.setMilliseconds(0)
-        return date.getTime()
-    },
-    //获取标准年月日
-    getLastDate: function (time) {
-        const date = new Date(time)
-        const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
-        const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
-        return date.getFullYear() + '-' + month + '-' + day
-    },
-    //转换时间
-    getFormatTime: function (timestamp) {
-        timestamp = new Date(timestamp)
-        const now = this.getUnix()
-        const today = this.getTodayUnix()
-        //var year = this.getYearUnix();
-        const timer = (now - timestamp) / 1000
-        let tip
-
-        if (timer <= 0) {
-            tip = '刚刚'
-        } else if (Math.floor(timer / 60) <= 0) {
-            tip = '刚刚'
-        } else if (timer < 3600) {
-            tip = Math.floor(timer / 60) + '分钟前'
-        } else if (timer >= 3600 && (timestamp - today >= 0 || Math.floor(timer / 86400) <= 0)) {
-            tip = Math.floor(timer / 3600) + '小时前'
-        } else if (timer / 86400 <= 31) {
-            tip = Math.floor(timer / 86400) + '天前'
-        } else {
-            tip = this.getLastDate(timestamp)
-        }
-        return tip
-    },
-}
-
 export default (el, binding) => {
     let { value, modifiers } = binding
     if (!value) {
@@ -68,9 +9,9 @@ export default (el, binding) => {
         value = value * 1000
     }
     if (modifiers.tip) {
-        el.innerHTML = Time.getFormatTime(value)
+        el.innerHTML = tool.time.getFormatTime(value)
         el.__timeout__ = setInterval(() => {
-            el.innerHTML = Time.getFormatTime(value)
+            el.innerHTML = tool.time.getFormatTime(value)
         }, 60000)
     } else {
         const format = el.getAttribute('format') || undefined

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

@@ -5,6 +5,8 @@
             :placeholder="$t('搜索')"
             :trigger-on-focus="false"
             @input="inputChange"
+            @keydown="inputKeyDown"
+            autofocus
             clearable
             prefix-icon="el-icon-search"
             ref="input"
@@ -25,7 +27,11 @@
             <div v-if="result.length <= 0" class="sc-search-no-result">{{ $t('暂无搜索结果') }}</div>
             <ul v-else>
                 <el-scrollbar max-height="30rem">
-                    <li v-for="item in result" :key="item.path" @click="to(item)">
+                    <li
+                        v-for="(item, i) in result"
+                        :class="{ 'sc-search-result-li-hover': this.cursor.index === i }"
+                        :key="item.path"
+                        @click="to(item)">
                         <el-icon>
                             <component :is="item.icon || 'el-icon-menu'" />
                         </el-icon>
@@ -41,18 +47,55 @@
 export default {
     data() {
         return {
+            cursor: {
+                position: 0,
+                index: 0,
+            },
             input: '',
             menu: [],
             result: [],
             history: [],
         }
     },
-    mounted() {
+    watch: {
+        result() {
+            this.cursor.position = 0
+            this.cursor.index = 0
+        },
+    },
+    async mounted() {
         this.history = this.$TOOL.data.get('SEARCH_HISTORY') || []
         this.filterMenu(this.$GLOBAL.menu)
+        await this.$nextTick()
+        await new Promise((x) => setTimeout(x, 200))
         this.$refs.input.focus()
     },
     methods: {
+        inputKeyDown(e) {
+            if (e.keyCode === 13) {
+                document
+                    .getElementsByClassName('sc-search-result')[0]
+                    ?.getElementsByClassName('el-scrollbar__view')[0]
+                    ?.children[this.cursor.index]?.dispatchEvent(
+                        new MouseEvent('click', {
+                            view: window,
+                            bubbles: true,
+                            cancelable: false,
+                        }),
+                    )
+                return
+            }
+            if (e.keyCode === 40) {
+                this.cursor.index = Math.abs(++this.cursor.position % this.result.length)
+                e.preventDefault()
+                return
+            }
+            if (e.keyCode === 38) {
+                this.cursor.index = Math.abs(--this.cursor.position % this.result.length)
+                e.preventDefault()
+                return
+            }
+        },
         inputChange(value) {
             if (value) {
                 this.result = this.menuFilter(value)
@@ -152,6 +195,9 @@ export default {
 }
 
 .sc-search-history {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
     margin-top: 1rem;
 }
 
@@ -182,9 +228,10 @@ export default {
     margin-right: 1rem;
 }
 
+.sc-search-result-li-hover,
 .sc-search-result li:hover {
-    background: var(--el-color-primary);
+    background: var(--el-color-primary) !important;
-    color: var(--el-color-white);
+    color: var(--el-color-white) !important;
-    border-color: var(--el-color-primary);
+    border-color: var(--el-color-primary) !important;
 }
 </style>

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

@@ -10,6 +10,43 @@
                 </p>
             </el-empty>
             <el-row :gutter="10">
+                <el-col :lg="12">
+                    <el-empty v-if="!failJobs">
+                        <template #description>
+                            <p>{{ $TOOL.time.getFormatTime(new Date(failJobViewTime).getTime()) }}</p>
+                            <p>至今</p>
+                            <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">
+                        <div class="user-bar-jobs-item-body">
+                            <div class="jobIcon">
+                                {{ job.httpStatusCode.toUpperCase().slice(0, 2) }}
+                            </div>
+                            <div class="jobMain">
+                                <div class="title">
+                                    <h2>{{ job.job.jobName }}</h2>
+                                    <p>{{ $t('出错时间：') }}<span v-time.tip="job.createdTime" :title="job.createdTime"></span></p>
+                                    <p>
+                                        执行耗时：<span>{{ $TOOL.groupSeparator(job.duration) }} ms</span>
+                                    </p>
+                                </div>
+                                <div class="bottom">
+                                    <div class="status failJobs">
+                                        {{ job.responseBody }}
+                                    </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>
+                        </div>
+                    </el-card>
+                </el-col>
                 <el-col :lg="12">
                     <el-card
                         v-for="job in jobs"
@@ -47,49 +84,36 @@
                         </div>
                     </el-card>
                 </el-col>
-                <el-col :lg="12">
-                    <el-empty v-if="!failJobs" description="未发现新的异常作业"></el-empty>
-                    <el-card v-else v-for="job in failJobs" :class="`user-bar-jobs-item alert`" :key="job.job.id" shadow="hover">
-                        <div class="user-bar-jobs-item-body">
-                            <div class="jobIcon">
-                                {{ job.httpStatusCode.toUpperCase().slice(0, 2) }}
-                            </div>
-                            <div class="jobMain">
-                                <div class="title">
-                                    <h2>{{ job.job.jobName }}</h2>
-                                    <p>{{ $t('出错时间：') }}<span v-time.tip="job.createdTime" :title="job.createdTime"></span></p>
-                                    <p>
-                                        执行耗时：<span>{{ $TOOL.groupSeparator(job.duration) }} ms</span>
-                                    </p>
-                                </div>
-                                <div class="bottom">
-                                    <div class="status failJobs">
-                                        {{ job.responseBody }}
-                                    </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>
-                        </div>
-                    </el-card>
-                </el-col>
             </el-row>
         </el-main>
         <el-footer class="flex" style="justify-content: space-evenly; height: unset">
-            <div>
+            <div v-if="failJobs">
-                <el-badge :hidden="jobsCnt === 0" :value="jobsCnt">
+                <el-badge :hidden="fail === 0" :value="`${$TOOL.time.getFormatTime(new Date(failJobViewTime).getTime())} 至今 ${fail}个`">
-                    <el-button @click="dialog.save = { tabId: 'all' }">{{ $t('作业管理') }}</el-button>
+                    <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 v-if="failJobs">
+            <div>
-                <el-badge :hidden="fail === 0" :value="fail">
+                <el-badge :hidden="jobsCnt === 0" :value="jobsCnt">
-                    <el-button @click="dialog.save = { tabId: 'fail' }" plain type="danger">{{ $t('异常日志') }}</el-button>
+                    <el-button
+                        @click="
+                            () => {
+                                this.$router.push({ path: '/sys/job' })
+                                this.$emit('closed')
+                            }
+                        "
+                        >{{ $t('作业管理') }}</el-button
+                    >
                 </el-badge>
             </div>
         </el-footer>
@@ -105,7 +129,6 @@
         @closed="dialog.jobRecordSave = null"
         @mounted="$refs.jobRecordSaveDialog.open(dialog.jobRecordSave)"
         ref="jobRecordSaveDialog"></jobRecordSaveDialog>
-    <saveDialog v-if="dialog.save" @closed="dialog.save = null" @mounted="$refs.saveDialog.open(dialog.save)" ref="saveDialog"></saveDialog>
 </template>
 
 <script>
@@ -113,12 +136,16 @@ import { defineAsyncComponent } from 'vue'
 
 const jobSaveDialog = defineAsyncComponent(() => import('@/views/sys/job/all/save.vue'))
 const jobRecordSaveDialog = defineAsyncComponent(() => import('@/views/sys/job/record/save.vue'))
-const saveDialog = defineAsyncComponent(() => import('./save.vue'))
+
 export default {
+    computed: {
+        failJobViewTime() {
+            return this.$TOOL.data.get('APP_SET_FAIL_JOB_VIEW_TIME') ?? this.$TOOL.dateFormat(new Date(), 'yyyy-MM-dd')
+        },
+    },
     components: {
         jobSaveDialog,
         jobRecordSaveDialog,
-        saveDialog,
     },
     data() {
         return {
@@ -175,7 +202,7 @@ export default {
                         ],
                         field: 'createdTime',
                         operator: 'greaterThan',
-                        value: this.$TOOL.data.get('APP_SET_FAIL_JOB_VIEW_TIME') ?? this.$TOOL.dateFormat(new Date(), 'yyyy-MM-dd'),
+                        value: this.failJobViewTime,
                     },
                 }),
             ])

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

@@ -1,44 +0,0 @@
-<template>
-    <sc-dialog v-model="visible" :title="$t('作业中心')" @closed="$emit('closed')" append-to-body destroy-on-close full-screen>
-        <job v-if="tabId" :statusCodes="statusCodes" :tab="tabId" />
-        <template #footer>
-            <el-button @click="visible = false">{{ $t('取消') }}</el-button>
-        </template>
-    </sc-dialog>
-</template>
-
-<script>
-import { defineAsyncComponent } from 'vue'
-const job = defineAsyncComponent(() => import('@/views/sys/job/index.vue'))
-export default {
-    components: { job },
-    data() {
-        return {
-            statusCodes: null,
-            tabId: null,
-            loading: true,
-            visible: false,
-        }
-    },
-    emits: ['success', 'closed', 'mounted'],
-    methods: {
-        //显示
-        async open(data) {
-            this.visible = true
-            if (data.tabId === 'fail') {
-                data.tabId = 'log'
-                this.statusCodes = ['300,399', '400,499', '500,599', '900,999']
-                await this.$TOOL.data.set('APP_SET_FAIL_JOB_VIEW_TIME', this.$TOOL.dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'))
-            }
-            this.tabId = data.tabId
-            return this
-        },
-        //表单提交方法
-        async submit() {},
-    },
-    mounted() {
-        this.$emit('mounted')
-    },
-}
-</script>
-<style scoped></style>

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

@@ -83,7 +83,7 @@
 import { defineAsyncComponent } from 'vue'
 import avatar from '../../utils/avatar'
 const search = defineAsyncComponent(() => import('./search.vue'))
-const tasks = defineAsyncComponent(() => import('./tasks/index.vue'))
+const tasks = defineAsyncComponent(() => import('./tasks.vue'))
 const message = defineAsyncComponent(() => import('@/views/profile/message/components/list.vue'))
 export default {
     components: {

src/frontend/admin/src/locales/lang/zh-cn.js

@@ -498,4 +498,7 @@ export default {
     本页: '本页',
     'JSON 格式化': 'JSON 格式化',
     格式错误: '格式错误',
+    '按下 {key} 可关闭当前标签页': '按下 {key} 可关闭当前标签页',
+    '按下 {key} 可关闭其它标签页': '按下 {key} 可关闭其它标签页',
+    '按下 {key} 快速查找菜单功能': '按下 {key} 快速查找菜单功能',
 }

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

@@ -329,3 +329,7 @@
     max-width: 90%;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
+
+.el-collapse-item__header {
+    color: var(--el-text-color-regular);
+}

src/frontend/admin/src/utils/permission.js

@@ -12,19 +12,16 @@ export function permissionAll(permissions) {
  * @returns {boolean}
  */
 export function judementSameArr(news, old) {
-    // console.log(news)
-    // console.log(old)
     let count = 0
     const len = news.length
     for (let i in news) {
         for (let j in old) {
             if (news[i] === old[j]) {
                 count++
-                // console.log(news[i])
             }
         }
     }
-    // console.log('相同的数量', count)
+
     return count === len
 }
 

src/frontend/admin/src/utils/tool.js

@@ -3,6 +3,65 @@ import sysConfig from '@/config'
 
 const tool = {}
 
+tool.time = {
+    //获取当前时间戳
+    getUnix: function () {
+        const date = new Date()
+        return date.getTime()
+    },
+    //获取今天0点0分0秒的时间戳
+    getTodayUnix: function () {
+        const date = new Date()
+        date.setHours(0)
+        date.setMinutes(0)
+        date.setSeconds(0)
+        date.setMilliseconds(0)
+        return date.getTime()
+    },
+    //获取今年1月1日0点0秒的时间戳
+    getYearUnix: function () {
+        const date = new Date()
+        date.setMonth(0)
+        date.setDate(1)
+        date.setHours(0)
+        date.setMinutes(0)
+        date.setSeconds(0)
+        date.setMilliseconds(0)
+        return date.getTime()
+    },
+    //获取标准年月日
+    getLastDate: function (time) {
+        const date = new Date(time)
+        const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
+        const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
+        return date.getFullYear() + '-' + month + '-' + day
+    },
+    //转换时间
+    getFormatTime: function (timestamp) {
+        timestamp = new Date(timestamp)
+        const now = this.getUnix()
+        const today = this.getTodayUnix()
+        //var year = this.getYearUnix();
+        const timer = (now - timestamp) / 1000
+        let tip
+
+        if (timer <= 0) {
+            tip = '刚刚'
+        } else if (Math.floor(timer / 60) <= 0) {
+            tip = '刚刚'
+        } else if (timer < 3600) {
+            tip = Math.floor(timer / 60) + '分钟前'
+        } else if (timer >= 3600 && (timestamp - today >= 0 || Math.floor(timer / 86400) <= 0)) {
+            tip = Math.floor(timer / 3600) + '小时前'
+        } else if (timer / 86400 <= 31) {
+            tip = Math.floor(timer / 86400) + '天前'
+        } else {
+            tip = this.getLastDate(timestamp)
+        }
+        return tip
+    },
+}
+
 /* localStorage */
 tool.data = {
     configJson: null,

src/frontend/admin/src/views/home/index.vue

@@ -5,9 +5,13 @@
     </el-main>
 
     <el-tour v-model="tour.open" @close="$TOOL.data.set('TOUR_TIP_READ_INDEX', true)">
-        <el-tour-step :target="tour.targets.tags" :title="$t('操作指引')"> {{ $t('按下 ALT+Q 可快速关闭当前标签页') }} </el-tour-step>
+        <el-tour-step :target="tour.targets.tags" :title="$t('操作指引')">
-        <el-tour-step :target="tour.targets.search" :title="$t('操作指引')"> {{ $t('快速查找菜单功能') }} </el-tour-step>
+            <p v-html="$t('按下 {key} 可关闭当前标签页', { key: '<b>Alt+Q</b>' })"></p>
-        <el-tour-step :target="tour.targets.userCenter" :title="$t('操作指引')"> {{ $t('修改个人信息和密码') }} </el-tour-step>
+            <p v-html="$t('按下 {key} 可关闭其它标签页', { key: '<b>Ctrl+Alt+Q</b>' })"></p>
+        </el-tour-step>
+        <el-tour-step :target="tour.targets.search" :title="$t('操作指引')">
+            <p v-html="$t('按下 {key} 快速查找菜单功能', { key: '<b>Alt+A</b>' })"></p>
+        </el-tour-step>
         <el-tour-step v-if="dashboard" :target="tour.targets.layoutSetting" :title="$t('操作指引')">
             {{ $t('自定义首页布局') }}
         </el-tour-step>

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

@@ -7,7 +7,7 @@
             </el-tabs>
         </el-header>
         <el-main class="nopadding">
-            <component :is="tabId" :status-codes="statusCodes" />
+            <component :is="tabId" :status-codes="statusCodes || dataStatusCode" />
         </el-main>
     </el-container>
 </template>
@@ -20,9 +20,20 @@ const all = defineAsyncComponent(() => import('@/views/sys/job/all/index.vue'))
 export default {
     components: { all, log },
     computed: {},
-    created() {},
+    created() {
+        if (this.$route.query.view === 'log') {
+            this.tabId = 'log'
+        }
+
+        if (this.$route.query.view === 'fail') {
+            this.tabId = 'log'
+            this.dataStatusCode = ['300,399', '400,499', '500,599', '900,999']
+            this.$TOOL.data.set('APP_SET_FAIL_JOB_VIEW_TIME', this.$TOOL.dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'))
+        }
+    },
     data() {
         return {
+            dataStatusCode: null,
             tabId: 'all',
         }
     },

src/frontend/admin/src/views/sys/job/record/index.vue

@@ -2,12 +2,12 @@
     <el-container>
         <el-header v-loading="statistics.total === '...'" class="el-header-statistics">
             <el-row :gutter="15">
-                <el-col :lg="12">
+                <el-col :span="12">
                     <el-card shadow="never">
                         <sc-statistic :value="statistics.total" group-separator title="总数"></sc-statistic>
                     </el-card>
                 </el-col>
-                <el-col :lg="12">
+                <el-col :span="12">
                     <el-card shadow="never">
                         <sc-statistic :value="statistics.rate" suffix="%" title="成功率"></sc-statistic>
                     </el-card>

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

@@ -10,22 +10,82 @@
             ref="dialogForm">
             <el-tabs tab-position="top">
                 <el-tab-pane :label="$t('基本信息')">
-                    <el-form-item :label="$t('唯一编码')" prop="id"><el-input v-model="form.id" clearable /></el-form-item
+                    <el-row :gutter="10">
-                    ><el-form-item :label="$t('执行耗时（毫秒）')" prop="duration"><el-input v-model="form.duration" clearable /></el-form-item
+                        <el-col :lg="8">
-                    ><el-form-item :label="$t('请求方法')" prop="httpMethod"><el-input v-model="form.httpMethod" clearable /></el-form-item
+                            <el-form-item :label="$t('唯一编码')" prop="id">
-                    ><el-form-item :label="$t('响应状态码')" prop="httpStatusCode"><el-input v-model="form.httpStatusCode" clearable /></el-form-item
+                                <el-input v-model="form.id" clearable />
-                    ><el-form-item :label="$t('作业编号')" prop="jobId"><el-input v-model="form.jobId" clearable /></el-form-item
+                            </el-form-item>
-                    ><el-form-item :label="$t('请求体')" prop="requestBody"
+                            <el-form-item :label="$t('执行耗时（毫秒）')" prop="duration">
-                        ><el-input v-model="form.requestBody" clearable rows="5" type="textarea" /></el-form-item
+                                <el-input v-model="form.duration" clearable />
-                    ><el-form-item :label="$t('请求头')" prop="requestHeader">
+                            </el-form-item>
-                        <el-input v-model="form.requestHeader" clearable rows="5" type="textarea" /></el-form-item
+                            <el-form-item :label="$t('请求方法')" prop="httpMethod">
-                    ><el-form-item :label="$t('请求的网络地址')" prop="requestUrl"><el-input v-model="form.requestUrl" clearable /></el-form-item
+                                <el-input v-model="form.httpMethod" clearable />
-                    ><el-form-item :label="$t('响应体')" prop="responseBody"
+                            </el-form-item>
-                        ><el-input v-model="form.responseBody" clearable rows="5" type="textarea" /></el-form-item
+                            <el-form-item :label="$t('响应状态码')" prop="httpStatusCode">
-                    ><el-form-item :label="$t('响应头')" prop="responseHeader">
+                                <el-input v-model="form.httpStatusCode" clearable />
-                        <el-input v-model="form.responseHeader" clearable rows="5" type="textarea" /></el-form-item
+                            </el-form-item>
-                    ><el-form-item :label="$t('执行时间编号')" prop="timeId"><el-input v-model="form.timeId" clearable /></el-form-item
+                            <el-form-item :label="$t('作业编号')" prop="jobId">
-                    ><el-form-item :label="$t('创建时间')" prop="createdTime"><el-input v-model="form.createdTime" clearable /></el-form-item>
+                                <el-input v-model="form.jobId" clearable />
+                            </el-form-item>
+                            <el-form-item :label="$t('请求的网络地址')" prop="requestUrl">
+                                <el-input v-model="form.requestUrl" clearable />
+                            </el-form-item>
+                            <el-form-item :label="$t('执行时间编号')" prop="timeId">
+                                <el-input v-model="form.timeId" clearable />
+                            </el-form-item>
+                            <el-form-item :label="$t('创建时间')" prop="createdTime">
+                                <el-input v-model="form.createdTime" clearable />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :lg="16">
+                            <el-form-item v-if="form.requestHeader" :label="$t('请求头')" prop="requestHeader">
+                                <json-viewer
+                                    v-if="mode === 'view'"
+                                    :expand-depth="1"
+                                    :theme="this.$TOOL.data.get('APP_SET_DARK') || this.$CONFIG.APP_SET_DARK ? 'dark' : 'light'"
+                                    :value="JSON.parse(form.requestHeader)"
+                                    copyable
+                                    expanded
+                                    sort></json-viewer>
+                                <el-input v-else v-model="form.requestHeader" clearable rows="5" type="textarea" />
+                            </el-form-item>
+                            <el-form-item v-if="form.requestBody" :label="$t('请求体')" prop="requestBody">
+                                <json-viewer
+                                    v-if="mode === 'view'"
+                                    :expand-depth="5"
+                                    :theme="this.$TOOL.data.get('APP_SET_DARK') || this.$CONFIG.APP_SET_DARK ? 'dark' : 'light'"
+                                    :value="JSON.parse(form.requestBody)"
+                                    copyable
+                                    expanded
+                                    sort></json-viewer>
+                                <el-input v-else v-model="form.requestBody" clearable rows="5" type="textarea" />
+                            </el-form-item>
+
+                            <el-form-item v-if="form.responseHeader" :label="$t('响应头')" prop="responseHeader">
+                                <json-viewer
+                                    v-if="mode === 'view'"
+                                    :expand-depth="1"
+                                    :theme="this.$TOOL.data.get('APP_SET_DARK') || this.$CONFIG.APP_SET_DARK ? 'dark' : 'light'"
+                                    :value="JSON.parse(form.responseHeader)"
+                                    copyable
+                                    expanded
+                                    sort></json-viewer>
+                                <el-input v-else v-model="form.responseHeader" clearable rows="5" type="textarea" />
+                            </el-form-item>
+                            <el-form-item v-if="form.responseBody" :label="$t('响应体')" prop="responseBody">
+                                <json-viewer
+                                    v-if="mode === 'view'"
+                                    :expand-depth="5"
+                                    :theme="this.$TOOL.data.get('APP_SET_DARK') || this.$CONFIG.APP_SET_DARK ? 'dark' : 'light'"
+                                    :value="JSON.parse(form.responseBody)"
+                                    copyable
+                                    expanded
+                                    sort>
+                                </json-viewer>
+                                <el-input v-else v-model="form.responseBody" clearable rows="5" type="textarea" />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
                 </el-tab-pane>
                 <el-tab-pane v-if="mode === 'view'" :label="$t('原始数据')">
                     <json-viewer