create-lumal-admin 0.0.4-beta → 0.0.6-beta

package/templates/features/system/src/modules/system/dictionary/api.ts

@@ -0,0 +1,61 @@
+import type { SchemaFormModel } from '@lumal/core/components';
+import type { BusinessTransport } from '../../../app/services/contracts';
+import type { DictionaryItem, DictionaryItemInput, DictionaryType, DictionaryTypeInput } from './types';
+import { formStatus, integer, object, rows, text } from '../../../shared/api';
+
+export function dictionaryTypeInput(model: SchemaFormModel): DictionaryTypeInput {
+  return {
+    name: text(model.name, '字典名称', true),
+    code: text(model.code, '字典编码', true),
+    description: text(model.description, '说明'),
+    status: formStatus(model),
+  };
+}
+export function dictionaryItemInput(model: SchemaFormModel): DictionaryItemInput {
+  const color = text(model.color, '颜色');
+  if (color && !/^#[\da-f]{6}$/i.test(color)) throw new Error('颜色必须是六位十六进制值');
+  return {
+    typeCode: text(model.typeCode, '字典分类', true),
+    label: text(model.label, '显示名称', true),
+    value: text(model.value, '字典值', true),
+    color,
+    order: integer(model.order ?? 0),
+    status: formStatus(model),
+  };
+}
+export function parseType(value: unknown): DictionaryType {
+  const raw = object(value);
+  return { ...dictionaryTypeInput(raw), id: text(raw.id, '字典 ID', true) };
+}
+export function parseItem(value: unknown): DictionaryItem {
+  const raw = object(value);
+  return { ...dictionaryItemInput(raw), id: text(raw.id, '字典项 ID', true) };
+}
+export function createDictionaryService(transport: BusinessTransport, invalidate: () => void = () => {}) {
+  async function mutation<T>(
+    method: 'POST' | 'PUT' | 'DELETE',
+    path: string,
+    input: object | undefined,
+    parse: (value: unknown) => T,
+  ) {
+    const result = await transport.request(method, path, { body: input });
+    // 先使旧请求失效再刷新消费者，防止旧字典响应回填。
+    invalidate();
+    return parse(result);
+  }
+  return {
+    types: async () => rows(await transport.request('GET', '/system/dictionaries/types'), parseType),
+    items: async (typeCode: string) =>
+      rows(await transport.request('GET', '/system/dictionaries/items', { query: { typeCode } }), parseItem),
+    createType: (input: DictionaryTypeInput) => mutation('POST', '/system/dictionaries/types', input, parseType),
+    updateType: (id: string, input: DictionaryTypeInput) =>
+      mutation('PUT', `/system/dictionaries/types/${encodeURIComponent(id)}`, input, parseType),
+    removeType: (id: string) =>
+      mutation('DELETE', `/system/dictionaries/types/${encodeURIComponent(id)}`, undefined, () => undefined),
+    createItem: (input: DictionaryItemInput) => mutation('POST', '/system/dictionaries/items', input, parseItem),
+    updateItem: (id: string, input: DictionaryItemInput) =>
+      mutation('PUT', `/system/dictionaries/items/${encodeURIComponent(id)}`, input, parseItem),
+    removeItem: (id: string) =>
+      mutation('DELETE', `/system/dictionaries/items/${encodeURIComponent(id)}`, undefined, () => undefined),
+  };
+}

package/templates/features/system/src/modules/system/dictionary/cache.ts

@@ -0,0 +1,9 @@
+import { createDictionaryStore } from '@lumal/core/dictionary';
+import { application, service } from '../../../app/services/session';
+
+export const dictionaryStore = createDictionaryStore({
+  fetcher: async (code) => ({
+    items: await service.request('GET', `/system/dictionaries/options/${encodeURIComponent(code)}`),
+  }),
+});
+application.onReset(() => dictionaryStore.clearDictionary());

package/templates/features/system/src/modules/system/dictionary/routes.ts

@@ -0,0 +1,32 @@
+import type { AppModule } from '../../../app/module';
+
+export const menus: AppModule['menus'] = [
+  {
+    path: '/system/dictionaries/types',
+    name: 'DictionaryTypes',
+    component: 'system/dictionaries/types',
+    meta: { title: '字典分类', authority: ['system:dict:list'], keepAlive: true, order: 5 },
+  },
+  {
+    path: '/system/dictionaries/items',
+    name: 'DictionaryItems',
+    component: 'system/dictionaries/items',
+    meta: { title: '字典项管理', authority: ['system:dict:list'], keepAlive: true, order: 6 },
+  },
+];
+export const views: AppModule['views'] = {
+  'system/dictionaries/types': () => import('./DictionaryTypeView.vue'),
+  'system/dictionaries/items': () => import('./DictionaryItemView.vue'),
+};
+export const permissions: AppModule['permissions'] = [
+  {
+    id: 'system-dictionary',
+    label: '字典管理',
+    children: [
+      { id: 'system:dict:list', label: '查询字典', permission: 'system:dict:list' },
+      { id: 'system:dict:create', label: '新增字典', permission: 'system:dict:create' },
+      { id: 'system:dict:update', label: '修改字典', permission: 'system:dict:update' },
+      { id: 'system:dict:delete', label: '删除字典', permission: 'system:dict:delete' },
+    ],
+  },
+];

package/templates/features/system/src/modules/system/dictionary/types.ts

@@ -0,0 +1,22 @@
+import type { Status } from '../../../shared/api';
+
+export interface DictionaryTypeInput {
+  name: string;
+  code: string;
+  description: string;
+  status: Status;
+}
+export interface DictionaryType extends DictionaryTypeInput {
+  id: string;
+}
+export interface DictionaryItemInput {
+  typeCode: string;
+  label: string;
+  value: string;
+  color: string;
+  order: number;
+  status: Status;
+}
+export interface DictionaryItem extends DictionaryItemInput {
+  id: string;
+}

package/templates/features/system/src/modules/system/local.ts

@@ -0,0 +1,348 @@
+import type { DataRow } from '../../app/services/contracts';
+import type { LocalBusinessContext, LocalHandler } from '../../app/services/local-contracts';
+import { object, stringArray } from '../../app/menu-policy';
+import { permissionCodes, permissionTree, viewComponents } from '../../app/router/views';
+import { buildStoredMenus } from '../../app/stored-menus';
+import { assertHierarchy, buildTree } from '../../shared/tree';
+import { configInput } from './config/api';
+import { dictionaryItemInput, dictionaryTypeInput } from './dictionary/api';
+import { menuInput } from './menu/api';
+import { organizationInput } from './organization/api';
+import { roleInput } from './role/api';
+import { userInput } from './user/api';
+
+const defaultConfig = {
+  appName: 'Lumal Admin',
+  colorPrimary: '#1677ff',
+  layout: 'mixed-nav',
+  tabbarEnable: true,
+  transitionEnable: true,
+};
+
+/** 本地业务模型独立于页面，使用与 HTTP 相同的业务端点和关联约束。 */
+export function createLocalHandler({ db, user, assertPermission }: LocalBusinessContext): LocalHandler {
+  const initial: Record<string, DataRow[]> = {
+    organizations: [
+      {
+        id: 'root',
+        parentId: '',
+        name: '总部',
+        code: 'root',
+        leader: '管理员',
+        phone: '',
+        email: '',
+        status: 'enabled',
+        order: 0,
+      },
+    ],
+    'dictionaries/types': [
+      { id: 'status', name: '状态', code: 'status', description: '开发演示状态', status: 'enabled' },
+    ],
+    'dictionaries/items': [
+      {
+        id: 'enabled',
+        typeCode: 'status',
+        label: '启用',
+        value: 'enabled',
+        color: '#15803d',
+        order: 1,
+        status: 'enabled',
+      },
+      {
+        id: 'disabled',
+        typeCode: 'status',
+        label: '停用',
+        value: 'disabled',
+        color: '#64748b',
+        order: 2,
+        status: 'enabled',
+      },
+    ],
+  };
+  const read = (resource: string) => db.read(resource, () => initial[resource] ?? []);
+  const cleanUser = ({ password: _password, ...row }: DataRow) => row;
+  const hierarchy = (rows: DataRow[]) =>
+    rows.map((row): DataRow & { id: string; parentId: string } => ({
+      ...row,
+      id: String(row.id),
+      parentId: String(row.parentId ?? ''),
+    }));
+  function requireRecord(rows: DataRow[], id: string): DataRow {
+    const record = rows.find((row) => row.id === id);
+    if (!record) throw new Error('记录不存在');
+    return record;
+  }
+  function validateUser(model: DataRow, id?: string): DataRow {
+    const input = userInput(model);
+    if (input.nickname.length > 32 || (input.phone && !/^1\d{10}$/.test(input.phone)) || !input.roles.length)
+      throw new Error('用户资料无效');
+    if (read('users').some((row) => row.id !== id && row.username === input.username)) throw new Error('用户名重复');
+    if (
+      input.organizationId &&
+      !read('organizations').some((row) => row.id === input.organizationId && row.status === 'enabled')
+    )
+      throw new Error('所属机构不存在或已停用');
+    if (input.roles.some((code) => !read('roles').some((row) => row.code === code && row.status === 'enabled')))
+      throw new Error('角色不存在或已停用');
+    const previous = id ? requireRecord(read('users'), id) : undefined;
+    if (
+      previous?.username === 'admin' &&
+      (input.username !== 'admin' || input.status !== 'enabled' || !input.roles.includes('admin'))
+    )
+      throw new Error('不能停用或移除内置管理员角色');
+    if (previous && JSON.stringify(previous.roles) !== JSON.stringify(input.roles))
+      assertPermission('system:user:assign-roles');
+    if (previous && previous.status !== input.status) assertPermission('system:user:status');
+    return {
+      password: 'lumal123',
+      ...previous,
+      ...input,
+      id: id ?? crypto.randomUUID(),
+      createdAt: previous?.createdAt ?? new Date().toISOString(),
+    };
+  }
+  function saveRows(resource: string, record: DataRow, id?: string) {
+    const rows = read(resource);
+    db.write(resource, id ? rows.map((row) => (row.id === id ? record : row)) : [...rows, record]);
+    return resource === 'users' ? cleanUser(record) : record;
+  }
+  function validate(resource: string, body: DataRow, id?: string): DataRow {
+    if (resource === 'users') return validateUser(body, id);
+    const rows = read(resource);
+    const previous = id ? requireRecord(rows, id) : undefined;
+    let input: DataRow;
+    if (resource === 'roles') {
+      if (Object.hasOwn(body, 'permissions')) throw new Error('角色资料与授权必须分别保存');
+      input = { ...roleInput(body), builtIn: previous?.builtIn ?? false, permissions: previous?.permissions ?? [] };
+      if (previous && input.code !== previous.code) throw new Error('角色编码不允许修改');
+      if (previous?.builtIn && input.status !== 'enabled') throw new Error('不能停用内置角色');
+    } else if (resource === 'organizations') {
+      input = { ...organizationInput(body) };
+    } else if (resource === 'menus') {
+      input = { ...menuInput(body) };
+    } else if (resource === 'dictionaries/types') {
+      input = { ...dictionaryTypeInput(body) };
+      if (previous && input.code !== previous.code) throw new Error('字典编码不允许修改');
+    } else {
+      input = { ...dictionaryItemInput(body) };
+      if (!read('dictionaries/types').some((row) => row.code === input.typeCode)) throw new Error('字典分类不存在');
+      if (rows.some((row) => row.id !== id && row.typeCode === input.typeCode && row.value === input.value))
+        throw new Error('同分类字典值重复');
+    }
+    const unique = ['roles', 'organizations', 'dictionaries/types'].includes(resource) ? 'code' : undefined;
+    if (unique && rows.some((row) => row.id !== id && row[unique] === input[unique])) throw new Error('编码重复');
+    const record: DataRow = { ...previous, ...input, id: id ?? crypto.randomUUID() };
+    const next = id ? rows.map((row) => (row.id === id ? record : row)) : [...rows, record];
+    if (resource === 'organizations') assertHierarchy(hierarchy(next));
+    if (resource === 'menus') {
+      assertHierarchy(hierarchy(next));
+      const active = next.filter((row) => row.type !== 'button');
+      if (
+        new Set(active.map((row) => row.path)).size !== active.length ||
+        new Set(active.map((row) => row.name)).size !== active.length
+      )
+        throw new Error('菜单路径或路由名重复');
+      buildStoredMenus(next, viewComponents);
+    }
+    return record;
+  }
+  function remove(resource: string, id: string): void {
+    const rows = read(resource);
+    const record = requireRecord(rows, id);
+    if ((resource === 'users' && record.username === 'admin') || (resource === 'roles' && record.builtIn))
+      throw new Error('不能删除内置管理员或内置角色');
+    if (resource === 'roles' && read('users').some((row) => stringArray(row.roles).includes(String(record.code))))
+      throw new Error('角色仍被用户引用');
+    if (['menus', 'organizations'].includes(resource) && rows.some((row) => row.parentId === id))
+      throw new Error('请先删除子节点');
+    if (resource === 'organizations' && read('users').some((row) => row.organizationId === id))
+      throw new Error('机构仍有关联用户');
+    if (resource === 'dictionaries/types')
+      db.write(
+        'dictionaries/items',
+        read('dictionaries/items').filter((row) => row.typeCode !== record.code),
+      );
+    db.write(
+      resource,
+      rows.filter((row) => row.id !== id),
+    );
+  }
+  return {
+    handles: (path) => path.startsWith('/system/'),
+    async request(method, path, request) {
+      user();
+      const assertMethod = (...allowed: string[]) => {
+        if (!allowed.includes(method)) throw new Error(`此接口不支持 ${method} 操作`);
+      };
+      const body = request.body === undefined ? {} : object(request.body);
+      if (path === '/system/roles/options') {
+        assertMethod('GET');
+        assertPermission('system:user:list');
+        return read('roles').map((row) => ({ label: row.name, value: row.code, disabled: row.status !== 'enabled' }));
+      }
+      if (path === '/system/organizations/options') {
+        assertMethod('GET');
+        assertPermission('system:user:list');
+        const convert = (items: (DataRow & { id: string; children?: DataRow[] })[]): unknown[] =>
+          items.map((row) => ({
+            label: row.name,
+            value: row.id,
+            disabled: row.status !== 'enabled',
+            children: convert((row.children ?? []).map((child) => ({ ...child, id: String(child.id) }))),
+          }));
+        return convert(buildTree(hierarchy(read('organizations'))));
+      }
+      if (path === '/system/permissions/tree') {
+        assertMethod('GET');
+        assertPermission('system:role:authorize');
+        return structuredClone(permissionTree);
+      }
+      const grant = path.match(/^\/system\/roles\/([^/]+)\/permissions$/);
+      if (grant) {
+        assertMethod('GET', 'PUT');
+        assertPermission('system:role:authorize');
+        const code = decodeURIComponent(grant[1]!);
+        const roles = read('roles');
+        const role = roles.find((row) => row.code === code);
+        if (!role) throw new Error('角色不存在');
+        if (method === 'GET') return stringArray(role.permissions ?? []);
+        const permissions = stringArray(body.permissions);
+        if (permissions.some((code) => !permissionCodes.includes(code))) throw new Error('授权包含未注册权限');
+        if (role.code === 'admin' && !permissionCodes.every((code) => permissions.includes(code)))
+          throw new Error('不能移除内置管理员权限');
+        db.write(
+          'roles',
+          roles.map((row) => (row.id === role.id ? { ...row, permissions } : row)),
+        );
+        return permissions;
+      }
+      const batch = path.match(/^\/system\/users\/batch\/(status|roles)$/);
+      const special = path.match(/^\/system\/users\/([^/]+)\/(status|roles|reset-password)$/);
+      if (batch || special) {
+        const action = batch?.[1] ?? special?.[2];
+        assertMethod(action === 'status' ? 'PATCH' : action === 'roles' ? 'PUT' : 'POST');
+        assertPermission(`system:user:${action === 'roles' ? 'assign-roles' : action}`);
+        const all = read('users');
+        const ids = batch ? stringArray(body.ids) : [decodeURIComponent(special![1]!)];
+        if (!ids.length) throw new Error('请先选择用户');
+        const selected = ids.map((id) => requireRecord(all, id));
+        if (action === 'reset-password') {
+          const temporaryPassword = crypto.randomUUID().replaceAll('-', '').slice(0, 16);
+          db.write(
+            'users',
+            all.map((row) => (ids.includes(String(row.id)) ? { ...row, password: temporaryPassword } : row)),
+          );
+          return { temporaryPassword };
+        }
+        if (batch && action === 'roles' && !['append', 'replace'].includes(String(body.mode)))
+          throw new Error('角色分配方式无效');
+        const changed = selected.map((row) => {
+          const roles = stringArray(body.roles ?? []);
+          return validateUser(
+            {
+              ...row,
+              ...(action === 'status'
+                ? { status: body.status }
+                : {
+                    roles:
+                      batch && body.mode === 'append' ? [...new Set([...stringArray(row.roles), ...roles])] : roles,
+                  }),
+            },
+            String(row.id),
+          );
+        });
+        db.write(
+          'users',
+          all.map((row) => changed.find((item) => item.id === row.id) ?? row),
+        );
+        return batch ? { items: changed.map(cleanUser), updated: changed.length } : cleanUser(changed[0]!);
+      }
+      if (path.startsWith('/system/dictionaries/options/')) {
+        assertMethod('GET');
+        const code = decodeURIComponent(path.split('/').at(-1)!);
+        if (!read('dictionaries/types').some((row) => row.code === code && row.status === 'enabled')) return [];
+        return read('dictionaries/items')
+          .filter((row) => row.typeCode === code && row.status === 'enabled')
+          .sort((a, b) => Number(a.order) - Number(b.order))
+          .map((row) => ({ label: row.label, value: row.value, color: row.color }));
+      }
+      if (path === '/system/config' || path === '/system/config/restore') {
+        assertMethod(...(path.endsWith('/restore') ? ['POST'] : ['GET', 'PUT']));
+        assertPermission(`system:config:${method === 'GET' ? 'view' : 'update'}`);
+        const config =
+          method === 'GET'
+            ? db.read('config', () => [{ ...defaultConfig }])[0]!
+            : path.endsWith('/restore')
+              ? defaultConfig
+              : configInput(body);
+        if (method !== 'GET') db.write('config', [{ ...config }]);
+        return config;
+      }
+      const match = path.match(
+        /^\/system\/(users|roles|menus|organizations|dictionaries\/(?:types|items))(?:\/([^/]+))?$/,
+      );
+      if (!match) throw new Error(`本地不支持此接口：${method} ${path}`);
+      const resource = match[1]!;
+      const id = match[2] ? decodeURIComponent(match[2]) : undefined;
+      assertMethod(...(id ? ['PUT', 'DELETE'] : ['GET', 'POST']));
+      const prefix = {
+        users: 'user',
+        roles: 'role',
+        menus: 'menu',
+        organizations: 'organization',
+        'dictionaries/types': 'dict',
+        'dictionaries/items': 'dict',
+      }[resource]!;
+      assertPermission(
+        `system:${prefix}:${method === 'GET' ? 'list' : method === 'POST' ? 'create' : method === 'DELETE' ? 'delete' : 'update'}`,
+      );
+      if (method === 'GET') {
+        const query = request.query ?? {};
+        let result = read(resource);
+        if (query.keyword)
+          result = result.filter((row) =>
+            Object.values(row).some((value) => String(value).includes(String(query.keyword))),
+          );
+        if (query.status) result = result.filter((row) => row.status === query.status);
+        if (query.typeCode) result = result.filter((row) => row.typeCode === query.typeCode);
+        if (query.roles) result = result.filter((row) => stringArray(row.roles).includes(String(query.roles)));
+        if (query.organizationId) {
+          const organizations = hierarchy(read('organizations'));
+          const descendants = new Set([String(query.organizationId)]);
+          for (let size = -1; size !== descendants.size;) {
+            size = descendants.size;
+            organizations.filter((row) => descendants.has(row.parentId)).forEach((row) => descendants.add(row.id));
+          }
+          result = result.filter((row) => descendants.has(String(row.organizationId)));
+        }
+        if (resource === 'menus' || resource === 'organizations')
+          return buildTree(
+            hierarchy(result).map((row) => ({
+              ...row,
+              ...(resource === 'organizations'
+                ? { userCount: read('users').filter((user) => user.organizationId === row.id).length }
+                : {}),
+            })),
+          );
+        if (resource.startsWith('dictionaries/'))
+          return result.sort((a, b) => Number(a.order ?? 0) - Number(b.order ?? 0));
+        const page = Number(query.page ?? 1);
+        const size = Number(query.pageSize ?? 10);
+        if (!Number.isSafeInteger(page) || page < 1 || !Number.isSafeInteger(size) || size < 1 || size > 1000)
+          throw new Error('分页参数无效');
+        return {
+          items: result
+            .slice((page - 1) * size, page * size)
+            .map((row) => (resource === 'users' ? cleanUser(row) : row)),
+          total: result.length,
+        };
+      }
+      if (method === 'DELETE') {
+        remove(resource, id ?? '');
+        return;
+      }
+      const record = validate(resource, body, id);
+      return saveRows(resource, record, id);
+    },
+  };
+}

package/templates/features/system/src/modules/system/menu/MenuView.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import type { SchemaTableColumn } from '@lumal/core/components';
+import type { Menu } from './types';
+import { LumalPage, LumalSchemaTable } from '@lumal/core/components';
+import { LumalIcon } from '@lumal/icons-vue';
+import { ElAlert, ElButton, ElInput, ElMessage } from 'element-plus';
+import { computed, shallowRef } from 'vue';
+import { application, permissionStore, service } from '../../../app/services/session';
+import { useAsyncData } from '../../../shared/composables/use-async-data';
+import { useEntityEditor } from '../../../shared/composables/use-entity-editor';
+import { flattenTree } from '../../../shared/tree';
+import { createMenuService, menuInput, parseMenu } from './api';
+import MenuEditorDialog from './components/MenuEditorDialog.vue';
+
+/***********************菜单树与独立刷新*********************/
+const api = createMenuService(service);
+const state = useAsyncData(api.list, [] as Menu[]);
+const keyword = shallowRef('');
+const refreshing = shallowRef(false);
+const refreshError = shallowRef('');
+const can = (action: string) => permissionStore.hasPermission(`system:menu:${action}`);
+const records = computed(() => flattenTree(state.data.value));
+function filterTree(items: Menu[]): Menu[] {
+  return items.flatMap((item) => {
+    const children = filterTree(item.children ?? []);
+    return !keyword.value || item.title.includes(keyword.value) || children.length ? [{ ...item, children }] : [];
+  });
+}
+const displayed = computed(() => filterTree(state.data.value));
+const columns: SchemaTableColumn<Menu>[] = [
+  { field: 'title', label: '标题', minWidth: 210 },
+  {
+    field: 'type',
+    label: '类型',
+    width: 100,
+    formatter: (value) =>
+      ({ directory: '目录', menu: '菜单', button: '按钮', external: '外链', embedded: '内嵌' })[String(value)] ?? value,
+  },
+  { field: 'path', label: '路径', minWidth: 170 },
+  { field: 'component', label: '组件', minWidth: 170 },
+  { field: 'order', label: '排序', width: 80 },
+  { field: 'hidden', label: '显示', width: 80, formatter: (value) => (value ? '隐藏' : '显示') },
+];
+const editor = useEntityEditor<Menu, ReturnType<typeof menuInput>>({
+  create: api.create,
+  update: api.update,
+  remove: api.remove,
+  toInput: menuInput,
+  reload: state.load,
+});
+async function refreshMenus(): Promise<void> {
+  refreshing.value = true;
+  refreshError.value = '';
+  try {
+    await application.refreshAccess();
+    ElMessage.success('导航与权限已重新加载');
+  } catch (reason) {
+    refreshError.value = reason instanceof Error ? reason.message : '导航刷新失败';
+  } finally {
+    refreshing.value = false;
+  }
+}
+function create(parent?: Menu): void {
+  editor.openCreate({
+    parentId: parent?.id ?? '',
+    type: parent?.type === 'menu' ? 'button' : 'menu',
+    hidden: false,
+    order: 0,
+    permissions: [],
+  });
+}
+</script>
+
+<template>
+  <LumalPage class="lumal-admin-page" title="菜单管理" no-padding>
+    <ElAlert
+      v-if="editor.error.value || refreshError"
+      :title="editor.error.value || refreshError"
+      type="error"
+      :closable="false"
+    />
+    <LumalSchemaTable
+      :rows="displayed"
+      :columns="columns"
+      :loading="state.loading.value"
+      :error="state.error.value"
+      default-expand-all
+      :action-width="240"
+      @retry="state.reload"
+    >
+      <template #toolbar>
+        <ElInput
+          v-model="keyword"
+          placeholder="搜索菜单标题"
+          aria-label="搜索菜单"
+          clearable
+          style="max-width: 260px"
+        />
+        <ElButton v-if="can('create')" type="primary" @click="create()"> 新增节点 </ElButton>
+      </template>
+      <template #toolbar-tools>
+        <ElButton :loading="refreshing" @click="refreshMenus"> 刷新导航 </ElButton>
+        <ElButton title="重新加载" aria-label="重新加载" @click="state.reload">
+          <LumalIcon name="lumal:refresh" />
+        </ElButton>
+      </template>
+      <template #actions="{ row }">
+        <ElButton v-if="can('create') && ['directory', 'menu'].includes(row.type)" link @click="create(parseMenu(row))">
+          新增子节点
+        </ElButton>
+        <ElButton v-if="can('update')" link @click="editor.openEdit(parseMenu(row))"> 编辑 </ElButton>
+        <ElButton
+          v-if="can('delete')"
+          link
+          type="danger"
+          :disabled="editor.saving.value"
+          @click="editor.remove(parseMenu(row))"
+        >
+          删除
+        </ElButton>
+      </template>
+    </LumalSchemaTable>
+    <MenuEditorDialog
+      v-model:visible="editor.visible.value"
+      v-model:model="editor.model.value"
+      :records="records"
+      :editing-id="editor.editing.value?.id"
+      :saving="editor.saving.value"
+      :error="editor.error.value"
+      @submit="editor.submit"
+    />
+  </LumalPage>
+</template>