create-yoya-ui 0.4.0 → 0.6.0

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

@@ -1,4 +1,5 @@
-import { toast, vConfirm, vDialog, vTable } from '@yoyaflow/yoya-ui';
+import { computed, toast, vConfirm, vDialog, 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';
 import { statusOptions, statusText } from '../utils/options.js';
@@ -12,24 +13,28 @@ const rowStyle = {
 };
 
 // 字典编辑弹窗：上半部分是字典基本信息表单，下半部分维护该字典的字典值表格。
+// 字典值表格绑 state.items 句柄，增删改写入信号后自动刷新，不需要手动重建行。
 export function DictEditorDialog({ state, onSubmit }) {
   const dialog = vDialog();
   const itemDialog = DictItemFormDialog({ onSubmit: saveItem });
   let editingId = null;
-  let itemsBody = null;
-  let itemsCountText = null;
-  let addItemButton = null;
   let form = null;
 
   dialog.style('maxWidth', 'min(92vw, 880px)');
 
   function open(type = null) {
     editingId = type?.id ?? null;
-    state.selectType(editingId).then(() => renderItems());
+    // 写入 state.items（ref）即刷新弹窗里的字典值表格
+    state.selectType(editingId);
+
+    const name = fieldValue(type?.name) ?? '';
+    const code = fieldValue(type?.code) ?? '';
+    const status = fieldValue(type?.status) ?? 'active';
+    const remark = fieldValue(type?.remark) ?? '';
 
     dialog.content((content) => {
       content.vstack({ gap: '16px' }, (stack) => {
-        stack.h3(type ? `编辑字典「${type.name}」` : '新增字典');
+        stack.h3(type ? `编辑字典「${name}」` : '新增字典');
 
         stack.vForm((editor) => {
           form = editor;
@@ -44,30 +49,24 @@ export function DictEditorDialog({ state, onSubmit }) {
           editor.vFormItem((item) => {
             item.styles(rowStyle);
             item.label('名称').name('name').required({ message: '请填写名称' });
-            item.control((control) => control.vInput({ name: 'name', value: type?.name ?? '' }));
+            item.control((control) => control.vInput({ name: 'name', value: name }));
           });
           editor.vFormItem((item) => {
             item.styles(rowStyle);
             item.label('编码').name('code').required({ message: '请填写编码' });
-            item.control((control) => control.vInput({ name: 'code', value: type?.code ?? '' }));
+            item.control((control) => control.vInput({ name: 'code', value: code }));
           });
           editor.vFormItem((item) => {
             item.styles(rowStyle);
             item.label('状态').name('status');
             item.control((control) =>
-              control.vSelect({
-                name: 'status',
-                options: statusOptions,
-                value: type?.status ?? 'active'
-              })
+              control.vSelect({ name: 'status', options: statusOptions, value: status })
             );
           });
           editor.vFormItem((item) => {
             item.styles(rowStyle);
             item.label('备注').name('remark');
-            item.control((control) =>
-              control.vInput({ name: 'remark', value: type?.remark ?? '' })
-            );
+            item.control((control) => control.vInput({ name: 'remark', value: remark }));
           });
         });
 
@@ -75,7 +74,6 @@ export function DictEditorDialog({ state, onSubmit }) {
           section.vstack({ gap: '10px' }, (items) => {
             items.hstack({ alignItems: 'center', gap: '10px' }, (toolbar) => {
               toolbar.vButton('新增字典值', (btn) => {
-                addItemButton = btn;
                 btn.variant('primary');
                 btn.disabled(editingId === null);
                 btn.on('click', () => itemDialog.open(null));
@@ -83,33 +81,33 @@ export function DictEditorDialog({ state, onSubmit }) {
               toolbar.spacer();
               toolbar.span((count) => {
                 count.style('color', 'var(--yoya-color-text-muted, #64748b)');
-                itemsCountText = count;
-                syncItemsCount();
+                count.child(vText(computed(() => `共 ${state.items.value.length} 条`)));
               });
             });
             items.p((hint) => {
               hint.style('color', 'var(--yoya-color-text-muted, #64748b)');
-              hint.text(
+              hint.child(
                 editingId === null ? '保存字典类型后即可添加字典值。' : '维护当前字典的字典值。'
               );
             });
-            items.child(
-              vTable((table) => {
-                table.vThead((head) => {
-                  head.vTr((row) => {
-                    row.vTh('标签');
-                    row.vTh('值');
-                    row.vTh('排序');
-                    row.vTh('状态');
-                    row.vTh('操作');
-                  });
+            items.vTable((table) => {
+              table.vThead((head) => {
+                head.vTr((row) => {
+                  row.vTh('标签');
+                  row.vTh('值');
+                  row.vTh('排序');
+                  row.vTh('状态');
+                  row.vTh('操作');
                 });
-                table.vTbody((body) => {
-                  itemsBody = body;
-                  renderItems();
-                });
-              })
-            );
+              });
+              table.vTbody((tbody) => {
+                tbody.keyed(
+                  state.items,
+                  (item) => item.id,
+                  (item) => buildItemRow(item)
+                );
+              });
+            });
           });
         });
 
@@ -128,48 +126,32 @@ export function DictEditorDialog({ state, onSubmit }) {
     dialog.open(true);
   }
 
-  function renderItems() {
-    if (!itemsBody) {
-      return;
-    }
-    itemsBody.children().forEach((child) => child.destroy());
-    state.items().forEach((item) => {
-      itemsBody.vTr((row) => {
-        row.vTd(item.label);
-        row.vTd(item.value);
-        row.vTd(String(item.sort));
-        row.vTd(statusText[item.status] ?? item.status);
-        row.vTd((cell) => {
-          cell.hstack({ gap: '8px' }, (actions) => {
-            actions.child(
-              RowActionButton('编辑', (btn) => btn.on('click', () => itemDialog.open(item)))
-            );
-            actions.child(
-              RowActionButton('删除', (btn) => {
-                btn.variant('danger');
-                btn.on('click', () => askRemoveItem(item));
-              })
-            );
-          });
+  function buildItemRow(item) {
+    return vTr((row) => {
+      row.vTd(vText(item.label));
+      row.vTd(vText(item.value));
+      row.vTd(vText(computed(() => String(item.sort.value))));
+      row.vTd(vText(computed(() => statusText[item.status.value] ?? item.status.value)));
+      row.vTd((cell) => {
+        cell.hstack({ gap: '8px' }, (actions) => {
+          actions.child(
+            RowActionButton('编辑', (btn) => btn.on('click', () => itemDialog.open(item)))
+          );
+          actions.child(
+            RowActionButton('删除', (btn) => {
+              btn.variant('danger');
+              btn.on('click', () => askRemoveItem(item));
+            })
+          );
         });
       });
     });
-    syncItemsCount();
-  }
-
-  function syncItemsCount() {
-    if (itemsCountText) {
-      itemsCountText.textContent(`共 ${state.items().length} 条`);
-    }
-    if (addItemButton) {
-      addItemButton.disabled(editingId === null);
-    }
   }
 
   async function askRemoveItem(item) {
     const ok = await vConfirm({
       title: '删除字典值',
-      content: `确定删除字典值「${item.label}」？`,
+      content: `确定删除字典值「${item.label.value}」？`,
       danger: true,
       confirmText: '删除'
     });
@@ -177,8 +159,7 @@ export function DictEditorDialog({ state, onSubmit }) {
       return;
     }
     await state.removeItem(item.id);
-    toast.success(`已删除 ${item.label}`);
-    renderItems();
+    toast.success(`已删除字典值 ${item.label.value}`);
   }
 
   async function saveItem(itemId, payload) {
@@ -189,7 +170,6 @@ export function DictEditorDialog({ state, onSubmit }) {
       await state.editItem(itemId, payload);
       toast.success('已更新字典值');
     }
-    renderItems();
   }
 
   function save() {

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

@@ -1,4 +1,5 @@
 import { vDialog } from '@yoyaflow/yoya-ui';
+import { fieldValue } from '../../../../shared/state.rows.js';
 import { statusOptions } from '../utils/options.js';
 
 const rowStyle = {
@@ -15,6 +16,10 @@ export function DictItemFormDialog({ onSubmit }) {
 
   function open(item = null) {
     editingId = item?.id ?? null;
+    const label = fieldValue(item?.label) ?? '';
+    const value = fieldValue(item?.value) ?? '';
+    const sort = fieldValue(item?.sort) ?? 0;
+    const status = fieldValue(item?.status) ?? 'active';
     dialog.content((content) => {
       content.vForm((form) => {
         form.styles({
@@ -28,19 +33,17 @@ export function DictItemFormDialog({ onSubmit }) {
         form.vFormItem((field) => {
           field.styles(rowStyle);
           field.label('标签').name('label').required({ message: '请填写标签' });
-          field.control((editor) => editor.vInput({ name: 'label', value: item?.label ?? '' }));
+          field.control((editor) => editor.vInput({ name: 'label', value: label }));
         });
         form.vFormItem((field) => {
           field.styles(rowStyle);
           field.label('值').name('value').required({ message: '请填写值' });
-          field.control((editor) => editor.vInput({ name: 'value', value: item?.value ?? '' }));
+          field.control((editor) => editor.vInput({ name: 'value', value }));
         });
         form.vFormItem((field) => {
           field.styles(rowStyle);
           field.label('排序').name('sort');
-          field.control((editor) =>
-            editor.vInput({ name: 'sort', value: String(item?.sort ?? 0) })
-          );
+          field.control((editor) => editor.vInput({ name: 'sort', value: String(sort) }));
         });
         form.vFormItem((field) => {
           field.styles(rowStyle);
@@ -49,7 +52,7 @@ export function DictItemFormDialog({ onSubmit }) {
             editor.vSelect({
               name: 'status',
               options: statusOptions,
-              value: item?.status ?? 'active'
+              value: status
             })
           );
         });

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

@@ -1,4 +1,4 @@
-import { toast, vConfirm, vPagination, vTable, vstack } from '@yoyaflow/yoya-ui';
+import { computed, toast, vConfirm, vPagination, vText, vTr, vstack } from '@yoyaflow/yoya-ui';
 import { RowActionButton } from '../../../../shared/ui.buttons.js';
 import DictsPageState from '../api/dict.state.js';
 import { DictEditorDialog } from '../components/dict-editor-dialog.js';
@@ -13,58 +13,33 @@ export function DictListPage() {
     onChange({ page: nextPage, pageSize: nextSize }) {
       state.setPage(nextPage);
       state.setPageSize(nextSize);
-      state.loadTypes();
+      load();
     }
   });
-  let typesBody = null;
 
-  state.subscribe(() => {
-    renderTypes();
+  load();
+
+  // vPagination 是命令式组件（不是信号感知的）：数据到位后由动作同步一次
+  async function load() {
+    await state.loadTypes();
     syncPagination();
-  });
-  state.loadTypes();
+  }
 
   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()))
-    });
-  }
-
-  function renderTypes() {
-    if (!typesBody) {
-      return;
-    }
-    typesBody.children().forEach((child) => child.destroy());
-    state.types().forEach((type) => {
-      typesBody.vTr((row) => {
-        row.vTd(type.name);
-        row.vTd(type.code);
-        row.vTd(statusText[type.status] ?? type.status);
-        row.vTd(type.remark || '—');
-        row.vTd((cell) => {
-          cell.hstack({ gap: '8px' }, (actions) => {
-            actions.child(
-              RowActionButton('编辑', (btn) => btn.on('click', () => editorDialog.open(type)))
-            );
-            actions.child(
-              RowActionButton('删除', (btn) => {
-                btn.variant('danger');
-                btn.on('click', () => askRemoveType(type));
-              })
-            );
-          });
-        });
-      });
+      page: state.page.value,
+      pageSize,
+      total,
+      totalPages: Math.max(1, Math.ceil(total / pageSize))
     });
   }
 
   async function askRemoveType(type) {
     const ok = await vConfirm({
       title: '删除字典',
-      content: `确定删除字典「${type.name}」及其所有字典值？`,
+      content: `确定删除字典「${type.name.value}」及其所有字典值？`,
       danger: true,
       confirmText: '删除'
     });
@@ -72,7 +47,7 @@ export function DictListPage() {
       return;
     }
     await state.removeType(type.id);
-    toast.success(`已删除 ${type.name}`);
+    toast.success(`已删除 ${type.name.value}`);
   }
 
   async function saveType(editingId, payload) {
@@ -85,6 +60,28 @@ export function DictListPage() {
     }
   }
 
+  function buildTypeRow(type) {
+    return vTr((row) => {
+      row.vTd(vText(type.name));
+      row.vTd(vText(type.code));
+      row.vTd(vText(computed(() => statusText[type.status.value] ?? type.status.value)));
+      row.vTd(vText(computed(() => type.remark.value || '—')));
+      row.vTd((cell) => {
+        cell.hstack({ gap: '8px' }, (actions) => {
+          actions.child(
+            RowActionButton('编辑', (btn) => btn.on('click', () => editorDialog.open(type)))
+          );
+          actions.child(
+            RowActionButton('删除', (btn) => {
+              btn.variant('danger');
+              btn.on('click', () => askRemoveType(type));
+            })
+          );
+        });
+      });
+    });
+  }
+
   return {
     render() {
       return vstack({ gap: '16px' }, (stack) => {
@@ -99,29 +96,30 @@ export function DictListPage() {
               toolbar.spacer();
               toolbar.span((hint) => {
                 hint.style('color', 'var(--yoya-color-text-muted, #64748b)');
-                hint.text('点击「编辑」可在弹窗中维护基本信息与字典值');
+                hint.child('点击「编辑」可在弹窗中维护基本信息与字典值');
               });
             });
           });
           card.vCardBody((body) => {
             body.vstack({ gap: '12px' }, (content) => {
-              content.child(
-                vTable((table) => {
-                  table.vThead((head) => {
-                    head.vTr((row) => {
-                      row.vTh('名称');
-                      row.vTh('编码');
-                      row.vTh('状态');
-                      row.vTh('备注');
-                      row.vTh('操作');
-                    });
+              content.vTable((table) => {
+                table.vThead((head) => {
+                  head.vTr((row) => {
+                    row.vTh('名称');
+                    row.vTh('编码');
+                    row.vTh('状态');
+                    row.vTh('备注');
+                    row.vTh('操作');
                   });
-                  table.vTbody((bodyNode) => {
-                    typesBody = bodyNode;
-                    renderTypes();
-                  });
-                })
-              );
+                });
+                table.vTbody((tbody) => {
+                  tbody.keyed(
+                    state.types,
+                    (type) => type.id,
+                    (type) => buildTypeRow(type)
+                  );
+                });
+              });
               content.child(pagination);
             });
           });
@@ -130,7 +128,7 @@ export function DictListPage() {
       });
     },
     refresh() {
-      return state.loadTypes();
+      return load();
     }
   };
 }

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

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

@@ -1,22 +1,24 @@
 /** 页面数据状态类类型声明（对应 member.state.js）。 */
+import type { SignalHandle } from '@yoyaflow/yoya-ui';
+import type { Result } from '@yoyaflow/yoya-ui/api';
 import Members from './member.views.js';
 
 type MemberListItem = InstanceType<typeof Members.ListItem>;
 
 export default class MembersPageState {
   constructor();
-  items(): MemberListItem[];
-  keyword(): string;
-  status(): string;
-  page(): number;
-  pageSize(): number;
-  total(): number;
+  /** 视图字段：页面与组件直接绑句柄，写入即更新 */
+  items: SignalHandle<MemberListItem[]>;
+  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<MemberListItem[]>>;
   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/members/api/member.state.js

@@ -1,78 +1,51 @@
-// 页面数据状态类：持有数据与筛选，动作构造命令并 submit 后写入状态、通知订阅者。
+// 页面数据状态类：要驱动视图的字段用 ref 持有——动作里写句柄即完成通知，
+// 页面不需要订阅回调去手动 refresh。subscribe() 只留给非视图副作用（埋点 / 持久化）。
+import { ref } from '@yoyaflow/yoya-ui';
+import { mergeRowsByKey } from '../../../../shared/state.rows.js';
 import MemberMgr from './member.mgr.js';
 
 export default class MembersPageState {
   constructor() {
-    this._items = [];
-    this._keyword = '';
-    this._status = '';
-    this._page = 1;
-    this._pageSize = 5;
-    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(5);
+    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) || 5);
-  }
-
-  subscribe(listener) {
-    this._listeners.add(listener);
-    return () => this._listeners.delete(listener);
+    this.pageSize.value = Math.max(1, Number(value) || 5);
   }
 
   async load() {
     const result = await MemberMgr.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();
+    // 按 key 合并：能复用的行保持实例身份，表格只刷变化的格子
+    this.items.value = mergeRowsByKey(this.items.peek(), result.data);
+    this.total.value = result.total;
     return result;
   }
 
   async add(payload) {
     await MemberMgr.Create(payload).submit();
-    this._page = 1;
+    this.page.value = 1;
     await this.load();
     return payload;
   }
@@ -85,13 +58,9 @@ export default class MembersPageState {
 
   async remove(id) {
     await MemberMgr.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/members/api/member.views.d.ts

@@ -1,11 +1,25 @@
 /** 领域结果结构类型声明（对应 member.views.js）。 */
+import type { SignalHandle } from '@yoyaflow/yoya-ui';
+
+export type MemberListRow = {
+  id: number;
+  name?: string;
+  email?: string;
+  role?: string;
+  status?: string;
+};
+
 export class ListItem {
+  /** key：普通值，不能是句柄 */
   id: number;
-  name: string;
-  email: string;
-  role: string;
-  status: string;
-  constructor(init: { id: number; name: string; email: string; role: string; status: string });
+  /** 行内热字段：句柄写入即刷新对应单元格 */
+  name: SignalHandle<string>;
+  email: SignalHandle<string>;
+  role: SignalHandle<string>;
+  status: SignalHandle<string>;
+  constructor(row?: MemberListRow);
+  /** 合并而非重建：实例身份不变 */
+  apply(row: MemberListRow): this;
 }
 
 export class Detail {