681 lines
57 KiB
HTML
681 lines
57 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN" class="light">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>数据统计 - 在线客服系统</title>
|
|
<style id="theme-vars">
|
|
:root {
|
|
/* === Brand Primary === */
|
|
--brand-primary: #2563eb;
|
|
--brand-primary-hover: #1d4ed8;
|
|
--brand-primary-active: #1e40af;
|
|
--brand-primary-light: #dbeafe;
|
|
--brand-primary-lighter: #eff6ff;
|
|
--brand-primary-dark: #1e3a8a;
|
|
/* === Neutrals === */
|
|
--neutral-0: #ffffff;
|
|
--neutral-50: #f8fafc;
|
|
--neutral-100: #f1f5f9;
|
|
--neutral-200: #e2e8f0;
|
|
--neutral-300: #cbd5e1;
|
|
--neutral-400: #94a3b8;
|
|
--neutral-500: #64748b;
|
|
--neutral-600: #475569;
|
|
--neutral-700: #334155;
|
|
--neutral-800: #1e293b;
|
|
--neutral-900: #0f172a;
|
|
--neutral-950: #020617;
|
|
/* === State Colors === */
|
|
--state-success: #16a34a;
|
|
--state-success-bg: #f0fdf4;
|
|
--state-warning: #d97706;
|
|
--state-warning-bg: #fffbeb;
|
|
--state-error: #dc2626;
|
|
--state-error-bg: #fef2f2;
|
|
--state-info: #0891b2;
|
|
--state-info-bg: #ecfeff;
|
|
/* === Typography === */
|
|
--font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
|
--font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
|
|
--font-size-xs: 12px;
|
|
--font-size-sm: 13px;
|
|
--font-size-base: 14px;
|
|
--font-size-md: 15px;
|
|
--font-size-lg: 16px;
|
|
--font-size-xl: 18px;
|
|
--font-size-2xl: 20px;
|
|
--font-size-3xl: 24px;
|
|
--font-size-4xl: 30px;
|
|
--font-weight-normal: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-semibold: 600;
|
|
--font-weight-bold: 700;
|
|
--line-height-tight: 1.25;
|
|
--line-height-normal: 1.5;
|
|
--line-height-relaxed: 1.625;
|
|
/* === Spacing === */
|
|
--space-0: 0px;
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 20px;
|
|
--space-6: 24px;
|
|
--space-8: 32px;
|
|
--space-10: 40px;
|
|
--space-12: 48px;
|
|
/* === Radius === */
|
|
--radius-sm: 4px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
--radius-full: 9999px;
|
|
/* === Shadows === */
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03);
|
|
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.04);
|
|
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.05);
|
|
--shadow-floating: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
/* === Transitions === */
|
|
--transition-fast: 150ms ease;
|
|
--transition-normal: 200ms ease;
|
|
--transition-slow: 300ms ease;
|
|
/* === Layout === */
|
|
--sidebar-width: 240px;
|
|
--sidebar-collapsed-width: 64px;
|
|
--header-height: 56px;
|
|
--panel-width: 320px;
|
|
--chat-panel-min: 300px;
|
|
--chat-panel-max: 600px;
|
|
}
|
|
.dark {
|
|
--brand-primary: #3b82f6;
|
|
--brand-primary-hover: #60a5fa;
|
|
--brand-primary-active: #2563eb;
|
|
--brand-primary-light: #1e3a5f;
|
|
--brand-primary-lighter: #172554;
|
|
--brand-primary-dark: #93c5fd;
|
|
--neutral-0: #0f172a;
|
|
--neutral-50: #1e293b;
|
|
--neutral-100: #334155;
|
|
--neutral-200: #475569;
|
|
--neutral-300: #64748b;
|
|
--neutral-400: #94a3b8;
|
|
--neutral-500: #cbd5e1;
|
|
--neutral-600: #e2e8f0;
|
|
--neutral-700: #f1f5f9;
|
|
--neutral-800: #f8fafc;
|
|
--neutral-900: #ffffff;
|
|
--neutral-950: #ffffff;
|
|
--state-success-bg: #052e16;
|
|
--state-warning-bg: #451a03;
|
|
--state-error-bg: #450a0a;
|
|
--state-info-bg: #083344;
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.35);
|
|
--shadow-floating: 0 8px 24px rgba(0, 0, 0, 0.5);
|
|
}
|
|
</style>
|
|
<style type="text/tailwindcss">
|
|
@theme inline {
|
|
--color-primary: var(--brand-primary);
|
|
--color-foreground: var(--neutral-900);
|
|
--color-muted: var(--neutral-100);
|
|
--color-muted-foreground: var(--neutral-500);
|
|
--color-card: var(--neutral-0);
|
|
--color-card-foreground: var(--neutral-800);
|
|
--color-border: var(--neutral-200);
|
|
}
|
|
@layer base {
|
|
body {
|
|
background-color: var(--neutral-50);
|
|
color: var(--neutral-800);
|
|
font-family: var(--font-family-base);
|
|
font-size: var(--font-size-base);
|
|
line-height: var(--line-height-normal);
|
|
margin: 0;
|
|
}
|
|
}
|
|
</style>
|
|
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
|
<script src="https://unpkg.com/lucide@1.7.0"></script>
|
|
<style>
|
|
[data-icon] {
|
|
display: inline-block;
|
|
width: 1em;
|
|
height: 1em;
|
|
background-color: currentColor;
|
|
mask-size: contain;
|
|
mask-repeat: no-repeat;
|
|
mask-position: center;
|
|
vertical-align: -0.125em;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Layout: Sidebar + Main -->
|
|
<div style="display:flex; min-height:100vh;">
|
|
|
|
<!-- Sidebar -->
|
|
<aside style="width:var(--sidebar-width); background-color:var(--neutral-0); border-right:1px solid var(--neutral-200); flex-shrink:0; display:flex; flex-direction:column;">
|
|
<!-- Logo -->
|
|
<div style="padding:var(--space-5) var(--space-6); border-bottom:1px solid var(--neutral-200);">
|
|
<div style="display:flex; align-items:center; gap:var(--space-3);">
|
|
<div style="width:32px; height:32px; background-color:var(--brand-primary); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center;">
|
|
<i data-lucide="headset" style="width:18px; height:18px; color:var(--neutral-0);"></i>
|
|
</div>
|
|
<span style="font-weight:var(--font-weight-semibold); font-size:var(--font-size-lg); color:var(--neutral-900); white-space:nowrap;">在线客服系统</span>
|
|
</div>
|
|
</div>
|
|
<!-- Nav -->
|
|
<nav style="flex:1; padding:var(--space-3) var(--space-3); display:flex; flex-direction:column; gap:var(--space-1);">
|
|
<a id="nav-dashboard" href="#" style="display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); color:var(--neutral-600); text-decoration:none; font-size:var(--font-size-base); transition:background-color var(--transition-fast), color var(--transition-fast);">
|
|
<i data-lucide="layout-dashboard" style="width:18px; height:18px; flex-shrink:0;"></i>
|
|
<span>工作台</span>
|
|
</a>
|
|
<a id="nav-customers" href="#" style="display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); color:var(--neutral-600); text-decoration:none; font-size:var(--font-size-base); transition:background-color var(--transition-fast), color var(--transition-fast);">
|
|
<i data-lucide="users" style="width:18px; height:18px; flex-shrink:0;"></i>
|
|
<span>客户管理</span>
|
|
</a>
|
|
<a id="nav-history" href="#" style="display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); color:var(--neutral-600); text-decoration:none; font-size:var(--font-size-base); transition:background-color var(--transition-fast), color var(--transition-fast);">
|
|
<i data-lucide="message-square" style="width:18px; height:18px; flex-shrink:0;"></i>
|
|
<span>会话记录</span>
|
|
</a>
|
|
<a id="nav-knowledge" href="#" style="display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); color:var(--neutral-600); text-decoration:none; font-size:var(--font-size-base); transition:background-color var(--transition-fast), color var(--transition-fast);">
|
|
<i data-lucide="book-open" style="width:18px; height:18px; flex-shrink:0;"></i>
|
|
<span>知识库</span>
|
|
</a>
|
|
<a id="nav-statistics" href="#" style="display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); background-color:var(--brand-primary-lighter); color:var(--brand-primary); text-decoration:none; font-size:var(--font-size-base); font-weight:var(--font-weight-medium); transition:background-color var(--transition-fast), color var(--transition-fast);">
|
|
<i data-lucide="bar-chart-3" style="width:18px; height:18px; flex-shrink:0;"></i>
|
|
<span>数据统计</span>
|
|
</a>
|
|
<a id="nav-settings" href="#" style="display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); color:var(--neutral-600); text-decoration:none; font-size:var(--font-size-base); transition:background-color var(--transition-fast), color var(--transition-fast);">
|
|
<i data-lucide="settings" style="width:18px; height:18px; flex-shrink:0;"></i>
|
|
<span>系统设置</span>
|
|
</a>
|
|
</nav>
|
|
<!-- User -->
|
|
<div style="padding:var(--space-4) var(--space-4); border-top:1px solid var(--neutral-200);">
|
|
<div style="display:flex; align-items:center; gap:var(--space-3);">
|
|
<div style="width:32px; height:32px; border-radius:var(--radius-full); background-color:var(--brand-primary-light); display:flex; align-items:center; justify-content:center; flex-shrink:0;">
|
|
<span style="font-size:var(--font-size-sm); font-weight:var(--font-weight-semibold); color:var(--brand-primary);">管</span>
|
|
</div>
|
|
<div style="min-width:0; flex:1;">
|
|
<p style="margin:0; font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); color:var(--neutral-800); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">管理员</p>
|
|
<p style="margin:0; font-size:var(--font-size-xs); color:var(--neutral-400); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">admin@company.com</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main style="flex:1; overflow-y:auto; padding:0;">
|
|
|
|
<!-- Page Header -->
|
|
<header style="background-color:var(--neutral-0); border-bottom:1px solid var(--neutral-200); padding:var(--space-5) var(--space-8);">
|
|
<div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-4);">
|
|
<div>
|
|
<h1 style="margin:0; font-size:var(--font-size-3xl); font-weight:var(--font-weight-bold); color:var(--neutral-900); text-wrap:balance; word-break:keep-all; overflow-wrap:break-word;">数据统计</h1>
|
|
<p style="margin:var(--space-1) 0 0 0; font-size:var(--font-size-sm); color:var(--neutral-400);">实时监控客服效率与服务质量</p>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:var(--space-2); flex-shrink:0;">
|
|
<!-- Time Range Selector -->
|
|
<div style="display:flex; align-items:center; gap:1px; background-color:var(--neutral-100); border-radius:var(--radius-md); padding:2px;">
|
|
<button style="padding:var(--space-1) var(--space-3); border:none; border-radius:calc(var(--radius-md) - 2px); background-color:var(--brand-primary); color:var(--neutral-0); font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); cursor:pointer; white-space:nowrap;">今日</button>
|
|
<button style="padding:var(--space-1) var(--space-3); border:none; border-radius:calc(var(--radius-md) - 2px); background-color:transparent; color:var(--neutral-500); font-size:var(--font-size-sm); cursor:pointer; white-space:nowrap;">本周</button>
|
|
<button style="padding:var(--space-1) var(--space-3); border:none; border-radius:calc(var(--radius-md) - 2px); background-color:transparent; color:var(--neutral-500); font-size:var(--font-size-sm); cursor:pointer; white-space:nowrap;">本月</button>
|
|
<button style="padding:var(--space-1) var(--space-3); border:none; border-radius:calc(var(--radius-md) - 2px); background-color:transparent; color:var(--neutral-500); font-size:var(--font-size-sm); cursor:pointer; white-space:nowrap; display:flex; align-items:center; gap:var(--space-1);">
|
|
<i data-lucide="calendar" style="width:14px; height:14px;"></i>
|
|
自定义
|
|
</button>
|
|
</div>
|
|
<!-- Export Button -->
|
|
<button style="display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4); border:1px solid var(--neutral-200); border-radius:var(--radius-md); background-color:var(--neutral-0); color:var(--neutral-600); font-size:var(--font-size-sm); cursor:pointer; white-space:nowrap;">
|
|
<i data-lucide="download" style="width:14px; height:14px;"></i>
|
|
导出报告
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Content Area -->
|
|
<div style="padding:var(--space-6) var(--space-8); display:flex; flex-direction:column; gap:var(--space-6);">
|
|
|
|
<!-- KPI Cards Row -->
|
|
<section style="display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-5);">
|
|
|
|
<!-- KPI 1: Total Sessions -->
|
|
<div style="background-color:var(--neutral-0); border-radius:var(--radius-lg); padding:var(--space-5); box-shadow:var(--shadow-sm); border:1px solid var(--neutral-200); position:relative;">
|
|
<div style="position:absolute; top:var(--space-4); right:var(--space-4); display:flex; align-items:center; gap:var(--space-1); opacity:0.75;">
|
|
<i data-lucide="trending-up" style="width:16px; height:16px; color:var(--state-success);"></i>
|
|
<span style="font-size:var(--font-size-xs); color:var(--state-success); font-weight:var(--font-weight-medium);">+12%</span>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-3);">
|
|
<div style="width:36px; height:36px; border-radius:var(--radius-md); background-color:var(--brand-primary-lighter); display:flex; align-items:center; justify-content:center;">
|
|
<i data-lucide="message-circle" style="width:18px; height:18px; color:var(--brand-primary);"></i>
|
|
</div>
|
|
<span style="font-size:var(--font-size-sm); color:var(--neutral-500); white-space:nowrap;">总会话量</span>
|
|
</div>
|
|
<p style="margin:0; font-size:var(--font-size-4xl); font-weight:var(--font-weight-bold); color:var(--neutral-900); white-space:nowrap; line-height:var(--line-height-tight);">156</p>
|
|
<p style="margin:var(--space-1) 0 0 0; font-size:var(--font-size-xs); color:var(--neutral-400);">环比昨日增长</p>
|
|
</div>
|
|
|
|
<!-- KPI 2: Avg Response Time -->
|
|
<div style="background-color:var(--neutral-0); border-radius:var(--radius-lg); padding:var(--space-5); box-shadow:var(--shadow-sm); border:1px solid var(--neutral-200); position:relative;">
|
|
<div style="position:absolute; top:var(--space-4); right:var(--space-4); display:flex; align-items:center; gap:var(--space-1); opacity:0.75;">
|
|
<i data-lucide="trending-down" style="width:16px; height:16px; color:var(--state-success);"></i>
|
|
<span style="font-size:var(--font-size-xs); color:var(--state-success); font-weight:var(--font-weight-medium);">-8%</span>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-3);">
|
|
<div style="width:36px; height:36px; border-radius:var(--radius-md); background-color:var(--state-info-bg); display:flex; align-items:center; justify-content:center;">
|
|
<i data-lucide="clock" style="width:18px; height:18px; color:var(--state-info);"></i>
|
|
</div>
|
|
<span style="font-size:var(--font-size-sm); color:var(--neutral-500); white-space:nowrap;">平均响应时长</span>
|
|
</div>
|
|
<p style="margin:0; font-size:var(--font-size-4xl); font-weight:var(--font-weight-bold); color:var(--neutral-900); white-space:nowrap; line-height:var(--line-height-tight);">32<span style="font-size:var(--font-size-lg); font-weight:var(--font-weight-normal); color:var(--neutral-400); margin-left:var(--space-1);">秒</span></p>
|
|
<p style="margin:var(--space-1) 0 0 0; font-size:var(--font-size-xs); color:var(--neutral-400);">响应越短越优</p>
|
|
</div>
|
|
|
|
<!-- KPI 3: Customer Satisfaction -->
|
|
<div style="background-color:var(--neutral-0); border-radius:var(--radius-lg); padding:var(--space-5); box-shadow:var(--shadow-sm); border:1px solid var(--neutral-200); position:relative;">
|
|
<div style="position:absolute; top:var(--space-4); right:var(--space-4); display:flex; align-items:center; gap:var(--space-1); opacity:0.75;">
|
|
<i data-lucide="trending-up" style="width:16px; height:16px; color:var(--state-success);"></i>
|
|
<span style="font-size:var(--font-size-xs); color:var(--state-success); font-weight:var(--font-weight-medium);">+2%</span>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-3);">
|
|
<div style="width:36px; height:36px; border-radius:var(--radius-md); background-color:var(--state-success-bg); display:flex; align-items:center; justify-content:center;">
|
|
<i data-lucide="thumbs-up" style="width:18px; height:18px; color:var(--state-success);"></i>
|
|
</div>
|
|
<span style="font-size:var(--font-size-sm); color:var(--neutral-500); white-space:nowrap;">客户满意度</span>
|
|
</div>
|
|
<p style="margin:0; font-size:var(--font-size-4xl); font-weight:var(--font-weight-bold); color:var(--neutral-900); white-space:nowrap; line-height:var(--line-height-tight);">96.5<span style="font-size:var(--font-size-lg); font-weight:var(--font-weight-normal); color:var(--neutral-400); margin-left:2px;">%</span></p>
|
|
<p style="margin:var(--space-1) 0 0 0; font-size:var(--font-size-xs); color:var(--neutral-400);">环比上周提升</p>
|
|
</div>
|
|
|
|
<!-- KPI 4: First Resolution Rate -->
|
|
<div style="background-color:var(--neutral-0); border-radius:var(--radius-lg); padding:var(--space-5); box-shadow:var(--shadow-sm); border:1px solid var(--neutral-200); position:relative;">
|
|
<div style="position:absolute; top:var(--space-4); right:var(--space-4); display:flex; align-items:center; gap:var(--space-1); opacity:0.75;">
|
|
<i data-lucide="trending-up" style="width:16px; height:16px; color:var(--state-success);"></i>
|
|
<span style="font-size:var(--font-size-xs); color:var(--state-success); font-weight:var(--font-weight-medium);">+5%</span>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-3);">
|
|
<div style="width:36px; height:36px; border-radius:var(--radius-md); background-color:var(--state-warning-bg); display:flex; align-items:center; justify-content:center;">
|
|
<i data-lucide="check-circle-2" style="width:18px; height:18px; color:var(--state-warning);"></i>
|
|
</div>
|
|
<span style="font-size:var(--font-size-sm); color:var(--neutral-500); white-space:nowrap;">首次解决率</span>
|
|
</div>
|
|
<p style="margin:0; font-size:var(--font-size-4xl); font-weight:var(--font-weight-bold); color:var(--neutral-900); white-space:nowrap; line-height:var(--line-height-tight);">78<span style="font-size:var(--font-size-lg); font-weight:var(--font-weight-normal); color:var(--neutral-400); margin-left:2px;">%</span></p>
|
|
<p style="margin:var(--space-1) 0 0 0; font-size:var(--font-size-xs); color:var(--neutral-400);">环比昨日提升</p>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<!-- Charts Grid (2x2) -->
|
|
<section style="display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5);">
|
|
|
|
<!-- Chart 1: Session Volume Trend (Line Chart via SVG) -->
|
|
<div style="background-color:var(--neutral-0); border-radius:var(--radius-lg); padding:var(--space-5); box-shadow:var(--shadow-sm); border:1px solid var(--neutral-200);">
|
|
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-5);">
|
|
<div>
|
|
<h3 style="margin:0; font-size:var(--font-size-md); font-weight:var(--font-weight-semibold); color:var(--neutral-900); white-space:nowrap;">会话量趋势</h3>
|
|
<p style="margin:var(--space-1) 0 0 0; font-size:var(--font-size-xs); color:var(--neutral-400);">近7天会话量变化</p>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:var(--space-4);">
|
|
<div style="display:flex; align-items:center; gap:var(--space-1);">
|
|
<span style="width:8px; height:8px; border-radius:var(--radius-full); background-color:var(--brand-primary); display:inline-block;"></span>
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-400);">本周</span>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:var(--space-1);">
|
|
<span style="width:8px; height:8px; border-radius:var(--radius-full); background-color:var(--neutral-300); display:inline-block;"></span>
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-400);">上周</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<svg viewBox="0 0 400 200" style="width:100%; height:auto;" preserveAspectRatio="xMidYMid meet">
|
|
<!-- Grid lines -->
|
|
<line x1="40" y1="20" x2="390" y2="20" stroke="var(--neutral-100)" stroke-width="1"/>
|
|
<line x1="40" y1="60" x2="390" y2="60" stroke="var(--neutral-100)" stroke-width="1"/>
|
|
<line x1="40" y1="100" x2="390" y2="100" stroke="var(--neutral-100)" stroke-width="1"/>
|
|
<line x1="40" y1="140" x2="390" y2="140" stroke="var(--neutral-100)" stroke-width="1"/>
|
|
<line x1="40" y1="180" x2="390" y2="180" stroke="var(--neutral-200)" stroke-width="1"/>
|
|
<!-- Y axis labels -->
|
|
<text x="30" y="24" text-anchor="end" style="font-size:10px; fill:var(--neutral-400);">180</text>
|
|
<text x="30" y="64" text-anchor="end" style="font-size:10px; fill:var(--neutral-400);">140</text>
|
|
<text x="30" y="104" text-anchor="end" style="font-size:10px; fill:var(--neutral-400);">100</text>
|
|
<text x="30" y="144" text-anchor="end" style="font-size:10px; fill:var(--neutral-400);">60</text>
|
|
<text x="30" y="184" text-anchor="end" style="font-size:10px; fill:var(--neutral-400);">0</text>
|
|
<!-- X axis labels -->
|
|
<text x="65" y="198" text-anchor="middle" style="font-size:10px; fill:var(--neutral-400);">周一</text>
|
|
<text x="122" y="198" text-anchor="middle" style="font-size:10px; fill:var(--neutral-400);">周二</text>
|
|
<text x="179" y="198" text-anchor="middle" style="font-size:10px; fill:var(--neutral-400);">周三</text>
|
|
<text x="236" y="198" text-anchor="middle" style="font-size:10px; fill:var(--neutral-400);">周四</text>
|
|
<text x="293" y="198" text-anchor="middle" style="font-size:10px; fill:var(--neutral-400);">周五</text>
|
|
<text x="350" y="198" text-anchor="middle" style="font-size:10px; fill:var(--neutral-400);">周六</text>
|
|
<text x="385" y="198" text-anchor="middle" style="font-size:10px; fill:var(--neutral-400);">周日</text>
|
|
<!-- Last week line (gray) -->
|
|
<polyline fill="none" stroke="var(--neutral-300)" stroke-width="2" stroke-dasharray="4 3"
|
|
points="65,120 122,105 179,115 236,95 293,100 350,130 385,125"/>
|
|
<!-- This week area fill -->
|
|
<polygon fill="var(--brand-primary)" opacity="0.08"
|
|
points="65,130 122,100 179,85 236,70 293,60 350,90 385,80 385,180 65,180"/>
|
|
<!-- This week line -->
|
|
<polyline fill="none" stroke="var(--brand-primary)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
|
|
points="65,130 122,100 179,85 236,70 293,60 350,90 385,80"/>
|
|
<!-- Data dots -->
|
|
<circle cx="65" cy="130" r="3" fill="var(--brand-primary)"/>
|
|
<circle cx="122" cy="100" r="3" fill="var(--brand-primary)"/>
|
|
<circle cx="179" cy="85" r="3" fill="var(--brand-primary)"/>
|
|
<circle cx="236" cy="70" r="3" fill="var(--brand-primary)"/>
|
|
<circle cx="293" cy="60" r="4" fill="var(--brand-primary)" stroke="var(--neutral-0)" stroke-width="2"/>
|
|
<circle cx="350" cy="90" r="3" fill="var(--brand-primary)"/>
|
|
<circle cx="385" cy="80" r="3" fill="var(--brand-primary)"/>
|
|
<!-- Peak label -->
|
|
<text x="293" y="52" text-anchor="middle" style="font-size:10px; font-weight:600; fill:var(--brand-primary);">156</text>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- Chart 2: Response Time Distribution (Bar Chart via CSS) -->
|
|
<div style="background-color:var(--neutral-0); border-radius:var(--radius-lg); padding:var(--space-5); box-shadow:var(--shadow-sm); border:1px solid var(--neutral-200);">
|
|
<div style="margin-bottom:var(--space-5);">
|
|
<h3 style="margin:0; font-size:var(--font-size-md); font-weight:var(--font-weight-semibold); color:var(--neutral-900); white-space:nowrap;">响应时长分布</h3>
|
|
<p style="margin:var(--space-1) 0 0 0; font-size:var(--font-size-xs); color:var(--neutral-400);">各时段响应时间统计</p>
|
|
</div>
|
|
<div style="display:flex; align-items:flex-end; gap:var(--space-3); height:160px; padding-bottom:var(--space-6); position:relative;">
|
|
<!-- Y axis labels -->
|
|
<div style="position:absolute; left:0; top:0; bottom:28px; display:flex; flex-direction:column; justify-content:space-between; width:30px;">
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-400); white-space:nowrap;">40%</span>
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-400); white-space:nowrap;">30%</span>
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-400); white-space:nowrap;">20%</span>
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-400); white-space:nowrap;">10%</span>
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-400); white-space:nowrap;">0</span>
|
|
</div>
|
|
<!-- Bars -->
|
|
<div style="margin-left:36px; flex:1; display:flex; align-items:flex-end; gap:var(--space-4); height:132px;">
|
|
<div style="flex:1; display:flex; flex-direction:column; align-items:center; gap:var(--space-1);">
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-500); white-space:nowrap;">35%</span>
|
|
<div style="width:100%; height:70%; background:var(--brand-primary); border-radius:var(--radius-sm) var(--radius-sm) 0 0; min-height:4px;"></div>
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-400); white-space:nowrap;"><10s</span>
|
|
</div>
|
|
<div style="flex:1; display:flex; flex-direction:column; align-items:center; gap:var(--space-1);">
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-500); white-space:nowrap;">28%</span>
|
|
<div style="width:100%; height:56%; background:var(--brand-primary); border-radius:var(--radius-sm) var(--radius-sm) 0 0; min-height:4px; opacity:0.85;"></div>
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-400); white-space:nowrap;">10-20s</span>
|
|
</div>
|
|
<div style="flex:1; display:flex; flex-direction:column; align-items:center; gap:var(--space-1);">
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-500); white-space:nowrap;">20%</span>
|
|
<div style="width:100%; height:40%; background:var(--brand-primary); border-radius:var(--radius-sm) var(--radius-sm) 0 0; min-height:4px; opacity:0.7;"></div>
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-400); white-space:nowrap;">20-30s</span>
|
|
</div>
|
|
<div style="flex:1; display:flex; flex-direction:column; align-items:center; gap:var(--space-1);">
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-500); white-space:nowrap;">12%</span>
|
|
<div style="width:100%; height:24%; background:var(--brand-primary); border-radius:var(--radius-sm) var(--radius-sm) 0 0; min-height:4px; opacity:0.55;"></div>
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-400); white-space:nowrap;">30-60s</span>
|
|
</div>
|
|
<div style="flex:1; display:flex; flex-direction:column; align-items:center; gap:var(--space-1);">
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-500); white-space:nowrap;">5%</span>
|
|
<div style="width:100%; height:10%; background:var(--state-error); border-radius:var(--radius-sm) var(--radius-sm) 0 0; min-height:4px; opacity:0.7;"></div>
|
|
<span style="font-size:var(--font-size-xs); color:var(--neutral-400); white-space:nowrap;">>60s</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chart 3: Channel Source Distribution (Donut Chart via CSS) -->
|
|
<div style="background-color:var(--neutral-0); border-radius:var(--radius-lg); padding:var(--space-5); box-shadow:var(--shadow-sm); border:1px solid var(--neutral-200);">
|
|
<div style="margin-bottom:var(--space-5);">
|
|
<h3 style="margin:0; font-size:var(--font-size-md); font-weight:var(--font-weight-semibold); color:var(--neutral-900); white-space:nowrap;">渠道来源占比</h3>
|
|
<p style="margin:var(--space-1) 0 0 0; font-size:var(--font-size-xs); color:var(--neutral-400);">各渠道会话量分布</p>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:var(--space-8);">
|
|
<!-- SVG Donut Chart -->
|
|
<svg viewBox="0 0 160 160" style="width:140px; height:140px; flex-shrink:0;">
|
|
<!-- Background circle -->
|
|
<circle cx="80" cy="80" r="60" fill="none" stroke="var(--neutral-100)" stroke-width="20"/>
|
|
<!-- Web: 42% = 151.2deg, offset 0 -->
|
|
<circle cx="80" cy="80" r="60" fill="none" stroke="var(--brand-primary)" stroke-width="20"
|
|
stroke-dasharray="158.34 376.99" stroke-dashoffset="0"
|
|
transform="rotate(-90 80 80)"/>
|
|
<!-- App: 28% = 100.8deg -->
|
|
<circle cx="80" cy="80" r="60" fill="none" stroke="var(--state-info)" stroke-width="20"
|
|
stroke-dasharray="105.56 376.99" stroke-dashoffset="-158.34"
|
|
transform="rotate(-90 80 80)"/>
|
|
<!-- WeChat: 18% = 64.8deg -->
|
|
<circle cx="80" cy="80" r="60" fill="none" stroke="var(--state-success)" stroke-width="20"
|
|
stroke-dasharray="67.86 376.99" stroke-dashoffset="-263.90"
|
|
transform="rotate(-90 80 80)"/>
|
|
<!-- Phone: 12% = 43.2deg -->
|
|
<circle cx="80" cy="80" r="60" fill="none" stroke="var(--state-warning)" stroke-width="20"
|
|
stroke-dasharray="45.24 376.99" stroke-dashoffset="-331.76"
|
|
transform="rotate(-90 80 80)"/>
|
|
<!-- Center text -->
|
|
<text x="80" y="76" text-anchor="middle" style="font-size:22px; font-weight:700; fill:var(--neutral-900);">156</text>
|
|
<text x="80" y="94" text-anchor="middle" style="font-size:10px; fill:var(--neutral-400);">总会话</text>
|
|
</svg>
|
|
<!-- Legend -->
|
|
<div style="display:flex; flex-direction:column; gap:var(--space-3); min-width:0; flex:1;">
|
|
<div style="display:flex; align-items:center; gap:var(--space-3);">
|
|
<span style="width:10px; height:10px; border-radius:2px; background-color:var(--brand-primary); flex-shrink:0; display:inline-block;"></span>
|
|
<span style="font-size:var(--font-size-sm); color:var(--neutral-600); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">网页端</span>
|
|
<span style="font-size:var(--font-size-sm); color:var(--neutral-900); font-weight:var(--font-weight-medium); white-space:nowrap;">42%</span>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:var(--space-3);">
|
|
<span style="width:10px; height:10px; border-radius:2px; background-color:var(--state-info); flex-shrink:0; display:inline-block;"></span>
|
|
<span style="font-size:var(--font-size-sm); color:var(--neutral-600); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">APP端</span>
|
|
<span style="font-size:var(--font-size-sm); color:var(--neutral-900); font-weight:var(--font-weight-medium); white-space:nowrap;">28%</span>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:var(--space-3);">
|
|
<span style="width:10px; height:10px; border-radius:2px; background-color:var(--state-success); flex-shrink:0; display:inline-block;"></span>
|
|
<span style="font-size:var(--font-size-sm); color:var(--neutral-600); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">微信公众号</span>
|
|
<span style="font-size:var(--font-size-sm); color:var(--neutral-900); font-weight:var(--font-weight-medium); white-space:nowrap;">18%</span>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:var(--space-3);">
|
|
<span style="width:10px; height:10px; border-radius:2px; background-color:var(--state-warning); flex-shrink:0; display:inline-block;"></span>
|
|
<span style="font-size:var(--font-size-sm); color:var(--neutral-600); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">电话接入</span>
|
|
<span style="font-size:var(--font-size-sm); color:var(--neutral-900); font-weight:var(--font-weight-medium); white-space:nowrap;">12%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chart 4: Agent Performance Ranking (Horizontal Bar Chart via CSS) -->
|
|
<div style="background-color:var(--neutral-0); border-radius:var(--radius-lg); padding:var(--space-5); box-shadow:var(--shadow-sm); border:1px solid var(--neutral-200);">
|
|
<div style="margin-bottom:var(--space-5);">
|
|
<h3 style="margin:0; font-size:var(--font-size-md); font-weight:var(--font-weight-semibold); color:var(--neutral-900); white-space:nowrap;">客服绩效排行</h3>
|
|
<p style="margin:var(--space-1) 0 0 0; font-size:var(--font-size-xs); color:var(--neutral-400);">今日处理量排名</p>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; gap:var(--space-3);">
|
|
<!-- Agent 1 -->
|
|
<div style="display:flex; align-items:center; gap:var(--space-3);">
|
|
<span style="width:20px; font-size:var(--font-size-xs); font-weight:var(--font-weight-bold); color:var(--brand-primary); text-align:center; flex-shrink:0;">1</span>
|
|
<span style="width:56px; font-size:var(--font-size-sm); color:var(--neutral-700); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex-shrink:0;">张小明</span>
|
|
<div style="flex:1; height:20px; background-color:var(--neutral-100); border-radius:var(--radius-sm); overflow:hidden;">
|
|
<div style="width:92%; height:100%; background:var(--brand-primary); border-radius:var(--radius-sm);"></div>
|
|
</div>
|
|
<span style="width:28px; font-size:var(--font-size-xs); font-weight:var(--font-weight-medium); color:var(--neutral-700); text-align:right; flex-shrink:0;">38</span>
|
|
</div>
|
|
<!-- Agent 2 -->
|
|
<div style="display:flex; align-items:center; gap:var(--space-3);">
|
|
<span style="width:20px; font-size:var(--font-size-xs); font-weight:var(--font-weight-bold); color:var(--brand-primary); text-align:center; flex-shrink:0;">2</span>
|
|
<span style="width:56px; font-size:var(--font-size-sm); color:var(--neutral-700); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex-shrink:0;">李婷婷</span>
|
|
<div style="flex:1; height:20px; background-color:var(--neutral-100); border-radius:var(--radius-sm); overflow:hidden;">
|
|
<div style="width:78%; height:100%; background:var(--brand-primary); border-radius:var(--radius-sm); opacity:0.85;"></div>
|
|
</div>
|
|
<span style="width:28px; font-size:var(--font-size-xs); font-weight:var(--font-weight-medium); color:var(--neutral-700); text-align:right; flex-shrink:0;">32</span>
|
|
</div>
|
|
<!-- Agent 3 -->
|
|
<div style="display:flex; align-items:center; gap:var(--space-3);">
|
|
<span style="width:20px; font-size:var(--font-size-xs); font-weight:var(--font-weight-bold); color:var(--brand-primary); text-align:center; flex-shrink:0;">3</span>
|
|
<span style="width:56px; font-size:var(--font-size-sm); color:var(--neutral-700); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex-shrink:0;">王大伟</span>
|
|
<div style="flex:1; height:20px; background-color:var(--neutral-100); border-radius:var(--radius-sm); overflow:hidden;">
|
|
<div style="width:66%; height:100%; background:var(--brand-primary); border-radius:var(--radius-sm); opacity:0.7;"></div>
|
|
</div>
|
|
<span style="width:28px; font-size:var(--font-size-xs); font-weight:var(--font-weight-medium); color:var(--neutral-700); text-align:right; flex-shrink:0;">27</span>
|
|
</div>
|
|
<!-- Agent 4 -->
|
|
<div style="display:flex; align-items:center; gap:var(--space-3);">
|
|
<span style="width:20px; font-size:var(--font-size-xs); font-weight:var(--font-weight-bold); color:var(--neutral-400); text-align:center; flex-shrink:0;">4</span>
|
|
<span style="width:56px; font-size:var(--font-size-sm); color:var(--neutral-700); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex-shrink:0;">赵思雨</span>
|
|
<div style="flex:1; height:20px; background-color:var(--neutral-100); border-radius:var(--radius-sm); overflow:hidden;">
|
|
<div style="width:55%; height:100%; background:var(--brand-primary); border-radius:var(--radius-sm); opacity:0.55;"></div>
|
|
</div>
|
|
<span style="width:28px; font-size:var(--font-size-xs); font-weight:var(--font-weight-medium); color:var(--neutral-700); text-align:right; flex-shrink:0;">22</span>
|
|
</div>
|
|
<!-- Agent 5 -->
|
|
<div style="display:flex; align-items:center; gap:var(--space-3);">
|
|
<span style="width:20px; font-size:var(--font-size-xs); font-weight:var(--font-weight-bold); color:var(--neutral-400); text-align:center; flex-shrink:0;">5</span>
|
|
<span style="width:56px; font-size:var(--font-size-sm); color:var(--neutral-700); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex-shrink:0;">刘晓峰</span>
|
|
<div style="flex:1; height:20px; background-color:var(--neutral-100); border-radius:var(--radius-sm); overflow:hidden;">
|
|
<div style="width:47%; height:100%; background:var(--brand-primary); border-radius:var(--radius-sm); opacity:0.4;"></div>
|
|
</div>
|
|
<span style="width:28px; font-size:var(--font-size-xs); font-weight:var(--font-weight-medium); color:var(--neutral-700); text-align:right; flex-shrink:0;">19</span>
|
|
</div>
|
|
<!-- Agent 6 -->
|
|
<div style="display:flex; align-items:center; gap:var(--space-3);">
|
|
<span style="width:20px; font-size:var(--font-size-xs); font-weight:var(--font-weight-bold); color:var(--neutral-400); text-align:center; flex-shrink:0;">6</span>
|
|
<span style="width:56px; font-size:var(--font-size-sm); color:var(--neutral-700); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex-shrink:0;">陈嘉琪</span>
|
|
<div style="flex:1; height:20px; background-color:var(--neutral-100); border-radius:var(--radius-sm); overflow:hidden;">
|
|
<div style="width:36%; height:100%; background:var(--brand-primary); border-radius:var(--radius-sm); opacity:0.3;"></div>
|
|
</div>
|
|
<span style="width:28px; font-size:var(--font-size-xs); font-weight:var(--font-weight-medium); color:var(--neutral-700); text-align:right; flex-shrink:0;">18</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<!-- Agent Efficiency Detail Table -->
|
|
<section style="background-color:var(--neutral-0); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); border:1px solid var(--neutral-200); overflow:hidden;">
|
|
<div style="padding:var(--space-5) var(--space-5) 0 var(--space-5); display:flex; align-items:center; justify-content:space-between;">
|
|
<div>
|
|
<h3 style="margin:0; font-size:var(--font-size-md); font-weight:var(--font-weight-semibold); color:var(--neutral-900); white-space:nowrap;">客服效率明细</h3>
|
|
<p style="margin:var(--space-1) 0 0 0; font-size:var(--font-size-xs); color:var(--neutral-400);">今日各客服详细数据</p>
|
|
</div>
|
|
</div>
|
|
<div style="overflow-x:auto; padding:var(--space-4) 0 var(--space-5) var(--space-5);">
|
|
<table style="width:100%; border-collapse:collapse; min-width:640px;">
|
|
<thead>
|
|
<tr>
|
|
<th style="text-align:left; padding:var(--space-2) var(--space-4); font-size:var(--font-size-xs); font-weight:var(--font-weight-medium); color:var(--neutral-400); border-bottom:1px solid var(--neutral-200); white-space:nowrap; width:60px;">排名</th>
|
|
<th style="text-align:left; padding:var(--space-2) var(--space-4); font-size:var(--font-size-xs); font-weight:var(--font-weight-medium); color:var(--neutral-400); border-bottom:1px solid var(--neutral-200); white-space:nowrap;">客服名称</th>
|
|
<th style="text-align:right; padding:var(--space-2) var(--space-4); font-size:var(--font-size-xs); font-weight:var(--font-weight-medium); color:var(--neutral-400); border-bottom:1px solid var(--neutral-200); white-space:nowrap;">处理量</th>
|
|
<th style="text-align:right; padding:var(--space-2) var(--space-4); font-size:var(--font-size-xs); font-weight:var(--font-weight-medium); color:var(--neutral-400); border-bottom:1px solid var(--neutral-200); white-space:nowrap;">平均响应时长</th>
|
|
<th style="text-align:right; padding:var(--space-2) var(--space-4); font-size:var(--font-size-xs); font-weight:var(--font-weight-medium); color:var(--neutral-400); border-bottom:1px solid var(--neutral-200); white-space:nowrap;">满意度</th>
|
|
<th style="text-align:right; padding:var(--space-2) var(--space-4); font-size:var(--font-size-xs); font-weight:var(--font-weight-medium); color:var(--neutral-400); border-bottom:1px solid var(--neutral-200); white-space:nowrap;">在线时长</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td style="padding:var(--space-3) var(--space-4); font-size:var(--font-size-sm); color:var(--neutral-700); border-bottom:1px solid var(--neutral-100); white-space:nowrap;">
|
|
<span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:var(--radius-full); background-color:var(--brand-primary-light); color:var(--brand-primary); font-size:var(--font-size-xs); font-weight:var(--font-weight-bold);">1</span>
|
|
</td>
|
|
<td style="padding:var(--space-3) var(--space-4); white-space:nowrap; border-bottom:1px solid var(--neutral-100);">
|
|
<div style="display:flex; align-items:center; gap:var(--space-2);">
|
|
<div style="width:28px; height:28px; border-radius:var(--radius-full); background-color:var(--brand-primary-light); display:flex; align-items:center; justify-content:center; flex-shrink:0;">
|
|
<span style="font-size:var(--font-size-xs); font-weight:var(--font-weight-semibold); color:var(--brand-primary);">张</span>
|
|
</div>
|
|
<span style="font-size:var(--font-size-sm); color:var(--neutral-800); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">张小明</span>
|
|
</div>
|
|
</td>
|
|
<td style="padding:var(--space-3) var(--space-4); font-size:var(--font-size-sm); color:var(--neutral-800); font-weight:var(--font-weight-medium); text-align:right; border-bottom:1px solid var(--neutral-100); white-space:nowrap;">38</td>
|
|
<td style="padding:var(--space-3) var(--space-4); font-size:var(--font-size-sm); color:var(--state-success); text-align:right; border-bottom:1px solid var(--neutral-100); white-space:nowrap;">24秒</td>
|
|
<td style="padding:var(--space-3) var(--space-4); font-size:var(--font-size-sm); color:var(--neutral-800); text-align:right; border-bottom:1px solid var(--neutral-100); white-space:nowrap;">98.2%</td>
|
|
<td style="padding:var(--space-3) var(--space-4); font-size:var(--font-size-sm); color:var(--neutral-500); text-align:right; border-bottom:1px solid var(--neutral-100); white-space:nowrap;">7h 32m</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:var(--space-3) var(--space-4); font-size:var(--font-size-sm); color:var(--neutral-700); border-bottom:1px solid var(--neutral-100); white-space:nowrap;">
|
|
<span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:var(--radius-full); background-color:var(--brand-primary-light); color:var(--brand-primary); font-size:var(--font-size-xs); font-weight:var(--font-weight-bold);">2</span>
|
|
</td>
|
|
<td style="padding:var(--space-3) var(--space-4); white-space:nowrap; border-bottom:1px solid var(--neutral-100);">
|
|
<div style="display:flex; align-items:center; gap:var(--space-2);">
|
|
<div style="width:28px; height:28px; border-radius:var(--radius-full); background-color:var(--state-info-bg); display:flex; align-items:center; justify-content:center; flex-shrink:0;">
|
|
<span style="font-size:var(--font-size-xs); font-weight:var(--font-weight-semibold); color:var(--state-info);">李</span>
|
|
</div>
|
|
<span style="font-size:var(--font-size-sm); color:var(--neutral-800); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">李婷婷</span>
|
|
</div>
|
|
</td>
|
|
<td style="padding:var(--space-3) var(--space-4); font-size:var(--font-size-sm); color:var(--neutral-800); font-weight:var(--font-weight-medium); text-align:right; border-bottom:1px solid var(--neutral-100); white-space:nowrap;">32</td>
|
|
<td style="padding:var(--space-3) var(--space-4); font-size:var(--font-size-sm); color:var(--state-success); text-align:right; border-bottom:1px solid var(--neutral-100); white-space:nowrap;">28秒</td>
|
|
<td style="padding:var(--space-3) var(--space-4); font-size:var(--font-size-sm); color:var(--neutral-800); text-align:right; border-bottom:1px solid var(--neutral-100); white-space:nowrap;">97.5%</td>
|
|
<td style="padding:var(--space-3) var(--space-4); font-size:var(--font-size-sm); color:var(--neutral-500); text-align:right; border-bottom:1px solid var(--neutral-100); white-space:nowrap;">7h 15m</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:var(--space-3) var(--space-4); font-size:var(--font-size-sm); color:var(--neutral-700); border-bottom:1px solid var(--neutral-100); white-space:nowrap;">
|
|
<span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:var(--radius-full); background-color:var(--brand-primary-light); color:var(--brand-primary); font-size:var(--font-size-xs); font-weight:var(--font-weight-bold);">3</span>
|
|
</td>
|
|
<td style="padding:var(--space-3) var(--space-4); white-space:nowrap; border-bottom:1px solid var(--neutral-100);">
|
|
<div style="display:flex; align-items:center; gap:var(--space-2);">
|
|
<div style="width:28px; height:28px; border-radius:var(--radius-full); background-color:var(--state-success-bg); display:flex; align-items:center; justify-content:center; flex-shrink:0;">
|
|
<span style="font-size:var(--font-size-xs); font-weight:var(--font-weight-semibold); color:var(--state-success);">王</span>
|
|
</div>
|
|
<span style="font-size:var(--font-size-sm); color:var(--neutral-800); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">王大伟</span>
|
|
</div>
|
|
</td>
|
|
<td style="padding:var(--space-3) var(--space-4); font-size:var(--font-size-sm); color:var(--neutral-800); font-weight:var(--font-weight-medium); text-align:right; border-bottom:1px solid var(--neutral-100); white-space:nowrap;">27</td>
|
|
<td style="padding:var(--space-3) var(--space-4); font-size:var(--font-size-sm); color:var(--neutral-800); text-align:right; border-bottom:1px solid var(--neutral-100); white-space:nowrap;">31秒</td>
|
|
<td style="padding:var(--space-3) var(--space-4); font-size:var(--font-size-sm); color:var(--neutral-800); text-align:right; border-bottom:1px solid var(--neutral-100); white-space:nowrap;">96.8%</td>
|
|
<td style="padding:var(--space-3) var(--space-4); font-size:var(--font-size-sm); color:var(--neutral-500); text-align:right; border-bottom:1px solid var(--neutral-100); white-space:nowrap;">6h 50m</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:var(--space-3) var(--space-4); font-size:var(--font-size-sm); color:var(--neutral-700); border-bottom:1px solid var(--neutral-100); white-space:nowrap;">
|
|
<span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:var(--radius-full); background-color:var(--neutral-100); color:var(--neutral-500); font-size:var(--font-size-xs); font-weight:var(--font-weight-bold);">4</span>
|
|
</td>
|
|
<td style="padding:var(--space-3) var(--space-4); white-space:nowrap; border-bottom:1px solid var(--neutral-100);">
|
|
<div style="display:flex; align-items:center; gap:var(--space-2);">
|
|
<div style="width:28px; height:28px; border-radius:var(--radius-full); background-color:var(--state-warning-bg); display:flex; align-items:center; justify-content:center; flex-shrink:0;">
|
|
<span style="font-size:var(--font-size-xs); font-weight:var(--font-weight-semibold); color:var(--state-warning);">赵</span>
|
|
</div>
|
|
<span style="font-size:var(--font-size-sm); color:var(--neutral-800); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">赵思雨</span>
|
|
</div>
|
|
</td>
|
|
<td style="padding:var(--space-3) var(--space-4); font-size:var(--font-size-sm); color:var(--neutral-800); font-weight:var(--font-weight-medium); text-align:right; border-bottom:1px solid var(--neutral-100); white-space:nowrap;">22</td>
|
|
<td style="padding:var(--space-3) var(--space-4); font-size:var(--font-size-sm); color:var(--neutral-800); text-align:right; border-bottom:1px solid var(--neutral-100); white-space:nowrap;">35秒</td>
|
|
<td style="padding:var(--space-3) var(--space-4); font-size:var(--font-size-sm); color:var(--neutral-800); text-align:right; border-bottom:1px solid var(--neutral-100); white-space:nowrap;">95.1%</td>
|
|
<td style="padding:var(--space-3) var(--space-4); font-size:var(--font-size-sm); color:var(--neutral-500); text-align:right; border-bottom:1px solid var(--neutral-100); white-space:nowrap;">6h 20m</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:var(--space-3) var(--space-4); font-size:var(--font-size-sm); color:var(--neutral-700); border-bottom:1px solid var(--neutral-100); white-space:nowrap;">
|
|
<span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:var(--radius-full); background-color:var(--neutral-100); color:var(--neutral-500); font-size:var(--font-size-xs); font-weight:var(--font-weight-bold);">5</span>
|
|
</td>
|
|
<td style="padding:var(--space-3) var(--space-4); white-space:nowrap; border-bottom:1px solid var(--neutral-100);">
|
|
<div style="display:flex; align-items:center; gap:var(--space-2);">
|
|
<div style="width:28px; height:28px; border-radius:var(--radius-full); background-color:var(--state-error-bg); display:flex; align-items:center; justify-content:center; flex-shrink:0;">
|
|
<span style="font-size:var(--font-size-xs); font-weight:var(--font-weight-semibold); color:var(--state-error);">刘</span>
|
|
</div>
|
|
<span style="font-size:var(--font-size-sm); color:var(--neutral-800); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">刘晓峰</span>
|
|
</div>
|
|
</td>
|
|
<td style="padding:var(--space-3) var(--space-4); font-size:var(--font-size-sm); color:var(--neutral-800); font-weight:var(--font-weight-medium); text-align:right; border-bottom:1px solid var(--neutral-100); white-space:nowrap;">19</td>
|
|
<td style="padding:var(--space-3) var(--space-4); font-size:var(--font-size-sm); color:var(--neutral-800); text-align:right; border-bottom:1px solid var(--neutral-100); white-space:nowrap;">38秒</td>
|
|
<td style="padding:var(--space-3) var(--space-4); font-size:var(--font-size-sm); color:var(--neutral-800); text-align:right; border-bottom:1px solid var(--neutral-100); white-space:nowrap;">94.3%</td>
|
|
<td style="padding:var(--space-3) var(--space-4); font-size:var(--font-size-sm); color:var(--neutral-500); text-align:right; border-bottom:1px solid var(--neutral-100); white-space:nowrap;">5h 45m</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:var(--space-3) var(--space-4); font-size:var(--font-size-sm); color:var(--neutral-700); white-space:nowrap;">
|
|
<span style="display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:var(--radius-full); background-color:var(--neutral-100); color:var(--neutral-500); font-size:var(--font-size-xs); font-weight:var(--font-weight-bold);">6</span>
|
|
</td>
|
|
<td style="padding:var(--space-3) var(--space-4); white-space:nowrap;">
|
|
<div style="display:flex; align-items:center; gap:var(--space-2);">
|
|
<div style="width:28px; height:28px; border-radius:var(--radius-full); background-color:var(--brand-primary-light); display:flex; align-items:center; justify-content:center; flex-shrink:0;">
|
|
<span style="font-size:var(--font-size-xs); font-weight:var(--font-weight-semibold); color:var(--brand-primary);">陈</span>
|
|
</div>
|
|
<span style="font-size:var(--font-size-sm); color:var(--neutral-800); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">陈嘉琪</span>
|
|
</div>
|
|
</td>
|
|
<td style="padding:var(--space-3) var(--space-4); font-size:var(--font-size-sm); color:var(--neutral-800); font-weight:var(--font-weight-medium); text-align:right; white-space:nowrap;">18</td>
|
|
<td style="padding:var(--space-3) var(--space-4); font-size:var(--font-size-sm); color:var(--neutral-800); text-align:right; white-space:nowrap;">40秒</td>
|
|
<td style="padding:var(--space-3) var(--space-4); font-size:var(--font-size-sm); color:var(--neutral-800); text-align:right; white-space:nowrap;">93.8%</td>
|
|
<td style="padding:var(--space-3) var(--space-4); font-size:var(--font-size-sm); color:var(--neutral-500); text-align:right; white-space:nowrap;">5h 10m</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script>lucide.createIcons();</script>
|
|
</body>
|
|
</html>
|