koishi-plugin-vsinger-gacha 1.2.1 → 1.4.0

package/README.md

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

package/lib/handbook.js

@@ -9,6 +9,10 @@ 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');
+const theme = require('./render/theme');
+const COLOR = theme.COLOR;
+const ctx_fs = require('node:fs');
 
 let Canvas = null;
 /** 按需加载画布（没装也不影响抽卡/积分） */
@@ -36,7 +40,7 @@ const TH = 200;
 const LABEL_H = 62;
 const GAP = 12;
 const PAD = 24;
-const HEAD = 100;
+const HEAD = 128;
 const POOL_TITLE_H = 34;
 const SERIES_H = 44;
 const COLS_PER_COL = 8;
@@ -105,7 +109,7 @@ async function ensureThumbs(game) {
   return dir;
 }
 
-async function render({ game, store, uid, displayName, outDir, tagsDir, thumbsDir }) {
+async function render({ game, store, uid, displayName, outDir, tagsDir, thumbsDir, wallpaperDir }) {
   const Canvas = getCanvas();
 
   // ★ 优先用包内自带缩略图（assets/thumbs，423 张约 4.7MB），缺失才现场生成
@@ -199,28 +203,26 @@ async function render({ game, store, uid, displayName, outDir, tagsDir, thumbsDi
     const canvas = Canvas.createCanvas(W, H);
     const g = canvas.getContext('2d');
 
-    // 背景：液态玻璃（渐变 + 光晕 + 噪点）
-    const bg = g.createLinearGradient(0, 0, W, H);
-    bg.addColorStop(0, '#101a2e');
-    bg.addColorStop(0.45, '#16304f');
-    bg.addColorStop(1, '#0e1626');
-    g.fillStyle = bg;
-    g.fillRect(0, 0, W, H);
-    const glow = g.createRadialGradient(W * 0.2, H * 0.1, 10, W * 0.2, H * 0.1, Math.max(W, H) * 0.8);
-    glow.addColorStop(0, 'rgba(120,180,255,0.35)');
-    glow.addColorStop(1, 'rgba(120,180,255,0)');
-    g.fillStyle = glow;
-    g.fillRect(0, 0, W, H);
+    // 背景：插画 + 白蒙层（统一渲染系统）
+    const wall = wallpaperDir ? (() => {
+      try {
+        const list = ctx_fs.readdirSync(wallpaperDir).filter((f) => /\.(jpe?g|png|webp)$/i.test(f));
+        return list.length ? require('node:path').join(wallpaperDir, list[Math.floor(Math.random() * list.length)]) : null;
+      } catch { return null; }
+    })() : null;
+    await kit.background(g, Canvas, W, H, wall);
 
-    // 标题
-    g.fillStyle = '#ffffff';
-    g.font = 'bold 44px VSingerSans, sans-serif';
-    g.fillText('VSinger 收藏集 · 我的图鉴', PAD, 56);
+    // 标题（统一组件）
     const gotN = Object.keys(owned).length;
     const dupN = Object.values(owned).reduce((a, b) => a + Math.max(0, b - 1), 0);
-    g.font = '22px VSingerSans, sans-serif';
-    g.fillStyle = 'rgba(235,240,250,0.85)';
-    g.fillText(`${displayName}　已收集 ${gotN}/${game.cards.length}　重复 ${dupN} 张`, PAD, 88);
+    kit.header(g, {
+      x: PAD, y: 34, W: W - PAD * 2,
+      title: 'VSinger 收藏集 · 我的图鉴',
+      subtitle: `${displayName}　已收集 ${gotN}/${game.cards.length}　重复 ${dupN} 张`,
+      badge: `${gotN}/${game.cards.length}`,
+      badgeSub: '收集进度',
+      progress: game.cards.length ? gotN / game.cards.length : 0,
+    });
 
     for (let ci = 0; ci < part.length; ci++) {
       const grp = part[ci];
@@ -229,87 +231,43 @@ async function render({ game, store, uid, displayName, outDir, tagsDir, thumbsDi
       let prevAct = null;
       for (const blk of grp) {
         if (blk.act !== prevAct) {
-          g.fillStyle = SERIES_COLOR[blk.act] || '#3c5a96';
-          g.fillRect(x0, y, COLW, SERIES_H - 8);
-          g.fillStyle = '#fff';
-          g.font = 'bold 22px VSingerSans, sans-serif';
-          g.fillText(blk.act, x0 + 12, y + 32);
+          kit.panel(g, x0, y, COLW, SERIES_H - 8, { radius: 14, fill: 'rgba(255,255,255,0.88)' });
+          g.fillStyle = COLOR.accent;
+          kit.roundRect(g, x0 + 12, y + 12, 5, SERIES_H - 32, 3);
+          g.fill();
+          g.fillStyle = COLOR.text;
+          g.font = 'bold 21px VSingerSans, sans-serif';
+          g.fillText(blk.act, x0 + 26, y + 22);
           y += SERIES_H;
           prevAct = blk.act;
         }
         // 池标题（玻璃条）
-        g.fillStyle = 'rgba(8,14,30,0.85)';
-        g.fillRect(x0, y, COLW, POOL_TITLE_H - 10);
-        g.fillStyle = '#ffd682';
-        g.font = 'bold 22px VSingerSans, sans-serif';
-        g.fillText(`${blk.pool}   ${blk.got}/${blk.arr.length}`, x0 + 8, y + 24);
+        kit.panel(g, x0, y, COLW, POOL_TITLE_H - 10, { radius: 12, fill: 'rgba(255,255,255,0.78)' });
+        g.fillStyle = COLOR.accent;
+        g.font = 'bold 21px VSingerSans, sans-serif';
+        g.fillText(`${blk.pool}`, x0 + 12, y + 12);
+        g.fillStyle = COLOR.textSub;
+        g.font = '18px VSingerSans, sans-serif';
+        g.fillText(`${blk.got}/${blk.arr.length}`, x0 + COLW - 82, y + 14);
 
         for (let i = 0; i < blk.arr.length; i++) {
           const c = blk.arr[i];
           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 +289,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/index.js

@@ -368,6 +368,11 @@ function apply(ctx, config) {
               title,
               outDir: path.join(dataDir, 'out'),
               tagsDir,
+              wallpaperDir: config.wallpaperDir
+                ? config.wallpaperDir
+                : path.join(__dirname, '..', 'assets', 'wallpapers'),
+              badge: String(Math.round(Number(store.pu(uid).points || 0))),
+              badgeSub: '当前积分',
               thumbsDir: path.join(assetsDir, 'thumbs'),
             });
             await session.send(fileEl(out, 'image/jpeg', config.imageMode));

package/lib/render/kit.js

@@ -0,0 +1,212 @@
+'use strict';
+/** 渲染基础组件：浅色玻璃拟态 */
+const path = require('node:path');
+const fs = require('node:fs');
+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;
+}
+
+/** 背景：插画铺满 + 模糊 + 白色蒙层 */
+async function background(g, Canvas, W, H, wallpaper) {
+  g.fillStyle = '#eef3fa';
+  g.fillRect(0, 0, W, H);
+
+  if (wallpaper && fs.existsSync(wallpaper)) {
+    try {
+      const img = await Canvas.loadImage(wallpaper);
+      // 先用小尺寸绘制再放大 → 廉价模糊
+      const SW = Math.max(24, Math.round(W / 18));
+      const SH = Math.round(SW * (H / W));
+      const small = Canvas.createCanvas(SW, SH);
+      const sg = small.getContext('2d');
+      sg.drawImage(img, 0, 0, SW, SH);
+      g.save();
+      g.globalAlpha = 0.72;
+      g.drawImage(small, 0, 0, W, H);
+      g.restore();
+    } catch { /* 忽略 */ }
+  }
+
+  // 白色蒙层（左上更亮，保证文字清晰）
+  const grad = g.createLinearGradient(0, 0, W, H);
+  grad.addColorStop(0, 'rgba(255,255,255,0.82)');
+  grad.addColorStop(0.55, 'rgba(255,255,255,0.68)');
+  grad.addColorStop(1, 'rgba(235,244,255,0.78)');
+  g.fillStyle = grad;
+  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();
+  g.shadowColor = COLOR.shadow;
+  g.shadowBlur = 18;
+  g.shadowOffsetY = 4;
+  roundRect(g, x, y, w, h, r);
+  g.fillStyle = opts.fill || COLOR.panel;
+  g.fill();
+  g.restore();
+  g.save();
+  roundRect(g, x, y, w, h, r);
+  g.strokeStyle = opts.stroke || COLOR.panelBorder;
+  g.lineWidth = 1.5;
+  g.stroke();
+  g.restore();
+}
+
+/**
+ * 头部（仿手账卡）：图标 + 标题 + 副标题 + 右侧数字徽章 + 进度条
+ */
+function header(g, o) {
+  const x = o.x;
+  const y = o.y;
+  const W = o.W;
+
+  // 圆形图标
+  const R = 22;
+  g.save();
+  g.beginPath();
+  g.arc(x + R, y + R + 4, R, 0, Math.PI * 2);
+  g.fillStyle = COLOR.accent;
+  g.fill();
+  g.fillStyle = '#fff';
+  g.font = `bold 22px ${FONT}`;
+  g.textBaseline = 'middle';
+  g.fillText('♪', x + R - 8, y + R + 4);
+  g.restore();
+
+  g.textBaseline = 'top';
+  g.fillStyle = COLOR.text;
+  g.font = `bold ${FONT_SIZE.h1}px ${FONT}`;
+  g.fillText(fit(g, o.title, `bold ${FONT_SIZE.h1}px ${FONT}`, W - 260), x + R * 2 + 14, y);
+
+  if (o.subtitle) {
+    g.fillStyle = COLOR.textSub;
+    g.font = `${FONT_SIZE.body}px ${FONT}`;
+    g.fillText(o.subtitle, x + R * 2 + 14, y + 40);
+  }
+
+  // 右侧徽章
+  if (o.badge != null) {
+    const bw = 118;
+    const bh = 58;
+    const bx = x + W - bw;
+    panel(g, bx, y - 4, bw, bh, { radius: RADIUS.md, fill: 'rgba(255,255,255,0.95)' });
+    g.fillStyle = COLOR.accent;
+    g.font = `bold 26px ${FONT}`;
+    g.fillText(String(o.badge), bx + 14, y + 6);
+    g.fillStyle = COLOR.textSub;
+    g.font = `12px ${FONT}`;
+    g.fillText(String(o.badgeSub || ''), bx + 14, y + 36);
+    // 进度条
+    const pct = Math.max(0, Math.min(1, Number(o.progress || 0)));
+    g.fillStyle = 'rgba(74,144,217,0.15)';
+    roundRect(g, bx + 10, y + bh - 6, bw - 20, 5, 3);
+    g.fill();
+    if (pct > 0) {
+      g.fillStyle = COLOR.accent;
+      roundRect(g, bx + 10, y + bh - 6, Math.max(4, (bw - 20) * pct), 5, 3);
+      g.fill();
+    }
+  }
+}
+
+/** 文本截断 */
+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 + '…';
+}
+
+/** 卡牌组件 */
+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(255,255,255,0.38)';
+    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(150,165,185,0.45)' : tc;
+  g.lineWidth = o.owned === false ? 1.5 : 2.5;
+  g.stroke();
+  g.restore();
+
+  const tagFile = o.tagsDir ? path.join(o.tagsDir, (TIER[tier] || {}).tag || '') : '';
+  if ((TIER[tier] || {}).tag && o.tagsDir && 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 = path.join(o.tagsDir, 'tag_holo.png');
+    if (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(31,42,58,0.82)';
+    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,95 @@
+'use strict';
+/** 抽卡结果布局：浅色玻璃手账风 */
+const path = require('node:path');
+const fs = require('node:fs');
+const theme = require('./theme');
+const kit = require('./kit');
+
+function pickWallpaper(dir) {
+  try {
+    const files = fs.readdirSync(dir).filter((f) => /\.(jpe?g|png|webp)$/i.test(f));
+    if (!files.length) return null;
+    return path.join(dir, files[Math.floor(Math.random() * files.length)]);
+  } catch { return null; }
+}
+
+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 = 132;
+  const panelPad = 20;
+
+  const W = Math.max(640, pad * 2 + panelPad * 2 + perRow * cw + (perRow - 1) * gap);
+  const H = head + rows * (ch + label + gap) + panelPad * 2 + pad;
+
+  const canvas = Canvas.createCanvas(W, H);
+  const g = canvas.getContext('2d');
+
+  const wall = o.wallpaperDir ? pickWallpaper(o.wallpaperDir) : null;
+  await kit.background(g, Canvas, W, H, wall);
+
+  kit.header(g, {
+    x: pad,
+    y: 28,
+    W: W - pad * 2,
+    title: o.title,
+    subtitle: `共 ${n} 张 ｜ 抽卡结果`,
+    badge: o.badge != null ? o.badge : '',
+    badgeSub: o.badgeSub || '',
+    progress: o.progress || 0,
+  });
+
+  // 白色玻璃大面板
+  const px = pad;
+  const py = head - 12;
+  const pw = W - pad * 2;
+  const ph = rows * (ch + label + gap) + panelPad * 2 - gap;
+  kit.panel(g, px, py, pw, ph, { radius: theme.RADIUS.xl, fill: 'rgba(255,255,255,0.72)' });
+
+  const rowW = perRow * cw + (perRow - 1) * gap;
+  const x0 = px + Math.round((pw - 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 = py + panelPad + 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 : 17,
+      metaSize: cw >= 260 ? 17 : 13,
+    });
+  }
+
+  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,39 @@
+'use strict';
+/** 设计令牌：浅色玻璃拟态（仿星轨手账） */
+const FONT = 'VSingerSans, sans-serif';
+
+const COLOR = {
+  // 浅色系
+  paper: '#ffffff',
+  text: '#1f2a3a',
+  textSub: '#5d6b80',
+  textDim: '#8b98ab',
+  accent: '#4a90d9',
+  accentSoft: 'rgba(74,144,217,0.12)',
+  panel: 'rgba(255,255,255,0.82)',
+  panelBorder: 'rgba(120,160,210,0.28)',
+  cardBg: '#f2f5fa',
+  cardBorder: 'rgba(120,150,190,0.25)',
+  shadow: 'rgba(60,90,130,0.18)',
+  // 深色兜底（保留给旧主题）
+  bg0: '#0d1524', bg1: '#16263f', bg2: '#111c33', glow: 'rgba(120,180,255,0.28)',
+};
+
+const TIER = {
+  40: { name: '大隐藏', color: '#e0607a', tag: 'tag_40.webp' },
+  30: { name: '小隐藏', color: '#e09a3c', tag: 'tag_30.webp' },
+  20: { name: '稀有', color: '#4a90d9', tag: null },
+  10: { name: '普通', color: '#8b98ab', tag: null },
+};
+
+const RADIUS = { sm: 10, md: 14, lg: 20, xl: 28 };
+const SPACE = { xs: 8, sm: 12, md: 16, lg: 24, xl: 32 };
+const FONT_SIZE = { h1: 30, h2: 24, h3: 18, 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.4.0",
   "description": "VSinger 收藏集抽卡 / 签到积分 / 图鉴（Koishi 插件，一次性安装）",
   "main": "lib/index.js",
   "files": [