create-yoya-ui 0.4.0 → 0.6.0

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

@@ -1,16 +1,30 @@
-// 领域结果结构（纯数据）：类不单独 export，统一由默认导出命名空间提供。
+// 领域结果结构（纯数据）：字段按热度分——行内会展示、会原地变化的用句柄，
+// key 与不参与原地刷新的字段保持普通值。类不单独 export，由默认导出命名空间提供。
+import { ref } from '@yoyaflow/yoya-ui';
+import { fieldValue } from '../../../../shared/state.rows.js';
+
 class ListItem {
-  constructor({ id, name, email, role, status }) {
-    this.id = id;
-    this.name = name;
-    this.email = email;
-    this.role = role;
-    this.status = status;
+  constructor(row = {}) {
+    this.id = row.id; // key：普通值，不能是句柄
+    this.name = ref(fieldValue(row.name) ?? ''); // 热字段：句柄 → 只刷那一格
+    this.email = ref(fieldValue(row.email) ?? '');
+    this.role = ref(fieldValue(row.role) ?? 'viewer');
+    this.status = ref(fieldValue(row.status) ?? 'active');
+  }
+
+  /** 合并而非重建：实例身份不变，keyed 复用行节点，只刷句柄绑定的位置。 */
+  apply(row) {
+    this.name.value = fieldValue(row.name) ?? '';
+    this.email.value = fieldValue(row.email) ?? '';
+    this.role.value = fieldValue(row.role) ?? 'viewer';
+    this.status.value = fieldValue(row.status) ?? 'active';
+    return this;
   }
 }
 
+// 详情结构不参与列表对账，按普通值持有即可。
 class Detail {
-  constructor({ id, name, email, role, status, remark = '' }) {
+  constructor({ id, name, email, role, status, remark = '' } = {}) {
     this.id = id;
     this.name = name;
     this.email = email;

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

@@ -1,4 +1,5 @@
 import { vDialog } from '@yoyaflow/yoya-ui';
+import { fieldValue } from '../../../../shared/state.rows.js';
 import { roleOptions, statusOptions } from '../utils/options.js';
 
 const rowStyle = {
@@ -14,6 +15,11 @@ export function MemberFormDialog({ onSubmit }) {
   let editingId = null;
 
   function buildFormFields(form, member) {
+    const name = fieldValue(member?.name) ?? '';
+    const email = fieldValue(member?.email) ?? '';
+    const role = fieldValue(member?.role) ?? 'viewer';
+    const status = fieldValue(member?.status) ?? 'active';
+
     form.styles({
       border: '1px solid var(--yoya-color-border, #d8dee8)',
       borderRadius: '8px',
@@ -25,19 +31,17 @@ export function MemberFormDialog({ onSubmit }) {
     form.vFormItem((item) => {
       item.styles(rowStyle);
       item.label('姓名').name('name').required({ message: '请填写姓名' });
-      item.control((editor) => editor.vInput({ name: 'name', value: member?.name ?? '' }));
+      item.control((editor) => editor.vInput({ name: 'name', value: name }));
     });
     form.vFormItem((item) => {
       item.styles(rowStyle);
       item.label('邮箱').name('email').required({ message: '请填写邮箱' });
-      item.control((editor) => editor.vInput({ name: 'email', value: member?.email ?? '' }));
+      item.control((editor) => editor.vInput({ name: 'email', value: email }));
     });
     form.vFormItem((item) => {
       item.styles(rowStyle);
       item.label('角色').name('role');
-      item.control((editor) =>
-        editor.vSelect({ name: 'role', options: roleOptions, value: member?.role ?? 'viewer' })
-      );
+      item.control((editor) => editor.vSelect({ name: 'role', options: roleOptions, value: role }));
     });
     form.vFormItem((item) => {
       item.styles(rowStyle);
@@ -46,7 +50,7 @@ export function MemberFormDialog({ onSubmit }) {
         editor.vSelect({
           name: 'status',
           options: statusOptions,
-          value: member?.status ?? 'active'
+          value: status
         })
       );
     });

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

@@ -1,64 +1,54 @@
-import { vTable } from '@yoyaflow/yoya-ui';
+import { computed, vTable, vText, vTr } from '@yoyaflow/yoya-ui';
 import { RowActionButton } from '../../../../shared/ui.buttons.js';
 import { statusText } from '../utils/options.js';
 
+/**
+ * 成员表格：rows 是状态里的 ref 句柄，写入即按 key 对账——
+ * 能复用的行不重建，行内热字段只刷自己那一格，组件不需要对外暴露 refresh()。
+ */
 export function MemberTable({ rows, onEdit, onRemove }) {
-  let tbody = null;
-
-  function renderRows() {
-    if (!tbody) {
-      return;
-    }
-
-    tbody.children().forEach((child) => child.destroy());
-    rows().forEach((member) => {
-      tbody.vTr((row) => {
-        row.vTd(member.name);
-        row.vTd(member.email);
-        row.vTd(member.role);
-        row.vTd(statusText[member.status] ?? member.status);
-        row.vTd((cell) => {
-          cell.hstack({ gap: '8px' }, (actions) => {
-            actions.child(
-              RowActionButton('编辑', (btn) => {
-                btn.access('system:member:update');
-                btn.on('click', () => onEdit(member));
-              })
-            );
-            actions.child(
-              RowActionButton('删除', (btn) => {
-                btn.variant('danger');
-                btn.access('system:member:remove');
-                btn.on('click', () => onRemove(member));
-              })
-            );
-          });
-        });
+  return vTable((table) => {
+    table.vThead((head) => {
+      head.vTr((row) => {
+        row.vTh('姓名');
+        row.vTh('邮箱');
+        row.vTh('角色');
+        row.vTh('状态');
+        row.vTh('操作');
       });
     });
-  }
+    table.vTbody((body) => {
+      body.keyed(
+        rows,
+        (member) => member.id,
+        (member) => buildRow(member)
+      );
+    });
+  });
 
-  return {
-    render() {
-      return vTable((table) => {
-        table.vThead((head) => {
-          head.vTr((row) => {
-            row.vTh('姓名');
-            row.vTh('邮箱');
-            row.vTh('角色');
-            row.vTh('状态');
-            row.vTh('操作');
-          });
-        });
-        table.vTbody((body) => {
-          tbody = body;
-          renderRows();
+  function buildRow(member) {
+    return vTr((row) => {
+      row.vTd(vText(member.name));
+      row.vTd(vText(member.email));
+      row.vTd(vText(member.role));
+      row.vTd(vText(computed(() => statusText[member.status.value] ?? member.status.value)));
+      row.vTd((cell) => {
+        cell.hstack({ gap: '8px' }, (actions) => {
+          actions.child(
+            RowActionButton('编辑', (btn) => {
+              btn.access('system:member:update');
+              btn.on('click', () => onEdit(member));
+            })
+          );
+          actions.child(
+            RowActionButton('删除', (btn) => {
+              btn.variant('danger');
+              btn.access('system:member:remove');
+              btn.on('click', () => onRemove(member));
+            })
+          );
         });
       });
-    },
-    refresh() {
-      renderRows();
-      return this;
-    }
-  };
+    });
+  }
 }

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

@@ -4,13 +4,13 @@ import { MemberToolbar } from '../components/member-toolbar.js';
 import { MemberTable } from '../components/member-table.js';
 import { MemberFormDialog } from '../components/member-form-dialog.js';
 
-// 页面只做编排：组合工具栏、表格、弹窗与分页，逻辑在组件 / service / state 中
+// 页面只做编排：状态用 ref 持有视图字段，表格绑句柄后写入即刷新，不需要订阅接线。
 export function MemberListPage() {
   const state = new MembersPageState();
   const dialog = MemberFormDialog({ onSubmit: saveMember });
   const toolbar = MemberToolbar({ onSearch: applyFilters, onAdd: () => dialog.open(null) });
   const table = MemberTable({
-    rows: () => state.items(),
+    rows: state.items,
     onEdit: (member) => dialog.open(member),
     onRemove: removeMemberAction
   });
@@ -20,22 +20,26 @@ export function MemberListPage() {
     onChange({ page: nextPage, pageSize: nextSize }) {
       state.setPage(nextPage);
       state.setPageSize(nextSize);
-      state.load();
+      load();
     }
   });
 
-  state.subscribe(() => {
-    table.refresh();
+  load();
+
+  // vPagination 是命令式组件（不是信号感知的）：数据到位后由动作同步一次
+  async function load() {
+    await state.load();
     syncPagination();
-  });
-  state.load();
+  }
 
   function syncPagination() {
+    const total = state.total.value;
+    const pageSize = state.pageSize.value;
     pagination.update({
-      page: state.page(),
-      pageSize: state.pageSize(),
-      total: state.total(),
-      totalPages: Math.max(1, Math.ceil(state.total() / state.pageSize()))
+      page: state.page.value,
+      pageSize,
+      total,
+      totalPages: Math.max(1, Math.ceil(total / pageSize))
     });
   }
 
@@ -43,12 +47,12 @@ export function MemberListPage() {
     state.setKeyword(values.keyword ?? '');
     state.setStatus(values.status ?? '');
     state.setPage(1);
-    state.load();
+    load();
   }
 
   async function removeMemberAction(member) {
     await state.remove(member.id);
-    toast.success(`已删除 ${member.name}`);
+    toast.success(`已删除 ${member.name.value}`);
   }
 
   async function saveMember(editingId, payload) {
@@ -78,8 +82,9 @@ export function MemberListPage() {
         stack.child(dialog);
       });
     },
+    // 页面也是组件：父级 / 路由可以调用实例方法刷新
     refresh() {
-      return state.load();
+      return load();
     }
   };
 }

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';
+import { RequestBase } from '@yoyaflow/yoya-ui/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';
+import { RequestBase } from '@yoyaflow/yoya-ui/api';
 import Permissions from './permission.views.js';
 
 class QueryTree extends RequestBase {

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

@@ -1,13 +1,15 @@
 /** 权限页状态类类型声明（对应 permission.state.js）。 */
+import type { SignalHandle } from '@yoyaflow/yoya-ui';
+import type { Result } from '@yoyaflow/yoya-ui/api';
 import Permissions from './permission.views.js';
 
 type PermissionNodeInstance = InstanceType<typeof Permissions.PermissionNode>;
 
 export default class PermissionsPageState {
   constructor();
-  tree(): PermissionNodeInstance[];
-  subscribe(listener: () => void): () => void;
-  load(): Promise<unknown>;
+  /** 视图字段：权限树整体重建，页面读值后喂给 vTree */
+  tree: SignalHandle<PermissionNodeInstance[]>;
+  load(): Promise<Result<PermissionNodeInstance[]>>;
   add(parentId: number | null, payload: Record<string, unknown>): Promise<Record<string, unknown>>;
   edit(id: number, payload: Record<string, unknown>): Promise<Record<string, unknown>>;
   remove(id: number): Promise<void>;

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

@@ -1,25 +1,15 @@
-// 权限页状态类：持有权限树，动作构造命令并 submit 后写入状态、通知订阅者。
+// 权限页状态类：权限树用 ref 持有，动作写句柄即完成通知。
+import { ref } from '@yoyaflow/yoya-ui';
 import PermissionMgr from './permission.mgr.js';
 
 export default class PermissionsPageState {
   constructor() {
-    this._tree = [];
-    this._listeners = new Set();
-  }
-
-  tree() {
-    return this._tree;
-  }
-
-  subscribe(listener) {
-    this._listeners.add(listener);
-    return () => this._listeners.delete(listener);
+    this.tree = ref([]);
   }
 
   async load() {
     const result = await PermissionMgr.QueryTree().submit();
-    this._tree = result.data;
-    this._emit();
+    this.tree.value = result.data;
     return result;
   }
 
@@ -39,8 +29,4 @@ export default class PermissionsPageState {
     await PermissionMgr.Remove({ id }).submit();
     await this.load();
   }
-
-  _emit() {
-    this._listeners.forEach((listener) => listener());
-  }
 }

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

@@ -1,4 +1,5 @@
-// 权限结果结构（纯数据）。
+// 权限结果结构（纯数据）：权限树是层级结构，只做整树重建（vTree 是命令式组件），
+// 所以节点字段保持普通值；要做行级原地刷新时再按需升级为句柄。
 class PermissionNode {
   constructor({
     id,

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

@@ -31,7 +31,7 @@ export function PermissionFormDialog({ onSubmit }) {
               margin: '0',
               padding: '0'
             });
-            p.text(`父级：${parentName}`);
+            p.child(`父级：${parentName}`);
           });
         }
         buildFormFields(form, node);

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

@@ -8,10 +8,13 @@ export function PermissionListPage() {
   const dialog = PermissionFormDialog({ onSubmit: savePermission });
   const tree = vTree({ ariaLabel: '权限树' });
 
-  state.subscribe(() => {
-    tree.nodes(buildTreeNodes(state.tree()));
-  });
-  state.load();
+  load();
+
+  // vTree 是命令式组件（整树重建，不做行级对账）：数据到位后由动作把 ref 值喂给它
+  async function load() {
+    await state.load();
+    tree.nodes(buildTreeNodes(state.tree.value));
+  }
 
   function buildTreeNodes(nodes) {
     return nodes.map((node) => ({
@@ -75,7 +78,7 @@ export function PermissionListPage() {
                   btn.variant('primary');
                   btn.on('click', () => dialog.open({}));
                 });
-                toolbar.vButton('刷新', (btn) => btn.on('click', () => state.load()));
+                toolbar.vButton('刷新', (btn) => btn.on('click', () => load()));
               });
               content.child(tree);
             });
@@ -85,7 +88,7 @@ export function PermissionListPage() {
       });
     },
     refresh() {
-      return state.load();
+      return load();
     }
   };
 }

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';
+import { RequestBase } from '@yoyaflow/yoya-ui/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';
+import { RequestBase } from '@yoyaflow/yoya-ui/api';
 import Roles from './role.views.js';
 
 class Query extends RequestBase {

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

@@ -1,22 +1,24 @@
 /** 角色页状态类类型声明（对应 role.state.js）。 */
+import type { SignalHandle } from '@yoyaflow/yoya-ui';
+import type { Result } from '@yoyaflow/yoya-ui/api';
 import Roles from './role.views.js';
 
 type RoleListItem = InstanceType<typeof Roles.ListItem>;
 
 export default class RolesPageState {
   constructor();
-  items(): RoleListItem[];
-  keyword(): string;
-  status(): string;
-  page(): number;
-  pageSize(): number;
-  total(): number;
+  /** 视图字段：页面与组件直接绑句柄，写入即更新 */
+  items: SignalHandle<RoleListItem[]>;
+  total: SignalHandle<number>;
+  page: SignalHandle<number>;
+  pageSize: SignalHandle<number>;
+  keyword: SignalHandle<string>;
+  status: SignalHandle<string>;
   setKeyword(value: string): void;
   setStatus(value: string): void;
   setPage(value: number): void;
   setPageSize(value: number): void;
-  subscribe(listener: () => void): () => void;
-  load(): Promise<unknown>;
+  load(): Promise<Result<RoleListItem[]>>;
   add(payload: Record<string, unknown>): Promise<Record<string, unknown>>;
   edit(id: number, patch: Record<string, unknown>): Promise<Record<string, unknown>>;
   remove(id: number): Promise<void>;

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

@@ -1,78 +1,49 @@
-// 角色页状态类。
+// 角色页状态类：视图字段用 ref 持有，动作写句柄即完成通知。
+import { ref } from '@yoyaflow/yoya-ui';
+import { mergeRowsByKey } from '../../../../shared/state.rows.js';
 import RoleMgr from './role.mgr.js';
 
 export default class RolesPageState {
   constructor() {
-    this._items = [];
-    this._keyword = '';
-    this._status = '';
-    this._page = 1;
-    this._pageSize = 10;
-    this._total = 0;
-    this._listeners = new Set();
-  }
-
-  items() {
-    return this._items;
-  }
-
-  keyword() {
-    return this._keyword;
-  }
-
-  status() {
-    return this._status;
-  }
-
-  page() {
-    return this._page;
-  }
-
-  pageSize() {
-    return this._pageSize;
-  }
-
-  total() {
-    return this._total;
+    this.items = ref([]);
+    this.total = ref(0);
+    this.page = ref(1);
+    this.pageSize = ref(10);
+    this.keyword = ref('');
+    this.status = ref('');
   }
 
   setKeyword(value) {
-    this._keyword = value;
+    this.keyword.value = value;
   }
 
   setStatus(value) {
-    this._status = value;
+    this.status.value = value;
   }
 
   setPage(value) {
-    this._page = Math.max(1, Number(value) || 1);
+    this.page.value = Math.max(1, Number(value) || 1);
   }
 
   setPageSize(value) {
-    this._pageSize = Math.max(1, Number(value) || 10);
-  }
-
-  subscribe(listener) {
-    this._listeners.add(listener);
-    return () => this._listeners.delete(listener);
+    this.pageSize.value = Math.max(1, Number(value) || 10);
   }
 
   async load() {
     const result = await RoleMgr.Query({
-      page: this._page,
-      pageSize: this._pageSize,
-      keyword: this._keyword,
-      status: this._status
+      page: this.page.value,
+      pageSize: this.pageSize.value,
+      keyword: this.keyword.value,
+      status: this.status.value
     }).submit();
-    this._items = result.data;
-    this._total = result.total;
-    this._emit();
+    this.items.value = mergeRowsByKey(this.items.peek(), result.data);
+    this.total.value = result.total;
     return result;
   }
 
   async add(payload) {
     await RoleMgr.Create(payload).submit();
-    this._page = 1;
+    this.page.value = 1;
     await this.load();
     return payload;
   }
@@ -85,13 +56,9 @@ export default class RolesPageState {
 
   async remove(id) {
     await RoleMgr.Remove({ id }).submit();
-    if (this._items.length === 1 && this._page > 1) {
-      this._page -= 1;
+    if (this.items.peek().length === 1 && this.page.value > 1) {
+      this.page.value -= 1;
     }
     await this.load();
   }
-
-  _emit() {
-    this._listeners.forEach((listener) => listener());
-  }
 }

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

@@ -1,21 +1,30 @@
 /** 角色结果结构类型声明（对应 role.views.js）。 */
+import type { SignalHandle } from '@yoyaflow/yoya-ui';
+
+/** 角色状态：与 utils/options.js 的 statusOptions 对齐 */
 export type RoleStatus = 'active' | 'disabled';
 
+export type RoleListRow = {
+  id: number;
+  name?: string;
+  code?: string;
+  description?: string;
+  status?: RoleStatus;
+  sort?: number;
+};
+
 export class ListItem {
+  /** key：普通值，不能是句柄 */
   id: number;
-  name: string;
-  code: string;
-  description: string;
-  status: RoleStatus;
+  /** 行内热字段：句柄写入即刷新对应单元格 */
+  name: SignalHandle<string>;
+  code: SignalHandle<string>;
+  description: SignalHandle<string>;
+  status: SignalHandle<string>;
+  /** 冷字段：表格不展示，随行结构变化刷新 */
   sort: number;
-  constructor(init?: {
-    id: number;
-    name: string;
-    code: string;
-    description?: string;
-    status?: RoleStatus;
-    sort?: number;
-  });
+  constructor(row?: RoleListRow);
+  apply(row: RoleListRow): this;
 }
 
 export class Detail {
@@ -23,14 +32,14 @@ export class Detail {
   name: string;
   code: string;
   description: string;
-  status: RoleStatus;
+  status: string;
   sort: number;
-  constructor(init?: {
+  constructor(init: {
     id: number;
     name: string;
     code: string;
     description?: string;
-    status?: RoleStatus;
+    status?: string;
     sort?: number;
   });
 }