• 功能丰富导致项目体积稍大，新手入门有一定学习成本，小型轻量化项目略显冗余

• 官网地址：https://nodejs.org/

pnpm dev:antd

// 示例：只有管理员可访问的路由
{
  path: '/admin',
  name: 'AdminPage',
  component: () => import('@/views/AdminPage.vue'),
  meta: { authority: ['admin'] },
}

3，动态路由

import type { RouteRecordRaw } from 'vue-router';

const routes: RouteRecordRaw[] = [
  {
    meta: {
      icon: 'lucide:home',
      title: '测试模块',
    },
    name: 'Test',
    path: '/test',
    children: [
      {
        name: 'TestPage1',
        path: '/test/page1',
        component: () => import('#/views/test/page1/index.vue'),
        meta: {
          icon: 'lucide:file-text',
          title: 'Page 1',
        },
      },
      {
        name: 'TestPage2',
        path: '/test/page2',
        component: () => import('#/views/test/page2/index.vue'),
        meta: {
          icon: 'lucide:file',
          title: 'Page 2',
        },
      },
    ],
  },
];

export default routes;

4，表单与表格

<script lang="ts" setup>
import { ref } from 'vue';

import { Page } from '@vben/common-ui';

import { message } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';

// 表单 Schema 配置 - 声明式定义表单字段
const formSchema = [
  {
    component: 'Input',
    fieldName: 'username',
    label: '用户名',
    rules: 'required',
    componentProps: {
      placeholder: '请输入用户名',
    },
  },
  {
    component: 'InputPassword',
    fieldName: 'password',
    label: '密码',
    rules: 'required',
    componentProps: {
      placeholder: '请输入密码',
    },
  },
  {
    component: 'Input',
    fieldName: 'email',
    label: '邮箱',
    rules: 'required',
    componentProps: {
      placeholder: '请输入邮箱',
    },
  },
  {
    component: 'Select',
    fieldName: 'role',
    label: '角色',
    componentProps: {
      placeholder: '请选择角色',
      options: [
        { label: '管理员', value: 'admin' },
        { label: '普通用户', value: 'user' },
        { label: '访客', value: 'guest' },
      ],
    },
  },
  {
    component: 'RadioGroup',
    fieldName: 'status',
    label: '状态',
    defaultValue: 1,
    componentProps: {
      optionType: 'button',
      buttonStyle: 'solid',
      options: [
        { label: '启用', value: 1 },
        { label: '禁用', value: 0 },
      ],
    },
  },
  {
    component: 'RangePicker',
    fieldName: 'dateRange',
    label: '生效日期',
  },
  {
    component: 'Textarea',
    fieldName: 'remark',
    label: '备注',
    componentProps: {
      placeholder: '请输入备注信息',
      rows: 4,
    },
  },
];

// 使用 useVbenForm 创建表单
const [Form, formApi] = useVbenForm({
  schema: formSchema,
  showDefaultActions: false,
});

// 表单提交
const loading = ref(false);
async function handleSubmit() {
  const { valid } = await formApi.validate();
  if (!valid) return;

  loading.value = true;
  const values = await formApi.getValues();

  setTimeout(() => {
    loading.value = false;
    message.success('提交成功！');
    console.log('表单数据:', values);
  }, 1000);
}

// 重置表单
function handleReset() {
  formApi.resetForm();
  message.info('表单已重置');
}
</script>

<template>
  <Page title="BasicForm 表单演示">
    <div class="p-6">
      <a-card title="用户信息表单">
        <Form />
        <div class="mt-4 flex gap-2">
          <a-button type="primary" :loading="loading" @click="handleSubmit">
            提交
          </a-button>
          <a-button @click="handleReset">
            重置
          </a-button>
        </div>
      </a-card>
    </div>
  </Page>
</template>

<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';

import { Page } from '@vben/common-ui';

import { message } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';

// 表格列配置
const columns = [
  { field: 'id', title: 'ID', width: 80 },
  { field: 'name', title: '姓名', width: 150 },
  { field: 'email', title: '邮箱', minWidth: 200 },
  { field: 'phone', title: '电话', width: 150 },
  {
    field: 'status',
    title: '状态',
    width: 100,
    cellRender: { name: 'CellTag' },
  },
  { field: 'createTime', title: '创建时间', width: 180 },
  {
    field: 'operation',
    title: '操作',
    width: 150,
    fixed: 'right',
    cellRender: {
      name: 'CellOperation',
      attrs: { onClick: onActionClick },
    },
  },
];

// 搜索表单配置
const searchFormSchema = [
  {
    component: 'Input',
    fieldName: 'name',
    label: '姓名',
    componentProps: { placeholder: '请输入姓名' },
  },
  {
    component: 'Select',
    fieldName: 'status',
    label: '状态',
    componentProps: {
      placeholder: '请选择状态',
      allowClear: true,
      options: [
        { label: '启用', value: 1 },
        { label: '禁用', value: 0 },
      ],
    },
  },
];

// 模拟数据
const mockData = Array.from({ length: 50 }, (_, i) => ({
  id: i + 1,
  name: `用户${i + 1}`,
  email: `user${i + 1}@example.com`,
  phone: `138${String(i).padStart(8, '0')}`,
  status: i % 2 === 0 ? 1 : 0,
  createTime: new Date(Date.now() - i * 86400000).toLocaleString(),
}));

// 使用 useVbenVxeGrid 创建表格
const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
    schema: searchFormSchema,
    submitOnChange: true,
  },
  gridOptions: {
    columns,
    height: 'auto',
    keepSource: true,
    proxyConfig: {
      ajax: {
        query: async ({ page }, formValues) => {
          let filtered = [...mockData];
          if (formValues?.name) {
            filtered = filtered.filter((item) => item.name.includes(formValues.name));
          }
          if (formValues?.status !== undefined) {
            filtered = filtered.filter((item) => item.status === formValues.status);
          }
          const start = (page.currentPage - 1) * page.pageSize;
          const end = start + page.pageSize;
          return {
            items: filtered.slice(start, end),
            total: filtered.length,
          };
        },
      },
    },
    rowConfig: { keyField: 'id' },
    toolbarConfig: {
      custom: true,
      export: true,
      refresh: true,
      search: true,
      zoom: true,
    },
  } as VxeTableGridOptions,
});

// 操作按钮点击事件
function onActionClick(e: { code: string; row: any }) {
  if (e.code === 'edit') {
    message.info(`编辑: ${e.row.name}`);
  } else if (e.code === 'delete') {
    message.warning(`删除: ${e.row.name}`);
  }
}
</script>

<template>
  <Page title="BasicTable 表格演示" auto-content-height>
    <Grid table-title="用户列表" class="h-full">
      <template #toolbar-tools>
        <a-button type="primary" @click="gridApi.query()">
          刷新
        </a-button>
      </template>
    </Grid>
  </Page>
</template>