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

package/templates/common/eslint.config.mjs

@@ -0,0 +1,60 @@
+import { existsSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import antfu from '@antfu/eslint-config';
+import prettier from 'eslint-config-prettier/flat';
+import { createTypeScriptImportResolver } from 'eslint-import-resolver-typescript';
+import importX from 'eslint-plugin-import-x';
+
+const root = fileURLToPath(new URL('.', import.meta.url));
+const hybrid =
+  existsSync(new URL('./src/admin', import.meta.url)) && existsSync(new URL('./src/screen', import.meta.url));
+
+export default antfu(
+  {
+    vue: true,
+    typescript: true,
+    // Prettier 独占格式化；不启用 Antfu 的格式插件。
+    stylistic: false,
+    formatters: false,
+    ignores: ['**/dist/**', '**/coverage/**', '**/*.d.ts', 'pnpm-lock.yaml', '**/*.md'],
+    rules: {
+      'antfu/if-newline': 'off',
+      'antfu/curly': 'off',
+      'vue/block-order': ['error', { order: ['script', 'template', 'style'] }],
+      'vue/component-name-in-template-casing': ['error', 'PascalCase', { registeredComponentsOnly: true }],
+      'vue/component-api-style': ['error', ['script-setup']],
+      'unused-imports/no-unused-imports': 'error',
+      'unused-imports/no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
+      'node/prefer-global/process': 'off',
+    },
+  },
+  {
+    files: ['src/**/*.{ts,vue}'],
+    plugins: { 'import-x': importX },
+    settings: {
+      'import-x/resolver-next': [
+        createTypeScriptImportResolver({ project: fileURLToPath(new URL('./tsconfig.json', import.meta.url)) }),
+      ],
+    },
+    rules: {
+      'import-x/no-cycle': ['error', { ignoreExternal: true }],
+      'import-x/no-restricted-paths': [
+        'error',
+        {
+          basePath: root,
+          zones: [
+            { target: './src/shared', from: './src/modules', message: '共享层不得反向依赖业务模块。' },
+            ...(hybrid
+              ? [
+                  { target: './src/screen', from: './src/admin' },
+                  { target: './src/admin', from: './src/screen' },
+                  { target: './src/shared', from: ['./src/admin', './src/screen'] },
+                ]
+              : []),
+          ],
+        },
+      ],
+    },
+  },
+  prettier,
+);

package/templates/common/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "template-base",
+  "type": "module",
+  "version": "0.0.0",
+  "private": true,
+  "packageManager": "pnpm@10.33.0",
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json",
+    "test": "vitest run",
+    "build": "vite build",
+    "preview": "vite preview --host 127.0.0.1",
+    "check": "pnpm lint && pnpm format:check && pnpm typecheck && pnpm test && pnpm build"
+  },
+  "dependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^8.2.0",
+    "@types/node": "^24.6.1",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "eslint": "^9.37.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import-x": "^4.16.1",
+    "prettier": "^3.6.2",
+    "typescript": "^6.0.0",
+    "vite": "^8.0.0",
+    "vitest": "^4.1.5",
+    "vue-tsc": "^3.1.1"
+  }
+}

package/templates/common/prettier.config.mjs

@@ -0,0 +1,8 @@
+export default {
+  semi: true,
+  singleQuote: true,
+  tabWidth: 2,
+  printWidth: 120,
+  trailingComma: 'all',
+  endOfLine: 'lf',
+};

package/templates/common/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "jsx": "preserve",
+    "useDefineForClassFields": true,
+    "baseUrl": ".",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "paths": { "@/*": ["src/*"] },
+    "resolveJsonModule": true,
+    "ignoreDeprecations": "6.0",
+    "types": ["vite/client", "node"],
+    "strict": true,
+    "noEmit": true,
+    "isolatedModules": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue", "tests/**/*.ts", "vite.config.ts", "vitest.config.ts"]
+}

package/templates/common/vitest.config.ts

@@ -0,0 +1,3 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({ test: { environment: 'node' } });

package/templates/features/examples/src/modules/examples/CrudExampleView.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { CrudDataSource, SchemaTableRow } from '@lumal/core/components';
+import { LumalCrudTable } from '@lumal/core/components';
+
+/***********************隔离的 CRUD 示例数据*********************/
+let rows: SchemaTableRow[] = [{ id: 'example', name: '示例记录', status: 'enabled' }];
+const columns = [
+  { field: 'name', label: '名称' },
+  { field: 'status', label: '状态' },
+];
+const dataSource: CrudDataSource = {
+  fetch: async ({ page, pageSize, query }) => {
+    const filtered = rows.filter((row) => String(row.name).includes(String(query.keyword ?? '')));
+    return { items: filtered.slice((page - 1) * pageSize, page * pageSize), total: filtered.length };
+  },
+  create: async (model) => {
+    rows = [...rows, { ...model, id: crypto.randomUUID() }];
+  },
+  update: async (row, model) => {
+    rows = rows.map((item) => (item.id === row.id ? { ...model, id: row.id } : item));
+  },
+  remove: async (row) => {
+    rows = rows.filter((item) => item.id !== row.id);
+  },
+};
+</script>
+
+<template>
+  <main class="lumal-admin-page">
+    <LumalCrudTable
+      title="CRUD 示例"
+      :data-source="dataSource"
+      :table="{ columns, rowKey: 'id', showColumnSettings: true, selection: true }"
+      :query="{ schemas: [{ field: 'keyword', label: '关键词', component: 'input' }] }"
+      :form-schemas="[
+        { field: 'name', label: '名称', component: 'input', required: true },
+        {
+          field: 'status',
+          label: '状态',
+          component: 'select',
+          options: [
+            { label: '启用', value: 'enabled' },
+            { label: '停用', value: 'disabled' },
+          ],
+          defaultValue: 'enabled',
+        },
+      ]"
+      :toolbar="{ export: true, refresh: true }"
+    />
+  </main>
+</template>

package/templates/features/examples/src/modules/examples/FormExampleView.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { SchemaFormItem, SchemaFormModel } from '@lumal/core/components';
+import { LumalSchemaForm } from '@lumal/core/components';
+import { ElMessage } from 'element-plus';
+import { shallowRef } from 'vue';
+
+/***********************Schema 与联动*********************/
+const model = shallowRef<SchemaFormModel>({});
+const schemas: SchemaFormItem[] = [
+  { field: 'name', label: '名称', required: true, component: 'input' },
+  { field: 'date', label: '日期', component: 'date', componentProps: { valueFormat: 'YYYY-MM-DD' } },
+  { field: 'notify', label: '邮件通知', component: 'switch' },
+  {
+    field: 'email',
+    label: '邮箱',
+    component: 'input',
+    hidden: ({ model }) => !model.notify,
+    required: ({ model }) => Boolean(model.notify),
+    rules: [{ type: 'email', message: '请输入有效邮箱' }],
+  },
+];
+function submit(): void {
+  ElMessage.success('保存成功');
+}
+</script>
+
+<template>
+  <main class="lumal-admin-page">
+    <h1>Schema 表单</h1>
+    <LumalSchemaForm v-model="model" :schemas="schemas" :columns="2" show-actions show-reset @submit="submit" />
+  </main>
+</template>

package/templates/features/examples/src/modules/examples/module.ts

@@ -0,0 +1,27 @@
+import type { AppModule } from '../../app/module';
+
+export const menus: AppModule['menus'] = [
+  {
+    path: '/examples',
+    name: 'Examples',
+    meta: { title: '开发示例', icon: 'lumal:code', order: 80 },
+    children: [
+      {
+        path: '/examples/form',
+        name: 'SchemaFormExample',
+        component: 'examples/form',
+        meta: { title: 'Schema 表单', keepAlive: true },
+      },
+      {
+        path: '/examples/crud',
+        name: 'CrudExample',
+        component: 'examples/crud',
+        meta: { title: 'CRUD 示例', keepAlive: true },
+      },
+    ],
+  },
+];
+export const views: AppModule['views'] = {
+  'examples/form': () => import('./FormExampleView.vue'),
+  'examples/crud': () => import('./CrudExampleView.vue'),
+};

package/templates/features/system/src/modules/system/config/ConfigView.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import type { SchemaFormItem, SchemaFormModel } from '@lumal/core/components';
+import { LumalPage, LumalSchemaForm } from '@lumal/core/components';
+import { ElAlert, ElButton, ElColorPicker, ElMessage, ElMessageBox } from 'element-plus';
+import { shallowRef, watch } from 'vue';
+import { permissionStore, service } from '../../../app/services/session';
+import { useAsyncData } from '../../../shared/composables/use-async-data';
+import { configInput, createConfigService } from './api';
+
+/***********************配置加载与独立表单*********************/
+const api = createConfigService(service);
+const state = useAsyncData(api.get, null);
+const model = shallowRef<SchemaFormModel>({});
+const saving = shallowRef(false);
+const failure = shallowRef('');
+const canSave = () => permissionStore.hasPermission('system:config:update');
+watch(state.data, (value) => {
+  if (value) model.value = { ...value };
+});
+const schemas: SchemaFormItem[] = [
+  { field: 'appName', label: '应用名称', required: true, rules: [{ max: 64, message: '应用名称最多 64 个字符' }] },
+  { field: 'colorPrimary', label: '主题色', required: true },
+  {
+    field: 'layout',
+    label: '导航布局',
+    component: 'select',
+    required: true,
+    options: [
+      { label: '侧边导航', value: 'sidebar-nav' },
+      { label: '顶部导航', value: 'top-nav' },
+      { label: '混合导航', value: 'mixed-nav' },
+    ],
+  },
+  { field: 'tabbarEnable', label: '标签栏', component: 'switch' },
+  { field: 'transitionEnable', label: '页面动画', component: 'switch' },
+];
+
+/***********************保存、重置与失败恢复*********************/
+async function persist(values: SchemaFormModel, restore = false): Promise<void> {
+  if (saving.value || state.loading.value || !canSave()) return;
+  saving.value = true;
+  failure.value = '';
+  try {
+    const next = restore ? await api.restore() : await api.save(configInput(values));
+    model.value = { ...next };
+    ElMessage.success(restore ? '已恢复默认配置' : '配置已保存');
+  } catch (reason) {
+    failure.value = reason instanceof Error ? reason.message : '配置保存失败';
+  } finally {
+    saving.value = false;
+  }
+}
+async function restore(): Promise<void> {
+  try {
+    await ElMessageBox.confirm('恢复系统默认配置？', '恢复默认', { type: 'warning' });
+  } catch {
+    return;
+  }
+  await persist({}, true);
+}
+async function reload(): Promise<void> {
+  if (saving.value || state.loading.value) return;
+  failure.value = '';
+  await state.reload();
+}
+</script>
+
+<template>
+  <LumalPage class="lumal-admin-page" title="系统配置">
+    <ElAlert v-if="state.error.value || failure" :title="state.error.value || failure" type="error" :closable="false">
+      <ElButton link :loading="state.loading.value" :disabled="saving" @click="reload"> 重新加载 </ElButton>
+    </ElAlert>
+    <div v-if="state.data.value" class="config-form">
+      <LumalSchemaForm
+        v-model="model"
+        :schemas="schemas"
+        :columns="2"
+        :mode="canSave() ? 'edit' : 'view'"
+        :show-actions="canSave()"
+        :disabled="saving || state.loading.value"
+        :submit-disabled="state.loading.value"
+        :submit-loading="saving"
+        submit-text="保存配置"
+        @submit="persist"
+      >
+        <template #field-colorPrimary="{ value }">
+          <ElColorPicker
+            :model-value="String(value || '')"
+            :disabled="!canSave() || saving || state.loading.value"
+            @update:model-value="model = { ...model, colorPrimary: $event }"
+          />
+        </template>
+      </LumalSchemaForm>
+      <ElButton :disabled="saving" :loading="state.loading.value" @click="reload"> 重读配置 </ElButton>
+      <ElButton v-if="canSave()" :disabled="saving" @click="restore"> 恢复默认配置 </ElButton>
+    </div>
+  </LumalPage>
+</template>
+
+<style scoped>
+.config-form {
+  max-width: 900px;
+}
+</style>

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

@@ -0,0 +1,38 @@
+import type { SchemaFormModel } from '@lumal/core/components';
+import type { BusinessTransport } from '../../../app/services/contracts';
+import { object, text } from '../../../shared/api';
+
+export interface SystemConfig {
+  appName: string;
+  colorPrimary: string;
+  layout: 'sidebar-nav' | 'top-nav' | 'mixed-nav';
+  tabbarEnable: boolean;
+  transitionEnable: boolean;
+}
+export function configInput(model: SchemaFormModel): SystemConfig {
+  const appName = text(model.appName, '应用名称', true);
+  const colorPrimary = text(model.colorPrimary, '主题色', true);
+  if (
+    appName.length > 64 ||
+    !/^#[\da-f]{6}$/i.test(colorPrimary) ||
+    !['sidebar-nav', 'top-nav', 'mixed-nav'].includes(String(model.layout))
+  )
+    throw new Error('应用名称、主题色或导航布局无效');
+  if (typeof model.tabbarEnable !== 'boolean' || typeof model.transitionEnable !== 'boolean')
+    throw new Error('标签栏和动画设置必须是布尔值');
+  return {
+    appName,
+    colorPrimary,
+    layout: model.layout as SystemConfig['layout'],
+    tabbarEnable: model.tabbarEnable,
+    transitionEnable: model.transitionEnable,
+  };
+}
+export function createConfigService(transport: BusinessTransport) {
+  return {
+    get: async () => configInput(object(await transport.request('GET', '/system/config'))),
+    save: async (input: SystemConfig) =>
+      configInput(object(await transport.request('PUT', '/system/config', { body: input }))),
+    restore: async () => configInput(object(await transport.request('POST', '/system/config/restore'))),
+  };
+}

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

@@ -0,0 +1,21 @@
+import type { AppModule } from '../../../app/module';
+
+export const menus: AppModule['menus'] = [
+  {
+    path: '/system/config',
+    name: 'SystemConfig',
+    component: 'system/config',
+    meta: { title: '系统配置', authority: ['system:config:view'], keepAlive: true, order: 7 },
+  },
+];
+export const views: AppModule['views'] = { 'system/config': () => import('./ConfigView.vue') };
+export const permissions: AppModule['permissions'] = [
+  {
+    id: 'system-config',
+    label: '系统配置',
+    children: [
+      { id: 'system:config:view', label: '查看配置', permission: 'system:config:view' },
+      { id: 'system:config:update', label: '保存配置', permission: 'system:config:update' },
+    ],
+  },
+];

package/templates/features/system/src/modules/system/dictionary/DictionaryItemView.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import type { SchemaFormItem, SchemaTableColumn } from '@lumal/core/components';
+import type { DictionaryItem } from './types';
+import { LumalPage, LumalSchemaTable } from '@lumal/core/components';
+import { LumalIcon } from '@lumal/icons-vue';
+import { ElAlert, ElButton, ElColorPicker, ElOption, ElSelect } from 'element-plus';
+import { computed, shallowRef, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { permissionStore, service } from '../../../app/services/session';
+import BaseEntityDialog from '../../../shared/components/BaseEntityDialog.vue';
+import { useAsyncData } from '../../../shared/composables/use-async-data';
+import { useEntityEditor } from '../../../shared/composables/use-entity-editor';
+import { statusOptions } from '../../../shared/status';
+import { createDictionaryService, dictionaryItemInput, parseItem } from './api';
+import { dictionaryStore } from './cache';
+
+/***********************分类筛选与实时字典缓存*********************/
+const route = useRoute();
+const typeCode = shallowRef(typeof route.query.typeCode === 'string' ? route.query.typeCode : '');
+const api = createDictionaryService(service, () => dictionaryStore.clearDictionary());
+const types = useAsyncData(api.types, []);
+const state = useAsyncData(() => api.items(typeCode.value), [] as DictionaryItem[]);
+const can = (action: string) => permissionStore.hasPermission(`system:dict:${action}`);
+watch(
+  () => route.query.typeCode,
+  (value) => {
+    typeCode.value = typeof value === 'string' ? value : '';
+  },
+);
+watch(typeCode, () => {
+  void state.reload();
+});
+const editor = useEntityEditor<DictionaryItem, ReturnType<typeof dictionaryItemInput>>({
+  create: api.createItem,
+  update: api.updateItem,
+  remove: api.removeItem,
+  toInput: dictionaryItemInput,
+  reload: state.load,
+});
+const columns: SchemaTableColumn<DictionaryItem>[] = [
+  { field: 'label', label: '显示名称', minWidth: 160 },
+  { field: 'value', label: '字典值', minWidth: 150 },
+  { field: 'typeCode', label: '分类', minWidth: 150 },
+  { field: 'color', label: '颜色', width: 120 },
+  { field: 'order', label: '排序', width: 80 },
+  { field: 'status', label: '状态', options: statusOptions, width: 100 },
+];
+const schemas = computed<SchemaFormItem[]>(() => [
+  {
+    field: 'typeCode',
+    label: '分类',
+    component: 'select',
+    required: true,
+    options: types.data.value.map((row) => ({ label: row.name, value: row.code })),
+  },
+  { field: 'label', label: '显示名称', required: true },
+  { field: 'value', label: '字典值', required: true },
+  { field: 'color', label: '颜色' },
+  { field: 'order', label: '排序', component: 'number', defaultValue: 0 },
+  { field: 'status', label: '状态', component: 'select', options: statusOptions, defaultValue: 'enabled' },
+]);
+</script>
+
+<template>
+  <LumalPage class="lumal-admin-page" title="字典项管理" no-padding>
+    <ElAlert
+      v-if="editor.error.value || types.error.value"
+      :title="editor.error.value || types.error.value"
+      type="error"
+      :closable="false"
+    >
+      <ElButton v-if="types.error.value" link @click="types.reload"> 重试分类加载 </ElButton>
+    </ElAlert>
+    <LumalSchemaTable
+      :rows="state.data.value"
+      :columns="columns"
+      :loading="state.loading.value"
+      :error="state.error.value"
+      :action-width="160"
+      @retry="state.reload"
+    >
+      <template #toolbar>
+        <ElSelect v-model="typeCode" clearable aria-label="字典分类" placeholder="全部分类" style="width: 240px">
+          <ElOption v-for="type in types.data.value" :key="type.id" :label="type.name" :value="type.code" />
+        </ElSelect>
+        <ElButton
+          v-if="can('create')"
+          type="primary"
+          :disabled="!!types.error.value || !types.data.value.length"
+          @click="
+            editor.openCreate({
+              typeCode: typeCode || types.data.value[0]?.code,
+              status: 'enabled',
+              order: 0,
+              color: '',
+            })
+          "
+        >
+          新增字典项
+        </ElButton>
+      </template>
+      <template #toolbar-tools>
+        <ElButton title="重新加载" aria-label="重新加载" @click="state.reload">
+          <LumalIcon name="lumal:refresh" />
+        </ElButton>
+      </template>
+      <template #table-color="{ value }">
+        <span :style="{ color: String(value || 'inherit') }">{{ value || '-' }}</span>
+      </template>
+      <template #actions="{ row }">
+        <ElButton v-if="can('update')" link @click="editor.openEdit(parseItem(row))"> 编辑 </ElButton>
+        <ElButton
+          v-if="can('delete')"
+          link
+          type="danger"
+          :disabled="editor.saving.value"
+          @click="editor.remove(parseItem(row))"
+        >
+          删除
+        </ElButton>
+      </template>
+    </LumalSchemaTable>
+    <BaseEntityDialog
+      v-model:visible="editor.visible.value"
+      v-model:model="editor.model.value"
+      :title="editor.editing.value ? '编辑字典项' : '新增字典项'"
+      :schemas="schemas"
+      :editing="!!editor.editing.value"
+      :saving="editor.saving.value"
+      :error="editor.error.value"
+      @submit="editor.submit"
+    >
+      <template #field-color="{ value }">
+        <ElColorPicker
+          :model-value="String(value || '')"
+          @update:model-value="editor.model.value = { ...editor.model.value, color: $event || '' }"
+        />
+      </template>
+    </BaseEntityDialog>
+  </LumalPage>
+</template>

package/templates/features/system/src/modules/system/dictionary/DictionaryTypeView.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import type { SchemaFormItem, SchemaTableColumn } from '@lumal/core/components';
+import type { DictionaryType } from './types';
+import { LumalPage, LumalSchemaTable } from '@lumal/core/components';
+import { LumalIcon } from '@lumal/icons-vue';
+import { ElAlert, ElButton, ElInput } from 'element-plus';
+import { computed, shallowRef } from 'vue';
+import { useRouter } from 'vue-router';
+import { permissionStore, service } from '../../../app/services/session';
+import BaseEntityDialog from '../../../shared/components/BaseEntityDialog.vue';
+import { useAsyncData } from '../../../shared/composables/use-async-data';
+import { useEntityEditor } from '../../../shared/composables/use-entity-editor';
+import { statusOptions } from '../../../shared/status';
+import { createDictionaryService, dictionaryTypeInput, parseType } from './api';
+import { dictionaryStore } from './cache';
+
+/***********************字典分类与关联项入口*********************/
+const api = createDictionaryService(service, () => dictionaryStore.clearDictionary());
+const state = useAsyncData(api.types, [] as DictionaryType[]);
+const keyword = shallowRef('');
+const router = useRouter();
+const can = (action: string) => permissionStore.hasPermission(`system:dict:${action}`);
+const displayed = computed(() => state.data.value.filter((row) => `${row.name} ${row.code}`.includes(keyword.value)));
+const editor = useEntityEditor<DictionaryType, ReturnType<typeof dictionaryTypeInput>>({
+  create: api.createType,
+  update: api.updateType,
+  remove: api.removeType,
+  toInput: dictionaryTypeInput,
+  reload: state.load,
+  removeMessage: (row) => `删除分类「${row.name}」及其所有字典项？`,
+});
+const columns: SchemaTableColumn<DictionaryType>[] = [
+  { field: 'name', label: '字典名称', minWidth: 160 },
+  { field: 'code', label: '编码', minWidth: 150 },
+  { field: 'status', label: '状态', options: statusOptions, width: 100 },
+  { field: 'description', label: '说明', minWidth: 200 },
+];
+const schemas: SchemaFormItem[] = [
+  { field: 'name', label: '字典名称', required: true },
+  {
+    field: 'code',
+    label: '编码',
+    required: true,
+    editDisabled: true,
+    rules: [{ pattern: /^[a-z][\w-]*$/, message: '使用字母开头的编码' }],
+  },
+  { field: 'status', label: '状态', component: 'select', options: statusOptions, defaultValue: 'enabled' },
+  { field: 'description', label: '说明', component: 'textarea', span: 24 },
+];
+</script>
+
+<template>
+  <LumalPage class="lumal-admin-page" title="字典分类" no-padding>
+    <ElAlert v-if="editor.error.value" :title="editor.error.value" type="error" :closable="false" />
+    <LumalSchemaTable
+      :rows="displayed"
+      :columns="columns"
+      :loading="state.loading.value"
+      :error="state.error.value"
+      :action-width="240"
+      @retry="state.reload"
+    >
+      <template #toolbar>
+        <ElInput
+          v-model="keyword"
+          aria-label="搜索字典分类"
+          placeholder="搜索名称或编码"
+          clearable
+          style="max-width: 260px"
+        />
+        <ElButton v-if="can('create')" type="primary" @click="editor.openCreate({ status: 'enabled' })">
+          新增分类
+        </ElButton>
+      </template>
+      <template #toolbar-tools>
+        <ElButton title="重新加载" aria-label="重新加载" @click="state.reload">
+          <LumalIcon name="lumal:refresh" />
+        </ElButton>
+      </template>
+      <template #actions="{ row }">
+        <ElButton link @click="router.push({ path: '/system/dictionaries/items', query: { typeCode: row.code } })">
+          字典项
+        </ElButton>
+        <ElButton v-if="can('update')" link @click="editor.openEdit(parseType(row))"> 编辑 </ElButton>
+        <ElButton
+          v-if="can('delete')"
+          link
+          type="danger"
+          :disabled="editor.saving.value"
+          @click="editor.remove(parseType(row))"
+        >
+          删除
+        </ElButton>
+      </template>
+    </LumalSchemaTable>
+    <BaseEntityDialog
+      v-model:visible="editor.visible.value"
+      v-model:model="editor.model.value"
+      :title="editor.editing.value ? '编辑分类' : '新增分类'"
+      :schemas="schemas"
+      :editing="!!editor.editing.value"
+      :saving="editor.saving.value"
+      :error="editor.error.value"
+      @submit="editor.submit"
+    />
+  </LumalPage>
+</template>