create-yoya-ui 0.1.2 → 0.2.0

package/templates/admin/src/features/dicts/api/dict.views.js

@@ -0,0 +1,23 @@
+// 字典结果结构（纯数据）。
+class DictTypeItem {
+  constructor({ id, name = '', code = '', status = 'active', remark = '' } = {}) {
+    this.id = id;
+    this.name = name;
+    this.code = code;
+    this.status = status;
+    this.remark = remark;
+  }
+}
+
+class DictItem {
+  constructor({ id, typeId = null, label = '', value = '', sort = 0, status = 'active' } = {}) {
+    this.id = id;
+    this.typeId = typeId;
+    this.label = label;
+    this.value = value;
+    this.sort = sort;
+    this.status = status;
+  }
+}
+
+export default { DictTypeItem, DictItem };

package/templates/admin/src/features/dicts/components/dict-editor-dialog.js

@@ -0,0 +1,218 @@
+import { toast, vDialog, vTable } from '@yoyaflow/yoya-ui';
+import { RowActionButton } from '../../../ui/row-action-button.js';
+import { DictItemFormDialog } from './dict-item-form-dialog.js';
+import { statusOptions, statusText } from '../utils/options.js';
+
+const rowStyle = {
+  alignItems: 'center',
+  display: 'grid',
+  gap: '12px',
+  gridTemplateColumns: '88px minmax(0, 1fr)',
+  minWidth: '0'
+};
+
+// 字典编辑弹窗：上半部分是字典基本信息表单，下半部分维护该字典的字典值表格。
+export function DictEditorDialog({ state, onSubmit }) {
+  const dialog = vDialog();
+  const itemDialog = DictItemFormDialog({ onSubmit: saveItem });
+  const confirmDialog = vDialog();
+  let editingId = null;
+  let itemsBody = null;
+  let itemsCountText = null;
+  let addItemButton = null;
+  let form = null;
+
+  dialog.style('maxWidth', 'min(92vw, 880px)');
+
+  function open(type = null) {
+    editingId = type?.id ?? null;
+    state.selectType(editingId).then(() => renderItems());
+
+    dialog.content((content) => {
+      content.vstack({ gap: '16px' }, (stack) => {
+        stack.h3(type ? `编辑字典「${type.name}」` : '新增字典');
+
+        stack.vForm((editor) => {
+          form = editor;
+          editor.styles({
+            border: '1px solid var(--yoya-color-border, #d8dee8)',
+            borderRadius: '8px',
+            display: 'grid',
+            gap: '16px',
+            gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+            padding: '16px'
+          });
+          editor.vFormItem((item) => {
+            item.styles(rowStyle);
+            item.label('名称').name('name').required({ message: '请填写名称' });
+            item.control((control) => control.vInput({ name: 'name', value: type?.name ?? '' }));
+          });
+          editor.vFormItem((item) => {
+            item.styles(rowStyle);
+            item.label('编码').name('code').required({ message: '请填写编码' });
+            item.control((control) => control.vInput({ name: 'code', value: type?.code ?? '' }));
+          });
+          editor.vFormItem((item) => {
+            item.styles(rowStyle);
+            item.label('状态').name('status');
+            item.control((control) =>
+              control.vSelect({
+                name: 'status',
+                options: statusOptions,
+                value: type?.status ?? 'active'
+              })
+            );
+          });
+          editor.vFormItem((item) => {
+            item.styles(rowStyle);
+            item.label('备注').name('remark');
+            item.control((control) =>
+              control.vInput({ name: 'remark', value: type?.remark ?? '' })
+            );
+          });
+        });
+
+        stack.section((section) => {
+          section.vstack({ gap: '10px' }, (items) => {
+            items.hstack({ alignItems: 'center', gap: '10px' }, (toolbar) => {
+              toolbar.vButton('新增字典值', (btn) => {
+                addItemButton = btn;
+                btn.variant('primary');
+                btn.disabled(editingId === null);
+                btn.on('click', () => itemDialog.open(null));
+              });
+              toolbar.spacer();
+              toolbar.span((count) => {
+                count.style('color', 'var(--yoya-color-text-muted, #64748b)');
+                itemsCountText = count;
+                syncItemsCount();
+              });
+            });
+            items.p((hint) => {
+              hint.style('color', 'var(--yoya-color-text-muted, #64748b)');
+              hint.text(
+                editingId === null ? '保存字典类型后即可添加字典值。' : '维护当前字典的字典值。'
+              );
+            });
+            items.child(
+              vTable((table) => {
+                table.vThead((head) => {
+                  head.vTr((row) => {
+                    row.vTh('标签');
+                    row.vTh('值');
+                    row.vTh('排序');
+                    row.vTh('状态');
+                    row.vTh('操作');
+                  });
+                });
+                table.vTbody((body) => {
+                  itemsBody = body;
+                  renderItems();
+                });
+              })
+            );
+          });
+        });
+
+        stack.hstack({ gap: '10px', justifyContent: 'flex-end' }, (footer) => {
+          footer.vButton('取消', (btn) => btn.on('click', () => dialog.close()));
+          footer.vButton('保存', (btn) => {
+            btn.variant('primary');
+            btn.on('click', () => save());
+          });
+        });
+
+        stack.child(itemDialog);
+        stack.child(confirmDialog);
+      });
+    });
+
+    dialog.open(true);
+  }
+
+  function renderItems() {
+    if (!itemsBody) {
+      return;
+    }
+    itemsBody.children().forEach((child) => child.destroy());
+    state.items().forEach((item) => {
+      itemsBody.vTr((row) => {
+        row.vTd(item.label);
+        row.vTd(item.value);
+        row.vTd(String(item.sort));
+        row.vTd(statusText[item.status] ?? item.status);
+        row.vTd((cell) => {
+          cell.hstack({ gap: '8px' }, (actions) => {
+            actions.child(
+              RowActionButton('编辑', (btn) => btn.on('click', () => itemDialog.open(item)))
+            );
+            actions.child(
+              RowActionButton('删除', (btn) => {
+                btn.variant('danger');
+                btn.on('click', () => askRemoveItem(item));
+              })
+            );
+          });
+        });
+      });
+    });
+    syncItemsCount();
+  }
+
+  function syncItemsCount() {
+    if (itemsCountText) {
+      itemsCountText.textContent(`共 ${state.items().length} 条`);
+    }
+    if (addItemButton) {
+      addItemButton.disabled(editingId === null);
+    }
+  }
+
+  function askRemoveItem(item) {
+    confirmDialog.content((content) => {
+      content.p(`确定删除字典值「${item.label}」？`);
+      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.removeItem(item.id);
+            toast.success(`已删除 ${item.label}`);
+            renderItems();
+          });
+        });
+      });
+    });
+    confirmDialog.open(true);
+  }
+
+  async function saveItem(itemId, payload) {
+    if (itemId === null) {
+      await state.addItem(payload);
+      toast.success('已新增字典值');
+    } else {
+      await state.editItem(itemId, payload);
+      toast.success('已更新字典值');
+    }
+    renderItems();
+  }
+
+  function save() {
+    if (!form.validate()) {
+      return;
+    }
+    onSubmit(editingId, form.values()).then(() => dialog.close());
+  }
+
+  return {
+    render() {
+      return dialog;
+    },
+    open,
+    close() {
+      dialog.close();
+    }
+  };
+}

package/templates/admin/src/features/dicts/components/dict-item-form-dialog.js

@@ -0,0 +1,79 @@
+import { vDialog } from '@yoyaflow/yoya-ui';
+import { statusOptions } from '../utils/options.js';
+
+const rowStyle = {
+  alignItems: 'center',
+  display: 'grid',
+  gap: '12px',
+  gridTemplateColumns: '88px minmax(0, 1fr)',
+  minWidth: '0'
+};
+
+export function DictItemFormDialog({ onSubmit }) {
+  const dialog = vDialog();
+  let editingId = null;
+
+  function open(item = null) {
+    editingId = item?.id ?? null;
+    dialog.content((content) => {
+      content.vForm((form) => {
+        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((field) => {
+          field.styles(rowStyle);
+          field.label('标签').name('label').required({ message: '请填写标签' });
+          field.control((editor) => editor.vInput({ name: 'label', value: item?.label ?? '' }));
+        });
+        form.vFormItem((field) => {
+          field.styles(rowStyle);
+          field.label('值').name('value').required({ message: '请填写值' });
+          field.control((editor) => editor.vInput({ name: 'value', value: item?.value ?? '' }));
+        });
+        form.vFormItem((field) => {
+          field.styles(rowStyle);
+          field.label('排序').name('sort');
+          field.control((editor) =>
+            editor.vInput({ name: 'sort', value: String(item?.sort ?? 0) })
+          );
+        });
+        form.vFormItem((field) => {
+          field.styles(rowStyle);
+          field.label('状态').name('status');
+          field.control((editor) =>
+            editor.vSelect({ name: 'status', options: statusOptions, value: item?.status ?? 'active' })
+          );
+        });
+        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/dicts/pages/dict-list-page.js

@@ -0,0 +1,123 @@
+import { toast, vDialog, vTable, vstack } from '@yoyaflow/yoya-ui';
+import { RowActionButton } from '../../../ui/row-action-button.js';
+import DictsPageState from '../api/dict.state.js';
+import { DictEditorDialog } from '../components/dict-editor-dialog.js';
+import { statusText } from '../utils/options.js';
+
+export function DictListPage() {
+  const state = new DictsPageState();
+  const editorDialog = DictEditorDialog({ state, onSubmit: saveType });
+  const confirmDialog = vDialog();
+  let typesBody = null;
+
+  state.subscribe(render);
+  state.loadTypes();
+
+  function render() {
+    renderTypes();
+  }
+
+  function renderTypes() {
+    if (!typesBody) {
+      return;
+    }
+    typesBody.children().forEach((child) => child.destroy());
+    state.types().forEach((type) => {
+      typesBody.vTr((row) => {
+        row.vTd(type.name);
+        row.vTd(type.code);
+        row.vTd(statusText[type.status] ?? type.status);
+        row.vTd(type.remark || '—');
+        row.vTd((cell) => {
+          cell.hstack({ gap: '8px' }, (actions) => {
+            actions.child(
+              RowActionButton('编辑', (btn) => btn.on('click', () => editorDialog.open(type)))
+            );
+            actions.child(
+              RowActionButton('删除', (btn) => {
+                btn.variant('danger');
+                btn.on('click', () => askRemoveType(type));
+              })
+            );
+          });
+        });
+      });
+    });
+  }
+
+  function askRemoveType(type) {
+    confirmDialog.content((content) => {
+      content.p(`确定删除字典「${type.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.removeType(type.id);
+            toast.success(`已删除 ${type.name}`);
+          });
+        });
+      });
+    });
+    confirmDialog.open(true);
+  }
+
+  async function saveType(editingId, payload) {
+    if (editingId === null) {
+      await state.addType(payload);
+      toast.success('已新增字典');
+    } else {
+      await state.editType(editingId, payload);
+      toast.success('已更新字典');
+    }
+  }
+
+  return {
+    render() {
+      return vstack({ gap: '16px' }, (stack) => {
+        stack.h2('字典管理');
+        stack.vCard((card) => {
+          card.vCardHeader((header) => {
+            header.hstack({ alignItems: 'center', gap: '10px' }, (toolbar) => {
+              toolbar.vButton('新增字典', (btn) => {
+                btn.variant('primary');
+                btn.on('click', () => editorDialog.open(null));
+              });
+              toolbar.spacer();
+              toolbar.span((hint) => {
+                hint.style('color', 'var(--yoya-color-text-muted, #64748b)');
+                hint.text('点击「编辑」可在弹窗中维护基本信息与字典值');
+              });
+            });
+          });
+          card.vCardBody((body) => {
+            body.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();
+                });
+              })
+            );
+          });
+        });
+        stack.child(editorDialog);
+        stack.child(confirmDialog);
+      });
+    },
+    refresh() {
+      return state.loadTypes();
+    }
+  };
+}

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

@@ -0,0 +1,5 @@
+export const statusOptions = [
+  ['active', '启用'],
+  ['disabled', '禁用']
+];
+export const statusText = { active: '启用', disabled: '禁用' };

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

@@ -0,0 +1,47 @@
+/** 管理请求命令类型声明（对应 member.mgr.js）。 */
+import { RequestBase } from '@yoyaflow/yoya-ui';
+import Members from './member.views.js';
+
+type MemberListItem = InstanceType<typeof Members.ListItem>;
+type MemberDetail = InstanceType<typeof Members.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>): MemberListItem;
+}
+
+declare class Create extends RequestBase {
+  constructor(init?: { name?: string; email?: string; role?: string; status?: string });
+  method(): 'POST';
+  address(): string;
+  body(): { name: string; email: string; role: string; status: string };
+  toDetail(member: Record<string, unknown>): MemberDetail;
+}
+
+declare class Update extends RequestBase {
+  constructor(
+    id: number,
+    init?: { name?: string; email?: string; role?: string; status?: string }
+  );
+  method(): 'PUT';
+  address(): string;
+  body(): { name: string; email: string; role: string; status: string };
+  toDetail(member: Record<string, unknown>): MemberDetail;
+}
+
+declare class Remove extends RequestBase {
+  constructor(id: number);
+  method(): 'DELETE';
+  address(): string;
+}
+
+declare const MemberMgr: {
+  Query: typeof Query;
+  Create: typeof Create;
+  Update: typeof Update;
+  Remove: typeof Remove;
+};
+
+export default MemberMgr;

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

@@ -0,0 +1,95 @@
+// 管理请求命令：字段在构造器声明，方法由 RequestBase 基类提供、子类覆写。
+import { RequestBase } from '@yoyaflow/yoya-ui';
+import Members from './member.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 '/members';
+  }
+
+  params() {
+    return { page: this.page, pageSize: this.pageSize, keyword: this.keyword, status: this.status };
+  }
+
+  toItem(row) {
+    return new Members.ListItem(row);
+  }
+}
+
+class Create extends RequestBase {
+  constructor({ name = '', email = '', role = 'viewer', status = 'active' } = {}) {
+    super();
+    this.name = name;
+    this.email = email;
+    this.role = role;
+    this.status = status;
+  }
+
+  method() {
+    return 'POST';
+  }
+
+  address() {
+    return '/members';
+  }
+
+  body() {
+    return { name: this.name, email: this.email, role: this.role, status: this.status };
+  }
+
+  toDetail(member) {
+    return new Members.Detail(member);
+  }
+}
+
+class Update extends RequestBase {
+  constructor(id, { name = '', email = '', role = 'viewer', status = 'active' } = {}) {
+    super();
+    this.id = id;
+    this.name = name;
+    this.email = email;
+    this.role = role;
+    this.status = status;
+  }
+
+  method() {
+    return 'PUT';
+  }
+
+  address() {
+    return `/members/${this.id}`;
+  }
+
+  body() {
+    return { name: this.name, email: this.email, role: this.role, status: this.status };
+  }
+
+  toDetail(member) {
+    return new Members.Detail(member);
+  }
+}
+
+class Remove extends RequestBase {
+  constructor(id) {
+    super();
+    this.id = id;
+  }
+
+  method() {
+    return 'DELETE';
+  }
+
+  address() {
+    return `/members/${this.id}`;
+  }
+}
+
+export default { Query, Create, Update, Remove };

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

@@ -0,0 +1,74 @@
+// 演示用内存 mock（接入真实后端后删除本文件）。
+import { mockRequest } from '../../../api/domain.api.js';
+
+let members = [
+  { id: 1, name: '张伟', email: 'zhangwei@example.com', role: 'admin', status: 'active' },
+  { id: 2, name: '李娜', email: 'lina@example.com', role: 'editor', status: 'active' },
+  { id: 3, name: '王强', email: 'wangqiang@example.com', role: 'viewer', status: 'disabled' },
+  { id: 4, name: '赵敏', email: 'zhaomin@example.com', role: 'editor', status: 'active' },
+  { id: 5, name: '刘洋', email: 'liuyang@example.com', role: 'viewer', status: 'active' },
+  { id: 6, name: '陈静', email: 'chenjing@example.com', role: 'editor', status: 'disabled' },
+  { id: 7, name: '杨帆', email: 'yangfan@example.com', role: 'admin', status: 'active' },
+  { id: 8, name: '黄磊', email: 'huanglei@example.com', role: 'viewer', status: 'active' },
+  { id: 9, name: '周婷', email: 'zhouting@example.com', role: 'editor', status: 'active' },
+  { id: 10, name: '吴迪', email: 'wudi@example.com', role: 'viewer', status: 'disabled' },
+  { id: 11, name: '徐静', email: 'xujing@example.com', role: 'editor', status: 'active' },
+  { id: 12, name: '孙鹏', email: 'sunpeng@example.com', role: 'admin', status: 'active' },
+  { id: 13, name: '马丽', email: 'mali@example.com', role: 'viewer', status: 'active' }
+];
+
+const delay = (ms = 200) => new Promise((resolve) => setTimeout(resolve, ms));
+
+function filterMembers({ keyword = '', status = '' } = {}) {
+  const text = String(keyword).trim().toLowerCase();
+  return members.filter((member) => {
+    const matchKeyword =
+      !text ||
+      member.name.toLowerCase().includes(text) ||
+      member.email.toLowerCase().includes(text);
+    const matchStatus = !status || member.status === status;
+    return matchKeyword && matchStatus;
+  });
+}
+
+mockRequest('GET', '/members', async (req) => {
+  await delay();
+  const { page = 1, pageSize = 5 } = req.params();
+  const filtered = filterMembers(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('GET', '/members/available', async () => {
+  await delay();
+  return { ok: true, code: '0', data: members.filter((member) => member.status === 'active') };
+});
+
+mockRequest('POST', '/members', async (req) => {
+  await delay();
+  const member = { id: Math.max(0, ...members.map((item) => item.id)) + 1, ...req.body() };
+  members = [member, ...members];
+  return { ok: true, code: '0', data: member };
+});
+
+mockRequest('PUT', /^\/members\/\d+$/, async (req) => {
+  await delay();
+  const id = Number(req.address().split('/').pop());
+  const member = { ...members.find((item) => item.id === id), ...req.body(), id };
+  members = members.map((item) => (item.id === id ? member : item));
+  return { ok: true, code: '0', data: member };
+});
+
+mockRequest('DELETE', /^\/members\/\d+$/, async (req) => {
+  await delay();
+  const id = Number(req.address().split('/').pop());
+  members = members.filter((item) => item.id !== id);
+  return { ok: true, code: '0', data: null };
+});

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

@@ -0,0 +1,16 @@
+/** 外部请求命令类型声明（对应 member.req.js）。 */
+import { RequestBase } from '@yoyaflow/yoya-ui';
+import Members from './member.views.js';
+
+type MemberListItem = InstanceType<typeof Members.ListItem>;
+
+declare class QueryAvailable extends RequestBase {
+  address(): string;
+  toItem(row: Record<string, unknown>): MemberListItem;
+}
+
+declare const MemberReq: {
+  QueryAvailable: typeof QueryAvailable;
+};
+
+export default MemberReq;