🔧 增加一点点状态样式配置项

2024-04-13 20:21:36 +08:00
parent fe5bddfa54
commit 750204dd30
15 changed files with 148 additions and 118 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -42,5 +42,5 @@ module.exports = {
    "jsdoc/require-param-type": 0,
    "import/extensions": [ "error", "ignorePackages" ]
  },
-  ignorePatterns: [ "resources/state/echarts.min.js" ]
+  ignorePatterns: [ "echarts.min.js" ]
 }
--- a/apps/state.js
+++ b/apps/state.js
@@ -1,7 +1,8 @@
 import plugin from "../../../lib/plugins/plugin.js"
 import { Config } from "../components/index.js"
 import { puppeteer } from "../model/index.js"
-import { getData, si } from "../model/State/index.js"
+import { getData } from "../model/State/index.js"
+import { si } from "../model/State/DependencyChecker.js"
 import Monitor from "../model/State/Monitor.js"

 let interval = false
--- a/config/default_config/state.yaml
+++ b/config/default_config/state.yaml
@@ -19,6 +19,25 @@ statusPowerShellStart: false

 #背景图片api 默认 https://api.sretna.cn/layout/pe.php
 backdrop: 'https://api.sretna.cn/layout/pe.php'
+# 当api请求失败时使用的默认背景图，请放置在resources/state/img目录下，修改为你的文件名
+backdropDefault: 'default_bg.jpg'

 # 关闭node的那个圈圈
 closedNodeInfo: true
+
+# 关闭图表
+closedChart: false
+
+# Bot昵称的颜色
+BotNameColor: 'none'
+# Bot昵称渐变色 设置了该值BotNameColor值将无效 如要使用BotNameColor请将该值设为none或false
+# 该值请参考https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/linear-gradient
+# xxdeg 为渐变角度 后为渐变颜色
+BotNameColorGradient: '271.14deg,#001bff 0.98%,#00f0ff 25.79%,#fce84a 47.33%,#f34628 65.77%,#b275ff 91.4%'
+
+#以下为主硬件进度条和磁盘进度条的颜色 highColor - 严重 mediumColor - 警告 lowColor - 正常
+highColor: '#d73403'
+
+mediumColor: '#ffa500'
+
+lowColor: '#87CEEB'
--- a/model/State/CPU.js
+++ b/model/State/CPU.js
@@ -1,5 +1,5 @@
 import os from "os"
-import { si, osInfo } from "./index.js"
+import { si, osInfo } from "./DependencyChecker.js"
 import { Circle } from "./utils.js"

 /** 获取CPU占用 */
--- a/model/State/FsSize.js
+++ b/model/State/FsSize.js
@@ -1,6 +1,7 @@
 import _ from "lodash"
 import { getFileSize } from "./utils.js"
-import { si } from "./index.js"
+import { si } from "./DependencyChecker.js"
+import Monitor from "./Monitor.js"

 /**
 *  获取硬盘
@@ -29,3 +30,17 @@ export default async function getFsSize() {
    return item
  })
 }
+/**
+ * 获取磁盘读写速度
+ * @returns {object | boolean} 返回一个对象，包含读速度（rx_sec）和写速度（wx_sec），如果无法获取则返回false。
+ */
+export function getDiskSpeed() {
+  let fsStats = Monitor.fsStats
+  if (!fsStats || fsStats.rx_sec == null || fsStats.wx_sec == null) {
+    return false
+  }
+  return {
+    rx_sec: getFileSize(fsStats.rx_sec, false, false),
+    wx_sec: getFileSize(fsStats.wx_sec, false, false)
+  }
+}
--- a/model/State/GPU.js
+++ b/model/State/GPU.js
@@ -1,6 +1,5 @@
 import { Circle } from "./utils.js"
-import { si } from "./index.js"
-import { initDependence } from "./DependencyChecker.js"
+import { si, initDependence } from "./DependencyChecker.js"

 let isGPU = false;

--- a/model/State/Monitor.js
+++ b/model/State/Monitor.js
@@ -1,8 +1,7 @@
 import { Config, Data } from "../../components/index.js"
 import _ from "lodash"
-import { si } from "./index.js"
-import { initDependence } from "./DependencyChecker.js"
-import { addData, getFileSize } from "./utils.js"
+import { si, initDependence } from "./DependencyChecker.js"
+import { addData } from "./utils.js"

 export default new class monitor {
  constructor() {
@@ -29,8 +28,7 @@ export default new class monitor {
      // 内存
      ram: [],
      // 主题
-      echarts_theme: Data.readJSON("resources/state/theme_westeros.json"),
-      backdrop: Config.state.backdrop
+      echarts_theme: Data.readJSON("resources/state/theme_westeros.json")
    }
    this.valueObject = {
      networkStats: "rx_sec,tx_sec,iface",
@@ -105,41 +103,4 @@ export default new class monitor {
    }
    return data
  }
-
-  // 获取读取速率
-  get DiskSpeed() {
-    if (!this.fsStats ||
-      this.fsStats.rx_sec == null ||
-      this.fsStats.wx_sec == null
-    ) {
-      return false
-    }
-    return {
-      rx_sec: getFileSize(this.fsStats.rx_sec, false, false),
-      wx_sec: getFileSize(this.fsStats.wx_sec, false, false)
-    }
-  }
-
-  /**
-   *  获取网速
-   * @returns {object}
-   */
-  get getNetwork() {
-    let network = _.cloneDeep(this.network)
-    if (!network || network.length === 0) {
-      return false
-    }
-    let data = []
-    for (let v of network) {
-      if (v.rx_sec != null && v.tx_sec != null) {
-        let _rx = getFileSize(v.rx_sec, false, false)
-        let _tx = getFileSize(v.tx_sec, false, false)
-        data.push({
-          first: v.iface,
-          tail: `↑${_tx}/s | ↓${_rx}/s`
-        })
-      }
-    }
-    return data.length === 0 ? false : data
-  }
 }()
--- a/model/State/NetworkLatency.js
+++ b/model/State/NetworkLatency.js
@@ -1,5 +1,7 @@
-import request from "../../lib/request/request.js"
 import { Config } from "../../components/index.js"
+import request from "../../lib/request/request.js"
+import Monitor from "./Monitor.js"
+import { getFileSize } from "./utils.js"

 const defList = [
  { name: "Baidu", url: "https://baidu.com" },
@@ -12,7 +14,7 @@ const defList = [
 * 获取网络测试列表。
 * @returns {Promise<Array>} 返回一个Promise，该Promise解析为网络测试结果的数组。
 */
-export default function getNetworkTestList() {
+export function getNetworkTestList() {
  const { psTestSites, psTestTimeout } = Config.state
  if (!psTestSites) {
    return Promise.resolve([])
@@ -123,3 +125,22 @@ async function getNetworkLatency(url, timeoutTime = 5000) {
    clearTimeout(timeout)
  }
 }
+/** 获取当前网速 */
+export function getNetwork() {
+  let network = Monitor.network
+  if (!network || network.length === 0) {
+    return false
+  }
+  let data = []
+  for (let v of network) {
+    if (v.rx_sec != null && v.tx_sec != null) {
+      let _rx = getFileSize(v.rx_sec, false, false)
+      let _tx = getFileSize(v.tx_sec, false, false)
+      data.push({
+        first: v.iface,
+        tail: `↑${_tx}/s | ↓${_rx}/s`
+      })
+    }
+  }
+  return data.length === 0 ? false : data
+}
--- a/model/State/SWAP.js
+++ b/model/State/SWAP.js
@@ -1,5 +1,5 @@
 import { Circle, getFileSize } from "./utils.js"
-import { si } from "./index.js"
+import { si } from "./DependencyChecker.js"
 export default async function getSwapInfo() {
  const swapData = await si.get({
    mem: "swaptotal,swapused,swapfree"
--- a/model/State/index.js
+++ b/model/State/index.js
@@ -1,59 +1,55 @@
 import _ from "lodash"
+import { Config } from "../../components/index.js"
 import common from "../../lib/common/common.js"
 import getBotState from "./BotState.js"
 import getCPU from "./CPU.js"
-import { osInfo, si } from "./DependencyChecker.js"
 import getFastFetch from "./FastFetch.js"
-import getFsSize from "./FsSize.js"
+import getFsSize, { getDiskSpeed } from "./FsSize.js"
 import getGPU from "./GPU.js"
 import Monitor from "./Monitor.js"
-import getNetworTestList from "./NetworkLatency.js"
+import { getNetworkTestList, getNetwork } from "./Network.js"
 import getNode from "./NodeInfo.js"
+import getOtherInfo, { getCopyright } from "./OtherInfo.js"
 import getRAM from "./RAM.js"
 import getSWAP from "./SWAP.js"
-import getOtherInfo, { getCopyright } from "./OtherInfo.js"
-
-export { osInfo, si }

 export async function getData(e) {
  // 可视化数据
-  let visualData = _.compact(await Promise.all([
-    // CPU板块
+  const visualData = _.compact(await Promise.all([
    getCPU(),
-    // 内存板块
    getRAM(),
-    // GPU板块
    getGPU(),
-    // Node板块
    getNode(),
-    // SWAP
    getSWAP()
  ]))
-  let promiseTaskList = [
+
+  const promiseTaskList = [
    getFastFetch(e),
-    getFsSize()
+    getFsSize(),
+    getNetworkTestList()
  ]

-  let NetworTestList = getNetworTestList()
-  promiseTaskList.push(NetworTestList)
-
-  let [ FastFetch, HardDisk, psTest ] = await Promise.all(promiseTaskList)
+  const [ FastFetch, HardDisk, psTest ] = await Promise.all(promiseTaskList)
  /** bot列表 */
-  let BotList = _getBotList(e)
-  let isBotIndex = /pro/.test(e.msg) && BotList.length > 1
+  const BotList = _getBotList(e)
+  const isBotIndex = /pro/.test(e.msg) && BotList.length > 1
+  const chartData = JSON.stringify(common.checkIfEmpty(Monitor.chartData, [ "echarts_theme", "cpu", "ram" ]) ? undefined : Monitor.chartData)
+  // 配置
+  const { closedChart } = Config.state
  return {
    BotStatusList: await getBotState(BotList),
-    chartData: JSON.stringify(common.checkIfEmpty(Monitor.chartData, [ "echarts_theme", "cpu", "ram" ]) ? undefined : Monitor.chartData),
+    chartData: closedChart ? false : chartData,
    visualData: _.compact(visualData),
    otherInfo: getOtherInfo(),
    psTest: _.isEmpty(psTest) ? undefined : psTest,
+    fsStats: getDiskSpeed(),
+    copyright: getCopyright(),
+    network: getNetwork(),
+    Config: JSON.stringify(Config.state),
+    _Config: Config.state,
    FastFetch,
    HardDisk,
-    // 硬盘速率
-    fsStats: Monitor.DiskSpeed,
-    copyright: getCopyright(),
-    isBotIndex,
-    network: Monitor.getNetwork
+    isBotIndex
  }
 }

--- a/resources/state/state_chart.js
+++ b/resources/state/state_chart.js
@@ -1,25 +1,6 @@
 /* eslint-disable no-undef */

-const backdrop = chartData.backdrop
-// 背景api
-if (backdrop) {
-  let container = document.getElementById("container")
-  const img = new Image()
-  let timer = setTimeout(function() {
-    img.src = ""
-    console.log("图像加载超时")
-  }, 5000)
-  img.onload = function() {
-    clearTimeout(timer)
-    container.style.backgroundImage = "url(" + backdrop + ")"
-  }
-  img.onerror = function() {
-    clearTimeout(timer)
-    console.log("图像加载出错")
-  }
-  img.src = backdrop
-}
-
+// 图表
 echarts.registerTheme("westeros", chartData.echarts_theme)
 const chart = echarts.init(document.getElementById("Chart"), "westeros", {
  renderer: "svg"
--- a/resources/state/js/echarts.min.js
+++ b/resources/state/js/echarts.min.js
--- a/resources/state/js/style.js
+++ b/resources/state/js/style.js
@@ -0,0 +1,35 @@
+/* eslint-disable no-undef */
+
+const {
+  BotNameColor, highColor, mediumColor,
+  lowColor, backdrop, backdropDefault, BotNameColorGradient
+} = Config
+// 背景api
+if (backdrop) {
+  let container = document.getElementById("container")
+  const img = new Image()
+  let timer = setTimeout(function() {
+    img.src = ""
+  }, 5000)
+  img.onload = function() {
+    clearTimeout(timer)
+    container.style.backgroundImage = "url(" + backdrop + ")"
+  }
+  img.onerror = function() {
+    container.style.backgroundImage = `url(${_res_path}/state/img/${backdropDefault})`
+    clearTimeout(timer)
+  }
+  img.src = backdrop
+}
+const BotNameElement = document.querySelector(".header h1")
+// 修改BotNameColor
+if (BotNameColorGradient && BotNameColorGradient !== "none") {
+  BotNameElement.style.backgroundImage = `linear-gradient(${BotNameColorGradient})`
+} else if (BotNameColor && BotNameColor !== "none") {
+  BotNameElement.style.backgroundColor = BotNameColor
+  BotNameElement.style.backgroundImage = "none"
+}
+const documentElement = document.documentElement
+documentElement.style.setProperty("--high-color", highColor)
+documentElement.style.setProperty("--medium-color", mediumColor)
+documentElement.style.setProperty("--low-color", lowColor)
--- a/resources/state/monitor.html
+++ b/resources/state/monitor.html
@@ -2,7 +2,7 @@

 {{block 'css'}}
 <link rel="stylesheet" href="{{_res_path}}state/state.css">
-<script src="{{_res_path}}state/echarts.min.js"></script>
+<script src="{{_res_path}}state/js/echarts.min.js"></script>
 {{/block}}
 {{block 'main'}}
 <script>
--- a/resources/state/state.html
+++ b/resources/state/state.html
@@ -1,10 +1,18 @@
 {{extend defaultLayout}}

 {{block 'css'}}
-<link rel="stylesheet" href="{{_res_path}}state/state.css">
+<link rel="stylesheet" href="{{_res_path}}state/state.css" />
 {{/block}}
+
 {{block 'main'}}
 {{each BotStatusList}}
+
+<script>
+    var chartData = JSON.parse('{{@chartData}}')
+    var Config = JSON.parse('{{@Config}}')
+    var _res_path = '{{_res_path}}'
+</script>
+
 <div class="box" data-boxInfo="Bot{{isBotIndex ? $index + 1 : ''}}信息">
    <div class="tb">
        <div class="avatar">
@@ -54,7 +62,6 @@
                    <circle id="circle" stroke="{{group.color}}" style="stroke-dashoffset:{{group.per}}"></circle>
                </svg>
            </div>
-            <!-- </div> -->
            <article>
                <summary>{{group.title}}</summary>
                {{each group.info info}}
@@ -91,37 +98,30 @@

 {{if chartData}}
 <div class="box" data-boxInfo="图表">
-    <div id="Chart" style="height: 300px;"></div>
-    <script src="{{_res_path}}state/echarts.min.js"></script>
-    <script>
-        var chartData = JSON.parse('{{@chartData}}')
-    </script>
-    <script src="{{_res_path}}state/state_chart.js"></script>
+    <div id="Chart" style="height: 300px"></div>
+    <script src="{{_res_path}}state/js/echarts.min.js"></script>
+    <script src="{{_res_path}}state/js/chart.js"></script>
 </div>
+{{/if}}

-{{if network}}
-<div class="box" data-boxInfo="网络速率">
-    {{each network}}
+{{if network || psTest}}
+<div class="box" data-boxInfo="网络">
+    {{if network}} {{each network}}
    <div class="speed">
        <p>{{$value.first}}</p>
        <p>{{@$value.tail}}</p>
    </div>
-    {{/each}}
-</div>
-{{/if}}
-
-{{if psTest}}
-<div class="box" data-boxInfo="网络测试">
-    {{each psTest}}
+    {{/each}} {{/if}} {{if network && psTest}}
+    <hr style="margin: 5px 0" />
+    {{/if}} {{if psTest}} {{each psTest}}
    <div class="speed">
        <p>{{$value.first}}</p>
        <p>{{@$value.tail}}</p>
    </div>
-    {{/each}}
+    {{/each}} {{/if}}
 </div>
 {{/if}}

-{{/if}}
 {{if otherInfo}}
 <div class="box" data-boxInfo="其他">
    {{each otherInfo}}
@@ -135,4 +135,6 @@

 {{@FastFetch}}

+<script src="{{_res_path}}state/js/style.js"></script>
+
 {{/block}}