feat(common): 抽取通用 Badge 和 ArrowRight 组件并统一替换内联角标

- 新增 Badge 组件,替代项目内多处重复数字角标代码,支持 count、max、颜色、尺寸等配置
- 新增 ArrowRight 组件,替代项目内多处 '>' 文本箭头,采用 CSS 绘制,支持颜色和尺寸配置
- user、index 和 store页面相关角标已改用 Badge 组件,简化代码和统一样式
- user 页面箭头符号替换为 ArrowRight 组件,提升图标一致性和样式可控性
- app.config.ts 调整 tabbar 配置,将“订单”页替换为“购物车”页
This commit is contained in:
2026-07-15 23:29:20 +08:00
parent b8fca7bed2
commit c12bba66eb
9 changed files with 177 additions and 26 deletions

View File

@@ -15,6 +15,7 @@ import type { CmsAd } from '@/api/cms/cmsAd/model'
import type { CmsArticle } from '@/api/cms/cmsArticle/model'
import type { ShopGoods } from '@/api/shop/shopGoods/model'
import Price from '@/components/common/Price'
import Badge from '@/components/common/Badge'
import { getCompressedImageUrl } from '@/utils/image'
definePageConfig({
@@ -245,11 +246,7 @@ const IndexPage: React.FC = () => {
<View onClick={handleMessageClick} className='relative'>
<Text className='text-xl'>🔔</Text>
{isClerk && newOrderCount > 0 && (
<View className='absolute -top-1 -right-1 min-w-[16px] h-4 px-1 bg-red-500 rounded-full flex items-center justify-center'>
<Text className='text-white text-[10px] leading-none font-medium'>
{newOrderCount > 99 ? '99+' : newOrderCount}
</Text>
</View>
<Badge count={newOrderCount} className='absolute -top-1 -right-1' />
)}
{isClerk && newOrderCount === 0 && (
<View className='absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full' />

View File

@@ -4,6 +4,7 @@ import Taro from '@tarojs/taro'
import { getMyClerk } from '@/api/shop/shopStoreUser'
import { listShopDealerApply } from '@/api/shop/shopDealerApply'
import { pageShopOrder } from '@/api/shop/shopOrder'
import Badge from '@/components/common/Badge'
definePageConfig({
navigationBarTitleText: '门店中心',
@@ -214,12 +215,8 @@ export default function StoreCenterPage() {
</View>
{/* 待处理角标 */}
{card.showBadge && getBadgeCount(card.key) > 0 && (
<View className='absolute -top-1 -right-1 min-w-[20px] h-[20px] rounded-full bg-red-500 flex items-center justify-center px-1.5'>
<Text className='text-white text-[11px] font-bold'>
{getBadgeCount(card.key) > 99 ? '99+' : getBadgeCount(card.key)}
</Text>
</View>
{card.showBadge && (
<Badge count={getBadgeCount(card.key)} className='absolute -top-1 -right-1' size={20} fontSize={11} fontWeight='bold' />
)}
{/* 箭头 */}

View File

@@ -11,6 +11,8 @@ import type { UserRole } from '@/api/system/userRole/model'
import { checkAndCacheVipStatus } from '@/utils/vip'
import { requireLogin } from '@/utils/login-guard'
import MemberBadge from '@/components/business/MemberBadge'
import Badge from '@/components/common/Badge'
import ArrowRight from '@/components/common/ArrowRight'
const UserPage: React.FC = () => {
const scrollHeight = useScrollHeight()
@@ -215,7 +217,7 @@ const UserPage: React.FC = () => {
))}
</View>
</View>
{isLoggedIn && <Text className='text-white text-opacity-60 text-sm'>{'>'}</Text>}
{isLoggedIn && <ArrowRight className='text-white text-opacity-60' />}
</View>
{/* 数据概览 */}
{isLoggedIn && (
@@ -258,9 +260,10 @@ const UserPage: React.FC = () => {
<View className='bg-white rounded-xl mx-3 mt-3 p-4'>
<View className='flex justify-between items-center mb-3'>
<Text className='text-base font-medium text-gray-800'></Text>
<Text className='text-xs text-gray-400' onClick={handleViewAllOrders}>
{'>'}
</Text>
<View className='flex items-center text-xs text-gray-400' onClick={handleViewAllOrders}>
<Text></Text>
<ArrowRight className='ml-1' />
</View>
</View>
<View className='grid grid-cols-4 gap-2'>
{[
@@ -277,12 +280,8 @@ const UserPage: React.FC = () => {
>
<Text className='text-xl mb-1'>{item.icon}</Text>
<Text className='text-xs text-gray-600'>{item.label}</Text>
{/* 数量角标:紧贴图标右上角;为 0 时不渲染 */}
{Number(item.count) > 0 && (
<View className='absolute -top-1 -right-1 bg-red-500 text-white rounded-full min-w-[16px] h-4 px-1 flex items-center justify-center' style={{ fontSize: '10px', lineHeight: '12px' }}>
{Number(item.count) > 99 ? '99+' : item.count}
</View>
)}
{/* 数量角标:count 为 0 时组件内部不渲染 */}
<Badge count={item.count} className='absolute -top-1 -right-1' />
</View>
))}
</View>
@@ -313,7 +312,7 @@ const UserPage: React.FC = () => {
)}
</View>
</View>
<Text className={`text-sm ${(item as any).highlight ? 'text-amber-700' : 'text-gray-300'}`}>{'>'}</Text>
<ArrowRight className={(item as any).highlight ? 'text-amber-700' : 'text-gray-300'} />
</View>
))}
</View>