create-lumal-admin 0.0.5-beta → 0.0.6-beta

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>

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

@@ -0,0 +1,73 @@
+import type { SchemaFormModel } from '@lumal/core/components';
+import type { BusinessTransport } from '../../../app/services/contracts';
+import type { Menu, MenuInput, MenuType } from './types';
+import { assertRoutePath, resolveView, safeExternalUrl } from '../../../app/menu-policy';
+import { viewComponents } from '../../../app/router/views';
+import { integer, object, rows, stringArray, text } from '../../../shared/api';
+
+export function menuInput(model: SchemaFormModel): MenuInput {
+  const type = text(model.type, '菜单类型', true) as MenuType;
+  if (!['directory', 'menu', 'button', 'external', 'embedded'].includes(type)) throw new Error('菜单类型无效');
+  const path = type === 'button' ? '' : text(model.path, '路径', true);
+  if (type !== 'button') assertRoutePath(path);
+  const component = type === 'menu' ? text(model.component, '组件', true) : type === 'embedded' ? 'app/iframe' : '';
+  if (component && !resolveView(viewComponents, component)) throw new Error('菜单组件不在白名单中');
+  const externalLink = ['external', 'embedded'].includes(type) ? safeExternalUrl(model.externalLink) : '';
+  if (type === 'embedded') {
+    const origins = String(import.meta.env.VITE_IFRAME_ORIGINS ?? '')
+      .split(',')
+      .map((item) => item.trim());
+    if (!origins.includes(new URL(externalLink).origin)) throw new Error('iframe 来源不在独立白名单中');
+  }
+  const permissions =
+    typeof model.permissions === 'string'
+      ? stringArray(
+          model.permissions
+            .split(',')
+            .map((item) => item.trim())
+            .filter(Boolean),
+        )
+      : stringArray(model.permissions ?? []);
+  if (type === 'button' && !permissions.length) throw new Error('按钮必须配置权限标识');
+  return {
+    type,
+    path,
+    component,
+    externalLink,
+    permissions,
+    name: type === 'button' ? '' : text(model.name, '路由名', true),
+    parentId: text(model.parentId, '父节点'),
+    title: text(model.title, '标题', true),
+    icon: text(model.icon, '图标'),
+    order: integer(model.order ?? 0),
+    hidden: model.hidden === true,
+  };
+}
+export function parseMenu(value: unknown): Menu {
+  const raw = object(value);
+  // 远端业务菜单包含未生成页面时，仍允许管理其资料；路由下发另经严格白名单验证。
+  return {
+    id: text(raw.id, '菜单 ID', true),
+    title: text(raw.title, '标题', true),
+    parentId: text(raw.parentId, '父节点'),
+    type: raw.type as MenuType,
+    path: text(raw.path, '路径'),
+    name: text(raw.name, '路由名'),
+    component: text(raw.component, '组件'),
+    icon: text(raw.icon, '图标'),
+    order: integer(raw.order ?? 0),
+    hidden: raw.hidden === true,
+    permissions: stringArray(raw.permissions ?? (raw.permission ? [raw.permission] : [])),
+    externalLink: text(raw.externalLink, '外链'),
+    children: raw.children === undefined ? undefined : rows(raw.children, parseMenu),
+  };
+}
+export function createMenuService(transport: BusinessTransport) {
+  return {
+    list: async () => rows(await transport.request('GET', '/system/menus'), parseMenu),
+    create: async (input: MenuInput) => parseMenu(await transport.request('POST', '/system/menus', { body: input })),
+    update: async (id: string, input: MenuInput) =>
+      parseMenu(await transport.request('PUT', `/system/menus/${encodeURIComponent(id)}`, { body: input })),
+    remove: (id: string) => transport.request<void>('DELETE', `/system/menus/${encodeURIComponent(id)}`),
+  };
+}

package/templates/features/system/src/modules/system/menu/components/MenuEditorDialog.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import type { SchemaFormItem, SchemaFormModel } from '@lumal/core/components';
+import type { Menu } from '../types';
+import { LumalIconPicker } from '@lumal/icons-vue';
+import { computed } from 'vue';
+import { viewComponents } from '../../../../app/router/views';
+import BaseEntityDialog from '../../../../shared/components/BaseEntityDialog.vue';
+import { excludedDescendants } from '../../../../shared/tree';
+
+/***********************节点类型约束与父级选择*********************/
+const props = defineProps<{ records: Menu[]; editingId?: string; saving: boolean; error: string }>();
+defineEmits<{ submit: [model: SchemaFormModel] }>();
+const visible = defineModel<boolean>('visible', { required: true });
+const model = defineModel<SchemaFormModel>('model', { required: true });
+const schemas = computed<SchemaFormItem[]>(() => {
+  const excluded = excludedDescendants(props.records, props.editingId);
+  const parents = props.records.filter(
+    (item) =>
+      !excluded.has(item.id) &&
+      (model.value.type === 'button' ? ['menu', 'directory'].includes(item.type) : item.type === 'directory'),
+  );
+  return [
+    {
+      field: 'type',
+      label: '节点类型',
+      component: 'select',
+      required: true,
+      defaultValue: 'menu',
+      options: [
+        { label: '目录', value: 'directory' },
+        { label: '菜单', value: 'menu' },
+        { label: '按钮', value: 'button' },
+        { label: '外链', value: 'external' },
+        { label: '内嵌页面', value: 'embedded' },
+      ],
+    },
+    {
+      field: 'parentId',
+      label: '父节点',
+      component: 'select',
+      options: [{ label: '无', value: '' }, ...parents.map((item) => ({ label: item.title, value: item.id }))],
+    },
+    { field: 'title', label: '标题', required: true },
+    { field: 'name', label: '路由名', required: true, hidden: ({ model }) => model.type === 'button' },
+    { field: 'path', label: '路径', required: true, hidden: ({ model }) => model.type === 'button' },
+    {
+      field: 'component',
+      label: '页面组件',
+      component: 'select',
+      required: true,
+      options: Object.keys(viewComponents)
+        .filter((key) => key !== 'app/iframe')
+        .map((key) => ({ label: key, value: key })),
+      hidden: ({ model }) => model.type !== 'menu',
+    },
+    {
+      field: 'externalLink',
+      label: 'HTTP(S) 地址',
+      required: true,
+      hidden: ({ model }) => !['external', 'embedded'].includes(String(model.type)),
+    },
+    {
+      field: 'permissions',
+      label: '权限标识',
+      component: 'input',
+      placeholder: '多个权限以英文逗号分隔',
+      required: ({ model }) => model.type === 'button',
+    },
+    { field: 'icon', label: '图标', hidden: ({ model }) => model.type === 'button' },
+    { field: 'order', label: '排序', component: 'number', defaultValue: 0 },
+    {
+      field: 'hidden',
+      label: '隐藏',
+      component: 'switch',
+      defaultValue: false,
+      hidden: ({ model }) => model.type === 'button',
+    },
+  ];
+});
+const formModel = computed<SchemaFormModel>({
+  get: () => ({
+    ...model.value,
+    permissions: Array.isArray(model.value.permissions) ? model.value.permissions.join(',') : model.value.permissions,
+  }),
+  set: (value) => {
+    model.value = value;
+  },
+});
+</script>
+
+<template>
+  <BaseEntityDialog
+    v-model:visible="visible"
+    v-model:model="formModel"
+    :title="editingId ? '编辑节点' : '新增节点'"
+    :schemas="schemas"
+    :editing="!!editingId"
+    :saving="saving"
+    :error="error"
+    @submit="$emit('submit', $event)"
+  >
+    <template #field-icon="{ value }">
+      <LumalIconPicker :model-value="String(value ?? '')" @update:model-value="model = { ...model, icon: $event }" />
+    </template>
+  </BaseEntityDialog>
+</template>