create-yoya-ui 0.2.1 → 0.2.3

package/templates/admin/src/features/{dicts → system/dicts}/api/dict.state.js

@@ -6,6 +6,9 @@ export default class DictsPageState {
     this._types = [];
     this._selectedTypeId = null;
     this._items = [];
+    this._page = 1;
+    this._pageSize = 10;
+    this._total = 0;
     this._listeners = new Set();
   }
 
@@ -25,14 +28,38 @@ export default class DictsPageState {
     return this._items;
   }
 
+  page() {
+    return this._page;
+  }
+
+  pageSize() {
+    return this._pageSize;
+  }
+
+  total() {
+    return this._total;
+  }
+
+  setPage(value) {
+    this._page = 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);
   }
 
   async loadTypes() {
-    const result = await new DictMgr.QueryTypes().submit();
+    const result = await DictMgr.QueryTypes({
+      page: this._page,
+      pageSize: this._pageSize
+    }).submit();
     this._types = result.data;
+    this._total = result.total;
     if (!this._selectedTypeId && this._types.length > 0) {
       this._selectedTypeId = this._types[0].id;
     }
@@ -53,46 +80,50 @@ export default class DictsPageState {
       this._items = [];
       return;
     }
-    const result = await new DictMgr.QueryItems(this._selectedTypeId).submit();
+    const result = await DictMgr.QueryItems({ typeId: this._selectedTypeId }).submit();
     this._items = result.data;
   }
 
   async addType(payload) {
-    await new DictMgr.CreateType(payload).submit();
+    await DictMgr.CreateType(payload).submit();
+    this._page = 1;
     await this.loadTypes();
     return payload;
   }
 
   async editType(id, payload) {
-    await new DictMgr.UpdateType(id, payload).submit();
+    await DictMgr.UpdateType({ id, ...payload }).submit();
     await this.loadTypes();
     return payload;
   }
 
   async removeType(id) {
-    await new DictMgr.RemoveType(id).submit();
+    await DictMgr.RemoveType({ id }).submit();
     if (this._selectedTypeId === id) {
       this._selectedTypeId = null;
     }
+    if (this._types.length === 1 && this._page > 1) {
+      this._page -= 1;
+    }
     await this.loadTypes();
   }
 
   async addItem(payload) {
-    await new DictMgr.CreateItem(this._selectedTypeId, payload).submit();
+    await DictMgr.CreateItem({ typeId: this._selectedTypeId, ...payload }).submit();
     await this.loadItems();
     this._emit();
     return payload;
   }
 
   async editItem(id, payload) {
-    await new DictMgr.UpdateItem(id, payload).submit();
+    await DictMgr.UpdateItem({ id, ...payload }).submit();
     await this.loadItems();
     this._emit();
     return payload;
   }
 
   async removeItem(id) {
-    await new DictMgr.RemoveItem(id).submit();
+    await DictMgr.RemoveItem({ id }).submit();
     await this.loadItems();
     this._emit();
   }

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

@@ -1,5 +1,5 @@
 import { toast, vDialog, vTable } from '@yoyaflow/yoya-ui';
-import { RowActionButton } from '../../../ui/row-action-button.js';
+import { RowActionButton } from '../../../../shared/ui.buttons.js';
 import { DictItemFormDialog } from './dict-item-form-dialog.js';
 import { statusOptions, statusText } from '../utils/options.js';
 

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

@@ -1,5 +1,5 @@
-import { toast, vDialog, vTable, vstack } from '@yoyaflow/yoya-ui';
-import { RowActionButton } from '../../../ui/row-action-button.js';
+import { toast, vDialog, vPagination, vTable, 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';
 import { statusText } from '../utils/options.js';
@@ -8,13 +8,30 @@ export function DictListPage() {
   const state = new DictsPageState();
   const editorDialog = DictEditorDialog({ state, onSubmit: saveType });
   const confirmDialog = vDialog();
+  const pagination = vPagination({
+    pageSize: 10,
+    pageSizes: [10, 20, 50],
+    onChange({ page: nextPage, pageSize: nextSize }) {
+      state.setPage(nextPage);
+      state.setPageSize(nextSize);
+      state.loadTypes();
+    }
+  });
   let typesBody = null;
 
-  state.subscribe(render);
+  state.subscribe(() => {
+    renderTypes();
+    syncPagination();
+  });
   state.loadTypes();
 
-  function render() {
-    renderTypes();
+  function syncPagination() {
+    pagination.update({
+      page: state.page(),
+      pageSize: state.pageSize(),
+      total: state.total(),
+      totalPages: Math.max(1, Math.ceil(state.total() / state.pageSize()))
+    });
   }
 
   function renderTypes() {
@@ -93,23 +110,26 @@ export function DictListPage() {
             });
           });
           card.vCardBody((body) => {
-            body.child(
-              vTable((table) => {
-                table.vThead((head) => {
-                  head.vTr((row) => {
-                    row.vTh('名称');
-                    row.vTh('编码');
-                    row.vTh('状态');
-                    row.vTh('备注');
-                    row.vTh('操作');
+            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('操作');
+                    });
                   });
-                });
-                table.vTbody((bodyNode) => {
-                  typesBody = bodyNode;
-                  renderTypes();
-                });
-              })
-            );
+                  table.vTbody((bodyNode) => {
+                    typesBody = bodyNode;
+                    renderTypes();
+                  });
+                })
+              );
+              content.child(pagination);
+            });
           });
         });
         stack.child(editorDialog);

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

@@ -21,10 +21,7 @@ declare class Create extends RequestBase {
 }
 
 declare class Update extends RequestBase {
-  constructor(
-    id: number,
-    init?: { name?: string; email?: string; role?: string; status?: string }
-  );
+  constructor(init?: { id: number; name?: string; email?: string; role?: string; status?: string });
   method(): 'PUT';
   address(): string;
   body(): { name: string; email: string; role: string; status: string };
@@ -32,16 +29,20 @@ declare class Update extends RequestBase {
 }
 
 declare class Remove extends RequestBase {
-  constructor(id: number);
+  constructor(init?: { id: number });
   method(): 'DELETE';
   address(): string;
 }
 
 declare const MemberMgr: {
-  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; email?: string; role?: string; status?: string }) => Create;
+  Update: (
+    init?: { id: number; name?: string; email?: string; role?: string; status?: string }
+  ) => Update;
+  Remove: (init?: { id: number }) => Remove;
 };
 
 export default MemberMgr;

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);