create-yoya-ui 0.2.2 → 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.2",
+  "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

@@ -1,15 +1,8 @@
 {
-  "hash": "24e86ad2",
-  "configHash": "963bfa3f",
-  "lockfileHash": "a581caee",
-  "browserHash": "bbbf0422",
-  "optimized": {
-    "@yoyaflow/yoya-ui": {
-      "src": "../../@yoyaflow/yoya-ui/dist/yoya.ui.js",
-      "file": "@yoyaflow_yoya-ui.js",
-      "fileHash": "7bc1ef8c",
-      "needsInterop": false
-    }
-  },
+  "hash": "854f049f",
+  "configHash": "1cca6c4d",
+  "lockfileHash": "7fb7e123",
+  "browserHash": "3ebf44f7",
+  "optimized": {},
   "chunks": {}
 }

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() {