From d11deece541c2d6472915ff1fd4025090aad6875 Mon Sep 17 00:00:00 2001 From: hi2hi Date: Wed, 26 Feb 2025 04:08:39 +0000 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=E6=96=B0=E5=A2=9E=E7=AE=80?= =?UTF-8?q?=E5=8D=95=E8=89=B2=E7=B3=BB=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/config.js | 3 +- src/assets/scss/variables.scss | 35 +++- src/components/charts/donut.js | 152 +++++++++--------- src/config/index.js | 10 ++ .../server-list/server-option-box.vue | 17 +- .../components/server/server-status-donut.vue | 6 +- src/views/composable/server-status.js | 44 ++++- src/views/home.vue | 1 + 8 files changed, 181 insertions(+), 87 deletions(-) diff --git a/public/config.js b/public/config.js index 70fe8af..147fffa 100644 --- a/public/config.js +++ b/public/config.js @@ -15,7 +15,8 @@ window.$$nazhuaConfig = { // listServerStatusType: 'progress', // 服务器状态类型--列表 // listServerRealTimeShowLoad: true, // 列表显示服务器实时负载 // detailServerStatusType: 'progress', // 服务器状态类型--详情页 - serverStatusLinear: true, // 服务器状态渐变线性显示 + // simpleColorMode: true, // 服务器状态纯色显示 + serverStatusLinear: true, // 服务器状态渐变线性显示 - 与pureColorMode互斥 // disableSarasaTermSC: true, // 禁用Sarasa Term SC字体 // hideWorldMap: false, // 隐藏地图 // hideHomeWorldMap: false, // 隐藏首页地图 diff --git a/src/assets/scss/variables.scss b/src/assets/scss/variables.scss index 28ff98a..01e0530 100644 --- a/src/assets/scss/variables.scss +++ b/src/assets/scss/variables.scss @@ -26,8 +26,15 @@ --list-item-price-color: #eee; --list-item-buy-link-color: #ffc300; --list-item-buy-link-color-hover: #ff9900; - --public-note-tag-color: #ddd; - --public-note-tag-bg: linear-gradient(125deg, #8f94fb, #4e54c8); + --public-note-tag-color: #ccc; + --public-note-tag-bg: linear-gradient(125deg, #676ef7, #41459c); + + --option-high-color: #ff7500; + --option-high-color-active: rgba(255, 177, 0, 0.75); + + --server-status-value-color: #a1eafb; + --server-status-label-color: #ddd; + --server-status-content-color: #eee; // 针对1440px以下的屏幕 @media screen and (max-width: 1440px) { @@ -54,3 +61,27 @@ --detail-container-width: 100vw; } } + +body.simple-color-mode { + + --world-map-point-color: #cbf1f5; + + --simple-color: #ccc; + --duration-color: var(--simple-color); + --transfer-color: var(--simple-color); + --transfer-in-color: var(--transfer-color); + --transfer-out-color: var(--simple-color); + --net-speed-in-color: var(--simple-color); + --net-speed-out-color: var(--simple-color); + + --list-item-price-color: #eee; + --list-item-buy-link-color: var(--simple-color); + --list-item-buy-link-color-hover: draken(#cbf1f5, 10%); + --public-note-tag-color: #eee; + --public-note-tag-bg: transparent; + + --option-high-color: rgb(93, 122, 126); + --option-high-color-active: rgba(93, 122, 126, 0.75); + + --server-status-value-color: var(--simple-color); +} diff --git a/src/components/charts/donut.js b/src/components/charts/donut.js index a009836..eca45fc 100644 --- a/src/components/charts/donut.js +++ b/src/components/charts/donut.js @@ -35,80 +35,86 @@ function handleColor(color) { return color; } -export default (used, total, itemColors, size = 100) => ({ - angleAxis: { - max: total, // 满分 - // 隐藏刻度线 - axisLine: { - show: false, +export default (used, total, itemColors, size = 100) => { + const isLinear = ( + (config.nazhua.serverStatusLinear || config.nazhua.lightBackground) + && !config.nazhua.simpleColorMode + ); + return { + angleAxis: { + max: total, // 满分 + // 隐藏刻度线 + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + axisLabel: { + show: false, + }, + splitLine: { + show: false, + }, }, - axisTick: { - show: false, + radiusAxis: { + type: 'category', + // 隐藏刻度线 + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + axisLabel: { + show: false, + }, + splitLine: { + show: false, + }, }, - axisLabel: { - show: false, + polar: { + center: ['50%', '50%'], + radius: ['50%', '100%'], }, - splitLine: { - show: false, - }, - }, - radiusAxis: { - type: 'category', - // 隐藏刻度线 - axisLine: { - show: false, - }, - axisTick: { - show: false, - }, - axisLabel: { - show: false, - }, - splitLine: { - show: false, - }, - }, - polar: { - center: ['50%', '50%'], - radius: ['50%', '100%'], - }, - series: [{ - type: 'bar', - data: [{ - value: used, + series: [{ + type: 'bar', + data: [{ + value: used, + }], + itemStyle: { + color: typeof itemColors === 'string' ? itemColors : handleColor(itemColors?.used), + borderRadius: 5, + shadowColor: (() => { + if (config.nazhua.serverStatusLinear) { + return 'rgba(0, 0, 0, 0.5)'; + } + if (config.nazhua.lightBackground) { + return 'rgba(0, 0, 0, 0.2)'; + } + return undefined; + })(), + shadowBlur: isLinear ? 10 : undefined, + }, + coordinateSystem: 'polar', + cursor: 'default', + roundCap: true, + barWidth: Math.ceil((size / 100) * 10), + barGap: '-100%', // 两环重叠 + z: 10, + }, { + type: 'bar', + data: [{ + value: total, + }], + itemStyle: { + color: handleColor(itemColors?.total) || 'rgba(255, 255, 255, 0.2)', + }, + coordinateSystem: 'polar', + cursor: 'default', + barWidth: Math.ceil((size / 100) * 10), + barGap: '-100%', // 两环重叠 + z: 5, }], - itemStyle: { - color: typeof itemColors === 'string' ? itemColors : handleColor(itemColors?.used), - borderRadius: 5, - shadowColor: (() => { - if (config.nazhua.serverStatusLinear) { - return 'rgba(0, 0, 0, 0.5)'; - } - if (config.nazhua.lightBackground) { - return 'rgba(0, 0, 0, 0.2)'; - } - return undefined; - })(), - shadowBlur: (config.nazhua.serverStatusLinear || config.nazhua.lightBackground) ? 10 : undefined, - }, - coordinateSystem: 'polar', - cursor: 'default', - roundCap: true, - barWidth: Math.ceil((size / 100) * 10), - barGap: '-100%', // 两环重叠 - z: 10, - }, { - type: 'bar', - data: [{ - value: total, - }], - itemStyle: { - color: handleColor(itemColors?.total) || 'rgba(255, 255, 255, 0.2)', - }, - coordinateSystem: 'polar', - cursor: 'default', - barWidth: Math.ceil((size / 100) * 10), - barGap: '-100%', // 两环重叠 - z: 5, - }], -}); + }; +}; diff --git a/src/config/index.js b/src/config/index.js index 7da1696..d2125fe 100644 --- a/src/config/index.js +++ b/src/config/index.js @@ -33,6 +33,15 @@ if (config.nazhua.nezhaVersion) { config.init = true; } +function setColorMode() { + if (config.nazhua.simpleColorMode) { + document.body.classList.add('simple-color-mode'); + } else { + document.body.classList.remove('simple-color-mode'); + } +} +setColorMode(); + /** * 替换网站图标 */ @@ -54,6 +63,7 @@ export function mergeNazhuaConfig(customConfig) { config.nazhua[key] = customConfig[key]; }); replaceFavicon(); + setColorMode(); } // 暴露合并配置方法 window.$mergeNazhuaConfig = mergeNazhuaConfig; diff --git a/src/views/components/server-list/server-option-box.vue b/src/views/components/server-list/server-option-box.vue index 0cb2c57..e3c0662 100644 --- a/src/views/components/server-list/server-option-box.vue +++ b/src/views/components/server-list/server-option-box.vue @@ -3,6 +3,7 @@ class="server-option-box" :class="{ 'server-option-box--light-background': lightBackground, + 'server-option-box--mobile-hide': !mobileShow, }" >
{ const { props, @@ -15,7 +41,15 @@ export default (params) => { } const lightBackground = computed(() => config.nazhua.lightBackground); - const serverStatusLinear = computed(() => config.nazhua.serverStatusLinear || lightBackground.value); + const serverStatusColorMode = computed(() => { + if (config.nazhua.simpleColorMode) { + return 'simple'; + } + if (config.nazhua.serverStatusLinear || lightBackground.value) { + return 'linear'; + } + return 'default'; + }); const cpuInfo = computed(() => { if (props.info?.Host?.CPU?.[0]) { @@ -69,7 +103,7 @@ export default (params) => { case 'cpu': { const CoresVal = cpuInfo.value?.cores ? `${cpuInfo.value?.cores}C` : '-'; - const usedColor = serverStatusLinear.value ? ['#0088FF', '#72B7FF'] : '#0088FF'; + const usedColor = getColor('cpu', serverStatusColorMode.value); const valPercent = `${(props.info.State?.CPU || 0).toFixed(1) * 1}%`; const valText = valPercent; return { @@ -102,7 +136,7 @@ export default (params) => { } else { contentVal = `${Math.ceil(useMemAndTotalMem.value.total.m)}M`; } - const usedColor = serverStatusLinear.value ? ['#2B6939', '#0AA344'] : '#0AA344'; + const usedColor = getColor('mem', serverStatusColorMode.value); return { type: 'mem', used: useMemAndTotalMem.value.usePercent, @@ -136,7 +170,7 @@ export default (params) => { } else { contentVal = `${Math.ceil(useSwapAndTotalSwap.value.total.m)}M`; } - const usedColor = serverStatusLinear.value ? ['#FF8C00', '#F38100'] : '#FF8C00'; + const usedColor = getColor('swap', serverStatusColorMode.value); return { type: 'swap', used: useSwapAndTotalSwap.value.usePercent, @@ -167,7 +201,7 @@ export default (params) => { } else { contentValue = `${Math.ceil(useDiskAndTotalDisk.value.total.g)}G`; } - const usedColor = serverStatusLinear.value ? ['#00848F', '#70F3FF'] : '#70F3FF'; + const usedColor = getColor('disk', serverStatusColorMode.value); return { type: 'disk', used: useDiskAndTotalDisk.value.usePercent, diff --git a/src/views/home.vue b/src/views/home.vue index 944079c..c760aa9 100644 --- a/src/views/home.vue +++ b/src/views/home.vue @@ -36,6 +36,7 @@ v-model="listType" :options="listTypeOptions" :accpet-empty="false" + :mobile-show="false" />