lingyun/NetAdmin
Template
7
0
Fork 0
mirror of https://github.com/nsnail/NetAdmin.git synced 2025-11-01 03:35:28 +08:00
Code Issues 1 Packages Projects Releases Wiki Activity

refactor: ♻️ 前端体验优化

Browse Source 
[skip ci]
This commit is contained in:
tk
2024-12-13 16:14:40 +08:00
committed by nsnail
parent 442a69f90d
commit b1678e2537
16 changed files with 315 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/frontend/admin/src/App.vue
View File

@@ -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,8 +118,22 @@ export default {
break
}
}
} else if (e.altKey && e.keyCode === 81) {
UseTabs.close()
} 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,
}),
)
}
}
}
},

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

@@ -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: {

11
src/frontend/admin/src/components/scEcharts/index.vue
View File

@@ -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(() => {
echarts.registerTheme('T', T.build())
this.draw()
})
await this.$nextTick()
echarts.registerTheme('T', await T.build())
this.draw()
},
methods: {
draw() {

63
src/frontend/admin/src/directives/time.js
View File

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

57
src/frontend/admin/src/layout/components/search.vue
View File

@@ -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);
color: var(--el-color-white);
border-color: var(--el-color-primary);
background: var(--el-color-primary) !important;
color: var(--el-color-white) !important;
border-color: var(--el-color-primary) !important;
}
</style>

109
src/frontend/admin/src/layout/components/tasks/index.vue → src/frontend/admin/src/layout/components/tasks.vue
View File

@@ -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>
<el-badge :hidden="jobsCnt === 0" :value="jobsCnt">
<el-button @click="dialog.save = { tabId: 'all' }">{{ $t('作业管理') }}</el-button>
<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 v-if="failJobs">
<el-badge :hidden="fail === 0" :value="fail">
<el-button @click="dialog.save = { tabId: 'fail' }" plain type="danger">{{ $t('异常日志') }}</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>
@@ -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,
},
}),
])

44
src/frontend/admin/src/layout/components/tasks/save.vue
View File

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

2
src/frontend/admin/src/layout/components/userbar.vue
View File

@@ -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: {

3
src/frontend/admin/src/locales/lang/zh-cn.js
View File

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

4
src/frontend/admin/src/style/fix.scss
View File

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

5
src/frontend/admin/src/utils/permission.js
View File

@@ -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
}

59
src/frontend/admin/src/utils/tool.js
View File

@@ -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,

10
src/frontend/admin/src/views/home/index.vue
View File

@@ -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.search" :title="$t('操作指引')"> {{ $t('快速查找菜单功能') }} </el-tour-step>
<el-tour-step :target="tour.targets.userCenter" :title="$t('操作指引')"> {{ $t('修改个人信息和密码') }} </el-tour-step>
<el-tour-step :target="tour.targets.tags" :title="$t('操作指引')">
<p v-html="$t('按下 {key} 可关闭当前标签页', { key: '<b>Alt+Q</b>' })"></p>
<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>

15
src/frontend/admin/src/views/sys/job/index.vue
View File

@@ -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',
}
},

4
src/frontend/admin/src/views/sys/job/record/index.vue
View File

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

92
src/frontend/admin/src/views/sys/job/record/save.vue
View File

@@ -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-form-item :label="$t('执行耗时（毫秒）')" prop="duration"><el-input v-model="form.duration" clearable /></el-form-item
><el-form-item :label="$t('请求方法')" prop="httpMethod"><el-input v-model="form.httpMethod" clearable /></el-form-item
><el-form-item :label="$t('响应状态码')" prop="httpStatusCode"><el-input v-model="form.httpStatusCode" clearable /></el-form-item
><el-form-item :label="$t('作业编号')" prop="jobId"><el-input v-model="form.jobId" clearable /></el-form-item
><el-form-item :label="$t('请求体')" prop="requestBody"
><el-input v-model="form.requestBody" clearable rows="5" type="textarea" /></el-form-item
><el-form-item :label="$t('请求头')" prop="requestHeader">
<el-input v-model="form.requestHeader" clearable rows="5" type="textarea" /></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="responseBody"
><el-input v-model="form.responseBody" clearable rows="5" type="textarea" /></el-form-item
><el-form-item :label="$t('响应头')" prop="responseHeader">
<el-input v-model="form.responseHeader" clearable rows="5" type="textarea" /></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-row :gutter="10">
<el-col :lg="8">
<el-form-item :label="$t('唯一编码')" prop="id">
<el-input v-model="form.id" clearable />
</el-form-item>
<el-form-item :label="$t('执行耗时（毫秒）')" prop="duration">
<el-input v-model="form.duration" clearable />
</el-form-item>
<el-form-item :label="$t('请求方法')" prop="httpMethod">
<el-input v-model="form.httpMethod" clearable />
</el-form-item>
<el-form-item :label="$t('响应状态码')" prop="httpStatusCode">
<el-input v-model="form.httpStatusCode" clearable />
</el-form-item>
<el-form-item :label="$t('作业编号')" prop="jobId">
<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