⚡️ 细节优化

apps/state.js

@@ -2,8 +2,8 @@ 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, getChartCfg } from "../model/State/utils.js"
+import { getData, getChartCfg } from "../model/State/index.js"
+import { si } from "../model/State/utils.js"
 import { puppeteer } from "../model/index.js"
 
 let interval = false
@@ -17,10 +17,12 @@ export class NewState extends plugin {
         {
           reg: "^#?(椰奶)?状态(pro)?$",
           fnc: "state"
-        }, {
+        },
+        {
           reg: "^#椰奶监控$",
           fnc: "monitor"
-        }, {
+        },
+        {
           reg: "^#?原图$",
           fnc: "origImg"
         }
@@ -60,7 +62,6 @@ export class NewState extends plugin {
         scale: 1.4,
         retMsgId: true
       })
-      console.log(retMsgId)
       if (retMsgId) {
         const redisData = data.style.backdrop
         redis.set(this.redisOrigImgKey + retMsgId.message_id, redisData, { EX: 86400 })

config/default_config/state.yaml

@@ -54,4 +54,4 @@ highColor: "#d73403"
 #警告
 mediumColor: "#ffa500"
 #正常
-lowColor: "#87CEEB"
+lowColor: "#84A0DF"

model/State/BotState.js

@@ -2,10 +2,11 @@ import { createRequire } from "module"
 import moment from "moment"
 import { Plugin_Path } from "../../components/index.js"
 import { formatDuration } from "../../tools/index.js"
-import { getImgPalette, importColorThief } from "./utils.js"
+import { getImgPalette } from "./utils.js"
 const require = createRequire(import.meta.url)
 
-export default async function getBotState(e, botList) {
+export default async function getBotState(e) {
+  const botList = _getBotList(e)
   const dataPromises = botList.map(async(i) => {
     const bot = Bot[i]
     if (!bot?.uin) return ""
@@ -55,7 +56,6 @@ export default async function getBotState(e, botList) {
 async function getAvatarColor(url) {
   const defaultAvatar = `${Plugin_Path}/resources/state/img/default_avatar.jpg`
   try {
-    await importColorThief()
     if (url == "default") {
       url = defaultAvatar
     }
@@ -91,3 +91,17 @@ function getCountContacts(bot) {
     groupMember
   }
 }
+
+function _getBotList(e) {
+  /** bot列表 */
+  let BotList = [ e.self_id ]
+
+  if (e.isPro) {
+    if (Array.isArray(Bot?.uin)) {
+      BotList = Bot.uin
+    } else if (Bot?.adapter && Bot.adapter.includes(e.self_id)) {
+      BotList = Bot.adapter
+    }
+  }
+  return BotList
+}

model/State/index.js

@@ -1,6 +1,6 @@
 import _ from "lodash"
 import moment from "moment"
-import { Config } from "../../components/index.js"
+import { Config, Data } from "../../components/index.js"
 import common from "../../lib/common/common.js"
 import getBotState from "./BotState.js"
 import getCPU from "./CPU.js"
@@ -13,13 +13,12 @@ import getNode from "./NodeInfo.js"
 import getOtherInfo, { getCopyright } from "./OtherInfo.js"
 import getRAM from "./RAM.js"
 import getSWAP from "./SWAP.js"
-import { getBackground } from "./style.js"
-import { getChartCfg } from "./utils.js"
+import getStyle from "./style.js"
 
 export async function getData(e) {
   e.isPro = e.msg.includes("pro")
   /** bot列表 */
-  const BotList = _getBotList(e)
+
   const visualDataPromise = Promise.all([
     getCPU(),
     getRAM(),
@@ -32,30 +31,24 @@ export async function getData(e) {
     getFastFetch(e),
     getFsSize(),
     getNetworkTestList(e),
-    getBotState(e, BotList),
-    getBackground()
+    getBotState(e),
+    getStyle()
   ]
 
   const [
     visualData,
     FastFetch,
-    HardDisk, psTest, BotStatusList, backdrop
+    HardDisk, psTest, BotStatusList, style
   ] = await Promise.all(promiseTaskList)
 
-  const isBotIndex = /pro/.test(e.msg) && BotList.length > 1
   const chartData = JSON.stringify(
     common.checkIfEmpty(Monitor.chartData, [ "echarts_theme", "cpu", "ram" ])
       ? ""
       : Monitor.chartData
   )
 
-  const time = moment().format("YYYY-MM-DD HH:mm:ss")
-
   // 配置
   const { closedChart } = Config.state
-  const style = {
-    backdrop
-  }
 
   return {
     BotStatusList,
@@ -67,27 +60,18 @@ export async function getData(e) {
     copyright: getCopyright(),
     network: getNetwork(),
     Config: JSON.stringify(Config.state),
-    _Config: Config.state,
     FastFetch,
     HardDisk,
-    isBotIndex,
     style,
-    time,
+    time: moment().format("YYYY-MM-DD HH:mm:ss"),
     isPro: e.isPro,
     chartCfg: JSON.stringify(getChartCfg())
   }
 }
+export function getChartCfg() {
+  const echarts_theme = Data.readJSON("resources/state/theme_westeros.json")
 
-function _getBotList(e) {
-  /** bot列表 */
-  let BotList = [ e.self_id ]
-
-  if (e.isPro) {
-    if (Array.isArray(Bot?.uin)) {
-      BotList = Bot.uin
-    } else if (Bot?.adapter && Bot.adapter.includes(e.self_id)) {
-      BotList = Bot.adapter
-    }
+  return {
+    echarts_theme
   }
-  return BotList
 }

model/State/style.js

@@ -1,6 +1,12 @@
 import { Config } from "../../components/index.js"
 import requset from "../../lib/request/request.js"
 import { createAbortCont } from "./utils.js"
+
+export default async function getStyle() {
+  return {
+    backdrop: await getBackground()
+  }
+}
 export async function getBackground() {
   const { backdrop, backdropDefault } = Config.state
   if (!backdrop?.startsWith("http")) {

model/State/utils.js

@@ -1,5 +1,4 @@
 import _ from "lodash"
-import { Data } from "../../components/index.js"
 
 export let si = false
 export let osInfo = null
@@ -41,7 +40,7 @@ export async function getImgColor(path) {
   }
 }
 export async function getImgPalette(path) {
-  importColorThief()
+  await importColorThief()
   const palette = await colorthief.getPalette(path)
   const [ _1, _2 ] = palette
   return {
@@ -162,10 +161,3 @@ export async function createAbortCont(timeoutMs) {
     }
   }
 }
-export function getChartCfg() {
-  const echarts_theme = Data.readJSON("resources/state/theme_westeros.json")
-
-  return {
-    echarts_theme
-  }
-}

resources/state/css/index.scss

@@ -9,7 +9,7 @@
 :root {
     --high-color: #d73403;
     --medium-color: #ffa500;
-    --low-color: #87CEEB;
+    --low-color: #84A0DF;
     --avatar-main-color: #fff1eb;
     --avatar-similar-color1: #fff1eb;
     --avatar-similar-color2: #ace0f9;
@@ -228,9 +228,7 @@ body {
             //         #fce84a 47.33%,
             //         #f34628 65.77%,
             //         #b275ff 91.4%);
-            background-color: #000;
-            background-clip: text;
-            color: transparent;
+            color: #000;
         }
     }
 }

resources/state/index.html

@@ -17,14 +17,14 @@
     var _res_path = '{{_res_path}}'
 </script>
 {{each BotStatusList}}
-<div class="box" data-boxInfo="Bot{{isBotIndex ? $index + 1 : ''}}信息">
+<div class="box">
     <div class="botInfo">
         <div class="avatar-box">
             <div class="avatar" style="
                 --avatar-similar-color1: {{$value.avatar?.similarColor1}};
                 --avatar-similar-color2: {{$value.avatar?.similarColor2}};
                 ">
-                <img src="{{$value.avatar.path}}">
+                <img src="{{$value.avatar?.path}}">
             </div>
             <div class="info">
                 <div class="onlineStatus">
@@ -37,31 +37,35 @@
             <h1>{{$value.nickname}}</h1>
             <hr noshade>
             <p>
-                <span>{{$value.botVersion}}</span>
-                <span>Bot已运行 {{$value.botRunTime}}</span>
+                <span style="background: #d799de">
+                    {{$value.botVersion}}
+                </span>
+                <span style="background: #CBC7C8">
+                    Bot已运行 {{$value.botRunTime}}
+                </span>
             </p>
             <p>
-                <span>
+                <span style="background: #B4A0D8">
                     <img src="../../../../../plugins/yenai-plugin/resources/state/icon/friend.png">
                     {{$value.countContacts.friend}}
                 </span>
-                <span>
+                <span style="background: #e0be92">
                     <img src="../../../../../plugins/yenai-plugin/resources/state/icon/group.png">
                     {{$value.countContacts.group}}
                 </span>
-                <span>
+                <span style="background: #aad5e6">
                     <img src="../../../../../plugins/yenai-plugin/resources/state/icon/groupMember.png">
                     {{$value.countContacts.groupMember}}
                 </span>
-                <span>
+                <span style="background: #B4A0D8">
                     <img src="../../../../../plugins/yenai-plugin/resources/state/icon/recv.png">
                     {{$value.messageCount.recv}}
                 </span>
-                <span>
+                <span style="background: #e0be92">
                     <img src="../../../../../plugins/yenai-plugin/resources/state/icon/sent.png">
                     {{$value.messageCount.sent}}
                 </span>
-                <span>
+                <span style="background: #aad5e6">
                     <img src="../../../../../plugins/yenai-plugin/resources/state/icon/screenshot.png">
                     {{$value.messageCount.screenshot}}
                 </span>

resources/state/js/style.js

@@ -2,38 +2,25 @@
 
 const {
   BotNameColor, BotNameColorGradient, highColor, mediumColor,
-  lowColor /* backdrop, backdropDefault */
+  lowColor
 } = 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
+const BotNameElement = document.querySelector(".header h1")
 if (BotNameColorGradient && BotNameColorGradient !== "none") {
   BotNameElement.style.backgroundImage = `linear-gradient(${BotNameColorGradient})`
+  BotNameElement.style.color = "transparent"
+  BotNameElement.style.backgroundClip = "text"
 } else if (BotNameColor && BotNameColor !== "none") {
-  BotNameElement.style.backgroundColor = BotNameColor
+  BotNameElement.style.color = 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)
 
+// 根据圆环数量调整宽度
 const mainHardwareElement = document.querySelectorAll(".mainHardware li")
 const containerElement = document.querySelector(".container")
 if (mainHardwareElement.length === 4) {