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。

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[];
   }
 
   /** 抄送流程实例 */

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);
       };
     },

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;

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;

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
       >

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(),
 });
 

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>

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>

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>

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>

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>

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>

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>

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',

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: '请输入处理原因',
         }),

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"
+                :label="getTreeNode(node).label"
-                :name="dataRef.prop"
+                :name="getTreeNode(node).prop"
-                :label-col="{
+                :label-col="{ flex: getTreeNode(node).children ? '80px' : '58px' }"
-                  style: { width: dataRef.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>

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"

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>

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"

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(),
 });
 

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(),
 });
 

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 }">
+          <template #footer="{ info }">
-            <div v-if="direction === 'left'">
+            <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"