create-yoya-ui 0.2.3 → 0.3.3

package/bin/create-yoya-ui.js

@@ -10,7 +10,9 @@ const targetDir = resolve(process.cwd(), targetName);
 const templateArgIndex = args.indexOf('--template');
 const templateName =
   templateArgIndex !== -1 && args[templateArgIndex + 1] ? args[templateArgIndex + 1] : 'basic';
-const templateRoot = resolve(fileURLToPath(new URL(`../templates/${templateName}`, import.meta.url)));
+const templateRoot = resolve(
+  fileURLToPath(new URL(`../templates/${templateName}`, import.meta.url))
+);
 
 if (!existsSync(templateRoot)) {
   console.error(`未知模板：${templateName}（可用：basic、ssr、admin）`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-yoya-ui",
-  "version": "0.2.3",
+  "version": "0.3.3",
   "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

@@ -15,6 +15,16 @@ npm install
 npm run dev
 ```
 
+### 本地仓库联调（推荐在仓库内预览）
+
+模板通过 npm 安装线上 `@yoyaflow/yoya-ui`。若要在 yoya-ui 本地仓库中直接预览**最新源码**（如权限能力），模板的 `vite.config.js` 会自动把 `@yoyaflow/yoya-ui` 指到仓库 `src/`（对应路径不存在时回退 npm 包解析，脚手架生成的项目不受影响）：
+
+```bash
+cd create-yoya-ui/templates/admin
+node ../../../node_modules/vite/bin/vite.js
+# 打开 http://127.0.0.1:5173
+```
+
 ## TypeScript
 
 模板默认支持 TypeScript，非侵入接入：现有 `.js` 文件保持不动（`tsconfig.json` 已开启 `allowJs`），需要类型时直接新建或改写为 `.ts` 文件即可（Vite 原生支持）。运行 `npm run typecheck` 做类型检查。

package/templates/admin/RULES.md

@@ -61,6 +61,8 @@ export default {
 - **不深层 import**：只允许跨模块引用 `req.js`，不 import 业务域的 pages / components / state 内部实现
 - **自包含 UI 与状态**：弹窗、下拉、open/close 状态内聚在组件内，对外暴露工厂与必要方法（`open()/close()/value()`），不暴露内部状态实现
 - **浮层自洽**：弹窗/下拉类共享组件自带 fixed 定位逻辑，不依赖使用方容器样式
+- **危险确认统一 vConfirm**：删除/危险操作调用 `vConfirm({ title, content, danger, confirmText })`
+  返回 `Promise<boolean>`，不自建 vDialog 确认层（表单类编辑弹窗仍用 vDialog）
 
 ## 6. 外壳与导航状态
 
@@ -98,8 +100,15 @@ export default {
 
 `main.js` 固定顺序：
 
-1. 导入并注册所有 mock（含 `shell.mock.js`）
-2. `state.load()`：获取菜单 + 创建路由 + 订阅导航
+1. 导入并注册所有 mock（含 `shell.mock.js` / `auth.mock.js`）
+2. `state.load()`：内部先 `loadSession()` 加载会话并 `installAccess(...)` 注入全局权限，再获取菜单（按权限过滤）+ 创建路由 + 订阅导航
 3. `AdminShell({ state })` 装配外壳
 4. `shell.render().bindTo('#app')`
 5. `state.start()` 启动路由
+
+## 12. 权限接入
+
+- **会话与权限**：会话请求命令并入 `shell.req.js`（`ShellReq.Me()`），`shell/api/auth.mock.js` 提供 `/auth/me` 演示数据；会话状态融合进 `ShellState`（`user()` / `roles()` / `permissions()`），`loadSession()` 内 `installAccess` 注入全局。
+- **菜单 / 路由**：`shell.mock.js` 的每条路由声明 `permCode`（与权限管理页的 code 对齐），`ShellState.load()` 按 `currentAccess().canRead(permCode)` 过滤菜单；无读的路由不注册，直达 URL 落到未找到页。
+- **按钮 / 操作**：直接在按钮上声明 `.access('system:member:create')` 等裸码，无写权限自动禁用、无读自动隐藏（见 member-toolbar / member-table）。
+- **体验层**：前端只做显隐 / 禁用，真正的拦截必须由后端按权限码校验。

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

@@ -0,0 +1,8 @@
+{
+  "hash": "854f049f",
+  "configHash": "1cca6c4d",
+  "lockfileHash": "7fb7e123",
+  "browserHash": "3ebf44f7",
+  "optimized": {},
+  "chunks": {}
+}

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

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

package/templates/admin/package.json

@@ -10,7 +10,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@yoyaflow/yoya-ui": "^0.3.0"
+    "@yoyaflow/yoya-ui": "^0.3.3"
   },
   "devDependencies": {
     "typescript": "^7.0.2",

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

@@ -5,7 +5,13 @@ 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 } = {}) {
+export function DashboardChart({
+  labels = [],
+  series = [],
+  title = '',
+  type = 'bar',
+  height = 280
+} = {}) {
   const chart = vChart({
     adapter: createSvgAdapter(),
     data: { labels, series },

package/templates/admin/src/features/dashboard/overview/pages/dashboard-overview-page.js

@@ -140,7 +140,10 @@ export function DashboardOverviewPage() {
                   box.style({ textAlign: 'center' });
                   box.child(vGauge({ unit: '%', value: 72, tone: 'warning' }));
                   box.p((text) => {
-                    text.style({ color: 'var(--yoya-color-text-muted, #64748b)', fontSize: '12px' });
+                    text.style({
+                      color: 'var(--yoya-color-text-muted, #64748b)',
+                      fontSize: '12px'
+                    });
                     text.text('CPU 使用率');
                   });
                 });
@@ -148,7 +151,10 @@ export function DashboardOverviewPage() {
                   box.style({ textAlign: 'center' });
                   box.child(vGauge({ unit: '%', value: 58, tone: 'primary' }));
                   box.p((text) => {
-                    text.style({ color: 'var(--yoya-color-text-muted, #64748b)', fontSize: '12px' });
+                    text.style({
+                      color: 'var(--yoya-color-text-muted, #64748b)',
+                      fontSize: '12px'
+                    });
                     text.text('内存使用率');
                   });
                 });
@@ -164,9 +170,7 @@ export function DashboardOverviewPage() {
                     item.status('success');
                     item.title('服务发布成功');
                     item.time('09:32 · 2026-09-01');
-                    item.content((box) =>
-                      box.p('api-gateway v2.4.1 已上线，金丝雀批次全部通过。')
-                    );
+                    item.content((box) => box.p('api-gateway v2.4.1 已上线，金丝雀批次全部通过。'));
                   });
                   timeline.vTimelineItem((item) => {
                     item.status('processing');

package/templates/admin/src/features/system/dicts/api/dict.mgr.d.ts

@@ -20,9 +20,13 @@ declare class CreateType extends RequestBase {
 }
 
 declare class UpdateType extends RequestBase {
-  constructor(
-    init?: { id: number; name?: string; code?: string; status?: DictStatus; remark?: string }
-  );
+  constructor(init?: {
+    id: number;
+    name?: string;
+    code?: string;
+    status?: DictStatus;
+    remark?: string;
+  });
   method(): 'PUT';
   address(): string;
   body(): { name: string; code: string; status: DictStatus; remark: string };
@@ -41,18 +45,26 @@ declare class QueryItems extends RequestBase {
 }
 
 declare class CreateItem extends RequestBase {
-  constructor(
-    init?: { typeId: number; label?: string; value?: string; sort?: number; status?: DictStatus }
-  );
+  constructor(init?: {
+    typeId: number;
+    label?: string;
+    value?: string;
+    sort?: number;
+    status?: DictStatus;
+  });
   method(): 'POST';
   address(): string;
   body(): { label: string; value: string; sort: number; status: DictStatus };
 }
 
 declare class UpdateItem extends RequestBase {
-  constructor(
-    init?: { id: number; label?: string; value?: string; sort?: number; status?: DictStatus }
-  );
+  constructor(init?: {
+    id: number;
+    label?: string;
+    value?: string;
+    sort?: number;
+    status?: DictStatus;
+  });
   method(): 'PUT';
   address(): string;
   body(): { label: string; value: string; sort: number; status: DictStatus };
@@ -66,20 +78,35 @@ declare class RemoveItem extends RequestBase {
 
 declare const DictMgr: {
   QueryTypes: (init?: { page?: number; pageSize?: number }) => QueryTypes;
-  CreateType: (
-    init?: { name?: string; code?: string; status?: DictStatus; remark?: string }
-  ) => CreateType;
-  UpdateType: (
-    init?: { id: number; name?: string; code?: string; status?: DictStatus; remark?: string }
-  ) => UpdateType;
+  CreateType: (init?: {
+    name?: string;
+    code?: string;
+    status?: DictStatus;
+    remark?: string;
+  }) => CreateType;
+  UpdateType: (init?: {
+    id: number;
+    name?: string;
+    code?: string;
+    status?: DictStatus;
+    remark?: string;
+  }) => UpdateType;
   RemoveType: (init?: { id: number }) => RemoveType;
   QueryItems: (init?: { typeId: number }) => QueryItems;
-  CreateItem: (
-    init?: { typeId: number; label?: string; value?: string; sort?: number; status?: DictStatus }
-  ) => CreateItem;
-  UpdateItem: (
-    init?: { id: number; label?: string; value?: string; sort?: number; status?: DictStatus }
-  ) => UpdateItem;
+  CreateItem: (init?: {
+    typeId: number;
+    label?: string;
+    value?: string;
+    sort?: number;
+    status?: DictStatus;
+  }) => CreateItem;
+  UpdateItem: (init?: {
+    id: number;
+    label?: string;
+    value?: string;
+    sort?: number;
+    status?: DictStatus;
+  }) => UpdateItem;
   RemoveItem: (init?: { id: number }) => RemoveItem;
 };
 

package/templates/admin/src/features/system/dicts/components/dict-editor-dialog.js

@@ -1,4 +1,4 @@
-import { toast, vDialog, vTable } from '@yoyaflow/yoya-ui';
+import { toast, vConfirm, vDialog, vTable } from '@yoyaflow/yoya-ui';
 import { RowActionButton } from '../../../../shared/ui.buttons.js';
 import { DictItemFormDialog } from './dict-item-form-dialog.js';
 import { statusOptions, statusText } from '../utils/options.js';
@@ -15,7 +15,6 @@ const rowStyle = {
 export function DictEditorDialog({ state, onSubmit }) {
   const dialog = vDialog();
   const itemDialog = DictItemFormDialog({ onSubmit: saveItem });
-  const confirmDialog = vDialog();
   let editingId = null;
   let itemsBody = null;
   let itemsCountText = null;
@@ -123,7 +122,6 @@ export function DictEditorDialog({ state, onSubmit }) {
         });
 
         stack.child(itemDialog);
-        stack.child(confirmDialog);
       });
     });
 
@@ -168,24 +166,19 @@ export function DictEditorDialog({ state, onSubmit }) {
     }
   }
 
-  function askRemoveItem(item) {
-    confirmDialog.content((content) => {
-      content.p(`确定删除字典值「${item.label}」？`);
-      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.removeItem(item.id);
-            toast.success(`已删除 ${item.label}`);
-            renderItems();
-          });
-        });
-      });
+  async function askRemoveItem(item) {
+    const ok = await vConfirm({
+      title: '删除字典值',
+      content: `确定删除字典值「${item.label}」？`,
+      danger: true,
+      confirmText: '删除'
     });
-    confirmDialog.open(true);
+    if (!ok) {
+      return;
+    }
+    await state.removeItem(item.id);
+    toast.success(`已删除 ${item.label}`);
+    renderItems();
   }
 
   async function saveItem(itemId, payload) {

package/templates/admin/src/features/system/dicts/components/dict-item-form-dialog.js

@@ -46,7 +46,11 @@ export function DictItemFormDialog({ onSubmit }) {
           field.styles(rowStyle);
           field.label('状态').name('status');
           field.control((editor) =>
-            editor.vSelect({ name: 'status', options: statusOptions, value: item?.status ?? 'active' })
+            editor.vSelect({
+              name: 'status',
+              options: statusOptions,
+              value: item?.status ?? 'active'
+            })
           );
         });
         form.vButton('保存', (btn) => {

package/templates/admin/src/features/system/dicts/pages/dict-list-page.js

@@ -1,4 +1,4 @@
-import { toast, vDialog, vPagination, vTable, vstack } from '@yoyaflow/yoya-ui';
+import { toast, vConfirm, vPagination, vTable, vstack } from '@yoyaflow/yoya-ui';
 import { RowActionButton } from '../../../../shared/ui.buttons.js';
 import DictsPageState from '../api/dict.state.js';
 import { DictEditorDialog } from '../components/dict-editor-dialog.js';
@@ -7,7 +7,6 @@ import { statusText } from '../utils/options.js';
 export function DictListPage() {
   const state = new DictsPageState();
   const editorDialog = DictEditorDialog({ state, onSubmit: saveType });
-  const confirmDialog = vDialog();
   const pagination = vPagination({
     pageSize: 10,
     pageSizes: [10, 20, 50],
@@ -62,23 +61,18 @@ export function DictListPage() {
     });
   }
 
-  function askRemoveType(type) {
-    confirmDialog.content((content) => {
-      content.p(`确定删除字典「${type.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.removeType(type.id);
-            toast.success(`已删除 ${type.name}`);
-          });
-        });
-      });
+  async function askRemoveType(type) {
+    const ok = await vConfirm({
+      title: '删除字典',
+      content: `确定删除字典「${type.name}」及其所有字典值？`,
+      danger: true,
+      confirmText: '删除'
     });
-    confirmDialog.open(true);
+    if (!ok) {
+      return;
+    }
+    await state.removeType(type.id);
+    toast.success(`已删除 ${type.name}`);
   }
 
   async function saveType(editingId, payload) {
@@ -133,7 +127,6 @@ export function DictListPage() {
           });
         });
         stack.child(editorDialog);
-        stack.child(confirmDialog);
       });
     },
     refresh() {

package/templates/admin/src/features/system/members/api/member.mgr.d.ts

@@ -35,13 +35,15 @@ declare class Remove extends RequestBase {
 }
 
 declare const MemberMgr: {
-  Query: (
-    init?: { page?: number; pageSize?: number; keyword?: string; status?: string }
-  ) => Query;
+  Query: (init?: { page?: number; pageSize?: number; keyword?: string; status?: string }) => Query;
   Create: (init?: { name?: string; email?: string; role?: string; status?: string }) => Create;
-  Update: (
-    init?: { id: number; name?: string; email?: string; role?: string; status?: string }
-  ) => Update;
+  Update: (init?: {
+    id: number;
+    name?: string;
+    email?: string;
+    role?: string;
+    status?: string;
+  }) => Update;
   Remove: (init?: { id: number }) => Remove;
 };
 

package/templates/admin/src/features/system/members/components/member-form-dialog.js

@@ -43,7 +43,11 @@ export function MemberFormDialog({ onSubmit }) {
       item.styles(rowStyle);
       item.label('状态').name('status');
       item.control((editor) =>
-        editor.vSelect({ name: 'status', options: statusOptions, value: member?.status ?? 'active' })
+        editor.vSelect({
+          name: 'status',
+          options: statusOptions,
+          value: member?.status ?? 'active'
+        })
       );
     });
   }

package/templates/admin/src/features/system/members/components/member-table.js

@@ -19,10 +19,16 @@ export function MemberTable({ rows, onEdit, onRemove }) {
         row.vTd(statusText[member.status] ?? member.status);
         row.vTd((cell) => {
           cell.hstack({ gap: '8px' }, (actions) => {
-            actions.child(RowActionButton('编辑', (btn) => btn.on('click', () => onEdit(member))));
+            actions.child(
+              RowActionButton('编辑', (btn) => {
+                btn.access('system:member:update');
+                btn.on('click', () => onEdit(member));
+              })
+            );
             actions.child(
               RowActionButton('删除', (btn) => {
                 btn.variant('danger');
+                btn.access('system:member:remove');
                 btn.on('click', () => onRemove(member));
               })
             );

package/templates/admin/src/features/system/members/components/member-toolbar.js

@@ -27,9 +27,7 @@ export function MemberToolbar({ 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' });
@@ -46,6 +44,7 @@ export function MemberToolbar({ onSearch, onAdd }) {
         f.vButton('新增成员', (btn) => {
           btn.variant('primary');
           btn.style('marginLeft', 'auto');
+          btn.access('system:member:create');
           btn.on('click', onAdd);
         });
         f.on('submit', (event) => {

package/templates/admin/src/features/system/permissions/api/permission.mgr.d.ts

@@ -10,18 +10,32 @@ declare class QueryTree extends RequestBase {
 }
 
 declare class Create extends RequestBase {
-  constructor(
-    init?: { parentId: number | null; name?: string; code?: string; type?: PermissionType; sort?: number }
-  );
+  constructor(init?: {
+    parentId: number | null;
+    name?: string;
+    code?: string;
+    type?: PermissionType;
+    sort?: number;
+  });
   method(): 'POST';
   address(): string;
-  body(): { parentId: number | null; name: string; code: string; type: PermissionType; sort: number };
+  body(): {
+    parentId: number | null;
+    name: string;
+    code: string;
+    type: PermissionType;
+    sort: number;
+  };
 }
 
 declare class Update extends RequestBase {
-  constructor(
-    init?: { id: number; name?: string; code?: string; type?: PermissionType; sort?: number }
-  );
+  constructor(init?: {
+    id: number;
+    name?: string;
+    code?: string;
+    type?: PermissionType;
+    sort?: number;
+  });
   method(): 'PUT';
   address(): string;
   body(): { name: string; code: string; type: PermissionType; sort: number };
@@ -35,12 +49,20 @@ declare class Remove extends RequestBase {
 
 declare const PermissionMgr: {
   QueryTree: (init?: unknown) => QueryTree;
-  Create: (
-    init?: { parentId: number | null; name?: string; code?: string; type?: PermissionType; sort?: number }
-  ) => Create;
-  Update: (
-    init?: { id: number; name?: string; code?: string; type?: PermissionType; sort?: number }
-  ) => Update;
+  Create: (init?: {
+    parentId: number | null;
+    name?: string;
+    code?: string;
+    type?: PermissionType;
+    sort?: number;
+  }) => Create;
+  Update: (init?: {
+    id: number;
+    name?: string;
+    code?: string;
+    type?: PermissionType;
+    sort?: number;
+  }) => Update;
   Remove: (init?: { id: number }) => Remove;
 };
 

package/templates/admin/src/features/system/permissions/api/permission.mgr.js

@@ -34,7 +34,13 @@ class Create extends RequestBase {
   }
 
   body() {
-    return { parentId: this.parentId, name: this.name, code: this.code, type: this.type, sort: this.sort };
+    return {
+      parentId: this.parentId,
+      name: this.name,
+      code: this.code,
+      type: this.type,
+      sort: this.sort
+    };
   }
 }
 

package/templates/admin/src/features/system/permissions/api/permission.mock.js

@@ -7,9 +7,30 @@ let permissions = [
   { id: 12, parentId: 1, name: '待办审批', code: 'dashboard:todos', type: 'menu', sort: 2 },
   { id: 2, parentId: null, name: '系统管理', code: 'system', type: 'menu', sort: 2 },
   { id: 21, parentId: 2, name: '成员管理', code: 'system:member', type: 'menu', sort: 1 },
-  { id: 211, parentId: 21, name: '新增成员', code: 'system:member:create', type: 'button', sort: 1 },
-  { id: 212, parentId: 21, name: '编辑成员', code: 'system:member:update', type: 'button', sort: 2 },
-  { id: 213, parentId: 21, name: '删除成员', code: 'system:member:remove', type: 'button', sort: 3 },
+  {
+    id: 211,
+    parentId: 21,
+    name: '新增成员',
+    code: 'system:member:create',
+    type: 'button',
+    sort: 1
+  },
+  {
+    id: 212,
+    parentId: 21,
+    name: '编辑成员',
+    code: 'system:member:update',
+    type: 'button',
+    sort: 2
+  },
+  {
+    id: 213,
+    parentId: 21,
+    name: '删除成员',
+    code: 'system:member:remove',
+    type: 'button',
+    sort: 3
+  },
   { id: 22, parentId: 2, name: '角色管理', code: 'system:role', type: 'menu', sort: 2 },
   { id: 23, parentId: 2, name: '权限管理', code: 'system:permission', type: 'menu', sort: 3 },
   { id: 24, parentId: 2, name: '字典管理', code: 'system:dict', type: 'menu', sort: 4 }

package/templates/admin/src/features/system/permissions/api/permission.views.js

@@ -1,6 +1,14 @@
 // 权限结果结构（纯数据）。
 class PermissionNode {
-  constructor({ id, parentId = null, name = '', code = '', type = 'menu', sort = 0, children = [] } = {}) {
+  constructor({
+    id,
+    parentId = null,
+    name = '',
+    code = '',
+    type = 'menu',
+    sort = 0,
+    children = []
+  } = {}) {
     this.id = id;
     this.parentId = parentId;
     this.name = name;

package/templates/admin/src/features/system/permissions/pages/permission-list-page.js

@@ -1,4 +1,4 @@
-import { toast, vDialog, vTree, vstack } from '@yoyaflow/yoya-ui';
+import { toast, vConfirm, vTree, vstack } from '@yoyaflow/yoya-ui';
 import { RowActionButton } from '../../../../shared/ui.buttons.js';
 import PermissionsPageState from '../api/permission.state.js';
 import { PermissionFormDialog } from '../components/permission-form-dialog.js';
@@ -6,7 +6,6 @@ import { PermissionFormDialog } from '../components/permission-form-dialog.js';
 export function PermissionListPage() {
   const state = new PermissionsPageState();
   const dialog = PermissionFormDialog({ onSubmit: savePermission });
-  const confirmDialog = vDialog();
   const tree = vTree({ ariaLabel: '权限树' });
 
   state.subscribe(() => {
@@ -39,23 +38,18 @@ export function PermissionListPage() {
     }));
   }
 
-  function askRemove(node) {
-    confirmDialog.content((content) => {
-      content.p(`确定删除权限「${node.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(node.id);
-            toast.success(`已删除 ${node.name}`);
-          });
-        });
-      });
+  async function askRemove(node) {
+    const ok = await vConfirm({
+      title: '删除权限',
+      content: `确定删除权限「${node.name}」及其子权限？`,
+      danger: true,
+      confirmText: '删除'
     });
-    confirmDialog.open(true);
+    if (!ok) {
+      return;
+    }
+    await state.remove(node.id);
+    toast.success(`已删除 ${node.name}`);
   }
 
   async function savePermission(editingId, parentId, payload) {
@@ -88,7 +82,6 @@ export function PermissionListPage() {
           });
         });
         stack.child(dialog);
-        stack.child(confirmDialog);
       });
     },
     refresh() {

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"