<template>
	<view class="profile-page">
		<!-- 移动设备顶部状态栏 -->
		<view class="top_bar flex w-full" v-if="isMobile">
			<view class="chat-header">
				<view class="header-left">
					<i class="fas fa-bell header-icon" @click="handleNotification"></i>
				</view>
				<view class="header-title">我的</view>
				<view class="header-right">
					<i class="fas fa-search header-icon" @click="handleSearch"></i>
				</view>
			</view>
		</view>
		<!-- 浏览器环境顶部导航栏 -->
		<view class="unified-header" v-else>
			<view class="header-content">
				<view class="header-left">
					<i class="fas fa-bell header-icon" @click="handleNotification"></i>
				</view>
				<view class="header-title">我的</view>
				<view class="header-right">
					<i class="fas fa-search header-icon" @click="handleSearch"></i>
				</view>
			</view>
		</view>
		
		<!-- 页面内容 -->
		<scroll-view scroll-y class="unified-content">
			<!-- 个人信息卡片 -->
			<view class="profile-card">
				<!-- 已登录状态 -->
				<view v-if="isLogin" class="profile-content">
					<view class="profile-header" @click="editProfile">
						<view class="profile-avatar">
							<view class="avatar">
								<text class="avatar-text">{{(userInfo.nickname || '未').charAt(0)}}</text>
							</view>
							<view class="edit-icon">
								<i class="fas fa-camera"></i>
							</view>
						</view>
						<view class="profile-info">
							<text class="profile-name">{{userInfo.nickname || '未登录'}}</text>
							<text class="profile-dept">{{userInfo.dept?.name || '未知部门'}}</text>
							<text class="profile-id">工号：{{userInfo.employeeId || 'N/A'}}</text>
						</view>
						<view class="profile-arrow">
							<i class="fas fa-chevron-right"></i>
						</view>
					</view>
					<!-- {
    "id": 1,
    "username": "admin",
    "nickname": "江苏美天智能科技",
    "email": "admin@126.com",
    "mobile": "18888888888",
    "sex": 1,
    "avatar": "http://demo1.meteteme.top/admin-api/infra/file/4/get/5d6c4478d03b3f0971269e3f13ce8984221623f089248d1fb6069dbfcd8baf5e.png",
    "loginIp": "218.92.65.85",
    "loginDate": 1760610192000,
    "createTime": 1609837427000,
    "roles": [
        {
            "id": 1,
            "name": "超级管理员"
        },
        {
            "id": 2,
            "name": "普通角色"
        },
        {
            "id": 3,
            "name": "CRM 管理员"
        }
    ],
    "dept": {
        "id": 100,
        "name": "江苏美天智能科技有限公司",
        "parentId": 0
    },
    "posts": [
        {
            "id": 1,
            "name": "董事长"
        },
        {
            "id": 5,
            "name": "部门主管"
        }
    ],
    "socialUsers": []
} -->

					<!-- 数据统计 -->
					<view class="stats-grid">
						<view class="stat-item" @click="goToAttendance">
							<view class="stat-content">
								<text class="stat-number">{{ userInfo.attendanceRate ?? 0 }}%</text>
								<text class="stat-label">考勤率</text>
							</view>
						</view>
						<view class="stat-item" @click="goToTasks">
							<view class="stat-content">
								<text class="stat-number">{{ userInfo.completedTasks ?? 0 }}</text>
								<text class="stat-label">待完成</text>
							</view>
						</view>
						<view class="stat-item" @click="goToReimbursement">
							<view class="stat-content">
								<text class="stat-number">¥{{ (userInfo.pendingAmount !== undefined && userInfo.pendingAmount !== null) ? userInfo.pendingAmount.toFixed(2) : '0.00' }}</text>
								<text class="stat-label">待报销</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 未登录状态 -->
				<view v-else class="login-prompt">
					<view class="login-icon">
						<i class="fas fa-user-circle"></i>
					</view>
					<view class="login-content">
						<text class="login-title">请先登录</text>
						<text class="login-desc">登录后查看个人信息和工作数据</text>
					</view>
					<view class="login-btn" @click="goToLogin">
						<text class="login-btn-text">立即登录</text>
						<i class="fas fa-arrow-right"></i>
					</view>
				</view>
			</view>

			<!-- 功能设置卡片 -->
			<view class="functions-card">
				<view class="card-header">
					<text class="card-title">功能设置</text>
				</view>
				<view class="module-grid">
					<view class="module-item" @click="toggleMessageSwitch">
						<view class="module-icon" :style="getMessageIconStyle()">
							<i :class="getMessageIcon()"></i>
						</view>
						<text class="module-name">消息提醒</text>
					</view>

					<view class="module-item" @click="themeSettings">
						<view class="module-icon" :style="getThemeIconStyle()">
							<i :class="getThemeIcon()"></i>
						</view>
						<text class="module-name">主题切换</text>
					</view>

					<view class="module-item" @click="changePassword">
						<view class="module-icon" style="background: linear-gradient(135deg, #FF6B6B 0%, #e17055 100%)">
							<i class="fas fa-lock"></i>
						</view>
						<text class="module-name">修改密码</text>
					</view>

					<view class="module-item" @click="bindPhone">
						<view class="module-icon" style="background: linear-gradient(135deg, #4ECDC4 0%, #26c6da 100%)">
							<i class="fas fa-mobile-alt"></i>
						</view>
						<text class="module-name">绑定手机</text>
					</view>

					<view class="module-item" @click="showCacheInfo">
						<view class="module-icon" style="background: linear-gradient(135deg, #FECA57 0%, #f9d423 100%)">
							<i class="fas fa-trash-alt"></i>
						</view>
						<text class="module-name">清除缓存</text>
					</view>

					<view class="module-item" @click="showVersionInfo">
						<view class="module-icon" style="background: linear-gradient(135deg, #FF6B6B 0%, #e17055 100%)">
							<i class="fas fa-sync-alt"></i>
						</view>
						<text class="module-name">版本更新</text>
					</view>

					<view class="module-item none"></view>
					<view class="module-item none"></view>
					<view class="module-item none"></view>
					<view class="module-item none"></view>
				</view>
			</view>

			<!-- 帮助与反馈卡片 -->
			<view class="help-card">
				<view class="card-header">
					<text class="card-title">帮助与反馈</text>
				</view>
				<view class="module-grid">
					<view class="module-item" @click="showFAQ">
						<view class="module-icon" style="background: linear-gradient(135deg, #4ECDC4 0%, #26c6da 100%)">
							<i class="fas fa-question-circle"></i>
						</view>
						<text class="module-name">常见问题</text>
					</view>

					<view class="module-item" @click="feedback">
						<view class="module-icon" style="background: linear-gradient(135deg, #45B7D1 0%, #168aad 100%)">
							<i class="fas fa-comment-dots"></i>
						</view>
						<text class="module-name">意见反馈</text>
					</view>

					<view class="module-item" @click="contactService">
						<view class="module-icon" style="background: linear-gradient(135deg, #96CEB4 0%, #3ad29f 100%)">
							<i class="fas fa-headset"></i>
						</view>
						<text class="module-name">客服联系</text>
					</view>

					<view class="module-item none"></view>
					<view class="module-item none"></view>
				</view>
			</view>

			<!-- 账号管理卡片 -->
			<view class="account-card">
				<view class="card-header">
					<text class="card-title">账号管理</text>
				</view>
				<view class="module-grid">
					<view class="module-item" @click="handleLogout">
						<view class="module-icon" style="background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%)">
							<i class="fas fa-sign-out-alt"></i>
						</view>
						<text class="module-name">退出登录</text>
					</view>

					<view class="module-item" @click="accountLogout">
						<view class="module-icon" style="background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%)">
							<i class="fas fa-user-slash"></i>
						</view>
						<text class="module-name">账号注销</text>
					</view>

					<view class="module-item none"></view>
					<view class="module-item none"></view>
					<view class="module-item none"></view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue'
import { useAuthStore } from '../../src/store/authStore.js'
import { redirectAfterLogout } from '../../src/utils/routeGuard.js'

export default {
	setup() {
		const authStore = useAuthStore()
		
		// 响应式数据
		const unreadCount = ref(2)
		const messageEnabled = ref(true)
		const currentTheme = ref('浅色模式')
		const cacheSize = ref('12.5MB')
		const appVersion = ref('v1.0.0')

		// 用户信息 - 从 Pinia store 获取
		const userInfo = computed(() => {
			return authStore.userInfo || {
				nickname: '未登录',
				name: '未登录',
				department: '未知部门',
				dept: { name: '未知部门' },
				employeeId: 'N/A',
				avatar: 'static\\imgs\\default_avatar.png',
				attendanceRate: 0,
				completedTasks: 0,
				pendingAmount: '0'
			}
		})

		// 登录状态
		const isLogin = computed(() => {
			return authStore.isAuthenticated
		})

		// 设备检测
		const isMobile = computed(() => {
			return getApp().globalData.isMobile
		})

		// 方法
		const handleSearch = () => {
			uni.showToast({
				title: '搜索功能',
				icon: 'none'
			})
		}

		const handleNotification = () => {
			uni.switchTab({
				url: '/pages/message/message'
			})
		}

		const editProfile = () => {
			// 跳转到编辑个人资料页面
			uni.navigateTo({
				url: '/pages/profile/editprofile'
			})
		}

		const goToAttendance = () => {
			uni.showToast({
				title: '查看考勤详情',
				icon: 'none'
			})
		}

		const goToTasks = () => {
			uni.showToast({
				title: '查看任务详情',
				icon: 'none'
			})
		}

		const goToReimbursement = () => {
			uni.showToast({
				title: '查看报销详情',
				icon: 'none'
			})
		}

		const changePassword = () => {
			uni.showToast({
				title: '修改密码',
				icon: 'none'
			})
		}

		const bindPhone = () => {
			uni.showToast({
				title: '绑定手机',
				icon: 'none'
			})
		}

		const accountLogout = () => {
			uni.showModal({
				title: '确认注销',
				content: '注销后账号将无法恢复，确定要注销吗？',
				success: (res) => {
					if (res.confirm) {
						uni.showToast({
							title: '账号注销成功',
							icon: 'none'
						})
					}
				}
			})
		}

		// 登出功能
		const handleLogout = () => {
			uni.showModal({
				title: '确认登出',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						// 使用 Pinia store 登出
						authStore.logout()
						
						uni.showToast({
							title: '已退出登录',
							icon: 'success'
						})
						
						// 跳转到登录页面
						setTimeout(() => {
							redirectAfterLogout()
						}, 500)
					}
				}
			})
		}

		// 跳转到登录页面
		const goToLogin = () => {
			uni.navigateTo({
				url: '/pages/login/index'
			})
		}

		const messageSettings = () => {
			uni.showToast({
				title: '消息设置',
				icon: 'none'
			})
		}

		const toggleMessage = (value) => {
			uni.showToast({
				title: value ? '消息提醒已开启' : '消息提醒已关闭',
				icon: 'none'
			})
		}

		const themeSettings = () => {
			uni.showActionSheet({
				itemList: ['浅色模式', '深色模式', '跟随系统'],
				success: (res) => {
					const themes = ['浅色模式', '深色模式', '跟随系统']
					currentTheme.value = themes[res.tapIndex]
					uni.showToast({
						title: `已切换到${themes[res.tapIndex]}`,
						icon: 'none'
					})
				}
			})
		}

		const clearCache = () => {
			uni.showModal({
				title: '清除缓存',
				content: '确定要清除应用缓存吗？',
				success: (res) => {
					if (res.confirm) {
						cacheSize.value = '0MB'
						uni.showToast({
							title: '缓存清除成功',
							icon: 'none'
						})
					}
				}
			})
		}

		const checkUpdate = () => {
			uni.showToast({
				title: '检查更新中...',
				icon: 'none'
			})
			setTimeout(() => {
				uni.showToast({
					title: '已是最新版本',
					icon: 'none'
				})
			}, 2000)
		}

		const showFAQ = () => {
			uni.showToast({
				title: '常见问题',
				icon: 'none'
			})
		}

		const feedback = () => {
			uni.showToast({
				title: '意见反馈',
				icon: 'none'
			})
		}

		const contactService = () => {
			uni.showToast({
				title: '客服联系',
				icon: 'none'
			})
		}

		const toggleSwitch = () => {
			messageEnabled.value = !messageEnabled.value
			toggleMessage(messageEnabled.value)
		}

		// 获取主题图标
		const getThemeIcon = () => {
			const themeIcons = {
				'浅色模式': 'fas fa-sun',
				'深色模式': 'fas fa-moon',
				'跟随系统': 'fas fa-desktop'
			}
			return themeIcons[currentTheme.value] || 'fas fa-palette'
		}

		// 获取主题图标背景样式
		const getThemeIconStyle = () => {
			const themeStyles = {
				'浅色模式': 'background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%)', // 金黄色渐变
				'深色模式': 'background: linear-gradient(135deg, #4A4A4A 0%, #2C2C2C 100%)', // 深灰色渐变
				'跟随系统': 'background: linear-gradient(135deg, #96CEB4 0%, #3ad29f 100%)' // 绿色渐变
			}
			return themeStyles[currentTheme.value] || 'background: linear-gradient(135deg, #96CEB4 0%, #3ad29f 100%)'
		}

		// 获取消息提醒图标
		const getMessageIcon = () => {
			return messageEnabled.value ? 'fas fa-bell' : 'fas fa-bell-slash'
		}

		// 获取消息提醒图标背景样式
		const getMessageIconStyle = () => {
			return messageEnabled.value 
				? 'background: linear-gradient(135deg, #45B7D1 0%, #168aad 100%)' // 开启状态：蓝色渐变
				: 'background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%)' // 关闭状态：灰色渐变
		}

		// 切换消息提醒状态
		const toggleMessageSwitch = () => {
			messageEnabled.value = !messageEnabled.value
			toggleMessage(messageEnabled.value)
		}

		// 显示缓存信息弹窗
		const showCacheInfo = () => {
			uni.showModal({
				title: '缓存信息',
				content: `当前缓存大小：${cacheSize.value}\n\n点击确定清除缓存`,
				confirmText: '清除缓存',
				cancelText: '取消',
				success: (res) => {
					if (res.confirm) {
						clearCache()
					}
				}
			})
		}

		// 显示版本信息弹窗
		const showVersionInfo = () => {
			uni.showModal({
				title: '版本信息',
				content: `当前版本：${appVersion.value}\n\n点击确定检查更新`,
				confirmText: '检查更新',
				cancelText: '取消',
				success: (res) => {
					if (res.confirm) {
						checkUpdate()
					}
				}
			})
		}

		return {
			unreadCount,
			messageEnabled,
			currentTheme,
			cacheSize,
			appVersion,
			userInfo,
			isLogin,
			isMobile,
			handleSearch,
			handleNotification,
			editProfile,
			goToAttendance,
			goToTasks,
			goToReimbursement,
			changePassword,
			bindPhone,
			accountLogout,
			handleLogout,
			goToLogin,
			messageSettings,
			toggleMessage,
			themeSettings,
			clearCache,
			checkUpdate,
			showFAQ,
			feedback,
			contactService,
			toggleSwitch,
			getThemeIcon,
			getThemeIconStyle,
			getMessageIcon,
			getMessageIconStyle,
			toggleMessageSwitch,
			showCacheInfo,
			showVersionInfo
		}
	}
}
</script>

<style lang="scss" scoped>
.profile-page {
	min-height: 100vh;
	width: 100%;
	background-color: var(--background);
	box-sizing: border-box;
}

/* 浏览器环境下的顶部间距 */
.unified-header + .unified-content {
	margin-top: calc(var(--status-bar-height) + 88rpx);
	padding-top: 30rpx;
}

/* 支持安全区域的设备 - 移动设备不需要额外的 padding-top，因为使用了 top_bar */

/* 移动设备顶部状态栏 */
.top_bar {
	background: var(--gradient-primary);
	box-shadow: var(--shadow-lg);
	z-index: 9999;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: calc(var(--status-bar-height) + 88rpx);
	display: flex;
	align-items: flex-end;
	padding-top: var(--status-bar-height);
	box-sizing: border-box;
}

/* 支持安全区域的设备 */
@supports (padding: max(0px)) {
  .top_bar {
    height: calc(var(--status-bar-height) + 88rpx + env(safe-area-inset-top));
    padding-top: calc(var(--status-bar-height) + env(safe-area-inset-top));
  }
  
  .top_bar + .unified-content {
    margin-top: calc(var(--status-bar-height) + 88rpx + env(safe-area-inset-top));
    padding-top: 30rpx;
  }
}

/* 移动设备下的导航栏样式 */
.top_bar .chat-header {
	background: transparent;
	border-bottom: none;
	box-shadow: none;
	width: 100%;
	height: 88rpx;
	padding: 0 20rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.top_bar .header-title {
	color: var(--white);
	font-weight: 600;
	font-size: 36rpx;
}

.top_bar .header-left i,
.top_bar .header-right i {
	color: var(--white);
	font-size: 32rpx;
}

.top_bar .header-icon {
	font-size: 32rpx;
	color: var(--white);
}

.header-left,
.header-right {
	width: 80rpx;
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease;
}

.top_bar .header-left:active,
.top_bar .header-right:active {
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 8rpx;
}

/* 移动设备下为内容添加顶部间距 */
.top_bar + .unified-content {
	margin-top: calc(var(--status-bar-height) + 88rpx);
	padding-top: 30rpx;
}

/* 浏览器环境顶部导航栏 */
.unified-header {
	background: var(--gradient-primary);
	box-shadow: var(--shadow-lg);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	height: calc(var(--status-bar-height) + 88rpx);
}

.unified-header .header-content {
	padding: 20rpx 30rpx;
	padding-top: calc(var(--status-bar-height) + 20rpx);
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	box-sizing: border-box;
}

.unified-header .header-title {
	flex: 1;
	text-align: center;
	color: var(--white);
	font-size: 32rpx;
	font-weight: 600;
	margin: 0 20rpx;
}

.unified-header .header-left,
.unified-header .header-right {
	display: flex;
	align-items: center;
	min-width: 80rpx;
}

.unified-header .header-right {
	justify-content: flex-end;
}

.unified-header .header-icon {
	color: var(--white);
	font-size: 36rpx;
	padding: 10rpx;
	transition: all 0.3s ease;
}

.unified-header .header-icon:active {
	background: rgba(255, 255, 255, 0.2);
	transform: scale(0.95);
}

/* 支持安全区域的设备 */
@supports (padding: max(0px)) {
  .unified-header {
    height: calc(var(--status-bar-height) + 88rpx + env(safe-area-inset-top));
  }
  
  .unified-header .header-content {
    padding-top: calc(var(--status-bar-height) + 20rpx + env(safe-area-inset-top));
  }
  
  .unified-header + .unified-content {
    margin-top: calc(var(--status-bar-height) + 88rpx + env(safe-area-inset-top));
  }
}


.custom-navbar {
	background: var(--gradient-primary);
	padding: 20rpx 30rpx;
	padding-top: calc(var(--status-bar-height) + 20rpx);
}

.navbar-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.search-box {
	flex: 1;
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 25rpx;
	padding: 15rpx 20rpx;
	margin-right: 20rpx;
	display: flex;
	align-items: center;
}

.search-placeholder {
	color: rgba(255, 255, 255, 0.8);
	font-size: 28rpx;
	margin-left: 10rpx;
}

.notification {
	position: relative;
	padding: 10rpx;
}

.page-content {
	height: 100vh;
	padding: 20rpx;
	box-sizing: border-box;
	width: 100%;
}

/* 卡片基础样式 */
.profile-card, .functions-card, .help-card, .account-card {
	background: var(--white);
	border-radius: 20rpx;
	margin-bottom: 20rpx;
	box-shadow: var(--shadow-md);
	overflow: hidden;
	width: 100%;
	box-sizing: border-box;
}

/* 个人信息卡片 */
.profile-card {
	background: var(--gradient-primary);
	color: var(--white);
}

.profile-content {
	padding: 40rpx;
}

.profile-header {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
}

.profile-avatar {
	position: relative;
	margin-right: 30rpx;
}

.avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	background: rgba(255, 255, 255, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(10rpx);
	border: 2rpx solid rgba(255, 255, 255, 0.3);
}

.avatar-text {
	color: var(--white);
	font-size: 48rpx;
	font-weight: 600;
}

.edit-icon {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 36rpx;
	height: 36rpx;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20rpx;
	color: #667eea;
}

.profile-info {
	flex: 1;
}

.profile-name {
	font-size: 36rpx;
	font-weight: 700;
	color: var(--white);
	margin-bottom: 8rpx;
	display: block;
}

.profile-dept {
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: 6rpx;
	display: block;
}

.profile-id {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.7);
}

.profile-arrow {
	margin-left: 20rpx;
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.7);
}

/* 数据统计网格 */
.stats-grid {
	display: flex;
	gap: 20rpx;
}

.stat-item {
	flex: 1;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 16rpx;
	padding: 24rpx;
	display: flex;
	align-items: center;
	backdrop-filter: blur(10rpx);
	border: 1rpx solid rgba(255, 255, 255, 0.2);
	transition: all 0.3s ease;
}

.stat-item:active {
	transform: scale(0.95);
	background: rgba(255, 255, 255, 0.25);
}

.stat-icon {
	width: 48rpx;
	height: 48rpx;
	border-radius: 24rpx;
	background: rgba(255, 255, 255, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 16rpx;
	font-size: 24rpx;
	color: #fff;
}

.stat-content {
	flex: 1;
}

.stat-number {
	font-size: 28rpx;
	font-weight: 700;
	color: var(--white);
	display: block;
	margin-bottom: 4rpx;
}

.stat-label {
	font-size: 22rpx;
	color: rgba(255, 255, 255, 0.8);
}

/* 未登录提示 */
.login-prompt {
	display: flex;
	align-items: center;
	padding: 40rpx;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 16rpx;
	border: 2rpx dashed rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(10rpx);
}

.login-icon {
	font-size: 80rpx;
	color: rgba(255, 255, 255, 0.8);
	margin-right: 24rpx;
}

.login-content {
	flex: 1;
	margin-right: 20rpx;
}

.login-title {
	display: block;
	font-size: 32rpx;
	font-weight: 600;
	color: var(--white);
	margin-bottom: 8rpx;
}

.login-desc {
	font-size: 26rpx;
	color: rgba(255, 255, 255, 0.8);
	line-height: 1.4;
}

.login-btn {
	display: flex;
	align-items: center;
	gap: 8rpx;
	padding: 16rpx 24rpx;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 25rpx;
	border: 1rpx solid rgba(255, 255, 255, 0.3);
	transition: all 0.3s ease;
}

.login-btn:active {
	transform: scale(0.95);
	background: rgba(255, 255, 255, 0.3);
}

.login-btn-text {
	font-size: 26rpx;
	font-weight: 600;
	color: var(--white);
}

.login-btn i {
	font-size: 20rpx;
	color: var(--white);
}

/* 卡片头部 */
.card-header {
	padding: 30rpx 30rpx 20rpx;
	border-bottom: 1rpx solid var(--border-light);
}

.card-title {
	font-size: 32rpx;
	font-weight: 600;
	color: var(--text-color);
}

/* 模块网格布局 */
.module-grid {
	display: flex;
	flex-wrap: wrap;
	padding: 20rpx;
	gap: 16rpx;
	align-items: flex-start;
}

.module-item {
	width: calc(20% - 12.8rpx);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	background: var(--gray-lighter);
	border-radius: 16rpx;
	padding: 20rpx 12rpx;
	transition: all 0.3s ease;
	position: relative;
	min-height: auto;
	height: auto;
}

.module-item:active {
	transform: scale(0.95);
	background: var(--gray);
}

.module-item.none {
	background: transparent;
	pointer-events: none;
}

.module-icon {
	width: 56rpx;
	height: 56rpx;
	border-radius: 14rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 12rpx;
	font-size: 28rpx;
	color: #fff;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
	flex-shrink: 0;
}

.module-name {
	font-size: 20rpx;
	color: var(--text-color);
	font-weight: 500;
	text-align: center;
	line-height: 1.3;
	margin-bottom: 8rpx;
	word-break: break-all;
	hyphens: auto;
}

.module-value {
	font-size: 20rpx;
	color: var(--text-secondary);
	text-align: center;
	line-height: 1.3;
	margin-bottom: 8rpx;
	word-break: break-all;
}

.module-switch {
	margin-top: 4rpx;
	flex-shrink: 0;
}

/* 开关样式 */
.switch {
	width: 48rpx;
	height: 24rpx;
	background-color: #e0e0e0;
	border-radius: 12rpx;
	position: relative;
	transition: all 0.3s ease;
}

.switch.active {
	background-color: #3498db;
}

.switch-handle {
	width: 20rpx;
	height: 20rpx;
	background-color: #fff;
	border-radius: 50%;
	position: absolute;
	top: 2rpx;
	left: 2rpx;
	transition: all 0.3s ease;
	box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.2);
}

.switch.active .switch-handle {
	transform: translateX(24rpx);
}

.search-icon, .notification-icon {
	font-size: 32rpx;
	margin-right: 10rpx;
	color: var(--white);
}

.badge {
	position: absolute;
	top: 0rpx;
	right: 15rpx;
	background-color: var(--error);
	color: var(--white);
	font-size: 20rpx;
	padding: 2rpx 8rpx;
	border-radius: 50%;
	// min-width: 30rpx;
	text-align: center;
	line-height: 1.2;
}
</style>
