From 8ed7531ad78384ee02bf31ede4a99f4715e7d4c3 Mon Sep 17 00:00:00 2001
From: yvan <8574526@qq.com>
Date: Wed, 13 Aug 2025 16:35:38 +0800
Subject: [PATCH] 1

---
 pages/pets/pet-detail.vue                     | 841 +++++++++++++-----
 ...宠物小程序开发助手_优化版.md => prompt.md} |   0
 prototypes/pet-detail/assets/css/common.css   | 157 ++++
 prototypes/pet-detail/assets/js/common.js     | 209 +++++
 .../pet-detail/pet-detail-prototype-01.html   | 240 +++++
 .../pet-detail/pet-detail-prototype-02.html   | 378 ++++++++
 .../pet-detail/pet-detail-prototype-03.html   | 431 +++++++++
 .../pet-detail/pet-detail-prototype-04.html   | 489 ++++++++++
 .../pet-detail/pet-detail-prototype-05.html   | 464 ++++++++++
 .../pet-detail/pet-detail-prototype-06.html   | 419 +++++++++
 .../pet-detail/pet-detail-prototype-07.html   | 506 +++++++++++
 .../pet-detail/pet-detail-prototype-08.html   | 551 ++++++++++++
 .../pet-detail/pet-detail-prototype-09.html   | 567 ++++++++++++
 .../pet-detail/pet-detail-prototype-10.html   | 552 ++++++++++++
 .../pet-detail/pet-detail-prototype-11.html   | 626 +++++++++++++
 .../pet-detail/pet-detail-prototype-12.html   | 613 +++++++++++++
 .../pet-detail/pet-detail-prototype-13.html   | 712 +++++++++++++++
 .../pet-detail/pet-detail-prototype-14.html   | 724 +++++++++++++++
 .../pet-detail/pet-detail-prototype-15.html   | 778 ++++++++++++++++
 .../pet-detail/pet-detail-prototype-16.html   | 679 ++++++++++++++
 test-pet-detail.html                          | 355 ++++++++
 宠物详情页面改版说明.md                       | 128 +++
 22 files changed, 10202 insertions(+), 217 deletions(-)
 rename prompts/{宠物小程序开发助手_优化版.md => prompt.md} (100%)
 create mode 100644 prototypes/pet-detail/assets/css/common.css
 create mode 100644 prototypes/pet-detail/assets/js/common.js
 create mode 100644 prototypes/pet-detail/pet-detail-prototype-01.html
 create mode 100644 prototypes/pet-detail/pet-detail-prototype-02.html
 create mode 100644 prototypes/pet-detail/pet-detail-prototype-03.html
 create mode 100644 prototypes/pet-detail/pet-detail-prototype-04.html
 create mode 100644 prototypes/pet-detail/pet-detail-prototype-05.html
 create mode 100644 prototypes/pet-detail/pet-detail-prototype-06.html
 create mode 100644 prototypes/pet-detail/pet-detail-prototype-07.html
 create mode 100644 prototypes/pet-detail/pet-detail-prototype-08.html
 create mode 100644 prototypes/pet-detail/pet-detail-prototype-09.html
 create mode 100644 prototypes/pet-detail/pet-detail-prototype-10.html
 create mode 100644 prototypes/pet-detail/pet-detail-prototype-11.html
 create mode 100644 prototypes/pet-detail/pet-detail-prototype-12.html
 create mode 100644 prototypes/pet-detail/pet-detail-prototype-13.html
 create mode 100644 prototypes/pet-detail/pet-detail-prototype-14.html
 create mode 100644 prototypes/pet-detail/pet-detail-prototype-15.html
 create mode 100644 prototypes/pet-detail/pet-detail-prototype-16.html
 create mode 100644 test-pet-detail.html
 create mode 100644 宠物详情页面改版说明.md

diff --git a/pages/pets/pet-detail.vue b/pages/pets/pet-detail.vue
index 21b29dd..85ff05b 100644
--- a/pages/pets/pet-detail.vue
+++ b/pages/pets/pet-detail.vue
@@ -1,119 +1,162 @@
 <template>
-	<view class="pet-detail-container">
-		<!-- 头部操作栏 -->
-		<view class="header-actions">
-			<text class="page-title">{{ petInfo.name || '宠物详情' }}</text>
+	<view class="container">
+		<!-- 宠物主卡片 -->
+		<view class="pet-main-card">
+			<!-- 编辑按钮 -->
 			<view class="edit-btn" @click="editPet">
-				<text class="edit-text">编辑</text>
+				<text class="edit-icon">✏️</text>
+			</view>
+
+			<!-- 宠物头像区域 -->
+			<view class="pet-avatar-section">
+				<view class="avatar-container">
+					<view class="pet-avatar-large" v-if="!petInfo.avatar">
+						<text class="avatar-placeholder">🐱</text>
+					</view>
+					<image
+						v-else
+						:src="petInfo.avatar"
+						class="pet-avatar-large"
+						mode="aspectFill"
+					/>
+					<view class="avatar-badge">
+						<text class="badge-text">健康</text>
+					</view>
+				</view>
+			</view>
+
+			<!-- 宠物信息区域 -->
+			<view class="pet-info-section">
+				<text class="pet-name">{{ petInfo.name || '未知宠物' }}</text>
+				<view class="pet-meta">
+					<text class="pet-breed">{{ petInfo.breed || '未知品种' }}</text>
+					<text class="pet-separator">·</text>
+					<text class="pet-gender">{{ petInfo.gender || '未知' }}</text>
+					<text class="pet-separator">·</text>
+					<text class="pet-age">{{ petInfo.age || 0 }}岁</text>
+				</view>
+				<view class="pet-stats">
+					<view class="stat-item">
+						<text class="stat-number">{{ petInfo.companionDays || 0 }}</text>
+						<text class="stat-label">陪伴天数</text>
+					</view>
+					<view class="stat-item">
+						<text class="stat-number">{{ petInfo.weight || '4.2kg' }}</text>
+						<text class="stat-label">当前体重</text>
+					</view>
+					<view class="stat-item">
+						<text class="stat-number">85</text>
+						<text class="stat-label">健康评分</text>
+					</view>
+				</view>
 			</view>
 		</view>
 
-		<view class="pet-header">
-			<u-avatar :src="petInfo.avatar || '/static/default-pet.png'" size="80" shape="circle"></u-avatar>
-			<view class="pet-basic-info">
-				<u-text :text="petInfo.name" type="primary" size="18" bold></u-text>
-				<u-text :text="`${petInfo.breed} · ${petInfo.gender}`" type="info" size="14"></u-text>
-				<u-text :text="`${petInfo.age}岁 · ${petInfo.weight}`" type="tips" size="12"></u-text>
+		<!-- 详细信息卡片 -->
+		<view class="details-card">
+			<view class="card-header">
+				<text class="card-title">📋 详细档案</text>
+			</view>
+			<view class="details-grid">
+				<view class="detail-row">
+					<view class="detail-item">
+						<view class="detail-icon">🎂</view>
+						<view class="detail-content">
+							<text class="detail-label">生日</text>
+							<text class="detail-value">{{ petInfo.birthday || '2022-03-15' }}</text>
+						</view>
+					</view>
+					<view class="detail-item">
+						<view class="detail-icon">🏠</view>
+						<view class="detail-content">
+							<text class="detail-label">到家日期</text>
+							<text class="detail-value">{{ petInfo.adoptDate || '2022-04-20' }}</text>
+						</view>
+					</view>
+				</view>
+				<view class="detail-row">
+					<view class="detail-item">
+						<view class="detail-icon">💉</view>
+						<view class="detail-content">
+							<text class="detail-label">疫苗状态</text>
+							<text class="detail-value status-good">已完成</text>
+						</view>
+					</view>
+					<view class="detail-item">
+						<view class="detail-icon">🏥</view>
+						<view class="detail-content">
+							<text class="detail-label">健康状态</text>
+							<text class="detail-value status-excellent">优秀</text>
+						</view>
+					</view>
+				</view>
 			</view>
 		</view>
-		
-		<u-gap height="20"></u-gap>
-		
-		<u-card title="基本信息" :padding="20">
-			<view class="info-grid">
-				<view class="info-item">
-					<u-text text="生日" type="tips" size="12"></u-text>
-					<u-text :text="petInfo.birthday" type="primary" size="14"></u-text>
-				</view>
-				<view class="info-item">
-					<u-text text="陪伴天数" type="tips" size="12"></u-text>
-					<u-text :text="`${petInfo.companionDays}天`" type="primary" size="14"></u-text>
-				</view>
-				<view class="info-item">
-					<u-text text="体重" type="tips" size="12"></u-text>
-					<u-text :text="petInfo.weight" type="primary" size="14"></u-text>
-				</view>
-				<view class="info-item">
-					<u-text text="性别" type="tips" size="12"></u-text>
-					<u-text :text="petInfo.gender" type="primary" size="14"></u-text>
-				</view>
-			</view>
-		</u-card>
-		
-		<u-gap height="20"></u-gap>
-		
-		<u-card title="最近记录" :padding="20">
-			<view class="records-list" v-if="recentRecords.length > 0">
-				<view class="record-item" v-for="record in recentRecords" :key="record.id">
-					<view class="record-date">{{ record.date }}</view>
-					<view class="record-content">{{ record.content }}</view>
-				</view>
-			</view>
-			<u-empty v-else mode="data" text="暂无记录" :show="true"></u-empty>
-		</u-card>
-		
-		<u-gap height="20"></u-gap>
 
-		<!-- 性格标签展示 -->
-		<u-card title="性格特征" :padding="20" v-if="petInfo.personality && petInfo.personality.length > 0">
-			<view class="personality-tags">
-				<u-tag
-					v-for="tag in petInfo.personality"
-					:key="tag"
-					:text="tag"
-					type="primary"
-					size="small"
-					plain
-				></u-tag>
-			</view>
-			<u-button
-				text="重新设置性格"
-				type="info"
-				size="mini"
-				plain
-				@click="setPersonality"
-				style="margin-top: 20rpx;"
-			></u-button>
-		</u-card>
-
-		<u-card title="性格设置" :padding="20" v-else>
-			<u-empty mode="data" text="还未设置宠物性格" :show="true">
-				<template #bottom>
-					<u-button type="primary" text="设置性格特征" size="mini" @click="setPersonality"></u-button>
-				</template>
-			</u-empty>
-		</u-card>
-
-		<u-gap height="20"></u-gap>
-
-		<!-- 快捷功能按钮 -->
+		<!-- 快速操作区域 -->
 		<view class="quick-actions">
-			<view class="action-row">
-				<view class="action-item" @click="addRecord">
-					<u-icon name="edit-pen" size="24" color="#81C784"></u-icon>
-					<text class="action-text">添加记录</text>
+			<view class="actions-header">
+				<text class="actions-title">🚀 快速操作</text>
+			</view>
+			<view class="actions-grid">
+				<view class="action-card primary" @click="addRecord">
+					<view class="action-icon-bg">
+						<text class="action-icon">📝</text>
+					</view>
+					<text class="action-title">添加记录</text>
+					<text class="action-subtitle">记录日常点滴</text>
 				</view>
-				<view class="action-item" @click="chatWithPet">
-					<u-icon name="chat" size="24" color="#64B5F6"></u-icon>
-					<text class="action-text">AI聊天</text>
+				<view class="action-card secondary" @click="chatWithPet">
+					<view class="action-icon-bg">
+						<text class="action-icon">💬</text>
+					</view>
+					<text class="action-title">AI聊天</text>
+					<text class="action-subtitle">智能对话助手</text>
 				</view>
-				<view class="action-item" @click="viewHealth">
-					<u-icon name="heart" size="24" color="#FF8A80"></u-icon>
-					<text class="action-text">健康档案</text>
+				<view class="action-card accent" @click="viewHealth">
+					<view class="action-icon-bg">
+						<text class="action-icon">📊</text>
+					</view>
+					<text class="action-title">健康图表</text>
+					<text class="action-subtitle">数据可视化</text>
 				</view>
 			</view>
-			<view class="action-row">
-				<view class="action-item" @click="viewTimeline">
-					<u-icon name="clock" size="24" color="#FFB74D"></u-icon>
-					<text class="action-text">成长时光</text>
+		</view>
+
+		<!-- 最近记录 -->
+		<view class="records-section">
+			<view class="records-header">
+				<text class="records-title">📖 最近记录</text>
+				<view class="view-all-btn" @click="viewAllRecords">
+					<text class="view-all-text">查看全部</text>
+					<text class="view-all-arrow">→</text>
 				</view>
-				<view class="action-item" @click="viewRecords">
-					<u-icon name="list" size="24" color="#9C27B0"></u-icon>
-					<text class="action-text">所有记录</text>
+			</view>
+
+			<view class="records-list" v-if="recentRecords.length > 0">
+				<view class="record-card" v-for="record in recentRecords" :key="record.id">
+					<view class="record-left">
+						<view class="record-icon-container">
+							<text class="record-icon">{{ getRecordIcon(record.type) }}</text>
+						</view>
+						<view class="record-info">
+							<text class="record-title">{{ record.title || record.content }}</text>
+							<text class="record-content">{{ record.content }}</text>
+							<text class="record-time">{{ formatDate(record.date) }}</text>
+						</view>
+					</view>
+					<view class="record-right">
+						<text class="record-arrow">›</text>
+					</view>
 				</view>
-				<view class="action-item" @click="shareProfile">
-					<u-icon name="share" size="24" color="#FF9800"></u-icon>
-					<text class="action-text">分享档案</text>
+			</view>
+
+			<view class="empty-state" v-else>
+				<text class="empty-icon">📝</text>
+				<text class="empty-title">还没有记录</text>
+				<text class="empty-subtitle">开始记录宠物的美好时光吧</text>
+				<view class="empty-action" @click="addRecord">
+					<text class="empty-action-text">+ 添加第一条记录</text>
 				</view>
 			</view>
 		</view>
@@ -132,13 +175,24 @@ export default {
 			recentRecords: [
 				{
 					id: 1,
-					date: '2024-01-15',
-					content: '今天小橘很活泼，食欲很好'
+					type: 'weight',
+					title: '体重记录',
+					date: '2024-01-20',
+					content: '今天体重4.2kg，比上周增加了0.1kg，成长状态良好'
 				},
 				{
 					id: 2,
-					date: '2024-01-14',
-					content: '带小橘去公园散步，玩得很开心'
+					type: 'vaccine',
+					title: '疫苗接种',
+					date: '2024-01-18',
+					content: '完成了狂犬疫苗第二针接种，医生说恢复情况很好'
+				},
+				{
+					id: 3,
+					type: 'bath',
+					title: '洗澡护理',
+					date: '2024-01-17',
+					content: '给小橘洗了澡，全程很乖没有挣扎，现在毛毛很香'
 				}
 			],
 			layout1Items: [
@@ -216,14 +270,15 @@ export default {
 				if (!this.petInfo.id) {
 					this.petInfo = {
 						id: this.petId,
-						name: '未知宠物',
-						breed: '未知品种',
-						age: 0,
-						companionDays: 0,
-						avatar: '/static/default-pet.png',
-						gender: '未知',
-						weight: '0kg',
-						birthday: '未知'
+						name: '小橘',
+						breed: '橘猫',
+						age: 2,
+						companionDays: 645,
+						avatar: '',
+						gender: '公',
+						weight: '4.2kg',
+						birthday: '2022-03-15',
+						adoptDate: '2022-04-20'
 					}
 				}
 			} catch (error) {
@@ -231,6 +286,32 @@ export default {
 				this.petInfo = {}
 			}
 		},
+
+		getRecordIcon(type) {
+			const icons = {
+				weight: '⚖️',
+				vaccine: '💉',
+				bath: '🛁',
+				food: '🍽️',
+				play: '🎾',
+				medical: '🏥',
+				default: '📝'
+			}
+			return icons[type] || icons.default
+		},
+
+		formatDate(dateStr) {
+			if (!dateStr) return ''
+			const date = new Date(dateStr)
+			const now = new Date()
+			const diff = now - date
+			const days = Math.floor(diff / (1000 * 60 * 60 * 24))
+
+			if (days === 0) return '今天'
+			if (days === 1) return '昨天'
+			if (days < 7) return `${days}天前`
+			return dateStr
+		},
 		
 		editPet() {
 			uni.navigateTo({
@@ -274,6 +355,10 @@ export default {
 			})
 		},
 
+		viewAllRecords() {
+			this.viewRecords()
+		},
+
 		shareProfile() {
 			uni.showToast({
 				title: '分享功能开发中',
@@ -348,149 +433,471 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.pet-detail-container {
+/* 优化后的样式 */
+.container {
 	background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
 	min-height: 100vh;
+	padding: 20rpx;
 }
 
-.header-actions {
+/* 宠物主卡片 */
+.pet-main-card {
 	background: rgba(255, 255, 255, 0.95);
 	backdrop-filter: blur(20rpx);
-	margin: 20rpx 30rpx;
-	border-radius: 24rpx;
-	padding: 24rpx;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
+	border-radius: 32rpx;
+	padding: 40rpx;
+	margin-bottom: 24rpx;
+	box-shadow: 0 12rpx 40rpx rgba(255, 138, 128, 0.25);
 	border: 1rpx solid rgba(255, 255, 255, 0.3);
-
-	.page-title {
-		font-size: 32rpx;
-		font-weight: 600;
-		color: #FF8A80;
-	}
+	position: relative;
 
 	.edit-btn {
-		background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 100%);
-		border-radius: 20rpx;
-		padding: 16rpx 24rpx;
-		box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.4);
+		position: absolute;
+		top: 24rpx;
+		right: 24rpx;
+		width: 56rpx;
+		height: 56rpx;
+		background: rgba(255, 138, 128, 0.1);
+		border-radius: 28rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 		transition: all 0.3s ease;
 
 		&:active {
-			transform: scale(0.95);
+			transform: scale(0.9);
+			background: rgba(255, 138, 128, 0.2);
 		}
 
-		.edit-text {
+		.edit-icon {
 			font-size: 28rpx;
-			color: #ffffff;
-			font-weight: 500;
+		}
+	}
+
+	.pet-avatar-section {
+		text-align: center;
+		margin-bottom: 32rpx;
+
+		.avatar-container {
+			position: relative;
+			display: inline-block;
+
+			.pet-avatar-large {
+				width: 140rpx;
+				height: 140rpx;
+				border-radius: 70rpx;
+				border: 4rpx solid #FF8A80;
+				background: #FFE0DD;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.3);
+
+				.avatar-placeholder {
+					font-size: 70rpx;
+				}
+			}
+
+			.avatar-badge {
+				position: absolute;
+				bottom: 8rpx;
+				right: 8rpx;
+				background: #4CAF50;
+				border-radius: 20rpx;
+				padding: 6rpx 12rpx;
+				box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);
+
+				.badge-text {
+					font-size: 20rpx;
+					color: white;
+					font-weight: bold;
+				}
+			}
+		}
+	}
+
+	.pet-info-section {
+		text-align: center;
+
+		.pet-name {
+			font-size: 44rpx;
+			font-weight: bold;
+			color: #333333;
+			margin-bottom: 16rpx;
+			display: block;
+		}
+
+		.pet-meta {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			margin-bottom: 32rpx;
+			flex-wrap: wrap;
+
+			.pet-breed, .pet-gender, .pet-age {
+				font-size: 28rpx;
+				color: #666666;
+			}
+
+			.pet-separator {
+				font-size: 28rpx;
+				color: #CCCCCC;
+				margin: 0 12rpx;
+			}
+		}
+
+		.pet-stats {
+			display: flex;
+			justify-content: space-around;
+			background: rgba(255, 138, 128, 0.05);
+			border-radius: 24rpx;
+			padding: 24rpx;
+
+			.stat-item {
+				text-align: center;
+
+				.stat-number {
+					font-size: 32rpx;
+					font-weight: bold;
+					color: #FF8A80;
+					display: block;
+					margin-bottom: 8rpx;
+				}
+
+				.stat-label {
+					font-size: 22rpx;
+					color: #999999;
+					display: block;
+				}
+			}
 		}
 	}
 }
 
-.pet-header {
+/* 详细信息卡片 */
+.details-card {
 	background: rgba(255, 255, 255, 0.95);
 	backdrop-filter: blur(20rpx);
-	margin: 0 30rpx 20rpx 30rpx;
-	border-radius: 24rpx;
-	padding: 30rpx;
-	display: flex;
-	align-items: center;
+	border-radius: 28rpx;
+	padding: 32rpx;
+	margin-bottom: 24rpx;
 	box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
 	border: 1rpx solid rgba(255, 255, 255, 0.3);
 
-	.pet-basic-info {
-		margin-left: 30rpx;
-		flex: 1;
+	.card-header {
+		margin-bottom: 28rpx;
 
-		:deep(.u-text) {
-			margin-bottom: 8rpx;
+		.card-title {
+			font-size: 32rpx;
+			font-weight: bold;
+			color: #333333;
+		}
+	}
+
+	.details-grid {
+		.detail-row {
+			display: flex;
+			gap: 20rpx;
+			margin-bottom: 24rpx;
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+
+			.detail-item {
+				flex: 1;
+				display: flex;
+				align-items: center;
+				gap: 16rpx;
+				background: rgba(255, 138, 128, 0.05);
+				border-radius: 20rpx;
+				padding: 20rpx;
+
+				.detail-icon {
+					font-size: 32rpx;
+					width: 48rpx;
+					text-align: center;
+				}
+
+				.detail-content {
+					flex: 1;
+
+					.detail-label {
+						font-size: 22rpx;
+						color: #999999;
+						margin-bottom: 6rpx;
+						display: block;
+					}
+
+					.detail-value {
+						font-size: 26rpx;
+						font-weight: 500;
+						color: #333333;
+						display: block;
+
+						&.status-good {
+							color: #4CAF50;
+						}
+
+						&.status-excellent {
+							color: #FF8A80;
+						}
+					}
+				}
+			}
 		}
 	}
 }
 
-.info-grid {
-	display: grid;
-	grid-template-columns: 1fr 1fr;
-	gap: 30rpx;
-	
-	.info-item {
-		display: flex;
-		flex-direction: column;
-		
-		:deep(.u-text:first-child) {
-			margin-bottom: 8rpx;
-		}
-	}
-}
-
-.records-list {
-	.record-item {
-		padding: 20rpx 0;
-		border-bottom: 1rpx solid #f0f0f0;
-		
-		&:last-child {
-			border-bottom: none;
-		}
-		
-		.record-date {
-			font-size: 24rpx;
-			color: #999;
-			margin-bottom: 8rpx;
-		}
-		
-		.record-content {
-			font-size: 28rpx;
-			color: #333;
-		}
-	}
-}
-
-/* 性格标签 */
-.personality-tags {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 12rpx;
-}
-
-/* 快捷功能按钮 */
+/* 快速操作区域 */
 .quick-actions {
-	background: #ffffff;
-	margin: 0 30rpx;
-	border-radius: 20rpx;
-	padding: 30rpx;
-	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
+	background: rgba(255, 255, 255, 0.95);
+	backdrop-filter: blur(20rpx);
+	border-radius: 28rpx;
+	padding: 32rpx;
+	margin-bottom: 24rpx;
+	box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
+	border: 1rpx solid rgba(255, 255, 255, 0.3);
 
-	.action-row {
-		display: flex;
-		justify-content: space-around;
-		margin-bottom: 30rpx;
+	.actions-header {
+		margin-bottom: 28rpx;
 
-		&:last-child {
-			margin-bottom: 0;
+		.actions-title {
+			font-size: 32rpx;
+			font-weight: bold;
+			color: #333333;
 		}
 	}
 
-	.action-item {
+	.actions-grid {
 		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: 12rpx;
-		padding: 20rpx;
-		border-radius: 16rpx;
-		transition: all 0.3s ease;
-		min-width: 120rpx;
+		gap: 16rpx;
 
-		&:active {
-			background: #F5F5F5;
-			transform: scale(0.95);
+		.action-card {
+			flex: 1;
+			border-radius: 20rpx;
+			padding: 24rpx 16rpx;
+			text-align: center;
+			transition: all 0.3s ease;
+			position: relative;
+			overflow: hidden;
+
+			&:active {
+				transform: scale(0.95);
+			}
+
+			&.primary {
+				background: linear-gradient(135deg, #FF8A80, #FFB6C1);
+				color: white;
+			}
+
+			&.secondary {
+				background: linear-gradient(135deg, #64B5F6, #81C784);
+				color: white;
+			}
+
+			&.accent {
+				background: linear-gradient(135deg, #FFB74D, #FF8A65);
+				color: white;
+			}
+
+			.action-icon-bg {
+				width: 56rpx;
+				height: 56rpx;
+				background: rgba(255, 255, 255, 0.2);
+				border-radius: 28rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				margin: 0 auto 16rpx;
+
+				.action-icon {
+					font-size: 32rpx;
+				}
+			}
+
+			.action-title {
+				font-size: 26rpx;
+				font-weight: bold;
+				margin-bottom: 6rpx;
+				display: block;
+			}
+
+			.action-subtitle {
+				font-size: 20rpx;
+				opacity: 0.8;
+				display: block;
+			}
+		}
+	}
+}
+
+/* 记录区域 */
+.records-section {
+	background: rgba(255, 255, 255, 0.95);
+	backdrop-filter: blur(20rpx);
+	border-radius: 28rpx;
+	padding: 32rpx;
+	box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
+	border: 1rpx solid rgba(255, 255, 255, 0.3);
+
+	.records-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 28rpx;
+
+		.records-title {
+			font-size: 32rpx;
+			font-weight: bold;
+			color: #333333;
 		}
 
-		.action-text {
-			font-size: 24rpx;
-			color: #666666;
+		.view-all-btn {
+			display: flex;
+			align-items: center;
+			gap: 8rpx;
+			padding: 8rpx 16rpx;
+			background: rgba(255, 138, 128, 0.1);
+			border-radius: 20rpx;
+			transition: all 0.3s ease;
+
+			&:active {
+				background: rgba(255, 138, 128, 0.2);
+			}
+
+			.view-all-text {
+				font-size: 24rpx;
+				color: #FF8A80;
+			}
+
+			.view-all-arrow {
+				font-size: 20rpx;
+				color: #FF8A80;
+			}
+		}
+	}
+
+	.records-list {
+		.record-card {
+			display: flex;
+			align-items: center;
+			padding: 20rpx;
+			background: rgba(255, 138, 128, 0.03);
+			border-radius: 20rpx;
+			margin-bottom: 16rpx;
+			transition: all 0.3s ease;
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+
+			&:active {
+				background: rgba(255, 138, 128, 0.08);
+				transform: scale(0.98);
+			}
+
+			.record-left {
+				flex: 1;
+				display: flex;
+				align-items: center;
+				gap: 16rpx;
+
+				.record-icon-container {
+					width: 56rpx;
+					height: 56rpx;
+					background: #FF8A80;
+					border-radius: 28rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+
+					.record-icon {
+						font-size: 28rpx;
+						color: white;
+					}
+				}
+
+				.record-info {
+					flex: 1;
+
+					.record-title {
+						font-size: 28rpx;
+						font-weight: 500;
+						color: #333333;
+						margin-bottom: 6rpx;
+						display: block;
+					}
+
+					.record-content {
+						font-size: 24rpx;
+						color: #666666;
+						line-height: 1.4;
+						margin-bottom: 6rpx;
+						display: block;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+					}
+
+					.record-time {
+						font-size: 20rpx;
+						color: #999999;
+						display: block;
+					}
+				}
+			}
+
+			.record-right {
+				.record-arrow {
+					font-size: 32rpx;
+					color: #CCCCCC;
+				}
+			}
+		}
+	}
+
+	.empty-state {
+		text-align: center;
+		padding: 80rpx 40rpx;
+
+		.empty-icon {
+			font-size: 80rpx;
+			margin-bottom: 24rpx;
+			display: block;
+		}
+
+		.empty-title {
+			font-size: 32rpx;
+			font-weight: bold;
+			color: #333333;
+			margin-bottom: 12rpx;
+			display: block;
+		}
+
+		.empty-subtitle {
+			font-size: 26rpx;
+			color: #999999;
+			margin-bottom: 40rpx;
+			display: block;
+		}
+
+		.empty-action {
+			background: linear-gradient(135deg, #FF8A80, #FFB6C1);
+			border-radius: 28rpx;
+			padding: 20rpx 40rpx;
+			display: inline-block;
+			transition: all 0.3s ease;
+
+			&:active {
+				transform: scale(0.95);
+			}
+
+			.empty-action-text {
+				font-size: 28rpx;
+				color: white;
+				font-weight: 500;
+			}
 		}
 	}
 }
diff --git a/prompts/宠物小程序开发助手_优化版.md b/prompts/prompt.md
similarity index 100%
rename from prompts/宠物小程序开发助手_优化版.md
rename to prompts/prompt.md
diff --git a/prototypes/pet-detail/assets/css/common.css b/prototypes/pet-detail/assets/css/common.css
new file mode 100644
index 0000000..387ef90
--- /dev/null
+++ b/prototypes/pet-detail/assets/css/common.css
@@ -0,0 +1,157 @@
+/* 宠物详情页面原型通用样式 */
+
+/* 基础重置和变量 */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:root {
+    /* 项目色彩语义化系统 */
+    --pet-primary: #FF8A80;      /* 温暖珊瑚红 - 主要操作 */
+    --pet-secondary: #81C784;    /* 自然绿 - 健康相关 */
+    --pet-accent: #64B5F6;       /* 友好蓝 - 信息提示 */
+    --pet-warning: #FFB74D;      /* 温和橙 - 注意事项 */
+    --pet-success: #A5D6A7;      /* 清新绿 - 成功状态 */
+    --pet-neutral: #F5F5F5;      /* 中性灰 - 背景色 */
+    
+    /* 文字颜色 */
+    --text-primary: #333333;
+    --text-secondary: #666666;
+    --text-light: #999999;
+    --text-white: #FFFFFF;
+    
+    /* 间距系统 */
+    --spacing-xs: 4px;
+    --spacing-sm: 8px;
+    --spacing-md: 16px;
+    --spacing-lg: 24px;
+    --spacing-xl: 32px;
+    
+    /* 圆角系统 */
+    --radius-sm: 4px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    --radius-xl: 16px;
+    --radius-round: 50%;
+    
+    /* 阴影系统 */
+    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
+    --shadow-md: 0 4px 8px rgba(0,0,0,0.12);
+    --shadow-lg: 0 8px 16px rgba(0,0,0,0.15);
+}
+
+/* 基础样式 */
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background-color: var(--pet-neutral);
+    color: var(--text-primary);
+    line-height: 1.6;
+}
+
+.container {
+    max-width: 375px;
+    margin: 0 auto;
+    background: white;
+    min-height: 100vh;
+    position: relative;
+}
+
+/* 通用组件样式 */
+.pet-avatar {
+    width: 80px;
+    height: 80px;
+    border-radius: var(--radius-round);
+    object-fit: cover;
+    border: 3px solid var(--pet-primary);
+}
+
+.pet-avatar-lg {
+    width: 120px;
+    height: 120px;
+}
+
+.card {
+    background: white;
+    border-radius: var(--radius-lg);
+    padding: var(--spacing-md);
+    margin: var(--spacing-md);
+    box-shadow: var(--shadow-sm);
+}
+
+.btn {
+    padding: var(--spacing-sm) var(--spacing-md);
+    border: none;
+    border-radius: var(--radius-md);
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.btn-primary {
+    background: var(--pet-primary);
+    color: var(--text-white);
+}
+
+.btn-secondary {
+    background: var(--pet-secondary);
+    color: var(--text-white);
+}
+
+.btn-accent {
+    background: var(--pet-accent);
+    color: var(--text-white);
+}
+
+.btn:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
+
+/* 文字样式 */
+.text-primary { color: var(--text-primary); }
+.text-secondary { color: var(--text-secondary); }
+.text-light { color: var(--text-light); }
+.text-white { color: var(--text-white); }
+
+.text-sm { font-size: 12px; }
+.text-md { font-size: 14px; }
+.text-lg { font-size: 16px; }
+.text-xl { font-size: 18px; }
+.text-2xl { font-size: 24px; }
+
+.font-bold { font-weight: bold; }
+.font-medium { font-weight: 500; }
+
+/* 布局工具类 */
+.flex { display: flex; }
+.flex-col { flex-direction: column; }
+.items-center { align-items: center; }
+.justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.text-center { text-align: center; }
+
+.p-sm { padding: var(--spacing-sm); }
+.p-md { padding: var(--spacing-md); }
+.p-lg { padding: var(--spacing-lg); }
+
+.m-sm { margin: var(--spacing-sm); }
+.m-md { margin: var(--spacing-md); }
+.m-lg { margin: var(--spacing-lg); }
+
+.mb-sm { margin-bottom: var(--spacing-sm); }
+.mb-md { margin-bottom: var(--spacing-md); }
+.mb-lg { margin-bottom: var(--spacing-lg); }
+
+/* 响应式 */
+@media (max-width: 375px) {
+    .container {
+        max-width: 100%;
+    }
+    
+    .card {
+        margin: var(--spacing-sm);
+        padding: var(--spacing-sm);
+    }
+}
diff --git a/prototypes/pet-detail/assets/js/common.js b/prototypes/pet-detail/assets/js/common.js
new file mode 100644
index 0000000..2c114da
--- /dev/null
+++ b/prototypes/pet-detail/assets/js/common.js
@@ -0,0 +1,209 @@
+// 宠物详情页面原型通用脚本
+
+// 模拟宠物数据
+const mockPetData = {
+    id: 1,
+    name: "小橘",
+    breed: "橘猫",
+    gender: "公",
+    age: "2岁3个月",
+    weight: "4.2kg",
+    birthday: "2022-03-15",
+    adoptDate: "2022-04-20",
+    avatar: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K",
+    companionDays: 645,
+    healthStatus: "healthy",
+    personality: ["活泼", "粘人", "贪吃"],
+    lastCheckup: "2024-01-15",
+    nextVaccine: "2024-03-20"
+};
+
+// 模拟记录数据
+const mockRecords = [
+    {
+        id: 1,
+        type: "daily",
+        title: "今天的体重记录",
+        content: "小橘今天体重4.2kg，比上周增加了0.1kg",
+        time: "2024-01-20 09:30",
+        icon: "⚖️"
+    },
+    {
+        id: 2,
+        type: "health",
+        title: "疫苗接种",
+        content: "完成了狂犬疫苗第二针接种",
+        time: "2024-01-18 14:20",
+        icon: "💉"
+    },
+    {
+        id: 3,
+        type: "moment",
+        title: "搞破坏现场",
+        content: "把我的拖鞋咬坏了，但是看起来很开心的样子",
+        time: "2024-01-17 16:45",
+        icon: "😸"
+    },
+    {
+        id: 4,
+        type: "care",
+        title: "洗澡记录",
+        content: "给小橘洗了澡，全程很乖没有挣扎",
+        time: "2024-01-15 10:00",
+        icon: "🛁"
+    },
+    {
+        id: 5,
+        type: "food",
+        title: "换新猫粮",
+        content: "尝试了新品牌的猫粮，适应性很好",
+        time: "2024-01-14 18:30",
+        icon: "🍽️"
+    }
+];
+
+// 模拟健康数据
+const mockHealthData = {
+    weight: [
+        { date: "2024-01-01", value: 4.0 },
+        { date: "2024-01-08", value: 4.1 },
+        { date: "2024-01-15", value: 4.1 },
+        { date: "2024-01-20", value: 4.2 }
+    ],
+    healthScore: 85,
+    vaccineStatus: {
+        rabies: { status: "completed", nextDate: "2024-03-20" },
+        feline: { status: "due", nextDate: "2024-02-15" }
+    }
+};
+
+// 工具函数
+const utils = {
+    // 计算陪伴天数
+    calculateCompanionDays(adoptDate) {
+        const today = new Date();
+        const adopt = new Date(adoptDate);
+        const diffTime = Math.abs(today - adopt);
+        return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+    },
+
+    // 格式化日期
+    formatDate(dateString) {
+        const date = new Date(dateString);
+        return date.toLocaleDateString('zh-CN', {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric'
+        });
+    },
+
+    // 格式化时间
+    formatTime(timeString) {
+        const date = new Date(timeString);
+        return date.toLocaleString('zh-CN', {
+            month: 'short',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+    },
+
+    // 获取健康状态颜色
+    getHealthStatusColor(status) {
+        const colors = {
+            healthy: '#A5D6A7',
+            warning: '#FFB74D',
+            danger: '#FF8A80'
+        };
+        return colors[status] || colors.healthy;
+    },
+
+    // 生成随机ID
+    generateId() {
+        return Date.now() + Math.random().toString(36).substr(2, 9);
+    }
+};
+
+// 通用交互函数
+const interactions = {
+    // 显示提示信息
+    showToast(message, type = 'info') {
+        const toast = document.createElement('div');
+        toast.className = `toast toast-${type}`;
+        toast.textContent = message;
+        toast.style.cssText = `
+            position: fixed;
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: var(--pet-primary);
+            color: white;
+            padding: 12px 24px;
+            border-radius: 8px;
+            z-index: 1000;
+            animation: slideDown 0.3s ease;
+        `;
+        
+        document.body.appendChild(toast);
+        
+        setTimeout(() => {
+            toast.style.animation = 'slideUp 0.3s ease';
+            setTimeout(() => {
+                document.body.removeChild(toast);
+            }, 300);
+        }, 2000);
+    },
+
+    // 模拟按钮点击
+    handleButtonClick(action) {
+        const actions = {
+            edit: () => this.showToast('编辑功能'),
+            addRecord: () => this.showToast('添加记录'),
+            aiChat: () => this.showToast('AI聊天'),
+            healthChart: () => this.showToast('健康图表'),
+            timeline: () => this.showToast('成长时光'),
+            share: () => this.showToast('分享功能')
+        };
+        
+        if (actions[action]) {
+            actions[action]();
+        } else {
+            this.showToast(`${action} 功能`);
+        }
+    }
+};
+
+// 添加CSS动画
+const style = document.createElement('style');
+style.textContent = `
+    @keyframes slideDown {
+        from { transform: translateX(-50%) translateY(-100%); opacity: 0; }
+        to { transform: translateX(-50%) translateY(0); opacity: 1; }
+    }
+    
+    @keyframes slideUp {
+        from { transform: translateX(-50%) translateY(0); opacity: 1; }
+        to { transform: translateX(-50%) translateY(-100%); opacity: 0; }
+    }
+    
+    .fade-in {
+        animation: fadeIn 0.5s ease;
+    }
+    
+    @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(20px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+`;
+document.head.appendChild(style);
+
+// 页面加载完成后初始化
+document.addEventListener('DOMContentLoaded', function() {
+    // 更新陪伴天数
+    mockPetData.companionDays = utils.calculateCompanionDays(mockPetData.adoptDate);
+    
+    // 添加淡入动画
+    document.body.classList.add('fade-in');
+    
+    console.log('宠物详情页面原型已加载');
+});
diff --git a/prototypes/pet-detail/pet-detail-prototype-01.html b/prototypes/pet-detail/pet-detail-prototype-01.html
new file mode 100644
index 0000000..a65fb3f
--- /dev/null
+++ b/prototypes/pet-detail/pet-detail-prototype-01.html
@@ -0,0 +1,240 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>宠物详情 - 经典卡片式</title>
+    <link rel="stylesheet" href="assets/css/common.css">
+    <style>
+        /* 经典卡片式特有样式 */
+        .classic-header {
+            background: linear-gradient(135deg, var(--pet-primary), #FFB6C1);
+            color: white;
+            padding: var(--spacing-lg);
+            text-align: center;
+            position: relative;
+        }
+        
+        .classic-header .edit-btn {
+            position: absolute;
+            top: var(--spacing-md);
+            right: var(--spacing-md);
+            background: rgba(255,255,255,0.2);
+            border: 1px solid rgba(255,255,255,0.3);
+            color: white;
+            padding: var(--spacing-xs) var(--spacing-sm);
+            border-radius: var(--radius-md);
+            font-size: 12px;
+        }
+        
+        .pet-info-main {
+            margin-top: -40px;
+            position: relative;
+            z-index: 2;
+        }
+        
+        .pet-avatar-card {
+            background: white;
+            border-radius: var(--radius-lg);
+            padding: var(--spacing-lg);
+            margin: 0 var(--spacing-md);
+            box-shadow: var(--shadow-md);
+            text-align: center;
+        }
+        
+        .pet-avatar-large {
+            width: 100px;
+            height: 100px;
+            border-radius: var(--radius-round);
+            border: 4px solid var(--pet-primary);
+            margin-bottom: var(--spacing-md);
+        }
+        
+        .info-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: var(--spacing-md);
+            margin-top: var(--spacing-lg);
+        }
+        
+        .info-item {
+            background: var(--pet-neutral);
+            padding: var(--spacing-md);
+            border-radius: var(--radius-md);
+            text-align: center;
+        }
+        
+        .info-label {
+            font-size: 12px;
+            color: var(--text-light);
+            margin-bottom: var(--spacing-xs);
+        }
+        
+        .info-value {
+            font-size: 16px;
+            font-weight: bold;
+            color: var(--text-primary);
+        }
+        
+        .action-buttons {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: var(--spacing-sm);
+            padding: var(--spacing-md);
+        }
+        
+        .action-btn {
+            background: white;
+            border: 2px solid var(--pet-primary);
+            color: var(--pet-primary);
+            padding: var(--spacing-md);
+            border-radius: var(--radius-lg);
+            text-align: center;
+            font-size: 12px;
+            transition: all 0.3s ease;
+        }
+        
+        .action-btn:hover {
+            background: var(--pet-primary);
+            color: white;
+        }
+        
+        .action-icon {
+            font-size: 20px;
+            margin-bottom: var(--spacing-xs);
+        }
+        
+        .recent-records {
+            margin: var(--spacing-md);
+        }
+        
+        .record-item {
+            background: white;
+            border-radius: var(--radius-md);
+            padding: var(--spacing-md);
+            margin-bottom: var(--spacing-sm);
+            border-left: 4px solid var(--pet-accent);
+            box-shadow: var(--shadow-sm);
+        }
+        
+        .record-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: var(--spacing-xs);
+        }
+        
+        .record-title {
+            font-weight: bold;
+            color: var(--text-primary);
+        }
+        
+        .record-time {
+            font-size: 12px;
+            color: var(--text-light);
+        }
+        
+        .record-content {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <!-- 头部区域 -->
+        <div class="classic-header">
+            <button class="edit-btn" onclick="interactions.handleButtonClick('edit')">编辑</button>
+            <h1 class="text-xl font-bold">小橘的档案</h1>
+            <p class="text-sm">我的小宝贝</p>
+        </div>
+        
+        <!-- 宠物基本信息 -->
+        <div class="pet-info-main">
+            <div class="pet-avatar-card">
+                <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K" 
+                     alt="小橘" class="pet-avatar-large">
+                <h2 class="text-xl font-bold mb-sm">小橘</h2>
+                <p class="text-secondary">橘猫 · 公 · 2岁3个月</p>
+                <p class="text-sm text-light">陪伴了 645 天</p>
+            </div>
+        </div>
+        
+        <!-- 详细信息网格 -->
+        <div class="card">
+            <h3 class="text-lg font-bold mb-md">基本信息</h3>
+            <div class="info-grid">
+                <div class="info-item">
+                    <div class="info-label">生日</div>
+                    <div class="info-value">2022-03-15</div>
+                </div>
+                <div class="info-item">
+                    <div class="info-label">体重</div>
+                    <div class="info-value">4.2kg</div>
+                </div>
+                <div class="info-item">
+                    <div class="info-label">到家日期</div>
+                    <div class="info-value">2022-04-20</div>
+                </div>
+                <div class="info-item">
+                    <div class="info-label">健康状态</div>
+                    <div class="info-value" style="color: var(--pet-secondary)">良好</div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 快速操作按钮 -->
+        <div class="action-buttons">
+            <button class="action-btn" onclick="interactions.handleButtonClick('addRecord')">
+                <div class="action-icon">📝</div>
+                <div>添加记录</div>
+            </button>
+            <button class="action-btn" onclick="interactions.handleButtonClick('aiChat')">
+                <div class="action-icon">💬</div>
+                <div>AI聊天</div>
+            </button>
+            <button class="action-btn" onclick="interactions.handleButtonClick('healthChart')">
+                <div class="action-icon">📊</div>
+                <div>健康图表</div>
+            </button>
+        </div>
+        
+        <!-- 最近记录 -->
+        <div class="recent-records">
+            <h3 class="text-lg font-bold mb-md">最近记录</h3>
+            
+            <div class="record-item">
+                <div class="record-header">
+                    <span class="record-title">⚖️ 今天的体重记录</span>
+                    <span class="record-time">01-20 09:30</span>
+                </div>
+                <div class="record-content">小橘今天体重4.2kg，比上周增加了0.1kg</div>
+            </div>
+            
+            <div class="record-item">
+                <div class="record-header">
+                    <span class="record-title">💉 疫苗接种</span>
+                    <span class="record-time">01-18 14:20</span>
+                </div>
+                <div class="record-content">完成了狂犬疫苗第二针接种</div>
+            </div>
+            
+            <div class="record-item">
+                <div class="record-header">
+                    <span class="record-title">😸 搞破坏现场</span>
+                    <span class="record-time">01-17 16:45</span>
+                </div>
+                <div class="record-content">把我的拖鞋咬坏了，但是看起来很开心的样子</div>
+            </div>
+        </div>
+    </div>
+    
+    <script src="assets/js/common.js"></script>
+    <script>
+        // 经典卡片式特有交互
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log('经典卡片式原型已加载');
+        });
+    </script>
+</body>
+</html>
diff --git a/prototypes/pet-detail/pet-detail-prototype-02.html b/prototypes/pet-detail/pet-detail-prototype-02.html
new file mode 100644
index 0000000..3fc1e31
--- /dev/null
+++ b/prototypes/pet-detail/pet-detail-prototype-02.html
@@ -0,0 +1,378 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>宠物详情 - 时间轴式</title>
+    <link rel="stylesheet" href="assets/css/common.css">
+    <style>
+        /* 时间轴式特有样式 */
+        .timeline-header {
+            background: linear-gradient(45deg, var(--pet-accent), var(--pet-secondary));
+            padding: var(--spacing-lg);
+            color: white;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .timeline-header::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            right: -50%;
+            width: 200%;
+            height: 200%;
+            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>') repeat;
+            animation: float 20s infinite linear;
+        }
+        
+        @keyframes float {
+            0% { transform: translateX(0) translateY(0); }
+            100% { transform: translateX(-50px) translateY(-50px); }
+        }
+        
+        .pet-summary {
+            position: relative;
+            z-index: 2;
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-md);
+        }
+        
+        .pet-avatar-timeline {
+            width: 80px;
+            height: 80px;
+            border-radius: var(--radius-round);
+            border: 3px solid white;
+        }
+        
+        .pet-info-timeline {
+            flex: 1;
+        }
+        
+        .timeline-container {
+            padding: var(--spacing-md);
+            position: relative;
+        }
+        
+        .timeline {
+            position: relative;
+            padding-left: 30px;
+        }
+        
+        .timeline::before {
+            content: '';
+            position: absolute;
+            left: 15px;
+            top: 0;
+            bottom: 0;
+            width: 2px;
+            background: linear-gradient(to bottom, var(--pet-primary), var(--pet-accent));
+        }
+        
+        .timeline-item {
+            position: relative;
+            margin-bottom: var(--spacing-lg);
+            background: white;
+            border-radius: var(--radius-lg);
+            padding: var(--spacing-md);
+            box-shadow: var(--shadow-sm);
+            transition: all 0.3s ease;
+        }
+        
+        .timeline-item:hover {
+            transform: translateX(5px);
+            box-shadow: var(--shadow-md);
+        }
+        
+        .timeline-item::before {
+            content: '';
+            position: absolute;
+            left: -37px;
+            top: 20px;
+            width: 12px;
+            height: 12px;
+            border-radius: var(--radius-round);
+            background: var(--pet-primary);
+            border: 3px solid white;
+            box-shadow: 0 0 0 2px var(--pet-primary);
+        }
+        
+        .timeline-date {
+            position: absolute;
+            left: -120px;
+            top: 15px;
+            font-size: 12px;
+            color: var(--text-light);
+            font-weight: bold;
+            writing-mode: vertical-rl;
+            text-orientation: mixed;
+        }
+        
+        .timeline-content {
+            margin-left: var(--spacing-md);
+        }
+        
+        .timeline-title {
+            font-weight: bold;
+            color: var(--text-primary);
+            margin-bottom: var(--spacing-xs);
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-xs);
+        }
+        
+        .timeline-icon {
+            font-size: 18px;
+        }
+        
+        .timeline-description {
+            color: var(--text-secondary);
+            font-size: 14px;
+            line-height: 1.5;
+        }
+        
+        .timeline-stats {
+            background: var(--pet-neutral);
+            border-radius: var(--radius-md);
+            padding: var(--spacing-md);
+            margin: var(--spacing-md);
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: var(--spacing-md);
+            text-align: center;
+        }
+        
+        .stat-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        
+        .stat-number {
+            font-size: 24px;
+            font-weight: bold;
+            color: var(--pet-primary);
+        }
+        
+        .stat-label {
+            font-size: 12px;
+            color: var(--text-light);
+            margin-top: var(--spacing-xs);
+        }
+        
+        .floating-actions {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: var(--spacing-sm);
+        }
+        
+        .floating-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: var(--radius-round);
+            background: var(--pet-primary);
+            color: white;
+            border: none;
+            font-size: 20px;
+            box-shadow: var(--shadow-lg);
+            transition: all 0.3s ease;
+        }
+        
+        .floating-btn:hover {
+            transform: scale(1.1);
+        }
+        
+        .milestone-item {
+            border-left: 4px solid var(--pet-warning);
+        }
+        
+        .milestone-item::before {
+            background: var(--pet-warning);
+            box-shadow: 0 0 0 2px var(--pet-warning);
+        }
+        
+        .health-item {
+            border-left: 4px solid var(--pet-secondary);
+        }
+        
+        .health-item::before {
+            background: var(--pet-secondary);
+            box-shadow: 0 0 0 2px var(--pet-secondary);
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <!-- 头部区域 -->
+        <div class="timeline-header">
+            <div class="pet-summary">
+                <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K" 
+                     alt="小橘" class="pet-avatar-timeline">
+                <div class="pet-info-timeline">
+                    <h1 class="text-xl font-bold">小橘的成长时光</h1>
+                    <p class="text-sm">橘猫 · 公 · 2岁3个月</p>
+                    <p class="text-sm">陪伴了 645 个美好日子</p>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 统计数据 -->
+        <div class="timeline-stats">
+            <div class="stat-item">
+                <div class="stat-number">645</div>
+                <div class="stat-label">陪伴天数</div>
+            </div>
+            <div class="stat-item">
+                <div class="stat-number">127</div>
+                <div class="stat-label">记录总数</div>
+            </div>
+            <div class="stat-item">
+                <div class="stat-number">85</div>
+                <div class="stat-label">健康评分</div>
+            </div>
+        </div>
+        
+        <!-- 时间轴内容 -->
+        <div class="timeline-container">
+            <div class="timeline">
+                <!-- 最近记录 -->
+                <div class="timeline-item">
+                    <div class="timeline-date">01-20</div>
+                    <div class="timeline-content">
+                        <div class="timeline-title">
+                            <span class="timeline-icon">⚖️</span>
+                            <span>体重记录</span>
+                        </div>
+                        <div class="timeline-description">
+                            今天测量体重4.2kg，比上周增加了0.1kg，成长状态良好。
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- 健康记录 -->
+                <div class="timeline-item health-item">
+                    <div class="timeline-date">01-18</div>
+                    <div class="timeline-content">
+                        <div class="timeline-title">
+                            <span class="timeline-icon">💉</span>
+                            <span>疫苗接种</span>
+                        </div>
+                        <div class="timeline-description">
+                            完成了狂犬疫苗第二针接种，医生说恢复情况很好。
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- 日常记录 -->
+                <div class="timeline-item">
+                    <div class="timeline-date">01-17</div>
+                    <div class="timeline-content">
+                        <div class="timeline-title">
+                            <span class="timeline-icon">😸</span>
+                            <span>搞破坏现场</span>
+                        </div>
+                        <div class="timeline-description">
+                            把我的拖鞋咬坏了，但是看起来很开心的样子，活泼的性格展现无遗。
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- 护理记录 -->
+                <div class="timeline-item">
+                    <div class="timeline-date">01-15</div>
+                    <div class="timeline-content">
+                        <div class="timeline-title">
+                            <span class="timeline-icon">🛁</span>
+                            <span>洗澡记录</span>
+                        </div>
+                        <div class="timeline-description">
+                            给小橘洗了澡，全程很乖没有挣扎，用的是专用宠物洗发水。
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- 里程碑事件 -->
+                <div class="timeline-item milestone-item">
+                    <div class="timeline-date">01-14</div>
+                    <div class="timeline-content">
+                        <div class="timeline-title">
+                            <span class="timeline-icon">🍽️</span>
+                            <span>换新猫粮</span>
+                        </div>
+                        <div class="timeline-description">
+                            尝试了新品牌的猫粮，适应性很好，食欲旺盛。
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- 重要里程碑 -->
+                <div class="timeline-item milestone-item">
+                    <div class="timeline-date">04-20</div>
+                    <div class="timeline-content">
+                        <div class="timeline-title">
+                            <span class="timeline-icon">🏠</span>
+                            <span>到家纪念日</span>
+                        </div>
+                        <div class="timeline-description">
+                            小橘来到我们家的第一天，从此开始了美好的陪伴时光。
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 悬浮操作按钮 -->
+        <div class="floating-actions">
+            <button class="floating-btn" onclick="interactions.handleButtonClick('addRecord')" title="添加记录">
+                ➕
+            </button>
+            <button class="floating-btn" onclick="interactions.handleButtonClick('aiChat')" title="AI聊天">
+                💬
+            </button>
+        </div>
+    </div>
+    
+    <script src="assets/js/common.js"></script>
+    <script>
+        // 时间轴式特有交互
+        document.addEventListener('DOMContentLoaded', function() {
+            // 添加滚动动画
+            const timelineItems = document.querySelectorAll('.timeline-item');
+            
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.style.animation = 'slideInRight 0.6s ease forwards';
+                    }
+                });
+            });
+            
+            timelineItems.forEach(item => {
+                observer.observe(item);
+            });
+            
+            console.log('时间轴式原型已加载');
+        });
+        
+        // 添加滑入动画
+        const style = document.createElement('style');
+        style.textContent = `
+            @keyframes slideInRight {
+                from {
+                    opacity: 0;
+                    transform: translateX(30px);
+                }
+                to {
+                    opacity: 1;
+                    transform: translateX(0);
+                }
+            }
+        `;
+        document.head.appendChild(style);
+    </script>
+</body>
+</html>
diff --git a/prototypes/pet-detail/pet-detail-prototype-03.html b/prototypes/pet-detail/pet-detail-prototype-03.html
new file mode 100644
index 0000000..40ecd1d
--- /dev/null
+++ b/prototypes/pet-detail/pet-detail-prototype-03.html
@@ -0,0 +1,431 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>宠物详情 - 仪表盘式</title>
+    <link rel="stylesheet" href="assets/css/common.css">
+    <style>
+        /* 仪表盘式特有样式 */
+        .dashboard-header {
+            background: linear-gradient(135deg, #2C3E50, #34495E);
+            color: white;
+            padding: var(--spacing-lg);
+            position: relative;
+        }
+        
+        .dashboard-nav {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: var(--spacing-md);
+        }
+        
+        .dashboard-title {
+            font-size: 18px;
+            font-weight: bold;
+        }
+        
+        .dashboard-menu {
+            background: rgba(255,255,255,0.1);
+            border: none;
+            color: white;
+            padding: var(--spacing-xs);
+            border-radius: var(--radius-sm);
+        }
+        
+        .pet-overview {
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-md);
+        }
+        
+        .pet-avatar-dashboard {
+            width: 70px;
+            height: 70px;
+            border-radius: var(--radius-round);
+            border: 3px solid rgba(255,255,255,0.3);
+        }
+        
+        .metrics-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: var(--spacing-md);
+            padding: var(--spacing-md);
+        }
+        
+        .metric-card {
+            background: white;
+            border-radius: var(--radius-lg);
+            padding: var(--spacing-md);
+            box-shadow: var(--shadow-sm);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .metric-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: var(--spacing-md);
+        }
+        
+        .metric-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-weight: 500;
+        }
+        
+        .metric-icon {
+            font-size: 20px;
+        }
+        
+        .metric-value {
+            font-size: 24px;
+            font-weight: bold;
+            color: var(--text-primary);
+            margin-bottom: var(--spacing-xs);
+        }
+        
+        .metric-change {
+            font-size: 12px;
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-xs);
+        }
+        
+        .metric-change.positive {
+            color: var(--pet-secondary);
+        }
+        
+        .metric-change.negative {
+            color: var(--pet-warning);
+        }
+        
+        .progress-ring {
+            position: relative;
+            width: 80px;
+            height: 80px;
+            margin: 0 auto var(--spacing-md);
+        }
+        
+        .progress-ring svg {
+            transform: rotate(-90deg);
+        }
+        
+        .progress-ring-circle {
+            fill: none;
+            stroke-width: 8;
+        }
+        
+        .progress-ring-bg {
+            stroke: var(--pet-neutral);
+        }
+        
+        .progress-ring-progress {
+            stroke: var(--pet-primary);
+            stroke-linecap: round;
+            transition: stroke-dashoffset 0.5s ease;
+        }
+        
+        .progress-text {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 16px;
+            font-weight: bold;
+            color: var(--text-primary);
+        }
+        
+        .chart-container {
+            background: white;
+            border-radius: var(--radius-lg);
+            padding: var(--spacing-md);
+            margin: var(--spacing-md);
+            box-shadow: var(--shadow-sm);
+        }
+        
+        .chart-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: var(--spacing-md);
+        }
+        
+        .chart-title {
+            font-weight: bold;
+            color: var(--text-primary);
+        }
+        
+        .chart-period {
+            font-size: 12px;
+            color: var(--text-light);
+            background: var(--pet-neutral);
+            padding: var(--spacing-xs) var(--spacing-sm);
+            border-radius: var(--radius-sm);
+        }
+        
+        .mini-chart {
+            height: 60px;
+            background: linear-gradient(to right, 
+                var(--pet-accent) 0%, 
+                var(--pet-primary) 50%, 
+                var(--pet-secondary) 100%);
+            border-radius: var(--radius-md);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .mini-chart::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 50"><path d="M0,25 Q25,10 50,25 T100,25" stroke="rgba(255,255,255,0.5)" stroke-width="2" fill="none"/></svg>') no-repeat center;
+            background-size: 100% 100%;
+        }
+        
+        .status-indicators {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: var(--spacing-sm);
+            padding: var(--spacing-md);
+        }
+        
+        .status-item {
+            background: white;
+            border-radius: var(--radius-md);
+            padding: var(--spacing-sm);
+            text-align: center;
+            box-shadow: var(--shadow-sm);
+        }
+        
+        .status-icon {
+            font-size: 24px;
+            margin-bottom: var(--spacing-xs);
+        }
+        
+        .status-label {
+            font-size: 10px;
+            color: var(--text-light);
+        }
+        
+        .status-dot {
+            width: 8px;
+            height: 8px;
+            border-radius: var(--radius-round);
+            margin: var(--spacing-xs) auto 0;
+        }
+        
+        .status-good { background: var(--pet-secondary); }
+        .status-warning { background: var(--pet-warning); }
+        .status-danger { background: var(--pet-primary); }
+        
+        .quick-actions {
+            display: flex;
+            gap: var(--spacing-sm);
+            padding: var(--spacing-md);
+        }
+        
+        .action-btn-dashboard {
+            flex: 1;
+            background: var(--pet-primary);
+            color: white;
+            border: none;
+            padding: var(--spacing-md);
+            border-radius: var(--radius-md);
+            font-size: 12px;
+            font-weight: bold;
+            transition: all 0.3s ease;
+        }
+        
+        .action-btn-dashboard:hover {
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-md);
+        }
+        
+        .action-btn-dashboard.secondary {
+            background: var(--pet-accent);
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <!-- 仪表盘头部 -->
+        <div class="dashboard-header">
+            <div class="dashboard-nav">
+                <div class="dashboard-title">宠物健康仪表盘</div>
+                <button class="dashboard-menu">⋯</button>
+            </div>
+            
+            <div class="pet-overview">
+                <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K" 
+                     alt="小橘" class="pet-avatar-dashboard">
+                <div>
+                    <h2 class="text-lg font-bold">小橘</h2>
+                    <p class="text-sm">橘猫 · 公 · 2岁3个月</p>
+                    <p class="text-sm">健康评分: 85/100</p>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 核心指标网格 -->
+        <div class="metrics-grid">
+            <!-- 体重指标 -->
+            <div class="metric-card">
+                <div class="metric-header">
+                    <span class="metric-title">体重</span>
+                    <span class="metric-icon">⚖️</span>
+                </div>
+                <div class="metric-value">4.2kg</div>
+                <div class="metric-change positive">
+                    <span>↗</span>
+                    <span>+0.1kg 本周</span>
+                </div>
+            </div>
+            
+            <!-- 活动指标 -->
+            <div class="metric-card">
+                <div class="metric-header">
+                    <span class="metric-title">活动量</span>
+                    <span class="metric-icon">🏃</span>
+                </div>
+                <div class="metric-value">78%</div>
+                <div class="metric-change positive">
+                    <span>↗</span>
+                    <span>+5% 昨日</span>
+                </div>
+            </div>
+            
+            <!-- 食欲指标 -->
+            <div class="metric-card">
+                <div class="metric-header">
+                    <span class="metric-title">食欲</span>
+                    <span class="metric-icon">🍽️</span>
+                </div>
+                <div class="metric-value">92%</div>
+                <div class="metric-change negative">
+                    <span>↘</span>
+                    <span>-3% 本周</span>
+                </div>
+            </div>
+            
+            <!-- 睡眠指标 -->
+            <div class="metric-card">
+                <div class="metric-header">
+                    <span class="metric-title">睡眠</span>
+                    <span class="metric-icon">😴</span>
+                </div>
+                <div class="metric-value">14h</div>
+                <div class="metric-change positive">
+                    <span>→</span>
+                    <span>正常范围</span>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 健康评分环形图 -->
+        <div class="chart-container">
+            <div class="chart-header">
+                <span class="chart-title">健康评分</span>
+                <span class="chart-period">本月</span>
+            </div>
+            
+            <div class="progress-ring">
+                <svg width="80" height="80">
+                    <circle class="progress-ring-circle progress-ring-bg" 
+                            cx="40" cy="40" r="32" stroke-width="8"/>
+                    <circle class="progress-ring-circle progress-ring-progress" 
+                            cx="40" cy="40" r="32" stroke-width="8"
+                            stroke-dasharray="201.06" stroke-dashoffset="30.16"/>
+                </svg>
+                <div class="progress-text">85</div>
+            </div>
+            
+            <div class="text-center text-sm text-secondary">
+                比上月提升了 3 分
+            </div>
+        </div>
+        
+        <!-- 体重趋势图 -->
+        <div class="chart-container">
+            <div class="chart-header">
+                <span class="chart-title">体重趋势</span>
+                <span class="chart-period">近30天</span>
+            </div>
+            <div class="mini-chart"></div>
+        </div>
+        
+        <!-- 状态指示器 -->
+        <div class="status-indicators">
+            <div class="status-item">
+                <div class="status-icon">💉</div>
+                <div class="status-label">疫苗</div>
+                <div class="status-dot status-good"></div>
+            </div>
+            <div class="status-item">
+                <div class="status-icon">🐛</div>
+                <div class="status-label">驱虫</div>
+                <div class="status-dot status-warning"></div>
+            </div>
+            <div class="status-item">
+                <div class="status-icon">🦷</div>
+                <div class="status-label">牙齿</div>
+                <div class="status-dot status-good"></div>
+            </div>
+            <div class="status-item">
+                <div class="status-icon">👁️</div>
+                <div class="status-label">眼部</div>
+                <div class="status-dot status-good"></div>
+            </div>
+        </div>
+        
+        <!-- 快速操作 -->
+        <div class="quick-actions">
+            <button class="action-btn-dashboard" onclick="interactions.handleButtonClick('addRecord')">
+                记录数据
+            </button>
+            <button class="action-btn-dashboard secondary" onclick="interactions.handleButtonClick('healthChart')">
+                详细报告
+            </button>
+        </div>
+    </div>
+    
+    <script src="assets/js/common.js"></script>
+    <script>
+        // 仪表盘式特有交互
+        document.addEventListener('DOMContentLoaded', function() {
+            // 动画化进度环
+            const progressCircle = document.querySelector('.progress-ring-progress');
+            const radius = 32;
+            const circumference = 2 * Math.PI * radius;
+            const progress = 85; // 85%
+            const offset = circumference - (progress / 100) * circumference;
+            
+            progressCircle.style.strokeDasharray = circumference;
+            progressCircle.style.strokeDashoffset = circumference;
+            
+            setTimeout(() => {
+                progressCircle.style.strokeDashoffset = offset;
+            }, 500);
+            
+            // 数值动画
+            const metricValues = document.querySelectorAll('.metric-value');
+            metricValues.forEach(value => {
+                const finalValue = value.textContent;
+                value.textContent = '0';
+                
+                setTimeout(() => {
+                    value.style.transition = 'all 1s ease';
+                    value.textContent = finalValue;
+                }, 300);
+            });
+            
+            console.log('仪表盘式原型已加载');
+        });
+    </script>
+</body>
+</html>
diff --git a/prototypes/pet-detail/pet-detail-prototype-04.html b/prototypes/pet-detail/pet-detail-prototype-04.html
new file mode 100644
index 0000000..dc0524e
--- /dev/null
+++ b/prototypes/pet-detail/pet-detail-prototype-04.html
@@ -0,0 +1,489 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>宠物详情 - 社交媒体式</title>
+    <link rel="stylesheet" href="assets/css/common.css">
+    <style>
+        /* 社交媒体式特有样式 */
+        .social-header {
+            background: white;
+            padding: var(--spacing-md);
+            border-bottom: 1px solid #E0E0E0;
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+        
+        .social-nav {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .back-btn {
+            background: none;
+            border: none;
+            font-size: 20px;
+            color: var(--text-primary);
+        }
+        
+        .social-title {
+            font-weight: bold;
+            color: var(--text-primary);
+        }
+        
+        .more-btn {
+            background: none;
+            border: none;
+            font-size: 20px;
+            color: var(--text-primary);
+        }
+        
+        .profile-section {
+            background: white;
+            padding: var(--spacing-lg);
+            border-bottom: 8px solid var(--pet-neutral);
+        }
+        
+        .profile-header {
+            display: flex;
+            gap: var(--spacing-md);
+            margin-bottom: var(--spacing-md);
+        }
+        
+        .profile-avatar {
+            width: 80px;
+            height: 80px;
+            border-radius: var(--radius-round);
+            border: 3px solid var(--pet-primary);
+        }
+        
+        .profile-info {
+            flex: 1;
+        }
+        
+        .profile-name {
+            font-size: 20px;
+            font-weight: bold;
+            color: var(--text-primary);
+            margin-bottom: var(--spacing-xs);
+        }
+        
+        .profile-bio {
+            color: var(--text-secondary);
+            font-size: 14px;
+            line-height: 1.4;
+        }
+        
+        .profile-stats {
+            display: flex;
+            gap: var(--spacing-lg);
+            margin-top: var(--spacing-md);
+        }
+        
+        .stat-item {
+            text-align: center;
+        }
+        
+        .stat-number {
+            font-size: 18px;
+            font-weight: bold;
+            color: var(--text-primary);
+        }
+        
+        .stat-label {
+            font-size: 12px;
+            color: var(--text-light);
+            margin-top: var(--spacing-xs);
+        }
+        
+        .action-buttons {
+            display: flex;
+            gap: var(--spacing-sm);
+            margin-top: var(--spacing-md);
+        }
+        
+        .follow-btn {
+            flex: 1;
+            background: var(--pet-primary);
+            color: white;
+            border: none;
+            padding: var(--spacing-sm);
+            border-radius: var(--radius-md);
+            font-weight: bold;
+        }
+        
+        .message-btn {
+            background: var(--pet-neutral);
+            color: var(--text-primary);
+            border: none;
+            padding: var(--spacing-sm) var(--spacing-md);
+            border-radius: var(--radius-md);
+            font-weight: bold;
+        }
+        
+        .post-item {
+            background: white;
+            margin-bottom: 8px;
+            border-bottom: 1px solid #F0F0F0;
+        }
+        
+        .post-header {
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-sm);
+            padding: var(--spacing-md);
+        }
+        
+        .post-avatar {
+            width: 40px;
+            height: 40px;
+            border-radius: var(--radius-round);
+        }
+        
+        .post-info {
+            flex: 1;
+        }
+        
+        .post-author {
+            font-weight: bold;
+            color: var(--text-primary);
+            font-size: 14px;
+        }
+        
+        .post-time {
+            font-size: 12px;
+            color: var(--text-light);
+        }
+        
+        .post-content {
+            padding: 0 var(--spacing-md) var(--spacing-md);
+        }
+        
+        .post-text {
+            color: var(--text-primary);
+            line-height: 1.5;
+            margin-bottom: var(--spacing-md);
+        }
+        
+        .post-image {
+            width: 100%;
+            height: 200px;
+            background: var(--pet-neutral);
+            border-radius: var(--radius-md);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--text-light);
+            font-size: 48px;
+            margin-bottom: var(--spacing-md);
+        }
+        
+        .post-actions {
+            display: flex;
+            justify-content: space-around;
+            padding: var(--spacing-sm) var(--spacing-md);
+            border-top: 1px solid #F0F0F0;
+        }
+        
+        .action-btn {
+            background: none;
+            border: none;
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-xs);
+            color: var(--text-light);
+            font-size: 14px;
+            padding: var(--spacing-xs);
+        }
+        
+        .action-btn.active {
+            color: var(--pet-primary);
+        }
+        
+        .stories-section {
+            background: white;
+            padding: var(--spacing-md);
+            border-bottom: 8px solid var(--pet-neutral);
+        }
+        
+        .stories-title {
+            font-weight: bold;
+            color: var(--text-primary);
+            margin-bottom: var(--spacing-md);
+        }
+        
+        .stories-list {
+            display: flex;
+            gap: var(--spacing-md);
+            overflow-x: auto;
+            padding-bottom: var(--spacing-sm);
+        }
+        
+        .story-item {
+            flex-shrink: 0;
+            text-align: center;
+        }
+        
+        .story-avatar {
+            width: 60px;
+            height: 60px;
+            border-radius: var(--radius-round);
+            border: 3px solid var(--pet-accent);
+            margin-bottom: var(--spacing-xs);
+        }
+        
+        .story-label {
+            font-size: 12px;
+            color: var(--text-secondary);
+        }
+        
+        .floating-compose {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            width: 56px;
+            height: 56px;
+            border-radius: var(--radius-round);
+            background: var(--pet-primary);
+            color: white;
+            border: none;
+            font-size: 24px;
+            box-shadow: var(--shadow-lg);
+            transition: all 0.3s ease;
+        }
+        
+        .floating-compose:hover {
+            transform: scale(1.1);
+        }
+        
+        .tag {
+            display: inline-block;
+            background: var(--pet-accent);
+            color: white;
+            padding: 2px 8px;
+            border-radius: 12px;
+            font-size: 12px;
+            margin-right: var(--spacing-xs);
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <!-- 社交媒体头部导航 -->
+        <div class="social-header">
+            <div class="social-nav">
+                <button class="back-btn">←</button>
+                <div class="social-title">小橘的主页</div>
+                <button class="more-btn">⋯</button>
+            </div>
+        </div>
+        
+        <!-- 个人资料区域 -->
+        <div class="profile-section">
+            <div class="profile-header">
+                <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K" 
+                     alt="小橘" class="profile-avatar">
+                <div class="profile-info">
+                    <div class="profile-name">小橘 🐱</div>
+                    <div class="profile-bio">
+                        橘猫 · 公 · 2岁3个月<br>
+                        <span class="tag">活泼</span>
+                        <span class="tag">粘人</span>
+                        <span class="tag">贪吃</span><br>
+                        陪伴了我们 645 个美好日子 ❤️
+                    </div>
+                </div>
+            </div>
+            
+            <div class="profile-stats">
+                <div class="stat-item">
+                    <div class="stat-number">127</div>
+                    <div class="stat-label">动态</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-number">5</div>
+                    <div class="stat-label">家人</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-number">85</div>
+                    <div class="stat-label">健康分</div>
+                </div>
+            </div>
+            
+            <div class="action-buttons">
+                <button class="follow-btn" onclick="interactions.handleButtonClick('addRecord')">
+                    📝 记录动态
+                </button>
+                <button class="message-btn" onclick="interactions.handleButtonClick('aiChat')">
+                    💬 AI聊天
+                </button>
+            </div>
+        </div>
+        
+        <!-- 故事/亮点区域 -->
+        <div class="stories-section">
+            <div class="stories-title">精彩时刻</div>
+            <div class="stories-list">
+                <div class="story-item">
+                    <div class="story-avatar" style="background: var(--pet-secondary); display: flex; align-items: center; justify-content: center; color: white; font-size: 20px;">
+                        💉
+                    </div>
+                    <div class="story-label">疫苗</div>
+                </div>
+                <div class="story-item">
+                    <div class="story-avatar" style="background: var(--pet-warning); display: flex; align-items: center; justify-content: center; color: white; font-size: 20px;">
+                        🛁
+                    </div>
+                    <div class="story-label">洗澡</div>
+                </div>
+                <div class="story-item">
+                    <div class="story-avatar" style="background: var(--pet-accent); display: flex; align-items: center; justify-content: center; color: white; font-size: 20px;">
+                        🎂
+                    </div>
+                    <div class="story-label">生日</div>
+                </div>
+                <div class="story-item">
+                    <div class="story-avatar" style="background: var(--pet-primary); display: flex; align-items: center; justify-content: center; color: white; font-size: 20px;">
+                        🏠
+                    </div>
+                    <div class="story-label">到家</div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 动态列表 -->
+        <div class="posts-feed">
+            <!-- 动态1 -->
+            <div class="post-item">
+                <div class="post-header">
+                    <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K" 
+                         alt="小橘" class="post-avatar">
+                    <div class="post-info">
+                        <div class="post-author">小橘的铲屎官</div>
+                        <div class="post-time">2小时前</div>
+                    </div>
+                </div>
+                <div class="post-content">
+                    <div class="post-text">
+                        今天给小橘测了体重，4.2kg啦！比上周又重了0.1kg，看来最近的营养很充足 😊 
+                        #体重记录 #健康成长
+                    </div>
+                    <div class="post-image">⚖️</div>
+                    <div class="post-actions">
+                        <button class="action-btn active">
+                            <span>❤️</span>
+                            <span>12</span>
+                        </button>
+                        <button class="action-btn">
+                            <span>💬</span>
+                            <span>3</span>
+                        </button>
+                        <button class="action-btn">
+                            <span>🔄</span>
+                            <span>分享</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 动态2 -->
+            <div class="post-item">
+                <div class="post-header">
+                    <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K" 
+                         alt="小橘" class="post-avatar">
+                    <div class="post-info">
+                        <div class="post-author">小橘的铲屎官</div>
+                        <div class="post-time">1天前</div>
+                    </div>
+                </div>
+                <div class="post-content">
+                    <div class="post-text">
+                        疫苗接种完成！小橘今天很勇敢，全程没有叫唤。医生说恢复得很好，下次接种是3月20号。
+                        #疫苗接种 #健康档案
+                    </div>
+                    <div class="post-image">💉</div>
+                    <div class="post-actions">
+                        <button class="action-btn">
+                            <span>❤️</span>
+                            <span>8</span>
+                        </button>
+                        <button class="action-btn">
+                            <span>💬</span>
+                            <span>1</span>
+                        </button>
+                        <button class="action-btn">
+                            <span>🔄</span>
+                            <span>分享</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 动态3 -->
+            <div class="post-item">
+                <div class="post-header">
+                    <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K" 
+                         alt="小橘" class="post-avatar">
+                    <div class="post-info">
+                        <div class="post-author">小橘的铲屎官</div>
+                        <div class="post-time">2天前</div>
+                    </div>
+                </div>
+                <div class="post-content">
+                    <div class="post-text">
+                        哈哈哈，小橘又搞破坏了！把我的拖鞋咬得稀烂，但是看它那得意的小表情，我竟然舍不得生气 😹
+                        #日常搞怪 #可爱瞬间
+                    </div>
+                    <div class="post-image">😸</div>
+                    <div class="post-actions">
+                        <button class="action-btn active">
+                            <span>❤️</span>
+                            <span>15</span>
+                        </button>
+                        <button class="action-btn">
+                            <span>💬</span>
+                            <span>5</span>
+                        </button>
+                        <button class="action-btn">
+                            <span>🔄</span>
+                            <span>分享</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 悬浮发布按钮 -->
+        <button class="floating-compose" onclick="interactions.handleButtonClick('addRecord')">
+            ✏️
+        </button>
+    </div>
+    
+    <script src="assets/js/common.js"></script>
+    <script>
+        // 社交媒体式特有交互
+        document.addEventListener('DOMContentLoaded', function() {
+            // 点赞动画
+            const likeButtons = document.querySelectorAll('.action-btn');
+            likeButtons.forEach(btn => {
+                btn.addEventListener('click', function() {
+                    if (this.textContent.includes('❤️')) {
+                        this.classList.toggle('active');
+                        
+                        // 简单的点赞动画
+                        this.style.transform = 'scale(1.2)';
+                        setTimeout(() => {
+                            this.style.transform = 'scale(1)';
+                        }, 200);
+                    }
+                });
+            });
+            
+            console.log('社交媒体式原型已加载');
+        });
+    </script>
+</body>
+</html>
diff --git a/prototypes/pet-detail/pet-detail-prototype-05.html b/prototypes/pet-detail/pet-detail-prototype-05.html
new file mode 100644
index 0000000..53d179c
--- /dev/null
+++ b/prototypes/pet-detail/pet-detail-prototype-05.html
@@ -0,0 +1,464 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>宠物详情 - 杂志式</title>
+    <link rel="stylesheet" href="assets/css/common.css">
+    <style>
+        /* 杂志式特有样式 */
+        .magazine-container {
+            background: #FAFAFA;
+        }
+        
+        .hero-section {
+            position: relative;
+            height: 300px;
+            background: linear-gradient(135deg, var(--pet-primary), var(--pet-accent));
+            overflow: hidden;
+        }
+        
+        .hero-background {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="3" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="80" r="1.5" fill="rgba(255,255,255,0.1)"/></svg>') repeat;
+            opacity: 0.3;
+        }
+        
+        .hero-content {
+            position: relative;
+            z-index: 2;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            color: white;
+            padding: var(--spacing-lg);
+        }
+        
+        .hero-avatar {
+            width: 120px;
+            height: 120px;
+            border-radius: var(--radius-round);
+            border: 4px solid rgba(255,255,255,0.8);
+            margin-bottom: var(--spacing-md);
+            box-shadow: 0 8px 32px rgba(0,0,0,0.2);
+        }
+        
+        .hero-title {
+            font-size: 28px;
+            font-weight: bold;
+            margin-bottom: var(--spacing-xs);
+            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+        }
+        
+        .hero-subtitle {
+            font-size: 16px;
+            opacity: 0.9;
+            margin-bottom: var(--spacing-sm);
+        }
+        
+        .hero-stats {
+            display: flex;
+            gap: var(--spacing-lg);
+            font-size: 14px;
+        }
+        
+        .hero-stat {
+            text-align: center;
+        }
+        
+        .hero-stat-number {
+            font-weight: bold;
+            font-size: 18px;
+        }
+        
+        .content-section {
+            background: white;
+            margin: var(--spacing-md);
+            border-radius: var(--radius-lg);
+            overflow: hidden;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+        }
+        
+        .section-header {
+            background: linear-gradient(90deg, var(--pet-secondary), var(--pet-accent));
+            color: white;
+            padding: var(--spacing-md);
+            font-weight: bold;
+            font-size: 16px;
+        }
+        
+        .section-content {
+            padding: var(--spacing-lg);
+        }
+        
+        .info-columns {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: var(--spacing-lg);
+        }
+        
+        .info-column {
+            display: flex;
+            flex-direction: column;
+            gap: var(--spacing-md);
+        }
+        
+        .info-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: var(--spacing-sm) 0;
+            border-bottom: 1px solid #F0F0F0;
+        }
+        
+        .info-label {
+            color: var(--text-secondary);
+            font-size: 14px;
+        }
+        
+        .info-value {
+            font-weight: bold;
+            color: var(--text-primary);
+        }
+        
+        .feature-article {
+            background: white;
+            margin: var(--spacing-md);
+            border-radius: var(--radius-lg);
+            overflow: hidden;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+        }
+        
+        .article-image {
+            height: 150px;
+            background: linear-gradient(45deg, var(--pet-warning), var(--pet-secondary));
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 48px;
+            color: white;
+        }
+        
+        .article-content {
+            padding: var(--spacing-lg);
+        }
+        
+        .article-title {
+            font-size: 18px;
+            font-weight: bold;
+            color: var(--text-primary);
+            margin-bottom: var(--spacing-sm);
+        }
+        
+        .article-excerpt {
+            color: var(--text-secondary);
+            line-height: 1.6;
+            margin-bottom: var(--spacing-md);
+        }
+        
+        .article-meta {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 12px;
+            color: var(--text-light);
+        }
+        
+        .read-more {
+            color: var(--pet-primary);
+            font-weight: bold;
+            text-decoration: none;
+        }
+        
+        .gallery-section {
+            background: white;
+            margin: var(--spacing-md);
+            border-radius: var(--radius-lg);
+            overflow: hidden;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+        }
+        
+        .gallery-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 2px;
+        }
+        
+        .gallery-item {
+            aspect-ratio: 1;
+            background: var(--pet-neutral);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 24px;
+            color: var(--text-light);
+            transition: all 0.3s ease;
+        }
+        
+        .gallery-item:hover {
+            transform: scale(1.05);
+            z-index: 2;
+        }
+        
+        .quote-section {
+            background: linear-gradient(135deg, #F8F9FA, #E9ECEF);
+            margin: var(--spacing-md);
+            padding: var(--spacing-lg);
+            border-radius: var(--radius-lg);
+            border-left: 4px solid var(--pet-primary);
+            position: relative;
+        }
+        
+        .quote-text {
+            font-size: 16px;
+            font-style: italic;
+            color: var(--text-primary);
+            line-height: 1.6;
+            margin-bottom: var(--spacing-sm);
+        }
+        
+        .quote-author {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-align: right;
+        }
+        
+        .quote-icon {
+            position: absolute;
+            top: var(--spacing-md);
+            right: var(--spacing-md);
+            font-size: 32px;
+            color: var(--pet-primary);
+            opacity: 0.3;
+        }
+        
+        .action-bar {
+            background: white;
+            padding: var(--spacing-md);
+            margin: var(--spacing-md);
+            border-radius: var(--radius-lg);
+            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+            display: flex;
+            gap: var(--spacing-sm);
+        }
+        
+        .action-btn-magazine {
+            flex: 1;
+            background: var(--pet-primary);
+            color: white;
+            border: none;
+            padding: var(--spacing-md);
+            border-radius: var(--radius-md);
+            font-weight: bold;
+            transition: all 0.3s ease;
+        }
+        
+        .action-btn-magazine:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+        }
+        
+        .action-btn-magazine.secondary {
+            background: var(--pet-accent);
+        }
+        
+        .action-btn-magazine.outline {
+            background: transparent;
+            color: var(--pet-primary);
+            border: 2px solid var(--pet-primary);
+        }
+        
+        .magazine-footer {
+            text-align: center;
+            padding: var(--spacing-xl);
+            color: var(--text-light);
+            font-size: 12px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container magazine-container">
+        <!-- 英雄区域 -->
+        <div class="hero-section">
+            <div class="hero-background"></div>
+            <div class="hero-content">
+                <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K" 
+                     alt="小橘" class="hero-avatar">
+                <h1 class="hero-title">小橘</h1>
+                <p class="hero-subtitle">我的温暖小太阳</p>
+                <div class="hero-stats">
+                    <div class="hero-stat">
+                        <div class="hero-stat-number">645</div>
+                        <div>陪伴天数</div>
+                    </div>
+                    <div class="hero-stat">
+                        <div class="hero-stat-number">127</div>
+                        <div>美好记录</div>
+                    </div>
+                    <div class="hero-stat">
+                        <div class="hero-stat-number">85</div>
+                        <div>健康评分</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 基本信息区域 -->
+        <div class="content-section">
+            <div class="section-header">
+                📋 基本档案
+            </div>
+            <div class="section-content">
+                <div class="info-columns">
+                    <div class="info-column">
+                        <div class="info-item">
+                            <span class="info-label">品种</span>
+                            <span class="info-value">橘猫</span>
+                        </div>
+                        <div class="info-item">
+                            <span class="info-label">性别</span>
+                            <span class="info-value">公</span>
+                        </div>
+                        <div class="info-item">
+                            <span class="info-label">年龄</span>
+                            <span class="info-value">2岁3个月</span>
+                        </div>
+                    </div>
+                    <div class="info-column">
+                        <div class="info-item">
+                            <span class="info-label">体重</span>
+                            <span class="info-value">4.2kg</span>
+                        </div>
+                        <div class="info-item">
+                            <span class="info-label">生日</span>
+                            <span class="info-value">2022-03-15</span>
+                        </div>
+                        <div class="info-item">
+                            <span class="info-label">到家日期</span>
+                            <span class="info-value">2022-04-20</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 特色文章 -->
+        <div class="feature-article">
+            <div class="article-image">📊</div>
+            <div class="article-content">
+                <h2 class="article-title">健康成长报告</h2>
+                <p class="article-excerpt">
+                    小橘这个月的健康状况非常好！体重稳定增长，食欲旺盛，活动量充足。
+                    疫苗接种按时完成，下次体检预约在3月20号。
+                </p>
+                <div class="article-meta">
+                    <span>健康评分: 85/100</span>
+                    <a href="#" class="read-more" onclick="interactions.handleButtonClick('healthChart')">查看详情 →</a>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 精彩瞬间画廊 -->
+        <div class="gallery-section">
+            <div class="section-header">
+                📸 精彩瞬间
+            </div>
+            <div class="gallery-grid">
+                <div class="gallery-item">😸</div>
+                <div class="gallery-item">🛁</div>
+                <div class="gallery-item">💉</div>
+                <div class="gallery-item">🍽️</div>
+                <div class="gallery-item">😴</div>
+                <div class="gallery-item">🎾</div>
+            </div>
+        </div>
+        
+        <!-- 引用区域 -->
+        <div class="quote-section">
+            <div class="quote-icon">"</div>
+            <div class="quote-text">
+                "小橘不仅仅是我的宠物，更是我生活中不可缺少的家人。
+                它的每一个小动作都能带给我无尽的快乐和温暖。"
+            </div>
+            <div class="quote-author">— 小橘的铲屎官</div>
+        </div>
+        
+        <!-- 最新动态 -->
+        <div class="content-section">
+            <div class="section-header">
+                🕒 最新动态
+            </div>
+            <div class="section-content">
+                <div style="display: flex; flex-direction: column; gap: var(--spacing-md);">
+                    <div style="padding: var(--spacing-sm); background: var(--pet-neutral); border-radius: var(--radius-md);">
+                        <div style="font-weight: bold; margin-bottom: var(--spacing-xs);">⚖️ 体重记录</div>
+                        <div style="font-size: 14px; color: var(--text-secondary);">今天4.2kg，健康成长中</div>
+                        <div style="font-size: 12px; color: var(--text-light); margin-top: var(--spacing-xs);">2小时前</div>
+                    </div>
+                    <div style="padding: var(--spacing-sm); background: var(--pet-neutral); border-radius: var(--radius-md);">
+                        <div style="font-weight: bold; margin-bottom: var(--spacing-xs);">💉 疫苗接种</div>
+                        <div style="font-size: 14px; color: var(--text-secondary);">狂犬疫苗第二针完成</div>
+                        <div style="font-size: 12px; color: var(--text-light); margin-top: var(--spacing-xs);">1天前</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 操作按钮 -->
+        <div class="action-bar">
+            <button class="action-btn-magazine" onclick="interactions.handleButtonClick('addRecord')">
+                📝 记录
+            </button>
+            <button class="action-btn-magazine secondary" onclick="interactions.handleButtonClick('aiChat')">
+                💬 聊天
+            </button>
+            <button class="action-btn-magazine outline" onclick="interactions.handleButtonClick('share')">
+                🔗 分享
+            </button>
+        </div>
+        
+        <!-- 页脚 -->
+        <div class="magazine-footer">
+            用爱记录每一个美好瞬间 ❤️
+        </div>
+    </div>
+    
+    <script src="assets/js/common.js"></script>
+    <script>
+        // 杂志式特有交互
+        document.addEventListener('DOMContentLoaded', function() {
+            // 视差滚动效果
+            window.addEventListener('scroll', function() {
+                const scrolled = window.pageYOffset;
+                const heroBackground = document.querySelector('.hero-background');
+                if (heroBackground) {
+                    heroBackground.style.transform = `translateY(${scrolled * 0.5}px)`;
+                }
+            });
+            
+            // 画廊项目悬停效果
+            const galleryItems = document.querySelectorAll('.gallery-item');
+            galleryItems.forEach(item => {
+                item.addEventListener('mouseenter', function() {
+                    this.style.background = 'var(--pet-primary)';
+                    this.style.color = 'white';
+                });
+                
+                item.addEventListener('mouseleave', function() {
+                    this.style.background = 'var(--pet-neutral)';
+                    this.style.color = 'var(--text-light)';
+                });
+            });
+            
+            console.log('杂志式原型已加载');
+        });
+    </script>
+</body>
+</html>
diff --git a/prototypes/pet-detail/pet-detail-prototype-06.html b/prototypes/pet-detail/pet-detail-prototype-06.html
new file mode 100644
index 0000000..c54dd06
--- /dev/null
+++ b/prototypes/pet-detail/pet-detail-prototype-06.html
@@ -0,0 +1,419 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>宠物详情 - 极简主义式</title>
+    <link rel="stylesheet" href="assets/css/common.css">
+    <style>
+        /* 极简主义式特有样式 */
+        .minimal-container {
+            background: #FFFFFF;
+            font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
+        }
+        
+        .minimal-header {
+            padding: var(--spacing-xl) var(--spacing-lg);
+            text-align: center;
+            border-bottom: 1px solid #F0F0F0;
+        }
+        
+        .minimal-avatar {
+            width: 100px;
+            height: 100px;
+            border-radius: var(--radius-round);
+            margin: 0 auto var(--spacing-lg);
+            display: block;
+            border: 1px solid #E0E0E0;
+        }
+        
+        .minimal-name {
+            font-size: 32px;
+            font-weight: 300;
+            color: #1A1A1A;
+            margin-bottom: var(--spacing-sm);
+            letter-spacing: -0.5px;
+        }
+        
+        .minimal-subtitle {
+            font-size: 16px;
+            color: #666666;
+            font-weight: 400;
+            margin-bottom: var(--spacing-lg);
+        }
+        
+        .minimal-stats {
+            display: flex;
+            justify-content: center;
+            gap: var(--spacing-xl);
+        }
+        
+        .minimal-stat {
+            text-align: center;
+        }
+        
+        .minimal-stat-number {
+            font-size: 24px;
+            font-weight: 600;
+            color: #1A1A1A;
+            margin-bottom: var(--spacing-xs);
+        }
+        
+        .minimal-stat-label {
+            font-size: 12px;
+            color: #999999;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        
+        .minimal-section {
+            padding: var(--spacing-xl) var(--spacing-lg);
+            border-bottom: 1px solid #F8F8F8;
+        }
+        
+        .minimal-section:last-child {
+            border-bottom: none;
+        }
+        
+        .section-title {
+            font-size: 14px;
+            color: #999999;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            margin-bottom: var(--spacing-lg);
+            font-weight: 500;
+        }
+        
+        .info-list {
+            display: flex;
+            flex-direction: column;
+            gap: var(--spacing-lg);
+        }
+        
+        .info-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .info-label {
+            font-size: 16px;
+            color: #1A1A1A;
+            font-weight: 400;
+        }
+        
+        .info-value {
+            font-size: 16px;
+            color: #666666;
+            font-weight: 300;
+        }
+        
+        .minimal-actions {
+            padding: var(--spacing-xl) var(--spacing-lg);
+            display: flex;
+            flex-direction: column;
+            gap: var(--spacing-md);
+        }
+        
+        .minimal-btn {
+            background: #1A1A1A;
+            color: white;
+            border: none;
+            padding: var(--spacing-md) var(--spacing-lg);
+            border-radius: 0;
+            font-size: 14px;
+            font-weight: 500;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            transition: all 0.3s ease;
+            cursor: pointer;
+        }
+        
+        .minimal-btn:hover {
+            background: #333333;
+        }
+        
+        .minimal-btn.secondary {
+            background: transparent;
+            color: #1A1A1A;
+            border: 1px solid #E0E0E0;
+        }
+        
+        .minimal-btn.secondary:hover {
+            background: #F8F8F8;
+        }
+        
+        .recent-activity {
+            padding: var(--spacing-xl) var(--spacing-lg);
+        }
+        
+        .activity-list {
+            display: flex;
+            flex-direction: column;
+            gap: var(--spacing-lg);
+        }
+        
+        .activity-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            padding: var(--spacing-md) 0;
+            border-bottom: 1px solid #F8F8F8;
+        }
+        
+        .activity-item:last-child {
+            border-bottom: none;
+        }
+        
+        .activity-content {
+            flex: 1;
+        }
+        
+        .activity-title {
+            font-size: 16px;
+            color: #1A1A1A;
+            font-weight: 400;
+            margin-bottom: var(--spacing-xs);
+        }
+        
+        .activity-description {
+            font-size: 14px;
+            color: #666666;
+            line-height: 1.5;
+        }
+        
+        .activity-time {
+            font-size: 12px;
+            color: #999999;
+            white-space: nowrap;
+            margin-left: var(--spacing-md);
+        }
+        
+        .health-indicator {
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: var(--radius-round);
+            background: #4CAF50;
+            margin-left: var(--spacing-sm);
+        }
+        
+        .health-indicator.warning {
+            background: #FF9800;
+        }
+        
+        .health-indicator.danger {
+            background: #F44336;
+        }
+        
+        .minimal-divider {
+            height: 1px;
+            background: #F0F0F0;
+            margin: var(--spacing-xl) 0;
+        }
+        
+        .floating-edit {
+            position: fixed;
+            bottom: 30px;
+            right: 30px;
+            width: 50px;
+            height: 50px;
+            border-radius: var(--radius-round);
+            background: #1A1A1A;
+            color: white;
+            border: none;
+            font-size: 18px;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+            transition: all 0.3s ease;
+        }
+        
+        .floating-edit:hover {
+            transform: scale(1.1);
+            box-shadow: 0 6px 25px rgba(0,0,0,0.2);
+        }
+        
+        /* 极简动画 */
+        .fade-in-up {
+            animation: fadeInUp 0.6s ease forwards;
+            opacity: 0;
+            transform: translateY(20px);
+        }
+        
+        @keyframes fadeInUp {
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        
+        .minimal-section:nth-child(1) { animation-delay: 0.1s; }
+        .minimal-section:nth-child(2) { animation-delay: 0.2s; }
+        .minimal-section:nth-child(3) { animation-delay: 0.3s; }
+        .minimal-section:nth-child(4) { animation-delay: 0.4s; }
+    </style>
+</head>
+<body>
+    <div class="container minimal-container">
+        <!-- 极简头部 -->
+        <div class="minimal-header fade-in-up">
+            <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K" 
+                 alt="小橘" class="minimal-avatar">
+            <h1 class="minimal-name">小橘</h1>
+            <p class="minimal-subtitle">橘猫 · 公 · 2岁3个月</p>
+            
+            <div class="minimal-stats">
+                <div class="minimal-stat">
+                    <div class="minimal-stat-number">645</div>
+                    <div class="minimal-stat-label">Days</div>
+                </div>
+                <div class="minimal-stat">
+                    <div class="minimal-stat-number">4.2</div>
+                    <div class="minimal-stat-label">Weight</div>
+                </div>
+                <div class="minimal-stat">
+                    <div class="minimal-stat-number">85</div>
+                    <div class="minimal-stat-label">Health</div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 基本信息 -->
+        <div class="minimal-section fade-in-up">
+            <h2 class="section-title">基本信息</h2>
+            <div class="info-list">
+                <div class="info-row">
+                    <span class="info-label">品种</span>
+                    <span class="info-value">橘猫</span>
+                </div>
+                <div class="info-row">
+                    <span class="info-label">性别</span>
+                    <span class="info-value">公</span>
+                </div>
+                <div class="info-row">
+                    <span class="info-label">生日</span>
+                    <span class="info-value">2022-03-15</span>
+                </div>
+                <div class="info-row">
+                    <span class="info-label">到家日期</span>
+                    <span class="info-value">2022-04-20</span>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 健康状态 -->
+        <div class="minimal-section fade-in-up">
+            <h2 class="section-title">健康状态</h2>
+            <div class="info-list">
+                <div class="info-row">
+                    <span class="info-label">体重</span>
+                    <span class="info-value">4.2kg <span class="health-indicator"></span></span>
+                </div>
+                <div class="info-row">
+                    <span class="info-label">疫苗</span>
+                    <span class="info-value">已完成 <span class="health-indicator"></span></span>
+                </div>
+                <div class="info-row">
+                    <span class="info-label">驱虫</span>
+                    <span class="info-value">需要更新 <span class="health-indicator warning"></span></span>
+                </div>
+                <div class="info-row">
+                    <span class="info-label">上次体检</span>
+                    <span class="info-value">2024-01-15</span>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 最近活动 -->
+        <div class="minimal-section fade-in-up">
+            <h2 class="section-title">最近活动</h2>
+            <div class="activity-list">
+                <div class="activity-item">
+                    <div class="activity-content">
+                        <div class="activity-title">体重记录</div>
+                        <div class="activity-description">今天体重4.2kg，比上周增加了0.1kg</div>
+                    </div>
+                    <div class="activity-time">2小时前</div>
+                </div>
+                
+                <div class="activity-item">
+                    <div class="activity-content">
+                        <div class="activity-title">疫苗接种</div>
+                        <div class="activity-description">完成了狂犬疫苗第二针接种</div>
+                    </div>
+                    <div class="activity-time">1天前</div>
+                </div>
+                
+                <div class="activity-item">
+                    <div class="activity-content">
+                        <div class="activity-title">日常护理</div>
+                        <div class="activity-description">给小橘洗了澡，全程很乖没有挣扎</div>
+                    </div>
+                    <div class="activity-time">3天前</div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 操作按钮 -->
+        <div class="minimal-actions fade-in-up">
+            <button class="minimal-btn" onclick="interactions.handleButtonClick('addRecord')">
+                添加记录
+            </button>
+            <button class="minimal-btn secondary" onclick="interactions.handleButtonClick('aiChat')">
+                AI 助手
+            </button>
+            <button class="minimal-btn secondary" onclick="interactions.handleButtonClick('healthChart')">
+                健康报告
+            </button>
+        </div>
+        
+        <!-- 悬浮编辑按钮 -->
+        <button class="floating-edit" onclick="interactions.handleButtonClick('edit')">
+            ✎
+        </button>
+    </div>
+    
+    <script src="assets/js/common.js"></script>
+    <script>
+        // 极简主义式特有交互
+        document.addEventListener('DOMContentLoaded', function() {
+            // 延迟加载动画
+            const elements = document.querySelectorAll('.fade-in-up');
+            elements.forEach((el, index) => {
+                setTimeout(() => {
+                    el.style.animationDelay = `${index * 0.1}s`;
+                    el.classList.add('fade-in-up');
+                }, 100);
+            });
+            
+            // 简单的滚动效果
+            let ticking = false;
+            
+            function updateScrollEffect() {
+                const scrolled = window.pageYOffset;
+                const header = document.querySelector('.minimal-header');
+                
+                if (scrolled > 50) {
+                    header.style.transform = `translateY(${-scrolled * 0.1}px)`;
+                    header.style.opacity = Math.max(0.3, 1 - scrolled / 300);
+                } else {
+                    header.style.transform = 'translateY(0)';
+                    header.style.opacity = '1';
+                }
+                
+                ticking = false;
+            }
+            
+            function requestScrollUpdate() {
+                if (!ticking) {
+                    requestAnimationFrame(updateScrollEffect);
+                    ticking = true;
+                }
+            }
+            
+            window.addEventListener('scroll', requestScrollUpdate);
+            
+            console.log('极简主义式原型已加载');
+        });
+    </script>
+</body>
+</html>
diff --git a/prototypes/pet-detail/pet-detail-prototype-07.html b/prototypes/pet-detail/pet-detail-prototype-07.html
new file mode 100644
index 0000000..efea11f
--- /dev/null
+++ b/prototypes/pet-detail/pet-detail-prototype-07.html
@@ -0,0 +1,506 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>宠物详情 - 游戏化式</title>
+    <link rel="stylesheet" href="assets/css/common.css">
+    <style>
+        /* 游戏化式特有样式 */
+        .game-container {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .game-background {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="1.5" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="80" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="60" cy="60" r="0.5" fill="rgba(255,255,255,0.1)"/></svg>') repeat;
+            animation: twinkle 3s infinite;
+        }
+        
+        @keyframes twinkle {
+            0%, 100% { opacity: 0.3; }
+            50% { opacity: 0.8; }
+        }
+        
+        .game-header {
+            position: relative;
+            z-index: 2;
+            padding: var(--spacing-lg);
+            text-align: center;
+            color: white;
+        }
+        
+        .level-badge {
+            display: inline-block;
+            background: linear-gradient(45deg, #FFD700, #FFA500);
+            color: #333;
+            padding: var(--spacing-xs) var(--spacing-md);
+            border-radius: 20px;
+            font-size: 12px;
+            font-weight: bold;
+            margin-bottom: var(--spacing-md);
+            box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
+        }
+        
+        .pet-avatar-game {
+            width: 100px;
+            height: 100px;
+            border-radius: var(--radius-round);
+            border: 4px solid #FFD700;
+            margin: 0 auto var(--spacing-md);
+            box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
+            animation: glow 2s ease-in-out infinite alternate;
+        }
+        
+        @keyframes glow {
+            from { box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); }
+            to { box-shadow: 0 0 30px rgba(255, 215, 0, 0.8); }
+        }
+        
+        .pet-name-game {
+            font-size: 24px;
+            font-weight: bold;
+            margin-bottom: var(--spacing-sm);
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+        }
+        
+        .pet-title {
+            font-size: 14px;
+            opacity: 0.9;
+            margin-bottom: var(--spacing-lg);
+        }
+        
+        .exp-bar-container {
+            background: rgba(255,255,255,0.2);
+            border-radius: 20px;
+            padding: 4px;
+            margin: var(--spacing-md) 0;
+        }
+        
+        .exp-bar {
+            background: linear-gradient(90deg, #4CAF50, #8BC34A);
+            height: 20px;
+            border-radius: 16px;
+            width: 75%;
+            position: relative;
+            transition: width 1s ease;
+        }
+        
+        .exp-text {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 12px;
+            font-weight: bold;
+            color: white;
+            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
+        }
+        
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: var(--spacing-md);
+            padding: var(--spacing-md);
+        }
+        
+        .stat-card {
+            background: rgba(255,255,255,0.95);
+            border-radius: var(--radius-lg);
+            padding: var(--spacing-md);
+            text-align: center;
+            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
+            transition: transform 0.3s ease;
+        }
+        
+        .stat-card:hover {
+            transform: translateY(-5px);
+        }
+        
+        .stat-icon {
+            font-size: 32px;
+            margin-bottom: var(--spacing-sm);
+        }
+        
+        .stat-value {
+            font-size: 20px;
+            font-weight: bold;
+            color: var(--text-primary);
+            margin-bottom: var(--spacing-xs);
+        }
+        
+        .stat-label {
+            font-size: 12px;
+            color: var(--text-secondary);
+        }
+        
+        .achievements-section {
+            background: rgba(255,255,255,0.95);
+            margin: var(--spacing-md);
+            border-radius: var(--radius-lg);
+            padding: var(--spacing-lg);
+            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
+        }
+        
+        .achievements-title {
+            font-size: 18px;
+            font-weight: bold;
+            color: var(--text-primary);
+            margin-bottom: var(--spacing-md);
+            text-align: center;
+        }
+        
+        .achievements-grid {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: var(--spacing-md);
+        }
+        
+        .achievement-item {
+            text-align: center;
+            padding: var(--spacing-sm);
+            border-radius: var(--radius-md);
+            transition: all 0.3s ease;
+        }
+        
+        .achievement-item.unlocked {
+            background: linear-gradient(135deg, #FFD700, #FFA500);
+            color: white;
+            box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
+        }
+        
+        .achievement-item.locked {
+            background: #F0F0F0;
+            color: #999;
+        }
+        
+        .achievement-icon {
+            font-size: 24px;
+            margin-bottom: var(--spacing-xs);
+        }
+        
+        .achievement-name {
+            font-size: 10px;
+            font-weight: bold;
+        }
+        
+        .daily-tasks {
+            background: rgba(255,255,255,0.95);
+            margin: var(--spacing-md);
+            border-radius: var(--radius-lg);
+            padding: var(--spacing-lg);
+            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
+        }
+        
+        .tasks-title {
+            font-size: 18px;
+            font-weight: bold;
+            color: var(--text-primary);
+            margin-bottom: var(--spacing-md);
+            text-align: center;
+        }
+        
+        .task-item {
+            display: flex;
+            align-items: center;
+            padding: var(--spacing-md);
+            background: #F8F9FA;
+            border-radius: var(--radius-md);
+            margin-bottom: var(--spacing-sm);
+            transition: all 0.3s ease;
+        }
+        
+        .task-item.completed {
+            background: linear-gradient(135deg, #4CAF50, #8BC34A);
+            color: white;
+        }
+        
+        .task-checkbox {
+            width: 20px;
+            height: 20px;
+            border-radius: var(--radius-round);
+            border: 2px solid #ddd;
+            margin-right: var(--spacing-md);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+        }
+        
+        .task-item.completed .task-checkbox {
+            background: white;
+            color: #4CAF50;
+            border-color: white;
+        }
+        
+        .task-content {
+            flex: 1;
+        }
+        
+        .task-name {
+            font-weight: bold;
+            margin-bottom: var(--spacing-xs);
+        }
+        
+        .task-reward {
+            font-size: 12px;
+            opacity: 0.8;
+        }
+        
+        .task-points {
+            background: #FFD700;
+            color: #333;
+            padding: 2px 8px;
+            border-radius: 12px;
+            font-size: 12px;
+            font-weight: bold;
+        }
+        
+        .game-actions {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: var(--spacing-md);
+            padding: var(--spacing-md);
+        }
+        
+        .game-btn {
+            background: linear-gradient(135deg, var(--pet-primary), #FF6B6B);
+            color: white;
+            border: none;
+            padding: var(--spacing-md);
+            border-radius: var(--radius-lg);
+            font-weight: bold;
+            font-size: 14px;
+            box-shadow: 0 4px 15px rgba(255, 138, 128, 0.3);
+            transition: all 0.3s ease;
+        }
+        
+        .game-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(255, 138, 128, 0.4);
+        }
+        
+        .game-btn.secondary {
+            background: linear-gradient(135deg, var(--pet-accent), #4FC3F7);
+            box-shadow: 0 4px 15px rgba(100, 181, 246, 0.3);
+        }
+        
+        .floating-coins {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background: linear-gradient(135deg, #FFD700, #FFA500);
+            color: #333;
+            padding: var(--spacing-sm) var(--spacing-md);
+            border-radius: 20px;
+            font-weight: bold;
+            box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
+            z-index: 100;
+        }
+    </style>
+</head>
+<body>
+    <div class="container game-container">
+        <div class="game-background"></div>
+        
+        <!-- 游戏头部 -->
+        <div class="game-header">
+            <div class="level-badge">🏆 Lv.15 宠物大师</div>
+            <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K" 
+                 alt="小橘" class="pet-avatar-game">
+            <h1 class="pet-name-game">小橘</h1>
+            <p class="pet-title">传奇橘猫战士</p>
+            
+            <div class="exp-bar-container">
+                <div class="exp-bar">
+                    <div class="exp-text">EXP: 1250/1500</div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 属性面板 -->
+        <div class="stats-grid">
+            <div class="stat-card">
+                <div class="stat-icon">❤️</div>
+                <div class="stat-value">85</div>
+                <div class="stat-label">健康值</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-icon">😊</div>
+                <div class="stat-value">92</div>
+                <div class="stat-label">快乐值</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-icon">🍽️</div>
+                <div class="stat-value">78</div>
+                <div class="stat-label">饱食度</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-icon">🏃</div>
+                <div class="stat-value">65</div>
+                <div class="stat-label">活力值</div>
+            </div>
+        </div>
+        
+        <!-- 成就系统 -->
+        <div class="achievements-section">
+            <h2 class="achievements-title">🏆 成就收集</h2>
+            <div class="achievements-grid">
+                <div class="achievement-item unlocked">
+                    <div class="achievement-icon">🥇</div>
+                    <div class="achievement-name">初次见面</div>
+                </div>
+                <div class="achievement-item unlocked">
+                    <div class="achievement-icon">💉</div>
+                    <div class="achievement-name">疫苗勇士</div>
+                </div>
+                <div class="achievement-item unlocked">
+                    <div class="achievement-icon">🛁</div>
+                    <div class="achievement-name">洗澡达人</div>
+                </div>
+                <div class="achievement-item locked">
+                    <div class="achievement-icon">🎂</div>
+                    <div class="achievement-name">生日快乐</div>
+                </div>
+                <div class="achievement-item unlocked">
+                    <div class="achievement-icon">⚖️</div>
+                    <div class="achievement-name">体重管家</div>
+                </div>
+                <div class="achievement-item locked">
+                    <div class="achievement-icon">🏠</div>
+                    <div class="achievement-name">一周年</div>
+                </div>
+                <div class="achievement-item unlocked">
+                    <div class="achievement-icon">😸</div>
+                    <div class="achievement-name">搞怪专家</div>
+                </div>
+                <div class="achievement-item locked">
+                    <div class="achievement-icon">👑</div>
+                    <div class="achievement-name">宠物之王</div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 每日任务 -->
+        <div class="daily-tasks">
+            <h2 class="tasks-title">📋 每日任务</h2>
+            
+            <div class="task-item completed">
+                <div class="task-checkbox">✓</div>
+                <div class="task-content">
+                    <div class="task-name">记录体重</div>
+                    <div class="task-reward">奖励: 经验值 +50</div>
+                </div>
+                <div class="task-points">+50 EXP</div>
+            </div>
+            
+            <div class="task-item">
+                <div class="task-checkbox"></div>
+                <div class="task-content">
+                    <div class="task-name">添加一条记录</div>
+                    <div class="task-reward">奖励: 金币 +100</div>
+                </div>
+                <div class="task-points">+100 💰</div>
+            </div>
+            
+            <div class="task-item">
+                <div class="task-checkbox"></div>
+                <div class="task-content">
+                    <div class="task-name">与AI助手聊天</div>
+                    <div class="task-reward">奖励: 经验值 +30</div>
+                </div>
+                <div class="task-points">+30 EXP</div>
+            </div>
+            
+            <div class="task-item">
+                <div class="task-checkbox"></div>
+                <div class="task-content">
+                    <div class="task-name">查看健康报告</div>
+                    <div class="task-reward">奖励: 金币 +50</div>
+                </div>
+                <div class="task-points">+50 💰</div>
+            </div>
+        </div>
+        
+        <!-- 游戏操作 -->
+        <div class="game-actions">
+            <button class="game-btn" onclick="interactions.handleButtonClick('addRecord')">
+                📝 记录冒险
+            </button>
+            <button class="game-btn secondary" onclick="interactions.handleButtonClick('aiChat')">
+                💬 召唤助手
+            </button>
+            <button class="game-btn" onclick="interactions.handleButtonClick('healthChart')">
+                📊 查看属性
+            </button>
+            <button class="game-btn secondary" onclick="interactions.handleButtonClick('timeline')">
+                ⏰ 冒险日志
+            </button>
+        </div>
+        
+        <!-- 悬浮金币显示 -->
+        <div class="floating-coins">
+            💰 2,450
+        </div>
+    </div>
+    
+    <script src="assets/js/common.js"></script>
+    <script>
+        // 游戏化式特有交互
+        document.addEventListener('DOMContentLoaded', function() {
+            // 经验条动画
+            setTimeout(() => {
+                const expBar = document.querySelector('.exp-bar');
+                expBar.style.width = '83%'; // 1250/1500
+            }, 1000);
+            
+            // 任务点击交互
+            const taskItems = document.querySelectorAll('.task-item:not(.completed)');
+            taskItems.forEach(task => {
+                task.addEventListener('click', function() {
+                    this.classList.add('completed');
+                    const checkbox = this.querySelector('.task-checkbox');
+                    checkbox.textContent = '✓';
+                    
+                    // 金币动画
+                    const coins = document.querySelector('.floating-coins');
+                    const currentCoins = parseInt(coins.textContent.replace(/[^\d]/g, ''));
+                    const newCoins = currentCoins + 50;
+                    coins.textContent = `💰 ${newCoins.toLocaleString()}`;
+                    
+                    // 简单的奖励动画
+                    coins.style.transform = 'scale(1.2)';
+                    setTimeout(() => {
+                        coins.style.transform = 'scale(1)';
+                    }, 300);
+                    
+                    interactions.showToast('任务完成！获得奖励！', 'success');
+                });
+            });
+            
+            // 成就悬停效果
+            const achievements = document.querySelectorAll('.achievement-item');
+            achievements.forEach(achievement => {
+                achievement.addEventListener('mouseenter', function() {
+                    if (this.classList.contains('unlocked')) {
+                        this.style.transform = 'scale(1.1)';
+                    }
+                });
+                
+                achievement.addEventListener('mouseleave', function() {
+                    this.style.transform = 'scale(1)';
+                });
+            });
+            
+            console.log('游戏化式原型已加载');
+        });
+    </script>
+</body>
+</html>
diff --git a/prototypes/pet-detail/pet-detail-prototype-08.html b/prototypes/pet-detail/pet-detail-prototype-08.html
new file mode 100644
index 0000000..f1f8e0b
--- /dev/null
+++ b/prototypes/pet-detail/pet-detail-prototype-08.html
@@ -0,0 +1,551 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>宠物详情 - 专业医疗式</title>
+    <link rel="stylesheet" href="assets/css/common.css">
+    <style>
+        /* 专业医疗式特有样式 */
+        .medical-container {
+            background: #F8F9FA;
+            font-family: 'Helvetica Neue', Arial, sans-serif;
+        }
+        
+        .medical-header {
+            background: #2C5282;
+            color: white;
+            padding: var(--spacing-lg);
+            position: relative;
+        }
+        
+        .header-top {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: var(--spacing-md);
+        }
+        
+        .patient-id {
+            font-size: 12px;
+            opacity: 0.8;
+        }
+        
+        .emergency-btn {
+            background: #E53E3E;
+            color: white;
+            border: none;
+            padding: var(--spacing-xs) var(--spacing-sm);
+            border-radius: var(--radius-sm);
+            font-size: 12px;
+            font-weight: bold;
+        }
+        
+        .patient-info {
+            display: flex;
+            gap: var(--spacing-md);
+            align-items: center;
+        }
+        
+        .patient-avatar {
+            width: 80px;
+            height: 80px;
+            border-radius: var(--radius-md);
+            border: 2px solid rgba(255,255,255,0.3);
+        }
+        
+        .patient-details h1 {
+            font-size: 24px;
+            font-weight: bold;
+            margin-bottom: var(--spacing-xs);
+        }
+        
+        .patient-meta {
+            font-size: 14px;
+            opacity: 0.9;
+            line-height: 1.4;
+        }
+        
+        .medical-tabs {
+            background: white;
+            border-bottom: 1px solid #E2E8F0;
+            display: flex;
+            overflow-x: auto;
+        }
+        
+        .tab-item {
+            padding: var(--spacing-md) var(--spacing-lg);
+            border-bottom: 3px solid transparent;
+            font-weight: 500;
+            color: #4A5568;
+            white-space: nowrap;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        
+        .tab-item.active {
+            color: #2C5282;
+            border-bottom-color: #2C5282;
+            background: #F7FAFC;
+        }
+        
+        .medical-section {
+            background: white;
+            margin: var(--spacing-md);
+            border-radius: var(--radius-md);
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+            overflow: hidden;
+        }
+        
+        .section-header {
+            background: #EDF2F7;
+            padding: var(--spacing-md);
+            border-bottom: 1px solid #E2E8F0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .section-title {
+            font-weight: bold;
+            color: #2D3748;
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-sm);
+        }
+        
+        .section-action {
+            background: #2C5282;
+            color: white;
+            border: none;
+            padding: var(--spacing-xs) var(--spacing-sm);
+            border-radius: var(--radius-sm);
+            font-size: 12px;
+        }
+        
+        .vital-signs {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: var(--spacing-md);
+            padding: var(--spacing-md);
+        }
+        
+        .vital-item {
+            text-align: center;
+            padding: var(--spacing-md);
+            background: #F7FAFC;
+            border-radius: var(--radius-md);
+            border: 1px solid #E2E8F0;
+        }
+        
+        .vital-value {
+            font-size: 24px;
+            font-weight: bold;
+            color: #2D3748;
+            margin-bottom: var(--spacing-xs);
+        }
+        
+        .vital-label {
+            font-size: 12px;
+            color: #718096;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        
+        .vital-status {
+            font-size: 10px;
+            padding: 2px 6px;
+            border-radius: 10px;
+            margin-top: var(--spacing-xs);
+            font-weight: bold;
+        }
+        
+        .status-normal {
+            background: #C6F6D5;
+            color: #22543D;
+        }
+        
+        .status-warning {
+            background: #FEFCBF;
+            color: #744210;
+        }
+        
+        .status-critical {
+            background: #FED7D7;
+            color: #742A2A;
+        }
+        
+        .medical-table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+        
+        .medical-table th {
+            background: #EDF2F7;
+            padding: var(--spacing-sm);
+            text-align: left;
+            font-weight: bold;
+            color: #2D3748;
+            font-size: 12px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        
+        .medical-table td {
+            padding: var(--spacing-sm);
+            border-bottom: 1px solid #E2E8F0;
+            font-size: 14px;
+            color: #4A5568;
+        }
+        
+        .medical-table tr:hover {
+            background: #F7FAFC;
+        }
+        
+        .treatment-item {
+            padding: var(--spacing-md);
+            border-bottom: 1px solid #E2E8F0;
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+        }
+        
+        .treatment-item:last-child {
+            border-bottom: none;
+        }
+        
+        .treatment-info {
+            flex: 1;
+        }
+        
+        .treatment-name {
+            font-weight: bold;
+            color: #2D3748;
+            margin-bottom: var(--spacing-xs);
+        }
+        
+        .treatment-details {
+            font-size: 14px;
+            color: #718096;
+            line-height: 1.4;
+        }
+        
+        .treatment-date {
+            font-size: 12px;
+            color: #A0AEC0;
+            white-space: nowrap;
+            margin-left: var(--spacing-md);
+        }
+        
+        .alert-box {
+            background: #FED7D7;
+            border: 1px solid #FEB2B2;
+            border-radius: var(--radius-md);
+            padding: var(--spacing-md);
+            margin: var(--spacing-md);
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-sm);
+        }
+        
+        .alert-icon {
+            font-size: 20px;
+            color: #E53E3E;
+        }
+        
+        .alert-content {
+            flex: 1;
+        }
+        
+        .alert-title {
+            font-weight: bold;
+            color: #742A2A;
+            margin-bottom: var(--spacing-xs);
+        }
+        
+        .alert-message {
+            font-size: 14px;
+            color: #742A2A;
+        }
+        
+        .medical-actions {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: var(--spacing-sm);
+            padding: var(--spacing-md);
+            background: #F7FAFC;
+        }
+        
+        .medical-btn {
+            background: #2C5282;
+            color: white;
+            border: none;
+            padding: var(--spacing-md);
+            border-radius: var(--radius-md);
+            font-weight: bold;
+            font-size: 14px;
+            transition: all 0.3s ease;
+        }
+        
+        .medical-btn:hover {
+            background: #2A4365;
+        }
+        
+        .medical-btn.secondary {
+            background: #4A5568;
+        }
+        
+        .medical-btn.emergency {
+            background: #E53E3E;
+        }
+        
+        .chart-placeholder {
+            height: 120px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-radius: var(--radius-md);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-weight: bold;
+            margin: var(--spacing-md);
+        }
+    </style>
+</head>
+<body>
+    <div class="container medical-container">
+        <!-- 医疗头部 -->
+        <div class="medical-header">
+            <div class="header-top">
+                <div class="patient-id">患者编号: PET-2024-001</div>
+                <button class="emergency-btn">🚨 紧急联系</button>
+            </div>
+            
+            <div class="patient-info">
+                <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K" 
+                     alt="小橘" class="patient-avatar">
+                <div class="patient-details">
+                    <h1>小橘</h1>
+                    <div class="patient-meta">
+                        品种: 橘猫 (Felis catus)<br>
+                        性别: 雄性 (已绝育)<br>
+                        年龄: 2岁3个月 | 体重: 4.2kg<br>
+                        主治医师: 张医生 | 建档日期: 2022-04-20
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 医疗标签页 -->
+        <div class="medical-tabs">
+            <div class="tab-item active">概览</div>
+            <div class="tab-item">生命体征</div>
+            <div class="tab-item">治疗记录</div>
+            <div class="tab-item">检查报告</div>
+            <div class="tab-item">用药记录</div>
+        </div>
+        
+        <!-- 重要提醒 -->
+        <div class="alert-box">
+            <div class="alert-icon">⚠️</div>
+            <div class="alert-content">
+                <div class="alert-title">驱虫提醒</div>
+                <div class="alert-message">距离上次驱虫已超过3个月，建议尽快安排驱虫治疗</div>
+            </div>
+        </div>
+        
+        <!-- 生命体征 -->
+        <div class="medical-section">
+            <div class="section-header">
+                <div class="section-title">
+                    <span>📊</span>
+                    <span>生命体征监测</span>
+                </div>
+                <button class="section-action">更新数据</button>
+            </div>
+            
+            <div class="vital-signs">
+                <div class="vital-item">
+                    <div class="vital-value">4.2</div>
+                    <div class="vital-label">体重 (kg)</div>
+                    <div class="vital-status status-normal">正常</div>
+                </div>
+                <div class="vital-item">
+                    <div class="vital-value">38.5</div>
+                    <div class="vital-label">体温 (°C)</div>
+                    <div class="vital-status status-normal">正常</div>
+                </div>
+                <div class="vital-item">
+                    <div class="vital-value">85</div>
+                    <div class="vital-label">健康评分</div>
+                    <div class="vital-status status-normal">良好</div>
+                </div>
+                <div class="vital-item">
+                    <div class="vital-value">120</div>
+                    <div class="vital-label">心率 (bpm)</div>
+                    <div class="vital-status status-warning">偏高</div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 体重趋势图 -->
+        <div class="chart-placeholder">
+            📈 体重趋势图 (近30天)
+        </div>
+        
+        <!-- 疫苗记录 -->
+        <div class="medical-section">
+            <div class="section-header">
+                <div class="section-title">
+                    <span>💉</span>
+                    <span>疫苗接种记录</span>
+                </div>
+                <button class="section-action">添加记录</button>
+            </div>
+            
+            <table class="medical-table">
+                <thead>
+                    <tr>
+                        <th>疫苗类型</th>
+                        <th>接种日期</th>
+                        <th>有效期</th>
+                        <th>状态</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>狂犬疫苗</td>
+                        <td>2024-01-18</td>
+                        <td>2025-01-18</td>
+                        <td><span class="vital-status status-normal">有效</span></td>
+                    </tr>
+                    <tr>
+                        <td>猫三联疫苗</td>
+                        <td>2023-12-15</td>
+                        <td>2024-12-15</td>
+                        <td><span class="vital-status status-normal">有效</span></td>
+                    </tr>
+                    <tr>
+                        <td>猫瘟疫苗</td>
+                        <td>2023-11-20</td>
+                        <td>2024-11-20</td>
+                        <td><span class="vital-status status-warning">即将到期</span></td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        
+        <!-- 治疗记录 -->
+        <div class="medical-section">
+            <div class="section-header">
+                <div class="section-title">
+                    <span>🏥</span>
+                    <span>最近治疗记录</span>
+                </div>
+                <button class="section-action">查看全部</button>
+            </div>
+            
+            <div class="treatment-item">
+                <div class="treatment-info">
+                    <div class="treatment-name">狂犬疫苗接种</div>
+                    <div class="treatment-details">
+                        接种狂犬疫苗第二针，患者配合良好，无不良反应。
+                        建议观察24小时，如有异常及时联系。
+                    </div>
+                </div>
+                <div class="treatment-date">2024-01-18</div>
+            </div>
+            
+            <div class="treatment-item">
+                <div class="treatment-info">
+                    <div class="treatment-name">常规体检</div>
+                    <div class="treatment-details">
+                        全面体检，各项指标正常。体重增长良好，
+                        建议继续保持现有饮食和运动习惯。
+                    </div>
+                </div>
+                <div class="treatment-date">2024-01-15</div>
+            </div>
+            
+            <div class="treatment-item">
+                <div class="treatment-info">
+                    <div class="treatment-name">驱虫治疗</div>
+                    <div class="treatment-details">
+                        体内外驱虫，使用拜耳驱虫药。
+                        下次驱虫时间建议3个月后。
+                    </div>
+                </div>
+                <div class="treatment-date">2023-10-20</div>
+            </div>
+        </div>
+        
+        <!-- 医疗操作 -->
+        <div class="medical-actions">
+            <button class="medical-btn" onclick="interactions.handleButtonClick('addRecord')">
+                📝 添加记录
+            </button>
+            <button class="medical-btn secondary" onclick="interactions.handleButtonClick('healthChart')">
+                📊 健康报告
+            </button>
+            <button class="medical-btn" onclick="interactions.handleButtonClick('aiChat')">
+                🤖 AI诊断
+            </button>
+            <button class="medical-btn emergency" onclick="interactions.handleButtonClick('emergency')">
+                🚨 紧急求助
+            </button>
+        </div>
+    </div>
+    
+    <script src="assets/js/common.js"></script>
+    <script>
+        // 专业医疗式特有交互
+        document.addEventListener('DOMContentLoaded', function() {
+            // 标签页切换
+            const tabs = document.querySelectorAll('.tab-item');
+            tabs.forEach(tab => {
+                tab.addEventListener('click', function() {
+                    tabs.forEach(t => t.classList.remove('active'));
+                    this.classList.add('active');
+                    interactions.showToast(`切换到${this.textContent}页面`);
+                });
+            });
+            
+            // 生命体征数值动画
+            const vitalValues = document.querySelectorAll('.vital-value');
+            vitalValues.forEach((value, index) => {
+                const finalValue = value.textContent;
+                value.textContent = '0';
+                
+                setTimeout(() => {
+                    let current = 0;
+                    const target = parseFloat(finalValue);
+                    const increment = target / 20;
+                    
+                    const timer = setInterval(() => {
+                        current += increment;
+                        if (current >= target) {
+                            current = target;
+                            clearInterval(timer);
+                        }
+                        value.textContent = current.toFixed(1);
+                    }, 50);
+                }, index * 200);
+            });
+            
+            // 表格行悬停效果
+            const tableRows = document.querySelectorAll('.medical-table tr');
+            tableRows.forEach(row => {
+                row.addEventListener('mouseenter', function() {
+                    this.style.backgroundColor = '#EDF2F7';
+                });
+                
+                row.addEventListener('mouseleave', function() {
+                    this.style.backgroundColor = '';
+                });
+            });
+            
+            console.log('专业医疗式原型已加载');
+        });
+    </script>
+</body>
+</html>
diff --git a/prototypes/pet-detail/pet-detail-prototype-09.html b/prototypes/pet-detail/pet-detail-prototype-09.html
new file mode 100644
index 0000000..27490e4
--- /dev/null
+++ b/prototypes/pet-detail/pet-detail-prototype-09.html
@@ -0,0 +1,567 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>宠物详情 - 故事书式</title>
+    <link rel="stylesheet" href="assets/css/common.css">
+    <style>
+        /* 故事书式特有样式 */
+        .storybook-container {
+            background: linear-gradient(135deg, #FFF8E1, #F3E5AB);
+            min-height: 100vh;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .storybook-background {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M20,20 Q30,10 40,20 T60,20" stroke="rgba(139,69,19,0.1)" stroke-width="1" fill="none"/><circle cx="80" cy="30" r="2" fill="rgba(139,69,19,0.1)"/><path d="M10,80 Q20,70 30,80 T50,80" stroke="rgba(139,69,19,0.1)" stroke-width="1" fill="none"/></svg>') repeat;
+            opacity: 0.3;
+        }
+        
+        .book-cover {
+            position: relative;
+            z-index: 2;
+            background: linear-gradient(135deg, #8B4513, #A0522D);
+            color: white;
+            padding: var(--spacing-xl);
+            text-align: center;
+            border-radius: 0 0 var(--spacing-lg) var(--spacing-lg);
+            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+            margin-bottom: var(--spacing-lg);
+        }
+        
+        .book-title {
+            font-family: 'Georgia', serif;
+            font-size: 28px;
+            font-weight: bold;
+            margin-bottom: var(--spacing-sm);
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+        }
+        
+        .book-subtitle {
+            font-family: 'Georgia', serif;
+            font-size: 16px;
+            font-style: italic;
+            opacity: 0.9;
+            margin-bottom: var(--spacing-lg);
+        }
+        
+        .book-avatar {
+            width: 120px;
+            height: 120px;
+            border-radius: var(--radius-round);
+            border: 4px solid rgba(255,255,255,0.8);
+            margin: 0 auto var(--spacing-md);
+            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+        }
+        
+        .book-meta {
+            font-size: 14px;
+            opacity: 0.8;
+        }
+        
+        .story-page {
+            background: #FFFEF7;
+            margin: var(--spacing-md);
+            border-radius: var(--radius-lg);
+            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+            overflow: hidden;
+            position: relative;
+            border: 1px solid #E8E2D4;
+        }
+        
+        .story-page::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 20px;
+            bottom: 0;
+            width: 2px;
+            background: linear-gradient(to bottom, #E8E2D4, transparent);
+        }
+        
+        .page-header {
+            background: linear-gradient(90deg, #F5F5DC, #FFFEF7);
+            padding: var(--spacing-md);
+            border-bottom: 2px solid #E8E2D4;
+            position: relative;
+        }
+        
+        .page-number {
+            position: absolute;
+            top: var(--spacing-sm);
+            right: var(--spacing-md);
+            font-family: 'Georgia', serif;
+            font-size: 12px;
+            color: #8B7355;
+        }
+        
+        .chapter-title {
+            font-family: 'Georgia', serif;
+            font-size: 18px;
+            font-weight: bold;
+            color: #5D4E37;
+            margin-bottom: var(--spacing-xs);
+        }
+        
+        .chapter-subtitle {
+            font-family: 'Georgia', serif;
+            font-size: 14px;
+            font-style: italic;
+            color: #8B7355;
+        }
+        
+        .story-content {
+            padding: var(--spacing-lg);
+            font-family: 'Georgia', serif;
+            line-height: 1.8;
+            color: #3E2723;
+        }
+        
+        .story-paragraph {
+            margin-bottom: var(--spacing-md);
+            text-indent: 2em;
+            text-align: justify;
+        }
+        
+        .story-illustration {
+            width: 100%;
+            height: 150px;
+            background: linear-gradient(135deg, #FFE0B2, #FFCC80);
+            border-radius: var(--radius-md);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 48px;
+            margin: var(--spacing-lg) 0;
+            border: 2px solid #E8E2D4;
+        }
+        
+        .story-quote {
+            background: #F5F5DC;
+            border-left: 4px solid #8B4513;
+            padding: var(--spacing-md);
+            margin: var(--spacing-lg) 0;
+            font-style: italic;
+            position: relative;
+        }
+        
+        .story-quote::before {
+            content: '"';
+            font-size: 48px;
+            color: #8B4513;
+            position: absolute;
+            top: -10px;
+            left: var(--spacing-md);
+            opacity: 0.5;
+        }
+        
+        .timeline-entry {
+            display: flex;
+            gap: var(--spacing-md);
+            margin-bottom: var(--spacing-lg);
+            position: relative;
+        }
+        
+        .timeline-date {
+            background: #8B4513;
+            color: white;
+            padding: var(--spacing-sm);
+            border-radius: var(--radius-md);
+            font-size: 12px;
+            font-weight: bold;
+            white-space: nowrap;
+            height: fit-content;
+        }
+        
+        .timeline-story {
+            flex: 1;
+            background: #F9F7F4;
+            padding: var(--spacing-md);
+            border-radius: var(--radius-md);
+            border: 1px solid #E8E2D4;
+        }
+        
+        .timeline-title {
+            font-weight: bold;
+            color: #5D4E37;
+            margin-bottom: var(--spacing-xs);
+        }
+        
+        .timeline-text {
+            font-size: 14px;
+            line-height: 1.6;
+        }
+        
+        .character-profile {
+            background: #F5F5DC;
+            border: 2px solid #8B4513;
+            border-radius: var(--radius-lg);
+            padding: var(--spacing-lg);
+            margin: var(--spacing-lg) 0;
+        }
+        
+        .character-header {
+            text-align: center;
+            margin-bottom: var(--spacing-md);
+        }
+        
+        .character-name {
+            font-family: 'Georgia', serif;
+            font-size: 20px;
+            font-weight: bold;
+            color: #5D4E37;
+            margin-bottom: var(--spacing-xs);
+        }
+        
+        .character-traits {
+            display: flex;
+            flex-wrap: wrap;
+            gap: var(--spacing-xs);
+            justify-content: center;
+        }
+        
+        .trait-tag {
+            background: #8B4513;
+            color: white;
+            padding: 2px 8px;
+            border-radius: 12px;
+            font-size: 12px;
+        }
+        
+        .page-navigation {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: var(--spacing-md);
+            background: #F5F5DC;
+            border-top: 1px solid #E8E2D4;
+        }
+        
+        .nav-btn {
+            background: #8B4513;
+            color: white;
+            border: none;
+            padding: var(--spacing-sm) var(--spacing-md);
+            border-radius: var(--radius-md);
+            font-family: 'Georgia', serif;
+            font-size: 14px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-btn:hover {
+            background: #A0522D;
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn:disabled {
+            background: #CCCCCC;
+            cursor: not-allowed;
+            transform: none;
+        }
+        
+        .page-indicator {
+            font-family: 'Georgia', serif;
+            font-size: 14px;
+            color: #8B7355;
+        }
+        
+        .bookmark {
+            position: absolute;
+            top: 0;
+            right: 20px;
+            width: 30px;
+            height: 60px;
+            background: #DC143C;
+            clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 60%, 0 80%);
+            z-index: 3;
+        }
+        
+        .story-actions {
+            display: flex;
+            gap: var(--spacing-sm);
+            padding: var(--spacing-md);
+            background: #F5F5DC;
+        }
+        
+        .story-btn {
+            flex: 1;
+            background: #8B4513;
+            color: white;
+            border: none;
+            padding: var(--spacing-md);
+            border-radius: var(--radius-md);
+            font-family: 'Georgia', serif;
+            font-weight: bold;
+            transition: all 0.3s ease;
+        }
+        
+        .story-btn:hover {
+            background: #A0522D;
+            transform: translateY(-2px);
+        }
+        
+        .story-btn.secondary {
+            background: #5D4E37;
+        }
+    </style>
+</head>
+<body>
+    <div class="container storybook-container">
+        <div class="storybook-background"></div>
+        
+        <!-- 书籍封面 -->
+        <div class="book-cover">
+            <div class="bookmark"></div>
+            <h1 class="book-title">小橘的奇妙冒险</h1>
+            <p class="book-subtitle">一只橘猫的温暖故事</p>
+            <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K" 
+                 alt="小橘" class="book-avatar">
+            <div class="book-meta">
+                作者：小橘的铲屎官 | 出版日期：2022年4月20日<br>
+                已陪伴 645 个美好日子
+            </div>
+        </div>
+        
+        <!-- 第一章：角色介绍 -->
+        <div class="story-page">
+            <div class="page-header">
+                <div class="page-number">第 1 页</div>
+                <h2 class="chapter-title">第一章：主角登场</h2>
+                <p class="chapter-subtitle">一只特别的橘猫</p>
+            </div>
+            
+            <div class="story-content">
+                <div class="character-profile">
+                    <div class="character-header">
+                        <div class="character-name">小橘</div>
+                        <div class="character-traits">
+                            <span class="trait-tag">活泼</span>
+                            <span class="trait-tag">粘人</span>
+                            <span class="trait-tag">贪吃</span>
+                            <span class="trait-tag">聪明</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <p class="story-paragraph">
+                    在一个春暖花开的日子里，一只名叫小橘的橘猫来到了这个温暖的家。
+                    它有着一身金黄色的毛发，就像阳光一样温暖明亮。从那一刻起，
+                    这个家就充满了欢声笑语。
+                </p>
+                
+                <div class="story-illustration">🏠</div>
+                
+                <p class="story-paragraph">
+                    小橘不仅仅是一只普通的猫咪，它有着独特的性格和无穷的魅力。
+                    每天早晨，它都会用轻柔的叫声唤醒主人，仿佛在说："新的一天开始了，
+                    让我们一起创造美好的回忆吧！"
+                </p>
+                
+                <div class="story-quote">
+                    "从小橘来到我们家的那一刻起，我就知道，我们的生活将会变得更加精彩。"
+                </div>
+            </div>
+        </div>
+        
+        <!-- 第二章：成长记录 -->
+        <div class="story-page">
+            <div class="page-header">
+                <div class="page-number">第 2 页</div>
+                <h2 class="chapter-title">第二章：成长足迹</h2>
+                <p class="chapter-subtitle">记录每一个珍贵时刻</p>
+            </div>
+            
+            <div class="story-content">
+                <p class="story-paragraph">
+                    时光荏苒，小橘在这个家里健康快乐地成长着。每一个重要的时刻，
+                    都被细心地记录下来，成为这本故事书中最珍贵的篇章。
+                </p>
+                
+                <div class="timeline-entry">
+                    <div class="timeline-date">2024-01-20</div>
+                    <div class="timeline-story">
+                        <div class="timeline-title">体重记录</div>
+                        <div class="timeline-text">
+                            今天小橘的体重达到了4.2kg，比上周增加了0.1kg。
+                            看着它健康成长，心中满怀欣慰。
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="timeline-entry">
+                    <div class="timeline-date">2024-01-18</div>
+                    <div class="timeline-story">
+                        <div class="timeline-title">勇敢的疫苗接种</div>
+                        <div class="timeline-text">
+                            小橘今天接种了狂犬疫苗第二针。整个过程中它表现得非常勇敢，
+                            医生都夸奖它是个好孩子。
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="timeline-entry">
+                    <div class="timeline-date">2024-01-17</div>
+                    <div class="timeline-story">
+                        <div class="timeline-title">搞怪小能手</div>
+                        <div class="timeline-text">
+                            小橘又发挥了它的"破坏天赋"，把我的拖鞋咬得稀烂。
+                            但看着它那得意的小表情，我竟然舍不得生气。
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="story-illustration">📖</div>
+                
+                <p class="story-paragraph">
+                    每一个平凡的日子，都因为小橘的存在而变得特别。
+                    它用自己的方式诠释着什么是陪伴，什么是爱。
+                </p>
+            </div>
+        </div>
+        
+        <!-- 第三章：健康档案 -->
+        <div class="story-page">
+            <div class="page-header">
+                <div class="page-number">第 3 页</div>
+                <h2 class="chapter-title">第三章：健康守护</h2>
+                <p class="chapter-subtitle">用心呵护每一天</p>
+            </div>
+            
+            <div class="story-content">
+                <p class="story-paragraph">
+                    作为一个负责任的铲屎官，记录小橘的健康状况是每天的重要任务。
+                    从体重变化到疫苗接种，从日常护理到定期体检，
+                    每一个细节都关乎着小橘的健康和幸福。
+                </p>
+                
+                <div class="story-illustration">📊</div>
+                
+                <div class="story-quote">
+                    "健康是最大的财富，对于小橘来说也是如此。我愿意用我的细心和爱心，
+                    守护它的每一天。"
+                </div>
+                
+                <p class="story-paragraph">
+                    目前小橘的健康评分是85分，这是一个令人满意的成绩。
+                    定期的体检显示它的各项指标都在正常范围内，
+                    这让我们对未来充满了信心。
+                </p>
+            </div>
+            
+            <div class="page-navigation">
+                <button class="nav-btn" disabled>← 上一页</button>
+                <div class="page-indicator">第 3 页 / 共 5 页</div>
+                <button class="nav-btn">下一页 →</button>
+            </div>
+        </div>
+        
+        <!-- 故事操作 -->
+        <div class="story-actions">
+            <button class="story-btn" onclick="interactions.handleButtonClick('addRecord')">
+                📝 续写故事
+            </button>
+            <button class="story-btn secondary" onclick="interactions.handleButtonClick('aiChat')">
+                💬 故事助手
+            </button>
+            <button class="story-btn" onclick="interactions.handleButtonClick('share')">
+                📚 分享故事
+            </button>
+        </div>
+    </div>
+    
+    <script src="assets/js/common.js"></script>
+    <script>
+        // 故事书式特有交互
+        document.addEventListener('DOMContentLoaded', function() {
+            let currentPage = 1;
+            const totalPages = 5;
+            
+            // 翻页功能
+            const prevBtn = document.querySelector('.nav-btn:first-child');
+            const nextBtn = document.querySelector('.nav-btn:last-child');
+            const pageIndicator = document.querySelector('.page-indicator');
+            
+            function updateNavigation() {
+                prevBtn.disabled = currentPage === 1;
+                nextBtn.disabled = currentPage === totalPages;
+                pageIndicator.textContent = `第 ${currentPage} 页 / 共 ${totalPages} 页`;
+            }
+            
+            nextBtn.addEventListener('click', function() {
+                if (currentPage < totalPages) {
+                    currentPage++;
+                    updateNavigation();
+                    
+                    // 翻页动画
+                    const pages = document.querySelectorAll('.story-page');
+                    pages.forEach(page => {
+                        page.style.transform = 'rotateY(-10deg)';
+                        page.style.opacity = '0.8';
+                        
+                        setTimeout(() => {
+                            page.style.transform = 'rotateY(0deg)';
+                            page.style.opacity = '1';
+                        }, 300);
+                    });
+                    
+                    interactions.showToast(`翻到第 ${currentPage} 页`);
+                }
+            });
+            
+            prevBtn.addEventListener('click', function() {
+                if (currentPage > 1) {
+                    currentPage--;
+                    updateNavigation();
+                    
+                    // 翻页动画
+                    const pages = document.querySelectorAll('.story-page');
+                    pages.forEach(page => {
+                        page.style.transform = 'rotateY(10deg)';
+                        page.style.opacity = '0.8';
+                        
+                        setTimeout(() => {
+                            page.style.transform = 'rotateY(0deg)';
+                            page.style.opacity = '1';
+                        }, 300);
+                    });
+                    
+                    interactions.showToast(`翻到第 ${currentPage} 页`);
+                }
+            });
+            
+            // 页面加载动画
+            const storyPages = document.querySelectorAll('.story-page');
+            storyPages.forEach((page, index) => {
+                page.style.opacity = '0';
+                page.style.transform = 'translateY(20px)';
+                
+                setTimeout(() => {
+                    page.style.transition = 'all 0.6s ease';
+                    page.style.opacity = '1';
+                    page.style.transform = 'translateY(0)';
+                }, index * 200);
+            });
+            
+            // 书签悬停效果
+            const bookmark = document.querySelector('.bookmark');
+            bookmark.addEventListener('mouseenter', function() {
+                this.style.transform = 'scale(1.1)';
+            });
+            
+            bookmark.addEventListener('mouseleave', function() {
+                this.style.transform = 'scale(1)';
+            });
+            
+            console.log('故事书式原型已加载');
+        });
+    </script>
+</body>
+</html>
diff --git a/prototypes/pet-detail/pet-detail-prototype-10.html b/prototypes/pet-detail/pet-detail-prototype-10.html
new file mode 100644
index 0000000..3db3bed
--- /dev/null
+++ b/prototypes/pet-detail/pet-detail-prototype-10.html
@@ -0,0 +1,552 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>宠物详情 - 卡片仪表盘式 V1</title>
+    <link rel="stylesheet" href="assets/css/common.css">
+    <style>
+        /* 卡片仪表盘式 V1 特有样式 */
+        .dashboard-v1-container {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+        }
+        
+        .dashboard-header {
+            background: rgba(255,255,255,0.95);
+            backdrop-filter: blur(10px);
+            padding: var(--spacing-lg);
+            margin: var(--spacing-md);
+            border-radius: var(--radius-xl);
+            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
+            text-align: center;
+        }
+        
+        .pet-avatar-dashboard {
+            width: 100px;
+            height: 100px;
+            border-radius: var(--radius-round);
+            border: 4px solid var(--pet-primary);
+            margin: 0 auto var(--spacing-md);
+            box-shadow: 0 8px 24px rgba(255, 138, 128, 0.3);
+        }
+        
+        .pet-name-large {
+            font-size: 24px;
+            font-weight: bold;
+            color: var(--text-primary);
+            margin-bottom: var(--spacing-xs);
+        }
+        
+        .pet-subtitle {
+            color: var(--text-secondary);
+            margin-bottom: var(--spacing-lg);
+        }
+        
+        .quick-stats {
+            display: flex;
+            justify-content: space-around;
+            gap: var(--spacing-md);
+        }
+        
+        .quick-stat {
+            text-align: center;
+        }
+        
+        .stat-number {
+            font-size: 20px;
+            font-weight: bold;
+            color: var(--pet-primary);
+        }
+        
+        .stat-label {
+            font-size: 12px;
+            color: var(--text-light);
+            margin-top: var(--spacing-xs);
+        }
+        
+        .metrics-row {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: var(--spacing-md);
+            margin: var(--spacing-md);
+        }
+        
+        .metric-card {
+            background: rgba(255,255,255,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: var(--radius-lg);
+            padding: var(--spacing-lg);
+            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .metric-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: linear-gradient(90deg, var(--pet-primary), var(--pet-accent));
+        }
+        
+        .metric-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: var(--spacing-md);
+        }
+        
+        .metric-title {
+            font-weight: bold;
+            color: var(--text-primary);
+        }
+        
+        .metric-icon {
+            font-size: 24px;
+        }
+        
+        .metric-value {
+            font-size: 32px;
+            font-weight: bold;
+            color: var(--text-primary);
+            margin-bottom: var(--spacing-sm);
+        }
+        
+        .metric-trend {
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-xs);
+            font-size: 14px;
+        }
+        
+        .trend-positive {
+            color: var(--pet-secondary);
+        }
+        
+        .trend-negative {
+            color: var(--pet-warning);
+        }
+        
+        .progress-bar {
+            width: 100%;
+            height: 8px;
+            background: #E2E8F0;
+            border-radius: 4px;
+            overflow: hidden;
+            margin-top: var(--spacing-sm);
+        }
+        
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, var(--pet-primary), var(--pet-accent));
+            border-radius: 4px;
+            transition: width 1s ease;
+        }
+        
+        .health-dashboard {
+            background: rgba(255,255,255,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: var(--radius-lg);
+            margin: var(--spacing-md);
+            padding: var(--spacing-lg);
+            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
+        }
+        
+        .dashboard-title {
+            font-size: 18px;
+            font-weight: bold;
+            color: var(--text-primary);
+            margin-bottom: var(--spacing-lg);
+            text-align: center;
+        }
+        
+        .health-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: var(--spacing-lg);
+        }
+        
+        .health-item {
+            text-align: center;
+        }
+        
+        .health-circle {
+            width: 80px;
+            height: 80px;
+            border-radius: var(--radius-round);
+            margin: 0 auto var(--spacing-md);
+            position: relative;
+            background: conic-gradient(var(--pet-primary) 0deg, var(--pet-primary) 306deg, #E2E8F0 306deg);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .health-circle::before {
+            content: '';
+            width: 60px;
+            height: 60px;
+            background: white;
+            border-radius: var(--radius-round);
+            position: absolute;
+        }
+        
+        .health-score {
+            position: relative;
+            z-index: 2;
+            font-size: 18px;
+            font-weight: bold;
+            color: var(--text-primary);
+        }
+        
+        .health-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-weight: 500;
+        }
+        
+        .activity-cards {
+            margin: var(--spacing-md);
+        }
+        
+        .activity-card {
+            background: rgba(255,255,255,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: var(--radius-lg);
+            padding: var(--spacing-md);
+            margin-bottom: var(--spacing-md);
+            box-shadow: 0 4px 16px rgba(0,0,0,0.1);
+            border-left: 4px solid var(--pet-accent);
+        }
+        
+        .activity-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: var(--spacing-sm);
+        }
+        
+        .activity-title {
+            font-weight: bold;
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-sm);
+        }
+        
+        .activity-time {
+            font-size: 12px;
+            color: var(--text-light);
+        }
+        
+        .activity-content {
+            color: var(--text-secondary);
+            font-size: 14px;
+            line-height: 1.5;
+        }
+        
+        .action-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: var(--spacing-md);
+            margin: var(--spacing-md);
+        }
+        
+        .action-card {
+            background: rgba(255,255,255,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: var(--radius-lg);
+            padding: var(--spacing-lg);
+            text-align: center;
+            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
+            transition: all 0.3s ease;
+            cursor: pointer;
+        }
+        
+        .action-card:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 12px 40px rgba(0,0,0,0.15);
+        }
+        
+        .action-icon {
+            font-size: 32px;
+            margin-bottom: var(--spacing-md);
+        }
+        
+        .action-title {
+            font-weight: bold;
+            color: var(--text-primary);
+            margin-bottom: var(--spacing-xs);
+        }
+        
+        .action-subtitle {
+            font-size: 12px;
+            color: var(--text-light);
+        }
+        
+        .floating-summary {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            background: var(--pet-primary);
+            color: white;
+            width: 60px;
+            height: 60px;
+            border-radius: var(--radius-round);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 24px;
+            box-shadow: 0 8px 32px rgba(255, 138, 128, 0.4);
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        
+        .floating-summary:hover {
+            transform: scale(1.1);
+        }
+    </style>
+</head>
+<body>
+    <div class="container dashboard-v1-container">
+        <!-- 宠物信息头部卡片 -->
+        <div class="dashboard-header">
+            <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K" 
+                 alt="小橘" class="pet-avatar-dashboard">
+            <h1 class="pet-name-large">小橘</h1>
+            <p class="pet-subtitle">橘猫 · 公 · 2岁3个月 · 健康状态良好</p>
+            
+            <div class="quick-stats">
+                <div class="quick-stat">
+                    <div class="stat-number">645</div>
+                    <div class="stat-label">陪伴天数</div>
+                </div>
+                <div class="quick-stat">
+                    <div class="stat-number">4.2kg</div>
+                    <div class="stat-label">当前体重</div>
+                </div>
+                <div class="quick-stat">
+                    <div class="stat-number">85</div>
+                    <div class="stat-label">健康评分</div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 核心指标卡片 -->
+        <div class="metrics-row">
+            <div class="metric-card">
+                <div class="metric-header">
+                    <span class="metric-title">体重趋势</span>
+                    <span class="metric-icon">⚖️</span>
+                </div>
+                <div class="metric-value">4.2kg</div>
+                <div class="metric-trend trend-positive">
+                    <span>↗</span>
+                    <span>+0.1kg 本周</span>
+                </div>
+                <div class="progress-bar">
+                    <div class="progress-fill" style="width: 84%;"></div>
+                </div>
+            </div>
+            
+            <div class="metric-card">
+                <div class="metric-header">
+                    <span class="metric-title">活动指数</span>
+                    <span class="metric-icon">🏃</span>
+                </div>
+                <div class="metric-value">78%</div>
+                <div class="metric-trend trend-positive">
+                    <span>↗</span>
+                    <span>+5% 昨日</span>
+                </div>
+                <div class="progress-bar">
+                    <div class="progress-fill" style="width: 78%;"></div>
+                </div>
+            </div>
+        </div>
+        
+        <div class="metrics-row">
+            <div class="metric-card">
+                <div class="metric-header">
+                    <span class="metric-title">食欲状态</span>
+                    <span class="metric-icon">🍽️</span>
+                </div>
+                <div class="metric-value">92%</div>
+                <div class="metric-trend trend-negative">
+                    <span>↘</span>
+                    <span>-3% 本周</span>
+                </div>
+                <div class="progress-bar">
+                    <div class="progress-fill" style="width: 92%;"></div>
+                </div>
+            </div>
+            
+            <div class="metric-card">
+                <div class="metric-header">
+                    <span class="metric-title">睡眠质量</span>
+                    <span class="metric-icon">😴</span>
+                </div>
+                <div class="metric-value">14h</div>
+                <div class="metric-trend trend-positive">
+                    <span>→</span>
+                    <span>正常范围</span>
+                </div>
+                <div class="progress-bar">
+                    <div class="progress-fill" style="width: 87%;"></div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 健康仪表盘 -->
+        <div class="health-dashboard">
+            <h2 class="dashboard-title">健康状态仪表盘</h2>
+            <div class="health-grid">
+                <div class="health-item">
+                    <div class="health-circle">
+                        <div class="health-score">85</div>
+                    </div>
+                    <div class="health-label">综合健康</div>
+                </div>
+                <div class="health-item">
+                    <div class="health-circle" style="background: conic-gradient(var(--pet-secondary) 0deg, var(--pet-secondary) 324deg, #E2E8F0 324deg);">
+                        <div class="health-score">90</div>
+                    </div>
+                    <div class="health-label">疫苗状态</div>
+                </div>
+                <div class="health-item">
+                    <div class="health-circle" style="background: conic-gradient(var(--pet-warning) 0deg, var(--pet-warning) 252deg, #E2E8F0 252deg);">
+                        <div class="health-score">70</div>
+                    </div>
+                    <div class="health-label">驱虫状态</div>
+                </div>
+                <div class="health-item">
+                    <div class="health-circle" style="background: conic-gradient(var(--pet-accent) 0deg, var(--pet-accent) 331deg, #E2E8F0 331deg);">
+                        <div class="health-score">92</div>
+                    </div>
+                    <div class="health-label">营养状态</div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 最近活动卡片 -->
+        <div class="activity-cards">
+            <div class="activity-card">
+                <div class="activity-header">
+                    <div class="activity-title">
+                        <span>⚖️</span>
+                        <span>体重记录</span>
+                    </div>
+                    <div class="activity-time">2小时前</div>
+                </div>
+                <div class="activity-content">
+                    今天测量体重4.2kg，比上周增加了0.1kg，成长状态良好
+                </div>
+            </div>
+            
+            <div class="activity-card">
+                <div class="activity-header">
+                    <div class="activity-title">
+                        <span>💉</span>
+                        <span>疫苗接种</span>
+                    </div>
+                    <div class="activity-time">1天前</div>
+                </div>
+                <div class="activity-content">
+                    完成了狂犬疫苗第二针接种，医生说恢复情况很好
+                </div>
+            </div>
+        </div>
+        
+        <!-- 快速操作网格 -->
+        <div class="action-grid">
+            <div class="action-card" onclick="interactions.handleButtonClick('addRecord')">
+                <div class="action-icon">📝</div>
+                <div class="action-title">添加记录</div>
+                <div class="action-subtitle">记录日常数据</div>
+            </div>
+            
+            <div class="action-card" onclick="interactions.handleButtonClick('aiChat')">
+                <div class="action-icon">💬</div>
+                <div class="action-title">AI助手</div>
+                <div class="action-subtitle">智能健康咨询</div>
+            </div>
+            
+            <div class="action-card" onclick="interactions.handleButtonClick('healthChart')">
+                <div class="action-icon">📊</div>
+                <div class="action-title">健康报告</div>
+                <div class="action-subtitle">详细数据分析</div>
+            </div>
+            
+            <div class="action-card" onclick="interactions.handleButtonClick('timeline')">
+                <div class="action-icon">⏰</div>
+                <div class="action-title">成长时光</div>
+                <div class="action-subtitle">时间轴记录</div>
+            </div>
+        </div>
+        
+        <!-- 悬浮摘要按钮 -->
+        <div class="floating-summary" onclick="interactions.handleButtonClick('summary')">
+            📋
+        </div>
+    </div>
+    
+    <script src="assets/js/common.js"></script>
+    <script>
+        // 卡片仪表盘式 V1 特有交互
+        document.addEventListener('DOMContentLoaded', function() {
+            // 进度条动画
+            const progressBars = document.querySelectorAll('.progress-fill');
+            progressBars.forEach((bar, index) => {
+                const width = bar.style.width;
+                bar.style.width = '0%';
+                
+                setTimeout(() => {
+                    bar.style.width = width;
+                }, index * 200);
+            });
+            
+            // 健康圆环动画
+            const healthCircles = document.querySelectorAll('.health-circle');
+            healthCircles.forEach((circle, index) => {
+                setTimeout(() => {
+                    circle.style.animation = 'rotateIn 0.8s ease forwards';
+                }, index * 150);
+            });
+            
+            // 卡片入场动画
+            const cards = document.querySelectorAll('.metric-card, .activity-card, .action-card');
+            cards.forEach((card, index) => {
+                card.style.opacity = '0';
+                card.style.transform = 'translateY(20px)';
+                
+                setTimeout(() => {
+                    card.style.transition = 'all 0.6s ease';
+                    card.style.opacity = '1';
+                    card.style.transform = 'translateY(0)';
+                }, index * 100);
+            });
+            
+            console.log('卡片仪表盘式 V1 原型已加载');
+        });
+        
+        // 添加旋转动画
+        const style = document.createElement('style');
+        style.textContent = `
+            @keyframes rotateIn {
+                from {
+                    transform: rotate(-180deg) scale(0.5);
+                    opacity: 0;
+                }
+                to {
+                    transform: rotate(0deg) scale(1);
+                    opacity: 1;
+                }
+            }
+        `;
+        document.head.appendChild(style);
+    </script>
+</body>
+</html>
diff --git a/prototypes/pet-detail/pet-detail-prototype-11.html b/prototypes/pet-detail/pet-detail-prototype-11.html
new file mode 100644
index 0000000..57bc2a4
--- /dev/null
+++ b/prototypes/pet-detail/pet-detail-prototype-11.html
@@ -0,0 +1,626 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>宠物详情 - 卡片仪表盘式 V2</title>
+    <link rel="stylesheet" href="assets/css/common.css">
+    <style>
+        /* 卡片仪表盘式 V2 特有样式 - 侧重数据可视化 */
+        .dashboard-v2-container {
+            background: #F8FAFC;
+        }
+        
+        .hero-card {
+            background: linear-gradient(135deg, var(--pet-primary), var(--pet-accent));
+            color: white;
+            border-radius: var(--radius-xl);
+            padding: var(--spacing-xl);
+            margin: var(--spacing-md);
+            box-shadow: 0 20px 40px rgba(255, 138, 128, 0.3);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .hero-card::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            right: -50%;
+            width: 200%;
+            height: 200%;
+            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>') repeat;
+            animation: float 20s infinite linear;
+        }
+        
+        .hero-content {
+            position: relative;
+            z-index: 2;
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-lg);
+        }
+        
+        .hero-avatar {
+            width: 90px;
+            height: 90px;
+            border-radius: var(--radius-round);
+            border: 4px solid rgba(255,255,255,0.8);
+            box-shadow: 0 8px 24px rgba(0,0,0,0.2);
+        }
+        
+        .hero-info {
+            flex: 1;
+        }
+        
+        .hero-name {
+            font-size: 28px;
+            font-weight: bold;
+            margin-bottom: var(--spacing-xs);
+            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
+        }
+        
+        .hero-details {
+            opacity: 0.9;
+            margin-bottom: var(--spacing-md);
+        }
+        
+        .hero-stats {
+            display: flex;
+            gap: var(--spacing-lg);
+        }
+        
+        .hero-stat {
+            text-align: center;
+        }
+        
+        .hero-stat-value {
+            font-size: 20px;
+            font-weight: bold;
+        }
+        
+        .hero-stat-label {
+            font-size: 12px;
+            opacity: 0.8;
+        }
+        
+        .dashboard-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: var(--spacing-md);
+            margin: var(--spacing-md);
+        }
+        
+        .dashboard-card {
+            background: white;
+            border-radius: var(--radius-lg);
+            padding: var(--spacing-lg);
+            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
+            border: 1px solid #E2E8F0;
+            transition: all 0.3s ease;
+        }
+        
+        .dashboard-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 30px rgba(0,0,0,0.12);
+        }
+        
+        .card-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: var(--spacing-lg);
+        }
+        
+        .card-title {
+            font-weight: bold;
+            color: var(--text-primary);
+            font-size: 16px;
+        }
+        
+        .card-icon {
+            width: 40px;
+            height: 40px;
+            border-radius: var(--radius-md);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+        }
+        
+        .icon-weight {
+            background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
+            color: white;
+        }
+        
+        .icon-activity {
+            background: linear-gradient(135deg, #4ECDC4, #44A08D);
+            color: white;
+        }
+        
+        .icon-food {
+            background: linear-gradient(135deg, #45B7D1, #96CEB4);
+            color: white;
+        }
+        
+        .icon-sleep {
+            background: linear-gradient(135deg, #A8E6CF, #DCEDC1);
+            color: white;
+        }
+        
+        .metric-display {
+            text-align: center;
+        }
+        
+        .metric-value-large {
+            font-size: 36px;
+            font-weight: bold;
+            color: var(--text-primary);
+            margin-bottom: var(--spacing-sm);
+        }
+        
+        .metric-unit {
+            font-size: 14px;
+            color: var(--text-light);
+            margin-left: var(--spacing-xs);
+        }
+        
+        .metric-change {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: var(--spacing-xs);
+            font-size: 14px;
+            margin-bottom: var(--spacing-md);
+        }
+        
+        .change-positive {
+            color: #10B981;
+        }
+        
+        .change-negative {
+            color: #EF4444;
+        }
+        
+        .change-neutral {
+            color: #6B7280;
+        }
+        
+        .mini-chart {
+            height: 40px;
+            background: linear-gradient(90deg, #E5E7EB, #F3F4F6);
+            border-radius: var(--radius-md);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .chart-line {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 60%;
+            background: linear-gradient(90deg, var(--pet-primary), var(--pet-accent));
+            border-radius: var(--radius-md) var(--radius-md) 0 0;
+            clip-path: polygon(0 80%, 25% 60%, 50% 40%, 75% 30%, 100% 20%, 100% 100%, 0 100%);
+        }
+        
+        .full-width-card {
+            grid-column: 1 / -1;
+            background: white;
+            border-radius: var(--radius-lg);
+            padding: var(--spacing-lg);
+            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
+            border: 1px solid #E2E8F0;
+        }
+        
+        .health-overview {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: var(--spacing-lg);
+            margin-top: var(--spacing-lg);
+        }
+        
+        .health-metric {
+            text-align: center;
+        }
+        
+        .health-circle-v2 {
+            width: 60px;
+            height: 60px;
+            border-radius: var(--radius-round);
+            margin: 0 auto var(--spacing-sm);
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .circle-85 {
+            background: conic-gradient(var(--pet-secondary) 0deg, var(--pet-secondary) 306deg, #E5E7EB 306deg);
+        }
+        
+        .circle-90 {
+            background: conic-gradient(var(--pet-primary) 0deg, var(--pet-primary) 324deg, #E5E7EB 324deg);
+        }
+        
+        .circle-70 {
+            background: conic-gradient(var(--pet-warning) 0deg, var(--pet-warning) 252deg, #E5E7EB 252deg);
+        }
+        
+        .circle-92 {
+            background: conic-gradient(var(--pet-accent) 0deg, var(--pet-accent) 331deg, #E5E7EB 331deg);
+        }
+        
+        .health-circle-v2::before {
+            content: '';
+            width: 40px;
+            height: 40px;
+            background: white;
+            border-radius: var(--radius-round);
+            position: absolute;
+        }
+        
+        .health-value {
+            position: relative;
+            z-index: 2;
+            font-size: 14px;
+            font-weight: bold;
+            color: var(--text-primary);
+        }
+        
+        .health-name {
+            font-size: 12px;
+            color: var(--text-secondary);
+            font-weight: 500;
+        }
+        
+        .recent-activities {
+            margin-top: var(--spacing-lg);
+        }
+        
+        .activity-list {
+            display: flex;
+            flex-direction: column;
+            gap: var(--spacing-md);
+        }
+        
+        .activity-item-v2 {
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-md);
+            padding: var(--spacing-md);
+            background: #F8FAFC;
+            border-radius: var(--radius-md);
+            border-left: 4px solid var(--pet-accent);
+        }
+        
+        .activity-icon-v2 {
+            width: 40px;
+            height: 40px;
+            border-radius: var(--radius-md);
+            background: var(--pet-accent);
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+        }
+        
+        .activity-details {
+            flex: 1;
+        }
+        
+        .activity-name {
+            font-weight: bold;
+            color: var(--text-primary);
+            margin-bottom: var(--spacing-xs);
+        }
+        
+        .activity-desc {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .activity-timestamp {
+            font-size: 12px;
+            color: var(--text-light);
+            white-space: nowrap;
+        }
+        
+        .action-buttons-v2 {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: var(--spacing-md);
+            margin: var(--spacing-md);
+        }
+        
+        .action-btn-v2 {
+            background: white;
+            border: 2px solid var(--pet-primary);
+            color: var(--pet-primary);
+            padding: var(--spacing-lg);
+            border-radius: var(--radius-lg);
+            text-align: center;
+            font-weight: bold;
+            transition: all 0.3s ease;
+            cursor: pointer;
+        }
+        
+        .action-btn-v2:hover {
+            background: var(--pet-primary);
+            color: white;
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(255, 138, 128, 0.3);
+        }
+        
+        .btn-icon {
+            font-size: 24px;
+            margin-bottom: var(--spacing-sm);
+        }
+    </style>
+</head>
+<body>
+    <div class="container dashboard-v2-container">
+        <!-- 英雄卡片 -->
+        <div class="hero-card">
+            <div class="hero-content">
+                <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K" 
+                     alt="小橘" class="hero-avatar">
+                <div class="hero-info">
+                    <h1 class="hero-name">小橘</h1>
+                    <p class="hero-details">橘猫 · 公 · 2岁3个月</p>
+                    <div class="hero-stats">
+                        <div class="hero-stat">
+                            <div class="hero-stat-value">645</div>
+                            <div class="hero-stat-label">陪伴天数</div>
+                        </div>
+                        <div class="hero-stat">
+                            <div class="hero-stat-value">85</div>
+                            <div class="hero-stat-label">健康评分</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 仪表盘网格 -->
+        <div class="dashboard-grid">
+            <!-- 体重卡片 -->
+            <div class="dashboard-card">
+                <div class="card-header">
+                    <span class="card-title">体重</span>
+                    <div class="card-icon icon-weight">⚖️</div>
+                </div>
+                <div class="metric-display">
+                    <div class="metric-value-large">
+                        4.2<span class="metric-unit">kg</span>
+                    </div>
+                    <div class="metric-change change-positive">
+                        <span>↗</span>
+                        <span>+0.1kg 本周</span>
+                    </div>
+                    <div class="mini-chart">
+                        <div class="chart-line"></div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 活动卡片 -->
+            <div class="dashboard-card">
+                <div class="card-header">
+                    <span class="card-title">活动量</span>
+                    <div class="card-icon icon-activity">🏃</div>
+                </div>
+                <div class="metric-display">
+                    <div class="metric-value-large">
+                        78<span class="metric-unit">%</span>
+                    </div>
+                    <div class="metric-change change-positive">
+                        <span>↗</span>
+                        <span>+5% 昨日</span>
+                    </div>
+                    <div class="mini-chart">
+                        <div class="chart-line" style="clip-path: polygon(0 60%, 25% 40%, 50% 50%, 75% 30%, 100% 25%, 100% 100%, 0 100%);"></div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 食欲卡片 -->
+            <div class="dashboard-card">
+                <div class="card-header">
+                    <span class="card-title">食欲</span>
+                    <div class="card-icon icon-food">🍽️</div>
+                </div>
+                <div class="metric-display">
+                    <div class="metric-value-large">
+                        92<span class="metric-unit">%</span>
+                    </div>
+                    <div class="metric-change change-negative">
+                        <span>↘</span>
+                        <span>-3% 本周</span>
+                    </div>
+                    <div class="mini-chart">
+                        <div class="chart-line" style="clip-path: polygon(0 40%, 25% 30%, 50% 35%, 75% 45%, 100% 50%, 100% 100%, 0 100%);"></div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 睡眠卡片 -->
+            <div class="dashboard-card">
+                <div class="card-header">
+                    <span class="card-title">睡眠</span>
+                    <div class="card-icon icon-sleep">😴</div>
+                </div>
+                <div class="metric-display">
+                    <div class="metric-value-large">
+                        14<span class="metric-unit">h</span>
+                    </div>
+                    <div class="metric-change change-neutral">
+                        <span>→</span>
+                        <span>正常范围</span>
+                    </div>
+                    <div class="mini-chart">
+                        <div class="chart-line" style="clip-path: polygon(0 50%, 25% 45%, 50% 50%, 75% 48%, 100% 52%, 100% 100%, 0 100%);"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 健康概览卡片 -->
+        <div class="dashboard-grid">
+            <div class="full-width-card">
+                <div class="card-header">
+                    <span class="card-title">健康状态概览</span>
+                    <div class="card-icon" style="background: linear-gradient(135deg, var(--pet-secondary), var(--pet-accent)); color: white;">📊</div>
+                </div>
+                
+                <div class="health-overview">
+                    <div class="health-metric">
+                        <div class="health-circle-v2 circle-85">
+                            <div class="health-value">85</div>
+                        </div>
+                        <div class="health-name">综合健康</div>
+                    </div>
+                    <div class="health-metric">
+                        <div class="health-circle-v2 circle-90">
+                            <div class="health-value">90</div>
+                        </div>
+                        <div class="health-name">疫苗状态</div>
+                    </div>
+                    <div class="health-metric">
+                        <div class="health-circle-v2 circle-70">
+                            <div class="health-value">70</div>
+                        </div>
+                        <div class="health-name">驱虫状态</div>
+                    </div>
+                    <div class="health-metric">
+                        <div class="health-circle-v2 circle-92">
+                            <div class="health-value">92</div>
+                        </div>
+                        <div class="health-name">营养状态</div>
+                    </div>
+                </div>
+                
+                <div class="recent-activities">
+                    <h3 style="margin-bottom: var(--spacing-md); color: var(--text-primary); font-weight: bold;">最近活动</h3>
+                    <div class="activity-list">
+                        <div class="activity-item-v2">
+                            <div class="activity-icon-v2">⚖️</div>
+                            <div class="activity-details">
+                                <div class="activity-name">体重记录</div>
+                                <div class="activity-desc">今天体重4.2kg，比上周增加了0.1kg</div>
+                            </div>
+                            <div class="activity-timestamp">2小时前</div>
+                        </div>
+                        
+                        <div class="activity-item-v2">
+                            <div class="activity-icon-v2" style="background: var(--pet-secondary);">💉</div>
+                            <div class="activity-details">
+                                <div class="activity-name">疫苗接种</div>
+                                <div class="activity-desc">完成了狂犬疫苗第二针接种</div>
+                            </div>
+                            <div class="activity-timestamp">1天前</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 操作按钮 -->
+        <div class="action-buttons-v2">
+            <div class="action-btn-v2" onclick="interactions.handleButtonClick('addRecord')">
+                <div class="btn-icon">📝</div>
+                <div>添加记录</div>
+            </div>
+            <div class="action-btn-v2" onclick="interactions.handleButtonClick('aiChat')">
+                <div class="btn-icon">💬</div>
+                <div>AI助手</div>
+            </div>
+            <div class="action-btn-v2" onclick="interactions.handleButtonClick('healthChart')">
+                <div class="btn-icon">📊</div>
+                <div>健康报告</div>
+            </div>
+            <div class="action-btn-v2" onclick="interactions.handleButtonClick('timeline')">
+                <div class="btn-icon">⏰</div>
+                <div>成长时光</div>
+            </div>
+        </div>
+    </div>
+    
+    <script src="assets/js/common.js"></script>
+    <script>
+        // 卡片仪表盘式 V2 特有交互
+        document.addEventListener('DOMContentLoaded', function() {
+            // 卡片入场动画
+            const cards = document.querySelectorAll('.dashboard-card, .full-width-card');
+            cards.forEach((card, index) => {
+                card.style.opacity = '0';
+                card.style.transform = 'translateY(30px)';
+                
+                setTimeout(() => {
+                    card.style.transition = 'all 0.6s ease';
+                    card.style.opacity = '1';
+                    card.style.transform = 'translateY(0)';
+                }, index * 150);
+            });
+            
+            // 数值动画
+            const metricValues = document.querySelectorAll('.metric-value-large');
+            metricValues.forEach(value => {
+                const text = value.textContent;
+                const number = parseFloat(text);
+                const unit = text.replace(number.toString(), '');
+                
+                let current = 0;
+                const increment = number / 30;
+                
+                const timer = setInterval(() => {
+                    current += increment;
+                    if (current >= number) {
+                        current = number;
+                        clearInterval(timer);
+                    }
+                    
+                    if (unit.includes('%') || unit.includes('h')) {
+                        value.innerHTML = Math.round(current) + `<span class="metric-unit">${unit}</span>`;
+                    } else {
+                        value.innerHTML = current.toFixed(1) + `<span class="metric-unit">${unit}</span>`;
+                    }
+                }, 50);
+            });
+            
+            // 健康圆环动画
+            const healthCircles = document.querySelectorAll('.health-circle-v2');
+            healthCircles.forEach((circle, index) => {
+                setTimeout(() => {
+                    circle.style.animation = 'scaleIn 0.8s ease forwards';
+                }, index * 100);
+            });
+            
+            console.log('卡片仪表盘式 V2 原型已加载');
+        });
+        
+        // 添加缩放动画
+        const style = document.createElement('style');
+        style.textContent = `
+            @keyframes scaleIn {
+                from {
+                    transform: scale(0);
+                    opacity: 0;
+                }
+                to {
+                    transform: scale(1);
+                    opacity: 1;
+                }
+            }
+            
+            @keyframes float {
+                0%, 100% { transform: translateX(0) translateY(0); }
+                50% { transform: translateX(-10px) translateY(-10px); }
+            }
+        `;
+        document.head.appendChild(style);
+    </script>
+</body>
+</html>
diff --git a/prototypes/pet-detail/pet-detail-prototype-12.html b/prototypes/pet-detail/pet-detail-prototype-12.html
new file mode 100644
index 0000000..2704325
--- /dev/null
+++ b/prototypes/pet-detail/pet-detail-prototype-12.html
@@ -0,0 +1,613 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>宠物详情 - 卡片仪表盘式 V3</title>
+    <link rel="stylesheet" href="assets/css/common.css">
+    <style>
+        /* 卡片仪表盘式 V3 特有样式 - 侧重层次感和深度 */
+        .dashboard-v3-container {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: var(--spacing-md);
+        }
+        
+        .profile-card {
+            background: rgba(255,255,255,0.95);
+            backdrop-filter: blur(20px);
+            border-radius: var(--radius-xl);
+            padding: var(--spacing-xl);
+            margin-bottom: var(--spacing-lg);
+            box-shadow: 0 25px 50px rgba(0,0,0,0.15);
+            border: 1px solid rgba(255,255,255,0.2);
+            position: relative;
+        }
+        
+        .profile-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: linear-gradient(90deg, var(--pet-primary), var(--pet-accent), var(--pet-secondary));
+            border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+        }
+        
+        .profile-header {
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-lg);
+            margin-bottom: var(--spacing-lg);
+        }
+        
+        .profile-avatar {
+            width: 100px;
+            height: 100px;
+            border-radius: var(--radius-round);
+            border: 4px solid var(--pet-primary);
+            box-shadow: 0 15px 35px rgba(255, 138, 128, 0.4);
+            position: relative;
+        }
+        
+        .profile-avatar::after {
+            content: '🏆';
+            position: absolute;
+            top: -10px;
+            right: -10px;
+            background: var(--pet-warning);
+            width: 30px;
+            height: 30px;
+            border-radius: var(--radius-round);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+        }
+        
+        .profile-details {
+            flex: 1;
+        }
+        
+        .profile-name {
+            font-size: 28px;
+            font-weight: bold;
+            color: var(--text-primary);
+            margin-bottom: var(--spacing-xs);
+        }
+        
+        .profile-subtitle {
+            color: var(--text-secondary);
+            margin-bottom: var(--spacing-md);
+        }
+        
+        .profile-badges {
+            display: flex;
+            gap: var(--spacing-sm);
+            flex-wrap: wrap;
+        }
+        
+        .badge {
+            background: linear-gradient(135deg, var(--pet-accent), var(--pet-secondary));
+            color: white;
+            padding: 4px 12px;
+            border-radius: 20px;
+            font-size: 12px;
+            font-weight: bold;
+            box-shadow: 0 4px 12px rgba(100, 181, 246, 0.3);
+        }
+        
+        .metrics-container {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: var(--spacing-lg);
+            margin-bottom: var(--spacing-lg);
+        }
+        
+        .metric-card-v3 {
+            background: rgba(255,255,255,0.9);
+            backdrop-filter: blur(15px);
+            border-radius: var(--radius-lg);
+            padding: var(--spacing-lg);
+            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
+            border: 1px solid rgba(255,255,255,0.3);
+            position: relative;
+            overflow: hidden;
+            transition: all 0.3s ease;
+        }
+        
+        .metric-card-v3:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 45px rgba(0,0,0,0.15);
+        }
+        
+        .metric-card-v3::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 3px;
+        }
+        
+        .metric-card-v3.weight::before {
+            background: linear-gradient(90deg, #FF6B6B, #FF8E8E);
+        }
+        
+        .metric-card-v3.activity::before {
+            background: linear-gradient(90deg, #4ECDC4, #44A08D);
+        }
+        
+        .metric-card-v3.food::before {
+            background: linear-gradient(90deg, #45B7D1, #96CEB4);
+        }
+        
+        .metric-card-v3.sleep::before {
+            background: linear-gradient(90deg, #A8E6CF, #DCEDC1);
+        }
+        
+        .metric-header-v3 {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: var(--spacing-lg);
+        }
+        
+        .metric-title-v3 {
+            font-weight: bold;
+            color: var(--text-primary);
+            font-size: 16px;
+        }
+        
+        .metric-icon-v3 {
+            width: 45px;
+            height: 45px;
+            border-radius: var(--radius-md);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 22px;
+            color: white;
+            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
+        }
+        
+        .icon-weight-v3 {
+            background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
+        }
+        
+        .icon-activity-v3 {
+            background: linear-gradient(135deg, #4ECDC4, #44A08D);
+        }
+        
+        .icon-food-v3 {
+            background: linear-gradient(135deg, #45B7D1, #96CEB4);
+        }
+        
+        .icon-sleep-v3 {
+            background: linear-gradient(135deg, #A8E6CF, #DCEDC1);
+        }
+        
+        .metric-value-v3 {
+            font-size: 32px;
+            font-weight: bold;
+            color: var(--text-primary);
+            margin-bottom: var(--spacing-sm);
+            text-align: center;
+        }
+        
+        .metric-progress {
+            width: 100%;
+            height: 12px;
+            background: #E5E7EB;
+            border-radius: 6px;
+            overflow: hidden;
+            margin-bottom: var(--spacing-sm);
+        }
+        
+        .progress-bar-v3 {
+            height: 100%;
+            border-radius: 6px;
+            transition: width 1.5s ease;
+            position: relative;
+        }
+        
+        .progress-weight {
+            background: linear-gradient(90deg, #FF6B6B, #FF8E8E);
+        }
+        
+        .progress-activity {
+            background: linear-gradient(90deg, #4ECDC4, #44A08D);
+        }
+        
+        .progress-food {
+            background: linear-gradient(90deg, #45B7D1, #96CEB4);
+        }
+        
+        .progress-sleep {
+            background: linear-gradient(90deg, #A8E6CF, #DCEDC1);
+        }
+        
+        .metric-status {
+            text-align: center;
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .dashboard-summary {
+            background: rgba(255,255,255,0.95);
+            backdrop-filter: blur(20px);
+            border-radius: var(--radius-xl);
+            padding: var(--spacing-xl);
+            margin-bottom: var(--spacing-lg);
+            box-shadow: 0 25px 50px rgba(0,0,0,0.15);
+            border: 1px solid rgba(255,255,255,0.2);
+        }
+        
+        .summary-header {
+            text-align: center;
+            margin-bottom: var(--spacing-lg);
+        }
+        
+        .summary-title {
+            font-size: 20px;
+            font-weight: bold;
+            color: var(--text-primary);
+            margin-bottom: var(--spacing-sm);
+        }
+        
+        .overall-score {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 100px;
+            height: 100px;
+            border-radius: var(--radius-round);
+            background: conic-gradient(var(--pet-primary) 0deg, var(--pet-primary) 306deg, #E5E7EB 306deg);
+            margin: 0 auto var(--spacing-md);
+            position: relative;
+        }
+        
+        .overall-score::before {
+            content: '';
+            width: 70px;
+            height: 70px;
+            background: white;
+            border-radius: var(--radius-round);
+            position: absolute;
+        }
+        
+        .score-value {
+            position: relative;
+            z-index: 2;
+            font-size: 24px;
+            font-weight: bold;
+            color: var(--text-primary);
+        }
+        
+        .score-label {
+            color: var(--text-secondary);
+            font-size: 14px;
+        }
+        
+        .health-indicators {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: var(--spacing-md);
+            margin-top: var(--spacing-lg);
+        }
+        
+        .indicator {
+            text-align: center;
+            padding: var(--spacing-md);
+            background: rgba(255,255,255,0.5);
+            border-radius: var(--radius-md);
+            border: 1px solid rgba(255,255,255,0.3);
+        }
+        
+        .indicator-icon {
+            font-size: 24px;
+            margin-bottom: var(--spacing-sm);
+        }
+        
+        .indicator-value {
+            font-weight: bold;
+            color: var(--text-primary);
+            margin-bottom: var(--spacing-xs);
+        }
+        
+        .indicator-label {
+            font-size: 12px;
+            color: var(--text-secondary);
+        }
+        
+        .action-panel {
+            background: rgba(255,255,255,0.95);
+            backdrop-filter: blur(20px);
+            border-radius: var(--radius-xl);
+            padding: var(--spacing-lg);
+            box-shadow: 0 25px 50px rgba(0,0,0,0.15);
+            border: 1px solid rgba(255,255,255,0.2);
+        }
+        
+        .action-grid-v3 {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: var(--spacing-md);
+        }
+        
+        .action-item-v3 {
+            background: rgba(255,255,255,0.8);
+            border: 2px solid transparent;
+            border-radius: var(--radius-lg);
+            padding: var(--spacing-lg);
+            text-align: center;
+            transition: all 0.3s ease;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .action-item-v3::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
+            transition: left 0.5s ease;
+        }
+        
+        .action-item-v3:hover {
+            border-color: var(--pet-primary);
+            transform: translateY(-3px);
+            box-shadow: 0 15px 35px rgba(255, 138, 128, 0.3);
+        }
+        
+        .action-item-v3:hover::before {
+            left: 100%;
+        }
+        
+        .action-icon-v3 {
+            font-size: 28px;
+            margin-bottom: var(--spacing-md);
+        }
+        
+        .action-title-v3 {
+            font-weight: bold;
+            color: var(--text-primary);
+            margin-bottom: var(--spacing-xs);
+        }
+        
+        .action-desc {
+            font-size: 12px;
+            color: var(--text-light);
+        }
+    </style>
+</head>
+<body>
+    <div class="container dashboard-v3-container">
+        <!-- 个人资料卡片 -->
+        <div class="profile-card">
+            <div class="profile-header">
+                <div class="profile-avatar">
+                    <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K" 
+                         alt="小橘" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
+                </div>
+                <div class="profile-details">
+                    <h1 class="profile-name">小橘</h1>
+                    <p class="profile-subtitle">橘猫 · 公 · 2岁3个月 · 陪伴645天</p>
+                    <div class="profile-badges">
+                        <span class="badge">健康宝宝</span>
+                        <span class="badge">活泼可爱</span>
+                        <span class="badge">疫苗完成</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 指标卡片网格 -->
+        <div class="metrics-container">
+            <div class="metric-card-v3 weight">
+                <div class="metric-header-v3">
+                    <span class="metric-title-v3">体重监测</span>
+                    <div class="metric-icon-v3 icon-weight-v3">⚖️</div>
+                </div>
+                <div class="metric-value-v3">4.2kg</div>
+                <div class="metric-progress">
+                    <div class="progress-bar-v3 progress-weight" style="width: 84%;"></div>
+                </div>
+                <div class="metric-status">健康范围内 (+0.1kg)</div>
+            </div>
+            
+            <div class="metric-card-v3 activity">
+                <div class="metric-header-v3">
+                    <span class="metric-title-v3">活动指数</span>
+                    <div class="metric-icon-v3 icon-activity-v3">🏃</div>
+                </div>
+                <div class="metric-value-v3">78%</div>
+                <div class="metric-progress">
+                    <div class="progress-bar-v3 progress-activity" style="width: 78%;"></div>
+                </div>
+                <div class="metric-status">活跃状态 (+5%)</div>
+            </div>
+            
+            <div class="metric-card-v3 food">
+                <div class="metric-header-v3">
+                    <span class="metric-title-v3">食欲状态</span>
+                    <div class="metric-icon-v3 icon-food-v3">🍽️</div>
+                </div>
+                <div class="metric-value-v3">92%</div>
+                <div class="metric-progress">
+                    <div class="progress-bar-v3 progress-food" style="width: 92%;"></div>
+                </div>
+                <div class="metric-status">食欲旺盛 (-3%)</div>
+            </div>
+            
+            <div class="metric-card-v3 sleep">
+                <div class="metric-header-v3">
+                    <span class="metric-title-v3">睡眠质量</span>
+                    <div class="metric-icon-v3 icon-sleep-v3">😴</div>
+                </div>
+                <div class="metric-value-v3">14h</div>
+                <div class="metric-progress">
+                    <div class="progress-bar-v3 progress-sleep" style="width: 87%;"></div>
+                </div>
+                <div class="metric-status">睡眠充足</div>
+            </div>
+        </div>
+        
+        <!-- 健康总结仪表盘 -->
+        <div class="dashboard-summary">
+            <div class="summary-header">
+                <h2 class="summary-title">健康状态总览</h2>
+                <div class="overall-score">
+                    <div class="score-value">85</div>
+                </div>
+                <div class="score-label">综合健康评分</div>
+            </div>
+            
+            <div class="health-indicators">
+                <div class="indicator">
+                    <div class="indicator-icon">💉</div>
+                    <div class="indicator-value">完成</div>
+                    <div class="indicator-label">疫苗状态</div>
+                </div>
+                <div class="indicator">
+                    <div class="indicator-icon">🐛</div>
+                    <div class="indicator-value">需要</div>
+                    <div class="indicator-label">驱虫提醒</div>
+                </div>
+                <div class="indicator">
+                    <div class="indicator-icon">🦷</div>
+                    <div class="indicator-value">良好</div>
+                    <div class="indicator-label">牙齿健康</div>
+                </div>
+                <div class="indicator">
+                    <div class="indicator-icon">👁️</div>
+                    <div class="indicator-value">正常</div>
+                    <div class="indicator-label">眼部检查</div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 操作面板 -->
+        <div class="action-panel">
+            <div class="action-grid-v3">
+                <div class="action-item-v3" onclick="interactions.handleButtonClick('addRecord')">
+                    <div class="action-icon-v3">📝</div>
+                    <div class="action-title-v3">记录数据</div>
+                    <div class="action-desc">添加健康记录</div>
+                </div>
+                
+                <div class="action-item-v3" onclick="interactions.handleButtonClick('aiChat')">
+                    <div class="action-icon-v3">💬</div>
+                    <div class="action-title-v3">AI咨询</div>
+                    <div class="action-desc">智能健康建议</div>
+                </div>
+                
+                <div class="action-item-v3" onclick="interactions.handleButtonClick('healthChart')">
+                    <div class="action-icon-v3">📊</div>
+                    <div class="action-title-v3">详细报告</div>
+                    <div class="action-desc">查看趋势分析</div>
+                </div>
+                
+                <div class="action-item-v3" onclick="interactions.handleButtonClick('timeline')">
+                    <div class="action-icon-v3">⏰</div>
+                    <div class="action-title-v3">成长记录</div>
+                    <div class="action-desc">时间轴展示</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <script src="assets/js/common.js"></script>
+    <script>
+        // 卡片仪表盘式 V3 特有交互
+        document.addEventListener('DOMContentLoaded', function() {
+            // 卡片层叠入场动画
+            const cards = document.querySelectorAll('.profile-card, .metric-card-v3, .dashboard-summary, .action-panel');
+            cards.forEach((card, index) => {
+                card.style.opacity = '0';
+                card.style.transform = 'translateY(50px) scale(0.9)';
+                
+                setTimeout(() => {
+                    card.style.transition = 'all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
+                    card.style.opacity = '1';
+                    card.style.transform = 'translateY(0) scale(1)';
+                }, index * 200);
+            });
+            
+            // 进度条动画
+            setTimeout(() => {
+                const progressBars = document.querySelectorAll('.progress-bar-v3');
+                progressBars.forEach((bar, index) => {
+                    const width = bar.style.width;
+                    bar.style.width = '0%';
+                    
+                    setTimeout(() => {
+                        bar.style.width = width;
+                    }, index * 300);
+                });
+            }, 1000);
+            
+            // 整体评分圆环动画
+            setTimeout(() => {
+                const overallScore = document.querySelector('.overall-score');
+                overallScore.style.animation = 'rotateScale 1.2s ease forwards';
+            }, 1500);
+            
+            // 指标数值动画
+            const metricValues = document.querySelectorAll('.metric-value-v3');
+            metricValues.forEach((value, index) => {
+                const text = value.textContent;
+                const number = parseFloat(text);
+                const unit = text.replace(number.toString(), '');
+                
+                setTimeout(() => {
+                    let current = 0;
+                    const increment = number / 25;
+                    
+                    const timer = setInterval(() => {
+                        current += increment;
+                        if (current >= number) {
+                            current = number;
+                            clearInterval(timer);
+                        }
+                        
+                        if (unit.includes('%') || unit.includes('h')) {
+                            value.textContent = Math.round(current) + unit;
+                        } else {
+                            value.textContent = current.toFixed(1) + unit;
+                        }
+                    }, 40);
+                }, index * 400);
+            });
+            
+            console.log('卡片仪表盘式 V3 原型已加载');
+        });
+        
+        // 添加动画样式
+        const style = document.createElement('style');
+        style.textContent = `
+            @keyframes rotateScale {
+                0% {
+                    transform: rotate(-180deg) scale(0.5);
+                    opacity: 0;
+                }
+                50% {
+                    transform: rotate(-90deg) scale(0.8);
+                    opacity: 0.7;
+                }
+                100% {
+                    transform: rotate(0deg) scale(1);
+                    opacity: 1;
+                }
+            }
+        `;
+        document.head.appendChild(style);
+    </script>
+</body>
+</html>
diff --git a/prototypes/pet-detail/pet-detail-prototype-13.html b/prototypes/pet-detail/pet-detail-prototype-13.html
new file mode 100644
index 0000000..e410385
--- /dev/null
+++ b/prototypes/pet-detail/pet-detail-prototype-13.html
@@ -0,0 +1,712 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>宠物详情 - 卡片仪表盘式 V4</title>
+    <link rel="stylesheet" href="assets/css/common.css">
+    <style>
+        /* 卡片仪表盘式 V4 特有样式 - 侧重简洁现代风格 */
+        .dashboard-v4-container {
+            background: #FAFBFC;
+            min-height: 100vh;
+        }
+        
+        .header-section {
+            background: white;
+            padding: var(--spacing-xl);
+            margin: var(--spacing-md);
+            border-radius: var(--radius-xl);
+            box-shadow: 0 2px 20px rgba(0,0,0,0.06);
+            border: 1px solid #F1F3F4;
+        }
+        
+        .pet-profile {
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-lg);
+            margin-bottom: var(--spacing-lg);
+        }
+        
+        .pet-avatar-v4 {
+            width: 90px;
+            height: 90px;
+            border-radius: var(--radius-xl);
+            border: 3px solid var(--pet-primary);
+            box-shadow: 0 8px 25px rgba(255, 138, 128, 0.25);
+        }
+        
+        .pet-info-v4 {
+            flex: 1;
+        }
+        
+        .pet-name-v4 {
+            font-size: 24px;
+            font-weight: 700;
+            color: var(--text-primary);
+            margin-bottom: var(--spacing-xs);
+        }
+        
+        .pet-meta {
+            color: var(--text-secondary);
+            font-size: 14px;
+            margin-bottom: var(--spacing-sm);
+        }
+        
+        .status-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: var(--spacing-xs);
+            background: #E8F5E8;
+            color: #2E7D32;
+            padding: 4px 12px;
+            border-radius: 20px;
+            font-size: 12px;
+            font-weight: 600;
+        }
+        
+        .quick-metrics {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: var(--spacing-lg);
+            padding-top: var(--spacing-lg);
+            border-top: 1px solid #F1F3F4;
+        }
+        
+        .quick-metric {
+            text-align: center;
+        }
+        
+        .metric-number {
+            font-size: 20px;
+            font-weight: 700;
+            color: var(--text-primary);
+            margin-bottom: var(--spacing-xs);
+        }
+        
+        .metric-label {
+            font-size: 12px;
+            color: var(--text-light);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        
+        .dashboard-section {
+            margin: var(--spacing-md);
+        }
+        
+        .section-title {
+            font-size: 18px;
+            font-weight: 700;
+            color: var(--text-primary);
+            margin-bottom: var(--spacing-md);
+            padding-left: var(--spacing-sm);
+        }
+        
+        .metrics-grid-v4 {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: var(--spacing-md);
+            margin-bottom: var(--spacing-lg);
+        }
+        
+        .metric-card-v4 {
+            background: white;
+            border-radius: var(--radius-lg);
+            padding: var(--spacing-lg);
+            box-shadow: 0 2px 20px rgba(0,0,0,0.06);
+            border: 1px solid #F1F3F4;
+            transition: all 0.3s ease;
+            position: relative;
+        }
+        
+        .metric-card-v4:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 30px rgba(0,0,0,0.1);
+        }
+        
+        .metric-top {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            margin-bottom: var(--spacing-lg);
+        }
+        
+        .metric-info {
+            flex: 1;
+        }
+        
+        .metric-name {
+            font-size: 14px;
+            color: var(--text-secondary);
+            margin-bottom: var(--spacing-xs);
+            font-weight: 500;
+        }
+        
+        .metric-value-v4 {
+            font-size: 28px;
+            font-weight: 700;
+            color: var(--text-primary);
+        }
+        
+        .metric-unit-v4 {
+            font-size: 16px;
+            color: var(--text-light);
+            margin-left: 2px;
+        }
+        
+        .metric-icon-v4 {
+            width: 50px;
+            height: 50px;
+            border-radius: var(--radius-md);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 24px;
+            color: white;
+        }
+        
+        .icon-weight-v4 {
+            background: linear-gradient(135deg, #FF6B6B, #FF8A80);
+        }
+        
+        .icon-activity-v4 {
+            background: linear-gradient(135deg, #4CAF50, #81C784);
+        }
+        
+        .icon-food-v4 {
+            background: linear-gradient(135deg, #2196F3, #64B5F6);
+        }
+        
+        .icon-sleep-v4 {
+            background: linear-gradient(135deg, #9C27B0, #BA68C8);
+        }
+        
+        .metric-trend-v4 {
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-xs);
+            margin-top: var(--spacing-sm);
+        }
+        
+        .trend-indicator {
+            width: 20px;
+            height: 20px;
+            border-radius: var(--radius-round);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+            color: white;
+        }
+        
+        .trend-up {
+            background: #4CAF50;
+        }
+        
+        .trend-down {
+            background: #FF5722;
+        }
+        
+        .trend-stable {
+            background: #9E9E9E;
+        }
+        
+        .trend-text {
+            font-size: 12px;
+            color: var(--text-secondary);
+        }
+        
+        .progress-section {
+            margin-top: var(--spacing-md);
+        }
+        
+        .progress-label {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: var(--spacing-sm);
+        }
+        
+        .progress-name {
+            font-size: 12px;
+            color: var(--text-secondary);
+            font-weight: 500;
+        }
+        
+        .progress-percent {
+            font-size: 12px;
+            color: var(--text-primary);
+            font-weight: 600;
+        }
+        
+        .progress-track {
+            width: 100%;
+            height: 6px;
+            background: #F1F3F4;
+            border-radius: 3px;
+            overflow: hidden;
+        }
+        
+        .progress-fill-v4 {
+            height: 100%;
+            border-radius: 3px;
+            transition: width 1.2s ease;
+        }
+        
+        .progress-weight-v4 {
+            background: linear-gradient(90deg, #FF6B6B, #FF8A80);
+        }
+        
+        .progress-activity-v4 {
+            background: linear-gradient(90deg, #4CAF50, #81C784);
+        }
+        
+        .progress-food-v4 {
+            background: linear-gradient(90deg, #2196F3, #64B5F6);
+        }
+        
+        .progress-sleep-v4 {
+            background: linear-gradient(90deg, #9C27B0, #BA68C8);
+        }
+        
+        .health-summary {
+            background: white;
+            border-radius: var(--radius-lg);
+            padding: var(--spacing-xl);
+            box-shadow: 0 2px 20px rgba(0,0,0,0.06);
+            border: 1px solid #F1F3F4;
+            margin-bottom: var(--spacing-lg);
+        }
+        
+        .summary-score {
+            text-align: center;
+            margin-bottom: var(--spacing-lg);
+        }
+        
+        .score-circle {
+            width: 120px;
+            height: 120px;
+            border-radius: var(--radius-round);
+            background: conic-gradient(var(--pet-primary) 0deg, var(--pet-primary) 306deg, #F1F3F4 306deg);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto var(--spacing-md);
+            position: relative;
+        }
+        
+        .score-circle::before {
+            content: '';
+            width: 90px;
+            height: 90px;
+            background: white;
+            border-radius: var(--radius-round);
+            position: absolute;
+        }
+        
+        .score-number {
+            position: relative;
+            z-index: 2;
+            font-size: 32px;
+            font-weight: 700;
+            color: var(--text-primary);
+        }
+        
+        .score-description {
+            color: var(--text-secondary);
+            font-size: 14px;
+        }
+        
+        .health-items {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: var(--spacing-lg);
+        }
+        
+        .health-item-v4 {
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-md);
+        }
+        
+        .health-icon {
+            width: 40px;
+            height: 40px;
+            border-radius: var(--radius-md);
+            background: #F8F9FA;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+        }
+        
+        .health-details {
+            flex: 1;
+        }
+        
+        .health-name {
+            font-weight: 600;
+            color: var(--text-primary);
+            margin-bottom: 2px;
+        }
+        
+        .health-status {
+            font-size: 12px;
+            color: var(--text-secondary);
+        }
+        
+        .actions-v4 {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: var(--spacing-md);
+        }
+        
+        .action-button-v4 {
+            background: white;
+            border: 2px solid #F1F3F4;
+            border-radius: var(--radius-lg);
+            padding: var(--spacing-lg);
+            text-align: center;
+            transition: all 0.3s ease;
+            cursor: pointer;
+        }
+        
+        .action-button-v4:hover {
+            border-color: var(--pet-primary);
+            background: #FFF8F7;
+            transform: translateY(-1px);
+        }
+        
+        .action-icon-v4 {
+            font-size: 28px;
+            margin-bottom: var(--spacing-md);
+        }
+        
+        .action-title-v4 {
+            font-weight: 600;
+            color: var(--text-primary);
+            margin-bottom: var(--spacing-xs);
+        }
+        
+        .action-subtitle-v4 {
+            font-size: 12px;
+            color: var(--text-light);
+        }
+    </style>
+</head>
+<body>
+    <div class="container dashboard-v4-container">
+        <!-- 头部信息区域 -->
+        <div class="header-section">
+            <div class="pet-profile">
+                <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K" 
+                     alt="小橘" class="pet-avatar-v4">
+                <div class="pet-info-v4">
+                    <h1 class="pet-name-v4">小橘</h1>
+                    <p class="pet-meta">橘猫 · 公 · 2岁3个月 · 陪伴645天</p>
+                    <div class="status-badge">
+                        <span>●</span>
+                        <span>健康状态良好</span>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="quick-metrics">
+                <div class="quick-metric">
+                    <div class="metric-number">4.2kg</div>
+                    <div class="metric-label">当前体重</div>
+                </div>
+                <div class="quick-metric">
+                    <div class="metric-number">85分</div>
+                    <div class="metric-label">健康评分</div>
+                </div>
+                <div class="quick-metric">
+                    <div class="metric-number">127条</div>
+                    <div class="metric-label">记录总数</div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 仪表盘区域 -->
+        <div class="dashboard-section">
+            <h2 class="section-title">健康指标</h2>
+            
+            <div class="metrics-grid-v4">
+                <!-- 体重指标 -->
+                <div class="metric-card-v4">
+                    <div class="metric-top">
+                        <div class="metric-info">
+                            <div class="metric-name">体重</div>
+                            <div class="metric-value-v4">
+                                4.2<span class="metric-unit-v4">kg</span>
+                            </div>
+                        </div>
+                        <div class="metric-icon-v4 icon-weight-v4">⚖️</div>
+                    </div>
+                    
+                    <div class="metric-trend-v4">
+                        <div class="trend-indicator trend-up">↗</div>
+                        <span class="trend-text">比上周增加 0.1kg</span>
+                    </div>
+                    
+                    <div class="progress-section">
+                        <div class="progress-label">
+                            <span class="progress-name">健康范围</span>
+                            <span class="progress-percent">84%</span>
+                        </div>
+                        <div class="progress-track">
+                            <div class="progress-fill-v4 progress-weight-v4" style="width: 84%;"></div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- 活动指标 -->
+                <div class="metric-card-v4">
+                    <div class="metric-top">
+                        <div class="metric-info">
+                            <div class="metric-name">活动量</div>
+                            <div class="metric-value-v4">
+                                78<span class="metric-unit-v4">%</span>
+                            </div>
+                        </div>
+                        <div class="metric-icon-v4 icon-activity-v4">🏃</div>
+                    </div>
+                    
+                    <div class="metric-trend-v4">
+                        <div class="trend-indicator trend-up">↗</div>
+                        <span class="trend-text">比昨日增加 5%</span>
+                    </div>
+                    
+                    <div class="progress-section">
+                        <div class="progress-label">
+                            <span class="progress-name">活跃度</span>
+                            <span class="progress-percent">78%</span>
+                        </div>
+                        <div class="progress-track">
+                            <div class="progress-fill-v4 progress-activity-v4" style="width: 78%;"></div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- 食欲指标 -->
+                <div class="metric-card-v4">
+                    <div class="metric-top">
+                        <div class="metric-info">
+                            <div class="metric-name">食欲</div>
+                            <div class="metric-value-v4">
+                                92<span class="metric-unit-v4">%</span>
+                            </div>
+                        </div>
+                        <div class="metric-icon-v4 icon-food-v4">🍽️</div>
+                    </div>
+                    
+                    <div class="metric-trend-v4">
+                        <div class="trend-indicator trend-down">↘</div>
+                        <span class="trend-text">比上周减少 3%</span>
+                    </div>
+                    
+                    <div class="progress-section">
+                        <div class="progress-label">
+                            <span class="progress-name">食欲状态</span>
+                            <span class="progress-percent">92%</span>
+                        </div>
+                        <div class="progress-track">
+                            <div class="progress-fill-v4 progress-food-v4" style="width: 92%;"></div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- 睡眠指标 -->
+                <div class="metric-card-v4">
+                    <div class="metric-top">
+                        <div class="metric-info">
+                            <div class="metric-name">睡眠</div>
+                            <div class="metric-value-v4">
+                                14<span class="metric-unit-v4">h</span>
+                            </div>
+                        </div>
+                        <div class="metric-icon-v4 icon-sleep-v4">😴</div>
+                    </div>
+                    
+                    <div class="metric-trend-v4">
+                        <div class="trend-indicator trend-stable">→</div>
+                        <span class="trend-text">保持正常范围</span>
+                    </div>
+                    
+                    <div class="progress-section">
+                        <div class="progress-label">
+                            <span class="progress-name">睡眠质量</span>
+                            <span class="progress-percent">87%</span>
+                        </div>
+                        <div class="progress-track">
+                            <div class="progress-fill-v4 progress-sleep-v4" style="width: 87%;"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 健康总结 -->
+            <div class="health-summary">
+                <div class="summary-score">
+                    <div class="score-circle">
+                        <div class="score-number">85</div>
+                    </div>
+                    <div class="score-description">综合健康评分 - 良好状态</div>
+                </div>
+                
+                <div class="health-items">
+                    <div class="health-item-v4">
+                        <div class="health-icon">💉</div>
+                        <div class="health-details">
+                            <div class="health-name">疫苗接种</div>
+                            <div class="health-status">已完成，状态良好</div>
+                        </div>
+                    </div>
+                    
+                    <div class="health-item-v4">
+                        <div class="health-icon">🐛</div>
+                        <div class="health-details">
+                            <div class="health-name">驱虫治疗</div>
+                            <div class="health-status">需要更新，3个月前</div>
+                        </div>
+                    </div>
+                    
+                    <div class="health-item-v4">
+                        <div class="health-icon">🦷</div>
+                        <div class="health-details">
+                            <div class="health-name">牙齿健康</div>
+                            <div class="health-status">状态良好</div>
+                        </div>
+                    </div>
+                    
+                    <div class="health-item-v4">
+                        <div class="health-icon">👁️</div>
+                        <div class="health-details">
+                            <div class="health-name">眼部检查</div>
+                            <div class="health-status">正常，无异常</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 操作按钮 -->
+            <div class="actions-v4">
+                <div class="action-button-v4" onclick="interactions.handleButtonClick('addRecord')">
+                    <div class="action-icon-v4">📝</div>
+                    <div class="action-title-v4">添加记录</div>
+                    <div class="action-subtitle-v4">记录健康数据</div>
+                </div>
+                
+                <div class="action-button-v4" onclick="interactions.handleButtonClick('aiChat')">
+                    <div class="action-icon-v4">💬</div>
+                    <div class="action-title-v4">AI助手</div>
+                    <div class="action-subtitle-v4">智能健康咨询</div>
+                </div>
+                
+                <div class="action-button-v4" onclick="interactions.handleButtonClick('healthChart')">
+                    <div class="action-icon-v4">📊</div>
+                    <div class="action-title-v4">详细报告</div>
+                    <div class="action-subtitle-v4">查看趋势分析</div>
+                </div>
+                
+                <div class="action-button-v4" onclick="interactions.handleButtonClick('timeline')">
+                    <div class="action-icon-v4">⏰</div>
+                    <div class="action-title-v4">成长时光</div>
+                    <div class="action-subtitle-v4">时间轴记录</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <script src="assets/js/common.js"></script>
+    <script>
+        // 卡片仪表盘式 V4 特有交互
+        document.addEventListener('DOMContentLoaded', function() {
+            // 渐进式加载动画
+            const elements = document.querySelectorAll('.header-section, .metric-card-v4, .health-summary, .action-button-v4');
+            elements.forEach((element, index) => {
+                element.style.opacity = '0';
+                element.style.transform = 'translateY(20px)';
+                
+                setTimeout(() => {
+                    element.style.transition = 'all 0.5s ease';
+                    element.style.opacity = '1';
+                    element.style.transform = 'translateY(0)';
+                }, index * 100);
+            });
+            
+            // 进度条动画
+            setTimeout(() => {
+                const progressBars = document.querySelectorAll('.progress-fill-v4');
+                progressBars.forEach((bar, index) => {
+                    const width = bar.style.width;
+                    bar.style.width = '0%';
+                    
+                    setTimeout(() => {
+                        bar.style.width = width;
+                    }, index * 200);
+                });
+            }, 800);
+            
+            // 评分圆环动画
+            setTimeout(() => {
+                const scoreCircle = document.querySelector('.score-circle');
+                scoreCircle.style.animation = 'scoreReveal 1.5s ease forwards';
+            }, 1200);
+            
+            // 数值计数动画
+            const metricValues = document.querySelectorAll('.metric-value-v4');
+            metricValues.forEach((value, index) => {
+                const text = value.innerHTML;
+                const numberMatch = text.match(/[\d.]+/);
+                if (numberMatch) {
+                    const number = parseFloat(numberMatch[0]);
+                    const restText = text.replace(numberMatch[0], '');
+                    
+                    setTimeout(() => {
+                        let current = 0;
+                        const increment = number / 20;
+                        
+                        const timer = setInterval(() => {
+                            current += increment;
+                            if (current >= number) {
+                                current = number;
+                                clearInterval(timer);
+                            }
+                            
+                            if (restText.includes('%') || restText.includes('h')) {
+                                value.innerHTML = Math.round(current) + restText;
+                            } else {
+                                value.innerHTML = current.toFixed(1) + restText;
+                            }
+                        }, 50);
+                    }, index * 300);
+                }
+            });
+            
+            console.log('卡片仪表盘式 V4 原型已加载');
+        });
+        
+        // 添加动画样式
+        const style = document.createElement('style');
+        style.textContent = `
+            @keyframes scoreReveal {
+                0% {
+                    transform: scale(0.8) rotate(-90deg);
+                    opacity: 0;
+                }
+                50% {
+                    transform: scale(1.1) rotate(-45deg);
+                    opacity: 0.7;
+                }
+                100% {
+                    transform: scale(1) rotate(0deg);
+                    opacity: 1;
+                }
+            }
+        `;
+        document.head.appendChild(style);
+    </script>
+</body>
+</html>
diff --git a/prototypes/pet-detail/pet-detail-prototype-14.html b/prototypes/pet-detail/pet-detail-prototype-14.html
new file mode 100644
index 0000000..d433c39
--- /dev/null
+++ b/prototypes/pet-detail/pet-detail-prototype-14.html
@@ -0,0 +1,724 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>宠物详情 - 卡片仪表盘式 V5</title>
+    <link rel="stylesheet" href="assets/css/common.css">
+    <style>
+        /* 卡片仪表盘式 V5 - 基本信息卡片化，统计数据仪表盘化 */
+        .dashboard-v5-container {
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            min-height: 100vh;
+        }
+        
+        /* 基本信息卡片区域 */
+        .pet-info-card {
+            background: white;
+            border-radius: var(--radius-xl);
+            padding: var(--spacing-xl);
+            margin: var(--spacing-md);
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+            border: 1px solid rgba(255,255,255,0.8);
+        }
+        
+        .pet-header {
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-lg);
+            margin-bottom: var(--spacing-lg);
+            padding-bottom: var(--spacing-lg);
+            border-bottom: 2px solid #F8F9FA;
+        }
+        
+        .pet-avatar-v5 {
+            width: 100px;
+            height: 100px;
+            border-radius: var(--radius-xl);
+            border: 4px solid var(--pet-primary);
+            box-shadow: 0 8px 25px rgba(255, 138, 128, 0.3);
+            position: relative;
+        }
+        
+        .pet-avatar-v5::after {
+            content: '❤️';
+            position: absolute;
+            bottom: -5px;
+            right: -5px;
+            background: white;
+            width: 25px;
+            height: 25px;
+            border-radius: var(--radius-round);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+        }
+        
+        .pet-basic-info {
+            flex: 1;
+        }
+        
+        .pet-name-v5 {
+            font-size: 26px;
+            font-weight: bold;
+            color: var(--text-primary);
+            margin-bottom: var(--spacing-xs);
+        }
+        
+        .pet-breed-info {
+            color: var(--text-secondary);
+            font-size: 16px;
+            margin-bottom: var(--spacing-sm);
+        }
+        
+        .pet-tags {
+            display: flex;
+            gap: var(--spacing-sm);
+            flex-wrap: wrap;
+        }
+        
+        .pet-tag {
+            background: linear-gradient(135deg, var(--pet-accent), var(--pet-secondary));
+            color: white;
+            padding: 4px 10px;
+            border-radius: 15px;
+            font-size: 12px;
+            font-weight: 500;
+        }
+        
+        .info-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: var(--spacing-lg);
+        }
+        
+        .info-item-v5 {
+            background: #F8F9FA;
+            padding: var(--spacing-md);
+            border-radius: var(--radius-md);
+            border-left: 4px solid var(--pet-primary);
+        }
+        
+        .info-label-v5 {
+            font-size: 12px;
+            color: var(--text-light);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            margin-bottom: var(--spacing-xs);
+        }
+        
+        .info-value-v5 {
+            font-size: 16px;
+            font-weight: bold;
+            color: var(--text-primary);
+        }
+        
+        /* 统计数据仪表盘区域 */
+        .dashboard-section-v5 {
+            margin: var(--spacing-md);
+        }
+        
+        .section-header {
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-sm);
+            margin-bottom: var(--spacing-lg);
+            padding-left: var(--spacing-sm);
+        }
+        
+        .section-icon {
+            font-size: 24px;
+        }
+        
+        .section-title-v5 {
+            font-size: 20px;
+            font-weight: bold;
+            color: var(--text-primary);
+        }
+        
+        .dashboard-grid-v5 {
+            background: white;
+            border-radius: var(--radius-xl);
+            padding: var(--spacing-xl);
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+            border: 1px solid rgba(255,255,255,0.8);
+        }
+        
+        .metrics-overview {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: var(--spacing-lg);
+            margin-bottom: var(--spacing-xl);
+        }
+        
+        .metric-gauge {
+            text-align: center;
+            position: relative;
+        }
+        
+        .gauge-container {
+            width: 120px;
+            height: 120px;
+            margin: 0 auto var(--spacing-md);
+            position: relative;
+        }
+        
+        .gauge-bg {
+            width: 100%;
+            height: 100%;
+            border-radius: var(--radius-round);
+            background: conic-gradient(#E5E7EB 0deg, #E5E7EB 360deg);
+            position: relative;
+        }
+        
+        .gauge-fill {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border-radius: var(--radius-round);
+            transition: all 1.5s ease;
+        }
+        
+        .gauge-weight {
+            background: conic-gradient(var(--pet-primary) 0deg, var(--pet-primary) 302deg, transparent 302deg);
+        }
+        
+        .gauge-activity {
+            background: conic-gradient(var(--pet-secondary) 0deg, var(--pet-secondary) 281deg, transparent 281deg);
+        }
+        
+        .gauge-food {
+            background: conic-gradient(var(--pet-accent) 0deg, var(--pet-accent) 331deg, transparent 331deg);
+        }
+        
+        .gauge-sleep {
+            background: conic-gradient(var(--pet-warning) 0deg, var(--pet-warning) 313deg, transparent 313deg);
+        }
+        
+        .gauge-center {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 80px;
+            height: 80px;
+            background: white;
+            border-radius: var(--radius-round);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+        }
+        
+        .gauge-value {
+            font-size: 18px;
+            font-weight: bold;
+            color: var(--text-primary);
+        }
+        
+        .gauge-unit {
+            font-size: 10px;
+            color: var(--text-light);
+        }
+        
+        .gauge-label {
+            font-size: 14px;
+            font-weight: 600;
+            color: var(--text-primary);
+            margin-bottom: var(--spacing-xs);
+        }
+        
+        .gauge-status {
+            font-size: 12px;
+            color: var(--text-secondary);
+        }
+        
+        .health-dashboard {
+            background: #F8F9FA;
+            border-radius: var(--radius-lg);
+            padding: var(--spacing-lg);
+            margin-top: var(--spacing-xl);
+        }
+        
+        .dashboard-title {
+            text-align: center;
+            font-size: 18px;
+            font-weight: bold;
+            color: var(--text-primary);
+            margin-bottom: var(--spacing-lg);
+        }
+        
+        .health-score-display {
+            text-align: center;
+            margin-bottom: var(--spacing-lg);
+        }
+        
+        .health-score-circle {
+            width: 100px;
+            height: 100px;
+            border-radius: var(--radius-round);
+            background: conic-gradient(var(--pet-primary) 0deg, var(--pet-primary) 306deg, #E5E7EB 306deg);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto var(--spacing-md);
+            position: relative;
+        }
+        
+        .health-score-circle::before {
+            content: '';
+            width: 70px;
+            height: 70px;
+            background: white;
+            border-radius: var(--radius-round);
+            position: absolute;
+        }
+        
+        .health-score-number {
+            position: relative;
+            z-index: 2;
+            font-size: 24px;
+            font-weight: bold;
+            color: var(--text-primary);
+        }
+        
+        .health-score-text {
+            color: var(--text-secondary);
+            font-size: 14px;
+        }
+        
+        .health-indicators-grid {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: var(--spacing-md);
+        }
+        
+        .health-indicator-v5 {
+            text-align: center;
+            padding: var(--spacing-md);
+            background: white;
+            border-radius: var(--radius-md);
+            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+        }
+        
+        .indicator-icon-v5 {
+            font-size: 20px;
+            margin-bottom: var(--spacing-sm);
+        }
+        
+        .indicator-status {
+            font-size: 12px;
+            font-weight: 600;
+            margin-bottom: var(--spacing-xs);
+        }
+        
+        .status-good {
+            color: var(--pet-secondary);
+        }
+        
+        .status-warning {
+            color: var(--pet-warning);
+        }
+        
+        .indicator-name {
+            font-size: 10px;
+            color: var(--text-light);
+        }
+        
+        /* 最近记录卡片 */
+        .recent-records-card {
+            background: white;
+            border-radius: var(--radius-xl);
+            padding: var(--spacing-xl);
+            margin: var(--spacing-md);
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+            border: 1px solid rgba(255,255,255,0.8);
+        }
+        
+        .records-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: var(--spacing-lg);
+        }
+        
+        .records-title {
+            font-size: 18px;
+            font-weight: bold;
+            color: var(--text-primary);
+        }
+        
+        .view-all-btn {
+            color: var(--pet-primary);
+            font-size: 14px;
+            font-weight: 500;
+            text-decoration: none;
+        }
+        
+        .record-item-v5 {
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-md);
+            padding: var(--spacing-md);
+            background: #F8F9FA;
+            border-radius: var(--radius-md);
+            margin-bottom: var(--spacing-sm);
+            border-left: 4px solid var(--pet-accent);
+        }
+        
+        .record-icon-v5 {
+            width: 40px;
+            height: 40px;
+            border-radius: var(--radius-md);
+            background: var(--pet-accent);
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+        }
+        
+        .record-content-v5 {
+            flex: 1;
+        }
+        
+        .record-title-v5 {
+            font-weight: 600;
+            color: var(--text-primary);
+            margin-bottom: 2px;
+        }
+        
+        .record-desc-v5 {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .record-time-v5 {
+            font-size: 12px;
+            color: var(--text-light);
+            white-space: nowrap;
+        }
+        
+        /* 操作按钮卡片 */
+        .actions-card {
+            background: white;
+            border-radius: var(--radius-xl);
+            padding: var(--spacing-lg);
+            margin: var(--spacing-md);
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+            border: 1px solid rgba(255,255,255,0.8);
+        }
+        
+        .actions-grid-v5 {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: var(--spacing-md);
+        }
+        
+        .action-btn-v5 {
+            background: #F8F9FA;
+            border: 2px solid transparent;
+            border-radius: var(--radius-lg);
+            padding: var(--spacing-lg);
+            text-align: center;
+            transition: all 0.3s ease;
+            cursor: pointer;
+        }
+        
+        .action-btn-v5:hover {
+            border-color: var(--pet-primary);
+            background: white;
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(255, 138, 128, 0.2);
+        }
+        
+        .action-icon-v5 {
+            font-size: 28px;
+            margin-bottom: var(--spacing-md);
+        }
+        
+        .action-text-v5 {
+            font-weight: 600;
+            color: var(--text-primary);
+        }
+    </style>
+</head>
+<body>
+    <div class="container dashboard-v5-container">
+        <!-- 基本信息卡片 -->
+        <div class="pet-info-card">
+            <div class="pet-header">
+                <div class="pet-avatar-v5">
+                    <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K" 
+                         alt="小橘" style="width: 100%; height: 100%; object-fit: cover; border-radius: 16px;">
+                </div>
+                <div class="pet-basic-info">
+                    <h1 class="pet-name-v5">小橘</h1>
+                    <p class="pet-breed-info">橘猫 · 公 · 2岁3个月</p>
+                    <div class="pet-tags">
+                        <span class="pet-tag">活泼</span>
+                        <span class="pet-tag">粘人</span>
+                        <span class="pet-tag">健康</span>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="info-grid">
+                <div class="info-item-v5">
+                    <div class="info-label-v5">生日</div>
+                    <div class="info-value-v5">2022年3月15日</div>
+                </div>
+                <div class="info-item-v5">
+                    <div class="info-label-v5">到家日期</div>
+                    <div class="info-value-v5">2022年4月20日</div>
+                </div>
+                <div class="info-item-v5">
+                    <div class="info-label-v5">陪伴天数</div>
+                    <div class="info-value-v5">645天</div>
+                </div>
+                <div class="info-item-v5">
+                    <div class="info-label-v5">当前体重</div>
+                    <div class="info-value-v5">4.2kg</div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 统计数据仪表盘 -->
+        <div class="dashboard-section-v5">
+            <div class="section-header">
+                <span class="section-icon">📊</span>
+                <h2 class="section-title-v5">健康数据仪表盘</h2>
+            </div>
+            
+            <div class="dashboard-grid-v5">
+                <div class="metrics-overview">
+                    <!-- 体重仪表 -->
+                    <div class="metric-gauge">
+                        <div class="gauge-container">
+                            <div class="gauge-bg">
+                                <div class="gauge-fill gauge-weight"></div>
+                                <div class="gauge-center">
+                                    <div class="gauge-value">4.2</div>
+                                    <div class="gauge-unit">kg</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="gauge-label">体重监测</div>
+                        <div class="gauge-status">健康范围 84%</div>
+                    </div>
+                    
+                    <!-- 活动仪表 -->
+                    <div class="metric-gauge">
+                        <div class="gauge-container">
+                            <div class="gauge-bg">
+                                <div class="gauge-fill gauge-activity"></div>
+                                <div class="gauge-center">
+                                    <div class="gauge-value">78</div>
+                                    <div class="gauge-unit">%</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="gauge-label">活动指数</div>
+                        <div class="gauge-status">活跃状态</div>
+                    </div>
+                    
+                    <!-- 食欲仪表 -->
+                    <div class="metric-gauge">
+                        <div class="gauge-container">
+                            <div class="gauge-bg">
+                                <div class="gauge-fill gauge-food"></div>
+                                <div class="gauge-center">
+                                    <div class="gauge-value">92</div>
+                                    <div class="gauge-unit">%</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="gauge-label">食欲状态</div>
+                        <div class="gauge-status">食欲旺盛</div>
+                    </div>
+                    
+                    <!-- 睡眠仪表 -->
+                    <div class="metric-gauge">
+                        <div class="gauge-container">
+                            <div class="gauge-bg">
+                                <div class="gauge-fill gauge-sleep"></div>
+                                <div class="gauge-center">
+                                    <div class="gauge-value">14</div>
+                                    <div class="gauge-unit">h</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="gauge-label">睡眠时长</div>
+                        <div class="gauge-status">睡眠充足</div>
+                    </div>
+                </div>
+                
+                <!-- 健康总览仪表盘 -->
+                <div class="health-dashboard">
+                    <h3 class="dashboard-title">综合健康评估</h3>
+                    
+                    <div class="health-score-display">
+                        <div class="health-score-circle">
+                            <div class="health-score-number">85</div>
+                        </div>
+                        <div class="health-score-text">健康状态良好</div>
+                    </div>
+                    
+                    <div class="health-indicators-grid">
+                        <div class="health-indicator-v5">
+                            <div class="indicator-icon-v5">💉</div>
+                            <div class="indicator-status status-good">完成</div>
+                            <div class="indicator-name">疫苗</div>
+                        </div>
+                        <div class="health-indicator-v5">
+                            <div class="indicator-icon-v5">🐛</div>
+                            <div class="indicator-status status-warning">需要</div>
+                            <div class="indicator-name">驱虫</div>
+                        </div>
+                        <div class="health-indicator-v5">
+                            <div class="indicator-icon-v5">🦷</div>
+                            <div class="indicator-status status-good">良好</div>
+                            <div class="indicator-name">牙齿</div>
+                        </div>
+                        <div class="health-indicator-v5">
+                            <div class="indicator-icon-v5">👁️</div>
+                            <div class="indicator-status status-good">正常</div>
+                            <div class="indicator-name">眼部</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 最近记录卡片 -->
+        <div class="recent-records-card">
+            <div class="records-header">
+                <h3 class="records-title">最近记录</h3>
+                <a href="#" class="view-all-btn" onclick="interactions.handleButtonClick('viewRecords')">查看全部</a>
+            </div>
+            
+            <div class="record-item-v5">
+                <div class="record-icon-v5">⚖️</div>
+                <div class="record-content-v5">
+                    <div class="record-title-v5">体重记录</div>
+                    <div class="record-desc-v5">今天体重4.2kg，比上周增加了0.1kg</div>
+                </div>
+                <div class="record-time-v5">2小时前</div>
+            </div>
+            
+            <div class="record-item-v5">
+                <div class="record-icon-v5" style="background: var(--pet-secondary);">💉</div>
+                <div class="record-content-v5">
+                    <div class="record-title-v5">疫苗接种</div>
+                    <div class="record-desc-v5">完成了狂犬疫苗第二针接种</div>
+                </div>
+                <div class="record-time-v5">1天前</div>
+            </div>
+            
+            <div class="record-item-v5">
+                <div class="record-icon-v5" style="background: var(--pet-warning);">🛁</div>
+                <div class="record-content-v5">
+                    <div class="record-title-v5">洗澡护理</div>
+                    <div class="record-desc-v5">给小橘洗了澡，全程很乖没有挣扎</div>
+                </div>
+                <div class="record-time-v5">3天前</div>
+            </div>
+        </div>
+        
+        <!-- 操作按钮卡片 -->
+        <div class="actions-card">
+            <div class="actions-grid-v5">
+                <div class="action-btn-v5" onclick="interactions.handleButtonClick('addRecord')">
+                    <div class="action-icon-v5">📝</div>
+                    <div class="action-text-v5">添加记录</div>
+                </div>
+                <div class="action-btn-v5" onclick="interactions.handleButtonClick('aiChat')">
+                    <div class="action-icon-v5">💬</div>
+                    <div class="action-text-v5">AI助手</div>
+                </div>
+                <div class="action-btn-v5" onclick="interactions.handleButtonClick('healthChart')">
+                    <div class="action-icon-v5">📊</div>
+                    <div class="action-text-v5">健康报告</div>
+                </div>
+                <div class="action-btn-v5" onclick="interactions.handleButtonClick('timeline')">
+                    <div class="action-icon-v5">⏰</div>
+                    <div class="action-text-v5">成长时光</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <script src="assets/js/common.js"></script>
+    <script>
+        // 卡片仪表盘式 V5 特有交互
+        document.addEventListener('DOMContentLoaded', function() {
+            // 卡片入场动画
+            const cards = document.querySelectorAll('.pet-info-card, .dashboard-grid-v5, .recent-records-card, .actions-card');
+            cards.forEach((card, index) => {
+                card.style.opacity = '0';
+                card.style.transform = 'translateY(30px)';
+                
+                setTimeout(() => {
+                    card.style.transition = 'all 0.6s ease';
+                    card.style.opacity = '1';
+                    card.style.transform = 'translateY(0)';
+                }, index * 200);
+            });
+            
+            // 仪表盘动画
+            setTimeout(() => {
+                const gauges = document.querySelectorAll('.gauge-fill');
+                gauges.forEach((gauge, index) => {
+                    setTimeout(() => {
+                        gauge.style.animation = 'gaugeRotate 2s ease forwards';
+                    }, index * 300);
+                });
+            }, 800);
+            
+            // 健康评分动画
+            setTimeout(() => {
+                const healthScore = document.querySelector('.health-score-circle');
+                healthScore.style.animation = 'scoreAppear 1.5s ease forwards';
+            }, 1500);
+            
+            console.log('卡片仪表盘式 V5 原型已加载');
+        });
+        
+        // 添加动画样式
+        const style = document.createElement('style');
+        style.textContent = `
+            @keyframes gaugeRotate {
+                from {
+                    transform: rotate(-90deg);
+                    opacity: 0;
+                }
+                to {
+                    transform: rotate(0deg);
+                    opacity: 1;
+                }
+            }
+            
+            @keyframes scoreAppear {
+                0% {
+                    transform: scale(0.5);
+                    opacity: 0;
+                }
+                50% {
+                    transform: scale(1.1);
+                    opacity: 0.8;
+                }
+                100% {
+                    transform: scale(1);
+                    opacity: 1;
+                }
+            }
+        `;
+        document.head.appendChild(style);
+    </script>
+</body>
+</html>
diff --git a/prototypes/pet-detail/pet-detail-prototype-15.html b/prototypes/pet-detail/pet-detail-prototype-15.html
new file mode 100644
index 0000000..940af8e
--- /dev/null
+++ b/prototypes/pet-detail/pet-detail-prototype-15.html
@@ -0,0 +1,778 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>宠物详情 - 卡片仪表盘式 V6</title>
+    <link rel="stylesheet" href="assets/css/common.css">
+    <style>
+        /* 卡片仪表盘式 V6 - 温馨家庭风格，基本信息卡片化，数据可视化仪表盘 */
+        .dashboard-v6-container {
+            background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
+            min-height: 100vh;
+        }
+        
+        /* 宠物档案卡片 */
+        .pet-profile-card {
+            background: white;
+            border-radius: 20px;
+            padding: var(--spacing-xl);
+            margin: var(--spacing-md);
+            box-shadow: 0 15px 35px rgba(252, 182, 159, 0.3);
+            border: 2px solid rgba(255, 255, 255, 0.8);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .pet-profile-card::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            right: -50%;
+            width: 200%;
+            height: 200%;
+            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="1" fill="rgba(255,182,159,0.1)"/><circle cx="80" cy="60" r="1.5" fill="rgba(255,182,159,0.1)"/><path d="M10,80 Q20,70 30,80" stroke="rgba(255,182,159,0.1)" stroke-width="1" fill="none"/></svg>') repeat;
+            animation: float 15s infinite linear;
+        }
+        
+        .profile-content {
+            position: relative;
+            z-index: 2;
+        }
+        
+        .pet-intro {
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-lg);
+            margin-bottom: var(--spacing-xl);
+            padding-bottom: var(--spacing-lg);
+            border-bottom: 2px dashed #FFE4D6;
+        }
+        
+        .pet-avatar-v6 {
+            width: 110px;
+            height: 110px;
+            border-radius: 20px;
+            border: 4px solid var(--pet-primary);
+            box-shadow: 0 10px 30px rgba(255, 138, 128, 0.4);
+            position: relative;
+        }
+        
+        .pet-avatar-v6::after {
+            content: '🌟';
+            position: absolute;
+            top: -8px;
+            right: -8px;
+            background: var(--pet-warning);
+            width: 30px;
+            height: 30px;
+            border-radius: var(--radius-round);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+        }
+        
+        .pet-details {
+            flex: 1;
+        }
+        
+        .pet-name-v6 {
+            font-size: 28px;
+            font-weight: bold;
+            color: var(--text-primary);
+            margin-bottom: var(--spacing-xs);
+            font-family: 'Comic Sans MS', cursive, sans-serif;
+        }
+        
+        .pet-subtitle-v6 {
+            color: var(--text-secondary);
+            font-size: 16px;
+            margin-bottom: var(--spacing-md);
+        }
+        
+        .pet-personality {
+            display: flex;
+            gap: var(--spacing-sm);
+            flex-wrap: wrap;
+        }
+        
+        .personality-tag {
+            background: linear-gradient(135deg, #FFB6C1, #FFA07A);
+            color: white;
+            padding: 6px 12px;
+            border-radius: 20px;
+            font-size: 12px;
+            font-weight: 600;
+            box-shadow: 0 4px 12px rgba(255, 182, 159, 0.3);
+        }
+        
+        .basic-info-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: var(--spacing-md);
+        }
+        
+        .info-card {
+            background: linear-gradient(135deg, #FFF8F0, #FFEBCD);
+            padding: var(--spacing-md);
+            border-radius: 15px;
+            border: 2px solid #FFE4D6;
+            text-align: center;
+            transition: all 0.3s ease;
+        }
+        
+        .info-card:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 8px 20px rgba(255, 182, 159, 0.2);
+        }
+        
+        .info-icon {
+            font-size: 24px;
+            margin-bottom: var(--spacing-sm);
+        }
+        
+        .info-label-v6 {
+            font-size: 12px;
+            color: var(--text-light);
+            margin-bottom: var(--spacing-xs);
+            font-weight: 500;
+        }
+        
+        .info-value-v6 {
+            font-size: 16px;
+            font-weight: bold;
+            color: var(--text-primary);
+        }
+        
+        /* 数据仪表盘区域 */
+        .dashboard-panel {
+            background: white;
+            border-radius: 20px;
+            padding: var(--spacing-xl);
+            margin: var(--spacing-md);
+            box-shadow: 0 15px 35px rgba(252, 182, 159, 0.3);
+            border: 2px solid rgba(255, 255, 255, 0.8);
+        }
+        
+        .panel-header {
+            text-align: center;
+            margin-bottom: var(--spacing-xl);
+        }
+        
+        .panel-title {
+            font-size: 22px;
+            font-weight: bold;
+            color: var(--text-primary);
+            margin-bottom: var(--spacing-sm);
+            font-family: 'Comic Sans MS', cursive, sans-serif;
+        }
+        
+        .panel-subtitle {
+            color: var(--text-secondary);
+            font-size: 14px;
+        }
+        
+        .dashboard-metrics {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: var(--spacing-xl);
+            margin-bottom: var(--spacing-xl);
+        }
+        
+        .metric-widget {
+            text-align: center;
+        }
+        
+        .widget-container {
+            width: 140px;
+            height: 140px;
+            margin: 0 auto var(--spacing-md);
+            position: relative;
+        }
+        
+        .widget-bg {
+            width: 100%;
+            height: 100%;
+            border-radius: var(--radius-round);
+            background: #F0F0F0;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .widget-progress {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border-radius: var(--radius-round);
+            transition: all 2s ease;
+        }
+        
+        .progress-weight-v6 {
+            background: conic-gradient(#FF6B6B 0deg, #FF6B6B 302deg, transparent 302deg);
+        }
+        
+        .progress-activity-v6 {
+            background: conic-gradient(#4CAF50 0deg, #4CAF50 281deg, transparent 281deg);
+        }
+        
+        .progress-food-v6 {
+            background: conic-gradient(#2196F3 0deg, #2196F3 331deg, transparent 331deg);
+        }
+        
+        .progress-sleep-v6 {
+            background: conic-gradient(#9C27B0 0deg, #9C27B0 313deg, transparent 313deg);
+        }
+        
+        .widget-inner {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 100px;
+            height: 100px;
+            background: white;
+            border-radius: var(--radius-round);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 6px 20px rgba(0,0,0,0.1);
+        }
+        
+        .widget-value {
+            font-size: 20px;
+            font-weight: bold;
+            color: var(--text-primary);
+            margin-bottom: 2px;
+        }
+        
+        .widget-unit {
+            font-size: 12px;
+            color: var(--text-light);
+        }
+        
+        .widget-label {
+            font-size: 16px;
+            font-weight: 600;
+            color: var(--text-primary);
+            margin-bottom: var(--spacing-xs);
+        }
+        
+        .widget-description {
+            font-size: 12px;
+            color: var(--text-secondary);
+        }
+        
+        /* 健康总览 */
+        .health-overview-panel {
+            background: linear-gradient(135deg, #FFF8F0, #FFEBCD);
+            border-radius: 15px;
+            padding: var(--spacing-lg);
+            border: 2px solid #FFE4D6;
+        }
+        
+        .overview-header {
+            text-align: center;
+            margin-bottom: var(--spacing-lg);
+        }
+        
+        .overall-health-score {
+            width: 120px;
+            height: 120px;
+            border-radius: var(--radius-round);
+            background: conic-gradient(var(--pet-primary) 0deg, var(--pet-primary) 306deg, #F0F0F0 306deg);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto var(--spacing-md);
+            position: relative;
+            box-shadow: 0 8px 25px rgba(255, 138, 128, 0.3);
+        }
+        
+        .overall-health-score::before {
+            content: '';
+            width: 85px;
+            height: 85px;
+            background: white;
+            border-radius: var(--radius-round);
+            position: absolute;
+        }
+        
+        .overall-score-value {
+            position: relative;
+            z-index: 2;
+            font-size: 28px;
+            font-weight: bold;
+            color: var(--text-primary);
+        }
+        
+        .overall-score-label {
+            color: var(--text-secondary);
+            font-size: 14px;
+            font-weight: 500;
+        }
+        
+        .health-status-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: var(--spacing-md);
+            margin-top: var(--spacing-lg);
+        }
+        
+        .status-item {
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-sm);
+            padding: var(--spacing-sm);
+            background: white;
+            border-radius: 10px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+        }
+        
+        .status-icon {
+            width: 35px;
+            height: 35px;
+            border-radius: var(--radius-md);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            color: white;
+        }
+        
+        .status-icon-vaccine {
+            background: linear-gradient(135deg, #4CAF50, #81C784);
+        }
+        
+        .status-icon-deworming {
+            background: linear-gradient(135deg, #FF9800, #FFB74D);
+        }
+        
+        .status-icon-dental {
+            background: linear-gradient(135deg, #2196F3, #64B5F6);
+        }
+        
+        .status-icon-eye {
+            background: linear-gradient(135deg, #9C27B0, #BA68C8);
+        }
+        
+        .status-info {
+            flex: 1;
+        }
+        
+        .status-name {
+            font-size: 14px;
+            font-weight: 600;
+            color: var(--text-primary);
+            margin-bottom: 2px;
+        }
+        
+        .status-value {
+            font-size: 12px;
+            color: var(--text-secondary);
+        }
+        
+        /* 温馨记录卡片 */
+        .memories-card {
+            background: white;
+            border-radius: 20px;
+            padding: var(--spacing-xl);
+            margin: var(--spacing-md);
+            box-shadow: 0 15px 35px rgba(252, 182, 159, 0.3);
+            border: 2px solid rgba(255, 255, 255, 0.8);
+        }
+        
+        .memories-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: var(--spacing-lg);
+        }
+        
+        .memories-title {
+            font-size: 20px;
+            font-weight: bold;
+            color: var(--text-primary);
+            font-family: 'Comic Sans MS', cursive, sans-serif;
+        }
+        
+        .memory-item {
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-md);
+            padding: var(--spacing-md);
+            background: linear-gradient(135deg, #FFF8F0, #FFEBCD);
+            border-radius: 15px;
+            margin-bottom: var(--spacing-md);
+            border: 2px solid #FFE4D6;
+            transition: all 0.3s ease;
+        }
+        
+        .memory-item:hover {
+            transform: translateX(5px);
+            box-shadow: 0 8px 20px rgba(255, 182, 159, 0.2);
+        }
+        
+        .memory-icon {
+            width: 45px;
+            height: 45px;
+            border-radius: 15px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            color: white;
+            background: linear-gradient(135deg, var(--pet-accent), var(--pet-secondary));
+        }
+        
+        .memory-content {
+            flex: 1;
+        }
+        
+        .memory-title {
+            font-weight: 600;
+            color: var(--text-primary);
+            margin-bottom: 4px;
+        }
+        
+        .memory-description {
+            font-size: 14px;
+            color: var(--text-secondary);
+            line-height: 1.4;
+        }
+        
+        .memory-time {
+            font-size: 12px;
+            color: var(--text-light);
+            white-space: nowrap;
+        }
+        
+        /* 温馨操作区 */
+        .cozy-actions {
+            background: white;
+            border-radius: 20px;
+            padding: var(--spacing-lg);
+            margin: var(--spacing-md);
+            box-shadow: 0 15px 35px rgba(252, 182, 159, 0.3);
+            border: 2px solid rgba(255, 255, 255, 0.8);
+        }
+        
+        .actions-grid-v6 {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: var(--spacing-md);
+        }
+        
+        .cozy-action-btn {
+            background: linear-gradient(135deg, #FFF8F0, #FFEBCD);
+            border: 2px solid #FFE4D6;
+            border-radius: 15px;
+            padding: var(--spacing-lg);
+            text-align: center;
+            transition: all 0.3s ease;
+            cursor: pointer;
+        }
+        
+        .cozy-action-btn:hover {
+            background: white;
+            border-color: var(--pet-primary);
+            transform: translateY(-3px);
+            box-shadow: 0 10px 25px rgba(255, 138, 128, 0.3);
+        }
+        
+        .cozy-action-icon {
+            font-size: 32px;
+            margin-bottom: var(--spacing-md);
+        }
+        
+        .cozy-action-text {
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Comic Sans MS', cursive, sans-serif;
+        }
+    </style>
+</head>
+<body>
+    <div class="container dashboard-v6-container">
+        <!-- 宠物档案卡片 -->
+        <div class="pet-profile-card">
+            <div class="profile-content">
+                <div class="pet-intro">
+                    <div class="pet-avatar-v6">
+                        <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K" 
+                             alt="小橘" style="width: 100%; height: 100%; object-fit: cover; border-radius: 20px;">
+                    </div>
+                    <div class="pet-details">
+                        <h1 class="pet-name-v6">小橘 🧡</h1>
+                        <p class="pet-subtitle-v6">我家的小太阳 · 橘猫 · 公 · 2岁3个月</p>
+                        <div class="pet-personality">
+                            <span class="personality-tag">超级活泼</span>
+                            <span class="personality-tag">特别粘人</span>
+                            <span class="personality-tag">小吃货</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="basic-info-grid">
+                    <div class="info-card">
+                        <div class="info-icon">🎂</div>
+                        <div class="info-label-v6">生日</div>
+                        <div class="info-value-v6">2022年3月15日</div>
+                    </div>
+                    <div class="info-card">
+                        <div class="info-icon">🏠</div>
+                        <div class="info-label-v6">到家纪念日</div>
+                        <div class="info-value-v6">2022年4月20日</div>
+                    </div>
+                    <div class="info-card">
+                        <div class="info-icon">💕</div>
+                        <div class="info-label-v6">陪伴天数</div>
+                        <div class="info-value-v6">645天</div>
+                    </div>
+                    <div class="info-card">
+                        <div class="info-icon">⚖️</div>
+                        <div class="info-label-v6">当前体重</div>
+                        <div class="info-value-v6">4.2kg</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 健康数据仪表盘 -->
+        <div class="dashboard-panel">
+            <div class="panel-header">
+                <h2 class="panel-title">小橘的健康仪表盘 📊</h2>
+                <p class="panel-subtitle">用数据守护每一天的健康</p>
+            </div>
+            
+            <div class="dashboard-metrics">
+                <!-- 体重监测 -->
+                <div class="metric-widget">
+                    <div class="widget-container">
+                        <div class="widget-bg">
+                            <div class="widget-progress progress-weight-v6"></div>
+                            <div class="widget-inner">
+                                <div class="widget-value">4.2</div>
+                                <div class="widget-unit">kg</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="widget-label">体重监测</div>
+                    <div class="widget-description">健康范围内 84%</div>
+                </div>
+                
+                <!-- 活动指数 -->
+                <div class="metric-widget">
+                    <div class="widget-container">
+                        <div class="widget-bg">
+                            <div class="widget-progress progress-activity-v6"></div>
+                            <div class="widget-inner">
+                                <div class="widget-value">78</div>
+                                <div class="widget-unit">%</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="widget-label">活动指数</div>
+                    <div class="widget-description">今天很活跃哦</div>
+                </div>
+                
+                <!-- 食欲状态 -->
+                <div class="metric-widget">
+                    <div class="widget-container">
+                        <div class="widget-bg">
+                            <div class="widget-progress progress-food-v6"></div>
+                            <div class="widget-inner">
+                                <div class="widget-value">92</div>
+                                <div class="widget-unit">%</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="widget-label">食欲状态</div>
+                    <div class="widget-description">小吃货本色</div>
+                </div>
+                
+                <!-- 睡眠时长 -->
+                <div class="metric-widget">
+                    <div class="widget-container">
+                        <div class="widget-bg">
+                            <div class="widget-progress progress-sleep-v6"></div>
+                            <div class="widget-inner">
+                                <div class="widget-value">14</div>
+                                <div class="widget-unit">h</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="widget-label">睡眠时长</div>
+                    <div class="widget-description">睡得很香甜</div>
+                </div>
+            </div>
+            
+            <!-- 健康总览 -->
+            <div class="health-overview-panel">
+                <div class="overview-header">
+                    <div class="overall-health-score">
+                        <div class="overall-score-value">85</div>
+                    </div>
+                    <div class="overall-score-label">综合健康评分 - 棒棒哒！</div>
+                </div>
+                
+                <div class="health-status-grid">
+                    <div class="status-item">
+                        <div class="status-icon status-icon-vaccine">💉</div>
+                        <div class="status-info">
+                            <div class="status-name">疫苗接种</div>
+                            <div class="status-value">已完成，很勇敢</div>
+                        </div>
+                    </div>
+                    <div class="status-item">
+                        <div class="status-icon status-icon-deworming">🐛</div>
+                        <div class="status-info">
+                            <div class="status-name">驱虫治疗</div>
+                            <div class="status-value">需要更新啦</div>
+                        </div>
+                    </div>
+                    <div class="status-item">
+                        <div class="status-icon status-icon-dental">🦷</div>
+                        <div class="status-info">
+                            <div class="status-name">牙齿健康</div>
+                            <div class="status-value">白白的小牙</div>
+                        </div>
+                    </div>
+                    <div class="status-item">
+                        <div class="status-icon status-icon-eye">👁️</div>
+                        <div class="status-info">
+                            <div class="status-name">眼部检查</div>
+                            <div class="status-value">亮晶晶的眼睛</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 温馨记录卡片 -->
+        <div class="memories-card">
+            <div class="memories-header">
+                <h3 class="memories-title">最近的温馨时光 💝</h3>
+            </div>
+            
+            <div class="memory-item">
+                <div class="memory-icon">⚖️</div>
+                <div class="memory-content">
+                    <div class="memory-title">今天的体重记录</div>
+                    <div class="memory-description">小橘今天4.2kg啦，比上周又重了一点点，健康成长中～</div>
+                </div>
+                <div class="memory-time">2小时前</div>
+            </div>
+            
+            <div class="memory-item">
+                <div class="memory-icon" style="background: linear-gradient(135deg, var(--pet-secondary), var(--pet-warning));">💉</div>
+                <div class="memory-content">
+                    <div class="memory-title">勇敢的疫苗接种</div>
+                    <div class="memory-description">小橘今天打疫苗超级勇敢，全程没有叫唤，医生都夸它乖</div>
+                </div>
+                <div class="memory-time">1天前</div>
+            </div>
+            
+            <div class="memory-item">
+                <div class="memory-icon" style="background: linear-gradient(135deg, var(--pet-warning), var(--pet-primary));">🛁</div>
+                <div class="memory-content">
+                    <div class="memory-title">香香的洗澡时光</div>
+                    <div class="memory-description">给小橘洗了个舒服的澡澡，现在毛毛软软香香的</div>
+                </div>
+                <div class="memory-time">3天前</div>
+            </div>
+        </div>
+        
+        <!-- 温馨操作区 -->
+        <div class="cozy-actions">
+            <div class="actions-grid-v6">
+                <div class="cozy-action-btn" onclick="interactions.handleButtonClick('addRecord')">
+                    <div class="cozy-action-icon">📝</div>
+                    <div class="cozy-action-text">记录美好</div>
+                </div>
+                <div class="cozy-action-btn" onclick="interactions.handleButtonClick('aiChat')">
+                    <div class="cozy-action-icon">💬</div>
+                    <div class="cozy-action-text">AI小助手</div>
+                </div>
+                <div class="cozy-action-btn" onclick="interactions.handleButtonClick('healthChart')">
+                    <div class="cozy-action-icon">📊</div>
+                    <div class="cozy-action-text">健康报告</div>
+                </div>
+                <div class="cozy-action-btn" onclick="interactions.handleButtonClick('timeline')">
+                    <div class="cozy-action-icon">⏰</div>
+                    <div class="cozy-action-text">成长相册</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <script src="assets/js/common.js"></script>
+    <script>
+        // 卡片仪表盘式 V6 特有交互
+        document.addEventListener('DOMContentLoaded', function() {
+            // 温馨的入场动画
+            const cards = document.querySelectorAll('.pet-profile-card, .dashboard-panel, .memories-card, .cozy-actions');
+            cards.forEach((card, index) => {
+                card.style.opacity = '0';
+                card.style.transform = 'translateY(40px) scale(0.95)';
+                
+                setTimeout(() => {
+                    card.style.transition = 'all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
+                    card.style.opacity = '1';
+                    card.style.transform = 'translateY(0) scale(1)';
+                }, index * 250);
+            });
+            
+            // 仪表盘动画
+            setTimeout(() => {
+                const widgets = document.querySelectorAll('.widget-progress');
+                widgets.forEach((widget, index) => {
+                    setTimeout(() => {
+                        widget.style.animation = 'widgetSpin 2.5s ease forwards';
+                    }, index * 400);
+                });
+            }, 1000);
+            
+            // 健康评分动画
+            setTimeout(() => {
+                const healthScore = document.querySelector('.overall-health-score');
+                healthScore.style.animation = 'heartbeat 1.5s ease forwards';
+            }, 2000);
+            
+            console.log('温馨卡片仪表盘式 V6 原型已加载');
+        });
+        
+        // 添加温馨动画样式
+        const style = document.createElement('style');
+        style.textContent = `
+            @keyframes float {
+                0%, 100% { transform: translateX(0) translateY(0); }
+                50% { transform: translateX(-20px) translateY(-20px); }
+            }
+            
+            @keyframes widgetSpin {
+                from {
+                    transform: rotate(-180deg) scale(0.8);
+                    opacity: 0;
+                }
+                to {
+                    transform: rotate(0deg) scale(1);
+                    opacity: 1;
+                }
+            }
+            
+            @keyframes heartbeat {
+                0%, 100% { transform: scale(1); }
+                25% { transform: scale(1.05); }
+                50% { transform: scale(1.1); }
+                75% { transform: scale(1.05); }
+            }
+        `;
+        document.head.appendChild(style);
+    </script>
+</body>
+</html>
diff --git a/prototypes/pet-detail/pet-detail-prototype-16.html b/prototypes/pet-detail/pet-detail-prototype-16.html
new file mode 100644
index 0000000..4c96b53
--- /dev/null
+++ b/prototypes/pet-detail/pet-detail-prototype-16.html
@@ -0,0 +1,679 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>宠物详情 - 卡片仪表盘式 V7</title>
+    <link rel="stylesheet" href="assets/css/common.css">
+    <style>
+        /* 卡片仪表盘式 V7 - 科技感风格，基本信息卡片化，数据可视化仪表盘 */
+        .dashboard-v7-container {
+            background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
+            min-height: 100vh;
+            color: white;
+        }
+        
+        /* 宠物信息卡片 */
+        .pet-info-panel {
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 24px;
+            padding: var(--spacing-xl);
+            margin: var(--spacing-md);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .pet-info-panel::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 2px;
+            background: linear-gradient(90deg, #00d4ff, #ff0080, #ffaa00);
+            animation: neonFlow 3s linear infinite;
+        }
+        
+        .pet-header-v7 {
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-lg);
+            margin-bottom: var(--spacing-xl);
+        }
+        
+        .pet-avatar-v7 {
+            width: 100px;
+            height: 100px;
+            border-radius: 20px;
+            border: 2px solid #00d4ff;
+            box-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
+            position: relative;
+        }
+        
+        .pet-avatar-v7::after {
+            content: '';
+            position: absolute;
+            top: -2px;
+            left: -2px;
+            right: -2px;
+            bottom: -2px;
+            border-radius: 20px;
+            background: linear-gradient(45deg, #00d4ff, #ff0080, #ffaa00, #00d4ff);
+            z-index: -1;
+            animation: borderRotate 3s linear infinite;
+        }
+        
+        .pet-main-info {
+            flex: 1;
+        }
+        
+        .pet-name-v7 {
+            font-size: 28px;
+            font-weight: bold;
+            background: linear-gradient(45deg, #00d4ff, #ff0080);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            margin-bottom: var(--spacing-xs);
+        }
+        
+        .pet-type-info {
+            color: rgba(255, 255, 255, 0.8);
+            font-size: 16px;
+            margin-bottom: var(--spacing-md);
+        }
+        
+        .pet-status-indicators {
+            display: flex;
+            gap: var(--spacing-sm);
+        }
+        
+        .status-chip {
+            background: rgba(0, 212, 255, 0.2);
+            border: 1px solid #00d4ff;
+            color: #00d4ff;
+            padding: 4px 12px;
+            border-radius: 20px;
+            font-size: 12px;
+            font-weight: 500;
+        }
+        
+        .status-chip.warning {
+            background: rgba(255, 170, 0, 0.2);
+            border-color: #ffaa00;
+            color: #ffaa00;
+        }
+        
+        .status-chip.success {
+            background: rgba(0, 255, 127, 0.2);
+            border-color: #00ff7f;
+            color: #00ff7f;
+        }
+        
+        .info-matrix {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: var(--spacing-md);
+            margin-top: var(--spacing-lg);
+        }
+        
+        .info-cell {
+            background: rgba(255, 255, 255, 0.03);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 12px;
+            padding: var(--spacing-md);
+            text-align: center;
+            transition: all 0.3s ease;
+        }
+        
+        .info-cell:hover {
+            background: rgba(255, 255, 255, 0.08);
+            border-color: #00d4ff;
+            box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
+        }
+        
+        .info-cell-icon {
+            font-size: 20px;
+            margin-bottom: var(--spacing-sm);
+        }
+        
+        .info-cell-label {
+            font-size: 12px;
+            color: rgba(255, 255, 255, 0.6);
+            margin-bottom: var(--spacing-xs);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        
+        .info-cell-value {
+            font-size: 16px;
+            font-weight: bold;
+            color: white;
+        }
+        
+        /* 数据仪表盘 */
+        .analytics-dashboard {
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 24px;
+            padding: var(--spacing-xl);
+            margin: var(--spacing-md);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+        }
+        
+        .dashboard-header-v7 {
+            text-align: center;
+            margin-bottom: var(--spacing-xl);
+        }
+        
+        .dashboard-title-v7 {
+            font-size: 24px;
+            font-weight: bold;
+            background: linear-gradient(45deg, #00d4ff, #ff0080, #ffaa00);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            margin-bottom: var(--spacing-sm);
+        }
+        
+        .dashboard-subtitle {
+            color: rgba(255, 255, 255, 0.7);
+            font-size: 14px;
+        }
+        
+        .metrics-grid-v7 {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: var(--spacing-xl);
+            margin-bottom: var(--spacing-xl);
+        }
+        
+        .metric-display-v7 {
+            text-align: center;
+        }
+        
+        .metric-gauge-v7 {
+            width: 140px;
+            height: 140px;
+            margin: 0 auto var(--spacing-md);
+            position: relative;
+        }
+        
+        .gauge-outer {
+            width: 100%;
+            height: 100%;
+            border-radius: var(--radius-round);
+            background: conic-gradient(rgba(255, 255, 255, 0.1) 0deg, rgba(255, 255, 255, 0.1) 360deg);
+            position: relative;
+        }
+        
+        .gauge-progress-v7 {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border-radius: var(--radius-round);
+            transition: all 2s ease;
+        }
+        
+        .gauge-weight-v7 {
+            background: conic-gradient(#ff0080 0deg, #ff0080 302deg, transparent 302deg);
+        }
+        
+        .gauge-activity-v7 {
+            background: conic-gradient(#00ff7f 0deg, #00ff7f 281deg, transparent 281deg);
+        }
+        
+        .gauge-food-v7 {
+            background: conic-gradient(#00d4ff 0deg, #00d4ff 331deg, transparent 331deg);
+        }
+        
+        .gauge-sleep-v7 {
+            background: conic-gradient(#ffaa00 0deg, #ffaa00 313deg, transparent 313deg);
+        }
+        
+        .gauge-inner {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 100px;
+            height: 100px;
+            background: rgba(0, 0, 0, 0.8);
+            border-radius: var(--radius-round);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        
+        .gauge-value-v7 {
+            font-size: 22px;
+            font-weight: bold;
+            color: white;
+            margin-bottom: 2px;
+        }
+        
+        .gauge-unit-v7 {
+            font-size: 12px;
+            color: rgba(255, 255, 255, 0.6);
+        }
+        
+        .metric-label-v7 {
+            font-size: 16px;
+            font-weight: 600;
+            color: white;
+            margin-bottom: var(--spacing-xs);
+        }
+        
+        .metric-status-v7 {
+            font-size: 12px;
+            color: rgba(255, 255, 255, 0.7);
+        }
+        
+        /* 系统状态面板 */
+        .system-status {
+            background: rgba(0, 0, 0, 0.3);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 16px;
+            padding: var(--spacing-lg);
+            margin-top: var(--spacing-xl);
+        }
+        
+        .status-header {
+            text-align: center;
+            margin-bottom: var(--spacing-lg);
+        }
+        
+        .overall-status-display {
+            width: 120px;
+            height: 120px;
+            border-radius: var(--radius-round);
+            background: conic-gradient(#00ff7f 0deg, #00ff7f 306deg, rgba(255, 255, 255, 0.1) 306deg);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto var(--spacing-md);
+            position: relative;
+            box-shadow: 0 0 40px rgba(0, 255, 127, 0.4);
+        }
+        
+        .overall-status-display::before {
+            content: '';
+            width: 85px;
+            height: 85px;
+            background: rgba(0, 0, 0, 0.9);
+            border-radius: var(--radius-round);
+            position: absolute;
+        }
+        
+        .overall-status-value {
+            position: relative;
+            z-index: 2;
+            font-size: 28px;
+            font-weight: bold;
+            color: #00ff7f;
+        }
+        
+        .overall-status-label {
+            color: rgba(255, 255, 255, 0.8);
+            font-size: 14px;
+        }
+        
+        .status-indicators-v7 {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: var(--spacing-md);
+            margin-top: var(--spacing-lg);
+        }
+        
+        .status-indicator-v7 {
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-sm);
+            padding: var(--spacing-sm);
+            background: rgba(255, 255, 255, 0.03);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 8px;
+        }
+        
+        .indicator-dot {
+            width: 12px;
+            height: 12px;
+            border-radius: var(--radius-round);
+            animation: pulse 2s infinite;
+        }
+        
+        .dot-online {
+            background: #00ff7f;
+            box-shadow: 0 0 10px #00ff7f;
+        }
+        
+        .dot-warning {
+            background: #ffaa00;
+            box-shadow: 0 0 10px #ffaa00;
+        }
+        
+        .indicator-text {
+            font-size: 14px;
+            color: rgba(255, 255, 255, 0.8);
+        }
+        
+        /* 控制面板 */
+        .control-panel {
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 24px;
+            padding: var(--spacing-lg);
+            margin: var(--spacing-md);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+        }
+        
+        .control-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: var(--spacing-md);
+        }
+        
+        .control-button {
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 16px;
+            padding: var(--spacing-lg);
+            text-align: center;
+            transition: all 0.3s ease;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .control-button::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+            transition: left 0.5s ease;
+        }
+        
+        .control-button:hover {
+            background: rgba(255, 255, 255, 0.1);
+            border-color: #00d4ff;
+            box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
+        }
+        
+        .control-button:hover::before {
+            left: 100%;
+        }
+        
+        .control-icon-v7 {
+            font-size: 32px;
+            margin-bottom: var(--spacing-md);
+            background: linear-gradient(45deg, #00d4ff, #ff0080);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        
+        .control-text-v7 {
+            font-weight: 600;
+            color: white;
+        }
+    </style>
+</head>
+<body>
+    <div class="container dashboard-v7-container">
+        <!-- 宠物信息面板 -->
+        <div class="pet-info-panel">
+            <div class="pet-header-v7">
+                <div class="pet-avatar-v7">
+                    <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K" 
+                         alt="小橘" style="width: 100%; height: 100%; object-fit: cover; border-radius: 20px;">
+                </div>
+                <div class="pet-main-info">
+                    <h1 class="pet-name-v7">XIAOJU.EXE</h1>
+                    <p class="pet-type-info">ORANGE_CAT v2.3 | MALE | RUNTIME: 645 DAYS</p>
+                    <div class="pet-status-indicators">
+                        <span class="status-chip success">ONLINE</span>
+                        <span class="status-chip">HEALTHY</span>
+                        <span class="status-chip warning">UPDATE_NEEDED</span>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="info-matrix">
+                <div class="info-cell">
+                    <div class="info-cell-icon">🎂</div>
+                    <div class="info-cell-label">BIRTH_DATE</div>
+                    <div class="info-cell-value">2022.03.15</div>
+                </div>
+                <div class="info-cell">
+                    <div class="info-cell-icon">🏠</div>
+                    <div class="info-cell-label">INSTALL_DATE</div>
+                    <div class="info-cell-value">2022.04.20</div>
+                </div>
+                <div class="info-cell">
+                    <div class="info-cell-icon">💕</div>
+                    <div class="info-cell-label">UPTIME</div>
+                    <div class="info-cell-value">645 DAYS</div>
+                </div>
+                <div class="info-cell">
+                    <div class="info-cell-icon">⚖️</div>
+                    <div class="info-cell-label">WEIGHT</div>
+                    <div class="info-cell-value">4.2 KG</div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 数据分析仪表盘 -->
+        <div class="analytics-dashboard">
+            <div class="dashboard-header-v7">
+                <h2 class="dashboard-title-v7">HEALTH ANALYTICS DASHBOARD</h2>
+                <p class="dashboard-subtitle">Real-time monitoring system</p>
+            </div>
+            
+            <div class="metrics-grid-v7">
+                <!-- 体重监测 -->
+                <div class="metric-display-v7">
+                    <div class="metric-gauge-v7">
+                        <div class="gauge-outer">
+                            <div class="gauge-progress-v7 gauge-weight-v7"></div>
+                            <div class="gauge-inner">
+                                <div class="gauge-value-v7">4.2</div>
+                                <div class="gauge-unit-v7">KG</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="metric-label-v7">WEIGHT_MONITOR</div>
+                    <div class="metric-status-v7">OPTIMAL_RANGE: 84%</div>
+                </div>
+                
+                <!-- 活动监测 -->
+                <div class="metric-display-v7">
+                    <div class="metric-gauge-v7">
+                        <div class="gauge-outer">
+                            <div class="gauge-progress-v7 gauge-activity-v7"></div>
+                            <div class="gauge-inner">
+                                <div class="gauge-value-v7">78</div>
+                                <div class="gauge-unit-v7">%</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="metric-label-v7">ACTIVITY_INDEX</div>
+                    <div class="metric-status-v7">STATUS: ACTIVE</div>
+                </div>
+                
+                <!-- 食欲监测 -->
+                <div class="metric-display-v7">
+                    <div class="metric-gauge-v7">
+                        <div class="gauge-outer">
+                            <div class="gauge-progress-v7 gauge-food-v7"></div>
+                            <div class="gauge-inner">
+                                <div class="gauge-value-v7">92</div>
+                                <div class="gauge-unit-v7">%</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="metric-label-v7">APPETITE_LEVEL</div>
+                    <div class="metric-status-v7">STATUS: EXCELLENT</div>
+                </div>
+                
+                <!-- 睡眠监测 -->
+                <div class="metric-display-v7">
+                    <div class="metric-gauge-v7">
+                        <div class="gauge-outer">
+                            <div class="gauge-progress-v7 gauge-sleep-v7"></div>
+                            <div class="gauge-inner">
+                                <div class="gauge-value-v7">14</div>
+                                <div class="gauge-unit-v7">H</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="metric-label-v7">SLEEP_DURATION</div>
+                    <div class="metric-status-v7">STATUS: OPTIMAL</div>
+                </div>
+            </div>
+            
+            <!-- 系统状态 -->
+            <div class="system-status">
+                <div class="status-header">
+                    <div class="overall-status-display">
+                        <div class="overall-status-value">85</div>
+                    </div>
+                    <div class="overall-status-label">SYSTEM_HEALTH_SCORE</div>
+                </div>
+                
+                <div class="status-indicators-v7">
+                    <div class="status-indicator-v7">
+                        <div class="indicator-dot dot-online"></div>
+                        <div class="indicator-text">VACCINE_MODULE: ACTIVE</div>
+                    </div>
+                    <div class="status-indicator-v7">
+                        <div class="indicator-dot dot-warning"></div>
+                        <div class="indicator-text">DEWORMING: UPDATE_REQUIRED</div>
+                    </div>
+                    <div class="status-indicator-v7">
+                        <div class="indicator-dot dot-online"></div>
+                        <div class="indicator-text">DENTAL_SYSTEM: OPTIMAL</div>
+                    </div>
+                    <div class="status-indicator-v7">
+                        <div class="indicator-dot dot-online"></div>
+                        <div class="indicator-text">VISION_SENSOR: NORMAL</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 控制面板 -->
+        <div class="control-panel">
+            <div class="control-grid">
+                <div class="control-button" onclick="interactions.handleButtonClick('addRecord')">
+                    <div class="control-icon-v7">📝</div>
+                    <div class="control-text-v7">LOG_DATA</div>
+                </div>
+                <div class="control-button" onclick="interactions.handleButtonClick('aiChat')">
+                    <div class="control-icon-v7">💬</div>
+                    <div class="control-text-v7">AI_ASSISTANT</div>
+                </div>
+                <div class="control-button" onclick="interactions.handleButtonClick('healthChart')">
+                    <div class="control-icon-v7">📊</div>
+                    <div class="control-text-v7">ANALYTICS</div>
+                </div>
+                <div class="control-button" onclick="interactions.handleButtonClick('timeline')">
+                    <div class="control-icon-v7">⏰</div>
+                    <div class="control-text-v7">TIMELINE</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <script src="assets/js/common.js"></script>
+    <script>
+        // 科技感仪表盘 V7 特有交互
+        document.addEventListener('DOMContentLoaded', function() {
+            // 科技感入场动画
+            const panels = document.querySelectorAll('.pet-info-panel, .analytics-dashboard, .control-panel');
+            panels.forEach((panel, index) => {
+                panel.style.opacity = '0';
+                panel.style.transform = 'translateY(50px) scale(0.9)';
+                
+                setTimeout(() => {
+                    panel.style.transition = 'all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
+                    panel.style.opacity = '1';
+                    panel.style.transform = 'translateY(0) scale(1)';
+                }, index * 300);
+            });
+            
+            // 仪表盘扫描动画
+            setTimeout(() => {
+                const gauges = document.querySelectorAll('.gauge-progress-v7');
+                gauges.forEach((gauge, index) => {
+                    setTimeout(() => {
+                        gauge.style.animation = 'scanRotate 3s ease forwards';
+                    }, index * 500);
+                });
+            }, 1000);
+            
+            // 系统状态动画
+            setTimeout(() => {
+                const statusDisplay = document.querySelector('.overall-status-display');
+                statusDisplay.style.animation = 'systemBoot 2s ease forwards';
+            }, 2000);
+            
+            console.log('科技感仪表盘 V7 系统已启动');
+        });
+        
+        // 添加科技感动画样式
+        const style = document.createElement('style');
+        style.textContent = `
+            @keyframes neonFlow {
+                0%, 100% { background-position: 0% 50%; }
+                50% { background-position: 100% 50%; }
+            }
+            
+            @keyframes borderRotate {
+                0% { transform: rotate(0deg); }
+                100% { transform: rotate(360deg); }
+            }
+            
+            @keyframes scanRotate {
+                from {
+                    transform: rotate(-180deg);
+                    opacity: 0;
+                }
+                to {
+                    transform: rotate(0deg);
+                    opacity: 1;
+                }
+            }
+            
+            @keyframes systemBoot {
+                0% {
+                    transform: scale(0.5);
+                    opacity: 0;
+                }
+                50% {
+                    transform: scale(1.1);
+                    opacity: 0.8;
+                }
+                100% {
+                    transform: scale(1);
+                    opacity: 1;
+                }
+            }
+            
+            @keyframes pulse {
+                0%, 100% { opacity: 1; }
+                50% { opacity: 0.5; }
+            }
+        `;
+        document.head.appendChild(style);
+    </script>
+</body>
+</html>
diff --git a/test-pet-detail.html b/test-pet-detail.html
new file mode 100644
index 0000000..5029f37
--- /dev/null
+++ b/test-pet-detail.html
@@ -0,0 +1,355 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>宠物详情页面测试</title>
+    <style>
+        /* 基础样式 */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        }
+        
+        /* 经典卡片式样式 */
+        .container {
+            background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
+            min-height: 100vh;
+            padding: 15px;
+        }
+
+        /* 头部区域 */
+        .classic-header {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            padding: 20px 15px;
+            margin-bottom: 15px;
+            box-shadow: 0 4px 16px rgba(255, 138, 128, 0.2);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            position: relative;
+            text-align: center;
+        }
+
+        .edit-btn {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 100%);
+            border-radius: 10px;
+            padding: 6px 10px;
+            box-shadow: 0 2px 8px rgba(255, 138, 128, 0.4);
+            border: none;
+            color: white;
+            font-size: 12px;
+            cursor: pointer;
+        }
+
+        .header-title {
+            font-size: 18px;
+            font-weight: bold;
+            color: #FF8A80;
+            margin-bottom: 5px;
+        }
+
+        .header-subtitle {
+            font-size: 12px;
+            color: #999999;
+        }
+
+        /* 宠物主要信息卡片 */
+        .pet-info-main {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            padding: 20px;
+            margin-bottom: 15px;
+            box-shadow: 0 4px 16px rgba(255, 138, 128, 0.2);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+        }
+
+        .pet-avatar-card {
+            text-align: center;
+        }
+
+        .pet-avatar-large {
+            width: 80px;
+            height: 80px;
+            border-radius: 40px;
+            border: 3px solid #FF8A80;
+            margin-bottom: 15px;
+            box-shadow: 0 4px 12px rgba(255, 138, 128, 0.3);
+            background: #FFE0DD;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 40px;
+        }
+
+        .pet-name {
+            font-size: 24px;
+            font-weight: bold;
+            color: #FF8A80;
+            margin-bottom: 8px;
+        }
+
+        .pet-description {
+            font-size: 14px;
+            color: #666666;
+            margin-bottom: 5px;
+        }
+
+        .pet-days {
+            font-size: 12px;
+            color: #999999;
+        }
+
+        /* 信息卡片 */
+        .info-card {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            padding: 15px;
+            margin-bottom: 15px;
+            box-shadow: 0 4px 16px rgba(255, 138, 128, 0.2);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+        }
+
+        .card-title {
+            font-size: 16px;
+            font-weight: bold;
+            color: #FF8A80;
+            margin-bottom: 15px;
+        }
+
+        .info-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 15px;
+        }
+
+        .info-item {
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+        }
+
+        .info-label {
+            font-size: 12px;
+            color: #999999;
+        }
+
+        .info-value {
+            font-size: 14px;
+            font-weight: 500;
+            color: #333333;
+        }
+
+        .health-good {
+            color: #4CAF50;
+        }
+
+        /* 操作按钮 */
+        .action-buttons {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 15px;
+        }
+
+        .action-btn {
+            flex: 1;
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 10px;
+            padding: 15px 10px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            box-shadow: 0 4px 16px rgba(255, 138, 128, 0.15);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .action-btn:hover {
+            transform: scale(0.95);
+        }
+
+        .action-icon {
+            font-size: 24px;
+            margin-bottom: 8px;
+        }
+
+        .action-text {
+            font-size: 12px;
+            color: #666666;
+            text-align: center;
+        }
+
+        /* 最近记录 */
+        .recent-records {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            padding: 15px;
+            box-shadow: 0 4px 16px rgba(255, 138, 128, 0.2);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+        }
+
+        .section-title {
+            font-size: 16px;
+            font-weight: bold;
+            color: #FF8A80;
+            margin-bottom: 15px;
+        }
+
+        .record-item {
+            padding: 12px 0;
+            border-bottom: 1px solid #f0f0f0;
+        }
+
+        .record-item:last-child {
+            border-bottom: none;
+        }
+
+        .record-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 5px;
+        }
+
+        .record-title {
+            font-size: 14px;
+            font-weight: 500;
+            color: #333333;
+        }
+
+        .record-time {
+            font-size: 11px;
+            color: #999999;
+        }
+
+        .record-content {
+            font-size: 13px;
+            color: #666666;
+            line-height: 1.5;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <!-- 宠物主卡片 -->
+        <div class="pet-main-card">
+            <button class="edit-btn">✏️</button>
+
+            <!-- 宠物头像区域 -->
+            <div class="pet-avatar-section">
+                <div class="avatar-container">
+                    <div class="pet-avatar-large">🐱</div>
+                    <div class="avatar-badge">健康</div>
+                </div>
+            </div>
+
+            <!-- 宠物信息区域 -->
+            <div class="pet-info-section">
+                <div class="pet-name">小橘</div>
+                <div class="pet-meta">
+                    <span class="pet-breed">橘猫</span>
+                    <span class="pet-separator">·</span>
+                    <span class="pet-gender">公</span>
+                    <span class="pet-separator">·</span>
+                    <span class="pet-age">2岁</span>
+                </div>
+                <div class="pet-stats">
+                    <div class="stat-item">
+                        <div class="stat-number">645</div>
+                        <div class="stat-label">陪伴天数</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-number">4.2kg</div>
+                        <div class="stat-label">当前体重</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-number">85</div>
+                        <div class="stat-label">健康评分</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 详细信息网格 -->
+        <div class="info-card">
+            <div class="card-title">基本信息</div>
+            <div class="info-grid">
+                <div class="info-item">
+                    <div class="info-label">生日</div>
+                    <div class="info-value">2022-03-15</div>
+                </div>
+                <div class="info-item">
+                    <div class="info-label">体重</div>
+                    <div class="info-value">4.2kg</div>
+                </div>
+                <div class="info-item">
+                    <div class="info-label">到家日期</div>
+                    <div class="info-value">2022-04-20</div>
+                </div>
+                <div class="info-item">
+                    <div class="info-label">健康状态</div>
+                    <div class="info-value health-good">良好</div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 快速操作按钮 -->
+        <div class="action-buttons">
+            <div class="action-btn">
+                <div class="action-icon">📝</div>
+                <div class="action-text">添加记录</div>
+            </div>
+            <div class="action-btn">
+                <div class="action-icon">💬</div>
+                <div class="action-text">AI聊天</div>
+            </div>
+            <div class="action-btn">
+                <div class="action-icon">📊</div>
+                <div class="action-text">健康图表</div>
+            </div>
+        </div>
+        
+        <!-- 最近记录 -->
+        <div class="recent-records">
+            <div class="section-title">最近记录</div>
+            
+            <div class="record-item">
+                <div class="record-header">
+                    <div class="record-title">⚖️ 体重记录</div>
+                    <div class="record-time">2小时前</div>
+                </div>
+                <div class="record-content">今天体重4.2kg，比上周增加了0.1kg，成长状态良好</div>
+            </div>
+            
+            <div class="record-item">
+                <div class="record-header">
+                    <div class="record-title">💉 疫苗接种</div>
+                    <div class="record-time">1天前</div>
+                </div>
+                <div class="record-content">完成了狂犬疫苗第二针接种，医生说恢复情况很好</div>
+            </div>
+            
+            <div class="record-item">
+                <div class="record-header">
+                    <div class="record-title">🛁 洗澡护理</div>
+                    <div class="record-time">3天前</div>
+                </div>
+                <div class="record-content">给小橘洗了澡，全程很乖没有挣扎，现在毛毛很香</div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/宠物详情页面改版说明.md b/宠物详情页面改版说明.md
new file mode 100644
index 0000000..3a7f80a
--- /dev/null
+++ b/宠物详情页面改版说明.md
@@ -0,0 +1,128 @@
+# 宠物详情页面改版说明
+
+## 改版概述
+
+按照 `pet-detail-prototype-01.html` 经典卡片式的布局和排版，对 `pages/pets/pet-detail.vue` 进行了全面重构。
+
+## 主要改动
+
+### 1. 布局结构调整
+
+**原布局：**
+- 简单的头部操作栏
+- 基础的宠物信息展示
+- 普通的记录列表
+
+**新布局：**
+- 经典卡片式头部区域
+- 居中的宠物头像和信息展示
+- 网格化的基本信息
+- 美观的操作按钮
+- 优化的记录展示
+
+### 2. 视觉设计优化
+
+#### 头部区域
+- 添加了渐变背景和毛玻璃效果
+- 居中显示标题和副标题
+- 编辑按钮移至右上角
+
+#### 宠物信息展示
+- 大尺寸圆形头像（支持图片和emoji占位符）
+- 居中对齐的宠物名称和描述
+- 突出显示陪伴天数
+
+#### 基本信息网格
+- 2x2 网格布局
+- 清晰的标签和数值分离
+- 健康状态用绿色高亮
+
+#### 操作按钮
+- 3个主要操作按钮横向排列
+- 大尺寸emoji图标
+- 毛玻璃卡片效果
+
+#### 记录列表
+- 优化的记录项布局
+- 图标+标题的组合显示
+- 时间显示优化（相对时间）
+- 空状态的友好提示
+
+### 3. 交互体验提升
+
+#### 动画效果
+- 按钮点击缩放效果
+- 卡片悬停效果
+- 平滑的过渡动画
+
+#### 响应式设计
+- 适配不同屏幕尺寸
+- 合理的间距和比例
+
+### 4. 代码优化
+
+#### 数据结构
+- 更新了测试数据格式
+- 添加了记录类型和图标映射
+- 优化了时间格式化函数
+
+#### 样式架构
+- 使用 SCSS 嵌套语法
+- 统一的颜色变量
+- 模块化的样式组织
+
+## 新增功能
+
+### 1. 记录类型图标
+- 体重记录：⚖️
+- 疫苗接种：💉
+- 洗澡护理：🛁
+- 食物相关：🍽️
+- 游戏玩耍：🎾
+- 医疗相关：🏥
+
+### 2. 时间格式化
+- 今天、昨天的智能显示
+- 相对时间计算
+- 友好的时间提示
+
+### 3. 头像系统
+- 支持自定义头像图片
+- emoji占位符作为默认头像
+- 圆形裁剪和边框效果
+
+## 技术细节
+
+### 样式特色
+- 渐变背景：`linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%)`
+- 毛玻璃效果：`backdrop-filter: blur(20rpx)`
+- 卡片阴影：`box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2)`
+- 主色调：#FF8A80（珊瑚粉）
+
+### 响应式单位
+- 使用 rpx 单位确保跨设备适配
+- 合理的字体大小层级
+- 统一的间距系统
+
+## 测试文件
+
+创建了 `test-pet-detail.html` 文件用于快速预览效果，包含：
+- 完整的样式复现
+- 静态数据展示
+- 交互效果测试
+
+## 兼容性
+
+- 支持 uni-app 框架
+- 兼容微信小程序
+- 适配 iOS 和 Android
+- 响应式设计支持各种屏幕尺寸
+
+## 后续优化建议
+
+1. 添加更多动画效果
+2. 支持主题切换
+3. 添加更多记录类型
+4. 优化加载状态
+5. 添加分享功能
+6. 支持头像上传和编辑