✨ feat(components): 实现徽章组件并集成到订单组

- 创建 `mini/src/components/tdesign/badge/index.tsx` 徽章组件
- 对照 `mini/tdesign/badge/` 实现徽章布局
- 实现数字徽章、点状徽章显示
- 实现最大数量限制（max-count="99"）
- 实现颜色自定义（color="#FF4646"）
- 集成TDesignBadge组件到订单组组件，替换原有徽章实现

📝 docs(story): 更新用户中心UI重构文档

- 添加徽章组件实现记录到story文档
- 记录徽章组件的功能点和实现细节

docs/stories/001.007.user-center-ui-refactor.story.md

@@ -25,6 +25,12 @@ Draft
     - [x] 对照 `mini/tdesign/cell/`, `mini/tdesign/cell-group` 实现单元格布局
     - [x] 实现标题、图标、箭头显示
     - [x] 应用1px边框处理方案
+  - [x] 实现徽章组件
+    - [x] 创建 `mini/src/components/tdesign/badge/index.tsx` 徽章组件
+    - [x] 对照 `mini/tdesign/badge/` 实现徽章布局
+    - [x] 实现数字徽章、点状徽章显示
+    - [x] 实现最大数量限制（max-count="99"）
+    - [x] 实现颜色自定义（color="#FF4646"）
   - [x] 实现用户中心卡片组件
     - [x] 创建 `mini/src/components/tdesign/user-center-card/index.tsx` 用户中心卡片组件
     - [x] 对照 `/mnt/code/186-175-template-6/tcb-shop-demo/pages/usercenter/components/user-center-card/` 实现用户信息布局
@@ -37,6 +43,7 @@ Draft
     - [x] 实现4个状态：待付款、待发货、待收货、待评价
     - [x] 实现订单数量显示和点击跳转功能
     - [x] 应用tcb-shop-demo的订单卡片样式
+    - [x] 集成TDesignBadge组件实现徽章功能
   - [ ] 实现客服弹窗组件
     - [ ] 创建 `mini/src/components/tdesign/popup/index.tsx` 弹窗组件
     - [ ] 对照 `mini/tdesign/popup/` 实现弹窗布局

mini/src/components/tdesign/badge/index.css

@@ -0,0 +1,67 @@
+/* 徽章组件样式 - 严格对照 TDesign 实现 */
+.tdesign-badge {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+}
+
+/* 基础徽章样式 */
+.tdesign-badge--count {
+  padding: 0 8rpx;
+  font-size: 20rpx;
+  color: #fff;
+  background-color: #FF4646;
+  text-align: center;
+  font-weight: 600;
+  border-radius: 4rpx;
+}
+
+/* 点状徽章 */
+.tdesign-badge--dot {
+  height: 16rpx;
+  border-radius: 50%;
+  min-width: 16rpx;
+  padding: 0;
+}
+
+/* 尺寸变体 */
+.tdesign-badge--small {
+  height: 24rpx;
+  min-width: 24rpx;
+  line-height: 24rpx;
+  font-size: 16rpx;
+}
+
+.tdesign-badge--medium {
+  height: 32rpx;
+  min-width: 32rpx;
+  line-height: 32rpx;
+  font-size: 20rpx;
+}
+
+.tdesign-badge--large {
+  height: 40rpx;
+  min-width: 40rpx;
+  line-height: 40rpx;
+  font-size: 24rpx;
+  padding: 0 10rpx;
+}
+
+/* 形状变体 */
+.tdesign-badge--circle {
+  border-radius: 100rpx;
+}
+
+.tdesign-badge--square {
+  border-radius: 4rpx;
+}
+
+/* 徽章内容 */
+.tdesign-badge__content {
+  display: block;
+  line-height: 1;
+  color: #fff;
+  font-weight: bold;
+}

mini/src/components/tdesign/badge/index.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import { View, Text } from '@tarojs/components'
+import './index.css'
+
+interface BadgeProps {
+  count?: number
+  maxCount?: number
+  color?: string
+  dot?: boolean
+  shape?: 'circle' | 'square'
+  size?: 'small' | 'medium' | 'large'
+  showZero?: boolean
+  offset?: [number, number]
+  className?: string
+}
+
+export default function TDesignBadge({
+  count = 0,
+  maxCount = 99,
+  color = '#FF4646',
+  dot = false,
+  shape = 'circle',
+  size = 'medium',
+  showZero = false,
+  offset,
+  className = ''
+}: BadgeProps) {
+  // 是否显示徽章
+  const shouldShow = dot || (showZero ? count >= 0 : count > 0)
+
+  // 显示的内容
+  const displayContent = dot ? '' : (count > maxCount ? `${maxCount}+` : count.toString())
+
+  // 计算偏移量
+  const offsetStyle = offset ? {
+    transform: `translate(${offset[0]}rpx, ${offset[1]}rpx)`
+  } : {}
+
+  if (!shouldShow) {
+    return null
+  }
+
+  return (
+    <View
+      className={`tdesign-badge tdesign-badge--${size} tdesign-badge--${shape} ${dot ? 'tdesign-badge--dot' : 'tdesign-badge--count'} ${className}`}
+      style={{
+        backgroundColor: color,
+        ...offsetStyle
+      }}
+    >
+      {!dot && (
+        <Text className="tdesign-badge__content">
+          {displayContent}
+        </Text>
+      )}
+    </View>
+  )
+}

mini/src/components/tdesign/order-group/index.css

@@ -64,28 +64,14 @@
   position: relative;
 }
 
-/* 徽章 */
-.tdesign-order-group__badge {
+/* 徽章位置调整 - 使用TDesignBadge组件 */
+.tdesign-order-group__item__icon .tdesign-badge {
   position: absolute;
   top: -8rpx;
   right: -8rpx;
-  background-color: #FF4646;
-  border-radius: 20rpx;
-  min-width: 32rpx;
-  height: 32rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   z-index: 1;
 }
 
-.tdesign-order-group__badge-count {
-  color: #fff;
-  font-size: 20rpx;
-  line-height: 1;
-  font-weight: bold;
-}
-
 /* 图标样式 */
 .tdesign-order-group__item__icon-image {
   background-image: -webkit-linear-gradient(90deg, #6a6a6a 0%, #929292 100%);

mini/src/components/tdesign/order-group/index.tsx

@@ -3,6 +3,7 @@ import { View, Text } from '@tarojs/components'
 import TDesignCellGroup from '../cell-group'
 import TDesignCell from '../cell'
 import TDesignIcon from '../icon'
+import TDesignBadge from '../badge'
 import './index.css'
 
 interface OrderTagInfo {
@@ -70,13 +71,12 @@ export default function TDesignOrderGroup({
           >
             {/* 图标和徽章 */}
             <View className="tdesign-order-group__item__icon">
-              {item.orderNum && item.orderNum > 0 ? (
-                <View className="tdesign-order-group__badge">
-                  <Text className="tdesign-order-group__badge-count">
-                    {item.orderNum > 99 ? '99+' : item.orderNum}
-                  </Text>
-                </View>
-              ) : null}
+              <TDesignBadge
+                count={item.orderNum}
+                maxCount={99}
+                color="#FF4646"
+                offset={[8, -8]}
+              />
 
               <TDesignIcon
                 name={item.iconName}