Ai_GirlFriend/xuniYou/pages/index/index.vue

<template>
	<view>
		<view>
			<view v-show="getBobbiesList.reg_step == 1 || getBobbiesList.reg_step == 2 || getBobbiesList.reg_step == 3">
				<uni-nav-bar fixed statusBar background-color="transparent" :border="false" title="定制专属女友"></uni-nav-bar>
				<view class="back"></view>
				<view class="body">
					<view class="list">
						<image class="list_logo" v-if="getBobbiesList.reg_step == 1"
							src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251231/a6d2dae70029b6465ea1f1f605f77258.png"
							mode="aspectFill"></image>
						<image class="list_logo" v-if="getBobbiesList.reg_step == 2"
							src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251231/69c72922c0e815086a30c370e7dbb42f.png"
							mode="aspectFill"></image>
						<image class="list_logo" v-if="getBobbiesList.reg_step == 3"
							src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251231/69c72922c0e815086a30c370e7dbb42f.png"
							mode="aspectFill"></image>
						<view class="list_content faj" v-if="getBobbiesList.reg_step == 1" @click="tocreate">
							<view class="list_title">完善个人资料</view>
							<image class="list_next" src="/static/images/index_next.png" mode="aspectFill"></image>
						</view>
						<view class="list_content faj" v-if="getBobbiesList.reg_step == 2" @click="tocreateLover">
							<view class="list_title">完善恋人资料
							</view>
							<image class="list_next" src="/static/images/index_next.png" mode="aspectFill"></image>
						</view>
						<view class="list_content faj" v-if="getBobbiesList.reg_step == 3" @click="togenerate">
							<view class="list_title">生成专属恋人
							</view>
							<image class="list_next" src="/static/images/index_next.png" mode="aspectFill"></image>
						</view>
						<view class="list_module faj">
							<view class="list_item" :class="{ 'list_active': getBobbiesList.reg_step == 1 }"></view>
							<view class="list_item" :class="{ 'list_active': getBobbiesList.reg_step == 2 }"></view>
							<view class="list_item" :class="{ 'list_active': getBobbiesList.reg_step == 3 }"></view>
						</view>
					</view>
				</view>
			</view>
			<view v-show="getBobbiesList.reg_step == 4">
				<!-- Tab 栏 - 固定在顶部 -->
				<view class="tab-container" v-if="getBobbiesList.reg_step == 4">
					<scroll-view class="tab-scroll" scroll-x="true" show-scrollbar="false" :scroll-into-view="tabIntoView" scroll-with-animation="true">
						<view class="tab-list">
							<view 
								v-for="(tab, index) in tabs" 
								:key="index"
								:id="'tab-' + index"
								class="tab-item"
								:class="{ 'active': currentTab === index }"
								@click="switchTab(index)">
								<text class="tab-name">{{ tab.name }}</text>
							</view>
						</view>
					</scroll-view>
				</view>
				
				<!-- Swiper 内容区域 - 自定义细线指示器 -->
				<swiper 
					v-if="getBobbiesList.reg_step == 4"
					class="swiper-container" 
					:current="currentTab" 
					@change="onSwiperChange"
					:duration="300"
					:indicator-dots="false">
					
					<!-- 商城页面 (index 0) - 精美设计 -->
					<swiper-item>
						<view class="swiper-content shop-page">
							<!-- 全屏商城背景 -->
							<view class="shop-hero" @click="openShopLink">
								<!-- 背景渐变 -->
								<view class="shop-hero-bg"></view>
								
								<!-- 装饰圆圈 -->
								<view class="shop-decoration">
									<view class="shop-circle shop-circle-1"></view>
									<view class="shop-circle shop-circle-2"></view>
									<view class="shop-circle shop-circle-3"></view>
									<view class="shop-circle shop-circle-4"></view>
								</view>
								
								<!-- 内容区域 -->
								<view class="shop-hero-content">
									<!-- 顶部标签 -->
									<view class="shop-hot-badge">
										<text class="shop-hot-icon">💎</text>
										<text class="shop-hot-text">精品商城</text>
									</view>
									
									<!-- 商城图标 -->
									<view class="shop-icon-wrapper">
										<image class="shop-main-icon" src="/static/images/member_logo.png" mode="aspectFit"></image>
										<view class="shop-icon-glow"></view>
									</view>
									
									<!-- 标题 -->
									<view class="shop-hero-title">超值优惠</view>
									<view class="shop-hero-subtitle">海量道具 · 限时特惠 · 每日上新</view>
									
									<!-- 特色标签 -->
									<view class="shop-features-grid">
										<view class="shop-feature-card">
											<text class="shop-feature-emoji">🎁</text>
											<text class="shop-feature-label">新人礼包</text>
										</view>
										<view class="shop-feature-card">
											<text class="shop-feature-emoji">⚡</text>
											<text class="shop-feature-label">限时秒杀</text>
										</view>
										<view class="shop-feature-card">
											<text class="shop-feature-emoji">💰</text>
											<text class="shop-feature-label">超值折扣</text>
										</view>
										<view class="shop-feature-card">
											<text class="shop-feature-emoji">🔥</text>
											<text class="shop-feature-label">热门推荐</text>
										</view>
									</view>
									
									<!-- 进入按钮 -->
									<view class="shop-enter-button">
										<text class="shop-enter-text">立即进入商城</text>
										<text class="shop-enter-arrow">→</text>
									</view>
									
									<!-- 提示文字 -->
									<view class="shop-hint">
										<text class="shop-hint-icon">✨</text>
										<text class="shop-hint-text">点击任意位置进入商城</text>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
					
					<!-- 首页内容 (index 1) -->
					<swiper-item>
						<view class="home-page">
							<!-- 顶部操作栏 -->
							<view class="home-header">
								<view class="home-header-btn" @click="toreplacement">
									<image class="home-header-icon" src="/static/images/replacement_switch.png" mode="aspectFit"></image>
									<text class="home-header-text">装扮设置</text>
								</view>
								<view class="home-header-spacer"></view>
								<view class="home-header-btn" @click="todynamics">
									<image class="home-header-icon" src="/static/images/dynamics_logo.png" mode="aspectFit"></image>
									<text class="home-header-text">朋友圈</text>
								</view>
								<view class="home-header-btn" @click="tointimacy">
									<image class="home-header-icon" src="/static/images/index_intimate.png" mode="aspectFit"></image>
									<text class="home-header-text">邀请入驻</text>
								</view>
							</view>
							
							<!-- 选择互动对象 -->
							<view class="home-title">
								<text class="home-title-icon">✦</text>
								<text class="home-title-text">选择一位互动对象</text>
								<text class="home-title-icon">✦</text>
								<text class="home-title-more" @click="toreplacement">搜索更多</text>
							</view>
							
							<!-- 主卡片区域 -->
							<view class="home-card">
								<view class="home-card-inner">
									<!-- 女友名字 -->
									<view class="home-card-name">{{ loverBasicList && loverBasicList.name ? loverBasicList.name : '简寻' }}</view>
									
									<!-- 女友图片 -->
									<image 
										class="home-card-image" 
										:src="loverBasicList && loverBasicList.image_url ? loverBasicList.image_url : 'https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/008a06f2c3fccdac714f25e6577ccdc4.png'"
										mode="aspectFill">
									</image>
									
									<!-- 性格标签 -->
									<view class="home-card-tags">
										<view class="home-card-tag">多面伪神</view>
										<view class="home-card-tag">甜蜜贴心</view>
									</view>
									
									<!-- 对话气泡 -->
									<view class="home-card-bubble">
										<text class="home-card-bubble-text">靠近点，再近点…你就能看清我眼里藏着什么了。</text>
									</view>
									
									<!-- 底部操作按钮 -->
									<view class="home-card-actions">
										<view class="home-card-btn home-card-btn-home" @click="tointimacy">
											<image class="home-card-btn-icon" src="/static/images/index_intimate.png" mode="aspectFit"></image>
										</view>
										<view class="home-card-btn home-card-btn-chat" @click="tochat">
											<text class="home-card-btn-text">和TA聊天</text>
										</view>
									</view>
								</view>
							</view>
							
							<!-- 底部头像轮播 -->
							<view class="home-avatars">
								<view 
									class="home-avatar-item" 
									v-for="(look, index) in homeLooksList" 
									:key="look.id"
									:class="{ 'home-avatar-active': selectedLookId === look.id }"
									@click="switchLook(look)">
									<image 
										class="home-avatar-img" 
										:src="look.image_url"
										mode="aspectFill">
									</image>
								</view>
								<!-- 如果形象栏为空，显示默认头像 -->
								<view class="home-avatar-item" v-if="!homeLooksList || homeLooksList.length === 0">
									<image 
										class="home-avatar-img" 
										:src="loverBasicList && loverBasicList.image_url ? loverBasicList.image_url : 'https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/008a06f2c3fccdac714f25e6577ccdc4.png'"
										mode="aspectFill">
									</image>
								</view>
							</view>
							
							<!-- 商城入口横幅 -->
							<view class="home-shop-banner" @click="openShopLink">
								<!-- 背景装饰 -->
								<view class="home-shop-bg">
									<view class="home-shop-circle home-shop-circle-1"></view>
									<view class="home-shop-circle home-shop-circle-2"></view>
									<view class="home-shop-circle home-shop-circle-3"></view>
								</view>
								
								<!-- 内容区域 -->
								<view class="home-shop-content">
									<!-- 左侧图标和文字 -->
									<view class="home-shop-left">
										<view class="home-shop-icon-wrapper">
											<image class="home-shop-icon" src="/static/images/member_logo.png" mode="aspectFit"></image>
											<view class="home-shop-badge">HOT</view>
										</view>
										<view class="home-shop-text">
											<view class="home-shop-title">
												<text class="home-shop-title-main">精品商城</text>
												<text class="home-shop-title-emoji">🛒</text>
											</view>
											<view class="home-shop-desc">海量道具 · 超值优惠</view>
										</view>
									</view>
									
									<!-- 右侧按钮 -->
									<view class="home-shop-button">
										<text class="home-shop-button-text">立即前往</text>
										<text class="home-shop-button-arrow">→</text>
									</view>
								</view>
								
								<!-- 闪光效果 -->
								<view class="home-shop-shine"></view>
							</view>
							
							<!-- 好感度信息（可选，放在底部） -->
							<view class="home-intimacy" @click="tointimacy">
								<view class="home-intimacy-level">Lv.{{ getBobbiesList.level ? getBobbiesList.level : 0 }}</view>
								<view class="home-intimacy-bar">
									<view class="home-intimacy-progress" :style="{ width: calculateProgressPercent() + '%' }"></view>
								</view>
								<view class="home-intimacy-text">{{ getBobbiesList.intimacy ? getBobbiesList.intimacy : 0 }}/{{ getBobbiesList.next_level_intimacy ? getBobbiesList.next_level_intimacy : 0 }}</view>
							</view>
						</view>
					</swiper-item>
					
					<!-- 聊天页面 (index 2) - 嵌入完整聊天功能 -->
					<swiper-item>
						<view class="chat-swiper-page">
							<!-- 聊天消息列表 -->
							<scroll-view 
								class="chat-message-scroll" 
								scroll-y="true" 
								:scroll-into-view="chatIntoView"
								scroll-with-animation="true">
								<view class="chat-message-list">
									<view 
										v-for="(msg, index) in chatMessages" 
										:key="index"
										class="chat-message-item"
										:class="msg.role === 'user' ? 'message-right' : 'message-left'">
										<image 
											class="chat-avatar" 
											:src="msg.role === 'user' ? chatUserAvatar : chatLoverAvatar" 
											mode="aspectFill">
										</image>
										<view class="chat-message-bubble">
											<text class="chat-message-text">{{ msg.content }}</text>
										</view>
									</view>
									<view id="chat-bottom"></view>
								</view>
							</scroll-view>
							
							<!-- 底部输入框 -->
							<view class="chat-input-bar">
								<input 
									class="chat-message-input" 
									v-model="chatInputText" 
									placeholder="输入消息..."
									confirm-type="send"
									:adjust-position="true"
									:hold-keyboard="false"
									@confirm="sendChatMessage"
									@blur="onInputBlur"
								/>
								<view class="chat-send-btn" @click="sendChatMessage">
									<text>发送</text>
								</view>
							</view>
						</view>
					</swiper-item>
					
					<!-- 唱歌页面 (index 3) -->
					<swiper-item>
						<view class="sing-page">
							<!-- Tab 切换 -->
							<view class="sing-tabs">
								<view 
									class="sing-tab-item" 
									:class="{ 'sing-tab-active': singCurrentTab === 'songs' }"
									@click="switchSingTab('songs')">
									<text>系统歌曲</text>
								</view>
								<view 
									class="sing-tab-item" 
									:class="{ 'sing-tab-active': singCurrentTab === 'library' }"
									@click="switchSingTab('library')">
									<text>音乐库</text>
								</view>
								<view 
									class="sing-tab-item" 
									:class="{ 'sing-tab-active': singCurrentTab === 'history' }"
									@click="switchSingTab('history')">
									<text>历史记录</text>
								</view>
							</view>
							
							<scroll-view class="sing-scroll" scroll-y="true">
								<!-- 系统歌曲列表 -->
								<view v-if="singCurrentTab === 'songs'" class="sing-content">
									<view class="section-title">选择歌曲</view>
									<view class="song-list">
										<view class="song-item" v-for="(item,index) in singSongsList" :key="index" @click="selectSongDirect(item)">
											<view class="song-info">
												<text class="song-title">{{item.title}}</text>
											</view>
											<image class="song-icon" src="/static/images/chat_a6.png" mode="widthFix"></image>
										</view>
									</view>
								</view>
								
								<!-- 音乐库 -->
								<view v-if="singCurrentTab === 'library'" class="sing-content">
									<!-- 添加音乐按钮 -->
									<view class="music-add-btns">
										<view class="music-add-btn" @click="showAddMusicModal">
											<text class="music-add-icon">➕</text>
											<text class="music-add-text">添加音乐</text>
										</view>
									</view>
									
									<!-- 音乐库列表 -->
									<view class="music-library-list">
										<view class="music-library-item" v-for="(item, index) in musicLibraryList" :key="item.id">
											<view class="music-library-cover">
												<image 
													class="music-cover-img" 
													:src="item.cover_url || '/static/images/avatar.png'" 
													mode="aspectFill">
												</image>
												<view class="music-play-overlay" @click="selectMusicFromLibrary(item)">
													<text class="music-play-icon">▶</text>
												</view>
											</view>
											<view class="music-library-info">
												<view class="music-library-title">{{item.title}}</view>
												<view class="music-library-artist">{{item.artist || '未知艺术家'}}</view>
												<view class="music-library-meta">
													<text class="music-meta-item">👤 {{item.username}}</text>
													<text class="music-meta-item">▶ {{item.play_count}}</text>
													<text class="music-meta-item" @click.stop="toggleMusicLike(item)">
														{{item.is_liked ? '❤️' : '🤍'}} {{item.like_count}}
													</text>
												</view>
											</view>
										</view>
										
										<!-- 加载更多 -->
										<view v-if="musicLibraryHasMore" class="music-load-more" @click="loadMoreMusic">
											<text>加载更多</text>
										</view>
										
										<!-- 空状态 -->
										<view v-if="musicLibraryList.length === 0" class="music-empty">
											<text class="music-empty-icon">🎵</text>
											<text class="music-empty-text">音乐库还没有歌曲</text>
											<text class="music-empty-desc">快来添加第一首歌吧！</text>
										</view>
									</view>
								</view>
								
								<!-- 历史记录 -->
								<view v-if="singCurrentTab === 'history'" class="sing-content">
									<view class="history-list" v-if="singHistoryList.length > 0">
										<view class="history-item" v-for="(item,index) in singHistoryList" :key="'history-'+index">
											<view class="history-info">
												<text class="history-title">{{item.song_title}}</text>
												<text class="history-date">{{formatDate(item.created_at)}}</text>
											</view>
											<view class="history-actions">
												<view class="history-btn" @click="playSingVideo(item.video_url)">播放</view>
											</view>
										</view>
									</view>
									<view v-else class="music-empty">
										<text class="music-empty-icon">📼</text>
										<text class="music-empty-text">还没有历史记录</text>
									</view>
								</view>
							</scroll-view>
						</view>
					</swiper-item>
					
					<!-- 跳舞页面 (index 4) -->
					<swiper-item>
						<view class="swiper-content feature-page">
							<view class="feature-icon">💃</view>
							<view class="feature-title">跳舞功能</view>
							<view class="feature-desc">让她为你跳一支舞</view>
							<scroll-view class="feature-scroll" scroll-y="true">
								<view class="history-section" v-if="danceHistoryList.length > 0">
									<view class="history-section-header">
										<view class="section-title">历史视频</view>
										<view class="section-more" @click="openHistoryModal('dance', 'all')">查看全部</view>
									</view>
									<view class="history-list">
										<view class="history-item" v-for="(item,index) in danceHistoryList.slice(0, 2)" :key="'dance-history-'+index">
											<view class="history-info">
												<text class="history-title">{{item.prompt || '跳舞视频'}}</text>
												<text class="history-date">{{formatDate(item.created_at)}}</text>
											</view>
											<view class="history-actions">
												<view class="history-btn" @click="playDanceVideo(item.video_url)">播放</view>
											</view>
										</view>
									</view>
								</view>
								
								<view class="dance-form">
									<textarea 
										class="dance-input" 
										v-model="dancePrompt" 
										placeholder="描述你想看的舞蹈动作"
										maxlength="200" />
									<view class="dance-btn" @click="requestDance">生成舞蹈视频</view>
								</view>
							</scroll-view>
						</view>
					</swiper-item>
					
					<!-- 换服装页面 (index 5) -->
					<swiper-item>
						<scroll-view class="swiper-scroll" scroll-y="true">
							<view class="outfit-container">
								<view class="outfit-header">
									<view class="outfit-title">换装</view>
									<view class="outfit-count" v-if="outfitListInfo && outfitListInfo.clothes_num != null">剩余次数：{{ outfitListInfo.clothes_num }}次</view>
								</view>
								<view class="outfit-loading" v-if="!outfitListInfo">加载中...</view>
								<view class="outfit-content" v-else>
									<view class="outfit-section" v-if="outfitListInfo.top && outfitListInfo.top.length">
										<view class="section-title">上衣</view>
										<view class="outfit-grid-wrapper">
											<view class="outfit-item-wrapper" v-for="(item, idx) in outfitListInfo.top" :key="'top-'+idx" :class="isSelectedTop(item.id) ? 'outfit-grid-item-selected' : ''" @click="selectTop(item)">
												<view class="outfit-grid-inner">
													<image class="outfit-grid-img" :src="item.image_url ? item.image_url : '/static/images/replacement_pictureA.png'" mode="aspectFill"></image>
													<view class="outfit-check-mark" v-if="isSelectedTop(item.id)">✓</view>
													<view class="outfit-grid-badge" v-if="item.is_current">使用中</view>
													<view class="outfit-grid-lock" v-if="item.is_lock && !item.is_free">🔒</view>
												</view>
											</view>
										</view>
									</view>
									<view class="outfit-section" v-if="outfitListInfo.bottom && outfitListInfo.bottom.length">
										<view class="section-title">下装</view>
										<view class="outfit-grid-wrapper">
											<view class="outfit-item-wrapper" v-for="(item, idx) in outfitListInfo.bottom" :key="'bottom-'+idx" :class="isSelectedBottom(item.id) ? 'outfit-grid-item-selected' : ''" @click="selectBottom(item)">
												<view class="outfit-grid-inner">
													<image class="outfit-grid-img" :src="item.image_url ? item.image_url : '/static/images/replacement_pictureA.png'" mode="aspectFill"></image>
													<view class="outfit-check-mark" v-if="isSelectedBottom(item.id)">✓</view>
													<view class="outfit-grid-badge" v-if="item.is_current">使用中</view>
													<view class="outfit-grid-lock" v-if="item.is_lock && !item.is_free">🔒</view>
												</view>
											</view>
										</view>
									</view>
									<view class="outfit-section" v-if="outfitListInfo.dress && outfitListInfo.dress.length">
										<view class="section-title">连体服</view>
										<view class="outfit-grid-wrapper">
											<view class="outfit-item-wrapper" v-for="(item, idx) in outfitListInfo.dress" :key="'dress-'+idx" :class="isSelectedDress(item.id) ? 'outfit-grid-item-selected' : ''" @click="selectDress(item)">
												<view class="outfit-grid-inner">
													<image class="outfit-grid-img" :src="item.image_url ? item.image_url : '/static/images/replacement_pictureA.png'" mode="aspectFill"></image>
													<view class="outfit-check-mark" v-if="isSelectedDress(item.id)">✓</view>
													<view class="outfit-grid-badge" v-if="item.is_current">使用中</view>
													<view class="outfit-grid-lock" v-if="item.is_lock && !item.is_free">🔒</view>
												</view>
											</view>
										</view>
									</view>

									<view class="outfit-generate-btn" @click="toggleSaveToLook">{{ outfitSaveToLook ? '已勾选：保存到形象栏' : '勾选：保存到形象栏' }}</view>
									<view class="outfit-generate-btn" @click="confirmOutfitChange">换装</view>
								</view>
							</view>
						</scroll-view>
					</swiper-item>
					
					<!-- 刷礼物页面 (index 6) -->
					<swiper-item>
						<view class="swiper-content gift-page">
							<view class="gift-header">
								<view class="gift-header-title">🎁 礼物匣</view>
								<view class="gift-header-desc">送她一份心意</view>
								<view class="gift-intimacy-bar">
									<view class="gift-intimacy-label">当前好感度</view>
									<view class="gift-intimacy-info">
										<text class="gift-intimacy-level">Lv.{{ getBobbiesList.level ? getBobbiesList.level : 0 }}</text>
										<view class="gift-intimacy-progress">
											<view class="gift-intimacy-progress-bar" :style="{ width: calculateProgressPercent() + '%' }"></view>
										</view>
										<text class="gift-intimacy-value">{{ getBobbiesList.intimacy ? getBobbiesList.intimacy : 0 }}/{{ getBobbiesList.next_level_intimacy ? getBobbiesList.next_level_intimacy : 0 }}</text>
									</view>
								</view>
							</view>
							
							<scroll-view class="gift-scroll" scroll-y="true">
								<view class="gift-list">
									<view class="gift-item" v-for="(item, index) in giftOptions" :key="index" @click="giftGiftClick(index)">
										<view class="gift-item-inner">
											<image class="gift-item-img" :src="item.image && item.image.startsWith('http') ? item.image : giftGlobal + item.image" mode="aspectFit"></image>
											<view class="gift-item-name">{{ item.name }}</view>
											<view class="gift-item-price">{{ item.price }}金币</view>
											<view class="gift-item-intimacy">+{{ item.intimacy_value }}好感</view>
										</view>
									</view>
								</view>
							</scroll-view>
							
							<!-- 礼物详情弹窗 -->
							<view class="gift-modal" v-if="giftStats" @click.self="giftCloseClick()">
								<view class="gift-modal-content">
									<view class="gift-modal-header">
										<text class="gift-modal-title">礼物详情</text>
										<image class="gift-modal-close" src="/static/images/close.png" @click="giftCloseClick()"></image>
									</view>
									
									<view class="gift-modal-body">
										<image class="gift-modal-img" :src="(giftInfoOptions && giftInfoOptions.image && giftInfoOptions.image.startsWith('http')) ? giftInfoOptions.image : giftGlobal + (giftInfoOptions && giftInfoOptions.image ? giftInfoOptions.image : '')" mode="aspectFit"></image>
										
										<view class="gift-modal-info">
											<view class="gift-modal-name">{{ giftInfoOptions && giftInfoOptions.name ? giftInfoOptions.name : '' }}</view>
											<view class="gift-modal-intimacy">+{{ giftInfoOptions && giftInfoOptions.intimacy_value ? giftInfoOptions.intimacy_value : '0' }} 好感度</view>
											<view class="gift-modal-price">{{ giftInfoOptions && giftInfoOptions.price ? giftInfoOptions.price : '0' }} 金币</view>
										</view>
									</view>
									
									<view class="gift-modal-quantity">
										<text class="gift-modal-quantity-label">数量</text>
										<view class="gift-modal-quantity-control">
											<image class="gift-quantity-btn" src="/static/images/minus.png" @click="giftDecreaseNumber"></image>
											<input class="gift-quantity-input" v-model="giftForm.nums" type="number" />
											<image class="gift-quantity-btn" src="/static/images/add.png" @click="giftIncreaseNumber"></image>
										</view>
									</view>
									
									<view class="gift-modal-balance">余额：{{ giftUserInfo && giftUserInfo.money != null ? giftUserInfo.money : 0 }} 金币</view>
									
									<view class="gift-modal-btn" @click="giftGiveClick()">
										<text v-if="(Number(giftInfoOptions && giftInfoOptions.price ? giftInfoOptions.price : 0) * Number(giftForm.nums || 0)) > Number(giftUserInfo && giftUserInfo.money != null ? giftUserInfo.money : 0)">充值并赠送</text>
										<text v-else>赠送Ta</text>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
					
					<!-- 短剧页面 (index 7) -->
					<swiper-item>
						<view class="swiper-content drama-page">
							<!-- 全屏海报背景 -->
							<view class="drama-hero" @click="openDramaLink">
								<!-- 背景图片 -->
								<image 
									class="drama-hero-bg" 
									src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251231/a6d2dae70029b6465ea1f1f605f77258.png" 
									mode="aspectFill">
								</image>
								
								<!-- 渐变遮罩 -->
								<view class="drama-hero-overlay"></view>
								
								<!-- 内容区域 -->
								<view class="drama-hero-content">
									<!-- 热门标签 -->
									<view class="drama-hot-badge">
										<text class="drama-hot-icon">🔥</text>
										<text class="drama-hot-text">热门推荐</text>
									</view>
									
									<!-- 标题 -->
									<view class="drama-hero-title">精彩短剧</view>
									<view class="drama-hero-subtitle">海量热门短剧等你来看</view>
									
									<!-- 标签组 -->
									<view class="drama-tags">
										<view class="drama-tag">💕 甜宠</view>
										<view class="drama-tag">👑 霸总</view>
										<view class="drama-tag">🎭 逆袭</view>
										<view class="drama-tag">⚡ 爽文</view>
									</view>
									
									<!-- 播放按钮 -->
									<view class="drama-play-button">
										<view class="drama-play-icon">▶</view>
										<text class="drama-play-text">立即观看</text>
									</view>
									
									<!-- 提示文字 -->
									<view class="drama-hint">
										<text class="drama-hint-icon">✨</text>
										<text class="drama-hint-text">点击任意位置进入短剧世界</text>
									</view>
								</view>
							</view>
							
							<!-- 底部特色推荐（可选） -->
							<view class="drama-features">
								<view class="drama-feature-item">
									<text class="drama-feature-icon">📺</text>
									<text class="drama-feature-text">海量剧集</text>
								</view>
								<view class="drama-feature-item">
									<text class="drama-feature-icon">🆓</text>
									<text class="drama-feature-text">免费观看</text>
								</view>
								<view class="drama-feature-item">
									<text class="drama-feature-icon">⚡</text>
									<text class="drama-feature-text">每日更新</text>
								</view>
							</view>
						</view>
					</swiper-item>
					
				</swiper>
				
				<!-- 自定义细线指示器 - 聊天页面时隐藏 -->
				<view class="swiper-indicator" v-if="getBobbiesList.reg_step == 4" :class="{ 'indicator-hidden': currentTab === 2 }">
					<view 
						v-for="(tab, index) in tabs" 
						:key="index"
						class="indicator-line"
						:class="{ 'active': currentTab === index }">
					</view>
				</view>
			</view>
		</view>
		<!-- 青少年模式弹框 -->
		<under-age :reg-step="getBobbiesList.reg_step" @underAgeStatusChanged="handleUnderAgeStatusChange"></under-age>
		
		<!-- 底部 Tab 栏 - 聊天页面时隐藏 -->
		<view class="bottom-tab-bar" :class="{ 'tab-bar-hidden': currentTab === 2 }">
			<tab-bar></tab-bar>
		</view>

		<!-- 青少年模式遮罩层 -->
		<view v-if="underAgeEnabled" class="underage-overlay">
			<view class="underage-text">已开启青少年模式</view>
		</view>

		<view v-if="historyModalVisible" class="modal-mask" @click="closeHistoryModal">
			<view class="modal-card" @click.stop>
				<view class="modal-header">
					<view class="modal-title">{{ historyModalType === 'dance' ? (historyModalMode === 'all' ? '跳舞全部历史' : '跳舞历史视频') : (historyModalMode === 'all' ? '唱歌全部历史' : '唱歌历史视频') }}</view>
					<view class="modal-close" @click="closeHistoryModal">关闭</view>
				</view>
				<scroll-view class="modal-list" scroll-y="true">
					<view class="modal-item" v-for="(item,index) in historyModalList" :key="'modal-'+index">
						<view class="modal-item-info">
							<text class="modal-item-title">{{ historyModalType === 'dance' ? (item.prompt || '跳舞视频') : (item.song_title || '唱歌视频') }}</text>
							<text class="modal-item-date">{{ formatDate(item.created_at) }}</text>
							<text v-if="historyModalMode === 'all'" class="modal-item-status">{{ formatHistoryStatus(item) }}</text>
						</view>
						<view class="modal-item-actions">
							<view v-if="item.video_url" class="modal-play" @click="openVideoPlayer(item.video_url)">播放</view>
							<view v-if="historyModalMode === 'all' && item.status === 'failed'" class="modal-retry" @click="retryHistoryItem(item)">重新下载</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<view v-if="videoPlayerVisible" class="modal-mask" @click="closeVideoPlayer">
			<view class="modal-card" @click.stop>
				<view class="modal-header">
					<view class="modal-title">视频播放</view>
					<view class="modal-close" @click="closeVideoPlayer">关闭</view>
				</view>
				<video class="modal-video" :src="videoPlayerUrl" controls></video>
			</view>
		</view>

		<view v-if="singGenerating && currentTab === 2" class="global-block-mask" @touchmove.stop.prevent>
			<view class="global-block-card">
				<view class="global-block-title">正在生成视频中</view>
				<view class="global-block-sub">预计等待15分钟</view>
				<view class="global-block-actions">
					<view class="global-block-btn" @click.stop="cancelSingGeneration">取消生成</view>
				</view>
			</view>
		</view>

		<view v-if="danceGenerating && currentTab === 3" class="global-block-mask" @touchmove.stop.prevent>
			<view class="global-block-card">
				<view class="global-block-title">正在生成视频中</view>
				<view class="global-block-sub">预计等待15分钟</view>
				<view class="global-block-actions">
					<view class="global-block-btn" @click.stop="cancelDanceGeneration">取消生成</view>
				</view>
			</view>
		</view>
		
		<!-- 添加音乐弹窗 -->
		<view v-if="showMusicModal" class="modal-mask" @click="closeMusicModal">
			<view class="modal-card music-modal-card" @click.stop>
				<view class="modal-header">
					<view class="modal-title">添加音乐</view>
					<view class="modal-close" @click="closeMusicModal">关闭</view>
				</view>
				<view class="music-modal-body">
					<view class="music-form-item">
						<view class="music-form-label">歌曲标题 *</view>
						<input class="music-form-input" v-model="musicForm.title" placeholder="请输入歌曲标题" />
					</view>
					<view class="music-form-item">
						<view class="music-form-label">艺术家</view>
						<input class="music-form-input" v-model="musicForm.artist" placeholder="请输入艺术家名称" />
					</view>
					<view class="music-form-item">
						<view class="music-form-label">音乐链接 *</view>
						<textarea 
							class="music-form-textarea" 
							v-model="musicForm.music_url" 
							placeholder="请粘贴音乐文件链接（支持 mp3、m4a 等格式）"
							maxlength="500" />
					</view>
					<view class="music-form-item">
						<view class="music-form-label">封面图链接</view>
						<input class="music-form-input" v-model="musicForm.cover_url" placeholder="请输入封面图链接（可选）" />
					</view>
					<view class="music-form-item">
						<view class="music-form-label">时长（秒）</view>
						<input class="music-form-input" v-model.number="musicForm.duration" type="number" placeholder="请输入歌曲时长" />
					</view>
					<view class="music-modal-btn" @click="submitMusic">
						<text>提交</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		GetUserBasic,
		LoverInit,
		LoverBasic,
		OutfitList,
		OutfitPurchase,
		OutfitChange,
		GiftsLists,
		GiftsGive,
		GiftsGiveApi,
		CreateGiftsOrderApi,
		JinbiPayApi,
		SingSongs,
		SingGenerate,
		SingGenerateTask,
		SingCurrent,
		DanceGenerate,
		DanceGenerateTask,
		DanceCurrent,
		SessionInit,
		SessionSend
	} from '@/utils/api.js'
	import { baseURL, baseURLPy } from '@/utils/request.js'
	import notHave from '@/components/not-have.vue';
	import topSafety from '@/components/top-safety.vue';
	import tabBar from '@/components/tab-bar.vue';
	import UnderAge from '@/components/under-age.vue'; // 导入under-age组件
	import uniNavBar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue'; // 导入uni-nav-bar组件
	import {
		useConversationStore
	} from '@/stores/conversation';

	export default {
		components: {
			notHave,
			topSafety,
			tabBar,
			UnderAge,
			uniNavBar,
		},
		data() {
			return {
				// Tab 相关
				currentTab: 1, // 默认显示首页（商城是 0，首页是 1）
				tabIntoView: 'tab-1',
				tabs: [
					{ name: '商城' },
					{ name: '首页' },
					{ name: '聊天' },
					{ name: '唱歌' },
					{ name: '跳舞' },
					{ name: '换服装' },
					{ name: '刷礼物' },
					{ name: '短剧' }
				],
				// 首页形象栏相关
				homeLooksList: [],
				selectedLookId: null,
				currentLookImageUrl: '',
				// 聊天相关
				chatMessages: [],
				chatInputText: '',
				chatScrollTop: 0,
				chatIntoView: '',
				chatSessionId: null,
				chatUserAvatar: '',
				chatLoverAvatar: '',
				chatSending: false,
				dancePrompt: '',
				singSongsList: [],
				singHistoryList: [],
				danceHistoryList: [],
				songId: 0,
				singGenerating: false, // 唱歌视频生成中状态
				singGeneratingTaskId: 0,
				danceGenerating: false, // 跳舞视频生成中状态
				danceGeneratingTaskId: 0,
				singPollTimer: null,
				dancePollTimer: null,
				// 音乐库相关
				singCurrentTab: 'songs', // songs, library, history
				musicLibraryList: [],
				musicLibraryPage: 1,
				musicLibraryPageSize: 20,
				musicLibraryTotal: 0,
				musicLibraryHasMore: true,
				showMusicModal: false,
				musicForm: {
					title: '',
					artist: '',
					music_url: '',
					cover_url: '',
					duration: null
				},
				outfitListInfo: null,
				outfitBuyForm: {
					item_id: ''
				},
				outfitMode: null,
				outfitFormTopBottom: {
					top_item_id: '',
					bottom_item_id: '',
					save_to_look: false
				},
				outfitFormDress: {
					dress_item_id: '',
					save_to_look: false
				},
				outfitSaveToLook: false,
				giftGlobal: baseURL,
				giftStats: false,
				successStats: false,
				giftForm: {
					gifts_id: '',
					nums: 1,
					to_user_id: ''
				},
				giftOptions: [],
				giftInfoOptions: null,
				giftUserInfo: {},
				statusBarHeight: uni.getWindowInfo().statusBarHeight,
				currentStep: 0,
				chartData: {},
				opts: {
					color: ["#9F47FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: undefined,
					title: {
						name: "",
						fontSize: 17,
						color: "#F661B5"
					},
					subtitle: {
						name: "",
						fontSize: 12,
						color: "#FFFFFF"
					},
					extra: {
						arcbar: {
							type: "default",
							width: 5,
							backgroundColor: "rgba(255,255,255,0.2)",
							startAngle: 0.75,
							endAngle: 0.25,
							gap: 2,
							linearType: "custom",
							customColor: ["#F661B5"]
						}
					}
				},
				getBobbiesList: {
					reg_step: 1,  // 默认第一步：完善个人资料
					level: 0,
					intimacy: 0,
					next_level_intimacy: 100
				},
				loverBasicList: null,  // 改为 null 而不是空字符串
				underAgeEnabled: false, // 添加青少年模式状态变量
				historyModalVisible: false,
				historyModalType: 'sing',
				historyModalMode: 'preview',
				historyModalList: [],
				videoPlayerVisible: false,
				videoPlayerUrl: '',
			}
		},
		onLoad(options) {
			//#ifdef MP-WEIXIN
			this.checkPermission()
			//#endif
			console.log('uni.env.',uni.env)
			
			// 如果有 tab 参数，切换到对应的 tab
			if (options && options.tab) {
				const tabIndex = parseInt(options.tab);
				if (!isNaN(tabIndex) && tabIndex >= 0 && tabIndex < this.tabs.length) {
					this.currentTab = tabIndex;
				}
			}
		},
		onReady() {
			this.getServerData();
		},
		onShow() {
			// 每次页面显示时检查本地存储的青少年模式状态
			this.checkUnderAgeStatus();

			if (uni.getStorageSync('token')) {
				this.getUserBasic()
				this.loverBasic()
				this.loadHomeLooks() // 加载首页形象栏
			}
			
			// 获取歌曲列表
			this.getSingSongs();
			this.getSingHistory();
			this.getDanceHistory();
			if (this.currentTab === 2) {
				this.restoreSingGeneration();
			}
			if (this.currentTab === 3) {
				this.restoreDanceGeneration();
			}
			if (this.currentTab === 4) {
				this.ensureOutfitLoaded();
			}
			if (this.currentTab === 5) {
				this.ensureGiftLoaded();
			}
		},
		methods: {
			// Tab 切换方法
			switchTab(index) {
				console.log('点击 Tab，切换到索引:', index, '对应 Tab:', this.tabs[index].name);
				
				
				// 如果切换到聊天 tab（现在是 index 2），初始化聊天会话
				if (index === 2 && !this.chatSessionId) {
					this.initChatSession();
				}
				
				this.currentTab = index;
				this.updateTabIntoView(index);
				if (index === 3) {
					this.restoreSingGeneration();
				}
				if (index === 4) {
					this.restoreDanceGeneration();
				}
				if (index === 5) {
					this.ensureOutfitLoaded();
				}
				if (index === 6) {
					this.ensureGiftLoaded();
				}
			},
			onSwiperChange(e) {
				console.log('Swiper 滑动，当前索引:', e.detail.current, '对应 Tab:', this.tabs[e.detail.current].name);
				this.currentTab = e.detail.current;
				this.updateTabIntoView(e.detail.current);
				
				// 如果滑动到聊天 tab（现在是 index 2），初始化聊天会话
				if (e.detail.current === 2 && !this.chatSessionId) {
					this.initChatSession();
				}
				if (e.detail.current === 3) {
					this.restoreSingGeneration();
				}
				if (e.detail.current === 4) {
					this.restoreDanceGeneration();
				}
				if (e.detail.current === 5) {
					this.ensureOutfitLoaded();
				}
				if (e.detail.current === 6) {
					this.ensureGiftLoaded();
				}
			},
			updateTabIntoView(index) {
				this.$nextTick(() => {
					this.tabIntoView = 'tab-' + index;
				});
			},
			// 选择歌曲
			selectSongDirect(song) {
				// 防止重复点击
				if (this.singGenerating) {
					uni.showToast({ 
						title: '视频生成中，请稍候...', 
						icon: 'none',
						duration: 2000
					});
					return;
				}
				
				this.songId = song.id;
				this.singGenerating = true;
				this.singGeneratingTaskId = 0;
				uni.setStorageSync('singGeneratingTaskId', 0);
				uni.setStorageSync('singGenerating', true);
				
				SingGenerate({ song_id: song.id }).then(res => {
					if (res.code == 1) {
						this.singGeneratingTaskId = res.data.generation_task_id;
						uni.setStorageSync('singGeneratingTaskId', this.singGeneratingTaskId);
						this.getSingGenerateTask(res.data.generation_task_id);
					} else {
						this.singGenerating = false;
						this.singGeneratingTaskId = 0;
						uni.setStorageSync('singGenerating', false);
						uni.setStorageSync('singGeneratingTaskId', 0);
						uni.showToast({ title: res.msg, icon: 'none' });
					}
				}).catch(err => {
					this.singGenerating = false;
					this.singGeneratingTaskId = 0;
					uni.setStorageSync('singGenerating', false);
					uni.setStorageSync('singGeneratingTaskId', 0);
					uni.showToast({ 
						title: '请求失败，请重试', 
						icon: 'none' 
					});
				});
			},
			restoreSingGeneration() {
				if (this.currentTab !== 2) {
					return;
				}
				if (!uni.getStorageSync('token')) {
					return;
				}
				if (this.singGenerating) {
					return;
				}
				const storedTaskId = parseInt(uni.getStorageSync('singGeneratingTaskId') || 0);
				const storedFlag = !!uni.getStorageSync('singGenerating');
				if (storedFlag && storedTaskId > 0) {
					this.singGenerating = true;
					this.singGeneratingTaskId = storedTaskId;
					this.getSingGenerateTask(storedTaskId);
					return;
				}
				SingCurrent({}).then(res => {
					if (res && res.code == 1 && res.data && res.data.generation_task_id) {
						this.singGenerating = true;
						this.singGeneratingTaskId = res.data.generation_task_id;
						uni.setStorageSync('singGenerating', true);
						uni.setStorageSync('singGeneratingTaskId', this.singGeneratingTaskId);
						this.getSingGenerateTask(this.singGeneratingTaskId);
					}
				}).catch(() => {});
			},
			restoreDanceGeneration() {
				if (this.currentTab !== 3) {
					return;
				}
				if (!uni.getStorageSync('token')) {
					return;
				}
				if (this.danceGenerating) {
					return;
				}
				const storedTaskId = parseInt(uni.getStorageSync('danceGeneratingTaskId') || 0);
				const storedFlag = !!uni.getStorageSync('danceGenerating');
				if (storedFlag && storedTaskId > 0) {
					this.danceGenerating = true;
					this.danceGeneratingTaskId = storedTaskId;
					this.getDanceGenerateTask(storedTaskId);
					return;
				}
				DanceCurrent({}).then(res => {
					if (res && res.code == 1 && res.data && res.data.generation_task_id) {
						this.danceGenerating = true;
						this.danceGeneratingTaskId = res.data.generation_task_id;
						uni.setStorageSync('danceGenerating', true);
						uni.setStorageSync('danceGeneratingTaskId', this.danceGeneratingTaskId);
						this.getDanceGenerateTask(this.danceGeneratingTaskId);
					}
				}).catch(() => {});
			},
			ensureOutfitLoaded() {
				if (!uni.getStorageSync('token')) {
					return;
				}
				if (this.outfitListInfo) {
					return;
				}
				this.fetchOutfitList();
			},
			fetchOutfitList() {
				OutfitList({}).then(res => {
					if (res && res.code == 1) {
						this.outfitListInfo = res.data || null;
						this.normalizeOutfitList();
						this.selectCurrentOutfitInTab();
					} else {
						this.outfitListInfo = null;
						uni.showToast({ title: (res && res.msg) ? res.msg : '加载失败', icon: 'none' });
					}
				}).catch(() => {
					this.outfitListInfo = null;
					uni.showToast({ title: '加载失败', icon: 'none' });
				});
			},
			normalizeOutfitList() {
				if (!this.outfitListInfo) return;
				const owned = Array.isArray(this.outfitListInfo.owned_outfit_ids) ? this.outfitListInfo.owned_outfit_ids : [];
				const current = this.outfitListInfo.current_outfit || {};
				const mark = (arr, type) => {
					if (!Array.isArray(arr)) return;
					for (let i = 0; i < arr.length; i++) {
						const it = arr[i];
						if (type === 'top') it.is_current = (current.top_id == it.id);
						if (type === 'bottom') it.is_current = (current.bottom_id == it.id);
						if (type === 'dress') it.is_current = (current.dress_id == it.id);
						it.is_lock = !owned.includes(it.id);
					}
				};
				mark(this.outfitListInfo.top, 'top');
				mark(this.outfitListInfo.bottom, 'bottom');
				mark(this.outfitListInfo.dress, 'dress');
			},
			selectCurrentOutfitInTab() {
				if (!this.outfitListInfo) return;
				const cur = this.outfitListInfo.current_outfit || {};
				if (cur.dress_id) {
					this.outfitMode = 1;
					this.outfitFormDress.dress_item_id = cur.dress_id;
					this.outfitFormTopBottom.top_item_id = '';
					this.outfitFormTopBottom.bottom_item_id = '';
					return;
				}
				if (cur.top_id || cur.bottom_id) {
					this.outfitMode = 2;
					this.outfitFormTopBottom.top_item_id = cur.top_id || '';
					this.outfitFormTopBottom.bottom_item_id = cur.bottom_id || '';
					this.outfitFormDress.dress_item_id = '';
				}
			},
			isSelectedTop(id) {
				return this.outfitFormTopBottom.top_item_id === id;
			},
			isSelectedBottom(id) {
				return this.outfitFormTopBottom.bottom_item_id === id;
			},
			isSelectedDress(id) {
				return this.outfitFormDress.dress_item_id === id;
			},
			openOutfitDetail(item) {
				if (!item || !item.id) return;
				this.outfitBuyForm.item_id = item.id;
				const price = item.price_gold ? String(item.price_gold) : '0';
				uni.showModal({
					title: '购买服装',
					content: `${item.name ? item.name : '该服装'}\n价格：${price}金币`,
					confirmText: '购买',
					cancelText: '取消',
					success: (r) => {
						if (r.confirm) {
							this.buyOutfit();
						}
					}
				});
			},
			buyOutfit() {
				if (!this.outfitBuyForm.item_id) return;
				OutfitPurchase(this.outfitBuyForm).then(res => {
					if (res && res.code == 1) {
						uni.showToast({ title: '购买成功', icon: 'none' });
						this.fetchOutfitList();
					} else {
						uni.showToast({ title: (res && res.msg) ? res.msg : '购买失败', icon: 'none' });
					}
				}).catch(() => {
					uni.showToast({ title: '购买失败', icon: 'none' });
				});
			},
			selectTop(item) {
				if (!item) return;
				if (item.is_lock && !item.is_free) {
					this.openOutfitDetail(item);
					return;
				}
				if (this.outfitMode === 1 && this.outfitFormDress.dress_item_id) {
					uni.showToast({ title: '连体服模式下不能选择上衣', icon: 'none' });
					return;
				}
				this.outfitMode = 2;
				this.outfitFormTopBottom.top_item_id = (this.outfitFormTopBottom.top_item_id === item.id) ? '' : item.id;
			},
			selectBottom(item) {
				if (!item) return;
				if (item.is_lock && !item.is_free) {
					this.openOutfitDetail(item);
					return;
				}
				if (this.outfitMode === 1 && this.outfitFormDress.dress_item_id) {
					uni.showToast({ title: '连体服模式下不能选择下装', icon: 'none' });
					return;
				}
				this.outfitMode = 2;
				this.outfitFormTopBottom.bottom_item_id = (this.outfitFormTopBottom.bottom_item_id === item.id) ? '' : item.id;
			},
			selectDress(item) {
				if (!item) return;
				if (item.is_lock && !item.is_free) {
					this.openOutfitDetail(item);
					return;
				}
				if (this.outfitMode === 2 && (this.outfitFormTopBottom.top_item_id || this.outfitFormTopBottom.bottom_item_id)) {
					uni.showToast({ title: '上衣下装模式下不能选择连体服', icon: 'none' });
					return;
				}
				this.outfitMode = 1;
				if (this.outfitFormDress.dress_item_id === item.id) {
					this.outfitFormDress.dress_item_id = '';
				} else {
					this.outfitFormTopBottom.top_item_id = '';
					this.outfitFormTopBottom.bottom_item_id = '';
					this.outfitFormDress.dress_item_id = item.id;
				}
			},
			toggleSaveToLook() {
				this.outfitSaveToLook = !this.outfitSaveToLook;
				this.outfitFormDress.save_to_look = this.outfitSaveToLook;
				this.outfitFormTopBottom.save_to_look = this.outfitSaveToLook;
			},
			confirmOutfitChange() {
				if (!this.outfitListInfo || !this.outfitListInfo.clothes_num) {
					uni.showToast({ title: '当前暂无次数', icon: 'none' });
					return;
				}
				const hasDress = this.outfitMode === 1 && this.outfitFormDress.dress_item_id;
				const hasTopBottom = this.outfitMode === 2 && (this.outfitFormTopBottom.top_item_id || this.outfitFormTopBottom.bottom_item_id);
				if (!hasDress && !hasTopBottom) {
					uni.showToast({ title: '请先选择要换装的服装', icon: 'none' });
					return;
				}
				uni.showModal({
					title: '提示',
					content: '确认是否换装',
					success: (r) => {
						if (r.confirm) {
							this.doOutfitChange();
						}
					}
				});
			},
			doOutfitChange() {
				const payload = (this.outfitMode === 1 && this.outfitFormDress.dress_item_id) ? this.outfitFormDress : this.outfitFormTopBottom;
				OutfitChange(payload).then(res => {
					if (res && res.code == 1) {
						uni.showToast({ title: '换装成功', icon: 'success' });
						this.fetchOutfitList();
					} else {
						uni.showToast({ title: (res && res.msg) ? res.msg : '换装失败', icon: 'none' });
					}
				}).catch(() => {
					uni.showToast({ title: '换装失败', icon: 'none' });
				});
			},
			ensureGiftLoaded() {
				if (!uni.getStorageSync('token')) {
					return;
				}
				if (this.giftOptions && this.giftOptions.length > 0 && this.giftUserInfo) {
					return;
				}
				this.giftGiftsLists();
				this.giftGetUserBasic();
			},
			giftGetUserBasic() {
				GetUserBasic({}).then(res => {
					if (res && res.code == 1) {
						this.giftUserInfo = res.data || {};
					}
				}).catch(() => {});
			},
			giftGiftsLists() {
				GiftsLists({}).then(res => {
					if (res && res.code == 1) {
						this.giftOptions = (res.data && res.data.data) ? res.data.data : [];
					} else {
						this.giftOptions = [];
						uni.showToast({ title: (res && res.msg) ? res.msg : '加载失败', icon: 'none', position: 'top' });
					}
				}).catch(() => {
					this.giftOptions = [];
					uni.showToast({ title: '加载失败', icon: 'none', position: 'top' });
				});
			},
			giftGiftClick(index) {
				this.giftInfoOptions = (this.giftOptions && this.giftOptions[index]) ? this.giftOptions[index] : null;
				this.giftStats = !this.giftStats;
			},
			giftGiveClick() {
				if (!this.giftInfoOptions) {
					uni.showToast({ title: '请选择礼物', icon: 'none', position: 'top' });
					return;
				}
				this.giftForm.gifts_id = this.giftInfoOptions.id;
				const total = Number(this.giftInfoOptions.price || 0) * Number(this.giftForm.nums || 0);
				const money = Number(this.giftUserInfo && this.giftUserInfo.money != null ? this.giftUserInfo.money : 0);
				if (total > money) {
					this.giftGiftsTopUp();
				} else {
					this.giftGiftsGive();
				}
			},
			giftGiftsGive() {
				let fn = GiftsGiveApi;
				if (this.giftForm.to_user_id && String(this.giftForm.to_user_id).trim()) {
					fn = GiftsGive;
				}
				fn(this.giftForm).then(res => {
					if (res && res.code == 1) {
						uni.showToast({ title: '赠送成功', icon: 'none', position: 'top' });
						setTimeout(() => {
							this.giftGetUserBasic();
							this.getUserBasic(); // 刷新好感度数据
							this.giftStats = false;
						}, 1000);
					} else {
						uni.showToast({ title: (res && res.msg) ? res.msg : '赠送失败', icon: 'none', position: 'top' });
					}
				}).catch(() => {
					uni.showToast({ title: '赠送失败', icon: 'none', position: 'top' });
				});
			},
			giftGiftsTopUp() {
				if (!this.giftInfoOptions) return;
				CreateGiftsOrderApi({
					gifts_id: this.giftInfoOptions.id,
					nums: this.giftForm.nums,
					pay_type: 'miniWechat'
				}).then(res => {
					if (res && res.code == 1 && res.data && res.data.out_trade_no) {
						this.giftGoPay(res.data.out_trade_no);
					}
				}).catch(() => {});
			},
			giftGoPay(orderId) {
				JinbiPayApi({ out_trade_no: orderId }).then(res => {
					if (res && res.code == 1) {
						setTimeout(() => {
							this.giftGiftsGive();
						}, 1000);
					} else {
						uni.showToast({ title: (res && res.msg) ? res.msg : '支付失败', icon: 'none', position: 'top' });
					}
				}).catch(() => {
					uni.showToast({ title: '支付失败', icon: 'none', position: 'top' });
				});
			},
			giftCloseClick() {
				this.giftStats = false;
				this.giftForm.nums = 1;
				this.giftInfoOptions = null;
			},
			giftIncreaseNumber() {
				this.giftForm.nums = parseInt(this.giftForm.nums) || 0;
				this.giftForm.nums++;
			},
			giftDecreaseNumber() {
				this.giftForm.nums = parseInt(this.giftForm.nums) || 0;
				if (this.giftForm.nums > 1) {
					this.giftForm.nums--;
				}
			},
			// 请求跳舞
			requestDance() {
				if (!this.dancePrompt || !this.dancePrompt.trim()) {
					this.dancePrompt = '跳一段可爱的舞蹈';
				}
				if (this.danceGenerating) {
					uni.showToast({ title: '视频生成中，请稍候...', icon: 'none', duration: 2000 });
					return;
				}
				this.danceGenerating = true;
				this.danceGeneratingTaskId = 0;
				uni.setStorageSync('danceGeneratingTaskId', 0);
				uni.setStorageSync('danceGenerating', true);
				DanceGenerate({ prompt: this.dancePrompt.trim() }).then(res => {
					if (res.code == 1) {
						this.danceGeneratingTaskId = res.data.generation_task_id;
						uni.setStorageSync('danceGeneratingTaskId', this.danceGeneratingTaskId);
						this.getDanceGenerateTask(this.danceGeneratingTaskId);
					} else {
						this.danceGenerating = false;
						this.danceGeneratingTaskId = 0;
						uni.setStorageSync('danceGenerating', false);
						uni.setStorageSync('danceGeneratingTaskId', 0);
						uni.showToast({ title: res.msg, icon: 'none' });
					}
				}).catch(() => {
					this.danceGenerating = false;
					this.danceGeneratingTaskId = 0;
					uni.setStorageSync('danceGenerating', false);
					uni.setStorageSync('danceGeneratingTaskId', 0);
					uni.showToast({ title: '请求失败，请重试', icon: 'none' });
				});
			},
			// 打开商城外部链接
			openShopLink() {
				// 在 H5 环境中打开外部链接
				// #ifdef H5
				window.open('http://apidoc.weipinshang.net/web/#/1?page_id=450', '_blank');
				// #endif
				
				// 在 APP 环境中使用 plus.runtime.openURL
				// #ifdef APP-PLUS
				plus.runtime.openURL('http://apidoc.weipinshang.net/web/#/1?page_id=450');
				// #endif
				
				// 在小程序环境中复制链接
				// #ifdef MP
				uni.setClipboardData({
					data: 'http://apidoc.weipinshang.net/web/#/1?page_id=450',
					success: function () {
						uni.showToast({
							title: '链接已复制，请在浏览器中打开',
							icon: 'none',
							duration: 2000
						});
					}
				});
				// #endif
			},
			// 打开短剧外部链接
			openDramaLink() {
				// 在 H5 环境中打开外部链接
				// #ifdef H5
				window.open('https://djcps.meinvclk.top', '_blank');
				// #endif
				
				// 在 APP 环境中使用 plus.runtime.openURL
				// #ifdef APP-PLUS
				plus.runtime.openURL('https://djcps.meinvclk.top');
				// #endif
				
				// 在小程序环境中复制链接
				// #ifdef MP
				uni.setClipboardData({
					data: 'https://djcps.meinvclk.top',
					success: function () {
						uni.showToast({
							title: '链接已复制，请在浏览器中打开',
							icon: 'none',
							duration: 2000
						});
					}
				});
				// #endif
			},
			getDanceHistory() {
				uni.request({
					url: baseURLPy + '/dance/history',
					method: 'GET',
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync("token")
					},
					success: (res) => {
						console.log('跳舞历史:', res.data);
						if (res.data.code === 1 && res.data.data) {
							this.danceHistoryList = res.data.data;
						}
					},
					fail: (err) => {
						console.error('获取跳舞历史失败:', err);
					}
				});
			},
			playDanceVideo(videoUrl) {
				this.openVideoPlayer(videoUrl);
			},
			openHistoryModal(type, mode = 'preview') {
				this.historyModalType = type;
				this.historyModalMode = mode;
				if (mode === 'all') {
					this.fetchAllHistory(type);
					return;
				}
				this.historyModalList = type === 'dance' ? (this.danceHistoryList || []) : (this.singHistoryList || []);
				this.historyModalVisible = true;
			},
			fetchAllHistory(type) {
				const endpoint = type === 'dance' ? '/dance/history/all' : '/sing/history/all';
				uni.request({
					url: baseURLPy + endpoint,
					method: 'GET',
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync("token")
					},
					success: (res) => {
						if (res.data && res.data.code === 1 && res.data.data) {
							this.historyModalList = res.data.data;
						} else {
							this.historyModalList = [];
						}
						this.historyModalVisible = true;
					},
					fail: () => {
						this.historyModalList = [];
						this.historyModalVisible = true;
					}
				});
			},
			isDownloadFailed(item) {
				const msg = (item && item.error_msg ? String(item.error_msg) : '') || '';
				return msg.indexOf('下载失败') !== -1;
			},
			formatHistoryStatus(item) {
				if (!item) return '';
				const status = item.status || '';
				if (status === 'succeeded') return '成功';
				if (status === 'pending' || status === 'running') return '生成中';
				if (status === 'failed') {
					if (this.isDownloadFailed(item)) return '文件下载失败';
					return '生成失败';
				}
				return '';
			},
			retryHistoryItem(item) {
				if (!item || !item.id) return;
				const id = item.id;
				const endpoint = this.historyModalType === 'dance' ? ('/dance/retry/' + id) : ('/sing/retry/' + id);
				uni.showLoading({ title: '处理中...', mask: true });
				uni.request({
					url: baseURLPy + endpoint,
					method: 'POST',
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync("token")
					},
					success: () => {
						uni.hideLoading();
						uni.showToast({ title: '已触发重新下载', icon: 'none', duration: 1500 });
						this.fetchAllHistory(this.historyModalType);
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({ title: '重试失败', icon: 'none', duration: 1500 });
					}
				});
			},
			closeHistoryModal() {
				this.historyModalVisible = false;
			},
			openVideoPlayer(url) {
				if (!url) return;
				this.videoPlayerUrl = url;
				this.videoPlayerVisible = true;
			},
			closeVideoPlayer() {
				this.videoPlayerVisible = false;
				this.videoPlayerUrl = '';
			},
			// 获取歌曲列表
			// 获取歌曲列表
			getSingSongs() {
				SingSongs().then(res => {
					if (res.code == 1) {
						this.singSongsList = res.data.songs || [];
					}
				});
				// 同时获取历史记录
				this.getSingHistory();
			},
			// 获取唱歌历史记录
			getSingHistory() {
				uni.request({
					url: baseURLPy + '/sing/history',
					method: 'GET',
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync("token")
					},
					success: (res) => {
						console.log('唱歌历史:', res.data);
						if (res.data.code === 1 && res.data.data) {
							this.singHistoryList = res.data.data;
						}
					},
					fail: (err) => {
						console.error('获取唱歌历史失败:', err);
					}
				});
			},
			// 播放唱歌视频
			playSingVideo(videoUrl) {
				this.openVideoPlayer(videoUrl);
			},
			// 格式化日期
			formatDate(dateStr) {
				if (!dateStr) return '';
				const date = new Date(dateStr);
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hour = String(date.getHours()).padStart(2, '0');
				const minute = String(date.getMinutes()).padStart(2, '0');
				return `${month}-${day} ${hour}:${minute}`;
			},
			// 加载换装数据
			// 轮询监听唱歌任务结果
			getSingGenerateTask(task_id) {
				const that = this;
				let attempts = 0;
				const maxAttempts = 225; // 15分钟左右 (225*4s)
				
				const doPoll = () => {
					if (!that.singGenerating || that.singGeneratingTaskId !== task_id) {
						return;
					}
					attempts++;
					if (attempts > maxAttempts) {
						that.singGenerating = false;
						that.singGeneratingTaskId = 0;
						uni.setStorageSync('singGenerating', false);
						uni.setStorageSync('singGeneratingTaskId', 0);
						if (that.singPollTimer) {
							clearTimeout(that.singPollTimer);
							that.singPollTimer = null;
						}
						uni.showToast({ 
							title: '处理超时，请稍后查看', 
							icon: 'none',
							duration: 2000
						});
						return;
					}
					
					SingGenerateTask(task_id).then(res => {
						if (res.code == 1) {
							const data = res.data;
							if (data.status == 'succeeded') {
								that.singGenerating = false;
								that.singGeneratingTaskId = 0;
								uni.setStorageSync('singGenerating', false);
								uni.setStorageSync('singGeneratingTaskId', 0);
								uni.showToast({ 
									title: '生成成功！', 
									icon: 'success',
									duration: 2000
								});
								// 可以在这里刷新聊天消息或显示视频
							} else if (data.status == 'failed') {
								that.singGenerating = false;
								that.singGeneratingTaskId = 0;
								uni.setStorageSync('singGenerating', false);
								uni.setStorageSync('singGeneratingTaskId', 0);
								uni.showToast({ 
									title: data.error_msg || '生成失败', 
									icon: 'none',
									duration: 2000
								});
							} else {
								// 继续轮询
								that.singGenerating = true;
								that.singGeneratingTaskId = task_id;
								uni.setStorageSync('singGenerating', true);
								uni.setStorageSync('singGeneratingTaskId', task_id);
								that.singPollTimer = setTimeout(doPoll, 4000);
							}
						} else {
							that.singGenerating = false;
							that.singGeneratingTaskId = 0;
							uni.setStorageSync('singGenerating', false);
							uni.setStorageSync('singGeneratingTaskId', 0);
							if (that.singPollTimer) {
								clearTimeout(that.singPollTimer);
								that.singPollTimer = null;
							}
							uni.showToast({ 
								title: res.msg, 
								icon: 'none',
								duration: 2000
							});
						}
					}).catch(err => {
						that.singGenerating = false;
						that.singGeneratingTaskId = 0;
						uni.setStorageSync('singGenerating', false);
						uni.setStorageSync('singGeneratingTaskId', 0);
						uni.showToast({ 
							title: '查询失败，请重试', 
							icon: 'none',
							duration: 2000
						});
					});
				};
				
				doPoll();
			},
			getDanceGenerateTask(task_id) {
				const that = this;
				let attempts = 0;
				const maxAttempts = 225; // 15分钟左右 (225*4s)
				const doPoll = () => {
					if (!that.danceGenerating || that.danceGeneratingTaskId !== task_id) {
						return;
					}
					attempts++;
					if (attempts > maxAttempts) {
						that.danceGenerating = false;
						that.danceGeneratingTaskId = 0;
						uni.setStorageSync('danceGenerating', false);
						uni.setStorageSync('danceGeneratingTaskId', 0);
						if (that.dancePollTimer) {
							clearTimeout(that.dancePollTimer);
							that.dancePollTimer = null;
						}
						uni.showToast({ title: '处理超时，请稍后查看', icon: 'none', duration: 2000 });
						return;
					}
					DanceGenerateTask(task_id).then(res => {
						if (res.code == 1) {
							const data = res.data;
							if (data.status == 'succeeded') {
								that.danceGenerating = false;
								that.danceGeneratingTaskId = 0;
								uni.setStorageSync('danceGenerating', false);
								uni.setStorageSync('danceGeneratingTaskId', 0);
								uni.showToast({ title: '生成成功！', icon: 'success', duration: 2000 });
								that.getDanceHistory();
							} else if (data.status == 'failed') {
								that.danceGenerating = false;
								that.danceGeneratingTaskId = 0;
								uni.setStorageSync('danceGenerating', false);
								uni.setStorageSync('danceGeneratingTaskId', 0);
								uni.showToast({ title: data.error_msg || '生成失败', icon: 'none', duration: 2000 });
							} else {
								that.danceGenerating = true;
								that.danceGeneratingTaskId = task_id;
								uni.setStorageSync('danceGenerating', true);
								uni.setStorageSync('danceGeneratingTaskId', task_id);
								that.dancePollTimer = setTimeout(doPoll, 4000);
							}
						} else {
							that.danceGenerating = false;
							that.danceGeneratingTaskId = 0;
							uni.setStorageSync('danceGenerating', false);
							uni.setStorageSync('danceGeneratingTaskId', 0);
							if (that.dancePollTimer) {
								clearTimeout(that.dancePollTimer);
								that.dancePollTimer = null;
							}
							uni.showToast({ title: res.msg, icon: 'none', duration: 2000 });
						}
					}).catch(() => {
						that.danceGenerating = false;
						that.danceGeneratingTaskId = 0;
						uni.setStorageSync('danceGenerating', false);
						uni.setStorageSync('danceGeneratingTaskId', 0);
						if (that.dancePollTimer) {
							clearTimeout(that.dancePollTimer);
							that.dancePollTimer = null;
						}
						uni.showToast({ title: '查询失败，请重试', icon: 'none', duration: 2000 });
					});
				};
				doPoll();
			},
			cancelSingGeneration() {
				this.singGenerating = false;
				this.singGeneratingTaskId = 0;
				uni.setStorageSync('singGenerating', false);
				uni.setStorageSync('singGeneratingTaskId', 0);
				if (this.singPollTimer) {
					clearTimeout(this.singPollTimer);
					this.singPollTimer = null;
				}
				uni.showToast({ title: '已取消生成', icon: 'none', duration: 1500 });
			},
			cancelDanceGeneration() {
				this.danceGenerating = false;
				this.danceGeneratingTaskId = 0;
				uni.setStorageSync('danceGenerating', false);
				uni.setStorageSync('danceGeneratingTaskId', 0);
				if (this.dancePollTimer) {
					clearTimeout(this.dancePollTimer);
					this.dancePollTimer = null;
				}
				uni.showToast({ title: '已取消生成', icon: 'none', duration: 1500 });
			},
			// 处理青少年模式状态改变事件
			handleUnderAgeStatusChange(status) {
				this.underAgeEnabled = status;
			},
			// 检查本地存储的青少年模式状态
			checkUnderAgeStatus() {
				const storedStatus = uni.getStorageSync('underAgeEnabled');
				console.log('storedStatus:', storedStatus)
				this.underAgeEnabled = !!storedStatus; // 确保是布尔值
			},
			async checkPermission() {
				try {
					const settingRes = await new Promise((resolve, reject) => {
						uni.getSetting({
							success: (res) => resolve(res),
							fail: (err) => reject(err)
						});
					});
					console.log(settingRes.authSetting, '当前授权状态');
					// 检查摄像头权限
					if (!settingRes.authSetting['scope.camera']) {
						try {
							await new Promise((resolve, reject) => {
								uni.authorize({
									scope: 'scope.camera',
									success: () => resolve(),
									fail: (err) => {
										console.warn('摄像头授权失败', err);
										// 用户拒绝授权，可以引导用户手动开启
										this.showPermissionGuide('摄像头');
										reject(err);
									}
								});
							});
						} catch (err) {
							console.warn('摄像头授权失败', err);
						}
					}
					// 检查麦克风权限 - 注意：微信小程序是 scope.recordMicrophone 而不是 scope.record
					if (!settingRes.authSetting['scope.record']) {
						try {
							await new Promise((resolve, reject) => {
								uni.authorize({
									scope: 'scope.record', // 修正权限名称
									success: () => resolve(),
									fail: (err) => {
										console.warn('麦克风授权失败', err);
										this.showPermissionGuide('麦克风');
										reject(err);
									}
								});
							});
						} catch (err) {
							console.warn('麦克风授权失败', err);
						}
					}
				} catch (error) {
					console.error('获取授权设置失败', error);
				}
			},
			// 显示权限引导提示
			showPermissionGuide(permissionType) {
				uni.showModal({
					title: '需要授权',
					content: `需要${permissionType}权限才能正常使用相关功能，请在设置中开启`,
					showCancel: true,
					cancelText: '取消',
					confirmText: '去设置',
					success: (modalRes) => {
						if (modalRes.confirm) {
							// 跳转到小程序设置页面
							uni.openSetting({
								success: (settingRes) => {
									console.log('用户设置结果', settingRes);
								}
							});
						}
					}
				});
			},
			getUserBasic() {
				GetUserBasic({}).then(res => {
					if (res.code == 1) {
						let data = res.data
						const conversationStore = useConversationStore();
						let listener = {
							nickname: data.username,
							headImage: data.avatar,
							openid: data.wxapp_openid,
						}
						conversationStore.setUserInfo(listener); //存储用户信息
						this.getBobbiesList = data
						console.log('data', data)
						this.getServerData();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							position: 'top'
						})
					}
				}).catch(() => {})
			},
			loverInit() {
				LoverInit().then(res => {
					if (res.code == 1) {
						this.getUserBasic()
					}
				})
			},
			loverBasic() {
				LoverBasic().then(res => {
					if (res.code == 1) {
						this.loverBasicList = res.data
						uni.setStorageSync('loverBasicList', res.data)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							position: 'top'
						})
					}
				})
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let todayPercent = this.getBobbiesList.bond_today_percent / 100 ? this.getBobbiesList.bond_today_percent /
						100 : 0
					console.log('todayPercent', todayPercent)
					let res = {
						series: [{
							name: "正确率",
							color: "#9F47FF",
							data: todayPercent
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			calculateProgressWidth() {
				if (this.getBobbiesList.intimacy == null || this.getBobbiesList.next_level_intimacy == null) {
					return 0;
				}
				// 根据比例计算实际宽度，确保不超过最大宽度160rpx
				const actualWidth = (this.getBobbiesList.intimacy / this.getBobbiesList.next_level_intimacy) * 160;
				const result = Math.min(actualWidth, 160);

				// 打印计算过程和结果
				console.log('最终结果:', result);
				return result;
			},
			calculateProgressPercent() {
				if (this.getBobbiesList.intimacy == null || this.getBobbiesList.next_level_intimacy == null) {
					return 0;
				}
				const percent = (this.getBobbiesList.intimacy / this.getBobbiesList.next_level_intimacy) * 100;
				return Math.min(percent, 100);
			},
			togenerate() {
				this.loverBasic()
				this.loverInit()
				this.$nextTick(() => {
					this.getServerData();
				});
			},
			// 定制专属女友
			tocreate() {
				uni.navigateTo({
					url: '/pages/create/index'
				});
			},
			tocreateLover() {
				uni.navigateTo({
					url: '/pages/create/lover'
				});
			},
			toties() {
				uni.navigateTo({
					url: '/pages/index/ties'
				});
			},
			tointimacy() {
				uni.navigateTo({
					url: '/pages/index/intimacy'
				});
			},
			toreplacement1(){
				uni.navigateTo({
					url: '/pages/chat/test1'
				});
			},
			toreplacement() {
				// if (this.getBobbiesList.level >= 4) {
				// 	uni.navigateTo({
				// 		url: '/pages/index/replacement'
				// 	});
				// } else {
				// 	uni.showToast({
				// 		title: '达到Lv.4才可以解锁换装',
				// 		icon: 'none',
				// 		position: 'top'
				// 	});
				// }
				uni.navigateTo({
					url: '/pages/index/replacement'
				});
				// uni.navigateTo({
				// 	url: '/pages/chat/test0'
				// });
			},
			tochat() {
				uni.navigateTo({
					url: '/pages/chat/index'
				});
			},
			tophone() {
				// if (this.getBobbiesList.level >= 2) {
				// 	uni.navigateTo({
				// 		url: '/pages/chat/phone'
				// 	});
				// } else {
				// 	uni.showToast({
				// 		title: '达到Lv.2才可以解锁电话',
				// 		icon: 'none',
				// 		position: 'top'
				// 	});
				// }
				uni.navigateTo({
					url: '/pages/chat/phone'
				});
			},
			togift() {
				uni.navigateTo({
					url: '/pages/index/gift'
				});
			},
			todynamics() {
				uni.navigateTo({
					url: '/pages/index/dynamics'
				});
			},
			
			// ========== 聊天相关方法 ==========
			// 初始化聊天会话
			initChatSession() {
				// 获取用户头像
				const userInfo = uni.getStorageSync('userinfo');
				this.chatUserAvatar = userInfo?.avatar || '/static/images/avatar.png';
				
				// 获取恋人头像 - 优先使用当前选中的形象，否则使用基本信息中的头像
				if (this.currentLookImageUrl) {
					this.chatLoverAvatar = this.currentLookImageUrl;
				} else if (this.loverBasicList?.image_url) {
					this.chatLoverAvatar = this.loverBasicList.image_url;
				} else {
					this.chatLoverAvatar = '/static/images/avatar.png';
				}
				
				uni.showLoading({ title: '加载中...' });
				
				SessionInit().then(res => {
					uni.hideLoading();
					if (res.code === 1) {
						this.chatSessionId = res.data.session_id;
						// 加载历史消息（只显示最近10条）
						const allMessages = res.data.messages || [];
						this.chatMessages = allMessages.slice(-10).map(msg => ({
							role: msg.role === 'lover' ? 'ai' : 'user',
							content: msg.content
						}));
						
						// 滚动到底部
						this.$nextTick(() => {
							this.scrollChatToBottom();
						});
					} else {
						uni.showToast({ title: res.msg || '加载失败', icon: 'none' });
					}
				}).catch(err => {
					uni.hideLoading();
					console.error('初始化会话失败:', err);
					uni.showToast({ title: '网络错误', icon: 'none' });
				});
			},
			
			// 发送聊天消息
			sendChatMessage() {
				if (!this.chatInputText.trim()) {
					return;
				}
				
				if (this.chatSending) {
					return;
				}
				
				if (!this.chatSessionId) {
					uni.showToast({ title: '会话未初始化', icon: 'none' });
					return;
				}
				
				const userMessage = this.chatInputText.trim();
				this.chatInputText = '';
				
				// 让输入框失去焦点，收起键盘
				uni.hideKeyboard();
				
				// 添加用户消息到列表
				this.chatMessages.push({
					role: 'user',
					content: userMessage
				});
				
				// 滚动到底部
				this.$nextTick(() => {
					this.scrollChatToBottom();
				});
				
				// 添加"思考中"提示
				const thinkingIndex = this.chatMessages.length;
				this.chatMessages.push({
					role: 'ai',
					content: '思考中...'
				});
				
				this.chatSending = true;
				
				// 发送到后端
				SessionSend({
					session_id: this.chatSessionId,
					message: userMessage
				}).then(res => {
					this.chatSending = false;
					
					if (res.code === 1) {
						// 移除"思考中"
						this.chatMessages.splice(thinkingIndex, 1);
						
						// 添加 AI 回复
						this.chatMessages.push({
							role: 'ai',
							content: res.data.reply || '...'
						});
						
						// 滚动到底部
						this.$nextTick(() => {
							this.scrollChatToBottom();
						});
					} else {
						// 移除"思考中"
						this.chatMessages.splice(thinkingIndex, 1);
						uni.showToast({ title: res.msg || '发送失败', icon: 'none' });
					}
				}).catch(err => {
					this.chatSending = false;
					// 移除"思考中"
					this.chatMessages.splice(thinkingIndex, 1);
					console.error('发送消息失败:', err);
					uni.showToast({ title: '发送失败', icon: 'none' });
				});
			},
			
			// 输入框失去焦点时的处理
			onInputBlur() {
				// 确保输入框恢复正常状态
				this.$nextTick(() => {
					// 强制重新渲染，确保样式正确
				});
			},
			
			// 滚动聊天到底部
			scrollChatToBottom() {
				this.chatIntoView = '';
				this.$nextTick(() => {
					this.chatIntoView = 'chat-bottom';
				});
			},
			
			// ========== 首页形象栏相关方法 ==========
			// 加载首页形象栏
			loadHomeLooks() {
				OutfitList({}).then(res => {
					if (res && res.code == 1 && res.data) {
						this.homeLooksList = res.data.looks || [];
						// 如果有形象栏数据，默认选中第一个
						if (this.homeLooksList.length > 0) {
							this.selectedLookId = this.homeLooksList[0].id;
							this.currentLookImageUrl = this.homeLooksList[0].image_url;
							// 同时更新聊天头像
							this.chatLoverAvatar = this.homeLooksList[0].image_url;
						}
					}
				}).catch(err => {
					console.error('加载形象栏失败:', err);
				});
			},
			
			// 切换形象
			switchLook(look) {
				if (!look || !look.id) return;
				
				// 调用后端 API 切换形象
				uni.request({
					url: baseURLPy + '/outfit/looks/use/' + look.id,
					method: 'POST',
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync("token")
					},
					success: (res) => {
						if (res.data && res.data.code === 1) {
							this.selectedLookId = look.id;
							this.currentLookImageUrl = look.image_url;
							
							// 更新聊天页面的头像
							this.chatLoverAvatar = look.image_url;
							
							// 更新女友基本信息（刷新图片）
							this.loverBasic();
							
							uni.showToast({ 
								title: '形象切换成功', 
								icon: 'success',
								duration: 1500
							});
						} else {
							uni.showToast({ 
								title: res.data.msg || '切换失败', 
								icon: 'none',
								duration: 1500
							});
						}
					},
					fail: (err) => {
						console.error('切换形象失败:', err);
						uni.showToast({ 
							title: '切换失败，请重试', 
							icon: 'none',
							duration: 1500
						});
					}
				});
			},
			
			// ========== 音乐库相关方法 ==========
			// 切换唱歌Tab
			switchSingTab(tab) {
				this.singCurrentTab = tab;
				if (tab === 'library' && this.musicLibraryList.length === 0) {
					this.loadMusicLibrary();
				}
			},
			
			// 加载音乐库
			loadMusicLibrary(page = 1) {
				uni.request({
					url: baseURLPy + '/music/library',
					method: 'GET',
					data: {
						page: page,
						page_size: this.musicLibraryPageSize
					},
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync("token")
					},
					success: (res) => {
						if (res.data && res.data.code === 1) {
							const data = res.data.data;
							if (page === 1) {
								this.musicLibraryList = data.list || [];
							} else {
								this.musicLibraryList = this.musicLibraryList.concat(data.list || []);
							}
							this.musicLibraryTotal = data.total || 0;
							this.musicLibraryPage = page;
							this.musicLibraryHasMore = this.musicLibraryList.length < this.musicLibraryTotal;
						}
					},
					fail: (err) => {
						console.error('加载音乐库失败:', err);
						uni.showToast({ title: '加载失败', icon: 'none' });
					}
				});
			},
			
			// 加载更多音乐
			loadMoreMusic() {
				if (!this.musicLibraryHasMore) return;
				this.loadMusicLibrary(this.musicLibraryPage + 1);
			},
			
			// 显示添加音乐弹窗
			showAddMusicModal() {
				this.showMusicModal = true;
				this.musicForm = {
					title: '',
					artist: '',
					music_url: '',
					cover_url: '',
					duration: null
				};
			},
			
			// 关闭添加音乐弹窗
			closeMusicModal() {
				this.showMusicModal = false;
			},
			
			// 提交音乐
			submitMusic() {
				if (!this.musicForm.title || !this.musicForm.music_url) {
					uni.showToast({ title: '请填写歌曲标题和音乐链接', icon: 'none' });
					return;
				}
				
				uni.showLoading({ title: '提交中...' });
				
				uni.request({
					url: baseURLPy + '/music/add-link',
					method: 'POST',
					data: this.musicForm,
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync("token"),
						'Content-Type': 'application/json'
					},
					success: (res) => {
						uni.hideLoading();
						if (res.data && res.data.code === 1) {
							uni.showToast({ title: '添加成功', icon: 'success' });
							this.closeMusicModal();
							this.loadMusicLibrary(1); // 刷新列表
						} else {
							uni.showToast({ title: res.data.msg || '添加失败', icon: 'none' });
						}
					},
					fail: (err) => {
						uni.hideLoading();
						console.error('添加音乐失败:', err);
						uni.showToast({ title: '添加失败', icon: 'none' });
					}
				});
			},
			
			// 从音乐库选择歌曲
			selectMusicFromLibrary(music) {
				// 记录播放次数
				uni.request({
					url: baseURLPy + '/music/' + music.id + '/play',
					method: 'POST',
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync("token")
					}
				});
				
				// 使用音乐库的歌曲生成视频
				if (this.singGenerating) {
					uni.showToast({ title: '视频生成中，请稍候...', icon: 'none', duration: 2000 });
					return;
				}
				
				// 这里需要调用唱歌API，传入音乐库的音乐URL
				uni.showModal({
					title: '提示',
					content: `确定让她唱《${music.title}》吗？`,
					success: (modalRes) => {
						if (modalRes.confirm) {
							// TODO: 调用唱歌API，使用 music.music_url
							this.generateSingVideoFromLibrary(music);
						}
					}
				});
			},
			// ========================================
			// 在 xuniYou/pages/index/index.vue 文件中
			// 找到第 2387 行的 selectMusicFromLibrary 方法
			// 完整替换为以下代码（包括后面的两个新方法）
			// ========================================

			selectMusicFromLibrary(music) {
				// 记录播放次数
				uni.request({
					url: baseURLPy + '/music/' + music.id + '/play',
					method: 'POST',
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync("token")
					}
				});
				
				// 使用音乐库的歌曲生成视频
				if (this.singGenerating) {
					uni.showToast({ title: '视频生成中，请稍候...', icon: 'none', duration: 2000 });
					return;
				}
				
				// 检查音乐类型
				if (music.upload_type === 'external') {
					uni.showModal({
						title: '提示',
						content: '外部平台音乐无法生成视频，请使用直链或上传的音乐',
						showCancel: false
					});
					return;
				}
				
				// 确认生成
				uni.showModal({
					title: '生成唱歌视频',
					content: `确定让她唱《${music.title}》吗？`,
					success: (modalRes) => {
						if (modalRes.confirm) {
							this.generateSingVideoFromLibrary(music);
						}
					}
				});
			},

			// 生成唱歌视频（从音乐库）
			generateSingVideoFromLibrary(music) {
				const that = this;
				
				// 显示加载
				uni.showLoading({ title: '准备中...' });
				
				// 第 1 步：转换为系统歌曲
				uni.request({
					url: baseURLPy + '/music/convert-to-song?music_id=' + music.id,
					method: 'POST',
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync("token")
					},
					success: (res) => {
						if (res.data && res.data.code === 1) {
							const songId = res.data.data.song_id;
							
							// 第 2 步：调用现有的唱歌生成 API
							that.generateSingVideoWithSongId(songId, music.title);
						} else {
							uni.hideLoading();
							uni.showModal({
								title: '转换失败',
								content: res.data.message || '未知错误',
								showCancel: false
							});
						}
					},
					fail: (err) => {
						uni.hideLoading();
						console.error('转换失败:', err);
						uni.showModal({
							title: '转换失败',
							content: '网络错误，请重试',
							showCancel: false
						});
					}
				});
			},

			// 使用 song_id 生成唱歌视频
			generateSingVideoWithSongId(songId, songTitle) {
				const that = this;
				
				uni.showLoading({ title: '生成中...' });
				
				uni.request({
					url: baseURLPy + '/sing/generate',
					method: 'POST',
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync("token")
					},
					data: {
						song_id: songId
					},
					success: (res) => {
						uni.hideLoading();
						
						if (res.data && res.data.code === 1) {
							const data = res.data.data;
							
							if (data.status === 'succeeded') {
								// 立即成功（有缓存）
								uni.showToast({
									title: '生成成功',
									icon: 'success'
								});
								
								// 刷新历史记录
								that.getSingHistory();
								
								// 切换到历史记录 tab
								that.switchSingTab('history');
								
								// 播放视频
								if (data.video_url) {
									that.openVideoPlayer(data.video_url);
								}
							} else {
								// 生成中
								that.singGenerating = true;
								that.singGeneratingTaskId = data.generation_task_id;
								
								uni.showToast({
									title: '视频生成中...',
									icon: 'loading',
									duration: 2000
								});
								
								// 开始轮询
								that.getSingGenerateTask(data.generation_task_id);
								
								// 切换到历史记录 tab
								that.switchSingTab('history');
							}
						} else {
							uni.showModal({
								title: '生成失败',
								content: res.data.message || '未知错误',
								showCancel: false
							});
						}
					},
					fail: (err) => {
						uni.hideLoading();
						console.error('生成失败:', err);
						
						// 检查是否是 409 错误（已有任务进行中）
						if (err.statusCode === 409 || (err.data && err.data.detail && err.data.detail.includes('进行中'))) {
							uni.showModal({
								title: '提示',
								content: '已有视频正在生成中，请稍后再试',
								showCancel: false
							});
						} else {
							uni.showModal({
								title: '生成失败',
								content: '网络错误，请重试',
								showCancel: false
							});
						}
					}
				});
			},

			// 切换音乐点赞
			toggleMusicLike(music) {
				uni.request({
					url: baseURLPy + '/music/' + music.id + '/like',
					method: 'POST',
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync("token")
					},
					success: (res) => {
						if (res.data && res.data.code === 1) {
							music.is_liked = res.data.data.is_liked;
							music.like_count = res.data.data.like_count;
						}
					},
					fail: (err) => {
						console.error('点赞失败:', err);
					}
				});
			}
		}
	}
</script>
<style>
	page {
		background: #FFFFFF;
	}
</style>
<style>
	/* ========== 礼物页面样式 ========== */
	.gift-page {
		display: flex;
		flex-direction: column;
		height: 100%;
		background: linear-gradient(180deg, #FFE5F5 0%, #F5F5FF 100%);
	}

	.gift-header {
		padding: 40rpx 30rpx 20rpx;
		text-align: center;
	}

	.gift-header-title {
		font-size: 48rpx;
		font-weight: bold;
		color: #9F47FF;
		margin-bottom: 10rpx;
	}

	.gift-header-desc {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 20rpx;
	}

	.gift-intimacy-bar {
		background: rgba(255, 255, 255, 0.8);
		border-radius: 20rpx;
		padding: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(159, 71, 255, 0.1);
	}

	.gift-intimacy-label {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.gift-intimacy-info {
		display: flex;
		align-items: center;
		gap: 15rpx;
	}

	.gift-intimacy-level {
		font-size: 28rpx;
		font-weight: bold;
		color: #9F47FF;
		flex-shrink: 0;
	}

	.gift-intimacy-progress {
		flex: 1;
		height: 20rpx;
		background: #E5E5E5;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.gift-intimacy-progress-bar {
		height: 100%;
		background: linear-gradient(90deg, #FF6B9D 0%, #9F47FF 100%);
		border-radius: 10rpx;
		transition: width 0.3s ease;
	}

	.gift-intimacy-value {
		font-size: 24rpx;
		color: #666;
		flex-shrink: 0;
	}

	.gift-scroll {
		flex: 1;
		padding: 0 20rpx;
	}

	.gift-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-bottom: 40rpx;
	}

	.gift-item {
		width: 32%;
		margin-bottom: 20rpx;
	}

	.gift-item-inner {
		background: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(159, 71, 255, 0.15);
		display: flex;
		flex-direction: column;
		align-items: center;
		transition: all 0.3s ease;
	}

	.gift-item-inner:active {
		transform: scale(0.95);
		box-shadow: 0 2rpx 8rpx rgba(159, 71, 255, 0.2);
	}

	.gift-item-img {
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 10rpx;
	}

	.gift-item-name {
		font-size: 26rpx;
		color: #333;
		text-align: center;
		margin-bottom: 8rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
	}

	.gift-item-price {
		font-size: 24rpx;
		color: #FF6B9D;
		font-weight: bold;
		margin-bottom: 4rpx;
	}

	.gift-item-intimacy {
		font-size: 22rpx;
		color: #9F47FF;
		background: rgba(159, 71, 255, 0.1);
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
	}

	/* 礼物详情弹窗 */
	.gift-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: flex-end;
		z-index: 1000;
	}

	.gift-modal-content {
		width: 100%;
		background: linear-gradient(180deg, #FFE5F5 0%, #FFFFFF 100%);
		border-radius: 40rpx 40rpx 0 0;
		padding: 40rpx 30rpx;
		padding-bottom: 60rpx;
	}

	.gift-modal-header {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		margin-bottom: 30rpx;
	}

	.gift-modal-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.gift-modal-close {
		position: absolute;
		right: 0;
		width: 40rpx;
		height: 40rpx;
	}

	.gift-modal-body {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		padding: 20rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 20rpx;
	}

	.gift-modal-img {
		width: 160rpx;
		height: 160rpx;
		margin-right: 30rpx;
		flex-shrink: 0;
	}

	.gift-modal-info {
		flex: 1;
	}

	.gift-modal-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #9F47FF;
		margin-bottom: 10rpx;
	}

	.gift-modal-intimacy {
		font-size: 26rpx;
		color: #FF6B9D;
		margin-bottom: 10rpx;
		background: rgba(255, 107, 157, 0.1);
		padding: 6rpx 12rpx;
		border-radius: 8rpx;
		display: inline-block;
	}

	.gift-modal-price {
		font-size: 36rpx;
		font-weight: bold;
		color: #FF0000;
	}

	.gift-modal-quantity {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		padding: 20rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 16rpx;
	}

	.gift-modal-quantity-label {
		font-size: 30rpx;
		color: #333;
	}

	.gift-modal-quantity-control {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.gift-quantity-btn {
		width: 50rpx;
		height: 50rpx;
	}

	.gift-quantity-input {
		width: 80rpx;
		height: 50rpx;
		text-align: center;
		font-size: 28rpx;
		color: #333;
		background: #fff;
		border-radius: 8rpx;
	}

	.gift-modal-balance {
		font-size: 28rpx;
		color: #666;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.gift-modal-btn {
		padding: 28rpx 0;
		background: linear-gradient(135deg, #FF6B9D 0%, #C239B3 100%);
		color: #fff;
		text-align: center;
		border-radius: 16rpx;
		font-size: 32rpx;
		font-weight: bold;
		box-shadow: 0 8rpx 20rpx rgba(255, 107, 157, 0.3);
	}

	.gift-modal-btn:active {
		transform: scale(0.98);
	}

	/* ========== 旧的礼物样式（已废弃，保留以防需要） ========== */
	.gift-tab .body {
		position: relative;
	}

	.gift-tab .back {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 1624rpx;
		display: block;
	}

	.gift-tab .list {
		position: relative;
	}

	.gift-tab .list_logo {
		margin: -140rpx 0 0 0;
		width: 100%;
		height: 556rpx;
		display: block;
	}

	.gift-tab .list_content {
		position: relative;
	}

	.gift-tab .list_backA {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		width: 100%;
		display: block;
	}

	.gift-tab .list_module {
		position: relative;
		padding: 46rpx 34rpx;
	}

	.gift-tab .list_detail {
		position: relative;
	}

	.gift-tab .list_title {
		font-weight: 400;
		font-size: 32rpx;
		color: #CC9DFF;
		line-height: 50rpx;
	}

	.gift-tab .list_body {
		position: relative;
		margin: 54rpx 0 0 0;
	}

	.gift-tab .gift-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.gift-tab .list_item {
		position: relative;
		width: 30%;
		margin-bottom: 40rpx;
	}

	.gift-tab .list_scrollDetail {
		position: relative;
	}

	.gift-tab .list_image {
		position: relative;
		width: 176rpx;
		height: 176rpx;
	}

	.gift-tab .list_border {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		display: block;
	}

	.gift-tab .list_picture {
		position: relative;
		width: 120rpx;
		height: 120rpx;
		display: block;
	}

	.gift-tab .list_name {
		margin: 8rpx 0 0 0;
		font-weight: 500;
		font-size: 30rpx;
		color: #F661B5;
		line-height: 50rpx;
		text-align: center;
	}

	.gift-tab .list_btn {
		margin: 150rpx 0 0 0;
		padding: 24rpx 0;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 50rpx;
		background: linear-gradient(135deg, #F0BDDD 0%, #A89CF7 100%);
		border-radius: 12rpx;
	}

	.gift-tab .alert {
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		bottom: 0;
		box-sizing: border-box;
		background: rgba(0, 0, 0, 0.2);
		z-index: 2;
	}

	.gift-tab .alert_content {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: linear-gradient(180deg, #EDD6F5 0%, #FFFFFF 100%);
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 46rpx 40rpx 68rpx 40rpx;
	}

	.gift-tab .alert_title {
		position: relative;
		font-weight: 500;
		font-size: 36rpx;
		color: #333333;
		line-height: 50rpx;
		text-align: center;
	}

	.gift-tab .alert_title image {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		width: 30rpx;
		height: 30rpx;
		margin: auto 0;
	}

	.gift-tab .alert_module {
		position: relative;
		margin: 68rpx 0 58rpx 0;
	}

	.gift-tab .alert_image {
		width: 256rpx;
		height: 256rpx;
		display: block;
	}

	.gift-tab .alert_alert {
		position: relative;
		margin: 0 0 0 62rpx;
	}

	.gift-tab .alert_item {
		position: relative;
		margin: 0 0 0 44rpx;
	}

	.gift-tab .alert_item image {
		width: 36rpx;
		height: 48rpx;
	}

	.gift-tab .alert_name {
		margin: 0 14rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #9779FA;
		line-height: 50rpx;
	}

	.gift-tab .alert_explain {
		margin: 18rpx 0 0 0;
		font-weight: 400;
		font-size: 26rpx;
		color: #9779FA;
		line-height: 50rpx;
	}

	.gift-tab .alert_add {
		margin: 0 0 0 80rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #9779FA;
		line-height: 50rpx;
	}

	.gift-tab .alert_money {
		margin: 28rpx 0 0 0;
		font-weight: 700;
		font-size: 44rpx;
		color: #FF0000;
		line-height: 50rpx;
	}

	.gift-tab .alert_money text {
		font-size: 28rpx;
		line-height: 65rpx;
	}

	.gift-tab .alert_number {
		position: relative;
	}

	.gift-tab .alert_number_title {
		font-weight: 400;
		font-size: 32rpx;
		color: #222222;
		line-height: 50rpx;
	}

	.gift-tab .alert_number_content {
		margin: 0 0 0 100rpx;
		position: relative;
	}

	.gift-tab .alert_number_content image {
		width: 64rpx;
		height: 64rpx;
	}

	.gift-tab .alert_number_content input {
		padding: 0 8rpx;
		width: 78rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #000000;
		line-height: 40rpx;
		text-align: center;
	}

	.gift-tab .alert_number_value {
		color: #333333;
	}

	.gift-tab .alert_balance {
		margin: 78rpx 0 26rpx 0;
		font-weight: 500;
		font-size: 30rpx;
		color: #909090;
		line-height: 50rpx;
		text-align: center;
	}

	.gift-tab .alert_btn {
		position: relative;
		padding: 26rpx 112rpx;
		font-weight: 500;
		font-size: 30rpx;
		line-height: 50rpx;
		border-radius: 12rpx;
		color: #FFFFFF;
		background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%), #D8D8D8;
	}
	.body {
		position: relative;
	}

	.back {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 656rpx;
		background: linear-gradient(180deg, #C7A7FF 0%, #F7F7F7 100%);
	}

	.body {
		position: relative;
		margin: 44rpx 0 0 0;
		padding: 0 40rpx 200rpx 40rpx;
	}

	.list {
		position: relative;
		width: 100%;
	}

	.list_logo {
		position: relative;
		width: 100%;
		height: 1164rpx;
		display: block;
		border-radius: 12rpx;
	}

	.list_content {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 98rpx;
		margin: 0 60rpx;
		padding: 22rpx 0;
		font-weight: 600;
		font-size: 34rpx;
		color: #FFFFFF;
		line-height: 50rpx;
		background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%);
		border-radius: 12rpx;
	}

	.list_title {
		font-weight: 600;
		font-size: 34rpx;
		color: #FFFFFF;
		line-height: 50rpx;
	}

	.list_next {
		margin: 0 0 0 8rpx;
		width: 34rpx;
		height: 8rpx;
	}

	.list_module {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 36rpx;
		margin: 0 auto;
	}

	.list_item {
		margin: 0 22rpx 0 0;
		width: 60rpx;
		height: 4rpx;
		background: #FFFFFF;
		border-radius: 5rpx;
	}

	.list_item:nth-child(3) {
		margin: 0 0 0 0;
	}

	.list_active {
		width: 90rpx;
		background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%), #FFFFFF;
	}

	.global-block-mask {
		position: fixed;
		top: calc(80rpx + var(--status-bar-height));
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.45);
		z-index: 900;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.global-block-card {
		width: 520rpx;
		padding: 36rpx 28rpx;
		background: rgba(255, 255, 255, 0.95);
		border-radius: 16rpx;
		text-align: center;
	}

	.global-block-title {
		font-size: 34rpx;
		font-weight: 600;
		color: #111111;
		line-height: 48rpx;
	}

	.global-block-sub {
		margin-top: 14rpx;
		font-size: 26rpx;
		color: #666666;
		line-height: 38rpx;
	}

	.global-block-actions {
		margin-top: 22rpx;
		display: flex;
		justify-content: center;
	}

	.global-block-btn {
		padding: 14rpx 28rpx;
		border-radius: 999rpx;
		border: 1px solid rgba(0, 0, 0, 0.12);
		font-size: 26rpx;
		color: #333333;
		background: rgba(255, 255, 255, 0.95);
	}

	.backA {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 656rpx;
		background: linear-gradient(180deg, #FFE3E9 0%, #F7F7F7 100%);
	}

	.bodyA {
		position: relative;
		padding: 0 40rpx 200rpx 40rpx;
		z-index: 2;
	}

	.listA {
		position: relative;
		height: 1082rpx;
	}

	.listA_back {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		display: block;
		border-radius: 20rpx;
	}

	.listA_content {
		position: relative;
		padding: 52rpx 32rpx;
	}

	.listA_title {
		font-weight: 700;
		font-size: 50rpx;
		color: #FFFFFF;
		line-height: 50rpx;
	}

	.listA_module {
		position: relative;
		margin: 34rpx 0 0 0;
	}


	.listA_dight {
		position: relative;
		width: 45rpx;
		height: 40rpx;
	}

	.listA_dight image {
		width: 100%;
		height: 100%;
	}


	.listA_grade {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		font-weight: 400;
		font-size: 26rpx;
		color: #FFFFFF;
		line-height: 50rpx;
	}

	.listA_item {
		position: relative;
		margin: 0 0 0 10rpx;
	}

	.listA_level {
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 50rpx;
	}

	.listA_level text {
		font-size: 26rpx;
	}

	.listA_line {
		position: relative;
		width: 160rpx;
		height: 12rpx;
		background: rgba(255, 255, 255, 0.5);
		border-radius: 88rpx;
	}

	.listA_line text {
		position: absolute;
		left: 5rpx;
		top: 0;
		bottom: 0;
		margin: auto 0;
		width: 40rpx;
		height: 8rpx;
		background: linear-gradient(310deg, #D14499 0%, #9F47FF 100%);
		border-radius: 88rpx;
	}

	.listA_progress {
		position: relative;
		margin: 40rpx 0 0 0;
	}

	.listA_charts {
		position: relative;
		width: 176rpx;
		height: 93px;
	}

	.listA_number {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		font-weight: 700;
		font-size: 36rpx;
		color: #F661B5;
		line-height: 50rpx;
	}

	.listA_number text {
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.listA_text {
		margin: -20rpx 0 0 0;
		width: 176rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 50rpx;
		text-align: center;
	}

	.listA_dynamics {
		margin: 20rpx 0 0 0;
		width: 100rpx;
		height: 100rpx;
		display: block;
		border-radius: 10rpx;
	}

	.listA_detail {
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.listA_white {
		/* position: absolute;
		bottom: -6rpx;
		left: -6rpx;
		width: 300rpx; */
		
		position: relative;
		/* bottom: -8rpx; */
		bottom: -12rpx;
		/* left: -8rpx; */
		left: -10rpx;
		width: 300rpx;
	}

	.listA_chat {
		/* position: relative; */
		position: absolute;
		left: 0;
		bottom: 0;
		margin: 0 0 5rpx 5rpx;
		width: 230rpx;
	}

	.listA_backA {
		position: relative;
		width: 100%;
		display: block;
		border-radius: 0 20rpx 20rpx 0;
	}

	.listA_exchange {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 50rpx;
	}

	.listA_chatA {
		margin: 0 16rpx 0 0;
		width: 41rpx;
		height: 41rpx;
	}

	.listA_opt {
		position: absolute;
		right: 25rpx;
		bottom: 13rpx;
	}

	.listA_phone {
		margin: 0 25rpx 0 0;
		width: 88rpx;
		height: 88rpx;
	}

	.listA_gift {
		position: relative;
		padding: 12rpx 14rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 50rpx;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 22rpx;
	}

	.listA_gift image {
		width: 66rpx;
		height: 66rpx;
	}

	.bannerA {
		position: relative;
		margin: 30rpx 0 0 0;
		width: 100%;
	}

	.bannerA image {
		width: 100%;
		height: 184rpx;
		display: block;
		border-radius: 0 20rpx 20rpx 0;
	}

	.bannerA_text {
		position: absolute;
		left: 102rpx;
		top: 0;
		bottom: 0;
		margin: auto;
		font-weight: 700;
		font-size: 40rpx;
		color: #FEFEFE;
		line-height: 50rpx;
	}

	.promptA {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}

	.promptA text {
		padding: 22rpx 42rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 50rpx;
		background: #9779FA;
		border-radius: 20rpx;
	}

	/* 青少年模式遮罩层样式 */
	.underage-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9;
	}

	.underage-text {
		font-size: 36rpx;
		font-weight: bold;
		color: white;
		text-align: center;
		padding: 40rpx;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 20rpx;
	}

	/* Tab 栏样式 - 固定在顶部 */
	.tab-container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		background: rgba(255, 255, 255, 0.95);
		padding: 10rpx 0;
		padding-top: calc(10rpx + var(--status-bar-height));
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.tab-scroll {
		white-space: nowrap;
	}

	.tab-list {
		display: inline-flex;
		padding: 0 20rpx;
	}

	.tab-item {
		display: inline-block;
		padding: 15rpx 30rpx;
		margin: 0 10rpx;
		font-size: 28rpx;
		color: #666;
		border-radius: 30rpx;
		transition: all 0.3s;
	}

	.tab-item.active {
		color: #fff;
		background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%);
		font-weight: bold;
	}

	.tab-name {
		white-space: nowrap;
	}

	/* Swiper 容器样式 */
	.swiper-container {
		flex: 1;
		width: 100%;
		height: calc(100vh - 120rpx);
		margin-top: calc(80rpx + var(--status-bar-height));
		overflow-x: hidden;
	}

	.swiper-scroll {
		height: 100%;
		width: 100%;
		overflow-x: hidden;
	}

	.swiper-content {
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow-x: hidden;
	}

	/* 功能页面样式 */
	.feature-page {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx;
		box-sizing: border-box;
	}

	.feature-icon {
		font-size: 120rpx;
		margin-bottom: 30rpx;
	}

	.feature-title {
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.feature-desc {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 40rpx;
		text-align: center;
	}

	.feature-btn {
		padding: 20rpx 60rpx;
		background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%);
		color: #fff;
		border-radius: 50rpx;
		font-size: 30rpx;
	}

	.feature-scroll {
		width: 100%;
		max-height: 60vh;
		margin-top: 20rpx;
		box-sizing: border-box;
		overflow-x: hidden;
	}

	/* 历史视频样式 */
	.history-section {
		width: 100%;
		padding: 20rpx;
		margin-bottom: 30rpx;
		box-sizing: border-box;
	}

	.history-section-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
		padding-left: 10rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 0;
		padding-left: 0;
	}

	.section-more {
		font-size: 26rpx;
		color: #0053FA;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		background: rgba(0, 83, 250, 0.08);
	}

	.history-list {
		width: 100%;
	}

	.history-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 25rpx;
		margin-bottom: 15rpx;
		background: linear-gradient(135deg, rgba(159, 71, 255, 0.1) 0%, rgba(0, 83, 250, 0.1) 100%);
		border-radius: 15rpx;
		border: 1px solid rgba(159, 71, 255, 0.2);
	}

	.history-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.history-title {
		font-size: 30rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 8rpx;
	}

	.history-date {
		font-size: 24rpx;
		color: #999;
	}

	.history-actions {
		display: flex;
		gap: 15rpx;
	}

	.history-btn {
		padding: 12rpx 30rpx;
		background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%);
		color: #fff;
		border-radius: 25rpx;
		font-size: 26rpx;
	}

	/* 歌曲列表样式 */
	.song-list {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.song-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 25rpx;
		margin-bottom: 20rpx;
		background: #f5f5f5;
		border-radius: 15rpx;
	}

	.song-info {
		flex: 1;
	}

	.song-title {
		font-size: 30rpx;
		color: #333;
	}

	.song-icon {
		width: 40rpx;
		height: 40rpx;
	}

	/* 跳舞表单样式 */
	.dance-form {
		width: 100%;
		padding: 20rpx;
	}

	.dance-input {
		width: 100%;
		min-height: 200rpx;
		padding: 20rpx;
		background: #f5f5f5;
		border-radius: 15rpx;
		font-size: 28rpx;
		margin-bottom: 30rpx;
		box-sizing: border-box;
	}

	.dance-btn {
		width: 100%;
		padding: 25rpx;
		background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%);
		color: #fff;
		text-align: center;
		border-radius: 50rpx;
		font-size: 30rpx;
		box-sizing: border-box;
	}

	/* 商城列表样式 */
	.shop-list {
		width: 100%;
		padding: 20rpx;
	}

	.shop-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		margin-bottom: 20rpx;
		background: #f5f5f5;
		border-radius: 15rpx;
	}

	.shop-info {
		flex: 1;
	}

	.shop-title {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.shop-desc {
		font-size: 24rpx;
		color: #999;
	}

	.shop-price {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.price-value {
		font-size: 36rpx;
		color: #ff4444;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.shop-buy-btn {
		padding: 10rpx 30rpx;
		background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%);
		color: #fff;
		border-radius: 30rpx;
		font-size: 24rpx;
	}

	/* 商城外部链接页面样式 */
	.shop-link-page {
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.shop-link-page:active {
		transform: scale(0.98);
	}

	.shop-link-banner {
		width: 80%;
		max-width: 500rpx;
		margin: 40rpx auto;
		padding: 40rpx;
		background: linear-gradient(135deg, #FFE5F0 0%, #E5F0FF 100%);
		border-radius: 20rpx;
		border: 2rpx solid #9F47FF;
		box-shadow: 0 8rpx 20rpx rgba(159, 71, 255, 0.2);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20rpx;
	}

	.shop-banner-img {
		width: 200rpx;
		height: 200rpx;
	}

	.shop-link-text {
		font-size: 32rpx;
		color: #9F47FF;
		font-weight: bold;
		text-align: center;
	}

	.shop-external-btn {
		background: linear-gradient(135deg, #FF6B9D 0%, #C239B3 100%);
		font-weight: bold;
		box-shadow: 0 4rpx 12rpx rgba(255, 107, 157, 0.3);
	}

	/* ========== 新商城页面全屏设计样式 ========== */
	.shop-page {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.shop-hero {
		flex: 1;
		position: relative;
		width: 100%;
		overflow: hidden;
		cursor: pointer;
	}

	.shop-hero-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(135deg, 
			#FFE5F5 0%, 
			#F5E5FF 25%, 
			#E5F0FF 50%, 
			#FFE5F0 75%, 
			#F5F0FF 100%);
		animation: gradientShift 10s ease infinite;
	}

	@keyframes gradientShift {
		0%, 100% {
			background-position: 0% 50%;
		}
		50% {
			background-position: 100% 50%;
		}
	}

	/* 装饰圆圈 */
	.shop-decoration {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		z-index: 1;
	}

	.shop-circle {
		position: absolute;
		border-radius: 50%;
		background: radial-gradient(circle, rgba(159, 71, 255, 0.15) 0%, transparent 70%);
		animation: float 6s ease-in-out infinite;
	}

	.shop-circle-1 {
		width: 300rpx;
		height: 300rpx;
		top: 10%;
		left: -10%;
		animation-delay: 0s;
	}

	.shop-circle-2 {
		width: 200rpx;
		height: 200rpx;
		top: 60%;
		right: -5%;
		animation-delay: 2s;
	}

	.shop-circle-3 {
		width: 250rpx;
		height: 250rpx;
		bottom: 15%;
		left: 10%;
		animation-delay: 4s;
	}

	.shop-circle-4 {
		width: 180rpx;
		height: 180rpx;
		top: 30%;
		right: 15%;
		animation-delay: 1s;
	}

	.shop-hero-content {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60rpx 40rpx;
		z-index: 2;
		box-sizing: border-box;
	}

	/* 顶部标签 */
	.shop-hot-badge {
		display: flex;
		align-items: center;
		gap: 8rpx;
		padding: 12rpx 28rpx;
		background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
		border-radius: 30rpx;
		margin-bottom: 40rpx;
		box-shadow: 0 8rpx 20rpx rgba(255, 215, 0, 0.4);
		animation: pulse 2s ease-in-out infinite;
	}

	.shop-hot-icon {
		font-size: 32rpx;
	}

	.shop-hot-text {
		font-size: 28rpx;
		font-weight: bold;
		color: #FFFFFF;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
	}

	/* 商城图标 */
	.shop-icon-wrapper {
		position: relative;
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 40rpx;
	}

	.shop-main-icon {
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 2;
		animation: bounce 2s ease-in-out infinite;
	}

	@keyframes bounce {
		0%, 100% {
			transform: translateY(0);
		}
		50% {
			transform: translateY(-20rpx);
		}
	}

	.shop-icon-glow {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 240rpx;
		height: 240rpx;
		background: radial-gradient(circle, rgba(159, 71, 255, 0.3) 0%, transparent 70%);
		border-radius: 50%;
		animation: glow 2s ease-in-out infinite;
		z-index: 1;
	}

	@keyframes glow {
		0%, 100% {
			opacity: 0.5;
			transform: translate(-50%, -50%) scale(1);
		}
		50% {
			opacity: 1;
			transform: translate(-50%, -50%) scale(1.2);
		}
	}

	/* 标题 */
	.shop-hero-title {
		font-size: 64rpx;
		font-weight: bold;
		background: linear-gradient(135deg, #9F47FF 0%, #FF6B9D 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		text-align: center;
		margin-bottom: 20rpx;
		letter-spacing: 4rpx;
	}

	.shop-hero-subtitle {
		font-size: 28rpx;
		color: #666;
		text-align: center;
		margin-bottom: 50rpx;
	}

	/* 特色网格 */
	.shop-features-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		width: 100%;
		max-width: 500rpx;
		margin-bottom: 50rpx;
	}

	.shop-feature-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10rpx;
		padding: 30rpx 20rpx;
		background: rgba(255, 255, 255, 0.8);
		backdrop-filter: blur(10rpx);
		border-radius: 20rpx;
		border: 2rpx solid rgba(159, 71, 255, 0.2);
		box-shadow: 0 4rpx 12rpx rgba(159, 71, 255, 0.1);
		transition: all 0.3s ease;
	}

	.shop-feature-card:active {
		transform: scale(0.95);
	}

	.shop-feature-emoji {
		font-size: 48rpx;
	}

	.shop-feature-label {
		font-size: 26rpx;
		color: #333;
		font-weight: 500;
	}

	/* 进入按钮 */
	.shop-enter-button {
		display: flex;
		align-items: center;
		gap: 15rpx;
		padding: 28rpx 60rpx;
		background: linear-gradient(135deg, #9F47FF 0%, #FF6B9D 100%);
		border-radius: 60rpx;
		box-shadow: 0 12rpx 30rpx rgba(159, 71, 255, 0.4);
		margin-bottom: 30rpx;
		transition: all 0.3s ease;
	}

	.shop-enter-button:active {
		transform: scale(0.95);
		box-shadow: 0 8rpx 20rpx rgba(159, 71, 255, 0.3);
	}

	.shop-enter-text {
		font-size: 36rpx;
		font-weight: bold;
		color: #FFFFFF;
		letter-spacing: 2rpx;
	}

	.shop-enter-arrow {
		font-size: 36rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	/* 提示文字 */
	.shop-hint {
		display: flex;
		align-items: center;
		gap: 8rpx;
		padding: 12rpx 24rpx;
		background: rgba(159, 71, 255, 0.1);
		backdrop-filter: blur(10rpx);
		border-radius: 30rpx;
		animation: float 3s ease-in-out infinite;
	}

	.shop-hint-icon {
		font-size: 24rpx;
	}

	.shop-hint-text {
		font-size: 24rpx;
		color: #666;
	}

	/* 短剧列表样式 */
	.drama-list {
		width: 100%;
		padding: 20rpx;
	}

	.drama-item {
		display: flex;
		margin-bottom: 30rpx;
		background: #f5f5f5;
		border-radius: 15rpx;
		overflow: hidden;
	}

	.drama-cover {
		width: 200rpx;
		height: 150rpx;
		flex-shrink: 0;
	}

	.drama-info {
		flex: 1;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.drama-title {
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.drama-desc {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 15rpx;
	}

	.drama-play-btn {
		align-self: flex-start;
		padding: 8rpx 25rpx;
		background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%);
		color: #fff;
		border-radius: 20rpx;
		font-size: 24rpx;
	}

	/* 短剧外部链接特殊样式 */
	.drama-link-item {
		position: relative;
		background: linear-gradient(135deg, #FFE5F0 0%, #E5F0FF 100%);
		border: 2rpx solid #9F47FF;
		box-shadow: 0 4rpx 12rpx rgba(159, 71, 255, 0.2);
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.drama-link-item:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 8rpx rgba(159, 71, 255, 0.3);
	}

	.drama-banner {
		width: 200rpx;
		height: 150rpx;
		border-right: 2rpx solid rgba(159, 71, 255, 0.2);
	}

	.drama-link-badge {
		position: absolute;
		top: 10rpx;
		left: 10rpx;
		padding: 4rpx 12rpx;
		background: linear-gradient(135deg, #FF6B9D 0%, #C239B3 100%);
		color: #fff;
		font-size: 20rpx;
		border-radius: 8rpx;
		font-weight: bold;
		z-index: 1;
	}

	.drama-external-btn {
		background: linear-gradient(135deg, #FF6B9D 0%, #C239B3 100%);
		font-weight: bold;
	}

	/* ========== 新短剧页面全屏海报样式 ========== */
	.drama-page {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background: #000;
		overflow: hidden;
	}

	.drama-hero {
		flex: 1;
		position: relative;
		width: 100%;
		overflow: hidden;
		cursor: pointer;
	}

	.drama-hero-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.drama-hero-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg, 
			rgba(0, 0, 0, 0.3) 0%, 
			rgba(0, 0, 0, 0.5) 50%, 
			rgba(0, 0, 0, 0.8) 100%);
		z-index: 1;
	}

	.drama-hero-content {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60rpx 40rpx;
		z-index: 2;
		box-sizing: border-box;
	}

	/* 热门标签 */
	.drama-hot-badge {
		display: flex;
		align-items: center;
		gap: 8rpx;
		padding: 12rpx 24rpx;
		background: linear-gradient(135deg, #FF6B9D 0%, #FF4757 100%);
		border-radius: 30rpx;
		margin-bottom: 40rpx;
		box-shadow: 0 8rpx 20rpx rgba(255, 107, 157, 0.4);
		animation: pulse 2s ease-in-out infinite;
	}

	@keyframes pulse {
		0%, 100% {
			transform: scale(1);
		}
		50% {
			transform: scale(1.05);
		}
	}

	.drama-hot-icon {
		font-size: 32rpx;
	}

	.drama-hot-text {
		font-size: 28rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	/* 标题 */
	.drama-hero-title {
		font-size: 72rpx;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
		margin-bottom: 20rpx;
		text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.5);
		letter-spacing: 4rpx;
	}

	.drama-hero-subtitle {
		font-size: 32rpx;
		color: rgba(255, 255, 255, 0.9);
		text-align: center;
		margin-bottom: 50rpx;
		text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.5);
	}

	/* 标签组 */
	.drama-tags {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 15rpx;
		margin-bottom: 60rpx;
		padding: 0 20rpx;
	}

	.drama-tag {
		padding: 12rpx 24rpx;
		background: rgba(255, 255, 255, 0.2);
		backdrop-filter: blur(10rpx);
		border: 1rpx solid rgba(255, 255, 255, 0.3);
		border-radius: 30rpx;
		font-size: 26rpx;
		color: #FFFFFF;
		font-weight: 500;
	}

	/* 播放按钮 */
	.drama-play-button {
		display: flex;
		align-items: center;
		gap: 15rpx;
		padding: 28rpx 60rpx;
		background: linear-gradient(135deg, #FF6B9D 0%, #C239B3 100%);
		border-radius: 60rpx;
		box-shadow: 0 12rpx 30rpx rgba(255, 107, 157, 0.5);
		margin-bottom: 40rpx;
		transition: all 0.3s ease;
	}

	.drama-play-button:active {
		transform: scale(0.95);
		box-shadow: 0 8rpx 20rpx rgba(255, 107, 157, 0.4);
	}

	.drama-play-icon {
		font-size: 36rpx;
		color: #FFFFFF;
		font-weight: bold;
	}

	.drama-play-text {
		font-size: 36rpx;
		font-weight: bold;
		color: #FFFFFF;
		letter-spacing: 2rpx;
	}

	/* 提示文字 */
	.drama-hint {
		display: flex;
		align-items: center;
		gap: 8rpx;
		padding: 12rpx 24rpx;
		background: rgba(255, 255, 255, 0.1);
		backdrop-filter: blur(10rpx);
		border-radius: 30rpx;
		animation: float 3s ease-in-out infinite;
	}

	@keyframes float {
		0%, 100% {
			transform: translateY(0);
		}
		50% {
			transform: translateY(-10rpx);
		}
	}

	.drama-hint-icon {
		font-size: 24rpx;
	}

	.drama-hint-text {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	/* 底部特色推荐 */
	.drama-features {
		display: flex;
		justify-content: space-around;
		padding: 30rpx 20rpx;
		background: rgba(0, 0, 0, 0.8);
		backdrop-filter: blur(20rpx);
		border-top: 1rpx solid rgba(255, 255, 255, 0.1);
		z-index: 3;
	}

	.drama-feature-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10rpx;
	}

	.drama-feature-icon {
		font-size: 48rpx;
	}

	.drama-feature-text {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	/* 自定义细线指示器样式 */
	.swiper-indicator {
		position: fixed;
		bottom: 20rpx;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 8rpx;
		z-index: 100;
		padding: 0 20rpx;
		transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
		transform: translateY(0);
		opacity: 1;
	}

	.swiper-indicator.indicator-hidden {
		transform: translateY(100%);
		opacity: 0;
		pointer-events: none;
	}

	.indicator-line {
		flex: 1;
		height: 3rpx;
		background: rgba(0, 0, 0, 0.1);
		border-radius: 2rpx;
		transition: all 0.3s ease;
	}

	.indicator-line.active {
		background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%);
		height: 4rpx;
	}

	/* 聊天预览容器样式 */
	.chat-preview-container {
		width: 100%;
		height: 100%;
		padding: 40rpx;
		box-sizing: border-box;
	}

	.chat-preview-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.chat-preview-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.chat-preview-btn {
		padding: 15rpx 30rpx;
		background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%);
		color: #fff;
		border-radius: 30rpx;
		font-size: 26rpx;
	}

	.chat-preview-list {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60rpx 40rpx;
	}

	.chat-preview-tip {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 60rpx;
		text-align: center;
	}

	.chat-preview-image {
		width: 300rpx;
		height: 300rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-bottom: 30rpx;
		box-shadow: 0 8rpx 20rpx rgba(159, 71, 255, 0.2);
	}

	.chat-preview-image image {
		width: 100%;
		height: 100%;
	}

	.chat-preview-name {
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 15rpx;
	}

	.chat-preview-desc {
		font-size: 28rpx;
		color: #666;
	}

	/* 换装页面样式 - 和谐配色 */
	.outfit-container {
		width: 100%;
		min-height: 100%;
		padding: 30rpx;
		background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
		box-sizing: border-box;
	}

	.outfit-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		margin-bottom: 30rpx;
		border-bottom: 1rpx solid #e8e8e8;
	}

	.outfit-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.outfit-count {
		font-size: 26rpx;
		color: #666;
		padding: 8rpx 20rpx;
		background: #f5f5f5;
		border-radius: 20rpx;
	}

	.outfit-loading {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 100rpx 0;
		color: #999;
		font-size: 28rpx;
	}

	.outfit-content {
		width: 100%;
		padding-bottom: 40rpx;
	}

	.outfit-section {
		margin-bottom: 50rpx;
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
	}

	.section-title {
		font-size: 30rpx;
		font-weight: 500;
		color: #555;
		margin-bottom: 25rpx;
		padding-left: 10rpx;
		border-left: 4rpx solid #8a7cff;
	}
	
	.section-title-top {
		font-size: 70rpx !important;
		font-weight: bold !important;
		color: #000 !important;
		text-align: center !important;
		margin: 0 0 40rpx 0 !important;
		padding: 20rpx 0 !important;
		background: #f0f0f0 !important;
		border-radius: 12rpx !important;
		display: block !important;
		width: 100% !important;
	}

	/* 网格容器 - 使用固定宽度 */
	.outfit-grid-wrapper {
		width: 100%;
		overflow: hidden;
		text-align: left;
	}
	
	.outfit-item-wrapper {
		float: left;
		width: 220rpx;
		margin-right: 15rpx;
		margin-bottom: 20rpx;
		box-sizing: border-box;
	}

	.outfit-grid-inner {
		position: relative;
		width: 100%;
		height: 280rpx;
		border-radius: 12rpx;
		overflow: hidden;
		background: #fff;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
		transition: all 0.3s ease;
		border: 5rpx solid #ddd;
		box-sizing: border-box;
	}

	.outfit-grid-item-selected .outfit-grid-inner {
		border: 5rpx solid #ff0000 !important;
		box-shadow: 0 4rpx 20rpx rgba(255, 0, 0, 0.4) !important;
	}

	.outfit-grid-img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: block;
		object-fit: cover;
	}

	.outfit-check-mark {
		position: absolute !important;
		top: 8rpx !important;
		left: 8rpx !important;
		width: 40rpx !important;
		height: 40rpx !important;
		background: #8a7cff;
		color: #fff;
		font-size: 28rpx;
		font-weight: bold;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10 !important;
		pointer-events: none;
		line-height: 1;
	}

	.outfit-grid-badge {
		position: absolute;
		top: 8rpx;
		right: 8rpx;
		padding: 8rpx 16rpx;
		background: rgba(255, 0, 0, 0.9);
		color: #fff;
		font-size: 28rpx;
		font-weight: bold;
		border-radius: 12rpx;
		z-index: 2;
	}

	.outfit-grid-lock {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 60rpx;
		opacity: 0.8;
		z-index: 3;
		pointer-events: none;
	}

	.outfit-generate-btn {
		margin: 20rpx 0;
		padding: 28rpx 0;
		background: linear-gradient(135deg, #8a7cff 0%, #6b5ce7 100%);
		color: #fff;
		text-align: center;
		border-radius: 16rpx;
		font-size: 32rpx;
		font-weight: 500;
		box-shadow: 0 8rpx 20rpx rgba(138, 124, 255, 0.3);
		transition: all 0.3s ease;
	}

	.outfit-generate-btn:active {
		transform: scale(0.98);
		box-shadow: 0 4rpx 12rpx rgba(138, 124, 255, 0.3);
	}

	/* ========== 聊天 Swiper 页面样式 ========== */
	.chat-swiper-page {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		min-height: 0;
		background: #f5f5f5;
	}

	.chat-message-scroll {
		flex: 1;
		height: 0;
		min-height: 0;
		padding: 20rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		box-sizing: border-box;
		overflow-y: auto;
	}

	.chat-message-list {
		width: 100%;
	}

	.chat-message-item {
		display: flex;
		margin-bottom: 30rpx;
		align-items: flex-start;
	}

	.message-left {
		flex-direction: row;
		justify-content: flex-start;
	}

	.message-right {
		flex-direction: row-reverse;
		justify-content: flex-start;
		padding-left: 0;
	}

	.chat-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		flex-shrink: 0;
	}

	.chat-message-bubble {
		max-width: 420rpx;  /* 减小气泡宽度，给头像留更多空间 */
		padding: 20rpx 25rpx;
		border-radius: 20rpx;
		margin: 0 20rpx;
	}

	.message-left .chat-message-bubble {
		background: #fff;
		border-top-left-radius: 5rpx;
	}

	.message-right .chat-message-bubble {
		background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%);
	}

	.chat-message-text {
		font-size: 28rpx;
		line-height: 1.6;
		word-wrap: break-word;
	}

	.message-left .chat-message-text {
		color: #333;
	}

	.message-right .chat-message-text {
		color: #fff;
	}

	.chat-input-bar {
		display: flex;
		align-items: center;
		padding: 10rpx 20rpx;
		padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
		background: #fff;
		border-top: 1rpx solid #e5e5e5;
		box-sizing: border-box;
		flex-shrink: 0;  /* 防止被压缩 */
	}

	.chat-message-input {
		flex: 1;
		height: 80rpx;
		padding: 0 25rpx;
		background: #f5f5f5;
		border-radius: 40rpx;
		font-size: 28rpx;
	}

	.chat-send-btn {
		margin-left: 20rpx;
		padding: 20rpx 40rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%);
		color: #fff;
		border-radius: 40rpx;
		font-size: 28rpx;
		flex-shrink: 0;
	}

	/* ========== 底部 Tab 栏隐藏动画 ========== */
	.bottom-tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
		transform: translateY(0);
		opacity: 1;
	}

	.bottom-tab-bar.tab-bar-hidden {
		transform: translateY(100%);  /* 向下移动，完全隐藏 */
		opacity: 0;  /* 透明度为0 */
		pointer-events: none;  /* 禁用点击事件 */
	}
	.modal-mask {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.6);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9999;
	}
	.modal-card {
		width: 92%;
		max-height: 80%;
		background: #ffffff;
		border-radius: 16rpx;
		overflow: hidden;
		box-sizing: border-box;
	}
	.modal-header {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 24rpx;
		border-bottom: 1px solid rgba(0,0,0,0.06);
	}
	.modal-title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		max-width: 70%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 30rpx;
		font-weight: 600;
		color: #333333;
	}
	.modal-close {
		position: absolute;
		right: 24rpx;
		font-size: 26rpx;
		color: #666666;
		padding: 6rpx 12rpx;
	}
	.modal-list {
		max-height: 60vh;
		padding: 12rpx 24rpx 24rpx;
		box-sizing: border-box;
	}
	.modal-item {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 12rpx;
		padding: 16rpx 0;
		border-bottom: 1px solid rgba(0,0,0,0.06);
	}
	.modal-item-info {
		display: flex;
		flex-direction: column;
		flex: 1;
		min-width: 0;
		padding-right: 12rpx;
	}
	.modal-item-title {
		font-size: 28rpx;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.modal-retry {
		min-width: 112rpx;
		max-width: 140rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 24rpx;
		color: #ffffff;
		background: #1DB954;
		padding: 10rpx 16rpx;
		border-radius: 12rpx;
		text-align: center;
		box-sizing: border-box;
		margin-left: 12rpx;
	}
	.modal-item-date {
		font-size: 22rpx;
		color: #999999;
		margin-top: 6rpx;
	}
	.modal-item-status {
		font-size: 22rpx;
		color: #666666;
		margin-top: 6rpx;
		line-height: 1.4;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.modal-item-actions {
		flex: 0 0 auto;
		display: flex;
		justify-content: flex-end;
		margin-left: auto;
		padding-left: 12rpx;
	}
	.modal-play {
		min-width: 112rpx;
		max-width: 140rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 24rpx;
		color: #ffffff;
		background: #F661B5;
		padding: 10rpx 16rpx;
		border-radius: 12rpx;
		text-align: center;
		box-sizing: border-box;
	}
	.modal-video {
		width: 100%;
		height: 420rpx;
		background: #000000;
	}

	/* ========== 首页卡片式设计样式 ========== */
	.home-page {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background: linear-gradient(180deg, #F8F3FF 0%, #FFF5F9 50%, #F0F8FF 100%);
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		overflow-y: auto;
	}

	/* 顶部操作栏 */
	.home-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0;
		margin-bottom: 20rpx;
	}

	.home-header-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
		padding: 10rpx 15rpx;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 16rpx;
		transition: all 0.3s ease;
		box-shadow: 0 2rpx 8rpx rgba(159, 71, 255, 0.1);
	}

	.home-header-btn:active {
		transform: scale(0.95);
		background: rgba(255, 255, 255, 1);
	}

	.home-header-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.home-header-text {
		font-size: 22rpx;
		color: #666;
	}

	.home-header-spacer {
		flex: 1;
	}

	/* 选择互动对象标题 */
	.home-title {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 15rpx 0;
		margin-bottom: 25rpx;
		position: relative;
	}

	.home-title-icon {
		font-size: 24rpx;
		color: #9F47FF;
		margin: 0 10rpx;
	}

	.home-title-text {
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
	}

	.home-title-more {
		position: absolute;
		right: 0;
		font-size: 24rpx;
		color: #9F47FF;
		padding: 6rpx 16rpx;
		background: rgba(159, 71, 255, 0.1);
		border-radius: 20rpx;
	}

	/* 主卡片区域 */
	.home-card {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
		padding: 0 10rpx;
	}

	.home-card-inner {
		width: 100%;
		max-width: 600rpx;
		background: linear-gradient(180deg, #FFFFFF 0%, #FFF5F9 100%);
		border-radius: 30rpx;
		padding: 30rpx;
		box-shadow: 0 12rpx 40rpx rgba(159, 71, 255, 0.15);
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		overflow: hidden;
	}

	.home-card-inner::before {
		content: '';
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		background: radial-gradient(circle, rgba(159, 71, 255, 0.05) 0%, transparent 70%);
		pointer-events: none;
	}

	/* 女友名字 */
	.home-card-name {
		font-size: 40rpx;
		font-weight: bold;
		color: #9F47FF;
		margin-bottom: 20rpx;
		text-align: center;
		z-index: 1;
	}

	/* 女友图片 */
	.home-card-image {
		width: 400rpx;
		height: 500rpx;
		border-radius: 20rpx;
		margin-bottom: 25rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
		z-index: 1;
	}

	/* 性格标签 */
	.home-card-tags {
		display: flex;
		gap: 15rpx;
		margin-bottom: 25rpx;
		z-index: 1;
	}

	.home-card-tag {
		padding: 8rpx 20rpx;
		background: linear-gradient(135deg, rgba(159, 71, 255, 0.15) 0%, rgba(255, 107, 157, 0.15) 100%);
		color: #9F47FF;
		font-size: 24rpx;
		border-radius: 20rpx;
		border: 1rpx solid rgba(159, 71, 255, 0.3);
	}

	/* 对话气泡 */
	.home-card-bubble {
		width: 100%;
		padding: 20rpx 25rpx;
		background: rgba(159, 71, 255, 0.08);
		border-radius: 20rpx;
		border-left: 4rpx solid #9F47FF;
		margin-bottom: 30rpx;
		z-index: 1;
	}

	.home-card-bubble-text {
		font-size: 26rpx;
		color: #555;
		line-height: 1.6;
	}

	/* 底部操作按钮 */
	.home-card-actions {
		width: 100%;
		display: flex;
		gap: 20rpx;
		z-index: 1;
	}

	.home-card-btn {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
		border-radius: 50rpx;
		transition: all 0.3s ease;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.home-card-btn:active {
		transform: scale(0.95);
	}

	.home-card-btn-home {
		flex: 0 0 auto;
		width: 100rpx;
		background: linear-gradient(135deg, #FFE5F0 0%, #E5F0FF 100%);
		border: 2rpx solid rgba(159, 71, 255, 0.2);
	}

	.home-card-btn-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.home-card-btn-chat {
		background: linear-gradient(135deg, #9F47FF 0%, #FF6B9D 100%);
		box-shadow: 0 8rpx 20rpx rgba(159, 71, 255, 0.3);
	}

	.home-card-btn-text {
		font-size: 30rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	/* 底部头像轮播 */
	.home-avatars {
		display: flex;
		justify-content: center;
		gap: 20rpx;
		padding: 20rpx 0;
		margin-bottom: 20rpx;
	}

	.home-avatar-item {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		overflow: hidden;
		border: 3rpx solid #FFFFFF;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
		cursor: pointer;
	}

	.home-avatar-item:active {
		transform: scale(1.15);
	}

	/* 选中状态 - 紫色边框 */
	.home-avatar-item.home-avatar-active {
		border-color: #9F47FF;
		border-width: 4rpx;
		box-shadow: 0 4rpx 16rpx rgba(159, 71, 255, 0.4);
		transform: scale(1.05);
	}

	.home-avatar-img {
		width: 100%;
		height: 100%;
	}

	/* 好感度信息 */
	.home-intimacy {
		width: 100%;
		padding: 20rpx 30rpx;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(159, 71, 255, 0.1);
		display: flex;
		align-items: center;
		gap: 15rpx;
	}

	.home-intimacy-level {
		font-size: 28rpx;
		font-weight: bold;
		color: #9F47FF;
		flex-shrink: 0;
	}

	.home-intimacy-bar {
		flex: 1;
		height: 16rpx;
		background: #E5E5E5;
		border-radius: 8rpx;
		overflow: hidden;
		position: relative;
	}

	.home-intimacy-progress {
		height: 100%;
		background: linear-gradient(90deg, #FF6B9D 0%, #9F47FF 100%);
		border-radius: 8rpx;
		transition: width 0.5s ease;
	}

	.home-intimacy-text {
		font-size: 24rpx;
		color: #666;
		flex-shrink: 0;
	}

	/* ========== 首页商城横幅样式 ========== */
	.home-shop-banner {
		position: relative;
		width: 100%;
		padding: 0;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		overflow: hidden;
		cursor: pointer;
		box-shadow: 0 8rpx 24rpx rgba(159, 71, 255, 0.2);
	}

	.home-shop-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(135deg, #FFE5F5 0%, #F5E5FF 50%, #E5F0FF 100%);
		z-index: 1;
	}

	.home-shop-circle {
		position: absolute;
		border-radius: 50%;
		background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
	}

	.home-shop-circle-1 {
		width: 120rpx;
		height: 120rpx;
		top: -30rpx;
		left: -20rpx;
	}

	.home-shop-circle-2 {
		width: 80rpx;
		height: 80rpx;
		bottom: -20rpx;
		right: 50rpx;
	}

	.home-shop-circle-3 {
		width: 60rpx;
		height: 60rpx;
		top: 20rpx;
		right: -10rpx;
	}

	.home-shop-content {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 25rpx 30rpx;
		z-index: 2;
	}

	.home-shop-left {
		display: flex;
		align-items: center;
		gap: 20rpx;
		flex: 1;
	}

	.home-shop-icon-wrapper {
		position: relative;
		width: 80rpx;
		height: 80rpx;
		flex-shrink: 0;
	}

	.home-shop-icon {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		box-shadow: 0 4rpx 12rpx rgba(159, 71, 255, 0.3);
	}

	.home-shop-badge {
		position: absolute;
		top: -8rpx;
		right: -8rpx;
		padding: 4rpx 10rpx;
		background: linear-gradient(135deg, #FF6B9D 0%, #FF4757 100%);
		color: #FFFFFF;
		font-size: 18rpx;
		font-weight: bold;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 8rpx rgba(255, 107, 157, 0.4);
		animation: pulse 2s ease-in-out infinite;
	}

	.home-shop-text {
		flex: 1;
	}

	.home-shop-title {
		display: flex;
		align-items: center;
		gap: 8rpx;
		margin-bottom: 6rpx;
	}

	.home-shop-title-main {
		font-size: 32rpx;
		font-weight: bold;
		background: linear-gradient(135deg, #9F47FF 0%, #FF6B9D 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}

	.home-shop-title-emoji {
		font-size: 28rpx;
	}

	.home-shop-desc {
		font-size: 24rpx;
		color: #666;
	}

	.home-shop-button {
		display: flex;
		align-items: center;
		gap: 8rpx;
		padding: 15rpx 28rpx;
		background: linear-gradient(135deg, #9F47FF 0%, #FF6B9D 100%);
		border-radius: 40rpx;
		box-shadow: 0 4rpx 12rpx rgba(159, 71, 255, 0.3);
		flex-shrink: 0;
		transition: all 0.3s ease;
	}

	.home-shop-banner:active .home-shop-button {
		transform: scale(0.95);
	}

	.home-shop-button-text {
		font-size: 26rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.home-shop-button-arrow {
		font-size: 26rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	/* 闪光效果 */
	.home-shop-shine {
		position: absolute;
		top: 0;
		left: -100%;
		width: 50%;
		height: 100%;
		background: linear-gradient(90deg, 
			transparent 0%, 
			rgba(255, 255, 255, 0.3) 50%, 
			transparent 100%);
		transform: skewX(-20deg);
		animation: shine 3s ease-in-out infinite;
		z-index: 3;
		pointer-events: none;
	}

	@keyframes shine {
		0% {
			left: -100%;
		}
		20%, 100% {
			left: 150%;
		}
	}
</style>

<style>
	/* ========== 唱歌页面音乐库样式 ========== */
	.sing-page {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background: #f5f5f5;
	}

	.sing-tabs {
		display: flex;
		background: #fff;
		padding: 10rpx 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.sing-tab-item {
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
		font-size: 28rpx;
		color: #666;
		position: relative;
		transition: all 0.3s;
	}

	.sing-tab-active {
		color: #9F47FF;
		font-weight: bold;
	}

	.sing-tab-active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 4rpx;
		background: linear-gradient(90deg, #9F47FF 0%, #FF6B9D 100%);
		border-radius: 2rpx;
	}

	.sing-scroll {
		flex: 1;
		height: 0;
	}

	.sing-content {
		padding: 20rpx;
	}

	/* 添加音乐按钮 */
	.music-add-btns {
		display: flex;
		justify-content: center;
		margin-bottom: 30rpx;
	}

	.music-add-btn {
		display: flex;
		align-items: center;
		gap: 10rpx;
		padding: 20rpx 40rpx;
		background: linear-gradient(135deg, #9F47FF 0%, #FF6B9D 100%);
		color: #fff;
		border-radius: 50rpx;
		box-shadow: 0 8rpx 20rpx rgba(159, 71, 255, 0.3);
		transition: all 0.3s;
	}

	.music-add-btn:active {
		transform: scale(0.95);
	}

	.music-add-icon {
		font-size: 32rpx;
	}

	.music-add-text {
		font-size: 28rpx;
		font-weight: bold;
	}

	/* 音乐库列表 */
	.music-library-list {
		width: 100%;
	}

	.music-library-item {
		display: flex;
		background: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.music-library-cover {
		width: 160rpx;
		height: 160rpx;
		border-radius: 12rpx;
		overflow: hidden;
		position: relative;
		flex-shrink: 0;
		margin-right: 20rpx;
	}

	.music-cover-img {
		width: 100%;
		height: 100%;
	}

	.music-play-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s;
	}

	.music-play-overlay:active {
		background: rgba(0, 0, 0, 0.5);
	}

	.music-play-icon {
		font-size: 60rpx;
		color: #fff;
	}

	.music-library-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.music-library-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.music-library-artist {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 12rpx;
	}

	.music-library-meta {
		display: flex;
		gap: 20rpx;
		font-size: 22rpx;
		color: #666;
	}

	.music-meta-item {
		display: flex;
		align-items: center;
	}

	/* 加载更多 */
	.music-load-more {
		text-align: center;
		padding: 30rpx;
		color: #9F47FF;
		font-size: 28rpx;
	}

	/* 空状态 */
	.music-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 40rpx;
	}

	.music-empty-icon {
		font-size: 120rpx;
		margin-bottom: 20rpx;
	}

	.music-empty-text {
		font-size: 32rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.music-empty-desc {
		font-size: 24rpx;
		color: #999;
	}

	/* 添加音乐弹窗 */
	.music-modal-card {
		max-height: 80vh;
		overflow-y: auto;
	}

	.music-modal-body {
		padding: 30rpx;
	}

	.music-form-item {
		margin-bottom: 30rpx;
	}

	.music-form-label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 15rpx;
		font-weight: 500;
	}

	.music-form-input {
		width: 100%;
		padding: 20rpx;
		background: #f5f5f5;
		border-radius: 12rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}

	.music-form-textarea {
		width: 100%;
		min-height: 150rpx;
		padding: 20rpx;
		background: #f5f5f5;
		border-radius: 12rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}

	.music-modal-btn {
		padding: 28rpx 0;
		background: linear-gradient(135deg, #9F47FF 0%, #FF6B9D 100%);
		color: #fff;
		text-align: center;
		border-radius: 16rpx;
		font-size: 32rpx;
		font-weight: bold;
		box-shadow: 0 8rpx 20rpx rgba(159, 71, 255, 0.3);
		margin-top: 20rpx;
	}

	.music-modal-btn:active {
		transform: scale(0.98);
	}
</style>