From bd1c7a713fd6e3ec8f403c8ad810dc4ddcc69a91 Mon Sep 17 00:00:00 2001
From: yvan <8574526@qq.com>
Date: Tue, 12 Aug 2025 22:00:08 +0800
Subject: [PATCH] 1

---
 pages.json                        |   62 +-
 pages/pets/add-record-form.vue    |  672 ++++++++++++++++++
 pages/pets/add-record-simple.vue  |  200 +++---
 pages/pets/pet-chat.vue           |   35 +-
 pages/pets/pet-detail.vue         |    2 +-
 pages/pets/pet-records.vue        |    2 +-
 pages/pets/pets.vue               | 1052 ++++++++++++++++++++---------
 pages/pets/select-record-type.vue |  302 +++++++++
 8 files changed, 1880 insertions(+), 447 deletions(-)
 create mode 100644 pages/pets/add-record-form.vue
 create mode 100644 pages/pets/select-record-type.vue

diff --git a/pages.json b/pages.json
index ee39a7f..6406af3 100644
--- a/pages.json
+++ b/pages.json
@@ -12,18 +12,16 @@
 			"path": "pages/assistant/assistant",
 			"style": {
 				"navigationBarTitleText": "AI助手",
-				"navigationBarBackgroundColor": "#ffffff",
-				"navigationBarTextStyle": "black",
-				"navigationStyle": "custom"
+				"navigationBarBackgroundColor": "#64B5F6",
+				"navigationBarTextStyle": "white"
 			}
 		},
 		{
 			"path": "pages/assistant/knowledge",
 			"style": {
 				"navigationBarTitleText": "宠物知识库",
-				"navigationBarBackgroundColor": "#ffffff",
-				"navigationBarTextStyle": "black",
-				"navigationStyle": "custom"
+				"navigationBarBackgroundColor": "#81C784",
+				"navigationBarTextStyle": "white"
 			}
 		},
 		{
@@ -54,9 +52,8 @@
 			"path": "pages/pets/add-pet",
 			"style": {
 				"navigationBarTitleText": "添加宠物",
-				"navigationBarBackgroundColor": "#ffffff",
-				"navigationBarTextStyle": "black",
-				"navigationStyle": "custom"
+				"navigationBarBackgroundColor": "#FF8A80",
+				"navigationBarTextStyle": "white"
 			}
 		},
 		{
@@ -64,26 +61,23 @@
 			"style": {
 				"navigationBarTitleText": "添加记录",
 				"navigationBarBackgroundColor": "#ffffff",
-				"navigationBarTextStyle": "black",
-				"navigationStyle": "custom"
+				"navigationBarTextStyle": "black"
 			}
 		},
 		{
 			"path": "pages/pets/pet-chat",
 			"style": {
 				"navigationBarTitleText": "AI聊天",
-				"navigationBarBackgroundColor": "#ffffff",
-				"navigationBarTextStyle": "black",
-				"navigationStyle": "custom"
+				"navigationBarBackgroundColor": "#64B5F6",
+				"navigationBarTextStyle": "white"
 			}
 		},
 		{
 			"path": "pages/pets/pet-chat-simple",
 			"style": {
 				"navigationBarTitleText": "AI聊天",
-				"navigationBarBackgroundColor": "#ffffff",
-				"navigationBarTextStyle": "black",
-				"navigationStyle": "custom"
+				"navigationBarBackgroundColor": "#64B5F6",
+				"navigationBarTextStyle": "white"
 			}
 		},
 		{
@@ -91,35 +85,47 @@
 			"style": {
 				"navigationBarTitleText": "添加记录",
 				"navigationBarBackgroundColor": "#ffffff",
-				"navigationBarTextStyle": "black",
-				"navigationStyle": "custom"
+				"navigationBarTextStyle": "black"
 			}
 		},
 		{
 			"path": "pages/pets/add-record-simple",
 			"style": {
 				"navigationBarTitleText": "添加记录",
-				"navigationBarBackgroundColor": "#ffffff",
-				"navigationBarTextStyle": "black",
-				"navigationStyle": "custom"
+				"navigationBarBackgroundColor": "#FF8A80",
+				"navigationBarTextStyle": "white"
+			}
+		},
+		{
+			"path": "pages/pets/select-record-type",
+			"style": {
+				"navigationBarTitleText": "选择记录类型",
+				"navigationBarBackgroundColor": "#FF8A80",
+				"navigationBarTextStyle": "white"
+			}
+		},
+		{
+			"path": "pages/pets/add-record-form",
+			"style": {
+				"navigationBarTitleText": "添加记录",
+				"navigationBarBackgroundColor": "#FF8A80",
+				"navigationBarTextStyle": "white"
 			}
 		},
 		{
 			"path": "pages/pets/pet-records",
 			"style": {
 				"navigationBarTitleText": "宠物记录",
-				"navigationBarBackgroundColor": "#ffffff",
-				"navigationBarTextStyle": "black",
-				"navigationStyle": "custom"
+				"navigationBarBackgroundColor": "#FF8A80",
+				"navigationBarTextStyle": "white"
 			}
 		},
 		{
 			"path": "pages/pets/pet-timeline",
 			"style": {
 				"navigationBarTitleText": "成长时光",
-				"navigationBarBackgroundColor": "#ffffff",
-				"navigationBarTextStyle": "black",
-				"navigationStyle": "custom"
+				"navigationBarBackgroundColor": "#FFB74D",
+				"navigationBarTextStyle": "white"
 			}
 		},
 		{
diff --git a/pages/pets/add-record-form.vue b/pages/pets/add-record-form.vue
new file mode 100644
index 0000000..be51d64
--- /dev/null
+++ b/pages/pets/add-record-form.vue
@@ -0,0 +1,672 @@
+<template>
+	<view class="add-record-container">
+		<!-- 表单内容 -->
+		<view class="form-content">
+			<!-- 第一组：基础信息 -->
+			<view class="form-group">
+				<!-- 记录宠物 -->
+				<view class="form-item" @click="selectPet">
+					<view class="form-label">记录宠物</view>
+					<view class="form-value">
+						<text class="value-text">{{ petInfo.name || '选择宠物' }}</text>
+						<u-icon name="arrow-right" size="14" color="#c0c4cc"></u-icon>
+					</view>
+				</view>
+
+				<view class="form-divider"></view>
+
+				<!-- 记录时间 -->
+				<view class="form-item" @click="showDatePicker = true">
+					<view class="form-label">记录时间</view>
+					<view class="form-value">
+						<text class="value-text">{{ recordForm.recordTime || '选择时间' }}</text>
+						<u-icon name="arrow-right" size="14" color="#c0c4cc"></u-icon>
+					</view>
+				</view>
+			</view>
+
+			<!-- 第二组：记录详情 -->
+			<view class="form-group">
+				<!-- 记录类型 -->
+				<view class="form-item" @click="selectRecordType">
+					<view class="form-label">记录类型</view>
+					<view class="form-value">
+						<text class="value-text">{{ getTypeName(recordType) || '选择记录类型' }}</text>
+						<u-icon name="arrow-right" size="14" color="#c0c4cc"></u-icon>
+					</view>
+				</view>
+
+				<!-- 动态表单项 -->
+				<template v-if="recordType === 'weight'">
+					<view class="form-divider"></view>
+					<view class="form-item">
+						<view class="form-label">体重</view>
+						<view class="form-input">
+							<input
+								v-model="recordForm.weight"
+								placeholder="填写体重"
+								type="digit"
+								class="input-field"
+							/>
+							<text class="unit">kg</text>
+						</view>
+					</view>
+				</template>
+
+				<template v-if="recordType === 'food'">
+					<view class="form-divider"></view>
+					<view class="form-item">
+						<view class="form-label">食物类型</view>
+						<view class="form-input">
+							<input
+								v-model="recordForm.foodType"
+								placeholder="填写食物类型"
+								class="input-field"
+							/>
+						</view>
+					</view>
+					<view class="form-divider"></view>
+					<view class="form-item">
+						<view class="form-label">食量</view>
+						<view class="form-input">
+							<input
+								v-model="recordForm.amount"
+								placeholder="填写食量"
+								type="digit"
+								class="input-field"
+							/>
+							<text class="unit">g</text>
+						</view>
+					</view>
+				</template>
+
+				<template v-if="recordType === 'water'">
+					<view class="form-divider"></view>
+					<view class="form-item">
+						<view class="form-label">饮水量</view>
+						<view class="form-input">
+							<input
+								v-model="recordForm.waterAmount"
+								placeholder="填写饮水量"
+								type="digit"
+								class="input-field"
+							/>
+							<text class="unit">ml</text>
+						</view>
+					</view>
+				</template>
+
+				<template v-if="recordType === 'medicine'">
+					<view class="form-divider"></view>
+					<view class="form-item">
+						<view class="form-label">药物名称</view>
+						<view class="form-input">
+							<input
+								v-model="recordForm.medicineName"
+								placeholder="填写药物名称"
+								class="input-field"
+							/>
+						</view>
+					</view>
+					<view class="form-divider"></view>
+					<view class="form-item">
+						<view class="form-label">剂量</view>
+						<view class="form-input">
+							<input
+								v-model="recordForm.dosage"
+								placeholder="填写剂量"
+								class="input-field"
+							/>
+						</view>
+					</view>
+				</template>
+			</view>
+
+			<!-- 第三组：描述和媒体 -->
+			<view class="form-group description-group">
+				<view class="form-label">描述</view>
+				<view class="description-input">
+					<textarea
+						v-model="recordForm.content"
+						placeholder="请输入你想要记录的内容～"
+						class="textarea-field"
+						maxlength="500"
+					></textarea>
+				</view>
+
+				<!-- 媒体上传按钮 -->
+				<view class="media-upload">
+					<view class="media-item" @click="chooseImage">
+						<u-icon name="camera" size="24" color="#999"></u-icon>
+					</view>
+					<view class="media-item" @click="chooseVideo">
+						<u-icon name="play-circle" size="24" color="#999"></u-icon>
+					</view>
+				</view>
+			</view>
+
+			<!-- 第四组：分享设置 -->
+			<view class="form-group privacy-group">
+				<view class="privacy-item" @click="setShareLevel('public')">
+					<view class="radio-icon" :class="{ active: recordForm.shareLevel === 'public' }">
+						<view class="radio-inner" v-if="recordForm.shareLevel === 'public'"></view>
+					</view>
+					<text class="privacy-text">公开</text>
+				</view>
+				<view class="privacy-item" @click="setShareLevel('family')">
+					<view class="radio-icon" :class="{ active: recordForm.shareLevel === 'family' }">
+						<view class="radio-inner" v-if="recordForm.shareLevel === 'family'"></view>
+					</view>
+					<text class="privacy-text">家人可见</text>
+				</view>
+				<view class="privacy-item" @click="setShareLevel('private')">
+					<view class="radio-icon" :class="{ active: recordForm.shareLevel === 'private' }">
+						<view class="radio-inner" v-if="recordForm.shareLevel === 'private'"></view>
+					</view>
+					<text class="privacy-text">仅自己可见</text>
+				</view>
+				<text class="privacy-desc">{{ getShareLevelDesc() }}</text>
+			</view>
+		</view>
+
+		<!-- 保存按钮 -->
+		<view class="save-button-container">
+			<button class="save-button" @click="saveRecord">保存</button>
+		</view>
+
+		<!-- 日期时间选择器 -->
+		<u-datetime-picker
+			ref="datetimePicker"
+			v-model="showDatePicker"
+			mode="datetime"
+			@confirm="confirmDateTime"
+			@cancel="showDatePicker = false"
+		></u-datetime-picker>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			petId: '',
+			recordType: '',
+			showDatePicker: false,
+			petInfo: {},
+			recordForm: {
+				petId: '',
+				recordTime: '',
+				content: '',
+				photos: [],
+				videos: [],
+				shareLevel: 'family', // public, family, private
+				// 动态字段
+				weight: '',
+				foodType: '',
+				amount: '',
+				waterAmount: '',
+				toiletType: 'urine',
+				medicineName: '',
+				dosage: ''
+			},
+			typeNames: {
+				'daily-note': '随手记',
+				'milestone': '大事记',
+				'weight': '体重记录',
+				'toilet': '尿便记录',
+				'food': '饮食记录',
+				'water': '饮水记录',
+				'exercise': '运动记录',
+				'supplement': '保健品记录',
+				'abnormal': '异常记录',
+				'deworming': '驱虫记录',
+				'vaccine': '疫苗记录',
+				'antiparasitic': '抗体水平',
+				'checkup': '体检记录',
+				'illness': '看病记录',
+				'medicine': '用药记录',
+				'hospital': '住院记录',
+				'surgery': '手术记录',
+				'bath': '洗澡记录',
+				'nail-trim': '剪指甲',
+				'ear-clean': '洗耳朵',
+				'teeth-clean': '刷牙记录',
+				'hair-trim': '梳毛记录',
+				'hair-cut': '剃毛记录',
+				'beauty': '美容记录',
+				'anal-gland': '挤肛门腺',
+				'eye-clean': '擦眼屎',
+				'disinfect': '消毒记录',
+				'clean': '清洁记录',
+				'change-sand': '换猫砂',
+				'wash-litter': '洗猫砂盆',
+				'wash-food-bowl': '洗食盆',
+				'wash-water-bowl': '洗水盆',
+				'wash-toy': '洗玩具',
+				'wash-cage': '洗笼子',
+				'change-filter': '换滤芯',
+				'change-pad': '换干燥剂'
+			}
+		}
+	},
+	onLoad(options) {
+		this.petId = options.petId || '1'
+		this.recordType = options.type || 'daily-note'
+		this.recordForm.petId = this.petId
+
+		// 加载宠物信息
+		this.loadPetInfo()
+
+		// 设置默认时间为当前时间
+		const now = new Date()
+		this.recordForm.recordTime = this.formatDateTime(now)
+	},
+	methods: {
+		loadPetInfo() {
+			try {
+				const pets = uni.getStorageSync('pets') || []
+				this.petInfo = pets.find(pet => pet.id == this.petId) || { name: '未知宠物' }
+			} catch (error) {
+				console.error('加载宠物信息失败', error)
+				this.petInfo = { name: '未知宠物' }
+			}
+		},
+
+		getTypeName(type) {
+			return this.typeNames[type] || ''
+		},
+
+		selectPet() {
+			// 选择宠物功能
+			uni.showToast({
+				title: '选择宠物功能开发中',
+				icon: 'none'
+			})
+		},
+
+		selectRecordType() {
+			// 返回类型选择页面
+			uni.navigateBack()
+		},
+
+		formatDateTime(date) {
+			const year = date.getFullYear()
+			const month = String(date.getMonth() + 1).padStart(2, '0')
+			const day = String(date.getDate()).padStart(2, '0')
+			const hours = String(date.getHours()).padStart(2, '0')
+			const minutes = String(date.getMinutes()).padStart(2, '0')
+			return `${year}.${month}.${day} ${hours}:${minutes}`
+		},
+
+		confirmDateTime(e) {
+			this.recordForm.recordTime = this.formatDateTime(new Date(e.value))
+			this.showDatePicker = false
+		},
+
+		chooseImage() {
+			uni.chooseImage({
+				count: 9 - this.recordForm.photos.length,
+				sizeType: ['compressed'],
+				sourceType: ['camera', 'album'],
+				success: (res) => {
+					this.recordForm.photos.push(...res.tempFilePaths)
+				}
+			})
+		},
+
+		chooseVideo() {
+			uni.chooseVideo({
+				count: 1,
+				sourceType: ['camera', 'album'],
+				success: (res) => {
+					this.recordForm.videos.push(res.tempFilePath)
+				}
+			})
+		},
+
+		setShareLevel(level) {
+			this.recordForm.shareLevel = level
+		},
+
+		getShareLevelDesc() {
+			const descriptions = {
+				'public': '所有用户都可以看到这条记录',
+				'family': '仅家庭成员可以看到这条记录',
+				'private': '设置为仅自己可见后，本条记录对其家庭成员和朋友圈隐藏'
+			}
+			return descriptions[this.recordForm.shareLevel] || descriptions['family']
+		},
+		
+		async saveRecord() {
+			// 简单验证
+			if (!this.recordForm.recordTime) {
+				uni.showToast({
+					title: '请选择记录时间',
+					icon: 'none'
+				})
+				return
+			}
+
+			if (!this.recordForm.content && !this.hasTypeSpecificData()) {
+				uni.showToast({
+					title: '请填写记录内容',
+					icon: 'none'
+				})
+				return
+			}
+
+			try {
+				// 构建记录数据
+				const recordData = {
+					id: Date.now(),
+					petId: this.recordForm.petId,
+					type: this.recordType,
+					recordTime: this.recordForm.recordTime,
+					content: this.recordForm.content,
+					photos: this.recordForm.photos,
+					videos: this.recordForm.videos,
+					shareLevel: this.recordForm.shareLevel,
+					createTime: new Date().toISOString(),
+					...this.getTypeSpecificData()
+				}
+
+				// 保存到本地存储
+				let records = uni.getStorageSync('petRecords') || []
+				records.unshift(recordData)
+				uni.setStorageSync('petRecords', records)
+
+				console.log('保存记录:', recordData)
+
+				uni.showToast({
+					title: '保存成功',
+					icon: 'success'
+				})
+
+				setTimeout(() => {
+					uni.navigateBack({
+						delta: 2 // 返回到宠物详情页
+					})
+				}, 1500)
+
+			} catch (error) {
+				console.error('保存记录失败:', error)
+				uni.showToast({
+					title: '保存失败',
+					icon: 'error'
+				})
+			}
+		},
+
+		hasTypeSpecificData() {
+			switch (this.recordType) {
+				case 'weight':
+					return !!this.recordForm.weight
+				case 'food':
+					return !!this.recordForm.foodType || !!this.recordForm.amount
+				case 'water':
+					return !!this.recordForm.waterAmount
+				case 'medicine':
+					return !!this.recordForm.medicineName || !!this.recordForm.dosage
+				default:
+					return false
+			}
+		},
+		
+		getTypeSpecificData() {
+			const data = {}
+			
+			switch (this.recordType) {
+				case 'weight':
+					data.weight = this.recordForm.weight
+					break
+				case 'food':
+					data.foodType = this.recordForm.foodType
+					data.amount = this.recordForm.amount
+					break
+				case 'water':
+					data.waterAmount = this.recordForm.waterAmount
+					break
+				case 'toilet':
+					data.toiletType = this.recordForm.toiletType
+					break
+				case 'medicine':
+					data.medicineName = this.recordForm.medicineName
+					data.dosage = this.recordForm.dosage
+					break
+			}
+			
+			return data
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.add-record-container {
+	background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
+	min-height: 100vh;
+	padding-bottom: 120rpx;
+}
+
+.form-content {
+	padding: 30rpx;
+}
+
+.form-group {
+	background: rgba(255, 255, 255, 0.95);
+	backdrop-filter: blur(10rpx);
+	border-radius: 24rpx;
+	margin-bottom: 20rpx;
+	box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.1);
+	overflow: hidden;
+}
+
+.form-item {
+	padding: 40rpx 30rpx;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	transition: all 0.3s ease;
+
+	&:active {
+		background: rgba(255, 138, 128, 0.05);
+	}
+
+	.form-label {
+		font-size: 32rpx;
+		color: #333333;
+		font-weight: 500;
+	}
+
+	.form-value {
+		display: flex;
+		align-items: center;
+		gap: 16rpx;
+
+		.value-text {
+			font-size: 32rpx;
+			color: #666666;
+		}
+	}
+
+	.form-input {
+		display: flex;
+		align-items: center;
+		gap: 16rpx;
+		flex: 1;
+		justify-content: flex-end;
+
+		.input-field {
+			text-align: right;
+			font-size: 32rpx;
+			color: #333333;
+			border: none;
+			outline: none;
+			background: transparent;
+			min-width: 200rpx;
+
+			&::placeholder {
+				color: #cccccc;
+				font-size: 32rpx;
+			}
+		}
+
+		.unit {
+			font-size: 32rpx;
+			color: #FF8A80;
+			font-weight: 500;
+		}
+	}
+}
+
+.form-divider {
+	height: 1rpx;
+	background: rgba(0, 0, 0, 0.05);
+	margin: 0 30rpx;
+}
+
+.description-group {
+	padding: 40rpx 30rpx;
+
+	.form-label {
+		font-size: 32rpx;
+		color: #333333;
+		font-weight: 500;
+		margin-bottom: 24rpx;
+	}
+
+	.description-input {
+		margin-bottom: 40rpx;
+
+		.textarea-field {
+			width: 100%;
+			min-height: 300rpx;
+			font-size: 32rpx;
+			color: #333333;
+			border: none;
+			outline: none;
+			background: transparent;
+			resize: none;
+			line-height: 1.6;
+
+			&::placeholder {
+				color: #cccccc;
+				font-size: 32rpx;
+			}
+		}
+	}
+
+	.media-upload {
+		display: flex;
+		gap: 40rpx;
+
+		.media-item {
+			width: 100rpx;
+			height: 100rpx;
+			background: rgba(255, 138, 128, 0.1);
+			border-radius: 20rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			transition: all 0.3s ease;
+
+			&:active {
+				transform: scale(0.95);
+				background: rgba(255, 138, 128, 0.2);
+			}
+		}
+	}
+}
+
+.privacy-group {
+	padding: 40rpx 30rpx;
+
+	.privacy-item {
+		display: flex;
+		align-items: center;
+		gap: 20rpx;
+		padding: 16rpx 0;
+		transition: all 0.3s ease;
+
+		&:active {
+			background: rgba(255, 138, 128, 0.05);
+			border-radius: 12rpx;
+			margin: 0 -16rpx;
+			padding: 16rpx;
+		}
+
+		.radio-icon {
+			width: 36rpx;
+			height: 36rpx;
+			border: 3rpx solid #ddd;
+			border-radius: 50%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			transition: all 0.3s ease;
+
+			&.active {
+				border-color: #FF8A80;
+				background: #FF8A80;
+			}
+
+			.radio-inner {
+				width: 12rpx;
+				height: 12rpx;
+				background: #ffffff;
+				border-radius: 50%;
+			}
+		}
+
+		.privacy-text {
+			font-size: 32rpx;
+			color: #333333;
+			font-weight: 500;
+		}
+	}
+
+	.privacy-desc {
+		font-size: 26rpx;
+		color: #999999;
+		line-height: 1.6;
+		margin-left: 56rpx;
+		margin-top: 16rpx;
+		padding: 20rpx;
+		background: rgba(255, 138, 128, 0.05);
+		border-radius: 12rpx;
+	}
+}
+
+.save-button-container {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	padding: 30rpx;
+	background: rgba(255, 255, 255, 0.95);
+	backdrop-filter: blur(20rpx);
+	border-top: 1rpx solid rgba(255, 138, 128, 0.1);
+
+	.save-button {
+		width: 100%;
+		height: 96rpx;
+		background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 50%, #FECFEF 100%);
+		color: #ffffff;
+		font-size: 36rpx;
+		font-weight: 600;
+		border: none;
+		border-radius: 48rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.4);
+		transition: all 0.3s ease;
+
+		&:active {
+			transform: scale(0.98);
+			background: linear-gradient(135deg, #FF7043 0%, #FF8A65 50%, #FFAB91 100%);
+			box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.6);
+		}
+	}
+}
+</style>
diff --git a/pages/pets/add-record-simple.vue b/pages/pets/add-record-simple.vue
index 0fb37c4..c841386 100644
--- a/pages/pets/add-record-simple.vue
+++ b/pages/pets/add-record-simple.vue
@@ -1,88 +1,90 @@
 <template>
   <view class="add-record-container">
-    <u-navbar title="添加记录" left-icon="arrow-left" @left-click="goBack">
+    <u-navbar title="添加记录" left-icon="arrow-left" @left-click="goBack" bg-color="#FF8A80">
       <template #right>
-        <u-text text="保存" color="#ff6b6b" @click="saveRecord"></u-text>
+        <u-text text="保存" color="#ffffff" @click="saveRecord"></u-text>
       </template>
     </u-navbar>
 
-    <u-form ref="recordFormRef" :model="recordForm" :rules="rules" label-width="80">
-      <!-- 记录类型选择 -->
-      <u-card title="记录类型" :padding="20" margin="20">
-        <view class="category-grid">
-          <view 
-            class="category-item" 
-            v-for="category in recordCategories" 
-            :key="category.value"
-            @click="selectCategory(category.value)"
-          >
-            <view class="category-icon" :class="{ active: recordForm.category === category.value }">
-              <u-icon :name="category.icon" size="24" :color="recordForm.category === category.value ? '#ffffff' : '#666666'"></u-icon>
+    <view class="content-area">
+      <u-form ref="recordFormRef" :model="recordForm" :rules="rules" label-width="160rpx">
+        <!-- 记录类型选择 -->
+        <u-card title="记录类型" :padding="30" margin="20" :head-style="{ fontSize: '32rpx', fontWeight: 'bold' }">
+          <view class="category-grid">
+            <view
+              class="category-item"
+              v-for="category in recordCategories"
+              :key="category.value"
+              @click="selectCategory(category.value)"
+            >
+              <view class="category-icon" :class="{ active: recordForm.category === category.value }">
+                <u-icon :name="category.icon" size="24" :color="recordForm.category === category.value ? '#ffffff' : '#FF8A80'"></u-icon>
+              </view>
+              <u-text :text="category.label" size="12" :color="recordForm.category === category.value ? '#FF8A80' : '#666666'" bold></u-text>
             </view>
-            <u-text :text="category.label" size="12" :color="recordForm.category === category.value ? '#ff6b6b' : '#666666'"></u-text>
           </view>
-        </view>
-      </u-card>
+        </u-card>
 
-      <!-- 基础信息 -->
-      <u-card title="基础信息" :padding="20" margin="20">
-        <u-form-item label="记录时间" prop="recordTime">
-          <u-input 
-            v-model="recordForm.recordTime" 
-            placeholder="选择记录时间"
-            readonly
-            @click="showDatePicker = true"
-          ></u-input>
-        </u-form-item>
+        <!-- 基础信息 -->
+        <u-card title="基础信息" :padding="30" margin="20" :head-style="{ fontSize: '32rpx', fontWeight: 'bold' }">
+          <u-form-item label="记录时间" prop="recordTime">
+            <u-input
+              v-model="recordForm.recordTime"
+              placeholder="选择记录时间"
+              readonly
+              @click="showDatePicker = true"
+            ></u-input>
+          </u-form-item>
 
-        <u-form-item label="记录内容" prop="content">
-          <u-textarea 
-            v-model="recordForm.content" 
-            placeholder="描述一下具体情况..."
-            maxlength="500"
-            count
-          ></u-textarea>
-        </u-form-item>
-      </u-card>
+          <u-form-item label="记录内容" prop="content">
+            <u-textarea
+              v-model="recordForm.content"
+              placeholder="描述一下具体情况..."
+              maxlength="500"
+              count
+            ></u-textarea>
+          </u-form-item>
+        </u-card>
 
-      <!-- 图片上传 -->
-      <u-card title="添加图片" :padding="20" margin="20">
-        <view class="photo-upload-area">
-          <view class="photo-grid">
-            <view class="photo-item" v-for="(photo, index) in recordForm.photos" :key="index">
-              <u-image :src="photo" width="80px" height="80px" border-radius="8px"></u-image>
-              <view class="photo-delete" @click="removePhoto(index)">
-                <u-icon name="close-circle-fill" size="16" color="#ff6b6b"></u-icon>
+        <!-- 图片上传 -->
+        <u-card title="添加图片" :padding="30" margin="20" :head-style="{ fontSize: '32rpx', fontWeight: 'bold' }">
+          <view class="photo-upload-area">
+            <view class="photo-grid">
+              <view class="photo-item" v-for="(photo, index) in recordForm.photos" :key="index">
+                <u-image :src="photo" width="140rpx" height="140rpx" border-radius="12rpx"></u-image>
+                <view class="photo-delete" @click="removePhoto(index)">
+                  <u-icon name="close-circle-fill" size="16" color="#FF8A80"></u-icon>
+                </view>
+              </view>
+              <view class="photo-add" @click="choosePhotos" v-if="recordForm.photos.length < 9">
+                <u-icon name="camera-fill" size="24" color="#cccccc"></u-icon>
+                <u-text text="添加图片" size="12" color="#cccccc"></u-text>
               </view>
             </view>
-            <view class="photo-add" @click="choosePhotos" v-if="recordForm.photos.length < 9">
-              <u-icon name="camera-fill" size="24" color="#cccccc"></u-icon>
-              <u-text text="添加图片" size="12" color="#cccccc"></u-text>
-            </view>
+            <u-text :text="`${recordForm.photos.length}/9`" size="12" color="#999" style="margin-top: 20rpx;"></u-text>
           </view>
-          <u-text :text="`${recordForm.photos.length}/9`" size="12" color="#999" style="margin-top: 10px;"></u-text>
-        </view>
-      </u-card>
+        </u-card>
 
-      <!-- 分享设置 -->
-      <u-card title="分享设置" :padding="20" margin="20">
-        <u-radio-group v-model="recordForm.shareLevel">
-          <view class="share-options">
-            <view class="share-option" v-for="option in shareOptions" :key="option.value">
-              <u-radio :name="option.value" :disabled="false">
-                <template #icon="{ checked }">
-                  <u-icon :name="checked ? 'checkmark-circle-fill' : 'circle'" :color="checked ? '#ff6b6b' : '#c8c9cc'" size="18"></u-icon>
-                </template>
-              </u-radio>
-              <view class="share-info">
-                <u-text :text="option.label" size="14" bold></u-text>
-                <u-text :text="option.desc" size="12" color="#999"></u-text>
+        <!-- 分享设置 -->
+        <u-card title="分享设置" :padding="30" margin="20" :head-style="{ fontSize: '32rpx', fontWeight: 'bold' }">
+          <u-radio-group v-model="recordForm.shareLevel">
+            <view class="share-options">
+              <view class="share-option" v-for="option in shareOptions" :key="option.value">
+                <u-radio :name="option.value" :disabled="false">
+                  <template #icon="{ checked }">
+                    <u-icon :name="checked ? 'checkmark-circle-fill' : 'circle'" :color="checked ? '#FF8A80' : '#c8c9cc'" size="18"></u-icon>
+                  </template>
+                </u-radio>
+                <view class="share-info">
+                  <u-text :text="option.label" size="14" bold></u-text>
+                  <u-text :text="option.desc" size="12" color="#999"></u-text>
+                </view>
               </view>
             </view>
-          </view>
-        </u-radio-group>
-      </u-card>
-    </u-form>
+          </u-radio-group>
+        </u-card>
+      </u-form>
+    </view>
 
     <!-- 日期选择器 -->
     <u-datetime-picker 
@@ -242,37 +244,46 @@ export default {
 
 <style lang="scss" scoped>
 .add-record-container {
-  background-color: #f8f9fa;
+  background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
   min-height: 100vh;
 }
 
+.content-area {
+  padding-top: 20rpx;
+  padding-bottom: 40rpx;
+}
+
 .category-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 15px;
-  margin-top: 10px;
+  gap: 20rpx;
 }
 
 .category-item {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 8px;
+  gap: 12rpx;
   cursor: pointer;
+  transition: transform 0.2s ease;
+
+  &:active {
+    transform: scale(0.95);
+  }
 }
 
 .category-icon {
-  width: 50px;
-  height: 50px;
-  border-radius: 25px;
-  background-color: #f5f5f5;
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 40rpx;
+  background: #f5f5f5;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease;
-  
+
   &.active {
-    background-color: #ff6b6b;
+    background: #FF8A80;
   }
 }
 
@@ -280,31 +291,32 @@ export default {
   .photo-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
-    gap: 10px;
+    gap: 15rpx;
   }
-  
+
   .photo-item {
     position: relative;
-    
+
     .photo-delete {
       position: absolute;
-      top: -5px;
-      right: -5px;
+      top: -8rpx;
+      right: -8rpx;
       background-color: #ffffff;
       border-radius: 50%;
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
     }
   }
-  
+
   .photo-add {
-    width: 80px;
-    height: 80px;
-    border: 2px dashed #cccccc;
-    border-radius: 8px;
+    width: 140rpx;
+    height: 140rpx;
+    border: 2rpx dashed #cccccc;
+    border-radius: 12rpx;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: 5px;
+    gap: 8rpx;
   }
 }
 
@@ -312,14 +324,14 @@ export default {
   .share-option {
     display: flex;
     align-items: center;
-    gap: 15px;
-    padding: 15px 0;
-    border-bottom: 1px solid #f0f0f0;
-    
+    gap: 20rpx;
+    padding: 20rpx 0;
+    border-bottom: 1rpx solid #f0f0f0;
+
     &:last-child {
       border-bottom: none;
     }
-    
+
     .share-info {
       flex: 1;
     }
diff --git a/pages/pets/pet-chat.vue b/pages/pets/pet-chat.vue
index 34216e3..ee27eeb 100644
--- a/pages/pets/pet-chat.vue
+++ b/pages/pets/pet-chat.vue
@@ -1,20 +1,25 @@
 <template>
   <view class="pet-chat-container">
-    <u-navbar :title="`与${petInfo.name}聊天`" left-icon="arrow-left" @left-click="goBack">
-      <template #right>
-        <u-icon name="more-circle" size="20" @click="showChatMenu"></u-icon>
-      </template>
-    </u-navbar>
-
-    <!-- 宠物信息卡片 -->
-    <view class="pet-info-card">
-      <u-avatar :src="petInfo.avatar || '/static/default-pet.png'" size="40" shape="circle"></u-avatar>
-      <view class="pet-info-text">
-        <u-text :text="petInfo.name" type="primary" size="14" bold></u-text>
-        <u-text :text="petInfo.personality" type="tips" size="12"></u-text>
-      </view>
-      <view class="chat-status">
-        <u-tag text="在线" type="success" size="mini"></u-tag>
+    <!-- 聊天头部 -->
+    <view class="chat-header">
+      <view class="header-content">
+        <view class="back-button" @click="goBack">
+          <u-icon name="arrow-left" size="18" color="#ffffff"></u-icon>
+        </view>
+        <view class="pet-info">
+          <view class="pet-avatar">
+            <image :src="petInfo.avatar || '/static/default-pet.png'" class="avatar-img"></image>
+          </view>
+          <view class="pet-details">
+            <text class="pet-name">与{{ petInfo.name }}聊天</text>
+            <text class="pet-status">在线</text>
+          </view>
+        </view>
+        <view class="header-actions">
+          <view class="action-button" @click="showChatMenu">
+            <u-icon name="more-dot-fill" size="18" color="#ffffff"></u-icon>
+          </view>
+        </view>
       </view>
     </view>
 
diff --git a/pages/pets/pet-detail.vue b/pages/pets/pet-detail.vue
index 5b46229..545190b 100644
--- a/pages/pets/pet-detail.vue
+++ b/pages/pets/pet-detail.vue
@@ -181,7 +181,7 @@ export default {
 		
 		addRecord() {
 			uni.navigateTo({
-				url: `/pages/pets/add-record-simple?petId=${this.petId}`
+				url: `/pages/pets/select-record-type?petId=${this.petId}`
 			})
 		},
 
diff --git a/pages/pets/pet-records.vue b/pages/pets/pet-records.vue
index 7d9311f..b889389 100644
--- a/pages/pets/pet-records.vue
+++ b/pages/pets/pet-records.vue
@@ -394,7 +394,7 @@ export default {
     // 添加记录
     const addRecord = () => {
       uni.navigateTo({
-        url: `/pages/pets/add-record-enhanced?petId=${state.petId}`
+        url: `/pages/pets/select-record-type?petId=${state.petId}`
       })
     }
 
diff --git a/pages/pets/pets.vue b/pages/pets/pets.vue
index 2aa0d2f..c89de6e 100644
--- a/pages/pets/pets.vue
+++ b/pages/pets/pets.vue
@@ -1,91 +1,122 @@
 <template>
 	<view class="pets-container">
-		<!-- 顶部信息栏 -->
-		<view class="top-info-bar">
-			<view class="info-content">
-				<view class="welcome-text">
-					<text class="main-title">🐾 我的宠物</text>
-					<text class="sub-title">{{ petsList.length }}只小可爱陪伴着你</text>
+		<!-- 标签切换容器 -->
+		<view class="tabs-container" v-if="petsList.length > 0">
+			<view class="tabs-header">
+				<view
+					class="tab-btn"
+					:class="{ active: currentTabIndex === index }"
+					v-for="(pet, index) in petsList"
+					:key="pet.id"
+					@click="switchTab(index)"
+				>
+					<view class="tab-avatar">{{ getPetEmoji(pet.breed) }}</view>
+					<view class="tab-name">{{ pet.name }}</view>
 				</view>
-				<view class="top-actions">
-					<view class="action-btn" @click="showQuickActions = true">
-						<u-icon name="apps" color="#FF8A80" size="20"></u-icon>
-					</view>
-					<view class="action-btn add-btn" @click="addPet">
-						<u-icon name="plus" color="#ffffff" size="18"></u-icon>
-					</view>
+				<view class="add-tab" @click="addPet">
+					<text style="font-size: 40rpx; margin-bottom: 8rpx;">➕</text>
+					<text style="font-size: 20rpx;">添加</text>
 				</view>
 			</view>
-		</view>
 
-		<!-- 统计卡片 -->
-		<view class="stats-card" v-if="petsList.length > 0">
-			<view class="stats-item">
-				<view class="stats-number">{{ totalRecords }}</view>
-				<view class="stats-label">记录</view>
-			</view>
-			<view class="stats-item">
-				<view class="stats-number">{{ totalDays }}</view>
-				<view class="stats-label">陪伴天数</view>
-			</view>
-			<view class="stats-item">
-				<view class="stats-number">{{ upcomingReminders }}</view>
-				<view class="stats-label">待办提醒</view>
-			</view>
-		</view>
-
-		<!-- 宠物列表 -->
-		<view class="pets-list" v-if="petsList.length > 0">
-			<view class="pet-card" v-for="pet in petsList" :key="pet.id" @click="viewPetDetail(pet)">
-				<!-- 宠物头像和基本信息 -->
-				<view class="pet-header">
-					<view class="pet-avatar-container">
-						<u-avatar :src="pet.avatar || '/static/default-pet.png'" size="70" shape="circle"></u-avatar>
-						<view class="pet-status" :class="pet.healthStatus || 'healthy'">
-							<u-icon :name="getHealthIcon(pet.healthStatus)" size="12" color="#ffffff"></u-icon>
+			<!-- 标签内容 -->
+			<view class="tab-content">
+				<view
+					class="tab-content-panel"
+					:class="{ active: currentTabIndex === index }"
+					v-for="(pet, index) in petsList"
+					:key="pet.id"
+				>
+					<!-- 宠物详情卡片 -->
+					<view class="pet-detail-card">
+						<view class="pet-main-avatar">
+							<text class="pet-emoji">{{ getPetEmoji(pet.breed) }}</text>
+							<view class="pet-status-ring" :class="pet.healthStatus || 'healthy'"></view>
+						</view>
+						<view class="pet-main-name">{{ pet.name }}</view>
+						<view class="pet-main-details">{{ pet.breed }} · {{ pet.age }}岁 · 陪伴{{ pet.companionDays }}天</view>
+						<view class="pet-main-tags">
+							<text
+								class="main-tag"
+								v-for="tag in (pet.personality || []).slice(0, 3)"
+								:key="tag"
+							>{{ tag }}</text>
 						</view>
 					</view>
-					<view class="pet-basic-info">
-						<view class="pet-name-row">
-							<text class="pet-name">{{ pet.name }}</text>
-							<view class="pet-gender" :class="pet.gender === '公' ? 'male' : 'female'">
-								<u-icon :name="pet.gender === '公' ? 'man' : 'woman'" size="12" color="#ffffff"></u-icon>
+
+					<!-- 数据统计网格 -->
+					<view class="pet-stats-grid">
+						<view class="stat-card">
+							<text class="stat-icon">⚖️</text>
+							<view class="stat-value">{{ pet.weight || '未知' }}</view>
+							<view class="stat-label">当前体重</view>
+						</view>
+						<view class="stat-card">
+							<text class="stat-icon">📝</text>
+							<view class="stat-value">{{ getPetRecordsCount(pet.id) }}</view>
+							<view class="stat-label">记录数量</view>
+						</view>
+						<view class="stat-card">
+							<text class="stat-icon">💰</text>
+							<view class="stat-value">¥{{ getPetMonthlyExpense(pet.id) }}</view>
+							<view class="stat-label">本月消费</view>
+						</view>
+					</view>
+
+					<!-- 操作按钮面板 -->
+					<view class="pet-actions-panel">
+						<view class="action-card" @click="addRecord(pet)">
+							<text class="action-icon">📝</text>
+							<view class="action-text">添加记录</view>
+						</view>
+						<view class="action-card" @click="chatWithPet(pet)">
+							<text class="action-icon">💬</text>
+							<view class="action-text">AI聊天</view>
+						</view>
+						<view class="action-card" @click="viewHealth(pet)">
+							<text class="action-icon">📊</text>
+							<view class="action-text">健康档案</view>
+						</view>
+						<view class="action-card" @click="viewTimeline(pet)">
+							<text class="action-icon">📸</text>
+							<view class="action-text">成长时光</view>
+						</view>
+					</view>
+
+					<!-- 最近活动时间线 -->
+					<view class="pet-timeline">
+						<view class="timeline-title">⏰ 最近活动</view>
+						<view class="timeline-item" v-for="(activity, actIndex) in getPetRecentActivities(pet.id)" :key="actIndex">
+							<view class="timeline-dot"></view>
+							<view class="timeline-content">
+								<view class="timeline-text">{{ activity.text }}</view>
+								<view class="timeline-time">{{ activity.time }}</view>
+							</view>
+							<view class="timeline-type">{{ activity.type }}</view>
+						</view>
+					</view>
+
+					<!-- 健康状态面板 -->
+					<view class="pet-health-panel">
+						<view class="health-title">❤️ 健康状态</view>
+						<view class="health-indicators">
+							<view class="health-indicator">
+								<view class="health-value">{{ getHealthStatus(pet, 'overall') }}</view>
+								<view class="health-label">整体健康</view>
+							</view>
+							<view class="health-indicator">
+								<view class="health-value">{{ getHealthStatus(pet, 'activity') }}</view>
+								<view class="health-label">活动水平</view>
+							</view>
+							<view class="health-indicator">
+								<view class="health-value">{{ getHealthStatus(pet, 'appetite') }}</view>
+								<view class="health-label">食欲状态</view>
+							</view>
+							<view class="health-indicator">
+								<view class="health-value">{{ getHealthStatus(pet, 'mood') }}</view>
+								<view class="health-label">情绪状态</view>
 							</view>
 						</view>
-						<text class="pet-breed">{{ pet.breed }}</text>
-						<text class="pet-age">{{ pet.age }}岁 · 陪伴{{ pet.companionDays }}天</text>
-					</view>
-				</view>
-
-				<!-- 宠物特征标签 -->
-				<view class="pet-tags" v-if="pet.personality && pet.personality.length > 0">
-					<u-tag
-						v-for="tag in pet.personality.slice(0, 3)"
-						:key="tag"
-						:text="tag"
-						type="primary"
-						size="mini"
-						plain
-					></u-tag>
-				</view>
-
-				<!-- 快捷操作按钮 -->
-				<view class="pet-actions">
-					<view class="action-item" @click.stop="addRecord(pet)">
-						<u-icon name="edit-pen" size="16" color="#81C784"></u-icon>
-						<text class="action-text">记录</text>
-					</view>
-					<view class="action-item" @click.stop="chatWithPet(pet)">
-						<u-icon name="chat" size="16" color="#64B5F6"></u-icon>
-						<text class="action-text">聊天</text>
-					</view>
-					<view class="action-item" @click.stop="viewHealth(pet)">
-						<u-icon name="heart" size="16" color="#FF8A80"></u-icon>
-						<text class="action-text">健康</text>
-					</view>
-					<view class="action-item" @click.stop="viewTimeline(pet)">
-						<u-icon name="clock" size="16" color="#FFB74D"></u-icon>
-						<text class="action-text">时光</text>
 					</view>
 				</view>
 			</view>
@@ -93,16 +124,58 @@
 
 		<!-- 空状态 -->
 		<view class="empty-state" v-else>
-			<image class="empty-image" src="/static/empty-pets.png" mode="aspectFit"></image>
+			<text class="empty-emoji">🐾</text>
 			<text class="empty-title">还没有小伙伴呢</text>
 			<text class="empty-desc">添加你的第一只宠物，开始记录美好时光吧~</text>
-			<u-button
-				class="add-first-pet-btn"
-				type="primary"
-				text="添加第一只宠物"
-				shape="round"
-				@click="addPet"
-			></u-button>
+			<view class="add-first-pet-btn" @click="addPet">
+				<text class="add-btn-text">添加第一只宠物</text>
+			</view>
+		</view>
+
+		<!-- 家庭概览 -->
+		<view class="summary-section" v-if="petsList.length > 0">
+			<view class="summary-title">📊 家庭概览</view>
+			<view class="summary-stats">
+				<view class="summary-card">
+					<view class="summary-number">{{ totalRecords }}</view>
+					<view class="summary-label">总记录数</view>
+				</view>
+				<view class="summary-card">
+					<view class="summary-number">¥{{ totalMonthlyExpense }}</view>
+					<view class="summary-label">本月消费</view>
+				</view>
+				<view class="summary-card">
+					<view class="summary-number">{{ petsList.length }}</view>
+					<view class="summary-label">家庭成员</view>
+				</view>
+				<view class="summary-card">
+					<view class="summary-number">{{ upcomingReminders }}</view>
+					<view class="summary-label">待办提醒</view>
+				</view>
+			</view>
+			<view class="quick-actions">
+				<view class="quick-btn" @click="navigateToRecords">
+					<text class="quick-icon">📝</text>
+					<text class="quick-text">快速记录</text>
+				</view>
+				<view class="quick-btn" @click="navigateToStats">
+					<text class="quick-icon">💰</text>
+					<text class="quick-text">记账</text>
+				</view>
+				<view class="quick-btn" @click="takePhoto">
+					<text class="quick-icon">📸</text>
+					<text class="quick-text">拍照</text>
+				</view>
+				<view class="quick-btn" @click="navigateToAdoption">
+					<text class="quick-icon">🏥</text>
+					<text class="quick-text">领养</text>
+				</view>
+			</view>
+		</view>
+
+		<!-- 浮动添加按钮 -->
+		<view class="floating-add" @click="addRecord(petsList[currentTabIndex])">
+			<text class="floating-add-icon">📝</text>
 		</view>
 
 		<!-- 快捷操作弹窗 -->
@@ -125,9 +198,9 @@
 						<u-icon name="bell" size="24" color="#FFB74D"></u-icon>
 						<text class="quick-action-text">提醒事项</text>
 					</view>
-					<view class="quick-action-item" @click="exportData">
-						<u-icon name="share" size="24" color="#FF8A80"></u-icon>
-						<text class="quick-action-text">数据导出</text>
+					<view class="quick-action-item" @click="navigateToSettings">
+						<u-icon name="setting" size="24" color="#FF8A80"></u-icon>
+						<text class="quick-action-text">设置</text>
 					</view>
 				</view>
 			</view>
@@ -143,20 +216,49 @@ export default {
 			showQuickActions: false,
 			totalRecords: 0,
 			totalDays: 0,
-			upcomingReminders: 0
+			upcomingReminders: 0,
+			currentTabIndex: 0,
+			petRecords: [],
+			petExpenses: []
 		}
 	},
 	onShow() {
 		this.loadPets()
 		this.loadStatistics()
+		this.loadPetRecords()
+		this.loadPetExpenses()
 	},
 	computed: {
 		// 计算总陪伴天数
 		totalCompanionDays() {
 			return this.petsList.reduce((total, pet) => total + (pet.companionDays || 0), 0)
+		},
+		// 计算总月消费
+		totalMonthlyExpense() {
+			return this.petExpenses.reduce((total, expense) => total + (expense.amount || 0), 0)
 		}
 	},
 	methods: {
+		// 标签切换
+		switchTab(index) {
+			this.currentTabIndex = index
+		},
+
+		// 获取宠物表情符号
+		getPetEmoji(breed) {
+			const emojiMap = {
+				'橘猫': '🐱',
+				'金毛': '🐶',
+				'垂耳兔': '🐰',
+				'哈士奇': '🐕',
+				'波斯猫': '😸',
+				'泰迪': '🐩',
+				'仓鼠': '🐹',
+				'鹦鹉': '🦜'
+			}
+			return emojiMap[breed] || '🐾'
+		},
+
 		loadPets() {
 			try {
 				let pets = uni.getStorageSync('pets') || []
@@ -191,6 +293,20 @@ export default {
 							healthStatus: 'healthy',
 							personality: ['温顺', '聪明', '忠诚'],
 							lastRecord: '2024-01-14'
+						},
+						{
+							id: 3,
+							name: '小灰',
+							breed: '垂耳兔',
+							age: 1,
+							companionDays: 180,
+							avatar: '/static/default-pet.png',
+							gender: '母',
+							weight: '1.2kg',
+							birthday: '2023-06-15',
+							healthStatus: 'healthy',
+							personality: ['安静', '可爱', '乖巧'],
+							lastRecord: '2024-01-13'
 						}
 					]
 					// 保存模拟数据到本地存储
@@ -204,11 +320,36 @@ export default {
 			}
 		},
 
+		loadPetRecords() {
+			try {
+				const records = uni.getStorageSync('petRecords') || []
+				this.petRecords = records
+			} catch (error) {
+				console.error('加载宠物记录失败', error)
+				this.petRecords = []
+			}
+		},
+
+		loadPetExpenses() {
+			try {
+				// 模拟宠物消费数据
+				const expenses = [
+					{ petId: 1, amount: 580, month: '2024-01' },
+					{ petId: 2, amount: 890, month: '2024-01' },
+					{ petId: 3, amount: 120, month: '2024-01' }
+				]
+				this.petExpenses = expenses
+			} catch (error) {
+				console.error('加载宠物消费失败', error)
+				this.petExpenses = []
+			}
+		},
+
 		loadStatistics() {
 			try {
 				// 加载统计数据
 				const records = uni.getStorageSync('petRecords') || []
-				this.totalRecords = records.length
+				this.totalRecords = records.length || 190
 
 				// 计算总陪伴天数
 				this.totalDays = this.petsList.reduce((total, pet) => total + (pet.companionDays || 0), 0)
@@ -220,6 +361,51 @@ export default {
 			}
 		},
 
+		// 获取宠物记录数量
+		getPetRecordsCount(petId) {
+			const petRecords = this.petRecords.filter(record => record.petId === petId)
+			const mockCounts = { 1: 89, 2: 67, 3: 34 }
+			return petRecords.length || mockCounts[petId] || 0
+		},
+
+		// 获取宠物月消费
+		getPetMonthlyExpense(petId) {
+			const expense = this.petExpenses.find(exp => exp.petId === petId)
+			return expense ? expense.amount : 0
+		},
+
+		// 获取宠物最近活动
+		getPetRecentActivities(petId) {
+			const activities = {
+				1: [
+					{ text: '完成了今天的早餐', time: '2小时前', type: '饮食' },
+					{ text: '和主人玩了15分钟', time: '4小时前', type: '互动' },
+					{ text: '午睡了2小时', time: '6小时前', type: '休息' }
+				],
+				2: [
+					{ text: '外出散步30分钟', time: '1小时前', type: '运动' },
+					{ text: '完成了午餐', time: '3小时前', type: '饮食' },
+					{ text: '在院子里玩耍', time: '5小时前', type: '互动' }
+				],
+				3: [
+					{ text: '吃了新鲜胡萝卜', time: '1小时前', type: '饮食' },
+					{ text: '在笼子里活动', time: '2小时前', type: '运动' },
+					{ text: '安静地休息', time: '4小时前', type: '休息' }
+				]
+			}
+			return activities[petId] || []
+		},
+
+		// 获取健康状态
+		getHealthStatus(pet, type) {
+			const healthData = {
+				1: { overall: '优秀', activity: '正常', appetite: '良好', mood: '稳定' },
+				2: { overall: '优秀', activity: '活跃', appetite: '良好', mood: '愉快' },
+				3: { overall: '良好', activity: '正常', appetite: '良好', mood: '平静' }
+			}
+			return healthData[pet.id] ? healthData[pet.id][type] : '正常'
+		},
+
 		getHealthIcon(status) {
 			const iconMap = {
 				healthy: 'checkmark',
@@ -249,7 +435,7 @@ export default {
 
 		addRecord(pet) {
 			uni.navigateTo({
-				url: `/pages/pets/add-record-simple?petId=${pet.id}`
+				url: `/pages/pets/select-record-type?petId=${pet.id}`
 			})
 		},
 
@@ -265,25 +451,60 @@ export default {
 			})
 		},
 
+		// 导航方法
+		navigateToAdoption() {
+			uni.navigateTo({
+				url: '/pages/adoption/adoption'
+			})
+		},
+
+		takePhoto() {
+			uni.chooseImage({
+				count: 1,
+				sizeType: ['original', 'compressed'],
+				sourceType: ['camera'],
+				success: (res) => {
+					uni.showToast({
+						title: '拍照成功',
+						icon: 'success'
+					})
+				},
+				fail: () => {
+					uni.showToast({
+						title: '拍照失败',
+						icon: 'none'
+					})
+				}
+			})
+		},
+
 		// 快捷操作方法
 		navigateToRecords() {
 			this.showQuickActions = false
 			uni.navigateTo({
-				url: '/pages/pets/all-records'
+				url: '/pages/pets/pet-records'
 			})
 		},
 
 		navigateToStats() {
 			this.showQuickActions = false
 			uni.navigateTo({
-				url: '/pages/pets/statistics'
+				url: '/pages/pets/health-charts'
 			})
 		},
 
 		navigateToReminders() {
+			this.showQuickActions = false
+			uni.showToast({
+				title: '提醒功能开发中',
+				icon: 'none'
+			})
+		},
+
+		navigateToSettings() {
 			this.showQuickActions = false
 			uni.navigateTo({
-				url: '/pages/pets/reminders'
+				url: '/pages/profile/profile'
 			})
 		},
 
@@ -300,227 +521,351 @@ export default {
 
 <style lang="scss" scoped>
 .pets-container {
-	background: linear-gradient(135deg, #FFF8F0 0%, #F8F9FA 100%);
+	background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
 	min-height: 100vh;
 	padding-bottom: 20rpx;
+	padding-top: 20rpx;
 }
 
-/* 顶部信息栏 */
-.top-info-bar {
-	background: linear-gradient(135deg, #FF8A80 0%, #FFB74D 100%);
-	padding: 30rpx;
-	border-radius: 0 0 40rpx 40rpx;
-	box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.3);
+/* 标签切换容器 */
+.tabs-container {
+	background: rgba(255, 255, 255, 0.85);
+	margin: 20rpx 30rpx 30rpx;
+	border-radius: 40rpx;
+	backdrop-filter: blur(20rpx);
+	overflow: hidden;
+	box-shadow: 0 16rpx 64rpx rgba(255, 138, 128, 0.2);
+	border: 2rpx solid rgba(255, 255, 255, 0.3);
+}
 
-	.info-content {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
+.tabs-header {
+	display: flex;
+	background: linear-gradient(135deg, rgba(255, 138, 128, 0.2) 0%, rgba(255, 182, 193, 0.2) 100%);
+	padding: 10rpx;
+	border-radius: 40rpx 40rpx 0 0;
+	position: relative;
+}
+
+.tab-btn {
+	flex: 1;
+	background: none;
+	border: none;
+	padding: 24rpx 16rpx;
+	text-align: center;
+	border-radius: 30rpx;
+	transition: all 0.3s ease;
+	position: relative;
+	z-index: 2;
+
+	&.active {
+		background: rgba(255, 255, 255, 0.9);
+		box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.2);
 	}
 
-	.welcome-text {
-		.main-title {
-			color: #ffffff;
-			font-size: 36rpx;
-			font-weight: bold;
-			display: block;
-		}
-
-		.sub-title {
-			color: rgba(255, 255, 255, 0.8);
-			font-size: 24rpx;
-			margin-top: 8rpx;
-			display: block;
-		}
-	}
-
-	.top-actions {
-		display: flex;
-		gap: 20rpx;
-		align-items: center;
-	}
-
-	.action-btn {
-		width: 72rpx;
-		height: 72rpx;
-		border-radius: 36rpx;
-		background: rgba(255, 255, 255, 0.2);
+	.tab-avatar {
+		width: 48rpx;
+		height: 48rpx;
+		border-radius: 24rpx;
+		background: linear-gradient(135deg, #FF8A80, #FFB6C1);
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		backdrop-filter: blur(10rpx);
+		font-size: 28rpx;
+		margin: 0 auto 8rpx;
+	}
 
-		&.add-btn {
-			background: rgba(255, 255, 255, 0.3);
-		}
+	.tab-name {
+		font-size: 24rpx;
+		font-weight: bold;
+		color: #333;
 	}
 }
 
-/* 统计卡片 */
-.stats-card {
-	background: #ffffff;
-	margin: 30rpx;
-	padding: 40rpx;
-	border-radius: 24rpx;
-	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
+.add-tab {
+	width: 120rpx;
+	background: none;
+	border: none;
+	padding: 24rpx 16rpx;
+	text-align: center;
+	border-radius: 30rpx;
+	transition: all 0.3s ease;
+	color: #FF8A80;
 	display: flex;
-	justify-content: space-around;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
 
-	.stats-item {
-		text-align: center;
-
-		.stats-number {
-			font-size: 48rpx;
-			font-weight: bold;
-			color: #FF8A80;
-			line-height: 1;
-		}
-
-		.stats-label {
-			font-size: 24rpx;
-			color: #999999;
-			margin-top: 8rpx;
-		}
+	&:active {
+		background: rgba(255, 138, 128, 0.15);
 	}
 }
 
-/* 宠物列表 */
-.pets-list {
-	padding: 0 30rpx;
+/* 标签内容 */
+.tab-content {
+	padding: 50rpx;
 }
 
-.pet-card {
-	background: #ffffff;
-	border-radius: 24rpx;
-	padding: 30rpx;
-	margin-bottom: 30rpx;
-	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
-	position: relative;
-	overflow: hidden;
+.tab-content-panel {
+	display: none;
 
-	&::before {
-		content: '';
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		height: 8rpx;
-		background: linear-gradient(90deg, #FF8A80, #81C784, #64B5F6);
+	&.active {
+		display: block;
 	}
+}
 
-	.pet-header {
+/* 宠物详情卡片 */
+.pet-detail-card {
+	text-align: center;
+	margin-bottom: 50rpx;
+
+	.pet-main-avatar {
+		width: 160rpx;
+		height: 160rpx;
+		border-radius: 80rpx;
+		background: linear-gradient(135deg, #FF8A80, #FFB6C1);
 		display: flex;
 		align-items: center;
-		margin-bottom: 24rpx;
-	}
-
-	.pet-avatar-container {
+		justify-content: center;
+		margin: 0 auto 30rpx;
 		position: relative;
-		margin-right: 24rpx;
+		box-shadow: 0 16rpx 50rpx rgba(255, 138, 128, 0.25);
 
-		.pet-status {
+		.pet-emoji {
+			font-size: 80rpx;
+		}
+
+		.pet-status-ring {
 			position: absolute;
-			bottom: -4rpx;
-			right: -4rpx;
-			width: 32rpx;
-			height: 32rpx;
-			border-radius: 16rpx;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			border: 4rpx solid #ffffff;
+			top: -8rpx;
+			left: -8rpx;
+			right: -8rpx;
+			bottom: -8rpx;
+			border: 6rpx solid #4CAF50;
+			border-radius: 50%;
+			border-top-color: transparent;
+			animation: spin 3s linear infinite;
 
 			&.healthy {
-				background: #81C784;
+				border-color: #4CAF50;
+				border-top-color: transparent;
 			}
 
 			&.warning {
-				background: #FFB74D;
+				border-color: #FFB74D;
+				border-top-color: transparent;
 			}
 
 			&.sick {
-				background: #FF8A80;
+				border-color: #FF8A80;
+				border-top-color: transparent;
 			}
 		}
 	}
 
-	.pet-basic-info {
-		flex: 1;
-
-		.pet-name-row {
-			display: flex;
-			align-items: center;
-			margin-bottom: 8rpx;
-		}
-
-		.pet-name {
-			font-size: 32rpx;
-			font-weight: bold;
-			color: #333333;
-			margin-right: 16rpx;
-		}
-
-		.pet-gender {
-			width: 32rpx;
-			height: 32rpx;
-			border-radius: 16rpx;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-
-			&.male {
-				background: #64B5F6;
-			}
-
-			&.female {
-				background: #F06292;
-			}
-		}
-
-		.pet-breed {
-			font-size: 28rpx;
-			color: #666666;
-			margin-bottom: 8rpx;
-			display: block;
-		}
-
-		.pet-age {
-			font-size: 24rpx;
-			color: #999999;
-			display: block;
-		}
+	.pet-main-name {
+		font-size: 44rpx;
+		font-weight: bold;
+		color: #333;
+		margin-bottom: 16rpx;
 	}
 
-	.pet-tags {
-		margin-bottom: 24rpx;
+	.pet-main-details {
+		font-size: 28rpx;
+		color: #666;
+		margin-bottom: 30rpx;
+	}
+
+	.pet-main-tags {
 		display: flex;
+		justify-content: center;
 		gap: 16rpx;
+		margin-bottom: 40rpx;
 		flex-wrap: wrap;
+
+		.main-tag {
+			background: #E8F5E8;
+			color: #4CAF50;
+			padding: 12rpx 24rpx;
+			border-radius: 24rpx;
+			font-size: 24rpx;
+			font-weight: bold;
+		}
+	}
+}
+
+@keyframes spin {
+	0% { transform: rotate(0deg); }
+	100% { transform: rotate(360deg); }
+}
+
+/* 数据统计网格 */
+.pet-stats-grid {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	gap: 30rpx;
+	margin-bottom: 50rpx;
+
+	.stat-card {
+		background: #F8F9FA;
+		padding: 30rpx 20rpx;
+		border-radius: 30rpx;
+		text-align: center;
+
+		.stat-icon {
+			font-size: 40rpx;
+			margin-bottom: 16rpx;
+			display: block;
+		}
+
+		.stat-value {
+			font-size: 36rpx;
+			font-weight: bold;
+			color: #333;
+			margin-bottom: 8rpx;
+		}
+
+		.stat-label {
+			font-size: 22rpx;
+			color: #999;
+		}
+	}
+}
+
+/* 操作按钮面板 */
+.pet-actions-panel {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 24rpx;
+	margin-bottom: 50rpx;
+
+	.action-card {
+		background: linear-gradient(135deg, #FF8A80, #FFB6C1);
+		color: white;
+		border: none;
+		padding: 30rpx;
+		border-radius: 30rpx;
+		text-align: center;
+		transition: transform 0.2s;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+
+		&:active {
+			transform: translateY(-4rpx);
+		}
+
+		.action-icon {
+			font-size: 40rpx;
+			margin-bottom: 16rpx;
+			display: block;
+		}
+
+		.action-text {
+			font-size: 28rpx;
+			font-weight: bold;
+		}
+	}
+}
+
+/* 时间线 */
+.pet-timeline {
+	background: #F8F9FA;
+	border-radius: 30rpx;
+	padding: 40rpx;
+	margin-bottom: 50rpx;
+
+	.timeline-title {
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #333;
+		margin-bottom: 30rpx;
+		display: flex;
+		align-items: center;
+		gap: 16rpx;
 	}
 
-	.pet-actions {
+	.timeline-item {
 		display: flex;
-		justify-content: space-around;
-		padding-top: 24rpx;
-		border-top: 2rpx solid #F5F5F5;
+		align-items: center;
+		gap: 24rpx;
+		padding: 20rpx 0;
+		border-bottom: 2rpx solid #E9ECEF;
 
-		.action-item {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			gap: 8rpx;
-			padding: 16rpx;
-			border-radius: 16rpx;
-			transition: all 0.3s ease;
+		&:last-child {
+			border-bottom: none;
+		}
 
-			&:active {
-				background: #F5F5F5;
-				transform: scale(0.95);
+		.timeline-dot {
+			width: 16rpx;
+			height: 16rpx;
+			border-radius: 8rpx;
+			background: #FF8A80;
+			flex-shrink: 0;
+		}
+
+		.timeline-content {
+			flex: 1;
+
+			.timeline-text {
+				font-size: 26rpx;
+				color: #333;
+				margin-bottom: 4rpx;
 			}
 
-			.action-text {
+			.timeline-time {
 				font-size: 22rpx;
-				color: #666666;
+				color: #999;
+			}
+		}
+
+		.timeline-type {
+			background: #E3F2FD;
+			color: #2196F3;
+			padding: 4rpx 12rpx;
+			border-radius: 16rpx;
+			font-size: 18rpx;
+		}
+	}
+}
+
+/* 健康状态面板 */
+.pet-health-panel {
+	background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
+	color: white;
+	border-radius: 30rpx;
+	padding: 40rpx;
+	margin-bottom: 50rpx;
+
+	.health-title {
+		font-size: 32rpx;
+		font-weight: bold;
+		margin-bottom: 30rpx;
+		display: flex;
+		align-items: center;
+		gap: 16rpx;
+	}
+
+	.health-indicators {
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		gap: 30rpx;
+
+		.health-indicator {
+			background: rgba(255, 255, 255, 0.2);
+			border-radius: 24rpx;
+			padding: 24rpx;
+			text-align: center;
+
+			.health-value {
+				font-size: 32rpx;
+				font-weight: bold;
+				margin-bottom: 8rpx;
+			}
+
+			.health-label {
+				font-size: 22rpx;
+				opacity: 0.9;
 			}
 		}
 	}
@@ -535,40 +880,153 @@ export default {
 	padding: 120rpx 60rpx;
 	text-align: center;
 
-	.empty-image {
-		width: 300rpx;
-		height: 300rpx;
+	.empty-emoji {
+		font-size: 200rpx;
 		margin-bottom: 40rpx;
 		opacity: 0.8;
 	}
 
 	.empty-title {
-		font-size: 32rpx;
+		font-size: 36rpx;
 		font-weight: bold;
-		color: #333333;
+		color: white;
 		margin-bottom: 16rpx;
 	}
 
 	.empty-desc {
 		font-size: 28rpx;
-		color: #999999;
+		color: rgba(255, 255, 255, 0.8);
 		line-height: 1.5;
 		margin-bottom: 60rpx;
 	}
 
 	.add-first-pet-btn {
-		width: 400rpx;
-		height: 88rpx;
-		background: linear-gradient(135deg, #FF8A80, #FFB74D);
-		border: none;
-		box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.4);
+		background: linear-gradient(135deg, #FF8A80, #FFB6C1);
+		padding: 24rpx 48rpx;
+		border-radius: 50rpx;
+		box-shadow: 0 16rpx 64rpx rgba(255, 138, 128, 0.4);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		.add-btn-text {
+			color: white;
+			font-size: 32rpx;
+			font-weight: bold;
+		}
+	}
+}
+
+/* 家庭概览 */
+.summary-section {
+	background: rgba(255, 255, 255, 0.95);
+	margin: 30rpx;
+	border-radius: 40rpx;
+	padding: 40rpx;
+	backdrop-filter: blur(40rpx);
+	box-shadow: 0 16rpx 64rpx rgba(0, 0, 0, 0.1);
+
+	.summary-title {
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #333;
+		margin-bottom: 30rpx;
+		text-align: center;
+	}
+
+	.summary-stats {
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		gap: 30rpx;
+		margin-bottom: 40rpx;
+
+		.summary-card {
+			background: linear-gradient(135deg, #FF8A80, #FFB6C1);
+			color: white;
+			padding: 30rpx;
+			border-radius: 30rpx;
+			text-align: center;
+
+			.summary-number {
+				font-size: 40rpx;
+				font-weight: bold;
+				margin-bottom: 8rpx;
+			}
+
+			.summary-label {
+				font-size: 24rpx;
+				opacity: 0.9;
+			}
+		}
+	}
+
+	.quick-actions {
+		display: grid;
+		grid-template-columns: repeat(4, 1fr);
+		gap: 20rpx;
+
+		.quick-btn {
+			background: #F8F9FA;
+			border: none;
+			border-radius: 24rpx;
+			padding: 24rpx 16rpx;
+			text-align: center;
+			transition: transform 0.2s;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+
+			&:active {
+				transform: translateY(-4rpx);
+			}
+
+			.quick-icon {
+				font-size: 32rpx;
+				margin-bottom: 8rpx;
+				display: block;
+			}
+
+			.quick-text {
+				font-size: 20rpx;
+				color: #666;
+				font-weight: bold;
+			}
+		}
+	}
+}
+
+/* 浮动添加按钮 */
+.floating-add {
+	position: fixed;
+	bottom: 60rpx;
+	right: 40rpx;
+	width: 112rpx;
+	height: 112rpx;
+	border-radius: 56rpx;
+	background: linear-gradient(135deg, #FF8A80, #FFB6C1);
+	color: white;
+	border: none;
+	box-shadow: 0 8rpx 40rpx rgba(255, 138, 128, 0.4);
+	transition: transform 0.3s;
+	z-index: 999;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	&:active {
+		transform: scale(1.1);
+	}
+
+	.floating-add-icon {
+		font-size: 48rpx;
 	}
 }
 
 /* 快捷操作弹窗 */
 .quick-actions-popup {
 	background: #ffffff;
-	border-radius: 20rpx 20rpx 0 0;
+	border-radius: 40rpx 40rpx 0 0;
 	padding: 40rpx 30rpx 60rpx;
 
 	.popup-header {
@@ -593,11 +1051,13 @@ export default {
 			display: flex;
 			flex-direction: column;
 			align-items: center;
+			justify-content: center;
 			gap: 16rpx;
 			padding: 24rpx 16rpx;
 			border-radius: 16rpx;
 			background: #F8F9FA;
 			transition: all 0.3s ease;
+			text-align: center;
 
 			&:active {
 				background: #E9ECEF;
@@ -613,49 +1073,25 @@ export default {
 	}
 }
 
-/* 微信小程序适配 */
+/* 响应式适配 */
 @media screen and (max-width: 375px) {
-	.custom-navbar {
-		padding: 15rpx 25rpx 25rpx;
+	.tabs-container,
+	.summary-section {
+		margin: 15rpx;
 	}
 
-	.stats-card {
-		margin: 25rpx;
+	.tab-content {
 		padding: 30rpx;
 	}
 
-	.pets-list {
-		padding: 0 25rpx;
+	.pet-stats-grid {
+		gap: 20rpx;
 	}
 
-	.pet-card {
-		padding: 25rpx;
-		margin-bottom: 25rpx;
+	.pet-actions-panel {
+		gap: 16rpx;
 	}
 }
 
-/* 深色模式适配 */
-@media (prefers-color-scheme: dark) {
-	.pets-container {
-		background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
-	}
-
-	.stats-card,
-	.pet-card {
-		background: #2d2d2d;
-		color: #ffffff;
-	}
-
-	.pet-name {
-		color: #ffffff !important;
-	}
-
-	.pet-breed {
-		color: #cccccc !important;
-	}
-
-	.pet-age {
-		color: #999999 !important;
-	}
-}
+/* 强制保持明亮主题，不受系统暗黑模式影响 */
 </style>
diff --git a/pages/pets/select-record-type.vue b/pages/pets/select-record-type.vue
new file mode 100644
index 0000000..209b7e8
--- /dev/null
+++ b/pages/pets/select-record-type.vue
@@ -0,0 +1,302 @@
+<template>
+	<view class="select-type-container">
+		<view class="content-area">
+			<!-- 快捷记录 -->
+			<view class="section">
+				<view class="section-header">
+					<view class="section-line"></view>
+					<text class="section-title">快捷记录</text>
+				</view>
+				<view class="type-grid">
+					<view class="type-item" @click="selectType('daily-note')">
+						<view class="type-icon">📝</view>
+						<text class="type-name">随手记</text>
+					</view>
+					<view class="type-item" @click="selectType('milestone')">
+						<view class="type-icon">⭐</view>
+						<text class="type-name">大事记</text>
+					</view>
+				</view>
+			</view>
+
+			<!-- 日常记录 -->
+			<view class="section">
+				<view class="section-header">
+					<view class="section-line"></view>
+					<text class="section-title">日常记录</text>
+				</view>
+				<view class="type-grid">
+					<view class="type-item" @click="selectType('weight')">
+						<view class="type-icon">⚖️</view>
+						<text class="type-name">体重</text>
+					</view>
+					<view class="type-item" @click="selectType('toilet')">
+						<view class="type-icon">🚽</view>
+						<text class="type-name">尿便</text>
+					</view>
+					<view class="type-item" @click="selectType('food')">
+						<view class="type-icon">🍽️</view>
+						<text class="type-name">饮食</text>
+					</view>
+					<view class="type-item" @click="selectType('water')">
+						<view class="type-icon">💧</view>
+						<text class="type-name">喝水</text>
+					</view>
+					<view class="type-item" @click="selectType('exercise')">
+						<view class="type-icon">🏃</view>
+						<text class="type-name">运动</text>
+					</view>
+				</view>
+			</view>
+
+			<!-- 健康记录 -->
+			<view class="section">
+				<view class="section-header">
+					<view class="section-line"></view>
+					<text class="section-title">健康记录</text>
+				</view>
+				<view class="type-grid">
+					<view class="type-item" @click="selectType('supplement')">
+						<view class="type-icon">💊</view>
+						<text class="type-name">保健品</text>
+					</view>
+					<view class="type-item" @click="selectType('abnormal')">
+						<view class="type-icon">⚠️</view>
+						<text class="type-name">异常</text>
+					</view>
+					<view class="type-item" @click="selectType('deworming')">
+						<view class="type-icon">🐛</view>
+						<text class="type-name">驱虫</text>
+					</view>
+					<view class="type-item" @click="selectType('vaccine')">
+						<view class="type-icon">💉</view>
+						<text class="type-name">疫苗</text>
+					</view>
+					<view class="type-item" @click="selectType('antiparasitic')">
+						<view class="type-icon">🛡️</view>
+						<text class="type-name">抗体水平</text>
+					</view>
+					<view class="type-item" @click="selectType('checkup')">
+						<view class="type-icon">🩺</view>
+						<text class="type-name">体检</text>
+					</view>
+					<view class="type-item" @click="selectType('illness')">
+						<view class="type-icon">🤒</view>
+						<text class="type-name">看病</text>
+					</view>
+					<view class="type-item" @click="selectType('medicine')">
+						<view class="type-icon">💊</view>
+						<text class="type-name">给药</text>
+					</view>
+					<view class="type-item" @click="selectType('hospital')">
+						<view class="type-icon">🏥</view>
+						<text class="type-name">住院</text>
+					</view>
+					<view class="type-item" @click="selectType('surgery')">
+						<view class="type-icon">🔪</view>
+						<text class="type-name">手术</text>
+					</view>
+				</view>
+			</view>
+
+			<!-- 洗护记录 -->
+			<view class="section">
+				<view class="section-header">
+					<view class="section-line"></view>
+					<text class="section-title">洗护记录</text>
+				</view>
+				<view class="type-grid">
+					<view class="type-item" @click="selectType('bath')">
+						<view class="type-icon">🛁</view>
+						<text class="type-name">洗澡</text>
+					</view>
+					<view class="type-item" @click="selectType('nail-trim')">
+						<view class="type-icon">✂️</view>
+						<text class="type-name">剪指甲</text>
+					</view>
+					<view class="type-item" @click="selectType('ear-clean')">
+						<view class="type-icon">👂</view>
+						<text class="type-name">洗耳朵</text>
+					</view>
+					<view class="type-item" @click="selectType('teeth-clean')">
+						<view class="type-icon">🦷</view>
+						<text class="type-name">刷牙</text>
+					</view>
+					<view class="type-item" @click="selectType('hair-trim')">
+						<view class="type-icon">💇</view>
+						<text class="type-name">梳毛</text>
+					</view>
+					<view class="type-item" @click="selectType('hair-cut')">
+						<view class="type-icon">✂️</view>
+						<text class="type-name">剃毛毛</text>
+					</view>
+					<view class="type-item" @click="selectType('beauty')">
+						<view class="type-icon">💅</view>
+						<text class="type-name">美容</text>
+					</view>
+					<view class="type-item" @click="selectType('anal-gland')">
+						<view class="type-icon">🍑</view>
+						<text class="type-name">挤肛门腺</text>
+					</view>
+					<view class="type-item" @click="selectType('eye-clean')">
+						<view class="type-icon">👁️</view>
+						<text class="type-name">擦眼屎</text>
+					</view>
+				</view>
+			</view>
+
+			<!-- 清洁记录 -->
+			<view class="section">
+				<view class="section-header">
+					<view class="section-line"></view>
+					<text class="section-title">清洁记录</text>
+				</view>
+				<view class="type-grid">
+					<view class="type-item" @click="selectType('disinfect')">
+						<view class="type-icon">🧴</view>
+						<text class="type-name">消毒</text>
+					</view>
+					<view class="type-item" @click="selectType('clean')">
+						<view class="type-icon">🧽</view>
+						<text class="type-name">清洁</text>
+					</view>
+					<view class="type-item" @click="selectType('change-sand')">
+						<view class="type-icon">📦</view>
+						<text class="type-name">换猫砂</text>
+					</view>
+					<view class="type-item" @click="selectType('wash-litter')">
+						<view class="type-icon">🧼</view>
+						<text class="type-name">洗猫砂盆</text>
+					</view>
+					<view class="type-item" @click="selectType('wash-food-bowl')">
+						<view class="type-icon">🍽️</view>
+						<text class="type-name">洗食盆</text>
+					</view>
+					<view class="type-item" @click="selectType('wash-water-bowl')">
+						<view class="type-icon">💧</view>
+						<text class="type-name">洗水盆</text>
+					</view>
+					<view class="type-item" @click="selectType('wash-toy')">
+						<view class="type-icon">🧸</view>
+						<text class="type-name">洗玩具</text>
+					</view>
+					<view class="type-item" @click="selectType('wash-cage')">
+						<view class="type-icon">🏠</view>
+						<text class="type-name">洗笼子</text>
+					</view>
+					<view class="type-item" @click="selectType('change-filter')">
+						<view class="type-icon">🔄</view>
+						<text class="type-name">换滤芯</text>
+					</view>
+					<view class="type-item" @click="selectType('change-pad')">
+						<view class="type-icon">🛏️</view>
+						<text class="type-name">换干燥剂</text>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			petId: ''
+		}
+	},
+	onLoad(options) {
+		this.petId = options.petId || '1'
+	},
+	methods: {
+		goBack() {
+			uni.navigateBack()
+		},
+		
+		selectType(type) {
+			// 根据类型跳转到对应的记录页面
+			uni.navigateTo({
+				url: `/pages/pets/add-record-form?petId=${this.petId}&type=${type}`
+			})
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.select-type-container {
+	background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
+	min-height: 100vh;
+	padding-bottom: env(safe-area-inset-bottom);
+}
+
+.content-area {
+	padding: 20rpx 30rpx 60rpx;
+	min-height: calc(100vh - 88rpx); /* 减去导航栏高度 */
+	box-sizing: border-box;
+}
+
+.section {
+	margin-bottom: 60rpx;
+}
+
+.section-header {
+	display: flex;
+	align-items: center;
+	margin-bottom: 30rpx;
+}
+
+.section-line {
+	width: 8rpx;
+	height: 32rpx;
+	background: #FF8A80;
+	border-radius: 4rpx;
+	margin-right: 20rpx;
+}
+
+.section-title {
+	font-size: 32rpx;
+	font-weight: bold;
+	color: #333;
+}
+
+.type-grid {
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+	gap: 20rpx;
+}
+
+.type-item {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 12rpx;
+	padding: 24rpx 16rpx;
+	background: rgba(255, 255, 255, 0.9);
+	border-radius: 20rpx;
+	backdrop-filter: blur(10rpx);
+	transition: all 0.3s ease;
+	min-height: 140rpx;
+	box-sizing: border-box;
+
+	&:active {
+		transform: scale(0.95);
+		background: rgba(255, 138, 128, 0.2);
+	}
+}
+
+.type-icon {
+	font-size: 40rpx;
+	line-height: 1;
+}
+
+.type-name {
+	font-size: 22rpx;
+	color: #333;
+	font-weight: 500;
+	text-align: center;
+	line-height: 1.2;
+	word-break: keep-all;
+}
+</style>