create-yoya-ui 0.1.2 → 0.2.0

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

@@ -0,0 +1,24 @@
+// 角色结果结构（纯数据）。
+class ListItem {
+  constructor({ id, name, code, description = '', status = 'active', sort = 0 }) {
+    this.id = id;
+    this.name = name;
+    this.code = code;
+    this.description = description;
+    this.status = status;
+    this.sort = sort;
+  }
+}
+
+class Detail {
+  constructor({ id, name, code, description = '', status = 'active', sort = 0 }) {
+    this.id = id;
+    this.name = name;
+    this.code = code;
+    this.description = description;
+    this.status = status;
+    this.sort = sort;
+  }
+}
+
+export default { ListItem, Detail };

package/templates/admin/src/features/roles/components/role-form-dialog.js

@@ -0,0 +1,86 @@
+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 RoleFormDialog({ onSubmit }) {
+  const dialog = vDialog();
+  let editingId = null;
+
+  function open(role = null) {
+    editingId = role?.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((item) => {
+          item.styles(rowStyle);
+          item.label('名称').name('name').required({ message: '请填写名称' });
+          item.control((editor) => editor.vInput({ name: 'name', value: role?.name ?? '' }));
+        });
+        form.vFormItem((item) => {
+          item.styles(rowStyle);
+          item.label('角色标识').name('code').required({ message: '请填写角色标识' });
+          item.control((editor) => editor.vInput({ name: 'code', value: role?.code ?? '' }));
+        });
+        form.vFormItem((item) => {
+          item.styles(rowStyle);
+          item.label('描述').name('description');
+          item.control((editor) =>
+            editor.vInput({ name: 'description', value: role?.description ?? '' })
+          );
+        });
+        form.vFormItem((item) => {
+          item.styles(rowStyle);
+          item.label('状态').name('status');
+          item.control((editor) =>
+            editor.vSelect({ name: 'status', options: statusOptions, value: role?.status ?? 'active' })
+          );
+        });
+        form.vFormItem((item) => {
+          item.styles(rowStyle);
+          item.label('排序').name('sort');
+          item.control((editor) =>
+            editor.vInput({ name: 'sort', value: String(role?.sort ?? 0) })
+          );
+        });
+        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/roles/components/role-table.js

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

@@ -0,0 +1,58 @@
+import { vForm } from '@yoyaflow/yoya-ui';
+import { statusOptions } from '../utils/options.js';
+
+export function RoleToolbar({ 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/roles/pages/role-list-page.js

@@ -0,0 +1,100 @@
+import { toast, vDialog, vPagination, vstack } from '@yoyaflow/yoya-ui';
+import RolesPageState from '../api/role.state.js';
+import { RoleToolbar } from '../components/role-toolbar.js';
+import { RoleTable } from '../components/role-table.js';
+import { RoleFormDialog } from '../components/role-form-dialog.js';
+
+export function RoleListPage() {
+  const state = new RolesPageState();
+  const dialog = RoleFormDialog({ onSubmit: saveRole });
+  const confirmDialog = vDialog();
+  const toolbar = RoleToolbar({ onSearch: applyFilters, onAdd: () => dialog.open(null) });
+  const table = RoleTable({
+    rows: () => state.items(),
+    onEdit: (role) => dialog.open(role),
+    onRemove: askRemove
+  });
+  const pagination = vPagination({
+    pageSize: 10,
+    pageSizes: [10, 20, 50],
+    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();
+  }
+
+  function askRemove(role) {
+    confirmDialog.content((content) => {
+      content.p(`确定删除角色「${role.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(role.id);
+            toast.success(`已删除 ${role.name}`);
+          });
+        });
+      });
+    });
+    confirmDialog.open(true);
+  }
+
+  async function saveRole(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);
+        stack.child(confirmDialog);
+      });
+    },
+    refresh() {
+      return state.load();
+    }
+  };
+}

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

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

package/templates/admin/src/main.js

@@ -1,166 +1,18 @@
-import {
-  createRouter,
-  toast,
-  vBody,
-  vNavbar,
-  vRouterViews,
-  vSidebar,
-  vstack
-} from '@yoyaflow/yoya-ui';
+import { initYoyaTheme } from '@yoyaflow/yoya-ui';
 import '@yoyaflow/yoya-ui/ui.css';
-
-// ---------- 页面视图 ----------
-
-function pageView(title, text) {
-  return vstack({ gap: '16px' }, (stack) => {
-    stack.h2(title);
-    stack.vCard((card) => {
-      card.vCardHeader(title);
-      card.vCardBody((body) => {
-        body.p(text);
-        body.vButton('操作', (btn) => {
-          btn.variant('primary');
-          btn.on('click', () => toast.success(`${title} 操作成功`));
-        });
-      });
-    });
-  });
-}
-
-// ---------- 模块配置：顶级导航 → 左侧菜单 → 路由 ----------
-
-const modules = [
-  {
-    key: 'dashboard',
-    label: '工作台',
-    icon: 'D',
-    routes: [
-      { path: '/dashboard/overview', title: '数据概览', text: '关键指标、趋势与告警一览。' },
-      { path: '/dashboard/todos', title: '待办审批', text: '待处理审批与任务。' }
-    ]
-  },
-  {
-    key: 'ops',
-    label: '运维',
-    icon: 'O',
-    routes: [
-      { path: '/ops/services', title: '服务清单', text: '服务列表与健康状态。' },
-      { path: '/ops/deploys', title: '部署任务', text: '发布记录与执行状态。' }
-    ]
-  },
-  {
-    key: 'system',
-    label: '系统',
-    icon: 'S',
-    routes: [
-      { path: '/system/users', title: '成员管理', text: '成员列表与角色分配。' },
-      { path: '/system/roles', title: '权限策略', text: '角色与权限规则。' }
-    ]
-  }
-];
-
-// ---------- 路由与内容区 ----------
-
-const appRouter = createRouter((r) => {
-  modules.forEach((module) => {
-    module.routes.forEach((route) => {
-      r.route(route.path, { title: route.title, view: () => pageView(route.title, route.text) });
-    });
-  });
-  r.notFound(() => pageView('未找到', '该页面不存在。'));
-});
-
-// ---------- 左侧菜单：随顶级导航切换 ----------
-
-let activeTopItem = null;
-
-function renderSidebarMenu(module) {
-  sidebar.menuContent((menu) => {
-    menu.vMenuGroup((group) => {
-      group.label(module.label);
-      module.routes.forEach((route) => {
-        group.vMenuItem((item) => {
-          item.icon(module.icon);
-          item.text(route.title);
-          item.on('click', () => appRouter.navigate(route.path));
-        });
-      });
-    });
-  });
-}
-
-function switchModule(module, topItem) {
-  if (activeTopItem) {
-    activeTopItem.active(false);
-  }
-  activeTopItem = topItem;
-  topItem.active(true);
-  renderSidebarMenu(module);
-  appRouter.navigate(module.routes[0].path);
-}
-
-const sidebar = vSidebar((side) => {
-  side.ariaLabel('左侧菜单');
-  side.title('导航');
-});
-renderSidebarMenu(modules[0]);
-
-// ---------- 顶部导航：logo + 系统名 / 顶级导航 / 用户头像 ----------
-
-const navbar = vNavbar((nav) => {
-  nav.sticky(true);
-  nav.brand((brand) => {
-    brand.hstack({ gap: '8px' }, (row) => {
-      row.style('alignItems', 'center');
-      row.span((logo) => {
-        logo.style({
-          color: 'var(--yoya-color-primary, #2563eb)',
-          fontSize: '18px',
-          fontWeight: '700'
-        });
-        logo.text('◆');
-      });
-      row.strong('yoya 管理台');
-    });
-  });
-  nav.menuContent((menu) => {
-    modules.forEach((module) => {
-      menu.vMenuItem((item) => {
-        item.text(module.label);
-        item.on('click', () => switchModule(module, item));
-      });
-    });
-  });
-  nav.actions((actions) => {
-    actions.vAvatar({ color: '#2563eb', size: 'small', text: '管' });
-  });
-});
-
-// ---------- 页面壳：上方导航，下方左菜单右内容 ----------
-
-const page = vBody((shell) => {
-  shell.gap(0);
-  shell.maxWidth('100%');
-  shell.padding(0);
-  shell.vContainer((frame) => {
-    frame.style('minHeight', '100vh');
-    frame.vHeader({ height: 56 }, (header) => {
-      header.style('padding', '0');
-      header.child(navbar);
-    });
-    frame.vContainer((body) => {
-      body.vAside({ width: 220 }, (aside) => {
-        aside.style('padding', '12px');
-        aside.child(sidebar);
-      });
-      body.vMain((main) => {
-        main.style('padding', '16px');
-        main.child(vRouterViews(appRouter, { lockTitle: true, title: '内容区' }));
-      });
-    });
-  });
-});
-
-page.bindTo('#app');
-appRouter.start();
-appRouter.navigate(modules[0].routes[0].path, { replace: true }); // 进入默认模块首页
+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';
+
+initYoyaTheme();
+
+const router = createAppRouter();
+const shell = AdminShell({ router, modules });
+shell.render().bindTo('#app');
+router.start();
+shell.syncFromUrl();

package/templates/admin/src/ui/app-navbar.js

@@ -0,0 +1,67 @@
+import { vAvatar, vNavbar } from '@yoyaflow/yoya-ui';
+
+export function AppNavbar({ modules, onModuleChange }) {
+  const items = new Map();
+  let activeKey = null;
+
+  return {
+    render() {
+      return vNavbar((nav) => {
+        nav.sticky(true);
+        nav.brand((brand) => {
+          brand.hstack({ gap: '10px' }, (row) => {
+            row.style({ alignItems: 'center', marginLeft: '16px' });
+            row.span((logo) => {
+              logo.style({
+                alignItems: 'center',
+                background: 'var(--yoya-color-primary, #2563eb)',
+                borderRadius: '8px',
+                boxSizing: 'border-box',
+                color: '#ffffff',
+                display: 'inline-flex',
+                fontSize: '16px',
+                fontWeight: '800',
+                height: '32px',
+                justifyContent: 'center',
+                lineHeight: '1',
+                width: '32px'
+              });
+              logo.text('y');
+            });
+            row.strong((name) => {
+              name.style({
+                color: 'var(--yoya-color-text-strong, #0f172a)',
+                fontSize: '16px',
+                fontWeight: '700'
+              });
+              name.text('yoya 管理台');
+            });
+          });
+        });
+        nav.menuContent((menu) => {
+          modules.forEach((module) => {
+            menu.vMenuItem((item) => {
+              item.text(module.label);
+              items.set(module.key, item);
+              item.on('click', () => onModuleChange(module));
+            });
+          });
+        });
+        nav.actions((actions) => {
+          actions.vThemeModeSwitch({ persist: true });
+          const avatar = vAvatar({ color: '#2563eb', size: 'small', text: '管' });
+          avatar.style('marginRight', '16px');
+          actions.child(avatar);
+        });
+      });
+    },
+    activate(key) {
+      if (activeKey && activeKey !== key) {
+        items.get(activeKey)?.active(false);
+      }
+      activeKey = key;
+      items.get(key)?.active(true);
+      return this;
+    }
+  };
+}

package/templates/admin/src/ui/app-sidebar.js

@@ -0,0 +1,27 @@
+import { vSidebar } from '@yoyaflow/yoya-ui';
+import { SidebarMenu } from './sidebar-menu.js';
+
+export function AppSidebar({ router }) {
+  const sidebar = vSidebar((side) => {
+    side.ariaLabel('左侧菜单');
+    side.title('导航');
+    side.collapsible(false);
+  });
+  sidebar.style({
+    flex: '0 0 auto',
+    width: '220px',
+    gridTemplateRows: 'auto minmax(0, 1fr)'
+  });
+
+  return {
+    render() {
+      return sidebar;
+    },
+    showModule(module) {
+      sidebar.menuContent((menu) => {
+        menu.child(SidebarMenu({ module, router }));
+      });
+      return this;
+    }
+  };
+}

package/templates/admin/src/ui/placeholder-page.js

@@ -0,0 +1,17 @@
+import { toast, vstack } from '@yoyaflow/yoya-ui';
+
+export function PlaceholderPage({ title, text }) {
+  return vstack({ gap: '16px' }, (stack) => {
+    stack.h2(title);
+    stack.vCard((card) => {
+      card.vCardHeader(title);
+      card.vCardBody((body) => {
+        body.p(text);
+        body.vButton('操作', (btn) => {
+          btn.variant('primary');
+          btn.on('click', () => toast.success(`${title} 操作成功`));
+        });
+      });
+    });
+  });
+}

package/templates/admin/src/ui/row-action-button.js

@@ -0,0 +1,12 @@
+import { vButton } from '@yoyaflow/yoya-ui';
+
+// 表格/树行内操作按钮：小尺寸、常规字重，避免行内文字显得粗重。
+export function RowActionButton(text, setup = null) {
+  return vButton(text, (btn) => {
+    btn.size('small');
+    btn.style('fontWeight', '400');
+    if (typeof setup === 'function') {
+      setup(btn);
+    }
+  });
+}

package/templates/admin/src/ui/sidebar-menu.js

@@ -0,0 +1,14 @@
+import { vMenuGroup } from '@yoyaflow/yoya-ui';
+
+export function SidebarMenu({ module, router }) {
+  return vMenuGroup((group) => {
+    group.label(module.label);
+    module.routes.forEach((route) => {
+      group.vMenuItem((item) => {
+        item.text(route.title);
+        item.active(route.path === router.currentPath());
+        item.on('click', () => router.navigate(route.path));
+      });
+    });
+  });
+}

package/templates/admin/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "allowJs": true,
+    "checkJs": false,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src"]
+}

package/templates/basic/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@yoyaflow/yoya-ui": "^0.2.0"
+    "@yoyaflow/yoya-ui": "^0.3.0"
   },
   "devDependencies": {
     "vite": "^8.2.0"