添加用户管理

backend/system/management/commands/generate_crud.py

@@ -28,7 +28,7 @@ def camel_to_snake(name):
     return re.sub('([a-z0-9])([A-Z])', r'\1_\2', s1).lower()
 
 def ensure_view_dirs(app_name, model_name_snake):
-    base_dir = f'web/apps/web-antd/src/views/{app_name.lower()}'
+    base_dir = f'../web/apps/web-antd/src/views/{app_name.lower()}'
     model_dir = os.path.join(base_dir, model_name_snake)
     if not os.path.exists(base_dir):
         os.makedirs(model_dir, exist_ok=True)
@@ -77,7 +77,7 @@ class Command(BaseCommand):
             raise CommandError(f'模型 {app_name}.{model_name} 不存在')
 
         # 生成后端代码
-        self.generate_backend_code(app_name, model_name, model, model_name_snake)
+        # self.generate_backend_code(app_name, model_name, model, model_name_snake)
         
         if generate_frontend:
             # 生成前端代码
@@ -148,15 +148,29 @@ class Command(BaseCommand):
         self.stdout.write(f'生成前端列表页面: {list_path}')
 
     def generate_frontend_data(self, app_name, model_name, model, model_name_snake):
-        form_fields = []
+        CORE_FIELDS = ['create_time', 'update_time', 'creator', 'modifier', 'is_deleted', 'remark']
+        business_fields = []
+        core_fields = []
         for field in model._meta.fields:
-            if field.name in ['id', 'create_time', 'update_time', 'creator', 'modifier']:
+            if field.name in CORE_FIELDS:
-                continue
+                core_fields.append(field)
+            else:
+                business_fields.append(field)
+        # 生成 useSchema
+        form_fields = []
+        for field in business_fields + core_fields:
+            if field.name in ['id', 'create_time', 'update_time', 'creator', 'modifier', 'is_deleted']:
+                continue  # 这些一般不在表单里
             field_config = self.generate_form_field(field)
             if field_config:
                 form_fields.append(field_config)
+        # 生成 useColumns
+        columns = []
+        for field in business_fields + core_fields:
+            columns.append(f"    {{\n      field: '{field.name}',\n      title: '{getattr(field, 'verbose_name', field.name)}',\n    }},")
         context = get_context(app_name, model_name, model, model_name_snake)
         context['form_fields'] = '\n'.join(form_fields)
+        context['columns'] = '\n'.join(columns)
         data_path = f'../web/apps/web-antd/src/views/{app_name.lower()}/{model_name_snake}/data.ts'
         data_code = render_tpl('frontend_data.ts.tpl', context)
         with open(data_path, 'w', encoding='utf-8') as f:
@@ -196,55 +210,14 @@ class Command(BaseCommand):
         """生成表单字段配置"""
         field_name = field.name
         field_label = getattr(field, 'verbose_name', field_name)
-        
+        col_props = ",\n      colProps: { span: 12 }"
         if isinstance(field, models.CharField):
-            return f'''    {{
+            return f'''    {{\n      component: 'Input',\n      fieldName: '{field_name}',\n      label: '{field_label}',{col_props}\n      rules: z\n        .string()\n        .min(1, $t('ui.formRules.required', ['{field_label}']))\n        .max(100, $t('ui.formRules.maxLength', ['{field_label}', 100])),\n    }},'''
-      component: 'Input',
-      fieldName: '{field_name}',
-      label: '{field_label}',
-      rules: z
-        .string()
-        .min(1, $t('ui.formRules.required', ['{field_label}']))
-        .max(100, $t('ui.formRules.maxLength', ['{field_label}', 100])),
-    }},'''
         elif isinstance(field, models.TextField):
-            return f'''    {{
+            return f'''    {{\n      component: 'Input',\n      componentProps: {{\n        rows: 3,\n        showCount: true,\n      }},\n      fieldName: '{field_name}',\n      label: '{field_label}',{col_props}\n      rules: z\n        .string()\n        .max(500, $t('ui.formRules.maxLength', ['{field_label}', 500]))\n        .optional(),\n    }},'''
-      component: 'Input',
-      componentProps: {{
-        rows: 3,
-        showCount: true,
-      }},
-      fieldName: '{field_name}',
-      label: '{field_label}',
-      rules: z
-        .string()
-        .max(500, $t('ui.formRules.maxLength', ['{field_label}', 500]))
-        .optional(),
-    }},'''
         elif isinstance(field, models.IntegerField):
-            return f'''    {{
+            return f'''    {{\n      component: 'InputNumber',\n      fieldName: '{field_name}',\n      label: '{field_label}',{col_props}\n    }},'''
-      component: 'InputNumber',
-      fieldName: '{field_name}',
-      label: '{field_label}',
-    }},'''
         elif isinstance(field, models.BooleanField):
-            return f'''    {{
+            return f'''    {{\n      component: 'RadioGroup',\n      componentProps: {{\n        buttonStyle: 'solid',\n        options: [\n          {{ label: '开启', value: 1 }},\n          {{ label: '关闭', value: 0 }},\n        ],\n        optionType: 'button',\n      }},{col_props}\n      defaultValue: 1,\n      fieldName: '{field_name}',\n      label: '{field_label}',\n    }},'''
-      component: 'RadioGroup',
-      componentProps: {{
-        buttonStyle: 'solid',
-        options: [
-          {{ label: '开启', value: true }},
-          {{ label: '关闭', value: false }},
-        ],
-        optionType: 'button',
-      }},
-      defaultValue: true,
-      fieldName: '{field_name}',
-      label: '{field_label}',
-    }},'''
         else:
-            return f'''    {{
+            return f'''    {{\n      component: 'Input',\n      fieldName: '{field_name}',\n      label: '{field_label}',{col_props}\n    }},''' 
-      component: 'Input',
-      fieldName: '{field_name}',
-      label: '{field_label}',
-    }},''' 

backend/system/management/commands/tpl/frontend_data.ts.tpl

@@ -2,7 +2,7 @@ import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
 
 import type { VbenFormSchema } from '#/adapter/form';
 import type { OnActionClickFn } from '#/adapter/vxe-table';
-import type { ${app_name_camel}${model_name}Api } from '#/models/$app_name/${model_name_snake}';
+import type { ${app_name_camel}${model_name}Api } from '#/models/${app_name}/${model_name_snake}';
 
 import { z } from '#/adapter/form';
 import { $$t } from '#/locales';
@@ -13,66 +13,35 @@ import { format_datetime } from '#/utils/date';
  */
 export function useSchema(): VbenFormSchema[] {
   return [
-$form_fields
+${form_fields}
   ];
 }
 
+/**
+ * 获取表格列配置
+ * @description 使用函数的形式返回列数据而不是直接export一个Array常量，是为了响应语言切换时重新翻译表头
+ * @param onActionClick 表格操作按钮点击事件
+ */
 export function useColumns(
   onActionClick?: OnActionClickFn<${app_name_camel}${model_name}Api.${app_name_camel}${model_name}>,
 ): VxeTableGridOptions<${app_name_camel}${model_name}Api.${app_name_camel}${model_name}>['columns'] {
   return [
+${columns}
     {
-      align: 'left',
+      align: 'center',
-      field: 'id',
-    },
-    {
-      cellRender: {
-        name: 'CellTag',
-        options: [
-          { label: $$t('common.enabled'), value: true },
-          { label: $$t('common.disabled'), value: false },
-        ],
-      },
-      field: 'status',
-      title: '状态',
-      width: 100,
-    },
-    {
-      field: 'remark',
-      title: '备注',
-    },
-    {
-      field: 'create_time',
-      title: '创建时间',
-      width: 180,
-      formatter: ({ cellValue }) => format_datetime(cellValue),
-    },
-    {
-      align: 'right',
       cellRender: {
         attrs: {
           nameField: 'name',
-          nameTitle: $$t('${app_name}.{model_name_snake}.name'),
+          nameTitle: $t('${app_name}.${model_name_snake}.name'),
           onClick: onActionClick,
         },
         name: 'CellOperation',
-        options: [
+        options: ['edit', 'delete'],
-          'edit', // 默认的编辑按钮
-          {
-            code: 'view', // 新增查看详情按钮（可自定义code）
-            text: '数据', // 按钮文本（国际化）
-          },
-          {
-            code: 'delete', // 默认的删除按钮
-          },
-        ],
       },
-      field: 'operation',
+      field: 'action',
       fixed: 'right',
-      headerAlign: 'center',
-      showOverflow: false,
       title: '操作',
-      width: 200,
+      width: 120,
     },
   ];
 }

backend/system/management/commands/tpl/frontend_list.vue.tpl

@@ -124,7 +124,7 @@ function refreshGrid() {
       <template #toolbar-tools>
         <Button type="primary" @click="onCreate">
           <Plus class="size-5" />
-            {{ $$t('ui.actionTitle.create', [$$t('${app_name}.${model_name_snake}.name')]) }}
+          {{ $$t('ui.actionTitle.create', [$$t('${app_name}.${model_name_snake}.name')]) }}
         </Button>
       </template>
     </Grid>

backend/system/migrations/0004_rename_avatarurl_user_avatar_url_user_role.py

@@ -0,0 +1,29 @@
+# Generated by Django 5.2.1 on 2025-07-01 05:07
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("system", "0003_alter_dictdata_status_alter_dicttype_status_and_more"),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name="user",
+            old_name="avatarUrl",
+            new_name="avatar_url",
+        ),
+        migrations.AddField(
+            model_name="user",
+            name="role",
+            field=models.ManyToManyField(
+                blank=True,
+                db_constraint=False,
+                related_name="users",
+                to="system.role",
+                verbose_name="角色",
+            ),
+        ),
+    ]

backend/system/migrations/0005_remove_user_login_date_menu_sort.py

@@ -0,0 +1,24 @@
+# Generated by Django 5.2.1 on 2025-07-01 07:04
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("system", "0004_rename_avatarurl_user_avatar_url_user_role"),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name="user",
+            name="login_date",
+        ),
+        migrations.AddField(
+            model_name="menu",
+            name="sort",
+            field=models.IntegerField(
+                default=0, help_text="数值越小越靠前", verbose_name="显示排序"
+            ),
+        ),
+    ]

backend/system/models.py

@@ -97,6 +97,11 @@ class Menu(CoreModel):
     name = models.CharField(max_length=100, verbose_name='菜单名称')
     status = models.IntegerField(choices=CommonStatus.choices, default=CommonStatus.ENABLED, verbose_name='状态')
     type = models.CharField(choices=MenuType.choices, max_length=20, verbose_name='菜单类型')
+    sort = models.IntegerField(
+        default=0,
+        verbose_name="显示排序",
+        help_text="数值越小越靠前"
+    )
     path = models.CharField(max_length=200, blank=True, verbose_name='路由路径')
     component = models.CharField(max_length=200, blank=True, verbose_name='组件路径')
     auth_code = models.CharField(max_length=100, blank=True, verbose_name='权限编码')
@@ -244,12 +249,16 @@ class User(AbstractUser, CoreModel):
     city = models.CharField('城市', max_length=20, blank=True, null=True, db_comment="城市")
     province = models.CharField('省份', max_length=50, blank=True, null=True, db_comment="省份")
     country = models.CharField('国家', max_length=50, blank=True, null=True, db_comment="国家")
-    avatarUrl = models.URLField('头像', blank=True, null=True, db_comment="头像")
+    avatar_url = models.URLField('头像', blank=True, null=True, db_comment="头像")
 
     dept = models.ManyToManyField(
         'Dept', blank=True, verbose_name='部门', db_constraint=False,
         related_name='users'
     )
+    role = models.ManyToManyField(
+        'Role', blank=True, verbose_name='角色', db_constraint=False,
+        related_name='users'
+    )
     post = models.ManyToManyField(
         'Post', blank=True, verbose_name='岗位', db_constraint=False,
         related_name='users'
@@ -259,7 +268,6 @@ class User(AbstractUser, CoreModel):
         default=CommonStatus.ENABLED,
         verbose_name='状态'
     )
-    login_date = models.DateTimeField("<最后登录时间>", blank=True, null=True, db_comment="最后登录时间")
     login_ip = models.GenericIPAddressField(blank=True, null=True, db_comment="最后登录IP")
 
     class Meta:

backend/system/urls.py

@@ -11,6 +11,7 @@ router.register(r'role', views.RoleViewSet)
 router.register(r'dict_data', views.DictDataViewSet)
 router.register(r'dict_type', views.DictTypeViewSet)
 router.register(r'post', views.PostViewSet)
+router.register(r'user', views.UserViewSet)
 
 urlpatterns = [
     path('', include(router.urls)),

backend/system/views/__init__.py

@@ -6,6 +6,7 @@ __all__ = [
     'DictDataViewSet',
     'DictTypeViewSet',
     'PostViewSet',
+    'UserViewSet',
 ]
 
 from system.views.dict_data import DictDataViewSet

backend/system/views/user.py

@@ -1,17 +1,42 @@
+from django.utils import timezone
+from rest_framework import serializers
 from rest_framework.authtoken.models import Token
 from rest_framework.authtoken.views import ObtainAuthToken
 from rest_framework.response import Response
 from rest_framework.views import APIView
-from rest_framework.viewsets import ModelViewSet
+from django.contrib.auth.hashers import make_password
 
 from system.models import User
+
+from utils.serializers import CustomModelSerializer
 from utils.custom_model_viewSet import CustomModelViewSet
 
 
-class UserSerializer(CustomModelViewSet):
+class UserSerializer(CustomModelSerializer):
+    roles = serializers.SerializerMethodField()  # 新增字段
+    """
+    用户数据 序列化器
+    """
     class Meta:
         model = User
-        exclude = ('password',)
+        fields = '__all__'
+        read_only_fields = ['id', 'create_time', 'update_time']
+
+    def get_roles(self, obj):
+        """
+        返回用户所有角色的名称列表
+        """
+        return list(obj.role.values_list('name', flat=True))
+
+    def create(self, validated_data):
+        if 'password' in validated_data:
+            validated_data['password'] = make_password(validated_data['password'])
+        return super().create(validated_data)
+
+    def update(self, instance, validated_data):
+        if 'password' in validated_data:
+            validated_data['password'] = make_password(validated_data['password'])
+        return super().update(instance, validated_data)
 
 
 class UserLogin(ObtainAuthToken):
@@ -22,18 +47,16 @@ class UserLogin(ObtainAuthToken):
         serializer.is_valid(raise_exception=True)
         user = serializer.validated_data['user']
         token, created = Token.objects.get_or_create(user=user)
+        # 更新登录IP和登录时间
+        user.login_ip = request.META.get('REMOTE_ADDR')
+        user.last_login = timezone.now()
+        user.save(update_fields=['login_ip', 'last_login'])
+        user_data = UserSerializer(user).data
+        # 在序列化后的数据中加入 accessToken
+        user_data['accessToken'] = token.key
         return Response({
             "code": 0,
-            "data": {
+            "data": user_data,
-                "id": user.id,
-                "password": user.password,
-                "realName": user.nickname,
-                "roles": [
-                    "super"
-                ],
-                "username": user.username,
-                "accessToken": token.key
-            },
             "error": None,
             "message": "ok"
         })
@@ -43,16 +66,12 @@ class UserInfo(APIView):
 
     def get(self, request, *args, **kwargs):
         user = self.request.user
+        user_data = UserSerializer(user).data
+        if user.is_superuser:
+            user_data['roles'] = ['admin']
         return Response({
             "code": 0,
-            "data": {
+            "data": user_data,
-                "id": user.id,
-                "realName": user.username,
-                "roles": [
-                    "super"
-                ],
-                "username": user.username,
-            },
             "error": None,
             "message": "ok"
         })
@@ -74,6 +93,17 @@ class Codes(APIView):
         })
 
 
-class UserViewSet(ModelViewSet):
+class UserViewSet(CustomModelViewSet):
-    queryset = User.objects.all().order_by('id')
+    """
-    serializer_class = UserSerializer
+    用户数据 视图集
+    """
+    queryset = User.objects.filter(is_deleted=False).order_by('-id')
+    serializer_class = UserSerializer
+    read_only_fields = ['id', 'create_time', 'update_time', 'login_ip']
+    filterset_fields = ['username', 'first_name', 'last_name', 'email', 'is_staff', 'is_active', 'remark', 'creator',
+                        'modifier', 'is_deleted', 'mobile', 'nickname', 'gender', 'language', 'city', 'province',
+                        'country', 'avatar_url', 'status']
+    search_fields = ['name']  # 根据实际字段调整
+    ordering_fields = ['create_time', 'id']
+    ordering = ['-create_time']
+

web/apps/web-antd/src/layouts/basic.vue

@@ -129,7 +129,7 @@ watch(
         :avatar
         :menus
         :text="userStore.userInfo?.realName"
-        description="ann.vben@gmail.com"
+        :description="userStore.userInfo?.email"
         tag-text="Pro"
         @logout="handleLogout"
       />

web/apps/web-antd/src/locales/langs/en-US/system.json

@@ -28,6 +28,7 @@
     "path": "Route Path",
     "component": "Component",
     "status": "Status",
+    "sort": "sort",
     "authCode": "Permission Code",
     "badge": "Badge",
     "operation": "Actions",
@@ -94,8 +95,14 @@
     "name": "Post",
     "title": "Post Management"
   },
+  "user": {
+    "name": "User",
+    "title": "User Management"
+  },
   "status": "Status",
   "remark": "Remarks",
+  "creator": "creator",
+  "modifier": "modifier",
   "createTime": "Created At",
   "operation": "Actions",
   "updateTime": "Updated At"

web/apps/web-antd/src/locales/langs/zh-CN/system.json

@@ -14,6 +14,7 @@
   "menu": {
     "list": "菜单列表",
     "activeIcon": "激活图标",
+    "sort": "排序",
     "activePath": "激活路径",
     "activePathHelp": "跳转到当前路由时，需要激活的菜单路径。\n当不在导航菜单中显示时，需要指定激活路径",
     "activePathMustExist": "该路径未能找到有效的菜单",
@@ -95,8 +96,14 @@
     "name": "岗位",
     "title": "岗位管理"
   },
+  "user": {
+    "name": "用户",
+    "title": "用户管理"
+  },
   "status": "状态",
   "remark": "备注",
+  "creator": "创建人",
+  "modifier": "修改人",
   "createTime": "创建时间",
   "operation": "操作",
   "updateTime": "更新时间"

web/apps/web-antd/src/models/system/user.ts

@@ -0,0 +1,40 @@
+import { BaseModel } from '#/models/base';
+
+export namespace SystemUserApi {
+  export interface SystemUser {
+    id: number;
+    password: string;
+    last_login: string;
+    is_superuser: boolean;
+    username: string;
+    first_name: string;
+    last_name: string;
+    email: string;
+    is_staff: boolean;
+    is_active: boolean;
+    date_joined: string;
+    remark: string;
+    creator: string;
+    modifier: string;
+    update_time: string;
+    create_time: string;
+    is_deleted: boolean;
+    mobile: string;
+    nickname: string;
+    gender: number;
+    language: string;
+    city: string;
+    province: string;
+    country: string;
+    avatar_url: string;
+    status: number;
+    login_date: string;
+    login_ip: any;
+  }
+}
+
+export class SystemUserModel extends BaseModel<SystemUserApi.SystemUser> {
+  constructor() {
+    super('/system/user/');
+  }
+}

web/apps/web-antd/src/router/routes/modules/system.ts

@@ -12,6 +12,15 @@ const routes: RouteRecordRaw[] = [
     name: 'System',
     path: '/system',
     children: [
+      {
+        path: '/system/user',
+        name: 'SystemUser',
+        meta: {
+          icon: 'mdi:account-group',
+          title: $t('system.user.title'),
+        },
+        component: () => import('#/views/system/user/list.vue'),
+      },
       {
         path: '/system/role',
         name: 'SystemRole',

web/apps/web-antd/src/views/system/menu/data.ts

@@ -43,7 +43,12 @@ export function useColumns(
     },
     {
       field: 'auth_code',
-      title: $t('system.menu.authCode'),
+      title: $t('system.menu.auth_code'),
+      width: 200,
+    },
+    {
+      field: 'sort',
+      title: $t('system.menu.sort'),
       width: 200,
     },
     {

web/apps/web-antd/src/views/system/menu/modules/form.vue

@@ -254,6 +254,17 @@ const schema: VbenFormSchema[] = [
     fieldName: 'auth_code',
     label: $t('system.menu.authCode'),
   },
+  {
+    component: 'InputNumber',
+    dependencies: {
+      rules: () => {
+        return 'required';
+      },
+      triggerFields: ['type'],
+    },
+    fieldName: 'sort',
+    label: $t('system.menu.sort'),
+  },
   {
     component: 'RadioGroup',
     componentProps: {

web/apps/web-antd/src/views/system/user/data.ts

@@ -0,0 +1,230 @@
+import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
+
+import type { VbenFormSchema } from '#/adapter/form';
+import type { OnActionClickFn } from '#/adapter/vxe-table';
+import type { SystemUserApi } from '#/models/system/user';
+
+import { z } from '#/adapter/form';
+import { getDeptList, getRoleList } from '#/api/system';
+import { $t } from '#/locales';
+import { SystemPostModel } from '#/models/system/post';
+import { format_datetime } from '#/utils/date';
+
+const systemPost = new SystemPostModel();
+
+/**
+ * 获取编辑表单的字段配置
+ */
+export function useSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'username',
+      label: '用户名',
+      rules: z
+        .string()
+        .min(1, $t('ui.formRules.required', ['用户名']))
+        .max(100, $t('ui.formRules.maxLength', ['用户名', 100])),
+    },
+    {
+      component: 'Input',
+      fieldName: 'email',
+      label: '电子邮件地址',
+      rules: z
+        .string()
+        .min(1, $t('ui.formRules.required', ['电子邮件地址']))
+        .max(100, $t('ui.formRules.maxLength', ['电子邮件地址', 100])),
+    },
+    {
+      component: 'ApiTreeSelect',
+      componentProps: {
+        allowClear: true,
+        multiple: true, // 允许多选
+        api: getDeptList,
+        class: 'w-full',
+        resultField: 'items',
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
+      },
+      fieldName: 'dept',
+      label: $t('system.dept.name'),
+    },
+    {
+      component: 'ApiSelect',
+      componentProps: {
+        allowClear: true,
+        mode: 'multiple', // 允许多选
+        api: getRoleList,
+        class: 'w-full',
+        resultField: 'items',
+        labelField: 'name',
+        valueField: 'id',
+      },
+      fieldName: 'role',
+      label: $t('system.role.name'),
+    },
+    {
+      component: 'ApiSelect',
+      componentProps: {
+        allowClear: true,
+        mode: 'multiple', // 允许多选
+        api: () => systemPost.list(),
+        class: 'w-full',
+        resultField: 'items',
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
+      },
+      fieldName: 'post',
+      label: $t('system.post.name'),
+    },
+    {
+      component: 'Input',
+      fieldName: 'mobile',
+      label: '手机号',
+    },
+    {
+      component: 'Input',
+      fieldName: 'nickname',
+      label: '昵称',
+    },
+    {
+      component: 'InputPassword',
+      fieldName: 'password',
+      label: '密码',
+    },
+    {
+      component: 'Input',
+      fieldName: 'city',
+      label: '城市',
+    },
+    {
+      component: 'Input',
+      fieldName: 'province',
+      label: '省份',
+    },
+    {
+      component: 'Input',
+      fieldName: 'country',
+      label: '国家',
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        options: [
+          { label: '开启', value: 1 },
+          { label: '关闭', value: 0 },
+        ],
+        optionType: 'button',
+      },
+      defaultValue: 1,
+      fieldName: 'status',
+      label: $t('system.status'),
+    },
+    {
+      component: 'Input',
+      fieldName: 'remark',
+      label: $t('system.remark'),
+    },
+  ];
+}
+
+/**
+ * 获取表格列配置
+ * @description 使用函数的形式返回列数据而不是直接export一个Array常量，是为了响应语言切换时重新翻译表头
+ * @param onActionClick 表格操作按钮点击事件
+ */
+
+export function useColumns(
+  onActionClick?: OnActionClickFn<SystemUserApi.SystemUser>,
+): VxeTableGridOptions<SystemUserApi.SystemUser>['columns'] {
+  return [
+    {
+      field: 'id',
+      title: 'ID',
+    },
+    {
+      field: 'username',
+      title: '用户名',
+      width: 100,
+    },
+
+    {
+      field: 'is_superuser',
+      title: '超级用户状态',
+    },
+    {
+      field: 'date_joined',
+      title: '加入日期',
+      width: 150,
+      formatter: ({ cellValue }) => format_datetime(cellValue),
+    },
+    {
+      field: 'mobile',
+      title: 'mobile',
+    },
+    {
+      cellRender: {
+        name: 'CellTag',
+      },
+      field: 'status',
+      title: $t('system.status'),
+      width: 100,
+    },
+    {
+      field: 'login_ip',
+      title: 'login ip',
+      width: 150,
+    },
+    {
+      field: 'last_login',
+      title: '最后登录',
+      width: 150,
+      formatter: ({ cellValue }) => format_datetime(cellValue),
+    },
+    {
+      field: 'remark',
+      title: $t('system.remark'),
+    },
+    {
+      field: 'creator',
+      title: $t('system.creator'),
+      width: 80,
+    },
+    {
+      field: 'modifier',
+      title: $t('system.modifier'),
+      width: 80,
+    },
+    {
+      field: 'update_time',
+      title: $t('system.updateTime'),
+      width: 150,
+      formatter: ({ cellValue }) => format_datetime(cellValue),
+    },
+    {
+      field: 'create_time',
+      title: $t('system.createTime'),
+      width: 150,
+      formatter: ({ cellValue }) => format_datetime(cellValue),
+    },
+    {
+      align: 'center',
+      cellRender: {
+        attrs: {
+          nameField: 'name',
+          nameTitle: $t('system.user.name'),
+          onClick: onActionClick,
+        },
+        name: 'CellOperation',
+        options: ['edit', 'delete'],
+      },
+      field: 'action',
+      fixed: 'right',
+      title: '操作',
+      width: 120,
+    },
+  ];
+}

web/apps/web-antd/src/views/system/user/list.vue

@@ -0,0 +1,132 @@
+<script lang="ts" setup>
+import type {
+  OnActionClickParams,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+import type { SystemUserApi } from '#/models/system/user';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { Plus } from '@vben/icons';
+
+import { Button, message } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { $t } from '#/locales';
+import { SystemUserModel } from '#/models/system/user';
+
+import { useColumns } from './data';
+import Form from './modules/form.vue';
+
+const formModel = new SystemUserModel();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/**
+ * 编辑用户数据
+ */
+function onEdit(row: SystemUserApi.SystemUser) {
+  formModalApi.setData(row).open();
+}
+
+/**
+ * 创建新用户数据
+ */
+function onCreate() {
+  formModalApi.setData(null).open();
+}
+
+/**
+ * 删除用户数据
+ */
+function onDelete(row: SystemUserApi.SystemUser) {
+  const hideLoading = message.loading({
+    content: '删除用户数据',
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  formModel
+    .delete(row.id)
+    .then(() => {
+      message.success({
+        content: '删除成功',
+        key: 'action_process_msg',
+      });
+      refreshGrid();
+    })
+    .catch(() => {
+      hideLoading();
+    });
+}
+
+/**
+ * 表格操作按钮的回调函数
+ */
+function onActionClick({
+  code,
+  row,
+}: OnActionClickParams<SystemUserApi.SystemUser>) {
+  switch (code) {
+    case 'delete': {
+      onDelete(row);
+      break;
+    }
+    case 'edit': {
+      onEdit(row);
+      break;
+    }
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridEvents: {},
+  gridOptions: {
+    columns: useColumns(onActionClick),
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await formModel.list({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    toolbarConfig: {
+      custom: true,
+      export: false,
+      refresh: { code: 'query' },
+      zoom: true,
+    },
+  } as VxeTableGridOptions,
+});
+
+/**
+ * 刷新表格
+ */
+function refreshGrid() {
+  gridApi.query();
+}
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="refreshGrid" />
+    <Grid table-title="用户数据">
+      <template #toolbar-tools>
+        <Button type="primary" @click="onCreate">
+          <Plus class="size-5" />
+          {{ $t('ui.actionTitle.create', [$t('system.user.name')]) }}
+        </Button>
+      </template>
+    </Grid>
+  </Page>
+</template>

web/apps/web-antd/src/views/system/user/modules/form.vue

@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import type { SystemUserApi } from '#/models/system/user';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Button } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { $t } from '#/locales';
+import { SystemUserModel } from '#/models/system/user';
+
+import { useSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const formModel = new SystemUserModel();
+
+const formData = ref<SystemUserApi.SystemUser>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', [$t('system.user.name')])
+    : $t('ui.actionTitle.create', [$t('system.user.name')]);
+});
+
+const [Form, formApi] = useVbenForm({
+  layout: 'horizontal',
+
+  commonConfig: {
+    colon: true,
+    formItemClass: 'col-span-2 md:col-span-1',
+  },
+  wrapperClass: 'grid-cols-2 gap-x-4',
+  schema: useSchema(),
+  showDefaultActions: false,
+});
+
+function resetForm() {
+  formApi.resetForm();
+  formApi.setValues(formData.value || {});
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (valid) {
+      modalApi.lock();
+      const data = await formApi.getValues();
+      try {
+        await (formData.value?.id
+          ? formModel.update(formData.value.id, data)
+          : formModel.create(data));
+        await modalApi.close();
+        emit('success');
+      } finally {
+        modalApi.lock(false);
+      }
+    }
+  },
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      const data = modalApi.getData<SystemUserApi.SystemUser>();
+      if (data) {
+        formData.value = data;
+        formApi.setValues(formData.value);
+      }
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-full max-w-[800px]">
+    <Form />
+    <template #prepend-footer>
+      <div class="flex-auto">
+        <Button type="primary" danger @click="resetForm">
+          {{ $t('common.reset') }}
+        </Button>
+      </div>
+    </template>
+  </Modal>
+</template>
+<style lang="css" scoped></style>