diff --git a/.vscode/settings.json b/.vscode/settings.json
index d51511a2c..dc371b9b0 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -100,7 +100,7 @@
     "**/.stylelintcache": true,
     "**/.DS_Store": true,
     "**/vite.config.mts.*": true,
-    "**/tea.yaml": true,
+    "**/tea.yaml": true
   },
   "files.watcherExclude": {
     "**/.git/objects/**": true,
@@ -110,7 +110,7 @@
     "**/tmp/**": true,
     "**/bower_components/**": true,
     "**/dist/**": true,
-    "**/yarn.lock": true,
+    "**/yarn.lock": true
   },
 
   "typescript.tsserver.exclude": ["**/node_modules", "**/dist", "**/.turbo"],
diff --git a/apps/web-antd/src/api/member/address/index.ts b/apps/web-antd/src/api/member/address/index.ts
new file mode 100644
index 000000000..16b456eaa
--- /dev/null
+++ b/apps/web-antd/src/api/member/address/index.ts
@@ -0,0 +1,20 @@
+import { requestClient } from '#/api/request';
+
+export namespace MemberAddressApi {
+  /** 收件地址信息 */
+  export interface Address {
+    id?: number;
+    name: string;
+    mobile: string;
+    areaId: number;
+    detailAddress: string;
+    defaultStatus: boolean;
+  }
+}
+
+/** 查询用户收件地址列表 */
+export function getAddressList(params: any) {
+  return requestClient.get<MemberAddressApi.Address[]>('/member/address/list', {
+    params,
+  });
+}
diff --git a/apps/web-antd/src/api/member/config/index.ts b/apps/web-antd/src/api/member/config/index.ts
new file mode 100644
index 000000000..073110d66
--- /dev/null
+++ b/apps/web-antd/src/api/member/config/index.ts
@@ -0,0 +1,22 @@
+import { requestClient } from '#/api/request';
+
+export namespace MemberConfigApi {
+  /** 积分设置信息 */
+  export interface Config {
+    id?: number;
+    pointTradeDeductEnable: number;
+    pointTradeDeductUnitPrice: number;
+    pointTradeDeductMaxPrice: number;
+    pointTradeGivePoint: number;
+  }
+}
+
+/** 查询积分设置详情 */
+export function getConfig() {
+  return requestClient.get<MemberConfigApi.Config>('/member/config/get');
+}
+
+/** 新增修改积分设置 */
+export function saveConfig(data: MemberConfigApi.Config) {
+  return requestClient.put('/member/config/save', data);
+}
diff --git a/apps/web-antd/src/api/member/experience-record/index.ts b/apps/web-antd/src/api/member/experience-record/index.ts
new file mode 100644
index 000000000..f36297f1e
--- /dev/null
+++ b/apps/web-antd/src/api/member/experience-record/index.ts
@@ -0,0 +1,33 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MemberExperienceRecordApi {
+  /** 会员经验记录信息 */
+  export interface ExperienceRecord {
+    id?: number;
+    userId: number;
+    bizId: string;
+    bizType: number;
+    title: string;
+    description: string;
+    experience: number;
+    totalExperience: number;
+  }
+}
+
+/** 查询会员经验记录列表 */
+export function getExperienceRecordPage(params: PageParam) {
+  return requestClient.get<
+    PageResult<MemberExperienceRecordApi.ExperienceRecord>
+  >('/member/experience-record/page', {
+    params,
+  });
+}
+
+/** 查询会员经验记录详情 */
+export function getExperienceRecord(id: number) {
+  return requestClient.get<MemberExperienceRecordApi.ExperienceRecord>(
+    `/member/experience-record/get?id=${id}`,
+  );
+}
diff --git a/apps/web-antd/src/api/member/group/index.ts b/apps/web-antd/src/api/member/group/index.ts
new file mode 100644
index 000000000..93c2ca3e9
--- /dev/null
+++ b/apps/web-antd/src/api/member/group/index.ts
@@ -0,0 +1,50 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MemberGroupApi {
+  /** 用户分组信息 */
+  export interface Group {
+    id?: number;
+    name: string;
+    remark: string;
+    status: number;
+  }
+}
+
+/** 查询用户分组列表 */
+export function getGroupPage(params: PageParam) {
+  return requestClient.get<PageResult<MemberGroupApi.Group>>(
+    '/member/group/page',
+    {
+      params,
+    },
+  );
+}
+
+/** 查询用户分组详情 */
+export function getGroup(id: number) {
+  return requestClient.get<MemberGroupApi.Group>(`/member/group/get?id=${id}`);
+}
+
+/** 新增用户分组 */
+export function createGroup(data: MemberGroupApi.Group) {
+  return requestClient.post('/member/group/create', data);
+}
+
+/** 查询用户分组 - 精简信息列表 */
+export function getSimpleGroupList() {
+  return requestClient.get<MemberGroupApi.Group[]>(
+    '/member/group/list-all-simple',
+  );
+}
+
+/** 修改用户分组 */
+export function updateGroup(data: MemberGroupApi.Group) {
+  return requestClient.put('/member/group/update', data);
+}
+
+/** 删除用户分组 */
+export function deleteGroup(id: number) {
+  return requestClient.delete(`/member/group/delete?id=${id}`);
+}
diff --git a/apps/web-antd/src/api/member/level/index.ts b/apps/web-antd/src/api/member/level/index.ts
new file mode 100644
index 000000000..850d9b820
--- /dev/null
+++ b/apps/web-antd/src/api/member/level/index.ts
@@ -0,0 +1,49 @@
+import { requestClient } from '#/api/request';
+
+export namespace MemberLevelApi {
+  /** 会员等级信息 */
+  export interface Level {
+    id?: number;
+    name: string;
+    experience: number;
+    value: number;
+    discountPercent: number;
+    icon: string;
+    bgUrl: string;
+    status: number;
+  }
+}
+
+/** 查询会员等级列表 */
+export function getLevelList(params: MemberLevelApi.Level) {
+  return requestClient.get<MemberLevelApi.Level[]>('/member/level/list', {
+    params,
+  });
+}
+
+/** 查询会员等级详情 */
+export function getLevel(id: number) {
+  return requestClient.get<MemberLevelApi.Level>(`/member/level/get?id=${id}`);
+}
+
+/** 查询会员等级 - 精简信息列表 */
+export function getSimpleLevelList() {
+  return requestClient.get<MemberLevelApi.Level[]>(
+    '/member/level/list-all-simple',
+  );
+}
+
+/** 新增会员等级 */
+export function createLevel(data: MemberLevelApi.Level) {
+  return requestClient.post('/member/level/create', data);
+}
+
+/** 修改会员等级 */
+export function updateLevel(data: MemberLevelApi.Level) {
+  return requestClient.put('/member/level/update', data);
+}
+
+/** 删除会员等级 */
+export function deleteLevel(id: number) {
+  return requestClient.delete(`/member/level/delete?id=${id}`);
+}
diff --git a/apps/web-antd/src/api/member/point/record/index.ts b/apps/web-antd/src/api/member/point/record/index.ts
new file mode 100644
index 000000000..7f6797e8a
--- /dev/null
+++ b/apps/web-antd/src/api/member/point/record/index.ts
@@ -0,0 +1,28 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MemberPointRecordApi {
+  /** 用户积分记录信息 */
+  export interface Record {
+    id?: number;
+    bizId: string;
+    bizType: string;
+    title: string;
+    description: string;
+    point: number;
+    totalPoint: number;
+    userId: number;
+    createDate: Date;
+  }
+}
+
+/** 查询用户积分记录列表 */
+export function getRecordPage(params: PageParam) {
+  return requestClient.get<PageResult<MemberPointRecordApi.Record>>(
+    '/member/point/record/page',
+    {
+      params,
+    },
+  );
+}
diff --git a/apps/web-antd/src/api/member/signin/config/index.ts b/apps/web-antd/src/api/member/signin/config/index.ts
new file mode 100644
index 000000000..cf113b781
--- /dev/null
+++ b/apps/web-antd/src/api/member/signin/config/index.ts
@@ -0,0 +1,41 @@
+import { requestClient } from '#/api/request';
+
+export namespace MemberSignInConfigApi {
+  /** 积分签到规则信息 */
+  export interface SignInConfig {
+    id?: number;
+    day?: number;
+    point?: number;
+    experience?: number;
+    status?: number;
+  }
+}
+
+/** 查询积分签到规则列表 */
+export function getSignInConfigList() {
+  return requestClient.get<MemberSignInConfigApi.SignInConfig[]>(
+    '/member/sign-in/config/list',
+  );
+}
+
+/** 查询积分签到规则详情 */
+export function getSignInConfig(id: number) {
+  return requestClient.get<MemberSignInConfigApi.SignInConfig>(
+    `/member/sign-in/config/get?id=${id}`,
+  );
+}
+
+/** 新增积分签到规则 */
+export function createSignInConfig(data: MemberSignInConfigApi.SignInConfig) {
+  return requestClient.post('/member/sign-in/config/create', data);
+}
+
+/** 修改积分签到规则 */
+export function updateSignInConfig(data: MemberSignInConfigApi.SignInConfig) {
+  return requestClient.put('/member/sign-in/config/update', data);
+}
+
+/** 删除积分签到规则 */
+export function deleteSignInConfig(id: number) {
+  return requestClient.delete(`/member/sign-in/config/delete?id=${id}`);
+}
diff --git a/apps/web-antd/src/api/member/signin/record/index.ts b/apps/web-antd/src/api/member/signin/record/index.ts
new file mode 100644
index 000000000..7d5766d66
--- /dev/null
+++ b/apps/web-antd/src/api/member/signin/record/index.ts
@@ -0,0 +1,23 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MemberSignInRecordApi {
+  /** 用户签到积分信息 */
+  export interface SignInRecord {
+    id?: number;
+    userId: number;
+    day: number;
+    point: number;
+  }
+}
+
+/** 查询用户签到积分列表 */
+export function getSignInRecordPage(params: PageParam) {
+  return requestClient.get<PageResult<MemberSignInRecordApi.SignInRecord>>(
+    '/member/sign-in/record/page',
+    {
+      params,
+    },
+  );
+}
diff --git a/apps/web-antd/src/api/member/tag/index.ts b/apps/web-antd/src/api/member/tag/index.ts
new file mode 100644
index 000000000..d5c2ef44e
--- /dev/null
+++ b/apps/web-antd/src/api/member/tag/index.ts
@@ -0,0 +1,43 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MemberTagApi {
+  /** 会员标签信息 */
+  export interface Tag {
+    id?: number;
+    name: string;
+  }
+}
+
+/** 查询会员标签列表 */
+export function getMemberTagPage(params: PageParam) {
+  return requestClient.get<PageResult<MemberTagApi.Tag>>('/member/tag/page', {
+    params,
+  });
+}
+
+/** 查询会员标签详情 */
+export function getMemberTag(id: number) {
+  return requestClient.get<MemberTagApi.Tag>(`/member/tag/get?id=${id}`);
+}
+
+/** 查询会员标签 - 精简信息列表 */
+export function getSimpleTagList() {
+  return requestClient.get<MemberTagApi.Tag[]>('/member/tag/list-all-simple');
+}
+
+/** 新增会员标签 */
+export function createMemberTag(data: MemberTagApi.Tag) {
+  return requestClient.post('/member/tag/create', data);
+}
+
+/** 修改会员标签 */
+export function updateMemberTag(data: MemberTagApi.Tag) {
+  return requestClient.put('/member/tag/update', data);
+}
+
+/** 删除会员标签 */
+export function deleteMemberTag(id: number) {
+  return requestClient.delete(`/member/tag/delete?id=${id}`);
+}
diff --git a/apps/web-antd/src/api/member/user/index.ts b/apps/web-antd/src/api/member/user/index.ts
new file mode 100644
index 000000000..e8a5a35b7
--- /dev/null
+++ b/apps/web-antd/src/api/member/user/index.ts
@@ -0,0 +1,70 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MemberUserApi {
+  /** 会员用户信息 */
+  export interface User {
+    id?: number;
+    avatar?: string;
+    birthday?: number;
+    createTime?: number;
+    loginDate?: number;
+    loginIp: string;
+    mark: string;
+    mobile: string;
+    name?: string;
+    nickname?: string;
+    registerIp: string;
+    sex: number;
+    status: number;
+    areaId?: number;
+    areaName?: string;
+    levelName: null | string;
+    point?: null | number;
+    totalPoint?: null | number;
+    experience?: null | number;
+  }
+
+  /** 会员用户等级更新信息 */
+  export interface UserLevelUpdate {
+    id: number;
+    levelId: number;
+  }
+
+  /** 会员用户积分更新信息 */
+  export interface UserPointUpdate {
+    id: number;
+    point: number;
+  }
+}
+
+/** 查询会员用户列表 */
+export function getUserPage(params: PageParam) {
+  return requestClient.get<PageResult<MemberUserApi.User>>(
+    '/member/user/page',
+    {
+      params,
+    },
+  );
+}
+
+/** 查询会员用户详情 */
+export function getUser(id: number) {
+  return requestClient.get<MemberUserApi.User>(`/member/user/get?id=${id}`);
+}
+
+/** 修改会员用户 */
+export function updateUser(data: MemberUserApi.User) {
+  return requestClient.put('/member/user/update', data);
+}
+
+/** 修改会员用户等级 */
+export function updateUserLevel(data: MemberUserApi.UserLevelUpdate) {
+  return requestClient.put('/member/user/update-level', data);
+}
+
+/** 修改会员用户积分 */
+export function updateUserPoint(data: MemberUserApi.UserPointUpdate) {
+  return requestClient.put('/member/user/update-point', data);
+}
diff --git a/apps/web-antd/src/components/upload/input-upload.vue b/apps/web-antd/src/components/upload/input-upload.vue
index 11ee4cf03..0b2df8540 100644
--- a/apps/web-antd/src/components/upload/input-upload.vue
+++ b/apps/web-antd/src/components/upload/input-upload.vue
@@ -3,40 +3,51 @@ import type { InputProps, TextAreaProps } from 'ant-design-vue';
 
 import type { FileUploadProps } from './typing';
 
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 
+import { useVModel } from '@vueuse/core';
 import { Col, Input, Row, Textarea } from 'ant-design-vue';
 
 import FileUpload from './file-upload.vue';
 
 const props = defineProps<{
+  defaultValue?: number | string;
   fileUploadProps?: FileUploadProps;
   inputProps?: InputProps;
   inputType?: 'input' | 'textarea';
+  modelValue?: number | string;
   textareaProps?: TextAreaProps;
 }>();
 
-const emit = defineEmits(['change', 'update:value']);
+const emits = defineEmits<{
+  (e: 'change', payload: number | string): void;
+  (e: 'update:value', payload: number | string): void;
+  (e: 'update:modelValue', payload: number | string): void;
+}>();
 
-const value = ref('');
+const modelValue = useVModel(props, 'modelValue', emits, {
+  defaultValue: props.defaultValue,
+  passive: true,
+});
 
 function handleReturnText(text: string) {
-  value.value = text;
-  emit('change', value.value);
-  emit('update:value', value.value);
+  modelValue.value = text;
+  emits('change', modelValue.value);
+  emits('update:value', modelValue.value);
+  emits('update:modelValue', modelValue.value);
 }
 
 const inputProps = computed(() => {
   return {
     ...props.inputProps,
-    value: value.value,
+    value: modelValue.value,
   };
 });
 
 const textareaProps = computed(() => {
   return {
     ...props.textareaProps,
-    value: value.value,
+    value: modelValue.value,
   };
 });
 
diff --git a/apps/web-antd/src/router/routes/modules/member.ts b/apps/web-antd/src/router/routes/modules/member.ts
new file mode 100644
index 000000000..4f4e81723
--- /dev/null
+++ b/apps/web-antd/src/router/routes/modules/member.ts
@@ -0,0 +1,16 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/member/user/detail',
+    component: () => import('#/views/member/user/modules/detail.vue'),
+    name: 'MemberUserDetail',
+    meta: {
+      title: '会员详情',
+      icon: 'lucide:user',
+      hideInMenu: true,
+    },
+  },
+];
+
+export default routes;
diff --git a/apps/web-antd/src/utils/download.ts b/apps/web-antd/src/utils/download.ts
index acb0129c8..f7cf56596 100644
--- a/apps/web-antd/src/utils/download.ts
+++ b/apps/web-antd/src/utils/download.ts
@@ -2,6 +2,7 @@
  * 下载工具模块
  * 提供多种文件格式的下载功能
  */
+// 请使用 @vben/utils/download 代替 packages/@core/base/shared/src/utils/download.ts
 
 /**
  * 图片下载配置接口
diff --git a/apps/web-antd/src/utils/index.ts b/apps/web-antd/src/utils/index.ts
index 479a35472..b33984b78 100644
--- a/apps/web-antd/src/utils/index.ts
+++ b/apps/web-antd/src/utils/index.ts
@@ -6,4 +6,3 @@ export * from './formatTime';
 export * from './formCreate';
 export * from './rangePickerProps';
 export * from './routerHelper';
-export * from './validator';
diff --git a/apps/web-antd/src/utils/validator.ts b/apps/web-antd/src/utils/validator.ts
deleted file mode 100644
index 3ae62f787..000000000
--- a/apps/web-antd/src/utils/validator.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// 参数校验，对标 Hutool 的 Validator 工具类
-
-/** 手机号正则表达式（中国） */
-const MOBILE_REGEX = /(?:0|86|\+86)?1[3-9]\d{9}/;
-
-/**
- * 验证是否为手机号码（中国）
- *
- * @param value 值
- * @returns 是否为手机号码（中国）
- */
-export function isMobile(value?: null | string): boolean {
-  if (!value) {
-    return false;
-  }
-  return MOBILE_REGEX.test(value);
-}
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/task-list.vue b/apps/web-antd/src/views/bpm/processInstance/detail/modules/task-list.vue
index 7a1e44ada..145b04f44 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/task-list.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/task-list.vue
@@ -199,7 +199,7 @@ defineExpose({
           <Button
             v-if="row.formId > 0"
             type="primary"
-            @click="showFormDetail(row)"`
+            @click="showFormDetail(row)"
             size="small"
             ghost
             class="ml-1"
diff --git a/apps/web-antd/src/views/crm/clue/data.ts b/apps/web-antd/src/views/crm/clue/data.ts
index 74edf0faf..abc05ed4e 100644
--- a/apps/web-antd/src/views/crm/clue/data.ts
+++ b/apps/web-antd/src/views/crm/clue/data.ts
@@ -1,18 +1,15 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { CrmClueApi } from '#/api/crm/clue';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
 
-import { useAccess } from '@vben/access';
 import { formatDateTime } from '@vben/utils';
 
+import { getAreaTree } from '#/api/system/area';
 import { DictTag } from '#/components/dict-tag';
 import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
 
-const { hasAccessByCodes } = useAccess();
-
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -92,9 +89,10 @@ export function useFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'areaId',
       label: '地址',
-      component: 'Cascader',
+      component: 'ApiTreeSelect',
       componentProps: {
-        api: 'getAreaTree',
+        api: () => getAreaTree(),
+        fieldNames: { label: 'name', value: 'id', children: 'children' },
       },
     },
     {
@@ -162,14 +160,11 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = CrmClueApi.Clue>(
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
+export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'name',
       title: '线索名称',
-      minWidth: 160,
       fixed: 'left',
       slots: {
         default: 'name',
@@ -178,7 +173,6 @@ export function useGridColumns<T = CrmClueApi.Clue>(
     {
       field: 'source',
       title: '线索来源',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_CUSTOMER_SOURCE },
@@ -187,27 +181,22 @@ export function useGridColumns<T = CrmClueApi.Clue>(
     {
       field: 'mobile',
       title: '手机',
-      minWidth: 120,
     },
     {
       field: 'telephone',
       title: '电话',
-      minWidth: 130,
     },
     {
       field: 'email',
       title: '邮箱',
-      minWidth: 180,
     },
     {
       field: 'detailAddress',
       title: '地址',
-      minWidth: 180,
     },
     {
       field: 'industryId',
       title: '客户行业',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_CUSTOMER_INDUSTRY },
@@ -216,7 +205,6 @@ export function useGridColumns<T = CrmClueApi.Clue>(
     {
       field: 'level',
       title: '客户级别',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_CUSTOMER_LEVEL },
@@ -225,66 +213,40 @@ export function useGridColumns<T = CrmClueApi.Clue>(
     {
       field: 'ownerUserName',
       title: '负责人',
-      minWidth: 100,
     },
     {
       field: 'ownerUserDeptName',
       title: '所属部门',
-      minWidth: 100,
     },
     {
       field: 'contactNextTime',
       title: '下次联系时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'contactLastTime',
       title: '最后跟进时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'updateTime',
       title: '更新时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'creatorName',
       title: '创建人',
-      minWidth: 100,
     },
     {
-      field: 'operation',
       title: '操作',
-      width: 130,
+      width: 140,
       fixed: 'right',
-      align: 'center',
-      cellRender: {
-        attrs: {
-          nameField: 'name',
-          nameTitle: '线索',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'edit',
-            show: hasAccessByCodes(['crm:clue:update']),
-          },
-          {
-            code: 'delete',
-            show: hasAccessByCodes(['crm:clue:delete']),
-          },
-        ],
-      },
+      slots: { default: 'actions' },
     },
   ];
 }
diff --git a/apps/web-antd/src/views/crm/clue/index.vue b/apps/web-antd/src/views/crm/clue/index.vue
index c9f519bee..b9aa665f2 100644
--- a/apps/web-antd/src/views/crm/clue/index.vue
+++ b/apps/web-antd/src/views/crm/clue/index.vue
@@ -1,19 +1,15 @@
 <script lang="ts" setup>
-import type {
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmClueApi } from '#/api/crm/clue';
 
 import { useRouter } from 'vue-router';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { Download, Plus } from '@vben/icons';
 import { downloadFileFromBlobPart } from '@vben/utils';
 
 import { Button, message } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteClue, exportClue, getCluePage } from '#/api/crm/clue';
 import { DocAlert } from '#/components/doc-alert';
 import { $t } from '#/locales';
@@ -33,55 +29,43 @@ function onRefresh() {
   gridApi.query();
 }
 
-/** 导出表格 */
-async function onExport() {
-  const data = await exportClue(await gridApi.formApi.getValues());
-  downloadFileFromBlobPart({ fileName: '线索.xls', source: data });
-}
-
 /** 创建线索 */
-function onCreate() {
+function handleCreate() {
   formModalApi.setData(null).open();
 }
 
 /** 编辑线索 */
-function onEdit(row: CrmClueApi.Clue) {
+function handleEdit(row: CrmClueApi.Clue) {
   formModalApi.setData(row).open();
 }
 
 /** 删除线索 */
-async function onDelete(row: CrmClueApi.Clue) {
+async function handleDelete(row: CrmClueApi.Clue) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    duration: 0,
-    key: 'action_process_msg',
+    key: 'action_key_msg',
   });
   try {
     await deleteClue(row.id as number);
-    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_key_msg',
+    });
     onRefresh();
   } catch {
     hideLoading();
   }
 }
 
-/** 查看线索详情 */
-function onDetail(row: CrmClueApi.Clue) {
-  push({ name: 'CrmClueDetail', params: { id: row.id } });
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportClue(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '线索.xls', source: data });
 }
 
-/** 表格操作按钮的回调函数 */
-function onActionClick({ code, row }: OnActionClickParams<CrmClueApi.Clue>) {
-  switch (code) {
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
-    case 'edit': {
-      onEdit(row);
-      break;
-    }
-  }
+/** 查看线索详情 */
+function handleDetail(row: CrmClueApi.Clue) {
+  push({ name: 'CrmClueDetail', params: { id: row.id } });
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -89,7 +73,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -130,29 +114,54 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <FormModal @success="onRefresh" />
     <Grid table-title="线索列表">
       <template #toolbar-tools>
-        <Button
-          type="primary"
-          @click="onCreate"
-          v-access:code="['crm:clue:create']"
-        >
-          <Plus class="size-5" />
-          {{ $t('ui.actionTitle.create', ['线索']) }}
-        </Button>
-        <Button
-          type="primary"
-          class="ml-2"
-          @click="onExport"
-          v-access:code="['crm:clue:export']"
-        >
-          <Download class="size-5" />
-          {{ $t('ui.actionTitle.export') }}
-        </Button>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['线索']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:clue:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['crm:clue:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
       </template>
       <template #name="{ row }">
-        <Button type="link" @click="onDetail(row)">
+        <Button type="link" @click="handleDetail(row)">
           {{ row.name }}
         </Button>
       </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['crm:clue:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['crm:clue:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
     </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/customer/data.ts b/apps/web-antd/src/views/crm/customer/data.ts
index 87cdb42df..c1f505a48 100644
--- a/apps/web-antd/src/views/crm/customer/data.ts
+++ b/apps/web-antd/src/views/crm/customer/data.ts
@@ -8,6 +8,8 @@ import { h } from 'vue';
 import { useAccess } from '@vben/access';
 import { formatDateTime } from '@vben/utils';
 
+import { getAreaTree } from '#/api/system/area';
+import { getSimpleUserList } from '#/api/system/user';
 import { DictTag } from '#/components/dict-tag';
 import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
 
@@ -47,9 +49,13 @@ export function useFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'ownerUserId',
       label: '负责人',
-      component: 'Select',
+      component: 'ApiSelect',
       componentProps: {
-        api: 'getSimpleUserList',
+        api: () => getSimpleUserList(),
+        fieldNames: {
+          label: 'nickname',
+          value: 'id',
+        },
       },
       rules: 'required',
     },
@@ -92,9 +98,10 @@ export function useFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'areaId',
       label: '地址',
-      component: 'Cascader',
+      component: 'ApiTreeSelect',
       componentProps: {
-        api: 'getAreaTree',
+        api: () => getAreaTree(),
+        fieldNames: { label: 'name', value: 'id', children: 'children' },
       },
     },
     {
diff --git a/apps/web-antd/src/views/crm/customer/index.vue b/apps/web-antd/src/views/crm/customer/index.vue
index cac8566da..df3c8e7ee 100644
--- a/apps/web-antd/src/views/crm/customer/index.vue
+++ b/apps/web-antd/src/views/crm/customer/index.vue
@@ -147,7 +147,7 @@ function onChangeSceneType(key: number | string) {
     <FormModal @success="onRefresh" />
 
     <Grid>
-      <template #toolbar-actions>
+      <template #top>
         <Tabs class="border-none" @change="onChangeSceneType">
           <Tabs.TabPane tab="我负责的" key="1" />
           <Tabs.TabPane tab="我参与的" key="2" />
diff --git a/apps/web-antd/src/views/crm/customer/modules/form.vue b/apps/web-antd/src/views/crm/customer/modules/form.vue
index 504947ff9..ea0901fab 100644
--- a/apps/web-antd/src/views/crm/customer/modules/form.vue
+++ b/apps/web-antd/src/views/crm/customer/modules/form.vue
@@ -29,9 +29,9 @@ const [Form, formApi] = useVbenForm({
     componentProps: {
       class: 'w-full',
     },
-    formItemClass: 'col-span-2',
-    labelWidth: 120,
   },
+  // 一共2列
+  wrapperClass: 'grid-cols-2',
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,
diff --git a/apps/web-antd/src/views/crm/product/data.ts b/apps/web-antd/src/views/crm/product/data.ts
new file mode 100644
index 000000000..592460a61
--- /dev/null
+++ b/apps/web-antd/src/views/crm/product/data.ts
@@ -0,0 +1,166 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { z } from '#/adapter/form';
+import { CommonStatusEnum, DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '产品名称',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'no',
+      label: '产品编码',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'categoryName',
+      label: '产品类型',
+      rules: 'required',
+    },
+    {
+      fieldName: 'unit',
+      label: '产品单位',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.CRM_PRODUCT_UNIT),
+      },
+      rules: 'required',
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'price',
+      label: '价格（元）',
+      rules: 'required',
+      componentProps: {
+        min: 0,
+        precision: 2,
+        step: 0.1,
+      },
+    },
+    {
+      component: 'Textarea',
+      fieldName: 'description',
+      label: '产品描述',
+    },
+    {
+      fieldName: 'status',
+      label: '上架状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.CRM_PRODUCT_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '产品名称',
+      component: 'Input',
+    },
+    {
+      fieldName: 'status',
+      label: '上架状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.CRM_PRODUCT_STATUS, 'number'),
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '产品编号',
+      visible: false,
+    },
+    {
+      field: 'name',
+      title: '产品名称',
+      slots: { default: 'name' },
+    },
+    {
+      field: 'categoryName',
+      title: '产品类型',
+    },
+    {
+      field: 'unit',
+      title: '产品单位',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_PRODUCT_UNIT },
+      },
+    },
+    {
+      field: 'no',
+      title: '产品编码',
+    },
+    {
+      field: 'price',
+      title: '价格（元）',
+      formatter: 'formatNumber',
+    },
+    {
+      field: 'description',
+      title: '产品描述',
+    },
+    {
+      field: 'status',
+      title: '上架状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_PRODUCT_STATUS },
+      },
+    },
+    {
+      field: 'ownerUserName',
+      title: '负责人',
+    },
+    {
+      field: 'updateTime',
+      title: '更新时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'creatorName',
+      title: '创建人',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/crm/product/index.vue b/apps/web-antd/src/views/crm/product/index.vue
index 805a634a5..93bcbd458 100644
--- a/apps/web-antd/src/views/crm/product/index.vue
+++ b/apps/web-antd/src/views/crm/product/index.vue
@@ -1,34 +1,157 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmProductApi } from '#/api/crm/product';
 
-import { Button } from 'ant-design-vue';
+import { useRouter } from 'vue-router';
 
-import { DocAlert } from '#/components/doc-alert';
+import { Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { Button, message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteProduct,
+  exportProduct,
+  getProductPage,
+} from '#/api/crm/product';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const { push } = useRouter();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportProduct(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '产品.xls', source: data });
+}
+
+/** 打开详情 */
+function handleDetail(row: CrmProductApi.Product) {
+  push({ name: 'CrmProductDetail', params: { id: row.id } });
+}
+
+/** 创建产品 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑产品 */
+function handleEdit(row: CrmProductApi.Product) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除产品 */
+async function handleDelete(row: CrmProductApi.Product) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteProduct(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getProductPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmProductApi.Product>,
+});
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="【产品】产品管理、产品分类"
-      url="https://doc.iocoder.cn/crm/product/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/product/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/product/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <FormModal @success="onRefresh" />
+    <Grid table-title="产品列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['产品']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:product:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['crm:product:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #name="{ row }">
+        <Button type="link" @click="handleDetail(row)">{{ row.name }}</Button>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['crm:product:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['crm:product:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/product/modules/form.vue b/apps/web-antd/src/views/crm/product/modules/form.vue
new file mode 100644
index 000000000..ef24d9a94
--- /dev/null
+++ b/apps/web-antd/src/views/crm/product/modules/form.vue
@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import type { CrmProductApi } from '#/api/crm/product';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { createProduct, getProduct, updateProduct } from '#/api/crm/product';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<CrmProductApi.Product>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['产品'])
+    : $t('ui.actionTitle.create', ['产品']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as CrmProductApi.Product;
+    try {
+      await (formData.value?.id ? updateProduct(data) : createProduct(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<CrmProductApi.Product>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getProduct(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-[600px]" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/infra/apiAccessLog/modules/detail.vue b/apps/web-antd/src/views/infra/apiAccessLog/modules/detail.vue
index dcac73c0d..b09c1bf29 100644
--- a/apps/web-antd/src/views/infra/apiAccessLog/modules/detail.vue
+++ b/apps/web-antd/src/views/infra/apiAccessLog/modules/detail.vue
@@ -3,7 +3,7 @@ import type { InfraApiAccessLogApi } from '#/api/infra/api-access-log';
 
 import { ref } from 'vue';
 
-import { useVbenModal } from '@vben/common-ui';
+import { JsonViewer, useVbenModal } from '@vben/common-ui';
 import { formatDateTime } from '@vben/utils';
 
 import { Descriptions } from 'ant-design-vue';
@@ -71,7 +71,7 @@ const [Modal, modalApi] = useVbenModal({
         {{ formData?.requestMethod }} {{ formData?.requestUrl }}
       </Descriptions.Item>
       <Descriptions.Item label="请求参数">
-        {{ formData?.requestParams }}
+        <JsonViewer :value="formData?.requestParams" preview-mode />
       </Descriptions.Item>
       <Descriptions.Item label="请求结果">
         {{ formData?.responseBody }}
diff --git a/apps/web-antd/src/views/infra/apiErrorLog/modules/detail.vue b/apps/web-antd/src/views/infra/apiErrorLog/modules/detail.vue
index 9b9257c34..ff5aba82e 100644
--- a/apps/web-antd/src/views/infra/apiErrorLog/modules/detail.vue
+++ b/apps/web-antd/src/views/infra/apiErrorLog/modules/detail.vue
@@ -3,10 +3,10 @@ import type { InfraApiErrorLogApi } from '#/api/infra/api-error-log';
 
 import { ref } from 'vue';
 
-import { useVbenModal } from '@vben/common-ui';
+import { JsonViewer, useVbenModal } from '@vben/common-ui';
 import { formatDateTime } from '@vben/utils';
 
-import { Descriptions, Input } from 'ant-design-vue';
+import { Descriptions } from 'ant-design-vue';
 
 import { DictTag } from '#/components/dict-tag';
 import { DICT_TYPE } from '#/utils';
@@ -71,7 +71,7 @@ const [Modal, modalApi] = useVbenModal({
         {{ formData?.requestMethod }} {{ formData?.requestUrl }}
       </Descriptions.Item>
       <Descriptions.Item label="请求参数">
-        {{ formData?.requestParams }}
+        <JsonViewer :value="formData?.requestParams" preview-mode />
       </Descriptions.Item>
       <Descriptions.Item label="异常时间">
         {{ formatDateTime(formData?.exceptionTime || '') }}
@@ -80,11 +80,7 @@ const [Modal, modalApi] = useVbenModal({
         {{ formData?.exceptionName }}
       </Descriptions.Item>
       <Descriptions.Item v-if="formData?.exceptionStackTrace" label="异常堆栈">
-        <Input.TextArea
-          :value="formData?.exceptionStackTrace"
-          :auto-size="{ maxRows: 20 }"
-          readonly
-        />
+        <JsonViewer :value="formData?.exceptionStackTrace" preview-mode />
       </Descriptions.Item>
       <Descriptions.Item label="处理状态">
         <DictTag
diff --git a/apps/web-antd/src/views/infra/config/index.vue b/apps/web-antd/src/views/infra/config/index.vue
index d51cea7bb..9d4d6d0ca 100644
--- a/apps/web-antd/src/views/infra/config/index.vue
+++ b/apps/web-antd/src/views/infra/config/index.vue
@@ -97,7 +97,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
         <TableAction
           :actions="[
             {
-              label: $t('ui.actionTitle.create', ['短信渠道']),
+              label: $t('ui.actionTitle.create', ['参数列表']),
               type: 'primary',
               icon: ACTION_ICON.ADD,
               auth: ['infra:config:create'],
diff --git a/apps/web-antd/src/views/infra/dataSourceConfig/modules/form.vue b/apps/web-antd/src/views/infra/dataSourceConfig/modules/form.vue
index 7a29a1d49..736c9d5cb 100644
--- a/apps/web-antd/src/views/infra/dataSourceConfig/modules/form.vue
+++ b/apps/web-antd/src/views/infra/dataSourceConfig/modules/form.vue
@@ -83,7 +83,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal :title="getTitle">
+  <Modal class="w-[40%]" :title="getTitle">
     <Form class="mx-4" />
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/infra/demo/demo01/index.vue b/apps/web-antd/src/views/infra/demo/demo01/index.vue
index 6226f4036..47841830c 100644
--- a/apps/web-antd/src/views/infra/demo/demo01/index.vue
+++ b/apps/web-antd/src/views/infra/demo/demo01/index.vue
@@ -1,19 +1,15 @@
 <script lang="ts" setup>
-import type {
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { Demo01ContactApi } from '#/api/infra/demo/demo01';
 
-import { h, ref } from 'vue';
+import { ref } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { Download, Plus, Trash2 } from '@vben/icons';
-import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+import { downloadFileFromBlobPart } from '@vben/utils';
 
-import { Button, message } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteDemo01Contact,
   deleteDemo01ContactListByIds,
@@ -36,17 +32,17 @@ function onRefresh() {
 }
 
 /** 创建示例联系人 */
-function onCreate() {
+function handleCreate() {
   formModalApi.setData({}).open();
 }
 
 /** 编辑示例联系人 */
-function onEdit(row: Demo01ContactApi.Demo01Contact) {
+function handleEdit(row: Demo01ContactApi.Demo01Contact) {
   formModalApi.setData(row).open();
 }
 
 /** 删除示例联系人 */
-async function onDelete(row: Demo01ContactApi.Demo01Contact) {
+async function handleDelete(row: Demo01ContactApi.Demo01Contact) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
     duration: 0,
@@ -62,14 +58,14 @@ async function onDelete(row: Demo01ContactApi.Demo01Contact) {
 }
 
 /** 批量删除示例联系人 */
-async function onDeleteBatch() {
+async function handleDeleteBatch() {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting'),
     duration: 0,
     key: 'action_process_msg',
   });
   try {
-    await deleteDemo01ContactListByIds(deleteIds.value);
+    await deleteDemo01ContactListByIds(checkedIds.value);
     message.success($t('ui.actionMessage.deleteSuccess'));
     onRefresh();
   } finally {
@@ -79,44 +75,27 @@ async function onDeleteBatch() {
 
 // TODO @puhui999：方法名，改成 handleRowCheckboxChange；注释：处理选中表格行
 // TODO @puhui999：deleteIds => checkedIds；然后注释去掉？
-const deleteIds = ref<number[]>([]); // 待删除示例联系人 ID
-function setDeleteIds({
+const checkedIds = ref<number[]>([]); // 待删除示例联系人 ID
+function setCheckedIds({
   records,
 }: {
   records: Demo01ContactApi.Demo01Contact[];
 }) {
-  deleteIds.value = records.map((item) => item.id);
+  checkedIds.value = records.map((item) => item.id);
 }
 
 /** 导出表格 */
-async function onExport() {
+async function handleExport() {
   const data = await exportDemo01Contact(await gridApi.formApi.getValues());
   downloadFileFromBlobPart({ fileName: '示例联系人.xls', source: data });
 }
 
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<Demo01ContactApi.Demo01Contact>) {
-  switch (code) {
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
-    case 'edit': {
-      onEdit(row);
-      break;
-    }
-  }
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     pagerConfig: {
       enabled: true,
@@ -142,8 +121,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<Demo01ContactApi.Demo01Contact>,
   gridEvents: {
-    checkboxAll: setDeleteIds,
-    checkboxChange: setDeleteIds,
+    checkboxAll: setCheckedIds,
+    checkboxChange: setCheckedIds,
   },
 });
 </script>
@@ -154,34 +133,56 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
     <Grid table-title="示例联系人列表">
       <template #toolbar-tools>
-        <Button
-          :icon="h(Plus)"
-          type="primary"
-          @click="onCreate"
-          v-access:code="['infra:demo01-contact:create']"
-        >
-          {{ $t('ui.actionTitle.create', ['示例联系人']) }}
-        </Button>
-        <Button
-          :icon="h(Download)"
-          type="primary"
-          class="ml-2"
-          @click="onExport"
-          v-access:code="['infra:demo01-contact:export']"
-        >
-          {{ $t('ui.actionTitle.export') }}
-        </Button>
-        <Button
-          :icon="h(Trash2)"
-          type="primary"
-          danger
-          class="ml-2"
-          :disabled="isEmpty(deleteIds)"
-          @click="onDeleteBatch"
-          v-access:code="['infra:demo01-contact:delete']"
-        >
-          批量删除
-        </Button>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['示例联系人']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['infra:demo01-contact:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['infra:demo01-contact:export'],
+              onClick: handleExport,
+            },
+            {
+              label: '批量删除',
+              type: 'primary',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['infra:demo01-contact:delete'],
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['infra:demo01-contact:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['infra:demo01-contact:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>
diff --git a/apps/web-antd/src/views/member/config/index.vue b/apps/web-antd/src/views/member/config/index.vue
index 3bcd2e0a5..b0e17b485 100644
--- a/apps/web-antd/src/views/member/config/index.vue
+++ b/apps/web-antd/src/views/member/config/index.vue
@@ -1,34 +1,114 @@
 <script lang="ts" setup>
+import type { MemberConfigApi } from '#/api/member/config';
+
+import { onMounted, ref } from 'vue';
+
 import { Page } from '@vben/common-ui';
 
-import { Button } from 'ant-design-vue';
+import { Card, message } from 'ant-design-vue';
 
-import { DocAlert } from '#/components/doc-alert';
+import { useVbenForm } from '#/adapter/form';
+import { getConfig, saveConfig } from '#/api/member/config';
+import { $t } from '#/locales';
+
+const emit = defineEmits(['success']);
+const formData = ref<MemberConfigApi.Config>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    // 所有表单项
+    labelClass: 'w-2/6',
+  },
+  layout: 'horizontal',
+  wrapperClass: 'grid-cols-1',
+  actionWrapperClass: 'text-center',
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Switch',
+      fieldName: 'pointTradeDeductEnable',
+      label: '积分抵扣',
+      help: '开启后，用户可以积分抵扣',
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'pointTradeDeductUnitPrice',
+      label: '积分抵扣单价',
+      help: '用户每消费1元，可以抵扣多少积分',
+      componentProps: {
+        min: 0,
+        precision: 2,
+        class: 'w-full',
+      },
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'pointTradeDeductMaxPrice',
+      label: '积分抵扣最大值',
+      help: '单次下单积分使用上限，0 不限制',
+      componentProps: {
+        min: 0,
+        class: 'w-full',
+      },
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'pointTradeGivePoint',
+      label: '1 元赠送多少分',
+      help: '下单支付金额按比例赠送积分（实际支付 1 元赠送多少积分）',
+      componentProps: {
+        min: 0,
+        class: 'w-full',
+      },
+    },
+  ],
+  // 提交函数
+  handleSubmit: onSubmit,
+});
+
+async function onSubmit() {
+  const { valid } = await formApi.validate();
+  if (!valid) {
+    return;
+  }
+  // 提交表单
+  const data = (await formApi.getValues()) as MemberConfigApi.Config;
+  formApi.setState({ commonConfig: { disabled: true } });
+  try {
+    await saveConfig(data);
+    // 关闭并提示
+    emit('success');
+    message.success($t('ui.actionMessage.operationSuccess'));
+  } finally {
+    formApi.setState({ commonConfig: { disabled: false } });
+  }
+}
+
+async function getConfigInfo() {
+  try {
+    const res = await getConfig();
+    formData.value = res;
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+onMounted(() => {
+  getConfigInfo();
+});
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="会员手册（功能开启）"
-      url="https://doc.iocoder.cn/member/build/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/member/config/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/member/config/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <Card title="积分设置">
+      <Form class="w-1/4" />
+    </Card>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/member/group/data.ts b/apps/web-antd/src/views/member/group/data.ts
new file mode 100644
index 000000000..e7466bd3e
--- /dev/null
+++ b/apps/web-antd/src/views/member/group/data.ts
@@ -0,0 +1,88 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { z } from '#/adapter/form';
+import { CommonStatusEnum, DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '分组名称',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '分组名称',
+      component: 'Input',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+    },
+    {
+      field: 'name',
+      title: '分组名称',
+    },
+    {
+      field: 'status',
+      title: '状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/member/group/index.vue b/apps/web-antd/src/views/member/group/index.vue
index 692c3f277..b4de637e7 100644
--- a/apps/web-antd/src/views/member/group/index.vue
+++ b/apps/web-antd/src/views/member/group/index.vue
@@ -1,34 +1,127 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MemberGroupApi } from '#/api/member/group';
 
-import { Button } from 'ant-design-vue';
+import { Page, useVbenModal } from '@vben/common-ui';
 
-import { DocAlert } from '#/components/doc-alert';
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteGroup, getGroupPage } from '#/api/member/group';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建分组 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑分组 */
+function handleEdit(row: MemberGroupApi.Group) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除分组 */
+async function handleDelete(row: MemberGroupApi.Group) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteGroup(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getGroupPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<MemberGroupApi.Group>,
+});
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="会员用户、标签、分组"
-      url="https://doc.iocoder.cn/member/user/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/member/group/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/member/group/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <FormModal @success="onRefresh" />
+    <Grid table-title="分组列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['分组']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['member:group:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['member:group:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['member:group:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/member/group/modules/form.vue b/apps/web-antd/src/views/member/group/modules/form.vue
new file mode 100644
index 000000000..19f88b3e7
--- /dev/null
+++ b/apps/web-antd/src/views/member/group/modules/form.vue
@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import type { MemberGroupApi } from '#/api/member/group';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { createGroup, getGroup, updateGroup } from '#/api/member/group';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MemberGroupApi.Group>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['会员分组'])
+    : $t('ui.actionTitle.create', ['会员分组']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MemberGroupApi.Group;
+    try {
+      await (formData.value?.id ? updateGroup(data) : createGroup(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MemberGroupApi.Group>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getGroup(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-[600px]" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/member/level/data.ts b/apps/web-antd/src/views/member/level/data.ts
new file mode 100644
index 000000000..f9597b326
--- /dev/null
+++ b/apps/web-antd/src/views/member/level/data.ts
@@ -0,0 +1,158 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { z } from '#/adapter/form';
+import { CommonStatusEnum, DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '等级名称',
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'level',
+      label: '等级',
+      componentProps: {
+        min: 0,
+        precision: 0,
+      },
+    },
+    {
+      fieldName: 'experience',
+      label: '升级经验',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        precision: 0,
+      },
+    },
+    {
+      fieldName: 'discountPercent',
+      label: '享受折扣(%)',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        max: 100,
+        precision: 0,
+      },
+    },
+    {
+      component: 'ImageUpload',
+      fieldName: 'icon',
+      label: '等级图标',
+      componentProps: {
+        maxSize: 1,
+      },
+    },
+    {
+      component: 'ImageUpload',
+      fieldName: 'backgroundUrl',
+      label: '等级背景图',
+      componentProps: {
+        maxSize: 1,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '等级名称',
+      component: 'Input',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+    },
+    {
+      field: 'icon',
+      title: '等级图标',
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'backgroundUrl',
+      title: '等级背景图',
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'name',
+      title: '等级名称',
+    },
+    {
+      field: 'level',
+      title: '等级',
+    },
+    {
+      field: 'experience',
+      title: '升级经验',
+    },
+    {
+      field: 'discountPercent',
+      title: '享受折扣(%)',
+    },
+    {
+      field: 'status',
+      title: '状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/member/level/index.vue b/apps/web-antd/src/views/member/level/index.vue
index 70fdaaf1c..a2dec54f7 100644
--- a/apps/web-antd/src/views/member/level/index.vue
+++ b/apps/web-antd/src/views/member/level/index.vue
@@ -1,34 +1,128 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MemberLevelApi } from '#/api/member/level';
 
-import { Button } from 'ant-design-vue';
+import { Page, useVbenModal } from '@vben/common-ui';
 
-import { DocAlert } from '#/components/doc-alert';
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteLevel, getLevelList } from '#/api/member/level';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建等级 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑等级 */
+function handleEdit(row: MemberLevelApi.Level) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除等级 */
+async function handleDelete(row: MemberLevelApi.Level) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteLevel(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async (_params, formValues) => {
+          return await getLevelList({
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<MemberLevelApi.Level>,
+});
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="会员等级、积分、签到"
-      url="https://doc.iocoder.cn/member/level/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/member/level/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/member/level/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <FormModal @success="onRefresh" />
+    <Grid table-title="等级列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['等级']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['member:level:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['member:level:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['member:level:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/member/level/modules/form.vue b/apps/web-antd/src/views/member/level/modules/form.vue
new file mode 100644
index 000000000..a47230a9b
--- /dev/null
+++ b/apps/web-antd/src/views/member/level/modules/form.vue
@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import type { MemberLevelApi } from '#/api/member/level';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { createLevel, getLevel, updateLevel } from '#/api/member/level';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MemberLevelApi.Level>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['等级'])
+    : $t('ui.actionTitle.create', ['等级']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MemberLevelApi.Level;
+    try {
+      await (formData.value?.id ? updateLevel(data) : createLevel(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MemberLevelApi.Level>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getLevel(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-[600px]" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/member/point/record/data.ts b/apps/web-antd/src/views/member/point/record/data.ts
new file mode 100644
index 000000000..153895546
--- /dev/null
+++ b/apps/web-antd/src/views/member/point/record/data.ts
@@ -0,0 +1,101 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { h } from 'vue';
+
+import { Tag } from 'ant-design-vue';
+
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'nickname',
+      label: '用户',
+      component: 'Input',
+    },
+    {
+      fieldName: 'bizType',
+      label: '业务类型',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.MEMBER_POINT_BIZ_TYPE, 'number'),
+      },
+    },
+    {
+      fieldName: 'title',
+      label: '积分标题',
+      component: 'Input',
+    },
+    {
+      fieldName: 'createDate',
+      label: '获得时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+    },
+    {
+      field: 'createTime',
+      title: '获得时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'nickname',
+      title: '用户',
+    },
+    {
+      field: 'point',
+      title: '获得积分',
+      slots: {
+        default: ({ row }) => {
+          return h(
+            Tag,
+            {
+              class: 'mr-5px',
+              color: row.point > 0 ? 'blue' : 'red',
+            },
+            () => (row.point > 0 ? `+${row.point}` : row.point),
+          );
+        },
+      },
+    },
+    {
+      field: 'totalPoint',
+      title: '总积分',
+    },
+    {
+      field: 'title',
+      title: '标题',
+    },
+    {
+      field: 'description',
+      title: '描述',
+    },
+    {
+      field: 'bizId',
+      title: '业务编码',
+    },
+    {
+      field: 'bizType',
+      title: '业务类型',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MEMBER_POINT_BIZ_TYPE },
+      },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/member/point/record/index.vue b/apps/web-antd/src/views/member/point/record/index.vue
index 50ce2e1aa..2a29563a2 100644
--- a/apps/web-antd/src/views/member/point/record/index.vue
+++ b/apps/web-antd/src/views/member/point/record/index.vue
@@ -1,34 +1,46 @@
 <script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MemberPointRecordApi } from '#/api/member/point/record';
+
 import { Page } from '@vben/common-ui';
 
-import { Button } from 'ant-design-vue';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getRecordPage } from '#/api/member/point/record';
 
-import { DocAlert } from '#/components/doc-alert';
+import { useGridColumns, useGridFormSchema } from './data';
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getRecordPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<MemberPointRecordApi.Record>,
+});
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="会员等级、积分、签到"
-      url="https://doc.iocoder.cn/member/level/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/member/point/record/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/member/point/record/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <Grid table-title="积分记录列表" />
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/member/signin/config/data.ts b/apps/web-antd/src/views/member/signin/config/data.ts
new file mode 100644
index 000000000..be1d8e272
--- /dev/null
+++ b/apps/web-antd/src/views/member/signin/config/data.ts
@@ -0,0 +1,101 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { z } from '#/adapter/form';
+import { CommonStatusEnum, DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'day',
+      label: '签到天数',
+      help: '只允许设置 1-7，默认签到 7 天为一个周期',
+      componentProps: {
+        min: 1,
+        max: 7,
+        precision: 0,
+      },
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'point',
+      label: '获得积分',
+      componentProps: {
+        min: 0,
+        precision: 0,
+      },
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'experience',
+      label: '奖励经验',
+      componentProps: {
+        min: 0,
+        precision: 0,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+    },
+    {
+      field: 'day',
+      title: '签到天数',
+      formatter: ({ cellValue }) => ['第', cellValue, '天'].join(' '),
+    },
+    {
+      field: 'point',
+      title: '获得积分',
+    },
+    {
+      field: 'experience',
+      title: '奖励经验',
+    },
+    {
+      field: 'status',
+      title: '状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/member/signin/config/index.vue b/apps/web-antd/src/views/member/signin/config/index.vue
index 1f2de1f06..42b5ef26b 100644
--- a/apps/web-antd/src/views/member/signin/config/index.vue
+++ b/apps/web-antd/src/views/member/signin/config/index.vue
@@ -1,34 +1,126 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MemberSignInConfigApi } from '#/api/member/signin/config';
 
-import { Button } from 'ant-design-vue';
+import { Page, useVbenModal } from '@vben/common-ui';
 
-import { DocAlert } from '#/components/doc-alert';
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteSignInConfig,
+  getSignInConfigList,
+} from '#/api/member/signin/config';
+import { $t } from '#/locales';
+
+import { useGridColumns } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建签到配置 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑签到配置 */
+function handleEdit(row: MemberSignInConfigApi.SignInConfig) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除签到配置 */
+async function handleDelete(row: MemberSignInConfigApi.SignInConfig) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteSignInConfig(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess'),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async () => {
+          return await getSignInConfigList();
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<MemberSignInConfigApi.SignInConfig>,
+});
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="会员等级、积分、签到"
-      url="https://doc.iocoder.cn/member/level/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/member/signin/config/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/member/signin/config/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <FormModal @success="onRefresh" />
+    <Grid table-title="签到配置列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['签到配置']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['point:sign-in-config:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['point:sign-in-config:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['point:sign-in-config:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/member/signin/config/modules/form.vue b/apps/web-antd/src/views/member/signin/config/modules/form.vue
new file mode 100644
index 000000000..f95f33adb
--- /dev/null
+++ b/apps/web-antd/src/views/member/signin/config/modules/form.vue
@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import type { MemberSignInConfigApi } from '#/api/member/signin/config';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createSignInConfig,
+  getSignInConfig,
+  updateSignInConfig,
+} from '#/api/member/signin/config';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MemberSignInConfigApi.SignInConfig>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['签到配置'])
+    : $t('ui.actionTitle.create', ['签到配置']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as MemberSignInConfigApi.SignInConfig;
+    try {
+      await (formData.value?.id
+        ? updateSignInConfig(data)
+        : createSignInConfig(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MemberSignInConfigApi.SignInConfig>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getSignInConfig(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-[600px]" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/member/signin/record/data.ts b/apps/web-antd/src/views/member/signin/record/data.ts
new file mode 100644
index 000000000..059f2566b
--- /dev/null
+++ b/apps/web-antd/src/views/member/signin/record/data.ts
@@ -0,0 +1,73 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { h } from 'vue';
+
+import { Tag } from 'ant-design-vue';
+
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'nickname',
+      label: '签到用户',
+      component: 'Input',
+    },
+    {
+      fieldName: 'day',
+      label: '签到天数',
+      component: 'Input',
+    },
+    {
+      fieldName: 'createTime',
+      label: '签到时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+    },
+    {
+      field: 'nickname',
+      title: '签到用户',
+    },
+    {
+      field: 'day',
+      title: '签到天数',
+      formatter: ({ cellValue }) => ['第', cellValue, '天'].join(' '),
+    },
+    {
+      field: 'point',
+      title: '获得积分',
+      slots: {
+        default: ({ row }) => {
+          return h(
+            Tag,
+            {
+              class: 'mr-5px',
+              color: row.point > 0 ? 'blue' : 'red',
+            },
+            () => (row.point > 0 ? `+${row.point}` : row.point),
+          );
+        },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '签到时间',
+      formatter: 'formatDateTime',
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/member/signin/record/index.vue b/apps/web-antd/src/views/member/signin/record/index.vue
index 06baddb46..f129dc098 100644
--- a/apps/web-antd/src/views/member/signin/record/index.vue
+++ b/apps/web-antd/src/views/member/signin/record/index.vue
@@ -1,34 +1,46 @@
 <script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MemberSignInRecordApi } from '#/api/member/signin/record';
+
 import { Page } from '@vben/common-ui';
 
-import { Button } from 'ant-design-vue';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSignInRecordPage } from '#/api/member/signin/record';
 
-import { DocAlert } from '#/components/doc-alert';
+import { useGridColumns, useGridFormSchema } from './data';
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getSignInRecordPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<MemberSignInRecordApi.SignInRecord>,
+});
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="会员等级、积分、签到"
-      url="https://doc.iocoder.cn/member/level/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/member/signin/record/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/member/signin/record/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <Grid table-title="签到记录列表" />
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/member/tag/data.ts b/apps/web-antd/src/views/member/tag/data.ts
new file mode 100644
index 000000000..73728e0c3
--- /dev/null
+++ b/apps/web-antd/src/views/member/tag/data.ts
@@ -0,0 +1,71 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '标签名称',
+      rules: 'required',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '标签名称',
+      component: 'Input',
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 200,
+    },
+    {
+      field: 'name',
+      title: '标签名称',
+      minWidth: 200,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 150,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/member/tag/index.vue b/apps/web-antd/src/views/member/tag/index.vue
index 532f0a838..1f59e7584 100644
--- a/apps/web-antd/src/views/member/tag/index.vue
+++ b/apps/web-antd/src/views/member/tag/index.vue
@@ -1,34 +1,134 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MemberTagApi } from '#/api/member/tag';
 
-import { Button } from 'ant-design-vue';
+import { Page, useVbenModal } from '@vben/common-ui';
 
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteMemberTag, getMemberTagPage } from '#/api/member/tag';
 import { DocAlert } from '#/components/doc-alert';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建会员标签 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑会员标签 */
+function handleEdit(row: MemberTagApi.Tag) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除会员标签 */
+async function handleDelete(row: MemberTagApi.Tag) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteMemberTag(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getMemberTagPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<MemberTagApi.Tag>,
+});
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="会员用户、标签、分组"
-      url="https://doc.iocoder.cn/member/user/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/member/tag/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/member/tag/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="会员用户、标签、分组"
+        url="https://doc.iocoder.cn/member/user/"
+      />
+    </template>
+    <FormModal @success="onRefresh" />
+    <Grid table-title="会员标签列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['会员标签']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['member:tag:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['member:tag:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['member:tag:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/member/tag/modules/form.vue b/apps/web-antd/src/views/member/tag/modules/form.vue
new file mode 100644
index 000000000..267bcde26
--- /dev/null
+++ b/apps/web-antd/src/views/member/tag/modules/form.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { MemberTagApi } from '#/api/member/tag';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createMemberTag,
+  getMemberTag,
+  updateMemberTag,
+} from '#/api/member/tag';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MemberTagApi.Tag>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['会员标签'])
+    : $t('ui.actionTitle.create', ['会员标签']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MemberTagApi.Tag;
+    try {
+      await (formData.value?.id
+        ? updateMemberTag(data)
+        : createMemberTag(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MemberTagApi.Tag>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getMemberTag(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-[600px]" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/member/user/components/user-account-info.vue b/apps/web-antd/src/views/member/user/components/user-account-info.vue
new file mode 100644
index 000000000..097d9beba
--- /dev/null
+++ b/apps/web-antd/src/views/member/user/components/user-account-info.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import type { MemberUserApi } from '#/api/member/user';
+import type { PayWalletApi } from '#/api/pay/wallet/balance';
+
+import { Card } from 'ant-design-vue';
+
+import { useDescription } from '#/components/description';
+import { fenToYuan } from '#/utils';
+
+withDefaults(
+  defineProps<{
+    mode?: 'kefu' | 'member';
+    user: MemberUserApi.User;
+    wallet: PayWalletApi.WalletVO;
+  }>(),
+  {
+    mode: 'member',
+  },
+);
+
+const [Description] = useDescription({
+  componentProps: {
+    bordered: false,
+    class: 'mx-4',
+  },
+  schema: [
+    {
+      field: 'levelName',
+      label: '等级',
+      content: (data) => data.levelName || '无',
+    },
+    {
+      field: 'experience',
+      label: '成长值',
+      content: (data) => data.experience || 0,
+    },
+    {
+      field: 'point',
+      label: '当前积分',
+      content: (data) => data.point || 0,
+    },
+    {
+      field: 'totalPoint',
+      label: '总积分',
+      content: (data) => data.totalPoint || 0,
+    },
+    {
+      field: 'balance',
+      label: '当前余额',
+      content: (data) => fenToYuan(data.balance || 0),
+    },
+    {
+      field: 'totalExpense',
+      label: '支出金额',
+      content: (data) => fenToYuan(data.totalExpense || 0),
+    },
+    {
+      field: 'totalRecharge',
+      label: '充值金额',
+      content: (data) => fenToYuan(data.totalRecharge || 0),
+    },
+  ],
+});
+</script>
+
+<template>
+  <Card>
+    <template #title>
+      <slot name="title"></slot>
+    </template>
+    <template #extra>
+      <slot name="extra"></slot>
+    </template>
+    <Description
+      :column="mode === 'member' ? 2 : 1"
+      :data="{
+        ...user,
+        ...wallet,
+      }"
+    />
+  </Card>
+</template>
diff --git a/apps/web-antd/src/views/member/user/components/user-address-list.vue b/apps/web-antd/src/views/member/user/components/user-address-list.vue
new file mode 100644
index 000000000..729cf4d70
--- /dev/null
+++ b/apps/web-antd/src/views/member/user/components/user-address-list.vue
@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MemberAddressApi } from '#/api/member/address';
+
+import { h } from 'vue';
+
+import { Tag } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getAddressList } from '#/api/member/address';
+
+const props = defineProps<{
+  userId: number;
+}>();
+
+const [Grid] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      {
+        field: 'id',
+        title: '地址编号',
+      },
+      {
+        field: 'name',
+        title: '收件人名称',
+      },
+      {
+        field: 'mobile',
+        title: '手机号',
+      },
+      {
+        field: 'areaId',
+        title: '地区编码',
+      },
+      {
+        field: 'detailAddress',
+        title: '收件详细地址',
+      },
+      {
+        field: 'defaultStatus',
+        title: '是否默认',
+        slots: {
+          default: ({ row }) => {
+            return h(
+              Tag,
+              {
+                class: 'mr-5px',
+                color: row.defaultStatus ? 'blue' : 'red',
+              },
+              () => (row.defaultStatus ? '是' : '否'),
+            );
+          },
+        },
+      },
+      {
+        field: 'createTime',
+        title: '创建时间',
+        formatter: 'formatDateTime',
+      },
+    ],
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async () => {
+          return await getAddressList({
+            userId: props.userId,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<MemberAddressApi.Address>,
+});
+</script>
+
+<template>
+  <Grid />
+</template>
diff --git a/apps/web-antd/src/views/member/user/components/user-balance-list.vue b/apps/web-antd/src/views/member/user/components/user-balance-list.vue
new file mode 100644
index 000000000..e560e9032
--- /dev/null
+++ b/apps/web-antd/src/views/member/user/components/user-balance-list.vue
@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WalletTransactionApi } from '#/api/pay/wallet/transaction';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getTransactionPage } from '#/api/pay/wallet/transaction';
+
+const props = defineProps<{
+  walletId: number | undefined;
+}>();
+
+const [Grid] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      {
+        field: 'id',
+        title: '编号',
+      },
+      {
+        field: 'title',
+        title: '关联业务标题',
+      },
+      {
+        field: 'price',
+        title: '交易金额',
+        formatter: 'formatFraction',
+      },
+      {
+        field: 'balance',
+        title: '钱包余额',
+        formatter: 'formatFraction',
+      },
+      {
+        field: 'createTime',
+        title: '交易时间',
+        formatter: 'formatDateTime',
+      },
+    ],
+    keepSource: true,
+    pagerConfig: {
+      pageSize: 10,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getTransactionPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            walletId: props.walletId,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<WalletTransactionApi.Transaction>,
+});
+</script>
+
+<template>
+  <Grid />
+</template>
diff --git a/apps/web-antd/src/views/member/user/components/user-basic-info.vue b/apps/web-antd/src/views/member/user/components/user-basic-info.vue
new file mode 100644
index 000000000..f0b4601ef
--- /dev/null
+++ b/apps/web-antd/src/views/member/user/components/user-basic-info.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import type { MemberUserApi } from '#/api/member/user';
+
+import { h } from 'vue';
+
+import { formatDate } from '@vben/utils';
+
+import { Avatar, Card, Col, Row } from 'ant-design-vue';
+
+import { useDescription } from '#/components/description';
+import { DictTag } from '#/components/dict-tag';
+import { DICT_TYPE } from '#/utils';
+
+withDefaults(
+  defineProps<{ mode?: 'kefu' | 'member'; user: MemberUserApi.User }>(),
+  {
+    mode: 'member',
+  },
+);
+
+const [Description] = useDescription({
+  componentProps: {
+    bordered: false,
+    class: 'mx-4',
+  },
+  schema: [
+    {
+      field: 'name',
+      label: '用户名',
+    },
+    {
+      field: 'nickname',
+      label: '昵称',
+    },
+    {
+      field: 'mobile',
+      label: '手机号',
+    },
+    {
+      field: 'sex',
+      label: '性别',
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.SYSTEM_USER_SEX,
+          value: data.sex,
+        }),
+    },
+    {
+      field: 'areaName',
+      label: '所在地',
+    },
+    {
+      field: 'registerIp',
+      label: '注册 IP',
+    },
+    {
+      field: 'birthday',
+      label: '生日',
+      content: (data) => formatDate(data.birthday)?.toString() || '空',
+    },
+    {
+      field: 'createTime',
+      label: '注册时间',
+      content: (data) => formatDate(data.createTime)?.toString() || '空',
+    },
+    {
+      field: 'loginDate',
+      label: '最后登录时间',
+      content: (data) => formatDate(data.loginDate)?.toString() || '空',
+    },
+  ],
+});
+</script>
+
+<template>
+  <Card>
+    <template #title>
+      <slot name="title"></slot>
+    </template>
+    <template #extra>
+      <slot name="extra"></slot>
+    </template>
+    <Row v-if="mode === 'member'" :gutter="24">
+      <Col :span="4">
+        <Avatar :size="140" shape="square" :src="user.avatar" />
+      </Col>
+      <Col :span="20">
+        <Description :column="2" :data="user" />
+      </Col>
+    </Row>
+    <template v-else-if="mode === 'kefu'">
+      <Avatar :size="140" shape="square" :src="user.avatar" />
+      <Description :column="1" :data="user" />
+    </template>
+  </Card>
+</template>
diff --git a/apps/web-antd/src/views/member/user/components/user-experience-record-list.vue b/apps/web-antd/src/views/member/user/components/user-experience-record-list.vue
new file mode 100644
index 000000000..4e6b1bb3d
--- /dev/null
+++ b/apps/web-antd/src/views/member/user/components/user-experience-record-list.vue
@@ -0,0 +1,131 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MemberExperienceRecordApi } from '#/api/member/experience-record';
+
+import { h } from 'vue';
+
+import { Tag } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getExperienceRecordPage } from '#/api/member/experience-record';
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+
+const props = defineProps<{
+  userId: number;
+}>();
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: [
+      {
+        fieldName: 'bizType',
+        label: '业务类型',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: getDictOptions(
+            DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE,
+            'number',
+          ),
+        },
+      },
+      {
+        fieldName: 'title',
+        label: '标题',
+        component: 'Input',
+      },
+      {
+        fieldName: 'createDate',
+        label: '获得时间',
+        component: 'RangePicker',
+        componentProps: {
+          ...getRangePickerDefaultProps(),
+          allowClear: true,
+        },
+      },
+    ],
+  },
+  gridOptions: {
+    columns: [
+      {
+        field: 'id',
+        title: '编号',
+      },
+      {
+        field: 'createTime',
+        title: '获得时间',
+        formatter: 'formatDateTime',
+      },
+      {
+        field: 'experience',
+        title: '经验',
+        slots: {
+          default: ({ row }) => {
+            return h(
+              Tag,
+              {
+                class: 'mr-5px',
+                color: row.experience > 0 ? 'blue' : 'red',
+              },
+              () =>
+                row.experience > 0 ? `+${row.experience}` : row.experience,
+            );
+          },
+        },
+      },
+      {
+        field: 'totalExperience',
+        title: '总经验',
+      },
+      {
+        field: 'title',
+        title: '标题',
+      },
+      {
+        field: 'description',
+        title: '描述',
+      },
+      {
+        field: 'bizId',
+        title: '业务编号',
+      },
+      {
+        field: 'bizType',
+        title: '业务类型',
+        cellRender: {
+          name: 'CellDict',
+          props: { type: DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE },
+        },
+      },
+    ],
+    keepSource: true,
+    pagerConfig: {
+      pageSize: 10,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getExperienceRecordPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            userId: props.userId,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<MemberExperienceRecordApi.ExperienceRecord>,
+  separator: false,
+});
+</script>
+
+<template>
+  <Grid />
+</template>
diff --git a/apps/web-antd/src/views/member/user/components/user-point-list.vue b/apps/web-antd/src/views/member/user/components/user-point-list.vue
new file mode 100644
index 000000000..cc7dddd75
--- /dev/null
+++ b/apps/web-antd/src/views/member/user/components/user-point-list.vue
@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MemberPointRecordApi } from '#/api/member/point/record';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getRecordPage } from '#/api/member/point/record';
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+import { useGridColumns } from '#/views/member/point/record/data';
+
+const props = defineProps<{
+  userId: number;
+}>();
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: [
+      {
+        fieldName: 'bizType',
+        label: '业务类型',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: getDictOptions(DICT_TYPE.MEMBER_POINT_BIZ_TYPE, 'number'),
+        },
+      },
+      {
+        fieldName: 'title',
+        label: '积分标题',
+        component: 'Input',
+      },
+      {
+        fieldName: 'createDate',
+        label: '获得时间',
+        component: 'RangePicker',
+        componentProps: {
+          ...getRangePickerDefaultProps(),
+          allowClear: true,
+        },
+      },
+    ],
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    keepSource: true,
+    pagerConfig: {
+      pageSize: 10,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getRecordPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            userId: props.userId,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<MemberPointRecordApi.Record>,
+  separator: false,
+});
+</script>
+
+<template>
+  <Grid />
+</template>
diff --git a/apps/web-antd/src/views/member/user/components/user-sign-list.vue b/apps/web-antd/src/views/member/user/components/user-sign-list.vue
new file mode 100644
index 000000000..77ef261e7
--- /dev/null
+++ b/apps/web-antd/src/views/member/user/components/user-sign-list.vue
@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MemberSignInRecordApi } from '#/api/member/signin/record';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSignInRecordPage } from '#/api/member/signin/record';
+import { getRangePickerDefaultProps } from '#/utils';
+import { useGridColumns } from '#/views/member/signin/record/data';
+
+const props = defineProps<{
+  userId: number;
+}>();
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: [
+      {
+        fieldName: 'day',
+        label: '签到天数',
+        component: 'Input',
+      },
+      {
+        fieldName: 'createTime',
+        label: '签到时间',
+        component: 'RangePicker',
+        componentProps: {
+          ...getRangePickerDefaultProps(),
+          allowClear: true,
+        },
+      },
+    ],
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    keepSource: true,
+    pagerConfig: {
+      pageSize: 10,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getSignInRecordPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            userId: props.userId,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<MemberSignInRecordApi.SignInRecord>,
+  separator: false,
+});
+</script>
+
+<template>
+  <Grid />
+</template>
diff --git a/apps/web-antd/src/views/member/user/data.ts b/apps/web-antd/src/views/member/user/data.ts
new file mode 100644
index 000000000..1232cca3a
--- /dev/null
+++ b/apps/web-antd/src/views/member/user/data.ts
@@ -0,0 +1,452 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { h } from 'vue';
+
+import { Tag } from 'ant-design-vue';
+
+import { z } from '#/adapter/form';
+import { getSimpleGroupList } from '#/api/member/group';
+import { getSimpleLevelList } from '#/api/member/level';
+import { getSimpleTagList } from '#/api/member/tag';
+import { getAreaTree } from '#/api/system/area';
+import {
+  CommonStatusEnum,
+  convertToInteger,
+  DICT_TYPE,
+  formatToFraction,
+  getDictOptions,
+  getRangePickerDefaultProps,
+} from '#/utils';
+
+/** 修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'mobile',
+      label: '手机号',
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE).optional(),
+    },
+    {
+      component: 'Input',
+      fieldName: 'nickname',
+      label: '用户昵称',
+    },
+    {
+      component: 'ImageUpload',
+      fieldName: 'avatar',
+      label: '头像',
+      componentProps: {
+        maxSize: 1,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '真实名字',
+    },
+    {
+      fieldName: 'sex',
+      label: '用户性别',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+    },
+    {
+      component: 'DatePicker',
+      fieldName: 'birthday',
+      label: '出生日期',
+      componentProps: {
+        format: 'YYYY-MM-DD',
+      },
+    },
+    {
+      component: 'ApiTreeSelect',
+      fieldName: 'areaId',
+      label: '所在地',
+      componentProps: {
+        api: () => getAreaTree(),
+        fieldNames: { label: 'name', value: 'id', children: 'children' },
+      },
+    },
+    {
+      component: 'ApiSelect',
+      fieldName: 'tagIds',
+      label: '用户标签',
+      componentProps: {
+        api: () => getSimpleTagList(),
+        fieldNames: { label: 'name', value: 'id' },
+        mode: 'multiple',
+      },
+    },
+    {
+      component: 'ApiSelect',
+      fieldName: 'groupId',
+      label: '用户分组',
+      componentProps: {
+        api: () => getSimpleGroupList(),
+        fieldNames: { label: 'name', value: 'id' },
+      },
+    },
+    {
+      component: 'Textarea',
+      fieldName: 'mark',
+      label: '会员备注',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'nickname',
+      label: '用户昵称',
+      component: 'Input',
+    },
+    {
+      fieldName: 'mobile',
+      label: '手机号',
+      component: 'Input',
+    },
+    {
+      fieldName: 'loginDate',
+      label: '登录时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '注册时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+      },
+    },
+    {
+      fieldName: 'tagIds',
+      label: '用户标签',
+      component: 'ApiSelect',
+      componentProps: {
+        api: () => getSimpleTagList(),
+        fieldNames: { label: 'name', value: 'id' },
+        mode: 'multiple',
+      },
+    },
+    {
+      fieldName: 'levelId',
+      label: '用户等级',
+      component: 'ApiSelect',
+      componentProps: {
+        api: () => getSimpleLevelList(),
+        fieldNames: { label: 'name', value: 'id' },
+      },
+    },
+    {
+      fieldName: 'groupId',
+      label: '用户分组',
+      component: 'ApiSelect',
+      componentProps: {
+        api: () => getSimpleGroupList(),
+        fieldNames: { label: 'name', value: 'id' },
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      type: 'checkbox',
+      width: 50,
+    },
+    {
+      field: 'id',
+      title: '用户编号',
+    },
+    {
+      field: 'avatar',
+      title: '头像',
+      slots: {
+        default: ({ row }) => {
+          return h('img', {
+            src: row.avatar,
+            style: { width: '40px' },
+          });
+        },
+      },
+    },
+    {
+      field: 'mobile',
+      title: '手机号',
+    },
+    {
+      field: 'nickname',
+      title: '昵称',
+    },
+    {
+      field: 'levelName',
+      title: '等级',
+    },
+    {
+      field: 'groupName',
+      title: '分组',
+    },
+    {
+      field: 'tagNames',
+      title: '用户标签',
+      slots: {
+        default: ({ row }) => {
+          return row.tagNames?.map((tagName: string, index: number) => {
+            return h(
+              Tag,
+              {
+                key: index,
+                class: 'mr-5px',
+                color: 'blue',
+              },
+              () => tagName,
+            );
+          });
+        },
+      },
+    },
+    {
+      field: 'point',
+      title: '积分',
+    },
+    {
+      field: 'status',
+      title: '状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'loginDate',
+      title: '登录时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'createTime',
+      title: '注册时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 200,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 修改用户等级 */
+export function useLeavelFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      label: '用户编号',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'nickname',
+      label: '用户昵称',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'point',
+      label: '用户等级',
+      component: 'ApiSelect',
+      componentProps: {
+        api: () => getSimpleLevelList(),
+        fieldNames: { label: 'name', value: 'id' },
+      },
+    },
+    {
+      component: 'Textarea',
+      fieldName: 'reason',
+      label: '修改原因',
+      rules: 'required',
+    },
+  ];
+}
+
+/** 修改用户余额 */
+export function useBalanceFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      label: '用户编号',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'nickname',
+      label: '用户昵称',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'balance',
+      label: '变动前余额(元)',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      component: 'RadioGroup',
+      fieldName: 'changeType',
+      label: '变动类型',
+      componentProps: {
+        options: [
+          { label: '增加', value: 1 },
+          { label: '减少', value: -1 },
+        ],
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      defaultValue: 1,
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'changeBalance',
+      label: '变动余额(元)',
+      rules: 'required',
+      componentProps: {
+        min: 0,
+        precision: 2,
+        step: 0.1,
+      },
+      defaultValue: 0,
+    },
+    {
+      component: 'Input',
+      fieldName: 'balanceResult',
+      label: '变动后余额(元)',
+      dependencies: {
+        triggerFields: ['changeBalance', 'changeType'],
+        disabled: true,
+        trigger(values, form) {
+          form.setFieldValue(
+            'balanceResult',
+            formatToFraction(
+              convertToInteger(values.balance) +
+                convertToInteger(values.changeBalance) * values.changeType,
+            ),
+          );
+        },
+      },
+    },
+  ];
+}
+
+/** 修改用户积分 */
+export function usePointFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      label: '用户编号',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'nickname',
+      label: '用户昵称',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'point',
+      label: '变动前积分',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      component: 'RadioGroup',
+      fieldName: 'changeType',
+      label: '变动类型',
+      componentProps: {
+        options: [
+          { label: '增加', value: 1 },
+          { label: '减少', value: -1 },
+        ],
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      defaultValue: 1,
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'changePoint',
+      label: '变动积分',
+      rules: 'required',
+      componentProps: {
+        min: 0,
+        precision: 0,
+      },
+      defaultValue: 0,
+    },
+    {
+      component: 'Input',
+      fieldName: 'pointResult',
+      label: '变动后积分',
+      dependencies: {
+        triggerFields: ['changePoint', 'changeType'],
+        disabled: true,
+        trigger(values, form) {
+          form.setFieldValue(
+            'pointResult',
+            values.point + values.changePoint * values.changeType ||
+              values.point,
+          );
+        },
+      },
+      rules: z.number().min(0),
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/member/user/index.vue b/apps/web-antd/src/views/member/user/index.vue
index 19068b619..ae7343a3d 100644
--- a/apps/web-antd/src/views/member/user/index.vue
+++ b/apps/web-antd/src/views/member/user/index.vue
@@ -1,34 +1,196 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MemberUserApi } from '#/api/member/user';
 
-import { Button } from 'ant-design-vue';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
 
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getUserPage } from '#/api/member/user';
 import { DocAlert } from '#/components/doc-alert';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import BalanceForm from './modules/balance-form.vue';
+import Form from './modules/form.vue';
+import LeavelForm from './modules/leavel-form.vue';
+import PointForm from './modules/point-form.vue';
+
+const router = useRouter();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [PointFormModal, pointFormModalApi] = useVbenModal({
+  connectedComponent: PointForm,
+  destroyOnClose: true,
+});
+
+const [BalanceFormModal, balanceFormModalApi] = useVbenModal({
+  connectedComponent: BalanceForm,
+  destroyOnClose: true,
+});
+
+const [LeavelFormModal, leavelFormModalApi] = useVbenModal({
+  connectedComponent: LeavelForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格数据 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 设置选中 ID */
+const checkedIds = ref<number[]>([]);
+function setCheckedIds({ records }: { records: MemberUserApi.User[] }) {
+  checkedIds.value = records.map((item) => item.id as number);
+}
+
+/** 发送优惠券 */
+function handleSendCoupon() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑会员 */
+function handleEdit(row: MemberUserApi.User) {
+  formModalApi.setData(row).open();
+}
+
+/** 修改会员等级 */
+function handleUpdateLevel(row: MemberUserApi.User) {
+  leavelFormModalApi.setData(row).open();
+}
+
+/** 修改会员积分 */
+function handleUpdatePoint(row: MemberUserApi.User) {
+  pointFormModalApi.setData(row).open();
+}
+
+/** 修改会员余额 */
+function handleUpdateBalance(row: MemberUserApi.User) {
+  balanceFormModalApi.setData(row).open();
+}
+
+/** 查看会员详情 */
+function handleViewDetail(row: MemberUserApi.User) {
+  router.push({
+    name: 'MemberUserDetail',
+    query: {
+      id: row.id,
+    },
+  });
+}
+
+// 表格实例
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    checkboxConfig: {
+      highlight: true,
+      labelField: 'checkbox',
+    },
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getUserPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<MemberUserApi.User>,
+  gridEvents: {
+    checkboxAll: setCheckedIds,
+    checkboxChange: setCheckedIds,
+  },
+});
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="会员用户、标签、分组"
-      url="https://doc.iocoder.cn/member/user/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/member/user/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/member/user/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="会员用户、标签、分组"
+        url="https://doc.iocoder.cn/member/user/"
+      />
+    </template>
+
+    <FormModal @success="onRefresh" />
+    <PointFormModal @success="onRefresh" />
+    <BalanceFormModal @success="onRefresh" />
+    <LeavelFormModal @success="onRefresh" />
+    <Grid table-title="会员列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: '发送优惠券',
+              type: 'primary',
+              icon: 'lucide:mouse-pointer-2',
+              auth: ['promotion:coupon:send'],
+              onClick: handleSendCoupon,
+            },
+          ]"
+        />
+      </template>
+
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'link',
+              icon: ACTION_ICON.VIEW,
+              onClick: handleViewDetail.bind(null, row),
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              auth: ['member:user:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '修改等级',
+              type: 'link',
+              auth: ['member:user:update-level'],
+              onClick: handleUpdateLevel.bind(null, row),
+            },
+            {
+              label: '修改积分',
+              type: 'link',
+              auth: ['member:user:update-point'],
+              onClick: handleUpdatePoint.bind(null, row),
+            },
+            {
+              label: '修改余额',
+              type: 'link',
+              auth: ['pay:wallet:update-balance'],
+              onClick: handleUpdateBalance.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/member/user/modules/balance-form.vue b/apps/web-antd/src/views/member/user/modules/balance-form.vue
new file mode 100644
index 000000000..3c0b7377f
--- /dev/null
+++ b/apps/web-antd/src/views/member/user/modules/balance-form.vue
@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+import type { MemberUserApi } from '#/api/member/user';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { getUser, updateUser } from '#/api/member/user';
+import { getWallet } from '#/api/pay/wallet/balance';
+import { $t } from '#/locales';
+import { formatToFraction } from '#/utils';
+
+import { useBalanceFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref({
+  id: 0,
+  nickname: '',
+  balance: '0',
+  changeBalance: 0,
+  changeType: 1,
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: useBalanceFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MemberUserApi.User;
+    try {
+      await updateUser(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MemberUserApi.User>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      const user = await getUser(data.id as number);
+      if (!user || !user.id) {
+        return;
+      }
+      const wallet = await getWallet({ userId: user.id });
+      formData.value.id = user.id;
+      formData.value.nickname = user.nickname || '';
+      formData.value.balance = formatToFraction(wallet.balance);
+      formData.value.changeType = 1; // 默认增加余额
+      formData.value.changeBalance = 0; // 变动余额默认0
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-[30%]" :title="$t('ui.actionTitle.edit', ['用户余额'])">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/member/user/modules/detail.vue b/apps/web-antd/src/views/member/user/modules/detail.vue
new file mode 100644
index 000000000..9c09a37eb
--- /dev/null
+++ b/apps/web-antd/src/views/member/user/modules/detail.vue
@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import type { MemberUserApi } from '#/api/member/user';
+import type { PayWalletApi } from '#/api/pay/wallet/balance';
+
+import { onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
+
+import { Button, Card, message, TabPane, Tabs } from 'ant-design-vue';
+
+import { getUser } from '#/api/member/user';
+import { getWallet } from '#/api/pay/wallet/balance';
+import { $t } from '#/locales';
+
+import UserAccountInfo from '../components/user-account-info.vue';
+import UserAddressList from '../components/user-address-list.vue';
+import UserBalanceList from '../components/user-balance-list.vue';
+import UserBasicInfo from '../components/user-basic-info.vue';
+import UserExperienceRecordList from '../components/user-experience-record-list.vue';
+import UserPointList from '../components/user-point-list.vue';
+import UserSignList from '../components/user-sign-list.vue';
+import Form from './form.vue';
+
+const route = useRoute();
+const { closeCurrentTab, refreshTab } = useTabs();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const userId = Number(route.query.id);
+const user = ref<MemberUserApi.User>();
+const wallet = ref<PayWalletApi.WalletVO>();
+/* 钱包初始化数据 */
+const WALLET_INIT_DATA = {
+  balance: 0,
+  totalExpense: 0,
+  totalRecharge: 0,
+} as PayWalletApi.WalletVO;
+
+async function getUserDetail() {
+  if (!userId) {
+    message.error('参数错误，会员编号不能为空！');
+    closeCurrentTab();
+    return;
+  }
+  user.value = await getUser(userId);
+  wallet.value = (await getWallet({ userId })) || WALLET_INIT_DATA;
+}
+
+function handleEdit() {
+  formModalApi.setData(user.value).open();
+}
+
+onMounted(async () => {
+  await getUserDetail();
+});
+</script>
+<template>
+  <Page auto-content-height>
+    <FormModal @success="refreshTab" />
+    <div class="flex">
+      <UserBasicInfo v-if="user" class="w-3/5" :user="user" mode="member">
+        <template #title> 基本信息 </template>
+        <template #extra>
+          <Button type="primary" @click="handleEdit">
+            {{ $t('common.edit') }}
+          </Button>
+        </template>
+      </UserBasicInfo>
+      <UserAccountInfo
+        v-if="user && wallet"
+        class="ml-4 w-2/5"
+        :user="user"
+        :wallet="wallet"
+      >
+        <template #title> 账户信息 </template>
+      </UserAccountInfo>
+    </div>
+    <div class="mt-4">
+      <Card title="账户明细">
+        <Tabs>
+          <TabPane tab="积分" key="UserPointList">
+            <UserPointList class="h-full" :user-id="userId" />
+          </TabPane>
+          <TabPane tab="签到" key="UserSignList">
+            <UserSignList class="h-full" :user-id="userId" />
+          </TabPane>
+          <TabPane tab="成长值" key="UserExperienceRecordList">
+            <UserExperienceRecordList class="h-full" :user-id="userId" />
+          </TabPane>
+          <TabPane tab="余额" key="UserBalanceList">
+            <UserBalanceList class="h-full" :wallet-id="wallet?.id" />
+          </TabPane>
+          <TabPane tab="收货地址" key="UserAddressList">
+            <UserAddressList class="h-full" :user-id="userId" />
+          </TabPane>
+          <TabPane tab="订单管理" key="UserOrderList">
+            <!-- Todo: 商城模块 -->
+            <div class="h-full">
+              <h1>订单管理</h1>
+            </div>
+          </TabPane>
+          <TabPane tab="售后管理" key="UserAfterSaleList">
+            <!-- Todo: 商城模块 -->
+            <div class="h-full">
+              <h1>售后管理</h1>
+            </div>
+          </TabPane>
+          <TabPane tab="收藏记录" key="UserFavoriteList">
+            <!-- Todo: 商城模块 -->
+            <div class="h-full">
+              <h1>收藏记录</h1>
+            </div>
+          </TabPane>
+          <TabPane tab="优惠劵" key="UserCouponList">
+            <!-- Todo: 商城模块 -->
+            <div class="h-full">
+              <h1>优惠劵</h1>
+            </div>
+          </TabPane>
+          <TabPane tab="推广用户" key="UserBrokerageList">
+            <!-- Todo: 商城模块 -->
+            <div class="h-full">
+              <h1>推广用户</h1>
+            </div>
+          </TabPane>
+        </Tabs>
+      </Card>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/member/user/modules/form.vue b/apps/web-antd/src/views/member/user/modules/form.vue
new file mode 100644
index 000000000..d0cf808e8
--- /dev/null
+++ b/apps/web-antd/src/views/member/user/modules/form.vue
@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import type { MemberUserApi } from '#/api/member/user';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { getUser, updateUser } from '#/api/member/user';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MemberUserApi.User>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MemberUserApi.User;
+    try {
+      await updateUser(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MemberUserApi.User>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getUser(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-[40%]" :title="$t('ui.actionTitle.edit', ['会员'])">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/member/user/modules/leavel-form.vue b/apps/web-antd/src/views/member/user/modules/leavel-form.vue
new file mode 100644
index 000000000..88df806d9
--- /dev/null
+++ b/apps/web-antd/src/views/member/user/modules/leavel-form.vue
@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import type { MemberUserApi } from '#/api/member/user';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { getUser, updateUser } from '#/api/member/user';
+import { $t } from '#/locales';
+
+import { useLeavelFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MemberUserApi.User>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useLeavelFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MemberUserApi.User;
+    try {
+      await updateUser(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MemberUserApi.User>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getUser(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-[30%]" :title="$t('ui.actionTitle.edit', ['用户等级'])">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/member/user/modules/point-form.vue b/apps/web-antd/src/views/member/user/modules/point-form.vue
new file mode 100644
index 000000000..df19e48c7
--- /dev/null
+++ b/apps/web-antd/src/views/member/user/modules/point-form.vue
@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import type { MemberUserApi } from '#/api/member/user';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { getUser, updateUser } from '#/api/member/user';
+import { $t } from '#/locales';
+
+import { usePointFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MemberUserApi.User>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: usePointFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MemberUserApi.User;
+    try {
+      await updateUser(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MemberUserApi.User>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getUser(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-[30%]" :title="$t('ui.actionTitle.edit', ['用户积分'])">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/pay/app/data.ts b/apps/web-antd/src/views/pay/app/data.ts
index 5063e4089..cb130b22e 100644
--- a/apps/web-antd/src/views/pay/app/data.ts
+++ b/apps/web-antd/src/views/pay/app/data.ts
@@ -54,7 +54,6 @@ export function useGridColumns<T = PayAppApi.App>(
     {
       field: 'status',
       title: '状态',
-      minWidth: 100,
       align: 'center',
       cellRender: {
         attrs: { beforeChange: onStatusChange },
diff --git a/apps/web-antd/src/views/pay/app/index.vue b/apps/web-antd/src/views/pay/app/index.vue
index 8c7de9972..3a67b8380 100644
--- a/apps/web-antd/src/views/pay/app/index.vue
+++ b/apps/web-antd/src/views/pay/app/index.vue
@@ -100,7 +100,7 @@ function isChannelExists(channels: string[], channelCode: string) {
 }
 
 async function openChannelForm(row: PayAppApi.App, payCode: string) {
-  channelModalApi.setData({ id: row.id || 0, payCode }).open();
+  channelModalApi.setData({ id: row.id, payCode }).open();
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -139,8 +139,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
       <DocAlert title="支付功能开启" url="https://doc.iocoder.cn/pay/build/" />
     </template>
 
-    <AppModal @reload="onRefresh" />
-    <ChannelModal @reload="onRefresh" />
+    <AppModal @success="onRefresh" />
+    <ChannelModal @success="onRefresh" />
 
     <Grid>
       <template #toolbar-tools>
@@ -185,27 +185,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :actions="[
             {
               type: 'primary',
-              icon: 'lucide:check',
-              shape: 'circle',
-              ifShow: isChannelExists(
+              icon: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.ALIPAY_APP.code,
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              danger: !isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.ALIPAY_APP.code,
               ),
-              onClick: openChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.ALIPAY_APP.code,
-              ),
-            },
-            {
-              type: 'primary',
-              danger: true,
-              icon: 'lucide:x',
               shape: 'circle',
-              ifShow: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.ALIPAY_APP.code,
-              ),
               onClick: openChannelForm.bind(
                 null,
                 row,
@@ -220,27 +210,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :actions="[
             {
               type: 'primary',
-              icon: 'lucide:check',
-              shape: 'circle',
-              ifShow: isChannelExists(
+              icon: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.ALIPAY_PC.code,
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              danger: !isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.ALIPAY_PC.code,
               ),
-              onClick: openChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.ALIPAY_PC.code,
-              ),
-            },
-            {
-              type: 'primary',
-              danger: true,
-              icon: 'lucide:x',
               shape: 'circle',
-              ifShow: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.ALIPAY_PC.code,
-              ),
               onClick: openChannelForm.bind(
                 null,
                 row,
@@ -255,27 +235,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :actions="[
             {
               type: 'primary',
-              icon: 'lucide:check',
-              shape: 'circle',
-              ifShow: isChannelExists(
+              icon: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.ALIPAY_WAP.code,
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              danger: !isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.ALIPAY_WAP.code,
               ),
-              onClick: openChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.ALIPAY_WAP.code,
-              ),
-            },
-            {
-              type: 'primary',
-              danger: true,
-              icon: 'lucide:x',
               shape: 'circle',
-              ifShow: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.ALIPAY_WAP.code,
-              ),
               onClick: openChannelForm.bind(
                 null,
                 row,
@@ -290,27 +260,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :actions="[
             {
               type: 'primary',
-              icon: 'lucide:check',
-              shape: 'circle',
-              ifShow: isChannelExists(
+              icon: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.ALIPAY_QR.code,
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              danger: !isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.ALIPAY_QR.code,
               ),
-              onClick: openChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.ALIPAY_QR.code,
-              ),
-            },
-            {
-              type: 'primary',
-              danger: true,
-              icon: 'lucide:x',
               shape: 'circle',
-              ifShow: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.ALIPAY_QR.code,
-              ),
               onClick: openChannelForm.bind(
                 null,
                 row,
@@ -325,27 +285,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :actions="[
             {
               type: 'primary',
-              icon: 'lucide:check',
-              shape: 'circle',
-              ifShow: isChannelExists(
+              icon: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.ALIPAY_BAR.code,
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              danger: !isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.ALIPAY_BAR.code,
               ),
-              onClick: openChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.ALIPAY_BAR.code,
-              ),
-            },
-            {
-              type: 'primary',
-              danger: true,
-              icon: 'lucide:x',
               shape: 'circle',
-              ifShow: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.ALIPAY_BAR.code,
-              ),
               onClick: openChannelForm.bind(
                 null,
                 row,
@@ -360,27 +310,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :actions="[
             {
               type: 'primary',
-              icon: 'lucide:check',
-              shape: 'circle',
-              ifShow: isChannelExists(
+              icon: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_LITE.code,
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              danger: !isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.WX_LITE.code,
               ),
-              onClick: openChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.WX_LITE.code,
-              ),
-            },
-            {
-              type: 'primary',
-              danger: true,
-              icon: 'lucide:x',
               shape: 'circle',
-              ifShow: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.WX_LITE.code,
-              ),
               onClick: openChannelForm.bind(
                 null,
                 row,
@@ -395,27 +335,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :actions="[
             {
               type: 'primary',
-              icon: 'lucide:check',
-              shape: 'circle',
-              ifShow: isChannelExists(
+              icon: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_PUB.code,
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              danger: !isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.WX_PUB.code,
               ),
-              onClick: openChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.WX_PUB.code,
-              ),
-            },
-            {
-              type: 'primary',
-              danger: true,
-              icon: 'lucide:x',
               shape: 'circle',
-              ifShow: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.WX_PUB.code,
-              ),
               onClick: openChannelForm.bind(
                 null,
                 row,
@@ -430,27 +360,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :actions="[
             {
               type: 'primary',
-              icon: 'lucide:check',
-              shape: 'circle',
-              ifShow: isChannelExists(
+              icon: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_APP.code,
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              danger: !isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.WX_APP.code,
               ),
-              onClick: openChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.WX_APP.code,
-              ),
-            },
-            {
-              type: 'primary',
-              danger: true,
-              icon: 'lucide:x',
               shape: 'circle',
-              ifShow: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.WX_APP.code,
-              ),
               onClick: openChannelForm.bind(
                 null,
                 row,
@@ -465,27 +385,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :actions="[
             {
               type: 'primary',
-              icon: 'lucide:check',
-              shape: 'circle',
-              ifShow: isChannelExists(
+              icon: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_NATIVE.code,
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              danger: !isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.WX_NATIVE.code,
               ),
-              onClick: openChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.WX_NATIVE.code,
-              ),
-            },
-            {
-              type: 'primary',
-              danger: true,
-              icon: 'lucide:x',
               shape: 'circle',
-              ifShow: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.WX_NATIVE.code,
-              ),
               onClick: openChannelForm.bind(
                 null,
                 row,
@@ -500,27 +410,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :actions="[
             {
               type: 'primary',
-              icon: 'lucide:check',
-              shape: 'circle',
-              ifShow: isChannelExists(
+              icon: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_WAP.code,
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              danger: !isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.WX_WAP.code,
               ),
-              onClick: openChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.WX_WAP.code,
-              ),
-            },
-            {
-              type: 'primary',
-              danger: true,
-              icon: 'lucide:x',
               shape: 'circle',
-              ifShow: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.WX_WAP.code,
-              ),
               onClick: openChannelForm.bind(
                 null,
                 row,
@@ -535,27 +435,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :actions="[
             {
               type: 'primary',
-              icon: 'lucide:check',
-              shape: 'circle',
-              ifShow: isChannelExists(
+              icon: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WX_BAR.code,
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              danger: !isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.WX_BAR.code,
               ),
-              onClick: openChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.WX_BAR.code,
-              ),
-            },
-            {
-              type: 'primary',
-              danger: true,
-              icon: 'lucide:x',
               shape: 'circle',
-              ifShow: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.WX_BAR.code,
-              ),
               onClick: openChannelForm.bind(
                 null,
                 row,
@@ -570,27 +460,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :actions="[
             {
               type: 'primary',
-              icon: 'lucide:check',
-              shape: 'circle',
-              ifShow: isChannelExists(
+              icon: isChannelExists(
+                row.channelCodes,
+                PayChannelEnum.WALLET.code,
+              )
+                ? 'lucide:check'
+                : 'lucide:x',
+              danger: !isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.WALLET.code,
               ),
-              onClick: openChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.WALLET.code,
-              ),
-            },
-            {
-              type: 'primary',
-              danger: true,
-              icon: 'lucide:x',
               shape: 'circle',
-              ifShow: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.WALLET.code,
-              ),
               onClick: openChannelForm.bind(
                 null,
                 row,
@@ -605,27 +485,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :actions="[
             {
               type: 'primary',
-              icon: 'lucide:check',
-              shape: 'circle',
-              ifShow: isChannelExists(
+              icon: isChannelExists(row.channelCodes, PayChannelEnum.MOCK.code)
+                ? 'lucide:check'
+                : 'lucide:x',
+              danger: !isChannelExists(
                 row.channelCodes,
                 PayChannelEnum.MOCK.code,
               ),
-              onClick: openChannelForm.bind(
-                null,
-                row,
-                PayChannelEnum.MOCK.code,
-              ),
-            },
-            {
-              type: 'primary',
-              danger: true,
-              icon: 'lucide:x',
               shape: 'circle',
-              ifShow: !isChannelExists(
-                row.channelCodes,
-                PayChannelEnum.MOCK.code,
-              ),
               onClick: openChannelForm.bind(
                 null,
                 row,
diff --git a/apps/web-antd/src/views/pay/app/modules/channel-form.vue b/apps/web-antd/src/views/pay/app/modules/channel-form.vue
index 9298f3b91..f42a23040 100644
--- a/apps/web-antd/src/views/pay/app/modules/channel-form.vue
+++ b/apps/web-antd/src/views/pay/app/modules/channel-form.vue
@@ -10,16 +10,17 @@ import { message } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
 import { createChannel, getChannel, updateChannel } from '#/api/pay/channel';
+import { CommonStatusEnum } from '#/utils';
 
 import { channelSchema } from './data';
 
 const emit = defineEmits(['success']);
-const formData = ref<PayChannelApi.Channel>();
+const formData = ref<any>();
 const formType = ref<string>('');
 const title = computed(() => {
-  return formData.value?.id
-    ? $t('ui.actionTitle.edit', '应用')
-    : $t('ui.actionTitle.create', '应用');
+  return formData.value?.id === 0
+    ? $t('ui.actionTitle.create', '应用')
+    : $t('ui.actionTitle.edit', '应用');
 });
 
 const [Form, formApi] = useVbenForm({
@@ -43,8 +44,17 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     // 提交表单
     const data = (await formApi.getValues()) as PayChannelApi.Channel;
+    // 只保留表单中实际存在的字段，且值不为 undefined
+    const data2 = Object.fromEntries(
+      Object.entries(data).filter(([key, value]) => {
+        // 检查字段是否在表单中存在，且值不为 undefined
+        return key in data && value !== undefined;
+      }),
+    );
+    const data3 = { ...formData.value, ...data2 };
+    data3.config = JSON.stringify(data3.config);
     try {
-      await (formData.value?.id ? updateChannel(data) : createChannel(data));
+      await (data3.id ? updateChannel(data3) : createChannel(data3));
       // 关闭并提示
       await modalApi.close();
       emit('success');
@@ -67,18 +77,80 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     modalApi.lock();
+    formType.value = payCode;
     if (payCode.includes('alipay_')) {
-      formType.value = 'alipay';
+      formData.value = {
+        appId: id,
+        code: payCode,
+        status: CommonStatusEnum.ENABLE,
+        remark: '',
+        feeRate: null,
+        config: {
+          appId: '',
+          serverUrl: null,
+          signType: 'RSA2',
+          mode: null,
+          privateKey: '',
+          alipayPublicKey: '',
+          appCertContent: '',
+          alipayPublicCertContent: '',
+          rootCertContent: '',
+          encryptType: '',
+          encryptKey: '',
+        },
+      };
     } else if (payCode.includes('mock')) {
-      formType.value = 'mock';
+      formData.value = {
+        appId: id,
+        code: payCode,
+        status: CommonStatusEnum.ENABLE,
+        remark: '',
+        feeRate: 0,
+        config: {
+          name: 'mock-conf',
+        },
+      };
     } else if (payCode.includes('wallet')) {
-      formType.value = 'wallet';
+      formData.value = {
+        appId: id,
+        code: payCode,
+        status: CommonStatusEnum.ENABLE,
+        remark: '',
+        feeRate: 0,
+        config: {
+          name: 'mock-conf',
+        },
+      };
     } else if (payCode.includes('wx')) {
-      formType.value = 'wx';
+      formData.value = {
+        appId: id,
+        code: payCode,
+        status: CommonStatusEnum.ENABLE,
+        feeRate: undefined,
+        remark: '',
+        config: {
+          appId: '',
+          mchId: '',
+          apiVersion: '',
+          mchKey: '',
+          keyContent: '',
+          privateKeyContent: '',
+          certSerialNo: '',
+          apiV3Key: '',
+          publicKeyContent: '',
+          publicKeyId: '',
+        },
+      };
     }
 
     try {
-      formData.value = await getChannel(id, payCode);
+      const res = await getChannel(id, payCode);
+      formData.value = {
+        ...res,
+        config: {
+          ...JSON.parse(res.config),
+        },
+      };
       // 设置到 values
       await formApi.setValues(formData.value);
     } finally {
diff --git a/apps/web-antd/src/views/pay/app/modules/data.ts b/apps/web-antd/src/views/pay/app/modules/data.ts
index 408b782ea..424dc4524 100644
--- a/apps/web-antd/src/views/pay/app/modules/data.ts
+++ b/apps/web-antd/src/views/pay/app/modules/data.ts
@@ -6,541 +6,486 @@ import { InputUpload } from '#/components/upload';
 import { DICT_TYPE, getDictOptions } from '#/utils/dict';
 
 export function channelSchema(formType: string): VbenFormSchema[] {
-  switch (formType) {
-    case 'alipay': {
-      return [
-        {
-          label: '商户编号',
-          fieldName: 'id',
-          component: 'Input',
-          dependencies: {
-            show: () => false,
-            triggerFields: [''],
-          },
+  if (formType.includes('alipay_')) {
+    return [
+      {
+        label: '应用编号',
+        fieldName: 'appId',
+        component: 'Input',
+        dependencies: {
+          show: () => false,
+          triggerFields: [''],
         },
-        {
-          label: '应用编号',
-          fieldName: 'appId',
-          component: 'Input',
-          dependencies: {
-            show: () => false,
-            triggerFields: [''],
-          },
+      },
+      {
+        label: '渠道费率',
+        fieldName: 'feeRate',
+        component: 'InputNumber',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入渠道费率',
+          addonAfter: '%',
         },
-        {
-          label: '渠道编码',
-          fieldName: 'code',
-          component: 'Input',
-          dependencies: {
-            show: () => false,
-            triggerFields: [''],
-          },
+        defaultValue: 0,
+      },
+      {
+        label: '开放平台 APPID',
+        fieldName: 'config.appId',
+        component: 'Input',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入开放平台 APPID',
         },
-        {
-          label: '渠道费率',
-          fieldName: 'feeRate',
-          component: 'Input',
-          rules: 'required',
-          componentProps: {
-            placeholder: '请输入渠道费率',
-          },
+      },
+      {
+        label: '渠道状态',
+        fieldName: 'status',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
         },
-        {
-          label: '开放平台 APPID',
-          fieldName: 'config.appId',
-          component: 'Input',
-          rules: 'required',
-          componentProps: {
-            placeholder: '请输入开放平台 APPID',
-          },
+        defaultValue: 0,
+      },
+      {
+        label: '网关地址',
+        fieldName: 'config.serverUrl',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: [
+            {
+              value: 'https://openapi.alipay.com/gateway.do',
+              label: '线上环境',
+            },
+            {
+              value: 'https://openapi-sandbox.dl.alipaydev.com/gateway.do',
+              label: '沙箱环境',
+            },
+          ],
         },
-        {
-          label: '渠道状态',
-          fieldName: 'status',
-          component: 'RadioGroup',
-          rules: 'required',
-          componentProps: {
-            options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-          },
-          defaultValue: 1,
+      },
+      {
+        label: '算法类型',
+        fieldName: 'config.signType',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: [
+            {
+              value: 'RSA2',
+              label: 'RSA2',
+            },
+          ],
         },
-        {
-          label: '网关地址',
-          fieldName: 'config.serverUrl',
-          component: 'RadioGroup',
-          rules: 'required',
-          componentProps: {
-            options: [
-              {
-                value: 'https://openapi.alipay.com/gateway.do',
-                label: '线上环境',
-              },
-              {
-                value: 'https://openapi-sandbox.dl.alipaydev.com/gateway.do',
-                label: '沙箱环境',
-              },
-            ],
-          },
+        defaultValue: 'RSA2',
+      },
+      {
+        label: '公钥类型',
+        fieldName: 'config.mode',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: [
+            {
+              value: 1,
+              label: '公钥模式',
+            },
+            {
+              value: 2,
+              label: '证书模式',
+            },
+          ],
         },
-        {
-          label: '算法类型',
-          fieldName: 'config.signType',
-          component: 'RadioGroup',
-          rules: 'required',
-          componentProps: {
-            options: [
-              {
-                value: 'RSA2',
-                label: 'RSA2',
-              },
-            ],
-          },
-          defaultValue: 'RSA2',
+      },
+      {
+        label: '应用私钥',
+        fieldName: 'config.privateKey',
+        component: 'Textarea',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入应用私钥',
+          rows: 8,
         },
-        {
-          label: '公钥类型',
-          fieldName: 'config.mode',
-          component: 'RadioGroup',
-          rules: 'required',
-          componentProps: {
-            options: [
-              {
-                value: 0,
-                label: '公钥模式',
-              },
-              {
-                value: 1,
-                label: '证书模式',
-              },
-            ],
-          },
+      },
+      {
+        label: '支付宝公钥',
+        fieldName: 'config.alipayPublicKey',
+        component: 'Textarea',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入支付宝公钥',
+          rows: 8,
         },
-        {
-          label: '应用私钥',
-          fieldName: 'config.privateKey',
-          component: 'Textarea',
-          rules: 'required',
-          componentProps: {
-            placeholder: '请输入应用私钥',
+        dependencies: {
+          show(values) {
+            return values?.config?.mode === 1;
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: '商户公钥应用证书',
+        fieldName: 'config.appCertContent',
+        component: h(InputUpload, {
+          inputType: 'textarea',
+          textareaProps: { rows: 8, placeholder: '请上传商户公钥应用证书' },
+          fileUploadProps: {
+            accept: ['crt'],
+          },
+        }),
+        rules: 'required',
+        dependencies: {
+          show(values) {
+            return values?.config?.mode === 2;
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: '支付宝公钥证书',
+        fieldName: 'config.alipayPublicCertContent',
+        component: h(InputUpload, {
+          inputType: 'textarea',
+          textareaProps: { rows: 8, placeholder: '请上传支付宝公钥证书' },
+          fileUploadProps: {
+            accept: ['crt'],
+          },
+        }),
+        rules: 'required',
+        dependencies: {
+          show(values) {
+            return values?.config?.mode === 2;
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: '根证书',
+        fieldName: 'config.rootCertContent',
+        component: h(InputUpload, {
+          inputType: 'textarea',
+          textareaProps: { rows: 8, placeholder: '请上传根证书' },
+          fileUploadProps: {
+            accept: ['crt'],
+          },
+        }),
+        rules: 'required',
+        dependencies: {
+          show(values) {
+            return values?.config?.mode === 2;
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: '接口内容加密方式',
+        fieldName: 'config.encryptType',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: [
+            {
+              value: 'NONE',
+              label: '无加密',
+            },
+            {
+              value: 'AES',
+              label: 'AES',
+            },
+          ],
+        },
+        defaultValue: 'NONE',
+      },
+      {
+        label: '接口内容加密密钥',
+        fieldName: 'config.encryptKey',
+        component: 'Input',
+        rules: 'required',
+        dependencies: {
+          show(values) {
+            return values?.config?.encryptType === 'AES';
+          },
+          triggerFields: ['config.encryptType', 'encryptType', 'config'],
+        },
+      },
+      {
+        label: '备注',
+        fieldName: 'remark',
+        component: 'Input',
+        componentProps: {
+          placeholder: '请输入备注',
+        },
+      },
+    ];
+  } else if (formType.includes('mock') || formType.includes('wallet')) {
+    return [
+      {
+        label: '应用编号',
+        fieldName: 'appId',
+        component: 'Input',
+        dependencies: {
+          show: () => false,
+          triggerFields: [''],
+        },
+      },
+      {
+        label: '渠道状态',
+        fieldName: 'status',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        },
+        defaultValue: 0,
+      },
+      {
+        label: '渠道编码',
+        fieldName: 'code',
+        component: 'Input',
+        dependencies: {
+          show: () => false,
+          triggerFields: [''],
+        },
+      },
+      {
+        label: '渠道费率',
+        fieldName: 'feeRate',
+        component: 'InputNumber',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入渠道费率',
+          addonAfter: '%',
+        },
+        defaultValue: 0,
+        dependencies: {
+          show: () => false,
+          triggerFields: [''],
+        },
+      },
+      {
+        label: '备注',
+        fieldName: 'remark',
+        component: 'Input',
+        componentProps: {
+          placeholder: '请输入备注',
+        },
+      },
+    ];
+  } else if (formType.includes('wx')) {
+    return [
+      {
+        label: '应用编号',
+        fieldName: 'appId',
+        component: 'Input',
+        dependencies: {
+          show: () => false,
+          triggerFields: [''],
+        },
+      },
+      {
+        label: '渠道编码',
+        fieldName: 'code',
+        component: 'Input',
+        dependencies: {
+          show: () => false,
+          triggerFields: [''],
+        },
+      },
+      {
+        label: '渠道费率',
+        fieldName: 'feeRate',
+        component: 'InputNumber',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入渠道费率',
+          addonAfter: '%',
+        },
+        defaultValue: 0,
+      },
+      {
+        label: '微信 APPID',
+        fieldName: 'config.appId',
+        help: '前往微信商户平台[https://pay.weixin.qq.com/index.php/extend/merchant_appid/mapay_platform/account_manage]查看 APPID',
+        component: 'Input',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入微信 APPID',
+        },
+      },
+      {
+        label: '商户号',
+        fieldName: 'config.mchId',
+        help: '前往微信商户平台[https://pay.weixin.qq.com/index.php/extend/pay_setting]查看商户号',
+        component: 'Input',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入商户号',
+        },
+      },
+      {
+        label: '渠道状态',
+        fieldName: 'status',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        },
+        defaultValue: 0,
+      },
+      {
+        label: 'API 版本',
+        fieldName: 'config.apiVersion',
+        component: 'RadioGroup',
+        rules: 'required',
+        componentProps: {
+          options: [
+            {
+              label: 'v2',
+              value: 'v2',
+            },
+            {
+              label: 'v3',
+              value: 'v3',
+            },
+          ],
+        },
+      },
+      {
+        label: '商户密钥',
+        fieldName: 'config.mchKey',
+        component: 'Input',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入商户密钥',
+        },
+        dependencies: {
+          show(values) {
+            return values?.config?.apiVersion === 'v2';
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: 'apiclient_cert.p12 证书',
+        fieldName: 'config.keyContent',
+        component: h(InputUpload, {
+          inputType: 'textarea',
+          textareaProps: {
             rows: 8,
+            placeholder: '请上传 apiclient_cert.p12 证书',
           },
-          dependencies: {
-            show(values) {
-              return values.config.mode !== undefined;
-            },
-            triggerFields: ['config'],
+          fileUploadProps: {
+            accept: ['p12'],
           },
+        }),
+        rules: 'required',
+        dependencies: {
+          show(values) {
+            return values?.config?.apiVersion === 'v2';
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
         },
-        {
-          label: '支付宝公钥',
-          fieldName: 'config.alipayPublicKey',
-          component: 'Textarea',
-          rules: 'required',
-          componentProps: {
-            placeholder: '请输入支付宝公钥',
+      },
+      {
+        label: 'API V3 密钥',
+        fieldName: 'config.apiV3Key',
+        component: 'Input',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入 API V3 密钥',
+        },
+        dependencies: {
+          show(values) {
+            return values?.config?.apiVersion === 'v3';
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
+        },
+      },
+      {
+        label: 'apiclient_key.pem 证书',
+        fieldName: 'config.privateKeyContent',
+        component: h(InputUpload, {
+          inputType: 'textarea',
+          textareaProps: {
             rows: 8,
+            placeholder: '请上传 apiclient_key.pem 证书',
           },
-          dependencies: {
-            show(values) {
-              return values?.config?.mode === 0;
-            },
-            triggerFields: ['config.mode', 'mode', 'config'],
+          fileUploadProps: {
+            accept: ['pem'],
           },
+        }),
+        rules: 'required',
+        dependencies: {
+          show(values) {
+            return values?.config?.apiVersion === 'v3';
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
         },
-        {
-          label: '商户公钥应用证书',
-          fieldName: 'config.appCertContent',
-          component: h(InputUpload, {
-            inputType: 'textarea',
-            textareaProps: { rows: 8, placeholder: '请上传商户公钥应用证书' },
-            fileUploadProps: {
-              accept: ['crt'],
-            },
-          }),
-          rules: 'required',
-          dependencies: {
-            show(values) {
-              return values?.config?.mode === 1;
-            },
-            triggerFields: ['config.mode', 'mode', 'config'],
-          },
+      },
+      {
+        label: '证书序列号',
+        fieldName: 'config.certSerialNo',
+        component: 'Input',
+        help: '前往微信商户平台[https://pay.weixin.qq.com/index.php/core/cert/api_cert#/api-cert-manage]查看证书序列号',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入证书序列号',
         },
-        {
-          label: '支付宝公钥证书',
-          fieldName: 'config.alipayPublicCertContent',
-          component: h(InputUpload, {
-            inputType: 'textarea',
-            textareaProps: { rows: 8, placeholder: '请上传支付宝公钥证书' },
-            fileUploadProps: {
-              accept: ['crt'],
-            },
-          }),
-          rules: 'required',
-          dependencies: {
-            show(values) {
-              return values?.config?.mode === 1;
-            },
-            triggerFields: ['config.mode', 'mode', 'config'],
+        dependencies: {
+          show(values) {
+            return values?.config?.apiVersion === 'v3';
           },
+          triggerFields: ['config.mode', 'mode', 'config'],
         },
-        {
-          label: '根证书',
-          fieldName: 'config.rootCertContent',
-          component: h(InputUpload, {
-            inputType: 'textarea',
-            textareaProps: { rows: 8, placeholder: '请上传根证书' },
-            fileUploadProps: {
-              accept: ['crt'],
-            },
-          }),
-          rules: 'required',
-          dependencies: {
-            show(values) {
-              return values?.config?.mode === 1;
-            },
-            triggerFields: ['config.mode', 'mode', 'config'],
+      },
+      {
+        label: 'public_key.pem 证书',
+        fieldName: 'config.publicKeyContent',
+        component: h(InputUpload, {
+          inputType: 'textarea',
+          textareaProps: {
+            rows: 8,
+            placeholder: '请上传 public_key.pem 证书',
           },
+          fileUploadProps: {
+            accept: ['pem'],
+          },
+        }),
+        rules: 'required',
+        dependencies: {
+          show(values) {
+            return values?.config?.apiVersion === 'v3';
+          },
+          triggerFields: ['config.mode', 'mode', 'config'],
         },
-        {
-          label: '接口内容加密方式',
-          fieldName: 'config.encryptType',
-          component: 'RadioGroup',
-          rules: 'required',
-          componentProps: {
-            options: [
-              {
-                value: 'NONE',
-                label: '无加密',
-              },
-              {
-                value: 'AES',
-                label: 'AES',
-              },
-            ],
-          },
-          defaultValue: 'NONE',
+      },
+      {
+        label: '公钥 ID',
+        fieldName: 'config.publicKeyId',
+        component: 'Input',
+        help: '微信支付公钥产品简介及使用说明[https://pay.weixin.qq.com/doc/v3/merchant/4012153196]',
+        rules: 'required',
+        componentProps: {
+          placeholder: '请输入公钥 ID',
         },
-        {
-          label: '备注',
-          fieldName: 'remark',
-          component: 'Textarea',
-          componentProps: {
-            rows: 3,
-            placeholder: '请输入备注',
+        dependencies: {
+          show(values) {
+            return values?.config?.apiVersion === 'v3';
           },
+          triggerFields: ['config.mode', 'mode', 'config'],
         },
-      ];
-    }
-    case 'mock': {
-      return [
-        {
-          label: '商户编号',
-          fieldName: 'id',
-          component: 'Input',
-          dependencies: {
-            show: () => false,
-            triggerFields: [''],
-          },
+      },
+      {
+        label: '备注',
+        fieldName: 'remark',
+        component: 'Input',
+        componentProps: {
+          placeholder: '请输入备注',
         },
-        {
-          label: '应用编号',
-          fieldName: 'appId',
-          component: 'Input',
-          dependencies: {
-            show: () => false,
-            triggerFields: [''],
-          },
-        },
-        {
-          label: '渠道状态',
-          fieldName: 'status',
-          component: 'RadioGroup',
-          rules: 'required',
-          componentProps: {
-            options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-          },
-          defaultValue: 1,
-        },
-        {
-          label: '渠道编码',
-          fieldName: 'code',
-          component: 'Input',
-          dependencies: {
-            show: () => false,
-            triggerFields: [''],
-          },
-        },
-        {
-          label: '渠道费率',
-          fieldName: 'feeRate',
-          component: 'Input',
-          rules: 'required',
-          componentProps: {
-            placeholder: '请输入渠道费率',
-          },
-          dependencies: {
-            show: () => false,
-            triggerFields: [''],
-          },
-        },
-        {
-          label: '备注',
-          fieldName: 'remark',
-          component: 'Textarea',
-          componentProps: {
-            rows: 3,
-            placeholder: '请输入备注',
-          },
-        },
-      ];
-    }
-    case 'wallet': {
-      return [
-        {
-          label: '商户编号',
-          fieldName: 'id',
-          component: 'Input',
-          dependencies: {
-            show: () => false,
-            triggerFields: [''],
-          },
-        },
-        {
-          label: '应用编号',
-          fieldName: 'appId',
-          component: 'Input',
-          dependencies: {
-            show: () => false,
-            triggerFields: [''],
-          },
-        },
-        {
-          label: '渠道状态',
-          fieldName: 'status',
-          component: 'RadioGroup',
-          rules: 'required',
-          componentProps: {
-            options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-          },
-          defaultValue: 1,
-        },
-        {
-          label: '渠道编码',
-          fieldName: 'code',
-          component: 'Input',
-          dependencies: {
-            show: () => false,
-            triggerFields: [''],
-          },
-        },
-        {
-          label: '渠道费率',
-          fieldName: 'feeRate',
-          component: 'Input',
-          rules: 'required',
-          componentProps: {
-            placeholder: '请输入渠道费率',
-          },
-          dependencies: {
-            show: () => false,
-            triggerFields: [''],
-          },
-        },
-        {
-          label: '备注',
-          fieldName: 'remark',
-          component: 'Textarea',
-          componentProps: {
-            rows: 3,
-            placeholder: '请输入备注',
-          },
-        },
-      ];
-    }
-    case 'wx': {
-      return [
-        {
-          label: '商户编号',
-          fieldName: 'id',
-          component: 'Input',
-          dependencies: {
-            show: () => false,
-            triggerFields: [''],
-          },
-        },
-        {
-          label: '应用编号',
-          fieldName: 'appId',
-          component: 'Input',
-          dependencies: {
-            show: () => false,
-            triggerFields: [''],
-          },
-        },
-        {
-          label: '渠道编码',
-          fieldName: 'code',
-          component: 'Input',
-          dependencies: {
-            show: () => false,
-            triggerFields: [''],
-          },
-        },
-        {
-          label: '渠道费率',
-          fieldName: 'feeRate',
-          component: 'Input',
-          rules: 'required',
-          componentProps: {
-            placeholder: '请输入渠道费率',
-          },
-        },
-        {
-          label: '微信 APPID',
-          fieldName: 'config.appId',
-          component: 'Input',
-          rules: 'required',
-          componentProps: {
-            placeholder: '请输入微信 APPID',
-          },
-        },
-        {
-          label: '商户号',
-          fieldName: 'config.mchId',
-          component: 'Input',
-          rules: 'required',
-          componentProps: {
-            placeholder: '请输入商户号',
-          },
-        },
-        {
-          label: '渠道状态',
-          fieldName: 'status',
-          component: 'RadioGroup',
-          rules: 'required',
-          componentProps: {
-            options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-          },
-          defaultValue: 1,
-        },
-        {
-          label: 'API 版本',
-          fieldName: 'config.apiVersion',
-          component: 'RadioGroup',
-          rules: 'required',
-          componentProps: {
-            options: [
-              {
-                label: 'v2',
-                value: 'v2',
-              },
-              {
-                label: 'v3',
-                value: 'v3',
-              },
-            ],
-          },
-        },
-        {
-          label: '商户密钥',
-          fieldName: 'config.mchKey',
-          component: 'Input',
-          rules: 'required',
-          componentProps: {
-            placeholder: '请输入商户密钥',
-          },
-          dependencies: {
-            show(values) {
-              return values?.config?.apiVersion === 'v2';
-            },
-            triggerFields: ['config.mode', 'mode', 'config'],
-          },
-        },
-        {
-          label: 'apiclient_cert.p12 证书',
-          fieldName: 'config.keyContent',
-          component: h(InputUpload, {
-            inputType: 'textarea',
-            textareaProps: {
-              rows: 8,
-              placeholder: '请上传 apiclient_cert.p12 证书',
-            },
-            fileUploadProps: {
-              accept: ['p12 '],
-            },
-          }),
-          rules: 'required',
-          dependencies: {
-            show(values) {
-              return values?.config?.apiVersion === 'v2';
-            },
-            triggerFields: ['config.mode', 'mode', 'config'],
-          },
-        },
-        {
-          label: 'API V3 密钥',
-          fieldName: 'config.apiV3Key',
-          component: 'Input',
-          rules: 'required',
-          componentProps: {
-            placeholder: '请输入 API V3 密钥',
-          },
-          dependencies: {
-            show(values) {
-              return values?.config?.apiVersion === 'v3';
-            },
-            triggerFields: ['config.mode', 'mode', 'config'],
-          },
-        },
-        {
-          label: 'apiclient_key.pem 证书',
-          fieldName: 'config.privateKeyContent',
-          component: h(InputUpload, {
-            inputType: 'textarea',
-            textareaProps: {
-              rows: 8,
-              placeholder: '请上传 apiclient_key.pem 证书',
-            },
-            fileUploadProps: {
-              accept: ['pem'],
-            },
-          }),
-          rules: 'required',
-          dependencies: {
-            show(values) {
-              return values?.config?.apiVersion === 'v3';
-            },
-            triggerFields: ['config.mode', 'mode', 'config'],
-          },
-        },
-        {
-          label: '证书序列号',
-          fieldName: 'config.certSerialNo',
-          component: 'Input',
-          rules: 'required',
-          componentProps: {
-            placeholder: '请输入证书序列号',
-          },
-          dependencies: {
-            show(values) {
-              return values?.config?.apiVersion === 'v3';
-            },
-            triggerFields: ['config.mode', 'mode', 'config'],
-          },
-        },
-        {
-          label: '备注',
-          fieldName: 'remark',
-          component: 'Textarea',
-          componentProps: {
-            rows: 3,
-            placeholder: '请输入备注',
-          },
-        },
-      ];
-    }
-    default: {
-      return [];
-    }
+      },
+    ];
+  } else {
+    return [];
   }
 }
diff --git a/apps/web-antd/src/views/pay/cashier/data.ts b/apps/web-antd/src/views/pay/cashier/data.ts
new file mode 100644
index 000000000..0918a6f10
--- /dev/null
+++ b/apps/web-antd/src/views/pay/cashier/data.ts
@@ -0,0 +1,81 @@
+import {
+  SvgAlipayAppIcon,
+  SvgAlipayBarIcon,
+  SvgAlipayPcIcon,
+  SvgAlipayQrIcon,
+  SvgAlipayWapIcon,
+  SvgMockIcon,
+  SvgWalletIcon,
+  SvgWxAppIcon,
+  SvgWxBarIcon,
+  SvgWxLiteIcon,
+  SvgWxNativeIcon,
+  SvgWxPubIcon,
+} from '@vben/icons';
+
+export const channelsAlipay = [
+  {
+    name: '支付宝 PC 网站支付',
+    icon: SvgAlipayPcIcon,
+    code: 'alipay_pc',
+  },
+  {
+    name: '支付宝 Wap 网站支付',
+    icon: SvgAlipayWapIcon,
+    code: 'alipay_wap',
+  },
+  {
+    name: '支付宝 App 网站支付',
+    icon: SvgAlipayAppIcon,
+    code: 'alipay_app',
+  },
+  {
+    name: '支付宝扫码支付',
+    icon: SvgAlipayQrIcon,
+    code: 'alipay_qr',
+  },
+  {
+    name: '支付宝条码支付',
+    icon: SvgAlipayBarIcon,
+    code: 'alipay_bar',
+  },
+];
+export const channelsWechat = [
+  {
+    name: '微信公众号支付',
+    icon: SvgWxPubIcon,
+    code: 'wx_pub',
+  },
+  {
+    name: '微信小程序支付',
+    icon: SvgWxLiteIcon,
+    code: 'wx_lite',
+  },
+  {
+    name: '微信 App 支付',
+    icon: SvgWxAppIcon,
+    code: 'wx_app',
+  },
+  {
+    name: '微信扫码支付',
+    icon: SvgWxNativeIcon,
+    code: 'wx_native',
+  },
+  {
+    name: '微信条码支付',
+    icon: SvgWxBarIcon,
+    code: 'wx_bar',
+  },
+];
+export const channelsMock = [
+  {
+    name: '钱包支付',
+    icon: SvgWalletIcon,
+    code: 'wallet',
+  },
+  {
+    name: '模拟支付',
+    icon: SvgMockIcon,
+    code: 'mock',
+  },
+];
diff --git a/apps/web-antd/src/views/pay/cashier/index.vue b/apps/web-antd/src/views/pay/cashier/index.vue
index fb03f41f7..3fa92eea9 100644
--- a/apps/web-antd/src/views/pay/cashier/index.vue
+++ b/apps/web-antd/src/views/pay/cashier/index.vue
@@ -1,7 +1,390 @@
-<script lang="ts" setup></script>
+<script setup lang="ts">
+import type { PayOrderApi } from '#/api/pay/order';
 
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
+import { formatDate } from '@vben/utils';
+
+import {
+  Button,
+  Card,
+  Descriptions,
+  Input,
+  message,
+  QRCode,
+} from 'ant-design-vue';
+
+import { getOrder, submitOrder } from '#/api/pay/order';
+import {
+  fenToYuan,
+  PayChannelEnum,
+  PayDisplayModeEnum,
+  PayOrderStatusEnum,
+} from '#/utils';
+
+import { channelsAlipay, channelsMock, channelsWechat } from './data';
+
+defineOptions({ name: 'PayCashier' });
+
+const [Modal, modalApi] = useVbenModal({
+  showConfirmButton: false,
+  destroyOnClose: true,
+});
+
+const route = useRoute();
+const { push } = useRouter(); // 路由
+const { closeCurrentTab } = useTabs();
+
+const id = ref(); // 支付单号
+const title = ref('支付订单');
+const returnUrl = ref<string>(); // 支付完的回调地址
+
+const payOrder = ref<PayOrderApi.Order>();
+const interval = ref<any>(undefined); // 定时任务，轮询是否完成支付
+
+/** 展示形式：二维码 */
+const qrCode = ref({
+  url: '',
+  visible: false,
+});
+
+/** 展示形式：条形码 */
+const barCode = ref({
+  channelCode: '',
+  value: '',
+  visible: false,
+});
+
+/** 获得支付信息 */
+async function getDetail() {
+  // 1. 获取路由参数
+  id.value = route.query.id;
+  if (route.query.returnUrl) {
+    returnUrl.value = decodeURIComponent(route.query.returnUrl as string);
+  }
+  // 1.1 未传递订单编号
+  if (!id.value) {
+    message.error('未传递支付单号，无法查看对应的支付信息');
+    goReturnUrl('cancel');
+    return;
+  }
+  const res = await getOrder(id.value);
+  // 1.2 无法查询到支付信息
+  if (!res) {
+    message.error('支付订单不存在，请检查！');
+    goReturnUrl('cancel');
+    return;
+  }
+  // 1.3 如果已支付、或者已关闭，则直接跳转
+  if (res.status === PayOrderStatusEnum.SUCCESS.status) {
+    message.success('支付成功');
+    goReturnUrl('success');
+    return;
+  } else if (res.status === PayOrderStatusEnum.CLOSED.status) {
+    message.error('无法支付，原因：订单已关闭');
+    goReturnUrl('close');
+    return;
+  }
+  payOrder.value = res;
+}
+
+function handlePay(channelCode: string) {
+  switch (channelCode) {
+    // 条形码支付，需要特殊处理
+    case PayChannelEnum.ALIPAY_BAR.code: {
+      title.value = '“支付宝”条码支付';
+      barCode.value = {
+        channelCode,
+        value: '',
+        visible: true,
+      };
+      modalApi.open();
+      break;
+    }
+    case PayChannelEnum.WX_BAR.code: {
+      title.value = '“微信”条码支付';
+      barCode.value = {
+        channelCode,
+        value: '',
+        visible: true,
+      };
+      modalApi.open();
+      break;
+    }
+    // 微信公众号、小程序支付，无法在 PC 网页中进行
+    case PayChannelEnum.WX_LITE.code: {
+      message.error('微信小程序：不支持 PC 网站');
+      break;
+    }
+    case PayChannelEnum.WX_PUB.code: {
+      message.error('微信公众号支付：不支持 PC 网站');
+      break;
+    }
+    default: {
+      submit(channelCode);
+      break;
+    }
+  }
+}
+
+async function submit(channelCode: string) {
+  try {
+    const submitParam = {
+      id: id.value,
+      channelCode,
+      returnUrl: location.href, // 支付成功后，支付渠道跳转回当前页；再由当前页，跳转回 {@link returnUrl} 对应的地址
+      ...buildSubmitParam(channelCode),
+    };
+    const data = await submitOrder(submitParam);
+    // 直接返回已支付的情况，例如说扫码支付
+    if (data.status === PayOrderStatusEnum.SUCCESS.status) {
+      clearQueryInterval();
+      message.success('支付成功！');
+      goReturnUrl('success');
+      return;
+    }
+
+    // 展示对应的界面
+    switch (data.displayMode) {
+      case PayDisplayModeEnum.APP.mode: {
+        displayApp(channelCode);
+        break;
+      }
+      case PayDisplayModeEnum.QR_CODE.mode: {
+        displayQrCode(channelCode, data);
+        break;
+      }
+      case PayDisplayModeEnum.URL.mode: {
+        displayUrl(data);
+        break;
+      }
+      // No default
+    }
+
+    // 打开轮询任务
+    createQueryInterval();
+  } finally {
+    // message.success('支付成功！')
+  }
+}
+
+/** 构建提交支付的额外参数 */
+function buildSubmitParam(channelCode: string) {
+  // ① 支付宝 BarCode 支付时，需要传递 authCode 条形码
+  if (channelCode === PayChannelEnum.ALIPAY_BAR.code) {
+    return {
+      channelExtras: {
+        auth_code: barCode.value.value,
+      },
+    };
+  }
+  // ② 微信 BarCode 支付时，需要传递 authCode 条形码
+  if (channelCode === PayChannelEnum.WX_BAR.code) {
+    return {
+      channelExtras: {
+        authCode: barCode.value.value,
+      },
+    };
+  }
+  return {};
+}
+
+/** 提交支付后，URL 的展示形式 */
+function displayUrl(data: any) {
+  location.href = data.displayContent;
+}
+
+/** 提交支付后（扫码支付） */
+function displayQrCode(channelCode: string, data: any) {
+  title.value = '请使用手机浏览器“扫一扫”';
+  if (channelCode === PayChannelEnum.ALIPAY_WAP.code) {
+    // 考虑到 WAP 测试，所以引导手机浏览器搞
+  } else if (channelCode.indexOf('alipay_') === 0) {
+    title.value = '请使用支付宝“扫一扫”扫码支付';
+  } else if (channelCode.indexOf('wx_') === 0) {
+    title.value = '请使用微信“扫一扫”扫码支付';
+  }
+  qrCode.value = {
+    url: data.displayContent,
+    visible: true,
+  };
+}
+
+/** 提交支付后（App） */
+function displayApp(channelCode: string) {
+  if (channelCode === PayChannelEnum.ALIPAY_APP.code) {
+    message.error('支付宝 App 支付：无法在网页支付！');
+  }
+  if (channelCode === PayChannelEnum.WX_APP.code) {
+    message.error('微信 App 支付：无法在网页支付！');
+  }
+}
+
+/** 轮询查询任务 */
+function createQueryInterval() {
+  if (interval.value) {
+    return;
+  }
+  interval.value = setInterval(async () => {
+    const data = await getOrder(id.value);
+    // 已支付
+    if (data.status === PayOrderStatusEnum.SUCCESS.status) {
+      clearQueryInterval();
+      message.success('支付成功！');
+      goReturnUrl('success');
+    }
+    // 已取消
+    if (data.status === PayOrderStatusEnum.CLOSED.status) {
+      clearQueryInterval();
+      message.error('支付已关闭！');
+      goReturnUrl('close');
+    }
+  }, 1000 * 2);
+}
+
+/** 清空查询任务 */
+function clearQueryInterval() {
+  // 清空数据
+  qrCode.value = {
+    url: '',
+    visible: false,
+  };
+  barCode.value = {
+    channelCode: '',
+    value: '',
+    visible: false,
+  };
+  // 清空任务
+  clearInterval(interval.value);
+  interval.value = undefined;
+}
+
+/**
+ * 回到业务的 URL
+ *
+ * @param payResult 支付结果
+ *  ① success：支付成功
+ *  ② cancel：取消支付
+ *  ③ close：支付已关闭
+ */
+function goReturnUrl(payResult: string) {
+  // 清理任务
+  clearQueryInterval();
+
+  // 未配置的情况下，只能关闭
+  if (!returnUrl.value) {
+    closeCurrentTab();
+    return;
+  }
+
+  const url = returnUrl.value.includes('?')
+    ? `${returnUrl.value}&payResult=${payResult}`
+    : `${returnUrl.value}?payResult=${payResult}`;
+  // 如果有配置，且是 http 开头，则浏览器跳转
+  if (returnUrl.value.indexOf('http') === 0) {
+    location.href = url;
+  } else {
+    closeCurrentTab();
+    push({ path: url });
+  }
+}
+
+onMounted(async () => {
+  await getDetail();
+});
+</script>
 <template>
-  <div>
-    <h1>收银台</h1>
-  </div>
+  <Page auto-content-height>
+    <Card class="mt-4">
+      <Descriptions :column="3" :title="payOrder?.subject ?? '商品详情'">
+        <Descriptions.Item label="支付单号">
+          {{ payOrder?.id }}
+        </Descriptions.Item>
+        <Descriptions.Item label="商品标题">
+          {{ payOrder?.subject }}
+        </Descriptions.Item>
+        <Descriptions.Item label="商品内容">
+          {{ payOrder?.body }}
+        </Descriptions.Item>
+        <Descriptions.Item label="支付金额">
+          {{ `￥${fenToYuan(payOrder?.price || 0)}` }}
+        </Descriptions.Item>
+        <Descriptions.Item label="创建时间">
+          {{ formatDate(payOrder?.createTime) }}
+        </Descriptions.Item>
+        <Descriptions.Item label="过期时间">
+          {{ formatDate(payOrder?.expireTime) }}
+        </Descriptions.Item>
+      </Descriptions>
+    </Card>
+    <Card title="选择支付宝支付" class="mt-4">
+      <div class="flex">
+        <div
+          class="mr-4 w-40 cursor-pointer items-center border-2 border-gray-200 pb-1 pt-4 text-center hover:border-blue-500"
+          v-for="channel in channelsAlipay"
+          :key="channel.code"
+          @click="handlePay(channel.code)"
+        >
+          <div class="flex items-center justify-center">
+            <component :is="channel.icon" class="h-10 w-10" />
+          </div>
+          <div class="mt-2 pt-1 text-center">{{ channel.name }}</div>
+        </div>
+      </div>
+    </Card>
+    <Card title="选择微信支付" class="mt-4">
+      <div class="flex">
+        <div
+          class="mr-4 w-40 cursor-pointer items-center border-2 border-gray-200 pb-1 pt-4 text-center hover:border-blue-500"
+          v-for="channel in channelsWechat"
+          :key="channel.code"
+          @click="handlePay(channel.code)"
+        >
+          <div class="flex items-center justify-center">
+            <component :is="channel.icon" class="h-10 w-10" />
+          </div>
+          <div class="mt-2 pt-1 text-center">{{ channel.name }}</div>
+        </div>
+      </div>
+    </Card>
+    <Card title="选择其它支付" class="mt-4">
+      <div class="flex">
+        <div
+          class="mr-4 w-40 cursor-pointer items-center border-2 border-gray-200 pb-1 pt-4 text-center hover:border-blue-500"
+          v-for="channel in channelsMock"
+          :key="channel.code"
+          @click="handlePay(channel.code)"
+        >
+          <div class="flex items-center justify-center">
+            <component :is="channel.icon" class="h-10 w-10" />
+          </div>
+          <div class="mt-2 pt-1 text-center">{{ channel.name }}</div>
+        </div>
+      </div>
+    </Card>
+    <Modal class="w-[40%]" :title="title">
+      <QRCode v-if="qrCode.visible" :value="qrCode.url" />
+      <Input
+        v-if="barCode.visible"
+        v-model:value="barCode.value"
+        placeholder="请输入条形码"
+        required
+      />
+      <div class="text-right" v-if="barCode.visible">
+        或使用
+        <Button
+          type="link"
+          danger
+          target="_blank"
+          href="https://baike.baidu.com/item/条码支付/10711903"
+        >
+          (扫码枪/扫码盒)
+        </Button>
+        扫码
+      </div>
+    </Modal>
+  </Page>
 </template>
diff --git a/apps/web-antd/src/views/pay/notify/data.ts b/apps/web-antd/src/views/pay/notify/data.ts
index adb419578..7fc2e6354 100644
--- a/apps/web-antd/src/views/pay/notify/data.ts
+++ b/apps/web-antd/src/views/pay/notify/data.ts
@@ -2,7 +2,7 @@ import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { getAppList } from '#/api/pay/app';
-import { DICT_TYPE, getDictOptions } from '#/utils';
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
 
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
@@ -54,11 +54,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'createTime',
       label: '创建时间',
-      component: 'DatePicker',
+      component: 'RangePicker',
       componentProps: {
-        type: 'daterange',
-        valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        defaultTime: [new Date('1 00:00:00'), new Date('1 23:59:59')],
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
       },
     },
   ];
diff --git a/apps/web-antd/src/views/pay/order/data.ts b/apps/web-antd/src/views/pay/order/data.ts
index b52b5bf26..9a05cc0cd 100644
--- a/apps/web-antd/src/views/pay/order/data.ts
+++ b/apps/web-antd/src/views/pay/order/data.ts
@@ -116,7 +116,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '支付时间',
       field: 'successTime',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
@@ -129,7 +128,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
     {
       title: '操作',
-      width: 80,
+      width: 100,
       fixed: 'right',
       slots: { default: 'actions' },
     },
diff --git a/apps/web-antd/src/views/pay/order/index.vue b/apps/web-antd/src/views/pay/order/index.vue
index 47eac2349..96432d852 100644
--- a/apps/web-antd/src/views/pay/order/index.vue
+++ b/apps/web-antd/src/views/pay/order/index.vue
@@ -31,8 +31,12 @@ function handleDetail(row: PayOrderApi.Order) {
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
+    collapsed: false,
   },
   gridOptions: {
+    cellConfig: {
+      height: 80,
+    },
     columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
@@ -49,6 +53,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isCurrent: true,
+      isHover: true,
+      resizable: true,
     },
     toolbarConfig: {
       refresh: { code: 'query' },
@@ -90,16 +97,18 @@ const [Grid, gridApi] = useVbenVxeGrid({
         />
       </template>
       <template #no="{ row }">
-        <p class="order-font">
-          <Tag size="small" color="blue"> 商户</Tag> {{ row.merchantOrderId }}
-        </p>
-        <p class="order-font" v-if="row.no">
-          <Tag size="small" color="orange">支付</Tag> {{ row.no }}
-        </p>
-        <p class="order-font" v-if="row.channelOrderNo">
-          <Tag size="small" color="green">渠道</Tag>
-          {{ row.channelOrderNo }}
-        </p>
+        <div class="flex flex-col gap-1 text-left">
+          <p class="text-sm">
+            <Tag size="small" color="blue"> 商户</Tag> {{ row.merchantOrderId }}
+          </p>
+          <p class="text-sm" v-if="row.no">
+            <Tag size="small" color="orange">支付</Tag> {{ row.no }}
+          </p>
+          <p class="text-sm" v-if="row.channelOrderNo">
+            <Tag size="small" color="green">渠道</Tag>
+            {{ row.channelOrderNo }}
+          </p>
+        </div>
       </template>
     </Grid>
   </Page>
diff --git a/apps/web-antd/src/views/pay/refund/data.ts b/apps/web-antd/src/views/pay/refund/data.ts
index 010777464..9a02febef 100644
--- a/apps/web-antd/src/views/pay/refund/data.ts
+++ b/apps/web-antd/src/views/pay/refund/data.ts
@@ -2,7 +2,12 @@ import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { getAppList } from '#/api/pay/app';
-import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '#/utils';
+import {
+  DICT_TYPE,
+  getIntDictOptions,
+  getRangePickerDefaultProps,
+  getStrDictOptions,
+} from '#/utils';
 
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
@@ -64,11 +69,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'createTime',
       label: '创建时间',
-      component: 'DatePicker',
+      component: 'RangePicker',
       componentProps: {
-        type: 'daterange',
-        valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        defaultTime: [new Date('1 00:00:00'), new Date('1 23:59:59')],
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
       },
     },
   ];
@@ -80,76 +84,41 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '编号',
-      minWidth: 100,
-    },
-    {
-      field: 'createTime',
-      title: '创建时间',
-      minWidth: 180,
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'payPrice',
-      title: '支付金额',
-      minWidth: 120,
-      cellRender: {
-        name: 'CellTag',
-        props: {
-          type: 'success',
-          content: '￥{payPrice}',
-          formatter: (value: number) => (value / 100).toFixed(2),
-        },
-      },
-    },
-    {
-      field: 'refundPrice',
-      title: '退款金额',
-      minWidth: 120,
-      cellRender: {
-        name: 'CellTag',
-        props: {
-          type: 'danger',
-          content: '￥{refundPrice}',
-          formatter: (value: number) => (value / 100).toFixed(2),
-        },
-      },
     },
     {
       field: 'merchantRefundId',
       title: '退款订单号',
-      minWidth: 300,
-      cellRender: {
-        name: 'CellTag',
-        props: {
-          type: 'info',
-          content: '商户 {merchantRefundId}',
-        },
-      },
     },
     {
       field: 'channelRefundNo',
       title: '渠道退款单号',
-      minWidth: 200,
-      cellRender: {
-        name: 'CellTag',
-        props: {
-          type: 'success',
-          content: '{channelRefundNo}',
-        },
-      },
+    },
+    {
+      field: 'payPrice',
+      title: '支付金额',
+      formatter: 'formatFraction',
+    },
+    {
+      field: 'refundPrice',
+      title: '退款金额',
+      formatter: 'formatFraction',
     },
     {
       field: 'status',
       title: '退款状态',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.PAY_REFUND_STATUS },
       },
     },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
     {
       title: '操作',
-      width: 80,
+      width: 100,
       fixed: 'right',
       slots: { default: 'actions' },
     },
diff --git a/apps/web-antd/src/views/system/notify/template/index.vue b/apps/web-antd/src/views/system/notify/template/index.vue
index 4d4369e5b..6a54e8286 100644
--- a/apps/web-antd/src/views/system/notify/template/index.vue
+++ b/apps/web-antd/src/views/system/notify/template/index.vue
@@ -117,7 +117,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
         <TableAction
           :actions="[
             {
-              label: $t('ui.actionTitle.create', ['短信渠道']),
+              label: $t('ui.actionTitle.create', ['站内信模板']),
               type: 'primary',
               icon: ACTION_ICON.ADD,
               auth: ['system:notify-template:create'],
diff --git a/apps/web-antd/src/views/system/oauth2/client/modules/form.vue b/apps/web-antd/src/views/system/oauth2/client/modules/form.vue
index 53415b618..d32ae3c68 100644
--- a/apps/web-antd/src/views/system/oauth2/client/modules/form.vue
+++ b/apps/web-antd/src/views/system/oauth2/client/modules/form.vue
@@ -31,7 +31,7 @@ const [Form, formApi] = useVbenForm({
       class: 'w-full',
     },
     formItemClass: 'col-span-2',
-    labelWidth: 80,
+    labelWidth: 140,
   },
   layout: 'horizontal',
   schema: useFormSchema(),
@@ -83,7 +83,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal :title="getTitle">
+  <Modal class="w-[40%]" :title="getTitle">
     <Form class="mx-4" />
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/system/post/index.vue b/apps/web-antd/src/views/system/post/index.vue
index f0dbaa359..c17270606 100644
--- a/apps/web-antd/src/views/system/post/index.vue
+++ b/apps/web-antd/src/views/system/post/index.vue
@@ -96,7 +96,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
         <TableAction
           :actions="[
             {
-              label: $t('ui.actionTitle.create', ['短信渠道']),
+              label: $t('ui.actionTitle.create', ['岗位']),
               type: 'primary',
               icon: ACTION_ICON.ADD,
               auth: ['system:post:create'],
diff --git a/apps/web-antd/src/views/system/sms/channel/data.ts b/apps/web-antd/src/views/system/sms/channel/data.ts
index 2956cd236..18efe62f0 100644
--- a/apps/web-antd/src/views/system/sms/channel/data.ts
+++ b/apps/web-antd/src/views/system/sms/channel/data.ts
@@ -50,14 +50,6 @@ export function useFormSchema(): VbenFormSchema[] {
       },
       rules: z.number().default(CommonStatusEnum.ENABLE),
     },
-    {
-      fieldName: 'remark',
-      label: '备注',
-      component: 'Textarea',
-      componentProps: {
-        placeholder: '请输入备注',
-      },
-    },
     {
       fieldName: 'apiKey',
       label: '短信 API 的账号',
@@ -83,6 +75,14 @@ export function useFormSchema(): VbenFormSchema[] {
         placeholder: '请输入短信发送回调 URL',
       },
     },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
   ];
 }
 
@@ -135,17 +135,14 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '编号',
-      minWidth: 100,
     },
     {
       field: 'signature',
       title: '短信签名',
-      minWidth: 120,
     },
     {
       field: 'code',
       title: '渠道编码',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE },
@@ -154,38 +151,32 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'status',
       title: '启用状态',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
       },
     },
-    {
-      field: 'remark',
-      title: '备注',
-      minWidth: 120,
-    },
     {
       field: 'apiKey',
       title: '短信 API 的账号',
-      minWidth: 180,
     },
     {
       field: 'apiSecret',
       title: '短信 API 的密钥',
-      minWidth: 180,
     },
     {
       field: 'callbackUrl',
       title: '短信发送回调 URL',
-      minWidth: 180,
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
+    {
+      field: 'remark',
+      title: '备注',
+    },
     {
       title: '操作',
       width: 130,
diff --git a/apps/web-antd/src/views/system/sms/channel/modules/form.vue b/apps/web-antd/src/views/system/sms/channel/modules/form.vue
index d1efa610b..7c15b2a89 100644
--- a/apps/web-antd/src/views/system/sms/channel/modules/form.vue
+++ b/apps/web-antd/src/views/system/sms/channel/modules/form.vue
@@ -31,7 +31,7 @@ const [Form, formApi] = useVbenForm({
       class: 'w-full',
     },
     formItemClass: 'col-span-2',
-    labelWidth: 80,
+    labelWidth: 120,
   },
   layout: 'horizontal',
   schema: useFormSchema(),
@@ -82,7 +82,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal :title="getTitle">
+  <Modal class="w-[40%]" :title="getTitle">
     <Form class="mx-4" />
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/system/sms/log/data.ts b/apps/web-antd/src/views/system/sms/log/data.ts
index b4f5de358..4b4d632b0 100644
--- a/apps/web-antd/src/views/system/sms/log/data.ts
+++ b/apps/web-antd/src/views/system/sms/log/data.ts
@@ -84,18 +84,10 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '编号',
-      minWidth: 100,
-    },
-    {
-      field: 'createTime',
-      title: '创建时间',
-      minWidth: 180,
-      formatter: 'formatDateTime',
     },
     {
       field: 'mobile',
       title: '手机号',
-      minWidth: 120,
     },
     {
       field: 'templateContent',
@@ -105,7 +97,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'sendStatus',
       title: '发送状态',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.SYSTEM_SMS_SEND_STATUS },
@@ -114,13 +105,11 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'sendTime',
       title: '发送时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'receiveStatus',
       title: '接收状态',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS },
@@ -129,13 +118,11 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'receiveTime',
       title: '接收时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'channelCode',
       title: '短信渠道',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE },
@@ -144,17 +131,20 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'templateId',
       title: '模板编号',
-      minWidth: 100,
     },
     {
       field: 'templateType',
       title: '短信类型',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE },
       },
     },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
     {
       title: '操作',
       width: 80,
diff --git a/apps/web-antd/src/views/system/sms/template/data.ts b/apps/web-antd/src/views/system/sms/template/data.ts
index f24f7cfd2..f56273cdb 100644
--- a/apps/web-antd/src/views/system/sms/template/data.ts
+++ b/apps/web-antd/src/views/system/sms/template/data.ts
@@ -78,6 +78,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'Textarea',
       componentProps: {
         placeholder: '请输入模板内容',
+        rows: 4,
       },
       rules: 'required',
     },
@@ -204,12 +205,10 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '编号',
-      minWidth: 100,
     },
     {
       field: 'type',
       title: '短信类型',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE },
@@ -218,12 +217,10 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'name',
       title: '模板名称',
-      minWidth: 120,
     },
     {
       field: 'code',
       title: '模板编码',
-      minWidth: 120,
     },
     {
       field: 'content',
@@ -233,26 +230,18 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'status',
       title: '开启状态',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
       },
     },
-    {
-      field: 'remark',
-      title: '备注',
-      minWidth: 120,
-    },
     {
       field: 'apiTemplateId',
       title: '短信 API 的模板编号',
-      minWidth: 180,
     },
     {
       field: 'channelCode',
       title: '短信渠道',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE },
@@ -261,9 +250,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
+    {
+      field: 'remark',
+      title: '备注',
+    },
     {
       title: '操作',
       width: 220,
diff --git a/apps/web-antd/src/views/system/sms/template/modules/form.vue b/apps/web-antd/src/views/system/sms/template/modules/form.vue
index 8edbc735c..2bca1fd5f 100644
--- a/apps/web-antd/src/views/system/sms/template/modules/form.vue
+++ b/apps/web-antd/src/views/system/sms/template/modules/form.vue
@@ -31,7 +31,7 @@ const [Form, formApi] = useVbenForm({
       class: 'w-full',
     },
     formItemClass: 'col-span-2',
-    labelWidth: 80,
+    labelWidth: 120,
   },
   layout: 'horizontal',
   schema: useFormSchema(),
@@ -83,7 +83,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal :title="getTitle">
+  <Modal class="w-[40%]" :title="getTitle">
     <Form class="mx-4" />
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/system/sms/template/modules/send-form.vue b/apps/web-antd/src/views/system/sms/template/modules/send-form.vue
index ff495de5d..ae82a3b32 100644
--- a/apps/web-antd/src/views/system/sms/template/modules/send-form.vue
+++ b/apps/web-antd/src/views/system/sms/template/modules/send-form.vue
@@ -103,7 +103,7 @@ const buildFormSchema = () => {
 </script>
 
 <template>
-  <Modal title="发送短信">
+  <Modal class="w-[30%]" title="发送短信">
     <Form class="mx-4" />
   </Modal>
 </template>
diff --git a/packages/icons/src/svg/icons/alipay-app.svg b/packages/icons/src/svg/icons/alipay-app.svg
new file mode 100644
index 000000000..ebf11883e
--- /dev/null
+++ b/packages/icons/src/svg/icons/alipay-app.svg
@@ -0,0 +1 @@
+<svg t="1627279997305" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11904" width="40" height="40"><path d="M938.7008 669.525333L938.7008 249.412267c0-90.555733-73.5232-164.078933-164.1472-164.078933L249.378133 85.333333c-90.555733 0-164.078933 73.48906699-164.078933 164.078933l0 525.2096c0 90.555733 73.454933 164.078933 164.07893301 164.078933l525.20959999 0c80.725333 0 147.8656-58.368 161.553067-135.099733-43.52-18.8416-232.106667-100.283733-330.376533-147.182933-74.786133 90.589867-153.088 144.930133-271.121067 144.930133s-196.81279999-72.704-187.357867-161.655467c6.2464-58.402133 46.2848-153.9072 220.296533-137.5232 91.682133 8.6016 133.666133 25.736533 208.418133 50.414933 19.3536-35.4304 35.4304-74.513067 47.616-116.0192L292.0448 436.565333l0-32.8704 164.0448 0 0-58.9824L256 344.712533l1e-8-36.181333 200.12373299 0L456.123733 223.3344c0 0 1.809067-13.312 16.520533-13.31200001l82.056533 1e-8 0 98.474667 213.333333 0 0 36.181333-213.333333 1e-8 0 58.98239999 174.045867 0c-16.00853301 65.1264-40.277333 124.962133-70.690133 177.220267C708.608 599.176533 938.7008 669.525333 938.7008 669.525333L938.7008 669.525333 938.7008 669.525333 938.7008 669.525333zM321.57013299 744.994133c-124.7232 0-144.452267-78.7456-137.83039999-111.65013299 6.5536-32.733867 42.666667-75.502933 112.0256-75.50293301 79.6672 0 151.04 20.445867 236.714667 62.088533C472.302933 698.333867 398.370133 744.994133 321.57013299 744.994133L321.57013299 744.994133 321.57013299 744.994133zM321.57013299 744.994133" fill="#1296db" p-id="11905"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/src/svg/icons/alipay-bar.svg b/packages/icons/src/svg/icons/alipay-bar.svg
new file mode 100644
index 000000000..eb1e1e848
--- /dev/null
+++ b/packages/icons/src/svg/icons/alipay-bar.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627279586085" class="icon" viewBox="0 0 1036 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6737" xmlns:xlink="http://www.w3.org/1999/xlink" width="40.46875" height="40"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff2") format("woff2"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff") format("woff"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.ttf") format("truetype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.svg#iconfont") format("svg"); }
+</style></defs><path d="M27.587124 336.619083h69.148134a13.978733 13.978733 0 0 0 13.79235-13.978733V13.989916A13.978733 13.978733 0 0 0 96.735258 0.011183H27.587124a13.978733 13.978733 0 0 0-13.792351 13.978733v308.650434a13.978733 13.978733 0 0 0 13.792351 13.978733z m165.880969 0h27.584701a13.978733 13.978733 0 0 0 13.79235-13.978733V13.989916a13.978733 13.978733 0 0 0-13.79235-13.978733h-27.584701a13.978733 13.978733 0 0 0-13.79235 13.978733v308.650434a13.978733 13.978733 0 0 0 13.79235 13.978733z m138.109886 322.629167h-110.525185a27.771084 27.771084 0 0 0-27.584701 28.14385v111.829867a27.771084 27.771084 0 0 0 27.584701 28.14385h110.525185a27.957467 27.957467 0 0 0 27.584701-28.14385v-111.829867a27.957467 27.957467 0 0 0-27.584701-28.14385z m484.596091-322.629167h27.584701a13.978733 13.978733 0 0 0 13.79235-13.978733V13.989916a13.978733 13.978733 0 0 0-14.537883-13.978733h-27.5847a13.978733 13.978733 0 0 0-13.978734 13.978733v308.650434a13.978733 13.978733 0 0 0 13.978734 13.978733z m-469.871825 0H428.68358a13.978733 13.978733 0 0 0 13.792351-13.978733V13.989916A13.978733 13.978733 0 0 0 428.68358 0.011183h-83.126867a13.978733 13.978733 0 0 0-13.792351 13.978733v308.650434a13.978733 13.978733 0 0 0 13.792351 13.978733z m594.189361 0h69.148134a13.978733 13.978733 0 0 0 13.792351-13.978733V13.989916a13.978733 13.978733 0 0 0-14.537883-13.978733h-69.148135a13.978733 13.978733 0 0 0-13.79235 13.978733v308.650434a13.978733 13.978733 0 0 0 13.79235 13.978733z m-412.279444 126.181367H66.91396A67.470687 67.470687 0 0 0 0.002423 530.830286v425.139878a67.470687 67.470687 0 0 0 66.911537 68.029836h418.802853a67.470687 67.470687 0 0 0 66.911537-68.029836V487.775787a24.788954 24.788954 0 0 0-24.416188-24.975337z m-58.337914 433.899885a42.681733 42.681733 0 0 1-42.495349 43.054498H125.438257a42.681733 42.681733 0 0 1-42.495349-43.054498V590.100115a42.681733 42.681733 0 0 1 42.495349-43.054498h301.940642a42.681733 42.681733 0 0 1 42.495349 43.054498z m525.22761-433.899885a41.749817 41.749817 0 0 0-41.377051 42.122583v55.914934a41.377051 41.377051 0 1 0 82.940485 0v-55.914934a41.749817 41.749817 0 0 0-41.563434-42.122583z m0 223.659734a41.749817 41.749817 0 0 0-41.377051 42.122584V894.65012a45.477479 45.477479 0 0 1-45.291096 45.850246h-159.730327a43.240882 43.240882 0 0 0-43.613649 37.276622A41.9362 41.9362 0 0 0 745.534871 1024h233.538039a57.778765 57.778765 0 0 0 57.405999-58.337914V729.3283a41.749817 41.749817 0 0 0-41.377051-41.9362zM732.488053 322.64035V13.989916a13.978733 13.978733 0 0 0-13.79235-13.978733h-82.940485a13.978733 13.978733 0 0 0-13.79235 13.978733v308.650434a13.978733 13.978733 0 0 0 13.79235 13.978733h82.940485a13.978733 13.978733 0 0 0 13.79235-13.978733zM532.126208 0.011183c-11.36937 0-20.688525 6.337026-20.688526 13.978733v308.650434c0 7.828091 9.319156 13.978733 20.688526 13.978733s20.688525-6.337026 20.688525-13.978733V13.989916c0-7.641708-9.319156-13.978733-20.688525-13.978733z" p-id="6738" fill="#1977FD"></path><path d="M745.534871 462.80045a41.749817 41.749817 0 0 0-41.377051 42.122583v252.549117a41.377051 41.377051 0 1 0 82.940485 0V504.923033A41.749817 41.749817 0 0 0 745.534871 462.80045" p-id="6739" fill="#1977FD"></path></svg>
diff --git a/packages/icons/src/svg/icons/alipay-pc.svg b/packages/icons/src/svg/icons/alipay-pc.svg
new file mode 100644
index 000000000..2a7527703
--- /dev/null
+++ b/packages/icons/src/svg/icons/alipay-pc.svg
@@ -0,0 +1 @@
+<svg t="1627279878333" class="icon" viewBox="0 0 1285 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8535" width="40" height="40"><path d="M1141.76 855.04h-286.72c0 40.96 30.72 71.68 71.68 71.68h107.52c20.48 0 35.84 15.36 35.84 35.84s-15.36 35.84-35.84 35.84h-783.36c-20.48 0-35.84-15.36-35.84-35.84s15.36-35.84 35.84-35.84h107.52c40.96 0 71.68-30.72 71.68-71.68h-286.72c-76.8 0-143.36-61.44-143.36-143.36v-568.32c0-76.8 61.44-143.36 143.36-143.36h993.28c76.8 0 143.36 61.44 143.36 143.36v568.32c5.12 76.8-56.32 143.36-138.24 143.36z m71.68-711.68c0-40.96-30.72-71.68-71.68-71.68h-993.28c-40.96 0-71.68 30.72-71.68 71.68v568.32c0 40.96 30.72 71.68 71.68 71.68h993.28c40.96 0 71.68-30.72 71.68-71.68v-568.32z m-143.36 568.32h-855.04c-40.96 0-71.68-30.72-71.68-71.68v-424.96c0-40.96 30.72-71.68 71.68-71.68h855.04c40.96 0 71.68 30.72 71.68 71.68v424.96c0 40.96-30.72 71.68-71.68 71.68z" p-id="8536" fill="#1977FD"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/src/svg/icons/alipay-qr.svg b/packages/icons/src/svg/icons/alipay-qr.svg
new file mode 100644
index 000000000..48337508a
--- /dev/null
+++ b/packages/icons/src/svg/icons/alipay-qr.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627279238245" class="icon" viewBox="0 0 1115 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4112" width="43.5546875" height="40" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff2") format("woff2"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff") format("woff"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.ttf") format("truetype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.svg#iconfont") format("svg"); }
+</style></defs><path d="M751.388 68.267a34.133 34.133 0 0 1 0-68.267h227.556a91.022 91.022 0 0 1 91.022 91.022v227.556a34.133 34.133 0 1 1-68.266 0V91.022a22.756 22.756 0 0 0-22.756-22.755H751.388M1001.7 705.422a34.133 34.133 0 0 1 68.266 0v227.556A91.022 91.022 0 0 1 978.944 1024H748.885a34.133 34.133 0 0 1 0-68.267H978.49a22.756 22.756 0 0 0 22.755-22.755V705.422M364.09 955.733a34.133 34.133 0 1 1 0 68.267H136.533a91.022 91.022 0 0 1-91.022-91.022V705.422a34.133 34.133 0 0 1 68.267 0v227.556a22.756 22.756 0 0 0 22.755 22.755H364.09M113.778 318.578a34.133 34.133 0 1 1-68.267 0V91.022A91.022 91.022 0 0 1 136.533 0H364.09a34.133 34.133 0 0 1 0 68.267H136.533a22.756 22.756 0 0 0-22.755 22.755v227.556M34.133 477.867a34.133 34.133 0 0 0 0 68.266h168.619v-68.266z m1046.756 0H912.27v68.266h168.619a34.133 34.133 0 0 0 0-68.266zM202.752 157.24h709.746v320.627H202.752z m0 388.893h709.746V866.76H202.752z" fill="#1977FD" p-id="4113"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/src/svg/icons/alipay-wap.svg b/packages/icons/src/svg/icons/alipay-wap.svg
new file mode 100644
index 000000000..87075dbb7
--- /dev/null
+++ b/packages/icons/src/svg/icons/alipay-wap.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1645964864184" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8460" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40"><defs><style type="text/css"></style></defs><path d="M768.3 0 255.7 0c-70.8 0-128.1 57.4-128.1 128.1l0 767.8c0 70.8 57.4 128.1 128.1 128.1L512 1024l256.3 0c70.8 0 128.1-57.4 128.1-128.1L896.4 128.1C896.4 57.3 839 0 768.3 0zM383.9 96.1c0-17.7 14.3-32 32-32l192.2 0c17.7 0 32 14.3 32 32l0 0c0 17.7-14.3 32-32 32L415.9 128.1C398.2 128.1 383.9 113.8 383.9 96.1L383.9 96.1zM512 959.9 512 959.9 512 959.9c-35.4 0-64.1-28.8-64.1-64.1 0-35.4 28.7-64.1 64.1-64.1l0 0 0 0c35.4 0 64.1 28.7 64.1 64.1C576.1 931.1 547.4 959.9 512 959.9zM832.3 755.6c0 6.7-5.4 12.2-12.2 12.2L203.9 767.8c-6.7 0-12.2-5.4-12.2-12.2L191.7 204.3c0-6.7 5.4-12.2 12.2-12.2l616.3 0c6.7 0 12.2 5.4 12.2 12.2L832.4 755.6z" p-id="8461" fill="#1977FD"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/src/svg/icons/mock.svg b/packages/icons/src/svg/icons/mock.svg
new file mode 100644
index 000000000..e0a685719
--- /dev/null
+++ b/packages/icons/src/svg/icons/mock.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1747409043186" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4834" width="128" height="128" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M44.416 853.333333v-85.205333a170.666667 170.666667 0 0 1 170.666667-170.666667h170.837333a37637.589333 37637.589333 0 0 1 0-206.165333C324.309333 352.170667 281.6 285.141333 281.6 211.968c0-116.906667 90.197333-211.072 231.168-211.072 140.970667 0 230.741333 94.208 230.741333 211.072 0 73.216-40.96 140.245333-102.528 179.328 0.256 0.170667 0.256 68.906667 0 206.165333h171.989334a170.666667 170.666667 0 0 1 170.666666 170.666667V853.333333a170.666667 170.666667 0 0 1-170.666666 170.666667H215.082667a170.666667 170.666667 0 0 1-170.666667-170.666667z m84.266667-84.650666v104.277333a85.333333 85.333333 0 0 0 85.333333 85.333333H811.52a85.333333 85.333333 0 0 0 85.333333-85.333333v-104.277333a85.333333 85.333333 0 0 0-85.333333-85.333334h-256.64l8.96-342.698666c66.944-21.333333 100.394667-64.256 100.394667-128.682667 0-61.952-57.344-129.322667-151.466667-129.322667-94.122667 0-146.645333 61.610667-146.645333 129.322667 0 71.466667 34.816 114.346667 104.362666 128.682667v342.698666H214.016a85.333333 85.333333 0 0 0-85.333333 85.333334z m167.125333 138.368c-50.432 0-91.434667-41.557333-91.434667-92.586667s41.002667-92.586667 91.434667-92.586667c50.389333 0 91.434667 41.557333 91.434667 92.586667 0 24.832-9.6 48.170667-27.008 65.706667-17.237333 17.322667-40.106667 26.88-64.426667 26.88z m0-119.466667a27.093333 27.093333 0 0 0-27.306667 26.88c0 14.805333 12.245333 26.88 27.306667 26.88a27.306667 27.306667 0 0 0 19.498667-8.106667 26.453333 26.453333 0 0 0 7.808-18.773333 27.093333 27.093333 0 0 0-27.306667-26.88z" fill="#1296db" p-id="4835"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/src/svg/icons/wallet.svg b/packages/icons/src/svg/icons/wallet.svg
new file mode 100644
index 000000000..27b09ead5
--- /dev/null
+++ b/packages/icons/src/svg/icons/wallet.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1676209854312" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3033" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M173.077333 362.666667l91.114667-214.677334a65.6 65.6 0 0 1 86.016-34.773333c11.584 4.906667 24.96 10.282667 40.896 16.448 8.277333 3.2 16.789333 6.464 27.904 10.666667 28.202667 10.709333 39.296 14.933333 46.144 17.642666l51.477333-51.669333c28.181333-28.16 74.112-27.946667 102.570667 0.533333l195.925333 195.925334c16.426667 16.426667 23.445333 38.634667 21.056 59.904H896a42.666667 42.666667 0 0 1 42.666667 42.666666v490.666667a42.666667 42.666667 0 0 1-42.666667 42.666667H128a42.666667 42.666667 0 0 1-42.666667-42.666667V405.333333a42.666667 42.666667 0 0 1 42.666667-42.666666h45.077333z m48.96 0h39.104l169.194667-169.770667-27.328-10.389333c-11.2-4.245333-19.818667-7.530667-28.224-10.794667a1459.2 1459.2 0 0 1-42.197333-17.002667 20.522667 20.522667 0 0 0-26.901334 10.88L222.037333 362.666667z m108.842667 0h454.954667a23.509333 23.509333 0 0 0-5.290667-25.322667l-195.925333-195.925333a23.36 23.36 0 0 0-33.024-0.213334L330.88 362.666667zM128 405.333333v490.666667h768V405.333333H128z m597.333333 320a85.333333 85.333333 0 1 1 0-170.666666 85.333333 85.333333 0 0 1 0 170.666666z m0-42.666666a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z" fill="#4296d5" p-id="3034"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/src/svg/icons/wx-app.svg b/packages/icons/src/svg/icons/wx-app.svg
new file mode 100644
index 000000000..ad40b2a2c
--- /dev/null
+++ b/packages/icons/src/svg/icons/wx-app.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627279375144" class="icon" viewBox="0 0 1115 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4399" width="43.5546875" height="40" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff2") format("woff2"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff") format("woff"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.ttf") format("truetype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.svg#iconfont") format("svg"); }
+</style></defs><path d="M751.388 68.267a34.133 34.133 0 0 1 0-68.267h227.556a91.022 91.022 0 0 1 91.022 91.022v227.556a34.133 34.133 0 1 1-68.266 0V91.022a22.756 22.756 0 0 0-22.756-22.755H751.388M1001.7 705.422a34.133 34.133 0 0 1 68.266 0v227.556A91.022 91.022 0 0 1 978.944 1024H748.885a34.133 34.133 0 0 1 0-68.267H978.49a22.756 22.756 0 0 0 22.755-22.755V705.422M364.09 955.733a34.133 34.133 0 1 1 0 68.267H136.533a91.022 91.022 0 0 1-91.022-91.022V705.422a34.133 34.133 0 0 1 68.267 0v227.556a22.756 22.756 0 0 0 22.755 22.755H364.09M113.778 318.578a34.133 34.133 0 1 1-68.267 0V91.022A91.022 91.022 0 0 1 136.533 0H364.09a34.133 34.133 0 0 1 0 68.267H136.533a22.756 22.756 0 0 0-22.755 22.755v227.556M34.133 477.867a34.133 34.133 0 0 0 0 68.266h168.619v-68.266z m1046.756 0H912.27v68.266h168.619a34.133 34.133 0 0 0 0-68.266zM202.752 157.24h709.746v320.627H202.752z m0 388.893h709.746V866.76H202.752z" fill="#04C361" p-id="4400"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/src/svg/icons/wx-bar.svg b/packages/icons/src/svg/icons/wx-bar.svg
new file mode 100644
index 000000000..11292e6e7
--- /dev/null
+++ b/packages/icons/src/svg/icons/wx-bar.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627279586085" class="icon" viewBox="0 0 1036 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6737" xmlns:xlink="http://www.w3.org/1999/xlink" width="40.46875" height="40"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.eot?#iefix&quot;) format(&quot;embedded-opentype&quot;), url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff2&quot;) format(&quot;woff2&quot;), url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff&quot;) format(&quot;woff&quot;), url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.ttf&quot;) format(&quot;truetype&quot;), url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.svg#iconfont&quot;) format(&quot;svg&quot;); }</style></defs><path d="M27.587124 336.619083h69.148134a13.978733 13.978733 0 0 0 13.79235-13.978733V13.989916A13.978733 13.978733 0 0 0 96.735258 0.011183H27.587124a13.978733 13.978733 0 0 0-13.792351 13.978733v308.650434a13.978733 13.978733 0 0 0 13.792351 13.978733z m165.880969 0h27.584701a13.978733 13.978733 0 0 0 13.79235-13.978733V13.989916a13.978733 13.978733 0 0 0-13.79235-13.978733h-27.584701a13.978733 13.978733 0 0 0-13.79235 13.978733v308.650434a13.978733 13.978733 0 0 0 13.79235 13.978733z m138.109886 322.629167h-110.525185a27.771084 27.771084 0 0 0-27.584701 28.14385v111.829867a27.771084 27.771084 0 0 0 27.584701 28.14385h110.525185a27.957467 27.957467 0 0 0 27.584701-28.14385v-111.829867a27.957467 27.957467 0 0 0-27.584701-28.14385z m484.596091-322.629167h27.584701a13.978733 13.978733 0 0 0 13.79235-13.978733V13.989916a13.978733 13.978733 0 0 0-14.537883-13.978733h-27.5847a13.978733 13.978733 0 0 0-13.978734 13.978733v308.650434a13.978733 13.978733 0 0 0 13.978734 13.978733z m-469.871825 0H428.68358a13.978733 13.978733 0 0 0 13.792351-13.978733V13.989916A13.978733 13.978733 0 0 0 428.68358 0.011183h-83.126867a13.978733 13.978733 0 0 0-13.792351 13.978733v308.650434a13.978733 13.978733 0 0 0 13.792351 13.978733z m594.189361 0h69.148134a13.978733 13.978733 0 0 0 13.792351-13.978733V13.989916a13.978733 13.978733 0 0 0-14.537883-13.978733h-69.148135a13.978733 13.978733 0 0 0-13.79235 13.978733v308.650434a13.978733 13.978733 0 0 0 13.79235 13.978733z m-412.279444 126.181367H66.91396A67.470687 67.470687 0 0 0 0.002423 530.830286v425.139878a67.470687 67.470687 0 0 0 66.911537 68.029836h418.802853a67.470687 67.470687 0 0 0 66.911537-68.029836V487.775787a24.788954 24.788954 0 0 0-24.416188-24.975337z m-58.337914 433.899885a42.681733 42.681733 0 0 1-42.495349 43.054498H125.438257a42.681733 42.681733 0 0 1-42.495349-43.054498V590.100115a42.681733 42.681733 0 0 1 42.495349-43.054498h301.940642a42.681733 42.681733 0 0 1 42.495349 43.054498z m525.22761-433.899885a41.749817 41.749817 0 0 0-41.377051 42.122583v55.914934a41.377051 41.377051 0 1 0 82.940485 0v-55.914934a41.749817 41.749817 0 0 0-41.563434-42.122583z m0 223.659734a41.749817 41.749817 0 0 0-41.377051 42.122584V894.65012a45.477479 45.477479 0 0 1-45.291096 45.850246h-159.730327a43.240882 43.240882 0 0 0-43.613649 37.276622A41.9362 41.9362 0 0 0 745.534871 1024h233.538039a57.778765 57.778765 0 0 0 57.405999-58.337914V729.3283a41.749817 41.749817 0 0 0-41.377051-41.9362zM732.488053 322.64035V13.989916a13.978733 13.978733 0 0 0-13.79235-13.978733h-82.940485a13.978733 13.978733 0 0 0-13.79235 13.978733v308.650434a13.978733 13.978733 0 0 0 13.79235 13.978733h82.940485a13.978733 13.978733 0 0 0 13.79235-13.978733zM532.126208 0.011183c-11.36937 0-20.688525 6.337026-20.688526 13.978733v308.650434c0 7.828091 9.319156 13.978733 20.688526 13.978733s20.688525-6.337026 20.688525-13.978733V13.989916c0-7.641708-9.319156-13.978733-20.688525-13.978733z" p-id="6738" fill="#04C361"/><path d="M745.534871 462.80045a41.749817 41.749817 0 0 0-41.377051 42.122583v252.549117a41.377051 41.377051 0 1 0 82.940485 0V504.923033A41.749817 41.749817 0 0 0 745.534871 462.80045" p-id="6739" fill="#04C361"/></svg>
\ No newline at end of file
diff --git a/packages/icons/src/svg/icons/wx-lite.svg b/packages/icons/src/svg/icons/wx-lite.svg
new file mode 100644
index 000000000..0c925cf39
--- /dev/null
+++ b/packages/icons/src/svg/icons/wx-lite.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1676209433089" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2990" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M608.6 290.3c67.1 0 121.7 50.5 121.7 112.9 0 19.4-5.6 38.4-15.7 55.5-15.3 25-39.8 43.5-69.4 52.3-7.9 2.3-13.9 3.2-19.4 3.2-13 0-23.1-10.2-23.1-23.1 0-13 10.2-23.1 23.1-23.1 0.9 0 2.8 0 5.1-0.9 19.9-5.6 35.6-17.1 44.4-32.4 6-9.7 8.8-20.4 8.8-31.5 0-36.6-33.8-66.6-75-66.6-14.4 0-28.2 3.7-40.7 10.6-21.8 12.5-34.7 33.3-34.7 56v193.9c0 39.3-21.8 75.4-57.9 95.8-19.4 11.1-41.2 16.7-63.4 16.7-67.1 0-121.7-50.5-121.7-112.9 0-19.4 5.6-38.4 15.7-55.5 15.3-25 39.8-43.5 69.4-52.3 8.3-2.3 13.9-3.2 19.4-3.2 13 0 23.1 10.2 23.1 23.1 0 13-10.2 23.1-23.1 23.1-0.9 0-2.8 0-5.1 0.9-19.9 6-35.6 17.6-44.4 32.4-6 9.7-8.8 20.4-8.8 31.5 0 36.6 33.8 66.6 75.4 66.6 14.4 0 28.2-3.7 40.7-10.6 21.8-12.5 34.7-33.3 34.7-56V403.3c0-39.3 21.8-75.4 57.9-95.8 19-11.6 40.7-17.2 63-17.2zM510.8 929c231.1 0 418.4-187.3 418.4-418.4S741.9 92.1 510.8 92.1 92.4 279.5 92.4 510.6 279.7 929 510.8 929z m0 22C267.5 951 70.3 753.8 70.3 510.6S267.5 70.1 510.8 70.1s440.5 197.2 440.5 440.5S754.1 951 510.8 951z" p-id="2991" fill="#58bf6b"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/src/svg/icons/wx-native.svg b/packages/icons/src/svg/icons/wx-native.svg
new file mode 100644
index 000000000..bf3ba2b61
--- /dev/null
+++ b/packages/icons/src/svg/icons/wx-native.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627279375144" class="icon" viewBox="0 0 1115 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4399" width="43.5546875" height="40" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.eot?#iefix&quot;) format(&quot;embedded-opentype&quot;), url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff2&quot;) format(&quot;woff2&quot;), url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff&quot;) format(&quot;woff&quot;), url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.ttf&quot;) format(&quot;truetype&quot;), url(&quot;//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.svg#iconfont&quot;) format(&quot;svg&quot;); }</style></defs><path d="M751.388 68.267a34.133 34.133 0 0 1 0-68.267h227.556a91.022 91.022 0 0 1 91.022 91.022v227.556a34.133 34.133 0 1 1-68.266 0V91.022a22.756 22.756 0 0 0-22.756-22.755H751.388M1001.7 705.422a34.133 34.133 0 0 1 68.266 0v227.556A91.022 91.022 0 0 1 978.944 1024H748.885a34.133 34.133 0 0 1 0-68.267H978.49a22.756 22.756 0 0 0 22.755-22.755V705.422M364.09 955.733a34.133 34.133 0 1 1 0 68.267H136.533a91.022 91.022 0 0 1-91.022-91.022V705.422a34.133 34.133 0 0 1 68.267 0v227.556a22.756 22.756 0 0 0 22.755 22.755H364.09M113.778 318.578a34.133 34.133 0 1 1-68.267 0V91.022A91.022 91.022 0 0 1 136.533 0H364.09a34.133 34.133 0 0 1 0 68.267H136.533a22.756 22.756 0 0 0-22.755 22.755v227.556M34.133 477.867a34.133 34.133 0 0 0 0 68.266h168.619v-68.266z m1046.756 0H912.27v68.266h168.619a34.133 34.133 0 0 0 0-68.266zM202.752 157.24h709.746v320.627H202.752z m0 388.893h709.746V866.76H202.752z" fill="#04C361" p-id="4400"/></svg>
\ No newline at end of file
diff --git a/packages/icons/src/svg/icons/wx-pub.svg b/packages/icons/src/svg/icons/wx-pub.svg
new file mode 100644
index 000000000..3a6d15b70
--- /dev/null
+++ b/packages/icons/src/svg/icons/wx-pub.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627279797174" class="icon" viewBox="0 0 1260 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7665" xmlns:xlink="http://www.w3.org/1999/xlink" width="49.21875" height="40"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff2") format("woff2"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff") format("woff"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.ttf") format("truetype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.svg#iconfont") format("svg"); }
+</style></defs><path d="M797.14798 481.753a269.194 269.194 0 0 0 102.892-211.929C900.03998 120.99 779.02998 0 630.15698 0 481.28298 0 360.27398 120.99 360.27398 269.824c0 85.878 40.33 162.462 102.912 211.929A450.974 450.974 0 0 0 309.84198 582.774c-85.543 85.524-132.608 199.208-132.608 320.236 0 25.01 0 51.712 0.197 76.367a44.898 44.898 0 0 0 44.82 44.623h816.01a44.8 44.8 0 0 0 44.82-44.623V903.01c0-121.009-47.066-234.732-132.609-320.236a451.072 451.072 0 0 0-153.344-101.021z" p-id="7666" fill="#04C361"></path><path d="M1186.18898 580.391A378.644 378.644 0 0 0 1061.81198 473.03a223.783 223.783 0 0 0 64.237-157.657c0-49.742-15.872-96.67-45.746-136.074A225.34 225.34 0 0 0 964.70998 99.9a37.297 37.297 0 0 0-46.14 25.718c-5.592 19.89 5.79 40.724 25.6 46.356 63.114 18.196 107.363 77.135 107.363 143.4a148.913 148.913 0 0 1-81.23 133.06 38.065 38.065 0 0 0-20.363 36.608c1.32 15.203 11.58 28.16 25.975 32.65 125.479 39.601 209.703 155.038 209.703 287.173v63.074c0 20.638 16.62 37.534 37.16 37.711h0.196a37.396 37.396 0 0 0 37.337-37.336V805.06c-0.197-81.644-25.777-159.35-74.142-224.69z m-901.77-62.503a36.982 36.982 0 0 0 25.955-32.65 37.455 37.455 0 0 0-20.362-36.628 148.913 148.913 0 0 1-81.231-133.06c0-66.245 44.071-125.184 107.382-143.4a37.612 37.612 0 0 0 25.58-46.356 37.376 37.376 0 0 0-46.139-25.718 225.32 225.32 0 0 0-115.593 79.4 223.252 223.252 0 0 0-45.746 136.074c0 60.258 23.533 116.381 64.237 157.676A380.475 380.475 0 0 0 74.14498 580.569 373.839 373.839 0 0 0 0.00198 805.258v63.232c0 20.657 16.798 37.356 37.356 37.356h0.197a37.317 37.317 0 0 0 37.14-37.73V805.06c0-132.332 84.401-247.769 209.723-287.173z" p-id="7667" fill="#04C361"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/src/svg/index.ts b/packages/icons/src/svg/index.ts
index 3b5cb9953..98f18e290 100644
--- a/packages/icons/src/svg/index.ts
+++ b/packages/icons/src/svg/index.ts
@@ -12,7 +12,26 @@ const SvgBellIcon = createIconifyIcon('svg:bell');
 const SvgCakeIcon = createIconifyIcon('svg:cake');
 const SvgAntdvLogoIcon = createIconifyIcon('svg:antdv-logo');
 
+/** 支付 */
+const SvgAlipayPcIcon = createIconifyIcon('svg:alipay-pc');
+const SvgAlipayWapIcon = createIconifyIcon('svg:alipay-wap');
+const SvgAlipayAppIcon = createIconifyIcon('svg:alipay-app');
+const SvgAlipayQrIcon = createIconifyIcon('svg:alipay-qr');
+const SvgAlipayBarIcon = createIconifyIcon('svg:alipay-bar');
+const SvgWxPubIcon = createIconifyIcon('svg:wx-pub');
+const SvgWxLiteIcon = createIconifyIcon('svg:wx-lite');
+const SvgWxAppIcon = createIconifyIcon('svg:wx-app');
+const SvgWxNativeIcon = createIconifyIcon('svg:wx-native');
+const SvgWxBarIcon = createIconifyIcon('svg:wx-bar');
+const SvgWalletIcon = createIconifyIcon('svg:wallet');
+const SvgMockIcon = createIconifyIcon('svg:mock');
+
 export {
+  SvgAlipayAppIcon,
+  SvgAlipayBarIcon,
+  SvgAlipayPcIcon,
+  SvgAlipayQrIcon,
+  SvgAlipayWapIcon,
   SvgAntdvLogoIcon,
   SvgAvatar1Icon,
   SvgAvatar2Icon,
@@ -22,4 +41,11 @@ export {
   SvgCakeIcon,
   SvgCardIcon,
   SvgDownloadIcon,
+  SvgMockIcon,
+  SvgWalletIcon,
+  SvgWxAppIcon,
+  SvgWxBarIcon,
+  SvgWxLiteIcon,
+  SvgWxNativeIcon,
+  SvgWxPubIcon,
 };