cardbuddy 0.11.0 → 0.12.1

package/dist/vendored/skills/dsl-card-generator/references/recipes.md

@@ -0,0 +1,797 @@
+# Recipes — 通用开发范式库
+
+可复用、export-proven 的组合配方。每条给出结构 + 代码 + 来源卡片。生成新卡时优先套用最接近的范式。
+
+## 1. Canvas 画布标题头
+
+用途：在卡片顶部画一个带浅色背景条的标题（替代 Text，便于精确控制对齐与装饰）。
+
+结构：
+- 外层 `Row`，flex.justifyContent=flex-start（左对齐）或 center（居中）、alignItems=center，slots[default].components 放 Canvas。
+- `Canvas` 的 rect.width 用**表达式**（itemValueFrom:"1"）随标题长度变，rect.height 固定数字。
+- Canvas 的 eventactions[0]：eventKey=onMeasured，actionType=customAction，function.code 里用 event.canvas 画。
+
+宽度表达式（4 个中文字 bold 16px）：`($title.length || 4) * 16`，约 64；height 30。
+
+onMeasured 代码（左对齐，来源 creditCardBill/canvas_title）：
+
+```javascript
+const canvas = event.canvas;
+const ctx = canvas.getContext("2d");
+ctx.font = "bold 16px Arial";
+ctx.fillStyle = "#333";
+const text = this.state.billMode === '1' ? '已出账单' : '未出账单';
+const textWidth = ctx.measureText(text).width;
+const singleTextWidth = textWidth / text.length;
+const m = ctx.measureText(text);
+const textHeight = m.actualBoundingBoxAscent + m.actualBoundingBoxDescent;
+// 浅蓝色背景条（文本下方，靠左）
+const startX = 0;
+const startY = canvas.height / 2 + 1;
+ctx.fillStyle = "#CBEEDF";
+ctx.fillRect(startX, startY, singleTextWidth * text.length, textHeight * 0.6);
+// 文本（靠左 + 垂直居中）
+ctx.fillStyle = "#333";
+ctx.textAlign = "left";
+ctx.textBaseline = "middle";
+ctx.fillText(text, 0, canvas.height / 2);
+```
+
+居中变体（来源 dreamPlan/assetOverview）：startX = `canvas.width / 2 - textWidth / 2`，textAlign="center"，x = `canvas.width / 2`。
+
+要点：
+- 坐标是**设计稿 px**，event.canvas 是设计稿坐标系包装对象（宽度/2dctx 已按 scale 换算）。不要乘 devicePixelRatio，不要用 canvas.width/2 做左对齐（那是设备 px 假设）。
+- code 与 compiled 两份保持同步（compiled 是 var 形式）。
+- 来源：creditCardBill（左对齐）、dreamPlan、assetOverview、financialProductDetail、debtDetails、myDeposit、querySelector 等 25 张卡都用 onMeasured。
+
+## 2. 弹一张卡片（alertCard）+ 同名 Dialog 表
+
+用途：在当前卡里点击弹出另一张卡（底部/居中弹窗），子卡关闭后回传数据。
+
+打开（父卡 customAction，来源 creditCardBill/monthlyBill/activityLevel）：
+
+```javascript
+var that = this;
+ynet.callJSAPI('alertCard', {
+  cardCode: 'billListDialog',
+  data: {
+    title: '账单详情',
+    list: that.state.billList,
+    parentInstanceId: event.instanceId
+  },
+  gravity: 'bottom'
+}, function (data) {
+  if (data.success) {
+    // data.data.event === 'hidden' 表示弹窗被关闭
+    // 子卡 closeAlertCard 回传的数据在 data.data
+  }
+});
+```
+
+关闭（子卡 customAction）：
+
+```javascript
+// 仅关闭
+ynet.callJSAPI('closeAlertCard', { cardCode: 'billListDialog' }, function () {});
+// 关闭并回传「选中项」——只回传父卡需要的字段，禁止 data: this.state（会把整个子卡作用域甩给父卡）
+ynet.callJSAPI('closeAlertCard', {
+  data: {
+    selected: {
+      acctNum: this.state.acctNum,
+      branchNodeName: this.state.branchNodeName,
+      balance: this.state.balance
+    }
+  }
+}, function () {});
+```
+
+要点：
+- alertCard 是 JSAPI（在 customAction 里调），不是 actionType。
+- cardCode 指向另一张卡（通常 *Dialog 同名卡）。data 透传给子卡作用域（子卡 data.json ∪ 传入 data）。
+- gravity：bottom/center/top/left/right；center 小弹窗可传 width/offsetY。
+- parentInstanceId: event.instanceId 让子卡回信给父实例。
+- 预览器实时从磁盘读目标卡（GET /__card/<cardCode>），保证弹窗卡是最新落盘版。
+- **回传数据显式化（铁律）**：子卡 `closeAlertCard` 只回传父卡需要的字段（如 `selected:{acctNum,branchNodeName,balance}`），**禁止 `data: this.state`**；父卡回调里**按字段提取**再赋值（`that.state.currCard = { acctNum: data.data.selected.acctNum, ... }`），**绝不直接 `that.state.currCard = data.data.currCard` 整体赋值**——子卡 `this.state` 混有父卡注入的 `list`/`title`/`parentInstanceId`，整体赋值会让字段对不上。
+- 重复 openAlertCard 会先关闭已有弹窗（触发其回调 event:'hidden'）。
+
+49 卡同名 Dialog 对应表（精选）：
+
+| Dialog 卡 | 透传字段 | 典型 opener | 关闭目标 |
+| --- | --- | --- | --- |
+| billListDialog | list, title | creditCardBill | billListDialog |
+| transferRecordDialog | tradeList, title | monthlyBill | transferRecordDialog |
+| activityLevelDialog | listData, title | activityLevel | activityLevelDialog |
+| activityRecordDialog | listData, title | (父卡预览按钮) | activityRecordDialog |
+| monthlyBillDialog | listData, title | (宿主编排) | monthlyBillDialog |
+| transitionMonthListDialog | list, title | (宿主编排) | transitionMonthListDialog |
+| multiMonthTransitionListDialog | list, title | transitionListDialog | multiMonthTransitionListDialog |
+| accountDialog | title, account_details, show, otherLangLabels | (宿主编排) | accountDialog |
+| inputPasswordDialog | currentCard, maxLength, list, successQueryParams, validateMode | accountDialog/myAccount | inputPasswordDialog |
+| myCardNumberDialog | cardNumber | inputPasswordDialog | myCardNumberDialog |
+
+## 3. 列表展开/收起
+
+用途：列表默认显示前 N 项，点击"查看更多"显示全部，再点"收起"。
+
+数据模型：inputParams 加 `showAll`（boolean, defaultValue false）。
+
+绑定：ListLayout.value 绑 `$showAll ? $list : $list.slice(0, 3)`（前 3 项）。
+
+按钮文案：Text.value 绑 `$showAll ? '收起' : '查看更多...'`。
+
+点击事件（customAction）：
+
+```javascript
+// 简单
+this.setData({ showAll: !this.state.showAll });
+// 或
+var newState = !this.state.showAll;
+this.state.showAll = newState;
+this.setData(this.state);
+```
+
+变体 A — 整段用 v-show 控制每项显隐（accountCreditedlist）：v-show condition.expression = `$_index < 3 || $showAll`，点击按钮 `this.state.showAll = !this.state.showAll; this.setData(this.state)`。
+
+变体 B — 复合条件（accountCreditedlist）：`$action === 'onSelect' || ($_index < 3 || $showAll) || $action === 'multi'`（选择模式下全显，否则前 3 或展开）。
+
+来源：account、activityList、depositList、activityRight、accountCreditedlist、holdFinancialProducts。
+
+## 4. globalSet 子→父数据透传
+
+用途：子组件（如列表项内按钮）修改数据后，通知根节点更新 state 并重渲染。子组件无法直接改根 state，只能 postMessage 让根节点监听器代劳。
+
+**铁律（lint `r54`）**：ListLayout/GridLayout 的 item 事件里修改绑定数据禁止直接 this.setData/setRootData/直接 state 赋值——必须走本范式透传；用了 globalSet 但根节点没注册监听同样拦截。**payload 即 patch 对象，与 `setData(...)` 入参逐字一致**（浅合并、语义同 setData），存量 setData 代码迁移只需改调用名；深路径写入不内置于范式，确需时在卡内自扩展 $set 监听（activityRight/DepositHolding 等历史实现）；监听回调里 this 不可靠，一律用 onReady 闭包捕获的 self。
+
+**读 item 字段同理直读（铁律 r55）**：item 事件里 `this.state.<field>` 就是当前项字段（平台保证展开到 state），如 `var q = this.state.query;`；禁止 `$$` / `this.state.$$` / `if (q === undefined && this.state.$$)` 之类兜底判断，lint `r55` ERROR 拦截。
+
+根节点 onReady（customAction）注册监听（固定范式，serviceEvaluation 为规范实现）：
+
+```javascript
+var self = this;
+this.addEventListener('globalSet', function (event) {
+  var patch = (event && event.data) || {};
+  if (patch && typeof patch === 'object' && Object.keys(patch).length) {
+    self.setData(patch);
+  }
+});
+```
+
+子节点（列表项按钮）customAction：
+
+```javascript
+// patch 对象与 setData(...) 入参逐字一致——存量 setData 代码迁移只需改调用名
+this.postMessage('globalSet', { overallActiveQuery: q, overallLocked: true });
+```
+
+配合 syncList 事件触发列表重算（activityRight）：
+
+```javascript
+// 根节点
+var initList = function () {
+  var curGroup = self.state['listData' + self.state.activeTab];
+  self.state.renderListData = curGroup[self.state.activeSubTab].list;
+  self.state.showAll = false;
+  self.setData(self.state);
+};
+initList();
+this.addEventListener('syncList', function (event) { setTimeout(initList, 10); });
+
+// 子节点切 tab 后
+this.postMessage('globalSet', { key: 'activeSubTab', value: this.state._index });
+this.postMessage('syncList');
+```
+
+相关内部事件名（49 卡实测）：updateData、globalSet、globalUpdateItem、syncList、clearVerifyTimer、sendVerfiyClick。updateData 与 globalSet 形态一致（key 可为路径数组），accountCreditedlist 用 updateData。
+
+## 5. 金额格式化（千分号/正负号/货币符号）
+
+用途：金额显示带千分号、2 位小数、可选正负号与货币符号。
+
+内联表达式（来源 creditCardPayment，适合单处使用）：
+
+```javascript
+'剩余应还¥' + ($currentPeriodAmount * 1).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+```
+
+健壮版表达式（**默认口径**：显示金额一律在 view 表达式里直出，不在 onReady 预生成 `*_fmt`）：
+
+```javascript
+// 恒为正的金额（应还 / 最低应还 / 总额）
+'￥' + (((($remainingAmount || 0) + '').replace(/,/g, '') * 1) || 0).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+
+// 可能为负的金额：前面加符号位
+(((($paidAmount || 0) + '').replace(/,/g, '') * 1) < 0 ? '-' : '') + '￥'
+  + Math.abs((($paidAmount || 0) + '').replace(/,/g, '') * 1).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+```
+
+- `($x || 0) + ''` 统一成字符串 → `.replace(/,/g, '')` 去掉上游可能已带的千分号 → `* 1` 数值化。
+- 末尾 `|| 0` 是 `NaN` 兜底，等价旧 helper 里的 `if (isNaN(num)) num = 0`；缺了它，脏值会渲染成 `￥NaN`。
+- 确定恒为正就别套 `Math.abs` + 符号三元，白占长度。
+
+> ⚠️ **反范式（已废弃，勿再生成）**：在 onReady 里 `for (key in this.state)` 按 **key 后缀**批量造 `key + '_fmt'`：
+> ```javascript
+> if (key.slice(-6) === 'Amount' && typeof val === 'number') { this.state[key + '_fmt'] = ... }
+> ```
+> 按 key 名猜语义不可靠：命名不规范就整片漏掉（`totalAmt` / `amount` / `balance` 一个都不命中）；`_fmt` 又不是声明变量，调试面板里看不见；把关条件一旦写错（如上面的 `typeof val === 'number'`，上游投字符串数字就全军覆没），金额**整块空白且零报错**，极难定位。creditCardBill 已改造为表达式直出。
+
+**唯一例外**：`_fmt` 本身是 `inputParams[].children` 里**声明过的字段**（上游数据契约，如 creditCardBill 的 `billList[].amount_fmt`）。这时可以在 onReady 里**指名道姓**赋值——显式取字段，不靠 key 匹配：
+
+```javascript
+this.$formatMoney = function (money, isPrefix, bothSign) {
+  var num = parseFloat(money);
+  if (isNaN(num)) { num = 0; }
+  var sign = num < 0 ? '-' : (num > 0 && bothSign ? '+' : '');
+  var parts = Math.abs(num).toFixed(2).split('.');
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  return sign + (isPrefix ? '￥' : '') + parts.join('.');
+};
+// 列表项金额：显式 e.amount，bothSign=true 让正数也带 +
+this.state.billList.forEach(function (e) {
+  e.amount_fmt = _this.$formatMoney(e.amount, true, true);
+});
+this.setData(this.state);
+```
+
+要点：
+- `* 1` / `parseFloat` 把字符串金额转数字；`|| 0` / `isNaN` 兜底 0，绝不让 `NaN` 上屏。
+- 千分号正则 `/\B(?=(\d{3})+(?!\d))/g` 只格式化整数部分，小数部分不动。
+- 正号：`num > 0 && bothSign ? '+' : ''`（bothSign=true 时正数也显 +，适合收支列表）。
+- 负号：`num < 0 ? '-' : ''`；货币符：`isPrefix ? '￥' : ''`（新生成卡用半角 `¥`，见 amount_formatting.md §2）。
+- 金额之间的**相等比较**不能直接 `$a == $b`（两个字符串走字面比较，`"5638.00" == "5638"` 为 false，会切错条件分支）。写成 `((($a + '').replace(/,/g, '') * 1) == (($b + '').replace(/,/g, '') * 1))`；大小比较（`>` / `<`）JS 自动 coerce，无需改写。
+- `code` 与 `compiled` 两份必须同步改（compiled 是 var/ES5 形式，箭头函数与 `this` 要转 `_this`）。
+
+## 6. Tab ↔ 标题头模式切换（billMode）
+
+用途：一个变量控制"tab 模式"与"单面板+标题头模式"切换（creditCardBill）。
+
+模式：
+- billMode === '0'：显示 tab 栏（row_f1），按 $activeTab 切换两个分面板（column_58/column_89）。
+- billMode === '1'：强制面板 1（已出账单），显 Canvas 标题头（row_titleHeader），隐 tab 栏。
+- billMode === '2'：强制面板 2（未出账单），显标题头，隐 tab 栏。
+
+**关键陷阱**：activeTab 默认值 "1" 不随 billMode 变。在 billMode='2' 时 $activeTab 仍是 '1'，若面板可见性只写 `$activeTab === '1'` 则面板 1 会错显。
+
+正确可见性表达式（v-show condition.expression）：
+
+```
+column_58:  ($billMode === '0' && $activeTab === '1') || $billMode === '1'
+column_89:  ($billMode === '0' && $activeTab === '2') || $billMode === '2'
+row_f1 (tab 栏):    $billMode === '0'
+row_titleHeader:    $billMode !== '0'
+```
+
+规则：任何依赖 $activeTab 的面板，必须先 AND `$billMode === '0'` 再 OR 强制模式。标题头（Canvas）在 $billMode !== '0' 时显示。
+
+来源：creditCardBill（billMode），activityRight（activeTab + activeSubTab + listData<n> 的多层 tab）。
+
+## 7. Tab 切换（activeTab + setData + v-show）—— 纯 Tab 范式
+
+用途：两张（或多张）并列内容面板，点击顶部分页签切换显示（holdFinancialProducts「代销产品 / 自营产品」）。与 §6 billMode 不同：本范式**没有**模式切换，activeTab 只控制面板显隐，最轻量，是手写 Tab 的 canonical 形态。
+
+数据模型：inputParams 加 `activeTab`（string，defaultValue `"1"`，desc 注明 singleMode 时写死 `1`）。
+
+根节点 onReady（customAction）——初始化 + 注册 globalSet 监听 + 深路径 $set helper（来源 holdFinancialProducts）：
+
+```javascript
+var self = this;
+var p1Name = this.state.agencyProductInfo.name;
+var p2Name = this.state.selfProductInfo.name;
+var singleMode = !(p1Name && p2Name);
+var activeTab = singleMode ? (p1Name ? '1' : '2') : '1';
+this.setData({ singleMode, activeTab });
+this.$set = function (key, val) {
+  var keys = Array.isArray(key) ? key : [key];
+  var obj = self.state;
+  for (var i = 0; i < keys.length - 1; i++) { obj = obj[keys[i]]; }
+  obj[keys[keys.length - 1]] = val;
+  self.setData(self.state);
+};
+this.addEventListener('globalSet', function (event) {
+  var data = event.data;
+  self.$set(data.key, data.value);
+});
+```
+
+要点：onReady 里算 `singleMode` / 初始 `activeTab` 后再 `setData`；`$set` + `globalSet` 监听给**深层嵌套子组件**改根 state 用（§4）。顶层签头就近改 activeTab 可直用 `setData`，不必 globalSet。
+
+Tab 签头（Row / 包一个 Text）——点击事件切 tab（指针安全：首行 `var self = this`，用 `self`）：
+
+```javascript
+// 签头 click 处理器（代销 / 自营各一个，结构相同）
+var self = this;
+self.setData({ activeTab: '1' });   // 签头 1（代销产品）
+// self.setData({ activeTab: '2' }); // 签头 2（自营产品）
+
+签头视觉态——字体 color / fontSize / fontWeight 用三元随 activeTab 变（来源 holdFinancialProducts）：
+
+```javascript
+// Text.style.font.color（itemValueFrom:"1"，带 itemDefaultValue）
+$activeTab == '1' ? '#111' : '#666'
+// fontSize
+$activeTab == '1' ? 16 : 15
+// fontWeight
+$activeTab == '1' ? 600 : 400
+```
+
+签头指示条（选中态下划线）——背景图随 activeTab 切换（backgroundType 02，backgroundImage 用 `itemValueFrom:"1"` 表达式算 URL，见 §8）：
+
+```javascript
+// Row.style.background.backgroundImage（itemValueFrom:"1"）
+$activeTab == '1'
+  ? 'https://.../tab1_indicator.png'
+  : 'https://.../tab2_indicator.png'
+```
+
+内容面板——用 v-show 切显隐，condition.expression 直接绑 activeTab（纯 Tab 无 billMode，无需 AND 模式判断）：
+
+```javascript
+// 面板 1（代销产品）v-show condition.expression
+$activeTab == '1'
+// 面板 2（自营产品）v-show condition.expression
+$activeTab == '2'
+```
+
+要点：
+- `this.setData({ activeTab })` 在任意组件调用都会更新根 state → 所有 `$activeTab` 绑定（签头视觉态、指示条、面板 v-show）实时重算重渲染。
+- 纯 Tab 比 billMode 简单：面板表达式只需 `$activeTab == '1'`，**不要**画蛇添足 AND `$billMode`（本范式无 billMode）。
+- 含 singleMode 时（只有一个产品），onReady 把 activeTab 写死对应那份；签头可整体 v-show 隐藏第二份。
+- 来源：holdFinancialProducts（代销/自营双 Tab，本范式全部要素 export-proven）。
+
+## 8. 图片承载复杂背景 / 状态相关视觉（backgroundImage）
+
+用途：卡片 DSL 的元素样式（rect/flex/background 的颜色·渐变·圆角）表达力有限，无法还原的视觉效果——整页复杂背景（渐变+纹理+裁切）、选中态指示条、徽标装饰条——一律**用图片承载**，挂到容器的 `background`（itemId 300）上。来源 holdFinancialProducts 两类用法都已实测。
+
+样式落点：`style.properties[]` 里 itemId `"300"`、itemKey `"background"`，其 `itemChildren.properties`：
+
+```json
+[
+  { "itemId": "001", "itemKey": "backgroundType", "itemValueFrom": "0", "itemValue": "02" },
+  { "itemId": "003", "itemKey": "backgroundImage", "itemValueFrom": "2", "itemValue": "https://.../complex_bg.jpg" }
+]
+```
+
+两类取值（对照 itemValueFrom 三态，见 expression_engine.md §2）：
+
+- **静态复杂背景（itemValueFrom:"2"，资源路径）**：背景是固定整图时直接给 URL，无需表达式。holdFinancialProducts 的整页产品背景即用 `itemValueFrom:"2"` + 远程 `.jpg`（`https://uat-pkg.finmall.com/filestore/...`）。渲染层 `doReplaceUrl + doI18n` 解析，`@filestore/...` 别名或 `https` 均可；默认 position 50% 50%、size cover、repeat no-repeat。
+- **状态相关视觉（itemValueFrom:"1"，表达式算 URL）**：指示条 / 选中态装饰等随 activeTab、选中态切换时，backgroundImage 写成 `$` 表达式，在三态里归为「变量/表达式」，必须带 `itemDefaultValue`（undefined 兜底）。holdFinancialProducts 的 Tab 指示条即 `$activeTab == '1' ? urlA : urlB`（itemValueFrom:"1"）。
+
+资源路径铁律（详见 generation_pitfalls.md §3）：
+- **用远程资源**：`@filestore/<path>`（平台别名，导出卡首选）或 `https://...`。本地相对路径（`gen-card-test.png` 之类）预览器解析不到 → 破图。
+- **缺素材先占位**：手头无对应切片时，先放占位图或纯色，不卡生成（占位约定见 generation_pitfalls.md §3.1）。
+- 远程整图背景优先 `backgroundType:"02"` + `backgroundImage`；不要用 `Image` 组件硬铺满（层级/裁切不如 background 干净）。
+
+要点：
+- `backgroundImage` 的 `itemCondition` 是 `backgroundType.02`——只有 backgroundType 写成 `"02"` 时该属性才生效，生成新属性照抄同组件导出的 itemCondition。
+- 规则性渐变若标注里有明确色标和方向，才可用 `backgroundType:"03"`（backgroundGradient）。弥散、光晕、噪点、不规则纹理等无法用基础组件可靠复现的效果一律视作位图：优先引用切图；缺失切图时先从画板局部裁切，仍不可用时再用占位图。
+- 来源：holdFinancialProducts（`itemValueFrom:"2"` 整页复杂背景 jpg；`itemValueFrom:"1"` Tab 指示条 png 切换，均 export-proven）。
+
+## 9. 手风琴分组折叠（Accordion 分组展开/收起）—— icon 按钮切换
+
+用途：一组并列分组（如存款各品种：整存整取 / 零存整取 / 通知存款），每组有标题行 + 一个**箭头图标按钮**，点击该图标在「展开（显示组内明细）/ 收起（隐藏组内明细）」间切换；图标箭头随状态翻转（收起 `angle_down`、展开 `angle_up`）。与 §3 的「平铺列表显示更多」是两种不同交互——§3 是单一 `showAll` 控制整段显隐，本范式是**每组独立 `hide` 标志**控制**各组自己的**内容显隐。来源 DepositHolding（3 组静态手风琴，export-proven）。
+
+数据模型：每个分组对象自带 `hide` 布尔字段（**默认 `false` = 展开**，默认即露出明细；`true` = 收起）。
+
+```json
+// data.json 里 listData1 / listData2 都是分组数组，每组：
+{ "groupName": "整存整取", "totalAmount": 15000, "hide": false,
+  "list": [ { "accountNum": "...", "name": "一年期整存整取", "money": 5000, "rate": 1.72, "date": "2023-01-01" } ] }
+```
+
+三组状态切换靠根 `activeTab`（`'1'`→`listData1`，`'2'`→`listData2`）在表达式里选对数组；本范式与 §7 纯 Tab 可叠加。
+
+**① 箭头图标按钮**（组标题行里的 Icon，componentId 如 `icon_5u`）：
+- `icon` 属性（itemValueFrom `"1"`）随该组 `hide` 翻转箭头：
+
+```
+($activeTab == '1' ? $listData1 : $listData2)[0].hide ? 'angle_down' : 'angle_up'
+```
+
+- `eventactions[0]`（点击事件，customAction）——翻转该组的 `hide`。**严格按铁律首行 `var self = this`、每条语句 `;`（见 rules.md §四）**：
+
+```javascript
+var self = this;
+var num = self.state.activeTab;
+var itemKey = 'listData' + num;
+var curIndex = 0; // 本组下标；若为 list 模板渲染则换成 self.state._index
+var curVal = self.state[itemKey][curIndex].hide;
+self.postMessage('globalSet', {
+  key: [itemKey, curIndex, 'hide'],
+  value: !curVal
+});
+```
+
+**② 组内明细面板**（包明细的 Column，componentId 如 `column_eb`）：用 v-show 控制显隐——`showType:"02"`（满足条件**隐藏**）+ `condition.expression` 绑该组 `hide`：
+
+```json
+// directives: [{ itemKey:"v-show", itemValueFrom:"0", itemValue:{}, itemChildren:{ properties:[
+//   { itemId:"001", itemKey:"showType", itemValueFrom:"0", itemValue:"02" },
+//   { itemId:"002", itemKey:"condition", itemValueFrom:"0",
+//     itemValue:{ "name":"($activeTab=='1'?$listData1:$listData2)[0].hide",
+//                 "expression":"($activeTab=='1'?$listData1:$listData2)[0].hide" } }
+// ]}}]
+```
+`hide:false`（展开）→ 条件 false → showType 02 不隐藏 → 明细显示；`hide:true`（收起）→ 条件 true → 隐藏。与图标箭头方向一致。
+
+索引取法（两种，必选其一）：
+- **静态手风琴（DepositHolding 实测）**：分组块**手动重复** N 份（无 list 循环），每个图标按钮的 `curIndex` 写死 `0 / 1 / 2`，`icon` 绑定与内容 v-show 的 `[N]` 同步写死。组数固定且较少时首选。
+- **列表模板渲染**：分组来自 `list` / v-for，则 `curIndex` 与 `[N]` 换成运行时索引——图标 click 用 `self.state._index`（activityRight 同款），`icon` 绑定与 v-show 条件用 `$_index`。组数不定时首选。
+
+globalSet 深路径翻转机制见 §4（`postMessage('globalSet', { key:[...路径数组], value })` + 根 `onReady` 注册 `globalSet` 监听 + `$set` helper）。**注意**：§4 的示例代码为早期精简写法（未强制 `self` / 部分语句无 `;`），新生成请一律按上方「铁律」形式写——`var self = this` 起手、`self` 访问实例、每条语句 `;` 收尾。
+
+要点：
+- `hide` 是**每组独立**布尔（不是 §3 的全局 `showAll`）；图标箭头 `angle_down/angle_up` 是折叠/展开的视觉提示，直接绑 `hide` 三元，零额外状态。
+- 图标按钮 click 必须走 `globalSet` 深路径（子组件改不了根 state，见 §4），`key` 用 `[itemKey, curIndex, 'hide']` 路径数组精确命中某一组的 `hide`。
+- `v-show showType:"02"` 的语义是「满足条件**隐藏**」（不是显示），条件直接写 `[curIndex].hide` 即「收起时隐藏」。别误写成 `01`（那会变成收起时反而显示）。
+- 来源：DepositHolding（3 组静态手风琴：`icon_5u/_74/_c3` 三个箭头按钮 + `column_eb` 等明细面板，均 export-proven）。
+
+## 10. Canvas 甜甜圈 / 环形比例图（donut chart）
+
+用途：UI 出现**环形比例图 / 甜甜圈图 / 占比环**（中间镂空、各扇区按占比着色）——卡片 DSL 无图表组件，一律用 **Canvas 自绘**。甜甜圈 = 在每个扇区画「外圆弧 + 内圆弧反向 + 闭合」的环形段（donut wedge），而非实心饼。来源 assetOverview（`canvas_4d` 140×140 甜甜圈，export-proven）。
+
+**数据契约（两种取法，二选一）**：
+- 推荐：原始值进 `listData`（如 `money`），`onReady` 里把占比 `ratio` 算好写回每项，甜甜圈读 `ratio`。这样中心总额、图例、Tooltip 都能复用同一份占比，且金额参与绘图/计算时拿的是数字（见 §5 反向解析）。
+- 或：`listData` 直接给 `ratio`（0~1 或 0~100），甜甜圈直接读。
+
+```javascript
+// onReady（customAction）—— 原始 money → 占比 ratio 写回 state（严格按铁律：var self=this + 每条 ; ）
+var self = this;
+var total = self.state.listData.reduce(function (t, e) { return t + Number(e.money); }, 0);
+self.state.listData.forEach(function (e) { e.ratio = Number(e.money) / total; });
+self.state.totalAmount = total.toFixed(2);
+self.setData(self.state);
+```
+
+**Canvas 结构**：
+- `Canvas` 容器 rect 设成**正方形**（如 140×140），`flex.flexShrink:"0"`（防止被压缩变形）；background 透明（backgroundType 01 + 空 backgroundColor）。
+- eventactions[0]：eventKey=`onMeasured`（初始化渲染）、actionType=`customAction`——**所有绘图都在 onMeasured 里用 `event.canvas` 完成**（Canvas 缺 onMeasured 会 lint 报错且一片空白，见 component_rules.md）。
+
+onMeasured 绘图（甜甜圈核心——双弧环形段）：
+
+```javascript
+var self = this;
+function drawDonut(data, canvas, width, height) {
+  var ctx = canvas.getContext('2d');
+  canvas.width = width;            // 关键：缓冲 = 显示尺寸（设计 px），避免糊
+  canvas.height = height;
+  ctx.imageSmoothingEnabled = true;
+  ctx.imageSmoothingQuality = 'high';
+  var colors = ['#46A5FF', '#43D84C', '#FFDC51', '#FF6A47'];
+  var total = data.reduce(function (acc, v) { return acc + v; }, 0);
+  var cx = canvas.width / 2;
+  var cy = canvas.height / 2;
+  var outerR = width / 2;
+  var innerR = width / 3;          // 内半径 = 外半径的 1/3 → 镂空甜甜圈
+  var start = 0;
+  data.forEach(function (v, i) {
+    var slice = v / total * Math.PI * 2;
+    var end = start + slice;
+    ctx.beginPath();
+    ctx.arc(cx, cy, outerR, start, end);          // 外圆弧（顺时针）
+    ctx.arc(cx, cy, innerR, end, start, true);    // 内圆弧（逆时针回描）
+    ctx.closePath();                              // 闭合 → 环形段
+    ctx.fillStyle = colors[i % colors.length];    // 调色板按 index 循环
+    ctx.fill();
+    start = end;
+  });
+}
+var ratios = [];
+for (var i = 0; i < self.state.listData.length; i++) {
+  ratios.push(parseFloat(self.state.listData[i].ratio));
+}
+drawDonut(ratios, event.canvas, event.width, event.height);
+```
+
+要点：
+- **环形段画法**：`arc(外)` 正向 + `arc(内, …, true)` 反向 + `closePath()` 是关键三连；只画一条 `arc` 是实心饼，必须两条弧回描才出环。
+- **防糊**：`canvas.width = width; canvas.height = height`（width=event.width 即设计 px），否则缓冲默认 300×150 会被缩放糊掉。这也**修正了 §1 的坑**——§1 说「别用 canvas.width/2 做左对齐（默认 300 是设备 px 假设）」；本范式先把缓冲设成设计 px，`canvas.width/2` 才是真正的设计稿中心，居中/对称都准。
+- **坐标系**：`event.canvas` 是设计稿坐标系包装对象（缩放已换算），绘图用**逻辑设计 px**，**不要乘 devicePixelRatio**。圆心 `canvas.width/2`、半径 `width/2` 都在设计 px 内，自洽。
+- **中心文字**：甜甜圈中间的总额/标题是**另叠一个绝对定位 Text**（不在 canvas 里画），便于用 DSL 文本样式与千分号（§5）。canvas 只负责环。
+- **调色板**：`colors[i % colors.length]` 让扇区数超过调色板长度时循环取色；配色建议按 design 规范 Token 化（见 amount_formatting.md 配色约束），勿硬编码裸色（除非如本卡上游既定）。
+- **code 与 compiled 两份同步**：compiled 是 var 形式（箭头函数会被转 function），导出前两者必须一致。
+- 铁律对齐：首行 `var self = this`、嵌套回调一律 `self`、每条语句 `;` 收尾（见 rules.md §四）。
+- 来源：assetOverview（`onReady` 算 ratio + `canvas_4d` 140×140 甜甜圈，export-proven）。同思路可画进度环、半圆环（改 start 角与扫过的弧度范围即可）。
+
+### 环形倒计时（Canvas 自绘：进度环 0%→100% 步进 + 中心数字）
+
+用途：UI 出现**环形倒计时 / 进度环**（同心圆环 + 中心数字 + 单位如 S/秒）——如转账结果页倒计时。普通 Text/样式无法表达环形进度动画，**必须 Canvas 自绘**。来源 transferDetail（v3 `countdown` 语义块自动生成，export-proven）。
+
+**识别信号**（v3 `extractSemantics` 自动判定，纯几何/格式）：① ≥2 个近似正方形 shape 两两同心 → 圆环组；② 环中心 ±(半径+8) 内独立数字文本（fs≥20，1-3 位纯数字）；③ 数字附近单位短文本（S/s/秒/分）。命中后数字/单位文本自动从常规渲染排除。
+
+**Canvas 结构**：直径=环形尺寸，flexShrink:0，背景透明（backgroundType 01 + 空 backgroundColor）；eventactions[0]=`onMeasured`（初始化渲染 + 启动步进定时器）。
+
+```javascript
+// onMeasured（customAction）—— 画环 + 中心数字 + setInterval 1s 步进
+var self = this;
+// 总秒数/已流逝秒数来自绑定字段（inputParams + data.json），外部可配置；缺省兜底 10/0
+self.state.countdownElapsed = self.data.countdownElapsed != null ? self.data.countdownElapsed : 0;
+self.state.countdownTotal = self.data.countdownTotal != null ? self.data.countdownTotal : 10;
+self.setData(self.state);
+function drawRing(canvas, w, h, elapsed, total) {
+  var ctx = canvas.getContext("2d");
+  canvas.width = w; canvas.height = h;
+  ctx.clearRect(0, 0, w, h);
+  var cx = w / 2, cy = h / 2;
+  var radius = Math.min(w, h) / 2 - 4;
+  var ratio = total > 0 ? elapsed / total : 0;
+  if (ratio > 1) { ratio = 1; }
+  ctx.lineWidth = 4;
+  ctx.beginPath();
+  ctx.arc(cx, cy, radius, 0, Math.PI * 2);           // 背景环（浅色）
+  ctx.strokeStyle = "#E6F8F0";
+  ctx.stroke();
+  if (ratio > 0) {
+    ctx.beginPath();
+    ctx.arc(cx, cy, radius, -Math.PI / 2, -Math.PI / 2 + ratio * Math.PI * 2); // 进度弧（从12点方向顺时针）
+    ctx.strokeStyle = "#06AB67";
+    ctx.lineCap = "round";
+    ctx.stroke();
+  }
+  var remaining = Math.max(0, total - elapsed);
+  ctx.fillStyle = "#06AB67";
+  ctx.font = "28px sans-serif";
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.fillText(String(remaining).padStart(2, "0"), cx - 4, cy); // 中心剩余秒数（两位数补零）
+  ctx.font = "12px sans-serif";
+  ctx.fillStyle = "#999999";
+  ctx.fillText("S", cx + 20, cy + 8);                // 单位（与数字右缘留 3-4px，勿用 cx+14 会重叠）
+}
+drawRing(event.canvas, event.width, event.height, self.state.countdownElapsed, self.state.countdownTotal);
+if (self._cdTimer) { clearInterval(self._cdTimer); }
+self._cdTimer = setInterval(function () {
+  var e = (self.state.countdownElapsed || 0) + 1;
+  var tot = self.data.countdownTotal != null ? self.data.countdownTotal : 10;
+  if (e > tot) { clearInterval(self._cdTimer); return; }
+  self.state.countdownElapsed = e;
+  self.setData(self.state);
+  drawRing(event.canvas, event.width, event.height, e, tot);
+}, 1000);
+```
+
+要点：
+- **进度语义**：`ratio = elapsed/total`（已消耗比例），0% 空环 → 100% 满环；中心显示 `total - elapsed`（10→0）。
+- **重绘机制**：onMeasured 是生命周期只触发一次，定时器内必须**手动调 drawRing 重绘**，不依赖渲染器自动重触发。
+- **配色**：背景环浅色、进度弧深色、中心数字高对比；v3 从环形组 border 色自动提取（非 #F0F0F0 描边 → 进度色）。
+- 坐标设计 px 勿乘 DPR；code/compiled 同步；铁律：`var self = this` + 每条 `;` 收尾。
+
+## 11. 角标 / 角标签（AbsoluteLayout 叠加小标）
+
+设计稿出现贴在内容块**角落的小标签**（如「付款账户」「收款账户」「NEW」、折扣标、状态标）→ DSL 无 badge 组件，用 **AbsoluteLayout 叠加**实现。
+
+机制（renderer/export-proven：transferPlan `absolutelayout_79`）：
+- AbsoluteLayout 的子元素**全部 `position:absolute` 脱标**（见 `component_specs.md` AbsoluteLayout），互相重叠。
+- 容器 `align`（TopLeft/TopCenter/TopRight/CenterLeft/Center/CenterRight/BottomLeft/BottomCenter/BottomRight）决定整组子元素停靠哪个角/边；**留空 = TopLeft 默认**。
+- 在 AbsoluteLayout 内放 ① 基础内容（一个满尺寸子元素，如 Column 100%×H、flex column 居中）+ ② 角标（一个小尺寸 Text/Image 子元素）。两者重叠，角标随 `align` 浮在对应角上。
+- 角标样式 = 一个「胶囊/标签」：
+  - `borderRadius` 用**非对称圆角**做折叠角签感：如 `borderRadiusType:"1"`、`borderTopLeftRadius:8`、`borderTopRightRadius:0`、`borderBottomRightRadius:8`、`borderBottomLeftRadius:0`（左上+右下圆）。统一小圆角也可。
+  - `background`：`backgroundType:"01"` + `backgroundColor`（如浅橙 `rgba(255,240,225,1)`）；`border.isBorder:"0"`。
+  - `font.color` 橙 `rgba(255,132,1,1)`、`fontSize:10`、`fontWeight:400`。
+  - `padding`：`paddingType:"1"`，`paddingLeft/Right:5`、`paddingTop/Bottom:1`。
+  - 文案静态（`itemValueFrom:"0"`）或数据驱动（`itemValueFrom:"1"` 表达式）。
+
+导出卡实例（transferPlan 付款账户块）：
+- `absolutelayout_79`（width 100%、height 140、`align:""`）内含：
+  - `column_7e`（100%×140，column/center/gap4/padding2）：`image_6p`（bankIcon 28×28）+ `text_6z`（bankName）+ `text_74`（尾号）；
+  - `text_7k` = "付款账户"，即上面那条橙色胶囊样式 → 重叠在左上角的角标。
+- 收款账户块复用同一范式（角标文案 "收款账户"）。
+
+```jsonc
+// 角标容器（AbsoluteLayout，作为内容区外层，align 选角）
+{ "componentId": "absolutelayout_xx", "className": "AbsoluteLayout",
+  "properties": [ { "itemId":"001", "itemKey":"align", "itemValueFrom":"0", "itemValue":"TopLeft" } ],
+  "style": { "properties": [ { "itemId":"200","itemKey":"rect","itemValue":{},"itemChildren":{ "properties":[
+    { "itemId":"003","itemKey":"width","itemValueFrom":"0","itemValue":"100%" },
+    { "itemId":"004","itemKey":"height","itemValueFrom":"0","itemValue":"140" } ] } } ] },
+  "slots": [ { "slotKey":"default","slotScope":false,"components":[
+    // ① 基础内容（满尺寸，按需替换）
+    { "componentId":"column_xx","className":"Column","style":{...100%×140 column center...},"slots":[{...}] },
+    // ② 角标（小尺寸，重叠在 align 角）
+    { "componentId":"text_badge","className":"Text",
+      "style":{ "properties":[
+        { "itemId":"1100","itemKey":"font","itemValue":{},"itemChildren":{ "properties":[
+          { "itemId":"001","itemKey":"color","itemValueFrom":"0","itemValue":"rgba(255,132,1,1)" },
+          { "itemId":"002","itemKey":"fontSize","itemValueFrom":"0","itemValue":"10" },
+          { "itemId":"004","itemKey":"fontWeight","itemValueFrom":"0","itemValue":"400" } ] } },
+        { "itemId":"300","itemKey":"background","itemValue":{},"itemChildren":{ "properties":[
+          { "itemId":"001","itemKey":"backgroundType","itemValueFrom":"0","itemValue":"01" },
+          { "itemId":"002","itemKey":"backgroundColor","itemValueFrom":"0","itemValue":"rgba(255,240,225,1)" } ] } },
+        { "itemId":"600","itemKey":"borderRadius","itemValue":{},"itemChildren":{ "properties":[
+          { "itemId":"001","itemKey":"borderRadiusType","itemValueFrom":"0","itemValue":"1" },
+          { "itemId":"003","itemKey":"borderTopLeftRadius","itemValueFrom":"0","itemValue":"8" },
+          { "itemId":"004","itemKey":"borderTopRightRadius","itemValueFrom":"0","itemValue":"0" },
+          { "itemId":"005","itemKey":"borderBottomRightRadius","itemValueFrom":"0","itemValue":"8" },
+          { "itemId":"006","itemKey":"borderBottomLeftRadius","itemValueFrom":"0","itemValue":"0" } ] } },
+        { "itemId":"400","itemKey":"padding","itemValue":{},"itemChildren":{ "properties":[
+          { "itemId":"001","itemKey":"paddingType","itemValueFrom":"0","itemValue":"1" },
+          { "itemId":"003","itemKey":"paddingLeft","itemValueFrom":"0","itemValue":"5" },
+          { "itemId":"004","itemKey":"paddingTop","itemValueFrom":"0","itemValue":"1" },
+          { "itemId":"005","itemKey":"paddingRight","itemValueFrom":"0","itemValue":"5" },
+          { "itemId":"006","itemKey":"paddingBottom","itemValueFrom":"0","itemValue":"1" } ] } } ] },
+      "properties":[ { "itemId":"001","itemKey":"value","itemValueFrom":"0","itemValue":"付款账户" } ],
+      "eventactions":[], "slots":[] }
+  ] } ] }
+
+// 若设计稿角标是图片（活动标/折扣标）：把上面的 text_badge 换成小尺寸 Image 子元素即可
+```
+
+要点：
+- `align` 是角标停靠点：留空=TopLeft；换角改 `TopRight`/`BottomRight` 等。
+- 角标必须是 AbsoluteLayout 内的**第二个小尺寸子元素**，与基础内容重叠；**不要**把它塞进基础内容的 Column 里（那会跟随流式布局，不再是角标）。
+- 纯色角标用 `backgroundColor`；图片角标用 `Image`（缺素材见 `generation_pitfalls.md §3.1` 占位）。
+- 配色按 design 规范 Token 化（见 `amount_formatting.md`），勿硬编码裸色，除非如本卡上游既定。
+- 铁律对齐：角标无事件 `eventactions:[]`；若带点击，customAction 首行 `var self = this`、每条 `;`（见 `rules.md §四`）。
+- 来源：transferPlan `absolutelayout_79`（"付款账户"）/ 同卡收款账户块（"收款账户"），均 export-proven。
+
+## 12. 系统弹框 / 确认框 / 消息提示（alertDialog，非卡片）
+
+用途：设计稿中识别为**弹框 / 确认框 / 消息提示 / toast** 类画板（上游 `sketch-spec-to-card` 已判为 `artboardType=overlay_dialog`）。**这类不生成独立卡片**，而是「在触发它的父卡片对应交互中调用原生 `alertDialog` JSAPI」。
+
+> 与 §2 `alertCard` 的区别：`alertCard` 是「富内容的子卡」（独立 Dialog 卡，带标题栏+关闭按钮，可能回传数据）；`alertDialog` 是「平台原生简单弹框」（确认/告警/提示，通常不回传复杂数据）。上游已通过 `classify_artboard` 区分，下游按分类处理即可。
+
+调用（来源 budgetAnalysis 温馨提示、creditCardPayment 还款前二次确认，export-proven）：
+
+```javascript
+ynet.callJSAPI('alertDialog', {
+  title: '提示', message: '还款成功', okButton: '确定', cancelButton: '取消',
+  clickBgToHide: false, cancelGrayStyle: false
+}, function (data) {
+  // data.ok: 是否点确定; data.dismissByClickBg: 是否点背景消失
+  if (data.ok) {
+    // 点确定后的后续动作（如发起还款 / 跳转）
+  }
+});
+```
+
+要点：
+- 入参：title / message / okButton(默认"确定") / cancelButton(空串不显示) / clickBgToHide(默认 false) / cancelGrayStyle(默认 false)。
+- 出参：ok(boolean)、dismissByClickBg(boolean)。
+- **纯提示 / toast 类（无取消键）**：省略 `cancelButton`；或改用 `showToast({ message: '余额不足', showIcon: '0' })`（约 2.2s 自动消失，showIcon: '0'错误/'1'正确/'2'不显示）。
+- **视觉不必还原设计稿**，以平台原生弹框为准；文案（title/message/按钮）取自上游 `prompt.md §3` 提取结果。
+- **不产出 schema.json**：上游 `prompt.md` 对该画板已是「交互提示文档」，明确声明不建卡。下游消费时，把本调用补到**父卡**（上游 `clusters.json.overlays[].parentKey` 或 `prompt.md §4` 指示的触发卡）的对应按钮 / 条件事件中。
+- 参考存量：`budgetAnalysis`（温馨提示→alertDialog）、`creditCardPayment`（还款前二次确认→alertDialog）。片段见 `recipe_snippets/alertDialog-call.json`。
+
+## 13. 样式生成铁律（生成器通用：geo/v3 适用）
+
+用途：geo/v3 生成 schema.json 时，**必须遵守的样式格式约束**。违反任一条都会导致渲染器丢弃样式（表现为「UI 样式几乎全部丢失」——文本无色无大小、背景透明、TabBar 无底色）。
+
+> **根因记录（2026-08-13）**：首轮生成 4 张校准卡全部「样式全丢」，排查发现渲染器对以下三条零容忍。
+
+### 13.1 颜色必须用 rgba 格式
+
+渲染器**不接受 hex 颜色值**（如 `#333333`、`#0079F2`）。所有 styleState 中的 color / backgroundColor 必须转为 `rgba(r,g,b,a)`：
+
+```
+✅ rgba(51,51,51,1)        ← 渲染器接受
+❌ #333333                  ← 被忽略，显示默认色
+```
+
+实现：`hexToRgba(hex, alpha=1)` 辅助函数，在 `makeText` / `makeIcon` / `makePrimaryButton` / `makeCardContainer` / `Root` 等所有设色点调用。
+
+### 13.2 Text 组件必须含 font 组
+
+Text 的 `styleState.properties` 中**必须存在 font 分组**，且包含至少 fontSize 和 color：
+
+```json
+{
+  "itemKey": "font",
+  "itemChildren": {
+    "properties": [
+      { "itemKey": "fontSize",   "itemValue": "14" },
+      { "itemKey": "color",      "itemValue": "rgba(51,51,51,1)" },
+      { "itemKey": "fontWeight", "itemValue": "400" }
+    ]
+  }
+}
+```
+
+缺少 font 组 → `buildComponentFull` 不注入字体样式 → 文本回退到浏览器默认样式（无大小、无颜色差异）。
+
+实现：`ensureStyleGroup(node, 'font')` 在 `makeText()` 入口处强制补齐；`setStyleChild()` 写入具体属性值。
+
+### 13.3 容器组件必须含 background 组
+
+Row / Column / Root 等容器若需背景色，styleState 中**必须存在 background 分组**：
+
+```json
+{
+  "itemKey": "background",
+  "itemChildren": {
+    "properties": [
+      { "itemKey": "backgroundColor", "itemValue": "rgba(245,246,248,1)" }
+    ]
+  }
+}
+```
+
+缺少 → 背景透明，灰底/白底卡片容器不可见。
+
+### 13.4 各组件设色清单
+
+| 组件 | 设色点 | 默认值 |
+|------|--------|--------|
+| makeText | font.color | rgba(51,51,51,1) |
+| makeIcon | font.color | 按传入参数 |
+| makeTabBar Row | background.backgroundColor | #FFFFFF → rgba(255,255,255,1) |
+| makeTabBar label | font.color | primary 色（如 #0079F2） |
+| makeCardContainer | background.backgroundColor | #FFFFFF |
+| makePrimaryButton | background.backgroundColor + font.color | #0079F2 底 + #FFFFFF 字 |
+| Root | background.backgroundColor | #F5F6F8 |
+
+### 13.5 验证方法
+
+生成 schema 后执行 validate（0 错误），再通过离线渲染截图视觉检查（`render_card.mjs` 用 `vendor/preview` 构建产物 + 系统 Chrome CDP，用完即关，不依赖 `npm run dev`）：
+
+```
+node scripts/render_card.mjs --id <cardId> --width 375 --out render.png
+```
+截图应呈现：灰底白圆角容器、文本层次分明（标题深/链接蓝/辅助灰）、TabBar 有底色和标签色。
+
+## 14. Canvas 评分仪表盘（弧形进度环 + 中心分数）
+
+用途：半环/大半环形评分仪表盘（高亮弧表得分，中心大数字 + 小标签）。完整代码与标定方法见 `recipe_snippets/canvas-gauge-score.json`。
+
+要点（export-proven：assetAllocRadar）：
+- 圆心放画布内偏下，**底部缺口让圆被画布底边自然裁掉**，不算裁切角。
+- 高亮弧起点 157°（标准 canvas 角，0°=3 点钟顺时针），扫角 = `score × (设计高亮角 ÷ 设计标定分)`（标定 70 分=160°）；灰轨从 317° 扫 200°。
+- 中心数字用 spec 标注的真实字体族（如 `500 28px "Helvetica Neue", "PingFang SC"`）——Canvas 可用系统字体，**Text 节点做不到的特殊字体优先走 Canvas**。
+- 数字+单位同基线混排：measureText 两段的宽度 → 居中起点 → 两次 fillText。
+
+## 15. Canvas 五维雷达图（网格 + 渐变填充多边形）
+
+用途：多维雷达/蛛网图。完整代码见 `recipe_snippets/canvas-radar.json`。
+
+要点（export-proven：assetAllocRadar）：
+- 顶点角表 `[270,342,54,126,198]`（正上起顺时针五等分）；环比例按设计实测（本例 `[1,0.714,0.449]`）。
+- 数据多边形按 ratio 缩放顶点半径；**先填充（纵向渐变+描边）后画网格**，网格才压得住。
+- 渐变沿数据包围盒纵向：`createLinearGradient(0, top, 0, bottom)`。
+- 维度标签**不画进 canvas**，用 §16 标签列范式环绕布局，数据驱动。
+
+## 16. 维度标签列两范式（同行式 vs 堆叠式）
+
+用途：图表周围环绕多个「名称 pill + 金额 + 状态 tag」标签列。结构参数见 `recipe_snippets/label-col-modes.json`。
+
+要点（export-proven：assetAllocRadar 金额极限场景）：
+- **同行式**：金额+tag 同一 Row，用于金额短、横向空间够的列；**堆叠式**：金额独占一行、tag 另起一行居中，用于金额位数多的列。
+- **同一张卡两种形态可并存，逐列按最长金额宽度判定**，不要一刀切。
+- pill：h30、radius14、`rgba(255,240,225,0.5)` 底、padding 左8右4、14px w500 橙字 + 20x20 箭头切图。
+- tag：0.5px 状态色 border、radius2、padding2、10px/10px 行高、颜色绑 `$catXStatusColor`。
+- 标签列放 AbsoluteLayout，用 align+margin 停靠微调（只调本列无级联）；容器高 ≥ 最大子列下沿。
+
+## 17. 透明度切换固定范式（opacity-switch，铁律 R57）
+
+用途：节点透明度（不透明度）需要**随状态变化**（选中/未选中、启用/禁用、点亮/未点亮等）。
+
+**为什么必须用范式**：移动端渲染**不支持** `style.other.opacity` 走表达式（`itemValueFrom:"1"`）——表达式透明度只有预览环境可能生效，真机上不生效。所以「透明度会变的节点」一律改写成**多变体 + 容器 + 显隐切换**：
+
+```
+Row|Column#<id>_box            ← 宽高 = 被展示节点宽高；overflow:hidden；点击等事件挂这里
+├─ 变体1  opacity:"100"（静态）  v-show: 条件1
+├─ 变体2  opacity:"50"（静态）   v-show: 条件2
+└─ …（用到的透明度取值有几个，变体就有几个）
+```
+
+硬约束（违反即真机表现错误）：
+1. **变体数 = 用到的不同透明度取值数**；每个变体 `opacity` 必须是静态常量（`itemValueFrom:"0"`）。lint `r57-opacity-expression` ERROR 拦截表达式透明度。
+2. **容器宽高与被展示节点一致**（原节点 `rect.width/height` 搬到容器），并设 `other.overflow:"hidden"`——隐藏变体在部分渲染实现里只隐藏不脱流，靠裁切保证外部布局不被撑开。
+3. 容器显式归零渲染器默认样式：`flex.gap:"0"`、`flex.justifyContent:"center"`、`flex.alignItems:"center"`、`padding.paddingType:"0"`+`padding:"0"`、`background.backgroundType:"00"`。
+4. **事件全部上移到容器**，变体 `eventactions:[]`——隐藏变体不能吃点击、也不能重复绑定。
+5. 变体 v-show 条件**互斥且完备**（任一状态有且仅有一个变体可见）；`condition.name` 必填且取业务短名（铁律 R52）。
+6. 变体保留原节点除 `opacity`/`margin` 外的全部样式与属性；原节点外边距搬到容器；原节点自身的 v-show 留在容器上。
+7. 容器继承原节点在外层的布局角色（space-between Row 里的 40×40 图标 → 容器 40×40 + `flexShrink:"0"`）。
+8. 特殊节点（ListLayout/GridLayout/MultiColumn/AbsoluteLayout/Canvas/Map/Video/ViewContainer）做变体时，v-show 不能直接设在它们上面（铁律 R53）：每个变体先套一层 Row 承载 v-show，容器再套在这些包裹层外。
+9. 互斥 v-show 变体容器是 lint R35 的合法豁免（同一时刻只有一个变体在流里，定宽不累加）。
+10. **静态**透明度（不随状态变）不受本范式约束：直接写常量，或按 r057 §3 乘进颜色/渐变；只有「会变化的透明度」才走本范式。
+
+机械改写工具（可解析 `COND ? A : B` 与右嵌套三元；其他形态 exit 2 提示手工改）：
+
+```bash
+node scripts/apply_opacity_pattern.mjs --id <cardId>              # 改写全部透明度表达式节点
+node scripts/apply_opacity_pattern.mjs --id <cardId> --check      # 只报告（有则 exit 1，可进 CI）
+node scripts/apply_opacity_pattern.mjs --id <cardId> --node comp_8 --container Column
+```
+
+改写后三连：`validate_schema.py` + `lint_card.mjs` + `apply_opacity_pattern.mjs --check`。
+
+验证口径：**预览器不消费组件级 opacity**（截图看不出透明度差异），视觉效果只能真机核对；预览侧验证「结构等价」——改写前后 `render_card.mjs` 截图应逐字节一致（serviceEvaluation 已验证：10 个表情 Image 改写前后 default/选中态渲染均 byte-identical）。
+
+完整可复制子树见 `recipe_snippets/opacity-switch.json`（serviceEvaluation 表情档实例）。