dsh-feiyu-wardrobe 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 0.2.0 — 2026-10-30
+
+「换装是视觉性的」：补齐出图能力，可直接发 QQ 群 / 评论区。
+
+### 新增
+
+- `/fish png [尺寸]`：渲染当前穿搭的 PNG（默认 768，可选 256–1600）
+- `dsh-feiyu-report --png <path>` / `--size <像素>`：CLI 直接出图
+- PNG 合成：360×360 场景 + 底部水印条（repo 地址 + 鱼名 + 饲养天数）
+- 依赖 `@resvg/resvg-js`（预编译二进制，本地渲染，无浏览器/无网络）
+- 新增 `screenshots.json`（插件市场 / awesome 列表详情页展示卡图）
+- README 增加「接 QQ / 聊天机器人」章节
+
+### 验证
+
+- `npm run verify`：tsc --checkJs + 53 tests
+
 ## 0.1.0 — 2026-10-30
 
 第一个公开版本：把 DSH 的 token 花销变成大肥鱼的衣柜。

package/README.md

@@ -6,7 +6,7 @@
 
 > 把 DSH 的 token 账单，变成一条鱼的衣柜。
 
-当前版本：`0.1.0`
+当前版本：`0.2.0`
 
 DeepSeek Harness 插件：agent 每花掉一次 token，你的大肥鱼就**吃一顿饭**；一顿顿饭攒成**鱼粮币**，鱼粮币解锁 **21 件原创 SVG 穿搭**；`/fish report` 生成一张 **1080×1440 的饲养报告卡**，可以直接发小红书 / QQ 群。
 
@@ -14,11 +14,14 @@ DeepSeek Harness 插件：agent 每花掉一次 token，你的大肥鱼就**吃
 - 🎨 **原创形象**：胖鲸 + 21 件手绘 SVG 单品（帽子 / 面部 / 颈部 / 身体 / 手持 / 背景），不打包任何画师二创素材
 - 🔒 **纯本地**：零额外模型调用、零网络请求、不存聊天原文，只存聚合数字
 - 📸 **可晒卡**：饲养天数、投喂金额、吃掉 token、亲密度、心情、近 7 天伙食、今日穿搭
+- 🖼️ **可视化出图**：`/fish png` 或 `dsh-feiyu-report --png` 直接渲染 PNG（默认 768，带 repo 水印），无需浏览器，可直接发 QQ 群 / B站评论区 / 小红书
 
 ![饲养报告示例](https://raw.githubusercontent.com/GIT121995/dsh-feiyu-wardrobe/main/docs/preview/card.png)
 
 ![衣柜目录](https://raw.githubusercontent.com/GIT121995/dsh-feiyu-wardrobe/main/docs/preview/wardrobe.png)
 
+![出图示例](https://raw.githubusercontent.com/GIT121995/dsh-feiyu-wardrobe/main/docs/preview/fish-demo.png)
+
 > 名字与形象都是原创，属于社区玩梗项目，**不是 DeepSeek 官方产品**；「大肥鱼」一词来自社区对 DeepSeek 蓝色鲸鱼标识的可爱误认。
 
 ---
@@ -51,6 +54,7 @@ dsh --profile web
 | `/fish wear <名字\|id>` | 换上已拥有的单品 |
 | `/fish takeoff <部位>` | 脱掉某个部位（`bg` / `body` / `neck` / `face` / `hand` / `hat`） |
 | `/fish rename <名字>` | 给鱼改名 |
+| `/fish png [尺寸]` | 渲染当前穿搭的 PNG（默认 768；可直接发群） |
 | `/fish report` | 生成饲养报告卡（HTML，1080×1440） |
 | `/fish help` | 帮助 |
 
@@ -67,13 +71,17 @@ dsh --profile web
 ## 报告卡 CLI
 
 ```sh
-dsh-feiyu-report                    # 用本机 state 生成卡片
-dsh-feiyu-report --demo             # 没有鱼也能预览一张演示卡
+dsh-feiyu-report                    # 用本机 state 生成 HTML 卡片
+dsh-feiyu-report --png fish.png     # 直接出 PNG（QQ 群 / 评论区可用）
+dsh-feiyu-report --png fish.png --size 1024
+dsh-feiyu-report --demo --png demo.png
 dsh-feiyu-report --open             # 生成后用默认浏览器打开
-dsh-feiyu-report --out card.html    # 自定义输出路径
+dsh-feiyu-report --out card.html    # 自定义 HTML 输出路径
 dsh-feiyu-report --sheet            # 渲染整个衣柜目录页
 ```
 
+出图是纯本地 SVG → PNG（`@resvg/resvg-js`，预编译二进制），不调用浏览器、不联网。
+
 ## 配置
 
 在 profile 的 `cordis.patch.yml` 里覆盖（都是可选项）：
@@ -99,11 +107,22 @@ dsh-feiyu-report --sheet            # 渲染整个衣柜目录页
 - **非官方**：本项目是社区插件，不属于 DeepSeek 官方项目；「大肥鱼」相关梗的归属属于社区。
 - 后续开放「皮肤包」格式时，同样只支持**本地加载**用户自己的素材，不代分发未授权作品。
 
+## 接 QQ / 聊天机器人（出图能力）
+
+「换装」是视觉性的，所以核心能力是**出图**而不是出文字：
+
+- 任何能执行命令的 QQ 机器人（LangBot、DSH + QQ 适配器等）都可以在 `wear` 之后调一次
+  `dsh-feiyu-report --png /tmp/fish.png`，把 PNG 直接发到群里；
+- DSH 内也可以用 `/fish png` 生成文件，再由机器人发送；
+- 图片带仓库水印，别人转发一次就是一次曝光。
+
+> 注意：本项目只负责「渲染并给出 PNG 文件」，QQ 平台的接入、账号风控由你选用的机器人框架负责。
+
 ## 兼容性与测试
 
 - DSH `>= 0.1.0`（本版在 `0.2.1-rc.2` 实测）
 - Node.js `>= 22.5`，零运行时依赖
-- `npm run verify` = `tsc --checkJs` 类型检查 + 49 个单元/集成测试（定价、经济、状态迁移、渲染、命令、CLI）
+- `npm run verify` = `tsc --checkJs` 类型检查 + 53 个单元/集成测试（定价、经济、状态迁移、渲染、PNG、命令、CLI）
 
 ```sh
 npm run verify
@@ -111,7 +130,7 @@ npm run verify
 
 ## 路线图
 
-- **v0.2**：DSH Web 面板（页内衣橱 UI）、皮肤包格式（`.dshskin`，本地加载）、心情联动穿搭
+- **v0.3**：DSH Web 面板（页内衣橱 UI）、皮肤包格式（`.dshskin`，本地加载）、心情联动穿搭
 - **v0.3**：多鱼塘（多会话鱼）、每日小任务、社区衣服交换码
 - 更远：把 `dsh-memory-gate` 的记忆做成「鱼记得你说过什么」，但依然只读聚合摘要
 

package/bin/feiyu-report.mjs

@@ -13,12 +13,13 @@
 import { existsSync, readFileSync } from 'node:fs';
 import { spawn } from 'node:child_process';
 import { dirname, join, resolve } from 'node:path';
+import { renderFishPng } from '../lib/image.js';
 import { renderWardrobeSheetHtml } from '../lib/render.js';
 import { createDemoState } from '../lib/demo.js';
 import { validateConfig } from '../lib/config.js';
 import { loadState } from '../lib/state.js';
 import { defaultReportPath, writeReportCard } from '../lib/report.js';
-import { atomicWriteFile } from '../lib/util.js';
+import { atomicWriteBuffer, atomicWriteFile } from '../lib/util.js';
 
 const PACKAGE = JSON.parse(readFileSync(new URL('../package.json', import.meta.url), 'utf8'));
 const VERSION = PACKAGE.version ?? '0.0.0';
@@ -29,7 +30,9 @@ const HELP = `dsh-feiyu-report — 大肥鱼衣橱饲养报告卡
   dsh-feiyu-report                 从本机 state 生成报告卡
   dsh-feiyu-report --demo          用演示鱼生成一张预览卡
   dsh-feiyu-report --sheet         渲染整个衣柜目录页
-  dsh-feiyu-report --out <path>    指定输出路径
+  dsh-feiyu-report --png <path>    渲染当前穿搭的 PNG（可直接发 QQ 群）
+  dsh-feiyu-report --size <像素>   PNG 边长（256–1600，默认 768）
+  dsh-feiyu-report --out <path>    指定 HTML 输出路径
   dsh-feiyu-report --state <path>  指定 state.json
   dsh-feiyu-report --open          生成后用默认浏览器打开
   dsh-feiyu-report --version       版本号
@@ -47,6 +50,8 @@ function parseArgs(argv) {
 		help: false,
 		version: false,
 		out: null,
+		png: null,
+		size: null,
 		state: null,
 	};
 	for (let index = 0; index < argv.length; index += 1) {
@@ -74,6 +79,16 @@ function parseArgs(argv) {
 				index += 1;
 				break;
 			}
+			case '--png': {
+				options.png = argv[index + 1] ?? null;
+				index += 1;
+				break;
+			}
+			case '--size': {
+				options.size = argv[index + 1] ?? null;
+				index += 1;
+				break;
+			}
 			case '--state': {
 				options.state = argv[index + 1] ?? null;
 				index += 1;
@@ -134,6 +149,20 @@ function main() {
 		const loaded = loadState(config.statePath, config);
 		state = loaded.state;
 	}
+	if (options.png) {
+		const sizeValue = options.size == null ? undefined : Number(options.size);
+		if (sizeValue !== undefined && (!Number.isFinite(sizeValue) || sizeValue < 256 || sizeValue > 1600)) {
+			throw new Error('--size 需要 256–1600 之间的整数');
+		}
+		const png = renderFishPng(state, config, {
+			...(sizeValue === undefined ? {} : { size: sizeValue }),
+		});
+		const pngPath = resolve(options.png);
+		atomicWriteBuffer(pngPath, png);
+		process.stdout.write(`${pngPath}\n`);
+		if (options.open) openInBrowser(pngPath);
+		return;
+	}
 	const outPath = writeReportCard(state, config, {
 		...(options.out ? { outPath: resolve(options.out) } : {}),
 	});

package/lib/commands.js

@@ -6,8 +6,10 @@
 
 import { ITEMS, RARITIES, SLOT_ORDER, findItem, rarityLabel, slotLabel } from './catalog.js';
 import { summaryOf } from './economy.js';
+import { renderFishPng } from './image.js';
 import { writeReportCard } from './report.js';
-import { formatCNY, formatCoins, formatTokens } from './util.js';
+import { atomicWriteBuffer, formatCNY, formatCoins, formatTokens } from './util.js';
+import { dirname, join } from 'node:path';
 
 const USAGE = [
 	'/fish                    看鱼今天的状态',
@@ -16,6 +18,7 @@ const USAGE = [
 	'/fish wear <名字|id>      换上已拥有的衣服',
 	'/fish takeoff <部位>      脱掉某个部位（bg/body/neck/face/hand/hat）',
 	'/fish rename <名字>       给鱼改名',
+	'/fish png [尺寸]          渲染当前穿搭的 PNG（默认 768，可直接发群）',
 	'/fish report             生成一张可晒的饲养报告卡',
 	'/fish help               显示这份说明',
 ].join('\n');
@@ -114,6 +117,20 @@ export function executeFishCommand(runtime, rawInput, options = {}) {
 				const result = runtime.rename(tokens.join(' '), now);
 				return { kind: result.ok ? 'success' : 'error', text: result.message };
 			}
+			case 'png':
+			case 'image':
+			case 'img': {
+				const requested = Number(tokens[0]);
+				const size = Number.isFinite(requested) && requested >= 256 ? Math.min(1600, Math.round(requested)) : undefined;
+				const png = renderFishPng(runtime.state, runtime.config, { now, ...(size ? { size } : {}) });
+				const stamp = new Date(now).toISOString().replace(/[:.]/g, '-').slice(0, 19);
+				const outPath = join(dirname(runtime.config.statePath), `fish-${stamp}.png`);
+				atomicWriteBuffer(outPath, png);
+				return {
+					kind: 'success',
+					text: `出图了：${outPath}\n直接把这张 PNG 发到 QQ 群 / B站评论区即可。`,
+				};
+			}
 			case 'report':
 			case 'card': {
 				const path = writeReportCard(runtime.state, runtime.config, { now });

package/lib/image.js

@@ -0,0 +1,93 @@
+/**
+ * PNG rendering: turns the 360×360 scene into a shareable image with no
+ * browser and no network. This is the "visual" half of the wardrobe — the
+ * output can be dropped into a QQ group, a B站 comment or a phone album.
+ *
+ * Uses @resvg/resvg-js (prebuilt Rust binding) so rendering is deterministic
+ * and fast; the only external input is the local state file.
+ * @module dsh-feiyu-wardrobe/image
+ */
+
+import { Resvg } from '@resvg/resvg-js';
+import { moodOf } from './economy.js';
+import { CANVAS, sceneInner } from './render.js';
+
+export const DEFAULT_PNG_SIZE = 768;
+export const FOOTER_RATIO = 0.085;
+
+/**
+ * @param {string} text
+ * @returns {string}
+ */
+function escapeXml(text) {
+	return String(text)
+		.replaceAll('&', '&')
+		.replaceAll('<', '&lt;')
+		.replaceAll('>', '&gt;')
+		.replaceAll('"', '&quot;')
+		.replaceAll("'", '&apos;');
+}
+
+/**
+ * Build the full PNG-ready SVG: the scene square plus an optional footer strip
+ * carrying the repo URL and the fish's name.
+ * @param {import('./state.js').FishState} state
+ * @param {import('./config.js').FeiyuConfig} config
+ * @param {{ now?: number, size?: number, watermark?: boolean }} [options]
+ * @returns {{ svg: string, width: number, height: number, footerHeight: number }}
+ */
+export function buildPngSvg(state, config, options = {}) {
+	const size = Math.max(256, Math.min(1600, Math.round(options.size ?? DEFAULT_PNG_SIZE)));
+	const watermark = options.watermark !== false;
+	const now = options.now ?? Date.now();
+	const mood = moodOf(state, now, config);
+	const scale = size / CANVAS;
+	const footerHeight = watermark ? Math.round(size * FOOTER_RATIO) : 0;
+	const height = size + footerHeight;
+	const fontSize = Math.max(12, Math.round(size * 0.024));
+	const inner = sceneInner(state, { face: mood.face });
+	const footer = watermark
+		? `<g font-family="'Noto Sans CJK SC','PingFang SC','Microsoft YaHei',sans-serif">
+      <rect x="0" y="${size}" width="${size}" height="${footerHeight}" fill="#0D1524"/>
+      <text x="${Math.round(size * 0.035)}" y="${size + Math.round(footerHeight * 0.62)}"
+        font-size="${fontSize}" fill="#9FB0C8">大肥鱼衣橱 · github.com/GIT121995/dsh-feiyu-wardrobe</text>
+      <text x="${size - Math.round(size * 0.035)}" y="${size + Math.round(footerHeight * 0.62)}"
+        font-size="${fontSize}" fill="#F5C542" text-anchor="end">${escapeXml(state.fishName)} · 第 ${Math.max(1, Math.ceil((now - state.bornAt) / 86_400_000))} 天</text>
+    </g>`
+		: '';
+	const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${height}" viewBox="0 0 ${size} ${height}">
+  <rect width="${size}" height="${height}" fill="#0D1524"/>
+  <g transform="scale(${scale})">${inner}</g>
+  ${footer}
+</svg>`;
+	return { svg, width: size, height, footerHeight };
+}
+
+/**
+ * Render the dressed fish as a PNG buffer.
+ * @param {import('./state.js').FishState} state
+ * @param {import('./config.js').FeiyuConfig} config
+ * @param {{ now?: number, size?: number, watermark?: boolean }} [options]
+ * @returns {Buffer}
+ */
+export function renderFishPng(state, config, options = {}) {
+	const { svg, width, height } = buildPngSvg(state, config, options);
+	const renderer = new Resvg(svg, {
+		fitTo: { mode: 'width', value: width },
+		background: '#0D1524',
+		font: { loadSystemFonts: true, defaultFontFamily: 'Noto Sans CJK SC' },
+	});
+	return Buffer.from(renderer.render().asPng());
+}
+
+/**
+ * PNG IHDR dimensions (for tests and CLI logs).
+ * @param {Buffer} png
+ * @returns {{ width: number, height: number }}
+ */
+export function pngSize(png) {
+	if (!Buffer.isBuffer(png) || png.length < 24) return { width: 0, height: 0 };
+	const signature = png.subarray(0, 8).toString('hex');
+	if (signature !== '89504e470d0a1a0a') return { width: 0, height: 0 };
+	return { width: png.readUInt32BE(16), height: png.readUInt32BE(20) };
+}

package/lib/util.js

@@ -50,6 +50,18 @@ export function atomicWriteFile(path, text) {
 	renameSync(tmp, path);
 }
 
+/**
+ * Write a Buffer atomically (temp file + rename).
+ * @param {string} path
+ * @param {Buffer} buffer
+ */
+export function atomicWriteBuffer(path, buffer) {
+	ensureParent(path);
+	const tmp = `${path}.${process.pid}.${Math.random().toString(36).slice(2, 8)}.tmp`;
+	writeFileSync(tmp, buffer);
+	renameSync(tmp, path);
+}
+
 /**
  * Serialize and write JSON atomically.
  * @param {string} path

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-feiyu-wardrobe",
-  "version": "0.1.0",
-  "description": "大肥鱼衣橱 — a chubby-whale wardrobe economy for DeepSeek Harness: every token you burn becomes fish food, every meal buys outfits for your fish. Local-only, no extra model calls, no chat text stored.",
+  "version": "0.2.0",
+  "description": "大肥鱼衣橱 — DSH 插件：token 花销变鱼粮，解锁 21 件原创换装，一键出 PNG 可发 QQ 群 / 1080×1440 饲养报告卡（纯本地，零额外模型调用）",
   "license": "MIT",
   "type": "module",
   "main": "./lib/index.js",
@@ -22,7 +22,9 @@
     "README.md",
     "CHANGELOG.md",
     "LICENSE",
-    "docs/preview"
+    "docs/preview",
+    "screenshots.json",
+    "docs/preview/fish-demo.png"
   ],
   "scripts": {
     "typecheck": "tsc -p tsconfig.json",
@@ -32,6 +34,7 @@
     "preview": "node scripts/preview.mjs"
   },
   "keywords": [
+    "qq-bot",
     "deepseek",
     "deepseek-harness",
     "dsh",
@@ -70,5 +73,8 @@
   "homepage": "https://github.com/GIT121995/dsh-feiyu-wardrobe#readme",
   "bugs": {
     "url": "https://github.com/GIT121995/dsh-feiyu-wardrobe/issues"
+  },
+  "dependencies": {
+    "@resvg/resvg-js": "^2.6.2"
   }
 }

package/screenshots.json

@@ -0,0 +1,5 @@
+[
+  "docs/preview/card.png",
+  "docs/preview/fish-demo.png",
+  "docs/preview/wardrobe.png"
+]