create-yoya-ui 0.2.2 → 0.3.3

package/templates/admin/src/features/system/roles/api/role.mgr.d.ts

@@ -26,16 +26,14 @@ declare class Create extends RequestBase {
 }
 
 declare class Update extends RequestBase {
-  constructor(
-    init?: {
-      id: number;
-      name?: string;
-      code?: string;
-      description?: string;
-      status?: RoleStatus;
-      sort?: number;
-    }
-  );
+  constructor(init?: {
+    id: number;
+    name?: string;
+    code?: string;
+    description?: string;
+    status?: RoleStatus;
+    sort?: number;
+  });
   method(): 'PUT';
   address(): string;
   body(): { name: string; code: string; description: string; status: RoleStatus; sort: number };
@@ -48,22 +46,22 @@ declare class Remove extends RequestBase {
 }
 
 declare const RoleMgr: {
-  Query: (
-    init?: { page?: number; pageSize?: number; keyword?: string; status?: string }
-  ) => Query;
-  Create: (
-    init?: { name?: string; code?: string; description?: string; status?: RoleStatus; sort?: number }
-  ) => Create;
-  Update: (
-    init?: {
-      id: number;
-      name?: string;
-      code?: string;
-      description?: string;
-      status?: RoleStatus;
-      sort?: number;
-    }
-  ) => Update;
+  Query: (init?: { page?: number; pageSize?: number; keyword?: string; status?: string }) => Query;
+  Create: (init?: {
+    name?: string;
+    code?: string;
+    description?: string;
+    status?: RoleStatus;
+    sort?: number;
+  }) => Create;
+  Update: (init?: {
+    id: number;
+    name?: string;
+    code?: string;
+    description?: string;
+    status?: RoleStatus;
+    sort?: number;
+  }) => Update;
   Remove: (init?: { id: number }) => Remove;
 };
 

package/templates/admin/src/features/system/roles/api/role.mock.js

@@ -2,7 +2,14 @@
 import { mockRequest } from '../../../../api/domain.api.js';
 
 let roles = [
-  { id: 1, name: '超级管理员', code: 'super_admin', description: '拥有全部权限', status: 'active', sort: 1 },
+  {
+    id: 1,
+    name: '超级管理员',
+    code: 'super_admin',
+    description: '拥有全部权限',
+    status: 'active',
+    sort: 1
+  },
   { id: 2, name: '管理员', code: 'admin', description: '后台管理操作', status: 'active', sort: 2 },
   { id: 3, name: '运维', code: 'ops', description: '运维与部署', status: 'active', sort: 3 },
   { id: 4, name: '审计员', code: 'auditor', description: '只读审计', status: 'disabled', sort: 4 },
@@ -22,9 +29,7 @@ function filterRoles({ keyword = '', status = '' } = {}) {
   const text = String(keyword).trim().toLowerCase();
   return roles.filter((role) => {
     const matchKeyword =
-      !text ||
-      role.name.toLowerCase().includes(text) ||
-      role.code.toLowerCase().includes(text);
+      !text || role.name.toLowerCase().includes(text) || role.code.toLowerCase().includes(text);
     const matchStatus = !status || role.status === status;
     return matchKeyword && matchStatus;
   });

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

@@ -46,15 +46,17 @@ export function RoleFormDialog({ onSubmit }) {
           item.styles(rowStyle);
           item.label('状态').name('status');
           item.control((editor) =>
-            editor.vSelect({ name: 'status', options: statusOptions, value: role?.status ?? 'active' })
+            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) })
-          );
+          item.control((editor) => editor.vInput({ name: 'sort', value: String(role?.sort ?? 0) }));
         });
         form.vButton('保存', (btn) => {
           btn.variant('primary');

package/templates/admin/src/features/system/roles/components/role-toolbar.js

@@ -27,9 +27,7 @@ export function RoleToolbar({ onSearch, onAdd }) {
         f.vFormItem((item) => {
           item.style({ display: 'flex', alignItems: 'center', gap: '8px' });
           item.label('关键词').name('keyword');
-          item.control((editor) =>
-            editor.vInput({ name: 'keyword', placeholder: '名称 / 标识' })
-          );
+          item.control((editor) => editor.vInput({ name: 'keyword', placeholder: '名称 / 标识' }));
         });
         f.vFormItem((item) => {
           item.style({ display: 'flex', alignItems: 'center', gap: '8px' });

package/templates/admin/src/features/system/roles/pages/role-list-page.js

@@ -1,4 +1,4 @@
-import { toast, vDialog, vPagination, vstack } from '@yoyaflow/yoya-ui';
+import { toast, vConfirm, 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';
@@ -7,7 +7,6 @@ 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(),
@@ -46,23 +45,18 @@ export function RoleListPage() {
     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}`);
-          });
-        });
-      });
+  async function askRemove(role) {
+    const ok = await vConfirm({
+      title: '删除角色',
+      content: `确定删除角色「${role.name}」？`,
+      danger: true,
+      confirmText: '删除'
     });
-    confirmDialog.open(true);
+    if (!ok) {
+      return;
+    }
+    await state.remove(role.id);
+    toast.success(`已删除 ${role.name}`);
   }
 
   async function saveRole(editingId, payload) {
@@ -90,7 +84,6 @@ export function RoleListPage() {
           });
         });
         stack.child(dialog);
-        stack.child(confirmDialog);
       });
     },
     refresh() {

package/templates/admin/src/main.js

@@ -6,12 +6,14 @@ import './features/system/permissions/api/permission.mock.js';
 import './features/system/roles/api/role.mock.js';
 import './features/system/dicts/api/dict.mock.js';
 import './shell/api/shell.mock.js';
+import './shell/api/auth.mock.js';
 import ShellState from './shell/api/shell.state.js';
 import { AdminShell } from './shell/components/admin-shell.js';
 
 initYoyaTheme();
 
 async function bootstrap() {
+  // load() 内部先加载会话并注入全局权限，再按权限过滤菜单 / 创建路由。
   const state = new ShellState();
   await state.load();
   const shell = AdminShell({ state });

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

@@ -0,0 +1,23 @@
+// 会话演示用内存 mock（接入真实后端后删除本文件）。
+// 想观察权限效果：增删下方权限码即可。
+// 例如去掉 'ops:deploy' 隐藏「部署任务」菜单；去掉 'system:member:remove' 禁用「删除」按钮。
+import { mockRequest } from '../../api/domain.api.js';
+
+mockRequest('GET', '/auth/me', async () => ({
+  ok: true,
+  data: {
+    user: { name: '管理员', account: 'admin' },
+    roles: ['admin'],
+    permissions: [
+      'dashboard:overview',
+      'dashboard:todos',
+      'ops:service',
+      'system:member',
+      'system:member:create',
+      'system:member:update',
+      'system:role',
+      'system:permission',
+      'system:dict'
+    ]
+  }
+}));

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

@@ -13,8 +13,18 @@ mockRequest('GET', '/menus', async () => {
         label: '工作台',
         icon: 'D',
         routes: [
-          { path: '/dashboard/overview', title: '数据概览', viewKey: 'dashboard-overview' },
-          { path: '/dashboard/todos', title: '待办审批', viewKey: 'todo-approval' }
+          {
+            path: '/dashboard/overview',
+            title: '数据概览',
+            viewKey: 'dashboard-overview',
+            permCode: 'dashboard:overview'
+          },
+          {
+            path: '/dashboard/todos',
+            title: '待办审批',
+            viewKey: 'todo-approval',
+            permCode: 'dashboard:todos'
+          }
         ]
       },
       {
@@ -22,8 +32,18 @@ mockRequest('GET', '/menus', async () => {
         label: '运维',
         icon: 'O',
         routes: [
-          { path: '/ops/services', title: '服务清单', viewKey: 'service-list' },
-          { path: '/ops/deploys', title: '部署任务', viewKey: 'deploy-list' }
+          {
+            path: '/ops/services',
+            title: '服务清单',
+            viewKey: 'service-list',
+            permCode: 'ops:service'
+          },
+          {
+            path: '/ops/deploys',
+            title: '部署任务',
+            viewKey: 'deploy-list',
+            permCode: 'ops:deploy'
+          }
         ]
       },
       {
@@ -31,10 +51,30 @@ mockRequest('GET', '/menus', async () => {
         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' }
+          {
+            path: '/system/members',
+            title: '成员管理',
+            viewKey: 'member-list',
+            permCode: 'system:member'
+          },
+          {
+            path: '/system/roles',
+            title: '角色管理',
+            viewKey: 'role-list',
+            permCode: 'system:role'
+          },
+          {
+            path: '/system/permissions',
+            title: '权限管理',
+            viewKey: 'permission-list',
+            permCode: 'system:permission'
+          },
+          {
+            path: '/system/dicts',
+            title: '字典管理',
+            viewKey: 'dict-list',
+            permCode: 'system:dict'
+          }
         ]
       }
     ]

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

@@ -12,6 +12,13 @@ class QueryMenus extends RequestBase {
   }
 }
 
+class Me extends RequestBase {
+  address() {
+    return '/auth/me';
+  }
+}
+
 export default {
-  QueryMenus: (init) => new QueryMenus(init)
+  QueryMenus: (init) => new QueryMenus(init),
+  Me: (init) => new Me(init)
 };

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

@@ -1,5 +1,6 @@
-// 外壳状态类：菜单数据 + 导航状态（当前模块 / 当前路径）的唯一事实源，
-// 加载时创建并持有路由，暴露导航动作（switchModule / navigate），由路由订阅驱动 syncFromPath。
+// 外壳状态类：会话（用户/角色/权限）+ 菜单 + 导航状态（当前模块 / 当前路径）的唯一事实源。
+// load() 先加载会话并注入全局权限上下文，再按权限过滤菜单、创建路由并订阅导航。
+import { createAccess, currentAccess, installAccess } from '@yoyaflow/yoya-ui';
 import ShellReq from './shell.req.js';
 import { createAppRouter } from '../router.js';
 
@@ -9,6 +10,9 @@ export default class ShellState {
     this._router = null;
     this._activeModuleKey = null;
     this._activePath = null;
+    this._user = null;
+    this._permissions = [];
+    this._roles = [];
     this._listeners = new Set();
     this._unsubscribeRouter = null;
   }
@@ -17,6 +21,18 @@ export default class ShellState {
     return this._menus;
   }
 
+  user() {
+    return this._user;
+  }
+
+  permissions() {
+    return this._permissions.slice();
+  }
+
+  roles() {
+    return this._roles.slice();
+  }
+
   router() {
     return this._router;
   }
@@ -35,14 +51,26 @@ export default class ShellState {
   }
 
   async load() {
+    await this.loadSession();
+
     const result = await ShellReq.QueryMenus().submit();
-    this._menus = result.data;
+    this._menus = filterMenusByAccess(result.data);
     this._router = createAppRouter(this._menus);
     this._unsubscribeRouter = this._router.subscribe((context) => this.syncFromPath(context.path));
     this._emit();
     return result;
   }
 
+  // 加载会话：当前用户 / 角色 / 权限码，并注入全局权限上下文。
+  async loadSession() {
+    const result = await ShellReq.Me().submit();
+    this._user = result.data.user;
+    this._permissions = [...(result.data.permissions || [])];
+    this._roles = [...(result.data.roles || [])];
+    installAccess(createAccess({ permissions: this.permissions(), roles: this.roles() }));
+    return result;
+  }
+
   start() {
     this._router?.start();
     return this;
@@ -64,11 +92,8 @@ export default class ShellState {
   }
 
   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);
+    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;
@@ -88,3 +113,18 @@ export default class ShellState {
     this._listeners.forEach((listener) => listener());
   }
 }
+
+// 菜单按当前访问上下文过滤：无 permCode 的路由放行，无读权限的路由隐藏。
+function filterMenusByAccess(menus) {
+  const access = currentAccess();
+  if (!access) {
+    return menus;
+  }
+
+  return menus
+    .map((module) => ({
+      ...module,
+      routes: module.routes.filter((route) => !route.permCode || access.canRead(route.permCode))
+    }))
+    .filter((module) => module.routes.length > 0);
+}

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

@@ -1,9 +1,10 @@
 // 外壳结果结构（纯数据）：菜单模块与路由，服务端返回后由 toItem 映射。
 class Route {
-  constructor({ path, title, viewKey }) {
+  constructor({ path, title, viewKey, permCode = null }) {
     this.path = path;
     this.title = title;
     this.viewKey = viewKey;
+    this.permCode = permCode;
   }
 }
 

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

@@ -35,6 +35,9 @@ export function createAppRouter(menus) {
     });
     r.notFound(() => PlaceholderPage({ title: '未找到', text: '该页面不存在。' }));
   });
-  router.default(menus[0].routes[0].path);
+  const firstPath = menus[0]?.routes?.[0]?.path;
+  if (firstPath) {
+    router.default(firstPath);
+  }
   return router;
 }

package/templates/admin/vite.config.js

@@ -1,6 +1,22 @@
 import { defineConfig } from 'vite';
+import { existsSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+
+// 本地仓库联调：模板直接使用 yoya-ui 的 src 源码（含最新权限能力）。
+// 脚手架生成的项目（模板被复制出去）不存在该路径，自动回退到 npm 包解析。
+const localUi = fileURLToPath(new URL('../../../src/index.js', import.meta.url));
+const localCss = fileURLToPath(new URL('../../../src/yoya.ui.css', import.meta.url));
+const useLocal = existsSync(localUi);
 
 export default defineConfig({
+  resolve: useLocal
+    ? {
+        alias: [
+          { find: /^@yoyaflow\/yoya-ui\/ui\.css$/, replacement: localCss },
+          { find: '@yoyaflow/yoya-ui', replacement: localUi }
+        ]
+      }
+    : undefined,
   server: {
     port: 5173
   }

package/templates/basic/package.json

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

package/templates/basic/src/main.js

@@ -1,4 +1,4 @@
-import { div, toast, vBody, vButton, vCard, vForm, vFormItem, vInput, vSelect, vText } from '@yoyaflow/yoya-ui';
+import { div, toast, vBody, vForm, vText } from '@yoyaflow/yoya-ui';
 import '@yoyaflow/yoya-ui/ui.css';
 
 // 页面壳：消费主题 token，明暗切换自动跟随

package/templates/ssr/package.json

@@ -9,7 +9,7 @@
     "preview": "npm run build && npm start"
   },
   "dependencies": {
-    "@yoyaflow/yoya-ui": "^0.3.0"
+    "@yoyaflow/yoya-ui": "^0.3.3"
   },
   "devDependencies": {
     "vite": "^8.2.0"