koishi-plugin-vsinger-gacha 1.2.1 → 1.3.0

package/README.md

@@ -62,6 +62,20 @@ npm i @napi-rs/canvas
 - 想一次性缓存全部：`npm run fetch-assets -- --dir data/vsinger-gacha/cards`
 - 要动态卡 mp4（1.1GB）：下载 Release 的 `assets-videos.tar` 解压到 `cards/`
 
+## 统一渲染系统
+
+所有图片（抽卡结果、图鉴、以后新增的图）都走同一套设计令牌与组件：
+
+```
+lib/render/
+├── theme.js     设计令牌：颜色/字号/间距/圆角/档位配色
+├── kit.js       组件：背景、毛玻璃面板、卡牌、角标、标题、页脚、文本截断
+├── result.js    抽卡结果布局
+└── handbook.js  图鉴布局（复用 kit）
+```
+
+新增图片时只写布局，样式自动统一。
+
 ## 兼容性
 
 | 项 | 说明 |

package/lib/handbook.js

@@ -9,6 +9,7 @@ const fs = require('node:fs');
 const path = require('node:path');
 
 const FONT_FILE = require('node:path').join(__dirname, '..', 'assets', 'font.ttf');
+const kit = require('./render/kit');
 
 let Canvas = null;
 /** 按需加载画布（没装也不影响抽卡/积分） */
@@ -249,67 +250,19 @@ async function render({ game, store, uid, displayName, outDir, tagsDir, thumbsDi
           const cx = x0 + (i % COLS_PER_COL) * (TW + GAP);
           const cy = y + POOL_TITLE_H + Math.floor(i / COLS_PER_COL) * ROWH;
           const n = owned[c.h] || 0;
-          const tier = tierOf(c.v);
-          const tcol = TIER_COLOR[tier];
-
-          // 辉光（拥有）
-          if (n) {
-            g.save();
-            g.shadowColor = tcol;
-            g.shadowBlur = 22;
-            g.fillStyle = 'rgba(0,0,0,0.6)';
-            g.fillRect(cx, cy, TW, TH);
-            g.restore();
-          }
           const img = await load(path.join(thumbs, c.h + '.jpg'));
-          if (img) {
-            g.save();
-            if (!n) g.globalAlpha = 0.62;
-            g.drawImage(img, cx, cy, TW, TH);
-            g.restore();
-          } else {
-            g.fillStyle = '#1b2233';
-            g.fillRect(cx, cy, TW, TH);
-            g.fillStyle = '#7d879c';
-            g.font = '18px VSingerSans, sans-serif';
-            g.fillText('缺图', cx + TW / 2 - 18, cy + TH / 2);
-          }
-          g.strokeStyle = n ? '#ffffff' : 'rgba(205,210,222,0.8)';
-          g.lineWidth = 2;
-          g.strokeRect(cx + 1, cy + 1, TW - 2, TH - 2);
-
-          // 角标
-          const tagFile = tier === 40 ? tagBig : (tier === 30 ? tagSmall : null);
-          if (tagFile && fs.existsSync(tagFile)) {
-            const ti = await load(tagFile);
-            if (ti) {
-              const w = TW * 0.46;
-              g.drawImage(ti, cx + 3, cy + 3, w, (ti.height / ti.width) * w);
-            }
-          }
-          if (laser[c.h] && fs.existsSync(tagHolo)) {
-            const hi = await load(tagHolo);
-            if (hi) {
-              const w = TW * 0.36;
-              const hh = (hi.height / hi.width) * w;
-              g.drawImage(hi, cx + (TW - w) / 2, cy + TH - hh - 4, w, hh);
-            }
-          }
-
-          // 文字
-          g.fillStyle = n ? '#ffffff' : 'rgba(200,205,218,0.9)';
-          g.font = '16px VSingerSans, sans-serif';
-          g.fillText(fitText(g, c.v.card_name, TW), cx, cy + TH + 20);
-          g.fillStyle = n ? tcol : 'rgba(225,230,240,0.85)';
-          g.font = '13px VSingerSans, sans-serif';
-          g.fillText(fitText(g, `${TIER_NAME[tier]} ${c.v.rate_pct}%`, TW), cx, cy + TH + 40);
-          if (n > 1) {
-            g.fillStyle = 'rgba(0,0,0,0.75)';
-            g.fillRect(cx + TW - 38, cy + 4, 34, 20);
-            g.fillStyle = '#8cffaa';
-            g.font = 'bold 15px VSingerSans, sans-serif';
-            g.fillText(`×${n}`, cx + TW - 35, cy + 19);
-          }
+          await kit.card(g, Canvas, {
+            img, x: cx, y: cy, w: TW, h: TH,
+            name: c.v.card_name,
+            rate: c.v.rate_pct,
+            tier: tierOf(c.v),
+            laser: Boolean(laser[c.h]),
+            count: n,
+            owned: n > 0,
+            tagsDir,
+            nameSize: 15,
+            metaSize: 12,
+          });
         }
         y += blk.h;
       }
@@ -331,141 +284,10 @@ async function render({ game, store, uid, displayName, outDir, tagsDir, thumbsDi
 }
 
 
-/**
- * 抽卡结果图（不依赖合并转发，任何平台都能发）
- * @param {object} opts
- * @param {Array} opts.results [{hash|h, card, tier, laser}]
- * @param {string} opts.title
- */
-async function renderResult({ results, title, outDir, tagsDir, thumbsDir }) {
+async function renderResult(opts) {
   const Canvas = getCanvas();
-  const fs = require('node:fs');
-  const path = require('node:path');
-
-  const TIER_NAME = { 40: '大隐藏', 30: '小隐藏', 20: '稀有', 10: '普通' };
-  const TIER_COLOR = { 40: '#ff6d84', 30: '#ffb44d', 20: '#8fc0ff', 10: '#c3cad8' };
-  const tierOf = (card) => {
-    const sc = Number((card && card.card_scarcity) || 10);
-    return sc === 40 ? 40 : sc === 30 ? 30 : sc === 20 ? 20 : 10;
-  };
-
-  const n = Math.max(1, results.length);
-  const PER_ROW = n <= 3 ? n : Math.min(5, n);
-  const rows = Math.ceil(n / PER_ROW);
-  const CW = n === 1 ? 300 : 170;         // 卡宽（1 张时放大）
-  const CH = Math.round(CW * 1.43);
-  const LABEL = 58;
-  const GAP = 16;
-  const PAD = 32;
-  const HEAD = 108;
-  const W = Math.max(520, PAD * 2 + PER_ROW * CW + (PER_ROW - 1) * GAP);
-  const H = HEAD + rows * (CH + LABEL + GAP) + PAD;
-
-  const canvas = Canvas.createCanvas(W, H);
-  const g = canvas.getContext('2d');
-  g.textBaseline = 'top';
-
-  // 背景：深蓝渐变 + 顶部柔光
-  const bg = g.createLinearGradient(0, 0, W * 0.6, H);
-  bg.addColorStop(0, '#111c33');
-  bg.addColorStop(0.55, '#16263f');
-  bg.addColorStop(1, '#0d1524');
-  g.fillStyle = bg;
-  g.fillRect(0, 0, W, H);
-  const glow = g.createRadialGradient(W * 0.25, 0, 10, W * 0.25, 0, Math.max(W, H) * 0.75);
-  glow.addColorStop(0, 'rgba(120,180,255,0.28)');
-  glow.addColorStop(1, 'rgba(120,180,255,0)');
-  g.fillStyle = glow;
-  g.fillRect(0, 0, W, H);
-
-  // 标题
-  g.fillStyle = '#ffffff';
-  g.font = 'bold 32px VSingerSans, sans-serif';
-  const t = String(title || '').replace(/\s+/g, ' ');
-  const maxTitle = W - PAD * 2;
-  let tt = t;
-  while (tt.length > 2 && g.measureText(tt).width > maxTitle) tt = tt.slice(0, -1);
-  if (tt !== t) tt = tt.slice(0, -1) + '…';
-  g.fillText(tt, PAD, 30);
-  g.fillStyle = 'rgba(200,215,240,0.65)';
-  g.font = '18px VSingerSans, sans-serif';
-  g.fillText(`共 ${n} 张 ｜ 抽卡结果`, PAD, 72);
-
-  const rowW = PER_ROW * CW + (PER_ROW - 1) * GAP;
-  const x0 = Math.round((W - rowW) / 2);
-
-  for (let i = 0; i < results.length; i++) {
-    const r = results[i];
-    const hash = r.hash || r.h;
-    const col = i % PER_ROW;
-    const row = Math.floor(i / PER_ROW);
-    const x = x0 + col * (CW + GAP);
-    const y = HEAD + row * (CH + LABEL + GAP);
-    const tier = tierOf(r.card);
-
-    // 卡片底
-    g.save();
-    g.beginPath();
-    g.roundRect(x, y, CW, CH, 14);
-    g.clip();
-    g.fillStyle = '#1b2436';
-    g.fillRect(x, y, CW, CH);
-    const thumb = hash ? path.join(thumbsDir, hash + '.jpg') : '';
-    if (thumb && fs.existsSync(thumb)) {
-      try {
-        const img = await Canvas.loadImage(thumb);
-        g.drawImage(img, x, y, CW, CH);
-      } catch { /* 忽略 */ }
-    }
-    g.restore();
-
-    // 边框（按档位上色）
-    g.save();
-    g.beginPath();
-    g.roundRect(x + 1, y + 1, CW - 2, CH - 2, 13);
-    g.strokeStyle = TIER_COLOR[tier];
-    g.lineWidth = 3;
-    g.stroke();
-    g.restore();
-
-    // 档位角标
-    const tag = tier === 40 ? path.join(tagsDir, 'tag_40.webp') : tier === 30 ? path.join(tagsDir, 'tag_30.webp') : null;
-    if (tag && fs.existsSync(tag)) {
-      try {
-        const ti = await Canvas.loadImage(tag);
-        const tw = CW * 0.46;
-        g.drawImage(ti, x + 4, y + 4, tw, (ti.height / ti.width) * tw);
-      } catch { /* 忽略 */ }
-    }
-    if (r.laser) {
-      const holo = path.join(tagsDir, 'tag_holo.png');
-      if (fs.existsSync(holo)) {
-        try {
-          const hi = await Canvas.loadImage(holo);
-          const hw = CW * 0.36;
-          const hh = (hi.height / hi.width) * hw;
-          g.drawImage(hi, x + (CW - hw) / 2, y + CH - hh - 6, hw, hh);
-        } catch { /* 忽略 */ }
-      }
-    }
-
-    // 名称 + 档位/概率
-    g.fillStyle = '#ffffff';
-    g.font = 'bold 19px VSingerSans, sans-serif';
-    const name = String((r.card && r.card.card_name) || '');
-    let nn = name;
-    while (nn.length > 1 && g.measureText(nn).width > CW) nn = nn.slice(0, -1);
-    g.fillText(nn === name ? nn : nn.slice(0, -1) + '…', x, y + CH + 8);
-    g.fillStyle = TIER_COLOR[tier];
-    g.font = '15px VSingerSans, sans-serif';
-    const rate = r.card && r.card.rate_pct != null ? ` ${r.card.rate_pct}%` : '';
-    g.fillText(`${TIER_NAME[tier]}${rate}`, x, y + CH + 34);
-  }
-
-  fs.mkdirSync(outDir, { recursive: true });
-  const out = path.join(outDir, `draw_${Date.now()}.jpg`);
-  fs.writeFileSync(out, await canvas.encode('jpeg', 90));
-  return out;
+  const { render } = require('./render/result');
+  return render({ Canvas, ...opts });
 }
 
 module.exports = { render, renderResult };

package/lib/render/kit.js

@@ -0,0 +1,166 @@
+'use strict';
+/** 渲染基础组件：背景 / 面板 / 卡片 / 角标 / 标题 / 文本 */
+const { FONT, COLOR, TIER, RADIUS, SPACE, FONT_SIZE, tierOf } = require('./theme');
+
+function roundRect(g, x, y, w, h, r) {
+  g.beginPath();
+  if (g.roundRect) {
+    g.roundRect(x, y, w, h, r);
+  } else {
+    g.moveTo(x + r, y);
+    g.arcTo(x + w, y, x + w, y + h, r);
+    g.arcTo(x + w, y + h, x, y + h, r);
+    g.arcTo(x, y + h, x, y, r);
+    g.arcTo(x, y, x + w, y, r);
+    g.closePath();
+  }
+  return g;
+}
+
+/** 背景：深蓝渐变 + 顶部柔光 + 底部压暗 */
+function background(g, W, H) {
+  const bg = g.createLinearGradient(0, 0, W * 0.6, H);
+  bg.addColorStop(0, COLOR.bg2);
+  bg.addColorStop(0.55, COLOR.bg1);
+  bg.addColorStop(1, COLOR.bg0);
+  g.fillStyle = bg;
+  g.fillRect(0, 0, W, H);
+
+  const glow = g.createRadialGradient(W * 0.25, 0, 10, W * 0.25, 0, Math.max(W, H) * 0.75);
+  glow.addColorStop(0, COLOR.glow);
+  glow.addColorStop(1, 'rgba(120,180,255,0)');
+  g.fillStyle = glow;
+  g.fillRect(0, 0, W, H);
+}
+
+/** 毛玻璃面板 */
+function panel(g, x, y, w, h, opts = {}) {
+  const r = opts.radius == null ? RADIUS.lg : opts.radius;
+  g.save();
+  roundRect(g, x, y, w, h, r);
+  g.fillStyle = opts.fill || COLOR.panel;
+  g.fill();
+  g.strokeStyle = opts.stroke || COLOR.panelBorder;
+  g.lineWidth = opts.lineWidth || 1;
+  g.stroke();
+  g.restore();
+}
+
+/** 标题区：主标题 + 副标题 + 强调短线 */
+function header(g, x, y, W, title, subtitle) {
+  g.textBaseline = 'top';
+  g.fillStyle = COLOR.accent;
+  roundRect(g, x, y + 4, 6, 34, 3);
+  g.fill();
+
+  g.fillStyle = COLOR.text;
+  g.font = `bold ${FONT_SIZE.h1}px ${FONT}`;
+  const maxW = W - 40;
+  let t = String(title || '');
+  while (t.length > 2 && g.measureText(t).width > maxW) t = t.slice(0, -1);
+  g.fillText(t.length < String(title).length ? t.slice(0, -1) + '…' : t, x + 16, y);
+
+  if (subtitle) {
+    g.fillStyle = COLOR.textSub;
+    g.font = `${FONT_SIZE.body}px ${FONT}`;
+    g.fillText(String(subtitle), x + 16, y + 42);
+  }
+}
+
+/** 文本截断 */
+function fit(g, text, font, maxW) {
+  const s = String(text == null ? '' : text);
+  g.font = font;
+  if (g.measureText(s).width <= maxW) return s;
+  let t = s;
+  while (t.length > 1 && g.measureText(t + '…').width > maxW) t = t.slice(0, -1);
+  return t + '…';
+}
+
+/**
+ * 卡牌组件（图鉴 / 结果图共用）
+ * @param {object} o {img, name, rate, tier, laser, count, x, y, w, h, owned}
+ */
+async function card(g, Canvas, o) {
+  const w = o.w || 170;
+  const h = o.h || Math.round(w * 1.43);
+  const r = RADIUS.md;
+  const tier = o.tier == null ? tierOf({ card_scarcity: o.scarcity }) : o.tier;
+  const tc = (TIER[tier] || TIER[10]).color;
+
+  // 底 + 图
+  g.save();
+  roundRect(g, o.x, o.y, w, h, r);
+  g.clip();
+  g.fillStyle = COLOR.cardBg;
+  g.fillRect(o.x, o.y, w, h);
+  if (o.img) {
+    try {
+      g.drawImage(o.img, o.x, o.y, w, h);
+    } catch { /* 忽略 */ }
+  }
+  if (o.owned === false) {
+    g.fillStyle = 'rgba(0,0,0,0.42)';
+    g.fillRect(o.x, o.y, w, h);
+  }
+  g.restore();
+
+  // 边框（档位色 + 拥有加粗）
+  g.save();
+  roundRect(g, o.x + 1, o.y + 1, w - 2, h - 2, r - 1);
+  g.strokeStyle = o.owned === false ? 'rgba(160,166,180,0.55)' : tc;
+  g.lineWidth = o.owned === false ? 1.5 : 2.5;
+  g.stroke();
+  g.restore();
+
+  // 档位角标
+  const tagFile = o.tagsDir ? require('node:path').join(o.tagsDir, (TIER[tier] || {}).tag || '') : '';
+  if ((TIER[tier] || {}).tag && o.tagsDir && require('node:fs').existsSync(tagFile)) {
+    try {
+      const ti = await Canvas.loadImage(tagFile);
+      const tw = w * 0.46;
+      g.drawImage(ti, o.x + 4, o.y + 4, tw, (ti.height / ti.width) * tw);
+    } catch { /* 忽略 */ }
+  }
+  // 镭射标
+  if (o.laser && o.tagsDir) {
+    const holo = require('node:path').join(o.tagsDir, 'tag_holo.png');
+    if (require('node:fs').existsSync(holo)) {
+      try {
+        const hi = await Canvas.loadImage(holo);
+        const hw = w * 0.36;
+        const hh = (hi.height / hi.width) * hw;
+        g.drawImage(hi, o.x + (w - hw) / 2, o.y + h - hh - 6, hw, hh);
+      } catch { /* 忽略 */ }
+    }
+  }
+  // 重复次数
+  if (o.count > 1) {
+    g.fillStyle = 'rgba(0,0,0,0.72)';
+    roundRect(g, o.x + w - 46, o.y + 6, 40, 22, 8);
+    g.fill();
+    g.fillStyle = '#8cffaa';
+    g.font = `bold 14px ${FONT}`;
+    g.fillText(`×${o.count}`, o.x + w - 40, o.y + 9);
+  }
+
+  // 名称 / 档位概率
+  g.fillStyle = o.owned === false ? COLOR.textDim : COLOR.text;
+  g.font = `bold ${o.nameSize || FONT_SIZE.h3}px ${FONT}`;
+  g.fillText(fit(g, o.name, `bold ${o.nameSize || FONT_SIZE.h3}px ${FONT}`, w), o.x, o.y + h + 8);
+  if (o.rate != null || o.tierName) {
+    g.fillStyle = tc;
+    g.font = `${o.metaSize || FONT_SIZE.meta}px ${FONT}`;
+    const meta = `${o.tierName || (TIER[tier] || TIER[10]).name}${o.rate != null ? ' ' + o.rate + '%' : ''}`;
+    g.fillText(fit(g, meta, `${o.metaSize || FONT_SIZE.meta}px ${FONT}`, w), o.x, o.y + h + 32);
+  }
+}
+
+/** 页脚 */
+function footer(g, W, H, text) {
+  g.fillStyle = COLOR.textDim;
+  g.font = `${FONT_SIZE.tiny}px ${FONT}`;
+  g.fillText(String(text), SPACE.lg, H - 22);
+}
+
+module.exports = { roundRect, background, panel, header, card, footer, fit };

package/lib/render/result.js

@@ -0,0 +1,77 @@
+'use strict';
+/** 抽卡结果布局（统一渲染系统） */
+const path = require('node:path');
+const fs = require('node:fs');
+const theme = require('./theme');
+const kit = require('./kit');
+
+/**
+ * @param {object} o
+ * @param {object} o.Canvas @napi-rs/canvas
+ * @param {Array}  o.results [{hash|h, card, laser}]
+ * @param {string} o.title
+ * @param {string} o.outDir
+ * @param {string} o.tagsDir
+ * @param {string} o.thumbsDir
+ * @param {number} [o.thumbW]
+ */
+async function render(o) {
+  const { Canvas, tagsDir, thumbsDir, outDir } = o;
+  const results = o.results || [];
+  const n = Math.max(1, results.length);
+  const perRow = n <= 3 ? n : Math.min(5, n);
+  const rows = Math.ceil(n / perRow);
+  const cw = n === 1 ? 300 : 170;
+  const ch = Math.round(cw * 1.43);
+  const label = theme.CARD.label;
+  const gap = theme.CARD.gap;
+  const pad = theme.SPACE.xl;
+  const head = 120;
+
+  const W = Math.max(560, pad * 2 + perRow * cw + (perRow - 1) * gap);
+  const H = head + rows * (ch + label + gap) + pad;
+
+  const canvas = Canvas.createCanvas(W, H);
+  const g = canvas.getContext('2d');
+  kit.background(g, W, H);
+  kit.header(g, pad - 16, 30, W, o.title, `共 ${n} 张 ｜ 抽卡结果`);
+
+  const rowW = perRow * cw + (perRow - 1) * gap;
+  const x0 = Math.round((W - rowW) / 2);
+
+  for (let i = 0; i < results.length; i++) {
+    const r = results[i];
+    const hash = r.hash || r.h;
+    const col = i % perRow;
+    const row = Math.floor(i / perRow);
+    const x = x0 + col * (cw + gap);
+    const y = head + row * (ch + label + gap);
+
+    let img = null;
+    const f = hash ? path.join(thumbsDir, hash + '.jpg') : '';
+    if (f && fs.existsSync(f)) {
+      try { img = await Canvas.loadImage(f); } catch { img = null; }
+    }
+
+    await kit.card(g, Canvas, {
+      img, x, y, w: cw, h: ch,
+      name: (r.card && r.card.card_name) || '',
+      rate: r.card && r.card.rate_pct,
+      tier: theme.tierOf(r.card),
+      laser: Boolean(r.laser),
+      tagsDir,
+      owned: true,
+      nameSize: cw >= 260 ? 22 : 18,
+      metaSize: cw >= 260 ? 17 : 14,
+    });
+  }
+
+  kit.footer(g, W, H, 'VSinger 收藏集 · 抽卡结果');
+
+  fs.mkdirSync(outDir, { recursive: true });
+  const out = path.join(outDir, `draw_${Date.now()}.jpg`);
+  fs.writeFileSync(out, await canvas.encode('jpeg', 90));
+  return out;
+}
+
+module.exports = { render };

package/lib/render/theme.js

@@ -0,0 +1,40 @@
+'use strict';
+/** 设计令牌：所有渲染图共用这一套 */
+const FONT = 'VSingerSans, sans-serif';
+
+const COLOR = {
+  bg0: '#0d1524',
+  bg1: '#16263f',
+  bg2: '#111c33',
+  glow: 'rgba(120,180,255,0.28)',
+  text: '#ffffff',
+  textSub: 'rgba(200,215,240,0.72)',
+  textDim: 'rgba(200,207,220,0.55)',
+  panel: 'rgba(16,24,40,0.72)',
+  panelBorder: 'rgba(255,255,255,0.08)',
+  accent: '#66ccff',
+  accentSoft: 'rgba(102,204,255,0.18)',
+  cardBg: '#1b2436',
+  cardBorder: 'rgba(255,255,255,0.10)',
+};
+
+const TIER = {
+  40: { name: '大隐藏', color: '#ff6d84', tag: 'tag_40.webp' },
+  30: { name: '小隐藏', color: '#ffb44d', tag: 'tag_30.webp' },
+  20: { name: '稀有', color: '#8fc0ff', tag: null },
+  10: { name: '普通', color: '#c3cad8', tag: null },
+};
+
+const RADIUS = { sm: 8, md: 12, lg: 16, xl: 22 };
+const SPACE = { xs: 8, sm: 12, md: 16, lg: 24, xl: 32 };
+const FONT_SIZE = { h1: 32, h2: 24, h3: 19, body: 16, meta: 14, tiny: 12 };
+
+/** 卡片几何（图鉴与结果图共用） */
+const CARD = { w: 170, h: 243, label: 58, gap: 16 };
+
+function tierOf(card) {
+  const sc = Number((card && card.card_scarcity) || 10);
+  return sc === 40 ? 40 : sc === 30 ? 30 : sc === 20 ? 20 : 10;
+}
+
+module.exports = { FONT, COLOR, TIER, RADIUS, SPACE, FONT_SIZE, CARD, tierOf };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "koishi-plugin-vsinger-gacha",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "VSinger 收藏集抽卡 / 签到积分 / 图鉴（Koishi 插件，一次性安装）",
   "main": "lib/index.js",
   "files": [