diff --git a/public/config.js b/public/config.js index 0d3dbc1..38f4db3 100644 --- a/public/config.js +++ b/public/config.js @@ -4,6 +4,7 @@ window.$$nazhuaConfig = { // infinityCycle: '长期有效', // 无限周期名称 // buyBtnText: '购买', // 购买按钮文案 // listServerStatusType: 'progress', // 服务器状态类型--列表 + // listServerRealTimeShowLoad: false, // 列表显示服务器实时负载 // detailServerStatusType: 'progress', // 服务器状态类型--详情页 // disableSarasaTermSC: false, // 禁用Sarasa Term SC字体 // hideWorldMap: false, // 隐藏地图 diff --git a/src/views/components/server-list/server-list-item.vue b/src/views/components/server-list/server-list-item.vue index fb19b84..d04baa9 100644 --- a/src/views/components/server-list/server-list-item.vue +++ b/src/views/components/server-list/server-list-item.vue @@ -49,6 +49,7 @@ hostUtils.getPlatformLogoIconClassName(props.info?.Host?.Platform)); +const serverRealTimeListTpls = computed(() => { + if (config.nazhua?.listServerRealTimeShowLoad) { + return 'duration,load,transfer,speeds'; + } + return 'duration,transfer,inSpeed,outSpeed'; +}); + function openDetail() { router.push({ name: 'ServerDetail', diff --git a/src/views/components/server/server-real-time.vue b/src/views/components/server/server-real-time.vue index 3ed2b7b..ef8c4bc 100644 --- a/src/views/components/server/server-real-time.vue +++ b/src/views/components/server/server-real-time.vue @@ -7,10 +7,36 @@ :class="`server-real-time--${item.key}`" >
- {{ item?.value || '-' }} - {{ item?.value ? item?.unit : '' }} +
+ + + {{ subItem.label }} + + + {{ subItem.show ? subItem?.value : '-' }} + {{ subItem.show ? subItem?.unit : '' }} + + +
+
- {{ item.label }} + + {{ item.label }} + @@ -29,6 +55,10 @@ const props = defineProps({ type: Object, default: () => ({}), }, + serverRealTimeListTpls: { + type: String, + default: undefined, + }, }); const currentTime = inject('currentTime', { @@ -40,6 +70,7 @@ const { } = handleServerRealTime({ props, currentTime, + serverRealTimeListTpls: props.serverRealTimeListTpls, }); @@ -78,6 +109,51 @@ const { font-size: var(--real-time-label-font-size, 14px); color: #ddd; } + + .item-content-sub-group { + flex: 1; + display: flex; + flex-direction: column; + justify-content: space-between; + + .item-content-sub-item { + flex: 1; + display: flex; + align-items: center; + gap: 2px; + } + + .item-content-sub-content { + display: flex; + align-items: center; + } + + .item-value { + line-height: 1em; + font-size: var(--real-time-label-font-size, 14px); + } + + .item-text { + line-height: 1em; + font-size: var(--real-time-label-font-size, 14px); + } + + .item-label { + line-height: 1em; + font-size: var(--real-time-label-font-size, 14px); + } + + .item-content-sub-item--speeds-in { + .item-value { + color: var(--net-speed-in-color); + } + } + .item-content-sub-item--speeds-out { + .item-value { + color: var(--net-speed-out-color); + } + } + } } .server-real-time--duration { @@ -90,7 +166,8 @@ const { color: var(--transfer-color); } } - .server-real-time--inSpeed { + .server-real-time--inSpeed, + .server-real-time--speed { .item-value { color: var(--net-speed-in-color); } diff --git a/src/views/composable/server-real-time.js b/src/views/composable/server-real-time.js index e01cdbe..87079e5 100644 --- a/src/views/composable/server-real-time.js +++ b/src/views/composable/server-real-time.js @@ -174,6 +174,7 @@ export default (params) => { label: '在线', value: duration.value?.value, unit: duration.value?.unit, + show: validate.isSet(duration.value?.value), }; case 'transfer': return { @@ -181,6 +182,7 @@ export default (params) => { label: `${transfer.value.statTypeLabel}流量`, value: transfer.value?.value, unit: transfer.value?.unit, + show: validate.isSet(transfer.value?.value), }; case 'inSpeed': return { @@ -188,6 +190,7 @@ export default (params) => { label: '入网', value: netInSpeed.value?.value, unit: netInSpeed.value?.unit, + show: validate.isSet(netInSpeed.value?.value), }; case 'outSpeed': return { @@ -195,6 +198,37 @@ export default (params) => { label: '出网', value: netOutSpeed.value?.value, unit: netOutSpeed.value?.unit, + show: validate.isSet(netOutSpeed.value?.value), + }; + case 'speeds': + return { + key, + label: '网速', + values: [ + { + key: 'in', + label: '入网', + value: netInSpeed.value?.value, + unit: netInSpeed.value?.unit, + show: validate.isSet(netInSpeed.value?.value), + }, + { + key: 'out', + label: '出网', + value: netOutSpeed.value?.value, + unit: netOutSpeed.value?.unit, + show: validate.isSet(netOutSpeed.value?.value), + }, + ], + show: validate.isSet(netInSpeed.value?.value) && validate.isSet(netOutSpeed.value?.value), + }; + case 'load': + return { + key, + label: '负载', + value: (props.info.State?.Load1 || 0).toFixed(2) * 1, + unit: '', + show: validate.isSet(props.info.State?.Load1), }; default: }