From 06f776d1ef1a4909293ef9a122f1c9c994052eba Mon Sep 17 00:00:00 2001
From: XuZhiqiang <xzq710675281@163.com>
Date: Tue, 12 May 2026 16:37:42 +0800
Subject: [PATCH] =?UTF-8?q?feat(@vben/web-antdv-next):=20=E6=9B=BF?=
 =?UTF-8?q?=E6=8D=A2=20antdv-next=20=E4=B8=AD=E4=B8=8D=E5=8F=AF=E7=94=A8?=
 =?UTF-8?q?=E7=9A=84=20List=20=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=89=8B?=
 =?UTF-8?q?=E5=8A=A8=E8=BF=81=E7=A7=BB=E4=B8=BA=20div=20=E7=BB=93=E6=9E=84?=
 =?UTF-8?q?=EF=BC=8C=E5=90=8E=E7=BB=AD=E7=BB=84=E4=BB=B6=E5=BA=93=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=20Listy=20=E7=BB=84=E4=BB=B6=E5=9C=A8=E8=BF=9B?=
 =?UTF-8?q?=E8=A1=8C=E6=9B=BF=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/crm/backlog/index.vue           | 38 +++++------
 .../modules/tools/emoji-select-popover.vue    |  6 +-
 .../src/views/mall/trade/order/index.vue      | 64 +++++++++----------
 .../member/user/detail/modules/order-list.vue | 64 +++++++++----------
 4 files changed, 83 insertions(+), 89 deletions(-)

diff --git a/apps/web-antdv-next/src/views/crm/backlog/index.vue b/apps/web-antdv-next/src/views/crm/backlog/index.vue
index bfc3bf81a..2fe131ce7 100644
--- a/apps/web-antdv-next/src/views/crm/backlog/index.vue
+++ b/apps/web-antdv-next/src/views/crm/backlog/index.vue
@@ -4,7 +4,6 @@ import { computed, onActivated, onMounted, ref } from 'vue';
 import { Page } from '@vben/common-ui';
 
 import { Badge, Card } from 'antdv-next';
-// TODO: List component not available in antdv-next, needs manual migration
 
 import { getFollowClueCount } from '#/api/crm/clue';
 import {
@@ -96,27 +95,22 @@ onMounted(() => {
   <Page auto-content-height>
     <div class="flex h-full w-full">
       <Card class="w-1/5">
-        <List item-layout="horizontal" :data-source="leftSides">
-          <template #renderItem="{ item }">
-            <List.Item
-              @click="sideClick(item)"
-              class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700"
-            >
-              <List.Item.Meta>
-                <template #title>
-                  {{ item.name }}
-                </template>
-              </List.Item.Meta>
-              <template #extra>
-                <Badge
-                  v-if="item.count.value > 0"
-                  :color="item.menu === leftMenu ? 'blue' : 'red'"
-                  :count="item.count.value"
-                />
-              </template>
-            </List.Item>
-          </template>
-        </List>
+        <!-- TODO: antdv-next 暂不支持 List 组件，后续组件库会新增 Listy 组件替代 List -->
+        <div>
+          <div
+            v-for="item in leftSides"
+            :key="item.menu"
+            class="flex cursor-pointer items-center justify-between px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700"
+            @click="sideClick(item)"
+          >
+            <span>{{ item.name }}</span>
+            <Badge
+              v-if="item.count.value > 0"
+              :color="item.menu === leftMenu ? 'blue' : 'red'"
+              :count="item.count.value"
+            />
+          </div>
+        </div>
       </Card>
       <component class="ml-4 w-4/5" :is="currentComponent" />
     </div>
diff --git a/apps/web-antdv-next/src/views/mall/promotion/kefu/modules/tools/emoji-select-popover.vue b/apps/web-antdv-next/src/views/mall/promotion/kefu/modules/tools/emoji-select-popover.vue
index e32cc7925..a7b485b1d 100644
--- a/apps/web-antdv-next/src/views/mall/promotion/kefu/modules/tools/emoji-select-popover.vue
+++ b/apps/web-antdv-next/src/views/mall/promotion/kefu/modules/tools/emoji-select-popover.vue
@@ -7,7 +7,6 @@ import { computed } from 'vue';
 import { IconifyIcon } from '@vben/icons';
 
 import { Popover } from 'antdv-next';
-// TODO: List component not available in antdv-next, needs manual migration
 
 import { useEmoji } from './emoji';
 
@@ -27,7 +26,8 @@ function handleSelect(item: Emoji) {
 <template>
   <Popover placement="top" trigger="click">
     <template #content>
-      <List height="300px" class="w-[500px]">
+      <!-- TODO: antdv-next 暂不支持 List 组件，后续组件库会新增 Listy 组件替代 List -->
+      <div class="h-[300px] w-[500px] overflow-auto">
         <ul class="ml-2 flex flex-wrap px-2">
           <li
             v-for="(item, index) in emojiList"
@@ -39,7 +39,7 @@ function handleSelect(item: Emoji) {
             <img :src="item.url" class="size-4" />
           </li>
         </ul>
-      </List>
+      </div>
     </template>
     <IconifyIcon
       class="ml-2.5 size-6 cursor-pointer"
diff --git a/apps/web-antdv-next/src/views/mall/trade/order/index.vue b/apps/web-antdv-next/src/views/mall/trade/order/index.vue
index 40c8a41bd..bb1c4a97b 100644
--- a/apps/web-antdv-next/src/views/mall/trade/order/index.vue
+++ b/apps/web-antdv-next/src/views/mall/trade/order/index.vue
@@ -13,7 +13,6 @@ import {
 import { fenToYuan } from '@vben/utils';
 
 import { Image, Tag } from 'antdv-next';
-// TODO: List component not available in antdv-next, needs manual migration
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getOrderPage } from '#/api/mall/trade/order';
@@ -109,37 +108,38 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <RemarkFormModal @success="handleRefresh" />
     <Grid table-title="订单列表">
       <template #expand_content="{ row }">
-        <List item-layout="vertical" :data-source="row.items">
-          <template #renderItem="{ item }">
-            <List.Item>
-              <List.Item.Meta>
-                <template #title>
-                  {{ item.spuName }}
-                  <Tag
-                    color="blue"
-                    v-for="property in item.properties"
-                    :key="property.propertyId"
-                  >
-                    {{ property.propertyName }} : {{ property.valueName }}
-                  </Tag>
-                </template>
-                <template #avatar>
-                  <Image :src="item.picUrl" :width="40" :height="40" />
-                </template>
-                <template #description>
-                  {{
-                    `原价：${fenToYuan(item.price)} 元 / 数量：${item.count} 个`
-                  }}
-                  |
-                  <DictTag
-                    :type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
-                    :value="item.afterSaleStatus"
-                  />
-                </template>
-              </List.Item.Meta>
-            </List.Item>
-          </template>
-        </List>
+        <!-- TODO: antdv-next 暂不支持 List 组件，后续组件库会新增 Listy 组件替代 List -->
+        <div>
+          <div
+            v-for="item in row.items"
+            :key="item.id"
+            class="flex items-start gap-3 border-b border-gray-100 py-3 last:border-b-0"
+          >
+            <Image :src="item.picUrl" :width="40" :height="40" />
+            <div class="flex-1">
+              <div>
+                {{ item.spuName }}
+                <Tag
+                  color="blue"
+                  v-for="property in item.properties"
+                  :key="property.propertyId"
+                >
+                  {{ property.propertyName }} : {{ property.valueName }}
+                </Tag>
+              </div>
+              <div class="text-gray-500">
+                {{
+                  `原价：${fenToYuan(item.price!)} 元 / 数量：${item.count} 个`
+                }}
+                |
+                <DictTag
+                  :type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
+                  :value="item.afterSaleStatus"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
       </template>
       <template #actions="{ row }">
         <TableAction
diff --git a/apps/web-antdv-next/src/views/member/user/detail/modules/order-list.vue b/apps/web-antdv-next/src/views/member/user/detail/modules/order-list.vue
index 3ba1c9f30..c3903fab5 100644
--- a/apps/web-antdv-next/src/views/member/user/detail/modules/order-list.vue
+++ b/apps/web-antdv-next/src/views/member/user/detail/modules/order-list.vue
@@ -8,7 +8,6 @@ import { DICT_TYPE } from '@vben/constants';
 import { fenToYuan } from '@vben/utils';
 
 import { Image, Tag } from 'antdv-next';
-// TODO: List component not available in antdv-next, needs manual migration
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getOrderPage } from '#/api/mall/trade/order';
@@ -80,37 +79,38 @@ const [Grid] = useVbenVxeGrid({
 <template>
   <Grid table-title="订单列表">
     <template #expand_content="{ row }">
-      <List item-layout="vertical" :data-source="row.items">
-        <template #renderItem="{ item }">
-          <List.Item>
-            <List.Item.Meta>
-              <template #title>
-                {{ item.spuName }}
-                <Tag
-                  color="blue"
-                  v-for="property in item.properties"
-                  :key="property.propertyId"
-                >
-                  {{ property.propertyName }} : {{ property.valueName }}
-                </Tag>
-              </template>
-              <template #avatar>
-                <Image :src="item.picUrl" :width="40" :height="40" />
-              </template>
-              <template #description>
-                {{
-                  `原价：${fenToYuan(item.price)} 元 / 数量：${item.count} 个`
-                }}
-                |
-                <DictTag
-                  :type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
-                  :value="item.afterSaleStatus"
-                />
-              </template>
-            </List.Item.Meta>
-          </List.Item>
-        </template>
-      </List>
+      <!-- TODO: antdv-next 暂不支持 List 组件，后续组件库会新增 Listy 组件替代 List -->
+      <div>
+        <div
+          v-for="item in row.items"
+          :key="item.id"
+          class="flex items-start gap-3 border-b border-gray-100 py-3 last:border-b-0"
+        >
+          <Image :src="item.picUrl" :width="40" :height="40" />
+          <div class="flex-1">
+            <div>
+              {{ item.spuName }}
+              <Tag
+                color="blue"
+                v-for="property in item.properties"
+                :key="property.propertyId"
+              >
+                {{ property.propertyName }} : {{ property.valueName }}
+              </Tag>
+            </div>
+            <div class="text-gray-500">
+              {{
+                `原价：${fenToYuan(item.price!)} 元 / 数量：${item.count} 个`
+              }}
+              |
+              <DictTag
+                :type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
+                :value="item.afterSaleStatus"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
     </template>
     <template #actions="{ row }">
       <TableAction