From 0e46591d5f262d552d884c5e8be6f1b2eb677b25 Mon Sep 17 00:00:00 2001
From: let5sne <let5sne@gmail.com>
Date: Mon, 20 Jul 2026 11:48:01 +0800
Subject: [PATCH] feat(mobile): redesign supervisor home as workbench dashboard

---
 .../src/pages/supervisor/index/index.vue      | 1065 +++++++++++------
 1 file changed, 667 insertions(+), 398 deletions(-)

diff --git a/mobile-uni/src/pages/supervisor/index/index.vue b/mobile-uni/src/pages/supervisor/index/index.vue
index 0c9ceced..a655b467 100644
--- a/mobile-uni/src/pages/supervisor/index/index.vue
+++ b/mobile-uni/src/pages/supervisor/index/index.vue
@@ -1,13 +1,25 @@
 <template>
   <view class="page supervisor-page">
     <view class="page-head">
-      <view>
+      <view class="head-left">
         <text class="page-title">主管工作台</text>
-        <text class="page-subtitle">住宅项目 · 今天 {{ todayLabel }}</text>
+        <button class="community-chip" @click="showCommunityTip">
+          <text class="community-name">{{ communityName }}</text>
+          <text class="community-caret">▾</text>
+        </button>
+        <text class="page-date">{{ todayLabel }}</text>
+      </view>
+      <view v-if="loggedIn && !accessDenied" class="head-right">
+        <view class="head-identity">
+          <view class="head-avatar">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21v-1a8 8 0 0 1 16 0v1"/></svg>
+          </view>
+          <text class="head-name">{{ supervisorName }}</text>
+        </view>
+        <button class="refresh-icon" :disabled="loading" @click="loadPage">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-2.64-6.36"/><path d="M21 3v6h-6"/></svg>
+        </button>
       </view>
-      <button v-if="loggedIn && !accessDenied" class="ghost-button refresh-button" :disabled="loading" @click="loadPage">
-        {{ loading ? '刷新中' : '刷新' }}
-      </button>
     </view>
 
     <view v-if="message && !accessDenied" class="status-message">{{ message }}</view>
@@ -30,105 +42,87 @@
     </view>
 
     <template v-else>
-      <view class="panel overview-panel">
-        <view class="section-head">
-          <text class="panel-title">今日概览</text>
-          <text class="muted">实时数据</text>
+      <view class="panel team-panel">
+        <view class="panel-head">
+          <view class="panel-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+          </view>
+          <text class="panel-title">今日团队</text>
         </view>
-        <view class="metric-grid">
-          <view
-            v-for="item in supervisorMetrics"
-            :key="item.key"
-            class="metric-item"
-            :class="{ attention: item.value > 0 && (item.primary || item.key === 'lowScores' || item.key === 'alerts') }"
-          >
-            <text class="metric-value">{{ item.value }}</text>
-            <text class="metric-label">{{ item.title }}</text>
-            <text class="metric-desc">{{ item.desc }}</text>
+        <text class="team-label">今日完训</text>
+        <view class="team-numbers">
+          <view class="team-count">
+            <text class="team-done">{{ todayDone }}</text>
+            <text class="team-total">/{{ teamTotal }}</text>
+          </view>
+          <text class="team-percent">{{ completionRate }}%</text>
+        </view>
+        <view class="progress-track">
+          <view class="progress-fill" :style="{ width: `${completionRate}%` }" />
+        </view>
+        <view class="team-stats">
+          <view class="stat-item">
+            <text class="stat-value">{{ pendingReviewCount }}</text>
+            <text class="stat-label">条待复盘</text>
+          </view>
+          <view class="stat-item">
+            <text class="stat-value">{{ pendingAssignmentCount }}</text>
+            <text class="stat-label">项待训练</text>
+          </view>
+          <view class="stat-item">
+            <text class="stat-value">{{ attentionCount }}</text>
+            <text class="stat-label">人需关注</text>
           </view>
         </view>
       </view>
 
-      <view class="panel alert-panel">
-        <view class="section-head">
-          <text class="panel-title">连续低分预警</text>
-          <text class="muted">{{ actionableAlerts.length }} 条</text>
-        </view>
-        <view v-if="actionableAlerts.length" class="alert-list">
-          <button
-            v-for="item in actionableAlerts"
-            :key="`${item.type}-${item.title}`"
-            class="alert-row"
-            :class="item.severity"
-            @click="openPage('/pages/supervisor/team/index')"
-          >
-            <view class="alert-copy">
-              <text class="alert-title">{{ item.title }}</text>
-              <text class="alert-desc">{{ item.desc }}</text>
+      <view class="panel todo-panel">
+        <view class="panel-head-row">
+          <view class="panel-head">
+            <view class="panel-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="2" width="8" height="4" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M12 11h4"/><path d="M12 16h4"/><path d="M8 11h.01"/><path d="M8 16h.01"/></svg>
             </view>
-            <text class="alert-arrow">›</text>
+            <text class="panel-title">今日待处理</text>
+          </view>
+          <button class="link-button" @click="openPage('/pages/supervisor/team/index')">
+            查看全部
+            <text class="link-arrow">›</text>
           </button>
         </view>
-        <view v-else-if="stableAlert" class="stable-strip">
-          <text class="stable-title">{{ stableAlert.title }}</text>
-          <text class="stable-desc">{{ stableAlert.desc }}</text>
+        <text class="panel-sub">按优先级处理</text>
+        <view v-if="todoItems.length" class="todo-list">
+          <view v-for="item in todoItems" :key="item.key" class="todo-row">
+            <text class="todo-badge" :class="item.priority">{{ item.badge }}</text>
+            <view class="todo-copy">
+              <text class="todo-title">{{ item.title }}</text>
+              <text class="todo-desc">{{ item.desc }}</text>
+            </view>
+            <button class="todo-action" :class="item.priority" @click="openPage(item.url)">{{ item.action }}</button>
+          </view>
         </view>
-        <view v-else class="empty compact-empty">暂无团队预警</view>
+        <view v-else class="todo-empty">今日暂无待处理事项，团队推进正常</view>
       </view>
 
-      <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')">全部 {{ pendingReviewCount }} 条 →</button>
+      <view class="panel quick-panel">
+        <view class="panel-head">
+          <view class="panel-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>
+          </view>
+          <text class="panel-title">快捷管理</text>
         </view>
-        <view class="preview-list">
-          <button
-            v-for="item in pendingPreview"
-            :key="item.id || item.sessionId || item.time"
-            class="preview-row"
-            @click="openReview(item)"
-          >
-            <view class="preview-copy">
-              <text class="preview-title">{{ item.trainee }} · {{ item.scene }}</text>
-              <text class="preview-desc">{{ item.time }} · {{ item.summary }}</text>
+        <view class="quick-grid">
+          <button v-for="cell in quickCells" :key="cell.title" class="quick-cell" @click="openPage(cell.url)">
+            <view class="quick-icon">
+              <svg v-if="cell.icon === 'users'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+              <svg v-else-if="cell.icon === 'clipboard-check'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="2" width="8" height="4" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="m9 14 2 2 4-4"/></svg>
+              <svg v-else-if="cell.icon === 'target'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1"/></svg>
+              <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M9 13h6"/><path d="M9 17h6"/></svg>
             </view>
-            <text class="preview-score">{{ item.score }}</text>
-          </button>
-        </view>
-      </view>
-
-      <view class="panel task-panel">
-        <view class="section-head">
-          <text class="panel-title">快捷入口</text>
-        </view>
-        <view class="task-list">
-          <button class="task-row" @click="openPage('/pages/supervisor/team/index')">
-            <view class="task-copy">
-              <text class="task-title">团队画像</text>
-              <text class="task-meta">{{ teamCount }} 名成员</text>
+            <view class="quick-copy">
+              <text class="quick-title">{{ cell.title }}</text>
+              <text class="quick-meta">{{ cell.meta }}</text>
             </view>
-            <text class="task-arrow">›</text>
-          </button>
-          <button class="task-row" @click="openPage('/pages/supervisor/reviews/index')">
-            <view class="task-copy">
-              <text class="task-title">待复盘</text>
-              <text class="task-meta">{{ pendingReviewCount }} 条待处理</text>
-            </view>
-            <text class="task-arrow">›</text>
-          </button>
-          <button class="task-row" @click="openPage('/pages/supervisor/assign/index')">
-            <view class="task-copy">
-              <text class="task-title">指派专项</text>
-              <text class="task-meta">{{ pendingAssignmentCount }} 项待训练</text>
-            </view>
-            <text class="task-arrow">›</text>
-          </button>
-          <button class="task-row" @click="openPage('/pages/supervisor/exams/index')">
-            <view class="task-copy">
-              <text class="task-title">岗前测试</text>
-              <text class="task-meta">组卷、派发并查看考试结果</text>
-            </view>
-            <text class="task-arrow">›</text>
+            <text class="quick-arrow">›</text>
           </button>
         </view>
       </view>
@@ -141,17 +135,20 @@
 import { computed, ref } from 'vue';
 import { onHide, onShow, onUnload } from '@dcloudio/uni-app';
 import type {
+  MobileIdentity,
   PracticeAlert,
   PracticeAssignment,
   PracticeRecord,
-  PracticeTeamMember
+  PracticeTeamMember,
+  RoleHome
 } from '@/types/api';
 import { clearAuth, isLoggedIn, rememberLoginRedirect } from '@/services/auth';
 import { resetPageScroll } from '@/services/navigation';
 import { getPracticeAlerts, getPracticeReviews, getPracticeTeamSnapshot } from '@/services/practice';
+import { getMobileHome } from '@/services/home';
+import { apiRequest } from '@/services/api';
 import SupervisorTabBar from '@/components/SupervisorTabBar.vue';
 import {
-  actionablePracticeAlerts,
   buildSupervisorMetrics,
   buildTeamProfiles,
   isSupervisorAccessDenied
@@ -168,22 +165,124 @@ const loggedIn = ref(false);
 const accessDenied = ref(false);
 const loading = ref(false);
 const message = ref('');
+const communityName = ref('住宅项目');
+const supervisorName = ref('主管');
 const requests = createPageRequestScope();
 let visibleAccountKey = '';
 
+const weekNames = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
+const now = new Date();
+const todayLabel = `${now.getMonth() + 1}月${now.getDate()}日 ${weekNames[now.getDay()]}`;
+const todayKey = `${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
+
 const supervisorMetrics = computed(() =>
   buildSupervisorMetrics(pendingReviews.value, assignments.value, alerts.value));
-const teamCount = computed(() => buildTeamProfiles(records.value, assignments.value, members.value).length);
+const teamProfiles = computed(() =>
+  buildTeamProfiles(records.value, assignments.value, members.value));
+const teamTotal = computed(() => teamProfiles.value.length);
 const pendingReviewCount = computed(() =>
   supervisorMetrics.value.find((item) => item.key === 'pendingReviews')?.value || 0);
 const pendingAssignmentCount = computed(() =>
   supervisorMetrics.value.find((item) => item.key === 'pendingAssignments')?.value || 0);
-const pendingPreview = computed(() => pendingReviews.value.slice(0, 3));
-const actionableAlerts = computed(() => actionablePracticeAlerts(alerts.value));
-const stableAlert = computed(() => alerts.value.find((item) => item.type === 'stable'));
-const weekNames = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
-const now = new Date();
-const todayLabel = `${now.getMonth() + 1}月${now.getDate()}日 ${weekNames[now.getDay()]}`;
+const todayDone = computed(() => {
+  const trained = new Set<string>();
+  records.value.forEach((item) => {
+    if (item.time.startsWith(todayKey)) trained.add(item.extPartyId || item.trainee);
+  });
+  return trained.size;
+});
+const completionRate = computed(() =>
+  teamTotal.value ? Math.min(100, Math.round((todayDone.value / teamTotal.value) * 100)) : 0);
+const attentionCount = computed(() =>
+  teamProfiles.value.filter((item) => item.risk === 'high' || item.risk === 'medium').length);
+
+interface TodoRow {
+  key: string;
+  priority: 'high' | 'medium' | 'low';
+  badge: string;
+  title: string;
+  desc: string;
+  action: string;
+  url: string;
+}
+
+const todoItems = computed<TodoRow[]>(() => {
+  const items: TodoRow[] = [];
+  const seen = new Set<string>();
+  for (const profile of teamProfiles.value) {
+    if (seen.has(profile.key)) continue;
+    if (profile.risk === 'high') {
+      items.push({
+        key: `${profile.key}-high`,
+        priority: 'high',
+        badge: '高',
+        title: `${profile.displayName} · 低分待复盘`,
+        desc: `${profile.latestScene || '对练'} · 最新${profile.latestScoreText}`,
+        action: '立即处理',
+        url: '/pages/supervisor/reviews/index'
+      });
+      seen.add(profile.key);
+    } else if (profile.pendingAssignment > 0) {
+      items.push({
+        key: `${profile.key}-assignment`,
+        priority: 'medium',
+        badge: '中',
+        title: `${profile.displayName} · ${profile.pendingAssignment} 项专项待练`,
+        desc: `${profile.latestScene || '专项训练'} · 跟进完成`,
+        action: '去指派',
+        url: '/pages/supervisor/assign/index'
+      });
+      seen.add(profile.key);
+    } else if (profile.pendingReview > 0) {
+      items.push({
+        key: `${profile.key}-review`,
+        priority: 'low',
+        badge: '低',
+        title: `${profile.displayName} · ${profile.pendingReview} 条待复盘`,
+        desc: `${profile.latestScene || '对练'} · ${profile.latestScoreText}`,
+        action: '去复盘 ›',
+        url: '/pages/supervisor/reviews/index'
+      });
+      seen.add(profile.key);
+    }
+    if (items.length >= 4) break;
+  }
+  return items;
+});
+
+interface QuickCell {
+  title: string;
+  meta: string;
+  icon: 'users' | 'clipboard-check' | 'target' | 'file-text';
+  url: string;
+}
+
+const quickCells = computed<QuickCell[]>(() => [
+  {
+    title: '团队画像',
+    meta: `${teamTotal.value} 名成员`,
+    icon: 'users',
+    url: '/pages/supervisor/team/index'
+  },
+  {
+    title: '待复盘',
+    meta: `${pendingReviewCount.value} 条待处理`,
+    icon: 'clipboard-check',
+    url: '/pages/supervisor/reviews/index'
+  },
+  {
+    title: '指派专项',
+    meta: `${pendingAssignmentCount.value} 项待训练`,
+    icon: 'target',
+    url: '/pages/supervisor/assign/index'
+  },
+  {
+    title: '岗前测试',
+    meta: '组卷与结果',
+    icon: 'file-text',
+    url: '/pages/supervisor/exams/index'
+  }
+]);
 
 const clearData = () => {
   pendingReviews.value = [];
@@ -225,10 +324,17 @@ const loadPage = async () => {
   }
   loading.value = true;
   try {
-    const [nextReviews, nextAlerts, snapshot] = await Promise.all([
+    const [nextReviews, nextAlerts, snapshot, home, identity] = await Promise.all([
       getPracticeReviews(),
       getPracticeAlerts(),
-      getPracticeTeamSnapshot()
+      getPracticeTeamSnapshot(),
+      getMobileHome('supervisor').catch((): RoleHome | null => null),
+      apiRequest<MobileIdentity>({
+        url: '/api/aihr/mobile/me',
+        method: 'GET',
+        timeout: 15000,
+        clearAuthOnUnauthorized: false
+      }).catch((): MobileIdentity | null => null)
     ]);
     if (!requests.isCurrent(request)) return;
     accessDenied.value = false;
@@ -237,6 +343,8 @@ const loadPage = async () => {
     records.value = snapshot.records;
     assignments.value = snapshot.assignments;
     members.value = snapshot.members;
+    if (home?.location) communityName.value = home.location.split('·')[0].trim() || '住宅项目';
+    if (identity?.positionName) supervisorName.value = identity.positionName;
   } catch (error) {
     if (!requests.isCurrent(request)) return;
     handleRequestError(error, '主管端数据加载失败');
@@ -254,12 +362,8 @@ const openPage = (url: string) => {
   uni.navigateTo({ url });
 };
 
-const openReview = (item: PracticeRecord) => {
-  if (!item.id) {
-    message.value = '该记录缺少复盘ID';
-    return;
-  }
-  openPage(`/pages/supervisor/review/index?id=${item.id}`);
+const showCommunityTip = () => {
+  uni.showToast({ title: '当前账号仅绑定该项目', icon: 'none' });
 };
 
 const goLogin = () => {
@@ -295,217 +399,132 @@ onUnload(invalidateRequests);
 </script>
 
 <style scoped>
-.supervisor-page {
-  padding-bottom: 112px;
-  background: linear-gradient(180deg, var(--employee-bg-soft) 0%, var(--employee-bg) 100%);
-}
-
-.page-head,
-.section-head,
-.login-panel {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.login-button {
-  min-width: 104px;
-}
-
-.refresh-button {
-  min-width: 84px;
-  padding: 0 10px;
-  font-size: 13px;
-}
-
-.block {
-  display: block;
-  margin-top: 8px;
-  font-size: 14px;
-  line-height: 1.5;
-}
-
-.metric-grid {
-  display: grid;
-  margin-top: 14px;
-  grid-template-columns: 1fr 1fr;
-  gap: 1px;
-  overflow: hidden;
-  border: 1px solid #dbe7ff;
-  border-radius: 8px;
-  background: #dbe7ff;
-}
-
-.metric-item {
-  min-height: 104px;
-  padding: 14px;
-  background: #f8fbff;
-}
-
-.metric-item.attention {
-  background: #eef4ff;
-}
-
-.metric-item.attention .metric-value {
-  color: var(--employee-primary);
-}
-
-.metric-item.attention .metric-label {
-  color: var(--employee-primary);
-}
-
-.metric-value,
-.metric-label,
-.metric-desc {
-  display: block;
-}
-
-.metric-value {
-  color: #0f172a;
-  font-size: 28px;
-  font-weight: 900;
-  line-height: 1;
-}
-
-.metric-label {
-  margin-top: 9px;
-  color: #1e293b;
-  font-size: 14px;
-  font-weight: 800;
-}
-
-.metric-desc {
-  margin-top: 5px;
-  color: #64748b;
-  font-size: 12px;
-  line-height: 1.35;
-}
-
-.task-list,
-.alert-list,
-.preview-list {
-  margin-top: 10px;
-}
-
-.task-row,
-.alert-row,
-.preview-row {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 12px 0;
-  border-radius: 0;
-  border: 1px solid #e5edf7;
-  border-radius: 14px;
-  background: #ffffff;
-  text-align: left;
-}
-
-.task-row:last-child,
-.alert-row:last-child,
-.preview-row:last-child {
-  border-bottom: 1px solid #e5edf7;
-}
-
-.task-copy,
-.alert-copy,
-.preview-copy {
-  min-width: 0;
-  flex: 1;
-}
-
-.task-title,
-.alert-title,
-.preview-title {
-  display: block;
-  color: #0f172a;
-  font-size: 15px;
-  font-weight: 800;
-}
-
-.task-meta,
-.alert-desc,
-.preview-desc {
-  display: block;
-  margin-top: 5px;
-  overflow: hidden;
-  color: #64748b;
-  font-size: 12px;
-  line-height: 1.45;
-  text-overflow: ellipsis;
-}
-
-.preview-desc {
-  white-space: nowrap;
-}
-
-.task-arrow,
-.alert-arrow {
-  flex: 0 0 auto;
-  color: #94a3b8;
-  font-size: 24px;
-  line-height: 1;
-}
-
-.alert-row.high .alert-title {
-  color: #b91c1c;
-}
-
-.alert-row.medium .alert-title {
-  color: #9a3412;
-}
-
-.text-button {
-  min-height: 32px;
-  padding: 0;
-  background: transparent;
-  color: #1d4ed8;
-  font-size: 13px;
-  font-weight: 800;
-}
-
-.preview-score {
-  min-width: 42px;
-  flex: 0 0 auto;
-  color: var(--employee-primary);
-  font-size: 22px;
-  font-weight: 900;
-  text-align: right;
-}
-
-.compact-empty {
-  padding: 16px 8px 4px;
-}
-
 .supervisor-page {
   padding: 22px 20px 112px;
   background: #f7f7f7;
 }
 
 .page-head {
+  display: flex;
   align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
   margin-bottom: 18px;
 }
 
-.page-head .page-title {
+.head-left {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.page-title {
   color: #17181c;
-  font-size: 30px;
+  font-size: 28px;
+  font-weight: 900;
   letter-spacing: 0.4px;
+  line-height: 1.25;
 }
 
-.page-head .page-subtitle {
+.community-chip {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  margin: 8px 0 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  line-height: 1.4;
+}
+
+.community-chip::after {
+  border: 0;
+}
+
+.community-name {
+  color: #3a3d44;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.community-caret {
   color: #8a8d93;
+  font-size: 12px;
 }
 
-.refresh-button {
-  min-height: 42px;
-  border-radius: 12px;
+.page-date {
+  margin-top: 2px;
+  color: #8a8d93;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.head-right {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 10px;
+  padding-top: 6px;
+}
+
+.head-identity {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+
+.head-avatar {
+  display: flex;
+  width: 36px;
+  height: 36px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #ffd6d9;
+  border-radius: 50%;
+  background: #fff0f1;
+  color: #e60012;
+}
+
+.head-avatar svg {
+  width: 19px;
+  height: 19px;
+}
+
+.head-name {
+  color: #25282d;
+  font-size: 14px;
+  font-weight: 800;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.refresh-icon {
+  display: flex;
+  width: 34px;
+  height: 34px;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
   background: #ffffff;
   color: #666a72;
-  box-shadow: none;
+  box-shadow: 0 2px 8px rgba(24, 28, 36, 0.06);
+  line-height: 1;
+}
+
+.refresh-icon::after {
+  border: 0;
+}
+
+.refresh-icon svg {
+  width: 17px;
+  height: 17px;
+}
+
+.refresh-icon[disabled] {
+  opacity: 0.5;
 }
 
 .supervisor-page .panel {
@@ -515,144 +534,394 @@ onUnload(invalidateRequests);
   box-shadow: none;
 }
 
-.overview-panel {
-  padding: 0;
-  background: transparent !important;
-}
-
-.overview-panel .section-head {
-  padding: 0 2px;
-}
-
-.metric-grid {
+.panel-head {
+  display: flex;
+  align-items: center;
   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.attention {
-  background: #ffffff;
-}
-
-.metric-item.attention .metric-value,
-.metric-item.attention .metric-label {
+.panel-icon {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  align-items: center;
+  justify-content: center;
   color: #e60012;
 }
 
-.metric-value {
-  font-size: 27px;
+.panel-icon svg {
+  width: 20px;
+  height: 20px;
 }
 
-.metric-label {
-  margin-top: 8px;
-  color: #25282d;
-  font-size: 13px;
+.panel-title {
+  color: #17181c;
+  font-size: 17px;
+  font-weight: 900;
+  line-height: 1.3;
 }
 
-.metric-desc {
+.panel-sub {
+  display: block;
+  margin-top: 4px;
   color: #8a8d93;
+  font-size: 12px;
+  line-height: 1.4;
 }
 
-.task-panel,
-.alert-panel,
-.preview-panel {
+/* 今日团队 */
+.team-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 {
+.team-label {
+  display: block;
+  margin-top: 16px;
   color: #8a8d93;
+  font-size: 13px;
+  line-height: 1.4;
 }
 
-.alert-row {
+.team-numbers {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  margin-top: 6px;
+}
+
+.team-count {
+  display: flex;
+  align-items: baseline;
+  line-height: 1;
+}
+
+.team-done {
+  color: #e60012;
+  font-size: 44px;
+  font-weight: 900;
+  line-height: 1;
+}
+
+.team-total {
+  color: #25282d;
+  font-size: 20px;
+  font-weight: 800;
+  line-height: 1;
+}
+
+.team-percent {
+  color: #e60012;
+  font-size: 30px;
+  font-weight: 900;
+  line-height: 1;
+}
+
+.progress-track {
+  overflow: hidden;
+  height: 8px;
+  margin-top: 12px;
+  border-radius: 4px;
+  background: #f0f1f3;
+}
+
+.progress-fill {
+  height: 100%;
+  border-radius: 4px;
+  background: #e60012;
+  transition: width 0.4s ease;
+}
+
+.team-stats {
+  display: grid;
+  margin-top: 16px;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.stat-value {
+  color: #e60012;
+  font-size: 24px;
+  font-weight: 900;
+  line-height: 1;
+}
+
+.stat-label {
+  color: #8a8d93;
+  font-size: 12px;
+  line-height: 1.3;
+}
+
+/* 今日待处理 */
+.todo-panel {
+  padding: 18px;
+}
+
+.panel-head-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.link-button {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: #e60012;
+  font-size: 13px;
+  font-weight: 800;
+  line-height: 1.4;
+}
+
+.link-button::after {
+  border: 0;
+}
+
+.link-arrow {
+  font-size: 16px;
+  line-height: 1;
+}
+
+.todo-list {
+  margin-top: 12px;
+}
+
+.todo-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 0;
+  border-top: 1px solid #f4f5f7;
+}
+
+.todo-row:first-child {
+  border-top: 0;
+}
+
+.todo-badge {
+  display: flex;
+  width: 24px;
+  height: 24px;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  border-radius: 7px;
+  font-size: 12px;
+  font-weight: 900;
+  line-height: 1;
+}
+
+.todo-badge.high {
+  background: #e60012;
+  color: #ffffff;
+}
+
+.todo-badge.medium {
+  background: #fef0c7;
+  color: #b45309;
+}
+
+.todo-badge.low {
+  background: #f1f5f9;
+  color: #64748b;
+}
+
+.todo-copy {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.todo-title {
+  display: -webkit-box;
+  overflow: hidden;
+  color: #25282d;
+  font-size: 14px;
+  font-weight: 800;
+  line-height: 1.4;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.todo-desc {
+  overflow: hidden;
+  color: #8a8d93;
+  font-size: 12px;
+  line-height: 1.4;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.todo-action {
+  display: flex;
+  min-height: 34px;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0 14px;
+  border-radius: 17px;
+  font-size: 13px;
+  font-weight: 800;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.todo-action::after {
+  border: 0;
+}
+
+.todo-action.high {
+  border: 0;
+  background: #e60012;
+  color: #ffffff;
+}
+
+.todo-action.medium {
+  border: 1px solid #e3e5e9;
+  background: #ffffff;
+  color: #3a3d44;
+}
+
+.todo-action.low {
+  padding: 0 2px;
+  border: 0;
+  background: transparent;
+  color: #666a72;
+}
+
+.todo-empty {
+  margin-top: 12px;
+  padding: 18px 12px;
+  border-radius: 12px;
+  background: #f8f8f9;
+  color: #8a8d93;
+  font-size: 13px;
+  line-height: 1.5;
+  text-align: center;
+}
+
+/* 快捷管理 */
+.quick-panel {
+  padding: 18px;
+}
+
+.quick-grid {
+  display: grid;
+  margin-top: 14px;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+.quick-cell {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 0;
   padding: 14px 12px;
   border: 0;
   border-radius: 14px;
-  background: #fff1f2;
+  background: #f8f8f9;
+  line-height: 1.3;
+  text-align: left;
 }
 
-.alert-row + .alert-row {
-  margin-top: 8px;
+.quick-cell::after {
+  border: 0;
 }
 
-.alert-row.high .alert-title,
-.alert-row.medium .alert-title,
-.alert-arrow {
+.quick-icon {
+  display: flex;
+  width: 22px;
+  height: 22px;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
   color: #e60012;
 }
 
-.stable-strip {
-  margin-top: 10px;
-  padding: 14px 16px;
-  border-radius: 14px;
-  background: #f0fdf4;
+.quick-icon svg {
+  width: 22px;
+  height: 22px;
 }
 
-.stable-title {
-  display: block;
-  color: #15803d;
+.quick-copy {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.quick-title {
+  color: #25282d;
   font-size: 14px;
   font-weight: 800;
+  line-height: 1.3;
 }
 
-.stable-desc {
-  display: block;
-  margin-top: 4px;
-  color: #4b5563;
-  font-size: 12px;
-  line-height: 1.45;
+.quick-meta {
+  overflow: hidden;
+  color: #8a8d93;
+  font-size: 11px;
+  line-height: 1.3;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.preview-row {
-  padding: 14px 0;
-  border-width: 0 0 1px;
-  border-radius: 0;
-}
-
-.preview-row:last-child {
-  border-bottom: 0;
-}
-
-.preview-score {
-  color: #e60012;
+.quick-arrow {
+  flex: 0 0 auto;
+  color: #c0c3c9;
   font-size: 20px;
+  line-height: 1;
 }
 
-.text-button {
-  color: #e60012;
+/* 登录与无权限 */
+.login-panel {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 18px;
+}
+
+.login-button {
+  min-width: 104px;
+}
+
+.block {
+  display: block;
+  margin-top: 8px;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.supervisor-access-panel {
+  padding: 18px;
+}
+
+.supervisor-access-copy {
+  display: block;
+  margin-top: 8px;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.supervisor-access-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 14px;
 }
 </style>