create-yoya-ui 0.1.1 → 0.2.0

package/README.md

@@ -7,14 +7,17 @@
 ```bash
 npx create-yoya-ui@latest my-app                 # basic 模板（SPA）
 npx create-yoya-ui@latest my-app --template ssr  # SSR 模板
+npx create-yoya-ui@latest my-app --template admin # 后台管理模板
 cd my-app
 npm install
 ```
 
 - **basic**：默认模板，`npm run dev` 启动 Vite 开发服务器
 - **ssr**：服务端渲染模板，`npm run build && npm start`（renderPage 整页渲染 + hydrateOrMount 客户端接入）
+- **admin**：标准后台管理模板（顶部导航 + 可折叠侧栏 + RouterViews 内容区）
 
 ## 模板内容
 
 - `templates/basic`：页面壳、按钮事件、表单收集校验、主题切换
 - `templates/ssr`：home-page.js（页面组件 + 词典）、server.mjs（node:http + renderPage）、client.js（hydrateOrMount）
+- `templates/admin`：标准后台管理模板（logo/系统名、顶部导航、用户头像、可折叠菜单、带标题内容区），内置数据概览看板与图表，以及成员 / 角色 / 权限 / 字典管理示例

package/bin/create-yoya-ui.js

@@ -13,7 +13,7 @@ const templateName =
 const templateRoot = resolve(fileURLToPath(new URL(`../templates/${templateName}`, import.meta.url)));
 
 if (!existsSync(templateRoot)) {
-  console.error(`未知模板：${templateName}（可用：basic、ssr）`);
+  console.error(`未知模板：${templateName}（可用：basic、ssr、admin）`);
   process.exit(1);
 }
 
@@ -40,7 +40,9 @@ if (templateName === 'ssr') {
   console.log('\nSSR 模板：renderPage 整页渲染 + hydrateOrMount 客户端接入。\n');
 } else {
   console.log('  npm run dev');
-  console.log('\n更多：npm run build 构建，npm run preview 预览产物。\n');
+  console.log(
+    `\n${templateName === 'admin' ? '管理后台模板：顶部导航 + 可折叠侧栏 + RouterViews 内容区。' : ''}更多：npm run build 构建，npm run preview 预览产物。\n`
+  );
 }
 
 function sanitizeName(name) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-yoya-ui",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Scaffold a new yoya-ui project with Vite: basic template (SPA) or SSR template (renderPage + hydrateOrMount).",
   "type": "module",
   "bin": {

package/templates/admin/README.md

@@ -0,0 +1,77 @@
+# yoya-ui 后台管理模板
+
+标准管理后台布局：
+
+- 左上角：logo + 系统名
+- 中间：顶级导航
+- 右上角：用户头像
+- 下方：左侧可折叠菜单 + 右侧带标题的 RouterViews 内容区
+- 点击顶级导航切换左侧菜单与内容路由
+
+## 启动
+
+```bash
+npm install
+npm run dev
+```
+
+## TypeScript
+
+模板默认支持 TypeScript，非侵入接入：现有 `.js` 文件保持不动（`tsconfig.json` 已开启 `allowJs`），需要类型时直接新建或改写为 `.ts` 文件即可（Vite 原生支持）。运行 `npm run typecheck` 做类型检查。
+
+## 结构
+
+```text
+src/
+  main.js                       入口：初始化主题、创建路由与外壳并挂载
+  api/
+    fetch.api.js                原始传输层（fetch 实现，换请求库只改这里）
+    domain.api.js               领域请求入口：统一 Result 解析 + mock/真实切换
+  app/
+    modules.js                  模块配置（顶级导航 → 左侧菜单 → 路由）
+    router.js                   路由组装（占位页兜底）
+    admin-shell.js              AdminShell 页面组件（顶栏 + 侧栏 + 内容区组合）
+  ui/
+    placeholder-page.js         PlaceholderPage 通用占位页
+    app-navbar.js               AppNavbar 顶部导航（logo + 顶级导航 + 主题/头像）
+    app-sidebar.js              AppSidebar 左侧导航外壳
+    sidebar-menu.js             SidebarMenu 模块菜单组件
+  features/
+    dashboard/                  工作台（数据概览示例：数字看板 / 趋势卡 / 图表）
+      pages/dashboard-overview-page.js 页面编排：核心指标看板 + 趋势卡 + 图表 + 资源使用
+      components/dashboard-chart.js     vChart 内置 SVG 适配器（柱状图 / 折线图）
+    members/                    成员管理业务域（CRUD 示例）
+      pages/member-list-page.js 页面编排：组合工具栏、表格、弹窗与分页
+      components/
+        member-toolbar.js       MemberToolbar 搜索/新增工具栏
+        member-table.js         MemberTable 成员表格
+        member-form-dialog.js   MemberFormDialog 新增/编辑弹窗
+      api/
+        member.mgr.js           管理请求命令（增删改查等）
+        member.req.js           外部请求命令（其他模块调用本域能力）
+        member.views.js         领域结果结构（列表项 / 详情）
+        member.state.js         状态类 MembersPageState：持有数据与筛选，动作 submit 命令后驱动视图
+        member.mock.js          演示用内存 mock（接入真实后端后删除）
+      utils/options.js          领域常量（角色/状态选项与文案）
+    permissions/                权限管理业务域（vTree 权限树示例）
+      pages/permission-list-page.js 页面编排：权限树 + 工具栏 + 表单弹窗 + 删除确认
+      components/
+        permission-form-dialog.js PermissionFormDialog 新增/编辑权限弹窗
+      api/
+        permission.mgr.js       权限管理请求命令（查询树 / 新增 / 编辑 / 删除）
+        permission.state.js     状态类 PermissionsPageState
+        permission.views.js     权限节点结构
+        permission.mock.js      演示用内存 mock
+    roles/                      角色管理业务域（分页 CRUD 示例）
+      pages/role-list-page.js   页面编排：搜索 + 表格 + 分页 + 表单弹窗
+      components/               RoleToolbar / RoleTable / RoleFormDialog
+      api/                      请求命令 / 状态类 / 结果结构 / mock
+    dicts/                      字典管理业务域（字典类型 + 字典项主从示例）
+      pages/dict-list-page.js   页面编排：字典类型表格 + 编辑弹窗（基本信息 + 字典值表格）
+      components/               DictEditorDialog / DictItemFormDialog
+      api/                      请求命令 / 状态类 / 结果结构 / mock
+```
+
+目录规则遵循 yoya-ui skill 的业务模块组织（feature 自包含、页面只编排、service 里 api 管数据交互、state 管状态）。
+
+扩展新模块：在 `app/modules.js` 的 `modules` 数组里加一组 `{ key, label, icon, routes }`；有数据交互的页面参考 `features/members` 的 api / pages 分层。

package/templates/admin/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>yoya-ui 管理台</title>
+  </head>
+  <body>
+    <main id="app"></main>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/templates/admin/node_modules/.vite/deps/_metadata.json

@@ -0,0 +1,8 @@
+{
+  "hash": "307bbf2f",
+  "configHash": "670dd850",
+  "lockfileHash": "7fb7e123",
+  "browserHash": "54e0f4b6",
+  "optimized": {},
+  "chunks": {}
+}

package/templates/admin/node_modules/.vite/deps/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

package/templates/admin/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "yoya-ui-admin-app",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@yoyaflow/yoya-ui": "^0.3.0"
+  },
+  "devDependencies": {
+    "typescript": "^7.0.2",
+    "vite": "^8.2.0"
+  }
+}

package/templates/admin/src/api/domain.api.d.ts

@@ -0,0 +1,10 @@
+/** 领域请求入口类型声明（对应 domain.api.js）。 */
+import type { RequestCommand } from '@yoyaflow/yoya-ui';
+
+export function mockRequest(
+  method: string,
+  address: string | RegExp,
+  handler: (req: RequestCommand) => Promise<Record<string, unknown>>
+): void;
+
+export function domainSubmit(req: RequestCommand): Promise<unknown>;

package/templates/admin/src/api/domain.api.js

@@ -0,0 +1,31 @@
+// 领域请求入口：统一 Result 解析 + mock / 真实传输切换。
+import { configureRequest, Result } from '@yoyaflow/yoya-ui';
+import { fetchSubmit } from './fetch.api.js';
+
+const mockHandlers = new Map();
+
+export function mockRequest(method, address, handler) {
+  const pattern =
+    address instanceof RegExp
+      ? new RegExp(`^${method} ${address.source.replace(/^\^/, '').replace(/\$$/, '')}$`)
+      : `${method} ${address}`;
+  mockHandlers.set(pattern, handler);
+}
+
+function matchMock(req) {
+  const key = `${req.method()} ${req.address()}`;
+  for (const [pattern, handler] of mockHandlers) {
+    if (pattern === key || (pattern instanceof RegExp && pattern.test(key))) {
+      return handler;
+    }
+  }
+  return null;
+}
+
+export async function domainSubmit(req) {
+  const mock = matchMock(req);
+  const raw = mock ? await mock(req) : await fetchSubmit(req);
+  return Result.from(raw, req);
+}
+
+configureRequest({ submit: domainSubmit });

package/templates/admin/src/api/fetch.api.d.ts

@@ -0,0 +1,4 @@
+/** 原始传输层类型声明（对应 fetch.api.js）。 */
+import type { RequestCommand } from '@yoyaflow/yoya-ui';
+
+export function fetchSubmit(req: RequestCommand): Promise<unknown>;

package/templates/admin/src/api/fetch.api.js

@@ -0,0 +1,20 @@
+// 原始传输层：fetch 实现。更换 ajax / 请求库只改这里。
+export async function fetchSubmit(req) {
+  const query = new URLSearchParams(req.params() ?? {}).toString();
+  const url = query ? `${req.address()}?${query}` : req.address();
+  const headers = { 'Content-Type': 'application/json', ...(req.headers() ?? {}) };
+  const body = req.body();
+
+  const response = await fetch(url, {
+    method: req.method(),
+    headers,
+    credentials: req.cookies() ? 'include' : 'same-origin',
+    body: body === null || body === undefined ? undefined : JSON.stringify(body)
+  });
+
+  if (!response.ok) {
+    throw new Error(`请求失败：HTTP ${response.status}`);
+  }
+
+  return response.json();
+}

package/templates/admin/src/app/admin-shell.js

@@ -0,0 +1,51 @@
+import { vBody, vRouterViews } from '@yoyaflow/yoya-ui';
+import { AppNavbar } from '../ui/app-navbar.js';
+import { AppSidebar } from '../ui/app-sidebar.js';
+
+export function AdminShell({ router, modules }) {
+  const navbar = AppNavbar({ modules, onModuleChange: switchModule });
+  const sidebar = AppSidebar({ router });
+
+  function switchModule(module) {
+    navbar.activate(module.key);
+    router.navigate(module.routes[0].path);
+    sidebar.showModule(module);
+  }
+
+  function syncModuleFromUrl() {
+    const path = router.currentPath();
+    const module = modules.find((entry) => entry.routes.some((route) => route.path === path));
+    if (!module) {
+      return;
+    }
+    navbar.activate(module.key);
+    sidebar.showModule(module);
+  }
+
+  return {
+    render() {
+      return vBody((shell) => {
+        shell.gap(0);
+        shell.maxWidth('100%');
+        shell.padding(0);
+        shell.vContainer((frame) => {
+          frame.viewport(true);
+          frame.vHeader({ height: 56 }, (header) => {
+            header.style('padding', '0');
+            header.child(navbar);
+          });
+          frame.vContainer((body) => {
+            body.style({ flex: '1 1 auto', minHeight: '0' });
+            body.child(sidebar);
+            body.vMain((main) => {
+              main.child(vRouterViews(router, { lockTitle: true, title: '内容区' }));
+            });
+          });
+        });
+      });
+    },
+    syncFromUrl() {
+      syncModuleFromUrl();
+    }
+  };
+}

package/templates/admin/src/app/modules.js

@@ -0,0 +1,37 @@
+import { MemberListPage } from '../features/members/pages/member-list-page.js';
+import { PermissionListPage } from '../features/permissions/pages/permission-list-page.js';
+import { RoleListPage } from '../features/roles/pages/role-list-page.js';
+import { DictListPage } from '../features/dicts/pages/dict-list-page.js';
+import { DashboardOverviewPage } from '../features/dashboard/pages/dashboard-overview-page.js';
+
+export const modules = [
+  {
+    key: 'dashboard',
+    label: '工作台',
+    icon: 'D',
+    routes: [
+      { path: '/dashboard/overview', title: '数据概览', view: DashboardOverviewPage },
+      { 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/members', title: '成员管理', view: MemberListPage },
+      { path: '/system/roles', title: '角色管理', view: RoleListPage },
+      { path: '/system/permissions', title: '权限管理', view: PermissionListPage },
+      { path: '/system/dicts', title: '字典管理', view: DictListPage }
+    ]
+  }
+];

package/templates/admin/src/app/router.js

@@ -0,0 +1,20 @@
+import { createRouter } from '@yoyaflow/yoya-ui';
+import { modules } from './modules.js';
+import { PlaceholderPage } from '../ui/placeholder-page.js';
+
+export function createAppRouter() {
+  const router = createRouter((r) => {
+    modules.forEach((module) => {
+      module.routes.forEach((route) => {
+        r.route(route.path, {
+          title: route.title,
+          view: () =>
+            route.view ? route.view() : PlaceholderPage({ title: route.title, text: route.text })
+        });
+      });
+    });
+    r.notFound(() => PlaceholderPage({ title: '未找到', text: '该页面不存在。' }));
+  });
+  router.default(modules[0].routes[0].path);
+  return router;
+}

package/templates/admin/src/features/dashboard/components/dashboard-chart.js

@@ -0,0 +1,205 @@
+import { svg, vCard, vChart } from '@yoyaflow/yoya-ui';
+
+/* global document */
+
+const VIEW_BOX = { height: 260, width: 640 };
+const PAD = { bottom: 34, left: 44, right: 16, top: 14 };
+const SERIES_COLORS = ['#2563eb', '#16a34a', '#f59e0b', '#dc2626', '#8b5cf6'];
+
+// vChart 内置 SVG 适配器：bar 柱状图 / line 折线图，零外部依赖。
+export function DashboardChart({ labels = [], series = [], title = '', type = 'bar', height = 280 } = {}) {
+  const chart = vChart({
+    adapter: createSvgAdapter(),
+    data: { labels, series },
+    height,
+    options: { type }
+  });
+
+  return {
+    render() {
+      return vCard((card) => {
+        card.vCardHeader(title);
+        card.vCardBody((body) => {
+          body.div((host) => {
+            host.style({ minWidth: '0', width: '100%' });
+            host.child(chart);
+          });
+        });
+      });
+    },
+    update(next) {
+      chart.data(next);
+      return this;
+    }
+  };
+}
+
+function createSvgAdapter() {
+  return {
+    init(host, context) {
+      const instance = { host };
+      renderChart(instance, context);
+      return instance;
+    },
+    update(instance, context) {
+      renderChart(instance, context);
+    },
+    resize() {},
+    destroy() {}
+  };
+}
+
+function renderChart(instance, context) {
+  const root = buildChartSvg(context.data, context.options);
+  const legend = buildLegend(context.data?.series ?? []);
+  instance.host.replaceChildren(legend, root.renderDom());
+}
+
+function buildLegend(series) {
+  const legend = document.createElement('div');
+  legend.style.cssText =
+    'display:flex;flex-wrap:wrap;gap:14px;margin-bottom:8px;' +
+    'font-size:12px;color:var(--yoya-color-text-muted,#64748b);';
+  series.forEach((entry, index) => {
+    const color = entry.color ?? SERIES_COLORS[index % SERIES_COLORS.length];
+    const dot = document.createElement('span');
+    dot.style.cssText =
+      `background:${color};border-radius:2px;display:inline-block;` +
+      'height:8px;margin-right:5px;width:8px;';
+    const text = document.createElement('span');
+    text.textContent = entry.name ?? `系列 ${index + 1}`;
+    const item = document.createElement('span');
+    item.style.cssText = 'align-items:center;display:inline-flex;';
+    item.append(dot, text);
+    legend.appendChild(item);
+  });
+  return legend;
+}
+
+function buildChartSvg(data, options) {
+  const labels = data?.labels ?? [];
+  const series = (data?.series ?? []).map((entry, index) => ({
+    color: entry.color ?? SERIES_COLORS[index % SERIES_COLORS.length],
+    data: entry.data ?? [],
+    name: entry.name ?? `系列 ${index + 1}`
+  }));
+  const type = options?.type ?? 'bar';
+  const plotHeight = VIEW_BOX.height - PAD.top - PAD.bottom;
+  const plotWidth = VIEW_BOX.width - PAD.left - PAD.right;
+  const maxValue = niceCeil(Math.max(1, ...series.flatMap((entry) => entry.data)));
+  const toY = (value) => PAD.top + plotHeight - (value / maxValue) * plotHeight;
+
+  const root = svg((node) => {
+    node.attr({
+      height: 'calc(100% - 30px)',
+      role: 'img',
+      viewBox: `0 0 ${VIEW_BOX.width} ${VIEW_BOX.height}`,
+      width: '100%'
+    });
+
+    for (let index = 0; index <= 4; index += 1) {
+      const ratio = index / 4;
+      const lineY = PAD.top + plotHeight * (1 - ratio);
+      node.line({
+        stroke: index === 0 ? '#cbd5e1' : '#eef1f4',
+        'stroke-width': 1,
+        x1: PAD.left,
+        x2: VIEW_BOX.width - PAD.right,
+        y1: lineY,
+        y2: lineY
+      });
+      node.text(String(Math.round(maxValue * ratio)), {
+        fill: '#64748b',
+        'font-size': 11,
+        'text-anchor': 'end',
+        x: PAD.left - 8,
+        y: lineY + 4
+      });
+    }
+
+    if (type === 'line') {
+      drawLineChart(node, { labels, plotHeight, plotWidth, series, toY });
+    } else {
+      drawBarChart(node, { labels, plotHeight, plotWidth, series, toY });
+    }
+
+    labels.forEach((label, index) => {
+      const x =
+        type === 'line'
+          ? PAD.left + (plotWidth * index) / Math.max(1, labels.length - 1)
+          : PAD.left + (plotWidth * (index + 0.5)) / labels.length;
+      node.text(label, {
+        fill: '#64748b',
+        'font-size': 11,
+        'text-anchor': 'middle',
+        x,
+        y: VIEW_BOX.height - 10
+      });
+    });
+  });
+
+  return root;
+}
+
+function drawBarChart(node, { labels, plotHeight, plotWidth, series, toY }) {
+  const groupWidth = plotWidth / Math.max(1, labels.length);
+  const barWidth = Math.min(32, (groupWidth * 0.72) / series.length);
+  labels.forEach((label, labelIndex) => {
+    const centerX = PAD.left + groupWidth * labelIndex + groupWidth / 2;
+    series.forEach((entry, seriesIndex) => {
+      const value = entry.data[labelIndex] ?? 0;
+      const barX = centerX - (barWidth * series.length) / 2 + barWidth * seriesIndex;
+      node.rect({
+        fill: entry.color,
+        height: PAD.top + plotHeight - toY(value),
+        rx: 2,
+        width: barWidth,
+        x: barX,
+        y: toY(value)
+      });
+    });
+  });
+}
+
+function drawLineChart(node, { labels, plotHeight, plotWidth, series, toY }) {
+  const stepX = plotWidth / Math.max(1, labels.length - 1);
+  series.forEach((entry) => {
+    const points = entry.data.map((value, index) => `${PAD.left + stepX * index},${toY(value)}`);
+    if (points.length > 1) {
+      const area = [
+        `${PAD.left},${PAD.top + plotHeight}`,
+        ...points,
+        `${PAD.left + stepX * (points.length - 1)},${PAD.top + plotHeight}`
+      ];
+      node.polygon({ fill: entry.color, opacity: 0.1, points: area.join(' ') });
+    }
+    node.polyline({
+      fill: 'none',
+      points: points.join(' '),
+      stroke: entry.color,
+      'stroke-linecap': 'round',
+      'stroke-linejoin': 'round',
+      'stroke-width': 2
+    });
+    entry.data.forEach((value, index) => {
+      node.circle({
+        cx: PAD.left + stepX * index,
+        cy: toY(value),
+        fill: '#ffffff',
+        r: 3,
+        stroke: entry.color,
+        'stroke-width': 2
+      });
+    });
+  });
+}
+
+function niceCeil(value) {
+  if (value <= 0) {
+    return 1;
+  }
+  const power = 10 ** Math.floor(Math.log10(value));
+  const normalized = value / power;
+  const nice = normalized <= 1 ? 1 : normalized <= 2 ? 2 : normalized <= 5 ? 5 : 10;
+  return nice * power;
+}