fix(mobile): align supervisor dashboard with figma

This commit is contained in:
2026-07-14 03:07:42 +08:00
parent f60176c196
commit d1dd8b572d
+165 -8
View File
@@ -2,8 +2,8 @@
<view class="page supervisor-page">
<view class="page-head">
<view>
<text class="page-title">主管</text>
<text class="page-subtitle">团队训练工作台</text>
<text class="page-title">主管工作台</text>
<text class="page-subtitle">住宅项目 · 今日训练与带教</text>
</view>
<button v-if="loggedIn && !accessDenied" class="ghost-button refresh-button" :disabled="loading" @click="loadPage">
{{ loading ? '刷新中' : '刷新' }}
@@ -32,7 +32,7 @@
<template v-else>
<view class="panel overview-panel">
<view class="section-head">
<text class="panel-title">团队概览</text>
<text class="panel-title">今日概览</text>
<text class="muted">实时数据</text>
</view>
<view class="metric-grid">
@@ -40,7 +40,7 @@
v-for="item in supervisorMetrics"
:key="item.key"
class="metric-item"
:class="{ primary: item.primary }"
:class="{ primary: item.primary, danger: item.key === 'lowScores' || item.key === 'alerts' }"
>
<text class="metric-value">{{ item.value }}</text>
<text class="metric-label">{{ item.title }}</text>
@@ -51,7 +51,7 @@
<view class="panel task-panel">
<view class="section-head">
<text class="panel-title">任务入口</text>
<text class="panel-title">快捷入口</text>
<text class="muted">{{ teamCount }} 人</text>
</view>
<view class="task-list">
@@ -81,7 +81,7 @@
<view class="panel alert-panel">
<view class="section-head">
<text class="panel-title">团队预警</text>
<text class="panel-title">连续低分预警</text>
<text class="muted">{{ actionableAlerts.length }} 条</text>
</view>
<view v-if="alerts.length" class="alert-list">
@@ -104,8 +104,8 @@
<view v-if="pendingPreview.length" class="panel preview-panel">
<view class="section-head">
<text class="panel-title">待复盘预览</text>
<button class="text-button" @click="openPage('/pages/supervisor/reviews/index')">查看全部</button>
<text class="panel-title">待复盘对练</text>
<button class="text-button" @click="openPage('/pages/supervisor/reviews/index')">全部 {{ pendingReviewCount }} 条 →</button>
</view>
<view class="preview-list">
<button
@@ -444,4 +444,161 @@ onShow(() => {
.compact-empty {
padding: 16px 8px 4px;
}
.supervisor-page {
padding: 22px 20px 112px;
background: #f7f7f7;
}
.page-head {
align-items: flex-start;
margin-bottom: 18px;
}
.page-head .page-title {
color: #17181c;
font-size: 30px;
letter-spacing: 0.4px;
}
.page-head .page-subtitle {
color: #8a8d93;
}
.refresh-button {
min-height: 42px;
border-radius: 12px;
background: #ffffff;
color: #666a72;
box-shadow: none;
}
.supervisor-page .panel {
border: 0;
border-radius: 20px;
background: #ffffff;
box-shadow: none;
}
.overview-panel {
padding: 0;
background: transparent !important;
}
.overview-panel .section-head {
padding: 0 2px;
}
.metric-grid {
gap: 8px;
overflow: visible;
border: 0;
background: transparent;
}
.metric-item {
min-height: 86px;
padding: 16px;
border-radius: 16px;
background: #ffffff;
box-shadow: 0 4px 14px rgba(24, 28, 36, 0.03);
}
.metric-item.primary,
.metric-item.danger {
background: #ffffff;
}
.metric-item.primary .metric-value,
.metric-item.primary .metric-label,
.metric-item.danger .metric-value,
.metric-item.danger .metric-label {
color: #e60012;
}
.metric-value {
font-size: 27px;
}
.metric-label {
margin-top: 8px;
color: #25282d;
font-size: 13px;
}
.metric-desc {
color: #8a8d93;
}
.task-panel,
.alert-panel,
.preview-panel {
padding: 18px;
}
.task-row,
.alert-row,
.preview-row {
border-color: #f0f1f3;
background: #ffffff;
}
.task-row {
min-height: 58px;
padding: 10px 0;
border-width: 0 0 1px;
border-radius: 0;
}
.task-row:last-child {
border-bottom: 0;
}
.task-title,
.alert-title,
.preview-title {
color: #25282d;
}
.task-meta,
.alert-desc,
.preview-desc {
color: #8a8d93;
}
.alert-row {
padding: 14px 12px;
border: 0;
border-radius: 14px;
background: #fff1f2;
}
.alert-row + .alert-row {
margin-top: 8px;
}
.alert-row.high .alert-title,
.alert-row.medium .alert-title,
.alert-arrow {
color: #e60012;
}
.preview-row {
padding: 14px 0;
border-width: 0 0 1px;
border-radius: 0;
}
.preview-row:last-child {
border-bottom: 0;
}
.preview-score {
color: #e60012;
font-size: 20px;
}
.text-button {
color: #e60012;
}
</style>