From b271298fef6a1175d437fa3ba681c11092d42a7d Mon Sep 17 00:00:00 2001
From: GiveMePast <1248298477@qq.com>
Date: Sat, 28 Feb 2026 17:46:19 +0800
Subject: [PATCH] =?UTF-8?q?=E9=92=88=E5=AF=B9=E4=BA=8E=E4=B8=8D=E5=90=8C?=
 =?UTF-8?q?=E5=AE=A2=E6=88=B7=EF=BC=8C=E5=B1=95=E7=A4=BA=E5=AF=B9=E5=BA=94?=
 =?UTF-8?q?=E7=9A=84=E6=95=B0=E6=8D=AE=EF=BC=8C=E4=BB=A5=E5=8F=8A=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E9=80=9A=E8=BF=87=E5=8D=A1=E7=89=87=E7=AD=9B=E9=80=89?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ClientView.vue | 810 +++++++++++++++++++++++++--------------
 1 file changed, 531 insertions(+), 279 deletions(-)

diff --git a/src/views/ClientView.vue b/src/views/ClientView.vue
index abcb6d0..894f14f 100644
--- a/src/views/ClientView.vue
+++ b/src/views/ClientView.vue
@@ -1,293 +1,545 @@
 <template>
-    <div class="client-view-container">
-      <header class="client-header">
-        <div class="brand">
-          <div class="logo-box">
-            <el-icon><DataLine /></el-icon>
-          </div>
-          <div class="brand-text">
-            <span class="title">数据交付监控台</span>
-            <span class="version">Real-time Monitor v2.0</span>
-          </div>
+  <div class="client-view-container">
+    <header class="client-header">
+      <div class="brand">
+        <div class="logo-box">
+          <el-icon>
+            <DataLine />
+          </el-icon>
         </div>
-        <div class="user-info">
-          <el-space :size="20">
-            <div class="user-badge">
-              <el-icon><User /></el-icon>
-              <span>{{ currentUser.username }}</span>
+        <div class="brand-text">
+          <span class="title">{{ currentUser.company_name || "数据交付监控台" }}</span>
+          <span class="version">Real-time Monitor v2.0</span>
+        </div>
+      </div>
+      <div class="user-info">
+        <el-space :size="20">
+          <div class="user-badge">
+            <el-icon>
+              <User />
+            </el-icon>
+            <span>{{ currentUser.username }}</span>
+          </div>
+          <el-button type="danger" plain size="small" @click="handleLogout" :icon="SwitchButton">退出</el-button>
+        </el-space>
+      </div>
+    </header>
+
+    <section class="client-stats">
+      <el-row :gutter="20">
+        <el-col :span="6" v-for="stat in summaryStats" :key="stat.label">
+          <div class="stat-card-premium" :class="{ 'is-active': activeStatus === stat.status }"
+            :style="{ '--theme-color': stat.color }" @click="handleStatFilter(stat.status)">
+            <div class="stat-info">
+              <span class="s-label">{{ stat.label }}</span>
+              <span class="s-value">{{ stat.value }}</span>
             </div>
-            <el-button type="danger" plain size="small" @click="handleLogout" :icon="SwitchButton">退出</el-button>
-          </el-space>
-        </div>
-      </header>
-  
-      <section class="client-stats">
-        <el-row :gutter="20">
-          <el-col :span="6" v-for="stat in summaryStats" :key="stat.label">
-            <div class="stat-card-premium" :style="{ '--theme-color': stat.color }">
-              <div class="stat-info">
-                <span class="s-label">{{ stat.label }}</span>
-                <span class="s-value">{{ stat.value }}</span>
-              </div>
-              <div class="stat-icon-wrapper">
-                <el-icon><component :is="stat.icon" /></el-icon>
-              </div>
+            <div class="stat-icon-wrapper">
+              <el-icon>
+                <component :is="stat.icon" />
+              </el-icon>
             </div>
-          </el-col>
-        </el-row>
-      </section>
-  
-      <main class="data-section">
-        <div class="section-header">
-          <div class="header-left">
-            <span class="indicator"></span>
-            <span class="section-title">实时交付看板</span>
-          </div>
-          <div class="header-right">
-            <el-button type="primary" link @click="loadData" :loading="loading">
-              <el-icon><Refresh /></el-icon>&nbsp;同步最新数据
-            </el-button>
+            <div v-if="activeStatus === stat.status" class="active-dot"></div>
           </div>
+        </el-col>
+      </el-row>
+    </section>
+
+    <main class="data-section">
+      <div class="section-header">
+        <div class="header-left">
+          <span class="indicator"></span>
+          <span class="section-title">实时交付看板</span>
+          <el-tag v-if="activeStatus" closable size="small" type="info" class="filter-tag" @close="activeStatus = null">
+            当前筛选: {{ activeStatus }}
+          </el-tag>
         </div>
-  
-        <el-table :data="paginatedTickets" v-loading="loading" class="custom-client-table">
-          <el-table-column prop="id" label="单号" width="90" align="center">
-            <template #default="{row}">
-              <span class="id-tag">#{{ row.id }}</span>
-            </template>
-          </el-table-column>
-          
-          <el-table-column prop="website" label="网站地址" min-width="260">
-            <template #default="{row}">
-              <div class="project-cell">
-                <el-icon class="project-icon"><Monitor /></el-icon>
-                <span class="project-name" :title="row.website">{{ row.website }}</span>
+        <div class="header-right">
+          <el-button type="primary" link @click="loadData" :loading="loading">
+            <el-icon>
+              <Refresh />
+            </el-icon>&nbsp;同步最新数据
+          </el-button>
+        </div>
+      </div>
+
+      <el-table :data="paginatedTickets" v-loading="loading" class="custom-client-table">
+        <el-table-column prop="id" label="单号" width="90" align="center">
+          <template #default="{ row }">
+            <span class="id-tag">#{{ row.id }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="website" label="网站地址" min-width="260">
+          <template #default="{ row }">
+            <div class="project-cell">
+              <el-icon class="project-icon">
+                <Monitor />
+              </el-icon>
+              <span class="project-name" :title="row.website">{{ row.website }}</span>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="交付进度" width="260">
+          <template #default="scope">
+            <div class="progress-box">
+              <div class="progress-labels">
+                <span class="percent-val">{{ scope.row.progress || 0 }}%</span>
               </div>
-            </template>
-          </el-table-column>
-          
-          <el-table-column label="交付进度" width="260">
-            <template #default="scope">
-              <div class="progress-box">
-                <div class="progress-labels">
-                  <span class="percent-val">{{ scope.row.progress || 0 }}%</span>
-                </div>
-                <el-progress 
-                  :percentage="Number(scope.row.progress || 0)" 
-                  :status="Number(scope.row.progress) === 100 ? 'success' : ''"
-                  :stroke-width="10"
-                  :show-text="false"
-                  striped
-                  striped-flow
-                />
-              </div>
-            </template>
-          </el-table-column>
-  
-          <el-table-column prop="datanum" label="总数据量" width="160" align="center">
-            <template #default="scope">
-              <div class="data-val-box">
-                <span class="data-num">{{ formatNumber(scope.row.datanum) }}</span>
-              </div>
-            </template>
-          </el-table-column>
-  
-          <el-table-column label="交付状态" width="120" align="center">
-            <template #default="scope">
-              <div :class="['status-dot-box', getStatusClass(scope.row.is_complete)]">
-                <span class="dot"></span>
-                <span class="text">{{ scope.row.is_complete }}</span>
-              </div>
-            </template>
-          </el-table-column>
-  
-          <el-table-column label="更新日期" width="140" align="center">
-            <template #default="scope">
-              <span class="date-text">{{ formatDateOnly(scope.row.lock_time || scope.row.update_time || scope.row.create_time) }}</span>
-            </template>
-          </el-table-column>
-        </el-table>
-  
-        <footer class="pagination-footer">
-          <el-pagination
-            v-model:current-page="page"
-            v-model:page-size="limit"
-            :total="total"
-            layout="total, prev, pager, next"
-            background
-            @current-change="handlePageChange"
-          />
-        </footer>
-      </main>
-    </div>
+              <el-progress :percentage="Number(scope.row.progress || 0)"
+                :status="Number(scope.row.progress) === 100 ? 'success' : ''" :stroke-width="10" :show-text="false"
+                striped striped-flow />
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="datanum" label="总数据量" width="160" align="center">
+          <template #default="scope">
+            <div class="data-val-box">
+              <span class="data-num">{{ formatNumber(scope.row.datanum) }}</span>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="交付状态" width="120" align="center">
+          <template #default="scope">
+            <div :class="['status-dot-box', getStatusClass(scope.row.is_complete)]">
+              <span class="dot"></span>
+              <span class="text">{{ scope.row.is_complete }}</span>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="更新日期" width="140" align="center">
+          <template #default="scope">
+            <span class="date-text">{{
+              formatDateOnly(
+                scope.row.lock_time || scope.row.update_time || scope.row.create_time
+              )
+            }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <footer class="pagination-footer">
+        <el-pagination v-model:current-page="page" v-model:page-size="limit" :total="total"
+          layout="total, prev, pager, next" background @current-change="handlePageChange" />
+      </footer>
+    </main>
+  </div>
 </template>
-  
-  <script setup>
-  import { ref, computed, onMounted } from 'vue'
-  import { useRouter } from 'vue-router'
-  import { DataLine, SwitchButton, User, Refresh, Files, Timer, CircleCheck, Monitor } from '@element-plus/icons-vue'
-  import { ticketApi } from '@/api/ticket'
-  import { ElMessage } from 'element-plus'
-  
-  const router = useRouter()
-  const loading = ref(false)
-  const tickets = ref([])
-  const page = ref(1)
-  const limit = ref(15)
-  
-  const currentUser = computed(() => {
-    const info = localStorage.getItem('user_info') || sessionStorage.getItem('user_info')
-    return info ? JSON.parse(info) : { username: '外部客户' }
-  })
-  
-  const filteredTickets = computed(() => {
-    const allowed = ['未分配', '进行中', '已完成']
-    return tickets.value.filter(t => allowed.includes(t.is_complete))
-  })
-  
-  const paginatedTickets = computed(() => {
-    const start = (page.value - 1) * limit.value
-    return filteredTickets.value.slice(start, start + limit.value)
-  })
-  
-  const total = computed(() => filteredTickets.value.length)
-  
-  const summaryStats = computed(() => [
-    { label: '项目总数', value: total.value, color: '#409EFF', icon: Monitor },
-    { label: '等待排期', value: filteredTickets.value.filter(t => t.is_complete === '未分配').length, color: '#A8ABB2', icon: Files },
-    { label: '正在采集', value: filteredTickets.value.filter(t => t.is_complete === '进行中').length, color: '#E6A23C', icon: Timer },
-    { label: '已就绪', value: filteredTickets.value.filter(t => t.is_complete === '已完成').length, color: '#67C23A', icon: CircleCheck }
-  ])
-  
-  const formatNumber = (val) => {
-    if (!val || val === '0') return '0';
-    const num = Number(val);
-    return isNaN(num) ? val : num.toLocaleString();
-  }
-  
-  const getStatusClass = (status) => {
-    const map = { '未分配': 'is-waiting', '进行中': 'is-running', '已完成': 'is-success' }
-    return map[status] || ''
-  }
-  
-  const loadData = async () => {
-    loading.value = true
-    try {
-      const res = await ticketApi.getTickets({ page: 1, limit: 1000 })
-      if (res.code === 200 || res.code === true) {
-        tickets.value = res.data.data
-      }
-    } catch (e) {
-      ElMessage.error('同步失败')
-    } finally {
-      loading.value = false
+
+<script setup>
+import { ref, computed, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import {
+  DataLine,
+  SwitchButton,
+  User,
+  Refresh,
+  Files,
+  Timer,
+  CircleCheck,
+  Monitor,
+} from "@element-plus/icons-vue";
+import { ticketApi } from "@/api/ticket";
+import { ElMessage } from "element-plus";
+
+const router = useRouter();
+const loading = ref(false);
+const tickets = ref([]);
+const page = ref(1);
+const limit = ref(15);
+
+// --- 筛选状态控制 ---
+const activeStatus = ref(null); // null 代表显示全部，其余为具体状态字符串
+
+// --- 1. 用户信息 ---
+const currentUser = computed(() => {
+  const info = localStorage.getItem("user_info") || sessionStorage.getItem("user_info");
+  return info ? JSON.parse(info) : { username: "外部客户", customer_id: null };
+});
+
+// --- 2. 数据加载 ---
+const loadData = async () => {
+  loading.value = true;
+  try {
+    const customerId = currentUser.value.customer_id;
+    const res = await ticketApi.getTickets({
+      page: 1,
+      limit: 1000, // 客户侧通常数据量不大，取1000条前端分页
+      customer_id: customerId,
+    });
+
+    if (res.code === 200 || res.code === true) {
+      tickets.value = res.data.data;
     }
+  } catch (e) {
+    ElMessage.error("数据同步失败");
+  } finally {
+    loading.value = false;
   }
-  
-  const formatDateOnly = (ts) => {
-    if (!ts || ts === '0' || ts === '') return '-'
-    const date = !isNaN(ts) ? new Date(String(ts).length === 10 ? ts * 1000 : parseInt(ts)) : new Date(ts)
-    return isNaN(date.getTime()) ? '-' : `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
+};
+
+// --- 3. 核心：双重过滤逻辑 (权限过滤 + 卡片点击过滤) ---
+const filteredTickets = computed(() => {
+  const allowed = ["未分配", "进行中", "已完成"];
+  // 第一步：过滤掉“已完结”等不需展示给客户的状态
+  let result = tickets.value.filter((t) => allowed.includes(t.is_complete));
+
+  // 第二步：根据卡片点击的状态进行筛选
+  if (activeStatus.value) {
+    result = result.filter((t) => t.is_complete === activeStatus.value);
   }
-  
-  const handlePageChange = (p) => {
-    page.value = p
-    window.scrollTo({ top: 0, behavior: 'smooth' })
+
+  return result;
+});
+
+const paginatedTickets = computed(() => {
+  const start = (page.value - 1) * limit.value;
+  return filteredTickets.value.slice(start, start + limit.value);
+});
+
+const total = computed(() => filteredTickets.value.length);
+
+// --- 4. 统计卡片数据定义 ---
+const summaryStats = computed(() => {
+  // 基础权限过滤后的原始数组
+  const baseData = tickets.value.filter((t) =>
+    ["未分配", "进行中", "已完成"].includes(t.is_complete)
+  );
+
+  return [
+    {
+      label: "项目总数",
+      value: baseData.length,
+      color: "#409EFF",
+      icon: Monitor,
+      status: null,
+    },
+    {
+      label: "等待排期",
+      value: baseData.filter((t) => t.is_complete === "未分配").length,
+      color: "#A8ABB2",
+      icon: Files,
+      status: "未分配",
+    },
+    {
+      label: "正在采集",
+      value: baseData.filter((t) => t.is_complete === "进行中").length,
+      color: "#E6A23C",
+      icon: Timer,
+      status: "进行中",
+    },
+    {
+      label: "已就绪",
+      value: baseData.filter((t) => t.is_complete === "已完成").length,
+      color: "#67C23A",
+      icon: CircleCheck,
+      status: "已完成",
+    },
+  ];
+});
+
+// --- 5. 交互方法 ---
+const handleStatFilter = (status) => {
+  activeStatus.value = status;
+  page.value = 1; // 切换筛选时重置到第一页
+};
+
+const formatNumber = (val) => {
+  if (!val || val === "0") return "0";
+  const num = Number(val);
+  return isNaN(num) ? val : num.toLocaleString();
+};
+
+const getStatusClass = (status) => {
+  const map = { 未分配: "is-waiting", 进行中: "is-running", 已完成: "is-success" };
+  return map[status] || "";
+};
+
+const formatDateOnly = (ts) => {
+  if (!ts || ts === "0" || ts === "") return "-";
+  const date = !isNaN(ts)
+    ? new Date(String(ts).length === 10 ? ts * 1000 : parseInt(ts))
+    : new Date(ts);
+  return isNaN(date.getTime())
+    ? "-"
+    : `${date.getFullYear()}-${(date.getMonth() + 1)
+      .toString()
+      .padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`;
+};
+
+const handlePageChange = (p) => {
+  page.value = p;
+  window.scrollTo({ top: 0, behavior: "smooth" });
+};
+
+const handleLogout = () => {
+  localStorage.clear();
+  sessionStorage.clear();
+  router.push("/login");
+};
+
+onMounted(loadData);
+</script>
+
+<style scoped>
+.client-view-container {
+  padding: 24px 40px;
+  background-color: #f6f8fb;
+  min-height: 100vh;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+/* 头部样式 */
+.client-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.logo-box {
+  background: linear-gradient(135deg, #409eff, #007aff);
+  width: 38px;
+  height: 38px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 20px;
+  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.35);
+}
+
+.title {
+  font-size: 19px;
+  font-weight: 700;
+  color: #1d1d1f;
+}
+
+.version {
+  font-size: 10px;
+  color: #a1a1a6;
+  margin-left: 8px;
+  letter-spacing: 0.5px;
+}
+
+.user-badge {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: #fff;
+  padding: 6px 14px;
+  border-radius: 20px;
+  font-size: 13px;
+  color: #606266;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+/* 统计卡片交互样式 */
+.stat-card-premium {
+  background: #fff;
+  padding: 22px;
+  border-radius: 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
+  border-left: 4px solid var(--theme-color);
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  cursor: pointer;
+}
+
+.stat-card-premium:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
+}
+
+.stat-card-premium.is-active {
+  background: #f0f7ff;
+  border-left-width: 8px;
+  box-shadow: inset 0 0 0 1px rgba(64, 158, 255, 0.1), 0 8px 20px rgba(0, 0, 0, 0.1);
+}
+
+.active-dot {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 6px;
+  height: 6px;
+  background: var(--theme-color);
+  border-radius: 50%;
+  box-shadow: 0 0 8px var(--theme-color);
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 1;
   }
-  
-  const handleLogout = () => {
-    localStorage.clear(); sessionStorage.clear(); router.push('/login')
+
+  50% {
+    opacity: 0.3;
   }
-  
-  onMounted(loadData)
-  </script>
-  
-  <style scoped>
-  .client-view-container { 
-    padding: 24px 40px; 
-    background-color: #f6f8fb; 
-    min-height: 100vh;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+
+  100% {
+    opacity: 1;
   }
-  
-  /* 顶部导航 */
-  .client-header { 
-    display: flex; 
-    justify-content: space-between; 
-    align-items: center; 
-    margin-bottom: 24px; 
-  }
-  .brand { display: flex; align-items: center; gap: 12px; }
-  .logo-box { 
-    background: linear-gradient(135deg, #409EFF, #007aff);
-    width: 38px; height: 38px; 
-    border-radius: 8px; 
-    display: flex; align-items: center; justify-content: center; 
-    color: #fff; font-size: 20px; 
-    box-shadow: 0 4px 12px rgba(64,158,255,0.35);
-  }
-  .title { font-size: 19px; font-weight: 700; color: #1d1d1f; }
-  .version { font-size: 10px; color: #a1a1a6; margin-left: 8px; letter-spacing: 0.5px; }
-  
-  .user-badge { 
-    display: flex; align-items: center; gap: 8px; 
-    background: #fff; padding: 6px 14px; 
-    border-radius: 20px; font-size: 13px; color: #606266;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
-  }
-  
-  /* 指标卡片 */
-  .stat-card-premium {
-    background: #fff;
-    padding: 22px;
-    border-radius: 12px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    position: relative;
-    overflow: hidden;
-    box-shadow: 0 2px 12px rgba(0,0,0,0.03);
-    border-left: 4px solid var(--theme-color);
-    transition: all 0.3s ease;
-  }
-  .stat-card-premium:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
-  .s-label { font-size: 13px; color: #86868b; display: block; margin-bottom: 6px; }
-  .s-value { font-size: 28px; font-weight: 800; color: #1d1d1f; }
-  .stat-icon-wrapper { font-size: 36px; color: var(--theme-color); opacity: 0.1; }
-  
-  /* 列表容器 */
-  .data-section { 
-    background: #fff; padding: 24px; border-radius: 12px; 
-    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
-  }
-  .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
-  .header-left { display: flex; align-items: center; gap: 10px; }
-  .indicator { width: 3px; height: 16px; background: #409EFF; border-radius: 2px; }
-  .section-title { font-size: 16px; font-weight: 600; color: #303133; }
-  
-  /* 表格样式微调 */
-  .id-tag { color: #909399; font-family: 'Consolas', monospace; font-size: 12px; }
-  .project-cell { display: flex; align-items: center; gap: 8px; }
-  .project-icon { color: #c0c4cc; font-size: 16px; }
-  .project-name { font-weight: 500; color: #2c3e50; }
-  
-  .progress-labels { display: flex; justify-content: flex-end; margin-bottom: 4px; }
-  .percent-val { font-size: 11px; font-weight: 700; color: #409eff; }
-  
-  .data-val-box { display: flex; flex-direction: column; align-items: center; }
-  .data-num { font-size: 16px; font-weight: 700; color: #2c3e50; font-family: 'Helvetica Neue', sans-serif; }
-  .unit { font-size: 9px; color: #a8abb2; transform: scale(0.9); }
-  
-  /* 状态指示器 */
-  .status-dot-box { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; }
-  .dot { width: 6px; height: 6px; border-radius: 50%; }
-  .is-waiting { color: #909399; } .is-waiting .dot { background: #909399; }
-  .is-running { color: #E6A23C; } .is-running .dot { background: #E6A23C; box-shadow: 0 0 6px rgba(230,162,60,0.4); }
-  .is-success { color: #67C23A; } .is-success .dot { background: #67C23A; }
-  
-  .date-text { font-size: 12px; color: #909399; }
-  .pagination-footer { margin-top: 24px; display: flex; justify-content: center; }
-  
-  :deep(.el-table) { --el-table-header-bg-color: #f8f9fb; }
-  :deep(.el-table__row:hover) { background-color: #faffff !important; }
-  </style>
\ No newline at end of file
+}
+
+.s-label {
+  font-size: 13px;
+  color: #86868b;
+  display: block;
+  margin-bottom: 6px;
+}
+
+.s-value {
+  font-size: 28px;
+  font-weight: 800;
+  color: #1d1d1f;
+}
+
+.stat-icon-wrapper {
+  font-size: 36px;
+  color: var(--theme-color);
+  opacity: 0.1;
+}
+
+/* 列表区域 */
+.data-section {
+  background: #fff;
+  padding: 24px;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.indicator {
+  width: 3px;
+  height: 16px;
+  background: #409eff;
+  border-radius: 2px;
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.filter-tag {
+  margin-left: 10px;
+  border-radius: 4px;
+}
+
+.id-tag {
+  color: #909399;
+  font-family: "Consolas", monospace;
+  font-size: 12px;
+}
+
+.project-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.project-icon {
+  color: #c0c4cc;
+  font-size: 16px;
+}
+
+.project-name {
+  font-weight: 500;
+  color: #2c3e50;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 240px;
+}
+
+.percent-val {
+  font-size: 11px;
+  font-weight: 700;
+  color: #409eff;
+}
+
+.data-num {
+  font-size: 16px;
+  font-weight: 700;
+  color: #2c3e50;
+}
+
+.status-dot-box {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+
+.is-waiting {
+  color: #909399;
+}
+
+.is-waiting .dot {
+  background: #909399;
+}
+
+.is-running {
+  color: #e6a23c;
+}
+
+.is-running .dot {
+  background: #e6a23c;
+  box-shadow: 0 0 6px rgba(230, 162, 60, 0.4);
+}
+
+.is-success {
+  color: #67c23a;
+}
+
+.is-success .dot {
+  background: #67c23a;
+}
+
+.pagination-footer {
+  margin-top: 24px;
+  display: flex;
+  justify-content: center;
+}
+
+:deep(.el-table) {
+  --el-table-header-bg-color: #f8f9fb;
+}
+</style>