openyida 2026.7.7 → 2026.7.8

package/yida-skills/skills/yida-nav-shell/references/nav-shell-patterns.md

@@ -0,0 +1,302 @@
+# B 端导航壳形态目录
+
+当页面隐藏了应用导航（`isRenderNav=false`，见 [yida-page-uiux Step 0 导航形态判定](../../yida-page-uiux/workflow/step-0-nav-shape.md)），页面要**自带导航壳**接管应用级导航。本文件是 B 端常见导航形态的选型 + 骨架 + 代码示例目录。挑一种主形态，可与标签页叠加做二级导航。
+
+> 这里给**方向 + 骨架 + 可直接改的代码示例**。示例以 native（`_customState` + inline style）为主，因为最自包含、两条链路都能读；每种形态附一句 **Canvas（antd）等价件**。落地时：native 交 `yida-custom-page`，Canvas 交 `yida-canvas-custom-page`。
+
+## 选型速查
+
+| 形态 | 何时用 | 顶级项数量 | 移动端收敛 |
+|---|---|---|---|
+| **左侧边栏** | 模块多、需常驻导航的后台/门户（最通用 B 端形态） | 5–12，支持分组/二级 | 抽屉（汉堡唤出） |
+| **顶部导航** | 模块少、内容要占满宽度的看板/门户 | 2–6 | 汉堡菜单 |
+| **顶部 + 侧边混合** | 两级结构复杂应用（顶部分域，侧边分子模块） | 顶 2–5 × 侧 3–10 | 顶部汉堡 + 侧边抽屉 |
+| **浮动导航（悬浮胶囊/Dock）** | 沉浸/大屏/展示页，chrome 要极简，导航不常驻 | 3–6 | 底部胶囊/收起 |
+| **标签页** | 一个模块内切同级视图（常叠加在上面几种之上） | 2–8 | 横向滚动标签 |
+
+## 通用纪律（B 端 + 去 AI 味）
+
+- **选中态要一眼可辨**：左侧边用「左侧 3px 主色条 + 浅色底 + 字重加粗」；顶部用「底部 2px 主色下划线 + 主色文字」。别只靠淡淡变色。
+- **图标只作功能用途**：导航项用「功能性内联 SVG + 文字」，同页一套图标风格；**禁 emoji**、禁每项前配装饰图标（见 [yida-page-uiux 图标纪律](../../yida-page-uiux/workflow/step-5-icon-and-assets.md)）。
+- **不做营销脸**：没有巨 Logo Hero、没有渐变横幅。顶部条左侧放「应用名/模块名 + 面包屑」，右侧放「用户/操作」，克制。
+- **密度可偏高**：B 端导航允许信息密集，但要有主次；分组用小标题或分隔线，不要一长串平铺。
+- **主色策略**：导航隐藏时主色相可自立（见 yida-page-uiux Step 0）；仍要么走品牌 `var(--color-brand1-*)`、要么用自定主色一以贯之，语义色固定。
+- **先关原导航**：使用本导航壳时，宿主页发布后必须配置 `isRenderNav=false`，不要让宜搭原导航和自绘导航同时出现。
+- **URL 参数不丢失**：跨页导航项要保存 `params` 并统一构造 URL；自定义页目标至少带 `isRenderNav=false`，需要跨组织或深链时合并 `corpid`、`tab`、`view` 等白名单参数。
+
+## 多视图切换机制（导航壳的核心）
+
+导航壳 = 一个自定义页内切多个视图。两条链路的做法：
+
+- **native**：状态存 `_customState.activeView`，点击 `this.setCustomState({ activeView: key })`，`renderJsx` 里按 `activeView` 分支渲染内容区。
+- **Canvas**：`var v = React.useState('home')`，或用 URL hash（`window.location.hash` + `hashchange` 监听，`useEffect` 注册并 cleanup）做可分享/可后退的视图切换。
+- **跨页跳转**（跳到别的自定义页/表单）：用 [field-and-url-reference.md](../../../references/field-and-url-reference.md) 的模板拼 URL，目标自定义页必须带 `?isRenderNav=false` 保持沉浸；不要假设应用导航还在。不要只调用 `router.push(formUuid, {}, false)`，它无法表达完整的隐藏导航 URL 和业务参数。
+
+### 跨页导航 URL 模板
+
+```jsx
+var BASE_URL = 'https://www.aliwork.com';
+var APP_TYPE = 'APP_XXX';
+var COMMON_NAV_PARAMS = { isRenderNav: 'false' };
+
+var NAV = [
+  { key: 'overview', label: '概览', type: 'custom', formUuid: 'FORM-OVERVIEW', params: { tab: 'overview' } },
+  { key: 'orders', label: '订单', type: 'workbench', formUuid: 'FORM-ORDERS', params: { iframe: 'true' } }
+];
+
+export function buildQuery(params) {
+  var pairs = [];
+  Object.keys(params || {}).forEach(function(key) {
+    if (params[key] !== undefined && params[key] !== null && params[key] !== '') {
+      pairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(String(params[key])));
+    }
+  });
+  return pairs.length ? '?' + pairs.join('&') : '';
+}
+
+export function buildNavUrl(item) {
+  var path = item.type === 'workbench'
+    ? '/' + APP_TYPE + '/workbench/' + item.formUuid
+    : '/' + APP_TYPE + '/custom/' + item.formUuid;
+  var params = item.type === 'workbench'
+    ? Object.assign({}, item.params || {})
+    : Object.assign({}, COMMON_NAV_PARAMS, item.params || {});
+  return BASE_URL + path + this.buildQuery(params);
+}
+
+export function openNavItem(item) {
+  window.open(this.buildNavUrl(item), '_top');
+}
+```
+
+---
+
+## 形态 1：左侧边栏（最通用）
+
+```
+┌──────┬─────────────────────────────┐
+│ 应用名 │  顶部条：面包屑        用户   │
+│ ─────│─────────────────────────────│
+│▎概览  │                             │  ▎ = 选中项左侧主色条
+│  订单 │        内容区（activeView）   │
+│  客户 │                             │
+│  报表 │                             │
+│ ─────│                             │
+│ ‹收起 │                             │
+└──────┴─────────────────────────────┘
+```
+
+**何时用**：顶级模块 5–12，需要常驻导航。**Canvas 等价**：antd `Layout` + `Layout.Sider` + `Menu`（`mode="inline"`）。
+
+```jsx
+// native：_customState.activeView / collapsed；styles 见下，主色可用品牌变量或自定主色
+var NAV = [
+  { key: 'overview', label: '概览', icon: ICONS.dashboard },
+  { key: 'orders',   label: '订单', icon: ICONS.list },
+  { key: 'customers',label: '客户', icon: ICONS.user },
+  { key: 'reports',  label: '报表', icon: ICONS.chart },
+];
+
+export function renderSidebar() {
+  var self = this;
+  var state = this.getCustomState();
+  var collapsed = state.collapsed;
+  var isMobile = this.utils.isMobile();
+
+  return (
+    <nav style={{
+      width: collapsed ? 56 : 216,
+      flexShrink: 0,
+      height: '100%',
+      background: '#fff',
+      borderRight: '1px solid #e5e6eb',
+      display: 'flex',
+      flexDirection: 'column',
+      transition: 'width .2s',
+    }}>
+      <div style={{ height: 52, display: 'flex', alignItems: 'center', padding: '0 16px', fontWeight: 700 }}>
+        {collapsed ? '' : '进销存中台'}
+      </div>
+      <div style={{ flex: 1, overflowY: 'auto' }}>
+        {NAV.map(function (item) {
+          var active = state.activeView === item.key;
+          return (
+            <div key={item.key}
+              onClick={function () { self.setCustomState({ activeView: item.key }); }}
+              style={{
+                display: 'flex', alignItems: 'center', gap: 10,
+                height: 40, padding: '0 16px', cursor: 'pointer',
+                borderLeft: active ? '3px solid var(--color-brand1-6)' : '3px solid transparent',
+                background: active ? 'var(--color-brand1-1)' : 'transparent',
+                color: active ? 'var(--color-brand1-6)' : '#4e5969',
+                fontWeight: active ? 600 : 400,
+              }}>
+              {self.renderIcon(item.icon, 18, active ? 'var(--color-brand1-6)' : '#86909c')}
+              {collapsed ? null : <span>{item.label}</span>}
+            </div>
+          );
+        })}
+      </div>
+      <div onClick={function () { self.setCustomState({ collapsed: !collapsed }); }}
+        style={{ height: 44, display: 'flex', alignItems: 'center', padding: '0 16px', cursor: 'pointer', color: '#86909c', borderTop: '1px solid #f2f3f5' }}>
+        {collapsed ? '›' : '‹ 收起'}
+      </div>
+    </nav>
+  );
+}
+```
+
+移动端：窄屏时侧边栏改为默认隐藏，顶部条放汉堡按钮，点开滑出为覆盖层抽屉（`position: fixed` + 半透明遮罩），选完自动收起。
+
+## 形态 2：顶部导航（水平）
+
+```
+┌─────────────────────────────────────┐
+│ 应用名   概览  订单  客户  报表    用户 │  选中项底部 2px 主色下划线
+├─────────────────────────────────────┤
+│            内容区（activeView）        │
+└─────────────────────────────────────┘
+```
+
+**何时用**：顶级模块 2–6、内容要占满宽度（看板/门户）。**Canvas 等价**：antd `Menu mode="horizontal"` 或 `Tabs`。
+
+```jsx
+export function renderTopnav() {
+  var self = this;
+  var state = this.getCustomState();
+  return (
+    <header style={{
+      height: 52, display: 'flex', alignItems: 'center',
+      padding: '0 20px', gap: 4,
+      background: '#fff', borderBottom: '1px solid #e5e6eb',
+    }}>
+      <span style={{ fontWeight: 700, marginRight: 24 }}>营销中台</span>
+      {NAV.map(function (item) {
+        var active = state.activeView === item.key;
+        return (
+          <div key={item.key}
+            onClick={function () { self.setCustomState({ activeView: item.key }); }}
+            style={{
+              height: 52, display: 'flex', alignItems: 'center', padding: '0 14px', cursor: 'pointer',
+              color: active ? 'var(--color-brand1-6)' : '#4e5969',
+              fontWeight: active ? 600 : 400,
+              borderBottom: active ? '2px solid var(--color-brand1-6)' : '2px solid transparent',
+            }}>
+            {item.label}
+          </div>
+        );
+      })}
+      <div style={{ marginLeft: 'auto', color: '#86909c' }}>管理员</div>
+    </header>
+  );
+}
+```
+
+移动端：把中间菜单收进右侧汉堡下拉，只留应用名 + 汉堡。
+
+## 形态 3：顶部 + 侧边混合
+
+```
+┌─────────────────────────────────────┐
+│ 应用名   销售域 │ 采购域 │ 财务域    用户 │  顶部=一级域
+├──────┬──────────────────────────────┤
+│▎订单  │                             │  侧边=当前域的子模块
+│  客户 │        内容区                 │
+│  合同 │                             │
+└──────┴──────────────────────────────┘
+```
+
+**何时用**：两级结构、模块多的复杂应用（顶部切「域」，侧边切该域「子模块」）。顶部选中切换时，侧边 `NAV` 换成该域的子项，`activeView` 重置到该域第一项。**Canvas 等价**：antd `Layout`（Header + Sider + Content）。
+
+## 形态 4：浮动导航（悬浮胶囊 / Dock）
+
+```
+        ┌───────────────────────┐
+        │      内容/大屏区        │
+        │                       │
+        │   ╭─────────────────╮ │  悬浮胶囊：固定底部居中，
+        │   │ 概览 订单 客户 报表│ │  半透明底 + 模糊，不占布局
+        │   ╰─────────────────╯ │
+        └───────────────────────┘
+```
+
+**何时用**：沉浸/大屏/展示页，chrome 要极简、导航不常驻。**Canvas 等价**：自定义悬浮容器或 antd `FloatButton.Group`。
+
+```jsx
+export function renderFloatDock() {
+  var self = this;
+  var state = this.getCustomState();
+  return (
+    <div style={{
+      position: 'fixed', left: '50%', bottom: 24, transform: 'translateX(-50%)',
+      display: 'flex', gap: 4, padding: 6, zIndex: 50,
+      background: 'rgba(255,255,255,.82)', backdropFilter: 'blur(12px)',
+      border: '1px solid #e5e6eb', borderRadius: 999,
+      boxShadow: '0 6px 24px rgba(0,0,0,.12)',
+    }}>
+      {NAV.map(function (item) {
+        var active = state.activeView === item.key;
+        return (
+          <div key={item.key}
+            onClick={function () { self.setCustomState({ activeView: item.key }); }}
+            style={{
+              display: 'flex', alignItems: 'center', gap: 6,
+              height: 36, padding: '0 14px', cursor: 'pointer', borderRadius: 999,
+              background: active ? 'var(--color-brand1-6)' : 'transparent',
+              color: active ? '#fff' : '#4e5969',
+              fontWeight: active ? 600 : 400,
+            }}>
+            {item.label}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+```
+
+注意：浮动导航**叠在内容之上**（`position: fixed` + `zIndex`），内容区底部留出安全间距别被遮住。移动端收窄胶囊或改底部标签栏。
+
+## 形态 5：标签页（叠加二级导航）
+
+一个模块内切同级视图，通常叠在侧边/顶部之下。**Canvas 等价**：antd `Tabs`。
+
+```jsx
+export function renderTabs() {
+  var self = this;
+  var state = this.getCustomState();
+  var TABS = [{ key: 'pending', label: '待处理' }, { key: 'done', label: '已完成' }];
+  return (
+    <div style={{ display: 'flex', gap: 24, borderBottom: '1px solid #e5e6eb', padding: '0 4px' }}>
+      {TABS.map(function (t) {
+        var active = state.tab === t.key;
+        return (
+          <div key={t.key}
+            onClick={function () { self.setCustomState({ tab: t.key }); }}
+            style={{
+              height: 40, display: 'flex', alignItems: 'center', cursor: 'pointer',
+              color: active ? 'var(--color-brand1-6)' : '#4e5969',
+              fontWeight: active ? 600 : 400,
+              borderBottom: active ? '2px solid var(--color-brand1-6)' : '2px solid transparent',
+            }}>
+            {t.label}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+```
+
+---
+
+## 自查清单（导航壳）
+
+- 选中态一眼可辨（主色条/下划线 + 字重），不是只靠淡变色。
+- 导航项 = 功能性 SVG + 文字，同页一套图标风格，无 emoji、无每项装饰图标。
+- 顶部/侧边有应用名或面包屑，用户知道「在哪、能去哪」，不是孤零零一个返回按钮。
+- 内容区按 `activeView` 切换（native `_customState` / Canvas `useState`/hash），切换有状态、可回来。
+- 宿主页已执行 `openyida update-form-config <appType> <formUuid> false "<标题>"`，宜搭原导航不再出现。
+- 跨页跳转用 URL 模板拼；目标自定义页带 `?isRenderNav=false`，导航项的 `params` 没丢。
+- 移动端：侧边→抽屉、顶部→汉堡、浮动→底部胶囊，走 `isMobile` 响应式。
+- 浮动导航留出内容安全间距，不遮关键信息。

package/yida-skills/skills/yida-page-config/SKILL.md

@@ -79,6 +79,7 @@ openyida update-form-config <appType> <formUuid> false "<页面标题>"
 ```
 
 > 看板/驾驶舱新建页面优先使用 `openyida create-page <appType> "<页面名>" --mode dashboard`，会一步完成导航隐藏并输出无左侧工作台栏的沉浸式 URL。
+> 若页面内使用 `yida-nav-shell` 自绘导航壳，本命令是发布后的必做配置；同时导航壳里的自定义页目标 URL 必须追加 `?isRenderNav=false`，否则切到目标页时会重新出现宜搭原导航。
 
 ## URL 格式
 

package/yida-skills/skills/yida-page-uiux/SKILL.md

@@ -0,0 +1,68 @@
+---
+name: yida-page-uiux
+description: >
+  宜搭自定义页面「视觉方向决策」技能。在动手写 JSX 之前，先按页面类型（工作台/看板/列表/详情/官网落地页）锁定一套差异化、去 AI 味的视觉方向，避免首次生成就套用「统一灰白底 + 8px 圆角卡片 + 蓝色强调」的 AI 模板脸。
+  本技能只产出「视觉方向决策块」，不写代码；具体 token/组件数值由 yida-custom-page 的 design-system.md 落地。
+  当用户要求「做个自定义页面/工作台/看板/门户/首页/官网/落地页/展示页」并在意好看，或明确说「美化/好看一点/UI/视觉/太丑/有 AI 味/去 AI 味/重新设计风格」时触发。
+---
+
+# yida-page-uiux — 自定义页面视觉方向决策
+
+## 定位（先读这段）
+
+本技能是**视觉方向决策层**，不是编码层：
+
+- **产出**：一个「视觉方向决策块」（纯文字方向 + 差异化说明），交给 `yida-custom-page` / `yida-canvas-custom-page` 按各自 `design-system.md` 的 token/组件落地。
+- **不产出**：JSX 代码、具体像素数值表（那是 `design-system.md` 的职责）。
+- **为什么存在**：`design-system.md` 是「安全平庸」的 token 层——直接套用会得到千篇一律的 AI 模板脸。本技能在写码前先强制做**差异化视觉决策**，让每个页面有自己的性格。
+
+> **一句话分工**：`yida-page-uiux` 定**方向与差异** → `design-system.md` 提供**数值与组件** → `yida-custom-page` / `yida-canvas-custom-page` 写 **JSX**。
+
+## 重要边界：自定义页面不做表单/录入 UI
+
+- 自定义页面**只做展示、工具、看板、详情**，**不手写表单控件**（输入框群、字段校验、提交表单）。
+- 需要录入/提交 → 一律走宜搭**原生表单**（`yida-create-form-page` 建普通表单 / `yida-create-process` 建带审批表单）。
+- 详情页 / 列表页需要「新建 / 编辑」入口时，用既有 iframe 方式嵌入原生表单：`workbench/{formUuid}?iframe=true`（禁用 `formDetail`），不要在自定义页里重写表单。
+- 因此本技能**不含「表单页」场景**。页面类型只覆盖展示/工具/看板/详情/落地页这类自定义页。
+
+## 核心工作流（严格按顺序，不跳步）
+
+每一步的判定法、checklist、代码/模板都在 `workflow/` 对应文件里，**按需只读命中的那一个**。
+
+```
+Step 0 导航形态判定 → Step 1 页面类型 → Step 2 意图解码 → Step 3 路由 scene
+   → Step 4 视觉方向决策 → Step 5 图标与素材 → Step 6 去 AI 味自检 → 输出决策块
+```
+
+| 步骤 | 做什么 | 详细文件 | 产出 |
+|---|---|---|---|
+| **Step 0** 导航形态判定 | 应用导航是否隐藏（`isRenderNav`）？决定要不要跟应用框架融合、要不要自带导航壳 | [workflow/step-0-nav-shape.md](workflow/step-0-nav-shape.md) | 导航形态（可见/隐藏 + 壳型） |
+| **Step 1** 页面类型判定 | 锁定属于哪一类（workbench/dashboard/list/detail/landing），决定后续所有决策 | [workflow/step-1-page-type.md](workflow/step-1-page-type.md) | 页面类型 + 判定依据 |
+| **Step 2** 意图解码 | 提取 2-3 个气质关键词 + 3-5 条项目特定设计原则 | [workflow/step-2-intent-decode.md](workflow/step-2-intent-decode.md) | 气质关键词 + 设计原则 |
+| **Step 3** 路由到 scene | 只读命中的那一个 `references/scenes/*.md`，拿骨架/密度/焦点/组件套餐 | [workflow/step-3-scene-routing.md](workflow/step-3-scene-routing.md) | 布局骨架 + 密度 + 焦点 |
+| **Step 4** 视觉方向决策 | 调用 `visual-decision-engine.md`，做 5 个差异化维度 + 反默认自检 | [workflow/step-4-visual-decision.md](workflow/step-4-visual-decision.md) | 差异化 5 维 + 反默认说明 |
+| **Step 5** 图标与素材 | 默认内联 SVG 语义集；iconfont 仅用户提供项目 URL 时 opt-in | [workflow/step-5-icon-and-assets.md](workflow/step-5-icon-and-assets.md) | 图标策略 |
+| **Step 6** 去 AI 味自检 | 逐条扫黑名单 + 8 问自检，任一命中即回对应 Step 修正 | [workflow/step-6-deai-selfcheck.md](workflow/step-6-deai-selfcheck.md) | 自检通过 |
+| **输出** | 汇总成「视觉方向决策块」，提示交码落地 | [workflow/output-decision-block.md](workflow/output-decision-block.md) | 视觉方向决策块 |
+
+## 核心规则（红线，任何步骤都适用）
+
+- 🚫 **严禁 emoji（FATAL）**：页面渲染的任何位置一律禁止 emoji，需要图标走功能性内联 SVG。详见 [Step 6](workflow/step-6-deai-selfcheck.md)。
+- **主色策略**：导航可见时主色跟随平台品牌 `var(--color-brand1-*)`，不自由换主色相；导航隐藏（`isRenderNav=false`）时主色相可自立。**语义色（成功/警告/错误）永远固定**。详见 [Step 0](workflow/step-0-nav-shape.md) / [Step 4](workflow/step-4-visual-decision.md)。
+- **不做表单**：见上「重要边界」。
+- **只讲方向不写码**：本技能只产出决策块，JSX 与像素数值归 `design-system.md` + `yida-custom-page`。
+
+## 参考文档
+
+| 文档 | 覆盖范围 | 何时阅读 |
+|------|---------|---------|
+| [视觉决策引擎](references/visual-decision-engine.md) | 5 个风格意图 + 反默认组合表 + 5 个差异化维度 + 强制第二选择 + 差异化自检 | Step 4 做视觉决策时（所有场景共用） |
+| [页面内自绘导航壳（独立 skill）](../yida-nav-shell/SKILL.md) | 页面隐藏应用导航后用 JSX 自建侧边/顶部/混合/浮动/标签导航壳：选型表 + 骨架 + native/Canvas 代码 + 多视图切换 | Step 0 判定导航隐藏、需自建导航壳时 |
+| [scene-workbench](references/scenes/workbench.md) | 工作台/门户首页的骨架/密度/焦点/组件套餐/去 AI 味要点 | 页面类型 = 工作台时 |
+| [scene-dashboard](references/scenes/dashboard.md) | 数据看板/驾驶舱 | 页面类型 = 看板时 |
+| [scene-list](references/scenes/list.md) | 列表/管理页 | 页面类型 = 列表时 |
+| [scene-detail](references/scenes/detail.md) | 详情/展示页（叠加详情页叙事纪律） | 页面类型 = 详情时 |
+| [scene-landing](references/scenes/landing.md) | 官网/落地页/品牌展示/产品介绍页：Section 构图、素材锚点、页面节奏 | 页面类型 = 官网落地页时 |
+| [设计规范](../yida-custom-page/references/design-system.md) | token/组件实现层：色彩/圆角/字体/间距/组件样式的具体数值 | 方向定完、交码落地时 |
+| [素材资源](../yida-custom-page/references/assets-guide.md) | 图片/图标/音效素材库、renderIcon 骨架、CDN 安全规范 | 需要图标/图片/音效时 |
+| [字段与 URL 参考](../../references/field-and-url-reference.md) | 隐藏导航 `isRenderNav=false`、各页面类型 URL 拼接模板、跨页跳转 | Step 0 判定导航形态、自带导航壳拼跳转 URL 时 |

package/yida-skills/skills/yida-page-uiux/references/scenes/dashboard.md

@@ -0,0 +1,128 @@
+# 场景：数据看板 / 驾驶舱
+
+> 面向决策者的「一屏看懂业务状态」。密度高、以数据为主角，图表服务于结论而非炫技。
+
+## 场景定位
+
+- **用户目标**：快速判断「业务健康吗 / 哪里有异常 / 趋势往哪走」。
+- **不是**：门户首页（那是 workbench，偏入口）、明细管理（那是 list）。
+- **典型业务**：销售驾驶舱、进销存看板、运营大屏、财务总览。
+
+## 布局骨架 / 信息架构
+
+先回答两个独立问题：
+
+- **Shell（壳形态）**：页面导航骨架长什么样？单页嵌入 / 顶部导航 / 侧边导航 / L 型导航 / 隐藏导航后的自绘导航壳。
+- **Archetype（页面原型）**：内容叙事怎么组织？总览 / 分析 / 监控 / 报告 / 对比 / 运营。
+
+两者正交：单页也可以做分析型，L 型壳也可以承载总览型。不要把“看板”自动理解成一屏 KPI 平铺。
+
+```
+┌─────────────────────────────────────┐
+│ 顶部：标题 + 时间范围/筛选（克制一行） │
+├─────────────────────────────────────┤
+│ KPI 卡组（4-6 个，有主次不平铺）       │  ← 最重要结论，一眼可见
+├──────────────────┬──────────────────┤
+│ 主图表（趋势/占比）│ 次图表 / 排行榜    │  ← 主大次小，非对称
+├──────────────────┴──────────────────┤
+│ 明细 / 排行 / 告警列表                 │
+└─────────────────────────────────────┘
+```
+
+移动端：KPI 改为 2 列或横向滚动，图表纵向堆叠，保证竖屏可读。
+
+## Shell 选型
+
+| Shell | 业务信号 | 宜搭落地 |
+|---|---|---|
+| `single_page` | 单一主题 / 嵌入应用导航内 / 一屏或一页讲完 | 不自建导航，内容区直接渲染 |
+| `top_nav` | 2-6 个同级专题页，层级扁平 | 导航可见时用宜搭左侧导航；导航隐藏时用 `yida-nav-shell` 顶部导航 |
+| `side_nav` | 多页面后台 / 二级菜单 / 高频切换 | 优先平台导航分组；隐藏导航时用自绘侧边栏 |
+| `l_shaped` | 功能模块 >=3 个，每模块 2-6 个页面，数据看板主流复杂形态 | 隐藏导航时用 `yida-nav-shell` 顶部+侧边混合；导航可见时拆成平台导航分组 |
+| `no_shell` | 投屏大屏 / 分享页 / 单主题沉浸展示 | `isRenderNav=false`，只保留轻量筛选和全屏信息 |
+
+选型优先级：PRD 明确 > 页面数量 > 功能模块层级 > 是否隐藏应用导航。拿不准时用 `single_page`，保持与宜搭应用框架融合。
+
+## Archetype 选型
+
+| Archetype | 适用场景 | 典型结构 |
+|---|---|---|
+| **总览型** | 管理层快速看全局 | KPI 行 → 趋势/构成图 → 明细/排行 |
+| **分析型** | 多维下钻分析 | 全局筛选 → 分组图表 → 下钻路径 → 明细表 |
+| **监控型** | 实时状态/告警 | 状态概览 → 告警列表 + 指标网格 → 小趋势 |
+| **报告型** | 周报/月报/经营复盘 | 摘要结论 → 分节图表 → 行动建议 |
+| **对比型** | 跨区域/渠道/时间对比 | 维度切换 → 并排图表 → 差异表 |
+| **运营型** | 工作台式运营看板 | 待办/活动 Feed → 快速统计 → 重点列表 |
+
+决策块里要写明 Shell + Archetype，例如「single_page + 总览型」或「l_shaped + 分析型」。
+
+## 信息密度
+
+**高**。看板要在有限空间塞下多维信息，但「高密度 ≠ 拥挤」——靠对齐、分组、留白建立秩序，别糊成一片。
+
+## 焦点（hero）元素
+
+**关键 KPI**。整个看板应有 1-2 个「最该先看」的核心指标，视觉上最突出（最大字号 / 置于左上视觉起点 / 点缀色强调）。
+
+## 组件套餐（映射 design-system.md / yida-chart）
+
+- KPI 卡：大数字（`tabular-nums`）+ 同比/环比小标 + 趋势箭头（升降用语义色）
+- 图表：ECharts，走 `yida-chart` 技能；色板**克制**，对齐平台品牌变量 + 有限辅助色
+- 排行/明细：`design-system.md` 列表行 / 紧凑表格
+- 告警：`design-system.md` 标签（tag）+ 告警红（稀缺，只给真异常）
+
+## Section 分组与数据叙事
+
+- 每个页面至少 2-4 个语义分组：核心指标 / 趋势分析 / 结构分布 / 异常告警 / 明细排行。禁止 6 张以上卡片直接铺平。
+- 每个图表要有一句能读懂的业务结论，落在卡片 footer、图表下方、页头 Callout 或页尾总结。
+- 洞察必须包含「具体数字 + 业务含义」，例如「华东区贡献 43%，环比 +5.2pp，是本月增长主因」。禁止「数据表现良好」「趋势明显」这类空话。
+- 下钻入口统一放在卡片右上角 actions 区（图标按钮），不要在卡片底部写「点击查看详情」。
+
+## 数值格式化纪律
+
+任何面向用户的数值都不能裸奔：
+
+| 位置 | 要求 |
+|---|---|
+| KPI 主值 | 紧凑量级 + 单位，例如 `¥1,234.6万`、`12.3%` |
+| 涨跌幅 | 带正负号和周期，例如 `+5.2% 环比` |
+| 图表轴 | 紧凑格式，避免轴标签溢出 |
+| 图表 tooltip | 完整精确格式，便于细看 |
+| 表格数值列 | 右对齐 + `tabular-nums` |
+| 洞察文案 | 数字 + 业务解释，不只报数 |
+
+## 本场景专属去 AI 味要点
+
+- ❌ **禁每张 KPI 卡配彩色渐变背景 + 一枚图标**：这是最典型的 AI 看板脸。卡片用中性底 + 数字主角，图标克制或不用。
+- ❌ **禁图表色板高饱和乱撞**：每个系列都亮色 = 廉价感。用同色系深浅 + 1 个强调色区分主次。
+- ❌ **禁 KPI 等大平铺**：4-6 个指标一样大 = 没有重点。核心 KPI 要更大/更突出。
+- ❌ **禁裸数字**：`12345678` 直接出现在 KPI、坐标轴、tooltip、表格或洞察里都算视觉 bug。
+- ❌ **禁无分组卡片瀑布**：卡片必须归入语义 section，让用户 5 秒内看懂页面有几大块。
+- ✅ **图表服务于结论**：每个图表要能回答一个业务问题；纯装饰的图别放。
+- ✅ **升降有语义**：增长/下降用语义色 + 方向箭头，不要只给个数字。
+
+## 视觉方向决策块示例
+
+```markdown
+### 【视觉方向决策】
+- 页面类型：dashboard（用户诉求是"进销存看板，老板一眼看库存和销售"）
+- 气质关键词：专业、冷静、数据驱动
+- 项目特定原则：① 库存告警（低于安全库存）必须最醒目；② 告警红只留给库存/逾期，趋势升降用绿/灰；③ 金额统一 tabular-nums 对齐
+- 布局骨架：标题+时间范围 → 4 KPI(库存周转为核心，最大) → 主趋势图 + 右侧 TOP 商品 → 低库存告警表
+- 信息密度：高（多维一屏，靠对齐分组建立秩序）
+- 视觉焦点：库存周转 KPI + 低库存告警
+- 场景专项策略：single_page + 总览型；分组为核心指标/销售趋势/商品排行/低库存告警；每张图表 footer 写一句数据洞察，金额和库存全部格式化
+
+### 【差异化 5 维】
+1. 辅助/强调色：趋势用墨绿/灰，告警用红（仅库存/逾期）；图表同色系深浅
+2. 中性冷暖偏色：冷灰基底（数据专业感）
+3. 圆角性格：微圆（克制，不喧宾夺主）
+4. 排版性格：KPI 超大字 tabular-nums，核心 KPI 再大一号；标签用弱化文字
+5. 装饰母题：KPI 左侧细色条标类别 + 非对称主次图表布局
+
+### 【反默认说明】
+KPI 用中性底 + 数字主角（非彩色渐变卡+图标），图表单色系深浅（非高饱和撞色），KPI 有主次不平铺——3 维偏离默认看板脸。
+
+### 【图标策略】
+内联 SVG，仅趋势箭头/告警用图标，KPI 卡标题不配装饰图标。
+```

package/yida-skills/skills/yida-page-uiux/references/scenes/detail.md

@@ -0,0 +1,79 @@
+# 场景：详情 / 展示页
+
+> 围绕**单个对象**做深度呈现的页面。信息不多但要「讲清楚、有质感」，最容易被做成 AI 味模板脸——本场景**叠加详情页专属纪律**。
+
+## 场景定位
+
+- **用户目标**：深入了解某一个对象的全貌（一个订单、一个商品、一个客户、一份报告）。
+- **不是**：一堆对象的列表（那是 list）、聚合指标（那是 dashboard）。
+- **典型业务**：订单详情、商品详情、客户档案、项目详情、报告展示页。
+
+## 布局骨架 / 信息架构
+
+单对象的**叙事编排**——不是字段的机械罗列，而是「先看什么、再看什么」的顺序设计：
+
+```
+┌─────────────────────────────────────┐
+│ 主区（hero）：对象核心身份 + 主图/主数据 │  ← 完整展示，不裁切、不发光
+├─────────────────────────────────────┤
+│ 关键信息组（分章节，非平铺字段墙）     │  ← 按业务逻辑分组，有主次
+├──────────────────┬──────────────────┤
+│ 主要内容（叙事）  │ 侧栏（元信息/操作） │  ← 非对称，主 70% 次 30%
+├──────────────────┴──────────────────┤
+│ 关联对象 / 时间线 / 附件               │
+└─────────────────────────────────────┘
+```
+
+移动端：全部纵向堆叠，主区在最前，侧栏元信息下沉。
+
+## 信息密度
+
+**低—中**。详情页是「少而精」——单对象信息本就不多，靠**留白、字号跨度、分组**造质感，别硬塞满或堆装饰凑版面。
+
+## 焦点（hero）元素
+
+**对象的核心身份 + 主图/主数据**。用户进来第一眼要确认「这就是我要找的那个对象」，主区必须完整、突出、无干扰。
+
+## 组件套餐（映射 design-system.md / component-jsx-guide.md）
+
+- 主区：大字号对象名（标题与正文字号差 **≥2.5×**）+ 主图完整展示 / 核心数据大字
+- 章节：`design-system.md` 卡片分组，章节标题**具体到该对象**（不是「基本信息」这种万能词）
+- 字段：标签-值成对，弱化标签、加重值；金额/数量 `tabular-nums`
+- 时间线/关联：`design-system.md` 列表行 / 时间线
+- 操作：主操作按钮突出，次要操作弱化；需录入走 `iframe workbench/{formUuid}?iframe=true`
+
+## 本场景专属去 AI 味要点（叠加详情页纪律）
+
+- ✅ **主图/主数据完整展示**：hero 对象不裁切、不加彩色发光、不套渐变遮罩；用留白和对齐凸显，不用特效。
+- ✅ **≥2 种非发光装饰手法**：如左侧主色竖条、章节起始细线、超大字号视觉锤、单色分区、非对称双栏——**禁彩色发光/半透明彩色 blob/渐变文字**。
+- ✅ **反模板叙事顺序**：不要「标题→基本信息→详细信息→附件」这套万能模板顺序；按**这个对象**最该先讲的逻辑排（如商品先讲卖点/主图，订单先讲状态/金额）。
+- ✅ **字号跨度拉开**：主标题与正文 **≥2.5×**，制造视觉层级，别全页一个字号靠加粗硬撑。
+- ✅ **章节标题具体化**：用「本单发货记录」而非「物流信息」，用「客户履约情况」而非「其他信息」——标题带对象语境。
+- ❌ **禁字段墙**：一屏平铺 20 个 label:value = 没消化过的数据库导出。按业务分组、有主次、隐藏低频字段。
+- ❌ **禁每章节标题配一枚装饰图标**：这是最典型详情页 AI 味。图标只在功能处（操作/状态），标题纯文字。
+- ❌ **禁 AI 万能文案 / emoji**：不写「让我们一起了解…」「✨核心亮点」这类填充话术。
+
+## 视觉方向决策块示例
+
+```markdown
+### 【视觉方向决策】
+- 页面类型：detail（用户诉求是"商品详情页，展示单个商品的全貌"）
+- 气质关键词：精致、有质感、克制
+- 项目特定原则：① 主图必须完整展示不裁切；② 卖点/规格先于流水信息；③ 价格用大字 tabular-nums 当视觉锤
+- 布局骨架（反模板叙事）：主图+品名+价格(hero) → 核心卖点(3点) → 规格参数(分组) → 主内容左70%(详情描述) + 右30%(库存/操作) → 关联商品
+- 信息密度：低-中（留白 + 字号跨度造质感）
+- 视觉焦点：主图 + 品名 + 价格
+
+### 【差异化 5 维】
+1. 辅助/强调色：价格用点缀色强调（暖金=品质感），规格标签用中性；不满屏上色
+2. 中性冷暖偏色：暖灰基底（商品展示的人文/质感气质）
+3. 圆角性格：标准圆（现代、精致，主图卡片微圆不喧宾夺主）
+4. 排版性格：品名大字 vs 参数小字跨度 ≥2.5×；价格 tabular-nums；大标题微收 letter-spacing
+5. 装饰母题：章节起始细线 + 主图完整留白展示 + 非对称双栏（左详情右操作）
+
+### 【反默认说明】
+用暖灰 + 字号跨度 + 非对称叙事替代「灰白底 + 均匀字号 + 字段墙 + 每章配图标」，主图完整展示无发光——4 维偏离默认详情脸。
+
+### 【图标策略】
+内联 SVG，仅操作按钮（加购/收藏/分享）用图标；章节标题（卖点/规格/详情）纯文字不配装饰图标。
+```