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

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>

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 },
+        }),
+      ),
+  };
+}