koishi-plugin-ll-mc 3.0.9 → 3.1.0

package/lib/index.js

@@ -184,7 +184,11 @@ var Config = import_koishi.Schema.intersect([
       isTextToImageConversionEnabled: import_koishi.Schema.boolean().default(false).description(
         "是否将文本排行榜转为 Markdown 图片（依赖 `markdownToImage` 服务）。"
       ),
-      isLeaderboardToHorizontalBarChartConversionEnabled: import_koishi.Schema.boolean().default(false).description("是否将排行榜渲染为水平柱状图（依赖 `puppeteer` 服务）。")
+      isLeaderboardToHorizontalBarChartConversionEnabled: import_koishi.Schema.boolean().default(false).description("是否将排行榜渲染为水平柱状图（依赖 `puppeteer` 服务）。"),
+      renderMode: import_koishi.Schema.union([
+        import_koishi.Schema.const("chart").description("原版画布图（默认，保持原有效果）"),
+        import_koishi.Schema.const("template").description("自定义 HTML 模板图（按模板设计渲染，需 puppeteer）"),
+      ]).default("chart").description("排行图渲染方式"),
     }).description("图片生成"),
     // 仅在开启柱状图功能时显示以下详细选项
     import_koishi.Schema.union([
@@ -2505,6 +2509,147 @@ ${targetUserRecord[0].username}
     return number / total * 100;
   }
   __name(calculatePercentage, "calculatePercentage");
+  function escapeHtml(value) {
+    return String(value == null ? "" : value).replace(/[&<>"']/g, (ch) => ({
+      "&": "&amp;",
+      "<": "&lt;",
+      ">": "&gt;",
+      '"': "&quot;",
+      "'": "&#39;"
+    }[ch]));
+  }
+  __name(escapeHtml, "escapeHtml");
+  const LEADERBOARD_ROW_PALETTES = [
+    { bar: "#C8B8AE", fill: "#A26D51", text: "#5D3F2E" },
+    { bar: "#C4C4C4", fill: "#8E908D", text: "#4A4B49" },
+    { bar: "#F8BBD0", fill: "#F06292", text: "#374151" },
+    { bar: "#D1C4E9", fill: "#9575CD", text: "#374151" },
+    { bar: "#FFCDD2", fill: "#E57373", text: "#374151" },
+    { bar: "#CFD8DC", fill: "#90A4AE", text: "#374151" },
+    { bar: "#D7CCC8", fill: "#A1887F", text: "#374151" },
+    { bar: "#FFE0B2", fill: "#FFB74D", text: "#374151" },
+    { bar: "#BDBDBD", fill: "#757575", text: "#374151" },
+    { bar: "#C5E1A5", fill: "#AED581", text: "#374151" },
+    { bar: "#FFECB3", fill: "#FFD54F", text: "#374151" },
+    { bar: "#B2DFDB", fill: "#80CBC4", text: "#374151" },
+    { bar: "#BBDEFB", fill: "#90CAF9", text: "#374151" },
+    { bar: "#E1BEE7", fill: "#CE93D8", text: "#374151" },
+    { bar: "#FFCCBC", fill: "#FFAB91", text: "#374151" },
+    { bar: "#F0F4C3", fill: "#E6EE9C", text: "#374151" },
+    { bar: "#BCAAA4", fill: "#A1887F", text: "#374151" },
+    { bar: "#EEEEEE", fill: "#BDBDBD", text: "#374151" },
+    { bar: "#CFD8DC", fill: "#90A4AE", text: "#374151" }
+  ];
+  function buildLeaderboardRow(item, index) {
+    const pal = LEADERBOARD_ROW_PALETTES[index % LEADERBOARD_ROW_PALETTES.length];
+    const isHero = index === 0;
+    const width = item.count > 0 ? Math.max(item.percentage, 1) : 1;
+    const avatar = escapeHtml(item.avatar || "");
+    const name = escapeHtml(item.name || "");
+    const count = item.count;
+    const barBg = isHero ? "#F3F4F6" : pal.bar;
+    const fill = isHero
+      ? 'linear-gradient(to right, #6366F1, #A855F7, #EC4899)'
+      : pal.fill;
+    const textColor = isHero ? "#FFFFFF" : pal.text;
+    const star = isHero
+      ? `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="row-star"><path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd"/></svg>`
+      : "";
+    return `<div class="row">
+      <div class="avatar"><img src="${avatar}" alt="avatar"></div>
+      <div class="bar" style="background:${barBg};">
+        <div class="fill" style="width:${width}%;background:${fill};"></div>
+        <div class="bar-content" style="color:${textColor};">
+          <span class="row-name${isHero ? " is-hero" : ""}">${star}${name}</span>
+          <span class="row-count">${count}</span>
+        </div>
+      </div>
+    </div>`;
+  }
+  __name(buildLeaderboardRow, "buildLeaderboardRow");
+  function buildLeaderboardHtml(title, date, items) {
+    const rows = items.map(buildLeaderboardRow).join("\n");
+    return `<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  html, body {
+    width: 900px;
+    background-color: #F5F7FA;
+    font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+  }
+  body { padding: 16px; }
+  .card {
+    width: 100%;
+    max-width: 868px;
+    margin: 0 auto;
+    background: #FFFFFF;
+    border-radius: 12px;
+    padding: 24px;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.06);
+    border: 1px solid #F3F4F6;
+  }
+  .card-header { text-align: center; margin-bottom: 22px; }
+  .card-title { font-size: 28px; font-weight: 700; letter-spacing: 0.02em; color: #000000; margin-bottom: 6px; }
+  .card-date { font-size: 14px; font-weight: 500; color: #9CA3AF; }
+  .rows { display: flex; flex-direction: column; gap: 8px; }
+  .row { display: flex; align-items: center; gap: 12px; width: 100%; }
+  .avatar { width: 40px; height: 40px; flex-shrink: 0; }
+  .avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 1px 2px rgba(0,0,0,0.08); background: #fff; padding: 2px; }
+  .bar { position: relative; flex-grow: 1; height: 40px; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; }
+  .bar::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(to right, transparent 99%, rgba(255,255,255,0.2) 100%); background-size: 10% 100%; pointer-events: none; }
+  .fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 8px 0 0 8px; z-index: 0; }
+  .bar-content { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; width: 100%; }
+  .row-name { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 5px; max-width: 78%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .row-name.is-hero { color: #FFFFFF; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
+  .row-star { width: 16px; height: 16px; color: #FCD34D; flex-shrink: 0; }
+  .row-count { font-size: 18px; font-weight: 700; }
+</style>
+</head>
+<body>
+  <div class="card">
+    <div class="card-header">
+      <h1 class="card-title">${escapeHtml(title)}</h1>
+      <p class="card-date">${escapeHtml(date)}</p>
+    </div>
+    <div class="rows">
+${rows}
+    </div>
+  </div>
+</body>
+</html>`;
+  }
+  __name(buildLeaderboardHtml, "buildLeaderboardHtml");
+  async function renderLeaderboardTemplate(ctx, title, date, items) {
+    if (typeof ctx.puppeteer?.page !== "function") return null;
+    let page;
+    try {
+      const html = buildLeaderboardHtml(title, date, items);
+      page = await ctx.puppeteer.page();
+      await page.setViewport({ width: 900, height: 400, deviceScaleFactor: 2 });
+      try {
+        await page.setContent(html, { waitUntil: "networkidle0", timeout: 20000 });
+      } catch (e) {
+        logger.warn("Leaderboard template wait timed out, screenshotting current content.");
+      }
+      await page.waitForSelector(".card").catch(() => {});
+      const el = await page.$(".card");
+      const buf = el
+        ? await el.screenshot({ type: "png" })
+        : await page.screenshot({ type: "png", fullPage: true });
+      return `data:image/png;base64,${buf.toString("base64")}`;
+    } catch (error) {
+      logger.error("Failed to render leaderboard template:", error);
+      return null;
+    } finally {
+      if (page) await page.close().catch(() => {});
+    }
+  }
+  __name(renderLeaderboardTemplate, "renderLeaderboardTemplate");
   function getCurrentBeijingTime() {
     return (/* @__PURE__ */ new Date()).toLocaleString("zh-CN", { timeZone: "Asia/Shanghai" });
   }
@@ -2514,6 +2659,23 @@ ${targetUserRecord[0].username}
     rankTitle,
     rankingData
   }) {
+    if (config.renderMode === "template") {
+      const templateItems = rankingData.map((item, index) => ({
+        ...item,
+        rank: index + 1,
+        name: item.name.replace(/^★/, "")
+      }));
+      const dataUri = await renderLeaderboardTemplate(
+        ctx,
+        rankTitle,
+        rankTimeTitle,
+        templateItems
+      );
+      if (dataUri) {
+        return import_koishi.h.image(dataUri);
+      }
+      logger.warn("Leaderboard template render failed. Falling back to text.");
+    }
     if (config.isLeaderboardToHorizontalBarChartConversionEnabled) {
       if (!ctx.puppeteer) {
         logger.warn("Puppeteer service is not enabled. Falling back to text.");

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "koishi-plugin-ll-mc",
   "description": "消息数量统计插件（基于 koishi-plugin-message-counter 重做，官方QQ机器人兼容）",
-  "version": "3.0.9",
+  "version": "3.1.0",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
   "files": [
@@ -10,7 +10,7 @@
   ],
   "koishi": {
     "description": {
-      "zh": "消息数量统计插件：发言排行榜、群排行榜，官方QQ机器人（官机）兼容补丁"
+      "zh": "消息数量统计插件：发言排行榜、群排行榜，支持自定义 HTML 模板排行图，官方QQ机器人（官机）兼容补丁"
     },
     "service": {
       "required": [