@open-dy/vibecoding-cli 0.1.11 → 0.1.12-beta.c7581d2689270ed213bf22acad20c6954559f2dbf.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-dy/vibecoding-cli",
-  "version": "0.1.11",
+  "version": "0.1.12-beta.c7581d2689270ed213bf22acad20c6954559f2dbf.0",
   "description": "Command orchestration, validation and packaging for Douyin vibecoding Taro and OpenCard projects.",
   "type": "module",
   "bin": {
@@ -42,8 +42,8 @@
     "ajv": "^8.18.0"
   },
   "peerDependencies": {
-    "@open-dy/vibecoding-sdk-taro": "0.1.7",
-    "@open-dy/vibecoding-sdk-opencard": "0.1.8"
+    "@open-dy/vibecoding-sdk-taro": "0.1.8-beta.c7581d2689270ed213bf22acad20c6954559f2dbf.0",
+    "@open-dy/vibecoding-sdk-opencard": "0.1.9"
   },
   "peerDependenciesMeta": {
     "@open-dy/vibecoding-sdk-taro": {
@@ -59,7 +59,7 @@
   "license": "UNLICENSED",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
-    "tag": "latest",
+    "tag": "beta-c7581d2689270ed213bf22acad20c6954559f2dbf",
     "access": "public"
   }
 }

package/release-provenance.json

@@ -2,19 +2,19 @@
   "schema": 1,
   "producer": "vibecoding-cli",
   "packageName": "@open-dy/vibecoding-cli",
-  "version": "0.1.11",
+  "version": "0.1.12-beta.c7581d2689270ed213bf22acad20c6954559f2dbf.0",
   "source": {
-    "digest": "sha256-350c9659fe7c3ca18a6ff7a8faee2cdc768a86a7daa51d36dcc682e462abafcd",
-    "files": 91
+    "digest": "sha256-9256701dfc7746d22e9714ce4af2bed022ce5f6ae9f72934edbfc28cd913f58f",
+    "files": 94
   },
-  "payload": "sha256-f0ca57060dd5bd116d05017f9dd20770efb7a1314888dec470c5e5704d421298",
+  "payload": "sha256-471ff0b3bdeef1a92f130267f0eaf9b1511eaf3af42a40e67fc839449364ed5f",
   "toolchain": {
-    "node": "v22.22.3",
+    "node": "v22.22.0",
     "runtime": {
-      "node": "v22.22.3",
+      "node": "v22.22.0",
       "platform": "linux",
       "arch": "x64",
-      "environment": "sha256-d835dde975a8a25241996191388be38b0dc9c1e5aa8b518b778f4ccdf7a5136a"
+      "environment": "sha256-5b81e7cc338f03f0ff65566f99f994cca05b90cc836ff863506eed6afe9f5a24"
     },
     "packageManager": null
   }

package/src/cli.mjs

@@ -20,7 +20,7 @@ Commands:
   build                  Build the selected target
   lint                   Type-check, lint and validate source structure
   verify                 Run static and/or runtime verification
-  validate <name>        Run feed-card, routes, empty or opencard-structure
+  validate <name>        Run feed-card, feed-background, routes, empty or opencard-structure
   init-mysql-db          Initialize the Taro server database
   pack                   Build deployment archives
   docs                   Locate the selected project's installed SDK reference

package/src/commands/build.mjs

@@ -5,6 +5,7 @@ import { readEnvFile } from '../core/environment.mjs'
 import { resolveProjectBinary, resolveSdkTaroEntry, runProcess, runTasks } from '../core/runner.mjs'
 import { writeWebConfig } from '../core/web-config.mjs'
 import { validateRoutes } from '../validators/routes.mjs'
+import { validateImageInline } from '../validators/image-inline.mjs'
 
 function taroEnvironment(root, extra = {}) {
   const home = path.join(root, '.home')
@@ -101,6 +102,7 @@ export async function runBuild(context, options = {}) {
   }
   if (context.target === 'opencard') {
     await buildOpenCard(context, buildOptions)
+    if (!options.watch) validateImageInline(context)
     return
   }
 
@@ -138,4 +140,5 @@ export async function runBuild(context, options = {}) {
   }
   await runTasks(tasks, { label: 'build' })
   validateRoutes(context)
+  if (!options.watch) validateImageInline(context)
 }

package/src/commands/validate.mjs

@@ -1,5 +1,5 @@
 import { UsageError } from '../core/errors.mjs'
-import { validateFeedCard } from '../validators/feed-card.mjs'
+import { validateFeedCard, validateProjectCardBackground } from '../validators/feed-card.mjs'
 import { validateNonEmptyTaro } from '../validators/empty-project.mjs'
 import { validateOpenCardStructure } from '../validators/opencard-structure.mjs'
 import { validateRoutes } from '../validators/routes.mjs'
@@ -9,6 +9,9 @@ export async function runValidate(context, validator) {
     case 'feed-card':
       validateFeedCard(context)
       return
+    case 'feed-background':
+      validateProjectCardBackground(context)
+      return
     case 'routes':
       validateRoutes(context)
       return
@@ -20,7 +23,7 @@ export async function runValidate(context, validator) {
       return
     default:
       throw new UsageError(
-        `Unknown validator: ${validator || '<missing>'}\nAvailable validators: feed-card, routes, empty, opencard-structure`,
+        `Unknown validator: ${validator || '<missing>'}\nAvailable validators: feed-card, feed-background, routes, empty, opencard-structure`,
       )
   }
 }

package/src/validators/feed-card.cjs

@@ -1,5 +1,6 @@
 const fs = require("node:fs");
 const path = require("node:path");
+const { spawnSync } = require("node:child_process");
 const Ajv = require("ajv");
 
 function failFast(message) {
@@ -55,6 +56,37 @@ function resolveFeedCardSchema(projectRoot) {
   return schemaPath;
 }
 
+function validateCardBackground(data) {
+  const validator = path.join(__dirname, "validate-card-background.py");
+  const result = spawnSync("python3", [
+    validator,
+    "--url", data.CardBackgroundUrl,
+    "--primary-color", data.PrimaryColor || "",
+  ], { encoding: "utf8", timeout: 20_000 });
+  if (result.error) {
+    throw new Error(`Background image validation could not run: ${result.error.message}`);
+  }
+  if (result.status !== 0) {
+    throw new Error((result.stderr || result.stdout || "Background image validation failed.").trim());
+  }
+  return JSON.parse(result.stdout);
+}
+
+function validateProjectCardBackground(context) {
+  if (context.target !== "taro") {
+    throw new Error("Feed background validation requires --target taro");
+  }
+  const jsonPath = path.join(context.root, "feed/feed-card.json");
+  if (!fs.existsSync(jsonPath)) return { skipped: true };
+  let data;
+  try {
+    data = JSON.parse(fs.readFileSync(jsonPath, "utf8"));
+  } catch (error) {
+    failFast(`Invalid JSON syntax in ${jsonPath}: ${error.message}`);
+  }
+  return validateCardBackground(data);
+}
+
 function validateFeedCard(context, options = {}) {
   if (context.target !== "taro") {
     throw new Error("Feed card validation requires --target taro");
@@ -140,6 +172,8 @@ function validateFeedCard(context, options = {}) {
     reportAndExit(errors);
   }
 
+  validateCardBackground(data);
+
   if (options.touchTimestamp !== false) {
     data.__timestamp = Date.now();
     try {
@@ -153,4 +187,4 @@ function validateFeedCard(context, options = {}) {
   return { skipped: false };
 }
 
-module.exports = { resolveFeedCardSchema, validateFeedCard };
+module.exports = { resolveFeedCardSchema, validateFeedCard, validateCardBackground, validateProjectCardBackground };

package/src/validators/feed-card.mjs

@@ -25,8 +25,22 @@ export function resolveFeedCardSchema(projectRoot) {
  * @params {object} context CLI 工程上下文。
  * @params {object} [options] 校验选项。
  * @return {unknown} 校验器返回的结果；发现错误时抛出 CliError。
- * @example validateFeedCard(context, { full: true })
+ * @example validateFeedCard(context)
  */
 export function validateFeedCard(context, options = {}) {
   return runValidation(() => validator.validateFeedCard(context, options))
 }
+
+export function validateCardBackground(data) {
+  return runValidation(() => validator.validateCardBackground(data))
+}
+
+/**
+ * @desc 单独实测 feed-card.json 指向的最终背景图与 PrimaryColor 底部承接。
+ * @params {object} context CLI 工程上下文。
+ * @return {unknown} 图片尺寸和底部色彩/纹理指标；发现错误时抛出 CliError。
+ * @example validateProjectCardBackground(context)
+ */
+export function validateProjectCardBackground(context) {
+  return runValidation(() => validator.validateProjectCardBackground(context))
+}

package/src/validators/image-inline.mjs

@@ -0,0 +1,82 @@
+import { readFileSync, statSync, realpathSync } from "node:fs";
+import path from "node:path";
+
+const IMAGE_INLINE_LIMIT = 4096;
+const SKILL_GUIDANCE = "请查阅 microapp-optimize-interest-card/SKILL.md 中的图片规则";
+
+/** Validate the image inventory after compilation. Findings only warn. */
+export function validateImageInline(context) {
+  const cardRoot =
+    context.target === "opencard" ? context.root : context.opencardRoot;
+  if (!cardRoot || (context.target !== "opencard" && !context.hasOpenCard)) {
+    return { warnings: 0, unverified: 0 };
+  }
+  const reportFile = path.join(
+    cardRoot, "node_modules/.cache/vibecoding/image-inline-tt.json",
+  );
+  try {
+    const report = JSON.parse(readFileSync(reportFile, "utf8"));
+    if (report.schemaVersion !== 3 || report.status !== "complete" ||
+      report.target !== "tt" ||
+      realpathSync(report.projectRoot) !== realpathSync(cardRoot) ||
+      !Array.isArray(report.findings) || !Array.isArray(report.issues) ||
+      !report.findings.every(item => item && typeof item.file === "string" && Number.isInteger(item.line) && item.line > 0 &&
+        Number.isInteger(item.column) && item.column > 0 &&
+        (item.kind === "import" || item.kind === "data-url") &&
+        (item.kind === "import" ? typeof item.image === "string" : typeof item.dataUrl === "string")) ||
+      !report.issues.every(issue => typeof issue === "string")) {
+      throw new Error("图片检查报告格式或工程身份不匹配");
+    }
+    const warnings = [];
+    const issues = [...report.issues];
+    for (const item of report.findings) {
+      let bytes;
+      try {
+        if (item.kind === "import") {
+          const info = statSync(path.resolve(cardRoot, item.image));
+          if (!info.isFile()) throw new Error("图片路径不是文件");
+          bytes = info.size;
+        } else {
+          const match = /^data:image\/[a-z0-9.+-]+(?:;[a-z0-9_-]+=[^;,\s]+)*;base64,([a-z0-9+/]*={0,2})$/i.exec(item.dataUrl);
+          const encoded = match?.[1];
+          if (!encoded || encoded.length % 4 === 1) throw new Error("图片 Base64 编码无效");
+          const decoded = Buffer.from(encoded, "base64");
+          if (decoded.toString("base64").replace(/=+$/, "") !== encoded.replace(/=+$/, "") ||
+            (encoded.includes("=") && encoded.length % 4 !== 0)) {
+            throw new Error("图片 Base64 编码无效");
+          }
+          bytes = decoded.length;
+        }
+      } catch (error) {
+        issues.push(`${item.file}:${item.line}:${item.column} 检查未完成：${error.message}。`);
+        continue;
+      }
+      if (bytes < IMAGE_INLINE_LIMIT) continue;
+      warnings.push(`  ${item.file}:${item.line}:${item.column}\n` +
+        (item.kind === "import"
+          ? `    类型：图片 import\n    原图：${item.image}\n    大小：${bytes} bytes\n`
+          : `    类型：固定 Base64 图片\n    解码大小：${bytes} bytes\n`));
+    }
+    if (warnings.length || issues.length) console.warn("=== 图片性能检测报告 ===\n");
+    if (warnings.length) {
+      console.warn(`检测到以下图片 import 或固定 Base64 图片大小 ≥${IMAGE_INLINE_LIMIT} 字节，存在内联图片性能风险。${SKILL_GUIDANCE}并在确认问题后上传图片以修复以下图片性能问题：\n`);
+      for (const warning of warnings) console.warn(warning);
+      console.warn(`共 ${warnings.length} 条可能的图片性能问题`);
+    }
+    if (issues.length) {
+      console.warn("图片检查未完成：");
+      for (const issue of issues) console.warn(`  ${issue}`);
+      if (!warnings.length) console.warn(`${SKILL_GUIDANCE}。`);
+    }
+    return { warnings: warnings.length, unverified: issues.length };
+  } catch (error) {
+    console.warn("=== 图片性能检测报告 ===\n");
+    console.warn(
+      "图片检查未完成：未取得有效报告。" +
+        "请检查 SDK 版本及构建日志。" +
+        ` (${error.message})`,
+    );
+    console.warn(`${SKILL_GUIDANCE}。`);
+    return { warnings: 0, unverified: 1 };
+  }
+}

package/src/validators/opencard-structure.mjs

@@ -53,7 +53,7 @@ export function validateOpenCardStructure(context) {
         `found ${preloadCount} preload call(s). ` +
         'Use taro.preloadMiniApp({ appList }) on the Card instance provided by useCardTaro from @tarojs/taro (opencard-taro); ' +
         'this is not a named export of @open-dy/vibecoding-sdk-opencard. ' +
-        'See ${SKILL_DIR}/references/opencard/api.md, section "小程序跳转预加载", for the lifecycle guards and example.',
+        'See ${CAPABILITY_SKILL_DIR}/references/opencard/runtime.md, section "小程序跳转预加载", for the lifecycle guards and example.',
       )
     }
   }

package/src/validators/validate-card-background.py

@@ -0,0 +1,216 @@
+#!/usr/bin/env python3
+"""Validate the bottom continuation of a Feed Card background.
+
+The current composer emits a 1440x2560 RGB PNG with an exact baseColor fill
+below its hero.  Existing cards also contain earlier valid variants with a
+same-hue darkened or softly feathered continuation.  This compatibility gate
+therefore samples the whole bottom 30%, requiring a low-texture, same-hue
+continuation while still rejecting raw heroes or attachments that run to the
+host-button safety area.
+"""
+
+import argparse
+import json
+import math
+import struct
+import sys
+import urllib.request
+import zlib
+
+PNG_SIGNATURE = b"\x89PNG\r\n\x1a\n"
+SAMPLE_W = 72
+SAMPLE_H = 128
+BOTTOM_START_RATIO = 0.70
+MAX_HORIZONTAL_TEXTURE = 3.0
+MAX_VERTICAL_TEXTURE = 4.0
+MAX_HUE_DELTA = 12.0
+LOW_SATURATION = 15.0
+MAX_NEUTRAL_COLOR_DISTANCE = 24.0
+
+
+def fail(message):
+    raise ValueError(message)
+
+
+def parse_color(value):
+    if not isinstance(value, str) or len(value) != 7 or not value.startswith("#"):
+        fail("PrimaryColor must be a #RRGGBB value for background validation.")
+    try:
+        return tuple(int(value[index:index + 2], 16) for index in (1, 3, 5))
+    except ValueError:
+        fail("PrimaryColor must be a #RRGGBB value for background validation.")
+
+
+def download(url):
+    request = urllib.request.Request(url, headers={"User-Agent": "vibecoding-feed-background-validator/1"})
+    with urllib.request.urlopen(request, timeout=15) as response:
+        content = response.read(12 * 1024 * 1024 + 1)
+    if len(content) > 12 * 1024 * 1024:
+        fail("CardBackgroundUrl exceeds the 12 MiB validation download limit.")
+    return content
+
+
+def paeth(a, b, c):
+    p = a + b - c
+    pa, pb, pc = abs(p - a), abs(p - b), abs(p - c)
+    return a if pa <= pb and pa <= pc else (b if pb <= pc else c)
+
+
+def decode_png(content):
+    if not content.startswith(PNG_SIGNATURE):
+        fail("CardBackgroundUrl must point to the final PNG produced by the background pipeline; received a non-PNG image.")
+    position = len(PNG_SIGNATURE)
+    width = height = bit_depth = color_type = interlace = None
+    idat = []
+    while position < len(content):
+        if position + 12 > len(content):
+            fail("CardBackgroundUrl PNG is truncated.")
+        size = struct.unpack(">I", content[position:position + 4])[0]
+        chunk_type = content[position + 4:position + 8]
+        chunk = content[position + 8:position + 8 + size]
+        position += size + 12
+        if chunk_type == b"IHDR":
+            width, height, bit_depth, color_type, compression, filter_method, interlace = struct.unpack(">IIBBBBB", chunk)
+            if compression != 0 or filter_method != 0:
+                fail("CardBackgroundUrl PNG uses an unsupported PNG encoding.")
+        elif chunk_type == b"IDAT":
+            idat.append(chunk)
+        elif chunk_type == b"IEND":
+            break
+    if not width or not height or bit_depth != 8 or color_type not in (2, 6) or interlace != 0:
+        fail("CardBackgroundUrl must be a non-interlaced 8-bit RGB or RGBA PNG.")
+    channels = 4 if color_type == 6 else 3
+    row_bytes = width * channels
+    raw = zlib.decompress(b"".join(idat))
+    if len(raw) != height * (row_bytes + 1):
+        fail("CardBackgroundUrl PNG pixel data is invalid.")
+    rows, previous, cursor = [], bytearray(row_bytes), 0
+    for _ in range(height):
+        filter_type = raw[cursor]
+        cursor += 1
+        encoded = raw[cursor:cursor + row_bytes]
+        cursor += row_bytes
+        row = bytearray(row_bytes)
+        for index, value in enumerate(encoded):
+            left = row[index - channels] if index >= channels else 0
+            up = previous[index]
+            up_left = previous[index - channels] if index >= channels else 0
+            if filter_type == 0:
+                row[index] = value
+            elif filter_type == 1:
+                row[index] = (value + left) & 255
+            elif filter_type == 2:
+                row[index] = (value + up) & 255
+            elif filter_type == 3:
+                row[index] = (value + ((left + up) // 2)) & 255
+            elif filter_type == 4:
+                row[index] = (value + paeth(left, up, up_left)) & 255
+            else:
+                fail("CardBackgroundUrl PNG uses an unsupported row filter.")
+        rows.append(row)
+        previous = row
+    return width, height, channels, rows
+
+
+def rgb_to_hsl(rgb):
+    r, g, b = (channel / 255.0 for channel in rgb)
+    maximum, minimum = max(r, g, b), min(r, g, b)
+    lightness = (maximum + minimum) / 2.0
+    if maximum == minimum:
+        return 0.0, 0.0, lightness * 100.0
+    delta = maximum - minimum
+    saturation = delta / (2.0 - maximum - minimum) if lightness > 0.5 else delta / (maximum + minimum)
+    if maximum == r:
+        hue = ((g - b) / delta + (6.0 if g < b else 0.0)) / 6.0
+    elif maximum == g:
+        hue = ((b - r) / delta + 2.0) / 6.0
+    else:
+        hue = ((r - g) / delta + 4.0) / 6.0
+    return hue * 360.0, saturation * 100.0, lightness * 100.0
+
+
+def hue_delta(first, second):
+    return min(abs(first - second), 360.0 - abs(first - second))
+
+
+def color_distance(first, second):
+    return sum(abs(first[index] - second[index]) for index in range(3)) / 3.0
+
+
+def inspect(content, primary):
+    width, height, channels, rows = decode_png(content)
+    if abs(width / height - 9 / 16) > 0.01:
+        fail(f"CardBackgroundUrl must be 9:16, got {width}x{height}.")
+
+    bottom_start = math.floor(height * BOTTOM_START_RATIO)
+    for y in range(bottom_start, height):
+        row = rows[y]
+        for x in range(width):
+            offset = x * channels
+            if channels == 4 and row[offset + 3] != 255:
+                fail("CardBackgroundUrl bottom continuation must be fully opaque.")
+
+    sample_x = [round(index * (width - 1) / (SAMPLE_W - 1)) for index in range(SAMPLE_W)]
+    sample_y = [round(index * (height - 1) / (SAMPLE_H - 1)) for index in range(SAMPLE_H)]
+    pixels = [
+        [tuple(rows[y][x * channels + channel] for channel in range(3)) for x in sample_x]
+        for y in sample_y
+    ]
+    sample_start = math.floor(SAMPLE_H * BOTTOM_START_RATIO)
+    bottom = pixels[sample_start:]
+    horizontal = [color_distance(row[index], row[index - 1]) for row in bottom for index in range(1, SAMPLE_W)]
+    vertical = [
+        color_distance(bottom[row_index][column], bottom[row_index - 1][column])
+        for row_index in range(1, len(bottom))
+        for column in range(SAMPLE_W)
+    ]
+    average = tuple(round(sum(pixel[channel] for row in bottom for pixel in row) / (len(bottom) * SAMPLE_W)) for channel in range(3))
+    average_hue, _, _ = rgb_to_hsl(average)
+    primary_hue, primary_saturation, _ = rgb_to_hsl(primary)
+    horizontal_texture = sum(horizontal) / len(horizontal)
+    vertical_texture = sum(vertical) / len(vertical)
+    issues = []
+    if horizontal_texture > MAX_HORIZONTAL_TEXTURE:
+        issues.append(f"horizontal texture={horizontal_texture:.1f}>{MAX_HORIZONTAL_TEXTURE}")
+    if vertical_texture > MAX_VERTICAL_TEXTURE:
+        issues.append(f"vertical texture={vertical_texture:.1f}>{MAX_VERTICAL_TEXTURE}")
+    if primary_saturation < LOW_SATURATION:
+        neutral_distance = color_distance(average, primary)
+        if neutral_distance > MAX_NEUTRAL_COLOR_DISTANCE:
+            issues.append(f"neutral color distance={neutral_distance:.1f}>{MAX_NEUTRAL_COLOR_DISTANCE}")
+    else:
+        delta = hue_delta(average_hue, primary_hue)
+        if delta > MAX_HUE_DELTA:
+            issues.append(f"hue delta={delta:.1f}>{MAX_HUE_DELTA}")
+    if issues:
+        fail(
+            "CardBackgroundUrl bottom 30% is not a low-texture PrimaryColor continuation (" +
+            ", ".join(issues) +
+            "). Re-run the background four-step pipeline or regenerate a same-hue solid/gradient extension."
+        )
+    return {
+        "width": width,
+        "height": height,
+        "bottomStartY": bottom_start,
+        "bottomHorizontalTexture": round(horizontal_texture, 2),
+        "bottomVerticalTexture": round(vertical_texture, 2),
+        "bottomAverage": "#" + "".join(f"{channel:02x}" for channel in average),
+        "primaryColor": "#" + "".join(f"{channel:02x}" for channel in primary),
+    }
+
+
+def main():
+    parser = argparse.ArgumentParser()
+    parser.add_argument("--url", required=True)
+    parser.add_argument("--primary-color", required=True)
+    args = parser.parse_args()
+    result = inspect(download(args.url), parse_color(args.primary_color))
+    print(json.dumps(result, ensure_ascii=False))
+
+
+if __name__ == "__main__":
+    try:
+        main()
+    except Exception as error:
+        print(f"[Background Validation Failed] {error}", file=sys.stderr)
+        sys.exit(1)