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

- 将多处"参照"修改为"对照"，使文档表述更准确

✨ feat(cell): 实现单元格基础组件

- 创建单元格组组件：`mini/src/components/tdesign/cell-group/index.tsx`
- 创建单元格组件：`mini/src/components/tdesign/cell/index.tsx`
- 添加单元格组样式文件：`mini/src/components/tdesign/cell-group/index.css`
- 添加单元格样式文件：`mini/src/components/tdesign/cell/index.css`
- 实现单元格标题、图标、箭头显示等基础功能
- 应用1px边框处理方案
- 支持多种对齐方式和交互状态

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

@@ -22,31 +22,31 @@ Draft
   - [ ] 实现单元格组件
     - [ ] 创建 `mini/src/components/tdesign/cell-group/index.tsx` 单元格组组件
     - [ ] 创建 `mini/src/components/tdesign/cell/index.tsx` 单元格组件
-    - [ ] 参照 `mini/tdesign/cell/`, `mini/tdesign/cell-group` 实现单元格布局
+    - [ ] 对照 `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/` 实现用户信息布局
+    - [ ] 对照 `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/` 实现订单状态布局
+    - [ ] 对照 `tcb-shop-demo/pages/usercenter/components/order-group/` 实现订单状态布局
     - [ ] 实现4个状态：待付款、待发货、待收货、待评价
     - [ ] 实现订单数量显示和点击跳转功能
     - [ ] 应用tcb-shop-demo的订单卡片样式
   - [ ] 实现客服弹窗组件
     - [ ] 创建 `mini/src/components/tdesign/popup/index.tsx` 弹窗组件
-    - [ ] 参照 `mini/tdesign/popup/` 实现弹窗布局
+    - [ ] 对照 `mini/tdesign/popup/` 实现弹窗布局
     - [ ] 实现电话客服功能（wx.makePhoneCall）
     - [ ] 实现在线客服功能（open-type="contact"）
     - [ ] 实现服务时间显示
 
 - [ ] 重构用户中心页面 (AC: 1, 2, 5, 6)
   - [ ] 重构 `mini/src/pages/profile/index.tsx` 用户中心页面
-  - [ ] 参照 `tcb-shop-demo/pages/usercenter/index.wxml` 实现页面结构
+  - [ ] 对照 `tcb-shop-demo/pages/usercenter/index.wxml` 实现页面结构
   - [ ] 集成TDesign user-center-card组件实现用户信息卡片（带背景图片）
   - [ ] 集成TDesign order-group组件实现订单状态卡片
   - [ ] 集成TDesign cell-group和cell组件实现功能菜单

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

@@ -0,0 +1,57 @@
+/* 单元格组样式 */
+.tdesign-cell-group {
+  position: relative;
+}
+
+/* 标题样式 */
+.tdesign-cell-group__title {
+  font-family: PingFangSC-Regular;
+  font-size: var(--td-cell-group-title-font-size, 28rpx);
+  color: var(--td-cell-group-title-color, rgba(0,0,0,.4));
+  text-align: left;
+  line-height: var(--td-cell-group-title-line-height, 90rpx);
+  background-color: var(--td-cell-group-title-bg-color, #f3f3f3);
+  padding-left: var(--td-cell-group-title-padding-left, 32rpx);
+}
+
+/* 内容区域 */
+.tdesign-cell-group__content {
+  position: relative;
+}
+
+/* 边框处理 */
+.tdesign-cell-group--bordered::before {
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  right: 0;
+  left: 0;
+  top: 0;
+  border-top: 1px solid var(--td-cell-group-border-color, #e7e7e7);
+  transform: scaleY(.5);
+  transform-origin: 0 0;
+  transform-origin: top;
+  z-index: 1;
+}
+
+.tdesign-cell-group--bordered::after {
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  border-bottom: 1px solid var(--td-cell-group-border-color, #e7e7e7);
+  transform: scaleY(.5);
+  transform-origin: bottom;
+  z-index: 1;
+}
+
+/* 卡片主题 */
+.tdesign-cell-group--card {
+  margin: 0 32rpx;
+  border-radius: var(--td-radius-large, 18rpx);
+  overflow: hidden;
+}

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

@@ -0,0 +1,39 @@
+import React from 'react'
+import { View } from '@tarojs/components'
+import './index.css'
+
+interface CellGroupProps {
+  title?: string
+  bordered?: boolean
+  theme?: 'card'
+  children?: React.ReactNode
+  className?: string
+}
+
+export default function TDesignCellGroup({
+  title,
+  bordered = true,
+  theme,
+  children,
+  className = ''
+}: CellGroupProps) {
+  return (
+    <View className={`tdesign-cell-group ${className}`}>
+      {title && (
+        <View className="tdesign-cell-group__title">
+          {title}
+        </View>
+      )}
+
+      <View
+        className={`
+          tdesign-cell-group__content
+          ${bordered ? 'tdesign-cell-group--bordered' : ''}
+          ${theme ? `tdesign-cell-group--${theme}` : ''}
+        `}
+      >
+        {children}
+      </View>
+    </View>
+  )
+}

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

@@ -0,0 +1,124 @@
+/* 单元格基础样式 */
+.tdesign-cell {
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--td-cell-vertical-padding, 32rpx) var(--td-cell-horizontal-padding, 32rpx);
+  line-height: var(--td-cell-line-height, 48rpx);
+  height: var(--td-cell-height, auto);
+  background-color: var(--td-cell-bg-color, #fff);
+}
+
+/* 边框处理 */
+.tdesign-cell--bordered::after {
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  border-bottom: var(--td-cell-border-width, 1px) solid var(--td-cell-border-color, #e7e7e7);
+  transform: scaleY(.5);
+  transform-origin: bottom;
+  left: var(--td-cell-border-left-space, 32rpx);
+  right: var(--td-cell-border-right-space, 0);
+}
+
+/* 描述文本 */
+.tdesign-cell__description {
+  font-size: var(--td-cell-description-font-size, 28rpx);
+  line-height: var(--td-cell-description-line-height, 44rpx);
+  color: var(--td-cell-description-color, rgba(0,0,0,.6));
+}
+
+.tdesign-cell__description-text {
+  margin-top: calc(var(--td-spacer, 16rpx) / 2);
+}
+
+/* 备注文本 */
+.tdesign-cell__note {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  color: var(--td-cell-note-color, rgba(0,0,0,.4));
+  font-size: var(--td-cell-note-font-size, 32rpx);
+}
+
+.tdesign-cell__title {
+  margin-right: var(--td-spacer-2, 32rpx);
+}
+
+.tdesign-cell__note,
+.tdesign-cell__title {
+  flex: 1 1 auto;
+}
+
+.tdesign-cell__note:empty,
+.tdesign-cell__title:empty {
+  display: none;
+}
+
+.tdesign-cell__title-text {
+  display: flex;
+  font-size: var(--td-cell-title-font-size, 32rpx);
+  color: var(--td-cell-title-color, rgba(0,0,0,.9));
+  font-weight: 400;
+}
+
+/* 左侧和右侧区域 */
+.tdesign-cell__left,
+.tdesign-cell__right {
+  align-self: stretch;
+}
+
+.tdesign-cell__left:not(:empty) {
+  margin-right: var(--td-spacer-1, 24rpx);
+}
+
+.tdesign-cell__left-icon {
+  color: var(--td-cell-left-icon-color, #0052d9);
+  font-size: var(--td-cell-left-icon-font-size, 48rpx);
+}
+
+.tdesign-cell__left-image {
+  height: var(--td-cell-image-height, 96rpx);
+  width: var(--td-cell-image-width, 96rpx);
+}
+
+.tdesign-cell__note:not(:empty) + .tdesign-cell__right {
+  margin-left: calc(var(--td-spacer, 16rpx) / 2);
+}
+
+.tdesign-cell__right {
+  display: flex;
+}
+
+.tdesign-cell__right-icon {
+  color: var(--td-cell-right-icon-color, rgba(0,0,0,.4));
+  font-size: var(--td-cell-right-icon-font-size, 48rpx);
+}
+
+.tdesign-cell__right--middle {
+  align-items: center;
+}
+
+.tdesign-cell__right--top {
+  align-items: flex-start;
+}
+
+.tdesign-cell__right--bottom {
+  align-items: flex-end;
+}
+
+/* 悬停状态 */
+.tdesign-cell--hover-active {
+  background-color: var(--td-cell-hover-color, #f3f3f3);
+}
+
+/* 必填标记 */
+.tdesign-cell--required {
+  font-size: var(--td-cell-required-font-size, 32rpx);
+  color: var(--td-cell-required-color, #d54941);
+}

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

@@ -0,0 +1,133 @@
+import React from 'react'
+import { View, Text } from '@tarojs/components'
+import TDesignIcon from '../icon'
+import './index.css'
+
+interface CellProps {
+  title?: string
+  description?: string
+  note?: string
+  image?: string
+  leftIcon?: string
+  rightIcon?: string
+  required?: boolean
+  bordered?: boolean
+  hover?: boolean
+  arrow?: boolean | string
+  align?: 'top' | 'middle' | 'bottom'
+  onClick?: (event: any) => void
+  className?: string
+  children?: React.ReactNode
+}
+
+export default function TDesignCell({
+  title,
+  description,
+  note,
+  image,
+  leftIcon,
+  rightIcon,
+  required = false,
+  bordered = true,
+  hover = false,
+  arrow = false,
+  align = 'middle',
+  onClick,
+  className = '',
+  children
+}: CellProps) {
+  const handleClick = (event: any) => {
+    onClick?.(event)
+  }
+
+  const getArrowIcon = () => {
+    if (arrow === true) return 'chevron-right'
+    if (typeof arrow === 'string') return arrow
+    return null
+  }
+
+  const arrowIcon = getArrowIcon()
+
+  return (
+    <View
+      className={`
+        tdesign-cell
+        tdesign-cell--align-${align}
+        ${bordered ? 'tdesign-cell--bordered' : ''}
+        ${hover ? 'tdesign-cell--hover' : ''}
+        ${className}
+      `}
+      hoverClass={hover ? 'tdesign-cell--hover-active' : ''}
+      hoverStayTime={70}
+      onClick={handleClick}
+    >
+      {/* 左侧区域 */}
+      <View className="tdesign-cell__left">
+        {leftIcon && (
+          <TDesignIcon
+            name={leftIcon}
+            size="var(--td-cell-left-icon-font-size, 48rpx)"
+            color="var(--td-cell-left-icon-color, #0052d9)"
+            className="tdesign-cell__left-icon"
+          />
+        )}
+
+        {image && (
+          <View className="tdesign-cell__left-image">
+            {/* 这里可以使用 Taro 的 Image 组件 */}
+            <Text>Image: {image}</Text>
+          </View>
+        )}
+      </View>
+
+      {/* 中间区域 */}
+      <View className="tdesign-cell__title">
+        {title && (
+          <View className="tdesign-cell__title-text">
+            {title}
+            {required && <Text className="tdesign-cell--required">&nbsp;*</Text>}
+          </View>
+        )}
+
+        {description && (
+          <View className="tdesign-cell__description">
+            <Text className="tdesign-cell__description-text">
+              {description}
+            </Text>
+          </View>
+        )}
+      </View>
+
+      {/* 右侧区域 */}
+      <View className={`tdesign-cell__note ${note ? '' : 'tdesign-cell__note--empty'}`}>
+        {note && (
+          <Text className="tdesign-cell__note-text">
+            {note}
+          </Text>
+        )}
+      </View>
+
+      <View className={`tdesign-cell__right tdesign-cell__right--${align}`}>
+        {rightIcon && (
+          <TDesignIcon
+            name={rightIcon}
+            size="var(--td-cell-right-icon-font-size, 48rpx)"
+            color="var(--td-cell-right-icon-color, rgba(0,0,0,.4))"
+            className="tdesign-cell__right-icon"
+          />
+        )}
+
+        {arrowIcon && (
+          <TDesignIcon
+            name={arrowIcon}
+            size="var(--td-cell-right-icon-font-size, 48rpx)"
+            color="var(--td-cell-right-icon-color, rgba(0,0,0,.4))"
+            className="tdesign-cell__right-icon"
+          />
+        )}
+
+        {children}
+      </View>
+    </View>
+  )
+}