create-yoya-ui 0.6.2 → 0.7.6

package/templates/admin/src/features/system/dicts/pages/dict-list-page.js

@@ -82,53 +82,47 @@ export function DictListPage() {
     });
   }
 
-  return {
-    render() {
-      return vstack({ gap: '16px' }, (stack) => {
-        stack.h2('字典管理');
-        stack.vCard((card) => {
-          card.vCardHeader((header) => {
-            header.hstack({ alignItems: 'center', gap: '10px' }, (toolbar) => {
-              toolbar.vButton('新增字典', (btn) => {
-                btn.variant('primary');
-                btn.on('click', () => editorDialog.open(null));
-              });
-              toolbar.spacer();
-              toolbar.span((hint) => {
-                hint.style('color', 'var(--yoya-color-text-muted, #64748b)');
-                hint.child('点击「编辑」可在弹窗中维护基本信息与字典值');
-              });
-            });
+  // 页面也是组件：没有对外命令方法 → 形态 A 薄工厂，直接返回视图节点
+  return vstack({ gap: '16px' }, (stack) => {
+    stack.h2('字典管理');
+    stack.vCard((card) => {
+      card.vCardHeader((header) => {
+        header.hstack({ alignItems: 'center', gap: '10px' }, (toolbar) => {
+          toolbar.vButton('新增字典', (btn) => {
+            btn.variant('primary');
+            btn.on('click', () => editorDialog.open(null));
           });
-          card.vCardBody((body) => {
-            body.vstack({ gap: '12px' }, (content) => {
-              content.vTable((table) => {
-                table.vThead((head) => {
-                  head.vTr((row) => {
-                    row.vTh('名称');
-                    row.vTh('编码');
-                    row.vTh('状态');
-                    row.vTh('备注');
-                    row.vTh('操作');
-                  });
-                });
-                table.vTbody((tbody) => {
-                  tbody.keyed(
-                    state.types,
-                    (type) => type.id,
-                    (type) => buildTypeRow(type)
-                  );
-                });
+          toolbar.spacer();
+          toolbar.span((hint) => {
+            hint.style('color', 'var(--yoya-color-text-muted, #64748b)');
+            hint.child('点击「编辑」可在弹窗中维护基本信息与字典值');
+          });
+        });
+      });
+      card.vCardBody((body) => {
+        body.vstack({ gap: '12px' }, (content) => {
+          content.vTable((table) => {
+            table.vThead((head) => {
+              head.vTr((row) => {
+                row.vTh('名称');
+                row.vTh('编码');
+                row.vTh('状态');
+                row.vTh('备注');
+                row.vTh('操作');
               });
-              content.child(pagination);
+            });
+            table.vTbody((tbody) => {
+              tbody.keyed(
+                state.types,
+                (type) => type.id,
+                (type) => buildTypeRow(type)
+              );
             });
           });
+          content.child(pagination);
         });
-        stack.child(editorDialog);
       });
-    },
-    refresh() {
-      return load();
-    }
-  };
+    });
+    stack.child(editorDialog);
+  });
 }

package/templates/admin/src/features/system/members/api/member.mgr.d.ts

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

package/templates/admin/src/features/system/members/api/member.mgr.js

@@ -1,5 +1,5 @@
 // 管理请求命令：字段在构造器声明，方法由 RequestBase 基类提供、子类覆写。
-import { RequestBase } from '@yoyaflow/yoya-ui/api';
+import { RequestBase } from '@yoyaflow/yoya-core/api';
 import Members from './member.views.js';
 
 class Query extends RequestBase {

package/templates/admin/src/features/system/members/api/member.req.d.ts

@@ -1,5 +1,5 @@
 /** 外部请求命令类型声明（对应 member.req.js）。 */
-import { RequestBase } from '@yoyaflow/yoya-ui/api';
+import { RequestBase } from '@yoyaflow/yoya-core/api';
 import Members from './member.views.js';
 
 type MemberListItem = InstanceType<typeof Members.ListItem>;

package/templates/admin/src/features/system/members/api/member.req.js

@@ -1,5 +1,5 @@
 // 外部请求命令：其他模块调用本域能力的入口。
-import { RequestBase } from '@yoyaflow/yoya-ui/api';
+import { RequestBase } from '@yoyaflow/yoya-core/api';
 import Members from './member.views.js';
 
 class QueryAvailable extends RequestBase {

package/templates/admin/src/features/system/members/api/member.state.d.ts

@@ -1,6 +1,6 @@
 /** 页面数据状态类类型声明（对应 member.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 Members from './member.views.js';
 
 type MemberListItem = InstanceType<typeof Members.ListItem>;

package/templates/admin/src/features/system/members/components/member-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 { roleOptions, statusOptions } from '../utils/options.js';
 
@@ -79,13 +79,17 @@ export function MemberFormDialog({ onSubmit }) {
     dialog.close();
   }
 
-  return {
-    render() {
-      return dialog;
-    },
-    open,
-    close() {
+  // 有对外命令方法（open / close）→ 形态 B：命令写在 api 上，视图就是自己的弹窗节点
+  return vNode((api) => {
+    api.open = (member = null) => {
+      open(member);
+      return api;
+    };
+    api.close = () => {
       dialog.close();
-    }
-  };
+      return api;
+    };
+
+    return dialog;
+  });
 }

package/templates/admin/src/features/system/members/components/member-toolbar.js

@@ -2,10 +2,40 @@ import { vForm } from '@yoyaflow/yoya-ui';
 import { statusOptions } from '../utils/options.js';
 
 export function MemberToolbar({ onSearch, onAdd }) {
-  let form = null;
+  // 形态 A 薄工厂：没有对外命令方法，结构就地声明；句柄留在函数作用域里给事件回调读值
+  const form = vForm((f) => {
+    f.style({ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center' });
+    f.vFormItem((item) => {
+      item.style({ display: 'flex', alignItems: 'center', gap: '8px' });
+      item.label('关键词').name('keyword');
+      item.control((editor) => editor.vInput({ name: 'keyword', placeholder: '姓名 / 邮箱' }));
+    });
+    f.vFormItem((item) => {
+      item.style({ display: 'flex', alignItems: 'center', gap: '8px' });
+      item.label('状态').name('status');
+      item.control((editor) =>
+        editor.vSelect({ name: 'status', options: statusOptions, placeholder: '全部' })
+      );
+    });
+    f.vButton('查询', (btn) => {
+      btn.variant('primary');
+      btn.on('click', search);
+    });
+    f.vButton('重置', (btn) => btn.on('click', reset));
+    f.vButton('新增成员', (btn) => {
+      btn.variant('primary');
+      btn.style('marginLeft', 'auto');
+      btn.access('system:member:create');
+      btn.on('click', onAdd);
+    });
+    f.on('submit', (event) => {
+      event.preventDefault();
+      search();
+    });
+  });
 
   function values() {
-    return form ? form.values() : {};
+    return form.values();
   }
 
   function search() {
@@ -13,45 +43,9 @@ export function MemberToolbar({ onSearch, onAdd }) {
   }
 
   function reset() {
-    if (form) {
-      form.values({ keyword: '', status: '' });
-    }
+    form.values({ keyword: '', status: '' });
     search();
   }
 
-  return {
-    render() {
-      return vForm((f) => {
-        form = f;
-        f.style({ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center' });
-        f.vFormItem((item) => {
-          item.style({ display: 'flex', alignItems: 'center', gap: '8px' });
-          item.label('关键词').name('keyword');
-          item.control((editor) => editor.vInput({ name: 'keyword', placeholder: '姓名 / 邮箱' }));
-        });
-        f.vFormItem((item) => {
-          item.style({ display: 'flex', alignItems: 'center', gap: '8px' });
-          item.label('状态').name('status');
-          item.control((editor) =>
-            editor.vSelect({ name: 'status', options: statusOptions, placeholder: '全部' })
-          );
-        });
-        f.vButton('查询', (btn) => {
-          btn.variant('primary');
-          btn.on('click', search);
-        });
-        f.vButton('重置', (btn) => btn.on('click', reset));
-        f.vButton('新增成员', (btn) => {
-          btn.variant('primary');
-          btn.style('marginLeft', 'auto');
-          btn.access('system:member:create');
-          btn.on('click', onAdd);
-        });
-        f.on('submit', (event) => {
-          event.preventDefault();
-          search();
-        });
-      });
-    }
-  };
+  return form;
 }

package/templates/admin/src/features/system/members/pages/member-list-page.js

@@ -65,26 +65,19 @@ export function MemberListPage() {
     }
   }
 
-  return {
-    render() {
-      return vstack({ gap: '16px' }, (stack) => {
-        stack.h2('成员管理');
-        stack.vCard((card) => {
-          card.vCardHeader('成员列表');
-          card.vCardBody((body) => {
-            body.vstack({ gap: '12px' }, (content) => {
-              content.child(toolbar);
-              content.child(table);
-              content.child(pagination);
-            });
-          });
+  // 页面也是组件：没有对外命令方法 → 形态 A 薄工厂，直接返回视图节点
+  return vstack({ gap: '16px' }, (stack) => {
+    stack.h2('成员管理');
+    stack.vCard((card) => {
+      card.vCardHeader('成员列表');
+      card.vCardBody((body) => {
+        body.vstack({ gap: '12px' }, (content) => {
+          content.child(toolbar);
+          content.child(table);
+          content.child(pagination);
         });
-        stack.child(dialog);
       });
-    },
-    // 页面也是组件：父级 / 路由可以调用实例方法刷新
-    refresh() {
-      return load();
-    }
-  };
+    });
+    stack.child(dialog);
+  });
 }

package/templates/admin/src/features/system/permissions/api/permission.mgr.d.ts

@@ -1,5 +1,5 @@
 /** 权限管理请求命令类型声明（对应 permission.mgr.js）。 */
-import { RequestBase } from '@yoyaflow/yoya-ui/api';
+import { RequestBase } from '@yoyaflow/yoya-core/api';
 import Permissions, { PermissionType } from './permission.views.js';
 
 type PermissionNodeInstance = InstanceType<typeof Permissions.PermissionNode>;

package/templates/admin/src/features/system/permissions/api/permission.mgr.js

@@ -1,5 +1,5 @@
 // 权限管理请求命令：查询树、新增、编辑、删除。
-import { RequestBase } from '@yoyaflow/yoya-ui/api';
+import { RequestBase } from '@yoyaflow/yoya-core/api';
 import Permissions from './permission.views.js';
 
 class QueryTree extends RequestBase {

package/templates/admin/src/features/system/permissions/api/permission.state.d.ts

@@ -1,6 +1,6 @@
 /** 权限页状态类类型声明（对应 permission.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 Permissions from './permission.views.js';
 
 type PermissionNodeInstance = InstanceType<typeof Permissions.PermissionNode>;

package/templates/admin/src/features/system/permissions/components/permission-form-dialog.js

@@ -1,4 +1,4 @@
-import { vDialog } from '@yoyaflow/yoya-ui';
+import { vDialog, vNode } from '@yoyaflow/yoya-ui';
 
 const typeOptions = [
   ['menu', '菜单'],
@@ -86,13 +86,17 @@ export function PermissionFormDialog({ onSubmit }) {
     dialog.close();
   }
 
-  return {
-    render() {
-      return dialog;
-    },
-    open,
-    close() {
+  // 有对外命令方法（open / close）→ 形态 B：命令写在 api 上，视图就是自己的弹窗节点
+  return vNode((api) => {
+    api.open = (init = {}) => {
+      open(init);
+      return api;
+    };
+    api.close = () => {
       dialog.close();
-    }
-  };
+      return api;
+    };
+
+    return dialog;
+  });
 }

package/templates/admin/src/features/system/permissions/pages/permission-list-page.js

@@ -65,30 +65,24 @@ export function PermissionListPage() {
     }
   }
 
-  return {
-    render() {
-      return vstack({ gap: '16px' }, (stack) => {
-        stack.h2('权限管理');
-        stack.vCard((card) => {
-          card.vCardHeader('权限树');
-          card.vCardBody((body) => {
-            body.vstack({ gap: '12px' }, (content) => {
-              content.hstack({ gap: '10px' }, (toolbar) => {
-                toolbar.vButton('新增根权限', (btn) => {
-                  btn.variant('primary');
-                  btn.on('click', () => dialog.open({}));
-                });
-                toolbar.vButton('刷新', (btn) => btn.on('click', () => load()));
-              });
-              content.child(tree);
+  // 页面也是组件：没有对外命令方法 → 形态 A 薄工厂，直接返回视图节点
+  return vstack({ gap: '16px' }, (stack) => {
+    stack.h2('权限管理');
+    stack.vCard((card) => {
+      card.vCardHeader('权限树');
+      card.vCardBody((body) => {
+        body.vstack({ gap: '12px' }, (content) => {
+          content.hstack({ gap: '10px' }, (toolbar) => {
+            toolbar.vButton('新增根权限', (btn) => {
+              btn.variant('primary');
+              btn.on('click', () => dialog.open({}));
             });
+            toolbar.vButton('刷新', (btn) => btn.on('click', () => load()));
           });
+          content.child(tree);
         });
-        stack.child(dialog);
       });
-    },
-    refresh() {
-      return load();
-    }
-  };
+    });
+    stack.child(dialog);
+  });
 }

package/templates/admin/src/features/system/roles/api/role.mgr.d.ts

@@ -1,5 +1,5 @@
 /** 角色管理请求命令类型声明（对应 role.mgr.js）。 */
-import { RequestBase } from '@yoyaflow/yoya-ui/api';
+import { RequestBase } from '@yoyaflow/yoya-core/api';
 import Roles, { RoleStatus } from './role.views.js';
 
 type RoleListItem = InstanceType<typeof Roles.ListItem>;

package/templates/admin/src/features/system/roles/api/role.mgr.js

@@ -1,5 +1,5 @@
 // 角色管理请求命令。
-import { RequestBase } from '@yoyaflow/yoya-ui/api';
+import { RequestBase } from '@yoyaflow/yoya-core/api';
 import Roles from './role.views.js';
 
 class Query extends RequestBase {

package/templates/admin/src/features/system/roles/api/role.state.d.ts

@@ -1,6 +1,6 @@
 /** 角色页状态类类型声明（对应 role.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 Roles from './role.views.js';
 
 type RoleListItem = InstanceType<typeof Roles.ListItem>;

package/templates/admin/src/features/system/roles/components/role-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';
 
@@ -80,13 +80,17 @@ export function RoleFormDialog({ onSubmit }) {
     dialog.close();
   }
 
-  return {
-    render() {
-      return dialog;
-    },
-    open,
-    close() {
+  // 有对外命令方法（open / close）→ 形态 B：命令写在 api 上，视图就是自己的弹窗节点
+  return vNode((api) => {
+    api.open = (role = null) => {
+      open(role);
+      return api;
+    };
+    api.close = () => {
       dialog.close();
-    }
-  };
+      return api;
+    };
+
+    return dialog;
+  });
 }

package/templates/admin/src/features/system/roles/components/role-toolbar.js

@@ -2,10 +2,39 @@ import { vForm } from '@yoyaflow/yoya-ui';
 import { statusOptions } from '../utils/options.js';
 
 export function RoleToolbar({ onSearch, onAdd }) {
-  let form = null;
+  // 形态 A 薄工厂：没有对外命令方法，结构就地声明；句柄留在函数作用域里给事件回调读值
+  const form = vForm((f) => {
+    f.style({ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center' });
+    f.vFormItem((item) => {
+      item.style({ display: 'flex', alignItems: 'center', gap: '8px' });
+      item.label('关键词').name('keyword');
+      item.control((editor) => editor.vInput({ name: 'keyword', placeholder: '名称 / 标识' }));
+    });
+    f.vFormItem((item) => {
+      item.style({ display: 'flex', alignItems: 'center', gap: '8px' });
+      item.label('状态').name('status');
+      item.control((editor) =>
+        editor.vSelect({ name: 'status', options: statusOptions, placeholder: '全部' })
+      );
+    });
+    f.vButton('查询', (btn) => {
+      btn.variant('primary');
+      btn.on('click', search);
+    });
+    f.vButton('重置', (btn) => btn.on('click', reset));
+    f.vButton('新增角色', (btn) => {
+      btn.variant('primary');
+      btn.style('marginLeft', 'auto');
+      btn.on('click', onAdd);
+    });
+    f.on('submit', (event) => {
+      event.preventDefault();
+      search();
+    });
+  });
 
   function values() {
-    return form ? form.values() : {};
+    return form.values();
   }
 
   function search() {
@@ -13,44 +42,9 @@ export function RoleToolbar({ onSearch, onAdd }) {
   }
 
   function reset() {
-    if (form) {
-      form.values({ keyword: '', status: '' });
-    }
+    form.values({ keyword: '', status: '' });
     search();
   }
 
-  return {
-    render() {
-      return vForm((f) => {
-        form = f;
-        f.style({ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center' });
-        f.vFormItem((item) => {
-          item.style({ display: 'flex', alignItems: 'center', gap: '8px' });
-          item.label('关键词').name('keyword');
-          item.control((editor) => editor.vInput({ name: 'keyword', placeholder: '名称 / 标识' }));
-        });
-        f.vFormItem((item) => {
-          item.style({ display: 'flex', alignItems: 'center', gap: '8px' });
-          item.label('状态').name('status');
-          item.control((editor) =>
-            editor.vSelect({ name: 'status', options: statusOptions, placeholder: '全部' })
-          );
-        });
-        f.vButton('查询', (btn) => {
-          btn.variant('primary');
-          btn.on('click', search);
-        });
-        f.vButton('重置', (btn) => btn.on('click', reset));
-        f.vButton('新增角色', (btn) => {
-          btn.variant('primary');
-          btn.style('marginLeft', 'auto');
-          btn.on('click', onAdd);
-        });
-        f.on('submit', (event) => {
-          event.preventDefault();
-          search();
-        });
-      });
-    }
-  };
+  return form;
 }

package/templates/admin/src/features/system/roles/pages/role-list-page.js

@@ -73,25 +73,19 @@ export function RoleListPage() {
     }
   }
 
-  return {
-    render() {
-      return vstack({ gap: '16px' }, (stack) => {
-        stack.h2('角色管理');
-        stack.vCard((card) => {
-          card.vCardHeader('角色列表');
-          card.vCardBody((body) => {
-            body.vstack({ gap: '12px' }, (content) => {
-              content.child(toolbar);
-              content.child(table);
-              content.child(pagination);
-            });
-          });
+  // 页面也是组件：没有对外命令方法 → 形态 A 薄工厂，直接返回视图节点
+  return vstack({ gap: '16px' }, (stack) => {
+    stack.h2('角色管理');
+    stack.vCard((card) => {
+      card.vCardHeader('角色列表');
+      card.vCardBody((body) => {
+        body.vstack({ gap: '12px' }, (content) => {
+          content.child(toolbar);
+          content.child(table);
+          content.child(pagination);
         });
-        stack.child(dialog);
       });
-    },
-    refresh() {
-      return load();
-    }
-  };
+    });
+    stack.child(dialog);
+  });
 }

package/templates/admin/src/main.js

@@ -17,7 +17,7 @@ async function bootstrap() {
   const state = new ShellState();
   await state.load();
   const shell = AdminShell({ state });
-  shell.render().bindTo('#app');
+  shell.bindTo('#app');
   state.start();
 }
 

package/templates/admin/src/shell/api/shell.req.js

@@ -1,5 +1,5 @@
 // 外壳请求命令：其他模块（启动装配）调用本域能力的入口，方便后续替换为服务端接口（去掉 mock 即可）。
-import { RequestBase } from '@yoyaflow/yoya-ui/api';
+import { RequestBase } from '@yoyaflow/yoya-core/api';
 import Shell from './shell.views.js';
 
 class QueryMenus extends RequestBase {