From 033fd3d69fa66aa3e0259331cf07b3ac68b68241 Mon Sep 17 00:00:00 2001 From: yeyang <746659424@qq.com> Date: Sun, 14 Apr 2024 21:30:22 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=E7=BB=86=E8=8A=82=E4=BC=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/state.js | 24 ++++++++++++++---------- model/State/BotState.js | 23 ++++------------------- model/State/utils.js | 28 ++++++++++++++++++++++++++++ resources/state/state.css | 12 +++++++++++- resources/state/state.html | 4 +++- resources/state/state.scss | 24 +++++++++++++----------- 6 files changed, 73 insertions(+), 42 deletions(-) diff --git a/apps/state.js b/apps/state.js index cc71b1c..a2bab1b 100644 --- a/apps/state.js +++ b/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 } diff --git a/model/State/BotState.js b/model/State/BotState.js index 5a12dea..ade9d64 100644 --- a/model/State/BotState.js +++ b/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 -} diff --git a/model/State/utils.js b/model/State/utils.js index 5be7f3b..ff8778a 100644 --- a/model/State/utils.js +++ b/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 - 要添加数据的数组 diff --git a/resources/state/state.css b/resources/state/state.css index d733da1..9910188 100644 --- a/resources/state/state.css +++ b/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; diff --git a/resources/state/state.html b/resources/state/state.html index 933e8d8..4c57be5 100644 --- a/resources/state/state.html +++ b/resources/state/state.html @@ -15,7 +15,9 @@
+ --avatar-similar-color1: {{$value.avatar.similarColor1}}; + --avatar-similar-color2: {{$value.avatar.similarColor2}}; + ">
diff --git a/resources/state/state.scss b/resources/state/state.scss index bc9969b..7a67091 100644 --- a/resources/state/state.scss +++ b/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 {