create-yoya-ui 0.4.1 → 0.6.0

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

@@ -1,17 +1,30 @@
-// 角色结果结构（纯数据）。
+// 角色结果结构（纯数据）：行内展示且会原地变化的字段用句柄，其余保持普通值。
+import { ref } from '@yoyaflow/yoya-ui';
+import { fieldValue } from '../../../../shared/state.rows.js';
+
 class ListItem {
-  constructor({ id, name, code, description = '', status = 'active', sort = 0 }) {
-    this.id = id;
-    this.name = name;
-    this.code = code;
-    this.description = description;
-    this.status = status;
-    this.sort = sort;
+  constructor(row = {}) {
+    this.id = row.id; // key：普通值，不能是句柄
+    this.name = ref(fieldValue(row.name) ?? '');
+    this.code = ref(fieldValue(row.code) ?? '');
+    this.description = ref(fieldValue(row.description) ?? '');
+    this.status = ref(fieldValue(row.status) ?? 'active');
+    this.sort = fieldValue(row.sort) ?? 0; // 冷字段：表格不展示，随行结构变化即可
+  }
+
+  /** 合并而非重建：实例身份不变，keyed 复用行节点，只刷句柄绑定的位置。 */
+  apply(row) {
+    this.name.value = fieldValue(row.name) ?? '';
+    this.code.value = fieldValue(row.code) ?? '';
+    this.description.value = fieldValue(row.description) ?? '';
+    this.status.value = fieldValue(row.status) ?? 'active';
+    this.sort = fieldValue(row.sort) ?? 0;
+    return this;
   }
 }
 
 class Detail {
-  constructor({ id, name, code, description = '', status = 'active', sort = 0 }) {
+  constructor({ id, name, code, description = '', status = 'active', sort = 0 } = {}) {
     this.id = id;
     this.name = name;
     this.code = code;

package/templates/admin/src/features/system/roles/components/role-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,11 @@ export function RoleFormDialog({ onSubmit }) {
 
   function open(role = null) {
     editingId = role?.id ?? null;
+    const name = fieldValue(role?.name) ?? '';
+    const code = fieldValue(role?.code) ?? '';
+    const description = fieldValue(role?.description) ?? '';
+    const status = fieldValue(role?.status) ?? 'active';
+    const sort = fieldValue(role?.sort) ?? 0;
     dialog.content((content) => {
       content.vForm((form) => {
         form.styles({
@@ -28,19 +34,17 @@ export function RoleFormDialog({ onSubmit }) {
         form.vFormItem((item) => {
           item.styles(rowStyle);
           item.label('名称').name('name').required({ message: '请填写名称' });
-          item.control((editor) => editor.vInput({ name: 'name', value: role?.name ?? '' }));
+          item.control((editor) => editor.vInput({ name: 'name', value: name }));
         });
         form.vFormItem((item) => {
           item.styles(rowStyle);
           item.label('角色标识').name('code').required({ message: '请填写角色标识' });
-          item.control((editor) => editor.vInput({ name: 'code', value: role?.code ?? '' }));
+          item.control((editor) => editor.vInput({ name: 'code', value: code }));
         });
         form.vFormItem((item) => {
           item.styles(rowStyle);
           item.label('描述').name('description');
-          item.control((editor) =>
-            editor.vInput({ name: 'description', value: role?.description ?? '' })
-          );
+          item.control((editor) => editor.vInput({ name: 'description', value: description }));
         });
         form.vFormItem((item) => {
           item.styles(rowStyle);
@@ -49,14 +53,14 @@ export function RoleFormDialog({ onSubmit }) {
             editor.vSelect({
               name: 'status',
               options: statusOptions,
-              value: role?.status ?? 'active'
+              value: status
             })
           );
         });
         form.vFormItem((item) => {
           item.styles(rowStyle);
           item.label('排序').name('sort');
-          item.control((editor) => editor.vInput({ name: 'sort', value: String(role?.sort ?? 0) }));
+          item.control((editor) => editor.vInput({ name: 'sort', value: String(sort) }));
         });
         form.vButton('保存', (btn) => {
           btn.variant('primary');

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

@@ -1,57 +1,45 @@
-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 对账，无需手动重建行。 */
 export function RoleTable({ rows, onEdit, onRemove }) {
-  let tbody = null;
-
-  function renderRows() {
-    if (!tbody) {
-      return;
-    }
-    tbody.children().forEach((child) => child.destroy());
-    rows().forEach((role) => {
-      tbody.vTr((row) => {
-        row.vTd(role.name);
-        row.vTd(role.code);
-        row.vTd(role.description);
-        row.vTd(statusText[role.status] ?? role.status);
-        row.vTd((cell) => {
-          cell.hstack({ gap: '8px' }, (actions) => {
-            actions.child(RowActionButton('编辑', (btn) => btn.on('click', () => onEdit(role))));
-            actions.child(
-              RowActionButton('删除', (btn) => {
-                btn.variant('danger');
-                btn.on('click', () => onRemove(role));
-              })
-            );
-          });
-        });
+  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,
+        (role) => role.id,
+        (role) => buildRow(role)
+      );
+    });
+  });
 
-  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(role) {
+    return vTr((row) => {
+      row.vTd(vText(role.name));
+      row.vTd(vText(role.code));
+      row.vTd(vText(role.description));
+      row.vTd(vText(computed(() => statusText[role.status.value] ?? role.status.value)));
+      row.vTd((cell) => {
+        cell.hstack({ gap: '8px' }, (actions) => {
+          actions.child(RowActionButton('编辑', (btn) => btn.on('click', () => onEdit(role))));
+          actions.child(
+            RowActionButton('删除', (btn) => {
+              btn.variant('danger');
+              btn.on('click', () => onRemove(role));
+            })
+          );
         });
       });
-    },
-    refresh() {
-      renderRows();
-      return this;
-    }
-  };
+    });
+  }
 }

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

@@ -9,7 +9,7 @@ export function RoleListPage() {
   const dialog = RoleFormDialog({ onSubmit: saveRole });
   const toolbar = RoleToolbar({ onSearch: applyFilters, onAdd: () => dialog.open(null) });
   const table = RoleTable({
-    rows: () => state.items(),
+    rows: state.items,
     onEdit: (role) => dialog.open(role),
     onRemove: askRemove
   });
@@ -19,22 +19,26 @@ export function RoleListPage() {
     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))
     });
   }
 
@@ -42,13 +46,13 @@ export function RoleListPage() {
     state.setKeyword(values.keyword ?? '');
     state.setStatus(values.status ?? '');
     state.setPage(1);
-    state.load();
+    load();
   }
 
   async function askRemove(role) {
     const ok = await vConfirm({
       title: '删除角色',
-      content: `确定删除角色「${role.name}」？`,
+      content: `确定删除角色「${role.name.value}」？`,
       danger: true,
       confirmText: '删除'
     });
@@ -56,7 +60,7 @@ export function RoleListPage() {
       return;
     }
     await state.remove(role.id);
-    toast.success(`已删除 ${role.name}`);
+    toast.success(`已删除 ${role.name.value}`);
   }
 
   async function saveRole(editingId, payload) {
@@ -87,7 +91,7 @@ export function RoleListPage() {
       });
     },
     refresh() {
-      return state.load();
+      return load();
     }
   };
 }

package/templates/admin/src/shared/state.rows.js

@@ -0,0 +1,17 @@
+// 跨模块共享的纯状态工具：keyed 列表刷新时按 key 合并行模型。
+// 复用判据是行引用——能复用的行要原地 apply()，否则 keyed 会整行重建。
+
+/** 按 key 合并：命中的行原地 apply()（实例身份不变），新 key 才用入参里的新实例。 */
+export function mergeRowsByKey(previous, incoming, keyOf = (row) => row.id) {
+  const reusable = new Map(previous.map((row) => [keyOf(row), row]));
+
+  return incoming.map((row) => {
+    const current = reusable.get(keyOf(row));
+    return current && typeof current.apply === 'function' ? current.apply(row) : row;
+  });
+}
+
+/** 读字段值：行内热字段是句柄，裸行是普通值——apply() 与表单回填两种输入都吃。 */
+export function fieldValue(value) {
+  return value && typeof value.peek === 'function' ? value.peek() : value;
+}

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

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

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

@@ -1,73 +1,47 @@
 // 外壳状态类：会话（用户/角色/权限）+ 菜单 + 导航状态（当前模块 / 当前路径）的唯一事实源。
+// 导航字段用 ref 持有——组件绑句柄 / 读信号，写句柄即完成通知，不需要额外订阅转发。
 // load() 先加载会话并注入全局权限上下文，再按权限过滤菜单、创建路由并订阅导航。
+import { ref } from '@yoyaflow/yoya-ui';
 import { createAccess, currentAccess, installAccess } from '@yoyaflow/yoya-ui';
 import ShellReq from './shell.req.js';
 import { createAppRouter } from '../router.js';
 
 export default class ShellState {
   constructor() {
-    this._menus = [];
+    // 视图字段：顶栏 / 侧栏从这里派生高亮
+    this.menus = ref([]);
+    this.activeModuleKey = ref(null);
+    this.activePath = ref(null);
+    // 会话数据不参与渲染，按普通值持有
+    this.user = null;
+    this.permissions = [];
+    this.roles = [];
     this._router = null;
-    this._activeModuleKey = null;
-    this._activePath = null;
-    this._user = null;
-    this._permissions = [];
-    this._roles = [];
-    this._listeners = new Set();
     this._unsubscribeRouter = null;
   }
 
-  menus() {
-    return this._menus;
-  }
-
-  user() {
-    return this._user;
-  }
-
-  permissions() {
-    return this._permissions.slice();
-  }
-
-  roles() {
-    return this._roles.slice();
-  }
-
   router() {
     return this._router;
   }
 
-  activeModuleKey() {
-    return this._activeModuleKey;
-  }
-
-  activePath() {
-    return this._activePath;
-  }
-
-  subscribe(listener) {
-    this._listeners.add(listener);
-    return () => this._listeners.delete(listener);
-  }
-
   async load() {
     await this.loadSession();
 
     const result = await ShellReq.QueryMenus().submit();
-    this._menus = filterMenusByAccess(result.data);
-    this._router = createAppRouter(this._menus);
+    this.menus.value = filterMenusByAccess(result.data);
+    this._router = createAppRouter(this.menus.value);
+    // 路由是外部事件源：订阅它把路径写回导航信号（组件读信号，不再需要二次通知）
     this._unsubscribeRouter = this._router.subscribe((context) => this.syncFromPath(context.path));
-    this._emit();
     return result;
   }
 
   // 加载会话：当前用户 / 角色 / 权限码，并注入全局权限上下文。
   async loadSession() {
     const result = await ShellReq.Me().submit();
-    this._user = result.data.user;
-    this._permissions = [...(result.data.permissions || [])];
-    this._roles = [...(result.data.roles || [])];
-    installAccess(createAccess({ permissions: this.permissions(), roles: this.roles() }));
+    this.user = result.data.user;
+    this.permissions = [...(result.data.permissions || [])];
+    this.roles = [...(result.data.roles || [])];
+    installAccess(createAccess({ permissions: this.permissions, roles: this.roles }));
     return result;
   }
 
@@ -91,26 +65,20 @@ export default class ShellState {
     return this;
   }
 
+  // 路由回调 → 写入导航信号（值相同不通知，重复同步无副作用）。
   syncFromPath(path) {
-    const module = this._menus.find((entry) => entry.routes.some((route) => route.path === path));
-    const changed = this._activePath !== path || (module && this._activeModuleKey !== module.key);
-    this._activePath = path;
+    const module = this.menus
+      .peek()
+      .find((entry) => entry.routes.some((route) => route.path === path));
+    this.activePath.value = path;
     if (module) {
-      this._activeModuleKey = module.key;
-    }
-    if (changed) {
-      this._emit();
+      this.activeModuleKey.value = module.key;
     }
     return this;
   }
 
   destroy() {
     this._unsubscribeRouter?.();
-    this._listeners.clear();
-  }
-
-  _emit() {
-    this._listeners.forEach((listener) => listener());
   }
 }
 

package/templates/admin/src/shell/components/admin-shell.js

@@ -2,17 +2,9 @@ import { vBody, vRouterViews } from '@yoyaflow/yoya-ui';
 import { AppNavbar } from './app-navbar.js';
 import { AppSidebar } from './app-sidebar.js';
 
-// 外壳装配：只做布局组装与状态接线。路由与导航动作都在 ShellState。
-// URL 变化 → state.syncFromPath() → 状态通知 → 顶栏 / 侧栏从状态派生高亮。
+// 外壳装配：只做布局组装。路由与导航动作都在 ShellState，
+// URL 变化 → state.syncFromPath() 写入导航信号 → 顶栏 / 侧栏区域自行更新。
 export function AdminShell({ state }) {
-  const navbar = AppNavbar({ state });
-  const sidebar = AppSidebar({ state });
-
-  const unsubscribe = state.subscribe(() => {
-    navbar.applyState();
-    sidebar.applyState();
-  });
-
   return {
     render() {
       return vBody((shell) => {
@@ -23,20 +15,17 @@ export function AdminShell({ state }) {
           frame.viewport(true);
           frame.vHeader({ height: 56 }, (header) => {
             header.style('padding', '0');
-            header.child(navbar);
+            header.child(AppNavbar({ state }));
           });
           frame.vContainer((body) => {
             body.style({ flex: '1 1 auto', minHeight: '0' });
-            body.child(sidebar);
+            body.child(AppSidebar({ state }));
             body.vMain((main) => {
               main.child(vRouterViews(state.router(), { lockTitle: true, title: '内容区' }));
             });
           });
         });
       });
-    },
-    destroy() {
-      unsubscribe();
     }
   };
 }

package/templates/admin/src/shell/components/app-navbar.js

@@ -1,66 +1,58 @@
 import { vAvatar, vNavbar } from '@yoyaflow/yoya-ui';
 
+/**
+ * 顶栏：模块页签从 state 派生。菜单区是区域——先声明 rebuildable() 再读信号，
+ * 当前模块变化时重建页签，模块内换路由不会动它。
+ */
 export function AppNavbar({ state }) {
-  const items = new Map();
-
-  function applyState() {
-    const activeKey = state.activeModuleKey();
-    items.forEach((item, key) => {
-      item.active(key === activeKey);
-    });
-  }
-
-  return {
-    render() {
-      return vNavbar((nav) => {
-        nav.sticky(true);
-        nav.brand((brand) => {
-          brand.hstack({ gap: '10px' }, (row) => {
-            row.style({ alignItems: 'center', marginLeft: '16px' });
-            row.span((logo) => {
-              logo.style({
-                alignItems: 'center',
-                background: 'var(--yoya-color-primary, #2563eb)',
-                borderRadius: '8px',
-                boxSizing: 'border-box',
-                color: '#ffffff',
-                display: 'inline-flex',
-                fontSize: '16px',
-                fontWeight: '800',
-                height: '32px',
-                justifyContent: 'center',
-                lineHeight: '1',
-                width: '32px'
-              });
-              logo.text('y');
-            });
-            row.strong((name) => {
-              name.style({
-                color: 'var(--yoya-color-text-strong, #0f172a)',
-                fontSize: '16px',
-                fontWeight: '700'
-              });
-              name.text('yoya 管理台');
-            });
+  return vNavbar((nav) => {
+    nav.sticky(true);
+    nav.brand((brand) => {
+      brand.hstack({ gap: '10px' }, (row) => {
+        row.style({ alignItems: 'center', marginLeft: '16px' });
+        row.span((logo) => {
+          logo.style({
+            alignItems: 'center',
+            background: 'var(--yoya-color-primary, #2563eb)',
+            borderRadius: '8px',
+            boxSizing: 'border-box',
+            color: '#ffffff',
+            display: 'inline-flex',
+            fontSize: '16px',
+            fontWeight: '800',
+            height: '32px',
+            justifyContent: 'center',
+            lineHeight: '1',
+            width: '32px'
           });
+          logo.child('y');
         });
-        nav.menuContent((menu) => {
-          state.menus().forEach((module) => {
-            menu.vMenuItem((item) => {
-              item.text(module.label);
-              items.set(module.key, item);
-              item.on('click', () => state.switchModule(module));
-            });
+        row.strong((name) => {
+          name.style({
+            color: 'var(--yoya-color-text-strong, #0f172a)',
+            fontSize: '16px',
+            fontWeight: '700'
           });
+          name.child('yoya 管理台');
         });
-        nav.actions((actions) => {
-          actions.vThemeModeSwitch({ persist: true });
-          const avatar = vAvatar({ color: '#2563eb', size: 'small', text: '管' });
-          avatar.style('marginRight', '16px');
-          actions.child(avatar);
+      });
+    });
+    nav.menuContent((menu) => {
+      menu.rebuildable();
+      const activeKey = state.activeModuleKey.value;
+      state.menus.value.forEach((module) => {
+        menu.vMenuItem((item) => {
+          item.child(module.label);
+          item.active(module.key === activeKey);
+          item.on('click', () => state.switchModule(module));
         });
       });
-    },
-    applyState
-  };
+    });
+    nav.actions((actions) => {
+      actions.vThemeModeSwitch({ persist: true });
+      const avatar = vAvatar({ color: '#2563eb', size: 'small', text: '管' });
+      avatar.style('marginRight', '16px');
+      actions.child(avatar);
+    });
+  });
 }

package/templates/admin/src/shell/components/app-sidebar.js

@@ -1,44 +1,33 @@
 import { vSidebar } from '@yoyaflow/yoya-ui';
 import { SidebarMenu } from './sidebar-menu.js';
 
+/**
+ * 左侧菜单：菜单区是区域——先声明 rebuildable() 再读信号，
+ * 当前模块或当前路径变化时重建菜单（菜单项很少，重建比逐项同步更直接）。
+ */
 export function AppSidebar({ state }) {
-  let sidebar = null;
-
-  function render() {
-    sidebar = vSidebar((side) => {
-      side.ariaLabel('左侧菜单');
-      side.title('导航');
-      side.collapsible(false);
-      side.style({
-        flex: '0 0 auto',
-        width: '220px',
-        gridTemplateRows: 'auto minmax(0, 1fr)'
-      });
+  return vSidebar((side) => {
+    side.ariaLabel('左侧菜单');
+    side.title('导航');
+    side.collapsible(false);
+    side.style({
+      flex: '0 0 auto',
+      width: '220px',
+      gridTemplateRows: 'auto minmax(0, 1fr)'
     });
-    return sidebar;
-  }
-
-  function applyState() {
-    if (!sidebar) {
-      return;
-    }
-    const module = state.menus().find((entry) => entry.key === state.activeModuleKey());
-    if (!module) {
-      return;
-    }
-    sidebar.menuContent((menu) => {
+    side.menuContent((menu) => {
+      menu.rebuildable();
+      const module = state.menus.value.find((entry) => entry.key === state.activeModuleKey.value);
+      if (!module) {
+        return;
+      }
       menu.child(
         SidebarMenu({
           module,
-          activePath: state.activePath(),
+          activePath: state.activePath.value,
           onNavigate: (path) => state.navigate(path)
         })
       );
     });
-  }
-
-  return {
-    render,
-    applyState
-  };
+  });
 }

package/templates/admin/src/shell/components/sidebar-menu.js

@@ -5,7 +5,7 @@ export function SidebarMenu({ module, activePath, onNavigate }) {
     group.label(module.label);
     module.routes.forEach((route) => {
       group.vMenuItem((item) => {
-        item.text(route.title);
+        item.child(route.title);
         item.active(route.path === activePath);
         item.on('click', () => onNavigate(route.path));
       });

package/templates/basic/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@yoyaflow/yoya-ui": "^0.4.0"
+    "@yoyaflow/yoya-ui": "^0.6.0"
   },
   "devDependencies": {
     "vite": "^8.2.0"