"use client"; // C 端个人中心区块 —— 顶部头像 + 昵称 + 等级 Tag + 一排数据 Statistic（积分/优惠券/收藏/余额）。 // Tabs 含：我的订单/收货地址/账户设置，订单列表用 List/ListItem 展示。 // 所有数据内联，复制即独立运行，无任何外部依赖。 import { useState } from "react"; import { ChevronRight, MapPin, Settings, ShoppingBag } from "lucide-react"; import { Avatar, Button, List, ListItem, Progress, Statistic, Tag, Tabs, TabsList, TabsPanel, TabsTab, Text, toast, } from "@hulianui/ui"; // ---- 等级配置 ---- const LEVELS = [ { name: "铜牌会员", min: 0, max: 999, color: "#b45309", colorDark: "#7c3a06" }, { name: "银牌会员", min: 1000, max: 4999, color: "#6b7280", colorDark: "#4b5563" }, { name: "金牌会员", min: 5000, max: 19999, color: "#d97706", colorDark: "#92560a" }, { name: "钻石会员", min: 20000, max: Infinity, color: "#8b5cf6", colorDark: "#6d28d9" }, ]; const MOCK_POINTS = 2680; const MOCK_BALANCE = 188.5; const MOCK_COUPONS = 3; const MOCK_FAVORITES = 27; function getLevelInfo(points: number) { let idx = 0; for (let i = LEVELS.length - 1; i >= 0; i--) { if (points >= LEVELS[i].min) { idx = i; break; } } const level = LEVELS[idx]; const next = LEVELS[idx + 1]; const progress = next ? Math.min(100, Math.round(((points - level.min) / (next.min - level.min)) * 100)) : 100; return { level, next, progress }; } // ---- 订单数据 ---- type OrderStatus = "待付款" | "待发货" | "待收货" | "已完成" | "已取消"; const STATUS_TONE: Record = { "待付款": "warning", "待发货": "brand", "待收货": "brand", "已完成": "success", "已取消": "neutral", }; interface Order { id: string; name: string; price: number; qty: number; status: OrderStatus; date: string; gradient: string; } const ORDERS: Order[] = [ { id: "o1", name: "轻奢蚕丝枕套双面桑蚕丝 × 2", price: 596, qty: 2, status: "待收货", date: "2026-06-02", gradient: "from-rose-200 to-pink-100" }, { id: "o2", name: "人体工学办公椅腰托可调", price: 1299, qty: 1, status: "已完成", date: "2026-05-18", gradient: "from-slate-200 to-gray-100" }, { id: "o3", name: "OLED 护眼台灯 Pro Max 版", price: 459, qty: 1, status: "已完成", date: "2026-05-10", gradient: "from-amber-200 to-yellow-100" }, { id: "o4", name: "竹纤维速干浴巾套装 3 件", price: 128, qty: 1, status: "待付款", date: "2026-06-04", gradient: "from-emerald-200 to-teal-100" }, ]; // ---- 地址数据 ---- const ADDRESSES = [ { id: "a1", name: "张伟", phone: "138****8866", addr: "浙江省杭州市余杭区文一西路 969 号瀚云大厦", isDefault: true }, { id: "a2", name: "张伟（公司）", phone: "138****8866", addr: "浙江省杭州市西湖区古墩路 588 号", isDefault: false }, ]; function formatPrice(n: number) { return `¥${n.toLocaleString("zh-CN", { minimumFractionDigits: 2 })}`; } // ---- 子组件 ---- function OrdersTab() { return ( {ORDERS.map((order) => ( toast({ title: `查看订单 ${order.id}（演示）`, tone: "info" })} >

{/* 缩略图 */}

{/* 信息 */}

{order.name}

{order.date}

{formatPrice(order.price)} {order.status}

))} ); } function AddressTab() { return (

{ADDRESSES.map((addr) => (

{addr.name} {addr.phone} {addr.isDefault && ( 默认 )}

{addr.addr}

))}

); } function SettingsTab() { const fields = [ { label: "昵称", value: "瀚选用户" }, { label: "手机号", value: "138****8866" }, { label: "邮箱", value: "user@hulian.dev" }, { label: "登录密码", value: "已设置" }, ]; return (

{fields.map((f) => (

{f.label} {f.value}

))}

); } // ---- 主区块 ---- export function UserProfileBlock() { const { level, next, progress } = getLevelInfo(MOCK_POINTS); return (

{/* 会员卡 */}

{/* 头像 + 昵称 + 等级 */}

瀚选用户 {level.name}

UID：HS10086001

{/* 等级进度条 */}

{level.name} {next ? ( 距 {next.name} 还差 {(next.min - MOCK_POINTS).toLocaleString()} 积分 ) : ( 已达最高等级 )}

{/* 核心数据 Statistic */}

积分} valueStyle={{ color: "white", fontSize: "1.25rem", fontWeight: 700 }} animate /> 张} title={优惠券} valueStyle={{ color: "white", fontSize: "1.25rem", fontWeight: 700 }} /> 收藏} valueStyle={{ color: "white", fontSize: "1.25rem", fontWeight: 700 }} /> ¥} precision={2} title={余额} valueStyle={{ color: "white", fontSize: "1.25rem", fontWeight: 700 }} />

{/* Tabs */} 我的订单收货地址账户设置

); }