ソースを参照

coloring: CTA 光晕颜色改为主题参数可配置

- manifest.json 新增 ctaGlowColor 主题属性 (默认 #ff5f1f)
- CSS 中所有 rgba(255,95,31,x) 替换为 CSS 变量 rgba(var(--cta-glow-r),...)
- index.ts 解析 hex 为 RGB 分量并设置 CSS 自定义属性
- cta-pulse 和 cta-highlight-pulse 动画均跟随主题色
guoziyun 3 週間 前
コミット
84bc74d46c

+ 1 - 0
platform/server/src/services/configGenerator.ts

@@ -68,6 +68,7 @@ export function generateAdConfig(input: GenerateInput): string {
   lines.push("export const adTheme = {");
   lines.push(`  bgGradient: ${JSON.stringify(input.theme.bgGradient || "linear-gradient(160deg, #fff9f2 0%, #ffeedd 100%)")},`);
   lines.push(`  ctaGradient: ${JSON.stringify(input.theme.ctaGradient || "linear-gradient(135deg, #ff5f1f 0%, #ffb300 100%)")},`);
+  lines.push(`  ctaGlowColor: ${JSON.stringify(input.theme.ctaGlowColor || "#ff5f1f")},`);
   lines.push(`  ctaText: ${JSON.stringify(input.theme.ctaText || "PLAY NOW")},`);
   lines.push(`  frameColor: ${JSON.stringify(input.theme.frameColor || "#edce9b")},`);
   lines.push(`  frameLineWidth: ${JSON.stringify(Number(input.theme.frameLineWidth) || 16)},`);

+ 6 - 6
templates/coloring/assets/css/tools.css

@@ -479,7 +479,7 @@ body {
   cursor: pointer;
   /* 立体感阴影 */
   box-shadow:
-    0 4px 10px rgba(255, 95, 31, 0.45),
+    0 4px 10px rgba(var(--cta-glow-r), var(--cta-glow-g), var(--cta-glow-b), 0.45),
     0 2px 0 rgba(255, 255, 255, 0.25) inset,
     0 -3px 0 rgba(0, 0, 0, 0.18) inset;
   /* 按压效果 */
@@ -493,7 +493,7 @@ body {
 #cta-btn:active {
   transform: scale(0.96) translateY(2px);
   box-shadow:
-    0 2px 8px rgba(255, 95, 31, 0.4),
+    0 2px 8px rgba(var(--cta-glow-r), var(--cta-glow-g), var(--cta-glow-b), 0.4),
     0 1px 0 rgba(255, 255, 255, 0.2) inset;
 }
 
@@ -501,13 +501,13 @@ body {
   0%,
   100% {
     box-shadow:
-      0 4px 10px rgba(255, 95, 31, 0.45),
+      0 4px 10px rgba(var(--cta-glow-r), var(--cta-glow-g), var(--cta-glow-b), 0.45),
       0 2px 0 rgba(255, 255, 255, 0.25) inset,
       0 -3px 0 rgba(0, 0, 0, 0.18) inset;
   }
   50% {
     box-shadow:
-      0 4px 16px rgba(255, 95, 31, 0.7),
+      0 4px 16px rgba(var(--cta-glow-r), var(--cta-glow-g), var(--cta-glow-b), 0.7),
       0 2px 0 rgba(255, 255, 255, 0.25) inset,
       0 -3px 0 rgba(0, 0, 0, 0.18) inset;
   }
@@ -519,14 +519,14 @@ body {
   100% {
     transform: scale(1.08);
     box-shadow:
-      0 6px 24px rgba(255, 95, 31, 0.8),
+      0 6px 24px rgba(var(--cta-glow-r), var(--cta-glow-g), var(--cta-glow-b), 0.8),
       0 2px 0 rgba(255, 255, 255, 0.3) inset,
       0 -3px 0 rgba(0, 0, 0, 0.2) inset;
   }
   50% {
     transform: scale(1.14);
     box-shadow:
-      0 8px 32px rgba(255, 95, 31, 1),
+      0 8px 32px rgba(var(--cta-glow-r), var(--cta-glow-g), var(--cta-glow-b), 1),
       0 2px 0 rgba(255, 255, 255, 0.3) inset,
       0 -3px 0 rgba(0, 0, 0, 0.2) inset;
   }

+ 1 - 0
templates/coloring/manifest.json

@@ -18,6 +18,7 @@
     "properties": [
       { "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": "ctaGlowColor",  "label": "CTA 光晕颜色",  "type": "color",        "default": "#ff5f1f" },
       { "key": "ctaText",       "label": "CTA 按钮文案",  "type": "text",         "default": "PLAY NOW", "maxLength": 30 },
       { "key": "frameColor",    "label": "完成相框颜色",   "type": "color",        "default": "#edce9b" },
       { "key": "frameLineWidth","label": "完成相框线宽",   "type": "number",       "default": 16, "min": 4, "max": 40 }

+ 1 - 0
templates/coloring/src/filler/ad-config.ts

@@ -39,6 +39,7 @@ export const adAssets = {
 export const adTheme = {
   bgGradient: "linear-gradient(160deg, #fff9f2 0%, #ffeedd 100%)",
   ctaGradient: "linear-gradient(135deg, #ff5f1f 0%, #ffb300 100%)",
+  ctaGlowColor: "#ff5f1f",
   ctaText: "PLAY NOW",
   frameColor: "#edce9b",
   frameLineWidth: 16,

+ 7 - 0
templates/coloring/src/filler/index.ts

@@ -51,6 +51,13 @@ async function init() {
   const root = document.documentElement;
   root.style.setProperty("--ad-bg-gradient", adTheme.bgGradient);
   root.style.setProperty("--ad-cta-gradient", adTheme.ctaGradient);
+
+  // CTA 光晕颜色 → RGB 分量(CSS 变量供 rgba() 使用)
+  const glowHex = adTheme.ctaGlowColor || "#ff5f1f";
+  root.style.setProperty("--cta-glow-r", parseInt(glowHex.slice(1, 3), 16));
+  root.style.setProperty("--cta-glow-g", parseInt(glowHex.slice(3, 5), 16));
+  root.style.setProperty("--cta-glow-b", parseInt(glowHex.slice(5, 7), 16));
+
   // 直接应用 CTA 文案和样式
   const ctaBtn = document.getElementById("cta-btn");
   if (ctaBtn) {