coloring: 相框颜色和线宽改为主题参数可配置

- manifest.json 新增 frameColor / frameLineWidth 主题属性
- ad-config.ts 默认值 #edce9b / 16 (与当前视觉效果一致)
- configGenerator.ts 后端动态生成时输出这两个字段
- index.ts 新增 cssHexToFrameColor 转换函数，x/y/width/height 根据 lineWidth 动态计算

platform/server/src/services/configGenerator.ts

@@ -70,6 +70,8 @@ export function generateAdConfig(input: GenerateInput): string {
   lines.push(`  ctaGradient: ${JSON.stringify(input.theme.ctaGradient || "linear-gradient(135deg, #ff5f1f 0%, #ffb300 100%)")},`);
   lines.push(`  ctaText: ${JSON.stringify(input.theme.ctaText || "PLAY NOW")},`);
   lines.push(`  progressColor: ${JSON.stringify(input.theme.progressColor || "#07ce07")},`);
+  lines.push(`  frameColor: ${JSON.stringify(input.theme.frameColor || "#edce9b")},`);
+  lines.push(`  frameLineWidth: ${JSON.stringify(Number(input.theme.frameLineWidth) || 16)},`);
   lines.push("};");
 
   return lines.join("\n") + "\n";

templates/coloring/manifest.json

@@ -19,7 +19,9 @@
       { "key": "bgGradient",    "label": "背景渐变",      "type": "css-gradient", "default": "linear-gradient(160deg, #fff9f2 0%, #ffeedd 100%)" },
       { "key": "ctaGradient",   "label": "CTA 按钮渐变",  "type": "css-gradient", "default": "linear-gradient(135deg, #ff5f1f 0%, #ffb300 100%)" },
       { "key": "ctaText",       "label": "CTA 按钮文案",  "type": "text",         "default": "PLAY NOW", "maxLength": 30 },
-      { "key": "progressColor", "label": "进度条颜色",     "type": "color",        "default": "#07ce07" }
+      { "key": "progressColor", "label": "进度条颜色",     "type": "color",        "default": "#07ce07" },
+      { "key": "frameColor",    "label": "完成相框颜色",   "type": "color",        "default": "#edce9b" },
+      { "key": "frameLineWidth","label": "完成相框线宽",   "type": "number",       "default": 16, "min": 4, "max": 40 }
     ]
   },
   "platforms": {

templates/coloring/src/filler/ad-config.ts

@@ -41,4 +41,6 @@ export const adTheme = {
   ctaGradient: "linear-gradient(135deg, #ff5f1f 0%, #ffb300 100%)",
   ctaText: "PLAY NOW",
   progressColor: "#07ce07",
+  frameColor: "#edce9b",
+  frameLineWidth: 16,
 };

templates/coloring/src/filler/index.ts

@@ -117,14 +117,16 @@ async function init() {
   adPlatform.onResourcesLoaded();
 
   // 设置固定顶栏 logo（图标 + 文字）
-  (document.getElementById("app-logo") as HTMLImageElement).src = adAssets.logoUrl;
+  (document.getElementById("app-logo") as HTMLImageElement).src =
+    adAssets.logoUrl;
   (document.getElementById("app-logo-txt") as HTMLImageElement).src =
     adAssets.logoTxtUrl;
 
   // 预加载 promo 图片，避免动画播放时图片刚加载导致布局跳变
   (document.getElementById("promo-coloring") as HTMLImageElement).src =
     adAssets.coloringPagesUrl;
-  (document.getElementById("promo-slogon") as HTMLImageElement).src = adAssets.slogonUrl;
+  (document.getElementById("promo-slogon") as HTMLImageElement).src =
+    adAssets.slogonUrl;
 
   let taskList: number[] = [];
 
@@ -213,16 +215,16 @@ async function init() {
 
   scene.addLayer(new LineArtLayer(scene, resource.page, width, height));
 
-  scene.addLayer(
-    new BorderLayer(
-      scene,
-      0,
-      0,
-      fillerData.width,
-      fillerData.height,
-      0xff222222,
-    ),
-  );
+  // scene.addLayer(
+  //   new BorderLayer(
+  //     scene,
+  //     0,
+  //     0,
+  //     fillerData.width,
+  //     fillerData.height,
+  //     0xff222222,
+  //   ),
+  // );
 
   // let mask = new Mask(gl, fillerData)
   // resource.config[0].areas.forEach(area => mask.addArea(area))
@@ -412,7 +414,8 @@ function cssInitColorProgress(i: number, percent: number) {
 function cssAdjustScroll(fd: FillerData) {
   let wrapper = document.getElementById("color-btns")!;
   let itemWidth = wrapper.scrollWidth / fd.data.areaGroups.length;
-  let scrollpos = itemWidth * fd.currentGroupIndex + itemWidth / 2 - wrapper.clientWidth / 2;
+  let scrollpos =
+    itemWidth * fd.currentGroupIndex + itemWidth / 2 - wrapper.clientWidth / 2;
   scrollpos = Math.max(0, scrollpos);
   try {
     wrapper.scroll({ left: scrollpos, top: 0, behavior: "smooth" });
@@ -455,15 +458,17 @@ function cssOnFinish(
     // 动画结束后隐藏元素
     setTimeout(() => {
       // toolbarBottom.style.display = 'none';
+      const lw = adTheme.frameLineWidth || 16;
+      const offset = lw / 4;
       scene.addLayer(
         new FrameLayer(
           scene,
-          -4,
-          -4,
-          scene.fillerData!.width + 8,
-          scene.fillerData!.height + 8,
-          0xff9bceed,
-          16,
+          -offset,
+          -offset,
+          scene.fillerData!.width + offset * 2,
+          scene.fillerData!.height + offset * 2,
+          cssHexToFrameColor(adTheme.frameColor || "#edce9b"),
+          lw,
         ),
       );
       hintLayer.enabled = false; // replay 期间隐藏 hint 覆盖层
@@ -545,6 +550,14 @@ function showToast(message: string) {
 }
 
 // 撒花动画，使用js-confetti库
+/** CSS hex (#RRGGBB) → FrameLayer 颜色值 (0xAABBGGRR little-endian) */
+function cssHexToFrameColor(hex: string): number {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return (0xff << 24) | (b << 16) | (g << 8) | r;
+}
+
 function confetti() {
   const jsConfetti = new JSConfetti();
   jsConfetti.addConfetti({ confettiNumber: 80 });