koishi-plugin-csss 2.0.0 → 3.1.0

package/lib/index.js

@@ -28,7 +28,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 var import_koishi = require("koishi");
 var name = "csss";
-var inject = ["canvas", "gamedig", "database"];
+var inject = ["puppeteer", "gamedig", "database"];
 var Config = import_koishi.Schema.object({
   timeout: import_koishi.Schema.number().min(1e3).max(3e4).default(5e3).description("查询超时时间(毫秒)"),
   cacheTime: import_koishi.Schema.number().min(0).max(3e5).default(3e4).description("缓存时间(毫秒，0为禁用缓存)"),
@@ -51,8 +51,8 @@ var Config = import_koishi.Schema.object({
   batchTimeout: import_koishi.Schema.number().min(1e3).max(6e4).default(15e3).description("批量查询总超时时间(毫秒)")
 });
 var COLORS = {
-  background: "rgba(28,28,31,0.80)",
-  text: "rgb(113, 113, 122)",
+  background: "#1c1c1fcc",
+  text: "#71717a",
   textLight: "#aaaaaa",
   textLighter: "#dddddd",
   textWhite: "#ffffff",
@@ -72,7 +72,7 @@ var COLORS = {
   divider: "#555555",
   timestamp: "#666666",
   gold: "#FFD700",
-  playerName: "rgb(252, 248, 222)"
+  playerName: "#fcf8de"
 };
 var utils = {
   formatPing(ping) {
@@ -109,9 +109,9 @@ function apply(ctx, config) {
     console.error("koishi-plugin-gamedig 未安装或未启用");
     return ctx.logger("cs-server-status").error("需要安装并启用 koishi-plugin-gamedig 插件");
   }
-  if (!ctx.canvas) {
-    console.error("koishi-plugin-canvas 未安装或未启用");
-    return ctx.logger("cs-server-status").error("需要安装并启用 koishi-plugin-canvas 插件");
+  if (!ctx.puppeteer) {
+    console.error("koishi-plugin-puppeteer 未安装或未启用");
+    return ctx.logger("cs-server-status").error("需要安装并启用 koishi-plugin-puppeteer 插件");
   }
   async function queryServers(serversToQuery) {
     const startTime = Date.now();
@@ -271,300 +271,349 @@ function apply(ctx, config) {
     return message.trim();
   }
   __name(formatPlayers, "formatPlayers");
-  const imageUtils = {
-    calculateServerNameFontSize(ctx2, name2, maxWidth, baseFontSize) {
-      try {
-        if (!ctx2 || typeof ctx2.measureText !== "function") {
-          console.warn("Canvas context not available, returning default font size");
-          return baseFontSize * 1.5;
-        }
-        let fontSize = baseFontSize * 1.5;
-        while (fontSize > baseFontSize * 0.8) {
-          ctx2.font = `bold ${fontSize}px ${config.fontFamily}`;
-          const measurement = ctx2.measureText(name2);
-          if (measurement && measurement.width <= maxWidth) break;
-          fontSize -= 1;
-        }
-        return fontSize;
-      } catch (error) {
-        console.error("Error in calculateServerNameFontSize:", error);
-        return baseFontSize * 1.5;
-      }
-    },
-    calculatePlayerListParams(playerCount) {
-      const shouldEnlarge = playerCount > 0 && playerCount < 10;
-      return {
-        shouldEnlarge,
-        fontSizeMultiplier: shouldEnlarge ? 1.2 : 0.9,
-        rowHeight: shouldEnlarge ? 40 : 30,
-        nameMaxLength: shouldEnlarge ? 40 : 30,
-        needTwoColumns: playerCount > 10
-      };
-    },
-    drawBackground(ctx2, width, height, color = COLORS.background) {
-      ctx2.fillStyle = color;
-      ctx2.fillRect(0, 0, width, height);
-    },
-    drawTitle(ctx2, text, x, y, fontSize, fontFamily, color = COLORS.textWhite) {
-      ctx2.fillStyle = color;
-      ctx2.font = `bold ${fontSize}px ${fontFamily}`;
-      ctx2.textAlign = "center";
-      ctx2.fillText(text, x, y);
-    },
-    drawDivider(ctx2, x1, y1, x2, y2, color = COLORS.divider, width = 2) {
-      ctx2.strokeStyle = color;
-      ctx2.lineWidth = width;
-      ctx2.beginPath();
-      ctx2.moveTo(x1, y1);
-      ctx2.lineTo(x2, y2);
-      ctx2.stroke();
-    },
-    drawText(ctx2, text, x, y, options = {}) {
-      const {
-        color = COLORS.text,
-        fontSize = config.fontSize,
-        fontFamily = config.fontFamily,
-        align = "left",
-        bold = false,
-        italic = false
-      } = options;
-      ctx2.fillStyle = color;
-      ctx2.textAlign = align;
-      const fontStyle = `${bold ? "bold" : ""} ${italic ? "italic" : ""} ${fontSize}px ${fontFamily}`;
-      ctx2.font = fontStyle.trim() || `${fontSize}px ${fontFamily}`;
-      ctx2.fillText(text, x, y);
-    },
-    drawPlayerList(ctx2, players, startY, width, maxHeight, params) {
-      let y = startY;
-      if (players.length === 0) {
-        this.drawText(ctx2, "服务器当前无玩家在线", 80, y, { color: COLORS.textLight });
-        return { y: y + 35, displayedCount: 0 };
-      }
-      const sortedPlayers = [...players].sort((a, b) => {
-        const nameA = utils.cleanName(a.name).toLowerCase();
-        const nameB = utils.cleanName(b.name).toLowerCase();
-        return nameA.localeCompare(nameB);
-      });
-      if (params.needTwoColumns) {
-        const leftColumnX = 80;
-        const rightColumnX = width / 2 + 80;
-        const playersPerColumn = Math.ceil(players.length / 2);
-        const displayPerColumn = Math.min(playersPerColumn, Math.ceil(config.maxPlayers / 2));
-        const leftPlayers = sortedPlayers.slice(0, displayPerColumn);
-        const rightPlayers = sortedPlayers.slice(displayPerColumn, displayPerColumn * 2);
-        let currentY = y;
-        let displayedCount = 0;
-        leftPlayers.forEach((player) => {
-          const name2 = utils.truncateText(utils.cleanName(player.name), params.nameMaxLength);
-          this.drawText(ctx2, name2, leftColumnX, currentY, {
-            fontSize: config.fontSize * params.fontSizeMultiplier,
-            color: COLORS.textLighter
-          });
-          currentY += params.rowHeight;
-          displayedCount++;
-        });
-        currentY = y;
-        rightPlayers.forEach((player) => {
-          const name2 = utils.truncateText(utils.cleanName(player.name), params.nameMaxLength);
-          this.drawText(ctx2, name2, rightColumnX, currentY, {
-            fontSize: config.fontSize * params.fontSizeMultiplier,
-            color: COLORS.textLighter
-          });
-          currentY += params.rowHeight;
-          displayedCount++;
-        });
-        y = Math.max(currentY + 15, y);
-        const totalDisplayed = leftPlayers.length + rightPlayers.length;
-        if (players.length > totalDisplayed) {
-          this.drawText(ctx2, `... 还有 ${players.length - totalDisplayed} 位玩家未显示`, leftColumnX, y, {
-            fontSize: config.fontSize * 0.8,
-            color: COLORS.textLight,
-            italic: true
-          });
-          y += 30;
-        }
-        return { y, displayedCount };
-      } else {
-        const displayPlayers = sortedPlayers.slice(0, config.maxPlayers);
-        displayPlayers.forEach((player) => {
-          const name2 = utils.truncateText(utils.cleanName(player.name), params.nameMaxLength);
-          this.drawText(ctx2, name2, 80, y, {
-            fontSize: config.fontSize * params.fontSizeMultiplier,
-            color: COLORS.textLighter
-          });
-          y += params.rowHeight;
-        });
-        return { y, displayedCount: displayPlayers.length };
-      }
-    },
-    // 边框绘制函数
-    drawBorder(ctx2, width, height) {
-      this.drawDivider(ctx2, 1, 1, width - 1, 1, COLORS.border, 2);
-      this.drawDivider(ctx2, width - 1, 1, width - 1, height - 1, COLORS.border, 2);
-      this.drawDivider(ctx2, width - 1, height - 1, 1, height - 1, COLORS.border, 2);
-      this.drawDivider(ctx2, 1, height - 1, 1, 1, COLORS.border, 2);
-      this.drawDivider(ctx2, 5, 0.5 * height - 0.05 * height, 5, height - 0.5 * height + 0.05 * height, COLORS.border, 6);
-      this.drawDivider(ctx2, width - 5, 0.5 * height - 0.05 * height, width - 5, height - 0.5 * height + 0.05 * height, COLORS.border, 6);
-      this.drawDivider(ctx2, 2, 2, 0.025 * width, 2, COLORS.accent, 3);
-      this.drawDivider(ctx2, 2, 2, 2, 0.025 * width, COLORS.accent, 3);
-      this.drawDivider(ctx2, width - 2, 2, width - 2, 0.025 * width, COLORS.accent, 3);
-      this.drawDivider(ctx2, width - 2, 2, width - 0.025 * width, 2, COLORS.accent, 3);
-      this.drawDivider(ctx2, width - 2, height - 2, width - 2, height - 0.025 * width, COLORS.accent, 3);
-      this.drawDivider(ctx2, width - 2, height - 2, width - 0.025 * width, height - 2, COLORS.accent, 3);
-      this.drawDivider(ctx2, 2, height - 2, 0.025 * width, height - 2, COLORS.accent, 3);
-      this.drawDivider(ctx2, 2, height - 2, 2, height - 0.025 * width, COLORS.accent, 3);
-    }
-  };
-  function calculateImageHeight(data) {
+  function generateServerHTML(data, host, port) {
     const { result } = data;
     const playerCount = result.players?.length || 0;
-    const playerParams = imageUtils.calculatePlayerListParams(playerCount);
-    let baseHeight = 280;
+    const botCount = result.bots?.length || 0;
+    const maxPlayers = result.maxplayers || 0;
+    const cleanName = result.name ? utils.cleanName(result.name) : "未知服务器";
+    const now = (/* @__PURE__ */ new Date()).toLocaleString("zh-CN");
+    let playersHTML = "";
     if (playerCount === 0) {
-      baseHeight += 60;
+      playersHTML = `<div class="player-row" style="color: ${COLORS.textLight};">服务器当前无玩家在线</div>`;
     } else {
-      baseHeight += 90;
-      if (playerParams.needTwoColumns) {
-        const rows = Math.ceil(Math.min(playerCount, config.maxPlayers) / 2);
-        baseHeight += rows * playerParams.rowHeight;
+      const sortedPlayers = [...result.players].sort(
+        (a, b) => utils.cleanName(a.name).localeCompare(utils.cleanName(b.name))
+      );
+      const displayPlayers = sortedPlayers.slice(0, config.maxPlayers);
+      const needTwoColumns = playerCount > 10;
+      if (needTwoColumns) {
+        const half = Math.ceil(displayPlayers.length / 2);
+        const left = displayPlayers.slice(0, half);
+        const right = displayPlayers.slice(half, half * 2);
+        playersHTML = '<div style="display: flex; gap: 40px;">';
+        playersHTML += "<div>" + left.map(
+          (p) => `<div class="player-row">${utils.truncateText(utils.cleanName(p.name), 30)}</div>`
+        ).join("") + "</div>";
+        playersHTML += "<div>" + right.map(
+          (p) => `<div class="player-row">${utils.truncateText(utils.cleanName(p.name), 30)}</div>`
+        ).join("") + "</div>";
+        playersHTML += "</div>";
       } else {
-        const rows = Math.min(playerCount, config.maxPlayers);
-        baseHeight += rows * playerParams.rowHeight;
+        playersHTML = displayPlayers.map(
+          (p) => `<div class="player-row">${utils.truncateText(utils.cleanName(p.name), 40)}</div>`
+        ).join("");
       }
       if (playerCount > config.maxPlayers) {
-        baseHeight += 40;
+        playersHTML += `<div class="player-row" style="color: ${COLORS.textLight}; font-style: italic;">... 还有 ${playerCount - config.maxPlayers} 位玩家未显示</div>`;
       }
     }
-    if (config.showPassword && result.password !== void 0) {
-      baseHeight += 35;
+    return `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      background: rgba(28,28,31,0.8);
+      font-family: ${config.fontFamily};
+      width: ${config.imageWidth}px;
+      min-height: ${config.imageHeight}px;
+      padding: 40px;
+      color: ${COLORS.text};
+      position: relative;
+      border: 2px solid ${COLORS.border};
     }
-    if (config.showVAC && result.raw?.secure !== void 0) {
-      baseHeight += 35;
+    /* 边框装饰 */
+    .corner {
+      position: absolute;
+      width: 25px;
+      height: 25px;
+      border-color: ${COLORS.accent};
+      border-style: solid;
+      border-width: 0;
     }
-    const height = Math.max(baseHeight, config.imageHeight);
-    return Math.min(height, 2500);
-  }
-  __name(calculateImageHeight, "calculateImageHeight");
-  async function generateServerImage(data, host, port) {
-    const { result } = data;
-    const width = config.imageWidth;
-    const height = calculateImageHeight(data);
-    const canvas = await ctx.canvas.createCanvas(width, height);
-    const ctx2d = canvas.getContext("2d");
-    imageUtils.drawBackground(ctx2d, width, height);
-    const titleY = 80;
-    imageUtils.drawTitle(ctx2d, "[服务器状态查询]", width / 2, titleY, config.fontSize * 1.5, config.fontFamily, COLORS.title);
-    if (result.name) {
-      const cleanName = utils.cleanName(result.name);
-      const fontSize = imageUtils.calculateServerNameFontSize(ctx2d, cleanName, width - 160, config.fontSize);
-      imageUtils.drawTitle(ctx2d, cleanName, width / 2, titleY + 50, fontSize * 1.8, config.fontFamily, COLORS.highlight);
-    }
-    imageUtils.drawDivider(ctx2d, 80, titleY + 80, width - 80, titleY + 80, COLORS.border, 2);
-    let y = titleY + 120;
-    if (result.map) {
-      imageUtils.drawText(ctx2d, `地图: ${result.map}`, 80, y);
-    }
-    imageUtils.drawText(ctx2d, `IP: ${host}:${port}`, width - 80, y, { align: "right" });
-    y += 40;
-    const playerCount = result.players?.length || 0;
-    const botCount = result.bots?.length || 0;
-    const maxPlayers = result.maxplayers || 0;
-    const playerText = `人数: ${playerCount}/${maxPlayers}${botCount > 0 ? ` (${botCount} Bot)` : ""}`;
-    imageUtils.drawText(ctx2d, playerText, 80, y, { color: utils.getPlayerColor(playerCount) });
-    if (result.ping) {
-      imageUtils.drawText(ctx2d, `Ping: ${result.ping}ms`, width - 80, y, {
-        align: "right",
-        color: utils.getPingColor(result.ping)
-      });
+    .corner-tl { top: 2px; left: 2px; border-top-width: 3px; border-left-width: 3px; }
+    .corner-tr { top: 2px; right: 2px; border-top-width: 3px; border-right-width: 3px; }
+    .corner-bl { bottom: 2px; left: 2px; border-bottom-width: 3px; border-left-width: 3px; }
+    .corner-br { bottom: 2px; right: 2px; border-bottom-width: 3px; border-right-width: 3px; }
+
+
+    .title {
+      text-align: center;
+      font-size: ${config.fontSize * 1.5}px;
+      color: ${COLORS.title};
+      margin-bottom: 20px;
     }
-    y += 50;
-    const playerParams = imageUtils.calculatePlayerListParams(playerCount);
-    imageUtils.drawText(ctx2d, "在线玩家", 80, y, { color: COLORS.playerName, bold: true, fontSize: config.fontSize });
-    y += 40;
-    imageUtils.drawDivider(ctx2d, 80, y - 15, width - 80, y - 15, COLORS.divider, 1.5);
-    y += 25;
-    const playerListResult = imageUtils.drawPlayerList(ctx2d, result.players || [], y, width, height, playerParams);
-    y = playerListResult.y;
-    y += 30;
-    const now = /* @__PURE__ */ new Date();
-    imageUtils.drawText(ctx2d, `查询时间: ${now.toLocaleString("zh-CN")}`, 80, height - 20, {
-      fontSize: config.fontSize * 0.8,
-      color: COLORS.timestamp
-    });
-    imageUtils.drawBorder(ctx2d, width, height);
-    return canvas.toBuffer("image/png");
+    .server-name {
+      text-align: center;
+      font-size: ${config.fontSize * 1.8}px;
+      font-weight: bold;
+      color: ${COLORS.highlight};
+      margin: 10px 0 20px;
+      word-break: break-word;
+    }
+    .divider {
+      height: 2px;
+      background: ${COLORS.border};
+      margin: 20px 0;
+    }
+    .info-row {
+      display: flex;
+      justify-content: space-between;
+      margin: 15px 0;
+      font-size: ${config.fontSize}px;
+    }
+    .player-section {
+      margin-top: 20px;
+    }
+    .player-section-title {
+      font-size: ${config.fontSize}px;
+      font-weight: bold;
+      color: ${COLORS.playerName};
+      margin-bottom: 10px;
+    }
+    .player-row {
+      font-size: ${config.fontSize * 0.9}px;
+      color: ${COLORS.textLighter};
+      line-height: 1.8;
+    }
+    .timestamp {
+      margin-top: 30px;
+      font-size: ${config.fontSize * 0.8}px;
+      color: ${COLORS.timestamp};
+      text-align: left;
+    }
+  </style>
+</head>
+<body>
+  <div class="corner corner-tl"></div>
+  <div class="corner corner-tr"></div>
+  <div class="corner corner-bl"></div>
+  <div class="corner corner-br"></div>
+
+  <div class="title">[服务器状态查询]</div>
+  <div class="server-name">${cleanName}</div>
+  <div class="divider"></div>
+
+  <div class="info-row">
+    <span>地图: ${result.map || "未知"}</span>
+    <span>IP: ${host}:${port}</span>
+  </div>
+  <div class="info-row">
+    <span style="color: ${utils.getPlayerColor(playerCount)};">人数: ${playerCount}/${maxPlayers}${botCount ? ` (${botCount} Bot)` : ""}</span>
+    <span style="color: ${utils.getPingColor(result.ping)};">Ping: ${result.ping ? result.ping + "ms" : "未知"}</span>
+  </div>
+
+  <div class="player-section">
+    <div class="player-section-title">在线玩家</div>
+    <div class="divider" style="margin: 5px 0 15px;"></div>
+    ${playersHTML}
+  </div>
+
+  <div class="timestamp">查询时间: ${now}</div>
+</body>
+</html>`;
   }
-  __name(generateServerImage, "generateServerImage");
-  async function generateBatchImage(results, serversToQuery, queryTime) {
+  __name(generateServerHTML, "generateServerHTML");
+  function generateBatchHTML(results, serversToQuery, queryTime) {
     const successful = results.filter((r) => r.status === "fulfilled" && r.value.success).length;
     const failed = results.length - successful;
-    const baseHeight = 200;
-    const serverHeight = 100;
-    const width = config.imageWidth;
-    const height = baseHeight + results.length * serverHeight;
-    const canvas = await ctx.canvas.createCanvas(width, height);
-    const ctx2d = canvas.getContext("2d");
-    imageUtils.drawBackground(ctx2d, width, height);
-    imageUtils.drawTitle(ctx2d, "[服务器状态批量查询]", width / 2, 100, config.fontSize * 1.8, config.fontFamily, COLORS.title);
-    const now = /* @__PURE__ */ new Date();
-    imageUtils.drawText(ctx2d, `查询时间: ${now.toLocaleString("zh-CN")}`, 80, 150);
-    imageUtils.drawText(ctx2d, `耗时: ${utils.formatTime(queryTime)}  成功: ${successful}/${results.length}`, width - 80, 150, { align: "right" });
-    imageUtils.drawDivider(ctx2d, 80, 165, width - 80, 165, COLORS.gold, 2);
-    let y = 200;
+    const now = (/* @__PURE__ */ new Date()).toLocaleString("zh-CN");
+    let serversHTML = "";
     results.forEach((result, index) => {
       const server = serversToQuery[index];
-      if (result.status === "fulfilled") {
-        const { success, data, error } = result.value;
-        if (success && data) {
-          const serverData = data.result;
-          const serverName = serverData.name ? utils.cleanName(serverData.name) : "未知";
-          const playerCount = serverData.players?.length || 0;
-          const maxPlayers = serverData.maxplayers || 0;
-          imageUtils.drawText(ctx2d, `${index + 1}. ${serverName}`, 80, y, {
-            color: COLORS.textWhite,
-            bold: true,
-            fontSize: config.fontSize * 1.1
-          });
-          imageUtils.drawText(ctx2d, server, 80, y + 30, {
-            fontSize: config.fontSize * 0.8,
-            color: COLORS.textLight
-          });
-          const playerText = `${playerCount}/${maxPlayers}`;
-          const playerColor = playerCount > 0 ? COLORS.success : COLORS.error;
-          imageUtils.drawText(ctx2d, playerText, width - 80, y, {
-            align: "right",
-            color: playerColor,
-            bold: true
-          });
-          if (serverData.map) {
-            imageUtils.drawText(ctx2d, `地图: ${serverData.map}`, 80, y + 60, {
-              fontSize: config.fontSize * 0.8,
-              color: COLORS.textLight
-            });
-          }
-          if (serverData.ping) {
-            const pingColor = utils.getPingColor(serverData.ping);
-            imageUtils.drawText(ctx2d, `延迟: ${serverData.ping}ms`, width - 80, y + 60, {
-              align: "right",
-              fontSize: config.fontSize * 0.9,
-              color: pingColor
-            });
-          }
-        } else {
-          imageUtils.drawText(ctx2d, `${index + 1}. ${server}`, 80, y, { color: COLORS.textWhite, bold: true });
-          imageUtils.drawText(ctx2d, `❌ 查询失败: ${error}`, 200, y + 35, { color: COLORS.error });
-        }
+      if (result.status === "fulfilled" && result.value.success) {
+        const data = result.value.data.result;
+        const name2 = data.name ? utils.cleanName(data.name) : "未知";
+        const playerCount = data.players?.length || 0;
+        const maxPlayers = data.maxplayers || 0;
+        const map = data.map || "";
+        const ping = data.ping || "?";
+        const pingColor = utils.getPingColor(ping);
+        const playerColor = playerCount > 0 ? COLORS.success : COLORS.error;
+        serversHTML += `
+        <div class="server-item">
+          <div class="server-header">
+            <span class="server-index">${index + 1}.</span>
+            <span class="server-name">${name2}</span>
+            <span class="server-players" style="color: ${playerColor};">${playerCount}/${maxPlayers}</span>
+          </div>
+          <div class="server-details">
+            <span class="server-addr">${server}</span>
+            <span class="server-map">地图: ${map}</span>
+            <span class="server-ping" style="color: ${pingColor};">延迟: ${ping}ms</span>
+          </div>
+        </div>
+      `;
       } else {
-        imageUtils.drawText(ctx2d, `${index + 1}. ${server}`, 80, y, { color: COLORS.textWhite, bold: true });
-        imageUtils.drawText(ctx2d, "❌ 查询失败", 200, y + 35, { color: COLORS.error });
-      }
-      if (index < results.length - 1) {
-        imageUtils.drawDivider(ctx2d, 80, y + 70, width - 80, y + 70, COLORS.divider, 1);
+        const errorMsg = result.value?.error || "未知错误";
+        serversHTML += `
+        <div class="server-item error">
+          <div class="server-header">
+            <span class="server-index">${index + 1}.</span>
+            <span class="server-name">${server}</span>
+            <span class="server-status">❌ 查询失败</span>
+          </div>
+          <div class="server-details error-msg">${errorMsg}</div>
+        </div>
+      `;
       }
-      y += 100;
     });
-    imageUtils.drawBorder(ctx2d, width, height);
-    return canvas.toBuffer("image/png");
+    return `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      background: rgba(28,28,31,0.8);
+      font-family: ${config.fontFamily};
+      width: ${config.imageWidth}px;
+      min-height: ${config.imageHeight}px;
+      padding: 40px;
+      color: ${COLORS.text};
+      position: relative;
+      border: 2px solid ${COLORS.border};
+    }
+    .corner {
+      position: absolute;
+      width: 25px;
+      height: 25px;
+      border-color: ${COLORS.accent};
+      border-style: solid;
+      border-width: 0;
+    }
+    .corner-tl { top: 2px; left: 2px; border-top-width: 3px; border-left-width: 3px; }
+    .corner-tr { top: 2px; right: 2px; border-top-width: 3px; border-right-width: 3px; }
+    .corner-bl { bottom: 2px; left: 2px; border-bottom-width: 3px; border-left-width: 3px; }
+    .corner-br { bottom: 2px; right: 2px; border-bottom-width: 3px; border-right-width: 3px; }
+
+    .title {
+      text-align: center;
+      font-size: ${config.fontSize * 1.8}px;
+      color: ${COLORS.title};
+      margin-bottom: 20px;
+    }
+    .stats {
+      display: flex;
+      justify-content: space-between;
+      font-size: ${config.fontSize}px;
+      margin-bottom: 10px;
+    }
+    .divider {
+      height: 2px;
+      background: ${COLORS.gold};
+      margin: 15px 0 30px;
+    }
+    .server-item {
+      margin-bottom: 30px;
+      border-bottom: 1px solid ${COLORS.divider};
+      padding-bottom: 20px;
+    }
+    .server-item:last-child {
+      border-bottom: none;
+    }
+    .server-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-size: ${config.fontSize * 1.1}px;
+      font-weight: bold;
+      color: ${COLORS.textWhite};
+      margin-bottom: 8px;
+    }
+    .server-index {
+      color: ${COLORS.accent};
+    }
+    .server-players {
+      margin-left: auto;
+    }
+    .server-details {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 20px;
+      font-size: ${config.fontSize * 0.9}px;
+      color: ${COLORS.textLight};
+    }
+    .server-details span {
+      white-space: nowrap;
+    }
+    .error .server-name {
+      color: ${COLORS.error};
+    }
+    .error-msg {
+      color: ${COLORS.error};
+      font-size: ${config.fontSize}px;
+    }
+    .timestamp {
+      margin-top: 20px;
+      font-size: ${config.fontSize * 0.8}px;
+      color: ${COLORS.timestamp};
+    }
+  </style>
+</head>
+<body>
+  <!-- 边框装饰 -->
+  <div class="corner corner-tl"></div>
+  <div class="corner corner-tr"></div>
+  <div class="corner corner-bl"></div>
+  <div class="corner corner-br"></div>
+
+  <div class="title">[服务器状态批量查询]</div>
+  <div class="stats">
+    <span>查询时间: ${now}</span>
+    <span>耗时: ${utils.formatTime(queryTime)}  成功: ${successful}/${results.length}</span>
+  </div>
+  <div class="divider"></div>
+
+  ${serversHTML}
+
+  <div class="timestamp">📋 输入 \`cs <服务器地址>\` 查询单个服务器</div>
+</body>
+</html>`;
+  }
+  __name(generateBatchHTML, "generateBatchHTML");
+  async function generateServerImage(data, host, port) {
+    const html = generateServerHTML(data, host, port);
+    const page = await ctx.puppeteer.page();
+    try {
+      await page.setViewport({
+        width: config.imageWidth,
+        height: config.imageHeight,
+        deviceScaleFactor: 2
+      });
+      await page.setContent(html, { waitUntil: "networkidle0" });
+      const buffer = await page.screenshot({
+        fullPage: true,
+        type: "png"
+      });
+      return buffer;
+    } finally {
+      await page.close().catch(() => {
+      });
+    }
+  }
+  __name(generateServerImage, "generateServerImage");
+  async function generateBatchImage(results, serversToQuery, queryTime) {
+    const html = generateBatchHTML(results, serversToQuery, queryTime);
+    const page = await ctx.puppeteer.page();
+    try {
+      await page.setViewport({
+        width: config.imageWidth,
+        height: config.imageHeight,
+        deviceScaleFactor: 2
+      });
+      await page.setContent(html, { waitUntil: "networkidle0" });
+      const buffer = await page.screenshot({
+        fullPage: true,
+        type: "png"
+      });
+      return buffer;
+    } finally {
+      await page.close().catch(() => {
+      });
+    }
   }
   __name(generateBatchImage, "generateBatchImage");
   ctx.command("cs <address>", "查询服务器状态").alias("查询").alias("server").option("noPlayers", "-n 隐藏玩家列表", { type: Boolean, fallback: false }).option("image", "-i 生成图片横幅", { type: Boolean, fallback: false }).option("text", "-t 输出文本信息", { type: Boolean, fallback: false }).option("clear", "-c 清除缓存", { type: Boolean, fallback: false }).action(async ({ session, options }, address) => {
@@ -584,7 +633,11 @@ function apply(ctx, config) {
           return import_koishi.h.image(imageBuffer, "image/png");
         } catch (imageError) {
           console.error("生成图片失败:", imageError);
-          return `生成图片失败: ${imageError.message}`;
+          return `生成图片失败: ${imageError.message}，已转为文本输出。
+
+${formatServerInfo(data)}
+
+${formatPlayers(data.result.players || [])}`;
         }
       }
       let message = formatServerInfo(data);
@@ -615,21 +668,20 @@ function apply(ctx, config) {
   ctx.command("cs.status", "检查插件状态和配置").action(async () => {
     try {
       const gamedigStatus = ctx.gamedig ? "✅ 可用" : "❌ 不可用";
-      let canvasStatus = "❌ 不可用";
-      if (ctx.canvas) {
+      let puppeteerStatus = "❌ 不可用";
+      if (ctx.puppeteer) {
         try {
-          const canvas = await ctx.canvas.createCanvas(1, 1);
-          const ctx2d = canvas.getContext("2d");
-          canvasStatus = "✅ 可用";
-        } catch (error) {
-          canvasStatus = `❌ 不可用: ${error.message}`;
+          await ctx.puppeteer.render("<div>test</div>");
+          puppeteerStatus = "✅ 可用";
+        } catch (e) {
+          puppeteerStatus = `❌ 不可用: ${e.message}`;
         }
       }
       const cacheSize = cache.size;
       return `✅ CS服务器查询插件状态
 💾 缓存数量: ${cacheSize} 条
 🕹️ Gamedig插件: ${gamedigStatus}
-🖼️ Canvas插件: ${canvasStatus}
+🖼️ Puppeteer插件: ${puppeteerStatus}
 ⚙️ 配置参数:
    超时时间: ${config.timeout}ms
    缓存时间: ${config.cacheTime}ms
@@ -638,14 +690,16 @@ function apply(ctx, config) {
    显示VAC状态: ${config.showVAC ? "是" : "否"}
    显示密码保护: ${config.showPassword ? "是" : "否"}
    生成图片横幅: ${config.generateImage ? "是" : "否"}
+   图片宽度: ${config.imageWidth}px
    图片最小高度: ${config.imageHeight}px
    字体大小: ${config.fontSize}px
+   字体: ${config.fontFamily}
 
 📝 使用: cs [地址:端口]
 📝 选项: -i 生成图片, -t 输出文本, -c 清除缓存`;
     } catch (error) {
       return `❌ 插件状态异常: ${error.message}
-请确保已安装并启用 koishi-plugin-gamedig 和 koishi-plugin-canvas 插件`;
+请确保已安装并启用 koishi-plugin-gamedig 和 koishi-plugin-puppeteer`;
     }
   });
   ctx.command("cs.help", "查看帮助").action(() => {
@@ -670,7 +724,7 @@ cs.help - 显示此帮助
 1. 如果不指定端口，默认使用27015
 2. 只支持CS服务器查询
 3. 查询结果缓存${config.cacheTime}ms，使用 -c 清除缓存
-4. 需要安装 koishi-plugin-gamedig 和 koishi-plugin-canvas 插件`;
+4. 需要安装 koishi-plugin-gamedig 和 koishi-plugin-puppeteer 插件`;
   });
   ctx.command("csss", "批量查询服务器状态").alias("batch").alias("multi").alias("批量查询").option("list", "-l 显示配置的服务器列表", { type: Boolean, fallback: false }).option("add", "-a <address> 添加服务器到列表", { type: String }).option("remove", "-r <index> 从列表中移除服务器", { type: Number }).option("clear", "-c 清空服务器列表", { type: Boolean, fallback: false }).option("image", "-i 生成图片横幅", { type: Boolean, fallback: false }).option("text", "-t 输出文本信息", { type: Boolean, fallback: false }).action(async ({ session, options }, ...addresses) => {
     if (options.list) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "koishi-plugin-csss",
-  "description": "Check the status of the CS server",
-  "version": "2.0.0",
+  "description": "一个用于 Koishi 的 CS:GO / CS2 服务器状态查询插件，支持单个/批量查询、服务器列表管理，并可将结果渲染为图片",
+  "version": "3.1.0",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
   "files": [
@@ -21,12 +21,12 @@
   ],
   "devDependencies": {
     "koishi": "^4.18.7",
-    "koishi-plugin-canvas": "^0.2.2",
+    "koishi-plugin-puppeteer": "^3.9.0",
     "koishi-plugin-gamedig": "^1.2.2"
   },
   "peerDependencies": {
     "koishi": "^4.18.7",
-    "koishi-plugin-canvas": "^0.2.2",
+    "koishi-plugin-puppeteer": "^3.9.0",
     "koishi-plugin-gamedig": "^1.2.2"
   },
   "koishi": {
@@ -35,8 +35,9 @@
     },
     "service": {
       "required": [
-        "canvas",
-        "gamedig"
+        "puppeteer",
+        "gamedig",
+        "database"
       ]
     }
   }

package/readme.md

@@ -2,4 +2,185 @@
 
 [![npm](https://img.shields.io/npm/v/koishi-plugin-csss?style=flat-square)](https://www.npmjs.com/package/koishi-plugin-csss)
 
-cs server status
+cs server status - 一个用于 Koishi 的 CS:GO / CS2 服务器状态查询插件，支持单个/批量查询、服务器列表管理，并可将结果渲染为图片。
+
+## 功能
+
+- **单个/批量服务器查询**：查询指定/多个IP的 CS 服务器信息，支持从数据库读取预设列表或临时输入（基于gamedig）。
+- **服务器列表管理**：在数据库中添加、移除、查看和清空常用服务器地址。
+- **图片渲染**：将查询结果生成为游戏风格的图片横幅（基于 Puppeteer）。
+
+## 依赖插件
+
+本插件强依赖以下插件，请确保它们已安装并启用：
+
+- `koishi-plugin-gamedig`：用于查询 Source 引擎服务器。
+- `koishi-plugin-puppeteer`：用于将 HTML 渲染为图片。
+- `database`：用于存储服务器列表。
+
+## 命令列表
+
+### `cs <address:string>` - 查询单个服务器
+
+查询指定地址的 CS 服务器状态。
+
+**别名**：`查询`、`server`
+
+**选项**：
+
+- `-i, --image`：强制生成图片横幅（即使配置中关闭了图片生成）。
+
+- `-t, --text`：强制输出文本格式（即使配置中开启了图片生成）。
+
+- `-c, --clear`：清除插件运行时的内存缓存。
+
+**用法**：
+
+```bash
+cs 127.0.0.1:27015
+cs edgebug.cn
+cs [::1]:27015 -i
+```
+
+### `cs.status` - 检查插件状态
+
+显示插件当前运行状态、缓存数量和依赖可用性。
+
+**用法**：
+
+```bash
+cs.status
+```
+
+### `cs.help` - 查看帮助信息
+
+显示本插件的命令帮助。
+
+### `csss [...addresses]` - 批量查询服务器
+
+批量查询多个服务器。如果不指定地址，将查询数据库中存储的服务器列表。
+
+**别名**：`批量查询`
+
+**选项**：
+
+- `-l, --list`：显示数据库中保存的服务器列表。
+
+- `-a <address>, --add <address>`：添加一个服务器到数据库列表。
+
+- `-r <index>, --remove <index>`：从数据库列表中移除指定序号的服务器。
+
+- `-c, --clear`：清空数据库中的服务器列表。
+
+- `-i, --image`：强制生成图片横幅。
+
+- `-t, --text`：强制输出文本格式。
+
+**用法**：
+
+```bash
+# 查询数据库中的所有服务器
+csss
+
+# 临时查询指定的几个服务器
+csss 192.168.1.1:27015 game.example.com:27016
+
+# 管理数据库列表
+csss -l                         #显示数据库中保存的服务器列表
+csss -a 127.0.0.1:27015         #将127.0.0.1:27015添加到数据库列表
+csss -r 1                       #从数据库列表中移除序号为1的服务器
+csss -c                         #清空数据库中的服务器列表
+```
+
+## 自定义样式指南
+
+`koishi-plugin-csss` 支持通过 `customCSS` 配置项注入自定义 CSS，让您能自由调整生成图片的视觉效果。本指南将说明可用的 HTML 结构、类名和修改示例。
+
+### HTML 结构概览
+
+### 单个服务器查询 (cs)
+
+```html
+<body>
+  <div class="corner corner-tl"></div>
+  <div class="corner corner-tr"></div>
+  <div class="corner corner-bl"></div>
+  <div class="corner corner-br"></div>
+  
+  <div class="title">[服务器状态查询]</div>
+  <div class="server-name">服务器名称</div>
+  <div class="divider"></div>
+  
+  <div class="info-row">
+    <span>地图: de_dust2</span>
+    <span>IP: 127.0.0.1:27015</span>
+  </div>
+  <div class="info-row">
+    <span style="color: #4CAF50;">人数: 12/32</span>
+    <span style="color: #4CAF50;">Ping: 45ms</span>
+  </div>
+  
+  <div class="player-section">
+    <div class="player-section-title">在线玩家</div>
+    <div class="divider" style="margin: 5px 0 15px;"></div>
+    <!-- 玩家列表 -->
+    <div class="player-row">玩家名1</div>
+    <div class="player-row">玩家名2</div>
+    ...
+  </div>
+  
+  <div class="timestamp">查询时间: 2024/1/1 12:00:00</div>
+</body>
+```
+
+### 批量服务器查询 (csss)
+
+```html
+<body>
+  <!-- 四角边框装饰 -->
+  <div class="corner corner-tl"></div> ...
+  
+  <div class="title">[服务器状态批量查询]</div>
+  <div class="stats">
+    <span>查询时间: ...</span>
+    <span>耗时: 2.1秒 | 成功: 3/5</span>
+  </div>
+  <div class="divider"></div>
+  
+  <!-- 每个服务器一个 item -->
+  <div class="server-item">
+    <div class="server-header">
+      <span class="server-index">1.</span>
+      <span class="server-name">服务器A</span>
+      <span class="server-players" style="color: #4CAF50;">12/32</span>
+    </div>
+    <div class="server-details">
+      <span class="server-addr">127.0.0.1:27015</span>
+      <span class="server-ping" style="color: #4CAF50;">延迟: 45ms</span>
+    </div>
+    <div class="server-details">
+      <span class="server-map">地图: de_dust2</span>
+    </div>
+  </div>
+  
+  <!-- 查询失败的条目 -->
+  <div class="server-item error">
+    <div class="server-header">
+      <span class="server-index">2.</span>
+      <span class="server-name">192.168.1.1:27016</span>
+      <span class="server-status">❌ 查询失败</span>
+    </div>
+    <div class="server-details error-msg">连接超时</div>
+  </div>
+  
+  <div class="timestamp">📋 输入 `cs 服务器地址` 查询单个服务器</div>
+</body>
+```
+
+### 注意事项
+
+- 使用`!important`：默认样式通常带有较高优先级，自定义时建议加`!important`确保覆盖。
+
+- 字体支持：请确保运行环境已安装您指定的字体，否则将回退到默认等宽字体。
+
+- 图片尺寸：`imageWidth` 和 `imageHeight` 在配置中设定，但可通过 CSS 覆盖 `body` 的 `width` 和 `min-height`。

package/lib/index.d.ts

@@ -1,20 +0,0 @@
-import { Context, Schema } from 'koishi';
-export declare const name = "csss";
-export declare const inject: string[];
-export interface Config {
-    timeout: number;
-    cacheTime: number;
-    maxPlayers: number;
-    retryCount: number;
-    showVAC: boolean;
-    showPassword: boolean;
-    generateImage: boolean;
-    imageWidth: number;
-    imageHeight: number;
-    fontSize: number;
-    fontFamily: string;
-    serverList: string[];
-    batchTimeout: number;
-}
-export declare const Config: Schema<Config>;
-export declare function apply(ctx: Context, config: Config): void;