fix(mall): 修复多端商城模块类型与组件兼容问题

- 修复商城统计时间参数、客服消息类型导入等类型错误 - 对齐 web-antd、web-ele、web-antdv-next 的商城促销组件类型定义 - 修复 DIY 装修、组合活动、积分活动、运费模板等组件兼容问题
2026-06-07 00:31:26 +08:00 · 2026-06-07 00:31:26 +08:00 · f2a5bc522d
parent f8fb3d881d
commit f2a5bc522d
25 changed files with 59 additions and 93 deletions
--- a/apps/web-antd/src/api/mall/statistics/trade.ts
+++ b/apps/web-antd/src/api/mall/statistics/trade.ts
@ -7,7 +7,7 @@ import { requestClient } from '#/api/request';
 export namespace MallTradeStatisticsApi {
  /** 交易状况 Request */
  export interface TradeTrendReqVO {
-    times: [Date, Date];
+    times?: string[];
  }

  /** 交易统计 Response */
--- a/apps/web-antd/src/views/mall/promotion/banner/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/banner/modules/form.vue
@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import type { MallBannerApi } from '#/api/mall/promotion/banner';
-import type { SystemUserApi } from '#/api/system/user';

 import { computed, ref } from 'vue';

@ -19,7 +18,7 @@ import { $t } from '#/locales';
 import { useFormSchema } from '../data';

 const emit = defineEmits(['success']);
-const formData = ref<SystemUserApi.User>();
+const formData = ref<MallBannerApi.Banner>();
 const getTitle = computed(() => {
  return formData.value?.id
    ? $t('ui.actionTitle.edit', ['Banner'])
--- a/apps/web-antd/src/views/mall/promotion/combination/components/table-select.vue
+++ b/apps/web-antd/src/views/mall/promotion/combination/components/table-select.vue
@ -234,12 +234,10 @@ const [Modal, modalApi] = useVbenModal({
    >();
    if (props.multiple && Array.isArray(data) && data.length > 0) {
      setTimeout(() => {
-        const tableData = gridApi.grid.getTableData().fullData;
+        const tableData = gridApi.grid.getTableData()
+          .fullData as MallCombinationActivityApi.CombinationActivity[];
        data.forEach((activity) => {
-          const row = tableData.find(
-            (item: MallCombinationActivityApi.CombinationActivity) =>
-              item.id === activity.id,
-          );
+          const row = tableData.find((item) => item.id === activity.id);
          if (row) {
            gridApi.grid.setCheckboxRow(row, true);
          }
@ -247,11 +245,9 @@ const [Modal, modalApi] = useVbenModal({
      }, 300);
    } else if (!props.multiple && data && !Array.isArray(data)) {
      setTimeout(() => {
-        const tableData = gridApi.grid.getTableData().fullData;
-        const row = tableData.find(
-          (item: MallCombinationActivityApi.CombinationActivity) =>
-            item.id === data.id,
-        );
+        const tableData = gridApi.grid.getTableData()
+          .fullData as MallCombinationActivityApi.CombinationActivity[];
+        const row = tableData.find((item) => item.id === data.id);
        if (row) {
          gridApi.grid.setRadioRow(row);
        }
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { Ref } from 'vue';
+
 import type { ComponentStyle } from '../util';

 import { useVModel } from '@vueuse/core';
@ -28,6 +30,7 @@ defineOptions({ name: 'ComponentContainer' });
 const props = defineProps<{ modelValue: ComponentStyle }>();
 const emit = defineEmits(['update:modelValue']);
 const formData = useVModel(props, 'modelValue', emit);
+const formStyleValues = formData as unknown as Ref<Record<string, number>>;

 const treeData: any[] = [
  {
@ -182,9 +185,7 @@ function handleSliderChange(prop: string) {
                <Row>
                  <Col :span="19">
                    <Slider
-                      v-model:value="
-                        formData[dataRef.prop as keyof ComponentStyle]
-                      "
+                      v-model:value="formStyleValues[dataRef.prop]"
                      :max="100"
                      :min="0"
                      @change="handleSliderChange(dataRef.prop)"
@ -196,9 +197,7 @@ function handleSliderChange(prop: string) {
                      class="w-[50px]"
                      :max="100"
                      :min="0"
-                      v-model:value="
-                        formData[dataRef.prop as keyof ComponentStyle]
-                      "
+                      v-model:value="formStyleValues[dataRef.prop]"
                    />
                  </Col>
                </Row>
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/controller.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/controller.ts
@ -1,4 +1,4 @@
-import type { StyleValue } from 'vue';
+import type { CSSProperties } from 'vue';

 import type { HotZoneItemProperty } from '../../config';

@ -16,7 +16,7 @@ export enum CONTROL_TYPE_ENUM {
 export interface ControlDot {
  position: string;
  types: CONTROL_TYPE_ENUM[];
-  style: StyleValue;
+  style: CSSProperties;
 }

 /** 热区的 8 个控制点 */
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts
@ -1,3 +1,4 @@
+import type { Rect } from '../../../../magic-cube-editor/util';
 import type { ComponentStyle, DiyComponent } from '../../../util';

 /** 广告魔方属性 */
@ -10,13 +11,9 @@ export interface MagicCubeProperty {
 }

 /** 广告魔方项目属性 */
-export interface MagicCubeItemProperty {
+export interface MagicCubeItemProperty extends Rect {
  imgUrl: string; // 图标链接
  url: string; // 链接
-  width: number; // 宽
-  height: number; // 高
-  top: number; // 上
-  left: number; // 左
 }

 /** 定义组件 */
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/config.ts
@ -1,3 +1,4 @@
+import type { Rect } from '../../../../magic-cube-editor/util';
 import type { DiyComponent } from '../../../util';

 /** 顶部导航栏属性 */
@ -16,12 +17,8 @@ export interface NavigationBarProperty {
 }

 /** 顶部导航栏 - 单元格 属性 */
-export interface NavigationBarCellProperty {
+export interface NavigationBarCellProperty extends Rect {
  type: 'image' | 'search' | 'text'; // 类型：文字 | 图片 | 搜索框
-  width: number; // 宽度
-  height: number; // 高度
-  top: number; // 顶部位置
-  left: number; // 左侧位置
  text: string; // 文字内容
  textColor: string; // 文字颜色
  imgUrl: string; // 图片地址
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue
@ -22,7 +22,7 @@ const emit = defineEmits(['update:modelValue']);

 const formData = useVModel(props, 'modelValue', emit);
 const rules = {
-  content: [{ required: true, message: '请输入公告', trigger: 'blur' }],
+  content: [{ required: true, message: '请输入公告', trigger: 'blur' as const }],
 }; // 表单校验
 </script>

--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
@ -44,7 +44,6 @@ const emits = defineEmits(['reset', 'save', 'update:modelValue']); // 工具栏
 //   margin: 4,
 // }); // 预览二维码

-const componentLibrary = ref(); // 左侧组件库
 const pageConfigComponent = ref<DiyComponent<any>>(
  cloneDeep(PAGE_CONFIG_COMPONENT),
 ); // 页面设置组件
@ -336,7 +335,6 @@ onMounted(() => {
      <Col :span="6">
        <ComponentLibrary
          v-if="libs && libs.length > 0"
-          ref="componentLibrary"
          :list="libs"
        />
      </Col>
--- a/apps/web-antd/src/views/mall/promotion/kefu/modules/message-list.vue
+++ b/apps/web-antd/src/views/mall/promotion/kefu/modules/message-list.vue
@ -4,9 +4,9 @@ import type { Emoji } from './tools/emoji';
 import type { MallKefuConversationApi } from '#/api/mall/promotion/kefu/conversation';
 import type { MallKefuMessageApi } from '#/api/mall/promotion/kefu/message';

-import { computed, KeFuMessageContentTypeEnum, reactive, ref, toRefs, unref, watch } from 'vue';
+import { computed, reactive, ref, toRefs, unref, watch } from 'vue';

-import { UserTypeEnum } from '@vben/constants';
+import { KeFuMessageContentTypeEnum, UserTypeEnum } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
 import { formatDate, isEmpty, jsonParse } from '@vben/utils';

--- a/apps/web-antd/src/views/mall/promotion/point/components/table-select.vue
+++ b/apps/web-antd/src/views/mall/promotion/point/components/table-select.vue
@ -196,12 +196,10 @@ const [Modal, modalApi] = useVbenModal({
    >();
    if (props.multiple && Array.isArray(data) && data.length > 0) {
      setTimeout(() => {
-        const tableData = gridApi.grid.getTableData().fullData;
+        const tableData = gridApi.grid.getTableData()
+          .fullData as MallPointActivityApi.PointActivity[];
        data.forEach((activity) => {
-          const row = tableData.find(
-            (item: MallPointActivityApi.PointActivity) =>
-              item.id === activity.id,
-          );
+          const row = tableData.find((item) => item.id === activity.id);
          if (row) {
            gridApi.grid.setCheckboxRow(row, true);
          }
@ -209,10 +207,9 @@ const [Modal, modalApi] = useVbenModal({
      }, 300);
    } else if (!props.multiple && data && !Array.isArray(data)) {
      setTimeout(() => {
-        const tableData = gridApi.grid.getTableData().fullData;
-        const row = tableData.find(
-          (item: MallPointActivityApi.PointActivity) => item.id === data.id,
-        );
+        const tableData = gridApi.grid.getTableData()
+          .fullData as MallPointActivityApi.PointActivity[];
+        const row = tableData.find((item) => item.id === data.id);
        if (row) {
          gridApi.grid.setRadioRow(row);
        }
--- a/apps/web-antdv-next/src/api/mall/statistics/trade.ts
+++ b/apps/web-antdv-next/src/api/mall/statistics/trade.ts
@ -7,7 +7,7 @@ import { requestClient } from '#/api/request';
 export namespace MallTradeStatisticsApi {
  /** 交易状况 Request */
  export interface TradeTrendReqVO {
-    times: [Date, Date];
+    times?: string[];
  }

  /** 交易统计 Response */
--- a/apps/web-antdv-next/src/views/mall/promotion/components/diy-editor/index.vue
+++ b/apps/web-antdv-next/src/views/mall/promotion/components/diy-editor/index.vue
@ -44,7 +44,6 @@ const emits = defineEmits(['reset', 'save', 'update:modelValue']); // 工具栏
 //   margin: 4,
 // }); // 预览二维码

-const componentLibrary = ref(); // 左侧组件库
 const pageConfigComponent = ref<DiyComponent<any>>(
  cloneDeep(PAGE_CONFIG_COMPONENT),
 ); // 页面设置组件
@ -332,7 +331,6 @@ onMounted(() => {
      <Col :span="6">
        <ComponentLibrary
          v-if="libs && libs.length > 0"
-          ref="componentLibrary"
          :list="libs"
        />
      </Col>
--- a/apps/web-ele/src/api/mall/statistics/trade.ts
+++ b/apps/web-ele/src/api/mall/statistics/trade.ts
@ -7,7 +7,7 @@ import { requestClient } from '#/api/request';
 export namespace MallTradeStatisticsApi {
  /** 交易状况 Request */
  export interface TradeTrendReqVO {
-    times: [Date, Date];
+    times?: string[];
  }

  /** 交易统计 Response */
--- a/apps/web-ele/src/views/mall/promotion/banner/modules/form.vue
+++ b/apps/web-ele/src/views/mall/promotion/banner/modules/form.vue
@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import type { MallBannerApi } from '#/api/mall/promotion/banner';
-import type { SystemUserApi } from '#/api/system/user';

 import { computed, ref } from 'vue';

@ -19,7 +18,7 @@ import { $t } from '#/locales';
 import { useFormSchema } from '../data';

 const emit = defineEmits(['success']);
-const formData = ref<SystemUserApi.User>();
+const formData = ref<MallBannerApi.Banner>();
 const getTitle = computed(() => {
  return formData.value?.id
    ? $t('ui.actionTitle.edit', ['Banner'])
--- a/apps/web-ele/src/views/mall/promotion/combination/components/table-select.vue
+++ b/apps/web-ele/src/views/mall/promotion/combination/components/table-select.vue
@ -234,12 +234,10 @@ const [Modal, modalApi] = useVbenModal({
    >();
    if (props.multiple && Array.isArray(data) && data.length > 0) {
      setTimeout(() => {
-        const tableData = gridApi.grid.getTableData().fullData;
+        const tableData = gridApi.grid.getTableData()
+          .fullData as MallCombinationActivityApi.CombinationActivity[];
        data.forEach((activity) => {
-          const row = tableData.find(
-            (item: MallCombinationActivityApi.CombinationActivity) =>
-              item.id === activity.id,
-          );
+          const row = tableData.find((item) => item.id === activity.id);
          if (row) {
            gridApi.grid.setCheckboxRow(row, true);
          }
@ -247,11 +245,9 @@ const [Modal, modalApi] = useVbenModal({
      }, 300);
    } else if (!props.multiple && data && !Array.isArray(data)) {
      setTimeout(() => {
-        const tableData = gridApi.grid.getTableData().fullData;
-        const row = tableData.find(
-          (item: MallCombinationActivityApi.CombinationActivity) =>
-            item.id === data.id,
-        );
+        const tableData = gridApi.grid.getTableData()
+          .fullData as MallCombinationActivityApi.CombinationActivity[];
+        const row = tableData.find((item) => item.id === data.id);
        if (row) {
          gridApi.grid.setRadioRow(row);
        }
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { Ref } from 'vue';
+
 import type { ComponentStyle } from '../util';

 import { useVModel } from '@vueuse/core';
@ -26,6 +28,7 @@ defineOptions({ name: 'ComponentContainer' });
 const props = defineProps<{ modelValue: ComponentStyle }>();
 const emit = defineEmits(['update:modelValue']);
 const formData = useVModel(props, 'modelValue', emit);
+const formStyleValues = formData as unknown as Ref<Record<string, number>>;

 const treeData: any[] = [
  {
@ -169,7 +172,7 @@ function handleSliderChange(prop: string) {
                class="mb-0 w-full"
              >
                <ElSlider
-                  v-model="formData[data.prop]"
+                  v-model="formStyleValues[data.prop]"
                  :max="100"
                  :min="0"
                  show-input
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/controller.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/controller.ts
@ -1,4 +1,4 @@
-import type { StyleValue } from 'vue';
+import type { CSSProperties } from 'vue';

 import type { HotZoneItemProperty } from '../../config';

@ -16,7 +16,7 @@ export enum CONTROL_TYPE_ENUM {
 export interface ControlDot {
  position: string;
  types: CONTROL_TYPE_ENUM[];
-  style: StyleValue;
+  style: CSSProperties;
 }

 /** 热区的 8 个控制点 */
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts
@ -1,3 +1,4 @@
+import type { Rect } from '../../../../magic-cube-editor/util';
 import type { ComponentStyle, DiyComponent } from '../../../util';

 /** 广告魔方属性 */
@ -10,13 +11,9 @@ export interface MagicCubeProperty {
 }

 /** 广告魔方项目属性 */
-export interface MagicCubeItemProperty {
+export interface MagicCubeItemProperty extends Rect {
  imgUrl: string; // 图标链接
  url: string; // 链接
-  width: number; // 宽
-  height: number; // 高
-  top: number; // 上
-  left: number; // 左
 }

 /** 定义组件 */
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/config.ts
@ -1,3 +1,4 @@
+import type { Rect } from '../../../../magic-cube-editor/util';
 import type { DiyComponent } from '../../../util';

 /** 顶部导航栏属性 */
@ -16,12 +17,8 @@ export interface NavigationBarProperty {
 }

 /** 顶部导航栏 - 单元格 属性 */
-export interface NavigationBarCellProperty {
+export interface NavigationBarCellProperty extends Rect {
  type: 'image' | 'search' | 'text'; // 类型：文字 | 图片 | 搜索框
-  width: number; // 宽度
-  height: number; // 高度
-  top: number; // 顶部位置
-  left: number; // 左侧位置
  text: string; // 文字内容
  textColor: string; // 文字颜色
  imgUrl: string; // 图片地址
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/index.vue
@ -54,7 +54,6 @@ const qrcode = useQRCode(props.previewUrl, {
  margin: 4,
 }); // 预览二维码

-const componentLibrary = ref(); // 左侧组件库
 const pageConfigComponent = ref<DiyComponent<any>>(
  cloneDeep(PAGE_CONFIG_COMPONENT),
 ); // 页面设置组件
@ -343,11 +342,10 @@ onMounted(() => {
      <ElContainer class="editor-container h-[calc(100vh-135px)]">
        <!-- 左侧：组件库（ComponentLibrary） -->
        <ElAside width="261px" class="editor-left">
-          <ComponentLibrary
-            v-if="libs && libs.length > 0"
-            ref="componentLibrary"
-            :list="libs"
-          />
+        <ComponentLibrary
+          v-if="libs && libs.length > 0"
+          :list="libs"
+        />
        </ElAside>
        <!-- 中心：设计区域（ComponentContainer） -->
        <div
--- a/apps/web-ele/src/views/mall/promotion/kefu/modules/message-list.vue
+++ b/apps/web-ele/src/views/mall/promotion/kefu/modules/message-list.vue
@ -4,9 +4,9 @@ import type { Emoji } from './tools/emoji';
 import type { MallKefuConversationApi } from '#/api/mall/promotion/kefu/conversation';
 import type { MallKefuMessageApi } from '#/api/mall/promotion/kefu/message';

-import { computed, KeFuMessageContentTypeEnum, reactive, ref, toRefs, unref, watch } from 'vue';
+import { computed, reactive, ref, toRefs, unref, watch } from 'vue';

-import { UserTypeEnum } from '@vben/constants';
+import { KeFuMessageContentTypeEnum, UserTypeEnum } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
 import { formatDate, isEmpty, jsonParse } from '@vben/utils';

--- a/apps/web-ele/src/views/mall/promotion/point/components/table-select.vue
+++ b/apps/web-ele/src/views/mall/promotion/point/components/table-select.vue
@ -196,12 +196,10 @@ const [Modal, modalApi] = useVbenModal({
    >();
    if (props.multiple && Array.isArray(data) && data.length > 0) {
      setTimeout(() => {
-        const tableData = gridApi.grid.getTableData().fullData;
+        const tableData = gridApi.grid.getTableData()
+          .fullData as MallPointActivityApi.PointActivity[];
        data.forEach((activity) => {
-          const row = tableData.find(
-            (item: MallPointActivityApi.PointActivity) =>
-              item.id === activity.id,
-          );
+          const row = tableData.find((item) => item.id === activity.id);
          if (row) {
            gridApi.grid.setCheckboxRow(row, true);
          }
@ -209,10 +207,9 @@ const [Modal, modalApi] = useVbenModal({
      }, 300);
    } else if (!props.multiple && data && !Array.isArray(data)) {
      setTimeout(() => {
-        const tableData = gridApi.grid.getTableData().fullData;
-        const row = tableData.find(
-          (item: MallPointActivityApi.PointActivity) => item.id === data.id,
-        );
+        const tableData = gridApi.grid.getTableData()
+          .fullData as MallPointActivityApi.PointActivity[];
+        const row = tableData.find((item) => item.id === data.id);
        if (row) {
          gridApi.grid.setRadioRow(row);
        }
--- a/apps/web-ele/src/views/mall/trade/delivery/expressTemplate/modules/charge-item-form.vue
+++ b/apps/web-ele/src/views/mall/trade/delivery/expressTemplate/modules/charge-item-form.vue
@ -149,7 +149,6 @@ defineExpose({
        node-key="id"
        :props="{
          label: 'name',
-          value: 'id',
          children: 'children',
        }"
        placeholder="请选择地区"
--- a/apps/web-ele/src/views/mall/trade/delivery/expressTemplate/modules/free-item-form.vue
+++ b/apps/web-ele/src/views/mall/trade/delivery/expressTemplate/modules/free-item-form.vue
@ -139,7 +139,6 @@ defineExpose({
        node-key="id"
        :props="{
          label: 'name',
-          value: 'id',
          children: 'children',
        }"
        placeholder="请选择地区"