feat: UI rewrite R6 - final round (10 pages)

- fxgl: groupsClock/teamList/instructionList/receive/materialList/inventory (6)
- xjgl: constructionList/detail (2)
- map: tckzPop/ybPop redesign (2)
All 63 pages now use consistent design system

src/views/fxgl/groupsClockList.vue

@@ -1,87 +1,150 @@
 <script setup lang="ts">
 /**
- * 班组人员打卡列表
+ * 班组人员打卡列表 — 防汛值班打卡记录
  *
- * 展示防汛值班人员的打卡记录，
- * 支持按班组切换和日期筛选。
+ * 展示防汛值班人员的打卡记录，支持按班组切换和下拉刷新。
+ * DESIGN: #1E74FF NavBar, #F4F7F8 bg, white cards border-radius 10px.
  */
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
+import { showToast } from 'vant'
 
 const router = useRouter()
 
+// ── 状态 ──
 const activeTab = ref(0)
-const dateFilter = ref('')
+const loading = ref(false)
+const refreshing = ref(false)
 
-/** 打卡状态映射 */
-const statusMap: Record<string, string> = {
+// ── 映射 ──
+interface ClockRecord {
+  id: number
+  name: string
+  team: string
+  time: string
+  status: 'clocked' | 'late' | 'missing'
+  location: string
+  avatar?: string
+}
+
+const statusMap: Record<ClockRecord['status'], string> = {
   clocked: '已打卡',
   late: '迟到',
   missing: '缺卡',
 }
 
-const statusColorMap: Record<string, 'success' | 'warning' | 'danger'> = {
+const statusColorMap: Record<ClockRecord['status'], 'success' | 'warning' | 'danger'> = {
   clocked: 'success',
   late: 'warning',
   missing: 'danger',
 }
 
-/** 模拟打卡数据 */
-const mockRecords = [
+const teamTabs = ['全部', 'A组', 'B组', 'C组']
+
+// ── 数据 ──
+const records = ref<ClockRecord[]>([])
+
+const mockRecords: ClockRecord[] = [
   { id: 1, name: '张建国', team: 'A组', time: '08:25', status: 'clocked', location: '泵站1号' },
   { id: 2, name: '李明辉', team: 'A组', time: '08:32', status: 'late', location: '泵站1号' },
   { id: 3, name: '王强', team: 'B组', time: '08:15', status: 'clocked', location: '闸门3号' },
   { id: 4, name: '赵勇', team: 'B组', time: '--:--', status: 'missing', location: '闸门3号' },
   { id: 5, name: '陈志远', team: 'A组', time: '08:20', status: 'clocked', location: '河道巡查点' },
+  { id: 6, name: '周文博', team: 'C组', time: '08:10', status: 'clocked', location: '泵站2号' },
+  { id: 7, name: '刘大伟', team: 'C组', time: '08:45', status: 'late', location: '泵站2号' },
+  { id: 8, name: '孙志强', team: 'B组', time: '08:18', status: 'clocked', location: '河道巡查点' },
 ]
 
+// ── 计算属性 ──
 const filteredList = computed(() => {
-  let list = mockRecords
-  if (activeTab.value === 1) list = list.filter(r => r.team === 'A组')
-  else if (activeTab.value === 2) list = list.filter(r => r.team === 'B组')
-  return list
+  if (activeTab.value === 0) return records.value
+  const team = teamTabs[activeTab.value]
+  return records.value.filter(r => r.team === team)
 })
 
+// ── 方法 ──
+async function fetchData() {
+  loading.value = true
+  // 模拟异步请求
+  await new Promise(resolve => setTimeout(resolve, 400))
+  records.value = mockRecords
+  loading.value = false
+}
+
+async function onRefresh() {
+  refreshing.value = true
+  await new Promise(resolve => setTimeout(resolve, 600))
+  records.value = [...mockRecords].reverse()
+  refreshing.value = false
+  showToast('刷新成功')
+}
+
 function goTeamList() {
   router.push('/teamList')
 }
+
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
   <div class="page-container">
+    <!-- 导航栏 -->
     <van-nav-bar title="打卡记录" left-arrow fixed placeholder @click-left="router.back()">
       <template #right>
         <van-icon name="user-o" size="20" @click="goTeamList" />
       </template>
     </van-nav-bar>
 
-    <van-tabs v-model:active="activeTab" sticky>
-      <van-tab title="全部" />
-      <van-tab title="A组" />
-      <van-tab title="B组" />
+    <!-- 标签页 -->
+    <van-tabs v-model:active="activeTab" sticky :swipeable="false" color="var(--color-primary)">
+      <van-tab v-for="name in teamTabs" :key="name" :title="name" />
     </van-tabs>
 
-    <div class="card-list">
-      <van-empty v-if="filteredList.length === 0" description="暂无打卡记录" />
-      <van-card
-        v-for="item in filteredList"
-        :key="item.id"
-        :title="item.name"
-        :desc="`点位: ${item.location}`"
-      >
-        <template #tags>
-          <van-tag :type="statusColorMap[item.status]" size="medium">
-            {{ statusMap[item.status] }}
-          </van-tag>
-        </template>
-        <template #footer>
-          <div class="card-meta">
-            <span>打卡时间: {{ item.time }}</span>
-            <span>{{ item.team }}</span>
+    <!-- 下拉刷新 + 列表 -->
+    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="pull-refresh-wrap">
+      <!-- 加载骨架 -->
+      <div v-if="loading" class="skeleton-wrap">
+        <div v-for="i in 4" :key="i" class="skeleton-card">
+          <van-skeleton title avatar :row="1" />
+        </div>
+      </div>
+
+      <!-- 空状态 -->
+      <van-empty v-else-if="filteredList.length === 0" description="暂无打卡记录">
+        <van-button type="primary" size="small" @click="onRefresh">重新加载</van-button>
+      </van-empty>
+
+      <!-- 打卡卡片列表 -->
+      <div v-else class="card-list">
+        <div
+          v-for="item in filteredList"
+          :key="item.id"
+          class="clock-card"
+        >
+          <div class="card-hd">
+            <span class="card-name">{{ item.name }}</span>
+            <van-tag :type="statusColorMap[item.status]" size="medium">
+              {{ statusMap[item.status] }}
+            </van-tag>
           </div>
-        </template>
-      </van-card>
-    </div>
+          <div class="card-bd">
+            <div class="card-info">
+              <van-icon name="location-o" size="14" />
+              <span>{{ item.location }}</span>
+            </div>
+            <div class="card-info">
+              <van-icon name="clock-o" size="14" />
+              <span>打卡时间: {{ item.time }}</span>
+            </div>
+          </div>
+          <div class="card-ft">
+            <span class="card-team">{{ item.team }}</span>
+          </div>
+        </div>
+      </div>
+    </van-pull-refresh>
   </div>
 </template>
 
@@ -98,20 +161,78 @@ function goTeamList() {
   }
 }
 
-.card-list {
-  padding: 0 8px;
+.pull-refresh-wrap {
+  min-height: calc(100vh - 90px);
+}
 
-  :deep(.van-card) {
-    margin: 8px;
-    border-radius: 10px;
-    background: var(--color-bg-card);
+// ── 骨架屏 ──
+.skeleton-wrap {
+  padding: 8px 16px;
+}
+.skeleton-card {
+  padding: 16px;
+  margin-bottom: 8px;
+  background: var(--color-bg-card);
+  border-radius: 10px;
+}
+
+// ── 卡片列表 ──
+.card-list {
+  padding: 8px 12px;
+}
+
+.clock-card {
+  background: var(--color-bg-card);
+  border-radius: 10px;
+  padding: 16px;
+  margin-bottom: 10px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+
+  .card-hd {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+
+  .card-name {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--color-text-primary);
+  }
+
+  .card-bd {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    margin-bottom: 10px;
+  }
+
+  .card-info {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 13px;
+    color: var(--color-text-secondary);
+  }
+
+  .card-ft {
+    padding-top: 8px;
+    border-top: 1px solid var(--color-border-light);
+  }
+
+  .card-team {
+    font-size: 12px;
+    color: var(--color-text-placeholder);
+    background: var(--color-primary-bg);
+    color: var(--color-primary);
+    padding: 2px 8px;
+    border-radius: 4px;
   }
 }
 
-.card-meta {
-  display: flex;
-  gap: 12px;
-  font-size: 12px;
-  color: var(--color-text-secondary);
+// ── 空状态 ──
+:deep(.van-empty) {
+  padding: 60px 0;
 }
 </style>