MrleeAdmin/frontend/app/pages/index/index.vue

<template>
	<view class="home-page" :class="`theme-${themeMode}`">
		<view class="home-hero">
			<view>
				<text class="hero-title">扫码工作台</text>
				<text class="hero-subtitle">高效完成生产扫码与库存管理</text>
			</view>
			<view class="hero-action" @tap="openNotifications">
				<u-icon name="bell-fill" color="#1677ff" size="38" />
				<text v-if="unreadNotificationCount > 0" class="notification-badge">{{ unreadNotificationText }}</text>
			</view>
		</view>

		<view class="user-card" @tap="openProfile">
			<view class="avatar">
				<u-icon name="account-fill" color="#ffffff" size="54" />
			</view>
			<view class="user-info">
				<text class="user-account">{{ member.displayName }}</text>
				<text class="user-name">用户名：{{ member.username }}</text>
			</view>
			<view class="user-plan-pill" :class="{ disabled: !member.enabled }">{{ member.levelName }}</view>
		</view>

		<view class="menu-panel">
			<view class="workspace-header">
				<text class="workspace-title">工作区</text>
			</view>
			<view v-for="(section, sectionIndex) in sections" :key="section.title" class="menu-group" :class="`menu-group-${sectionIndex}`">
				<view class="menu-grid">
					<view v-for="item in section.items" :key="item.title" class="menu-item" hover-class="menu-item--active" @tap="handleMenuTap(item)">
						<view class="icon-wrap" :style="{ backgroundColor: item.bgColor }">
							<u-icon :name="item.icon" color="#ffffff" size="42" />
						</view>
						<text class="menu-title">{{ item.title }}</text>
						<text v-if="item.desc" class="menu-desc">{{ item.desc }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="chart-panel">
			<view class="chart-header">
				<view>
					<text class="chart-title">今日数据</text>
				<text class="chart-subtitle">扫码、异常与维修实时概览</text>
				</view>
				<view class="chart-badge">{{ dashboardUpdatedAt }}</view>
			</view>

			<view class="summary-grid">
				<view v-for="item in summaries" :key="item.label" class="summary-card" :class="[item.type, { 'has-details': item.details && item.details.length }]">
					<view class="summary-main">
						<text class="summary-value" :class="item.type">{{ item.value }}</text>
						<text class="summary-label">{{ item.label }}</text>
					</view>
					<view v-if="item.details && item.details.length" class="summary-detail-list">
						<view v-for="detail in item.details" :key="detail.key" class="summary-detail-row">
							<text class="summary-detail-name">{{ detail.name }}</text>
							<text class="summary-detail-value">{{ detail.quantity }}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="trend-card">
				<view class="chart-section-title">扫码趋势</view>
				<view class="bar-chart">
				<view v-for="item in trendData" :key="item.label" class="bar-item">
					<text class="bar-value">{{ item.value }}</text>
					<view class="bar-track">
							<view class="bar-fill" :style="{ height: item.percent + '%', backgroundColor: item.color }"></view>
						</view>
						<text class="bar-label">{{ item.label }}</text>
					</view>
				</view>
			</view>

			<view class="progress-card">
				<view class="responsibility-header">
					<view>
						<text class="chart-section-title responsibility-title">不良责任订单</text>
						<text class="responsibility-subtitle">本月总计 {{ responsibilityOrderTotal }} 次 · 最近 5 条</text>
					</view>
				</view>
				<view v-if="responsibilityOrders.length" class="reporter-list">
					<view v-for="item in responsibilityOrders" :key="item.key" class="reporter-row">
						<view>
							<text class="reporter-name">订单：{{ item.order_no }}</text>
							<text class="reporter-code">不良原因：{{ item.exception_reason || '未记录不良原因' }}</text>
						</view>
						<text class="reporter-count">{{ item.quantity }} 次</text>
					</view>
				</view>
				<text v-else class="breakdown-empty">本月暂无不良责任订单</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { getUserInfo } from '@/api/member.js'
	import { getUnreadNotificationCount } from '@/api/produce/notification.js'
	import { getTodayDashboard } from '@/api/produce/data-entry.js'

	export default {
		data() {
			return {
				member: {
					displayName: '未登录',
					username: '-',
					levelName: '请先登录',
					enabled: true
				},
				unreadNotificationCount: 0,
				responsibilityOrders: [],
				responsibilityOrderTotal: 0,
				summaries: [
					{ label: '订单扫码', value: '0', type: 'primary' },
					{ label: '整机记录', value: '0', type: 'success' },
					{ label: '异常提报', value: '0', type: 'warning' },
					{ label: '维修完成', value: '0', type: 'danger' }
				],
				trendData: [
					{ label: '--:--', value: 0, percent: 0, color: '#1677ff' }
				],
				dashboardUpdatedAt: '等待更新',
				sections: [
					{
						title: '扫码',
						items: [
							{ title: '订单模式', icon: 'order', bgColor: '#e91f3f', url: '/pages/entry/order' },
							{ title: '一单多机', icon: 'grid-fill', bgColor: '#6b70e8', url: '/pages/entry/multi-machine' },
							{ title: '整机模式', icon: 'scan', bgColor: '#1e9df2', url: '/pages/entry/machine' },
							{ title: '异常处理', icon: 'warning-fill', bgColor: '#f7b733', url: '/pages/exception/index' },
							{ title: '维修处理', icon: 'setting-fill', bgColor: '#35bfa3', url: '/pages/repair/index' }
						]
					},
					{
						title: '查询',
						items: [
							{ title: '查询', icon: 'search', bgColor: '#ef6a62', url: '/pages/query/index' },
							{ title: '统计', icon: 'grid-fill', bgColor: '#1eb2e8', url: '/pages/statistics/index' },
							{ title: '设置', icon: 'setting-fill', bgColor: '#9f86e8', url: '/pages/settings/index' }
						]
					}
				]
			}
		},
		computed: {
			unreadNotificationText() {
				return this.unreadNotificationCount > 99 ? '99+' : String(this.unreadNotificationCount)
			}
		},
			onShow() {
				this.loadMemberInfo()
				this.loadNotificationCount()
				this.loadTodayDashboard()
		},
		methods: {
			async loadMemberInfo() {
				if (!this.isLoggedIn()) {
					this.member = {
						displayName: '未登录',
						username: '-',
						levelName: '请先登录',
						enabled: true
					}
					return
				}

				try {
					const profile = await getUserInfo()
					uni.setStorageSync('scanapp_user', profile)
					this.member = {
						displayName: profile.nickname || profile.email || profile.username || '-',
						username: profile.username || profile.email || '-',
						levelName: profile.level_name || (profile.level && profile.level.name) || (Number(profile.enabled) === 0 ? '账号已停用' : '会员用户'),
						enabled: Number(profile.enabled) !== 0
					}
				} catch (error) {
					console.error('[scanapp] 获取首页会员信息失败', error)
				}
			},
			async loadNotificationCount() {
				if (!this.isLoggedIn()) {
					this.unreadNotificationCount = 0
					return
				}

				try {
					const data = await getUnreadNotificationCount()
					this.unreadNotificationCount = Number(data?.unread_count || 0)
				} catch (error) {
					this.unreadNotificationCount = 0
					console.error('[app] 获取未读通知数量失败', error)
				}
			},
			async loadTodayDashboard() {
				if (!this.isLoggedIn()) {
					this.summaries = [
						{ label: '订单扫码', value: '0', type: 'primary' },
						{ label: '整机记录', value: '0', type: 'success' },
						{ label: '异常提报', value: '0', type: 'warning' },
						{ label: '维修完成', value: '0', type: 'danger' }
					]
					this.responsibilityOrders = []
					this.responsibilityOrderTotal = 0
					this.trendData = [{ label: '--:--', value: 0, percent: 0, color: '#1677ff' }]
					this.dashboardUpdatedAt = '登录后查看'
					return
				}

				try {
					const data = await getTodayDashboard()
					const summary = data?.summary || {}
					this.summaries = [
						{ label: '订单扫码', value: String(summary.order_scan || 0), type: 'primary', details: this.createBreakdownDetails([...(data?.order_breakdown || []), ...(data?.repair_breakdown || [])]) },
						{ label: '整机记录', value: String(summary.product_scan || 0), type: 'success', details: this.createBreakdownDetails(data?.product_breakdown) },
						{ label: '异常提报', value: String(summary.exception || 0), type: 'warning' },
						{ label: '维修完成', value: String(summary.repair || 0), type: 'danger' }
					]
					this.responsibilityOrders = (Array.isArray(data?.responsibility_orders) ? data.responsibility_orders : []).map((item, index) => ({
						...item,
						key: `${item.order_no || 'unknown'}-${index}`,
						quantity: Number(item.quantity || 0)
					}))
					this.responsibilityOrderTotal = Number(data?.responsibility_order_total || 0)
					const trend = Array.isArray(data?.trend) ? data.trend : []
					const maxTrend = Math.max(1, ...trend.map((item) => Number(item.value || 0)))
					this.trendData = trend.map((item, index) => ({
						label: item.label || `时段${index + 1}`,
						value: Number(item.value || 0),
						percent: Math.round((Number(item.value || 0) / maxTrend) * 100),
						color: index % 2 === 0 ? '#1677ff' : '#35bfa3'
					}))
					this.dashboardUpdatedAt = data?.updated_at ? `更新于 ${this.formatDashboardTime(data.updated_at)}` : '刚刚更新'
				} catch (error) {
					this.dashboardUpdatedAt = '暂时无法更新'
					console.error('[app] 获取首页今日数据失败', error)
				}
			},
			formatDashboardTime(timestamp) {
				const date = new Date(Number(timestamp) * 1000)
				return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
			},
			createBreakdownDetails(items) {
				const list = Array.isArray(items) ? items : []
				const grouped = {}
				list.forEach((item) => {
					const key = `${item.process_id || 'none'}-${item.step_id || 'none'}`
					if (!grouped[key]) grouped[key] = { key, name: `${item.process_name || '未记录工序'} / ${item.step_name || '未记录步骤'}`, quantity: 0 }
					grouped[key].quantity += Number(item.quantity || 0)
				})
				return Object.values(grouped)
			},
			isLoggedIn() {
				return Boolean(uni.getStorageSync('scanapp_token'))
			},
			requireLogin(redirectUrl) {
				if (this.isLoggedIn()) {
					uni.navigateTo({
						url: redirectUrl
					})
					return
				}
				uni.showModal({
					title: '需要登录',
					content: '登录后可使用此功能',
					confirmText: '去登录',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: `/pages/auth/login?redirect=${encodeURIComponent(redirectUrl)}`
							})
						}
					}
				})
			},
			openProfile() {
				this.requireLogin('/pages/profile/index')
			},
			openNotifications() {
				this.requireLogin('/pages/notification/index')
			},
			handleMenuTap(item) {
				if (item.url) {
					uni.navigateTo({
						url: item.url
					})
					return
				}
				uni.showToast({
					title: `${item.title}功能待接入`,
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home-page {
		min-height: 100vh;
		padding: 34rpx 24rpx 48rpx;
		box-sizing: border-box;
		background: linear-gradient(180deg, #eaf4ff 0%, #f4f6fb 34%, #f4f6fb 100%);
	}

	.home-hero {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12rpx 8rpx 30rpx;
	}

	.hero-title,
	.hero-subtitle {
		display: block;
	}

	.hero-title {
		color: #17233d;
		font-size: 38rpx;
		font-weight: 800;
		line-height: 1.35;
	}

	.hero-subtitle {
		margin-top: 8rpx;
		color: #7d8798;
		font-size: 22rpx;
		line-height: 1.4;
	}

	.hero-action {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 72rpx;
		height: 72rpx;
		border-radius: 24rpx;
		background: rgba(255, 255, 255, 0.9);
		box-shadow: 0 12rpx 32rpx rgba(23, 35, 61, 0.08);
	}

	.notification-badge {
		position: absolute;
		top: -10rpx;
		right: -12rpx;
		min-width: 30rpx;
		height: 30rpx;
		padding: 0 6rpx;
		border: 3rpx solid #ffffff;
		border-radius: 999rpx;
		box-sizing: border-box;
		background: #e91f3f;
		color: #ffffff;
		font-size: 18rpx;
		font-weight: 700;
		line-height: 24rpx;
		text-align: center;
	}

	.user-card {
		position: relative;
		overflow: hidden;
		display: flex;
		align-items: center;
		padding: 36rpx 28rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.72);
		border-radius: 28rpx;
		background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
		box-shadow: 0 18rpx 44rpx rgba(23, 35, 61, 0.08);
	}

	.user-card::after {
		position: absolute;
		top: -80rpx;
		right: -70rpx;
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		background: rgba(22, 119, 255, 0.08);
		content: '';
	}

	.avatar {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 72rpx;
		height: 72rpx;
		margin-right: 24rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, #35bfa3 0%, #1677ff 100%);
		box-shadow: 0 12rpx 28rpx rgba(53, 191, 163, 0.28);
	}

	.user-info {
		display: flex;
		flex: 1;
		min-width: 0;
		flex-direction: column;
	}

	.user-account {
		color: #111111;
		font-size: 32rpx;
		font-weight: 700;
		line-height: 1.35;
	}

	.user-name {
		margin-top: 8rpx;
		color: #8b8f98;
		font-size: 22rpx;
		line-height: 1.35;
	}

	.user-plan-pill {
		flex: none;
		margin-left: 20rpx;
		padding: 6rpx 18rpx;
		border-radius: 999rpx;
		background: rgba(25, 190, 107, 0.1);
		color: #19be6b;
		font-size: 20rpx;
		font-weight: 600;
		line-height: 1.4;
	}

	.user-plan-pill.disabled {
		background: rgba(233, 31, 63, 0.1);
		color: #e91f3f;
	}

	.menu-panel {
		margin-top: 34rpx;
		overflow: hidden;
		padding: 18rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.72);
		border-radius: 28rpx;
		background: #ffffff;
		box-shadow: 0 16rpx 42rpx rgba(23, 35, 61, 0.06);
	}

	.workspace-header {
		padding: 6rpx 8rpx 20rpx;
	}

	.workspace-title {
		color: #17233d;
		font-size: 28rpx;
		font-weight: 700;
		line-height: 1.35;
	}

	.menu-group {
		overflow: hidden;
		border-radius: 24rpx;
	}

	.menu-group + .menu-group {
		margin-top: 18rpx;
	}

	.menu-group-0 {
		background: linear-gradient(135deg, rgba(22, 119, 255, 0.08) 0%, rgba(233, 31, 63, 0.05) 100%);
	}

	.menu-group-1 {
		background: linear-gradient(135deg, rgba(25, 190, 107, 0.08) 0%, rgba(159, 134, 232, 0.06) 100%);
	}

	.menu-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}

	.menu-item {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 196rpx;
		padding: 26rpx 10rpx;
		box-sizing: border-box;
		border-right: 1rpx solid #edf0f5;
		border-bottom: 1rpx solid #edf0f5;
		flex-direction: column;
	}

	.menu-item--active {
		background: #f8fbff;
	}

	.menu-item:nth-child(3n) {
		border-right: 0;
	}

	.menu-item:nth-last-child(-n + 3) {
		border-bottom: 0;
	}

	.icon-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 64rpx;
		height: 64rpx;
		margin-bottom: 28rpx;
		border-radius: 50%;
		box-shadow: 0 10rpx 24rpx rgba(23, 35, 61, 0.12);
	}

	.menu-title {
		color: #111111;
		font-size: 28rpx;
		line-height: 1.35;
		text-align: center;
	}

	.menu-desc {
		margin-top: 4rpx;
		color: #9a9fa8;
		font-size: 20rpx;
		line-height: 1.25;
		text-align: center;
	}

	.chart-panel {
		margin-top: 34rpx;
		padding: 28rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.72);
		border-radius: 28rpx;
		background: #ffffff;
		box-shadow: 0 16rpx 42rpx rgba(23, 35, 61, 0.06);
	}

	.chart-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24rpx;
	}

	.chart-title,
	.chart-subtitle {
		display: block;
	}

	.chart-title {
		color: #17233d;
		font-size: 28rpx;
		font-weight: 700;
		line-height: 1.35;
	}

	.chart-subtitle {
		margin-top: 6rpx;
		color: #8a94a6;
		font-size: 20rpx;
		line-height: 1.4;
	}

	.chart-badge {
		padding: 8rpx 18rpx;
		border-radius: 999rpx;
		background: rgba(22, 119, 255, 0.1);
		color: #1677ff;
		font-size: 20rpx;
		font-weight: 600;
	}

	.summary-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16rpx;
		margin-bottom: 22rpx;
	}

	.summary-card {
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 136rpx;
		padding: 18rpx 20rpx;
		box-sizing: border-box;
		border-radius: 22rpx;
		background: linear-gradient(145deg, #f8fbff 0%, #f3f7fd 100%);
	}

	.summary-card.has-details {
		align-items: stretch;
		justify-content: flex-start;
		min-height: 188rpx;
	}

	.summary-card::before {
		position: absolute;
		top: 20rpx;
		bottom: 20rpx;
		left: 0;
		width: 6rpx;
		border-radius: 0 6rpx 6rpx 0;
		background: #1677ff;
		content: '';
	}

	.summary-card.success::before {
		background: #19be6b;
	}

	.summary-card.warning::before {
		background: #f7a928;
	}

	.summary-card.danger::before {
		background: #e91f3f;
	}

	.summary-value {
		color: #17233d;
		font-size: 32rpx;
		font-weight: 800;
		line-height: 1.3;
	}

	.summary-main {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.summary-card.has-details .summary-main {
		flex-direction: row;
		justify-content: space-between;
	}

	.summary-value.success {
		color: #19be6b;
	}

	.summary-value.warning {
		color: #f7a928;
	}

	.summary-value.danger {
		color: #e91f3f;
	}

	.summary-label {
		margin-top: 8rpx;
		color: #8a94a6;
		font-size: 20rpx;
		line-height: 1.3;
	}

	.summary-card.has-details .summary-label {
		margin-top: 0;
		margin-left: 12rpx;
		text-align: right;
	}

	.summary-detail-list {
		width: 100%;
		margin-top: 14rpx;
		padding-top: 10rpx;
		border-top: 1rpx solid #eaf0f8;
	}

	.summary-detail-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-width: 0;
		padding: 7rpx 10rpx;
		border-radius: 10rpx;
		background: rgba(255, 255, 255, 0.72);
	}

	.summary-detail-row + .summary-detail-row {
		margin-top: 6rpx;
	}

	.summary-detail-name {
		min-width: 0;
		overflow: hidden;
		color: #5f6b7a;
		font-size: 18rpx;
		line-height: 1.3;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.summary-detail-value {
		margin-left: 8rpx;
		color: #17233d;
		font-size: 20rpx;
		font-weight: 700;
		line-height: 1.3;
		flex-shrink: 0;
	}

	.breakdown-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16rpx;
		margin-bottom: 22rpx;
	}

	.breakdown-card {
		min-width: 0;
		padding: 20rpx;
		border-radius: 22rpx;
		background: #f8fbff;
	}

	.breakdown-header,
	.breakdown-row,
	.reporter-row,
	.responsibility-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.breakdown-title,
	.breakdown-name,
	.breakdown-value,
	.breakdown-total,
	.breakdown-empty,
	.reporter-name,
	.reporter-code,
	.reporter-count,
	.exception-status-title {
		display: block;
	}

	.breakdown-title {
		color: #17233d;
		font-size: 22rpx;
		font-weight: 700;
		line-height: 1.4;
	}

	.breakdown-total {
		margin-left: 8rpx;
		color: #1677ff;
		font-size: 18rpx;
		flex-shrink: 0;
	}

	.breakdown-list {
		margin-top: 12rpx;
	}

	.breakdown-row {
		padding: 10rpx 0;
		border-bottom: 1rpx solid #eaf0f8;
	}

	.breakdown-row:last-child {
		border-bottom: 0;
	}

	.breakdown-name {
		overflow: hidden;
		color: #5f6b7a;
		font-size: 20rpx;
		line-height: 1.35;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.breakdown-value {
		margin-left: 10rpx;
		color: #17233d;
		font-size: 22rpx;
		font-weight: 700;
		flex-shrink: 0;
	}

	.breakdown-empty {
		margin-top: 16rpx;
		color: #9aa4b4;
		font-size: 20rpx;
		text-align: center;
	}

	.trend-card,
	.progress-card {
		padding: 24rpx;
		border-radius: 24rpx;
		background: #f8fbff;
	}

	.progress-card {
		margin-top: 20rpx;
	}

	.reporter-list {
		margin-bottom: 22rpx;
	}

	.reporter-row {
		padding: 12rpx 0;
		border-bottom: 1rpx solid #eaf0f8;
	}

	.reporter-row:last-child {
		border-bottom: 0;
	}

	.reporter-name {
		color: #5f6b7a;
		font-size: 22rpx;
		line-height: 1.35;
	}

	.reporter-code {
		margin-top: 4rpx;
		color: #9aa4b4;
		font-size: 18rpx;
		line-height: 1.3;
	}

	.reporter-count {
		color: #f7a928;
		font-size: 22rpx;
		font-weight: 700;
	}

	.exception-status-title {
		margin-bottom: 12rpx;
		color: #17233d;
		font-size: 22rpx;
		font-weight: 700;
	}

	.chart-section-title {
		margin-bottom: 22rpx;
		color: #17233d;
		font-size: 26rpx;
		font-weight: 700;
	}

	.responsibility-title {
		margin-bottom: 0;
	}

	.responsibility-subtitle {
		display: block;
		margin-top: 6rpx;
		margin-bottom: 22rpx;
		color: #8a94a6;
		font-size: 20rpx;
		line-height: 1.4;
	}

	.bar-chart {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		height: 210rpx;
	}

	.bar-item {
		display: flex;
		align-items: center;
		flex: 1;
		flex-direction: column;
	}

	.bar-value {
		margin-bottom: 8rpx;
		color: #5f6b7a;
		font-size: 18rpx;
		line-height: 1.2;
	}

	.bar-track {
		display: flex;
		align-items: flex-end;
		width: 28rpx;
		height: 156rpx;
		overflow: hidden;
		border-radius: 999rpx;
		background: #eaf0f8;
	}

	.bar-fill {
		width: 100%;
		border-radius: 999rpx;
	}

	.bar-label {
		margin-top: 14rpx;
		color: #8a94a6;
		font-size: 20rpx;
	}

	.progress-row + .progress-row {
		margin-top: 20rpx;
	}

	.progress-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.progress-label,
	.progress-value {
		font-size: 22rpx;
		line-height: 1.35;
	}

	.progress-label {
		color: #5f6b7a;
	}

	.progress-value {
		color: #17233d;
		font-weight: 700;
	}

	.progress-track {
		height: 14rpx;
		overflow: hidden;
		border-radius: 999rpx;
		background: #eaf0f8;
	}

	.progress-fill {
		height: 100%;
		border-radius: 999rpx;
	}
.theme-dark.home-page {
	background: linear-gradient(180deg, #111827 0%, #151923 34%, #151923 100%);
}

.theme-dark .hero-action {
	background: #222936;
	box-shadow: none;
}

.theme-dark .user-card,
.theme-dark .menu-panel,
.theme-dark .chart-panel {
	border-color: #364152;
	background: #222936;
	box-shadow: none;
}

.theme-dark .menu-group-0,
.theme-dark .menu-group-1 {
	background: #1c2431;
}

.theme-dark .menu-item {
	border-color: #364152;
}

.theme-dark .menu-item--active,
.theme-dark .summary-card,
.theme-dark .breakdown-card,
.theme-dark .trend-card,
.theme-dark .progress-card {
	background: #1c2431;
}

	.theme-dark .summary-detail-list {
		border-color: #364152;
	}

	.theme-dark .summary-detail-row {
		background: #222936;
	}

.theme-dark .user-account,
.theme-dark .menu-title,
.theme-dark .workspace-title,
.theme-dark .chart-title,
.theme-dark .chart-section-title,
.theme-dark .summary-value,
.theme-dark .progress-value {
	color: #f2f5fa;
}

	.theme-dark .hero-subtitle,
.theme-dark .user-name,
.theme-dark .menu-desc,
.theme-dark .chart-subtitle,
.theme-dark .responsibility-subtitle,
.theme-dark .summary-label,
.theme-dark .bar-label,
.theme-dark .progress-label {
		color: #aeb9ca;
	}

	.theme-dark .breakdown-title,
	.theme-dark .exception-status-title {
		color: #f2f5fa;
	}

	.theme-dark .breakdown-name,
	.theme-dark .reporter-name {
		color: #aeb9ca;
	}

	.theme-dark .breakdown-value {
		color: #f2f5fa;
	}

	.theme-dark .summary-detail-name {
		color: #aeb9ca;
	}

	.theme-dark .summary-detail-value {
		color: #f2f5fa;
	}

	.theme-dark .breakdown-row,
	.theme-dark .reporter-row {
		border-color: #364152;
	}

.theme-dark .bar-track,
.theme-dark .progress-track {
	background: #364152;
}
</style>