create-yoya-ui 0.2.1 → 0.2.3

package/templates/admin/src/shell/api/shell.mock.js

@@ -0,0 +1,42 @@
+// 演示用内存 mock（接入真实后端后删除本文件）。
+import { mockRequest } from '../../api/domain.api.js';
+
+const delay = (ms = 200) => new Promise((resolve) => setTimeout(resolve, ms));
+
+mockRequest('GET', '/menus', async () => {
+  await delay();
+  return {
+    ok: true,
+    data: [
+      {
+        key: 'dashboard',
+        label: '工作台',
+        icon: 'D',
+        routes: [
+          { path: '/dashboard/overview', title: '数据概览', viewKey: 'dashboard-overview' },
+          { path: '/dashboard/todos', title: '待办审批', viewKey: 'todo-approval' }
+        ]
+      },
+      {
+        key: 'ops',
+        label: '运维',
+        icon: 'O',
+        routes: [
+          { path: '/ops/services', title: '服务清单', viewKey: 'service-list' },
+          { path: '/ops/deploys', title: '部署任务', viewKey: 'deploy-list' }
+        ]
+      },
+      {
+        key: 'system',
+        label: '系统',
+        icon: 'S',
+        routes: [
+          { path: '/system/members', title: '成员管理', viewKey: 'member-list' },
+          { path: '/system/roles', title: '角色管理', viewKey: 'role-list' },
+          { path: '/system/permissions', title: '权限管理', viewKey: 'permission-list' },
+          { path: '/system/dicts', title: '字典管理', viewKey: 'dict-list' }
+        ]
+      }
+    ]
+  };
+});

package/templates/admin/src/shell/api/shell.req.js

@@ -0,0 +1,17 @@
+// 外壳请求命令：其他模块（启动装配）调用本域能力的入口，方便后续替换为服务端接口（去掉 mock 即可）。
+import { RequestBase } from '@yoyaflow/yoya-ui';
+import Shell from './shell.views.js';
+
+class QueryMenus extends RequestBase {
+  address() {
+    return '/menus';
+  }
+
+  toItem(row) {
+    return new Shell.Module(row);
+  }
+}
+
+export default {
+  QueryMenus: (init) => new QueryMenus(init)
+};

package/templates/admin/src/shell/api/shell.state.js

@@ -0,0 +1,90 @@
+// 外壳状态类：菜单数据 + 导航状态（当前模块 / 当前路径）的唯一事实源，
+// 加载时创建并持有路由，暴露导航动作（switchModule / navigate），由路由订阅驱动 syncFromPath。
+import ShellReq from './shell.req.js';
+import { createAppRouter } from '../router.js';
+
+export default class ShellState {
+  constructor() {
+    this._menus = [];
+    this._router = null;
+    this._activeModuleKey = null;
+    this._activePath = null;
+    this._listeners = new Set();
+    this._unsubscribeRouter = null;
+  }
+
+  menus() {
+    return this._menus;
+  }
+
+  router() {
+    return this._router;
+  }
+
+  activeModuleKey() {
+    return this._activeModuleKey;
+  }
+
+  activePath() {
+    return this._activePath;
+  }
+
+  subscribe(listener) {
+    this._listeners.add(listener);
+    return () => this._listeners.delete(listener);
+  }
+
+  async load() {
+    const result = await ShellReq.QueryMenus().submit();
+    this._menus = result.data;
+    this._router = createAppRouter(this._menus);
+    this._unsubscribeRouter = this._router.subscribe((context) => this.syncFromPath(context.path));
+    this._emit();
+    return result;
+  }
+
+  start() {
+    this._router?.start();
+    return this;
+  }
+
+  // 顶栏切换模块：进入模块首个路由。
+  switchModule(module) {
+    const first = module?.routes?.[0];
+    if (first) {
+      this._router?.navigate(first.path);
+    }
+    return this;
+  }
+
+  // 侧栏 / 任意入口：打开指定路径。
+  navigate(path) {
+    this._router?.navigate(path);
+    return this;
+  }
+
+  syncFromPath(path) {
+    const module = this._menus.find((entry) =>
+      entry.routes.some((route) => route.path === path)
+    );
+    const changed =
+      this._activePath !== path || (module && this._activeModuleKey !== module.key);
+    this._activePath = path;
+    if (module) {
+      this._activeModuleKey = module.key;
+    }
+    if (changed) {
+      this._emit();
+    }
+    return this;
+  }
+
+  destroy() {
+    this._unsubscribeRouter?.();
+    this._listeners.clear();
+  }
+
+  _emit() {
+    this._listeners.forEach((listener) => listener());
+  }
+}

package/templates/admin/src/shell/api/shell.views.js

@@ -0,0 +1,19 @@
+// 外壳结果结构（纯数据）：菜单模块与路由，服务端返回后由 toItem 映射。
+class Route {
+  constructor({ path, title, viewKey }) {
+    this.path = path;
+    this.title = title;
+    this.viewKey = viewKey;
+  }
+}
+
+class Module {
+  constructor({ key, label, icon, routes = [] }) {
+    this.key = key;
+    this.label = label;
+    this.icon = icon;
+    this.routes = routes.map((route) => new Route(route));
+  }
+}
+
+export default { Module, Route };

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

@@ -0,0 +1,42 @@
+import { vBody, vRouterViews } from '@yoyaflow/yoya-ui';
+import { AppNavbar } from './app-navbar.js';
+import { AppSidebar } from './app-sidebar.js';
+
+// 外壳装配：只做布局组装与状态接线。路由与导航动作都在 ShellState。
+// URL 变化 → state.syncFromPath() → 状态通知 → 顶栏 / 侧栏从状态派生高亮。
+export function AdminShell({ state }) {
+  const navbar = AppNavbar({ state });
+  const sidebar = AppSidebar({ state });
+
+  const unsubscribe = state.subscribe(() => {
+    navbar.applyState();
+    sidebar.applyState();
+  });
+
+  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(state.router(), { lockTitle: true, title: '内容区' }));
+            });
+          });
+        });
+      });
+    },
+    destroy() {
+      unsubscribe();
+    }
+  };
+}

package/templates/admin/src/{ui → shell/components}/app-navbar.js

@@ -1,8 +1,14 @@
 import { vAvatar, vNavbar } from '@yoyaflow/yoya-ui';
 
-export function AppNavbar({ modules, onModuleChange }) {
+export function AppNavbar({ state }) {
   const items = new Map();
-  let activeKey = null;
+
+  function applyState() {
+    const activeKey = state.activeModuleKey();
+    items.forEach((item, key) => {
+      item.active(key === activeKey);
+    });
+  }
 
   return {
     render() {
@@ -39,11 +45,11 @@ export function AppNavbar({ modules, onModuleChange }) {
           });
         });
         nav.menuContent((menu) => {
-          modules.forEach((module) => {
+          state.menus().forEach((module) => {
             menu.vMenuItem((item) => {
               item.text(module.label);
               items.set(module.key, item);
-              item.on('click', () => onModuleChange(module));
+              item.on('click', () => state.switchModule(module));
             });
           });
         });
@@ -55,13 +61,6 @@ export function AppNavbar({ modules, onModuleChange }) {
         });
       });
     },
-    activate(key) {
-      if (activeKey && activeKey !== key) {
-        items.get(activeKey)?.active(false);
-      }
-      activeKey = key;
-      items.get(key)?.active(true);
-      return this;
-    }
+    applyState
   };
 }

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

@@ -0,0 +1,44 @@
+import { vSidebar } from '@yoyaflow/yoya-ui';
+import { SidebarMenu } from './sidebar-menu.js';
+
+export function AppSidebar({ state }) {
+  let sidebar = null;
+
+  function render() {
+    sidebar = vSidebar((side) => {
+      side.ariaLabel('左侧菜单');
+      side.title('导航');
+      side.collapsible(false);
+      side.style({
+        flex: '0 0 auto',
+        width: '220px',
+        gridTemplateRows: 'auto minmax(0, 1fr)'
+      });
+    });
+    return sidebar;
+  }
+
+  function applyState() {
+    if (!sidebar) {
+      return;
+    }
+    const module = state.menus().find((entry) => entry.key === state.activeModuleKey());
+    if (!module) {
+      return;
+    }
+    sidebar.menuContent((menu) => {
+      menu.child(
+        SidebarMenu({
+          module,
+          activePath: state.activePath(),
+          onNavigate: (path) => state.navigate(path)
+        })
+      );
+    });
+  }
+
+  return {
+    render,
+    applyState
+  };
+}

package/templates/admin/src/{ui → shell/components}/sidebar-menu.js

@@ -1,13 +1,13 @@
 import { vMenuGroup } from '@yoyaflow/yoya-ui';
 
-export function SidebarMenu({ module, router }) {
+export function SidebarMenu({ module, activePath, onNavigate }) {
   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));
+        item.active(route.path === activePath);
+        item.on('click', () => onNavigate(route.path));
       });
     });
   });

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

@@ -0,0 +1,40 @@
+import { createRouter } from '@yoyaflow/yoya-ui';
+import { PlaceholderPage } from '../shared/ui.pages.js';
+import { DashboardOverviewPage } from '../features/dashboard/overview/pages/dashboard-overview-page.js';
+import { TodoApprovalPage } from '../features/dashboard/todos/pages/todo-approval-page.js';
+import { ServiceListPage } from '../features/ops/services/pages/service-list-page.js';
+import { DeployListPage } from '../features/ops/deploys/pages/deploy-list-page.js';
+import { MemberListPage } from '../features/system/members/pages/member-list-page.js';
+import { RoleListPage } from '../features/system/roles/pages/role-list-page.js';
+import { PermissionListPage } from '../features/system/permissions/pages/permission-list-page.js';
+import { DictListPage } from '../features/system/dicts/pages/dict-list-page.js';
+
+// 菜单视图注册表：服务端菜单只返回 viewKey，由这里映射到客户端页面组件。
+const viewRegistry = {
+  'dashboard-overview': DashboardOverviewPage,
+  'todo-approval': TodoApprovalPage,
+  'service-list': ServiceListPage,
+  'deploy-list': DeployListPage,
+  'member-list': MemberListPage,
+  'role-list': RoleListPage,
+  'permission-list': PermissionListPage,
+  'dict-list': DictListPage
+};
+
+export function createAppRouter(menus) {
+  const router = createRouter((r) => {
+    menus.forEach((module) => {
+      module.routes.forEach((route) => {
+        const Page = viewRegistry[route.viewKey];
+        r.route(route.path, {
+          title: route.title,
+          view: () =>
+            Page ? Page() : PlaceholderPage({ title: route.title, text: '该页面待开发。' })
+        });
+      });
+    });
+    r.notFound(() => PlaceholderPage({ title: '未找到', text: '该页面不存在。' }));
+  });
+  router.default(menus[0].routes[0].path);
+  return router;
+}

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

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

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

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

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

@@ -1,51 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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/ui/app-sidebar.js

@@ -1,27 +0,0 @@
-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;
-    }
-  };
-}