diff --git a/apps/web-antd/src/views/mall/product/spu/data.ts b/apps/web-antd/src/views/mall/product/spu/data.ts
new file mode 100644
index 000000000..fa55151dd
--- /dev/null
+++ b/apps/web-antd/src/views/mall/product/spu/data.ts
@@ -0,0 +1,122 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallSpuApi } from '#/api/mall/product/spu';
+
+import { getCategoryList } from '#/api/mall/product/category';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '商品名称',
+      component: 'Input',
+    },
+    {
+      fieldName: 'categoryId',
+      label: '商品分类',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        api: () => getCategoryList({}),
+        fieldNames: { label: 'name', value: 'id', children: 'children' },
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns<T = MallSpuApi.Spu>(
+  onStatusChange?: (
+    newStatus: number,
+    row: T,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      type: 'expand',
+      width: 80,
+      slots: { content: 'expand_content' },
+      fixed: 'left',
+    },
+    {
+      field: 'id',
+      title: '商品编号',
+      fixed: 'left',
+    },
+    {
+      field: 'name',
+      title: '商品名称',
+      fixed: 'left',
+      minWidth: 200,
+    },
+    {
+      field: 'picUrl',
+      title: '商品图片',
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'price',
+      title: '价格',
+      formatter: 'formatFraction',
+    },
+    {
+      field: 'marketPrice',
+      title: '市场价',
+      formatter: 'formatFraction',
+    },
+    {
+      field: 'costPrice',
+      title: '成本价',
+      formatter: 'formatFraction',
+    },
+    {
+      field: 'salesCount',
+      title: '销量',
+    },
+    {
+      field: 'stock',
+      title: '库存',
+    },
+    {
+      field: 'sort',
+      title: '排序',
+    },
+    {
+      field: 'status',
+      title: '销售状态',
+      cellRender: {
+        attrs: { beforeChange: onStatusChange },
+        name: 'CellSwitch',
+        props: {
+          checkedValue: 1,
+          checkedChildren: '上架',
+          unCheckedValue: 0,
+          unCheckedChildren: '下架',
+        },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 300,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/mall/product/spu/index.vue b/apps/web-antd/src/views/mall/product/spu/index.vue
index 761da1334..393320652 100644
--- a/apps/web-antd/src/views/mall/product/spu/index.vue
+++ b/apps/web-antd/src/views/mall/product/spu/index.vue
@@ -1,34 +1,312 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallSpuApi } from '#/api/mall/product/spu';
 
-import { Button } from 'ant-design-vue';
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
 
+import { confirm, Page } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { message, Tabs } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteSpu,
+  exportSpu,
+  getSpuPage,
+  getTabsCount,
+  updateStatus,
+} from '#/api/mall/product/spu';
 import { DocAlert } from '#/components/doc-alert';
+import { $t } from '#/locales';
+import { ProductSpuStatusEnum } from '#/utils';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+const { push } = useRouter();
+const tabType = ref(0);
+
+// tabs 数据
+const tabsData = ref([
+  {
+    name: '出售中',
+    type: 0,
+    count: 0,
+  },
+  {
+    name: '仓库中',
+    type: 1,
+    count: 0,
+  },
+  {
+    name: '已售罄',
+    type: 2,
+    count: 0,
+  },
+  {
+    name: '警戒库存',
+    type: 3,
+    count: 0,
+  },
+  {
+    name: '回收站',
+    type: 4,
+    count: 0,
+  },
+]);
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 获得每个 Tab 的数量 */
+async function getTabCount() {
+  const res = await getTabsCount();
+  for (const objName in res) {
+    const index = Number(objName);
+    if (tabsData.value[index]) {
+      tabsData.value[index].count = res[objName] as number;
+    }
+  }
+}
+
+/** 创建商品 */
+function handleCreate() {
+  push({ name: 'ProductSpuAdd' });
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportSpu(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '商品.xls', source: data });
+}
+
+/** 编辑商品 */
+function handleEdit(row: MallSpuApi.Spu) {
+  push({ name: 'ProductSpuEdit', params: { id: row.id } });
+}
+
+/** 删除商品 */
+async function handleDelete(row: MallSpuApi.Spu) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteSpu(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 添加到仓库 / 回收站的状态 */
+async function handleStatus02Change(row: MallSpuApi.Spu, newStatus: number) {
+  // 二次确认
+  const text =
+    newStatus === ProductSpuStatusEnum.RECYCLE.status
+      ? '加入到回收站'
+      : '恢复到仓库';
+  confirm(`确认要"${row.name}"${text}吗？`)
+    .then(async () => {
+      await updateStatus({ id: row.id as number, status: newStatus });
+      message.success(`${text}成功`);
+      onRefresh();
+    })
+    .catch(() => {
+      message.error(`${text}失败`);
+    });
+}
+
+/** 更新状态 */
+async function handleStatusChange(
+  newStatus: number,
+  row: MallSpuApi.Spu,
+): Promise<boolean | undefined> {
+  return new Promise((resolve, reject) => {
+    // 二次确认
+    const text = row.status ? '上架' : '下架';
+    confirm({
+      content: `确认要${text + row.name}吗?`,
+    })
+      .then(async () => {
+        // 更新状态
+        const res = await updateStatus({
+          id: row.id as number,
+          status: newStatus,
+        });
+        if (res) {
+          // 提示并返回成功
+          message.success(`${text}成功`);
+          resolve(true);
+        } else {
+          reject(new Error('操作失败'));
+        }
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
+}
+
+/** 查看商品详情 */
+function handleDetail(row: MallSpuApi.Spu) {
+  push({ name: 'ProductSpuDetail', params: { id: row.id } });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(handleStatusChange),
+    height: 'auto',
+    cellConfig: {
+      height: 80,
+    },
+    expandConfig: {
+      height: 150,
+    },
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getSpuPage({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            tabType: tabType.value,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      resizable: true,
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<MallSpuApi.Spu>,
+});
+
+function onChangeTab(key: any) {
+  tabType.value = Number(key);
+  gridApi.query();
+}
+
+onMounted(() => {
+  getTabCount();
+});
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="【商品】商品 SPU 与 SKU"
-      url="https://doc.iocoder.cn/mall/product-spu-sku/"
-    />
-    <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/mall/product/spu/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mall/product/spu/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【商品】商品 SPU 与 SKU"
+        url="https://doc.iocoder.cn/mall/product-spu-sku/"
+      />
+    </template>
+
+    <Grid>
+      <template #top>
+        <Tabs class="border-none" @change="onChangeTab">
+          <Tabs.TabPane
+            v-for="item in tabsData"
+            :key="item.type"
+            :tab="`${item.name} (${item.count})`"
+          />
+        </Tabs>
+      </template>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['商品']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['product:spu:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['product:spu:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #expand_content="{ row }">
+        <div>
+          <p>商品名称：{{ row.name }}</p>
+          <p>商品价格：{{ row.price }}</p>
+        </div>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['product:spu:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.detail'),
+              type: 'link',
+              icon: ACTION_ICON.VIEW,
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['product:spu:delete'],
+              ifShow: () => row.type === 4,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+            {
+              label: '恢复',
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['product:spu:update'],
+              ifShow: () => row.type === 4,
+              onClick: handleStatus02Change.bind(
+                null,
+                row,
+                ProductSpuStatusEnum.DISABLE.status,
+              ),
+            },
+            {
+              label: '回收',
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['product:spu:update'],
+              ifShow: () => row.type !== 4,
+              onClick: handleStatus02Change.bind(
+                null,
+                row,
+                ProductSpuStatusEnum.RECYCLE.status,
+              ),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/mall/product/spu/modules/detail.vue b/apps/web-antd/src/views/mall/product/spu/modules/detail.vue
new file mode 100644
index 000000000..c28ebc684
--- /dev/null
+++ b/apps/web-antd/src/views/mall/product/spu/modules/detail.vue
@@ -0,0 +1,3 @@
+<script lang="ts" setup></script>
+
+<template>detail</template>
diff --git a/apps/web-antd/src/views/mall/product/spu/modules/form.vue b/apps/web-antd/src/views/mall/product/spu/modules/form.vue
new file mode 100644
index 000000000..5b6413575
--- /dev/null
+++ b/apps/web-antd/src/views/mall/product/spu/modules/form.vue
@@ -0,0 +1,3 @@
+<script lang="ts" setup></script>
+
+<template>form</template>