create-yoya-ui 0.1.2 → 0.2.0

package/templates/admin/src/features/members/api/member.req.js

@@ -0,0 +1,15 @@
+// 外部请求命令：其他模块调用本域能力的入口。
+import { RequestBase } from '@yoyaflow/yoya-ui';
+import Members from './member.views.js';
+
+class QueryAvailable extends RequestBase {
+  address() {
+    return '/members/available';
+  }
+
+  toItem(row) {
+    return new Members.ListItem(row);
+  }
+}
+
+export default { QueryAvailable };

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

@@ -0,0 +1,23 @@
+/** 页面数据状态类类型声明（对应 member.state.js）。 */
+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;
+  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/members/api/member.state.js

@@ -0,0 +1,97 @@
+// 页面数据状态类：持有数据与筛选，动作构造命令并 submit 后写入状态、通知订阅者。
+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;
+  }
+
+  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) || 5);
+  }
+
+  subscribe(listener) {
+    this._listeners.add(listener);
+    return () => this._listeners.delete(listener);
+  }
+
+  async load() {
+    const result = await new MemberMgr.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 MemberMgr.Create(payload).submit();
+    this._page = 1;
+    await this.load();
+    return payload;
+  }
+
+  async edit(id, patch) {
+    await new MemberMgr.Update(id, patch).submit();
+    await this.load();
+    return patch;
+  }
+
+  async remove(id) {
+    await new MemberMgr.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/members/api/member.views.d.ts

@@ -0,0 +1,33 @@
+/** 领域结果结构类型声明（对应 member.views.js）。 */
+export class ListItem {
+  id: number;
+  name: string;
+  email: string;
+  role: string;
+  status: string;
+  constructor(init: { id: number; name: string; email: string; role: string; status: string });
+}
+
+export class Detail {
+  id: number;
+  name: string;
+  email: string;
+  role: string;
+  status: string;
+  remark: string;
+  constructor(init: {
+    id: number;
+    name: string;
+    email: string;
+    role: string;
+    status: string;
+    remark?: string;
+  });
+}
+
+declare const Members: {
+  ListItem: typeof ListItem;
+  Detail: typeof Detail;
+};
+
+export default Members;

package/templates/admin/src/features/members/api/member.views.js

@@ -0,0 +1,23 @@
+// 领域结果结构（纯数据）：类不单独 export，统一由默认导出命名空间提供。
+class ListItem {
+  constructor({ id, name, email, role, status }) {
+    this.id = id;
+    this.name = name;
+    this.email = email;
+    this.role = role;
+    this.status = status;
+  }
+}
+
+class Detail {
+  constructor({ id, name, email, role, status, remark = '' }) {
+    this.id = id;
+    this.name = name;
+    this.email = email;
+    this.role = role;
+    this.status = status;
+    this.remark = remark;
+  }
+}
+
+export default { ListItem, Detail };

package/templates/admin/src/features/members/components/member-form-dialog.js

@@ -0,0 +1,83 @@
+import { vDialog } from '@yoyaflow/yoya-ui';
+import { roleOptions, statusOptions } from '../utils/options.js';
+
+const rowStyle = {
+  alignItems: 'center',
+  display: 'grid',
+  gap: '12px',
+  gridTemplateColumns: '88px minmax(0, 1fr)',
+  minWidth: '0'
+};
+
+export function MemberFormDialog({ onSubmit }) {
+  const dialog = vDialog();
+  let editingId = null;
+
+  function buildFormFields(form, member) {
+    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: member?.name ?? '' }));
+    });
+    form.vFormItem((item) => {
+      item.styles(rowStyle);
+      item.label('邮箱').name('email').required({ message: '请填写邮箱' });
+      item.control((editor) => editor.vInput({ name: 'email', value: member?.email ?? '' }));
+    });
+    form.vFormItem((item) => {
+      item.styles(rowStyle);
+      item.label('角色').name('role');
+      item.control((editor) =>
+        editor.vSelect({ name: 'role', options: roleOptions, value: member?.role ?? 'viewer' })
+      );
+    });
+    form.vFormItem((item) => {
+      item.styles(rowStyle);
+      item.label('状态').name('status');
+      item.control((editor) =>
+        editor.vSelect({ name: 'status', options: statusOptions, value: member?.status ?? 'active' })
+      );
+    });
+  }
+
+  function open(member = null) {
+    editingId = member?.id ?? null;
+    dialog.content((content) => {
+      content.vForm((form) => {
+        buildFormFields(form, member);
+        form.vButton('保存', (btn) => {
+          btn.variant('primary');
+          btn.style({ gridColumn: '1 / -1', justifySelf: 'end', marginTop: '16px' });
+          btn.on('click', () => save(form));
+        });
+      });
+    });
+    dialog.open(true);
+  }
+
+  async function save(form) {
+    if (!form.validate()) {
+      return;
+    }
+    await onSubmit(editingId, form.values());
+    dialog.close();
+  }
+
+  return {
+    render() {
+      return dialog;
+    },
+    open,
+    close() {
+      dialog.close();
+    }
+  };
+}

package/templates/admin/src/features/members/components/member-table.js

@@ -0,0 +1,58 @@
+import { vTable } from '@yoyaflow/yoya-ui';
+import { RowActionButton } from '../../../ui/row-action-button.js';
+import { statusText } from '../utils/options.js';
+
+export function MemberTable({ rows, onEdit, onRemove }) {
+  let tbody = null;
+
+  function renderRows() {
+    if (!tbody) {
+      return;
+    }
+
+    tbody.children().forEach((child) => child.destroy());
+    rows().forEach((member) => {
+      tbody.vTr((row) => {
+        row.vTd(member.name);
+        row.vTd(member.email);
+        row.vTd(member.role);
+        row.vTd(statusText[member.status] ?? member.status);
+        row.vTd((cell) => {
+          cell.hstack({ gap: '8px' }, (actions) => {
+            actions.child(RowActionButton('编辑', (btn) => btn.on('click', () => onEdit(member))));
+            actions.child(
+              RowActionButton('删除', (btn) => {
+                btn.variant('danger');
+                btn.on('click', () => onRemove(member));
+              })
+            );
+          });
+        });
+      });
+    });
+  }
+
+  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();
+        });
+      });
+    },
+    refresh() {
+      renderRows();
+      return this;
+    }
+  };
+}

package/templates/admin/src/features/members/components/member-toolbar.js

@@ -0,0 +1,58 @@
+import { vForm } from '@yoyaflow/yoya-ui';
+import { statusOptions } from '../utils/options.js';
+
+export function MemberToolbar({ onSearch, onAdd }) {
+  let form = null;
+
+  function values() {
+    return form ? form.values() : {};
+  }
+
+  function search() {
+    onSearch(values());
+  }
+
+  function reset() {
+    if (form) {
+      form.values({ keyword: '', status: '' });
+    }
+    search();
+  }
+
+  return {
+    render() {
+      return vForm((f) => {
+        form = f;
+        f.style({ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center' });
+        f.vFormItem((item) => {
+          item.style({ display: 'flex', alignItems: 'center', gap: '8px' });
+          item.label('关键词').name('keyword');
+          item.control((editor) =>
+            editor.vInput({ name: 'keyword', placeholder: '姓名 / 邮箱' })
+          );
+        });
+        f.vFormItem((item) => {
+          item.style({ display: 'flex', alignItems: 'center', gap: '8px' });
+          item.label('状态').name('status');
+          item.control((editor) =>
+            editor.vSelect({ name: 'status', options: statusOptions, placeholder: '全部' })
+          );
+        });
+        f.vButton('查询', (btn) => {
+          btn.variant('primary');
+          btn.on('click', search);
+        });
+        f.vButton('重置', (btn) => btn.on('click', reset));
+        f.vButton('新增成员', (btn) => {
+          btn.variant('primary');
+          btn.style('marginLeft', 'auto');
+          btn.on('click', onAdd);
+        });
+        f.on('submit', (event) => {
+          event.preventDefault();
+          search();
+        });
+      });
+    }
+  };
+}

package/templates/admin/src/features/members/pages/member-list-page.js

@@ -0,0 +1,85 @@
+import { toast, vPagination, vstack } from '@yoyaflow/yoya-ui';
+import MembersPageState from '../api/member.state.js';
+import { MemberToolbar } from '../components/member-toolbar.js';
+import { MemberTable } from '../components/member-table.js';
+import { MemberFormDialog } from '../components/member-form-dialog.js';
+
+// 页面只做编排：组合工具栏、表格、弹窗与分页，逻辑在组件 / service / state 中
+export function MemberListPage() {
+  const state = new MembersPageState();
+  const dialog = MemberFormDialog({ onSubmit: saveMember });
+  const toolbar = MemberToolbar({ onSearch: applyFilters, onAdd: () => dialog.open(null) });
+  const table = MemberTable({
+    rows: () => state.items(),
+    onEdit: (member) => dialog.open(member),
+    onRemove: removeMemberAction
+  });
+  const pagination = vPagination({
+    pageSize: 5,
+    pageSizes: [5, 10, 20],
+    onChange({ page: nextPage, pageSize: nextSize }) {
+      state.setPage(nextPage);
+      state.setPageSize(nextSize);
+      state.load();
+    }
+  });
+
+  state.subscribe(() => {
+    table.refresh();
+    syncPagination();
+  });
+  state.load();
+
+  function syncPagination() {
+    pagination.update({
+      page: state.page(),
+      pageSize: state.pageSize(),
+      total: state.total(),
+      totalPages: Math.max(1, Math.ceil(state.total() / state.pageSize()))
+    });
+  }
+
+  function applyFilters(values) {
+    state.setKeyword(values.keyword ?? '');
+    state.setStatus(values.status ?? '');
+    state.setPage(1);
+    state.load();
+  }
+
+  async function removeMemberAction(member) {
+    await state.remove(member.id);
+    toast.success(`已删除 ${member.name}`);
+  }
+
+  async function saveMember(editingId, payload) {
+    if (editingId === null) {
+      await state.add(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.child(toolbar);
+              content.child(table);
+              content.child(pagination);
+            });
+          });
+        });
+        stack.child(dialog);
+      });
+    },
+    refresh() {
+      return state.load();
+    }
+  };
+}

package/templates/admin/src/features/members/utils/options.d.ts

@@ -0,0 +1,4 @@
+/** 领域常量类型声明（对应 options.js）。 */
+export const roleOptions: readonly string[];
+export const statusOptions: readonly (readonly [string, string])[];
+export const statusText: Record<string, string>;

package/templates/admin/src/features/members/utils/options.js

@@ -0,0 +1,6 @@
+export const roleOptions = ['admin', 'editor', 'viewer'];
+export const statusOptions = [
+  ['active', '启用'],
+  ['disabled', '禁用']
+];
+export const statusText = { active: '启用', disabled: '禁用' };

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

@@ -0,0 +1,45 @@
+/** 权限管理请求命令类型声明（对应 permission.mgr.js）。 */
+import { RequestBase } from '@yoyaflow/yoya-ui';
+import Permissions, { PermissionType } from './permission.views.js';
+
+type PermissionNodeInstance = InstanceType<typeof Permissions.PermissionNode>;
+
+declare class QueryTree extends RequestBase {
+  address(): string;
+  toItem(node: Record<string, unknown>): PermissionNodeInstance;
+}
+
+declare class Create extends RequestBase {
+  constructor(
+    parentId: number | null,
+    init?: { name?: string; code?: string; type?: PermissionType; sort?: number }
+  );
+  method(): 'POST';
+  address(): string;
+  body(): { parentId: number | null; name: string; code: string; type: PermissionType; sort: number };
+}
+
+declare class Update extends RequestBase {
+  constructor(
+    id: number,
+    init?: { name?: string; code?: string; type?: PermissionType; sort?: number }
+  );
+  method(): 'PUT';
+  address(): string;
+  body(): { name: string; code: string; type: PermissionType; sort: number };
+}
+
+declare class Remove extends RequestBase {
+  constructor(id: number);
+  method(): 'DELETE';
+  address(): string;
+}
+
+declare const PermissionMgr: {
+  QueryTree: typeof QueryTree;
+  Create: typeof Create;
+  Update: typeof Update;
+  Remove: typeof Remove;
+};
+
+export default PermissionMgr;

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

@@ -0,0 +1,79 @@
+// 权限管理请求命令：查询树、新增、编辑、删除。
+import { RequestBase } from '@yoyaflow/yoya-ui';
+import Permissions from './permission.views.js';
+
+class QueryTree extends RequestBase {
+  address() {
+    return '/permissions/tree';
+  }
+
+  toItem(node) {
+    return new Permissions.PermissionNode({
+      ...node,
+      children: (node.children ?? []).map((child) => this.toItem(child))
+    });
+  }
+}
+
+class Create extends RequestBase {
+  constructor(parentId, { name = '', code = '', type = 'menu', sort = 0 } = {}) {
+    super();
+    this.parentId = parentId ?? null;
+    this.name = name;
+    this.code = code;
+    this.type = type;
+    this.sort = sort;
+  }
+
+  method() {
+    return 'POST';
+  }
+
+  address() {
+    return '/permissions';
+  }
+
+  body() {
+    return { parentId: this.parentId, name: this.name, code: this.code, type: this.type, sort: this.sort };
+  }
+}
+
+class Update extends RequestBase {
+  constructor(id, { name = '', code = '', type = 'menu', sort = 0 } = {}) {
+    super();
+    this.id = id;
+    this.name = name;
+    this.code = code;
+    this.type = type;
+    this.sort = sort;
+  }
+
+  method() {
+    return 'PUT';
+  }
+
+  address() {
+    return `/permissions/${this.id}`;
+  }
+
+  body() {
+    return { name: this.name, code: this.code, type: this.type, sort: this.sort };
+  }
+}
+
+class Remove extends RequestBase {
+  constructor(id) {
+    super();
+    this.id = id;
+  }
+
+  method() {
+    return 'DELETE';
+  }
+
+  address() {
+    return `/permissions/${this.id}`;
+  }
+}
+
+export default { QueryTree, Create, Update, Remove };

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

@@ -0,0 +1,68 @@
+// 权限演示用内存 mock（接入真实后端后删除本文件）。
+import { mockRequest } from '../../../api/domain.api.js';
+
+let permissions = [
+  { id: 1, parentId: null, name: '工作台', code: 'dashboard', type: 'menu', sort: 1 },
+  { id: 11, parentId: 1, name: '数据概览', code: 'dashboard:overview', type: 'menu', sort: 1 },
+  { id: 12, parentId: 1, name: '待办审批', code: 'dashboard:todos', type: 'menu', sort: 2 },
+  { id: 2, parentId: null, name: '系统管理', code: 'system', type: 'menu', sort: 2 },
+  { id: 21, parentId: 2, name: '成员管理', code: 'system:member', type: 'menu', sort: 1 },
+  { id: 211, parentId: 21, name: '新增成员', code: 'system:member:create', type: 'button', sort: 1 },
+  { id: 212, parentId: 21, name: '编辑成员', code: 'system:member:update', type: 'button', sort: 2 },
+  { id: 213, parentId: 21, name: '删除成员', code: 'system:member:remove', type: 'button', sort: 3 },
+  { id: 22, parentId: 2, name: '角色管理', code: 'system:role', type: 'menu', sort: 2 },
+  { id: 23, parentId: 2, name: '权限管理', code: 'system:permission', type: 'menu', sort: 3 },
+  { id: 24, parentId: 2, name: '字典管理', code: 'system:dict', type: 'menu', sort: 4 }
+];
+
+const delay = (ms = 200) => new Promise((resolve) => setTimeout(resolve, ms));
+
+function buildTree(parentId = null) {
+  return permissions
+    .filter((permission) => (permission.parentId ?? null) === parentId)
+    .sort((a, b) => a.sort - b.sort)
+    .map((permission) => ({ ...permission, children: buildTree(permission.id) }));
+}
+
+function collectIds(id) {
+  const ids = new Set([id]);
+  let changed = true;
+  while (changed) {
+    changed = false;
+    permissions.forEach((permission) => {
+      if (ids.has(permission.parentId) && !ids.has(permission.id)) {
+        ids.add(permission.id);
+        changed = true;
+      }
+    });
+  }
+  return ids;
+}
+
+mockRequest('GET', '/permissions/tree', async () => {
+  await delay();
+  return { ok: true, code: '0', data: buildTree(null) };
+});
+
+mockRequest('POST', '/permissions', async (req) => {
+  await delay();
+  const permission = { id: Math.max(0, ...permissions.map((item) => item.id)) + 1, ...req.body() };
+  permissions.push(permission);
+  return { ok: true, code: '0', data: permission };
+});
+
+mockRequest('PUT', /^\/permissions\/\d+$/, async (req) => {
+  await delay();
+  const id = Number(req.address().split('/').pop());
+  const permission = { ...permissions.find((item) => item.id === id), ...req.body(), id };
+  permissions = permissions.map((item) => (item.id === id ? permission : item));
+  return { ok: true, code: '0', data: permission };
+});
+
+mockRequest('DELETE', /^\/permissions\/\d+$/, async (req) => {
+  await delay();
+  const id = Number(req.address().split('/').pop());
+  const ids = collectIds(id);
+  permissions = permissions.filter((item) => !ids.has(item.id));
+  return { ok: true, code: '0', data: null };
+});