fix: 商铺部分页面、商品部分页面

README.md

@@ -14,7 +14,7 @@
 
 **English** | [中文](./README.zh-CN.md) | [日本語](./README.ja-JP.md)
 
-## Introduction
+## 
 
 Vue Vben Admin is a free and open source middle and back-end template. Using the latest `vue3`, `vite`, `TypeScript` and other mainstream technology development, the out-of-the-box middle and back-end front-end solutions can also be used for learning reference.
 

apps/web-antd/src/api/request.ts

@@ -91,6 +91,26 @@ function createRequestClient(baseURL: string, options?: RequestClientOptions) {
     }),
   );
 
+  // 通用的错误处理
+  client.addResponseInterceptor(
+    errorMessageResponseInterceptor((msg: string, error) => {
+      const responseData = error?.response?.data ?? {};
+      const errorCode = responseData?.code ?? -1;
+      const errorMessage = responseData?.error ?? responseData?.message ?? msg;
+
+      // 处理登录过期
+      if (errorCode === 401) {
+        message.error('登录状态已过期，请重新登录');
+        const authStore = useAuthStore();
+        authStore.logout();
+        return;
+      }
+
+      // 其他错误处理
+      message.error(errorMessage);
+    }),
+  );
+
   // 通用的错误处理,如果没有进入上面的错误处理逻辑，就会进入这里
   client.addResponseInterceptor(
     errorMessageResponseInterceptor((msg: string, error) => {

apps/web-antd/src/components/form/components/upload-image.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { computed, ref, watch, onMounted, nextTick } from 'vue';
 
 import { useVModel } from '@vueuse/core';
 import { Modal, Upload } from 'ant-design-vue';
@@ -33,34 +33,71 @@ const mValue = useVModel(props, 'modelValue', emits, {
   passive: true,
 });
 
-const fileList = ref(
-  props.modelValue.map((url) => ({
-    uid: url,
-    name: url.split('/').pop() || 'file',
-    status: 'done',
-    url,
-  })),
-);
+// 初始化 fileList
+const fileList = ref([]);
+const isInitializing = ref(true);
 
-// 监听 modelValue 变化，同步到 fileList
-watch(props.modelValue, (newVal) => {
-  fileList.value = newVal.map((url) => ({
+// 同步 modelValue 到 fileList
+const syncModelToFileList = (urls: string[]) => {
+  // console.log('[UploadImage] 同步 modelValue 到 fileList:', urls);
+  fileList.value = urls.map((url) => ({
     uid: url,
     name: url.split('/').pop() || 'file',
     status: 'done',
     url,
   }));
-});
+};
 
-// 监听 fileList 变化，同步到 modelValue
-watch(fileList, (newVal) => {
-  mValue.value = newVal
+// 同步 fileList 到 modelValue
+const syncFileListToModel = () => {
+  const urls = fileList.value
     .filter((file) => file.status === 'done' && file.url)
     .map((file) => file.url);
+
+  // console.log('[UploadImage] 同步 fileList 到 modelValue:', urls);
+  mValue.value = urls;
+};
+
+// 监听 modelValue 变化
+watch(props.modelValue, (newVal) => {
+  // console.log('[UploadImage] 检测到 modelValue 变化:', newVal);
+  if (!isInitializing.value) {
+    syncModelToFileList(newVal);
+  }
 });
 
+// 监听 fileList 变化
+watch(fileList, (newVal) => {
+  // console.log('[UploadImage] 检测到 fileList 变化:', newVal);
+  if (!isInitializing.value) {
+    syncFileListToModel();
+  }
+});
+
+// 组件挂载时初始化
+onMounted(() => {
+  // console.log('[UploadImage] 组件挂载，初始化 fileList:', props.modelValue);
+  syncModelToFileList(props.modelValue);
+
+  nextTick(() => {
+    isInitializing.value = false;
+    // console.log('[UploadImage] 初始化完成');
+  });
+});
+
+// 新增：监听父组件传入的 props 变化
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    // console.log('[UploadImage] 父组件传入新的 modelValue:', newVal);
+    syncModelToFileList(newVal);
+  },
+  { deep: true, immediate: true }
+);
+
 const customRequest = async (e: any) => {
   try {
+    // console.log('[UploadImage] 开始上传文件:', e.file.name);
     const res = await uploadFile({
       file: e.file,
     });
@@ -76,23 +113,19 @@ const customRequest = async (e: any) => {
       },
     ];
 
-    // 更新 modelValue
-    mValue.value = fileList.value.map((file) => file.url);
-
+    // console.log('[UploadImage] 文件上传成功:', res.url);
     // 触发上传完成回调
     e.onSuccess?.(res);
   } catch (error) {
-    console.error('上传失败', error);
+    console.error('[UploadImage] 上传失败:', error);
     e.onError?.(error);
   }
 };
 
 const handleRemove = (file: any) => {
+  // console.log('[UploadImage] 删除文件:', file.name);
   // 从 fileList 中移除
   fileList.value = fileList.value.filter((item) => item.uid !== file.uid);
-
-  // 更新 modelValue
-  mValue.value = fileList.value.map((file) => file.url);
 };
 
 const previewVisible = ref(false);
@@ -100,10 +133,11 @@ const previewImage = ref('');
 const previewTitle = ref('');
 
 const handlePreview = async (file) => {
-  previewImage.value = file.response.url || file.preview;
+  // console.log('[UploadImage] 预览文件:', file.name);
+  previewImage.value = file.response?.url || file.url || file.preview;
   previewVisible.value = true;
   previewTitle.value =
-    file.name || file.url.slice(Math.max(0, file.url.lastIndexOf('/') + 1));
+    file.name || file.url?.slice(Math.max(0, file.url.lastIndexOf('/') + 1)) || '预览图片';
 };
 
 // 计算是否还能上传更多图片
@@ -116,7 +150,7 @@ const showUploadButton = computed(() =>
 
 <template>
   <Upload
-    v-model:value="fileList"
+    :file-list="fileList"
     :custom-request="customRequest"
     :multiple="multiple"
     :limit="maxCount"

apps/web-antd/src/util/json/filedType.json

@@ -33,7 +33,7 @@
   },
   {
     "label": "char",
-    "value": "HAR"
+    "value": "CHAR"
   },
   {
     "label": "varchar",

apps/web-antd/src/util/json/formType.json

@@ -14,5 +14,13 @@
   {
     "label": "VbenSelect【本地下拉框】",
     "value": "VbenSelect"
+  },
+  {
+    "label": "Avatar【单图/头像上传】",
+    "value": "Avatar"
+  },
+  {
+    "label": "UploadImage【多图上传】",
+    "value": "UploadImage"
   }
 ]

apps/web-antd/src/views/my-gen/product-classification/api/index.ts

@@ -0,0 +1,66 @@
+import { requestClient } from '#/api/request';
+
+const prefix = 'product-classification/';
+/**
+ * 分页查询商品分类列表
+ * @param data
+ */
+export async function getProductClassificationListApi(data: any) {
+  return requestClient.get<any>(`${prefix}list`, { params: data });
+}
+
+/**
+ * 获取商品分类详情
+ * @param id
+ */
+export async function getProductClassificationInfoApi(id: number) {
+  return requestClient.get<any>(`${prefix}detail`, { params: { id } });
+}
+
+/**
+ * 获取商品分类详情
+ * @param id
+ */
+export async function getProductClassificationOptionApi(id: number) {
+  return requestClient.get<any>(`${prefix}option`, { params: { id } });
+}
+
+/**
+ * 获取商品分类详情
+ * @param id
+ */
+export async function getProductClassificationTreeOptionApi(id: number) {
+  return requestClient.get<any>(`${prefix}option`, {
+    params: { id, type: 'tree' },
+  });
+}
+
+/**
+ * 新增商品分类
+ * @param data
+ */
+export async function createProductClassificationApi(
+  data: Record<string, any>,
+) {
+  return requestClient.post<any>(`${prefix}create`, data);
+}
+
+/**
+ * 编辑商品分类
+ * @param data
+ */
+export async function updateProductClassificationApi(
+  data: Record<string, any>,
+) {
+  return requestClient.post<any>(`${prefix}update`, data);
+}
+
+/**
+ * 删除商品分类
+ * @param data
+ */
+export async function deleteProductClassificationApi(
+  data: Record<string, any>,
+) {
+  return requestClient.post<any>(`${prefix}delete`, data);
+}

apps/web-antd/src/views/my-gen/product-classification/components/modal.vue

@@ -0,0 +1,71 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+
+import {
+  createProductClassificationApi,
+  updateProductClassificationApi,
+} from '../api';
+import { modalFormProps } from '../config/form';
+
+defineOptions({
+  name: 'ProductClassificationDemo',
+});
+
+const isUpdate = ref(false);
+const gridApi = ref();
+
+const [Form, formApi] = useVbenForm(modalFormProps);
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    formApi.validate().then(async (e: any) => {
+      if (e.valid) {
+        const values = await formApi.getValues();
+        modalApi.setState({ loading: true, confirmLoading: true });
+        const submitApi = isUpdate.value
+          ? updateProductClassificationApi
+          : createProductClassificationApi;
+        submitApi(values)
+          .then(() => {
+            message.success('保存成功');
+            gridApi.value?.reload();
+            modalApi.close();
+          })
+          .finally(() => {
+            modalApi.setState({ loading: false, confirmLoading: false });
+          });
+      }
+    });
+    await formApi.validateAndSubmitForm();
+  },
+  onOpenChange(isOpen: boolean) {
+    gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
+    if (isOpen) {
+      const { values, update } = modalApi.getData<Record<string, any>>();
+      if (values) {
+        isUpdate.value = update;
+        formApi.setValues(values);
+      }
+    }
+  },
+});
+</script>
+<template>
+  <Modal
+    :title="`${isUpdate === true ? '编辑' : '新增'}商品分类`"
+    class="w-[30%]"
+  >
+    <Form />
+  </Modal>
+</template>

apps/web-antd/src/views/my-gen/product-classification/config/form.ts

@@ -0,0 +1,46 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+export const modalFormProps: VbenFormProps = {
+  wrapperClass: 'grid-cols-12', // 24栅格,
+  commonConfig: {
+    formItemClass: 'col-span-12',
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  // handleSubmit: onSubmit,
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'VbenInput',
+      fieldName: 'id',
+      label: 'ID',
+      formItemClass: 'col-span-6',
+      dependencies: {
+        show: false,
+        triggerFields: ['id'],
+      },
+    },
+    // 生成的表单字段
+    {
+      fieldName: 'name',
+      label: '分类名称',
+      component: 'VbenInput',
+      rules: 'required',
+    },
+    {
+      fieldName: 'cover',
+      label: '分类图片',
+      component: 'Avatar',
+      rules: 'required',
+    },
+    {
+      fieldName: 'pid',
+      label: '父级分类',
+      component: 'VbenInput',
+      rules: 'required',
+    },
+  ],
+  showDefaultActions: false,
+};

apps/web-antd/src/views/my-gen/product-classification/config/search.ts

@@ -0,0 +1,30 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+// import dayjs from 'dayjs';
+
+export const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  schema: [
+    // 生成的搜索字段
+    {
+      fieldName: 'name',
+      label: '分类名称',
+      component: 'VbenInput',
+    },
+    {
+      fieldName: 'pid',
+      label: '父级分类',
+      component: 'VbenInput',
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  submitButtonOptions: {
+    content: '查询',
+  },
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};

apps/web-antd/src/views/my-gen/product-classification/config/table.ts

@@ -0,0 +1,70 @@
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { getProductClassificationListApi } from '../api';
+
+interface RowType {
+  id: string;
+  name: string;
+  logo: string;
+  introduce: string;
+  created_at: string;
+}
+
+export const gridOptions: VxeGridProps<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+    labelField: '',
+  },
+  columnConfig: {
+    useKey: true,
+  },
+  rowConfig: {
+    useKey: true,
+  },
+  columns: [
+    { type: 'checkbox', width: 60 },
+    { field: 'id', align: 'left', title: 'ID', width: 100 },
+    // 生成的列表字段
+    { field: 'name', title: '分类名称' },
+    { field: 'cover', title: '分类图片', slots: { default: 'cover' } },
+    { field: 'pid', title: '父级分类' },
+
+    { field: 'created_at', title: '创建时间' },
+    { field: 'updated_at', title: '编辑时间' },
+    { type: 'html', title: '操作', slots: { default: 'action' } },
+  ],
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      // 请求后端接口方法
+      query: async ({ page }, formValues) => {
+        return await getProductClassificationListApi({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  height: 'auto',
+  border: false,
+  toolbarConfig: {
+    // 是否显示搜索表单控制按钮
+    // @ts-ignore 正式环境时有完整的类型声明
+    search: true,
+    refresh: true, // 刷新
+    print: false, // 打印
+    export: false, // 导出
+    // custom: true, // 自定义列
+    zoom: true, // 最大化最小化
+    slots: {
+      buttons: 'toolbar-buttons',
+    },
+    custom: {
+      // 自定义列-图标
+      icon: 'vxe-icon-menu',
+    },
+  },
+  showOverflow: false,
+};

apps/web-antd/src/views/my-gen/product-classification/index.vue

@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import type { VxeGridListeners } from '#/adapter/vxe-table';
+
+import { ref } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { Button, Image, message } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { TableAction } from '#/components/table-action';
+
+import { deleteProductClassificationApi } from './api';
+import FormModalDemo from './components/modal.vue';
+import { formOptions } from './config/search';
+import { gridOptions } from './config/table';
+
+const hasTopTableDropDownActions = ref(false);
+
+const gridEvents: VxeGridListeners<any> = {
+  checkboxChange() {
+    const records = gridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+  checkboxAll() {
+    const records = gridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: FormModalDemo,
+});
+
+const showModal = (data = {}, isUpdate = false) => {
+  formModalApi.setData({
+    // 表单值
+    values: data,
+    update: isUpdate,
+    gridApi,
+  });
+  formModalApi.open();
+};
+
+const hasDelete = (row: any) => {
+  let ids = [];
+  if (row) {
+    ids.push(row);
+  } else {
+    ids = gridApi.grid.getCheckboxRecords().map((item) => item.id);
+  }
+  deleteProductClassificationApi({ ids }).then(() => {
+    message.success('删除成功!');
+    gridApi.reload();
+  });
+};
+</script>
+
+<template>
+  <Page auto-content-height title="商品分类管理">
+    <FormModal />
+    <Grid>
+      <template #toolbar-buttons>
+        <TableAction
+          :actions="[
+            {
+              label: '新增',
+              type: 'primary',
+              icon: 'ant-design:plus-outlined',
+              onClick: showModal.bind(null),
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: '删除',
+              icon: 'ant-design:delete-outlined',
+              ifShow: hasTopTableDropDownActions,
+              popConfirm: {
+                title: '确定删除吗？',
+                confirm: hasDelete.bind(null, false),
+              },
+            },
+          ]"
+        >
+          <template #more>
+            <Button style="margin-left: 16px"> 批量操作 </Button>
+          </template>
+        </TableAction>
+      </template>
+      <template #cover="{ row }">
+        <Image :src="row.cover" height="30" width="30" />
+      </template>
+      <template #toolbar-tools></template>
+      <template #action="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              type: 'link',
+              icon: 'uil:edit',
+              size: 'small',
+              // auth: ['admin', 'sys:role:detail'],
+              onClick: showModal.bind(null, row, true),
+            },
+            {
+              label: '删除',
+              type: 'link',
+              icon: 'ant-design:delete-outlined',
+              size: 'small',
+              // auth: ['admin', 'sys:role:detail'],
+              popConfirm: {
+                title: '确定删除吗？',
+                confirm: hasDelete.bind(null, row.id),
+              },
+            },
+          ]"
+          :drop-down-actions="[]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>

apps/web-antd/src/views/my-gen/product-image/api/index.ts

@@ -0,0 +1,42 @@
+import { requestClient } from '#/api/request';
+
+const prefix = 'product-image/';
+/**
+ * 分页查询商品图片列表
+ * @param data
+ */
+export async function getProductImageListApi(data: any) {
+  return requestClient.get<any>(`${prefix}list`, { params: data });
+}
+
+/**
+ * 获取商品图片详情
+ * @param id
+ */
+export async function getProductImageInfoApi(id: number) {
+  return requestClient.get<any>(`${prefix}detail`, { params: { id } });
+}
+
+/**
+ * 新增商品图片
+ * @param data
+ */
+export async function createProductImageApi(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}create`, data);
+}
+
+/**
+ * 编辑商品图片
+ * @param data
+ */
+export async function updateProductImageApi(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}update`, data);
+}
+
+/**
+ * 删除商品图片
+ * @param data
+ */
+export async function deleteProductImageApi(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}delete`, data);
+}

apps/web-antd/src/views/my-gen/product-image/components/modal.vue

@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+
+import { createProductImageApi, updateProductImageApi } from '../api';
+import { modalFormProps } from '../config/form';
+
+defineOptions({
+  name: 'ProductImageDemo',
+});
+
+const isUpdate = ref(false);
+const gridApi = ref();
+
+const [Form, formApi] = useVbenForm(modalFormProps);
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    formApi.validate().then(async (e: any) => {
+      if (e.valid) {
+        const values = await formApi.getValues();
+        modalApi.setState({ loading: true, confirmLoading: true });
+        const submitApi = isUpdate.value
+          ? updateProductImageApi
+          : createProductImageApi;
+        submitApi(values)
+          .then(() => {
+            message.success('保存成功');
+            gridApi.value?.reload();
+            modalApi.close();
+          })
+          .finally(() => {
+            modalApi.setState({ loading: false, confirmLoading: false });
+          });
+      }
+    });
+    await formApi.validateAndSubmitForm();
+  },
+  onOpenChange(isOpen: boolean) {
+    gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
+    if (isOpen) {
+      const { values, update } = modalApi.getData<Record<string, any>>();
+      if (values) {
+        isUpdate.value = update;
+        formApi.setValues(values);
+      }
+    }
+  },
+});
+</script>
+<template>
+  <Modal
+    :title="`${isUpdate === true ? '编辑' : '新增'}商品图片`"
+    class="w-[30%]"
+  >
+    <Form />
+  </Modal>
+</template>

apps/web-antd/src/views/my-gen/product-image/config/form.ts

@@ -0,0 +1,40 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+export const modalFormProps: VbenFormProps = {
+  wrapperClass: 'grid-cols-12', // 24栅格,
+  commonConfig: {
+    formItemClass: 'col-span-12',
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  // handleSubmit: onSubmit,
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'VbenInput',
+      fieldName: 'id',
+      label: 'ID',
+      formItemClass: 'col-span-6',
+      dependencies: {
+        show: false,
+        triggerFields: ['id'],
+      },
+    },
+    // 生成的表单字段
+    {
+      fieldName: 'url',
+      label: '商品地址',
+      component: 'Avatar',
+      rules: 'required',
+    },
+    {
+      fieldName: 'product_id',
+      label: '商品ID',
+      component: 'VbenInput',
+      rules: 'required',
+    },
+  ],
+  showDefaultActions: false,
+};

apps/web-antd/src/views/my-gen/product-image/config/search.ts

@@ -0,0 +1,30 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+// import dayjs from 'dayjs';
+
+export const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  schema: [
+    // 生成的搜索字段
+    {
+      fieldName: 'url',
+      label: '商品地址',
+      component: 'VbenInput',
+    },
+    {
+      fieldName: 'product_id',
+      label: '商品ID',
+      component: 'VbenInput',
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  submitButtonOptions: {
+    content: '查询',
+  },
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};

apps/web-antd/src/views/my-gen/product-image/config/table.ts

@@ -0,0 +1,69 @@
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { getProductImageListApi } from '../api';
+
+interface RowType {
+  id: string;
+  name: string;
+  logo: string;
+  introduce: string;
+  created_at: string;
+}
+
+export const gridOptions: VxeGridProps<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+    labelField: '',
+  },
+  columnConfig: {
+    useKey: true,
+  },
+  rowConfig: {
+    useKey: true,
+  },
+  columns: [
+    { type: 'checkbox', width: 60 },
+    { field: 'id', align: 'left', title: 'ID', width: 100 },
+    // 生成的列表字段
+    { field: 'url', title: '商品地址' },
+    { field: 'product_id', title: '商品ID' },
+
+    { field: 'created_at', title: '创建时间' },
+    { field: 'updated_at', title: '编辑时间' },
+    { type: 'html', title: '操作', slots: { default: 'action' } },
+  ],
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      // 请求后端接口方法
+      query: async ({ page }, formValues) => {
+        return await getProductImageListApi({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  height: 'auto',
+  border: false,
+  toolbarConfig: {
+    // 是否显示搜索表单控制按钮
+    // @ts-ignore 正式环境时有完整的类型声明
+    search: true,
+    refresh: true, // 刷新
+    print: false, // 打印
+    export: false, // 导出
+    // custom: true, // 自定义列
+    zoom: true, // 最大化最小化
+    slots: {
+      buttons: 'toolbar-buttons',
+    },
+    custom: {
+      // 自定义列-图标
+      icon: 'vxe-icon-menu',
+    },
+  },
+  showOverflow: false,
+};

apps/web-antd/src/views/my-gen/product-image/index.vue

@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import type { VxeGridListeners } from '#/adapter/vxe-table';
+
+import { ref } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { Button, Image, message } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { TableAction } from '#/components/table-action';
+
+import { deleteProductImageApi } from './api';
+import FormModalDemo from './components/modal.vue';
+import { formOptions } from './config/search';
+import { gridOptions } from './config/table';
+
+const hasTopTableDropDownActions = ref(false);
+
+const gridEvents: VxeGridListeners<any> = {
+  checkboxChange() {
+    const records = gridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+  checkboxAll() {
+    const records = gridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: FormModalDemo,
+});
+
+const showModal = (data = {}, isUpdate = false) => {
+  formModalApi.setData({
+    // 表单值
+    values: data,
+    update: isUpdate,
+    gridApi,
+  });
+  formModalApi.open();
+};
+
+const hasDelete = (row: any) => {
+  let ids = [];
+  if (row) {
+    ids.push(row);
+  } else {
+    ids = gridApi.grid.getCheckboxRecords().map((item) => item.id);
+  }
+  deleteProductImageApi({ ids }).then(() => {
+    message.success('删除成功!');
+    gridApi.reload();
+  });
+};
+</script>
+
+<template>
+  <Page auto-content-height title="商品图片管理">
+    <FormModal />
+    <Grid>
+      <template #toolbar-buttons>
+        <TableAction
+          :actions="[
+            {
+              label: '新增',
+              type: 'primary',
+              icon: 'ant-design:plus-outlined',
+              onClick: showModal.bind(null),
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: '删除',
+              icon: 'ant-design:delete-outlined',
+              ifShow: hasTopTableDropDownActions,
+              popConfirm: {
+                title: '确定删除吗？',
+                confirm: hasDelete.bind(null, false),
+              },
+            },
+          ]"
+        >
+          <template #more>
+            <Button style="margin-left: 16px"> 批量操作 </Button>
+          </template>
+        </TableAction>
+      </template>
+      <template #avatar="{ row }">
+        <Image :src="row.avatar" height="30" width="30" />
+      </template>
+      <template #toolbar-tools></template>
+      <template #action="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              type: 'link',
+              icon: 'uil:edit',
+              size: 'small',
+              // auth: ['admin', 'sys:role:detail'],
+              onClick: showModal.bind(null, row, true),
+            },
+            {
+              label: '删除',
+              type: 'link',
+              icon: 'ant-design:delete-outlined',
+              size: 'small',
+              // auth: ['admin', 'sys:role:detail'],
+              popConfirm: {
+                title: '确定删除吗？',
+                confirm: hasDelete.bind(null, row.id),
+              },
+            },
+          ]"
+          :drop-down-actions="[]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>

apps/web-antd/src/views/my-gen/product-label/api/index.ts

@@ -0,0 +1,42 @@
+import { requestClient } from '#/api/request';
+
+const prefix = 'product-label/';
+/**
+ * 分页查询商品标签列表
+ * @param data
+ */
+export async function getProductLabelListApi(data: any) {
+  return requestClient.get<any>(`${prefix}list`, { params: data });
+}
+
+/**
+ * 获取商品标签详情
+ * @param id
+ */
+export async function getProductLabelInfoApi(id: number) {
+  return requestClient.get<any>(`${prefix}detail`, { params: { id } });
+}
+
+/**
+ * 新增商品标签
+ * @param data
+ */
+export async function createProductLabelApi(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}create`, data);
+}
+
+/**
+ * 编辑商品标签
+ * @param data
+ */
+export async function updateProductLabelApi(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}update`, data);
+}
+
+/**
+ * 删除商品标签
+ * @param data
+ */
+export async function deleteProductLabelApi(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}delete`, data);
+}

apps/web-antd/src/views/my-gen/product-label/components/modal.vue

@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+
+import { createProductLabelApi, updateProductLabelApi } from '../api';
+import { modalFormProps } from '../config/form';
+
+defineOptions({
+  name: 'ProductLabelDemo',
+});
+
+const isUpdate = ref(false);
+const gridApi = ref();
+
+const [Form, formApi] = useVbenForm(modalFormProps);
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    formApi.validate().then(async (e: any) => {
+      if (e.valid) {
+        const values = await formApi.getValues();
+        modalApi.setState({ loading: true, confirmLoading: true });
+        const submitApi = isUpdate.value
+          ? updateProductLabelApi
+          : createProductLabelApi;
+        submitApi(values)
+          .then(() => {
+            message.success('保存成功');
+            gridApi.value?.reload();
+            modalApi.close();
+          })
+          .finally(() => {
+            modalApi.setState({ loading: false, confirmLoading: false });
+          });
+      }
+    });
+    await formApi.validateAndSubmitForm();
+  },
+  onOpenChange(isOpen: boolean) {
+    gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
+    if (isOpen) {
+      const { values, update } = modalApi.getData<Record<string, any>>();
+      if (values) {
+        isUpdate.value = update;
+        formApi.setValues(values);
+      }
+    }
+  },
+});
+</script>
+<template>
+  <Modal
+    :title="`${isUpdate === true ? '编辑' : '新增'}商品标签`"
+    class="w-[30%]"
+  >
+    <Form />
+  </Modal>
+</template>

apps/web-antd/src/views/my-gen/product-label/config/form.ts

@@ -0,0 +1,34 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+export const modalFormProps: VbenFormProps = {
+  wrapperClass: 'grid-cols-12', // 24栅格,
+  commonConfig: {
+    formItemClass: 'col-span-12',
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  // handleSubmit: onSubmit,
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'VbenInput',
+      fieldName: 'id',
+      label: 'ID',
+      formItemClass: 'col-span-6',
+      dependencies: {
+        show: false,
+        triggerFields: ['id'],
+      },
+    },
+    // 生成的表单字段
+    {
+      fieldName: 'name',
+      label: '标签名称',
+      component: 'VbenInput',
+      rules: 'required',
+    },
+  ],
+  showDefaultActions: false,
+};

apps/web-antd/src/views/my-gen/product-label/config/search.ts

@@ -0,0 +1,25 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+// import dayjs from 'dayjs';
+
+export const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  schema: [
+    // 生成的搜索字段
+    {
+      fieldName: 'name',
+      label: '标签名称',
+      component: 'VbenInput',
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  submitButtonOptions: {
+    content: '查询',
+  },
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};

apps/web-antd/src/views/my-gen/product-label/config/table.ts

@@ -0,0 +1,68 @@
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { getProductLabelListApi } from '../api';
+
+interface RowType {
+  id: string;
+  name: string;
+  logo: string;
+  introduce: string;
+  created_at: string;
+}
+
+export const gridOptions: VxeGridProps<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+    labelField: '',
+  },
+  columnConfig: {
+    useKey: true,
+  },
+  rowConfig: {
+    useKey: true,
+  },
+  columns: [
+    { type: 'checkbox', width: 60 },
+    { field: 'id', align: 'left', title: 'ID', width: 100 },
+    // 生成的列表字段
+    { field: 'name', title: '标签名称' },
+
+    { field: 'created_at', title: '创建时间' },
+    { field: 'updated_at', title: '编辑时间' },
+    { type: 'html', title: '操作', slots: { default: 'action' } },
+  ],
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      // 请求后端接口方法
+      query: async ({ page }, formValues) => {
+        return await getProductLabelListApi({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  height: 'auto',
+  border: false,
+  toolbarConfig: {
+    // 是否显示搜索表单控制按钮
+    // @ts-ignore 正式环境时有完整的类型声明
+    search: true,
+    refresh: true, // 刷新
+    print: false, // 打印
+    export: false, // 导出
+    // custom: true, // 自定义列
+    zoom: true, // 最大化最小化
+    slots: {
+      buttons: 'toolbar-buttons',
+    },
+    custom: {
+      // 自定义列-图标
+      icon: 'vxe-icon-menu',
+    },
+  },
+  showOverflow: false,
+};

apps/web-antd/src/views/my-gen/product-label/index.vue

@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import type { VxeGridListeners } from '#/adapter/vxe-table';
+
+import { ref } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { Button, Image, message } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { TableAction } from '#/components/table-action';
+
+import { deleteProductLabelApi } from './api';
+import FormModalDemo from './components/modal.vue';
+import { formOptions } from './config/search';
+import { gridOptions } from './config/table';
+
+const hasTopTableDropDownActions = ref(false);
+
+const gridEvents: VxeGridListeners<any> = {
+  checkboxChange() {
+    const records = gridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+  checkboxAll() {
+    const records = gridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: FormModalDemo,
+});
+
+const showModal = (data = {}, isUpdate = false) => {
+  formModalApi.setData({
+    // 表单值
+    values: data,
+    update: isUpdate,
+    gridApi,
+  });
+  formModalApi.open();
+};
+
+const hasDelete = (row: any) => {
+  let ids = [];
+  if (row) {
+    ids.push(row);
+  } else {
+    ids = gridApi.grid.getCheckboxRecords().map((item) => item.id);
+  }
+  deleteProductLabelApi({ ids }).then(() => {
+    message.success('删除成功!');
+    gridApi.reload();
+  });
+};
+</script>
+
+<template>
+  <Page auto-content-height title="商品标签管理">
+    <FormModal />
+    <Grid>
+      <template #toolbar-buttons>
+        <TableAction
+          :actions="[
+            {
+              label: '新增',
+              type: 'primary',
+              icon: 'ant-design:plus-outlined',
+              onClick: showModal.bind(null),
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: '删除',
+              icon: 'ant-design:delete-outlined',
+              ifShow: hasTopTableDropDownActions,
+              popConfirm: {
+                title: '确定删除吗？',
+                confirm: hasDelete.bind(null, false),
+              },
+            },
+          ]"
+        >
+          <template #more>
+            <Button style="margin-left: 16px"> 批量操作 </Button>
+          </template>
+        </TableAction>
+      </template>
+      <template #avatar="{ row }">
+        <Image :src="row.avatar" height="30" width="30" />
+      </template>
+      <template #toolbar-tools></template>
+      <template #action="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              type: 'link',
+              icon: 'uil:edit',
+              size: 'small',
+              // auth: ['admin', 'sys:role:detail'],
+              onClick: showModal.bind(null, row, true),
+            },
+            {
+              label: '删除',
+              type: 'link',
+              icon: 'ant-design:delete-outlined',
+              size: 'small',
+              // auth: ['admin', 'sys:role:detail'],
+              popConfirm: {
+                title: '确定删除吗？',
+                confirm: hasDelete.bind(null, row.id),
+              },
+            },
+          ]"
+          :drop-down-actions="[]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>

apps/web-antd/src/views/my-gen/product/api/index.ts

@@ -0,0 +1,42 @@
+import { requestClient } from '#/api/request';
+
+const prefix = 'product/';
+/**
+ * 分页查询产品列表
+ * @param data
+ */
+export async function getProductListApi(data: any) {
+  return requestClient.get<any>(`${prefix}list`, { params: data });
+}
+
+/**
+ * 获取产品详情
+ * @param id
+ */
+export async function getProductInfoApi(id: number) {
+  return requestClient.get<any>(`${prefix}detail`, { params: { id } });
+}
+
+/**
+ * 新增产品
+ * @param data
+ */
+export async function createProductApi(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}create`, data);
+}
+
+/**
+ * 编辑产品
+ * @param data
+ */
+export async function updateProductApi(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}update`, data);
+}
+
+/**
+ * 删除产品
+ * @param data
+ */
+export async function deleteProductApi(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}delete`, data);
+}

apps/web-antd/src/views/my-gen/product/components/modal.vue

@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+
+import { createProductApi, updateProductApi } from '../api';
+import { modalFormProps } from '../config/form';
+
+defineOptions({
+  name: 'ProductDemo',
+});
+
+const isUpdate = ref(false);
+const gridApi = ref();
+
+const [Form, formApi] = useVbenForm(modalFormProps);
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    formApi.validate().then(async (e: any) => {
+      if (e.valid) {
+        const values = await formApi.getValues();
+        modalApi.setState({ loading: true, confirmLoading: true });
+        const submitApi = isUpdate.value ? updateProductApi : createProductApi;
+        submitApi(values)
+          .then(() => {
+            message.success('保存成功');
+            gridApi.value?.reload();
+            modalApi.close();
+          })
+          .finally(() => {
+            modalApi.setState({ loading: false, confirmLoading: false });
+          });
+      }
+    });
+    await formApi.validateAndSubmitForm();
+  },
+  onOpenChange(isOpen: boolean) {
+    gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
+    if (isOpen) {
+      const { values, update } = modalApi.getData<Record<string, any>>();
+      if (values) {
+        isUpdate.value = update;
+        formApi.setValues(values);
+      }
+    }
+  },
+});
+</script>
+<template>
+  <Modal :title="`${isUpdate === true ? '编辑' : '新增'}产品`" class="w-[30%]">
+    <Form />
+  </Modal>
+</template>

apps/web-antd/src/views/my-gen/product/config/form.ts

@@ -0,0 +1,89 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+import { getProductClassificationTreeOptionApi } from '#/views/my-gen/product-classification/api';
+
+export const modalFormProps: VbenFormProps = {
+  wrapperClass: 'grid-cols-12', // 24栅格,
+  commonConfig: {
+    formItemClass: 'col-span-12',
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  // handleSubmit: onSubmit,
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'VbenInput',
+      fieldName: 'id',
+      label: 'ID',
+      formItemClass: 'col-span-6',
+      dependencies: {
+        show: false,
+        triggerFields: ['id'],
+      },
+    },
+    // 生成的表单字段
+    {
+      fieldName: 'title',
+      label: '商品名称',
+      component: 'VbenInput',
+      rules: 'required',
+    },
+    {
+      fieldName: 'cover',
+      label: '封面图',
+      component: 'Avatar',
+      formItemClass: 'col-span-6',
+      rules: 'required',
+    },
+    {
+      fieldName: 'price',
+      label: '价格',
+      component: 'VbenInput',
+      formItemClass: 'col-span-6',
+      rules: 'required',
+    },
+    {
+      fieldName: 'classification_id',
+      label: '产品分类',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        api: getProductClassificationTreeOptionApi,
+        filterOption: (input: string, option: any) => {
+          // 自定义过滤逻辑，确保可以根据 name 进行搜索
+          return option?.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+        },
+        showSearch: true,
+        // 菜单接口转options格式
+        afterFetch: (data: { id: number; name: string }[]) => {
+          return data.map((item: any) => ({
+            label: item.name,
+            value: item.id,
+          }));
+        },
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'images',
+      label: '产品图片',
+      component: 'UploadImage',
+      rules: 'required',
+    },
+    {
+      fieldName: 'introduction',
+      label: '简介',
+      component: 'Textarea',
+      rules: 'required',
+    },
+    {
+      fieldName: 'description',
+      label: '详细说明',
+      component: 'VbenInput',
+      rules: 'required',
+    },
+  ],
+  showDefaultActions: false,
+};

apps/web-antd/src/views/my-gen/product/config/search.ts

@@ -0,0 +1,35 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+// import dayjs from 'dayjs';
+
+export const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  schema: [
+    // 生成的搜索字段
+    {
+      fieldName: 'title',
+      label: '商品名称',
+      component: 'VbenInput',
+    },
+    {
+      fieldName: 'mall_id',
+      label: '商家ID',
+      component: 'VbenInput',
+    },
+    {
+      fieldName: 'classification_id',
+      label: '产品分类',
+      component: 'VbenInput',
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  submitButtonOptions: {
+    content: '查询',
+  },
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};

apps/web-antd/src/views/my-gen/product/config/table.ts

@@ -0,0 +1,76 @@
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { getProductListApi } from '../api';
+
+interface RowType {
+  id: string;
+  name: string;
+  logo: string;
+  introduce: string;
+  created_at: string;
+}
+
+export const gridOptions: VxeGridProps<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+    labelField: '',
+  },
+  columnConfig: {
+    useKey: true,
+  },
+  rowConfig: {
+    useKey: true,
+  },
+  columns: [
+    { type: 'checkbox', width: 60 },
+    { field: 'id', align: 'left', title: 'ID', width: 100 },
+    // 生成的列表字段
+    { field: 'title', title: '商品名称' },
+    { field: 'mall_id', title: '商家ID' },
+    { field: 'user_id', title: '上传用户ID' },
+    { field: 'introduction', title: '简介' },
+    { field: 'cover', title: '封面图', slots: { default: 'cover' } },
+    { field: 'images', title: '商品图册', slots: { default: 'images' } },
+    { field: 'description', title: '详细说明' },
+    { field: 'price', title: '价格' },
+    { field: 'classification_id', title: '产品分类' },
+
+    { field: 'created_at', title: '创建时间' },
+    { field: 'updated_at', title: '编辑时间' },
+    { type: 'html', title: '操作', slots: { default: 'action' } },
+  ],
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      // 请求后端接口方法
+      query: async ({ page }, formValues) => {
+        return await getProductListApi({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  height: 'auto',
+  border: false,
+  toolbarConfig: {
+    // 是否显示搜索表单控制按钮
+    // @ts-ignore 正式环境时有完整的类型声明
+    search: true,
+    refresh: true, // 刷新
+    print: false, // 打印
+    export: false, // 导出
+    // custom: true, // 自定义列
+    zoom: true, // 最大化最小化
+    slots: {
+      buttons: 'toolbar-buttons',
+    },
+    custom: {
+      // 自定义列-图标
+      icon: 'vxe-icon-menu',
+    },
+  },
+  showOverflow: false,
+};

apps/web-antd/src/views/my-gen/product/index.vue

@@ -0,0 +1,149 @@
+<script lang="ts" setup>
+import type { VxeGridListeners } from '#/adapter/vxe-table';
+
+import { ref } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { Button, Image, ImagePreviewGroup, message } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { TableAction } from '#/components/table-action';
+
+import { deleteProductApi } from './api';
+import FormModalDemo from './components/modal.vue';
+import { formOptions } from './config/search';
+import { gridOptions } from './config/table';
+
+const hasTopTableDropDownActions = ref(false);
+
+const gridEvents: VxeGridListeners<any> = {
+  checkboxChange() {
+    const records = gridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+  checkboxAll() {
+    const records = gridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: FormModalDemo,
+});
+
+const showModal = (data = {}, isUpdate = false) => {
+  formModalApi.setData({
+    // 表单值
+    values: data,
+    update: isUpdate,
+    gridApi,
+  });
+  formModalApi.open();
+};
+
+const hasDelete = (row: any) => {
+  let ids = [];
+  if (row) {
+    ids.push(row);
+  } else {
+    ids = gridApi.grid.getCheckboxRecords().map((item) => item.id);
+  }
+  deleteProductApi({ ids }).then(() => {
+    message.success('删除成功!');
+    gridApi.reload();
+  });
+};
+</script>
+
+<template>
+  <Page auto-content-height title="产品管理">
+    <FormModal />
+    <Grid>
+      <template #toolbar-buttons>
+        <TableAction
+          :actions="[
+            {
+              label: '新增',
+              type: 'primary',
+              icon: 'ant-design:plus-outlined',
+              onClick: showModal.bind(null),
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: '删除',
+              icon: 'ant-design:delete-outlined',
+              ifShow: hasTopTableDropDownActions,
+              popConfirm: {
+                title: '确定删除吗？',
+                confirm: hasDelete.bind(null, false),
+              },
+            },
+          ]"
+        >
+          <template #more>
+            <Button style="margin-left: 16px"> 批量操作 </Button>
+          </template>
+        </TableAction>
+      </template>
+      <template #cover="{ row }">
+        <Image :src="row.cover" height="30" width="30" />
+      </template>
+      <template #images="{ row }">
+        <div class="relative inline-block">
+          <ImagePreviewGroup>
+            <!-- 只渲染第一张图片，但保留所有图片在循环中（隐藏其他图片） -->
+            <Image
+              v-for="(item, index) in row.images"
+              :key="index"
+              :src="item"
+              height="30"
+              width="30"
+              :style="{ display: index === 0 ? 'inline-block' : 'none' }"
+            />
+          </ImagePreviewGroup>
+          <span
+            v-if="row.images && row.images.length > 1"
+            class="bg-primary absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full text-xs text-white"
+          >
+            {{ row.images.length }}
+          </span>
+        </div>
+      </template>
+      <template #toolbar-tools></template>
+      <template #action="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              type: 'link',
+              icon: 'uil:edit',
+              size: 'small',
+              // auth: ['admin', 'sys:role:detail'],
+              onClick: showModal.bind(null, row, true),
+            },
+            {
+              label: '删除',
+              type: 'link',
+              icon: 'ant-design:delete-outlined',
+              size: 'small',
+              // auth: ['admin', 'sys:role:detail'],
+              popConfirm: {
+                title: '确定删除吗？',
+                confirm: hasDelete.bind(null, row.id),
+              },
+            },
+          ]"
+          :drop-down-actions="[]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>

apps/web-antd/src/views/my-gen/store-classification/api/index.ts

@@ -0,0 +1,49 @@
+import { requestClient } from '#/api/request';
+
+const prefix = 'store-classification/';
+/**
+ * 分页查询店铺行业列表
+ * @param data
+ */
+export async function getStoreClassificationListApi(data: any) {
+  return requestClient.get<any>(`${prefix}list`, { params: data });
+}
+
+/**
+ * 获取店铺行业详情
+ */
+export async function getStoreClassificationOptionApi() {
+  return requestClient.get<any>(`${prefix}option`);
+}
+
+/**
+ * 获取店铺行业详情
+ * @param id
+ */
+export async function getStoreClassificationInfoApi(id: number) {
+  return requestClient.get<any>(`${prefix}detail`, { params: { id } });
+}
+
+/**
+ * 新增店铺行业
+ * @param data
+ */
+export async function createStoreClassificationApi(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}create`, data);
+}
+
+/**
+ * 编辑店铺行业
+ * @param data
+ */
+export async function updateStoreClassificationApi(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}update`, data);
+}
+
+/**
+ * 删除店铺行业
+ * @param data
+ */
+export async function deleteStoreClassificationApi(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}delete`, data);
+}

apps/web-antd/src/views/my-gen/store-classification/components/modal.vue

@@ -0,0 +1,71 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+
+import {
+  createStoreClassificationApi,
+  updateStoreClassificationApi,
+} from '../api';
+import { modalFormProps } from '../config/form';
+
+defineOptions({
+  name: 'StoreClassificationDemo',
+});
+
+const isUpdate = ref(false);
+const gridApi = ref();
+
+const [Form, formApi] = useVbenForm(modalFormProps);
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    formApi.validate().then(async (e: any) => {
+      if (e.valid) {
+        const values = await formApi.getValues();
+        modalApi.setState({ loading: true, confirmLoading: true });
+        const submitApi = isUpdate.value
+          ? updateStoreClassificationApi
+          : createStoreClassificationApi;
+        submitApi(values)
+          .then(() => {
+            message.success('保存成功');
+            gridApi.value?.reload();
+            modalApi.close();
+          })
+          .finally(() => {
+            modalApi.setState({ loading: false, confirmLoading: false });
+          });
+      }
+    });
+    await formApi.validateAndSubmitForm();
+  },
+  onOpenChange(isOpen: boolean) {
+    gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
+    if (isOpen) {
+      const { values, update } = modalApi.getData<Record<string, any>>();
+      if (values) {
+        isUpdate.value = update;
+        formApi.setValues(values);
+      }
+    }
+  },
+});
+</script>
+<template>
+  <Modal
+    :title="`${isUpdate === true ? '编辑' : '新增'}店铺行业`"
+    class="w-[30%]"
+  >
+    <Form />
+  </Modal>
+</template>

apps/web-antd/src/views/my-gen/store-classification/config/form.ts

@@ -0,0 +1,40 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+export const modalFormProps: VbenFormProps = {
+  wrapperClass: 'grid-cols-12', // 24栅格,
+  commonConfig: {
+    formItemClass: 'col-span-12',
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  // handleSubmit: onSubmit,
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'VbenInput',
+      fieldName: 'id',
+      label: 'ID',
+      formItemClass: 'col-span-6',
+      dependencies: {
+        show: false,
+        triggerFields: ['id'],
+      },
+    },
+    // 生成的表单字段
+    {
+      fieldName: 'name',
+      label: '行业名称',
+      component: 'VbenInput',
+      rules: 'required',
+    },
+    {
+      fieldName: 'pid',
+      label: '父级ID',
+      component: 'VbenInput',
+      rules: 'required',
+    },
+  ],
+  showDefaultActions: false,
+};

apps/web-antd/src/views/my-gen/store-classification/config/search.ts

@@ -0,0 +1,30 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+// import dayjs from 'dayjs';
+
+export const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  schema: [
+    // 生成的搜索字段
+    {
+      fieldName: 'name',
+      label: '行业名称',
+      component: 'VbenInput',
+    },
+    {
+      fieldName: 'pid',
+      label: '父级ID',
+      component: 'VbenInput',
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  submitButtonOptions: {
+    content: '查询',
+  },
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};

apps/web-antd/src/views/my-gen/store-classification/config/table.ts

@@ -0,0 +1,69 @@
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { getStoreClassificationListApi } from '../api';
+
+interface RowType {
+  id: string;
+  name: string;
+  logo: string;
+  introduce: string;
+  created_at: string;
+}
+
+export const gridOptions: VxeGridProps<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+    labelField: '',
+  },
+  columnConfig: {
+    useKey: true,
+  },
+  rowConfig: {
+    useKey: true,
+  },
+  columns: [
+    { type: 'checkbox', width: 60 },
+    { field: 'id', align: 'left', title: 'ID', width: 100 },
+    // 生成的列表字段
+    { field: 'name', title: '行业名称' },
+    { field: 'pid', title: '父级ID' },
+
+    { field: 'created_at', title: '创建时间' },
+    { field: 'updated_at', title: '编辑时间' },
+    { type: 'html', title: '操作', slots: { default: 'action' } },
+  ],
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      // 请求后端接口方法
+      query: async ({ page }, formValues) => {
+        return await getStoreClassificationListApi({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  height: 'auto',
+  border: false,
+  toolbarConfig: {
+    // 是否显示搜索表单控制按钮
+    // @ts-ignore 正式环境时有完整的类型声明
+    search: true,
+    refresh: true, // 刷新
+    print: false, // 打印
+    export: false, // 导出
+    // custom: true, // 自定义列
+    zoom: true, // 最大化最小化
+    slots: {
+      buttons: 'toolbar-buttons',
+    },
+    custom: {
+      // 自定义列-图标
+      icon: 'vxe-icon-menu',
+    },
+  },
+  showOverflow: false,
+};

apps/web-antd/src/views/my-gen/store-classification/index.vue

@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import type { VxeGridListeners } from '#/adapter/vxe-table';
+
+import { ref } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { Button, Image, message } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { TableAction } from '#/components/table-action';
+
+import { deleteStoreClassificationApi } from './api';
+import FormModalDemo from './components/modal.vue';
+import { formOptions } from './config/search';
+import { gridOptions } from './config/table';
+
+const hasTopTableDropDownActions = ref(false);
+
+const gridEvents: VxeGridListeners<any> = {
+  checkboxChange() {
+    const records = gridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+  checkboxAll() {
+    const records = gridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: FormModalDemo,
+});
+
+const showModal = (data = {}, isUpdate = false) => {
+  formModalApi.setData({
+    // 表单值
+    values: data,
+    update: isUpdate,
+    gridApi,
+  });
+  formModalApi.open();
+};
+
+const hasDelete = (row: any) => {
+  let ids = [];
+  if (row) {
+    ids.push(row);
+  } else {
+    ids = gridApi.grid.getCheckboxRecords().map((item) => item.id);
+  }
+  deleteStoreClassificationApi({ ids }).then(() => {
+    message.success('删除成功!');
+    gridApi.reload();
+  });
+};
+</script>
+
+<template>
+  <Page auto-content-height title="店铺行业管理">
+    <FormModal />
+    <Grid>
+      <template #toolbar-buttons>
+        <TableAction
+          :actions="[
+            {
+              label: '新增',
+              type: 'primary',
+              icon: 'ant-design:plus-outlined',
+              onClick: showModal.bind(null),
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: '删除',
+              icon: 'ant-design:delete-outlined',
+              ifShow: hasTopTableDropDownActions,
+              popConfirm: {
+                title: '确定删除吗？',
+                confirm: hasDelete.bind(null, false),
+              },
+            },
+          ]"
+        >
+          <template #more>
+            <Button style="margin-left: 16px"> 批量操作 </Button>
+          </template>
+        </TableAction>
+      </template>
+      <template #avatar="{ row }">
+        <Image :src="row.avatar" height="30" width="30" />
+      </template>
+      <template #toolbar-tools></template>
+      <template #action="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              type: 'link',
+              icon: 'uil:edit',
+              size: 'small',
+              // auth: ['admin', 'sys:role:detail'],
+              onClick: showModal.bind(null, row, true),
+            },
+            {
+              label: '删除',
+              type: 'link',
+              icon: 'ant-design:delete-outlined',
+              size: 'small',
+              // auth: ['admin', 'sys:role:detail'],
+              popConfirm: {
+                title: '确定删除吗？',
+                confirm: hasDelete.bind(null, row.id),
+              },
+            },
+          ]"
+          :drop-down-actions="[]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>

apps/web-antd/src/views/my-gen/store/api/index.ts

@@ -0,0 +1,42 @@
+import { requestClient } from '#/api/request';
+
+const prefix = 'store/';
+/**
+ * 分页查询店铺管理列表
+ * @param data
+ */
+export async function getStoreListApi(data: any) {
+  return requestClient.get<any>(`${prefix}list`, { params: data });
+}
+
+/**
+ * 获取店铺管理详情
+ * @param id
+ */
+export async function getStoreInfoApi(id: number) {
+  return requestClient.get<any>(`${prefix}detail`, { params: { id } });
+}
+
+/**
+ * 新增店铺管理
+ * @param data
+ */
+export async function createStoreApi(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}create`, data);
+}
+
+/**
+ * 编辑店铺管理
+ * @param data
+ */
+export async function updateStoreApi(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}update`, data);
+}
+
+/**
+ * 删除店铺管理
+ * @param data
+ */
+export async function deleteStoreApi(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}delete`, data);
+}

apps/web-antd/src/views/my-gen/store/components/modal.vue

@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+
+import { createStoreApi, updateStoreApi } from '../api';
+import { modalFormProps } from '../config/form';
+
+defineOptions({
+  name: 'StoreDemo',
+});
+
+const isUpdate = ref(false);
+const gridApi = ref();
+
+const [Form, formApi] = useVbenForm(modalFormProps);
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    formApi.validate().then(async (e: any) => {
+      if (e.valid) {
+        const values = await formApi.getValues();
+        modalApi.setState({ loading: true, confirmLoading: true });
+        const submitApi = isUpdate.value ? updateStoreApi : createStoreApi;
+        submitApi(values)
+          .then(() => {
+            message.success('保存成功');
+            gridApi.value?.reload();
+            modalApi.close();
+          })
+          .finally(() => {
+            modalApi.setState({ loading: false, confirmLoading: false });
+          });
+      }
+    });
+    await formApi.validateAndSubmitForm();
+  },
+  onOpenChange(isOpen: boolean) {
+    gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
+    if (isOpen) {
+      const { values, update } = modalApi.getData<Record<string, any>>();
+      if (values) {
+        isUpdate.value = update;
+        formApi.setValues(values);
+      }
+    }
+  },
+});
+</script>
+<template>
+  <Modal
+    :title="`${isUpdate === true ? '编辑' : '新增'}店铺管理`"
+    class="w-[30%]"
+  >
+    <Form />
+  </Modal>
+</template>

apps/web-antd/src/views/my-gen/store/config/form.ts

@@ -0,0 +1,179 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+import { getStoreClassificationOptionApi } from '#/views/my-gen/store-classification/api';
+
+export const modalFormProps: VbenFormProps = {
+  wrapperClass: 'grid-cols-12', // 24栅格,
+  commonConfig: {
+    formItemClass: 'col-span-12',
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  // handleSubmit: onSubmit,
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'VbenInput',
+      fieldName: 'id',
+      label: 'ID',
+      formItemClass: 'col-span-6',
+      dependencies: {
+        show: false,
+        triggerFields: ['id'],
+      },
+    },
+    // 生成的表单字段
+    {
+      fieldName: 'name',
+      label: '店铺名称',
+      component: 'VbenInput',
+      formItemClass: 'col-span-6',
+      rules: 'required',
+    },
+    {
+      fieldName: 'level',
+      label: '店铺等级',
+      component: 'InputNumber',
+      formItemClass: 'col-span-6',
+      rules: 'required',
+    },
+    {
+      fieldName: 'introduction',
+      label: '店铺简介',
+      component: 'Textarea',
+      rules: 'required',
+    },
+    {
+      fieldName: 'description',
+      label: '详细介绍',
+      component: 'Textarea',
+      rules: 'required',
+    },
+    {
+      fieldName: 'phone',
+      label: '商家电话号码',
+      component: 'VbenInput',
+      formItemClass: 'col-span-6',
+      rules: 'required',
+    },
+    {
+      fieldName: 'person',
+      label: '联系人名称',
+      component: 'VbenInput',
+      formItemClass: 'col-span-6',
+      rules: 'required',
+    },
+    {
+      fieldName: 'id_card',
+      label: '身份证号码',
+      component: 'VbenInput',
+      formItemClass: 'col-span-6',
+      rules: 'required',
+    },
+    {
+      fieldName: 'classification_id',
+      label: '行业',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        childrenField: 'children',
+        labelField: 'name',
+        valueField: 'id',
+        api: getStoreClassificationOptionApi,
+      },
+      formItemClass: 'col-span-6',
+      defaultValue: 0,
+      rules: 'required',
+    },
+    {
+      fieldName: 'is_featured',
+      label: '推荐店铺',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          {
+            label: '是',
+            value: 1,
+          },
+          {
+            label: '否',
+            value: 0,
+          },
+        ],
+      },
+      formItemClass: 'col-span-6',
+      defaultValue: 0,
+      rules: 'required',
+    },
+    {
+      fieldName: 'chain',
+      label: '连锁',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          {
+            label: '是',
+            value: 1,
+          },
+          {
+            label: '否',
+            value: 0,
+          },
+        ],
+      },
+      formItemClass: 'col-span-6',
+      defaultValue: 0,
+      rules: 'required',
+    },
+    {
+      fieldName: 'business_suspended',
+      label: '暂停营业',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          {
+            label: '是',
+            value: 1,
+          },
+          {
+            label: '否',
+            value: 0,
+          },
+        ],
+      },
+      formItemClass: 'col-span-6',
+      defaultValue: 0,
+      rules: 'required',
+    },
+    {
+      fieldName: 'avatar',
+      label: '店铺头像',
+      component: 'Avatar',
+      formItemClass: 'col-span-6',
+      rules: 'required',
+    },
+    {
+      fieldName: 'business_license',
+      label: '营业执照',
+      component: 'Avatar',
+      formItemClass: 'col-span-6',
+      rules: 'required',
+    },
+    {
+      fieldName: 'id_card_portrait_side',
+      label: '身份证人面',
+      component: 'Avatar',
+      formItemClass: 'col-span-6',
+      rules: 'required',
+    },
+    {
+      fieldName: 'id_card_national_emblem_side',
+      label: '身份证国徽面',
+      component: 'Avatar',
+      formItemClass: 'col-span-6',
+      rules: 'required',
+    },
+  ],
+  showDefaultActions: false,
+};

apps/web-antd/src/views/my-gen/store/config/search.ts

@@ -0,0 +1,55 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+// import dayjs from 'dayjs';
+
+export const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  schema: [
+    // 生成的搜索字段
+    {
+      fieldName: 'name',
+      label: '店铺名称',
+      component: 'VbenInput',
+    },
+    {
+      fieldName: 'level',
+      label: '店铺等级',
+      component: 'InputNumber',
+    },
+    {
+      fieldName: 'phone',
+      label: '商家电话号码',
+      component: 'VbenInput',
+    },
+    {
+      fieldName: 'person',
+      label: '联系人名称',
+      component: 'VbenInput',
+    },
+    {
+      fieldName: 'is_featured',
+      label: '是否为推荐店铺',
+      component: 'VbenSelect',
+    },
+    {
+      fieldName: 'chain',
+      label: '是否连锁',
+      component: 'VbenSelect',
+    },
+    {
+      fieldName: 'business_suspended',
+      label: '是否暂停营业',
+      component: 'VbenSelect',
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  submitButtonOptions: {
+    content: '查询',
+  },
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};

apps/web-antd/src/views/my-gen/store/config/table.ts

@@ -0,0 +1,82 @@
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { getStoreListApi } from '../api';
+
+interface RowType {
+  id: string;
+  name: string;
+  logo: string;
+  introduce: string;
+  created_at: string;
+}
+
+export const gridOptions: VxeGridProps<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+    labelField: '',
+  },
+  columnConfig: {
+    useKey: true,
+  },
+  rowConfig: {
+    useKey: true,
+  },
+  columns: [
+    { type: 'checkbox', width: 60 },
+    { field: 'id', align: 'left', title: 'ID', width: 100 },
+    // 生成的列表字段
+    { field: 'name', title: '店铺名称' },
+    { field: 'level', title: '店铺等级' },
+    { field: 'avatar', title: '店铺头像' },
+    { field: 'introduction', title: '店铺简介' },
+    { field: 'description', title: '详细介绍' },
+    { field: 'phone', title: '商家电话号码' },
+    { field: 'person', title: '联系人名称' },
+    { field: 'id_card', title: '身份证号码' },
+    { field: 'qr_code', title: '店铺二维码' },
+    { field: 'is_featured', title: '是否为推荐店铺' },
+    { field: 'business_license', title: '营业执照' },
+    { field: 'id_card_portrait_side', title: '身份证人面' },
+    { field: 'id_card_national_emblem_side', title: '身份证国徽面' },
+    { field: 'chain', title: '是否连锁' },
+    { field: 'business_suspended', title: '是否暂停营业' },
+
+    { field: 'created_at', title: '创建时间' },
+    { field: 'updated_at', title: '编辑时间' },
+    { type: 'html', title: '操作', slots: { default: 'action' } },
+  ],
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      // 请求后端接口方法
+      query: async ({ page }, formValues) => {
+        return await getStoreListApi({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  height: 'auto',
+  border: false,
+  toolbarConfig: {
+    // 是否显示搜索表单控制按钮
+    // @ts-ignore 正式环境时有完整的类型声明
+    search: true,
+    refresh: true, // 刷新
+    print: false, // 打印
+    export: false, // 导出
+    // custom: true, // 自定义列
+    zoom: true, // 最大化最小化
+    slots: {
+      buttons: 'toolbar-buttons',
+    },
+    custom: {
+      // 自定义列-图标
+      icon: 'vxe-icon-menu',
+    },
+  },
+  showOverflow: false,
+};

apps/web-antd/src/views/my-gen/store/index.vue

@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import type { VxeGridListeners } from '#/adapter/vxe-table';
+
+import { ref } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { Button, Image, message } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { TableAction } from '#/components/table-action';
+
+import { deleteStoreApi } from './api';
+import FormModalDemo from './components/modal.vue';
+import { formOptions } from './config/search';
+import { gridOptions } from './config/table';
+
+const hasTopTableDropDownActions = ref(false);
+
+const gridEvents: VxeGridListeners<any> = {
+  checkboxChange() {
+    const records = gridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+  checkboxAll() {
+    const records = gridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: FormModalDemo,
+});
+
+const showModal = (data = {}, isUpdate = false) => {
+  formModalApi.setData({
+    // 表单值
+    values: data,
+    update: isUpdate,
+    gridApi,
+  });
+  formModalApi.open();
+};
+
+const hasDelete = (row: any) => {
+  let ids = [];
+  if (row) {
+    ids.push(row);
+  } else {
+    ids = gridApi.grid.getCheckboxRecords().map((item) => item.id);
+  }
+  deleteStoreApi({ ids }).then(() => {
+    message.success('删除成功!');
+    gridApi.reload();
+  });
+};
+</script>
+
+<template>
+  <Page auto-content-height title="店铺管理管理">
+    <FormModal />
+    <Grid>
+      <template #toolbar-buttons>
+        <TableAction
+          :actions="[
+            {
+              label: '新增',
+              type: 'primary',
+              icon: 'ant-design:plus-outlined',
+              onClick: showModal.bind(null),
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: '删除',
+              icon: 'ant-design:delete-outlined',
+              ifShow: hasTopTableDropDownActions,
+              popConfirm: {
+                title: '确定删除吗？',
+                confirm: hasDelete.bind(null, false),
+              },
+            },
+          ]"
+        >
+          <template #more>
+            <Button style="margin-left: 16px"> 批量操作 </Button>
+          </template>
+        </TableAction>
+      </template>
+      <template #avatar="{ row }">
+        <Image :src="row.avatar" height="30" width="30" />
+      </template>
+      <template #toolbar-tools></template>
+      <template #action="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              type: 'link',
+              icon: 'uil:edit',
+              size: 'small',
+              // auth: ['admin', 'sys:role:detail'],
+              onClick: showModal.bind(null, row, true),
+            },
+            {
+              label: '删除',
+              type: 'link',
+              icon: 'ant-design:delete-outlined',
+              size: 'small',
+              // auth: ['admin', 'sys:role:detail'],
+              popConfirm: {
+                title: '确定删除吗？',
+                confirm: hasDelete.bind(null, row.id),
+              },
+            },
+          ]"
+          :drop-down-actions="[]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>

apps/web-antd/vite.config.mts

@@ -5,14 +5,14 @@ export default defineConfig(async () => {
     application: {},
     vite: {
       server: {
-        port: 8866,
+        port: 18866,
         proxy: {
           '/api': {
             changeOrigin: true,
             rewrite: (path) => path.replace(/^\/api/, ''),
             // mock代理目标地址
             // target: 'http://localhost:5320/api',
-            target: 'http://127.0.0.1:18009/api/',
+            target: 'http://127.0.0.1:18010/api/',
             ws: true,
           },
         },

docs/.vitepress/config/en.mts

@@ -51,7 +51,7 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
   return [
     {
       collapsed: false,
-      text: 'Introduction',
+      text: '',
       items: [
         {
           link: 'introduction/vben',