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

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

@@ -0,0 +1,23 @@
+import type { AppModule } from '../../../app/module';
+
+export const menus: AppModule['menus'] = [
+  {
+    path: '/system/menus',
+    name: 'SystemMenus',
+    component: 'system/menus',
+    meta: { title: '菜单管理', authority: ['system:menu:list'], keepAlive: true, order: 3 },
+  },
+];
+export const views: AppModule['views'] = { 'system/menus': () => import('./MenuView.vue') };
+export const permissions: AppModule['permissions'] = [
+  {
+    id: 'system-menu',
+    label: '菜单管理',
+    children: [
+      { id: 'system:menu:list', label: '查询菜单', permission: 'system:menu:list' },
+      { id: 'system:menu:create', label: '新增节点', permission: 'system:menu:create' },
+      { id: 'system:menu:update', label: '修改节点', permission: 'system:menu:update' },
+      { id: 'system:menu:delete', label: '删除节点', permission: 'system:menu:delete' },
+    ],
+  },
+];

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

@@ -0,0 +1,18 @@
+export type MenuType = 'directory' | 'menu' | 'button' | 'external' | 'embedded';
+export interface MenuInput {
+  parentId: string;
+  type: MenuType;
+  title: string;
+  path: string;
+  name: string;
+  component: string;
+  icon: string;
+  order: number;
+  hidden: boolean;
+  permissions: string[];
+  externalLink: string;
+}
+export interface Menu extends MenuInput {
+  id: string;
+  children?: Menu[];
+}

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

@@ -0,0 +1,22 @@
+import type { AppModule } from '../../app/module';
+import { assembleModules } from '../../app/module';
+import * as config from './config/routes';
+import * as dictionary from './dictionary/routes';
+import * as menu from './menu/routes';
+import * as organization from './organization/routes';
+import * as role from './role/routes';
+import * as user from './user/routes';
+
+const children = assembleModules([user, role, menu, organization, dictionary, config]);
+export const menus: AppModule['menus'] = [
+  {
+    path: '/system',
+    name: 'System',
+    meta: { title: '系统管理', icon: 'lumal:settings', order: 20 },
+    children: children.menus,
+  },
+];
+export const views = children.views;
+export const permissions: AppModule['permissions'] = [
+  { id: 'system', label: '系统管理', children: children.permissions },
+];

package/templates/features/system/src/modules/system/organization/OrganizationView.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import type { SchemaFormItem, SchemaTableColumn } from '@lumal/core/components';
+import type { Organization } 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 { 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 { excludedDescendants, flattenTree } from '../../../shared/tree';
+import { createOrganizationService, organizationInput, parseOrganization } from './api';
+
+/***********************机构树、关联限制与筛选*********************/
+const api = createOrganizationService(service);
+const state = useAsyncData(api.list, [] as Organization[]);
+const keyword = shallowRef('');
+const can = (action: string) => permissionStore.hasPermission(`system:organization:${action}`);
+const editor = useEntityEditor<Organization, ReturnType<typeof organizationInput>>({
+  create: api.create,
+  update: api.update,
+  remove: api.remove,
+  toInput: organizationInput,
+  reload: state.load,
+});
+function filter(items: Organization[]): Organization[] {
+  return items.flatMap((item) => {
+    const children = filter(item.children ?? []);
+    return !keyword.value || `${item.name} ${item.code}`.includes(keyword.value) || children.length
+      ? [{ ...item, children }]
+      : [];
+  });
+}
+const displayed = computed(() => filter(state.data.value));
+const columns: SchemaTableColumn<Organization>[] = [
+  { field: 'name', label: '机构名称', minWidth: 220 },
+  { field: 'code', label: '编码', minWidth: 130 },
+  { field: 'leader', label: '负责人', minWidth: 100 },
+  { field: 'phone', label: '联系电话', minWidth: 140 },
+  { field: 'status', label: '状态', options: statusOptions, width: 90 },
+  { field: 'userCount', label: '关联用户', width: 100, formatter: (value) => value ?? '-' },
+  { field: 'order', label: '排序', width: 80 },
+];
+const schemas = computed<SchemaFormItem[]>(() => {
+  const all = flattenTree(state.data.value);
+  const excluded = excludedDescendants(all, editor.editing.value?.id);
+  return [
+    { field: 'name', label: '机构名称', required: true },
+    { field: 'code', label: '机构编码', required: true },
+    {
+      field: 'parentId',
+      label: '上级机构',
+      component: 'select',
+      options: [
+        { label: '无', value: '' },
+        ...all.filter((row) => !excluded.has(row.id)).map((row) => ({ label: row.name, value: row.id })),
+      ],
+    },
+    { field: 'leader', label: '负责人' },
+    { field: 'phone', label: '联系电话' },
+    { field: 'email', label: '邮箱', rules: [{ type: 'email', message: '邮箱格式错误' }] },
+    { 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" :title="editor.error.value" type="error" :closable="false" />
+    <LumalSchemaTable
+      :columns="columns"
+      :rows="displayed"
+      :loading="state.loading.value"
+      :error="state.error.value"
+      default-expand-all
+      :action-width="240"
+      @retry="state.reload"
+    >
+      <template #toolbar>
+        <ElInput
+          v-model="keyword"
+          clearable
+          placeholder="搜索机构名称或编码"
+          aria-label="搜索机构"
+          style="max-width: 260px"
+        />
+        <ElButton
+          v-if="can('create')"
+          type="primary"
+          @click="editor.openCreate({ parentId: '', status: 'enabled', order: 0 })"
+        >
+          新增机构
+        </ElButton>
+      </template>
+      <template #toolbar-tools>
+        <ElButton title="重新加载" aria-label="重新加载" @click="state.reload">
+          <LumalIcon name="lumal:refresh" />
+        </ElButton>
+      </template>
+      <template #actions="{ row }">
+        <ElButton
+          v-if="can('create')"
+          link
+          @click="editor.openCreate({ parentId: row.id, status: 'enabled', order: 0 })"
+        >
+          新增子机构
+        </ElButton>
+        <ElButton v-if="can('update')" link @click="editor.openEdit(parseOrganization(row))"> 编辑 </ElButton>
+        <ElButton
+          v-if="can('delete')"
+          link
+          type="danger"
+          :disabled="editor.saving.value"
+          @click="editor.remove(parseOrganization(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>

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

@@ -0,0 +1,38 @@
+import type { SchemaFormModel } from '@lumal/core/components';
+import type { BusinessTransport } from '../../../app/services/contracts';
+import type { Organization, OrganizationInput } from './types';
+import { formStatus, integer, object, rows, text } from '../../../shared/api';
+
+export function organizationInput(model: SchemaFormModel): OrganizationInput {
+  return {
+    name: text(model.name, '机构名称', true),
+    code: text(model.code, '机构编码', true),
+    parentId: text(model.parentId, '父机构'),
+    leader: text(model.leader, '负责人'),
+    phone: text(model.phone, '联系电话'),
+    email: text(model.email, '邮箱'),
+    order: integer(model.order ?? 0),
+    status: formStatus(model),
+  };
+}
+export function parseOrganization(value: unknown): Organization {
+  const raw = object(value);
+  return {
+    ...organizationInput(raw),
+    id: text(raw.id, '机构 ID', true),
+    children: raw.children === undefined ? undefined : rows(raw.children, parseOrganization),
+    userCount: typeof raw.userCount === 'number' ? raw.userCount : undefined,
+  };
+}
+export function createOrganizationService(transport: BusinessTransport) {
+  return {
+    list: async () => rows(await transport.request('GET', '/system/organizations'), parseOrganization),
+    create: async (input: OrganizationInput) =>
+      parseOrganization(await transport.request('POST', '/system/organizations', { body: input })),
+    update: async (id: string, input: OrganizationInput) =>
+      parseOrganization(
+        await transport.request('PUT', `/system/organizations/${encodeURIComponent(id)}`, { body: input }),
+      ),
+    remove: (id: string) => transport.request<void>('DELETE', `/system/organizations/${encodeURIComponent(id)}`),
+  };
+}

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

@@ -0,0 +1,23 @@
+import type { AppModule } from '../../../app/module';
+
+export const menus: AppModule['menus'] = [
+  {
+    path: '/system/organizations',
+    name: 'SystemOrganizations',
+    component: 'system/organizations',
+    meta: { title: '机构管理', authority: ['system:organization:list'], keepAlive: true, order: 4 },
+  },
+];
+export const views: AppModule['views'] = { 'system/organizations': () => import('./OrganizationView.vue') };
+export const permissions: AppModule['permissions'] = [
+  {
+    id: 'system-organization',
+    label: '机构管理',
+    children: [
+      { id: 'system:organization:list', label: '查询机构', permission: 'system:organization:list' },
+      { id: 'system:organization:create', label: '新增机构', permission: 'system:organization:create' },
+      { id: 'system:organization:update', label: '修改机构', permission: 'system:organization:update' },
+      { id: 'system:organization:delete', label: '删除机构', permission: 'system:organization:delete' },
+    ],
+  },
+];

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

@@ -0,0 +1,17 @@
+import type { Status } from '../../../shared/api';
+
+export interface OrganizationInput {
+  name: string;
+  code: string;
+  parentId: string;
+  leader: string;
+  phone: string;
+  email: string;
+  order: number;
+  status: Status;
+}
+export interface Organization extends OrganizationInput {
+  id: string;
+  children?: Organization[];
+  userCount?: number;
+}

package/templates/features/system/src/modules/system/role/RoleView.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import type { CrudDataSource, SchemaFormItem, SchemaTableColumn } from '@lumal/core/components';
+import type { Role } from './types';
+import { LumalCrudTable, LumalPage } from '@lumal/core/components';
+import { ElAlert, ElButton } from 'element-plus';
+import { shallowRef, useTemplateRef } from 'vue';
+import { permissionStore, service } from '../../../app/services/session';
+import { statusOptions } from '../../../shared/status';
+import { createRoleService, parseRole, roleInput } from './api';
+import RoleAuthorizationDialog from './components/RoleAuthorizationDialog.vue';
+
+/***********************角色资料与授权分离*********************/
+const api = createRoleService(service);
+const table = useTemplateRef<InstanceType<typeof LumalCrudTable>>('table');
+const authorizing = shallowRef<Role>();
+const authorizationVisible = shallowRef(false);
+const failure = shallowRef('');
+const can = (action: string) => permissionStore.hasPermission(`system:role:${action}`);
+const dataSource: CrudDataSource = {
+  fetch: (input) => api.list(input),
+  create: (model) => api.create(roleInput(model)),
+  update: (row, model) => api.update(parseRole(row).id, roleInput(model)),
+  remove: (row) => api.remove(parseRole(row).id),
+};
+const columns: SchemaTableColumn[] = [
+  { field: 'name', label: '角色名称', minWidth: 160 },
+  { field: 'code', label: '角色编码', minWidth: 140 },
+  { 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',
+    disabled: ({ model }) => model.builtIn === true,
+  },
+  { field: 'description', label: '说明', component: 'textarea', span: 24 },
+];
+const querySchemas: SchemaFormItem[] = [
+  { field: 'keyword', label: '关键词' },
+  { field: 'status', label: '状态', component: 'select', options: statusOptions },
+];
+function authorize(role: Role): void {
+  authorizing.value = role;
+  authorizationVisible.value = true;
+}
+</script>
+
+<template>
+  <LumalPage class="lumal-admin-page" title="角色管理" no-padding>
+    <ElAlert v-if="failure" :title="failure" type="error" :closable="false" />
+    <LumalCrudTable
+      ref="table"
+      :data-source="dataSource"
+      :form-schemas="schemas"
+      :table="{ columns, rowKey: 'id', actionWidth: 260 }"
+      :query="{ schemas: querySchemas, columns: 2, collapsible: true }"
+      :toolbar="{ create: can('create'), batchDelete: false }"
+      :actions="{ view: false, edit: false, remove: false }"
+      @operation-error="failure = $event instanceof Error ? $event.message : String($event)"
+    >
+      <template #row-actions="{ row }">
+        <ElButton link @click="table?.openView(row)"> 查看 </ElButton>
+        <ElButton v-if="can('update')" link @click="table?.openEdit(row)"> 编辑 </ElButton>
+        <ElButton v-if="can('authorize')" link @click="authorize(parseRole(row))"> 授权 </ElButton>
+        <ElButton
+          v-if="can('delete')"
+          link
+          type="danger"
+          :disabled="row.builtIn === true"
+          @click="table?.removeRow(row)"
+        >
+          删除
+        </ElButton>
+      </template>
+    </LumalCrudTable>
+    <RoleAuthorizationDialog v-if="authorizing" v-model="authorizationVisible" :role="authorizing" />
+  </LumalPage>
+</template>

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

@@ -0,0 +1,40 @@
+import type { SchemaFormModel } from '@lumal/core/components';
+import type { ApplicationService } from '../../../app/services/contracts';
+import type { PageInput } from '../../../shared/api';
+import type { Role, RoleInput } from './types';
+import { formStatus, object, stringArray, text } from '../../../shared/api';
+import { parsePermissionTree } from './permission-tree';
+
+export function roleInput(model: SchemaFormModel): RoleInput {
+  return {
+    code: text(model.code, '角色编码', true),
+    name: text(model.name, '角色名称', true),
+    description: text(model.description, '说明'),
+    status: formStatus(model),
+  };
+}
+export function parseRole(value: unknown): Role {
+  const raw = object(value);
+  return { ...roleInput(raw), id: text(raw.id, '角色 ID', true), builtIn: raw.builtIn === true };
+}
+export function createRoleService(transport: Pick<ApplicationService, 'list' | 'request'>) {
+  return {
+    async list(input: PageInput) {
+      const page = await transport.list('roles', { ...input, query: { ...input.query } });
+      return { items: page.items.map(parseRole), total: page.total };
+    },
+    create: async (input: RoleInput) => parseRole(await transport.request('POST', '/system/roles', { body: input })),
+    update: async (id: string, input: RoleInput) =>
+      parseRole(await transport.request('PUT', `/system/roles/${encodeURIComponent(id)}`, { body: input })),
+    remove: (id: string) => transport.request<void>('DELETE', `/system/roles/${encodeURIComponent(id)}`),
+    tree: async () => parsePermissionTree(await transport.request('GET', '/system/permissions/tree')),
+    permissions: async (code: string) =>
+      stringArray(await transport.request('GET', `/system/roles/${encodeURIComponent(code)}/permissions`)),
+    authorize: async (code: string, permissions: string[]) =>
+      stringArray(
+        await transport.request('PUT', `/system/roles/${encodeURIComponent(code)}/permissions`, {
+          body: { permissions },
+        }),
+      ),
+  };
+}

package/templates/features/system/src/modules/system/role/components/RoleAuthorizationDialog.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import type { PermissionNode } from '../../../../app/module';
+import type { Role } from '../types';
+import { ElAlert, ElButton, ElDialog, ElTree } from 'element-plus';
+import { nextTick, shallowRef, useTemplateRef, watch } from 'vue';
+import { collectPermissions } from '../../../../app/module';
+import { application, service } from '../../../../app/services/session';
+import { createRoleService } from '../api';
+
+/***********************授权树加载与回显*********************/
+const props = defineProps<{ role: Role }>();
+const visible = defineModel<boolean>({ required: true });
+const api = createRoleService(service);
+const tree = useTemplateRef<InstanceType<typeof ElTree>>('tree');
+const nodes = shallowRef<PermissionNode[]>([]);
+const loading = shallowRef(false);
+const saving = shallowRef(false);
+const saved = shallowRef(false);
+const failure = shallowRef('');
+let generation = 0;
+function flatten(items: PermissionNode[]): PermissionNode[] {
+  return items.flatMap((item) => [item, ...flatten(item.children ?? [])]);
+}
+async function load(): Promise<void> {
+  const version = ++generation;
+  loading.value = true;
+  failure.value = '';
+  saved.value = false;
+  try {
+    const [next, granted] = await Promise.all([api.tree(), api.permissions(props.role.code)]);
+    if (version !== generation || !visible.value) return;
+    nodes.value = next;
+    await nextTick();
+    tree.value?.setCheckedKeys(
+      flatten(next)
+        .filter((node) => node.permission && granted.includes(node.permission))
+        .map((node) => node.id),
+    );
+  } catch (reason) {
+    if (version === generation) failure.value = reason instanceof Error ? reason.message : '授权加载失败';
+  } finally {
+    if (version === generation) loading.value = false;
+  }
+}
+watch(
+  visible,
+  (open) => {
+    if (open) void load();
+    else generation += 1;
+  },
+  { immediate: true },
+);
+
+/***********************保存与部分成功恢复*********************/
+async function save(): Promise<void> {
+  if (saving.value || loading.value || !tree.value) return;
+  saving.value = true;
+  failure.value = '';
+  try {
+    if (!saved.value) {
+      const keys = new Set([...tree.value.getCheckedKeys(false), ...tree.value.getHalfCheckedKeys()].map(String));
+      const known = new Set(collectPermissions(nodes.value));
+      const permissions = flatten(nodes.value)
+        .filter((node) => keys.has(node.id) && node.permission && known.has(node.permission))
+        .map((node) => node.permission!);
+      await api.authorize(props.role.code, permissions);
+      saved.value = true;
+    }
+    // 授权写入和当前账号权限重读不是事务，失败时只重试重读。
+    await application.refreshAccess();
+    visible.value = false;
+  } catch (reason) {
+    failure.value = `${saved.value ? '授权已保存，但会话刷新失败。可重试刷新：' : ''}${reason instanceof Error ? reason.message : '授权保存失败'}`;
+  } finally {
+    saving.value = false;
+  }
+}
+</script>
+
+<template>
+  <ElDialog
+    v-model="visible"
+    :title="`角色授权：${role.name}`"
+    width="min(600px, 94vw)"
+    append-to-body
+    :close-on-click-modal="!saving"
+    :close-on-press-escape="!saving"
+  >
+    <ElAlert v-if="failure" :title="failure" type="error" :closable="false" role="alert" />
+    <ElButton :disabled="loading || saving" @click="load"> 重新读取 </ElButton>
+    <ElTree
+      ref="tree"
+      :data="nodes"
+      node-key="id"
+      show-checkbox
+      default-expand-all
+      :props="{
+        label: 'label',
+        children: 'children',
+        disabled: () => loading || saving || saved || role.code === 'admin',
+      }"
+    />
+    <template #footer>
+      <ElButton :disabled="saving" @click="visible = false"> 关闭 </ElButton>
+      <ElButton type="primary" :loading="saving" :disabled="loading || !nodes.length" @click="save">
+        {{ saved ? '重试刷新' : '保存授权' }}
+      </ElButton>
+    </template>
+  </ElDialog>
+</template>

package/templates/features/system/src/modules/system/role/permission-tree.ts

@@ -0,0 +1,31 @@
+import type { PermissionNode } from '../../../app/module';
+import { object, text } from '../../../shared/api';
+
+/** 将非叶节点的访问权限拆成独立叶子，避免回显父权限时误授予全部按钮权限。 */
+export function parsePermissionTree(value: unknown): PermissionNode[] {
+  const ids = new Set<string>();
+  const seen = new WeakSet<object>();
+  let count = 0;
+  function visit(value: unknown, depth: number): PermissionNode[] {
+    if (!Array.isArray(value) || depth > 30) throw new Error('权限树必须是有限层级的数组');
+    return value.map((item) => {
+      const raw = object(item);
+      const id = text(raw.id, '权限节点 ID', true);
+      if (++count > 1000 || seen.has(raw) || ids.has(id)) throw new Error('权限树存在循环、重复节点或超过数量限制');
+      ids.add(id);
+      seen.add(raw);
+      const label = text(raw.label, '权限标题', true);
+      const permission = raw.permission === undefined ? undefined : text(raw.permission, '权限码', true);
+      const children = raw.children === undefined ? [] : visit(raw.children, depth + 1);
+      if (!children.length) return { id: `permission:${id}`, label, permission };
+      return {
+        id: `group:${id}`,
+        label,
+        children: permission
+          ? [{ id: `permission:${id}`, label: `${label}（访问）`, permission }, ...children]
+          : children,
+      };
+    });
+  }
+  return visit(value, 0);
+}

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

@@ -0,0 +1,24 @@
+import type { AppModule } from '../../../app/module';
+
+export const menus: AppModule['menus'] = [
+  {
+    path: '/system/roles',
+    name: 'SystemRoles',
+    component: 'system/roles',
+    meta: { title: '角色管理', authority: ['system:role:list'], keepAlive: true, order: 2 },
+  },
+];
+export const views: AppModule['views'] = { 'system/roles': () => import('./RoleView.vue') };
+export const permissions: AppModule['permissions'] = [
+  {
+    id: 'system-role',
+    label: '角色管理',
+    children: [
+      { id: 'system:role:list', label: '查询角色', permission: 'system:role:list' },
+      { id: 'system:role:create', label: '新增角色', permission: 'system:role:create' },
+      { id: 'system:role:update', label: '修改角色', permission: 'system:role:update' },
+      { id: 'system:role:delete', label: '删除角色', permission: 'system:role:delete' },
+      { id: 'system:role:authorize', label: '角色授权', permission: 'system:role:authorize' },
+    ],
+  },
+];

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

@@ -0,0 +1,12 @@
+import type { Status } from '../../../shared/api';
+
+export interface RoleInput {
+  code: string;
+  name: string;
+  description: string;
+  status: Status;
+}
+export interface Role extends RoleInput {
+  id: string;
+  builtIn: boolean;
+}