create-yoya-ui 0.1.2 → 0.2.0

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

@@ -0,0 +1,14 @@
+/** 权限页状态类类型声明（对应 permission.state.js）。 */
+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>;
+  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/permissions/api/permission.state.js

@@ -0,0 +1,46 @@
+// 权限页状态类：持有权限树，动作构造命令并 submit 后写入状态、通知订阅者。
+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);
+  }
+
+  async load() {
+    const result = await new PermissionMgr.QueryTree().submit();
+    this._tree = result.data;
+    this._emit();
+    return result;
+  }
+
+  async add(parentId, payload) {
+    await new PermissionMgr.Create(parentId, payload).submit();
+    await this.load();
+    return payload;
+  }
+
+  async edit(id, payload) {
+    await new PermissionMgr.Update(id, payload).submit();
+    await this.load();
+    return payload;
+  }
+
+  async remove(id) {
+    await new PermissionMgr.Remove(id).submit();
+    await this.load();
+  }
+
+  _emit() {
+    this._listeners.forEach((listener) => listener());
+  }
+}

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

@@ -0,0 +1,27 @@
+/** 权限结果结构类型声明（对应 permission.views.js）。 */
+export type PermissionType = 'menu' | 'button';
+
+export class PermissionNode {
+  id: number;
+  parentId: number | null;
+  name: string;
+  code: string;
+  type: PermissionType;
+  sort: number;
+  children: PermissionNode[];
+  constructor(init?: {
+    id: number;
+    parentId?: number | null;
+    name?: string;
+    code?: string;
+    type?: PermissionType;
+    sort?: number;
+    children?: PermissionNode[];
+  });
+}
+
+declare const Permissions: {
+  PermissionNode: typeof PermissionNode;
+};
+
+export default Permissions;

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

@@ -0,0 +1,14 @@
+// 权限结果结构（纯数据）。
+class PermissionNode {
+  constructor({ id, parentId = null, name = '', code = '', type = 'menu', sort = 0, children = [] } = {}) {
+    this.id = id;
+    this.parentId = parentId;
+    this.name = name;
+    this.code = code;
+    this.type = type;
+    this.sort = sort;
+    this.children = children;
+  }
+}
+
+export default { PermissionNode };

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

@@ -0,0 +1,98 @@
+import { vDialog } from '@yoyaflow/yoya-ui';
+
+const typeOptions = [
+  ['menu', '菜单'],
+  ['button', '按钮']
+];
+
+const rowStyle = {
+  alignItems: 'center',
+  display: 'grid',
+  gap: '12px',
+  gridTemplateColumns: '88px minmax(0, 1fr)',
+  minWidth: '0'
+};
+
+export function PermissionFormDialog({ onSubmit }) {
+  const dialog = vDialog();
+  let editingId = null;
+  let parentId = null;
+
+  function open({ node = null, parentId: nextParentId = null, parentName = '' } = {}) {
+    editingId = node?.id ?? null;
+    parentId = nextParentId;
+    dialog.content((content) => {
+      content.vForm((form) => {
+        if (parentName) {
+          form.p((p) => {
+            p.style({
+              color: 'var(--yoya-color-text-secondary, #475569)',
+              gridColumn: '1 / -1',
+              margin: '0',
+              padding: '0'
+            });
+            p.text(`父级：${parentName}`);
+          });
+        }
+        buildFormFields(form, node);
+        form.vButton('保存', (btn) => {
+          btn.variant('primary');
+          btn.style({ gridColumn: '1 / -1', justifySelf: 'end', marginTop: '16px' });
+          btn.on('click', () => save(form));
+        });
+      });
+    });
+    dialog.open(true);
+  }
+
+  function buildFormFields(form, node) {
+    form.styles({
+      border: '1px solid var(--yoya-color-border, #d8dee8)',
+      borderRadius: '8px',
+      display: 'grid',
+      gap: '16px',
+      gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+      padding: '16px'
+    });
+    form.vFormItem((item) => {
+      item.styles(rowStyle);
+      item.label('名称').name('name').required({ message: '请填写名称' });
+      item.control((editor) => editor.vInput({ name: 'name', value: node?.name ?? '' }));
+    });
+    form.vFormItem((item) => {
+      item.styles(rowStyle);
+      item.label('权限标识').name('code').required({ message: '请填写权限标识' });
+      item.control((editor) => editor.vInput({ name: 'code', value: node?.code ?? '' }));
+    });
+    form.vFormItem((item) => {
+      item.styles(rowStyle);
+      item.label('类型').name('type');
+      item.control((editor) =>
+        editor.vSelect({ name: 'type', options: typeOptions, value: node?.type ?? 'menu' })
+      );
+    });
+    form.vFormItem((item) => {
+      item.styles(rowStyle);
+      item.label('排序').name('sort');
+      item.control((editor) => editor.vInput({ name: 'sort', value: String(node?.sort ?? 0) }));
+    });
+  }
+
+  async function save(form) {
+    if (!form.validate()) {
+      return;
+    }
+    await onSubmit(editingId, parentId, form.values());
+    dialog.close();
+  }
+
+  return {
+    render() {
+      return dialog;
+    },
+    open,
+    close() {
+      dialog.close();
+    }
+  };
+}

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

@@ -0,0 +1,98 @@
+import { toast, vDialog, vTree, vstack } from '@yoyaflow/yoya-ui';
+import { RowActionButton } from '../../../ui/row-action-button.js';
+import PermissionsPageState from '../api/permission.state.js';
+import { PermissionFormDialog } from '../components/permission-form-dialog.js';
+
+export function PermissionListPage() {
+  const state = new PermissionsPageState();
+  const dialog = PermissionFormDialog({ onSubmit: savePermission });
+  const confirmDialog = vDialog();
+  const tree = vTree({ ariaLabel: '权限树' });
+
+  state.subscribe(() => {
+    tree.nodes(buildTreeNodes(state.tree()));
+  });
+  state.load();
+
+  function buildTreeNodes(nodes) {
+    return nodes.map((node) => ({
+      id: String(node.id),
+      label: node.name,
+      expanded: true,
+      children: buildTreeNodes(node.children ?? []),
+      actions: (actions) => {
+        actions.child(
+          RowActionButton('新增子权限', (btn) =>
+            btn.on('click', () => dialog.open({ parentId: node.id, parentName: node.name }))
+          )
+        );
+        actions.child(
+          RowActionButton('编辑', (btn) => btn.on('click', () => dialog.open({ node })))
+        );
+        actions.child(
+          RowActionButton('删除', (btn) => {
+            btn.variant('danger');
+            btn.on('click', () => askRemove(node));
+          })
+        );
+      }
+    }));
+  }
+
+  function askRemove(node) {
+    confirmDialog.content((content) => {
+      content.p(`确定删除权限「${node.name}」及其子权限？`);
+      content.hstack({ gap: '8px' }, (row) => {
+        row.spacer();
+        row.vButton('取消', (btn) => btn.on('click', () => confirmDialog.close()));
+        row.vButton('删除', (btn) => {
+          btn.variant('danger');
+          btn.on('click', async () => {
+            confirmDialog.close();
+            await state.remove(node.id);
+            toast.success(`已删除 ${node.name}`);
+          });
+        });
+      });
+    });
+    confirmDialog.open(true);
+  }
+
+  async function savePermission(editingId, parentId, payload) {
+    if (editingId === null) {
+      await state.add(parentId, payload);
+      toast.success('已新增权限');
+    } else {
+      await state.edit(editingId, payload);
+      toast.success('已更新权限');
+    }
+  }
+
+  return {
+    render() {
+      return vstack({ gap: '16px' }, (stack) => {
+        stack.h2('权限管理');
+        stack.vCard((card) => {
+          card.vCardHeader('权限树');
+          card.vCardBody((body) => {
+            body.vstack({ gap: '12px' }, (content) => {
+              content.hstack({ gap: '10px' }, (toolbar) => {
+                toolbar.vButton('新增根权限', (btn) => {
+                  btn.variant('primary');
+                  btn.on('click', () => dialog.open({}));
+                });
+                toolbar.vButton('刷新', (btn) => btn.on('click', () => state.load()));
+              });
+              content.child(tree);
+            });
+          });
+        });
+        stack.child(dialog);
+        stack.child(confirmDialog);
+      });
+    },
+    refresh() {
+      return state.load();
+    }
+  };
+}

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

@@ -0,0 +1,57 @@
+/** 角色管理请求命令类型声明（对应 role.mgr.js）。 */
+import { RequestBase } from '@yoyaflow/yoya-ui';
+import Roles, { RoleStatus } from './role.views.js';
+
+type RoleListItem = InstanceType<typeof Roles.ListItem>;
+type RoleDetail = InstanceType<typeof Roles.Detail>;
+
+declare class Query extends RequestBase {
+  constructor(init?: { page?: number; pageSize?: number; keyword?: string; status?: string });
+  address(): string;
+  params(): { page: number; pageSize: number; keyword: string; status: string };
+  toItem(row: Record<string, unknown>): RoleListItem;
+}
+
+declare class Create extends RequestBase {
+  constructor(init?: {
+    name?: string;
+    code?: string;
+    description?: string;
+    status?: RoleStatus;
+    sort?: number;
+  });
+  method(): 'POST';
+  address(): string;
+  body(): { name: string; code: string; description: string; status: RoleStatus; sort: number };
+}
+
+declare class Update extends RequestBase {
+  constructor(
+    id: number,
+    init?: {
+      name?: string;
+      code?: string;
+      description?: string;
+      status?: RoleStatus;
+      sort?: number;
+    }
+  );
+  method(): 'PUT';
+  address(): string;
+  body(): { name: string; code: string; description: string; status: RoleStatus; sort: number };
+}
+
+declare class Remove extends RequestBase {
+  constructor(id: number);
+  method(): 'DELETE';
+  address(): string;
+}
+
+declare const RoleMgr: {
+  Query: typeof Query;
+  Create: typeof Create;
+  Update: typeof Update;
+  Remove: typeof Remove;
+};
+
+export default RoleMgr;

package/templates/admin/src/features/roles/api/role.mgr.js

@@ -0,0 +1,101 @@
+// 角色管理请求命令。
+import { RequestBase } from '@yoyaflow/yoya-ui';
+import Roles from './role.views.js';
+
+class Query extends RequestBase {
+  constructor({ page = 1, pageSize = 10, keyword = '', status = '' } = {}) {
+    super();
+    this.page = page;
+    this.pageSize = pageSize;
+    this.keyword = keyword;
+    this.status = status;
+  }
+
+  address() {
+    return '/roles';
+  }
+
+  params() {
+    return { page: this.page, pageSize: this.pageSize, keyword: this.keyword, status: this.status };
+  }
+
+  toItem(row) {
+    return new Roles.ListItem(row);
+  }
+}
+
+class Create extends RequestBase {
+  constructor({ name = '', code = '', description = '', status = 'active', sort = 0 } = {}) {
+    super();
+    this.name = name;
+    this.code = code;
+    this.description = description;
+    this.status = status;
+    this.sort = sort;
+  }
+
+  method() {
+    return 'POST';
+  }
+
+  address() {
+    return '/roles';
+  }
+
+  body() {
+    return {
+      name: this.name,
+      code: this.code,
+      description: this.description,
+      status: this.status,
+      sort: this.sort
+    };
+  }
+}
+
+class Update extends RequestBase {
+  constructor(id, { name = '', code = '', description = '', status = 'active', sort = 0 } = {}) {
+    super();
+    this.id = id;
+    this.name = name;
+    this.code = code;
+    this.description = description;
+    this.status = status;
+    this.sort = sort;
+  }
+
+  method() {
+    return 'PUT';
+  }
+
+  address() {
+    return `/roles/${this.id}`;
+  }
+
+  body() {
+    return {
+      name: this.name,
+      code: this.code,
+      description: this.description,
+      status: this.status,
+      sort: this.sort
+    };
+  }
+}
+
+class Remove extends RequestBase {
+  constructor(id) {
+    super();
+    this.id = id;
+  }
+
+  method() {
+    return 'DELETE';
+  }
+
+  address() {
+    return `/roles/${this.id}`;
+  }
+}
+
+export default { Query, Create, Update, Remove };

package/templates/admin/src/features/roles/api/role.mock.js

@@ -0,0 +1,68 @@
+// 角色演示用内存 mock（接入真实后端后删除本文件）。
+import { mockRequest } from '../../../api/domain.api.js';
+
+let roles = [
+  { id: 1, name: '超级管理员', code: 'super_admin', description: '拥有全部权限', status: 'active', sort: 1 },
+  { id: 2, name: '管理员', code: 'admin', description: '后台管理操作', status: 'active', sort: 2 },
+  { id: 3, name: '运维', code: 'ops', description: '运维与部署', status: 'active', sort: 3 },
+  { id: 4, name: '审计员', code: 'auditor', description: '只读审计', status: 'disabled', sort: 4 },
+  { id: 5, name: '访客', code: 'guest', description: '只读访客', status: 'active', sort: 5 },
+  { id: 6, name: '开发者', code: 'developer', description: '开发调试', status: 'active', sort: 6 },
+  { id: 7, name: '测试', code: 'qa', description: '测试执行', status: 'disabled', sort: 7 },
+  { id: 8, name: '客服', code: 'support', description: '客户支持', status: 'active', sort: 8 },
+  { id: 9, name: '财务', code: 'finance', description: '财务操作', status: 'active', sort: 9 },
+  { id: 10, name: '人事', code: 'hr', description: '人事管理', status: 'active', sort: 10 },
+  { id: 11, name: '安全', code: 'security', description: '安全审计', status: 'disabled', sort: 11 },
+  { id: 12, name: '数据', code: 'analyst', description: '数据分析', status: 'active', sort: 12 }
+];
+
+const delay = (ms = 200) => new Promise((resolve) => setTimeout(resolve, ms));
+
+function filterRoles({ keyword = '', status = '' } = {}) {
+  const text = String(keyword).trim().toLowerCase();
+  return roles.filter((role) => {
+    const matchKeyword =
+      !text ||
+      role.name.toLowerCase().includes(text) ||
+      role.code.toLowerCase().includes(text);
+    const matchStatus = !status || role.status === status;
+    return matchKeyword && matchStatus;
+  });
+}
+
+mockRequest('GET', '/roles', async (req) => {
+  await delay();
+  const { page = 1, pageSize = 10 } = req.params();
+  const filtered = filterRoles(req.params());
+  const start = (page - 1) * pageSize;
+  return {
+    ok: true,
+    code: '0',
+    data: filtered.slice(start, start + pageSize),
+    pageNum: page,
+    pageSize,
+    total: filtered.length
+  };
+});
+
+mockRequest('POST', '/roles', async (req) => {
+  await delay();
+  const role = { id: Math.max(0, ...roles.map((item) => item.id)) + 1, ...req.body() };
+  roles = [role, ...roles];
+  return { ok: true, code: '0', data: role };
+});
+
+mockRequest('PUT', /^\/roles\/\d+$/, async (req) => {
+  await delay();
+  const id = Number(req.address().split('/').pop());
+  const role = { ...roles.find((item) => item.id === id), ...req.body(), id };
+  roles = roles.map((item) => (item.id === id ? role : item));
+  return { ok: true, code: '0', data: role };
+});
+
+mockRequest('DELETE', /^\/roles\/\d+$/, async (req) => {
+  await delay();
+  const id = Number(req.address().split('/').pop());
+  roles = roles.filter((item) => item.id !== id);
+  return { ok: true, code: '0', data: null };
+});

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

@@ -0,0 +1,23 @@
+/** 角色页状态类类型声明（对应 role.state.js）。 */
+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;
+  setKeyword(value: string): void;
+  setStatus(value: string): void;
+  setPage(value: number): void;
+  setPageSize(value: number): void;
+  subscribe(listener: () => void): () => void;
+  load(): Promise<unknown>;
+  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/roles/api/role.state.js

@@ -0,0 +1,97 @@
+// 角色页状态类。
+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;
+  }
+
+  setKeyword(value) {
+    this._keyword = value;
+  }
+
+  setStatus(value) {
+    this._status = value;
+  }
+
+  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 load() {
+    const result = await new RoleMgr.Query({
+      page: this._page,
+      pageSize: this._pageSize,
+      keyword: this._keyword,
+      status: this._status
+    }).submit();
+    this._items = result.data;
+    this._total = result.total;
+    this._emit();
+    return result;
+  }
+
+  async add(payload) {
+    await new RoleMgr.Create(payload).submit();
+    this._page = 1;
+    await this.load();
+    return payload;
+  }
+
+  async edit(id, patch) {
+    await new RoleMgr.Update(id, patch).submit();
+    await this.load();
+    return patch;
+  }
+
+  async remove(id) {
+    await new RoleMgr.Remove(id).submit();
+    if (this._items.length === 1 && this._page > 1) {
+      this._page -= 1;
+    }
+    await this.load();
+  }
+
+  _emit() {
+    this._listeners.forEach((listener) => listener());
+  }
+}

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

@@ -0,0 +1,43 @@
+/** 角色结果结构类型声明（对应 role.views.js）。 */
+export type RoleStatus = 'active' | 'disabled';
+
+export class ListItem {
+  id: number;
+  name: string;
+  code: string;
+  description: string;
+  status: RoleStatus;
+  sort: number;
+  constructor(init?: {
+    id: number;
+    name: string;
+    code: string;
+    description?: string;
+    status?: RoleStatus;
+    sort?: number;
+  });
+}
+
+export class Detail {
+  id: number;
+  name: string;
+  code: string;
+  description: string;
+  status: RoleStatus;
+  sort: number;
+  constructor(init?: {
+    id: number;
+    name: string;
+    code: string;
+    description?: string;
+    status?: RoleStatus;
+    sort?: number;
+  });
+}
+
+declare const Roles: {
+  ListItem: typeof ListItem;
+  Detail: typeof Detail;
+};
+
+export default Roles;