From ab54628f79746311c4ebba8f3688a728a09a56a0 Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Thu, 9 Oct 2025 17:51:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20ele=20spu=20form=20=E4=BF=9D=E6=8C=81?=
 =?UTF-8?q?=E4=B8=80=E8=87=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/mall/product/spu/components/data.ts |  43 --
 .../product/spu/components/delivery-form.vue  |  86 ---
 .../spu/components/description-form.vue       |  67 ---
 .../mall/product/spu/components/info-form.vue | 140 -----
 .../mall/product/spu/components/model.d.ts    |  25 -
 .../product/spu/components/other-form.vue     |  87 ---
 .../spu/components/product-attributes.vue     | 200 -------
 .../components/product-property-add-form.vue  | 133 -----
 .../mall/product/spu/components/sku-form.vue  | 248 --------
 .../mall/product/spu/components/sku-list.vue  | 533 ------------------
 .../product/spu/components/spu-showcase.vue   | 166 ------
 .../spu/components/spu-table-select.vue       | 359 ------------
 12 files changed, 2087 deletions(-)
 delete mode 100644 apps/web-ele/src/views/mall/product/spu/components/data.ts
 delete mode 100644 apps/web-ele/src/views/mall/product/spu/components/delivery-form.vue
 delete mode 100644 apps/web-ele/src/views/mall/product/spu/components/description-form.vue
 delete mode 100644 apps/web-ele/src/views/mall/product/spu/components/info-form.vue
 delete mode 100644 apps/web-ele/src/views/mall/product/spu/components/model.d.ts
 delete mode 100644 apps/web-ele/src/views/mall/product/spu/components/other-form.vue
 delete mode 100644 apps/web-ele/src/views/mall/product/spu/components/product-attributes.vue
 delete mode 100644 apps/web-ele/src/views/mall/product/spu/components/product-property-add-form.vue
 delete mode 100644 apps/web-ele/src/views/mall/product/spu/components/sku-form.vue
 delete mode 100644 apps/web-ele/src/views/mall/product/spu/components/sku-list.vue
 delete mode 100644 apps/web-ele/src/views/mall/product/spu/components/spu-showcase.vue
 delete mode 100644 apps/web-ele/src/views/mall/product/spu/components/spu-table-select.vue

diff --git a/apps/web-ele/src/views/mall/product/spu/components/data.ts b/apps/web-ele/src/views/mall/product/spu/components/data.ts
deleted file mode 100644
index ded4e7666..000000000
--- a/apps/web-ele/src/views/mall/product/spu/components/data.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import type { PropertyAndValues } from './model';
-
-import type { MallSpuApi } from '#/api/mall/product/spu';
-
-/**
- * 获得商品的规格列表 - 商品相关的公共函数
- *
- * @param spu
- * @return PropertyAndValues 规格列表
- */
-const getPropertyList = (spu: MallSpuApi.Spu): PropertyAndValues[] => {
-  //  直接拿返回的 skus 属性逆向生成出 propertyList
-  const properties: PropertyAndValues[] = [];
-  // 只有是多规格才处理
-  if (spu.specType) {
-    spu.skus?.forEach((sku) => {
-      sku.properties?.forEach(
-        ({ propertyId, propertyName, valueId, valueName }) => {
-          // 添加属性
-          if (!properties?.some((item) => item.id === propertyId)) {
-            properties.push({
-              id: propertyId!,
-              name: propertyName!,
-              values: [],
-            });
-          }
-          // 添加属性值
-          const index = properties?.findIndex((item) => item.id === propertyId);
-          if (
-            index !== undefined &&
-            index >= 0 &&
-            !properties[index]!.values?.some((value) => value.id === valueId)
-          ) {
-            properties[index]!.values?.push({ id: valueId!, name: valueName! });
-          }
-        },
-      );
-    });
-  }
-  return properties;
-};
-
-export { getPropertyList };
diff --git a/apps/web-ele/src/views/mall/product/spu/components/delivery-form.vue b/apps/web-ele/src/views/mall/product/spu/components/delivery-form.vue
deleted file mode 100644
index 208a67304..000000000
--- a/apps/web-ele/src/views/mall/product/spu/components/delivery-form.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<script lang="ts" setup>
-import { watch } from 'vue';
-
-import { DeliveryTypeEnum, DICT_TYPE } from '@vben/constants';
-import { getDictOptions } from '@vben/hooks';
-
-import { ElMessage } from 'element-plus';
-
-import { useVbenForm } from '#/adapter/form';
-import * as ExpressTemplateApi from '#/api/mall/trade/delivery/expressTemplate';
-
-const props = defineProps<{
-  propFormData: Object;
-}>();
-
-const emit = defineEmits(['update:activeName']);
-
-/** 将传进来的值赋值给 formData */
-watch(
-  () => props.propFormData,
-  (data) => {
-    if (!data) {
-      return;
-    }
-    formApi.setValues(data);
-  },
-);
-
-const validate = async () => {
-  const { valid } = await formApi.validate();
-  if (!valid) {
-    return;
-  }
-  try {
-    // 校验通过更新数据
-    Object.assign(props.propFormData, formApi.getValues());
-  } catch (error) {
-    ElMessage.error('【物流设置】不完善，请填写相关信息');
-    emit('update:activeName', 'delivery');
-    throw error; // 目的截断之后的校验
-  }
-};
-defineExpose({ validate });
-
-const [Form, formApi] = useVbenForm({
-  commonConfig: {
-    componentProps: {
-      class: '!w-1/6',
-    },
-    formItemClass: 'col-span-2',
-    labelWidth: 120,
-  },
-  layout: 'horizontal',
-  schema: [
-    {
-      fieldName: 'deliveryTypes',
-      label: '配送方式',
-      component: 'CheckboxGroup',
-      componentProps: {
-        options: getDictOptions(DICT_TYPE.TRADE_DELIVERY_TYPE, 'number'),
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'deliveryTemplateId',
-      label: '运费模板',
-      component: 'ApiSelect',
-      componentProps: {
-        api: ExpressTemplateApi.getSimpleTemplateList,
-        labelField: 'name',
-        valueField: 'id',
-      },
-      rules: 'required',
-      dependencies: {
-        triggerFields: ['deliveryTypes'],
-        show: (values) =>
-          values.deliveryTypes.includes(DeliveryTypeEnum.EXPRESS.type),
-      },
-    },
-  ],
-  showDefaultActions: false,
-});
-</script>
-<template>
-  <Form />
-</template>
diff --git a/apps/web-ele/src/views/mall/product/spu/components/description-form.vue b/apps/web-ele/src/views/mall/product/spu/components/description-form.vue
deleted file mode 100644
index 139b8ead6..000000000
--- a/apps/web-ele/src/views/mall/product/spu/components/description-form.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<script lang="ts" setup>
-import { watch } from 'vue';
-
-import { ElMessage } from 'element-plus';
-
-import { useVbenForm } from '#/adapter/form';
-
-const props = defineProps<{
-  propFormData: Object;
-}>();
-
-const emit = defineEmits(['update:activeName']);
-
-/** 将传进来的值赋值给 formData */
-watch(
-  () => props.propFormData,
-  (data) => {
-    if (!data) {
-      return;
-    }
-    formApi.setValues(data);
-  },
-);
-
-const validate = async () => {
-  const { valid } = await formApi.validate();
-  if (!valid) {
-    return;
-  }
-  try {
-    // 校验通过更新数据
-    Object.assign(props.propFormData, formApi.getValues());
-  } catch (error) {
-    ElMessage.error('【商品详情】不完善，请填写相关信息');
-    emit('update:activeName', 'description');
-    throw error; // 目的截断之后的校验
-  }
-};
-defineExpose({ validate });
-
-const [Form, formApi] = useVbenForm({
-  commonConfig: {
-    componentProps: {
-      class: '!w-1/6',
-    },
-    formItemClass: 'col-span-2',
-    labelWidth: 120,
-  },
-  layout: 'horizontal',
-  schema: [
-    {
-      fieldName: 'description',
-      label: '商品详情',
-      component: 'RichTextarea',
-      componentProps: {
-        placeholder: '请输入商品详情',
-        height: 1000,
-      },
-      rules: 'required',
-    },
-  ],
-  showDefaultActions: false,
-});
-</script>
-<template>
-  <Form />
-</template>
diff --git a/apps/web-ele/src/views/mall/product/spu/components/info-form.vue b/apps/web-ele/src/views/mall/product/spu/components/info-form.vue
deleted file mode 100644
index 95d9cd413..000000000
--- a/apps/web-ele/src/views/mall/product/spu/components/info-form.vue
+++ /dev/null
@@ -1,140 +0,0 @@
-<script lang="ts" setup>
-import { watch } from 'vue';
-
-import { handleTree } from '@vben/utils';
-
-import { ElMessage } from 'element-plus';
-
-import { useVbenForm } from '#/adapter/form';
-import * as ProductBrandApi from '#/api/mall/product/brand';
-import * as ProductCategoryApi from '#/api/mall/product/category';
-
-const props = defineProps<{
-  propFormData: Object;
-}>();
-
-const emit = defineEmits(['update:activeName']);
-
-const getCategoryList = async () => {
-  const data = await ProductCategoryApi.getCategorySimpleList();
-  return handleTree(data, 'id');
-};
-
-/** 将传进来的值赋值给 formData */
-watch(
-  () => props.propFormData,
-  (data) => {
-    if (!data) {
-      return;
-    }
-    formApi.setValues(data);
-  },
-);
-
-const validate = async () => {
-  const { valid } = await formApi.validate();
-  if (!valid) {
-    return;
-  }
-  try {
-    // 校验通过更新数据
-    Object.assign(props.propFormData, formApi.getValues());
-  } catch (error) {
-    ElMessage.error('【基础设置】不完善，请填写相关信息');
-    emit('update:activeName', 'info');
-    throw error; // 目的截断之后的校验
-  }
-};
-defineExpose({ validate });
-
-const [Form, formApi] = useVbenForm({
-  commonConfig: {
-    componentProps: {
-      class: '!w-1/6',
-    },
-    formItemClass: 'col-span-2',
-    labelWidth: 120,
-  },
-  layout: 'horizontal',
-  schema: [
-    {
-      fieldName: 'name',
-      label: '商品名称',
-      component: 'Input',
-      componentProps: {
-        placeholder: '请输入商品名称',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'categoryId',
-      label: '商品分类',
-      component: 'ApiCascader',
-      componentProps: {
-        api: getCategoryList,
-        labelField: 'name',
-        valueField: 'id',
-        childrenField: 'children',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'brandId',
-      label: '商品品牌',
-      component: 'ApiSelect',
-      componentProps: {
-        api: ProductBrandApi.getSimpleBrandList,
-        labelField: 'name',
-        valueField: 'id',
-      },
-    },
-    {
-      fieldName: 'keyword',
-      label: '商品关键字',
-      component: 'Input',
-      componentProps: {
-        placeholder: '请输入商品关键字',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'introduction',
-      label: '商品简介',
-      component: 'Input',
-      componentProps: {
-        type: 'textarea',
-        placeholder: '请输入商品简介',
-        maxlength: 128,
-        showWordLimit: true,
-        autosize: {
-          minRows: 4,
-          maxRows: 4,
-        },
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'picUrl',
-      label: '商品封面图',
-      component: 'ImageUpload',
-      componentProps: {
-        max: 1,
-        class: 'w-full',
-      },
-    },
-    {
-      fieldName: 'sliderPicUrls',
-      label: '商品轮播图',
-      component: 'ImageUpload',
-      componentProps: {
-        max: 10,
-        class: 'w-full',
-      },
-    },
-  ],
-  showDefaultActions: false,
-});
-</script>
-<template>
-  <Form />
-</template>
diff --git a/apps/web-ele/src/views/mall/product/spu/components/model.d.ts b/apps/web-ele/src/views/mall/product/spu/components/model.d.ts
deleted file mode 100644
index cc0ac0541..000000000
--- a/apps/web-ele/src/views/mall/product/spu/components/model.d.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-interface PropertyAndValues {
-  id: number;
-  name: string;
-  values?: PropertyAndValues[];
-}
-
-interface RuleConfig {
-  // 需要校验的字段
-  // 例：name: 'name' 则表示校验 sku.name 的值
-  // 例：name: 'productConfig.stock' 则表示校验 sku.productConfig.name 的值,此处 productConfig 表示我在 Sku 上扩展的属性
-  name: string;
-  // 校验规格为一个毁掉函数，其中 arg 为需要校验的字段的值。
-  // 例：需要校验价格必须大于0.01
-  // {
-  //  name:'price',
-  //  rule:(arg: number) => arg > 0.01
-  // }
-  rule: (arg: any) => boolean;
-  // 校验不通过时的消息提示
-  message: string;
-}
-
-export { getPropertyList, PropertyAndValues, RuleConfig };
-
-export { default as SkuList } from './SkuList.vue';
diff --git a/apps/web-ele/src/views/mall/product/spu/components/other-form.vue b/apps/web-ele/src/views/mall/product/spu/components/other-form.vue
deleted file mode 100644
index 02c4c6301..000000000
--- a/apps/web-ele/src/views/mall/product/spu/components/other-form.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<script lang="ts" setup>
-import { watch } from 'vue';
-
-import { ElMessage } from 'element-plus';
-
-import { useVbenForm } from '#/adapter/form';
-
-const props = defineProps<{
-  propFormData: Object;
-}>();
-
-const emit = defineEmits(['update:activeName']);
-
-/** 将传进来的值赋值给 formData */
-watch(
-  () => props.propFormData,
-  (data) => {
-    if (!data) {
-      return;
-    }
-    formApi.setValues(data);
-  },
-);
-
-const validate = async () => {
-  const { valid } = await formApi.validate();
-  if (!valid) {
-    return;
-  }
-  try {
-    // 校验通过更新数据
-    Object.assign(props.propFormData, formApi.getValues());
-  } catch (error) {
-    ElMessage.error('【其它设置】不完善，请填写相关信息');
-    emit('update:activeName', 'other');
-    throw error; // 目的截断之后的校验
-  }
-};
-defineExpose({ validate });
-
-const [Form, formApi] = useVbenForm({
-  commonConfig: {
-    componentProps: {
-      class: '!w-1/6',
-    },
-    formItemClass: 'col-span-2',
-    labelWidth: 120,
-  },
-  layout: 'horizontal',
-  schema: [
-    {
-      fieldName: 'sort',
-      label: '商品排序',
-      component: 'InputNumber',
-      componentProps: {
-        min: 0,
-        step: 1,
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'giveIntegral',
-      label: '赠送积分',
-      component: 'InputNumber',
-      componentProps: {
-        min: 0,
-        step: 1,
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'virtualSalesCount',
-      label: '虚拟销量',
-      component: 'InputNumber',
-      componentProps: {
-        min: 0,
-        step: 1,
-      },
-      rules: 'required',
-    },
-  ],
-  showDefaultActions: false,
-});
-</script>
-<template>
-  <Form />
-</template>
diff --git a/apps/web-ele/src/views/mall/product/spu/components/product-attributes.vue b/apps/web-ele/src/views/mall/product/spu/components/product-attributes.vue
deleted file mode 100644
index 135fd5f43..000000000
--- a/apps/web-ele/src/views/mall/product/spu/components/product-attributes.vue
+++ /dev/null
@@ -1,200 +0,0 @@
-<!-- 商品发布 - 库存价格 - 属性列表 -->
-<script lang="ts" setup>
-import type { PropType } from 'vue';
-
-import type { PropertyAndValues } from './model';
-
-import type { MallPropertyApi } from '#/api/mall/product/property';
-
-import { computed, ref, watch } from 'vue';
-
-import {
-  ElButton,
-  ElCol,
-  ElDivider,
-  ElMessage,
-  ElSpace,
-  ElTag,
-  ElText,
-} from 'element-plus';
-
-import * as PropertyApi from '#/api/mall/product/property';
-import { $t } from '#/locales';
-
-defineOptions({ name: 'ProductAttributes' });
-
-// 商品属性名称下拉框
-const props = defineProps({
-  propertyList: {
-    type: Array as PropType<PropertyAndValues[]>,
-    default: () => [],
-  },
-}); /** 输入框失去焦点或点击回车时触发 */
-const emit = defineEmits(['success']);
-const inputValue = ref(''); // 输入框值
-const attributeIndex = ref<null | number>(null); // 获取焦点时记录当前属性项的index
-// 输入框显隐控制
-const inputVisible = computed(() => (index: number) => {
-  if (attributeIndex.value === null) return false;
-  if (attributeIndex.value === index) return true;
-});
-const inputRef = ref<any[]>([]); // 标签输入框Ref
-/** 解决 ref 在 v-for 中的获取问题*/
-const setInputRef = (el: any) => {
-  if (el === null || el === undefined) return;
-  // 如果不存在 id 相同的元素才添加
-  if (
-    !inputRef.value.some(
-      (item) => item.inputRef?.attributes.id === el.inputRef?.attributes.id,
-    )
-  ) {
-    inputRef.value.push(el);
-  }
-};
-const attributeList = ref<PropertyAndValues[]>([]); // 商品属性列表
-const attributeOptions = ref([] as MallPropertyApi.PropertyValue[]);
-watch(
-  () => props.propertyList,
-  (data) => {
-    if (!data) return;
-    attributeList.value = data as any;
-  },
-  {
-    deep: true,
-    immediate: true,
-  },
-);
-
-/** 删除属性值*/
-const handleCloseValue = (index: number, valueIndex: number) => {
-  if (index < attributeList.value.length) {
-    const values = attributeList.value[index]!.values as any[];
-    values.splice(valueIndex, 1);
-  }
-};
-
-/** 删除属性*/
-const handleCloseProperty = (index: number) => {
-  if (index < attributeList.value.length) {
-    attributeList.value.splice(index, 1);
-    emit('success', attributeList.value);
-  }
-};
-
-/** 显示输入框并获取焦点 */
-const showInput = async (index: number) => {
-  if (index < attributeList.value.length) {
-    attributeIndex.value = index;
-    inputRef.value[index].focus();
-    // 获取属性下拉选项
-    await getAttributeOptions(attributeList.value[index]!.id);
-  }
-};
-
-// 定义 success 事件，用于操作成功后的回调
-const handleInputConfirm = async (index: number, propertyId: number) => {
-  if (inputValue.value && index < attributeList.value.length) {
-    // 1. 重复添加校验
-    const values = attributeList.value[index]!.values as any[];
-    if (values.find((item) => item.name === inputValue.value)) {
-      ElMessage.warning('已存在相同属性值，请重试');
-      attributeIndex.value = null;
-      inputValue.value = '';
-      return;
-    }
-
-    // 2.1 情况一：属性值已存在，则直接使用并结束
-    const existValue = attributeOptions.value.find(
-      (item) => item.name === inputValue.value,
-    );
-    if (existValue) {
-      attributeIndex.value = null;
-      inputValue.value = '';
-      const values = attributeList.value[index]!.values as any[];
-      values.push({
-        id: existValue.id!,
-        name: existValue.name,
-      });
-      emit('success', attributeList.value);
-      return;
-    }
-
-    // 2.2 情况二：新属性值，则进行保存
-    try {
-      const id = await PropertyApi.createPropertyValue({
-        propertyId,
-        name: inputValue.value,
-      });
-      const values = attributeList.value[index]!.values as any[];
-      values.push({ id, name: inputValue.value });
-      ElMessage.success($t('common.createSuccess'));
-      emit('success', attributeList.value);
-    } catch {
-      ElMessage.error('添加失败，请重试');
-    }
-  }
-  attributeIndex.value = null;
-  inputValue.value = '';
-};
-
-/** 获取商品属性下拉选项 */
-const getAttributeOptions = async (propertyId: number) => {
-  attributeOptions.value =
-    await PropertyApi.getPropertyValueSimpleList(propertyId);
-};
-</script>
-
-<template>
-  <ElCol v-for="(item, index) in attributeList" :key="index">
-    <div>
-      <ElText class="mx-1">属性名：</ElText>
-      <ElTag class="mx-1" type="success" @close="handleCloseProperty(index)">
-        {{ item.name }}
-      </ElTag>
-    </div>
-    <div>
-      <ElSpace :size="1">
-        <ElText class="mx-1">属性值：</ElText>
-        <ElTag
-          v-for="(value, valueIndex) in item.values"
-          :key="value.id"
-          class="mx-1"
-          @close="handleCloseValue(index, valueIndex)"
-        >
-          {{ value.name }}
-        </ElTag>
-        <ElSelect
-          v-show="inputVisible(index)"
-          :id="`input${index}`"
-          :ref="setInputRef"
-          v-model="inputValue"
-          :reserve-keyword="false"
-          allow-create
-          class="!w-30"
-          default-first-option
-          filterable
-          size="small"
-          @blur="handleInputConfirm(index, item.id)"
-          @change="handleInputConfirm(index, item.id)"
-          @keyup.enter="handleInputConfirm(index, item.id)"
-        >
-          <el-option
-            v-for="item2 in attributeOptions"
-            :key="item2.id"
-            :label="item2.name"
-            :value="item2.name"
-          />
-        </ElSelect>
-        <ElButton
-          v-show="!inputVisible(index)"
-          class="button-new-tag ml-1"
-          size="small"
-          @click="showInput(index)"
-        >
-          + 添加
-        </ElButton>
-      </ElSpace>
-    </div>
-    <ElDivider class="my-10px" />
-  </ElCol>
-</template>
diff --git a/apps/web-ele/src/views/mall/product/spu/components/product-property-add-form.vue b/apps/web-ele/src/views/mall/product/spu/components/product-property-add-form.vue
deleted file mode 100644
index 48189d5c3..000000000
--- a/apps/web-ele/src/views/mall/product/spu/components/product-property-add-form.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<script lang="ts" setup>
-import type { PropType } from 'vue';
-
-import type { MallPropertyApi } from '#/api/mall/product/property';
-
-import { ref, watch } from 'vue';
-
-import { useVbenModal } from '@vben/common-ui';
-
-import { ElMessage } from 'element-plus';
-
-import { useVbenForm } from '#/adapter/form';
-import { getPropertySimpleList } from '#/api/mall/product/property';
-import * as PropertyApi from '#/api/mall/product/property';
-import { $t } from '#/locales';
-
-// 扩展Property接口，添加values属性
-interface ExtendedProperty extends MallPropertyApi.Property {
-  values?: any[];
-}
-
-// 商品属性名称下拉框
-
-const props = defineProps({
-  propertyList: {
-    type: Array as PropType<ExtendedProperty[]>,
-    default: () => [],
-  },
-});
-
-const emit = defineEmits(['success']);
-
-const attributeList = ref<ExtendedProperty[]>([]); // 商品属性列表
-const attributeOptions = ref([] as MallPropertyApi.Property[]);
-const [Form, formApi] = useVbenForm({
-  commonConfig: {
-    componentProps: {
-      class: 'w-full',
-    },
-    formItemClass: 'col-span-2',
-    labelWidth: 120,
-  },
-  layout: 'horizontal',
-  schema: [
-    {
-      fieldName: 'name',
-      label: '属性名称',
-      component: 'ApiSelect',
-      componentProps: {
-        api: getPropertySimpleList,
-        labelField: 'name',
-        valueField: 'id',
-        defaultFirstOption: true,
-        filterable: true,
-        allowCreate: true,
-        placeholder: '请选择属性名称。如果不存在，可手动输入选择',
-      },
-    },
-  ],
-  showDefaultActions: false,
-});
-
-const [Modal, modalApi] = useVbenModal({
-  async onConfirm() {
-    modalApi.lock();
-    const { name } = await formApi.getValues();
-    // 1.1 重复添加校验
-    for (const attrItem of attributeList.value) {
-      if (attrItem.name === name) {
-        return ElMessage.error('该属性已存在，请勿重复添加');
-      }
-    }
-    // 1.2 校验表单
-    const { valid } = await formApi.validate();
-    if (!valid) {
-      return;
-    }
-
-    // 2.1 情况一：属性名已存在，则直接使用并结束
-    const existProperty = attributeOptions.value.find(
-      (item) => item.name === name,
-    );
-    if (existProperty) {
-      // 添加到属性列表
-      attributeList.value.push({
-        id: existProperty.id,
-        ...(await formApi.getValues()),
-        values: [],
-      });
-      // 关闭弹窗
-      modalApi.close();
-      return;
-    }
-
-    // 2.2 情况二：如果是不存在的属性，则需要执行新增
-    // 提交请求
-    modalApi.lock();
-    try {
-      const data = (await formApi.getValues()) as MallPropertyApi.Property;
-      const propertyId = await PropertyApi.createProperty(data);
-      // 添加到属性列表
-      attributeList.value.push({
-        id: propertyId,
-        ...(await formApi.getValues()),
-        values: [],
-      });
-      // 关闭弹窗
-      ElMessage.success($t('common.createSuccess'));
-      modalApi.close();
-    } finally {
-      modalApi.unlock();
-    }
-  },
-});
-
-watch(
-  () => props.propertyList, // 解决 props 无法直接修改父组件的问题
-  (data) => {
-    if (!data) return;
-    attributeList.value = data;
-  },
-  {
-    deep: true,
-    immediate: true,
-  },
-);
-</script>
-
-<template>
-  <Modal class="w-2/5" title="添加商品属性">
-    <Form class="mx-4" />
-  </Modal>
-</template>
diff --git a/apps/web-ele/src/views/mall/product/spu/components/sku-form.vue b/apps/web-ele/src/views/mall/product/spu/components/sku-form.vue
deleted file mode 100644
index d1ef88718..000000000
--- a/apps/web-ele/src/views/mall/product/spu/components/sku-form.vue
+++ /dev/null
@@ -1,248 +0,0 @@
-<script lang="ts" setup>
-import { ref, watch } from 'vue';
-
-import { Page, useVbenModal } from '@vben/common-ui';
-
-import { ElMessage, ElSpace } from 'element-plus';
-
-import { useVbenForm } from '#/adapter/form';
-
-import { getPropertyList } from './data';
-import ProductAttributes from './product-attributes.vue';
-import ProductPropertyAddForm from './product-property-add-form.vue';
-import SkuList from './sku-list.vue';
-
-const props = defineProps<{
-  propFormData: Object;
-}>();
-
-const emit = defineEmits(['update:activeName']);
-
-interface PropertyAndValues {
-  id: number;
-  name: string;
-  values?: PropertyAndValues[];
-}
-
-interface RuleConfig {
-  // 需要校验的字段
-  // 例：name: 'name' 则表示校验 sku.name 的值
-  // 例：name: 'productConfig.stock' 则表示校验 sku.productConfig.name 的值,此处 productConfig 表示我在 Sku 上扩展的属性
-  name: string;
-  // 校验规格为一个毁掉函数，其中 arg 为需要校验的字段的值。
-  // 例：需要校验价格必须大于0.01
-  // {
-  //  name:'price',
-  //  rule:(arg: number) => arg > 0.01
-  // }
-  rule: (arg: any) => boolean;
-  // 校验不通过时的消息提示
-  message: string;
-}
-
-const propertyList = ref<PropertyAndValues[]>([]); // 商品属性列表
-
-// sku 相关属性校验规则
-const ruleConfig: RuleConfig[] = [
-  {
-    name: 'stock',
-    rule: (arg) => arg >= 0,
-    message: '商品库存必须大于等于 1 ！！！',
-  },
-  {
-    name: 'price',
-    rule: (arg) => arg >= 0.01,
-    message: '商品销售价格必须大于等于 0.01 元！！！',
-  },
-  {
-    name: 'marketPrice',
-    rule: (arg) => arg >= 0.01,
-    message: '商品市场价格必须大于等于 0.01 元！！！',
-  },
-  {
-    name: 'costPrice',
-    rule: (arg) => arg >= 0.01,
-    message: '商品成本价格必须大于等于 0.00 元！！！',
-  },
-];
-
-/** 将传进来的值赋值给 formData */
-watch(
-  () => props.propFormData,
-  (data) => {
-    if (!data) {
-      return;
-    }
-    formApi.setValues(data);
-  },
-);
-
-const validate = async () => {
-  const { valid } = await formApi.validate();
-  if (!valid) {
-    return;
-  }
-  try {
-    // 校验通过更新数据
-    Object.assign(props.propFormData, formApi.getValues());
-  } catch (error) {
-    ElMessage.error('【库存价格】不完善，请填写相关信息');
-    emit('update:activeName', 'sku');
-    throw error; // 目的截断之后的校验
-  }
-};
-defineExpose({ validate });
-
-const [Form, formApi] = useVbenForm({
-  commonConfig: {
-    componentProps: {
-      class: '!w-1/6',
-    },
-    formItemClass: 'col-span-2',
-    labelWidth: 120,
-  },
-  layout: 'horizontal',
-  schema: [
-    {
-      fieldName: 'subCommissionType',
-      label: '分销类型',
-      component: 'RadioGroup',
-      componentProps: {
-        options: [
-          {
-            label: '默认设置',
-            value: false,
-          },
-          {
-            label: '单独设置',
-            value: true,
-          },
-        ],
-      },
-      defaultValue: false,
-      rules: 'required',
-    },
-    {
-      fieldName: 'specType',
-      label: '商品规格',
-      component: 'RadioGroup',
-      componentProps: {
-        options: [
-          {
-            label: '单规格',
-            value: false,
-          },
-          {
-            label: '多规格',
-            value: true,
-          },
-        ],
-      },
-      defaultValue: false,
-      rules: 'required',
-    },
-    {
-      fieldName: 'skuList',
-      component: 'Input',
-      dependencies: {
-        triggerFields: ['specType'],
-        show: (values) => !values.specType,
-      },
-    },
-    {
-      fieldName: 'specTypeItem',
-      label: '商品属性',
-      component: 'Input',
-      dependencies: {
-        triggerFields: ['specType'],
-        show: (values) => values.specType,
-      },
-    },
-    {
-      fieldName: 'batchSettings',
-      label: '批量设置',
-      component: 'Input',
-      dependencies: {
-        triggerFields: ['specType'],
-        show: (values) => values.specType && propertyList.value.length > 0,
-      },
-    },
-    {
-      fieldName: 'specTypeItemList',
-      label: '规格列表',
-      component: 'Input',
-      dependencies: {
-        triggerFields: ['specType'],
-        show: (values) => values.specType && propertyList.value.length > 0,
-      },
-    },
-  ],
-  showDefaultActions: false,
-});
-
-const [ProductPropertyAddFormModal, productPropertyAddFormApi] = useVbenModal({
-  connectedComponent: ProductPropertyAddForm,
-  destroyOnClose: true,
-});
-
-/** 调用 SkuList generateTableData 方法*/
-const skuListRef = ref();
-const generateSkus = (propertyList: any[]) => {
-  skuListRef.value.generateTableData(propertyList);
-};
-
-/** 将传进来的值赋值给 formData */
-watch(
-  () => props.propFormData,
-  (data) => {
-    if (!data) {
-      return;
-    }
-    // 将 SKU 的属性，整理成 PropertyAndValues 数组
-    propertyList.value = getPropertyList(data);
-  },
-  {
-    immediate: true,
-  },
-);
-</script>
-<template>
-  <Page :auto-content-height="true">
-    <Form>
-      <template #skuList>
-        <SkuList
-          ref="skuListRef"
-          :prop-form-data="props.propFormData"
-          :property-list="propertyList"
-          :rule-config="ruleConfig"
-        />
-      </template>
-      <template #specTypeItem>
-        <ElSpace direction="vertical" alignment="flex-start">
-          <ElButton type="primary" @click="productPropertyAddFormApi.open()">
-            添加属性
-          </ElButton>
-          <ProductAttributes
-            :property-list="propertyList"
-            @success="generateSkus"
-          />
-        </ElSpace>
-      </template>
-      <template #batchSettings>
-        <SkuList
-          :is-batch="true"
-          :prop-form-data="props.propFormData"
-          :property-list="propertyList"
-        />
-      </template>
-      <template #specTypeItemList>
-        <SkuList
-          :prop-form-data="props.propFormData"
-          :property-list="propertyList"
-          :rule-config="ruleConfig"
-        />
-      </template>
-    </Form>
-    <ProductPropertyAddFormModal :property-list="propertyList" />
-  </Page>
-</template>
diff --git a/apps/web-ele/src/views/mall/product/spu/components/sku-list.vue b/apps/web-ele/src/views/mall/product/spu/components/sku-list.vue
deleted file mode 100644
index 49f788027..000000000
--- a/apps/web-ele/src/views/mall/product/spu/components/sku-list.vue
+++ /dev/null
@@ -1,533 +0,0 @@
-<script lang="ts" setup>
-import type { PropType } from 'vue';
-
-import type { PropertyAndValues, RuleConfig } from './model';
-
-import type { MallSpuApi } from '#/api/mall/product/spu';
-
-import { ref, watch } from 'vue';
-
-import { formatToFraction, isEmpty } from '@vben/utils';
-
-import { ElInput, ElMessage, ElTable } from 'element-plus';
-
-import UploadImg from '#/components/upload/image-upload.vue';
-import { copyValueToTarget } from '#/utils';
-
-defineOptions({ name: 'SkuList' });
-
-const props = defineProps({
-  propFormData: {
-    type: Object as PropType<MallSpuApi.Spu>,
-    default: () => ({}),
-  },
-  propertyList: {
-    type: Array as PropType<PropertyAndValues[]>,
-    default: () => [],
-  },
-  ruleConfig: {
-    type: Array as PropType<RuleConfig[]>,
-    default: () => [],
-  },
-  isBatch: {
-    type: Boolean,
-    default: false,
-  }, // 是否作为批量操作组件
-  isComponent: {
-    type: Boolean,
-    default: false,
-  }, // 是否作为组件
-  isActivityComponent: {
-    type: Boolean,
-    default: false,
-  }, // 是否作为活动组件
-});
-
-const emit = defineEmits<{
-  (e: 'selectionChange', value: MallSpuApi.Sku[]): void;
-}>();
-const formData = ref<MallSpuApi.Spu>(); // 表单数据
-const skuList = ref<MallSpuApi.Sku[]>([
-  {
-    price: 0, // 商品价格
-    marketPrice: 0, // 市场价
-    costPrice: 0, // 成本价
-    barCode: '', // 商品条码
-    picUrl: '', // 图片地址
-    stock: 0, // 库存
-    weight: 0, // 商品重量
-    volume: 0, // 商品体积
-    firstBrokeragePrice: 0, // 一级分销的佣金
-    secondBrokeragePrice: 0, // 二级分销的佣金
-  },
-]); // 批量添加时的临时数据
-
-/** 批量添加 */
-const batchAdd = () => {
-  validateProperty();
-  formData.value!.skus!.forEach((item: MallSpuApi.Sku) => {
-    copyValueToTarget(item, skuList.value[0]);
-  });
-};
-/** 校验商品属性属性值 */
-const validateProperty = () => {
-  // 校验商品属性属性值是否为空，有一个为空都不给过
-  const warningInfo = '存在属性属性值为空，请先检查完善属性值后重试！！！';
-  for (const item of props.propertyList) {
-    if (!item.values || isEmpty(item.values)) {
-      ElMessage.warning(warningInfo);
-      throw new Error(warningInfo);
-    }
-  }
-};
-/** 删除 sku */
-const deleteSku = (row: MallSpuApi.Sku) => {
-  const index = formData.value!.skus!.findIndex(
-    // 直接把列表转成字符串比较
-    (sku: MallSpuApi.Sku) =>
-      JSON.stringify(sku.properties) === JSON.stringify(row.properties),
-  );
-  formData.value!.skus!.splice(index, 1);
-};
-const tableHeaders = ref<{ label: string; prop: string }[]>([]); // 多属性表头
-/**
- * 保存时，每个商品规格的表单要校验下。例如说，销售金额最低是 0.01 这种。
- */
-const validateSku = () => {
-  validateProperty();
-  let warningInfo = '请检查商品各行相关属性配置，';
-  let validate = true; // 默认通过
-  for (const sku of formData.value!.skus!) {
-    // 作为活动组件的校验
-    for (const rule of props?.ruleConfig) {
-      const arg = getValue(sku, rule.name);
-      if (!rule.rule(arg)) {
-        validate = false; // 只要有一个不通过则直接不通过
-        warningInfo += rule.message;
-        break;
-      }
-    }
-    // 只要有一个不通过则结束后续的校验
-    if (!validate) {
-      ElMessage.warning(warningInfo);
-      throw new Error(warningInfo);
-    }
-  }
-};
-const getValue = (obj: any, arg: string) => {
-  const keys = arg.split('.');
-  let value = obj;
-  for (const key of keys) {
-    if (value && typeof value === 'object' && key in value) {
-      value = value[key];
-    } else {
-      value = undefined;
-      break;
-    }
-  }
-  return value;
-};
-
-/**
- * 选择时触发
- * @param Sku 传递过来的选中的 sku 是一个数组
- */
-const handleSelectionChange = (val: MallSpuApi.Sku[]) => {
-  emit('selectionChange', val);
-};
-
-/**
- * 将传进来的值赋值给 skuList
- */
-watch(
-  () => props.propFormData,
-  (data) => {
-    if (!data) return;
-    formData.value = data;
-  },
-  {
-    deep: true,
-    immediate: true,
-  },
-);
-
-/** 生成表数据 */
-const generateTableData = (propertyList: any[]) => {
-  // 构建数据结构
-  const propertyValues = propertyList.map((item) =>
-    item.values.map((v: any) => ({
-      propertyId: item.id,
-      propertyName: item.name,
-      valueId: v.id,
-      valueName: v.name,
-    })),
-  );
-  const buildSkuList = build(propertyValues);
-  // 如果回显的 sku 属性和添加的属性不一致则重置 skus 列表
-  if (!validateData(propertyList)) {
-    // 如果不一致则重置表数据，默认添加新的属性重新生成 sku 列表
-    formData.value!.skus = [];
-  }
-  if (buildSkuList && buildSkuList.length > 0) {
-    for (const item of buildSkuList) {
-      const row = {
-        properties: Array.isArray(item) ? item : [item], // 如果只有一个属性的话返回的是一个 property 对象
-        price: 0,
-        marketPrice: 0,
-        costPrice: 0,
-        barCode: '',
-        picUrl: '',
-        stock: 0,
-        weight: 0,
-        volume: 0,
-        firstBrokeragePrice: 0,
-        secondBrokeragePrice: 0,
-      };
-      // 如果存在属性相同的 sku 则不做处理
-      const index = formData.value!.skus!.findIndex(
-        (sku: MallSpuApi.Sku) =>
-          JSON.stringify(sku.properties) === JSON.stringify(row.properties),
-      );
-      if (index !== -1) {
-        continue;
-      }
-      formData.value!.skus!.push(row);
-    }
-  }
-};
-
-/**
- * 生成 skus 前置校验
- */
-const validateData = (propertyList: any[]) => {
-  const skuPropertyIds: number[] = [];
-  formData.value!.skus!.forEach((sku: MallSpuApi.Sku) =>
-    sku.properties
-      ?.map((property: any) => property.propertyId)
-      ?.forEach((propertyId: number) => {
-        if (!skuPropertyIds.includes(propertyId!)) {
-          skuPropertyIds.push(propertyId!);
-        }
-      }),
-  );
-  const propertyIds = propertyList.map((item) => item.id);
-  return skuPropertyIds.length === propertyIds.length;
-};
-
-/** 构建所有排列组合 */
-const build = (
-  propertyValuesList: MallSpuApi.Property[][],
-): MallSpuApi.Property[] | MallSpuApi.Property[][] => {
-  if (!propertyValuesList || propertyValuesList.length === 0) {
-    return [];
-  } else if (propertyValuesList.length === 1) {
-    return propertyValuesList[0] || [];
-  } else {
-    const result: MallSpuApi.Property[][] = [];
-    const rest = build(propertyValuesList.slice(1));
-    if (propertyValuesList[0] && Array.isArray(rest)) {
-      for (let i = 0; i < propertyValuesList[0].length; i++) {
-        for (const restItem of rest) {
-          const currentItem = propertyValuesList[0][i];
-          // 第一次不是数组结构，后面的都是数组结构
-          if (Array.isArray(restItem)) {
-            result.push([currentItem!, ...restItem]);
-          } else if (restItem) {
-            // 确保restItem不是undefined，并进行类型断言
-            result.push([currentItem!, restItem as MallSpuApi.Property]);
-          }
-        }
-      }
-    }
-    return result;
-  }
-};
-
-/** 监听属性列表，生成相关参数和表头 */
-watch(
-  () => props.propertyList,
-  (propertyList: PropertyAndValues[]) => {
-    // 如果不是多规格则结束
-    if (!formData.value!.specType) {
-      return;
-    }
-    // 如果当前组件作为批量添加数据使用，则重置表数据
-    if (props.isBatch) {
-      skuList.value = [
-        {
-          price: 0,
-          marketPrice: 0,
-          costPrice: 0,
-          barCode: '',
-          picUrl: '',
-          stock: 0,
-          weight: 0,
-          volume: 0,
-          firstBrokeragePrice: 0,
-          secondBrokeragePrice: 0,
-        },
-      ];
-    }
-
-    // 判断代理对象是否为空
-    if (JSON.stringify(propertyList) === '[]') {
-      return;
-    }
-    // 重置表头
-    tableHeaders.value = [];
-    // 生成表头
-    propertyList.forEach((item, index) => {
-      // name加属性项index区分属性值
-      tableHeaders.value.push({ prop: `name${index}`, label: item.name });
-    });
-    // 如果回显的 sku 属性和添加的属性一致则不处理
-    if (validateData(propertyList)) {
-      return;
-    }
-    // 添加新属性没有属性值也不做处理
-    if (propertyList.some((item) => !item.values || isEmpty(item.values))) {
-      return;
-    }
-    // 生成 table 数据，即 sku 列表
-    generateTableData(propertyList);
-  },
-  {
-    deep: true,
-    immediate: true,
-  },
-);
-const activitySkuListRef = ref<InstanceType<typeof ElTable>>();
-
-const getSkuTableRef = () => {
-  return activitySkuListRef.value;
-};
-// 暴露出生成 sku 方法，给添加属性成功时调用
-defineExpose({ generateTableData, validateSku, getSkuTableRef });
-</script>
-<template>
-  <!-- 情况一：添加/修改 -->
-  <ElTable
-    v-if="!isActivityComponent"
-    :data="isBatch ? skuList : formData!.skus!"
-    border
-    class="tabNumWidth"
-    max-height="500"
-    size="small"
-  >
-    <el-table-column align="center" label="图片" min-width="120">
-      <template #default="{ row }">
-        <UploadImg
-          v-model="row.picUrl"
-          height="50px"
-          width="50px"
-          :show-description="false"
-        />
-      </template>
-    </el-table-column>
-    <template v-if="formData!.specType && !isBatch">
-      <!--  根据商品属性动态添加 -->
-      <el-table-column
-        v-for="(item, index) in tableHeaders"
-        :key="index"
-        :label="item.label"
-        align="center"
-        min-width="120"
-      >
-        <template #default="{ row }">
-          <span style="font-weight: bold; color: #40aaff">
-            {{ row.properties?.[index]?.valueName }}
-          </span>
-        </template>
-      </el-table-column>
-    </template>
-    <el-table-column align="center" label="商品条码" min-width="168">
-      <template #default="{ row }">
-        <ElInput v-model="row.barCode" class="w-100%" />
-      </template>
-    </el-table-column>
-    <el-table-column align="center" label="销售价" min-width="168">
-      <template #default="{ row }">
-        <el-input-number
-          v-model="row.price"
-          :min="0"
-          :precision="2"
-          :step="0.1"
-          class="w-100%"
-          controls-position="right"
-        />
-      </template>
-    </el-table-column>
-    <el-table-column align="center" label="市场价" min-width="168">
-      <template #default="{ row }">
-        <el-input-number
-          v-model="row.marketPrice"
-          :min="0"
-          :precision="2"
-          :step="0.1"
-          class="w-100%"
-          controls-position="right"
-        />
-      </template>
-    </el-table-column>
-    <el-table-column align="center" label="成本价" min-width="168">
-      <template #default="{ row }">
-        <el-input-number
-          v-model="row.costPrice"
-          :min="0"
-          :precision="2"
-          :step="0.1"
-          class="w-100%"
-          controls-position="right"
-        />
-      </template>
-    </el-table-column>
-    <el-table-column align="center" label="库存" min-width="168">
-      <template #default="{ row }">
-        <el-input-number
-          v-model="row.stock"
-          :min="0"
-          class="w-100%"
-          controls-position="right"
-        />
-      </template>
-    </el-table-column>
-    <el-table-column align="center" label="重量(kg)" min-width="168">
-      <template #default="{ row }">
-        <el-input-number
-          v-model="row.weight"
-          :min="0"
-          :precision="2"
-          :step="0.1"
-          class="w-100%"
-          controls-position="right"
-        />
-      </template>
-    </el-table-column>
-    <el-table-column align="center" label="体积(m^3)" min-width="168">
-      <template #default="{ row }">
-        <el-input-number
-          v-model="row.volume"
-          :min="0"
-          :precision="2"
-          :step="0.1"
-          class="w-100%"
-          controls-position="right"
-        />
-      </template>
-    </el-table-column>
-    <template v-if="formData!.subCommissionType">
-      <el-table-column align="center" label="一级返佣(元)" min-width="168">
-        <template #default="{ row }">
-          <el-input-number
-            v-model="row.firstBrokeragePrice"
-            :min="0"
-            :precision="2"
-            :step="0.1"
-            class="w-100%"
-            controls-position="right"
-          />
-        </template>
-      </el-table-column>
-      <el-table-column align="center" label="二级返佣(元)" min-width="168">
-        <template #default="{ row }">
-          <el-input-number
-            v-model="row.secondBrokeragePrice"
-            :min="0"
-            :precision="2"
-            :step="0.1"
-            class="w-100%"
-            controls-position="right"
-          />
-        </template>
-      </el-table-column>
-    </template>
-    <el-table-column
-      v-if="formData?.specType"
-      align="center"
-      fixed="right"
-      label="操作"
-      width="80"
-    >
-      <template #default="{ row }">
-        <el-button
-          v-if="isBatch"
-          link
-          size="small"
-          type="primary"
-          @click="batchAdd"
-        >
-          批量添加
-        </el-button>
-        <el-button
-          v-else
-          link
-          size="small"
-          type="primary"
-          @click="deleteSku(row)"
-        >
-          删除
-        </el-button>
-      </template>
-    </el-table-column>
-  </ElTable>
-
-  <!-- 情况二：作为活动组件 -->
-  <ElTable
-    v-if="isActivityComponent"
-    :data="formData!.skus!"
-    border
-    max-height="500"
-    size="small"
-    style="width: 99%"
-  >
-    <el-table-column v-if="isComponent" type="selection" width="45" />
-    <el-table-column align="center" label="图片" min-width="80">
-      <template #default="{ row }">
-        <el-image :src="row.picUrl" class="h-60px w-60px" />
-      </template>
-    </el-table-column>
-    <template v-if="formData!.specType">
-      <!--  根据商品属性动态添加 -->
-      <el-table-column
-        v-for="(item, index) in tableHeaders"
-        :key="index"
-        :label="item.label"
-        align="center"
-        min-width="80"
-      >
-        <template #default="{ row }">
-          <span style="font-weight: bold; color: #40aaff">
-            {{ row.properties?.[index]?.valueName }}
-          </span>
-        </template>
-      </el-table-column>
-    </template>
-    <el-table-column align="center" label="商品条码" min-width="100">
-      <template #default="{ row }">
-        {{ row.barCode }}
-      </template>
-    </el-table-column>
-    <el-table-column align="center" label="销售价(元)" min-width="80">
-      <template #default="{ row }">
-        {{ formatToFraction(row.price) }}
-      </template>
-    </el-table-column>
-    <el-table-column align="center" label="市场价(元)" min-width="80">
-      <template #default="{ row }">
-        {{ formatToFraction(row.marketPrice) }}
-      </template>
-    </el-table-column>
-    <el-table-column align="center" label="成本价(元)" min-width="80">
-      <template #default="{ row }">
-        {{ formatToFraction(row.costPrice) }}
-      </template>
-    </el-table-column>
-    <el-table-column align="center" label="库存" min-width="80">
-      <template #default="{ row }">
-        {{ row.stock }}
-      </template>
-    </el-table-column>
-    <!--  方便扩展每个活动配置的属性不一样  -->
-    <slot name="extension"></slot>
-  </ElTable>
-</template>
diff --git a/apps/web-ele/src/views/mall/product/spu/components/spu-showcase.vue b/apps/web-ele/src/views/mall/product/spu/components/spu-showcase.vue
deleted file mode 100644
index 661136a51..000000000
--- a/apps/web-ele/src/views/mall/product/spu/components/spu-showcase.vue
+++ /dev/null
@@ -1,166 +0,0 @@
-<script lang="ts" setup>
-import type { MallSpuApi } from '#/api/mall/product/spu';
-
-import { computed, ref, watch } from 'vue';
-
-import { IconifyIcon } from '@vben/icons';
-
-import { ElImage, ElTooltip } from 'element-plus';
-
-import * as ProductSpuApi from '#/api/mall/product/spu';
-import SpuTableSelect from '#/views/mall/product/spu/components/spu-table-select.vue';
-
-// 商品橱窗，一般用于与商品建立关系时使用
-// 提供功能：展示商品列表、添加商品、移除商品
-defineOptions({ name: 'SpuShowcase' });
-
-const props = defineProps({
-  modelValue: {
-    type: [Number, Array],
-    required: true,
-  },
-  // 限制数量：默认不限制
-  limit: {
-    type: Number,
-    default: Number.MAX_VALUE,
-  },
-  disabled: Boolean,
-});
-
-const emit = defineEmits(['update:modelValue', 'change']);
-
-// 计算是否可以添加
-const canAdd = computed(() => {
-  // 情况一：禁用时不可以添加
-  if (props.disabled) return false;
-  // 情况二：未指定限制数量时，可以添加
-  if (!props.limit) return true;
-  // 情况三：检查已添加数量是否小于限制数量
-  return productSpus.value.length < props.limit;
-});
-
-// 商品列表
-const productSpus = ref<MallSpuApi.Spu[]>([]);
-
-watch(
-  () => props.modelValue,
-  async () => {
-    let ids: number[] = [];
-    if (Array.isArray(props.modelValue)) {
-      ids = props.modelValue as number[];
-    } else {
-      ids = props.modelValue ? [props.modelValue] : [];
-    }
-    // 不需要返显
-    if (ids.length === 0) {
-      productSpus.value = [];
-      return;
-    }
-    // 只有商品发生变化之后，才去查询商品
-    if (
-      productSpus.value.length === 0 ||
-      productSpus.value.some((spu) => !ids.includes(spu.id!))
-    ) {
-      productSpus.value = await ProductSpuApi.getSpuDetailList(ids);
-    }
-  },
-  { immediate: true },
-);
-
-/** 商品表格选择对话框 */
-const spuTableSelectRef = ref();
-// 打开对话框
-const openSpuTableSelect = () => {
-  spuTableSelectRef.value.open(productSpus.value);
-};
-
-/**
- * 选择商品后触发
- *
- * @param spus 选中的商品列表
- */
-const handleSpuSelected = (spus: MallSpuApi.Spu | MallSpuApi.Spu[]) => {
-  productSpus.value = Array.isArray(spus) ? spus : [spus];
-  emitSpuChange();
-};
-
-/**
- * 删除商品
- *
- * @param index 商品索引
- */
-const handleRemoveSpu = (index: number) => {
-  productSpus.value.splice(index, 1);
-  emitSpuChange();
-};
-const emitSpuChange = () => {
-  if (props.limit === 1) {
-    const spu = productSpus.value.length > 0 ? productSpus.value[0] : null;
-    emit('update:modelValue', spu?.id || 0);
-    emit('change', spu);
-  } else {
-    emit(
-      'update:modelValue',
-      productSpus.value.map((spu) => spu.id),
-    );
-    emit('change', productSpus.value);
-  }
-};
-</script>
-<template>
-  <div class="gap-8px flex flex-wrap items-center">
-    <div
-      v-for="(spu, index) in productSpus"
-      :key="spu.id"
-      class="select-box spu-pic"
-    >
-      <ElTooltip :content="spu.name">
-        <div class="relative h-full w-full">
-          <ElImage :src="spu.picUrl" class="h-full w-full" />
-          <IconifyIcon
-            v-show="!disabled"
-            class="del-icon"
-            icon="ep:circle-close-filled"
-            @click="handleRemoveSpu(index)"
-          />
-        </div>
-      </ElTooltip>
-    </div>
-    <ElTooltip content="选择商品" v-if="canAdd">
-      <div class="select-box" @click="openSpuTableSelect">
-        <IconifyIcon icon="ep:plus" />
-      </div>
-    </ElTooltip>
-  </div>
-  <!-- 商品选择对话框（表格形式） -->
-  <SpuTableSelect
-    ref="spuTableSelectRef"
-    :multiple="limit !== 1"
-    @change="handleSpuSelected"
-  />
-</template>
-
-<style lang="scss" scoped>
-.select-box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 60px;
-  height: 60px;
-  border: 1px dashed var(--el-border-color-darker);
-  border-radius: 8px;
-}
-
-.spu-pic {
-  position: relative;
-}
-
-.del-icon {
-  position: absolute;
-  top: -10px;
-  right: -10px;
-  z-index: 1;
-  width: 20px !important;
-  height: 20px !important;
-}
-</style>
diff --git a/apps/web-ele/src/views/mall/product/spu/components/spu-table-select.vue b/apps/web-ele/src/views/mall/product/spu/components/spu-table-select.vue
deleted file mode 100644
index 960302c1e..000000000
--- a/apps/web-ele/src/views/mall/product/spu/components/spu-table-select.vue
+++ /dev/null
@@ -1,359 +0,0 @@
-<script lang="ts" setup>
-import type { MallCategoryApi } from '#/api/mall/product/category';
-import type { MallSpuApi } from '#/api/mall/product/spu';
-
-import { onMounted, ref } from 'vue';
-
-import { ContentWrap } from '@vben/common-ui';
-import { handleTree } from '@vben/utils';
-
-import {
-  CHANGE_EVENT,
-  ElButton,
-  ElCheckbox,
-  ElDatePicker,
-  ElDialog,
-  ElForm,
-  ElFormItem,
-  ElImage,
-  ElInput,
-  ElRadio,
-  ElTable,
-  ElTableColumn,
-  ElTreeSelect,
-} from 'element-plus';
-
-import * as ProductCategoryApi from '#/api/mall/product/category';
-import * as ProductSpuApi from '#/api/mall/product/spu';
-/**
- * 商品表格选择对话框
- * 1. 单选模式：
- *    1.1 点击表格左侧的单选框时，结束选择，并关闭对话框
- *    1.2 再次打开时，保持选中状态
- * 2. 多选模式：
- *    2.1 点击表格左侧的多选框时，记录选中的商品
- *    2.2 切换分页时，保持商品的选中的状态
- *    2.3 点击右下角的确定按钮时，结束选择，关闭对话框
- *    2.4 再次打开时，保持选中状态
- */
-defineOptions({ name: 'SpuTableSelect' });
-
-defineProps({
-  // 多选模式
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-/** 确认选择时的触发事件 */
-const emits = defineEmits<{
-  change: [spu: any | MallSpuApi.Spu | MallSpuApi.Spu[]];
-}>();
-// 列表的总页数
-const total = ref(0);
-// 列表的数据
-const list = ref<MallSpuApi.Spu[]>([]);
-// 列表的加载中
-const loading = ref(false);
-// 弹窗的是否展示
-const dialogVisible = ref(false);
-// 查询参数
-const queryParams = ref({
-  pageNo: 1,
-  pageSize: 10,
-  // 默认获取上架的商品
-  tabType: 0,
-  name: '',
-  categoryId: null,
-  createTime: [],
-});
-
-/** 打开弹窗 */
-const open = (spuList?: MallSpuApi.Spu[]) => {
-  // 重置
-  checkedSpus.value = [];
-  checkedStatus.value = {};
-  isCheckAll.value = false;
-  isIndeterminate.value = false;
-
-  // 处理已选中
-  if (spuList && spuList.length > 0) {
-    checkedSpus.value = [...spuList];
-    checkedStatus.value = Object.fromEntries(
-      spuList.map((spu) => [spu.id, true]),
-    );
-  }
-
-  dialogVisible.value = true;
-  resetQuery();
-};
-// 提供 open 方法，用于打开弹窗
-defineExpose({ open });
-
-/** 查询列表 */
-const getList = async () => {
-  loading.value = true;
-  try {
-    const data = await ProductSpuApi.getSpuPage(queryParams.value);
-    list.value = data.list;
-    total.value = data.total;
-    // checkbox绑定undefined会有问题，需要给一个bool值
-    list.value.forEach(
-      (spu) =>
-        (checkedStatus.value[spu.id || 0] =
-          checkedStatus.value[spu.id || 0] || false),
-    );
-    // 计算全选框状态
-    calculateIsCheckAll();
-  } finally {
-    loading.value = false;
-  }
-};
-
-/** 搜索按钮操作 */
-const handleQuery = () => {
-  queryParams.value.pageNo = 1;
-  getList();
-};
-
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryParams.value = {
-    pageNo: 1,
-    pageSize: 10,
-    // 默认获取上架的商品
-    tabType: 0,
-    name: '',
-    categoryId: null,
-    createTime: [],
-  };
-  getList();
-};
-
-// 是否全选
-const isCheckAll = ref(false);
-// 全选框是否处于中间状态：不是全部选中 && 任意一个选中
-const isIndeterminate = ref(false);
-// 选中的商品
-const checkedSpus = ref<MallSpuApi.Spu[]>([]);
-// 选中状态：key为商品ID，value为是否选中
-const checkedStatus = ref<Record<string, boolean>>({});
-
-// 选中的商品 spuId
-const selectedSpuId = ref();
-/** 单选中时触发 */
-const handleSingleSelected = (spu: MallSpuApi.Spu) => {
-  emits(CHANGE_EVENT, spu);
-  // 关闭弹窗
-  dialogVisible.value = false;
-  // 记住上次选择的ID
-  selectedSpuId.value = spu.id;
-};
-
-/** 多选完成 */
-const handleEmitChange = () => {
-  // 关闭弹窗
-  dialogVisible.value = false;
-  emits(CHANGE_EVENT, [...checkedSpus.value]);
-};
-
-/** 全选/全不选 */
-const handleCheckAll = (checked: boolean) => {
-  isCheckAll.value = checked;
-  isIndeterminate.value = false;
-
-  list.value.forEach((spu) => handleCheckOne(checked, spu, false));
-};
-
-/**
- * 选中一行
- * @param checked 是否选中
- * @param spu 商品
- * @param isCalcCheckAll 是否计算全选
- */
-const handleCheckOne = (
-  checked: boolean,
-  spu: MallSpuApi.Spu,
-  isCalcCheckAll: boolean,
-) => {
-  if (checked) {
-    checkedSpus.value.push(spu);
-    checkedStatus.value[spu.id || 0] = true;
-  } else {
-    const index = findCheckedIndex(spu);
-    if (index > -1) {
-      checkedSpus.value.splice(index, 1);
-      checkedStatus.value[spu.id || 0] = false;
-      isCheckAll.value = false;
-    }
-  }
-
-  // 计算全选框状态
-  if (isCalcCheckAll) {
-    calculateIsCheckAll();
-  }
-};
-
-// 查找商品在已选中商品列表中的索引
-const findCheckedIndex = (spu: MallSpuApi.Spu) =>
-  checkedSpus.value.findIndex((item) => item.id === spu.id);
-
-// 计算全选框状态
-const calculateIsCheckAll = () => {
-  isCheckAll.value = list.value.every(
-    (spu) => checkedStatus.value[spu.id || 0],
-  );
-  // 计算中间状态：不是全部选中 && 任意一个选中
-  isIndeterminate.value =
-    !isCheckAll.value &&
-    list.value.some((spu) => checkedStatus.value[spu.id || 0]);
-};
-
-// 分类列表
-const categoryList = ref<MallCategoryApi.Category[]>();
-// 分类树
-const categoryTreeList = ref();
-/** 初始化 */
-onMounted(async () => {
-  await getList();
-  // 获得分类树
-  categoryList.value = await ProductCategoryApi.getCategoryList({});
-  categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId');
-});
-</script>
-
-<template>
-  <ElDialog
-    v-model="dialogVisible"
-    :append-to-body="true"
-    title="选择商品"
-    width="70%"
-  >
-    <ContentWrap>
-      <ElForm
-        :inline="true"
-        :model="queryParams"
-        class="-mb-15px"
-        label-width="68px"
-      >
-        <ElFormItem label="商品名称" prop="name">
-          <ElInput
-            v-model="queryParams.name"
-            class="!w-240px"
-            clearable
-            placeholder="请输入商品名称"
-            @keyup.enter="handleQuery"
-          />
-        </ElFormItem>
-        <ElFormItem label="商品分类" prop="categoryId">
-          <ElTreeSelect
-            v-model="queryParams.categoryId"
-            :data="categoryTreeList"
-            :props="{
-              children: 'children',
-              label: 'name',
-              value: 'id',
-              isLeaf: 'leaf',
-              emitPath: false,
-            }"
-            check-strictly
-            class="!w-240px"
-            node-key="id"
-            placeholder="请选择商品分类"
-          />
-        </ElFormItem>
-        <ElFormItem label="创建时间" prop="createTime">
-          <ElDatePicker
-            v-model="queryParams.createTime"
-            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-            class="!w-240px"
-            end-placeholder="结束日期"
-            start-placeholder="开始日期"
-            type="daterange"
-            value-format="YYYY-MM-DD HH:mm:ss"
-          />
-        </ElFormItem>
-        <ElFormItem>
-          <ElButton @click="handleQuery">
-            <Icon class="mr-5px" icon="ep:search" />
-            搜索
-          </ElButton>
-          <ElButton @click="resetQuery">
-            <Icon class="mr-5px" icon="ep:refresh" />
-            重置
-          </ElButton>
-        </ElFormItem>
-      </ElForm>
-      <ElTable v-loading="loading" :data="list" show-overflow-tooltip>
-        <!-- 1. 多选模式（不能使用type="selection"，Element会忽略Header插槽） -->
-        <ElTableColumn width="55" v-if="multiple">
-          <template #header>
-            <ElCheckbox
-              v-model="isCheckAll"
-              :indeterminate="isIndeterminate"
-              @change="handleCheckAll"
-            />
-          </template>
-          <template #default="{ row }">
-            <ElCheckbox
-              v-model="checkedStatus[row.id]"
-              @change="(checked: boolean) => handleCheckOne(checked, row, true)"
-            />
-          </template>
-        </ElTableColumn>
-        <!-- 2. 单选模式 -->
-        <ElTableColumn label="#" width="55" v-else>
-          <template #default="{ row }">
-            <ElRadio
-              :value="row.id"
-              v-model="selectedSpuId"
-              @change="handleSingleSelected(row)"
-            >
-              <!-- 空格不能省略，是为了让单选框不显示label，如果不指定label不会有选中的效果 -->
-              &nbsp;
-            </ElRadio>
-          </template>
-        </ElTableColumn>
-        <ElTableColumn
-          key="id"
-          align="center"
-          label="商品编号"
-          prop="id"
-          min-width="60"
-        />
-        <ElTableColumn label="商品图" min-width="80">
-          <template #default="{ row }">
-            <ElImage
-              :src="row.picUrl"
-              class="h-30px w-30px"
-              :preview-src-list="[row.picUrl]"
-              preview-teleported
-            />
-          </template>
-        </ElTableColumn>
-        <ElTableColumn label="商品名称" min-width="200" prop="name" />
-        <ElTableColumn label="商品分类" min-width="100" prop="categoryId">
-          <template #default="{ row }">
-            <span>{{
-              categoryList?.find(
-                (c: MallCategoryApi.Category) => c.id === row.categoryId,
-              )?.name
-            }}</span>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-      <!-- 分页 -->
-      <Pagination
-        v-model:limit="queryParams.pageSize"
-        v-model:page="queryParams.pageNo"
-        :total="total"
-        @pagination="getList"
-      />
-    </ContentWrap>
-    <template #footer v-if="multiple">
-      <ElButton type="primary" @click="handleEmitChange">确 定</ElButton>
-      <ElButton @click="dialogVisible = false">取 消</ElButton>
-    </template>
-  </ElDialog>
-</template>