create-yoya-ui 0.6.2 → 0.7.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-yoya-ui",
-  "version": "0.6.2",
+  "version": "0.7.5",
   "description": "Scaffold a new yoya-ui project with Vite: basic template (SPA) or SSR template (renderPage + hydrateOrMount).",
   "type": "module",
   "bin": {

package/templates/admin/README.md

@@ -56,7 +56,7 @@ src/
     dashboard/                  工作台
       overview/                 数据概览
         pages/dashboard-overview-page.js 页面编排：核心指标看板 + 趋势卡 + 图表 + 资源使用
-        components/dashboard-chart.js     vChart 内置 SVG 适配器（柱状图 / 折线图）
+        components/dashboard-chart.js     DashboardChart 图表卡片 + 模板自带的 SVG 适配器（柱状图 / 折线图）
       todos/                    待办审批（简单页示例）
         pages/todo-approval-page.js
     ops/                        运维

package/templates/admin/RULES.md

@@ -72,8 +72,9 @@ export default {
 - 导航字段（`menus` / `activeModuleKey` / `activePath`）是 `ref`：`router.subscribe → state.syncFromPath(path)` 只把路径写回信号
 - 顶栏 / 侧栏从状态**派生高亮**：菜单区先 `rebuildable()` 再读信号（模块 / 路径变化自动重建），组件不持有自己的激活状态
 - `AdminShell` 只做装配：布局组装，不直接操作 router，也不需要订阅回调转发
-- 组件统一写法：节点在 `render()` 内声明式构建，不保留 `applyState()` 这类手动同步入口；没有额外行为要定义（无内部状态、无对外命令方法）的组件直接返回 ViewNode 即可，不必包一层 `render()`
-- 组件需要对外命令方法时用 `vNode((api) => 视图)`：命令收到 `api` 上（`api.reload = () => { …; return api }`），工厂挂到返回的节点并校验重名；自带边界写 `api.whenFailed`，其余节点级能力（`mountable()` / `rebuildable()`）链在节点上
+- **组件只有两种形态**：没有额外行为要定义（无内部状态、无对外命令方法）的组件**直接返回 ViewNode**（形态 A 薄工厂，不必包一层 `render()`）；需要对外命令方法时用 **`vNode((api) => 视图)`**（形态 B）。`{ render(), … }` 对象组件已退场，新组件不要写
+- 形态 B 的命令写在 `api` 上：`api.reload = () => { …; return api }`（`return api` 等价于返回节点，链式两端都通）；命令名撞节点 API（`child` / `destroy` / `renderDom` …）引擎直接报错，不静默覆盖；自带错误边界写 `api.whenFailed`，其余节点级能力（`mountable()` / `rebuildable()`）链在节点上
+- **页面与外壳**：页面文件（`pages/*-page.js`）与外壳（`AdminShell`）同样是组件——没有命令方法就返回 ViewNode；页面需要对外方法（如 `refresh()`）时按形态 B 写
 
 ## 7. 页面规则
 

package/templates/admin/package.json

@@ -3,6 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "type": "module",
+  "browserslist": [
+    "chrome >= 123",
+    "edge >= 123",
+    "firefox >= 120",
+    "safari >= 17.5",
+    "ios_saf >= 17.5"
+  ],
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -10,7 +17,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@yoyaflow/yoya-ui": "^0.6.2"
+    "@yoyaflow/yoya-core": "0.7.5",
+    "@yoyaflow/yoya-ui": "0.7.5"
   },
   "devDependencies": {
     "typescript": "^7.0.2",

package/templates/admin/src/api/domain.api.d.ts

@@ -1,5 +1,5 @@
 /** 领域请求入口类型声明（对应 domain.api.js）。 */
-import type { RequestCommand } from '@yoyaflow/yoya-ui/api';
+import type { RequestCommand } from '@yoyaflow/yoya-core/api';
 
 export function mockRequest(
   method: string,

package/templates/admin/src/api/domain.api.js

@@ -1,5 +1,5 @@
 // 领域请求入口：统一 Result 解析 + mock / 真实传输切换。
-import { configureRequest, Result } from '@yoyaflow/yoya-ui/api';
+import { configureRequest, Result } from '@yoyaflow/yoya-core/api';
 import { fetchSubmit } from './fetch.api.js';
 
 const mockHandlers = new Map();

package/templates/admin/src/api/fetch.api.d.ts

@@ -1,4 +1,4 @@
 /** 原始传输层类型声明（对应 fetch.api.js）。 */
-import type { RequestCommand } from '@yoyaflow/yoya-ui/api';
+import type { RequestCommand } from '@yoyaflow/yoya-core/api';
 
 export function fetchSubmit(req: RequestCommand): Promise<unknown>;

package/templates/admin/src/features/dashboard/overview/components/dashboard-chart.js

@@ -4,7 +4,16 @@ const VIEW_BOX = { height: 260, width: 640 };
 const PAD = { bottom: 34, left: 44, right: 16, top: 14 };
 const SERIES_COLORS = ['#2563eb', '#16a34a', '#f59e0b', '#dc2626', '#8b5cf6'];
 
-// vChart 内置 SVG 适配器：bar 柱状图 / line 折线图，零外部依赖。
+/**
+ * 图表卡片（形态 A 薄工厂）：vCard 外壳 + vChart 宿主，没有对外命令方法。
+ *
+ * `vChart` 只提供宿主与**适配器契约**（`init` / `update` / `resize` / `destroy`），自身不带图表库实现
+ * （ECharts / Three.js 另有官方适配器组件 `vEchart` / `vThree`）；
+ * 下面这份 SVG 适配器是本模板自带的零依赖实现（bar 柱状图 / line 折线图）。
+ * 适配器画出来的内容交给引擎落位：`context.chart.replaceChildren(节点…)`——`chart` 是组件节点，
+ * `replaceChildren` 收的是**视图节点**（DOM 落盘与清理由引擎负责），不要自己调 `renderDom()`。
+ * 数据要跟着状态变时，把句柄放进 `data` 即可（`vChart` 的 `data` 收句柄）。
+ */
 export function DashboardChart({
   labels = [],
   series = [],
@@ -12,51 +21,42 @@ export function DashboardChart({
   type = 'bar',
   height = 280
 } = {}) {
-  const chart = vChart({
-    adapter: createSvgAdapter(),
-    data: { labels, series },
-    height,
-    options: { type }
-  });
-
-  return {
-    render() {
-      return vCard((card) => {
-        card.vCardHeader(title);
-        card.vCardBody((body) => {
-          body.div((host) => {
-            host.style({ minWidth: '0', width: '100%' });
-            host.child(chart);
-          });
-        });
+  return vCard((card) => {
+    card.vCardHeader(title);
+    card.vCardBody((body) => {
+      body.div((host) => {
+        host.style({ minWidth: '0', width: '100%' });
+        host.child(
+          vChart({
+            adapter: svgChartAdapter,
+            data: { labels, series },
+            height,
+            options: { type }
+          })
+        );
       });
-    },
-    update(next) {
-      chart.data(next);
-      return this;
-    }
-  };
+    });
+  });
 }
 
-function createSvgAdapter() {
-  return {
-    init(host, context) {
-      const instance = { host };
-      renderChart(instance, context);
-      return instance;
-    },
-    update(instance, context) {
-      renderChart(instance, context);
-    },
-    resize() {},
-    destroy() {}
-  };
-}
+/** 无状态适配器：整份图表由 renderChart 按 context 重画，可以所有实例共用一份。 */
+const svgChartAdapter = {
+  init(_host, context) {
+    renderChart(context);
+    return {};
+  },
+  update(_instance, context) {
+    renderChart(context);
+  },
+  resize() {},
+  destroy() {}
+};
 
-function renderChart(instance, context) {
+function renderChart(context) {
   const root = buildChartSvg(context.data, context.options);
   const legend = buildLegend(context.data?.series ?? []);
-  instance.host.replaceChildren(legend.renderDom(), root.renderDom());
+  // 换子节点走引擎口子：组件节点写的是它根元素的孩子们（旧内容连带销毁，不用自己碰 DOM）
+  context.chart.replaceChildren(legend, root);
 }
 
 function buildLegend(series) {

package/templates/admin/src/features/dashboard/overview/pages/dashboard-overview-page.js

@@ -4,198 +4,195 @@ import { DashboardChart } from '../components/dashboard-chart.js';
 const weekLabels = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
 
 export function DashboardOverviewPage() {
-  return {
-    render() {
-      return vstack({ gap: '16px' }, (stack) => {
-        stack.h2('数据概览');
+  // 页面也是组件：没有对外命令方法 → 形态 A 薄工厂，直接返回视图节点
+  return vstack({ gap: '16px' }, (stack) => {
+    stack.h2('数据概览');
 
-        stack.vCard((card) => {
-          card.vCardHeader('核心指标');
-          card.vCardBody((body) => {
-            body.vDigitalBoard((board) => {
-              board.columns(4);
-              board.vDigitalBoardItem((item) => {
-                item.label('服务总数');
-                item.value('128');
-                item.unit('个');
-                item.trend('+12 本月');
-                item.trendUp(true);
-                item.icon('🖥️');
-              });
-              board.vDigitalBoardItem((item) => {
-                item.label('运行中');
-                item.value('96');
-                item.unit('个');
-                item.trend('+8 本周');
-                item.trendUp(true);
-                item.tone('success');
-                item.icon('✅');
-              });
-              board.vDigitalBoardItem((item) => {
-                item.label('异常告警');
-                item.value('5');
-                item.unit('个');
-                item.trend('-2 今日');
-                item.trendUp(false);
-                item.tone('danger');
-                item.icon('⚠️');
-              });
-              board.vDigitalBoardItem((item) => {
-                item.label('平均响应');
-                item.value('243');
-                item.unit('ms');
-                item.trend('-18 今日');
-                item.trendUp(true);
-                item.tone('warning');
-                item.icon('⏱️');
-              });
-            });
+    stack.vCard((card) => {
+      card.vCardHeader('核心指标');
+      card.vCardBody((body) => {
+        body.vDigitalBoard((board) => {
+          board.columns(4);
+          board.vDigitalBoardItem((item) => {
+            item.label('服务总数');
+            item.value('128');
+            item.unit('个');
+            item.trend('+12 本月');
+            item.trendUp(true);
+            item.icon('🖥️');
           });
-        });
-
-        stack.div((trends) => {
-          trends.style({
-            display: 'grid',
-            gap: '12px',
-            gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))'
+          board.vDigitalBoardItem((item) => {
+            item.label('运行中');
+            item.value('96');
+            item.unit('个');
+            item.trend('+8 本周');
+            item.trendUp(true);
+            item.tone('success');
+            item.icon('✅');
           });
-          trends.child(
-            vTrendCard({
-              data: [12, 15, 11, 18, 16, 21, 24],
-              delta: '+6.4%',
-              title: '今日请求',
-              tone: 'primary',
-              unit: 'k',
-              up: true,
-              value: '84.2'
-            })
-          );
-          trends.child(
-            vTrendCard({
-              data: [320, 290, 310, 270, 260, 248, 243],
-              delta: '-18 今日',
-              title: '平均响应',
-              tone: 'success',
-              unit: 'ms',
-              up: true,
-              value: '243'
-            })
-          );
-          trends.child(
-            vTrendCard({
-              data: [6, 7, 4, 3, 5, 2, 2],
-              delta: '-5 较昨日',
-              title: '故障次数',
-              tone: 'danger',
-              unit: '次',
-              up: false,
-              value: '2'
-            })
-          );
-        });
-
-        stack.div((charts) => {
-          charts.style({
-            display: 'grid',
-            gap: '12px',
-            gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))'
+          board.vDigitalBoardItem((item) => {
+            item.label('异常告警');
+            item.value('5');
+            item.unit('个');
+            item.trend('-2 今日');
+            item.trendUp(false);
+            item.tone('danger');
+            item.icon('⚠️');
+          });
+          board.vDigitalBoardItem((item) => {
+            item.label('平均响应');
+            item.value('243');
+            item.unit('ms');
+            item.trend('-18 今日');
+            item.trendUp(true);
+            item.tone('warning');
+            item.icon('⏱️');
           });
-          charts.child(
-            DashboardChart({
-              labels: weekLabels,
-              series: [{ name: '请求量', data: [62, 71, 58, 84, 92, 76, 88] }],
-              title: '近 7 日请求量',
-              type: 'bar'
-            })
-          );
-          charts.child(
-            DashboardChart({
-              labels: weekLabels,
-              series: [
-                { name: '错误数', data: [8, 12, 7, 15, 10, 6, 9], color: '#dc2626' },
-                { name: '恢复数', data: [6, 10, 5, 12, 8, 5, 8], color: '#16a34a' }
-              ],
-              title: '近 7 日错误与恢复',
-              type: 'line'
-            })
-          );
         });
+      });
+    });
 
-        stack.div((bottom) => {
-          bottom.style({
-            display: 'grid',
-            gap: '12px',
-            gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))'
-          });
-          bottom.vCard((card) => {
-            card.vCardHeader('资源使用');
-            card.vCardBody((body) => {
-              body.hstack((row) => {
-                row.style({ flexWrap: 'wrap', gap: '20px' });
-                row.child(vRingStat({ label: '成功率', percent: 99, tone: 'success' }));
-                row.child(
-                  vRingStat({ label: '容量使用', percent: 68, tone: 'primary', value: '680 GB' })
-                );
-                row.div((box) => {
-                  box.style({ textAlign: 'center' });
-                  box.child(vGauge({ unit: '%', value: 72, tone: 'warning' }));
-                  box.p((text) => {
-                    text.style({
-                      color: 'var(--yoya-color-text-muted, #64748b)',
-                      fontSize: '12px'
-                    });
-                    text.child('CPU 使用率');
-                  });
-                });
-                row.div((box) => {
-                  box.style({ textAlign: 'center' });
-                  box.child(vGauge({ unit: '%', value: 58, tone: 'primary' }));
-                  box.p((text) => {
-                    text.style({
-                      color: 'var(--yoya-color-text-muted, #64748b)',
-                      fontSize: '12px'
-                    });
-                    text.child('内存使用率');
-                  });
+    stack.div((trends) => {
+      trends.style({
+        display: 'grid',
+        gap: '12px',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))'
+      });
+      trends.child(
+        vTrendCard({
+          data: [12, 15, 11, 18, 16, 21, 24],
+          delta: '+6.4%',
+          title: '今日请求',
+          tone: 'primary',
+          unit: 'k',
+          up: true,
+          value: '84.2'
+        })
+      );
+      trends.child(
+        vTrendCard({
+          data: [320, 290, 310, 270, 260, 248, 243],
+          delta: '-18 今日',
+          title: '平均响应',
+          tone: 'success',
+          unit: 'ms',
+          up: true,
+          value: '243'
+        })
+      );
+      trends.child(
+        vTrendCard({
+          data: [6, 7, 4, 3, 5, 2, 2],
+          delta: '-5 较昨日',
+          title: '故障次数',
+          tone: 'danger',
+          unit: '次',
+          up: false,
+          value: '2'
+        })
+      );
+    });
+
+    stack.div((charts) => {
+      charts.style({
+        display: 'grid',
+        gap: '12px',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))'
+      });
+      charts.child(
+        DashboardChart({
+          labels: weekLabels,
+          series: [{ name: '请求量', data: [62, 71, 58, 84, 92, 76, 88] }],
+          title: '近 7 日请求量',
+          type: 'bar'
+        })
+      );
+      charts.child(
+        DashboardChart({
+          labels: weekLabels,
+          series: [
+            { name: '错误数', data: [8, 12, 7, 15, 10, 6, 9], color: '#dc2626' },
+            { name: '恢复数', data: [6, 10, 5, 12, 8, 5, 8], color: '#16a34a' }
+          ],
+          title: '近 7 日错误与恢复',
+          type: 'line'
+        })
+      );
+    });
+
+    stack.div((bottom) => {
+      bottom.style({
+        display: 'grid',
+        gap: '12px',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))'
+      });
+      bottom.vCard((card) => {
+        card.vCardHeader('资源使用');
+        card.vCardBody((body) => {
+          body.hstack((row) => {
+            row.style({ flexWrap: 'wrap', gap: '20px' });
+            row.child(vRingStat({ label: '成功率', percent: 99, tone: 'success' }));
+            row.child(
+              vRingStat({ label: '容量使用', percent: 68, tone: 'primary', value: '680 GB' })
+            );
+            row.div((box) => {
+              box.style({ textAlign: 'center' });
+              box.child(vGauge({ unit: '%', value: 72, tone: 'warning' }));
+              box.p((text) => {
+                text.style({
+                  color: 'var(--yoya-color-text-muted, #64748b)',
+                  fontSize: '12px'
                 });
+                text.child('CPU 使用率');
               });
             });
-          });
-          bottom.vCard((card) => {
-            card.vCardHeader('最近动态');
-            card.vCardBody((body) => {
-              body.child(
-                vTimeline((timeline) => {
-                  timeline.vTimelineItem((item) => {
-                    item.status('success');
-                    item.title('服务发布成功');
-                    item.time('09:32 · 2026-09-01');
-                    item.content((box) => box.p('api-gateway v2.4.1 已上线，金丝雀批次全部通过。'));
-                  });
-                  timeline.vTimelineItem((item) => {
-                    item.status('processing');
-                    item.title('滚动发布中');
-                    item.time('09:20 · 2026-09-01');
-                    item.content('web-console 正在按 5% 批次滚动。');
-                  });
-                  timeline.vTimelineItem((item) => {
-                    item.status('warning');
-                    item.title('容量预警');
-                    item.time('08:47 · 2026-09-01');
-                    item.content('redis 内存使用率接近 80%。');
-                  });
-                  timeline.vTimelineItem((item) => {
-                    item.status('danger');
-                    item.title('告警已恢复');
-                    item.time('08:15 · 2026-09-01');
-                    item.content('数据库连接池告警自动恢复。');
-                  });
-                })
-              );
+            row.div((box) => {
+              box.style({ textAlign: 'center' });
+              box.child(vGauge({ unit: '%', value: 58, tone: 'primary' }));
+              box.p((text) => {
+                text.style({
+                  color: 'var(--yoya-color-text-muted, #64748b)',
+                  fontSize: '12px'
+                });
+                text.child('内存使用率');
+              });
             });
           });
         });
       });
-    }
-  };
+      bottom.vCard((card) => {
+        card.vCardHeader('最近动态');
+        card.vCardBody((body) => {
+          body.child(
+            vTimeline((timeline) => {
+              timeline.vTimelineItem((item) => {
+                item.status('success');
+                item.title('服务发布成功');
+                item.time('09:32 · 2026-09-01');
+                item.content((box) => box.p('api-gateway v2.4.1 已上线，金丝雀批次全部通过。'));
+              });
+              timeline.vTimelineItem((item) => {
+                item.status('processing');
+                item.title('滚动发布中');
+                item.time('09:20 · 2026-09-01');
+                item.content('web-console 正在按 5% 批次滚动。');
+              });
+              timeline.vTimelineItem((item) => {
+                item.status('warning');
+                item.title('容量预警');
+                item.time('08:47 · 2026-09-01');
+                item.content('redis 内存使用率接近 80%。');
+              });
+              timeline.vTimelineItem((item) => {
+                item.status('danger');
+                item.title('告警已恢复');
+                item.time('08:15 · 2026-09-01');
+                item.content('数据库连接池告警自动恢复。');
+              });
+            })
+          );
+        });
+      });
+    });
+  });
 }

package/templates/admin/src/features/system/dicts/api/dict.mgr.d.ts

@@ -1,5 +1,5 @@
 /** 字典管理请求命令类型声明（对应 dict.mgr.js）。 */
-import { RequestBase } from '@yoyaflow/yoya-ui/api';
+import { RequestBase } from '@yoyaflow/yoya-core/api';
 import Dicts, { DictStatus } from './dict.views.js';
 
 type DictTypeInstance = InstanceType<typeof Dicts.DictTypeItem>;

package/templates/admin/src/features/system/dicts/api/dict.mgr.js

@@ -1,5 +1,5 @@
 // 字典管理请求命令：字典类型与字典项。
-import { RequestBase } from '@yoyaflow/yoya-ui/api';
+import { RequestBase } from '@yoyaflow/yoya-core/api';
 import Dicts from './dict.views.js';
 
 class QueryTypes extends RequestBase {

package/templates/admin/src/features/system/dicts/api/dict.state.d.ts

@@ -1,6 +1,6 @@
 /** 字典页状态类类型声明（对应 dict.state.js）。 */
 import type { SignalHandle } from '@yoyaflow/yoya-ui';
-import type { Result } from '@yoyaflow/yoya-ui/api';
+import type { Result } from '@yoyaflow/yoya-core/api';
 import Dicts from './dict.views.js';
 
 type DictTypeInstance = InstanceType<typeof Dicts.DictTypeItem>;

package/templates/admin/src/features/system/dicts/components/dict-editor-dialog.js

@@ -1,4 +1,4 @@
-import { computed, toast, vConfirm, vDialog, vText, vTr } from '@yoyaflow/yoya-ui';
+import { computed, toast, vConfirm, vDialog, vNode, vText, vTr } from '@yoyaflow/yoya-ui';
 import { fieldValue } from '../../../../shared/state.rows.js';
 import { RowActionButton } from '../../../../shared/ui.buttons.js';
 import { DictItemFormDialog } from './dict-item-form-dialog.js';
@@ -179,13 +179,17 @@ export function DictEditorDialog({ state, onSubmit }) {
     onSubmit(editingId, form.values()).then(() => dialog.close());
   }
 
-  return {
-    render() {
-      return dialog;
-    },
-    open,
-    close() {
+  // 有对外命令方法（open / close）→ 形态 B：命令写在 api 上，视图就是自己的弹窗节点
+  return vNode((api) => {
+    api.open = (type = null) => {
+      open(type);
+      return api;
+    };
+    api.close = () => {
       dialog.close();
-    }
-  };
+      return api;
+    };
+
+    return dialog;
+  });
 }

package/templates/admin/src/features/system/dicts/components/dict-item-form-dialog.js

@@ -1,4 +1,4 @@
-import { vDialog } from '@yoyaflow/yoya-ui';
+import { vDialog, vNode } from '@yoyaflow/yoya-ui';
 import { fieldValue } from '../../../../shared/state.rows.js';
 import { statusOptions } from '../utils/options.js';
 
@@ -74,13 +74,17 @@ export function DictItemFormDialog({ onSubmit }) {
     dialog.close();
   }
 
-  return {
-    render() {
-      return dialog;
-    },
-    open,
-    close() {
+  // 有对外命令方法（open / close）→ 形态 B：命令写在 api 上，视图就是自己的弹窗节点
+  return vNode((api) => {
+    api.open = (item = null) => {
+      open(item);
+      return api;
+    };
+    api.close = () => {
       dialog.close();
-    }
-  };
+      return api;
+    };
+
+    return dialog;
+  });
 }