create-yoya-ui 0.2.0 → 0.2.2

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/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;
-    }
-  };
-}