⚡️ 细节优化

apps/state.js

@@ -1,6 +1,7 @@
 import plugin from "../../../lib/plugins/plugin.js"
 import { Config } from "../components/index.js"
 import Monitor from "../model/State/Monitor.js"
+import { getBackground } from "../model/State/style.js"
 import { getData } from "../model/State/index.js"
 import { si } from "../model/State/utils.js"
 import { puppeteer } from "../model/index.js"
@@ -27,7 +28,8 @@ export class NewState extends plugin {
 
   async monitor(e) {
     await puppeteer.render("state/monitor", {
-      chartData: JSON.stringify(Monitor.chartData)
+      chartData: JSON.stringify(Monitor.chartData),
+      backdrop: await getBackground()
     }, {
       e,
       scale: 1.4

model/State/CPU.js

@@ -4,19 +4,19 @@ import { si, Circle } from "./utils.js"
 export default async function getCpuInfo() {
   let { currentLoad: { currentLoad }, cpu, fullLoad } = await si.get({
     currentLoad: "currentLoad",
-    cpu: "vendor,speed,cores",
+    cpu: "manufacturer,speed,cores",
     fullLoad: "*"
   })
-  let { vendor, speed, cores } = cpu
+  let { manufacturer, speed, cores } = cpu
   if (currentLoad == null || currentLoad == undefined) return false
   fullLoad = Math.round(fullLoad)
-  vendor = vendor?.split(" ")?.[0] ?? "unknown"
+  manufacturer = manufacturer?.split(" ")?.[0] ?? "unknown"
   return {
     ...Circle(currentLoad / 100),
     inner: Math.round(currentLoad) + "%",
     title: "CPU",
     info: [
-        `${vendor} ${cores}核 ${speed}GHz`,
+        `${manufacturer} ${cores}核 ${speed}GHz`,
         `CPU满载率 ${fullLoad}%`
     ]
 

resources/admin/index.css

@@ -44,7 +44,7 @@ body {
 }
 
 .cfg-line {
-  color: #000000;
+  color: #303030;
   line-height: 36px;
   padding-left: 20px;
   font-weight: bold;
@@ -69,7 +69,7 @@ body {
   text-align: center;
   line-height: 36px;
   font-size: 20px;
-  color: #486081;
+  color: #4578c0;
   font-weight: bold;
   border-radius: 0 16px 16px 0;
 }
@@ -79,7 +79,7 @@ body {
 
 .cfg-desc {
   font-size: 16px;
-  color: rgb(73, 71, 71);
+  color: #454444;
   margin: 5px 0 5px 20px;
 }
 

resources/admin/index.scss

@@ -43,7 +43,7 @@ body {
 }
 
 .cfg-line {
-  color: #000000;
+  color: #303030;
   line-height: 36px;
   padding-left: 20px;
   font-weight: bold;
@@ -68,7 +68,7 @@ body {
   text-align: center;
   line-height: 36px;
   font-size: 20px;
-  color: #486081;
+  color: #4578c0;
   font-weight: bold;
   border-radius: 0 16px 16px 0;
 
@@ -79,7 +79,7 @@ body {
 
 .cfg-desc {
   font-size: 16px;
-  color: rgb(73, 71, 71);
+  color: #454444;
   margin: 5px 0 5px 20px;
 }
 

resources/help/index.css

@@ -1,10 +1,14 @@
 .help-title, .help-group {
-  background-image: linear-gradient(180deg, #d51a2f, #0cacaa);
+  background-image: linear-gradient(180deg, #7a7a9f, #403544);
   -webkit-background-clip: text;
           background-clip: text;
   color: transparent;
 }
 
+:root {
+  --table-color: #865E58;
+}
+
 body {
   width: 1100px;
 }
@@ -40,7 +44,7 @@ body {
 }
 
 .help-group {
-  font-size: 20px;
+  font-size: 25px;
   font-weight: bold;
   padding: 15px 15px 10px 20px;
   display: inline-block;
@@ -54,7 +58,7 @@ body {
   display: table;
   overflow: hidden;
   width: 100%;
-  color: #d63d2f;
+  color: var(--table-color);
 }
 .help-table .tr {
   display: table-row;

resources/help/index.scss

@@ -1,9 +1,13 @@
 %text-gradient {
-    background-image: linear-gradient(180deg, #d51a2f, #0cacaa);
+    background-image: linear-gradient(180deg, #7a7a9f, #403544);
     background-clip: text;
     color: transparent;
 }
 
+:root {
+    --table-color: #865E58;
+}
+
 body {
     width: 1100px;
 }
@@ -44,7 +48,7 @@ body {
 .help-group {
     @extend %text-gradient;
 
-    font-size: 20px;
+    font-size: 25px;
     font-weight: bold;
     padding: 15px 15px 10px 20px;
     display: inline-block;
@@ -58,7 +62,7 @@ body {
     display: table;
     overflow: hidden;
     width: 100%;
-    color: #d63d2f;
+    color: var(--table-color);
 
     .tr {
         display: table-row;

resources/state/monitor.html

@@ -3,20 +3,24 @@
 {{block 'css'}}
 <link rel="stylesheet" href="{{_res_path}}state/css/index.css">
 <script src="{{_res_path}}state/js/modules/echarts.min.js"></script>
+<style>
+    .container {
+        background-image:url({{backdrop}})
+    }
+    .head-box {
+        margin-top: 0;
+    }
+</style>
 {{/block}}
 {{block 'main'}}
+<div class="info-box">
+    <div class="head-box">
+        <div class="title">椰奶监控</div>
+        <div class="label">CPU & RAM & Network & FsStats</div>
+    </div>
+</div>
 <script>
     var chartData = JSON.parse('{{@chartData}}')
-    const backdrop = chartData.backdrop
-    // 背景api
-    if (backdrop) {
-        var container = document.getElementById('container')
-        const img = new Image();
-        img.onload = function () {
-            container.style.backgroundImage = 'url(' + backdrop + ')';
-        }
-        img.src = backdrop;
-    }
     echarts.registerTheme('westeros', chartData.echarts_theme)
     var formatByte = (num = 1) => {
         return (value) => {