✨ feat(user-center-card): add user center card component

- create user center card component with avatar, nickname and phone display
- support edit button and avatar click events
- add default avatar and background image
- implement responsive layout with flexbox
- add CSS styles for proper visual presentation

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

@@ -0,0 +1,76 @@
+.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;
+}

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

@@ -0,0 +1,86 @@
+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>
+  )
+}