608 lines
36 KiB
HTML
608 lines
36 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN" class="light">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>运营概览 - 客服云管理</title>
|
|
<style id="theme-vars">
|
|
/* 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>
|