create-yoya-ui 0.2.0 → 0.2.2

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

@@ -51,7 +51,7 @@ class Create extends RequestBase {
 }
 
 class Update extends RequestBase {
-  constructor(id, { name = '', email = '', role = 'viewer', status = 'active' } = {}) {
+  constructor({ id, name = '', email = '', role = 'viewer', status = 'active' } = {}) {
     super();
     this.id = id;
     this.name = name;
@@ -78,7 +78,7 @@ class Update extends RequestBase {
 }
 
 class Remove extends RequestBase {
-  constructor(id) {
+  constructor({ id } = {}) {
     super();
     this.id = id;
   }
@@ -92,4 +92,9 @@ class Remove extends RequestBase {
   }
 }
 
-export default { Query, Create, Update, Remove };
+export default {
+  Query: (init) => new Query(init),
+  Create: (init) => new Create(init),
+  Update: (init) => new Update(init),
+  Remove: (init) => new Remove(init)
+};

package/templates/admin/src/features/{members → system/members}/api/member.mock.js

@@ -1,5 +1,5 @@
 // 演示用内存 mock（接入真实后端后删除本文件）。
-import { mockRequest } from '../../../api/domain.api.js';
+import { mockRequest } from '../../../../api/domain.api.js';
 
 let members = [
   { id: 1, name: '张伟', email: 'zhangwei@example.com', role: 'admin', status: 'active' },

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

@@ -10,7 +10,7 @@ declare class QueryAvailable extends RequestBase {
 }
 
 declare const MemberReq: {
-  QueryAvailable: typeof QueryAvailable;
+  QueryAvailable: (init?: unknown) => QueryAvailable;
 };
 
 export default MemberReq;

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

@@ -12,4 +12,6 @@ class QueryAvailable extends RequestBase {
   }
 }
 
-export default { QueryAvailable };
+export default {
+  QueryAvailable: (init) => new QueryAvailable(init)
+};

package/templates/admin/src/features/{members → system/members}/api/member.state.js

@@ -58,7 +58,7 @@ export default class MembersPageState {
   }
 
   async load() {
-    const result = await new MemberMgr.Query({
+    const result = await MemberMgr.Query({
       page: this._page,
       pageSize: this._pageSize,
       keyword: this._keyword,
@@ -71,20 +71,20 @@ export default class MembersPageState {
   }
 
   async add(payload) {
-    await new MemberMgr.Create(payload).submit();
+    await MemberMgr.Create(payload).submit();
     this._page = 1;
     await this.load();
     return payload;
   }
 
   async edit(id, patch) {
-    await new MemberMgr.Update(id, patch).submit();
+    await MemberMgr.Update({ id, ...patch }).submit();
     await this.load();
     return patch;
   }
 
   async remove(id) {
-    await new MemberMgr.Remove(id).submit();
+    await MemberMgr.Remove({ id }).submit();
     if (this._items.length === 1 && this._page > 1) {
       this._page -= 1;
     }

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

@@ -1,5 +1,5 @@
 import { vTable } from '@yoyaflow/yoya-ui';
-import { RowActionButton } from '../../../ui/row-action-button.js';
+import { RowActionButton } from '../../../../shared/ui.buttons.js';
 import { statusText } from '../utils/options.js';
 
 export function MemberTable({ rows, onEdit, onRemove }) {

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

@@ -11,8 +11,7 @@ declare class QueryTree extends RequestBase {
 
 declare class Create extends RequestBase {
   constructor(
-    parentId: number | null,
-    init?: { name?: string; code?: string; type?: PermissionType; sort?: number }
+    init?: { parentId: number | null; name?: string; code?: string; type?: PermissionType; sort?: number }
   );
   method(): 'POST';
   address(): string;
@@ -21,8 +20,7 @@ declare class Create extends RequestBase {
 
 declare class Update extends RequestBase {
   constructor(
-    id: number,
-    init?: { name?: string; code?: string; type?: PermissionType; sort?: number }
+    init?: { id: number; name?: string; code?: string; type?: PermissionType; sort?: number }
   );
   method(): 'PUT';
   address(): string;
@@ -30,16 +28,20 @@ declare class Update extends RequestBase {
 }
 
 declare class Remove extends RequestBase {
-  constructor(id: number);
+  constructor(init?: { id: number });
   method(): 'DELETE';
   address(): string;
 }
 
 declare const PermissionMgr: {
-  QueryTree: typeof QueryTree;
-  Create: typeof Create;
-  Update: typeof Update;
-  Remove: typeof Remove;
+  QueryTree: (init?: unknown) => QueryTree;
+  Create: (
+    init?: { parentId: number | null; name?: string; code?: string; type?: PermissionType; sort?: number }
+  ) => Create;
+  Update: (
+    init?: { id: number; name?: string; code?: string; type?: PermissionType; sort?: number }
+  ) => Update;
+  Remove: (init?: { id: number }) => Remove;
 };
 
 export default PermissionMgr;

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

@@ -16,9 +16,9 @@ class QueryTree extends RequestBase {
 }
 
 class Create extends RequestBase {
-  constructor(parentId, { name = '', code = '', type = 'menu', sort = 0 } = {}) {
+  constructor({ parentId = null, name = '', code = '', type = 'menu', sort = 0 } = {}) {
     super();
-    this.parentId = parentId ?? null;
+    this.parentId = parentId;
     this.name = name;
     this.code = code;
     this.type = type;
@@ -39,7 +39,7 @@ class Create extends RequestBase {
 }
 
 class Update extends RequestBase {
-  constructor(id, { name = '', code = '', type = 'menu', sort = 0 } = {}) {
+  constructor({ id, name = '', code = '', type = 'menu', sort = 0 } = {}) {
     super();
     this.id = id;
     this.name = name;
@@ -62,7 +62,7 @@ class Update extends RequestBase {
 }
 
 class Remove extends RequestBase {
-  constructor(id) {
+  constructor({ id } = {}) {
     super();
     this.id = id;
   }
@@ -76,4 +76,9 @@ class Remove extends RequestBase {
   }
 }
 
-export default { QueryTree, Create, Update, Remove };
+export default {
+  QueryTree: (init) => new QueryTree(init),
+  Create: (init) => new Create(init),
+  Update: (init) => new Update(init),
+  Remove: (init) => new Remove(init)
+};

package/templates/admin/src/features/{permissions → system/permissions}/api/permission.mock.js

@@ -1,5 +1,5 @@
 // 权限演示用内存 mock（接入真实后端后删除本文件）。
-import { mockRequest } from '../../../api/domain.api.js';
+import { mockRequest } from '../../../../api/domain.api.js';
 
 let permissions = [
   { id: 1, parentId: null, name: '工作台', code: 'dashboard', type: 'menu', sort: 1 },

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

@@ -17,26 +17,26 @@ export default class PermissionsPageState {
   }
 
   async load() {
-    const result = await new PermissionMgr.QueryTree().submit();
+    const result = await PermissionMgr.QueryTree().submit();
     this._tree = result.data;
     this._emit();
     return result;
   }
 
   async add(parentId, payload) {
-    await new PermissionMgr.Create(parentId, payload).submit();
+    await PermissionMgr.Create({ parentId, ...payload }).submit();
     await this.load();
     return payload;
   }
 
   async edit(id, payload) {
-    await new PermissionMgr.Update(id, payload).submit();
+    await PermissionMgr.Update({ id, ...payload }).submit();
     await this.load();
     return payload;
   }
 
   async remove(id) {
-    await new PermissionMgr.Remove(id).submit();
+    await PermissionMgr.Remove({ id }).submit();
     await this.load();
   }
 

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

@@ -1,5 +1,5 @@
 import { toast, vDialog, vTree, vstack } from '@yoyaflow/yoya-ui';
-import { RowActionButton } from '../../../ui/row-action-button.js';
+import { RowActionButton } from '../../../../shared/ui.buttons.js';
 import PermissionsPageState from '../api/permission.state.js';
 import { PermissionFormDialog } from '../components/permission-form-dialog.js';
 

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

@@ -27,8 +27,8 @@ declare class Create extends RequestBase {
 
 declare class Update extends RequestBase {
   constructor(
-    id: number,
     init?: {
+      id: number;
       name?: string;
       code?: string;
       description?: string;
@@ -42,16 +42,29 @@ declare class Update extends RequestBase {
 }
 
 declare class Remove extends RequestBase {
-  constructor(id: number);
+  constructor(init?: { id: number });
   method(): 'DELETE';
   address(): string;
 }
 
 declare const RoleMgr: {
-  Query: typeof Query;
-  Create: typeof Create;
-  Update: typeof Update;
-  Remove: typeof Remove;
+  Query: (
+    init?: { page?: number; pageSize?: number; keyword?: string; status?: string }
+  ) => Query;
+  Create: (
+    init?: { name?: string; code?: string; description?: string; status?: RoleStatus; sort?: number }
+  ) => Create;
+  Update: (
+    init?: {
+      id: number;
+      name?: string;
+      code?: string;
+      description?: string;
+      status?: RoleStatus;
+      sort?: number;
+    }
+  ) => Update;
+  Remove: (init?: { id: number }) => Remove;
 };
 
 export default RoleMgr;

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

@@ -54,7 +54,7 @@ class Create extends RequestBase {
 }
 
 class Update extends RequestBase {
-  constructor(id, { name = '', code = '', description = '', status = 'active', sort = 0 } = {}) {
+  constructor({ id, name = '', code = '', description = '', status = 'active', sort = 0 } = {}) {
     super();
     this.id = id;
     this.name = name;
@@ -84,7 +84,7 @@ class Update extends RequestBase {
 }
 
 class Remove extends RequestBase {
-  constructor(id) {
+  constructor({ id } = {}) {
     super();
     this.id = id;
   }
@@ -98,4 +98,9 @@ class Remove extends RequestBase {
   }
 }
 
-export default { Query, Create, Update, Remove };
+export default {
+  Query: (init) => new Query(init),
+  Create: (init) => new Create(init),
+  Update: (init) => new Update(init),
+  Remove: (init) => new Remove(init)
+};

package/templates/admin/src/features/{roles → system/roles}/api/role.mock.js

@@ -1,5 +1,5 @@
 // 角色演示用内存 mock（接入真实后端后删除本文件）。
-import { mockRequest } from '../../../api/domain.api.js';
+import { mockRequest } from '../../../../api/domain.api.js';
 
 let roles = [
   { id: 1, name: '超级管理员', code: 'super_admin', description: '拥有全部权限', status: 'active', sort: 1 },

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

@@ -58,7 +58,7 @@ export default class RolesPageState {
   }
 
   async load() {
-    const result = await new RoleMgr.Query({
+    const result = await RoleMgr.Query({
       page: this._page,
       pageSize: this._pageSize,
       keyword: this._keyword,
@@ -71,20 +71,20 @@ export default class RolesPageState {
   }
 
   async add(payload) {
-    await new RoleMgr.Create(payload).submit();
+    await RoleMgr.Create(payload).submit();
     this._page = 1;
     await this.load();
     return payload;
   }
 
   async edit(id, patch) {
-    await new RoleMgr.Update(id, patch).submit();
+    await RoleMgr.Update({ id, ...patch }).submit();
     await this.load();
     return patch;
   }
 
   async remove(id) {
-    await new RoleMgr.Remove(id).submit();
+    await RoleMgr.Remove({ id }).submit();
     if (this._items.length === 1 && this._page > 1) {
       this._page -= 1;
     }

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

@@ -1,5 +1,5 @@
 import { vTable } from '@yoyaflow/yoya-ui';
-import { RowActionButton } from '../../../ui/row-action-button.js';
+import { RowActionButton } from '../../../../shared/ui.buttons.js';
 import { statusText } from '../utils/options.js';
 
 export function RoleTable({ rows, onEdit, onRemove }) {

package/templates/admin/src/main.js

@@ -1,18 +1,22 @@
 import { initYoyaTheme } from '@yoyaflow/yoya-ui';
 import '@yoyaflow/yoya-ui/ui.css';
 import './api/domain.api.js';
-import './features/members/api/member.mock.js';
-import './features/permissions/api/permission.mock.js';
-import './features/roles/api/role.mock.js';
-import './features/dicts/api/dict.mock.js';
-import { modules } from './app/modules.js';
-import { createAppRouter } from './app/router.js';
-import { AdminShell } from './app/admin-shell.js';
+import './features/system/members/api/member.mock.js';
+import './features/system/permissions/api/permission.mock.js';
+import './features/system/roles/api/role.mock.js';
+import './features/system/dicts/api/dict.mock.js';
+import './shell/api/shell.mock.js';
+import ShellState from './shell/api/shell.state.js';
+import { AdminShell } from './shell/components/admin-shell.js';
 
 initYoyaTheme();
 
-const router = createAppRouter();
-const shell = AdminShell({ router, modules });
-shell.render().bindTo('#app');
-router.start();
-shell.syncFromUrl();
+async function bootstrap() {
+  const state = new ShellState();
+  await state.load();
+  const shell = AdminShell({ state });
+  shell.render().bindTo('#app');
+  state.start();
+}
+
+bootstrap();

package/templates/admin/src/{ui/row-action-button.js → shared/ui.buttons.js}

@@ -1,5 +1,6 @@
 import { vButton } from '@yoyaflow/yoya-ui';
 
+// 共享 UI：按钮类（跨模块复用的通用按钮，按类别集中管理）。
 // 表格/树行内操作按钮：小尺寸、常规字重，避免行内文字显得粗重。
 export function RowActionButton(text, setup = null) {
   return vButton(text, (btn) => {

package/templates/admin/src/{ui/placeholder-page.js → shared/ui.pages.js}

@@ -1,5 +1,6 @@
 import { toast, vstack } from '@yoyaflow/yoya-ui';
 
+// 共享 UI：页面类（跨模块复用的通用页面组件，如路由占位页）。
 export function PlaceholderPage({ title, text }) {
   return vstack({ gap: '16px' }, (stack) => {
     stack.h2(title);

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

@@ -0,0 +1,42 @@
+// 演示用内存 mock（接入真实后端后删除本文件）。
+import { mockRequest } from '../../api/domain.api.js';
+
+const delay = (ms = 200) => new Promise((resolve) => setTimeout(resolve, ms));
+
+mockRequest('GET', '/menus', async () => {
+  await delay();
+  return {
+    ok: true,
+    data: [
+      {
+        key: 'dashboard',
+        label: '工作台',
+        icon: 'D',
+        routes: [
+          { path: '/dashboard/overview', title: '数据概览', viewKey: 'dashboard-overview' },
+          { path: '/dashboard/todos', title: '待办审批', viewKey: 'todo-approval' }
+        ]
+      },
+      {
+        key: 'ops',
+        label: '运维',
+        icon: 'O',
+        routes: [
+          { path: '/ops/services', title: '服务清单', viewKey: 'service-list' },
+          { path: '/ops/deploys', title: '部署任务', viewKey: 'deploy-list' }
+        ]
+      },
+      {
+        key: 'system',
+        label: '系统',
+        icon: 'S',
+        routes: [
+          { path: '/system/members', title: '成员管理', viewKey: 'member-list' },
+          { path: '/system/roles', title: '角色管理', viewKey: 'role-list' },
+          { path: '/system/permissions', title: '权限管理', viewKey: 'permission-list' },
+          { path: '/system/dicts', title: '字典管理', viewKey: 'dict-list' }
+        ]
+      }
+    ]
+  };
+});

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

@@ -0,0 +1,17 @@
+// 外壳请求命令：其他模块（启动装配）调用本域能力的入口，方便后续替换为服务端接口（去掉 mock 即可）。
+import { RequestBase } from '@yoyaflow/yoya-ui';
+import Shell from './shell.views.js';
+
+class QueryMenus extends RequestBase {
+  address() {
+    return '/menus';
+  }
+
+  toItem(row) {
+    return new Shell.Module(row);
+  }
+}
+
+export default {
+  QueryMenus: (init) => new QueryMenus(init)
+};

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

@@ -0,0 +1,90 @@
+// 外壳状态类：菜单数据 + 导航状态（当前模块 / 当前路径）的唯一事实源，
+// 加载时创建并持有路由，暴露导航动作（switchModule / navigate），由路由订阅驱动 syncFromPath。
+import ShellReq from './shell.req.js';
+import { createAppRouter } from '../router.js';
+
+export default class ShellState {
+  constructor() {
+    this._menus = [];
+    this._router = null;
+    this._activeModuleKey = null;
+    this._activePath = null;
+    this._listeners = new Set();
+    this._unsubscribeRouter = null;
+  }
+
+  menus() {
+    return this._menus;
+  }
+
+  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() {
+    const result = await ShellReq.QueryMenus().submit();
+    this._menus = result.data;
+    this._router = createAppRouter(this._menus);
+    this._unsubscribeRouter = this._router.subscribe((context) => this.syncFromPath(context.path));
+    this._emit();
+    return result;
+  }
+
+  start() {
+    this._router?.start();
+    return this;
+  }
+
+  // 顶栏切换模块：进入模块首个路由。
+  switchModule(module) {
+    const first = module?.routes?.[0];
+    if (first) {
+      this._router?.navigate(first.path);
+    }
+    return this;
+  }
+
+  // 侧栏 / 任意入口：打开指定路径。
+  navigate(path) {
+    this._router?.navigate(path);
+    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;
+    if (module) {
+      this._activeModuleKey = module.key;
+    }
+    if (changed) {
+      this._emit();
+    }
+    return this;
+  }
+
+  destroy() {
+    this._unsubscribeRouter?.();
+    this._listeners.clear();
+  }
+
+  _emit() {
+    this._listeners.forEach((listener) => listener());
+  }
+}

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

@@ -0,0 +1,19 @@
+// 外壳结果结构（纯数据）：菜单模块与路由，服务端返回后由 toItem 映射。
+class Route {
+  constructor({ path, title, viewKey }) {
+    this.path = path;
+    this.title = title;
+    this.viewKey = viewKey;
+  }
+}
+
+class Module {
+  constructor({ key, label, icon, routes = [] }) {
+    this.key = key;
+    this.label = label;
+    this.icon = icon;
+    this.routes = routes.map((route) => new Route(route));
+  }
+}
+
+export default { Module, Route };

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

@@ -0,0 +1,42 @@
+import { vBody, vRouterViews } from '@yoyaflow/yoya-ui';
+import { AppNavbar } from './app-navbar.js';
+import { AppSidebar } from './app-sidebar.js';
+
+// 外壳装配：只做布局组装与状态接线。路由与导航动作都在 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) => {
+        shell.gap(0);
+        shell.maxWidth('100%');
+        shell.padding(0);
+        shell.vContainer((frame) => {
+          frame.viewport(true);
+          frame.vHeader({ height: 56 }, (header) => {
+            header.style('padding', '0');
+            header.child(navbar);
+          });
+          frame.vContainer((body) => {
+            body.style({ flex: '1 1 auto', minHeight: '0' });
+            body.child(sidebar);
+            body.vMain((main) => {
+              main.child(vRouterViews(state.router(), { lockTitle: true, title: '内容区' }));
+            });
+          });
+        });
+      });
+    },
+    destroy() {
+      unsubscribe();
+    }
+  };
+}

package/templates/admin/src/{ui → shell/components}/app-navbar.js

@@ -1,8 +1,14 @@
 import { vAvatar, vNavbar } from '@yoyaflow/yoya-ui';
 
-export function AppNavbar({ modules, onModuleChange }) {
+export function AppNavbar({ state }) {
   const items = new Map();
-  let activeKey = null;
+
+  function applyState() {
+    const activeKey = state.activeModuleKey();
+    items.forEach((item, key) => {
+      item.active(key === activeKey);
+    });
+  }
 
   return {
     render() {
@@ -39,11 +45,11 @@ export function AppNavbar({ modules, onModuleChange }) {
           });
         });
         nav.menuContent((menu) => {
-          modules.forEach((module) => {
+          state.menus().forEach((module) => {
             menu.vMenuItem((item) => {
               item.text(module.label);
               items.set(module.key, item);
-              item.on('click', () => onModuleChange(module));
+              item.on('click', () => state.switchModule(module));
             });
           });
         });
@@ -55,13 +61,6 @@ export function AppNavbar({ modules, onModuleChange }) {
         });
       });
     },
-    activate(key) {
-      if (activeKey && activeKey !== key) {
-        items.get(activeKey)?.active(false);
-      }
-      activeKey = key;
-      items.get(key)?.active(true);
-      return this;
-    }
+    applyState
   };
 }