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

package/templates/screen-auth/tests/session.test.ts.template

@@ -0,0 +1,54 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { authenticate, refreshAuth } from '../src/services/auth-adapter';
+import {
+  authenticated,
+  getSessionSignal,
+  getSessionToken,
+  refreshSession,
+  signIn,
+  signOut,
+} from '../src/services/session';
+
+vi.mock('../src/services/auth-adapter', () => ({
+  authEnabled: true,
+  authenticate: vi.fn(),
+  refreshAuth: vi.fn(),
+}));
+afterEach(() => {
+  signOut();
+  vi.resetAllMocks();
+  vi.useRealTimers();
+});
+
+describe('独立 Screen 会话', () => {
+  it('登录、刷新、退出并取消旧请求', async () => {
+    vi.mocked(authenticate).mockResolvedValue({ accessToken: 'fixture', refreshToken: 'refresh' });
+    vi.mocked(refreshAuth).mockResolvedValue({ accessToken: 'renewed' });
+    await signIn('test', 'secret');
+    const previous = getSessionSignal();
+    await refreshSession();
+    expect(getSessionToken()).toBe('renewed');
+    signOut();
+    expect(previous.aborted).toBe(true);
+    expect(authenticated.value).toBe(false);
+  });
+  it('迟到登录不能恢复已退出的身份', async () => {
+    let finish!: (data: { accessToken: string }) => void;
+    vi.mocked(authenticate).mockImplementation(() => new Promise((resolve) => (finish = resolve)));
+    const pending = signIn('old', 'secret');
+    signOut();
+    finish({ accessToken: 'late' });
+    await expect(pending).rejects.toThrow('会话已切换');
+    expect(getSessionToken()).toBeUndefined();
+  });
+  it('登录失败不回退，过期清除凭据', async () => {
+    vi.mocked(authenticate).mockRejectedValueOnce(new Error('401'));
+    await expect(signIn('wrong', 'wrong')).rejects.toThrow('401');
+    expect(authenticated.value).toBe(false);
+    vi.useFakeTimers();
+    vi.mocked(authenticate).mockResolvedValue({ accessToken: 'short', expiresAt: Date.now() + 100 });
+    await signIn('user', 'secret');
+    vi.advanceTimersByTime(101);
+    expect(authenticated.value).toBe(false);
+  });
+});

package/templates/screen-auth-http/src/services/auth-adapter.ts

@@ -0,0 +1,14 @@
+import { parseAuthSession } from '@lumal/core/auth';
+import { publicRequest } from './http';
+
+export const authDemo = false;
+export const authEnabled = true;
+
+export async function authenticate(username: string, password: string, signal: AbortSignal) {
+  return parseAuthSession(await publicRequest.post('/auth/login', { body: { username, password }, signal }));
+}
+
+export async function refreshAuth(refreshToken: string, signal: AbortSignal) {
+  if (!refreshToken) throw new Error('会话已过期，请重新登录');
+  return parseAuthSession(await publicRequest.post('/auth/refresh', { body: { refreshToken }, signal }));
+}

package/templates/screen-auth-http/tests/auth-adapter.test.ts.template

@@ -0,0 +1,17 @@
+import { describe, expect, it, vi } from 'vitest';
+import { authenticate } from '../src/services/auth-adapter';
+import { publicRequest } from '../src/services/http';
+
+vi.mock('../src/services/http', () => ({ publicRequest: { post: vi.fn() } }));
+describe('接口登录契约', () => {
+  it('验证响应，401 不回退演示', async () => {
+    vi.mocked(publicRequest.post).mockResolvedValueOnce({ accessToken: 'fixture' });
+    await expect(authenticate('user', 'secret', new AbortController().signal)).resolves.toEqual({
+      accessToken: 'fixture',
+    });
+    vi.mocked(publicRequest.post).mockRejectedValueOnce(new Error('Unauthorized'));
+    await expect(authenticate('user', 'bad', new AbortController().signal)).rejects.toThrow('Unauthorized');
+    vi.mocked(publicRequest.post).mockResolvedValueOnce({ code: 403 });
+    await expect(authenticate('user', 'bad', new AbortController().signal)).rejects.toThrow();
+  });
+});

package/templates/screen-auth-local-demo/src/services/auth-adapter.ts

@@ -0,0 +1,15 @@
+import type { AuthSessionData } from '@lumal/core/auth';
+
+export const authDemo = true;
+export const authEnabled = import.meta.env.DEV;
+
+export async function authenticate(username: string, password: string, signal: AbortSignal): Promise<AuthSessionData> {
+  signal.throwIfAborted();
+  if (!authEnabled) throw new Error('生产环境禁止 Local Demo 登录');
+  if (username !== 'demo' || password !== 'demo') throw new Error('演示凭据错误');
+  return { accessToken: 'local-demo-only', expiresAt: Date.now() + 3_600_000 };
+}
+
+export async function refreshAuth(_refreshToken: string, _signal: AbortSignal): Promise<AuthSessionData> {
+  throw new Error('Local Demo 过期后请重新登录');
+}

package/templates/screen-auth-local-demo/tests/auth-adapter.test.ts.template

@@ -0,0 +1,18 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+afterEach(() => {
+  vi.unstubAllEnvs();
+  vi.resetModules();
+});
+describe('本地 Demo 安全边界', () => {
+  it('开发显式认证，错误凭据不成功', async () => {
+    const { authenticate } = await import('../src/services/auth-adapter');
+    await expect(authenticate('demo', 'demo', new AbortController().signal)).resolves.toHaveProperty('accessToken');
+    await expect(authenticate('bad', 'bad', new AbortController().signal)).rejects.toThrow('演示凭据');
+  });
+  it('生产禁用，即使知道演示凭据', async () => {
+    vi.stubEnv('DEV', false);
+    const { authenticate } = await import('../src/services/auth-adapter');
+    await expect(authenticate('demo', 'demo', new AbortController().signal)).rejects.toThrow('生产环境禁止');
+  });
+});

package/templates/screen-data/src/screen/ScreenView.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { ScreenMetric } from '../services/metrics-types';
+import { onBeforeUnmount, onMounted, shallowRef } from 'vue';
+import { loadMetrics } from '../services/metrics';
+import ScreenMetrics from './components/ScreenMetrics.vue';
+// SCREEN_VISUALIZATION_IMPORT
+
+/***********************指标加载*********************/
+const metrics = shallowRef<ScreenMetric[]>([]);
+const loading = shallowRef(false);
+const error = shallowRef('');
+let controller: AbortController | undefined;
+
+async function reload() {
+  controller?.abort();
+  const current = new AbortController();
+  controller = current;
+  loading.value = true;
+  error.value = '';
+  try {
+    const result = await loadMetrics(current.signal);
+    if (!current.signal.aborted) metrics.value = result;
+  } catch (cause) {
+    if (!current.signal.aborted) error.value = cause instanceof Error ? cause.message : '数据加载失败';
+  } finally {
+    if (!current.signal.aborted) loading.value = false;
+  }
+}
+
+onMounted(() => void reload());
+onBeforeUnmount(() => controller?.abort());
+</script>
+
+<template>
+  <main class="screen-view" :aria-busy="loading">
+    <header class="screen-view__header">
+      <h1>数据总览</h1>
+      <button type="button" :disabled="loading" @click="reload">刷新数据</button>
+    </header>
+    <p v-if="error" role="alert">{{ error }}</p>
+    <p v-else-if="loading" role="status">加载中</p>
+    <ScreenMetrics :metrics="metrics" />
+    <!-- SCREEN_VISUALIZATION -->
+  </main>
+</template>
+
+<style scoped>
+.screen-view {
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  flex: 1;
+  overflow: auto;
+  padding: 32px;
+  font-size: max(14px, var(--lumal-viewport-min-font-size, 14px));
+}
+.screen-view__header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 32px;
+}
+.screen-view__header h1 {
+  margin: 0;
+  font-size: max(28px, var(--lumal-viewport-min-font-size, 14px));
+}
+</style>

package/templates/screen-data/src/services/metrics-types.ts

@@ -0,0 +1,4 @@
+export interface ScreenMetric {
+  label: string;
+  value: number;
+}

package/templates/screen-data-http/src/services/metrics.ts

@@ -0,0 +1,20 @@
+import type { ScreenMetric } from './metrics-types';
+import { request } from './request';
+
+export async function loadMetrics(signal?: AbortSignal): Promise<ScreenMetric[]> {
+  const data = await request.get<unknown>('/screen/metrics', { signal });
+  if (
+    !Array.isArray(data) ||
+    !data.every(
+      (item) =>
+        item !== null &&
+        typeof item === 'object' &&
+        typeof item.label === 'string' &&
+        typeof item.value === 'number' &&
+        Number.isFinite(item.value),
+    )
+  ) {
+    throw new Error('指标响应不符合 API-CONTRACT.md');
+  }
+  return data as ScreenMetric[];
+}

package/templates/screen-data-http/src/services/request.ts

@@ -0,0 +1,3 @@
+import { publicRequest } from './http';
+
+export const request = publicRequest;

package/templates/screen-data-http/tests/metrics.test.ts.template

@@ -0,0 +1,21 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { loadMetrics } from '../src/services/metrics';
+import { request } from '../src/services/request';
+
+vi.mock('../src/services/request', () => ({ request: { get: vi.fn() } }));
+beforeEach(() => vi.resetAllMocks());
+
+describe('接口指标 Adapter', () => {
+  it('透传取消并验证响应', async () => {
+    vi.mocked(request.get).mockResolvedValue([{ label: '任务', value: 3 }]);
+    const signal = new AbortController().signal;
+    expect(await loadMetrics(signal)).toEqual([{ label: '任务', value: 3 }]);
+    expect(request.get).toHaveBeenCalledWith('/screen/metrics', { signal });
+  });
+  it('接口失败不能回退静态示例', async () => {
+    vi.mocked(request.get).mockRejectedValue(new Error('backend rejected'));
+    await expect(loadMetrics()).rejects.toThrow('backend rejected');
+    vi.mocked(request.get).mockResolvedValue({ code: 403 });
+    await expect(loadMetrics()).rejects.toThrow('指标响应');
+  });
+});

package/templates/screen-data-local/src/services/metrics.ts

@@ -0,0 +1,11 @@
+import type { ScreenMetric } from './metrics-types';
+
+/** 明确的本地示例，不会在 HTTP 失败时被调用。 */
+export async function loadMetrics(signal?: AbortSignal): Promise<ScreenMetric[]> {
+  signal?.throwIfAborted();
+  return [
+    { label: '任务总数', value: 128 },
+    { label: '已完成', value: 96 },
+    { label: '进行中', value: 32 },
+  ];
+}

package/templates/screen-data-local/tests/metrics.test.ts.template

@@ -0,0 +1,9 @@
+import { describe, expect, it } from 'vitest';
+import { loadMetrics } from '../src/services/metrics';
+
+describe('本地指标', () => {
+  it('返回明确的示例且尊重取消', async () => {
+    expect(await loadMetrics()).toHaveLength(3);
+    await expect(loadMetrics(AbortSignal.abort())).rejects.toBeDefined();
+  });
+});

package/templates/screen-http/API-CONTRACT.md

@@ -0,0 +1,20 @@
+# Screen HTTP 契约
+
+仅为生成项目的应用 Adapter 约定，不是对任意真实后端的兼容承诺。
+先配置 `VITE_API_BASE_URL`。无配置明确报错，不使用演示数据兜底。
+
+- 选择 HTTP 业务数据时：`GET /screen/metrics` 返回 `[{ label: string, value: number }]`。
+- 选择 HTTP 认证时：`POST /auth/login` 接收 `{ username, password }`，
+  返回 `{ accessToken, refreshToken?, expiresAt? }`。`expiresAt` 是毫秒时间戳。
+- 配置了 refreshToken 时，认证失效通过 `POST /auth/refresh` 接收 `{ refreshToken }`，
+  返回相同会话结构。刷新失败退出，不降级。未提供 refreshToken 时过期直接退出。
+- `Authorization: Bearer <token>` 由 Core 注入。后端仍必须执行权限检查。
+- 默认请求超时 15 秒；取消不会伪装为成功。退出、切换身份会取消旧会话请求。
+- 无认证的 HTTP 数据请求 401 只展示错误，不假定需要登录。
+
+`http.ts`、`auth-adapter.ts`、`metrics.ts` 是应用可以修改的 Adapter。
+后端有 `code/data/msg` 包装时，在客户端的 `onResponse` 显式接入
+`createStandardResponseParser`；字段映射和业务上下文不得写进 Core。
+Token 使用当前标签页的 sessionStorage；按部署安全要求调整，不把演示凭据用于真实后端。
+登录页只在原路径切换内容，路由不会来回跳转或丢失当前 Screen 路径。
+服务端 Token 撤销、单点登录和业务 Store 清理由应用按接口契约补充。

package/templates/screen-http/src/services/http.ts

@@ -0,0 +1,17 @@
+import { createRequestClient } from '@lumal/core/request';
+
+/** 可在这里配置成功码或字段映射；默认协议直接返回 JSON，不猜测业务包装。 */
+export const apiBaseURL = import.meta.env.VITE_API_BASE_URL?.trim() ?? '';
+
+export function prepareRequest(init: RequestInit) {
+  if (!apiBaseURL) throw new Error('请配置 VITE_API_BASE_URL');
+  const signals = [AbortSignal.timeout(15_000)];
+  if (init.signal) signals.push(init.signal);
+  init.signal = AbortSignal.any(signals);
+}
+
+// 登录/刷新用独立客户端，401 不触发已登录会话的退出或递归刷新。
+export const publicRequest = createRequestClient({
+  baseURL: apiBaseURL,
+  onRequest: ({ init }) => prepareRequest(init),
+});

package/templates/screen-request-auth/src/services/request.ts

@@ -0,0 +1,15 @@
+import { createRequestClient } from '@lumal/core/request';
+import { apiBaseURL, prepareRequest } from './http';
+import { getSessionScope, getSessionSignal, getSessionToken, refreshSession, signOut } from './session';
+
+export const request = createRequestClient({
+  baseURL: apiBaseURL,
+  getToken: getSessionToken,
+  getCacheScope: getSessionScope,
+  onRequest: ({ init }) => {
+    prepareRequest(init);
+    init.signal = AbortSignal.any([init.signal!, getSessionSignal()]);
+  },
+  authRefresh: { refresh: refreshSession },
+  onSessionExpired: () => signOut(),
+});

package/templates/screen-router/src/App.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { RouterView } from 'vue-router';
+</script>
+
+<template>
+  <RouterView />
+</template>

package/templates/screen-router/src/main.ts

@@ -0,0 +1,13 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import { router } from './router';
+import './styles.css';
+
+async function bootstrap() {
+  const app = createApp(App);
+  app.use(router);
+  await router.isReady();
+  app.mount('#app');
+}
+
+void bootstrap();

package/templates/screen-router/src/router.ts

@@ -0,0 +1,7 @@
+import { createRouter, createWebHashHistory } from 'vue-router';
+import ScreenEntry from './screen/ScreenEntry.vue';
+
+export const router = createRouter({
+  history: createWebHashHistory(import.meta.env.BASE_URL),
+  routes: [{ path: '/', name: 'Screen', component: ScreenEntry }],
+});

package/templates/screen-router/tests/app.test.ts.template

@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest';
+import { createSSRApp } from 'vue';
+import { createMemoryHistory, createRouter } from 'vue-router';
+import { renderToString } from 'vue/server-renderer';
+import App from '../src/App.vue';
+import ScreenEntry from '../src/screen/ScreenEntry.vue';
+
+describe('应用路由', () => {
+  it('可以渲染首页', async () => {
+    const router = createRouter({
+      history: createMemoryHistory(),
+      routes: [{ path: '/', component: ScreenEntry }],
+    });
+    const app = createSSRApp(App);
+    app.use(router);
+    await router.push('/');
+    await router.isReady();
+    expect(await renderToString(app)).toContain('<main');
+  });
+});

package/templates/screen-viewport/src/screen/ScreenViewport.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { LumalViewport } from '@lumal/viewport';
+
+/***********************只适配实际内容区，登录栏独立占位*********************/
+const policy = {
+  mode: /* VIEWPORT_MODE */ 'contain',
+  designWidth: 1920,
+  designHeight: 1080,
+  minFontSize: 12,
+} as const;
+</script>
+
+<template>
+  <div class="screen-viewport">
+    <LumalViewport :policy="policy">
+      <slot />
+    </LumalViewport>
+  </div>
+</template>
+
+<style scoped>
+.screen-viewport {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+.screen-viewport :deep([data-viewport-mode='vw'] .screen-view) {
+  padding: max(16px, calc(32 * var(--lumal-viewport-x-unit)));
+}
+</style>

package/templates/screen-visualization-charts/src/screen/components/ScreenVisualization.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { EChartsOption } from 'echarts';
+import { LumalChart } from '@lumal/charts';
+import { LineChart } from 'echarts/charts';
+import { GridComponent, TooltipComponent } from 'echarts/components';
+import { use } from 'echarts/core';
+import { CanvasRenderer } from 'echarts/renderers';
+import '@lumal/charts/style.css';
+
+/***********************只注册示例实际使用的图表能力*********************/
+use([LineChart, GridComponent, TooltipComponent, CanvasRenderer]);
+const options: EChartsOption = {
+  grid: { top: 20, right: 20, left: 44, bottom: 24 },
+  xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'] },
+  yAxis: { type: 'value' },
+  series: [{ type: 'line', data: [12, 24, 18, 36, 30] }],
+};
+</script>
+
+<template>
+  <LumalChart :options="options" height="240px" />
+</template>

package/templates/screen-visualization-cockpit/src/screen/components/ScreenVisualization.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { createDefaultCockpitConfig, createWidgetInstance } from '@lumal/cockpit';
+import { createCockpitRegistry } from '@lumal/cockpit/registry';
+import { LumalCockpit } from '@lumal/cockpit/runtime';
+import '@lumal/cockpit/style.css';
+import 'element-plus/dist/index.css';
+
+/***********************最小运行时编排，不加载 Designer*********************/
+const registry = createCockpitRegistry();
+registry.registerWidget({ type: 'metric', label: '指标', component: () => import('./ScreenWidget.vue') });
+const config = createDefaultCockpitConfig('screen-demo');
+const layout = config.layouts[0]!;
+layout.left.width = layout.right.width = 200;
+layout.left.columns[0]!.width = layout.right.columns[0]!.width = 200;
+layout.left.rows[0]!.cells[0]!.widget = createWidgetInstance('metric', '任务指标');
+</script>
+
+<template>
+  <div class="screen-cockpit">
+    <LumalCockpit :config="config" :registry="registry" viewport-mode="external">
+      <template #center><p>数据总览</p></template>
+    </LumalCockpit>
+  </div>
+</template>
+
+<style scoped>
+.screen-cockpit {
+  width: 100%;
+  height: 360px;
+  min-width: 0;
+  overflow: auto;
+}
+</style>

package/templates/screen-visualization-cockpit/src/screen/components/ScreenWidget.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+/***********************通用本地指标*********************/
+const count = 128;
+</script>
+
+<template>
+  <p>
+    任务总数 <strong>{{ count }}</strong>
+  </p>
+</template>

package/templates/screen-visualization-datav/src/screen/components/ScreenVisualization.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import LumalBorderBox from '@lumal/datav/border-box';
+import LumalDigitalFlop from '@lumal/datav/digital-flop';
+import '@lumal/datav/style.css';
+</script>
+
+<template>
+  <LumalBorderBox :variant="8" style="height: 180px">
+    <LumalDigitalFlop :value="128" suffix=" 项" />
+  </LumalBorderBox>
+</template>

package/templates/vben-compatible/MIGRATION.md

@@ -0,0 +1,30 @@
+# Vben 5 Element Plus 迁移基准
+
+基准 v5.7.0，commit `63a38dce49ba109f61607994e21ba921d8e970e9`。
+本项目不加载 VXE Table / vee-validate / Vben Store。
+
+1. `#/adapter/form` 和 `#/adapter/vxe-table` 改为 `@lumal/vben-compat/v5`。
+2. 保留 `[Form, formApi]`、单数 `schema`、`[Grid, gridApi]`、顶层 `formOptions`。
+3. 业务 API 接到本项目 ApplicationService。query 仍接收
+   `{ page: { currentPage, pageSize }, sort }` 和第二参数 formValues。
+4. 默认结果为 `{ items, total }`，不同响应在 `proxyConfig.response` 明确配置。
+5. Element Plus 控件属性沿用；Tailwind 布局需转成项目 CSS，
+   `wrapperClass` 的基础 grid-cols-N 映射为原生响应式列数。
+6. 原 Vben Drawer/Modal 改为 Element Plus Dialog 或 Lumal CRUD 编辑器。
+7. `@vben/access` 的高频用法可改为本入口的 AccessControl / useAccess；
+   路由数据先经 adaptVbenMenus，authority 按角色匹配。
+8. `#toolbar-actions` 与 `#toolbar-tools` 用于具名工具栏插槽；当前不注入完整 VXE 工具栏上下文，
+   命令通过已获得的 `gridApi` 调用。兼容页面位于独立 `modules/vben-migration`，不混入系统管理。
+
+本模板 `migration/form` 对应 web-ele/demos/form/basic 与共享 rules/dynamic
+场景；`migration/users` 对应共享 vxe-table/form 和 system/user 的
+查询、分页、列配置、插槽操作、弹窗校验、增删改与按钮权限。
+不是声称原始页面仅换 import 就可以完整运行。
+
+不支持：任意自定义表单组件注册、VXE renderer、虚拟滚动、高级编辑、
+表单嵌套路径、fieldMappingTime、Vben 全局偏好 Store/Drawer/Modal。
+配置不在受支持类型内时会明确报错，不静默忽略。
+Zod 校验器可由应用自行安装后传入 rules；兼容包不内置或导出 z。
+Lumal Form 泛型约束模型字段，不是 Vben 的控件名称泛型；显式泛型需调整。
+配置通过 hook/setState 更新，不接受 schema/gridOptions 组件 props。
+Zod transform 需在应用提交边界处理；Grid 的命令式 query/reload 会向调用方传播错误。

package/templates/vben-compatible/src/modules/vben-migration/VbenFormView.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+/***********************迁移表单场景装配*********************/
+import VbenFormExample from './components/VbenFormExample.vue';
+import '@lumal/vben-compat/style.css';
+</script>
+
+<template>
+  <main class="lumal-admin-page">
+    <VbenFormExample />
+  </main>
+</template>

package/templates/vben-compatible/src/modules/vben-migration/VbenUsersView.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { service } from '../../app/services/session';
+/***********************迁移业务场景装配*********************/
+import VbenUsers from './components/VbenUsers.vue';
+import '@lumal/vben-compat/style.css';
+</script>
+
+<template>
+  <main class="lumal-admin-page">
+    <VbenUsers :service="service" />
+  </main>
+</template>

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

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { useVbenForm } from '@lumal/vben-compat/v5';
+import { shallowRef } from 'vue';
+
+/***********************5.7.0 基础控件与动态依赖迁移*********************/
+const submitted = shallowRef('');
+const [Form, formApi] = useVbenForm({
+  layout: 'horizontal',
+  wrapperClass: 'grid-cols-2',
+  handleSubmit(values) {
+    submitted.value = JSON.stringify(values);
+  },
+  schema: [
+    { component: 'Input', fieldName: 'name', label: '姓名', rules: 'required' },
+    {
+      component: 'Select',
+      fieldName: 'role',
+      label: '角色',
+      rules: 'selectRequired',
+      componentProps: {
+        options: [
+          { label: '管理员', value: 'admin' },
+          { label: '访客', value: 'guest' },
+        ],
+      },
+    },
+    {
+      component: 'DatePicker',
+      fieldName: 'date',
+      label: '日期',
+      rules: 'selectRequired',
+      componentProps: { valueFormat: 'YYYY-MM-DD' },
+    },
+    { component: 'Switch', fieldName: 'enabled', label: '启用扩展', defaultValue: true },
+    {
+      component: 'Input',
+      fieldName: 'remark',
+      label: '备注',
+      dependencies: {
+        triggerFields: ['enabled', 'role'],
+        if: (values) => Boolean(values.enabled),
+        disabled: (values) => values.role === 'guest',
+        required: (values) => values.role === 'admin',
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'cssHidden',
+      label: '保留值字段',
+      defaultValue: 'retained',
+      dependencies: { triggerFields: ['enabled'], show: (values) => Boolean(values.enabled) },
+    },
+  ],
+});
+defineExpose({ formApi });
+</script>
+
+<template>
+  <section>
+    <h2>Vben 5 表单</h2>
+    <Form />
+    <output aria-label="提交结果">{{ submitted }}</output>
+  </section>
+</template>