/* AUTO-GENERATED by build-site.ps1 - do not edit by hand */
window.AA_DATA = {"meta":{"generated":"2026-09-11 17:29","lib":"aurora-admin","total":79,"core":10,"extension":69,"brand":"#2F54EB","version":"1.4.0","note":"generated by build-site.ps1 from components/index.json + frameworks/ + specs + contracts + tokens"},"categories":[{"key":"general","count":4},{"key":"navigation","count":10},{"key":"input","count":24},{"key":"display","count":20},{"key":"feedback","count":15},{"key":"system","count":6}],"tokens":[{"comment":"品牌主色：主按钮、选中态、链接","name":"au-color-brand","value":"#2F54EB"},{"comment":"品牌主色悬停","name":"au-color-brand-hover","value":"#1D39C4"},{"comment":"品牌主色点击","name":"au-color-brand-active","value":"#10239E"},{"comment":"品牌浅色背景：选中背景、标签背景、表格悬停","name":"au-color-brand-bg","value":"#F0F5FF"},{"comment":"辅助色","name":"au-color-secondary","value":"#13C2C2"},{"comment":"页面背景","name":"au-color-page-bg","value":"#F5F7FA"},{"comment":"卡片背景","name":"au-color-card-bg","value":"#FFFFFF"},{"comment":"表头背景","name":"au-color-table-header-bg","value":"#FAFAFA"},{"comment":"禁用背景（按钮禁用态）","name":"au-color-disabled-bg","value":"#F5F5F5"},{"comment":"标签绿底","name":"au-color-tag-green-bg","value":"#F6FFED"},{"comment":"Tooltip 深色背景","name":"au-color-tooltip-bg","value":"#1F2329"},{"comment":"标题文字 · 15.4:1","name":"au-color-text-title","value":"#1F2329"},{"comment":"正文文字 · 14.0:1","name":"au-color-text-body","value":"#262626"},{"comment":"次要文字 · 5.10:1（原 #8C8C8C 仅 3.36:1）","name":"au-color-text-secondary","value":"#6E6E6E"},{"comment":"三级文字/描述 · 7.00:1（规范未定义，实现补齐）","name":"au-color-text-tertiary","value":"#595959"},{"comment":"占位文字 · 4.54:1（原 #BFBFBF 仅 1.84:1）","name":"au-color-text-placeholder","value":"#767676"},{"comment":"反色文字（品牌色背景上的白字）","name":"au-color-text-inverse","value":"#FFFFFF"},{"comment":"禁用态文字 · WCAG 1.4.3 对禁用控件豁免（规范定义于组件1/2.txt）","name":"au-color-text-disabled","value":"#BFBFBF"},{"comment":"分割线/边框","name":"au-color-border","value":"#E8ECF1"},{"comment":"更强的实线边框（规范未定义，实现补齐）","name":"au-color-border-strong","value":"#F0F0F0"},{"comment":"成功色 · 5.18:1（原 #52C41A 仅 2.27:1）","name":"au-color-success","value":"#2E7D0A"},{"comment":"警告色 · 5.87:1（原 #FAAD14 仅 1.90:1）","name":"au-color-warning","value":"#8C5A00"},{"comment":"错误色 · 5.57:1（原 #F5222D 仅 4.08:1）","name":"au-color-error","value":"#CF1322"},{"comment":"信息色 · 5.00:1（原 #1890FF 仅 3.24:1）","name":"au-color-info","value":"#096DD9"},{"comment":"弹窗遮罩","name":"au-color-mask","value":"rgba(0, 0, 0, 0.45)"},{"comment":"图片遮罩","name":"au-color-mask-strong","value":"rgba(0, 0, 0, 0.85)"},{"comment":"输入框聚焦外发光","name":"au-color-focus-ring","value":"rgba(47, 84, 235, 0.2)"},{"comment":"","name":"au-font-family","value":"\"PingFang SC\", \"Source Han Sans SC\", \"Source Han Sans\", \"Microsoft YaHei\", \"Inter\", \"DIN\", -apple-system, \"Segoe UI\", sans-serif"},{"comment":"","name":"au-font-family-cn","value":"\"PingFang SC\", \"Source Han Sans SC\", \"Source Han Sans\", \"Microsoft YaHei\", sans-serif"},{"comment":"","name":"au-font-family-num","value":"\"Inter\", \"DIN\", \"Segoe UI\", sans-serif"},{"comment":"","name":"au-type-display-size","value":"24px"},{"comment":"","name":"au-type-display-height","value":"32px"},{"comment":"Semibold：页面大标题","name":"au-type-display-weight","value":"600"},{"comment":"","name":"au-type-h1-size","value":"20px"},{"comment":"","name":"au-type-h1-height","value":"28px"},{"comment":"Semibold：卡片标题、弹窗标题","name":"au-type-h1-weight","value":"600"},{"comment":"","name":"au-type-h2-size","value":"16px"},{"comment":"","name":"au-type-h2-height","value":"24px"},{"comment":"Medium：区块标题","name":"au-type-h2-weight","value":"500"},{"comment":"","name":"au-type-body-size","value":"14px"},{"comment":"","name":"au-type-body-height","value":"22px"},{"comment":"Regular：正文、表格、表单","name":"au-type-body-weight","value":"400"},{"comment":"","name":"au-type-caption-size","value":"12px"},{"comment":"","name":"au-type-caption-height","value":"20px"},{"comment":"Regular：辅助说明、时间戳","name":"au-type-caption-weight","value":"400"},{"comment":"","name":"au-space-4","value":"4px"},{"comment":"","name":"au-space-8","value":"8px"},{"comment":"","name":"au-space-12","value":"12px"},{"comment":"","name":"au-space-16","value":"16px"},{"comment":"","name":"au-space-20","value":"20px"},{"comment":"","name":"au-space-24","value":"24px"},{"comment":"","name":"au-space-32","value":"32px"},{"comment":"","name":"au-space-40","value":"40px"},{"comment":"","name":"au-space-48","value":"48px"},{"comment":"","name":"au-space-64","value":"64px"},{"comment":"标签、徽章、复选框","name":"au-radius-small","value":"2px"},{"comment":"按钮、输入框、选择器","name":"au-radius-base","value":"4px"},{"comment":"表格、卡片内部元素、Popover、日期面板","name":"au-radius-medium","value":"6px"},{"comment":"卡片、弹窗、抽屉","name":"au-radius-large","value":"8px"},{"comment":"卡片默认","name":"au-shadow-low","value":"0 1px 4px rgba(0, 0, 0, 0.06)"},{"comment":"卡片悬停、下拉菜单、Popover","name":"au-shadow-medium","value":"0 4px 12px rgba(0, 0, 0, 0.08)"},{"comment":"弹窗、抽屉","name":"au-shadow-high","value":"0 8px 24px rgba(0, 0, 0, 0.12)"},{"comment":"","name":"au-duration-fast","value":"0.2s"},{"comment":"","name":"au-duration-base","value":"0.3s"},{"comment":"","name":"au-duration-slow","value":"0.4s"},{"comment":"","name":"au-ease-standard","value":"ease"},{"comment":"","name":"au-ease-out","value":"ease-out"},{"comment":"","name":"au-ease-in-out","value":"ease-in-out"},{"comment":"","name":"au-icon-size-16","value":"16px"},{"comment":"","name":"au-icon-size-20","value":"20px"},{"comment":"","name":"au-icon-size-24","value":"24px"},{"comment":"","name":"au-control-height-small","value":"24px"},{"comment":"","name":"au-control-height-default","value":"32px"},{"comment":"","name":"au-control-height-large","value":"40px"}],"changelog":[{"date":"2026-09-11","sections":[{"title":"Changed — 组件层全面令牌化（设计系统的根基修复）","items":["**发现**：79 个组件的 844 个颜色属性里，**只有 2 个（0.2%）引用令牌，788 个（93.4%）硬编码 hex**。后果是改令牌组件不跟着变、主题定制器对组件无效、For Agents 页写的「所有色值必须取自 au-* 变量」形同虚设。这是本项目第五次「声称≠实现」，且动摇了设计系统的根本。","**两层令牌化**（此前只改了从未被加载的文件，走了弯路）：","内嵌样式层是**决定性的**：演示页只 link `colors_and_type.css` + 自己的 CSS，而多数页面把关键样式写在 `<style>` 块里 —— 只改 CSS 文件不生效。","安全策略：只替换颜色属性值位置的 hex（`color` / `background*` / `border*` / `outline*` / `fill` / `stroke`）；跳过 `rgba()`/渐变/`url()` 复合值；不动 SVG 属性与 JS 数据（色板数组）；幂等可重复运行。","歧义色值按属性语义消解（`#FFFFFF` 作 `color` → `text-inverse`，作 `background` → `card-bg`）。"]},{"title":"Added — 补齐令牌语义","items":["`--au-color-text-tertiary` `#595959`（三级文字/描述，规范未定义、实现补齐，7.00:1）","`--au-color-text-disabled` `#BFBFBF`（禁用态文字，规范定义于组件1/2.txt；WCAG 1.4.3 对禁用控件豁免）","`--au-color-border-strong` `#F0F0F0`（实线边框，规范未定义、实现补齐）","令牌总数 71 → **74**；同步 legacy 别名映射（`--color-text-tertiary` 等）。","修复 `colors_and_type.css` 一处重复的注释起始行。"]},{"title":"Fixed","items":["**Countdown 首帧空白**：`setInterval(render, 1000)` 首次执行要等 1 秒，期间容器为空。改为定义 `renderCountdown()` 后立即执行一次，再挂 interval。浏览器实测确认修复。"]},{"title":"Verified — 令牌响应性（本轮核心验收）","items":["逐组件验证「改令牌 → 元素是否跟着变」，**79/79 全部响应**（改 `--au-color-brand` / `text-body` / `border` 等，采样前后样式签名对比）。","过程中修正了两处**测量方法缺陷**（初测 40/79 是误报）：① 选择器 `.demo *` 在无 `.demo` 容器的页面抓不到元素；② 探针令牌选错——Breadcrumb 用 `text-tertiary` 而我只改 `text-body`。","回归保持 **100%**（961 断言 / 0 失败 / 79 页全通过），三次连跑一致。"]}],"version":"1.4.0"},{"date":"2026-09-11","sections":[{"title":"Added — 中英双语（i18n）","items":["`site/i18n.js`：330 条文案字典，顶栏新增 `中 / EN` 切换器，偏好存 `localStorage['aa-lang']`，`<html lang>` 与 `document.title` 同步。","**设计取舍**：以「中文源串」作字典键而非抽象 key。中文是规范原文语言（组件1~10.txt）也是 app.js 现有字面量；源串作键意味着未收录文案自动回退原文，不会出现空白或 key 泄漏。","覆盖范围：导航 / 侧栏 / 首页 Hero 与设计原则 / 总览 / 快速开始 / 设计规范（含令牌导出区）/ For Agents 全表 / 更新日志 / 组件详情页（何时使用、API 三表、无障碍键盘表、Do&Don't、设计契约、实现资源、相关组件）/ Playground / 主题面板 / 搜索弹窗 / FAB 提示。","语言感知的显示逻辑："]},{"title":"Fixed — 回归时序（根治偶发）","items":["**DensitySwitcher 对比度偶发失败**：断言在演示页内联脚本执行完之前就跑了，读到 `is-active` 尚未应用的中间态（白字未落到品牌蓝底 → 2.51:1）。单页打开时通过、并发收集器里偶发失败。","根因是固定帧数等待（`load` + 双 `requestAnimationFrame`）在多个 iframe 抢主线程时不够稳。改为**就绪轮询**：`readyState === 'complete'` 且 DOM 连续 3 次采样（约 48ms）无变化才断言，另设约 4.8s 超时兜底避免卡死。","验证：**四次连跑全部 100%**（961 断言 / 0 失败 / 79 页全通过），偶发不再复现。"]},{"title":"Fixed — i18n 接入过程中的三个真实缺陷","items":["**TDZ 顺序**：`KIND_KEYS` 等模块级常量在 `I18N`/`T` 定义之前调用了 `T()`，抛 `Cannot read properties of undefined (reading 'T')`。已改为存中文源串、渲染时求值（模块级预先求值还会导致语言切换后不更新）。","**局部变量遮蔽**：`renderDesign` 内原有 `var T = data.tokens;` 遮蔽了全局翻译函数，导致设计规范页整个渲染失败。改名 `TOKENS`。","**模板拼接括号**：`el()` 调用在包装 `T()` 后少一个右括号，已修正。"]},{"title":"Changed","items":["回归基线：961 断言 / 925 通过 / **100%** / 79 页全通过 / N/A 36，四次连跑一致。"]}],"version":"1.3.3"},{"date":"2026-09-11","sections":[{"title":"Added — 契约第三批：全量契约化 79/79","items":["补齐剩余 **43 份**组件契约，`components/` 目录现为 79 份契约 JSON（此前 36）。","分两批提炼，全部逐字来自规格原文（组件1/2/5/6/7.txt）：","每份含 `variantDimensions` / `representativeVariants` / `anatomy` / `structurePatterns` / `usageHints` / `doNotInvent` / `unknowns` 七字段，与既有 36 份同 schema。","**硬规则**：只从规格提炼，不发明；规格未明示者进 `unknowns`，规格明确排除者进 `doNotInvent`。校验脚本确认 79/79 字段完整、slug 一致。"]},{"title":"Added — 令牌导出（文档清单中的 C4 项）","items":["`build-site.ps1` 构建期生成三种标准格式，与站点展示的令牌始终同源：","设计规范页新增「令牌导出」区，三个文件提供下载入口。"]},{"title":"Changed — 规格原文与实现对齐","items":["同步规格中的色彩系统到 v1.3.1 的 AA 达标值（15 处）：占位文字 / 次要文字 / 五种语义色，并在原值处标注变更原因与对比度实测。","修正一处既有漂移：Rate 选中星色规格为 `#FAAD14`（白底 1.90:1，不满足 WCAG 1.4.11 的 3:1），实现取 `#2F54EB`，规格已对齐实现并注明原因。"]},{"title":"Fixed","items":["`build-site.ps1` 令牌导出段的两处 PowerShell 问题：`$themes` / `$schema` 被当作变量展开导致 Null 键；`Write-Output` 字符串里的 `{}` 被当作格式占位符。"]}],"version":"1.3.2"},{"date":"2026-09-11","sections":[{"title":"Changed — 无障碍与令牌合规（9 项矩阵断言全部达标）","items":["**回归通过率 85.1% → 100%**（961 条断言 / 0 失败 / 36 条 N/A / 79 页全通过，三次连跑结果一致）。","**令牌层修正**（改一处、全局生效）：`--au-color-text-secondary` `#8C8C8C`→`#6E6E6E`（3.36:1→5.10:1）、`--au-color-text-placeholder` `#BFBFBF`→`#767676`（1.84:1→4.54:1）、`--au-color-success` `#52C41A`→`#2E7D0A`、`--au-color-warning` `#FAAD14`→`#8C5A00`、`--au-color-error` `#F5222D`→`#CF1322`、`--au-color-info` `#1890FF`→`#096DD9`。原值均为 Ant Design 的「填充色阶」，作文字/白字场景均不足 AA。","**5 端同步**：`frameworks/` 下 150+ 文件、300+ 处硬编码色值同步到达标值。禁用态（WCAG 明示豁免）保持原弱化表现不变。","**语义修正**：演示页补齐 `role` / `aria-*` / `tabindex` 共 400+ 处；修正首轮误注入（分隔符、图标等装饰元素不再带 role）；`TreeTable` 行补键盘操作（Enter/Space 触发行点击 + `aria-selected`）。","**动态元素**：`Rate` 星、`Cascader` 触发器、`SideMenu` 菜单项、`ThemeSwitcher` 色点等在 `className` 赋值后同步 `setAttribute`，静态改不到的交互元素也具备语义。","**断言判据精化**（修正过严/过宽，非放水）：","**`site/app.js` 修复**：`--color-card-bg` 令牌名笔误（正确为 `--color-bg-card`），该错误曾在品牌色按钮上导致深灰字压蓝底（2.59:1）。"]},{"title":"Known limitations","items":["36 条 N/A 来自「静态组件无交互面」与「单实例组件无多变体」，属合理豁免，非缺陷掩盖（已逐条人工核实）。","本通过率覆盖 9 项自动化矩阵断言，**不等同于完整的 WCAG 2.1 AA 合规认证**：屏幕阅读器实测、焦点顺序、动态内容播报仍需人工/AT 工具验证。"]}],"version":"1.3.1"},{"date":"2026-09-10","sections":[{"title":"Fixed — 验收链路（回归通过率此前不可信）","items":["**测试页快照为空壳**：`run-tests.ps1` 抽取 `frameworks/<组件>.html` 的 body 时删除了全部 `<script>`，而 79 个 H5 演示页的 DOM 全部由内联脚本渲染（body 只有 `<div id=\"app\"></div>`），且测试页从未引用 `frameworks/<组件>.css`。断言跑在空 DOM + 无组件样式上，v1.2.0 的 75.1% 属结构性误报，不是实现质量。","测试页改为 iframe 加载真实演示页（`tests/_template.html`），`tests/_runtime.js` 断言改为**跨帧在真实渲染结果上执行**：帧内 `getComputedStyle` / `styleSheets` / outerHTML 取值，用例节点自动标注并在帧内描边可视化，结果通过 `postMessage` 上报。","断言标注改为容器下钻（`.row` / `.demo-block` → 首个含 ≥2 有效子元素的容器，最多 6 层），修复 Countdown 等 body 直接挂载页面只标出 1 个用例的问题。","新增 N/A 语义：无交互面的静态组件（水印、指标卡、图表）键盘可达/ARIA 记 `skip` 而非失败；对比度与 token 检查限定在被测组件区，页头文档文字不再计入。","通过率分母改为 `pass / (pass + fail)`，N/A 不拉低数值；`tools/run-regression.mjs`（CI runner）与浏览器收集器同口径。"]},{"title":"Added — 设计系统","items":["基座键盘焦点环：`:focus-visible` 统一 2px 描边（`colors_and_type.css`）。`--au-color-focus-ring` 此前只被定义、从未被消费，79 个组件样式里仅 20 个自带 focus 规则——此改动一次性消除 66 页 `focus-visible-defined` 失败。","`tests/_collect.html`：零依赖浏览器批量回归收集器（并发 iframe + 汇总 + `window.__aaCollectResult`），替代此前\"用浏览器控制台手跑 79 页\"的临时做法。","`tests/_index_template.html`：测试总览页模板外置（原为 run-tests.ps1 内联 here-string），读数来自 `site/data.json`，并显示最近回归通过率。"]},{"title":"Added — 设计契约第二批（展示类 15 个）","items":["tree / collapse / calendar / carousel / imagepreview / qrcode / countdown / watermark / cardlist / treetable / timelinelist / steplist / chartpanel / dashboardcard / employeecard，逐份从规格原文（组件2/4/7/9.txt）提炼，含 variantDimensions / representativeVariants / anatomy / structurePatterns / usageHints / doNotInvent / unknowns。契约化覆盖 21 → **36/79**。"]},{"title":"Changed","items":["`run-tests.ps1` 重写：删除失效的快照抽取逻辑（其占位符替换早已不匹配模板），改为生成 iframe 版测试页；输出改 `WriteAllText` 无 BOM。脚本保持 ASCII-only（PS5.1 读无 BOM 文件按 ANSI），中文文案移入 UTF-8 模板。","回归基线更新：**960 条断言 / 通过率 85.1%（N/A 27）、11 页全通过**。剩余失败项即改进 backlog：状态覆盖 45、对比度 35、ARIA 33、键盘可达 15、硬编码 hex 9、变体 2。"]}],"version":"1.3.0"},{"date":"2026-09-10","sections":[{"title":"Added — 设计契约与工程化","items":["B1 契约第一批：15 个输入类组件补齐契约 JSON（autocomplete / cascader / transfer / rate / slider / segmented / radiocard / checkboxcard / switchgroup / numberrangeinput / codeinput / passwordinput / phoneinput / colorpicker / mention），契约化覆盖 6 → 21/79","C4 静态薄壳：`site/components/<slug>.html` × 79（每组件独立可爬 URL：title + meta description + canonical + 刷新跳转），`sitemap.xml`（80 URL，部署后回填 `$SiteUrlBase`）","C3 headless 回归：79 个测试页全量执行 812 条断言（当前通过率 75.1%，失败项即改进 backlog），产出 `tests/report.json`；CI runner `tools/run-regression.mjs`（Playwright，含 JUnit XML 输出）","首页 Hero 显示「测试通过率」（读取 tests/report.json，无报告时静默隐藏）","B3 Playground：组件详情页「▶ 在线试玩」——textarea 编辑 H5 源码，iframe srcdoc 防抖实时重渲染，支持复位 / 退出，不影响源文件","C1 交叉引用：组件详情页新增「相关组件」（相似 / 搭配维度映射 + 同分类兜底）","场景示范页：`site/scenario/user-management.html`（筛选表单 + 数据表格 + 分页 + 新建弹窗 + 消息反馈，视觉全部来自令牌与 components.css），首页 Hero 加入口","部署物料：根 `README.md`、Pages 入口 `index.html` 重定向、`.github/workflows/deploy-pages.yml`、`.gitignore`"]},{"title":"Fixed","items":["测试页断言协议落地：`tests/_runtime.js` 运行期自动标注快照节点 `data-assert`（多级结构启发式：.row → .demo → .demo-block → 首层；此前 79 页实际无断言节点，PLAN v1.1 声称与实现不符）","`site/data.js` / `site/data.json` 去除 UTF-8 BOM（PS5.1 `Set-Content` 默认带 BOM，严格 JSON 解析器如 node require 直接解析失败）","断言可见性判定放宽（`getClientRects` 兜底），减少隐藏变体误报"]}],"version":"1.2.0"},{"date":"2026-09-08","sections":[{"title":"Added — 竞品对齐改造（第一批，依据《竞品网站检查报告》与《现状问题分析与改造清单》）","items":["For Agents 页（`#/agents`）：AI / Agent 消费入口——机器可读资源清单、data.json 数据形状、消费示例、使用规则","`site/llms.txt`：LLM 入口清单，指向 data.json、契约 JSON、令牌文件与测试页","站内更新日志页（`#/changelog`）：`build-site.ps1` 解析本文件注入 `data.js`，站点展示与仓库同源","主题预设库：主题定制器内置 6 套品牌色预设（科技蓝 / 青碧 / 极夜紫 / 暖橙 / 绯红 / 松石绿），一键切换后仍可微调","组件详情页新增「API 源码提炼」徽章，区分契约化组件（6 核心）与源码提炼组件（69 扩展）"]},{"title":"Fixed — 文档与实现不符","items":["搜索增强补票：Ctrl+K 弹窗补齐分类 chip 过滤、命中关键词 `<mark>` 高亮、子序列模糊回退（PLAN v1.1 曾声称交付但代码缺失）；搜索结果行补写 `data-slug` 修复搜索日志点击目标为空的问题"]},{"title":"Changed","items":["暗色模式令牌映射补全：`html.aa-dark` 新增品牌色族 / 语义色 / focus-ring / 阴影映射，并修复「主题内联样式压过暗色类」的层级问题——暗色下品牌色自动向白色混合提亮一档，`aa-mode` 切换后即时重算","`build-site.ps1`：`meta.version` 不再硬编码，改为从 CHANGELOG.md 最新版本号自动同步"]}],"version":"1.1.1"},{"date":"2026-09-07","sections":[{"title":"Added — 文档体系补齐","items":["`PLAN.md`：完整组件文档体系规划与路线图，含 5 大模块、3 版本路线、验收标准","`CHANGELOG.md`：本文档","`CONTRIBUTING.md`：贡献指南（如何新增组件 / 修契约 / 加测试）","`TESTING.md`：测试矩阵、断言协议、回归流程","`tests/<slug>.html` × 79：每个组件独立测试页（HTML+CSS+原生 JS 零依赖）","`tests/index.html`：测试总览页（按类目聚合 + 通过率 + 失败项）","`run-tests.ps1`：批量构建测试目录脚本"]},{"title":"Added — 日志系统","items":["`site/logger.js`：构建 / 渲染 / 搜索 / 测试 四类事件，落 `localStorage[aa-render-log]` / `localStorage[aa-search-log]` / `localStorage[aa-test-log]`","控制台 `aaLogger.export()` 导出 JSON","测试页内置 `data-assert` + `data-status`，便于 Playwright / Selenium 回归"]},{"title":"Added — 搜索增强","items":["Ctrl+K 弹窗内新增分类 chips 过滤（general / navigation / input / display / feedback / system）","命中关键词 `<mark>` 高亮","模糊容错：去空格 + 子串匹配 + 大小写不敏感","搜索日志：query / 命中数 / 首个命中 slug / 耗时"]},{"title":"Added — 文档骨架","items":["顶栏工具新增「测试」「日志」入口（HAMBURGER 之后）","组件详情页新增「测试页」链接","首页 hero stats 加入「测试页 79」一项"]},{"title":"Changed","items":["`site/app.js` 改为引用 `site/logger.js`，原搜索行为保留","扩展组件契约新增「doNotInvent / unknowns」字段自动从 spec 文本提取"]},{"title":"Fixed","items":["主题定制器焦点环 rgba 计算 bug：hex 转 rgba 不再被截断为 6 位","类别切换时滚动条保持原位（避免视觉跳动）"]}],"version":"1.1.0"},{"date":"2026-09-06","sections":[{"title":"Added","items":["79 个组件实现（H5 / React / Vue 2 / Vue 3 四端）","设计令牌：`colors_and_type.css` / `css.json` / `components.css`","6 个核心组件契约 JSON","`components/index.json` 全量组件索引（spec 批次映射）","`site/` 文档站：首页 / 组件总览 / 快速开始 / 设计规范","Ctrl+K 全局搜索","主题定制器（4 键覆盖）","`build-site.ps1` 构建脚本"]},{"title":"Notes","items":["数据生成产物：`site/data.js`（自动生成，请勿手动编辑）","`Added`：新功能","`Changed`：现有功能变更","`Deprecated`：即将移除","`Removed`：已移除","`Fixed`：缺陷修复","`Security`：安全相关","主版本号：不兼容的 API 变更","次版本号：向后兼容的功能新增","修订号：向后兼容的问题修复"]}],"version":"1.0.0"}],"components":[{"slug":"button","name":"按钮 Button","tier":"core","confidence":"high","specBatch":1,"specFile":"组件1.txt","contractRef":"components/button.json","category":"general","specLines":["- 类型：主按钮、次按钮、文字按钮、链接按钮、危险按钮","- 尺寸：Large(40px高)、Default(32px高)、Small(24px高)","- 圆角：4px","- 主按钮：背景#2F54EB，文字白色，悬停#1D39C4","- 次按钮：白底边框#E8ECF1，文字#262626，悬停边框变蓝","- 文字按钮：无背景，文字#2F54EB，悬停浅蓝背景","- 危险按钮：背景#F5222D","- 禁用态：背景#F5F5F5，文字#BFBFBF","- 最小宽度64px"],"specSummary":"- 类型：主按钮、次按钮、文字按钮、链接按钮、危险按钮","contract":{"variants":["主按钮","次按钮","文字按钮","链接按钮","危险按钮","大尺寸主按钮","小尺寸主按钮","禁用态"],"dims":[{"name":"type","values":["primary","default","text","link","danger"]},{"name":"size","values":["large","default","small"]},{"name":"state","values":["default","hover","active","focus","disabled","loading"]}],"unknowns":["加载态具体样式细节"],"anatomy":{"container":"按钮容器，圆角4px，最小宽度64px","label":"按钮文字，字号14px","icon":"可选图标，与文字间距4px"},"doNot":["图标按钮尺寸规范","按钮组规范"],"usage":["主按钮：背景 var(--color-brand)，文字白色，悬停 var(--color-brand-hover)","次按钮：白底边框 var(--color-border)，文字 var(--color-text-body)，悬停边框变蓝","文字按钮：无背景，文字 var(--color-brand)，悬停浅蓝背景 var(--color-brand-bg)","危险按钮：背景 var(--color-error)","禁用态：背景 var(--color-bg-disabled)，文字 var(--color-text-placeholder)"],"structure":{"height":"@{large=40px; default=32px; small=24px}","radius":"var(--radius-base)","padding":"左右12px（默认尺寸）"}},"files":{"html":"../frameworks/button.html","css":"../frameworks/Button.css","jsx":"../frameworks/Button.jsx","vue2":"../frameworks/Button.vue2.vue","vue3":"../frameworks/Button.vue3.vue"},"sizes":{"html":5668,"css":2138,"jsx":1586,"vue2":3232,"vue3":3122},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Aurora Admin · Button (H5)</title>\n<!-- 复用设计系统 token，保证与组件库一致 -->\n<link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\">\n<style>\n  /* 以下按钮样式对齐 components.css 与 button.json 契约 */\n  .btn {\n    display: inline-flex; align-items: center; justify-content: center;\n    gap: var(--space-4); border: 1px solid transparent; cursor: pointer;\n    white-space: nowrap; font-size: var(--font-size-body); line-height: var(--line-height-body);\n    border-radius: var(--radius-base); min-width: 64px; padding: 0 var(--space-12);\n    flex-shrink: 0; transition: background .15s, border-color .15s;\n    font-family: var(--font-family); box-sizing: border-box;\n  }\n  .btn:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }\n  .btn-primary { background: var(--color-brand); color: var(--color-text-inverse); }\n  .btn-primary:hover { background: var(--color-brand-hover); }\n  .btn-primary:active { background: var(--color-brand-active); }\n  .btn-default { background: var(--color-bg-card); border-color: var(--color-border); color: var(--color-text-body); }\n  .btn-default:hover { border-color: var(--color-brand); }\n  .btn-text { background: transparent; color: var(--color-brand); }\n  .btn-text:hover { background: var(--color-brand-bg); }\n  .btn-link { background: transparent; border: none; color: var(--color-brand); min-width: auto; padding: 0; }\n  .btn-link:hover { background: var(--color-brand-bg); }\n  .btn-danger { background: var(--color-error); color: var(--color-text-inverse); }\n  .btn-danger:hover { filter: brightness(.92); }\n  .btn-lg { height: var(--control-height-large); }\n  .btn-md { height: var(--control-height-default); }\n  .btn-sm { height: var(--control-height-small); }\n  .btn-disabled, .btn:disabled {\n    background: var(--color-bg-disabled); border-color: transparent;\n    color: var(--color-text-placeholder); cursor: not-allowed;\n  }\n  .btn-disabled:hover, .btn:disabled:hover { background: var(--color-bg-disabled); filter: none; }\n\n  /* 加载态：旋转 spinner + 文字 */\n  .btn.is-loading { cursor: progress; position: relative; }\n  .btn.is-loading .btn-label { opacity: .65; }\n  .btn .spinner {\n    width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent;\n    border-radius: 50%; animation: btn-spin .6s linear infinite; display: inline-block;\n  }\n  @keyframes btn-spin { to { transform: rotate(360deg); } }\n\n  /* 演示页布局 */\n  body { margin: 0; padding: 24px; background: var(--color-bg-page); color: var(--color-text-body);\n    font-family: var(--font-family); }\n  h1 { font-size: var(--font-size-h1); margin: 0 0 4px; }\n  .sub { color: var(--color-text-secondary); margin: 0 0 24px; font-size: var(--font-size-caption); }\n  .group { margin-bottom: 24px; }\n  .group h2 { font-size: var(--font-size-h2); margin: 0 0 12px; color: var(--color-text-title); }\n  .row { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: center; }\n  .tag { font-size: var(--font-size-caption); color: var(--color-text-secondary); width: 72px; flex-shrink: 0; }\n</style>\n</head>\n<body>\n  <h1>Aurora Admin · Button 组件（纯 H5）</h1>\n  <p class=\"sub\">对齐 button.json 契约：5 类型 × 3 尺寸，含禁用 / 加载 / 图标场景</p>\n\n  <div class=\"group\">\n    <h2>1. 类型（默认尺寸）</h2>\n    <div class=\"row\">\n      <button class=\"btn btn-primary btn-md\">主按钮</button>\n      <button class=\"btn btn-default btn-md\">次按钮</button>\n      <button class=\"btn btn-text btn-md\">文字按钮</button>\n      <button class=\"btn btn-link btn-md\">链接按钮</button>\n      <button class=\"btn btn-danger btn-md\">危险按钮</button>\n    </div>\n  </div>\n\n  <div class=\"group\">\n    <h2>2. 尺寸（主按钮）</h2>\n    <div class=\"row\">\n      <button class=\"btn btn-primary btn-lg\">大尺寸</button>\n      <button class=\"btn btn-primary btn-md\">默认尺寸</button>\n      <button class=\"btn btn-primary btn-sm\">小尺寸</button>\n    </div>\n  </div>\n\n  <div class=\"group\">\n    <h2>3. 禁用态</h2>\n    <div class=\"row\">\n      <button class=\"btn btn-primary btn-md btn-disabled\" disabled>主按钮</button>\n      <button class=\"btn btn-default btn-md btn-disabled\" disabled>次按钮</button>\n      <button class=\"btn btn-danger btn-md btn-disabled\" disabled>危险按钮</button>\n    </div>\n  </div>\n\n  <div class=\"group\">\n    <h2>4. 加载态</h2>\n    <div class=\"row\">\n      <button class=\"btn btn-primary btn-md is-loading\"><span class=\"spinner\"></span><span class=\"btn-label\">提交中</span></button>\n      <button class=\"btn btn-default btn-md is-loading\"><span class=\"spinner\"></span><span class=\"btn-label\">加载中</span></button>\n    </div>\n  </div>\n\n  <div class=\"group\">\n    <h2>5. 带图标（内联 SVG 占位）</h2>\n    <div class=\"row\">\n      <button class=\"btn btn-primary btn-md\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 5v14M5 12h14\"/></svg>新建</button>\n      <button class=\"btn btn-default btn-md\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3\"/></svg>导出</button>\n      <button class=\"btn btn-danger btn-md\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6\"/></svg>删除</button>\n    </div>\n  </div>\n</body>\n</html>\n","css":"/* Aurora Admin Button 样式 — 对齐 components.css 与 button.json 契约 */\n.btn {\n  display: inline-flex; align-items: center; justify-content: center;\n  gap: 4px; border: 1px solid transparent; cursor: pointer;\n  white-space: nowrap; font-size: 14px; line-height: 22px;\n  border-radius: 4px; min-width: 64px; padding: 0 12px;\n  box-sizing: border-box; transition: background .15s, border-color .15s;\n  font-family: \"PingFang SC\", \"Source Han Sans SC\", \"Microsoft YaHei\", sans-serif;\n}\n.btn:focus-visible { outline: 2px solid rgba(47,84,235,0.2); outline-offset: 2px; }\n\n.btn-primary { background: var(--au-color-brand); color: var(--au-color-text-inverse); }\n.btn-primary:hover { background: var(--au-color-brand-hover); }\n.btn-primary:active { background: var(--au-color-brand-active); }\n\n.btn-default { background: var(--au-color-card-bg); border-color: var(--au-color-border); color: var(--au-color-text-body); }\n.btn-default:hover { border-color: var(--au-color-brand); }\n\n.btn-text { background: transparent; color: var(--au-color-brand); }\n.btn-text:hover { background: var(--au-color-brand-bg); }\n\n.btn-link { background: transparent; border: none; color: var(--au-color-brand); min-width: auto; padding: 0; }\n.btn-link:hover { background: var(--au-color-brand-bg); }\n\n.btn-danger { background: var(--au-color-error); color: var(--au-color-text-inverse); }\n.btn-danger:hover { filter: brightness(.92); }\n\n.btn-lg { height: 40px; }\n.btn-md { height: 32px; }\n.btn-sm { height: 24px; }\n\n.btn-disabled, .btn:disabled {\n  background: var(--au-color-disabled-bg); border-color: transparent; color: var(--au-color-text-disabled); cursor: not-allowed;\n}\n.btn-disabled:hover, .btn:disabled:hover { background: var(--au-color-disabled-bg); filter: none; }\n\n.btn .btn-icon { flex-shrink: 0; }\n\n.btn.is-loading { cursor: progress; position: relative; }\n.btn.is-loading .btn-label { opacity: .65; }\n.btn .spinner {\n  width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent;\n  border-radius: 50%; animation: aa-btn-spin .6s linear infinite;\n}\n@keyframes aa-btn-spin { to { transform: rotate(360deg); } }\n","jsx":"import React from 'react';\nimport './Button.css';\n\n/**\n * Aurora Admin Button（React）\n * 对齐 button.json 契约：\n *  - type: primary | default | text | link | danger\n *  - size: large | default | small\n *  - disabled / loading / icon / children\n */\nconst sizeMap = { large: 'btn-lg', default: 'btn-md', small: 'btn-sm' };\n\nexport default function Button({\n  type = 'default',\n  size = 'default',\n  disabled = false,\n  loading = false,\n  icon = '',\n  text = '',\n  className = '',\n  children,\n  onClick,\n  ...rest\n}) {\n  const isDisabled = disabled || loading;\n\n  const classes = [\n    'btn',\n    `btn-${type}`,\n    sizeMap[size],\n    isDisabled && !loading ? 'btn-disabled' : '',\n    loading ? 'is-loading' : '',\n    className\n  ].filter(Boolean).join(' ');\n\n  const handleClick = (e) => {\n    if (isDisabled) return;\n    onClick && onClick(e);\n  };\n\n  return (\n    <button className={classes} disabled={isDisabled} onClick={handleClick} {...rest}>\n      {loading && <span className=\"spinner\" aria-hidden=\"true\" />}\n      {!loading && icon && (\n        <svg\n          className=\"btn-icon\"\n          width=\"16\" height=\"16\"\n          viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"\n        >\n          <path d={icon} />\n        </svg>\n      )}\n      <span className=\"btn-label\">{children || text}</span>\n    </button>\n  );\n}\n\n/*\n用法示例：\nimport Button from './Button';\n\n<Button type=\"primary\" size=\"large\" onClick={save}>保存</Button>\n<Button type=\"danger\" loading>删除中</Button>\n<Button type=\"default\" icon=\"M12 5v14M5 12h14\">新建</Button>\n*/\n","vue2":"<template>\n  <button\n    :class=\"classes\"\n    :disabled=\"disabled || loading\"\n    @click=\"onClick\"\n  >\n    <span v-if=\"loading\" class=\"spinner\" aria-hidden=\"true\"></span>\n    <svg\n      v-if=\"icon && !loading\"\n      class=\"btn-icon\"\n      width=\"16\" height=\"16\"\n      viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n    >\n      <path :d=\"icon\" />\n    </svg>\n    <span class=\"btn-label\"><slot>{{ text }}</slot></span>\n  </button>\n</template>\n\n<script>\nexport default {\n  name: 'AaButton',\n  props: {\n    type: { type: String, default: 'default', validator: v => ['primary', 'default', 'text', 'link', 'danger'].includes(v) },\n    size: { type: String, default: 'default', validator: v => ['large', 'default', 'small'].includes(v) },\n    disabled: { type: Boolean, default: false },\n    loading: { type: Boolean, default: false },\n    icon: { type: String, default: '' },   // svg path d，例如 \"M12 5v14M5 12h14\"\n    text: { type: String, default: '' }\n  },\n  computed: {\n    classes() {\n      const sizeMap = { large: 'btn-lg', default: 'btn-md', small: 'btn-sm' };\n      return [\n        'btn',\n        `btn-${this.type}`,\n        sizeMap[this.size],\n        { 'btn-disabled': this.disabled && !this.loading, 'is-loading': this.loading }\n      ];\n    }\n  },\n  methods: {\n    onClick(e) {\n      if (this.disabled || this.loading) return;\n      this.$emit('click', e);\n    }\n  }\n};\n</script>\n\n<!-- 样式对齐 components.css 与 button.json 契约 -->\n<style>\n.btn {\n  display: inline-flex; align-items: center; justify-content: center;\n  gap: 4px; border: 1px solid transparent; cursor: pointer;\n  white-space: nowrap; font-size: 14px; line-height: 22px;\n  border-radius: 4px; min-width: 64px; padding: 0 12px;\n  box-sizing: border-box; transition: background .15s, border-color .15s;\n  font-family: \"PingFang SC\", \"Source Han Sans SC\", \"Microsoft YaHei\", sans-serif;\n}\n.btn:focus-visible { outline: 2px solid rgba(47,84,235,0.2); outline-offset: 2px; }\n.btn-primary { background: #2F54EB; color: #fff; }\n.btn-primary:hover { background: #1D39C4; }\n.btn-primary:active { background: #10239E; }\n.btn-default { background: #fff; border-color: #E8ECF1; color: #262626; }\n.btn-default:hover { border-color: #2F54EB; }\n.btn-text { background: transparent; color: #2F54EB; }\n.btn-text:hover { background: #F0F5FF; }\n.btn-link { background: transparent; border: none; color: #2F54EB; min-width: auto; padding: 0; }\n.btn-link:hover { background: #F0F5FF; }\n.btn-danger { background: #CF1322; color: #fff; }\n.btn-danger:hover { filter: brightness(.92); }\n.btn-lg { height: 40px; }\n.btn-md { height: 32px; }\n.btn-sm { height: 24px; }\n.btn-disabled, .btn:disabled { background: #F5F5F5; border-color: transparent; color: #BFBFBF; cursor: not-allowed; }\n.btn-disabled:hover, .btn:disabled:hover { background: #F5F5F5; filter: none; }\n.btn .btn-icon { flex-shrink: 0; }\n.btn.is-loading { cursor: progress; position: relative; }\n.btn.is-loading .btn-label { opacity: .65; }\n.btn .spinner {\n  width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent;\n  border-radius: 50%; animation: aa-btn-spin .6s linear infinite;\n}\n@keyframes aa-btn-spin { to { transform: rotate(360deg); } }\n</style>\n","vue3":"<template>\n  <button\n    :class=\"classes\"\n    :disabled=\"disabled || loading\"\n    @click=\"onClick\"\n  >\n    <span v-if=\"loading\" class=\"spinner\" aria-hidden=\"true\"></span>\n    <svg\n      v-else-if=\"icon\"\n      class=\"btn-icon\"\n      width=\"16\" height=\"16\"\n      viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n    >\n      <path :d=\"icon\" />\n    </svg>\n    <span class=\"btn-label\"><slot>{{ text }}</slot></span>\n  </button>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\n\nconst props = defineProps({\n  type: { type: String, default: 'default' },   // primary | default | text | link | danger\n  size: { type: String, default: 'default' },   // large | default | small\n  disabled: { type: Boolean, default: false },\n  loading: { type: Boolean, default: false },\n  icon: { type: String, default: '' },          // svg path d\n  text: { type: String, default: '' }\n});\n\nconst emit = defineEmits(['click']);\n\nconst sizeMap = { large: 'btn-lg', default: 'btn-md', small: 'btn-sm' };\n\nconst classes = computed(() => [\n  'btn',\n  `btn-${props.type}`,\n  sizeMap[props.size],\n  {\n    'btn-disabled': props.disabled && !props.loading,\n    'is-loading': props.loading\n  }\n]);\n\nfunction onClick(e) {\n  if (props.disabled || props.loading) return;\n  emit('click', e);\n}\n</script>\n\n<!-- 样式对齐 components.css 与 button.json 契约 -->\n<style scoped>\n.btn {\n  display: inline-flex; align-items: center; justify-content: center;\n  gap: 4px; border: 1px solid transparent; cursor: pointer;\n  white-space: nowrap; font-size: 14px; line-height: 22px;\n  border-radius: 4px; min-width: 64px; padding: 0 12px;\n  box-sizing: border-box; transition: background .15s, border-color .15s;\n  font-family: \"PingFang SC\", \"Source Han Sans SC\", \"Microsoft YaHei\", sans-serif;\n}\n.btn:focus-visible { outline: 2px solid rgba(47,84,235,0.2); outline-offset: 2px; }\n.btn-primary { background: #2F54EB; color: #fff; }\n.btn-primary:hover { background: #1D39C4; }\n.btn-primary:active { background: #10239E; }\n.btn-default { background: #fff; border-color: #E8ECF1; color: #262626; }\n.btn-default:hover { border-color: #2F54EB; }\n.btn-text { background: transparent; color: #2F54EB; }\n.btn-text:hover { background: #F0F5FF; }\n.btn-link { background: transparent; border: none; color: #2F54EB; min-width: auto; padding: 0; }\n.btn-link:hover { background: #F0F5FF; }\n.btn-danger { background: #CF1322; color: #fff; }\n.btn-danger:hover { filter: brightness(.92); }\n.btn-lg { height: 40px; }\n.btn-md { height: 32px; }\n.btn-sm { height: 24px; }\n.btn-disabled, .btn:disabled { background: #F5F5F5; border-color: transparent; color: #BFBFBF; cursor: not-allowed; }\n.btn-disabled:hover, .btn:disabled:hover { background: #F5F5F5; filter: none; }\n.btn .btn-icon { flex-shrink: 0; }\n.btn.is-loading { cursor: progress; position: relative; }\n.btn.is-loading .btn-label { opacity: .65; }\n.btn .spinner {\n  width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent;\n  border-radius: 50%; animation: aa-btn-spin .6s linear infinite;\n}\n@keyframes aa-btn-spin { to { transform: rotate(360deg); } }\n</style>\n"}},{"slug":"input","name":"输入框 Input","tier":"core","confidence":"high","specBatch":1,"specFile":"组件1.txt","contractRef":"components/input.json","category":"input","specLines":["- 尺寸：Default(32px高)、Large(40px高)、Small(24px高)","- 圆角4px，边框1px solid #E8ECF1，内边距左右12px","- 聚焦：边框#2F54EB，外发光0 0 0 2px rgba(47,84,235,0.2)","- 错误：边框#F5222D，下方红色12px错误提示","- 支持前后缀、清除按钮、数字输入、密码切换"],"specSummary":"- 尺寸：Default(32px高)、Large(40px高)、Small(24px高)","contract":{"variants":["默认输入框","聚焦态","错误态","大尺寸","小尺寸","前后缀","密码切换"],"dims":[{"name":"size","values":["default","large","small"]},{"name":"state","values":["default","focus","error","disabled"]},{"name":"feature","values":["prefix","suffix","clearable","number","password"]}],"unknowns":["textarea 多行输入规范"],"anatomy":{"container":"输入框容器，圆角4px，边框1px solid var(--color-border)，内边距左右12px","input":"文本输入区域，字号14px","prefix":"可选前缀元素","suffix":"可选后缀元素（清除按钮、密码切换等）","errorText":"错误提示文字，字号12px，位于输入框下方4px"},"doNot":["输入框宽度规范"],"usage":["聚焦：边框 var(--color-brand)，外发光 0 0 0 2px rgba(47,84,235,0.2)","错误：边框 var(--color-error)，下方红色12px错误提示","支持前后缀、清除按钮、数字输入、密码切换"],"structure":{"height":"@{default=32px; large=40px; small=24px}","radius":"var(--radius-base)","border":"1px solid var(--color-border)"}},"files":{"html":"../frameworks/input.html","css":"../frameworks/Input.css","jsx":"../frameworks/Input.jsx","vue2":"../frameworks/Input.vue2.vue","vue3":"../frameworks/Input.vue3.vue"},"sizes":{"html":6019,"css":1817,"jsx":3920,"vue2":4594,"vue3":4619},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Aurora Admin · Input (H5)</title>\n<link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\">\n<style>\n  /* 对齐 components.css 与 input.json 契约 */\n  .field { display: inline-flex; flex-direction: column; gap: 4px; flex-shrink: 0; }\n  .au-input {\n    display: inline-flex; align-items: center; gap: 8px; height: 32px;\n    padding: 0 12px; background: var(--au-color-card-bg); border: 1px solid var(--au-color-border);\n    border-radius: 4px; transition: border-color .15s, box-shadow .15s; box-sizing: border-box;\n  }\n  .au-input input {\n    border: none; outline: none; background: transparent; font-size: 14px;\n    color: var(--au-color-text-body); min-width: 160px; flex: 1; font-family: var(--font-family);\n  }\n  .au-input input::placeholder { color: var(--au-color-text-placeholder); }\n  .au-input:focus-within { border-color: var(--au-color-brand); box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }\n  .au-input.is-error { border-color: var(--au-color-error); }\n  .au-input.is-error:focus-within { border-color: var(--au-color-error); box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }\n  .au-input.is-disabled, .au-input:disabled { background: var(--au-color-disabled-bg); border-color: transparent; }\n  .au-input.is-disabled input, .au-input:disabled input { color: var(--au-color-text-disabled); cursor: not-allowed; }\n  .au-input .affix { display: inline-flex; flex-shrink: 0; color: var(--au-color-text-secondary); align-items: center; }\n  .au-input .action {\n    display: inline-flex; flex-shrink: 0; padding: 0; border: none; background: none;\n    cursor: pointer; color: var(--au-color-text-secondary); align-items: center;\n  }\n  .au-input .action:hover { color: var(--au-color-brand); }\n  .au-input-lg { height: 40px; }\n  .au-input-sm { height: 24px; }\n  .au-input-sm input { font-size: 12px; min-width: 120px; }\n  .error-text { font-size: 12px; color: var(--au-color-error); line-height: 20px; }\n\n  /* 演示页布局 */\n  body { margin: 0; padding: 24px; background: var(--au-color-page-bg); color: var(--au-color-text-body); font-family: var(--font-family); }\n  h1 { font-size: 20px; margin: 0 0 4px; }\n  .sub { color: var(--au-color-text-secondary); margin: 0 0 24px; font-size: 12px; }\n  .group { margin-bottom: 24px; }\n  .group h2 { font-size: 16px; margin: 0 0 12px; color: var(--au-color-text-title); }\n  .row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }\n</style>\n</head>\n<body>\n  <h1>Aurora Admin · Input 组件（纯 H5）</h1>\n  <p class=\"sub\">对齐 input.json 契约：3 尺寸、聚焦/错误/禁用态，前后缀 / 清除 / 密码切换</p>\n\n  <div class=\"group\">\n    <h2>1. 默认输入框</h2>\n    <div class=\"row\">\n      <div class=\"field\"><div class=\"au-input\"><input placeholder=\"请输入客户名称\"></div></div>\n    </div>\n  </div>\n\n  <div class=\"group\">\n    <h2>2. 三种尺寸</h2>\n    <div class=\"row\">\n      <div class=\"field\"><div class=\"au-input au-input-lg\"><input placeholder=\"大尺寸\"></div></div>\n      <div class=\"field\"><div class=\"au-input au-input-md\"><input placeholder=\"默认尺寸\"></div></div>\n      <div class=\"field\"><div class=\"au-input au-input-sm\"><input placeholder=\"小尺寸\"></div></div>\n    </div>\n  </div>\n\n  <div class=\"group\">\n    <h2>3. 错误态（含错误提示）</h2>\n    <div class=\"row\">\n      <div class=\"field\">\n        <div class=\"au-input is-error\"><input value=\"abc\"></div>\n        <span class=\"error-text\">联系电话格式不正确，请检查后重试</span>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"group\">\n    <h2>4. 前后缀</h2>\n    <div class=\"row\">\n      <div class=\"field\">\n        <div class=\"au-input\">\n          <span class=\"affix\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"7\"/><path d=\"M21 21l-4-4\"/></svg></span>\n          <input placeholder=\"搜索订单编号 / 客户名称\">\n        </div>\n      </div>\n      <div class=\"field\">\n        <div class=\"au-input\">\n          <input value=\"aurora\">\n          <span class=\"affix\">.com</span>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"group\">\n    <h2>5. 清除按钮（clearable）</h2>\n    <div class=\"row\">\n      <div class=\"field\">\n        <div class=\"au-input\" data-clearable>\n          <input value=\"可清除文本\">\n          <button class=\"action\" data-act=\"clear\" aria-label=\"清除\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg></button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"group\">\n    <h2>6. 密码切换</h2>\n    <div class=\"row\">\n      <div class=\"field\">\n        <div class=\"au-input\" data-password>\n          <input type=\"password\" value=\"secret123\" data-pw>\n          <button class=\"action\" data-act=\"toggle-pw\" aria-label=\"显示密码\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/></svg></button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"group\">\n    <h2>7. 禁用态</h2>\n    <div class=\"row\">\n      <div class=\"field\"><div class=\"au-input is-disabled\"><input value=\"不可编辑\" disabled></div></div>\n    </div>\n  </div>\n\n  <script>\n    // 清除按钮\n    document.querySelectorAll('[data-act=\"clear\"]').forEach(btn => {\n      btn.addEventListener('click', () => { btn.closest('.au-input').querySelector('input').value = ''; });\n    });\n    // 密码显隐切换\n    document.querySelectorAll('[data-act=\"toggle-pw\"]').forEach(btn => {\n      btn.addEventListener('click', () => {\n        const inp = btn.closest('.au-input').querySelector('[data-pw]');\n        inp.type = inp.type === 'password' ? 'text' : 'password';\n      });\n    });\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin Input 样式 — 对齐 components.css 与 input.json 契约 */\n.au-field { display: inline-flex; flex-direction: column; gap: 4px; }\n\n.au-input {\n  display: inline-flex; align-items: center; gap: 8px; height: 32px;\n  padding: 0 12px; background: var(--au-color-card-bg); border: 1px solid var(--au-color-border);\n  border-radius: 4px; transition: border-color .15s, box-shadow .15s; box-sizing: border-box;\n}\n.au-input input {\n  border: none; outline: none; background: transparent; font-size: 14px;\n  color: var(--au-color-text-body); min-width: 160px; flex: 1;\n  font-family: \"PingFang SC\", \"Source Han Sans SC\", \"Microsoft YaHei\", sans-serif;\n}\n.au-input input::placeholder { color: var(--au-color-text-placeholder); }\n.au-input:focus-within { border-color: var(--au-color-brand); box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }\n.au-input.is-error { border-color: var(--au-color-error); }\n.au-input.is-error:focus-within { border-color: var(--au-color-error); box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }\n.au-input.is-disabled, .au-input:disabled { background: var(--au-color-disabled-bg); border-color: transparent; }\n.au-input.is-disabled input, .au-input:disabled input { color: var(--au-color-text-disabled); cursor: not-allowed; }\n.au-input .affix { display: inline-flex; flex-shrink: 0; color: var(--au-color-text-secondary); align-items: center; }\n.au-input .action {\n  display: inline-flex; flex-shrink: 0; padding: 0; border: none; background: none;\n  cursor: pointer; color: var(--au-color-text-secondary); align-items: center;\n}\n.au-input .action:hover { color: var(--au-color-brand); }\n.au-input-lg { height: 40px; }\n.au-input-sm { height: 24px; }\n.au-input-sm input { font-size: 12px; min-width: 120px; }\n.error-text { font-size: 12px; color: var(--au-color-error); line-height: 20px; }\n","jsx":"import React, { useState, useRef } from 'react';\nimport './Input.css';\n\n/**\n * Aurora Admin Input（React）\n * 对齐 input.json 契约：\n *  - size:    large | default | small\n *  - state:   default | focus | error | disabled\n *  - feature: prefix | suffix | clearable | number | password\n * 受控用法：<Input value={v} onChange={setV} />\n * 非受控用法：<Input defaultValue=\"...\" />\n */\nconst sizeMap = { large: 'au-input-lg', default: 'au-input-md', small: 'au-input-sm' };\n\nconst EyeIcon = () => (\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n    <path d=\"M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z\" />\n    <circle cx=\"12\" cy=\"12\" r=\"3\" />\n  </svg>\n);\nconst EyeOffIcon = () => (\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n    <path d=\"M17.94 17.94A10 10 0 0 1 12 19c-6.5 0-10-7-10-7a18 18 0 0 1 5.06-5.94M9.9 4.24A9 9 0 0 1 12 4c6.5 0 10 7 10 7a18 18 0 0 1-2.16 3.19M1 1l22 22\" />\n  </svg>\n);\nconst CloseIcon = () => (\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n    <path d=\"M18 6L6 18M6 6l12 12\" />\n  </svg>\n);\n\nexport default function Input({\n  value,\n  defaultValue = '',\n  size = 'default',\n  type = 'text',\n  placeholder = '',\n  disabled = false,\n  error = false,\n  errorText = '',\n  clearable = false,\n  className = '',\n  prefix,\n  suffix,\n  onChange,\n  onFocus,\n  onBlur,\n  ...rest\n}) {\n  const isControlled = value !== undefined;\n  const [inner, setInner] = useState(defaultValue);\n  const [showPassword, setShowPassword] = useState(false);\n  const inputRef = useRef(null);\n\n  const current = isControlled ? value : inner;\n\n  const handleInput = (e) => {\n    const next = e.target.value;\n    if (!isControlled) setInner(next);\n    onChange && onChange(next, e);\n  };\n\n  const handleClear = () => {\n    if (!isControlled) setInner('');\n    onChange && onChange('');\n    requestAnimationFrame(() => inputRef.current && inputRef.current.focus());\n  };\n\n  const resolvedType = type === 'password' ? (showPassword ? 'text' : 'password') : type;\n\n  const classes = [\n    'au-input',\n    sizeMap[size],\n    error ? 'is-error' : '',\n    disabled ? 'is-disabled' : '',\n    className\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div className={`au-field${error ? ' has-error' : ''}`}>\n      <div className={classes}>\n        {prefix && <span className=\"affix prefix\">{prefix}</span>}\n\n        <input\n          ref={inputRef}\n          type={resolvedType}\n          value={current}\n          placeholder={placeholder}\n          disabled={disabled}\n          onChange={handleInput}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          {...rest}\n        />\n\n        {clearable && current && !disabled && (\n          <button className=\"action clear\" type=\"button\" aria-label=\"清除\" onClick={handleClear}>\n            <CloseIcon />\n          </button>\n        )}\n\n        {type === 'password' && (\n          <button\n            className=\"action toggle\"\n            type=\"button\"\n            aria-label={showPassword ? '隐藏密码' : '显示密码'}\n            onClick={() => setShowPassword((v) => !v)}\n          >\n            {showPassword ? <EyeOffIcon /> : <EyeIcon />}\n          </button>\n        )}\n\n        {suffix && <span className=\"affix suffix\">{suffix}</span>}\n      </div>\n\n      {error && errorText && <span className=\"error-text\">{errorText}</span>}\n    </div>\n  );\n}\n\n/*\n用法示例：\nimport Input from './Input';\n\n<Input placeholder=\"请输入客户名称\" />\n<Input size=\"large\" placeholder=\"大尺寸\" />\n<Input error errorText=\"联系电话格式不正确\" defaultValue=\"abc\" />\n<Input clearable defaultValue=\"可清除文本\" />\n<Input type=\"password\" defaultValue=\"secret123\" />\n<Input prefix={<SearchIcon />} placeholder=\"搜索订单编号\" />\n<Input value={name} onChange={setName} />\n*/\n","vue2":"<template>\n  <div class=\"au-field\" :class=\"{ 'has-error': error }\">\n    <div class=\"au-input\" :class=\"classes\">\n      <span v-if=\"$slots.prefix\" class=\"affix prefix\"><slot name=\"prefix\" /></span>\n\n      <input\n        ref=\"input\"\n        :type=\"resolvedType\"\n        :value=\"value\"\n        :placeholder=\"placeholder\"\n        :disabled=\"disabled\"\n        @input=\"onInput\"\n        @focus=\"$emit('focus', $event)\"\n        @blur=\"$emit('blur', $event)\"\n      >\n\n      <button\n        v-if=\"clearable && value && !disabled\"\n        class=\"action clear\"\n        type=\"button\"\n        aria-label=\"清除\"\n        @click=\"clear\"\n      >\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n          <path d=\"M18 6L6 18M6 6l12 12\" />\n        </svg>\n      </button>\n\n      <button\n        v-if=\"type === 'password'\"\n        class=\"action toggle\"\n        type=\"button\"\n        :aria-label=\"showPassword ? '隐藏密码' : '显示密码'\"\n        @click=\"showPassword = !showPassword\"\n      >\n        <svg v-if=\"!showPassword\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n          <path d=\"M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z\" />\n          <circle cx=\"12\" cy=\"12\" r=\"3\" />\n        </svg>\n        <svg v-else width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n          <path d=\"M17.94 17.94A10 10 0 0 1 12 19c-6.5 0-10-7-10-7a18 18 0 0 1 5.06-5.94M9.9 4.24A9 9 0 0 1 12 4c6.5 0 10 7 10 7a18 18 0 0 1-2.16 3.19M1 1l22 22\" />\n        </svg>\n      </button>\n\n      <span v-if=\"$slots.suffix\" class=\"affix suffix\"><slot name=\"suffix\" /></span>\n    </div>\n\n    <span v-if=\"error && errorText\" class=\"error-text\">{{ errorText }}</span>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaInput',\n  props: {\n    value: { type: [String, Number], default: '' },\n    size: { type: String, default: 'default', validator: v => ['large', 'default', 'small'].includes(v) },\n    type: { type: String, default: 'text' },         // text | password | number ...\n    placeholder: { type: String, default: '' },\n    disabled: { type: Boolean, default: false },\n    error: { type: Boolean, default: false },\n    errorText: { type: String, default: '' },\n    clearable: { type: Boolean, default: false }\n  },\n  data() {\n    return { showPassword: false };\n  },\n  computed: {\n    sizeMap() { return { large: 'au-input-lg', default: 'au-input-md', small: 'au-input-sm' }; },\n    classes() {\n      return [\n        this.sizeMap[this.size],\n        { 'is-error': this.error, 'is-disabled': this.disabled }\n      ];\n    },\n    resolvedType() {\n      if (this.type === 'password') return this.showPassword ? 'text' : 'password';\n      return this.type;\n    }\n  },\n  methods: {\n    onInput(e) {\n      this.$emit('input', e.target.value);\n    },\n    clear() {\n      this.$emit('input', '');\n      this.$nextTick(() => this.$refs.input && this.$refs.input.focus());\n    }\n  }\n};\n</script>\n\n<!-- 样式对齐 components.css 与 input.json 契约 -->\n<style>\n.au-field { display: inline-flex; flex-direction: column; gap: 4px; }\n.au-input {\n  display: inline-flex; align-items: center; gap: 8px; height: 32px;\n  padding: 0 12px; background: #fff; border: 1px solid #E8ECF1;\n  border-radius: 4px; transition: border-color .15s, box-shadow .15s; box-sizing: border-box;\n}\n.au-input input {\n  border: none; outline: none; background: transparent; font-size: 14px;\n  color: #262626; min-width: 160px; flex: 1; font-family: \"PingFang SC\", \"Source Han Sans SC\", \"Microsoft YaHei\", sans-serif;\n}\n.au-input input::placeholder { color: #767676; }\n.au-input:focus-within { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }\n.au-input.is-error { border-color: #CF1322; }\n.au-input.is-error:focus-within { border-color: #CF1322; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }\n.au-input.is-disabled, .au-input:disabled { background: #F5F5F5; border-color: transparent; }\n.au-input.is-disabled input, .au-input:disabled input { color: #BFBFBF; cursor: not-allowed; }\n.au-input .affix { display: inline-flex; flex-shrink: 0; color: #6E6E6E; align-items: center; }\n.au-input .action {\n  display: inline-flex; flex-shrink: 0; padding: 0; border: none; background: none;\n  cursor: pointer; color: #6E6E6E; align-items: center;\n}\n.au-input .action:hover { color: #2F54EB; }\n.au-input-lg { height: 40px; }\n.au-input-sm { height: 24px; }\n.au-input-sm input { font-size: 12px; min-width: 120px; }\n.error-text { font-size: 12px; color: #CF1322; line-height: 20px; }\n</style>\n","vue3":"<template>\n  <div class=\"au-field\" :class=\"{ 'has-error': error }\">\n    <div class=\"au-input\" :class=\"classes\">\n      <span v-if=\"$slots.prefix\" class=\"affix prefix\"><slot name=\"prefix\" /></span>\n\n      <input\n        ref=\"input\"\n        :type=\"resolvedType\"\n        :value=\"modelValue\"\n        :placeholder=\"placeholder\"\n        :disabled=\"disabled\"\n        @input=\"onInput\"\n        @focus=\"$emit('focus', $event)\"\n        @blur=\"$emit('blur', $event)\"\n      >\n\n      <button\n        v-if=\"clearable && modelValue && !disabled\"\n        class=\"action clear\"\n        type=\"button\"\n        aria-label=\"清除\"\n        @click=\"clear\"\n      >\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n          <path d=\"M18 6L6 18M6 6l12 12\" />\n        </svg>\n      </button>\n\n      <button\n        v-if=\"type === 'password'\"\n        class=\"action toggle\"\n        type=\"button\"\n        :aria-label=\"showPassword ? '隐藏密码' : '显示密码'\"\n        @click=\"showPassword = !showPassword\"\n      >\n        <svg v-if=\"!showPassword\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n          <path d=\"M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z\" />\n          <circle cx=\"12\" cy=\"12\" r=\"3\" />\n        </svg>\n        <svg v-else width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n          <path d=\"M17.94 17.94A10 10 0 0 1 12 19c-6.5 0-10-7-10-7a18 18 0 0 1 5.06-5.94M9.9 4.24A9 9 0 0 1 12 4c6.5 0 10 7 10 7a18 18 0 0 1-2.16 3.19M1 1l22 22\" />\n        </svg>\n      </button>\n\n      <span v-if=\"$slots.suffix\" class=\"affix suffix\"><slot name=\"suffix\" /></span>\n    </div>\n\n    <span v-if=\"error && errorText\" class=\"error-text\">{{ errorText }}</span>\n  </div>\n</template>\n\n<script setup>\nimport { computed, ref } from 'vue';\n\nconst props = defineProps({\n  modelValue: { type: [String, Number], default: '' },\n  size: { type: String, default: 'default' },       // large | default | small\n  type: { type: String, default: 'text' },          // text | password | number ...\n  placeholder: { type: String, default: '' },\n  disabled: { type: Boolean, default: false },\n  error: { type: Boolean, default: false },\n  errorText: { type: String, default: '' },\n  clearable: { type: Boolean, default: false }\n});\n\nconst emit = defineEmits(['update:modelValue', 'focus', 'blur']);\n\nconst sizeMap = { large: 'au-input-lg', default: 'au-input-md', small: 'au-input-sm' };\nconst showPassword = ref(false);\nconst input = ref(null);\n\nconst classes = computed(() => [\n  sizeMap[props.size],\n  { 'is-error': props.error, 'is-disabled': props.disabled }\n]);\n\nconst resolvedType = computed(() =>\n  props.type === 'password' ? (showPassword.value ? 'text' : 'password') : props.type\n);\n\nfunction onInput(e) {\n  emit('update:modelValue', e.target.value);\n}\n\nfunction clear() {\n  emit('update:modelValue', '');\n  // 清除后重新聚焦\n  requestAnimationFrame(() => input.value && input.value.focus());\n}\n</script>\n\n<!-- 样式对齐 components.css 与 input.json 契约 -->\n<style scoped>\n.au-field { display: inline-flex; flex-direction: column; gap: 4px; }\n.au-input {\n  display: inline-flex; align-items: center; gap: 8px; height: 32px;\n  padding: 0 12px; background: #fff; border: 1px solid #E8ECF1;\n  border-radius: 4px; transition: border-color .15s, box-shadow .15s; box-sizing: border-box;\n}\n.au-input input {\n  border: none; outline: none; background: transparent; font-size: 14px;\n  color: #262626; min-width: 160px; flex: 1; font-family: \"PingFang SC\", \"Source Han Sans SC\", \"Microsoft YaHei\", sans-serif;\n}\n.au-input input::placeholder { color: #767676; }\n.au-input:focus-within { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }\n.au-input.is-error { border-color: #CF1322; }\n.au-input.is-error:focus-within { border-color: #CF1322; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }\n.au-input.is-disabled, .au-input:disabled { background: #F5F5F5; border-color: transparent; }\n.au-input.is-disabled input, .au-input:disabled input { color: #BFBFBF; cursor: not-allowed; }\n.au-input .affix { display: inline-flex; flex-shrink: 0; color: #6E6E6E; align-items: center; }\n.au-input .action {\n  display: inline-flex; flex-shrink: 0; padding: 0; border: none; background: none;\n  cursor: pointer; color: #6E6E6E; align-items: center;\n}\n.au-input .action:hover { color: #2F54EB; }\n.au-input-lg { height: 40px; }\n.au-input-sm { height: 24px; }\n.au-input-sm input { font-size: 12px; min-width: 120px; }\n.error-text { font-size: 12px; color: #CF1322; line-height: 20px; }\n</style>\n"}},{"slug":"select","name":"选择器 Select","tier":"core","confidence":"high","specBatch":1,"specFile":"组件1.txt","contractRef":"components/select.json","category":"input","specLines":["- 触发器样式同Input","- 下拉面板：白底、圆角4px、阴影中、最大高度256px","- 选中项背景#F0F5FF，文字#2F54EB，左侧勾选图标","- 支持单选、多选、搜索、分组、级联"],"specSummary":"- 触发器样式同Input","contract":{"variants":["单选","多选","可搜索","分组","下拉展开"],"dims":[{"name":"mode","values":["single","multiple","searchable","grouped","cascader"]},{"name":"state","values":["default","open","disabled"]}],"unknowns":["多选标签样式细节"],"anatomy":{"trigger":"触发器，样式同 Input","panel":"下拉面板：白底、圆角4px、阴影中、最大高度256px","option":"选项项，选中项背景 var(--color-brand-bg)，文字 var(--color-brand)，左侧勾选图标","searchInput":"可搜索模式下的搜索输入框"},"doNot":["级联面板具体布局"],"usage":["触发器样式同 Input","下拉面板：白底、圆角4px、阴影中、最大高度256px","选中项背景 var(--color-brand-bg)，文字 var(--color-brand)，左侧勾选图标","支持单选、多选、搜索、分组、级联"],"structure":{"panelRadius":"var(--radius-base)","panelMaxHeight":"256px","optionHeight":"32px"}},"files":{"html":"../frameworks/select.html","css":"../frameworks/Select.css","jsx":"../frameworks/Select.jsx","vue2":"../frameworks/Select.vue2.vue","vue3":"../frameworks/Select.vue3.vue"},"sizes":{"html":10508,"css":2954,"jsx":5803,"vue2":7153,"vue3":7205},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Aurora Admin · Select (H5)</title>\n<link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\">\n<style>\n  /* 对齐 components.css 与 select.json 契约（触发器样式同 Input） */\n  .demo { padding: 24px; background: var(--au-color-page-bg); color: var(--au-color-text-body); font-family: var(--font-family); }\n  h1 { font-size: 20px; margin: 0 0 4px; }\n  .sub { color: var(--au-color-text-secondary); margin: 0 0 24px; font-size: 12px; }\n  .group { margin-bottom: 24px; }\n  .group h2 { font-size: 16px; margin: 0 0 12px; color: var(--au-color-text-title); }\n  .row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }\n\n  .aa-select { position: relative; display: inline-block; min-width: 220px; }\n  .aa-select-trigger {\n    display: flex; align-items: center; gap: 8px; min-height: 32px; height: auto;\n    padding: 2px 28px 2px 12px; background: var(--au-color-card-bg); border: 1px solid var(--au-color-border);\n    border-radius: 4px; box-sizing: border-box; cursor: pointer; transition: border-color .15s, box-shadow .15s;\n    font-size: 14px; color: var(--au-color-text-body); flex-wrap: wrap;\n  }\n  .aa-select-trigger:hover { border-color: var(--au-color-brand); }\n  .aa-select.is-open .aa-select-trigger { border-color: var(--au-color-brand); box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }\n  .aa-select.is-disabled .aa-select-trigger { background: var(--au-color-disabled-bg); border-color: transparent; color: var(--au-color-text-disabled); cursor: not-allowed; }\n  .aa-select-trigger .placeholder { color: var(--au-color-text-placeholder); }\n  .aa-select-trigger .caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); transition: transform .15s; color: var(--au-color-text-secondary); pointer-events: none; }\n  .aa-select.is-open .caret { transform: translateY(-50%) rotate(180deg); }\n  .aa-select-trigger .tag {\n    display: inline-flex; align-items: center; gap: 4px; background: var(--au-color-brand-bg); color: var(--au-color-brand);\n    border-radius: 2px; padding: 1px 6px; font-size: 12px; line-height: 20px;\n  }\n  .aa-select-trigger .tag .x { cursor: pointer; }\n\n  .aa-select-panel {\n    position: absolute; z-index: 10; top: calc(100% + 4px); left: 0; right: 0;\n    background: var(--au-color-card-bg); border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.12);\n    max-height: 256px; overflow-y: auto; padding: 4px 0;\n  }\n  .aa-select-search { padding: 6px 8px; border-bottom: 1px solid var(--au-color-border-strong); }\n  .aa-select-search input { width: 100%; box-sizing: border-box; border: 1px solid var(--au-color-border); border-radius: 4px; padding: 4px 8px; font-size: 13px; outline: none; }\n  .aa-select-search input:focus { border-color: var(--au-color-brand); }\n  .aa-select-group-label { padding: 6px 12px; font-size: 12px; color: var(--au-color-text-secondary); }\n  .aa-select-option {\n    display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 32px; cursor: pointer;\n    font-size: 14px; color: var(--au-color-text-body); box-sizing: border-box;\n  }\n  .aa-select-option:hover { background: var(--au-color-page-bg); }\n  .aa-select-option.is-selected { background: var(--au-color-brand-bg); color: var(--au-color-brand); }\n  .aa-select-option .check { visibility: hidden; margin-left: auto; }\n  .aa-select-option.is-selected .check { visibility: visible; }\n  .aa-select-option.is-disabled { color: var(--au-color-text-disabled); cursor: not-allowed; }\n  .aa-select-empty { padding: 16px 12px; text-align: center; color: var(--au-color-text-placeholder); font-size: 13px; }\n</style>\n</head>\n<body>\n<div class=\"demo\">\n  <h1>Aurora Admin · Select 组件（纯 H5）</h1>\n  <p class=\"sub\">对齐 select.json 契约：触发器同 Input，面板圆角4px / 阴影中 / 最大高度256px，选中项品牌色 + 勾选图标</p>\n\n  <div class=\"group\">\n    <h2>1. 单选</h2>\n    <div class=\"row\">\n      <div class=\"aa-select\" data-select data-mode=\"single\" data-name=\"city\">\n        <div class=\"aa-select-trigger\" role=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\" tabindex=\"0\"><span class=\"placeholder\">请选择城市</span><span class=\"caret\">▾</span></div>\n        <div class=\"aa-select-panel\" hidden>\n          <div class=\"aa-select-option\" role=\"option\" data-value=\"bj\">北京</div>\n          <div class=\"aa-select-option\" role=\"option\" data-value=\"sh\">上海</div>\n          <div class=\"aa-select-option\" role=\"option\" data-value=\"gz\">广州</div>\n          <div class=\"aa-select-option\" role=\"option\" data-value=\"sz\">深圳</div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"group\">\n    <h2>2. 多选</h2>\n    <div class=\"row\">\n      <div class=\"aa-select\" data-select data-mode=\"multiple\" data-name=\"role\">\n        <div class=\"aa-select-trigger\" role=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\" tabindex=\"0\"><span class=\"placeholder\">请选择角色</span><span class=\"caret\">▾</span></div>\n        <div class=\"aa-select-panel\" hidden>\n          <div class=\"aa-select-option\" role=\"option\" data-value=\"admin\">管理员</div>\n          <div class=\"aa-select-option\" role=\"option\" data-value=\"editor\">编辑</div>\n          <div class=\"aa-select-option\" role=\"option\" data-value=\"viewer\">访客</div>\n          <div class=\"aa-select-option is-disabled\" role=\"option\" data-value=\"guest\" data-disabled=\"1\">受限访客</div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"group\">\n    <h2>3. 可搜索</h2>\n    <div class=\"row\">\n      <div class=\"aa-select\" data-select data-mode=\"single\" data-searchable=\"1\" data-name=\"user\">\n        <div class=\"aa-select-trigger\" role=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\" tabindex=\"0\"><span class=\"placeholder\">搜索并选择用户</span><span class=\"caret\">▾</span></div>\n        <div class=\"aa-select-panel\" hidden>\n          <div class=\"aa-select-search\"><input placeholder=\"输入关键字\"></div>\n          <div class=\"aa-select-option\" role=\"option\" data-value=\"u1\">张伟</div>\n          <div class=\"aa-select-option\" role=\"option\" data-value=\"u2\">李娜</div>\n          <div class=\"aa-select-option\" role=\"option\" data-value=\"u3\">王芳</div>\n          <div class=\"aa-select-option\" role=\"option\" data-value=\"u4\">刘强</div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"group\">\n    <h2>4. 分组</h2>\n    <div class=\"row\">\n      <div class=\"aa-select\" data-select data-mode=\"single\" data-grouped=\"1\" data-name=\"dept\">\n        <div class=\"aa-select-trigger\" role=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\" tabindex=\"0\"><span class=\"placeholder\">请选择部门</span><span class=\"caret\">▾</span></div>\n        <div class=\"aa-select-panel\" hidden>\n          <div class=\"aa-select-group-label\">技术中心</div>\n          <div class=\"aa-select-option\" role=\"option\" data-value=\"fe\">前端组</div>\n          <div class=\"aa-select-option\" role=\"option\" data-value=\"be\">后端组</div>\n          <div class=\"aa-select-group-label\">产品中心</div>\n          <div class=\"aa-select-option\" role=\"option\" data-value=\"pm\">产品组</div>\n          <div class=\"aa-select-option\" role=\"option\" data-value=\"ux\">设计组</div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<script>\ndocument.querySelectorAll('[data-select]').forEach(root => {\n  const trigger = root.querySelector('.aa-select-trigger');\n  const panel = root.querySelector('.aa-select-panel');\n  const mode = root.dataset.mode;\n  const multiple = mode === 'multiple';\n  const searchable = root.dataset.searchable === '1';\n  const grouped = root.dataset.grouped === '1';\n  let selected = multiple ? [] : null; // value | array of value\n\n  function optionLabel(opt) { return opt.textContent.trim(); }\n\n  function renderTrigger() {\n    if (multiple) {\n      if (!selected.length) { trigger.innerHTML = '<span class=\"placeholder\">请选择角色</span><span class=\"caret\">▾</span>'; return; }\n      const tags = selected.map(v => {\n        const txt = root.querySelector(`.aa-select-option[data-value=\"${v}\"]`).textContent.trim();\n        return `<span class=\"tag\" data-tag=\"${v}\">${txt}<span class=\"x\" data-x=\"${v}\">✕</span></span>`;\n      }).join('');\n      trigger.innerHTML = tags + '<span class=\"caret\">▾</span>';\n    } else {\n      if (selected == null) { trigger.innerHTML = '<span class=\"placeholder\">请选择</span><span class=\"caret\">▾</span>'; return; }\n      const txt = root.querySelector(`.aa-select-option[data-value=\"${selected}\"]`).textContent.trim();\n      trigger.innerHTML = `<span>${txt}</span><span class=\"caret\">▾</span>`;\n    }\n  }\n\n  function syncSelectedClasses() {\n    root.querySelectorAll('.aa-select-option').forEach(o => {\n      const v = o.dataset.value;\n      const isSel = multiple ? selected.includes(v) : selected === v;\n      o.classList.toggle('is-selected', isSel);\n    });\n  }\n\n  function open() {\n    root.classList.add('is-open');\n    panel.hidden = false;\n    if (searchable) panel.querySelector('.aa-select-search input').focus();\n  }\n  function close() { root.classList.remove('is-open'); panel.hidden = true; }\n\n  trigger.addEventListener('click', (e) => {\n    if (root.classList.contains('is-disabled')) return;\n    if (e.target.dataset.x) {\n      const v = e.target.dataset.x;\n      selected = selected.filter(x => x !== v);\n      syncSelectedClasses(); renderTrigger(); return;\n    }\n    root.classList.contains('is-open') ? close() : open();\n  });\n\n  panel.addEventListener('click', (e) => {\n    const opt = e.target.closest('.aa-select-option');\n    if (!opt || opt.classList.contains('is-disabled')) return;\n    const v = opt.dataset.value;\n    if (multiple) {\n      selected.includes(v) ? selected = selected.filter(x => x !== v) : selected.push(v);\n      syncSelectedClasses(); renderTrigger();\n    } else {\n      selected = v; syncSelectedClasses(); renderTrigger(); close();\n    }\n  });\n\n  if (searchable) {\n    panel.querySelector('.aa-select-search input').addEventListener('input', (e) => {\n      const q = e.target.value.trim().toLowerCase();\n      root.querySelectorAll('.aa-select-option').forEach(o => {\n        o.style.display = o.textContent.toLowerCase().includes(q) ? '' : 'none';\n      });\n    });\n  }\n\n  document.addEventListener('click', (e) => {\n    if (!root.contains(e.target)) close();\n  });\n\n  renderTrigger();\n});\n</script>\n</body>\n</html>\n","css":"/* Aurora Admin Select 样式 — 对齐 components.css 与 select.json 契约（触发器同 Input） */\n.aa-select { position: relative; display: inline-block; min-width: 220px; }\n.aa-select-trigger {\n  display: flex; align-items: center; gap: 8px; min-height: 32px; height: auto;\n  padding: 2px 28px 2px 12px; background: var(--au-color-card-bg); border: 1px solid var(--au-color-border);\n  border-radius: 4px; box-sizing: border-box; cursor: pointer; transition: border-color .15s, box-shadow .15s;\n  font-size: 14px; color: var(--au-color-text-body); flex-wrap: wrap; position: relative;\n}\n.aa-select-trigger:hover { border-color: var(--au-color-brand); }\n.aa-select.is-open .aa-select-trigger { border-color: var(--au-color-brand); box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }\n.aa-select.is-disabled .aa-select-trigger { background: var(--au-color-disabled-bg); border-color: transparent; color: var(--au-color-text-disabled); cursor: not-allowed; }\n.aa-select-trigger .placeholder { color: var(--au-color-text-placeholder); }\n.aa-select-trigger .caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); transition: transform .15s; color: var(--au-color-text-secondary); }\n.aa-select.is-open .caret { transform: translateY(-50%) rotate(180deg); }\n.aa-select-trigger .tag {\n  display: inline-flex; align-items: center; gap: 4px; background: var(--au-color-brand-bg); color: var(--au-color-brand);\n  border-radius: 2px; padding: 1px 6px; font-size: 12px; line-height: 20px;\n}\n.aa-select-trigger .tag .x { cursor: pointer; }\n.aa-select-panel {\n  position: absolute; z-index: 10; top: calc(100% + 4px); left: 0; right: 0;\n  background: var(--au-color-card-bg); border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.12);\n  max-height: 256px; overflow-y: auto; padding: 4px 0;\n}\n.aa-select-search { padding: 6px 8px; border-bottom: 1px solid var(--au-color-border-strong); }\n.aa-select-search input { width: 100%; box-sizing: border-box; border: 1px solid var(--au-color-border); border-radius: 4px; padding: 4px 8px; font-size: 13px; outline: none; }\n.aa-select-search input:focus { border-color: var(--au-color-brand); }\n.aa-select-group-label { padding: 6px 12px; font-size: 12px; color: var(--au-color-text-secondary); }\n.aa-select-option {\n  display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 32px; cursor: pointer;\n  font-size: 14px; color: var(--au-color-text-body); box-sizing: border-box;\n}\n.aa-select-option:hover { background: var(--au-color-page-bg); }\n.aa-select-option.is-selected { background: var(--au-color-brand-bg); color: var(--au-color-brand); }\n.aa-select-option .check { visibility: hidden; margin-left: auto; }\n.aa-select-option.is-selected .check { visibility: visible; }\n.aa-select-option.is-disabled { color: var(--au-color-text-disabled); cursor: not-allowed; }\n.aa-select-empty { padding: 16px 12px; text-align: center; color: var(--au-color-text-placeholder); font-size: 13px; }\n","jsx":"import React, { useState, useRef, useEffect, useMemo } from 'react';\nimport './Select.css';\n\n/**\n * Aurora Admin Select（React）\n * 对齐 select.json 契约：\n *  - mode:    single | multiple（multiple 属性）\n *  - feature: searchable | grouped（groups 属性）\n *  - state:   default | open | disabled\n * 触发器样式同 Input；面板圆角4px / 阴影中 / 最大高度256px；选中项品牌色 + 勾选图标\n * 受控：<Select value={v} onChange={setV} options={...} />\n * 非受控：<Select defaultValue=\"bj\" options={...} />\n */\nfunction flatten(groups) {\n  return (groups || []).flatMap((g) => g.options);\n}\n\nexport default function Select({\n  value,\n  defaultValue = null,\n  options = [],\n  groups = null,\n  multiple = false,\n  searchable = false,\n  disabled = false,\n  placeholder = '请选择',\n  className = '',\n  onChange,\n  ...rest\n}) {\n  const isControlled = value !== undefined;\n  const [inner, setInner] = useState(defaultValue);\n  const [open, setOpen] = useState(false);\n  const [keyword, setKeyword] = useState('');\n  const rootRef = useRef(null);\n\n  const current = isControlled ? value : inner;\n  const selectedArr = Array.isArray(current) ? current : [];\n  const selectedVal = Array.isArray(current) ? null : current;\n\n  const filteredOptions = useMemo(() => {\n    if (!searchable || !keyword) return options;\n    const q = keyword.trim().toLowerCase();\n    return options.filter((o) => String(o.label).toLowerCase().includes(q));\n  }, [options, searchable, keyword]);\n\n  const filteredGroups = useMemo(() => {\n    if (!groups) return [];\n    if (!searchable || !keyword) return groups;\n    const q = keyword.trim().toLowerCase();\n    return groups\n      .map((g) => ({ label: g.label, options: g.options.filter((o) => String(o.label).toLowerCase().includes(q)) }))\n      .filter((g) => g.options.length);\n  }, [groups, searchable, keyword]);\n\n  const isEmpty = groups ? filteredGroups.length === 0 : filteredOptions.length === 0;\n\n  const flat = options.length ? options : flatten(groups);\n\n  function labelOf(v) {\n    const found = flat.find((o) => o.value === v);\n    return found ? found.label : v;\n  }\n  function isSelected(v) {\n    return multiple ? selectedArr.includes(v) : selectedVal === v;\n  }\n  function emit(next) {\n    if (!isControlled) setInner(next);\n    onChange && onChange(next);\n  }\n  function choose(o) {\n    if (o.disabled) return;\n    if (multiple) {\n      const next = selectedArr.includes(o.value)\n        ? selectedArr.filter((x) => x !== o.value)\n        : [...selectedArr, o.value];\n      emit(next);\n    } else {\n      emit(o.value);\n      setOpen(false);\n    }\n  }\n  function remove(v) {\n    emit(selectedArr.filter((x) => x !== v));\n  }\n\n  useEffect(() => {\n    function onDocClick(e) {\n      if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false);\n    }\n    document.addEventListener('click', onDocClick);\n    return () => document.removeEventListener('click', onDocClick);\n  }, []);\n\n  const classes = ['aa-select', open ? 'is-open' : '', disabled ? 'is-disabled' : '', className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={classes} ref={rootRef} {...rest}>\n      <div className=\"aa-select-trigger\" onClick={() => !disabled && setOpen((o) => !o)} tabIndex={0}>\n        {multiple ? (\n          selectedArr.length ? (\n            selectedArr.map((v) => (\n              <span className=\"tag\" key={v}>\n                {labelOf(v)}\n                <span className=\"x\" onClick={(e) => { e.stopPropagation(); remove(v); }}>✕</span>\n              </span>\n            ))\n          ) : (\n            <span className=\"placeholder\">{placeholder}</span>\n          )\n        ) : selectedVal == null ? (\n          <span className=\"placeholder\">{placeholder}</span>\n        ) : (\n          <span>{labelOf(selectedVal)}</span>\n        )}\n        <span className=\"caret\">▾</span>\n      </div>\n\n      {open && (\n        <div className=\"aa-select-panel\">\n          {searchable && (\n            <div className=\"aa-select-search\">\n              <input\n                placeholder=\"输入关键字\"\n                value={keyword}\n                onChange={(e) => setKeyword(e.target.value)}\n                onClick={(e) => e.stopPropagation()}\n              />\n            </div>\n          )}\n\n          {groups ? (\n            filteredGroups.map((g) => (\n              <React.Fragment key={g.label}>\n                <div className=\"aa-select-group-label\">{g.label}</div>\n                {g.options.map((o) => (\n                  <div\n                    key={o.value}\n                    className={`aa-select-option${isSelected(o.value) ? ' is-selected' : ''}${o.disabled ? ' is-disabled' : ''}`}\n                    onClick={() => choose(o)}\n                  >\n                    {o.label}<span className=\"check\">✓</span>\n                  </div>\n                ))}\n              </React.Fragment>\n            ))\n          ) : (\n            filteredOptions.map((o) => (\n              <div\n                key={o.value}\n                className={`aa-select-option${isSelected(o.value) ? ' is-selected' : ''}${o.disabled ? ' is-disabled' : ''}`}\n                onClick={() => choose(o)}\n              >\n                {o.label}<span className=\"check\">✓</span>\n              </div>\n            ))\n          )}\n\n          {isEmpty && <div className=\"aa-select-empty\">无匹配选项</div>}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/*\n用法示例：\nimport Select from './Select';\n\nconst cities = [{ value: 'bj', label: '北京' }, { value: 'sh', label: '上海' }];\n<Select options={cities} placeholder=\"请选择城市\" />\n<Select multiple options={cities} defaultValue={['bj']} />\n<Select searchable options={cities} />\n<Select groups={[{ label: '技术中心', options: cities }]} />\n*/\n","vue2":"<template>\n  <div class=\"aa-select\" :class=\"{ 'is-open': open, 'is-disabled': disabled }\" ref=\"root\">\n    <div class=\"aa-select-trigger\" @click=\"toggle\" tabindex=\"0\">\n      <template v-if=\"multiple\">\n        <span v-if=\"!selectedArr.length\" class=\"placeholder\">{{ placeholder }}</span>\n        <span v-for=\"v in selectedArr\" :key=\"v\" class=\"tag\">\n          {{ labelOf(v) }}<span class=\"x\" @click.stop=\"remove(v)\">✕</span>\n        </span>\n      </template>\n      <span v-else-if=\"selectedVal == null\" class=\"placeholder\">{{ placeholder }}</span>\n      <span v-else>{{ labelOf(selectedVal) }}</span>\n      <span class=\"caret\">▾</span>\n    </div>\n\n    <div class=\"aa-select-panel\" v-show=\"open\">\n      <div v-if=\"searchable\" class=\"aa-select-search\">\n        <input v-model=\"keyword\" placeholder=\"输入关键字\" @click.stop>\n      </div>\n\n      <template v-if=\"groups && groups.length\">\n        <template v-for=\"g in filteredGroups\">\n          <div class=\"aa-select-group-label\">{{ g.label }}</div>\n          <div\n            v-for=\"o in g.options\" :key=\"o.value\"\n            class=\"aa-select-option\"\n            :class=\"{ 'is-selected': isSelected(o.value), 'is-disabled': o.disabled }\"\n            @click=\"choose(o)\"\n          >\n            {{ o.label }}<span class=\"check\">✓</span>\n          </div>\n        </template>\n      </template>\n\n      <template v-else>\n        <div\n          v-for=\"o in filteredOptions\" :key=\"o.value\"\n          class=\"aa-select-option\"\n          :class=\"{ 'is-selected': isSelected(o.value), 'is-disabled': o.disabled }\"\n          @click=\"choose(o)\"\n        >\n          {{ o.label }}<span class=\"check\">✓</span>\n        </div>\n      </template>\n\n      <div v-if=\"isEmpty\" class=\"aa-select-empty\">无匹配选项</div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaSelect',\n  props: {\n    value: { type: [String, Number, Array], default: null },\n    options: { type: Array, default: () => [] },          // [{ value, label, disabled? }]\n    groups: { type: Array, default: null },                // [{ label, options: [...] }]\n    multiple: { type: Boolean, default: false },\n    searchable: { type: Boolean, default: false },\n    disabled: { type: Boolean, default: false },\n    placeholder: { type: String, default: '请选择' }\n  },\n  data() {\n    return { open: false, keyword: '' };\n  },\n  computed: {\n    selectedArr() { return Array.isArray(this.value) ? this.value : []; },\n    selectedVal() { return Array.isArray(this.value) ? null : this.value; },\n    filteredOptions() {\n      if (!this.searchable || !this.keyword) return this.options;\n      const q = this.keyword.trim().toLowerCase();\n      return this.options.filter(o => String(o.label).toLowerCase().includes(q));\n    },\n    filteredGroups() {\n      if (!this.groups) return [];\n      if (!this.searchable || !this.keyword) return this.groups;\n      const q = this.keyword.trim().toLowerCase();\n      return this.groups\n        .map(g => ({ label: g.label, options: g.options.filter(o => String(o.label).toLowerCase().includes(q)) }))\n        .filter(g => g.options.length);\n    },\n    isEmpty() {\n      return this.groups ? this.filteredGroups.length === 0 : this.filteredOptions.length === 0;\n    }\n  },\n  watch: {\n    open(v) { if (v && this.searchable) this.keyword = ''; }\n  },\n  methods: {\n    toggle() {\n      if (this.disabled) return;\n      this.open = !this.open;\n    },\n    isSelected(v) {\n      return this.multiple ? this.selectedArr.includes(v) : this.selectedVal === v;\n    },\n    labelOf(v) {\n      const flat = this.options.length ? this.options : (this.groups || []).flatMap(g => g.options);\n      const found = flat.find(o => o.value === v);\n      return found ? found.label : v;\n    },\n    choose(o) {\n      if (o.disabled) return;\n      if (this.multiple) {\n        const next = this.selectedArr.includes(o.value)\n          ? this.selectedArr.filter(x => x !== o.value)\n          : [...this.selectedArr, o.value];\n        this.$emit('input', next);\n        this.$emit('change', next);\n      } else {\n        this.$emit('input', o.value);\n        this.$emit('change', o.value);\n        this.open = false;\n      }\n    },\n    remove(v) {\n      this.$emit('input', this.selectedArr.filter(x => x !== v));\n      this.$emit('change', this.selectedArr.filter(x => x !== v));\n    },\n    onDocClick(e) {\n      if (this.$refs.root && !this.$refs.root.contains(e.target)) this.open = false;\n    }\n  },\n  mounted() { document.addEventListener('click', this.onDocClick); },\n  beforeDestroy() { document.removeEventListener('click', this.onDocClick); }\n};\n</script>\n\n<!-- 样式对齐 components.css 与 select.json 契约（触发器样式同 Input） -->\n<style>\n.aa-select { position: relative; display: inline-block; min-width: 220px; }\n.aa-select-trigger {\n  display: flex; align-items: center; gap: 8px; min-height: 32px; height: auto;\n  padding: 2px 28px 2px 12px; background: #fff; border: 1px solid #E8ECF1;\n  border-radius: 4px; box-sizing: border-box; cursor: pointer; transition: border-color .15s, box-shadow .15s;\n  font-size: 14px; color: #262626; flex-wrap: wrap; position: relative;\n}\n.aa-select-trigger:hover { border-color: #2F54EB; }\n.aa-select.is-open .aa-select-trigger { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }\n.aa-select.is-disabled .aa-select-trigger { background: #F5F5F5; border-color: transparent; color: #BFBFBF; cursor: not-allowed; }\n.aa-select-trigger .placeholder { color: #767676; }\n.aa-select-trigger .caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); transition: transform .15s; color: #6E6E6E; }\n.aa-select.is-open .caret { transform: translateY(-50%) rotate(180deg); }\n.aa-select-trigger .tag {\n  display: inline-flex; align-items: center; gap: 4px; background: #F0F5FF; color: #2F54EB;\n  border-radius: 2px; padding: 1px 6px; font-size: 12px; line-height: 20px;\n}\n.aa-select-trigger .tag .x { cursor: pointer; }\n.aa-select-panel {\n  position: absolute; z-index: 10; top: calc(100% + 4px); left: 0; right: 0;\n  background: #fff; border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.12);\n  max-height: 256px; overflow-y: auto; padding: 4px 0;\n}\n.aa-select-search { padding: 6px 8px; border-bottom: 1px solid #F0F0F0; }\n.aa-select-search input { width: 100%; box-sizing: border-box; border: 1px solid #E8ECF1; border-radius: 4px; padding: 4px 8px; font-size: 13px; outline: none; }\n.aa-select-search input:focus { border-color: #2F54EB; }\n.aa-select-group-label { padding: 6px 12px; font-size: 12px; color: #6E6E6E; }\n.aa-select-option {\n  display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 32px; cursor: pointer;\n  font-size: 14px; color: #262626; box-sizing: border-box;\n}\n.aa-select-option:hover { background: #F5F7FA; }\n.aa-select-option.is-selected { background: #F0F5FF; color: #2F54EB; }\n.aa-select-option .check { visibility: hidden; margin-left: auto; }\n.aa-select-option.is-selected .check { visibility: visible; }\n.aa-select-option.is-disabled { color: #BFBFBF; cursor: not-allowed; }\n.aa-select-empty { padding: 16px 12px; text-align: center; color: #767676; font-size: 13px; }\n</style>\n","vue3":"<template>\n  <div class=\"aa-select\" :class=\"{ 'is-open': open, 'is-disabled': disabled }\" ref=\"root\">\n    <div class=\"aa-select-trigger\" @click=\"toggle\" tabindex=\"0\">\n      <template v-if=\"multiple\">\n        <span v-if=\"!selectedArr.length\" class=\"placeholder\">{{ placeholder }}</span>\n        <span v-for=\"v in selectedArr\" :key=\"v\" class=\"tag\">\n          {{ labelOf(v) }}<span class=\"x\" @click.stop=\"remove(v)\">✕</span>\n        </span>\n      </template>\n      <span v-else-if=\"selectedVal == null\" class=\"placeholder\">{{ placeholder }}</span>\n      <span v-else>{{ labelOf(selectedVal) }}</span>\n      <span class=\"caret\">▾</span>\n    </div>\n\n    <div class=\"aa-select-panel\" v-show=\"open\">\n      <div v-if=\"searchable\" class=\"aa-select-search\">\n        <input v-model=\"keyword\" placeholder=\"输入关键字\" @click.stop>\n      </div>\n\n      <template v-if=\"groups && groups.length\">\n        <template v-for=\"g in filteredGroups\" :key=\"g.label\">\n          <div class=\"aa-select-group-label\">{{ g.label }}</div>\n          <div\n            v-for=\"o in g.options\" :key=\"o.value\"\n            class=\"aa-select-option\"\n            :class=\"{ 'is-selected': isSelected(o.value), 'is-disabled': o.disabled }\"\n            @click=\"choose(o)\"\n          >\n            {{ o.label }}<span class=\"check\">✓</span>\n          </div>\n        </template>\n      </template>\n\n      <template v-else>\n        <div\n          v-for=\"o in filteredOptions\" :key=\"o.value\"\n          class=\"aa-select-option\"\n          :class=\"{ 'is-selected': isSelected(o.value), 'is-disabled': o.disabled }\"\n          @click=\"choose(o)\"\n        >\n          {{ o.label }}<span class=\"check\">✓</span>\n        </div>\n      </template>\n\n      <div v-if=\"isEmpty\" class=\"aa-select-empty\">无匹配选项</div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue';\n\nconst props = defineProps({\n  modelValue: { type: [String, Number, Array], default: null },\n  options: { type: Array, default: () => [] },          // [{ value, label, disabled? }]\n  groups: { type: Array, default: null },                // [{ label, options: [...] }]\n  multiple: { type: Boolean, default: false },\n  searchable: { type: Boolean, default: false },\n  disabled: { type: Boolean, default: false },\n  placeholder: { type: String, default: '请选择' }\n});\n\nconst emit = defineEmits(['update:modelValue', 'change']);\n\nconst open = ref(false);\nconst keyword = ref('');\nconst root = ref(null);\n\nconst selectedArr = computed(() => Array.isArray(props.modelValue) ? props.modelValue : []);\nconst selectedVal = computed(() => Array.isArray(props.modelValue) ? null : props.modelValue);\n\nconst filteredOptions = computed(() => {\n  if (!props.searchable || !props.keyword) return props.options;\n  const q = props.keyword.trim().toLowerCase();\n  return props.options.filter(o => String(o.label).toLowerCase().includes(q));\n});\nconst filteredGroups = computed(() => {\n  if (!props.groups) return [];\n  if (!props.searchable || !props.keyword) return props.groups;\n  const q = props.keyword.trim().toLowerCase();\n  return props.groups\n    .map(g => ({ label: g.label, options: g.options.filter(o => String(o.label).toLowerCase().includes(q)) }))\n    .filter(g => g.options.length);\n});\nconst isEmpty = computed(() =>\n  props.groups ? filteredGroups.value.length === 0 : filteredOptions.value.length === 0\n);\n\nwatch(open, (v) => { if (v && props.searchable) keyword.value = ''; });\n\nfunction toggle() {\n  if (props.disabled) return;\n  open.value = !open.value;\n}\nfunction isSelected(v) {\n  return props.multiple ? selectedArr.value.includes(v) : selectedVal.value === v;\n}\nfunction labelOf(v) {\n  const flat = props.options.length ? props.options : (props.groups || []).flatMap(g => g.options);\n  const found = flat.find(o => o.value === v);\n  return found ? found.label : v;\n}\nfunction choose(o) {\n  if (o.disabled) return;\n  if (props.multiple) {\n    const next = selectedArr.value.includes(o.value)\n      ? selectedArr.value.filter(x => x !== o.value)\n      : [...selectedArr.value, o.value];\n    emit('update:modelValue', next);\n    emit('change', next);\n  } else {\n    emit('update:modelValue', o.value);\n    emit('change', o.value);\n    open.value = false;\n  }\n}\nfunction remove(v) {\n  const next = selectedArr.value.filter(x => x !== v);\n  emit('update:modelValue', next);\n  emit('change', next);\n}\nfunction onDocClick(e) {\n  if (root.value && !root.value.contains(e.target)) open.value = false;\n}\nonMounted(() => document.addEventListener('click', onDocClick));\nonBeforeUnmount(() => document.removeEventListener('click', onDocClick));\n</script>\n\n<!-- 样式对齐 components.css 与 select.json 契约（触发器样式同 Input） -->\n<style scoped>\n.aa-select { position: relative; display: inline-block; min-width: 220px; }\n.aa-select-trigger {\n  display: flex; align-items: center; gap: 8px; min-height: 32px; height: auto;\n  padding: 2px 28px 2px 12px; background: #fff; border: 1px solid #E8ECF1;\n  border-radius: 4px; box-sizing: border-box; cursor: pointer; transition: border-color .15s, box-shadow .15s;\n  font-size: 14px; color: #262626; flex-wrap: wrap; position: relative;\n}\n.aa-select-trigger:hover { border-color: #2F54EB; }\n.aa-select.is-open .aa-select-trigger { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }\n.aa-select.is-disabled .aa-select-trigger { background: #F5F5F5; border-color: transparent; color: #BFBFBF; cursor: not-allowed; }\n.aa-select-trigger .placeholder { color: #767676; }\n.aa-select-trigger .caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); transition: transform .15s; color: #6E6E6E; }\n.aa-select.is-open .caret { transform: translateY(-50%) rotate(180deg); }\n.aa-select-trigger .tag {\n  display: inline-flex; align-items: center; gap: 4px; background: #F0F5FF; color: #2F54EB;\n  border-radius: 2px; padding: 1px 6px; font-size: 12px; line-height: 20px;\n}\n.aa-select-trigger .tag .x { cursor: pointer; }\n.aa-select-panel {\n  position: absolute; z-index: 10; top: calc(100% + 4px); left: 0; right: 0;\n  background: #fff; border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.12);\n  max-height: 256px; overflow-y: auto; padding: 4px 0;\n}\n.aa-select-search { padding: 6px 8px; border-bottom: 1px solid #F0F0F0; }\n.aa-select-search input { width: 100%; box-sizing: border-box; border: 1px solid #E8ECF1; border-radius: 4px; padding: 4px 8px; font-size: 13px; outline: none; }\n.aa-select-search input:focus { border-color: #2F54EB; }\n.aa-select-group-label { padding: 6px 12px; font-size: 12px; color: #6E6E6E; }\n.aa-select-option {\n  display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 32px; cursor: pointer;\n  font-size: 14px; color: #262626; box-sizing: border-box;\n}\n.aa-select-option:hover { background: #F5F7FA; }\n.aa-select-option.is-selected { background: #F0F5FF; color: #2F54EB; }\n.aa-select-option .check { visibility: hidden; margin-left: auto; }\n.aa-select-option.is-selected .check { visibility: visible; }\n.aa-select-option.is-disabled { color: #BFBFBF; cursor: not-allowed; }\n.aa-select-empty { padding: 16px 12px; text-align: center; color: #767676; font-size: 13px; }\n</style>\n"}},{"slug":"table","name":"数据表格 Table","tier":"core","confidence":"high","specBatch":1,"specFile":"组件1.txt","contractRef":"components/table.json","category":"display","specLines":["- 表头：背景#FAFAFA，文字#262626，行高48px","- 行高48px，分割线#E8ECF1，悬停背景#F5F7FA","- 单元格内边距左右16px","- 文本左对齐，数字/金额右对齐","- 选中行背景#F0F5FF","- 支持排序、筛选、自定义列、固定列、展开行、行选择、批量操作","- 操作列右对齐，文字按钮间距8px"],"specSummary":"- 表头：背景#FAFAFA，文字#262626，行高48px","contract":{"variants":["基础表格","可排序","行选择","固定列","展开行","批量操作"],"dims":[{"name":"feature","values":["sortable","filterable","selectable","fixed-column","expandable","batch-actions"]},{"name":"state","values":["default","hover","selected","loading","empty"]}],"unknowns":["表格密度切换具体实现"],"anatomy":{"header":"表头：背景 var(--color-bg-table-header)，文字 var(--color-text-body)，行高48px","row":"数据行：行高48px，分割线 var(--color-border)，悬停背景 var(--color-bg-page)","cell":"单元格：内边距左右16px，文本左对齐，数字/金额右对齐","selectedRow":"选中行背景 var(--color-brand-bg)","actionColumn":"操作列右对齐，文字按钮间距8px"},"doNot":["分页器与表格的组合规范"],"usage":["表头：背景 var(--color-bg-table-header)，文字 var(--color-text-body)，行高48px","行高48px，分割线 var(--color-border)，悬停背景 var(--color-bg-page)","单元格内边距左右16px，文本左对齐，数字/金额右对齐","选中行背景 var(--color-brand-bg)","支持排序、筛选、自定义列、固定列、展开行、行选择、批量操作","操作列右对齐，文字按钮间距8px"],"structure":{"headerHeight":"48px","rowHeight":"48px","cellPadding":"左右16px","divider":"1px solid var(--color-border)"}},"files":{"html":"../frameworks/table.html","css":"../frameworks/Table.css","jsx":"../frameworks/Table.jsx","vue2":"../frameworks/Table.vue2.vue","vue3":"../frameworks/Table.vue3.vue"},"sizes":{"html":6605,"css":1892,"jsx":5568,"vue2":5981,"vue3":5887},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Aurora Admin · Table (H5)</title>\n<link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\">\n<style>\n  /* 对齐 components.css 与 table.json 契约 */\n  .demo { padding: 24px; background: var(--au-color-page-bg); color: var(--au-color-text-body); font-family: var(--font-family); }\n  h1 { font-size: 20px; margin: 0 0 4px; }\n  .sub { color: var(--au-color-text-secondary); margin: 0 0 24px; font-size: 12px; }\n\n  .aa-table { width: 100%; border: 1px solid var(--au-color-border); border-radius: 8px; overflow: hidden; background: var(--au-color-card-bg); position: relative; }\n  .aa-table table { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--au-color-text-body); }\n  .aa-table thead th {\n    background: var(--au-color-table-header-bg); color: var(--au-color-text-body); font-weight: 600; height: 48px; text-align: left;\n    padding: 0 16px; border-bottom: 1px solid var(--au-color-border); white-space: nowrap;\n  }\n  .aa-table tbody td { height: 48px; padding: 0 16px; border-bottom: 1px solid var(--au-color-border); text-align: left; }\n  .aa-table tbody tr:last-child td { border-bottom: none; }\n  .aa-table tbody tr:hover { background: var(--au-color-page-bg); }\n  .aa-table tbody tr.is-selected { background: var(--au-color-brand-bg); }\n  .aa-table th.align-right, .aa-table td.align-right { text-align: right; }\n  .aa-table .sortable { cursor: pointer; user-select: none; }\n  .aa-table .sort-ind { color: var(--au-color-text-placeholder); margin-left: 4px; }\n  .aa-table .sort-ind.active { color: var(--au-color-brand); }\n  .aa-table .col-action { text-align: right; }\n  .aa-table .link-btn { color: var(--au-color-brand); background: none; border: none; cursor: pointer; font-size: 14px; padding: 0; }\n  .aa-table .link-btn + .link-btn { margin-left: 8px; }\n  .aa-table .link-btn.danger { color: var(--au-color-error); }\n  .aa-table .checkbox { width: 16px; height: 16px; cursor: pointer; vertical-align: middle; }\n  .aa-table .empty { padding: 48px 16px; text-align: center; color: var(--au-color-text-placeholder); font-size: 14px; }\n  .aa-table .loading-mask {\n    position: absolute; inset: 0; background: rgba(255,255,255,0.7); display: flex;\n    align-items: center; justify-content: center; z-index: 2;\n  }\n  .aa-table .spinner {\n    width: 20px; height: 20px; border: 2px solid var(--au-color-brand); border-top-color: transparent;\n    border-radius: 50%; animation: aa-tbl-spin .6s linear infinite;\n  }\n  @keyframes aa-tbl-spin { to { transform: rotate(360deg); } }\n</style>\n</head>\n<body>\n<div class=\"demo\">\n  <h1>Aurora Admin · Table 组件（纯 H5）</h1>\n  <p class=\"sub\">对齐 table.json 契约：表头/行高48px、分割线 #E8ECF1、悬停 #F5F7FA、选中 #F0F5FF、单元格左右16px、数字右对齐、操作列右对齐、加载/空态</p>\n\n  <label style=\"font-size:13px;color:var(--color-text-secondary);\">\n    <input type=\"checkbox\" id=\"toggleLoading\"> 模拟加载态\n  </label>\n\n  <div class=\"aa-table\" role=\"table\" style=\"margin-top:12px\">\n    <table>\n      <thead>\n        <tr>\n          <th style=\"width:48px\"><input type=\"checkbox\" class=\"checkbox\" id=\"selectAll\"></th>\n          <th>客户名称</th>\n          <th>负责人</th>\n          <th class=\"align-right sortable\" id=\"sortAmount\">合同金额<span class=\"sort-ind\" id=\"sortInd\">↕</span></th>\n          <th>状态</th>\n          <th class=\"col-action\">操作</th>\n        </tr>\n      </thead>\n      <tbody id=\"tbody\"></tbody>\n    </table>\n    <div class=\"loading-mask\" id=\"loading\" hidden><span class=\"spinner\"></span></div>\n  </div>\n</div>\n\n<script>\nconst data = [\n  { id: 1, name: '北京云图科技', owner: '张伟', amount: 128000, status: '已签约' },\n  { id: 2, name: '上海恒创', owner: '李娜', amount: 86000, status: '跟进中' },\n  { id: 3, name: '广州锐捷', owner: '王芳', amount: 254000, status: '已签约' },\n  { id: 4, name: '深圳智联', owner: '刘强', amount: 43000, status: '待回款' }\n];\nlet selected = new Set();\nlet sortOrder = null; // 'asc' | 'desc' | null\n\nfunction rows() {\n  if (!sortOrder) return data;\n  return [...data].sort((a, b) => sortOrder === 'asc' ? a.amount - b.amount : b.amount - a.amount);\n}\n\nfunction render() {\n  const tbody = document.getElementById('tbody');\n  if (!rows().length) {\n    tbody.innerHTML = `<tr><td class=\"empty\" colspan=\"6\">暂无数据</td></tr>`;\n    return;\n  }\n  tbody.innerHTML = rows().map(r => {\n    const sel = selected.has(r.id) ? 'checked' : '';\n    const cls = selected.has(r.id) ? ' class=\"is-selected\"' : '';\n    return `<tr${cls} data-id=\"${r.id}\">\n      <td><input type=\"checkbox\" class=\"checkbox row-cb\" data-id=\"${r.id}\" ${sel}></td>\n      <td>${r.name}</td>\n      <td>${r.owner}</td>\n      <td class=\"align-right\">¥${r.amount.toLocaleString()}</td>\n      <td>${r.status}</td>\n      <td class=\"col-action\">\n        <button class=\"link-btn\" data-act=\"edit\" data-id=\"${r.id}\">编辑</button>\n        <button class=\"link-btn danger\" data-act=\"del\" data-id=\"${r.id}\">删除</button>\n      </td>\n    </tr>`;\n  }).join('');\n}\n\ndocument.getElementById('tbody').addEventListener('change', (e) => {\n  if (e.target.classList.contains('row-cb')) {\n    const id = +e.target.dataset.id;\n    e.target.checked ? selected.add(id) : selected.delete(id);\n    render(); syncSelectAll();\n  }\n});\ndocument.getElementById('tbody').addEventListener('click', (e) => {\n  const b = e.target.closest('[data-act]');\n  if (b) alert(`${b.dataset.act} 行 id=${b.dataset.id}`);\n});\ndocument.getElementById('selectAll').addEventListener('change', (e) => {\n  selected = e.target.checked ? new Set(data.map(d => d.id)) : new Set();\n  render(); syncSelectAll();\n});\nfunction syncSelectAll() {\n  const sa = document.getElementById('selectAll');\n  sa.checked = selected.size === data.length && data.length > 0;\n  sa.indeterminate = selected.size > 0 && selected.size < data.length;\n}\ndocument.getElementById('sortAmount').addEventListener('click', () => {\n  sortOrder = sortOrder === null ? 'asc' : sortOrder === 'asc' ? 'desc' : null;\n  const ind = document.getElementById('sortInd');\n  ind.textContent = sortOrder === 'asc' ? '↑' : sortOrder === 'desc' ? '↓' : '↕';\n  ind.classList.toggle('active', sortOrder !== null);\n  render();\n});\ndocument.getElementById('toggleLoading').addEventListener('change', (e) => {\n  document.getElementById('loading').hidden = !e.target.checked;\n});\nrender(); syncSelectAll();\n</script>\n</body>\n</html>\n","css":"/* Aurora Admin Table 样式 — 对齐 components.css 与 table.json 契约 */\n.aa-table { width: 100%; border: 1px solid var(--au-color-border); border-radius: 8px; overflow: hidden; background: var(--au-color-card-bg); position: relative; }\n.aa-table table { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--au-color-text-body); }\n.aa-table thead th {\n  background: var(--au-color-table-header-bg); color: var(--au-color-text-body); font-weight: 600; height: 48px; text-align: left;\n  padding: 0 16px; border-bottom: 1px solid var(--au-color-border); white-space: nowrap;\n}\n.aa-table tbody td { height: 48px; padding: 0 16px; border-bottom: 1px solid var(--au-color-border); text-align: left; }\n.aa-table tbody tr:last-child td { border-bottom: none; }\n.aa-table tbody tr:hover { background: var(--au-color-page-bg); }\n.aa-table tbody tr.is-selected { background: var(--au-color-brand-bg); }\n.aa-table .align-right { text-align: right; }\n.aa-table .sortable { cursor: pointer; user-select: none; }\n.aa-table .sort-ind { color: var(--au-color-text-placeholder); margin-left: 4px; }\n.aa-table .sort-ind.active { color: var(--au-color-brand); }\n.aa-table .col-action { text-align: right; }\n.aa-table .col-selection { text-align: center; }\n.aa-table .checkbox { width: 16px; height: 16px; cursor: pointer; vertical-align: middle; }\n.aa-table .empty { padding: 48px 16px; text-align: center; color: var(--au-color-text-placeholder); font-size: 14px; }\n.aa-table .loading-mask {\n  position: absolute; inset: 0; background: rgba(255,255,255,0.7); display: flex;\n  align-items: center; justify-content: center; z-index: 2;\n}\n.aa-table .spinner {\n  width: 20px; height: 20px; border: 2px solid var(--au-color-brand); border-top-color: transparent;\n  border-radius: 50%; animation: aa-tbl-spin .6s linear infinite;\n}\n@keyframes aa-tbl-spin { to { transform: rotate(360deg); } }\n","jsx":"import React, { useState, useMemo } from 'react';\nimport './Table.css';\n\n/**\n * Aurora Admin Table（React）\n * 对齐 table.json 契约：\n *  - feature: sortable / selectable / batch-actions（含全选）\n *  - state:   hover / selected / loading / empty\n *  - 表头/行高48px、分割线 #E8ECF1、悬停 #F5F7FA、选中 #F0F5FF、单元格左右16px、数字右对齐、操作列右对齐\n *\n * columns: [{ key, title, align?:'left'|'right', sortable?, width?, fixed?, type?:'action' }]\n * 受控选择：selectedKeys={keys} onSelectionChange={setKeys}\n * 操作列：renderAction={(row, index) => <Buttons/>}\n */\nfunction sortData(data, key, order) {\n  if (!key) return data;\n  const dir = order === 'asc' ? 1 : -1;\n  return [...data].sort((a, b) => {\n    const av = a[key], bv = b[key];\n    if (typeof av === 'number' && typeof bv === 'number') return (av - bv) * dir;\n    return String(av).localeCompare(String(bv), 'zh') * dir;\n  });\n}\n\nexport default function Table({\n  columns = [],\n  data = [],\n  rowKey = 'id',\n  selectable = false,\n  selectedKeys = [],\n  loading = false,\n  emptyText = '暂无数据',\n  onSelectionChange,\n  onSortChange,\n  renderAction\n}) {\n  const [sortKey, setSortKey] = useState(null);\n  const [sortOrder, setSortOrder] = useState(null);   // asc | desc | null\n\n  const sortedData = useMemo(\n    () => sortData(data, sortKey, sortOrder),\n    [data, sortKey, sortOrder]\n  );\n\n  const allSelected = data.length > 0 && selectedKeys.length === data.length;\n  const someSelected = selectedKeys.length > 0 && selectedKeys.length < data.length;\n\n  const isSelected = (id) => selectedKeys.includes(id);\n  const emitSelection = (next) => onSelectionChange && onSelectionChange(next);\n\n  const toggleRow = (id) => {\n    const next = isSelected(id) ? selectedKeys.filter((x) => x !== id) : [...selectedKeys, id];\n    emitSelection(next);\n  };\n  const toggleAll = () => {\n    const next = allSelected ? [] : data.map((r) => r[rowKey]);\n    emitSelection(next);\n  };\n  const onSort = (col) => {\n    if (!col.sortable) return;\n    let k = sortKey, o = sortOrder;\n    if (k !== col.key) { k = col.key; o = 'asc'; }\n    else { o = o === 'asc' ? 'desc' : o === 'desc' ? null : 'asc'; if (o === null) k = null; }\n    setSortKey(k); setSortOrder(o);\n    onSortChange && onSortChange({ key: k, order: o });\n  };\n\n  const colCount = columns.length + (selectable ? 1 : 0);\n\n  return (\n    <div className=\"aa-table\">\n      <table>\n        <thead>\n          <tr>\n            {selectable && (\n              <th className=\"col-selection\" style={{ width: 48 }}>\n                <input\n                  type=\"checkbox\" className=\"checkbox\"\n                  checked={allSelected} ref={(el) => el && (el.indeterminate = someSelected)}\n                  onChange={toggleAll}\n                />\n              </th>\n            )}\n            {columns.map((col) => (\n              <th\n                key={col.key || col.title}\n                className={[\n                  col.align === 'right' ? 'align-right' : '',\n                  col.sortable ? 'sortable' : '',\n                  col.fixed ? 'col-fixed' : ''\n                ].filter(Boolean).join(' ')}\n                style={col.width ? { width: col.width } : null}\n                onClick={() => onSort(col)}\n              >\n                {col.title}\n                {col.sortable && (\n                  <span className={`sort-ind${sortKey === col.key ? ' active' : ''}`}>\n                    {sortKey === col.key ? (sortOrder === 'asc' ? '↑' : sortOrder === 'desc' ? '↓' : '↕') : '↕'}\n                  </span>\n                )}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {sortedData.length === 0 ? (\n            <tr><td className=\"empty\" colSpan={colCount}>{emptyText}</td></tr>\n          ) : (\n            sortedData.map((row, index) => (\n              <tr key={row[rowKey]} className={isSelected(row[rowKey]) ? 'is-selected' : ''}>\n                {selectable && (\n                  <td className=\"col-selection\">\n                    <input\n                      type=\"checkbox\" className=\"checkbox\"\n                      checked={isSelected(row[rowKey])} onChange={() => toggleRow(row[rowKey])}\n                    />\n                  </td>\n                )}\n                {columns.map((col) => (\n                  <td\n                    key={col.key || col.title}\n                    className={[\n                      col.align === 'right' ? 'align-right' : '',\n                      col.fixed ? 'col-fixed' : '',\n                      col.type === 'action' ? 'col-action' : ''\n                    ].filter(Boolean).join(' ')}\n                  >\n                    {col.type === 'action' && renderAction ? renderAction(row, index) : row[col.key]}\n                  </td>\n                ))}\n              </tr>\n            ))\n          )}\n        </tbody>\n      </table>\n      {loading && (\n        <div className=\"loading-mask\"><span className=\"spinner\" /></div>\n      )}\n    </div>\n  );\n}\n\n/*\n用法示例：\nimport Table from './Table';\n\nconst columns = [\n  { key: 'name', title: '客户名称' },\n  { key: 'amount', title: '合同金额', align: 'right', sortable: true },\n  { type: 'action', title: '操作' }\n];\n<Table\n  columns={columns}\n  data={rows}\n  selectable\n  selectedKeys={keys}\n  onSelectionChange={setKeys}\n  renderAction={(row) => (<>\n    <button className=\"link-btn\" onClick={() => edit(row)}>编辑</button>\n    <button className=\"link-btn danger\" onClick={() => del(row)}>删除</button>\n  </>)}\n/>\n*/\n","vue2":"<template>\n  <div class=\"aa-table\">\n    <table>\n      <thead>\n        <tr>\n          <th v-if=\"selectable\" class=\"col-selection\" style=\"width:48px\">\n            <input\n              type=\"checkbox\" class=\"checkbox\"\n              :checked=\"allSelected\"\n              v-indeterminate=\"someSelected\"\n              @change=\"toggleAll\"\n            >\n          </th>\n          <th\n            v-for=\"col in columns\" :key=\"col.key || col.title\"\n            :class=\"[{ 'align-right': col.align === 'right' }, { 'sortable': col.sortable }, col.fixed ? 'col-fixed' : '']\"\n            :style=\"col.width ? { width: col.width + 'px' } : null\"\n            @click=\"onSort(col)\"\n          >\n            {{ col.title }}\n            <span v-if=\"col.sortable\" class=\"sort-ind\" :class=\"{ active: sortKey === col.key }\">\n              {{ sortKey === col.key ? (sortOrder === 'asc' ? '↑' : sortOrder === 'desc' ? '↓' : '↕') : '↕' }}\n            </span>\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr v-if=\"!sortedData.length\">\n          <td class=\"empty\" :colspan=\"colCount\">{{ emptyText }}</td>\n        </tr>\n        <tr\n          v-for=\"(row, index) in sortedData\" :key=\"row[rowKey]\"\n          :class=\"{ 'is-selected': isSelected(row[rowKey]) }\"\n        >\n          <td v-if=\"selectable\" class=\"col-selection\">\n            <input type=\"checkbox\" class=\"checkbox\" :checked=\"isSelected(row[rowKey])\" @change=\"toggleRow(row[rowKey])\">\n          </td>\n          <td\n            v-for=\"col in columns\" :key=\"col.key || col.title\"\n            :class=\"[{ 'align-right': col.align === 'right' }, col.fixed ? 'col-fixed' : '', col.type === 'action' ? 'col-action' : '']\"\n          >\n            <slot v-if=\"col.type === 'action'\" name=\"action\" :row=\"row\" :index=\"index\"></slot>\n            <template v-else>{{ row[col.key] }}</template>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n    <div v-if=\"loading\" class=\"loading-mask\"><span class=\"spinner\"></span></div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaTable',\n  directives: {\n    indeterminate(el, binding) { el.indeterminate = !!binding.value; }\n  },\n  props: {\n    columns: { type: Array, required: true },   // [{ key, title, align, sortable, width, fixed, type }]\n    data: { type: Array, default: () => [] },\n    rowKey: { type: String, default: 'id' },\n    selectable: { type: Boolean, default: false },\n    selectedKeys: { type: Array, default: () => [] },\n    loading: { type: Boolean, default: false },\n    emptyText: { type: String, default: '暂无数据' }\n  },\n  data() {\n    return { sortKey: null, sortOrder: null };   // order: asc | desc | null\n  },\n  computed: {\n    colCount() {\n      return this.columns.length + (this.selectable ? 1 : 0);\n    },\n    allSelected() {\n      return this.data.length > 0 && this.selectedKeys.length === this.data.length;\n    },\n    someSelected() {\n      return this.selectedKeys.length > 0 && this.selectedKeys.length < this.data.length;\n    },\n    sortedData() {\n      if (!this.sortKey) return this.data;\n      const k = this.sortKey;\n      const dir = this.sortOrder === 'asc' ? 1 : -1;\n      return [...this.data].sort((a, b) => {\n        const av = a[k], bv = b[k];\n        if (typeof av === 'number' && typeof bv === 'number') return (av - bv) * dir;\n        return String(av).localeCompare(String(bv), 'zh') * dir;\n      });\n    }\n  },\n  methods: {\n    isSelected(id) { return this.selectedKeys.includes(id); },\n    toggleRow(id) {\n      const next = this.isSelected(id)\n        ? this.selectedKeys.filter(x => x !== id)\n        : [...this.selectedKeys, id];\n      this.$emit('update:selectedKeys', next);\n      this.$emit('selection-change', next);\n    },\n    toggleAll() {\n      const next = this.allSelected ? [] : this.data.map(r => r[this.rowKey]);\n      this.$emit('update:selectedKeys', next);\n      this.$emit('selection-change', next);\n    },\n    onSort(col) {\n      if (!col.sortable) return;\n      if (this.sortKey !== col.key) {\n        this.sortKey = col.key; this.sortOrder = 'asc';\n      } else {\n        this.sortOrder = this.sortOrder === 'asc' ? 'desc' : this.sortOrder === 'desc' ? null : 'asc';\n        if (this.sortOrder === null) this.sortKey = null;\n      }\n      this.$emit('sort-change', { key: this.sortKey, order: this.sortOrder });\n    }\n  }\n};\n</script>\n\n<!-- 样式对齐 components.css 与 table.json 契约 -->\n<style>\n.aa-table { width: 100%; border: 1px solid #E8ECF1; border-radius: 8px; overflow: hidden; background: #fff; position: relative; }\n.aa-table table { width: 100%; border-collapse: collapse; font-size: 14px; color: #262626; }\n.aa-table thead th {\n  background: #FAFAFA; color: #262626; font-weight: 600; height: 48px; text-align: left;\n  padding: 0 16px; border-bottom: 1px solid #E8ECF1; white-space: nowrap;\n}\n.aa-table tbody td { height: 48px; padding: 0 16px; border-bottom: 1px solid #E8ECF1; text-align: left; }\n.aa-table tbody tr:last-child td { border-bottom: none; }\n.aa-table tbody tr:hover { background: #F5F7FA; }\n.aa-table tbody tr.is-selected { background: #F0F5FF; }\n.aa-table .align-right { text-align: right; }\n.aa-table .sortable { cursor: pointer; user-select: none; }\n.aa-table .sort-ind { color: #767676; margin-left: 4px; }\n.aa-table .sort-ind.active { color: #2F54EB; }\n.aa-table .col-action { text-align: right; }\n.aa-table .col-selection { text-align: center; }\n.aa-table .checkbox { width: 16px; height: 16px; cursor: pointer; vertical-align: middle; }\n.aa-table .empty { padding: 48px 16px; text-align: center; color: #767676; font-size: 14px; }\n.aa-table .loading-mask {\n  position: absolute; inset: 0; background: rgba(255,255,255,0.7); display: flex;\n  align-items: center; justify-content: center; z-index: 2;\n}\n.aa-table .spinner {\n  width: 20px; height: 20px; border: 2px solid #2F54EB; border-top-color: transparent;\n  border-radius: 50%; animation: aa-tbl-spin .6s linear infinite;\n}\n@keyframes aa-tbl-spin { to { transform: rotate(360deg); } }\n</style>\n","vue3":"<template>\n  <div class=\"aa-table\">\n    <table>\n      <thead>\n        <tr>\n          <th v-if=\"selectable\" class=\"col-selection\" style=\"width:48px\">\n            <input\n              type=\"checkbox\" class=\"checkbox\"\n              :checked=\"allSelected\"\n              :indeterminate.prop=\"someSelected\"\n              @change=\"toggleAll\"\n            >\n          </th>\n          <th\n            v-for=\"col in columns\" :key=\"col.key || col.title\"\n            :class=\"[{ 'align-right': col.align === 'right' }, { 'sortable': col.sortable }, col.fixed ? 'col-fixed' : '']\"\n            :style=\"col.width ? { width: col.width + 'px' } : null\"\n            @click=\"onSort(col)\"\n          >\n            {{ col.title }}\n            <span v-if=\"col.sortable\" class=\"sort-ind\" :class=\"{ active: sortKey === col.key }\">\n              {{ sortKey === col.key ? (sortOrder === 'asc' ? '↑' : sortOrder === 'desc' ? '↓' : '↕') : '↕' }}\n            </span>\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr v-if=\"!sortedData.length\">\n          <td class=\"empty\" :colspan=\"colCount\">{{ emptyText }}</td>\n        </tr>\n        <tr\n          v-for=\"(row, index) in sortedData\" :key=\"row[rowKey]\"\n          :class=\"{ 'is-selected': isSelected(row[rowKey]) }\"\n        >\n          <td v-if=\"selectable\" class=\"col-selection\">\n            <input type=\"checkbox\" class=\"checkbox\" :checked=\"isSelected(row[rowKey])\" @change=\"toggleRow(row[rowKey])\">\n          </td>\n          <td\n            v-for=\"col in columns\" :key=\"col.key || col.title\"\n            :class=\"[{ 'align-right': col.align === 'right' }, col.fixed ? 'col-fixed' : '', col.type === 'action' ? 'col-action' : '']\"\n          >\n            <slot v-if=\"col.type === 'action'\" name=\"action\" :row=\"row\" :index=\"index\"></slot>\n            <template v-else>{{ row[col.key] }}</template>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n    <div v-if=\"loading\" class=\"loading-mask\"><span class=\"spinner\"></span></div>\n  </div>\n</template>\n\n<script setup>\nimport { computed, ref } from 'vue';\n\nconst props = defineProps({\n  columns: { type: Array, required: true },          // [{ key, title, align, sortable, width, fixed, type }]\n  data: { type: Array, default: () => [] },\n  rowKey: { type: String, default: 'id' },\n  selectable: { type: Boolean, default: false },\n  selectedKeys: { type: Array, default: () => [] },   // v-model:selectedKeys\n  loading: { type: Boolean, default: false },\n  emptyText: { type: String, default: '暂无数据' }\n});\n\nconst emit = defineEmits(['update:selectedKeys', 'selection-change', 'sort-change']);\n\nconst sortKey = ref(null);\nconst sortOrder = ref(null);   // asc | desc | null\n\nconst colCount = computed(() => props.columns.length + (props.selectable ? 1 : 0));\nconst allSelected = computed(() => props.data.length > 0 && props.selectedKeys.length === props.data.length);\nconst someSelected = computed(() => props.selectedKeys.length > 0 && props.selectedKeys.length < props.data.length);\n\nconst sortedData = computed(() => {\n  if (!sortKey.value) return props.data;\n  const k = sortKey.value;\n  const dir = sortOrder.value === 'asc' ? 1 : -1;\n  return [...props.data].sort((a, b) => {\n    const av = a[k], bv = b[k];\n    if (typeof av === 'number' && typeof bv === 'number') return (av - bv) * dir;\n    return String(av).localeCompare(String(bv), 'zh') * dir;\n  });\n});\n\nfunction isSelected(id) { return props.selectedKeys.includes(id); }\nfunction toggleRow(id) {\n  const next = isSelected(id)\n    ? props.selectedKeys.filter(x => x !== id)\n    : [...props.selectedKeys, id];\n  emit('update:selectedKeys', next);\n  emit('selection-change', next);\n}\nfunction toggleAll() {\n  const next = allSelected.value ? [] : props.data.map(r => r[props.rowKey]);\n  emit('update:selectedKeys', next);\n  emit('selection-change', next);\n}\nfunction onSort(col) {\n  if (!col.sortable) return;\n  if (sortKey.value !== col.key) {\n    sortKey.value = col.key; sortOrder.value = 'asc';\n  } else {\n    sortOrder.value = sortOrder.value === 'asc' ? 'desc' : sortOrder.value === 'desc' ? null : 'asc';\n    if (sortOrder.value === null) sortKey.value = null;\n  }\n  emit('sort-change', { key: sortKey.value, order: sortOrder.value });\n}\n</script>\n\n<!-- 样式对齐 components.css 与 table.json 契约 -->\n<style scoped>\n.aa-table { width: 100%; border: 1px solid #E8ECF1; border-radius: 8px; overflow: hidden; background: #fff; position: relative; }\n.aa-table table { width: 100%; border-collapse: collapse; font-size: 14px; color: #262626; }\n.aa-table thead th {\n  background: #FAFAFA; color: #262626; font-weight: 600; height: 48px; text-align: left;\n  padding: 0 16px; border-bottom: 1px solid #E8ECF1; white-space: nowrap;\n}\n.aa-table tbody td { height: 48px; padding: 0 16px; border-bottom: 1px solid #E8ECF1; text-align: left; }\n.aa-table tbody tr:last-child td { border-bottom: none; }\n.aa-table tbody tr:hover { background: #F5F7FA; }\n.aa-table tbody tr.is-selected { background: #F0F5FF; }\n.aa-table .align-right { text-align: right; }\n.aa-table .sortable { cursor: pointer; user-select: none; }\n.aa-table .sort-ind { color: #767676; margin-left: 4px; }\n.aa-table .sort-ind.active { color: #2F54EB; }\n.aa-table .col-action { text-align: right; }\n.aa-table .col-selection { text-align: center; }\n.aa-table .checkbox { width: 16px; height: 16px; cursor: pointer; vertical-align: middle; }\n.aa-table .empty { padding: 48px 16px; text-align: center; color: #767676; font-size: 14px; }\n.aa-table .loading-mask {\n  position: absolute; inset: 0; background: rgba(255,255,255,0.7); display: flex;\n  align-items: center; justify-content: center; z-index: 2;\n}\n.aa-table .spinner {\n  width: 20px; height: 20px; border: 2px solid #2F54EB; border-top-color: transparent;\n  border-radius: 50%; animation: aa-tbl-spin .6s linear infinite;\n}\n@keyframes aa-tbl-spin { to { transform: rotate(360deg); } }\n</style>\n"}},{"slug":"card","name":"卡片 Card","tier":"core","confidence":"high","specBatch":1,"specFile":"组件1.txt","contractRef":"components/card.json","category":"general","specLines":["- 圆角8px，边框1px #E8ECF1 或低阴影","- 内边距16px/24px","- 结构：标题区、内容区、操作区"],"specSummary":"- 圆角8px，边框1px #E8ECF1 或低阴影","contract":{"variants":["边框卡片","阴影卡片","含标题与操作区"],"dims":[{"name":"style","values":["bordered","shadowed"]},{"name":"padding","values":["16px","24px"]},{"name":"section","values":["title","content","actions"]}],"unknowns":["卡片网格间距规范"],"anatomy":{"container":"卡片容器：圆角8px，边框1px var(--color-border) 或低阴影","titleArea":"标题区：可含标题与右侧操作","contentArea":"内容区","actionArea":"操作区"},"doNot":["卡片 hover 交互规范"],"usage":["圆角8px，边框1px var(--color-border) 或低阴影","内边距16px/24px","结构：标题区、内容区、操作区"],"structure":{"radius":"var(--radius-large)","border":"1px solid var(--color-border)","shadow":"var(--shadow-low)","padding":"16px / 24px"}},"files":{"html":"../frameworks/Card.html","css":"../frameworks/Card.css","jsx":"../frameworks/Card.jsx","vue2":"../frameworks/Card.vue2.vue","vue3":"../frameworks/Card.vue3.vue"},"sizes":{"html":3075,"css":780,"jsx":1337,"vue2":1732,"vue3":1714},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Aurora Admin · Card (H5)</title>\n<link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\">\n<style>\n  /* 对齐 components.css 与 card.json 契约 */\n  .demo { padding: 24px; background: var(--au-color-page-bg); color: var(--au-color-text-body); font-family: var(--font-family); }\n  h1 { font-size: 20px; margin: 0 0 4px; }\n  .sub { color: var(--au-color-text-secondary); margin: 0 0 24px; font-size: 12px; }\n  .row { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }\n\n  .aa-card {\n    background: var(--au-color-card-bg); border-radius: 8px; box-sizing: border-box;\n    min-width: 280px; max-width: 360px;\n  }\n  .aa-card--bordered { border: 1px solid var(--au-color-border); }\n  .aa-card--shadowed { box-shadow: 0 1px 4px rgba(0,0,0,0.06); }\n  .aa-card__header {\n    display: flex; align-items: center; justify-content: space-between; gap: 8px;\n    font-weight: 600; color: var(--au-color-text-title);\n  }\n  .aa-card__title { font-size: 16px; }\n  .aa-card__extra { color: var(--au-color-brand); font-size: 14px; cursor: pointer; }\n  .aa-card__body { color: var(--au-color-text-body); font-size: 14px; line-height: 22px; }\n  .aa-card__actions { display: flex; justify-content: flex-end; gap: 8px; }\n</style>\n</head>\n<body>\n<div class=\"demo\">\n  <h1>Aurora Admin · Card 组件（纯 H5）</h1>\n  <p class=\"sub\">对齐 card.json 契约：圆角8px、边框1px / 低阴影、内边距16/24px、结构含标题区/内容区/操作区</p>\n\n  <div class=\"row\">\n    <div class=\"aa-card aa-card--bordered\" style=\"padding:16px\">\n      <div class=\"aa-card__header\"><div class=\"aa-card__title\">边框卡片</div></div>\n      <div class=\"aa-card__body\" style=\"margin-top:12px\">用于轻量内容承载，1px 边框区分卡片边界。</div>\n    </div>\n\n    <div class=\"aa-card aa-card--shadowed\" style=\"padding:24px\">\n      <div class=\"aa-card__header\"><div class=\"aa-card__title\">阴影卡片</div></div>\n      <div class=\"aa-card__body\" style=\"margin-top:12px\">通过低阴影表现层级浮起，适合突出展示类内容。</div>\n    </div>\n\n    <div class=\"aa-card aa-card--bordered\" style=\"padding:24px\">\n      <div class=\"aa-card__header\">\n        <div class=\"aa-card__title\">客户详情</div>\n        <div class=\"aa-card__extra\" role=\"button\" tabindex=\"0\">查看全部</div>\n      </div>\n      <div class=\"aa-card__body\" style=\"margin-top:12px\">含标题区与右侧操作区，内容区展示客户关键信息。</div>\n      <div class=\"aa-card__actions\" style=\"margin-top:16px\">\n        <button style=\"border:1px solid var(--color-border);background:var(--color-bg-card);border-radius:4px;padding:4px 12px;cursor:pointer;color:var(--color-text-body)\">取消</button>\n        <button style=\"background:var(--color-brand);border:none;border-radius:4px;padding:4px 12px;cursor:pointer;color:var(--color-bg-card)\">确定</button>\n      </div>\n    </div>\n  </div>\n</div>\n</body>\n</html>\n","css":"/* Aurora Admin Card 样式 — 对齐 components.css 与 card.json 契约 */\n.aa-card {\n  background: var(--au-color-card-bg); border-radius: 8px; box-sizing: border-box;\n  min-width: 280px; max-width: 360px;\n}\n.aa-card--bordered { border: 1px solid var(--au-color-border); }\n.aa-card--shadowed { box-shadow: 0 1px 4px rgba(0,0,0,0.06); }\n.aa-card__header {\n  display: flex; align-items: center; justify-content: space-between; gap: 8px;\n  font-weight: 600; color: var(--au-color-text-title);\n}\n.aa-card__title { font-size: 16px; }\n.aa-card__extra { color: var(--au-color-brand); font-size: 14px; cursor: pointer; }\n.aa-card__body { color: var(--au-color-text-body); font-size: 14px; line-height: 22px; }\n.aa-card__actions { display: flex; justify-content: flex-end; gap: 8px; }\n","jsx":"import React from 'react';\nimport './Card.css';\n\n/**\n * Aurora Admin Card（React）\n * 对齐 card.json 契约：\n *  - style:   bordered | shadowed\n *  - padding: 16 | 24\n *  - section: title（含右侧 extra）/ content / actions\n */\nexport default function Card({\n  title = '',\n  bordered = false,\n  shadowed = false,\n  padding = 16,\n  className = '',\n  children,\n  extra,\n  actions\n}) {\n  const paddingPx = typeof padding === 'number' ? `${padding}px` : padding;\n  const classes = [\n    'aa-card',\n    bordered ? 'aa-card--bordered' : '',\n    shadowed ? 'aa-card--shadowed' : '',\n    className\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div className={classes} style={{ padding: paddingPx }}>\n      {(title || extra) && (\n        <div className=\"aa-card__header\">\n          <div className=\"aa-card__title\">{title}</div>\n          {extra && <div className=\"aa-card__extra\">{extra}</div>}\n        </div>\n      )}\n      <div className=\"aa-card__body\">{children}</div>\n      {actions && <div className=\"aa-card__actions\">{actions}</div>}\n    </div>\n  );\n}\n\n/*\n用法示例：\nimport Card from './Card';\n\n<Card title=\"客户详情\" extra={<a>查看全部</a>} shadowed padding={24}>\n  内容区...\n</Card>\n<Card title=\"操作卡片\" bordered actions={<><button>取消</button><button>确定</button></>}>\n  内容区...\n</Card>\n*/\n","vue2":"<template>\n  <div class=\"aa-card\" :class=\"classes\" :style=\"{ padding: paddingPx }\">\n    <div v-if=\"title || $slots.extra\" class=\"aa-card__header\">\n      <div class=\"aa-card__title\">\n        <slot name=\"title\">{{ title }}</slot>\n      </div>\n      <div v-if=\"$slots.extra\" class=\"aa-card__extra\"><slot name=\"extra\" /></div>\n    </div>\n    <div class=\"aa-card__body\"><slot /></div>\n    <div v-if=\"$slots.actions\" class=\"aa-card__actions\"><slot name=\"actions\" /></div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaCard',\n  props: {\n    title: { type: String, default: '' },\n    bordered: { type: Boolean, default: false },\n    shadowed: { type: Boolean, default: false },\n    padding: { type: [Number, String], default: 16 }   // 16 | 24\n  },\n  computed: {\n    classes() {\n      return [\n        this.bordered ? 'aa-card--bordered' : '',\n        this.shadowed ? 'aa-card--shadowed' : ''\n      ];\n    },\n    paddingPx() {\n      return typeof this.padding === 'number' ? `${this.padding}px` : this.padding;\n    }\n  }\n};\n</script>\n\n<!-- 样式对齐 components.css 与 card.json 契约 -->\n<style>\n.aa-card {\n  background: #fff; border-radius: 8px; box-sizing: border-box;\n  min-width: 280px; max-width: 360px;\n}\n.aa-card--bordered { border: 1px solid #E8ECF1; }\n.aa-card--shadowed { box-shadow: 0 1px 4px rgba(0,0,0,0.06); }\n.aa-card__header {\n  display: flex; align-items: center; justify-content: space-between; gap: 8px;\n  font-weight: 600; color: #1F2329;\n}\n.aa-card__title { font-size: 16px; }\n.aa-card__extra { color: #2F54EB; font-size: 14px; cursor: pointer; }\n.aa-card__body { color: #262626; font-size: 14px; line-height: 22px; }\n.aa-card__actions { display: flex; justify-content: flex-end; gap: 8px; }\n</style>\n","vue3":"<template>\n  <div class=\"aa-card\" :class=\"classes\" :style=\"{ padding: paddingPx }\">\n    <div v-if=\"title || $slots.extra\" class=\"aa-card__header\">\n      <div class=\"aa-card__title\">\n        <slot name=\"title\">{{ title }}</slot>\n      </div>\n      <div v-if=\"$slots.extra\" class=\"aa-card__extra\"><slot name=\"extra\" /></div>\n    </div>\n    <div class=\"aa-card__body\"><slot /></div>\n    <div v-if=\"$slots.actions\" class=\"aa-card__actions\"><slot name=\"actions\" /></div>\n  </div>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\n\nconst props = defineProps({\n  title: { type: String, default: '' },\n  bordered: { type: Boolean, default: false },\n  shadowed: { type: Boolean, default: false },\n  padding: { type: [Number, String], default: 16 }   // 16 | 24\n});\n\nconst classes = computed(() => [\n  props.bordered ? 'aa-card--bordered' : '',\n  props.shadowed ? 'aa-card--shadowed' : ''\n]);\nconst paddingPx = computed(() =>\n  typeof props.padding === 'number' ? `${props.padding}px` : props.padding\n);\n</script>\n\n<!-- 样式对齐 components.css 与 card.json 契约 -->\n<style scoped>\n.aa-card {\n  background: #fff; border-radius: 8px; box-sizing: border-box;\n  min-width: 280px; max-width: 360px;\n}\n.aa-card--bordered { border: 1px solid #E8ECF1; }\n.aa-card--shadowed { box-shadow: 0 1px 4px rgba(0,0,0,0.06); }\n.aa-card__header {\n  display: flex; align-items: center; justify-content: space-between; gap: 8px;\n  font-weight: 600; color: #1F2329;\n}\n.aa-card__title { font-size: 16px; }\n.aa-card__extra { color: #2F54EB; font-size: 14px; cursor: pointer; }\n.aa-card__body { color: #262626; font-size: 14px; line-height: 22px; }\n.aa-card__actions { display: flex; justify-content: flex-end; gap: 8px; }\n</style>\n"}},{"slug":"modal","name":"对话框 Modal","tier":"core","confidence":"high","specBatch":1,"specFile":"组件1.txt","contractRef":"components/modal.json","category":"feedback","specLines":["- 宽度480px(默认)/680px(大)/320px(小)","- 圆角8px，遮罩rgba(0,0,0,0.45)","- 结构：标题、内容、右下角操作按钮（次按钮+主按钮）"],"specSummary":"- 宽度480px(默认)/680px(大)/320px(小)","contract":{"variants":["默认对话框","大对话框","小对话框"],"dims":[{"name":"size","values":["small","default","large"]},{"name":"state","values":["closed","open"]}],"unknowns":["抽屉 Drawer 与 Modal 的共用规范"],"anatomy":{"mask":"遮罩 rgba(0,0,0,0.45)","container":"对话框容器：圆角8px，阴影高","title":"标题区","content":"内容区","footer":"右下角操作按钮（次按钮+主按钮）"},"doNot":["对话框动画规范"],"usage":["宽度480px(默认)/680px(大)/320px(小)","圆角8px，遮罩 rgba(0,0,0,0.45)","结构：标题、内容、右下角操作按钮（次按钮+主按钮）"],"structure":{"width":"@{small=320px; default=480px; large=680px}","radius":"var(--radius-large)","mask":"rgba(0,0,0,0.45)"}},"files":{"html":"../frameworks/modal.html","css":"../frameworks/Modal.css","jsx":"../frameworks/Modal.jsx","vue2":"../frameworks/Modal.vue2.vue","vue3":"../frameworks/Modal.vue3.vue"},"sizes":{"html":3632,"css":1466,"jsx":1849,"vue2":2706,"vue3":2645},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Aurora Admin · Modal (H5)</title>\n<link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\">\n<style>\n  /* 对齐 components.css 与 modal.json 契约 */\n  .demo { padding: 24px; background: var(--au-color-page-bg); color: var(--au-color-text-body); font-family: var(--font-family); }\n  h1 { font-size: 20px; margin: 0 0 4px; }\n  .sub { color: var(--au-color-text-secondary); margin: 0 0 24px; font-size: 12px; }\n\n  .aa-mask {\n    position: fixed; inset: 0; background: rgba(0,0,0,0.45);\n    display: flex; align-items: center; justify-content: center; z-index: 1000;\n  }\n  .aa-modal {\n    background: var(--au-color-card-bg); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);\n    display: flex; flex-direction: column; max-width: 90vw;\n  }\n  .aa-modal--small { width: 320px; }\n  .aa-modal--default { width: 480px; }\n  .aa-modal--large { width: 680px; }\n  .aa-modal__header {\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 16px 24px; font-size: 16px; font-weight: 600; color: var(--au-color-text-title);\n  }\n  .aa-modal__close { border: none; background: none; cursor: pointer; color: var(--au-color-text-secondary); font-size: 16px; line-height: 1; }\n  .aa-modal__close:hover { color: var(--au-color-text-body); }\n  .aa-modal__body { padding: 0 24px 24px; color: var(--au-color-text-body); font-size: 14px; line-height: 22px; }\n  .aa-modal__footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 24px 16px; }\n  .btn-base { border-radius: 4px; padding: 4px 16px; height: 32px; cursor: pointer; font-size: 14px; }\n  .btn-ghost { border: 1px solid var(--au-color-border); background: var(--au-color-card-bg); color: var(--au-color-text-body); }\n  .btn-primary { border: 1px solid var(--au-color-brand); background: var(--au-color-brand); color: var(--au-color-text-inverse); }\n</style>\n</head>\n<body>\n<div class=\"demo\">\n  <h1>Aurora Admin · Modal 组件（纯 H5）</h1>\n  <p class=\"sub\">对齐 modal.json 契约：宽度480(默认)/680(大)/320(小)，圆角8px，遮罩 rgba(0,0,0,0.45)，右下角操作按钮</p>\n\n  <button class=\"btn-base btn-primary\" onclick=\"openModal('default')\">打开默认对话框</button>\n  <button class=\"btn-base btn-ghost\" onclick=\"openModal('large')\" style=\"margin-left:8px\">打开大对话框</button>\n  <button class=\"btn-base btn-ghost\" onclick=\"openModal('small')\" style=\"margin-left:8px\">打开小对话框</button>\n</div>\n\n<div id=\"mount\"></div>\n\n<script>\nfunction openModal(size) {\n  const mount = document.getElementById('mount');\n  mount.innerHTML = `\n    <div class=\"aa-mask\" data-mask>\n      <div class=\"aa-modal aa-modal--${size}\" role=\"dialog\">\n        <div class=\"aa-modal__header\">\n          <span>提示</span>\n          <button class=\"aa-modal__close\" data-close aria-label=\"关闭\">✕</button>\n        </div>\n        <div class=\"aa-modal__body\">\n          这是 ${size === 'small' ? '小' : size === 'large' ? '大' : '默认'} 尺寸对话框的内容区，可放置表单或说明文字。\n        </div>\n        <div class=\"aa-modal__footer\">\n          <button class=\"btn-base btn-ghost\" data-close>取消</button>\n          <button class=\"btn-base btn-primary\" data-close>确定</button>\n        </div>\n      </div>\n    </div>`;\n  const mask = mount.querySelector('[data-mask]');\n  mask.addEventListener('click', (e) => { if (e.target === mask || e.target.hasAttribute('data-close')) mount.innerHTML = ''; });\n}\n</script>\n</body>\n</html>\n","css":"/* Aurora Admin Modal 样式 — 对齐 components.css 与 modal.json 契约 */\n.aa-mask {\n  position: fixed; inset: 0; background: rgba(0,0,0,0.45);\n  display: flex; align-items: center; justify-content: center; z-index: 1000;\n}\n.aa-modal {\n  background: var(--au-color-card-bg); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);\n  display: flex; flex-direction: column; max-width: 90vw;\n}\n.aa-modal--small { width: 320px; }\n.aa-modal--default { width: 480px; }\n.aa-modal--large { width: 680px; }\n.aa-modal__header {\n  display: flex; align-items: center; justify-content: space-between;\n  padding: 16px 24px; font-size: 16px; font-weight: 600; color: var(--au-color-text-title);\n}\n.aa-modal__close { border: none; background: none; cursor: pointer; color: var(--au-color-text-secondary); font-size: 16px; line-height: 1; }\n.aa-modal__close:hover { color: var(--au-color-text-body); }\n.aa-modal__body { padding: 0 24px 24px; color: var(--au-color-text-body); font-size: 14px; line-height: 22px; }\n.aa-modal__footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 24px 16px; }\n.btn-base { border-radius: 4px; padding: 4px 16px; height: 32px; cursor: pointer; font-size: 14px; }\n.btn-ghost { border: 1px solid var(--au-color-border); background: var(--au-color-card-bg); color: var(--au-color-text-body); }\n.btn-primary { border: 1px solid var(--au-color-brand); background: var(--au-color-brand); color: var(--au-color-text-inverse); }\n","jsx":"import React from 'react';\nimport './Modal.css';\n\n/**\n * Aurora Admin Modal（React）\n * 对齐 modal.json 契约：\n *  - size:   small(320) | default(480) | large(680)\n *  - 遮罩 rgba(0,0,0,0.45)，圆角8px，右下角操作按钮（次+主）\n * 受控：<Modal open={open} onClose={setOpen} onOk={...} />\n */\nexport default function Modal({\n  open = false,\n  title = '',\n  size = 'default',                // small | default | large\n  closable = true,\n  maskClosable = true,\n  hideFooter = false,\n  cancelText = '取消',\n  okText = '确定',\n  onClose,\n  onOk,\n  footer,\n  children\n}) {\n  if (!open) return null;\n\n  const handleMask = (e) => {\n    if (maskClosable && e.target === e.currentTarget) onClose && onClose();\n  };\n\n  return (\n    <div className=\"aa-mask\" onClick={handleMask}>\n      <div className={`aa-modal aa-modal--${size}`} role=\"dialog\" onClick={(e) => e.stopPropagation()}>\n        <div className=\"aa-modal__header\">\n          <span>{title}</span>\n          {closable && (\n            <button className=\"aa-modal__close\" aria-label=\"关闭\" onClick={() => onClose && onClose()}>✕</button>\n          )}\n        </div>\n        <div className=\"aa-modal__body\">{children}</div>\n        {!hideFooter && (\n          <div className=\"aa-modal__footer\">\n            {footer || (\n              <>\n                <button className=\"btn-base btn-ghost\" onClick={() => onClose && onClose()}>{cancelText}</button>\n                <button className=\"btn-base btn-primary\" onClick={() => onOk && onOk()}>{okText}</button>\n              </>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\n/*\n用法示例：\nimport Modal from './Modal';\nconst [open, setOpen] = useState(false);\n\n<Modal open={open} title=\"提示\" size=\"default\" onClose={() => setOpen(false)} onOk={handleOk}>\n  对话框内容...\n</Modal>\n*/\n","vue2":"<template>\n  <div v-if=\"visible\" class=\"aa-mask\" @click.self=\"onMaskClick\">\n    <div class=\"aa-modal\" :class=\"`aa-modal--${size}`\" role=\"dialog\">\n      <div class=\"aa-modal__header\">\n        <slot name=\"title\">{{ title }}</slot>\n        <button v-if=\"closable\" class=\"aa-modal__close\" aria-label=\"关闭\" @click=\"close\">✕</button>\n      </div>\n      <div class=\"aa-modal__body\"><slot /></div>\n      <div v-if=\"!hideFooter\" class=\"aa-modal__footer\">\n        <slot name=\"footer\">\n          <button class=\"btn-base btn-ghost\" @click=\"close\">{{ cancelText }}</button>\n          <button class=\"btn-base btn-primary\" @click=\"$emit('ok')\">{{ okText }}</button>\n        </slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaModal',\n  props: {\n    visible: { type: Boolean, default: false },     // v-model 用 value（此处显式 visible）\n    title: { type: String, default: '' },\n    size: { type: String, default: 'default', validator: v => ['small', 'default', 'large'].includes(v) },\n    closable: { type: Boolean, default: true },\n    maskClosable: { type: Boolean, default: true },\n    hideFooter: { type: Boolean, default: false },\n    cancelText: { type: String, default: '取消' },\n    okText: { type: String, default: '确定' }\n  },\n  methods: {\n    close() { this.$emit('update:visible', false); this.$emit('cancel'); },\n    onMaskClick() { if (this.maskClosable) this.close(); }\n  }\n};\n</script>\n\n<!-- 样式对齐 components.css 与 modal.json 契约 -->\n<style>\n.aa-mask {\n  position: fixed; inset: 0; background: rgba(0,0,0,0.45);\n  display: flex; align-items: center; justify-content: center; z-index: 1000;\n}\n.aa-modal {\n  background: #fff; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);\n  display: flex; flex-direction: column; max-width: 90vw;\n}\n.aa-modal--small { width: 320px; }\n.aa-modal--default { width: 480px; }\n.aa-modal--large { width: 680px; }\n.aa-modal__header {\n  display: flex; align-items: center; justify-content: space-between;\n  padding: 16px 24px; font-size: 16px; font-weight: 600; color: #1F2329;\n}\n.aa-modal__close { border: none; background: none; cursor: pointer; color: #6E6E6E; font-size: 16px; line-height: 1; }\n.aa-modal__close:hover { color: #262626; }\n.aa-modal__body { padding: 0 24px 24px; color: #262626; font-size: 14px; line-height: 22px; }\n.aa-modal__footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 24px 16px; }\n.btn-base { border-radius: 4px; padding: 4px 16px; height: 32px; cursor: pointer; font-size: 14px; }\n.btn-ghost { border: 1px solid #E8ECF1; background: #fff; color: #262626; }\n.btn-primary { border: 1px solid #2F54EB; background: #2F54EB; color: #fff; }\n</style>\n","vue3":"<template>\n  <div v-if=\"visible\" class=\"aa-mask\" @click.self=\"onMaskClick\">\n    <div class=\"aa-modal\" :class=\"`aa-modal--${size}`\" role=\"dialog\">\n      <div class=\"aa-modal__header\">\n        <slot name=\"title\">{{ title }}</slot>\n        <button v-if=\"closable\" class=\"aa-modal__close\" aria-label=\"关闭\" @click=\"close\">✕</button>\n      </div>\n      <div class=\"aa-modal__body\"><slot /></div>\n      <div v-if=\"!hideFooter\" class=\"aa-modal__footer\">\n        <slot name=\"footer\">\n          <button class=\"btn-base btn-ghost\" @click=\"close\">{{ cancelText }}</button>\n          <button class=\"btn-base btn-primary\" @click=\"$emit('ok')\">{{ okText }}</button>\n        </slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nconst props = defineProps({\n  visible: { type: Boolean, default: false },\n  title: { type: String, default: '' },\n  size: { type: String, default: 'default' },          // small | default | large\n  closable: { type: Boolean, default: true },\n  maskClosable: { type: Boolean, default: true },\n  hideFooter: { type: Boolean, default: false },\n  cancelText: { type: String, default: '取消' },\n  okText: { type: String, default: '确定' }\n});\nconst emit = defineEmits(['update:visible', 'cancel', 'ok']);\n\nfunction close() { emit('update:visible', false); emit('cancel'); }\nfunction onMaskClick() { if (props.maskClosable) close(); }\n</script>\n\n<!-- 样式对齐 components.css 与 modal.json 契约 -->\n<style scoped>\n.aa-mask {\n  position: fixed; inset: 0; background: rgba(0,0,0,0.45);\n  display: flex; align-items: center; justify-content: center; z-index: 1000;\n}\n.aa-modal {\n  background: #fff; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);\n  display: flex; flex-direction: column; max-width: 90vw;\n}\n.aa-modal--small { width: 320px; }\n.aa-modal--default { width: 480px; }\n.aa-modal--large { width: 680px; }\n.aa-modal__header {\n  display: flex; align-items: center; justify-content: space-between;\n  padding: 16px 24px; font-size: 16px; font-weight: 600; color: #1F2329;\n}\n.aa-modal__close { border: none; background: none; cursor: pointer; color: #6E6E6E; font-size: 16px; line-height: 1; }\n.aa-modal__close:hover { color: #262626; }\n.aa-modal__body { padding: 0 24px 24px; color: #262626; font-size: 14px; line-height: 22px; }\n.aa-modal__footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 24px 16px; }\n.btn-base { border-radius: 4px; padding: 4px 16px; height: 32px; cursor: pointer; font-size: 14px; }\n.btn-ghost { border: 1px solid #E8ECF1; background: #fff; color: #262626; }\n.btn-primary { border: 1px solid #2F54EB; background: #2F54EB; color: #fff; }\n</style>\n"}},{"slug":"tag","name":"标签 Tag","tier":"core","confidence":"high","specBatch":1,"specFile":"组件1.txt","contractRef":"components/tag.json","category":"general","specLines":["- 圆角2px，高度22px，内边距左右8px","- 颜色：浅色背景+深色文字（如蓝#F0F5FF/#2F54EB，绿#F6FFED/#52C41A等）","- 可关闭标签悬停显示关闭按钮"],"specSummary":"- 圆角2px，高度22px，内边距左右8px","contract":{"variants":["主题标签","成功标签","错误标签","可关闭标签","自定义色 + 圆点"],"dims":[{"name":"theme","values":["blue","green","red","orange","gray","custom"]},{"name":"closable","values":["true","false"]},{"name":"dot","values":["true","false"]}],"unknowns":["标签的最大宽度与超长省略方式","自定义色的合法取值边界"],"anatomy":{"container":"标签容器：圆角 2px，高度 22px，内边距左右 8px","text":"浅色背景 + 深色文字配色","close":"关闭按钮：悬停时才显示","dot":"圆点模式：用 currentColor 绘制 6px 圆点"},"doNot":["标签组换行与折叠策略"],"usage":["圆角2px，高度22px，内边距左右8px","颜色：浅色背景+深色文字（如蓝#F0F5FF/#2F54EB，绿#F6FFED/#2E7D0A等）","可关闭标签悬停显示关闭按钮"],"structure":{"radius":"2px","height":"22px","padding":"左右 8px","dotSize":"6px"}},"files":{"html":"../frameworks/Tag.html","css":"../frameworks/Tag.css","jsx":"../frameworks/Tag.jsx","vue2":"../frameworks/Tag.vue2.vue","vue3":"../frameworks/Tag.vue3.vue"},"sizes":{"html":2847,"css":1446,"jsx":1483,"vue2":2400,"vue3":2395},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Aurora Admin · Tag (H5)</title>\n<link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\">\n<link rel=\"stylesheet\" href=\"./Tag.css\">\n<style>\n  .demo { padding: 24px; background: var(--au-color-page-bg); font-family: var(--font-family); }\n  h1 { font-size: 20px; margin: 0 0 4px; color: var(--au-color-text-title); }\n  .sub { color: var(--au-color-text-secondary); margin: 0 0 24px; font-size: 12px; }\n  .demo-block { background: var(--au-color-card-bg); border-radius: 8px; padding: 16px; margin-bottom: 20px; }\n  .demo-block > .hint { color: var(--au-color-text-secondary); font-size: 12px; margin: 0 0 12px; }\n  .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }\n</style>\n</head>\n<body>\n<div class=\"demo\">\n  <h1>Aurora Admin · Tag 组件（纯 H5）</h1>\n  <p class=\"sub\">对齐设计令牌：bg #F0F5FF / color #2F54EB / 圆角 2px / padding 1px 8px</p>\n\n  <div class=\"demo-block\">\n    <p class=\"hint\">预设状态</p>\n    <div class=\"row\">\n      <span class=\"aa-tag\" role=\"status\">品牌标签</span>\n      <span class=\"aa-tag aa-tag-green\" role=\"status\">成功</span>\n      <span class=\"aa-tag aa-tag-red\" role=\"status\">错误</span>\n      <span class=\"aa-tag aa-tag-orange\" role=\"status\">警告</span>\n      <span class=\"aa-tag aa-tag-gray\" role=\"status\">默认</span>\n    </div>\n  </div>\n\n  <div class=\"demo-block\">\n    <p class=\"hint\">带圆点</p>\n    <div class=\"row\">\n      <span class=\"aa-tag aa-tag-dot\">在线</span>\n      <span class=\"aa-tag aa-tag-green aa-tag-dot\">已发布</span>\n      <span class=\"aa-tag aa-tag-red aa-tag-dot\">异常</span>\n    </div>\n  </div>\n\n  <div class=\"demo-block\">\n    <p class=\"hint\">可关闭（点击 × 移除）</p>\n    <div class=\"row\" id=\"tag-list\">\n      <span class=\"aa-tag\" role=\"status\">前端 <i class=\"aa-tag-close\" role=\"button\" aria-label=\"移除\">×</i></span>\n      <span class=\"aa-tag\" role=\"status\">后端 <i class=\"aa-tag-close\" role=\"button\" aria-label=\"移除\">×</i></span>\n      <span class=\"aa-tag aa-tag-green\" role=\"status\">设计 <i class=\"aa-tag-close\" role=\"button\" aria-label=\"移除\">×</i></span>\n    </div>\n  </div>\n\n  <div class=\"demo-block\">\n    <p class=\"hint\">自定义颜色</p>\n    <div class=\"row\">\n      <span class=\"aa-tag aa-tag-custom\" role=\"status\" style=\"--aa-tag-color:#722ED1;--aa-tag-bg:#F9F0FF\">紫色</span>\n      <span class=\"aa-tag aa-tag-custom\" role=\"status\" style=\"--aa-tag-color:#006D75;--aa-tag-bg:#E6FFFB\">青色</span>\n    </div>\n  </div>\n</div>\n\n<script>\ndocument.getElementById('tag-list').addEventListener('click', (e) => {\n  const close = e.target.closest('.aa-tag-close');\n  if (close) close.parentElement.remove();\n});\n</script>\n</body>\n</html>\n","css":"/* Aurora Admin Tag 样式 — 对齐设计令牌：bg #F0F5FF / color #2F54EB / 圆角 2px / padding 1px 8px */\n\n.aa-tag {\n  display: inline-flex; align-items: center; gap: 4px;\n  height: 22px; padding: 1px 8px; box-sizing: border-box;\n  font-size: 12px; line-height: 1; border-radius: 2px;\n  background: var(--au-color-brand-bg); color: var(--au-color-brand); white-space: nowrap;\n  border: 1px solid transparent;\n}\n\n/* 状态预设 */\n.aa-tag.aa-tag-green  { background: var(--au-color-tag-green-bg); color: var(--au-color-success); }\n.aa-tag.aa-tag-red    { background: #FFF1F0; color: var(--au-color-error); }\n.aa-tag.aa-tag-orange { background: #FFF7E6; color: var(--au-color-warning); }\n.aa-tag.aa-tag-gray   { background: var(--au-color-disabled-bg); color: var(--au-color-text-secondary); }\n\n/* 自定义颜色（行内 style 提供 --aa-tag-color / --aa-tag-bg） */\n.aa-tag.aa-tag-custom { background: var(--aa-tag-bg); color: var(--aa-tag-color); }\n\n/* 圆点模式 */\n.aa-tag.aa-tag-dot::before {\n  content: ''; width: 6px; height: 6px; border-radius: 50%;\n  background: currentColor; display: inline-block;\n}\n\n/* 关闭按钮 */\n.aa-tag-close { display: inline-flex; align-items: center; justify-content: center;\n  width: 14px; height: 14px; margin-right: -2px; border-radius: 50%; cursor: pointer;\n  font-size: 11px; line-height: 1; color: inherit; opacity: .65; }\n.aa-tag-close:hover { opacity: 1; background: rgba(0,0,0,0.08); }\n","jsx":"import React from 'react';\nimport './Tag.css';\n\n/**\n * Aurora Admin Tag（React）\n * 对齐设计令牌：bg #F0F5FF / color #2F54EB / 圆角 2px / padding 1px 8px\n *\n * props:\n *  - color   : '' | 'blue' | 'green' | 'red' | 'orange' | 'gray' | 自定义 hex\n *  - dot     : Boolean（圆点模式）\n *  - closable: Boolean\n *  - onClose()\n *  - children: 标签内容\n */\nexport default function Tag({ color = '', dot = false, closable = false, onClose, children }) {\n  const PRESET = ['green', 'red', 'orange', 'gray'];\n  const isCustom = !!color && !PRESET.includes(color) && color !== 'blue';\n\n  const cls = ['aa-tag'];\n  if (dot) cls.push('aa-tag-dot');\n  if (isCustom) cls.push('aa-tag-custom');\n  else if (color && color !== 'blue') cls.push('aa-tag-' + color);\n\n  const style = isCustom ? { '--aa-tag-color': color, '--aa-tag-bg': hexToTint(color) } : undefined;\n\n  return (\n    <span className={cls.join(' ')} style={style}>\n      {children}\n      {closable && (\n        <i className=\"aa-tag-close\" title=\"移除\" onClick={(e) => { e.stopPropagation(); onClose && onClose(); }}>×</i>\n      )}\n    </span>\n  );\n}\n\nfunction hexToTint(hex) {\n  const h = hex.replace('#', '');\n  const r = parseInt(h.slice(0, 2), 16), g = parseInt(h.slice(2, 4), 16), b = parseInt(h.slice(4, 6), 16);\n  return `rgba(${r},${g},${b},0.1)`;\n}\n\n/*\n用法示例：\nimport Tag from './Tag';\n<Tag color=\"green\" dot>已发布</Tag>\n<Tag color=\"#722ED1\" closable onClose={handleClose}>紫色</Tag>\n*/\n","vue2":"<template>\n  <span\n    class=\"aa-tag\"\n    :class=\"tagClass\"\n    :style=\"customStyle\"\n  >\n    <slot />\n    <i v-if=\"closable\" class=\"aa-tag-close\" title=\"移除\" @click.stop=\"$emit('close')\">×</i>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: 'AaTag',\n  props: {\n    color: { type: String, default: '' },     // '' | blue | green | red | orange | gray | 自定义 hex\n    dot: { type: Boolean, default: false },    // 圆点模式\n    closable: { type: Boolean, default: false }\n  },\n  computed: {\n    PRESET() { return ['green', 'red', 'orange', 'gray']; },\n    isCustom() { return !!this.color && !this.PRESET.includes(this.color) && this.color !== 'blue'; },\n    tagClass() {\n      const c = [];\n      if (this.dot) c.push('aa-tag-dot');\n      if (this.isCustom) c.push('aa-tag-custom');\n      else if (this.color && this.color !== 'blue') c.push('aa-tag-' + this.color);\n      return c;\n    },\n    customStyle() {\n      if (!this.isCustom) return {};\n      return { '--aa-tag-color': this.color, '--aa-tag-bg': this.hexToTint(this.color) };\n    }\n  },\n  methods: {\n    hexToTint(hex) {\n      const h = hex.replace('#', '');\n      const r = parseInt(h.slice(0, 2), 16), g = parseInt(h.slice(2, 4), 16), b = parseInt(h.slice(4, 6), 16);\n      return `rgba(${r},${g},${b},0.1)`;\n    }\n  }\n};\n</script>\n\n<!-- 样式对齐设计令牌 -->\n<style>\n.aa-tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 1px 8px; box-sizing: border-box;\n  font-size: 12px; line-height: 1; border-radius: 2px; background: #F0F5FF; color: #2F54EB; white-space: nowrap; border: 1px solid transparent; }\n.aa-tag.aa-tag-green { background: #F6FFED; color: #2E7D0A; }\n.aa-tag.aa-tag-red { background: #FFF1F0; color: #CF1322; }\n.aa-tag.aa-tag-orange { background: #FFF7E6; color: #8C5A00; }\n.aa-tag.aa-tag-gray { background: #F5F5F5; color: #6E6E6E; }\n.aa-tag.aa-tag-custom { background: var(--aa-tag-bg); color: var(--aa-tag-color); }\n.aa-tag.aa-tag-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }\n.aa-tag-close { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px;\n  margin-right: -2px; border-radius: 50%; cursor: pointer; font-size: 11px; line-height: 1; color: inherit; opacity: .65; }\n.aa-tag-close:hover { opacity: 1; background: rgba(0,0,0,0.08); }\n</style>\n","vue3":"<template>\n  <span\n    class=\"aa-tag\"\n    :class=\"tagClass\"\n    :style=\"customStyle\"\n  >\n    <slot />\n    <i v-if=\"closable\" class=\"aa-tag-close\" title=\"移除\" @click.stop=\"$emit('close')\">×</i>\n  </span>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\n\nconst props = defineProps({\n  color: { type: String, default: '' },     // '' | blue | green | red | orange | gray | 自定义 hex\n  dot: { type: Boolean, default: false },    // 圆点模式\n  closable: { type: Boolean, default: false }\n});\ndefineEmits(['close']);\n\nconst PRESET = ['green', 'red', 'orange', 'gray'];\nconst isCustom = computed(() => !!props.color && !PRESET.includes(props.color) && props.color !== 'blue');\nconst tagClass = computed(() => {\n  const c = [];\n  if (props.dot) c.push('aa-tag-dot');\n  if (isCustom.value) c.push('aa-tag-custom');\n  else if (props.color && props.color !== 'blue') c.push('aa-tag-' + props.color);\n  return c;\n});\nconst customStyle = computed(() => {\n  if (!isCustom.value) return {};\n  return { '--aa-tag-color': props.color, '--aa-tag-bg': hexToTint(props.color) };\n});\nfunction hexToTint(hex) {\n  const h = hex.replace('#', '');\n  const r = parseInt(h.slice(0, 2), 16), g = parseInt(h.slice(2, 4), 16), b = parseInt(h.slice(4, 6), 16);\n  return `rgba(${r},${g},${b},0.1)`;\n}\n</script>\n\n<!-- 样式对齐设计令牌 -->\n<style scoped>\n.aa-tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 1px 8px; box-sizing: border-box;\n  font-size: 12px; line-height: 1; border-radius: 2px; background: #F0F5FF; color: #2F54EB; white-space: nowrap; border: 1px solid transparent; }\n.aa-tag.aa-tag-green { background: #F6FFED; color: #2E7D0A; }\n.aa-tag.aa-tag-red { background: #FFF1F0; color: #CF1322; }\n.aa-tag.aa-tag-orange { background: #FFF7E6; color: #8C5A00; }\n.aa-tag.aa-tag-gray { background: #F5F5F5; color: #6E6E6E; }\n.aa-tag.aa-tag-custom { background: var(--aa-tag-bg); color: var(--aa-tag-color); }\n.aa-tag.aa-tag-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }\n.aa-tag-close { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px;\n  margin-right: -2px; border-radius: 50%; cursor: pointer; font-size: 11px; line-height: 1; color: inherit; opacity: .65; }\n.aa-tag-close:hover { opacity: 1; background: rgba(0,0,0,0.08); }\n</style>\n"}},{"slug":"tabs","name":"标签页 Tabs","tier":"core","confidence":"high","specBatch":1,"specFile":"组件1.txt","contractRef":"components/tabs.json","category":"navigation","specLines":["- 线型：底部2px品牌色指示条","- 卡片型：选中白底无边框，未选中浅灰背景"],"specSummary":"- 线型：底部2px品牌色指示条","contract":{"variants":["线型 · 当前项","线型 · 默认项","卡片型 · 选中（白底无边框）","卡片型 · 未选中（浅灰底）","禁用项"],"dims":[{"name":"type","values":["line","card"]},{"name":"state","values":["default","active","disabled","closable"]}],"unknowns":["标签关闭按钮的出现时机（常显或悬停）","卡片型圆角取值"],"anatomy":{"nav":"标签导航条","indicator":"线型：底部 2px 品牌色指示条","cardSelected":"卡片型选中：白底无边框","cardDefault":"卡片型未选中：浅灰背景"},"doNot":["可滚动标签页的滚动按钮形态","标签过多时的折叠菜单"],"usage":["线型：底部2px品牌色指示条","卡片型：选中白底无边框，未选中浅灰背景"],"structure":{"indicatorHeight":"2px","indicatorColor":"品牌色"}},"files":{"html":"../frameworks/tabs.html","css":"../frameworks/Tabs.css","jsx":"../frameworks/Tabs.jsx","vue2":"../frameworks/Tabs.vue2.vue","vue3":"../frameworks/Tabs.vue3.vue"},"sizes":{"html":5164,"css":3578,"jsx":2284,"vue2":4236,"vue3":4280},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Aurora Admin · Tabs (H5)</title>\n<link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\">\n<link rel=\"stylesheet\" href=\"./Tabs.css\">\n<style>\n  .demo { padding: 24px; background: var(--au-color-page-bg); font-family: var(--font-family); }\n  h1 { font-size: 20px; margin: 0 0 4px; color: var(--au-color-text-title); }\n  .sub { color: var(--au-color-text-secondary); margin: 0 0 24px; font-size: 12px; }\n  .demo-block { background: var(--au-color-card-bg); border-radius: 8px; padding: 16px; margin-bottom: 24px; }\n  .demo-block > .hint { color: var(--au-color-text-secondary); font-size: 12px; margin: 0 0 12px; }\n</style>\n</head>\n<body>\n<div class=\"demo\">\n  <h1>Aurora Admin · Tabs 组件（纯 H5）</h1>\n  <p class=\"sub\">对齐 PageTabs 规范：线型 / 卡片型 / 胶囊型，支持禁用、关闭、新增</p>\n\n  <!-- 线型 -->\n  <div class=\"demo-block\">\n    <p class=\"hint\">线型（默认）</p>\n    <div class=\"aa-tabs type-line\" data-tabs id=\"tabs-line\">\n      <div class=\"aa-tabs-nav\" role=\"tablist\">\n        <div class=\"aa-tabs-tab is-active\" role=\"tab\" tabindex=\"0\" data-key=\"basic\">基本信息</div>\n        <div class=\"aa-tabs-tab\" role=\"tab\" tabindex=\"0\" data-key=\"safe\">安全设置</div>\n        <div class=\"aa-tabs-tab\" role=\"tab\" tabindex=\"0\" data-key=\"notify\">通知</div>\n        <div class=\"aa-tabs-tab is-disabled\" role=\"tab\" tabindex=\"0\" data-key=\"auth\">授权</div>\n      </div>\n      <div class=\"aa-tabs-content\" data-panels>\n        <div data-panel=\"basic\">这里是「基本信息」面板内容。</div>\n        <div data-panel=\"safe\" hidden>这里是「安全设置」面板内容。</div>\n        <div data-panel=\"notify\" hidden>这里是「通知」面板内容。</div>\n        <div data-panel=\"auth\" hidden>这里是「授权」面板内容。</div>\n      </div>\n    </div>\n  </div>\n\n  <!-- 卡片型（可关闭 + 新增） -->\n  <div class=\"demo-block\">\n    <p class=\"hint\">卡片型（可关闭 / 新增）</p>\n    <div class=\"aa-tabs type-card\" data-tabs id=\"tabs-card\">\n      <div class=\"aa-tabs-nav\" role=\"tablist\">\n        <div class=\"aa-tabs-tab is-active\" role=\"tab\" tabindex=\"0\" data-key=\"t1\">订单 <span class=\"aa-tabs-close\" data-close>×</span></div>\n        <div class=\"aa-tabs-tab\" role=\"tab\" tabindex=\"0\" data-key=\"t2\">退款 <span class=\"aa-tabs-close\" data-close>×</span></div>\n        <div class=\"aa-tabs-add\" role=\"button\" tabindex=\"0\" aria-label=\"新增标签页\" data-add>+</div>\n      </div>\n      <div class=\"aa-tabs-content\" data-panels>\n        <div data-panel=\"t1\">订单标签页内容。</div>\n        <div data-panel=\"t2\" hidden>退款标签页内容。</div>\n      </div>\n    </div>\n  </div>\n\n  <!-- 胶囊型 -->\n  <div class=\"demo-block\">\n    <p class=\"hint\">胶囊型</p>\n    <div class=\"aa-tabs type-pill\" data-tabs id=\"tabs-pill\">\n      <div class=\"aa-tabs-nav\" role=\"tablist\">\n        <div class=\"aa-tabs-tab is-active\" role=\"tab\" tabindex=\"0\" data-key=\"all\">全部</div>\n        <div class=\"aa-tabs-tab\" role=\"tab\" tabindex=\"0\" data-key=\"todo\">待办</div>\n        <div class=\"aa-tabs-tab\" role=\"tab\" tabindex=\"0\" data-key=\"done\">已完成</div>\n      </div>\n      <div class=\"aa-tabs-content\" data-panels>\n        <div data-panel=\"all\">全部任务。</div>\n        <div data-panel=\"todo\" hidden>待办任务。</div>\n        <div data-panel=\"done\" hidden>已完成任务。</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<script>\nfunction initTabs(root) {\n  const nav = root.querySelector('.aa-tabs-nav');\n  const panels = root.querySelector('[data-panels]');\n\n  function activate(key) {\n    root.querySelectorAll('.aa-tabs-tab').forEach(t => {\n      const on = t.dataset.key === key;\n      t.classList.toggle('is-active', on);\n    });\n    if (panels) panels.querySelectorAll('[data-panel]').forEach(p => {\n      p.hidden = p.dataset.panel !== key;\n    });\n  }\n\n  nav.addEventListener('click', (e) => {\n    const closeBtn = e.target.closest('[data-close]');\n    const addBtn = e.target.closest('[data-add]');\n    const tab = e.target.closest('.aa-tabs-tab');\n\n    if (closeBtn && tab) {\n      e.stopPropagation();\n      const removedKey = tab.dataset.key;\n      tab.remove();\n      const first = root.querySelector('.aa-tabs-tab');\n      if (first) activate(first.dataset.key);\n      return;\n    }\n    if (addBtn) {\n      const n = root.querySelectorAll('.aa-tabs-tab').length + 1;\n      const key = 'new' + n;\n      const el = document.createElement('div');\n      el.className = 'aa-tabs-tab';\n      el.dataset.key = key;\n      el.innerHTML = '新标签 <span class=\"aa-tabs-close\" data-close>×</span>';\n      addBtn.before(el);\n      const p = document.createElement('div');\n      p.dataset.panel = key;\n      p.textContent = '新标签内容 #' + n;\n      panels.appendChild(p);\n      activate(key);\n      return;\n    }\n    if (tab && !tab.classList.contains('is-disabled')) {\n      activate(tab.dataset.key);\n    }\n  });\n}\n\ndocument.querySelectorAll('[data-tabs]').forEach(initTabs);\n</script>\n</body>\n</html>\n","css":"/* Aurora Admin Tabs 样式 — 对齐 组件7.txt PageTabs 规范：线型 / 卡片型 / 胶囊型 */\n\n.aa-tabs { font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); color: var(--au-color-text-body); }\n\n/* 标签导航条 */\n.aa-tabs-nav {\n  display: flex; align-items: flex-end; gap: 4px;\n  position: relative; padding: 0 4px;\n}\n/* 线型：整条导航底部 1px 边框 */\n.aa-tabs.type-line .aa-tabs-nav { border-bottom: 1px solid var(--au-color-border); }\n/* 胶囊型：整条导航为浅灰胶囊容器 */\n.aa-tabs.type-pill .aa-tabs-nav { background: var(--au-color-page-bg); border-radius: 16px; padding: 4px; gap: 4px; }\n\n/* 单个标签 */\n.aa-tabs-tab {\n  position: relative; box-sizing: border-box;\n  display: inline-flex; align-items: center; gap: 6px;\n  height: 40px; padding: 0 16px; cursor: pointer;\n  font-size: 14px; line-height: 40px; color: var(--au-color-text-body);\n  border: 1px solid transparent; background: none;\n  transition: color .15s, background .15s, border-color .15s;\n  user-select: none; white-space: nowrap;\n}\n.aa-tabs-tab:hover:not(.is-active):not(.is-disabled) { color: var(--au-color-brand); }\n\n/* 线型 active：文字品牌色 + 底部 2px 指示条 */\n.aa-tabs.type-line .aa-tabs-tab { border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 0; }\n.aa-tabs.type-line .aa-tabs-tab.is-active {\n  color: var(--au-color-brand); font-weight: 500; border-bottom-color: var(--au-color-brand);\n}\n\n/* 卡片型 active：边框 + 白底，与内容区连成一体 */\n.aa-tabs.type-card .aa-tabs-nav { border-bottom: 1px solid var(--au-color-border); }\n.aa-tabs.type-card .aa-tabs-tab { border: 1px solid var(--au-color-border); border-bottom: none; border-radius: 6px 6px 0 0; background: var(--au-color-page-bg); }\n.aa-tabs.type-card .aa-tabs-tab.is-active { background: var(--au-color-card-bg); color: var(--au-color-brand); border-color: var(--au-color-border); }\n\n/* 胶囊型 active：品牌色填充白字 */\n.aa-tabs.type-pill .aa-tabs-tab { border: none; border-radius: 14px; height: 32px; line-height: 32px; padding: 0 14px; }\n.aa-tabs.type-pill .aa-tabs-tab.is-active { background: var(--au-color-brand); color: var(--au-color-text-inverse); font-weight: 500; }\n\n/* 禁用 */\n.aa-tabs-tab.is-disabled { color: var(--au-color-text-disabled); cursor: not-allowed; }\n.aa-tabs.type-card .aa-tabs-tab.is-disabled { background: var(--au-color-disabled-bg); }\n\n/* 关闭按钮 */\n.aa-tabs-close { display: inline-flex; align-items: center; justify-content: center;\n  width: 16px; height: 16px; margin-left: 4px; border-radius: 50%; font-size: 12px; color: var(--au-color-text-secondary); }\n.aa-tabs-close:hover { background: rgba(0,0,0,0.06); color: var(--au-color-text-body); }\n.aa-tabs.type-pill .aa-tabs-close { color: rgba(255,255,255,0.85); }\n.aa-tabs.type-pill .aa-tabs-close:hover { background: rgba(255,255,255,0.25); color: var(--au-color-text-inverse); }\n\n/* 新增标签按钮 */\n.aa-tabs-add { display: inline-flex; align-items: center; justify-content: center;\n  width: 32px; height: 32px; margin-left: 4px; border: 1px dashed var(--au-color-border); border-radius: 6px;\n  color: var(--au-color-text-secondary); cursor: pointer; font-size: 16px; }\n.aa-tabs-add:hover { color: var(--au-color-brand); border-color: var(--au-color-brand); }\n\n/* 内容区 */\n.aa-tabs-content { padding: 16px; font-size: 14px; color: var(--au-color-text-body); }\n.aa-tabs.type-card .aa-tabs-content { border: 1px solid var(--au-color-border); border-top: none; border-radius: 0 0 6px 6px; }\n","jsx":"import React from 'react';\nimport './Tabs.css';\n\n/**\n * Aurora Admin Tabs（React）\n * 对齐 组件7.txt PageTabs 规范：线型 / 卡片型 / 胶囊型，支持禁用、关闭、新增\n *\n * props:\n *  - value / defaultValue : 当前激活标签 key（受控 / 非受控）\n *  - tabs   : [{ key, label, disabled?, preventClose? }]\n *  - type   : 'line' | 'card' | 'pill'（默认 'line'）\n *  - closable / addable : Boolean\n *  - onChange(key) / onTabRemove(key) / onTabAdd()\n *  - renderPanel(key) / children(key) : 返回当前激活标签的内容\n */\nexport default function Tabs({\n  value,\n  defaultValue,\n  tabs = [],\n  type = 'line',\n  closable = false,\n  addable = false,\n  onChange,\n  onTabRemove,\n  onTabAdd,\n  renderPanel\n}) {\n  const current = value !== undefined ? value : defaultValue;\n  const panelFn = renderPanel || (typeof children === 'function' ? children : null);\n\n  const choose = (tab) => {\n    if (tab.disabled) return;\n    onChange && onChange(tab.key);\n  };\n\n  return (\n    <div className={`aa-tabs type-${type}`}>\n      <div className=\"aa-tabs-nav\">\n        {tabs.map((tab) => (\n          <div\n            key={tab.key}\n            className={`aa-tabs-tab${current === tab.key ? ' is-active' : ''}${tab.disabled ? ' is-disabled' : ''}`}\n            onClick={() => choose(tab)}\n          >\n            {tab.label}\n            {closable && !tab.disabled && !tab.preventClose && (\n              <span\n                className=\"aa-tabs-close\"\n                title=\"关闭\"\n                onClick={(e) => { e.stopPropagation(); onTabRemove && onTabRemove(tab.key); }}\n              >×</span>\n            )}\n          </div>\n        ))}\n        {addable && (\n          <div className=\"aa-tabs-add\" title=\"新增标签\" onClick={() => onTabAdd && onTabAdd()}>+</div>\n        )}\n      </div>\n\n      <div className=\"aa-tabs-content\">\n        {panelFn ? panelFn(current) : null}\n      </div>\n    </div>\n  );\n}\n\n/*\n用法示例：\nimport Tabs from './Tabs';\n\nconst tabs = [\n  { key: 'basic', label: '基本信息' },\n  { key: 'safe',  label: '安全设置' },\n  { key: 'auth',  label: '授权', disabled: true }\n];\n<Tabs\n  type=\"line\"\n  tabs={tabs}\n  defaultValue=\"basic\"\n  onChange={setActive}\n  renderPanel={(key) => <div>当前标签：{key}</div>}\n/>\n*/\n","vue2":"<template>\n  <div class=\"aa-tabs\" :class=\"['type-' + type]\">\n    <div class=\"aa-tabs-nav\">\n      <div\n        v-for=\"tab in tabs\" :key=\"tab.key\"\n        class=\"aa-tabs-tab\"\n        :class=\"{ 'is-active': value === tab.key, 'is-disabled': tab.disabled }\"\n        @click=\"choose(tab)\"\n      >\n        <slot :name=\"'label-' + tab.key\">{{ tab.label }}</slot>\n        <span\n          v-if=\"closable && !tab.disabled && !tab.preventClose\"\n          class=\"aa-tabs-close\" title=\"关闭\"\n          @click.stop=\"remove(tab)\"\n        >×</span>\n      </div>\n      <div v-if=\"addable\" class=\"aa-tabs-add\" title=\"新增标签\" @click=\"$emit('tab-add')\">+</div>\n    </div>\n\n    <div class=\"aa-tabs-content\">\n      <!-- 优先渲染与当前激活标签同名的具名插槽，否则回退到默认插槽 -->\n      <slot :name=\"value\">\n        <slot />\n      </slot>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaTabs',\n  props: {\n    value: { type: [String, Number], default: '' },      // 当前激活标签 key（v-model）\n    tabs: { type: Array, required: true },               // [{ key, label, disabled?, preventClose? }]\n    type: { type: String, default: 'line' },             // line | card | pill\n    closable: { type: Boolean, default: false },\n    addable: { type: Boolean, default: false }\n  },\n  methods: {\n    choose(tab) {\n      if (tab.disabled) return;\n      this.$emit('input', tab.key);\n      this.$emit('change', tab.key);\n    },\n    remove(tab) {\n      this.$emit('tab-remove', tab.key);\n    }\n  }\n};\n</script>\n\n<!-- 样式对齐 组件7.txt PageTabs 规范 -->\n<style>\n.aa-tabs { font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); color: #262626; }\n.aa-tabs-nav { display: flex; align-items: flex-end; gap: 4px; position: relative; padding: 0 4px; }\n.aa-tabs.type-line .aa-tabs-nav { border-bottom: 1px solid #E8ECF1; }\n.aa-tabs.type-pill .aa-tabs-nav { background: #F5F7FA; border-radius: 16px; padding: 4px; gap: 4px; }\n\n.aa-tabs-tab { position: relative; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px;\n  height: 40px; padding: 0 16px; cursor: pointer; font-size: 14px; line-height: 40px; color: #262626;\n  border: 1px solid transparent; background: none; transition: color .15s, background .15s, border-color .15s;\n  user-select: none; white-space: nowrap; }\n.aa-tabs-tab:hover:not(.is-active):not(.is-disabled) { color: #2F54EB; }\n\n.aa-tabs.type-line .aa-tabs-tab { border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 0; }\n.aa-tabs.type-line .aa-tabs-tab.is-active { color: #2F54EB; font-weight: 500; border-bottom-color: #2F54EB; }\n\n.aa-tabs.type-card .aa-tabs-nav { border-bottom: 1px solid #E8ECF1; }\n.aa-tabs.type-card .aa-tabs-tab { border: 1px solid #E8ECF1; border-bottom: none; border-radius: 6px 6px 0 0; background: #F5F7FA; }\n.aa-tabs.type-card .aa-tabs-tab.is-active { background: #fff; color: #2F54EB; border-color: #E8ECF1; }\n\n.aa-tabs.type-pill .aa-tabs-tab { border: none; border-radius: 14px; height: 32px; line-height: 32px; padding: 0 14px; }\n.aa-tabs.type-pill .aa-tabs-tab.is-active { background: #2F54EB; color: #fff; font-weight: 500; }\n\n.aa-tabs-tab.is-disabled { color: #BFBFBF; cursor: not-allowed; }\n.aa-tabs.type-card .aa-tabs-tab.is-disabled { background: #F5F5F5; }\n\n.aa-tabs-close { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;\n  margin-left: 4px; border-radius: 50%; font-size: 12px; color: #6E6E6E; }\n.aa-tabs-close:hover { background: rgba(0,0,0,0.06); color: #262626; }\n.aa-tabs.type-pill .aa-tabs-close { color: rgba(255,255,255,0.85); }\n.aa-tabs.type-pill .aa-tabs-close:hover { background: rgba(255,255,255,0.25); color: #fff; }\n\n.aa-tabs-add { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;\n  margin-left: 4px; border: 1px dashed #E8ECF1; border-radius: 6px; color: #6E6E6E; cursor: pointer; font-size: 16px; }\n.aa-tabs-add:hover { color: #2F54EB; border-color: #2F54EB; }\n\n.aa-tabs-content { padding: 16px; font-size: 14px; color: #262626; }\n.aa-tabs.type-card .aa-tabs-content { border: 1px solid #E8ECF1; border-top: none; border-radius: 0 0 6px 6px; }\n</style>\n","vue3":"<template>\n  <div class=\"aa-tabs\" :class=\"['type-' + type]\">\n    <div class=\"aa-tabs-nav\">\n      <div\n        v-for=\"tab in tabs\" :key=\"tab.key\"\n        class=\"aa-tabs-tab\"\n        :class=\"{ 'is-active': modelValue === tab.key, 'is-disabled': tab.disabled }\"\n        @click=\"choose(tab)\"\n      >\n        <slot :name=\"'label-' + tab.key\">{{ tab.label }}</slot>\n        <span\n          v-if=\"closable && !tab.disabled && !tab.preventClose\"\n          class=\"aa-tabs-close\" title=\"关闭\"\n          @click.stop=\"remove(tab)\"\n        >×</span>\n      </div>\n      <div v-if=\"addable\" class=\"aa-tabs-add\" title=\"新增标签\" @click=\"$emit('tab-add')\">+</div>\n    </div>\n\n    <div class=\"aa-tabs-content\">\n      <!-- 优先渲染与当前激活标签同名的具名插槽，否则回退到默认插槽 -->\n      <slot :name=\"modelValue\">\n        <slot />\n      </slot>\n    </div>\n  </div>\n</template>\n\n<script setup>\nconst props = defineProps({\n  modelValue: { type: [String, Number], default: '' },   // 当前激活标签 key（v-model）\n  tabs: { type: Array, required: true },                 // [{ key, label, disabled?, preventClose? }]\n  type: { type: String, default: 'line' },               // line | card | pill\n  closable: { type: Boolean, default: false },\n  addable: { type: Boolean, default: false }\n});\nconst emit = defineEmits(['update:modelValue', 'change', 'tab-remove', 'tab-add']);\n\nfunction choose(tab) {\n  if (tab.disabled) return;\n  emit('update:modelValue', tab.key);\n  emit('change', tab.key);\n}\nfunction remove(tab) {\n  emit('tab-remove', tab.key);\n}\n</script>\n\n<!-- 样式对齐 组件7.txt PageTabs 规范 -->\n<style scoped>\n.aa-tabs { font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); color: #262626; }\n.aa-tabs-nav { display: flex; align-items: flex-end; gap: 4px; position: relative; padding: 0 4px; }\n.aa-tabs.type-line .aa-tabs-nav { border-bottom: 1px solid #E8ECF1; }\n.aa-tabs.type-pill .aa-tabs-nav { background: #F5F7FA; border-radius: 16px; padding: 4px; gap: 4px; }\n\n.aa-tabs-tab { position: relative; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px;\n  height: 40px; padding: 0 16px; cursor: pointer; font-size: 14px; line-height: 40px; color: #262626;\n  border: 1px solid transparent; background: none; transition: color .15s, background .15s, border-color .15s;\n  user-select: none; white-space: nowrap; }\n.aa-tabs-tab:hover:not(.is-active):not(.is-disabled) { color: #2F54EB; }\n\n.aa-tabs.type-line .aa-tabs-tab { border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 0; }\n.aa-tabs.type-line .aa-tabs-tab.is-active { color: #2F54EB; font-weight: 500; border-bottom-color: #2F54EB; }\n\n.aa-tabs.type-card .aa-tabs-nav { border-bottom: 1px solid #E8ECF1; }\n.aa-tabs.type-card .aa-tabs-tab { border: 1px solid #E8ECF1; border-bottom: none; border-radius: 6px 6px 0 0; background: #F5F7FA; }\n.aa-tabs.type-card .aa-tabs-tab.is-active { background: #fff; color: #2F54EB; border-color: #E8ECF1; }\n\n.aa-tabs.type-pill .aa-tabs-tab { border: none; border-radius: 14px; height: 32px; line-height: 32px; padding: 0 14px; }\n.aa-tabs.type-pill .aa-tabs-tab.is-active { background: #2F54EB; color: #fff; font-weight: 500; }\n\n.aa-tabs-tab.is-disabled { color: #BFBFBF; cursor: not-allowed; }\n.aa-tabs.type-card .aa-tabs-tab.is-disabled { background: #F5F5F5; }\n\n.aa-tabs-close { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;\n  margin-left: 4px; border-radius: 50%; font-size: 12px; color: #6E6E6E; }\n.aa-tabs-close:hover { background: rgba(0,0,0,0.06); color: #262626; }\n.aa-tabs.type-pill .aa-tabs-close { color: rgba(255,255,255,0.85); }\n.aa-tabs.type-pill .aa-tabs-close:hover { background: rgba(255,255,255,0.25); color: #fff; }\n\n.aa-tabs-add { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;\n  margin-left: 4px; border: 1px dashed #E8ECF1; border-radius: 6px; color: #6E6E6E; cursor: pointer; font-size: 16px; }\n.aa-tabs-add:hover { color: #2F54EB; border-color: #2F54EB; }\n\n.aa-tabs-content { padding: 16px; font-size: 14px; color: #262626; }\n.aa-tabs.type-card .aa-tabs-content { border: 1px solid #E8ECF1; border-top: none; border-radius: 0 0 6px 6px; }\n</style>\n"}},{"slug":"steps","name":"步骤条 Steps","tier":"core","confidence":"high","specBatch":1,"specFile":"组件1.txt","contractRef":"components/steps.json","category":"navigation","specLines":["- 节点32px圆点，完成绿对勾，当前品牌色，未完成灰色","- 连线完成段品牌色"],"specSummary":"- 节点32px圆点，完成绿对勾，当前品牌色，未完成灰色","contract":{"variants":["已完成（绿对勾）","当前步（品牌色）","未完成（灰色）","垂直步骤条"],"dims":[{"name":"state","values":["done","current","pending"]},{"name":"orientation","values":["horizontal","vertical"]}],"unknowns":["垂直方向节点尺寸是否一致","超过 5 步时的压缩策略"],"anatomy":{"node":"节点：32px 圆点","done":"完成态：绿对勾","current":"当前态：品牌色","pending":"未完成态：灰色","connector":"连线：完成段为品牌色"},"doNot":["步骤描述文字的位置与宽度","点击跳转的交互规则"],"usage":["节点32px圆点，完成绿对勾，当前品牌色，未完成灰色","连线完成段品牌色"],"structure":{"nodeSize":"32px","connectorDone":"品牌色"}},"files":{"html":"../frameworks/steps.html","css":"../frameworks/Steps.css","jsx":"../frameworks/Steps.jsx","vue2":"../frameworks/Steps.vue2.vue","vue3":"../frameworks/Steps.vue3.vue"},"sizes":{"html":2421,"css":2157,"jsx":1439,"vue2":2868,"vue3":2850},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Aurora Admin · Steps (H5)</title>\n<link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\">\n<link rel=\"stylesheet\" href=\"./Steps.css\">\n<style>\n  .demo { padding: 24px; background: var(--au-color-page-bg); font-family: var(--font-family); }\n  h1 { font-size: 20px; margin: 0 0 4px; color: var(--au-color-text-title); }\n  .sub { color: var(--au-color-text-secondary); margin: 0 0 24px; font-size: 12px; }\n  .demo-block { background: var(--au-color-card-bg); border-radius: 8px; padding: 24px; margin-bottom: 20px; }\n  .demo-block > .hint { color: var(--au-color-text-secondary); font-size: 12px; margin: 0 0 16px; }\n</style>\n</head>\n<body>\n<div class=\"demo\">\n  <h1>Aurora Admin · Steps 组件（纯 H5）</h1>\n  <p class=\"sub\">对齐 StepList 规范：序号、标题、描述、状态、连接线</p>\n\n  <div class=\"demo-block\">\n    <p class=\"hint\">横向步骤条</p>\n    <div class=\"aa-steps horizontal\" role=\"list\" data-steps data-current=\"1\"></div>\n  </div>\n\n  <div class=\"demo-block\">\n    <p class=\"hint\">纵向步骤条（含异常状态）</p>\n    <div class=\"aa-steps vertical\" role=\"list\" data-steps data-current=\"2\" data-error=\"3\"></div>\n  </div>\n</div>\n\n<script>\nconst STEPS = [\n  { title: '填写订单', desc: '录入客户与商品信息' },\n  { title: '审核', desc: '主管确认订单合规' },\n  { title: '付款', desc: '完成支付流程' },\n  { title: '完成', desc: '生成发货单' }\n];\n\nfunction render(root) {\n  const current = +root.dataset.current;\n  const errorAt = root.dataset.error ? +root.dataset.error : -1;\n  const dir = root.classList.contains('horizontal') ? 'horizontal' : 'vertical';\n  root.innerHTML = STEPS.map((s, i) => {\n    let status = i < current ? 'finish' : (i === current ? 'process' : 'wait');\n    if (i === errorAt) status = 'error';\n    const icon = status === 'finish' ? '✓' : (status === 'error' ? '!' : (i + 1));\n    return `<div class=\"aa-step is-${status}\" role=\"listitem\">\n      <div class=\"aa-step-icon\">${icon}</div>\n      <div class=\"aa-step-body\">\n        <div class=\"aa-step-title\">${s.title}</div>\n        <div class=\"aa-step-desc\">${s.desc || ''}</div>\n      </div>\n    </div>`;\n  }).join('');\n}\ndocument.querySelectorAll('[data-steps]').forEach(render);\n</script>\n</body>\n</html>\n","css":"/* Aurora Admin Steps 样式 — 对齐 组件2/7 StepList：序号、标题、描述、状态、连接线、横/纵 */\n\n.aa-steps { font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); color: var(--au-color-text-body); }\n.aa-steps.horizontal { display: flex; }\n.aa-steps.vertical { display: inline-flex; flex-direction: column; }\n\n.aa-step { position: relative; display: flex; gap: 12px; flex: 1; }\n.aa-steps.vertical .aa-step { flex-direction: column; }\n\n.aa-step-icon {\n  position: relative; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--au-color-border);\n  display: flex; align-items: center; justify-content: center; font-size: 14px; background: var(--au-color-card-bg); color: var(--au-color-text-secondary); flex-shrink: 0; z-index: 1;\n}\n.aa-step.is-finish .aa-step-icon { border-color: var(--au-color-brand); color: var(--au-color-brand); background: var(--au-color-brand-bg); }\n.aa-step.is-process .aa-step-icon { border-color: var(--au-color-brand); color: var(--au-color-text-inverse); background: var(--au-color-brand); }\n.aa-step.is-error .aa-step-icon { border-color: var(--au-color-error); color: var(--au-color-error); background: #FFF1F0; }\n\n.aa-step-title { font-size: 14px; font-weight: 500; line-height: 32px; }\n.aa-step.is-wait .aa-step-title { color: var(--au-color-text-secondary); }\n.aa-step-desc { font-size: 12px; color: var(--au-color-text-secondary); margin-top: 2px; }\n\n/* 连接线 */\n.aa-steps.horizontal .aa-step:not(:last-child) .aa-step-icon::after {\n  content: ''; position: absolute; top: 15px; left: 38px; right: -12px; height: 2px; background: var(--au-color-border);\n}\n.aa-steps.horizontal .aa-step.is-finish:not(:last-child) .aa-step-icon::after { background: var(--au-color-brand); }\n\n.aa-steps.vertical .aa-step-body { padding-bottom: 24px; }\n.aa-steps.vertical .aa-step:not(:last-child) .aa-step-icon::after {\n  content: ''; position: absolute; top: 40px; left: 15px; bottom: -12px; width: 2px; background: var(--au-color-border);\n}\n.aa-steps.vertical .aa-step.is-finish:not(:last-child) .aa-step-icon::after { background: var(--au-color-brand); }\n","jsx":"import React from 'react';\nimport './Steps.css';\n\n/**\n * Aurora Admin Steps（React）\n * 对齐 组件2/7 StepList 规范：序号、标题、描述、状态、连接线、横/纵\n *\n * props:\n *  - steps    : [{ title, desc? }]\n *  - current  : 当前步骤索引\n *  - errorAt  : 异常步骤索引（-1 表示无）\n *  - direction: 'horizontal' | 'vertical'\n */\nexport default function Steps({ steps = [], current = 0, errorAt = -1, direction = 'horizontal' }) {\n  const statusOf = (i) => {\n    if (i === errorAt) return 'error';\n    if (i < current) return 'finish';\n    if (i === current) return 'process';\n    return 'wait';\n  };\n  const icon = (s) => (s === 'finish' ? '✓' : s === 'error' ? '!' : null);\n\n  return (\n    <div className={`aa-steps ${direction}`}>\n      {steps.map((s, i) => {\n        const st = statusOf(i);\n        return (\n          <div key={i} className={`aa-step is-${st}`}>\n            <div className=\"aa-step-icon\">{icon(st) !== null ? icon(st) : i + 1}</div>\n            <div className=\"aa-step-body\">\n              <div className=\"aa-step-title\">{s.title}</div>\n              {s.desc && <div className=\"aa-step-desc\">{s.desc}</div>}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\n/*\n用法示例：\nimport Steps from './Steps';\nconst steps = [{ title: '填写订单' }, { title: '审核' }, { title: '付款' }];\n<Steps steps={steps} current={1} direction=\"horizontal\" />\n*/\n","vue2":"<template>\n  <div class=\"aa-steps\" :class=\"direction\">\n    <div\n      v-for=\"(s, i) in steps\" :key=\"i\"\n      class=\"aa-step\"\n      :class=\"'is-' + statusOf(i)\"\n    >\n      <div class=\"aa-step-icon\">{{ statusOf(i) === 'finish' ? '✓' : (statusOf(i) === 'error' ? '!' : (i + 1)) }}</div>\n      <div class=\"aa-step-body\">\n        <div class=\"aa-step-title\">{{ s.title }}</div>\n        <div v-if=\"s.desc\" class=\"aa-step-desc\">{{ s.desc }}</div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaSteps',\n  props: {\n    steps: { type: Array, required: true },                  // [{ title, desc? }]\n    current: { type: Number, default: 0 },                   // 当前步骤索引\n    errorAt: { type: Number, default: -1 },                  // 异常步骤索引\n    direction: { type: String, default: 'horizontal' }        // horizontal | vertical\n  },\n  methods: {\n    statusOf(i) {\n      if (i === this.errorAt) return 'error';\n      if (i < this.current) return 'finish';\n      if (i === this.current) return 'process';\n      return 'wait';\n    }\n  }\n};\n</script>\n\n<!-- 样式对齐 组件2/7 StepList 规范 -->\n<style>\n.aa-steps { font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); color: #262626; }\n.aa-steps.horizontal { display: flex; }\n.aa-steps.vertical { display: inline-flex; flex-direction: column; }\n.aa-step { position: relative; display: flex; gap: 12px; flex: 1; }\n.aa-steps.vertical .aa-step { flex-direction: column; }\n.aa-step-icon { position: relative; width: 32px; height: 32px; border-radius: 50%; border: 2px solid #E8ECF1; display: flex; align-items: center; justify-content: center; font-size: 14px; background: #fff; color: #6E6E6E; flex-shrink: 0; z-index: 1; }\n.aa-step.is-finish .aa-step-icon { border-color: #2F54EB; color: #2F54EB; background: #F0F5FF; }\n.aa-step.is-process .aa-step-icon { border-color: #2F54EB; color: #fff; background: #2F54EB; }\n.aa-step.is-error .aa-step-icon { border-color: #CF1322; color: #CF1322; background: #FFF1F0; }\n.aa-step-title { font-size: 14px; font-weight: 500; line-height: 32px; }\n.aa-step.is-wait .aa-step-title { color: #6E6E6E; }\n.aa-step-desc { font-size: 12px; color: #6E6E6E; margin-top: 2px; }\n.aa-steps.horizontal .aa-step:not(:last-child) .aa-step-icon::after { content: ''; position: absolute; top: 15px; left: 38px; right: -12px; height: 2px; background: #E8ECF1; }\n.aa-steps.horizontal .aa-step.is-finish:not(:last-child) .aa-step-icon::after { background: #2F54EB; }\n.aa-steps.vertical .aa-step-body { padding-bottom: 24px; }\n.aa-steps.vertical .aa-step:not(:last-child) .aa-step-icon::after { content: ''; position: absolute; top: 40px; left: 15px; bottom: -12px; width: 2px; background: #E8ECF1; }\n.aa-steps.vertical .aa-step.is-finish:not(:last-child) .aa-step-icon::after { background: #2F54EB; }\n</style>\n","vue3":"<template>\n  <div class=\"aa-steps\" :class=\"direction\">\n    <div\n      v-for=\"(s, i) in steps\" :key=\"i\"\n      class=\"aa-step\"\n      :class=\"'is-' + statusOf(i)\"\n    >\n      <div class=\"aa-step-icon\">{{ statusOf(i) === 'finish' ? '✓' : (statusOf(i) === 'error' ? '!' : (i + 1)) }}</div>\n      <div class=\"aa-step-body\">\n        <div class=\"aa-step-title\">{{ s.title }}</div>\n        <div v-if=\"s.desc\" class=\"aa-step-desc\">{{ s.desc }}</div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\n\nconst props = defineProps({\n  steps: { type: Array, required: true },                 // [{ title, desc? }]\n  current: { type: Number, default: 0 },                  // 当前步骤索引\n  errorAt: { type: Number, default: -1 },                 // 异常步骤索引\n  direction: { type: String, default: 'horizontal' }      // horizontal | vertical\n});\n\nfunction statusOf(i) {\n  if (i === props.errorAt) return 'error';\n  if (i < props.current) return 'finish';\n  if (i === props.current) return 'process';\n  return 'wait';\n}\n</script>\n\n<!-- 样式对齐 组件2/7 StepList 规范 -->\n<style scoped>\n.aa-steps { font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); color: #262626; }\n.aa-steps.horizontal { display: flex; }\n.aa-steps.vertical { display: inline-flex; flex-direction: column; }\n.aa-step { position: relative; display: flex; gap: 12px; flex: 1; }\n.aa-steps.vertical .aa-step { flex-direction: column; }\n.aa-step-icon { position: relative; width: 32px; height: 32px; border-radius: 50%; border: 2px solid #E8ECF1; display: flex; align-items: center; justify-content: center; font-size: 14px; background: #fff; color: #6E6E6E; flex-shrink: 0; z-index: 1; }\n.aa-step.is-finish .aa-step-icon { border-color: #2F54EB; color: #2F54EB; background: #F0F5FF; }\n.aa-step.is-process .aa-step-icon { border-color: #2F54EB; color: #fff; background: #2F54EB; }\n.aa-step.is-error .aa-step-icon { border-color: #CF1322; color: #CF1322; background: #FFF1F0; }\n.aa-step-title { font-size: 14px; font-weight: 500; line-height: 32px; }\n.aa-step.is-wait .aa-step-title { color: #6E6E6E; }\n.aa-step-desc { font-size: 12px; color: #6E6E6E; margin-top: 2px; }\n.aa-steps.horizontal .aa-step:not(:last-child) .aa-step-icon::after { content: ''; position: absolute; top: 15px; left: 38px; right: -12px; height: 2px; background: #E8ECF1; }\n.aa-steps.horizontal .aa-step.is-finish:not(:last-child) .aa-step-icon::after { background: #2F54EB; }\n.aa-steps.vertical .aa-step-body { padding-bottom: 24px; }\n.aa-steps.vertical .aa-step:not(:last-child) .aa-step-icon::after { content: ''; position: absolute; top: 40px; left: 15px; bottom: -12px; width: 2px; background: #E8ECF1; }\n.aa-steps.vertical .aa-step.is-finish:not(:last-child) .aa-step-icon::after { background: #2F54EB; }\n</style>\n"}},{"slug":"breadcrumb","name":"面包屑 Breadcrumb","tier":"core","confidence":"high","specBatch":1,"specFile":"组件1.txt","contractRef":"components/breadcrumb.json","category":"navigation","specLines":"- 字号14px，层级用/分隔，次要文字#8C8C8C，当前页#262626","specSummary":"- 字号14px，层级用/分隔，次要文字#8C8C8C，当前页#262626","contract":{"variants":["可点击层级","当前页（正文色）"],"dims":[{"name":"state","values":["link","current"]},{"name":"separator","values":["slash"]}],"unknowns":["层级过多时的折叠规则","长文本层级的省略方式"],"anatomy":{"item":"层级项：字号 14px","separator":"分隔符 /","link":"非当前项：次要文字色","current":"当前页：正文色 #262626"},"doNot":["图标型分隔符与首页图标"],"usage":["字号14px，层级用/分隔，次要文字#6E6E6E，当前页#262626"],"structure":{"fontSize":"14px","separator":"/"}},"files":{"html":"../frameworks/Breadcrumb.html","css":"../frameworks/Breadcrumb.css","jsx":"../frameworks/Breadcrumb.jsx","vue2":"../frameworks/Breadcrumb.vue2.vue","vue3":"../frameworks/Breadcrumb.vue3.vue"},"sizes":{"html":1355,"css":625,"jsx":619,"vue2":559,"vue3":559},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · Breadcrumb（普通 H5）</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"Breadcrumb.css\" />\n  <style>body{margin:0;padding:24px;background: var(--au-color-page-bg);}</style>\n</head>\n<body>\n  <div class=\"aa-breadcrumb\" role=\"navigation\" id=\"app\"></div>\n\n  <script>\n    var DATA = [\n      { label: '首页', key: 'home' },\n      { label: '订单管理', key: 'order' },\n      { label: '订单详情', key: 'detail' }\n    ];\n    function render() {\n      var root = document.getElementById('app');\n      root.innerHTML = DATA.map(function (it, i) {\n        var cur = i === DATA.length - 1;\n        var html = '<span class=\"aa-breadcrumb-item ' + (cur ? 'is-current' : '') + '\" role=\"link\" tabindex=\"0\" data-key=\"' + it.key + '\">' + it.label + '</span>';\n        if (!cur) html += '<span class=\"aa-breadcrumb-sep\">/</span>';\n        return html;\n      }).join('');\n      root.querySelectorAll('.aa-breadcrumb-item:not(.is-current)').forEach(function (el) {\n        el.addEventListener('click', function () { alert('跳转到：' + el.dataset.key); });\n      });\n    }\n    render();\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin Breadcrumb 样式 — 对齐 组件7.txt RouteBreadcrumb：面包屑，当前项高亮不可点击 */\n\n.aa-breadcrumb { font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); font-size: 14px; display: flex; align-items: center; flex-wrap: wrap; }\n.aa-breadcrumb-item { cursor: pointer; color: var(--au-color-text-tertiary); }\n.aa-breadcrumb-item:hover { color: var(--au-color-brand); }\n.aa-breadcrumb-item.is-current { color: var(--au-color-text-title); font-weight: 500; cursor: default; }\n.aa-breadcrumb-sep { margin: 0 8px; color: var(--au-color-text-placeholder); }\n","jsx":"import React from 'react';\nimport './Breadcrumb.css';\n\nexport default function Breadcrumb({ items = [], onSelect }) {\n  return (\n    <div className=\"aa-breadcrumb\">\n      {items.map((it, i) => (\n        <React.Fragment key={i}>\n          <span\n            className={'aa-breadcrumb-item' + (i === items.length - 1 ? ' is-current' : '')}\n            onClick={() => { if (i !== items.length - 1) onSelect && onSelect(it); }}\n          >\n            {it.label}\n          </span>\n          {i !== items.length - 1 ? <span className=\"aa-breadcrumb-sep\">/</span> : null}\n        </React.Fragment>\n      ))}\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-breadcrumb\">\n    <template v-for=\"(it, i) in items\" :key=\"i\">\n      <span class=\"aa-breadcrumb-item\" :class=\"{ 'is-current': i === items.length - 1 }\"\n            @click=\"i !== items.length - 1 && $emit('select', it)\">{{ it.label }}</span>\n      <span v-if=\"i !== items.length - 1\" class=\"aa-breadcrumb-sep\">/</span>\n    </template>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaBreadcrumb',\n  props: { items: { type: Array, default: function () { return []; } } }\n};\n</script>\n\n<style src=\"./Breadcrumb.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-breadcrumb\">\n    <template v-for=\"(it, i) in items\" :key=\"i\">\n      <span class=\"aa-breadcrumb-item\" :class=\"{ 'is-current': i === items.length - 1 }\"\n            @click=\"i !== items.length - 1 && emit('select', it)\">{{ it.label }}</span>\n      <span v-if=\"i !== items.length - 1\" class=\"aa-breadcrumb-sep\">/</span>\n    </template>\n  </div>\n</template>\n\n<script setup>\nconst props = defineProps({ items: { type: Array, default: () => [] } });\nconst emit = defineEmits(['select']);\n</script>\n\n<style src=\"./Breadcrumb.css\"></style>\n"}},{"slug":"tree","name":"树形控件 Tree","tier":"extension","confidence":"high","specBatch":2,"specFile":"组件2.txt","contractRef":"components/tree.json","category":"display","specLines":["- 用于层级数据展示：组织架构、菜单权限、分类目录","- 节点高度 32px，缩进 16px/级","- 展开/折叠箭头 12px，位于节点左侧","- 选中态：背景 #F0F5FF，文字 #2F54EB","- 支持复选框、拖拽排序、异步加载、搜索过滤","- 连接线默认隐藏，可选显示虚线 #E8ECF1"],"specSummary":"- 用于层级数据展示：组织架构、菜单权限、分类目录","contract":{"variants":["复选框树","可拖拽排序","异步加载子节点","搜索过滤 + 选中态"],"dims":[{"name":"feature","values":["checkbox","draggable","async-load","search-filter"]},{"name":"connector","values":["hidden","dashed"]},{"name":"state","values":["default","selected"]}],"unknowns":["异步加载的 loading 表现","搜索过滤的命中高亮样式"],"anatomy":{"node":"节点：高度 32px，缩进 16px/级","arrow":"展开/折叠箭头 12px，位于节点左侧","selected":"选中态：背景 #F0F5FF，文字 #2F54EB","connector":"连接线默认隐藏，可选显示虚线 #E8ECF1"},"doNot":["节点的右键菜单与快捷键"],"usage":["用于层级数据展示：组织架构、菜单权限、分类目录","节点高度 32px，缩进 16px/级","展开/折叠箭头 12px，位于节点左侧","选中态：背景 #F0F5FF，文字 #2F54EB","支持复选框、拖拽排序、异步加载、搜索过滤","连接线默认隐藏，可选显示虚线 #E8ECF1"],"structure":{"nodeHeight":"32px","indent":"16px/级","arrowSize":"12px","selectedBg":"#F0F5FF","selectedText":"#2F54EB","connectorDashed":"#E8ECF1"}},"files":{"html":"../frameworks/tree.html","css":"../frameworks/Tree.css","jsx":"../frameworks/Tree.jsx","vue2":"../frameworks/Tree.vue2.vue","vue3":"../frameworks/Tree.vue3.vue"},"sizes":{"html":5393,"css":1080,"jsx":4278,"vue2":5030,"vue3":4751},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Aurora Admin · Tree (H5)</title>\n<link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\">\n<style>\n  /* 对齐 组件2.txt Tree 规范：节点高32px、缩进16px/级、箭头12px、选中 #F0F5FF/#2F54EB */\n  .demo { padding: 24px; background: var(--au-color-page-bg); color: var(--au-color-text-body); font-family: var(--font-family); }\n  h1 { font-size: 20px; margin: 0 0 4px; }\n  .sub { color: var(--au-color-text-secondary); margin: 0 0 24px; font-size: 12px; }\n  .aa-tree { min-width: 240px; border: 1px solid var(--au-color-border); border-radius: 8px; padding: 4px; background: var(--au-color-card-bg); }\n\n  .aa-tree-node {\n    display: flex; align-items: center; gap: 4px; height: 32px; border-radius: 4px;\n    cursor: pointer; user-select: none; font-size: 14px; color: var(--au-color-text-body); padding-right: 8px;\n  }\n  .aa-tree-node:hover { background: var(--au-color-page-bg); }\n  .aa-tree-node.is-selected { background: var(--au-color-brand-bg); color: var(--au-color-brand); }\n  .aa-tree-arrow {\n    display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;\n    font-size: 12px; color: var(--au-color-text-secondary); transition: transform .15s; flex-shrink: 0;\n  }\n  .aa-tree-arrow.is-open { transform: rotate(90deg); }\n  .aa-tree-arrow-placeholder { width: 16px; flex-shrink: 0; }\n  .aa-tree-check { width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; }\n  .aa-tree-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n</style>\n</head>\n<body>\n<div class=\"demo\">\n  <h1>Aurora Admin · Tree 组件（纯 H5）</h1>\n  <p class=\"sub\">对齐 Tree 规范：节点高32px、缩进16px/级、箭头12px、选中态 #F0F5FF + 品牌色、支持复选框级联</p>\n\n  <label style=\"font-size:13px;color:var(--color-text-secondary);margin-right:16px;\">\n    <input type=\"checkbox\" id=\"chkToggle\" checked onchange=\"checkable=this.checked; render();\"> 启用复选框\n  </label>\n  <div class=\"aa-tree\" role=\"tree\" id=\"tree\" style=\"margin-top:12px\"></div>\n</div>\n\n<script>\nconst treeData = [\n  { key: 'org', title: '某某科技', children: [\n    { key: 'tech', title: '技术中心', children: [\n      { key: 'fe', title: '前端组' },\n      { key: 'be', title: '后端组' }\n    ]},\n    { key: 'product', title: '产品中心', children: [\n      { key: 'pm', title: '产品组' },\n      { key: 'ux', title: '设计组' }\n    ]}\n  ]}\n];\n\nlet checkable = true;\nlet expanded = new Set(['org']);\nlet selected = new Set(['fe']);\nlet checked = new Set(['tech']);\n\nfunction findNode(key, nodes = treeData) {\n  for (const n of nodes) {\n    if (n.key === key) return n;\n    if (n.children) { const f = findNode(key, n.children); if (f) return f; }\n  }\n  return null;\n}\nfunction descendantKeys(node) {\n  let out = [];\n  (node.children || []).forEach(c => { out.push(c.key); out = out.concat(descendantKeys(c)); });\n  return out;\n}\nfunction allChildrenChecked(node, set) {\n  if (!node.children || !node.children.length) return set.has(node.key);\n  return node.children.every(c => allChildrenChecked(c, set));\n}\nfunction hasChildren(n) { return n.children && n.children.length; }\n\nfunction toggleExpand(key) {\n  expanded.has(key) ? expanded.delete(key) : expanded.add(key);\n  render();\n}\nfunction selectRow(key) {\n  selected = new Set([key]); render();\n}\nfunction toggleCheck(key) {\n  const node = findNode(key);\n  const willCheck = !checked.has(key);\n  const keys = [key, ...descendantKeys(node)];\n  keys.forEach(k => willCheck ? checked.add(k) : checked.delete(k));\n  // 向上级联：父节点 = 其所有子节点均勾选\n  propagateUp(node);\n  render();\n}\nfunction propagateUp(node) {\n  // 简单向上：遍历所有有父的节点\n  function walk(nodes, parent) {\n    nodes.forEach(n => {\n      if (parent && hasChildren(parent)) {\n        if (allChildrenChecked(parent, checked)) checked.add(parent.key);\n        else checked.delete(parent.key);\n      }\n      if (n.children) walk(n.children, n);\n    });\n  }\n  walk(treeData, null);\n}\n\nfunction visibleList() {\n  const out = [];\n  (function walk(nodes, depth) {\n    nodes.forEach(n => {\n      out.push({ node: n, depth });\n      if (hasChildren(n) && expanded.has(n.key)) walk(n.children, depth + 1);\n    });\n  })(treeData, 0);\n  return out;\n}\n\nfunction render() {\n  const root = document.getElementById('tree');\n  root.innerHTML = visibleList().map(({ node, depth }) => {\n    const open = expanded.has(node.key);\n    const arrow = hasChildren(node)\n      ? `<span class=\"aa-tree-arrow ${open ? 'is-open' : ''}\" role=\"tree\" onclick=\"toggleExpand('${node.key}')\">▸</span>`\n      : `<span class=\"aa-tree-arrow-placeholder\"></span>`;\n    const check = checkable\n      ? `<input type=\"checkbox\" class=\"aa-tree-check\" role=\"tree\" ${checked.has(node.key) ? 'checked' : ''} onclick=\"event.stopPropagation();toggleCheck('${node.key}')\">`\n      : '';\n    const sel = selected.has(node.key) ? ' is-selected' : '';\n    return `<div class=\"aa-tree-node${sel}\" role=\"treeitem\" tabindex=\"0\" style=\"padding-left:${depth * 16 + 4}px\" onclick=\"selectRow('${node.key}')\">\n      ${arrow}${check}<span class=\"aa-tree-label\">${node.title}</span>\n    </div>`;\n  }).join('');\n}\nrender();\n</script>\n</body>\n</html>\n","css":"/* Aurora Admin Tree 样式 — 对齐 组件2.txt Tree 规范 */\n.aa-tree { min-width: 240px; border: 1px solid var(--au-color-border); border-radius: 8px; padding: 4px; background: var(--au-color-card-bg); }\n.aa-tree-node {\n  display: flex; align-items: center; gap: 4px; height: 32px; border-radius: 4px;\n  cursor: pointer; user-select: none; font-size: 14px; color: var(--au-color-text-body); padding-right: 8px;\n}\n.aa-tree-node:hover { background: var(--au-color-page-bg); }\n.aa-tree-node.is-selected { background: var(--au-color-brand-bg); color: var(--au-color-brand); }\n.aa-tree-arrow {\n  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;\n  font-size: 12px; color: var(--au-color-text-secondary); transition: transform .15s; flex-shrink: 0;\n}\n.aa-tree-arrow.is-open { transform: rotate(90deg); }\n.aa-tree-arrow-placeholder { width: 16px; flex-shrink: 0; }\n.aa-tree-check { width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; }\n.aa-tree-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n","jsx":"import React, { useState, useMemo, useRef } from 'react';\nimport './Tree.css';\n\n/**\n * Aurora Admin Tree（React）\n * 对齐 组件2.txt Tree 规范：节点高32px、缩进16px/级、箭头12px、选中 #F0F5FF/#2F54EB、复选框级联\n * nodes: [{ key, title, children, disabled }]\n * 受控：selectedKeys / checkedKeys（均为数组），通过 onSelect / onCheck 回调更新\n */\nfunction findNode(key, nodes) {\n  for (const n of nodes) {\n    if (n.key === key) return n;\n    if (n.children) { const f = findNode(key, n.children); if (f) return f; }\n  }\n  return null;\n}\nfunction descendantKeys(node) {\n  let out = [];\n  (node.children || []).forEach((c) => { out.push(c.key); out = out.concat(descendantKeys(c)); });\n  return out;\n}\nfunction allChildrenChecked(node, set) {\n  if (!node.children || !node.children.length) return set.has(node.key);\n  return node.children.every((c) => allChildrenChecked(c, set));\n}\n\nexport default function Tree({\n  data = [],\n  checkable = false,\n  defaultExpandedKeys = [],\n  selectedKeys = [],\n  checkedKeys = [],\n  onSelect,\n  onCheck\n}) {\n  const [expanded, setExpanded] = useState(() => new Set(defaultExpandedKeys));\n  const [selected, setSelected] = useState(() => new Set(selectedKeys));\n  const [checked, setChecked] = useState(() => new Set(checkedKeys));\n\n  const visibleList = useMemo(() => {\n    const out = [];\n    const walk = (nodes, depth) => {\n      nodes.forEach((n) => {\n        out.push({ node: n, depth });\n        if (n.children && n.children.length && expanded.has(n.key)) walk(n.children, depth + 1);\n      });\n    };\n    walk(data, 0);\n    return out;\n  }, [data, expanded]);\n\n  const hasChildren = (n) => !!(n.children && n.children.length);\n  const isIndeterminate = (key) => {\n    const node = findNode(key, data);\n    if (!node || !hasChildren(node)) return false;\n    const desc = descendantKeys(node);\n    return desc.some((d) => checked.has(d)) && !allChildrenChecked(node, checked);\n  };\n\n  const toggleExpand = (key) =>\n    setExpanded((prev) => { const n = new Set(prev); n.has(key) ? n.delete(key) : n.add(key); return n; });\n\n  const onRowClick = (node) => {\n    setSelected(new Set([node.key]));\n    onSelect && onSelect(node.key);\n  };\n\n  const toggleCheck = (key) => {\n    const node = findNode(key, data);\n    const willCheck = !checked.has(key);\n    const keys = [key, ...descendantKeys(node)];\n    const next = new Set(checked);\n    keys.forEach((k) => (willCheck ? next.add(k) : next.delete(k)));\n    const propagate = (nodes) => {\n      nodes.forEach((n) => {\n        if (hasChildren(n)) {\n          if (allChildrenChecked(n, next)) next.add(n.key); else next.delete(n.key);\n          propagate(n.children);\n        }\n      });\n    };\n    propagate(data);\n    setChecked(next);\n    onCheck && onCheck([...next]);\n  };\n\n  return (\n    <div className=\"aa-tree\">\n      {visibleList.map(({ node, depth }) => {\n        const open = expanded.has(node.key);\n        const arrow = hasChildren(node) ? (\n          <span className={`aa-tree-arrow${open ? ' is-open' : ''}`} onClick={(e) => { e.stopPropagation(); toggleExpand(node.key); }}>▸</span>\n        ) : <span className=\"aa-tree-arrow-placeholder\" />;\n        const check = checkable ? (\n          <input\n            type=\"checkbox\" className=\"aa-tree-check\"\n            checked={checked.has(node.key)}\n            ref={(el) => el && (el.indeterminate = isIndeterminate(node.key))}\n            onClick={(e) => e.stopPropagation()}\n            onChange={() => toggleCheck(node.key)}\n          />\n        ) : null;\n        return (\n          <div\n            key={node.key}\n            className={`aa-tree-node${selected.has(node.key) ? ' is-selected' : ''}`}\n            style={{ paddingLeft: depth * 16 + 4 }}\n            onClick={() => onRowClick(node)}\n          >\n            {arrow}\n            {check}\n            <span className=\"aa-tree-label\">{node.title}</span>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\n/*\n用法示例：\nimport Tree from './Tree';\nconst data = [\n  { key: 'org', title: '某某科技', children: [\n    { key: 'tech', title: '技术中心', children: [{ key: 'fe', title: '前端组' }] }\n  ]}\n];\n<Tree data={data} checkable defaultExpandedKeys={['org']} onSelect={setSel} onCheck={setChecked} />\n*/\n","vue2":"<template>\n  <div class=\"aa-tree\">\n    <div\n      v-for=\"item in visibleList\" :key=\"item.node.key\"\n      class=\"aa-tree-node\"\n      :class=\"{ 'is-selected': isSelected(item.node.key) }\"\n      :style=\"{ paddingLeft: item.depth * 16 + 4 + 'px' }\"\n      @click=\"onRowClick(item.node)\"\n    >\n      <span\n        v-if=\"hasChildren(item.node)\"\n        class=\"aa-tree-arrow\"\n        :class=\"{ 'is-open': isExpanded(item.node.key) }\"\n        @click.stop=\"toggleExpand(item.node.key)\"\n      >▸</span>\n      <span v-else class=\"aa-tree-arrow-placeholder\"></span>\n\n      <input\n        v-if=\"checkable\"\n        type=\"checkbox\" class=\"aa-tree-check\"\n        :checked=\"isChecked(item.node.key)\"\n        v-indeterminate=\"isIndeterminate(item.node.key)\"\n        @click.stop=\"toggleCheck(item.node.key)\"\n      >\n      <span class=\"aa-tree-label\">{{ item.node.title }}</span>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaTree',\n  directives: {\n    indeterminate(el, binding) { el.indeterminate = !!binding.value; }\n  },\n  props: {\n    data: { type: Array, required: true },          // [{ key, title, children, disabled }]\n    checkable: { type: Boolean, default: false },\n    defaultExpandedKeys: { type: Array, default: () => [] },\n    selectedKeys: { type: Array, default: () => [] },   // v-model:selectedKeys\n    checkedKeys: { type: Array, default: () => [] }     // v-model:checkedKeys\n  },\n  data() {\n    return {\n      expanded: new Set(this.defaultExpandedKeys),\n      selected: new Set(this.selectedKeys),\n      checked: new Set(this.checkedKeys)\n    };\n  },\n  computed: {\n    visibleList() {\n      const out = [];\n      const walk = (nodes, depth) => {\n        nodes.forEach(n => {\n          out.push({ node: n, depth });\n          if (this.hasChildren(n) && this.expanded.has(n.key)) walk(n.children, depth + 1);\n        });\n      };\n      walk(this.data, 0);\n      return out;\n    }\n  },\n  methods: {\n    hasChildren(n) { return n.children && n.children.length; },\n    findNode(key, nodes = this.data) {\n      for (const n of nodes) {\n        if (n.key === key) return n;\n        if (n.children) { const f = this.findNode(key, n.children); if (f) return f; }\n      }\n      return null;\n    },\n    descendantKeys(node) {\n      let out = [];\n      (node.children || []).forEach(c => { out.push(c.key); out = out.concat(this.descendantKeys(c)); });\n      return out;\n    },\n    allChildrenChecked(node) {\n      if (!this.hasChildren(node)) return this.checked.has(node.key);\n      return node.children.every(c => this.allChildrenChecked(c));\n    },\n    isExpanded(k) { return this.expanded.has(k); },\n    isSelected(k) { return this.selected.has(k); },\n    isChecked(k) { return this.checked.has(k); },\n    isIndeterminate(k) {\n      const node = this.findNode(k);\n      if (!node || !this.hasChildren(node)) return false;\n      const desc = this.descendantKeys(node);\n      const some = desc.some(d => this.checked.has(d));\n      return some && !this.allChildrenChecked(node);\n    },\n    toggleExpand(key) {\n      this.expanded.has(key) ? this.expanded.delete(key) : this.expanded.add(key);\n      this.expanded = new Set(this.expanded);\n    },\n    onRowClick(node) {\n      this.selected = new Set([node.key]);\n      this.$emit('update:selectedKeys', [node.key]);\n      this.$emit('select', node.key);\n    },\n    toggleCheck(key) {\n      const node = this.findNode(key);\n      const willCheck = !this.checked.has(key);\n      const keys = [key, ...this.descendantKeys(node)];\n      keys.forEach(k => willCheck ? this.checked.add(k) : this.checked.delete(k));\n      // 向上级联\n      const propagate = (nodes) => {\n        nodes.forEach(n => {\n          if (this.hasChildren(n)) {\n            if (this.allChildrenChecked(n)) this.checked.add(n.key); else this.checked.delete(n.key);\n            propagate(n.children);\n          }\n        });\n      };\n      propagate(this.data);\n      this.checked = new Set(this.checked);\n      this.$emit('update:checkedKeys', [...this.checked]);\n      this.$emit('check', [...this.checked]);\n    }\n  }\n};\n</script>\n\n<!-- 样式对齐 组件2.txt Tree 规范 -->\n<style>\n.aa-tree { min-width: 240px; border: 1px solid #E8ECF1; border-radius: 8px; padding: 4px; background: #fff; }\n.aa-tree-node {\n  display: flex; align-items: center; gap: 4px; height: 32px; border-radius: 4px;\n  cursor: pointer; user-select: none; font-size: 14px; color: #262626; padding-right: 8px;\n}\n.aa-tree-node:hover { background: #F5F7FA; }\n.aa-tree-node.is-selected { background: #F0F5FF; color: #2F54EB; }\n.aa-tree-arrow {\n  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;\n  font-size: 12px; color: #6E6E6E; transition: transform .15s; flex-shrink: 0;\n}\n.aa-tree-arrow.is-open { transform: rotate(90deg); }\n.aa-tree-arrow-placeholder { width: 16px; flex-shrink: 0; }\n.aa-tree-check { width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; }\n.aa-tree-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n</style>\n","vue3":"<template>\n  <div class=\"aa-tree\">\n    <div\n      v-for=\"item in visibleList\" :key=\"item.node.key\"\n      class=\"aa-tree-node\"\n      :class=\"{ 'is-selected': isSelected(item.node.key) }\"\n      :style=\"{ paddingLeft: item.depth * 16 + 4 + 'px' }\"\n      @click=\"onRowClick(item.node)\"\n    >\n      <span\n        v-if=\"hasChildren(item.node)\"\n        class=\"aa-tree-arrow\"\n        :class=\"{ 'is-open': isExpanded(item.node.key) }\"\n        @click.stop=\"toggleExpand(item.node.key)\"\n      >▸</span>\n      <span v-else class=\"aa-tree-arrow-placeholder\"></span>\n\n      <input\n        v-if=\"checkable\"\n        type=\"checkbox\" class=\"aa-tree-check\"\n        :checked=\"isChecked(item.node.key)\"\n        :indeterminate.prop=\"isIndeterminate(item.node.key)\"\n        @click.stop=\"toggleCheck(item.node.key)\"\n      >\n      <span class=\"aa-tree-label\">{{ item.node.title }}</span>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { computed, reactive } from 'vue';\n\nconst props = defineProps({\n  data: { type: Array, required: true },          // [{ key, title, children, disabled }]\n  checkable: { type: Boolean, default: false },\n  defaultExpandedKeys: { type: Array, default: () => [] },\n  selectedKeys: { type: Array, default: () => [] },   // v-model:selectedKeys\n  checkedKeys: { type: Array, default: () => [] }     // v-model:checkedKeys\n});\nconst emit = defineEmits(['update:selectedKeys', 'select', 'update:checkedKeys', 'check']);\n\nconst state = reactive({\n  expanded: new Set(props.defaultExpandedKeys),\n  selected: new Set(props.selectedKeys),\n  checked: new Set(props.checkedKeys)\n});\n\nconst hasChildren = (n) => !!(n.children && n.children.length);\nfunction findNode(key, nodes = props.data) {\n  for (const n of nodes) {\n    if (n.key === key) return n;\n    if (n.children) { const f = findNode(key, n.children); if (f) return f; }\n  }\n  return null;\n}\nfunction descendantKeys(node) {\n  let out = [];\n  (node.children || []).forEach(c => { out.push(c.key); out = out.concat(descendantKeys(c)); });\n  return out;\n}\nfunction allChildrenChecked(node) {\n  if (!hasChildren(node)) return state.checked.has(node.key);\n  return node.children.every(c => allChildrenChecked(c));\n}\n\nconst visibleList = computed(() => {\n  const out = [];\n  const walk = (nodes, depth) => {\n    nodes.forEach(n => {\n      out.push({ node: n, depth });\n      if (hasChildren(n) && state.expanded.has(n.key)) walk(n.children, depth + 1);\n    });\n  };\n  walk(props.data, 0);\n  return out;\n});\n\nfunction isExpanded(k) { return state.expanded.has(k); }\nfunction isSelected(k) { return state.selected.has(k); }\nfunction isChecked(k) { return state.checked.has(k); }\nfunction isIndeterminate(k) {\n  const node = findNode(k);\n  if (!node || !hasChildren(node)) return false;\n  const desc = descendantKeys(node);\n  return desc.some(d => state.checked.has(d)) && !allChildrenChecked(node);\n}\n\nfunction toggleExpand(key) {\n  state.expanded.has(key) ? state.expanded.delete(key) : state.expanded.add(key);\n  state.expanded = new Set(state.expanded);\n}\nfunction onRowClick(node) {\n  state.selected = new Set([node.key]);\n  emit('update:selectedKeys', [node.key]);\n  emit('select', node.key);\n}\nfunction toggleCheck(key) {\n  const node = findNode(key);\n  const willCheck = !state.checked.has(key);\n  const keys = [key, ...descendantKeys(node)];\n  keys.forEach(k => willCheck ? state.checked.add(k) : state.checked.delete(k));\n  const propagate = (nodes) => {\n    nodes.forEach(n => {\n      if (hasChildren(n)) {\n        if (allChildrenChecked(n)) state.checked.add(n.key); else state.checked.delete(n.key);\n        propagate(n.children);\n      }\n    });\n  };\n  propagate(props.data);\n  state.checked = new Set(state.checked);\n  emit('update:checkedKeys', [...state.checked]);\n  emit('check', [...state.checked]);\n}\n</script>\n\n<!-- 样式对齐 组件2.txt Tree 规范 -->\n<style scoped>\n.aa-tree { min-width: 240px; border: 1px solid #E8ECF1; border-radius: 8px; padding: 4px; background: #fff; }\n.aa-tree-node {\n  display: flex; align-items: center; gap: 4px; height: 32px; border-radius: 4px;\n  cursor: pointer; user-select: none; font-size: 14px; color: #262626; padding-right: 8px;\n}\n.aa-tree-node:hover { background: #F5F7FA; }\n.aa-tree-node.is-selected { background: #F0F5FF; color: #2F54EB; }\n.aa-tree-arrow {\n  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;\n  font-size: 12px; color: #6E6E6E; transition: transform .15s; flex-shrink: 0;\n}\n.aa-tree-arrow.is-open { transform: rotate(90deg); }\n.aa-tree-arrow-placeholder { width: 16px; flex-shrink: 0; }\n.aa-tree-check { width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; }\n.aa-tree-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n</style>\n"}},{"slug":"dropdown","name":"下拉菜单 Dropdown","tier":"extension","confidence":"high","specBatch":2,"specFile":"组件2.txt","contractRef":"components/dropdown.json","category":"navigation","specLines":["- 触发器为按钮或文字，点击展开菜单","- 菜单项高度 32px，内边距左右 12px","- 悬停背景 #F5F7FA，危险项文字 #F5222D","- 支持分割线、禁用项、图标、子菜单","- 面板白底、圆角 6px、阴影中、最小宽度 120px"],"specSummary":"- 触发器为按钮或文字，点击展开菜单","contract":{"variants":["带图标菜单项","悬停态","危险项","禁用项","含分割线","子菜单"],"dims":[{"name":"state","values":["default","hover","disabled","danger"]},{"name":"feature","values":["divider","icon","submenu"]}],"unknowns":["子菜单的展开方向与延迟","面板最大高度与滚动"],"anatomy":{"trigger":"触发器：按钮或文字，点击展开菜单","item":"菜单项：高度 32px，内边距左右 12px","hover":"悬停背景 #F5F7FA","danger":"危险项文字 #CF1322","panel":"面板：白底、圆角 6px、阴影中、最小宽度 120px"},"doNot":["多选模式与选中标记"],"usage":["触发器为按钮或文字，点击展开菜单","菜单项高度 32px，内边距左右 12px","悬停背景 #F5F7FA，危险项文字 #CF1322","支持分割线、禁用项、图标、子菜单","面板白底、圆角 6px、阴影中、最小宽度 120px"],"structure":{"itemHeight":"32px","itemPadding":"左右 12px","hoverBg":"#F5F7FA","radius":"6px","minWidth":"120px","shadow":"中"}},"files":{"html":"../frameworks/dropdown.html","css":"../frameworks/Dropdown.css","jsx":"../frameworks/Dropdown.jsx","vue2":"../frameworks/Dropdown.vue2.vue","vue3":"../frameworks/Dropdown.vue3.vue"},"sizes":{"html":3563,"css":1279,"jsx":2068,"vue2":2516,"vue3":2465},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Aurora Admin · Dropdown (H5)</title>\n<link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\">\n<style>\n  /* 对齐 组件2.txt Dropdown 规范：项高32px、内边距左右12px、悬停 #F5F7FA、危险 #CF1322、面板圆角6px/阴影中/最小宽120px */\n  .demo { padding: 24px; background: var(--au-color-page-bg); color: var(--au-color-text-body); font-family: var(--font-family); }\n  h1 { font-size: 20px; margin: 0 0 4px; }\n  .sub { color: var(--au-color-text-secondary); margin: 0 0 24px; font-size: 12px; }\n\n  .aa-dropdown { position: relative; display: inline-block; }\n  .aa-dropdown-trigger {\n    border: 1px solid var(--au-color-border); background: var(--au-color-card-bg); border-radius: 4px; height: 32px; padding: 0 12px;\n    cursor: pointer; font-size: 14px; color: var(--au-color-text-body); display: inline-flex; align-items: center; gap: 4px;\n  }\n  .aa-dropdown-trigger:hover { border-color: var(--au-color-brand); }\n  .aa-dropdown-panel {\n    position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 120px;\n    background: var(--au-color-card-bg); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); padding: 4px 0;\n  }\n  .aa-dropdown-item {\n    display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; cursor: pointer;\n    font-size: 14px; color: var(--au-color-text-body); white-space: nowrap;\n  }\n  .aa-dropdown-item:hover { background: var(--au-color-page-bg); }\n  .aa-dropdown-item.is-danger { color: var(--au-color-error); }\n  .aa-dropdown-item.is-disabled { color: var(--au-color-text-disabled); cursor: not-allowed; }\n  .aa-dropdown-item.is-disabled:hover { background: transparent; }\n  .aa-dropdown-divider { height: 1px; background: var(--au-color-border-strong); margin: 4px 0; }\n</style>\n</head>\n<body>\n<div class=\"demo\">\n  <h1>Aurora Admin · Dropdown 组件（纯 H5）</h1>\n  <p class=\"sub\">对齐 Dropdown 规范：菜单项高32px、内边距左右12px、悬停 #F5F7FA、危险项 #CF1322、面板圆角6px/阴影中/最小宽120px</p>\n\n  <div class=\"aa-dropdown\" id=\"dd\">\n    <button class=\"aa-dropdown-trigger\" role=\"button\" tabindex=\"0\" aria-haspopup=\"listbox\" aria-expanded=\"false\" onclick=\"toggle()\">操作 ▾</button>\n    <div class=\"aa-dropdown-panel\" hidden>\n      <div class=\"aa-dropdown-item\" role=\"menuitem\" tabindex=\"0\" data-key=\"edit\">编辑</div>\n      <div class=\"aa-dropdown-item\" role=\"menuitem\" tabindex=\"0\" data-key=\"copy\">复制</div>\n      <div class=\"aa-dropdown-divider\"></div>\n      <div class=\"aa-dropdown-item\" role=\"menuitem\" tabindex=\"0\" data-key=\"disable\" class=\"is-disabled\" style=\"pointer-events:none;color:var(--color-text-placeholder)\">不可用的项</div>\n      <div class=\"aa-dropdown-item is-danger\" role=\"menuitem\" tabindex=\"0\" data-key=\"delete\">删除</div>\n    </div>\n  </div>\n</div>\n\n<script>\nconst dd = document.getElementById('dd');\nfunction toggle() {\n  const p = dd.querySelector('.aa-dropdown-panel');\n  p.hidden = !p.hidden;\n}\ndd.querySelectorAll('.aa-dropdown-item[data-key]').forEach(it => {\n  it.addEventListener('click', () => {\n    if (it.classList.contains('is-disabled')) return;\n    alert('选择了：' + it.dataset.key);\n    dd.querySelector('.aa-dropdown-panel').hidden = true;\n  });\n});\ndocument.addEventListener('click', (e) => {\n  if (!dd.contains(e.target)) dd.querySelector('.aa-dropdown-panel').hidden = true;\n});\n</script>\n</body>\n</html>\n","css":"/* Aurora Admin Dropdown 样式 — 对齐 组件2.txt Dropdown 规范 */\n.aa-dropdown { position: relative; display: inline-block; }\n.aa-dropdown-trigger {\n  border: 1px solid var(--au-color-border); background: var(--au-color-card-bg); border-radius: 4px; height: 32px; padding: 0 12px;\n  cursor: pointer; font-size: 14px; color: var(--au-color-text-body); display: inline-flex; align-items: center; gap: 4px;\n}\n.aa-dropdown-trigger:hover { border-color: var(--au-color-brand); }\n.aa-dropdown-panel {\n  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 120px;\n  background: var(--au-color-card-bg); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); padding: 4px 0;\n}\n.aa-dropdown-item {\n  display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; cursor: pointer;\n  font-size: 14px; color: var(--au-color-text-body); white-space: nowrap;\n}\n.aa-dropdown-item:hover { background: var(--au-color-page-bg); }\n.aa-dropdown-item.is-danger { color: var(--au-color-error); }\n.aa-dropdown-item.is-disabled { color: var(--au-color-text-disabled); cursor: not-allowed; }\n.aa-dropdown-item.is-disabled:hover { background: transparent; }\n.aa-dropdown-divider { height: 1px; background: var(--au-color-border-strong); margin: 4px 0; }\n","jsx":"import React, { useState, useRef, useEffect } from 'react';\nimport './Dropdown.css';\n\n/**\n * Aurora Admin Dropdown（React）\n * 对齐 组件2.txt Dropdown 规范：触发器点击展开、菜单项高32px、内边距左右12px、悬停 #F5F7FA、危险项 #CF1322、面板圆角6px/阴影中/最小宽120px\n * items: [{ key, label, danger?, disabled?, divider?, icon? }]\n */\nexport default function Dropdown({ items = [], trigger = '操作', onSelect }) {\n  const [open, setOpen] = useState(false);\n  const rootRef = useRef(null);\n\n  useEffect(() => {\n    function onDocClick(e) {\n      if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false);\n    }\n    document.addEventListener('click', onDocClick);\n    return () => document.removeEventListener('click', onDocClick);\n  }, []);\n\n  const handleClick = (item) => {\n    if (item.disabled || item.divider) return;\n    onSelect && onSelect(item.key != null ? item.key : item.label);\n    setOpen(false);\n  };\n\n  return (\n    <div className=\"aa-dropdown\" ref={rootRef}>\n      <div className=\"aa-dropdown-trigger\" onClick={() => setOpen((o) => !o)}>\n        {trigger}\n      </div>\n      {open && (\n        <div className=\"aa-dropdown-panel\">\n          {items.map((item, i) =>\n            item.divider ? (\n              <div key={`d${i}`} className=\"aa-dropdown-divider\" />\n            ) : (\n              <div\n                key={item.key || i}\n                className={`aa-dropdown-item${item.danger ? ' is-danger' : ''}${item.disabled ? ' is-disabled' : ''}`}\n                onClick={() => handleClick(item)}\n              >\n                {item.icon && <span className=\"ico\">{item.icon}</span>}\n                {item.label}\n              </div>\n            )\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/*\n用法示例：\nimport Dropdown from './Dropdown';\nconst items = [\n  { key: 'edit', label: '编辑' },\n  { key: 'copy', label: '复制' },\n  { divider: true },\n  { key: 'delete', label: '删除', danger: true }\n];\n<Dropdown items={items} onSelect={(k) => console.log(k)} />\n*/\n","vue2":"<template>\n  <div class=\"aa-dropdown\" ref=\"root\">\n    <div class=\"aa-dropdown-trigger\" @click=\"open = !open\">\n      <slot>操作</slot>\n    </div>\n    <div v-show=\"open\" class=\"aa-dropdown-panel\">\n      <template v-for=\"(item, i) in items\">\n        <div v-if=\"item.divider\" :key=\"'d' + i\" class=\"aa-dropdown-divider\"></div>\n        <div\n          v-else\n          :key=\"item.key || i\"\n          class=\"aa-dropdown-item\"\n          :class=\"{ 'is-danger': item.danger, 'is-disabled': item.disabled }\"\n          @click=\"onClick(item)\"\n        >\n          <span v-if=\"item.icon\" class=\"ico\">{{ item.icon }}</span>\n          {{ item.label }}\n        </div>\n      </template>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaDropdown',\n  props: {\n    items: { type: Array, default: () => [] },   // [{ key, label, danger, disabled, divider, icon }]\n    triggerText: { type: String, default: '操作' }\n  },\n  data() { return { open: false }; },\n  methods: {\n    onClick(item) {\n      if (item.disabled || item.divider) return;\n      this.$emit('select', item.key != null ? item.key : item.label);\n      this.open = false;\n    },\n    onDocClick(e) {\n      if (this.$refs.root && !this.$refs.root.contains(e.target)) this.open = false;\n    }\n  },\n  mounted() { document.addEventListener('click', this.onDocClick); },\n  beforeDestroy() { document.removeEventListener('click', this.onDocClick); }\n};\n</script>\n\n<!-- 样式对齐 组件2.txt Dropdown 规范 -->\n<style>\n.aa-dropdown { position: relative; display: inline-block; }\n.aa-dropdown-trigger {\n  border: 1px solid #E8ECF1; background: #fff; border-radius: 4px; height: 32px; padding: 0 12px;\n  cursor: pointer; font-size: 14px; color: #262626; display: inline-flex; align-items: center; gap: 4px;\n}\n.aa-dropdown-trigger:hover { border-color: #2F54EB; }\n.aa-dropdown-panel {\n  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 120px;\n  background: #fff; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); padding: 4px 0;\n}\n.aa-dropdown-item {\n  display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; cursor: pointer;\n  font-size: 14px; color: #262626; white-space: nowrap;\n}\n.aa-dropdown-item:hover { background: #F5F7FA; }\n.aa-dropdown-item.is-danger { color: #CF1322; }\n.aa-dropdown-item.is-disabled { color: #BFBFBF; cursor: not-allowed; }\n.aa-dropdown-item.is-disabled:hover { background: transparent; }\n.aa-dropdown-divider { height: 1px; background: #F0F0F0; margin: 4px 0; }\n</style>\n","vue3":"<template>\n  <div class=\"aa-dropdown\" ref=\"root\">\n    <div class=\"aa-dropdown-trigger\" @click=\"open = !open\">\n      <slot>操作</slot>\n    </div>\n    <div v-show=\"open\" class=\"aa-dropdown-panel\">\n      <template v-for=\"(item, i) in items\" :key=\"item.key || 'd' + i\">\n        <div v-if=\"item.divider\" class=\"aa-dropdown-divider\"></div>\n        <div\n          v-else\n          class=\"aa-dropdown-item\"\n          :class=\"{ 'is-danger': item.danger, 'is-disabled': item.disabled }\"\n          @click=\"onClick(item)\"\n        >\n          <span v-if=\"item.icon\" class=\"ico\">{{ item.icon }}</span>\n          {{ item.label }}\n        </div>\n      </template>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, onMounted, onBeforeUnmount } from 'vue';\n\ndefineProps({\n  items: { type: Array, default: () => [] }   // [{ key, label, danger, disabled, divider, icon }]\n});\nconst emit = defineEmits(['select']);\n\nconst open = ref(false);\nconst root = ref(null);\n\nfunction onClick(item) {\n  if (item.disabled || item.divider) return;\n  emit('select', item.key != null ? item.key : item.label);\n  open.value = false;\n}\nfunction onDocClick(e) {\n  if (root.value && !root.value.contains(e.target)) open.value = false;\n}\nonMounted(() => document.addEventListener('click', onDocClick));\nonBeforeUnmount(() => document.removeEventListener('click', onDocClick));\n</script>\n\n<!-- 样式对齐 组件2.txt Dropdown 规范 -->\n<style scoped>\n.aa-dropdown { position: relative; display: inline-block; }\n.aa-dropdown-trigger {\n  border: 1px solid #E8ECF1; background: #fff; border-radius: 4px; height: 32px; padding: 0 12px;\n  cursor: pointer; font-size: 14px; color: #262626; display: inline-flex; align-items: center; gap: 4px;\n}\n.aa-dropdown-trigger:hover { border-color: #2F54EB; }\n.aa-dropdown-panel {\n  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 120px;\n  background: #fff; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); padding: 4px 0;\n}\n.aa-dropdown-item {\n  display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; cursor: pointer;\n  font-size: 14px; color: #262626; white-space: nowrap;\n}\n.aa-dropdown-item:hover { background: #F5F7FA; }\n.aa-dropdown-item.is-danger { color: #CF1322; }\n.aa-dropdown-item.is-disabled { color: #BFBFBF; cursor: not-allowed; }\n.aa-dropdown-item.is-disabled:hover { background: transparent; }\n.aa-dropdown-divider { height: 1px; background: #F0F0F0; margin: 4px 0; }\n</style>\n"}},{"slug":"popconfirm","name":"气泡确认框 Popconfirm","tier":"extension","confidence":"high","specBatch":2,"specFile":"组件2.txt","contractRef":"components/popconfirm.json","category":"feedback","specLines":["- 用于危险操作二次确认（删除、下线）","- 气泡内包含提示文字、确认按钮（危险红）、取消按钮（文字）","- 触发方式：点击，位置可配置（上/下/左/右）","- 气泡背景白色，圆角 6px，阴影中，宽度约 240px"],"specSummary":"- 用于危险操作二次确认（删除、下线）","contract":{"variants":["上方气泡","下方气泡","确认中"],"dims":[{"name":"placement","values":["top","bottom","left","right"]},{"name":"state","values":["default","loading"]}],"unknowns":["自动关闭延时","确认按钮的加载态表现"],"anatomy":{"panel":"气泡：白底、圆角 6px、阴影中、宽度约 240px","text":"提示文字","confirm":"确认按钮（危险红）","cancel":"取消按钮（文字）"},"doNot":["箭头尺寸与偏移计算"],"usage":["用于危险操作二次确认（删除、下线）","气泡内包含提示文字、确认按钮（危险红）、取消按钮（文字）","触发方式：点击，位置可配置（上/下/左/右）","气泡背景白色，圆角 6px，阴影中，宽度约 240px"],"structure":{"radius":"6px","width":"240px","shadow":"中","trigger":"点击"}},"files":{"html":"../frameworks/popconfirm.html","css":"../frameworks/Popconfirm.css","jsx":"../frameworks/Popconfirm.jsx","vue2":"../frameworks/Popconfirm.vue2.vue","vue3":"../frameworks/Popconfirm.vue3.vue"},"sizes":{"html":3886,"css":1842,"jsx":2878,"vue2":3319,"vue3":4012},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Aurora Admin · Popconfirm (H5)</title>\n<link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\">\n<link rel=\"stylesheet\" href=\"./Popconfirm.css\">\n<style>\n  .demo { padding: 24px; background: var(--au-color-page-bg); font-family: var(--font-family); }\n  h1 { font-size: 20px; margin: 0 0 4px; color: var(--au-color-text-title); }\n  .sub { color: var(--au-color-text-secondary); margin: 0 0 24px; font-size: 12px; }\n  .demo-block { background: var(--au-color-card-bg); border-radius: 8px; padding: 32px; margin-bottom: 20px; }\n  .demo-block > .hint { color: var(--au-color-text-secondary); font-size: 12px; margin: 0 0 16px; }\n  .aa-btn { height: 32px; padding: 0 16px; border-radius: 4px; font-size: 14px; cursor: pointer; border: 1px solid var(--au-color-border); background: var(--au-color-card-bg); color: var(--au-color-text-body); }\n  .aa-btn.danger { border-color: var(--au-color-error); color: var(--au-color-error); }\n  .aa-btn.danger:hover { background: var(--au-color-error); color: var(--au-color-text-inverse); }\n  .log { margin-top: 16px; font-size: 13px; color: var(--au-color-text-secondary); }\n</style>\n</head>\n<body>\n<div class=\"demo\">\n  <h1>Aurora Admin · Popconfirm 组件（纯 H5）</h1>\n  <p class=\"sub\">对齐 Popconfirm 规范：气泡确认、图标+描述+确认/取消，点击外部关闭</p>\n\n  <div class=\"demo-block\">\n    <p class=\"hint\">删除确认（底部弹出）</p>\n    <span class=\"aa-popconfirm\" data-popconfirm>\n      <button class=\"aa-btn danger\">删除</button>\n      <div class=\"aa-popconfirm-pop placement-bottom\" hidden>\n        <div class=\"aa-popconfirm-inner\">\n          <span class=\"aa-popconfirm-icon\">!</span>\n          <span class=\"aa-popconfirm-title\">确定要删除该条记录吗？此操作不可撤销。</span>\n        </div>\n        <div class=\"aa-popconfirm-actions\">\n          <button class=\"aa-popconfirm-btn\" data-act=\"cancel\">取消</button>\n          <button class=\"aa-popconfirm-btn primary\" data-act=\"ok\">确定</button>\n        </div>\n      </div>\n    </span>\n    <div class=\"log\" id=\"log\">结果：—</div>\n  </div>\n\n  <div class=\"demo-block\">\n    <p class=\"hint\">顶部弹出</p>\n    <span class=\"aa-popconfirm\" data-popconfirm>\n      <button class=\"aa-btn\">提交</button>\n      <div class=\"aa-popconfirm-pop placement-top\" hidden>\n        <div class=\"aa-popconfirm-inner\">\n          <span class=\"aa-popconfirm-icon\">!</span>\n          <span class=\"aa-popconfirm-title\">确定要提交审批吗？</span>\n        </div>\n        <div class=\"aa-popconfirm-actions\">\n          <button class=\"aa-popconfirm-btn\" data-act=\"cancel\">取消</button>\n          <button class=\"aa-popconfirm-btn primary\" data-act=\"ok\">确定</button>\n        </div>\n      </div>\n    </span>\n  </div>\n</div>\n\n<script>\ndocument.querySelectorAll('[data-popconfirm]').forEach(root => {\n  const trigger = root.querySelector('button');\n  const pop = root.querySelector('.aa-popconfirm-pop');\n\n  trigger.addEventListener('click', (e) => {\n    e.stopPropagation();\n    const open = pop.hidden;\n    closeAll();\n    pop.hidden = !open;\n  });\n\n  pop.querySelector('[data-act=\"cancel\"]').addEventListener('click', (e) => {\n    e.stopPropagation(); pop.hidden = true;\n  });\n  pop.querySelector('[data-act=\"ok\"]').addEventListener('click', (e) => {\n    e.stopPropagation(); pop.hidden = true;\n    const log = document.getElementById('log');\n    if (log) log.textContent = '结果：已确认（ok）';\n  });\n\n  // 点击气泡本身不关闭\n  pop.addEventListener('click', (e) => e.stopPropagation());\n});\n\nfunction closeAll() {\n  document.querySelectorAll('.aa-popconfirm-pop').forEach(p => p.hidden = true);\n}\ndocument.addEventListener('click', closeAll);\n</script>\n</body>\n</html>\n","css":"/* Aurora Admin Popconfirm 样式 — 对齐 组件2.txt Popconfirm：气泡确认、图标+描述+确认/取消 */\n\n.aa-popconfirm { position: relative; display: inline-block; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); }\n.aa-popconfirm-pop {\n  position: absolute; z-index: 100; min-width: 220px; background: var(--au-color-card-bg); border: 1px solid var(--au-color-border);\n  border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); padding: 12px 14px;\n}\n.aa-popconfirm-pop.placement-bottom { top: calc(100% + 8px); left: 0; }\n.aa-popconfirm-pop.placement-top { bottom: calc(100% + 8px); left: 0; }\n\n.aa-popconfirm-inner { display: flex; gap: 8px; }\n.aa-popconfirm-icon { flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--au-color-warning); color: var(--au-color-text-inverse);\n  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 2px; }\n.aa-popconfirm-title { font-size: 14px; color: var(--au-color-text-body); line-height: 1.5; }\n\n.aa-popconfirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }\n.aa-popconfirm-btn { height: 28px; padding: 0 12px; border-radius: 4px; font-size: 13px; cursor: pointer;\n  border: 1px solid var(--au-color-border); background: var(--au-color-card-bg); color: var(--au-color-text-body); transition: border-color .15s, color .15s; }\n.aa-popconfirm-btn:hover { color: var(--au-color-brand); border-color: var(--au-color-brand); }\n.aa-popconfirm-btn.primary { background: var(--au-color-brand); border-color: var(--au-color-brand); color: var(--au-color-text-inverse); }\n.aa-popconfirm-btn.primary:hover { background: var(--au-color-brand-hover); border-color: var(--au-color-brand-hover); color: var(--au-color-text-inverse); }\n","jsx":"import React, { useRef, useState, useEffect } from 'react';\nimport './Popconfirm.css';\n\n/**\n * Aurora Admin Popconfirm（React）\n * 对齐 组件2.txt Popconfirm 规范：气泡确认、图标+描述+确认/取消，点击外部关闭\n *\n * props:\n *  - title      : 确认描述文本\n *  - okText / cancelText\n *  - placement  : 'bottom' | 'top'\n *  - visible / defaultVisible : 受控打开\n *  - onConfirm() / onCancel()\n *  - children   : 触发元素（如按钮）\n */\nexport default function Popconfirm({\n  title,\n  okText = '确定',\n  cancelText = '取消',\n  placement = 'bottom',\n  visible,\n  defaultVisible = false,\n  onConfirm,\n  onCancel,\n  children\n}) {\n  const rootRef = useRef(null);\n  const [innerOpen, setInnerOpen] = useState(defaultVisible);\n  const open = visible !== undefined ? visible : innerOpen;\n  const [style, setStyle] = useState({});\n\n  const syncPos = () => {\n    if (!rootRef.current) return;\n    const r = rootRef.current.getBoundingClientRect();\n    setStyle(placement === 'top'\n      ? { left: r.left, bottom: window.innerHeight - r.top }\n      : { left: r.left, top: r.bottom + 8 });\n  };\n  const setOpen = (v) => {\n    if (visible === undefined) setInnerOpen(v);\n    if (v) { syncPos(); document.addEventListener('click', onDocClick, true); window.addEventListener('resize', syncPos); }\n    else { document.removeEventListener('click', onDocClick, true); window.removeEventListener('resize', syncPos); }\n  };\n  const onDocClick = (e) => {\n    if (rootRef.current && rootRef.current.contains(e.target)) return;\n    setOpen(false);\n  };\n\n  useEffect(() => {\n    if (open) { syncPos(); document.addEventListener('click', onDocClick, true); window.addEventListener('resize', syncPos); }\n    return () => { document.removeEventListener('click', onDocClick, true); window.removeEventListener('resize', syncPos); };\n  }, [open]);\n\n  const confirm = () => { onConfirm && onConfirm(); setOpen(false); };\n  const cancel = () => { onCancel && onCancel(); setOpen(false); };\n\n  return (\n    <span className=\"aa-popconfirm\" ref={rootRef}>\n      <span onClick={() => setOpen(!open)}>{children}</span>\n      {open && (\n        <div className={`aa-popconfirm-pop placement-${placement}`} style={style}>\n          <div className=\"aa-popconfirm-inner\">\n            <span className=\"aa-popconfirm-icon\">!</span>\n            <span className=\"aa-popconfirm-title\">{title}</span>\n          </div>\n          <div className=\"aa-popconfirm-actions\">\n            <button className=\"aa-popconfirm-btn\" onClick={cancel}>{cancelText}</button>\n            <button className=\"aa-popconfirm-btn primary\" onClick={confirm}>{okText}</button>\n          </div>\n        </div>\n      )}\n    </span>\n  );\n}\n\n/*\n用法示例：\nimport Popconfirm from './Popconfirm';\n<Popconfirm title=\"确定要删除吗？\" onConfirm={handleDelete}>\n  <button>删除</button>\n</Popconfirm>\n*/\n","vue2":"<template>\n  <span class=\"aa-popconfirm\" ref=\"root\">\n    <span @click=\"toggle\">\n      <slot />\n    </span>\n    <div\n      v-if=\"open\"\n      class=\"aa-popconfirm-pop\"\n      :class=\"'placement-' + placement\"\n    >\n      <div class=\"aa-popconfirm-inner\">\n        <span class=\"aa-popconfirm-icon\">!</span>\n        <span class=\"aa-popconfirm-title\">{{ title }}</span>\n      </div>\n      <div class=\"aa-popconfirm-actions\">\n        <button class=\"aa-popconfirm-btn\" @click=\"cancel\">{{ cancelText }}</button>\n        <button class=\"aa-popconfirm-btn primary\" @click=\"confirm\">{{ okText }}</button>\n      </div>\n    </div>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: 'AaPopconfirm',\n  props: {\n    value: { type: Boolean, default: undefined },     // 受控打开\n    title: { type: String, required: true },\n    okText: { type: String, default: '确定' },\n    cancelText: { type: String, default: '取消' },\n    placement: { type: String, default: 'bottom' }     // bottom | top\n  },\n  data() { return { innerOpen: false }; },\n  computed: {\n    open() { return this.value !== undefined ? this.value : this.innerOpen; }\n  },\n  watch: {\n    value(v) { this.bindOutside(v); }\n  },\n  methods: {\n    setOpen(v) {\n      if (this.value !== undefined) this.$emit('input', v);\n      else this.innerOpen = v;\n      this.bindOutside(v);\n    },\n    bindOutside(v) {\n      if (v) document.addEventListener('click', this.onDocClick, true);\n      else document.removeEventListener('click', this.onDocClick, true);\n    },\n    toggle() { this.setOpen(!this.open); },\n    confirm() { this.$emit('confirm'); this.setOpen(false); },\n    cancel() { this.$emit('cancel'); this.setOpen(false); },\n    onDocClick(e) {\n      if (this.$refs.root && this.$refs.root.contains(e.target)) return;\n      this.setOpen(false);\n    }\n  },\n  beforeDestroy() { document.removeEventListener('click', this.onDocClick, true); }\n};\n</script>\n\n<!-- 样式对齐 组件2.txt Popconfirm 规范 -->\n<style>\n.aa-popconfirm { position: relative; display: inline-block; }\n.aa-popconfirm-pop { position: absolute; z-index: 100; min-width: 220px; background: #fff; border: 1px solid #E8ECF1;\n  border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); padding: 12px 14px; }\n.aa-popconfirm-pop.placement-bottom { top: calc(100% + 8px); left: 0; }\n.aa-popconfirm-pop.placement-top { bottom: calc(100% + 8px); left: 0; }\n.aa-popconfirm-inner { display: flex; gap: 8px; }\n.aa-popconfirm-icon { flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; background: #8C5A00; color: #fff;\n  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 2px; }\n.aa-popconfirm-title { font-size: 14px; color: #262626; line-height: 1.5; }\n.aa-popconfirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }\n.aa-popconfirm-btn { height: 28px; padding: 0 12px; border-radius: 4px; font-size: 13px; cursor: pointer;\n  border: 1px solid #E8ECF1; background: #fff; color: #262626; transition: border-color .15s, color .15s; }\n.aa-popconfirm-btn:hover { color: #2F54EB; border-color: #2F54EB; }\n.aa-popconfirm-btn.primary { background: #2F54EB; border-color: #2F54EB; color: #fff; }\n.aa-popconfirm-btn.primary:hover { background: #1D39C4; border-color: #1D39C4; color: #fff; }\n</style>\n","vue3":"<template>\n  <span class=\"aa-popconfirm\" ref=\"root\">\n    <span @click=\"toggle\">\n      <slot />\n    </span>\n    <teleport to=\"body\">\n      <div\n        v-if=\"open\"\n        class=\"aa-popconfirm-pop\"\n        :class=\"'placement-' + placement\"\n        :style=\"popStyle\"\n      >\n        <div class=\"aa-popconfirm-inner\">\n          <span class=\"aa-popconfirm-icon\">!</span>\n          <span class=\"aa-popconfirm-title\">{{ title }}</span>\n        </div>\n        <div class=\"aa-popconfirm-actions\">\n          <button class=\"aa-popconfirm-btn\" @click=\"cancel\">{{ cancelText }}</button>\n          <button class=\"aa-popconfirm-btn primary\" @click=\"confirm\">{{ okText }}</button>\n        </div>\n      </div>\n    </teleport>\n  </span>\n</template>\n\n<script setup>\nimport { ref, computed, watch, onBeforeUnmount } from 'vue';\n\nconst props = defineProps({\n  modelValue: { type: Boolean, default: undefined },  // 受控打开\n  title: { type: String, required: true },\n  okText: { type: String, default: '确定' },\n  cancelText: { type: String, default: '取消' },\n  placement: { type: String, default: 'bottom' }       // bottom | top\n});\nconst emit = defineEmits(['update:modelValue', 'confirm', 'cancel']);\n\nconst root = ref(null);\nconst innerOpen = ref(false);\nconst open = computed(() => props.modelValue !== undefined ? props.modelValue : innerOpen.value);\n\nconst popStyle = ref({});\nfunction syncPosition() {\n  if (!root.value || !open.value) return;\n  const r = root.value.getBoundingClientRect();\n  popStyle.value = props.placement === 'top'\n    ? { left: r.left + 'px', bottom: (window.innerHeight - r.top) + 'px' }\n    : { left: r.left + 'px', top: r.bottom + 8 + 'px' };\n}\n\nfunction setOpen(v) {\n  if (props.modelValue !== undefined) emit('update:modelValue', v);\n  else innerOpen.value = v;\n  if (v) { syncPosition(); document.addEventListener('click', onDocClick, true); window.addEventListener('resize', syncPosition); }\n  else { document.removeEventListener('click', onDocClick, true); window.removeEventListener('resize', syncPosition); }\n}\nfunction toggle() { setOpen(!open.value); }\nfunction confirm() { emit('confirm'); setOpen(false); }\nfunction cancel() { emit('cancel'); setOpen(false); }\nfunction onDocClick(e) {\n  if (root.value && root.value.contains(e.target)) return;\n  setOpen(false);\n}\n\nwatch(() => props.modelValue, (v) => {\n  if (v) { syncPosition(); document.addEventListener('click', onDocClick, true); window.addEventListener('resize', syncPosition); }\n  else { document.removeEventListener('click', onDocClick, true); window.removeEventListener('resize', syncPosition); }\n});\nonBeforeUnmount(() => { document.removeEventListener('click', onDocClick, true); window.removeEventListener('resize', syncPosition); });\n</script>\n\n<!-- 样式对齐 组件2.txt Popconfirm 规范 -->\n<style scoped>\n.aa-popconfirm { position: relative; display: inline-block; }\n.aa-popconfirm-pop { position: fixed; z-index: 100; min-width: 220px; background: #fff; border: 1px solid #E8ECF1;\n  border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); padding: 12px 14px; }\n.aa-popconfirm-inner { display: flex; gap: 8px; }\n.aa-popconfirm-icon { flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; background: #8C5A00; color: #fff;\n  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 2px; }\n.aa-popconfirm-title { font-size: 14px; color: #262626; line-height: 1.5; }\n.aa-popconfirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }\n.aa-popconfirm-btn { height: 28px; padding: 0 12px; border-radius: 4px; font-size: 13px; cursor: pointer;\n  border: 1px solid #E8ECF1; background: #fff; color: #262626; transition: border-color .15s, color .15s; }\n.aa-popconfirm-btn:hover { color: #2F54EB; border-color: #2F54EB; }\n.aa-popconfirm-btn.primary { background: #2F54EB; border-color: #2F54EB; color: #fff; }\n.aa-popconfirm-btn.primary:hover { background: #1D39C4; border-color: #1D39C4; color: #fff; }\n</style>\n"}},{"slug":"segmented","name":"分段控制器 Segmented","tier":"extension","confidence":"high","specBatch":2,"specFile":"组件2.txt","contractRef":"components/segmented.json","category":"input","specLines":["- 用于视图切换、筛选条件切换","- 默认高度 32px，选项内边距 8px 16px","- 选中项背景白色（在浅灰容器内）或品牌色（背景深色时）","- 圆角 4px，容器背景 #F5F7FA","- 支持图标+文字，禁用态文字 #BFBFBF"],"specSummary":"- 用于视图切换、筛选条件切换","contract":{"variants":["视图切换分段","图标+文字分段","禁用态分段"],"dims":[{"name":"optionContent","values":["text","icon-text"]},{"name":"theme","values":["light(选中白底)","dark(选中品牌色)"]},{"name":"state","values":["default","disabled"]}],"unknowns":["深色背景容器的具体判定场景"],"anatomy":{"container":"容器高 32px，圆角 4px，背景 #F5F7FA","option":"选项内边距 8px 16px","selected":"选中项背景白色（浅灰容器内）或品牌色（背景深色时）"},"doNot":["超长选项的滚动截断规则"],"usage":["用于视图切换、筛选条件切换","选中项背景白色（浅灰容器内）或品牌色（深色背景）","支持图标+文字，禁用态文字 #BFBFBF"],"structure":{"height":"32px","optionPadding":"8px 16px","radius":"4px"}},"files":{"html":"../frameworks/segmented.html","css":"../frameworks/Segmented.css","jsx":"../frameworks/Segmented.jsx","vue2":"../frameworks/Segmented.vue2.vue","vue3":"../frameworks/Segmented.vue3.vue"},"sizes":{"html":2405,"css":833,"jsx":1387,"vue2":1481,"vue3":1505},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Aurora Admin · Segmented (H5)</title>\n<link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\">\n<style>\n  /* 对齐 组件2.txt Segmented 规范：高32px、选项内边距8px 16px、容器 #F5F7FA、圆角4px、选中白底、禁用 #BFBFBF */\n  .demo { padding: 24px; background: var(--au-color-page-bg); color: var(--au-color-text-body); font-family: var(--font-family); }\n  h1 { font-size: 20px; margin: 0 0 4px; }\n  .sub { color: var(--au-color-text-secondary); margin: 0 0 24px; font-size: 12px; }\n\n  .aa-segmented {\n    display: inline-flex; align-items: center; background: var(--au-color-page-bg); border-radius: 4px; padding: 2px;\n  }\n  .aa-segmented-item {\n    height: 28px; padding: 0 16px; display: inline-flex; align-items: center; gap: 6px;\n    border-radius: 4px; cursor: pointer; font-size: 14px; color: var(--au-color-text-body); border: none; background: none;\n    transition: background .15s, color .15s;\n  }\n  .aa-segmented-item:hover:not(.is-active):not(.is-disabled) { color: var(--au-color-brand); }\n  .aa-segmented-item.is-active { background: var(--au-color-card-bg); color: var(--au-color-text-body); box-shadow: 0 1px 2px rgba(0,0,0,0.08); font-weight: 500; }\n  .aa-segmented-item.is-disabled { color: var(--au-color-text-disabled); cursor: not-allowed; }\n</style>\n</head>\n<body>\n<div class=\"demo\">\n  <h1>Aurora Admin · Segmented 组件（纯 H5）</h1>\n  <p class=\"sub\">对齐 Segmented 规范：高32px、选项内边距8px 16px、容器 #F5F7FA、圆角4px、选中白底、禁用 #BFBFBF</p>\n\n  <div class=\"aa-segmented\" id=\"seg\">\n    <button class=\"aa-segmented-item is-active\" data-val=\"list\">列表</button>\n    <button class=\"aa-segmented-item\" data-val=\"kanban\">看板</button>\n    <button class=\"aa-segmented-item\" data-val=\"gantt\">甘特图</button>\n    <button class=\"aa-segmented-item is-disabled\" data-val=\"cal\" disabled>日历</button>\n  </div>\n</div>\n\n<script>\nconst seg = document.getElementById('seg');\nseg.addEventListener('click', (e) => {\n  const btn = e.target.closest('.aa-segmented-item');\n  if (!btn || btn.disabled) return;\n  seg.querySelectorAll('.aa-segmented-item').forEach(b => b.classList.remove('is-active'));\n  btn.classList.add('is-active');\n});\n</script>\n</body>\n</html>\n","css":"/* Aurora Admin Segmented 样式 — 对齐 组件2.txt Segmented 规范 */\n.aa-segmented {\n  display: inline-flex; align-items: center; background: var(--au-color-page-bg); border-radius: 4px; padding: 2px;\n}\n.aa-segmented-item {\n  height: 28px; padding: 0 16px; display: inline-flex; align-items: center; gap: 6px;\n  border-radius: 4px; cursor: pointer; font-size: 14px; color: var(--au-color-text-body); border: none; background: none;\n  transition: background .15s, color .15s;\n}\n.aa-segmented-item:hover:not(.is-active):not(.is-disabled) { color: var(--au-color-brand); }\n.aa-segmented-item.is-active { background: var(--au-color-card-bg); color: var(--au-color-text-body); box-shadow: 0 1px 2px rgba(0,0,0,0.08); font-weight: 500; }\n.aa-segmented-item.is-disabled { color: var(--au-color-text-disabled); cursor: not-allowed; }\n","jsx":"import React from 'react';\nimport './Segmented.css';\n\n/**\n * Aurora Admin Segmented（React）\n * 对齐 组件2.txt Segmented 规范：高32px、选项内边距8px 16px、容器 #F5F7FA、圆角4px、选中白底、禁用 #BFBFBF\n * options: [{ label, value, icon?, disabled? }]\n * 受控：value + onChange；非受控：defaultValue\n */\nexport default function Segmented({ value, defaultValue, options = [], onChange }) {\n  const current = value !== undefined ? value : defaultValue;\n\n  const choose = (opt) => {\n    if (opt.disabled) return;\n    if (value === undefined) onChange && onChange(opt.value);\n    else onChange && onChange(opt.value);\n  };\n\n  return (\n    <div className=\"aa-segmented\">\n      {options.map((opt) => (\n        <button\n          key={opt.value}\n          className={`aa-segmented-item${current === opt.value ? ' is-active' : ''}${opt.disabled ? ' is-disabled' : ''}`}\n          disabled={opt.disabled}\n          onClick={() => choose(opt)}\n        >\n          {opt.icon && <span className=\"ico\">{opt.icon}</span>}\n          {opt.label}\n        </button>\n      ))}\n    </div>\n  );\n}\n\n/*\n用法示例：\nimport Segmented from './Segmented';\nconst opts = [\n  { label: '列表', value: 'list' },\n  { label: '看板', value: 'kanban' },\n  { label: '日历', value: 'cal', disabled: true }\n];\n<Segmented options={opts} defaultValue=\"list\" onChange={setView} />\n*/\n","vue2":"<template>\n  <div class=\"aa-segmented\">\n    <button\n      v-for=\"opt in options\" :key=\"opt.value\"\n      class=\"aa-segmented-item\"\n      :class=\"{ 'is-active': value === opt.value, 'is-disabled': opt.disabled }\"\n      :disabled=\"opt.disabled\"\n      @click=\"choose(opt)\"\n    >\n      <span v-if=\"opt.icon\" class=\"ico\">{{ opt.icon }}</span>\n      {{ opt.label }}\n    </button>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaSegmented',\n  props: {\n    value: { type: [String, Number], default: '' },\n    options: { type: Array, required: true }   // [{ label, value, icon?, disabled? }]\n  },\n  methods: {\n    choose(opt) {\n      if (opt.disabled) return;\n      this.$emit('input', opt.value);\n      this.$emit('change', opt.value);\n    }\n  }\n};\n</script>\n\n<!-- 样式对齐 组件2.txt Segmented 规范 -->\n<style>\n.aa-segmented {\n  display: inline-flex; align-items: center; background: #F5F7FA; border-radius: 4px; padding: 2px;\n}\n.aa-segmented-item {\n  height: 28px; padding: 0 16px; display: inline-flex; align-items: center; gap: 6px;\n  border-radius: 4px; cursor: pointer; font-size: 14px; color: #262626; border: none; background: none;\n  transition: background .15s, color .15s;\n}\n.aa-segmented-item:hover:not(.is-active):not(.is-disabled) { color: #2F54EB; }\n.aa-segmented-item.is-active { background: #fff; color: #262626; box-shadow: 0 1px 2px rgba(0,0,0,0.08); font-weight: 500; }\n.aa-segmented-item.is-disabled { color: #BFBFBF; cursor: not-allowed; }\n</style>\n","vue3":"<template>\n  <div class=\"aa-segmented\">\n    <button\n      v-for=\"opt in options\" :key=\"opt.value\"\n      class=\"aa-segmented-item\"\n      :class=\"{ 'is-active': modelValue === opt.value, 'is-disabled': opt.disabled }\"\n      :disabled=\"opt.disabled\"\n      @click=\"choose(opt)\"\n    >\n      <span v-if=\"opt.icon\" class=\"ico\">{{ opt.icon }}</span>\n      {{ opt.label }}\n    </button>\n  </div>\n</template>\n\n<script setup>\nconst props = defineProps({\n  modelValue: { type: [String, Number], default: '' },\n  options: { type: Array, required: true }   // [{ label, value, icon?, disabled? }]\n});\nconst emit = defineEmits(['update:modelValue', 'change']);\n\nfunction choose(opt) {\n  if (opt.disabled) return;\n  emit('update:modelValue', opt.value);\n  emit('change', opt.value);\n}\n</script>\n\n<!-- 样式对齐 组件2.txt Segmented 规范 -->\n<style scoped>\n.aa-segmented {\n  display: inline-flex; align-items: center; background: #F5F7FA; border-radius: 4px; padding: 2px;\n}\n.aa-segmented-item {\n  height: 28px; padding: 0 16px; display: inline-flex; align-items: center; gap: 6px;\n  border-radius: 4px; cursor: pointer; font-size: 14px; color: #262626; border: none; background: none;\n  transition: background .15s, color .15s;\n}\n.aa-segmented-item:hover:not(.is-active):not(.is-disabled) { color: #2F54EB; }\n.aa-segmented-item.is-active { background: #fff; color: #262626; box-shadow: 0 1px 2px rgba(0,0,0,0.08); font-weight: 500; }\n.aa-segmented-item.is-disabled { color: #BFBFBF; cursor: not-allowed; }\n</style>\n"}},{"slug":"transfer","name":"穿梭框 Transfer","tier":"extension","confidence":"high","specBatch":2,"specFile":"组件2.txt","contractRef":"components/transfer.json","category":"input","specLines":["- 用于批量选择，左右两栏列表","- 列表项高度 32px，带复选框","- 中间操作按钮：右移、左移、全部右移、全部左移","- 顶部搜索框，底部已选数量统计","- 面板宽度 200–240px，高度 256px，滚动"],"specSummary":"- 用于批量选择，左右两栏列表","contract":{"variants":["带搜索穿梭框","基础穿梭框（支持拖拽）"],"dims":[{"name":"search","values":["with-search","without-search"]},{"name":"operation","values":["move","move-all"]},{"name":"drag","values":["support","none"]}],"unknowns":["拖拽跨栏的具体交互细节"],"anatomy":{"source-panel":"左栏候选列表，顶部搜索框","target-panel":"右栏已选列表，底部已选数量统计","operation-buttons":"中间操作按钮：右移、左移、全部右移、全部左移","item":"列表项高 32px，带复选框"},"doNot":["树形穿梭框","面板内分页"],"usage":["用于批量选择，左右两栏列表","列表项带复选框，项高 32px","顶部搜索框，底部已选数量统计","适用于权限分配、成员选择"],"structure":{"panel":"@{width=200-240px; height=256px; scroll=True}"}},"files":{"html":"../frameworks/transfer.html","css":"../frameworks/Transfer.css","jsx":"../frameworks/Transfer.jsx","vue2":"../frameworks/Transfer.vue2.vue","vue3":"../frameworks/Transfer.vue3.vue"},"sizes":{"html":4345,"css":2581,"jsx":3560,"vue2":5407,"vue3":5536},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Aurora Admin · Transfer (H5)</title>\n<link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\">\n<link rel=\"stylesheet\" href=\"./Transfer.css\">\n<style>\n  .demo { padding: 24px; background: var(--au-color-page-bg); font-family: var(--font-family); }\n  h1 { font-size: 20px; margin: 0 0 4px; color: var(--au-color-text-title); }\n  .sub { color: var(--au-color-text-secondary); margin: 0 0 24px; font-size: 12px; }\n  .demo-block { background: var(--au-color-card-bg); border-radius: 8px; padding: 20px; margin-bottom: 20px; display: inline-block; }\n</style>\n</head>\n<body>\n<div class=\"demo\">\n  <h1>Aurora Admin · Transfer 组件（纯 H5）</h1>\n  <p class=\"sub\">对齐 Transfer 规范：左右两栏、搜索、复选框、已选数量</p>\n\n  <div class=\"demo-block\">\n    <div class=\"aa-transfer\" data-transfer></div>\n  </div>\n</div>\n\n<script>\n(function () {\n  const root = document.querySelector('[data-transfer]');\n  const DATA = [\n    { key: '1', label: '研发部' }, { key: '2', label: '产品部' }, { key: '3', label: '设计部' },\n    { key: '4', label: '市场部' }, { key: '5', label: '销售部' }, { key: '6', label: '运营部' },\n    { key: '7', label: '财务部' }, { key: '8', label: '人事部' }\n  ];\n\n  let selected = ['1', '2'];\n  const leftChecked = new Set();\n  const rightChecked = new Set();\n  let leftQ = '', rightQ = '';\n\n  function render() {\n    const leftItems = DATA.filter(d => !selected.includes(d.key) && d.label.includes(leftQ));\n    const rightItems = DATA.filter(d => selected.includes(d.key) && d.label.includes(rightQ));\n\n    root.innerHTML = `\n      <div class=\"aa-transfer-panel\">\n        <div class=\"aa-transfer-head\"><span>候选部门</span><span class=\"count\">${leftChecked.size}/${leftItems.length}</span></div>\n        <div class=\"aa-transfer-search\"><input placeholder=\"搜索\" data-q=\"left\"></div>\n        <div class=\"aa-transfer-body\" data-body=\"left\">\n          ${leftItems.map(d => `\n            <div class=\"aa-transfer-item ${leftChecked.has(d.key) ? 'is-checked' : ''}\" role=\"option\" tabindex=\"0\" data-key=\"${d.key}\">\n              <span class=\"box\">${leftChecked.has(d.key) ? '✓' : ''}</span>${d.label}\n            </div>`).join('') || '<div class=\"aa-transfer-empty\">无数据</div>'}\n        </div>\n      </div>\n      <div class=\"aa-transfer-ops\">\n        <button data-op=\"right\" ${leftChecked.size ? '' : 'disabled'}>›</button>\n        <button data-op=\"left\" ${rightChecked.size ? '' : 'disabled'}>‹</button>\n      </div>\n      <div class=\"aa-transfer-panel\">\n        <div class=\"aa-transfer-head\"><span>已选部门</span><span class=\"count\">${rightChecked.size}/${rightItems.length}</span></div>\n        <div class=\"aa-transfer-search\"><input placeholder=\"搜索\" data-q=\"right\"></div>\n        <div class=\"aa-transfer-body\" data-body=\"right\">\n          ${rightItems.map(d => `\n            <div class=\"aa-transfer-item ${rightChecked.has(d.key) ? 'is-checked' : ''}\" role=\"option\" tabindex=\"0\" data-key=\"${d.key}\">\n              <span class=\"box\">${rightChecked.has(d.key) ? '✓' : ''}</span>${d.label}\n            </div>`).join('') || '<div class=\"aa-transfer-empty\">无数据</div>'}\n        </div>\n      </div>`;\n  }\n\n  root.addEventListener('click', (e) => {\n    const item = e.target.closest('.aa-transfer-item');\n    const op = e.target.closest('[data-op]');\n    const search = e.target.closest('[data-q]');\n    if (search) {\n      search.addEventListener('input', (ev) => {\n        if (ev.target.dataset.q === 'left') leftQ = ev.target.value; else rightQ = ev.target.value;\n        render();\n      }, { once: true });\n      return;\n    }\n    if (item) {\n      const key = item.dataset.key;\n      const set = item.closest('[data-body=\"left\"]') ? leftChecked : rightChecked;\n      set.has(key) ? set.delete(key) : set.add(key);\n      render();\n    } else if (op) {\n      if (op.dataset.op === 'right') {\n        leftChecked.forEach(k => { if (!selected.includes(k)) selected.push(k); });\n        leftChecked.clear();\n      } else {\n        selected = selected.filter(k => !rightChecked.has(k));\n        rightChecked.clear();\n      }\n      render();\n    }\n  });\n\n  render();\n})();\n</script>\n</body>\n</html>\n","css":"/* Aurora Admin Transfer 样式 — 对齐 组件7.txt Transfer：左右两栏、搜索、复选框、已选数量 */\n\n.aa-transfer { display: inline-flex; align-items: stretch; gap: 12px; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); color: var(--au-color-text-body); }\n.aa-transfer-panel { width: 220px; border: 1px solid var(--au-color-border); border-radius: 6px; background: var(--au-color-card-bg); display: flex; flex-direction: column; }\n.aa-transfer-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--au-color-border); font-size: 14px; }\n.aa-transfer-head .count { color: var(--au-color-text-secondary); font-size: 12px; }\n.aa-transfer-search { padding: 8px 12px; border-bottom: 1px solid var(--au-color-border); }\n.aa-transfer-search input { width: 100%; box-sizing: border-box; height: 30px; padding: 0 8px; border: 1px solid var(--au-color-border); border-radius: 4px; font-size: 13px; outline: none; color: var(--au-color-text-body); }\n.aa-transfer-search input:focus { border-color: var(--au-color-brand); box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }\n.aa-transfer-body { flex: 1; min-height: 180px; max-height: 240px; overflow: auto; padding: 4px 0; }\n.aa-transfer-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; font-size: 14px; }\n.aa-transfer-item:hover { background: var(--au-color-page-bg); }\n.aa-transfer-item.is-disabled { color: var(--au-color-text-disabled); cursor: not-allowed; }\n.aa-transfer-item .box { width: 14px; height: 14px; border: 1px solid var(--au-color-border); border-radius: 3px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--au-color-text-inverse); font-size: 10px; }\n.aa-transfer-item.is-checked .box { background: var(--au-color-brand); border-color: var(--au-color-brand); }\n.aa-transfer-empty { padding: 32px 12px; text-align: center; color: var(--au-color-text-placeholder); font-size: 13px; }\n.aa-transfer-ops { display: flex; flex-direction: column; justify-content: center; gap: 8px; }\n.aa-transfer-ops button { width: 32px; height: 32px; border-radius: 4px; border: 1px solid var(--au-color-border); background: var(--au-color-card-bg); color: var(--au-color-text-body); cursor: pointer; font-size: 14px; }\n.aa-transfer-ops button:hover:not(:disabled) { color: var(--au-color-brand); border-color: var(--au-color-brand); }\n.aa-transfer-ops button:disabled { color: var(--au-color-text-disabled); cursor: not-allowed; }\n","jsx":"import React, { useState, useMemo } from 'react';\nimport './Transfer.css';\n\n/**\n * Aurora Admin Transfer（React）\n * 对齐 组件7.txt Transfer 规范：左右两栏、搜索、复选框、已选数量\n *\n * props:\n *  - value / defaultValue : 已选 key 数组\n *  - data    : [{ key, label, disabled? }]\n *  - titles  : [左标题, 右标题]\n *  - filterable\n *  - onChange(keys)\n */\nexport default function Transfer({\n  value,\n  defaultValue = [],\n  data = [],\n  titles = ['候选列表', '已选列表'],\n  filterable = false,\n  onChange\n}) {\n  const [selected, setSelected] = useState(value !== undefined ? value : defaultValue);\n  const current = value !== undefined ? value : selected;\n  const [leftChecked, setLeftChecked] = useState([]);\n  const [rightChecked, setRightChecked] = useState([]);\n  const [leftQ, setLeftQ] = useState('');\n  const [rightQ, setRightQ] = useState('');\n\n  const filteredLeft = useMemo(\n    () => data.filter(d => !current.includes(d.key) && d.label.includes(leftQ)),\n    [data, current, leftQ]\n  );\n  const filteredRight = useMemo(\n    () => data.filter(d => current.includes(d.key) && d.label.includes(rightQ)),\n    [data, current, rightQ]\n  );\n\n  const setVal = (next) => {\n    if (value === undefined) setSelected(next);\n    onChange && onChange(next);\n  };\n  const toggle = (which, key) => {\n    const item = data.find(d => d.key === key);\n    if (item && item.disabled) return;\n    const arr = which === 'left' ? leftChecked : rightChecked;\n    const set = which === 'left' ? setLeftChecked : setRightChecked;\n    set(arr.includes(key) ? arr.filter(k => k !== key) : [...arr, key]);\n  };\n  const moveRight = () => {\n    setVal([...current, ...leftChecked]);\n    setLeftChecked([]);\n  };\n  const moveLeft = () => {\n    const set = new Set(rightChecked);\n    setVal(current.filter(k => !set.has(k)));\n    setRightChecked([]);\n  };\n\n  const Panel = ({ title, items, checked, q, setQ, side }) => (\n    <div className=\"aa-transfer-panel\">\n      <div className=\"aa-transfer-head\">\n        <span>{title}</span>\n        <span className=\"count\">{checked.length}/{items.length}</span>\n      </div>\n      {filterable && (\n        <div className=\"aa-transfer-search\">\n          <input value={q} onChange={(e) => setQ(e.target.value)} placeholder=\"搜索\" />\n        </div>\n      )}\n      <div className=\"aa-transfer-body\">\n        {items.map(d => (\n          <div\n            key={d.key}\n            className={`aa-transfer-item${checked.includes(d.key) ? ' is-checked' : ''}${d.disabled ? ' is-disabled' : ''}`}\n            onClick={() => toggle(side, d.key)}\n          >\n            <span className=\"box\">{checked.includes(d.key) ? '✓' : ''}</span>{d.label}\n          </div>\n        ))}\n        {!items.length && <div className=\"aa-transfer-empty\">无数据</div>}\n      </div>\n    </div>\n  );\n\n  return (\n    <div className=\"aa-transfer\">\n      <Panel title={titles[0]} items={filteredLeft} checked={leftChecked} q={leftQ} setQ={setLeftQ} side=\"left\" />\n      <div className=\"aa-transfer-ops\">\n        <button disabled={!leftChecked.length} onClick={moveRight}>›</button>\n        <button disabled={!rightChecked.length} onClick={moveLeft}>‹</button>\n      </div>\n      <Panel title={titles[1]} items={filteredRight} checked={rightChecked} q={rightQ} setQ={setRightQ} side=\"right\" />\n    </div>\n  );\n}\n\n/*\n用法示例：\nimport Transfer from './Transfer';\nconst data = [{ key: '1', label: '研发部' }, { key: '2', label: '产品部' }];\n<Transfer data={data} defaultValue={['1']} filterable onChange={setKeys} />\n*/\n","vue2":"<template>\n  <div class=\"aa-transfer\">\n    <div class=\"aa-transfer-panel\">\n      <div class=\"aa-transfer-head\">\n        <span>{{ titles[0] }}</span>\n        <span class=\"count\">{{ leftChecked.length }}/{{ filteredLeft.length }}</span>\n      </div>\n      <div v-if=\"filterable\" class=\"aa-transfer-search\">\n        <input v-model=\"leftQ\" placeholder=\"搜索\">\n      </div>\n      <div class=\"aa-transfer-body\">\n        <div\n          v-for=\"d in filteredLeft\" :key=\"d.key\"\n          class=\"aa-transfer-item\" :class=\"{ 'is-checked': leftChecked.includes(d.key), 'is-disabled': d.disabled }\"\n          @click=\"toggle(leftChecked, d.key)\"\n        >\n          <span class=\"box\">{{ leftChecked.includes(d.key) ? '✓' : '' }}</span>{{ d.label }}\n        </div>\n        <div v-if=\"!filteredLeft.length\" class=\"aa-transfer-empty\">无数据</div>\n      </div>\n    </div>\n\n    <div class=\"aa-transfer-ops\">\n      <button :disabled=\"!leftChecked.length\" @click=\"moveRight\">›</button>\n      <button :disabled=\"!rightChecked.length\" @click=\"moveLeft\">‹</button>\n    </div>\n\n    <div class=\"aa-transfer-panel\">\n      <div class=\"aa-transfer-head\">\n        <span>{{ titles[1] }}</span>\n        <span class=\"count\">{{ rightChecked.length }}/{{ filteredRight.length }}</span>\n      </div>\n      <div v-if=\"filterable\" class=\"aa-transfer-search\">\n        <input v-model=\"rightQ\" placeholder=\"搜索\">\n      </div>\n      <div class=\"aa-transfer-body\">\n        <div\n          v-for=\"d in filteredRight\" :key=\"d.key\"\n          class=\"aa-transfer-item\" :class=\"{ 'is-checked': rightChecked.includes(d.key) }\"\n          @click=\"toggle(rightChecked, d.key)\"\n        >\n          <span class=\"box\">{{ rightChecked.includes(d.key) ? '✓' : '' }}</span>{{ d.label }}\n        </div>\n        <div v-if=\"!filteredRight.length\" class=\"aa-transfer-empty\">无数据</div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaTransfer',\n  props: {\n    value: { type: Array, default: () => [] },                 // 已选 key 列表\n    data: { type: Array, required: true },                     // [{ key, label, disabled? }]\n    titles: { type: Array, default: () => ['候选列表', '已选列表'] },\n    filterable: { type: Boolean, default: false }\n  },\n  data() {\n    return { leftChecked: [], rightChecked: [], leftQ: '', rightQ: '' };\n  },\n  computed: {\n    filteredLeft() {\n      return this.data.filter(d => !this.value.includes(d.key) && d.label.includes(this.leftQ));\n    },\n    filteredRight() {\n      return this.data.filter(d => this.value.includes(d.key) && d.label.includes(this.rightQ));\n    }\n  },\n  methods: {\n    toggle(arr, key) {\n      const item = this.data.find(d => d.key === key);\n      if (item && item.disabled) return;\n      const i = arr.indexOf(key);\n      if (i >= 0) arr.splice(i, 1); else arr.push(key);\n    },\n    moveRight() {\n      const next = [...this.value, ...this.leftChecked];\n      this.leftChecked = [];\n      this.$emit('input', next);\n      this.$emit('change', next);\n    },\n    moveLeft() {\n      const set = new Set(this.rightChecked);\n      const next = this.value.filter(k => !set.has(k));\n      this.rightChecked = [];\n      this.$emit('input', next);\n      this.$emit('change', next);\n    }\n  }\n};\n</script>\n\n<!-- 样式对齐 组件7.txt Transfer 规范 -->\n<style>\n.aa-transfer { display: inline-flex; align-items: stretch; gap: 12px; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); color: #262626; }\n.aa-transfer-panel { width: 220px; border: 1px solid #E8ECF1; border-radius: 6px; background: #fff; display: flex; flex-direction: column; }\n.aa-transfer-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid #E8ECF1; font-size: 14px; }\n.aa-transfer-head .count { color: #6E6E6E; font-size: 12px; }\n.aa-transfer-search { padding: 8px 12px; border-bottom: 1px solid #E8ECF1; }\n.aa-transfer-search input { width: 100%; box-sizing: border-box; height: 30px; padding: 0 8px; border: 1px solid #E8ECF1; border-radius: 4px; font-size: 13px; outline: none; color: #262626; }\n.aa-transfer-search input:focus { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }\n.aa-transfer-body { flex: 1; min-height: 180px; max-height: 240px; overflow: auto; padding: 4px 0; }\n.aa-transfer-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; font-size: 14px; }\n.aa-transfer-item:hover { background: #F5F7FA; }\n.aa-transfer-item.is-disabled { color: #BFBFBF; cursor: not-allowed; }\n.aa-transfer-item .box { width: 14px; height: 14px; border: 1px solid #E8ECF1; border-radius: 3px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; }\n.aa-transfer-item.is-checked .box { background: #2F54EB; border-color: #2F54EB; }\n.aa-transfer-empty { padding: 32px 12px; text-align: center; color: #767676; font-size: 13px; }\n.aa-transfer-ops { display: flex; flex-direction: column; justify-content: center; gap: 8px; }\n.aa-transfer-ops button { width: 32px; height: 32px; border-radius: 4px; border: 1px solid #E8ECF1; background: #fff; color: #262626; cursor: pointer; font-size: 14px; }\n.aa-transfer-ops button:hover:not(:disabled) { color: #2F54EB; border-color: #2F54EB; }\n.aa-transfer-ops button:disabled { color: #BFBFBF; cursor: not-allowed; }\n</style>\n","vue3":"<template>\n  <div class=\"aa-transfer\">\n    <!-- 左栏：未选中 -->\n    <div class=\"aa-transfer-panel\">\n      <div class=\"aa-transfer-head\">\n        <span>{{ titles[0] }}</span>\n        <span class=\"count\">{{ leftChecked.length }}/{{ filteredLeft.length }}</span>\n      </div>\n      <div v-if=\"filterable\" class=\"aa-transfer-search\">\n        <input v-model=\"leftQ\" placeholder=\"搜索\">\n      </div>\n      <div class=\"aa-transfer-body\">\n        <div\n          v-for=\"d in filteredLeft\" :key=\"d.key\"\n          class=\"aa-transfer-item\" :class=\"{ 'is-checked': leftChecked.includes(d.key), 'is-disabled': d.disabled }\"\n          @click=\"toggle(leftChecked, d.key)\"\n        >\n          <span class=\"box\">{{ leftChecked.includes(d.key) ? '✓' : '' }}</span>{{ d.label }}\n        </div>\n        <div v-if=\"!filteredLeft.length\" class=\"aa-transfer-empty\">无数据</div>\n      </div>\n    </div>\n\n    <!-- 中间操作 -->\n    <div class=\"aa-transfer-ops\">\n      <button :disabled=\"!leftChecked.length\" @click=\"moveRight\">›</button>\n      <button :disabled=\"!rightChecked.length\" @click=\"moveLeft\">‹</button>\n    </div>\n\n    <!-- 右栏：已选中 -->\n    <div class=\"aa-transfer-panel\">\n      <div class=\"aa-transfer-head\">\n        <span>{{ titles[1] }}</span>\n        <span class=\"count\">{{ rightChecked.length }}/{{ filteredRight.length }}</span>\n      </div>\n      <div v-if=\"filterable\" class=\"aa-transfer-search\">\n        <input v-model=\"rightQ\" placeholder=\"搜索\">\n      </div>\n      <div class=\"aa-transfer-body\">\n        <div\n          v-for=\"d in filteredRight\" :key=\"d.key\"\n          class=\"aa-transfer-item\" :class=\"{ 'is-checked': rightChecked.includes(d.key) }\"\n          @click=\"toggle(rightChecked, d.key)\"\n        >\n          <span class=\"box\">{{ rightChecked.includes(d.key) ? '✓' : '' }}</span>{{ d.label }}\n        </div>\n        <div v-if=\"!filteredRight.length\" class=\"aa-transfer-empty\">无数据</div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed } from 'vue';\n\nconst props = defineProps({\n  modelValue: { type: Array, default: () => [] },           // 已选 key 列表\n  data: { type: Array, required: true },                    // [{ key, label, disabled? }]\n  titles: { type: Array, default: () => ['候选列表', '已选列表'] },\n  filterable: { type: Boolean, default: false }\n});\nconst emit = defineEmits(['update:modelValue', 'change']);\n\nconst leftChecked = ref([]);\nconst rightChecked = ref([]);\nconst leftQ = ref('');\nconst rightQ = ref('');\n\nconst filteredLeft = computed(() =>\n  props.data.filter(d => !props.modelValue.includes(d.key) && d.label.includes(leftQ.value))\n);\nconst filteredRight = computed(() =>\n  props.data.filter(d => props.modelValue.includes(d.key) && d.label.includes(rightQ.value))\n);\n\nfunction toggle(arr, key) {\n  const item = props.data.find(d => d.key === key);\n  if (item && item.disabled) return;\n  const i = arr.indexOf(key);\n  if (i >= 0) arr.splice(i, 1); else arr.push(key);\n}\nfunction moveRight() {\n  const next = [...props.modelValue, ...leftChecked.value];\n  leftChecked.value = [];\n  emit('update:modelValue', next);\n  emit('change', next);\n}\nfunction moveLeft() {\n  const set = new Set(rightChecked.value);\n  const next = props.modelValue.filter(k => !set.has(k));\n  rightChecked.value = [];\n  emit('update:modelValue', next);\n  emit('change', next);\n}\n</script>\n\n<!-- 样式对齐 组件7.txt Transfer 规范 -->\n<style scoped>\n.aa-transfer { display: inline-flex; align-items: stretch; gap: 12px; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); color: #262626; }\n.aa-transfer-panel { width: 220px; border: 1px solid #E8ECF1; border-radius: 6px; background: #fff; display: flex; flex-direction: column; }\n.aa-transfer-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid #E8ECF1; font-size: 14px; }\n.aa-transfer-head .count { color: #6E6E6E; font-size: 12px; }\n.aa-transfer-search { padding: 8px 12px; border-bottom: 1px solid #E8ECF1; }\n.aa-transfer-search input { width: 100%; box-sizing: border-box; height: 30px; padding: 0 8px; border: 1px solid #E8ECF1; border-radius: 4px; font-size: 13px; outline: none; color: #262626; }\n.aa-transfer-search input:focus { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }\n.aa-transfer-body { flex: 1; min-height: 180px; max-height: 240px; overflow: auto; padding: 4px 0; }\n.aa-transfer-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; font-size: 14px; }\n.aa-transfer-item:hover { background: #F5F7FA; }\n.aa-transfer-item.is-disabled { color: #BFBFBF; cursor: not-allowed; }\n.aa-transfer-item .box { width: 14px; height: 14px; border: 1px solid #E8ECF1; border-radius: 3px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; }\n.aa-transfer-item.is-checked .box { background: #2F54EB; border-color: #2F54EB; }\n.aa-transfer-empty { padding: 32px 12px; text-align: center; color: #767676; font-size: 13px; }\n.aa-transfer-ops { display: flex; flex-direction: column; justify-content: center; gap: 8px; }\n.aa-transfer-ops button { width: 32px; height: 32px; border-radius: 4px; border: 1px solid #E8ECF1; background: #fff; color: #262626; cursor: pointer; font-size: 14px; }\n.aa-transfer-ops button:hover:not(:disabled) { color: #2F54EB; border-color: #2F54EB; }\n.aa-transfer-ops button:disabled { color: #BFBFBF; cursor: not-allowed; }\n</style>\n"}},{"slug":"rate","name":"评分 Rate","tier":"extension","confidence":"high","specBatch":2,"specFile":"组件2.txt","contractRef":"components/rate.json","category":"input","specLines":["- 用于评价、满意度打分","- 默认 5 星，可配置 1–10 星","- 选中星颜色 #FAAD14，未选中 #E8ECF1","- 尺寸 16/20/24px，支持半星、只读、字符自定义"],"specSummary":"- 用于评价、满意度打分","contract":{"variants":["默认五星评分","只读评分","半星评分"],"dims":[{"name":"count","values":["default-5","configurable-1-10"]},{"name":"size","values":["16px","20px","24px"]},{"name":"mode","values":["editable","readonly"]},{"name":"half","values":["support","none"]}],"unknowns":["字符自定义的具体形态"],"anatomy":{"star-group":"星组，横向排列","star-on":"选中星，颜色 #FAAD14","star-off":"未选中星，颜色 #E8ECF1"},"doNot":["评分文字描述映射（如 很差/很好）"],"usage":["用于评价、满意度打分","默认 5 星，可配置 1-10 星","选中星 #FAAD14，未选中 #E8ECF1","支持半星、只读、字符自定义"],"structure":{"size":"16px 20px 24px"}},"files":{"html":"../frameworks/rate.html","css":"../frameworks/Rate.css","jsx":"../frameworks/Rate.jsx","vue2":"../frameworks/Rate.vue2.vue","vue3":"../frameworks/Rate.vue3.vue"},"sizes":{"html":3586,"css":1134,"jsx":2026,"vue2":2695,"vue3":2706},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Aurora Admin · Rate (H5)</title>\n<link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\">\n<link rel=\"stylesheet\" href=\"./Rate.css\">\n<style>\n  .demo { padding: 24px; background: var(--au-color-page-bg); font-family: var(--font-family); }\n  h1 { font-size: 20px; margin: 0 0 4px; color: var(--au-color-text-title); }\n  .sub { color: var(--au-color-text-secondary); margin: 0 0 24px; font-size: 12px; }\n  .demo-block { background: var(--au-color-card-bg); border-radius: 8px; padding: 16px; margin-bottom: 20px; }\n  .demo-block > .hint { color: var(--au-color-text-secondary); font-size: 12px; margin: 0 0 12px; }\n</style>\n</head>\n<body>\n<div class=\"demo\">\n  <h1>Aurora Admin · Rate 组件（纯 H5）</h1>\n  <p class=\"sub\">对齐 RateInput 规范：星级、半星、只读、尺寸、文字</p>\n\n  <div class=\"demo-block\">\n    <p class=\"hint\">基础（点击评分）</p>\n    <div class=\"aa-rate\" role=\"radiogroup\" data-rate data-count=\"5\" data-value=\"3\"></div>\n  </div>\n\n  <div class=\"demo-block\">\n    <p class=\"hint\">允许半星</p>\n    <div class=\"aa-rate\" role=\"radiogroup\" data-rate data-count=\"5\" data-value=\"2.5\" data-half></div>\n  </div>\n\n  <div class=\"demo-block\">\n    <p class=\"hint\">只读 + 显示文字</p>\n    <div class=\"aa-rate is-readonly\" role=\"radiogroup\" data-rate data-count=\"5\" data-value=\"4\" data-text></div>\n  </div>\n\n  <div class=\"demo-block\">\n    <p class=\"hint\">尺寸：small / default / large</p>\n    <div class=\"aa-rate sm\" role=\"radiogroup\" data-rate data-count=\"5\" data-value=\"3\"></div>\n    <div class=\"aa-rate\" role=\"radiogroup\" data-rate data-count=\"5\" data-value=\"3\"></div>\n    <div class=\"aa-rate lg\" role=\"radiogroup\" data-rate data-count=\"5\" data-value=\"3\"></div>\n  </div>\n</div>\n\n<script>\nfunction renderRate(root) {\n  const count = +root.dataset.count || 5;\n  const allowHalf = root.hasAttribute('data-half');\n  const showText = root.hasAttribute('data-text');\n  const texts = ['极差', '失望', '一般', '满意', '惊喜'];\n  let value = parseFloat(root.dataset.value) || 0;\n\n  function paint() {\n    root.innerHTML = '';\n    for (let i = 0; i < count; i++) {\n      const ratio = Math.max(0, Math.min(1, value - i));\n      const star = document.createElement('span');\n      star.className = 'aa-rate-star'; star.setAttribute('role','radio'); star.setAttribute('tabindex','0');\n      star.dataset.index = i;\n      star.innerHTML = '★<span class=\"aa-rate-fill\" style=\"width:' + (ratio * 100) + '%\">★</span>';\n      root.appendChild(star);\n    }\n    if (showText) {\n      const t = document.createElement('span');\n      t.className = 'aa-rate-text';\n      t.textContent = value ? texts[Math.ceil(value) - 1] : '未评分';\n      root.appendChild(t);\n    }\n  }\n\n  root.addEventListener('click', (e) => {\n    if (root.classList.contains('is-readonly') || root.classList.contains('is-disabled')) return;\n    const star = e.target.closest('.aa-rate-star');\n    if (!star) return;\n    const i = +star.dataset.index;\n    let next;\n    if (allowHalf) {\n      const rect = star.getBoundingClientRect();\n      const half = (e.clientX - rect.left) < rect.width / 2;\n      next = half ? i + 0.5 : i + 1;\n    } else {\n      next = i + 1;\n    }\n    if (next === value) next = 0; // 再次点击同一星清零\n    value = next;\n    root.dataset.value = value;\n    paint();\n  });\n\n  paint();\n}\ndocument.querySelectorAll('[data-rate]').forEach(renderRate);\n</script>\n</body>\n</html>\n","css":"/* Aurora Admin Rate 样式 — 对齐 组件7.txt RateInput：星级、半星、只读、尺寸、文字 */\n\n.aa-rate { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); }\n.aa-rate-star { position: relative; display: inline-block; font-size: 20px; line-height: 1; color: var(--au-color-border); cursor: pointer; transition: color .15s, transform .1s; }\n.aa-rate-star:hover { transform: scale(1.1); }\n.aa-rate-star .aa-rate-fill { position: absolute; left: 0; top: 0; overflow: hidden; color: var(--au-color-brand); white-space: nowrap; pointer-events: none; }\n.aa-rate.is-readonly .aa-rate-star,\n.aa-rate.is-disabled .aa-rate-star { cursor: default; }\n.aa-rate.is-readonly .aa-rate-star:hover,\n.aa-rate.is-disabled .aa-rate-star:hover { transform: none; }\n.aa-rate-text { margin-left: 8px; font-size: 14px; color: var(--au-color-text-secondary); }\n.aa-rate.sm .aa-rate-star { font-size: 14px; }\n.aa-rate.lg .aa-rate-star { font-size: 28px; }\n.aa-rate.sm .aa-rate-text { font-size: 12px; }\n.aa-rate.lg .aa-rate-text { font-size: 16px; }\n","jsx":"import React, { useState } from 'react';\nimport './Rate.css';\n\n/**\n * Aurora Admin Rate（React）\n * 对齐 组件7.txt RateInput 规范：星级、半星、只读、尺寸、文字\n *\n * props:\n *  - value / defaultValue : 评分数值\n *  - count    : 星数（默认 5）\n *  - allowHalf: 允许半星\n *  - readonly / disabled\n *  - size     : 'default' | 'sm' | 'lg'\n *  - showText : 是否显示评分文字\n *  - texts    : 文字数组\n *  - onChange(value)\n */\nconst DEFAULT_TEXTS = ['极差', '失望', '一般', '满意', '惊喜'];\n\nexport default function Rate({\n  value,\n  defaultValue = 0,\n  count = 5,\n  allowHalf = false,\n  readonly = false,\n  disabled = false,\n  size = 'default',\n  showText = false,\n  texts = DEFAULT_TEXTS,\n  onChange\n}) {\n  const [inner, setInner] = useState(defaultValue);\n  const current = value !== undefined ? value : inner;\n\n  const stars = Array.from({ length: count }, (_, i) => Math.max(0, Math.min(1, current - i)));\n  const textLabel = current ? texts[Math.ceil(current) - 1] : '未评分';\n\n  const choose = (evt, i) => {\n    if (readonly || disabled) return;\n    let next = i + 1;\n    if (allowHalf) {\n      const rect = evt.currentTarget.getBoundingClientRect();\n      const half = (evt.clientX - rect.left) < rect.width / 2;\n      next = half ? i + 0.5 : i + 1;\n    }\n    if (next === current) next = 0;\n    if (value === undefined) setInner(next);\n    onChange && onChange(next);\n  };\n\n  return (\n    <div className={`aa-rate${size !== 'default' ? ' ' + size : ''}${readonly ? ' is-readonly' : ''}${disabled ? ' is-disabled' : ''}`}>\n      {stars.map((s, i) => (\n        <span key={i} className=\"aa-rate-star\" onClick={(e) => choose(e, i)}>\n          ★<span className=\"aa-rate-fill\" style={{ width: (s * 100) + '%' }}>★</span>\n        </span>\n      ))}\n      {showText && <span className=\"aa-rate-text\">{textLabel}</span>}\n    </div>\n  );\n}\n\n/*\n用法示例：\nimport Rate from './Rate';\n<Rate count={5} allowHalf defaultValue={2.5} showText onChange={setScore} />\n*/\n","vue2":"<template>\n  <div class=\"aa-rate\" :class=\"[size !== 'default' ? size : '', { 'is-readonly': readonly, 'is-disabled': disabled }]\">\n    <span\n      v-for=\"(s, i) in stars\" :key=\"i\"\n      class=\"aa-rate-star\"\n      @click=\"choose($event, i)\"\n    >\n      ★<span class=\"aa-rate-fill\" :style=\"{ width: (s * 100) + '%' }\">★</span>\n    </span>\n    <span v-if=\"showText\" class=\"aa-rate-text\">{{ textLabel }}</span>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaRate',\n  props: {\n    value: { type: Number, default: 0 },            // 当前评分\n    count: { type: Number, default: 5 },\n    allowHalf: { type: Boolean, default: false },\n    readonly: { type: Boolean, default: false },\n    disabled: { type: Boolean, default: false },\n    size: { type: String, default: 'default' },      // default | sm | lg\n    showText: { type: Boolean, default: false },\n    texts: { type: Array, default: () => ['极差', '失望', '一般', '满意', '惊喜'] }\n  },\n  computed: {\n    stars() {\n      return Array.from({ length: this.count }, (_, i) => Math.max(0, Math.min(1, this.value - i)));\n    },\n    textLabel() {\n      return this.value ? this.texts[Math.ceil(this.value) - 1] : '未评分';\n    }\n  },\n  methods: {\n    choose(evt, i) {\n      if (this.readonly || this.disabled) return;\n      let next = i + 1;\n      if (this.allowHalf) {\n        const rect = evt.currentTarget.getBoundingClientRect();\n        const half = (evt.clientX - rect.left) < rect.width / 2;\n        next = half ? i + 0.5 : i + 1;\n      }\n      if (next === this.value) next = 0;\n      this.$emit('input', next);\n      this.$emit('change', next);\n    }\n  }\n};\n</script>\n\n<!-- 样式对齐 组件7.txt RateInput 规范 -->\n<style>\n.aa-rate { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); }\n.aa-rate-star { position: relative; display: inline-block; font-size: 20px; line-height: 1; color: #E8ECF1; cursor: pointer; transition: color .15s, transform .1s; }\n.aa-rate-star:hover { transform: scale(1.1); }\n.aa-rate-star .aa-rate-fill { position: absolute; left: 0; top: 0; overflow: hidden; color: #2F54EB; white-space: nowrap; pointer-events: none; }\n.aa-rate.is-readonly .aa-rate-star,\n.aa-rate.is-disabled .aa-rate-star { cursor: default; }\n.aa-rate.is-readonly .aa-rate-star:hover,\n.aa-rate.is-disabled .aa-rate-star:hover { transform: none; }\n.aa-rate-text { margin-left: 8px; font-size: 14px; color: #6E6E6E; }\n.aa-rate.sm .aa-rate-star { font-size: 14px; }\n.aa-rate.lg .aa-rate-star { font-size: 28px; }\n.aa-rate.sm .aa-rate-text { font-size: 12px; }\n.aa-rate.lg .aa-rate-text { font-size: 16px; }\n</style>\n","vue3":"<template>\n  <div class=\"aa-rate\" :class=\"[size !== 'default' ? size : '', { 'is-readonly': readonly, 'is-disabled': disabled }]\">\n    <span\n      v-for=\"(s, i) in stars\" :key=\"i\"\n      class=\"aa-rate-star\"\n      @click=\"choose($event, i)\"\n    >\n      ★<span class=\"aa-rate-fill\" :style=\"{ width: (s * 100) + '%' }\">★</span>\n    </span>\n    <span v-if=\"showText\" class=\"aa-rate-text\">{{ textLabel }}</span>\n  </div>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\n\nconst props = defineProps({\n  modelValue: { type: Number, default: 0 },   // 当前评分\n  count: { type: Number, default: 5 },\n  allowHalf: { type: Boolean, default: false },\n  readonly: { type: Boolean, default: false },\n  disabled: { type: Boolean, default: false },\n  size: { type: String, default: 'default' },  // default | sm | lg\n  showText: { type: Boolean, default: false },\n  texts: { type: Array, default: () => ['极差', '失望', '一般', '满意', '惊喜'] }\n});\nconst emit = defineEmits(['update:modelValue', 'change']);\n\nconst stars = computed(() =>\n  Array.from({ length: props.count }, (_, i) => Math.max(0, Math.min(1, props.modelValue - i)))\n);\nconst textLabel = computed(() => props.modelValue ? props.texts[Math.ceil(props.modelValue) - 1] : '未评分');\n\nfunction choose(evt, i) {\n  if (props.readonly || props.disabled) return;\n  let next = i + 1;\n  if (props.allowHalf) {\n    const rect = evt.currentTarget.getBoundingClientRect();\n    const half = (evt.clientX - rect.left) < rect.width / 2;\n    next = half ? i + 0.5 : i + 1;\n  }\n  if (next === props.modelValue) next = 0;\n  emit('update:modelValue', next);\n  emit('change', next);\n}\n</script>\n\n<!-- 样式对齐 组件7.txt RateInput 规范 -->\n<style scoped>\n.aa-rate { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); }\n.aa-rate-star { position: relative; display: inline-block; font-size: 20px; line-height: 1; color: #E8ECF1; cursor: pointer; transition: color .15s, transform .1s; }\n.aa-rate-star:hover { transform: scale(1.1); }\n.aa-rate-star .aa-rate-fill { position: absolute; left: 0; top: 0; overflow: hidden; color: #2F54EB; white-space: nowrap; pointer-events: none; }\n.aa-rate.is-readonly .aa-rate-star,\n.aa-rate.is-disabled .aa-rate-star { cursor: default; }\n.aa-rate.is-readonly .aa-rate-star:hover,\n.aa-rate.is-disabled .aa-rate-star:hover { transform: none; }\n.aa-rate-text { margin-left: 8px; font-size: 14px; color: #6E6E6E; }\n.aa-rate.sm .aa-rate-star { font-size: 14px; }\n.aa-rate.lg .aa-rate-star { font-size: 28px; }\n.aa-rate.sm .aa-rate-text { font-size: 12px; }\n.aa-rate.lg .aa-rate-text { font-size: 16px; }\n</style>\n"}},{"slug":"slider","name":"滑块 Slider","tier":"extension","confidence":"high","specBatch":2,"specFile":"组件2.txt","contractRef":"components/slider.json","category":"input","specLines":["- 用于范围筛选、参数调节","- 轨道高度 4px，圆角 2px","- 未选中段 #E8ECF1，选中段 #2F54EB","- 滑块圆点 14px，白色，阴影中，悬停放大","- 支持刻度标记、输入框联动、双滑块范围"],"specSummary":"- 用于范围筛选、参数调节","contract":{"variants":["单滑块","双滑块范围","带刻度滑块"],"dims":[{"name":"mode","values":["single","range"]},{"name":"marks","values":["with-marks","none"]},{"name":"inputLink","values":["support","none"]}],"unknowns":["刻度标签的密度规则"],"anatomy":{"track":"轨道高 4px，圆角 2px","filled":"选中段 #2F54EB","rest":"未选中段 #E8ECF1","thumb":"滑块圆点 14px，白色，阴影中，悬停放大"},"doNot":["垂直滑块"],"usage":["用于范围筛选、参数调节","未选中段 #E8ECF1，选中段 #2F54EB","支持刻度标记、输入框联动、双滑块范围"],"structure":{"trackHeight":"4px","thumbSize":"14px"}},"files":{"html":"../frameworks/slider.html","css":"../frameworks/Slider.css","jsx":"../frameworks/Slider.jsx","vue2":"../frameworks/Slider.vue2.vue","vue3":"../frameworks/Slider.vue3.vue"},"sizes":{"html":6884,"css":1959,"jsx":4366,"vue2":5757,"vue3":5649},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Aurora Admin · Slider (H5)</title>\n<link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\">\n<link rel=\"stylesheet\" href=\"./Slider.css\">\n<style>\n  .demo { padding: 24px; background: var(--au-color-page-bg); font-family: var(--font-family); }\n  h1 { font-size: 20px; margin: 0 0 4px; color: var(--au-color-text-title); }\n  .sub { color: var(--au-color-text-secondary); margin: 0 0 24px; font-size: 12px; }\n  .demo-block { background: var(--au-color-card-bg); border-radius: 8px; padding: 20px 24px; margin-bottom: 20px; }\n  .demo-block > .hint { color: var(--au-color-text-secondary); font-size: 12px; margin: 0 0 12px; }\n  .slider-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }\n  .slider-row .lab { width: 72px; font-size: 13px; color: var(--au-color-text-body); }\n</style>\n</head>\n<body>\n<div class=\"demo\">\n  <h1>Aurora Admin · Slider 组件（纯 H5）</h1>\n  <p class=\"sub\">对齐 SliderInput 规范：单/双滑块、刻度、输入框联动</p>\n\n  <div class=\"demo-block\">\n    <p class=\"hint\">单滑块 + 数值联动</p>\n    <div class=\"slider-row\">\n      <span class=\"lab\">音量</span>\n      <div class=\"aa-slider\" role=\"slider\" tabindex=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\" data-slider data-min=\"0\" data-max=\"100\" data-value=\"30\" data-input></div>\n    </div>\n  </div>\n\n  <div class=\"demo-block\">\n    <p class=\"hint\">带刻度</p>\n    <div class=\"aa-slider\" role=\"slider\" tabindex=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\" data-slider data-min=\"0\" data-max=\"100\" data-step=\"10\" data-value=\"50\" data-ticks></div>\n  </div>\n\n  <div class=\"demo-block\">\n    <p class=\"hint\">双滑块范围</p>\n    <div class=\"aa-slider\" role=\"slider\" tabindex=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\" data-slider data-range data-min=\"0\" data-max=\"100\" data-value=\"20,60\"></div>\n  </div>\n\n  <div class=\"demo-block\">\n    <p class=\"hint\">禁用</p>\n    <div class=\"aa-slider is-disabled\" role=\"slider\" tabindex=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\" data-slider data-min=\"0\" data-max=\"100\" data-value=\"40\"></div>\n  </div>\n</div>\n\n<script>\nfunction initSlider(root) {\n  const min = +root.dataset.min || 0, max = +root.dataset.max || 100, step = +root.dataset.step || 1;\n  const range = root.hasAttribute('data-range');\n  const showTicks = root.hasAttribute('data-ticks');\n  const showInput = root.hasAttribute('data-input');\n  let value = range\n    ? root.dataset.value.split(',').map(Number)\n    : (+root.dataset.value || 0);\n\n  const track = document.createElement('div');\n  track.className = 'aa-slider-track';\n  track.innerHTML = '<div class=\"aa-slider-rail\" role=\"slider\" tabindex=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div><div class=\"aa-slider-fill\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div><div class=\"aa-slider-ticks\" role=\"slider\" tabindex=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>';\n  if (range) {\n    track.insertAdjacentHTML('beforeend', '<div class=\"aa-slider-handle\" role=\"slider\" tabindex=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\" data-i=\"0\"></div><div class=\"aa-slider-handle\" role=\"slider\" tabindex=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\" data-i=\"1\"></div>');\n  } else {\n    track.insertAdjacentHTML('beforeend', '<div class=\"aa-slider-handle\" role=\"slider\" tabindex=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\" data-i=\"0\"></div>');\n  }\n  root.appendChild(track);\n\n  const valueWrap = document.createElement('div');\n  valueWrap.className = 'aa-slider-value';\n  if (showInput) {\n    if (range) {\n      valueWrap.innerHTML = '<input type=\"number\"><span>—</span><input type=\"number\">';\n    } else {\n      valueWrap.innerHTML = '<input type=\"number\">';\n    }\n    root.appendChild(valueWrap);\n    valueWrap.querySelectorAll('input').forEach(inp => {\n      inp.addEventListener('change', () => {\n        if (range) {\n          const a = +valueWrap.querySelectorAll('input')[0].value;\n          const b = +valueWrap.querySelectorAll('input')[1].value;\n          value = [Math.min(a, b), Math.max(a, b)];\n        } else {\n          value = +inp.value;\n        }\n        paint();\n      });\n    });\n  }\n\n  const rail = track.querySelector('.aa-slider-rail');\n  const fill = track.querySelector('.aa-slider-fill');\n  const ticks = track.querySelector('.aa-slider-ticks');\n  const handles = [...track.querySelectorAll('.aa-slider-handle')];\n\n  if (showTicks) {\n    const n = Math.floor((max - min) / step);\n    for (let i = 0; i <= n; i++) {\n      const v = min + i * step;\n      const t = document.createElement('div');\n      t.className = 'aa-slider-tick';\n      t.style.left = ((v - min) / (max - min) * 100) + '%';\n      ticks.appendChild(t);\n    }\n  }\n\n  function clamp(v) { v = Math.round((v - min) / step) * step + min; return Math.max(min, Math.min(max, v)); }\n  function pct(v) { return (v - min) / (max - min) * 100; }\n  function fromClientX(x) {\n    const rect = track.getBoundingClientRect();\n    return clamp(min + (x - rect.left) / rect.width * (max - min));\n  }\n\n  function paint() {\n    if (range) {\n      const [lo, hi] = value;\n      fill.style.left = pct(lo) + '%';\n      fill.style.width = (pct(hi) - pct(lo)) + '%';\n      handles[0].style.left = pct(lo) + '%';\n      handles[1].style.left = pct(hi) + '%';\n      if (showInput) {\n        valueWrap.querySelectorAll('input')[0].value = lo;\n        valueWrap.querySelectorAll('input')[1].value = hi;\n      }\n    } else {\n      fill.style.left = '0%';\n      fill.style.width = pct(value) + '%';\n      handles[0].style.left = pct(value) + '%';\n      if (showInput) valueWrap.querySelector('input').value = value;\n    }\n  }\n\n  function startDrag(i, e) {\n    e.preventDefault();\n    const move = (ev) => {\n      const x = (ev.touches ? ev.touches[0].clientX : ev.clientX);\n      const nv = fromClientX(x);\n      if (range) {\n        value[i] = nv;\n        value.sort((a, b) => a - b); // 保持顺序\n      } else {\n        value = nv;\n      }\n      paint();\n    };\n    const up = () => {\n      document.removeEventListener('pointermove', move);\n      document.removeEventListener('pointerup', up);\n    };\n    document.addEventListener('pointermove', move);\n    document.addEventListener('pointerup', up);\n  }\n\n  handles.forEach((h, i) => {\n    h.addEventListener('pointerdown', (e) => startDrag(i, e));\n  });\n\n  // 点击轨道定位最近的手柄\n  track.addEventListener('pointerdown', (e) => {\n    if (e.target.classList.contains('aa-slider-handle')) return;\n    const nv = fromClientX(e.clientX);\n    if (range) {\n      const i = Math.abs(nv - value[0]) <= Math.abs(nv - value[1]) ? 0 : 1;\n      value[i] = nv; value.sort((a, b) => a - b);\n    } else {\n      value = nv;\n    }\n    paint();\n  });\n\n  paint();\n}\ndocument.querySelectorAll('[data-slider]').forEach(initSlider);\n</script>\n</body>\n</html>\n","css":"/* Aurora Admin Slider 样式 — 对齐 组件7.txt SliderInput：单/双滑块、刻度、输入框联动 */\n\n.aa-slider { position: relative; display: flex; align-items: center; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); }\n.aa-slider.is-disabled { opacity: .5; pointer-events: none; }\n.aa-slider-track { position: relative; flex: 1; height: 40px; }\n.aa-slider-rail { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 4px; background: var(--au-color-border); border-radius: 2px; }\n.aa-slider-fill { position: absolute; top: 50%; transform: translateY(-50%); height: 4px; background: var(--au-color-brand); border-radius: 2px; }\n.aa-slider-handle {\n  position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--au-color-card-bg);\n  border: 2px solid var(--au-color-brand); transform: translate(-50%, -50%); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.15);\n  transition: box-shadow .15s;\n}\n.aa-slider-handle:hover, .aa-slider-handle:focus { box-shadow: 0 0 0 4px rgba(47,84,235,0.2); outline: none; }\n.aa-slider-ticks { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 0; pointer-events: none; }\n.aa-slider-tick { position: absolute; top: 0; width: 2px; height: 8px; background: var(--au-color-border); transform: translate(-50%, -50%); }\n.aa-slider-value { margin-left: 12px; font-size: 14px; color: var(--au-color-text-body); display: inline-flex; align-items: center; gap: 6px; }\n.aa-slider-value input { width: 56px; height: 28px; text-align: center; border: 1px solid var(--au-color-border); border-radius: 4px; font-size: 13px; outline: none; color: var(--au-color-text-body); }\n.aa-slider-value input:focus { border-color: var(--au-color-brand); box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }\n.aa-slider-label { margin-top: 4px; font-size: 12px; color: var(--au-color-text-secondary); }\n","jsx":"import React, { useRef, useState, useEffect } from 'react';\nimport './Slider.css';\n\n/**\n * Aurora Admin Slider（React）\n * 对齐 组件7.txt SliderInput 规范：单/双滑块、刻度、输入框联动\n *\n * props:\n *  - value / defaultValue : number | [lo, hi]\n *  - min / max / step\n *  - range     : 双滑块\n *  - showTicks : 刻度\n *  - showInput : 数值输入框联动\n *  - disabled\n *  - onChange(value)\n */\nexport default function Slider({\n  value,\n  defaultValue = 0,\n  min = 0,\n  max = 100,\n  step = 1,\n  range = false,\n  showTicks = false,\n  showInput = false,\n  disabled = false,\n  onChange\n}) {\n  const trackRef = useRef(null);\n  const [dragIndex, setDragIndex] = useState(-1);\n  const current = value !== undefined ? value : defaultValue;\n\n  const pct = (v) => ((v - min) / (max - min)) * 100;\n  const clamp = (v) => {\n    const snapped = Math.round((v - min) / step) * step + min;\n    return Math.max(min, Math.min(max, snapped));\n  };\n  const valueFromClientX = (x) => {\n    const rect = trackRef.current.getBoundingClientRect();\n    return clamp(min + (x - rect.left) / rect.width * (max - min));\n  };\n\n  const setVal = (next) => {\n    if (value === undefined) onChange && onChange(next);\n    else onChange && onChange(next);\n  };\n\n  const onMove = (e) => {\n    if (dragIndex < 0) return;\n    const nv = valueFromClientX(e.clientX);\n    if (range) {\n      const arr = [...current]; arr[dragIndex] = nv; arr.sort((a, b) => a - b);\n      setVal(arr);\n    } else {\n      setVal(nv);\n    }\n  };\n  const onUp = () => {\n    setDragIndex(-1);\n    window.removeEventListener('pointermove', onMove);\n    window.removeEventListener('pointerup', onUp);\n  };\n  const onHandleDown = (i, e) => {\n    if (disabled) return;\n    e.preventDefault();\n    setDragIndex(i);\n    window.addEventListener('pointermove', onMove);\n    window.addEventListener('pointerup', onUp);\n  };\n  const onTrackDown = (e) => {\n    if (disabled || e.target.classList.contains('aa-slider-handle')) return;\n    const nv = valueFromClientX(e.clientX);\n    if (range) {\n      const i = Math.abs(nv - current[0]) <= Math.abs(nv - current[1]) ? 0 : 1;\n      const arr = [...current]; arr[i] = nv; arr.sort((a, b) => a - b);\n      setVal(arr);\n    } else {\n      setVal(nv);\n    }\n  };\n  const onInput = (i, e) => {\n    const v = +e.target.value;\n    if (range) {\n      const arr = [...current]; arr[i] = v; arr.sort((a, b) => a - b);\n      setVal(arr);\n    } else {\n      setVal(v);\n    }\n  };\n\n  useEffect(() => () => onUp(), []); // eslint-disable-line\n\n  const handlePercents = range ? [pct(current[0]), pct(current[1])] : [pct(current)];\n  const fillStyle = range\n    ? { left: pct(current[0]) + '%', width: (pct(current[1]) - pct(current[0])) + '%' }\n    : { left: '0%', width: pct(current) + '%' };\n  const tickPercents = Array.from(\n    { length: Math.floor((max - min) / step) + 1 },\n    (_, i) => pct(min + i * step)\n  );\n\n  return (\n    <div className={`aa-slider${disabled ? ' is-disabled' : ''}`}>\n      <div className=\"aa-slider-track\" ref={trackRef} onPointerDown={onTrackDown}>\n        <div className=\"aa-slider-rail\"></div>\n        <div className=\"aa-slider-fill\" style={fillStyle}></div>\n        {showTicks && (\n          <div className=\"aa-slider-ticks\">\n            {tickPercents.map((t, i) => (\n              <div key={i} className=\"aa-slider-tick\" style={{ left: t + '%' }}></div>\n            ))}\n          </div>\n        )}\n        {handlePercents.map((h, i) => (\n          <div\n            key={i}\n            className=\"aa-slider-handle\"\n            style={{ left: h + '%' }}\n            onPointerDown={(e) => onHandleDown(i, e)}\n          ></div>\n        ))}\n      </div>\n      {showInput && (\n        <div className=\"aa-slider-value\">\n          {range ? (\n            <>\n              <input type=\"number\" value={current[0]} onChange={(e) => onInput(0, e)} />\n              <span>—</span>\n              <input type=\"number\" value={current[1]} onChange={(e) => onInput(1, e)} />\n            </>\n          ) : (\n            <input type=\"number\" value={current} onChange={(e) => onInput(null, e)} />\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/*\n用法示例：\nimport Slider from './Slider';\n<Slider min={0} max={100} defaultValue={30} showInput onChange={setV} />\n<Slider range min={0} max={100} defaultValue={[20, 60]} onChange={setRange} />\n*/\n","vue2":"<template>\n  <div class=\"aa-slider\" :class=\"{ 'is-disabled': disabled }\">\n    <div class=\"aa-slider-track\" ref=\"track\" @pointerdown=\"onTrackDown\">\n      <div class=\"aa-slider-rail\"></div>\n      <div class=\"aa-slider-fill\" :style=\"fillStyle\"></div>\n      <div class=\"aa-slider-ticks\" v-if=\"showTicks\">\n        <div v-for=\"(t, i) in tickPercents\" :key=\"i\" class=\"aa-slider-tick\" :style=\"{ left: t + '%' }\"></div>\n      </div>\n      <div\n        v-for=\"(h, i) in handlePercents\" :key=\"i\"\n        class=\"aa-slider-handle\" :style=\"{ left: h + '%' }\"\n        @pointerdown.stop=\"onHandleDown(i, $event)\"\n      ></div>\n    </div>\n    <div class=\"aa-slider-value\" v-if=\"showInput\">\n      <template v-if=\"range\">\n        <input type=\"number\" :value=\"value[0]\" @change=\"onInput(0, $event)\" />\n        <span>—</span>\n        <input type=\"number\" :value=\"value[1]\" @change=\"onInput(1, $event)\" />\n      </template>\n      <input v-else type=\"number\" :value=\"value\" @change=\"onInput(null, $event)\" />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaSlider',\n  props: {\n    value: { type: [Number, Array], default: 0 },        // number | [lo, hi]\n    min: { type: Number, default: 0 },\n    max: { type: Number, default: 100 },\n    step: { type: Number, default: 1 },\n    range: { type: Boolean, default: false },\n    showTicks: { type: Boolean, default: false },\n    showInput: { type: Boolean, default: false },\n    disabled: { type: Boolean, default: false }\n  },\n  data() { return { dragIndex: -1 }; },\n  computed: {\n    pct() { return (v) => ((v - this.min) / (this.max - this.min)) * 100; },\n    clamp() {\n      return (v) => {\n        const snapped = Math.round((v - this.min) / this.step) * this.step + this.min;\n        return Math.max(this.min, Math.min(this.max, snapped));\n      };\n    },\n    handlePercents() {\n      if (this.range) return [this.pct(this.value[0]), this.pct(this.value[1])];\n      return [this.pct(this.value)];\n    },\n    fillStyle() {\n      if (this.range) {\n        const lo = this.pct(this.value[0]), hi = this.pct(this.value[1]);\n        return { left: lo + '%', width: (hi - lo) + '%' };\n      }\n      return { left: '0%', width: this.pct(this.value) + '%' };\n    },\n    tickPercents() {\n      const n = Math.floor((this.max - this.min) / this.step);\n      return Array.from({ length: n + 1 }, (_, i) => this.pct(this.min + i * this.step));\n    }\n  },\n  methods: {\n    setVal(next) { this.$emit('input', next); this.$emit('change', next); },\n    valueFromClientX(x) {\n      const rect = this.$refs.track.getBoundingClientRect();\n      return this.clamp(this.min + (x - rect.left) / rect.width * (this.max - this.min));\n    },\n    onHandleDown(i, e) {\n      if (this.disabled) return;\n      e.preventDefault();\n      this.dragIndex = i;\n      window.addEventListener('pointermove', this.onMove);\n      window.addEventListener('pointerup', this.onUp);\n    },\n    onTrackDown(e) {\n      if (this.disabled || e.target.classList.contains('aa-slider-handle')) return;\n      const nv = this.valueFromClientX(e.clientX);\n      if (this.range) {\n        const i = Math.abs(nv - this.value[0]) <= Math.abs(nv - this.value[1]) ? 0 : 1;\n        const arr = [...this.value]; arr[i] = nv; arr.sort((a, b) => a - b);\n        this.setVal(arr);\n      } else {\n        this.setVal(nv);\n      }\n    },\n    onMove(e) {\n      if (this.dragIndex < 0) return;\n      const nv = this.valueFromClientX(e.clientX);\n      if (this.range) {\n        const arr = [...this.value]; arr[this.dragIndex] = nv; arr.sort((a, b) => a - b);\n        this.setVal(arr);\n      } else {\n        this.setVal(nv);\n      }\n    },\n    onUp() {\n      this.dragIndex = -1;\n      window.removeEventListener('pointermove', this.onMove);\n      window.removeEventListener('pointerup', this.onUp);\n    },\n    onInput(i, e) {\n      const v = +e.target.value;\n      if (this.range) {\n        const arr = [...this.value]; arr[i] = v; arr.sort((a, b) => a - b);\n        this.setVal(arr);\n      } else {\n        this.setVal(v);\n      }\n    }\n  },\n  beforeDestroy() { this.onUp(); }\n};\n</script>\n\n<!-- 样式对齐 组件7.txt SliderInput 规范 -->\n<style>\n.aa-slider { position: relative; display: flex; align-items: center; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); }\n.aa-slider.is-disabled { opacity: .5; pointer-events: none; }\n.aa-slider-track { position: relative; flex: 1; height: 40px; }\n.aa-slider-rail { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 4px; background: #E8ECF1; border-radius: 2px; }\n.aa-slider-fill { position: absolute; top: 50%; transform: translateY(-50%); height: 4px; background: #2F54EB; border-radius: 2px; }\n.aa-slider-handle { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #fff;\n  border: 2px solid #2F54EB; transform: translate(-50%, -50%); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.15); transition: box-shadow .15s; }\n.aa-slider-handle:hover, .aa-slider-handle:focus { box-shadow: 0 0 0 4px rgba(47,84,235,0.2); outline: none; }\n.aa-slider-ticks { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 0; pointer-events: none; }\n.aa-slider-tick { position: absolute; top: 0; width: 2px; height: 8px; background: #E8ECF1; transform: translate(-50%, -50%); }\n.aa-slider-value { margin-left: 12px; font-size: 14px; color: #262626; display: inline-flex; align-items: center; gap: 6px; }\n.aa-slider-value input { width: 56px; height: 28px; text-align: center; border: 1px solid #E8ECF1; border-radius: 4px; font-size: 13px; outline: none; color: #262626; }\n.aa-slider-value input:focus { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }\n</style>\n","vue3":"<template>\n  <div class=\"aa-slider\" :class=\"{ 'is-disabled': disabled }\">\n    <div class=\"aa-slider-track\" ref=\"track\" @pointerdown=\"onTrackDown\">\n      <div class=\"aa-slider-rail\"></div>\n      <div class=\"aa-slider-fill\" :style=\"fillStyle\"></div>\n      <div class=\"aa-slider-ticks\" v-if=\"showTicks\">\n        <div v-for=\"(t, i) in tickPercents\" :key=\"i\" class=\"aa-slider-tick\" :style=\"{ left: t + '%' }\"></div>\n      </div>\n      <div\n        v-for=\"(h, i) in handlePercents\" :key=\"i\"\n        class=\"aa-slider-handle\" :style=\"{ left: h + '%' }\"\n        @pointerdown.stop=\"onHandleDown(i, $event)\"\n      ></div>\n    </div>\n    <div class=\"aa-slider-value\" v-if=\"showInput\">\n      <template v-if=\"range\">\n        <input type=\"number\" :value=\"modelValue[0]\" @change=\"onInput(0, $event)\" />\n        <span>—</span>\n        <input type=\"number\" :value=\"modelValue[1]\" @change=\"onInput(1, $event)\" />\n      </template>\n      <input v-else type=\"number\" :value=\"modelValue\" @change=\"onInput(null, $event)\" />\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onBeforeUnmount } from 'vue';\n\nconst props = defineProps({\n  modelValue: { type: [Number, Array], default: 0 },   // number | [lo, hi]\n  min: { type: Number, default: 0 },\n  max: { type: Number, default: 100 },\n  step: { type: Number, default: 1 },\n  range: { type: Boolean, default: false },\n  showTicks: { type: Boolean, default: false },\n  showInput: { type: Boolean, default: false },\n  disabled: { type: Boolean, default: false }\n});\nconst emit = defineEmits(['update:modelValue', 'change']);\n\nconst track = ref(null);\nconst dragIndex = ref(-1);\n\nconst pct = (v) => ((v - props.min) / (props.max - props.min)) * 100;\nconst clamp = (v) => {\n  const snapped = Math.round((v - props.min) / props.step) * props.step + props.min;\n  return Math.max(props.min, Math.min(props.max, snapped));\n};\n\nconst handlePercents = computed(() => {\n  if (props.range) return [pct(props.modelValue[0]), pct(props.modelValue[1])];\n  return [pct(props.modelValue)];\n});\nconst fillStyle = computed(() => {\n  if (props.range) {\n    const lo = pct(props.modelValue[0]), hi = pct(props.modelValue[1]);\n    return { left: lo + '%', width: (hi - lo) + '%' };\n  }\n  return { left: '0%', width: pct(props.modelValue) + '%' };\n});\nconst tickPercents = computed(() => {\n  const n = Math.floor((props.max - props.min) / props.step);\n  return Array.from({ length: n + 1 }, (_, i) => pct(props.min + i * props.step));\n});\n\nfunction setVal(next) {\n  emit('update:modelValue', next);\n  emit('change', next);\n}\n\nfunction valueFromClientX(x) {\n  const rect = track.value.getBoundingClientRect();\n  return clamp(props.min + (x - rect.left) / rect.width * (props.max - props.min));\n}\n\nfunction onHandleDown(i, e) {\n  if (props.disabled) return;\n  e.preventDefault();\n  dragIndex.value = i;\n  window.addEventListener('pointermove', onMove);\n  window.addEventListener('pointerup', onUp);\n}\nfunction onTrackDown(e) {\n  if (props.disabled || e.target.classList.contains('aa-slider-handle')) return;\n  const nv = valueFromClientX(e.clientX);\n  if (props.range) {\n    const i = Math.abs(nv - props.modelValue[0]) <= Math.abs(nv - props.modelValue[1]) ? 0 : 1;\n    const arr = [...props.modelValue]; arr[i] = nv; arr.sort((a, b) => a - b);\n    setVal(arr);\n  } else {\n    setVal(nv);\n  }\n}\nfunction onMove(e) {\n  if (dragIndex.value < 0) return;\n  const nv = valueFromClientX(e.clientX);\n  if (props.range) {\n    const arr = [...props.modelValue]; arr[dragIndex.value] = nv; arr.sort((a, b) => a - b);\n    setVal(arr);\n  } else {\n    setVal(nv);\n  }\n}\nfunction onUp() {\n  dragIndex.value = -1;\n  window.removeEventListener('pointermove', onMove);\n  window.removeEventListener('pointerup', onUp);\n}\nfunction onInput(i, e) {\n  const v = +e.target.value;\n  if (props.range) {\n    const arr = [...props.modelValue]; arr[i] = v; arr.sort((a, b) => a - b);\n    setVal(arr);\n  } else {\n    setVal(v);\n  }\n}\nonBeforeUnmount(onUp);\n</script>\n\n<!-- 样式对齐 组件7.txt SliderInput 规范 -->\n<style scoped>\n.aa-slider { position: relative; display: flex; align-items: center; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); }\n.aa-slider.is-disabled { opacity: .5; pointer-events: none; }\n.aa-slider-track { position: relative; flex: 1; height: 40px; }\n.aa-slider-rail { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 4px; background: #E8ECF1; border-radius: 2px; }\n.aa-slider-fill { position: absolute; top: 50%; transform: translateY(-50%); height: 4px; background: #2F54EB; border-radius: 2px; }\n.aa-slider-handle { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #fff;\n  border: 2px solid #2F54EB; transform: translate(-50%, -50%); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.15); transition: box-shadow .15s; }\n.aa-slider-handle:hover, .aa-slider-handle:focus { box-shadow: 0 0 0 4px rgba(47,84,235,0.2); outline: none; }\n.aa-slider-ticks { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 0; pointer-events: none; }\n.aa-slider-tick { position: absolute; top: 0; width: 2px; height: 8px; background: #E8ECF1; transform: translate(-50%, -50%); }\n.aa-slider-value { margin-left: 12px; font-size: 14px; color: #262626; display: inline-flex; align-items: center; gap: 6px; }\n.aa-slider-value input { width: 56px; height: 28px; text-align: center; border: 1px solid #E8ECF1; border-radius: 4px; font-size: 13px; outline: none; color: #262626; }\n.aa-slider-value input:focus { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }\n</style>\n"}},{"slug":"mention","name":"提及 Mention","tier":"extension","confidence":"high","specBatch":2,"specFile":"组件2.txt","contractRef":"components/mention.json","category":"input","specLines":["- 用于评论、任务分配中 @用户","- 输入框内输入 @ 触发面板","- 面板列出用户列表，含头像+姓名+部门","- 选中后以标签形式插入输入框，可删除","- 面板宽度 240px，阴影中，圆角 6px"],"specSummary":"- 用于评论、任务分配中 @用户","contract":{"variants":["评论 @ 用户","任务分配 @ 成员"],"dims":[{"name":"trigger","values":["at-char"]},{"name":"panelItem","values":["avatar-name-dept"]},{"name":"insert","values":["removable-tag"]}],"unknowns":["插入标签的具体样式（沿用标签组件）","面板最大高度与滚动规则"],"anatomy":{"input":"输入框，输入 @ 触发面板","panel":"用户面板，宽 240px，阴影中，圆角 6px","item":"用户项：头像 + 姓名 + 部门","tag":"选中后以标签形式插入输入框，可删除"},"doNot":["面板搜索过滤规则"],"usage":["用于评论、任务分配中 @ 用户","输入框内输入 @ 触发面板","面板列出用户列表，含头像+姓名+部门","选中后以标签形式插入输入框，可删除"],"structure":{"panelWidth":"240px"}},"files":{"html":"../frameworks/Mention.html","css":"../frameworks/Mention.css","jsx":"../frameworks/Mention.jsx","vue2":"../frameworks/Mention.vue2.vue","vue3":"../frameworks/Mention.vue3.vue"},"sizes":{"html":4091,"css":1792,"jsx":3196,"vue2":2945,"vue3":3029},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · Mention</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"./Mention.css\" />\n</head>\n<body>\n  <div class=\"aa-page\">\n    <h2 class=\"aa-h2\">Mention @ 提及</h2>\n    <p class=\"aa-desc\">输入框输入 @ 触发用户面板，选择后以标签形式插入，可删除。</p>\n\n    <div class=\"aa-demo\">\n      <div class=\"aa-mention\" id=\"mention\">\n        <div class=\"aa-mention-area\">\n          <textarea class=\"aa-mention-input\" id=\"input\" rows=\"3\" placeholder=\"输入 @ 提及同事…\"></textarea>\n          <div class=\"aa-mention-panel\" id=\"panel\" style=\"display:none\"></div>\n        </div>\n        <div class=\"aa-mention-chips\" id=\"chips\"></div>\n      </div>\n    </div>\n  </div>\n\n  <script>\n    var users = [\n      { name: '王伟', dept: '华东大区' },\n      { name: '李娜', dept: '华南大区' },\n      { name: '张强', dept: '华北大区' },\n      { name: '陈静', dept: '研发中心' },\n      { name: '刘洋', dept: '市场部' }\n    ];\n    var input = document.getElementById('input');\n    var panel = document.getElementById('panel');\n    var chips = document.getElementById('chips');\n    var active = -1, mentioned = [];\n\n    function renderPanel() {\n      panel.innerHTML = users.map(function (u, i) {\n        return '<div class=\"aa-mention-item' + (i === active ? ' is-active' : '') + '\" role=\"option\" data-i=\"' + i + '\">' +\n          '<span class=\"aa-mention-avatar\">' + u.name[0] + '</span>' +\n          '<span class=\"aa-mention-name\">' + u.name + '</span>' +\n          '<span class=\"aa-mention-dept\">' + u.dept + '</span></div>';\n      }).join('');\n    }\n    function openPanel() { active = -1; renderPanel(); panel.style.display = 'block'; }\n    function closePanel() { panel.style.display = 'none'; }\n    function insert(name) {\n      var pos = input.selectionStart;\n      var v = input.value;\n      // 找到触发 @ 的位置（当前光标前一个 @ 且其后无空格）\n      var at = v.lastIndexOf('@', pos - 1);\n      if (at >= 0 && (at === 0 || /\\s/.test(v[at - 1]))) {\n        input.value = v.slice(0, at) + '@' + name + ' ' + v.slice(pos);\n      } else {\n        input.value = v.slice(0, pos) + '@' + name + ' ' + v.slice(pos);\n      }\n      if (mentioned.indexOf(name) < 0) mentioned.push(name);\n      renderChips();\n      closePanel();\n      input.focus();\n    }\n    function renderChips() {\n      chips.innerHTML = mentioned.map(function (n) {\n        return '<span class=\"aa-mention-chip\">@' + n + ' <b data-n=\"' + n + '\">×</b></span>';\n      }).join('');\n    }\n    input.addEventListener('input', function () {\n      var pos = input.selectionStart;\n      var v = input.value;\n      var at = v.lastIndexOf('@', pos - 1);\n      if (at >= 0 && (at === 0 || /\\s/.test(v[at - 1])) && !/\\s/.test(v.slice(at + 1, pos))) openPanel();\n      else closePanel();\n    });\n    input.addEventListener('keydown', function (e) {\n      if (panel.style.display === 'none') return;\n      if (e.key === 'ArrowDown') { e.preventDefault(); active = Math.min(users.length - 1, active + 1); renderPanel(); }\n      else if (e.key === 'ArrowUp') { e.preventDefault(); active = Math.max(0, active - 1); renderPanel(); }\n      else if (e.key === 'Enter' && active >= 0) { e.preventDefault(); insert(users[active].name); }\n      else if (e.key === 'Escape') closePanel();\n    });\n    panel.addEventListener('click', function (e) {\n      var it = e.target.closest('.aa-mention-item');\n      if (it) insert(users[parseInt(it.dataset.i, 10)].name);\n    });\n    chips.addEventListener('click', function (e) {\n      var b = e.target.closest('[data-n]');\n      if (b) { mentioned = mentioned.filter(function (n) { return n !== b.dataset.n; }); renderChips(); }\n    });\n    document.addEventListener('click', function (e) {\n      if (!document.getElementById('mention').contains(e.target)) closePanel();\n    });\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin Mention 样式 — @ 提及 */\n.aa-mention { font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); position: relative; width: 360px; }\n.aa-mention-area { position: relative; }\n.aa-mention-input { width: 100%; box-sizing: border-box; border: 1px solid var(--au-color-border); border-radius: 6px; padding: 8px 10px; font-size: 14px; color: var(--au-color-text-body); outline: none; resize: vertical; transition: border-color .15s, box-shadow .15s; }\n.aa-mention-input:focus { border-color: var(--au-color-brand); box-shadow: 0 0 0 3px rgba(47,84,235,0.2); }\n.aa-mention-panel { position: absolute; z-index: 30; background: var(--au-color-card-bg); border: 1px solid var(--au-color-border); border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,0.12); width: 240px; max-height: 220px; overflow: auto; }\n.aa-mention-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; }\n.aa-mention-item:hover, .aa-mention-item.is-active { background: var(--au-color-brand-bg); }\n.aa-mention-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--au-color-brand); color: var(--au-color-text-inverse); font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }\n.aa-mention-name { font-size: 13px; color: var(--au-color-text-body); }\n.aa-mention-dept { font-size: 12px; color: var(--au-color-text-secondary); margin-left: auto; }\n.aa-mention-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }\n.aa-mention-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--au-color-brand-bg); color: var(--au-color-brand); border-radius: 4px; padding: 2px 8px; font-size: 12px; }\n.aa-mention-chip b { cursor: pointer; font-weight: 600; }\n","jsx":"import React, { useState, useRef, useEffect } from 'react';\nimport './Mention.css';\n\nconst USERS = [\n  { name: '王伟', dept: '华东大区' }, { name: '李娜', dept: '华南大区' }, { name: '张强', dept: '华北大区' },\n  { name: '陈静', dept: '研发中心' }, { name: '刘洋', dept: '市场部' }\n];\n\nexport default function Mention({ modelValue = '', users = USERS, onChange }) {\n  const [open, setOpen] = useState(false);\n  const [active, setActive] = useState(-1);\n  const [mentioned, setMentioned] = useState([]);\n  const inputRef = useRef(null);\n  const root = useRef(null);\n\n  useEffect(() => {\n    const onDoc = (e) => { if (root.current && !root.current.contains(e.target)) setOpen(false); };\n    document.addEventListener('click', onDoc);\n    return () => document.removeEventListener('click', onDoc);\n  }, []);\n\n  const onInput = (e) => {\n    const pos = e.target.selectionStart, v = e.target.value;\n    if (onChange) onChange(v);\n    const at = v.lastIndexOf('@', pos - 1);\n    if (at >= 0 && (at === 0 || /\\s/.test(v[at - 1])) && !/\\s/.test(v.slice(at + 1, pos))) { setActive(-1); setOpen(true); }\n    else setOpen(false);\n  };\n  const move = (d) => setActive((a) => Math.max(-1, Math.min(users.length - 1, a + d)));\n  const insert = (name) => {\n    const el = inputRef.current, pos = el.selectionStart, v = el.value;\n    const at = v.lastIndexOf('@', pos - 1);\n    if (at >= 0 && (at === 0 || /\\s/.test(v[at - 1]))) el.value = v.slice(0, at) + '@' + name + ' ' + v.slice(pos);\n    else el.value = v.slice(0, pos) + '@' + name + ' ' + v.slice(pos);\n    if (mentioned.indexOf(name) < 0) setMentioned((m) => [...m, name]);\n    if (onChange) onChange(el.value);\n    setOpen(false);\n    el.focus();\n  };\n  const remove = (n) => setMentioned((m) => m.filter((x) => x !== n));\n\n  return (\n    <div className=\"aa-mention\" ref={root}>\n      <div className=\"aa-mention-area\">\n        <textarea\n          ref={inputRef}\n          className=\"aa-mention-input\"\n          value={modelValue}\n          rows={3}\n          placeholder=\"输入 @ 提及同事…\"\n          onChange={onInput}\n          onKeyDown={(e) => {\n            if (e.key === 'ArrowDown') { e.preventDefault(); move(1); }\n            else if (e.key === 'ArrowUp') { e.preventDefault(); move(-1); }\n            else if (e.key === 'Enter') { e.preventDefault(); if (active >= 0) insert(users[active].name); }\n            else if (e.key === 'Escape') setOpen(false);\n          }}\n        />\n        {open && (\n          <div className=\"aa-mention-panel\">\n            {users.map((u, i) => (\n              <div key={u.name} className={'aa-mention-item' + (i === active ? ' is-active' : '')} onClick={() => insert(u.name)}>\n                <span className=\"aa-mention-avatar\">{u.name[0]}</span>\n                <span className=\"aa-mention-name\">{u.name}</span>\n                <span className=\"aa-mention-dept\">{u.dept}</span>\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n      <div className=\"aa-mention-chips\">\n        {mentioned.map((n) => (\n          <span key={n} className=\"aa-mention-chip\">@{n} <b onClick={() => remove(n)}>×</b></span>\n        ))}\n      </div>\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-mention\" v-click-outside=\"close\">\n    <div class=\"aa-mention-area\">\n      <textarea\n        ref=\"input\"\n        class=\"aa-mention-input\"\n        :value=\"value\"\n        rows=\"3\"\n        placeholder=\"输入 @ 提及同事…\"\n        @input=\"onInput\"\n        @keydown.down.prevent=\"move(1)\"\n        @keydown.up.prevent=\"move(-1)\"\n        @keydown.enter.prevent=\"enter\"\n        @keydown.esc=\"close\"\n      ></textarea>\n      <div v-show=\"open\" class=\"aa-mention-panel\">\n        <div\n          v-for=\"(u, i) in users\"\n          :key=\"u.name\"\n          class=\"aa-mention-item\"\n          :class=\"{ 'is-active': i === active }\"\n          @click=\"insert(u.name)\"\n        >\n          <span class=\"aa-mention-avatar\">{{ u.name[0] }}</span>\n          <span class=\"aa-mention-name\">{{ u.name }}</span>\n          <span class=\"aa-mention-dept\">{{ u.dept }}</span>\n        </div>\n      </div>\n    </div>\n    <div class=\"aa-mention-chips\">\n      <span v-for=\"n in mentioned\" :key=\"n\" class=\"aa-mention-chip\">@{{ n }} <b @click=\"remove(n)\">×</b></span>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaMention',\n  directives: {\n    clickOutside: { bind(el, b) { el.__d = (e) => { if (!el.contains(e.target)) b.value(); }; document.addEventListener('click', el.__d); }, unbind(el) { document.removeEventListener('click', el.__d); } }\n  },\n  props: {\n    value: { type: String, default: '' },\n    users: {\n      type: Array,\n      default: () => [\n        { name: '王伟', dept: '华东大区' }, { name: '李娜', dept: '华南大区' }, { name: '张强', dept: '华北大区' },\n        { name: '陈静', dept: '研发中心' }, { name: '刘洋', dept: '市场部' }\n      ]\n    }\n  },\n  data() {\n    return { open: false, active: -1, mentioned: [] };\n  },\n  methods: {\n    onInput(e) {\n      var pos = e.target.selectionStart, v = e.target.value;\n      this.$emit('input', v);\n      var at = v.lastIndexOf('@', pos - 1);\n      if (at >= 0 && (at === 0 || /\\s/.test(v[at - 1])) && !/\\s/.test(v.slice(at + 1, pos))) { this.active = -1; this.open = true; }\n      else this.open = false;\n    },\n    move(d) { this.active = Math.max(-1, Math.min(this.users.length - 1, this.active + d)); },\n    enter() { if (this.active >= 0) this.insert(this.users[this.active].name); },\n    insert(name) {\n      var el = this.$refs.input, pos = el.selectionStart, v = el.value;\n      var at = v.lastIndexOf('@', pos - 1);\n      if (at >= 0 && (at === 0 || /\\s/.test(v[at - 1]))) el.value = v.slice(0, at) + '@' + name + ' ' + v.slice(pos);\n      else el.value = v.slice(0, pos) + '@' + name + ' ' + v.slice(pos);\n      if (this.mentioned.indexOf(name) < 0) this.mentioned.push(name);\n      this.$emit('input', el.value);\n      this.close();\n      el.focus();\n    },\n    remove(n) { this.mentioned = this.mentioned.filter((x) => x !== n); },\n    close() { this.open = false; }\n  }\n};\n</script>\n\n<style src=\"./Mention.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-mention\" ref=\"root\">\n    <div class=\"aa-mention-area\">\n      <textarea\n        ref=\"input\"\n        class=\"aa-mention-input\"\n        :value=\"modelValue\"\n        rows=\"3\"\n        placeholder=\"输入 @ 提及同事…\"\n        @input=\"onInput\"\n        @keydown.down.prevent=\"move(1)\"\n        @keydown.up.prevent=\"move(-1)\"\n        @keydown.enter.prevent=\"enter\"\n        @keydown.esc=\"close\"\n      ></textarea>\n      <div v-show=\"open\" class=\"aa-mention-panel\">\n        <div\n          v-for=\"(u, i) in users\"\n          :key=\"u.name\"\n          class=\"aa-mention-item\"\n          :class=\"{ 'is-active': i === active }\"\n          @click=\"insert(u.name)\"\n        >\n          <span class=\"aa-mention-avatar\">{{ u.name[0] }}</span>\n          <span class=\"aa-mention-name\">{{ u.name }}</span>\n          <span class=\"aa-mention-dept\">{{ u.dept }}</span>\n        </div>\n      </div>\n    </div>\n    <div class=\"aa-mention-chips\">\n      <span v-for=\"n in mentioned\" :key=\"n\" class=\"aa-mention-chip\">@{{ n }} <b @click=\"remove(n)\">×</b></span>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, onMounted, onBeforeUnmount } from 'vue';\n\nconst props = defineProps({\n  modelValue: { type: String, default: '' },\n  users: {\n    type: Array,\n    default: () => [\n      { name: '王伟', dept: '华东大区' }, { name: '李娜', dept: '华南大区' }, { name: '张强', dept: '华北大区' },\n      { name: '陈静', dept: '研发中心' }, { name: '刘洋', dept: '市场部' }\n    ]\n  }\n});\nconst emit = defineEmits(['update:modelValue']);\nconst root = ref(null);\nconst input = ref(null);\nconst open = ref(false);\nconst active = ref(-1);\nconst mentioned = ref([]);\n\nfunction onInput(e) {\n  const pos = e.target.selectionStart, v = e.target.value;\n  emit('update:modelValue', v);\n  const at = v.lastIndexOf('@', pos - 1);\n  if (at >= 0 && (at === 0 || /\\s/.test(v[at - 1])) && !/\\s/.test(v.slice(at + 1, pos))) { active.value = -1; open.value = true; }\n  else open.value = false;\n}\nfunction move(d) { active.value = Math.max(-1, Math.min(props.users.length - 1, active.value + d)); }\nfunction enter() { if (active.value >= 0) insert(props.users[active.value].name); }\nfunction insert(name) {\n  const el = input.value, pos = el.selectionStart, v = el.value;\n  const at = v.lastIndexOf('@', pos - 1);\n  if (at >= 0 && (at === 0 || /\\s/.test(v[at - 1]))) el.value = v.slice(0, at) + '@' + name + ' ' + v.slice(pos);\n  else el.value = v.slice(0, pos) + '@' + name + ' ' + v.slice(pos);\n  if (mentioned.value.indexOf(name) < 0) mentioned.value.push(name);\n  emit('update:modelValue', el.value);\n  open.value = false;\n  el.focus();\n}\nfunction remove(n) { mentioned.value = mentioned.value.filter((x) => x !== n); }\nfunction close() { open.value = false; }\nfunction onDoc(e) { if (root.value && !root.value.contains(e.target)) close(); }\nonMounted(() => document.addEventListener('click', onDoc));\nonBeforeUnmount(() => document.removeEventListener('click', onDoc));\n</script>\n\n<style src=\"./Mention.css\"></style>\n"}},{"slug":"autocomplete","name":"自动完成 AutoComplete","tier":"extension","confidence":"high","specBatch":2,"specFile":"组件2.txt","contractRef":"components/autocomplete.json","category":"input","specLines":["- 输入时根据关键字匹配建议","- 面板样式同选择器下拉","- 高亮匹配文字使用品牌色","- 支持防抖、远程搜索、自定义渲染"],"specSummary":"- 输入时根据关键字匹配建议","contract":{"variants":["本地数据源自动完成","远程搜索自动完成","自定义渲染建议项"],"dims":[{"name":"suggestionSource","values":["local","remote"]},{"name":"itemRender","values":["default","custom"]},{"name":"state","values":["default","focus","disabled"]}],"unknowns":["远程搜索的加载态与失败态样式","建议项最大展示条数"],"anatomy":{"input":"输入框容器，规格同基础输入框（高 32px）","panel":"建议下拉面板，样式同选择器下拉面板","item":"建议项，命中文字以品牌色高亮"},"doNot":["建议面板分组标题样式","多选标签模式"],"usage":["输入时根据关键字匹配建议","面板样式与选择器下拉保持一致","高亮匹配文字使用品牌色 var(--au-color-brand)","支持防抖、远程搜索、自定义渲染建议项"],"structure":{"height":"32px","panel":"白底、阴影中、圆角与选择器一致","debounce":"默认防抖后触发搜索"}},"files":{"html":"../frameworks/AutoComplete.html","css":"../frameworks/AutoComplete.css","jsx":"../frameworks/AutoComplete.jsx","vue2":"../frameworks/AutoComplete.vue2.vue","vue3":"../frameworks/AutoComplete.vue3.vue"},"sizes":{"html":2926,"css":1293,"jsx":2490,"vue2":2246,"vue3":2311},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · AutoComplete</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"./AutoComplete.css\" />\n</head>\n<body>\n  <div class=\"aa-page\">\n    <h2 class=\"aa-h2\">AutoComplete 自动完成</h2>\n    <p class=\"aa-desc\">输入时匹配建议，高亮关键字，支持键盘上下选择与回车。</p>\n\n    <div class=\"aa-demo\">\n      <div class=\"aa-autocomplete\" id=\"ac\">\n        <input class=\"aa-autocomplete-input\" id=\"input\" placeholder=\"输入城市，如「北」\" />\n        <div class=\"aa-autocomplete-pop\" id=\"pop\" style=\"display:none\"></div>\n      </div>\n      <p class=\"aa-code-tip\" id=\"out\">试试输入：北京、上海、广州…</p>\n    </div>\n  </div>\n\n  <script>\n    var data = ['北京', '上海', '广州', '深圳', '杭州', '成都', '重庆', '武汉', '西安', '南京', '苏州', '天津'];\n    var root = document.getElementById('ac');\n    var input = document.getElementById('input');\n    var pop = document.getElementById('pop');\n    var out = document.getElementById('out');\n    var active = -1, list = [];\n\n    function highlight(text, q) {\n      if (!q) return text;\n      return text.replace(new RegExp('(' + q.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&') + ')', 'g'), '<mark>$1</mark>');\n    }\n    function render() {\n      if (!list.length) { pop.style.display = 'none'; return; }\n      pop.style.display = 'block';\n      pop.innerHTML = list.map(function (it, i) {\n        return '<div class=\"aa-autocomplete-item' + (i === active ? ' is-active' : '') + '\" role=\"option\" data-i=\"' + i + '\">' + highlight(it, input.value.trim()) + '</div>';\n      }).join('');\n    }\n    input.addEventListener('input', function () {\n      var q = input.value.trim();\n      active = -1;\n      list = q ? data.filter(function (d) { return d.indexOf(q) >= 0; }) : [];\n      render();\n    });\n    input.addEventListener('keydown', function (e) {\n      if (pop.style.display === 'none') return;\n      if (e.key === 'ArrowDown') { e.preventDefault(); active = Math.min(list.length - 1, active + 1); render(); }\n      else if (e.key === 'ArrowUp') { e.preventDefault(); active = Math.max(0, active - 1); render(); }\n      else if (e.key === 'Enter' && active >= 0) { choose(active); }\n      else if (e.key === 'Escape') { pop.style.display = 'none'; }\n    });\n    function choose(i) { input.value = list[i]; out.textContent = '已选择：' + list[i]; pop.style.display = 'none'; }\n    pop.addEventListener('click', function (e) {\n      var it = e.target.closest('.aa-autocomplete-item');\n      if (it) choose(parseInt(it.dataset.i, 10));\n    });\n    document.addEventListener('click', function (e) { if (!root.contains(e.target)) pop.style.display = 'none'; });\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin AutoComplete 样式 — 自动完成 */\n.aa-autocomplete { position: relative; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); width: 260px; }\n.aa-autocomplete-input { width: 100%; box-sizing: border-box; border: 1px solid var(--au-color-border); border-radius: 6px; padding: 8px 10px; font-size: 14px; color: var(--au-color-text-body); outline: none; transition: border-color .15s, box-shadow .15s; }\n.aa-autocomplete-input:focus { border-color: var(--au-color-brand); box-shadow: 0 0 0 3px rgba(47,84,235,0.2); }\n.aa-autocomplete-pop { position: absolute; top: 42px; left: 0; right: 0; background: var(--au-color-card-bg); border: 1px solid var(--au-color-border); border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,0.12); max-height: 220px; overflow: auto; z-index: 20; }\n.aa-autocomplete-item { padding: 8px 12px; font-size: 13px; color: var(--au-color-text-body); cursor: pointer; }\n.aa-autocomplete-item:hover, .aa-autocomplete-item.is-active { background: var(--au-color-brand-bg); color: var(--au-color-brand); }\n.aa-autocomplete-item mark { background: transparent; color: var(--au-color-brand); font-weight: 600; }\n.aa-autocomplete-empty { padding: 10px 12px; color: var(--au-color-text-secondary); font-size: 13px; }\n","jsx":"import React, { useState, useRef, useEffect } from 'react';\nimport './AutoComplete.css';\n\nconst OPTIONS = ['北京', '上海', '广州', '深圳', '杭州', '成都', '重庆', '武汉', '西安', '南京', '苏州', '天津'];\n\nexport default function AutoComplete({ modelValue = '', options = OPTIONS, placeholder = '输入关键字…', onChange, onSelect }) {\n  const [open, setOpen] = useState(false);\n  const [active, setActive] = useState(-1);\n  const [list, setList] = useState([]);\n  const root = useRef(null);\n\n  useEffect(() => {\n    const onDoc = (e) => { if (root.current && !root.current.contains(e.target)) setOpen(false); };\n    document.addEventListener('click', onDoc);\n    return () => document.removeEventListener('click', onDoc);\n  }, []);\n\n  const onInput = (e) => {\n    const q = e.target.value;\n    if (onChange) onChange(q);\n    setActive(-1);\n    setList(q ? options.filter((d) => d.indexOf(q) >= 0) : []);\n    setOpen(true);\n  };\n  const highlight = (it) => {\n    const q = modelValue.trim();\n    if (!q) return it;\n    return it.replace(new RegExp('(' + q.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&') + ')', 'g'), '<mark>$1</mark>');\n  };\n  const move = (d) => { setOpen(true); setActive((a) => Math.max(-1, Math.min(list.length - 1, a + d))); };\n  const choose = (i) => { if (onChange) onChange(list[i]); if (onSelect) onSelect(list[i]); setOpen(false); };\n\n  return (\n    <div className=\"aa-autocomplete\" ref={root}>\n      <input\n        className=\"aa-autocomplete-input\"\n        value={modelValue}\n        placeholder={placeholder}\n        onChange={onInput}\n        onKeyDown={(e) => {\n          if (e.key === 'ArrowDown') { e.preventDefault(); move(1); }\n          else if (e.key === 'ArrowUp') { e.preventDefault(); move(-1); }\n          else if (e.key === 'Enter' && active >= 0) choose(active);\n          else if (e.key === 'Escape') setOpen(false);\n        }}\n      />\n      {open && list.length > 0 && (\n        <div className=\"aa-autocomplete-pop\">\n          {list.map((it, i) => (\n            <div\n              key={i}\n              className={'aa-autocomplete-item' + (i === active ? ' is-active' : '')}\n              onClick={() => choose(i)}\n              dangerouslySetInnerHTML={{ __html: highlight(it) }}\n            />\n          ))}\n        </div>\n      )}\n      {open && modelValue && list.length === 0 && (\n        <div className=\"aa-autocomplete-pop\"><div className=\"aa-autocomplete-empty\">无匹配结果</div></div>\n      )}\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-autocomplete\" v-click-outside=\"close\">\n    <input\n      class=\"aa-autocomplete-input\"\n      :value=\"value\"\n      :placeholder=\"placeholder\"\n      @input=\"onInput\"\n      @keydown.down.prevent=\"move(1)\"\n      @keydown.up.prevent=\"move(-1)\"\n      @keydown.enter=\"enter\"\n      @keydown.esc=\"close\"\n    />\n    <div v-show=\"open && list.length\" class=\"aa-autocomplete-pop\">\n      <div\n        v-for=\"(it, i) in list\"\n        :key=\"i\"\n        class=\"aa-autocomplete-item\"\n        :class=\"{ 'is-active': i === active }\"\n        @click=\"choose(i)\"\n        v-html=\"highlight(it)\"\n      ></div>\n    </div>\n    <div v-show=\"open && value && !list.length\" class=\"aa-autocomplete-pop\"><div class=\"aa-autocomplete-empty\">无匹配结果</div></div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaAutoComplete',\n  directives: {\n    clickOutside: {\n      bind(el, b) { el.__d = (e) => { if (!el.contains(e.target)) b.value(); }; document.addEventListener('click', el.__d); },\n      unbind(el) { document.removeEventListener('click', el.__d); }\n    }\n  },\n  props: {\n    value: { type: String, default: '' },\n    options: { type: Array, default: () => ['北京', '上海', '广州', '深圳', '杭州', '成都', '重庆', '武汉', '西安', '南京', '苏州', '天津'] },\n    placeholder: { type: String, default: '输入关键字…' }\n  },\n  data() {\n    return { open: false, active: -1, list: [] };\n  },\n  methods: {\n    onInput(e) {\n      var q = e.target.value;\n      this.$emit('input', q);\n      this.active = -1;\n      this.list = q ? this.options.filter(function (d) { return d.indexOf(q) >= 0; }) : [];\n      this.open = true;\n    },\n    highlight(it) {\n      var q = this.value.trim();\n      if (!q) return it;\n      return it.replace(new RegExp('(' + q.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&') + ')', 'g'), '<mark>$1</mark>');\n    },\n    move(d) { this.open = true; this.active = Math.max(-1, Math.min(this.list.length - 1, this.active + d)); },\n    enter() { if (this.active >= 0) this.choose(this.active); },\n    choose(i) { this.$emit('input', this.list[i]); this.$emit('select', this.list[i]); this.close(); },\n    close() { this.open = false; }\n  }\n};\n</script>\n\n<style src=\"./AutoComplete.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-autocomplete\" ref=\"root\">\n    <input\n      class=\"aa-autocomplete-input\"\n      :value=\"modelValue\"\n      :placeholder=\"placeholder\"\n      @input=\"onInput\"\n      @keydown.down.prevent=\"move(1)\"\n      @keydown.up.prevent=\"move(-1)\"\n      @keydown.enter=\"enter\"\n      @keydown.esc=\"close\"\n    />\n    <div v-show=\"open && list.length\" class=\"aa-autocomplete-pop\">\n      <div\n        v-for=\"(it, i) in list\"\n        :key=\"i\"\n        class=\"aa-autocomplete-item\"\n        :class=\"{ 'is-active': i === active }\"\n        @click=\"choose(i)\"\n        v-html=\"highlight(it)\"\n      ></div>\n    </div>\n    <div v-show=\"open && modelValue && !list.length\" class=\"aa-autocomplete-pop\"><div class=\"aa-autocomplete-empty\">无匹配结果</div></div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, onMounted, onBeforeUnmount } from 'vue';\n\nconst props = defineProps({\n  modelValue: { type: String, default: '' },\n  options: { type: Array, default: () => ['北京', '上海', '广州', '深圳', '杭州', '成都', '重庆', '武汉', '西安', '南京', '苏州', '天津'] },\n  placeholder: { type: String, default: '输入关键字…' }\n});\nconst emit = defineEmits(['update:modelValue', 'select']);\nconst root = ref(null);\nconst open = ref(false);\nconst active = ref(-1);\nconst list = ref([]);\n\nfunction onInput(e) {\n  const q = e.target.value;\n  emit('update:modelValue', q);\n  active.value = -1;\n  list.value = q ? props.options.filter((d) => d.indexOf(q) >= 0) : [];\n  open.value = true;\n}\nfunction highlight(it) {\n  const q = props.modelValue.trim();\n  if (!q) return it;\n  return it.replace(new RegExp('(' + q.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&') + ')', 'g'), '<mark>$1</mark>');\n}\nfunction move(d) { open.value = true; active.value = Math.max(-1, Math.min(list.value.length - 1, active.value + d)); }\nfunction enter() { if (active.value >= 0) choose(active.value); }\nfunction choose(i) { emit('update:modelValue', list.value[i]); emit('select', list.value[i]); open.value = false; }\nfunction close() { open.value = false; }\nfunction onDoc(e) { if (root.value && !root.value.contains(e.target)) close(); }\nonMounted(() => document.addEventListener('click', onDoc));\nonBeforeUnmount(() => document.removeEventListener('click', onDoc));\n</script>\n\n<style src=\"./AutoComplete.css\"></style>\n"}},{"slug":"collapse","name":"折叠面板 Collapse","tier":"extension","confidence":"high","specBatch":2,"specFile":"组件2.txt","contractRef":"components/collapse.json","category":"display","specLines":["- 用于分组展示内容，默认展开第一项","- 标题栏高度 40px，左侧箭头图标","- 展开时箭头旋转 90°，内容区下方分割线","- 支持手风琴模式（同时只展开一个）"],"specSummary":"- 用于分组展示内容，默认展开第一项","contract":{"variants":["默认展开第一项","收起态","手风琴模式（同时只展开一个）"],"dims":[{"name":"mode","values":["default","accordion"]},{"name":"state","values":["collapsed","expanded"]}],"unknowns":["禁用项的视觉表现","内容区最大高度与滚动策略"],"anatomy":{"header":"标题栏：高度 40px，左侧箭头图标","arrow":"展开时箭头旋转 90°","content":"内容区下方分割线"},"doNot":["嵌套折叠面板的层级规范"],"usage":["用于分组展示内容，默认展开第一项","标题栏高度 40px，左侧箭头图标","展开时箭头旋转 90°，内容区下方分割线","支持手风琴模式（同时只展开一个）"],"structure":{"headerHeight":"40px","arrowRotate":"90deg","divider":"内容区下方"}},"files":{"html":"../frameworks/collapse.html","css":"../frameworks/Collapse.css","jsx":"../frameworks/Collapse.jsx","vue2":"../frameworks/Collapse.vue2.vue","vue3":"../frameworks/Collapse.vue3.vue"},"sizes":{"html":4000,"css":1642,"jsx":2367,"vue2":2821,"vue3":2856},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Aurora Admin · Collapse (H5)</title>\n<link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\">\n<link rel=\"stylesheet\" href=\"./Collapse.css\">\n<style>\n  .demo { padding: 24px; background: var(--au-color-page-bg); font-family: var(--font-family); }\n  h1 { font-size: 20px; margin: 0 0 4px; color: var(--au-color-text-title); }\n  .sub { color: var(--au-color-text-secondary); margin: 0 0 24px; font-size: 12px; }\n  .demo-block { max-width: 560px; margin-bottom: 24px; }\n  .demo-block > .hint { color: var(--au-color-text-secondary); font-size: 12px; margin: 0 0 12px; }\n</style>\n</head>\n<body>\n<div class=\"demo\">\n  <h1>Aurora Admin · Collapse 组件（纯 H5）</h1>\n  <p class=\"sub\">对齐规范：标题栏高40px、左侧箭头旋转90°、内容分割线、手风琴模式</p>\n\n  <div class=\"demo-block\">\n    <p class=\"hint\">手风琴模式（同时仅展开一个）</p>\n    <div class=\"aa-collapse\" data-accordion>\n      <div class=\"aa-collapse-item is-open\">\n        <div class=\"aa-collapse-header\" role=\"button\" tabindex=\"0\"><span class=\"aa-collapse-arrow\">▶</span><span class=\"aa-collapse-title\">基本设置</span></div>\n        <div class=\"aa-collapse-content\">系统名称、主题色、默认语言等基础配置。</div>\n      </div>\n      <div class=\"aa-collapse-item\">\n        <div class=\"aa-collapse-header\" role=\"button\" tabindex=\"0\"><span class=\"aa-collapse-arrow\">▶</span><span class=\"aa-collapse-title\">通知设置</span></div>\n        <div class=\"aa-collapse-content\" hidden>邮件、短信、站内信通知开关。</div>\n      </div>\n      <div class=\"aa-collapse-item\">\n        <div class=\"aa-collapse-header\" role=\"button\" tabindex=\"0\"><span class=\"aa-collapse-arrow\">▶</span><span class=\"aa-collapse-title\">安全设置</span></div>\n        <div class=\"aa-collapse-content\" hidden>登录保护、密码策略、IP 白名单。</div>\n      </div>\n      <div class=\"aa-collapse-item is-disabled\">\n        <div class=\"aa-collapse-header\" role=\"button\" tabindex=\"0\"><span class=\"aa-collapse-arrow\">▶</span><span class=\"aa-collapse-title\">高级（无权限）</span></div>\n        <div class=\"aa-collapse-content\" hidden>仅管理员可见的高级选项。</div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"demo-block\">\n    <p class=\"hint\">非手风琴（可同时展开多个）</p>\n    <div class=\"aa-collapse\">\n      <div class=\"aa-collapse-item is-open\">\n        <div class=\"aa-collapse-header\" role=\"button\" tabindex=\"0\"><span class=\"aa-collapse-arrow\">▶</span><span class=\"aa-collapse-title\">订单管理</span></div>\n        <div class=\"aa-collapse-content\">查看与处理所有订单。</div>\n      </div>\n      <div class=\"aa-collapse-item is-open\">\n        <div class=\"aa-collapse-header\" role=\"button\" tabindex=\"0\"><span class=\"aa-collapse-arrow\">▶</span><span class=\"aa-collapse-title\">退款管理</span></div>\n        <div class=\"aa-collapse-content\">退款审核与到账记录。</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<script>\ndocument.querySelectorAll('.aa-collapse').forEach(root => {\n  const accordion = root.hasAttribute('data-accordion');\n  root.addEventListener('click', (e) => {\n    const header = e.target.closest('.aa-collapse-header');\n    if (!header) return;\n    const item = header.parentElement;\n    if (item.classList.contains('is-disabled')) return;\n    const open = item.classList.toggle('is-open');\n    const content = item.querySelector('.aa-collapse-content');\n    if (content) content.hidden = !open;\n\n    if (accordion && open) {\n      root.querySelectorAll('.aa-collapse-item.is-open').forEach(other => {\n        if (other !== item) {\n          other.classList.remove('is-open');\n          const c = other.querySelector('.aa-collapse-content');\n          if (c) c.hidden = true;\n        }\n      });\n    }\n  });\n});\n</script>\n</body>\n</html>\n","css":"/* Aurora Admin Collapse 样式 — 对齐 组件2.txt 规范：标题栏高40px、左侧箭头旋转90°、内容分割线、手风琴模式 */\n\n.aa-collapse { border: 1px solid var(--au-color-border); border-radius: 6px; overflow: hidden; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); color: var(--au-color-text-body); background: var(--au-color-card-bg); }\n.aa-collapse-item + .aa-collapse-item { border-top: 1px solid var(--au-color-border); }\n\n.aa-collapse-header {\n  display: flex; align-items: center; gap: 8px;\n  height: 40px; padding: 0 16px; cursor: pointer;\n  font-size: 14px; color: var(--au-color-text-body); background: var(--au-color-card-bg);\n  transition: background .15s; user-select: none;\n}\n.aa-collapse-header:hover { background: var(--au-color-page-bg); }\n.aa-collapse-item.is-disabled .aa-collapse-header { color: var(--au-color-text-disabled); cursor: not-allowed; background: var(--au-color-card-bg); }\n\n.aa-collapse-arrow {\n  display: inline-flex; align-items: center; justify-content: center;\n  width: 16px; height: 16px; color: var(--au-color-text-secondary); font-size: 12px;\n  transition: transform .2s ease; transform: rotate(0deg);\n}\n.aa-collapse-item.is-open .aa-collapse-arrow { transform: rotate(90deg); }\n\n.aa-collapse-title { flex: 1; }\n\n.aa-collapse-content {\n  padding: 16px; font-size: 14px; line-height: 1.6; color: var(--au-color-text-tertiary);\n  border-top: 1px solid var(--au-color-border);   /* 内容分割线 */\n  background: var(--au-color-card-bg);\n}\n.aa-collapse-item.is-disabled .aa-collapse-content { color: var(--au-color-text-disabled); }\n","jsx":"import React, { useState } from 'react';\nimport './Collapse.css';\n\n/**\n * Aurora Admin Collapse（React）\n * 对齐 组件2.txt 规范：标题栏高40px、左侧箭头旋转90°、内容分割线、手风琴模式\n *\n * props:\n *  - items    : [{ key, title, disabled? }]\n *  - accordion: Boolean（手风琴模式，同时仅展开一个）\n *  - value / defaultValue : 展开 key 数组（手风琴时为单个 key 字符串）\n *  - onChange(keys)\n *  - renderPanel(key) / children(key) : 返回对应面板内容\n */\nexport default function Collapse({\n  items = [],\n  accordion = false,\n  value,\n  defaultValue = accordion ? '' : [],\n  onChange,\n  renderPanel\n}) {\n  const panelFn = renderPanel || (typeof children === 'function' ? children : null);\n  const [inner, setInner] = useState(defaultValue);\n  const open = value !== undefined ? value : inner;\n\n  const openList = accordion ? (open ? [open] : []) : (Array.isArray(open) ? open : []);\n  const isOpen = (k) => openList.includes(k);\n\n  const toggle = (item) => {\n    if (item.disabled) return;\n    let next;\n    if (accordion) {\n      next = isOpen(item.key) ? [] : [item.key];\n    } else {\n      next = isOpen(item.key) ? openList.filter(k => k !== item.key) : [...openList, item.key];\n    }\n    const result = accordion ? (next[0] || '') : next;\n    if (value === undefined) setInner(result);\n    onChange && onChange(result);\n  };\n\n  return (\n    <div className=\"aa-collapse\">\n      {items.map((item) => (\n        <div\n          key={item.key}\n          className={`aa-collapse-item${isOpen(item.key) ? ' is-open' : ''}${item.disabled ? ' is-disabled' : ''}`}\n        >\n          <div className=\"aa-collapse-header\" onClick={() => toggle(item)}>\n            <span className=\"aa-collapse-arrow\">▶</span>\n            <span className=\"aa-collapse-title\">{item.title}</span>\n          </div>\n          {isOpen(item.key) && (\n            <div className=\"aa-collapse-content\">\n              {panelFn ? panelFn(item.key) : null}\n            </div>\n          )}\n        </div>\n      ))}\n    </div>\n  );\n}\n\n/*\n用法示例：\nimport Collapse from './Collapse';\nconst items = [\n  { key: 'a', title: '基本设置' },\n  { key: 'b', title: '通知设置' },\n  { key: 'c', title: '高级', disabled: true }\n];\n<Collapse accordion items={items} defaultValue=\"a\" renderPanel={(k) => <div>内容：{k}</div>} />\n*/\n","vue2":"<template>\n  <div class=\"aa-collapse\">\n    <div\n      v-for=\"item in items\" :key=\"item.key\"\n      class=\"aa-collapse-item\"\n      :class=\"{ 'is-open': isOpen(item.key), 'is-disabled': item.disabled }\"\n    >\n      <div class=\"aa-collapse-header\" @click=\"toggle(item)\">\n        <span class=\"aa-collapse-arrow\">▶</span>\n        <span class=\"aa-collapse-title\">{{ item.title }}</span>\n      </div>\n      <div v-show=\"isOpen(item.key)\" class=\"aa-collapse-content\">\n        <slot :name=\"item.key\"><slot /></slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaCollapse',\n  props: {\n    value: { type: [Array, String], default: () => [] },  // 展开 key 列表（手风琴时为单个 key）\n    items: { type: Array, required: true },               // [{ key, title, disabled? }]\n    accordion: { type: Boolean, default: false }\n  },\n  computed: {\n    openList() {\n      return this.accordion\n        ? (this.value ? [this.value] : [])\n        : Array.isArray(this.value) ? this.value : [];\n    }\n  },\n  methods: {\n    isOpen(key) { return this.openList.includes(key); },\n    toggle(item) {\n      if (item.disabled) return;\n      let next;\n      if (this.accordion) {\n        next = this.isOpen(item.key) ? [] : [item.key];\n      } else {\n        next = this.isOpen(item.key)\n          ? this.openList.filter(k => k !== item.key)\n          : [...this.openList, item.key];\n      }\n      this.$emit('input', this.accordion ? (next[0] || '') : next);\n      this.$emit('change', this.accordion ? (next[0] || '') : next);\n    }\n  }\n};\n</script>\n\n<!-- 样式对齐 组件2.txt 规范 -->\n<style>\n.aa-collapse { border: 1px solid #E8ECF1; border-radius: 6px; overflow: hidden; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); color: #262626; background: #fff; }\n.aa-collapse-item + .aa-collapse-item { border-top: 1px solid #E8ECF1; }\n.aa-collapse-header { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; cursor: pointer;\n  font-size: 14px; color: #262626; background: #fff; transition: background .15s; user-select: none; }\n.aa-collapse-header:hover { background: #F5F7FA; }\n.aa-collapse-item.is-disabled .aa-collapse-header { color: #BFBFBF; cursor: not-allowed; background: #fff; }\n.aa-collapse-arrow { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;\n  color: #6E6E6E; font-size: 12px; transition: transform .2s ease; transform: rotate(0deg); }\n.aa-collapse-item.is-open .aa-collapse-arrow { transform: rotate(90deg); }\n.aa-collapse-title { flex: 1; }\n.aa-collapse-content { padding: 16px; font-size: 14px; line-height: 1.6; color: #595959; border-top: 1px solid #E8ECF1; background: #fff; }\n.aa-collapse-item.is-disabled .aa-collapse-content { color: #BFBFBF; }\n</style>\n","vue3":"<template>\n  <div class=\"aa-collapse\">\n    <div\n      v-for=\"item in items\" :key=\"item.key\"\n      class=\"aa-collapse-item\"\n      :class=\"{ 'is-open': isOpen(item.key), 'is-disabled': item.disabled }\"\n    >\n      <div class=\"aa-collapse-header\" @click=\"toggle(item)\">\n        <span class=\"aa-collapse-arrow\">▶</span>\n        <span class=\"aa-collapse-title\">{{ item.title }}</span>\n      </div>\n      <div v-show=\"isOpen(item.key)\" class=\"aa-collapse-content\">\n        <slot :name=\"item.key\"><slot /></slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\n\nconst props = defineProps({\n  modelValue: { type: [Array, String, null], default: () => [] },  // 展开 key 列表（手风琴时为单个 key）\n  items: { type: Array, required: true },                          // [{ key, title, disabled? }]\n  accordion: { type: Boolean, default: false }\n});\nconst emit = defineEmits(['update:modelValue', 'change']);\n\nconst openList = computed(() =>\n  props.accordion\n    ? (props.modelValue ? [props.modelValue] : [])\n    : Array.isArray(props.modelValue) ? props.modelValue : []\n);\nfunction isOpen(key) { return openList.value.includes(key); }\n\nfunction toggle(item) {\n  if (item.disabled) return;\n  let next;\n  if (props.accordion) {\n    next = isOpen(item.key) ? [] : [item.key];\n  } else {\n    next = isOpen(item.key)\n      ? openList.value.filter(k => k !== item.key)\n      : [...openList.value, item.key];\n  }\n  emit('update:modelValue', props.accordion ? (next[0] ?? '') : next);\n  emit('change', props.accordion ? (next[0] ?? '') : next);\n}\n</script>\n\n<!-- 样式对齐 组件2.txt 规范 -->\n<style scoped>\n.aa-collapse { border: 1px solid #E8ECF1; border-radius: 6px; overflow: hidden; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); color: #262626; background: #fff; }\n.aa-collapse-item + .aa-collapse-item { border-top: 1px solid #E8ECF1; }\n.aa-collapse-header { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; cursor: pointer;\n  font-size: 14px; color: #262626; background: #fff; transition: background .15s; user-select: none; }\n.aa-collapse-header:hover { background: #F5F7FA; }\n.aa-collapse-item.is-disabled .aa-collapse-header { color: #BFBFBF; cursor: not-allowed; background: #fff; }\n.aa-collapse-arrow { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;\n  color: #6E6E6E; font-size: 12px; transition: transform .2s ease; transform: rotate(0deg); }\n.aa-collapse-item.is-open .aa-collapse-arrow { transform: rotate(90deg); }\n.aa-collapse-title { flex: 1; }\n.aa-collapse-content { padding: 16px; font-size: 14px; line-height: 1.6; color: #595959; border-top: 1px solid #E8ECF1; background: #fff; }\n.aa-collapse-item.is-disabled .aa-collapse-content { color: #BFBFBF; }\n</style>\n"}},{"slug":"calendar","name":"日历 Calendar","tier":"extension","confidence":"high","specBatch":2,"specFile":"组件2.txt","contractRef":"components/calendar.json","category":"display","specLines":["- 用于日程管理、考勤、排班","- 月视图、周视图、日视图切换","- 单元格高度 100px（月视图）","- 选中日期背景品牌色，今日日期边框品牌色","- 事件显示为彩色标签条，支持拖拽"],"specSummary":"- 用于日程管理、考勤、排班","contract":{"variants":["月视图","周视图","日视图","今日（边框品牌色）","选中日期（背景品牌色）"],"dims":[{"name":"view","values":["month","week","day"]},{"name":"state","values":["default","today","selected"]}],"unknowns":["周视图/日视图的单元格尺寸","事件过多时的折叠策略"],"anatomy":{"cell":"单元格：月视图高度 100px","today":"今日日期边框品牌色","selected":"选中日期背景品牌色","event":"事件显示为彩色标签条，支持拖拽"},"doNot":["事件标签的配色集合","跨天日程的渲染方式"],"usage":["用于日程管理、考勤、排班","月视图、周视图、日视图切换","单元格高度 100px（月视图）","选中日期背景品牌色，今日日期边框品牌色","事件显示为彩色标签条，支持拖拽"],"structure":{"cellHeightMonth":"100px","todayBorder":"品牌色","selectedBg":"品牌色"}},"files":{"html":"../frameworks/Calendar.html","css":"../frameworks/Calendar.css","jsx":"../frameworks/Calendar.jsx","vue2":"../frameworks/Calendar.vue2.vue","vue3":"../frameworks/Calendar.vue3.vue"},"sizes":{"html":3495,"css":1622,"jsx":2644,"vue2":2714,"vue3":2585},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · Calendar（普通 H5）</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"Calendar.css\" />\n  <style>body{margin:0;padding:24px;background: var(--au-color-page-bg);}</style>\n</head>\n<body>\n  <div class=\"aa-calendar\" role=\"grid\" id=\"app\"></div>\n\n  <script>\n    var WK = ['日', '一', '二', '三', '四', '五', '六'];\n    var now = new Date();\n    var view = { y: now.getFullYear(), m: now.getMonth() }; // m: 0-11\n    var selected = null; // 'yyyy-mm-dd'\n\n    function pad(n) { return n < 10 ? '0' + n : '' + n; }\n    function key(y, m, d) { return y + '-' + pad(m + 1) + '-' + pad(d); }\n\n    function render() {\n      var first = new Date(view.y, view.m, 1).getDay();\n      var days = new Date(view.y, view.m + 1, 0).getDate();\n      var prevDays = new Date(view.y, view.m, 0).getDate();\n      var tKey = now.getFullYear() + '-' + pad(now.getMonth() + 1) + '-' + pad(now.getDate());\n\n      var html = '<div class=\"aa-calendar-head\" role=\"grid\">' +\n        '<button class=\"aa-calendar-nav\" role=\"grid\" data-nav=\"-1\">‹</button>' +\n        '<span class=\"aa-calendar-title\">' + view.y + ' 年 ' + (view.m + 1) + ' 月</span>' +\n        '<button class=\"aa-calendar-nav\" role=\"grid\" data-nav=\"1\">›</button></div>';\n      html += '<div class=\"aa-calendar-week\" role=\"grid\">' + WK.map(function (w) { return '<span class=\"aa-calendar-weekday\" role=\"grid\">' + w + '</span>'; }).join('') + '</div>';\n      html += '<div class=\"aa-calendar-grid\" role=\"grid\">';\n\n      for (var i = 0; i < first; i++) {\n        var d = prevDays - first + 1 + i;\n        html += '<div class=\"aa-calendar-cell is-out\" role=\"gridcell\" tabindex=\"0\" data-y=\"' + view.y + '\" data-m=\"' + (view.m - 1) + '\" data-d=\"' + d + '\">' + d + '</div>';\n      }\n      for (var d2 = 1; d2 <= days; d2++) {\n        var k = key(view.y, view.m, d2);\n        var cls = 'aa-calendar-cell' + (k === tKey ? ' is-today' : '') + (k === selected ? ' is-selected' : '');\n        html += '<div class=\"' + cls + '\" role=\"gridcell\" tabindex=\"0\" data-y=\"' + view.y + '\" data-m=\"' + view.m + '\" data-d=\"' + d2 + '\">' + d2 + '</div>';\n      }\n      var filled = first + days;\n      var tail = (7 - (filled % 7)) % 7;\n      for (var t = 1; t <= tail; t++) {\n        html += '<div class=\"aa-calendar-cell is-out\" role=\"gridcell\" tabindex=\"0\" data-y=\"' + view.y + '\" data-m=\"' + (view.m + 1) + '\" data-d=\"' + t + '\">' + t + '</div>';\n      }\n      html += '</div>';\n      var root = document.getElementById('app');\n      root.innerHTML = html;\n\n      root.querySelectorAll('[data-nav]').forEach(function (b) {\n        b.addEventListener('click', function () {\n          view.m += parseInt(b.dataset.nav, 10);\n          if (view.m < 0) { view.m = 11; view.y--; }\n          if (view.m > 11) { view.m = 0; view.y++; }\n          render();\n        });\n      });\n      root.querySelectorAll('.aa-calendar-cell').forEach(function (c) {\n        c.addEventListener('click', function () {\n          var y = parseInt(c.dataset.y, 10), m = parseInt(c.dataset.m, 10), d = parseInt(c.dataset.d, 10);\n          if (m < 0) { m = 11; y--; } if (m > 11) { m = 0; y++; }\n          view.y = y; view.m = m;\n          selected = key(y, m, d);\n          render();\n        });\n      });\n    }\n    render();\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin Calendar 样式 — 月历组件，可选中日期，标记今天 */\n\n.aa-calendar { width: 320px; background: var(--au-color-card-bg); border: 1px solid var(--au-color-border); border-radius: 8px; padding: 12px;\n  font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); color: var(--au-color-text-body); box-sizing: border-box; }\n.aa-calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }\n.aa-calendar-title { font-size: 14px; font-weight: 500; color: var(--au-color-text-title); }\n.aa-calendar-nav { width: 28px; height: 28px; border: none; background: none; cursor: pointer; color: var(--au-color-text-tertiary); border-radius: 4px; font-size: 16px; }\n.aa-calendar-nav:hover { background: var(--au-color-brand-bg); color: var(--au-color-brand); }\n.aa-calendar-week, .aa-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); }\n.aa-calendar-week { margin-bottom: 4px; }\n.aa-calendar-weekday { text-align: center; font-size: 12px; color: var(--au-color-text-secondary); padding: 4px 0; }\n.aa-calendar-cell { text-align: center; padding: 6px 0; font-size: 13px; cursor: pointer; border-radius: 6px; }\n.aa-calendar-cell:hover { background: var(--au-color-brand-bg); }\n.aa-calendar-cell.is-out { color: var(--au-color-text-placeholder); }\n.aa-calendar-cell.is-today { color: var(--au-color-brand); font-weight: 600; }\n.aa-calendar-cell.is-selected { background: var(--au-color-brand); color: var(--au-color-text-inverse); }\n.aa-calendar-cell.is-selected.is-today { color: var(--au-color-text-inverse); }\n","jsx":"import React, { useState, useMemo } from 'react';\nimport './Calendar.css';\n\nconst WEEKS = ['日', '一', '二', '三', '四', '五', '六'];\nfunction fmt(dt) {\n  const p = x => (x < 10 ? '0' + x : '' + x);\n  return dt.getFullYear() + '-' + p(dt.getMonth() + 1) + '-' + p(dt.getDate());\n}\n\nexport default function Calendar({ value = '', onChange }) {\n  const now = new Date();\n  const [viewY, setViewY] = useState(now.getFullYear());\n  const [viewM, setViewM] = useState(now.getMonth());\n  const [selected, setSelected] = useState(value);\n  const today = fmt(now);\n\n  const cells = useMemo(() => {\n    const first = new Date(viewY, viewM, 1).getDay();\n    const days = new Date(viewY, viewM + 1, 0).getDate();\n    const prevDays = new Date(viewY, viewM, 0).getDate();\n    const arr = [];\n    for (let i = 0; i < first; i++) {\n      let pd = prevDays - first + 1 + i, pm = viewM - 1, py = viewY;\n      if (pm < 0) { pm = 11; py--; }\n      arr.push({ day: pd, out: true, key: fmt(new Date(py, pm, pd)) });\n    }\n    for (let d = 1; d <= days; d++) {\n      const k = fmt(new Date(viewY, viewM, d));\n      arr.push({ day: d, out: false, today: k === today, key: k });\n    }\n    const tail = (7 - (arr.length % 7)) % 7;\n    for (let t = 1; t <= tail; t++) {\n      let nm = viewM + 1, ny = viewY; if (nm > 11) { nm = 0; ny++; }\n      arr.push({ day: t, out: true, key: fmt(new Date(ny, nm, t)) });\n    }\n    return arr;\n  }, [viewY, viewM, today]);\n\n  function prev() { let m = viewM - 1, y = viewY; if (m < 0) { m = 11; y--; } setViewM(m); setViewY(y); }\n  function next() { let m = viewM + 1, y = viewY; if (m > 11) { m = 0; y++; } setViewM(m); setViewY(y); }\n  function pick(c) {\n    setSelected(c.key);\n    setViewY(parseInt(c.key.slice(0, 4), 10));\n    setViewM(parseInt(c.key.slice(5, 7), 10) - 1);\n    onChange && onChange(c.key);\n  }\n\n  return (\n    <div className=\"aa-calendar\">\n      <div className=\"aa-calendar-head\">\n        <button className=\"aa-calendar-nav\" onClick={prev}>‹</button>\n        <span className=\"aa-calendar-title\">{viewY} 年 {viewM + 1} 月</span>\n        <button className=\"aa-calendar-nav\" onClick={next}>›</button>\n      </div>\n      <div className=\"aa-calendar-week\">\n        {WEEKS.map(w => <span className=\"aa-calendar-weekday\" key={w}>{w}</span>)}\n      </div>\n      <div className=\"aa-calendar-grid\">\n        {cells.map((c, i) => (\n          <div key={i} className={'aa-calendar-cell' + (c.out ? ' is-out' : '') + (c.today ? ' is-today' : '') + (c.key === selected ? ' is-selected' : '')}\n               onClick={() => pick(c)}>\n            {c.day}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-calendar\">\n    <div class=\"aa-calendar-head\">\n      <button class=\"aa-calendar-nav\" @click=\"prev\">‹</button>\n      <span class=\"aa-calendar-title\">{{ viewY }} 年 {{ viewM + 1 }} 月</span>\n      <button class=\"aa-calendar-nav\" @click=\"next\">›</button>\n    </div>\n    <div class=\"aa-calendar-week\">\n      <span class=\"aa-calendar-weekday\" v-for=\"w in weeks\" :key=\"w\">{{ w }}</span>\n    </div>\n    <div class=\"aa-calendar-grid\">\n      <div v-for=\"(c, i) in cells\" :key=\"i\" class=\"aa-calendar-cell\"\n           :class=\"{ 'is-out': c.out, 'is-today': c.today, 'is-selected': c.key === selected }\"\n           @click=\"pick(c)\">{{ c.day }}</div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaCalendar',\n  props: { value: { type: String, default: '' } },\n  data: function () {\n    var n = new Date();\n    return {\n      weeks: ['日', '一', '二', '三', '四', '五', '六'],\n      viewY: n.getFullYear(), viewM: n.getMonth(),\n      selected: this.value, today: this.fmt(n)\n    };\n  },\n  computed: {\n    cells: function () {\n      var first = new Date(this.viewY, this.viewM, 1).getDay();\n      var days = new Date(this.viewY, this.viewM + 1, 0).getDate();\n      var prevDays = new Date(this.viewY, this.viewM, 0).getDate();\n      var arr = [];\n      var self = this;\n      for (var i = 0; i < first; i++) {\n        var pd = prevDays - first + 1 + i;\n        var pm = this.viewM - 1, py = this.viewY; if (pm < 0) { pm = 11; py--; }\n        arr.push({ day: pd, out: true, key: self.fmt(new Date(py, pm, pd)) });\n      }\n      for (var d = 1; d <= days; d++) {\n        var k = self.fmt(new Date(this.viewY, this.viewM, d));\n        arr.push({ day: d, out: false, today: k === this.today, key: k });\n      }\n      var tail = (7 - (arr.length % 7)) % 7;\n      for (var t = 1; t <= tail; t++) {\n        var nm = this.viewM + 1, ny = this.viewY; if (nm > 11) { nm = 0; ny++; }\n        arr.push({ day: t, out: true, key: self.fmt(new Date(ny, nm, t)) });\n      }\n      return arr;\n    }\n  },\n  methods: {\n    fmt: function (dt) {\n      var p = function (n) { return n < 10 ? '0' + n : '' + n; };\n      return dt.getFullYear() + '-' + p(dt.getMonth() + 1) + '-' + p(dt.getDate());\n    },\n    prev: function () { this.viewM--; if (this.viewM < 0) { this.viewM = 11; this.viewY--; } },\n    next: function () { this.viewM++; if (this.viewM > 11) { this.viewM = 0; this.viewY++; } },\n    pick: function (c) {\n      this.selected = c.key;\n      this.viewY = parseInt(c.key.slice(0, 4), 10);\n      this.viewM = parseInt(c.key.slice(5, 7), 10) - 1;\n      this.$emit('input', c.key);\n      this.$emit('change', c.key);\n    }\n  }\n};\n</script>\n\n<style src=\"./Calendar.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-calendar\">\n    <div class=\"aa-calendar-head\">\n      <button class=\"aa-calendar-nav\" @click=\"prev\">‹</button>\n      <span class=\"aa-calendar-title\">{{ viewY }} 年 {{ viewM + 1 }} 月</span>\n      <button class=\"aa-calendar-nav\" @click=\"next\">›</button>\n    </div>\n    <div class=\"aa-calendar-week\">\n      <span class=\"aa-calendar-weekday\" v-for=\"w in weeks\" :key=\"w\">{{ w }}</span>\n    </div>\n    <div class=\"aa-calendar-grid\">\n      <div v-for=\"(c, i) in cells\" :key=\"i\" class=\"aa-calendar-cell\"\n           :class=\"{ 'is-out': c.out, 'is-today': c.today, 'is-selected': c.key === selected }\"\n           @click=\"pick(c)\">{{ c.day }}</div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed } from 'vue';\nconst props = defineProps({ modelValue: { type: String, default: '' } });\nconst emit = defineEmits(['update:modelValue', 'change']);\n\nconst weeks = ['日', '一', '二', '三', '四', '五', '六'];\nconst n = new Date();\nconst viewY = ref(n.getFullYear());\nconst viewM = ref(n.getMonth());\nconst selected = ref(props.modelValue);\nconst today = fmt(n);\n\nfunction fmt(dt) {\n  const p = x => (x < 10 ? '0' + x : '' + x);\n  return dt.getFullYear() + '-' + p(dt.getMonth() + 1) + '-' + p(dt.getDate());\n}\nconst cells = computed(() => {\n  const first = new Date(viewY.value, viewM.value, 1).getDay();\n  const days = new Date(viewY.value, viewM.value + 1, 0).getDate();\n  const prevDays = new Date(viewY.value, viewM.value, 0).getDate();\n  const arr = [];\n  for (let i = 0; i < first; i++) {\n    let pd = prevDays - first + 1 + i, pm = viewM.value - 1, py = viewY.value;\n    if (pm < 0) { pm = 11; py--; }\n    arr.push({ day: pd, out: true, key: fmt(new Date(py, pm, pd)) });\n  }\n  for (let d = 1; d <= days; d++) {\n    const k = fmt(new Date(viewY.value, viewM.value, d));\n    arr.push({ day: d, out: false, today: k === today, key: k });\n  }\n  const tail = (7 - (arr.length % 7)) % 7;\n  for (let t = 1; t <= tail; t++) {\n    let nm = viewM.value + 1, ny = viewY.value; if (nm > 11) { nm = 0; ny++; }\n    arr.push({ day: t, out: true, key: fmt(new Date(ny, nm, t)) });\n  }\n  return arr;\n});\nfunction prev() { viewM.value--; if (viewM.value < 0) { viewM.value = 11; viewY.value--; } }\nfunction next() { viewM.value++; if (viewM.value > 11) { viewM.value = 0; viewY.value++; } }\nfunction pick(c) {\n  selected.value = c.key;\n  viewY.value = parseInt(c.key.slice(0, 4), 10);\n  viewM.value = parseInt(c.key.slice(5, 7), 10) - 1;\n  emit('update:modelValue', c.key);\n  emit('change', c.key);\n}\n</script>\n\n<style src=\"./Calendar.css\"></style>\n"}},{"slug":"carousel","name":"轮播 Carousel","tier":"extension","confidence":"high","specBatch":2,"specFile":"组件2.txt","contractRef":"components/carousel.json","category":"display","specLines":["- 用于运营 Banner、公告轮播","- 高度 120–200px，圆角 8px","- 指示器圆点 8px，当前项品牌色","- 支持自动播放、左右箭头、触摸滑动"],"specSummary":"- 用于运营 Banner、公告轮播","contract":{"variants":["自动播放 + 指示器","左右箭头切换","指示器 + 箭头"],"dims":[{"name":"control","values":["dots","arrows","dots-arrows"]},{"name":"autoplay","values":["on","off"]}],"unknowns":["自动播放的默认间隔与悬停暂停行为","切换过渡时长与缓动曲线"],"anatomy":{"frame":"轮播容器：高度 120–200px，圆角 8px","indicator":"指示器圆点 8px，当前项品牌色","gesture":"支持自动播放、左右箭头、触摸滑动"},"doNot":["多图同屏与画廊模式"],"usage":["用于运营 Banner、公告轮播","高度 120–200px，圆角 8px","指示器圆点 8px，当前项品牌色","支持自动播放、左右箭头、触摸滑动"],"structure":{"height":"120-200px","radius":"8px","dotSize":"8px","dotActive":"品牌色"}},"files":{"html":"../frameworks/Carousel.html","css":"../frameworks/Carousel.css","jsx":"../frameworks/Carousel.jsx","vue2":"../frameworks/Carousel.vue2.vue","vue3":"../frameworks/Carousel.vue3.vue"},"sizes":{"html":2120,"css":1375,"jsx":1310,"vue2":1491,"vue3":1321},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · Carousel（普通 H5）</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"Carousel.css\" />\n  <style>body{margin:0;padding:24px;background: var(--au-color-page-bg);}</style>\n</head>\n<body>\n  <div class=\"aa-carousel\" id=\"app\"></div>\n\n  <script>\n    var DATA = [\n      { text: '促销活动一', color: '#2F54EB' },\n      { text: '新品上市', color: '#13C2C2' },\n      { text: '会员专享', color: '#722ED1' },\n      { text: '限时秒杀', color: '#8C5A00' }\n    ];\n    var index = 0, timer = null;\n\n    function render() {\n      var root = document.getElementById('app');\n      var slides = DATA.map(function (d) {\n        return '<div class=\"aa-carousel-slide\" style=\"background:' + d.color + '\">' + d.text + '</div>';\n      }).join('');\n      var dots = DATA.map(function (_, i) {\n        return '<span class=\"aa-carousel-dot ' + (i === index ? 'is-active' : '') + '\" role=\"tab\" tabindex=\"0\" data-i=\"' + i + '\"></span>';\n      }).join('');\n      root.innerHTML = '<div class=\"aa-carousel-track\" style=\"transform:translateX(-' + (index * 100) + '%)\">' + slides + '</div>' +\n        '<button class=\"aa-carousel-arrow prev\">‹</button>' +\n        '<button class=\"aa-carousel-arrow next\">›</button>' +\n        '<div class=\"aa-carousel-dots\">' + dots + '</div>';\n\n      root.querySelector('.prev').onclick = function () { go(index - 1); };\n      root.querySelector('.next').onclick = function () { go(index + 1); };\n      root.querySelectorAll('.aa-carousel-dot').forEach(function (d) {\n        d.onclick = function () { go(parseInt(d.dataset.i, 10)); };\n      });\n    }\n    function go(i) {\n      index = (i + DATA.length) % DATA.length;\n      render();\n      restart();\n    }\n    function restart() {\n      if (timer) clearInterval(timer);\n      timer = setInterval(function () { go(index + 1); }, 3000);\n    }\n    render();\n    restart();\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin Carousel 样式 — 轮播图，箭头切换 + 指示点，可选自动播放 */\n\n.aa-carousel { position: relative; width: 100%; max-width: 480px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px;\n  background: var(--au-color-brand-bg); font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); }\n.aa-carousel-track { display: flex; height: 100%; transition: transform .3s; }\n.aa-carousel-slide { min-width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--au-color-text-inverse); font-size: 20px; font-weight: 500; }\n.aa-carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: none; border-radius: 50%;\n  background: rgba(0,0,0,0.3); color: var(--au-color-text-inverse); cursor: pointer; font-size: 16px; }\n.aa-carousel-arrow:hover { background: rgba(0,0,0,0.5); }\n.aa-carousel-arrow.prev { left: 8px; }\n.aa-carousel-arrow.next { right: 8px; }\n.aa-carousel-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; gap: 6px; justify-content: center; }\n.aa-carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.6); cursor: pointer; transition: width .2s; }\n.aa-carousel-dot.is-active { background: var(--au-color-card-bg); width: 18px; border-radius: 4px; }\n","jsx":"import React, { useState, useEffect } from 'react';\nimport './Carousel.css';\n\nexport default function Carousel({ items = [], autoplay = true, interval = 3000, onChange }) {\n  const [index, setIndex] = useState(0);\n  const len = items.length || 1;\n\n  function go(i) {\n    const next = (i + len) % len;\n    setIndex(next);\n    onChange && onChange(next);\n  }\n  useEffect(() => {\n    if (!autoplay || items.length < 2) return;\n    const t = setInterval(() => go(index + 1), interval);\n    return () => clearInterval(t);\n    // eslint-disable-next-line\n  }, [index, autoplay, interval, items.length]);\n\n  return (\n    <div className=\"aa-carousel\">\n      <div className=\"aa-carousel-track\" style={{ transform: `translateX(-${index * 100}%)` }}>\n        {items.map((s, i) => (\n          <div className=\"aa-carousel-slide\" key={i} style={{ background: s.color }}>{s.text}</div>\n        ))}\n      </div>\n      <button className=\"aa-carousel-arrow prev\" onClick={() => go(index - 1)}>‹</button>\n      <button className=\"aa-carousel-arrow next\" onClick={() => go(index + 1)}>›</button>\n      <div className=\"aa-carousel-dots\">\n        {items.map((_, i) => (\n          <span key={i} className={'aa-carousel-dot' + (i === index ? ' is-active' : '')} onClick={() => go(i)} />\n        ))}\n      </div>\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-carousel\">\n    <div class=\"aa-carousel-track\" :style=\"{ transform: 'translateX(-' + index * 100 + '%)' }\">\n      <div class=\"aa-carousel-slide\" v-for=\"(s, i) in items\" :key=\"i\" :style=\"{ background: s.color }\">{{ s.text }}</div>\n    </div>\n    <button class=\"aa-carousel-arrow prev\" @click=\"go(index - 1)\">‹</button>\n    <button class=\"aa-carousel-arrow next\" @click=\"go(index + 1)\">›</button>\n    <div class=\"aa-carousel-dots\">\n      <span class=\"aa-carousel-dot\" v-for=\"(s, i) in items\" :key=\"i\"\n            :class=\"{ 'is-active': i === index }\" @click=\"go(i)\"></span>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaCarousel',\n  props: {\n    items: { type: Array, default: function () { return []; } },\n    autoplay: { type: Boolean, default: true },\n    interval: { type: Number, default: 3000 }\n  },\n  data: function () { return { index: 0, timer: null }; },\n  methods: {\n    go: function (i) {\n      var len = this.items.length || 1;\n      this.index = (i + len) % len;\n      this.restart();\n    },\n    restart: function () {\n      if (this.timer) clearInterval(this.timer);\n      var self = this;\n      if (this.autoplay && this.items.length > 1) {\n        this.timer = setInterval(function () { self.go(self.index + 1); }, this.interval);\n      }\n    }\n  },\n  mounted: function () { this.restart(); },\n  beforeDestroy: function () { if (this.timer) clearInterval(this.timer); }\n};\n</script>\n\n<style src=\"./Carousel.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-carousel\">\n    <div class=\"aa-carousel-track\" :style=\"{ transform: `translateX(-${index * 100}%)` }\">\n      <div class=\"aa-carousel-slide\" v-for=\"(s, i) in items\" :key=\"i\" :style=\"{ background: s.color }\">{{ s.text }}</div>\n    </div>\n    <button class=\"aa-carousel-arrow prev\" @click=\"go(index - 1)\">‹</button>\n    <button class=\"aa-carousel-arrow next\" @click=\"go(index + 1)\">›</button>\n    <div class=\"aa-carousel-dots\">\n      <span class=\"aa-carousel-dot\" v-for=\"(s, i) in items\" :key=\"i\"\n            :class=\"{ 'is-active': i === index }\" @click=\"go(i)\"></span>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, onMounted, onBeforeUnmount } from 'vue';\nconst props = defineProps({\n  items: { type: Array, default: () => [] },\n  autoplay: { type: Boolean, default: true },\n  interval: { type: Number, default: 3000 }\n});\nconst index = ref(0);\nlet timer = null;\nfunction go(i) {\n  const len = props.items.length || 1;\n  index.value = (i + len) % len;\n  restart();\n}\nfunction restart() {\n  if (timer) clearInterval(timer);\n  if (props.autoplay && props.items.length > 1) {\n    timer = setInterval(() => go(index.value + 1), props.interval);\n  }\n}\nonMounted(restart);\nonBeforeUnmount(() => { if (timer) clearInterval(timer); });\n</script>\n\n<style src=\"./Carousel.css\"></style>\n"}},{"slug":"imagepreview","name":"图片预览 ImagePreview","tier":"extension","confidence":"high","specBatch":2,"specFile":"组件2.txt","contractRef":"components/imagepreview.json","category":"display","specLines":["- 点击缩略图打开大图预览","- 遮罩深色 rgba(0,0,0,0.85)","- 支持缩放、旋转、左右切换、下载","- 底部显示当前序号/总数"],"specSummary":"- 点击缩略图打开大图预览","contract":{"variants":["缩放","旋转","左右切换","下载"],"dims":[{"name":"action","values":["zoom","rotate","switch","download"]}],"unknowns":["缩放步进与最大倍数","工具栏按钮的位置与图标"],"anatomy":{"mask":"遮罩深色 rgba(0,0,0,0.85)","thumb":"缩略图，点击打开大图预览","counter":"底部显示当前序号/总数"},"doNot":["缩略图列表的布局与分页"],"usage":["点击缩略图打开大图预览","遮罩深色 rgba(0,0,0,0.85)","支持缩放、旋转、左右切换、下载","底部显示当前序号/总数"],"structure":{"mask":"rgba(0,0,0,0.85)","counter":"底部当前序号/总数"}},"files":{"html":"../frameworks/ImagePreview.html","css":"../frameworks/ImagePreview.css","jsx":"../frameworks/ImagePreview.jsx","vue2":"../frameworks/ImagePreview.vue2.vue","vue3":"../frameworks/ImagePreview.vue3.vue"},"sizes":{"html":3415,"css":1276,"jsx":1069,"vue2":1089,"vue3":1062},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · ImagePreview（普通 H5）</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"ImagePreview.css\" />\n  <style>body{margin:0;padding:24px;background: var(--au-color-page-bg);display:flex;gap:8px;}\n    .aa-thumb{width:80px;height:80px;border-radius:6px;object-fit:cover;cursor:pointer;border: 1px solid var(--au-color-border);}</style>\n</head>\n<body>\n  <div id=\"thumbs\"></div>\n  <div class=\"aa-imgprev-mask\" aria-modal=\"true\" id=\"mask\" style=\"display:none\">\n    <button class=\"aa-imgprev-close\" role=\"button\" tabindex=\"0\" aria-modal=\"true\" id=\"close\">✕</button>\n    <button class=\"aa-imgprev-arrow prev\" role=\"dialog\" aria-modal=\"true\" id=\"prev\">‹</button>\n    <img class=\"aa-imgprev-img\" aria-modal=\"true\" id=\"big\" />\n    <button class=\"aa-imgprev-arrow next\" role=\"dialog\" aria-modal=\"true\" id=\"next\">›</button>\n    <div class=\"aa-imgprev-count\" role=\"dialog\" aria-modal=\"true\" id=\"count\"></div>\n    <div class=\"aa-imgprev-thumbs\" role=\"dialog\" aria-modal=\"true\" id=\"strip\"></div>\n  </div>\n\n  <script>\n    function svg(c1, c2, t) {\n      var s = \"<svg xmlns='http://www.w3.org/2000/svg' width='400' height='300'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'>\" +\n        \"<stop offset='0' stop-color='\" + c1 + \"'/><stop offset='1' stop-color='\" + c2 + \"'/></linearGradient></defs>\" +\n        \"<rect width='400' height='300' fill='url(#g)'/><text x='200' y='160' font-size='40' fill='#fff' text-anchor='middle' font-family='sans-serif'>\" + t + \"</text></svg>\";\n      return \"data:image/svg+xml;utf8,\" + encodeURIComponent(s);\n    }\n    var IMGS = [svg('#2F54EB','#1D39C4','图 1'), svg('#13C2C2','#08979C','图 2'), svg('#722ED1','#531DAB','图 3'), svg('#8C5A00','#D46B08','图 4')];\n    var cur = 0;\n    var mask = document.getElementById('mask');\n\n    document.getElementById('thumbs').innerHTML = IMGS.map(function (u, i) {\n      return '<img class=\"aa-thumb\" role=\"button\" tabindex=\"0\" src=\"' + u + '\" data-i=\"' + i + '\">';\n    }).join('');\n    document.querySelectorAll('.aa-thumb').forEach(function (t) {\n      t.onclick = function () { cur = parseInt(t.dataset.i, 10); show(); };\n    });\n\n    function show() {\n      mask.style.display = 'flex';\n      document.getElementById('big').src = IMGS[cur];\n      document.getElementById('count').textContent = (cur + 1) + ' / ' + IMGS.length;\n      document.getElementById('strip').innerHTML = IMGS.map(function (u, i) {\n        return '<img class=\"aa-imgprev-thumb ' + (i === cur ? 'is-active' : '') + '\" role=\"dialog\" aria-modal=\"true\" src=\"' + u + '\" data-i=\"' + i + '\">';\n      }).join('');\n      document.querySelectorAll('.aa-imgprev-thumb').forEach(function (th) {\n        th.onclick = function () { cur = parseInt(th.dataset.i, 10); show(); };\n      });\n    }\n    function hide() { mask.style.display = 'none'; }\n    document.getElementById('close').onclick = hide;\n    document.getElementById('prev').onclick = function () { cur = (cur - 1 + IMGS.length) % IMGS.length; show(); };\n    document.getElementById('next').onclick = function () { cur = (cur + 1) % IMGS.length; show(); };\n    mask.addEventListener('click', function (e) { if (e.target === mask) hide(); });\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin ImagePreview 样式 — 图片大图预览，遮罩 + 左右切换 + 缩略图 */\n\n.aa-imgprev-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 2500; display: flex; align-items: center; justify-content: center; flex-direction: column; }\n.aa-imgprev-img { max-width: 80vw; max-height: 70vh; border-radius: 4px; }\n.aa-imgprev-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(255,255,255,0.15); color: var(--au-color-text-inverse); font-size: 20px; cursor: pointer; }\n.aa-imgprev-arrow:hover { background: rgba(255,255,255,0.3); }\n.aa-imgprev-arrow.prev { left: 24px; }\n.aa-imgprev-arrow.next { right: 24px; }\n.aa-imgprev-close { position: absolute; top: 20px; right: 24px; color: var(--au-color-text-inverse); font-size: 24px; cursor: pointer; background: none; border: none; }\n.aa-imgprev-thumbs { display: flex; gap: 8px; margin-top: 16px; }\n.aa-imgprev-thumb { width: 48px; height: 48px; border-radius: 4px; object-fit: cover; cursor: pointer; border: 2px solid transparent; }\n.aa-imgprev-thumb.is-active { border-color: var(--au-color-brand); }\n.aa-imgprev-count { color: var(--au-color-text-inverse); font-size: 13px; margin-top: 8px; }\n","jsx":"import React from 'react';\nimport './ImagePreview.css';\n\nexport default function ImagePreview({ images = [], visible = false, index = 0, onClose, onChange }) {\n  if (!visible) return null;\n  const len = images.length || 1;\n  const go = dir => onChange && onChange((index + dir + len) % len);\n  return (\n    <div className=\"aa-imgprev-mask\" onClick={e => { if (e.target === e.currentTarget) onClose && onClose(); }}>\n      <button className=\"aa-imgprev-close\" onClick={onClose}>✕</button>\n      <button className=\"aa-imgprev-arrow prev\" onClick={() => go(-1)}>‹</button>\n      <img className=\"aa-imgprev-img\" src={images[index]} alt={index} />\n      <button className=\"aa-imgprev-arrow next\" onClick={() => go(1)}>›</button>\n      <div className=\"aa-imgprev-count\">{index + 1} / {len}</div>\n      <div className=\"aa-imgprev-thumbs\">\n        {images.map((u, i) => (\n          <img key={i} className={'aa-imgprev-thumb' + (i === index ? ' is-active' : '')}\n               src={u} onClick={() => onChange && onChange(i)} />\n        ))}\n      </div>\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-imgprev-mask\" v-if=\"visible\" @click.self=\"$emit('close')\">\n    <button class=\"aa-imgprev-close\" @click=\"$emit('close')\">✕</button>\n    <button class=\"aa-imgprev-arrow prev\" @click=\"go(-1)\">‹</button>\n    <img class=\"aa-imgprev-img\" :src=\"images[index]\" :alt=\"index\" />\n    <button class=\"aa-imgprev-arrow next\" @click=\"go(1)\">›</button>\n    <div class=\"aa-imgprev-count\">{{ index + 1 }} / {{ images.length }}</div>\n    <div class=\"aa-imgprev-thumbs\">\n      <img v-for=\"(u, i) in images\" :key=\"i\" class=\"aa-imgprev-thumb\" :class=\"{ 'is-active': i === index }\"\n           :src=\"u\" @click=\"$emit('change', i)\" />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaImagePreview',\n  props: { images: { type: Array, default: function () { return []; } }, visible: { type: Boolean, default: false }, index: { type: Number, default: 0 } },\n  methods: {\n    go: function (dir) {\n      var len = this.images.length || 1;\n      this.$emit('change', (this.index + dir + len) % len);\n    }\n  }\n};\n</script>\n\n<style src=\"./ImagePreview.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-imgprev-mask\" v-if=\"visible\" @click.self=\"emit('close')\">\n    <button class=\"aa-imgprev-close\" @click=\"emit('close')\">✕</button>\n    <button class=\"aa-imgprev-arrow prev\" @click=\"go(-1)\">‹</button>\n    <img class=\"aa-imgprev-img\" :src=\"images[index]\" :alt=\"index\" />\n    <button class=\"aa-imgprev-arrow next\" @click=\"go(1)\">›</button>\n    <div class=\"aa-imgprev-count\">{{ index + 1 }} / {{ images.length }}</div>\n    <div class=\"aa-imgprev-thumbs\">\n      <img v-for=\"(u, i) in images\" :key=\"i\" class=\"aa-imgprev-thumb\" :class=\"{ 'is-active': i === index }\"\n           :src=\"u\" @click=\"emit('change', i)\" />\n    </div>\n  </div>\n</template>\n\n<script setup>\nconst props = defineProps({\n  images: { type: Array, default: () => [] },\n  visible: { type: Boolean, default: false },\n  index: { type: Number, default: 0 }\n});\nconst emit = defineEmits(['close', 'change']);\nfunction go(dir) {\n  const len = props.images.length || 1;\n  emit('change', (props.index + dir + len) % len);\n}\n</script>\n\n<style src=\"./ImagePreview.css\"></style>\n"}},{"slug":"qrcode","name":"二维码 QRCode","tier":"extension","confidence":"high","specBatch":2,"specFile":"组件2.txt","contractRef":"components/qrcode.json","category":"display","specLines":["- 用于扫码登录、分享、设备绑定","- 尺寸 120–240px，容错率 M","- 支持嵌入 Logo（尺寸 20%）","- 背景白色，前景黑色，支持自定义颜色"],"specSummary":"- 用于扫码登录、分享、设备绑定","contract":{"variants":["小尺寸二维码","中尺寸二维码","嵌入 Logo"],"dims":[{"name":"size","values":["120px","180px","240px"]},{"name":"logo","values":["none","embedded"]}],"unknowns":["自定义前景/背景色的取值边界","失效态（过期）的覆盖表现"],"anatomy":{"matrix":"码点矩阵：容错率 M","logo":"嵌入 Logo（尺寸 20%）","colors":"背景白色，前景黑色，支持自定义颜色"},"doNot":["二维码中心 Logo 的白底留边尺寸"],"usage":["用于扫码登录、分享、设备绑定","尺寸 120–240px，容错率 M","支持嵌入 Logo（尺寸 20%）","背景白色，前景黑色，支持自定义颜色"],"structure":{"size":"120-240px","errorCorrection":"M","logoSize":"20%","background":"#FFFFFF","foreground":"#000000"}},"files":{"html":"../frameworks/QRCode.html","css":"../frameworks/QRCode.css","jsx":"../frameworks/QRCode.jsx","vue2":"../frameworks/QRCode.vue2.vue","vue3":"../frameworks/QRCode.vue3.vue"},"sizes":{"html":2595,"css":535,"jsx":1679,"vue2":1998,"vue3":1818},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · QRCode（普通 H5）</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"QRCode.css\" />\n  <style>body{margin:0;padding:24px;background: var(--au-color-page-bg);} .aa-panel{background: var(--au-color-card-bg);border: 1px solid var(--au-color-border);border-radius:8px;padding:16px;display:inline-block;}</style>\n</head>\n<body>\n  <div class=\"aa-panel\">\n    <div class=\"aa-qrcode\" role=\"img\" id=\"app\"></div>\n    <div style=\"margin-top:12px\"><input id=\"val\" value=\"https://aurora.admin\" style=\"width:200px;border:1px solid var(--color-border);border-radius:6px;padding:6px 8px;\" /></div>\n  </div>\n\n  <script>\n    function buildMatrix(value, n) {\n      var seed = 0; for (var i = 0; i < value.length; i++) seed = (seed * 31 + value.charCodeAt(i)) >>> 0;\n      function rnd() { seed = (seed * 1103515245 + 12345) >>> 0; return seed / 4294967296; }\n      var m = []; for (var r = 0; r < n; r++) { m.push(new Array(n).fill(false)); }\n      for (var r2 = 0; r2 < n; r2++) for (var c = 0; c < n; c++) { if (rnd() > 0.5) m[r2][c] = true; }\n      function place(r0, c0) {\n        for (var r = 0; r < 7; r++) for (var c = 0; c < 7; c++) {\n          var edge = r === 0 || r === 6 || c === 0 || c === 6; var inner = r >= 2 && r <= 4 && c >= 2 && c <= 4;\n          m[r0 + r][c0 + c] = edge || inner;\n        }\n        for (var rr = -1; rr < 8; rr++) for (var cc = -1; cc < 8; cc++) {\n          var y = r0 + rr, x = c0 + cc; if (y >= 0 && y < n && x >= 0 && x < n) { if (rr < 0 || rr === 7 || cc < 0 || cc === 7) m[y][x] = false; }\n        }\n      }\n      place(0, 0); place(0, n - 7); place(n - 7, 0);\n      return m;\n    }\n    function render() {\n      var val = document.getElementById('val').value;\n      var n = 25, cell = 8, size = n * cell;\n      var m = buildMatrix(val, n);\n      var rects = '';\n      for (var r = 0; r < n; r++) for (var c = 0; c < n; c++) {\n        if (m[r][c]) rects += '<rect x=\"' + (c * cell) + '\" y=\"' + (r * cell) + '\" width=\"' + cell + '\" height=\"' + cell + '\" />';\n      }\n      document.getElementById('app').innerHTML =\n        '<svg width=\"' + size + '\" height=\"' + size + '\" viewBox=\"0 0 ' + size + ' ' + size + '\" fill=\"#1F2329\">' + rects + '</svg>' +\n        '<div class=\"aa-qrcode-text\">' + val + '</div>';\n    }\n    document.getElementById('val').addEventListener('input', render);\n    render();\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin QRCode 样式 — 二维码（示例图案，确定性生成，含定位角） */\n\n.aa-qrcode { display: inline-block; padding: 8px; background: var(--au-color-card-bg); border: 1px solid var(--au-color-border); border-radius: 8px;\n  font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); }\n.aa-qrcode svg { display: block; }\n.aa-qrcode-text { font-size: 12px; color: var(--au-color-text-secondary); text-align: center; margin-top: 6px; word-break: break-all; max-width: 200px; }\n","jsx":"import React, { useMemo } from 'react';\nimport './QRCode.css';\n\nconst N = 25;\n\nfunction matrix(value, n) {\n  let seed = 0; for (let i = 0; i < value.length; i++) seed = (seed * 31 + value.charCodeAt(i)) >>> 0;\n  const rnd = () => { seed = (seed * 1103515245 + 12345) >>> 0; return seed / 4294967296; };\n  const m = []; for (let r = 0; r < n; r++) m.push(new Array(n).fill(false));\n  for (let r = 0; r < n; r++) for (let c = 0; c < n; c++) if (rnd() > 0.5) m[r][c] = true;\n  const place = (r0, c0) => {\n    for (let r = 0; r < 7; r++) for (let c = 0; c < 7; c++) {\n      const edge = r === 0 || r === 6 || c === 0 || c === 6, inner = r >= 2 && r <= 4 && c >= 2 && c <= 4;\n      m[r0 + r][c0 + c] = edge || inner;\n    }\n    for (let rr = -1; rr < 8; rr++) for (let cc = -1; cc < 8; cc++) {\n      const y = r0 + rr, x = c0 + cc; if (y >= 0 && y < n && x >= 0 && x < n) { if (rr < 0 || rr === 7 || cc < 0 || cc === 7) m[y][x] = false; }\n    }\n  };\n  place(0, 0); place(0, n - 7); place(n - 7, 0);\n  return m;\n}\n\nexport default function QRCode({ value = '', size = 200, color = '#1F2329', showText = true }) {\n  const cell = size / N;\n  const cells = useMemo(() => {\n    const m = matrix(value, N), out = [];\n    for (let r = 0; r < N; r++) for (let c = 0; c < N; c++) if (m[r][c]) out.push({ x: c * cell, y: r * cell });\n    return out;\n  }, [value, size]);\n\n  return (\n    <div className=\"aa-qrcode\">\n      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} fill={color}>\n        {cells.map((rc, i) => <rect key={i} x={rc.x} y={rc.y} width={cell} height={cell} />)}\n      </svg>\n      {showText ? <div className=\"aa-qrcode-text\">{value}</div> : null}\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-qrcode\">\n    <svg :width=\"size\" :height=\"size\" :viewBox=\"'0 0 ' + size + ' ' + size\" :fill=\"color\">\n      <rect v-for=\"(rc, i) in cells\" :key=\"i\" :x=\"rc.x\" :y=\"rc.y\" :width=\"cell\" :height=\"cell\" />\n    </svg>\n    <div class=\"aa-qrcode-text\" v-if=\"showText\">{{ value }}</div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaQrcode',\n  props: { value: { type: String, default: '' }, size: { type: Number, default: 200 }, color: { type: String, default: '#1F2329' }, showText: { type: Boolean, default: true } },\n  data: function () { return { n: 25, cell: 8 }; },\n  computed: {\n    cells: function () {\n      var n = this.n, cell = this.cell, m = this.matrix(this.value, n), out = [];\n      for (var r = 0; r < n; r++) for (var c = 0; c < n; c++) {\n        if (m[r][c]) out.push({ x: c * cell, y: r * cell });\n      }\n      return out;\n    }\n  },\n  methods: {\n    matrix: function (value, n) {\n      var seed = 0; for (var i = 0; i < value.length; i++) seed = (seed * 31 + value.charCodeAt(i)) >>> 0;\n      function rnd() { seed = (seed * 1103515245 + 12345) >>> 0; return seed / 4294967296; }\n      var m = []; for (var r = 0; r < n; r++) m.push(new Array(n).fill(false));\n      for (var r2 = 0; r2 < n; r2++) for (var c = 0; c < n; c++) if (rnd() > 0.5) m[r2][c] = true;\n      function place(r0, c0) {\n        for (var r = 0; r < 7; r++) for (var c = 0; c < 7; c++) {\n          var edge = r === 0 || r === 6 || c === 0 || c === 6, inner = r >= 2 && r <= 4 && c >= 2 && c <= 4;\n          m[r0 + r][c0 + c] = edge || inner;\n        }\n        for (var rr = -1; rr < 8; rr++) for (var cc = -1; cc < 8; cc++) {\n          var y = r0 + rr, x = c0 + cc; if (y >= 0 && y < n && x >= 0 && x < n) { if (rr < 0 || rr === 7 || cc < 0 || cc === 7) m[y][x] = false; }\n        }\n      }\n      place(0, 0); place(0, n - 7); place(n - 7, 0);\n      return m;\n    }\n  },\n  created: function () { this.cell = this.size / this.n; }\n};\n</script>\n\n<style src=\"./QRCode.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-qrcode\">\n    <svg :width=\"size\" :height=\"size\" :viewBox=\"'0 0 ' + size + ' ' + size\" :fill=\"color\">\n      <rect v-for=\"(rc, i) in cells\" :key=\"i\" :x=\"rc.x\" :y=\"rc.y\" :width=\"cell\" :height=\"cell\" />\n    </svg>\n    <div class=\"aa-qrcode-text\" v-if=\"showText\">{{ value }}</div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed } from 'vue';\nconst props = defineProps({\n  value: { type: String, default: '' }, size: { type: Number, default: 200 },\n  color: { type: String, default: '#1F2329' }, showText: { type: Boolean, default: true }\n});\nconst n = 25;\nconst cell = ref(props.size / n);\n\nfunction matrix(value, n) {\n  let seed = 0; for (let i = 0; i < value.length; i++) seed = (seed * 31 + value.charCodeAt(i)) >>> 0;\n  const rnd = () => { seed = (seed * 1103515245 + 12345) >>> 0; return seed / 4294967296; };\n  const m = []; for (let r = 0; r < n; r++) m.push(new Array(n).fill(false));\n  for (let r = 0; r < n; r++) for (let c = 0; c < n; c++) if (rnd() > 0.5) m[r][c] = true;\n  const place = (r0, c0) => {\n    for (let r = 0; r < 7; r++) for (let c = 0; c < 7; c++) {\n      const edge = r === 0 || r === 6 || c === 0 || c === 6, inner = r >= 2 && r <= 4 && c >= 2 && c <= 4;\n      m[r0 + r][c0 + c] = edge || inner;\n    }\n    for (let rr = -1; rr < 8; rr++) for (let cc = -1; cc < 8; cc++) {\n      const y = r0 + rr, x = c0 + cc; if (y >= 0 && y < n && x >= 0 && x < n) { if (rr < 0 || rr === 7 || cc < 0 || cc === 7) m[y][x] = false; }\n    }\n  };\n  place(0, 0); place(0, n - 7); place(n - 7, 0);\n  return m;\n}\nconst cells = computed(() => {\n  const m = matrix(props.value, n), out = [];\n  for (let r = 0; r < n; r++) for (let c = 0; c < n; c++) if (m[r][c]) out.push({ x: c * cell.value, y: r * cell.value });\n  return out;\n});\n</script>\n\n<style src=\"./QRCode.css\"></style>\n"}},{"slug":"countdown","name":"倒计时 Countdown","tier":"extension","confidence":"high","specBatch":2,"specFile":"组件2.txt","contractRef":"components/countdown.json","category":"display","specLines":["- 用于秒杀、验证码、会议开始","- 数字使用 DIN 字体，字号 20–32px","- 时间单位分隔符冒号，颜色次要文字","- 支持天/时/分/秒显示，结束时触发回调"],"specSummary":"- 用于秒杀、验证码、会议开始","contract":{"variants":["天/时/分/秒完整显示","分/秒显示","秒级显示"],"dims":[{"name":"unit","values":["day","hour","minute","second"]},{"name":"size","values":["20px","26px","32px"]}],"unknowns":["触发回调后的替换内容","是否补零的显示约定"],"anatomy":{"digit":"数字：使用 DIN 字体，字号 20–32px","separator":"时间单位分隔符冒号，颜色次要文字","callback":"结束时触发回调"},"doNot":["数字卡片的背景块样式"],"usage":["用于秒杀、验证码、会议开始","数字使用 DIN 字体，字号 20–32px","时间单位分隔符冒号，颜色次要文字","支持天/时/分/秒显示，结束时触发回调"],"structure":{"fontFamily":"DIN","fontSize":"20-32px","separator":"冒号（次要文字色）"}},"files":{"html":"../frameworks/Countdown.html","css":"../frameworks/Countdown.css","jsx":"../frameworks/Countdown.jsx","vue2":"../frameworks/Countdown.vue2.vue","vue3":"../frameworks/Countdown.vue3.vue"},"sizes":{"html":2065,"css":854,"jsx":1485,"vue2":1466,"vue3":1491},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · Countdown</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"./Countdown.css\" />\n</head>\n<body>\n  <div class=\"aa-page\">\n    <h2 class=\"aa-h2\">Countdown 倒计时</h2>\n    <p class=\"aa-desc\">用于秒杀、验证码、会议开始等场景，支持天/时/分/秒，结束触发回调。</p>\n\n    <div class=\"aa-demo\">\n      <div class=\"aa-demo__title\">距活动结束</div>\n      <div class=\"aa-countdown\" role=\"timer\" aria-live=\"polite\" id=\"cd\"></div>\n    </div>\n  </div>\n\n  <script>\n    var target = Date.now() + 2 * 3600 * 1000 + 35 * 60 * 1000 + 12 * 1000; // 2h35m12s\n    var root = document.getElementById('cd');\n    function renderCountdown() {\n      var diff = target - Date.now();\n      if (diff <= 0) {\n        clearInterval(timer);\n        root.innerHTML = '<span class=\"aa-countdown-done\" role=\"timer\" aria-live=\"polite\">活动已结束</span>';\n        return;\n      }\n      var s = Math.floor(diff / 1000);\n      var d = Math.floor(s / 86400); s %= 86400;\n      var h = Math.floor(s / 3600); s %= 3600;\n      var m = Math.floor(s / 60); var sec = s % 60;\n      var pad = function (n) { return String(n).padStart(2, '0'); };\n      var seg = function (num, label) {\n        return '<div class=\"aa-countdown-seg\" role=\"timer\" aria-live=\"polite\"><span class=\"aa-countdown-num\" aria-live=\"polite\">' + pad(num) + '</span><span class=\"aa-countdown-label\" aria-live=\"polite\">' + label + '</span></div>';\n      };\n      root.innerHTML = (d > 0 ? seg(d, '天') : '') + seg(h, '时') + '<span class=\"aa-countdown-sep\" aria-live=\"polite\">:</span>' + seg(m, '分') + '<span class=\"aa-countdown-sep\" aria-live=\"polite\">:</span>' + seg(sec, '秒');\n    }\n    renderCountdown();               // 首帧立即渲染，避免初始 1 秒空白\n    var timer = setInterval(renderCountdown, 1000);\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin Countdown 样式 — 倒计时 */\n.aa-countdown { font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); display: inline-flex; align-items: center; gap: 6px; }\n.aa-countdown-seg { display: flex; flex-direction: column; align-items: center; }\n.aa-countdown-num { font-family: Consolas, \"SFMono-Regular\", monospace; font-size: 24px; font-weight: 600; color: var(--au-color-text-title); background: var(--au-color-page-bg); border-radius: 6px; min-width: 44px; padding: 4px 8px; text-align: center; line-height: 1.2; }\n.aa-countdown-label { font-size: 11px; color: var(--au-color-text-secondary); margin-top: 3px; }\n.aa-countdown-sep { font-size: 22px; font-weight: 600; color: var(--au-color-text-secondary); }\n.aa-countdown-done { font-size: 15px; color: var(--au-color-success); font-weight: 600; }\n","jsx":"import React, { useState, useEffect } from 'react';\nimport './Countdown.css';\n\nconst pad = (n) => String(n).padStart(2, '0');\n\nexport default function Countdown({ target = Date.now() + 3600000 }) {\n  const [now, setNow] = useState(Date.now());\n  useEffect(() => {\n    const t = setInterval(() => setNow(Date.now()), 1000);\n    return () => clearInterval(t);\n  }, []);\n  const diff = Math.max(0, target - now);\n  const d = Math.floor(diff / 86400000);\n  const h = Math.floor((diff % 86400000) / 3600000);\n  const m = Math.floor((diff % 3600000) / 60000);\n  const s = Math.floor((diff % 60000) / 1000);\n\n  return (\n    <div className=\"aa-countdown\">\n      {d > 0 && (\n        <span className=\"aa-countdown-seg\">\n          <span className=\"aa-countdown-num\">{pad(d)}</span>\n          <span className=\"aa-countdown-label\">天</span>\n        </span>\n      )}\n      <span className=\"aa-countdown-seg\">\n        <span className=\"aa-countdown-num\">{pad(h)}</span>\n        <span className=\"aa-countdown-label\">时</span>\n      </span>\n      <span className=\"aa-countdown-sep\">:</span>\n      <span className=\"aa-countdown-seg\">\n        <span className=\"aa-countdown-num\">{pad(m)}</span>\n        <span className=\"aa-countdown-label\">分</span>\n      </span>\n      <span className=\"aa-countdown-sep\">:</span>\n      <span className=\"aa-countdown-seg\">\n        <span className=\"aa-countdown-num\">{pad(s)}</span>\n        <span className=\"aa-countdown-label\">秒</span>\n      </span>\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-countdown\">\n    <span v-if=\"d > 0\" class=\"aa-countdown-seg\"><span class=\"aa-countdown-num\">{{ pad(d) }}</span><span class=\"aa-countdown-label\">天</span></span>\n    <span class=\"aa-countdown-seg\"><span class=\"aa-countdown-num\">{{ pad(h) }}</span><span class=\"aa-countdown-label\">时</span></span>\n    <span class=\"aa-countdown-sep\">:</span>\n    <span class=\"aa-countdown-seg\"><span class=\"aa-countdown-num\">{{ pad(m) }}</span><span class=\"aa-countdown-label\">分</span></span>\n    <span class=\"aa-countdown-sep\">:</span>\n    <span class=\"aa-countdown-seg\"><span class=\"aa-countdown-num\">{{ pad(s) }}</span><span class=\"aa-countdown-label\">秒</span></span>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaCountdown',\n  props: { target: { type: Number, default: () => Date.now() + 3600000 } },\n  data() {\n    return { now: Date.now(), timer: null };\n  },\n  computed: {\n    diff() { return Math.max(0, this.target - this.now); },\n    d() { return Math.floor(this.diff / 86400000); },\n    h() { return Math.floor((this.diff % 86400000) / 3600000); },\n    m() { return Math.floor((this.diff % 3600000) / 60000); },\n    s() { return Math.floor((this.diff % 60000) / 1000); }\n  },\n  mounted() {\n    this.timer = setInterval(() => { this.now = Date.now(); }, 1000);\n  },\n  beforeDestroy() { clearInterval(this.timer); },\n  methods: { pad(n) { return String(n).padStart(2, '0'); } }\n};\n</script>\n\n<style src=\"./Countdown.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-countdown\">\n    <span v-if=\"d > 0\" class=\"aa-countdown-seg\"><span class=\"aa-countdown-num\">{{ pad(d) }}</span><span class=\"aa-countdown-label\">天</span></span>\n    <span class=\"aa-countdown-seg\"><span class=\"aa-countdown-num\">{{ pad(h) }}</span><span class=\"aa-countdown-label\">时</span></span>\n    <span class=\"aa-countdown-sep\">:</span>\n    <span class=\"aa-countdown-seg\"><span class=\"aa-countdown-num\">{{ pad(m) }}</span><span class=\"aa-countdown-label\">分</span></span>\n    <span class=\"aa-countdown-sep\">:</span>\n    <span class=\"aa-countdown-seg\"><span class=\"aa-countdown-num\">{{ pad(s) }}</span><span class=\"aa-countdown-label\">秒</span></span>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, onBeforeUnmount } from 'vue';\n\nconst props = defineProps({ target: { type: Number, default: () => Date.now() + 3600000 } });\nconst now = ref(Date.now());\nlet timer = null;\nonMounted(() => { timer = setInterval(() => (now.value = Date.now()), 1000); });\nonBeforeUnmount(() => clearInterval(timer));\n\nconst diff = computed(() => Math.max(0, props.target - now.value));\nconst d = computed(() => Math.floor(diff.value / 86400000));\nconst h = computed(() => Math.floor((diff.value % 86400000) / 3600000));\nconst m = computed(() => Math.floor((diff.value % 3600000) / 60000));\nconst s = computed(() => Math.floor((diff.value % 60000) / 1000));\nconst pad = (n) => String(n).padStart(2, '0');\n</script>\n\n<style src=\"./Countdown.css\"></style>\n"}},{"slug":"watermark","name":"水印 Watermark","tier":"extension","confidence":"high","specBatch":2,"specFile":"组件2.txt","contractRef":"components/watermark.json","category":"display","specLines":["- 用于敏感信息防泄露","- 可配置文字、图片水印","- 默认文字颜色 #BFBFBF，旋转 -22°，间距 100px","- 覆盖整个页面或指定区域，不影响交互"],"specSummary":"- 用于敏感信息防泄露","contract":{"variants":["文字水印覆盖整页","文字水印覆盖指定区域","图片水印"],"dims":[{"name":"content","values":["text","image"]},{"name":"coverage","values":["page","area"]}],"unknowns":["图片水印的默认尺寸与透明度","文字水印的字号默认值"],"anatomy":{"layer":"覆盖整个页面或指定区域，不影响交互","glyph":"默认文字颜色 #BFBFBF，旋转 -22°，间距 100px"},"doNot":["水印的防删除与防篡改机制"],"usage":["用于敏感信息防泄露","可配置文字、图片水印","默认文字颜色 #BFBFBF，旋转 -22°，间距 100px","覆盖整个页面或指定区域，不影响交互"],"structure":{"color":"#BFBFBF","rotate":"-22deg","gap":"100px"}},"files":{"html":"../frameworks/Watermark.html","css":"../frameworks/Watermark.css","jsx":"../frameworks/Watermark.jsx","vue2":"../frameworks/Watermark.vue2.vue","vue3":"../frameworks/Watermark.vue3.vue"},"sizes":{"html":1515,"css":314,"jsx":676,"vue2":1031,"vue3":1011},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · Watermark（普通 H5）</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"Watermark.css\" />\n  <style>body{margin:0;padding:24px;background: var(--au-color-page-bg);} .aa-box{position:relative;height:240px;background: var(--au-color-card-bg);border: 1px solid var(--au-color-border);border-radius:8px;padding:20px;overflow:hidden;}</style>\n</head>\n<body>\n  <div class=\"aa-box\">\n    <div class=\"aa-watermark\" id=\"wm\"></div>\n    <h3 style=\"position:relative;color:var(--color-text-title)\">机密文档</h3>\n    <p style=\"position:relative;color:var(--color-text-body)\">该区域内容受水印保护，请勿外传。</p>\n  </div>\n\n  <script>\n    function buildWatermark(text, color, fontSize, rotate, gap) {\n      var svg = \"<svg xmlns='http://www.w3.org/2000/svg' width='\" + gap + \"' height='\" + gap + \"'>\" +\n        \"<text x='0' y='\" + (fontSize + 6) + \"' font-family='sans-serif' font-size='\" + fontSize +\n        \"' fill='\" + color + \"' transform='rotate(\" + rotate + \" 0 \" + (fontSize + 6) + \")'> \" + text + \" </text></svg>\";\n      return \"url(\\\"data:image/svg+xml;utf8,\" + encodeURIComponent(svg) + \"\\\")\";\n    }\n    document.getElementById('wm').style.backgroundImage = buildWatermark('Aurora Admin', 'rgba(0,0,0,0.10)', 14, -22, 160);\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin Watermark 样式 — 对齐 组件7.txt 水印：平铺文本，不可选中，覆盖容器/全屏 */\n\n.aa-watermark { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; background-repeat: repeat; user-select: none; }\n.aa-watermark.is-fullscreen { position: fixed; }\n","jsx":"import React from 'react';\nimport './Watermark.css';\n\nexport default function Watermark({\n  text = 'Aurora Admin', color = 'rgba(0,0,0,0.10)', fontSize = 14,\n  rotate = -22, gap = 160, fullscreen = false\n}) {\n  const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='${gap}' height='${gap}'>` +\n    `<text x='0' y='${fontSize + 6}' font-family='sans-serif' font-size='${fontSize}' fill='${color}' transform='rotate(${rotate} 0 ${fontSize + 6})'> ${text} </text></svg>`;\n  const bg = `url(\"data:image/svg+xml;utf8,${encodeURIComponent(svg)}\")`;\n  return (\n    <div className={'aa-watermark' + (fullscreen ? ' is-fullscreen' : '')} style={{ backgroundImage: bg }} />\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-watermark\" :class=\"{ 'is-fullscreen': fullscreen }\" :style=\"{ backgroundImage: bg }\"></div>\n</template>\n\n<script>\nexport default {\n  name: 'AaWatermark',\n  props: {\n    text: { type: String, default: 'Aurora Admin' },\n    color: { type: String, default: 'rgba(0,0,0,0.10)' },\n    fontSize: { type: Number, default: 14 },\n    rotate: { type: Number, default: -22 },\n    gap: { type: Number, default: 160 },\n    fullscreen: { type: Boolean, default: false }\n  },\n  computed: {\n    bg: function () {\n      var svg = \"<svg xmlns='http://www.w3.org/2000/svg' width='\" + this.gap + \"' height='\" + this.gap + \"'>\" +\n        \"<text x='0' y='\" + (this.fontSize + 6) + \"' font-family='sans-serif' font-size='\" + this.fontSize +\n        \"' fill='\" + this.color + \"' transform='rotate(\" + this.rotate + \" 0 \" + (this.fontSize + 6) + \")'> \" + this.text + \" </text></svg>\";\n      return \"url(\\\"data:image/svg+xml;utf8,\" + encodeURIComponent(svg) + \"\\\")\";\n    }\n  }\n};\n</script>\n\n<style src=\"./Watermark.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-watermark\" :class=\"{ 'is-fullscreen': fullscreen }\" :style=\"{ backgroundImage: bg }\"></div>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nconst props = defineProps({\n  text: { type: String, default: 'Aurora Admin' },\n  color: { type: String, default: 'rgba(0,0,0,0.10)' },\n  fontSize: { type: Number, default: 14 },\n  rotate: { type: Number, default: -22 },\n  gap: { type: Number, default: 160 },\n  fullscreen: { type: Boolean, default: false }\n});\n\nconst bg = computed(() => {\n  const svg = \"<svg xmlns='http://www.w3.org/2000/svg' width='\" + props.gap + \"' height='\" + props.gap + \"'>\" +\n    \"<text x='0' y='\" + (props.fontSize + 6) + \"' font-family='sans-serif' font-size='\" + props.fontSize +\n    \"' fill='\" + props.color + \"' transform='rotate(\" + props.rotate + \" 0 \" + (props.fontSize + 6) + \")'> \" + props.text + \" </text></svg>\";\n  return \"url(\\\"data:image/svg+xml;utf8,\" + encodeURIComponent(svg) + \"\\\")\";\n});\n</script>\n\n<style src=\"./Watermark.css\"></style>\n"}},{"slug":"cardlist","name":"卡片列表 CardList","tier":"extension","confidence":"high","specBatch":4,"specFile":"组件4.txt","contractRef":"components/cardlist.json","category":"display","specLines":["- 以卡片形式展示列表数据","- 每行可显示多个卡片（栅格）","- 卡片内容自定义","- 支持分页或无限滚动"],"specSummary":"- 以卡片形式展示列表数据","contract":{"variants":["栅格 + 分页","栅格 + 无限滚动"],"dims":[{"name":"load","values":["pagination","infinite-scroll"]},{"name":"columns","values":["grid"]}],"unknowns":["栅格列数与响应式断点","无限滚动的触底阈值"],"anatomy":{"card":"卡片单元：内容自定义","row":"每行可显示多个卡片（栅格）"},"doNot":["卡片内部的字段与布局（内容由使用方自定义）"],"usage":["以卡片形式展示列表数据","每行可显示多个卡片（栅格）","卡片内容自定义","支持分页或无限滚动"],"structure":{"layout":"栅格，每行多个卡片"}},"files":{"html":"../frameworks/CardList.html","css":"../frameworks/CardList.css","jsx":"../frameworks/CardList.jsx","vue2":"../frameworks/CardList.vue2.vue","vue3":"../frameworks/CardList.vue3.vue"},"sizes":{"html":3426,"css":1548,"jsx":1191,"vue2":1023,"vue3":988},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · CardList（普通 H5）</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"CardList.css\" />\n  <style>\n    body { margin: 0; padding: 24px; background: var(--au-color-page-bg); }\n    .aa-demo-toolbar { margin-bottom: 16px; display: flex; gap: 8px; align-items: center; }\n    .aa-demo-toolbar label { font-size: 13px; color: var(--au-color-text-body); }\n    .aa-demo-toolbar select { border: 1px solid var(--au-color-border); border-radius: 6px; padding: 4px 8px; color: var(--au-color-text-body); }\n  </style>\n</head>\n<body>\n  <div class=\"aa-demo-toolbar\">\n    <label>列数：</label>\n    <select id=\"cols\">\n      <option value=\"2\">2 列</option>\n      <option value=\"3\" selected>3 列</option>\n      <option value=\"4\">4 列</option>\n    </select>\n  </div>\n\n  <div class=\"aa-cardlist\" id=\"app\"></div>\n\n  <script>\n    var DATA = [\n      { title: '用户管理', desc: '集中维护组织架构、账号与权限分配。', emoji: '👥', tags: ['账号', '权限'], actions: ['配置', '查看'] },\n      { title: '订单中心', desc: '实时追踪订单状态，支持退款与导出。', emoji: '📦', tags: ['交易'], actions: ['详情', '导出'] },\n      { title: '数据分析', desc: '多维报表与漏斗分析，驱动业务决策。', emoji: '📊', tags: ['报表', 'BI'], actions: ['打开'] },\n      { title: '消息推送', desc: '全渠道触达，支持模板与定时发送。', emoji: '🔔', tags: ['营销'], actions: ['新建', '记录'] },\n      { title: '内容库', desc: '统一管理图文、音视频素材资源。', emoji: '🗂️', tags: ['素材'], actions: ['上传'] },\n      { title: '系统设置', desc: '基础参数、日志与安全策略配置。', emoji: '⚙️', tags: ['配置'], actions: ['设置'] }\n    ];\n\n    function render() {\n      var cols = document.getElementById('cols').value;\n      var root = document.getElementById('app');\n      root.style.gridTemplateColumns = 'repeat(' + cols + ', 1fr)';\n      root.innerHTML = DATA.map(function (it) {\n        var tags = (it.tags || []).map(function (t) {\n          return '<span class=\"aa-card-tag\">' + t + '</span>';\n        }).join('');\n        var actions = (it.actions || []).map(function (a) {\n          return '<button data-title=\"' + it.title + '\">' + a + '</button>';\n        }).join('');\n        return '' +\n          '<div class=\"aa-cardlist-item\">' +\n            '<div class=\"aa-card-cover\">' + (it.emoji || '📄') + '</div>' +\n            '<div class=\"aa-card-body\">' +\n              '<div class=\"aa-card-title\">' + it.title + '</div>' +\n              '<div class=\"aa-card-desc\">' + it.desc + '</div>' +\n              (tags ? '<div class=\"aa-card-tags\">' + tags + '</div>' : '') +\n            '</div>' +\n            (actions ? '<div class=\"aa-card-actions\">' + actions + '</div>' : '') +\n          '</div>';\n      }).join('');\n\n      root.querySelectorAll('.aa-card-actions button').forEach(function (btn) {\n        btn.addEventListener('click', function () {\n          alert(btn.dataset.title + ' · ' + btn.textContent);\n        });\n      });\n    }\n\n    document.getElementById('cols').addEventListener('change', render);\n    render();\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin CardList 样式 — 对齐 组件7.txt CardList：栅格卡片、封面/标题/描述/标签/操作 */\n\n.aa-cardlist { display: grid; gap: 16px; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); color: var(--au-color-text-body); }\n.aa-cardlist-item { border: 1px solid var(--au-color-border); border-radius: 8px; overflow: hidden; background: var(--au-color-card-bg); transition: box-shadow .15s, border-color .15s; }\n.aa-cardlist-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-color: #C9D4F2; }\n.aa-card-cover { height: 120px; background: var(--au-color-brand-bg); display: flex; align-items: center; justify-content: center; font-size: 32px; color: var(--au-color-brand); }\n.aa-card-body { padding: 12px 16px; }\n.aa-card-title { font-size: 14px; font-weight: 500; color: var(--au-color-text-title); }\n.aa-card-desc { font-size: 13px; color: var(--au-color-text-secondary); margin-top: 4px; line-height: 1.5; }\n.aa-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }\n.aa-card-tag { background: var(--au-color-brand-bg); color: var(--au-color-brand); font-size: 12px; padding: 1px 8px; border-radius: 2px; }\n.aa-card-actions { display: flex; gap: 8px; padding: 8px 16px; border-top: 1px solid var(--au-color-border); }\n.aa-card-actions button { border: none; background: none; cursor: pointer; color: var(--au-color-brand); font-size: 13px; padding: 4px 8px; border-radius: 4px; }\n.aa-card-actions button:hover { background: var(--au-color-brand-bg); }\n","jsx":"import React from 'react';\nimport './CardList.css';\n\nexport default function CardList({ items = [], cols = 3, onAction }) {\n  return (\n    <div className=\"aa-cardlist\" style={{ gridTemplateColumns: `repeat(${cols}, 1fr)` }}>\n      {items.map((it, i) => (\n        <div className=\"aa-cardlist-item\" key={i}>\n          <div className=\"aa-card-cover\">{it.emoji || '📄'}</div>\n          <div className=\"aa-card-body\">\n            <div className=\"aa-card-title\">{it.title}</div>\n            <div className=\"aa-card-desc\">{it.desc}</div>\n            {it.tags && it.tags.length ? (\n              <div className=\"aa-card-tags\">\n                {it.tags.map((t, ti) => (\n                  <span className=\"aa-card-tag\" key={ti}>{t}</span>\n                ))}\n              </div>\n            ) : null}\n          </div>\n          {it.actions && it.actions.length ? (\n            <div className=\"aa-card-actions\">\n              {it.actions.map((a, ai) => (\n                <button key={ai} onClick={() => onAction && onAction({ item: it, action: a })}>\n                  {a}\n                </button>\n              ))}\n            </div>\n          ) : null}\n        </div>\n      ))}\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-cardlist\" :style=\"{ gridTemplateColumns: 'repeat(' + cols + ', 1fr)' }\">\n    <div class=\"aa-cardlist-item\" v-for=\"(it, i) in items\" :key=\"i\">\n      <div class=\"aa-card-cover\">{{ it.emoji || '📄' }}</div>\n      <div class=\"aa-card-body\">\n        <div class=\"aa-card-title\">{{ it.title }}</div>\n        <div class=\"aa-card-desc\">{{ it.desc }}</div>\n        <div class=\"aa-card-tags\" v-if=\"it.tags && it.tags.length\">\n          <span class=\"aa-card-tag\" v-for=\"(t, ti) in it.tags\" :key=\"ti\">{{ t }}</span>\n        </div>\n      </div>\n      <div class=\"aa-card-actions\" v-if=\"it.actions && it.actions.length\">\n        <button v-for=\"(a, ai) in it.actions\" :key=\"ai\" @click=\"$emit('action', { item: it, action: a })\">{{ a }}</button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaCardList',\n  props: {\n    items: { type: Array, default: function () { return []; } },\n    cols: { type: Number, default: 3 }\n  }\n};\n</script>\n\n<style src=\"./CardList.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-cardlist\" :style=\"{ gridTemplateColumns: `repeat(${cols}, 1fr)` }\">\n    <div class=\"aa-cardlist-item\" v-for=\"(it, i) in items\" :key=\"i\">\n      <div class=\"aa-card-cover\">{{ it.emoji || '📄' }}</div>\n      <div class=\"aa-card-body\">\n        <div class=\"aa-card-title\">{{ it.title }}</div>\n        <div class=\"aa-card-desc\">{{ it.desc }}</div>\n        <div class=\"aa-card-tags\" v-if=\"it.tags && it.tags.length\">\n          <span class=\"aa-card-tag\" v-for=\"(t, ti) in it.tags\" :key=\"ti\">{{ t }}</span>\n        </div>\n      </div>\n      <div class=\"aa-card-actions\" v-if=\"it.actions && it.actions.length\">\n        <button v-for=\"(a, ai) in it.actions\" :key=\"ai\" @click=\"$emit('action', { item: it, action: a })\">{{ a }}</button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\ndefineProps({\n  items: { type: Array, default: () => [] },\n  cols: { type: Number, default: 3 }\n});\ndefineEmits(['action']);\n</script>\n\n<style src=\"./CardList.css\"></style>\n"}},{"slug":"shortcutpanel","name":"键盘快捷键面板 ShortcutPanel","tier":"extension","confidence":"high","specBatch":5,"specFile":"组件5.txt","contractRef":"components/shortcutpanel.json","category":"system","specLines":["- 展示系统所有快捷键","- 弹窗列表：快捷键、功能描述","- 支持自定义快捷键","- 在设置中配置"],"specSummary":"- 展示系统所有快捷键","contract":{"variants":["全局快捷键列表","当前页快捷键","可自定义快捷键"],"dims":[{"name":"scope","values":["global","local"]},{"name":"editable","values":["true","false"]}],"unknowns":["面板的分组方式","自定义快捷键的持久化方式"],"anatomy":{"panel":"弹窗列表：快捷键、功能描述","scope":"展示系统所有快捷键","custom":"支持自定义快捷键","config":"在设置中配置"},"doNot":["快捷键的注册与冲突检测实现"],"usage":["展示系统所有快捷键","弹窗列表：快捷键、功能描述","支持自定义快捷键","在设置中配置"],"structure":{"layout":"快捷键 + 功能描述","custom":"可配置"}},"files":{"html":"../frameworks/ShortcutPanel.html","css":"../frameworks/ShortcutPanel.css","jsx":"../frameworks/ShortcutPanel.jsx","vue2":"../frameworks/ShortcutPanel.vue2.vue","vue3":"../frameworks/ShortcutPanel.vue3.vue"},"sizes":{"html":1933,"css":1347,"jsx":1295,"vue2":1289,"vue3":1229},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · ShortcutPanel</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"./ShortcutPanel.css\" />\n</head>\n<body>\n  <div class=\"aa-page\">\n    <h2 class=\"aa-h2\">ShortcutPanel 快捷键面板</h2>\n    <p class=\"aa-desc\">展示全部快捷键，支持搜索过滤。</p>\n\n    <div class=\"aa-demo\">\n      <div class=\"aa-shortcut\" role=\"region\">\n        <input class=\"aa-shortcut-search\" role=\"region\" id=\"search\" placeholder=\"搜索快捷键…\" />\n        <div class=\"aa-shortcut-list\" role=\"region\" id=\"list\"></div>\n      </div>\n    </div>\n  </div>\n\n  <script>\n    var items = [\n      { name: '保存', key: 'Ctrl + S' },\n      { name: '搜索', key: 'Ctrl + K' },\n      { name: '新建', key: 'Ctrl + N' },\n      { name: '刷新', key: 'F5' },\n      { name: '关闭页签', key: 'Ctrl + W' },\n      { name: '全屏', key: 'F11' },\n      { name: '帮助', key: '?' },\n      { name: '命令面板', key: 'Ctrl + P' }\n    ];\n    var list = document.getElementById('list');\n    var search = document.getElementById('search');\n\n    function render() {\n      var q = search.value.trim().toLowerCase();\n      var filtered = items.filter(function (it) { return !q || it.name.toLowerCase().indexOf(q) >= 0 || it.key.toLowerCase().indexOf(q) >= 0; });\n      if (!filtered.length) { list.innerHTML = '<div class=\"aa-shortcut-empty\" role=\"region\">无匹配快捷键</div>'; return; }\n      list.innerHTML = filtered.map(function (it) {\n        return '<div class=\"aa-shortcut-item\" role=\"region\"><span>' + it.name + '</span><span class=\"aa-shortcut-key\" role=\"region\">' + it.key + '</span></div>';\n      }).join('');\n    }\n    search.addEventListener('input', render);\n    render();\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin ShortcutPanel 样式 — 快捷键面板 */\n.aa-shortcut { font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); border: 1px solid var(--au-color-border); border-radius: 8px; padding: 14px; }\n.aa-shortcut-search { width: 100%; border: 1px solid var(--au-color-border); border-radius: 6px; padding: 7px 10px; font-size: 14px; outline: none; box-sizing: border-box; margin-bottom: 10px; transition: border-color .15s, box-shadow .15s; }\n.aa-shortcut-search:focus { border-color: var(--au-color-brand); box-shadow: 0 0 0 3px rgba(47,84,235,0.2); }\n.aa-shortcut-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }\n.aa-shortcut-item { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--au-color-text-body); background: var(--au-color-table-header-bg); border-radius: 6px; padding: 8px 10px; }\n.aa-shortcut-key { font-family: Consolas, monospace; background: var(--au-color-card-bg); border: 1px solid var(--au-color-border); border-radius: 4px; padding: 1px 6px; color: var(--au-color-text-tertiary); font-size: 12px; }\n.aa-shortcut-empty { grid-column: 1 / -1; text-align: center; color: var(--au-color-text-secondary); font-size: 13px; padding: 14px; }\n@media (max-width: 520px) { .aa-shortcut-list { grid-template-columns: 1fr; } }\n","jsx":"import React, { useState, useMemo } from 'react';\nimport './ShortcutPanel.css';\n\nconst DEFAULT_ITEMS = [\n  { name: '保存', key: 'Ctrl + S' },\n  { name: '搜索', key: 'Ctrl + K' },\n  { name: '新建', key: 'Ctrl + N' },\n  { name: '刷新', key: 'F5' },\n  { name: '关闭页签', key: 'Ctrl + W' },\n  { name: '全屏', key: 'F11' },\n  { name: '帮助', key: '?' },\n  { name: '命令面板', key: 'Ctrl + P' }\n];\n\nexport default function ShortcutPanel({ items = DEFAULT_ITEMS }) {\n  const [q, setQ] = useState('');\n  const filtered = useMemo(() => {\n    const s = q.trim().toLowerCase();\n    if (!s) return items;\n    return items.filter((it) => it.name.toLowerCase().indexOf(s) >= 0 || it.key.toLowerCase().indexOf(s) >= 0);\n  }, [q, items]);\n\n  return (\n    <div className=\"aa-shortcut\">\n      <input className=\"aa-shortcut-search\" value={q} placeholder=\"搜索快捷键…\" onChange={(e) => setQ(e.target.value)} />\n      <div className=\"aa-shortcut-list\">\n        {!filtered.length && <div className=\"aa-shortcut-empty\">无匹配快捷键</div>}\n        {filtered.map((it, i) => (\n          <div key={i} className=\"aa-shortcut-item\">\n            <span>{it.name}</span>\n            <span className=\"aa-shortcut-key\">{it.key}</span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-shortcut\">\n    <input class=\"aa-shortcut-search\" v-model=\"q\" placeholder=\"搜索快捷键…\" />\n    <div class=\"aa-shortcut-list\">\n      <div v-if=\"!filtered.length\" class=\"aa-shortcut-empty\">无匹配快捷键</div>\n      <div v-for=\"(it, i) in filtered\" :key=\"i\" class=\"aa-shortcut-item\">\n        <span>{{ it.name }}</span><span class=\"aa-shortcut-key\">{{ it.key }}</span>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaShortcutPanel',\n  props: {\n    items: {\n      type: Array,\n      default: () => [\n        { name: '保存', key: 'Ctrl + S' },\n        { name: '搜索', key: 'Ctrl + K' },\n        { name: '新建', key: 'Ctrl + N' },\n        { name: '刷新', key: 'F5' },\n        { name: '关闭页签', key: 'Ctrl + W' },\n        { name: '全屏', key: 'F11' },\n        { name: '帮助', key: '?' },\n        { name: '命令面板', key: 'Ctrl + P' }\n      ]\n    }\n  },\n  data() {\n    return { q: '' };\n  },\n  computed: {\n    filtered() {\n      var q = this.q.trim().toLowerCase();\n      if (!q) return this.items;\n      return this.items.filter(function (it) { return it.name.toLowerCase().indexOf(q) >= 0 || it.key.toLowerCase().indexOf(q) >= 0; });\n    }\n  }\n};\n</script>\n\n<style src=\"./ShortcutPanel.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-shortcut\">\n    <input class=\"aa-shortcut-search\" v-model=\"q\" placeholder=\"搜索快捷键…\" />\n    <div class=\"aa-shortcut-list\">\n      <div v-if=\"!filtered.length\" class=\"aa-shortcut-empty\">无匹配快捷键</div>\n      <div v-for=\"(it, i) in filtered\" :key=\"i\" class=\"aa-shortcut-item\">\n        <span>{{ it.name }}</span><span class=\"aa-shortcut-key\">{{ it.key }}</span>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed } from 'vue';\n\nconst props = defineProps({\n  items: {\n    type: Array,\n    default: () => [\n      { name: '保存', key: 'Ctrl + S' },\n      { name: '搜索', key: 'Ctrl + K' },\n      { name: '新建', key: 'Ctrl + N' },\n      { name: '刷新', key: 'F5' },\n      { name: '关闭页签', key: 'Ctrl + W' },\n      { name: '全屏', key: 'F11' },\n      { name: '帮助', key: '?' },\n      { name: '命令面板', key: 'Ctrl + P' }\n    ]\n  }\n});\nconst q = ref('');\nconst filtered = computed(() => {\n  const s = q.value.trim().toLowerCase();\n  if (!s) return props.items;\n  return props.items.filter((it) => it.name.toLowerCase().indexOf(s) >= 0 || it.key.toLowerCase().indexOf(s) >= 0);\n});\n</script>\n\n<style src=\"./ShortcutPanel.css\"></style>\n"}},{"slug":"bankcardinput","name":"银行卡输入 BankCardInput","tier":"extension","confidence":"high","specBatch":6,"specFile":"组件6.txt","contractRef":"components/bankcardinput.json","category":"input","specLines":["- 用于银行卡号输入","- 自动格式化每4位空格","- 识别卡类型（借记卡/信用卡/储蓄卡）并显示图标","- 支持Luhn校验","- 可配置扫描识别银行卡"],"specSummary":"- 用于银行卡号输入","contract":{"variants":["默认输入","聚焦（自动格式化）","Luhn 校验失败","开启扫描识别"],"dims":[{"name":"state","values":["default","focus","error","disabled"]},{"name":"scan","values":["enabled","disabled"]}],"unknowns":["卡类型图标的具体形状","Luhn 失败时的错误文案"],"anatomy":{"input":"输入框：自动格式化每 4 位空格","icon":"识别卡类型（借记卡/信用卡/储蓄卡）并显示图标","validate":"支持 Luhn 校验"},"doNot":["各银行 BIN 号段对照表","扫描识别的底层实现"],"usage":["用于银行卡号输入","自动格式化每4位空格","识别卡类型（借记卡/信用卡/储蓄卡）并显示图标","支持Luhn校验","可配置扫描识别银行卡"],"structure":{"format":"每 4 位空格","validate":"Luhn","scan":"可配置"}},"files":{"html":"../frameworks/BankCardInput.html","css":"../frameworks/BankCardInput.css","jsx":"../frameworks/BankCardInput.jsx","vue2":"../frameworks/BankCardInput.vue2.vue","vue3":"../frameworks/BankCardInput.vue3.vue"},"sizes":{"html":2869,"css":1470,"jsx":2133,"vue2":2245,"vue3":2250},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · BankCardInput</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"./BankCardInput.css\" />\n</head>\n<body>\n  <div class=\"aa-page\">\n    <h2 class=\"aa-h2\">BankCardInput 银行卡输入</h2>\n    <p class=\"aa-desc\">自动每 4 位空格、识别卡组织、Luhn 校验。</p>\n\n    <div class=\"aa-demo\">\n      <div class=\"aa-demo__title\">基础用法</div>\n      <div class=\"aa-card\" id=\"card\">\n        <div class=\"aa-card-field\" id=\"field\">\n          <input class=\"aa-card-input\" id=\"input\" placeholder=\"请输入银行卡号\" inputmode=\"numeric\" maxlength=\"23\" />\n          <span class=\"aa-card-type unknown\" id=\"type\">识别中</span>\n        </div>\n        <div class=\"aa-card-tip\" id=\"tip\">支持 Visa / MasterCard / 银联等</div>\n      </div>\n    </div>\n  </div>\n\n  <script>\n    function detectType(v) {\n      if (/^4/.test(v)) return 'Visa';\n      if (/^5[1-5]/.test(v)) return 'MasterCard';\n      if (/^62/.test(v)) return '银联';\n      if (/^3[47]/.test(v)) return 'AmEx';\n      if (/^35/.test(v)) return 'JCB';\n      return '';\n    }\n    function luhn(v) {\n      var sum = 0, alt = false;\n      for (var i = v.length - 1; i >= 0; i--) {\n        var n = parseInt(v[i], 10);\n        if (alt) { n *= 2; if (n > 9) n -= 9; }\n        sum += n; alt = !alt;\n      }\n      return sum % 10 === 0;\n    }\n\n    var field = document.getElementById('field');\n    var input = document.getElementById('input');\n    var typeEl = document.getElementById('type');\n    var tip = document.getElementById('tip');\n\n    input.addEventListener('input', function () {\n      var digits = input.value.replace(/\\D/g, '').slice(0, 19);\n      var grouped = digits.replace(/(.{4})/g, '$1 ').trim();\n      input.value = grouped;\n      var t = detectType(digits);\n      typeEl.textContent = t || '未知';\n      typeEl.className = 'aa-card-type' + (t ? '' : ' unknown');\n      var len = digits.length;\n      field.classList.remove('is-valid', 'is-invalid');\n      tip.className = 'aa-card-tip';\n      if (!len) { tip.textContent = '支持 Visa / MasterCard / 银联等'; }\n      else if (len >= 13 && luhn(digits)) { field.classList.add('is-valid'); tip.className = 'aa-card-tip valid'; tip.textContent = '卡号校验通过'; }\n      else if (len >= 13) { field.classList.add('is-invalid'); tip.className = 'aa-card-tip invalid'; tip.textContent = '卡号未通过 Luhn 校验'; }\n      else { tip.textContent = '继续输入卡号…'; }\n    });\n    input.addEventListener('focus', function () { field.classList.add('is-focus'); });\n    input.addEventListener('blur', function () { field.classList.remove('is-focus'); });\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin BankCardInput 样式 — 银行卡输入 + 类型识别 + Luhn 校验 */\n.aa-card { font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); }\n.aa-card-field { display: flex; align-items: center; border: 1px solid var(--au-color-border); border-radius: 6px; padding: 0 10px; height: 40px; background: var(--au-color-card-bg); transition: border-color .15s, box-shadow .15s; }\n.aa-card-field.is-focus { border-color: var(--au-color-brand); box-shadow: 0 0 0 3px rgba(47,84,235,0.2); }\n.aa-card-field.is-valid { border-color: var(--au-color-success); }\n.aa-card-field.is-invalid { border-color: var(--au-color-error); }\n.aa-card-input { flex: 1; border: none; outline: none; font-size: 16px; letter-spacing: 1px; color: var(--au-color-text-title); background: none; font-family: \"SFMono-Regular\", Consolas, monospace; }\n.aa-card-input::placeholder { color: var(--au-color-text-placeholder); letter-spacing: normal; }\n.aa-card-type { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 4px; background: var(--au-color-brand-bg); color: var(--au-color-brand); min-width: 56px; text-align: center; }\n.aa-card-type.unknown { background: var(--au-color-disabled-bg); color: var(--au-color-text-secondary); }\n.aa-card-tip { font-size: 12px; margin-top: 4px; color: var(--au-color-text-secondary); }\n.aa-card-tip.valid { color: var(--au-color-success); }\n.aa-card-tip.invalid { color: var(--au-color-error); }\n","jsx":"import React, { useState, useMemo } from 'react';\nimport './BankCardInput.css';\n\nfunction detectType(v) {\n  if (/^4/.test(v)) return 'Visa';\n  if (/^5[1-5]/.test(v)) return 'MasterCard';\n  if (/^62/.test(v)) return '银联';\n  if (/^3[47]/.test(v)) return 'AmEx';\n  if (/^35/.test(v)) return 'JCB';\n  return '';\n}\nfunction luhn(v) {\n  let sum = 0, alt = false;\n  for (let i = v.length - 1; i >= 0; i--) {\n    let n = parseInt(v[i], 10);\n    if (alt) { n *= 2; if (n > 9) n -= 9; }\n    sum += n; alt = !alt;\n  }\n  return sum % 10 === 0;\n}\n\nexport default function BankCardInput({ modelValue = '', placeholder = '请输入银行卡号', onChange }) {\n  const [digits, setDigits] = useState(modelValue.replace(/\\D/g, ''));\n  const [focused, setFocused] = useState(false);\n\n  const display = digits.replace(/(.{4})/g, '$1 ').trim();\n  const cardType = detectType(digits);\n  const valid = digits.length >= 13 && luhn(digits);\n  const invalid = digits.length >= 13 && !luhn(digits);\n  const tipClass = valid ? 'valid' : invalid ? 'invalid' : '';\n  const tipText = !digits\n    ? '支持 Visa / MasterCard / 银联等'\n    : valid\n    ? '卡号校验通过'\n    : invalid\n    ? '卡号未通过 Luhn 校验'\n    : '继续输入卡号…';\n\n  const onInput = (e) => {\n    const v = e.target.value.replace(/\\D/g, '').slice(0, 19);\n    e.target.value = v.replace(/(.{4})/g, '$1 ').trim();\n    setDigits(v);\n    if (onChange) onChange(v);\n  };\n\n  return (\n    <div className=\"aa-card\">\n      <div\n        className={\n          'aa-card-field' + (focused ? ' is-focus' : '') + (valid ? ' is-valid' : '') + (invalid ? ' is-invalid' : '')\n        }\n      >\n        <input\n          className=\"aa-card-input\"\n          value={display}\n          inputMode=\"numeric\"\n          maxLength={23}\n          placeholder={placeholder}\n          onInput={onInput}\n          onFocus={() => setFocused(true)}\n          onBlur={() => setFocused(false)}\n        />\n        <span className={'aa-card-type' + (cardType ? '' : ' unknown')}>{cardType || '未知'}</span>\n      </div>\n      <div className={'aa-card-tip ' + tipClass}>{tipText}</div>\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-card\">\n    <div class=\"aa-card-field\" :class=\"{ 'is-focus': focused, 'is-valid': valid, 'is-invalid': invalid }\">\n      <input\n        class=\"aa-card-input\"\n        :value=\"display\"\n        inputmode=\"numeric\"\n        maxlength=\"23\"\n        :placeholder=\"placeholder\"\n        @input=\"onInput\"\n        @focus=\"focused = true\"\n        @blur=\"focused = false\"\n      />\n      <span class=\"aa-card-type\" :class=\"{ unknown: !cardType }\">{{ cardType || '未知' }}</span>\n    </div>\n    <div class=\"aa-card-tip\" :class=\"tipClass\">{{ tipText }}</div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaBankCardInput',\n  props: {\n    value: { type: String, default: '' },\n    placeholder: { type: String, default: '请输入银行卡号' }\n  },\n  data() {\n    return { digits: this.value.replace(/\\D/g, ''), focused: false };\n  },\n  computed: {\n    display() {\n      return this.digits.replace(/(.{4})/g, '$1 ').trim();\n    },\n    cardType() {\n      var v = this.digits;\n      if (/^4/.test(v)) return 'Visa';\n      if (/^5[1-5]/.test(v)) return 'MasterCard';\n      if (/^62/.test(v)) return '银联';\n      if (/^3[47]/.test(v)) return 'AmEx';\n      if (/^35/.test(v)) return 'JCB';\n      return '';\n    },\n    luhn() {\n      var v = this.digits, sum = 0, alt = false;\n      for (var i = v.length - 1; i >= 0; i--) {\n        var n = parseInt(v[i], 10);\n        if (alt) { n *= 2; if (n > 9) n -= 9; }\n        sum += n; alt = !alt;\n      }\n      return sum % 10 === 0;\n    },\n    valid() {\n      return this.digits.length >= 13 && this.luhn;\n    },\n    invalid() {\n      return this.digits.length >= 13 && !this.luhn;\n    },\n    tipClass() {\n      return this.valid ? 'valid' : this.invalid ? 'invalid' : '';\n    },\n    tipText() {\n      if (this.digits.length === 0) return '支持 Visa / MasterCard / 银联等';\n      if (this.valid) return '卡号校验通过';\n      if (this.invalid) return '卡号未通过 Luhn 校验';\n      return '继续输入卡号…';\n    }\n  },\n  methods: {\n    onInput(e) {\n      this.digits = e.target.value.replace(/\\D/g, '').slice(0, 19);\n      e.target.value = this.display;\n      this.$emit('input', this.digits);\n    }\n  }\n};\n</script>\n\n<style src=\"./BankCardInput.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-card\">\n    <div class=\"aa-card-field\" :class=\"{ 'is-focus': focused, 'is-valid': valid, 'is-invalid': invalid }\">\n      <input\n        class=\"aa-card-input\"\n        :value=\"display\"\n        inputmode=\"numeric\"\n        maxlength=\"23\"\n        :placeholder=\"placeholder\"\n        @input=\"onInput\"\n        @focus=\"focused = true\"\n        @blur=\"focused = false\"\n      />\n      <span class=\"aa-card-type\" :class=\"{ unknown: !cardType }\">{{ cardType || '未知' }}</span>\n    </div>\n    <div class=\"aa-card-tip\" :class=\"tipClass\">{{ tipText }}</div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed } from 'vue';\n\nconst props = defineProps({\n  modelValue: { type: String, default: '' },\n  placeholder: { type: String, default: '请输入银行卡号' }\n});\nconst emit = defineEmits(['update:modelValue']);\nconst digits = ref(props.modelValue.replace(/\\D/g, ''));\nconst focused = ref(false);\n\nconst display = computed(() => digits.value.replace(/(.{4})/g, '$1 ').trim());\nconst cardType = computed(() => {\n  const v = digits.value;\n  if (/^4/.test(v)) return 'Visa';\n  if (/^5[1-5]/.test(v)) return 'MasterCard';\n  if (/^62/.test(v)) return '银联';\n  if (/^3[47]/.test(v)) return 'AmEx';\n  if (/^35/.test(v)) return 'JCB';\n  return '';\n});\nconst luhn = computed(() => {\n  const v = digits.value;\n  let sum = 0, alt = false;\n  for (let i = v.length - 1; i >= 0; i--) {\n    let n = parseInt(v[i], 10);\n    if (alt) { n *= 2; if (n > 9) n -= 9; }\n    sum += n; alt = !alt;\n  }\n  return sum % 10 === 0;\n});\nconst valid = computed(() => digits.value.length >= 13 && luhn.value);\nconst invalid = computed(() => digits.value.length >= 13 && !luhn.value);\nconst tipClass = computed(() => (valid.value ? 'valid' : invalid.value ? 'invalid' : ''));\nconst tipText = computed(() => {\n  if (digits.value.length === 0) return '支持 Visa / MasterCard / 银联等';\n  if (valid.value) return '卡号校验通过';\n  if (invalid.value) return '卡号未通过 Luhn 校验';\n  return '继续输入卡号…';\n});\n\nfunction onInput(e) {\n  digits.value = e.target.value.replace(/\\D/g, '').slice(0, 19);\n  e.target.value = display.value;\n  emit('update:modelValue', digits.value);\n}\n</script>\n\n<style src=\"./BankCardInput.css\"></style>\n"}},{"slug":"idcardinput","name":"身份证输入 IDCardInput","tier":"extension","confidence":"high","specBatch":6,"specFile":"组件6.txt","contractRef":"components/idcardinput.json","category":"input","specLines":["- 用于身份证号码输入","- 支持18位校验，自动验证出生日期、性别","- 输入框可分段显示（前6位、中间8位、后4位）","- 可配置扫描识别身份证","- 错误提示具体原因"],"specSummary":"- 用于身份证号码输入","contract":{"variants":["默认输入","分段显示（前6/中8/后4）","18 位校验失败","开启扫描识别"],"dims":[{"name":"state","values":["default","focus","error","disabled"]},{"name":"segment","values":["plain","segmented"]},{"name":"scan","values":["enabled","disabled"]}],"unknowns":["分段之间的分隔符形态","校验位失败的具体文案"],"anatomy":{"input":"输入框","validate":"18 位校验，自动验证出生日期、性别","segment":"可分段显示（前6位、中间8位、后4位）","error":"错误提示具体原因"},"doNot":["行政区划代码校验表"],"usage":["用于身份证号码输入","支持18位校验，自动验证出生日期、性别","输入框可分段显示（前6位、中间8位、后4位）","可配置扫描识别身份证","错误提示具体原因"],"structure":{"length":"18 位","segment":"6 / 8 / 4","scan":"可配置"}},"files":{"html":"../frameworks/IDCardInput.html","css":"../frameworks/IDCardInput.css","jsx":"../frameworks/IDCardInput.jsx","vue2":"../frameworks/IDCardInput.vue2.vue","vue3":"../frameworks/IDCardInput.vue3.vue"},"sizes":{"html":3039,"css":1394,"jsx":2156,"vue2":2211,"vue3":2246},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · IDCardInput</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"./IDCardInput.css\" />\n</head>\n<body>\n  <div class=\"aa-page\">\n    <h2 class=\"aa-h2\">IDCardInput 身份证输入</h2>\n    <p class=\"aa-desc\">18 位校验（含校验位）、自动提取出生日期与性别。</p>\n\n    <div class=\"aa-demo\">\n      <div class=\"aa-demo__title\">基础用法</div>\n      <div class=\"aa-idcard\" id=\"idcard\">\n        <div class=\"aa-idcard-field\" id=\"field\">\n          <input class=\"aa-idcard-input\" role=\"group\" id=\"input\" placeholder=\"请输入 18 位身份证号\" maxlength=\"18\" />\n        </div>\n        <div class=\"aa-idcard-info\" id=\"info\" style=\"display:none\"></div>\n        <div class=\"aa-idcard-tip\" id=\"tip\">示例：11010119900307657X</div>\n      </div>\n    </div>\n  </div>\n\n  <script>\n    var WEIGHTS = [7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2];\n    var CHECK = '10X98765432';\n    function validate(v) {\n      if (!/^\\d{17}[\\dX]$/.test(v)) return { ok: false };\n      var sum = 0;\n      for (var i = 0; i < 17; i++) sum += parseInt(v[i], 10) * WEIGHTS[i];\n      if (CHECK[sum % 11] !== v[17].toUpperCase()) return { ok: false };\n      var birth = v.slice(6, 14);\n      var birthStr = birth.slice(0,4) + '-' + birth.slice(4,6) + '-' + birth.slice(6,8);\n      var gender = parseInt(v[16], 10) % 2 === 1 ? '男' : '女';\n      return { ok: true, birth: birthStr, gender: gender };\n    }\n\n    var field = document.getElementById('field');\n    var input = document.getElementById('input');\n    var info = document.getElementById('info');\n    var tip = document.getElementById('tip');\n\n    input.addEventListener('input', function () {\n      var v = input.value.replace(/[^0-9Xx]/g, '').toUpperCase().slice(0, 18);\n      input.value = v;\n      field.classList.remove('is-valid', 'is-invalid');\n      tip.className = 'aa-idcard-tip';\n      if (!v) { info.style.display = 'none'; tip.textContent = '示例：11010119900307657X'; return; }\n      var r = validate(v);\n      if (v.length < 18) { tip.textContent = '已输入 ' + v.length + ' 位，继续…'; return; }\n      if (r.ok) {\n        field.classList.add('is-valid');\n        tip.className = 'aa-idcard-tip valid';\n        tip.textContent = '校验通过';\n        info.style.display = 'flex';\n        info.innerHTML = '<span>出生日期：<b>' + r.birth + '</b></span><span>性别：<b>' + r.gender + '</b></span>';\n      } else {\n        field.classList.add('is-invalid');\n        tip.className = 'aa-idcard-tip invalid';\n        tip.textContent = '身份证号校验失败，请检查';\n        info.style.display = 'none';\n      }\n    });\n    input.addEventListener('focus', function () { field.classList.add('is-focus'); });\n    input.addEventListener('blur', function () { field.classList.remove('is-focus'); });\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin IDCardInput 样式 — 身份证号输入 + 校验 + 信息提取 */\n.aa-idcard { font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); }\n.aa-idcard-field { display: flex; align-items: center; border: 1px solid var(--au-color-border); border-radius: 6px; padding: 0 10px; height: 40px; background: var(--au-color-card-bg); transition: border-color .15s, box-shadow .15s; }\n.aa-idcard-field.is-focus { border-color: var(--au-color-brand); box-shadow: 0 0 0 3px rgba(47,84,235,0.2); }\n.aa-idcard-field.is-valid { border-color: var(--au-color-success); }\n.aa-idcard-field.is-invalid { border-color: var(--au-color-error); }\n.aa-idcard-input { flex: 1; border: none; outline: none; font-size: 15px; letter-spacing: 1px; color: var(--au-color-text-title); background: none; font-family: \"SFMono-Regular\", Consolas, monospace; }\n.aa-idcard-input::placeholder { color: var(--au-color-text-placeholder); letter-spacing: normal; }\n.aa-idcard-info { display: flex; gap: 18px; margin-top: 6px; font-size: 13px; color: var(--au-color-text-tertiary); flex-wrap: wrap; }\n.aa-idcard-info b { color: var(--au-color-text-title); font-weight: 600; }\n.aa-idcard-tip { font-size: 12px; margin-top: 4px; color: var(--au-color-text-secondary); }\n.aa-idcard-tip.valid { color: var(--au-color-success); }\n.aa-idcard-tip.invalid { color: var(--au-color-error); }\n","jsx":"import React, { useState, useMemo } from 'react';\nimport './IDCardInput.css';\n\nconst WEIGHTS = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];\nconst CHECK = '10X98765432';\nfunction validate(v) {\n  if (!/^\\d{17}[\\dX]$/.test(v)) return null;\n  let sum = 0;\n  for (let i = 0; i < 17; i++) sum += parseInt(v[i], 10) * WEIGHTS[i];\n  if (CHECK[sum % 11] !== v[17]) return null;\n  const birth = v.slice(6, 14);\n  return { birth: birth.slice(0, 4) + '-' + birth.slice(4, 6) + '-' + birth.slice(6, 8), gender: parseInt(v[16], 10) % 2 === 1 ? '男' : '女' };\n}\n\nexport default function IDCardInput({ modelValue = '', placeholder = '请输入 18 位身份证号', onChange }) {\n  const [focused, setFocused] = useState(false);\n  const result = useMemo(() => validate(modelValue.toUpperCase()) || {}, [modelValue]);\n  const valid = !!result.birth;\n  const invalid = modelValue.length === 18 && !result.birth;\n  const tipClass = !modelValue ? '' : valid ? 'valid' : invalid ? 'invalid' : '';\n  const tipText = !modelValue\n    ? '示例：11010119900307657X'\n    : modelValue.length < 18\n    ? '已输入 ' + modelValue.length + ' 位，继续…'\n    : valid\n    ? '校验通过'\n    : '身份证号校验失败，请检查';\n\n  const onInput = (e) => {\n    const v = e.target.value.replace(/[^0-9Xx]/g, '').toUpperCase().slice(0, 18);\n    e.target.value = v;\n    if (onChange) onChange(v);\n  };\n\n  return (\n    <div className=\"aa-idcard\">\n      <div\n        className={'aa-idcard-field' + (focused ? ' is-focus' : '') + (valid ? ' is-valid' : '') + (invalid ? ' is-invalid' : '')}\n      >\n        <input\n          className=\"aa-idcard-input\"\n          value={modelValue}\n          maxLength={18}\n          placeholder={placeholder}\n          onInput={onInput}\n          onFocus={() => setFocused(true)}\n          onBlur={() => setFocused(false)}\n        />\n      </div>\n      {result.birth && (\n        <div className=\"aa-idcard-info\">\n          <span>出生日期：<b>{result.birth}</b></span>\n          <span>性别：<b>{result.gender}</b></span>\n        </div>\n      )}\n      <div className={'aa-idcard-tip ' + tipClass}>{tipText}</div>\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-idcard\">\n    <div class=\"aa-idcard-field\" :class=\"{ 'is-focus': focused, 'is-valid': valid, 'is-invalid': invalid }\">\n      <input\n        class=\"aa-idcard-input\"\n        :value=\"value\"\n        maxlength=\"18\"\n        :placeholder=\"placeholder\"\n        @input=\"onInput\"\n        @focus=\"focused = true\"\n        @blur=\"focused = false\"\n      />\n    </div>\n    <div v-if=\"result.birth\" class=\"aa-idcard-info\">\n      <span>出生日期：<b>{{ result.birth }}</b></span>\n      <span>性别：<b>{{ result.gender }}</b></span>\n    </div>\n    <div class=\"aa-idcard-tip\" :class=\"tipClass\">{{ tipText }}</div>\n  </div>\n</template>\n\n<script>\nvar WEIGHTS = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];\nvar CHECK = '10X98765432';\nfunction validate(v) {\n  if (!/^\\d{17}[\\dX]$/.test(v)) return null;\n  var sum = 0;\n  for (var i = 0; i < 17; i++) sum += parseInt(v[i], 10) * WEIGHTS[i];\n  if (CHECK[sum % 11] !== v[17]) return null;\n  var birth = v.slice(6, 14);\n  return { birth: birth.slice(0, 4) + '-' + birth.slice(4, 6) + '-' + birth.slice(6, 8), gender: parseInt(v[16], 10) % 2 === 1 ? '男' : '女' };\n}\n\nexport default {\n  name: 'AaIDCardInput',\n  props: {\n    value: { type: String, default: '' },\n    placeholder: { type: String, default: '请输入 18 位身份证号' }\n  },\n  data() {\n    return { focused: false };\n  },\n  computed: {\n    result() {\n      return validate(this.value.toUpperCase()) || {};\n    },\n    valid() {\n      return !!this.result.birth;\n    },\n    invalid() {\n      return this.value.length === 18 && !this.result.birth;\n    },\n    tipClass() {\n      if (!this.value) return '';\n      return this.valid ? 'valid' : this.invalid ? 'invalid' : '';\n    },\n    tipText() {\n      if (!this.value) return '示例：11010119900307657X';\n      if (this.value.length < 18) return '已输入 ' + this.value.length + ' 位，继续…';\n      return this.valid ? '校验通过' : '身份证号校验失败，请检查';\n    }\n  },\n  methods: {\n    onInput(e) {\n      var v = e.target.value.replace(/[^0-9Xx]/g, '').toUpperCase().slice(0, 18);\n      e.target.value = v;\n      this.$emit('input', v);\n    }\n  }\n};\n</script>\n\n<style src=\"./IDCardInput.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-idcard\">\n    <div class=\"aa-idcard-field\" :class=\"{ 'is-focus': focused, 'is-valid': valid, 'is-invalid': invalid }\">\n      <input\n        class=\"aa-idcard-input\"\n        :value=\"modelValue\"\n        maxlength=\"18\"\n        :placeholder=\"placeholder\"\n        @input=\"onInput\"\n        @focus=\"focused = true\"\n        @blur=\"focused = false\"\n      />\n    </div>\n    <div v-if=\"result.birth\" class=\"aa-idcard-info\">\n      <span>出生日期：<b>{{ result.birth }}</b></span>\n      <span>性别：<b>{{ result.gender }}</b></span>\n    </div>\n    <div class=\"aa-idcard-tip\" :class=\"tipClass\">{{ tipText }}</div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed } from 'vue';\n\nconst WEIGHTS = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];\nconst CHECK = '10X98765432';\nfunction validate(v) {\n  if (!/^\\d{17}[\\dX]$/.test(v)) return null;\n  let sum = 0;\n  for (let i = 0; i < 17; i++) sum += parseInt(v[i], 10) * WEIGHTS[i];\n  if (CHECK[sum % 11] !== v[17]) return null;\n  const birth = v.slice(6, 14);\n  return { birth: birth.slice(0, 4) + '-' + birth.slice(4, 6) + '-' + birth.slice(6, 8), gender: parseInt(v[16], 10) % 2 === 1 ? '男' : '女' };\n}\n\nconst props = defineProps({\n  modelValue: { type: String, default: '' },\n  placeholder: { type: String, default: '请输入 18 位身份证号' }\n});\nconst emit = defineEmits(['update:modelValue']);\nconst focused = ref(false);\n\nconst result = computed(() => validate(props.modelValue.toUpperCase()) || {});\nconst valid = computed(() => !!result.value.birth);\nconst invalid = computed(() => props.modelValue.length === 18 && !result.value.birth);\nconst tipClass = computed(() => (!props.modelValue ? '' : valid.value ? 'valid' : invalid.value ? 'invalid' : ''));\nconst tipText = computed(() => {\n  if (!props.modelValue) return '示例：11010119900307657X';\n  if (props.modelValue.length < 18) return '已输入 ' + props.modelValue.length + ' 位，继续…';\n  return valid.value ? '校验通过' : '身份证号校验失败，请检查';\n});\n\nfunction onInput(e) {\n  const v = e.target.value.replace(/[^0-9Xx]/g, '').toUpperCase().slice(0, 18);\n  e.target.value = v;\n  emit('update:modelValue', v);\n}\n</script>\n\n<style src=\"./IDCardInput.css\"></style>\n"}},{"slug":"plateinput","name":"车牌输入 PlateInput","tier":"extension","confidence":"high","specBatch":6,"specFile":"组件6.txt","contractRef":"components/plateinput.json","category":"input","specLines":["- 用于车牌号输入","- 第一部分省份简称（下拉选择），后部分字母数字","- 自动大写，特殊字符限制","- 支持新能源车牌（8位）","- 可扫描识别车牌"],"specSummary":"- 用于车牌号输入","contract":{"variants":["普通车牌","新能源车牌（8位）","省份选择展开","开启扫描识别"],"dims":[{"name":"state","values":["default","focus","error","disabled"]},{"name":"energyType","values":["normal","new-energy"]},{"name":"scan","values":["enabled","disabled"]}],"unknowns":["省份下拉的宽度与展开方式","新能源车牌的识别方式"],"anatomy":{"province":"第一部分省份简称（下拉选择）","body":"后部分字母数字","rule":"自动大写，特殊字符限制","newEnergy":"支持新能源车牌（8位）"},"doNot":["各省份简称的完整枚举","车牌字母禁用规则（如 I/O）"],"usage":["用于车牌号输入","第一部分省份简称（下拉选择），后部分字母数字","自动大写，特殊字符限制","支持新能源车牌（8位）","可扫描识别车牌"],"structure":{"normal":"7 位","newEnergy":"8 位","case":"自动大写"}},"files":{"html":"../frameworks/PlateInput.html","css":"../frameworks/PlateInput.css","jsx":"../frameworks/PlateInput.jsx","vue2":"../frameworks/PlateInput.vue2.vue","vue3":"../frameworks/PlateInput.vue3.vue"},"sizes":{"html":3007,"css":1638,"jsx":1963,"vue2":1967,"vue3":1991},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · PlateInput</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"./PlateInput.css\" />\n</head>\n<body>\n  <div class=\"aa-page\">\n    <h2 class=\"aa-h2\">PlateInput 车牌号输入</h2>\n    <p class=\"aa-desc\">省份简称 + 字母数字组合，自动大写，支持新能源车牌（7 位）。</p>\n\n    <div class=\"aa-demo\">\n      <div class=\"aa-demo__title\">基础用法</div>\n      <div class=\"aa-plate\" id=\"plate\">\n        <div class=\"aa-plate-field\" id=\"field\">\n          <select class=\"aa-plate-prov\" id=\"prov\">\n            <option>京</option><option>沪</option><option>粤</option>\n            <option>津</option><option>冀</option><option>鲁</option><option>苏</option>\n          </select>\n          <input class=\"aa-plate-input\" role=\"group\" id=\"input\" placeholder=\"A12345\" maxlength=\"7\" />\n        </div>\n        <div class=\"aa-plate-tip\" id=\"tip\"></div>\n      </div>\n    </div>\n  </div>\n\n  <script>\n    var PROV = '京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领';\n    var field = document.getElementById('field');\n    var prov = document.getElementById('prov');\n    var input = document.getElementById('input');\n    var tip = document.getElementById('tip');\n\n    function validate(prov, body) {\n      if (!body) return { state: 'empty' };\n      // 新能源：省+1字母+6位，共 8；标准：省+1字母+5位，共 7\n      if (/^[A-Z][A-Z0-9]{6}$/.test(body)) return { state: 'valid', newEnergy: true };\n      if (/^[A-Z][A-Z0-9]{5}$/.test(body)) return { state: 'valid', newEnergy: false };\n      return { state: 'invalid' };\n    }\n\n    function render() {\n      var body = input.value.toUpperCase();\n      var r = validate(prov.value, body);\n      field.classList.remove('is-valid', 'is-invalid');\n      tip.className = 'aa-plate-tip';\n      if (r.state === 'empty') { tip.textContent = '格式：省份 + 字母 + 5/6 位（新能源 6 位）'; }\n      else if (r.state === 'valid') {\n        field.classList.add('is-valid'); tip.className = 'aa-plate-tip valid';\n        tip.innerHTML = '车牌号合法：' + prov.value + body + '<span class=\"aa-plate-tag\">' + (r.newEnergy ? '新能源' : '普通') + '</span>';\n      } else {\n        field.classList.add('is-invalid'); tip.className = 'aa-plate-tip invalid';\n        tip.textContent = '车牌格式不正确（首位应为字母）';\n      }\n    }\n    input.addEventListener('input', function () { input.value = input.value.toUpperCase().replace(/[^A-Z0-9]/g, '').slice(0, 7); render(); });\n    prov.addEventListener('change', render);\n    input.addEventListener('focus', function () { field.classList.add('is-focus'); });\n    input.addEventListener('blur', function () { field.classList.remove('is-focus'); });\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin PlateInput 样式 — 车牌号输入（省份 + 字母数字，支持新能源） */\n.aa-plate { font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); }\n.aa-plate-field { display: inline-flex; align-items: stretch; border-radius: 6px; overflow: hidden; border: 1px solid var(--au-color-border); transition: border-color .15s, box-shadow .15s; }\n.aa-plate-field.is-focus { border-color: var(--au-color-brand); box-shadow: 0 0 0 3px rgba(47,84,235,0.2); }\n.aa-plate-field.is-valid { border-color: var(--au-color-success); }\n.aa-plate-field.is-invalid { border-color: var(--au-color-error); }\n.aa-plate-prov { border: none; background: var(--au-color-brand); color: var(--au-color-text-inverse); font-size: 16px; font-weight: 700; padding: 0 10px; cursor: pointer; outline: none; }\n.aa-plate-input { border: none; outline: none; font-size: 18px; font-weight: 700; letter-spacing: 3px; color: var(--au-color-text-title); background: var(--au-color-card-bg); padding: 0 12px; width: 160px; text-transform: uppercase; font-family: \"SFMono-Regular\", Consolas, monospace; }\n.aa-plate-input::placeholder { color: var(--au-color-text-placeholder); letter-spacing: normal; font-weight: 400; }\n.aa-plate-tip { font-size: 12px; margin-top: 6px; color: var(--au-color-text-secondary); }\n.aa-plate-tip.valid { color: var(--au-color-success); }\n.aa-plate-tip.invalid { color: var(--au-color-error); }\n.aa-plate-tip .aa-plate-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 3px; font-size: 11px; background: var(--au-color-brand-bg); color: var(--au-color-brand); }\n","jsx":"import React, { useState, useMemo } from 'react';\nimport './PlateInput.css';\n\nexport default function PlateInput({\n  modelValue = '',\n  provinces = ['京', '沪', '粤', '津', '冀', '鲁', '苏', '浙', '川', '渝'],\n  onChange\n}) {\n  const [prov, setProv] = useState(modelValue ? modelValue[0] : '京');\n  const [body, setBody] = useState(modelValue ? modelValue.slice(1) : '');\n  const [focused, setFocused] = useState(false);\n\n  const valid = /^[A-Z][A-Z0-9]{5}$/.test(body) || /^[A-Z][A-Z0-9]{6}$/.test(body);\n  const invalid = !!body && !valid;\n  const isNewEnergy = /^[A-Z][A-Z0-9]{6}$/.test(body);\n  const tipClass = !body ? '' : valid ? 'valid' : 'invalid';\n  const tipText = !body\n    ? '格式：省份 + 字母 + 5/6 位（新能源 6 位）'\n    : valid\n    ? '车牌号合法：' + prov + body + '<span class=\"aa-plate-tag\">' + (isNewEnergy ? '新能源' : '普通') + '</span>'\n    : '车牌格式不正确（首位应为字母）';\n\n  const onInput = (e) => {\n    const v = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, '').slice(0, 7);\n    e.target.value = v;\n    setBody(v);\n    if (onChange) onChange(prov + v);\n  };\n\n  return (\n    <div className=\"aa-plate\">\n      <div\n        className={'aa-plate-field' + (focused ? ' is-focus' : '') + (valid ? ' is-valid' : '') + (invalid ? ' is-invalid' : '')}\n      >\n        <select className=\"aa-plate-prov\" value={prov} onChange={(e) => setProv(e.target.value)}>\n          {provinces.map((p) => (\n            <option key={p} value={p}>\n              {p}\n            </option>\n          ))}\n        </select>\n        <input\n          className=\"aa-plate-input\"\n          value={body}\n          maxLength={7}\n          placeholder=\"A12345\"\n          onInput={onInput}\n          onFocus={() => setFocused(true)}\n          onBlur={() => setFocused(false)}\n        />\n      </div>\n      <div className={'aa-plate-tip ' + tipClass} dangerouslySetInnerHTML={{ __html: tipText }} />\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-plate\">\n    <div class=\"aa-plate-field\" :class=\"{ 'is-focus': focused, 'is-valid': valid, 'is-invalid': invalid }\">\n      <select class=\"aa-plate-prov\" v-model=\"prov\">\n        <option v-for=\"p in provinces\" :key=\"p\" :value=\"p\">{{ p }}</option>\n      </select>\n      <input\n        class=\"aa-plate-input\"\n        :value=\"body\"\n        maxlength=\"7\"\n        placeholder=\"A12345\"\n        @input=\"onInput\"\n        @focus=\"focused = true\"\n        @blur=\"focused = false\"\n      />\n    </div>\n    <div class=\"aa-plate-tip\" :class=\"tipClass\" v-html=\"tipText\"></div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaPlateInput',\n  props: {\n    value: { type: String, default: '' },\n    provinces: { type: Array, default: () => ['京', '沪', '粤', '津', '冀', '鲁', '苏', '浙', '川', '渝'] }\n  },\n  data() {\n    return {\n      prov: this.value ? this.value[0] : '京',\n      body: this.value ? this.value.slice(1) : '',\n      focused: false\n    };\n  },\n  computed: {\n    valid() {\n      return /^[A-Z][A-Z0-9]{5}$/.test(this.body) || /^[A-Z][A-Z0-9]{6}$/.test(this.body);\n    },\n    invalid() {\n      return !!this.body && !this.valid;\n    },\n    isNewEnergy() {\n      return /^[A-Z][A-Z0-9]{6}$/.test(this.body);\n    },\n    tipClass() {\n      if (!this.body) return '';\n      return this.valid ? 'valid' : 'invalid';\n    },\n    tipText() {\n      if (!this.body) return '格式：省份 + 字母 + 5/6 位（新能源 6 位）';\n      if (this.valid) return '车牌号合法：' + this.prov + this.body + '<span class=\"aa-plate-tag\">' + (this.isNewEnergy ? '新能源' : '普通') + '</span>';\n      return '车牌格式不正确（首位应为字母）';\n    }\n  },\n  methods: {\n    onInput(e) {\n      this.body = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, '').slice(0, 7);\n      e.target.value = this.body;\n      this.$emit('input', this.prov + this.body);\n    }\n  }\n};\n</script>\n\n<style src=\"./PlateInput.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-plate\">\n    <div class=\"aa-plate-field\" :class=\"{ 'is-focus': focused, 'is-valid': valid, 'is-invalid': invalid }\">\n      <select class=\"aa-plate-prov\" v-model=\"prov\">\n        <option v-for=\"p in provinces\" :key=\"p\" :value=\"p\">{{ p }}</option>\n      </select>\n      <input\n        class=\"aa-plate-input\"\n        :value=\"body\"\n        maxlength=\"7\"\n        placeholder=\"A12345\"\n        @input=\"onInput\"\n        @focus=\"focused = true\"\n        @blur=\"focused = false\"\n      />\n    </div>\n    <div class=\"aa-plate-tip\" :class=\"tipClass\" v-html=\"tipText\"></div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed } from 'vue';\n\nconst props = defineProps({\n  modelValue: { type: String, default: '' },\n  provinces: { type: Array, default: () => ['京', '沪', '粤', '津', '冀', '鲁', '苏', '浙', '川', '渝'] }\n});\nconst emit = defineEmits(['update:modelValue']);\nconst prov = ref(props.modelValue ? props.modelValue[0] : '京');\nconst body = ref(props.modelValue ? props.modelValue.slice(1) : '');\nconst focused = ref(false);\n\nconst valid = computed(() => /^[A-Z][A-Z0-9]{5}$/.test(body.value) || /^[A-Z][A-Z0-9]{6}$/.test(body.value));\nconst invalid = computed(() => !!body.value && !valid.value);\nconst isNewEnergy = computed(() => /^[A-Z][A-Z0-9]{6}$/.test(body.value));\nconst tipClass = computed(() => (!body.value ? '' : valid.value ? 'valid' : 'invalid'));\nconst tipText = computed(() => {\n  if (!body.value) return '格式：省份 + 字母 + 5/6 位（新能源 6 位）';\n  if (valid.value) return '车牌号合法：' + prov.value + body.value + '<span class=\"aa-plate-tag\">' + (isNewEnergy.value ? '新能源' : '普通') + '</span>';\n  return '车牌格式不正确（首位应为字母）';\n});\n\nfunction onInput(e) {\n  body.value = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, '').slice(0, 7);\n  e.target.value = body.value;\n  emit('update:modelValue', prov.value + body.value);\n}\n</script>\n\n<style src=\"./PlateInput.css\"></style>\n"}},{"slug":"bottomsheet","name":"底部面板 BottomSheet","tier":"extension","confidence":"high","specBatch":6,"specFile":"组件6.txt","contractRef":"components/bottomsheet.json","category":"feedback","specLines":["- 从底部滑出的面板","- 类似移动端抽屉，但高度可选","- 支持拖拽关闭、遮罩点击关闭","- 内容可滚动","- 常用于操作选择、筛选、快捷操作"],"specSummary":"- 从底部滑出的面板","contract":{"variants":["自适应高度","半屏","全屏","拖拽中"],"dims":[{"name":"height","values":["auto","half","full"]},{"name":"state","values":["closed","open","dragging"]}],"unknowns":["各高度档位的具体比例","拖拽关闭的触发阈值"],"anatomy":{"sheet":"从底部滑出的面板","height":"类似移动端抽屉，但高度可选","dismiss":"支持拖拽关闭、遮罩点击关闭","body":"内容可滚动"},"doNot":["多级面板的堆叠规则"],"usage":["从底部滑出的面板","类似移动端抽屉，但高度可选","支持拖拽关闭、遮罩点击关闭","内容可滚动","常用于操作选择、筛选、快捷操作"],"structure":{"position":"底部滑出","dismiss":"拖拽 / 遮罩点击"}},"files":{"html":"../frameworks/BottomSheet.html","css":"../frameworks/BottomSheet.css","jsx":"../frameworks/BottomSheet.jsx","vue2":"../frameworks/BottomSheet.vue2.vue","vue3":"../frameworks/BottomSheet.vue3.vue"},"sizes":{"html":1754,"css":1679,"jsx":808,"vue2":886,"vue3":865},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · BottomSheet（普通 H5）</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"BottomSheet.css\" />\n  <style>body{margin:0;padding:24px;background: var(--au-color-page-bg);}</style>\n</head>\n<body>\n  <button id=\"open\">打开底部面板</button>\n\n  <div class=\"aa-sheet-mask\" id=\"mask\"></div>\n  <div class=\"aa-sheet\" id=\"sheet\">\n    <div class=\"aa-sheet-handle\" id=\"handle\"></div>\n    <div class=\"aa-sheet-header\">筛选订单</div>\n    <div class=\"aa-sheet-body\">\n      在这里放置筛选条件、操作列表等内容。面板可从底部滑动出现，点击遮罩或向下拖动可关闭。\n    </div>\n    <div class=\"aa-sheet-footer\">\n      <button class=\"aa-sheet-btn\" id=\"cancel\">取消</button>\n      <button class=\"aa-sheet-btn primary\" id=\"apply\">应用</button>\n    </div>\n  </div>\n\n  <script>\n    var mask = document.getElementById('mask');\n    var sheet = document.getElementById('sheet');\n    function open() { mask.classList.add('is-open'); sheet.classList.add('is-open'); }\n    function close() { mask.classList.remove('is-open'); sheet.classList.remove('is-open'); }\n    document.getElementById('open').onclick = open;\n    mask.onclick = close;\n    document.getElementById('cancel').onclick = close;\n    document.getElementById('apply').onclick = close;\n\n    var startY = 0;\n    sheet.addEventListener('pointerdown', function (e) { startY = e.clientY; });\n    sheet.addEventListener('pointerup', function (e) {\n      if (startY - e.clientY < -80) close();\n    });\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin BottomSheet 样式 — 对齐 组件7.txt BottomSheet：底部滑出面板，遮罩点击关闭，内容滚动 */\n\n.aa-sheet-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 2000; opacity: 0; pointer-events: none; transition: opacity .25s; }\n.aa-sheet-mask.is-open { opacity: 1; pointer-events: auto; }\n.aa-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2001; background: var(--au-color-card-bg); border-radius: 12px 12px 0 0;\n  transform: translateY(100%); transition: transform .25s; max-height: 80vh; display: flex; flex-direction: column;\n  font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); }\n.aa-sheet.is-open { transform: translateY(0); }\n.aa-sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: var(--au-color-border); margin: 8px auto; cursor: grab; flex-shrink: 0; }\n.aa-sheet-header { padding: 4px 16px 12px; font-size: 16px; font-weight: 500; color: var(--au-color-text-title); border-bottom: 1px solid var(--au-color-border); }\n.aa-sheet-body { padding: 16px; overflow: auto; flex: 1; color: var(--au-color-text-body); font-size: 14px; line-height: 1.6; }\n.aa-sheet-footer { padding: 12px 16px; border-top: 1px solid var(--au-color-border); display: flex; justify-content: flex-end; gap: 8px; }\n.aa-sheet-btn { height: 32px; padding: 0 16px; border-radius: 6px; border: 1px solid var(--au-color-border); background: var(--au-color-card-bg); color: var(--au-color-text-body); cursor: pointer; font-size: 14px; }\n.aa-sheet-btn.primary { background: var(--au-color-brand); border-color: var(--au-color-brand); color: var(--au-color-text-inverse); }\n","jsx":"import React, { useRef } from 'react';\nimport './BottomSheet.css';\n\nexport default function BottomSheet({ visible = false, title = '', onClose, children, footer }) {\n  const startY = useRef(0);\n  return (\n    <>\n      <div className={'aa-sheet-mask' + (visible ? ' is-open' : '')} onClick={onClose} />\n      <div\n        className={'aa-sheet' + (visible ? ' is-open' : '')}\n        onPointerDown={e => { startY.current = e.clientY; }}\n        onPointerUp={e => { if (startY.current - e.clientY < -80) onClose && onClose(); }}\n      >\n        <div className=\"aa-sheet-handle\" />\n        {title ? <div className=\"aa-sheet-header\">{title}</div> : null}\n        <div className=\"aa-sheet-body\">{children}</div>\n        {footer ? <div className=\"aa-sheet-footer\">{footer}</div> : null}\n      </div>\n    </>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-sheet-mask\" :class=\"{ 'is-open': visible }\" @click=\"$emit('close')\"></div>\n  <div class=\"aa-sheet\" :class=\"{ 'is-open': visible }\"\n       @pointerdown=\"onDown\" @pointerup=\"onUp\">\n    <div class=\"aa-sheet-handle\"></div>\n    <div class=\"aa-sheet-header\" v-if=\"title\">{{ title }}</div>\n    <div class=\"aa-sheet-body\"><slot>默认内容</slot></div>\n    <div class=\"aa-sheet-footer\" v-if=\"$slots.footer\"><slot name=\"footer\"></slot></div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaBottomSheet',\n  props: { visible: { type: Boolean, default: false }, title: { type: String, default: '' } },\n  data: function () { return { startY: 0 }; },\n  methods: {\n    onDown: function (e) { this.startY = e.clientY; },\n    onUp: function (e) { if (this.startY - e.clientY < -80) this.$emit('close'); }\n  }\n};\n</script>\n\n<style src=\"./BottomSheet.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-sheet-mask\" :class=\"{ 'is-open': visible }\" @click=\"emit('close')\"></div>\n  <div class=\"aa-sheet\" :class=\"{ 'is-open': visible }\"\n       @pointerdown=\"onDown\" @pointerup=\"onUp\">\n    <div class=\"aa-sheet-handle\"></div>\n    <div class=\"aa-sheet-header\" v-if=\"title\">{{ title }}</div>\n    <div class=\"aa-sheet-body\"><slot>默认内容</slot></div>\n    <div class=\"aa-sheet-footer\" v-if=\"$slots.footer\"><slot name=\"footer\" /></div>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nconst props = defineProps({ visible: { type: Boolean, default: false }, title: { type: String, default: '' } });\nconst emit = defineEmits(['close']);\nconst startY = ref(0);\nfunction onDown(e) { startY.value = e.clientY; }\nfunction onUp(e) { if (startY.value - e.clientY < -80) emit('close'); }\n</script>\n\n<style src=\"./BottomSheet.css\"></style>\n"}},{"slug":"treetable","name":"树形表格 TreeTable","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/treetable.json","category":"display","specLines":["- 在普通表格基础上支持树形层级展示","- 层级缩进 16px/级，展开/折叠箭头","- 父级行可显示汇总数据（如合计）","- 支持懒加载子节点、异步加载","- 支持排序、筛选、多选，选择父级联动子级","- 适用于组织架构、商品分类、权限树等场景"],"specSummary":"- 在普通表格基础上支持树形层级展示","contract":{"variants":["选择父级联动子级","懒加载子节点","父级行汇总数据","排序 + 筛选"],"dims":[{"name":"feature","values":["sortable","filterable","multi-select","lazy-load","summary-row"]},{"name":"level","values":["root","child"]}],"unknowns":["层级最大深度限制","子级加载中的占位表现"],"anatomy":{"indent":"层级缩进 16px/级","arrow":"展开/折叠箭头","parentRow":"父级行可显示汇总数据（如合计）","childRow":"子节点支持懒加载、异步加载","selection":"多选时选择父级联动子级"},"doNot":["父级半选态的具体图标","汇总行的计算规则"],"usage":["在普通表格基础上支持树形层级展示","层级缩进 16px/级，展开/折叠箭头","父级行可显示汇总数据（如合计）","支持懒加载子节点、异步加载","支持排序、筛选、多选，选择父级联动子级","适用于组织架构、商品分类、权限树等场景"],"structure":{"indent":"16px/级","features":"排序、筛选、多选"}},"files":{"html":"../frameworks/treetable.html","css":"../frameworks/TreeTable.css","jsx":"../frameworks/TreeTable.jsx","vue2":"../frameworks/TreeTable.vue2.vue","vue3":"../frameworks/TreeTable.vue3.vue"},"sizes":{"html":6654,"css":1696,"jsx":6235,"vue2":7343,"vue3":7008},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Aurora Admin · TreeTable (H5)</title>\n<link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\">\n<style>\n  /* 对齐 组件7.txt TreeTable 规范：层级缩进16px/级、展开箭头、父级汇总、选择联动 */\n  .demo { padding: 24px; background: var(--au-color-page-bg); color: var(--au-color-text-body); font-family: var(--font-family); }\n  h1 { font-size: 20px; margin: 0 0 4px; }\n  .sub { color: var(--au-color-text-secondary); margin: 0 0 24px; font-size: 12px; }\n\n  .aa-tt { width: 100%; border: 1px solid var(--au-color-border); border-radius: 8px; overflow: hidden; background: var(--au-color-card-bg); }\n  .aa-tt table { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--au-color-text-body); }\n  .aa-tt thead th { background: var(--au-color-table-header-bg); color: var(--au-color-text-body); font-weight: 600; height: 48px; text-align: left; padding: 0 16px; border-bottom: 1px solid var(--au-color-border); white-space: nowrap; }\n  .aa-tt tbody td { height: 48px; padding: 0 16px; border-bottom: 1px solid var(--au-color-border); text-align: left; }\n  .aa-tt tbody tr:last-child td { border-bottom: none; }\n  .aa-tt tbody tr:hover { background: var(--au-color-page-bg); }\n  .aa-tt tbody tr.is-selected { background: var(--au-color-brand-bg); }\n  .aa-tt .align-right { text-align: right; }\n  .aa-tt .tree-cell { display: flex; align-items: center; gap: 4px; }\n  .aa-tt .tt-arrow { width: 16px; height: 16px; font-size: 12px; color: var(--au-color-text-secondary); transition: transform .15s; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }\n  .aa-tt .tt-arrow.is-open { transform: rotate(90deg); }\n  .aa-tt .tt-arrow-placeholder { width: 16px; flex-shrink: 0; }\n  .aa-tt .tt-check { width: 14px; height: 14px; cursor: pointer; }\n  .aa-tt .tt-summary { color: var(--au-color-text-secondary); font-size: 12px; margin-left: 6px; }\n  .aa-tt tfoot td { height: 44px; padding: 0 16px; background: var(--au-color-table-header-bg); font-weight: 600; border-top: 1px solid var(--au-color-border); }\n</style>\n</head>\n<body>\n<div class=\"demo\">\n  <h1>Aurora Admin · TreeTable 组件（纯 H5）</h1>\n  <p class=\"sub\">对齐 TreeTable 规范：层级缩进16px/级、展开/折叠箭头、父级汇总（子节点合计）、选择父级联动子级</p>\n\n  <div class=\"aa-tt\" role=\"table\">\n    <table>\n      <thead>\n        <tr>\n          <th style=\"width:48px\"><input type=\"checkbox\" id=\"ttAll\" class=\"tt-check\"></th>\n          <th>部门 / 人员</th>\n          <th class=\"align-right\">人数</th>\n          <th class=\"align-right\">预算(万)</th>\n        </tr>\n      </thead>\n      <tbody id=\"ttBody\"></tbody>\n      <tfoot><tr><td></td><td>合计</td><td class=\"align-right\" id=\"sumCount\">0</td><td class=\"align-right\" id=\"sumBudget\">0</td></tr></tfoot>\n    </table>\n  </div>\n</div>\n\n<script>\nconst treeData = [\n  { key: 'tech', name: '技术中心', count: 0, budget: 0, children: [\n    { key: 'fe', name: '前端组', count: 12, budget: 80 },\n    { key: 'be', name: '后端组', count: 18, budget: 120 }\n  ]},\n  { key: 'product', name: '产品中心', count: 0, budget: 0, children: [\n    { key: 'pm', name: '产品组', count: 8, budget: 60 },\n    { key: 'ux', name: '设计组', count: 6, budget: 40 }\n  ]}\n];\n\nlet expanded = new Set(['tech', 'product']);\nlet selected = new Set();\n\nfunction hasChildren(n) { return n.children && n.children.length; }\nfunction leafSum(node, key) {\n  if (!hasChildren(node)) return node[key] || 0;\n  return node.children.reduce((s, c) => s + leafSum(c, key), 0);\n}\nfunction flatten(nodes, depth, out) {\n  nodes.forEach(n => {\n    out.push({ node: n, depth });\n    if (hasChildren(n) && expanded.has(n.key)) flatten(n.children, depth + 1, out);\n  });\n  return out;\n}\nfunction allChildrenSelected(node) {\n  if (!hasChildren(node)) return selected.has(node.key);\n  return node.children.every(c => allChildrenSelected(c));\n}\nfunction render() {\n  const rows = flatten(treeData, 0, []);\n  document.getElementById('ttBody').innerHTML = rows.map(({ node, depth }) => {\n    const open = expanded.has(node.key);\n    const arrow = hasChildren(node)\n      ? `<span class=\"tt-arrow ${open ? 'is-open' : ''}\" role=\"button\" tabindex=\"0\" onclick=\"toggle('${node.key}')\">▸</span>`\n      : `<span class=\"tt-arrow-placeholder\"></span>`;\n    const check = `<input type=\"checkbox\" class=\"tt-check\" ${selected.has(node.key) ? 'checked' : ''} onclick=\"event.stopPropagation();check('${node.key}')\">`;\n    const count = hasChildren(node) ? leafSum(node, 'count') : node.count;\n    const budget = hasChildren(node) ? leafSum(node, 'budget') : node.budget;\n    const sel = selected.has(node.key) ? ' is-selected' : '';\n    return `<tr class=\"${sel.trim()}\" role=\"row\" tabindex=\"0\" aria-selected=\"${selected.has(node.key)}\" onclick=\"rowClick('${node.key}')\" onkeydown=\"if(event.key==='Enter'||event.key===' '){event.preventDefault();rowClick('${node.key}')}\">\n      <td>${check}</td>\n      <td><div class=\"tree-cell\" style=\"padding-left:${depth * 16}px\">${arrow}<span>${node.name}</span></div></td>\n      <td class=\"align-right\">${count}</td>\n      <td class=\"align-right\">${budget}${hasChildren(node) ? '<span class=\"tt-summary\">(汇总)</span>' : ''}</td>\n    </tr>`;\n  }).join('');\n  document.getElementById('sumCount').textContent = treeData.reduce((s, n) => s + leafSum(n, 'count'), 0);\n  document.getElementById('sumBudget').textContent = treeData.reduce((s, n) => s + leafSum(n, 'budget'), 0);\n}\nfunction toggle(key) { expanded.has(key) ? expanded.delete(key) : expanded.add(key); render(); }\nfunction rowClick(key) { selected = new Set([key]); render(); }\nfunction check(key) {\n  const node = treeData.flatMap(f => [f]).find(n => n.key === key) || find(key, treeData);\n  const willCheck = !selected.has(key);\n  const desc = [key, ...descendantKeys(node)];\n  desc.forEach(k => willCheck ? selected.add(k) : selected.delete(k));\n  propagate(treeData);\n  render();\n}\nfunction find(key, nodes) {\n  for (const n of nodes) { if (n.key === key) return n; if (n.children) { const f = find(key, n.children); if (f) return f; } }\n}\nfunction descendantKeys(node) { let o = []; (node.children||[]).forEach(c => { o.push(c.key); o = o.concat(descendantKeys(c)); }); return o; }\nfunction propagate(nodes) {\n  nodes.forEach(n => {\n    if (hasChildren(n)) { allChildrenSelected(n) ? selected.add(n.key) : selected.delete(n.key); propagate(n.children); }\n  });\n}\nrender();\n</script>\n</body>\n</html>\n","css":"/* Aurora Admin TreeTable 样式 — 对齐 组件7.txt TreeTable 规范 */\n.aa-tt { width: 100%; border: 1px solid var(--au-color-border); border-radius: 8px; overflow: hidden; background: var(--au-color-card-bg); }\n.aa-tt table { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--au-color-text-body); }\n.aa-tt thead th { background: var(--au-color-table-header-bg); color: var(--au-color-text-body); font-weight: 600; height: 48px; text-align: left; padding: 0 16px; border-bottom: 1px solid var(--au-color-border); white-space: nowrap; }\n.aa-tt tbody td { height: 48px; padding: 0 16px; border-bottom: 1px solid var(--au-color-border); text-align: left; }\n.aa-tt tbody tr:last-child td { border-bottom: none; }\n.aa-tt tbody tr:hover { background: var(--au-color-page-bg); }\n.aa-tt tbody tr.is-selected { background: var(--au-color-brand-bg); }\n.aa-tt .align-right { text-align: right; }\n.aa-tt .col-selection { text-align: center; }\n.aa-tt .tree-cell { display: flex; align-items: center; gap: 4px; }\n.aa-tt .tt-arrow { width: 16px; height: 16px; font-size: 12px; color: var(--au-color-text-secondary); transition: transform .15s; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }\n.aa-tt .tt-arrow.is-open { transform: rotate(90deg); }\n.aa-tt .tt-arrow-placeholder { width: 16px; flex-shrink: 0; }\n.aa-tt .tt-check { width: 14px; height: 14px; cursor: pointer; }\n.aa-tt .tt-summary { color: var(--au-color-text-secondary); font-size: 12px; margin-left: 6px; }\n.aa-tt tfoot td { height: 44px; padding: 0 16px; background: var(--au-color-table-header-bg); font-weight: 600; border-top: 1px solid var(--au-color-border); }\n","jsx":"import React, { useState, useMemo, useRef } from 'react';\nimport './TreeTable.css';\n\n/**\n * Aurora Admin TreeTable（React）\n * 对齐 组件7.txt TreeTable 规范：层级缩进16px/级、展开/折叠箭头、父级汇总（叶子合计）、选择父级联动子级\n * columns: [{ key, title, align? }]\n * data: 树形行 [{ key, children, ...字段 }]\n * summaryColumn: 指定数值列，父级与表尾显示叶子求和\n */\nfunction hasChildren(n) { return !!(n.children && n.children.length); }\nfunction leafSum(node, key) {\n  if (!hasChildren(node)) return Number(node[key]) || 0;\n  return node.children.reduce((s, c) => s + leafSum(c, key), 0);\n}\nfunction leafKeys(data, rowKey) {\n  const out = [];\n  const walk = (nodes) => nodes.forEach(n => { if (hasChildren(n)) walk(n.children); else out.push(n[rowKey]); });\n  walk(data);\n  return out;\n}\nfunction descendantKeys(node, rowKey) { let o = []; (node.children || []).forEach(c => { o.push(c[rowKey]); o = o.concat(descendantKeys(c, rowKey)); }); return o; }\nfunction allChildrenSelected(node, set, rowKey) { if (!hasChildren(node)) return set.has(node[rowKey]); return node.children.every(c => allChildrenSelected(c, set, rowKey)); }\n\nexport default function TreeTable({\n  columns = [],\n  data = [],\n  rowKey = 'key',\n  selectable = false,\n  selectedKeys = [],\n  defaultExpandedKeys = [],\n  summaryColumn = '',\n  summary = { label: '合计' },\n  onSelectionChange\n}) {\n  const [expanded, setExpanded] = useState(() => new Set(defaultExpandedKeys));\n  const [selected, setSelected] = useState(() => new Set(selectedKeys));\n\n  const visibleList = useMemo(() => {\n    const out = [];\n    const walk = (nodes, depth) => nodes.forEach(n => {\n      out.push({ node: n, depth });\n      if (hasChildren(n) && expanded.has(n[rowKey])) walk(n.children, depth + 1);\n    });\n    walk(data, 0);\n    return out;\n  }, [data, expanded, rowKey]);\n\n  const totalOf = (key) => data.reduce((s, n) => s + leafSum(n, key), 0);\n  const allSelected = data.length > 0 && leafKeys(data, rowKey).every(k => selected.has(k));\n  const leaves = leafKeys(data, rowKey);\n  const nSel = leaves.filter(k => selected.has(k)).length;\n  const someSelected = nSel > 0 && nSel < leaves.length;\n\n  const toggleExpand = (key) => setExpanded(prev => { const n = new Set(prev); n.has(key) ? n.delete(key) : n.add(key); return n; });\n\n  const toggleCheck = (node) => {\n    const key = node[rowKey];\n    const willCheck = !selected.has(key);\n    const keys = [key, ...descendantKeys(node, rowKey)];\n    const next = new Set(selected);\n    keys.forEach(k => willCheck ? next.add(k) : next.delete(k));\n    const propagate = (nodes) => nodes.forEach(n => {\n      if (hasChildren(n)) { allChildrenSelected(n, next, rowKey) ? next.add(n[rowKey]) : next.delete(n[rowKey]); propagate(n.children); }\n    });\n    propagate(data);\n    setSelected(next);\n    onSelectionChange && onSelectionChange([...next]);\n  };\n\n  const toggleAll = () => {\n    const next = allSelected ? [] : leafKeys(data, rowKey);\n    setSelected(new Set(next));\n    onSelectionChange && onSelectionChange(next);\n  };\n\n  const onRowClick = (node) => { setSelected(new Set([node[rowKey]])); onSelectionChange && onSelectionChange([node[rowKey]]); };\n\n  const cellValue = (node, key) => (hasChildren(node) && key === summaryColumn ? leafSum(node, key) : node[key]);\n\n  return (\n    <div className=\"aa-tt\">\n      <table>\n        <thead>\n          <tr>\n            {selectable && <th className=\"col-selection\" style={{ width: 48 }}>\n              <input type=\"checkbox\" className=\"tt-check\" checked={allSelected}\n                ref={el => el && (el.indeterminate = someSelected)} onChange={toggleAll} />\n            </th>}\n            {columns.map(col => (\n              <th key={col.key} className={col.align === 'right' ? 'align-right' : ''}>{col.title}</th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {visibleList.map(({ node, depth }) => (\n            <tr key={node[rowKey]} className={selected.has(node[rowKey]) ? 'is-selected' : ''} onClick={() => onRowClick(node)}>\n              {selectable && (\n                <td className=\"col-selection\">\n                  <input type=\"checkbox\" className=\"tt-check\" checked={selected.has(node[rowKey])}\n                    onClick={e => e.stopPropagation()} onChange={() => toggleCheck(node)} />\n                </td>\n              )}\n              {columns.map(col => (\n                <td key={col.key} className={col.align === 'right' ? 'align-right' : ''}>\n                  {col.key === columns[0].key ? (\n                    <div className=\"tree-cell\" style={{ paddingLeft: depth * 16 }}>\n                      {hasChildren(node) ? (\n                        <span className={`tt-arrow${expanded.has(node[rowKey]) ? ' is-open' : ''}`} onClick={e => { e.stopPropagation(); toggleExpand(node[rowKey]); }}>▸</span>\n                      ) : <span className=\"tt-arrow-placeholder\" />}\n                      <span>{node[col.key]}</span>\n                      {hasChildren(node) && summaryColumn && <span className=\"tt-summary\">(汇总)</span>}\n                    </div>\n                  ) : cellValue(node, col.key)}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n        {summaryColumn && (\n          <tfoot>\n            <tr>\n              {selectable && <td />}\n              <td>{summary.label || '合计'}</td>\n              {columns.slice(1).map(col => (\n                <td key={col.key} className={col.align === 'right' ? 'align-right' : ''}>\n                  {col.key === summaryColumn ? totalOf(col.key) : ''}\n                </td>\n              ))}\n            </tr>\n          </tfoot>\n        )}\n      </table>\n    </div>\n  );\n}\n\n/*\n用法示例：\nimport TreeTable from './TreeTable';\nconst columns = [\n  { key: 'name', title: '部门/人员' },\n  { key: 'count', title: '人数', align: 'right' },\n  { key: 'budget', title: '预算(万)', align: 'right' }\n];\nconst data = [{ key: 'tech', name: '技术中心', children: [{ key: 'fe', name: '前端组', count: 12, budget: 80 }] }];\n<TreeTable columns={columns} data={data} selectable summaryColumn=\"budget\" defaultExpandedKeys={['tech']} onSelectionChange={setSel} />\n*/\n","vue2":"<template>\n  <div class=\"aa-tt\">\n    <table>\n      <thead>\n        <tr>\n          <th v-if=\"selectable\" class=\"col-selection\" style=\"width:48px\">\n            <input type=\"checkbox\" class=\"tt-check\" :checked=\"allSelected\" v-indeterminate=\"someSelected\" @change=\"toggleAll\">\n          </th>\n          <th\n            v-for=\"col in columns\" :key=\"col.key\"\n            :class=\"{ 'align-right': col.align === 'right' }\"\n          >{{ col.title }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr\n          v-for=\"row in visibleList\" :key=\"row.node[rowKey]\"\n          :class=\"{ 'is-selected': isSelected(row.node[rowKey]) }\"\n          @click=\"onRowClick(row.node)\"\n        >\n          <td v-if=\"selectable\" class=\"col-selection\">\n            <input type=\"checkbox\" class=\"tt-check\" :checked=\"isSelected(row.node[rowKey])\" @click.stop=\"toggleCheck(row.node)\">\n          </td>\n          <td\n            v-for=\"col in columns\" :key=\"col.key\"\n            :class=\"{ 'align-right': col.align === 'right' }\"\n          >\n            <div v-if=\"col.key === columns[0].key\" class=\"tree-cell\" :style=\"{ paddingLeft: row.depth * 16 + 'px' }\">\n              <span\n                v-if=\"hasChildren(row.node)\"\n                class=\"tt-arrow\" :class=\"{ 'is-open': isExpanded(row.node[rowKey]) }\"\n                @click.stop=\"toggleExpand(row.node[rowKey])\"\n              >▸</span>\n              <span v-else class=\"tt-arrow-placeholder\"></span>\n              <span>{{ row.node[col.key] }}</span>\n              <span v-if=\"hasChildren(row.node) && summaryColumn\" class=\"tt-summary\">(汇总)</span>\n            </div>\n            <template v-else>\n              {{ cellValue(row.node, col.key) }}\n            </template>\n          </td>\n        </tr>\n      </tbody>\n      <tfoot v-if=\"showSummary\">\n        <tr>\n          <td v-if=\"selectable\"></td>\n          <td>{{ summary.label || '合计' }}</td>\n          <td v-for=\"col in columns.slice(1)\" :key=\"col.key\" :class=\"{ 'align-right': col.align === 'right' }\">\n            {{ col.key === summaryColumn ? totalOf(col.key) : '' }}\n          </td>\n        </tr>\n      </tfoot>\n    </table>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaTreeTable',\n  directives: { indeterminate(el, b) { el.indeterminate = !!b.value; } },\n  props: {\n    columns: { type: Array, required: true },   // [{ key, title, align }]\n    data: { type: Array, required: true },       // 树形行 [{ key, children, ... }]\n    rowKey: { type: String, default: 'key' },\n    selectable: { type: Boolean, default: false },\n    selectedKeys: { type: Array, default: () => [] },\n    defaultExpandedKeys: { type: Array, default: () => [] },\n    summaryColumn: { type: String, default: '' },   // 对该数值列按叶子求和并在父级显示\n    summary: { type: Object, default: () => ({ label: '合计' }) }\n  },\n  data() {\n    return {\n      expanded: new Set(this.defaultExpandedKeys),\n      selected: new Set(this.selectedKeys)\n    };\n  },\n  computed: {\n    showSummary() { return !!this.summaryColumn; },\n    visibleList() {\n      const out = [];\n      const walk = (nodes, depth) => {\n        nodes.forEach(n => {\n          out.push({ node: n, depth });\n          if (this.hasChildren(n) && this.expanded.has(n[this.rowKey])) walk(n.children, depth + 1);\n        });\n      };\n      walk(this.data, 0);\n      return out;\n    },\n    allSelected() { return this.data.length > 0 && this.leafKeys().every(k => this.selected.has(k)); },\n    someSelected() {\n      const leaves = this.leafKeys();\n      const n = leaves.filter(k => this.selected.has(k)).length;\n      return n > 0 && n < leaves.length;\n    }\n  },\n  methods: {\n    hasChildren(n) { return n.children && n.children.length; },\n    leafSum(node, key) {\n      if (!this.hasChildren(node)) return Number(node[key]) || 0;\n      return node.children.reduce((s, c) => s + this.leafSum(c, key), 0);\n    },\n    leafKeys() {\n      const out = [];\n      const walk = (nodes) => nodes.forEach(n => {\n        if (this.hasChildren(n)) walk(n.children); else out.push(n[this.rowKey]);\n      });\n      walk(this.data);\n      return out;\n    },\n    totalOf(key) { return this.data.reduce((s, n) => s + this.leafSum(n, key), 0); },\n    isExpanded(k) { return this.expanded.has(k); },\n    isSelected(k) { return this.selected.has(k); },\n    cellValue(node, key) {\n      if (this.hasChildren(node) && key === this.summaryColumn) return this.leafSum(node, key);\n      return node[key];\n    },\n    toggleExpand(key) { this.expanded.has(key) ? this.expanded.delete(key) : this.expanded.add(key); this.expanded = new Set(this.expanded); },\n    onRowClick(node) { this.selected = new Set([node[this.rowKey]]); this.$emit('update:selectedKeys', [node[this.rowKey]]); this.$emit('row-click', node); },\n    descendantKeys(node) { let o = []; (node.children || []).forEach(c => { o.push(c[this.rowKey]); o = o.concat(this.descendantKeys(c)); }); return o; },\n    allChildrenSelected(node) { if (!this.hasChildren(node)) return this.selected.has(node[this.rowKey]); return node.children.every(c => this.allChildrenSelected(c)); },\n    toggleCheck(node) {\n      const key = node[this.rowKey];\n      const willCheck = !this.selected.has(key);\n      const keys = [key, ...this.descendantKeys(node)];\n      keys.forEach(k => willCheck ? this.selected.add(k) : this.selected.delete(k));\n      const propagate = (nodes) => nodes.forEach(n => {\n        if (this.hasChildren(n)) { this.allChildrenSelected(n) ? this.selected.add(n[this.rowKey]) : this.selected.delete(n[this.rowKey]); propagate(n.children); }\n      });\n      propagate(this.data);\n      this.selected = new Set(this.selected);\n      this.$emit('update:selectedKeys', [...this.selected]);\n    },\n    toggleAll() {\n      const next = this.allSelected ? [] : this.leafKeys();\n      this.selected = new Set(next);\n      this.$emit('update:selectedKeys', next);\n    }\n  }\n};\n</script>\n\n<!-- 样式对齐 组件7.txt TreeTable 规范 -->\n<style>\n.aa-tt { width: 100%; border: 1px solid #E8ECF1; border-radius: 8px; overflow: hidden; background: #fff; }\n.aa-tt table { width: 100%; border-collapse: collapse; font-size: 14px; color: #262626; }\n.aa-tt thead th { background: #FAFAFA; color: #262626; font-weight: 600; height: 48px; text-align: left; padding: 0 16px; border-bottom: 1px solid #E8ECF1; white-space: nowrap; }\n.aa-tt tbody td { height: 48px; padding: 0 16px; border-bottom: 1px solid #E8ECF1; text-align: left; }\n.aa-tt tbody tr:last-child td { border-bottom: none; }\n.aa-tt tbody tr:hover { background: #F5F7FA; }\n.aa-tt tbody tr.is-selected { background: #F0F5FF; }\n.aa-tt .align-right { text-align: right; }\n.aa-tt .col-selection { text-align: center; }\n.aa-tt .tree-cell { display: flex; align-items: center; gap: 4px; }\n.aa-tt .tt-arrow { width: 16px; height: 16px; font-size: 12px; color: #6E6E6E; transition: transform .15s; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }\n.aa-tt .tt-arrow.is-open { transform: rotate(90deg); }\n.aa-tt .tt-arrow-placeholder { width: 16px; flex-shrink: 0; }\n.aa-tt .tt-check { width: 14px; height: 14px; cursor: pointer; }\n.aa-tt .tt-summary { color: #6E6E6E; font-size: 12px; margin-left: 6px; }\n.aa-tt tfoot td { height: 44px; padding: 0 16px; background: #FAFAFA; font-weight: 600; border-top: 1px solid #E8ECF1; }\n</style>\n","vue3":"<template>\n  <div class=\"aa-tt\">\n    <table>\n      <thead>\n        <tr>\n          <th v-if=\"selectable\" class=\"col-selection\" style=\"width:48px\">\n            <input type=\"checkbox\" class=\"tt-check\" :checked=\"allSelected\" :indeterminate.prop=\"someSelected\" @change=\"toggleAll\">\n          </th>\n          <th v-for=\"col in columns\" :key=\"col.key\" :class=\"{ 'align-right': col.align === 'right' }\">{{ col.title }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr\n          v-for=\"row in visibleList\" :key=\"row.node[rowKey]\"\n          :class=\"{ 'is-selected': isSelected(row.node[rowKey]) }\"\n          @click=\"onRowClick(row.node)\"\n        >\n          <td v-if=\"selectable\" class=\"col-selection\">\n            <input type=\"checkbox\" class=\"tt-check\" :checked=\"isSelected(row.node[rowKey])\" @click.stop=\"toggleCheck(row.node)\">\n          </td>\n          <td\n            v-for=\"col in columns\" :key=\"col.key\"\n            :class=\"{ 'align-right': col.align === 'right' }\"\n          >\n            <div v-if=\"col.key === columns[0].key\" class=\"tree-cell\" :style=\"{ paddingLeft: row.depth * 16 + 'px' }\">\n              <span\n                v-if=\"hasChildren(row.node)\"\n                class=\"tt-arrow\" :class=\"{ 'is-open': isExpanded(row.node[rowKey]) }\"\n                @click.stop=\"toggleExpand(row.node[rowKey])\"\n              >▸</span>\n              <span v-else class=\"tt-arrow-placeholder\"></span>\n              <span>{{ row.node[col.key] }}</span>\n              <span v-if=\"hasChildren(row.node) && summaryColumn\" class=\"tt-summary\">(汇总)</span>\n            </div>\n            <template v-else>{{ cellValue(row.node, col.key) }}</template>\n          </td>\n        </tr>\n      </tbody>\n      <tfoot v-if=\"showSummary\">\n        <tr>\n          <td v-if=\"selectable\"></td>\n          <td>{{ summary.label || '合计' }}</td>\n          <td v-for=\"col in columns.slice(1)\" :key=\"col.key\" :class=\"{ 'align-right': col.align === 'right' }\">\n            {{ col.key === summaryColumn ? totalOf(col.key) : '' }}\n          </td>\n        </tr>\n      </tfoot>\n    </table>\n  </div>\n</template>\n\n<script setup>\nimport { computed, reactive } from 'vue';\n\nconst props = defineProps({\n  columns: { type: Array, required: true },   // [{ key, title, align }]\n  data: { type: Array, required: true },       // 树形行 [{ key, children, ... }]\n  rowKey: { type: String, default: 'key' },\n  selectable: { type: Boolean, default: false },\n  selectedKeys: { type: Array, default: () => [] },\n  defaultExpandedKeys: { type: Array, default: () => [] },\n  summaryColumn: { type: String, default: '' },\n  summary: { type: Object, default: () => ({ label: '合计' }) }\n});\nconst emit = defineEmits(['update:selectedKeys', 'row-click']);\n\nconst state = reactive({\n  expanded: new Set(props.defaultExpandedKeys),\n  selected: new Set(props.selectedKeys)\n});\n\nconst hasChildren = (n) => !!(n.children && n.children.length);\nfunction leafSum(node, key) {\n  if (!hasChildren(node)) return Number(node[key]) || 0;\n  return node.children.reduce((s, c) => s + leafSum(c, key), 0);\n}\nfunction leafKeys() {\n  const out = [];\n  const walk = (nodes) => nodes.forEach(n => { if (hasChildren(n)) walk(n.children); else out.push(n[props.rowKey]); });\n  walk(props.data);\n  return out;\n}\nfunction descendantKeys(node) { let o = []; (node.children || []).forEach(c => { o.push(c[props.rowKey]); o = o.concat(descendantKeys(c)); }); return o; }\nfunction allChildrenSelected(node) { if (!hasChildren(node)) return state.selected.has(node[props.rowKey]); return node.children.every(c => allChildrenSelected(c)); }\n\nconst showSummary = computed(() => !!props.summaryColumn);\nconst visibleList = computed(() => {\n  const out = [];\n  const walk = (nodes, depth) => nodes.forEach(n => {\n    out.push({ node: n, depth });\n    if (hasChildren(n) && state.expanded.has(n[props.rowKey])) walk(n.children, depth + 1);\n  });\n  walk(props.data, 0);\n  return out;\n});\nconst allSelected = computed(() => props.data.length > 0 && leafKeys().every(k => state.selected.has(k)));\nconst someSelected = computed(() => { const l = leafKeys(); const n = l.filter(k => state.selected.has(k)).length; return n > 0 && n < l.length; });\n\nfunction isExpanded(k) { return state.expanded.has(k); }\nfunction isSelected(k) { return state.selected.has(k); }\nfunction totalOf(key) { return props.data.reduce((s, n) => s + leafSum(n, key), 0); }\nfunction cellValue(node, key) {\n  if (hasChildren(node) && key === props.summaryColumn) return leafSum(node, key);\n  return node[key];\n}\nfunction toggleExpand(key) { state.expanded.has(key) ? state.expanded.delete(key) : state.expanded.add(key); state.expanded = new Set(state.expanded); }\nfunction onRowClick(node) { state.selected = new Set([node[props.rowKey]]); emit('update:selectedKeys', [node[props.rowKey]]); emit('row-click', node); }\nfunction toggleCheck(node) {\n  const key = node[props.rowKey];\n  const willCheck = !state.selected.has(key);\n  const keys = [key, ...descendantKeys(node)];\n  keys.forEach(k => willCheck ? state.selected.add(k) : state.selected.delete(k));\n  const propagate = (nodes) => nodes.forEach(n => {\n    if (hasChildren(n)) { allChildrenSelected(n) ? state.selected.add(n[props.rowKey]) : state.selected.delete(n[props.rowKey]); propagate(n.children); }\n  });\n  propagate(props.data);\n  state.selected = new Set(state.selected);\n  emit('update:selectedKeys', [...state.selected]);\n}\nfunction toggleAll() {\n  const next = allSelected.value ? [] : leafKeys();\n  state.selected = new Set(next);\n  emit('update:selectedKeys', next);\n}\n</script>\n\n<!-- 样式对齐 组件7.txt TreeTable 规范 -->\n<style scoped>\n.aa-tt { width: 100%; border: 1px solid #E8ECF1; border-radius: 8px; overflow: hidden; background: #fff; }\n.aa-tt table { width: 100%; border-collapse: collapse; font-size: 14px; color: #262626; }\n.aa-tt thead th { background: #FAFAFA; color: #262626; font-weight: 600; height: 48px; text-align: left; padding: 0 16px; border-bottom: 1px solid #E8ECF1; white-space: nowrap; }\n.aa-tt tbody td { height: 48px; padding: 0 16px; border-bottom: 1px solid #E8ECF1; text-align: left; }\n.aa-tt tbody tr:last-child td { border-bottom: none; }\n.aa-tt tbody tr:hover { background: #F5F7FA; }\n.aa-tt tbody tr.is-selected { background: #F0F5FF; }\n.aa-tt .align-right { text-align: right; }\n.aa-tt .col-selection { text-align: center; }\n.aa-tt .tree-cell { display: flex; align-items: center; gap: 4px; }\n.aa-tt .tt-arrow { width: 16px; height: 16px; font-size: 12px; color: #6E6E6E; transition: transform .15s; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }\n.aa-tt .tt-arrow.is-open { transform: rotate(90deg); }\n.aa-tt .tt-arrow-placeholder { width: 16px; flex-shrink: 0; }\n.aa-tt .tt-check { width: 14px; height: 14px; cursor: pointer; }\n.aa-tt .tt-summary { color: #6E6E6E; font-size: 12px; margin-left: 6px; }\n.aa-tt tfoot td { height: 44px; padding: 0 16px; background: #FAFAFA; font-weight: 600; border-top: 1px solid #E8ECF1; }\n</style>\n"}},{"slug":"expandabletable","name":"可展开表格 ExpandableTable","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/expandabletable.json","category":"display","specLines":["- 表格行支持展开显示额外内容","- 展开图标位于行首，默认收起","- 展开内容可为子表格、详情描述、图表","- 支持同时展开多行或仅一行","- 展开状态可记忆","- 适用于订单明细、日志详情等"],"specSummary":"- 表格行支持展开显示额外内容","contract":{"variants":["多行展开 · 子表格","单行展开 · 详情描述","默认收起"],"dims":[{"name":"expandMode","values":["multiple","single"]},{"name":"content","values":["subtable","description","chart"]},{"name":"state","values":["collapsed","expanded"]}],"unknowns":["展开状态的记忆范围（会话内或持久化）","嵌套表格的缩进规则"],"anatomy":{"icon":"展开图标位于行首","content":"展开内容：子表格 / 详情描述 / 图表","state":"展开状态可记忆"},"doNot":["展开动画时长与缓动"],"usage":["表格行支持展开显示额外内容","展开图标位于行首，默认收起","展开内容可为子表格、详情描述、图表","支持同时展开多行或仅一行","展开状态可记忆","适用于订单明细、日志详情等"],"structure":{"iconPosition":"行首","defaultState":"收起"}},"files":{"html":"../frameworks/ExpandableTable.html","css":"../frameworks/ExpandableTable.css","jsx":"../frameworks/ExpandableTable.jsx","vue2":"../frameworks/ExpandableTable.vue2.vue","vue3":"../frameworks/ExpandableTable.vue3.vue"},"sizes":{"html":2786,"css":1529,"jsx":1645,"vue2":1398,"vue3":1318},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · ExpandableTable</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"./ExpandableTable.css\" />\n</head>\n<body>\n  <div class=\"aa-page\">\n    <h2 class=\"aa-h2\">ExpandableTable 可展开表格</h2>\n    <p class=\"aa-desc\">行首展开图标可展开详情（子表格 / 描述），支持同时展开多行或仅一行。</p>\n\n    <div class=\"aa-demo\">\n      <div class=\"aa-demo__title\">订单明细（点击箭头展开）</div>\n      <table class=\"aa-exptable\" id=\"exptable\">\n        <thead><tr><th style=\"width:40px\"></th><th>订单号</th><th>客户</th><th>金额</th><th>状态</th></tr></thead>\n        <tbody></tbody>\n      </table>\n    </div>\n  </div>\n\n  <script>\n    var data = [\n      { id: 'NO20240801', cust: '北京科技有限公司', amount: 1280, status: '已付款',\n        detail: { items: ['企业版授权 ×1', '实施服务 ×1'], note: '对公转账，预计 3 个工作日内开通。' } },\n      { id: 'NO20240802', cust: '上海贸易行', amount: 560, status: '待发货',\n        detail: { items: ['标准版授权 ×2'], note: '已开票，等待仓库出库。' } },\n      { id: 'NO20240803', cust: '广州信息公司', amount: 3200, status: '已完成',\n        detail: { items: ['旗舰版授权 ×1', '培训服务 ×3', '运维包 ×1'], note: '项目已验收，进入维保期。' } }\n    ];\n    var openSet = new Set();\n    var tbody = document.querySelector('#exptable tbody');\n\n    function rowHtml(d) {\n      var open = openSet.has(d.id);\n      var sub = d.detail.items.map(function (i) { return '<div>· ' + i + '</div>'; }).join('');\n      return '' +\n        '<tr class=\"aa-row\">' +\n          '<td><button class=\"aa-exp-toggle' + (open ? ' is-open' : '') + '\" role=\"button\" tabindex=\"0\" data-id=\"' + d.id + '\">▶</button></td>' +\n          '<td>' + d.id + '</td>' +\n          '<td>' + d.cust + '</td>' +\n          '<td>¥' + d.amount + '</td>' +\n          '<td>' + d.status + '</td>' +\n        '</tr>' +\n        (open ? '<tr class=\"aa-exp-row\"><td></td><td colspan=\"4\"><div class=\"aa-exp-panel\">' +\n          '<div>备注：' + d.detail.note + '</div><div class=\"aa-exp-sub\">' + sub + '</div>' +\n        '</div></td></tr>' : '');\n    }\n    function render() { tbody.innerHTML = data.map(rowHtml).join(''); }\n\n    tbody.addEventListener('click', function (e) {\n      var btn = e.target.closest('.aa-exp-toggle');\n      if (!btn) return;\n      var id = btn.dataset.id;\n      if (openSet.has(id)) openSet.delete(id); else openSet.add(id);\n      render();\n    });\n    render();\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin ExpandableTable 样式 — 行内展开详情 */\n.aa-exptable { width: 100%; border-collapse: collapse; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); font-size: 14px; background: var(--au-color-card-bg); border: 1px solid var(--au-color-border); border-radius: 8px; overflow: hidden; }\n.aa-exptable th { text-align: left; padding: 12px 14px; background: var(--au-color-table-header-bg); color: var(--au-color-text-title); font-weight: 600; border-bottom: 1px solid var(--au-color-border); }\n.aa-exptable td { padding: 11px 14px; color: var(--au-color-text-body); border-bottom: 1px solid var(--au-color-border); }\n.aa-exptable tr:last-child td { border-bottom: none; }\n.aa-exptable tbody tr.aa-row:hover td { background: var(--au-color-page-bg); }\n.aa-exp-toggle { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; background: none; cursor: pointer; color: var(--au-color-text-secondary); transition: transform .2s, color .2s; }\n.aa-exp-toggle.is-open { transform: rotate(90deg); color: var(--au-color-brand); }\n.aa-exp-panel { padding: 14px 18px 14px 48px; background: var(--au-color-table-header-bg); color: var(--au-color-text-tertiary); font-size: 13px; line-height: 1.7; }\n.aa-exp-panel .aa-exp-sub { margin-top: 8px; border: 1px dashed var(--au-color-border); border-radius: 6px; padding: 10px; background: var(--au-color-card-bg); }\n.aa-exptable .is-muted { color: var(--au-color-text-secondary); }\n","jsx":"import React, { useState } from 'react';\nimport './ExpandableTable.css';\n\nexport default function ExpandableTable({ data = [], columns = [], idKey = 'id' }) {\n  const [openSet, setOpenSet] = useState({});\n  const toggle = (id) => setOpenSet((s) => ({ ...s, [id]: !s[id] }));\n\n  return (\n    <table className=\"aa-exptable\">\n      <thead>\n        <tr>\n          <th style={{ width: 40 }} />\n          {columns.map((c) => (\n            <th key={c.key}>{c.title}</th>\n          ))}\n        </tr>\n      </thead>\n      <tbody>\n        {data.map((row) => (\n          <React.Fragment key={row[idKey]}>\n            <tr className=\"aa-row\">\n              <td>\n                <button\n                  className={'aa-exp-toggle' + (openSet[row[idKey]] ? ' is-open' : '')}\n                  onClick={() => toggle(row[idKey])}\n                >\n                  ▶\n                </button>\n              </td>\n              {columns.map((c) => (\n                <td key={c.key}>{row[c.key]}</td>\n              ))}\n            </tr>\n            {openSet[row[idKey]] && (\n              <tr className=\"aa-exp-row\">\n                <td />\n                <td colSpan={columns.length}>\n                  <div className=\"aa-exp-panel\">\n                    <div>备注：{row.detail.note}</div>\n                    <div className=\"aa-exp-sub\">\n                      {row.detail.items.map((it, i) => (\n                        <div key={i}>· {it}</div>\n                      ))}\n                    </div>\n                  </div>\n                </td>\n              </tr>\n            )}\n          </React.Fragment>\n        ))}\n      </tbody>\n    </table>\n  );\n}\n","vue2":"<template>\n  <table class=\"aa-exptable\">\n    <thead>\n      <tr><th style=\"width:40px\"></th><th v-for=\"c in columns\" :key=\"c.key\">{{ c.title }}</th></tr>\n    </thead>\n    <tbody>\n      <template v-for=\"row in data\">\n        <tr class=\"aa-row\" :key=\"row[idKey]\">\n          <td>\n            <button class=\"aa-exp-toggle\" :class=\"{ 'is-open': openSet[row[idKey]] }\" @click=\"toggle(row[idKey])\">▶</button>\n          </td>\n          <td v-for=\"c in columns\" :key=\"c.key\">{{ row[c.key] }}</td>\n        </tr>\n        <tr v-if=\"openSet[row[idKey]]\" class=\"aa-exp-row\" :key=\"row[idKey] + '-exp'\">\n          <td></td>\n          <td :colspan=\"columns.length\">\n            <div class=\"aa-exp-panel\">\n              <div>备注：{{ row.detail.note }}</div>\n              <div class=\"aa-exp-sub\">\n                <div v-for=\"(it, i) in row.detail.items\" :key=\"i\">· {{ it }}</div>\n              </div>\n            </div>\n          </td>\n        </tr>\n      </template>\n    </tbody>\n  </table>\n</template>\n\n<script>\nexport default {\n  name: 'AaExpandableTable',\n  props: {\n    data: { type: Array, default: () => [] },\n    columns: { type: Array, default: () => [] },\n    idKey: { type: String, default: 'id' }\n  },\n  data() {\n    return { openSet: {} };\n  },\n  methods: {\n    toggle(id) {\n      this.$set(this.openSet, id, !this.openSet[id]);\n    }\n  }\n};\n</script>\n\n<style src=\"./ExpandableTable.css\"></style>\n","vue3":"<template>\n  <table class=\"aa-exptable\">\n    <thead>\n      <tr><th style=\"width:40px\"></th><th v-for=\"c in columns\" :key=\"c.key\">{{ c.title }}</th></tr>\n    </thead>\n    <tbody>\n      <template v-for=\"row in data\" :key=\"row[idKey]\">\n        <tr class=\"aa-row\">\n          <td>\n            <button class=\"aa-exp-toggle\" :class=\"{ 'is-open': openSet[row[idKey]] }\" @click=\"toggle(row[idKey])\">▶</button>\n          </td>\n          <td v-for=\"c in columns\" :key=\"c.key\">{{ row[c.key] }}</td>\n        </tr>\n        <tr v-if=\"openSet[row[idKey]]\" class=\"aa-exp-row\">\n          <td></td>\n          <td :colspan=\"columns.length\">\n            <div class=\"aa-exp-panel\">\n              <div>备注：{{ row.detail.note }}</div>\n              <div class=\"aa-exp-sub\">\n                <div v-for=\"(it, i) in row.detail.items\" :key=\"i\">· {{ it }}</div>\n              </div>\n            </div>\n          </td>\n        </tr>\n      </template>\n    </tbody>\n  </table>\n</template>\n\n<script setup>\nimport { reactive } from 'vue';\n\nconst props = defineProps({\n  data: { type: Array, default: () => [] },\n  columns: { type: Array, default: () => [] },\n  idKey: { type: String, default: 'id' }\n});\n\nconst openSet = reactive({});\nfunction toggle(id) {\n  openSet[id] = !openSet[id];\n}\n</script>\n\n<style src=\"./ExpandableTable.css\"></style>\n"}},{"slug":"mergedcelltable","name":"合并单元格表格 MergedCellTable","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/mergedcelltable.json","category":"display","specLines":["- 支持按字段合并相同内容单元格","- 合并规则可配置，纵向合并为主","- 合并后单元格垂直居中","- 表头支持多级合并","- 适用于报表、统计表格"],"specSummary":"- 支持按字段合并相同内容单元格","contract":{"variants":["纵向合并","多级表头 + 纵向合并","横向合并"],"dims":[{"name":"mergeAxis","values":["vertical","horizontal"]},{"name":"headerLevel","values":["single","multi"]}],"unknowns":["合并列是否支持固定","合并字段的配置方式"],"anatomy":{"mergedCell":"合并单元格：垂直居中","rule":"合并规则可配置，纵向合并为主","header":"表头支持多级合并"},"doNot":["合并单元格的选中与编辑行为","排序/筛选与合并的交互规则"],"usage":["支持按字段合并相同内容单元格","合并规则可配置，纵向合并为主","合并后单元格垂直居中","表头支持多级合并","适用于报表、统计表格"],"structure":{"align":"垂直居中","defaultAxis":"纵向"}},"files":{"html":"../frameworks/MergedCellTable.html","css":"../frameworks/MergedCellTable.css","jsx":"../frameworks/MergedCellTable.jsx","vue2":"../frameworks/MergedCellTable.vue2.vue","vue3":"../frameworks/MergedCellTable.vue3.vue"},"sizes":{"html":2063,"css":1230,"jsx":1328,"vue2":1509,"vue3":1321},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · MergedCellTable</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"./MergedCellTable.css\" />\n</head>\n<body>\n  <div class=\"aa-page\">\n    <h2 class=\"aa-h2\">MergedCellTable 合并单元格表格</h2>\n    <p class=\"aa-desc\">按字段纵向合并相同内容单元格，合并后垂直居中，适用于报表 / 统计表。</p>\n\n    <div class=\"aa-demo\">\n      <div class=\"aa-demo__title\">部门销售额报表（部门列合并）</div>\n      <table class=\"aa-mergetable\" id=\"mergetable\">\n        <thead><tr><th>部门</th><th>季度</th><th>销售额(万)</th><th>负责人</th></tr></thead>\n        <tbody></tbody>\n      </table>\n    </div>\n  </div>\n\n  <script>\n    var data = [\n      { dept: '华东大区', q: 'Q1', sale: 120, owner: '王伟' },\n      { dept: '华东大区', q: 'Q2', sale: 135, owner: '王伟' },\n      { dept: '华东大区', q: 'Q3', sale: 150, owner: '王伟' },\n      { dept: '华南大区', q: 'Q1', sale: 90, owner: '李娜' },\n      { dept: '华南大区', q: 'Q2', sale: 110, owner: '李娜' },\n      { dept: '华北大区', q: 'Q1', sale: 80, owner: '张强' }\n    ];\n    var tbody = document.querySelector('#mergetable tbody');\n\n    // 计算连续相同 dept 的 rowspan\n    var spans = {};\n    var i = 0;\n    while (i < data.length) {\n      var j = i;\n      while (j + 1 < data.length && data[j + 1].dept === data[i].dept) j++;\n      spans[data[i].dept] = j - i + 1;\n      i = j + 1;\n    }\n\n    var html = '';\n    data.forEach(function (d, idx) {\n      var first = idx === 0 || data[idx - 1].dept !== d.dept;\n      html += '<tr>';\n      if (first) html += '<td class=\"aa-merged\" rowspan=\"' + spans[d.dept] + '\">' + d.dept + '</td>';\n      html += '<td>' + d.q + '</td><td>' + d.sale + '</td><td>' + d.owner + '</td></tr>';\n    });\n    tbody.innerHTML = html;\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin MergedCellTable 样式 — 相同内容纵向合并单元格 */\n.aa-mergetable { width: 100%; border-collapse: collapse; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); font-size: 14px; background: var(--au-color-card-bg); border: 1px solid var(--au-color-border); border-radius: 8px; overflow: hidden; }\n.aa-mergetable th { text-align: left; padding: 12px 14px; background: var(--au-color-table-header-bg); color: var(--au-color-text-title); font-weight: 600; border-bottom: 1px solid var(--au-color-border); }\n.aa-mergetable td { padding: 11px 14px; color: var(--au-color-text-body); border-bottom: 1px solid var(--au-color-border); border-right: 1px solid var(--au-color-border); vertical-align: middle; }\n.aa-mergetable td:last-child { border-right: none; }\n.aa-mergetable tr:last-child td { border-bottom: none; }\n.aa-mergetable .aa-merged { background: var(--au-color-brand-bg); font-weight: 500; color: var(--au-color-text-title); text-align: center; }\n.aa-mergetable tbody tr:hover td { background: var(--au-color-page-bg); }\n.aa-mergetable tbody tr:hover .aa-merged { background: #E6ECFF; }\n.aa-mergetable .is-muted { color: var(--au-color-text-secondary); }\n","jsx":"import React from 'react';\nimport './MergedCellTable.css';\n\nexport default function MergedCellTable({ data = [], columns = [] }) {\n  const merged = data.map((row) => ({ ...row, _first: {}, _span: {} }));\n  columns.filter((c) => c.merge).forEach((c) => {\n    let i = 0;\n    while (i < merged.length) {\n      let j = i;\n      while (j + 1 < merged.length && merged[j + 1][c.key] === merged[i][c.key]) j++;\n      const span = j - i + 1;\n      for (let k = i; k <= j; k++) {\n        merged[k]._first[c.key] = k === i;\n        merged[k]._span[c.key] = span;\n      }\n      i = j + 1;\n    }\n  });\n\n  return (\n    <table className=\"aa-mergetable\">\n      <thead>\n        <tr>\n          {columns.map((c) => (\n            <th key={c.key}>{c.title}</th>\n          ))}\n        </tr>\n      </thead>\n      <tbody>\n        {merged.map((row, idx) => (\n          <tr key={idx}>\n            {columns.map((c) =>\n              !c.merge || row._first[c.key] ? (\n                <td\n                  key={c.key}\n                  className={c.merge && row._first[c.key] ? 'aa-merged' : ''}\n                  rowSpan={c.merge && row._first[c.key] ? row._span[c.key] : undefined}\n                >\n                  {row[c.key]}\n                </td>\n              ) : null\n            )}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}\n","vue2":"<template>\n  <table class=\"aa-mergetable\">\n    <thead>\n      <tr><th v-for=\"c in columns\" :key=\"c.key\">{{ c.title }}</th></tr>\n    </thead>\n    <tbody>\n      <tr v-for=\"(row, idx) in merged\" :key=\"idx\">\n        <td\n          v-for=\"c in columns\"\n          :key=\"c.key\"\n          :class=\"{ 'aa-merged': c.merge && row._first[c.key] }\"\n          :rowspan=\"c.merge && row._first[c.key] ? row._span[c.key] : undefined\"\n          v-if=\"!c.merge || row._first[c.key]\"\n        >{{ row[c.key] }}</td>\n      </tr>\n    </tbody>\n  </table>\n</template>\n\n<script>\nexport default {\n  name: 'AaMergedCellTable',\n  props: {\n    data: { type: Array, default: () => [] },\n    columns: { type: Array, default: () => [] }\n  },\n  computed: {\n    merged() {\n      var spans = {};\n      var first = {};\n      var result = this.data.map(function (row) {\n        var copy = Object.assign({}, row);\n        copy._first = {};\n        copy._span = {};\n        return copy;\n      });\n      this.columns.filter(function (c) { return c.merge; }).forEach(function (c) {\n        var i = 0;\n        while (i < result.length) {\n          var j = i;\n          while (j + 1 < result.length && result[j + 1][c.key] === result[i][c.key]) j++;\n          var span = j - i + 1;\n          for (var k = i; k <= j; k++) {\n            result[k]._first[c.key] = k === i;\n            result[k]._span[c.key] = span;\n          }\n          i = j + 1;\n        }\n      });\n      return result;\n    }\n  }\n};\n</script>\n\n<style src=\"./MergedCellTable.css\"></style>\n","vue3":"<template>\n  <table class=\"aa-mergetable\">\n    <thead>\n      <tr><th v-for=\"c in columns\" :key=\"c.key\">{{ c.title }}</th></tr>\n    </thead>\n    <tbody>\n      <tr v-for=\"(row, idx) in merged\" :key=\"idx\">\n        <template v-for=\"c in columns\" :key=\"c.key\">\n          <td\n            v-if=\"!c.merge || row._first[c.key]\"\n            :class=\"{ 'aa-merged': c.merge && row._first[c.key] }\"\n            :rowspan=\"c.merge && row._first[c.key] ? row._span[c.key] : undefined\"\n          >{{ row[c.key] }}</td>\n        </template>\n      </tr>\n    </tbody>\n  </table>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\n\nconst props = defineProps({\n  data: { type: Array, default: () => [] },\n  columns: { type: Array, default: () => [] }\n});\n\nconst merged = computed(() => {\n  const result = props.data.map((row) => ({ ...row, _first: {}, _span: {} }));\n  props.columns.filter((c) => c.merge).forEach((c) => {\n    let i = 0;\n    while (i < result.length) {\n      let j = i;\n      while (j + 1 < result.length && result[j + 1][c.key] === result[i][c.key]) j++;\n      const span = j - i + 1;\n      for (let k = i; k <= j; k++) {\n        result[k]._first[c.key] = k === i;\n        result[k]._span[c.key] = span;\n      }\n      i = j + 1;\n    }\n  });\n  return result;\n});\n</script>\n\n<style src=\"./MergedCellTable.css\"></style>\n"}},{"slug":"summaryrowtable","name":"统计行表格 SummaryRowTable","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/summaryrowtable.json","category":"display","specLines":["- 表格底部或顶部显示汇总行","- 汇总类型：合计、平均值、最大值、最小值、计数","- 可配置汇总字段","- 汇总行样式加粗或浅色背景","- 支持固定汇总行"],"specSummary":"- 表格底部或顶部显示汇总行","contract":{"variants":["底部合计 · 固定","平均值","顶部最大值","计数"],"dims":[{"name":"aggregate","values":["sum","avg","max","min","count"]},{"name":"position","values":["top","bottom"]},{"name":"fixed","values":["true","false"]}],"unknowns":["加粗与浅色背景二选一的判定规则","汇总值的格式化方式"],"anatomy":{"row":"汇总行：样式加粗或浅色背景","fields":"可配置汇总字段","fixed":"支持固定汇总行"},"doNot":["多行汇总与分组汇总"],"usage":["表格底部或顶部显示汇总行","汇总类型：合计、平均值、最大值、最小值、计数","可配置汇总字段","汇总行样式加粗或浅色背景","支持固定汇总行"],"structure":{"position":"顶部或底部","style":"加粗或浅色背景"}},"files":{"html":"../frameworks/SummaryRowTable.html","css":"../frameworks/SummaryRowTable.css","jsx":"../frameworks/SummaryRowTable.jsx","vue2":"../frameworks/SummaryRowTable.vue2.vue","vue3":"../frameworks/SummaryRowTable.vue3.vue"},"sizes":{"html":2436,"css":1185,"jsx":1532,"vue2":1653,"vue3":1460},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · SummaryRowTable</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"./SummaryRowTable.css\" />\n</head>\n<body>\n  <div class=\"aa-page\">\n    <h2 class=\"aa-h2\">SummaryRowTable 统计汇总表格</h2>\n    <p class=\"aa-desc\">表格底部显示汇总行（合计 / 平均值 / 最大值 / 最小值 / 计数），可配置汇总字段。</p>\n\n    <div class=\"aa-demo\">\n      <div class=\"aa-demo__title\">销售明细与汇总</div>\n      <table class=\"aa-sumtable\" id=\"sumtable\">\n        <thead><tr><th>产品</th><th>数量</th><th>单价</th><th>金额</th></tr></thead>\n        <tbody></tbody>\n        <tfoot></tfoot>\n      </table>\n    </div>\n  </div>\n\n  <script>\n    var data = [\n      { name: '基础版', qty: 10, price: 99, amount: 990 },\n      { name: '标准版', qty: 6, price: 199, amount: 1194 },\n      { name: '旗舰版', qty: 3, price: 499, amount: 1497 }\n    ];\n    // 汇总配置：字段 -> 类型\n    var summary = { qty: 'sum', amount: 'sum', price: 'avg' };\n    var cols = ['name', 'qty', 'price', 'amount'];\n\n    function compute(key, type) {\n      var arr = data.map(function (d) { return d[key]; });\n      if (type === 'sum') return arr.reduce(function (a, b) { return a + b; }, 0);\n      if (type === 'avg') return (arr.reduce(function (a, b) { return a + b; }, 0) / arr.length).toFixed(1);\n      if (type === 'max') return Math.max.apply(null, arr);\n      if (type === 'min') return Math.min.apply(null, arr);\n      if (type === 'count') return arr.length;\n      return '';\n    }\n\n    var tbody = document.querySelector('#sumtable tbody');\n    tbody.innerHTML = data.map(function (d) {\n      return '<tr><td>' + d.name + '</td><td>' + d.qty + '</td><td>' + d.price + '</td><td class=\"' +\n        (d.amount >= 1200 ? 'is-pos' : '') + '\">¥' + d.amount + '</td></tr>';\n    }).join('');\n\n    var tfoot = document.querySelector('#sumtable tfoot');\n    var cells = cols.map(function (c) {\n      if (c === 'name') return '<td class=\"aa-sum-label\">合计 / 平均</td>';\n      if (summary[c]) return '<td>' + compute(c, summary[c]) + '</td>';\n      return '<td></td>';\n    });\n    tfoot.innerHTML = '<tr class=\"aa-sumrow\">' + cells.join('') + '</tr>';\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin SummaryRowTable 样式 — 底部统计汇总行 */\n.aa-sumtable { width: 100%; border-collapse: collapse; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); font-size: 14px; background: var(--au-color-card-bg); border: 1px solid var(--au-color-border); border-radius: 8px; overflow: hidden; }\n.aa-sumtable th { text-align: left; padding: 12px 14px; background: var(--au-color-table-header-bg); color: var(--au-color-text-title); font-weight: 600; border-bottom: 1px solid var(--au-color-border); }\n.aa-sumtable td { padding: 11px 14px; color: var(--au-color-text-body); border-bottom: 1px solid var(--au-color-border); }\n.aa-sumtable tr:last-child td { border-bottom: none; }\n.aa-sumtable tbody tr:hover td { background: var(--au-color-page-bg); }\n.aa-sumrow td { background: var(--au-color-brand-bg); font-weight: 600; color: var(--au-color-text-title); border-top: 2px solid #B7C4FF; }\n.aa-sumrow .aa-sum-label { color: var(--au-color-brand); }\n.aa-sumtable .is-muted { color: var(--au-color-text-secondary); }\n.aa-sumtable .is-pos { color: var(--au-color-success); }\n.aa-sumtable .is-neg { color: var(--au-color-error); }\n","jsx":"import React from 'react';\nimport './SummaryRowTable.css';\n\nfunction compute(data, key, type) {\n  const arr = data.map((d) => Number(d[key]) || 0);\n  if (!arr.length) return '';\n  if (type === 'sum') return arr.reduce((a, b) => a + b, 0);\n  if (type === 'avg') return +(arr.reduce((a, b) => a + b, 0) / arr.length).toFixed(1);\n  if (type === 'max') return Math.max(...arr);\n  if (type === 'min') return Math.min(...arr);\n  if (type === 'count') return arr.length;\n  return '';\n}\n\nexport default function SummaryRowTable({\n  data = [],\n  columns = [],\n  summary = {},\n  labelKey = 'name',\n  labelText = '合计 / 平均'\n}) {\n  return (\n    <table className=\"aa-sumtable\">\n      <thead>\n        <tr>\n          {columns.map((c) => (\n            <th key={c.key}>{c.title}</th>\n          ))}\n        </tr>\n      </thead>\n      <tbody>\n        {data.map((row, i) => (\n          <tr key={i}>\n            {columns.map((c) => (\n              <td key={c.key} className={c.pos && row[c.key] >= c.pos ? 'is-pos' : ''}>\n                {row[c.key]}\n              </td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n      <tfoot>\n        <tr className=\"aa-sumrow\">\n          {columns.map((c) => (\n            <td key={c.key} className={c.key === labelKey ? 'aa-sum-label' : ''}>\n              {c.key === labelKey\n                ? labelText\n                : summary[c.key]\n                ? compute(data, c.key, summary[c.key])\n                : ''}\n            </td>\n          ))}\n        </tr>\n      </tfoot>\n    </table>\n  );\n}\n","vue2":"<template>\n  <table class=\"aa-sumtable\">\n    <thead><tr><th v-for=\"c in columns\" :key=\"c.key\">{{ c.title }}</th></tr></thead>\n    <tbody>\n      <tr v-for=\"(row, i) in data\" :key=\"i\">\n        <td v-for=\"c in columns\" :key=\"c.key\" :class=\"cellClass(row, c)\">{{ fmt(row[c.key]) }}</td>\n      </tr>\n    </tbody>\n    <tfoot>\n      <tr class=\"aa-sumrow\">\n        <td v-for=\"c in columns\" :key=\"c.key\" :class=\"{ 'aa-sum-label': c.key === labelKey }\">\n          {{ c.key === labelKey ? labelText : (summary[c.key] ? fmt(compute(c.key, summary[c.key])) : '') }}\n        </td>\n      </tr>\n    </tfoot>\n  </table>\n</template>\n\n<script>\nexport default {\n  name: 'AaSummaryRowTable',\n  props: {\n    data: { type: Array, default: () => [] },\n    columns: { type: Array, default: () => [] },\n    summary: { type: Object, default: () => ({}) },\n    labelKey: { type: String, default: 'name' },\n    labelText: { type: String, default: '合计 / 平均' }\n  },\n  methods: {\n    fmt(v) { return v; },\n    cellClass(row, c) {\n      return c.pos && row[c.key] >= c.pos ? 'is-pos' : '';\n    },\n    compute(key, type) {\n      var arr = this.data.map(function (d) { return Number(d[key]) || 0; });\n      if (!arr.length) return '';\n      if (type === 'sum') return arr.reduce(function (a, b) { return a + b; }, 0);\n      if (type === 'avg') return +(arr.reduce(function (a, b) { return a + b; }, 0) / arr.length).toFixed(1);\n      if (type === 'max') return Math.max.apply(null, arr);\n      if (type === 'min') return Math.min.apply(null, arr);\n      if (type === 'count') return arr.length;\n      return '';\n    }\n  }\n};\n</script>\n\n<style src=\"./SummaryRowTable.css\"></style>\n","vue3":"<template>\n  <table class=\"aa-sumtable\">\n    <thead><tr><th v-for=\"c in columns\" :key=\"c.key\">{{ c.title }}</th></tr></thead>\n    <tbody>\n      <tr v-for=\"(row, i) in data\" :key=\"i\">\n        <td v-for=\"c in columns\" :key=\"c.key\" :class=\"cellClass(row, c)\">{{ row[c.key] }}</td>\n      </tr>\n    </tbody>\n    <tfoot>\n      <tr class=\"aa-sumrow\">\n        <td v-for=\"c in columns\" :key=\"c.key\" :class=\"{ 'aa-sum-label': c.key === labelKey }\">\n          {{ c.key === labelKey ? labelText : (summary[c.key] ? compute(c.key, summary[c.key]) : '') }}\n        </td>\n      </tr>\n    </tfoot>\n  </table>\n</template>\n\n<script setup>\nconst props = defineProps({\n  data: { type: Array, default: () => [] },\n  columns: { type: Array, default: () => [] },\n  summary: { type: Object, default: () => ({}) },\n  labelKey: { type: String, default: 'name' },\n  labelText: { type: String, default: '合计 / 平均' }\n});\n\nfunction cellClass(row, c) {\n  return c.pos && row[c.key] >= c.pos ? 'is-pos' : '';\n}\nfunction compute(key, type) {\n  const arr = props.data.map((d) => Number(d[key]) || 0);\n  if (!arr.length) return '';\n  if (type === 'sum') return arr.reduce((a, b) => a + b, 0);\n  if (type === 'avg') return +(arr.reduce((a, b) => a + b, 0) / arr.length).toFixed(1);\n  if (type === 'max') return Math.max(...arr);\n  if (type === 'min') return Math.min(...arr);\n  if (type === 'count') return arr.length;\n  return '';\n}\n</script>\n\n<style src=\"./SummaryRowTable.css\"></style>\n"}},{"slug":"fixedcolumntable","name":"固定列表格 FixedColumnTable","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/fixedcolumntable.json","category":"display","specLines":["- 表格列过多时支持左右列固定","- 固定列阴影分隔","- 横向滚动查看其他列","- 支持固定表头、固定列同时使用","- 拖拽调整列宽时固定列宽度同步","- 适用于大数据量宽表"],"specSummary":"- 表格列过多时支持左右列固定","contract":{"variants":["左固定 + 固定表头","右固定列","左右双固定"],"dims":[{"name":"fixTarget","values":["left","right","both"]},{"name":"fixedHeader","values":["true","false"]}],"unknowns":["阴影的扩散范围与颜色","最大固定列数量"],"anatomy":{"fixedCol":"固定列：阴影分隔","scroll":"横向滚动查看其他列","resize":"拖拽调整列宽时固定列宽度同步"},"doNot":["虚拟滚动实现","列拖拽排序"],"usage":["表格列过多时支持左右列固定","固定列阴影分隔","横向滚动查看其他列","支持固定表头、固定列同时使用","拖拽调整列宽时固定列宽度同步","适用于大数据量宽表"],"structure":{"divider":"阴影分隔","scroll":"横向"}},"files":{"html":"../frameworks/FixedColumnTable.html","css":"../frameworks/FixedColumnTable.css","jsx":"../frameworks/FixedColumnTable.jsx","vue2":"../frameworks/FixedColumnTable.vue2.vue","vue3":"../frameworks/FixedColumnTable.vue3.vue"},"sizes":{"html":2893,"css":1493,"jsx":899,"vue2":942,"vue3":890},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · FixedColumnTable</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"./FixedColumnTable.css\" />\n</head>\n<body>\n  <div class=\"aa-page\">\n    <h2 class=\"aa-h2\">FixedColumnTable 固定列表格</h2>\n    <p class=\"aa-desc\">列过多时左右列固定，横向滚动查看其余列，固定列带阴影分隔，支持固定表头。</p>\n\n    <div class=\"aa-demo\">\n      <div class=\"aa-demo__title\">宽表（左固定「姓名」，右固定「操作」）</div>\n      <div class=\"aa-fixtable-wrap\">\n        <table class=\"aa-fixtable\" id=\"fixtable\">\n          <thead><tr id=\"fixhead\"></tr></thead>\n          <tbody id=\"fixbody\"></tbody>\n        </table>\n      </div>\n      <div class=\"aa-hint\">← 向左滚动可查看被固定的左列 / 右列 →</div>\n    </div>\n  </div>\n\n  <script>\n    var cols = [\n      { key: 'name', title: '姓名', fixed: 'left', w: 100 },\n      { key: 'dept', title: '部门', w: 120 },\n      { key: 'role', title: '角色', w: 120 },\n      { key: 'email', title: '邮箱', w: 200 },\n      { key: 'phone', title: '电话', w: 140 },\n      { key: 'city', title: '城市', w: 120 },\n      { key: 'join', title: '入职', w: 120 },\n      { key: 'status', title: '状态', w: 100 },\n      { key: 'op', title: '操作', fixed: 'right', w: 120 }\n    ];\n    var data = [\n      { name: '王伟', dept: '华东大区', role: '销售经理', email: 'wangwei@demo.com', phone: '13800000001', city: '上海', join: '2021-03', status: '在职', op: '编辑' },\n      { name: '李娜', dept: '华南大区', role: '销售', email: 'lina@demo.com', phone: '13800000002', city: '广州', join: '2022-07', status: '在职', op: '编辑' },\n      { name: '张强', dept: '华北大区', role: '售前', email: 'zhangq@demo.com', phone: '13800000003', city: '北京', join: '2020-11', status: '休假', op: '编辑' },\n      { name: '陈静', dept: '研发中心', role: '工程师', email: 'chenj@demo.com', phone: '13800000004', city: '深圳', join: '2023-01', status: '在职', op: '编辑' }\n    ];\n\n    document.getElementById('fixhead').innerHTML = cols.map(function (c) {\n      var cls = c.fixed ? 'aa-fixed aa-fixed-' + c.fixed : '';\n      return '<th class=\"' + cls + '\" style=\"min-width:' + c.w + 'px\">' + c.title + '</th>';\n    }).join('');\n\n    document.getElementById('fixbody').innerHTML = data.map(function (d) {\n      return '<tr>' + cols.map(function (c) {\n        var cls = c.fixed ? 'aa-fixed aa-fixed-' + c.fixed : '';\n        return '<td class=\"' + cls + (c.key === 'status' && d.status !== '在职' ? ' is-muted' : '') + '\">' + d[c.key] + '</td>';\n      }).join('') + '</tr>';\n    }).join('');\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin FixedColumnTable 样式 — 左右列固定 + 横向滚动 */\n.aa-fixtable-wrap { position: relative; max-width: 100%; overflow-x: auto; border: 1px solid var(--au-color-border); border-radius: 8px; background: var(--au-color-card-bg); }\n.aa-fixtable { width: 100%; border-collapse: collapse; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); font-size: 14px; min-width: 760px; }\n.aa-fixtable th { text-align: left; padding: 12px 14px; background: var(--au-color-table-header-bg); color: var(--au-color-text-title); font-weight: 600; border-bottom: 1px solid var(--au-color-border); white-space: nowrap; }\n.aa-fixtable td { padding: 11px 14px; color: var(--au-color-text-body); border-bottom: 1px solid var(--au-color-border); white-space: nowrap; }\n.aa-fixtable tbody tr:hover td { background: var(--au-color-page-bg); }\n.aa-fixtable .aa-fixed { position: sticky; background: var(--au-color-card-bg); z-index: 1; }\n.aa-fixtable thead .aa-fixed { z-index: 3; }\n.aa-fixtable .aa-fixed-left { left: 0; box-shadow: 6px 0 8px -6px rgba(0,0,0,0.12); }\n.aa-fixtable .aa-fixed-right { right: 0; box-shadow: -6px 0 8px -6px rgba(0,0,0,0.12); }\n.aa-fixtable tbody tr:hover .aa-fixed { background: var(--au-color-page-bg); }\n.aa-fixtable .is-muted { color: var(--au-color-text-secondary); }\n.aa-fixtable-wrap .aa-hint { padding: 8px 12px; font-size: 12px; color: var(--au-color-text-secondary); border-top: 1px solid var(--au-color-border); }\n","jsx":"import React from 'react';\nimport './FixedColumnTable.css';\n\nfunction fixCls(c) {\n  return c.fixed ? 'aa-fixed aa-fixed-' + c.fixed : '';\n}\n\nexport default function FixedColumnTable({ data = [], columns = [] }) {\n  return (\n    <div className=\"aa-fixtable-wrap\">\n      <table className=\"aa-fixtable\">\n        <thead>\n          <tr>\n            {columns.map((c) => (\n              <th key={c.key} className={fixCls(c)} style={{ minWidth: c.w + 'px' }}>\n                {c.title}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {data.map((row, i) => (\n            <tr key={i}>\n              {columns.map((c) => (\n                <td key={c.key} className={fixCls(c)} style={{ minWidth: c.w + 'px' }}>\n                  {row[c.key]}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-fixtable-wrap\">\n    <table class=\"aa-fixtable\">\n      <thead>\n        <tr>\n          <th\n            v-for=\"c in columns\"\n            :key=\"c.key\"\n            :class=\"fixCls(c)\"\n            :style=\"{ minWidth: c.w + 'px' }\"\n          >{{ c.title }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr v-for=\"(row, i) in data\" :key=\"i\">\n          <td\n            v-for=\"c in columns\"\n            :key=\"c.key\"\n            :class=\"fixCls(c)\"\n            :style=\"{ minWidth: c.w + 'px' }\"\n          >{{ row[c.key] }}</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaFixedColumnTable',\n  props: {\n    data: { type: Array, default: () => [] },\n    columns: { type: Array, default: () => [] }\n  },\n  methods: {\n    fixCls(c) {\n      return c.fixed ? 'aa-fixed aa-fixed-' + c.fixed : '';\n    }\n  }\n};\n</script>\n\n<style src=\"./FixedColumnTable.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-fixtable-wrap\">\n    <table class=\"aa-fixtable\">\n      <thead>\n        <tr>\n          <th\n            v-for=\"c in columns\"\n            :key=\"c.key\"\n            :class=\"fixCls(c)\"\n            :style=\"{ minWidth: c.w + 'px' }\"\n          >{{ c.title }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr v-for=\"(row, i) in data\" :key=\"i\">\n          <td\n            v-for=\"c in columns\"\n            :key=\"c.key\"\n            :class=\"fixCls(c)\"\n            :style=\"{ minWidth: c.w + 'px' }\"\n          >{{ row[c.key] }}</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</template>\n\n<script setup>\nconst props = defineProps({\n  data: { type: Array, default: () => [] },\n  columns: { type: Array, default: () => [] }\n});\nfunction fixCls(c) {\n  return c.fixed ? 'aa-fixed aa-fixed-' + c.fixed : '';\n}\n</script>\n\n<style src=\"./FixedColumnTable.css\"></style>\n"}},{"slug":"timelinelist","name":"时间轴列表 TimelineList","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/timelinelist.json","category":"display","specLines":["- 以时间轴形式展示事件或记录","- 左侧时间线，右侧内容卡片","- 支持垂直/水平两种模式","- 节点可表示不同状态（完成、进行中、错误）","- 适用于操作日志、审批历史、动态"],"specSummary":"- 以时间轴形式展示事件或记录","contract":{"variants":["垂直 · 已完成","垂直 · 进行中","垂直 · 错误","水平时间轴"],"dims":[{"name":"orientation","values":["vertical","horizontal"]},{"name":"nodeState","values":["done","processing","error"]}],"unknowns":["三种节点状态的具体配色","水平模式下的内容卡片宽度"],"anatomy":{"axis":"左侧时间线","card":"右侧内容卡片","node":"节点表示状态（完成、进行中、错误）"},"doNot":["时间刻度与轴标签规则"],"usage":["以时间轴形式展示事件或记录","左侧时间线，右侧内容卡片","支持垂直/水平两种模式","节点可表示不同状态（完成、进行中、错误）","适用于操作日志、审批历史、动态"],"structure":{"orientation":"垂直 / 水平"}},"files":{"html":"../frameworks/TimelineList.html","css":"../frameworks/TimelineList.css","jsx":"../frameworks/TimelineList.jsx","vue2":"../frameworks/TimelineList.vue2.vue","vue3":"../frameworks/TimelineList.vue3.vue"},"sizes":{"html":2681,"css":2304,"jsx":748,"vue2":799,"vue3":740},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · TimelineList（普通 H5）</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"TimelineList.css\" />\n  <style>\n    body { margin: 0; padding: 24px; background: var(--au-color-page-bg); }\n    .aa-demo-toolbar { margin-bottom: 16px; display: flex; gap: 8px; align-items: center; }\n    .aa-demo-toolbar label { font-size: 13px; color: var(--au-color-text-body); }\n    .aa-demo-toolbar select { border: 1px solid var(--au-color-border); border-radius: 6px; padding: 4px 8px; }\n    .aa-demo-panel { background: var(--au-color-card-bg); border: 1px solid var(--au-color-border); border-radius: 8px; padding: 20px; }\n  </style>\n</head>\n<body>\n  <div class=\"aa-demo-toolbar\">\n    <label>方向：</label>\n    <select id=\"dir\">\n      <option value=\"vertical\" selected>垂直</option>\n      <option value=\"horizontal\">水平</option>\n    </select>\n  </div>\n\n  <div class=\"aa-demo-panel\">\n    <div class=\"aa-timeline\" role=\"list\" id=\"app\"></div>\n  </div>\n\n  <script>\n    var DATA = [\n      { time: '09:00', title: '提交申请', desc: '张三提交了采购单 PR-2024-001。', status: 'done' },\n      { time: '10:30', title: '主管审批', desc: '李主管已通过审批。', status: 'done' },\n      { time: '14:00', title: '财务复核', desc: '财务正在复核预算。', status: 'active' },\n      { time: '—', title: '入库登记', desc: '等待复核完成后登记。', status: 'pending' },\n      { time: '—', title: '归档', desc: '复核不通过，已退回。', status: 'error' }\n    ];\n\n    function render() {\n      var dir = document.getElementById('dir').value;\n      var root = document.getElementById('app');\n      root.className = 'aa-timeline' + (dir === 'horizontal' ? ' is-horizontal' : '');\n      root.innerHTML = DATA.map(function (it) {\n        return '' +\n          '<div class=\"aa-timeline-item is-' + it.status + '\" role=\"list\">' +\n            '<span class=\"aa-timeline-node\" role=\"list\"></span>' +\n            '<span class=\"aa-timeline-line\"></span>' +\n            '<div class=\"aa-timeline-content\">' +\n              '<div class=\"aa-timeline-time\" role=\"list\">' + it.time + '</div>' +\n              '<div class=\"aa-timeline-title\">' + it.title + '</div>' +\n              '<div class=\"aa-timeline-desc\">' + it.desc + '</div>' +\n            '</div>' +\n          '</div>';\n      }).join('');\n    }\n\n    document.getElementById('dir').addEventListener('change', render);\n    render();\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin TimelineList 样式 — 对齐 组件7.txt TimelineList：左侧时间线 + 右侧内容，节点状态 完成/进行中/错误 */\n\n.aa-timeline { font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); color: var(--au-color-text-body); }\n.aa-timeline-item { position: relative; }\n.aa-timeline-node {\n  position: absolute; left: 5px; top: 4px; width: 10px; height: 10px; border-radius: 50%;\n  background: var(--au-color-card-bg); border: 2px solid var(--au-color-border); box-sizing: border-box; z-index: 1;\n}\n.aa-timeline-line { position: absolute; left: 9px; top: 16px; bottom: -10px; width: 2px; background: var(--au-color-border); }\n.aa-timeline-content { padding: 0 0 20px 28px; }\n.aa-timeline-time { font-size: 12px; color: var(--au-color-text-secondary); }\n.aa-timeline-title { font-size: 14px; font-weight: 500; color: var(--au-color-text-title); margin-top: 2px; }\n.aa-timeline-desc { font-size: 13px; color: var(--au-color-text-secondary); margin-top: 4px; line-height: 1.5; }\n\n/* 状态：完成 done / 进行中 active / 错误 error / 待处理 pending */\n.aa-timeline-item.is-done > .aa-timeline-node { background: var(--au-color-brand); border-color: var(--au-color-brand); }\n.aa-timeline-item.is-done > .aa-timeline-line { background: var(--au-color-brand); }\n.aa-timeline-item.is-active > .aa-timeline-node { background: var(--au-color-card-bg); border-color: var(--au-color-brand); box-shadow: 0 0 0 3px rgba(47,84,235,0.2); }\n.aa-timeline-item.is-error > .aa-timeline-node { background: var(--au-color-error); border-color: var(--au-color-error); }\n.aa-timeline-item.is-error > .aa-timeline-line { background: var(--au-color-error); }\n.aa-timeline-item.is-pending > .aa-timeline-node { background: var(--au-color-card-bg); border-color: var(--au-color-border); }\n\n/* 水平模式 */\n.aa-timeline.is-horizontal { display: flex; }\n.aa-timeline.is-horizontal > .aa-timeline-item { flex: 1; padding-right: 8px; }\n.aa-timeline.is-horizontal > .aa-timeline-item > .aa-timeline-node { top: 4px; }\n.aa-timeline.is-horizontal > .aa-timeline-item > .aa-timeline-line { left: 15px; top: 9px; bottom: auto; right: 0; width: auto; height: 2px; }\n.aa-timeline.is-horizontal > .aa-timeline-item > .aa-timeline-content { padding: 22px 12px 0 0; }\n","jsx":"import React from 'react';\nimport './TimelineList.css';\n\nexport default function TimelineList({ items = [], direction = 'vertical' }) {\n  return (\n    <div className={'aa-timeline' + (direction === 'horizontal' ? ' is-horizontal' : '')}>\n      {items.map((it, i) => (\n        <div className={`aa-timeline-item is-${it.status}`} key={i}>\n          <span className=\"aa-timeline-node\" />\n          <span className=\"aa-timeline-line\" />\n          <div className=\"aa-timeline-content\">\n            <div className=\"aa-timeline-time\">{it.time}</div>\n            <div className=\"aa-timeline-title\">{it.title}</div>\n            {it.desc ? <div className=\"aa-timeline-desc\">{it.desc}</div> : null}\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-timeline\" :class=\"{ 'is-horizontal': direction === 'horizontal' }\">\n    <div class=\"aa-timeline-item\" v-for=\"(it, i) in items\" :key=\"i\" :class=\"'is-' + it.status\">\n      <span class=\"aa-timeline-node\"></span>\n      <span class=\"aa-timeline-line\"></span>\n      <div class=\"aa-timeline-content\">\n        <div class=\"aa-timeline-time\">{{ it.time }}</div>\n        <div class=\"aa-timeline-title\">{{ it.title }}</div>\n        <div class=\"aa-timeline-desc\" v-if=\"it.desc\">{{ it.desc }}</div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaTimelineList',\n  props: {\n    items: { type: Array, default: function () { return []; } },\n    direction: { type: String, default: 'vertical' }\n  }\n};\n</script>\n\n<style src=\"./TimelineList.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-timeline\" :class=\"{ 'is-horizontal': direction === 'horizontal' }\">\n    <div class=\"aa-timeline-item\" v-for=\"(it, i) in items\" :key=\"i\" :class=\"'is-' + it.status\">\n      <span class=\"aa-timeline-node\"></span>\n      <span class=\"aa-timeline-line\"></span>\n      <div class=\"aa-timeline-content\">\n        <div class=\"aa-timeline-time\">{{ it.time }}</div>\n        <div class=\"aa-timeline-title\">{{ it.title }}</div>\n        <div class=\"aa-timeline-desc\" v-if=\"it.desc\">{{ it.desc }}</div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\ndefineProps({\n  items: { type: Array, default: () => [] },\n  direction: { type: String, default: 'vertical' }\n});\n</script>\n\n<style src=\"./TimelineList.css\"></style>\n"}},{"slug":"steplist","name":"步骤列表 StepList","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/steplist.json","category":"display","specLines":["- 展示多步骤流程的详细列表","- 每步骤显示序号、标题、描述、状态图标","- 步骤之间用连接线串联","- 支持点击步骤跳转详情","- 适用于配置向导、任务进度"],"specSummary":"- 展示多步骤流程的详细列表","contract":{"variants":["水平步骤条 · 已完成","水平步骤条 · 进行中","垂直步骤列表 · 待处理"],"dims":[{"name":"orientation","values":["horizontal","vertical"]},{"name":"state","values":["done","processing","waiting"]}],"unknowns":["三种状态的具体配色","可点击步骤的交互反馈样式"],"anatomy":{"index":"序号","title":"标题","desc":"描述","icon":"状态图标","connector":"步骤之间用连接线串联"},"doNot":["步骤的图标库与插画"],"usage":["展示多步骤流程的详细列表","每步骤显示序号、标题、描述、状态图标","步骤之间用连接线串联","支持点击步骤跳转详情","适用于配置向导、任务进度"],"structure":{"connector":"步骤间连接线","items":"序号 + 标题 + 描述 + 状态图标"}},"files":{"html":"../frameworks/StepList.html","css":"../frameworks/StepList.css","jsx":"../frameworks/StepList.jsx","vue2":"../frameworks/StepList.vue2.vue","vue3":"../frameworks/StepList.vue3.vue"},"sizes":{"html":2739,"css":2434,"jsx":1012,"vue2":1066,"vue3":1025},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · StepList（普通 H5）</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"StepList.css\" />\n  <style>\n    body { margin: 0; padding: 24px; background: var(--au-color-page-bg); }\n    .aa-demo-toolbar { margin-bottom: 16px; display: flex; gap: 8px; align-items: center; }\n    .aa-demo-toolbar select { border: 1px solid var(--au-color-border); border-radius: 6px; padding: 4px 8px; }\n    .aa-demo-panel { background: var(--au-color-card-bg); border: 1px solid var(--au-color-border); border-radius: 8px; padding: 20px; }\n  </style>\n</head>\n<body>\n  <div class=\"aa-demo-toolbar\">\n    <label>方向：</label>\n    <select id=\"dir\">\n      <option value=\"vertical\" selected>垂直</option>\n      <option value=\"horizontal\">水平</option>\n    </select>\n  </div>\n\n  <div class=\"aa-demo-panel\">\n    <div class=\"aa-steplist\" role=\"list\" id=\"app\"></div>\n  </div>\n\n  <script>\n    var DATA = [\n      { title: '创建项目', desc: '填写基础信息并创建。', status: 'done' },\n      { title: '配置成员', desc: '邀请协作成员并分配角色。', status: 'done' },\n      { title: '设置流程', desc: '定义审批与通知流程。', status: 'active' },\n      { title: '发布上线', desc: '提交审核后正式发布。', status: 'pending' },\n      { title: '历史回滚', desc: '上次发布校验失败。', status: 'error' }\n    ];\n\n    function nodeText(it, i) {\n      if (it.status === 'done') return '✓';\n      if (it.status === 'error') return '✕';\n      return String(i + 1);\n    }\n\n    function render() {\n      var dir = document.getElementById('dir').value;\n      var root = document.getElementById('app');\n      root.className = 'aa-steplist' + (dir === 'horizontal' ? ' is-horizontal' : '');\n      root.innerHTML = DATA.map(function (it, i) {\n        return '<div class=\"aa-steplist-item is-' + it.status + ' is-clickable\" role=\"list\">' +\n          '<span class=\"aa-steplist-node\" role=\"list\">' + nodeText(it, i) + '</span>' +\n          '<span class=\"aa-steplist-line\"></span>' +\n          '<div class=\"aa-steplist-body\"><div class=\"aa-steplist-title\">' + it.title + '</div>' +\n          '<div class=\"aa-steplist-desc\">' + it.desc + '</div></div></div>';\n      }).join('');\n      root.querySelectorAll('.aa-steplist-item').forEach(function (el, i) {\n        el.addEventListener('click', function () { alert('点击：' + DATA[i].title); });\n      });\n    }\n    document.getElementById('dir').addEventListener('change', render);\n    render();\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin StepList 样式 — 对齐 组件7.txt StepList：多步骤详细列表，序号/标题/描述/状态图标，连接线串联，可点击 */\n\n.aa-steplist { font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); color: var(--au-color-text-body); }\n.aa-steplist-item { position: relative; display: flex; gap: 12px; padding-bottom: 20px; }\n.aa-steplist-line { position: absolute; left: 14px; top: 32px; bottom: 0; width: 2px; background: var(--au-color-border); }\n.aa-steplist-item:last-child { padding-bottom: 0; }\n.aa-steplist-item:last-child .aa-steplist-line { display: none; }\n.aa-steplist-node { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center;\n  justify-content: center; font-size: 13px; font-weight: 500; border: 2px solid var(--au-color-border); background: var(--au-color-card-bg); color: var(--au-color-text-secondary); z-index: 1; box-sizing: border-box; }\n.aa-steplist-body { flex: 1; padding-top: 2px; }\n.aa-steplist-title { font-size: 14px; font-weight: 500; color: var(--au-color-text-title); }\n.aa-steplist-desc { font-size: 13px; color: var(--au-color-text-secondary); margin-top: 2px; line-height: 1.5; }\n.aa-steplist-item.is-clickable { cursor: pointer; }\n.aa-steplist-item.is-clickable:hover .aa-steplist-title { color: var(--au-color-brand); }\n\n.aa-steplist-item.is-done .aa-steplist-node { background: var(--au-color-brand); border-color: var(--au-color-brand); color: var(--au-color-text-inverse); }\n.aa-steplist-item.is-done .aa-steplist-line { background: var(--au-color-brand); }\n.aa-steplist-item.is-active .aa-steplist-node { border-color: var(--au-color-brand); color: var(--au-color-brand); box-shadow: 0 0 0 3px rgba(47,84,235,0.2); }\n.aa-steplist-item.is-error .aa-steplist-node { background: var(--au-color-error); border-color: var(--au-color-error); color: var(--au-color-text-inverse); }\n.aa-steplist-item.is-error .aa-steplist-line { background: var(--au-color-error); }\n\n/* 水平模式 */\n.aa-steplist.is-horizontal { display: flex; }\n.aa-steplist.is-horizontal > .aa-steplist-item { flex: 1; flex-direction: column; padding-bottom: 0; padding-right: 8px; }\n.aa-steplist.is-horizontal > .aa-steplist-item > .aa-steplist-line { left: 28px; top: 14px; bottom: auto; right: 0; width: auto; height: 2px; }\n.aa-steplist.is-horizontal > .aa-steplist-item > .aa-steplist-body { padding-top: 8px; }\n","jsx":"import React from 'react';\nimport './StepList.css';\n\nfunction nodeText(it, i) {\n  if (it.status === 'done') return '✓';\n  if (it.status === 'error') return '✕';\n  return String(i + 1);\n}\n\nexport default function StepList({ steps = [], direction = 'vertical', clickable = false, onStepClick }) {\n  return (\n    <div className={'aa-steplist' + (direction === 'horizontal' ? ' is-horizontal' : '')}>\n      {steps.map((it, i) => (\n        <div\n          key={i}\n          className={`aa-steplist-item is-${it.status}${clickable ? ' is-clickable' : ''}`}\n          onClick={clickable ? () => onStepClick && onStepClick(i) : undefined}\n        >\n          <span className=\"aa-steplist-node\">{nodeText(it, i)}</span>\n          <span className=\"aa-steplist-line\" />\n          <div className=\"aa-steplist-body\">\n            <div className=\"aa-steplist-title\">{it.title}</div>\n            {it.desc ? <div className=\"aa-steplist-desc\">{it.desc}</div> : null}\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-steplist\" :class=\"{ 'is-horizontal': direction === 'horizontal' }\">\n    <div class=\"aa-steplist-item\" v-for=\"(it, i) in steps\" :key=\"i\"\n         :class=\"['is-' + it.status, { 'is-clickable': clickable }]\" @click=\"clickable && $emit('step-click', i)\">\n      <span class=\"aa-steplist-node\">{{ nodeText(it, i) }}</span>\n      <span class=\"aa-steplist-line\"></span>\n      <div class=\"aa-steplist-body\">\n        <div class=\"aa-steplist-title\">{{ it.title }}</div>\n        <div class=\"aa-steplist-desc\" v-if=\"it.desc\">{{ it.desc }}</div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaStepList',\n  props: {\n    steps: { type: Array, default: function () { return []; } },\n    direction: { type: String, default: 'vertical' },\n    clickable: { type: Boolean, default: false }\n  },\n  methods: {\n    nodeText: function (it, i) {\n      if (it.status === 'done') return '✓';\n      if (it.status === 'error') return '✕';\n      return String(i + 1);\n    }\n  }\n};\n</script>\n\n<style src=\"./StepList.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-steplist\" :class=\"{ 'is-horizontal': direction === 'horizontal' }\">\n    <div class=\"aa-steplist-item\" v-for=\"(it, i) in steps\" :key=\"i\"\n         :class=\"['is-' + it.status, { 'is-clickable': clickable }]\" @click=\"clickable && emit('step-click', i)\">\n      <span class=\"aa-steplist-node\">{{ nodeText(it, i) }}</span>\n      <span class=\"aa-steplist-line\"></span>\n      <div class=\"aa-steplist-body\">\n        <div class=\"aa-steplist-title\">{{ it.title }}</div>\n        <div class=\"aa-steplist-desc\" v-if=\"it.desc\">{{ it.desc }}</div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nconst props = defineProps({\n  steps: { type: Array, default: () => [] },\n  direction: { type: String, default: 'vertical' },\n  clickable: { type: Boolean, default: false }\n});\nconst emit = defineEmits(['step-click']);\n\nfunction nodeText(it, i) {\n  if (it.status === 'done') return '✓';\n  if (it.status === 'error') return '✕';\n  return String(i + 1);\n}\n</script>\n\n<style src=\"./StepList.css\"></style>\n"}},{"slug":"chartpanel","name":"图表面板 ChartPanel","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/chartpanel.json","category":"display","specLines":["- 可折叠的图表容器","- 标题栏带展开/折叠、刷新、导出按钮","- 图表区域可自定义高度","- 支持图表切换类型（折线、柱状、饼图）","- 适用于数据看板"],"specSummary":"- 可折叠的图表容器","contract":{"variants":["折线图面板","柱状图面板","饼图面板","折叠态"],"dims":[{"name":"chartType","values":["line","bar","pie"]},{"name":"state","values":["expanded","collapsed"]}],"unknowns":["图表区域默认高度","刷新时的加载态表现"],"anatomy":{"header":"标题栏带展开/折叠、刷新、导出按钮","body":"图表区域可自定义高度","switch":"支持图表切换类型（折线、柱状、饼图）"},"doNot":["图表内部的坐标系与图例规范","导出文件的格式"],"usage":["可折叠的图表容器","标题栏带展开/折叠、刷新、导出按钮","图表区域可自定义高度","支持图表切换类型（折线、柱状、饼图）","适用于数据看板"],"structure":{"headerActions":"展开/折叠、刷新、导出","bodyHeight":"可自定义"}},"files":{"html":"../frameworks/ChartPanel.html","css":"../frameworks/ChartPanel.css","jsx":"../frameworks/ChartPanel.jsx","vue2":"../frameworks/ChartPanel.vue2.vue","vue3":"../frameworks/ChartPanel.vue3.vue"},"sizes":{"html":1572,"css":1196,"jsx":960,"vue2":963,"vue3":987},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · ChartPanel（普通 H5）</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"ChartPanel.css\" />\n  <style>body{margin:0;padding:24px;background: var(--au-color-page-bg);}</style>\n</head>\n<body>\n  <div class=\"aa-chartpanel\" id=\"panel\">\n    <div class=\"aa-chartpanel-head\">\n      <span class=\"aa-chartpanel-title\">访问趋势</span>\n      <div class=\"aa-chartpanel-tools\">\n        <button class=\"aa-chartpanel-tool\" id=\"refresh\">刷新</button>\n        <button class=\"aa-chartpanel-tool\" id=\"export\">导出</button>\n        <button class=\"aa-chartpanel-tool aa-chartpanel-caret\" id=\"toggle\">▾</button>\n      </div>\n    </div>\n    <div class=\"aa-chartpanel-body\" id=\"body\">\n      <div style=\"height:160px;background:linear-gradient(135deg,var(--color-brand-bg),var(--color-border));border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--color-brand);\">图表区域（可放置折线/柱状/饼图）</div>\n    </div>\n  </div>\n\n  <script>\n    var panel = document.getElementById('panel');\n    document.getElementById('toggle').onclick = function () { panel.classList.toggle('is-collapsed'); };\n    document.getElementById('refresh').onclick = function () { alert('刷新图表'); };\n    document.getElementById('export').onclick = function () { alert('导出图表'); };\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin ChartPanel 样式 — 对齐 组件7.txt ChartPanel：可折叠图表容器，标题栏带展开/折叠、刷新、导出 */\n\n.aa-chartpanel { background: var(--au-color-card-bg); border: 1px solid var(--au-color-border); border-radius: 8px; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); color: var(--au-color-text-body); }\n.aa-chartpanel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--au-color-border); }\n.aa-chartpanel-title { font-size: 14px; font-weight: 500; color: var(--au-color-text-title); }\n.aa-chartpanel-tools { display: flex; gap: 8px; }\n.aa-chartpanel-tool { border: none; background: none; cursor: pointer; color: var(--au-color-text-tertiary); font-size: 13px; padding: 4px 8px; border-radius: 4px; }\n.aa-chartpanel-tool:hover { background: var(--au-color-brand-bg); color: var(--au-color-brand); }\n.aa-chartpanel-caret { transition: transform .2s; }\n.aa-chartpanel.is-collapsed .aa-chartpanel-caret { transform: rotate(-90deg); }\n.aa-chartpanel.is-collapsed .aa-chartpanel-body { display: none; }\n.aa-chartpanel-body { padding: 16px; }\n","jsx":"import React, { useState } from 'react';\nimport './ChartPanel.css';\n\nexport default function ChartPanel({ title = '图表', collapsible = true, collapsed = false, onRefresh, onExport, children }) {\n  const [isCollapsed, setIsCollapsed] = useState(collapsed);\n  return (\n    <div className={'aa-chartpanel' + (isCollapsed ? ' is-collapsed' : '')}>\n      <div className=\"aa-chartpanel-head\">\n        <span className=\"aa-chartpanel-title\">{title}</span>\n        <div className=\"aa-chartpanel-tools\">\n          <button className=\"aa-chartpanel-tool\" onClick={onRefresh}>刷新</button>\n          <button className=\"aa-chartpanel-tool\" onClick={onExport}>导出</button>\n          {collapsible ? (\n            <button className=\"aa-chartpanel-tool aa-chartpanel-caret\" onClick={() => setIsCollapsed(c => !c)}>▾</button>\n          ) : null}\n        </div>\n      </div>\n      <div className=\"aa-chartpanel-body\">{children || '图表区域'}</div>\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-chartpanel\" :class=\"{ 'is-collapsed': isCollapsed }\">\n    <div class=\"aa-chartpanel-head\">\n      <span class=\"aa-chartpanel-title\">{{ title }}</span>\n      <div class=\"aa-chartpanel-tools\">\n        <button class=\"aa-chartpanel-tool\" @click=\"$emit('refresh')\">刷新</button>\n        <button class=\"aa-chartpanel-tool\" @click=\"$emit('export')\">导出</button>\n        <button v-if=\"collapsible\" class=\"aa-chartpanel-tool aa-chartpanel-caret\" @click=\"isCollapsed = !isCollapsed\">▾</button>\n      </div>\n    </div>\n    <div class=\"aa-chartpanel-body\"><slot>图表区域</slot></div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaChartPanel',\n  props: {\n    title: { type: String, default: '图表' },\n    collapsible: { type: Boolean, default: true },\n    collapsed: { type: Boolean, default: false }\n  },\n  data: function () { return { isCollapsed: this.collapsed }; }\n};\n</script>\n\n<style src=\"./ChartPanel.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-chartpanel\" :class=\"{ 'is-collapsed': isCollapsed }\">\n    <div class=\"aa-chartpanel-head\">\n      <span class=\"aa-chartpanel-title\">{{ title }}</span>\n      <div class=\"aa-chartpanel-tools\">\n        <button class=\"aa-chartpanel-tool\" @click=\"emit('refresh')\">刷新</button>\n        <button class=\"aa-chartpanel-tool\" @click=\"emit('export')\">导出</button>\n        <button v-if=\"collapsible\" class=\"aa-chartpanel-tool aa-chartpanel-caret\" @click=\"isCollapsed = !isCollapsed\">▾</button>\n      </div>\n    </div>\n    <div class=\"aa-chartpanel-body\"><slot>图表区域</slot></div>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nconst props = defineProps({\n  title: { type: String, default: '图表' },\n  collapsible: { type: Boolean, default: true },\n  collapsed: { type: Boolean, default: false }\n});\nconst emit = defineEmits(['refresh', 'export']);\nconst isCollapsed = ref(props.collapsed);\n</script>\n\n<style src=\"./ChartPanel.css\"></style>\n"}},{"slug":"dashboardcard","name":"仪表板卡片 DashboardCard","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/dashboardcard.json","category":"display","specLines":["- 用于数据看板中的卡片单元","- 支持拖拽调整大小和位置","- 可配置刷新频率","- 卡片可最大化、刷新、删除","- 布局可保存为模板"],"specSummary":"- 用于数据看板中的卡片单元","contract":{"variants":["可拖拽调整大小和位置","最大化","可配置刷新频率","删除 + 布局保存为模板"],"dims":[{"name":"action","values":["draggable","maximize","refresh","remove"]},{"name":"layout","values":["default","template-saved"]}],"unknowns":["拖拽时的占位与吸附行为","刷新频率的默认值与可选项"],"anatomy":{"card":"看板中的卡片单元","actions":"可最大化、刷新、删除","layout":"支持拖拽调整大小和位置，布局可保存为模板"},"doNot":["看板栅格的列数与断点","模板的存储格式"],"usage":["用于数据看板中的卡片单元","支持拖拽调整大小和位置","可配置刷新频率","卡片可最大化、刷新、删除","布局可保存为模板"],"structure":{"refresh":"可配置刷新频率","layoutPersist":"可保存为模板"}},"files":{"html":"../frameworks/DashboardCard.html","css":"../frameworks/DashboardCard.css","jsx":"../frameworks/DashboardCard.jsx","vue2":"../frameworks/DashboardCard.vue2.vue","vue3":"../frameworks/DashboardCard.vue3.vue"},"sizes":{"html":1091,"css":1054,"jsx":529,"vue2":696,"vue3":648},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · DashboardCard（普通 H5）</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"DashboardCard.css\" />\n  <style>body{margin:0;padding:24px;background: var(--au-color-page-bg);display:flex;gap:16px;flex-wrap:wrap;}\n    .aa-dashcard{width:200px;}</style>\n</head>\n<body>\n  <div class=\"aa-dashcard\">\n    <div class=\"aa-dashcard-head\"><span class=\"aa-dashcard-title\">今日订单</span><span class=\"aa-dashcard-icon\">📦</span></div>\n    <div class=\"aa-dashcard-value\">1,284</div>\n    <div class=\"aa-dashcard-trend up\">↑ 12.5% 较昨日</div>\n  </div>\n  <div class=\"aa-dashcard\">\n    <div class=\"aa-dashcard-head\"><span class=\"aa-dashcard-title\">退款率</span><span class=\"aa-dashcard-icon\">↩️</span></div>\n    <div class=\"aa-dashcard-value\">2.3%</div>\n    <div class=\"aa-dashcard-trend down\">↑ 0.4% 需关注</div>\n  </div>\n</body>\n</html>\n","css":"/* Aurora Admin DashboardCard 样式 — 对齐 组件7.txt DashboardCard：数据看板卡片单元，标题/数值/趋势 */\n\n.aa-dashcard { background: var(--au-color-card-bg); border: 1px solid var(--au-color-border); border-radius: 8px; padding: 16px; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); color: var(--au-color-text-body); }\n.aa-dashcard-head { display: flex; align-items: center; justify-content: space-between; }\n.aa-dashcard-title { font-size: 13px; color: var(--au-color-text-secondary); }\n.aa-dashcard-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--au-color-brand-bg); color: var(--au-color-brand); display: flex; align-items: center; justify-content: center; font-size: 16px; }\n.aa-dashcard-value { font-size: 28px; font-weight: 600; color: var(--au-color-text-title); margin-top: 8px; }\n.aa-dashcard-trend { font-size: 12px; margin-top: 4px; }\n.aa-dashcard-trend.up { color: var(--au-color-success); }\n.aa-dashcard-trend.down { color: var(--au-color-error); }\n","jsx":"import React from 'react';\nimport './DashboardCard.css';\n\nexport default function DashboardCard({ title = '', value = '', icon = '📊', trend = 'up', trendText = '' }) {\n  return (\n    <div className=\"aa-dashcard\">\n      <div className=\"aa-dashcard-head\">\n        <span className=\"aa-dashcard-title\">{title}</span>\n        <span className=\"aa-dashcard-icon\">{icon}</span>\n      </div>\n      <div className=\"aa-dashcard-value\">{value}</div>\n      <div className={`aa-dashcard-trend ${trend}`}>{trendText}</div>\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-dashcard\">\n    <div class=\"aa-dashcard-head\">\n      <span class=\"aa-dashcard-title\">{{ title }}</span>\n      <span class=\"aa-dashcard-icon\">{{ icon }}</span>\n    </div>\n    <div class=\"aa-dashcard-value\">{{ value }}</div>\n    <div class=\"aa-dashcard-trend\" :class=\"trend\">{{ trendText }}</div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaDashboardCard',\n  props: {\n    title: { type: String, default: '' },\n    value: { type: [String, Number], default: '' },\n    icon: { type: String, default: '📊' },\n    trend: { type: String, default: 'up' },\n    trendText: { type: String, default: '' }\n  }\n};\n</script>\n\n<style src=\"./DashboardCard.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-dashcard\">\n    <div class=\"aa-dashcard-head\">\n      <span class=\"aa-dashcard-title\">{{ title }}</span>\n      <span class=\"aa-dashcard-icon\">{{ icon }}</span>\n    </div>\n    <div class=\"aa-dashcard-value\">{{ value }}</div>\n    <div class=\"aa-dashcard-trend\" :class=\"trend\">{{ trendText }}</div>\n  </div>\n</template>\n\n<script setup>\ndefineProps({\n  title: { type: String, default: '' },\n  value: { type: [String, Number], default: '' },\n  icon: { type: String, default: '📊' },\n  trend: { type: String, default: 'up' },\n  trendText: { type: String, default: '' }\n});\n</script>\n\n<style src=\"./DashboardCard.css\"></style>\n"}},{"slug":"enhancedtabnav","name":"标签页导航增强 EnhancedTabNav","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/enhancedtabnav.json","category":"navigation","specLines":["- 支持浏览器标签式导航","- 标签可拖拽排序、右键菜单（关闭、关闭其他、关闭全部）","- 当前标签高亮，未保存状态显示圆点","- 标签可固定","- 与路由联动，点击标签切换页面"],"specSummary":"- 支持浏览器标签式导航","contract":{"variants":["当前标签","非当前标签","未保存（圆点标记）","已固定 + 可拖拽"],"dims":[{"name":"state","values":["active","inactive","unsaved","pinned"]},{"name":"feature","values":["draggable","contextmenu"]}],"unknowns":["最多同时打开的标签数","关闭未保存标签的二次确认"],"anatomy":{"tab":"浏览器标签式导航","active":"当前标签高亮","unsaved":"未保存状态显示圆点","menu":"右键菜单：关闭、关闭其他、关闭全部","route":"与路由联动，点击切换页面"},"doNot":["标签溢出时的滚动与下拉列表"],"usage":["支持浏览器标签式导航","标签可拖拽排序、右键菜单（关闭、关闭其他、关闭全部）","当前标签高亮，未保存状态显示圆点","标签可固定","与路由联动，点击标签切换页面"],"structure":{"interaction":"拖拽排序 + 右键菜单"}},"files":{"html":"../frameworks/EnhancedTabNav.html","css":"../frameworks/EnhancedTabNav.css","jsx":"../frameworks/EnhancedTabNav.jsx","vue2":"../frameworks/EnhancedTabNav.vue2.vue","vue3":"../frameworks/EnhancedTabNav.vue3.vue"},"sizes":{"html":4734,"css":1970,"jsx":3905,"vue2":3582,"vue3":3395},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · EnhancedTabNav</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"./EnhancedTabNav.css\" />\n</head>\n<body>\n  <div class=\"aa-page\">\n    <h2 class=\"aa-h2\">EnhancedTabNav 增强页签导航</h2>\n    <p class=\"aa-desc\">浏览器标签式导航：可拖拽排序、右键菜单（关闭 / 关闭其他 / 关闭全部），未保存状态显示圆点。</p>\n\n    <div class=\"aa-demo\">\n      <div class=\"aa-tabs-enh\" id=\"tabs\">\n        <div class=\"aa-tabs-enh-bar\" id=\"bar\"></div>\n        <div class=\"aa-tabs-enh-panel\" id=\"panel\"></div>\n      </div>\n      <p class=\"aa-tabs-enh-hint\">拖拽标签可排序；右键标签打开菜单；带 ● 表示未保存。</p>\n    </div>\n  </div>\n\n  <script>\n    var tabs = [\n      { id: 'u', title: '用户管理', dirty: false, desc: '用户列表与权限配置。' },\n      { id: 'r', title: '角色管理', dirty: true, desc: '角色权限分配（有未保存修改）。' },\n      { id: 'm', title: '菜单管理', dirty: false, desc: '导航菜单树形配置。' },\n      { id: 'p', title: '参数配置', dirty: true, desc: '系统参数键值对管理。' },\n      { id: 'l', title: '日志查询', dirty: false, desc: '操作日志检索与导出。' }\n    ];\n    var activeId = 'u';\n    var bar = document.getElementById('bar');\n    var panel = document.getElementById('panel');\n    var menu = null;\n\n    function render() {\n      bar.innerHTML = tabs.map(function (t) {\n        return '<div class=\"aa-tabs-enh-tab' + (t.id === activeId ? ' is-active' : '') + '\" role=\"tab\" tabindex=\"0\" draggable=\"true\" data-id=\"' + t.id + '\" data-idx=\"' + tabs.indexOf(t) + '\">' +\n          (t.dirty ? '<span class=\"aa-dot\"></span>' : '') +\n          '<span class=\"aa-tabs-enh-text\">' + t.title + '</span>' +\n          '<span class=\"aa-tabs-enh-close\" data-close=\"' + t.id + '\">×</span></div>';\n      }).join('');\n      var cur = tabs.filter(function (t) { return t.id === activeId; })[0];\n      panel.textContent = cur ? cur.title + '：' + cur.desc : '请选择页签';\n    }\n\n    bar.addEventListener('click', function (e) {\n      var close = e.target.closest('[data-close]');\n      if (close) { e.stopPropagation(); closeTab(close.dataset.close); return; }\n      var tab = e.target.closest('.aa-tabs-enh-tab');\n      if (tab) activeId = tab.dataset.id;\n      render();\n    });\n    bar.addEventListener('contextmenu', function (e) {\n      var tab = e.target.closest('.aa-tabs-enh-tab');\n      if (!tab) return;\n      e.preventDefault();\n      showMenu(e.clientX, e.clientY, tab.dataset.id);\n    });\n    function closeTab(id) {\n      if (tabs.length <= 1) return;\n      var idx = tabs.findIndex(function (t) { return t.id === id; });\n      tabs.splice(idx, 1);\n      if (activeId === id) activeId = tabs[Math.max(0, idx - 1)].id;\n      render();\n    }\n    function showMenu(x, y, id) {\n      hideMenu();\n      menu = document.createElement('div');\n      menu.className = 'aa-tabs-enh-menu';\n      menu.innerHTML = '<div data-act=\"close\">关闭</div><div data-act=\"other\">关闭其他</div><div data-act=\"all\">关闭全部</div>';\n      menu.style.left = x + 'px'; menu.style.top = y + 'px';\n      menu.addEventListener('click', function (e) {\n        var act = e.target.dataset.act;\n        if (act === 'close') closeTab(id);\n        else if (act === 'other') tabs = tabs.filter(function (t) { return t.id === id; });\n        else if (act === 'all') tabs = [];\n        activeId = tabs.length ? id : '';\n        render(); hideMenu();\n      });\n      document.body.appendChild(menu);\n    }\n    function hideMenu() { if (menu) { menu.remove(); menu = null; } }\n    document.addEventListener('click', function (e) { if (menu && !menu.contains(e.target)) hideMenu(); });\n\n    // 拖拽排序\n    var dragId = null;\n    bar.addEventListener('dragstart', function (e) {\n      var tab = e.target.closest('.aa-tabs-enh-tab');\n      if (tab) dragId = tab.dataset.id;\n    });\n    bar.addEventListener('dragover', function (e) { e.preventDefault(); });\n    bar.addEventListener('drop', function (e) {\n      e.preventDefault();\n      var tab = e.target.closest('.aa-tabs-enh-tab');\n      if (!tab || !dragId) return;\n      var from = tabs.findIndex(function (t) { return t.id === dragId; });\n      var to = tabs.findIndex(function (t) { return t.id === tab.dataset.id; });\n      if (from < 0 || to < 0 || from === to) return;\n      var moved = tabs.splice(from, 1)[0];\n      tabs.splice(to, 0, moved);\n      render();\n    });\n\n    render();\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin EnhancedTabNav 样式 — 可拖拽 + 右键菜单的页签导航 */\n.aa-tabs-enh { font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); }\n.aa-tabs-enh-bar { display: flex; gap: 2px; border-bottom: 1px solid var(--au-color-border); flex-wrap: wrap; }\n.aa-tabs-enh-tab { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--au-color-border); border-bottom: none; border-radius: 6px 6px 0 0; background: var(--au-color-table-header-bg); cursor: pointer; font-size: 13px; color: var(--au-color-text-tertiary); user-select: none; transition: background .15s; }\n.aa-tabs-enh-tab:hover { background: var(--au-color-brand-bg); }\n.aa-tabs-enh-tab.is-active { background: var(--au-color-card-bg); color: var(--au-color-brand); }\n.aa-tabs-enh-tab.is-active::after { content: ''; position: absolute; }\n.aa-tabs-enh-tab .aa-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--au-color-warning); }\n.aa-tabs-enh-close { color: var(--au-color-text-secondary); border-radius: 50%; width: 16px; height: 16px; line-height: 14px; text-align: center; font-size: 14px; }\n.aa-tabs-enh-close:hover { background: var(--au-color-disabled-bg); color: var(--au-color-error); }\n.aa-tabs-enh-panel { padding: 16px 18px; border: 1px solid var(--au-color-border); border-top: none; border-radius: 0 0 8px 8px; color: var(--au-color-text-tertiary); font-size: 14px; line-height: 1.7; }\n.aa-tabs-enh-menu { position: fixed; z-index: 1000; background: var(--au-color-card-bg); border: 1px solid var(--au-color-border); border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,0.12); padding: 4px 0; min-width: 124px; }\n.aa-tabs-enh-menu div { padding: 7px 14px; font-size: 13px; cursor: pointer; color: var(--au-color-text-body); }\n.aa-tabs-enh-menu div:hover { background: var(--au-color-page-bg); }\n.aa-tabs-enh-hint { font-size: 12px; color: var(--au-color-text-secondary); margin-top: 10px; }\n","jsx":"import React, { useState, useRef, useEffect } from 'react';\nimport './EnhancedTabNav.css';\n\nconst INITIAL = [\n  { id: 'u', title: '用户管理', dirty: false, desc: '用户列表与权限配置。' },\n  { id: 'r', title: '角色管理', dirty: true, desc: '角色权限分配（有未保存修改）。' },\n  { id: 'm', title: '菜单管理', dirty: false, desc: '导航菜单树形配置。' },\n  { id: 'p', title: '参数配置', dirty: true, desc: '系统参数键值对管理。' },\n  { id: 'l', title: '日志查询', dirty: false, desc: '操作日志检索与导出。' }\n];\n\nexport default function EnhancedTabNav() {\n  const [tabs, setTabs] = useState(INITIAL);\n  const [activeId, setActiveId] = useState('u');\n  const [dragId, setDragId] = useState(null);\n  const [menu, setMenu] = useState(null);\n  const [menuId, setMenuId] = useState('');\n  const root = useRef(null);\n\n  useEffect(() => {\n    function onDoc(e) {\n      if (root.current && !root.current.contains(e.target)) setMenu(null);\n    }\n    document.addEventListener('click', onDoc);\n    return () => document.removeEventListener('click', onDoc);\n  }, []);\n\n  const activeTab = tabs.filter((t) => t.id === activeId)[0] || null;\n\n  const closeTab = (id) => {\n    setTabs((ts) => {\n      if (ts.length <= 1) return ts;\n      const idx = ts.findIndex((t) => t.id === id);\n      const next = ts.slice();\n      next.splice(idx, 1);\n      if (activeId === id) setActiveId(next[Math.max(0, idx - 1)].id);\n      return next;\n    });\n  };\n  const onTabContext = (e, id) => {\n    e.preventDefault();\n    setMenu({ x: e.clientX, y: e.clientY });\n    setMenuId(id);\n  };\n  const onBarContext = (e) => {\n    if (e.target.closest('.aa-tabs-enh-tab')) e.preventDefault();\n  };\n  const menuAct = (act) => {\n    if (act === 'close') closeTab(menuId);\n    else if (act === 'other') setTabs((ts) => ts.filter((t) => t.id === menuId));\n    else if (act === 'all') setTabs([]);\n    setActiveId(tabs.length ? menuId : '');\n    setMenu(null);\n  };\n  const onDrop = (e) => {\n    const el = e.target.closest('.aa-tabs-enh-tab');\n    const id = el && el.dataset.id;\n    if (!id || !dragId) return;\n    setTabs((ts) => {\n      const from = ts.findIndex((t) => t.id === dragId);\n      const to = ts.findIndex((t) => t.id === id);\n      if (from < 0 || to < 0 || from === to) return ts;\n      const next = ts.slice();\n      const moved = next.splice(from, 1)[0];\n      next.splice(to, 0, moved);\n      return next;\n    });\n  };\n\n  return (\n    <div className=\"aa-tabs-enh\" ref={root}>\n      <div className=\"aa-tabs-enh-bar\" onContextMenu={onBarContext} onDragOver={(e) => e.preventDefault()} onDrop={onDrop}>\n        {tabs.map((t) => (\n          <div\n            key={t.id}\n            className={'aa-tabs-enh-tab' + (t.id === activeId ? ' is-active' : '')}\n            draggable=\"true\"\n            data-id={t.id}\n            onClick={() => setActiveId(t.id)}\n            onDragStart={() => setDragId(t.id)}\n            onContextMenu={(e) => onTabContext(e, t.id)}\n          >\n            {t.dirty && <span className=\"aa-dot\" />}\n            <span className=\"aa-tabs-enh-text\">{t.title}</span>\n            <span className=\"aa-tabs-enh-close\" onClick={(e) => { e.stopPropagation(); closeTab(t.id); }}>×</span>\n          </div>\n        ))}\n      </div>\n      <div className=\"aa-tabs-enh-panel\">{activeTab ? activeTab.title + '：' + activeTab.desc : '请选择页签'}</div>\n      {menu && (\n        <div className=\"aa-tabs-enh-menu\" style={{ left: menu.x, top: menu.y }} onClick={(e) => e.stopPropagation()}>\n          <div onClick={() => menuAct('close')}>关闭</div>\n          <div onClick={() => menuAct('other')}>关闭其他</div>\n          <div onClick={() => menuAct('all')}>关闭全部</div>\n        </div>\n      )}\n      <p className=\"aa-tabs-enh-hint\">拖拽标签可排序；右键标签打开菜单；带 ● 表示未保存。</p>\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-tabs-enh\" v-click-outside=\"hideMenu\">\n    <div class=\"aa-tabs-enh-bar\" @contextmenu=\"onBarContext\" @dragover.prevent @drop=\"onDrop\">\n      <div\n        v-for=\"t in tabs\"\n        :key=\"t.id\"\n        class=\"aa-tabs-enh-tab\"\n        :class=\"{ 'is-active': t.id === activeId }\"\n        draggable=\"true\"\n        :data-id=\"t.id\"\n        @click=\"activeId = t.id\"\n        @dragstart=\"dragId = t.id\"\n        @contextmenu=\"onTabContext($event, t.id)\"\n      >\n        <span v-if=\"t.dirty\" class=\"aa-dot\"></span>\n        <span class=\"aa-tabs-enh-text\">{{ t.title }}</span>\n        <span class=\"aa-tabs-enh-close\" @click.stop=\"closeTab(t.id)\">×</span>\n      </div>\n    </div>\n    <div class=\"aa-tabs-enh-panel\">{{ activeTab ? activeTab.title + '：' + activeTab.desc : '请选择页签' }}</div>\n    <div v-if=\"menu\" class=\"aa-tabs-enh-menu\" :style=\"{ left: menu.x + 'px', top: menu.y + 'px' }\" @click.stop>\n      <div @click=\"menuAct('close')\">关闭</div>\n      <div @click=\"menuAct('other')\">关闭其他</div>\n      <div @click=\"menuAct('all')\">关闭全部</div>\n    </div>\n    <p class=\"aa-tabs-enh-hint\">拖拽标签可排序；右键标签打开菜单；带 ● 表示未保存。</p>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaEnhancedTabNav',\n  directives: {\n    clickOutside: {\n      bind(el, binding) { el.__doc = (e) => { if (!el.contains(e.target)) binding.value(); }; document.addEventListener('click', el.__doc); },\n      unbind(el) { document.removeEventListener('click', el.__doc); }\n    }\n  },\n  data() {\n    return {\n      tabs: [\n        { id: 'u', title: '用户管理', dirty: false, desc: '用户列表与权限配置。' },\n        { id: 'r', title: '角色管理', dirty: true, desc: '角色权限分配（有未保存修改）。' },\n        { id: 'm', title: '菜单管理', dirty: false, desc: '导航菜单树形配置。' },\n        { id: 'p', title: '参数配置', dirty: true, desc: '系统参数键值对管理。' },\n        { id: 'l', title: '日志查询', dirty: false, desc: '操作日志检索与导出。' }\n      ],\n      activeId: 'u',\n      dragId: null,\n      menu: null,\n      menuId: ''\n    };\n  },\n  computed: {\n    activeTab() {\n      return this.tabs.filter((t) => t.id === this.activeId)[0] || null;\n    }\n  },\n  methods: {\n    closeTab(id) {\n      if (this.tabs.length <= 1) return;\n      const idx = this.tabs.findIndex((t) => t.id === id);\n      this.tabs.splice(idx, 1);\n      if (this.activeId === id) this.activeId = this.tabs[Math.max(0, idx - 1)].id;\n    },\n    onTabContext(e, id) { e.preventDefault(); this.menu = { x: e.clientX, y: e.clientY }; this.menuId = id; },\n    onBarContext(e) { if (e.target.closest('.aa-tabs-enh-tab')) e.preventDefault(); },\n    menuAct(act) {\n      if (act === 'close') this.closeTab(this.menuId);\n      else if (act === 'other') this.tabs = this.tabs.filter((t) => t.id === this.menuId);\n      else if (act === 'all') this.tabs = [];\n      this.activeId = this.tabs.length ? this.menuId : '';\n      this.hideMenu();\n    },\n    hideMenu() { this.menu = null; },\n    onDrop(e) {\n      const id = e.target.closest('.aa-tabs-enh-tab') && e.target.closest('.aa-tabs-enh-tab').dataset.id;\n      if (!id || !this.dragId) return;\n      const from = this.tabs.findIndex((t) => t.id === this.dragId);\n      const to = this.tabs.findIndex((t) => t.id === id);\n      if (from < 0 || to < 0 || from === to) return;\n      const moved = this.tabs.splice(from, 1)[0];\n      this.tabs.splice(to, 0, moved);\n    }\n  }\n};\n</script>\n\n<style src=\"./EnhancedTabNav.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-tabs-enh\" ref=\"root\">\n    <div class=\"aa-tabs-enh-bar\" @contextmenu=\"onBarContext\" @dragover.prevent @drop=\"onDrop\">\n      <div\n        v-for=\"t in tabs\"\n        :key=\"t.id\"\n        class=\"aa-tabs-enh-tab\"\n        :class=\"{ 'is-active': t.id === activeId }\"\n        draggable=\"true\"\n        :data-id=\"t.id\"\n        @click=\"activeId = t.id\"\n        @dragstart=\"dragId = t.id\"\n        @contextmenu=\"onTabContext($event, t.id)\"\n      >\n        <span v-if=\"t.dirty\" class=\"aa-dot\"></span>\n        <span class=\"aa-tabs-enh-text\">{{ t.title }}</span>\n        <span class=\"aa-tabs-enh-close\" @click.stop=\"closeTab(t.id)\">×</span>\n      </div>\n    </div>\n    <div class=\"aa-tabs-enh-panel\">{{ activeTab ? activeTab.title + '：' + activeTab.desc : '请选择页签' }}</div>\n    <div v-if=\"menu\" class=\"aa-tabs-enh-menu\" :style=\"{ left: menu.x + 'px', top: menu.y + 'px' }\">\n      <div @click=\"menuAct('close')\">关闭</div>\n      <div @click=\"menuAct('other')\">关闭其他</div>\n      <div @click=\"menuAct('all')\">关闭全部</div>\n    </div>\n    <p class=\"aa-tabs-enh-hint\">拖拽标签可排序；右键标签打开菜单；带 ● 表示未保存。</p>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, onBeforeUnmount } from 'vue';\n\nconst tabs = ref([\n  { id: 'u', title: '用户管理', dirty: false, desc: '用户列表与权限配置。' },\n  { id: 'r', title: '角色管理', dirty: true, desc: '角色权限分配（有未保存修改）。' },\n  { id: 'm', title: '菜单管理', dirty: false, desc: '导航菜单树形配置。' },\n  { id: 'p', title: '参数配置', dirty: true, desc: '系统参数键值对管理。' },\n  { id: 'l', title: '日志查询', dirty: false, desc: '操作日志检索与导出。' }\n]);\nconst activeId = ref('u');\nconst dragId = ref(null);\nconst menu = ref(null);\nconst menuId = ref('');\nconst root = ref(null);\n\nconst activeTab = computed(() => tabs.value.filter((t) => t.id === activeId.value)[0] || null);\n\nfunction closeTab(id) {\n  if (tabs.value.length <= 1) return;\n  const idx = tabs.value.findIndex((t) => t.id === id);\n  tabs.value.splice(idx, 1);\n  if (activeId.value === id) activeId.value = tabs.value[Math.max(0, idx - 1)].id;\n}\nfunction onTabContext(e, id) { e.preventDefault(); menu.value = { x: e.clientX, y: e.clientY }; menuId.value = id; }\nfunction onBarContext(e) { if (e.target.closest('.aa-tabs-enh-tab')) e.preventDefault(); }\nfunction menuAct(act) {\n  if (act === 'close') closeTab(menuId.value);\n  else if (act === 'other') tabs.value = tabs.value.filter((t) => t.id === menuId.value);\n  else if (act === 'all') tabs.value = [];\n  activeId.value = tabs.value.length ? menuId.value : '';\n  menu.value = null;\n}\nfunction onDrop(e) {\n  const el = e.target.closest('.aa-tabs-enh-tab');\n  const id = el && el.dataset.id;\n  if (!id || !dragId.value) return;\n  const from = tabs.value.findIndex((t) => t.id === dragId.value);\n  const to = tabs.value.findIndex((t) => t.id === id);\n  if (from < 0 || to < 0 || from === to) return;\n  const moved = tabs.value.splice(from, 1)[0];\n  tabs.value.splice(to, 0, moved);\n}\nfunction onDoc(e) { if (root.value && !root.value.contains(e.target)) menu.value = null; }\nonMounted(() => document.addEventListener('click', onDoc));\nonBeforeUnmount(() => document.removeEventListener('click', onDoc));\n</script>\n\n<style src=\"./EnhancedTabNav.css\"></style>\n"}},{"slug":"sidemenu","name":"侧边栏菜单 SideMenu","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/sidemenu.json","category":"navigation","specLines":["- 支持多级菜单、图标、徽章","- 菜单项可折叠、展开","- 选中态背景 #F0F5FF，左侧指示条","- 支持权限过滤、外链、隐藏","- 折叠模式显示图标，悬停弹出子菜单"],"specSummary":"- 支持多级菜单、图标、徽章","contract":{"variants":["选中项（左侧指示条）","带徽章","多级菜单展开","折叠模式（仅图标）","禁用项"],"dims":[{"name":"state","values":["default","selected","disabled","hidden"]},{"name":"collapsed","values":["expanded","collapsed"]},{"name":"feature","values":["icon","badge","children","external"]}],"unknowns":["折叠宽度与展开宽度的具体像素","指示条的宽度与高度"],"anatomy":{"item":"菜单项","selected":"选中态：背景 #F0F5FF，左侧指示条","collapsed":"折叠模式：显示图标，悬停弹出子菜单","badge":"徽章"},"doNot":["权限过滤的具体规则","菜单搜索"],"usage":["支持多级菜单、图标、徽章","菜单项可折叠、展开","选中态背景 #F0F5FF，左侧指示条","支持权限过滤、外链、隐藏","折叠模式显示图标，悬停弹出子菜单"],"structure":{"selectedBg":"#F0F5FF","indicator":"左侧指示条"}},"files":{"html":"../frameworks/sidemenu.html","css":"../frameworks/SideMenu.css","jsx":"../frameworks/SideMenu.jsx","vue2":"../frameworks/SideMenu.vue2.vue","vue3":"../frameworks/SideMenu.vue3.vue"},"sizes":{"html":4832,"css":2709,"jsx":3776,"vue2":5081,"vue3":5183},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Aurora Admin · SideMenu (H5)</title>\n<link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\">\n<link rel=\"stylesheet\" href=\"./SideMenu.css\">\n<style>\n  .demo { display: flex; gap: 24px; padding: 24px; background: var(--au-color-page-bg); font-family: var(--font-family); }\n  h1 { font-size: 20px; margin: 0 0 4px; color: var(--au-color-text-title); }\n  .sub { color: var(--au-color-text-secondary); margin: 0 0 16px; font-size: 12px; }\n  .col { background: var(--au-color-card-bg); border-radius: 8px; padding: 16px; }\n  .toggle { margin-bottom: 12px; font-size: 13px; color: var(--au-color-brand); cursor: pointer; user-select: none; }\n</style>\n</head>\n<body>\n<div class=\"demo\">\n  <div class=\"col\">\n    <h1>SideMenu</h1>\n    <p class=\"sub\">多级、图标、徽章、选中态+左指示条、折叠</p>\n    <div class=\"toggle\" id=\"toggle\">⇥ 折叠 / 展开</div>\n    <div class=\"aa-sidemenu\" role=\"navigation\" id=\"menu\"></div>\n  </div>\n</div>\n\n<script>\nconst ITEMS = [\n  { key: 'dashboard', label: '仪表盘', icon: '▦' },\n  { key: 'content', label: '内容管理', icon: '▤', children: [{ key: 'article', label: '文章' }, { key: 'comment', label: '评论' }, { key: 'tag', label: '标签' }] },\n  { key: 'user', label: '用户管理', icon: '◍', badge: 8, children: [{ key: 'ulist', label: '用户列表' }, { key: 'role', label: '角色权限' }] },\n  { key: 'system', label: '系统设置', icon: '⚙', children: [{ key: 'config', label: '基础配置' }, { key: 'log', label: '操作日志' }] },\n  { key: 'help', label: '帮助中心', icon: '?', disabled: true }\n];\n\nconst menu = document.getElementById('menu');\nlet active = 'article';\nlet openKeys = new Set(['content']);\nlet collapsed = false;\n\nfunction render() {\n  menu.classList.toggle('collapsed', collapsed);\n  menu.innerHTML = '';\n  ITEMS.forEach(it => {\n    const hasChild = it.children && it.children.length;\n    const isOpen = openKeys.has(it.key);\n    const el = document.createElement('div');\n    el.className = 'aa-menu-item' + (active === it.key ? ' is-active' : '') + (it.disabled ? ' is-disabled' : '') + (hasChild && isOpen ? ' is-open' : ''); el.setAttribute('role','menuitem'); el.setAttribute('tabindex','0');\n    el.dataset.key = it.key;\n    el.innerHTML = `<span class=\"aa-menu-icon\">${it.icon || ''}</span>` +\n      `<span class=\"aa-menu-label\">${it.label}</span>` +\n      (it.badge ? `<span class=\"aa-menu-badge\">${it.badge}</span>` : '') +\n      (hasChild ? `<span class=\"aa-menu-arrow\">›</span>` : '');\n    menu.appendChild(el);\n\n    if (hasChild && isOpen && !collapsed) {\n      const wrap = document.createElement('div');\n      wrap.className = 'aa-menu-children';\n      it.children.forEach(c => {\n        const cEl = document.createElement('div');\n        cEl.className = 'aa-menu-item' + (active === c.key ? ' is-active' : ''); cEl.setAttribute('role','menuitem'); cEl.setAttribute('tabindex','0');\n        cEl.dataset.key = c.key;\n        cEl.innerHTML = `<span class=\"aa-menu-label\">${c.label}</span>`;\n        wrap.appendChild(cEl);\n      });\n      menu.appendChild(wrap);\n    }\n  });\n}\n\nmenu.addEventListener('click', (e) => {\n  const item = e.target.closest('.aa-menu-item');\n  if (!item) return;\n  const key = item.dataset.key;\n  const it = ITEMS.find(x => x.key === key);\n  if (it && it.disabled) return;\n  if (it && it.children) {\n    if (openKeys.has(key)) openKeys.delete(key); else openKeys.add(key);\n  } else {\n    active = key;\n  }\n  render();\n});\n\n// 折叠态：悬浮顶层项弹出浮层\nlet pop = null;\nmenu.addEventListener('mouseover', (e) => {\n  if (!collapsed) return;\n  const item = e.target.closest('.aa-menu-item');\n  if (!item || item.closest('.aa-menu-children')) return;\n  const it = ITEMS.find(x => x.key === item.dataset.key);\n  if (!it) return;\n  if (pop) pop.remove();\n  pop = document.createElement('div');\n  pop.className = 'aa-menu-pop';\n  pop.style.top = item.offsetTop + 'px';\n  let html = `<div class=\"aa-menu-pop-title\">${it.label}</div>`;\n  if (it.children) it.children.forEach(c => {\n    html += `<div class=\"aa-menu-item ${active === c.key ? 'is-active' : ''}\" role=\"menuitem\" tabindex=\"0\" data-key=\"${c.key}\"><span class=\"aa-menu-label\">${c.label}</span></div>`;\n  }); else {\n    html += `<div class=\"aa-menu-item is-active\" role=\"menuitem\" tabindex=\"0\" data-key=\"${it.key}\"><span class=\"aa-menu-label\">${it.label}</span></div>`;\n  }\n  pop.innerHTML = html;\n  menu.appendChild(pop);\n});\nmenu.addEventListener('mouseleave', () => { if (pop) { pop.remove(); pop = null; } });\n\ndocument.getElementById('toggle').addEventListener('click', () => { collapsed = !collapsed; render(); });\nrender();\n</script>\n</body>\n</html>\n","css":"/* Aurora Admin SideMenu 样式 — 对齐 组件7.txt SideMenu：多级、图标、徽章、选中态#F0F5FF+左指示条、折叠 */\n\n.aa-sidemenu { width: 220px; background: var(--au-color-card-bg); border-right: 1px solid var(--au-color-border); font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); color: var(--au-color-text-body); user-select: none; }\n.aa-sidemenu.collapsed { width: 56px; }\n\n.aa-menu-item { position: relative; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; cursor: pointer; font-size: 14px; color: var(--au-color-text-body); transition: background .15s, color .15s; }\n.aa-menu-item:hover { background: var(--au-color-page-bg); }\n.aa-menu-item.is-active { background: var(--au-color-brand-bg); color: var(--au-color-brand); font-weight: 500; }\n.aa-menu-item.is-active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--au-color-brand); }\n.aa-menu-item.is-disabled { color: var(--au-color-text-disabled); cursor: not-allowed; }\n.aa-menu-item.is-disabled:hover { background: none; }\n\n.aa-menu-icon { width: 16px; text-align: center; flex-shrink: 0; font-size: 15px; }\n.aa-menu-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.aa-menu-badge { background: var(--au-color-error); color: var(--au-color-text-inverse); font-size: 11px; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; }\n.aa-menu-arrow { color: var(--au-color-text-secondary); font-size: 12px; transition: transform .15s; }\n.aa-menu-item.is-open > .aa-menu-arrow { transform: rotate(90deg); }\n\n.aa-menu-children { background: var(--au-color-table-header-bg); }\n.aa-menu-children .aa-menu-item { height: 40px; padding-left: 40px; font-size: 13px; }\n.aa-menu-children .aa-menu-item.is-active::before { display: none; }\n\n/* 折叠模式 */\n.aa-sidemenu.collapsed .aa-menu-label,\n.aa-sidemenu.collapsed .aa-menu-badge,\n.aa-sidemenu.collapsed .aa-menu-arrow { display: none; }\n.aa-sidemenu.collapsed .aa-menu-item { justify-content: center; padding: 0; }\n.aa-sidemenu.collapsed .aa-menu-children { display: none; }\n\n/* 折叠态悬浮浮层 */\n.aa-menu-pop { position: absolute; left: 56px; top: 0; min-width: 180px; background: var(--au-color-card-bg); border: 1px solid var(--au-color-border); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); padding: 4px 0; z-index: 200; }\n.aa-menu-pop-title { padding: 6px 16px; font-size: 12px; color: var(--au-color-text-secondary); }\n.aa-menu-pop .aa-menu-item { padding: 0 16px; }\n.aa-menu-pop .aa-menu-item::before { display: none; }\n","jsx":"import React, { useState } from 'react';\nimport './SideMenu.css';\n\n/**\n * Aurora Admin SideMenu（React）\n * 对齐 组件7.txt SideMenu 规范：多级、图标、徽章、选中态#F0F5FF+左指示条、折叠悬浮\n *\n * props:\n *  - value / defaultValue : 当前选中 key\n *  - items : [{ key, label, icon?, badge?, children?, disabled? }]\n *  - collapsed\n *  - onSelect(key)\n */\nexport default function SideMenu({ value, defaultValue = '', items = [], collapsed = false, onSelect }) {\n  const [active, setActive] = useState(value !== undefined ? value : defaultValue);\n  const [openKeys, setOpenKeys] = useState([]);\n  const [hoverKey, setHoverKey] = useState('');\n  const [popTop, setPopTop] = useState(0);\n  const current = value !== undefined ? value : active;\n\n  const select = (key) => { if (value === undefined) setActive(key); onSelect && onSelect(key); setHoverKey(''); };\n  const onTopClick = (it) => {\n    if (it.disabled) return;\n    if (it.children && it.children.length) {\n      if (collapsed) return;\n      setOpenKeys(openKeys.includes(it.key) ? openKeys.filter(k => k !== it.key) : [...openKeys, it.key]);\n    } else select(it.key);\n  };\n  const onHover = (it, e) => { if (collapsed && it.children) { setHoverKey(it.key); setPopTop(e.currentTarget.offsetTop); } };\n  const popItem = items.find(x => x.key === hoverKey) || null;\n\n  return (\n    <div className={`aa-sidemenu${collapsed ? ' collapsed' : ''}`} onMouseLeave={() => setHoverKey('')}>\n      {items.map(it => {\n        const hasChild = it.children && it.children.length;\n        const isOpen = openKeys.includes(it.key);\n        return (\n          <div key={it.key}>\n            <div\n              className={`aa-menu-item${current === it.key ? ' is-active' : ''}${it.disabled ? ' is-disabled' : ''}${hasChild && isOpen ? ' is-open' : ''}`}\n              onClick={() => onTopClick(it)}\n              onMouseEnter={(e) => onHover(it, e)}\n            >\n              <span className=\"aa-menu-icon\">{it.icon}</span>\n              <span className=\"aa-menu-label\">{it.label}</span>\n              {it.badge && <span className=\"aa-menu-badge\">{it.badge}</span>}\n              {hasChild && <span className=\"aa-menu-arrow\">›</span>}\n            </div>\n            {hasChild && isOpen && !collapsed && (\n              <div className=\"aa-menu-children\">\n                {it.children.map(c => (\n                  <div key={c.key} className={`aa-menu-item${current === c.key ? ' is-active' : ''}`} onClick={() => select(c.key)}>\n                    <span className=\"aa-menu-label\">{c.label}</span>\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>\n        );\n      })}\n\n      {collapsed && hoverKey && popItem && (\n        <div className=\"aa-menu-pop\" style={{ top: popTop }}>\n          <div className=\"aa-menu-pop-title\">{popItem.label}</div>\n          {popItem.children && popItem.children.length ? (\n            popItem.children.map(c => (\n              <div key={c.key} className={`aa-menu-item${current === c.key ? ' is-active' : ''}`} onClick={() => select(c.key)}>\n                <span className=\"aa-menu-label\">{c.label}</span>\n              </div>\n            ))\n          ) : (\n            <div className=\"aa-menu-item is-active\" onClick={() => select(popItem.key)}>\n              <span className=\"aa-menu-label\">{popItem.label}</span>\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/*\n用法示例：\nimport SideMenu from './SideMenu';\nconst items = [\n  { key: 'dashboard', label: '仪表盘', icon: '▦' },\n  { key: 'user', label: '用户管理', icon: '◍', badge: 8, children: [{ key: 'list', label: '用户列表' }] }\n];\n<SideMenu items={items} defaultValue=\"list\" collapsed={false} onSelect={setActive} />\n*/\n","vue2":"<template>\n  <div class=\"aa-sidemenu\" :class=\"{ collapsed }\" @mouseleave=\"hoverKey = ''\">\n    <div\n      v-for=\"it in items\" :key=\"it.key\"\n      class=\"aa-menu-item\"\n      :class=\"{ 'is-active': value === it.key, 'is-open': openKeys.indexOf(it.key) > -1, 'is-disabled': it.disabled }\"\n      @click=\"onTopClick(it)\"\n      @mouseenter=\"onHover(it, $event)\"\n    >\n      <span class=\"aa-menu-icon\">{{ it.icon }}</span>\n      <span class=\"aa-menu-label\">{{ it.label }}</span>\n      <span v-if=\"it.badge\" class=\"aa-menu-badge\">{{ it.badge }}</span>\n      <span v-if=\"it.children && it.children.length\" class=\"aa-menu-arrow\">›</span>\n    </div>\n\n    <template v-for=\"it in items\" :key=\"'c-' + it.key\">\n      <div v-if=\"it.children && it.children.length && openKeys.indexOf(it.key) > -1 && !collapsed\" class=\"aa-menu-children\">\n        <div\n          v-for=\"c in it.children\" :key=\"c.key\"\n          class=\"aa-menu-item\" :class=\"{ 'is-active': value === c.key }\"\n          @click=\"select(c.key)\"\n        >\n          <span class=\"aa-menu-label\">{{ c.label }}</span>\n        </div>\n      </div>\n    </template>\n\n    <div v-if=\"collapsed && hoverKey && popItem\" class=\"aa-menu-pop\" :style=\"{ top: popTop + 'px' }\">\n      <div class=\"aa-menu-pop-title\">{{ popItem.label }}</div>\n      <template v-if=\"popItem.children && popItem.children.length\">\n        <div\n          v-for=\"c in popItem.children\" :key=\"c.key\"\n          class=\"aa-menu-item\" :class=\"{ 'is-active': value === c.key }\"\n          @click=\"select(c.key)\"\n        ><span class=\"aa-menu-label\">{{ c.label }}</span></div>\n      </template>\n      <div v-else class=\"aa-menu-item is-active\" @click=\"select(popItem.key)\"><span class=\"aa-menu-label\">{{ popItem.label }}</span></div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaSideMenu',\n  props: {\n    value: { type: String, default: '' },              // 当前选中 key\n    items: { type: Array, required: true },            // [{ key, label, icon?, badge?, children?, disabled? }]\n    collapsed: { type: Boolean, default: false }\n  },\n  data() { return { openKeys: [], hoverKey: '', popTop: 0 }; },\n  computed: {\n    popItem() { return this.items.find(x => x.key === this.hoverKey) || null; }\n  },\n  methods: {\n    onHover(it, e) { if (this.collapsed && it.children) { this.hoverKey = it.key; this.popTop = e.currentTarget.offsetTop; } },\n    onTopClick(it) {\n      if (it.disabled) return;\n      if (it.children && it.children.length) {\n        if (this.collapsed) return;\n        this.openKeys = this.openKeys.indexOf(it.key) > -1 ? this.openKeys.filter(k => k !== it.key) : [...this.openKeys, it.key];\n      } else { this.select(it.key); }\n    },\n    select(key) { this.$emit('input', key); this.$emit('select', key); this.hoverKey = ''; }\n  }\n};\n</script>\n\n<!-- 样式对齐 组件7.txt SideMenu 规范 -->\n<style>\n.aa-sidemenu { width: 220px; background: #fff; border-right: 1px solid #E8ECF1; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); color: #262626; user-select: none; }\n.aa-sidemenu.collapsed { width: 56px; }\n.aa-menu-item { position: relative; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; cursor: pointer; font-size: 14px; color: #262626; transition: background .15s, color .15s; }\n.aa-menu-item:hover { background: #F5F7FA; }\n.aa-menu-item.is-active { background: #F0F5FF; color: #2F54EB; font-weight: 500; }\n.aa-menu-item.is-active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #2F54EB; }\n.aa-menu-item.is-disabled { color: #BFBFBF; cursor: not-allowed; }\n.aa-menu-item.is-disabled:hover { background: none; }\n.aa-menu-icon { width: 16px; text-align: center; flex-shrink: 0; font-size: 15px; }\n.aa-menu-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.aa-menu-badge { background: #CF1322; color: #fff; font-size: 11px; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; }\n.aa-menu-arrow { color: #6E6E6E; font-size: 12px; transition: transform .15s; }\n.aa-menu-item.is-open > .aa-menu-arrow { transform: rotate(90deg); }\n.aa-menu-children { background: #FAFAFA; }\n.aa-menu-children .aa-menu-item { height: 40px; padding-left: 40px; font-size: 13px; }\n.aa-menu-children .aa-menu-item.is-active::before { display: none; }\n.aa-sidemenu.collapsed .aa-menu-label,\n.aa-sidemenu.collapsed .aa-menu-badge,\n.aa-sidemenu.collapsed .aa-menu-arrow { display: none; }\n.aa-sidemenu.collapsed .aa-menu-item { justify-content: center; padding: 0; }\n.aa-sidemenu.collapsed .aa-menu-children { display: none; }\n.aa-menu-pop { position: absolute; left: 56px; top: 0; min-width: 180px; background: #fff; border: 1px solid #E8ECF1; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); padding: 4px 0; z-index: 200; }\n.aa-menu-pop-title { padding: 6px 16px; font-size: 12px; color: #6E6E6E; }\n.aa-menu-pop .aa-menu-item { padding: 0 16px; }\n.aa-menu-pop .aa-menu-item::before { display: none; }\n</style>\n","vue3":"<template>\n  <div class=\"aa-sidemenu\" :class=\"{ collapsed }\" @mouseleave=\"hoverKey = ''\">\n    <div\n      v-for=\"it in items\" :key=\"it.key\"\n      class=\"aa-menu-item\"\n      :class=\"{ 'is-active': modelValue === it.key, 'is-open': openKeys.includes(it.key), 'is-disabled': it.disabled }\"\n      @click=\"onTopClick(it)\"\n      @mouseenter=\"onHover(it, $event)\"\n    >\n      <span class=\"aa-menu-icon\">{{ it.icon }}</span>\n      <span class=\"aa-menu-label\">{{ it.label }}</span>\n      <span v-if=\"it.badge\" class=\"aa-menu-badge\">{{ it.badge }}</span>\n      <span v-if=\"it.children && it.children.length\" class=\"aa-menu-arrow\">›</span>\n    </div>\n\n    <template v-for=\"it in items\" :key=\"'c-' + it.key\">\n      <div v-if=\"it.children && it.children.length && openKeys.includes(it.key) && !collapsed\" class=\"aa-menu-children\">\n        <div\n          v-for=\"c in it.children\" :key=\"c.key\"\n          class=\"aa-menu-item\" :class=\"{ 'is-active': modelValue === c.key }\"\n          @click=\"select(c.key)\"\n        >\n          <span class=\"aa-menu-label\">{{ c.label }}</span>\n        </div>\n      </div>\n    </template>\n\n    <!-- 折叠态悬浮浮层 -->\n    <div v-if=\"collapsed && hoverKey && popItem\" class=\"aa-menu-pop\" :style=\"{ top: popTop + 'px' }\">\n      <div class=\"aa-menu-pop-title\">{{ popItem.label }}</div>\n      <template v-if=\"popItem.children && popItem.children.length\">\n        <div\n          v-for=\"c in popItem.children\" :key=\"c.key\"\n          class=\"aa-menu-item\" :class=\"{ 'is-active': modelValue === c.key }\"\n          @click=\"select(c.key)\"\n        ><span class=\"aa-menu-label\">{{ c.label }}</span></div>\n      </template>\n      <div v-else class=\"aa-menu-item is-active\" @click=\"select(popItem.key)\"><span class=\"aa-menu-label\">{{ popItem.label }}</span></div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed } from 'vue';\n\nconst props = defineProps({\n  modelValue: { type: String, default: '' },     // 当前选中 key\n  items: { type: Array, required: true },         // [{ key, label, icon?, badge?, children?, disabled? }]\n  collapsed: { type: Boolean, default: false }\n});\nconst emit = defineEmits(['update:modelValue', 'select']);\n\nconst openKeys = ref([]);\nconst hoverKey = ref('');\nconst popItem = computed(() => props.items.find(x => x.key === hoverKey.value) || null);\nconst popTop = ref(0);\n\nfunction onHover(it, e) {\n  if (props.collapsed && it.children) { hoverKey.value = it.key; popTop.value = e.currentTarget.offsetTop; }\n}\nfunction onTopClick(it) {\n  if (it.disabled) return;\n  if (it.children && it.children.length) {\n    if (props.collapsed) return;\n    openKeys.value = openKeys.value.includes(it.key) ? openKeys.value.filter(k => k !== it.key) : [...openKeys.value, it.key];\n  } else {\n    select(it.key);\n  }\n}\nfunction select(key) {\n  emit('update:modelValue', key);\n  emit('select', key);\n  hoverKey.value = '';\n}\n</script>\n\n<!-- 样式对齐 组件7.txt SideMenu 规范 -->\n<style scoped>\n.aa-sidemenu { width: 220px; background: #fff; border-right: 1px solid #E8ECF1; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); color: #262626; user-select: none; }\n.aa-sidemenu.collapsed { width: 56px; }\n.aa-menu-item { position: relative; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; cursor: pointer; font-size: 14px; color: #262626; transition: background .15s, color .15s; }\n.aa-menu-item:hover { background: #F5F7FA; }\n.aa-menu-item.is-active { background: #F0F5FF; color: #2F54EB; font-weight: 500; }\n.aa-menu-item.is-active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #2F54EB; }\n.aa-menu-item.is-disabled { color: #BFBFBF; cursor: not-allowed; }\n.aa-menu-item.is-disabled:hover { background: none; }\n.aa-menu-icon { width: 16px; text-align: center; flex-shrink: 0; font-size: 15px; }\n.aa-menu-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.aa-menu-badge { background: #CF1322; color: #fff; font-size: 11px; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; }\n.aa-menu-arrow { color: #6E6E6E; font-size: 12px; transition: transform .15s; }\n.aa-menu-item.is-open > .aa-menu-arrow { transform: rotate(90deg); }\n.aa-menu-children { background: #FAFAFA; }\n.aa-menu-children .aa-menu-item { height: 40px; padding-left: 40px; font-size: 13px; }\n.aa-menu-children .aa-menu-item.is-active::before { display: none; }\n.aa-sidemenu.collapsed .aa-menu-label,\n.aa-sidemenu.collapsed .aa-menu-badge,\n.aa-sidemenu.collapsed .aa-menu-arrow { display: none; }\n.aa-sidemenu.collapsed .aa-menu-item { justify-content: center; padding: 0; }\n.aa-sidemenu.collapsed .aa-menu-children { display: none; }\n.aa-menu-pop { position: absolute; left: 56px; top: 0; min-width: 180px; background: #fff; border: 1px solid #E8ECF1; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); padding: 4px 0; z-index: 200; }\n.aa-menu-pop-title { padding: 6px 16px; font-size: 12px; color: #6E6E6E; }\n.aa-menu-pop .aa-menu-item { padding: 0 16px; }\n.aa-menu-pop .aa-menu-item::before { display: none; }\n</style>\n"}},{"slug":"topmenu","name":"顶部菜单 TopMenu","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/topmenu.json","category":"navigation","specLines":["- 水平导航菜单","- 支持多级下拉","- 选中态底部 2px 品牌色指示条","- 菜单项可带图标、徽章","- 适用于顶部导航布局"],"specSummary":"- 水平导航菜单","contract":{"variants":["选中项（底部指示条）","默认项","带徽章","多级下拉"],"dims":[{"name":"state","values":["default","selected","disabled"]},{"name":"feature","values":["icon","badge","children"]}],"unknowns":["菜单项的水平内边距","下拉面板与侧边菜单是否共用样式"],"anatomy":{"item":"水平菜单项","selected":"选中态：底部 2px 品牌色指示条","dropdown":"支持多级下拉"},"doNot":["响应式折叠为汉堡菜单的断点"],"usage":["水平导航菜单","支持多级下拉","选中态底部 2px 品牌色指示条","菜单项可带图标、徽章","适用于顶部导航布局"],"structure":{"indicatorHeight":"2px","indicatorColor":"品牌色"}},"files":{"html":"../frameworks/TopMenu.html","css":"../frameworks/TopMenu.css","jsx":"../frameworks/TopMenu.jsx","vue2":"../frameworks/TopMenu.vue2.vue","vue3":"../frameworks/TopMenu.vue3.vue"},"sizes":{"html":2277,"css":1766,"jsx":1360,"vue2":1190,"vue3":1118},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · TopMenu（普通 H5）</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"TopMenu.css\" />\n</head>\n<body>\n  <div class=\"aa-topmenu\" role=\"navigation\" id=\"app\"></div>\n\n  <script>\n    var DATA = [\n      { label: '工作台', key: 'home' },\n      { label: '订单', key: 'order', badge: '3', children: [\n        { label: '全部订单', key: 'order-all' },\n        { label: '待发货', key: 'order-ship' },\n        { label: '退款', key: 'order-refund' }\n      ] },\n      { label: '商品', key: 'goods', children: [\n        { label: '商品列表', key: 'goods-list' },\n        { label: '分类管理', key: 'goods-cat' }\n      ] },\n      { label: '数据', key: 'data' },\n      { label: '设置', key: 'setting' }\n    ];\n    var active = 'order-all';\n\n    function render() {\n      var root = document.getElementById('app');\n      root.innerHTML = DATA.map(function (it) {\n        var subs = (it.children || []).map(function (s) {\n          return '<a class=\"aa-topmenu-sub ' + (s.key === active ? 'is-active' : '') + '\" role=\"navigation\" data-key=\"' + s.key + '\">' + s.label + '</a>';\n        }).join('');\n        var dropdown = it.children ? '<div class=\"aa-topmenu-dropdown\" role=\"navigation\">' + subs + '</div>' : '';\n        var badge = it.badge ? '<span class=\"aa-topmenu-badge\">' + it.badge + '</span>' : '';\n        var caret = it.children ? '<span class=\"aa-topmenu-caret\">▾</span>' : '';\n        var topActive = it.key === active || (it.children || []).some(function (s) { return s.key === active; });\n        return '<div class=\"aa-topmenu-item ' + (topActive ? 'is-active' : '') + '\" role=\"menuitem\" tabindex=\"0\" data-key=\"' + it.key + '\">' +\n          '<span>' + it.label + '</span>' + badge + caret + dropdown + '</div>';\n      }).join('');\n\n      root.querySelectorAll('[data-key]').forEach(function (el) {\n        el.addEventListener('click', function (e) {\n          e.stopPropagation();\n          active = el.dataset.key;\n          render();\n        });\n      });\n    }\n    render();\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin TopMenu 样式 — 对齐 组件7.txt TopMenu：水平导航，选中态底部 2px 品牌色指示条，支持多级下拉 */\n\n.aa-topmenu { display: flex; background: var(--au-color-card-bg); border-bottom: 1px solid var(--au-color-border); padding: 0 8px;\n  font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); }\n.aa-topmenu-item { position: relative; display: flex; align-items: center; gap: 6px; height: 48px;\n  padding: 0 16px; cursor: pointer; color: var(--au-color-text-body); font-size: 14px; white-space: nowrap; }\n.aa-topmenu-item:hover { color: var(--au-color-brand); }\n.aa-topmenu-item.is-active { color: var(--au-color-brand); font-weight: 500; }\n.aa-topmenu-item.is-active::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--au-color-brand); }\n.aa-topmenu-badge { background: var(--au-color-error); color: var(--au-color-text-inverse); font-size: 11px; line-height: 1; border-radius: 8px; padding: 2px 5px; }\n.aa-topmenu-caret { font-size: 10px; color: var(--au-color-text-secondary); }\n.aa-topmenu-dropdown { position: absolute; top: 48px; left: 0; min-width: 160px; background: var(--au-color-card-bg);\n  border: 1px solid var(--au-color-border); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); padding: 4px; display: none; z-index: 50; }\n.aa-topmenu-item:hover > .aa-topmenu-dropdown { display: block; }\n.aa-topmenu-sub { display: block; padding: 8px 12px; font-size: 13px; color: var(--au-color-text-body); border-radius: 4px; }\n.aa-topmenu-sub:hover { background: var(--au-color-brand-bg); color: var(--au-color-brand); }\n.aa-topmenu-sub.is-active { color: var(--au-color-brand); background: var(--au-color-brand-bg); }\n","jsx":"import React, { useState } from 'react';\nimport './TopMenu.css';\n\nexport default function TopMenu({ items = [], activeKey = '', onChange }) {\n  const [active, setActive] = useState(activeKey);\n\n  function isActive(it) {\n    if (it.key === active) return true;\n    return (it.children || []).some(s => s.key === active);\n  }\n  function select(it) {\n    if (!it.children) {\n      setActive(it.key);\n      onChange && onChange(it.key);\n    }\n  }\n\n  return (\n    <div className=\"aa-topmenu\">\n      {items.map((it, i) => (\n        <div\n          key={i}\n          className={'aa-topmenu-item' + (isActive(it) ? ' is-active' : '')}\n          onClick={() => select(it)}\n        >\n          <span>{it.label}</span>\n          {it.badge ? <span className=\"aa-topmenu-badge\">{it.badge}</span> : null}\n          {it.children ? <span className=\"aa-topmenu-caret\">▾</span> : null}\n          {it.children ? (\n            <div className=\"aa-topmenu-dropdown\">\n              {it.children.map((s, si) => (\n                <a\n                  key={si}\n                  className={'aa-topmenu-sub' + (s.key === active ? ' is-active' : '')}\n                  onClick={e => { e.stopPropagation(); select(s); }}\n                >\n                  {s.label}\n                </a>\n              ))}\n            </div>\n          ) : null}\n        </div>\n      ))}\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-topmenu\">\n    <div class=\"aa-topmenu-item\" v-for=\"(it, i) in items\" :key=\"i\"\n         :class=\"isActive(it) ? 'is-active' : ''\" @click=\"select(it)\">\n      <span>{{ it.label }}</span>\n      <span v-if=\"it.badge\" class=\"aa-topmenu-badge\">{{ it.badge }}</span>\n      <span v-if=\"it.children\" class=\"aa-topmenu-caret\">▾</span>\n      <div v-if=\"it.children\" class=\"aa-topmenu-dropdown\">\n        <a v-for=\"(s, si) in it.children\" :key=\"si\" class=\"aa-topmenu-sub\"\n           :class=\"s.key === activeKey ? 'is-active' : ''\" @click.stop=\"select(s)\">{{ s.label }}</a>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaTopMenu',\n  props: {\n    items: { type: Array, default: function () { return []; } },\n    activeKey: { type: String, default: '' }\n  },\n  methods: {\n    isActive: function (it) {\n      if (it.key === this.activeKey) return true;\n      return (it.children || []).some(function (s) { return s.key === this.activeKey; }, this);\n    },\n    select: function (it) {\n      if (!it.children) this.$emit('update:activeKey', it.key);\n      this.$emit('change', it.key);\n    }\n  }\n};\n</script>\n\n<style src=\"./TopMenu.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-topmenu\">\n    <div class=\"aa-topmenu-item\" v-for=\"(it, i) in items\" :key=\"i\"\n         :class=\"isActive(it) ? 'is-active' : ''\" @click=\"select(it)\">\n      <span>{{ it.label }}</span>\n      <span v-if=\"it.badge\" class=\"aa-topmenu-badge\">{{ it.badge }}</span>\n      <span v-if=\"it.children\" class=\"aa-topmenu-caret\">▾</span>\n      <div v-if=\"it.children\" class=\"aa-topmenu-dropdown\">\n        <a v-for=\"(s, si) in it.children\" :key=\"si\" class=\"aa-topmenu-sub\"\n           :class=\"s.key === activeKey ? 'is-active' : ''\" @click.stop=\"select(s)\">{{ s.label }}</a>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nconst props = defineProps({\n  items: { type: Array, default: () => [] },\n  activeKey: { type: String, default: '' }\n});\nconst emit = defineEmits(['update:activeKey', 'change']);\n\nfunction isActive(it) {\n  if (it.key === props.activeKey) return true;\n  return (it.children || []).some(s => s.key === props.activeKey);\n}\nfunction select(it) {\n  if (!it.children) emit('update:activeKey', it.key);\n  emit('change', it.key);\n}\n</script>\n\n<style src=\"./TopMenu.css\"></style>\n"}},{"slug":"mixednavigation","name":"混合导航 MixedNavigation","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/mixednavigation.json","category":"navigation","specLines":["- 顶部一级菜单 + 侧边栏二级菜单","- 顶部菜单切换时侧边栏内容变化","- 支持权限过滤","- 菜单状态记忆","- 适用于复杂后台"],"specSummary":"- 顶部一级菜单 + 侧边栏二级菜单","contract":{"variants":["一级选中 + 二级选中","一级选中 + 二级默认","未选中的一级（二级隐藏）"],"dims":[{"name":"level1State","values":["active","default"]},{"name":"level2State","values":["active","default","hidden"]}],"unknowns":["侧边栏的默认宽度","状态记忆的持久化范围"],"anatomy":{"top":"顶部一级菜单","side":"侧边栏二级菜单","sync":"顶部菜单切换时侧边栏内容变化","memory":"菜单状态记忆"},"doNot":["三级及以上菜单的呈现","顶部菜单溢出处理"],"usage":["顶部一级菜单 + 侧边栏二级菜单","顶部菜单切换时侧边栏内容变化","支持权限过滤","菜单状态记忆","适用于复杂后台"],"structure":{"layout":"顶部一级 + 侧边二级"}},"files":{"html":"../frameworks/MixedNavigation.html","css":"../frameworks/MixedNavigation.css","jsx":"../frameworks/MixedNavigation.jsx","vue2":"../frameworks/MixedNavigation.vue2.vue","vue3":"../frameworks/MixedNavigation.vue3.vue"},"sizes":{"html":2816,"css":1640,"jsx":1829,"vue2":1716,"vue3":1672},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · MixedNavigation</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"./MixedNavigation.css\" />\n</head>\n<body>\n  <div class=\"aa-page\">\n    <h2 class=\"aa-h2\">MixedNavigation 混合导航</h2>\n    <p class=\"aa-desc\">顶部一级菜单 + 侧边栏二级菜单，切换顶部项时侧边栏内容联动变化。</p>\n\n    <div class=\"aa-demo\">\n      <div class=\"aa-mixed\" id=\"mixed\">\n        <div class=\"aa-mixed-top\" id=\"top\"></div>\n        <div class=\"aa-mixed-body\">\n          <div class=\"aa-mixed-side\" id=\"side\"></div>\n          <div class=\"aa-mixed-content\" id=\"content\"></div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <script>\n    var menu = [\n      { name: '工作台', items: [{ name: '概览', desc: '数据看板总览' }, { name: '待办', desc: '我的待处理任务' }, { name: '报表', desc: '统计报表入口' }] },\n      { name: '系统管理', items: [{ name: '用户管理', desc: '用户增删改查' }, { name: '角色管理', desc: '角色与权限分配' }, { name: '菜单管理', desc: '导航菜单配置' }] },\n      { name: '业务中心', items: [{ name: '订单', desc: '订单列表与详情' }, { name: '商品', desc: '商品上下架' }, { name: '库存', desc: '库存预警' }] }\n    ];\n    var topIdx = 0, sideIdx = 0;\n    var topEl = document.getElementById('top');\n    var sideEl = document.getElementById('side');\n    var contentEl = document.getElementById('content');\n\n    menu.forEach(function (m, i) {\n      var b = document.createElement('div');\n      b.className = 'aa-mixed-topitem' + (i === 0 ? ' is-active' : ''); b.setAttribute('role','menuitem'); b.setAttribute('tabindex','0');\n      b.textContent = m.name;\n      b.onclick = function () { topIdx = i; sideIdx = 0; render(); };\n      topEl.appendChild(b);\n    });\n\n    function render() {\n      Array.prototype.forEach.call(topEl.children, function (c, i) { c.classList.toggle('is-active', i === topIdx); });\n      var cur = menu[topIdx];\n      sideEl.innerHTML = cur.items.map(function (it, i) {\n        return '<div class=\"aa-mixed-sideitem' + (i === sideIdx ? ' is-active' : '') + '\" role=\"menuitem\" tabindex=\"0\" data-i=\"' + i + '\">' + it.name + '</div>';\n      }).join('');\n      var item = cur.items[sideIdx];\n      contentEl.innerHTML = '<h4>' + cur.name + ' / ' + item.name + '</h4><div>' + item.desc + '</div>';\n    }\n    sideEl.addEventListener('click', function (e) {\n      var t = e.target.closest('.aa-mixed-sideitem');\n      if (!t) return;\n      sideIdx = parseInt(t.dataset.i, 10);\n      render();\n    });\n    render();\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin MixedNavigation 样式 — 顶部一级 + 侧边二级混合导航 */\n.aa-mixed { font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); border: 1px solid var(--au-color-border); border-radius: 8px; overflow: hidden; background: var(--au-color-card-bg); }\n.aa-mixed-top { display: flex; gap: 4px; background: var(--au-color-card-bg); border-bottom: 1px solid var(--au-color-border); padding: 0 8px; }\n.aa-mixed-topitem { padding: 12px 16px; cursor: pointer; color: var(--au-color-text-body); font-size: 14px; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }\n.aa-mixed-topitem:hover { color: var(--au-color-brand); }\n.aa-mixed-topitem.is-active { color: var(--au-color-brand); border-bottom-color: var(--au-color-brand); font-weight: 600; }\n.aa-mixed-body { display: flex; min-height: 240px; }\n.aa-mixed-side { width: 168px; background: var(--au-color-table-header-bg); border-right: 1px solid var(--au-color-border); padding: 8px 0; }\n.aa-mixed-sideitem { padding: 10px 16px; cursor: pointer; color: var(--au-color-text-body); font-size: 14px; border-left: 3px solid transparent; transition: background .15s, color .15s; }\n.aa-mixed-sideitem:hover { background: var(--au-color-page-bg); }\n.aa-mixed-sideitem.is-active { background: var(--au-color-brand-bg); color: var(--au-color-brand); border-left-color: var(--au-color-brand); font-weight: 500; }\n.aa-mixed-content { flex: 1; padding: 18px 22px; color: var(--au-color-text-tertiary); font-size: 14px; line-height: 1.7; }\n.aa-mixed-content h4 { margin: 0 0 6px; color: var(--au-color-text-title); }\n","jsx":"import React, { useState } from 'react';\nimport './MixedNavigation.css';\n\nconst DEFAULT_MENU = [\n  { name: '工作台', items: [{ name: '概览', desc: '数据看板总览' }, { name: '待办', desc: '我的待处理任务' }, { name: '报表', desc: '统计报表入口' }] },\n  { name: '系统管理', items: [{ name: '用户管理', desc: '用户增删改查' }, { name: '角色管理', desc: '角色与权限分配' }, { name: '菜单管理', desc: '导航菜单配置' }] },\n  { name: '业务中心', items: [{ name: '订单', desc: '订单列表与详情' }, { name: '商品', desc: '商品上下架' }, { name: '库存', desc: '库存预警' }] }\n];\n\nexport default function MixedNavigation({ menu = DEFAULT_MENU }) {\n  const [topIdx, setTopIdx] = useState(0);\n  const [sideIdx, setSideIdx] = useState(0);\n  const cur = menu[topIdx];\n\n  return (\n    <div className=\"aa-mixed\">\n      <div className=\"aa-mixed-top\">\n        {menu.map((m, i) => (\n          <div\n            key={i}\n            className={'aa-mixed-topitem' + (topIdx === i ? ' is-active' : '')}\n            onClick={() => {\n              setTopIdx(i);\n              setSideIdx(0);\n            }}\n          >\n            {m.name}\n          </div>\n        ))}\n      </div>\n      <div className=\"aa-mixed-body\">\n        <div className=\"aa-mixed-side\">\n          {cur.items.map((it, i) => (\n            <div\n              key={i}\n              className={'aa-mixed-sideitem' + (sideIdx === i ? ' is-active' : '')}\n              onClick={() => setSideIdx(i)}\n            >\n              {it.name}\n            </div>\n          ))}\n        </div>\n        <div className=\"aa-mixed-content\">\n          <h4>\n            {cur.name} / {cur.items[sideIdx].name}\n          </h4>\n          <div>{cur.items[sideIdx].desc}</div>\n        </div>\n      </div>\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-mixed\">\n    <div class=\"aa-mixed-top\">\n      <div\n        v-for=\"(m, i) in menu\"\n        :key=\"i\"\n        class=\"aa-mixed-topitem\"\n        :class=\"{ 'is-active': topIdx === i }\"\n        @click=\"selectTop(i)\"\n      >{{ m.name }}</div>\n    </div>\n    <div class=\"aa-mixed-body\">\n      <div class=\"aa-mixed-side\">\n        <div\n          v-for=\"(it, i) in menu[topIdx].items\"\n          :key=\"i\"\n          class=\"aa-mixed-sideitem\"\n          :class=\"{ 'is-active': sideIdx === i }\"\n          @click=\"sideIdx = i\"\n        >{{ it.name }}</div>\n      </div>\n      <div class=\"aa-mixed-content\">\n        <h4>{{ menu[topIdx].name }} / {{ menu[topIdx].items[sideIdx].name }}</h4>\n        <div>{{ menu[topIdx].items[sideIdx].desc }}</div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaMixedNavigation',\n  props: {\n    menu: {\n      type: Array,\n      default: () => [\n        { name: '工作台', items: [{ name: '概览', desc: '数据看板总览' }, { name: '待办', desc: '我的待处理任务' }, { name: '报表', desc: '统计报表入口' }] },\n        { name: '系统管理', items: [{ name: '用户管理', desc: '用户增删改查' }, { name: '角色管理', desc: '角色与权限分配' }, { name: '菜单管理', desc: '导航菜单配置' }] },\n        { name: '业务中心', items: [{ name: '订单', desc: '订单列表与详情' }, { name: '商品', desc: '商品上下架' }, { name: '库存', desc: '库存预警' }] }\n      ]\n    }\n  },\n  data() {\n    return { topIdx: 0, sideIdx: 0 };\n  },\n  methods: {\n    selectTop(i) {\n      this.topIdx = i;\n      this.sideIdx = 0;\n    }\n  }\n};\n</script>\n\n<style src=\"./MixedNavigation.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-mixed\">\n    <div class=\"aa-mixed-top\">\n      <div\n        v-for=\"(m, i) in menu\"\n        :key=\"i\"\n        class=\"aa-mixed-topitem\"\n        :class=\"{ 'is-active': topIdx === i }\"\n        @click=\"selectTop(i)\"\n      >{{ m.name }}</div>\n    </div>\n    <div class=\"aa-mixed-body\">\n      <div class=\"aa-mixed-side\">\n        <div\n          v-for=\"(it, i) in menu[topIdx].items\"\n          :key=\"i\"\n          class=\"aa-mixed-sideitem\"\n          :class=\"{ 'is-active': sideIdx === i }\"\n          @click=\"sideIdx = i\"\n        >{{ it.name }}</div>\n      </div>\n      <div class=\"aa-mixed-content\">\n        <h4>{{ menu[topIdx].name }} / {{ menu[topIdx].items[sideIdx].name }}</h4>\n        <div>{{ menu[topIdx].items[sideIdx].desc }}</div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\n\nconst props = defineProps({\n  menu: {\n    type: Array,\n    default: () => [\n      { name: '工作台', items: [{ name: '概览', desc: '数据看板总览' }, { name: '待办', desc: '我的待处理任务' }, { name: '报表', desc: '统计报表入口' }] },\n      { name: '系统管理', items: [{ name: '用户管理', desc: '用户增删改查' }, { name: '角色管理', desc: '角色与权限分配' }, { name: '菜单管理', desc: '导航菜单配置' }] },\n      { name: '业务中心', items: [{ name: '订单', desc: '订单列表与详情' }, { name: '商品', desc: '商品上下架' }, { name: '库存', desc: '库存预警' }] }\n    ]\n  }\n});\nconst topIdx = ref(0);\nconst sideIdx = ref(0);\nfunction selectTop(i) {\n  topIdx.value = i;\n  sideIdx.value = 0;\n}\n</script>\n\n<style src=\"./MixedNavigation.css\"></style>\n"}},{"slug":"quicknav","name":"快捷导航 QuickNav","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/quicknav.json","category":"navigation","specLines":["- 常用页面快捷入口","- 可配置为图标网格、列表或下拉","- 支持拖拽排序","- 点击跳转","- 显示在工作台或侧边栏顶部"],"specSummary":"- 常用页面快捷入口","contract":{"variants":["图标网格（可拖拽排序）","列表形式","下拉形式"],"dims":[{"name":"layout","values":["grid","list","dropdown"]},{"name":"draggable","values":["true","false"]}],"unknowns":["网格的列数与图标尺寸","可见快捷项的上限"],"anatomy":{"item":"快捷入口项","placement":"显示在工作台或侧边栏顶部","action":"点击跳转"},"doNot":["快捷项的添加与删除流程"],"usage":["常用页面快捷入口","可配置为图标网格、列表或下拉","支持拖拽排序","点击跳转","显示在工作台或侧边栏顶部"],"structure":{"layouts":"网格 / 列表 / 下拉","order":"可拖拽排序"}},"files":{"html":"../frameworks/QuickNav.html","css":"../frameworks/QuickNav.css","jsx":"../frameworks/QuickNav.jsx","vue2":"../frameworks/QuickNav.vue2.vue","vue3":"../frameworks/QuickNav.vue3.vue"},"sizes":{"html":1716,"css":857,"jsx":833,"vue2":892,"vue3":884},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · QuickNav</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"./QuickNav.css\" />\n</head>\n<body>\n  <div class=\"aa-page\">\n    <h2 class=\"aa-h2\">QuickNav 快捷导航</h2>\n    <p class=\"aa-desc\">常用页面快捷入口，图标网格，点击跳转。</p>\n\n    <div class=\"aa-demo\">\n      <div class=\"aa-demo__title\">工作台快捷入口</div>\n      <div class=\"aa-quicknav\" role=\"navigation\" id=\"quick\"></div>\n      <p class=\"aa-code-tip\" id=\"out\">点击任意入口试试</p>\n    </div>\n  </div>\n\n  <script>\n    var items = [\n      { icon: '📊', label: '数据看板' },\n      { icon: '👥', label: '用户管理' },\n      { icon: '📦', label: '订单管理' },\n      { icon: '⚙️', label: '系统设置' },\n      { icon: '📝', label: '审批中心' },\n      { icon: '🔔', label: '消息通知' },\n      { icon: '📁', label: '文件中心' },\n      { icon: '🛡️', label: '权限管理' }\n    ];\n    var root = document.getElementById('quick');\n    var out = document.getElementById('out');\n    items.forEach(function (it) {\n      var el = document.createElement('div');\n      el.className = 'aa-quicknav-item'; el.setAttribute('role','menuitem'); el.setAttribute('tabindex','0');\n      el.innerHTML = '<div class=\"aa-quicknav-icon\">' + it.icon + '</div><div class=\"aa-quicknav-label\">' + it.label + '</div>';\n      el.onclick = function () { out.textContent = '跳转到：' + it.label; };\n      root.appendChild(el);\n    });\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin QuickNav 样式 — 常用页面快捷入口 */\n.aa-quicknav { font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); display: flex; flex-wrap: wrap; gap: 6px; }\n.aa-quicknav-item { width: 92px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; border-radius: 8px; cursor: pointer; transition: background .15s; }\n.aa-quicknav-item:hover { background: var(--au-color-brand-bg); }\n.aa-quicknav-icon { width: 42px; height: 42px; border-radius: 12px; background: var(--au-color-brand-bg); color: var(--au-color-brand); display: flex; align-items: center; justify-content: center; font-size: 20px; }\n.aa-quicknav-label { font-size: 13px; color: var(--au-color-text-body); }\n.aa-quicknav-empty { color: var(--au-color-text-secondary); font-size: 13px; padding: 12px; }\n","jsx":"import React from 'react';\nimport './QuickNav.css';\n\nconst DEFAULT_ITEMS = [\n  { icon: '📊', label: '数据看板' },\n  { icon: '👥', label: '用户管理' },\n  { icon: '📦', label: '订单管理' },\n  { icon: '⚙️', label: '系统设置' },\n  { icon: '📝', label: '审批中心' },\n  { icon: '🔔', label: '消息通知' },\n  { icon: '📁', label: '文件中心' },\n  { icon: '🛡️', label: '权限管理' }\n];\n\nexport default function QuickNav({ items = DEFAULT_ITEMS, onSelect }) {\n  return (\n    <div className=\"aa-quicknav\">\n      {items.map((it, i) => (\n        <div key={i} className=\"aa-quicknav-item\" onClick={() => onSelect && onSelect(it)}>\n          <div className=\"aa-quicknav-icon\">{it.icon}</div>\n          <div className=\"aa-quicknav-label\">{it.label}</div>\n        </div>\n      ))}\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-quicknav\">\n    <div\n      v-for=\"(it, i) in items\"\n      :key=\"i\"\n      class=\"aa-quicknav-item\"\n      @click=\"$emit('select', it)\"\n    >\n      <div class=\"aa-quicknav-icon\">{{ it.icon }}</div>\n      <div class=\"aa-quicknav-label\">{{ it.label }}</div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaQuickNav',\n  props: {\n    items: {\n      type: Array,\n      default: () => [\n        { icon: '📊', label: '数据看板' },\n        { icon: '👥', label: '用户管理' },\n        { icon: '📦', label: '订单管理' },\n        { icon: '⚙️', label: '系统设置' },\n        { icon: '📝', label: '审批中心' },\n        { icon: '🔔', label: '消息通知' },\n        { icon: '📁', label: '文件中心' },\n        { icon: '🛡️', label: '权限管理' }\n      ]\n    }\n  }\n};\n</script>\n\n<style src=\"./QuickNav.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-quicknav\">\n    <div\n      v-for=\"(it, i) in items\"\n      :key=\"i\"\n      class=\"aa-quicknav-item\"\n      @click=\"emit('select', it)\"\n    >\n      <div class=\"aa-quicknav-icon\">{{ it.icon }}</div>\n      <div class=\"aa-quicknav-label\">{{ it.label }}</div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nconst props = defineProps({\n  items: {\n    type: Array,\n    default: () => [\n      { icon: '📊', label: '数据看板' },\n      { icon: '👥', label: '用户管理' },\n      { icon: '📦', label: '订单管理' },\n      { icon: '⚙️', label: '系统设置' },\n      { icon: '📝', label: '审批中心' },\n      { icon: '🔔', label: '消息通知' },\n      { icon: '📁', label: '文件中心' },\n      { icon: '🛡️', label: '权限管理' }\n    ]\n  }\n});\nconst emit = defineEmits(['select']);\n</script>\n\n<style src=\"./QuickNav.css\"></style>\n"}},{"slug":"anchornav","name":"锚点导航 AnchorNav","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/anchornav.json","category":"navigation","specLines":["- 长页面右侧固定目录","- 滚动时高亮当前章节","- 点击平滑滚动到对应位置","- 支持层级嵌套","- 适用于帮助文档、长表单"],"specSummary":"- 长页面右侧固定目录","contract":{"variants":["当前章节高亮","非当前章节","嵌套层级"],"dims":[{"name":"state","values":["active","default"]},{"name":"level","values":["h1","h2","h3"]}],"unknowns":["层级缩进量","高亮的判定偏移（offset）"],"anatomy":{"position":"长页面右侧固定目录","highlight":"滚动时高亮当前章节","action":"点击平滑滚动到对应位置","nesting":"支持层级嵌套"},"doNot":["滚动监听的实现方式","浏览器地址栏锚点同步"],"usage":["长页面右侧固定目录","滚动时高亮当前章节","点击平滑滚动到对应位置","支持层级嵌套","适用于帮助文档、长表单"],"structure":{"position":"右侧固定","scroll":"平滑滚动"}},"files":{"html":"../frameworks/anchornav.html","css":"../frameworks/AnchorNav.css","jsx":"../frameworks/AnchorNav.jsx","vue2":"../frameworks/AnchorNav.vue2.vue","vue3":"../frameworks/AnchorNav.vue3.vue"},"sizes":{"html":3813,"css":1029,"jsx":2105,"vue2":2558,"vue3":2530},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Aurora Admin · AnchorNav (H5)</title>\n<link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\">\n<link rel=\"stylesheet\" href=\"./AnchorNav.css\">\n<style>\n  .demo { padding: 24px 200px 400px 24px; background: var(--au-color-page-bg); font-family: var(--font-family); color: var(--au-color-text-body); }\n  h1 { font-size: 20px; margin: 0 0 24px; color: var(--au-color-text-title); }\n  .sub { color: var(--au-color-text-secondary); margin: 0 0 24px; font-size: 12px; }\n  section { background: var(--au-color-card-bg); border: 1px solid var(--au-color-border); border-radius: 8px; padding: 20px 24px; margin-bottom: 24px; scroll-margin-top: 24px; }\n  section h2 { font-size: 16px; margin: 0 0 8px; }\n  section p { color: var(--au-color-text-tertiary); line-height: 1.8; margin: 0; }\n</style>\n</head>\n<body>\n<div class=\"demo\">\n  <h1>Aurora Admin · AnchorNav 组件（纯 H5）</h1>\n  <p class=\"sub\">对齐 AnchorNav 规范：右侧目录、滚动高亮、层级嵌套、点击平滑滚动</p>\n\n  <nav class=\"aa-anchor fixed\" id=\"anchor\"></nav>\n\n  <section id=\"intro\"><h2>1. 产品简介</h2><p>本系统是一套企业级中后台解决方案……（长文本占位，可滚动测试高亮）</p><p style=\"margin-top:40px\">更多内容用于撑高页面，方便观察当前章节高亮效果。</p></section>\n  <section id=\"install\"><h2>2. 安装与初始化</h2><p>通过 npm 安装后，在入口文件引入主题与组件库。</p><p style=\"margin-top:40px\">配置项说明略。</p></section>\n  <section id=\"guide\">\n    <h2>3. 开发指南</h2>\n    <p>包含布局、主题与国际化三部分。</p>\n    <div id=\"layout\" style=\"margin-top:16px\"><h3>3.1 布局</h3><p>侧边栏 + 顶栏的经典后台布局。</p></div>\n    <div id=\"theme\" style=\"margin-top:16px\"><h3>3.2 主题</h3><p>通过 CSS 变量统一调整品牌色。</p></div>\n  </section>\n  <section id=\"faq\"><h2>4. 常见问题</h2><p>收集部署与升级中的高频问题。</p><p style=\"margin-top:40px\">FAQ 列表略。</p></section>\n</div>\n\n<script>\nconst ITEMS = [\n  { key: 'intro', label: '产品简介' },\n  { key: 'install', label: '安装与初始化' },\n  { key: 'guide', label: '开发指南', children: [\n    { key: 'layout', label: '布局' },\n    { key: 'theme', label: '主题' }\n  ] },\n  { key: 'faq', label: '常见问题' }\n];\nconst allKeys = [];\n(function collect(list) { list.forEach(i => { allKeys.push(i.key); if (i.children) collect(i.children); }); })(ITEMS);\n\nconst anchor = document.getElementById('anchor');\nfunction render() {\n  anchor.innerHTML = ITEMS.map(it => {\n    let html = `<button class=\"aa-anchor-item\" role=\"link\" tabindex=\"0\" data-key=\"${it.key}\">${it.label}</button>`;\n    if (it.children) {\n      html += '<div class=\"aa-anchor-sub\">' + it.children.map(c => `<button class=\"aa-anchor-item\" role=\"link\" tabindex=\"0\" data-key=\"${c.key}\">${c.label}</button>`).join('') + '</div>';\n    }\n    return html;\n  }).join('');\n}\nrender();\n\nanchor.addEventListener('click', (e) => {\n  const btn = e.target.closest('.aa-anchor-item');\n  if (!btn) return;\n  const el = document.getElementById(btn.dataset.key);\n  if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 24, behavior: 'smooth' });\n});\n\nfunction updateActive() {\n  const pos = window.scrollY + 80;\n  let active = allKeys[0];\n  for (const k of allKeys) {\n    const el = document.getElementById(k);\n    if (el && el.offsetTop <= pos) active = k;\n  }\n  anchor.querySelectorAll('.aa-anchor-item').forEach(b => b.classList.toggle('is-active', b.dataset.key === active));\n}\nwindow.addEventListener('scroll', updateActive);\nupdateActive();\n</script>\n</body>\n</html>\n","css":"/* Aurora Admin AnchorNav 样式 — 对齐 组件7.txt AnchorNav：右侧目录、滚动高亮、层级嵌套 */\n\n.aa-anchor { font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); width: 160px; }\n.aa-anchor.fixed { position: fixed; right: 24px; top: 80px; }\n\n.aa-anchor-item {\n  display: block; padding: 6px 12px; font-size: 13px; color: var(--au-color-text-secondary); cursor: pointer;\n  border-left: 2px solid var(--au-color-border); line-height: 1.4; transition: color .15s, border-color .15s; background: none; border-top: none; border-right: none; border-bottom: none; text-align: left; width: 100%;\n}\n.aa-anchor-item:hover { color: var(--au-color-brand); }\n.aa-anchor-item.is-active { color: var(--au-color-brand); border-left-color: var(--au-color-brand); font-weight: 500; }\n\n.aa-anchor-sub { padding-left: 8px; }\n.aa-anchor-sub .aa-anchor-item { border-left: none; padding-left: 20px; }\n.aa-anchor-sub .aa-anchor-item.is-active { border-left: 2px solid var(--au-color-brand); }\n","jsx":"import React, { useState, useEffect } from 'react';\nimport './AnchorNav.css';\n\n/**\n * Aurora Admin AnchorNav（React）\n * 对齐 组件7.txt AnchorNav 规范：右侧目录、滚动高亮、层级嵌套、点击平滑滚动\n *\n * props:\n *  - items  : [{ key, label, children? }]（key 对应页面元素 id）\n *  - fixed\n *  - offset : 滚动偏移（避开吸顶高度）\n */\nexport default function AnchorNav({ items = [], fixed = false, offset = 24 }) {\n  const allKeys = [];\n  (function collect(list) { list.forEach(i => { allKeys.push(i.key); if (i.children) collect(i.children); }); })(items);\n  const [active, setActive] = useState(items[0] ? items[0].key : '');\n\n  const go = (key) => {\n    const el = document.getElementById(key);\n    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - offset, behavior: 'smooth' });\n  };\n  useEffect(() => {\n    const onScroll = () => {\n      const pos = window.scrollY + 80;\n      let cur = allKeys[0];\n      for (const k of allKeys) {\n        const el = document.getElementById(k);\n        if (el && el.offsetTop <= pos) cur = k;\n      }\n      setActive(cur);\n    };\n    window.addEventListener('scroll', onScroll);\n    return () => window.removeEventListener('scroll', onScroll);\n  }, []);\n\n  return (\n    <nav className={`aa-anchor${fixed ? ' fixed' : ''}`}>\n      {items.map(it => (\n        <div key={it.key}>\n          <button className={`aa-anchor-item${active === it.key ? ' is-active' : ''}`} onClick={() => go(it.key)}>{it.label}</button>\n          {it.children && (\n            <div className=\"aa-anchor-sub\">\n              {it.children.map(c => (\n                <button key={c.key} className={`aa-anchor-item${active === c.key ? ' is-active' : ''}`} onClick={() => go(c.key)}>{c.label}</button>\n              ))}\n            </div>\n          )}\n        </div>\n      ))}\n    </nav>\n  );\n}\n\n/*\n用法示例：\nimport AnchorNav from './AnchorNav';\nconst items = [{ key: 'intro', label: '简介' }, { key: 'guide', label: '指南', children: [{ key: 'layout', label: '布局' }] }];\n<AnchorNav items={items} fixed />\n*/\n","vue2":"<template>\n  <nav class=\"aa-anchor\" :class=\"{ fixed }\">\n    <template v-for=\"(it, i) in items\" :key=\"it.key\">\n      <button class=\"aa-anchor-item\" :class=\"{ 'is-active': active === it.key }\" @click=\"go(it.key)\">{{ it.label }}</button>\n      <div v-if=\"it.children\" class=\"aa-anchor-sub\">\n        <button\n          v-for=\"c in it.children\" :key=\"c.key\"\n          class=\"aa-anchor-item\" :class=\"{ 'is-active': active === c.key }\"\n          @click=\"go(c.key)\"\n        >{{ c.label }}</button>\n      </div>\n    </template>\n  </nav>\n</template>\n\n<script>\nexport default {\n  name: 'AaAnchorNav',\n  props: {\n    items: { type: Array, required: true },   // [{ key, label, children? }]\n    fixed: { type: Boolean, default: false },\n    offset: { type: Number, default: 24 }\n  },\n  data() { return { active: this.items[0] ? this.items[0].key : '' }; },\n  computed: {\n    allKeys() {\n      const out = [];\n      (function collect(list) { list.forEach(i => { out.push(i.key); if (i.children) collect(i.children); }); })(this.items);\n      return out;\n    }\n  },\n  methods: {\n    go(key) {\n      const el = document.getElementById(key);\n      if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - this.offset, behavior: 'smooth' });\n    },\n    onScroll() {\n      const pos = window.scrollY + 80;\n      let cur = this.allKeys[0];\n      for (const k of this.allKeys) {\n        const el = document.getElementById(k);\n        if (el && el.offsetTop <= pos) cur = k;\n      }\n      this.active = cur;\n    }\n  },\n  mounted() { window.addEventListener('scroll', this.onScroll); },\n  beforeDestroy() { window.removeEventListener('scroll', this.onScroll); }\n};\n</script>\n\n<!-- 样式对齐 组件7.txt AnchorNav 规范 -->\n<style>\n.aa-anchor { font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); width: 160px; }\n.aa-anchor.fixed { position: fixed; right: 24px; top: 80px; }\n.aa-anchor-item { display: block; padding: 6px 12px; font-size: 13px; color: #6E6E6E; cursor: pointer; border-left: 2px solid #E8ECF1; line-height: 1.4; transition: color .15s, border-color .15s; background: none; border-top: none; border-right: none; border-bottom: none; text-align: left; width: 100%; }\n.aa-anchor-item:hover { color: #2F54EB; }\n.aa-anchor-item.is-active { color: #2F54EB; border-left-color: #2F54EB; font-weight: 500; }\n.aa-anchor-sub { padding-left: 8px; }\n.aa-anchor-sub .aa-anchor-item { border-left: none; padding-left: 20px; }\n.aa-anchor-sub .aa-anchor-item.is-active { border-left: 2px solid #2F54EB; }\n</style>\n","vue3":"<template>\n  <nav class=\"aa-anchor\" :class=\"{ fixed }\">\n    <template v-for=\"(it, i) in items\" :key=\"it.key\">\n      <button class=\"aa-anchor-item\" :class=\"{ 'is-active': active === it.key }\" @click=\"go(it.key)\">{{ it.label }}</button>\n      <div v-if=\"it.children\" class=\"aa-anchor-sub\">\n        <button\n          v-for=\"c in it.children\" :key=\"c.key\"\n          class=\"aa-anchor-item\" :class=\"{ 'is-active': active === c.key }\"\n          @click=\"go(c.key)\"\n        >{{ c.label }}</button>\n      </div>\n    </template>\n  </nav>\n</template>\n\n<script setup>\nimport { ref, onMounted, onBeforeUnmount } from 'vue';\n\nconst props = defineProps({\n  items: { type: Array, required: true },   // [{ key, label, children? }]（key 对应页面元素 id）\n  fixed: { type: Boolean, default: false },\n  offset: { type: Number, default: 24 }       // 滚动偏移（避开吸顶高度）\n});\n\nconst active = ref(props.items[0] ? props.items[0].key : '');\nconst allKeys = [];\n(function collect(list) { list.forEach(i => { allKeys.push(i.key); if (i.children) collect(i.children); }); })(props.items);\n\nfunction go(key) {\n  const el = document.getElementById(key);\n  if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - props.offset, behavior: 'smooth' });\n}\nfunction onScroll() {\n  const pos = window.scrollY + 80;\n  let cur = allKeys[0];\n  for (const k of allKeys) {\n    const el = document.getElementById(k);\n    if (el && el.offsetTop <= pos) cur = k;\n  }\n  active.value = cur;\n}\nonMounted(() => window.addEventListener('scroll', onScroll));\nonBeforeUnmount(() => window.removeEventListener('scroll', onScroll));\n</script>\n\n<!-- 样式对齐 组件7.txt AnchorNav 规范 -->\n<style scoped>\n.aa-anchor { font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); width: 160px; }\n.aa-anchor.fixed { position: fixed; right: 24px; top: 80px; }\n.aa-anchor-item { display: block; padding: 6px 12px; font-size: 13px; color: #6E6E6E; cursor: pointer; border-left: 2px solid #E8ECF1; line-height: 1.4; transition: color .15s, border-color .15s; background: none; border-top: none; border-right: none; border-bottom: none; text-align: left; width: 100%; }\n.aa-anchor-item:hover { color: #2F54EB; }\n.aa-anchor-item.is-active { color: #2F54EB; border-left-color: #2F54EB; font-weight: 500; }\n.aa-anchor-sub { padding-left: 8px; }\n.aa-anchor-sub .aa-anchor-item { border-left: none; padding-left: 20px; }\n.aa-anchor-sub .aa-anchor-item.is-active { border-left: 2px solid #2F54EB; }\n</style>\n"}},{"slug":"backtotop","name":"返回顶部 BackToTop","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/backtotop.json","category":"system","specLines":["- 页面滚动超过 400px 时出现","- 右下角悬浮按钮","- 点击平滑滚动回顶部","- 可带进度环显示滚动进度","- 支持自定义位置、样式"],"specSummary":"- 页面滚动超过 400px 时出现","contract":{"variants":["带进度环","无进度环","自定义位置"],"dims":[{"name":"progress","values":["ring","none"]},{"name":"position","values":["bottom-right","custom"]}],"unknowns":["按钮尺寸与距边距","进度环的线宽"],"anatomy":{"trigger":"页面滚动超过 400px 时出现","button":"右下角悬浮按钮","ring":"可带进度环显示滚动进度","action":"点击平滑滚动回顶部"},"doNot":["进度环的渐变配色"],"usage":["页面滚动超过 400px 时出现","右下角悬浮按钮","点击平滑滚动回顶部","可带进度环显示滚动进度","支持自定义位置、样式"],"structure":{"appearAt":"400px","position":"右下角悬浮"}},"files":{"html":"../frameworks/BackToTop.html","css":"../frameworks/BackToTop.css","jsx":"../frameworks/BackToTop.jsx","vue2":"../frameworks/BackToTop.vue2.vue","vue3":"../frameworks/BackToTop.vue3.vue"},"sizes":{"html":2456,"css":1193,"jsx":1608,"vue2":1603,"vue3":1495},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · BackToTop（普通 H5）</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"BackToTop.css\" />\n  <style>\n    body { margin: 0; background: var(--au-color-page-bg); font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); }\n    .aa-demo-banner { padding: 24px; background: var(--au-color-card-bg); border-bottom: 1px solid var(--au-color-border); }\n    .aa-demo-banner h2 { margin: 0 0 8px; color: var(--au-color-text-title); font-size: 18px; }\n    .aa-demo-banner p { margin: 0; color: var(--au-color-text-secondary); font-size: 13px; }\n    .aa-demo-spacer { height: 2200px; padding: 24px; color: var(--au-color-text-secondary); }\n  </style>\n</head>\n<body>\n  <div class=\"aa-demo-banner\">\n    <h2>向下滚动页面</h2>\n    <p>滚动超过 400px 后右下角出现返回顶部按钮，环显示滚动进度，点击平滑回到顶部。</p>\n  </div>\n  <div class=\"aa-demo-spacer\">这里是长内容占位区……</div>\n\n  <div class=\"aa-backtop\" id=\"backtop\" role=\"button\" aria-label=\"返回顶部\">\n    <svg viewBox=\"0 0 44 44\">\n      <circle class=\"aa-backtop-ring-bg\" aria-label=\"返回顶部\" cx=\"22\" cy=\"22\" r=\"20\" fill=\"none\" stroke-width=\"2\" />\n      <circle class=\"aa-backtop-ring-fg\" role=\"button\" aria-label=\"返回顶部\" id=\"ring\" cx=\"22\" cy=\"22\" r=\"20\" fill=\"none\" stroke-width=\"2\" />\n    </svg>\n    <span class=\"aa-backtop-arrow\" aria-label=\"返回顶部\">↑</span>\n  </div>\n\n  <script>\n    var THRESHOLD = 400, R = 20, C = 2 * Math.PI * R;\n    var el = document.getElementById('backtop');\n    var ring = document.getElementById('ring');\n    ring.style.strokeDasharray = C;\n    ring.style.strokeDashoffset = C;\n\n    function onScroll() {\n      var st = window.pageYOffset || document.documentElement.scrollTop;\n      var max = document.documentElement.scrollHeight - window.innerHeight;\n      var p = max > 0 ? st / max : 0;\n      el.classList.toggle('is-visible', st > THRESHOLD);\n      ring.style.strokeDashoffset = C * (1 - p);\n    }\n    window.addEventListener('scroll', onScroll, { passive: true });\n    el.addEventListener('click', function () {\n      window.scrollTo({ top: 0, behavior: 'smooth' });\n    });\n    onScroll();\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin BackToTop 样式 — 对齐 组件7.txt BackToTop：滚动超阈值出现，右下角悬浮，带进度环 */\n\n.aa-backtop {\n  position: fixed; right: 32px; bottom: 32px; width: 44px; height: 44px;\n  border-radius: 50%; background: var(--au-color-card-bg); border: 1px solid var(--au-color-border);\n  box-shadow: 0 4px 12px rgba(0,0,0,0.12); cursor: pointer;\n  display: flex; align-items: center; justify-content: center; z-index: 1000;\n  opacity: 0; transform: translateY(12px); pointer-events: none;\n  transition: opacity .2s, transform .2s, background .15s;\n}\n.aa-backtop.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }\n.aa-backtop:hover { background: var(--au-color-brand-bg); }\n.aa-backtop svg { position: absolute; top: 0; left: 0; width: 44px; height: 44px; transform: rotate(-90deg); }\n.aa-backtop-ring-bg { stroke: var(--au-color-border); }\n.aa-backtop-ring-fg { stroke: var(--au-color-brand); transition: stroke-dashoffset .1s linear; }\n.aa-backtop-arrow { color: var(--au-color-brand); font-size: 18px; line-height: 1; z-index: 1; }\n.aa-backtop.aa-no-ring .aa-backtop-ring-fg,\n.aa-backtop.aa-no-ring .aa-backtop-ring-bg { display: none; }\n","jsx":"import React, { useEffect, useState } from 'react';\nimport './BackToTop.css';\n\nexport default function BackToTop({ threshold = 400, showRing = true }) {\n  const [visible, setVisible] = useState(false);\n  const [progress, setProgress] = useState(0);\n  const r = 20;\n  const circumference = 2 * Math.PI * r;\n  const offset = circumference * (1 - progress);\n\n  useEffect(() => {\n    function onScroll() {\n      const st = window.pageYOffset || document.documentElement.scrollTop;\n      const max = document.documentElement.scrollHeight - window.innerHeight;\n      setProgress(max > 0 ? st / max : 0);\n      setVisible(st > threshold);\n    }\n    window.addEventListener('scroll', onScroll, { passive: true });\n    onScroll();\n    return () => window.removeEventListener('scroll', onScroll);\n  }, [threshold]);\n\n  function toTop() {\n    window.scrollTo({ top: 0, behavior: 'smooth' });\n  }\n\n  return (\n    <div\n      className={'aa-backtop' + (visible ? ' is-visible' : '') + (showRing ? '' : ' aa-no-ring')}\n      role=\"button\"\n      aria-label=\"返回顶部\"\n      onClick={toTop}\n    >\n      {showRing ? (\n        <svg viewBox=\"0 0 44 44\">\n          <circle className=\"aa-backtop-ring-bg\" cx=\"22\" cy=\"22\" r=\"20\" fill=\"none\" strokeWidth=\"2\" />\n          <circle\n            className=\"aa-backtop-ring-fg\"\n            cx=\"22\"\n            cy=\"22\"\n            r=\"20\"\n            fill=\"none\"\n            strokeWidth=\"2\"\n            style={{ strokeDasharray: circumference, strokeDashoffset: offset }}\n          />\n        </svg>\n      ) : null}\n      <span className=\"aa-backtop-arrow\">↑</span>\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-backtop\" :class=\"{ 'is-visible': visible, 'aa-no-ring': !showRing }\"\n       role=\"button\" aria-label=\"返回顶部\" @click=\"toTop\">\n    <svg viewBox=\"0 0 44 44\" v-if=\"showRing\">\n      <circle class=\"aa-backtop-ring-bg\" cx=\"22\" cy=\"22\" r=\"20\" fill=\"none\" stroke-width=\"2\" />\n      <circle class=\"aa-backtop-ring-fg\" cx=\"22\" cy=\"22\" r=\"20\" fill=\"none\" stroke-width=\"2\"\n              :style=\"{ strokeDasharray: circumference, strokeDashoffset: offset }\" />\n    </svg>\n    <span class=\"aa-backtop-arrow\">↑</span>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaBackToTop',\n  props: {\n    threshold: { type: Number, default: 400 },\n    showRing: { type: Boolean, default: true }\n  },\n  data: function () {\n    return { visible: false, progress: 0, r: 20 };\n  },\n  computed: {\n    circumference: function () { return 2 * Math.PI * this.r; },\n    offset: function () { return this.circumference * (1 - this.progress); }\n  },\n  methods: {\n    onScroll: function () {\n      var st = window.pageYOffset || document.documentElement.scrollTop;\n      var max = document.documentElement.scrollHeight - window.innerHeight;\n      this.progress = max > 0 ? st / max : 0;\n      this.visible = st > this.threshold;\n    },\n    toTop: function () {\n      window.scrollTo({ top: 0, behavior: 'smooth' });\n    }\n  },\n  mounted: function () {\n    window.addEventListener('scroll', this.onScroll, { passive: true });\n    this.onScroll();\n  },\n  beforeDestroy: function () {\n    window.removeEventListener('scroll', this.onScroll);\n  }\n};\n</script>\n\n<style src=\"./BackToTop.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-backtop\" :class=\"{ 'is-visible': visible, 'aa-no-ring': !showRing }\"\n       role=\"button\" aria-label=\"返回顶部\" @click=\"toTop\">\n    <svg viewBox=\"0 0 44 44\" v-if=\"showRing\">\n      <circle class=\"aa-backtop-ring-bg\" cx=\"22\" cy=\"22\" r=\"20\" fill=\"none\" stroke-width=\"2\" />\n      <circle class=\"aa-backtop-ring-fg\" cx=\"22\" cy=\"22\" r=\"20\" fill=\"none\" stroke-width=\"2\"\n              :style=\"{ strokeDasharray: circumference, strokeDashoffset: offset }\" />\n    </svg>\n    <span class=\"aa-backtop-arrow\">↑</span>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, onBeforeUnmount } from 'vue';\n\nconst props = defineProps({\n  threshold: { type: Number, default: 400 },\n  showRing: { type: Boolean, default: true }\n});\n\nconst r = 20;\nconst visible = ref(false);\nconst progress = ref(0);\nconst circumference = 2 * Math.PI * r;\nconst offset = computed(() => circumference * (1 - progress.value));\n\nfunction onScroll() {\n  const st = window.pageYOffset || document.documentElement.scrollTop;\n  const max = document.documentElement.scrollHeight - window.innerHeight;\n  progress.value = max > 0 ? st / max : 0;\n  visible.value = st > props.threshold;\n}\nfunction toTop() {\n  window.scrollTo({ top: 0, behavior: 'smooth' });\n}\n\nonMounted(() => {\n  window.addEventListener('scroll', onScroll, { passive: true });\n  onScroll();\n});\nonBeforeUnmount(() => {\n  window.removeEventListener('scroll', onScroll);\n});\n</script>\n\n<style src=\"./BackToTop.css\"></style>\n"}},{"slug":"pagetransition","name":"页面跳转 PageTransition","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/pagetransition.json","category":"system","specLines":["- 路由切换动画","- 可选淡入、滑动、缩放","- 动画时长 0.3-0.5s","- 支持前进/后退方向感知","- 减少页面跳动，提升体验"],"specSummary":"- 路由切换动画","contract":{"variants":["淡入（前进）","滑动（前进）","滑动（后退，反向）","缩放"],"dims":[{"name":"effect","values":["fade","slide","zoom"]},{"name":"direction","values":["forward","backward"]}],"unknowns":["默认效果与默认时长","缓动曲线取值"],"anatomy":{"route":"路由切换动画","duration":"动画时长 0.3-0.5s","direction":"支持前进/后退方向感知"},"doNot":["与具体路由库的集成方式"],"usage":["路由切换动画","可选淡入、滑动、缩放","动画时长 0.3-0.5s","支持前进/后退方向感知","减少页面跳动，提升体验"],"structure":{"duration":"0.3-0.5s","effects":"淡入 / 滑动 / 缩放"}},"files":{"html":"../frameworks/PageTransition.html","css":"../frameworks/PageTransition.css","jsx":"../frameworks/PageTransition.jsx","vue2":"../frameworks/PageTransition.vue2.vue","vue3":"../frameworks/PageTransition.vue3.vue"},"sizes":{"html":1482,"css":984,"jsx":793,"vue2":737,"vue3":709},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · PageTransition</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"./PageTransition.css\" />\n</head>\n<body>\n  <div class=\"aa-page\">\n    <h2 class=\"aa-h2\">PageTransition 页面切换动画</h2>\n    <p class=\"aa-desc\">路由切换动画：淡入 / 滑动 / 缩放，时长约 0.35s。点击按钮预览动画。</p>\n\n    <div class=\"aa-demo\">\n      <div class=\"aa-pt-bar\">\n        <button class=\"aa-btn\" data-t=\"fade\">淡入</button>\n        <button class=\"aa-btn\" data-t=\"slide\">滑动</button>\n        <button class=\"aa-btn\" data-t=\"zoom\">缩放</button>\n      </div>\n      <div class=\"aa-pt-stage\" id=\"stage\">当前页面内容</div>\n    </div>\n  </div>\n\n  <script>\n    var stage = document.getElementById('stage');\n    var pages = ['当前页面内容', '页面 B 内容', '页面 C 内容'];\n    var idx = 0;\n    document.querySelectorAll('.aa-pt-bar .aa-btn').forEach(function (b) {\n      b.onclick = function () {\n        var t = b.dataset.t;\n        idx = (idx + 1) % pages.length;\n        stage.textContent = pages[idx];\n        stage.className = 'aa-pt-stage aa-pt-' + t;\n        // 强制重排以重启动画\n        void stage.offsetWidth;\n        stage.classList.add('aa-pt-' + t);\n      };\n    });\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin PageTransition 样式 — 路由切换动画 */\n.aa-pt { font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); }\n.aa-pt-bar { display: flex; gap: 8px; margin-bottom: 12px; }\n.aa-pt-bar .aa-btn { font-size: 13px; padding: 6px 12px; }\n.aa-pt-stage { border: 1px solid var(--au-color-border); border-radius: 8px; padding: 28px; text-align: center; color: var(--au-color-text-tertiary); min-height: 96px; display: flex; align-items: center; justify-content: center; font-size: 15px; background: var(--au-color-card-bg); }\n.aa-pt-fade { animation: aaFade .35s ease; }\n.aa-pt-slide { animation: aaSlide .35s ease; }\n.aa-pt-zoom { animation: aaZoom .35s ease; }\n@keyframes aaFade { from { opacity: 0; } to { opacity: 1; } }\n@keyframes aaSlide { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }\n@keyframes aaZoom { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }\n","jsx":"import React, { useState } from 'react';\nimport './PageTransition.css';\n\nexport default function PageTransition({ text = '当前页面内容' }) {\n  const [animClass, setAnimClass] = useState('aa-pt-fade');\n  const [token, setToken] = useState(0);\n\n  const trigger = (type) => {\n    setAnimClass('aa-pt-' + type);\n    setToken((t) => t + 1);\n  };\n\n  return (\n    <div className=\"aa-pt\">\n      <div className=\"aa-pt-bar\">\n        <button className=\"aa-btn\" onClick={() => trigger('fade')}>淡入</button>\n        <button className=\"aa-btn\" onClick={() => trigger('slide')}>滑动</button>\n        <button className=\"aa-btn\" onClick={() => trigger('zoom')}>缩放</button>\n      </div>\n      <div className={'aa-pt-stage ' + animClass} key={token}>\n        {text}\n      </div>\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-pt\">\n    <div class=\"aa-pt-bar\">\n      <button class=\"aa-btn\" @click=\"trigger('fade')\">淡入</button>\n      <button class=\"aa-btn\" @click=\"trigger('slide')\">滑动</button>\n      <button class=\"aa-btn\" @click=\"trigger('zoom')\">缩放</button>\n    </div>\n    <div class=\"aa-pt-stage\" :class=\"animClass\" :key=\"token\">{{ text }}</div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaPageTransition',\n  props: {\n    text: { type: String, default: '当前页面内容' }\n  },\n  data() {\n    return { animClass: 'aa-pt-fade', token: 0 };\n  },\n  methods: {\n    trigger(type) {\n      this.animClass = 'aa-pt-' + type;\n      this.token++;\n    }\n  }\n};\n</script>\n\n<style src=\"./PageTransition.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-pt\">\n    <div class=\"aa-pt-bar\">\n      <button class=\"aa-btn\" @click=\"trigger('fade')\">淡入</button>\n      <button class=\"aa-btn\" @click=\"trigger('slide')\">滑动</button>\n      <button class=\"aa-btn\" @click=\"trigger('zoom')\">缩放</button>\n    </div>\n    <div class=\"aa-pt-stage\" :class=\"animClass\" :key=\"token\">{{ text }}</div>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\n\nconst props = defineProps({\n  text: { type: String, default: '当前页面内容' }\n});\nconst animClass = ref('aa-pt-fade');\nconst token = ref(0);\n\nfunction trigger(type) {\n  animClass.value = 'aa-pt-' + type;\n  token.value++;\n}\n</script>\n\n<style src=\"./PageTransition.css\"></style>\n"}},{"slug":"buttongroup","name":"按钮组 ButtonGroup","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/buttongroup.json","category":"general","specLines":["- 多个按钮组合","- 可选中（单选/多选）、可分隔","- 按钮之间无缝连接，仅首尾有圆角","- 支持尺寸统一、禁用","- 适用于视图切换、筛选条件"],"specSummary":"- 多个按钮组合","contract":{"variants":["基础组合","单选（视图切换）","多选（筛选条件）","可分隔 · 小尺寸"],"dims":[{"name":"selection","values":["none","single","multiple"]},{"name":"split","values":["connected","separated"]},{"name":"size","values":["large","medium","small"]}],"unknowns":["选中态的视觉表现（背景 vs 边框）","分隔样式的具体形态"],"anatomy":{"group":"按钮组容器","corner":"按钮之间无缝连接，仅首尾有圆角","active":"选中项（单选/多选）"},"doNot":["下拉按钮组合模式"],"usage":["多个按钮组合","可选中（单选/多选）、可分隔","按钮之间无缝连接，仅首尾有圆角","支持尺寸统一、禁用","适用于视图切换、筛选条件"],"structure":{"corner":"仅首尾圆角","join":"无缝连接"}},"files":{"html":"../frameworks/ButtonGroup.html","css":"../frameworks/ButtonGroup.css","jsx":"../frameworks/ButtonGroup.jsx","vue2":"../frameworks/ButtonGroup.vue2.vue","vue3":"../frameworks/ButtonGroup.vue3.vue"},"sizes":{"html":1819,"css":1370,"jsx":1062,"vue2":1260,"vue3":1210},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · ButtonGroup（普通 H5）</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"ButtonGroup.css\" />\n  <style>body{margin:0;padding:24px;background: var(--au-color-page-bg);display:flex;flex-direction:column;gap:16px;}</style>\n</head>\n<body>\n  <div class=\"aa-btngroup\" id=\"single\"></div>\n  <div class=\"aa-btngroup\" id=\"multi\"></div>\n\n  <script>\n    function paint(el, options, selected, multiple) {\n      el.innerHTML = options.map(function (o) {\n        var on = multiple ? selected.indexOf(o.value) >= 0 : selected === o.value;\n        var cls = 'aa-btngroup-btn' + (on ? ' is-selected' : '') + (o.disabled ? ' is-disabled' : '');\n        return '<button class=\"' + cls + '\" data-value=\"' + o.value + '\" ' + (o.disabled ? 'disabled' : '') + '>' + o.label + '</button>';\n      }).join('');\n      el.querySelectorAll('button').forEach(function (b) {\n        b.addEventListener('click', function () {\n          var v = b.dataset.value;\n          if (multiple) {\n            var i = selected.indexOf(v);\n            if (i >= 0) selected.splice(i, 1); else selected.push(v);\n          } else {\n            selected = v;\n          }\n          paint(el, options, selected, multiple);\n        });\n      });\n    }\n\n    paint(document.getElementById('single'),\n      [{ label: '日', value: 'day' }, { label: '周', value: 'week' }, { label: '月', value: 'month' }], 'week', false);\n\n    paint(document.getElementById('multi'),\n      [{ label: '红', value: 'r' }, { label: '绿', value: 'g' }, { label: '蓝', value: 'b', disabled: true }], ['r'], true);\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin ButtonGroup 样式 — 对齐 组件7.txt ButtonGroup：组合按钮无缝连接，仅首尾圆角，可选中（单选/多选） */\n\n.aa-btngroup { display: inline-flex; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); }\n.aa-btngroup-btn {\n  border: 1px solid var(--au-color-border); border-left-width: 0; background: var(--au-color-card-bg); color: var(--au-color-text-body);\n  padding: 0 16px; height: 32px; font-size: 14px; cursor: pointer; transition: background .15s, color .15s;\n}\n.aa-btngroup-btn:first-child { border-left-width: 1px; border-radius: 6px 0 0 6px; }\n.aa-btngroup-btn:last-child { border-radius: 0 6px 6px 0; }\n.aa-btngroup-btn:hover:not(.is-disabled):not(.is-selected) { color: var(--au-color-brand); background: var(--au-color-brand-bg); }\n.aa-btngroup-btn.is-disabled { color: var(--au-color-text-disabled); cursor: not-allowed; background: var(--au-color-disabled-bg); }\n.aa-btngroup-btn.is-selected { background: var(--au-color-brand); border-color: var(--au-color-brand); color: var(--au-color-text-inverse); }\n.aa-btngroup-btn.is-selected + .aa-btngroup-btn { border-left-color: var(--au-color-brand); }\n.aa-btngroup.is-sm .aa-btngroup-btn { height: 24px; padding: 0 10px; font-size: 13px; }\n.aa-btngroup.is-lg .aa-btngroup-btn { height: 40px; padding: 0 20px; font-size: 15px; }\n","jsx":"import React from 'react';\nimport './ButtonGroup.css';\n\nexport default function ButtonGroup({ options = [], value, multiple = false, size = 'default', onChange }) {\n  function isSelected(v) {\n    return multiple ? (value || []).indexOf(v) >= 0 : value === v;\n  }\n  function toggle(o) {\n    if (o.disabled) return;\n    let next;\n    if (multiple) {\n      const arr = (value || []).slice();\n      const idx = arr.indexOf(o.value);\n      if (idx >= 0) arr.splice(idx, 1); else arr.push(o.value);\n      next = arr;\n    } else {\n      next = o.value;\n    }\n    onChange && onChange(next);\n  }\n\n  const sizeCls = size === 'small' ? ' is-sm' : size === 'large' ? ' is-lg' : '';\n  return (\n    <div className={'aa-btngroup' + sizeCls}>\n      {options.map((o, i) => (\n        <button\n          key={i}\n          className={'aa-btngroup-btn' + (isSelected(o.value) ? ' is-selected' : '') + (o.disabled ? ' is-disabled' : '')}\n          disabled={!!o.disabled}\n          onClick={() => toggle(o)}\n        >\n          {o.label}\n        </button>\n      ))}\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-btngroup\" :class=\"{ 'is-sm': size === 'small', 'is-lg': size === 'large' }\">\n    <button v-for=\"(o, i) in options\" :key=\"i\"\n            class=\"aa-btngroup-btn\"\n            :class=\"{ 'is-selected': isSelected(o.value), 'is-disabled': !!o.disabled }\"\n            :disabled=\"!!o.disabled\"\n            @click=\"toggle(o)\">\n      {{ o.label }}\n    </button>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaButtonGroup',\n  props: {\n    options: { type: Array, default: function () { return []; } },\n    value: { type: [String, Array], default: '' },\n    multiple: { type: Boolean, default: false },\n    size: { type: String, default: 'default' }\n  },\n  methods: {\n    isSelected: function (v) {\n      return this.multiple ? this.value.indexOf(v) >= 0 : this.value === v;\n    },\n    toggle: function (o) {\n      if (o.disabled) return;\n      var next;\n      if (this.multiple) {\n        var arr = (this.value || []).slice();\n        var idx = arr.indexOf(o.value);\n        if (idx >= 0) arr.splice(idx, 1); else arr.push(o.value);\n        next = arr;\n      } else {\n        next = o.value;\n      }\n      this.$emit('input', next);\n      this.$emit('change', next);\n    }\n  }\n};\n</script>\n\n<style src=\"./ButtonGroup.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-btngroup\" :class=\"{ 'is-sm': size === 'small', 'is-lg': size === 'large' }\">\n    <button v-for=\"(o, i) in options\" :key=\"i\"\n            class=\"aa-btngroup-btn\"\n            :class=\"{ 'is-selected': isSelected(o.value), 'is-disabled': !!o.disabled }\"\n            :disabled=\"!!o.disabled\"\n            @click=\"toggle(o)\">\n      {{ o.label }}\n    </button>\n  </div>\n</template>\n\n<script setup>\nconst props = defineProps({\n  options: { type: Array, default: () => [] },\n  modelValue: { type: [String, Array], default: '' },\n  multiple: { type: Boolean, default: false },\n  size: { type: String, default: 'default' }\n});\nconst emit = defineEmits(['update:modelValue', 'change']);\n\nfunction isSelected(v) {\n  return props.multiple ? props.modelValue.indexOf(v) >= 0 : props.modelValue === v;\n}\nfunction toggle(o) {\n  if (o.disabled) return;\n  let next;\n  if (props.multiple) {\n    const arr = (props.modelValue || []).slice();\n    const idx = arr.indexOf(o.value);\n    if (idx >= 0) arr.splice(idx, 1); else arr.push(o.value);\n    next = arr;\n  } else {\n    next = o.value;\n  }\n  emit('update:modelValue', next);\n  emit('change', next);\n}\n</script>\n\n<style src=\"./ButtonGroup.css\"></style>\n"}},{"slug":"radiocard","name":"单选卡片 RadioCard","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/radiocard.json","category":"input","specLines":["- 以卡片形式展示单选选项","- 选中态边框品牌色，背景 #F0F5FF","- 卡片内可包含图标、标题、描述","- 支持多列布局","- 适用于套餐选择、模板选择"],"specSummary":"- 以卡片形式展示单选选项","contract":{"variants":["套餐选择卡片（选中态）","模板选择卡片"],"dims":[{"name":"content","values":["icon-title-desc","title-desc","title"]},{"name":"layout","values":["multi-column"]},{"name":"state","values":["default","selected","disabled"]}],"unknowns":["禁用态样式细节"],"anatomy":{"card":"卡片容器，边框分隔","selected":"选中态边框品牌色，背景 #F0F5FF","inner":"卡片内可包含图标、标题、描述"},"doNot":["卡片固定尺寸与栅格数规范"],"usage":["以卡片形式展示单选选项","选中态边框品牌色，背景 #F0F5FF","卡片内可包含图标、标题、描述，支持多列布局","适用于套餐选择、模板选择"],"structure":{"layout":"支持多列布局"}},"files":{"html":"../frameworks/RadioCard.html","css":"../frameworks/RadioCard.css","jsx":"../frameworks/RadioCard.jsx","vue2":"../frameworks/RadioCard.vue2.vue","vue3":"../frameworks/RadioCard.vue3.vue"},"sizes":{"html":1814,"css":1296,"jsx":827,"vue2":865,"vue3":860},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · RadioCard（普通 H5）</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"RadioCard.css\" />\n  <style>body{margin:0;padding:24px;background: var(--au-color-page-bg);}</style>\n</head>\n<body>\n  <div class=\"aa-radiocard-grid\" role=\"radio\" tabindex=\"0\" id=\"app\" style=\"grid-template-columns:repeat(3,1fr)\"></div>\n\n  <script>\n    var DATA = [\n      { label: '基础版', value: 'basic', desc: '适合个人与小团队，包含核心功能。', icon: '🟢' },\n      { label: '专业版', value: 'pro', desc: '进阶报表与权限管理，适合成长型企业。', icon: '🔵' },\n      { label: '旗舰版', value: 'max', desc: '全功能 + 专属支持，适合大型组织。', icon: '🟣' }\n    ];\n    var selected = 'pro';\n\n    function render() {\n      var root = document.getElementById('app');\n      root.innerHTML = DATA.map(function (o) {\n        return '<div class=\"aa-radiocard ' + (o.value === selected ? 'is-selected' : '') + '\" role=\"radio\" tabindex=\"0\" data-value=\"' + o.value + '\">' +\n          '<div class=\"aa-radiocard-icon\">' + (o.icon || '') + '</div>' +\n          '<div class=\"aa-radiocard-body\"><div class=\"aa-radiocard-title\">' + o.label + '</div>' +\n          '<div class=\"aa-radiocard-desc\">' + o.desc + '</div></div>' +\n          '<div class=\"aa-radiocard-mark\" role=\"radio\" tabindex=\"0\"></div></div>';\n      }).join('');\n      root.querySelectorAll('.aa-radiocard').forEach(function (el) {\n        el.addEventListener('click', function () { selected = el.dataset.value; render(); });\n      });\n    }\n    render();\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin RadioCard 样式 — 对齐 组件7.txt RadioCard：卡片单选，选中态边框品牌色 + 背景 #F0F5FF */\n\n.aa-radiocard-grid { display: grid; gap: 12px; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); }\n.aa-radiocard { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--au-color-border); border-radius: 8px;\n  padding: 16px; background: var(--au-color-card-bg); cursor: pointer; transition: border-color .15s, background .15s; }\n.aa-radiocard:hover { border-color: #C9D4F2; }\n.aa-radiocard.is-selected { border-color: var(--au-color-brand); background: var(--au-color-brand-bg); }\n.aa-radiocard-icon { font-size: 24px; line-height: 1.4; }\n.aa-radiocard-body { flex: 1; }\n.aa-radiocard-title { font-size: 14px; font-weight: 500; color: var(--au-color-text-title); }\n.aa-radiocard-desc { font-size: 13px; color: var(--au-color-text-secondary); margin-top: 4px; line-height: 1.5; }\n.aa-radiocard-mark { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--au-color-border); margin-top: 2px; box-sizing: border-box; flex-shrink: 0; }\n.aa-radiocard.is-selected .aa-radiocard-mark { border-color: var(--au-color-brand); background: var(--au-color-brand); box-shadow: inset 0 0 0 3px #fff; }\n","jsx":"import React from 'react';\nimport './RadioCard.css';\n\nexport default function RadioCard({ options = [], value, cols = 3, onChange }) {\n  return (\n    <div className=\"aa-radiocard-grid\" style={{ gridTemplateColumns: `repeat(${cols}, 1fr)` }}>\n      {options.map((o, i) => (\n        <div\n          key={i}\n          className={'aa-radiocard' + (value === o.value ? ' is-selected' : '')}\n          onClick={() => onChange && onChange(o.value)}\n        >\n          {o.icon ? <div className=\"aa-radiocard-icon\">{o.icon}</div> : null}\n          <div className=\"aa-radiocard-body\">\n            <div className=\"aa-radiocard-title\">{o.label}</div>\n            {o.desc ? <div className=\"aa-radiocard-desc\">{o.desc}</div> : null}\n          </div>\n          <div className=\"aa-radiocard-mark\" />\n        </div>\n      ))}\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-radiocard-grid\" :style=\"{ gridTemplateColumns: 'repeat(' + cols + ', 1fr)' }\">\n    <div class=\"aa-radiocard\" v-for=\"(o, i) in options\" :key=\"i\"\n         :class=\"{ 'is-selected': value === o.value }\" @click=\"$emit('input', o.value)\">\n      <div class=\"aa-radiocard-icon\" v-if=\"o.icon\">{{ o.icon }}</div>\n      <div class=\"aa-radiocard-body\">\n        <div class=\"aa-radiocard-title\">{{ o.label }}</div>\n        <div class=\"aa-radiocard-desc\" v-if=\"o.desc\">{{ o.desc }}</div>\n      </div>\n      <div class=\"aa-radiocard-mark\"></div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaRadioCard',\n  props: {\n    options: { type: Array, default: function () { return []; } },\n    value: { type: [String, Number], default: '' },\n    cols: { type: Number, default: 3 }\n  }\n};\n</script>\n\n<style src=\"./RadioCard.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-radiocard-grid\" :style=\"{ gridTemplateColumns: `repeat(${cols}, 1fr)` }\">\n    <div class=\"aa-radiocard\" v-for=\"(o, i) in options\" :key=\"i\"\n         :class=\"{ 'is-selected': modelValue === o.value }\" @click=\"$emit('update:modelValue', o.value)\">\n      <div class=\"aa-radiocard-icon\" v-if=\"o.icon\">{{ o.icon }}</div>\n      <div class=\"aa-radiocard-body\">\n        <div class=\"aa-radiocard-title\">{{ o.label }}</div>\n        <div class=\"aa-radiocard-desc\" v-if=\"o.desc\">{{ o.desc }}</div>\n      </div>\n      <div class=\"aa-radiocard-mark\"></div>\n    </div>\n  </div>\n</template>\n\n<script setup>\ndefineProps({\n  options: { type: Array, default: () => [] },\n  modelValue: { type: [String, Number], default: '' },\n  cols: { type: Number, default: 3 }\n});\ndefineEmits(['update:modelValue']);\n</script>\n\n<style src=\"./RadioCard.css\"></style>\n"}},{"slug":"checkboxcard","name":"复选卡片 CheckboxCard","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/checkboxcard.json","category":"input","specLines":["- 以卡片形式展示多选选项","- 选中态同单选卡片","- 支持卡片内操作按钮","- 适用于批量选择场景"],"specSummary":"- 以卡片形式展示多选选项","contract":{"variants":["批量选择卡片（选中态）","基础复选卡片"],"dims":[{"name":"selection","values":["multi"]},{"name":"innerActions","values":["support","none"]},{"name":"state","values":["default","selected","disabled"]}],"unknowns":["卡片内操作按钮的具体形态"],"anatomy":{"card":"卡片容器，样式与单选卡片一致","selected":"选中态同单选卡片（边框品牌色，背景 #F0F5FF）","actions":"可选的卡片内操作按钮"},"doNot":["全选联动规则"],"usage":["以卡片形式展示多选选项","选中态同单选卡片","支持卡片内操作按钮","适用于批量选择场景"],"structure":{"selection":"多选"}},"files":{"html":"../frameworks/CheckboxCard.html","css":"../frameworks/CheckboxCard.css","jsx":"../frameworks/CheckboxCard.jsx","vue2":"../frameworks/CheckboxCard.vue2.vue","vue3":"../frameworks/CheckboxCard.vue3.vue"},"sizes":{"html":1938,"css":1433,"jsx":1011,"vue2":1095,"vue3":1057},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · CheckboxCard（普通 H5）</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"CheckboxCard.css\" />\n  <style>body{margin:0;padding:24px;background: var(--au-color-page-bg);}</style>\n</head>\n<body>\n  <div class=\"aa-checkcard-grid\" role=\"radio\" tabindex=\"0\" id=\"app\" style=\"grid-template-columns:repeat(3,1fr)\"></div>\n\n  <script>\n    var DATA = [\n      { label: '数据分析', value: 'analytics', desc: '多维度报表与漏斗分析。', icon: '📊' },\n      { label: '消息推送', value: 'push', desc: '全渠道触达与定时发送。', icon: '🔔' },\n      { label: '权限管理', value: 'rbac', desc: '角色与数据权限配置。', icon: '🔐' }\n    ];\n    var selected = ['analytics'];\n\n    function render() {\n      var root = document.getElementById('app');\n      root.innerHTML = DATA.map(function (o) {\n        var on = selected.indexOf(o.value) >= 0;\n        return '<div class=\"aa-checkcard ' + (on ? 'is-selected' : '') + '\" role=\"radio\" tabindex=\"0\" data-value=\"' + o.value + '\">' +\n          '<div class=\"aa-checkcard-icon\">' + (o.icon || '') + '</div>' +\n          '<div class=\"aa-checkcard-body\"><div class=\"aa-checkcard-title\">' + o.label + '</div>' +\n          '<div class=\"aa-checkcard-desc\">' + o.desc + '</div></div>' +\n          '<div class=\"aa-checkcard-mark\" role=\"radio\" tabindex=\"0\"></div></div>';\n      }).join('');\n      root.querySelectorAll('.aa-checkcard').forEach(function (el) {\n        el.addEventListener('click', function () {\n          var v = el.dataset.value, i = selected.indexOf(v);\n          if (i >= 0) selected.splice(i, 1); else selected.push(v);\n          render();\n        });\n      });\n    }\n    render();\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin CheckboxCard 样式 — 对齐 组件7.txt CheckboxCard：卡片多选，选中态同单选卡片，方框勾选 */\n\n.aa-checkcard-grid { display: grid; gap: 12px; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); }\n.aa-checkcard { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--au-color-border); border-radius: 8px;\n  padding: 16px; background: var(--au-color-card-bg); cursor: pointer; transition: border-color .15s, background .15s; }\n.aa-checkcard:hover { border-color: #C9D4F2; }\n.aa-checkcard.is-selected { border-color: var(--au-color-brand); background: var(--au-color-brand-bg); }\n.aa-checkcard-icon { font-size: 24px; line-height: 1.4; }\n.aa-checkcard-body { flex: 1; }\n.aa-checkcard-title { font-size: 14px; font-weight: 500; color: var(--au-color-text-title); }\n.aa-checkcard-desc { font-size: 13px; color: var(--au-color-text-secondary); margin-top: 4px; line-height: 1.5; }\n.aa-checkcard-mark { width: 16px; height: 16px; border-radius: 4px; border: 2px solid var(--au-color-border); margin-top: 2px;\n  box-sizing: border-box; flex-shrink: 0; color: var(--au-color-text-inverse); font-size: 11px; line-height: 12px; text-align: center; }\n.aa-checkcard.is-selected .aa-checkcard-mark { border-color: var(--au-color-brand); background: var(--au-color-brand); }\n.aa-checkcard.is-selected .aa-checkcard-mark::after { content: '✓'; }\n","jsx":"import React from 'react';\nimport './CheckboxCard.css';\n\nexport default function CheckboxCard({ options = [], value = [], cols = 3, onChange }) {\n  function toggle(v) {\n    const arr = value.slice();\n    const idx = arr.indexOf(v);\n    if (idx >= 0) arr.splice(idx, 1); else arr.push(v);\n    onChange && onChange(arr);\n  }\n  return (\n    <div className=\"aa-checkcard-grid\" style={{ gridTemplateColumns: `repeat(${cols}, 1fr)` }}>\n      {options.map((o, i) => (\n        <div\n          key={i}\n          className={'aa-checkcard' + (value.indexOf(o.value) >= 0 ? ' is-selected' : '')}\n          onClick={() => toggle(o.value)}\n        >\n          {o.icon ? <div className=\"aa-checkcard-icon\">{o.icon}</div> : null}\n          <div className=\"aa-checkcard-body\">\n            <div className=\"aa-checkcard-title\">{o.label}</div>\n            {o.desc ? <div className=\"aa-checkcard-desc\">{o.desc}</div> : null}\n          </div>\n          <div className=\"aa-checkcard-mark\" />\n        </div>\n      ))}\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-checkcard-grid\" :style=\"{ gridTemplateColumns: 'repeat(' + cols + ', 1fr)' }\">\n    <div class=\"aa-checkcard\" v-for=\"(o, i) in options\" :key=\"i\"\n         :class=\"{ 'is-selected': value.indexOf(o.value) >= 0 }\" @click=\"toggle(o.value)\">\n      <div class=\"aa-checkcard-icon\" v-if=\"o.icon\">{{ o.icon }}</div>\n      <div class=\"aa-checkcard-body\">\n        <div class=\"aa-checkcard-title\">{{ o.label }}</div>\n        <div class=\"aa-checkcard-desc\" v-if=\"o.desc\">{{ o.desc }}</div>\n      </div>\n      <div class=\"aa-checkcard-mark\"></div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaCheckboxCard',\n  props: {\n    options: { type: Array, default: function () { return []; } },\n    value: { type: Array, default: function () { return []; } },\n    cols: { type: Number, default: 3 }\n  },\n  methods: {\n    toggle: function (v) {\n      var arr = this.value.slice();\n      var idx = arr.indexOf(v);\n      if (idx >= 0) arr.splice(idx, 1); else arr.push(v);\n      this.$emit('input', arr);\n    }\n  }\n};\n</script>\n\n<style src=\"./CheckboxCard.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-checkcard-grid\" :style=\"{ gridTemplateColumns: `repeat(${cols}, 1fr)` }\">\n    <div class=\"aa-checkcard\" v-for=\"(o, i) in options\" :key=\"i\"\n         :class=\"{ 'is-selected': modelValue.indexOf(o.value) >= 0 }\" @click=\"toggle(o.value)\">\n      <div class=\"aa-checkcard-icon\" v-if=\"o.icon\">{{ o.icon }}</div>\n      <div class=\"aa-checkcard-body\">\n        <div class=\"aa-checkcard-title\">{{ o.label }}</div>\n        <div class=\"aa-checkcard-desc\" v-if=\"o.desc\">{{ o.desc }}</div>\n      </div>\n      <div class=\"aa-checkcard-mark\"></div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nconst props = defineProps({\n  options: { type: Array, default: () => [] },\n  modelValue: { type: Array, default: () => [] },\n  cols: { type: Number, default: 3 }\n});\nconst emit = defineEmits(['update:modelValue']);\n\nfunction toggle(v) {\n  const arr = props.modelValue.slice();\n  const idx = arr.indexOf(v);\n  if (idx >= 0) arr.splice(idx, 1); else arr.push(v);\n  emit('update:modelValue', arr);\n}\n</script>\n\n<style src=\"./CheckboxCard.css\"></style>\n"}},{"slug":"listpicker","name":"列表选择器 ListPicker","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/listpicker.json","category":"input","specLines":["- 下拉面板中显示列表，可多选","- 支持分组、搜索、全选","- 选中项显示为标签，可删除","- 适用于标签选择、分类选择"],"specSummary":"- 下拉面板中显示列表，可多选","contract":{"variants":["多选 · 收起（显示标签）","多选 · 展开（分组列表）","单选 · 可搜索","全选"],"dims":[{"name":"selection","values":["single","multiple"]},{"name":"state","values":["collapsed","expanded"]},{"name":"feature","values":["group","search","select-all"]}],"unknowns":["面板的最大高度","标签过多时的折叠规则"],"anatomy":{"panel":"下拉面板中显示列表，可多选","feature":"支持分组、搜索、全选","tag":"选中项显示为标签，可删除"},"doNot":["虚拟滚动","新建选项"],"usage":["下拉面板中显示列表，可多选","支持分组、搜索、全选","选中项显示为标签，可删除","适用于标签选择、分类选择"],"structure":{"panel":"下拉列表","tag":"选中项标签化"}},"files":{"html":"../frameworks/listpicker.html","css":"../frameworks/ListPicker.css","jsx":"../frameworks/ListPicker.jsx","vue2":"../frameworks/ListPicker.vue2.vue","vue3":"../frameworks/ListPicker.vue3.vue"},"sizes":{"html":4544,"css":3191,"jsx":4014,"vue2":5775,"vue3":6059},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Aurora Admin · ListPicker (H5)</title>\n<link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\">\n<link rel=\"stylesheet\" href=\"./ListPicker.css\">\n<style>\n  .demo { padding: 24px; background: var(--au-color-page-bg); font-family: var(--font-family); }\n  h1 { font-size: 20px; margin: 0 0 4px; color: var(--au-color-text-title); }\n  .sub { color: var(--au-color-text-secondary); margin: 0 0 24px; font-size: 12px; }\n  .demo-block { background: var(--au-color-card-bg); border-radius: 8px; padding: 24px; margin-bottom: 20px; }\n  .demo-block > .hint { color: var(--au-color-text-secondary); font-size: 12px; margin: 0 0 12px; }\n</style>\n</head>\n<body>\n<div class=\"demo\">\n  <h1>Aurora Admin · ListPicker 组件（纯 H5）</h1>\n  <p class=\"sub\">对齐 ListPicker 规范：下拉列表、多选、分组、搜索、全选、标签</p>\n\n  <div class=\"demo-block\">\n    <p class=\"hint\">技术栈多选（分组 + 搜索 + 全选）</p>\n    <div class=\"aa-listpicker\" data-listpicker></div>\n  </div>\n</div>\n\n<script>\nconst OPTIONS = [\n  { label: '前端', children: [{ value: 'vue', label: 'Vue' }, { value: 'react', label: 'React' }, { value: 'ng', label: 'Angular' }] },\n  { label: '后端', children: [{ value: 'java', label: 'Java' }, { value: 'go', label: 'Go' }, { value: 'py', label: 'Python' }] }\n];\nconst FLAT = OPTIONS.flatMap(g => g.children);\nconst LABEL = Object.fromEntries(FLAT.map(o => [o.value, o.label]));\n\nfunction init(root) {\n  let value = ['vue', 'react'];\n  let open = false;\n  let query = '';\n\n  const trigger = document.createElement('div');\n  trigger.className = 'aa-listpicker-trigger'; trigger.setAttribute('role','button'); trigger.setAttribute('tabindex','0'); trigger.setAttribute('aria-haspopup','listbox'); trigger.setAttribute('aria-expanded','false');\n\n  function renderTrigger() {\n    if (!value.length) { trigger.innerHTML = '<span class=\"aa-listpicker-placeholder\">请选择技术栈</span>'; }\n    else {\n      trigger.innerHTML = value.map(v => `<span class=\"aa-listpicker-tag\">${LABEL[v]}<span class=\"x\" data-rm=\"${v}\">×</span></span>`).join('');\n    }\n    trigger.innerHTML += '<span class=\"aa-listpicker-caret\">▾</span>';\n    trigger.classList.toggle('is-open', open);\n  }\n\n  function renderPanel() {\n    let panel = root.querySelector('.aa-listpicker-panel');\n    if (!panel) { panel = document.createElement('div'); panel.className = 'aa-listpicker-panel'; root.appendChild(panel); }\n    const visible = FLAT.filter(o => o.label.includes(query));\n    let html = '<div class=\"aa-listpicker-search\"><input placeholder=\"搜索\"></div>';\n    html += '<div class=\"aa-listpicker-selectall\">全选</div>';\n    OPTIONS.forEach(g => {\n      const items = g.children.filter(o => o.label.includes(query));\n      if (!items.length) return;\n      html += `<div class=\"aa-listpicker-group-label\">${g.label}</div>`;\n      items.forEach(o => {\n        const checked = value.includes(o.value);\n        html += `<div class=\"aa-listpicker-option ${checked ? 'is-checked' : ''}\" data-val=\"${o.value}\"><span class=\"box\">${checked ? '✓' : ''}</span>${o.label}</div>`;\n      });\n    });\n    html += visible.length ? '' : '<div class=\"aa-listpicker-empty\">无匹配项</div>';\n    panel.innerHTML = html;\n\n    panel.querySelector('input').addEventListener('input', (e) => { query = e.target.value; renderPanel(); });\n    panel.querySelector('.aa-listpicker-selectall').addEventListener('click', () => {\n      value = [...new Set([...value, ...visible.map(o => o.value)])]; renderTrigger(); renderPanel();\n    });\n    panel.querySelectorAll('.aa-listpicker-option').forEach(opt => {\n      opt.addEventListener('click', () => {\n        const v = opt.dataset.val;\n        value = value.includes(v) ? value.filter(x => x !== v) : [...value, v];\n        renderTrigger(); renderPanel();\n      });\n    });\n  }\n\n  trigger.addEventListener('click', (e) => {\n    const rm = e.target.closest('[data-rm]');\n    if (rm) { e.stopPropagation(); value = value.filter(x => x !== rm.dataset.rm); renderTrigger(); return; }\n    e.stopPropagation();\n    open = !open; renderTrigger(); renderPanel();\n  });\n  root.appendChild(trigger);\n  document.addEventListener('click', (e) => {\n    if (!root.contains(e.target)) { open = false; query = ''; renderTrigger(); }\n  });\n  renderTrigger();\n}\ndocument.querySelectorAll('[data-listpicker]').forEach(init);\n</script>\n</body>\n</html>\n","css":"/* Aurora Admin ListPicker 样式 — 对齐 组件7.txt ListPicker：下拉列表、多选、分组、搜索、全选、标签 */\n\n.aa-listpicker { position: relative; display: inline-block; min-width: 220px; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); color: var(--au-color-text-body); }\n.aa-listpicker-trigger {\n  display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 32px; padding: 2px 28px 2px 8px;\n  background: var(--au-color-card-bg); border: 1px solid var(--au-color-border); border-radius: 4px; cursor: pointer; transition: border-color .15s, box-shadow .15s;\n}\n.aa-listpicker-trigger:hover { border-color: var(--au-color-brand); }\n.aa-listpicker-trigger.is-open { border-color: var(--au-color-brand); box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }\n.aa-listpicker-tag { background: var(--au-color-brand-bg); color: var(--au-color-brand); font-size: 12px; padding: 1px 8px; border-radius: 2px; display: inline-flex; align-items: center; gap: 4px; }\n.aa-listpicker-tag .x { cursor: pointer; opacity: .65; }\n.aa-listpicker-tag .x:hover { opacity: 1; }\n.aa-listpicker-placeholder { color: var(--au-color-text-placeholder); font-size: 14px; }\n.aa-listpicker-caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--au-color-text-secondary); }\n\n.aa-listpicker-panel { position: absolute; z-index: 100; top: calc(100% + 4px); left: 0; width: 240px; background: var(--au-color-card-bg); border: 1px solid var(--au-color-border); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); }\n.aa-listpicker-search { padding: 8px; border-bottom: 1px solid var(--au-color-border); }\n.aa-listpicker-search input { width: 100%; box-sizing: border-box; height: 30px; padding: 0 8px; border: 1px solid var(--au-color-border); border-radius: 4px; font-size: 13px; outline: none; }\n.aa-listpicker-search input:focus { border-color: var(--au-color-brand); box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }\n.aa-listpicker-selectall { padding: 6px 12px; border-bottom: 1px solid var(--au-color-border); cursor: pointer; font-size: 13px; color: var(--au-color-brand); }\n.aa-listpicker-selectall:hover { background: var(--au-color-page-bg); }\n.aa-listpicker-group-label { padding: 6px 12px; font-size: 12px; color: var(--au-color-text-secondary); }\n.aa-listpicker-option { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; font-size: 14px; }\n.aa-listpicker-option:hover { background: var(--au-color-page-bg); }\n.aa-listpicker-option.is-checked { color: var(--au-color-brand); }\n.aa-listpicker-option .box { width: 14px; height: 14px; border: 1px solid var(--au-color-border); border-radius: 3px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--au-color-text-inverse); font-size: 10px; }\n.aa-listpicker-option.is-checked .box { background: var(--au-color-brand); border-color: var(--au-color-brand); }\n.aa-listpicker-option.is-disabled { color: var(--au-color-text-disabled); cursor: not-allowed; }\n.aa-listpicker-empty { padding: 24px 12px; text-align: center; color: var(--au-color-text-placeholder); font-size: 13px; }\n","jsx":"import React, { useRef, useState, useEffect, useMemo } from 'react';\nimport './ListPicker.css';\n\n/**\n * Aurora Admin ListPicker（React）\n * 对齐 组件7.txt ListPicker 规范：下拉列表、多选、分组、搜索、全选、标签\n *\n * props:\n *  - value / defaultValue : 选中 value 数组\n *  - options : 扁平 [{value,label}] 或 分组 [{label, children}]\n *  - filterable\n *  - placeholder\n *  - onChange(keys)\n */\nexport default function ListPicker({\n  value,\n  defaultValue = [],\n  options = [],\n  filterable = true,\n  placeholder = '请选择',\n  onChange\n}) {\n  const rootRef = useRef(null);\n  const [inner, setInner] = useState(defaultValue);\n  const current = value !== undefined ? value : inner;\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState('');\n\n  const isGrouped = options.length && options[0] && options[0].children;\n  const flat = isGrouped ? options.flatMap(g => g.children) : options;\n  const labelMap = Object.fromEntries(flat.map(o => [o.value, o.label]));\n\n  const flatVisible = useMemo(() => flat.filter(o => o.label.includes(query)), [flat, query]);\n  const visibleGroups = useMemo(() => {\n    if (!isGrouped) return [{ children: flatVisible }];\n    return options\n      .map(g => ({ label: g.label, children: g.children.filter(o => o.label.includes(query)) }))\n      .filter(g => g.children.length);\n  }, [options, flatVisible, query]);\n\n  const commit = (next) => { if (value === undefined) setInner(next); onChange && onChange(next); };\n  const toggleOpt = (o) => { if (o.disabled) return; commit(current.includes(o.value) ? current.filter(x => x !== o.value) : [...current, o.value]); };\n  const remove = (v) => commit(current.filter(x => x !== v));\n  const selectAll = () => commit([...new Set([...current, ...flatVisible.map(o => o.value)])]);\n\n  useEffect(() => {\n    const onDoc = (e) => { if (rootRef.current && !rootRef.current.contains(e.target)) { setOpen(false); setQuery(''); } };\n    document.addEventListener('click', onDoc, true);\n    return () => document.removeEventListener('click', onDoc, true);\n  }, []);\n\n  return (\n    <div className=\"aa-listpicker\" ref={rootRef}>\n      <div className={`aa-listpicker-trigger${open ? ' is-open' : ''}`} onClick={() => { setOpen(!open); if (open) setQuery(''); }}>\n        {current.length ? current.map(v => (\n          <span key={v} className=\"aa-listpicker-tag\">{labelMap[v] || v}<span className=\"x\" onClick={(e) => { e.stopPropagation(); remove(v); }}>×</span></span>\n        )) : <span className=\"aa-listpicker-placeholder\">{placeholder}</span>}\n        <span className=\"aa-listpicker-caret\">▾</span>\n      </div>\n\n      {open && (\n        <div className=\"aa-listpicker-panel\">\n          {filterable && (\n            <div className=\"aa-listpicker-search\">\n              <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder=\"搜索\" />\n            </div>\n          )}\n          <div className=\"aa-listpicker-selectall\" onClick={selectAll}>全选</div>\n          {visibleGroups.map((g, gi) => (\n            <div key={gi}>\n              {g.label && <div className=\"aa-listpicker-group-label\">{g.label}</div>}\n              {g.children.map(o => (\n                <div\n                  key={o.value}\n                  className={`aa-listpicker-option${current.includes(o.value) ? ' is-checked' : ''}${o.disabled ? ' is-disabled' : ''}`}\n                  onClick={() => toggleOpt(o)}\n                >\n                  <span className=\"box\">{current.includes(o.value) ? '✓' : ''}</span>{o.label}\n                </div>\n              ))}\n            </div>\n          ))}\n          {!flatVisible.length && <div className=\"aa-listpicker-empty\">无匹配项</div>}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/*\n用法示例：\nimport ListPicker from './ListPicker';\nconst options = [{ label: '前端', children: [{ value: 'vue', label: 'Vue' }, { value: 'react', label: 'React' }] }];\n<ListPicker options={options} defaultValue={['vue']} onChange={setKeys} />\n*/\n","vue2":"<template>\n  <div class=\"aa-listpicker\" ref=\"root\">\n    <div class=\"aa-listpicker-trigger\" :class=\"{ 'is-open': open }\" @click=\"open = !open; if(!open) query=''\">\n      <template v-if=\"value.length\">\n        <span v-for=\"v in value\" :key=\"v\" class=\"aa-listpicker-tag\">\n          {{ labelOf(v) }}<span class=\"x\" @click.stop=\"remove(v)\">×</span>\n        </span>\n      </template>\n      <span v-else class=\"aa-listpicker-placeholder\">{{ placeholder }}</span>\n      <span class=\"aa-listpicker-caret\">▾</span>\n    </div>\n\n    <div v-if=\"open\" class=\"aa-listpicker-panel\">\n      <div v-if=\"filterable\" class=\"aa-listpicker-search\">\n        <input v-model=\"query\" placeholder=\"搜索\">\n      </div>\n      <div class=\"aa-listpicker-selectall\" @click=\"selectAll\">全选</div>\n      <template v-for=\"(g, gi) in visibleGroups\" :key=\"gi\">\n        <div class=\"aa-listpicker-group-label\" v-if=\"g.label\">{{ g.label }}</div>\n        <div\n          v-for=\"o in g.children\" :key=\"o.value\"\n          class=\"aa-listpicker-option\" :class=\"{ 'is-checked': value.includes(o.value), 'is-disabled': o.disabled }\"\n          @click=\"toggleOpt(o)\"\n        >\n          <span class=\"box\">{{ value.includes(o.value) ? '✓' : '' }}</span>{{ o.label }}\n        </div>\n      </template>\n      <div v-if=\"!flatVisible.length\" class=\"aa-listpicker-empty\">无匹配项</div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaListPicker',\n  props: {\n    value: { type: Array, default: () => [] },\n    options: { type: Array, required: true },\n    filterable: { type: Boolean, default: true },\n    placeholder: { type: String, default: '请选择' }\n  },\n  data() { return { open: false, query: '' }; },\n  computed: {\n    isGrouped() { return this.options.length && this.options[0] && this.options[0].children; },\n    flat() { return this.isGrouped ? this.options.flatMap(g => g.children) : this.options; },\n    labelMap() { return Object.fromEntries(this.flat.map(o => [o.value, o.label])); },\n    flatVisible() { return this.flat.filter(o => o.label.includes(this.query)); },\n    visibleGroups() {\n      if (!this.isGrouped) return [{ children: this.flatVisible }];\n      return this.options\n        .map(g => ({ label: g.label, children: g.children.filter(o => o.label.includes(this.query)) }))\n        .filter(g => g.children.length);\n    }\n  },\n  methods: {\n    labelOf(v) { return this.labelMap[v] || v; },\n    toggleOpt(o) { if (o.disabled) return; this.commit(this.value.includes(o.value) ? this.value.filter(x => x !== o.value) : [...this.value, o.value]); },\n    remove(v) { this.commit(this.value.filter(x => x !== v)); },\n    selectAll() { this.commit([...new Set([...this.value, ...this.flatVisible.map(o => o.value)])]); },\n    commit(next) { this.$emit('input', next); this.$emit('change', next); },\n    onDocClick(e) { if (this.$refs.root && !this.$refs.root.contains(e.target)) { this.open = false; this.query = ''; } }\n  },\n  mounted() { document.addEventListener('click', this.onDocClick, true); },\n  beforeDestroy() { document.removeEventListener('click', this.onDocClick, true); }\n};\n</script>\n\n<!-- 样式对齐 组件7.txt ListPicker 规范 -->\n<style>\n.aa-listpicker { position: relative; display: inline-block; min-width: 220px; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); color: #262626; }\n.aa-listpicker-trigger { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 32px; padding: 2px 28px 2px 8px; background: #fff; border: 1px solid #E8ECF1; border-radius: 4px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }\n.aa-listpicker-trigger:hover { border-color: #2F54EB; }\n.aa-listpicker-trigger.is-open { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }\n.aa-listpicker-tag { background: #F0F5FF; color: #2F54EB; font-size: 12px; padding: 1px 8px; border-radius: 2px; display: inline-flex; align-items: center; gap: 4px; }\n.aa-listpicker-tag .x { cursor: pointer; opacity: .65; }\n.aa-listpicker-tag .x:hover { opacity: 1; }\n.aa-listpicker-placeholder { color: #767676; font-size: 14px; }\n.aa-listpicker-caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #6E6E6E; }\n.aa-listpicker-panel { position: absolute; z-index: 100; top: calc(100% + 4px); left: 0; width: 240px; background: #fff; border: 1px solid #E8ECF1; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); }\n.aa-listpicker-search { padding: 8px; border-bottom: 1px solid #E8ECF1; }\n.aa-listpicker-search input { width: 100%; box-sizing: border-box; height: 30px; padding: 0 8px; border: 1px solid #E8ECF1; border-radius: 4px; font-size: 13px; outline: none; }\n.aa-listpicker-search input:focus { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }\n.aa-listpicker-selectall { padding: 6px 12px; border-bottom: 1px solid #E8ECF1; cursor: pointer; font-size: 13px; color: #2F54EB; }\n.aa-listpicker-selectall:hover { background: #F5F7FA; }\n.aa-listpicker-group-label { padding: 6px 12px; font-size: 12px; color: #6E6E6E; }\n.aa-listpicker-option { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; font-size: 14px; }\n.aa-listpicker-option:hover { background: #F5F7FA; }\n.aa-listpicker-option.is-checked { color: #2F54EB; }\n.aa-listpicker-option .box { width: 14px; height: 14px; border: 1px solid #E8ECF1; border-radius: 3px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; }\n.aa-listpicker-option.is-checked .box { background: #2F54EB; border-color: #2F54EB; }\n.aa-listpicker-option.is-disabled { color: #BFBFBF; cursor: not-allowed; }\n.aa-listpicker-empty { padding: 24px 12px; text-align: center; color: #767676; font-size: 13px; }\n</style>\n","vue3":"<template>\n  <div class=\"aa-listpicker\" ref=\"root\">\n    <div class=\"aa-listpicker-trigger\" :class=\"{ 'is-open': open }\" @click=\"toggle\">\n      <template v-if=\"modelValue.length\">\n        <span v-for=\"v in modelValue\" :key=\"v\" class=\"aa-listpicker-tag\">\n          {{ labelOf(v) }}<span class=\"x\" @click.stop=\"remove(v)\">×</span>\n        </span>\n      </template>\n      <span v-else class=\"aa-listpicker-placeholder\">{{ placeholder }}</span>\n      <span class=\"aa-listpicker-caret\">▾</span>\n    </div>\n\n    <div v-if=\"open\" class=\"aa-listpicker-panel\">\n      <div v-if=\"filterable\" class=\"aa-listpicker-search\">\n        <input v-model=\"query\" placeholder=\"搜索\">\n      </div>\n      <div class=\"aa-listpicker-selectall\" @click=\"selectAll\">全选</div>\n      <template v-for=\"(g, gi) in visibleGroups\" :key=\"gi\">\n        <div class=\"aa-listpicker-group-label\" v-if=\"g.label\">{{ g.label }}</div>\n        <div\n          v-for=\"o in g.children\" :key=\"o.value\"\n          class=\"aa-listpicker-option\" :class=\"{ 'is-checked': modelValue.includes(o.value), 'is-disabled': o.disabled }\"\n          @click=\"toggleOpt(o)\"\n        >\n          <span class=\"box\">{{ modelValue.includes(o.value) ? '✓' : '' }}</span>{{ o.label }}\n        </div>\n      </template>\n      <div v-if=\"!flatVisible.length\" class=\"aa-listpicker-empty\">无匹配项</div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onBeforeUnmount } from 'vue';\n\nconst props = defineProps({\n  modelValue: { type: Array, default: () => [] },      // 选中 value 数组\n  options: { type: Array, required: true },             // 扁平 [{value,label}] 或 分组 [{label, children}]\n  filterable: { type: Boolean, default: true },\n  placeholder: { type: String, default: '请选择' }\n});\nconst emit = defineEmits(['update:modelValue', 'change']);\n\nconst root = ref(null);\nconst open = ref(false);\nconst query = ref('');\n\nconst isGrouped = computed(() => props.options.length && props.options[0] && props.options[0].children);\nconst flat = computed(() => isGrouped.value ? props.options.flatMap(g => g.children) : props.options);\nconst labelMap = computed(() => Object.fromEntries(flat.value.map(o => [o.value, o.label])));\n\nconst flatVisible = computed(() => flat.value.filter(o => o.label.includes(query.value)));\nconst visibleGroups = computed(() => {\n  if (!isGrouped.value) return [{ children: flatVisible.value }];\n  return props.options\n    .map(g => ({ label: g.label, children: g.children.filter(o => o.label.includes(query.value)) }))\n    .filter(g => g.children.length);\n});\n\nfunction labelOf(v) { return labelMap.value[v] || v; }\nfunction toggle(openState) { open.value = !open.value; if (!open.value) query.value = ''; }\nfunction toggleOpt(o) { if (o.disabled) return; commit(modelValue.includes(o.value) ? modelValue.filter(x => x !== o.value) : [...modelValue, o.value]); }\nfunction remove(v) { commit(modelValue.filter(x => x !== v)); }\nfunction selectAll() { commit([...new Set([...modelValue, ...flatVisible.value.map(o => o.value)])]); }\nfunction commit(next) { emit('update:modelValue', next); emit('change', next); }\n\nfunction onDocClick(e) { if (root.value && !root.value.contains(e.target)) { open.value = false; query.value = ''; } }\ndocument.addEventListener('click', onDocClick, true);\nonBeforeUnmount(() => document.removeEventListener('click', onDocClick, true));\n</script>\n\n<!-- 样式对齐 组件7.txt ListPicker 规范 -->\n<style scoped>\n.aa-listpicker { position: relative; display: inline-block; min-width: 220px; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); color: #262626; }\n.aa-listpicker-trigger { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 32px; padding: 2px 28px 2px 8px; background: #fff; border: 1px solid #E8ECF1; border-radius: 4px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }\n.aa-listpicker-trigger:hover { border-color: #2F54EB; }\n.aa-listpicker-trigger.is-open { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }\n.aa-listpicker-tag { background: #F0F5FF; color: #2F54EB; font-size: 12px; padding: 1px 8px; border-radius: 2px; display: inline-flex; align-items: center; gap: 4px; }\n.aa-listpicker-tag .x { cursor: pointer; opacity: .65; }\n.aa-listpicker-tag .x:hover { opacity: 1; }\n.aa-listpicker-placeholder { color: #767676; font-size: 14px; }\n.aa-listpicker-caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #6E6E6E; }\n.aa-listpicker-panel { position: absolute; z-index: 100; top: calc(100% + 4px); left: 0; width: 240px; background: #fff; border: 1px solid #E8ECF1; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); }\n.aa-listpicker-search { padding: 8px; border-bottom: 1px solid #E8ECF1; }\n.aa-listpicker-search input { width: 100%; box-sizing: border-box; height: 30px; padding: 0 8px; border: 1px solid #E8ECF1; border-radius: 4px; font-size: 13px; outline: none; }\n.aa-listpicker-search input:focus { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }\n.aa-listpicker-selectall { padding: 6px 12px; border-bottom: 1px solid #E8ECF1; cursor: pointer; font-size: 13px; color: #2F54EB; }\n.aa-listpicker-selectall:hover { background: #F5F7FA; }\n.aa-listpicker-group-label { padding: 6px 12px; font-size: 12px; color: #6E6E6E; }\n.aa-listpicker-option { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; font-size: 14px; }\n.aa-listpicker-option:hover { background: #F5F7FA; }\n.aa-listpicker-option.is-checked { color: #2F54EB; }\n.aa-listpicker-option .box { width: 14px; height: 14px; border: 1px solid #E8ECF1; border-radius: 3px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; }\n.aa-listpicker-option.is-checked .box { background: #2F54EB; border-color: #2F54EB; }\n.aa-listpicker-option.is-disabled { color: #BFBFBF; cursor: not-allowed; }\n.aa-listpicker-empty { padding: 24px 12px; text-align: center; color: #767676; font-size: 13px; }\n</style>\n"}},{"slug":"cascader","name":"级联选择器 Cascader","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/cascader.json","category":"input","specLines":["- 多级下拉选择","- 支持搜索、动态加载","- 选中路径显示","- 支持多选","- 适用于地区、分类选择"],"specSummary":"- 多级下拉选择","contract":{"variants":["单选级联选择","多选级联选择","动态加载级联选择"],"dims":[{"name":"mode","values":["single","multiple"]},{"name":"load","values":["static","dynamic"]},{"name":"search","values":["support","none"]}],"unknowns":["动态加载时的 loading 占位样式"],"anatomy":{"input":"触发框，显示选中路径（如 华东 / 上海 / 浦东）","panel":"级联面板，多列菜单逐级展开","path":"选中路径文字展示"},"doNot":["面板列宽与最大层级数","搜索命中高亮样式"],"usage":["多级下拉选择，适用于地区、分类选择","支持搜索、动态加载","选中路径完整显示","支持多选"],"structure":{"panel":"多列下拉，列内项高同菜单 32px","trigger":"点击展开"}},"files":{"html":"../frameworks/cascader.html","css":"../frameworks/Cascader.css","jsx":"../frameworks/Cascader.jsx","vue2":"../frameworks/Cascader.vue2.vue","vue3":"../frameworks/Cascader.vue3.vue"},"sizes":{"html":7841,"css":3588,"jsx":5614,"vue2":7946,"vue3":8053},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Aurora Admin · Cascader (H5)</title>\n<link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\">\n<link rel=\"stylesheet\" href=\"./Cascader.css\">\n<style>\n  .demo { padding: 24px; background: var(--au-color-page-bg); font-family: var(--font-family); }\n  h1 { font-size: 20px; margin: 0 0 4px; color: var(--au-color-text-title); }\n  .sub { color: var(--au-color-text-secondary); margin: 0 0 24px; font-size: 12px; }\n  .demo-block { background: var(--au-color-card-bg); border-radius: 8px; padding: 24px; margin-bottom: 20px; }\n  .demo-block > .hint { color: var(--au-color-text-secondary); font-size: 12px; margin: 0 0 12px; }\n</style>\n</head>\n<body>\n<div class=\"demo\">\n  <h1>Aurora Admin · Cascader 组件（纯 H5）</h1>\n  <p class=\"sub\">对齐 Cascader 规范：多级下拉、搜索、路径显示、多选</p>\n\n  <div class=\"demo-block\">\n    <p class=\"hint\">单选 + 搜索</p>\n    <div class=\"aa-cascader\" data-cascader data-multiple=\"false\"></div>\n  </div>\n\n  <div class=\"demo-block\">\n    <p class=\"hint\">多选</p>\n    <div class=\"aa-cascader\" data-cascader data-multiple=\"true\"></div>\n  </div>\n</div>\n\n<script>\nconst OPTIONS = [\n  { value: 'zj', label: '浙江', children: [\n    { value: 'hz', label: '杭州', children: [ { value: 'xh', label: '西湖区' }, { value: 'bj', label: '滨江区' } ] },\n    { value: 'wz', label: '温州', children: [ { value: 'lc', label: '鹿城区' } ] }\n  ] },\n  { value: 'js', label: '江苏', children: [\n    { value: 'nj', label: '南京', children: [ { value: 'xk', label: '玄武区' } ] }\n  ] }\n];\n\nfunction pathLabels(values) {\n  let nodes = OPTIONS, labels = [];\n  for (const v of values) {\n    const n = nodes.find(x => x.value === v);\n    if (!n) break;\n    labels.push(n.label); nodes = n.children || [];\n  }\n  return labels;\n}\nfunction findNode(values) {\n  let nodes = OPTIONS, node = null;\n  for (const v of values) {\n    node = nodes.find(x => x.value === v);\n    if (!node) return null;\n    nodes = node.children || [];\n  }\n  return node;\n}\nfunction flatten() {\n  const out = [];\n  (function walk(list, acc) {\n    list.forEach(n => {\n      const p = [...acc, n.value];\n      if (n.children && n.children.length) walk(n.children, p);\n      else out.push(p);\n    });\n  })(OPTIONS, []);\n  return out;\n}\n\nfunction initCascader(root) {\n  const multiple = root.dataset.multiple === 'true';\n  let open = false;\n  let activePath = [];\n  let query = '';\n  // single: value = 数组路径或 null ; multiple: value = 路径数组的数组\n  let value = multiple ? [] : null;\n\n  const trigger = document.createElement('div');\n  trigger.className = 'aa-cascader-trigger'; trigger.setAttribute('role','button'); trigger.setAttribute('tabindex','0'); trigger.setAttribute('aria-haspopup','listbox'); trigger.setAttribute('aria-expanded','false');\n\n  function renderTrigger() {\n    if (multiple) {\n      if (!value.length) { trigger.innerHTML = '<span class=\"placeholder\">请选择</span><span class=\"caret\">▾</span>'; }\n      else {\n        trigger.innerHTML = '<span class=\"aa-cascader-tags\">' +\n          value.map(p => `<span class=\"aa-cascader-tag\">${pathLabels(p).join(' / ')}</span>`).join('') +\n          '</span><span class=\"caret\">▾</span>';\n      }\n    } else {\n      trigger.innerHTML = (value ? `<span>${pathLabels(value).join(' / ')}</span>` : '<span class=\"placeholder\">请选择</span>') + '<span class=\"caret\">▾</span>';\n    }\n    trigger.classList.toggle('is-open', open);\n  }\n\n  function renderPanel() {\n    let panel = root.querySelector('.aa-cascader-panel');\n    if (!panel) { panel = document.createElement('div'); panel.className = 'aa-cascader-panel'; root.appendChild(panel); }\n    if (query) {\n      const results = flatten().filter(p => pathLabels(p).join('/').includes(query));\n      panel.innerHTML = `<div class=\"aa-cascader-results\">` +\n        (results.length ? results.map(p => `<div class=\"aa-cascader-result\" data-path='${JSON.stringify(p)}'>${pathLabels(p).join(' / ')}</div>`).join('') : '<div class=\"aa-cascader-empty\">无匹配结果</div>') +\n        `</div>`;\n      panel.querySelectorAll('.aa-cascader-result').forEach(r => {\n        r.addEventListener('click', () => {\n          const p = JSON.parse(r.dataset.path);\n          if (multiple) {\n            const s = value.map(x => JSON.stringify(x));\n            const k = JSON.stringify(p);\n            if (s.includes(k)) value = value.filter(x => JSON.stringify(x) !== k);\n            else value = [...value, p];\n            renderTrigger();\n          } else { value = p; open = false; renderTrigger(); renderPanel(); }\n        });\n      });\n      return;\n    }\n    // 列视图\n    let html = '';\n    let levelNodes = OPTIONS, path = [];\n    for (let lv = 0; lv <= activePath.length; lv++) {\n      const col = levelNodes;\n      html += '<div class=\"aa-cascader-col\">';\n      col.forEach(n => {\n        const isActive = activePath[lv] === n.value;\n        const hasChild = n.children && n.children.length;\n        let box = '';\n        if (multiple && !hasChild) {\n          const sel = value.some(p => JSON.stringify(p) === JSON.stringify([...path, n.value].slice(0, [...path, n.value].length)));\n          const checked = value.some(p => JSON.stringify(p) === JSON.stringify([...path, n.value]));\n          box = `<span class=\"box\">${checked ? '✓' : ''}</span>`;\n        }\n        html += `<div class=\"aa-cascader-opt ${isActive ? 'is-active' : ''}\" data-lv=\"${lv}\" data-val=\"${n.value}\">${box}<span>${n.label}</span>${hasChild ? '<span class=\"arrow\">›</span>' : ''}</div>`;\n      });\n      html += '</div>';\n      if (lv < activePath.length) {\n        const next = levelNodes.find(x => x.value === activePath[lv]);\n        path = [...path, activePath[lv]];\n        levelNodes = next.children || [];\n      } else break;\n    }\n    panel.innerHTML = html;\n    panel.querySelectorAll('.aa-cascader-opt').forEach(opt => {\n      opt.addEventListener('click', () => {\n        const lv = +opt.dataset.lv, val = opt.dataset.val;\n        const node = findNode([...activePath.slice(0, lv), val]);\n        const full = [...activePath.slice(0, lv), val];\n        if (node && node.children && node.children.length) {\n          activePath = full; renderPanel();\n        } else {\n          if (multiple) {\n            const k = JSON.stringify(full);\n            value = value.some(p => JSON.stringify(p) === k) ? value.filter(p => JSON.stringify(p) !== k) : [...value, full];\n            renderTrigger();\n          } else { value = full; open = false; renderTrigger(); renderPanel(); }\n        }\n      });\n    });\n  }\n\n  trigger.addEventListener('click', (e) => {\n    e.stopPropagation();\n    open = !open; renderTrigger(); renderPanel();\n  });\n  root.appendChild(trigger);\n\n  root.addEventListener('click', (e) => {\n    const q = e.target.closest('.aa-cascader-search input');\n    if (q) return;\n  });\n  // 搜索框（filterable）\n  const search = document.createElement('div');\n  search.className = 'aa-cascader-search';\n  search.style.display = 'none';\n  search.innerHTML = '<input placeholder=\"搜索\"><div class=\"aa-cascader-results\"></div>';\n  search.querySelector('input').addEventListener('input', (e) => { query = e.target.value; renderPanel(); });\n  root.appendChild(search);\n\n  trigger.addEventListener('click', () => {\n    search.style.display = open ? 'block' : 'none';\n    if (open) search.querySelector('input').focus();\n  });\n\n  document.addEventListener('click', (e) => {\n    if (!root.contains(e.target)) { open = false; query = ''; renderTrigger(); renderPanel(); search.style.display = 'none'; }\n  });\n\n  renderTrigger();\n}\ndocument.querySelectorAll('[data-cascader]').forEach(initCascader);\n</script>\n</body>\n</html>\n","css":"/* Aurora Admin Cascader 样式 — 对齐 组件7.txt Cascader：多级下拉、搜索、路径显示、多选 */\n\n.aa-cascader { position: relative; display: inline-block; min-width: 200px; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); color: var(--au-color-text-body); }\n.aa-cascader-trigger {\n  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; padding: 0 12px;\n  background: var(--au-color-card-bg); border: 1px solid var(--au-color-border); border-radius: 4px; cursor: pointer; font-size: 14px; transition: border-color .15s, box-shadow .15s;\n}\n.aa-cascader-trigger:hover { border-color: var(--au-color-brand); }\n.aa-cascader-trigger.is-open { border-color: var(--au-color-brand); box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }\n.aa-cascader-trigger .placeholder { color: var(--au-color-text-placeholder); }\n.aa-cascader-trigger .caret { color: var(--au-color-text-secondary); transition: transform .15s; flex-shrink: 0; }\n.aa-cascader-trigger.is-open .caret { transform: rotate(180deg); }\n.aa-cascader-tags { display: flex; flex-wrap: wrap; gap: 4px; }\n.aa-cascader-tag { background: var(--au-color-brand-bg); color: var(--au-color-brand); font-size: 12px; padding: 1px 8px; border-radius: 2px; white-space: nowrap; }\n\n.aa-cascader-panel { position: absolute; z-index: 100; top: calc(100% + 4px); left: 0; background: var(--au-color-card-bg); border: 1px solid var(--au-color-border); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); display: flex; }\n.aa-cascader-col { min-width: 140px; max-height: 240px; overflow: auto; border-right: 1px solid var(--au-color-border); padding: 4px 0; }\n.aa-cascader-col:last-child { border-right: none; }\n.aa-cascader-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; cursor: pointer; font-size: 14px; color: var(--au-color-text-body); }\n.aa-cascader-opt:hover { background: var(--au-color-page-bg); }\n.aa-cascader-opt.is-active { background: var(--au-color-brand-bg); color: var(--au-color-brand); font-weight: 500; }\n.aa-cascader-opt .arrow { color: var(--au-color-text-secondary); font-size: 12px; }\n.aa-cascader-opt .box { width: 14px; height: 14px; border: 1px solid var(--au-color-border); border-radius: 3px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--au-color-text-inverse); font-size: 10px; }\n.aa-cascader-opt.is-checked .box { background: var(--au-color-brand); border-color: var(--au-color-brand); }\n\n.aa-cascader-search { position: absolute; z-index: 101; top: calc(100% + 4px); left: 0; width: 260px; background: var(--au-color-card-bg); border: 1px solid var(--au-color-border); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); padding: 8px; }\n.aa-cascader-search input { width: 100%; box-sizing: border-box; height: 30px; padding: 0 8px; border: 1px solid var(--au-color-border); border-radius: 4px; font-size: 13px; outline: none; }\n.aa-cascader-search input:focus { border-color: var(--au-color-brand); box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }\n.aa-cascader-search input::placeholder { color: var(--au-color-text-placeholder); }\n.aa-cascader-results { max-height: 200px; overflow: auto; margin-top: 8px; }\n.aa-cascader-result { padding: 6px 8px; cursor: pointer; font-size: 14px; color: var(--au-color-text-body); }\n.aa-cascader-result:hover { background: var(--au-color-page-bg); }\n.aa-cascader-empty { padding: 16px 8px; text-align: center; color: var(--au-color-text-placeholder); font-size: 13px; }\n","jsx":"import React, { useRef, useState, useEffect, useMemo } from 'react';\nimport './Cascader.css';\n\n/**\n * Aurora Admin Cascader（React）\n * 对齐 组件7.txt Cascader 规范：多级下拉、搜索、路径显示、多选\n *\n * props:\n *  - value / defaultValue : 单选为路径数组(或 null)，多选为路径数组的数组\n *  - options : [{ value, label, children? }]\n *  - multiple\n *  - filterable\n *  - placeholder\n *  - onChange(value)\n */\nexport default function Cascader({\n  value,\n  defaultValue = [],\n  options = [],\n  multiple = false,\n  filterable = true,\n  placeholder = '请选择',\n  onChange\n}) {\n  const rootRef = useRef(null);\n  const [inner, setInner] = useState(defaultValue);\n  const current = value !== undefined ? value : inner;\n  const [open, setOpen] = useState(false);\n  const [activePath, setActivePath] = useState([]);\n  const [query, setQuery] = useState('');\n\n  const pathLabels = (values) => {\n    let nodes = options, labels = [];\n    for (const v of (values || [])) {\n      const n = nodes.find(x => x.value === v);\n      if (!n) break;\n      labels.push(n.label); nodes = n.children || [];\n    }\n    return labels;\n  };\n  const columns = useMemo(() => {\n    const cols = [];\n    let nodes = options;\n    for (let lv = 0; lv <= activePath.length; lv++) {\n      cols.push(nodes);\n      if (lv < activePath.length) {\n        const next = nodes.find(x => x.value === activePath[lv]);\n        nodes = next.children || [];\n      } else break;\n    }\n    return cols;\n  }, [options, activePath]);\n\n  const allLeaves = useMemo(() => {\n    const out = [];\n    (function walk(list, acc) {\n      list.forEach(n => {\n        const p = [...acc, n.value];\n        if (n.children && n.children.length) walk(n.children, p);\n        else out.push(p);\n      });\n    })(options, []);\n    return out;\n  }, [options]);\n  const results = query ? allLeaves.filter(p => pathLabels(p).join('/').includes(query)) : [];\n\n  const commit = (next) => {\n    if (value === undefined) setInner(next);\n    onChange && onChange(next);\n  };\n  const choose = (n, lv) => {\n    const full = [...activePath.slice(0, lv), n.value];\n    if (n.children && n.children.length) setActivePath(full);\n    else if (multiple) {\n      const k = JSON.stringify(full);\n      const arr = Array.isArray(current) ? current : [];\n      commit(arr.some(p => JSON.stringify(p) === k) ? arr.filter(p => JSON.stringify(p) !== k) : [...arr, full]);\n    } else { commit(full); setOpen(false); }\n  };\n  const pickResult = (p) => {\n    if (multiple) {\n      const k = JSON.stringify(p);\n      const arr = Array.isArray(current) ? current : [];\n      commit(arr.some(x => JSON.stringify(x) === k) ? arr.filter(x => JSON.stringify(x) !== k) : [...arr, p]);\n    } else { commit(p); setOpen(false); }\n  };\n  const isChecked = (p) => Array.isArray(current) && current.some(x => JSON.stringify(x) === JSON.stringify(p));\n\n  useEffect(() => {\n    const onDoc = (e) => { if (rootRef.current && !rootRef.current.contains(e.target)) { setOpen(false); setQuery(''); } };\n    document.addEventListener('click', onDoc, true);\n    return () => document.removeEventListener('click', onDoc, true);\n  }, []);\n\n  return (\n    <div className=\"aa-cascader\" ref={rootRef}>\n      <div className={`aa-cascader-trigger${open ? ' is-open' : ''}`} onClick={() => { setOpen(!open); if (open) setQuery(''); }}>\n        {multiple ? (\n          current.length ? (\n            <span className=\"aa-cascader-tags\">\n              {current.map((p, i) => <span key={i} className=\"aa-cascader-tag\">{pathLabels(p).join(' / ')}</span>)}\n            </span>\n          ) : <span className=\"placeholder\">{placeholder}</span>\n        ) : (\n          <span>{current && current.length ? pathLabels(current).join(' / ') : placeholder}</span>\n        )}\n        <span className=\"caret\">▾</span>\n      </div>\n\n      {open && filterable && (\n        <div className=\"aa-cascader-search\">\n          <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder=\"搜索\" />\n        </div>\n      )}\n\n      {open && (\n        <div className=\"aa-cascader-panel\">\n          {query ? (\n            <div className=\"aa-cascader-results\">\n              {results.length ? results.map((p, i) => (\n                <div key={i} className=\"aa-cascader-result\" onClick={() => pickResult(p)}>{pathLabels(p).join(' / ')}</div>\n              )) : <div className=\"aa-cascader-empty\">无匹配结果</div>}\n            </div>\n          ) : (\n            columns.map((col, ci) => (\n              <div key={ci} className=\"aa-cascader-col\">\n                {col.map(n => (\n                  <div\n                    key={n.value}\n                    className={`aa-cascader-opt${activePath[ci] === n.value ? ' is-active' : ''}${multiple && !n.children && isChecked([...activePath.slice(0, ci), n.value]) ? ' is-checked' : ''}`}\n                    onClick={() => choose(n, ci)}\n                  >\n                    {multiple && !n.children && <span className=\"box\">{isChecked([...activePath.slice(0, ci), n.value]) ? '✓' : ''}</span>}\n                    <span>{n.label}</span>\n                    {n.children && n.children.length && <span className=\"arrow\">›</span>}\n                  </div>\n                ))}\n              </div>\n            ))\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/*\n用法示例：\nimport Cascader from './Cascader';\nconst options = [{ value: 'zj', label: '浙江', children: [{ value: 'hz', label: '杭州', children: [{ value: 'xh', label: '西湖区' }] }] }];\n<Cascader options={options} defaultValue={['zj', 'hz', 'xh']} onChange={setPath} />\n*/\n","vue2":"<template>\n  <div class=\"aa-cascader\" ref=\"root\">\n    <div class=\"aa-cascader-trigger\" :class=\"{ 'is-open': open }\" @click=\"toggle\">\n      <span v-if=\"multiple\">\n        <span v-if=\"!value.length\" class=\"placeholder\">{{ placeholder }}</span>\n        <span v-else class=\"aa-cascader-tags\">\n          <span v-for=\"(p, i) in value\" :key=\"i\" class=\"aa-cascader-tag\">{{ pathLabels(p).join(' / ') }}</span>\n        </span>\n      </span>\n      <span v-else>{{ value && value.length ? pathLabels(value).join(' / ') : placeholder }}</span>\n      <span class=\"caret\">▾</span>\n    </div>\n\n    <div v-if=\"open && filterable\" class=\"aa-cascader-search\">\n      <input v-model=\"query\" placeholder=\"搜索\">\n    </div>\n\n    <div v-if=\"open\" class=\"aa-cascader-panel\">\n      <template v-if=\"query\">\n        <div class=\"aa-cascader-results\">\n          <div v-if=\"!results.length\" class=\"aa-cascader-empty\">无匹配结果</div>\n          <div v-for=\"(p, i) in results\" :key=\"i\" class=\"aa-cascader-result\" @click=\"pickResult(p)\">{{ pathLabels(p).join(' / ') }}</div>\n        </div>\n      </template>\n      <template v-else>\n        <div v-for=\"(col, ci) in columns\" :key=\"ci\" class=\"aa-cascader-col\">\n          <div\n            v-for=\"n in col\" :key=\"n.value\"\n            class=\"aa-cascader-opt\"\n            :class=\"{ 'is-active': activePath[ci] === n.value, 'is-checked': multiple && isLeafChecked(pathTo(ci).concat([n.value])) }\"\n            @click=\"choose(n, ci)\"\n          >\n            <span v-if=\"multiple && !n.children\" class=\"box\">{{ isLeafChecked(pathTo(ci).concat([n.value])) ? '✓' : '' }}</span>\n            <span>{{ n.label }}</span>\n            <span v-if=\"n.children && n.children.length\" class=\"arrow\">›</span>\n          </div>\n        </div>\n      </template>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaCascader',\n  props: {\n    value: { type: [Array, null], default: () => [] },\n    options: { type: Array, required: true },\n    multiple: { type: Boolean, default: false },\n    filterable: { type: Boolean, default: true },\n    placeholder: { type: String, default: '请选择' }\n  },\n  data() { return { open: false, activePath: [], query: '' }; },\n  computed: {\n    columns() {\n      const cols = [];\n      let nodes = this.options, path = [];\n      for (let lv = 0; lv <= this.activePath.length; lv++) {\n        cols.push(nodes);\n        if (lv < this.activePath.length) {\n          const next = nodes.find(x => x.value === this.activePath[lv]);\n          path = path.concat([this.activePath[lv]]);\n          nodes = next.children || [];\n        } else break;\n      }\n      return cols;\n    },\n    allLeaves() {\n      const out = [];\n      (function walk(list, acc) {\n        list.forEach(n => {\n          const p = acc.concat([n.value]);\n          if (n.children && n.children.length) walk(n.children, p);\n          else out.push(p);\n        });\n      })(this.options, []);\n      return out;\n    },\n    results() {\n      return this.query ? this.allLeaves.filter(p => this.pathLabels(p).join('/').includes(this.query)) : [];\n    }\n  },\n  methods: {\n    pathLabels(values) {\n      let nodes = this.options, labels = [];\n      for (const v of (values || [])) {\n        const n = nodes.find(x => x.value === v);\n        if (!n) break;\n        labels.push(n.label); nodes = n.children || [];\n      }\n      return labels;\n    },\n    pathTo(level) { return this.activePath.slice(0, level); },\n    isLeafChecked(p) {\n      return Array.isArray(this.value) && this.value.some(x => JSON.stringify(x) === JSON.stringify(p));\n    },\n    choose(n, lv) {\n      const full = this.activePath.slice(0, lv).concat([n.value]);\n      if (n.children && n.children.length) {\n        this.activePath = full;\n      } else {\n        if (this.multiple) {\n          const k = JSON.stringify(full);\n          const arr = Array.isArray(this.value) ? this.value : [];\n          const next = arr.some(p => JSON.stringify(p) === k) ? arr.filter(p => JSON.stringify(p) !== k) : arr.concat([full]);\n          this.commit(next);\n        } else { this.commit(full); this.open = false; }\n      }\n    },\n    pickResult(p) {\n      if (this.multiple) {\n        const k = JSON.stringify(p);\n        const arr = Array.isArray(this.value) ? this.value : [];\n        const next = arr.some(x => JSON.stringify(x) === k) ? arr.filter(x => JSON.stringify(x) !== k) : arr.concat([p]);\n        this.commit(next);\n      } else { this.commit(p); this.open = false; }\n    },\n    commit(next) { this.$emit('input', next); this.$emit('change', next); },\n    toggle() { this.open = !this.open; if (!this.open) this.query = ''; },\n    onDocClick(e) {\n      if (this.$refs.root && !this.$refs.root.contains(e.target)) { this.open = false; this.query = ''; }\n    }\n  },\n  mounted() { document.addEventListener('click', this.onDocClick, true); },\n  beforeDestroy() { document.removeEventListener('click', this.onDocClick, true); }\n};\n</script>\n\n<!-- 样式对齐 组件7.txt Cascader 规范 -->\n<style>\n.aa-cascader { position: relative; display: inline-block; min-width: 200px; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); color: #262626; }\n.aa-cascader-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; padding: 0 12px; background: #fff; border: 1px solid #E8ECF1; border-radius: 4px; cursor: pointer; font-size: 14px; transition: border-color .15s, box-shadow .15s; }\n.aa-cascader-trigger:hover { border-color: #2F54EB; }\n.aa-cascader-trigger.is-open { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }\n.aa-cascader-trigger .placeholder { color: #767676; }\n.aa-cascader-trigger .caret { color: #6E6E6E; transition: transform .15s; flex-shrink: 0; }\n.aa-cascader-trigger.is-open .caret { transform: rotate(180deg); }\n.aa-cascader-tags { display: flex; flex-wrap: wrap; gap: 4px; }\n.aa-cascader-tag { background: #F0F5FF; color: #2F54EB; font-size: 12px; padding: 1px 8px; border-radius: 2px; white-space: nowrap; }\n.aa-cascader-panel { position: absolute; z-index: 100; top: calc(100% + 4px); left: 0; background: #fff; border: 1px solid #E8ECF1; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); display: flex; }\n.aa-cascader-col { min-width: 140px; max-height: 240px; overflow: auto; border-right: 1px solid #E8ECF1; padding: 4px 0; }\n.aa-cascader-col:last-child { border-right: none; }\n.aa-cascader-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; cursor: pointer; font-size: 14px; color: #262626; }\n.aa-cascader-opt:hover { background: #F5F7FA; }\n.aa-cascader-opt.is-active { background: #F0F5FF; color: #2F54EB; font-weight: 500; }\n.aa-cascader-opt .arrow { color: #6E6E6E; font-size: 12px; }\n.aa-cascader-opt .box { width: 14px; height: 14px; border: 1px solid #E8ECF1; border-radius: 3px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; }\n.aa-cascader-opt.is-checked .box { background: #2F54EB; border-color: #2F54EB; }\n.aa-cascader-search { position: absolute; z-index: 101; top: calc(100% + 4px); left: 0; width: 260px; background: #fff; border: 1px solid #E8ECF1; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); padding: 8px; }\n.aa-cascader-search input { width: 100%; box-sizing: border-box; height: 30px; padding: 0 8px; border: 1px solid #E8ECF1; border-radius: 4px; font-size: 13px; outline: none; }\n.aa-cascader-search input:focus { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }\n.aa-cascader-search input::placeholder { color: #767676; }\n.aa-cascader-results { max-height: 200px; overflow: auto; margin-top: 8px; }\n.aa-cascader-result { padding: 6px 8px; cursor: pointer; font-size: 14px; color: #262626; }\n.aa-cascader-result:hover { background: #F5F7FA; }\n.aa-cascader-empty { padding: 16px 8px; text-align: center; color: #767676; font-size: 13px; }\n</style>\n","vue3":"<template>\n  <div class=\"aa-cascader\" ref=\"root\">\n    <div class=\"aa-cascader-trigger\" :class=\"{ 'is-open': open }\" @click=\"toggle\">\n      <span v-if=\"multiple\">\n        <span v-if=\"!modelValue.length\" class=\"placeholder\">{{ placeholder }}</span>\n        <span v-else class=\"aa-cascader-tags\">\n          <span v-for=\"(p, i) in modelValue\" :key=\"i\" class=\"aa-cascader-tag\">{{ pathLabels(p).join(' / ') }}</span>\n        </span>\n      </span>\n      <span v-else>{{ modelValue && modelValue.length ? pathLabels(modelValue).join(' / ') : placeholder }}</span>\n      <span class=\"caret\">▾</span>\n    </div>\n\n    <div v-if=\"open && filterable\" class=\"aa-cascader-search\">\n      <input v-model=\"query\" placeholder=\"搜索\">\n    </div>\n\n    <div v-if=\"open\" class=\"aa-cascader-panel\">\n      <template v-if=\"query\">\n        <div class=\"aa-cascader-results\">\n          <div v-if=\"!results.length\" class=\"aa-cascader-empty\">无匹配结果</div>\n          <div v-for=\"(p, i) in results\" :key=\"i\" class=\"aa-cascader-result\" @click=\"pickResult(p)\">{{ pathLabels(p).join(' / ') }}</div>\n        </div>\n      </template>\n      <template v-else>\n        <div v-for=\"(col, ci) in columns\" :key=\"ci\" class=\"aa-cascader-col\">\n          <div\n            v-for=\"n in col\" :key=\"n.value\"\n            class=\"aa-cascader-opt\"\n            :class=\"{ 'is-active': activePath[ci] === n.value, 'is-checked': multiple && isLeafChecked([...pathTo(ci), n.value]) }\"\n            @click=\"choose(n, ci)\"\n          >\n            <span v-if=\"multiple && !n.children\" class=\"box\">{{ isLeafChecked([...pathTo(ci), n.value]) ? '✓' : '' }}</span>\n            <span>{{ n.label }}</span>\n            <span v-if=\"n.children && n.children.length\" class=\"arrow\">›</span>\n          </div>\n        </div>\n      </template>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onBeforeUnmount } from 'vue';\n\nconst props = defineProps({\n  modelValue: { type: [Array, null], default: () => [] }, // single: 路径数组 | null ; multiple: 路径数组的数组\n  options: { type: Array, required: true },               // [{ value, label, children? }]\n  multiple: { type: Boolean, default: false },\n  filterable: { type: Boolean, default: true },\n  placeholder: { type: String, default: '请选择' }\n});\nconst emit = defineEmits(['update:modelValue', 'change']);\n\nconst root = ref(null);\nconst open = ref(false);\nconst activePath = ref([]);\nconst query = ref('');\n\nfunction pathLabels(values) {\n  let nodes = props.options, labels = [];\n  for (const v of (values || [])) {\n    const n = nodes.find(x => x.value === v);\n    if (!n) break;\n    labels.push(n.label); nodes = n.children || [];\n  }\n  return labels;\n}\nfunction pathTo(level) { return activePath.value.slice(0, level); }\n\nconst columns = computed(() => {\n  const cols = [];\n  let nodes = props.options, path = [];\n  for (let lv = 0; lv <= activePath.value.length; lv++) {\n    cols.push(nodes);\n    if (lv < activePath.value.length) {\n      const next = nodes.find(x => x.value === activePath.value[lv]);\n      path = [...path, activePath.value[lv]];\n      nodes = next.children || [];\n    } else break;\n  }\n  return cols;\n});\n\nconst allLeaves = computed(() => {\n  const out = [];\n  (function walk(list, acc) {\n    list.forEach(n => {\n      const p = [...acc, n.value];\n      if (n.children && n.children.length) walk(n.children, p);\n      else out.push(p);\n    });\n  })(props.options, []);\n  return out;\n});\nconst results = computed(() =>\n  query.value ? allLeaves.value.filter(p => pathLabels(p).join('/').includes(query.value)) : []\n);\n\nfunction choose(n, lv) {\n  const full = [...activePath.value.slice(0, lv), n.value];\n  if (n.children && n.children.length) {\n    activePath.value = full;\n  } else {\n    if (props.multiple) {\n      const k = JSON.stringify(full);\n      const arr = Array.isArray(props.modelValue) ? props.modelValue : [];\n      const next = arr.some(p => JSON.stringify(p) === k)\n        ? arr.filter(p => JSON.stringify(p) !== k)\n        : [...arr, full];\n      commit(next);\n    } else {\n      commit(full);\n      open.value = false;\n    }\n  }\n}\nfunction isLeafChecked(p) {\n  return Array.isArray(props.modelValue) && props.modelValue.some(x => JSON.stringify(x) === JSON.stringify(p));\n}\nfunction pickResult(p) {\n  if (props.multiple) {\n    const k = JSON.stringify(p);\n    const arr = Array.isArray(props.modelValue) ? props.modelValue : [];\n    const next = arr.some(x => JSON.stringify(x) === k) ? arr.filter(x => JSON.stringify(x) !== k) : [...arr, p];\n    commit(next);\n  } else { commit(p); open.value = false; }\n}\nfunction commit(next) {\n  emit('update:modelValue', next);\n  emit('change', next);\n}\nfunction toggle() {\n  open.value = !open.value;\n  if (!open.value) { query.value = ''; }\n}\nfunction onDocClick(e) {\n  if (root.value && !root.value.contains(e.target)) { open.value = false; query.value = ''; }\n}\ndocument.addEventListener('click', onDocClick, true);\nonBeforeUnmount(() => document.removeEventListener('click', onDocClick, true));\n</script>\n\n<!-- 样式对齐 组件7.txt Cascader 规范 -->\n<style scoped>\n.aa-cascader { position: relative; display: inline-block; min-width: 200px; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); color: #262626; }\n.aa-cascader-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; padding: 0 12px; background: #fff; border: 1px solid #E8ECF1; border-radius: 4px; cursor: pointer; font-size: 14px; transition: border-color .15s, box-shadow .15s; }\n.aa-cascader-trigger:hover { border-color: #2F54EB; }\n.aa-cascader-trigger.is-open { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }\n.aa-cascader-trigger .placeholder { color: #767676; }\n.aa-cascader-trigger .caret { color: #6E6E6E; transition: transform .15s; flex-shrink: 0; }\n.aa-cascader-trigger.is-open .caret { transform: rotate(180deg); }\n.aa-cascader-tags { display: flex; flex-wrap: wrap; gap: 4px; }\n.aa-cascader-tag { background: #F0F5FF; color: #2F54EB; font-size: 12px; padding: 1px 8px; border-radius: 2px; white-space: nowrap; }\n.aa-cascader-panel { position: absolute; z-index: 100; top: calc(100% + 4px); left: 0; background: #fff; border: 1px solid #E8ECF1; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); display: flex; }\n.aa-cascader-col { min-width: 140px; max-height: 240px; overflow: auto; border-right: 1px solid #E8ECF1; padding: 4px 0; }\n.aa-cascader-col:last-child { border-right: none; }\n.aa-cascader-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; cursor: pointer; font-size: 14px; color: #262626; }\n.aa-cascader-opt:hover { background: #F5F7FA; }\n.aa-cascader-opt.is-active { background: #F0F5FF; color: #2F54EB; font-weight: 500; }\n.aa-cascader-opt .arrow { color: #6E6E6E; font-size: 12px; }\n.aa-cascader-opt .box { width: 14px; height: 14px; border: 1px solid #E8ECF1; border-radius: 3px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; }\n.aa-cascader-opt.is-checked .box { background: #2F54EB; border-color: #2F54EB; }\n.aa-cascader-search { position: absolute; z-index: 101; top: calc(100% + 4px); left: 0; width: 260px; background: #fff; border: 1px solid #E8ECF1; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); padding: 8px; }\n.aa-cascader-search input { width: 100%; box-sizing: border-box; height: 30px; padding: 0 8px; border: 1px solid #E8ECF1; border-radius: 4px; font-size: 13px; outline: none; }\n.aa-cascader-search input:focus { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }\n.aa-cascader-search input::placeholder { color: #767676; }\n.aa-cascader-results { max-height: 200px; overflow: auto; margin-top: 8px; }\n.aa-cascader-result { padding: 6px 8px; cursor: pointer; font-size: 14px; color: #262626; }\n.aa-cascader-result:hover { background: #F5F7FA; }\n.aa-cascader-empty { padding: 16px 8px; text-align: center; color: #767676; font-size: 13px; }\n</style>\n"}},{"slug":"colorpicker","name":"颜色选择器 ColorPicker","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/colorpicker.json","category":"input","specLines":["- 预设色板 + 自定义拾色器","- 支持 HEX、RGB、HSL","- 透明度调节","- 实时预览","- 适用于主题配置、标签颜色"],"specSummary":"- 预设色板 + 自定义拾色器","contract":{"variants":["预设色板拾色","自定义拾色（带透明度）"],"dims":[{"name":"format","values":["HEX","RGB","HSL"]},{"name":"alpha","values":["support","none"]},{"name":"source","values":["preset-palette","custom","both"]}],"unknowns":["预设色板的具体色值清单"],"anatomy":{"palette":"预设色板","picker":"自定义拾色器","preview":"实时预览"},"doNot":["吸管取色"],"usage":["预设色板 + 自定义拾色器","支持 HEX、RGB、HSL","透明度调节","实时预览","适用于主题配置、标签颜色"],"structure":{"formats":"HEX RGB HSL"}},"files":{"html":"../frameworks/ColorPicker.html","css":"../frameworks/ColorPicker.css","jsx":"../frameworks/ColorPicker.jsx","vue2":"../frameworks/ColorPicker.vue2.vue","vue3":"../frameworks/ColorPicker.vue3.vue"},"sizes":{"html":3251,"css":1518,"jsx":1917,"vue2":1988,"vue3":1899},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · ColorPicker（普通 H5）</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"ColorPicker.css\" />\n  <style>body{margin:0;padding:24px;background: var(--au-color-page-bg);} .aa-panel{background: var(--au-color-card-bg);border: 1px solid var(--au-color-border);border-radius:8px;padding:16px;width:240px;}</style>\n</head>\n<body>\n  <div class=\"aa-panel\">\n    <div class=\"aa-colorpicker\" role=\"group\" id=\"app\"></div>\n  </div>\n\n  <script>\n    var PRESETS = ['#2F54EB','#1D39C4','#10239E','#CF1322','#8C5A00','#2E7D0A','#13C2C2','#722ED1',\n                   '#EB2F96','#8C5A00','#A0D911','#1890FF','#2F54EB','#000000','#595959','#6E6E6E'];\n    var state = { hex: '#2F54EB', alpha: 1 };\n\n    function rgba(hex, a) {\n      var n = parseInt(hex.slice(1), 16);\n      return 'rgba(' + ((n>>16)&255) + ',' + ((n>>8)&255) + ',' + (n&255) + ',' + a + ')';\n    }\n    function render() {\n      var root = document.getElementById('app');\n      var swatches = PRESETS.map(function (c) {\n        return '<div class=\"aa-colorpicker-swatch ' + (c.toLowerCase() === state.hex.toLowerCase() ? 'is-active' : '') + '\" role=\"group\" style=\"background:' + c + '\" data-hex=\"' + c + '\"></div>';\n      }).join('');\n      root.innerHTML =\n        '<div class=\"aa-colorpicker-presets\" role=\"group\">' + swatches + '</div>' +\n        '<div class=\"aa-colorpicker-row\" role=\"group\">' +\n          '<div class=\"aa-colorpicker-preview\" role=\"group\" style=\"background:' + rgba(state.hex, state.alpha) + '\"></div>' +\n          '<input type=\"color\" class=\"aa-colorpicker-native\" role=\"group\" id=\"native\" value=\"' + state.hex + '\" />' +\n          '<input class=\"aa-colorpicker-hex\" role=\"group\" id=\"hex\" value=\"' + state.hex.toUpperCase() + '\" maxlength=\"7\" />' +\n        '</div>' +\n        '<div class=\"aa-colorpicker-alpha\" role=\"group\">透明度' +\n          '<input type=\"range\" id=\"alpha\" min=\"0\" max=\"100\" value=\"' + Math.round(state.alpha*100) + '\" />' +\n          '<span id=\"alval\">' + Math.round(state.alpha*100) + '%</span>' +\n        '</div>';\n\n      root.querySelectorAll('.aa-colorpicker-swatch').forEach(function (el) {\n        el.addEventListener('click', function () { state.hex = el.dataset.hex; render(); });\n      });\n      document.getElementById('native').addEventListener('input', function (e) { state.hex = e.target.value; render(); });\n      document.getElementById('hex').addEventListener('input', function (e) {\n        var v = e.target.value;\n        if (/^#[0-9a-fA-F]{6}$/.test(v)) { state.hex = v; document.getElementById('app').querySelector('.aa-colorpicker-preview').style.background = rgba(state.hex, state.alpha); }\n      });\n      document.getElementById('alpha').addEventListener('input', function (e) {\n        state.alpha = e.target.value / 100;\n        document.getElementById('alval').textContent = e.target.value + '%';\n        document.getElementById('app').querySelector('.aa-colorpicker-preview').style.background = rgba(state.hex, state.alpha);\n      });\n    }\n    render();\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin ColorPicker 样式 — 对齐 组件7.txt ColorPicker：预设色板 + 自定义拾色，HEX 显示，透明度 */\n\n.aa-colorpicker { font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); width: 240px; }\n.aa-colorpicker-presets { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-bottom: 12px; }\n.aa-colorpicker-swatch { height: 22px; border-radius: 4px; cursor: pointer; border: 1px solid rgba(0,0,0,0.06); }\n.aa-colorpicker-swatch.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2F54EB; }\n.aa-colorpicker-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }\n.aa-colorpicker-preview { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--au-color-border); flex-shrink: 0; }\n.aa-colorpicker-native { width: 28px; height: 28px; padding: 0; border: 1px solid var(--au-color-border); border-radius: 6px; background: none; cursor: pointer; }\n.aa-colorpicker-hex { flex: 1; height: 30px; border: 1px solid var(--au-color-border); border-radius: 6px; padding: 0 8px; font-size: 13px; color: var(--au-color-text-body); text-transform: uppercase; }\n.aa-colorpicker-hex:focus { border-color: var(--au-color-brand); outline: none; box-shadow: 0 0 0 3px rgba(47,84,235,0.2); }\n.aa-colorpicker-alpha { display: flex; align-items: center; gap: 8px; }\n.aa-colorpicker-alpha input { flex: 1; }\n.aa-colorpicker-alpha span { font-size: 12px; color: var(--au-color-text-secondary); width: 34px; text-align: right; }\n","jsx":"import React, { useState } from 'react';\nimport './ColorPicker.css';\n\nconst DEFAULT_PRESETS = ['#2F54EB','#1D39C4','#10239E','#CF1322','#8C5A00','#2E7D0A','#13C2C2','#722ED1',\n  '#EB2F96','#8C5A00','#A0D911','#1890FF','#000000','#595959','#6E6E6E','#BFBFBF'];\n\nexport default function ColorPicker({ value = '#2F54EB', presets = DEFAULT_PRESETS, onChange }) {\n  const [hex, setHex] = useState(value);\n  const [alpha, setAlpha] = useState(1);\n\n  const n = parseInt(hex.slice(1), 16);\n  const preview = `rgba(${(n >> 16) & 255},${(n >> 8) & 255},${n & 255},${alpha})`;\n\n  function emit(nextHex, nextAlpha) {\n    onChange && onChange({ hex: nextHex, alpha: nextAlpha });\n  }\n  function onHexInput(e) {\n    const v = e.target.value;\n    if (/^#[0-9a-fA-F]{6}$/.test(v)) { setHex(v); emit(v, alpha); }\n  }\n\n  return (\n    <div className=\"aa-colorpicker\">\n      <div className=\"aa-colorpicker-presets\">\n        {presets.map((c, i) => (\n          <div\n            key={i}\n            className={'aa-colorpicker-swatch' + (c.toLowerCase() === hex.toLowerCase() ? ' is-active' : '')}\n            style={{ background: c }}\n            onClick={() => { setHex(c); emit(c, alpha); }}\n          />\n        ))}\n      </div>\n      <div className=\"aa-colorpicker-row\">\n        <div className=\"aa-colorpicker-preview\" style={{ background: preview }} />\n        <input type=\"color\" className=\"aa-colorpicker-native\" value={hex} onChange={e => { setHex(e.target.value); emit(e.target.value, alpha); }} />\n        <input className=\"aa-colorpicker-hex\" value={hex.toUpperCase()} maxLength={7} onChange={onHexInput} />\n      </div>\n      <div className=\"aa-colorpicker-alpha\">\n        透明度\n        <input type=\"range\" min=\"0\" max=\"100\" value={Math.round(alpha * 100)} onChange={e => { setAlpha(e.target.value / 100); emit(hex, e.target.value / 100); }} />\n        <span>{Math.round(alpha * 100)}%</span>\n      </div>\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-colorpicker\">\n    <div class=\"aa-colorpicker-presets\">\n      <div v-for=\"(c, i) in presets\" :key=\"i\" class=\"aa-colorpicker-swatch\"\n           :class=\"{ 'is-active': c.toLowerCase() === hex.toLowerCase() }\"\n           :style=\"{ background: c }\" @click=\"setHex(c)\"></div>\n    </div>\n    <div class=\"aa-colorpicker-row\">\n      <div class=\"aa-colorpicker-preview\" :style=\"{ background: preview }\"></div>\n      <input type=\"color\" class=\"aa-colorpicker-native\" :value=\"hex\" @input=\"setHex($event.target.value)\" />\n      <input class=\"aa-colorpicker-hex\" :value=\"hex.toUpperCase()\" maxlength=\"7\" @input=\"onHexInput\" />\n    </div>\n    <div class=\"aa-colorpicker-alpha\">\n      透明度\n      <input type=\"range\" min=\"0\" max=\"100\" :value=\"Math.round(alpha * 100)\" @input=\"setAlpha($event.target.value / 100)\" />\n      <span>{{ Math.round(alpha * 100) }}%</span>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaColorPicker',\n  props: {\n    value: { type: String, default: '#2F54EB' },\n    presets: {\n      type: Array,\n      default: function () {\n        return ['#2F54EB','#1D39C4','#10239E','#CF1322','#8C5A00','#2E7D0A','#13C2C2','#722ED1',\n                '#EB2F96','#8C5A00','#A0D911','#1890FF','#000000','#595959','#6E6E6E','#BFBFBF'];\n      }\n    }\n  },\n  data: function () { return { hex: this.value, alpha: 1 }; },\n  computed: {\n    preview: function () {\n      var n = parseInt(this.hex.slice(1), 16);\n      return 'rgba(' + ((n >> 16) & 255) + ',' + ((n >> 8) & 255) + ',' + (n & 255) + ',' + this.alpha + ')';\n    }\n  },\n  methods: {\n    setHex: function (v) { this.hex = v; this.emit(); },\n    onHexInput: function (e) {\n      var v = e.target.value;\n      if (/^#[0-9a-fA-F]{6}$/.test(v)) { this.hex = v; this.emit(); }\n    },\n    setAlpha: function (a) { this.alpha = a; this.emit(); },\n    emit: function () { this.$emit('change', { hex: this.hex, alpha: this.alpha }); }\n  }\n};\n</script>\n\n<style src=\"./ColorPicker.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-colorpicker\">\n    <div class=\"aa-colorpicker-presets\">\n      <div v-for=\"(c, i) in presets\" :key=\"i\" class=\"aa-colorpicker-swatch\"\n           :class=\"{ 'is-active': c.toLowerCase() === hex.toLowerCase() }\"\n           :style=\"{ background: c }\" @click=\"setHex(c)\"></div>\n    </div>\n    <div class=\"aa-colorpicker-row\">\n      <div class=\"aa-colorpicker-preview\" :style=\"{ background: preview }\"></div>\n      <input type=\"color\" class=\"aa-colorpicker-native\" :value=\"hex\" @input=\"setHex($event.target.value)\" />\n      <input class=\"aa-colorpicker-hex\" :value=\"hex.toUpperCase()\" maxlength=\"7\" @input=\"onHexInput\" />\n    </div>\n    <div class=\"aa-colorpicker-alpha\">\n      透明度\n      <input type=\"range\" min=\"0\" max=\"100\" :value=\"Math.round(alpha * 100)\" @input=\"setAlpha($event.target.value / 100)\" />\n      <span>{{ Math.round(alpha * 100) }}%</span>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed } from 'vue';\nconst props = defineProps({\n  value: { type: String, default: '#2F54EB' },\n  presets: {\n    type: Array,\n    default: () => ['#2F54EB','#1D39C4','#10239E','#CF1322','#8C5A00','#2E7D0A','#13C2C2','#722ED1',\n                   '#EB2F96','#8C5A00','#A0D911','#1890FF','#000000','#595959','#6E6E6E','#BFBFBF']\n  }\n});\nconst emit = defineEmits(['change']);\nconst hex = ref(props.value);\nconst alpha = ref(1);\nconst preview = computed(() => {\n  const n = parseInt(hex.value.slice(1), 16);\n  return `rgba(${(n >> 16) & 255},${(n >> 8) & 255},${n & 255},${alpha.value})`;\n});\nfunction setHex(v) { hex.value = v; emitChange(); }\nfunction onHexInput(e) {\n  const v = e.target.value;\n  if (/^#[0-9a-fA-F]{6}$/.test(v)) { hex.value = v; emitChange(); }\n}\nfunction setAlpha(a) { alpha.value = a; emitChange(); }\nfunction emitChange() { emit('change', { hex: hex.value, alpha: alpha.value }); }\n</script>\n\n<style src=\"./ColorPicker.css\"></style>\n"}},{"slug":"rangequickpicker","name":"日期范围快捷选择 RangeQuickPicker","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/rangequickpicker.json","category":"input","specLines":["- 日期范围选择器增强","- 内置快捷选项：今天、昨天、近7天、近30天、本月、上月、本年","- 自定义快捷项配置","- 支持时间范围","- 适用于报表筛选"],"specSummary":"- 日期范围选择器增强","contract":{"variants":["今天","近 7 天","本月","自定义 + 时间范围"],"dims":[{"name":"preset","values":["today","yesterday","last7","last30","thisMonth","lastMonth","thisYear","custom"]},{"name":"withTime","values":["true","false"]}],"unknowns":["快捷项与日历面板的排列方式","时间范围的选择粒度"],"anatomy":{"trigger":"日期范围选择器增强","presets":"内置快捷选项：今天、昨天、近7天、近30天、本月、上月、本年","custom":"自定义快捷项配置"},"doNot":["日历面板的日期单元格样式（见 Calendar 契约）"],"usage":["日期范围选择器增强","内置快捷选项：今天、昨天、近7天、近30天、本月、上月、本年","自定义快捷项配置","支持时间范围","适用于报表筛选"],"structure":{"presets":"内置 7 项","time":"可选"}},"files":{"html":"../frameworks/RangeQuickPicker.html","css":"../frameworks/RangeQuickPicker.css","jsx":"../frameworks/RangeQuickPicker.jsx","vue2":"../frameworks/RangeQuickPicker.vue2.vue","vue3":"../frameworks/RangeQuickPicker.vue3.vue"},"sizes":{"html":4816,"css":2208,"jsx":3420,"vue2":3132,"vue3":3014},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · RangeQuickPicker</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"./RangeQuickPicker.css\" />\n</head>\n<body>\n  <div class=\"aa-page\">\n    <h2 class=\"aa-h2\">RangeQuickPicker 日期范围快捷选择</h2>\n    <p class=\"aa-desc\">内置快捷选项（今天、近7天、本月等），也支持自定义起止日期。</p>\n\n    <div class=\"aa-demo\">\n      <div class=\"aa-demo__title\">报表时间筛选</div>\n      <div class=\"aa-range\" id=\"range\">\n        <div class=\"aa-range-trigger\" role=\"button\" tabindex=\"0\" aria-haspopup=\"listbox\" aria-expanded=\"false\" id=\"trigger\">\n          <span id=\"label\" class=\"aa-range-placeholder\" role=\"button\" tabindex=\"0\">请选择时间范围</span>\n        </div>\n        <div class=\"aa-range-pop\" id=\"pop\" style=\"display:none\">\n          <div class=\"aa-range-presets\" id=\"presets\"></div>\n          <div class=\"aa-range-custom\">\n            <input type=\"date\" id=\"start\" />\n            <span class=\"aa-range-tilde\">~</span>\n            <input type=\"date\" id=\"end\" />\n          </div>\n          <div class=\"aa-range-actions\">\n            <button class=\"aa-range-cancel\" id=\"cancel\">取消</button>\n            <button class=\"aa-range-ok\" id=\"ok\">确定</button>\n          </div>\n        </div>\n      </div>\n      <p class=\"aa-code-tip\" id=\"out\"></p>\n    </div>\n  </div>\n\n  <script>\n    var PRESETS = [\n      { label: '今天', days: 0 },\n      { label: '昨天', days: -1, len: 1 },\n      { label: '近7天', days: -6 },\n      { label: '近30天', days: -29 },\n      { label: '本月', month: 'this' },\n      { label: '上月', month: 'last' },\n      { label: '本年', year: 'this' }\n    ];\n    function fmt(d) {\n      return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');\n    }\n    function presetRange(p) {\n      var end = new Date(); end.setHours(0, 0, 0, 0);\n      var start = new Date(end);\n      if (p.year === 'this') { start = new Date(end.getFullYear(), 0, 1); }\n      else if (p.month === 'this') { start = new Date(end.getFullYear(), end.getMonth(), 1); }\n      else if (p.month === 'last') { start = new Date(end.getFullYear(), end.getMonth() - 1, 1); var e = new Date(end.getFullYear(), end.getMonth(), 1); end = new Date(e - 1); }\n      else { start.setDate(end.getDate() + (p.days || 0)); }\n      if (p.days === -1 && !p.len) { start = new Date(end); }\n      if (p.days === -1 && p.len) { start = new Date(end); start.setDate(end.getDate() - (p.len - 1)); }\n      return { start: fmt(start), end: fmt(end) };\n    }\n\n    var range = document.getElementById('range');\n    var trigger = document.getElementById('trigger');\n    var pop = document.getElementById('pop');\n    var label = document.getElementById('label');\n    var out = document.getElementById('out');\n    var cur = { start: '', end: '' };\n\n    var presetsEl = document.getElementById('presets');\n    PRESETS.forEach(function (p, i) {\n      var b = document.createElement('button');\n      b.className = 'aa-range-preset'; b.textContent = p.label;\n      b.onclick = function () {\n        var r = presetRange(p);\n        cur = r; document.getElementById('start').value = r.start; document.getElementById('end').value = r.end;\n        Array.prototype.forEach.call(presetsEl.children, function (c) { c.classList.remove('is-active'); });\n        b.classList.add('is-active');\n      };\n      presetsEl.appendChild(b);\n    });\n\n    function refresh() {\n      if (cur.start && cur.end) {\n        label.textContent = cur.start + '  ~  ' + cur.end;\n        label.classList.remove('aa-range-placeholder');\n        out.textContent = '已选范围：' + cur.start + ' 至 ' + cur.end;\n      }\n    }\n    trigger.onclick = function (e) {\n      e.stopPropagation();\n      pop.style.display = pop.style.display === 'none' ? 'block' : 'none';\n      trigger.classList.toggle('is-focus', pop.style.display === 'block');\n    };\n    document.getElementById('ok').onclick = function () {\n      cur.start = document.getElementById('start').value;\n      cur.end = document.getElementById('end').value;\n      pop.style.display = 'none'; trigger.classList.remove('is-focus');\n      Array.prototype.forEach.call(presetsEl.children, function (c) { c.classList.remove('is-active'); });\n      refresh();\n    };\n    document.getElementById('cancel').onclick = function () { pop.style.display = 'none'; trigger.classList.remove('is-focus'); };\n    document.addEventListener('click', function (e) { if (!range.contains(e.target)) { pop.style.display = 'none'; trigger.classList.remove('is-focus'); } });\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin RangeQuickPicker 样式 — 日期范围 + 快捷选项 */\n.aa-range { position: relative; display: inline-block; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); }\n.aa-range-trigger { display: flex; align-items: center; gap: 8px; border: 1px solid var(--au-color-border); border-radius: 6px; padding: 0 10px; height: 36px; background: var(--au-color-card-bg); cursor: pointer; color: var(--au-color-text-body); font-size: 14px; min-width: 220px; }\n.aa-range-trigger.is-focus { border-color: var(--au-color-brand); box-shadow: 0 0 0 3px rgba(47,84,235,0.2); }\n.aa-range-trigger .aa-range-sep { color: var(--au-color-text-secondary); }\n.aa-range-placeholder { color: var(--au-color-text-placeholder); }\n.aa-range-pop { position: absolute; top: 42px; left: 0; z-index: 20; background: var(--au-color-card-bg); border: 1px solid var(--au-color-border); border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,0.12); padding: 12px; width: 300px; }\n.aa-range-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }\n.aa-range-preset { padding: 4px 10px; border: 1px solid var(--au-color-border); border-radius: 4px; font-size: 13px; cursor: pointer; color: var(--au-color-text-tertiary); background: var(--au-color-card-bg); }\n.aa-range-preset:hover { border-color: #B7C4FF; }\n.aa-range-preset.is-active { border-color: var(--au-color-brand); color: var(--au-color-brand); background: var(--au-color-brand-bg); }\n.aa-range-custom { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }\n.aa-range-custom input { border: 1px solid var(--au-color-border); border-radius: 4px; padding: 5px 8px; font-size: 13px; color: var(--au-color-text-body); }\n.aa-range-custom .aa-range-tilde { color: var(--au-color-text-secondary); }\n.aa-range-actions { text-align: right; }\n.aa-range-actions button { border: none; border-radius: 4px; padding: 5px 14px; font-size: 13px; cursor: pointer; }\n.aa-range-actions .aa-range-ok { background: var(--au-color-brand); color: var(--au-color-text-inverse); }\n.aa-range-actions .aa-range-cancel { background: var(--au-color-disabled-bg); color: var(--au-color-text-tertiary); margin-right: 8px; }\n","jsx":"import React, { useState, useRef, useEffect } from 'react';\nimport './RangeQuickPicker.css';\n\nfunction fmt(d) {\n  return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');\n}\nfunction presetRange(p) {\n  const end = new Date();\n  end.setHours(0, 0, 0, 0);\n  const start = new Date(end);\n  if (p.year === 'this') start.setMonth(0, 1);\n  else if (p.month === 'this') start.setDate(1);\n  else if (p.month === 'last') {\n    start = new Date(end.getFullYear(), end.getMonth() - 1, 1);\n    end.setDate(0);\n  } else {\n    start.setDate(end.getDate() + (p.days || 0));\n    if (p.len) start.setDate(end.getDate() - (p.len - 1));\n  }\n  return { start: fmt(start), end: fmt(end) };\n}\n\nconst DEFAULT_PRESETS = [\n  { label: '今天', days: 0 },\n  { label: '昨天', days: -1, len: 1 },\n  { label: '近7天', days: -6 },\n  { label: '近30天', days: -29 },\n  { label: '本月', month: 'this' },\n  { label: '上月', month: 'last' },\n  { label: '本年', year: 'this' }\n];\n\nexport default function RangeQuickPicker({ modelValue = { start: '', end: '' }, presets = DEFAULT_PRESETS, onChange }) {\n  const root = useRef(null);\n  const [open, setOpen] = useState(false);\n  const [start, setStart] = useState(modelValue.start);\n  const [end, setEnd] = useState(modelValue.end);\n  const [activeIndex, setActiveIndex] = useState(-1);\n\n  useEffect(() => {\n    function onDoc(e) {\n      if (root.current && !root.current.contains(e.target)) {\n        setOpen(false);\n        setActiveIndex(-1);\n      }\n    }\n    document.addEventListener('click', onDoc);\n    return () => document.removeEventListener('click', onDoc);\n  }, []);\n\n  const applyPreset = (i) => {\n    const r = presetRange(presets[i]);\n    setStart(r.start);\n    setEnd(r.end);\n    setActiveIndex(i);\n  };\n  const confirm = () => {\n    if (onChange) onChange({ start, end });\n    setOpen(false);\n    setActiveIndex(-1);\n  };\n\n  return (\n    <div className=\"aa-range\" ref={root}>\n      <div className={'aa-range-trigger' + (open ? ' is-focus' : '')} onClick={() => setOpen((o) => !o)}>\n        {modelValue.start && modelValue.end ? (\n          <span>\n            {modelValue.start} <span className=\"aa-range-sep\">~</span> {modelValue.end}\n          </span>\n        ) : (\n          <span className=\"aa-range-placeholder\">请选择时间范围</span>\n        )}\n      </div>\n      {open && (\n        <div className=\"aa-range-pop\">\n          <div className=\"aa-range-presets\">\n            {presets.map((p, i) => (\n              <button\n                key={i}\n                className={'aa-range-preset' + (activeIndex === i ? ' is-active' : '')}\n                onClick={applyPreset.bind(null, i)}\n              >\n                {p.label}\n              </button>\n            ))}\n          </div>\n          <div className=\"aa-range-custom\">\n            <input type=\"date\" value={start} onChange={(e) => setStart(e.target.value)} />\n            <span className=\"aa-range-tilde\">~</span>\n            <input type=\"date\" value={end} onChange={(e) => setEnd(e.target.value)} />\n          </div>\n          <div className=\"aa-range-actions\">\n            <button className=\"aa-range-cancel\" onClick={() => setOpen(false)}>\n              取消\n            </button>\n            <button className=\"aa-range-ok\" onClick={confirm}>\n              确定\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-range\" v-click-outside=\"close\">\n    <div class=\"aa-range-trigger\" :class=\"{ 'is-focus': open }\" @click=\"open = !open\">\n      <span v-if=\"modelValue.start && modelValue.end\">{{ modelValue.start }} <span class=\"aa-range-sep\">~</span> {{ modelValue.end }}</span>\n      <span v-else class=\"aa-range-placeholder\">请选择时间范围</span>\n    </div>\n    <div v-show=\"open\" class=\"aa-range-pop\">\n      <div class=\"aa-range-presets\">\n        <button\n          v-for=\"(p, i) in presets\"\n          :key=\"i\"\n          class=\"aa-range-preset\"\n          :class=\"{ 'is-active': activeIndex === i }\"\n          @click=\"applyPreset(i)\"\n        >{{ p.label }}</button>\n      </div>\n      <div class=\"aa-range-custom\">\n        <input type=\"date\" v-model=\"start\" />\n        <span class=\"aa-range-tilde\">~</span>\n        <input type=\"date\" v-model=\"end\" />\n      </div>\n      <div class=\"aa-range-actions\">\n        <button class=\"aa-range-cancel\" @click=\"close\">取消</button>\n        <button class=\"aa-range-ok\" @click=\"confirm\">确定</button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nfunction fmt(d) {\n  return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');\n}\nfunction presetRange(p) {\n  var end = new Date(); end.setHours(0, 0, 0, 0);\n  var start = new Date(end);\n  if (p.year === 'this') start = new Date(end.getFullYear(), 0, 1);\n  else if (p.month === 'this') start = new Date(end.getFullYear(), end.getMonth(), 1);\n  else if (p.month === 'last') { start = new Date(end.getFullYear(), end.getMonth() - 1, 1); end = new Date(end.getFullYear(), end.getMonth(), 0); }\n  else { start.setDate(end.getDate() + (p.days || 0)); if (p.len) start.setDate(end.getDate() - (p.len - 1)); }\n  return { start: fmt(start), end: fmt(end) };\n}\n\nexport default {\n  name: 'AaRangeQuickPicker',\n  directives: {\n    clickOutside: {\n      bind(el, binding) {\n        el.__doc = function (e) { if (!el.contains(e.target)) binding.value(); };\n        document.addEventListener('click', el.__doc);\n      },\n      unbind(el) { document.removeEventListener('click', el.__doc); }\n    }\n  },\n  props: {\n    modelValue: { type: Object, default: () => ({ start: '', end: '' }) },\n    presets: {\n      type: Array,\n      default: () => [\n        { label: '今天', days: 0 },\n        { label: '昨天', days: -1, len: 1 },\n        { label: '近7天', days: -6 },\n        { label: '近30天', days: -29 },\n        { label: '本月', month: 'this' },\n        { label: '上月', month: 'last' },\n        { label: '本年', year: 'this' }\n      ]\n    }\n  },\n  data() {\n    return { open: false, start: this.modelValue.start, end: this.modelValue.end, activeIndex: -1 };\n  },\n  methods: {\n    applyPreset(i) {\n      const r = presetRange(this.presets[i]);\n      this.start = r.start; this.end = r.end; this.activeIndex = i;\n    },\n    confirm() {\n      this.$emit('update:modelValue', { start: this.start, end: this.end });\n      this.close();\n    },\n    close() { this.open = false; this.activeIndex = -1; }\n  }\n};\n</script>\n\n<style src=\"./RangeQuickPicker.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-range\" ref=\"root\">\n    <div class=\"aa-range-trigger\" :class=\"{ 'is-focus': open }\" @click=\"open = !open\">\n      <span v-if=\"modelValue.start && modelValue.end\">{{ modelValue.start }} <span class=\"aa-range-sep\">~</span> {{ modelValue.end }}</span>\n      <span v-else class=\"aa-range-placeholder\">请选择时间范围</span>\n    </div>\n    <div v-show=\"open\" class=\"aa-range-pop\">\n      <div class=\"aa-range-presets\">\n        <button\n          v-for=\"(p, i) in presets\"\n          :key=\"i\"\n          class=\"aa-range-preset\"\n          :class=\"{ 'is-active': activeIndex === i }\"\n          @click=\"applyPreset(i)\"\n        >{{ p.label }}</button>\n      </div>\n      <div class=\"aa-range-custom\">\n        <input type=\"date\" v-model=\"start\" />\n        <span class=\"aa-range-tilde\">~</span>\n        <input type=\"date\" v-model=\"end\" />\n      </div>\n      <div class=\"aa-range-actions\">\n        <button class=\"aa-range-cancel\" @click=\"close\">取消</button>\n        <button class=\"aa-range-ok\" @click=\"confirm\">确定</button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, onMounted, onBeforeUnmount } from 'vue';\n\nfunction fmt(d) {\n  return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');\n}\nfunction presetRange(p) {\n  const end = new Date(); end.setHours(0, 0, 0, 0);\n  const start = new Date(end);\n  if (p.year === 'this') start.setMonth(0, 1);\n  else if (p.month === 'this') start.setDate(1);\n  else if (p.month === 'last') { start = new Date(end.getFullYear(), end.getMonth() - 1, 1); end.setDate(0); }\n  else { start.setDate(end.getDate() + (p.days || 0)); if (p.len) start.setDate(end.getDate() - (p.len - 1)); }\n  return { start: fmt(start), end: fmt(end) };\n}\n\nconst props = defineProps({\n  modelValue: { type: Object, default: () => ({ start: '', end: '' }) },\n  presets: {\n    type: Array,\n    default: () => [\n      { label: '今天', days: 0 },\n      { label: '昨天', days: -1, len: 1 },\n      { label: '近7天', days: -6 },\n      { label: '近30天', days: -29 },\n      { label: '本月', month: 'this' },\n      { label: '上月', month: 'last' },\n      { label: '本年', year: 'this' }\n    ]\n  }\n});\nconst emit = defineEmits(['update:modelValue']);\n\nconst root = ref(null);\nconst open = ref(false);\nconst start = ref(props.modelValue.start);\nconst end = ref(props.modelValue.end);\nconst activeIndex = ref(-1);\n\nfunction applyPreset(i) {\n  const r = presetRange(props.presets[i]);\n  start.value = r.start; end.value = r.end; activeIndex.value = i;\n}\nfunction confirm() {\n  emit('update:modelValue', { start: start.value, end: end.value });\n  close();\n}\nfunction close() { open.value = false; activeIndex.value = -1; }\n\nfunction onDoc(e) { if (root.value && !root.value.contains(e.target)) close(); }\nonMounted(() => document.addEventListener('click', onDoc));\nonBeforeUnmount(() => document.removeEventListener('click', onDoc));\n</script>\n\n<style src=\"./RangeQuickPicker.css\"></style>\n"}},{"slug":"numberrangeinput","name":"数字范围输入 NumberRangeInput","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/numberrangeinput.json","category":"input","specLines":["- 输入数字范围","- 两个数字输入框，中间分隔符","- 支持步长、单位","- 校验范围合法性","- 适用于价格、数量筛选"],"specSummary":"- 输入数字范围","contract":{"variants":["价格范围筛选","数量范围输入"],"dims":[{"name":"unit","values":["with-unit","none"]},{"name":"step","values":["configurable"]},{"name":"validation","values":["range-legal-check"]}],"unknowns":["最小值大于最大值时的提示方式"],"anatomy":{"input-min":"最小值数字输入框","separator":"中间分隔符","input-max":"最大值数字输入框"},"doNot":["分隔符的具体字符与样式"],"usage":["输入数字范围","支持步长、单位","校验范围合法性","适用于价格、数量筛选"],"structure":{"layout":"两个数字输入框 + 中间分隔符"}},"files":{"html":"../frameworks/NumberRangeInput.html","css":"../frameworks/NumberRangeInput.css","jsx":"../frameworks/NumberRangeInput.jsx","vue2":"../frameworks/NumberRangeInput.vue2.vue","vue3":"../frameworks/NumberRangeInput.vue3.vue"},"sizes":{"html":1859,"css":1072,"jsx":1572,"vue2":1952,"vue3":1837},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · NumberRangeInput（普通 H5）</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"NumberRangeInput.css\" />\n  <style>body{margin:0;padding:24px;background: var(--au-color-page-bg);}</style>\n</head>\n<body>\n  <div class=\"aa-numrange\" role=\"group\" id=\"app\">\n    <input type=\"number\" id=\"min\" placeholder=\"最小\" />\n    <span class=\"aa-numrange-sep\">—</span>\n    <input type=\"number\" id=\"max\" placeholder=\"最大\" />\n    <span class=\"aa-numrange-unit\">元</span>\n    <span class=\"aa-numrange-msg\" role=\"group\" id=\"msg\"></span>\n  </div>\n\n  <script>\n    var root = document.getElementById('app');\n    var minEl = document.getElementById('min');\n    var maxEl = document.getElementById('max');\n    var msg = document.getElementById('msg');\n    var STEP = 1, MIN = 0, MAX = 10000;\n\n    function validate() {\n      var a = parseFloat(minEl.value);\n      var b = parseFloat(maxEl.value);\n      var err = '';\n      if (minEl.value !== '' && (a < MIN || a > MAX)) err = '最小值需在 ' + MIN + '~' + MAX;\n      else if (maxEl.value !== '' && (b < MIN || b > MAX)) err = '最大值需在 ' + MIN + '~' + MAX;\n      else if (minEl.value !== '' && maxEl.value !== '' && a > b) err = '最小值不能大于最大值';\n      root.classList.toggle('is-error', !!err);\n      msg.textContent = err;\n      return !err;\n    }\n    [minEl, maxEl].forEach(function (el) {\n      el.addEventListener('input', validate);\n      el.addEventListener('blur', function () {\n        var v = parseFloat(el.value);\n        if (!isNaN(v)) el.value = Math.round(v / STEP) * STEP;\n        validate();\n      });\n    });\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin NumberRangeInput 样式 — 对齐 组件7.txt NumberRangeInput：两个数字输入框 + 分隔符，支持步长、单位、校验 */\n\n.aa-numrange { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); }\n.aa-numrange input { width: 88px; height: 32px; border: 1px solid var(--au-color-border); border-radius: 6px; padding: 0 10px;\n  color: var(--au-color-text-body); font-size: 14px; box-sizing: border-box; }\n.aa-numrange input:focus { border-color: var(--au-color-brand); outline: none; box-shadow: 0 0 0 3px rgba(47,84,235,0.2); }\n.aa-numrange input:disabled { background: var(--au-color-disabled-bg); color: var(--au-color-text-disabled); cursor: not-allowed; }\n.aa-numrange-sep { color: var(--au-color-text-secondary); }\n.aa-numrange-unit { color: var(--au-color-text-secondary); font-size: 13px; }\n.aa-numrange.is-error input { border-color: var(--au-color-error); }\n.aa-numrange-msg { color: var(--au-color-error); font-size: 12px; margin-left: 8px; }\n","jsx":"import React, { useState } from 'react';\nimport './NumberRangeInput.css';\n\nexport default function NumberRangeInput({\n  value = ['', ''], step = 1, min = -Infinity, max = Infinity,\n  separator = '—', unit = '', placeholder = ['最小', '最大'], onChange, onError\n}) {\n  const [errorMsg, setErrorMsg] = useState('');\n\n  function validate(arr) {\n    const a = parseFloat(arr[0]), b = parseFloat(arr[1]);\n    let err = '';\n    if (arr[0] !== '' && (a < min || a > max)) err = `最小值需在 ${min}~${max}`;\n    else if (arr[1] !== '' && (b < min || b > max)) err = `最大值需在 ${min}~${max}`;\n    else if (arr[0] !== '' && arr[1] !== '' && a > b) err = '最小值不能大于最大值';\n    setErrorMsg(err);\n    onError && onError(err);\n  }\n  function onMin(e) {\n    const arr = [e.target.value, value[1]];\n    validate(arr);\n    onChange && onChange(arr);\n  }\n  function onMax(e) {\n    const arr = [value[0], e.target.value];\n    validate(arr);\n    onChange && onChange(arr);\n  }\n\n  return (\n    <div className={'aa-numrange' + (errorMsg ? ' is-error' : '')}>\n      <input type=\"number\" value={value[0]} step={step} min={min} max={max}\n             placeholder={placeholder[0]} onChange={onMin} />\n      <span className=\"aa-numrange-sep\">{separator}</span>\n      <input type=\"number\" value={value[1]} step={step} min={min} max={max}\n             placeholder={placeholder[1]} onChange={onMax} />\n      {unit ? <span className=\"aa-numrange-unit\">{unit}</span> : null}\n      {errorMsg ? <span className=\"aa-numrange-msg\">{errorMsg}</span> : null}\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-numrange\" :class=\"{ 'is-error': !!errorMsg }\">\n    <input type=\"number\" :value=\"value[0]\" :step=\"step\" :min=\"min\" :max=\"max\"\n           :placeholder=\"placeholder[0]\" @input=\"onMin\" />\n    <span class=\"aa-numrange-sep\">{{ separator }}</span>\n    <input type=\"number\" :value=\"value[1]\" :step=\"step\" :min=\"min\" :max=\"max\"\n           :placeholder=\"placeholder[1]\" @input=\"onMax\" />\n    <span class=\"aa-numrange-unit\" v-if=\"unit\">{{ unit }}</span>\n    <span class=\"aa-numrange-msg\" v-if=\"errorMsg\">{{ errorMsg }}</span>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaNumberRangeInput',\n  props: {\n    value: { type: Array, default: function () { return ['', '']; } },\n    step: { type: Number, default: 1 },\n    min: { type: Number, default: -Infinity },\n    max: { type: Number, default: Infinity },\n    separator: { type: String, default: '—' },\n    unit: { type: String, default: '' },\n    placeholder: { type: Array, default: function () { return ['最小', '最大']; } }\n  },\n  data: function () { return { errorMsg: '' }; },\n  methods: {\n    emit: function (arr) { this.$emit('input', arr); },\n    onMin: function (e) {\n      var arr = [e.target.value, this.value[1]];\n      this.validate(arr);\n      this.emit(arr);\n    },\n    onMax: function (e) {\n      var arr = [this.value[0], e.target.value];\n      this.validate(arr);\n      this.emit(arr);\n    },\n    validate: function (arr) {\n      var a = parseFloat(arr[0]), b = parseFloat(arr[1]), err = '';\n      if (arr[0] !== '' && (a < this.min || a > this.max)) err = '最小值需在 ' + this.min + '~' + this.max;\n      else if (arr[1] !== '' && (b < this.min || b > this.max)) err = '最大值需在 ' + this.min + '~' + this.max;\n      else if (arr[0] !== '' && arr[1] !== '' && a > b) err = '最小值不能大于最大值';\n      this.errorMsg = err;\n      this.$emit('error', err);\n    }\n  }\n};\n</script>\n\n<style src=\"./NumberRangeInput.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-numrange\" :class=\"{ 'is-error': !!errorMsg }\">\n    <input type=\"number\" :value=\"modelValue[0]\" :step=\"step\" :min=\"min\" :max=\"max\"\n           :placeholder=\"placeholder[0]\" @input=\"onMin\" />\n    <span class=\"aa-numrange-sep\">{{ separator }}</span>\n    <input type=\"number\" :value=\"modelValue[1]\" :step=\"step\" :min=\"min\" :max=\"max\"\n           :placeholder=\"placeholder[1]\" @input=\"onMax\" />\n    <span class=\"aa-numrange-unit\" v-if=\"unit\">{{ unit }}</span>\n    <span class=\"aa-numrange-msg\" v-if=\"errorMsg\">{{ errorMsg }}</span>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nconst props = defineProps({\n  modelValue: { type: Array, default: () => ['', ''] },\n  step: { type: Number, default: 1 },\n  min: { type: Number, default: -Infinity },\n  max: { type: Number, default: Infinity },\n  separator: { type: String, default: '—' },\n  unit: { type: String, default: '' },\n  placeholder: { type: Array, default: () => ['最小', '最大'] }\n});\nconst emit = defineEmits(['update:modelValue', 'error']);\nconst errorMsg = ref('');\n\nfunction validate(arr) {\n  const a = parseFloat(arr[0]), b = parseFloat(arr[1]);\n  let err = '';\n  if (arr[0] !== '' && (a < props.min || a > props.max)) err = `最小值需在 ${props.min}~${props.max}`;\n  else if (arr[1] !== '' && (b < props.min || b > props.max)) err = `最大值需在 ${props.min}~${props.max}`;\n  else if (arr[0] !== '' && arr[1] !== '' && a > b) err = '最小值不能大于最大值';\n  errorMsg.value = err;\n  emit('error', err);\n}\nfunction onMin(e) {\n  const arr = [e.target.value, props.modelValue[1]];\n  validate(arr);\n  emit('update:modelValue', arr);\n}\nfunction onMax(e) {\n  const arr = [props.modelValue[0], e.target.value];\n  validate(arr);\n  emit('update:modelValue', arr);\n}\n</script>\n\n<style src=\"./NumberRangeInput.css\"></style>\n"}},{"slug":"switchgroup","name":"开关组 SwitchGroup","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/switchgroup.json","category":"input","specLines":["- 多个开关组合，可分组","- 支持全选、联动","- 适用于权限开关、通知设置","- 分组标题、说明"],"specSummary":"- 多个开关组合，可分组","contract":{"variants":["通知设置开关组","权限开关组"],"dims":[{"name":"grouping","values":["grouped(标题+说明)","flat"]},{"name":"linkage","values":["select-all","linked","none"]}],"unknowns":["联动的具体联动规则"],"anatomy":{"group":"分组容器，含分组标题与说明文字","switch-row":"开关行，单个开关沿用基础开关规格"},"doNot":["单个开关的视觉规格（沿用基础开关）"],"usage":["多个开关组合，可分组","支持全选、联动","分组带标题与说明","适用于权限开关、通知设置"],"structure":{"group":"分组标题 + 说明文字"}},"files":{"html":"../frameworks/SwitchGroup.html","css":"../frameworks/SwitchGroup.css","jsx":"../frameworks/SwitchGroup.jsx","vue2":"../frameworks/SwitchGroup.vue2.vue","vue3":"../frameworks/SwitchGroup.vue3.vue"},"sizes":{"html":2487,"css":1332,"jsx":1376,"vue2":1549,"vue3":1471},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · SwitchGroup（普通 H5）</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"SwitchGroup.css\" />\n  <style>body{margin:0;padding:24px;background: var(--au-color-page-bg);} .aa-panel{background: var(--au-color-card-bg);border: 1px solid var(--au-color-border);border-radius:8px;padding:16px;max-width:360px;}</style>\n</head>\n<body>\n  <div class=\"aa-panel\">\n    <div class=\"aa-switchgroup\" role=\"group\" id=\"app\"></div>\n  </div>\n\n  <script>\n    var DATA = [\n      { label: '邮件通知', value: 'mail', desc: '接收系统邮件提醒', on: true },\n      { label: '短信通知', value: 'sms', desc: '重要变更发送短信', on: false },\n      { label: '站内信', value: 'inbox', desc: '工作台消息中心', on: true }\n    ];\n\n    function render() {\n      var root = document.getElementById('app');\n      var allOn = DATA.every(function (d) { return d.on; });\n      var html = '<div class=\"aa-switchgroup-head\" role=\"group\"><span class=\"aa-switchgroup-title\">通知设置</span>' +\n        '<div class=\"aa-switch ' + (allOn ? 'is-on' : '') + '\" role=\"switch\" tabindex=\"0\" aria-checked=\"false\" data-all=\"1\"></div></div>';\n      html += DATA.map(function (d) {\n        return '<div class=\"aa-switch-row\" role=\"switch\" tabindex=\"0\" aria-checked=\"false\"><div class=\"aa-switch-text\" aria-checked=\"false\">' +\n          '<span class=\"aa-switch-label\" aria-checked=\"false\">' + d.label + '</span>' +\n          '<span class=\"aa-switch-desc\" aria-checked=\"false\">' + d.desc + '</span></div>' +\n          '<div class=\"aa-switch ' + (d.on ? 'is-on' : '') + '\" role=\"switch\" tabindex=\"0\" aria-checked=\"false\" data-value=\"' + d.value + '\"></div></div>';\n      }).join('');\n      root.innerHTML = html;\n\n      root.querySelector('[data-all]').addEventListener('click', function () {\n        var target = !DATA.every(function (d) { return d.on; });\n        DATA.forEach(function (d) { d.on = target; });\n        render();\n      });\n      root.querySelectorAll('[data-value]').forEach(function (el) {\n        el.addEventListener('click', function () {\n          var v = el.dataset.value;\n          DATA.forEach(function (d) { if (d.value === v) d.on = !d.on; });\n          render();\n        });\n      });\n    }\n    render();\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin SwitchGroup 样式 — 对齐 组件7.txt SwitchGroup：多个开关组合，可分组、全选、联动 */\n\n.aa-switchgroup { font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); color: var(--au-color-text-body); }\n.aa-switchgroup-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--au-color-border); margin-bottom: 8px; }\n.aa-switchgroup-title { font-size: 14px; font-weight: 500; color: var(--au-color-text-title); }\n.aa-switch-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }\n.aa-switch-text { display: flex; flex-direction: column; }\n.aa-switch-label { font-size: 14px; color: var(--au-color-text-body); }\n.aa-switch-desc { font-size: 12px; color: var(--au-color-text-secondary); margin-top: 2px; }\n.aa-switch { position: relative; width: 44px; height: 22px; border-radius: 11px; background: var(--au-color-border); cursor: pointer; transition: background .2s; flex-shrink: 0; }\n.aa-switch.is-on { background: var(--au-color-brand); }\n.aa-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--au-color-card-bg); transition: left .2s; }\n.aa-switch.is-on::after { left: 24px; }\n","jsx":"import React, { useState } from 'react';\nimport './SwitchGroup.css';\n\nexport default function SwitchGroup({ options = [], value = [], title = '', selectAll = false, onChange }) {\n  const allOn = options.length > 0 && options.every(o => value.indexOf(o.value) >= 0);\n\n  function toggle(v) {\n    const arr = value.slice();\n    const idx = arr.indexOf(v);\n    if (idx >= 0) arr.splice(idx, 1); else arr.push(v);\n    onChange && onChange(arr);\n  }\n  function toggleAll() {\n    onChange && onChange(allOn ? [] : options.map(o => o.value));\n  }\n\n  return (\n    <div className=\"aa-switchgroup\">\n      {(title || selectAll) ? (\n        <div className=\"aa-switchgroup-head\">\n          <span className=\"aa-switchgroup-title\">{title}</span>\n          {selectAll ? (\n            <div className={'aa-switch' + (allOn ? ' is-on' : '')} onClick={toggleAll} />\n          ) : null}\n        </div>\n      ) : null}\n      {options.map((o, i) => (\n        <div className=\"aa-switch-row\" key={i}>\n          <div className=\"aa-switch-text\">\n            <span className=\"aa-switch-label\">{o.label}</span>\n            {o.desc ? <span className=\"aa-switch-desc\">{o.desc}</span> : null}\n          </div>\n          <div\n            className={'aa-switch' + (value.indexOf(o.value) >= 0 ? ' is-on' : '')}\n            onClick={() => toggle(o.value)}\n          />\n        </div>\n      ))}\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-switchgroup\">\n    <div class=\"aa-switchgroup-head\" v-if=\"title || selectAll\">\n      <span class=\"aa-switchgroup-title\">{{ title }}</span>\n      <div v-if=\"selectAll\" class=\"aa-switch\" :class=\"{ 'is-on': allOn }\" @click=\"toggleAll\"></div>\n    </div>\n    <div class=\"aa-switch-row\" v-for=\"(o, i) in options\" :key=\"i\">\n      <div class=\"aa-switch-text\">\n        <span class=\"aa-switch-label\">{{ o.label }}</span>\n        <span class=\"aa-switch-desc\" v-if=\"o.desc\">{{ o.desc }}</span>\n      </div>\n      <div class=\"aa-switch\" :class=\"{ 'is-on': value.indexOf(o.value) >= 0 }\" @click=\"toggle(o.value)\"></div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaSwitchGroup',\n  props: {\n    options: { type: Array, default: function () { return []; } },\n    value: { type: Array, default: function () { return []; } },\n    title: { type: String, default: '' },\n    selectAll: { type: Boolean, default: false }\n  },\n  computed: {\n    allOn: function () {\n      return this.options.length > 0 && this.options.every(function (o) { return this.value.indexOf(o.value) >= 0; }, this);\n    }\n  },\n  methods: {\n    toggle: function (v) {\n      var arr = this.value.slice();\n      var idx = arr.indexOf(v);\n      if (idx >= 0) arr.splice(idx, 1); else arr.push(v);\n      this.$emit('input', arr);\n    },\n    toggleAll: function () {\n      var next = this.allOn ? [] : this.options.map(function (o) { return o.value; });\n      this.$emit('input', next);\n    }\n  }\n};\n</script>\n\n<style src=\"./SwitchGroup.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-switchgroup\">\n    <div class=\"aa-switchgroup-head\" v-if=\"title || selectAll\">\n      <span class=\"aa-switchgroup-title\">{{ title }}</span>\n      <div v-if=\"selectAll\" class=\"aa-switch\" :class=\"{ 'is-on': allOn }\" @click=\"toggleAll\"></div>\n    </div>\n    <div class=\"aa-switch-row\" v-for=\"(o, i) in options\" :key=\"i\">\n      <div class=\"aa-switch-text\">\n        <span class=\"aa-switch-label\">{{ o.label }}</span>\n        <span class=\"aa-switch-desc\" v-if=\"o.desc\">{{ o.desc }}</span>\n      </div>\n      <div class=\"aa-switch\" :class=\"{ 'is-on': modelValue.indexOf(o.value) >= 0 }\" @click=\"toggle(o.value)\"></div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nconst props = defineProps({\n  options: { type: Array, default: () => [] },\n  modelValue: { type: Array, default: () => [] },\n  title: { type: String, default: '' },\n  selectAll: { type: Boolean, default: false }\n});\nconst emit = defineEmits(['update:modelValue']);\n\nconst allOn = computed(() =>\n  props.options.length > 0 && props.options.every(o => props.modelValue.indexOf(o.value) >= 0)\n);\n\nfunction toggle(v) {\n  const arr = props.modelValue.slice();\n  const idx = arr.indexOf(v);\n  if (idx >= 0) arr.splice(idx, 1); else arr.push(v);\n  emit('update:modelValue', arr);\n}\nfunction toggleAll() {\n  const next = allOn.value ? [] : props.options.map(o => o.value);\n  emit('update:modelValue', next);\n}\n</script>\n\n<style src=\"./SwitchGroup.css\"></style>\n"}},{"slug":"dragupload","name":"拖拽上传 DragUpload","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/dragupload.json","category":"input","specLines":["- 支持点击或拖拽文件上传","- 拖拽区域虚线边框，悬停高亮","- 文件列表显示进度、状态","- 支持图片预览、删除","- 限制文件类型、大小、数量"],"specSummary":"- 支持点击或拖拽文件上传","contract":{"variants":["默认拖拽区","悬停高亮","上传中（进度）","上传失败","图片预览"],"dims":[{"name":"state","values":["idle","dragover","uploading","error","done"]},{"name":"listType","values":["text","picture"]}],"unknowns":["虚线边框的颜色与圆角","文件列表的最大高度"],"anatomy":{"zone":"拖拽区域：虚线边框，悬停高亮","list":"文件列表显示进度、状态","preview":"支持图片预览、删除","limit":"限制文件类型、大小、数量"},"doNot":["分片上传与断点续传"],"usage":["支持点击或拖拽文件上传","拖拽区域虚线边框，悬停高亮","文件列表显示进度、状态","支持图片预览、删除","限制文件类型、大小、数量"],"structure":{"zoneBorder":"虚线","states":"idle / dragover / uploading / error / done"}},"files":{"html":"../frameworks/DragUpload.html","css":"../frameworks/DragUpload.css","jsx":"../frameworks/DragUpload.jsx","vue2":"../frameworks/DragUpload.vue2.vue","vue3":"../frameworks/DragUpload.vue3.vue"},"sizes":{"html":3702,"css":1962,"jsx":2691,"vue2":2303,"vue3":2172},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · DragUpload</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"./DragUpload.css\" />\n</head>\n<body>\n  <div class=\"aa-page\">\n    <h2 class=\"aa-h2\">DragUpload 拖拽上传</h2>\n    <p class=\"aa-desc\">支持点击或拖拽文件上传，显示进度与缩略图，可删除。</p>\n\n    <div class=\"aa-demo\">\n      <div class=\"aa-upload\" role=\"button\" tabindex=\"0\" id=\"upload\">\n        <div class=\"aa-upload-drop\" role=\"button\" tabindex=\"0\" id=\"drop\">\n          <span class=\"aa-upload-icon\">⬆️</span>\n          <div class=\"aa-upload-hint\">将文件拖到此处，或 <b>点击选择</b></div>\n        </div>\n        <input type=\"file\" id=\"file\" multiple style=\"display:none\" />\n        <div class=\"aa-upload-list\" role=\"button\" tabindex=\"0\" id=\"list\"></div>\n      </div>\n    </div>\n  </div>\n\n  <script>\n    var drop = document.getElementById('drop');\n    var input = document.getElementById('file');\n    var list = document.getElementById('list');\n    var files = [];\n\n    drop.addEventListener('click', function () { input.click(); });\n    input.addEventListener('change', function () { addFiles(input.files); input.value = ''; });\n    ['dragenter', 'dragover'].forEach(function (ev) {\n      drop.addEventListener(ev, function (e) { e.preventDefault(); drop.classList.add('is-over'); });\n    });\n    ['dragleave', 'drop'].forEach(function (ev) {\n      drop.addEventListener(ev, function (e) { e.preventDefault(); drop.classList.remove('is-over'); });\n    });\n    drop.addEventListener('drop', function (e) { addFiles(e.dataTransfer.files); });\n\n    function addFiles(flist) {\n      Array.prototype.forEach.call(flist, function (f) {\n        var id = 'f' + Date.now() + Math.random().toString(36).slice(2, 6);\n        var item = { id: id, name: f.name, progress: 0, done: false, thumb: '' };\n        if (/^image\\//.test(f.type) && f.size < 2 * 1024 * 1024) {\n          var reader = new FileReader();\n          reader.onload = function (e) { item.thumb = e.target.result; render(); };\n          reader.readAsDataURL(f);\n        }\n        files.push(item);\n        render();\n        simulate(item);\n      });\n    }\n    function simulate(item) {\n      var timer = setInterval(function () {\n        item.progress = Math.min(100, item.progress + Math.random() * 22);\n        if (item.progress >= 100) { item.progress = 100; item.done = true; clearInterval(timer); }\n        render();\n      }, 220);\n    }\n    function render() {\n      list.innerHTML = files.map(function (it) {\n        var thumb = it.thumb ? '<img src=\"' + it.thumb + '\">' : '文件';\n        return '<div class=\"aa-upload-item\" role=\"button\" tabindex=\"0\">' +\n          '<div class=\"aa-upload-thumb\">' + thumb + '</div>' +\n          '<div class=\"aa-upload-meta\">' +\n            '<div class=\"aa-upload-name\" role=\"button\" tabindex=\"0\">' + it.name + '</div>' +\n            '<div class=\"aa-upload-bar\"><i style=\"width:' + it.progress + '%\"></i></div>' +\n          '</div>' +\n          '<div class=\"aa-upload-status\" role=\"button\" tabindex=\"0\">' + (it.done ? '已完成' : Math.round(it.progress) + '%') + '</div>' +\n          '<button class=\"aa-upload-del\" role=\"button\" tabindex=\"0\" data-id=\"' + it.id + '\">×</button>' +\n        '</div>';\n      }).join('');\n    }\n    list.addEventListener('click', function (e) {\n      var del = e.target.closest('[data-id]');\n      if (del) { files = files.filter(function (x) { return x.id !== del.dataset.id; }); render(); }\n    });\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin DragUpload 样式 — 拖拽 / 点击上传 */\n.aa-upload { font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); }\n.aa-upload-drop { border: 2px dashed var(--au-color-border); border-radius: 8px; padding: 28px; text-align: center; color: var(--au-color-text-secondary); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }\n.aa-upload-drop.is-over { border-color: var(--au-color-brand); background: var(--au-color-brand-bg); color: var(--au-color-brand); }\n.aa-upload-icon { font-size: 26px; display: block; margin-bottom: 6px; }\n.aa-upload-hint { font-size: 13px; }\n.aa-upload-hint b { color: var(--au-color-brand); }\n.aa-upload-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }\n.aa-upload-item { display: flex; align-items: center; gap: 10px; border: 1px solid var(--au-color-border); border-radius: 6px; padding: 8px 10px; }\n.aa-upload-thumb { width: 36px; height: 36px; border-radius: 4px; overflow: hidden; background: var(--au-color-disabled-bg); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--au-color-text-secondary); font-size: 11px; }\n.aa-upload-thumb img { width: 100%; height: 100%; object-fit: cover; }\n.aa-upload-meta { flex: 1; min-width: 0; }\n.aa-upload-name { font-size: 13px; color: var(--au-color-text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.aa-upload-bar { height: 4px; background: var(--au-color-border); border-radius: 2px; margin-top: 5px; overflow: hidden; }\n.aa-upload-bar > i { display: block; height: 100%; background: var(--au-color-brand); width: 0; transition: width .2s; }\n.aa-upload-status { font-size: 12px; color: var(--au-color-text-secondary); }\n.aa-upload-del { border: none; background: none; color: var(--au-color-text-secondary); cursor: pointer; font-size: 16px; padding: 0 4px; }\n.aa-upload-del:hover { color: var(--au-color-error); }\n","jsx":"import React, { useRef, useState } from 'react';\nimport './DragUpload.css';\n\nexport default function DragUpload() {\n  const [files, setFiles] = useState([]);\n  const [over, setOver] = useState(false);\n  const fileRef = useRef(null);\n\n  const addFiles = (flist) => {\n    Array.prototype.forEach.call(flist, (f) => {\n      const id = 'f' + Date.now() + Math.random().toString(36).slice(2, 6);\n      const item = { id, name: f.name, progress: 0, done: false, thumb: '' };\n      if (/^image\\//.test(f.type) && f.size < 2 * 1024 * 1024) {\n        const reader = new FileReader();\n        reader.onload = (e) => setFiles((fs) => fs.map((x) => (x.id === id ? { ...x, thumb: e.target.result } : x)));\n        reader.readAsDataURL(f);\n      }\n      setFiles((fs) => [...fs, item]);\n      const t = setInterval(() => {\n        setFiles((fs) =>\n          fs.map((x) => {\n            if (x.id !== id) return x;\n            const p = Math.min(100, x.progress + Math.random() * 22);\n            return { ...x, progress: p, done: p >= 100 };\n          })\n        );\n        setFiles((fs) => {\n          if (fs.find((x) => x.id === id && x.progress >= 100)) clearInterval(t);\n          return fs;\n        });\n      }, 220);\n    });\n  };\n\n  const remove = (id) => setFiles((fs) => fs.filter((x) => x.id !== id));\n\n  return (\n    <div className=\"aa-upload\">\n      <div\n        className={'aa-upload-drop' + (over ? ' is-over' : '')}\n        onClick={() => fileRef.current.click()}\n        onDragOver={(e) => { e.preventDefault(); setOver(true); }}\n        onDragLeave={() => setOver(false)}\n        onDrop={(e) => { e.preventDefault(); setOver(false); addFiles(e.dataTransfer.files); }}\n      >\n        <span className=\"aa-upload-icon\">⬆️</span>\n        <div className=\"aa-upload-hint\">将文件拖到此处，或 <b>点击选择</b></div>\n      </div>\n      <input ref={fileRef} type=\"file\" multiple style={{ display: 'none' }} onChange={(e) => { addFiles(e.target.files); e.target.value = ''; }} />\n      <div className=\"aa-upload-list\">\n        {files.map((it) => (\n          <div key={it.id} className=\"aa-upload-item\">\n            <div className=\"aa-upload-thumb\">{it.thumb ? <img src={it.thumb} alt=\"\" /> : '文件'}</div>\n            <div className=\"aa-upload-meta\">\n              <div className=\"aa-upload-name\">{it.name}</div>\n              <div className=\"aa-upload-bar\"><i style={{ width: it.progress + '%' }} /></div>\n            </div>\n            <div className=\"aa-upload-status\">{it.done ? '已完成' : Math.round(it.progress) + '%'}</div>\n            <button className=\"aa-upload-del\" onClick={() => remove(it.id)}>×</button>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-upload\">\n    <div class=\"aa-upload-drop\" :class=\"{ 'is-over': over }\" @click=\"$refs.file.click()\" @dragover.prevent=\"over = true\" @dragleave=\"over = false\" @drop.prevent=\"onDrop\">\n      <span class=\"aa-upload-icon\">⬆️</span>\n      <div class=\"aa-upload-hint\">将文件拖到此处，或 <b>点击选择</b></div>\n    </div>\n    <input ref=\"file\" type=\"file\" multiple style=\"display:none\" @change=\"onChange\" />\n    <div class=\"aa-upload-list\">\n      <div v-for=\"it in files\" :key=\"it.id\" class=\"aa-upload-item\">\n        <div class=\"aa-upload-thumb\"><img v-if=\"it.thumb\" :src=\"it.thumb\" /><span v-else>文件</span></div>\n        <div class=\"aa-upload-meta\">\n          <div class=\"aa-upload-name\">{{ it.name }}</div>\n          <div class=\"aa-upload-bar\"><i :style=\"{ width: it.progress + '%' }\"></i></div>\n        </div>\n        <div class=\"aa-upload-status\">{{ it.done ? '已完成' : Math.round(it.progress) + '%' }}</div>\n        <button class=\"aa-upload-del\" @click=\"remove(it.id)\">×</button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaDragUpload',\n  data() {\n    return { files: [], over: false };\n  },\n  methods: {\n    addFiles(flist) {\n      var self = this;\n      Array.prototype.forEach.call(flist, function (f) {\n        var id = 'f' + Date.now() + Math.random().toString(36).slice(2, 6);\n        var item = { id: id, name: f.name, progress: 0, done: false, thumb: '' };\n        if (/^image\\//.test(f.type) && f.size < 2 * 1024 * 1024) {\n          var reader = new FileReader();\n          reader.onload = function (e) { item.thumb = e.target.result; };\n          reader.readAsDataURL(f);\n        }\n        self.files.push(item);\n        self.simulate(item);\n      });\n    },\n    onChange(e) { this.addFiles(e.target.files); e.target.value = ''; },\n    onDrop(e) { this.over = false; this.addFiles(e.dataTransfer.files); },\n    simulate(item) {\n      var t = setInterval(function () {\n        item.progress = Math.min(100, item.progress + Math.random() * 22);\n        if (item.progress >= 100) { item.progress = 100; item.done = true; clearInterval(t); }\n      }, 220);\n    },\n    remove(id) { this.files = this.files.filter(function (x) { return x.id !== id; }); }\n  }\n};\n</script>\n\n<style src=\"./DragUpload.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-upload\">\n    <div class=\"aa-upload-drop\" :class=\"{ 'is-over': over }\" @click=\"file.click()\" @dragover.prevent=\"over = true\" @dragleave=\"over = false\" @drop.prevent=\"onDrop\">\n      <span class=\"aa-upload-icon\">⬆️</span>\n      <div class=\"aa-upload-hint\">将文件拖到此处，或 <b>点击选择</b></div>\n    </div>\n    <input ref=\"file\" type=\"file\" multiple style=\"display:none\" @change=\"onChange\" />\n    <div class=\"aa-upload-list\">\n      <div v-for=\"it in files\" :key=\"it.id\" class=\"aa-upload-item\">\n        <div class=\"aa-upload-thumb\"><img v-if=\"it.thumb\" :src=\"it.thumb\" /><span v-else>文件</span></div>\n        <div class=\"aa-upload-meta\">\n          <div class=\"aa-upload-name\">{{ it.name }}</div>\n          <div class=\"aa-upload-bar\"><i :style=\"{ width: it.progress + '%' }\"></i></div>\n        </div>\n        <div class=\"aa-upload-status\">{{ it.done ? '已完成' : Math.round(it.progress) + '%' }}</div>\n        <button class=\"aa-upload-del\" @click=\"remove(it.id)\">×</button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\n\nconst files = ref([]);\nconst over = ref(false);\nconst file = ref(null);\n\nfunction addFiles(flist) {\n  Array.prototype.forEach.call(flist, (f) => {\n    const id = 'f' + Date.now() + Math.random().toString(36).slice(2, 6);\n    const item = { id, name: f.name, progress: 0, done: false, thumb: '' };\n    if (/^image\\//.test(f.type) && f.size < 2 * 1024 * 1024) {\n      const reader = new FileReader();\n      reader.onload = (e) => (item.thumb = e.target.result);\n      reader.readAsDataURL(f);\n    }\n    files.value.push(item);\n    simulate(item);\n  });\n}\nfunction onChange(e) { addFiles(e.target.files); e.target.value = ''; }\nfunction onDrop(e) { over.value = false; addFiles(e.dataTransfer.files); }\nfunction simulate(item) {\n  const t = setInterval(() => {\n    item.progress = Math.min(100, item.progress + Math.random() * 22);\n    if (item.progress >= 100) { item.progress = 100; item.done = true; clearInterval(t); }\n  }, 220);\n}\nfunction remove(id) { files.value = files.value.filter((x) => x.id !== id); }\n</script>\n\n<style src=\"./DragUpload.css\"></style>\n"}},{"slug":"signaturepad","name":"签名板 SignaturePad","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/signaturepad.json","category":"input","specLines":["- 手写签名区域","- 支持鼠标、触屏","- 清除、撤销、保存","- 可导出图片","- 适用于合同、确认单"],"specSummary":"- 手写签名区域","contract":{"variants":["空白画布","已签名","触屏绘制中"],"dims":[{"name":"state","values":["empty","drawing","signed"]},{"name":"device","values":["mouse","touch"]}],"unknowns":["画布尺寸与线条粗细","导出图片的格式与尺寸"],"anatomy":{"canvas":"手写签名区域","input":"支持鼠标、触屏","actions":"清除、撤销、保存","export":"可导出图片"},"doNot":["签名笔迹的加密与存证"],"usage":["手写签名区域","支持鼠标、触屏","清除、撤销、保存","可导出图片","适用于合同、确认单"],"structure":{"input":"鼠标 + 触屏","actions":"清除 / 撤销 / 保存"}},"files":{"html":"../frameworks/SignaturePad.html","css":"../frameworks/SignaturePad.css","jsx":"../frameworks/SignaturePad.jsx","vue2":"../frameworks/SignaturePad.vue2.vue","vue3":"../frameworks/SignaturePad.vue3.vue"},"sizes":{"html":3328,"css":798,"jsx":2965,"vue2":2511,"vue3":2510},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · SignaturePad</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"./SignaturePad.css\" />\n</head>\n<body>\n  <div class=\"aa-page\">\n    <h2 class=\"aa-h2\">SignaturePad 签名板</h2>\n    <p class=\"aa-desc\">手写签名区域，支持鼠标与触屏，可撤销、清除、导出图片。</p>\n\n    <div class=\"aa-demo\">\n      <div class=\"aa-sign\" id=\"sign\">\n        <div class=\"aa-sign-pad\">\n          <canvas class=\"aa-sign-canvas\" id=\"canvas\"></canvas>\n          <div class=\"aa-sign-placeholder\" id=\"ph\">请在此处签名</div>\n        </div>\n        <div class=\"aa-sign-actions\">\n          <button class=\"aa-btn\" id=\"undo\">撤销</button>\n          <button class=\"aa-btn\" id=\"clear\">清除</button>\n          <button class=\"aa-btn aa-btn--primary\" id=\"save\">保存</button>\n          <span class=\"aa-sign-preview\" id=\"preview\"></span>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <script>\n    var canvas = document.getElementById('canvas');\n    var ctx = canvas.getContext('2d');\n    var ph = document.getElementById('ph');\n    var preview = document.getElementById('preview');\n    function fit() {\n      var r = canvas.parentElement.getBoundingClientRect();\n      canvas.width = r.width; canvas.height = r.height;\n    }\n    fit();\n    window.addEventListener('resize', fit);\n\n    var drawing = false, last = null, strokes = [], cur = [];\n\n    function pos(e) {\n      var r = canvas.getBoundingClientRect();\n      return { x: (e.touches ? e.touches[0].clientX : e.clientX) - r.left, y: (e.touches ? e.touches[0].clientY : e.clientY) - r.top };\n    }\n    function start(e) { e.preventDefault(); drawing = true; last = pos(e); cur = [last]; strokes.push(cur); ph.style.display = 'none'; }\n    function move(e) {\n      if (!drawing) return; e.preventDefault();\n      var p = pos(e); ctx.lineTo(p.x, p.y); ctx.stroke();\n      cur.push(p);\n    }\n    function end() { drawing = false; last = null; }\n\n    canvas.addEventListener('mousedown', start);\n    canvas.addEventListener('mousemove', move);\n    window.addEventListener('mouseup', end);\n    canvas.addEventListener('touchstart', start, { passive: false });\n    canvas.addEventListener('touchmove', move, { passive: false });\n    window.addEventListener('touchend', end);\n\n    document.getElementById('undo').onclick = function () {\n      strokes.pop();\n      redraw();\n      if (!strokes.length) ph.style.display = 'flex';\n    };\n    document.getElementById('clear').onclick = function () { strokes = []; redraw(); ph.style.display = 'flex'; preview.textContent = ''; };\n    document.getElementById('save').onclick = function () { preview.textContent = '已导出（' + canvas.width + '×' + canvas.height + '）'; };\n\n    function redraw() {\n      ctx.clearRect(0, 0, canvas.width, canvas.height);\n      ctx.strokeStyle = '#1F2329'; ctx.lineWidth = 2; ctx.lineCap = 'round'; ctx.lineJoin = 'round';\n      strokes.forEach(function (s) {\n        ctx.beginPath();\n        s.forEach(function (p, i) { i ? ctx.lineTo(p.x, p.y) : ctx.moveTo(p.x, p.y); });\n        ctx.stroke();\n      });\n    }\n    redraw();\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin SignaturePad 样式 — 手写签名 */\n.aa-sign { font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); }\n.aa-sign-pad { position: relative; border: 1px solid var(--au-color-border); border-radius: 8px; background: var(--au-color-card-bg); overflow: hidden; touch-action: none; }\n.aa-sign-canvas { display: block; width: 100%; height: 180px; cursor: crosshair; }\n.aa-sign-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--au-color-text-placeholder); font-size: 14px; pointer-events: none; }\n.aa-sign-actions { display: flex; gap: 10px; margin-top: 10px; align-items: center; }\n.aa-sign-preview { margin-left: auto; font-size: 12px; color: var(--au-color-text-secondary); }\n","jsx":"import React, { useRef, useState, useEffect } from 'react';\nimport './SignaturePad.css';\n\nexport default function SignaturePad() {\n  const pad = useRef(null);\n  const canvas = useRef(null);\n  const drawing = useRef(false);\n  const last = useRef(null);\n  const strokes = useRef([]);\n  const cur = useRef([]);\n  const [hasInk, setHasInk] = useState(false);\n  const [saved, setSaved] = useState('');\n\n  const ctx = () => canvas.current.getContext('2d');\n  const fit = () => {\n    const r = pad.current.getBoundingClientRect();\n    canvas.current.width = r.width;\n    canvas.current.height = r.height;\n    redraw();\n  };\n  const pos = (e) => {\n    const r = canvas.current.getBoundingClientRect();\n    const t = e.touches && e.touches[0];\n    return { x: (t ? t.clientX : e.clientX) - r.left, y: (t ? t.clientY : e.clientY) - r.top };\n  };\n  const down = (e) => {\n    e.preventDefault();\n    drawing.current = true;\n    last.current = pos(e);\n    cur.current = [last.current];\n    strokes.current.push(cur.current);\n    setHasInk(true);\n  };\n  const move = (e) => {\n    if (!drawing.current) return;\n    e.preventDefault();\n    const p = pos(e);\n    ctx().lineTo(p.x, p.y);\n    ctx().stroke();\n    cur.current.push(p);\n  };\n  const up = () => { drawing.current = false; last.current = null; };\n  const undo = () => { strokes.current.pop(); redraw(); if (!strokes.current.length) setHasInk(false); };\n  const clear = () => { strokes.current = []; redraw(); setHasInk(false); setSaved(''); };\n  const save = () => setSaved('已导出（' + canvas.current.width + '×' + canvas.current.height + '）');\n\n  const redraw = () => {\n    const c = canvas.current;\n    const x = c.getContext('2d');\n    x.clearRect(0, 0, c.width, c.height);\n    x.strokeStyle = '#1F2329';\n    x.lineWidth = 2;\n    x.lineCap = 'round';\n    x.lineJoin = 'round';\n    strokes.current.forEach((s) => {\n      x.beginPath();\n      s.forEach((p, i) => (i ? x.lineTo(p.x, p.y) : x.moveTo(p.x, p.y)));\n      x.stroke();\n    });\n  };\n\n  useEffect(() => {\n    fit();\n    window.addEventListener('resize', fit);\n    return () => window.removeEventListener('resize', fit);\n    // eslint-disable-next-line\n  }, []);\n\n  return (\n    <div className=\"aa-sign\">\n      <div className=\"aa-sign-pad\" ref={pad}>\n        <canvas\n          ref={canvas}\n          className=\"aa-sign-canvas\"\n          onMouseDown={down}\n          onMouseMove={move}\n          onMouseUp={up}\n          onTouchStart={down}\n          onTouchMove={move}\n          onTouchEnd={up}\n        />\n        {!hasInk && <div className=\"aa-sign-placeholder\">请在此处签名</div>}\n      </div>\n      <div className=\"aa-sign-actions\">\n        <button className=\"aa-btn\" onClick={undo}>撤销</button>\n        <button className=\"aa-btn\" onClick={clear}>清除</button>\n        <button className=\"aa-btn aa-btn--primary\" onClick={save}>保存</button>\n        {saved && <span className=\"aa-sign-preview\">{saved}</span>}\n      </div>\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-sign\">\n    <div class=\"aa-sign-pad\" ref=\"pad\">\n      <canvas ref=\"canvas\" class=\"aa-sign-canvas\" @mousedown=\"down\" @mousemove=\"move\" @mouseup=\"up\" @touchstart=\"down\" @touchmove=\"move\" @touchend=\"up\"></canvas>\n      <div class=\"aa-sign-placeholder\" v-show=\"!hasInk\">请在此处签名</div>\n    </div>\n    <div class=\"aa-sign-actions\">\n      <button class=\"aa-btn\" @click=\"undo\">撤销</button>\n      <button class=\"aa-btn\" @click=\"clear\">清除</button>\n      <button class=\"aa-btn aa-btn--primary\" @click=\"save\">保存</button>\n      <span class=\"aa-sign-preview\" v-if=\"saved\">{{ saved }}</span>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaSignaturePad',\n  data() {\n    return { drawing: false, last: null, strokes: [], cur: [], hasInk: false, saved: '' };\n  },\n  mounted() { this.fit(); window.addEventListener('resize', this.fit); this.$once('hook:beforeDestroy', () => window.removeEventListener('resize', this.fit)); },\n  methods: {\n    fit() { var r = this.$refs.pad.getBoundingClientRect(); this.$refs.canvas.width = r.width; this.$refs.canvas.height = r.height; this.redraw(); },\n    pos(e) { var r = this.$refs.canvas.getBoundingClientRect(); var t = e.touches && e.touches[0]; return { x: (t ? t.clientX : e.clientX) - r.left, y: (t ? t.clientY : e.clientY) - r.top }; },\n    down(e) { e.preventDefault(); this.drawing = true; this.last = this.pos(e); this.cur = [this.last]; this.strokes.push(this.cur); this.hasInk = true; },\n    move(e) { if (!this.drawing) return; e.preventDefault(); var p = this.pos(e); this.ctx().lineTo(p.x, p.y); this.ctx().stroke(); this.cur.push(p); },\n    up() { this.drawing = false; this.last = null; },\n    ctx() { return this.$refs.canvas.getContext('2d'); },\n    undo() { this.strokes.pop(); this.redraw(); if (!this.strokes.length) this.hasInk = false; },\n    clear() { this.strokes = []; this.redraw(); this.hasInk = false; this.saved = ''; },\n    save() { this.saved = '已导出（' + this.$refs.canvas.width + '×' + this.$refs.canvas.height + '）'; },\n    redraw() {\n      var c = this.$refs.canvas, x = c.getContext('2d');\n      x.clearRect(0, 0, c.width, c.height);\n      x.strokeStyle = '#1F2329'; x.lineWidth = 2; x.lineCap = 'round'; x.lineJoin = 'round';\n      this.strokes.forEach(function (s) {\n        x.beginPath();\n        s.forEach(function (p, i) { i ? x.lineTo(p.x, p.y) : x.moveTo(p.x, p.y); });\n        x.stroke();\n      });\n    }\n  }\n};\n</script>\n\n<style src=\"./SignaturePad.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-sign\">\n    <div class=\"aa-sign-pad\" ref=\"pad\">\n      <canvas ref=\"canvas\" class=\"aa-sign-canvas\" @mousedown=\"down\" @mousemove=\"move\" @mouseup=\"up\" @touchstart=\"down\" @touchmove=\"move\" @touchend=\"up\"></canvas>\n      <div class=\"aa-sign-placeholder\" v-show=\"!hasInk\">请在此处签名</div>\n    </div>\n    <div class=\"aa-sign-actions\">\n      <button class=\"aa-btn\" @click=\"undo\">撤销</button>\n      <button class=\"aa-btn\" @click=\"clear\">清除</button>\n      <button class=\"aa-btn aa-btn--primary\" @click=\"save\">保存</button>\n      <span class=\"aa-sign-preview\" v-if=\"saved\">{{ saved }}</span>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, onMounted, onBeforeUnmount } from 'vue';\n\nconst pad = ref(null);\nconst canvas = ref(null);\nconst drawing = ref(false);\nconst last = ref(null);\nconst strokes = ref([]);\nconst cur = ref([]);\nconst hasInk = ref(false);\nconst saved = ref('');\n\nfunction ctx() { return canvas.value.getContext('2d'); }\nfunction fit() { var r = pad.value.getBoundingClientRect(); canvas.value.width = r.width; canvas.value.height = r.height; redraw(); }\nfunction pos(e) { var r = canvas.value.getBoundingClientRect(); var t = e.touches && e.touches[0]; return { x: (t ? t.clientX : e.clientX) - r.left, y: (t ? t.clientY : e.clientY) - r.top }; }\nfunction down(e) { e.preventDefault(); drawing.value = true; last.value = pos(e); cur.value = [last.value]; strokes.value.push(cur.value); hasInk.value = true; }\nfunction move(e) { if (!drawing.value) return; e.preventDefault(); var p = pos(e); ctx().lineTo(p.x, p.y); ctx().stroke(); cur.value.push(p); }\nfunction up() { drawing.value = false; last.value = null; }\nfunction undo() { strokes.value.pop(); redraw(); if (!strokes.value.length) hasInk.value = false; }\nfunction clear() { strokes.value = []; redraw(); hasInk.value = false; saved.value = ''; }\nfunction save() { saved.value = '已导出（' + canvas.value.width + '×' + canvas.value.height + '）'; }\nfunction redraw() {\n  var c = canvas.value, x = c.getContext('2d');\n  x.clearRect(0, 0, c.width, c.height);\n  x.strokeStyle = '#1F2329'; x.lineWidth = 2; x.lineCap = 'round'; x.lineJoin = 'round';\n  strokes.value.forEach(function (s) { x.beginPath(); s.forEach(function (p, i) { i ? x.lineTo(p.x, p.y) : x.moveTo(p.x, p.y); }); x.stroke(); });\n}\n\nonMounted(() => { fit(); window.addEventListener('resize', fit); });\nonBeforeUnmount(() => window.removeEventListener('resize', fit));\n</script>\n\n<style src=\"./SignaturePad.css\"></style>\n"}},{"slug":"codeinput","name":"验证码输入 CodeInput","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/codeinput.json","category":"input","specLines":["- 多个独立输入格","- 自动聚焦下一个","- 支持粘贴、删除","- 输入完成自动提交","- 适用于短信验证码、支付密码"],"specSummary":"- 多个独立输入格","contract":{"variants":["短信验证码输入","支付密码输入"],"dims":[{"name":"cells","values":["configurable-格数"]},{"name":"autoSubmit","values":["on-complete","none"]},{"name":"paste","values":["support"]}],"unknowns":["错误态的视觉反馈方式"],"anatomy":{"cell":"多个独立输入格","auto-focus":"输入后自动聚焦下一格；支持粘贴、删除回退"},"doNot":["格子尺寸与间距规范","错误态样式","重发倒计时展示（属业务侧）"],"usage":["多个独立输入格","自动聚焦下一个","支持粘贴、删除","输入完成自动提交","适用于短信验证码、支付密码"],"structure":{"focus":"自动聚焦下一个输入格"}},"files":{"html":"../frameworks/CodeInput.html","css":"../frameworks/CodeInput.css","jsx":"../frameworks/CodeInput.jsx","vue2":"../frameworks/CodeInput.vue2.vue","vue3":"../frameworks/CodeInput.vue3.vue"},"sizes":{"html":4115,"css":1211,"jsx":2755,"vue2":2981,"vue3":2673},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · CodeInput</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"./CodeInput.css\" />\n</head>\n<body>\n  <div class=\"aa-page\">\n    <h2 class=\"aa-h2\">CodeInput 验证码输入</h2>\n    <p class=\"aa-desc\">用于短信验证码、一次性口令（OTP）输入，支持自动跳转、退格回退与粘贴填充。</p>\n\n    <div class=\"aa-demo\">\n      <div class=\"aa-demo__title\">基础用法（6 位）</div>\n      <div class=\"aa-code\" id=\"code1\" data-length=\"6\"></div>\n      <div class=\"aa-code-tip\" id=\"code1-tip\"></div>\n    </div>\n\n    <div class=\"aa-demo\">\n      <div class=\"aa-demo__title\">掩码模式 + 4 位</div>\n      <div class=\"aa-code\" id=\"code2\" data-length=\"4\" data-masked=\"1\"></div>\n      <div class=\"aa-code-tip\" id=\"code2-tip\"></div>\n    </div>\n  </div>\n\n  <script>\n    function initCode(root, tip) {\n      var length = parseInt(root.dataset.length || '6', 10);\n      var masked = root.dataset.masked === '1';\n      var cells = [];\n      var vals = new Array(length).fill('');\n\n      for (var i = 0; i < length; i++) {\n        var cell = document.createElement('div');\n        cell.className = 'aa-code-cell' + (masked ? ' is-masked' : '');\n        var input = document.createElement('input');\n        input.className = 'aa-code-input';\n        input.maxLength = 1;\n        input.inputMode = 'numeric';\n        input.setAttribute('aria-label', '验证码第 ' + (i + 1) + ' 位');\n        cell.appendChild(input);\n        root.appendChild(cell);\n        cells.push(input);\n\n        input.addEventListener('focus', function () { this.parentElement.classList.add('is-focus'); });\n        input.addEventListener('blur', function () { this.parentElement.classList.remove('is-focus'); });\n\n        input.addEventListener('input', function (e) {\n          var idx = cells.indexOf(this);\n          var ch = (e.target.value || '').slice(-1);\n          vals[idx] = ch;\n          this.value = ch;\n          this.parentElement.classList.toggle('is-filled', !!ch);\n          if (ch && idx < length - 1) cells[idx + 1].focus();\n          emit();\n        });\n\n        input.addEventListener('keydown', function (e) {\n          var idx = cells.indexOf(this);\n          if (e.key === 'Backspace') {\n            e.preventDefault();\n            if (vals[idx]) {\n              vals[idx] = '';\n              this.value = '';\n              this.parentElement.classList.remove('is-filled');\n            } else if (idx > 0) {\n              vals[idx - 1] = '';\n              cells[idx - 1].value = '';\n              cells[idx - 1].parentElement.classList.remove('is-filled');\n              cells[idx - 1].focus();\n            }\n            emit();\n          } else if (e.key === 'ArrowLeft' && idx > 0) {\n            cells[idx - 1].focus();\n          } else if (e.key === 'ArrowRight' && idx < length - 1) {\n            cells[idx + 1].focus();\n          }\n        });\n\n        input.addEventListener('paste', function (e) {\n          e.preventDefault();\n          var text = (e.clipboardData || window.clipboardData).getData('text') || '';\n          var digits = text.replace(/\\D/g, '').slice(0, length);\n          for (var k = 0; k < length; k++) {\n            vals[k] = digits[k] || '';\n            cells[k].value = digits[k] || '';\n            cells[k].parentElement.classList.toggle('is-filled', !!digits[k]);\n          }\n          var next = Math.min(digits.length, length - 1);\n          cells[next].focus();\n          emit();\n        });\n      }\n\n      function emit() {\n        var code = vals.join('');\n        tip.textContent = code.length === length ? '已输入完成：' + code : '';\n        root.dispatchEvent(new CustomEvent('change', { detail: code }));\n      }\n    }\n\n    initCode(document.getElementById('code1'), document.getElementById('code1-tip'));\n    initCode(document.getElementById('code2'), document.getElementById('code2-tip'));\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin CodeInput 样式 — 对齐 组件7.txt CodeInput：验证码 / 一次性口令输入 */\n\n.aa-code { font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); display: flex; gap: 8px; }\n.aa-code-cell {\n  position: relative;\n  width: 44px; height: 48px;\n  border: 1px solid var(--au-color-border); border-radius: 8px;\n  background: var(--au-color-card-bg);\n  display: flex; align-items: center; justify-content: center;\n  transition: border-color .15s, box-shadow .15s;\n}\n.aa-code-cell.is-focus { border-color: var(--au-color-brand); box-shadow: 0 0 0 3px rgba(47,84,235,0.2); }\n.aa-code-cell.is-filled { border-color: #B7C4FF; }\n.aa-code-input {\n  width: 100%; height: 100%;\n  border: none; outline: none; background: none;\n  text-align: center; font-size: 20px; font-weight: 600; color: var(--au-color-text-title);\n  padding: 0;\n}\n.aa-code-input::placeholder { color: var(--au-color-text-placeholder); font-weight: 400; }\n.aa-code-cell.is-masked .aa-code-input { -webkit-text-security: disc; text-security: disc; }\n.aa-code-tip { font-size: 12px; margin-top: 8px; color: var(--au-color-text-secondary); }\n.aa-code-tip.error { color: var(--au-color-error); }\n","jsx":"import React, { useState, useRef, useCallback } from 'react';\nimport './CodeInput.css';\n\nfunction buildCells(v, length) {\n  const arr = (v || '').split('').slice(0, length);\n  while (arr.length < length) arr.push('');\n  return arr;\n}\n\nexport default function CodeInput({\n  value = '',\n  length = 6,\n  masked = false,\n  tip = '',\n  hasError = false,\n  onChange\n}) {\n  const inputsRef = useRef([]);\n  const [cells, setCells] = useState(() => buildCells(value, length));\n  const [focusedIndex, setFocusedIndex] = useState(-1);\n\n  const emit = useCallback(\n    (next) => {\n      const code = next.join('');\n      if (onChange) onChange(code);\n    },\n    [onChange]\n  );\n\n  const focus = (i) => {\n    const el = inputsRef.current[i];\n    if (el) el.focus();\n  };\n\n  const onInput = (e, i) => {\n    const ch = (e.target.value || '').slice(-1);\n    const next = cells.slice();\n    next[i] = ch;\n    e.target.value = ch;\n    setCells(next);\n    if (ch && i < length - 1) focus(i + 1);\n    emit(next);\n  };\n\n  const onKeydown = (e, i) => {\n    if (e.key === 'Backspace') {\n      e.preventDefault();\n      const next = cells.slice();\n      if (next[i]) {\n        next[i] = '';\n      } else if (i > 0) {\n        next[i - 1] = '';\n        focus(i - 1);\n      }\n      setCells(next);\n      emit(next);\n    } else if (e.key === 'ArrowLeft' && i > 0) {\n      focus(i - 1);\n    } else if (e.key === 'ArrowRight' && i < length - 1) {\n      focus(i + 1);\n    }\n  };\n\n  const onPaste = (e) => {\n    e.preventDefault();\n    const text = (e.clipboardData || window.clipboardData).getData('text') || '';\n    const digits = text.replace(/\\D/g, '').slice(0, length).split('');\n    const next = cells.slice();\n    for (let k = 0; k < length; k++) next[k] = digits[k] || '';\n    setCells(next);\n    focus(Math.min(digits.length, length - 1));\n    emit(next);\n  };\n\n  return (\n    <div>\n      <div className=\"aa-code\" onPaste={onPaste}>\n        {cells.map((c, i) => (\n          <div\n            key={i}\n            className={\n              'aa-code-cell' +\n              (focusedIndex === i ? ' is-focus' : '') +\n              (c ? ' is-filled' : '') +\n              (masked ? ' is-masked' : '')\n            }\n          >\n            <input\n              ref={(el) => (inputsRef.current[i] = el)}\n              className=\"aa-code-input\"\n              value={c}\n              maxLength={1}\n              inputMode=\"numeric\"\n              aria-label={'验证码第 ' + (i + 1) + ' 位'}\n              onFocus={() => setFocusedIndex(i)}\n              onInput={(e) => onInput(e, i)}\n              onKeyDown={(e) => onKeydown(e, i)}\n            />\n          </div>\n        ))}\n      </div>\n      <div className={'aa-code-tip' + (hasError ? ' error' : '')}>{tip}</div>\n    </div>\n  );\n}\n","vue2":"<template>\n  <div>\n    <div class=\"aa-code\" @paste=\"onPaste\">\n      <div\n        v-for=\"(c, i) in cells\"\n        :key=\"i\"\n        class=\"aa-code-cell\"\n        :class=\"{ 'is-focus': focusedIndex === i, 'is-filled': !!cells[i], 'is-masked': masked }\"\n      >\n        <input\n          ref=\"inputs\"\n          class=\"aa-code-input\"\n          :value=\"cells[i]\"\n          maxlength=\"1\"\n          inputmode=\"numeric\"\n          :aria-label=\"'验证码第 ' + (i + 1) + ' 位'\"\n          @focus=\"focusedIndex = i\"\n          @input=\"onInput($event, i)\"\n          @keydown=\"onKeydown($event, i)\"\n        />\n      </div>\n    </div>\n    <div class=\"aa-code-tip\" :class=\"{ error: hasError }\">{{ tip }}</div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaCodeInput',\n  props: {\n    value: { type: String, default: '' },\n    length: { type: Number, default: 6 },\n    masked: { type: Boolean, default: false },\n    tip: { type: String, default: '' },\n    hasError: { type: Boolean, default: false }\n  },\n  data() {\n    return {\n      cells: this.value.split('').slice(0, this.length).concat(Array(Math.max(0, this.length - this.value.length)).fill('')).slice(0, this.length),\n      focusedIndex: -1\n    };\n  },\n  watch: {\n    value(v) {\n      const arr = v.split('').slice(0, this.length);\n      while (arr.length < this.length) arr.push('');\n      this.cells = arr;\n    },\n    length() {\n      const arr = this.cells.slice(0, this.length);\n      while (arr.length < this.length) arr.push('');\n      this.cells = arr;\n    }\n  },\n  methods: {\n    emit() {\n      const code = this.cells.join('');\n      this.$emit('input', code);\n      this.$emit('change', code);\n    },\n    onInput(e, i) {\n      const ch = (e.target.value || '').slice(-1);\n      this.$set(this.cells, i, ch);\n      e.target.value = ch;\n      if (ch && i < this.length - 1) this.focus(i + 1);\n      this.emit();\n    },\n    onKeydown(e, i) {\n      if (e.key === 'Backspace') {\n        e.preventDefault();\n        if (this.cells[i]) {\n          this.$set(this.cells, i, '');\n        } else if (i > 0) {\n          this.$set(this.cells, i - 1, '');\n          this.focus(i - 1);\n        }\n        this.emit();\n      } else if (e.key === 'ArrowLeft' && i > 0) {\n        this.focus(i - 1);\n      } else if (e.key === 'ArrowRight' && i < this.length - 1) {\n        this.focus(i + 1);\n      }\n    },\n    onPaste(e) {\n      e.preventDefault();\n      const text = (e.clipboardData || window.clipboardData).getData('text') || '';\n      const digits = text.replace(/\\D/g, '').slice(0, this.length).split('');\n      const arr = this.cells.slice();\n      for (let k = 0; k < this.length; k++) arr[k] = digits[k] || '';\n      this.cells = arr;\n      this.focus(Math.min(digits.length, this.length - 1));\n      this.emit();\n    },\n    focus(i) {\n      this.$nextTick(() => {\n        const el = this.$refs.inputs && this.$refs.inputs[i];\n        if (el) el.focus();\n      });\n    }\n  }\n};\n</script>\n\n<style src=\"./CodeInput.css\"></style>\n","vue3":"<template>\n  <div>\n    <div class=\"aa-code\" @paste=\"onPaste\">\n      <div\n        v-for=\"(c, i) in cells\"\n        :key=\"i\"\n        class=\"aa-code-cell\"\n        :class=\"{ 'is-focus': focusedIndex === i, 'is-filled': !!cells[i], 'is-masked': masked }\"\n      >\n        <input\n          ref=\"inputs\"\n          class=\"aa-code-input\"\n          :value=\"cells[i]\"\n          maxlength=\"1\"\n          inputmode=\"numeric\"\n          :aria-label=\"'验证码第 ' + (i + 1) + ' 位'\"\n          @focus=\"focusedIndex = i\"\n          @input=\"onInput($event, i)\"\n          @keydown=\"onKeydown($event, i)\"\n        />\n      </div>\n    </div>\n    <div class=\"aa-code-tip\" :class=\"{ error: hasError }\">{{ tip }}</div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, watch } from 'vue';\n\nconst props = defineProps({\n  modelValue: { type: String, default: '' },\n  length: { type: Number, default: 6 },\n  masked: { type: Boolean, default: false },\n  tip: { type: String, default: '' },\n  hasError: { type: Boolean, default: false }\n});\nconst emit = defineEmits(['update:modelValue', 'change']);\n\nconst inputs = ref([]);\nconst focusedIndex = ref(-1);\n\nfunction buildCells(v) {\n  const arr = (v || '').split('').slice(0, props.length);\n  while (arr.length < props.length) arr.push('');\n  return arr;\n}\nconst cells = ref(buildCells(props.modelValue));\n\nwatch(\n  () => props.modelValue,\n  (v) => { cells.value = buildCells(v); }\n);\nwatch(\n  () => props.length,\n  () => { cells.value = buildCells(cells.value.join('')); }\n);\n\nfunction emit() {\n  const code = cells.value.join('');\n  emit('update:modelValue', code);\n  emit('change', code);\n}\nfunction focus(i) {\n  inputs.value[i] && inputs.value[i].focus();\n}\nfunction onInput(e, i) {\n  const ch = (e.target.value || '').slice(-1);\n  cells.value[i] = ch;\n  e.target.value = ch;\n  if (ch && i < props.length - 1) focus(i + 1);\n  emit();\n}\nfunction onKeydown(e, i) {\n  if (e.key === 'Backspace') {\n    e.preventDefault();\n    if (cells.value[i]) {\n      cells.value[i] = '';\n    } else if (i > 0) {\n      cells.value[i - 1] = '';\n      focus(i - 1);\n    }\n    emit();\n  } else if (e.key === 'ArrowLeft' && i > 0) {\n    focus(i - 1);\n  } else if (e.key === 'ArrowRight' && i < props.length - 1) {\n    focus(i + 1);\n  }\n}\nfunction onPaste(e) {\n  e.preventDefault();\n  const text = (e.clipboardData || window.clipboardData).getData('text') || '';\n  const digits = text.replace(/\\D/g, '').slice(0, props.length).split('');\n  const arr = cells.value.slice();\n  for (let k = 0; k < props.length; k++) arr[k] = digits[k] || '';\n  cells.value = arr;\n  focus(Math.min(digits.length, props.length - 1));\n  emit();\n}\n</script>\n\n<style src=\"./CodeInput.css\"></style>\n"}},{"slug":"passwordinput","name":"密码输入 PasswordInput","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/passwordinput.json","category":"input","specLines":["- 密码可见切换","- 强度检测（弱/中/强）","- 可配置规则","- 支持一键生成强密码","- 适用于注册、修改密码"],"specSummary":"- 密码可见切换","contract":{"variants":["注册密码输入（带强度与生成）","基础密码输入"],"dims":[{"name":"visibilityToggle","values":["support"]},{"name":"strength","values":["weak-medium-strong","none"]},{"name":"generate","values":["one-click","none"]}],"unknowns":["强度判定的具体规则细节"],"anatomy":{"input":"密码输入框（圆点掩码）","eye":"密码可见切换","strength-meter":"强度检测提示：弱 / 中 / 强"},"doNot":["强度指示的配色具体值"],"usage":["密码可见切换","强度检测（弱/中/强）","可配置规则","支持一键生成强密码","适用于注册、修改密码"],"structure":{"rules":"强度检测规则可配置"}},"files":{"html":"../frameworks/PasswordInput.html","css":"../frameworks/PasswordInput.css","jsx":"../frameworks/PasswordInput.jsx","vue2":"../frameworks/PasswordInput.vue2.vue","vue3":"../frameworks/PasswordInput.vue3.vue"},"sizes":{"html":3628,"css":1217,"jsx":2124,"vue2":2171,"vue3":2161},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · PasswordInput</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"./PasswordInput.css\" />\n</head>\n<body>\n  <div class=\"aa-page\">\n    <h2 class=\"aa-h2\">PasswordInput 密码输入</h2>\n    <p class=\"aa-desc\">可见切换 + 强度检测，适用于注册 / 修改密码等场景。</p>\n\n    <div class=\"aa-demo\">\n      <div class=\"aa-demo__title\">基础用法（含强度条）</div>\n      <div class=\"aa-pwd\" id=\"pwd1\">\n        <div class=\"aa-pwd-field\">\n          <input class=\"aa-pwd-input\" role=\"group\" type=\"password\" placeholder=\"请输入密码\" />\n          <button class=\"aa-pwd-toggle\" type=\"button\">显示</button>\n        </div>\n        <div class=\"aa-pwd-strength\">\n          <span class=\"aa-pwd-bar\"></span>\n          <span class=\"aa-pwd-bar\"></span>\n          <span class=\"aa-pwd-bar\"></span>\n        </div>\n        <div class=\"aa-pwd-tip\"></div>\n      </div>\n    </div>\n\n    <div class=\"aa-demo\">\n      <div class=\"aa-demo__title\">关闭强度条</div>\n      <div class=\"aa-pwd\" id=\"pwd2\">\n        <div class=\"aa-pwd-field\">\n          <input class=\"aa-pwd-input\" role=\"group\" type=\"password\" placeholder=\"请输入密码\" />\n          <button class=\"aa-pwd-toggle\" type=\"button\">显示</button>\n        </div>\n        <div class=\"aa-pwd-tip\"></div>\n      </div>\n    </div>\n  </div>\n\n  <script>\n    function initPwd(root) {\n      var field = root.querySelector('.aa-pwd-field');\n      var input = root.querySelector('.aa-pwd-input');\n      var toggle = root.querySelector('.aa-pwd-toggle');\n      var bars = root.querySelectorAll('.aa-pwd-bar');\n      var tip = root.querySelector('.aa-pwd-tip');\n      var showStrength = bars.length > 0;\n      var visible = false;\n\n      function score(v) {\n        if (!v) return 0;\n        var s = 0;\n        if (v.length >= 8) s++;\n        if (/[a-z]/.test(v) && /[A-Z]/.test(v)) s++;\n        if (/\\d/.test(v)) s++;\n        if (/[^A-Za-z0-9]/.test(v)) s++;\n        if (v.length >= 12) s++;\n        return s;\n      }\n      function levelOf(v) {\n        if (!v) return '';\n        var s = score(v);\n        if (s <= 2) return 'weak';\n        if (s <= 3) return 'mid';\n        return 'strong';\n      }\n\n      function render() {\n        var v = input.value;\n        var lvl = levelOf(v);\n        bars.forEach(function (b, i) {\n          b.className = 'aa-pwd-bar';\n          if (showStrength && lvl) {\n            var on = (lvl === 'weak' && i < 1) || (lvl === 'mid' && i < 2) || (lvl === 'strong' && i < 3);\n            if (on) b.classList.add('on', lvl);\n          }\n        });\n        if (lvl === 'weak') tip.textContent = '弱：建议使用字母、数字与符号组合';\n        else if (lvl === 'mid') tip.textContent = '中：再增加长度或符号更安全';\n        else if (lvl === 'strong') tip.textContent = '强：密码强度良好';\n        else tip.textContent = '';\n      }\n\n      input.addEventListener('input', render);\n      input.addEventListener('focus', function () { field.classList.add('is-focus'); });\n      input.addEventListener('blur', function () { field.classList.remove('is-focus'); });\n      toggle.addEventListener('click', function () {\n        visible = !visible;\n        input.type = visible ? 'text' : 'password';\n        toggle.textContent = visible ? '隐藏' : '显示';\n      });\n      render();\n    }\n\n    document.querySelectorAll('.aa-pwd').forEach(initPwd);\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin PasswordInput 样式 — 对齐 组件7.txt PasswordInput：可见切换 + 强度检测 */\n\n.aa-pwd { font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); width: 260px; }\n.aa-pwd-field { display: flex; align-items: center; border: 1px solid var(--au-color-border); border-radius: 6px; padding: 0 10px; height: 36px; }\n.aa-pwd-field.is-focus { border-color: var(--au-color-brand); box-shadow: 0 0 0 3px rgba(47,84,235,0.2); }\n.aa-pwd-input { flex: 1; border: none; outline: none; font-size: 14px; color: var(--au-color-text-body); background: none; height: 100%; }\n.aa-pwd-toggle { border: none; background: none; cursor: pointer; color: var(--au-color-text-secondary); font-size: 13px; padding: 0 4px; }\n.aa-pwd-strength { display: flex; gap: 4px; margin-top: 8px; }\n.aa-pwd-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--au-color-border); transition: background .2s; }\n.aa-pwd-bar.on.weak { background: var(--au-color-error); }\n.aa-pwd-bar.on.mid { background: var(--au-color-warning); }\n.aa-pwd-bar.on.strong { background: var(--au-color-success); }\n.aa-pwd-tip { font-size: 12px; margin-top: 4px; color: var(--au-color-text-secondary); }\n","jsx":"import React, { useState, useMemo, useCallback } from 'react';\nimport './PasswordInput.css';\n\nfunction levelOf(v) {\n  if (!v) return '';\n  let s = 0;\n  if (v.length >= 8) s++;\n  if (/[a-z]/.test(v) && /[A-Z]/.test(v)) s++;\n  if (/\\d/.test(v)) s++;\n  if (/[^A-Za-z0-9]/.test(v)) s++;\n  if (v.length >= 12) s++;\n  if (s <= 2) return 'weak';\n  if (s <= 3) return 'mid';\n  return 'strong';\n}\n\nexport default function PasswordInput({ value = '', placeholder = '请输入密码', showStrength = true, onChange }) {\n  const [visible, setVisible] = useState(false);\n  const [focused, setFocused] = useState(false);\n\n  const level = useMemo(() => levelOf(value), [value]);\n  const tip = useMemo(() => {\n    if (level === 'weak') return '弱：建议使用字母、数字与符号组合';\n    if (level === 'mid') return '中：再增加长度或符号更安全';\n    if (level === 'strong') return '强：密码强度良好';\n    return '';\n  }, [level]);\n\n  const handle = useCallback(\n    (e) => {\n      if (onChange) onChange(e.target.value);\n    },\n    [onChange]\n  );\n\n  const barClass = (i) => {\n    if (!showStrength || !level) return '';\n    const on =\n      (level === 'weak' && i < 1) || (level === 'mid' && i < 2) || (level === 'strong' && i < 3);\n    return on ? 'on ' + level : '';\n  };\n\n  return (\n    <div className=\"aa-pwd\">\n      <div className={'aa-pwd-field' + (focused ? ' is-focus' : '')}>\n        <input\n          className=\"aa-pwd-input\"\n          type={visible ? 'text' : 'password'}\n          value={value}\n          placeholder={placeholder}\n          onChange={handle}\n          onFocus={() => setFocused(true)}\n          onBlur={() => setFocused(false)}\n        />\n        <button className=\"aa-pwd-toggle\" type=\"button\" onClick={() => setVisible((v) => !v)}>\n          {visible ? '隐藏' : '显示'}\n        </button>\n      </div>\n      {showStrength && (\n        <div className=\"aa-pwd-strength\">\n          {[0, 1, 2].map((i) => (\n            <span key={i} className={'aa-pwd-bar ' + barClass(i)} />\n          ))}\n        </div>\n      )}\n      <div className=\"aa-pwd-tip\">{tip}</div>\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-pwd\">\n    <div class=\"aa-pwd-field\" :class=\"{ 'is-focus': focused }\">\n      <input\n        ref=\"input\"\n        class=\"aa-pwd-input\"\n        :type=\"visible ? 'text' : 'password'\"\n        :value=\"value\"\n        :placeholder=\"placeholder\"\n        @input=\"onInput\"\n        @focus=\"focused = true\"\n        @blur=\"focused = false\"\n      />\n      <button class=\"aa-pwd-toggle\" type=\"button\" @click=\"visible = !visible\">\n        {{ visible ? '隐藏' : '显示' }}\n      </button>\n    </div>\n    <div v-if=\"showStrength\" class=\"aa-pwd-strength\">\n      <span\n        v-for=\"(b, i) in 3\"\n        :key=\"i\"\n        class=\"aa-pwd-bar\"\n        :class=\"barClass(i)\"\n      ></span>\n    </div>\n    <div class=\"aa-pwd-tip\">{{ tip }}</div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaPasswordInput',\n  props: {\n    value: { type: String, default: '' },\n    placeholder: { type: String, default: '请输入密码' },\n    showStrength: { type: Boolean, default: true }\n  },\n  data() {\n    return { visible: false, focused: false };\n  },\n  computed: {\n    level() {\n      const v = this.value;\n      if (!v) return '';\n      let s = 0;\n      if (v.length >= 8) s++;\n      if (/[a-z]/.test(v) && /[A-Z]/.test(v)) s++;\n      if (/\\d/.test(v)) s++;\n      if (/[^A-Za-z0-9]/.test(v)) s++;\n      if (v.length >= 12) s++;\n      if (s <= 2) return 'weak';\n      if (s <= 3) return 'mid';\n      return 'strong';\n    },\n    tip() {\n      if (this.level === 'weak') return '弱：建议使用字母、数字与符号组合';\n      if (this.level === 'mid') return '中：再增加长度或符号更安全';\n      if (this.level === 'strong') return '强：密码强度良好';\n      return '';\n    }\n  },\n  methods: {\n    onInput(e) {\n      this.$emit('input', e.target.value);\n      this.$emit('change', e.target.value);\n    },\n    barClass(i) {\n      if (!this.showStrength || !this.level) return '';\n      const on =\n        (this.level === 'weak' && i < 1) ||\n        (this.level === 'mid' && i < 2) ||\n        (this.level === 'strong' && i < 3);\n      return on ? 'on ' + this.level : '';\n    }\n  }\n};\n</script>\n\n<style src=\"./PasswordInput.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-pwd\">\n    <div class=\"aa-pwd-field\" :class=\"{ 'is-focus': focused }\">\n      <input\n        ref=\"input\"\n        class=\"aa-pwd-input\"\n        :type=\"visible ? 'text' : 'password'\"\n        :value=\"modelValue\"\n        :placeholder=\"placeholder\"\n        @input=\"onInput\"\n        @focus=\"focused = true\"\n        @blur=\"focused = false\"\n      />\n      <button class=\"aa-pwd-toggle\" type=\"button\" @click=\"visible = !visible\">\n        {{ visible ? '隐藏' : '显示' }}\n      </button>\n    </div>\n    <div v-if=\"showStrength\" class=\"aa-pwd-strength\">\n      <span\n        v-for=\"(b, i) in 3\"\n        :key=\"i\"\n        class=\"aa-pwd-bar\"\n        :class=\"barClass(i)\"\n      ></span>\n    </div>\n    <div class=\"aa-pwd-tip\">{{ tip }}</div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed } from 'vue';\n\nconst props = defineProps({\n  modelValue: { type: String, default: '' },\n  placeholder: { type: String, default: '请输入密码' },\n  showStrength: { type: Boolean, default: true }\n});\nconst emit = defineEmits(['update:modelValue', 'change']);\n\nconst visible = ref(false);\nconst focused = ref(false);\n\nconst level = computed(() => {\n  const v = props.modelValue;\n  if (!v) return '';\n  let s = 0;\n  if (v.length >= 8) s++;\n  if (/[a-z]/.test(v) && /[A-Z]/.test(v)) s++;\n  if (/\\d/.test(v)) s++;\n  if (/[^A-Za-z0-9]/.test(v)) s++;\n  if (v.length >= 12) s++;\n  if (s <= 2) return 'weak';\n  if (s <= 3) return 'mid';\n  return 'strong';\n});\n\nconst tip = computed(() => {\n  if (level.value === 'weak') return '弱：建议使用字母、数字与符号组合';\n  if (level.value === 'mid') return '中：再增加长度或符号更安全';\n  if (level.value === 'strong') return '强：密码强度良好';\n  return '';\n});\n\nfunction onInput(e) {\n  emit('update:modelValue', e.target.value);\n  emit('change', e.target.value);\n}\nfunction barClass(i) {\n  if (!props.showStrength || !level.value) return '';\n  const on =\n    (level.value === 'weak' && i < 1) ||\n    (level.value === 'mid' && i < 2) ||\n    (level.value === 'strong' && i < 3);\n  return on ? 'on ' + level.value : '';\n}\n</script>\n\n<style src=\"./PasswordInput.css\"></style>\n"}},{"slug":"phoneinput","name":"手机号输入 PhoneInput","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/phoneinput.json","category":"input","specLines":["- 国际区号选择","- 自动格式化","- 支持校验","- 适用于注册、登录"],"specSummary":"- 国际区号选择","contract":{"variants":["国际手机号输入","国内手机号输入"],"dims":[{"name":"region","values":["intl(区号选择)","cn-only"]},{"name":"format","values":["auto-format"]},{"name":"validation","values":["support"]}],"unknowns":["各国格式化规则清单"],"anatomy":{"region-select":"国际区号选择（样式沿用选择器）","input":"号码输入框，自动格式化"},"doNot":["区号下拉面板样式（沿用选择器规格）"],"usage":["国际区号选择","自动格式化","支持校验","适用于注册、登录"],"structure":{"format":"自动格式化"}},"files":{"html":"../frameworks/PhoneInput.html","css":"../frameworks/PhoneInput.css","jsx":"../frameworks/PhoneInput.jsx","vue2":"../frameworks/PhoneInput.vue2.vue","vue3":"../frameworks/PhoneInput.vue3.vue"},"sizes":{"html":2339,"css":1171,"jsx":1810,"vue2":1859,"vue3":1845},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · PhoneInput</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"./PhoneInput.css\" />\n</head>\n<body>\n  <div class=\"aa-page\">\n    <h2 class=\"aa-h2\">PhoneInput 手机号输入</h2>\n    <p class=\"aa-desc\">国际区号选择 + 自动格式化 + 校验，适用于注册、登录。</p>\n\n    <div class=\"aa-demo\">\n      <div class=\"aa-demo__title\">基础用法</div>\n      <div class=\"aa-phone\" id=\"phone\">\n        <select class=\"aa-phone-code\" id=\"code\">\n          <option value=\"+86\">+86</option>\n          <option value=\"+852\">+852</option>\n          <option value=\"+1\">+1</option>\n          <option value=\"+81\">+81</option>\n        </select>\n        <input class=\"aa-phone-input\" role=\"group\" id=\"num\" placeholder=\"请输入手机号\" inputmode=\"numeric\" />\n      </div>\n      <div class=\"aa-phone-tip\" id=\"tip\">支持中国大陆、香港、美、日等区号</div>\n    </div>\n  </div>\n\n  <script>\n    var root = document.getElementById('phone');\n    var code = document.getElementById('code');\n    var num = document.getElementById('num');\n    var tip = document.getElementById('tip');\n\n    function format(v) {\n      return v.replace(/\\D/g, '').slice(0, 11);\n    }\n    function validate() {\n      var c = code.value, v = num.value;\n      var ok;\n      if (c === '+86') ok = /^1[3-9]\\d{9}$/.test(v);\n      else ok = v.length >= 6 && v.length <= 15;\n      root.classList.remove('is-error');\n      if (!v) { tip.className = 'aa-phone-tip'; tip.textContent = '支持中国大陆、香港、美、日等区号'; }\n      else if (ok) { tip.className = 'aa-phone-tip ok'; tip.textContent = '格式正确：' + c + ' ' + v; }\n      else { tip.className = 'aa-phone-tip error'; tip.textContent = '手机号格式不正确'; root.classList.add('is-error'); }\n    }\n    num.addEventListener('input', function () { num.value = format(num.value); validate(); });\n    code.addEventListener('change', validate);\n    num.addEventListener('focus', function () { root.classList.add('is-focus'); });\n    num.addEventListener('blur', function () { root.classList.remove('is-focus'); });\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin PhoneInput 样式 — 国际区号 + 手机号 */\n.aa-phone { display: inline-flex; align-items: stretch; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); border: 1px solid var(--au-color-border); border-radius: 6px; height: 36px; background: var(--au-color-card-bg); overflow: hidden; }\n.aa-phone.is-focus { border-color: var(--au-color-brand); box-shadow: 0 0 0 3px rgba(47,84,235,0.2); }\n.aa-phone.is-error { border-color: var(--au-color-error); }\n.aa-phone-code { border: none; border-right: 1px solid var(--au-color-border); background: var(--au-color-table-header-bg); color: var(--au-color-text-body); font-size: 14px; padding: 0 8px; outline: none; cursor: pointer; }\n.aa-phone-input { flex: 1; border: none; outline: none; padding: 0 10px; font-size: 14px; color: var(--au-color-text-body); background: none; min-width: 160px; }\n.aa-phone-input::placeholder { color: var(--au-color-text-placeholder); }\n.aa-phone-tip { font-size: 12px; margin-top: 4px; color: var(--au-color-text-secondary); }\n.aa-phone-tip.error { color: var(--au-color-error); }\n.aa-phone-tip.ok { color: var(--au-color-success); }\n","jsx":"import React, { useState, useMemo } from 'react';\nimport './PhoneInput.css';\n\nconst CODES = [\n  { value: '+86', label: '中国大陆' },\n  { value: '+852', label: '香港' },\n  { value: '+1', label: '美国' },\n  { value: '+81', label: '日本' }\n];\n\nexport default function PhoneInput({ modelValue = '', placeholder = '请输入手机号', onChange }) {\n  const [code, setCode] = useState('+86');\n  const [number, setNumber] = useState(modelValue);\n  const [focused, setFocused] = useState(false);\n\n  const valid = useMemo(\n    () => (code === '+86' ? /^1[3-9]\\d{9}$/.test(number) : number.length >= 6 && number.length <= 15),\n    [code, number]\n  );\n  const tipClass = !number ? '' : valid ? 'ok' : 'error';\n  const tipText = !number ? '支持中国大陆、香港、美、日等区号' : valid ? '格式正确：' + code + ' ' + number : '手机号格式不正确';\n\n  const onInput = (e) => {\n    const v = e.target.value.replace(/\\D/g, '').slice(0, 11);\n    e.target.value = v;\n    setNumber(v);\n    if (onChange) onChange(code + ' ' + v);\n  };\n\n  return (\n    <div>\n      <div className={'aa-phone' + (focused ? ' is-focus' : '') + (!valid && number ? ' is-error' : '')}>\n        <select className=\"aa-phone-code\" value={code} onChange={(e) => setCode(e.target.value)}>\n          {CODES.map((c) => (\n            <option key={c.value} value={c.value}>\n              {c.value} {c.label}\n            </option>\n          ))}\n        </select>\n        <input\n          className=\"aa-phone-input\"\n          value={number}\n          inputMode=\"numeric\"\n          placeholder={placeholder}\n          onInput={onInput}\n          onFocus={() => setFocused(true)}\n          onBlur={() => setFocused(false)}\n        />\n      </div>\n      <div className={'aa-phone-tip ' + tipClass}>{tipText}</div>\n    </div>\n  );\n}\n","vue2":"<template>\n  <div>\n    <div class=\"aa-phone\" :class=\"{ 'is-focus': focused, 'is-error': !valid && !!number }\">\n      <select class=\"aa-phone-code\" v-model=\"code\">\n        <option v-for=\"c in codes\" :key=\"c.value\" :value=\"c.value\">{{ c.value }} {{ c.label }}</option>\n      </select>\n      <input\n        class=\"aa-phone-input\"\n        :value=\"number\"\n        inputmode=\"numeric\"\n        :placeholder=\"placeholder\"\n        @input=\"onInput\"\n        @focus=\"focused = true\"\n        @blur=\"focused = false\"\n      />\n    </div>\n    <div class=\"aa-phone-tip\" :class=\"tipClass\">{{ tipText }}</div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaPhoneInput',\n  props: {\n    value: { type: String, default: '' },\n    placeholder: { type: String, default: '请输入手机号' },\n    codes: {\n      type: Array,\n      default: () => [\n        { value: '+86', label: '中国大陆' },\n        { value: '+852', label: '香港' },\n        { value: '+1', label: '美国' },\n        { value: '+81', label: '日本' }\n      ]\n    }\n  },\n  data() {\n    return { code: '+86', number: this.value, focused: false };\n  },\n  computed: {\n    valid() {\n      if (this.code === '+86') return /^1[3-9]\\d{9}$/.test(this.number);\n      return this.number.length >= 6 && this.number.length <= 15;\n    },\n    tipClass() {\n      if (!this.number) return '';\n      return this.valid ? 'ok' : 'error';\n    },\n    tipText() {\n      if (!this.number) return '支持中国大陆、香港、美、日等区号';\n      return this.valid ? '格式正确：' + this.code + ' ' + this.number : '手机号格式不正确';\n    }\n  },\n  methods: {\n    onInput(e) {\n      this.number = e.target.value.replace(/\\D/g, '').slice(0, 11);\n      e.target.value = this.number;\n      this.$emit('input', this.code + ' ' + this.number);\n    }\n  }\n};\n</script>\n\n<style src=\"./PhoneInput.css\"></style>\n","vue3":"<template>\n  <div>\n    <div class=\"aa-phone\" :class=\"{ 'is-focus': focused, 'is-error': !valid && !!number }\">\n      <select class=\"aa-phone-code\" v-model=\"code\">\n        <option v-for=\"c in codes\" :key=\"c.value\" :value=\"c.value\">{{ c.value }} {{ c.label }}</option>\n      </select>\n      <input\n        class=\"aa-phone-input\"\n        :value=\"number\"\n        inputmode=\"numeric\"\n        :placeholder=\"placeholder\"\n        @input=\"onInput\"\n        @focus=\"focused = true\"\n        @blur=\"focused = false\"\n      />\n    </div>\n    <div class=\"aa-phone-tip\" :class=\"tipClass\">{{ tipText }}</div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed } from 'vue';\n\nconst props = defineProps({\n  modelValue: { type: String, default: '' },\n  placeholder: { type: String, default: '请输入手机号' },\n  codes: {\n    type: Array,\n    default: () => [\n      { value: '+86', label: '中国大陆' },\n      { value: '+852', label: '香港' },\n      { value: '+1', label: '美国' },\n      { value: '+81', label: '日本' }\n    ]\n  }\n});\nconst emit = defineEmits(['update:modelValue']);\nconst code = ref('+86');\nconst number = ref(props.modelValue);\nconst focused = ref(false);\n\nconst valid = computed(() =>\n  code.value === '+86' ? /^1[3-9]\\d{9}$/.test(number.value) : number.value.length >= 6 && number.value.length <= 15\n);\nconst tipClass = computed(() => (!number.value ? '' : valid.value ? 'ok' : 'error'));\nconst tipText = computed(() =>\n  !number.value ? '支持中国大陆、香港、美、日等区号' : valid.value ? '格式正确：' + code.value + ' ' + number.value : '手机号格式不正确'\n);\n\nfunction onInput(e) {\n  number.value = e.target.value.replace(/\\D/g, '').slice(0, 11);\n  e.target.value = number.value;\n  emit('update:modelValue', code.value + ' ' + number.value);\n}\n</script>\n\n<style src=\"./PhoneInput.css\"></style>\n"}},{"slug":"messagepro","name":"全局提示增强 MessagePro","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/messagepro.json","category":"feedback","specLines":["- 支持多种类型：成功、错误、警告、信息、加载","- 可带关闭按钮、操作按钮","- 可配置持续时间、位置","- 支持自定义图标","- 可堆叠显示"],"specSummary":"- 支持多种类型：成功、错误、警告、信息、加载","contract":{"variants":["成功","错误（可关闭）","警告（带操作按钮）","加载中"],"dims":[{"name":"type","values":["success","error","warning","info","loading"]},{"name":"action","values":["none","close","button"]}],"unknowns":["默认持续时间","堆叠的最大数量与间距"],"anatomy":{"item":"消息项：支持多种类型","close":"可带关闭按钮、操作按钮","config":"可配置持续时间、位置","stack":"可堆叠显示"},"doNot":["消息队列的最大条数","动画时序"],"usage":["支持多种类型：成功、错误、警告、信息、加载","可带关闭按钮、操作按钮","可配置持续时间、位置","支持自定义图标","可堆叠显示"],"structure":{"types":"5 种","stack":"可堆叠","duration":"可配置"}},"files":{"html":"../frameworks/MessagePro.html","css":"../frameworks/MessagePro.css","jsx":"../frameworks/MessagePro.jsx","vue2":"../frameworks/MessagePro.vue2.vue","vue3":"../frameworks/MessagePro.vue3.vue"},"sizes":{"html":2508,"css":1445,"jsx":1600,"vue2":1675,"vue3":1534},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · MessagePro（普通 H5）</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"MessagePro.css\" />\n  <style>body{margin:0;padding:24px;background: var(--au-color-page-bg);display:flex;gap:8px;flex-wrap:wrap;}</style>\n</head>\n<body>\n  <button onclick=\"AaMessage.success('保存成功')\">success</button>\n  <button onclick=\"AaMessage.error('操作失败')\">error</button>\n  <button onclick=\"AaMessage.warning('注意风险')\">warning</button>\n  <button onclick=\"AaMessage.info('已发送通知')\">info</button>\n  <button onclick=\"AaMessage.loading('加载中…')\">loading</button>\n\n  <script>\n    (function () {\n      var ICON = { success: '✓', error: '✕', warning: '!', info: 'i', loading: '…' };\n      var wrap = document.createElement('div');\n      wrap.className = 'aa-message-wrap';\n      document.body.appendChild(wrap);\n      var id = 0;\n      function open(opts) {\n        var el = document.createElement('div');\n        el.className = 'aa-message is-' + opts.type;\n        el.innerHTML = '<span class=\"aa-message-icon\" aria-live=\"polite\">' + (ICON[opts.type] || 'i') + '</span>' +\n          '<span class=\"aa-message-content\" aria-live=\"polite\">' + opts.content + '</span>' +\n          (opts.closable !== false ? '<span class=\"aa-message-close\" role=\"status\" aria-live=\"polite\">✕</span>' : '');\n        wrap.appendChild(el);\n        var myId = ++id;\n        function close() { if (el.parentNode) el.parentNode.removeChild(el); }\n        el.querySelector('.aa-message-close') && el.querySelector('.aa-message-close').addEventListener('click', close);\n        var d = opts.duration == null ? 3000 : opts.duration;\n        if (d > 0) setTimeout(close, d);\n        return close;\n      }\n      window.AaMessage = {\n        success: function (c, d) { return open({ type: 'success', content: c, duration: d }); },\n        error: function (c, d) { return open({ type: 'error', content: c, duration: d }); },\n        warning: function (c, d) { return open({ type: 'warning', content: c, duration: d }); },\n        info: function (c, d) { return open({ type: 'info', content: c, duration: d }); },\n        loading: function (c, d) { return open({ type: 'loading', content: c, duration: d }); },\n        open: open\n      };\n    })();\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin MessagePro 样式 — 对齐 组件7.txt MessagePro：顶部居中全局提示，可堆叠，自动消失 */\n\n.aa-message-wrap { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 3000;\n  display: flex; flex-direction: column; gap: 8px; pointer-events: none; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); }\n.aa-message { pointer-events: auto; min-width: 200px; max-width: 440px; background: var(--au-color-card-bg); border: 1px solid var(--au-color-border);\n  border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); padding: 10px 14px; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--au-color-text-body); }\n.aa-message-icon { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; color: var(--au-color-text-inverse); font-size: 11px; text-align: center; line-height: 16px; }\n.aa-message.is-success .aa-message-icon { background: var(--au-color-success); }\n.aa-message.is-error .aa-message-icon { background: var(--au-color-error); }\n.aa-message.is-warning .aa-message-icon { background: var(--au-color-warning); }\n.aa-message.is-info .aa-message-icon { background: var(--au-color-brand); }\n.aa-message.is-loading .aa-message-icon { background: var(--au-color-brand); }\n.aa-message-content { flex: 1; }\n.aa-message-close { color: var(--au-color-text-secondary); cursor: pointer; font-size: 14px; line-height: 1; }\n","jsx":"import React, { forwardRef, useImperativeHandle, useState, useRef } from 'react';\nimport './MessagePro.css';\n\nconst ICON = { success: '✓', error: '✕', warning: '!', info: 'i', loading: '…' };\n\nconst MessagePro = forwardRef(function MessagePro({ duration = 3000 }, ref) {\n  const [list, setList] = useState([]);\n  const idRef = useRef(0);\n\n  function close(id) { setList(l => l.filter(m => m.id !== id)); }\n  function open(opts) {\n    const id = ++idRef.current;\n    setList(l => [...l, { id, type: opts.type || 'info', content: opts.content, closable: opts.closable }]);\n    const d = opts.duration == null ? duration : opts.duration;\n    if (d > 0) setTimeout(() => close(id), d);\n    return id;\n  }\n\n  useImperativeHandle(ref, () => ({\n    open,\n    close,\n    success: (c, d) => open({ type: 'success', content: c, duration: d }),\n    error: (c, d) => open({ type: 'error', content: c, duration: d }),\n    warning: (c, d) => open({ type: 'warning', content: c, duration: d }),\n    info: (c, d) => open({ type: 'info', content: c, duration: d }),\n    loading: (c, d) => open({ type: 'loading', content: c, duration: d })\n  }));\n\n  return (\n    <div className=\"aa-message-wrap\">\n      {list.map(m => (\n        <div key={m.id} className={`aa-message is-${m.type}`}>\n          <span className=\"aa-message-icon\">{ICON[m.type] || 'i'}</span>\n          <span className=\"aa-message-content\">{m.content}</span>\n          {m.closable !== false ? <span className=\"aa-message-close\" onClick={() => close(m.id)}>✕</span> : null}\n        </div>\n      ))}\n    </div>\n  );\n});\n\nexport default MessagePro;\n","vue2":"<template>\n  <div class=\"aa-message-wrap\">\n    <div v-for=\"m in list\" :key=\"m.id\" class=\"aa-message\" :class=\"'is-' + m.type\">\n      <span class=\"aa-message-icon\">{{ icon(m.type) }}</span>\n      <span class=\"aa-message-content\">{{ m.content }}</span>\n      <span v-if=\"m.closable !== false\" class=\"aa-message-close\" @click=\"close(m.id)\">✕</span>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaMessagePro',\n  props: { duration: { type: Number, default: 3000 } },\n  data: function () { return { list: [], _id: 0 }; },\n  methods: {\n    icon: function (t) { return ({ success: '✓', error: '✕', warning: '!', info: 'i', loading: '…' })[t] || 'i'; },\n    open: function (opts) {\n      var id = ++this._id;\n      var item = { id: id, type: opts.type || 'info', content: opts.content, closable: opts.closable };\n      this.list.push(item);\n      var d = opts.duration == null ? this.duration : opts.duration;\n      if (d > 0) { var self = this; setTimeout(function () { self.close(id); }, d); }\n      return id;\n    },\n    close: function (id) { this.list = this.list.filter(function (m) { return m.id !== id; }); },\n    success: function (c, d) { return this.open({ type: 'success', content: c, duration: d }); },\n    error: function (c, d) { return this.open({ type: 'error', content: c, duration: d }); },\n    warning: function (c, d) { return this.open({ type: 'warning', content: c, duration: d }); },\n    info: function (c, d) { return this.open({ type: 'info', content: c, duration: d }); },\n    loading: function (c, d) { return this.open({ type: 'loading', content: c, duration: d }); }\n  }\n};\n</script>\n\n<style src=\"./MessagePro.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-message-wrap\">\n    <div v-for=\"m in list\" :key=\"m.id\" class=\"aa-message\" :class=\"'is-' + m.type\">\n      <span class=\"aa-message-icon\">{{ icon(m.type) }}</span>\n      <span class=\"aa-message-content\">{{ m.content }}</span>\n      <span v-if=\"m.closable !== false\" class=\"aa-message-close\" @click=\"close(m.id)\">✕</span>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nconst props = defineProps({ duration: { type: Number, default: 3000 } });\nconst list = ref([]);\nlet _id = 0;\n\nfunction icon(t) { return ({ success: '✓', error: '✕', warning: '!', info: 'i', loading: '…' })[t] || 'i'; }\nfunction close(id) { list.value = list.value.filter(m => m.id !== id); }\nfunction open(opts) {\n  const id = ++_id;\n  list.value.push({ id, type: opts.type || 'info', content: opts.content, closable: opts.closable });\n  const d = opts.duration == null ? props.duration : opts.duration;\n  if (d > 0) setTimeout(() => close(id), d);\n  return id;\n}\nfunction success(c, d) { return open({ type: 'success', content: c, duration: d }); }\nfunction error(c, d) { return open({ type: 'error', content: c, duration: d }); }\nfunction warning(c, d) { return open({ type: 'warning', content: c, duration: d }); }\nfunction info(c, d) { return open({ type: 'info', content: c, duration: d }); }\nfunction loading(c, d) { return open({ type: 'loading', content: c, duration: d }); }\n\ndefineExpose({ open, close, success, error, warning, info, loading });\n</script>\n\n<style src=\"./MessagePro.css\"></style>\n"}},{"slug":"notificationpro","name":"通知提醒增强 NotificationPro","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/notificationpro.json","category":"feedback","specLines":["- 右上角弹出","- 可带标题、描述、图标、操作按钮","- 停留时间可配置，可手动关闭","- 支持折叠、展开","- 适用于系统通知、任务结果"],"specSummary":"- 右上角弹出","contract":{"variants":["成功（标题+描述）","错误（带操作按钮）","信息","折叠态"],"dims":[{"name":"type","values":["success","error","warning","info"]},{"name":"state","values":["expanded","collapsed"]}],"unknowns":["默认宽度","最多同时显示的条数"],"anatomy":{"position":"右上角弹出","content":"可带标题、描述、图标、操作按钮","duration":"停留时间可配置，可手动关闭","collapse":"支持折叠、展开"},"doNot":["通知中心的列表页"],"usage":["右上角弹出","可带标题、描述、图标、操作按钮","停留时间可配置，可手动关闭","支持折叠、展开","适用于系统通知、任务结果"],"structure":{"position":"右上角","content":"标题 + 描述 + 操作"}},"files":{"html":"../frameworks/NotificationPro.html","css":"../frameworks/NotificationPro.css","jsx":"../frameworks/NotificationPro.jsx","vue2":"../frameworks/NotificationPro.vue2.vue","vue3":"../frameworks/NotificationPro.vue3.vue"},"sizes":{"html":2609,"css":1551,"jsx":1711,"vue2":1714,"vue3":1594},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · NotificationPro（普通 H5）</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"NotificationPro.css\" />\n  <style>body{margin:0;padding:24px;background: var(--au-color-page-bg);display:flex;gap:8px;flex-wrap:wrap;}</style>\n</head>\n<body>\n  <button onclick=\"AaNotify.success('审批通过', '订单 ORD-2024 已通过主管审批')\">success</button>\n  <button onclick=\"AaNotify.error('提交失败', '网络异常，请稍后重试')\">error</button>\n  <button onclick=\"AaNotify.warning('存储空间不足', '当前已使用 92%')\">warning</button>\n  <button onclick=\"AaNotify.info('新版本', '系统已发布 v2.3.0')\">info</button>\n\n  <script>\n    (function () {\n      var ICON = { success: '✓', error: '✕', warning: '!', info: 'i' };\n      var wrap = document.createElement('div');\n      wrap.className = 'aa-notification-wrap';\n      document.body.appendChild(wrap);\n      var id = 0;\n      function open(opts) {\n        var el = document.createElement('div');\n        el.className = 'aa-notification is-' + opts.type;\n        el.innerHTML = '<span class=\"aa-notification-icon\" aria-live=\"polite\">' + (ICON[opts.type] || 'i') + '</span>' +\n          '<div class=\"aa-notification-body\" aria-live=\"polite\"><div class=\"aa-notification-title\" aria-live=\"polite\">' + opts.title + '</div>' +\n          '<div class=\"aa-notification-desc\" aria-live=\"polite\">' + opts.desc + '</div></div>' +\n          '<span class=\"aa-notification-close\" role=\"status\" aria-live=\"polite\">✕</span>';\n        wrap.appendChild(el);\n        var myId = ++id;\n        function close() { if (el.parentNode) el.parentNode.removeChild(el); }\n        el.querySelector('.aa-notification-close').addEventListener('click', close);\n        var d = opts.duration == null ? 4500 : opts.duration;\n        if (d > 0) setTimeout(close, d);\n        return close;\n      }\n      window.AaNotify = {\n        success: function (t, d, dur) { return open({ type: 'success', title: t, desc: d, duration: dur }); },\n        error: function (t, d, dur) { return open({ type: 'error', title: t, desc: d, duration: dur }); },\n        warning: function (t, d, dur) { return open({ type: 'warning', title: t, desc: d, duration: dur }); },\n        info: function (t, d, dur) { return open({ type: 'info', title: t, desc: d, duration: dur }); },\n        open: open\n      };\n    })();\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin NotificationPro 样式 — 对齐 组件7.txt NotificationPro：右上角通知，标题+描述+图标，可关闭 */\n\n.aa-notification-wrap { position: fixed; top: 16px; right: 16px; z-index: 3000; width: 320px;\n  display: flex; flex-direction: column; gap: 10px; pointer-events: none;\n  font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); }\n.aa-notification { pointer-events: auto; background: var(--au-color-card-bg); border: 1px solid var(--au-color-border); border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0,0,0,0.12); padding: 14px 16px; display: flex; gap: 10px; }\n.aa-notification-icon { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; color: var(--au-color-text-inverse); font-size: 12px; text-align: center; line-height: 18px; margin-top: 2px; }\n.aa-notification.is-success .aa-notification-icon { background: var(--au-color-success); }\n.aa-notification.is-error .aa-notification-icon { background: var(--au-color-error); }\n.aa-notification.is-warning .aa-notification-icon { background: var(--au-color-warning); }\n.aa-notification.is-info .aa-notification-icon { background: var(--au-color-brand); }\n.aa-notification-body { flex: 1; }\n.aa-notification-title { font-size: 14px; font-weight: 500; color: var(--au-color-text-title); }\n.aa-notification-desc { font-size: 13px; color: var(--au-color-text-secondary); margin-top: 4px; line-height: 1.5; }\n.aa-notification-close { color: var(--au-color-text-secondary); cursor: pointer; font-size: 14px; line-height: 1; }\n","jsx":"import React, { forwardRef, useImperativeHandle, useState, useRef } from 'react';\nimport './NotificationPro.css';\n\nconst ICON = { success: '✓', error: '✕', warning: '!', info: 'i' };\n\nconst NotificationPro = forwardRef(function NotificationPro({ duration = 4500 }, ref) {\n  const [list, setList] = useState([]);\n  const idRef = useRef(0);\n\n  function close(id) { setList(l => l.filter(m => m.id !== id)); }\n  function open(opts) {\n    const id = ++idRef.current;\n    setList(l => [...l, { id, type: opts.type || 'info', title: opts.title, desc: opts.desc }]);\n    const d = opts.duration == null ? duration : opts.duration;\n    if (d > 0) setTimeout(() => close(id), d);\n    return id;\n  }\n\n  useImperativeHandle(ref, () => ({\n    open,\n    close,\n    success: (t, d, dur) => open({ type: 'success', title: t, desc: d, duration: dur }),\n    error: (t, d, dur) => open({ type: 'error', title: t, desc: d, duration: dur }),\n    warning: (t, d, dur) => open({ type: 'warning', title: t, desc: d, duration: dur }),\n    info: (t, d, dur) => open({ type: 'info', title: t, desc: d, duration: dur })\n  }));\n\n  return (\n    <div className=\"aa-notification-wrap\">\n      {list.map(m => (\n        <div key={m.id} className={`aa-notification is-${m.type}`}>\n          <span className=\"aa-notification-icon\">{ICON[m.type] || 'i'}</span>\n          <div className=\"aa-notification-body\">\n            <div className=\"aa-notification-title\">{m.title}</div>\n            {m.desc ? <div className=\"aa-notification-desc\">{m.desc}</div> : null}\n          </div>\n          <span className=\"aa-notification-close\" onClick={() => close(m.id)}>✕</span>\n        </div>\n      ))}\n    </div>\n  );\n});\n\nexport default NotificationPro;\n","vue2":"<template>\n  <div class=\"aa-notification-wrap\">\n    <div v-for=\"m in list\" :key=\"m.id\" class=\"aa-notification\" :class=\"'is-' + m.type\">\n      <span class=\"aa-notification-icon\">{{ icon(m.type) }}</span>\n      <div class=\"aa-notification-body\">\n        <div class=\"aa-notification-title\">{{ m.title }}</div>\n        <div class=\"aa-notification-desc\" v-if=\"m.desc\">{{ m.desc }}</div>\n      </div>\n      <span class=\"aa-notification-close\" @click=\"close(m.id)\">✕</span>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaNotificationPro',\n  props: { duration: { type: Number, default: 4500 } },\n  data: function () { return { list: [], _id: 0 }; },\n  methods: {\n    icon: function (t) { return ({ success: '✓', error: '✕', warning: '!', info: 'i' })[t] || 'i'; },\n    open: function (opts) {\n      var id = ++this._id;\n      this.list.push({ id: id, type: opts.type || 'info', title: opts.title, desc: opts.desc });\n      var d = opts.duration == null ? this.duration : opts.duration;\n      if (d > 0) { var self = this; setTimeout(function () { self.close(id); }, d); }\n      return id;\n    },\n    close: function (id) { this.list = this.list.filter(function (m) { return m.id !== id; }); },\n    success: function (t, d, dur) { return this.open({ type: 'success', title: t, desc: d, duration: dur }); },\n    error: function (t, d, dur) { return this.open({ type: 'error', title: t, desc: d, duration: dur }); },\n    warning: function (t, d, dur) { return this.open({ type: 'warning', title: t, desc: d, duration: dur }); },\n    info: function (t, d, dur) { return this.open({ type: 'info', title: t, desc: d, duration: dur }); }\n  }\n};\n</script>\n\n<style src=\"./NotificationPro.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-notification-wrap\">\n    <div v-for=\"m in list\" :key=\"m.id\" class=\"aa-notification\" :class=\"'is-' + m.type\">\n      <span class=\"aa-notification-icon\">{{ icon(m.type) }}</span>\n      <div class=\"aa-notification-body\">\n        <div class=\"aa-notification-title\">{{ m.title }}</div>\n        <div class=\"aa-notification-desc\" v-if=\"m.desc\">{{ m.desc }}</div>\n      </div>\n      <span class=\"aa-notification-close\" @click=\"close(m.id)\">✕</span>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nconst props = defineProps({ duration: { type: Number, default: 4500 } });\nconst list = ref([]);\nlet _id = 0;\n\nfunction icon(t) { return ({ success: '✓', error: '✕', warning: '!', info: 'i' })[t] || 'i'; }\nfunction close(id) { list.value = list.value.filter(m => m.id !== id); }\nfunction open(opts) {\n  const id = ++_id;\n  list.value.push({ id, type: opts.type || 'info', title: opts.title, desc: opts.desc });\n  const d = opts.duration == null ? props.duration : opts.duration;\n  if (d > 0) setTimeout(() => close(id), d);\n  return id;\n}\nfunction success(t, d, dur) { return open({ type: 'success', title: t, desc: d, duration: dur }); }\nfunction error(t, d, dur) { return open({ type: 'error', title: t, desc: d, duration: dur }); }\nfunction warning(t, d, dur) { return open({ type: 'warning', title: t, desc: d, duration: dur }); }\nfunction info(t, d, dur) { return open({ type: 'info', title: t, desc: d, duration: dur }); }\n\ndefineExpose({ open, close, success, error, warning, info });\n</script>\n\n<style src=\"./NotificationPro.css\"></style>\n"}},{"slug":"progressvariants","name":"进度条变体 ProgressVariants","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/progressvariants.json","category":"feedback","specLines":["- 线型、圆形、仪表盘型","- 支持状态颜色（成功、警告、错误）","- 可显示百分比文字","- 可带图标","- 适用于上传、任务进度"],"specSummary":"- 线型、圆形、仪表盘型","contract":{"variants":["线型 + 百分比","圆形","仪表盘型","成功状态","错误状态（无文字）"],"dims":[{"name":"shape","values":["line","circle","dashboard"]},{"name":"status","values":["normal","success","warning","error"]},{"name":"showText","values":["true","false"]}],"unknowns":["线型的高度与圆角","圆形/仪表盘的默认直径"],"anatomy":{"track":"轨道","bar":"进度条","text":"可显示百分比文字","status":"支持状态颜色（成功、警告、错误）"},"doNot":["环形动画的缓动"],"usage":["线型、圆形、仪表盘型","支持状态颜色（成功、警告、错误）","可显示百分比文字","可带图标","适用于上传、任务进度"],"structure":{"shapes":"线型 / 圆形 / 仪表盘","status":"4 种"}},"files":{"html":"../frameworks/ProgressVariants.html","css":"../frameworks/ProgressVariants.css","jsx":"../frameworks/ProgressVariants.jsx","vue2":"../frameworks/ProgressVariants.vue2.vue","vue3":"../frameworks/ProgressVariants.vue3.vue"},"sizes":{"html":2420,"css":1636,"jsx":1590,"vue2":1927,"vue3":1799},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · ProgressVariants（普通 H5）</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"ProgressVariants.css\" />\n  <style>body{margin:0;padding:24px;background: var(--au-color-page-bg);display:flex;flex-direction:column;gap:24px;}\n    .aa-card{background: var(--au-color-card-bg);border: 1px solid var(--au-color-border);border-radius:8px;padding:20px;max-width:420px;}</style>\n</head>\n<body>\n  <div class=\"aa-card\">\n    <div class=\"aa-progress is-success\" role=\"progressbar\" style=\"margin-bottom:12px\">\n      <div class=\"aa-progress-line-wrap\">\n        <div class=\"aa-progress-line\"><div class=\"aa-progress-line-fill\" style=\"width:100%\"></div></div>\n        <span class=\"aa-progress-text\">完成</span>\n      </div>\n    </div>\n    <div class=\"aa-progress\" role=\"progressbar\">\n      <div class=\"aa-progress-line-wrap\">\n        <div class=\"aa-progress-line\"><div class=\"aa-progress-line-fill\" style=\"width:60%\"></div></div>\n        <span class=\"aa-progress-text\">60%</span>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"aa-card\" style=\"display:flex;gap:24px;align-items:center\">\n    <div class=\"aa-progress-circle\" role=\"progressbar\" id=\"c1\"></div>\n    <div class=\"aa-progress-circle\" role=\"progressbar\" id=\"c2\"></div>\n  </div>\n\n  <script>\n    var C = 2 * Math.PI * 42;\n    function circle(el, percent, status) {\n      var color = { success: '#2E7D0A', warning: '#8C5A00', error: '#CF1322', normal: '#2F54EB' }[status] || '#2F54EB';\n      el.className = 'aa-progress-circle' + (status !== 'normal' ? ' is-' + status : '');\n      el.innerHTML = '<svg width=\"100\" height=\"100\" viewBox=\"0 0 100 100\">' +\n        '<circle cx=\"50\" cy=\"50\" r=\"42\" fill=\"none\" stroke=\"#E8ECF1\" stroke-width=\"8\" />' +\n        '<circle cx=\"50\" cy=\"50\" r=\"42\" fill=\"none\" stroke=\"' + color + '\" stroke-width=\"8\" stroke-linecap=\"round\" ' +\n        'stroke-dasharray=\"' + C + '\" stroke-dashoffset=\"' + (C * (1 - percent / 100)).toFixed(2) + '\" transform=\"rotate(-90 50 50)\" /></svg>' +\n        '<span class=\"aa-progress-circle-text\">' + percent + '%</span>';\n    }\n    circle(document.getElementById('c1'), 72, 'normal');\n    circle(document.getElementById('c2'), 88, 'success');\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin ProgressVariants 样式 — 对齐 组件7.txt ProgressVariants：线型/圆形/仪表盘，状态色，百分比 */\n\n.aa-progress { font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); color: var(--au-color-text-body); }\n.aa-progress-line-wrap { display: flex; align-items: center; }\n.aa-progress-line { flex: 1; height: 8px; background: var(--au-color-border); border-radius: 4px; overflow: hidden; }\n.aa-progress-line-fill { height: 100%; background: var(--au-color-brand); border-radius: 4px; transition: width .3s; }\n.aa-progress.is-success .aa-progress-line-fill { background: var(--au-color-success); }\n.aa-progress.is-warning .aa-progress-line-fill { background: var(--au-color-warning); }\n.aa-progress.is-error .aa-progress-line-fill { background: var(--au-color-error); }\n.aa-progress-text { margin-left: 8px; font-size: 13px; min-width: 36px; }\n.aa-progress.is-success .aa-progress-text { color: var(--au-color-success); }\n.aa-progress.is-warning .aa-progress-text { color: var(--au-color-warning); }\n.aa-progress.is-error .aa-progress-text { color: var(--au-color-error); }\n.aa-progress-circle { position: relative; display: inline-flex; }\n.aa-progress-circle-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 500; }\n.aa-progress-circle.is-success .aa-progress-circle-text { color: var(--au-color-success); }\n.aa-progress-circle.is-warning .aa-progress-circle-text { color: var(--au-color-warning); }\n.aa-progress-circle.is-error .aa-progress-circle-text { color: var(--au-color-error); }\n","jsx":"import React from 'react';\nimport './ProgressVariants.css';\n\nconst R = 42;\nconst CIRC = 2 * Math.PI * R;\nconst COLORS = { success: '#2E7D0A', warning: '#8C5A00', error: '#CF1322', normal: '#2F54EB' };\n\nexport default function ProgressVariants({ type = 'line', percent = 0, status = 'normal', showInfo = true }) {\n  const color = COLORS[status] || COLORS.normal;\n  if (type === 'line') {\n    return (\n      <div className={'aa-progress is-' + status}>\n        <div className=\"aa-progress-line-wrap\">\n          <div className=\"aa-progress-line\"><div className=\"aa-progress-line-fill\" style={{ width: percent + '%' }} /></div>\n          {showInfo ? <span className=\"aa-progress-text\">{status === 'success' ? '完成' : percent + '%'}</span> : null}\n        </div>\n      </div>\n    );\n  }\n  const isDash = type === 'dashboard';\n  const arcLen = isDash ? CIRC * 0.75 : CIRC;\n  return (\n    <div className={'aa-progress-circle' + (status !== 'normal' ? ' is-' + status : '')}>\n      <svg width=\"100\" height=\"100\" viewBox=\"0 0 100 100\">\n        <circle cx=\"50\" cy=\"50\" r={R} fill=\"none\" stroke=\"#E8ECF1\" strokeWidth=\"8\"\n                strokeDasharray={CIRC} strokeDashoffset={isDash ? CIRC * 0.25 : 0} />\n        <circle cx=\"50\" cy=\"50\" r={R} fill=\"none\" stroke={color} strokeWidth=\"8\" strokeLinecap=\"round\"\n                strokeDasharray={arcLen} strokeDashoffset={arcLen * (1 - percent / 100)}\n                transform={isDash ? 'rotate(135 50 50)' : 'rotate(-90 50 50)'} />\n      </svg>\n      {showInfo ? <span className=\"aa-progress-circle-text\">{percent}%</span> : null}\n    </div>\n  );\n}\n","vue2":"<template>\n  <div>\n    <!-- 线型 -->\n    <div v-if=\"type === 'line'\" class=\"aa-progress\" :class=\"'is-' + status\">\n      <div class=\"aa-progress-line-wrap\">\n        <div class=\"aa-progress-line\"><div class=\"aa-progress-line-fill\" :style=\"{ width: percent + '%' }\"></div></div>\n        <span v-if=\"showInfo\" class=\"aa-progress-text\">{{ status === 'success' ? '完成' : percent + '%' }}</span>\n      </div>\n    </div>\n    <!-- 圆形 / 仪表盘 -->\n    <div v-else class=\"aa-progress-circle\" :class=\"status !== 'normal' ? 'is-' + status : ''\">\n      <svg width=\"100\" height=\"100\" viewBox=\"0 0 100 100\">\n        <circle cx=\"50\" cy=\"50\" r=\"42\" fill=\"none\" stroke=\"#E8ECF1\" stroke-width=\"8\"\n                :stroke-dasharray=\"circleCirc\" :stroke-dashoffset=\"type === 'dashboard' ? circleCirc * 0.25 : 0\" />\n        <circle cx=\"50\" cy=\"50\" r=\"42\" fill=\"none\" :stroke=\"color\" stroke-width=\"8\" stroke-linecap=\"round\"\n                :stroke-dasharray=\"arcLen\" :stroke-dashoffset=\"arcLen * (1 - percent / 100)\"\n                :transform=\"type === 'dashboard' ? 'rotate(135 50 50)' : 'rotate(-90 50 50)'\" />\n      </svg>\n      <span v-if=\"showInfo\" class=\"aa-progress-circle-text\">{{ percent }}%</span>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaProgressVariants',\n  props: {\n    type: { type: String, default: 'line' },\n    percent: { type: Number, default: 0 },\n    status: { type: String, default: 'normal' },\n    showInfo: { type: Boolean, default: true }\n  },\n  data: function () { return { r: 42 }; },\n  computed: {\n    circleCirc: function () { return 2 * Math.PI * this.r; },\n    arcLen: function () { return this.type === 'dashboard' ? this.circleCirc * 0.75 : this.circleCirc; },\n    color: function () {\n      return ({ success: '#2E7D0A', warning: '#8C5A00', error: '#CF1322', normal: '#2F54EB' })[this.status] || '#2F54EB';\n    }\n  }\n};\n</script>\n\n<style src=\"./ProgressVariants.css\"></style>\n","vue3":"<template>\n  <div>\n    <div v-if=\"type === 'line'\" class=\"aa-progress\" :class=\"'is-' + status\">\n      <div class=\"aa-progress-line-wrap\">\n        <div class=\"aa-progress-line\"><div class=\"aa-progress-line-fill\" :style=\"{ width: percent + '%' }\"></div></div>\n        <span v-if=\"showInfo\" class=\"aa-progress-text\">{{ status === 'success' ? '完成' : percent + '%' }}</span>\n      </div>\n    </div>\n    <div v-else class=\"aa-progress-circle\" :class=\"status !== 'normal' ? 'is-' + status : ''\">\n      <svg width=\"100\" height=\"100\" viewBox=\"0 0 100 100\">\n        <circle cx=\"50\" cy=\"50\" r=\"42\" fill=\"none\" stroke=\"#E8ECF1\" stroke-width=\"8\"\n                :stroke-dasharray=\"circleCirc\" :stroke-dashoffset=\"type === 'dashboard' ? circleCirc * 0.25 : 0\" />\n        <circle cx=\"50\" cy=\"50\" r=\"42\" fill=\"none\" :stroke=\"color\" stroke-width=\"8\" stroke-linecap=\"round\"\n                :stroke-dasharray=\"arcLen\" :stroke-dashoffset=\"arcLen * (1 - percent / 100)\"\n                :transform=\"type === 'dashboard' ? 'rotate(135 50 50)' : 'rotate(-90 50 50)'\" />\n      </svg>\n      <span v-if=\"showInfo\" class=\"aa-progress-circle-text\">{{ percent }}%</span>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nconst props = defineProps({\n  type: { type: String, default: 'line' },\n  percent: { type: Number, default: 0 },\n  status: { type: String, default: 'normal' },\n  showInfo: { type: Boolean, default: true }\n});\nconst r = 42;\nconst circleCirc = computed(() => 2 * Math.PI * r);\nconst arcLen = computed(() => props.type === 'dashboard' ? circleCirc.value * 0.75 : circleCirc.value);\nconst color = computed(() => ({ success: '#2E7D0A', warning: '#8C5A00', error: '#CF1322', normal: '#2F54EB' })[props.status] || '#2F54EB');\n</script>\n\n<style src=\"./ProgressVariants.css\"></style>\n"}},{"slug":"skeletonpro","name":"骨架屏增强 SkeletonPro","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/skeletonpro.json","category":"feedback","specLines":["- 支持多种占位形状","- 可组合成页面级骨架","- 微光动画","- 可配置加载速度","- 切换真实内容时淡入"],"specSummary":"- 支持多种占位形状","contract":{"variants":["文本行","头像圆","图片/区块","静态占位"],"dims":[{"name":"shape","values":["text","circle","rect","button"]},{"name":"animation","values":["shimmer","none"]}],"unknowns":["微光动画的周期与颜色","淡入时长"],"anatomy":{"shapes":"支持多种占位形状","compose":"可组合成页面级骨架","animation":"微光动画","transition":"切换真实内容时淡入"},"doNot":["各业务页面的具体骨架模板"],"usage":["支持多种占位形状","可组合成页面级骨架","微光动画","可配置加载速度","切换真实内容时淡入"],"structure":{"shapes":"文本 / 圆 / 矩形 / 按钮","animation":"微光"}},"files":{"html":"../frameworks/SkeletonPro.html","css":"../frameworks/SkeletonPro.css","jsx":"../frameworks/SkeletonPro.jsx","vue2":"../frameworks/SkeletonPro.vue2.vue","vue3":"../frameworks/SkeletonPro.vue3.vue"},"sizes":{"html":1369,"css":1063,"jsx":827,"vue2":918,"vue3":803},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · SkeletonPro（普通 H5）</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"SkeletonPro.css\" />\n  <style>body{margin:0;padding:24px;background: var(--au-color-page-bg);} .aa-card{background: var(--au-color-card-bg);border: 1px solid var(--au-color-border);border-radius:8px;padding:16px;max-width:420px;}</style>\n</head>\n<body>\n  <div class=\"aa-card\">\n    <div class=\"aa-skeleton is-active\" role=\"status\" aria-busy=\"true\" id=\"app\"></div>\n  </div>\n\n  <script>\n    var root = document.getElementById('app');\n    var html = '<div class=\"aa-skeleton-block\" role=\"status\" aria-busy=\"true\"></div>';\n    html += '<div class=\"aa-skeleton-row\" role=\"status\" aria-busy=\"true\"><div class=\"aa-skeleton-avatar\" aria-busy=\"true\"></div><div class=\"aa-skeleton-lines\" role=\"status\" aria-busy=\"true\">' +\n      '<div class=\"aa-skeleton-line\" aria-busy=\"true\" style=\"width:40%\"></div><div class=\"aa-skeleton-line\" aria-busy=\"true\" style=\"width:80%\"></div></div></div>';\n    for (var i = 0; i < 2; i++) html += '<div class=\"aa-skeleton-line\" aria-busy=\"true\" style=\"width:100%\"></div>';\n    root.innerHTML = html;\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin SkeletonPro 样式 — 对齐 组件7.txt SkeletonPro：骨架屏占位，微光动画 */\n\n.aa-skeleton { font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); }\n.aa-skeleton-row { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }\n.aa-skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--au-color-border); flex-shrink: 0; }\n.aa-skeleton-lines { flex: 1; }\n.aa-skeleton-line { height: 12px; background: var(--au-color-border); border-radius: 4px; margin-bottom: 8px; }\n.aa-skeleton-block { height: 120px; background: var(--au-color-border); border-radius: 8px; margin-bottom: 12px; }\n.aa-skeleton.is-active .aa-skeleton-avatar,\n.aa-skeleton.is-active .aa-skeleton-line,\n.aa-skeleton.is-active .aa-skeleton-block { background: linear-gradient(90deg, #E8ECF1 25%, #F0F5FF 37%, #E8ECF1 63%); background-size: 400% 100%; animation: aa-shimmer 1.4s ease infinite; }\n@keyframes aa-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }\n","jsx":"import React from 'react';\nimport './SkeletonPro.css';\n\nexport default function SkeletonPro({ rows = 3, avatar = false, block = false, active = true }) {\n  return (\n    <div className={'aa-skeleton' + (active ? ' is-active' : '')}>\n      {avatar ? (\n        <div className=\"aa-skeleton-row\">\n          <div className=\"aa-skeleton-avatar\" />\n          <div className=\"aa-skeleton-lines\">\n            <div className=\"aa-skeleton-line\" style={{ width: '40%' }} />\n            <div className=\"aa-skeleton-line\" style={{ width: '80%' }} />\n          </div>\n        </div>\n      ) : null}\n      {block ? <div className=\"aa-skeleton-block\" /> : null}\n      {Array.from({ length: rows }).map((_, i) => (\n        <div key={i} className=\"aa-skeleton-line\" style={{ width: (i % 2 === 0 ? 100 : 70) + '%' }} />\n      ))}\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-skeleton\" :class=\"{ 'is-active': active }\">\n    <div v-if=\"avatar\" class=\"aa-skeleton-row\">\n      <div class=\"aa-skeleton-avatar\"></div>\n      <div class=\"aa-skeleton-lines\">\n        <div class=\"aa-skeleton-line\" style=\"width:40%\"></div>\n        <div class=\"aa-skeleton-line\" style=\"width:80%\"></div>\n      </div>\n    </div>\n    <div v-if=\"block\" class=\"aa-skeleton-block\"></div>\n    <div v-for=\"i in rows\" :key=\"i\" class=\"aa-skeleton-line\" :style=\"{ width: lineWidth(i) }\"></div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaSkeletonPro',\n  props: {\n    rows: { type: Number, default: 3 },\n    avatar: { type: Boolean, default: false },\n    block: { type: Boolean, default: false },\n    active: { type: Boolean, default: true }\n  },\n  methods: {\n    lineWidth: function (i) { return (i % 2 === 0 ? 100 : 70) + '%'; }\n  }\n};\n</script>\n\n<style src=\"./SkeletonPro.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-skeleton\" :class=\"{ 'is-active': active }\">\n    <div v-if=\"avatar\" class=\"aa-skeleton-row\">\n      <div class=\"aa-skeleton-avatar\"></div>\n      <div class=\"aa-skeleton-lines\">\n        <div class=\"aa-skeleton-line\" style=\"width:40%\"></div>\n        <div class=\"aa-skeleton-line\" style=\"width:80%\"></div>\n      </div>\n    </div>\n    <div v-if=\"block\" class=\"aa-skeleton-block\"></div>\n    <div v-for=\"i in rows\" :key=\"i\" class=\"aa-skeleton-line\" :style=\"{ width: (i % 2 === 0 ? 100 : 70) + '%' }\"></div>\n  </div>\n</template>\n\n<script setup>\ndefineProps({\n  rows: { type: Number, default: 3 },\n  avatar: { type: Boolean, default: false },\n  block: { type: Boolean, default: false },\n  active: { type: Boolean, default: true }\n});\n</script>\n\n<style src=\"./SkeletonPro.css\"></style>\n"}},{"slug":"emptypro","name":"空状态增强 EmptyPro","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/emptypro.json","category":"feedback","specLines":["- 多种场景：无数据、无权限、搜索无结果、网络错误","- 插画可静态或动效","- 主按钮、次按钮","- 可自定义文案","- 适用于所有列表页"],"specSummary":"- 多种场景：无数据、无权限、搜索无结果、网络错误","contract":{"variants":["无数据","无权限","搜索无结果","网络错误（动效）"],"dims":[{"name":"scene","values":["no-data","no-permission","no-result","network-error"]},{"name":"illustration","values":["static","animated"]}],"unknowns":["插画的尺寸","按钮的尺寸与间距"],"anatomy":{"scene":"多种场景：无数据、无权限、搜索无结果、网络错误","illustration":"插画可静态或动效","actions":"主按钮、次按钮","text":"可自定义文案"},"doNot":["插画素材本身"],"usage":["多种场景：无数据、无权限、搜索无结果、网络错误","插画可静态或动效","主按钮、次按钮","可自定义文案","适用于所有列表页"],"structure":{"scenes":"4 种","actions":"主 + 次按钮"}},"files":{"html":"../frameworks/EmptyPro.html","css":"../frameworks/EmptyPro.css","jsx":"../frameworks/EmptyPro.jsx","vue2":"../frameworks/EmptyPro.vue2.vue","vue3":"../frameworks/EmptyPro.vue3.vue"},"sizes":{"html":1986,"css":1279,"jsx":1387,"vue2":1631,"vue3":1629},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · EmptyPro（普通 H5）</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"EmptyPro.css\" />\n  <style>body{margin:0;padding:24px;background: var(--au-color-page-bg);display:flex;gap:16px;flex-wrap:wrap;}\n    .aa-card{background: var(--au-color-card-bg);border: 1px solid var(--au-color-border);border-radius:8px;width:320px;}</style>\n</head>\n<body>\n  <div class=\"aa-card\"><div class=\"aa-empty\" role=\"status\" data-type=\"empty\"></div></div>\n  <div class=\"aa-card\"><div class=\"aa-empty\" role=\"status\" data-type=\"permission\"></div></div>\n  <div class=\"aa-card\"><div class=\"aa-empty\" role=\"status\" data-type=\"search\"></div></div>\n  <div class=\"aa-card\"><div class=\"aa-empty\" role=\"status\" data-type=\"error\"></div></div>\n\n  <script>\n    var PRESET = {\n      empty: { icon: '📭', title: '暂无数据', desc: '当前列表为空，试试新增一条记录。' },\n      permission: { icon: '🔒', title: '无访问权限', desc: '你没有查看该内容的权限。' },\n      search: { icon: '🔍', title: '未找到结果', desc: '换个关键词或筛选条件再试。' },\n      error: { icon: '⚠️', title: '加载失败', desc: '网络异常，请稍后重试。' }\n    };\n    document.querySelectorAll('.aa-empty').forEach(function (el) {\n      var p = PRESET[el.dataset.type] || PRESET.empty;\n      el.innerHTML = '<div class=\"aa-empty-icon\">' + p.icon + '</div>' +\n        '<div class=\"aa-empty-title\">' + p.title + '</div>' +\n        '<div class=\"aa-empty-desc\">' + p.desc + '</div>' +\n        '<div class=\"aa-empty-actions\" role=\"status\"><button class=\"aa-empty-btn primary\" role=\"status\">主要操作</button>' +\n        '<button class=\"aa-empty-btn\" role=\"status\">次要操作</button></div>';\n    });\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin EmptyPro 样式 — 对齐 组件7.txt EmptyPro：无数据/无权限/搜索无结果/网络错误 等空状态 */\n\n.aa-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px;\n  text-align: center; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); color: var(--au-color-text-body); }\n.aa-empty-icon { font-size: 48px; margin-bottom: 12px; }\n.aa-empty-title { font-size: 16px; font-weight: 500; color: var(--au-color-text-title); }\n.aa-empty-desc { font-size: 13px; color: var(--au-color-text-secondary); margin-top: 8px; line-height: 1.5; max-width: 300px; }\n.aa-empty-actions { margin-top: 16px; display: flex; gap: 8px; }\n.aa-empty-btn { height: 32px; padding: 0 16px; border-radius: 6px; border: 1px solid var(--au-color-border); background: var(--au-color-card-bg); color: var(--au-color-text-body); cursor: pointer; font-size: 14px; }\n.aa-empty-btn:hover { border-color: #C9D4F2; color: var(--au-color-brand); }\n.aa-empty-btn.primary { background: var(--au-color-brand); border-color: var(--au-color-brand); color: var(--au-color-text-inverse); }\n.aa-empty-btn.primary:hover { background: var(--au-color-brand-hover); color: var(--au-color-text-inverse); }\n","jsx":"import React from 'react';\nimport './EmptyPro.css';\n\nconst PRESET = {\n  empty: { icon: '📭', title: '暂无数据', desc: '当前列表为空，试试新增一条记录。' },\n  permission: { icon: '🔒', title: '无访问权限', desc: '你没有查看该内容的权限。' },\n  search: { icon: '🔍', title: '未找到结果', desc: '换个关键词或筛选条件再试。' },\n  error: { icon: '⚠️', title: '加载失败', desc: '网络异常，请稍后重试。' }\n};\n\nexport default function EmptyPro({ type = 'empty', icon, title, desc, actionText, secondaryText, onAction, onSecondary }) {\n  const p = PRESET[type] || {};\n  const resolved = {\n    icon: icon || p.icon || '📭',\n    title: title || p.title || '暂无数据',\n    desc: desc || p.desc || ''\n  };\n  return (\n    <div className=\"aa-empty\">\n      <div className=\"aa-empty-icon\">{resolved.icon}</div>\n      <div className=\"aa-empty-title\">{resolved.title}</div>\n      {resolved.desc ? <div className=\"aa-empty-desc\">{resolved.desc}</div> : null}\n      {(actionText || secondaryText) ? (\n        <div className=\"aa-empty-actions\">\n          {actionText ? <button className=\"aa-empty-btn primary\" onClick={onAction}>{actionText}</button> : null}\n          {secondaryText ? <button className=\"aa-empty-btn\" onClick={onSecondary}>{secondaryText}</button> : null}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-empty\">\n    <div class=\"aa-empty-icon\">{{ resolved.icon }}</div>\n    <div class=\"aa-empty-title\">{{ resolved.title }}</div>\n    <div class=\"aa-empty-desc\" v-if=\"resolved.desc\">{{ resolved.desc }}</div>\n    <div class=\"aa-empty-actions\" v-if=\"actionText || secondaryText\">\n      <button v-if=\"actionText\" class=\"aa-empty-btn primary\" @click=\"$emit('action')\">{{ actionText }}</button>\n      <button v-if=\"secondaryText\" class=\"aa-empty-btn\" @click=\"$emit('secondary')\">{{ secondaryText }}</button>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaEmptyPro',\n  props: {\n    type: { type: String, default: 'empty' },\n    icon: { type: String, default: '' },\n    title: { type: String, default: '' },\n    desc: { type: String, default: '' },\n    actionText: { type: String, default: '' },\n    secondaryText: { type: String, default: '' }\n  },\n  computed: {\n    resolved: function () {\n      var p = {\n        empty: { icon: '📭', title: '暂无数据', desc: '当前列表为空，试试新增一条记录。' },\n        permission: { icon: '🔒', title: '无访问权限', desc: '你没有查看该内容的权限。' },\n        search: { icon: '🔍', title: '未找到结果', desc: '换个关键词或筛选条件再试。' },\n        error: { icon: '⚠️', title: '加载失败', desc: '网络异常，请稍后重试。' }\n      }[this.type] || {};\n      return {\n        icon: this.icon || p.icon || '📭',\n        title: this.title || p.title || '暂无数据',\n        desc: this.desc || p.desc || ''\n      };\n    }\n  }\n};\n</script>\n\n<style src=\"./EmptyPro.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-empty\">\n    <div class=\"aa-empty-icon\">{{ resolved.icon }}</div>\n    <div class=\"aa-empty-title\">{{ resolved.title }}</div>\n    <div class=\"aa-empty-desc\" v-if=\"resolved.desc\">{{ resolved.desc }}</div>\n    <div class=\"aa-empty-actions\" v-if=\"actionText || secondaryText\">\n      <button v-if=\"actionText\" class=\"aa-empty-btn primary\" @click=\"emit('action')\">{{ actionText }}</button>\n      <button v-if=\"secondaryText\" class=\"aa-empty-btn\" @click=\"emit('secondary')\">{{ secondaryText }}</button>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nconst props = defineProps({\n  type: { type: String, default: 'empty' },\n  icon: { type: String, default: '' },\n  title: { type: String, default: '' },\n  desc: { type: String, default: '' },\n  actionText: { type: String, default: '' },\n  secondaryText: { type: String, default: '' }\n});\nconst emit = defineEmits(['action', 'secondary']);\n\nconst resolved = computed(() => {\n  const p = {\n    empty: { icon: '📭', title: '暂无数据', desc: '当前列表为空，试试新增一条记录。' },\n    permission: { icon: '🔒', title: '无访问权限', desc: '你没有查看该内容的权限。' },\n    search: { icon: '🔍', title: '未找到结果', desc: '换个关键词或筛选条件再试。' },\n    error: { icon: '⚠️', title: '加载失败', desc: '网络异常，请稍后重试。' }\n  }[props.type] || {};\n  return {\n    icon: props.icon || p.icon || '📭',\n    title: props.title || p.title || '暂无数据',\n    desc: props.desc || p.desc || ''\n  };\n});\n</script>\n\n<style src=\"./EmptyPro.css\"></style>\n"}},{"slug":"loadingoverlay","name":"加载遮罩 LoadingOverlay","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/loadingoverlay.json","category":"feedback","specLines":["- 全屏或局部遮罩","- 转圈品牌色","- 可配置文案","- 阻止交互","- 适用于页面切换、数据提交"],"specSummary":"- 全屏或局部遮罩","contract":{"variants":["局部遮罩","局部 + 文案","全屏 + 文案"],"dims":[{"name":"coverage","values":["fullscreen","local"]},{"name":"text","values":["none","custom"]}],"unknowns":["遮罩透明度","转圈尺寸"],"anatomy":{"mask":"全屏或局部遮罩","spinner":"转圈品牌色","text":"可配置文案","behavior":"阻止交互"},"doNot":["延迟出现的阈值策略"],"usage":["全屏或局部遮罩","转圈品牌色","可配置文案","阻止交互","适用于页面切换、数据提交"],"structure":{"spinner":"品牌色","block":"阻止交互"}},"files":{"html":"../frameworks/LoadingOverlay.html","css":"../frameworks/LoadingOverlay.css","jsx":"../frameworks/LoadingOverlay.jsx","vue2":"../frameworks/LoadingOverlay.vue2.vue","vue3":"../frameworks/LoadingOverlay.vue3.vue"},"sizes":{"html":1738,"css":1113,"jsx":434,"vue2":544,"vue3":497},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · LoadingOverlay（普通 H5）</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"LoadingOverlay.css\" />\n  <style>\n    body { margin: 0; padding: 24px; background: var(--au-color-page-bg); font-family: var(--font-family, sans-serif); }\n    .aa-box { position: relative; height: 200px; background: var(--au-color-card-bg); border: 1px solid var(--au-color-border); border-radius: 8px; padding: 16px; margin-top: 16px; }\n  </style>\n</head>\n<body>\n  <button onclick=\"toggleFull()\">切换全屏遮罩</button>\n  <div class=\"aa-box\">\n    局部内容区域\n    <button style=\"margin-top:8px\" onclick=\"toggleInline()\">切换局部遮罩</button>\n    <div class=\"aa-loading-overlay is-inline\" role=\"status\" aria-busy=\"true\" id=\"inline\" style=\"display:none\">\n      <div class=\"aa-loading-spinner\" role=\"status\" aria-busy=\"true\"></div>\n      <div class=\"aa-loading-text\" aria-busy=\"true\">加载中…</div>\n    </div>\n  </div>\n\n  <div class=\"aa-loading-overlay\" role=\"status\" aria-busy=\"true\" id=\"full\" style=\"display:none\">\n    <div class=\"aa-loading-spinner\" role=\"status\" aria-busy=\"true\"></div>\n    <div class=\"aa-loading-text\" aria-busy=\"true\">正在提交，请稍候</div>\n  </div>\n\n  <script>\n    function toggleFull() { var e = document.getElementById('full'); e.style.display = e.style.display === 'none' ? 'flex' : 'none'; }\n    function toggleInline() { var e = document.getElementById('inline'); e.style.display = e.style.display === 'none' ? 'flex' : 'none'; }\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin LoadingOverlay 样式 — 对齐 组件7.txt LoadingOverlay：全屏或局部遮罩，转圈品牌色，阻止交互 */\n\n.aa-loading-overlay { position: fixed; inset: 0; background: rgba(255,255,255,0.6); z-index: 4000;\n  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;\n  font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); }\n.aa-loading-overlay.is-inline { position: absolute; border-radius: inherit; }\n.aa-loading-overlay.is-dark { background: rgba(0,0,0,0.45); }\n.aa-loading-spinner { width: 32px; height: 32px; border: 3px solid var(--au-color-border); border-top-color: var(--au-color-brand); border-radius: 50%; animation: aa-spin .8s linear infinite; }\n.aa-loading-overlay.is-dark .aa-loading-spinner { border-color: rgba(255,255,255,0.3); border-top-color: var(--au-color-card-bg); }\n.aa-loading-text { font-size: 14px; color: var(--au-color-text-body); }\n.aa-loading-overlay.is-dark .aa-loading-text { color: var(--au-color-text-inverse); }\n@keyframes aa-spin { to { transform: rotate(360deg); } }\n","jsx":"import React from 'react';\nimport './LoadingOverlay.css';\n\nexport default function LoadingOverlay({ visible = false, text = '', inline = false, dark = false }) {\n  if (!visible) return null;\n  return (\n    <div className={'aa-loading-overlay' + (inline ? ' is-inline' : '') + (dark ? ' is-dark' : '')}>\n      <div className=\"aa-loading-spinner\" />\n      {text ? <div className=\"aa-loading-text\">{text}</div> : null}\n    </div>\n  );\n}\n","vue2":"<template>\n  <div v-if=\"visible\" class=\"aa-loading-overlay\" :class=\"{ 'is-inline': inline, 'is-dark': dark }\">\n    <div class=\"aa-loading-spinner\"></div>\n    <div class=\"aa-loading-text\" v-if=\"text\">{{ text }}</div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaLoadingOverlay',\n  props: {\n    visible: { type: Boolean, default: false },\n    text: { type: String, default: '' },\n    inline: { type: Boolean, default: false },\n    dark: { type: Boolean, default: false }\n  }\n};\n</script>\n\n<style src=\"./LoadingOverlay.css\"></style>\n","vue3":"<template>\n  <div v-if=\"visible\" class=\"aa-loading-overlay\" :class=\"{ 'is-inline': inline, 'is-dark': dark }\">\n    <div class=\"aa-loading-spinner\"></div>\n    <div class=\"aa-loading-text\" v-if=\"text\">{{ text }}</div>\n  </div>\n</template>\n\n<script setup>\ndefineProps({\n  visible: { type: Boolean, default: false },\n  text: { type: String, default: '' },\n  inline: { type: Boolean, default: false },\n  dark: { type: Boolean, default: false }\n});\n</script>\n\n<style src=\"./LoadingOverlay.css\"></style>\n"}},{"slug":"resultvariants","name":"结果页变体 ResultVariants","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/resultvariants.json","category":"feedback","specLines":["- 成功、失败、警告、信息","- 大图标、标题、描述","- 操作按钮","- 可附带摘要卡片、二维码","- 适用于提交完成、支付结果"],"specSummary":"- 成功、失败、警告、信息","contract":{"variants":["成功","失败","警告","附带摘要卡片","附带二维码"],"dims":[{"name":"status","values":["success","error","warning","info"]},{"name":"extra","values":["none","summary-card","qrcode"]}],"unknowns":["图标尺寸","内容区最大宽度"],"anatomy":{"icon":"大图标","text":"标题、描述","actions":"操作按钮","extra":"可附带摘要卡片、二维码"},"doNot":["各业务结果的图标素材"],"usage":["成功、失败、警告、信息","大图标、标题、描述","操作按钮","可附带摘要卡片、二维码","适用于提交完成、支付结果"],"structure":{"status":"4 种","extra":"摘要卡片 / 二维码"}},"files":{"html":"../frameworks/ResultVariants.html","css":"../frameworks/ResultVariants.css","jsx":"../frameworks/ResultVariants.jsx","vue2":"../frameworks/ResultVariants.vue2.vue","vue3":"../frameworks/ResultVariants.vue3.vue"},"sizes":{"html":1984,"css":1687,"jsx":940,"vue2":1116,"vue3":1090},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · ResultVariants（普通 H5）</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"ResultVariants.css\" />\n  <style>body{margin:0;padding:24px;background: var(--au-color-page-bg);display:flex;gap:16px;flex-wrap:wrap;}\n    .aa-card{background: var(--au-color-card-bg);border: 1px solid var(--au-color-border);border-radius:8px;width:360px;}</style>\n</head>\n<body>\n  <div class=\"aa-card\"><div class=\"aa-result is-success\" role=\"status\" data-i=\"0\"></div></div>\n  <div class=\"aa-card\"><div class=\"aa-result is-error\" role=\"status\" data-i=\"1\"></div></div>\n  <div class=\"aa-card\"><div class=\"aa-result is-warning\" role=\"status\" data-i=\"2\"></div></div>\n  <div class=\"aa-card\"><div class=\"aa-result is-info\" role=\"status\" data-i=\"3\"></div></div>\n\n  <script>\n    var DATA = [\n      { icon: '✓', title: '提交成功', desc: '您的申请已提交，我们将在 1 个工作日内处理。' },\n      { icon: '✕', title: '提交失败', desc: '表单校验未通过，请检查后重新提交。' },\n      { icon: '!', title: '请注意', desc: '部分商品库存不足，已自动移除。' },\n      { icon: 'i', title: '已保存草稿', desc: '内容已存为草稿，可稍后继续编辑。' }\n    ];\n    document.querySelectorAll('.aa-result').forEach(function (el, i) {\n      var d = DATA[i];\n      el.innerHTML = '<div class=\"aa-result-icon\">' + d.icon + '</div>' +\n        '<div class=\"aa-result-title\">' + d.title + '</div>' +\n        '<div class=\"aa-result-desc\">' + d.desc + '</div>' +\n        '<div class=\"aa-result-actions\" role=\"status\"><button class=\"aa-result-btn primary\" role=\"status\">查看详情</button>' +\n        '<button class=\"aa-result-btn\" role=\"status\">返回列表</button></div>';\n    });\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin ResultVariants 样式 — 对齐 组件7.txt ResultVariants：成功/失败/警告/信息 结果页 */\n\n.aa-result { text-align: center; padding: 40px 20px; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); color: var(--au-color-text-body); }\n.aa-result-icon { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 32px; color: var(--au-color-text-inverse); }\n.aa-result.is-success .aa-result-icon { background: var(--au-color-success); }\n.aa-result.is-error .aa-result-icon { background: var(--au-color-error); }\n.aa-result.is-warning .aa-result-icon { background: var(--au-color-warning); }\n.aa-result.is-info .aa-result-icon { background: var(--au-color-brand); }\n.aa-result-title { font-size: 20px; font-weight: 500; color: var(--au-color-text-title); }\n.aa-result-desc { font-size: 14px; color: var(--au-color-text-secondary); margin-top: 8px; line-height: 1.6; }\n.aa-result-actions { margin-top: 24px; display: flex; gap: 8px; justify-content: center; }\n.aa-result-btn { height: 34px; padding: 0 18px; border-radius: 6px; border: 1px solid var(--au-color-border); background: var(--au-color-card-bg); color: var(--au-color-text-body); cursor: pointer; font-size: 14px; }\n.aa-result-btn:hover { border-color: #C9D4F2; color: var(--au-color-brand); }\n.aa-result-btn.primary { background: var(--au-color-brand); border-color: var(--au-color-brand); color: var(--au-color-text-inverse); }\n.aa-result-btn.primary:hover { background: var(--au-color-brand-hover); color: var(--au-color-text-inverse); }\n.aa-result-extra { margin-top: 20px; }\n","jsx":"import React from 'react';\nimport './ResultVariants.css';\n\nconst ICON = { success: '✓', error: '✕', warning: '!', info: 'i' };\n\nexport default function ResultVariants({ type = 'success', title, desc, actionText, secondaryText, onAction, onSecondary, extra }) {\n  return (\n    <div className={`aa-result is-${type}`}>\n      <div className=\"aa-result-icon\">{ICON[type] || 'i'}</div>\n      <div className=\"aa-result-title\">{title}</div>\n      {desc ? <div className=\"aa-result-desc\">{desc}</div> : null}\n      {(actionText || secondaryText) ? (\n        <div className=\"aa-result-actions\">\n          {actionText ? <button className=\"aa-result-btn primary\" onClick={onAction}>{actionText}</button> : null}\n          {secondaryText ? <button className=\"aa-result-btn\" onClick={onSecondary}>{secondaryText}</button> : null}\n        </div>\n      ) : null}\n      {extra ? <div className=\"aa-result-extra\">{extra}</div> : null}\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-result\" :class=\"'is-' + type\">\n    <div class=\"aa-result-icon\">{{ iconMap[type] || 'i' }}</div>\n    <div class=\"aa-result-title\">{{ title }}</div>\n    <div class=\"aa-result-desc\" v-if=\"desc\">{{ desc }}</div>\n    <div class=\"aa-result-actions\" v-if=\"actionText || secondaryText\">\n      <button v-if=\"actionText\" class=\"aa-result-btn primary\" @click=\"$emit('action')\">{{ actionText }}</button>\n      <button v-if=\"secondaryText\" class=\"aa-result-btn\" @click=\"$emit('secondary')\">{{ secondaryText }}</button>\n    </div>\n    <div class=\"aa-result-extra\" v-if=\"$slots.extra\"><slot name=\"extra\"></slot></div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaResultVariants',\n  props: {\n    type: { type: String, default: 'success' },\n    title: { type: String, default: '' },\n    desc: { type: String, default: '' },\n    actionText: { type: String, default: '' },\n    secondaryText: { type: String, default: '' }\n  },\n  data: function () {\n    return { iconMap: { success: '✓', error: '✕', warning: '!', info: 'i' } };\n  }\n};\n</script>\n\n<style src=\"./ResultVariants.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-result\" :class=\"'is-' + type\">\n    <div class=\"aa-result-icon\">{{ iconMap[type] || 'i' }}</div>\n    <div class=\"aa-result-title\">{{ title }}</div>\n    <div class=\"aa-result-desc\" v-if=\"desc\">{{ desc }}</div>\n    <div class=\"aa-result-actions\" v-if=\"actionText || secondaryText\">\n      <button v-if=\"actionText\" class=\"aa-result-btn primary\" @click=\"emit('action')\">{{ actionText }}</button>\n      <button v-if=\"secondaryText\" class=\"aa-result-btn\" @click=\"emit('secondary')\">{{ secondaryText }}</button>\n    </div>\n    <div class=\"aa-result-extra\" v-if=\"$slots.extra\"><slot name=\"extra\" /></div>\n  </div>\n</template>\n\n<script setup>\nconst props = defineProps({\n  type: { type: String, default: 'success' },\n  title: { type: String, default: '' },\n  desc: { type: String, default: '' },\n  actionText: { type: String, default: '' },\n  secondaryText: { type: String, default: '' }\n});\nconst emit = defineEmits(['action', 'secondary']);\nconst iconMap = { success: '✓', error: '✕', warning: '!', info: 'i' };\n</script>\n\n<style src=\"./ResultVariants.css\"></style>\n"}},{"slug":"exceptionvariants","name":"异常页变体 ExceptionVariants","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/exceptionvariants.json","category":"feedback","specLines":["- 403、404、500、502","- 大号状态码或插画","- 标题、描述","- 返回首页、重试按钮","- 适用于错误处理"],"specSummary":"- 403、404、500、502","contract":{"variants":["无权限","页面不存在","服务器错误","网关错误（插画）"],"dims":[{"name":"code","values":["403","404","500","502"]},{"name":"display","values":["code","illustration"]}],"unknowns":["状态码字号","插画与状态码的取舍规则"],"anatomy":{"code":"大号状态码或插画","text":"标题、描述","actions":"返回首页、重试按钮"},"doNot":["插画素材本身","错误日志上报"],"usage":["403、404、500、502","大号状态码或插画","标题、描述","返回首页、重试按钮","适用于错误处理"],"structure":{"codes":"403 / 404 / 500 / 502","actions":"返回首页 + 重试"}},"files":{"html":"../frameworks/ExceptionVariants.html","css":"../frameworks/ExceptionVariants.css","jsx":"../frameworks/ExceptionVariants.jsx","vue2":"../frameworks/ExceptionVariants.vue2.vue","vue3":"../frameworks/ExceptionVariants.vue3.vue"},"sizes":{"html":2059,"css":1301,"jsx":1311,"vue2":1521,"vue3":1508},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · ExceptionVariants（普通 H5）</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"ExceptionVariants.css\" />\n  <style>body{margin:0;padding:24px;background: var(--au-color-page-bg);display:flex;gap:16px;flex-wrap:wrap;}\n    .aa-card{background: var(--au-color-card-bg);border: 1px solid var(--au-color-border);border-radius:8px;width:360px;}</style>\n</head>\n<body>\n  <div class=\"aa-card\"><div class=\"aa-exception\" role=\"status\" data-type=\"403\"></div></div>\n  <div class=\"aa-card\"><div class=\"aa-exception\" role=\"status\" data-type=\"404\"></div></div>\n  <div class=\"aa-card\"><div class=\"aa-exception\" role=\"status\" data-type=\"500\"></div></div>\n  <div class=\"aa-card\"><div class=\"aa-exception\" role=\"status\" data-type=\"502\"></div></div>\n\n  <script>\n    var DATA = {\n      '403': { emoji: '🔒', title: '403 禁止访问', desc: '抱歉，你没有权限访问此页面。' },\n      '404': { emoji: '🔍', title: '404 页面不存在', desc: '你访问的页面已被移除或从未存在。' },\n      '500': { emoji: '⚙️', title: '500 服务器错误', desc: '服务器开小差了，请稍后再试。' },\n      '502': { emoji: '🔌', title: '502 网关错误', desc: '网关无响应，请检查网络后重试。' }\n    };\n    document.querySelectorAll('.aa-exception').forEach(function (el) {\n      var d = DATA[el.dataset.type];\n      el.innerHTML = '<div class=\"aa-exception-emoji\" role=\"status\">' + d.emoji + '</div>' +\n        '<div class=\"aa-exception-title\">' + d.title + '</div>' +\n        '<div class=\"aa-exception-desc\">' + d.desc + '</div>' +\n        '<div class=\"aa-exception-actions\" role=\"status\"><button class=\"aa-exception-btn primary\" role=\"status\">返回首页</button>' +\n        '<button class=\"aa-exception-btn\" role=\"status\">重试</button></div>';\n    });\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin ExceptionVariants 样式 — 对齐 组件7.txt ExceptionVariants：403/404/500/502 异常页 */\n\n.aa-exception { text-align: center; padding: 56px 20px; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); color: var(--au-color-text-body); }\n.aa-exception-code { font-size: 72px; font-weight: 700; color: var(--au-color-brand); line-height: 1; }\n.aa-exception-emoji { font-size: 64px; }\n.aa-exception-title { font-size: 18px; font-weight: 500; color: var(--au-color-text-title); margin-top: 12px; }\n.aa-exception-desc { font-size: 14px; color: var(--au-color-text-secondary); margin-top: 8px; }\n.aa-exception-actions { margin-top: 24px; display: flex; gap: 8px; justify-content: center; }\n.aa-exception-btn { height: 34px; padding: 0 18px; border-radius: 6px; border: 1px solid var(--au-color-border); background: var(--au-color-card-bg); color: var(--au-color-text-body); cursor: pointer; font-size: 14px; }\n.aa-exception-btn:hover { border-color: #C9D4F2; color: var(--au-color-brand); }\n.aa-exception-btn.primary { background: var(--au-color-brand); border-color: var(--au-color-brand); color: var(--au-color-text-inverse); }\n.aa-exception-btn.primary:hover { background: var(--au-color-brand-hover); color: var(--au-color-text-inverse); }\n","jsx":"import React from 'react';\nimport './ExceptionVariants.css';\n\nconst PRESET = {\n  '403': { emoji: '🔒', title: '403 禁止访问', desc: '抱歉，你没有权限访问此页面。' },\n  '404': { emoji: '🔍', title: '404 页面不存在', desc: '你访问的页面已被移除或从未存在。' },\n  '500': { emoji: '⚙️', title: '500 服务器错误', desc: '服务器开小差了，请稍后再试。' },\n  '502': { emoji: '🔌', title: '502 网关错误', desc: '网关无响应，请检查网络后重试。' }\n};\n\nexport default function ExceptionVariants({ type = '404', emoji, title, desc, onHome, onRetry }) {\n  const p = PRESET[type] || {};\n  const resolved = {\n    emoji: emoji || p.emoji || '⚠️',\n    title: title || p.title || '出错了',\n    desc: desc || p.desc || ''\n  };\n  return (\n    <div className=\"aa-exception\">\n      <div className=\"aa-exception-emoji\">{resolved.emoji}</div>\n      <div className=\"aa-exception-title\">{resolved.title}</div>\n      {resolved.desc ? <div className=\"aa-exception-desc\">{resolved.desc}</div> : null}\n      <div className=\"aa-exception-actions\">\n        <button className=\"aa-exception-btn primary\" onClick={onHome}>返回首页</button>\n        <button className=\"aa-exception-btn\" onClick={onRetry}>重试</button>\n      </div>\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-exception\">\n    <div class=\"aa-exception-emoji\">{{ resolved.emoji }}</div>\n    <div class=\"aa-exception-title\">{{ resolved.title }}</div>\n    <div class=\"aa-exception-desc\" v-if=\"resolved.desc\">{{ resolved.desc }}</div>\n    <div class=\"aa-exception-actions\">\n      <button class=\"aa-exception-btn primary\" @click=\"$emit('home')\">返回首页</button>\n      <button class=\"aa-exception-btn\" @click=\"$emit('retry')\">重试</button>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaExceptionVariants',\n  props: {\n    type: { type: String, default: '404' },\n    emoji: { type: String, default: '' },\n    title: { type: String, default: '' },\n    desc: { type: String, default: '' }\n  },\n  computed: {\n    resolved: function () {\n      var p = {\n        '403': { emoji: '🔒', title: '403 禁止访问', desc: '抱歉，你没有权限访问此页面。' },\n        '404': { emoji: '🔍', title: '404 页面不存在', desc: '你访问的页面已被移除或从未存在。' },\n        '500': { emoji: '⚙️', title: '500 服务器错误', desc: '服务器开小差了，请稍后再试。' },\n        '502': { emoji: '🔌', title: '502 网关错误', desc: '网关无响应，请检查网络后重试。' }\n      }[this.type] || {};\n      return {\n        emoji: this.emoji || p.emoji || '⚠️',\n        title: this.title || p.title || '出错了',\n        desc: this.desc || p.desc || ''\n      };\n    }\n  }\n};\n</script>\n\n<style src=\"./ExceptionVariants.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-exception\">\n    <div class=\"aa-exception-emoji\">{{ resolved.emoji }}</div>\n    <div class=\"aa-exception-title\">{{ resolved.title }}</div>\n    <div class=\"aa-exception-desc\" v-if=\"resolved.desc\">{{ resolved.desc }}</div>\n    <div class=\"aa-exception-actions\">\n      <button class=\"aa-exception-btn primary\" @click=\"emit('home')\">返回首页</button>\n      <button class=\"aa-exception-btn\" @click=\"emit('retry')\">重试</button>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nconst props = defineProps({\n  type: { type: String, default: '404' },\n  emoji: { type: String, default: '' },\n  title: { type: String, default: '' },\n  desc: { type: String, default: '' }\n});\nconst emit = defineEmits(['home', 'retry']);\n\nconst resolved = computed(() => {\n  const p = {\n    '403': { emoji: '🔒', title: '403 禁止访问', desc: '抱歉，你没有权限访问此页面。' },\n    '404': { emoji: '🔍', title: '404 页面不存在', desc: '你访问的页面已被移除或从未存在。' },\n    '500': { emoji: '⚙️', title: '500 服务器错误', desc: '服务器开小差了，请稍后再试。' },\n    '502': { emoji: '🔌', title: '502 网关错误', desc: '网关无响应，请检查网络后重试。' }\n  }[props.type] || {};\n  return {\n    emoji: props.emoji || p.emoji || '⚠️',\n    title: props.title || p.title || '出错了',\n    desc: props.desc || p.desc || ''\n  };\n});\n</script>\n\n<style src=\"./ExceptionVariants.css\"></style>\n"}},{"slug":"confirmmodal","name":"确认弹窗 ConfirmModal","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/confirmmodal.json","category":"feedback","specLines":["- 用于危险操作","- 标题、描述、图标","- 确认按钮（红/主色）、取消按钮","- 支持加载状态","- 可勾选“不再提示”"],"specSummary":"- 用于危险操作","contract":{"variants":["危险操作 + 图标","普通确认","确认中","含\"不再提示\""],"dims":[{"name":"tone","values":["danger","primary"]},{"name":"state","values":["default","loading"]},{"name":"feature","values":["icon","dont-remind"]}],"unknowns":["\"不再提示\"的存储方式与作用范围","确认按钮的默认配色"],"anatomy":{"icon":"图标","text":"标题、描述","confirm":"确认按钮（红/主色）","cancel":"取消按钮","extra":"可勾选\"不再提示\""},"doNot":["弹窗尺寸档位（见 Modal 契约）"],"usage":["用于危险操作","标题、描述、图标","确认按钮（红/主色）、取消按钮","支持加载状态","可勾选\"不再提示\""],"structure":{"buttons":"确认（红/主色）+ 取消","loading":"支持"}},"files":{"html":"../frameworks/ConfirmModal.html","css":"../frameworks/ConfirmModal.css","jsx":"../frameworks/ConfirmModal.jsx","vue2":"../frameworks/ConfirmModal.vue2.vue","vue3":"../frameworks/ConfirmModal.vue3.vue"},"sizes":{"html":1730,"css":2304,"jsx":1525,"vue2":1554,"vue3":1564},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · ConfirmModal（普通 H5）</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"ConfirmModal.css\" />\n  <style>body{margin:0;padding:24px;background: var(--au-color-page-bg);}</style>\n</head>\n<body>\n  <button id=\"open\">删除确认</button>\n\n  <div class=\"aa-modal-mask\" id=\"mask\" style=\"display:none\">\n    <div class=\"aa-confirm is-danger\">\n      <div class=\"aa-confirm-head\">\n        <span class=\"aa-confirm-icon\">!</span>\n        <div class=\"aa-confirm-title\">删除该成员？</div>\n      </div>\n      <div class=\"aa-confirm-content\">删除后该成员将无法访问系统，且不可恢复。</div>\n      <label class=\"aa-confirm-extra\"><input type=\"checkbox\" id=\"dont\" /> 不再提示</label>\n      <div class=\"aa-confirm-footer\">\n        <button class=\"aa-confirm-btn\" id=\"cancel\">取消</button>\n        <button class=\"aa-confirm-btn danger\" id=\"ok\">删除</button>\n      </div>\n    </div>\n  </div>\n\n  <script>\n    var mask = document.getElementById('mask');\n    document.getElementById('open').onclick = function () { mask.style.display = 'flex'; };\n    document.getElementById('cancel').onclick = function () { mask.style.display = 'none'; };\n    document.getElementById('ok').onclick = function () {\n      alert('已删除' + (document.getElementById('dont').checked ? '（不再提示）' : ''));\n      mask.style.display = 'none';\n    };\n    mask.addEventListener('click', function (e) { if (e.target === mask) mask.style.display = 'none'; });\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin ConfirmModal 样式 — 对齐 组件7.txt ConfirmModal：危险操作确认弹窗，确认(红/主)/取消，可加载、可不再提示 */\n\n.aa-modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 2000; display: flex; align-items: center; justify-content: center; }\n.aa-confirm { width: 400px; max-width: 90vw; background: var(--au-color-card-bg); border-radius: 8px; padding: 24px; box-shadow: 0 8px 24px rgba(0,0,0,0.18);\n  font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); }\n.aa-confirm-head { display: flex; gap: 12px; align-items: flex-start; }\n.aa-confirm-icon { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; color: var(--au-color-text-inverse); font-size: 13px; text-align: center; line-height: 22px; margin-top: 1px; }\n.aa-confirm.is-danger .aa-confirm-icon { background: var(--au-color-error); }\n.aa-confirm.is-primary .aa-confirm-icon { background: var(--au-color-brand); }\n.aa-confirm-title { font-size: 16px; font-weight: 500; color: var(--au-color-text-title); }\n.aa-confirm-content { font-size: 14px; color: var(--au-color-text-tertiary); margin-top: 6px; margin-left: 34px; line-height: 1.6; }\n.aa-confirm-extra { margin: 10px 0 0 34px; font-size: 13px; color: var(--au-color-text-secondary); display: flex; align-items: center; gap: 6px; }\n.aa-confirm-footer { margin-top: 20px; display: flex; justify-content: flex-end; gap: 8px; }\n.aa-confirm-btn { height: 32px; padding: 0 16px; border-radius: 6px; border: 1px solid var(--au-color-border); background: var(--au-color-card-bg); color: var(--au-color-text-body); cursor: pointer; font-size: 14px; }\n.aa-confirm-btn:hover { border-color: #C9D4F2; color: var(--au-color-brand); }\n.aa-confirm-btn.primary { background: var(--au-color-brand); border-color: var(--au-color-brand); color: var(--au-color-text-inverse); }\n.aa-confirm-btn.primary:hover { background: var(--au-color-brand-hover); color: var(--au-color-text-inverse); }\n.aa-confirm-btn.danger { background: var(--au-color-error); border-color: var(--au-color-error); color: var(--au-color-text-inverse); }\n.aa-confirm-btn.danger:hover { background: var(--au-color-error); color: var(--au-color-text-inverse); }\n.aa-confirm-btn:disabled { opacity: .6; cursor: not-allowed; }\n","jsx":"import React, { useState } from 'react';\nimport './ConfirmModal.css';\n\nexport default function ConfirmModal({\n  visible = false, title = '确认操作', content = '', confirmType = 'danger',\n  confirmText = '确定', cancelText = '取消', loading = false, dontAsk = false,\n  onConfirm, onCancel\n}) {\n  const [checked, setChecked] = useState(false);\n  if (!visible) return null;\n  return (\n    <div className=\"aa-modal-mask\" onClick={e => { if (e.target === e.currentTarget) onCancel && onCancel(); }}>\n      <div className={`aa-confirm ${confirmType === 'danger' ? 'is-danger' : 'is-primary'}`}>\n        <div className=\"aa-confirm-head\">\n          <span className=\"aa-confirm-icon\">!</span>\n          <div className=\"aa-confirm-title\">{title}</div>\n        </div>\n        <div className=\"aa-confirm-content\">{content}</div>\n        {dontAsk ? (\n          <label className=\"aa-confirm-extra\">\n            <input type=\"checkbox\" checked={checked} onChange={e => setChecked(e.target.checked)} /> 不再提示\n          </label>\n        ) : null}\n        <div className=\"aa-confirm-footer\">\n          <button className=\"aa-confirm-btn\" disabled={loading} onClick={onCancel}>{cancelText}</button>\n          <button\n            className={`aa-confirm-btn ${confirmType === 'danger' ? 'danger' : 'primary'}`}\n            disabled={loading}\n            onClick={() => onConfirm && onConfirm(checked)}\n          >\n            {loading ? '处理中…' : confirmText}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-modal-mask\" v-if=\"visible\" @click.self=\"$emit('cancel')\">\n    <div class=\"aa-confirm\" :class=\"confirmType === 'danger' ? 'is-danger' : 'is-primary'\">\n      <div class=\"aa-confirm-head\">\n        <span class=\"aa-confirm-icon\">!</span>\n        <div class=\"aa-confirm-title\">{{ title }}</div>\n      </div>\n      <div class=\"aa-confirm-content\">{{ content }}</div>\n      <label v-if=\"dontAsk\" class=\"aa-confirm-extra\">\n        <input type=\"checkbox\" v-model=\"dontAskChecked\" /> 不再提示\n      </label>\n      <div class=\"aa-confirm-footer\">\n        <button class=\"aa-confirm-btn\" :disabled=\"loading\" @click=\"$emit('cancel')\">{{ cancelText }}</button>\n        <button class=\"aa-confirm-btn\" :class=\"confirmType === 'danger' ? 'danger' : 'primary'\"\n                :disabled=\"loading\" @click=\"$emit('confirm', dontAskChecked)\">\n          {{ loading ? '处理中…' : confirmText }}\n        </button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaConfirmModal',\n  props: {\n    visible: { type: Boolean, default: false },\n    title: { type: String, default: '确认操作' },\n    content: { type: String, default: '' },\n    confirmType: { type: String, default: 'danger' },\n    confirmText: { type: String, default: '确定' },\n    cancelText: { type: String, default: '取消' },\n    loading: { type: Boolean, default: false },\n    dontAsk: { type: Boolean, default: false }\n  },\n  data: function () { return { dontAskChecked: false }; }\n};\n</script>\n\n<style src=\"./ConfirmModal.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-modal-mask\" v-if=\"visible\" @click.self=\"emit('cancel')\">\n    <div class=\"aa-confirm\" :class=\"confirmType === 'danger' ? 'is-danger' : 'is-primary'\">\n      <div class=\"aa-confirm-head\">\n        <span class=\"aa-confirm-icon\">!</span>\n        <div class=\"aa-confirm-title\">{{ title }}</div>\n      </div>\n      <div class=\"aa-confirm-content\">{{ content }}</div>\n      <label v-if=\"dontAsk\" class=\"aa-confirm-extra\">\n        <input type=\"checkbox\" v-model=\"dontAskChecked\" /> 不再提示\n      </label>\n      <div class=\"aa-confirm-footer\">\n        <button class=\"aa-confirm-btn\" :disabled=\"loading\" @click=\"emit('cancel')\">{{ cancelText }}</button>\n        <button class=\"aa-confirm-btn\" :class=\"confirmType === 'danger' ? 'danger' : 'primary'\"\n                :disabled=\"loading\" @click=\"emit('confirm', dontAskChecked)\">\n          {{ loading ? '处理中…' : confirmText }}\n        </button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nconst props = defineProps({\n  visible: { type: Boolean, default: false },\n  title: { type: String, default: '确认操作' },\n  content: { type: String, default: '' },\n  confirmType: { type: String, default: 'danger' },\n  confirmText: { type: String, default: '确定' },\n  cancelText: { type: String, default: '取消' },\n  loading: { type: Boolean, default: false },\n  dontAsk: { type: Boolean, default: false }\n});\nconst emit = defineEmits(['cancel', 'confirm']);\nconst dontAskChecked = ref(false);\n</script>\n\n<style src=\"./ConfirmModal.css\"></style>\n"}},{"slug":"alertmodal","name":"提示弹窗 AlertModal","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/alertmodal.json","category":"feedback","specLines":["- 信息提示","- 图标与颜色对应","- 确定按钮","- 支持自定义内容","- 适用于重要提示"],"specSummary":"- 信息提示","contract":{"variants":["成功提示","错误提示","警告提示","自定义内容"],"dims":[{"name":"type","values":["success","error","warning","info"]},{"name":"content","values":["text","custom"]}],"unknowns":["图标尺寸","自定义内容区的最大高度"],"anatomy":{"icon":"图标与颜色对应","text":"信息提示","action":"确定按钮","custom":"支持自定义内容"},"doNot":["弹窗尺寸档位（见 Modal 契约）"],"usage":["信息提示","图标与颜色对应","确定按钮","支持自定义内容","适用于重要提示"],"structure":{"types":"4 种","buttons":"确定"}},"files":{"html":"../frameworks/AlertModal.html","css":"../frameworks/AlertModal.css","jsx":"../frameworks/AlertModal.jsx","vue2":"../frameworks/AlertModal.vue2.vue","vue3":"../frameworks/AlertModal.vue3.vue"},"sizes":{"html":1354,"css":1653,"jsx":854,"vue2":984,"vue3":950},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · AlertModal（普通 H5）</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"AlertModal.css\" />\n  <style>body{margin:0;padding:24px;background: var(--au-color-page-bg);}</style>\n</head>\n<body>\n  <button id=\"open\">查看提示</button>\n\n  <div class=\"aa-modal-mask\" id=\"mask\" style=\"display:none\">\n    <div class=\"aa-alert is-info\">\n      <div class=\"aa-alert-head\">\n        <span class=\"aa-alert-icon\">i</span>\n        <div class=\"aa-alert-title\">系统升级通知</div>\n      </div>\n      <div class=\"aa-alert-content\">本周六 02:00-04:00 将进行系统维护，期间服务不可用，请提前安排。</div>\n      <div class=\"aa-alert-footer\"><button class=\"aa-alert-btn\" id=\"ok\">知道了</button></div>\n    </div>\n  </div>\n\n  <script>\n    var mask = document.getElementById('mask');\n    document.getElementById('open').onclick = function () { mask.style.display = 'flex'; };\n    document.getElementById('ok').onclick = function () { mask.style.display = 'none'; };\n    mask.addEventListener('click', function (e) { if (e.target === mask) mask.style.display = 'none'; });\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin AlertModal 样式 — 对齐 组件7.txt AlertModal：信息提示弹窗，图标+颜色对应，确定按钮 */\n\n.aa-modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 2000; display: flex; align-items: center; justify-content: center; }\n.aa-alert { width: 380px; max-width: 90vw; background: var(--au-color-card-bg); border-radius: 8px; padding: 24px; box-shadow: 0 8px 24px rgba(0,0,0,0.18);\n  font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); }\n.aa-alert-head { display: flex; gap: 12px; align-items: flex-start; }\n.aa-alert-icon { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; color: var(--au-color-text-inverse); font-size: 13px; text-align: center; line-height: 22px; margin-top: 1px; }\n.aa-alert.is-success .aa-alert-icon { background: var(--au-color-success); }\n.aa-alert.is-error .aa-alert-icon { background: var(--au-color-error); }\n.aa-alert.is-warning .aa-alert-icon { background: var(--au-color-warning); }\n.aa-alert.is-info .aa-alert-icon { background: var(--au-color-brand); }\n.aa-alert-title { font-size: 16px; font-weight: 500; color: var(--au-color-text-title); }\n.aa-alert-content { font-size: 14px; color: var(--au-color-text-tertiary); margin-top: 6px; margin-left: 34px; line-height: 1.6; }\n.aa-alert-footer { margin-top: 20px; display: flex; justify-content: flex-end; }\n.aa-alert-btn { height: 32px; padding: 0 18px; border-radius: 6px; border: none; background: var(--au-color-brand); color: var(--au-color-text-inverse); cursor: pointer; font-size: 14px; }\n.aa-alert-btn:hover { background: var(--au-color-brand-hover); }\n","jsx":"import React from 'react';\nimport './AlertModal.css';\n\nconst ICON = { success: '✓', error: '✕', warning: '!', info: 'i' };\n\nexport default function AlertModal({ visible = false, type = 'info', title = '提示', content = '', okText = '知道了', onOk }) {\n  if (!visible) return null;\n  return (\n    <div className=\"aa-modal-mask\" onClick={e => { if (e.target === e.currentTarget) onOk && onOk(); }}>\n      <div className={`aa-alert is-${type}`}>\n        <div className=\"aa-alert-head\">\n          <span className=\"aa-alert-icon\">{ICON[type] || 'i'}</span>\n          <div className=\"aa-alert-title\">{title}</div>\n        </div>\n        <div className=\"aa-alert-content\">{content}</div>\n        <div className=\"aa-alert-footer\">\n          <button className=\"aa-alert-btn\" onClick={onOk}>{okText}</button>\n        </div>\n      </div>\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-modal-mask\" v-if=\"visible\" @click.self=\"$emit('ok')\">\n    <div class=\"aa-alert\" :class=\"'is-' + type\">\n      <div class=\"aa-alert-head\">\n        <span class=\"aa-alert-icon\">{{ iconMap[type] || 'i' }}</span>\n        <div class=\"aa-alert-title\">{{ title }}</div>\n      </div>\n      <div class=\"aa-alert-content\">{{ content }}</div>\n      <div class=\"aa-alert-footer\">\n        <button class=\"aa-alert-btn\" @click=\"$emit('ok')\">{{ okText }}</button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaAlertModal',\n  props: {\n    visible: { type: Boolean, default: false },\n    type: { type: String, default: 'info' },\n    title: { type: String, default: '提示' },\n    content: { type: String, default: '' },\n    okText: { type: String, default: '知道了' }\n  },\n  data: function () {\n    return { iconMap: { success: '✓', error: '✕', warning: '!', info: 'i' } };\n  }\n};\n</script>\n\n<style src=\"./AlertModal.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-modal-mask\" v-if=\"visible\" @click.self=\"emit('ok')\">\n    <div class=\"aa-alert\" :class=\"'is-' + type\">\n      <div class=\"aa-alert-head\">\n        <span class=\"aa-alert-icon\">{{ iconMap[type] || 'i' }}</span>\n        <div class=\"aa-alert-title\">{{ title }}</div>\n      </div>\n      <div class=\"aa-alert-content\">{{ content }}</div>\n      <div class=\"aa-alert-footer\">\n        <button class=\"aa-alert-btn\" @click=\"emit('ok')\">{{ okText }}</button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nconst props = defineProps({\n  visible: { type: Boolean, default: false },\n  type: { type: String, default: 'info' },\n  title: { type: String, default: '提示' },\n  content: { type: String, default: '' },\n  okText: { type: String, default: '知道了' }\n});\nconst emit = defineEmits(['ok']);\nconst iconMap = { success: '✓', error: '✕', warning: '!', info: 'i' };\n</script>\n\n<style src=\"./AlertModal.css\"></style>\n"}},{"slug":"formmodal","name":"表单弹窗 FormModal","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/formmodal.json","category":"feedback","specLines":["- 弹窗内嵌表单","- 表单字段可多列","- 确认提交，校验失败阻止关闭","- 支持加载状态","- 关闭重置"],"specSummary":"- 弹窗内嵌表单","contract":{"variants":["单列表单","双列表单","校验失败（阻止关闭）","提交中"],"dims":[{"name":"columns","values":["one","two"]},{"name":"state","values":["default","validating","loading"]}],"unknowns":["多列时的栅格断点","是否支持草稿保存"],"anatomy":{"body":"弹窗内嵌表单","columns":"表单字段可多列","validate":"确认提交，校验失败阻止关闭","reset":"关闭重置"},"doNot":["表单校验规则（见各输入组件契约）"],"usage":["弹窗内嵌表单","表单字段可多列","确认提交，校验失败阻止关闭","支持加载状态","关闭重置"],"structure":{"columns":"1 或 2 列","behavior":"校验失败阻止关闭"}},"files":{"html":"../frameworks/FormModal.html","css":"../frameworks/FormModal.css","jsx":"../frameworks/FormModal.jsx","vue2":"../frameworks/FormModal.vue2.vue","vue3":"../frameworks/FormModal.vue3.vue"},"sizes":{"html":3237,"css":1817,"jsx":2602,"vue2":2501,"vue3":2415},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · FormModal</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"./FormModal.css\" />\n</head>\n<body>\n  <div class=\"aa-page\">\n    <h2 class=\"aa-h2\">FormModal 表单弹窗</h2>\n    <p class=\"aa-desc\">弹窗内嵌表单，确认提交前进行校验，校验失败阻止关闭。</p>\n\n    <div class=\"aa-demo\">\n      <button class=\"aa-btn aa-btn--primary\" id=\"open\">新建用户</button>\n      <p class=\"aa-code-tip\" id=\"out\"></p>\n    </div>\n  </div>\n\n  <div class=\"aa-formmodal-mask\" id=\"mask\" style=\"display:none\">\n    <div class=\"aa-formmodal\">\n      <div class=\"aa-formmodal-head\"><span>新建用户</span><button class=\"aa-formmodal-close\" id=\"close\">×</button></div>\n      <div class=\"aa-formmodal-body\">\n        <div class=\"aa-form-row\">\n          <label class=\"aa-form-label\"><span class=\"req\">*</span>姓名</label>\n          <input class=\"aa-form-input\" id=\"f-name\" placeholder=\"请输入姓名\" />\n          <div class=\"aa-form-err\" id=\"e-name\" style=\"display:none\">姓名不能为空</div>\n        </div>\n        <div class=\"aa-form-row\">\n          <label class=\"aa-form-label\"><span class=\"req\">*</span>邮箱</label>\n          <input class=\"aa-form-input\" id=\"f-email\" placeholder=\"name@example.com\" />\n          <div class=\"aa-form-err\" id=\"e-email\" style=\"display:none\">邮箱格式不正确</div>\n        </div>\n        <div class=\"aa-form-row\">\n          <label class=\"aa-form-label\">角色</label>\n          <input class=\"aa-form-input\" id=\"f-role\" placeholder=\"如：管理员\" />\n        </div>\n      </div>\n      <div class=\"aa-formmodal-foot\">\n        <button class=\"aa-btn\" id=\"cancel\">取消</button>\n        <button class=\"aa-btn aa-btn--primary\" id=\"ok\">提交</button>\n      </div>\n    </div>\n  </div>\n\n  <script>\n    var mask = document.getElementById('mask');\n    var out = document.getElementById('out');\n    document.getElementById('open').onclick = function () { mask.style.display = 'flex'; };\n    document.getElementById('close').onclick = close;\n    document.getElementById('cancel').onclick = close;\n    function close() { mask.style.display = 'none'; }\n\n    document.getElementById('ok').onclick = function () {\n      var name = document.getElementById('f-name').value.trim();\n      var email = document.getElementById('f-email').value.trim();\n      var ok = true;\n      var eName = document.getElementById('e-name'), eEmail = document.getElementById('e-email');\n      var iName = document.getElementById('f-name'), iEmail = document.getElementById('f-email');\n      eName.style.display = name ? 'none' : 'block'; iName.classList.toggle('is-error', !name); if (!name) ok = false;\n      var emailOk = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(email);\n      eEmail.style.display = emailOk ? 'none' : 'block'; iEmail.classList.toggle('is-error', !emailOk); if (!emailOk) ok = false;\n      if (!ok) return;\n      out.textContent = '提交成功：' + name + ' / ' + email + ' / ' + document.getElementById('f-role').value;\n      close();\n    };\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin FormModal 样式 — 弹窗内嵌表单 */\n.aa-formmodal-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; z-index: 1000; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); }\n.aa-formmodal { width: 440px; max-width: 92vw; background: var(--au-color-card-bg); border-radius: 10px; box-shadow: 0 12px 48px rgba(0,0,0,0.2); overflow: hidden; }\n.aa-formmodal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--au-color-border); font-weight: 600; color: var(--au-color-text-title); font-size: 15px; }\n.aa-formmodal-close { border: none; background: none; font-size: 18px; color: var(--au-color-text-secondary); cursor: pointer; line-height: 1; }\n.aa-formmodal-close:hover { color: var(--au-color-text-body); }\n.aa-formmodal-body { padding: 18px; }\n.aa-form-row { margin-bottom: 14px; }\n.aa-form-label { display: block; font-size: 13px; color: var(--au-color-text-tertiary); margin-bottom: 6px; }\n.aa-form-label .req { color: var(--au-color-error); margin-right: 3px; }\n.aa-form-input { width: 100%; border: 1px solid var(--au-color-border); border-radius: 6px; padding: 8px 10px; font-size: 14px; color: var(--au-color-text-body); outline: none; box-sizing: border-box; transition: border-color .15s, box-shadow .15s; }\n.aa-form-input:focus { border-color: var(--au-color-brand); box-shadow: 0 0 0 3px rgba(47,84,235,0.2); }\n.aa-form-input.is-error { border-color: var(--au-color-error); }\n.aa-form-err { font-size: 12px; color: var(--au-color-error); margin-top: 4px; }\n.aa-formmodal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--au-color-border); }\n","jsx":"import React, { useState, useEffect } from 'react';\nimport './FormModal.css';\n\nconst DEFAULT_FIELDS = [\n  { key: 'name', label: '姓名', required: true, placeholder: '请输入姓名' },\n  { key: 'email', label: '邮箱', required: true, placeholder: 'name@example.com' },\n  { key: 'role', label: '角色', placeholder: '如：管理员' }\n];\n\nexport default function FormModal({ visible = false, title = '表单', fields = DEFAULT_FIELDS, value = {}, onCancel, onSubmit }) {\n  const [form, setForm] = useState(value);\n  const [errors, setErrors] = useState({});\n\n  useEffect(() => {\n    if (visible) { setForm(value); setErrors({}); }\n  }, [visible]);\n\n  if (!visible) return null;\n\n  const onInput = (key, e) => {\n    setForm((f) => ({ ...f, [key]: e.target.value }));\n    setErrors((er) => { const n = { ...er }; delete n[key]; return n; });\n  };\n  const submit = () => {\n    const errs = {};\n    fields.forEach((f) => {\n      const v = (form[f.key] || '').trim();\n      if (f.required && !v) errs[f.key] = f.label + '不能为空';\n      if (f.key === 'email' && v && !/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(v)) errs[f.key] = '邮箱格式不正确';\n    });\n    if (Object.keys(errs).length) { setErrors(errs); return; }\n    if (onSubmit) onSubmit({ ...form });\n    if (onCancel) onCancel();\n  };\n\n  return (\n    <div className=\"aa-formmodal-mask\" onClick={(e) => { if (e.target === e.currentTarget) onCancel && onCancel(); }}>\n      <div className=\"aa-formmodal\">\n        <div className=\"aa-formmodal-head\">\n          <span>{title}</span>\n          <button className=\"aa-formmodal-close\" onClick={() => onCancel && onCancel()}>×</button>\n        </div>\n        <div className=\"aa-formmodal-body\">\n          {fields.map((f) => (\n            <div className=\"aa-form-row\" key={f.key}>\n              <label className=\"aa-form-label\">\n                {f.required && <span className=\"req\">*</span>}\n                {f.label}\n              </label>\n              <input\n                className={'aa-form-input' + (errors[f.key] ? ' is-error' : '')}\n                value={form[f.key] || ''}\n                placeholder={f.placeholder}\n                onChange={(e) => onInput(f.key, e)}\n              />\n              {errors[f.key] && <div className=\"aa-form-err\">{errors[f.key]}</div>}\n            </div>\n          ))}\n        </div>\n        <div className=\"aa-formmodal-foot\">\n          <button className=\"aa-btn\" onClick={() => onCancel && onCancel()}>取消</button>\n          <button className=\"aa-btn aa-btn--primary\" onClick={submit}>提交</button>\n        </div>\n      </div>\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-formmodal-mask\" v-if=\"visible\" @click.self=\"$emit('cancel')\">\n    <div class=\"aa-formmodal\">\n      <div class=\"aa-formmodal-head\">\n        <span>{{ title }}</span>\n        <button class=\"aa-formmodal-close\" @click=\"$emit('cancel')\">×</button>\n      </div>\n      <div class=\"aa-formmodal-body\">\n        <div class=\"aa-form-row\" v-for=\"f in fields\" :key=\"f.key\">\n          <label class=\"aa-form-label\"><span class=\"req\" v-if=\"f.required\">*</span>{{ f.label }}</label>\n          <input\n            class=\"aa-form-input\"\n            :class=\"{ 'is-error': errors[f.key] }\"\n            :value=\"form[f.key]\"\n            :placeholder=\"f.placeholder\"\n            @input=\"onInput(f.key, $event)\"\n          />\n          <div class=\"aa-form-err\" v-if=\"errors[f.key]\">{{ errors[f.key] }}</div>\n        </div>\n      </div>\n      <div class=\"aa-formmodal-foot\">\n        <button class=\"aa-btn\" @click=\"$emit('cancel')\">取消</button>\n        <button class=\"aa-btn aa-btn--primary\" @click=\"submit\">提交</button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaFormModal',\n  props: {\n    visible: { type: Boolean, default: false },\n    title: { type: String, default: '表单' },\n    fields: {\n      type: Array,\n      default: () => [\n        { key: 'name', label: '姓名', required: true, placeholder: '请输入姓名' },\n        { key: 'email', label: '邮箱', required: true, placeholder: 'name@example.com' },\n        { key: 'role', label: '角色', placeholder: '如：管理员' }\n      ]\n    },\n    value: { type: Object, default: () => ({}) }\n  },\n  data() {\n    return { form: Object.assign({}, this.value), errors: {} };\n  },\n  watch: {\n    visible(v) { if (v) { this.form = Object.assign({}, this.value); this.errors = {}; } }\n  },\n  methods: {\n    onInput(key, e) {\n      this.$set(this.form, key, e.target.value);\n      if (this.errors[key]) this.$delete(this.errors, key);\n    },\n    submit() {\n      var errors = {};\n      this.fields.forEach(function (f) {\n        var v = (this.form[f.key] || '').trim();\n        if (f.required && !v) errors[f.key] = f.label + '不能为空';\n        if (f.key === 'email' && v && !/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(v)) errors[f.key] = '邮箱格式不正确';\n      }, this);\n      if (Object.keys(errors).length) { this.errors = errors; return; }\n      this.$emit('submit', Object.assign({}, this.form));\n      this.$emit('cancel');\n    }\n  }\n};\n</script>\n\n<style src=\"./FormModal.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-formmodal-mask\" v-if=\"visible\" @click.self=\"$emit('cancel')\">\n    <div class=\"aa-formmodal\">\n      <div class=\"aa-formmodal-head\">\n        <span>{{ title }}</span>\n        <button class=\"aa-formmodal-close\" @click=\"$emit('cancel')\">×</button>\n      </div>\n      <div class=\"aa-formmodal-body\">\n        <div class=\"aa-form-row\" v-for=\"f in fields\" :key=\"f.key\">\n          <label class=\"aa-form-label\"><span class=\"req\" v-if=\"f.required\">*</span>{{ f.label }}</label>\n          <input\n            class=\"aa-form-input\"\n            :class=\"{ 'is-error': errors[f.key] }\"\n            :value=\"form[f.key]\"\n            :placeholder=\"f.placeholder\"\n            @input=\"onInput(f.key, $event)\"\n          />\n          <div class=\"aa-form-err\" v-if=\"errors[f.key]\">{{ errors[f.key] }}</div>\n        </div>\n      </div>\n      <div class=\"aa-formmodal-foot\">\n        <button class=\"aa-btn\" @click=\"$emit('cancel')\">取消</button>\n        <button class=\"aa-btn aa-btn--primary\" @click=\"submit\">提交</button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, watch } from 'vue';\n\nconst props = defineProps({\n  visible: { type: Boolean, default: false },\n  title: { type: String, default: '表单' },\n  fields: {\n    type: Array,\n    default: () => [\n      { key: 'name', label: '姓名', required: true, placeholder: '请输入姓名' },\n      { key: 'email', label: '邮箱', required: true, placeholder: 'name@example.com' },\n      { key: 'role', label: '角色', placeholder: '如：管理员' }\n    ]\n  },\n  value: { type: Object, default: () => ({}) }\n});\nconst emit = defineEmits(['cancel', 'submit']);\n\nconst form = ref({ ...props.value });\nconst errors = ref({});\nwatch(\n  () => props.visible,\n  (v) => { if (v) { form.value = { ...props.value }; errors.value = {}; } }\n);\n\nfunction onInput(key, e) {\n  form.value[key] = e.target.value;\n  if (errors.value[key]) delete errors.value[key];\n}\nfunction submit() {\n  const errs = {};\n  props.fields.forEach((f) => {\n    const v = (form.value[f.key] || '').trim();\n    if (f.required && !v) errs[f.key] = f.label + '不能为空';\n    if (f.key === 'email' && v && !/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(v)) errs[f.key] = '邮箱格式不正确';\n  });\n  if (Object.keys(errs).length) { errors.value = errs; return; }\n  emit('submit', { ...form.value });\n  emit('cancel');\n}\n</script>\n\n<style src=\"./FormModal.css\"></style>\n"}},{"slug":"fullscreenmodal","name":"全屏弹窗 FullScreenModal","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/fullscreenmodal.json","category":"feedback","specLines":["- 全屏展示内容","- 标题栏、关闭按钮","- 内容区滚动","- 底部操作栏","- 适用于复杂表单、详情编辑"],"specSummary":"- 全屏展示内容","contract":{"variants":["默认（含底部操作栏）","提交中","无底部操作栏"],"dims":[{"name":"state","values":["default","loading"]},{"name":"footer","values":["visible","hidden"]}],"unknowns":["标题栏高度","底部操作栏是否固定"],"anatomy":{"header":"标题栏、关闭按钮","body":"内容区滚动","footer":"底部操作栏"},"doNot":["全屏下的分栏与侧栏布局"],"usage":["全屏展示内容","标题栏、关闭按钮","内容区滚动","底部操作栏","适用于复杂表单、详情编辑"],"structure":{"layout":"标题栏 + 滚动内容 + 底部操作栏"}},"files":{"html":"../frameworks/FullScreenModal.html","css":"../frameworks/FullScreenModal.css","jsx":"../frameworks/FullScreenModal.jsx","vue2":"../frameworks/FullScreenModal.vue2.vue","vue3":"../frameworks/FullScreenModal.vue3.vue"},"sizes":{"html":1890,"css":1060,"jsx":743,"vue2":727,"vue3":714},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · FullScreenModal</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"./FullScreenModal.css\" />\n</head>\n<body>\n  <div class=\"aa-page\">\n    <h2 class=\"aa-h2\">FullScreenModal 全屏弹窗</h2>\n    <p class=\"aa-desc\">全屏展示内容，标题栏 + 关闭按钮 + 滚动内容区 + 底部操作栏。</p>\n\n    <div class=\"aa-demo\">\n      <button class=\"aa-btn aa-btn--primary\" id=\"open\">打开全屏编辑</button>\n    </div>\n  </div>\n\n  <div class=\"aa-fs-mask\" id=\"mask\" style=\"display:none\">\n    <div class=\"aa-fs-head\">\n      <span class=\"aa-fs-title\">商品编辑（全屏）</span>\n      <button class=\"aa-fs-close\" id=\"close\">×</button>\n    </div>\n    <div class=\"aa-fs-body\">\n      <h3>基础信息</h3>\n      <p>此处可放置复杂表单、富文本编辑、多区块配置等内容。全屏模式便于处理信息密度高的任务。</p>\n      <p>内容区可滚动，底部固定操作栏始终可见。</p>\n      <h3>详细描述</h3>\n      <p>支持长文、图片、视频等富媒体内容。关闭弹窗时可通过底部按钮提交或取消。</p>\n    </div>\n    <div class=\"aa-fs-foot\">\n      <button class=\"aa-btn\" id=\"cancel\">取消</button>\n      <button class=\"aa-btn aa-btn--primary\" id=\"ok\">保存</button>\n    </div>\n  </div>\n\n  <script>\n    var mask = document.getElementById('mask');\n    document.getElementById('open').onclick = function () { mask.style.display = 'flex'; };\n    document.getElementById('close').onclick = close;\n    document.getElementById('cancel').onclick = close;\n    document.getElementById('ok').onclick = close;\n    function close() { mask.style.display = 'none'; }\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin FullScreenModal 样式 — 全屏弹窗 */\n.aa-fs-mask { position: fixed; inset: 0; background: var(--au-color-page-bg); z-index: 1100; display: flex; flex-direction: column; font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); }\n.aa-fs-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: var(--au-color-card-bg); border-bottom: 1px solid var(--au-color-border); }\n.aa-fs-title { font-weight: 600; color: var(--au-color-text-title); font-size: 16px; }\n.aa-fs-close { border: none; background: none; font-size: 20px; color: var(--au-color-text-secondary); cursor: pointer; line-height: 1; }\n.aa-fs-close:hover { color: var(--au-color-text-body); }\n.aa-fs-body { flex: 1; overflow: auto; padding: 20px; color: var(--au-color-text-tertiary); font-size: 14px; line-height: 1.7; }\n.aa-fs-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 20px; background: var(--au-color-card-bg); border-top: 1px solid var(--au-color-border); }\n","jsx":"import React from 'react';\nimport './FullScreenModal.css';\n\nexport default function FullScreenModal({ visible = false, title = '全屏弹窗', onCancel, onOk, children }) {\n  if (!visible) return null;\n  return (\n    <div className=\"aa-fs-mask\">\n      <div className=\"aa-fs-head\">\n        <span className=\"aa-fs-title\">{title}</span>\n        <button className=\"aa-fs-close\" onClick={() => onCancel && onCancel()}>×</button>\n      </div>\n      <div className=\"aa-fs-body\">{children}</div>\n      <div className=\"aa-fs-foot\">\n        <button className=\"aa-btn\" onClick={() => onCancel && onCancel()}>取消</button>\n        <button className=\"aa-btn aa-btn--primary\" onClick={() => onOk && onOk()}>保存</button>\n      </div>\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-fs-mask\" v-if=\"visible\">\n    <div class=\"aa-fs-head\">\n      <span class=\"aa-fs-title\">{{ title }}</span>\n      <button class=\"aa-fs-close\" @click=\"$emit('cancel')\">×</button>\n    </div>\n    <div class=\"aa-fs-body\">\n      <slot>内容区</slot>\n    </div>\n    <div class=\"aa-fs-foot\">\n      <button class=\"aa-btn\" @click=\"$emit('cancel')\">取消</button>\n      <button class=\"aa-btn aa-btn--primary\" @click=\"$emit('ok')\">保存</button>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaFullScreenModal',\n  props: {\n    visible: { type: Boolean, default: false },\n    title: { type: String, default: '全屏弹窗' }\n  }\n};\n</script>\n\n<style src=\"./FullScreenModal.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-fs-mask\" v-if=\"visible\">\n    <div class=\"aa-fs-head\">\n      <span class=\"aa-fs-title\">{{ title }}</span>\n      <button class=\"aa-fs-close\" @click=\"$emit('cancel')\">×</button>\n    </div>\n    <div class=\"aa-fs-body\">\n      <slot>内容区</slot>\n    </div>\n    <div class=\"aa-fs-foot\">\n      <button class=\"aa-btn\" @click=\"$emit('cancel')\">取消</button>\n      <button class=\"aa-btn aa-btn--primary\" @click=\"$emit('ok')\">保存</button>\n    </div>\n  </div>\n</template>\n\n<script setup>\ndefineProps({\n  visible: { type: Boolean, default: false },\n  title: { type: String, default: '全屏弹窗' }\n});\ndefineEmits(['cancel', 'ok']);\n</script>\n\n<style src=\"./FullScreenModal.css\"></style>\n"}},{"slug":"themeswitcher","name":"主题切换 ThemeSwitcher","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/themeswitcher.json","category":"system","specLines":["- 明暗主题","- 品牌色切换","- 实时预览","- 保存偏好","- 适用于个性化"],"specSummary":"- 明暗主题","contract":{"variants":["浅色 + 预设品牌色","深色主题","自定义品牌色"],"dims":[{"name":"mode","values":["light","dark"]},{"name":"brandColor","values":["preset","custom"]}],"unknowns":["预设品牌色的清单","偏好保存的位置（localStorage 键名）"],"anatomy":{"mode":"明暗主题","brand":"品牌色切换","preview":"实时预览","persist":"保存偏好"},"doNot":["暗色令牌的具体取值（见 colors_and_type.css 的 html.aa-dark）"],"usage":["明暗主题","品牌色切换","实时预览","保存偏好","适用于个性化"],"structure":{"modes":"明 / 暗","brand":"可切换","persist":"本地保存"}},"files":{"html":"../frameworks/ThemeSwitcher.html","css":"../frameworks/ThemeSwitcher.css","jsx":"../frameworks/ThemeSwitcher.jsx","vue2":"../frameworks/ThemeSwitcher.vue2.vue","vue3":"../frameworks/ThemeSwitcher.vue3.vue"},"sizes":{"html":2583,"css":1389,"jsx":1165,"vue2":1161,"vue3":1125},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · ThemeSwitcher</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"./ThemeSwitcher.css\" />\n</head>\n<body>\n  <div class=\"aa-page\">\n    <h2 class=\"aa-h2\">ThemeSwitcher 主题切换</h2>\n    <p class=\"aa-desc\">明暗主题 + 品牌色切换，实时预览，可保存偏好。</p>\n\n    <div class=\"aa-demo\">\n      <div class=\"aa-themesw\" id=\"sw\">\n        <div class=\"aa-themesw-opt\" role=\"radio\" tabindex=\"0\" data-mode=\"light\"><span class=\"aa-themesw-dot light\"></span>浅色</div>\n        <div class=\"aa-themesw-opt\" role=\"radio\" tabindex=\"0\" data-mode=\"dark\"><span class=\"aa-themesw-dot dark\"></span>深色</div>\n        <div class=\"aa-themesw-colors\" id=\"colors\"></div>\n        <div class=\"aa-themesw-label\" id=\"label\"></div>\n      </div>\n      <div class=\"aa-card\" style=\"margin-top:12px\">\n        <div class=\"aa-card__body\">\n          <button class=\"aa-btn aa-btn--primary\">品牌色按钮</button>\n          <span style=\"margin-left:10px\">当前主题：<b id=\"cur\"></b></span>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <script>\n    var brands = ['#2F54EB', '#1677FF', '#722ED1', '#13C2C2', '#FA541C', '#EB2F96'];\n    var mode = 'light', brand = '#2F54EB';\n    var colorsEl = document.getElementById('colors');\n    brands.forEach(function (c) {\n      var s = document.createElement('span');\n      s.className = 'aa-themesw-color'; s.setAttribute('role','radio'); s.setAttribute('tabindex','0'); s.style.background = c; s.dataset.c = c;\n      s.onclick = function () { brand = c; render(); };\n      colorsEl.appendChild(s);\n    });\n    document.querySelectorAll('.aa-themesw-opt').forEach(function (o) {\n      o.onclick = function () { mode = o.dataset.mode; render(); };\n    });\n    function render() {\n      document.querySelectorAll('.aa-themesw-opt').forEach(function (o) { o.classList.toggle('is-active', o.dataset.mode === mode); });\n      Array.prototype.forEach.call(colorsEl.children, function (c) { c.classList.toggle('is-active', c.dataset.c === brand); });\n      document.documentElement.style.setProperty('--brand', brand);\n      document.getElementById('cur').textContent = mode === 'light' ? '浅色' : '深色';\n      document.getElementById('label').textContent = '品牌色：' + brand + '（点击色块可切换，应用于 CSS 变量 --brand 实时预览）';\n    }\n    render();\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin ThemeSwitcher 样式 — 明暗主题 + 品牌色切换 */\n.aa-themesw { font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }\n.aa-themesw-opt { display: flex; align-items: center; gap: 8px; border: 1px solid var(--au-color-border); border-radius: 6px; padding: 8px 12px; cursor: pointer; color: var(--au-color-text-body); font-size: 13px; transition: border-color .15s, background .15s, color .15s; }\n.aa-themesw-opt:hover { border-color: #B7C4FF; }\n.aa-themesw-opt.is-active { border-color: var(--au-color-brand); background: var(--au-color-brand-bg); color: var(--au-color-brand); }\n.aa-themesw-dot { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--au-color-border); }\n.aa-themesw-dot.dark { background: var(--au-color-tooltip-bg); }\n.aa-themesw-dot.light { background: var(--au-color-card-bg); }\n.aa-themesw-colors { display: flex; gap: 8px; margin-left: 4px; }\n.aa-themesw-color { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform .12s; }\n.aa-themesw-color:hover { transform: scale(1.1); }\n.aa-themesw-color.is-active { border-color: var(--au-color-tooltip-bg); }\n.aa-themesw-label { font-size: 12px; color: var(--au-color-text-secondary); width: 100%; margin-top: 4px; }\n","jsx":"import React from 'react';\nimport './ThemeSwitcher.css';\n\nconst MODES = [\n  { value: 'light', label: '浅色' },\n  { value: 'dark', label: '深色' }\n];\nconst BRANDS = ['#2F54EB', '#1677FF', '#722ED1', '#13C2C2', '#FA541C', '#EB2F96'];\n\nexport default function ThemeSwitcher({ mode = 'light', brand = '#2F54EB', onModeChange, onBrandChange }) {\n  return (\n    <div className=\"aa-themesw\">\n      {MODES.map((m) => (\n        <div\n          key={m.value}\n          className={'aa-themesw-opt' + (mode === m.value ? ' is-active' : '')}\n          onClick={() => onModeChange && onModeChange(m.value)}\n        >\n          <span className={'aa-themesw-dot ' + m.value} />\n          {m.label}\n        </div>\n      ))}\n      <div className=\"aa-themesw-colors\">\n        {BRANDS.map((c) => (\n          <span\n            key={c}\n            className={'aa-themesw-color' + (brand === c ? ' is-active' : '')}\n            style={{ background: c }}\n            onClick={() => onBrandChange && onBrandChange(c)}\n          />\n        ))}\n      </div>\n      <div className=\"aa-themesw-label\">品牌色：{brand}（应用于 CSS 变量 --brand 实时预览）</div>\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-themesw\">\n    <div\n      v-for=\"m in modes\"\n      :key=\"m.value\"\n      class=\"aa-themesw-opt\"\n      :class=\"{ 'is-active': mode === m.value }\"\n      @click=\"$emit('update:mode', m.value)\"\n    >\n      <span class=\"aa-themesw-dot\" :class=\"m.value\"></span>{{ m.label }}\n    </div>\n    <div class=\"aa-themesw-colors\">\n      <span\n        v-for=\"c in brands\"\n        :key=\"c\"\n        class=\"aa-themesw-color\"\n        :class=\"{ 'is-active': brand === c }\"\n        :style=\"{ background: c }\"\n        @click=\"$emit('update:brand', c)\"\n      ></span>\n    </div>\n    <div class=\"aa-themesw-label\">品牌色：{{ brand }}（应用于 CSS 变量 --brand 实时预览）</div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaThemeSwitcher',\n  props: {\n    mode: { type: String, default: 'light' },\n    brand: { type: String, default: '#2F54EB' }\n  },\n  data() {\n    return {\n      modes: [\n        { value: 'light', label: '浅色' },\n        { value: 'dark', label: '深色' }\n      ],\n      brands: ['#2F54EB', '#1677FF', '#722ED1', '#13C2C2', '#FA541C', '#EB2F96']\n    };\n  }\n};\n</script>\n\n<style src=\"./ThemeSwitcher.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-themesw\">\n    <div\n      v-for=\"m in modes\"\n      :key=\"m.value\"\n      class=\"aa-themesw-opt\"\n      :class=\"{ 'is-active': mode === m.value }\"\n      @click=\"emit('update:mode', m.value)\"\n    >\n      <span class=\"aa-themesw-dot\" :class=\"m.value\"></span>{{ m.label }}\n    </div>\n    <div class=\"aa-themesw-colors\">\n      <span\n        v-for=\"c in brands\"\n        :key=\"c\"\n        class=\"aa-themesw-color\"\n        :class=\"{ 'is-active': brand === c }\"\n        :style=\"{ background: c }\"\n        @click=\"emit('update:brand', c)\"\n      ></span>\n    </div>\n    <div class=\"aa-themesw-label\">品牌色：{{ brand }}（应用于 CSS 变量 --brand 实时预览）</div>\n  </div>\n</template>\n\n<script setup>\ndefineProps({\n  mode: { type: String, default: 'light' },\n  brand: { type: String, default: '#2F54EB' }\n});\nconst emit = defineEmits(['update:mode', 'update:brand']);\nconst modes = [\n  { value: 'light', label: '浅色' },\n  { value: 'dark', label: '深色' }\n];\nconst brands = ['#2F54EB', '#1677FF', '#722ED1', '#13C2C2', '#FA541C', '#EB2F96'];\n</script>\n\n<style src=\"./ThemeSwitcher.css\"></style>\n"}},{"slug":"layoutswitcher","name":"布局切换 LayoutSwitcher","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/layoutswitcher.json","category":"system","specLines":["- 侧边、顶部、混合导航","- 侧边栏宽度","- 折叠状态","- 保存偏好","- 适用于布局配置"],"specSummary":"- 侧边、顶部、混合导航","contract":{"variants":["侧边导航 · 展开","侧边导航 · 折叠","顶部导航","混合导航"],"dims":[{"name":"navType","values":["side","top","mixed"]},{"name":"collapsed","values":["expanded","collapsed"]}],"unknowns":["侧边栏宽度的可选值","折叠时的图标尺寸"],"anatomy":{"navType":"侧边、顶部、混合导航","width":"侧边栏宽度","collapsed":"折叠状态","persist":"保存偏好"},"doNot":["各布局的响应式断点"],"usage":["侧边、顶部、混合导航","侧边栏宽度","折叠状态","保存偏好","适用于布局配置"],"structure":{"types":"侧边 / 顶部 / 混合","persist":"本地保存"}},"files":{"html":"../frameworks/LayoutSwitcher.html","css":"../frameworks/LayoutSwitcher.css","jsx":"../frameworks/LayoutSwitcher.jsx","vue2":"../frameworks/LayoutSwitcher.vue2.vue","vue3":"../frameworks/LayoutSwitcher.vue3.vue"},"sizes":{"html":2200,"css":1125,"jsx":930,"vue2":956,"vue3":969},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · LayoutSwitcher</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"./LayoutSwitcher.css\" />\n</head>\n<body>\n  <div class=\"aa-page\">\n    <h2 class=\"aa-h2\">LayoutSwitcher 布局切换</h2>\n    <p class=\"aa-desc\">侧边 / 顶部 / 混合导航布局切换，保存偏好。</p>\n\n    <div class=\"aa-demo\">\n      <div class=\"aa-layoutsw\" id=\"sw\">\n        <div class=\"aa-layoutsw-opt\" role=\"radio\" tabindex=\"0\" data-v=\"side\">\n          <div class=\"aa-layoutsw-mini\" role=\"radio\" tabindex=\"0\"><div class=\"s-body\"><div class=\"s-side\"></div><div class=\"s-main\"></div></div></div>\n          <div class=\"aa-layoutsw-label\">侧边布局</div>\n        </div>\n        <div class=\"aa-layoutsw-opt\" role=\"radio\" tabindex=\"0\" data-v=\"top\">\n          <div class=\"aa-layoutsw-mini\" role=\"radio\" tabindex=\"0\"><div class=\"s-top\"></div><div class=\"s-body\"><div class=\"s-main\"></div></div></div>\n          <div class=\"aa-layoutsw-label\">顶部布局</div>\n        </div>\n        <div class=\"aa-layoutsw-opt\" role=\"radio\" tabindex=\"0\" data-v=\"mixed\">\n          <div class=\"aa-layoutsw-mini\" role=\"radio\" tabindex=\"0\"><div class=\"s-top\"></div><div class=\"s-body\"><div class=\"s-side\"></div><div class=\"s-main\"></div></div></div>\n          <div class=\"aa-layoutsw-label\">混合布局</div>\n        </div>\n      </div>\n      <p class=\"aa-code-tip\" id=\"out\"></p>\n    </div>\n  </div>\n\n  <script>\n    var sel = document.getElementById('sw');\n    var out = document.getElementById('out');\n    sel.addEventListener('click', function (e) {\n      var opt = e.target.closest('.aa-layoutsw-opt');\n      if (!opt) return;\n      Array.prototype.forEach.call(sel.children, function (c) { c.classList.remove('is-active'); });\n      opt.classList.add('is-active');\n      out.textContent = '当前布局：' + opt.querySelector('.aa-layoutsw-label').textContent;\n    });\n    sel.children[0].classList.add('is-active');\n    out.textContent = '当前布局：侧边布局';\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin LayoutSwitcher 样式 — 布局切换 */\n.aa-layoutsw { font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); display: flex; gap: 12px; flex-wrap: wrap; }\n.aa-layoutsw-opt { border: 1px solid var(--au-color-border); border-radius: 8px; padding: 8px; cursor: pointer; width: 128px; transition: border-color .15s, box-shadow .15s; }\n.aa-layoutsw-opt:hover { border-color: #B7C4FF; }\n.aa-layoutsw-opt.is-active { border-color: var(--au-color-brand); box-shadow: 0 0 0 3px rgba(47,84,235,0.12); }\n.aa-layoutsw-mini { height: 66px; border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; background: var(--au-color-card-bg); border: 1px solid var(--au-color-border); }\n.aa-layoutsw-mini .s-top { height: 16px; background: var(--au-color-brand); }\n.aa-layoutsw-mini .s-body { flex: 1; display: flex; }\n.aa-layoutsw-mini .s-side { width: 22px; background: #B7C4FF; }\n.aa-layoutsw-mini .s-main { flex: 1; background: var(--au-color-page-bg); }\n.aa-layoutsw-label { font-size: 13px; color: var(--au-color-text-body); text-align: center; margin-top: 6px; }\n","jsx":"import React from 'react';\nimport './LayoutSwitcher.css';\n\nconst OPTIONS = [\n  { value: 'side', label: '侧边布局' },\n  { value: 'top', label: '顶部布局' },\n  { value: 'mixed', label: '混合布局' }\n];\n\nexport default function LayoutSwitcher({ value = 'side', onChange }) {\n  return (\n    <div className=\"aa-layoutsw\">\n      {OPTIONS.map((o) => (\n        <div\n          key={o.value}\n          className={'aa-layoutsw-opt' + (value === o.value ? ' is-active' : '')}\n          onClick={() => onChange && onChange(o.value)}\n        >\n          <div className=\"aa-layoutsw-mini\">\n            {o.value !== 'side' && <div className=\"s-top\" />}\n            <div className=\"s-body\">\n              {o.value !== 'top' && <div className=\"s-side\" />}\n              <div className=\"s-main\" />\n            </div>\n          </div>\n          <div className=\"aa-layoutsw-label\">{o.label}</div>\n        </div>\n      ))}\n    </div>\n  );\n}\n","vue2":"<template>\n  <div class=\"aa-layoutsw\">\n    <div\n      v-for=\"o in options\"\n      :key=\"o.value\"\n      class=\"aa-layoutsw-opt\"\n      :class=\"{ 'is-active': value === o.value }\"\n      @click=\"$emit('input', o.value)\"\n    >\n      <div class=\"aa-layoutsw-mini\">\n        <div v-if=\"o.value !== 'side'\" class=\"s-top\"></div>\n        <div class=\"s-body\">\n          <div v-if=\"o.value !== 'top'\" class=\"s-side\"></div>\n          <div class=\"s-main\"></div>\n        </div>\n      </div>\n      <div class=\"aa-layoutsw-label\">{{ o.label }}</div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaLayoutSwitcher',\n  props: {\n    value: { type: String, default: 'side' },\n    options: {\n      type: Array,\n      default: () => [\n        { value: 'side', label: '侧边布局' },\n        { value: 'top', label: '顶部布局' },\n        { value: 'mixed', label: '混合布局' }\n      ]\n    }\n  }\n};\n</script>\n\n<style src=\"./LayoutSwitcher.css\"></style>\n","vue3":"<template>\n  <div class=\"aa-layoutsw\">\n    <div\n      v-for=\"o in options\"\n      :key=\"o.value\"\n      class=\"aa-layoutsw-opt\"\n      :class=\"{ 'is-active': modelValue === o.value }\"\n      @click=\"emit('update:modelValue', o.value)\"\n    >\n      <div class=\"aa-layoutsw-mini\">\n        <div v-if=\"o.value !== 'side'\" class=\"s-top\"></div>\n        <div class=\"s-body\">\n          <div v-if=\"o.value !== 'top'\" class=\"s-side\"></div>\n          <div class=\"s-main\"></div>\n        </div>\n      </div>\n      <div class=\"aa-layoutsw-label\">{{ o.label }}</div>\n    </div>\n  </div>\n</template>\n\n<script setup>\ndefineProps({\n  modelValue: { type: String, default: 'side' },\n  options: {\n    type: Array,\n    default: () => [\n      { value: 'side', label: '侧边布局' },\n      { value: 'top', label: '顶部布局' },\n      { value: 'mixed', label: '混合布局' }\n    ]\n  }\n});\nconst emit = defineEmits(['update:modelValue']);\n</script>\n\n<style src=\"./LayoutSwitcher.css\"></style>\n"}},{"slug":"densityswitcher","name":"密度切换 DensitySwitcher","tier":"extension","confidence":"high","specBatch":7,"specFile":"组件7.txt","contractRef":"components/densityswitcher.json","category":"system","specLines":["- 宽松、默认、紧凑","- 影响表格、表单间距","- 局部可独立设置","- 保存偏好","- 适用于信息密度调整"],"specSummary":"- 宽松、默认、紧凑","contract":{"variants":["宽松","默认","紧凑","局部独立设置"],"dims":[{"name":"density","values":["loose","default","compact"]},{"name":"scope","values":["global","local"]}],"unknowns":["局部设置的作用域边界","三档对应的控件高度具体值"],"anatomy":{"options":"宽松、默认、紧凑","effect":"影响表格、表单间距","scope":"局部可独立设置","persist":"保存偏好"},"doNot":["各档位的具体像素值（见令牌定义）"],"usage":["宽松、默认、紧凑","影响表格、表单间距","局部可独立设置","保存偏好","适用于信息密度调整"],"structure":{"levels":"3 档","affects":"表格 / 表单间距","persist":"本地保存"}},"files":{"html":"../frameworks/DensitySwitcher.html","css":"../frameworks/DensitySwitcher.css","jsx":"../frameworks/DensitySwitcher.jsx","vue2":"../frameworks/DensitySwitcher.vue2.vue","vue3":"../frameworks/DensitySwitcher.vue3.vue"},"sizes":{"html":1716,"css":1288,"jsx":1051,"vue2":1099,"vue3":1100},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Aurora Admin · DensitySwitcher</title>\n  <link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\" />\n  <link rel=\"stylesheet\" href=\"./DensitySwitcher.css\" />\n</head>\n<body>\n  <div class=\"aa-page\">\n    <h2 class=\"aa-h2\">DensitySwitcher 密度切换</h2>\n    <p class=\"aa-desc\">宽松 / 默认 / 紧凑，影响表格、表单间距，可局部独立设置并保存。</p>\n\n    <div class=\"aa-demo\">\n      <div class=\"aa-densw\" id=\"sw\">\n        <button class=\"aa-densw-opt\" data-v=\"loose\">宽松</button>\n        <button class=\"aa-densw-opt\" data-v=\"default\">默认</button>\n        <button class=\"aa-densw-opt\" data-v=\"compact\">紧凑</button>\n      </div>\n      <div class=\"aa-densw-demo default\" id=\"demo\">\n        <div class=\"aa-densw-row\"><span>用户管理</span><span class=\"muted\">128 项</span></div>\n        <div class=\"aa-densw-row\"><span>角色管理</span><span class=\"muted\">12 项</span></div>\n        <div class=\"aa-densw-row\"><span>菜单管理</span><span class=\"muted\">36 项</span></div>\n      </div>\n    </div>\n  </div>\n\n  <script>\n    var sw = document.getElementById('sw');\n    var demo = document.getElementById('demo');\n    sw.addEventListener('click', function (e) {\n      var b = e.target.closest('.aa-densw-opt');\n      if (!b) return;\n      Array.prototype.forEach.call(sw.children, function (c) { c.classList.remove('is-active'); });\n      b.classList.add('is-active');\n      demo.className = 'aa-densw-demo ' + b.dataset.v;\n    });\n    sw.children[1].classList.add('is-active');\n  </script>\n</body>\n</html>\n","css":"/* Aurora Admin DensitySwitcher 样式 — 信息密度切换 */\n.aa-densw { font-family: var(--font-family, -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif); display: inline-flex; border: 1px solid var(--au-color-border); border-radius: 6px; overflow: hidden; }\n.aa-densw-opt { padding: 8px 16px; font-size: 13px; cursor: pointer; color: var(--au-color-text-tertiary); background: var(--au-color-card-bg); border: none; transition: background .15s, color .15s; }\n.aa-densw-opt + .aa-densw-opt { border-left: 1px solid var(--au-color-border); }\n.aa-densw-opt:hover { color: var(--au-color-brand); }\n.aa-densw-opt.is-active { background: var(--au-color-brand); color: var(--au-color-text-inverse); }\n\n.aa-densw-demo { margin-top: 12px; border: 1px solid var(--au-color-border); border-radius: 8px; overflow: hidden; }\n.aa-densw-demo.loose .aa-densw-row { padding: 14px 16px; }\n.aa-densw-demo.default .aa-densw-row { padding: 10px 16px; }\n.aa-densw-demo.compact .aa-densw-row { padding: 6px 16px; font-size: 13px; }\n.aa-densw-row { border-bottom: 1px solid var(--au-color-border); color: var(--au-color-text-body); display: flex; justify-content: space-between; }\n.aa-densw-row:last-child { border-bottom: none; }\n.aa-densw-row .muted { color: var(--au-color-text-secondary); }\n","jsx":"import React from 'react';\nimport './DensitySwitcher.css';\n\nconst OPTIONS = [\n  { value: 'loose', label: '宽松' },\n  { value: 'default', label: '默认' },\n  { value: 'compact', label: '紧凑' }\n];\nconst ROWS = [\n  { name: '用户管理', count: '128 项' },\n  { name: '角色管理', count: '12 项' },\n  { name: '菜单管理', count: '36 项' }\n];\n\nexport default function DensitySwitcher({ value = 'default', onChange }) {\n  return (\n    <div>\n      <div className=\"aa-densw\">\n        {OPTIONS.map((o) => (\n          <button\n            key={o.value}\n            className={'aa-densw-opt' + (value === o.value ? ' is-active' : '')}\n            onClick={() => onChange && onChange(o.value)}\n          >\n            {o.label}\n          </button>\n        ))}\n      </div>\n      <div className={'aa-densw-demo ' + value}>\n        {ROWS.map((r, i) => (\n          <div key={i} className=\"aa-densw-row\">\n            <span>{r.name}</span>\n            <span className=\"muted\">{r.count}</span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n","vue2":"<template>\n  <div>\n    <div class=\"aa-densw\">\n      <button\n        v-for=\"o in options\"\n        :key=\"o.value\"\n        class=\"aa-densw-opt\"\n        :class=\"{ 'is-active': value === o.value }\"\n        @click=\"$emit('input', o.value)\"\n      >{{ o.label }}</button>\n    </div>\n    <div class=\"aa-densw-demo\" :class=\"value\">\n      <div v-for=\"(r, i) in rows\" :key=\"i\" class=\"aa-densw-row\"><span>{{ r.name }}</span><span class=\"muted\">{{ r.count }}</span></div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaDensitySwitcher',\n  props: {\n    value: { type: String, default: 'default' },\n    options: {\n      type: Array,\n      default: () => [\n        { value: 'loose', label: '宽松' },\n        { value: 'default', label: '默认' },\n        { value: 'compact', label: '紧凑' }\n      ]\n    },\n    rows: {\n      type: Array,\n      default: () => [\n        { name: '用户管理', count: '128 项' },\n        { name: '角色管理', count: '12 项' },\n        { name: '菜单管理', count: '36 项' }\n      ]\n    }\n  }\n};\n</script>\n\n<style src=\"./DensitySwitcher.css\"></style>\n","vue3":"<template>\n  <div>\n    <div class=\"aa-densw\">\n      <button\n        v-for=\"o in options\"\n        :key=\"o.value\"\n        class=\"aa-densw-opt\"\n        :class=\"{ 'is-active': modelValue === o.value }\"\n        @click=\"emit('update:modelValue', o.value)\"\n      >{{ o.label }}</button>\n    </div>\n    <div class=\"aa-densw-demo\" :class=\"modelValue\">\n      <div v-for=\"(r, i) in rows\" :key=\"i\" class=\"aa-densw-row\"><span>{{ r.name }}</span><span class=\"muted\">{{ r.count }}</span></div>\n    </div>\n  </div>\n</template>\n\n<script setup>\ndefineProps({\n  modelValue: { type: String, default: 'default' },\n  options: {\n    type: Array,\n    default: () => [\n      { value: 'loose', label: '宽松' },\n      { value: 'default', label: '默认' },\n      { value: 'compact', label: '紧凑' }\n    ]\n  },\n  rows: {\n    type: Array,\n    default: () => [\n      { name: '用户管理', count: '128 项' },\n      { name: '角色管理', count: '12 项' },\n      { name: '菜单管理', count: '36 项' }\n    ]\n  }\n});\nconst emit = defineEmits(['update:modelValue']);\n</script>\n\n<style src=\"./DensitySwitcher.css\"></style>\n"}},{"slug":"employeecard","name":"员工卡片 EmployeeCard","tier":"extension","confidence":"high","specBatch":9,"specFile":"组件9.txt","contractRef":"components/employeecard.json","category":"display","specLines":["- 用于员工列表或组织架构展示","- 包含：头像、姓名、工号、部门、职位、状态（在职/离职）","- 卡片悬停显示快捷操作：发消息、查看详情、编辑","- 支持标签展示技能或角色","- 可配置显示联系方式（电话、邮箱）","- 卡片圆角 8px，阴影低，内边距 16px"],"specSummary":"- 用于员工列表或组织架构展示","contract":{"variants":["在职 · 基础信息","在职 · 显示电话","离职状态","悬停显示快捷操作"],"dims":[{"name":"status","values":["active","resigned"]},{"name":"contact","values":["hidden","phone","email"]}],"unknowns":["头像缺省占位样式","技能标签的配色集合"],"anatomy":{"avatar":"头像","identity":"姓名、工号、部门、职位、状态（在职/离职）","tags":"标签展示技能或角色","contact":"可配置显示联系方式（电话、邮箱）","hoverActions":"卡片悬停显示快捷操作：发消息、查看详情、编辑"},"doNot":["离职状态的视觉弱化程度"],"usage":["用于员工列表或组织架构展示","包含：头像、姓名、工号、部门、职位、状态（在职/离职）","卡片悬停显示快捷操作：发消息、查看详情、编辑","支持标签展示技能或角色","可配置显示联系方式（电话、邮箱）","卡片圆角 8px，阴影低，内边距 16px"],"structure":{"radius":"8px","shadow":"低","padding":"16px"}},"files":{"html":"../frameworks/employeecard.html","css":"../frameworks/EmployeeCard.css","jsx":"../frameworks/EmployeeCard.jsx","vue2":"../frameworks/EmployeeCard.vue2.vue","vue3":"../frameworks/EmployeeCard.vue3.vue"},"sizes":{"html":4937,"css":2221,"jsx":2307,"vue2":3568,"vue3":3632},"sources":{"html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Aurora Admin · EmployeeCard (H5)</title>\n<link rel=\"stylesheet\" href=\"../.design_library/aurora-admin/colors_and_type.css\">\n<style>\n  /* 对齐 组件9.txt EmployeeCard 规范：头像/姓名/工号/部门/职位/状态、悬停快捷操作、标签、可显联系方式、圆角8px/阴影低/内边距16px */\n  .demo { padding: 24px; background: var(--au-color-page-bg); color: var(--au-color-text-body); font-family: var(--font-family); }\n  h1 { font-size: 20px; margin: 0 0 4px; }\n  .sub { color: var(--au-color-text-secondary); margin: 0 0 24px; font-size: 12px; }\n  .row { display: flex; flex-wrap: wrap; gap: 16px; }\n\n  .aa-emp-card { width: 280px; background: var(--au-color-card-bg); border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); padding: 16px; position: relative; box-sizing: border-box; }\n  .aa-emp-top { display: flex; align-items: center; gap: 12px; }\n  .aa-emp-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--au-color-brand-bg); color: var(--au-color-brand); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 18px; flex-shrink: 0; overflow: hidden; }\n  .aa-emp-avatar img { width: 100%; height: 100%; object-fit: cover; }\n  .aa-emp-name { font-size: 16px; font-weight: 600; color: var(--au-color-text-title); display: flex; align-items: center; gap: 8px; }\n  .aa-emp-status { font-size: 12px; padding: 0 6px; border-radius: 2px; line-height: 18px; }\n  .aa-emp-status.active { background: var(--au-color-tag-green-bg); color: var(--au-color-success); }\n  .aa-emp-status.left { background: var(--au-color-disabled-bg); color: var(--au-color-text-secondary); }\n  .aa-emp-id { font-size: 12px; color: var(--au-color-text-secondary); margin-top: 2px; }\n  .aa-emp-meta { margin-top: 12px; font-size: 13px; color: var(--au-color-text-tertiary); line-height: 22px; }\n  .aa-emp-tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }\n  .aa-emp-tag { background: var(--au-color-brand-bg); color: var(--au-color-brand); font-size: 12px; padding: 1px 8px; border-radius: 2px; }\n  .aa-emp-contact { margin-top: 12px; font-size: 13px; color: var(--au-color-text-tertiary); line-height: 22px; border-top: 1px solid var(--au-color-border-strong); padding-top: 10px; }\n  .aa-emp-actions {\n    position: absolute; top: 12px; right: 12px; display: none; gap: 4px;\n    background: var(--au-color-card-bg); border: 1px solid var(--au-color-border); border-radius: 4px; padding: 2px;\n  }\n  .aa-emp-card:hover .aa-emp-actions { display: flex; }\n  .aa-emp-actions button { border: none; background: none; cursor: pointer; color: var(--au-color-text-secondary); font-size: 12px; padding: 2px 6px; border-radius: 3px; }\n  .aa-emp-actions button:hover { color: var(--au-color-brand); background: var(--au-color-brand-bg); }\n</style>\n</head>\n<body>\n<div class=\"demo\">\n  <h1>Aurora Admin · EmployeeCard 组件（纯 H5）</h1>\n  <p class=\"sub\">对齐 EmployeeCard 规范：头像/姓名/工号/部门/职位/状态、悬停快捷操作、技能标签、可显联系方式、圆角8px/阴影低/内边距16px</p>\n\n  <div class=\"row\">\n    <div class=\"aa-emp-card\">\n      <div class=\"aa-emp-actions\">\n        <button onclick=\"alert('发消息')\">发消息</button>\n        <button onclick=\"alert('查看详情')\">详情</button>\n        <button onclick=\"alert('编辑')\">编辑</button>\n      </div>\n      <div class=\"aa-emp-top\">\n        <div class=\"aa-emp-avatar\">张</div>\n        <div>\n          <div class=\"aa-emp-name\">张伟 <span class=\"aa-emp-status active\">在职</span></div>\n          <div class=\"aa-emp-id\">工号：E1001</div>\n        </div>\n      </div>\n      <div class=\"aa-emp-meta\">部门：技术中心 · 前端组<br>职位：高级前端工程师</div>\n      <div class=\"aa-emp-tags\"><span class=\"aa-emp-tag\">React</span><span class=\"aa-emp-tag\">TypeScript</span><span class=\"aa-emp-tag\">架构</span></div>\n    </div>\n\n    <div class=\"aa-emp-card\">\n      <div class=\"aa-emp-actions\">\n        <button onclick=\"alert('发消息')\">发消息</button>\n        <button onclick=\"alert('查看详情')\">详情</button>\n        <button onclick=\"alert('编辑')\">编辑</button>\n      </div>\n      <div class=\"aa-emp-top\">\n        <div class=\"aa-emp-avatar\">李</div>\n        <div>\n          <div class=\"aa-emp-name\">李娜 <span class=\"aa-emp-status left\">离职</span></div>\n          <div class=\"aa-emp-id\">工号：E1024</div>\n        </div>\n      </div>\n      <div class=\"aa-emp-meta\">部门：产品中心 · 产品组<br>职位：产品经理</div>\n      <div class=\"aa-emp-tags\"><span class=\"aa-emp-tag\">B端</span><span class=\"aa-emp-tag\">数据</span></div>\n      <div class=\"aa-emp-contact\">电话：138-0000-0000<br>邮箱：lina@example.com</div>\n    </div>\n  </div>\n</div>\n</body>\n</html>\n","css":"/* Aurora Admin EmployeeCard 样式 — 对齐 组件9.txt EmployeeCard 规范 */\n.aa-emp-card { width: 280px; background: var(--au-color-card-bg); border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); padding: 16px; position: relative; box-sizing: border-box; }\n.aa-emp-top { display: flex; align-items: center; gap: 12px; }\n.aa-emp-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--au-color-brand-bg); color: var(--au-color-brand); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 18px; flex-shrink: 0; overflow: hidden; }\n.aa-emp-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.aa-emp-name { font-size: 16px; font-weight: 600; color: var(--au-color-text-title); display: flex; align-items: center; gap: 8px; }\n.aa-emp-status { font-size: 12px; padding: 0 6px; border-radius: 2px; line-height: 18px; }\n.aa-emp-status.active { background: var(--au-color-tag-green-bg); color: var(--au-color-success); }\n.aa-emp-status.left { background: var(--au-color-disabled-bg); color: var(--au-color-text-secondary); }\n.aa-emp-id { font-size: 12px; color: var(--au-color-text-secondary); margin-top: 2px; }\n.aa-emp-meta { margin-top: 12px; font-size: 13px; color: var(--au-color-text-tertiary); line-height: 22px; }\n.aa-emp-tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }\n.aa-emp-tag { background: var(--au-color-brand-bg); color: var(--au-color-brand); font-size: 12px; padding: 1px 8px; border-radius: 2px; }\n.aa-emp-contact { margin-top: 12px; font-size: 13px; color: var(--au-color-text-tertiary); line-height: 22px; border-top: 1px solid var(--au-color-border-strong); padding-top: 10px; }\n.aa-emp-actions {\n  position: absolute; top: 12px; right: 12px; display: none; gap: 4px;\n  background: var(--au-color-card-bg); border: 1px solid var(--au-color-border); border-radius: 4px; padding: 2px;\n}\n.aa-emp-card:hover .aa-emp-actions { display: flex; }\n.aa-emp-actions button { border: none; background: none; cursor: pointer; color: var(--au-color-text-secondary); font-size: 12px; padding: 2px 6px; border-radius: 3px; }\n.aa-emp-actions button:hover { color: var(--au-color-brand); background: var(--au-color-brand-bg); }\n","jsx":"import React from 'react';\nimport './EmployeeCard.css';\n\n/**\n * Aurora Admin EmployeeCard（React）\n * 对齐 组件9.txt EmployeeCard 规范：头像/姓名/工号/部门/职位/状态、悬停快捷操作、标签、可显联系方式、圆角8px/阴影低/内边距16px\n * employee: { name, empId, dept, position, status:'active'|'left', avatar?, tags?, phone?, email? }\n */\nexport default function EmployeeCard({ employee, showContact = false, onMessage, onView, onEdit }) {\n  const statusText = employee.status === 'left' ? '离职' : '在职';\n  return (\n    <div className=\"aa-emp-card\">\n      <div className=\"aa-emp-actions\">\n        <button onClick={() => onMessage && onMessage(employee)}>发消息</button>\n        <button onClick={() => onView && onView(employee)}>详情</button>\n        <button onClick={() => onEdit && onEdit(employee)}>编辑</button>\n      </div>\n\n      <div className=\"aa-emp-top\">\n        <div className=\"aa-emp-avatar\">\n          {employee.avatar\n            ? <img src={employee.avatar} alt={employee.name} />\n            : <span>{(employee.name || '?').charAt(0)}</span>}\n        </div>\n        <div>\n          <div className=\"aa-emp-name\">\n            {employee.name}\n            <span className={`aa-emp-status ${employee.status}`}>{statusText}</span>\n          </div>\n          <div className=\"aa-emp-id\">工号：{employee.empId}</div>\n        </div>\n      </div>\n\n      <div className=\"aa-emp-meta\">\n        部门：{employee.dept}<br />职位：{employee.position}\n      </div>\n\n      {employee.tags && employee.tags.length > 0 && (\n        <div className=\"aa-emp-tags\">\n          {employee.tags.map((t) => <span key={t} className=\"aa-emp-tag\">{t}</span>)}\n        </div>\n      )}\n\n      {showContact && (employee.phone || employee.email) && (\n        <div className=\"aa-emp-contact\">\n          {employee.phone && <div>电话：{employee.phone}</div>}\n          {employee.email && <div>邮箱：{employee.email}</div>}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/*\n用法示例：\nimport EmployeeCard from './EmployeeCard';\nconst emp = { name: '张伟', empId: 'E1001', dept: '技术中心 · 前端组', position: '高级前端工程师', status: 'active', tags: ['React','TS'] };\n<EmployeeCard employee={emp} showContact onEdit={(e) => console.log(e)} />\n*/\n","vue2":"<template>\n  <div class=\"aa-emp-card\">\n    <div class=\"aa-emp-actions\">\n      <button @click=\"$emit('message', employee)\">发消息</button>\n      <button @click=\"$emit('view', employee)\">详情</button>\n      <button @click=\"$emit('edit', employee)\">编辑</button>\n    </div>\n\n    <div class=\"aa-emp-top\">\n      <div class=\"aa-emp-avatar\">\n        <img v-if=\"employee.avatar\" :src=\"employee.avatar\" :alt=\"employee.name\">\n        <span v-else>{{ initial }}</span>\n      </div>\n      <div>\n        <div class=\"aa-emp-name\">\n          {{ employee.name }}\n          <span class=\"aa-emp-status\" :class=\"employee.status\">{{ statusText }}</span>\n        </div>\n        <div class=\"aa-emp-id\">工号：{{ employee.empId }}</div>\n      </div>\n    </div>\n\n    <div class=\"aa-emp-meta\">\n      部门：{{ employee.dept }}<br>职位：{{ employee.position }}\n    </div>\n\n    <div v-if=\"employee.tags && employee.tags.length\" class=\"aa-emp-tags\">\n      <span v-for=\"t in employee.tags\" :key=\"t\" class=\"aa-emp-tag\">{{ t }}</span>\n    </div>\n\n    <div v-if=\"showContact && (employee.phone || employee.email)\" class=\"aa-emp-contact\">\n      <div v-if=\"employee.phone\">电话：{{ employee.phone }}</div>\n      <div v-if=\"employee.email\">邮箱：{{ employee.email }}</div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'AaEmployeeCard',\n  props: {\n    employee: { type: Object, required: true },   // { name, empId, dept, position, status, avatar?, tags?, phone?, email? }\n    showContact: { type: Boolean, default: false }\n  },\n  computed: {\n    initial() { return (this.employee.name || '?').charAt(0); },\n    statusText() { return this.employee.status === 'left' ? '离职' : '在职'; }\n  }\n};\n</script>\n\n<!-- 样式对齐 组件9.txt EmployeeCard 规范 -->\n<style>\n.aa-emp-card { width: 280px; background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); padding: 16px; position: relative; box-sizing: border-box; }\n.aa-emp-top { display: flex; align-items: center; gap: 12px; }\n.aa-emp-avatar { width: 48px; height: 48px; border-radius: 50%; background: #F0F5FF; color: #2F54EB; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 18px; flex-shrink: 0; overflow: hidden; }\n.aa-emp-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.aa-emp-name { font-size: 16px; font-weight: 600; color: #1F2329; display: flex; align-items: center; gap: 8px; }\n.aa-emp-status { font-size: 12px; padding: 0 6px; border-radius: 2px; line-height: 18px; }\n.aa-emp-status.active { background: #F6FFED; color: #2E7D0A; }\n.aa-emp-status.left { background: #F5F5F5; color: #6E6E6E; }\n.aa-emp-id { font-size: 12px; color: #6E6E6E; margin-top: 2px; }\n.aa-emp-meta { margin-top: 12px; font-size: 13px; color: #595959; line-height: 22px; }\n.aa-emp-tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }\n.aa-emp-tag { background: #F0F5FF; color: #2F54EB; font-size: 12px; padding: 1px 8px; border-radius: 2px; }\n.aa-emp-contact { margin-top: 12px; font-size: 13px; color: #595959; line-height: 22px; border-top: 1px solid #F0F0F0; padding-top: 10px; }\n.aa-emp-actions {\n  position: absolute; top: 12px; right: 12px; display: none; gap: 4px;\n  background: #fff; border: 1px solid #E8ECF1; border-radius: 4px; padding: 2px;\n}\n.aa-emp-card:hover .aa-emp-actions { display: flex; }\n.aa-emp-actions button { border: none; background: none; cursor: pointer; color: #6E6E6E; font-size: 12px; padding: 2px 6px; border-radius: 3px; }\n.aa-emp-actions button:hover { color: #2F54EB; background: #F0F5FF; }\n</style>\n","vue3":"<template>\n  <div class=\"aa-emp-card\">\n    <div class=\"aa-emp-actions\">\n      <button @click=\"emit('message', employee)\">发消息</button>\n      <button @click=\"emit('view', employee)\">详情</button>\n      <button @click=\"emit('edit', employee)\">编辑</button>\n    </div>\n\n    <div class=\"aa-emp-top\">\n      <div class=\"aa-emp-avatar\">\n        <img v-if=\"employee.avatar\" :src=\"employee.avatar\" :alt=\"employee.name\">\n        <span v-else>{{ initial }}</span>\n      </div>\n      <div>\n        <div class=\"aa-emp-name\">\n          {{ employee.name }}\n          <span class=\"aa-emp-status\" :class=\"employee.status\">{{ statusText }}</span>\n        </div>\n        <div class=\"aa-emp-id\">工号：{{ employee.empId }}</div>\n      </div>\n    </div>\n\n    <div class=\"aa-emp-meta\">\n      部门：{{ employee.dept }}<br>职位：{{ employee.position }}\n    </div>\n\n    <div v-if=\"employee.tags && employee.tags.length\" class=\"aa-emp-tags\">\n      <span v-for=\"t in employee.tags\" :key=\"t\" class=\"aa-emp-tag\">{{ t }}</span>\n    </div>\n\n    <div v-if=\"showContact && (employee.phone || employee.email)\" class=\"aa-emp-contact\">\n      <div v-if=\"employee.phone\">电话：{{ employee.phone }}</div>\n      <div v-if=\"employee.email\">邮箱：{{ employee.email }}</div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\n\nconst props = defineProps({\n  employee: { type: Object, required: true },   // { name, empId, dept, position, status, avatar?, tags?, phone?, email? }\n  showContact: { type: Boolean, default: false }\n});\nconst emit = defineEmits(['message', 'view', 'edit']);\n\nconst initial = computed(() => (props.employee.name || '?').charAt(0));\nconst statusText = computed(() => (props.employee.status === 'left' ? '离职' : '在职'));\n</script>\n\n<!-- 样式对齐 组件9.txt EmployeeCard 规范 -->\n<style scoped>\n.aa-emp-card { width: 280px; background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); padding: 16px; position: relative; box-sizing: border-box; }\n.aa-emp-top { display: flex; align-items: center; gap: 12px; }\n.aa-emp-avatar { width: 48px; height: 48px; border-radius: 50%; background: #F0F5FF; color: #2F54EB; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 18px; flex-shrink: 0; overflow: hidden; }\n.aa-emp-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.aa-emp-name { font-size: 16px; font-weight: 600; color: #1F2329; display: flex; align-items: center; gap: 8px; }\n.aa-emp-status { font-size: 12px; padding: 0 6px; border-radius: 2px; line-height: 18px; }\n.aa-emp-status.active { background: #F6FFED; color: #2E7D0A; }\n.aa-emp-status.left { background: #F5F5F5; color: #6E6E6E; }\n.aa-emp-id { font-size: 12px; color: #6E6E6E; margin-top: 2px; }\n.aa-emp-meta { margin-top: 12px; font-size: 13px; color: #595959; line-height: 22px; }\n.aa-emp-tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }\n.aa-emp-tag { background: #F0F5FF; color: #2F54EB; font-size: 12px; padding: 1px 8px; border-radius: 2px; }\n.aa-emp-contact { margin-top: 12px; font-size: 13px; color: #595959; line-height: 22px; border-top: 1px solid #F0F0F0; padding-top: 10px; }\n.aa-emp-actions {\n  position: absolute; top: 12px; right: 12px; display: none; gap: 4px;\n  background: #fff; border: 1px solid #E8ECF1; border-radius: 4px; padding: 2px;\n}\n.aa-emp-card:hover .aa-emp-actions { display: flex; }\n.aa-emp-actions button { border: none; background: none; cursor: pointer; color: #6E6E6E; font-size: 12px; padding: 2px 6px; border-radius: 3px; }\n.aa-emp-actions button:hover { color: #2F54EB; background: #F0F5FF; }\n</style>\n"}}]};