mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2025-01-19 00:09:16 +08:00
style: Optimize the display of status cards on the overview page (#7562)
* style: Optimize the display of status cards on the overview page
This commit is contained in:
蘭
GitHub
parent
41b2523750
commit
c13387bc70
@ -369,7 +369,7 @@ const message = {
|
|||||||
|
|
||||||
core: '物理核心',
|
core: '物理核心',
|
||||||
logicCore: '逻辑核心',
|
logicCore: '逻辑核心',
|
||||||
loadAverage: '最近 {0} 分钟平均负载',
|
loadAverage: '最近 1 分钟平均负载 | 最近 {n} 分钟平均负载',
|
||||||
load: '负载',
|
load: '负载',
|
||||||
mount: '挂载点',
|
mount: '挂载点',
|
||||||
fileSystem: '文件系统',
|
fileSystem: '文件系统',
|
||||||
|
|||||||
@ -165,7 +165,7 @@ html.dark {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.el-loading-mask {
|
.el-loading-mask {
|
||||||
background-color: #5b5e6a75;
|
background-color: rgba(0, 0, 0, 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-input {
|
.el-input {
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-row :gutter="10" class="status-container">
|
<el-row :gutter="10">
|
||||||
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center">
|
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center">
|
||||||
<el-popover placement="bottom" :width="loadWidth()" trigger="hover" v-if="chartsOption['cpu']">
|
<el-popover placement="bottom" :width="loadWidth()" trigger="hover" v-if="chartsOption['cpu']">
|
||||||
<div>
|
<div>
|
||||||
@ -52,28 +52,39 @@
|
|||||||
</span>
|
</span>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center">
|
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center">
|
||||||
<el-popover placement="bottom" :width="200" trigger="hover" v-if="chartsOption['memory']">
|
<el-popover placement="bottom" width="auto" trigger="hover" v-if="chartsOption['memory']">
|
||||||
<el-tag style="font-weight: 500">{{ $t('home.mem') }}:</el-tag>
|
<div class="grid grid-cols-2 gap-1">
|
||||||
<el-tag class="tagClass">{{ $t('home.total') }}: {{ computeSize(currentInfo.memoryTotal) }}</el-tag>
|
<div class="grid grid-cols-1 gap-1">
|
||||||
<el-tag class="tagClass">{{ $t('home.used') }}: {{ computeSize(currentInfo.memoryUsed) }}</el-tag>
|
<el-tag class="font-medium !justify-start w-max">{{ $t('home.mem') }}:</el-tag>
|
||||||
<el-tag class="tagClass">{{ $t('home.free') }}: {{ computeSize(currentInfo.memoryAvailable) }}</el-tag>
|
<el-tag class="!justify-start">
|
||||||
<el-tag class="tagClass">
|
{{ $t('home.total') }}: {{ computeSize(currentInfo.memoryTotal) }}
|
||||||
{{ $t('home.percent') }}: {{ formatNumber(currentInfo.memoryUsedPercent) }}%
|
</el-tag>
|
||||||
</el-tag>
|
<el-tag class="!justify-start">
|
||||||
<div v-if="currentInfo.swapMemoryTotal" class="mt-2">
|
{{ $t('home.used') }}: {{ computeSize(currentInfo.memoryUsed) }}
|
||||||
<el-tag style="font-weight: 500">{{ $t('home.swapMem') }}:</el-tag>
|
</el-tag>
|
||||||
<el-tag class="tagClass">
|
<el-tag class="!justify-start">
|
||||||
{{ $t('home.total') }}: {{ computeSize(currentInfo.swapMemoryTotal) }}
|
{{ $t('home.free') }}: {{ computeSize(currentInfo.memoryAvailable) }}
|
||||||
</el-tag>
|
</el-tag>
|
||||||
<el-tag class="tagClass">
|
<el-tag class="!justify-start">
|
||||||
{{ $t('home.used') }}: {{ computeSize(currentInfo.swapMemoryUsed) }}
|
{{ $t('home.percent') }}: {{ formatNumber(currentInfo.memoryUsedPercent) }}%
|
||||||
</el-tag>
|
</el-tag>
|
||||||
<el-tag class="tagClass">
|
</div>
|
||||||
{{ $t('home.free') }}: {{ computeSize(currentInfo.swapMemoryAvailable) }}
|
|
||||||
</el-tag>
|
<div class="grid grid-cols-1 gap-1" v-if="currentInfo.swapMemoryTotal">
|
||||||
<el-tag class="tagClass">
|
<el-tag class="font-medium !justify-start w-max">{{ $t('home.swapMem') }}:</el-tag>
|
||||||
{{ $t('home.percent') }}: {{ formatNumber(currentInfo.swapMemoryUsedPercent) }}%
|
<el-tag class="!justify-start">
|
||||||
</el-tag>
|
{{ $t('home.total') }}: {{ computeSize(currentInfo.swapMemoryTotal) }}
|
||||||
|
</el-tag>
|
||||||
|
<el-tag class="!justify-start">
|
||||||
|
{{ $t('home.used') }}: {{ computeSize(currentInfo.swapMemoryUsed) }}
|
||||||
|
</el-tag>
|
||||||
|
<el-tag class="!justify-start">
|
||||||
|
{{ $t('home.free') }}: {{ computeSize(currentInfo.swapMemoryAvailable) }}
|
||||||
|
</el-tag>
|
||||||
|
<el-tag class="!justify-start">
|
||||||
|
{{ $t('home.percent') }}: {{ formatNumber(currentInfo.swapMemoryUsedPercent) }}%
|
||||||
|
</el-tag>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<template #reference>
|
<template #reference>
|
||||||
<v-charts
|
<v-charts
|
||||||
@ -90,12 +101,12 @@
|
|||||||
</span>
|
</span>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center">
|
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center">
|
||||||
<el-popover placement="bottom" :width="200" trigger="hover" v-if="chartsOption['load']">
|
<el-popover placement="bottom" width="auto" trigger="hover" v-if="chartsOption['load']">
|
||||||
<el-tag class="tagClass">{{ $t('home.loadAverage', 1) }}: {{ formatNumber(currentInfo.load1) }}</el-tag>
|
<div class="grid grid-cols-1 gap-1">
|
||||||
<el-tag class="tagClass">{{ $t('home.loadAverage', 5) }}: {{ formatNumber(currentInfo.load5) }}</el-tag>
|
<el-tag>{{ $t('home.loadAverage', 1) }}: {{ formatNumber(currentInfo.load1) }}</el-tag>
|
||||||
<el-tag class="tagClass">
|
<el-tag>{{ $t('home.loadAverage', 5) }}: {{ formatNumber(currentInfo.load5) }}</el-tag>
|
||||||
{{ $t('home.loadAverage', 15) }}: {{ formatNumber(currentInfo.load15) }}
|
<el-tag>{{ $t('home.loadAverage', 15) }}: {{ formatNumber(currentInfo.load15) }}</el-tag>
|
||||||
</el-tag>
|
</div>
|
||||||
<template #reference>
|
<template #reference>
|
||||||
<v-charts
|
<v-charts
|
||||||
height="160px"
|
height="160px"
|
||||||
@ -110,42 +121,35 @@
|
|||||||
</el-col>
|
</el-col>
|
||||||
<template v-for="(item, index) of currentInfo.diskData" :key="index">
|
<template v-for="(item, index) of currentInfo.diskData" :key="index">
|
||||||
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center" v-if="isShow('disk', index)">
|
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center" v-if="isShow('disk', index)">
|
||||||
<el-popover placement="bottom" :width="300" trigger="hover" v-if="chartsOption[`disk${index}`]">
|
<el-popover placement="bottom" width="auto" trigger="hover" v-if="chartsOption[`disk${index}`]">
|
||||||
<el-row :gutter="5">
|
<div class="grid grid-cols-1 gap-1">
|
||||||
<el-tag style="font-weight: 500">{{ $t('home.baseInfo') }}:</el-tag>
|
<el-tag class="font-medium !justify-start w-max">{{ $t('home.baseInfo') }}:</el-tag>
|
||||||
</el-row>
|
<el-tag class="!justify-start w-max">{{ $t('home.mount') }}: {{ item.path }}</el-tag>
|
||||||
<el-row :gutter="5">
|
<el-tag class="!justify-start w-max">{{ $t('commons.table.type') }}: {{ item.type }}</el-tag>
|
||||||
<el-tag class="nameTag">{{ $t('home.mount') }}: {{ item.path }}</el-tag>
|
<el-tag class="!justify-start w-max">{{ $t('home.fileSystem') }}: {{ item.device }}</el-tag>
|
||||||
</el-row>
|
</div>
|
||||||
<el-row :gutter="5">
|
<div class="grid grid-cols-2 gap-2 mt-1">
|
||||||
<el-tag class="tagClass">{{ $t('commons.table.type') }}: {{ item.type }}</el-tag>
|
<div class="grid grid-cols-1 gap-1">
|
||||||
</el-row>
|
<el-tag class="font-medium !justify-start w-max">Inode:</el-tag>
|
||||||
<el-row :gutter="5">
|
<el-tag class="!justify-start">{{ $t('home.total') }}: {{ item.inodesTotal }}</el-tag>
|
||||||
<el-tag class="tagClass">{{ $t('home.fileSystem') }}: {{ item.device }}</el-tag>
|
<el-tag class="!justify-start">{{ $t('home.used') }}: {{ item.inodesUsed }}</el-tag>
|
||||||
</el-row>
|
<el-tag class="!justify-start">{{ $t('home.free') }}: {{ item.inodesFree }}</el-tag>
|
||||||
<el-row :gutter="5">
|
<el-tag class="!justify-start">
|
||||||
<el-col :span="12">
|
|
||||||
<div><el-tag class="tagClass" style="font-weight: 500">Inode:</el-tag></div>
|
|
||||||
<el-tag class="tagClass">{{ $t('home.total') }}: {{ item.inodesTotal }}</el-tag>
|
|
||||||
<el-tag class="tagClass">{{ $t('home.used') }}: {{ item.inodesUsed }}</el-tag>
|
|
||||||
<el-tag class="tagClass">{{ $t('home.free') }}: {{ item.inodesFree }}</el-tag>
|
|
||||||
<el-tag class="tagClass">
|
|
||||||
{{ $t('home.percent') }}: {{ formatNumber(item.inodesUsedPercent) }}%
|
{{ $t('home.percent') }}: {{ formatNumber(item.inodesUsedPercent) }}%
|
||||||
</el-tag>
|
</el-tag>
|
||||||
</el-col>
|
</div>
|
||||||
|
<div class="grid grid-cols-1 gap-1">
|
||||||
<el-col :span="12">
|
<el-tag class="font-medium !justify-start w-max">{{ $t('monitor.disk') }}:</el-tag>
|
||||||
<div>
|
<el-tag class="!justify-start">
|
||||||
<el-tag style="margin-top: 3px; font-weight: 500">{{ $t('monitor.disk') }}:</el-tag>
|
{{ $t('home.total') }}: {{ computeSize(item.total) }}
|
||||||
</div>
|
</el-tag>
|
||||||
<el-tag class="tagClass">{{ $t('home.total') }}: {{ computeSize(item.total) }}</el-tag>
|
<el-tag class="!justify-start">{{ $t('home.used') }}: {{ computeSize(item.used) }}</el-tag>
|
||||||
<el-tag class="tagClass">{{ $t('home.used') }}: {{ computeSize(item.used) }}</el-tag>
|
<el-tag class="!justify-start">{{ $t('home.free') }}: {{ computeSize(item.free) }}</el-tag>
|
||||||
<el-tag class="tagClass">{{ $t('home.free') }}: {{ computeSize(item.free) }}</el-tag>
|
<el-tag class="!justify-start">
|
||||||
<el-tag class="tagClass">
|
|
||||||
{{ $t('home.percent') }}: {{ formatNumber(item.usedPercent) }}%
|
{{ $t('home.percent') }}: {{ formatNumber(item.usedPercent) }}%
|
||||||
</el-tag>
|
</el-tag>
|
||||||
</el-col>
|
</div>
|
||||||
</el-row>
|
</div>
|
||||||
<template #reference>
|
<template #reference>
|
||||||
<v-charts
|
<v-charts
|
||||||
height="160px"
|
height="160px"
|
||||||
@ -164,31 +168,19 @@
|
|||||||
<template v-for="(item, index) of currentInfo.gpuData" :key="index">
|
<template v-for="(item, index) of currentInfo.gpuData" :key="index">
|
||||||
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center" v-if="isShow('gpu', index)">
|
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center" v-if="isShow('gpu', index)">
|
||||||
<el-popover placement="bottom" :width="250" trigger="hover" v-if="chartsOption[`gpu${index}`]">
|
<el-popover placement="bottom" :width="250" trigger="hover" v-if="chartsOption[`gpu${index}`]">
|
||||||
<el-row :gutter="5">
|
<div class="grid grid-cols-1 gap-1">
|
||||||
<el-tag style="font-weight: 500">{{ $t('home.baseInfo') }}:</el-tag>
|
<el-tag class="font-medium !justify-start w-max">{{ $t('home.baseInfo') }}:</el-tag>
|
||||||
</el-row>
|
<el-tag class="!justify-start">{{ $t('monitor.gpuUtil') }}: {{ item.gpuUtil }}</el-tag>
|
||||||
<el-row :gutter="5">
|
<el-tag class="!justify-start">
|
||||||
<el-tag class="tagClass">{{ $t('monitor.gpuUtil') }}: {{ item.gpuUtil }}</el-tag>
|
|
||||||
</el-row>
|
|
||||||
<el-row :gutter="5">
|
|
||||||
<el-tag class="tagClass">
|
|
||||||
{{ $t('monitor.temperature') }}: {{ item.temperature.replaceAll('C', '°C') }}
|
{{ $t('monitor.temperature') }}: {{ item.temperature.replaceAll('C', '°C') }}
|
||||||
</el-tag>
|
</el-tag>
|
||||||
</el-row>
|
<el-tag class="!justify-start">
|
||||||
<el-row :gutter="5">
|
|
||||||
<el-tag class="tagClass">
|
|
||||||
{{ $t('monitor.performanceState') }}: {{ item.performanceState }}
|
{{ $t('monitor.performanceState') }}: {{ item.performanceState }}
|
||||||
</el-tag>
|
</el-tag>
|
||||||
</el-row>
|
<el-tag class="!justify-start">{{ $t('monitor.powerUsage') }}: {{ item.powerUsage }}</el-tag>
|
||||||
<el-row :gutter="5">
|
<el-tag class="!justify-start">{{ $t('monitor.memoryUsage') }}: {{ item.memoryUsage }}</el-tag>
|
||||||
<el-tag class="tagClass">{{ $t('monitor.powerUsage') }}: {{ item.powerUsage }}</el-tag>
|
<el-tag class="!justify-start">{{ $t('monitor.fanSpeed') }}: {{ item.fanSpeed }}</el-tag>
|
||||||
</el-row>
|
</div>
|
||||||
<el-row :gutter="5">
|
|
||||||
<el-tag class="tagClass">{{ $t('monitor.memoryUsage') }}: {{ item.memoryUsage }}</el-tag>
|
|
||||||
</el-row>
|
|
||||||
<el-row :gutter="5">
|
|
||||||
<el-tag class="tagClass">{{ $t('monitor.fanSpeed') }}: {{ item.fanSpeed }}</el-tag>
|
|
||||||
</el-row>
|
|
||||||
<template #reference>
|
<template #reference>
|
||||||
<v-charts
|
<v-charts
|
||||||
@click="goGPU()"
|
@click="goGPU()"
|
||||||
@ -209,23 +201,15 @@
|
|||||||
<template v-for="(item, index) of currentInfo.xpuData" :key="index">
|
<template v-for="(item, index) of currentInfo.xpuData" :key="index">
|
||||||
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center" v-if="isShow('xpu', index)">
|
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center" v-if="isShow('xpu', index)">
|
||||||
<el-popover placement="bottom" :width="250" trigger="hover" v-if="chartsOption[`xpu${index}`]">
|
<el-popover placement="bottom" :width="250" trigger="hover" v-if="chartsOption[`xpu${index}`]">
|
||||||
<el-row :gutter="5">
|
<div class="grid grid-cols-1 gap-1">
|
||||||
<el-tag style="font-weight: 500">{{ $t('home.baseInfo') }}:</el-tag>
|
<el-tag class="font-medium !justify-start w-max">{{ $t('home.baseInfo') }}:</el-tag>
|
||||||
</el-row>
|
<el-tag class="!justify-start">{{ $t('monitor.gpuUtil') }}: {{ item.memoryUtil }}</el-tag>
|
||||||
<el-row :gutter="5">
|
<el-tag class="!justify-start">{{ $t('monitor.temperature') }}: {{ item.temperature }}</el-tag>
|
||||||
<el-tag class="tagClass">{{ $t('monitor.gpuUtil') }}: {{ item.memoryUtil }}</el-tag>
|
<el-tag class="!justify-start">{{ $t('monitor.powerUsage') }}: {{ item.power }}</el-tag>
|
||||||
</el-row>
|
<el-tag class="!justify-start">
|
||||||
<el-row :gutter="5">
|
|
||||||
<el-tag class="tagClass">{{ $t('monitor.temperature') }}: {{ item.temperature }}</el-tag>
|
|
||||||
</el-row>
|
|
||||||
<el-row :gutter="5">
|
|
||||||
<el-tag class="tagClass">{{ $t('monitor.powerUsage') }}: {{ item.power }}</el-tag>
|
|
||||||
</el-row>
|
|
||||||
<el-row :gutter="5">
|
|
||||||
<el-tag class="tagClass">
|
|
||||||
{{ $t('monitor.memoryUsage') }}: {{ item.memoryUsed }}/{{ item.memory }}
|
{{ $t('monitor.memoryUsage') }}: {{ item.memoryUsed }}/{{ item.memory }}
|
||||||
</el-tag>
|
</el-tag>
|
||||||
</el-row>
|
</div>
|
||||||
<template #reference>
|
<template #reference>
|
||||||
<v-charts
|
<v-charts
|
||||||
@click="goGPU()"
|
@click="goGPU()"
|
||||||
@ -243,12 +227,21 @@
|
|||||||
<span class="input-help" v-else>{{ item.deviceName }}</span>
|
<span class="input-help" v-else>{{ item.deviceName }}</span>
|
||||||
</el-col>
|
</el-col>
|
||||||
</template>
|
</template>
|
||||||
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center" v-if="totalCount > 5">
|
<el-col
|
||||||
<el-button v-if="!showMore" link type="primary" @click="changeShowMore(true)" class="buttonClass">
|
:xs="12"
|
||||||
|
:sm="12"
|
||||||
|
:md="6"
|
||||||
|
:lg="6"
|
||||||
|
:xl="6"
|
||||||
|
v-if="totalCount > 5"
|
||||||
|
align="center"
|
||||||
|
class="!flex !justify-center !items-center"
|
||||||
|
>
|
||||||
|
<el-button v-if="!showMore" link type="primary" @click="changeShowMore(true)" class="text-sm">
|
||||||
{{ $t('tabs.more') }}
|
{{ $t('tabs.more') }}
|
||||||
<el-icon><Bottom /></el-icon>
|
<el-icon><Bottom /></el-icon>
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button v-if="showMore" type="primary" link @click="changeShowMore(false)" class="buttonClass">
|
<el-button v-if="showMore" type="primary" link @click="changeShowMore(false)" class="text-sm">
|
||||||
{{ $t('tabs.hide') }}
|
{{ $t('tabs.hide') }}
|
||||||
<el-icon><Top /></el-icon>
|
<el-icon><Top /></el-icon>
|
||||||
</el-button>
|
</el-button>
|
||||||
@ -431,39 +424,6 @@ defineExpose({
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.status-container {
|
|
||||||
:deep(.el-button) {
|
|
||||||
min-width: 180px;
|
|
||||||
padding: 8px 16px;
|
|
||||||
height: auto;
|
|
||||||
white-space: normal;
|
|
||||||
line-height: 1.5;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-tag) {
|
|
||||||
min-width: 180px;
|
|
||||||
padding: 8px 12px;
|
|
||||||
height: auto;
|
|
||||||
white-space: normal;
|
|
||||||
line-height: 1.5;
|
|
||||||
margin: 4px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-button--primary) {
|
|
||||||
background-color: var(--el-color-primary);
|
|
||||||
&.is-plain {
|
|
||||||
background: var(--el-color-primary-light-9);
|
|
||||||
color: var(--el-color-primary);
|
|
||||||
&:hover {
|
|
||||||
background: var(--el-color-primary);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.cpuModeTag {
|
.cpuModeTag {
|
||||||
justify-content: flex-start !important;
|
justify-content: flex-start !important;
|
||||||
text-align: left !important;
|
text-align: left !important;
|
||||||
@ -476,13 +436,6 @@ defineExpose({
|
|||||||
margin-top: 3px;
|
margin-top: 3px;
|
||||||
margin-left: 1px;
|
margin-left: 1px;
|
||||||
}
|
}
|
||||||
.tagClass {
|
|
||||||
margin-top: 3px;
|
|
||||||
min-width: 140px;
|
|
||||||
white-space: normal;
|
|
||||||
height: auto;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tagCPUClass {
|
.tagCPUClass {
|
||||||
justify-content: flex-start !important;
|
justify-content: flex-start !important;
|
||||||
@ -492,24 +445,4 @@ defineExpose({
|
|||||||
margin-left: 1px;
|
margin-left: 1px;
|
||||||
width: 140px;
|
width: 140px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.buttonClass {
|
|
||||||
margin-top: 28%;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-help {
|
|
||||||
display: inline-block;
|
|
||||||
min-width: 120px;
|
|
||||||
white-space: normal;
|
|
||||||
line-height: 1.2;
|
|
||||||
padding: 2px 4px;
|
|
||||||
}
|
|
||||||
.nameTag {
|
|
||||||
margin-top: 3px;
|
|
||||||
height: auto;
|
|
||||||
display: inline-block;
|
|
||||||
white-space: normal;
|
|
||||||
line-height: 1.8;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -55,16 +55,13 @@
|
|||||||
<el-dropdown-item v-if="globalStore.isIntl" command="en">
|
<el-dropdown-item v-if="globalStore.isIntl" command="en">
|
||||||
English
|
English
|
||||||
</el-dropdown-item>
|
</el-dropdown-item>
|
||||||
<el-dropdown-item v-if="globalStore.isIntl" command="ru">
|
|
||||||
Русский
|
|
||||||
</el-dropdown-item>
|
|
||||||
<el-dropdown-item command="zh">中文(简体)</el-dropdown-item>
|
<el-dropdown-item command="zh">中文(简体)</el-dropdown-item>
|
||||||
<el-dropdown-item command="tw">中文(繁體)</el-dropdown-item>
|
<el-dropdown-item command="tw">中文(繁體)</el-dropdown-item>
|
||||||
<el-dropdown-item v-if="!globalStore.isIntl" command="en">
|
<el-dropdown-item v-if="!globalStore.isIntl" command="en">
|
||||||
English
|
English
|
||||||
</el-dropdown-item>
|
</el-dropdown-item>
|
||||||
</el-dropdown-menu>
|
</el-dropdown-menu>
|
||||||
<el-dropdown-item v-if="!globalStore.isIntl" command="ru">Русский</el-dropdown-item>
|
<el-dropdown-item command="ru">Русский</el-dropdown-item>
|
||||||
</template>
|
</template>
|
||||||
</el-dropdown>
|
</el-dropdown>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -2,183 +2,202 @@
|
|||||||
<div v-loading="loading">
|
<div v-loading="loading">
|
||||||
<LayoutContent :title="$t('setting.panel')" :divider="true">
|
<LayoutContent :title="$t('setting.panel')" :divider="true">
|
||||||
<template #main>
|
<template #main>
|
||||||
<el-form :model="form" :label-position="mobile ? 'top' : 'left'" label-width="auto">
|
<el-form
|
||||||
<el-row>
|
:model="form"
|
||||||
<el-col :span="1"><br /></el-col>
|
:label-position="mobile ? 'top' : 'left'"
|
||||||
<el-col :xs="24" :sm="20" :md="15" :lg="12" :xl="12">
|
label-width="auto"
|
||||||
<el-form-item :label="$t('setting.user')" prop="userName">
|
class="sm:w-full md:w-4/5 lg:w-3/5 2xl:w-1/2 max-w-max"
|
||||||
<el-input disabled v-model="form.userName">
|
>
|
||||||
<template #append>
|
<el-form-item :label="$t('setting.user')" prop="userName">
|
||||||
<el-button @click="onChangeUserName()" icon="Setting">
|
<el-input disabled v-model="form.userName">
|
||||||
{{ $t('commons.button.set') }}
|
<template #append>
|
||||||
</el-button>
|
<el-button @click="onChangeUserName()" icon="Setting">
|
||||||
</template>
|
{{ $t('commons.button.set') }}
|
||||||
</el-input>
|
</el-button>
|
||||||
</el-form-item>
|
</template>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item :label="$t('setting.passwd')" prop="password">
|
<el-form-item :label="$t('setting.passwd')" prop="password">
|
||||||
<el-input type="password" disabled v-model="form.password">
|
<el-input type="password" disabled v-model="form.password">
|
||||||
<template #append>
|
<template #append>
|
||||||
<el-button icon="Setting" @click="onChangePassword">
|
<el-button icon="Setting" @click="onChangePassword">
|
||||||
{{ $t('commons.button.set') }}
|
{{ $t('commons.button.set') }}
|
||||||
</el-button>
|
</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-input>
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item :label="$t('setting.theme')" prop="theme">
|
<el-form-item :label="$t('setting.theme')" prop="theme">
|
||||||
<div class="flex justify-between items-center gap-6">
|
<div class="flex justify-center items-center sm:gap-6 gap-2">
|
||||||
<el-radio-group @change="onSave('Theme', form.theme)" v-model="form.theme">
|
<div class="sm:contents hidden">
|
||||||
<el-radio-button value="light">
|
<el-radio-group @change="onSave('Theme', form.theme)" v-model="form.theme">
|
||||||
<span>{{ $t('setting.light') }}</span>
|
<el-radio-button value="light">
|
||||||
</el-radio-button>
|
<span>{{ $t('setting.light') }}</span>
|
||||||
<el-radio-button value="dark">
|
|
||||||
<span>{{ $t('setting.dark') }}</span>
|
|
||||||
</el-radio-button>
|
|
||||||
<el-radio-button value="auto">
|
|
||||||
<span>{{ $t('setting.auto') }}</span>
|
|
||||||
</el-radio-button>
|
|
||||||
</el-radio-group>
|
|
||||||
<el-button
|
|
||||||
v-if="isProductPro"
|
|
||||||
@click="onChangeThemeColor"
|
|
||||||
icon="Setting"
|
|
||||||
class="!h-[34px]"
|
|
||||||
>
|
|
||||||
<span>{{ $t('container.custom') }}</span>
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item :label="$t('setting.menuTabs')" prop="menuTabs">
|
|
||||||
<el-radio-group @change="onSave('MenuTabs', form.menuTabs)" v-model="form.menuTabs">
|
|
||||||
<el-radio-button value="enable">
|
|
||||||
<span>{{ $t('commons.button.enable') }}</span>
|
|
||||||
</el-radio-button>
|
</el-radio-button>
|
||||||
<el-radio-button value="disable">
|
<el-radio-button value="dark">
|
||||||
<span>{{ $t('commons.button.disable') }}</span>
|
<span>{{ $t('setting.dark') }}</span>
|
||||||
|
</el-radio-button>
|
||||||
|
<el-radio-button value="auto">
|
||||||
|
<span>{{ $t('setting.auto') }}</span>
|
||||||
</el-radio-button>
|
</el-radio-button>
|
||||||
</el-radio-group>
|
</el-radio-group>
|
||||||
</el-form-item>
|
</div>
|
||||||
|
<div class="sm:hidden block w-32 !h-[33.5px]">
|
||||||
<el-form-item :label="$t('setting.title')" prop="panelName">
|
<el-select @change="onSave('Theme', form.theme)" v-model="form.theme">
|
||||||
<el-input disabled v-model="form.panelName">
|
<el-option key="light" value="light" :label="$t('setting.light')">
|
||||||
<template #append>
|
{{ $t('setting.light') }}
|
||||||
<el-button icon="Setting" @click="onChangeTitle">
|
</el-option>
|
||||||
{{ $t('commons.button.set') }}
|
<el-option key="dark" value="dark" :label="$t('setting.dark')">
|
||||||
</el-button>
|
{{ $t('setting.dark') }}
|
||||||
</template>
|
</el-option>
|
||||||
</el-input>
|
<el-option key="auto" value="auto" :label="$t('setting.auto')">
|
||||||
</el-form-item>
|
{{ $t('setting.auto') }}
|
||||||
|
</el-option>
|
||||||
<el-form-item :label="$t('setting.language')" prop="language">
|
</el-select>
|
||||||
<el-radio-group
|
</div>
|
||||||
style="width: 100%"
|
<div>
|
||||||
@change="onSave('Language', form.language)"
|
<el-button
|
||||||
v-model="form.language"
|
v-if="isProductPro"
|
||||||
|
@click="onChangeThemeColor"
|
||||||
|
icon="Setting"
|
||||||
|
class="!h-[32px] sm:!h-[33.5px]"
|
||||||
>
|
>
|
||||||
<el-radio v-if="globalStore.isIntl" value="en">English</el-radio>
|
<span>{{ $t('container.custom') }}</span>
|
||||||
<el-radio v-if="globalStore.isIntl" value="ru">Русский</el-radio>
|
</el-button>
|
||||||
<el-radio value="zh">中文(简体)</el-radio>
|
</div>
|
||||||
<el-radio value="tw">中文(繁體)</el-radio>
|
</div>
|
||||||
<el-radio v-if="!globalStore.isIntl" value="en">English</el-radio>
|
</el-form-item>
|
||||||
<el-radio v-if="!globalStore.isIntl" value="ru">Русский</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item :label="$t('setting.sessionTimeout')" prop="sessionTimeout">
|
<el-form-item :label="$t('setting.menuTabs')" prop="menuTabs">
|
||||||
<el-input disabled v-model.number="form.sessionTimeout">
|
<el-radio-group @change="onSave('MenuTabs', form.menuTabs)" v-model="form.menuTabs">
|
||||||
<template #append>
|
<el-radio-button value="enable">
|
||||||
<el-button @click="onChangeTimeout" icon="Setting">
|
<span>{{ $t('commons.button.enable') }}</span>
|
||||||
{{ $t('commons.button.set') }}
|
</el-radio-button>
|
||||||
</el-button>
|
<el-radio-button value="disable">
|
||||||
</template>
|
<span>{{ $t('commons.button.disable') }}</span>
|
||||||
</el-input>
|
</el-radio-button>
|
||||||
<span class="input-help">
|
</el-radio-group>
|
||||||
{{ $t('setting.sessionTimeoutHelper', [form.sessionTimeout]) }}
|
</el-form-item>
|
||||||
</span>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item :label="$t('setting.defaultNetwork')">
|
<el-form-item :label="$t('setting.title')" prop="panelName">
|
||||||
<el-input disabled v-model="form.defaultNetworkVal">
|
<el-input disabled v-model="form.panelName">
|
||||||
<template #append>
|
<template #append>
|
||||||
<el-button v-show="!show" @click="onChangeNetwork" icon="Setting">
|
<el-button icon="Setting" @click="onChangeTitle">
|
||||||
{{ $t('commons.button.set') }}
|
{{ $t('commons.button.set') }}
|
||||||
</el-button>
|
</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-input>
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item :label="$t('setting.systemIP')" prop="systemIP">
|
<el-form-item :label="$t('setting.language')" prop="language">
|
||||||
<el-input disabled v-if="form.systemIP" v-model="form.systemIP">
|
<el-select
|
||||||
<template #append>
|
class="sm:!w-1/2 !w-full"
|
||||||
<el-button @click="onChangeSystemIP" icon="Setting">
|
@change="onSave('Language', form.language)"
|
||||||
{{ $t('commons.button.set') }}
|
v-model="form.language"
|
||||||
</el-button>
|
>
|
||||||
</template>
|
<el-option
|
||||||
</el-input>
|
v-for="option in languageOptions"
|
||||||
<el-input disabled v-if="!form.systemIP" v-model="unset">
|
:key="option.value"
|
||||||
<template #append>
|
:value="option.value"
|
||||||
<el-button @click="onChangeSystemIP" icon="Setting">
|
:label="option.label"
|
||||||
{{ $t('commons.button.set') }}
|
>
|
||||||
</el-button>
|
{{ option.label }}
|
||||||
</template>
|
</el-option>
|
||||||
</el-input>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item :label="$t('setting.proxy')" prop="proxyShow">
|
<el-form-item :label="$t('setting.sessionTimeout')" prop="sessionTimeout">
|
||||||
<el-input disabled v-model="form.proxyShow">
|
<el-input disabled v-model.number="form.sessionTimeout">
|
||||||
<template #append>
|
<template #append>
|
||||||
<el-button @click="onChangeProxy" icon="Setting">
|
<el-button @click="onChangeTimeout" icon="Setting">
|
||||||
{{ $t('commons.button.set') }}
|
{{ $t('commons.button.set') }}
|
||||||
</el-button>
|
</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-input>
|
</el-input>
|
||||||
</el-form-item>
|
<span class="input-help">
|
||||||
|
{{ $t('setting.sessionTimeoutHelper', [form.sessionTimeout]) }}
|
||||||
|
</span>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item :label="$t('setting.apiInterface')" prop="apiInterface">
|
<el-form-item :label="$t('setting.defaultNetwork')">
|
||||||
<el-switch
|
<el-input disabled v-model="form.defaultNetworkVal">
|
||||||
@change="onChangeApiInterfaceStatus"
|
<template #append>
|
||||||
v-model="form.apiInterfaceStatus"
|
<el-button v-show="!show" @click="onChangeNetwork" icon="Setting">
|
||||||
active-value="enable"
|
{{ $t('commons.button.set') }}
|
||||||
inactive-value="disable"
|
</el-button>
|
||||||
/>
|
</template>
|
||||||
<span class="input-help">{{ $t('setting.apiInterfaceHelper') }}</span>
|
</el-input>
|
||||||
<div v-if="form.apiInterfaceStatus === 'enable'">
|
</el-form-item>
|
||||||
<div>
|
|
||||||
<el-button link type="primary" @click="onChangeApiInterfaceStatus">
|
|
||||||
{{ $t('commons.button.view') }}
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item :label="$t('setting.developerMode')" prop="developerMode">
|
<el-form-item :label="$t('setting.systemIP')" prop="systemIP">
|
||||||
<el-radio-group
|
<el-input disabled v-if="form.systemIP" v-model="form.systemIP">
|
||||||
@change="onSave('DeveloperMode', form.developerMode)"
|
<template #append>
|
||||||
v-model="form.developerMode"
|
<el-button @click="onChangeSystemIP" icon="Setting">
|
||||||
>
|
{{ $t('commons.button.set') }}
|
||||||
<el-radio-button value="enable">
|
</el-button>
|
||||||
<span>{{ $t('commons.button.enable') }}</span>
|
</template>
|
||||||
</el-radio-button>
|
</el-input>
|
||||||
<el-radio-button value="disable">
|
<el-input disabled v-if="!form.systemIP" v-model="unset">
|
||||||
<span>{{ $t('commons.button.disable') }}</span>
|
<template #append>
|
||||||
</el-radio-button>
|
<el-button @click="onChangeSystemIP" icon="Setting">
|
||||||
</el-radio-group>
|
{{ $t('commons.button.set') }}
|
||||||
<span class="input-help">{{ $t('setting.developerModeHelper') }}</span>
|
</el-button>
|
||||||
</el-form-item>
|
</template>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item :label="$t('setting.advancedMenuHide')">
|
<el-form-item :label="$t('setting.proxy')" prop="proxyShow">
|
||||||
<el-input disabled v-model="form.proHideMenus">
|
<el-input disabled v-model="form.proxyShow">
|
||||||
<template #append>
|
<template #append>
|
||||||
<el-button v-show="!show" @click="onChangeHideMenus" icon="Setting">
|
<el-button @click="onChangeProxy" icon="Setting">
|
||||||
{{ $t('commons.button.set') }}
|
{{ $t('commons.button.set') }}
|
||||||
</el-button>
|
</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-input>
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
|
||||||
</el-row>
|
<el-form-item :label="$t('setting.apiInterface')" prop="apiInterface">
|
||||||
|
<el-switch
|
||||||
|
@change="onChangeApiInterfaceStatus"
|
||||||
|
v-model="form.apiInterfaceStatus"
|
||||||
|
active-value="enable"
|
||||||
|
inactive-value="disable"
|
||||||
|
/>
|
||||||
|
<span class="input-help">{{ $t('setting.apiInterfaceHelper') }}</span>
|
||||||
|
<div v-if="form.apiInterfaceStatus === 'enable'">
|
||||||
|
<div>
|
||||||
|
<el-button link type="primary" @click="onChangeApiInterfaceStatus">
|
||||||
|
{{ $t('commons.button.view') }}
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item :label="$t('setting.developerMode')" prop="developerMode">
|
||||||
|
<el-radio-group
|
||||||
|
@change="onSave('DeveloperMode', form.developerMode)"
|
||||||
|
v-model="form.developerMode"
|
||||||
|
>
|
||||||
|
<el-radio-button value="enable">
|
||||||
|
<span>{{ $t('commons.button.enable') }}</span>
|
||||||
|
</el-radio-button>
|
||||||
|
<el-radio-button value="disable">
|
||||||
|
<span>{{ $t('commons.button.disable') }}</span>
|
||||||
|
</el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
<span class="input-help">{{ $t('setting.developerModeHelper') }}</span>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item :label="$t('setting.advancedMenuHide')">
|
||||||
|
<el-input disabled v-model="form.proHideMenus">
|
||||||
|
<template #append>
|
||||||
|
<el-button v-show="!show" @click="onChangeHideMenus" icon="Setting">
|
||||||
|
{{ $t('commons.button.set') }}
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</template>
|
</template>
|
||||||
</LayoutContent>
|
</LayoutContent>
|
||||||
@ -294,6 +313,17 @@ interface Node {
|
|||||||
children?: Node[];
|
children?: Node[];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const languageOptions = ref([
|
||||||
|
{ value: 'zh', label: '中文(简体)' },
|
||||||
|
{ value: 'tw', label: '中文(繁體)' },
|
||||||
|
...(!globalStore.isIntl ? [{ value: 'en', label: 'English' }] : []),
|
||||||
|
{ value: 'ru', label: 'Русский' },
|
||||||
|
]);
|
||||||
|
|
||||||
|
if (globalStore.isIntl) {
|
||||||
|
languageOptions.value.unshift({ value: 'en', label: 'English' });
|
||||||
|
}
|
||||||
|
|
||||||
const search = async () => {
|
const search = async () => {
|
||||||
const res = await getSettingInfo();
|
const res = await getSettingInfo();
|
||||||
form.userName = res.data.userName;
|
form.userName = res.data.userName;
|
||||||
@ -491,3 +521,9 @@ onMounted(() => {
|
|||||||
getSystemAvailable();
|
getSystemAvailable();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
:deep(.el-radio-group) {
|
||||||
|
min-width: max-content;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user