fix(web-antdv-next): 适配 antdv-next 5 组件 API

Descriptions class 改为 classes.root，Image error slot 改为 fallback，Tree 标题 slot 改为 titleRender，FormItem labelCol.style 改为 flex。 Transfer 事件和 footer slot 对齐 TransferKey/TransferDirection，并修复 Button color、ActionItem color、重复 attachments 等类型问题。 web-antdv-next 清缓存 typecheck 0 error。
2026-06-21 22:24:00 -07:00 · 2026-06-21 22:24:00 -07:00 · 23df7c7f30
parent b02c75347e
commit 23df7c7f30
22 changed files with 64 additions and 52 deletions
--- a/apps/web-antdv-next/src/api/bpm/processInstance/index.ts
+++ b/apps/web-antdv-next/src/api/bpm/processInstance/index.ts
@ -84,7 +84,6 @@ export namespace BpmProcessInstanceApi {
    reason: string;
    signPicUrl: string;
    status: number;
-    attachments?: string[];
  }

  /** 抄送流程实例 */
--- a/apps/web-antdv-next/src/components/description/use-description.ts
+++ b/apps/web-antdv-next/src/components/description/use-description.ts
@ -21,7 +21,6 @@ export function useDescription(options?: Partial<DescriptionProps>) {
    inheritAttrs: false,
    setup(_props, { attrs, slots }) {
      return () => {
-        // @ts-expect-error - 避免类型实例化过深
        return h(Description, { ...propsState, ...attrs }, slots);
      };
    },
--- a/apps/web-antdv-next/src/components/table-action/typing.ts
+++ b/apps/web-antdv-next/src/components/table-action/typing.ts
@ -10,7 +10,7 @@ export interface PopConfirm {
  disabled?: boolean;
 }

-export interface ActionItem extends ButtonProps {
+export interface ActionItem extends Omit<ButtonProps, 'color'> {
  onClick?: () => void;
  type?: ButtonType;
  label?: string;
--- a/apps/web-antdv-next/src/components/tinymce/img-upload.vue
+++ b/apps/web-antdv-next/src/components/tinymce/img-upload.vue
@ -33,7 +33,7 @@ const getButtonProps = computed(() => {
  };
 });

-async function customRequest(info: UploadRequestOption<any>) {
+async function customRequest(info: UploadRequestOption) {
  // 1. emit 上传中
  const file = info.file as File;
  const name = file?.name;
--- a/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes/parallel-node.vue
+++ b/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/nodes/parallel-node.vue
@ -139,7 +139,7 @@ function recursiveFindParentNode(
      <Button
        v-else
        class="branch-node-add"
-        color="#626aef"
+        :style="{ borderColor: '#626aef', color: '#626aef' }"
        @click="addCondition"
        plain
      >
--- a/apps/web-antdv-next/src/views/bpm/oa/leave/detail.vue
+++ b/apps/web-antdv-next/src/views/bpm/oa/leave/detail.vue
@ -26,7 +26,7 @@ const queryId = computed(() => query.id as string);
 const [Descriptions] = useDescription({
  bordered: true,
  column: 1,
-  class: 'mx-4',
+  classes: { root: 'mx-4' },
  schema: useDetailFormSchema(),
 });

--- a/apps/web-antdv-next/src/views/crm/business/detail/modules/info.vue
+++ b/apps/web-antdv-next/src/views/crm/business/detail/modules/info.vue
@ -16,7 +16,7 @@ const [BaseDescription] = useDescription({
  title: '基本信息',
  bordered: false,
  column: 4,
-  class: 'mx-4',
+  classes: { root: 'mx-4' },
  schema: useDetailBaseSchema(),
 });

@ -24,7 +24,7 @@ const [SystemDescription] = useDescription({
  title: '系统信息',
  bordered: false,
  column: 3,
-  class: 'mx-4',
+  classes: { root: 'mx-4' },
  schema: useFollowUpDetailSchema(),
 });
 </script>
--- a/apps/web-antdv-next/src/views/crm/clue/detail/modules/info.vue
+++ b/apps/web-antdv-next/src/views/crm/clue/detail/modules/info.vue
@ -16,7 +16,7 @@ const [BaseDescriptions] = useDescription({
  title: '基本信息',
  bordered: false,
  column: 4,
-  class: 'mx-4',
+  classes: { root: 'mx-4' },
  schema: useDetailBaseSchema(),
 });

@ -24,7 +24,7 @@ const [SystemDescriptions] = useDescription({
  title: '系统信息',
  bordered: false,
  column: 3,
-  class: 'mx-4',
+  classes: { root: 'mx-4' },
  schema: useFollowUpDetailSchema(),
 });
 </script>
--- a/apps/web-antdv-next/src/views/crm/contact/detail/modules/info.vue
+++ b/apps/web-antdv-next/src/views/crm/contact/detail/modules/info.vue
@ -16,7 +16,7 @@ const [BaseDescriptions] = useDescription({
  title: '基本信息',
  bordered: false,
  column: 4,
-  class: 'mx-4',
+  classes: { root: 'mx-4' },
  schema: useDetailBaseSchema(),
 });

@ -24,7 +24,7 @@ const [SystemDescriptions] = useDescription({
  title: '系统信息',
  bordered: false,
  column: 3,
-  class: 'mx-4',
+  classes: { root: 'mx-4' },
  schema: useFollowUpDetailSchema(),
 });
 </script>
--- a/apps/web-antdv-next/src/views/crm/contract/detail/modules/info.vue
+++ b/apps/web-antdv-next/src/views/crm/contract/detail/modules/info.vue
@ -16,7 +16,7 @@ const [BaseDescriptions] = useDescription({
  title: '基本信息',
  bordered: false,
  column: 4,
-  class: 'mx-4',
+  classes: { root: 'mx-4' },
  schema: useDetailBaseSchema(),
 });

@ -24,7 +24,7 @@ const [SystemDescriptions] = useDescription({
  title: '系统信息',
  bordered: false,
  column: 3,
-  class: 'mx-4',
+  classes: { root: 'mx-4' },
  schema: useFollowUpDetailSchema(),
 });
 </script>
--- a/apps/web-antdv-next/src/views/crm/customer/detail/modules/info.vue
+++ b/apps/web-antdv-next/src/views/crm/customer/detail/modules/info.vue
@ -16,7 +16,7 @@ const [BaseDescriptions] = useDescription({
  title: '基本信息',
  bordered: false,
  column: 4,
-  class: 'mx-4',
+  classes: { root: 'mx-4' },
  schema: useDetailBaseSchema(),
 });

@ -24,7 +24,7 @@ const [SystemDescriptions] = useDescription({
  title: '系统信息',
  bordered: false,
  column: 3,
-  class: 'mx-4',
+  classes: { root: 'mx-4' },
  schema: useFollowUpDetailSchema(),
 });
 </script>
--- a/apps/web-antdv-next/src/views/crm/receivable/detail/modules/info.vue
+++ b/apps/web-antdv-next/src/views/crm/receivable/detail/modules/info.vue
@ -15,7 +15,7 @@ const [BaseDescriptions] = useDescription({
  title: '基本信息',
  bordered: false,
  column: 4,
-  class: 'mx-4',
+  classes: { root: 'mx-4' },
  schema: useDetailBaseSchema(),
 });

@ -23,7 +23,7 @@ const [SystemDescriptions] = useDescription({
  title: '系统信息',
  bordered: false,
  column: 3,
-  class: 'mx-4',
+  classes: { root: 'mx-4' },
  schema: useDetailSystemSchema(),
 });
 </script>
--- a/apps/web-antdv-next/src/views/crm/receivable/plan/detail/modules/info.vue
+++ b/apps/web-antdv-next/src/views/crm/receivable/plan/detail/modules/info.vue
@ -15,7 +15,7 @@ const [BaseDescriptions] = useDescription({
  title: '基本信息',
  bordered: false,
  column: 4,
-  class: 'mx-4',
+  classes: { root: 'mx-4' },
  schema: useDetailBaseSchema(),
 });

@ -23,7 +23,7 @@ const [SystemDescriptions] = useDescription({
  title: '系统信息',
  bordered: false,
  column: 3,
-  class: 'mx-4',
+  classes: { root: 'mx-4' },
  schema: useDetailSystemSchema(),
 });
 </script>
--- a/apps/web-antdv-next/src/views/infra/redis/modules/info.vue
+++ b/apps/web-antdv-next/src/views/infra/redis/modules/info.vue
@ -10,7 +10,7 @@ defineProps<{
 const [Descriptions] = useDescription({
  bordered: false,
  column: 6,
-  class: 'mx-4',
+  classes: { root: 'mx-4' },
  schema: [
    {
      field: 'info.redis_version',
--- a/apps/web-antdv-next/src/views/iot/alert/record/index.vue
+++ b/apps/web-antdv-next/src/views/iot/alert/record/index.vue
@ -39,7 +39,8 @@ function handleProcess(row: AlertRecordApi.AlertRecord) {
        h('p', '请输入处理原因：'),
        h(TextArea, {
          value: processRemark.value,
-          'onUpdate:value': (val: string) => (processRemark.value = val),
+          'onUpdate:value': (val?: number | string) =>
+            (processRemark.value = String(val ?? '')),
          rows: 3,
          placeholder: '请输入处理原因',
        }),
--- a/apps/web-antdv-next/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
+++ b/apps/web-antdv-next/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
@ -32,7 +32,13 @@ const emit = defineEmits(['update:modelValue']);
 const formData = useVModel(props, 'modelValue', emit);
 const formStyleValues = formData as unknown as Ref<Record<string, number>>;

-const treeData: any[] = [
+interface StyleTreeNode {
+  children?: StyleTreeNode[];
+  label: string;
+  prop: string;
+}
+
+const treeData: StyleTreeNode[] = [
  {
    label: '外部边距',
    prop: 'margin',
@ -126,6 +132,10 @@ function handleSliderChange(prop: string) {
    }
  }
 }
+
+function getTreeNode(slotProps: unknown) {
+  return slotProps as StyleTreeNode;
+}
 </script>

 <template>
@ -143,7 +153,7 @@ function handleSliderChange(prop: string) {
          <FormItem
            label="组件背景"
            name="bgType"
-            :label-col="{ style: { width: '109px' } }"
+            :label-col="{ flex: '109px' }"
          >
            <RadioGroup v-model:value="formData.bgType">
              <Radio value="color">纯色</Radio>
@ -153,7 +163,7 @@ function handleSliderChange(prop: string) {
          <FormItem
            label="选择颜色"
            name="bgColor"
-            :label-col="{ style: { width: '109px' } }"
+            :label-col="{ flex: '109px' }"
            v-if="formData.bgType === 'color'"
          >
            <ColorInput v-model="formData.bgColor" />
@ -161,7 +171,7 @@ function handleSliderChange(prop: string) {
          <FormItem
            label="上传图片"
            name="bgImg"
-            :label-col="{ style: { width: '109px' } }"
+            :label-col="{ flex: '109px' }"
            v-else
          >
            <UploadImg
@ -173,22 +183,20 @@ function handleSliderChange(prop: string) {
            </UploadImg>
          </FormItem>
          <Tree :tree-data="treeData" default-expand-all :block-node="true">
-            <template #title="{ dataRef }">
+            <template #titleRender="node">
              <FormItem
-                :label="dataRef.label"
-                :name="dataRef.prop"
-                :label-col="{
-                  style: { width: dataRef.children ? '80px' : '58px' },
-                }"
+                :label="getTreeNode(node).label"
+                :name="getTreeNode(node).prop"
+                :label-col="{ flex: getTreeNode(node).children ? '80px' : '58px' }"
                class="mb-0 w-full"
              >
                <Row>
                  <Col :span="19">
                    <Slider
-                      v-model:value="formStyleValues[dataRef.prop]"
+                      v-model:value="formStyleValues[getTreeNode(node).prop]"
                      :max="100"
                      :min="0"
-                      @change="handleSliderChange(dataRef.prop)"
+                      @change="handleSliderChange(getTreeNode(node).prop)"
                      class="mr-4"
                    />
                  </Col>
@ -197,7 +205,7 @@ function handleSliderChange(prop: string) {
                      class="w-[50px]"
                      :max="100"
                      :min="0"
-                      v-model:value="formStyleValues[dataRef.prop]"
+                      v-model:value="formStyleValues[getTreeNode(node).prop]"
                    />
                  </Col>
                </Row>
--- a/apps/web-antdv-next/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue
+++ b/apps/web-antdv-next/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue
@ -65,7 +65,7 @@ const rowCount = computed(() => {
          borderBottomRightRadius: `${property.borderRadiusBottom}px`,
        }"
      >
-        <template #error>
+        <template #fallback>
          <div class="image-slot">
            <div
              class="flex items-center justify-center"
--- a/apps/web-antdv-next/src/views/mall/promotion/components/diy-editor/components/mobile/popover/index.vue
+++ b/apps/web-antdv-next/src/views/mall/promotion/components/diy-editor/components/mobile/popover/index.vue
@ -36,7 +36,7 @@ function handleActive(index: number) {
      :preview="false"
      class="h-full w-full object-contain"
    >
-      <template #error>
+      <template #fallback>
        <div class="flex h-full w-full items-center justify-center">
          <IconifyIcon icon="lucide:image" />
        </div>
--- a/apps/web-antdv-next/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
+++ b/apps/web-antdv-next/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
@ -33,7 +33,7 @@ defineProps<{ property: TabBarProperty }>();
          class="!h-[26px] w-[26px] rounded"
          :preview="false"
        >
-          <template #error>
+          <template #fallback>
            <div class="flex h-full w-full items-center justify-center">
              <IconifyIcon
                icon="lucide:image"
--- a/apps/web-antdv-next/src/views/mall/trade/afterSale/detail/index.vue
+++ b/apps/web-antdv-next/src/views/mall/trade/afterSale/detail/index.vue
@ -52,7 +52,7 @@ const [OrderDescriptions] = useDescription({
  title: '订单信息',
  bordered: false,
  column: 3,
-  class: 'mx-4',
+  classes: { root: 'mx-4' },
  schema: useOrderInfoSchema(),
 });

@ -60,7 +60,7 @@ const [AfterSaleDescriptions] = useDescription({
  title: '售后信息',
  bordered: false,
  column: 3,
-  class: 'mx-4',
+  classes: { root: 'mx-4' },
  schema: useAfterSaleInfoSchema(),
 });

@ -68,7 +68,7 @@ const [RefundStatusDescriptions] = useDescription({
  title: '退款状态',
  bordered: false,
  column: 1,
-  class: 'mx-4',
+  classes: { root: 'mx-4' },
  schema: useRefundStatusSchema(),
 });

--- a/apps/web-antdv-next/src/views/mall/trade/order/detail/index.vue
+++ b/apps/web-antdv-next/src/views/mall/trade/order/detail/index.vue
@ -64,7 +64,7 @@ const [OrderInfoDescriptions] = useDescription({
  title: '订单信息',
  bordered: false,
  column: 3,
-  class: 'mx-4',
+  classes: { root: 'mx-4' },
  schema: useOrderInfoSchema(),
 });

@ -72,7 +72,7 @@ const [OrderStatusDescriptions] = useDescription({
  title: '订单状态',
  bordered: false,
  column: 1,
-  class: 'mx-4',
+  classes: { root: 'mx-4' },
  schema: useOrderStatusSchema(),
 });

@ -80,7 +80,7 @@ const [OrderPriceDescriptions] = useDescription({
  title: '费用信息',
  bordered: false,
  column: 4,
-  class: 'mx-4',
+  classes: { root: 'mx-4' },
  schema: useOrderPriceSchema(),
 });

@ -88,7 +88,7 @@ const [DeliveryInfoDescriptions] = useDescription({
  title: '收货信息',
  bordered: false,
  column: 3,
-  class: 'mx-4',
+  classes: { root: 'mx-4' },
  schema: useDeliveryInfoSchema(),
 });

--- a/apps/web-antdv-next/src/views/system/user/components/select-modal.vue
+++ b/apps/web-antdv-next/src/views/system/user/components/select-modal.vue
@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import type { TransferDirection, TransferKey } from 'antdv-next';
+
 import type { SystemDeptApi } from '#/api/system/dept';
 import type { SystemUserApi } from '#/api/system/user';

@ -258,7 +260,7 @@ function handleRightPaginationChange(page: number, pageSize: number) {
 }

 /** 处理用户搜索 */
-async function handleUserSearch(direction: string, value: string) {
+async function handleUserSearch(direction: TransferDirection, value: string) {
  if (direction === 'left') {
    leftListState.value.searchValue = value;
    leftListState.value.pagination.current = 1;
@ -271,9 +273,9 @@ async function handleUserSearch(direction: string, value: string) {
 }

 /** 处理用户选择变化 */
-function handleUserChange(targetKeys: string[]) {
+function handleUserChange(targetKeys: TransferKey[]) {
  // 使用 Set 来去重选中的用户ID
-  selectedUserIds.value = [...new Set(targetKeys)];
+  selectedUserIds.value = [...new Set(targetKeys.map(String))];
  emit('update:value', selectedUserIds.value.map(Number));
  updateRightListData();
 }
@ -408,7 +410,10 @@ function processDeptNode(node: any): DeptTreeNode {
              v-model:value="deptSearchKeys"
              placeholder="搜索部门"
              allow-clear
-              @input="(e) => handleDeptSearch(e.target?.value ?? '')"
+              @input="
+                (e: Event) =>
+                  handleDeptSearch((e.target as HTMLInputElement)?.value ?? '')
+              "
            />
          </div>
          <Tree
@ -436,8 +441,8 @@ function processDeptNode(node: any): DeptTreeNode {
            <span>{{ item?.nickname }} ({{ item?.username }})</span>
          </template>

-          <template #footer="{ direction }">
-            <div v-if="direction === 'left'">
+          <template #footer="{ info }">
+            <div v-if="info?.direction === 'left'">
              <Pagination
                v-model:current="leftListState.pagination.current"
                v-model:page-size="leftListState.pagination.pageSize"
@ -449,7 +454,7 @@ function processDeptNode(node: any): DeptTreeNode {
              />
            </div>

-            <div v-if="direction === 'right'">
+            <div v-if="info?.direction === 'right'">
              <Pagination
                v-model:current="rightListState.pagination.current"
                v-model:page-size="rightListState.pagination.pageSize"