Bläddra i källkod

🔧 chore(components): remove TDesign components and update task status

- 删除已实现的TDesign组件:
  - 删除 `mini/src/components/tdesign/cell/` 单元格组件
  - 删除 `mini/src/components/tdesign/cell-group/` 单元格组组件
  - 删除 `mini/src/components/tdesign/order-group/` 订单状态卡片组件
  - 删除 `mini/src/components/tdesign/user-center-card/` 用户中心卡片组件
- 更新任务清单状态:
  - 将"实现单元格组件"及其子任务标记为未完成
  - 将"实现用户中心卡片组件"和"实现订单状态卡片组件"标记为未完成
  - 更新单元格组件实现参照路径为 `mini/tdesign/cell/` 和 `mini/tdesign/cell-group`
yourname 1 månad sedan
förälder
incheckning
4326e9fbcb

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

@@ -19,27 +19,27 @@ Draft
 
 ## Tasks / Subtasks
 - [ ] 实现TDesign用户中心组件 (AC: 1, 2, 3, 4, 5, 7)
-  - [x] 实现用户中心卡片组件
-    - [x] 创建 `mini/src/components/tdesign/user-center-card/index.tsx` 用户中心卡片组件
-    - [x] 参照 `tcb-shop-demo/components/user-center-card/` 实现用户信息布局
-    - [x] 实现背景图片:`https://we-retail-static-1300977798.cos.ap-guangzhou.myqcloud.com/retail-mp/common/user-center-bg.png`
-    - [x] 实现用户头像、昵称、手机号显示
-    - [x] 应用tcb-shop-demo的用户中心卡片样式
-  - [x] 实现订单状态卡片组件
-    - [x] 创建 `mini/src/components/tdesign/order-group/index.tsx` 订单状态卡片组件
-    - [x] 参照 `tcb-shop-demo/components/order-group/` 实现订单状态布局
-    - [x] 实现4个状态:待付款、待发货、待收货、待评价
-    - [x] 实现订单数量显示和点击跳转功能
-    - [x] 应用tcb-shop-demo的订单卡片样式
-  - [x] 实现单元格组件
-    - [x] 创建 `mini/src/components/tdesign/cell-group/index.tsx` 单元格组组件
-    - [x] 创建 `mini/src/components/tdesign/cell/index.tsx` 单元格组件
-    - [x] 参照 `tcb-shop-demo/components/cell/` 实现单元格布局
-    - [x] 实现标题、图标、箭头显示
-    - [x] 应用1px边框处理方案
+  - [ ] 实现单元格组件
+    - [ ] 创建 `mini/src/components/tdesign/cell-group/index.tsx` 单元格组组件
+    - [ ] 创建 `mini/src/components/tdesign/cell/index.tsx` 单元格组件
+    - [ ] 参照 `mini/tdesign/cell/`, `mini/tdesign/cell-group` 实现单元格布局
+    - [ ] 实现标题、图标、箭头显示
+    - [ ] 应用1px边框处理方案
+  - [ ] 实现用户中心卡片组件
+    - [ ] 创建 `mini/src/components/tdesign/user-center-card/index.tsx` 用户中心卡片组件
+    - [ ] 参照 `tcb-shop-demo/pages/usercenter/components/user-center-card/` 实现用户信息布局
+    - [ ] 实现背景图片:`https://we-retail-static-1300977798.cos.ap-guangzhou.myqcloud.com/retail-mp/common/user-center-bg.png`
+    - [ ] 实现用户头像、昵称、手机号显示
+    - [ ] 应用tcb-shop-demo的用户中心卡片样式
+  - [ ] 实现订单状态卡片组件
+    - [ ] 创建 `mini/src/components/tdesign/order-group/index.tsx` 订单状态卡片组件
+    - [ ] 参照 `tcb-shop-demo/pages/usercenter/components/order-group/` 实现订单状态布局
+    - [ ] 实现4个状态:待付款、待发货、待收货、待评价
+    - [ ] 实现订单数量显示和点击跳转功能
+    - [ ] 应用tcb-shop-demo的订单卡片样式
   - [ ] 实现客服弹窗组件
     - [ ] 创建 `mini/src/components/tdesign/popup/index.tsx` 弹窗组件
-    - [ ] 参照 `tcb-shop-demo/components/popup/` 实现弹窗布局
+    - [ ] 参照 `mini/tdesign/popup/` 实现弹窗布局
     - [ ] 实现电话客服功能(wx.makePhoneCall)
     - [ ] 实现在线客服功能(open-type="contact")
     - [ ] 实现服务时间显示

+ 0 - 28
mini/src/components/tdesign/cell-group/index.css

@@ -1,28 +0,0 @@
-.tdesign-cell-group {
-  margin: 20rpx;
-  background: #fff;
-  border-radius: 16rpx;
-  overflow: hidden;
-}
-
-.tdesign-cell-group__title {
-  padding: 24rpx 40rpx;
-  font-size: 28rpx;
-  color: #999;
-  background: #fafafa;
-  border-bottom: 1px solid #f5f5f5;
-}
-
-.tdesign-cell-group__content {
-  position: relative;
-}
-
-.tdesign-cell-group__content--border {
-  border-radius: 16rpx;
-  overflow: hidden;
-}
-
-/* 最后一个单元格不需要底部边框 */
-.tdesign-cell-group__content .tdesign-cell:last-child::after {
-  display: none;
-}

+ 0 - 36
mini/src/components/tdesign/cell-group/index.tsx

@@ -1,36 +0,0 @@
-import { View } from '@tarojs/components'
-import './index.css'
-
-interface CellGroupProps {
-  /** 单元格组标题 */
-  title?: string
-  /** 是否显示边框 */
-  border?: boolean
-  /** 自定义样式类 */
-  className?: string
-  /** 子元素 */
-  children?: React.ReactNode
-}
-
-export default function TDesignCellGroup({
-  title,
-  border = true,
-  className = '',
-  children
-}: CellGroupProps) {
-  return (
-    <View className={`tdesign-cell-group ${className}`}>
-      {/* 标题 */}
-      {title && (
-        <View className="tdesign-cell-group__title">
-          {title}
-        </View>
-      )}
-
-      {/* 单元格列表 */}
-      <View className={`tdesign-cell-group__content ${border ? 'tdesign-cell-group__content--border' : ''}`}>
-        {children}
-      </View>
-    </View>
-  )
-}

+ 0 - 51
mini/src/components/tdesign/cell/index.css

@@ -1,51 +0,0 @@
-.tdesign-cell {
-  display: flex;
-  align-items: center;
-  padding: 32rpx 40rpx;
-  background: #fff;
-  position: relative;
-}
-
-.tdesign-cell--border::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 40rpx;
-  right: 0;
-  height: 1px;
-  background: #f5f5f5;
-  transform: scaleY(0.5);
-  transform-origin: 0 0;
-}
-
-.tdesign-cell__icon {
-  margin-right: 24rpx;
-  display: flex;
-  align-items: center;
-}
-
-.tdesign-cell__content {
-  flex: 1;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.tdesign-cell__title {
-  font-size: 32rpx;
-  color: #333;
-  line-height: 1.2;
-}
-
-.tdesign-cell__value {
-  font-size: 28rpx;
-  color: #999;
-  line-height: 1.2;
-  text-align: right;
-}
-
-.tdesign-cell__arrow {
-  margin-left: 16rpx;
-  display: flex;
-  align-items: center;
-}

+ 0 - 71
mini/src/components/tdesign/cell/index.tsx

@@ -1,71 +0,0 @@
-import { View, Text } from '@tarojs/components'
-import TDesignIcon from '../icon'
-import './index.css'
-
-interface CellProps {
-  /** 单元格标题 */
-  title: string
-  /** 单元格值 */
-  value?: string
-  /** 左侧图标名称 */
-  icon?: string
-  /** 是否显示箭头 */
-  arrow?: boolean
-  /** 是否显示边框 */
-  border?: boolean
-  /** 点击回调 */
-  onClick?: () => void
-  /** 自定义样式类 */
-  className?: string
-}
-
-export default function TDesignCell({
-  title,
-  value = '',
-  icon,
-  arrow = false,
-  border = true,
-  onClick,
-  className = ''
-}: CellProps) {
-  return (
-    <View
-      className={`tdesign-cell ${border ? 'tdesign-cell--border' : ''} ${className}`}
-      onClick={onClick}
-    >
-      {/* 左侧图标 */}
-      {icon && (
-        <View className="tdesign-cell__icon">
-          <TDesignIcon
-            name={icon}
-            size="40rpx"
-            color="#333"
-          />
-        </View>
-      )}
-
-      {/* 内容区域 */}
-      <View className="tdesign-cell__content">
-        <Text className="tdesign-cell__title">
-          {title}
-        </Text>
-        {value && (
-          <Text className="tdesign-cell__value">
-            {value}
-          </Text>
-        )}
-      </View>
-
-      {/* 右侧箭头 */}
-      {arrow && (
-        <View className="tdesign-cell__arrow">
-          <TDesignIcon
-            name="arrow-right"
-            size="32rpx"
-            color="#999"
-          />
-        </View>
-      )}
-    </View>
-  )
-}

+ 0 - 78
mini/src/components/tdesign/order-group/index.css

@@ -1,78 +0,0 @@
-.order-group {
-  background: #fff;
-  border-radius: 16rpx;
-  margin: 20rpx;
-  padding: 32rpx;
-  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
-}
-
-.order-group__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 32rpx;
-  padding-bottom: 24rpx;
-  border-bottom: 2rpx solid #f5f5f5;
-}
-
-.order-group__title {
-  font-size: 32rpx;
-  font-weight: 600;
-  color: #333;
-}
-
-.order-group__all {
-  display: flex;
-  align-items: center;
-  color: #999;
-}
-
-.order-group__all-text {
-  font-size: 28rpx;
-  margin-right: 8rpx;
-}
-
-.order-group__list {
-  display: flex;
-  justify-content: space-between;
-}
-
-.order-group__item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex: 1;
-}
-
-.order-group__icon-container {
-  position: relative;
-  margin-bottom: 16rpx;
-}
-
-.order-group__badge {
-  position: absolute;
-  top: -8rpx;
-  right: -8rpx;
-  min-width: 32rpx;
-  height: 32rpx;
-  background: #ff4444;
-  border-radius: 16rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 2rpx solid #fff;
-}
-
-.order-group__badge-text {
-  color: #fff;
-  font-size: 20rpx;
-  font-weight: 600;
-  line-height: 1;
-  padding: 0 4rpx;
-}
-
-.order-group__label {
-  font-size: 24rpx;
-  color: #666;
-  line-height: 1.2;
-}

+ 0 - 119
mini/src/components/tdesign/order-group/index.tsx

@@ -1,119 +0,0 @@
-import { View, Text } from '@tarojs/components'
-import TDesignIcon from '../icon'
-import './index.css'
-
-interface OrderItem {
-  /** 订单状态类型 */
-  type: 'pending_payment' | 'pending_shipment' | 'pending_receipt' | 'pending_review'
-  /** 订单数量 */
-  count?: number
-  /** 状态名称 */
-  label: string
-  /** 点击回调 */
-  onClick?: () => void
-}
-
-interface OrderGroupProps {
-  /** 订单状态数据 */
-  orders?: OrderItem[]
-  /** 点击全部订单回调 */
-  onAllOrdersClick?: () => void
-}
-
-export default function OrderGroup({
-  orders = [
-    {
-      type: 'pending_payment',
-      count: 0,
-      label: '待付款',
-      onClick: () => {}
-    },
-    {
-      type: 'pending_shipment',
-      count: 0,
-      label: '待发货',
-      onClick: () => {}
-    },
-    {
-      type: 'pending_receipt',
-      count: 0,
-      label: '待收货',
-      onClick: () => {}
-    },
-    {
-      type: 'pending_review',
-      count: 0,
-      label: '待评价',
-      onClick: () => {}
-    }
-  ],
-  onAllOrdersClick
-}: OrderGroupProps) {
-  // 状态类型到图标的映射
-  const iconMap = {
-    pending_payment: 'shopping-cart',
-    pending_shipment: 'truck',
-    pending_receipt: 'package',
-    pending_review: 'star'
-  }
-
-  // 状态类型到颜色的映射
-  const colorMap = {
-    pending_payment: '#fa550f',
-    pending_shipment: '#ff6b35',
-    pending_receipt: '#00b96b',
-    pending_review: '#1890ff'
-  }
-
-  return (
-    <View className="order-group">
-      {/* 标题区域 */}
-      <View className="order-group__header">
-        <Text className="order-group__title">我的订单</Text>
-        <View
-          className="order-group__all"
-          onClick={onAllOrdersClick}
-        >
-          <Text className="order-group__all-text">全部订单</Text>
-          <TDesignIcon
-            name="arrow-right"
-            size="24rpx"
-            color="#999"
-          />
-        </View>
-      </View>
-
-      {/* 订单状态列表 */}
-      <View className="order-group__list">
-        {orders.map((order) => (
-          <View
-            key={order.type}
-            className="order-group__item"
-            onClick={order.onClick}
-          >
-            {/* 图标和数量 */}
-            <View className="order-group__icon-container">
-              <TDesignIcon
-                name={iconMap[order.type]}
-                size="48rpx"
-                color={colorMap[order.type]}
-              />
-              {(order.count || 0) > 0 && (
-                <View className="order-group__badge">
-                  <Text className="order-group__badge-text">
-                    {(order.count || 0) > 99 ? '99+' : (order.count || 0)}
-                  </Text>
-                </View>
-              )}
-            </View>
-
-            {/* 状态标签 */}
-            <Text className="order-group__label">
-              {order.label}
-            </Text>
-          </View>
-        ))}
-      </View>
-    </View>
-  )
-}

+ 0 - 76
mini/src/components/tdesign/user-center-card/index.css

@@ -1,76 +0,0 @@
-.user-center-card {
-  position: relative;
-  width: 100%;
-  height: 320rpx;
-  overflow: hidden;
-}
-
-.user-center-card__bg {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.user-center-card__content {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  padding: 60rpx 40rpx;
-  height: 100%;
-  box-sizing: border-box;
-}
-
-.user-center-card__avatar-container {
-  position: relative;
-  margin-right: 24rpx;
-}
-
-.user-center-card__avatar {
-  width: 120rpx;
-  height: 120rpx;
-  border-radius: 50%;
-  border: 4rpx solid rgba(255, 255, 255, 0.3);
-  background-color: #f5f5f5;
-}
-
-.user-center-card__info {
-  flex: 1;
-  color: #fff;
-}
-
-.user-center-card__name-container {
-  display: flex;
-  align-items: center;
-  margin-bottom: 16rpx;
-}
-
-.user-center-card__name {
-  font-size: 36rpx;
-  font-weight: 600;
-  line-height: 1.2;
-  margin-right: 16rpx;
-  max-width: 300rpx;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.user-center-card__edit {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 48rpx;
-  height: 48rpx;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.2);
-  backdrop-filter: blur(10rpx);
-}
-
-.user-center-card__phone {
-  font-size: 28rpx;
-  color: rgba(255, 255, 255, 0.8);
-  line-height: 1.2;
-}

+ 0 - 86
mini/src/components/tdesign/user-center-card/index.tsx

@@ -1,86 +0,0 @@
-import { View, Image, Text } from '@tarojs/components'
-import TDesignIcon from '../icon'
-import './index.css'
-
-interface UserCenterCardProps {
-  /** 用户头像URL */
-  avatar?: string
-  /** 用户昵称 */
-  nickname?: string
-  /** 用户手机号 */
-  phone?: string
-  /** 是否显示编辑按钮 */
-  showEdit?: boolean
-  /** 点击编辑按钮回调 */
-  onEdit?: () => void
-  /** 点击头像回调 */
-  onAvatarClick?: () => void
-}
-
-export default function UserCenterCard({
-  avatar = '',
-  nickname = '未登录',
-  phone = '',
-  showEdit = true,
-  onEdit,
-  onAvatarClick
-}: UserCenterCardProps) {
-  // 背景图片URL
-  const backgroundImage = 'https://we-retail-static-1300977798.cos.ap-guangzhou.myqcloud.com/retail-mp/common/user-center-bg.png'
-
-  // 默认头像
-  const defaultAvatar = 'https://we-retail-static-1300977798.cos.ap-guangzhou.myqcloud.com/retail-mp/common/avatar.png'
-
-  return (
-    <View className="user-center-card">
-      {/* 背景图片 */}
-      <Image
-        src={backgroundImage}
-        mode="aspectFill"
-        className="user-center-card__bg"
-      />
-
-      {/* 用户信息区域 */}
-      <View className="user-center-card__content">
-        {/* 头像区域 */}
-        <View
-          className="user-center-card__avatar-container"
-          onClick={onAvatarClick}
-        >
-          <Image
-            src={avatar || defaultAvatar}
-            mode="aspectFill"
-            className="user-center-card__avatar"
-          />
-        </View>
-
-        {/* 用户信息 */}
-        <View className="user-center-card__info">
-          <View className="user-center-card__name-container">
-            <Text className="user-center-card__name">
-              {nickname}
-            </Text>
-            {showEdit && (
-              <View
-                className="user-center-card__edit"
-                onClick={onEdit}
-              >
-                <TDesignIcon
-                  name="setting"
-                  size="32rpx"
-                  color="#fff"
-                />
-              </View>
-            )}
-          </View>
-
-          {phone && (
-            <Text className="user-center-card__phone">
-              {phone}
-            </Text>
-          )}
-        </View>
-      </View>
-    </View>
-  )
-}