yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(@vben/web-antdv-next): 替换 antdv-next 中不可用的 List 组件，手动迁移为 div 结构，后续组件库新增 Listy 组件在进行替换

pull/342/head
XuZhiqiang 2026-05-12 16:37:42 +08:00
parent 40f0ba71f5
commit 06f776d1ef
4 changed files with 83 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
apps/web-antdv-next/src/views/crm/backlog/index.vue
View File

@ -4,7 +4,6 @@ import { computed, onActivated, onMounted, ref } from 'vue';
import { Page } from '@vben/common-ui'; import { Page } from '@vben/common-ui';
import { Badge, Card } from 'antdv-next'; import { Badge, Card } from 'antdv-next';
// TODO: List component not available in antdv-next, needs manual migration
import { getFollowClueCount } from '#/api/crm/clue'; import { getFollowClueCount } from '#/api/crm/clue';
import { import {
@ -96,27 +95,22 @@ onMounted(() => {
<Page auto-content-height> <Page auto-content-height>
<div class="flex h-full w-full"> <div class="flex h-full w-full">
<Card class="w-1/5"> <Card class="w-1/5">
<List item-layout="horizontal" :data-source="leftSides"> <!-- TODO: antdv-next 暂不支持 List 组件，后续组件库会新增 Listy 组件替代 List -->
<template #renderItem="{ item }"> <div>
<List.Item <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)" @click="sideClick(item)"
class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700"
> >
<List.Item.Meta> <span>{{ item.name }}</span>
<template #title>
{{ item.name }}
</template>
</List.Item.Meta>
<template #extra>
<Badge <Badge
v-if="item.count.value > 0" v-if="item.count.value > 0"
:color="item.menu === leftMenu ? 'blue' : 'red'" :color="item.menu === leftMenu ? 'blue' : 'red'"
:count="item.count.value" :count="item.count.value"
/> />
</template> </div>
</List.Item> </div>
</template>
</List>
</Card> </Card>
<component class="ml-4 w-4/5" :is="currentComponent" /> <component class="ml-4 w-4/5" :is="currentComponent" />
</div> </div>

6
apps/web-antdv-next/src/views/mall/promotion/kefu/modules/tools/emoji-select-popover.vue
View File

@ -7,7 +7,6 @@ import { computed } from 'vue';
import { IconifyIcon } from '@vben/icons'; import { IconifyIcon } from '@vben/icons';
import { Popover } from 'antdv-next'; import { Popover } from 'antdv-next';
// TODO: List component not available in antdv-next, needs manual migration
import { useEmoji } from './emoji'; import { useEmoji } from './emoji';
@ -27,7 +26,8 @@ function handleSelect(item: Emoji) {
<template> <template>
<Popover placement="top" trigger="click"> <Popover placement="top" trigger="click">
<template #content> <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"> <ul class="ml-2 flex flex-wrap px-2">
<li <li
v-for="(item, index) in emojiList" v-for="(item, index) in emojiList"
@ -39,7 +39,7 @@ function handleSelect(item: Emoji) {
<img :src="item.url" class="size-4" /> <img :src="item.url" class="size-4" />
</li> </li>
</ul> </ul>
</List> </div>
</template> </template>
<IconifyIcon <IconifyIcon
class="ml-2.5 size-6 cursor-pointer" class="ml-2.5 size-6 cursor-pointer"

34
apps/web-antdv-next/src/views/mall/trade/order/index.vue
View File

@ -13,7 +13,6 @@ import {
import { fenToYuan } from '@vben/utils'; import { fenToYuan } from '@vben/utils';
import { Image, Tag } from 'antdv-next'; 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 { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { getOrderPage } from '#/api/mall/trade/order'; import { getOrderPage } from '#/api/mall/trade/order';
@ -109,11 +108,16 @@ const [Grid, gridApi] = useVbenVxeGrid({
<RemarkFormModal @success="handleRefresh" /> <RemarkFormModal @success="handleRefresh" />
<Grid table-title="订单列表"> <Grid table-title="订单列表">
<template #expand_content="{ row }"> <template #expand_content="{ row }">
<List item-layout="vertical" :data-source="row.items"> <!-- TODO: antdv-next 暂不支持 List 组件，后续组件库会新增 Listy 组件替代 List -->
<template #renderItem="{ item }"> <div>
<List.Item> <div
<List.Item.Meta> v-for="item in row.items"
<template #title> :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 }} {{ item.spuName }}
<Tag <Tag
color="blue" color="blue"
@ -122,24 +126,20 @@ const [Grid, gridApi] = useVbenVxeGrid({
> >
{{ property.propertyName }} : {{ property.valueName }} {{ property.propertyName }} : {{ property.valueName }}
</Tag> </Tag>
</template> </div>
<template #avatar> <div class="text-gray-500">
<Image :src="item.picUrl" :width="40" :height="40" />
</template>
<template #description>
{{ {{
`原价：${fenToYuan(item.price)} 元 / 数量：${item.count} 个` `原价：${fenToYuan(item.price!)} 元 / 数量：${item.count} 个`
}} }}
| |
<DictTag <DictTag
:type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS" :type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
:value="item.afterSaleStatus" :value="item.afterSaleStatus"
/> />
</template> </div>
</List.Item.Meta> </div>
</List.Item> </div>
</template> </div>
</List>
</template> </template>
<template #actions="{ row }"> <template #actions="{ row }">
<TableAction <TableAction

34
apps/web-antdv-next/src/views/member/user/detail/modules/order-list.vue
View File

@ -8,7 +8,6 @@ import { DICT_TYPE } from '@vben/constants';
import { fenToYuan } from '@vben/utils'; import { fenToYuan } from '@vben/utils';
import { Image, Tag } from 'antdv-next'; 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 { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { getOrderPage } from '#/api/mall/trade/order'; import { getOrderPage } from '#/api/mall/trade/order';
@ -80,11 +79,16 @@ const [Grid] = useVbenVxeGrid({
<template> <template>
<Grid table-title="订单列表"> <Grid table-title="订单列表">
<template #expand_content="{ row }"> <template #expand_content="{ row }">
<List item-layout="vertical" :data-source="row.items"> <!-- TODO: antdv-next 暂不支持 List 组件，后续组件库会新增 Listy 组件替代 List -->
<template #renderItem="{ item }"> <div>
<List.Item> <div
<List.Item.Meta> v-for="item in row.items"
<template #title> :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 }} {{ item.spuName }}
<Tag <Tag
color="blue" color="blue"
@ -93,24 +97,20 @@ const [Grid] = useVbenVxeGrid({
> >
{{ property.propertyName }} : {{ property.valueName }} {{ property.propertyName }} : {{ property.valueName }}
</Tag> </Tag>
</template> </div>
<template #avatar> <div class="text-gray-500">
<Image :src="item.picUrl" :width="40" :height="40" />
</template>
<template #description>
{{ {{
`原价：${fenToYuan(item.price)} 元 / 数量：${item.count} 个` `原价：${fenToYuan(item.price!)} 元 / 数量：${item.count} 个`
}} }}
| |
<DictTag <DictTag
:type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS" :type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
:value="item.afterSaleStatus" :value="item.afterSaleStatus"
/> />
</template> </div>
</List.Item.Meta> </div>
</List.Item> </div>
</template> </div>
</List>
</template> </template>
<template #actions="{ row }"> <template #actions="{ row }">
<TableAction <TableAction