✨ 细节优化

apps/state.js

@@ -41,17 +41,21 @@ export class NewState extends plugin {
 
     // 防止多次触发
     if (interval) { return false } else interval = true
+    try {
+      // 获取数据
+      let data = await getData(e)
 
-    // 获取数据
-    let data = await getData(e)
-
-    // 渲染图片
-    await puppeteer.render("state/state", {
-      ...data
-    }, {
-      e,
-      scale: 1.4
-    })
+      // 渲染图片
+      await puppeteer.render("state/state", {
+        ...data
+      }, {
+        e,
+        scale: 1.4
+      })
+    } catch (error) {
+      logger.error(error)
+      interval = false
+    }
 
     interval = false
   }

model/State/BotState.js

@@ -2,6 +2,7 @@ import { formatDuration } from "../../tools/index.js"
 import { Plugin_Path } from "../../components/index.js"
 import { createRequire } from "module"
 import common from "../../../../lib/common/common.js"
+import { importColorThief, getImgPalette } from "./utils.js"
 const require = createRequire(import.meta.url)
 
 export default async function getBotState(botList) {
@@ -61,29 +62,13 @@ async function getAvatarColor(url, path) {
     } else {
       path = defaultAvatar
     }
-    let avatar = await getImgColor(path)
+    let avatar = await getImgPalette(path)
     return avatar
   } catch {
     return {
-      mainColor: "#fff",
+      similarColor1: "#fff1eb",
+      similarColor2: "#ace0f9",
       path: url
     }
   }
 }
-let getColor = null
-async function getImgColor(path) {
-  const mainColor = await getColor(path)
-  return {
-    mainColor: `rgb(${mainColor[0]},${mainColor[1]},${mainColor[2]})`,
-    path
-  }
-}
-
-async function importColorThief() {
-  if (!getColor) {
-    const colorthief = await import("colorthief")
-    getColor = colorthief.getColor
-    return getColor
-  }
-  return getColor
-}

model/State/utils.js

@@ -2,6 +2,7 @@ import _ from "lodash"
 
 export let si = false
 export let osInfo = null
+export let colorthief = null
 /**
  * 异步初始化系统信息依赖
  * 该函数尝试导入'systeminformation'模块，并获取操作系统信息。
@@ -30,6 +31,33 @@ export async function initDependence() {
 
 await initDependence()
 
+export async function getImgColor(path) {
+  importColorThief()
+  const mainColor = await colorthief.getColor(path)
+  return {
+    mainColor: `rgb(${mainColor[0]},${mainColor[1]},${mainColor[2]})`,
+    path
+  }
+}
+export async function getImgPalette(path) {
+  importColorThief()
+  const palette = await colorthief.getPalette(path)
+  const [ _1, _2 ] = palette
+  return {
+    similarColor1: `rgb(${_1[0]},${_1[1]},${_1[2]})`,
+    similarColor2: `rgb(${_2[0]},${_2[1]},${_2[2]})`,
+    path
+  }
+}
+
+export async function importColorThief() {
+  if (!colorthief) {
+    colorthief = await import("colorthief")
+    return colorthief
+  }
+  return colorthief
+}
+
 /**
  * 向数组中添加数据，如果数组长度超过允许的最大值，则删除最早添加的数据
  * @param {Array} arr - 要添加数据的数组

resources/state/state.css

@@ -120,6 +120,8 @@
   --medium-color: #ffa500;
   --low-color: #87CEEB;
   --avatar-main-color: #fff1eb;
+  --avatar-similar-color1: #fff1eb;
+  --avatar-similar-color2: #ace0f9;
 }
 
 .container {
@@ -171,12 +173,20 @@ body {
   width: 100px;
   border-radius: 50%;
   margin: 0 20px;
-  box-shadow: 0 0 12px 4px var(--avatar-main-color);
 }
 .tb .avatar-box .avatar img {
   width: 100%;
   border-radius: 50%;
 }
+.tb .avatar-box .avatar::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  margin: -3px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--avatar-similar-color2), var(--avatar-similar-color1));
+}
 .tb .avatar-box .info {
   display: flex;
   align-items: center;

resources/state/state.html

@@ -15,7 +15,9 @@
     <div class="tb">
         <div class="avatar-box">
             <div class="avatar" style="
-                --avatar-main-color: {{$value.avatar.mainColor}};">
+                --avatar-similar-color1: {{$value.avatar.similarColor1}};
+                --avatar-similar-color2: {{$value.avatar.similarColor2}};
+                ">
                 <img src="{{$value.avatar.path}}">
             </div>
             <div class="info">

resources/state/state.scss

@@ -11,6 +11,8 @@
     --medium-color: #ffa500;
     --low-color: #87CEEB;
     --avatar-main-color: #fff1eb;
+    --avatar-similar-color1: #fff1eb;
+    --avatar-similar-color2: #ace0f9;
 }
 
 .container {
@@ -86,23 +88,23 @@ body {
             width: 100px;
             border-radius: 50%;
             margin: 0 20px;
-            box-shadow: 0 0 12px 4px var(--avatar-main-color), ;
+            // box-shadow: 0 0 12px 4px var(--avatar-main-color);
 
             img {
                 width: 100%;
                 border-radius: 50%;
             }
 
-            // &::before {
-            //     content: '';
-            //     position: absolute;
-            //     inset: 0;
-            //     z-index: -1;
-            //     margin: -3px;
-            //     border-radius: 50%;
-            //     // box-shadow: 0 0 12px 7px var(--avatar-main-color);
-            //     background: linear-gradient(135deg, var(--avatar-similar-color1), var(--avatar-similar-color2));
-            // }
+            &::before {
+                content: '';
+                position: absolute;
+                inset: 0;
+                z-index: -1;
+                margin: -3px;
+                border-radius: 50%;
+                // box-shadow: 0 0 12px 7px var(--avatar-main-color);
+                background: linear-gradient(135deg, var(--avatar-similar-color2), var(--avatar-similar-color1));
+            }
         }
 
         .info {