初始化项目：前端 React+TS+Tailwind+antd 脚手架，后端 Go，保留原型设计稿
This commit is contained in:
yml2213
@@ -0,0 +1,607 @@
|
||||
<!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">
|
||||
/* Online Customer Service System — Brand CSS */
|
||||
/* Professional & Efficient Style — Cool Blue-Gray */
|
||||
|
||||
: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 (static: alpha <= 0.05; floating layers only may exceed) === */
|
||||
--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 mode */
|
||||
.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>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.3.1/dist/index.global.js"></script>
|
||||
<script src="https://unpkg.com/lucide@1.8.0/dist/umd/lucide.min.js"></script>
|
||||
<style type="text/tailwindcss">
|
||||
@theme inline {
|
||||
--color-primary: var(--brand-primary);
|
||||
--color-primary-hover: var(--brand-primary-hover);
|
||||
--color-primary-active: var(--brand-primary-active);
|
||||
--color-primary-light: var(--brand-primary-light);
|
||||
--color-primary-lighter: var(--brand-primary-lighter);
|
||||
--color-primary-dark: var(--brand-primary-dark);
|
||||
--color-background: var(--neutral-50);
|
||||
--color-foreground: var(--neutral-900);
|
||||
--color-card: var(--neutral-0);
|
||||
--color-card-foreground: var(--neutral-900);
|
||||
--color-muted: var(--neutral-100);
|
||||
--color-muted-foreground: var(--neutral-500);
|
||||
--color-border: var(--neutral-200);
|
||||
--color-accent: var(--brand-primary-light);
|
||||
--color-accent-foreground: var(--brand-primary-dark);
|
||||
--color-destructive: var(--state-error);
|
||||
--color-destructive-foreground: var(--state-error-bg);
|
||||
--color-ring: var(--brand-primary);
|
||||
--color-sidebar: var(--neutral-0);
|
||||
--color-sidebar-foreground: var(--neutral-700);
|
||||
--color-sidebar-primary: var(--brand-primary);
|
||||
--color-sidebar-primary-foreground: var(--neutral-0);
|
||||
--color-sidebar-accent: var(--brand-primary-lighter);
|
||||
--color-sidebar-accent-foreground: var(--brand-primary-dark);
|
||||
--color-success: var(--state-success);
|
||||
--color-success-bg: var(--state-success-bg);
|
||||
--color-warning: var(--state-warning);
|
||||
--color-warning-bg: var(--state-warning-bg);
|
||||
--color-error: var(--state-error);
|
||||
--color-error-bg: var(--state-error-bg);
|
||||
--color-info: var(--state-info);
|
||||
--color-info-bg: var(--state-info-bg);
|
||||
--color-neutral-0: var(--neutral-0);
|
||||
--color-neutral-50: var(--neutral-50);
|
||||
--color-neutral-100: var(--neutral-100);
|
||||
--color-neutral-200: var(--neutral-200);
|
||||
--color-neutral-300: var(--neutral-300);
|
||||
--color-neutral-400: var(--neutral-400);
|
||||
--color-neutral-500: var(--neutral-500);
|
||||
--color-neutral-600: var(--neutral-600);
|
||||
--color-neutral-700: var(--neutral-700);
|
||||
--color-neutral-800: var(--neutral-800);
|
||||
--color-neutral-900: var(--neutral-900);
|
||||
--radius-sm: var(--radius-sm);
|
||||
--radius-md: var(--radius-md);
|
||||
--radius-lg: var(--radius-lg);
|
||||
}
|
||||
@layer base {
|
||||
body { background: var(--neutral-50); color: var(--neutral-900); }
|
||||
td, th { @apply break-words; word-break: break-all; word-break: auto-phrase; }
|
||||
th { @apply whitespace-nowrap; }
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
[data-icon] {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
-webkit-mask-size: contain;
|
||||
mask-size: contain;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-position: center;
|
||||
mask-position: center;
|
||||
background-color: currentColor;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen antialiased" style="font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: var(--line-height-normal); color: var(--neutral-900); background: var(--neutral-50);">
|
||||
<main class="flex h-screen overflow-hidden">
|
||||
|
||||
<!-- ====== Left Sidebar (240px) — Admin Navigation ====== -->
|
||||
<aside class="shrink-0 flex flex-col h-full" style="width: var(--sidebar-width); background: var(--neutral-0); border-right: 1px solid var(--neutral-200);">
|
||||
|
||||
<!-- Logo -->
|
||||
<div class="flex items-center gap-2.5 px-4 shrink-0" style="height: var(--header-height); border-bottom: 1px solid var(--neutral-200);">
|
||||
<div class="flex items-center justify-center rounded-lg shrink-0" style="width: 32px; height: 32px; background: var(--brand-primary);">
|
||||
<i data-lucide="cloud" style="width: 18px; height: 18px; color: var(--neutral-0);"></i>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 min-w-0">
|
||||
<span class="font-semibold truncate" style="font-size: var(--font-size-lg); color: var(--neutral-900);">客服云</span>
|
||||
<span class="inline-flex items-center px-1.5 py-0.5 rounded whitespace-nowrap shrink-0" style="font-size: 10px; font-weight: 600; background: var(--state-warning-bg); color: var(--state-warning); border: 1px solid var(--state-warning);">管理端</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="flex-1 overflow-y-auto py-3 px-2">
|
||||
<ul class="flex flex-col gap-0.5">
|
||||
|
||||
<!-- Active: 运营概览 -->
|
||||
<li>
|
||||
<a href="#" data-dom-id="admin-nav-dashboard" class="flex items-center gap-2.5 px-3 py-2 rounded-lg font-medium truncate" style="background: var(--brand-primary-lighter); color: var(--brand-primary);">
|
||||
<i data-lucide="layout-dashboard" style="width: 18px; height: 18px; flex-shrink: 0;"></i>
|
||||
<span class="truncate" style="font-size: var(--font-size-base);">运营概览</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- 租户管理 -->
|
||||
<li>
|
||||
<a href="#" data-dom-id="admin-nav-tenants" class="flex items-center gap-2.5 px-3 py-2 rounded-lg truncate" style="color: var(--neutral-600);">
|
||||
<i data-lucide="building-2" style="width: 18px; height: 18px; flex-shrink: 0;"></i>
|
||||
<span class="truncate" style="font-size: var(--font-size-base);">租户管理</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- 套餐定价 -->
|
||||
<li>
|
||||
<a href="#" data-dom-id="admin-nav-plans" class="flex items-center gap-2.5 px-3 py-2 rounded-lg truncate" style="color: var(--neutral-600);">
|
||||
<i data-lucide="credit-card" style="width: 18px; height: 18px; flex-shrink: 0;"></i>
|
||||
<span class="truncate" style="font-size: var(--font-size-base);">套餐定价</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- 系统运维 -->
|
||||
<li>
|
||||
<a href="#" data-dom-id="admin-nav-ops" class="flex items-center gap-2.5 px-3 py-2 rounded-lg truncate" style="color: var(--neutral-600);">
|
||||
<i data-lucide="server" style="width: 18px; height: 18px; flex-shrink: 0;"></i>
|
||||
<span class="truncate" style="font-size: var(--font-size-base);">系统运维</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Sidebar Footer: Admin User Info -->
|
||||
<div class="flex items-center gap-2.5 px-4 shrink-0" style="height: 52px; border-top: 1px solid var(--neutral-200);">
|
||||
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 32px; height: 32px; background: var(--brand-primary-light); color: var(--brand-primary); font-size: var(--font-size-sm); font-weight: 600;">
|
||||
管
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="truncate font-medium" style="font-size: var(--font-size-sm); color: var(--neutral-800);">系统管理员</div>
|
||||
<div class="truncate" style="font-size: var(--font-size-xs); color: var(--neutral-400);">超级管理员</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
<!-- ====== Main Content Area ====== -->
|
||||
<div class="flex-1 flex flex-col min-w-0 h-full overflow-hidden">
|
||||
|
||||
<!-- Top Header Bar -->
|
||||
<header class="shrink-0 flex items-center justify-between px-6" style="height: var(--header-height); border-bottom: 1px solid var(--neutral-200); background: var(--neutral-0);">
|
||||
<div class="flex items-center gap-3 min-w-0">
|
||||
<h1 class="font-semibold truncate" style="font-size: var(--font-size-xl); color: var(--neutral-900);">运营概览</h1>
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-400);">2026年7月9日 星期四</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 shrink-0 ml-4">
|
||||
<button class="flex items-center justify-center rounded-lg relative" style="width: 36px; height: 36px; color: var(--neutral-500);" title="通知">
|
||||
<i data-lucide="bell" style="width: 18px; height: 18px;"></i>
|
||||
<span class="absolute top-1.5 right-1.5 flex items-center justify-center rounded-full" style="width: 8px; height: 8px; background: var(--state-error);"></span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Scrollable Content -->
|
||||
<div class="flex-1 overflow-y-auto px-6 py-5">
|
||||
|
||||
<!-- Welcome Section -->
|
||||
<div class="mb-5">
|
||||
<h2 class="font-semibold mb-1" style="font-size: var(--font-size-2xl); color: var(--neutral-900);">欢迎回来，管理员</h2>
|
||||
<p class="truncate" style="font-size: var(--font-size-sm); color: var(--neutral-500);">以下是平台当前运营数据概览，数据更新于今天 08:00</p>
|
||||
</div>
|
||||
|
||||
<!-- ====== KPI Cards (4 columns) ====== -->
|
||||
<div class="grid gap-4 mb-5" style="grid-template-columns: repeat(4, 1fr);">
|
||||
|
||||
<!-- KPI 1: 租户总数 (Blue) -->
|
||||
<div class="rounded-lg px-4 py-4" style="background: var(--neutral-0); border: 1px solid var(--neutral-200);">
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 40px; height: 40px; background: var(--brand-primary-light); color: var(--brand-primary);">
|
||||
<i data-lucide="building-2" style="width: 20px; height: 20px;"></i>
|
||||
</div>
|
||||
<span class="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded whitespace-nowrap" style="font-size: var(--font-size-xs); font-weight: 500; background: var(--state-success-bg); color: var(--state-success);">
|
||||
<i data-lucide="trending-up" style="width: 12px; height: 12px;"></i>
|
||||
+12
|
||||
</span>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<span class="font-bold whitespace-nowrap" style="font-size: var(--font-size-3xl); color: var(--neutral-900);">186</span>
|
||||
<span class="ml-1 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-500);">家</span>
|
||||
</div>
|
||||
<p class="truncate" style="font-size: var(--font-size-sm); color: var(--neutral-500);">租户总数</p>
|
||||
<p class="truncate mt-1" style="font-size: var(--font-size-xs); color: var(--neutral-400);">本月新增 12 家</p>
|
||||
</div>
|
||||
|
||||
<!-- KPI 2: 活跃租户 (Green) -->
|
||||
<div class="rounded-lg px-4 py-4" style="background: var(--neutral-0); border: 1px solid var(--neutral-200);">
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 40px; height: 40px; background: var(--state-success-bg); color: var(--state-success);">
|
||||
<i data-lucide="users" style="width: 20px; height: 20px;"></i>
|
||||
</div>
|
||||
<span class="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded whitespace-nowrap" style="font-size: var(--font-size-xs); font-weight: 500; background: var(--state-success-bg); color: var(--state-success);">
|
||||
81.7%
|
||||
</span>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<span class="font-bold whitespace-nowrap" style="font-size: var(--font-size-3xl); color: var(--neutral-900);">152</span>
|
||||
<span class="ml-1 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-500);">家</span>
|
||||
</div>
|
||||
<p class="truncate" style="font-size: var(--font-size-sm); color: var(--neutral-500);">活跃租户</p>
|
||||
<p class="truncate mt-1" style="font-size: var(--font-size-xs); color: var(--neutral-400);">活跃率 81.7%</p>
|
||||
</div>
|
||||
|
||||
<!-- KPI 3: 平台月收入 (Orange) -->
|
||||
<div class="rounded-lg px-4 py-4" style="background: var(--neutral-0); border: 1px solid var(--neutral-200);">
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 40px; height: 40px; background: var(--state-warning-bg); color: var(--state-warning);">
|
||||
<i data-lucide="wallet" style="width: 20px; height: 20px;"></i>
|
||||
</div>
|
||||
<span class="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded whitespace-nowrap" style="font-size: var(--font-size-xs); font-weight: 500; background: var(--state-success-bg); color: var(--state-success);">
|
||||
<i data-lucide="trending-up" style="width: 12px; height: 12px;"></i>
|
||||
+15%
|
||||
</span>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<span class="font-bold whitespace-nowrap" style="font-size: var(--font-size-3xl); color: var(--neutral-900);">¥128,600</span>
|
||||
</div>
|
||||
<p class="truncate" style="font-size: var(--font-size-sm); color: var(--neutral-500);">平台月收入</p>
|
||||
<p class="truncate mt-1" style="font-size: var(--font-size-xs); color: var(--neutral-400);">环比增长 15%</p>
|
||||
</div>
|
||||
|
||||
<!-- KPI 4: 系统可用率 (Purple) -->
|
||||
<div class="rounded-lg px-4 py-4" style="background: var(--neutral-0); border: 1px solid var(--neutral-200);">
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 40px; height: 40px; background: var(--state-info-bg); color: var(--state-info);">
|
||||
<i data-lucide="shield-check" style="width: 20px; height: 20px;"></i>
|
||||
</div>
|
||||
<span class="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded whitespace-nowrap" style="font-size: var(--font-size-xs); font-weight: 500; background: var(--state-success-bg); color: var(--state-success);">
|
||||
SLA达标
|
||||
</span>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<span class="font-bold whitespace-nowrap" style="font-size: var(--font-size-3xl); color: var(--neutral-900);">99.97%</span>
|
||||
</div>
|
||||
<p class="truncate" style="font-size: var(--font-size-sm); color: var(--neutral-500);">系统可用率</p>
|
||||
<p class="truncate mt-1" style="font-size: var(--font-size-xs); color: var(--neutral-400);">本月 SLA 达标，目标 99.9%</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ====== Charts Area (2 columns) ====== -->
|
||||
<div class="grid gap-4 mb-5" style="grid-template-columns: 3fr 2fr;">
|
||||
|
||||
<!-- Chart 1: Tenant Growth Trend (Bar Chart — CSS) -->
|
||||
<div class="rounded-lg" style="background: var(--neutral-0); border: 1px solid var(--neutral-200);">
|
||||
<div class="flex items-center justify-between px-4 pt-4 pb-3">
|
||||
<div>
|
||||
<h3 class="font-semibold truncate" style="font-size: var(--font-size-base); color: var(--neutral-800);">租户增长趋势</h3>
|
||||
<p class="truncate" style="font-size: var(--font-size-xs); color: var(--neutral-400);">近6个月新增租户数量</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 shrink-0">
|
||||
<span class="inline-flex items-center gap-1.5 whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-500);">
|
||||
<span class="inline-block rounded-sm" style="width: 10px; height: 10px; background: var(--brand-primary);"></span>
|
||||
新增租户
|
||||
</span>
|
||||
<span class="inline-flex items-center gap-1.5 whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-500);">
|
||||
<span class="inline-block rounded-sm" style="width: 10px; height: 10px; background: var(--neutral-200);"></span>
|
||||
累计租户
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 pb-4">
|
||||
<div class="flex items-end gap-3" style="height: 180px;">
|
||||
<!-- Feb -->
|
||||
<div class="flex-1 flex flex-col items-center gap-1">
|
||||
<div class="w-full flex flex-col items-center justify-end gap-0.5" style="height: 160px;">
|
||||
<div class="w-full rounded-t-sm" style="height: 13px; background: var(--neutral-200);"></div>
|
||||
<div class="w-full rounded-t-sm" style="height: 53px; background: var(--brand-primary);"></div>
|
||||
</div>
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-400);">2月</span>
|
||||
</div>
|
||||
<!-- Mar -->
|
||||
<div class="flex-1 flex flex-col items-center gap-1">
|
||||
<div class="w-full flex flex-col items-center justify-end gap-0.5" style="height: 160px;">
|
||||
<div class="w-full rounded-t-sm" style="height: 27px; background: var(--neutral-200);"></div>
|
||||
<div class="w-full rounded-t-sm" style="height: 67px; background: var(--brand-primary);"></div>
|
||||
</div>
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-400);">3月</span>
|
||||
</div>
|
||||
<!-- Apr -->
|
||||
<div class="flex-1 flex flex-col items-center gap-1">
|
||||
<div class="w-full flex flex-col items-center justify-end gap-0.5" style="height: 160px;">
|
||||
<div class="w-full rounded-t-sm" style="height: 40px; background: var(--neutral-200);"></div>
|
||||
<div class="w-full rounded-t-sm" style="height: 53px; background: var(--brand-primary);"></div>
|
||||
</div>
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-400);">4月</span>
|
||||
</div>
|
||||
<!-- May -->
|
||||
<div class="flex-1 flex flex-col items-center gap-1">
|
||||
<div class="w-full flex flex-col items-center justify-end gap-0.5" style="height: 160px;">
|
||||
<div class="w-full rounded-t-sm" style="height: 53px; background: var(--neutral-200);"></div>
|
||||
<div class="w-full rounded-t-sm" style="height: 67px; background: var(--brand-primary);"></div>
|
||||
</div>
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-400);">5月</span>
|
||||
</div>
|
||||
<!-- Jun -->
|
||||
<div class="flex-1 flex flex-col items-center gap-1">
|
||||
<div class="w-full flex flex-col items-center justify-end gap-0.5" style="height: 160px;">
|
||||
<div class="w-full rounded-t-sm" style="height: 67px; background: var(--neutral-200);"></div>
|
||||
<div class="w-full rounded-t-sm" style="height: 53px; background: var(--brand-primary);"></div>
|
||||
</div>
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-400);">6月</span>
|
||||
</div>
|
||||
<!-- Jul -->
|
||||
<div class="flex-1 flex flex-col items-center gap-1">
|
||||
<div class="w-full flex flex-col items-center justify-end gap-0.5" style="height: 160px;">
|
||||
<div class="w-full rounded-t-sm" style="height: 80px; background: var(--neutral-200);"></div>
|
||||
<div class="w-full rounded-t-sm" style="height: 40px; background: var(--brand-primary);"></div>
|
||||
</div>
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-400);">7月</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chart 2: Plan Distribution (Donut Chart — CSS) -->
|
||||
<div class="rounded-lg" style="background: var(--neutral-0); border: 1px solid var(--neutral-200);">
|
||||
<div class="px-4 pt-4 pb-3">
|
||||
<h3 class="font-semibold truncate" style="font-size: var(--font-size-base); color: var(--neutral-800);">套餐分布占比</h3>
|
||||
<p class="truncate" style="font-size: var(--font-size-xs); color: var(--neutral-400);">当前租户套餐类型分布</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-6 px-4 pb-4">
|
||||
<!-- CSS Donut Chart -->
|
||||
<div class="shrink-0 flex items-center justify-center" style="width: 140px; height: 140px;">
|
||||
<div class="relative flex items-center justify-center" style="width: 120px; height: 120px;">
|
||||
<div class="absolute inset-0 rounded-full" style="background: conic-gradient(var(--brand-primary) 0deg 162deg, var(--state-success) 162deg 270deg, var(--state-warning) 270deg 360deg);"></div>
|
||||
<div class="absolute rounded-full" style="width: 70px; height: 70px; background: var(--neutral-0);"></div>
|
||||
<div class="relative flex flex-col items-center justify-center" style="z-index: 1;">
|
||||
<span class="font-bold whitespace-nowrap" style="font-size: var(--font-size-xl); color: var(--neutral-900);">186</span>
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-400);">总计</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Legend -->
|
||||
<div class="flex-1 min-w-0 flex flex-col gap-3">
|
||||
<div class="flex items-center justify-between min-w-0">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<span class="inline-block rounded-sm shrink-0" style="width: 10px; height: 10px; background: var(--brand-primary);"></span>
|
||||
<span class="truncate" style="font-size: var(--font-size-sm); color: var(--neutral-600);">基础版</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 shrink-0 ml-2">
|
||||
<span class="whitespace-nowrap font-semibold" style="font-size: var(--font-size-sm); color: var(--neutral-900);">83家</span>
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-400);">45%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between min-w-0">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<span class="inline-block rounded-sm shrink-0" style="width: 10px; height: 10px; background: var(--state-success);"></span>
|
||||
<span class="truncate" style="font-size: var(--font-size-sm); color: var(--neutral-600);">专业版</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 shrink-0 ml-2">
|
||||
<span class="whitespace-nowrap font-semibold" style="font-size: var(--font-size-sm); color: var(--neutral-900);">56家</span>
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-400);">30%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between min-w-0">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<span class="inline-block rounded-sm shrink-0" style="width: 10px; height: 10px; background: var(--state-warning);"></span>
|
||||
<span class="truncate" style="font-size: var(--font-size-sm); color: var(--neutral-600);">企业版</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 shrink-0 ml-2">
|
||||
<span class="whitespace-nowrap font-semibold" style="font-size: var(--font-size-sm); color: var(--neutral-900);">47家</span>
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-400);">25%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ====== Recent Operations Table ====== -->
|
||||
<div class="rounded-lg" style="background: var(--neutral-0); border: 1px solid var(--neutral-200);">
|
||||
<div class="flex items-center justify-between px-4 pt-4 pb-3" style="border-bottom: 1px solid var(--neutral-100);">
|
||||
<div>
|
||||
<h3 class="font-semibold truncate" style="font-size: var(--font-size-base); color: var(--neutral-800);">最近操作记录</h3>
|
||||
<p class="truncate" style="font-size: var(--font-size-xs); color: var(--neutral-400);">平台管理操作的最近记录</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full" style="table-layout: fixed; min-width: 640px;">
|
||||
<thead>
|
||||
<tr style="background: var(--neutral-50);">
|
||||
<th class="px-4 py-2.5 text-left font-medium whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-500); width: 160px;">时间</th>
|
||||
<th class="px-4 py-2.5 text-left font-medium whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-500); width: 100px;">操作人</th>
|
||||
<th class="px-4 py-2.5 text-left font-medium whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-500); width: 80px;">操作类型</th>
|
||||
<th class="px-4 py-2.5 text-left font-medium whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-500); width: 140px;">租户名称</th>
|
||||
<th class="px-4 py-2.5 text-left font-medium whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-500);">详情</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- Row 1 -->
|
||||
<tr style="border-top: 1px solid var(--neutral-100);">
|
||||
<td class="px-4 py-3 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-600);">2026-07-09 09:32</td>
|
||||
<td class="px-4 py-3 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-800);">张明</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded whitespace-nowrap" style="font-size: var(--font-size-xs); font-weight: 500; background: var(--brand-primary-light); color: var(--brand-primary);">开通账号</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 truncate" style="font-size: var(--font-size-sm); color: var(--neutral-800);">智联科技有限公司</td>
|
||||
<td class="px-4 py-3 truncate" style="font-size: var(--font-size-sm); color: var(--neutral-500);">开通基础版套餐，分配5个客服坐席</td>
|
||||
</tr>
|
||||
<!-- Row 2 -->
|
||||
<tr style="border-top: 1px solid var(--neutral-100);">
|
||||
<td class="px-4 py-3 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-600);">2026-07-09 08:15</td>
|
||||
<td class="px-4 py-3 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-800);">系统</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded whitespace-nowrap" style="font-size: var(--font-size-xs); font-weight: 500; background: var(--state-success-bg); color: var(--state-success);">续费</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 truncate" style="font-size: var(--font-size-sm); color: var(--neutral-800);">星辰电商集团</td>
|
||||
<td class="px-4 py-3 truncate" style="font-size: var(--font-size-sm); color: var(--neutral-500);">专业版套餐自动续费成功，有效期至2027-07-09</td>
|
||||
</tr>
|
||||
<!-- Row 3 -->
|
||||
<tr style="border-top: 1px solid var(--neutral-100);">
|
||||
<td class="px-4 py-3 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-600);">2026-07-08 17:45</td>
|
||||
<td class="px-4 py-3 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-800);">李芳</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded whitespace-nowrap" style="font-size: var(--font-size-xs); font-weight: 500; background: var(--state-warning-bg); color: var(--state-warning);">升级</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 truncate" style="font-size: var(--font-size-sm); color: var(--neutral-800);">阳光教育科技</td>
|
||||
<td class="px-4 py-3 truncate" style="font-size: var(--font-size-sm); color: var(--neutral-500);">由基础版升级为专业版，坐席数由5增至20</td>
|
||||
</tr>
|
||||
<!-- Row 4 -->
|
||||
<tr style="border-top: 1px solid var(--neutral-100);">
|
||||
<td class="px-4 py-3 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-600);">2026-07-08 14:22</td>
|
||||
<td class="px-4 py-3 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-800);">张明</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded whitespace-nowrap" style="font-size: var(--font-size-xs); font-weight: 500; background: var(--state-warning-bg); color: var(--state-warning);">暂停</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 truncate" style="font-size: var(--font-size-sm); color: var(--neutral-800);">海外商贸有限公司</td>
|
||||
<td class="px-4 py-3 truncate" style="font-size: var(--font-size-sm); color: var(--neutral-500);">租户申请暂停服务，预计8月恢复</td>
|
||||
</tr>
|
||||
<!-- Row 5 -->
|
||||
<tr style="border-top: 1px solid var(--neutral-100);">
|
||||
<td class="px-4 py-3 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-600);">2026-07-08 10:08</td>
|
||||
<td class="px-4 py-3 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-800);">李芳</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded whitespace-nowrap" style="font-size: var(--font-size-xs); font-weight: 500; background: var(--brand-primary-light); color: var(--brand-primary);">开通账号</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 truncate" style="font-size: var(--font-size-sm); color: var(--neutral-800);">蓝海物流有限公司</td>
|
||||
<td class="px-4 py-3 truncate" style="font-size: var(--font-size-sm); color: var(--neutral-500);">开通企业版套餐，分配50个客服坐席</td>
|
||||
</tr>
|
||||
<!-- Row 6 -->
|
||||
<tr style="border-top: 1px solid var(--neutral-100);">
|
||||
<td class="px-4 py-3 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-600);">2026-07-07 16:30</td>
|
||||
<td class="px-4 py-3 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-800);">系统</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded whitespace-nowrap" style="font-size: var(--font-size-xs); font-weight: 500; background: var(--state-error-bg); color: var(--state-error);">关闭</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 truncate" style="font-size: var(--font-size-sm); color: var(--neutral-800);">测试企业试用账号</td>
|
||||
<td class="px-4 py-3 truncate" style="font-size: var(--font-size-sm); color: var(--neutral-500);">试用期满未续费，自动关闭账号</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,718 @@
|
||||
<!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">
|
||||
/* Online Customer Service System — Brand CSS */
|
||||
/* Professional & Efficient Style — Cool Blue-Gray */
|
||||
|
||||
: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 (static: alpha <= 0.05; floating layers only may exceed) === */
|
||||
--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 mode */
|
||||
.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>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.3.1/dist/index.global.js"></script>
|
||||
<script src="https://unpkg.com/lucide@1.8.0/dist/umd/lucide.min.js"></script>
|
||||
<style type="text/tailwindcss">
|
||||
@theme inline {
|
||||
--color-primary: var(--brand-primary);
|
||||
--color-primary-hover: var(--brand-primary-hover);
|
||||
--color-primary-active: var(--brand-primary-active);
|
||||
--color-primary-light: var(--brand-primary-light);
|
||||
--color-primary-lighter: var(--brand-primary-lighter);
|
||||
--color-primary-dark: var(--brand-primary-dark);
|
||||
--color-background: var(--neutral-50);
|
||||
--color-foreground: var(--neutral-900);
|
||||
--color-card: var(--neutral-0);
|
||||
--color-card-foreground: var(--neutral-900);
|
||||
--color-muted: var(--neutral-100);
|
||||
--color-muted-foreground: var(--neutral-500);
|
||||
--color-border: var(--neutral-200);
|
||||
--color-accent: var(--brand-primary-light);
|
||||
--color-accent-foreground: var(--brand-primary-dark);
|
||||
--color-destructive: var(--state-error);
|
||||
--color-destructive-foreground: var(--state-error-bg);
|
||||
--color-ring: var(--brand-primary);
|
||||
--color-sidebar: var(--neutral-0);
|
||||
--color-sidebar-foreground: var(--neutral-700);
|
||||
--color-sidebar-primary: var(--brand-primary);
|
||||
--color-sidebar-primary-foreground: var(--neutral-0);
|
||||
--color-sidebar-accent: var(--brand-primary-lighter);
|
||||
--color-sidebar-accent-foreground: var(--brand-primary-dark);
|
||||
--color-success: var(--state-success);
|
||||
--color-success-bg: var(--state-success-bg);
|
||||
--color-warning: var(--state-warning);
|
||||
--color-warning-bg: var(--state-warning-bg);
|
||||
--color-error: var(--state-error);
|
||||
--color-error-bg: var(--state-error-bg);
|
||||
--color-info: var(--state-info);
|
||||
--color-info-bg: var(--state-info-bg);
|
||||
--color-neutral-0: var(--neutral-0);
|
||||
--color-neutral-50: var(--neutral-50);
|
||||
--color-neutral-100: var(--neutral-100);
|
||||
--color-neutral-200: var(--neutral-200);
|
||||
--color-neutral-300: var(--neutral-300);
|
||||
--color-neutral-400: var(--neutral-400);
|
||||
--color-neutral-500: var(--neutral-500);
|
||||
--color-neutral-600: var(--neutral-600);
|
||||
--color-neutral-700: var(--neutral-700);
|
||||
--color-neutral-800: var(--neutral-800);
|
||||
--color-neutral-900: var(--neutral-900);
|
||||
--radius-sm: var(--radius-sm);
|
||||
--radius-md: var(--radius-md);
|
||||
--radius-lg: var(--radius-lg);
|
||||
}
|
||||
@layer base {
|
||||
body { background: var(--neutral-50); color: var(--neutral-900); }
|
||||
td, th { @apply break-words; word-break: break-all; word-break: auto-phrase; }
|
||||
th { @apply whitespace-nowrap; }
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
[data-icon] {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
-webkit-mask-size: contain;
|
||||
mask-size: contain;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-position: center;
|
||||
mask-position: center;
|
||||
background-color: currentColor;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen antialiased" style="font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: var(--line-height-normal); color: var(--neutral-900); background: var(--neutral-50);">
|
||||
<main class="flex h-screen overflow-hidden">
|
||||
|
||||
<!-- ====== Left Sidebar (240px) — Admin Nav ====== -->
|
||||
<aside class="shrink-0 flex flex-col h-full" style="width: var(--sidebar-width); background: var(--neutral-0); border-right: 1px solid var(--neutral-200);">
|
||||
|
||||
<!-- Logo Area -->
|
||||
<div class="flex flex-col px-4 shrink-0" style="border-bottom: 1px solid var(--neutral-200); padding-top: 12px; padding-bottom: 12px;">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="flex items-center justify-center rounded-lg shrink-0" style="width: 32px; height: 32px; background: var(--brand-primary);">
|
||||
<i data-lucide="headphones" style="width: 18px; height: 18px; color: var(--neutral-0);"></i>
|
||||
</div>
|
||||
<span class="font-semibold truncate" style="font-size: var(--font-size-lg); color: var(--neutral-900);">客服云</span>
|
||||
</div>
|
||||
<span class="inline-flex items-center self-start px-1.5 py-0.5 rounded mt-1.5 whitespace-nowrap" style="font-size: var(--font-size-xs); font-weight: 500; background: var(--brand-primary-light); color: var(--brand-primary);">管理端</span>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="flex-1 overflow-y-auto py-3 px-2">
|
||||
<ul class="flex flex-col gap-0.5">
|
||||
|
||||
<!-- 运营概览 -->
|
||||
<li>
|
||||
<a href="#" data-dom-id="admin-nav-dashboard" class="flex items-center gap-2.5 px-3 py-2 rounded-lg truncate" style="color: var(--neutral-600);">
|
||||
<i data-lucide="layout-dashboard" style="width: 18px; height: 18px; flex-shrink: 0;"></i>
|
||||
<span class="truncate" style="font-size: var(--font-size-base);">运营概览</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- 租户管理 -->
|
||||
<li>
|
||||
<a href="#" data-dom-id="admin-nav-tenants" class="flex items-center gap-2.5 px-3 py-2 rounded-lg truncate" style="color: var(--neutral-600);">
|
||||
<i data-lucide="building-2" style="width: 18px; height: 18px; flex-shrink: 0;"></i>
|
||||
<span class="truncate" style="font-size: var(--font-size-base);">租户管理</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- 套餐定价 -->
|
||||
<li>
|
||||
<a href="#" data-dom-id="admin-nav-plans" class="flex items-center gap-2.5 px-3 py-2 rounded-lg truncate" style="color: var(--neutral-600);">
|
||||
<i data-lucide="credit-card" style="width: 18px; height: 18px; flex-shrink: 0;"></i>
|
||||
<span class="truncate" style="font-size: var(--font-size-base);">套餐定价</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- 系统运维 — Active -->
|
||||
<li>
|
||||
<a href="#" data-dom-id="admin-nav-ops" class="flex items-center gap-2.5 px-3 py-2 rounded-lg font-medium truncate" style="background: var(--brand-primary-light); color: var(--brand-primary);">
|
||||
<i data-lucide="activity" style="width: 18px; height: 18px; flex-shrink: 0;"></i>
|
||||
<span class="truncate" style="font-size: var(--font-size-base);">系统运维</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Sidebar Footer: Admin User -->
|
||||
<div class="flex items-center gap-2.5 px-4 shrink-0" style="height: 52px; border-top: 1px solid var(--neutral-200);">
|
||||
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 32px; height: 32px; background: var(--brand-primary-light); color: var(--brand-primary); font-size: var(--font-size-sm); font-weight: 600;">
|
||||
管
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="truncate font-medium" style="font-size: var(--font-size-sm); color: var(--neutral-800);">系统管理员</div>
|
||||
<div class="truncate" style="font-size: var(--font-size-xs); color: var(--neutral-400);">超级管理员</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
<!-- ====== Main Content Area ====== -->
|
||||
<section class="flex-1 flex flex-col min-w-0 h-full overflow-y-auto" style="background: var(--neutral-50);">
|
||||
|
||||
<!-- Page Header -->
|
||||
<div class="shrink-0 px-6 pt-5 pb-4" style="background: var(--neutral-0); border-bottom: 1px solid var(--neutral-200);">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="min-w-0">
|
||||
<h1 class="font-semibold truncate" style="font-size: var(--font-size-2xl); color: var(--neutral-900); text-wrap: balance;">系统运维</h1>
|
||||
<p class="truncate mt-0.5" style="font-size: var(--font-size-sm); color: var(--neutral-500);">监控平台运行状态、查看操作日志、管理平台公告</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 shrink-0 ml-4">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg whitespace-nowrap" style="font-size: var(--font-size-xs); background: var(--state-success-bg); color: var(--state-success); border: 1px solid var(--state-success);">
|
||||
<span class="inline-block rounded-full" style="width: 6px; height: 6px; background: var(--state-success);"></span>
|
||||
系统正常运行
|
||||
</span>
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-400);">最后更新：2分钟前</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scrollable Content -->
|
||||
<div class="flex-1 overflow-y-auto px-6 py-5">
|
||||
|
||||
<!-- ====== Section 1: System Status Overview ====== -->
|
||||
<div class="rounded-lg p-5 mb-5" style="background: var(--neutral-0); border: 1px solid var(--neutral-200);">
|
||||
|
||||
<!-- Service Status -->
|
||||
<div class="flex items-center gap-1.5 mb-4">
|
||||
<i data-lucide="server" style="width: 16px; height: 16px; color: var(--brand-primary);"></i>
|
||||
<span class="font-semibold" style="font-size: var(--font-size-base); color: var(--neutral-800);">服务状态</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-x-6 gap-y-3 mb-5">
|
||||
<!-- API Service -->
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="inline-block rounded-full" style="width: 8px; height: 8px; background: var(--state-success);"></span>
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-700);">API服务</span>
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--state-success);">正常</span>
|
||||
</div>
|
||||
<!-- WebSocket -->
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="inline-block rounded-full" style="width: 8px; height: 8px; background: var(--state-success);"></span>
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-700);">WebSocket</span>
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--state-success);">正常</span>
|
||||
</div>
|
||||
<!-- Database -->
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="inline-block rounded-full" style="width: 8px; height: 8px; background: var(--state-success);"></span>
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-700);">数据库</span>
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--state-success);">正常</span>
|
||||
</div>
|
||||
<!-- Message Queue -->
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="inline-block rounded-full" style="width: 8px; height: 8px; background: var(--state-success);"></span>
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-700);">消息队列</span>
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--state-success);">正常</span>
|
||||
</div>
|
||||
<!-- CDN -->
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="inline-block rounded-full" style="width: 8px; height: 8px; background: var(--state-success);"></span>
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-700);">CDN</span>
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--state-success);">正常</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- System Load -->
|
||||
<div class="flex items-center gap-1.5 mb-3">
|
||||
<i data-lucide="cpu" style="width: 16px; height: 16px; color: var(--brand-primary);"></i>
|
||||
<span class="font-semibold" style="font-size: var(--font-size-base); color: var(--neutral-800);">系统负载</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
<!-- CPU 23% -->
|
||||
<div class="rounded-lg px-4 py-3" style="background: var(--neutral-50); border: 1px solid var(--neutral-100);">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-600);">CPU</span>
|
||||
<span class="font-semibold whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--state-success);">23%</span>
|
||||
</div>
|
||||
<div class="rounded-full overflow-hidden" style="height: 8px; background: var(--neutral-200);">
|
||||
<div class="rounded-full" style="width: 23%; height: 100%; background: linear-gradient(90deg, var(--state-success) 0%, var(--state-success) 50%, var(--state-warning) 80%, var(--state-error) 100%); clip-path: inset(0 77% 0 0);"></div>
|
||||
</div>
|
||||
<p class="truncate mt-1" style="font-size: var(--font-size-xs); color: var(--neutral-400);">8核 / 使用1.84核</p>
|
||||
</div>
|
||||
<!-- Memory 61% -->
|
||||
<div class="rounded-lg px-4 py-3" style="background: var(--neutral-50); border: 1px solid var(--neutral-100);">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-600);">内存</span>
|
||||
<span class="font-semibold whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--state-warning);">61%</span>
|
||||
</div>
|
||||
<div class="rounded-full overflow-hidden" style="height: 8px; background: var(--neutral-200);">
|
||||
<div class="rounded-full" style="width: 61%; height: 100%; background: linear-gradient(90deg, var(--state-success) 0%, var(--state-warning) 70%, var(--state-error) 100%); clip-path: inset(0 39% 0 0);"></div>
|
||||
</div>
|
||||
<p class="truncate mt-1" style="font-size: var(--font-size-xs); color: var(--neutral-400);">16GB / 已用9.76GB</p>
|
||||
</div>
|
||||
<!-- Disk 45% -->
|
||||
<div class="rounded-lg px-4 py-3" style="background: var(--neutral-50); border: 1px solid var(--neutral-100);">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-600);">磁盘</span>
|
||||
<span class="font-semibold whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--state-success);">45%</span>
|
||||
</div>
|
||||
<div class="rounded-full overflow-hidden" style="height: 8px; background: var(--neutral-200);">
|
||||
<div class="rounded-full" style="width: 45%; height: 100%; background: linear-gradient(90deg, var(--state-success) 0%, var(--state-success) 60%, var(--state-warning) 85%, var(--state-error) 100%); clip-path: inset(0 55% 0 0);"></div>
|
||||
</div>
|
||||
<p class="truncate mt-1" style="font-size: var(--font-size-xs); color: var(--neutral-400);">500GB / 已用225GB</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ====== Section 2: Monitoring Charts (2 columns) ====== -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-5 mb-5">
|
||||
|
||||
<!-- Left: API Request Trend (CSS Bar Chart) -->
|
||||
<div class="rounded-lg p-5" style="background: var(--neutral-0); border: 1px solid var(--neutral-200);">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-1.5 min-w-0">
|
||||
<i data-lucide="bar-chart-3" style="width: 16px; height: 16px; color: var(--brand-primary); flex-shrink: 0;"></i>
|
||||
<span class="font-semibold truncate" style="font-size: var(--font-size-base); color: var(--neutral-800);">API请求量趋势</span>
|
||||
</div>
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-400);">近24小时</span>
|
||||
</div>
|
||||
<!-- Chart Area -->
|
||||
<div class="flex items-end gap-1" style="height: 140px; padding-bottom: 24px; position: relative;">
|
||||
<!-- Y-axis label -->
|
||||
<div class="absolute left-0 top-0 bottom-6 flex flex-col justify-between" style="width: 36px;">
|
||||
<span class="whitespace-nowrap" style="font-size: 10px; color: var(--neutral-400);">10K</span>
|
||||
<span class="whitespace-nowrap" style="font-size: 10px; color: var(--neutral-400);">5K</span>
|
||||
<span class="whitespace-nowrap" style="font-size: 10px; color: var(--neutral-400);">0</span>
|
||||
</div>
|
||||
<!-- Bars -->
|
||||
<div class="flex items-end gap-1 flex-1" style="margin-left: 40px; height: calc(100% - 24px); border-bottom: 1px solid var(--neutral-200);">
|
||||
<!-- Hour 00-03 (low) -->
|
||||
<div class="flex-1 flex flex-col items-center gap-0.5" style="height: 100%;">
|
||||
<div class="w-full rounded-t" style="height: 15%; background: var(--brand-primary-light); min-height: 2px;"></div>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-0.5" style="height: 100%;">
|
||||
<div class="w-full rounded-t" style="height: 10%; background: var(--brand-primary-light); min-height: 2px;"></div>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-0.5" style="height: 100%;">
|
||||
<div class="w-full rounded-t" style="height: 8%; background: var(--brand-primary-light); min-height: 2px;"></div>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-0.5" style="height: 100%;">
|
||||
<div class="w-full rounded-t" style="height: 12%; background: var(--brand-primary-light); min-height: 2px;"></div>
|
||||
</div>
|
||||
<!-- Hour 04-07 (rising) -->
|
||||
<div class="flex-1 flex flex-col items-center gap-0.5" style="height: 100%;">
|
||||
<div class="w-full rounded-t" style="height: 20%; background: var(--brand-primary-light); min-height: 2px;"></div>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-0.5" style="height: 100%;">
|
||||
<div class="w-full rounded-t" style="height: 35%; background: var(--brand-primary-light); min-height: 2px;"></div>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-0.5" style="height: 100%;">
|
||||
<div class="w-full rounded-t" style="height: 55%; background: var(--brand-primary); min-height: 2px;"></div>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-0.5" style="height: 100%;">
|
||||
<div class="w-full rounded-t" style="height: 72%; background: var(--brand-primary); min-height: 2px;"></div>
|
||||
</div>
|
||||
<!-- Hour 08-11 (peak) -->
|
||||
<div class="flex-1 flex flex-col items-center gap-0.5" style="height: 100%;">
|
||||
<div class="w-full rounded-t" style="height: 88%; background: var(--brand-primary); min-height: 2px;"></div>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-0.5" style="height: 100%;">
|
||||
<div class="w-full rounded-t" style="height: 95%; background: var(--brand-primary); min-height: 2px;"></div>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-0.5" style="height: 100%;">
|
||||
<div class="w-full rounded-t" style="height: 100%; background: var(--brand-primary); min-height: 2px;"></div>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-0.5" style="height: 100%;">
|
||||
<div class="w-full rounded-t" style="height: 85%; background: var(--brand-primary); min-height: 2px;"></div>
|
||||
</div>
|
||||
<!-- Hour 12-15 (plateau) -->
|
||||
<div class="flex-1 flex flex-col items-center gap-0.5" style="height: 100%;">
|
||||
<div class="w-full rounded-t" style="height: 78%; background: var(--brand-primary); min-height: 2px;"></div>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-0.5" style="height: 100%;">
|
||||
<div class="w-full rounded-t" style="height: 82%; background: var(--brand-primary); min-height: 2px;"></div>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-0.5" style="height: 100%;">
|
||||
<div class="w-full rounded-t" style="height: 90%; background: var(--brand-primary); min-height: 2px;"></div>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-0.5" style="height: 100%;">
|
||||
<div class="w-full rounded-t" style="height: 86%; background: var(--brand-primary); min-height: 2px;"></div>
|
||||
</div>
|
||||
<!-- Hour 16-19 (declining) -->
|
||||
<div class="flex-1 flex flex-col items-center gap-0.5" style="height: 100%;">
|
||||
<div class="w-full rounded-t" style="height: 70%; background: var(--brand-primary); min-height: 2px;"></div>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-0.5" style="height: 100%;">
|
||||
<div class="w-full rounded-t" style="height: 58%; background: var(--brand-primary-light); min-height: 2px;"></div>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-0.5" style="height: 100%;">
|
||||
<div class="w-full rounded-t" style="height: 45%; background: var(--brand-primary-light); min-height: 2px;"></div>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-0.5" style="height: 100%;">
|
||||
<div class="w-full rounded-t" style="height: 35%; background: var(--brand-primary-light); min-height: 2px;"></div>
|
||||
</div>
|
||||
<!-- Hour 20-23 (low) -->
|
||||
<div class="flex-1 flex flex-col items-center gap-0.5" style="height: 100%;">
|
||||
<div class="w-full rounded-t" style="height: 25%; background: var(--brand-primary-light); min-height: 2px;"></div>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-0.5" style="height: 100%;">
|
||||
<div class="w-full rounded-t" style="height: 18%; background: var(--brand-primary-light); min-height: 2px;"></div>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-0.5" style="height: 100%;">
|
||||
<div class="w-full rounded-t" style="height: 14%; background: var(--brand-primary-light); min-height: 2px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- X-axis labels -->
|
||||
<div class="absolute bottom-0 left-0 right-0 flex justify-between" style="padding-left: 40px; height: 20px;">
|
||||
<span class="whitespace-nowrap" style="font-size: 10px; color: var(--neutral-400);">00</span>
|
||||
<span class="whitespace-nowrap" style="font-size: 10px; color: var(--neutral-400);">06</span>
|
||||
<span class="whitespace-nowrap" style="font-size: 10px; color: var(--neutral-400);">12</span>
|
||||
<span class="whitespace-nowrap" style="font-size: 10px; color: var(--neutral-400);">18</span>
|
||||
<span class="whitespace-nowrap" style="font-size: 10px; color: var(--neutral-400);">23</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Error Rate Monitor (CSS Line Chart) -->
|
||||
<div class="rounded-lg p-5" style="background: var(--neutral-0); border: 1px solid var(--neutral-200);">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-1.5 min-w-0">
|
||||
<i data-lucide="alert-triangle" style="width: 16px; height: 16px; color: var(--state-warning); flex-shrink: 0;"></i>
|
||||
<span class="font-semibold truncate" style="font-size: var(--font-size-base); color: var(--neutral-800);">错误率监控</span>
|
||||
</div>
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-400);">近24小时</span>
|
||||
</div>
|
||||
<!-- Chart Area -->
|
||||
<div style="height: 140px; padding-bottom: 24px; position: relative;">
|
||||
<!-- Y-axis label -->
|
||||
<div class="absolute left-0 top-0 bottom-6 flex flex-col justify-between" style="width: 36px;">
|
||||
<span class="whitespace-nowrap" style="font-size: 10px; color: var(--neutral-400);">5%</span>
|
||||
<span class="whitespace-nowrap" style="font-size: 10px; color: var(--neutral-400);">2.5%</span>
|
||||
<span class="whitespace-nowrap" style="font-size: 10px; color: var(--neutral-400);">0%</span>
|
||||
</div>
|
||||
<!-- SVG Line Chart -->
|
||||
<svg class="absolute" style="left: 40px; top: 0; right: 0; bottom: 24px; width: calc(100% - 40px); height: calc(100% - 24px);" viewBox="0 0 200 100" preserveAspectRatio="none">
|
||||
<!-- Warning threshold line -->
|
||||
<line x1="0" y1="40" x2="200" y2="40" stroke="var(--state-warning)" stroke-width="0.5" stroke-dasharray="3,3" opacity="0.5"/>
|
||||
<!-- Area fill -->
|
||||
<polygon points="0,70 8,72 16,68 24,65 32,55 40,50 48,45 56,35 64,20 72,30 80,25 88,40 96,35 104,45 112,42 120,38 128,50 136,55 144,60 152,58 160,65 168,68 176,72 184,75 192,78 200,80 200,100 0,100" fill="var(--state-error)" opacity="0.08"/>
|
||||
<!-- Line -->
|
||||
<polyline points="0,70 8,72 16,68 24,65 32,55 40,50 48,45 56,35 64,20 72,30 80,25 88,40 96,35 104,45 112,42 120,38 128,50 136,55 144,60 152,58 160,65 168,68 176,72 184,75 192,78 200,80" fill="none" stroke="var(--state-error)" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round"/>
|
||||
<!-- Data points -->
|
||||
<circle cx="64" cy="20" r="2.5" fill="var(--state-error)"/>
|
||||
<circle cx="80" cy="25" r="2" fill="var(--state-error)"/>
|
||||
</svg>
|
||||
<!-- X-axis labels -->
|
||||
<div class="absolute bottom-0 left-0 right-0 flex justify-between" style="padding-left: 40px; height: 20px;">
|
||||
<span class="whitespace-nowrap" style="font-size: 10px; color: var(--neutral-400);">00</span>
|
||||
<span class="whitespace-nowrap" style="font-size: 10px; color: var(--neutral-400);">06</span>
|
||||
<span class="whitespace-nowrap" style="font-size: 10px; color: var(--neutral-400);">12</span>
|
||||
<span class="whitespace-nowrap" style="font-size: 10px; color: var(--neutral-400);">18</span>
|
||||
<span class="whitespace-nowrap" style="font-size: 10px; color: var(--neutral-400);">23</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ====== Section 3: Operation Logs Table ====== -->
|
||||
<div class="rounded-lg mb-5 overflow-hidden" style="background: var(--neutral-0); border: 1px solid var(--neutral-200);">
|
||||
<div class="flex items-center justify-between px-5 py-3.5" style="border-bottom: 1px solid var(--neutral-200);">
|
||||
<div class="flex items-center gap-1.5 min-w-0">
|
||||
<i data-lucide="scroll-text" style="width: 16px; height: 16px; color: var(--brand-primary); flex-shrink: 0;"></i>
|
||||
<span class="font-semibold truncate" style="font-size: var(--font-size-base); color: var(--neutral-800);">操作日志</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 shrink-0 ml-4">
|
||||
<div class="flex items-center rounded-lg px-2.5" style="height: 32px; background: var(--neutral-100); border: 1px solid var(--neutral-200);">
|
||||
<i data-lucide="search" style="width: 14px; height: 14px; flex-shrink: 0; color: var(--neutral-400); margin-right: 6px;"></i>
|
||||
<input type="text" placeholder="搜索日志..." class="bg-transparent border-none outline-none" style="font-size: var(--font-size-sm); color: var(--neutral-900); width: 120px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full" style="min-width: 600px;">
|
||||
<thead>
|
||||
<tr style="background: var(--neutral-50);">
|
||||
<th class="px-4 py-2.5 text-left font-medium" style="font-size: var(--font-size-xs); color: var(--neutral-500); min-width: 140px;">时间</th>
|
||||
<th class="px-4 py-2.5 text-left font-medium" style="font-size: var(--font-size-xs); color: var(--neutral-500); min-width: 70px;">级别</th>
|
||||
<th class="px-4 py-2.5 text-left font-medium" style="font-size: var(--font-size-xs); color: var(--neutral-500); min-width: 90px;">模块</th>
|
||||
<th class="px-4 py-2.5 text-left font-medium" style="font-size: var(--font-size-xs); color: var(--neutral-500);">操作内容</th>
|
||||
<th class="px-4 py-2.5 text-left font-medium" style="font-size: var(--font-size-xs); color: var(--neutral-500); min-width: 70px;">操作人</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- Row 1 -->
|
||||
<tr style="border-top: 1px solid var(--neutral-100);">
|
||||
<td class="px-4 py-2.5 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-600);">2026-07-09 14:32:18</td>
|
||||
<td class="px-4 py-2.5">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded whitespace-nowrap" style="font-size: var(--font-size-xs); background: var(--state-success-bg); color: var(--state-success);">信息</span>
|
||||
</td>
|
||||
<td class="px-4 py-2.5 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-700);">API网关</td>
|
||||
<td class="px-4 py-2.5 truncate" style="font-size: var(--font-size-sm); color: var(--neutral-700);">健康检查通过，所有节点正常响应</td>
|
||||
<td class="px-4 py-2.5 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-600);">系统</td>
|
||||
</tr>
|
||||
<!-- Row 2 -->
|
||||
<tr style="border-top: 1px solid var(--neutral-100);">
|
||||
<td class="px-4 py-2.5 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-600);">2026-07-09 14:15:03</td>
|
||||
<td class="px-4 py-2.5">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded whitespace-nowrap" style="font-size: var(--font-size-xs); background: var(--state-warning-bg); color: var(--state-warning);">警告</span>
|
||||
</td>
|
||||
<td class="px-4 py-2.5 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-700);">消息队列</td>
|
||||
<td class="px-4 py-2.5 truncate" style="font-size: var(--font-size-sm); color: var(--neutral-700);">队列积压超过阈值，当前待处理消息 12,580 条</td>
|
||||
<td class="px-4 py-2.5 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-600);">系统</td>
|
||||
</tr>
|
||||
<!-- Row 3 -->
|
||||
<tr style="border-top: 1px solid var(--neutral-100);">
|
||||
<td class="px-4 py-2.5 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-600);">2026-07-09 13:58:42</td>
|
||||
<td class="px-4 py-2.5">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded whitespace-nowrap" style="font-size: var(--font-size-xs); background: var(--state-error-bg); color: var(--state-error);">错误</span>
|
||||
</td>
|
||||
<td class="px-4 py-2.5 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-700);">数据库</td>
|
||||
<td class="px-4 py-2.5 truncate" style="font-size: var(--font-size-sm); color: var(--neutral-700);">慢查询告警：会话表查询耗时 3.2s，已触发索引优化</td>
|
||||
<td class="px-4 py-2.5 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-600);">DBA</td>
|
||||
</tr>
|
||||
<!-- Row 4 -->
|
||||
<tr style="border-top: 1px solid var(--neutral-100);">
|
||||
<td class="px-4 py-2.5 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-600);">2026-07-09 13:40:11</td>
|
||||
<td class="px-4 py-2.5">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded whitespace-nowrap" style="font-size: var(--font-size-xs); background: var(--state-success-bg); color: var(--state-success);">信息</span>
|
||||
</td>
|
||||
<td class="px-4 py-2.5 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-700);">CDN</td>
|
||||
<td class="px-4 py-2.5 truncate" style="font-size: var(--font-size-sm); color: var(--neutral-700);">CDN缓存刷新完成，共刷新 342 个资源节点</td>
|
||||
<td class="px-4 py-2.5 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-600);">运维</td>
|
||||
</tr>
|
||||
<!-- Row 5 -->
|
||||
<tr style="border-top: 1px solid var(--neutral-100);">
|
||||
<td class="px-4 py-2.5 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-600);">2026-07-09 12:20:55</td>
|
||||
<td class="px-4 py-2.5">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded whitespace-nowrap" style="font-size: var(--font-size-xs); background: var(--state-success-bg); color: var(--state-success);">信息</span>
|
||||
</td>
|
||||
<td class="px-4 py-2.5 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-700);">系统</td>
|
||||
<td class="px-4 py-2.5 truncate" style="font-size: var(--font-size-sm); color: var(--neutral-700);">定时备份任务执行成功，备份文件大小 2.3GB</td>
|
||||
<td class="px-4 py-2.5 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-600);">系统</td>
|
||||
</tr>
|
||||
<!-- Row 6 -->
|
||||
<tr style="border-top: 1px solid var(--neutral-100);">
|
||||
<td class="px-4 py-2.5 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-600);">2026-07-09 11:05:33</td>
|
||||
<td class="px-4 py-2.5">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded whitespace-nowrap" style="font-size: var(--font-size-xs); background: var(--state-warning-bg); color: var(--state-warning);">警告</span>
|
||||
</td>
|
||||
<td class="px-4 py-2.5 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-700);">WebSocket</td>
|
||||
<td class="px-4 py-2.5 truncate" style="font-size: var(--font-size-sm); color: var(--neutral-700);">ws-node-03 连接数接近上限，当前活跃 4,892 / 5,000</td>
|
||||
<td class="px-4 py-2.5 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-600);">系统</td>
|
||||
</tr>
|
||||
<!-- Row 7 -->
|
||||
<tr style="border-top: 1px solid var(--neutral-100);">
|
||||
<td class="px-4 py-2.5 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-600);">2026-07-09 10:30:07</td>
|
||||
<td class="px-4 py-2.5">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded whitespace-nowrap" style="font-size: var(--font-size-xs); background: var(--state-success-bg); color: var(--state-success);">信息</span>
|
||||
</td>
|
||||
<td class="px-4 py-2.5 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-700);">租户管理</td>
|
||||
<td class="px-4 py-2.5 truncate" style="font-size: var(--font-size-sm); color: var(--neutral-700);">新租户「星辰科技」注册审核通过并自动开通</td>
|
||||
<td class="px-4 py-2.5 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-600);">管理员</td>
|
||||
</tr>
|
||||
<!-- Row 8 -->
|
||||
<tr style="border-top: 1px solid var(--neutral-100);">
|
||||
<td class="px-4 py-2.5 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-600);">2026-07-09 09:15:22</td>
|
||||
<td class="px-4 py-2.5">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded whitespace-nowrap" style="font-size: var(--font-size-xs); background: var(--state-success-bg); color: var(--state-success);">信息</span>
|
||||
</td>
|
||||
<td class="px-4 py-2.5 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-700);">系统</td>
|
||||
<td class="px-4 py-2.5 truncate" style="font-size: var(--font-size-sm); color: var(--neutral-700);">SSL证书自动续期成功，有效期至 2027-07-09</td>
|
||||
<td class="px-4 py-2.5 whitespace-nowrap" style="font-size: var(--font-size-sm); color: var(--neutral-600);">系统</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ====== Section 4: Platform Announcement Management ====== -->
|
||||
<div class="rounded-lg overflow-hidden" style="background: var(--neutral-0); border: 1px solid var(--neutral-200);">
|
||||
<div class="flex items-center justify-between px-5 py-3.5" style="border-bottom: 1px solid var(--neutral-200);">
|
||||
<div class="flex items-center gap-1.5 min-w-0">
|
||||
<i data-lucide="megaphone" style="width: 16px; height: 16px; color: var(--brand-primary); flex-shrink: 0;"></i>
|
||||
<span class="font-semibold truncate" style="font-size: var(--font-size-base); color: var(--neutral-800);">平台公告</span>
|
||||
</div>
|
||||
<button class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg whitespace-nowrap shrink-0" style="font-size: var(--font-size-sm); font-weight: 500; background: var(--brand-primary); color: var(--neutral-0);">
|
||||
<i data-lucide="plus" style="width: 14px; height: 14px;"></i>
|
||||
发布公告
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Announcement 1 -->
|
||||
<div class="flex items-start gap-4 px-5 py-4" style="border-bottom: 1px solid var(--neutral-100);">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="truncate font-medium" style="font-size: var(--font-size-sm); color: var(--neutral-800);">关于7月10日凌晨系统维护的通知</span>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded whitespace-nowrap shrink-0" style="font-size: var(--font-size-xs); background: var(--state-success-bg); color: var(--state-success);">已发布</span>
|
||||
</div>
|
||||
<p class="line-clamp-2 mb-2" style="font-size: var(--font-size-sm); color: var(--neutral-500);">为提升系统性能与稳定性，平台将于2026年7月10日凌晨02:00-04:00进行系统维护升级，届时在线客服服务将暂停约2小时，请各租户提前做好安排。</p>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-400);">2026-07-09 10:00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 shrink-0">
|
||||
<button class="flex items-center justify-center rounded-md" style="width: 28px; height: 28px; color: var(--neutral-400);" title="编辑">
|
||||
<i data-lucide="pencil" style="width: 14px; height: 14px;"></i>
|
||||
</button>
|
||||
<button class="flex items-center justify-center rounded-md" style="width: 28px; height: 28px; color: var(--neutral-400);" title="撤回">
|
||||
<i data-lucide="undo-2" style="width: 14px; height: 14px;"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Announcement 2 -->
|
||||
<div class="flex items-start gap-4 px-5 py-4">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="truncate font-medium" style="font-size: var(--font-size-sm); color: var(--neutral-800);">新版知识库功能上线公告</span>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded whitespace-nowrap shrink-0" style="font-size: var(--font-size-xs); background: var(--state-warning-bg); color: var(--state-warning);">草稿</span>
|
||||
</div>
|
||||
<p class="line-clamp-2 mb-2" style="font-size: var(--font-size-sm); color: var(--neutral-500);">全新知识库管理模块已开发完成，支持富文本编辑、自动标签分类、智能搜索推荐等功能，预计下周正式发布，欢迎各租户提前体验反馈。</p>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-400);">2026-07-08 16:30</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 shrink-0">
|
||||
<button class="flex items-center justify-center rounded-md" style="width: 28px; height: 28px; color: var(--neutral-400);" title="编辑">
|
||||
<i data-lucide="pencil" style="width: 14px; height: 14px;"></i>
|
||||
</button>
|
||||
<button class="flex items-center justify-center rounded-md" style="width: 28px; height: 28px; color: var(--neutral-400);" title="撤回">
|
||||
<i data-lucide="undo-2" style="width: 14px; height: 14px;"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</main>
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,469 @@
|
||||
<!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">
|
||||
/* Online Customer Service System — Brand CSS */
|
||||
/* Professional & Efficient Style — Cool Blue-Gray */
|
||||
|
||||
: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 (static: alpha <= 0.05; floating layers only may exceed) === */
|
||||
--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 mode */
|
||||
.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>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.3.1/dist/index.global.js"></script>
|
||||
<script src="https://unpkg.com/lucide@1.8.0/dist/umd/lucide.min.js"></script>
|
||||
<style type="text/tailwindcss">
|
||||
@theme inline {
|
||||
--color-primary: var(--brand-primary);
|
||||
--color-primary-foreground: var(--neutral-0);
|
||||
--color-background: var(--neutral-0);
|
||||
--color-foreground: var(--neutral-900);
|
||||
--color-card: var(--neutral-0);
|
||||
--color-card-foreground: var(--neutral-900);
|
||||
--color-muted: var(--neutral-100);
|
||||
--color-muted-foreground: var(--neutral-500);
|
||||
--color-accent: var(--neutral-100);
|
||||
--color-accent-foreground: var(--neutral-900);
|
||||
--color-border: var(--neutral-200);
|
||||
--color-input: var(--neutral-200);
|
||||
--color-ring: var(--brand-primary);
|
||||
--color-secondary: var(--neutral-100);
|
||||
--color-secondary-foreground: var(--neutral-900);
|
||||
--color-destructive: var(--state-error);
|
||||
--color-destructive-foreground: var(--neutral-0);
|
||||
--radius-sm: var(--radius-sm);
|
||||
--radius-md: var(--radius-md);
|
||||
--radius-lg: var(--radius-lg);
|
||||
}
|
||||
@layer base {
|
||||
body { background: var(--neutral-0); color: var(--neutral-900); }
|
||||
td, th { @apply break-words; word-break: break-all; word-break: auto-phrase; }
|
||||
th { @apply whitespace-nowrap; }
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
[data-icon] {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
-webkit-mask-size: contain;
|
||||
mask-size: contain;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-position: center;
|
||||
mask-position: center;
|
||||
background-color: currentColor;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen font-sans antialiased" style="font-family: var(--font-family-base);">
|
||||
<main>
|
||||
<!-- Admin Layout: Sidebar + Main Content -->
|
||||
<div class="flex min-h-screen">
|
||||
|
||||
<!-- Left Sidebar (240px) -->
|
||||
<aside class="w-[240px] shrink-0 border-r flex flex-col" style="border-color: var(--neutral-200); background: var(--neutral-50);">
|
||||
<!-- Logo Area -->
|
||||
<div class="h-[var(--header-height)] flex items-center px-5 border-b shrink-0" style="border-color: var(--neutral-200);">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<div class="w-7 h-7 rounded-md shrink-0 flex items-center justify-center" style="background: var(--brand-primary);">
|
||||
<i data-lucide="message-square" class="w-4 h-4" style="color: var(--neutral-0);"></i>
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<span class="text-sm font-semibold truncate block" style="color: var(--neutral-900);">客服云</span>
|
||||
<span class="text-[10px] truncate block" style="color: var(--neutral-500);">运营管理</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar Label -->
|
||||
<div class="px-5 pt-5 pb-2">
|
||||
<span class="text-[11px] font-medium uppercase tracking-wider" style="color: var(--neutral-400);">管理端</span>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="flex-1 px-3 space-y-1">
|
||||
<a href="#" id="admin-nav-dashboard" class="flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors" style="color: var(--neutral-600); background: transparent;">
|
||||
<i data-lucide="layout-dashboard" class="w-4 h-4 shrink-0"></i>
|
||||
<span class="truncate">运营概览</span>
|
||||
</a>
|
||||
<a href="#" id="admin-nav-tenants" class="flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors" style="color: var(--neutral-600); background: transparent;">
|
||||
<i data-lucide="building-2" class="w-4 h-4 shrink-0"></i>
|
||||
<span class="truncate">租户管理</span>
|
||||
</a>
|
||||
<a href="#" id="admin-nav-plans" class="flex items-center gap-3 px-3 py-2 rounded-md text-sm font-semibold transition-colors" style="color: var(--brand-primary); background: var(--brand-primary-light);">
|
||||
<i data-lucide="credit-card" class="w-4 h-4 shrink-0"></i>
|
||||
<span class="truncate">套餐定价</span>
|
||||
</a>
|
||||
<a href="#" id="admin-nav-ops" class="flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors" style="color: var(--neutral-600); background: transparent;">
|
||||
<i data-lucide="settings" class="w-4 h-4 shrink-0"></i>
|
||||
<span class="truncate">系统运维</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<!-- Bottom User Area -->
|
||||
<div class="px-5 py-4 border-t shrink-0" style="border-color: var(--neutral-200);">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full shrink-0 flex items-center justify-center" style="background: var(--neutral-200); color: var(--neutral-600);">
|
||||
<i data-lucide="user" class="w-4 h-4"></i>
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-medium truncate" style="color: var(--neutral-800);">系统管理员</p>
|
||||
<p class="text-xs truncate" style="color: var(--neutral-400);">admin@kefu.cloud</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Right Main Content Area -->
|
||||
<div class="flex-1 min-w-0 flex flex-col">
|
||||
|
||||
<!-- Top Header Bar -->
|
||||
<header class="h-[var(--header-height)] flex items-center justify-between px-8 border-b shrink-0" style="border-color: var(--neutral-200);">
|
||||
<h1 class="text-xl font-bold truncate" style="color: var(--neutral-900);">套餐管理</h1>
|
||||
<div class="flex items-center gap-3 shrink-0">
|
||||
<button class="inline-flex items-center justify-center gap-2 px-4 py-2 rounded-md text-sm font-medium whitespace-nowrap transition-colors" style="background: var(--brand-primary); color: var(--neutral-0);">
|
||||
<i data-lucide="plus" class="w-4 h-4"></i>
|
||||
<span>新建套餐</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Content Body -->
|
||||
<div class="flex-1 overflow-y-auto p-8">
|
||||
|
||||
<!-- Plan Cards Grid (3 Columns) -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
|
||||
|
||||
<!-- Basic Plan Card -->
|
||||
<div class="rounded-lg border p-6 flex flex-col" style="border-color: var(--neutral-200); background: var(--neutral-0); box-shadow: var(--shadow-sm);">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-lg font-bold truncate" style="color: var(--neutral-900);">基础版</h2>
|
||||
<span class="inline-flex items-center justify-center px-2 py-0.5 rounded-md text-xs font-medium whitespace-nowrap" style="background: var(--state-success-bg); color: var(--state-success);">在售</span>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<span class="text-4xl font-bold" style="color: var(--neutral-900);">¥299</span>
|
||||
<span class="text-sm ml-1" style="color: var(--neutral-500);">/月</span>
|
||||
</div>
|
||||
<ul class="space-y-3 flex-1 mb-6">
|
||||
<li class="flex items-start gap-2 text-sm" style="color: var(--neutral-700);">
|
||||
<i data-lucide="check" class="w-4 h-4 shrink-0 mt-0.5" style="color: var(--state-success);"></i>
|
||||
<span>坐席数量：<strong class="font-semibold">5 个</strong></span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2 text-sm" style="color: var(--neutral-700);">
|
||||
<i data-lucide="check" class="w-4 h-4 shrink-0 mt-0.5" style="color: var(--state-success);"></i>
|
||||
<span>对话记录保存：<strong class="font-semibold">30 天</strong></span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2 text-sm" style="color: var(--neutral-700);">
|
||||
<i data-lucide="check" class="w-4 h-4 shrink-0 mt-0.5" style="color: var(--state-success);"></i>
|
||||
<span>知识库容量：<strong class="font-semibold">100 条</strong></span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2 text-sm" style="color: var(--neutral-700);">
|
||||
<i data-lucide="check" class="w-4 h-4 shrink-0 mt-0.5" style="color: var(--state-success);"></i>
|
||||
<span>数据统计报表：<strong class="font-semibold">基础</strong></span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2 text-sm" style="color: var(--neutral-400);">
|
||||
<i data-lucide="x" class="w-4 h-4 shrink-0 mt-0.5" style="color: var(--neutral-300);"></i>
|
||||
<span>API 接口</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2 text-sm" style="color: var(--neutral-700);">
|
||||
<i data-lucide="check" class="w-4 h-4 shrink-0 mt-0.5" style="color: var(--state-success);"></i>
|
||||
<span>多渠道接入：<strong class="font-semibold">网页</strong></span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2 text-sm" style="color: var(--neutral-400);">
|
||||
<i data-lucide="x" class="w-4 h-4 shrink-0 mt-0.5" style="color: var(--neutral-300);"></i>
|
||||
<span>自定义品牌</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2 text-sm" style="color: var(--neutral-400);">
|
||||
<i data-lucide="x" class="w-4 h-4 shrink-0 mt-0.5" style="color: var(--neutral-300);"></i>
|
||||
<span>专属客服支持</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex items-center justify-between pt-4 border-t" style="border-color: var(--neutral-200);">
|
||||
<span class="text-sm" style="color: var(--neutral-500);">
|
||||
<i data-lucide="users" class="w-4 h-4 inline-block align-middle mr-1" style="vertical-align: -2px;"></i>
|
||||
128 个租户
|
||||
</span>
|
||||
<button class="inline-flex items-center justify-center px-3 py-1.5 rounded-md text-sm font-medium whitespace-nowrap border transition-colors" style="border-color: var(--neutral-200); color: var(--neutral-700); background: var(--neutral-0);">
|
||||
编辑
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Professional Plan Card (Recommended) -->
|
||||
<div class="rounded-lg border-2 p-6 flex flex-col relative" style="border-color: var(--brand-primary); background: var(--neutral-0); box-shadow: var(--shadow-lg);">
|
||||
<!-- Recommended Badge (brand blue triangle at top-right) -->
|
||||
<div class="absolute top-0 right-0" style="width: 0; height: 0; border-left: 48px solid transparent; border-top: 48px solid var(--brand-primary);"></div>
|
||||
<span class="absolute top-2 right-2 text-[10px] font-semibold text-white whitespace-nowrap" style="transform: rotate(45deg); transform-origin: center;">推荐</span>
|
||||
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-lg font-bold truncate" style="color: var(--neutral-900);">专业版</h2>
|
||||
<span class="inline-flex items-center justify-center px-2 py-0.5 rounded-md text-xs font-medium whitespace-nowrap" style="background: var(--state-success-bg); color: var(--state-success);">在售</span>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<span class="text-4xl font-bold" style="color: var(--brand-primary);">¥699</span>
|
||||
<span class="text-sm ml-1" style="color: var(--neutral-500);">/月</span>
|
||||
</div>
|
||||
<ul class="space-y-3 flex-1 mb-6">
|
||||
<li class="flex items-start gap-2 text-sm" style="color: var(--neutral-700);">
|
||||
<i data-lucide="check" class="w-4 h-4 shrink-0 mt-0.5" style="color: var(--brand-primary);"></i>
|
||||
<span>坐席数量：<strong class="font-semibold">20 个</strong></span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2 text-sm" style="color: var(--neutral-700);">
|
||||
<i data-lucide="check" class="w-4 h-4 shrink-0 mt-0.5" style="color: var(--brand-primary);"></i>
|
||||
<span>对话记录保存：<strong class="font-semibold">90 天</strong></span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2 text-sm" style="color: var(--neutral-700);">
|
||||
<i data-lucide="check" class="w-4 h-4 shrink-0 mt-0.5" style="color: var(--brand-primary);"></i>
|
||||
<span>知识库容量：<strong class="font-semibold">1000 条</strong></span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2 text-sm" style="color: var(--neutral-700);">
|
||||
<i data-lucide="check" class="w-4 h-4 shrink-0 mt-0.5" style="color: var(--brand-primary);"></i>
|
||||
<span>数据统计报表：<strong class="font-semibold">高级</strong></span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2 text-sm" style="color: var(--neutral-700);">
|
||||
<i data-lucide="check" class="w-4 h-4 shrink-0 mt-0.5" style="color: var(--brand-primary);"></i>
|
||||
<span>API 接口</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2 text-sm" style="color: var(--neutral-700);">
|
||||
<i data-lucide="check" class="w-4 h-4 shrink-0 mt-0.5" style="color: var(--brand-primary);"></i>
|
||||
<span>多渠道接入：<strong class="font-semibold">网页 + 微信</strong></span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2 text-sm" style="color: var(--neutral-400);">
|
||||
<i data-lucide="x" class="w-4 h-4 shrink-0 mt-0.5" style="color: var(--neutral-300);"></i>
|
||||
<span>自定义品牌</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2 text-sm" style="color: var(--neutral-700);">
|
||||
<i data-lucide="check" class="w-4 h-4 shrink-0 mt-0.5" style="color: var(--brand-primary);"></i>
|
||||
<span>专属客服支持：<strong class="font-semibold">工作日</strong></span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex items-center justify-between pt-4 border-t" style="border-color: var(--brand-primary-light);">
|
||||
<span class="text-sm" style="color: var(--neutral-500);">
|
||||
<i data-lucide="users" class="w-4 h-4 inline-block align-middle mr-1" style="vertical-align: -2px;"></i>
|
||||
256 个租户
|
||||
</span>
|
||||
<button class="inline-flex items-center justify-center px-3 py-1.5 rounded-md text-sm font-medium whitespace-nowrap transition-colors" style="background: var(--brand-primary); color: var(--neutral-0);">
|
||||
编辑
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Enterprise Plan Card -->
|
||||
<div class="rounded-lg border p-6 flex flex-col" style="border-color: var(--neutral-200); background: var(--neutral-0); box-shadow: var(--shadow-sm);">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-lg font-bold truncate" style="color: var(--neutral-900);">企业版</h2>
|
||||
<span class="inline-flex items-center justify-center px-2 py-0.5 rounded-md text-xs font-medium whitespace-nowrap" style="background: var(--neutral-100); color: var(--neutral-500);">已下架</span>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<span class="text-4xl font-bold" style="color: var(--neutral-900);">¥1999</span>
|
||||
<span class="text-sm ml-1" style="color: var(--neutral-500);">/月</span>
|
||||
</div>
|
||||
<ul class="space-y-3 flex-1 mb-6">
|
||||
<li class="flex items-start gap-2 text-sm" style="color: var(--neutral-700);">
|
||||
<i data-lucide="check" class="w-4 h-4 shrink-0 mt-0.5" style="color: var(--state-success);"></i>
|
||||
<span>坐席数量：<strong class="font-semibold">无限</strong></span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2 text-sm" style="color: var(--neutral-700);">
|
||||
<i data-lucide="check" class="w-4 h-4 shrink-0 mt-0.5" style="color: var(--state-success);"></i>
|
||||
<span>对话记录保存：<strong class="font-semibold">永久</strong></span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2 text-sm" style="color: var(--neutral-700);">
|
||||
<i data-lucide="check" class="w-4 h-4 shrink-0 mt-0.5" style="color: var(--state-success);"></i>
|
||||
<span>知识库容量：<strong class="font-semibold">无限</strong></span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2 text-sm" style="color: var(--neutral-700);">
|
||||
<i data-lucide="check" class="w-4 h-4 shrink-0 mt-0.5" style="color: var(--state-success);"></i>
|
||||
<span>数据统计报表：<strong class="font-semibold">自定义</strong></span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2 text-sm" style="color: var(--neutral-700);">
|
||||
<i data-lucide="check" class="w-4 h-4 shrink-0 mt-0.5" style="color: var(--state-success);"></i>
|
||||
<span>API 接口</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2 text-sm" style="color: var(--neutral-700);">
|
||||
<i data-lucide="check" class="w-4 h-4 shrink-0 mt-0.5" style="color: var(--state-success);"></i>
|
||||
<span>多渠道接入：<strong class="font-semibold">全渠道</strong></span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2 text-sm" style="color: var(--neutral-700);">
|
||||
<i data-lucide="check" class="w-4 h-4 shrink-0 mt-0.5" style="color: var(--state-success);"></i>
|
||||
<span>自定义品牌</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2 text-sm" style="color: var(--neutral-700);">
|
||||
<i data-lucide="check" class="w-4 h-4 shrink-0 mt-0.5" style="color: var(--state-success);"></i>
|
||||
<span>专属客服支持：<strong class="font-semibold">7×24</strong></span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex items-center justify-between pt-4 border-t" style="border-color: var(--neutral-200);">
|
||||
<span class="text-sm" style="color: var(--neutral-500);">
|
||||
<i data-lucide="users" class="w-4 h-4 inline-block align-middle mr-1" style="vertical-align: -2px;"></i>
|
||||
42 个租户
|
||||
</span>
|
||||
<button class="inline-flex items-center justify-center px-3 py-1.5 rounded-md text-sm font-medium whitespace-nowrap border transition-colors" style="border-color: var(--neutral-200); color: var(--neutral-700); background: var(--neutral-0);">
|
||||
编辑
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Pricing Rules Section -->
|
||||
<section class="rounded-lg border p-6" style="border-color: var(--neutral-200); background: var(--neutral-0);">
|
||||
<h3 class="text-base font-bold mb-4" style="color: var(--neutral-900);">定价规则说明</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-8 h-8 rounded-md shrink-0 flex items-center justify-center" style="background: var(--brand-primary-light);">
|
||||
<i data-lucide="calendar" class="w-4 h-4" style="color: var(--brand-primary);"></i>
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-semibold truncate" style="color: var(--neutral-800);">按月订阅</p>
|
||||
<p class="text-sm leading-relaxed" style="color: var(--neutral-500);">标准月度计费，按自然月结算，支持随时升降配</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-8 h-8 rounded-md shrink-0 flex items-center justify-center" style="background: var(--brand-primary-light);">
|
||||
<i data-lucide="percent" class="w-4 h-4" style="color: var(--brand-primary);"></i>
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-semibold truncate" style="color: var(--neutral-800);">年度优惠</p>
|
||||
<p class="text-sm leading-relaxed" style="color: var(--neutral-500);">年付享 8 折优惠，一次性支付 12 个月费用</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-8 h-8 rounded-md shrink-0 flex items-center justify-center" style="background: var(--brand-primary-light);">
|
||||
<i data-lucide="user-plus" class="w-4 h-4" style="color: var(--brand-primary);"></i>
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-semibold truncate" style="color: var(--neutral-800);">按坐席计费</p>
|
||||
<p class="text-sm leading-relaxed" style="color: var(--neutral-500);">超出套餐坐席数后按每坐席 ¥49/月额外计费</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -0,0 +1,645 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="light" lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>租户管理 - 客服云 · 运营管理</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/lucide@1.7.0"></script>
|
||||
<style id="theme-vars">
|
||||
:root {
|
||||
--brand-primary: #2563eb;
|
||||
--brand-primary-hover: #1d4ed8;
|
||||
--brand-primary-active: #1e40af;
|
||||
--brand-primary-light: #dbeafe;
|
||||
--brand-primary-lighter: #eff6ff;
|
||||
--brand-primary-dark: #1e3a8a;
|
||||
--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-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;
|
||||
--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;
|
||||
--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-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
--radius-full: 9999px;
|
||||
--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);
|
||||
--transition-fast: 150ms ease;
|
||||
--transition-normal: 200ms ease;
|
||||
--transition-slow: 300ms ease;
|
||||
--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-primary-hover: var(--brand-primary-hover);
|
||||
--color-primary-active: var(--brand-primary-active);
|
||||
--color-primary-light: var(--brand-primary-light);
|
||||
--color-primary-lighter: var(--brand-primary-lighter);
|
||||
--color-foreground: var(--neutral-900);
|
||||
--color-card: var(--neutral-0);
|
||||
--color-muted: var(--neutral-50);
|
||||
--color-border: var(--neutral-200);
|
||||
}
|
||||
</style>
|
||||
<style type="text/tailwindcss">
|
||||
@layer base {
|
||||
body {
|
||||
font-family: var(--font-family-base);
|
||||
font-size: var(--font-size-base);
|
||||
line-height: var(--line-height-normal);
|
||||
color: var(--neutral-900);
|
||||
background-color: var(--neutral-50);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
/* Custom styles for admin tenants page */
|
||||
.drawer-open .main-content-area {
|
||||
margin-right: 480px;
|
||||
transition: margin-right var(--transition-slow);
|
||||
}
|
||||
.switch-track {
|
||||
position: relative;
|
||||
width: 36px;
|
||||
height: 20px;
|
||||
background-color: var(--neutral-300);
|
||||
border-radius: var(--radius-full);
|
||||
cursor: pointer;
|
||||
transition: background-color var(--transition-fast);
|
||||
}
|
||||
.switch-track.active {
|
||||
background-color: var(--brand-primary);
|
||||
}
|
||||
.switch-thumb {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: var(--neutral-0);
|
||||
border-radius: var(--radius-full);
|
||||
transition: transform var(--transition-fast);
|
||||
}
|
||||
.switch-track.active .switch-thumb {
|
||||
transform: translateX(16px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="flex min-h-screen">
|
||||
|
||||
<!-- Left Sidebar -->
|
||||
<aside class="flex flex-col border-r" style="width: var(--sidebar-width); min-width: var(--sidebar-width); background-color: var(--neutral-0); border-color: var(--neutral-200);">
|
||||
<!-- Logo Area -->
|
||||
<div class="flex items-center justify-between px-4 py-3 border-b" style="border-color: var(--neutral-200); min-height: 52px;">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<div class="w-7 h-7 rounded-md flex items-center justify-center shrink-0" style="background-color: var(--brand-primary);">
|
||||
<i data-lucide="headphones" class="w-4 h-4" style="color: var(--neutral-0);"></i>
|
||||
</div>
|
||||
<span class="font-semibold text-sm truncate" style="color: var(--neutral-900);">客服云 · 运营管理</span>
|
||||
</div>
|
||||
<span class="shrink-0 text-xs px-1.5 py-0.5 rounded" style="background-color: var(--brand-primary-light); color: var(--brand-primary);">管理端</span>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="flex-1 py-2">
|
||||
<div class="px-3 mb-1">
|
||||
<span class="text-xs font-medium uppercase tracking-wider" style="color: var(--neutral-400); font-size: var(--font-size-xs);">导航菜单</span>
|
||||
</div>
|
||||
<a href="#" data-dom-id="admin-nav-dashboard" class="flex items-center gap-3 mx-2 px-3 py-2 rounded-md text-sm transition-colors" style="color: var(--neutral-600);">
|
||||
<i data-lucide="layout-dashboard" class="w-4 h-4 shrink-0"></i>
|
||||
<span>运营概览</span>
|
||||
</a>
|
||||
<a href="#" data-dom-id="admin-nav-tenants" class="flex items-center gap-3 mx-2 px-3 py-2 rounded-md text-sm font-medium" style="background-color: var(--brand-primary-lighter); color: var(--brand-primary);">
|
||||
<i data-lucide="building-2" class="w-4 h-4 shrink-0"></i>
|
||||
<span>租户管理</span>
|
||||
</a>
|
||||
<a href="#" data-dom-id="admin-nav-plans" class="flex items-center gap-3 mx-2 px-3 py-2 rounded-md text-sm transition-colors" style="color: var(--neutral-600);">
|
||||
<i data-lucide="credit-card" class="w-4 h-4 shrink-0"></i>
|
||||
<span>套餐定价</span>
|
||||
</a>
|
||||
<a href="#" data-dom-id="admin-nav-ops" class="flex items-center gap-3 mx-2 px-3 py-2 rounded-md text-sm transition-colors" style="color: var(--neutral-600);">
|
||||
<i data-lucide="settings" class="w-4 h-4 shrink-0"></i>
|
||||
<span>系统运维</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<!-- Sidebar Footer -->
|
||||
<div class="px-4 py-3 border-t" style="border-color: var(--neutral-200);">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-7 h-7 rounded-full flex items-center justify-center text-xs font-semibold shrink-0" style="background-color: var(--brand-primary-light); color: var(--brand-primary);">管</div>
|
||||
<div class="min-w-0">
|
||||
<div class="text-sm font-medium truncate" style="color: var(--neutral-800);">系统管理员</div>
|
||||
<div class="text-xs truncate" style="color: var(--neutral-400);">admin@kefuyun.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<div class="flex-1 flex flex-col min-w-0 main-content-area">
|
||||
<!-- Top Header Bar -->
|
||||
<header class="flex items-center justify-between px-6 border-b shrink-0" style="height: var(--header-height); background-color: var(--neutral-0); border-color: var(--neutral-200);">
|
||||
<div class="flex items-center gap-3">
|
||||
<h1 class="text-base font-semibold" style="color: var(--neutral-900);">租户管理</h1>
|
||||
<span class="text-xs px-2 py-0.5 rounded" style="background-color: var(--neutral-100); color: var(--neutral-500);">共 8 个租户</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-xs" style="color: var(--neutral-400);">最近更新: 2026-07-09 14:30</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Toolbar -->
|
||||
<div class="px-6 py-4 border-b shrink-0" style="background-color: var(--neutral-0); border-color: var(--neutral-200);">
|
||||
<div class="flex items-center justify-between gap-4 flex-wrap">
|
||||
<div class="flex items-center gap-3">
|
||||
<!-- Search -->
|
||||
<div class="relative">
|
||||
<i data-lucide="search" class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2" style="color: var(--neutral-400);"></i>
|
||||
<input type="text" placeholder="搜索公司名/联系人..." class="pl-9 pr-3 py-2 rounded-md border text-sm outline-none focus:ring-1" style="width: 260px; height: 32px; border-color: var(--neutral-200); background-color: var(--neutral-0); color: var(--neutral-900); --tw-ring-color: var(--brand-primary);">
|
||||
</div>
|
||||
<!-- Filters -->
|
||||
<div class="flex items-center gap-1 border rounded-md p-0.5" style="border-color: var(--neutral-200);">
|
||||
<button class="px-3 py-1 text-xs rounded font-medium" style="background-color: var(--brand-primary); color: var(--neutral-0);">全部</button>
|
||||
<button class="px-3 py-1 text-xs rounded" style="color: var(--neutral-600);">正常</button>
|
||||
<button class="px-3 py-1 text-xs rounded" style="color: var(--neutral-600);">即将到期</button>
|
||||
<button class="px-3 py-1 text-xs rounded" style="color: var(--neutral-600);">已暂停</button>
|
||||
<button class="px-3 py-1 text-xs rounded" style="color: var(--neutral-600);">已过期</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium text-white shrink-0" style="background-color: var(--brand-primary); height: 32px;">
|
||||
<i data-lucide="plus" class="w-4 h-4"></i>
|
||||
开通新账号
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table Container -->
|
||||
<div class="flex-1 overflow-auto px-6 py-4" style="background-color: var(--neutral-50);">
|
||||
<div class="border rounded-lg overflow-hidden" style="background-color: var(--neutral-0); border-color: var(--neutral-200);">
|
||||
<table class="w-full" style="table-layout: fixed;">
|
||||
<thead>
|
||||
<tr style="background-color: var(--neutral-50); border-bottom: 1px solid var(--neutral-200);">
|
||||
<th class="text-left px-4 py-3 text-xs font-semibold whitespace-nowrap" style="color: var(--neutral-500); width: 200px;">公司名称</th>
|
||||
<th class="text-left px-4 py-3 text-xs font-semibold whitespace-nowrap" style="color: var(--neutral-500); width: 90px;">联系人</th>
|
||||
<th class="text-left px-4 py-3 text-xs font-semibold whitespace-nowrap" style="color: var(--neutral-500); width: 120px;">手机号</th>
|
||||
<th class="text-left px-4 py-3 text-xs font-semibold whitespace-nowrap" style="color: var(--neutral-500); width: 90px;">套餐类型</th>
|
||||
<th class="text-center px-4 py-3 text-xs font-semibold whitespace-nowrap" style="color: var(--neutral-500); width: 80px;">坐席数量</th>
|
||||
<th class="text-left px-4 py-3 text-xs font-semibold whitespace-nowrap" style="color: var(--neutral-500); width: 100px;">开通日期</th>
|
||||
<th class="text-left px-4 py-3 text-xs font-semibold whitespace-nowrap" style="color: var(--neutral-500); width: 110px;">到期日期</th>
|
||||
<th class="text-left px-4 py-3 text-xs font-semibold whitespace-nowrap" style="color: var(--neutral-500); width: 80px;">状态</th>
|
||||
<th class="text-center px-4 py-3 text-xs font-semibold whitespace-nowrap" style="color: var(--neutral-500); width: 160px;">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- Row 1: Normal -->
|
||||
<tr class="border-t" style="border-color: var(--neutral-100);">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<div class="w-8 h-8 rounded-md flex items-center justify-center text-xs font-bold shrink-0" style="background-color: #dbeafe; color: #1d4ed8;">云</div>
|
||||
<div class="min-w-0">
|
||||
<div class="text-sm font-medium truncate" style="color: var(--neutral-900);">云端科技有限公司</div>
|
||||
<div class="text-xs truncate" style="color: var(--neutral-400);">kefu-cloud.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm truncate" style="color: var(--neutral-700);">张明远</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-600); font-family: var(--font-family-mono); font-size: var(--font-size-sm);">138****5678</td>
|
||||
<td class="px-4 py-3"><span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap" style="background-color: var(--brand-primary-light); color: var(--brand-primary);">企业版</span></td>
|
||||
<td class="px-4 py-3 text-sm text-center whitespace-nowrap" style="color: var(--neutral-700);">50</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-500);">2025-01-15</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-700);">2027-01-15</td>
|
||||
<td class="px-4 py-3"><span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap" style="background-color: var(--state-success-bg); color: var(--state-success);"><span class="w-1.5 h-1.5 rounded-full" style="background-color: var(--state-success);"></span>正常</span></td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center justify-center gap-1">
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">查看</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">编辑</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">续费</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--neutral-500);">暂停</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 2: Expiring Soon (soul element - warning color + icon) -->
|
||||
<tr class="border-t" style="border-color: var(--neutral-100);">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<div class="w-8 h-8 rounded-md flex items-center justify-center text-xs font-bold shrink-0" style="background-color: #fef3c7; color: #92400e;">盛</div>
|
||||
<div class="min-w-0">
|
||||
<div class="text-sm font-medium truncate" style="color: var(--neutral-900);">盛世教育集团</div>
|
||||
<div class="text-xs truncate" style="color: var(--neutral-400);">shengshi-edu.cn</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm truncate" style="color: var(--neutral-700);">李晓琳</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-600); font-family: var(--font-family-mono); font-size: var(--font-size-sm);">139****2345</td>
|
||||
<td class="px-4 py-3"><span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap" style="background-color: var(--brand-primary-light); color: var(--brand-primary);">企业版</span></td>
|
||||
<td class="px-4 py-3 text-sm text-center whitespace-nowrap" style="color: var(--neutral-700);">30</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-500);">2025-08-10</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="inline-flex items-center gap-1 text-sm whitespace-nowrap" style="color: var(--state-warning);">
|
||||
<span style="font-size: 13px;">⏰</span>
|
||||
2026-08-10
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3"><span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap" style="background-color: var(--state-warning-bg); color: var(--state-warning);"><span class="w-1.5 h-1.5 rounded-full" style="background-color: var(--state-warning);"></span>即将到期</span></td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center justify-center gap-1">
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">查看</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">编辑</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">续费</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--neutral-500);">暂停</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 3: Normal -->
|
||||
<tr class="border-t" style="border-color: var(--neutral-100);">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<div class="w-8 h-8 rounded-md flex items-center justify-center text-xs font-bold shrink-0" style="background-color: #dbeafe; color: #1d4ed8;">鼎</div>
|
||||
<div class="min-w-0">
|
||||
<div class="text-sm font-medium truncate" style="color: var(--neutral-900);">鼎捷电子商务</div>
|
||||
<div class="text-xs truncate" style="color: var(--neutral-400);">dingjie-shop.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm truncate" style="color: var(--neutral-700);">王建华</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-600); font-family: var(--font-family-mono); font-size: var(--font-size-sm);">186****7890</td>
|
||||
<td class="px-4 py-3"><span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap" style="background-color: #e0e7ff; color: #4338ca;">专业版</span></td>
|
||||
<td class="px-4 py-3 text-sm text-center whitespace-nowrap" style="color: var(--neutral-700);">15</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-500);">2026-03-01</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-700);">2027-03-01</td>
|
||||
<td class="px-4 py-3"><span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap" style="background-color: var(--state-success-bg); color: var(--state-success);"><span class="w-1.5 h-1.5 rounded-full" style="background-color: var(--state-success);"></span>正常</span></td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center justify-center gap-1">
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">查看</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">编辑</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">续费</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--neutral-500);">暂停</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 4: Paused -->
|
||||
<tr class="border-t" style="border-color: var(--neutral-100);">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<div class="w-8 h-8 rounded-md flex items-center justify-center text-xs font-bold shrink-0" style="background-color: var(--neutral-200); color: var(--neutral-500);">优</div>
|
||||
<div class="min-w-0">
|
||||
<div class="text-sm font-medium truncate" style="color: var(--neutral-900);">优享生活服务</div>
|
||||
<div class="text-xs truncate" style="color: var(--neutral-400);">youxiang-life.cn</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm truncate" style="color: var(--neutral-700);">赵雅芝</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-600); font-family: var(--font-family-mono); font-size: var(--font-size-sm);">152****4567</td>
|
||||
<td class="px-4 py-3"><span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap" style="background-color: var(--neutral-100); color: var(--neutral-600);">基础版</span></td>
|
||||
<td class="px-4 py-3 text-sm text-center whitespace-nowrap" style="color: var(--neutral-700);">5</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-500);">2025-06-20</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-700);">2026-06-20</td>
|
||||
<td class="px-4 py-3"><span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap" style="background-color: var(--neutral-100); color: var(--neutral-500);"><span class="w-1.5 h-1.5 rounded-full" style="background-color: var(--neutral-400);"></span>已暂停</span></td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center justify-center gap-1">
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">查看</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">编辑</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">续费</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--neutral-500);">暂停</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 5: Normal -->
|
||||
<tr class="border-t" style="border-color: var(--neutral-100);">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<div class="w-8 h-8 rounded-md flex items-center justify-center text-xs font-bold shrink-0" style="background-color: #fce7f3; color: #9d174d;">恒</div>
|
||||
<div class="min-w-0">
|
||||
<div class="text-sm font-medium truncate" style="color: var(--neutral-900);">恒信金融科技</div>
|
||||
<div class="text-xs truncate" style="color: var(--neutral-400);">hengxin-fin.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm truncate" style="color: var(--neutral-700);">刘志强</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-600); font-family: var(--font-family-mono); font-size: var(--font-size-sm);">177****8901</td>
|
||||
<td class="px-4 py-3"><span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap" style="background-color: var(--brand-primary-light); color: var(--brand-primary);">企业版</span></td>
|
||||
<td class="px-4 py-3 text-sm text-center whitespace-nowrap" style="color: var(--neutral-700);">100</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-500);">2024-12-01</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-700);">2026-12-01</td>
|
||||
<td class="px-4 py-3"><span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap" style="background-color: var(--state-success-bg); color: var(--state-success);"><span class="w-1.5 h-1.5 rounded-full" style="background-color: var(--state-success);"></span>正常</span></td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center justify-center gap-1">
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">查看</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">编辑</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">续费</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--neutral-500);">暂停</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 6: Expired -->
|
||||
<tr class="border-t" style="border-color: var(--neutral-100);">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<div class="w-8 h-8 rounded-md flex items-center justify-center text-xs font-bold shrink-0" style="background-color: var(--neutral-200); color: var(--neutral-500);">绿</div>
|
||||
<div class="min-w-0">
|
||||
<div class="text-sm font-medium truncate" style="color: var(--neutral-900);">绿源环保科技</div>
|
||||
<div class="text-xs truncate" style="color: var(--neutral-400);">lvyuan-tech.cn</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm truncate" style="color: var(--neutral-700);">陈海波</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-600); font-family: var(--font-family-mono); font-size: var(--font-size-sm);">135****6789</td>
|
||||
<td class="px-4 py-3"><span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap" style="background-color: var(--neutral-100); color: var(--neutral-600);">基础版</span></td>
|
||||
<td class="px-4 py-3 text-sm text-center whitespace-nowrap" style="color: var(--neutral-700);">3</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-500);">2025-02-01</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--state-error);">2026-02-01</td>
|
||||
<td class="px-4 py-3"><span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap" style="background-color: var(--state-error-bg); color: var(--state-error);"><span class="w-1.5 h-1.5 rounded-full" style="background-color: var(--state-error);"></span>已过期</span></td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center justify-center gap-1">
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">查看</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">编辑</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">续费</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--neutral-500);">暂停</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 7: Expiring Soon (soul element - warning) -->
|
||||
<tr class="border-t" style="border-color: var(--neutral-100);">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<div class="w-8 h-8 rounded-md flex items-center justify-center text-xs font-bold shrink-0" style="background-color: #e0e7ff; color: #4338ca;">星</div>
|
||||
<div class="min-w-0">
|
||||
<div class="text-sm font-medium truncate" style="color: var(--neutral-900);">星辰物流平台</div>
|
||||
<div class="text-xs truncate" style="color: var(--neutral-400);">xingchen-logi.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm truncate" style="color: var(--neutral-700);">周宇航</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-600); font-family: var(--font-family-mono); font-size: var(--font-size-sm);">158****3456</td>
|
||||
<td class="px-4 py-3"><span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap" style="background-color: #e0e7ff; color: #4338ca;">专业版</span></td>
|
||||
<td class="px-4 py-3 text-sm text-center whitespace-nowrap" style="color: var(--neutral-700);">20</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-500);">2025-09-15</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="inline-flex items-center gap-1 text-sm whitespace-nowrap" style="color: var(--state-warning);">
|
||||
<span style="font-size: 13px;">⏰</span>
|
||||
2026-08-09
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3"><span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap" style="background-color: var(--state-warning-bg); color: var(--state-warning);"><span class="w-1.5 h-1.5 rounded-full" style="background-color: var(--state-warning);"></span>即将到期</span></td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center justify-center gap-1">
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">查看</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">编辑</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">续费</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--neutral-500);">暂停</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 8: Normal -->
|
||||
<tr class="border-t" style="border-color: var(--neutral-100);">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<div class="w-8 h-8 rounded-md flex items-center justify-center text-xs font-bold shrink-0" style="background-color: #dbeafe; color: #1d4ed8;">智</div>
|
||||
<div class="min-w-0">
|
||||
<div class="text-sm font-medium truncate" style="color: var(--neutral-900);">智联人力资源</div>
|
||||
<div class="text-xs truncate" style="color: var(--neutral-400);">zhilian-hr.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm truncate" style="color: var(--neutral-700);">孙丽萍</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-600); font-family: var(--font-family-mono); font-size: var(--font-size-sm);">166****0123</td>
|
||||
<td class="px-4 py-3"><span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap" style="background-color: #e0e7ff; color: #4338ca;">专业版</span></td>
|
||||
<td class="px-4 py-3 text-sm text-center whitespace-nowrap" style="color: var(--neutral-700);">10</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-500);">2026-04-01</td>
|
||||
<td class="px-4 py-3 text-sm whitespace-nowrap" style="color: var(--neutral-700);">2027-04-01</td>
|
||||
<td class="px-4 py-3"><span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap" style="background-color: var(--state-success-bg); color: var(--state-success);"><span class="w-1.5 h-1.5 rounded-full" style="background-color: var(--state-success);"></span>正常</span></td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center justify-center gap-1">
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">查看</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">编辑</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--brand-primary);">续费</button>
|
||||
<span style="color: var(--neutral-200);">|</span>
|
||||
<button class="p-1 rounded text-xs hover:underline" style="color: var(--neutral-500);">暂停</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="flex items-center justify-between px-4 py-3 border-t" style="border-color: var(--neutral-200);">
|
||||
<span class="text-xs" style="color: var(--neutral-500);">显示 1-8 条，共 8 条记录</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<button class="px-3 py-1 text-xs rounded-md border" style="border-color: var(--neutral-200); color: var(--neutral-400); background-color: var(--neutral-0);" disabled>上一页</button>
|
||||
<button class="px-3 py-1 text-xs rounded-md font-medium text-white" style="background-color: var(--brand-primary);">1</button>
|
||||
<button class="px-3 py-1 text-xs rounded-md border" style="border-color: var(--neutral-200); color: var(--neutral-600); background-color: var(--neutral-0);" disabled>下一页</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Drawer Panel (simulated open state) -->
|
||||
<aside class="fixed top-0 right-0 h-full border-l flex flex-col" style="width: 480px; background-color: var(--neutral-0); border-color: var(--neutral-200); box-shadow: var(--shadow-floating); z-index: 40;">
|
||||
<!-- Drawer Header -->
|
||||
<div class="flex items-center justify-between px-6 py-4 border-b shrink-0" style="border-color: var(--neutral-200);">
|
||||
<h2 class="text-base font-semibold" style="color: var(--neutral-900);">开通新账号</h2>
|
||||
<button class="p-1 rounded-md hover:opacity-70" style="color: var(--neutral-400);">
|
||||
<i data-lucide="x" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Drawer Body -->
|
||||
<div class="flex-1 overflow-y-auto px-6 py-5">
|
||||
<div class="space-y-5">
|
||||
<!-- Company Name -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1.5" style="color: var(--neutral-700);">
|
||||
公司名称 <span style="color: var(--state-error);">*</span>
|
||||
</label>
|
||||
<input type="text" placeholder="请输入公司全称" class="w-full px-3 py-2 rounded-md border text-sm outline-none focus:ring-1" style="height: 32px; border-color: var(--neutral-200); background-color: var(--neutral-0); color: var(--neutral-900); --tw-ring-color: var(--brand-primary);">
|
||||
</div>
|
||||
|
||||
<!-- Contact Name -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1.5" style="color: var(--neutral-700);">联系人姓名</label>
|
||||
<input type="text" placeholder="请输入联系人姓名" class="w-full px-3 py-2 rounded-md border text-sm outline-none focus:ring-1" style="height: 32px; border-color: var(--neutral-200); background-color: var(--neutral-0); color: var(--neutral-900); --tw-ring-color: var(--brand-primary);">
|
||||
</div>
|
||||
|
||||
<!-- Phone -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1.5" style="color: var(--neutral-700);">手机号</label>
|
||||
<input type="tel" placeholder="请输入手机号码" class="w-full px-3 py-2 rounded-md border text-sm outline-none focus:ring-1" style="height: 32px; border-color: var(--neutral-200); background-color: var(--neutral-0); color: var(--neutral-900); --tw-ring-color: var(--brand-primary);">
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1.5" style="color: var(--neutral-700);">邮箱</label>
|
||||
<input type="email" placeholder="请输入邮箱地址" class="w-full px-3 py-2 rounded-md border text-sm outline-none focus:ring-1" style="height: 32px; border-color: var(--neutral-200); background-color: var(--neutral-0); color: var(--neutral-900); --tw-ring-color: var(--brand-primary);">
|
||||
</div>
|
||||
|
||||
<!-- Plan Selection -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1.5" style="color: var(--neutral-700);">选择套餐</label>
|
||||
<select class="w-full px-3 py-2 rounded-md border text-sm outline-none focus:ring-1 appearance-none" style="height: 32px; border-color: var(--neutral-200); background-color: var(--neutral-0); color: var(--neutral-900); --tw-ring-color: var(--brand-primary); background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%2394a3b8%22 stroke-width=%222%22%3E%3Cpolyline points=%226 9 12 15 18 9%22/%3E%3C/svg%3E'); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px;">
|
||||
<option>基础版</option>
|
||||
<option>专业版</option>
|
||||
<option>企业版</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Agent Count -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1.5" style="color: var(--neutral-700);">坐席数量</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<input type="number" value="5" min="1" max="500" class="px-3 py-2 rounded-md border text-sm outline-none focus:ring-1" style="width: 120px; height: 32px; border-color: var(--neutral-200); background-color: var(--neutral-0); color: var(--neutral-900); --tw-ring-color: var(--brand-primary);">
|
||||
<span class="text-xs" style="color: var(--neutral-400);">基础版: 1-5 / 专业版: 1-30 / 企业版: 1-500</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Duration -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1.5" style="color: var(--neutral-700);">开通时长</label>
|
||||
<select class="w-full px-3 py-2 rounded-md border text-sm outline-none focus:ring-1 appearance-none" style="height: 32px; border-color: var(--neutral-200); background-color: var(--neutral-0); color: var(--neutral-900); --tw-ring-color: var(--brand-primary); background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%2394a3b8%22 stroke-width=%222%22%3E%3Cpolyline points=%226 9 12 15 18 9%22/%3E%3C/svg%3E'); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px;">
|
||||
<option>1个月</option>
|
||||
<option>3个月</option>
|
||||
<option selected>6个月</option>
|
||||
<option>12个月</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Auto Renew -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<label class="text-sm font-medium" style="color: var(--neutral-700);">自动续费</label>
|
||||
<p class="text-xs mt-0.5" style="color: var(--neutral-400);">到期前7天自动续费当前套餐</p>
|
||||
</div>
|
||||
<div class="switch-track">
|
||||
<div class="switch-thumb"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notes -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1.5" style="color: var(--neutral-700);">备注</label>
|
||||
<textarea rows="3" placeholder="可选，填写备注信息..." class="w-full px-3 py-2 rounded-md border text-sm outline-none focus:ring-1 resize-none" style="border-color: var(--neutral-200); background-color: var(--neutral-0); color: var(--neutral-900); --tw-ring-color: var(--brand-primary);"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Drawer Footer -->
|
||||
<div class="flex items-center justify-end gap-3 px-6 py-4 border-t shrink-0" style="border-color: var(--neutral-200);">
|
||||
<button class="px-4 py-2 rounded-md text-sm font-medium border" style="border-color: var(--neutral-200); color: var(--neutral-600); background-color: var(--neutral-0); height: 32px;">取消</button>
|
||||
<button class="px-4 py-2 rounded-md text-sm font-medium text-white" style="background-color: var(--brand-primary); height: 32px;">确认开通</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Drawer Overlay -->
|
||||
<div class="fixed inset-0" style="background-color: rgba(0, 0, 0, 0.2); z-index: 30;"></div>
|
||||
|
||||
</main>
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,616 @@
|
||||
<!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">
|
||||
/* Online Customer Service System — Brand CSS */
|
||||
/* Professional & Efficient Style — Cool Blue-Gray */
|
||||
|
||||
: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 (static: alpha <= 0.05; floating layers only may exceed) === */
|
||||
--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 mode */
|
||||
.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>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.3.1/dist/index.global.js"></script>
|
||||
<script src="https://unpkg.com/lucide@1.8.0/dist/umd/lucide.min.js"></script>
|
||||
<style type="text/tailwindcss">
|
||||
@theme inline {
|
||||
--color-primary: var(--brand-primary);
|
||||
--color-border: var(--neutral-200);
|
||||
--color-ring: var(--brand-primary);
|
||||
--radius-sm: var(--radius-sm);
|
||||
--radius-md: var(--radius-md);
|
||||
--radius-lg: var(--radius-lg);
|
||||
}
|
||||
@layer base {
|
||||
body { background: var(--neutral-50); color: var(--neutral-900); }
|
||||
td, th { @apply break-words; word-break: break-all; word-break: auto-phrase; }
|
||||
th { @apply whitespace-nowrap; }
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
[data-icon] {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
-webkit-mask-size: contain;
|
||||
mask-size: contain;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-position: center;
|
||||
mask-position: center;
|
||||
background-color: currentColor;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen antialiased" style="font-family: var(--font-family-base);">
|
||||
|
||||
<main>
|
||||
<!-- Top Header Bar -->
|
||||
<header class="fixed top-0 left-0 right-0 z-30 border-b flex items-center justify-between px-4"
|
||||
style="height: var(--header-height); background: var(--neutral-0); border-color: var(--neutral-200);">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center justify-center rounded-lg"
|
||||
style="width: 32px; height: 32px; background: var(--brand-primary);">
|
||||
<i data-lucide="headset" style="width: 18px; height: 18px; color: var(--neutral-0);"></i>
|
||||
</div>
|
||||
<span class="font-semibold text-sm truncate" style="color: var(--neutral-900);">在线客服系统</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2" style="flex: 1; max-width: 400px; margin-left: 32px;">
|
||||
<div class="flex items-center gap-2 rounded-md px-3 w-full"
|
||||
style="height: 32px; background: var(--neutral-100); border: 1px solid var(--neutral-200);">
|
||||
<i data-lucide="search" style="width: 14px; height: 14px; color: var(--neutral-400); flex-shrink: 0;"></i>
|
||||
<span class="text-xs truncate" style="color: var(--neutral-400);">搜索设置项...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center gap-2 rounded-md px-3 cursor-pointer"
|
||||
style="height: 32px; background: var(--neutral-100);">
|
||||
<i data-lucide="bell" style="width: 14px; height: 14px; color: var(--neutral-500);"></i>
|
||||
<span class="text-xs whitespace-nowrap" style="color: var(--neutral-600);">3 条通知</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 rounded-full cursor-pointer"
|
||||
style="width: 32px; height: 32px; background: var(--brand-primary-light);">
|
||||
<i data-lucide="user" style="width: 14px; height: 14px; color: var(--brand-primary); margin: 0 auto;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Left Sidebar Navigation -->
|
||||
<aside class="fixed top-0 left-0 z-20 border-r flex flex-col"
|
||||
style="width: var(--sidebar-width); height: 100vh; padding-top: var(--header-height); background: var(--neutral-0); border-color: var(--neutral-200);">
|
||||
<nav class="flex-1 py-3 overflow-y-auto no-scrollbar">
|
||||
<div class="flex flex-col gap-0.5 px-3">
|
||||
<a data-dom-id="nav-dashboard" href="dashboard.html"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2 text-xs font-medium transition-colors cursor-pointer"
|
||||
style="color: var(--neutral-600);">
|
||||
<i data-lucide="layout-dashboard" style="width: 16px; height: 16px; flex-shrink: 0;"></i>
|
||||
<span class="truncate">客服工作台</span>
|
||||
</a>
|
||||
<a data-dom-id="nav-customers" href="customer-management.html"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2 text-xs font-medium transition-colors cursor-pointer"
|
||||
style="color: var(--neutral-600);">
|
||||
<i data-lucide="users" style="width: 16px; height: 16px; flex-shrink: 0;"></i>
|
||||
<span class="truncate">客户管理</span>
|
||||
</a>
|
||||
<a data-dom-id="nav-history" href="chat-history.html"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2 text-xs font-medium transition-colors cursor-pointer"
|
||||
style="color: var(--neutral-600);">
|
||||
<i data-lucide="message-square" style="width: 16px; height: 16px; flex-shrink: 0;"></i>
|
||||
<span class="truncate">对话记录</span>
|
||||
</a>
|
||||
<a data-dom-id="nav-knowledge" href="knowledge-base.html"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2 text-xs font-medium transition-colors cursor-pointer"
|
||||
style="color: var(--neutral-600);">
|
||||
<i data-lucide="book-open" style="width: 16px; height: 16px; flex-shrink: 0;"></i>
|
||||
<span class="truncate">知识库</span>
|
||||
</a>
|
||||
<a data-dom-id="nav-statistics" href="statistics.html"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2 text-xs font-medium transition-colors cursor-pointer"
|
||||
style="color: var(--neutral-600);">
|
||||
<i data-lucide="bar-chart-3" style="width: 16px; height: 16px; flex-shrink: 0;"></i>
|
||||
<span class="truncate">数据统计</span>
|
||||
</a>
|
||||
<a data-dom-id="nav-settings" href="settings.html"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2 text-xs font-semibold transition-colors cursor-pointer"
|
||||
style="background: var(--brand-primary-lighter); color: var(--brand-primary);">
|
||||
<i data-lucide="settings" style="width: 16px; height: 16px; flex-shrink: 0;"></i>
|
||||
<span class="truncate">系统设置</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Sidebar footer -->
|
||||
<div class="border-t px-3 py-3" style="border-color: var(--neutral-200);">
|
||||
<div class="flex items-center gap-2 rounded-lg px-3 py-2" style="background: var(--neutral-50);">
|
||||
<div class="rounded-full flex items-center justify-center flex-shrink-0"
|
||||
style="width: 24px; height: 24px; background: var(--brand-primary);">
|
||||
<span class="text-xs font-semibold" style="color: var(--neutral-0);">A</span>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="text-xs font-medium truncate" style="color: var(--neutral-900);">Admin</div>
|
||||
<div class="text-xs truncate" style="color: var(--neutral-400);">管理员</div>
|
||||
</div>
|
||||
<i data-lucide="chevrons-up-down" style="width: 12px; height: 12px; color: var(--neutral-400); flex-shrink: 0;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<div class="flex" style="margin-left: var(--sidebar-width); padding-top: var(--header-height);">
|
||||
|
||||
<!-- Settings Category Navigation (Left) -->
|
||||
<div class="flex-shrink-0 border-r"
|
||||
style="width: 200px; min-height: calc(100vh - var(--header-height)); background: var(--neutral-0); border-color: var(--neutral-200);">
|
||||
<div class="py-4 px-3">
|
||||
<h2 class="text-sm font-semibold mb-1 px-3 truncate" style="color: var(--neutral-900);">设置分类</h2>
|
||||
<p class="text-xs px-3 mb-4 truncate" style="color: var(--neutral-400);">管理系统配置与渠道接入</p>
|
||||
|
||||
<div class="flex flex-col gap-0.5">
|
||||
<!-- 基本设置 -->
|
||||
<a class="settings-cat flex items-center gap-3 rounded-md px-3 py-2 text-xs transition-colors cursor-pointer"
|
||||
style="color: var(--neutral-600);" data-cat="basic">
|
||||
<i data-lucide="sliders-horizontal" style="width: 15px; height: 15px; flex-shrink: 0;"></i>
|
||||
<span class="truncate">基本设置</span>
|
||||
</a>
|
||||
<!-- 渠道管理 (active) -->
|
||||
<a class="settings-cat flex items-center gap-3 rounded-md px-3 py-2 text-xs font-medium transition-colors cursor-pointer"
|
||||
style="background: var(--brand-primary-lighter); color: var(--brand-primary);" data-cat="channel">
|
||||
<i data-lucide="radio" style="width: 15px; height: 15px; flex-shrink: 0;"></i>
|
||||
<span class="truncate">渠道管理</span>
|
||||
</a>
|
||||
<!-- 客服分配规则 -->
|
||||
<a class="settings-cat flex items-center gap-3 rounded-md px-3 py-2 text-xs transition-colors cursor-pointer"
|
||||
style="color: var(--neutral-600);" data-cat="routing">
|
||||
<i data-lucide="git-branch" style="width: 15px; height: 15px; flex-shrink: 0;"></i>
|
||||
<span class="truncate">客服分配规则</span>
|
||||
</a>
|
||||
<!-- 权限管理 -->
|
||||
<a class="settings-cat flex items-center gap-3 rounded-md px-3 py-2 text-xs transition-colors cursor-pointer"
|
||||
style="color: var(--neutral-600);" data-cat="permission">
|
||||
<i data-lucide="shield-check" style="width: 15px; height: 15px; flex-shrink: 0;"></i>
|
||||
<span class="truncate">权限管理</span>
|
||||
</a>
|
||||
<!-- 自动回复 -->
|
||||
<a class="settings-cat flex items-center gap-3 rounded-md px-3 py-2 text-xs transition-colors cursor-pointer"
|
||||
style="color: var(--neutral-600);" data-cat="auto-reply">
|
||||
<i data-lucide="message-circle" style="width: 15px; height: 15px; flex-shrink: 0;"></i>
|
||||
<span class="truncate">自动回复</span>
|
||||
</a>
|
||||
<!-- 工作时间 -->
|
||||
<a class="settings-cat flex items-center gap-3 rounded-md px-3 py-2 text-xs transition-colors cursor-pointer"
|
||||
style="color: var(--neutral-600);" data-cat="schedule">
|
||||
<i data-lucide="clock" style="width: 15px; height: 15px; flex-shrink: 0;"></i>
|
||||
<span class="truncate">工作时间</span>
|
||||
</a>
|
||||
<!-- 通知设置 -->
|
||||
<a class="settings-cat flex items-center gap-3 rounded-md px-3 py-2 text-xs transition-colors cursor-pointer"
|
||||
style="color: var(--neutral-600);" data-cat="notification">
|
||||
<i data-lucide="bell-ring" style="width: 15px; height: 15px; flex-shrink: 0;"></i>
|
||||
<span class="truncate">通知设置</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Settings Configuration Panel (Right) -->
|
||||
<div class="flex-1 min-w-0" style="background: var(--neutral-50);">
|
||||
<div class="p-6" style="max-width: 860px;">
|
||||
|
||||
<!-- Panel Header -->
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h1 class="text-lg font-semibold mb-0.5" style="color: var(--neutral-900);">渠道管理</h1>
|
||||
<p class="text-xs" style="color: var(--neutral-500);">配置客户服务接入渠道，管理各渠道开关与接入状态</p>
|
||||
</div>
|
||||
<button class="flex items-center gap-2 rounded-lg px-4 font-medium text-xs whitespace-nowrap transition-colors cursor-pointer"
|
||||
style="height: 32px; background: var(--brand-primary); color: var(--neutral-0);">
|
||||
<i data-lucide="plus" style="width: 14px; height: 14px;"></i>
|
||||
添加新渠道
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Channel Cards List -->
|
||||
<div class="flex flex-col gap-4">
|
||||
|
||||
<!-- Channel 1: 网页聊天 (Enabled, with code snippet) -->
|
||||
<div class="rounded-lg border p-4" style="background: var(--neutral-0); border-color: var(--neutral-200);">
|
||||
<div class="flex items-start gap-4">
|
||||
<!-- Left: Icon + Info -->
|
||||
<div class="flex-shrink-0 flex items-center justify-center rounded-lg"
|
||||
style="width: 40px; height: 40px; background: var(--brand-primary-lighter);">
|
||||
<i data-lucide="globe" style="width: 20px; height: 20px; color: var(--brand-primary);"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<h3 class="text-sm font-medium truncate" style="color: var(--neutral-900);">网页聊天</h3>
|
||||
<span class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium whitespace-nowrap"
|
||||
style="background: var(--state-success-bg); color: var(--state-success);">已启用</span>
|
||||
</div>
|
||||
<!-- Toggle Switch -->
|
||||
<div class="flex-shrink-0 toggle-switch active" style="width: 36px; height: 20px; background: var(--brand-primary); border-radius: var(--radius-full); position: relative; cursor: pointer; transition: background var(--transition-fast);">
|
||||
<div style="width: 16px; height: 16px; background: var(--neutral-0); border-radius: var(--radius-full); position: absolute; top: 2px; left: 18px; transition: left var(--transition-fast); box-shadow: 0 1px 2px rgba(0,0,0,0.1);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 mb-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i data-lucide="users" style="width: 12px; height: 12px; color: var(--neutral-400);"></i>
|
||||
<span class="text-xs" style="color: var(--neutral-500);">今日接入 <span class="font-medium" style="color: var(--neutral-700);">1,286</span></span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i data-lucide="trending-up" style="width: 12px; height: 12px; color: var(--state-success);"></i>
|
||||
<span class="text-xs" style="color: var(--state-success);">+12.3%</span>
|
||||
</div>
|
||||
<!-- Sparkline -->
|
||||
<div class="sparkline-container flex items-end gap-0.5 ml-auto" style="height: 24px;">
|
||||
<div class="sparkline-bar" style="width: 4px; height: 10px; background: var(--brand-primary-light); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 16px; background: var(--brand-primary-light); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 12px; background: var(--brand-primary-light); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 20px; background: var(--brand-primary); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 14px; background: var(--brand-primary-light); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 18px; background: var(--brand-primary); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 22px; background: var(--brand-primary); border-radius: 1px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Code Snippet -->
|
||||
<div class="rounded-md px-3 py-2" style="background: var(--neutral-900);">
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<span class="text-xs font-medium" style="color: var(--neutral-400);">接入代码</span>
|
||||
<button class="flex items-center gap-1 text-xs transition-colors cursor-pointer" style="color: var(--neutral-400);">
|
||||
<i data-lucide="copy" style="width: 12px; height: 12px;"></i>
|
||||
复制
|
||||
</button>
|
||||
</div>
|
||||
<code class="text-xs leading-relaxed block" style="color: var(--brand-primary); font-family: var(--font-family-mono); word-break: break-all;">
|
||||
<script src="https://cs.example.com/widget.js" data-id="WK_8a3f2e"></script>
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Channel 2: 微信公众号 (Enabled) -->
|
||||
<div class="rounded-lg border p-4" style="background: var(--neutral-0); border-color: var(--neutral-200);">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="flex-shrink-0 flex items-center justify-center rounded-lg"
|
||||
style="width: 40px; height: 40px; background: var(--state-success-bg);">
|
||||
<i data-lucide="message-circle" style="width: 20px; height: 20px; color: var(--state-success);"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<h3 class="text-sm font-medium truncate" style="color: var(--neutral-900);">微信公众号</h3>
|
||||
<span class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium whitespace-nowrap"
|
||||
style="background: var(--state-success-bg); color: var(--state-success);">已启用</span>
|
||||
</div>
|
||||
<div class="flex-shrink-0 toggle-switch active" style="width: 36px; height: 20px; background: var(--brand-primary); border-radius: var(--radius-full); position: relative; cursor: pointer; transition: background var(--transition-fast);">
|
||||
<div style="width: 16px; height: 16px; background: var(--neutral-0); border-radius: var(--radius-full); position: absolute; top: 2px; left: 18px; transition: left var(--transition-fast); box-shadow: 0 1px 2px rgba(0,0,0,0.1);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 mb-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i data-lucide="users" style="width: 12px; height: 12px; color: var(--neutral-400);"></i>
|
||||
<span class="text-xs" style="color: var(--neutral-500);">今日接入 <span class="font-medium" style="color: var(--neutral-700);">843</span></span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i data-lucide="trending-up" style="width: 12px; height: 12px; color: var(--state-success);"></i>
|
||||
<span class="text-xs" style="color: var(--state-success);">+8.7%</span>
|
||||
</div>
|
||||
<!-- Sparkline -->
|
||||
<div class="sparkline-container flex items-end gap-0.5 ml-auto" style="height: 24px;">
|
||||
<div class="sparkline-bar" style="width: 4px; height: 14px; background: var(--state-success); border-radius: 1px; opacity: 0.3;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 10px; background: var(--state-success); border-radius: 1px; opacity: 0.3;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 16px; background: var(--state-success); border-radius: 1px; opacity: 0.3;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 18px; background: var(--state-success); border-radius: 1px; opacity: 0.5;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 20px; background: var(--state-success); border-radius: 1px; opacity: 0.5;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 16px; background: var(--state-success); border-radius: 1px; opacity: 0.7;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 24px; background: var(--state-success); border-radius: 1px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2 rounded-md px-3 py-1.5" style="background: var(--neutral-100);">
|
||||
<i data-lucide="link" style="width: 12px; height: 12px; color: var(--neutral-400);"></i>
|
||||
<span class="text-xs truncate" style="color: var(--neutral-600);">绑定公众号: 在线客服助手</span>
|
||||
</div>
|
||||
<button class="flex items-center gap-1.5 rounded-lg px-3 text-xs font-medium whitespace-nowrap transition-colors cursor-pointer"
|
||||
style="height: 32px; background: var(--neutral-100); color: var(--neutral-700); border: 1px solid var(--neutral-200);">
|
||||
<i data-lucide="settings-2" style="width: 13px; height: 13px;"></i>
|
||||
配置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Channel 3: APP内嵌 (Enabled) -->
|
||||
<div class="rounded-lg border p-4" style="background: var(--neutral-0); border-color: var(--neutral-200);">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="flex-shrink-0 flex items-center justify-center rounded-lg"
|
||||
style="width: 40px; height: 40px; background: var(--state-info-bg);">
|
||||
<i data-lucide="smartphone" style="width: 20px; height: 20px; color: var(--state-info);"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<h3 class="text-sm font-medium truncate" style="color: var(--neutral-900);">APP 内嵌</h3>
|
||||
<span class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium whitespace-nowrap"
|
||||
style="background: var(--state-success-bg); color: var(--state-success);">已启用</span>
|
||||
</div>
|
||||
<div class="flex-shrink-0 toggle-switch active" style="width: 36px; height: 20px; background: var(--brand-primary); border-radius: var(--radius-full); position: relative; cursor: pointer; transition: background var(--transition-fast);">
|
||||
<div style="width: 16px; height: 16px; background: var(--neutral-0); border-radius: var(--radius-full); position: absolute; top: 2px; left: 18px; transition: left var(--transition-fast); box-shadow: 0 1px 2px rgba(0,0,0,0.1);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 mb-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i data-lucide="users" style="width: 12px; height: 12px; color: var(--neutral-400);"></i>
|
||||
<span class="text-xs" style="color: var(--neutral-500);">今日接入 <span class="font-medium" style="color: var(--neutral-700);">567</span></span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i data-lucide="trending-down" style="width: 12px; height: 12px; color: var(--state-error);"></i>
|
||||
<span class="text-xs" style="color: var(--state-error);">-3.2%</span>
|
||||
</div>
|
||||
<!-- Sparkline -->
|
||||
<div class="sparkline-container flex items-end gap-0.5 ml-auto" style="height: 24px;">
|
||||
<div class="sparkline-bar" style="width: 4px; height: 20px; background: var(--state-info); border-radius: 1px; opacity: 0.5;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 22px; background: var(--state-info); border-radius: 1px; opacity: 0.5;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 18px; background: var(--state-info); border-radius: 1px; opacity: 0.3;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 24px; background: var(--state-info); border-radius: 1px; opacity: 0.7;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 14px; background: var(--state-info); border-radius: 1px; opacity: 0.3;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 12px; background: var(--state-info); border-radius: 1px; opacity: 0.3;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 10px; background: var(--state-info); border-radius: 1px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2 rounded-md px-3 py-1.5" style="background: var(--neutral-100);">
|
||||
<i data-lucide="package" style="width: 12px; height: 12px; color: var(--neutral-400);"></i>
|
||||
<span class="text-xs truncate" style="color: var(--neutral-600);">SDK 版本: v2.4.1 (iOS & Android)</span>
|
||||
</div>
|
||||
<button class="flex items-center gap-1.5 rounded-lg px-3 text-xs font-medium whitespace-nowrap transition-colors cursor-pointer"
|
||||
style="height: 32px; background: var(--neutral-100); color: var(--neutral-700); border: 1px solid var(--neutral-200);">
|
||||
<i data-lucide="settings-2" style="width: 13px; height: 13px;"></i>
|
||||
配置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Channel 4: 电话客服 (Disabled) -->
|
||||
<div class="rounded-lg border p-4" style="background: var(--neutral-0); border-color: var(--neutral-200); opacity: 0.7;">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="flex-shrink-0 flex items-center justify-center rounded-lg"
|
||||
style="width: 40px; height: 40px; background: var(--neutral-100);">
|
||||
<i data-lucide="phone" style="width: 20px; height: 20px; color: var(--neutral-400);"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<h3 class="text-sm font-medium truncate" style="color: var(--neutral-900);">电话客服</h3>
|
||||
<span class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium whitespace-nowrap"
|
||||
style="background: var(--neutral-100); color: var(--neutral-400);">未启用</span>
|
||||
</div>
|
||||
<div class="flex-shrink-0 toggle-switch" style="width: 36px; height: 20px; background: var(--neutral-300); border-radius: var(--radius-full); position: relative; cursor: pointer; transition: background var(--transition-fast);">
|
||||
<div style="width: 16px; height: 16px; background: var(--neutral-0); border-radius: var(--radius-full); position: absolute; top: 2px; left: 2px; transition: left var(--transition-fast); box-shadow: 0 1px 2px rgba(0,0,0,0.1);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 mb-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i data-lucide="users" style="width: 12px; height: 12px; color: var(--neutral-300);"></i>
|
||||
<span class="text-xs" style="color: var(--neutral-400);">今日接入 <span class="font-medium" style="color: var(--neutral-400);">0</span></span>
|
||||
</div>
|
||||
<!-- Sparkline (flat) -->
|
||||
<div class="sparkline-container flex items-end gap-0.5 ml-auto" style="height: 24px;">
|
||||
<div class="sparkline-bar" style="width: 4px; height: 2px; background: var(--neutral-200); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 2px; background: var(--neutral-200); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 2px; background: var(--neutral-200); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 2px; background: var(--neutral-200); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 2px; background: var(--neutral-200); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 2px; background: var(--neutral-200); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 2px; background: var(--neutral-200); border-radius: 1px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2 rounded-md px-3 py-1.5" style="background: var(--neutral-50);">
|
||||
<i data-lucide="info" style="width: 12px; height: 12px; color: var(--neutral-400);"></i>
|
||||
<span class="text-xs truncate" style="color: var(--neutral-400);">启用后可接入 400/800 电话线路</span>
|
||||
</div>
|
||||
<button class="flex items-center gap-1.5 rounded-lg px-3 text-xs font-medium whitespace-nowrap transition-colors cursor-pointer"
|
||||
style="height: 32px; background: var(--neutral-100); color: var(--neutral-700); border: 1px solid var(--neutral-200);">
|
||||
<i data-lucide="settings-2" style="width: 13px; height: 13px;"></i>
|
||||
配置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Channel 5: 邮件工单 (Disabled) -->
|
||||
<div class="rounded-lg border p-4" style="background: var(--neutral-0); border-color: var(--neutral-200); opacity: 0.7;">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="flex-shrink-0 flex items-center justify-center rounded-lg"
|
||||
style="width: 40px; height: 40px; background: var(--neutral-100);">
|
||||
<i data-lucide="mail" style="width: 20px; height: 20px; color: var(--neutral-400);"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<h3 class="text-sm font-medium truncate" style="color: var(--neutral-900);">邮件工单</h3>
|
||||
<span class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium whitespace-nowrap"
|
||||
style="background: var(--neutral-100); color: var(--neutral-400);">未启用</span>
|
||||
</div>
|
||||
<div class="flex-shrink-0 toggle-switch" style="width: 36px; height: 20px; background: var(--neutral-300); border-radius: var(--radius-full); position: relative; cursor: pointer; transition: background var(--transition-fast);">
|
||||
<div style="width: 16px; height: 16px; background: var(--neutral-0); border-radius: var(--radius-full); position: absolute; top: 2px; left: 2px; transition: left var(--transition-fast); box-shadow: 0 1px 2px rgba(0,0,0,0.1);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 mb-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i data-lucide="users" style="width: 12px; height: 12px; color: var(--neutral-300);"></i>
|
||||
<span class="text-xs" style="color: var(--neutral-400);">今日接入 <span class="font-medium" style="color: var(--neutral-400);">0</span></span>
|
||||
</div>
|
||||
<!-- Sparkline (flat) -->
|
||||
<div class="sparkline-container flex items-end gap-0.5 ml-auto" style="height: 24px;">
|
||||
<div class="sparkline-bar" style="width: 4px; height: 2px; background: var(--neutral-200); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 2px; background: var(--neutral-200); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 2px; background: var(--neutral-200); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 2px; background: var(--neutral-200); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 2px; background: var(--neutral-200); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 2px; background: var(--neutral-200); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 2px; background: var(--neutral-200); border-radius: 1px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2 rounded-md px-3 py-1.5" style="background: var(--neutral-50);">
|
||||
<i data-lucide="info" style="width: 12px; height: 12px; color: var(--neutral-400);"></i>
|
||||
<span class="text-xs truncate" style="color: var(--neutral-400);">支持自动创建工单并分配处理</span>
|
||||
</div>
|
||||
<button class="flex items-center gap-1.5 rounded-lg px-3 text-xs font-medium whitespace-nowrap transition-colors cursor-pointer"
|
||||
style="height: 32px; background: var(--neutral-100); color: var(--neutral-700); border: 1px solid var(--neutral-200);">
|
||||
<i data-lucide="settings-2" style="width: 13px; height: 13px;"></i>
|
||||
配置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- End Channel Cards List -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Settings Configuration Panel -->
|
||||
|
||||
</div>
|
||||
<!-- End Main Content Area -->
|
||||
|
||||
</main>
|
||||
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,680 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user