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

- 新增 Badge 组件，替代项目内多处重复数字角标代码，支持 count、max、颜色、尺寸等配置
- 新增 ArrowRight 组件，替代项目内多处 '>' 文本箭头，采用 CSS 绘制，支持颜色和尺寸配置
- user、index 和 store页面相关角标已改用 Badge 组件，简化代码和统一样式
- user 页面箭头符号替换为 ArrowRight 组件，提升图标一致性和样式可控性
- app.config.ts 调整 tabbar 配置，将“订单”页替换为“购物车”页

src/app.config.ts

@@ -160,10 +160,10 @@ export default {
               text: '分类',
           },
           {
-              pagePath: 'pages/order/list',
-              iconPath: 'assets/tabbar/order.png',
-              selectedIconPath: 'assets/tabbar/order-active.png',
-              text: '订单',
+              pagePath: 'pages/shop/cart',
+              iconPath: 'assets/tabbar/cart.png',
+              selectedIconPath: 'assets/tabbar/cart-active.png',
+              text: '购物车',
           },
           {
               pagePath: 'pages/user/user',

src/components/common/ArrowRight/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { View } from '@tarojs/components'
+
+/**
+ * 右箭头图标（CSS V 形，颜色跟随 currentColor）
+ *
+ * 颜色通过 className 里的 text-* 类控制（如 'text-gray-400' / 'text-white'），
+ * 因为内部用 currentColor，会自动继承父元素 text color。
+ *
+ * @example
+ * <View className='flex items-center text-gray-400'>
+ *   <Text>全部订单</Text>
+ *   <ArrowRight className='ml-1' />
+ * </View>
+ */
+export interface ArrowRightProps {
+  /** 颜色/间距等 className（颜色用 text-* 类，跟随 currentColor） */
+  className?: string
+  /** V 形边长 px，默认 6 */
+  size?: number
+  /** 描边粗细 px，默认 1.5 */
+  thickness?: number
+}
+
+const ArrowRight: React.FC<ArrowRightProps> = ({
+  className = '',
+  size = 6,
+  thickness = 1.5,
+}) => (
+  <View
+    className={`inline-flex items-center justify-center ${className}`}
+    style={{
+      width: `${size}px`,
+      height: `${size}px`,
+      borderTop: `${thickness}px solid currentColor`,
+      borderRight: `${thickness}px solid currentColor`,
+      transform: 'rotate(45deg)',
+    }}
+  />
+)
+
+export default ArrowRight

src/components/common/Badge/index.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import { View, Text } from '@tarojs/components'
+
+/**
+ * 数字角标
+ * - count 为 0 / null / undefined 时不渲染
+ * - count > max 时显示 `${max}+`（默认 99+）
+ * - 通过 className 控制定位（通常配合父元素 relative + absolute -top-1 -right-1）
+ *
+ * @example
+ * <View className='relative'>
+ *   <Text>📦</Text>
+ *   <Badge count={14} className='absolute -top-1 -right-1' />
+ * </View>
+ *
+ * // 大尺寸 + 加粗（如门店中心卡片角标）
+ * <Badge count={5} className='absolute -top-1 -right-1' size={20} fontSize={11} fontWeight='bold' />
+ */
+export interface BadgeProps {
+  /** 数量；为 0 / null / undefined 时不渲染 */
+  count?: number | null
+  /** 超过此值显示 `${max}+`，默认 99 */
+  max?: number
+  /** 外层定位/样式 className（如 'absolute -top-1 -right-1'） */
+  className?: string
+  /** 背景色，默认红色 #ef4444 */
+  color?: string
+  /** 字体大小 px，默认 10 */
+  fontSize?: number
+  /** 角标尺寸 px（min-width 与 height 同步），默认 16 */
+  size?: number
+  /** 字重，默认 'normal' */
+  fontWeight?: 'normal' | 'medium' | 'bold'
+}
+
+const Badge: React.FC<BadgeProps> = ({
+  count,
+  max = 99,
+  className = '',
+  color = '#ef4444',
+  fontSize = 10,
+  size = 16,
+  fontWeight = 'normal',
+}) => {
+  // 0 / null / undefined / 负数 都不渲染
+  const n = Number(count) || 0
+  if (n <= 0) return null
+
+  const display = n > max ? `${max}+` : String(n)
+  // 横向 padding 跟随 size：16→2px，20→3px，避免多位数字挤压
+  const padding = Math.max(2, Math.round(size / 8))
+
+  return (
+    <View
+      className={`rounded-full text-white flex items-center justify-center ${className}`}
+      style={{
+        background: color,
+        minWidth: `${size}px`,
+        height: `${size}px`,
+        fontSize: `${fontSize}px`,
+        lineHeight: `${fontSize + 2}px`,
+        fontWeight,
+        paddingLeft: `${padding}px`,
+        paddingRight: `${padding}px`,
+      }}
+    >
+      <Text>{display}</Text>
+    </View>
+  )
+}
+
+export default Badge

src/pages/index/index.tsx

@@ -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' />

src/pages/store/center/index.tsx

@@ -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' />
               )}
 
               {/* 箭头 */}

src/pages/user/user.tsx

@@ -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>