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

package/templates/vben-compatible/src/modules/vben-migration/components/VbenUsers.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import type { ApplicationService, DataRow } from '../../../app/services/contracts';
+import { AccessControl, useAccess, useVbenForm, useVbenVxeGrid } from '@lumal/vben-compat/v5';
+import { ElButton, ElDialog, ElMessageBox } from 'element-plus';
+import { nextTick, shallowRef } from 'vue';
+
+/***********************业务服务与权限边界*********************/
+const props = defineProps<{ service: Pick<ApplicationService, 'list' | 'save' | 'remove'> }>();
+const { hasAccessByCodes } = useAccess();
+const visible = shallowRef(false);
+const editingId = shallowRef<string>();
+const failure = shallowRef('');
+function rowId(row: DataRow): string {
+  if (typeof row.id !== 'string' && typeof row.id !== 'number') throw new Error('用户缺少 id');
+  return String(row.id);
+}
+
+/***********************5.7.0 查询分页与列插槽迁移*********************/
+const [Grid, gridApi] = useVbenVxeGrid({
+  tableTitle: '用户迁移示例',
+  formOptions: { schema: [{ component: 'Input', fieldName: 'keyword', label: '关键词' }], submitOnEnter: true },
+  gridOptions: {
+    columns: [
+      { type: 'checkbox', width: 48 },
+      { type: 'seq', title: '序号', width: 64 },
+      { field: 'username', title: '用户名', sortable: true },
+      { field: 'nickname', title: '昵称' },
+      { field: 'status', title: '状态' },
+      { field: 'id', title: '操作', slots: { default: 'operation' } },
+    ],
+    rowConfig: { keyField: 'id' },
+    pagerConfig: { pageSize: 10 },
+    proxyConfig: {
+      ajax: {
+        query: ({ page, sort }, formValues) =>
+          props.service.list('users', {
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            query: { ...formValues, sortField: sort.field, sortOrder: sort.order },
+          }),
+      },
+    },
+    toolbarConfig: { custom: true, refresh: true, search: true },
+  },
+});
+
+/***********************新增编辑弹窗与失败恢复*********************/
+const [Form, formApi] = useVbenForm({
+  showDefaultActions: false,
+  schema: [
+    { component: 'Input', fieldName: 'username', label: '用户名', rules: 'required' },
+    { component: 'Input', fieldName: 'nickname', label: '昵称', rules: 'required' },
+    {
+      component: 'Select',
+      fieldName: 'roles',
+      label: '角色',
+      defaultValue: ['guest'],
+      componentProps: {
+        multiple: true,
+        options: [
+          { label: '访客', value: 'guest' },
+          { label: '管理员', value: 'admin' },
+        ],
+      },
+    },
+    {
+      component: 'Select',
+      fieldName: 'status',
+      label: '状态',
+      defaultValue: 'enabled',
+      componentProps: {
+        options: [
+          { label: '启用', value: 'enabled' },
+          { label: '停用', value: 'disabled' },
+        ],
+      },
+    },
+  ],
+});
+const saving = shallowRef(false);
+async function open(row?: DataRow): Promise<void> {
+  editingId.value = row ? rowId(row) : undefined;
+  failure.value = '';
+  visible.value = true;
+  await nextTick();
+  await formApi.resetForm();
+  if (row) await formApi.setValues(row);
+}
+async function save(): Promise<void> {
+  if (saving.value || !(await formApi.validate()).valid) return;
+  saving.value = true;
+  try {
+    await props.service.save('users', await formApi.getValues(), editingId.value);
+    visible.value = false;
+    await gridApi.query();
+  } catch (error) {
+    failure.value = error instanceof Error ? error.message : String(error);
+  } finally {
+    saving.value = false;
+  }
+}
+async function remove(row: DataRow): Promise<void> {
+  try {
+    await ElMessageBox.confirm(`删除 ${String(row.username)}？`, '删除确认');
+  } catch {
+    return; // Element Plus 的取消和关闭都表示不执行删除。
+  }
+  try {
+    await props.service.remove('users', rowId(row));
+    await gridApi.query();
+  } catch (error) {
+    failure.value = error instanceof Error ? error.message : String(error);
+  }
+}
+defineExpose({ gridApi });
+</script>
+
+<template>
+  <section>
+    <p v-if="failure" role="alert">
+      {{ failure }}
+    </p>
+    <Grid>
+      <template #toolbar-actions>
+        <AccessControl type="code" :codes="['system:user:create']">
+          <ElButton type="primary" @click="open()"> 新增用户 </ElButton>
+        </AccessControl>
+      </template>
+      <template #operation="{ row }">
+        <ElButton v-if="hasAccessByCodes(['system:user:update'])" link @click="open(row)"> 编辑 </ElButton>
+        <ElButton v-if="hasAccessByCodes(['system:user:delete'])" link type="danger" @click="remove(row)">
+          删除
+        </ElButton>
+      </template>
+    </Grid>
+    <ElDialog v-model="visible" :title="editingId ? '编辑用户' : '新增用户'" destroy-on-close width="min(640px, 92vw)">
+      <Form />
+      <template #footer>
+        <ElButton @click="visible = false"> 取消 </ElButton>
+        <ElButton type="primary" :loading="saving" @click="save"> 保存 </ElButton>
+      </template>
+    </ElDialog>
+  </section>
+</template>

package/templates/vben-compatible/src/modules/vben-migration/local.ts

@@ -0,0 +1,68 @@
+import type { LocalBusinessContext, LocalHandler } from '../../app/services/local-contracts';
+import { appConfig } from '../../app.config';
+import { object, stringArray } from '../../app/menu-policy';
+import { status } from '../../shared/api';
+
+// 仅迁移示例独立启用时使用，标准系统模块启用后由系统用户服务接管。
+export function createLocalHandler({ db, user, assertPermission }: LocalBusinessContext): LocalHandler {
+  return {
+    handles: (path) => !appConfig.features.includes('system') && /^\/system\/users(?:\/[^/]+)?$/.test(path),
+    async request(method, path, input) {
+      user();
+      if (!['GET', 'POST', 'PUT', 'DELETE'].includes(method)) throw new Error('不支持的迁移用户操作');
+      const id = path.split('/')[3];
+      assertPermission(
+        `system:user:${method === 'GET' ? 'list' : method === 'POST' ? 'create' : method === 'DELETE' ? 'delete' : 'update'}`,
+      );
+      const rows = db.read('users');
+      if (method === 'GET') {
+        const query = input.query ?? {};
+        const filtered = rows.filter((row) => !query.keyword || String(row.username).includes(String(query.keyword)));
+        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: filtered.slice((page - 1) * size, page * size).map(({ password: _password, ...row }) => row),
+          total: filtered.length,
+        };
+      }
+      if (id === 'admin') throw new Error('不能修改或删除内置管理员');
+      const previous = rows.find((row) => row.id === id);
+      if (id && !previous) throw new Error('用户不存在');
+      if (method === 'DELETE') {
+        db.write(
+          'users',
+          rows.filter((row) => row.id !== id),
+        );
+        return;
+      }
+      const body = object(input.body);
+      const roles = stringArray(body.roles);
+      if (
+        !body.username ||
+        !body.nickname ||
+        !roles.length ||
+        roles.some((code) => !db.read('roles').some((role) => role.code === code && role.status === 'enabled'))
+      )
+        throw new Error('用户资料或角色无效');
+      if (rows.some((row) => row.id !== id && row.username === body.username)) throw new Error('用户名重复');
+      // 只提取允许字段，不能由表单修改密码或注入用户 ID。
+      const next = {
+        organizationId: '',
+        phone: '',
+        createdAt: '',
+        password: 'lumal123',
+        ...previous,
+        username: body.username,
+        nickname: body.nickname,
+        status: status(body.status ?? 'enabled'),
+        roles,
+        id: id ?? crypto.randomUUID(),
+      };
+      db.write('users', id ? rows.map((row) => (row.id === id ? next : row)) : [...rows, next]);
+      const { password: _password, ...result } = next;
+      return result;
+    },
+  };
+}

package/templates/vben-compatible/src/modules/vben-migration/module.ts

@@ -0,0 +1,42 @@
+import type { AppModule } from '../../app/module';
+import { adaptVbenMenus } from '@lumal/vben-compat/v5/router';
+
+// Vben authority 是角色；按钮权限继续由应用 PermissionStore 管理。
+export const menus = adaptVbenMenus([
+  {
+    path: '/migration',
+    name: 'VbenMigration',
+    meta: { title: 'Vben 迁移示例', icon: 'lumal:code', order: 30 },
+    children: [
+      {
+        path: '/migration/form',
+        name: 'VbenForm',
+        component: 'migration/form',
+        meta: { title: 'Vben 表单迁移', keepAlive: true },
+      },
+      {
+        path: '/migration/users',
+        name: 'VbenUsers',
+        component: 'migration/users',
+        meta: { title: 'Vben 业务迁移', authority: ['admin'], keepAlive: true },
+      },
+    ],
+  },
+]);
+export const views: AppModule['views'] = {
+  'migration/form': () => import('./VbenFormView.vue'),
+  'migration/users': () => import('./VbenUsersView.vue'),
+};
+// 独立生成迁移示例时仍使用明确的真实操作权限。
+export const permissions: AppModule['permissions'] = [
+  {
+    id: 'migration-user',
+    label: '迁移用户服务',
+    children: [
+      { id: 'migration-list', label: '查询用户', permission: 'system:user:list' },
+      { id: 'migration-create', label: '创建用户', permission: 'system:user:create' },
+      { id: 'migration-update', label: '编辑用户', permission: 'system:user:update' },
+      { id: 'migration-delete', label: '删除用户', permission: 'system:user:delete' },
+    ],
+  },
+];

package/templates/vue/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vue Application</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/vue/src/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import './styles.css';
+
+createApp(App).mount('#app');

package/templates/vue/src/styles.css

@@ -0,0 +1,19 @@
+:root {
+  font-family: system-ui, sans-serif;
+  color: #1d2530;
+  background: #f4f6f8;
+  font-synthesis: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+button,
+input {
+  font: inherit;
+}

package/templates/vue/tests/app.test.ts.template

@@ -0,0 +1,10 @@
+import { describe, expect, it } from 'vitest';
+import { createSSRApp } from 'vue';
+import { renderToString } from 'vue/server-renderer';
+import App from '../src/App.vue';
+
+describe('应用入口', () => {
+  it('可以渲染首个页面', async () => {
+    expect(await renderToString(createSSRApp(App))).toMatch(/<main|data-viewport-mode/);
+  });
+});

package/templates/vue/vite.config.ts

@@ -0,0 +1,9 @@
+import { fileURLToPath, URL } from 'node:url';
+import vue from '@vitejs/plugin-vue';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } },
+  build: { manifest: true },
+});

package/templates/vue/vitest.config.ts

@@ -0,0 +1,4 @@
+import vue from '@vitejs/plugin-vue';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({ plugins: [vue()], test: { environment: 'node' } });