diff --git a/apps/web-antd/src/adapter/component/index.ts b/apps/web-antd/src/adapter/component/index.ts
index 70ddf396..68e7e88b 100644
--- a/apps/web-antd/src/adapter/component/index.ts
+++ b/apps/web-antd/src/adapter/component/index.ts
@@ -22,6 +22,9 @@ const AutoComplete = defineAsyncComponent(
   () => import('ant-design-vue/es/auto-complete'),
 );
 const Button = defineAsyncComponent(() => import('ant-design-vue/es/button'));
+const Cascader = defineAsyncComponent(
+  () => import('ant-design-vue/es/cascader'),
+);
 const Checkbox = defineAsyncComponent(
   () => import('ant-design-vue/es/checkbox'),
 );
@@ -103,6 +106,7 @@ const withDefaultPlaceholder = <T extends Component>(
 
 // 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
 export type ComponentType =
+  | 'ApiCascader'
   | 'ApiSelect'
   | 'ApiTreeSelect'
   | 'AutoComplete'
@@ -139,6 +143,21 @@ async function initComponentAdapter() {
     // 如果你的组件体积比较大，可以使用异步加载
     // Button: () =>
     // import('xxx').then((res) => res.Button),
+    ApiCascader: withDefaultPlaceholder(
+      {
+        ...ApiComponent,
+        name: 'ApiCascader',
+      },
+      'select',
+      {
+        component: Cascader,
+        fieldNames: { label: 'label', value: 'value', children: 'children' },
+        loadingSlot: 'suffixIcon',
+        modelPropName: 'value',
+        optionsPropName: 'treeData',
+        visibleEvent: 'onVisibleChange',
+      },
+    ),
     ApiSelect: withDefaultPlaceholder(
       {
         ...ApiComponent,
diff --git a/apps/web-antd/src/views/mall/product/spu/modules/form-data.ts b/apps/web-antd/src/views/mall/product/spu/modules/form-data.ts
new file mode 100644
index 00000000..c2909402
--- /dev/null
+++ b/apps/web-antd/src/views/mall/product/spu/modules/form-data.ts
@@ -0,0 +1,262 @@
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { DeliveryTypeEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { handleTree } from '@vben/utils';
+
+import { z } from '#/adapter/form';
+import { getSimpleBrandList } from '#/api/mall/product/brand';
+import { getCategoryList } from '#/api/mall/product/category';
+import { getSimpleTemplateList } from '#/api/mall/trade/delivery/expressTemplate';
+
+/** 基础设置的表单 */
+export function useInfoFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '商品名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入商品名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'categoryId',
+      label: '分类名称',
+      // component: 'ApiCascader',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        api: async () => {
+          const data = await getCategoryList({});
+          return handleTree(data);
+        },
+        fieldNames: { label: 'name', value: 'id', children: 'children' },
+        placeholder: '请选择商品分类',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'brandId',
+      label: '商品品牌',
+      component: 'ApiSelect',
+      componentProps: {
+        api: () => getSimpleBrandList(),
+        labelField: 'name',
+        valueField: 'id',
+        allowClear: true,
+        placeholder: '请选择商品品牌',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'keyword',
+      label: '商品关键字',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入商品关键字',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'introduction',
+      label: '商品简介',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入商品简介',
+        autoSize: { minRows: 2, maxRows: 2 },
+        showCount: true,
+        maxlength: 128,
+        allowClear: true,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'picUrl',
+      label: '商品封面图',
+      component: 'ImageUpload',
+      componentProps: {
+        maxSize: 30,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'sliderPicUrls',
+      label: '商品轮播图',
+      component: 'ImageUpload',
+      componentProps: {
+        maxNumber: 10,
+        multiple: true,
+        maxSize: 30,
+      },
+      rules: 'required',
+    },
+  ];
+}
+
+/** 价格库存的表单 */
+export function useSkuFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'subCommissionType',
+      label: '分销类型',
+      component: 'RadioGroup',
+      componentProps: {
+        allowClear: true,
+        options: [
+          {
+            label: '默认设置',
+            value: false,
+          },
+          {
+            label: '单独设置',
+            value: true,
+          },
+        ],
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'specType',
+      label: '商品规格',
+      component: 'RadioGroup',
+      componentProps: {
+        allowClear: true,
+        options: [
+          {
+            label: '单规格',
+            value: false,
+          },
+          {
+            label: '多规格',
+            value: true,
+          },
+        ],
+      },
+      rules: 'required',
+    },
+    // TODO @xingyu：待补充商品属性
+  ];
+}
+
+/** 物流设置的表单 */
+export function useDeliveryFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'deliveryTypes',
+      label: '配送方式',
+      component: 'CheckboxGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.TRADE_DELIVERY_TYPE, 'number'),
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'deliveryTemplateId',
+      label: '运费模板',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleTemplateList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+      dependencies: {
+        triggerFields: ['deliveryTypes'],
+        show: (values) =>
+          !!values.deliveryTypes &&
+          values.deliveryTypes.includes(DeliveryTypeEnum.EXPRESS.type),
+      },
+      rules: 'required',
+    },
+  ];
+}
+
+/** 商品详情的表单 */
+export function useDescriptionFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'description',
+      label: '商品详情',
+      component: 'RichTextarea',
+      componentProps: {
+        placeholder: '请输入商品详情',
+        height: 1000,
+      },
+      rules: 'required',
+    },
+  ];
+}
+
+/** 其它设置的表单 */
+export function useOtherFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'sort',
+      label: '商品排序',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+      },
+      rules: z.number().min(0).optional().default(0),
+    },
+    {
+      fieldName: 'giveIntegral',
+      label: '赠送积分',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+      },
+      rules: z.number().min(0).optional().default(0),
+    },
+    {
+      fieldName: 'virtualSalesCount',
+      label: '虚拟销量',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+      },
+      rules: z.number().min(0).optional().default(0),
+    },
+  ];
+}
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
index f89d618c..9da5b7b5 100644
--- a/apps/web-antd/src/views/mall/product/spu/modules/form.vue
+++ b/apps/web-antd/src/views/mall/product/spu/modules/form.vue
@@ -1,6 +1,178 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { MallSpuApi } from '#/api/mall/product/spu';
+
+import { onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { Page } from '@vben/common-ui';
+import { convertToInteger, formatToFraction } from '@vben/utils';
+
+import { Button, Tabs } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { createSpu, getSpu, updateSpu } from '#/api/mall/product/spu';
+import { ContentWrap } from '#/components/content-wrap';
+
+import {
+  useDeliveryFormSchema,
+  useDescriptionFormSchema,
+  useInfoFormSchema,
+  useOtherFormSchema,
+  useSkuFormSchema,
+} from './form-data';
+
+const spuId = ref<number>();
+const { params } = useRoute();
+
+const activeTabName = ref('info');
+
+const [InfoForm, infoFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useInfoFormSchema(),
+  showDefaultActions: false,
+});
+
+const [SkuForm, skuFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useSkuFormSchema(),
+  showDefaultActions: false,
+});
+
+const [DeliveryForm, deliveryFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useDeliveryFormSchema(),
+  showDefaultActions: false,
+});
+
+const [DescriptionForm, descriptionFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'vertical',
+  schema: useDescriptionFormSchema(),
+  showDefaultActions: false,
+});
+
+const [OtherForm, otherFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useOtherFormSchema(),
+  showDefaultActions: false,
+});
+
+async function onSubmit() {
+  const values: MallSpuApi.Spu = await infoFormApi
+    .merge(skuFormApi)
+    .merge(deliveryFormApi)
+    .merge(descriptionFormApi)
+    .merge(otherFormApi)
+    .submitAllForm(true);
+
+  if (values.skus) {
+    values.skus.forEach((item) => {
+      // sku相关价格元转分
+      item.price = convertToInteger(item.price);
+      item.marketPrice = convertToInteger(item.marketPrice);
+      item.costPrice = convertToInteger(item.costPrice);
+      item.firstBrokeragePrice = convertToInteger(item.firstBrokeragePrice);
+      item.secondBrokeragePrice = convertToInteger(item.secondBrokeragePrice);
+    });
+  }
+  // 处理轮播图列表
+  const newSliderPicUrls: any[] = [];
+  values.sliderPicUrls!.forEach((item: any) => {
+    // 如果是前端选的图
+    typeof item === 'object'
+      ? newSliderPicUrls.push(item.url)
+      : newSliderPicUrls.push(item);
+  });
+  values.sliderPicUrls = newSliderPicUrls;
+
+  await (spuId.value ? updateSpu(values) : createSpu(values));
+}
+
+async function initDate() {
+  spuId.value = params.id as unknown as number;
+  if (!spuId.value) {
+    return;
+  }
+  const res = await getSpu(spuId.value);
+  if (res.skus) {
+    res.skus.forEach((item) => {
+      // 回显价格分转元
+      item.price = formatToFraction(item.price);
+      item.marketPrice = formatToFraction(item.marketPrice);
+      item.costPrice = formatToFraction(item.costPrice);
+      item.firstBrokeragePrice = formatToFraction(item.firstBrokeragePrice);
+      item.secondBrokeragePrice = formatToFraction(item.secondBrokeragePrice);
+    });
+  }
+  infoFormApi.setValues(res);
+  skuFormApi.setValues(res);
+  deliveryFormApi.setValues(res);
+  descriptionFormApi.setValues(res);
+  otherFormApi.setValues(res);
+}
+
+onMounted(async () => {
+  await initDate();
+});
+</script>
 
 <template>
-  <!-- TODO @xingyu：待开发 -->
-  <div>form</div>
+  <Page auto-content-height>
+    <ContentWrap class="h-full w-full pb-8">
+      <template #extra>
+        <Button type="primary" @click="onSubmit">保存</Button>
+      </template>
+      <Tabs v-model:active-key="activeTabName">
+        <Tabs.TabPane tab="基础设置" key="info">
+          <InfoForm class="w-3/5" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="价格库存" key="sku">
+          <SkuForm class="w-3/5" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="物流设置" key="delivery">
+          <DeliveryForm class="w-3/5" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="商品详情" key="description">
+          <DescriptionForm class="w-3/5" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="其它设置" key="other">
+          <OtherForm class="w-3/5" />
+        </Tabs.TabPane>
+      </Tabs>
+    </ContentWrap>
+  </Page>
 </template>