[AI Generated]: feat(Views): 优化数据页数据卡交互与样式

miniprogram/pages/data/data.less

@@ -5,14 +5,146 @@
 
 	.data-card {
 		width: 100%;
+		overflow: hidden;
+		zoom: 1;
+		position: relative;
 		padding: 40rpx 30rpx 30rpx;
 		box-sizing: border-box;
 		border-radius: 24rpx;
 		margin-bottom: 30rpx;
 		background-color: #FFFFFF;
 
-		.userInfo {}
+		&::before {
+			content: "";
+			position: absolute;
+			top: 2rpx;
+			left: 2rpx;
+			right: 2rpx;
+			height: 88rpx;
+			background: linear-gradient(180deg, #D3E9FF 0%, #FCFBFD 100%);
+		}
 
+
+		/* 成员信息行 */
+		.userInfo {
+			position: relative;
+			z-index: 2;
+			width: 100%;
+			display: flex;
+			align-items: center;
+			margin-bottom: 30rpx;
+
+			/* 头像色块 */
+			.avatar {
+				width: 90rpx;
+				height: 90rpx;
+				margin-right: 24rpx;
+				border-radius: 18rpx;
+			}
+
+			/* 姓名 + meta */
+			.info {
+				flex: 1;
+
+				.info-name-row {
+					height: 40rpx;
+					display: flex;
+					align-items: center;
+					margin-bottom: 10rpx;
+
+					.info-name {
+						color: #252535;
+						height: 40rpx;
+						font-size: 30rpx;
+						font-weight: bold;
+						line-height: 40rpx;
+						margin-right: 20rpx;
+					}
+
+					/* 本人 badge */
+					.badge-self {
+						color: #1385FA;
+						height: 40rpx;
+						padding: 0 18rpx;
+						font-size: 24rpx;
+						line-height: 40rpx;
+						border-radius: 8rpx;
+						background-color: rgba(19, 133, 250, 0.2);
+					}
+				}
+
+				.info-meta {
+					height: 26rpx;
+					display: flex;
+					align-items: center;
+
+					.meta-text {
+						color: #808080;
+						height: 26rpx;
+						font-size: 24rpx;
+						line-height: 26rpx;
+					}
+
+					.meta-divider {
+						color: #CCCCCC;
+						font-size: 24rpx;
+						line-height: 26rpx;
+						margin: 0 12rpx;
+					}
+				}
+			}
+
+			/* 切换成员按钮 */
+			.btn {
+				color: #1385FA;
+				width: 120rpx;
+				height: 48rpx;
+				font-size: 24rpx;
+				font-weight: 500;
+				line-height: 48rpx;
+				border-radius: 8rpx;
+				text-align: center;
+				border: 2rpx solid #1385FA;
+			}
+		}
+
+		.card-divider {
+			position: relative;
+			z-index: 2;
+			width: calc(100% + 60rpx);
+			left: -30rpx;
+			height: 1rpx;
+			margin-bottom: 30rpx;
+			border-bottom: 2rpx dashed #EAECF1;
+
+			&::before {
+				content: "";
+				position: absolute;
+				left: -15rpx;
+				top: 0;
+				bottom: 0;
+				margin: auto;
+				width: 30rpx;
+				height: 30rpx;
+				background-color: #F5F7FB;
+				border-radius: 50%;
+			}
+
+			&::after {
+				content: "";
+				position: absolute;
+				right: -15rpx;
+				top: 0;
+				bottom: 0;
+				margin: auto;
+				width: 30rpx;
+				height: 30rpx;
+				background-color: #F5F7FB;
+				border-radius: 50%;
+			}
+		}
+
+		/* 时间范围 Tab */
 		.nav {
 			width: 100%;
 			height: 72rpx;
@@ -41,6 +173,7 @@
 			}
 		}
 
+		/* 统计摘要 4 格 */
 		.summary {
 			width: 100%;
 			display: flex;
@@ -51,25 +184,48 @@
 			border-radius: 16rpx;
 
 			.summary-item {
-				flex: 1
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
 
-				// > view:first-of-type {
-				// 	width: 94rpx;
-				// 	height: 23rpx;
-				// 	font-family: HarmonyOS Sans SC;
-				// 	font-weight: 400;
-				// 	font-size: 24rpx;
-				// 	color: #808080;
-				// 	margin-bottom: 30rpx;
-				// }
+				.summary-label {
+					color: #808080;
+					height: 24rpx;
+					font-size: 24rpx;
+					line-height: 24rpx;
+					margin-bottom: 20rpx;
+				}
 
-				// > view:last-of-type {
+				.summary-value {
+					color: #252535;
+					height: 32rpx;
+					font-size: 32rpx;
+					font-weight: bold;
+					line-height: 32rpx;
 
-				// }
+					text {
+						color: #808080;
+						font-size: 24rpx;
+						font-weight: normal;
+						margin-left: 4rpx;
+					}
+				}
+
+				/* 体重下降(利好) */
+				.value-down {
+					color: #2AC79F;
+				}
+
+				/* 体重上升(警示) */
+				.value-up {
+					color: #FF4D4F;
+				}
 			}
 		}
 	}
 
+	/* 历史记录列表 */
 	.data-list {
 		width: 100%;
 
@@ -77,7 +233,7 @@
 			width: 100%;
 			margin-bottom: 30rpx;
 
-			> view:first-of-type {
+			>view:first-of-type {
 				color: #808080;
 				width: 100%;
 				height: 24rpx;
@@ -86,7 +242,7 @@
 				margin-bottom: 20rpx;
 			}
 
-			> view:last-of-type {
+			>view:last-of-type {
 				width: 100%;
 				height: 96rpx;
 				display: flex;
@@ -98,7 +254,7 @@
 				border-radius: 16rpx;
 				background-color: #FFFFFF;
 
-				> view {
+				>view {
 					color: #808080;
 					font-size: 26rpx;
 					height: 96rpx;
@@ -112,4 +268,4 @@
 			}
 		}
 	}
-}
+}

miniprogram/pages/data/data.ts

@@ -1,66 +1,159 @@
+/** 时间范围 */
+type TimeRange = '7d' | '30d' | '3m'
+
+/** 加载状态机 */
+type LoadStatus = 'idle' | 'loading' | 'loaded'
+
+/** 成员信息 */
+interface MemberInfo {
+	/** 唯一 ID */
+	id: string
+	/** 姓名 */
+	name: string
+	/** 性别 */
+	gender: '男' | '女'
+	/** 年龄 */
+	age: number
+	/** 身高(cm) */
+	height: number
+	/** 头像色块(无图片时使用) */
+	avatar: string
+	/** 是否本人 */
+	isSelf: boolean
+}
+
+/** 统计指标 */
+interface StatsData {
+	/** 最高体重(kg) */
+	maxWeight: number
+	/** 最低体重(kg) */
+	minWeight: number
+	/** 平均体重(kg) */
+	avgWeight: number
+	/** 体重变化(kg,正负) */
+	weightDiff: number
+}
+
+/** 时间范围 Tab 项 */
+interface RangeTab {
+	key: TimeRange
+	label: string
+}
+
+/** 单条测量记录 */
+interface RecordItem {
+	/** 唯一 ID */
+	id: string
+	/** 测量时间,格式 YYYY.MM.DD HH:mm */
+	time: string
+	/** 体重(kg) */
+	weight: number
+	/** BMI */
+	bmi: number
+	/** 体脂率(%) */
+	bodyFat: number
+}
+
+/**
+ * 历史数据页
+ * 状态机:idle → loading → loaded
+ * 切换时间范围 / 切换成员 均复用同一加载流程
+ */
 Page({
+	data: {
+		// 加载状态
+		status: 'idle' as LoadStatus,
 
-  /**
-   * 页面的初始数据
-   */
-  data: {
-	
-  },
+		// 当前选中的时间范围
+		activeRange: '7d' as TimeRange,
 
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onLoad() {
-	
-  },
+		// 时间范围 Tab 选项
+		rangeTabs: [
+			{ key: '7d', label: '近7天' },
+			{ key: '30d', label: '近30天' },
+			{ key: '3m', label: '近3月' }
+		] as RangeTab[],
 
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady() {
-	
-  },
+		// 当前成员
+		currentMember: {
+			id: 'm-001',
+			name: '陈小飞',
+			gender: '男',
+			age: 28,
+			height: 175,
+			avatar: '#1385FA',
+			isSelf: true
+		} as MemberInfo,
 
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow() {
-	
-  },
+		// 统计数据
+		stats: {
+			maxWeight: 73.5,
+			minWeight: 71.2,
+			avgWeight: 72.3,
+			weightDiff: -2.3
+		} as StatsData,
 
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide() {
-	
-  },
+		// 历史记录列表
+		recordList: [] as RecordItem[]
+	},
 
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload() {
-	
-  },
+	onLoad() {
+		// idle 起步,通过统一入口触发加载
+		this.loadData()
+	},
 
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh() {
-	
-  },
+	onReady() {},
 
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom() {
-	
-  },
+	onShow() {},
 
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage(opts): WechatMiniprogram.Page.ICustomShareContent {
-	console.log(opts.target)
-	return {}
-  }
-})
+	onHide() {},
+
+	onUnload() {},
+
+	onPullDownRefresh() {},
+
+	onReachBottom() {},
+
+	onShareAppMessage(opts): WechatMiniprogram.Page.ICustomShareContent {
+		console.log(opts.target)
+		return {}
+	},
+
+	/**
+	 * 加载数据(切 Tab / 切成员 复用)
+	 */
+	loadData() {
+		this.setData({ status: 'loading' })
+
+		// TODO: 后续接入真实接口,这里先用 mock
+		const mockList: RecordItem[] = [
+			{ id: 'r-001', time: '2026.05.12 08:12', weight: 71.2, bmi: 23.2, bodyFat: 18.5 },
+			{ id: 'r-002', time: '2026.05.11 21:30', weight: 71.8, bmi: 23.4, bodyFat: 18.7 },
+			{ id: 'r-003', time: '2026.05.11 08:05', weight: 71.5, bmi: 23.3, bodyFat: 18.6 },
+			{ id: 'r-004', time: '2026.05.10 07:58', weight: 72.0, bmi: 23.5, bodyFat: 18.9 },
+			{ id: 'r-005', time: '2026.05.10 22:10', weight: 72.6, bmi: 23.7, bodyFat: 19.1 },
+			{ id: 'r-006', time: '2026.05.09 08:20', weight: 72.8, bmi: 23.8, bodyFat: 19.2 },
+			{ id: 'r-007', time: '2026.05.08 08:00', weight: 73.5, bmi: 24.0, bodyFat: 19.5 }
+		]
+
+		this.setData({ recordList: mockList, status: 'loaded' })
+	},
+
+	/**
+	 * 切换时间范围 Tab
+	 */
+	onTapRange(e: WechatMiniprogram.TouchEvent) {
+		const key = e.currentTarget.dataset.key as TimeRange
+		if (key === this.data.activeRange) return
+		this.setData({ activeRange: key })
+		this.loadData()
+	},
+
+	/**
+	 * 切换成员(后续接入成员选择浮层)
+	 */
+	onTapSwitchMember() {
+		// TODO: 接入成员选择浮层
+		wx.showToast({ title: '切换成员', icon: 'none' })
+	}
+})

miniprogram/pages/data/data.wxml

@@ -1,78 +1,79 @@
 <scroll-view class="scrollView" scroll-y>
 	<view class="scrollViewContent">
+
+		<!-- 数据卡(成员信息 + 时间 Tab + 统计) -->
 		<view class="data-card">
+
+			<!-- 成员信息 -->
 			<view class="userInfo">
-				<view class="avatar"></view>
+				<view class="avatar" style="background: {{ currentMember.avatar }};"></view>
 				<view class="info">
-					<view>
-						<view>陈小飞</view>
-						<view>本人</view>
+					<view class="info-name-row">
+						<view class="info-name">{{ currentMember.name }}</view>
+						<block wx:if="{{ currentMember.isSelf }}">
+							<view class="badge-self">本人</view>
+						</block>
 					</view>
-					<view>
-						<view>男·32岁</view>
-						<view>|</view>
-						<view>172cm</view>
+					<view class="info-meta">
+						<view class="meta-text">{{ currentMember.gender }}</view>
+						<view class="meta-divider">·</view>
+						<view class="meta-text">{{ currentMember.age }}岁</view>
+						<view class="meta-divider">|</view>
+						<view class="meta-text">{{ currentMember.height }}cm</view>
 					</view>
 				</view>
-				<view class="btn">切换成员</view>
+				<view class="btn" bind:tap="onTapSwitchMember">切换成员</view>
 			</view>
+
+			<view class="card-divider"></view>
+
+			<!-- 时间范围 Tab -->
 			<view class="nav">
-				<view class="active">近7天</view>
-				<view>近30天</view>
-				<view>近3月</view>
+				<block wx:for="{{ rangeTabs }}" wx:key="key">
+					<view
+						class="{{ activeRange === item.key ? 'active' : '' }}"
+						data-key="{{ item.key }}"
+						bind:tap="onTapRange"
+					>{{ item.label }}</view>
+				</block>
 			</view>
+
+			<!-- 统计摘要(4格) -->
 			<view class="summary">
 				<view class="summary-item">
-					<view>最高体重</view>
-					<view>
-						<text></text>
-						62.1
-						<text>kg</text>
-					</view>
+					<view class="summary-label">最高体重</view>
+					<view class="summary-value">{{ stats.maxWeight }}<text>kg</text></view>
 				</view>
 				<view class="summary-item">
-					<view>最低体重</view>
-					<view>
-						<text></text>
-						62.1
-						<text>kg</text>
-					</view>
+					<view class="summary-label">最低体重</view>
+					<view class="summary-value">{{ stats.minWeight }}<text>kg</text></view>
 				</view>
 				<view class="summary-item">
-					<view>平均体重</view>
-					<view>
-						<text></text>
-						62.1
-						<text>kg</text>
-					</view>
+					<view class="summary-label">平均体重</view>
+					<view class="summary-value">{{ stats.avgWeight }}<text>kg</text></view>
 				</view>
 				<view class="summary-item">
-					<view>体重变化</view>
-					<view>
-						<text></text>
-						62.1
-						<text>kg</text>
+					<view class="summary-label">体重变化</view>
+					<view class="summary-value {{ stats.weightDiff < 0 ? 'value-down' : 'value-up' }}">
+						{{ stats.weightDiff > 0 ? '+' : '' }}{{ stats.weightDiff }}<text>kg</text>
 					</view>
 				</view>
 			</view>
 		</view>
+
+		<!-- 历史记录列表 -->
 		<view class="data-list">
-			<view class="list">
-				<view>2026.05.12 13:44</view>
-				<view>
-					<view>体重：<text>62.2kg</text></view>
-					<view>BMI：<text>22.8</text></view>
-					<view>体脂率：<text>21.6%</text></view>
+			<block wx:for="{{ recordList }}" wx:key="id">
+				<view class="list">
+					<view>{{ item.time }}</view>
+					<view>
+						<view>体重：<text>{{ item.weight }}kg</text></view>
+						<view>BMI：<text>{{ item.bmi }}</text></view>
+						<view>体脂率：<text>{{ item.bodyFat }}%</text></view>
+					</view>
 				</view>
-			</view>
-			<view class="list">
-				<view>2026.05.12 13:44</view>
-				<view>
-					<view>体重：<text>62.2kg</text></view>
-					<view>BMI：<text>22.8</text></view>
-					<view>体脂率：<text>21.6%</text></view>
-				</view>
-			</view>
+			</block>
 		</view>
+
 	</view>
 </scroll-view>