From 6a1543f9f68f2e4925aa703e1efafab036868fd9 Mon Sep 17 00:00:00 2001
From: luo <luo@qq.com>
Date: Tue, 8 Sep 2026 16:12:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A5=97=E9=A4=90=E5=88=86=E5=B1=82?=
 =?UTF-8?q?=E7=BA=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/modules/asset.js                          |  20 +-
 components/PackageHistoryNode.vue             | 286 ++++++++++++++++++
 docs/API.md                                   |  97 +++++-
 .../asset-package-history.vue                 | 282 +++++------------
 4 files changed, 479 insertions(+), 206 deletions(-)
 create mode 100644 components/PackageHistoryNode.vue

diff --git a/api/modules/asset.js b/api/modules/asset.js
index 0dbe581..3ee3ad1 100644
--- a/api/modules/asset.js
+++ b/api/modules/asset.js
@@ -19,6 +19,24 @@ export const normalizeAssetInfo = (data = {}) => ({
 		: data.is_expiring === true || data.is_expiring === 1
 });
 
+const normalizePackageHistoryNode = (node = {}) => ({
+	...node,
+	children: Array.isArray(node.children)
+		? node.children.map(normalizePackageHistoryNode)
+		: [],
+	expand_by_default: node.expand_by_default === true || node.expand_by_default === 1
+});
+
+export const normalizeAssetPackageHistory = (data = {}) => ({
+	...data,
+	items: Array.isArray(data.items)
+		? data.items.map(normalizePackageHistoryNode)
+		: [],
+	page: Number(data.page),
+	size: Number(data.size),
+	total: Number(data.total)
+});
+
 export const isAssetRealNameCompleted = (assetInfo = {}) => {
 	if (assetInfo.asset_type === 'device') {
 		return (assetInfo.cards || []).some((card) => Number(card?.real_name_status) === 1);
@@ -50,7 +68,7 @@ export const assetApi = {
 			url: '/api/c/v1/asset/package-history',
 			method: 'GET',
 			data: { identifier, page, page_size, ...params }
-		});
+		}).then(normalizeAssetPackageHistory);
 	},
 
 	getPackages(identifier, packageType = '') {
diff --git a/components/PackageHistoryNode.vue b/components/PackageHistoryNode.vue
new file mode 100644
index 0000000..2de3dfe
--- /dev/null
+++ b/components/PackageHistoryNode.vue
@@ -0,0 +1,286 @@
+<template>
+	<view class="card package-node" :class="{ 'package-node-child': depth > 0, 'relationship-exception': isMasterMissing }">
+		<view class="package-header flex-row-sb">
+			<view class="package-title-wrap">
+				<view class="package-name">{{ node.package_name }}</view>
+				<text v-if="packageTypeName" class="package-type">{{ packageTypeName }}</text>
+			</view>
+			<view class="tag-apple" :class="getStatusClass(node.status)">{{ node.status_name }}</view>
+		</view>
+
+		<view v-if="isMasterMissing" class="relationship-status">
+			{{ node.relationship_status_name || node.relationship_status }}
+		</view>
+		<view v-if="hasMasterUsageId" class="relationship-meta">
+			关联主套餐使用记录：{{ node.master_usage_id }}
+		</view>
+
+		<view class="package-info">
+			<view class="info-row flex-row-sb">
+				<view class="info-label">购买时间</view>
+				<view class="info-value">{{ formatDate(node.created_at) }}</view>
+			</view>
+			<view class="info-row flex-row-sb">
+				<view class="info-label">激活时间</view>
+				<view class="info-value">{{ formatDate(node.activated_at) }}</view>
+			</view>
+			<view class="info-row flex-row-sb">
+				<view class="info-label">到期时间</view>
+				<view class="info-value">{{ formatDate(node.expires_at) }}</view>
+			</view>
+		</view>
+
+		<view class="divider"></view>
+
+		<view class="flow-info">
+			<view class="flow-title">流量信息</view>
+			<view class="flow-stats">
+				<view class="flow-item">
+					<view class="flow-label">已使用</view>
+					<view class="flow-value">{{ getUsedFlow(node) }}</view>
+				</view>
+				<view class="flow-item">
+					<view class="flow-label">总流量</view>
+					<view class="flow-value">{{ getTotalFlow(node) }}</view>
+				</view>
+				<view class="flow-item">
+					<view class="flow-label">剩余</view>
+					<view class="flow-value">{{ getRemainFlow(node) }}</view>
+				</view>
+			</view>
+			<view class="progress-section">
+				<view class="progress-apple">
+					<view class="progress-fill" :style="{ width: getUsagePercent(node) }"></view>
+				</view>
+			</view>
+		</view>
+
+		<view
+			v-if="hasChildren"
+			class="expand-control"
+			role="button"
+			tabindex="0"
+			:aria-expanded="String(expanded)"
+			@tap.stop="toggleExpanded"
+		>
+			<text>{{ expanded ? '收起关联加油包' : '展开关联加油包' }}</text>
+			<text class="expand-count">（{{ children.length }}）</text>
+		</view>
+
+		<view v-if="expanded && hasChildren" class="child-list">
+			<PackageHistoryNode
+				v-for="(child, index) in children"
+				:key="getNodeKey(child, index)"
+				:node="child"
+				:depth="depth + 1"
+			/>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import { computed, ref } from 'vue';
+
+	const props = defineProps({
+		node: {
+			type: Object,
+			default: () => ({})
+		},
+		depth: {
+			type: Number,
+			default: 0
+		}
+	});
+
+	const children = computed(() => Array.isArray(props.node.children) ? props.node.children : []);
+	const hasChildren = computed(() => children.value.length > 0);
+	const isMasterMissing = computed(() => props.node.relationship_status === 'master_missing');
+	const hasMasterUsageId = computed(() => (
+		props.node.master_usage_id !== null && props.node.master_usage_id !== undefined
+	));
+	const packageTypeName = computed(() => ({
+		formal: '正式套餐',
+		addon: '加油包'
+	}[props.node.package_type] || props.node.package_type || ''));
+	const expanded = ref(props.node.expand_by_default === true);
+
+	const getStatusClass = (status) => ({
+		0: 'tag-warning',
+		1: 'tag-success',
+		2: 'tag-primary',
+		3: 'tag-secondary',
+		4: 'tag-danger'
+	}[Number(status)] || '');
+
+	const toNumber = (value) => {
+		const number = Number(value);
+		return Number.isFinite(number) ? number : 0;
+	};
+
+	const formatMB = (value) => {
+		const mb = toNumber(value);
+		if (mb >= 1024) {
+			return `${(mb / 1024).toFixed(2)} GB`;
+		}
+		return `${mb.toFixed(2)} MB`;
+	};
+
+	const getUsedAmount = (item) => item.enable_virtual_data
+		? toNumber(item.virtual_used_mb)
+		: toNumber(item.real_used_mb);
+
+	const getUsedFlow = (item) => formatMB(getUsedAmount(item));
+	const getTotalFlow = (item) => formatMB(item.real_total_mb);
+	const getRemainFlow = (item) => formatMB(Math.max(toNumber(item.real_total_mb) - getUsedAmount(item), 0));
+
+	const getUsagePercent = (item) => {
+		const total = toNumber(item.real_total_mb);
+		if (!total) return '0%';
+		return `${Math.min((getUsedAmount(item) / total) * 100, 100).toFixed(2)}%`;
+	};
+
+	const formatDate = (value) => value ? String(value).replace('T', ' ').slice(0, 19) : '-';
+	const getNodeKey = (item, index) => item.package_usage_id ?? `${props.depth}-${index}`;
+	const toggleExpanded = () => {
+		expanded.value = !expanded.value;
+	};
+</script>
+
+<style lang="scss" scoped>
+	.package-node {
+		margin-bottom: var(--space-md);
+
+		&.package-node-child {
+			margin: var(--space-sm) 0 0;
+			border-left: 6rpx solid var(--primary-light);
+			box-shadow: none;
+		}
+
+		&.relationship-exception {
+			border-left: 6rpx solid var(--danger);
+		}
+	}
+
+	.package-header {
+		align-items: flex-start;
+		margin-bottom: var(--space-md);
+	}
+
+	.package-title-wrap {
+		display: flex;
+		align-items: center;
+		min-width: 0;
+		gap: var(--space-xs);
+	}
+
+	.package-name {
+		font-size: 32rpx;
+		font-weight: 600;
+		color: var(--text-primary);
+	}
+
+	.package-type,
+	.relationship-meta {
+		font-size: 22rpx;
+		color: var(--text-tertiary);
+	}
+
+	.relationship-status {
+		margin-bottom: var(--space-sm);
+		padding: 12rpx 16rpx;
+		border-radius: var(--radius-small);
+		background: var(--danger-light, #fff2f0);
+		color: var(--danger);
+		font-size: 24rpx;
+	}
+
+	.relationship-meta {
+		margin-bottom: var(--space-sm);
+	}
+
+	.package-info .info-row {
+		padding: var(--space-xs) 0;
+	}
+
+	.info-label {
+		font-size: 24rpx;
+		color: var(--text-tertiary);
+	}
+
+	.info-value {
+		font-size: 24rpx;
+		color: var(--text-primary);
+	}
+
+	.divider {
+		height: 1rpx;
+		margin: var(--space-md) 0;
+		background: var(--gray-200);
+	}
+
+	.flow-title {
+		margin-bottom: var(--space-sm);
+		font-size: 26rpx;
+		font-weight: 600;
+		color: var(--text-primary);
+	}
+
+	.flow-stats {
+		display: flex;
+		justify-content: space-between;
+		margin-bottom: var(--space-sm);
+	}
+
+	.flow-item {
+		text-align: center;
+	}
+
+	.flow-label {
+		margin-bottom: 4rpx;
+		font-size: 20rpx;
+		color: var(--text-tertiary);
+	}
+
+	.flow-value {
+		font-size: 26rpx;
+		font-weight: 600;
+		color: var(--text-primary);
+	}
+
+	.progress-apple {
+		overflow: hidden;
+		width: 100%;
+		height: 8rpx;
+		border-radius: var(--radius-small);
+		background: var(--gray-200);
+	}
+
+	.progress-fill {
+		height: 100%;
+		border-radius: var(--radius-small);
+		background: linear-gradient(90deg, var(--primary), var(--primary-light));
+	}
+
+	.expand-control {
+		display: inline-flex;
+		margin-top: var(--space-md);
+		padding: 12rpx 16rpx;
+		border-radius: var(--radius-small);
+		background: var(--primary-light);
+		color: var(--primary);
+		font-size: 24rpx;
+	}
+
+	.expand-count {
+		margin-left: 4rpx;
+	}
+
+	.child-list {
+		margin-top: var(--space-sm);
+	}
+
+	.tag-secondary {
+		background: var(--gray-200) !important;
+		color: var(--gray-600) !important;
+	}
+</style>
diff --git a/docs/API.md b/docs/API.md
index 7e8f8a1..b36e3ec 100644
--- a/docs/API.md
+++ b/docs/API.md
@@ -376,7 +376,102 @@ data：
 - wallet_balance：钱包余额（分）
 
 
-## 3.2 资产套餐历史
+## 3.2 资产套餐历史（当前契约）
+
+URL：
+GET /api/c/v1/asset/package-history
+
+更新说明（2026-09-08）：
+* 套餐历史已改为主套餐—加油包关系组。`items` 只包含顶层关系组；关联加油包位于所属主项的 `children` 中，子项绝不会跨页返回。
+* `total` 为筛选后的顶层关系组数量，分页壳使用 `page`、`size`、`total`；其中 `size` 表示每页顶层关系组数量。
+* 传入 `status` 和 `package_type` 时，两项必须由同一条使用记录联合命中；主项或任一子项命中时，接口均返回完整关系组，客户端不得对组内节点二次过滤。
+* 加油包通过 `master_usage_id` 标识关联主套餐使用记录。关联主套餐物理缺失时，节点以独立顶层项返回并设置 `relationship_status: "master_missing"`；关联主套餐存在但读取或展示失败时，接口按统一错误响应返回失败。
+
+Query 参数：
+- identifier（string，必填）- 资产标识符（SN/IMEI/虚拟号/ICCID/MSISDN），长度 1–50
+- package_type（string，可选）- 套餐类型（formal：正式套餐；addon：加油包）
+- status（integer，可选）- 套餐状态（0：待生效；1：生效中；2：已用完；3：已过期；4：已失效）
+- page（integer，必填）- 页码，最小为 1
+- page_size（integer，必填）- 每页顶层关系组数量，范围 1–100
+
+成功响应：
+```json
+{
+  "code": 0,
+  "msg": "success",
+  "timestamp": "2026-09-08T00:00:00Z",
+  "data": {
+    "items": [
+      {
+        "activated_at": "2026-09-01T00:00:00Z",
+        "children": [
+          {
+            "children": [],
+            "expand_by_default": false,
+            "master_usage_id": 5001,
+            "package_id": 1002,
+            "package_name": "5GB加油包",
+            "package_type": "addon",
+            "package_usage_id": 5002,
+            "status": 1,
+            "status_name": "生效中"
+          }
+        ],
+        "created_at": "2026-09-01T00:00:00Z",
+        "enable_virtual_data": false,
+        "expand_by_default": true,
+        "expires_at": "2026-09-30T23:59:59Z",
+        "master_usage_id": null,
+        "order_id": 0,
+        "package_id": 1001,
+        "package_name": "10GB月套餐",
+        "package_type": "formal",
+        "package_usage_id": 5001,
+        "priority": 1,
+        "real_total_mb": 10240,
+        "real_used_mb": 2048,
+        "reduction_pct": 0,
+        "status": 1,
+        "status_name": "生效中",
+        "usage_type": "single_card",
+        "virtual_total_mb": 10240,
+        "virtual_used_mb": 2048
+      }
+    ],
+    "page": 1,
+    "size": 10,
+    "total": 1
+  }
+}
+```
+
+`data.items[]` 为递归节点，所有节点均可包含以下字段：
+- activated_at（date-time，可空）：激活时间
+- children（array）：关联加油包或下级关联节点
+- created_at（date-time）：购买创建时间
+- enable_virtual_data（boolean）：是否启用虚流量
+- expand_by_default（boolean）：是否默认展开 `children`
+- expires_at（date-time，可空）：到期时间
+- master_usage_id（integer，可空）：关联主套餐使用记录 ID；普通主项为 `null`
+- order_id（integer）：历史兼容字段，始终输出零值 `0`，不填充真实订单 ID
+- package_id、package_name、package_type、package_usage_id：套餐及使用记录标识；`package_type` 为 `formal` 或 `addon`
+- priority：优先级
+- real_total_mb、real_used_mb：真实总量和真实已用量（MB）
+- virtual_total_mb、virtual_used_mb：业务停机阈值和展示已用量（MB）
+- reduction_pct：展示增幅比例
+- status、status_name：套餐状态及名称
+- usage_type：使用类型（single_card/device）
+- relationship_status、relationship_status_name：关系异常状态及名称；仅在主套餐物理缺失时返回 `master_missing`
+
+错误响应：
+- HTTP 400：请求参数错误
+- HTTP 401：未认证或认证已过期
+- HTTP 403：无权访问
+- HTTP 500：服务器内部错误，包括关联主套餐存在但读取或展示失败
+
+以上失败场景均使用统一 `ErrorResponse`：`code`、`msg`、`timestamp`，可选 `data`。H5 通过共享请求层展示后端返回的 `msg`；401 同时清除登录状态并跳转登录页。
+
+## 3.2 资产套餐历史（旧版，已废弃）
 
 URL：
 GET /api/c/v1/asset/package-history
diff --git a/pages/asset-package-history/asset-package-history.vue b/pages/asset-package-history/asset-package-history.vue
index 4647b4f..cd0b73c 100644
--- a/pages/asset-package-history/asset-package-history.vue
+++ b/pages/asset-package-history/asset-package-history.vue
@@ -1,6 +1,5 @@
 <template>
 	<view class="container">
-		<!-- 空状态提示 -->
 		<view v-if="!historyLoaded || (loading && packageList.length === 0)" class="loading-state">
 			<up-loading-icon text="加载中" size="30"></up-loading-icon>
 		</view>
@@ -10,169 +9,81 @@
 			<view class="empty-desc">当前账号下暂无套餐历史信息</view>
 		</view>
 
-		<!-- 套餐列表 -->
-		<view v-else class="card package-card" v-for="(item, index) in packageList" :key="index">
-			<view class="package-header flex-row-sb">
-				<view class="package-name">{{ item.package_name }}</view>
-				<view class="tag-apple" :class="getStatusClass(item.status)">{{ item.status_name }}</view>
-			</view>
-
-			<view class="package-info">
-				<view class="info-row flex-row-sb">
-					<view class="info-label">激活时间</view>
-					<view class="info-value">{{ item.activated_at || '-' }}</view>
-				</view>
-				<view class="info-row flex-row-sb">
-					<view class="info-label">到期时间</view>
-					<view class="info-value">{{ item.expires_at || '-' }}</view>
-				</view>
-			</view>
-
-			<view class="divider"></view>
-
-			<view class="flow-info">
-				<view class="flow-title">流量信息</view>
-				<view class="flow-stats">
-					<view class="flow-item">
-						<view class="flow-label">已使用</view>
-						<view class="flow-value">{{ getUsedFlow(item) }}</view>
-					</view>
-					<view class="flow-item">
-						<view class="flow-label">总流量</view>
-						<view class="flow-value">{{ getTotalFlow(item) }}</view>
-					</view>
-					<view class="flow-item">
-						<view class="flow-label">剩余</view>
-						<view class="flow-value">{{ getRemainFlow(item) }}</view>
-					</view>
-				</view>
-				<view class="progress-section">
-					<view class="progress-apple">
-						<view class="progress-fill" :style="{width: getUsagePercent(item) + '%'}"></view>
-					</view>
-				</view>
-			</view>
+		<view v-else>
+			<PackageHistoryNode
+				v-for="(item, index) in packageList"
+				:key="getGroupKey(item, index)"
+				:node="item"
+			/>
 		</view>
 
-		<!-- 加载更多 -->
-		<view class="load-more" v-if="packageList.length > 0">
+		<view v-if="packageList.length > 0" class="load-more">
 			<text v-if="loading">加载中...</text>
-			<text v-else-if="noMore">没有更多了</text>
-			<text v-else @tap="loadMore">点击加载更多</text>
+			<text v-else-if="noMore">没有更多套餐</text>
+			<text v-else role="button" tabindex="0" @tap="loadMore">点击加载更多</text>
 		</view>
 	</view>
 </template>
 
 <script setup>
-	import { ref, reactive, onMounted } from 'vue';
+	import { ref, onMounted } from 'vue';
 	import { assetApi } from '@/api/index.js';
+	import PackageHistoryNode from '@/components/PackageHistoryNode.vue';
 	import { useUserStore } from '@/store/index.js';
 
 	const userStore = useUserStore();
-
-	let packageList = reactive([]);
-	let loading = ref(false);
-	let historyLoaded = ref(false);
-	let noMore = ref(false);
-	let page = ref(1);
+	const packageList = ref([]);
+	const loading = ref(false);
+	const historyLoaded = ref(false);
+	const noMore = ref(false);
+	const page = ref(1);
+	const total = ref(0);
 	const pageSize = 10;
 
-	const getStatusClass = (status) => {
-		const classMap = {
-			'0': 'tag-warning',
-			'1': 'tag-success',
-			'2': 'tag-primary',
-			'3': 'tag-secondary',
-			'4': 'tag-danger'
-		};
-		return classMap[status] || '';
-	};
-
-	const formatMB = (mb) => {
-		if (!mb && mb !== 0) return '0 MB';
-		if (mb >= 1024) {
-			return (mb / 1024).toFixed(2) + ' GB';
-		}
-		return mb.toFixed(2) + ' MB';
-	};
-
-	// 获取已使用流量
-	const getUsedFlow = (item) => {
-		if (item.enable_virtual_data) {
-			return formatMB(item.virtual_used_mb || 0);
-		} else {
-			return formatMB(item.real_used_mb || 0);
-		}
-	};
-
-	// 获取总流量
-	const getTotalFlow = (item) => {
-		return formatMB(item.real_total_mb || 0);
-	};
-
-	// 获取剩余流量
-	const getRemainFlow = (item) => {
-		const total = item.real_total_mb || 0;
-		const used = item.enable_virtual_data ? (item.virtual_used_mb || 0) : (item.real_used_mb || 0);
-		const remain = Math.max(total - used, 0);
-		return formatMB(remain);
-	};
-
-	// 获取使用百分比
-	const getUsagePercent = (item) => {
-		const used = item.real_used_mb || 0;
-		const total = item.real_total_mb || 0;
-
-		if (!total) return 0;
-		return Math.min((used / total) * 100, 100).toFixed(2);
-	};
-
-	const formatDate = (dateStr) => {
-		if (!dateStr) return '-';
-		return dateStr.split('T').join(' ').slice(0, 19);
-	};
+	const getGroupKey = (item, index) => item.package_usage_id ?? `group-${index}`;
 
 	const loadPackageList = async (append = false) => {
-		if (loading.value || noMore.value) return;
+		if (loading.value || (append && noMore.value)) return;
+
 		loading.value = true;
+		const requestedPage = page.value;
 
 		try {
 			const data = await assetApi.getPackageHistory(
 				userStore.state.identifier,
-				page.value,
+				requestedPage,
 				pageSize
 			);
-
-			const newData = (data.items || []).map(item => ({
-				...item,
-				activated_at: item.activated_at ? formatDate(item.activated_at) : '',
-				created_at: formatDate(item.created_at),
-				expires_at: item.expires_at ? formatDate(item.expires_at) : ''
-			}));
+			const groups = data.items;
+			const responsePage = Number.isInteger(data.page) && data.page > 0
+				? data.page
+				: requestedPage;
+			const responseSize = Number.isInteger(data.size) && data.size > 0
+				? data.size
+				: pageSize;
+			const responseTotal = Number.isFinite(data.total) && data.total >= 0
+				? data.total
+				: 0;
 
 			if (append) {
-				packageList.push(...newData);
+				packageList.value.push(...groups);
 			} else {
-				packageList.splice(0, packageList.length, ...newData);
+				packageList.value = groups;
 			}
 
-			if (newData.length < pageSize) {
-				noMore.value = true;
-			} else {
-				page.value++;
-			}
-		} catch (e) {
-			console.error('加载套餐历史失败', e);
+			total.value = responseTotal;
+			noMore.value = responsePage * responseSize >= total.value;
+			page.value = responsePage + 1;
+		} catch (error) {
+			// The shared request layer handles the API's unified error response and authentication errors.
+			console.error('加载套餐历史失败', error);
+		} finally {
+			loading.value = false;
+			historyLoaded.value = true;
 		}
-		loading.value = false;
-		historyLoaded.value = true;
 	};
 
-	const loadMore = () => {
-		if (!noMore.value) {
-			loadPackageList(true);
-		}
-	};
+	const loadMore = () => loadPackageList(true);
 
 	onMounted(() => {
 		loadPackageList();
@@ -180,83 +91,46 @@
 </script>
 
 <style lang="scss" scoped>
-	.container {
-		.loading-state {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			min-height: 500rpx;
+	.loading-state {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-height: 500rpx;
+	}
+
+	.empty-state {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		min-height: 400rpx;
+		padding: 120rpx 40rpx;
+
+		.empty-icon {
+			width: 120rpx;
+			height: 120rpx;
+			margin-bottom: 30rpx;
+			opacity: 0.6;
 		}
 
-		.empty-state {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			justify-content: center;
-			padding: 120rpx 40rpx;
-			min-height: 400rpx;
-			.empty-icon { width: 120rpx; height: 120rpx; margin-bottom: 30rpx; opacity: 0.6; }
-			.empty-title { font-size: 32rpx; font-weight: 600; color: var(--text-primary); margin-bottom: 16rpx; }
-			.empty-desc { font-size: 26rpx; color: var(--text-tertiary); text-align: center; }
+		.empty-title {
+			margin-bottom: 16rpx;
+			font-size: 32rpx;
+			font-weight: 600;
+			color: var(--text-primary);
 		}
 
-		.package-card {
-			margin-bottom: var(--space-md);
-			.package-header {
-				margin-bottom: var(--space-md);
-				.package-name { font-size: 32rpx; font-weight: 600; color: var(--text-primary); }
-			}
-
-			.package-info {
-				.info-row {
-					padding: var(--space-xs) 0;
-					.info-label { font-size: 24rpx; color: var(--text-tertiary); }
-					.info-value { font-size: 24rpx; color: var(--text-primary); }
-				}
-			}
-
-			.divider {
-				height: 1rpx;
-				background: var(--gray-200);
-				margin: var(--space-md) 0;
-			}
-
-			.flow-info {
-				.flow-title { font-size: 26rpx; font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-sm); }
-				.flow-stats {
-					display: flex;
-					justify-content: space-between;
-					margin-bottom: var(--space-sm);
-					.flow-item {
-						text-align: center;
-						.flow-label { font-size: 20rpx; color: var(--text-tertiary); margin-bottom: 4rpx; }
-						.flow-value { font-size: 26rpx; font-weight: 600; color: var(--text-primary); }
-					}
-				}
-				.progress-section {
-					.progress-apple {
-						width: 100%;
-						height: 8rpx;
-						background: var(--gray-200);
-						border-radius: var(--radius-small);
-						overflow: hidden;
-						.progress-fill {
-							height: 100%;
-							background: linear-gradient(90deg, var(--primary), var(--primary-light));
-							border-radius: var(--radius-small);
-						}
-					}
-				}
-			}
-		}
-
-		.load-more {
-			text-align: center;
-			padding: var(--space-lg);
+		.empty-desc {
+			font-size: 26rpx;
 			color: var(--text-tertiary);
-			font-size: 24rpx;
+			text-align: center;
 		}
 	}
 
-	.tag-secondary { background: var(--gray-200) !important; color: var(--gray-600) !important; }
+	.load-more {
+		padding: var(--space-lg);
+		font-size: 24rpx;
+		color: var(--text-tertiary);
+		text-align: center;
+	}
 </style>