@customize-agent/server 4.60.1 → 4.60.3

package/scripts/generate-brand-assets.cjs

@@ -0,0 +1,109 @@
+/**
+ * 站点图标生成（2026-10-13）：从**品牌月亮组件**里读形状，写出
+ * `public/favicon.svg`、`public/favicon.ico`、`public/apple-touch-icon.png`。
+ *
+ * ## 为什么要有这个脚本（而不是手放三个文件）
+ * 用户口径是「我们网站的 icon 也需要使用这个图标」——同一轮月亮的**三份格式**。
+ * 手工放三个文件的下场是可预期的：改了侧栏的月亮，图标还是上一版的（本仓对"两处各一份"的
+ * 那一类漂移有过太多次教训）。故：形状只有 `src/components/BrandMoon.tsx` 一个来源，
+ * 本脚本从那个文件里读 `BRAND_MOON_PATH` 与 `BRAND_MOON_ROTATION`，现场渲染出全部图标。
+ *
+ * ## 跑法（改了月亮形状就跑一次，并把三个产物一起提交）
+ * ```
+ * cd apps/server && node scripts/generate-brand-assets.cjs
+ * ```
+ * 渲染用 `@napi-rs/canvas`（本身就是本包的依赖，不再引浏览器/图形工具链）。
+ * ICO 按 PNG 载荷直出（`favicon.ico` = 6 字节头 + 每尺寸 16 字节目录项 + PNG 数据）——
+ * 现代浏览器都吃这种 ICO，且不必再引一个 ico 编码库。
+ */
+
+const fs = require('node:fs');
+const path = require('node:path');
+const { createCanvas, Path2D } = require('@napi-rs/canvas');
+
+const SERVER_ROOT = path.resolve(__dirname, '..');
+const COMPONENT = path.join(SERVER_ROOT, 'src/components/BrandMoon.tsx');
+const PUBLIC_DIR = path.join(SERVER_ROOT, 'public');
+
+/** 从组件源码里取形状常量（TS 文件带类型注解，正则取字符串字面量即可，不必上编译器） */
+function readBrandShape() {
+  const source = fs.readFileSync(COMPONENT, 'utf8');
+  const d = /BRAND_MOON_PATH\s*=\s*'([^']+)'/.exec(source)?.[1];
+  const rotation = Number(/BRAND_MOON_ROTATION\s*=\s*(-?\d+)/.exec(source)?.[1]);
+  if (!d || !Number.isFinite(rotation)) {
+    throw new Error(`${COMPONENT} 里找不到 BRAND_MOON_PATH / BRAND_MOON_ROTATION（脚本的正则口径失效了）`);
+  }
+  return { d, rotation };
+}
+
+/**
+ * 画一枚图标：**深色圆角方块 + 白色细弯月**（用户选定的形态：
+ * 「黑底圆角方块 + 白弯月，暗色下自动反色」）。
+ * 深色用 `#111`（与侧栏那个方块同一个色：全局样式里是 `bg-black`，纯黑在深色屏幕上会糊边，
+ * 这里取近黑，观感一致且边缘干净）。
+ */
+function renderIcon({ d, rotation }, size, { background = '#111111', moon = '#ffffff', radiusRatio = 0.24, insetRatio = 0.78 } = {}) {
+  const canvas = createCanvas(size, size);
+  const ctx = canvas.getContext('2d');
+  if (background) {
+    ctx.fillStyle = background;
+    ctx.beginPath();
+    ctx.roundRect(0, 0, size, size, size * radiusRatio);
+    ctx.fill();
+  }
+  const box = size * insetRatio;
+  const k = box / 24;
+  ctx.save();
+  ctx.translate(size / 2, size / 2);
+  ctx.rotate((rotation * Math.PI) / 180);
+  ctx.scale(k, k);
+  ctx.translate(-12, -12);
+  ctx.fillStyle = moon;
+  ctx.fill(new Path2D(d));
+  ctx.restore();
+  return canvas.toBuffer('image/png');
+}
+
+/** 单张 PNG 装进 ICO 容器（ICONDIR + ICONDIRENTRY + PNG 载荷） */
+function buildIco(entries) {
+  const header = Buffer.alloc(6);
+  header.writeUInt16LE(0, 0); // reserved
+  header.writeUInt16LE(1, 2); // type: 1 = icon
+  header.writeUInt16LE(entries.length, 4);
+  const dir = Buffer.alloc(16 * entries.length);
+  let offset = 6 + dir.length;
+  entries.forEach((entry, index) => {
+    const at = index * 16;
+    dir.writeUInt8(entry.size >= 256 ? 0 : entry.size, at); // 宽（256 记 0）
+    dir.writeUInt8(entry.size >= 256 ? 0 : entry.size, at + 1); // 高
+    dir.writeUInt8(0, at + 2); // 调色板数
+    dir.writeUInt8(0, at + 3); // 保留
+    dir.writeUInt16LE(1, at + 4); // 颜色平面
+    dir.writeUInt16LE(32, at + 6); // 位深
+    dir.writeUInt32LE(entry.png.length, at + 8);
+    dir.writeUInt32LE(offset, at + 12);
+    offset += entry.png.length;
+  });
+  return Buffer.concat([header, dir, ...entries.map(entry => entry.png)]);
+}
+
+/** SVG 版图标：现代浏览器优先用它（矢量、任意缩放都锐利） */
+function buildSvg({ d, rotation }, { background = '#111111', moon = '#ffffff', radiusRatio = 0.24, insetRatio = 0.78 } = {}) {
+  const box = 24 * insetRatio;
+  const scale = box / 24;
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-label="Customize Agent">
+  <!-- 由 scripts/generate-brand-assets.cjs 从 src/components/BrandMoon.tsx 生成，勿手改 -->
+  <rect width="24" height="24" rx="${(24 * radiusRatio).toFixed(2)}" fill="${background}"/>
+  <g transform="translate(12 12) rotate(${rotation}) scale(${scale.toFixed(4)}) translate(-12 -12)">
+    <path d="${d}" fill="${moon}"/>
+  </g>
+</svg>
+`;
+}
+
+const shape = readBrandShape();
+fs.writeFileSync(path.join(PUBLIC_DIR, 'favicon.svg'), buildSvg(shape));
+const icoSizes = [16, 32, 48];
+fs.writeFileSync(path.join(PUBLIC_DIR, 'favicon.ico'), buildIco(icoSizes.map(size => ({ size, png: renderIcon(shape, size) }))));
+fs.writeFileSync(path.join(PUBLIC_DIR, 'apple-touch-icon.png'), renderIcon(shape, 180, { radiusRatio: 0.22, insetRatio: 0.74 }));
+console.log(`[brand] 已生成 favicon.svg / favicon.ico(${icoSizes.join(',')}) / apple-touch-icon.png（形状来自 ${path.relative(SERVER_ROOT, COMPONENT)}）`);