初始化项目：前端 React+TS+Tailwind+antd 脚手架，后端 Go，保留原型设计稿
This commit is contained in:
yml2213
@@ -0,0 +1,8 @@
|
||||
node_modules/
|
||||
dist/
|
||||
.env
|
||||
.env.*
|
||||
.DS_Store
|
||||
*.log
|
||||
.vscode/
|
||||
.idea/
|
||||
@@ -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>
|
||||
@@ -0,0 +1,733 @@
|
||||
<!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>
|
||||
<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-primary-dark: var(--brand-primary-dark);
|
||||
--color-foreground: var(--neutral-900);
|
||||
--color-muted: var(--neutral-400);
|
||||
--color-background: var(--neutral-50);
|
||||
--color-card: var(--neutral-0);
|
||||
--color-border: var(--neutral-200);
|
||||
--font-family-base: var(--font-family-base);
|
||||
}
|
||||
@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;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
||||
<script src="https://unpkg.com/lucide@1.7.0"></script>
|
||||
</head>
|
||||
<body class="antialiased">
|
||||
|
||||
<!-- Layout: Sidebar + Main Content -->
|
||||
<div class="flex h-screen overflow-hidden">
|
||||
|
||||
<!-- ========== LEFT SIDEBAR (240px) ========== -->
|
||||
<aside class="shrink-0 flex flex-col border-r" style="width: var(--sidebar-width); background-color: var(--neutral-0); border-color: var(--neutral-200);">
|
||||
|
||||
<!-- Brand -->
|
||||
<div class="flex items-center gap-2 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-color: var(--brand-primary);">
|
||||
<i data-lucide="headphones" style="width:18px; height:18px; color: var(--neutral-0);"></i>
|
||||
</div>
|
||||
<span class="truncate font-semibold" style="font-size: var(--font-size-lg); color: var(--neutral-900);">在线客服</span>
|
||||
</div>
|
||||
|
||||
<!-- Nav Items -->
|
||||
<nav class="flex flex-col gap-0.5 px-2 py-3 flex-1 overflow-y-auto">
|
||||
<a href="#" class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors" style="color: var(--neutral-600);" data-dom-id="nav-dashboard">
|
||||
<i data-lucide="layout-dashboard" style="width:18px; height:18px;"></i>
|
||||
<span class="truncate">工作台</span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors" style="color: var(--neutral-600);" data-dom-id="nav-customers">
|
||||
<i data-lucide="users" style="width:18px; height:18px;"></i>
|
||||
<span class="truncate">客户管理</span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium" style="background-color: var(--brand-primary-light); color: var(--brand-primary);" data-dom-id="nav-history">
|
||||
<i data-lucide="message-square-text" style="width:18px; height:18px;"></i>
|
||||
<span class="truncate">对话记录</span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors" style="color: var(--neutral-600);" data-dom-id="nav-knowledge">
|
||||
<i data-lucide="book-open" style="width:18px; height:18px;"></i>
|
||||
<span class="truncate">知识库</span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors" style="color: var(--neutral-600);" data-dom-id="nav-statistics">
|
||||
<i data-lucide="bar-chart-3" style="width:18px; height:18px;"></i>
|
||||
<span class="truncate">数据统计</span>
|
||||
</a>
|
||||
|
||||
<div style="border-top: 1px solid var(--neutral-200); margin: var(--space-3) var(--space-1);"></div>
|
||||
|
||||
<a href="#" class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors" style="color: var(--neutral-600);" data-dom-id="nav-settings">
|
||||
<i data-lucide="settings" style="width:18px; height:18px;"></i>
|
||||
<span class="truncate">系统设置</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<!-- Sidebar Footer -->
|
||||
<div class="flex items-center gap-2 px-4 shrink-0" style="height: 48px; border-top: 1px solid var(--neutral-200);">
|
||||
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 28px; height: 28px; background-color: var(--brand-primary-light); color: var(--brand-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);">
|
||||
张
|
||||
</div>
|
||||
<span class="truncate text-sm" style="color: var(--neutral-700);">张明</span>
|
||||
<i data-lucide="chevron-down" style="width:14px; height:14px; color: var(--neutral-400); margin-left: auto;"></i>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- ========== MAIN CONTENT AREA ========== -->
|
||||
<main class="flex flex-col flex-1 overflow-hidden">
|
||||
|
||||
<!-- Top Header Bar -->
|
||||
<header class="flex items-center justify-between px-6 shrink-0" style="height: var(--header-height); background-color: var(--neutral-0); border-bottom: 1px solid var(--neutral-200);">
|
||||
<h1 class="font-semibold" style="font-size: var(--font-size-xl); color: var(--neutral-900); white-space: nowrap;">对话记录</h1>
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="flex items-center gap-1 rounded-lg px-3 text-sm" style="height: 32px; border: 1px solid var(--neutral-200); background-color: var(--neutral-0); color: var(--neutral-600); transition: var(--transition-fast);">
|
||||
<i data-lucide="download" style="width:14px; height:14px;"></i>
|
||||
<span>导出</span>
|
||||
</button>
|
||||
<button class="flex items-center gap-1 rounded-lg px-3 text-sm" style="height: 32px; border: 1px solid var(--neutral-200); background-color: var(--neutral-0); color: var(--neutral-600); transition: var(--transition-fast);">
|
||||
<i data-lucide="archive" style="width:14px; height:14px;"></i>
|
||||
<span>批量归档</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Content Body: Filters + List + Detail -->
|
||||
<div class="flex flex-1 overflow-hidden">
|
||||
|
||||
<!-- ====== CENTER: Filters + Session List ====== -->
|
||||
<div class="flex flex-col flex-1 overflow-hidden">
|
||||
|
||||
<!-- Search & Filter Bar -->
|
||||
<div class="px-6 py-3 shrink-0" style="border-bottom: 1px solid var(--neutral-200); background-color: var(--neutral-0);">
|
||||
<!-- First Row: Search + Date -->
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="flex items-center gap-2 flex-1 min-w-0" style="border: 1px solid var(--neutral-200); border-radius: var(--radius-md); padding: 0 var(--space-3); height: 32px; background-color: var(--neutral-0);">
|
||||
<i data-lucide="search" style="width:14px; height:14px; color: var(--neutral-400); shrink:0;"></i>
|
||||
<input type="text" placeholder="搜索客户名称、会话内容..." class="flex-1 min-w-0 bg-transparent border-none outline-none text-sm" style="color: var(--neutral-800); font-size: var(--font-size-sm);">
|
||||
</div>
|
||||
<div class="flex items-center gap-2 shrink-0" style="border: 1px solid var(--neutral-200); border-radius: var(--radius-md); padding: 0 var(--space-3); height: 32px; background-color: var(--neutral-0);">
|
||||
<i data-lucide="calendar" style="width:14px; height:14px; color: var(--neutral-400); shrink:0;"></i>
|
||||
<span class="text-sm whitespace-nowrap" style="color: var(--neutral-500);">2026-07-01 ~ 2026-07-09</span>
|
||||
</div>
|
||||
<button class="shrink-0 rounded-lg px-3 text-sm font-medium" style="height: 32px; background-color: var(--brand-primary); color: var(--neutral-0); transition: var(--transition-fast);">
|
||||
搜索
|
||||
</button>
|
||||
</div>
|
||||
<!-- Second Row: Filter Tags -->
|
||||
<div class="flex items-center gap-3 overflow-x-auto">
|
||||
<div class="flex items-center gap-1 shrink-0">
|
||||
<span class="text-sm whitespace-nowrap" style="color: var(--neutral-500);">渠道:</span>
|
||||
<select class="rounded-md text-sm outline-none cursor-pointer" style="border: 1px solid var(--neutral-200); padding: 2px var(--space-2); height: 28px; background-color: var(--neutral-0); color: var(--neutral-700); font-size: var(--font-size-sm);">
|
||||
<option>全部</option>
|
||||
<option>网页</option>
|
||||
<option>微信</option>
|
||||
<option>APP</option>
|
||||
<option>电话</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 shrink-0">
|
||||
<span class="text-sm whitespace-nowrap" style="color: var(--neutral-500);">客服:</span>
|
||||
<select class="rounded-md text-sm outline-none cursor-pointer" style="border: 1px solid var(--neutral-200); padding: 2px var(--space-2); height: 28px; background-color: var(--neutral-0); color: var(--neutral-700); font-size: var(--font-size-sm);">
|
||||
<option>全部</option>
|
||||
<option>张明</option>
|
||||
<option>李婷</option>
|
||||
<option>王磊</option>
|
||||
<option>赵雪</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 shrink-0">
|
||||
<span class="text-sm whitespace-nowrap" style="color: var(--neutral-500);">状态:</span>
|
||||
<select class="rounded-md text-sm outline-none cursor-pointer" style="border: 1px solid var(--neutral-200); padding: 2px var(--space-2); height: 28px; background-color: var(--neutral-0); color: var(--neutral-700); font-size: var(--font-size-sm);">
|
||||
<option>全部</option>
|
||||
<option>进行中</option>
|
||||
<option>已结束</option>
|
||||
<option>已归档</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="ml-auto flex items-center gap-2 shrink-0">
|
||||
<span class="text-sm whitespace-nowrap" style="color: var(--neutral-400);">共 6 条记录</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Session List (Scrollable) -->
|
||||
<div class="flex-1 overflow-y-auto px-6 py-4" style="background-color: var(--neutral-50);">
|
||||
<div class="flex flex-col gap-3">
|
||||
|
||||
<!-- ===== Session Card 1 (Selected) ===== -->
|
||||
<div class="rounded-lg p-4 cursor-pointer" style="background-color: var(--neutral-0); border: 2px solid var(--brand-primary); box-shadow: var(--shadow-md);">
|
||||
<div class="flex items-start gap-3">
|
||||
<!-- Avatar + Satisfaction indicator (top-right) -->
|
||||
<div class="relative shrink-0">
|
||||
<div class="flex items-center justify-center rounded-full" style="width: 40px; height: 40px; background-color: var(--brand-primary-light); color: var(--brand-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);">
|
||||
李
|
||||
</div>
|
||||
<!-- Satisfaction: green smiley (top-right corner) -->
|
||||
<div class="absolute flex items-center justify-center rounded-full" style="top: -4px; right: -4px; width: 16px; height: 16px; background-color: var(--state-success); box-shadow: 0 0 0 2px var(--neutral-0);">
|
||||
<svg width="8" height="8" viewBox="0 0 16 16" fill="none">
|
||||
<circle cx="8" cy="8" r="7" fill="white" fill-opacity="0.9"/>
|
||||
<circle cx="5.5" cy="6" r="1.2" fill="#16a34a"/>
|
||||
<circle cx="10.5" cy="6" r="1.2" fill="#16a34a"/>
|
||||
<path d="M5 10 Q8 13 11 10" stroke="#16a34a" stroke-width="1.2" fill="none" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="font-medium truncate" style="font-size: var(--font-size-base); color: var(--neutral-900);">李晓华</span>
|
||||
<span class="inline-flex items-center rounded px-1.5 py-0.5 whitespace-nowrap text-xs" style="background-color: var(--state-info-bg); color: var(--state-info); font-size: var(--font-size-xs);">网页</span>
|
||||
<span class="inline-flex items-center rounded px-1.5 py-0.5 whitespace-nowrap text-xs" style="background-color: var(--state-success-bg); color: var(--state-success); font-size: var(--font-size-xs);">已解决</span>
|
||||
<span class="ml-auto inline-flex items-center rounded px-1.5 py-0.5 whitespace-nowrap text-xs" style="background-color: var(--neutral-100); color: var(--neutral-500); font-size: var(--font-size-xs);">已结束</span>
|
||||
</div>
|
||||
<p class="truncate mb-2" style="font-size: var(--font-size-sm); color: var(--neutral-500);">想咨询一下你们产品的退换货政策，昨天买了一件商品发现尺码不合适...</p>
|
||||
<div class="flex items-center gap-4 flex-wrap">
|
||||
<span class="flex items-center gap-1 text-xs whitespace-nowrap" style="color: var(--neutral-400);">
|
||||
<i data-lucide="user" style="width:12px; height:12px;"></i>客服: 张明
|
||||
</span>
|
||||
<span class="flex items-center gap-1 text-xs whitespace-nowrap" style="color: var(--neutral-400);">
|
||||
<i data-lucide="clock" style="width:12px; height:12px;"></i>07-08 14:23 ~ 14:45
|
||||
</span>
|
||||
<span class="flex items-center gap-1 text-xs whitespace-nowrap" style="color: var(--neutral-400);">
|
||||
<i data-lucide="timer" style="width:12px; height:12px;"></i>22分钟
|
||||
</span>
|
||||
<span class="flex items-center gap-1 text-xs whitespace-nowrap" style="color: var(--neutral-400);">
|
||||
<i data-lucide="message-circle" style="width:12px; height:12px;"></i>18条消息
|
||||
</span>
|
||||
<span class="flex items-center gap-0.5 ml-auto" style="color: var(--state-warning);">
|
||||
<i data-lucide="star" style="width:12px; height:12px; fill: var(--state-warning);"></i>
|
||||
<i data-lucide="star" style="width:12px; height:12px; fill: var(--state-warning);"></i>
|
||||
<i data-lucide="star" style="width:12px; height:12px; fill: var(--state-warning);"></i>
|
||||
<i data-lucide="star" style="width:12px; height:12px; fill: var(--state-warning);"></i>
|
||||
<i data-lucide="star" style="width:12px; height:12px; fill: var(--neutral-200);"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== Session Card 2 ===== -->
|
||||
<div class="rounded-lg p-4 cursor-pointer" style="background-color: var(--neutral-0); border: 1px solid var(--neutral-200); box-shadow: var(--shadow-sm);">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="relative shrink-0">
|
||||
<div class="flex items-center justify-center rounded-full" style="width: 40px; height: 40px; background-color: var(--state-info-bg); color: var(--state-info); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);">
|
||||
王
|
||||
</div>
|
||||
<!-- Satisfaction: green smiley -->
|
||||
<div class="absolute flex items-center justify-center rounded-full" style="top: -4px; right: -4px; width: 16px; height: 16px; background-color: var(--state-success); box-shadow: 0 0 0 2px var(--neutral-0);">
|
||||
<svg width="8" height="8" viewBox="0 0 16 16" fill="none">
|
||||
<circle cx="8" cy="8" r="7" fill="white" fill-opacity="0.9"/>
|
||||
<circle cx="5.5" cy="6" r="1.2" fill="#16a34a"/>
|
||||
<circle cx="10.5" cy="6" r="1.2" fill="#16a34a"/>
|
||||
<path d="M5 10 Q8 13 11 10" stroke="#16a34a" stroke-width="1.2" fill="none" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="font-medium truncate" style="font-size: var(--font-size-base); color: var(--neutral-900);">王建国</span>
|
||||
<span class="inline-flex items-center rounded px-1.5 py-0.5 whitespace-nowrap text-xs" style="background-color: var(--brand-primary-lighter); color: var(--brand-primary); font-size: var(--font-size-xs);">微信</span>
|
||||
<span class="inline-flex items-center rounded px-1.5 py-0.5 whitespace-nowrap text-xs" style="background-color: var(--state-warning-bg); color: var(--state-warning); font-size: var(--font-size-xs);">待跟进</span>
|
||||
<span class="ml-auto inline-flex items-center rounded px-1.5 py-0.5 whitespace-nowrap text-xs" style="background-color: var(--brand-primary-light); color: var(--brand-primary); font-size: var(--font-size-xs);">进行中</span>
|
||||
</div>
|
||||
<p class="truncate mb-2" style="font-size: var(--font-size-sm); color: var(--neutral-500);">你好，我的订单已经超过预计送达时间了，物流一直显示在运输中但没有更新...</p>
|
||||
<div class="flex items-center gap-4 flex-wrap">
|
||||
<span class="flex items-center gap-1 text-xs whitespace-nowrap" style="color: var(--neutral-400);">
|
||||
<i data-lucide="user" style="width:12px; height:12px;"></i>客服: 李婷
|
||||
</span>
|
||||
<span class="flex items-center gap-1 text-xs whitespace-nowrap" style="color: var(--neutral-400);">
|
||||
<i data-lucide="clock" style="width:12px; height:12px;"></i>07-09 09:15 开始
|
||||
</span>
|
||||
<span class="flex items-center gap-1 text-xs whitespace-nowrap" style="color: var(--neutral-400);">
|
||||
<i data-lucide="timer" style="width:12px; height:12px;"></i>进行中
|
||||
</span>
|
||||
<span class="flex items-center gap-1 text-xs whitespace-nowrap" style="color: var(--neutral-400);">
|
||||
<i data-lucide="message-circle" style="width:12px; height:12px;"></i>7条消息
|
||||
</span>
|
||||
<span class="flex items-center gap-0.5 ml-auto" style="color: var(--state-warning);">
|
||||
<i data-lucide="star" style="width:12px; height:12px; fill: var(--state-warning);"></i>
|
||||
<i data-lucide="star" style="width:12px; height:12px; fill: var(--state-warning);"></i>
|
||||
<i data-lucide="star" style="width:12px; height:12px; fill: var(--state-warning);"></i>
|
||||
<i data-lucide="star" style="width:12px; height:12px; fill: var(--state-warning);"></i>
|
||||
<i data-lucide="star" style="width:12px; height:12px; fill: var(--state-warning);"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== Session Card 3 ===== -->
|
||||
<div class="rounded-lg p-4 cursor-pointer" style="background-color: var(--neutral-0); border: 1px solid var(--neutral-200); box-shadow: var(--shadow-sm);">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="relative shrink-0">
|
||||
<div class="flex items-center justify-center rounded-full" style="width: 40px; height: 40px; background-color: var(--state-error-bg); color: var(--state-error); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);">
|
||||
陈
|
||||
</div>
|
||||
<!-- Satisfaction: red sad face -->
|
||||
<div class="absolute flex items-center justify-center rounded-full" style="top: -4px; right: -4px; width: 16px; height: 16px; background-color: var(--state-error); box-shadow: 0 0 0 2px var(--neutral-0);">
|
||||
<svg width="8" height="8" viewBox="0 0 16 16" fill="none">
|
||||
<circle cx="8" cy="8" r="7" fill="white" fill-opacity="0.9"/>
|
||||
<circle cx="5.5" cy="6" r="1.2" fill="#dc2626"/>
|
||||
<circle cx="10.5" cy="6" r="1.2" fill="#dc2626"/>
|
||||
<path d="M5 11 Q8 8 11 11" stroke="#dc2626" stroke-width="1.2" fill="none" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="font-medium truncate" style="font-size: var(--font-size-base); color: var(--neutral-900);">陈美玲</span>
|
||||
<span class="inline-flex items-center rounded px-1.5 py-0.5 whitespace-nowrap text-xs" style="background-color: var(--state-info-bg); color: var(--state-info); font-size: var(--font-size-xs);">网页</span>
|
||||
<span class="inline-flex items-center rounded px-1.5 py-0.5 whitespace-nowrap text-xs" style="background-color: var(--state-error-bg); color: var(--state-error); font-size: var(--font-size-xs);">投诉</span>
|
||||
<span class="ml-auto inline-flex items-center rounded px-1.5 py-0.5 whitespace-nowrap text-xs" style="background-color: var(--neutral-100); color: var(--neutral-500); font-size: var(--font-size-xs);">已结束</span>
|
||||
</div>
|
||||
<p class="truncate mb-2" style="font-size: var(--font-size-sm); color: var(--neutral-500);">非常不满意！我上周买的产品质量有严重问题，你们客服一直推诿不给处理...</p>
|
||||
<div class="flex items-center gap-4 flex-wrap">
|
||||
<span class="flex items-center gap-1 text-xs whitespace-nowrap" style="color: var(--neutral-400);">
|
||||
<i data-lucide="user" style="width:12px; height:12px;"></i>客服: 王磊
|
||||
</span>
|
||||
<span class="flex items-center gap-1 text-xs whitespace-nowrap" style="color: var(--neutral-400);">
|
||||
<i data-lucide="clock" style="width:12px; height:12px;"></i>07-07 16:40 ~ 17:25
|
||||
</span>
|
||||
<span class="flex items-center gap-1 text-xs whitespace-nowrap" style="color: var(--neutral-400);">
|
||||
<i data-lucide="timer" style="width:12px; height:12px;"></i>45分钟
|
||||
</span>
|
||||
<span class="flex items-center gap-1 text-xs whitespace-nowrap" style="color: var(--neutral-400);">
|
||||
<i data-lucide="message-circle" style="width:12px; height:12px;"></i>32条消息
|
||||
</span>
|
||||
<span class="flex items-center gap-0.5 ml-auto" style="color: var(--neutral-300);">
|
||||
<i data-lucide="star" style="width:12px; height:12px; fill: var(--state-error);"></i>
|
||||
<i data-lucide="star" style="width:12px; height:12px; fill: var(--neutral-200);"></i>
|
||||
<i data-lucide="star" style="width:12px; height:12px; fill: var(--neutral-200);"></i>
|
||||
<i data-lucide="star" style="width:12px; height:12px; fill: var(--neutral-200);"></i>
|
||||
<i data-lucide="star" style="width:12px; height:12px; fill: var(--neutral-200);"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== Session Card 4 ===== -->
|
||||
<div class="rounded-lg p-4 cursor-pointer" style="background-color: var(--neutral-0); border: 1px solid var(--neutral-200); box-shadow: var(--shadow-sm);">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="relative shrink-0">
|
||||
<div class="flex items-center justify-center rounded-full" style="width: 40px; height: 40px; background-color: var(--state-warning-bg); color: var(--state-warning); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);">
|
||||
赵
|
||||
</div>
|
||||
<!-- Satisfaction: neutral gray -->
|
||||
<div class="absolute flex items-center justify-center rounded-full" style="top: -4px; right: -4px; width: 16px; height: 16px; background-color: var(--neutral-400); box-shadow: 0 0 0 2px var(--neutral-0);">
|
||||
<svg width="8" height="8" viewBox="0 0 16 16" fill="none">
|
||||
<circle cx="8" cy="8" r="7" fill="white" fill-opacity="0.9"/>
|
||||
<circle cx="5.5" cy="7" r="1.2" fill="#64748b"/>
|
||||
<circle cx="10.5" cy="7" r="1.2" fill="#64748b"/>
|
||||
<line x1="5.5" y1="11" x2="10.5" y2="11" stroke="#64748b" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="font-medium truncate" style="font-size: var(--font-size-base); color: var(--neutral-900);">赵佳宁</span>
|
||||
<span class="inline-flex items-center rounded px-1.5 py-0.5 whitespace-nowrap text-xs" style="background-color: var(--state-success-bg); color: var(--state-success); font-size: var(--font-size-xs);">APP</span>
|
||||
<span class="inline-flex items-center rounded px-1.5 py-0.5 whitespace-nowrap text-xs" style="background-color: var(--state-success-bg); color: var(--state-success); font-size: var(--font-size-xs);">已解决</span>
|
||||
<span class="ml-auto inline-flex items-center rounded px-1.5 py-0.5 whitespace-nowrap text-xs" style="background-color: var(--neutral-100); color: var(--neutral-500); font-size: var(--font-size-xs);">已归档</span>
|
||||
</div>
|
||||
<p class="truncate mb-2" style="font-size: var(--font-size-sm); color: var(--neutral-500);">请问会员积分怎么兑换？我看到有优惠券但是不知道怎么使用...</p>
|
||||
<div class="flex items-center gap-4 flex-wrap">
|
||||
<span class="flex items-center gap-1 text-xs whitespace-nowrap" style="color: var(--neutral-400);">
|
||||
<i data-lucide="user" style="width:12px; height:12px;"></i>客服: 赵雪
|
||||
</span>
|
||||
<span class="flex items-center gap-1 text-xs whitespace-nowrap" style="color: var(--neutral-400);">
|
||||
<i data-lucide="clock" style="width:12px; height:12px;"></i>07-05 11:20 ~ 11:32
|
||||
</span>
|
||||
<span class="flex items-center gap-1 text-xs whitespace-nowrap" style="color: var(--neutral-400);">
|
||||
<i data-lucide="timer" style="width:12px; height:12px;"></i>12分钟
|
||||
</span>
|
||||
<span class="flex items-center gap-1 text-xs whitespace-nowrap" style="color: var(--neutral-400);">
|
||||
<i data-lucide="message-circle" style="width:12px; height:12px;"></i>9条消息
|
||||
</span>
|
||||
<span class="flex items-center gap-0.5 ml-auto" style="color: var(--neutral-300);">
|
||||
<i data-lucide="star" style="width:12px; height:12px; fill: var(--neutral-300);"></i>
|
||||
<i data-lucide="star" style="width:12px; height:12px; fill: var(--neutral-300);"></i>
|
||||
<i data-lucide="star" style="width:12px; height:12px; fill: var(--neutral-300);"></i>
|
||||
<i data-lucide="star" style="width:12px; height:12px; fill: var(--neutral-200);"></i>
|
||||
<i data-lucide="star" style="width:12px; height:12px; fill: var(--neutral-200);"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== Session Card 5 ===== -->
|
||||
<div class="rounded-lg p-4 cursor-pointer" style="background-color: var(--neutral-0); border: 1px solid var(--neutral-200); box-shadow: var(--shadow-sm);">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="relative shrink-0">
|
||||
<div class="flex items-center justify-center rounded-full" style="width: 40px; height: 40px; background-color: var(--brand-primary-light); color: var(--brand-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);">
|
||||
刘
|
||||
</div>
|
||||
<!-- Satisfaction: green smiley -->
|
||||
<div class="absolute flex items-center justify-center rounded-full" style="top: -4px; right: -4px; width: 16px; height: 16px; background-color: var(--state-success); box-shadow: 0 0 0 2px var(--neutral-0);">
|
||||
<svg width="8" height="8" viewBox="0 0 16 16" fill="none">
|
||||
<circle cx="8" cy="8" r="7" fill="white" fill-opacity="0.9"/>
|
||||
<circle cx="5.5" cy="6" r="1.2" fill="#16a34a"/>
|
||||
<circle cx="10.5" cy="6" r="1.2" fill="#16a34a"/>
|
||||
<path d="M5 10 Q8 13 11 10" stroke="#16a34a" stroke-width="1.2" fill="none" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="font-medium truncate" style="font-size: var(--font-size-base); color: var(--neutral-900);">刘浩然</span>
|
||||
<span class="inline-flex items-center rounded px-1.5 py-0.5 whitespace-nowrap text-xs" style="background-color: var(--state-warning-bg); color: var(--state-warning); font-size: var(--font-size-xs);">电话</span>
|
||||
<span class="inline-flex items-center rounded px-1.5 py-0.5 whitespace-nowrap text-xs" style="background-color: var(--state-success-bg); color: var(--state-success); font-size: var(--font-size-xs);">已解决</span>
|
||||
<span class="ml-auto inline-flex items-center rounded px-1.5 py-0.5 whitespace-nowrap text-xs" style="background-color: var(--neutral-100); color: var(--neutral-500); font-size: var(--font-size-xs);">已结束</span>
|
||||
</div>
|
||||
<p class="truncate mb-2" style="font-size: var(--font-size-sm); color: var(--neutral-500);">电话咨询批量采购的合作方案，需要了解企业客户的价格体系...</p>
|
||||
<div class="flex items-center gap-4 flex-wrap">
|
||||
<span class="flex items-center gap-1 text-xs whitespace-nowrap" style="color: var(--neutral-400);">
|
||||
<i data-lucide="user" style="width:12px; height:12px;"></i>客服: 张明
|
||||
</span>
|
||||
<span class="flex items-center gap-1 text-xs whitespace-nowrap" style="color: var(--neutral-400);">
|
||||
<i data-lucide="clock" style="width:12px; height:12px;"></i>07-04 10:00 ~ 10:28
|
||||
</span>
|
||||
<span class="flex items-center gap-1 text-xs whitespace-nowrap" style="color: var(--neutral-400);">
|
||||
<i data-lucide="timer" style="width:12px; height:12px;"></i>28分钟
|
||||
</span>
|
||||
<span class="flex items-center gap-1 text-xs whitespace-nowrap" style="color: var(--neutral-400);">
|
||||
<i data-lucide="message-circle" style="width:12px; height:12px;"></i>14条消息
|
||||
</span>
|
||||
<span class="flex items-center gap-0.5 ml-auto" style="color: var(--state-warning);">
|
||||
<i data-lucide="star" style="width:12px; height:12px; fill: var(--state-warning);"></i>
|
||||
<i data-lucide="star" style="width:12px; height:12px; fill: var(--state-warning);"></i>
|
||||
<i data-lucide="star" style="width:12px; height:12px; fill: var(--state-warning);"></i>
|
||||
<i data-lucide="star" style="width:12px; height:12px; fill: var(--state-warning);"></i>
|
||||
<i data-lucide="star" style="width:12px; height:12px; fill: var(--state-warning);"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== Session Card 6 ===== -->
|
||||
<div class="rounded-lg p-4 cursor-pointer" style="background-color: var(--neutral-0); border: 1px solid var(--neutral-200); box-shadow: var(--shadow-sm);">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="relative shrink-0">
|
||||
<div class="flex items-center justify-center rounded-full" style="width: 40px; height: 40px; background-color: var(--brand-primary-light); color: var(--brand-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);">
|
||||
孙
|
||||
</div>
|
||||
<!-- Satisfaction: green smiley -->
|
||||
<div class="absolute flex items-center justify-center rounded-full" style="top: -4px; right: -4px; width: 16px; height: 16px; background-color: var(--state-success); box-shadow: 0 0 0 2px var(--neutral-0);">
|
||||
<svg width="8" height="8" viewBox="0 0 16 16" fill="none">
|
||||
<circle cx="8" cy="8" r="7" fill="white" fill-opacity="0.9"/>
|
||||
<circle cx="5.5" cy="6" r="1.2" fill="#16a34a"/>
|
||||
<circle cx="10.5" cy="6" r="1.2" fill="#16a34a"/>
|
||||
<path d="M5 10 Q8 13 11 10" stroke="#16a34a" stroke-width="1.2" fill="none" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="font-medium truncate" style="font-size: var(--font-size-base); color: var(--neutral-900);">孙雅琪</span>
|
||||
<span class="inline-flex items-center rounded px-1.5 py-0.5 whitespace-nowrap text-xs" style="background-color: var(--state-info-bg); color: var(--state-info); font-size: var(--font-size-xs);">网页</span>
|
||||
<span class="inline-flex items-center rounded px-1.5 py-0.5 whitespace-nowrap text-xs" style="background-color: var(--state-success-bg); color: var(--state-success); font-size: var(--font-size-xs);">已解决</span>
|
||||
<span class="ml-auto inline-flex items-center rounded px-1.5 py-0.5 whitespace-nowrap text-xs" style="background-color: var(--neutral-100); color: var(--neutral-500); font-size: var(--font-size-xs);">已结束</span>
|
||||
</div>
|
||||
<p class="truncate mb-2" style="font-size: var(--font-size-sm); color: var(--neutral-500);">请问发票怎么开具？我上个月的订单需要开具增值税发票给公司报销...</p>
|
||||
<div class="flex items-center gap-4 flex-wrap">
|
||||
<span class="flex items-center gap-1 text-xs whitespace-nowrap" style="color: var(--neutral-400);">
|
||||
<i data-lucide="user" style="width:12px; height:12px;"></i>客服: 李婷
|
||||
</span>
|
||||
<span class="flex items-center gap-1 text-xs whitespace-nowrap" style="color: var(--neutral-400);">
|
||||
<i data-lucide="clock" style="width:12px; height:12px;"></i>07-03 15:10 ~ 15:20
|
||||
</span>
|
||||
<span class="flex items-center gap-1 text-xs whitespace-nowrap" style="color: var(--neutral-400);">
|
||||
<i data-lucide="timer" style="width:12px; height:12px;"></i>10分钟
|
||||
</span>
|
||||
<span class="flex items-center gap-1 text-xs whitespace-nowrap" style="color: var(--neutral-400);">
|
||||
<i data-lucide="message-circle" style="width:12px; height:12px;"></i>11条消息
|
||||
</span>
|
||||
<span class="flex items-center gap-0.5 ml-auto" style="color: var(--state-warning);">
|
||||
<i data-lucide="star" style="width:12px; height:12px; fill: var(--state-warning);"></i>
|
||||
<i data-lucide="star" style="width:12px; height:12px; fill: var(--state-warning);"></i>
|
||||
<i data-lucide="star" style="width:12px; height:12px; fill: var(--state-warning);"></i>
|
||||
<i data-lucide="star" style="width:12px; height:12px; fill: var(--state-warning);"></i>
|
||||
<i data-lucide="star" style="width:12px; height:12px; fill: var(--neutral-200);"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ====== RIGHT DETAIL PANEL ====== -->
|
||||
<div class="shrink-0 flex flex-col overflow-hidden" style="width: var(--chat-panel-max); border-left: 1px solid var(--neutral-200); background-color: var(--neutral-0);">
|
||||
|
||||
<!-- Detail Panel Header -->
|
||||
<div class="flex items-center justify-between px-4 shrink-0" style="height: var(--header-height); border-bottom: 1px solid var(--neutral-200);">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<span class="font-medium truncate" style="font-size: var(--font-size-base); color: var(--neutral-900);">会话详情</span>
|
||||
<span class="truncate" style="font-size: var(--font-size-sm); color: var(--neutral-400);">- 李晓华</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 shrink-0">
|
||||
<button class="flex items-center justify-center rounded-md" style="width: 28px; height: 28px; color: var(--neutral-400); transition: var(--transition-fast);" title="关闭">
|
||||
<i data-lucide="x" style="width:16px; height:16px;"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Session Meta Info -->
|
||||
<div class="px-4 py-3 shrink-0" style="border-bottom: 1px solid var(--neutral-200); background-color: var(--neutral-50);">
|
||||
<div class="grid gap-2" style="grid-template-columns: 1fr 1fr;">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs whitespace-nowrap" style="color: var(--neutral-400);">渠道</span>
|
||||
<span class="inline-flex items-center rounded px-1.5 py-0.5 text-xs whitespace-nowrap" style="background-color: var(--state-info-bg); color: var(--state-info); font-size: var(--font-size-xs);">网页</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs whitespace-nowrap" style="color: var(--neutral-400);">客服</span>
|
||||
<span class="text-xs truncate" style="color: var(--neutral-700);">张明</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs whitespace-nowrap" style="color: var(--neutral-400);">开始</span>
|
||||
<span class="text-xs" style="color: var(--neutral-700);">2026-07-08 14:23</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs whitespace-nowrap" style="color: var(--neutral-400);">时长</span>
|
||||
<span class="text-xs" style="color: var(--neutral-700);">22分钟</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chat Messages (Scrollable) -->
|
||||
<div class="flex-1 overflow-y-auto px-4 py-4" style="background-color: var(--neutral-50);">
|
||||
<div class="flex flex-col gap-3">
|
||||
|
||||
<!-- System message -->
|
||||
<div class="flex justify-center">
|
||||
<span class="rounded-full px-3 py-1 text-xs whitespace-nowrap" style="background-color: var(--neutral-200); color: var(--neutral-500);">会话开始 · 2026-07-08 14:23</span>
|
||||
</div>
|
||||
|
||||
<!-- Customer message -->
|
||||
<div class="flex items-end gap-2 max-w-[85%]">
|
||||
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 28px; height: 28px; background-color: var(--brand-primary-light); color: var(--brand-primary); font-size: 11px; font-weight: var(--font-weight-semibold);">李</div>
|
||||
<div class="rounded-lg px-3 py-2" style="background-color: var(--neutral-0); border: 1px solid var(--neutral-200);">
|
||||
<p class="text-sm" style="color: var(--neutral-800);">你好，我想咨询一下你们产品的退换货政策</p>
|
||||
<span class="text-xs" style="color: var(--neutral-400);">14:23</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Agent message -->
|
||||
<div class="flex items-end gap-2 max-w-[85%] ml-auto flex-row-reverse">
|
||||
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 28px; height: 28px; background-color: var(--brand-primary); color: var(--neutral-0); font-size: 11px; font-weight: var(--font-weight-semibold);">张</div>
|
||||
<div class="rounded-lg px-3 py-2" style="background-color: var(--brand-primary-lighter); border: 1px solid var(--brand-primary-light);">
|
||||
<p class="text-sm" style="color: var(--neutral-800);">您好！请问是哪个订单呢？我们的退换货政策是：7天无理由退货，15天内可换货。</p>
|
||||
<span class="text-xs" style="color: var(--neutral-400);">14:24</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Customer message -->
|
||||
<div class="flex items-end gap-2 max-w-[85%]">
|
||||
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 28px; height: 28px; background-color: var(--brand-primary-light); color: var(--brand-primary); font-size: 11px; font-weight: var(--font-weight-semibold);">李</div>
|
||||
<div class="rounded-lg px-3 py-2" style="background-color: var(--neutral-0); border: 1px solid var(--neutral-200);">
|
||||
<p class="text-sm" style="color: var(--neutral-800);">订单号 ORD-20260708-3287，昨天买的一件衣服尺码不合适，想换大一码的</p>
|
||||
<span class="text-xs" style="color: var(--neutral-400);">14:25</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Agent message -->
|
||||
<div class="flex items-end gap-2 max-w-[85%] ml-auto flex-row-reverse">
|
||||
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 28px; height: 28px; background-color: var(--brand-primary); color: var(--neutral-0); font-size: 11px; font-weight: var(--font-weight-semibold);">张</div>
|
||||
<div class="rounded-lg px-3 py-2" style="background-color: var(--brand-primary-lighter); border: 1px solid var(--brand-primary-light);">
|
||||
<p class="text-sm" style="color: var(--neutral-800);">好的，我已经查到您的订单了。衣服可以换码，我帮您申请换货，新尺码会免费寄出。</p>
|
||||
<span class="text-xs" style="color: var(--neutral-400);">14:26</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Customer message -->
|
||||
<div class="flex items-end gap-2 max-w-[85%]">
|
||||
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 28px; height: 28px; background-color: var(--brand-primary-light); color: var(--brand-primary); font-size: 11px; font-weight: var(--font-weight-semibold);">李</div>
|
||||
<div class="rounded-lg px-3 py-2" style="background-color: var(--neutral-0); border: 1px solid var(--neutral-200);">
|
||||
<p class="text-sm" style="color: var(--neutral-800);">那原来的衣服怎么退回去？需要我自己付邮费吗？</p>
|
||||
<span class="text-xs" style="color: var(--neutral-400);">14:28</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Agent message -->
|
||||
<div class="flex items-end gap-2 max-w-[85%] ml-auto flex-row-reverse">
|
||||
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 28px; height: 28px; background-color: var(--brand-primary); color: var(--neutral-0); font-size: 11px; font-weight: var(--font-weight-semibold);">张</div>
|
||||
<div class="rounded-lg px-3 py-2" style="background-color: var(--brand-primary-lighter); border: 1px solid var(--brand-primary-light);">
|
||||
<p class="text-sm" style="color: var(--neutral-800);">不需要您付邮费，我们会安排快递上门取件。换货申请已提交，预计1-2个工作日上门。</p>
|
||||
<span class="text-xs" style="color: var(--neutral-400);">14:30</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Customer message -->
|
||||
<div class="flex items-end gap-2 max-w-[85%]">
|
||||
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 28px; height: 28px; background-color: var(--brand-primary-light); color: var(--brand-primary); font-size: 11px; font-weight: var(--font-weight-semibold);">李</div>
|
||||
<div class="rounded-lg px-3 py-2" style="background-color: var(--neutral-0); border: 1px solid var(--neutral-200);">
|
||||
<p class="text-sm" style="color: var(--neutral-800);">好的，谢谢你们服务很周到！</p>
|
||||
<span class="text-xs" style="color: var(--neutral-400);">14:32</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Agent message -->
|
||||
<div class="flex items-end gap-2 max-w-[85%] ml-auto flex-row-reverse">
|
||||
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 28px; height: 28px; background-color: var(--brand-primary); color: var(--neutral-0); font-size: 11px; font-weight: var(--font-weight-semibold);">张</div>
|
||||
<div class="rounded-lg px-3 py-2" style="background-color: var(--brand-primary-lighter); border: 1px solid var(--brand-primary-light);">
|
||||
<p class="text-sm" style="color: var(--neutral-800);">不客气！还有其他问题可以随时联系我们。祝您生活愉快！</p>
|
||||
<span class="text-xs" style="color: var(--neutral-400);">14:33</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- System message -->
|
||||
<div class="flex justify-center">
|
||||
<span class="rounded-full px-3 py-1 text-xs whitespace-nowrap" style="background-color: var(--neutral-200); color: var(--neutral-500);">会话结束 · 2026-07-08 14:45 · 共18条消息</span>
|
||||
</div>
|
||||
|
||||
<!-- Satisfaction rating -->
|
||||
<div class="flex justify-center">
|
||||
<div class="flex flex-col items-center gap-1 rounded-lg px-4 py-2" style="background-color: var(--neutral-0); border: 1px solid var(--neutral-200);">
|
||||
<span class="text-xs" style="color: var(--neutral-400);">客户评价</span>
|
||||
<div class="flex items-center gap-0.5">
|
||||
<i data-lucide="star" style="width:14px; height:14px; fill: var(--state-warning); color: var(--state-warning);"></i>
|
||||
<i data-lucide="star" style="width:14px; height:14px; fill: var(--state-warning); color: var(--state-warning);"></i>
|
||||
<i data-lucide="star" style="width:14px; height:14px; fill: var(--state-warning); color: var(--state-warning);"></i>
|
||||
<i data-lucide="star" style="width:14px; height:14px; fill: var(--state-warning); color: var(--state-warning);"></i>
|
||||
<i data-lucide="star" style="width:14px; height:14px; fill: var(--neutral-200); color: var(--neutral-200);"></i>
|
||||
</div>
|
||||
<span class="text-xs" style="color: var(--neutral-500);">服务很好，解决得很快</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,855 @@
|
||||
<!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/dist/umd/lucide.js"></script>
|
||||
<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>
|
||||
<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-foreground: var(--neutral-900);
|
||||
--color-background: var(--neutral-50);
|
||||
--color-card: var(--neutral-0);
|
||||
--color-muted: var(--neutral-100);
|
||||
--color-muted-foreground: var(--neutral-500);
|
||||
--color-border: var(--neutral-200);
|
||||
--color-border-strong: var(--neutral-300);
|
||||
--color-accent: var(--brand-primary-light);
|
||||
--color-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-sidebar: var(--neutral-0);
|
||||
--color-sidebar-foreground: var(--neutral-700);
|
||||
--color-sidebar-active: var(--brand-primary);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
@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;
|
||||
}
|
||||
|
||||
[data-icon] {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
background-color: currentColor;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="flex h-screen overflow-hidden">
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside class="w-[240px] shrink-0 flex flex-col border-r" style="background-color: var(--neutral-0); border-color: var(--neutral-200);">
|
||||
<!-- Logo -->
|
||||
<div class="flex items-center gap-3 px-5 h-14 shrink-0" style="border-bottom: 1px solid var(--neutral-200);">
|
||||
<div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background-color: var(--brand-primary);">
|
||||
<i data-lucide="headset" class="w-4 h-4" style="color: white;"></i>
|
||||
</div>
|
||||
<span class="font-semibold text-[15px] truncate" style="color: var(--neutral-800);">客服工作台</span>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="flex-1 py-3 px-3 overflow-y-auto">
|
||||
<a href="#" data-dom-id="nav-dashboard" class="flex items-center gap-3 px-3 py-2 rounded-lg text-[13px] font-medium mb-0.5 transition-colors" style="color: var(--neutral-600);">
|
||||
<i data-lucide="layout-dashboard" class="w-[18px] h-[18px] shrink-0"></i>
|
||||
<span class="truncate">工作台</span>
|
||||
</a>
|
||||
<a href="#" data-dom-id="nav-customers" class="flex items-center gap-3 px-3 py-2 rounded-lg text-[13px] font-medium mb-0.5" style="background-color: var(--brand-primary-lighter); color: var(--brand-primary);">
|
||||
<i data-lucide="users" class="w-[18px] h-[18px] shrink-0"></i>
|
||||
<span class="truncate">客户管理</span>
|
||||
</a>
|
||||
<a href="#" data-dom-id="nav-history" class="flex items-center gap-3 px-3 py-2 rounded-lg text-[13px] font-medium mb-0.5 transition-colors" style="color: var(--neutral-600);">
|
||||
<i data-lucide="message-square" class="w-[18px] h-[18px] shrink-0"></i>
|
||||
<span class="truncate">对话记录</span>
|
||||
</a>
|
||||
<a href="#" data-dom-id="nav-knowledge" class="flex items-center gap-3 px-3 py-2 rounded-lg text-[13px] font-medium mb-0.5 transition-colors" style="color: var(--neutral-600);">
|
||||
<i data-lucide="book-open" class="w-[18px] h-[18px] shrink-0"></i>
|
||||
<span class="truncate">知识库</span>
|
||||
</a>
|
||||
<a href="#" data-dom-id="nav-statistics" class="flex items-center gap-3 px-3 py-2 rounded-lg text-[13px] font-medium mb-0.5 transition-colors" style="color: var(--neutral-600);">
|
||||
<i data-lucide="bar-chart-3" class="w-[18px] h-[18px] shrink-0"></i>
|
||||
<span class="truncate">数据统计</span>
|
||||
</a>
|
||||
<a href="#" data-dom-id="nav-settings" class="flex items-center gap-3 px-3 py-2 rounded-lg text-[13px] font-medium mb-0.5 transition-colors" style="color: var(--neutral-600);">
|
||||
<i data-lucide="settings" class="w-[18px] h-[18px] shrink-0"></i>
|
||||
<span class="truncate">系统设置</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<!-- Sidebar footer -->
|
||||
<div class="px-3 py-3 shrink-0" style="border-top: 1px solid var(--neutral-200);">
|
||||
<div class="flex items-center gap-3 px-3 py-2">
|
||||
<div class="w-8 h-8 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="flex-1 min-w-0">
|
||||
<div class="text-[13px] font-medium truncate" style="color: var(--neutral-700);">李明</div>
|
||||
<div class="text-[11px] truncate" style="color: var(--neutral-400);">客服主管</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<div class="flex-1 flex flex-col min-w-0 overflow-hidden">
|
||||
|
||||
<!-- Top Header -->
|
||||
<header class="flex items-center justify-between px-6 h-14 shrink-0" style="background-color: var(--neutral-0); border-bottom: 1px solid var(--neutral-200);">
|
||||
<h1 class="text-[16px] font-semibold" style="color: var(--neutral-800);">客户管理</h1>
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="w-8 h-8 rounded-lg flex items-center justify-center transition-colors" style="color: var(--neutral-500);" title="通知">
|
||||
<i data-lucide="bell" class="w-[18px] h-[18px]"></i>
|
||||
</button>
|
||||
<button class="w-8 h-8 rounded-lg flex items-center justify-center transition-colors" style="color: var(--neutral-500);" title="帮助">
|
||||
<i data-lucide="help-circle" class="w-[18px] h-[18px]"></i>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Content + Drawer Wrapper -->
|
||||
<div class="flex flex-1 min-h-0 overflow-hidden">
|
||||
|
||||
<!-- Content Area -->
|
||||
<div class="flex-1 flex flex-col min-w-0 overflow-hidden">
|
||||
|
||||
<!-- Toolbar -->
|
||||
<div class="px-6 py-4 shrink-0" style="background-color: var(--neutral-0);">
|
||||
<!-- Search & Actions Row -->
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<div class="flex-1 flex items-center gap-2 px-3 h-9 rounded-lg max-w-xs" style="background-color: var(--neutral-100); border: 1px solid var(--neutral-200);">
|
||||
<i data-lucide="search" class="w-4 h-4 shrink-0" style="color: var(--neutral-400);"></i>
|
||||
<input type="text" placeholder="搜索客户名称、手机号、邮箱..." class="flex-1 bg-transparent outline-none text-[13px] min-w-0" style="color: var(--neutral-700);">
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<button class="px-3 py-1.5 rounded-md text-[13px] font-medium whitespace-nowrap" style="background-color: var(--brand-primary); color: white;">全部</button>
|
||||
<button class="px-3 py-1.5 rounded-md text-[13px] font-medium whitespace-nowrap" style="color: var(--neutral-600);">VIP</button>
|
||||
<button class="px-3 py-1.5 rounded-md text-[13px] font-medium whitespace-nowrap" style="color: var(--neutral-600);">新客户</button>
|
||||
<button class="px-3 py-1.5 rounded-md text-[13px] font-medium whitespace-nowrap" style="color: var(--neutral-600);">活跃</button>
|
||||
<button class="px-3 py-1.5 rounded-md text-[13px] font-medium whitespace-nowrap" style="color: var(--neutral-600);">沉默</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 ml-auto">
|
||||
<button class="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-[13px] font-medium whitespace-nowrap" style="border: 1px solid var(--neutral-200); color: var(--neutral-600);">
|
||||
<i data-lucide="download" class="w-3.5 h-3.5"></i>
|
||||
导出
|
||||
</button>
|
||||
<button class="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-[13px] font-medium whitespace-nowrap" style="background-color: var(--brand-primary); color: white;">
|
||||
<i data-lucide="plus" class="w-3.5 h-3.5"></i>
|
||||
添加客户
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table Container -->
|
||||
<div class="flex-1 overflow-auto px-6 pb-4">
|
||||
<div class="rounded-lg overflow-hidden" style="border: 1px solid var(--neutral-200); background-color: var(--neutral-0);">
|
||||
<table class="w-full table-fixed" style="min-width: 960px;">
|
||||
<thead>
|
||||
<tr style="background-color: var(--neutral-50);">
|
||||
<th class="w-10 py-3 px-3 text-left">
|
||||
<input type="checkbox" class="rounded" style="accent-color: var(--brand-primary);">
|
||||
</th>
|
||||
<th class="w-[200px] py-3 px-3 text-left text-[12px] font-medium uppercase tracking-wide whitespace-nowrap" style="color: var(--neutral-500);">客户</th>
|
||||
<th class="w-[130px] py-3 px-3 text-left text-[12px] font-medium uppercase tracking-wide whitespace-nowrap" style="color: var(--neutral-500);">手机号</th>
|
||||
<th class="w-[180px] py-3 px-3 text-left text-[12px] font-medium uppercase tracking-wide whitespace-nowrap" style="color: var(--neutral-500);">邮箱</th>
|
||||
<th class="w-[100px] py-3 px-3 text-left text-[12px] font-medium uppercase tracking-wide whitespace-nowrap" style="color: var(--neutral-500);">来源渠道</th>
|
||||
<th class="w-[120px] py-3 px-3 text-left text-[12px] font-medium uppercase tracking-wide whitespace-nowrap" style="color: var(--neutral-500);">标签</th>
|
||||
<th class="w-[140px] py-3 px-3 text-left text-[12px] font-medium uppercase tracking-wide whitespace-nowrap" style="color: var(--neutral-500);">最后对话</th>
|
||||
<th class="w-[80px] py-3 px-3 text-left text-[12px] font-medium uppercase tracking-wide whitespace-nowrap" style="color: var(--neutral-500);">状态</th>
|
||||
<th class="w-[120px] py-3 px-3 text-right text-[12px] font-medium uppercase tracking-wide whitespace-nowrap" style="color: var(--neutral-500);">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- Row 1 — High activity -->
|
||||
<tr class="group" style="border-top: 1px solid var(--neutral-100);">
|
||||
<td class="py-3 px-3 relative">
|
||||
<div class="absolute left-0 top-0 bottom-0 w-[3px]" style="background: linear-gradient(to top, #93c5fd, #2563eb);"></div>
|
||||
<input type="checkbox" class="rounded" style="accent-color: var(--brand-primary);">
|
||||
</td>
|
||||
<td class="py-3 px-3">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="w-8 h-8 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-[13px] font-medium truncate" style="color: var(--neutral-800);">张伟</div>
|
||||
<div class="text-[11px] truncate" style="color: var(--neutral-400);">ID: C10001</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 px-3 text-[13px] whitespace-nowrap" style="color: var(--neutral-600);">138****2056</td>
|
||||
<td class="py-3 px-3 text-[13px] truncate" style="color: var(--neutral-600);">zhangwei@example.com</td>
|
||||
<td class="py-3 px-3 text-[13px] whitespace-nowrap" style="color: var(--neutral-600);">官网咨询</td>
|
||||
<td class="py-3 px-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium whitespace-nowrap" style="background-color: #fef3c7; color: #92400e;">VIP</span>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium whitespace-nowrap" style="background-color: var(--brand-primary-light); color: var(--brand-primary);">活跃</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 px-3 text-[13px] whitespace-nowrap" style="color: var(--neutral-500);">10 分钟前</td>
|
||||
<td class="py-3 px-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-2 h-2 rounded-full shrink-0" style="background-color: var(--state-success);"></span>
|
||||
<span class="text-[12px] whitespace-nowrap" style="color: var(--state-success);">在线</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 px-3 text-right">
|
||||
<div class="flex items-center justify-end gap-1">
|
||||
<button class="px-2 py-1 rounded text-[12px] font-medium whitespace-nowrap" style="color: var(--brand-primary);">查看</button>
|
||||
<button class="px-2 py-1 rounded text-[12px] font-medium whitespace-nowrap" style="color: var(--neutral-500);">编辑</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Row 2 — High activity -->
|
||||
<tr class="group" style="border-top: 1px solid var(--neutral-100);">
|
||||
<td class="py-3 px-3 relative">
|
||||
<div class="absolute left-0 top-0 bottom-0 w-[3px]" style="background: linear-gradient(to top, #bfdbfe, #3b82f6);"></div>
|
||||
<input type="checkbox" class="rounded" style="accent-color: var(--brand-primary);">
|
||||
</td>
|
||||
<td class="py-3 px-3">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-semibold shrink-0" style="background-color: #fce7f3; color: #be185d;">王</div>
|
||||
<div class="min-w-0">
|
||||
<div class="text-[13px] font-medium truncate" style="color: var(--neutral-800);">王芳</div>
|
||||
<div class="text-[11px] truncate" style="color: var(--neutral-400);">ID: C10002</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 px-3 text-[13px] whitespace-nowrap" style="color: var(--neutral-600);">139****8823</td>
|
||||
<td class="py-3 px-3 text-[13px] truncate" style="color: var(--neutral-600);">wangfang@company.cn</td>
|
||||
<td class="py-3 px-3 text-[13px] whitespace-nowrap" style="color: var(--neutral-600);">微信公众号</td>
|
||||
<td class="py-3 px-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium whitespace-nowrap" style="background-color: var(--state-success-bg); color: var(--state-success);">新客户</span>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium whitespace-nowrap" style="background-color: var(--brand-primary-light); color: var(--brand-primary);">活跃</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 px-3 text-[13px] whitespace-nowrap" style="color: var(--neutral-500);">32 分钟前</td>
|
||||
<td class="py-3 px-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-2 h-2 rounded-full shrink-0" style="background-color: var(--state-success);"></span>
|
||||
<span class="text-[12px] whitespace-nowrap" style="color: var(--state-success);">在线</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 px-3 text-right">
|
||||
<div class="flex items-center justify-end gap-1">
|
||||
<button class="px-2 py-1 rounded text-[12px] font-medium whitespace-nowrap" style="color: var(--brand-primary);">查看</button>
|
||||
<button class="px-2 py-1 rounded text-[12px] font-medium whitespace-nowrap" style="color: var(--neutral-500);">编辑</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Row 3 — Medium activity -->
|
||||
<tr class="group" style="border-top: 1px solid var(--neutral-100);">
|
||||
<td class="py-3 px-3 relative">
|
||||
<div class="absolute left-0 top-0 bottom-0 w-[3px]" style="background: linear-gradient(to top, #e2e8f0, #60a5fa);"></div>
|
||||
<input type="checkbox" class="rounded" style="accent-color: var(--brand-primary);">
|
||||
</td>
|
||||
<td class="py-3 px-3">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-semibold shrink-0" style="background-color: #dbeafe; color: #1d4ed8;">刘</div>
|
||||
<div class="min-w-0">
|
||||
<div class="text-[13px] font-medium truncate" style="color: var(--neutral-800);">刘洋</div>
|
||||
<div class="text-[11px] truncate" style="color: var(--neutral-400);">ID: C10003</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 px-3 text-[13px] whitespace-nowrap" style="color: var(--neutral-600);">136****4512</td>
|
||||
<td class="py-3 px-3 text-[13px] truncate" style="color: var(--neutral-600);">liuyang@mail.com</td>
|
||||
<td class="py-3 px-3 text-[13px] whitespace-nowrap" style="color: var(--neutral-600);">APP注册</td>
|
||||
<td class="py-3 px-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium whitespace-nowrap" style="background-color: #fef3c7; color: #92400e;">VIP</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 px-3 text-[13px] whitespace-nowrap" style="color: var(--neutral-500);">2 小时前</td>
|
||||
<td class="py-3 px-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-2 h-2 rounded-full shrink-0" style="background-color: var(--neutral-400);"></span>
|
||||
<span class="text-[12px] whitespace-nowrap" style="color: var(--neutral-400);">离线</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 px-3 text-right">
|
||||
<div class="flex items-center justify-end gap-1">
|
||||
<button class="px-2 py-1 rounded text-[12px] font-medium whitespace-nowrap" style="color: var(--brand-primary);">查看</button>
|
||||
<button class="px-2 py-1 rounded text-[12px] font-medium whitespace-nowrap" style="color: var(--neutral-500);">编辑</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Row 4 — Medium activity -->
|
||||
<tr class="group" style="border-top: 1px solid var(--neutral-100);">
|
||||
<td class="py-3 px-3 relative">
|
||||
<div class="absolute left-0 top-0 bottom-0 w-[3px]" style="background: linear-gradient(to top, #e2e8f0, #93c5fd);"></div>
|
||||
<input type="checkbox" class="rounded" style="accent-color: var(--brand-primary);">
|
||||
</td>
|
||||
<td class="py-3 px-3">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-semibold shrink-0" style="background-color: #ede9fe; color: #6d28d9;">陈</div>
|
||||
<div class="min-w-0">
|
||||
<div class="text-[13px] font-medium truncate" style="color: var(--neutral-800);">陈思思</div>
|
||||
<div class="text-[11px] truncate" style="color: var(--neutral-400);">ID: C10004</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 px-3 text-[13px] whitespace-nowrap" style="color: var(--neutral-600);">155****7731</td>
|
||||
<td class="py-3 px-3 text-[13px] truncate" style="color: var(--neutral-600);">chenss@corp.net</td>
|
||||
<td class="py-3 px-3 text-[13px] whitespace-nowrap" style="color: var(--neutral-600);">电话接入</td>
|
||||
<td class="py-3 px-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium whitespace-nowrap" style="background-color: var(--state-info-bg); color: var(--state-info);">企业客户</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 px-3 text-[13px] whitespace-nowrap" style="color: var(--neutral-500);">5 小时前</td>
|
||||
<td class="py-3 px-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-2 h-2 rounded-full shrink-0" style="background-color: var(--state-warning);"></span>
|
||||
<span class="text-[12px] whitespace-nowrap" style="color: var(--state-warning);">忙碌</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 px-3 text-right">
|
||||
<div class="flex items-center justify-end gap-1">
|
||||
<button class="px-2 py-1 rounded text-[12px] font-medium whitespace-nowrap" style="color: var(--brand-primary);">查看</button>
|
||||
<button class="px-2 py-1 rounded text-[12px] font-medium whitespace-nowrap" style="color: var(--neutral-500);">编辑</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Row 5 — Low activity (silent) -->
|
||||
<tr class="group" style="border-top: 1px solid var(--neutral-100);">
|
||||
<td class="py-3 px-3 relative">
|
||||
<div class="absolute left-0 top-0 bottom-0 w-[3px]" style="background: linear-gradient(to top, #f1f5f9, #cbd5e1);"></div>
|
||||
<input type="checkbox" class="rounded" style="accent-color: var(--brand-primary);">
|
||||
</td>
|
||||
<td class="py-3 px-3">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-semibold shrink-0" style="background-color: #fef3c7; color: #b45309;">赵</div>
|
||||
<div class="min-w-0">
|
||||
<div class="text-[13px] font-medium truncate" style="color: var(--neutral-800);">赵磊</div>
|
||||
<div class="text-[11px] truncate" style="color: var(--neutral-400);">ID: C10005</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 px-3 text-[13px] whitespace-nowrap" style="color: var(--neutral-600);">182****3309</td>
|
||||
<td class="py-3 px-3 text-[13px] truncate" style="color: var(--neutral-600);">zhaolei@web.org</td>
|
||||
<td class="py-3 px-3 text-[13px] whitespace-nowrap" style="color: var(--neutral-600);">广告投放</td>
|
||||
<td class="py-3 px-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium whitespace-nowrap" style="background-color: var(--state-warning-bg); color: var(--state-warning);">沉默</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 px-3 text-[13px] whitespace-nowrap" style="color: var(--neutral-500);">3 天前</td>
|
||||
<td class="py-3 px-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-2 h-2 rounded-full shrink-0" style="background-color: var(--neutral-400);"></span>
|
||||
<span class="text-[12px] whitespace-nowrap" style="color: var(--neutral-400);">离线</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 px-3 text-right">
|
||||
<div class="flex items-center justify-end gap-1">
|
||||
<button class="px-2 py-1 rounded text-[12px] font-medium whitespace-nowrap" style="color: var(--brand-primary);">查看</button>
|
||||
<button class="px-2 py-1 rounded text-[12px] font-medium whitespace-nowrap" style="color: var(--neutral-500);">编辑</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Row 6 — High activity -->
|
||||
<tr class="group" style="border-top: 1px solid var(--neutral-100);">
|
||||
<td class="py-3 px-3 relative">
|
||||
<div class="absolute left-0 top-0 bottom-0 w-[3px]" style="background: linear-gradient(to top, #93c5fd, #2563eb);"></div>
|
||||
<input type="checkbox" class="rounded" style="accent-color: var(--brand-primary);">
|
||||
</td>
|
||||
<td class="py-3 px-3">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-semibold shrink-0" style="background-color: #d1fae5; color: #047857;">孙</div>
|
||||
<div class="min-w-0">
|
||||
<div class="text-[13px] font-medium truncate" style="color: var(--neutral-800);">孙丽</div>
|
||||
<div class="text-[11px] truncate" style="color: var(--neutral-400);">ID: C10006</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 px-3 text-[13px] whitespace-nowrap" style="color: var(--neutral-600);">133****6678</td>
|
||||
<td class="py-3 px-3 text-[13px] truncate" style="color: var(--neutral-600);">sunli@shop.cn</td>
|
||||
<td class="py-3 px-3 text-[13px] whitespace-nowrap" style="color: var(--neutral-600);">小程序</td>
|
||||
<td class="py-3 px-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium whitespace-nowrap" style="background-color: #fef3c7; color: #92400e;">VIP</span>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium whitespace-nowrap" style="background-color: var(--brand-primary-light); color: var(--brand-primary);">活跃</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 px-3 text-[13px] whitespace-nowrap" style="color: var(--neutral-500);">15 分钟前</td>
|
||||
<td class="py-3 px-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-2 h-2 rounded-full shrink-0" style="background-color: var(--state-success);"></span>
|
||||
<span class="text-[12px] whitespace-nowrap" style="color: var(--state-success);">在线</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 px-3 text-right">
|
||||
<div class="flex items-center justify-end gap-1">
|
||||
<button class="px-2 py-1 rounded text-[12px] font-medium whitespace-nowrap" style="color: var(--brand-primary);">查看</button>
|
||||
<button class="px-2 py-1 rounded text-[12px] font-medium whitespace-nowrap" style="color: var(--neutral-500);">编辑</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Row 7 — Low activity (silent) -->
|
||||
<tr class="group" style="border-top: 1px solid var(--neutral-100);">
|
||||
<td class="py-3 px-3 relative">
|
||||
<div class="absolute left-0 top-0 bottom-0 w-[3px]" style="background: linear-gradient(to top, #f1f5f9, #cbd5e1);"></div>
|
||||
<input type="checkbox" class="rounded" style="accent-color: var(--brand-primary);">
|
||||
</td>
|
||||
<td class="py-3 px-3">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-semibold shrink-0" style="background-color: #e0e7ff; color: #4338ca;">周</div>
|
||||
<div class="min-w-0">
|
||||
<div class="text-[13px] font-medium truncate" style="color: var(--neutral-800);">周杰</div>
|
||||
<div class="text-[11px] truncate" style="color: var(--neutral-400);">ID: C10007</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 px-3 text-[13px] whitespace-nowrap" style="color: var(--neutral-600);">186****9945</td>
|
||||
<td class="py-3 px-3 text-[13px] truncate" style="color: var(--neutral-600);">zhoujie@tech.io</td>
|
||||
<td class="py-3 px-3 text-[13px] whitespace-nowrap" style="color: var(--neutral-600);">官网咨询</td>
|
||||
<td class="py-3 px-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium whitespace-nowrap" style="background-color: var(--state-warning-bg); color: var(--state-warning);">沉默</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 px-3 text-[13px] whitespace-nowrap" style="color: var(--neutral-500);">7 天前</td>
|
||||
<td class="py-3 px-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-2 h-2 rounded-full shrink-0" style="background-color: var(--neutral-400);"></span>
|
||||
<span class="text-[12px] whitespace-nowrap" style="color: var(--neutral-400);">离线</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 px-3 text-right">
|
||||
<div class="flex items-center justify-end gap-1">
|
||||
<button class="px-2 py-1 rounded text-[12px] font-medium whitespace-nowrap" style="color: var(--brand-primary);">查看</button>
|
||||
<button class="px-2 py-1 rounded text-[12px] font-medium whitespace-nowrap" style="color: var(--neutral-500);">编辑</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Row 8 — Medium activity -->
|
||||
<tr class="group" style="border-top: 1px solid var(--neutral-100);">
|
||||
<td class="py-3 px-3 relative">
|
||||
<div class="absolute left-0 top-0 bottom-0 w-[3px]" style="background: linear-gradient(to top, #e2e8f0, #60a5fa);"></div>
|
||||
<input type="checkbox" class="rounded" style="accent-color: var(--brand-primary);">
|
||||
</td>
|
||||
<td class="py-3 px-3">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-semibold shrink-0" style="background-color: #ffedd5; color: #c2410c;">吴</div>
|
||||
<div class="min-w-0">
|
||||
<div class="text-[13px] font-medium truncate" style="color: var(--neutral-800);">吴佳</div>
|
||||
<div class="text-[11px] truncate" style="color: var(--neutral-400);">ID: C10008</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 px-3 text-[13px] whitespace-nowrap" style="color: var(--neutral-600);">158****1120</td>
|
||||
<td class="py-3 px-3 text-[13px] truncate" style="color: var(--neutral-600);">wujia@design.co</td>
|
||||
<td class="py-3 px-3 text-[13px] whitespace-nowrap" style="color: var(--neutral-600);">社交媒体</td>
|
||||
<td class="py-3 px-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium whitespace-nowrap" style="background-color: var(--state-success-bg); color: var(--state-success);">新客户</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 px-3 text-[13px] whitespace-nowrap" style="color: var(--neutral-500);">1 天前</td>
|
||||
<td class="py-3 px-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-2 h-2 rounded-full shrink-0" style="background-color: var(--neutral-400);"></span>
|
||||
<span class="text-[12px] whitespace-nowrap" style="color: var(--neutral-400);">离线</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 px-3 text-right">
|
||||
<div class="flex items-center justify-end gap-1">
|
||||
<button class="px-2 py-1 rounded text-[12px] font-medium whitespace-nowrap" style="color: var(--brand-primary);">查看</button>
|
||||
<button class="px-2 py-1 rounded text-[12px] font-medium whitespace-nowrap" style="color: var(--neutral-500);">编辑</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Row 9 — High activity -->
|
||||
<tr class="group" style="border-top: 1px solid var(--neutral-100);">
|
||||
<td class="py-3 px-3 relative">
|
||||
<div class="absolute left-0 top-0 bottom-0 w-[3px]" style="background: linear-gradient(to top, #bfdbfe, #3b82f6);"></div>
|
||||
<input type="checkbox" class="rounded" style="accent-color: var(--brand-primary);">
|
||||
</td>
|
||||
<td class="py-3 px-3">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-semibold shrink-0" style="background-color: #f3e8ff; color: #7e22ce;">林</div>
|
||||
<div class="min-w-0">
|
||||
<div class="text-[13px] font-medium truncate" style="color: var(--neutral-800);">林雨桐</div>
|
||||
<div class="text-[11px] truncate" style="color: var(--neutral-400);">ID: C10009</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 px-3 text-[13px] whitespace-nowrap" style="color: var(--neutral-600);">177****5543</td>
|
||||
<td class="py-3 px-3 text-[13px] truncate" style="color: var(--neutral-600);">linyutong@edu.cn</td>
|
||||
<td class="py-3 px-3 text-[13px] whitespace-nowrap" style="color: var(--neutral-600);">电话接入</td>
|
||||
<td class="py-3 px-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium whitespace-nowrap" style="background-color: #fef3c7; color: #92400e;">VIP</span>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium whitespace-nowrap" style="background-color: var(--state-info-bg); color: var(--state-info);">企业客户</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 px-3 text-[13px] whitespace-nowrap" style="color: var(--neutral-500);">45 分钟前</td>
|
||||
<td class="py-3 px-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-2 h-2 rounded-full shrink-0" style="background-color: var(--state-success);"></span>
|
||||
<span class="text-[12px] whitespace-nowrap" style="color: var(--state-success);">在线</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 px-3 text-right">
|
||||
<div class="flex items-center justify-end gap-1">
|
||||
<button class="px-2 py-1 rounded text-[12px] font-medium whitespace-nowrap" style="color: var(--brand-primary);">查看</button>
|
||||
<button class="px-2 py-1 rounded text-[12px] font-medium whitespace-nowrap" style="color: var(--neutral-500);">编辑</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Row 10 — Low activity (silent) -->
|
||||
<tr class="group" style="border-top: 1px solid var(--neutral-100);">
|
||||
<td class="py-3 px-3 relative">
|
||||
<div class="absolute left-0 top-0 bottom-0 w-[3px]" style="background: linear-gradient(to top, #f1f5f9, #e2e8f0);"></div>
|
||||
<input type="checkbox" class="rounded" style="accent-color: var(--brand-primary);">
|
||||
</td>
|
||||
<td class="py-3 px-3">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-semibold shrink-0" style="background-color: #fee2e2; color: #b91c1c;">黄</div>
|
||||
<div class="min-w-0">
|
||||
<div class="text-[13px] font-medium truncate" style="color: var(--neutral-800);">黄志强</div>
|
||||
<div class="text-[11px] truncate" style="color: var(--neutral-400);">ID: C10010</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 px-3 text-[13px] whitespace-nowrap" style="color: var(--neutral-600);">150****2286</td>
|
||||
<td class="py-3 px-3 text-[13px] truncate" style="color: var(--neutral-600);">huangzq@biz.com</td>
|
||||
<td class="py-3 px-3 text-[13px] whitespace-nowrap" style="color: var(--neutral-600);">广告投放</td>
|
||||
<td class="py-3 px-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium whitespace-nowrap" style="background-color: var(--state-warning-bg); color: var(--state-warning);">沉默</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 px-3 text-[13px] whitespace-nowrap" style="color: var(--neutral-500);">14 天前</td>
|
||||
<td class="py-3 px-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-2 h-2 rounded-full shrink-0" style="background-color: var(--neutral-400);"></span>
|
||||
<span class="text-[12px] whitespace-nowrap" style="color: var(--neutral-400);">离线</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 px-3 text-right">
|
||||
<div class="flex items-center justify-end gap-1">
|
||||
<button class="px-2 py-1 rounded text-[12px] font-medium whitespace-nowrap" style="color: var(--brand-primary);">查看</button>
|
||||
<button class="px-2 py-1 rounded text-[12px] font-medium whitespace-nowrap" style="color: var(--neutral-500);">编辑</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<div class="text-[13px]" style="color: var(--neutral-500);">
|
||||
共 <span class="font-medium" style="color: var(--neutral-700);">86</span> 位客户
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center gap-2 text-[13px]" style="color: var(--neutral-500);">
|
||||
<span>每页</span>
|
||||
<select class="px-2 py-1 rounded-md text-[13px] outline-none" style="background-color: var(--neutral-0); border: 1px solid var(--neutral-200); color: var(--neutral-700);">
|
||||
<option>10</option>
|
||||
<option>20</option>
|
||||
<option>50</option>
|
||||
</select>
|
||||
<span>条</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<button class="w-8 h-8 rounded-md flex items-center justify-center text-[13px]" style="border: 1px solid var(--neutral-200); color: var(--neutral-400);">
|
||||
<i data-lucide="chevron-left" class="w-4 h-4"></i>
|
||||
</button>
|
||||
<button class="w-8 h-8 rounded-md flex items-center justify-center text-[13px] font-medium" style="background-color: var(--brand-primary); color: white;">1</button>
|
||||
<button class="w-8 h-8 rounded-md flex items-center justify-center text-[13px]" style="border: 1px solid var(--neutral-200); color: var(--neutral-600);">2</button>
|
||||
<button class="w-8 h-8 rounded-md flex items-center justify-center text-[13px]" style="border: 1px solid var(--neutral-200); color: var(--neutral-600);">3</button>
|
||||
<button class="w-8 h-8 rounded-md flex items-center justify-center text-[13px]" style="border: 1px solid var(--neutral-200); color: var(--neutral-600);">4</button>
|
||||
<span class="px-1 text-[13px]" style="color: var(--neutral-400);">...</span>
|
||||
<button class="w-8 h-8 rounded-md flex items-center justify-center text-[13px]" style="border: 1px solid var(--neutral-200); color: var(--neutral-600);">9</button>
|
||||
<button class="w-8 h-8 rounded-md flex items-center justify-center text-[13px]" style="border: 1px solid var(--neutral-200); color: var(--neutral-600);">
|
||||
<i data-lucide="chevron-right" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Drawer: Customer Detail Panel -->
|
||||
<aside class="w-[360px] shrink-0 flex flex-col overflow-y-auto" style="background-color: var(--neutral-0); border-left: 1px solid var(--neutral-200);">
|
||||
<!-- Drawer Header -->
|
||||
<div class="flex items-center justify-between px-5 py-4 shrink-0" style="border-bottom: 1px solid var(--neutral-200);">
|
||||
<h2 class="text-[15px] font-semibold" style="color: var(--neutral-800);">客户详情</h2>
|
||||
<button class="w-7 h-7 rounded-md flex items-center justify-center" style="color: var(--neutral-400);">
|
||||
<i data-lucide="x" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Customer Profile Header -->
|
||||
<div class="px-5 py-5 text-center" style="border-bottom: 1px solid var(--neutral-100);">
|
||||
<div class="w-16 h-16 rounded-full flex items-center justify-center text-xl font-bold mx-auto mb-3" style="background-color: var(--brand-primary-light); color: var(--brand-primary);">张</div>
|
||||
<div class="text-[16px] font-semibold mb-0.5" style="color: var(--neutral-800);">张伟</div>
|
||||
<div class="text-[13px] mb-2" style="color: var(--neutral-500);">ID: C10001</div>
|
||||
<div class="flex items-center justify-center gap-1.5">
|
||||
<span class="w-2 h-2 rounded-full" style="background-color: var(--state-success);"></span>
|
||||
<span class="text-[12px] font-medium" style="color: var(--state-success);">在线</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tags -->
|
||||
<div class="px-5 py-3" style="border-bottom: 1px solid var(--neutral-100);">
|
||||
<div class="text-[11px] font-medium uppercase tracking-wide mb-2" style="color: var(--neutral-400);">标签</div>
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium whitespace-nowrap" style="background-color: #fef3c7; color: #92400e;">VIP</span>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium whitespace-nowrap" style="background-color: var(--brand-primary-light); color: var(--brand-primary);">活跃</span>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium whitespace-nowrap" style="background-color: var(--neutral-100); color: var(--neutral-600);">高价值</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Info -->
|
||||
<div class="px-5 py-3" style="border-bottom: 1px solid var(--neutral-100);">
|
||||
<div class="text-[11px] font-medium uppercase tracking-wide mb-2" style="color: var(--neutral-400);">联系方式</div>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<i data-lucide="phone" class="w-3.5 h-3.5 shrink-0" style="color: var(--neutral-400);"></i>
|
||||
<span class="text-[13px]" style="color: var(--neutral-700);">138-0000-2056</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2.5">
|
||||
<i data-lucide="mail" class="w-3.5 h-3.5 shrink-0" style="color: var(--neutral-400);"></i>
|
||||
<span class="text-[13px] truncate" style="color: var(--neutral-700);">zhangwei@example.com</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2.5">
|
||||
<i data-lucide="globe" class="w-3.5 h-3.5 shrink-0" style="color: var(--neutral-400);"></i>
|
||||
<span class="text-[13px] whitespace-nowrap" style="color: var(--neutral-700);">来源: 官网咨询</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Activity Stats -->
|
||||
<div class="px-5 py-3" style="border-bottom: 1px solid var(--neutral-100);">
|
||||
<div class="text-[11px] font-medium uppercase tracking-wide mb-2" style="color: var(--neutral-400);">活跃数据</div>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<div class="text-center py-2 rounded-md" style="background-color: var(--neutral-50);">
|
||||
<div class="text-[18px] font-bold" style="color: var(--brand-primary);">128</div>
|
||||
<div class="text-[11px]" style="color: var(--neutral-500);">对话次数</div>
|
||||
</div>
|
||||
<div class="text-center py-2 rounded-md" style="background-color: var(--neutral-50);">
|
||||
<div class="text-[18px] font-bold" style="color: var(--brand-primary);">4.8</div>
|
||||
<div class="text-[11px]" style="color: var(--neutral-500);">满意度</div>
|
||||
</div>
|
||||
<div class="text-center py-2 rounded-md" style="background-color: var(--neutral-50);">
|
||||
<div class="text-[18px] font-bold" style="color: var(--brand-primary);">3</div>
|
||||
<div class="text-[11px]" style="color: var(--neutral-500);">待处理</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Conversations -->
|
||||
<div class="px-5 py-3" style="border-bottom: 1px solid var(--neutral-100);">
|
||||
<div class="text-[11px] font-medium uppercase tracking-wide mb-2" style="color: var(--neutral-400);">最近对话</div>
|
||||
<div class="space-y-2.5">
|
||||
<div class="flex items-start gap-2.5">
|
||||
<div class="w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-semibold shrink-0 mt-0.5" style="background-color: var(--brand-primary-light); color: var(--brand-primary);">客</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-[12px] font-medium" style="color: var(--neutral-700);">产品咨询</span>
|
||||
<span class="text-[11px] whitespace-nowrap" style="color: var(--neutral-400);">10分钟前</span>
|
||||
</div>
|
||||
<p class="text-[12px] mt-0.5 line-clamp-2" style="color: var(--neutral-500);">请问你们的企业版和专业版有什么区别？我们团队大概20人左右...</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-2.5">
|
||||
<div class="w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-semibold shrink-0 mt-0.5" style="background-color: var(--brand-primary-light); color: var(--brand-primary);">客</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-[12px] font-medium" style="color: var(--neutral-700);">售后支持</span>
|
||||
<span class="text-[11px] whitespace-nowrap" style="color: var(--neutral-400);">昨天</span>
|
||||
</div>
|
||||
<p class="text-[12px] mt-0.5 line-clamp-2" style="color: var(--neutral-500);">之前反馈的数据导出问题已经解决了，感谢你们的技术支持。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="px-5 py-4 mt-auto shrink-0">
|
||||
<div class="flex gap-2">
|
||||
<button class="flex-1 flex items-center justify-center gap-1.5 px-3 py-2 rounded-md text-[13px] font-medium" style="background-color: var(--brand-primary); color: white;">
|
||||
<i data-lucide="message-square" class="w-3.5 h-3.5"></i>
|
||||
发起对话
|
||||
</button>
|
||||
<button class="flex-1 flex items-center justify-center gap-1.5 px-3 py-2 rounded-md text-[13px] font-medium" style="border: 1px solid var(--neutral-200); color: var(--neutral-600);">
|
||||
<i data-lucide="edit-3" class="w-3.5 h-3.5"></i>
|
||||
编辑信息
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,786 @@
|
||||
<!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) ====== -->
|
||||
<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="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>
|
||||
|
||||
<!-- 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="nav-dashboard" 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="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="nav-customers" class="flex items-center gap-2.5 px-3 py-2 rounded-lg truncate" style="color: var(--neutral-600);">
|
||||
<i data-lucide="users" 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="nav-history" class="flex items-center gap-2.5 px-3 py-2 rounded-lg truncate" style="color: var(--neutral-600);">
|
||||
<i data-lucide="message-square" 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="nav-knowledge" class="flex items-center gap-2.5 px-3 py-2 rounded-lg truncate" style="color: var(--neutral-600);">
|
||||
<i data-lucide="book-open" 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="nav-statistics" class="flex items-center gap-2.5 px-3 py-2 rounded-lg truncate" style="color: var(--neutral-600);">
|
||||
<i data-lucide="bar-chart-3" 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="nav-settings" class="flex items-center gap-2.5 px-3 py-2 rounded-lg truncate" style="color: var(--neutral-600);">
|
||||
<i data-lucide="settings" 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: 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>
|
||||
|
||||
<!-- ====== Middle Area (flex-1) ====== -->
|
||||
<div class="flex flex-1 min-w-0 h-full">
|
||||
|
||||
<!-- Conversation List Panel -->
|
||||
<section class="shrink-0 flex flex-col h-full" style="width: 320px; border-right: 1px solid var(--neutral-200); background: var(--neutral-0);">
|
||||
|
||||
<!-- Conversation List Header -->
|
||||
<div class="shrink-0 px-3 py-3" style="border-bottom: 1px solid var(--neutral-200);">
|
||||
<!-- Search + Filter Row -->
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<div class="flex items-center flex-1 min-w-0 rounded-lg px-2.5" style="height: 34px; background: var(--neutral-100); border: 1px solid var(--neutral-200);">
|
||||
<i data-lucide="search" style="width: 15px; height: 15px; flex-shrink: 0; color: var(--neutral-400); margin-right: 6px;"></i>
|
||||
<input type="text" placeholder="搜索对话..." class="bg-transparent border-none outline-none flex-1 min-w-0" style="font-size: var(--font-size-sm); color: var(--neutral-900);">
|
||||
</div>
|
||||
<button class="flex items-center justify-center rounded-lg shrink-0" style="width: 34px; height: 34px; background: var(--neutral-100); border: 1px solid var(--neutral-200); color: var(--neutral-500);">
|
||||
<i data-lucide="sliders-horizontal" style="width: 15px; height: 15px;"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Session Count Tag -->
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-md whitespace-nowrap" style="font-size: var(--font-size-xs); font-weight: 500; background: var(--brand-primary-light); color: var(--brand-primary);">当前会话 6 个</span>
|
||||
<button data-dom-id="preview-visitor-chat" class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--brand-primary); cursor: pointer;">
|
||||
<i data-lucide="eye" style="width: 12px; height: 12px;"></i>
|
||||
<span>预览访客窗口</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Conversation List -->
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
|
||||
<!-- Conversation 1 — Active (Selected), Priority: Urgent (Red) -->
|
||||
<div class="flex items-stretch relative cursor-pointer" style="background: var(--brand-primary-lighter);">
|
||||
<!-- Priority Bar -->
|
||||
<div class="shrink-0 rounded-l-none" style="width: 3px; background: var(--state-error);"></div>
|
||||
<div class="flex-1 min-w-0 px-3 py-3">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 36px; height: 36px; background: var(--state-error-bg); color: var(--state-error); font-size: var(--font-size-sm); font-weight: 600;">王</div>
|
||||
<span class="truncate font-medium" style="font-size: var(--font-size-sm); color: var(--neutral-800);">王建国</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 shrink-0 ml-2">
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-400);">2分钟前</span>
|
||||
<span class="flex items-center justify-center rounded-full whitespace-nowrap" style="min-width: 18px; height: 18px; font-size: 11px; font-weight: 600; background: var(--state-error); color: var(--neutral-0); padding: 0 5px;">3</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="truncate flex-1 min-w-0 mr-2" style="font-size: var(--font-size-xs); color: var(--neutral-500);">请尽快帮我处理退款问题，已经等了很久了！</p>
|
||||
<span class="flex items-center gap-1 shrink-0" style="font-size: var(--font-size-xs);">
|
||||
<span class="inline-block rounded-full" style="width: 7px; height: 7px; background: var(--state-error);"></span>
|
||||
<span style="color: var(--state-error);">紧急</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Conversation 2 — Priority: Waiting (Yellow) -->
|
||||
<div class="flex items-stretch relative cursor-pointer" style="border-bottom: 1px solid var(--neutral-100);">
|
||||
<div class="shrink-0" style="width: 3px; background: var(--state-warning);"></div>
|
||||
<div class="flex-1 min-w-0 px-3 py-3">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 36px; height: 36px; background: var(--state-warning-bg); color: var(--state-warning); font-size: var(--font-size-sm); font-weight: 600;">赵</div>
|
||||
<span class="truncate font-medium" style="font-size: var(--font-size-sm); color: var(--neutral-800);">赵芳</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 shrink-0 ml-2">
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-400);">8分钟前</span>
|
||||
<span class="flex items-center justify-center rounded-full whitespace-nowrap" style="min-width: 18px; height: 18px; font-size: 11px; font-weight: 600; background: var(--brand-primary); color: var(--neutral-0); padding: 0 5px;">1</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="truncate flex-1 min-w-0 mr-2" style="font-size: var(--font-size-xs); color: var(--neutral-500);">想问一下订单什么时候能发货？</p>
|
||||
<span class="flex items-center gap-1 shrink-0" style="font-size: var(--font-size-xs);">
|
||||
<span class="inline-block rounded-full" style="width: 7px; height: 7px; background: var(--state-warning);"></span>
|
||||
<span style="color: var(--state-warning);">等待中</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Conversation 3 — Priority: In Progress (Blue) -->
|
||||
<div class="flex items-stretch relative cursor-pointer" style="border-bottom: 1px solid var(--neutral-100);">
|
||||
<div class="shrink-0" style="width: 3px; background: var(--brand-primary);"></div>
|
||||
<div class="flex-1 min-w-0 px-3 py-3">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 36px; height: 36px; background: var(--brand-primary-light); color: var(--brand-primary); font-size: var(--font-size-sm); font-weight: 600;">刘</div>
|
||||
<span class="truncate font-medium" style="font-size: var(--font-size-sm); color: var(--neutral-800);">刘美华</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 shrink-0 ml-2">
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-400);">15分钟前</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="truncate flex-1 min-w-0 mr-2" style="font-size: var(--font-size-xs); color: var(--neutral-500);">好的，我已经把资料发给您了，请查收</p>
|
||||
<span class="flex items-center gap-1 shrink-0" style="font-size: var(--font-size-xs);">
|
||||
<span class="inline-block rounded-full" style="width: 7px; height: 7px; background: var(--brand-primary);"></span>
|
||||
<span style="color: var(--brand-primary);">进行中</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Conversation 4 — Priority: In Progress (Blue) -->
|
||||
<div class="flex items-stretch relative cursor-pointer" style="border-bottom: 1px solid var(--neutral-100);">
|
||||
<div class="shrink-0" style="width: 3px; background: var(--brand-primary);"></div>
|
||||
<div class="flex-1 min-w-0 px-3 py-3">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 36px; height: 36px; background: var(--state-info-bg); color: var(--state-info); font-size: var(--font-size-sm); font-weight: 600;">张</div>
|
||||
<span class="truncate font-medium" style="font-size: var(--font-size-sm); color: var(--neutral-800);">张伟</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 shrink-0 ml-2">
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-400);">28分钟前</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="truncate flex-1 min-w-0 mr-2" style="font-size: var(--font-size-xs); color: var(--neutral-500);">请问这个产品支持哪些支付方式？</p>
|
||||
<span class="flex items-center gap-1 shrink-0" style="font-size: var(--font-size-xs);">
|
||||
<span class="inline-block rounded-full" style="width: 7px; height: 7px; background: var(--brand-primary);"></span>
|
||||
<span style="color: var(--brand-primary);">进行中</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Conversation 5 — Priority: Waiting (Yellow) -->
|
||||
<div class="flex items-stretch relative cursor-pointer" style="border-bottom: 1px solid var(--neutral-100);">
|
||||
<div class="shrink-0" style="width: 3px; background: var(--state-warning);"></div>
|
||||
<div class="flex-1 min-w-0 px-3 py-3">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 36px; height: 36px; background: var(--state-success-bg); color: var(--state-success); font-size: var(--font-size-sm); font-weight: 600;">陈</div>
|
||||
<span class="truncate font-medium" style="font-size: var(--font-size-sm); color: var(--neutral-800);">陈思思</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 shrink-0 ml-2">
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-400);">1小时前</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="truncate flex-1 min-w-0 mr-2" style="font-size: var(--font-size-xs); color: var(--neutral-500);">可以帮我修改一下收货地址吗？</p>
|
||||
<span class="flex items-center gap-1 shrink-0" style="font-size: var(--font-size-xs);">
|
||||
<span class="inline-block rounded-full" style="width: 7px; height: 7px; background: var(--state-warning);"></span>
|
||||
<span style="color: var(--state-warning);">等待中</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Conversation 6 — Priority: In Progress (Blue) -->
|
||||
<div class="flex items-stretch relative cursor-pointer">
|
||||
<div class="shrink-0" style="width: 3px; background: var(--brand-primary);"></div>
|
||||
<div class="flex-1 min-w-0 px-3 py-3">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 36px; height: 36px; background: var(--brand-primary-light); color: var(--brand-primary); font-size: var(--font-size-sm); font-weight: 600;">孙</div>
|
||||
<span class="truncate font-medium" style="font-size: var(--font-size-sm); color: var(--neutral-800);">孙文博</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 shrink-0 ml-2">
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-400);">2小时前</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="truncate flex-1 min-w-0 mr-2" style="font-size: var(--font-size-xs); color: var(--neutral-500);">你们有没有APP端的客服？网页不太方便</p>
|
||||
<span class="flex items-center gap-1 shrink-0" style="font-size: var(--font-size-xs);">
|
||||
<span class="inline-block rounded-full" style="width: 7px; height: 7px; background: var(--brand-primary);"></span>
|
||||
<span style="color: var(--brand-primary);">进行中</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ====== Main Chat Area ====== -->
|
||||
<section class="flex-1 flex flex-col min-w-0 h-full" style="background: var(--neutral-50);">
|
||||
|
||||
<!-- Chat Header -->
|
||||
<div class="shrink-0 flex items-center justify-between px-5" 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">
|
||||
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 38px; height: 38px; background: var(--state-error-bg); color: var(--state-error); font-size: var(--font-size-base); font-weight: 600;">王</div>
|
||||
<div class="min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="truncate font-semibold" style="font-size: var(--font-size-base); color: var(--neutral-900);">王建国</span>
|
||||
<span class="inline-flex items-center px-1.5 py-0.5 rounded whitespace-nowrap" style="font-size: var(--font-size-xs); background: var(--state-info-bg); color: var(--state-info);">网页</span>
|
||||
<span class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded whitespace-nowrap" style="font-size: var(--font-size-xs); background: var(--state-success-bg); color: var(--state-success);">
|
||||
<span class="inline-block rounded-full" style="width: 6px; height: 6px; background: var(--state-success);"></span>
|
||||
在线
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-0.5">
|
||||
<span class="truncate" style="font-size: var(--font-size-xs); color: var(--neutral-400);">IP: 192.168.1.105</span>
|
||||
<span style="font-size: var(--font-size-xs); color: var(--neutral-300);">|</span>
|
||||
<span class="truncate" style="font-size: var(--font-size-xs); color: var(--neutral-400);">北京</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 shrink-0 ml-4">
|
||||
<button class="flex items-center justify-center rounded-lg" style="width: 34px; height: 34px; color: var(--neutral-500);" title="转接">
|
||||
<i data-lucide="forward" style="width: 16px; height: 16px;"></i>
|
||||
</button>
|
||||
<button class="flex items-center justify-center rounded-lg" style="width: 34px; height: 34px; color: var(--neutral-500);" title="标记">
|
||||
<i data-lucide="bookmark" style="width: 16px; height: 16px;"></i>
|
||||
</button>
|
||||
<button class="flex items-center justify-center rounded-lg" style="width: 34px; height: 34px; color: var(--neutral-500);" title="更多">
|
||||
<i data-lucide="more-vertical" style="width: 16px; height: 16px;"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Messages Area -->
|
||||
<div class="flex-1 overflow-y-auto px-5 py-4" style="min-height: 0;">
|
||||
|
||||
<!-- System Message -->
|
||||
<div class="flex justify-center mb-4">
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-lg whitespace-nowrap" style="font-size: var(--font-size-xs); background: var(--neutral-100); color: var(--neutral-400);">会话开始 — 今天 14:23</span>
|
||||
</div>
|
||||
|
||||
<!-- Customer Message (Left) -->
|
||||
<div class="flex items-start gap-2.5 mb-4">
|
||||
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 36px; height: 36px; background: var(--state-error-bg); color: var(--state-error); font-size: var(--font-size-sm); font-weight: 600;">王</div>
|
||||
<div class="min-w-0 max-w-[65%]">
|
||||
<div class="rounded-xl rounded-tl-sm px-3.5 py-2.5" style="background: var(--neutral-0); border: 1px solid var(--neutral-200); box-shadow: var(--shadow-sm);">
|
||||
<p style="font-size: var(--font-size-base); color: var(--neutral-800); line-height: var(--line-height-normal); word-break: break-word;">你好，我在你们平台上买了一个商品，订单号是 #20260709-8832，但是收到货之后发现有质量问题，想要申请退款。</p>
|
||||
</div>
|
||||
<div class="mt-1" style="font-size: var(--font-size-xs); color: var(--neutral-400);">14:23:15</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Agent Message (Right) -->
|
||||
<div class="flex items-start gap-2.5 mb-4 flex-row-reverse">
|
||||
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 36px; height: 36px; background: var(--brand-primary); color: var(--neutral-0); font-size: var(--font-size-sm); font-weight: 600;">李</div>
|
||||
<div class="min-w-0 max-w-[65%]">
|
||||
<div class="rounded-xl rounded-tr-sm px-3.5 py-2.5" style="background: var(--brand-primary); box-shadow: var(--shadow-sm);">
|
||||
<p style="font-size: var(--font-size-base); color: var(--neutral-0); line-height: var(--line-height-normal); word-break: break-word;">您好王先生，非常抱歉给您带来了不好的购物体验。我已经查看了您的订单，请问方便把质量问题拍照发给我看一下吗？这样我可以帮您加快退款处理。</p>
|
||||
</div>
|
||||
<div class="mt-1 text-right" style="font-size: var(--font-size-xs); color: var(--neutral-400);">14:24:02</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Customer: Image Message -->
|
||||
<div class="flex items-start gap-2.5 mb-4">
|
||||
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 36px; height: 36px; background: var(--state-error-bg); color: var(--state-error); font-size: var(--font-size-sm); font-weight: 600;">王</div>
|
||||
<div class="min-w-0 max-w-[65%]">
|
||||
<div class="rounded-xl rounded-tl-sm p-1.5" style="background: var(--neutral-0); border: 1px solid var(--neutral-200); box-shadow: var(--shadow-sm);">
|
||||
<div class="rounded-lg overflow-hidden" style="width: 200px; height: 150px; background: var(--neutral-100); display: flex; align-items: center; justify-content: center;">
|
||||
<div class="flex flex-col items-center gap-1" style="color: var(--neutral-400);">
|
||||
<i data-lucide="image" style="width: 24px; height: 24px;"></i>
|
||||
<span style="font-size: var(--font-size-xs);">商品缺陷照片</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-1.5 px-2 pb-1" style="font-size: var(--font-size-sm); color: var(--neutral-800); word-break: break-word;">这就是收到货时的样子，表面有明显划痕。</p>
|
||||
</div>
|
||||
<div class="mt-1" style="font-size: var(--font-size-xs); color: var(--neutral-400);">14:25:38</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Agent Message -->
|
||||
<div class="flex items-start gap-2.5 mb-4 flex-row-reverse">
|
||||
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 36px; height: 36px; background: var(--brand-primary); color: var(--neutral-0); font-size: var(--font-size-sm); font-weight: 600;">李</div>
|
||||
<div class="min-w-0 max-w-[65%]">
|
||||
<div class="rounded-xl rounded-tr-sm px-3.5 py-2.5" style="background: var(--brand-primary); box-shadow: var(--shadow-sm);">
|
||||
<p style="font-size: var(--font-size-base); color: var(--neutral-0); line-height: var(--line-height-normal); word-break: break-word;">非常感谢您提供的照片，我已经确认了质量问题。现在我为您发起退款申请，预计3-5个工作日退款会到账，请您留意。</p>
|
||||
</div>
|
||||
<div class="mt-1 text-right" style="font-size: var(--font-size-xs); color: var(--neutral-400);">14:27:10</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Customer Message -->
|
||||
<div class="flex items-start gap-2.5 mb-4">
|
||||
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 36px; height: 36px; background: var(--state-error-bg); color: var(--state-error); font-size: var(--font-size-sm); font-weight: 600;">王</div>
|
||||
<div class="min-w-0 max-w-[65%]">
|
||||
<div class="rounded-xl rounded-tl-sm px-3.5 py-2.5" style="background: var(--neutral-0); border: 1px solid var(--neutral-200); box-shadow: var(--shadow-sm);">
|
||||
<p style="font-size: var(--font-size-base); color: var(--neutral-800); line-height: var(--line-height-normal); word-break: break-word;">好的，那我需要寄回商品吗？运费谁承担？</p>
|
||||
</div>
|
||||
<div class="mt-1" style="font-size: var(--font-size-xs); color: var(--neutral-400);">14:28:05</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Agent Message -->
|
||||
<div class="flex items-start gap-2.5 mb-4 flex-row-reverse">
|
||||
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 36px; height: 36px; background: var(--brand-primary); color: var(--neutral-0); font-size: var(--font-size-sm); font-weight: 600;">李</div>
|
||||
<div class="min-w-0 max-w-[65%]">
|
||||
<div class="rounded-xl rounded-tr-sm px-3.5 py-2.5" style="background: var(--brand-primary); box-shadow: var(--shadow-sm);">
|
||||
<p style="font-size: var(--font-size-base); color: var(--neutral-0); line-height: var(--line-height-normal); word-break: break-word;">由于是质量问题，运费由我们承担。稍后我会发给您退货地址和 prepaid 运费单号，您直接寄回即可，无需支付任何费用。</p>
|
||||
</div>
|
||||
<div class="mt-1 text-right" style="font-size: var(--font-size-xs); color: var(--neutral-400);">14:29:22</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Customer Message (Urgent) -->
|
||||
<div class="flex items-start gap-2.5 mb-4">
|
||||
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 36px; height: 36px; background: var(--state-error-bg); color: var(--state-error); font-size: var(--font-size-sm); font-weight: 600;">王</div>
|
||||
<div class="min-w-0 max-w-[65%]">
|
||||
<div class="rounded-xl rounded-tl-sm px-3.5 py-2.5" style="background: var(--neutral-0); border: 1px solid var(--neutral-200); box-shadow: var(--shadow-sm);">
|
||||
<p style="font-size: var(--font-size-base); color: var(--neutral-800); line-height: var(--line-height-normal); word-break: break-word;">请尽快帮我处理退款问题，已经等了很久了！另外运费单号麻烦今天之内发给我。</p>
|
||||
</div>
|
||||
<div class="mt-1" style="font-size: var(--font-size-xs); color: var(--neutral-400);">14:31:47</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Input Area -->
|
||||
<div class="shrink-0" style="background: var(--neutral-0); border-top: 1px solid var(--neutral-200);">
|
||||
|
||||
<!-- Toolbar -->
|
||||
<div class="flex items-center gap-1 px-4 pt-2.5 pb-1">
|
||||
<button class="flex items-center justify-center rounded-md" style="width: 32px; height: 32px; color: var(--neutral-500);" title="表情">
|
||||
<i data-lucide="smile" style="width: 17px; height: 17px;"></i>
|
||||
</button>
|
||||
<button class="flex items-center justify-center rounded-md" style="width: 32px; height: 32px; color: var(--neutral-500);" title="图片">
|
||||
<i data-lucide="image" style="width: 17px; height: 17px;"></i>
|
||||
</button>
|
||||
<button class="flex items-center justify-center rounded-md" style="width: 32px; height: 32px; color: var(--neutral-500);" title="文件">
|
||||
<i data-lucide="paperclip" style="width: 17px; height: 17px;"></i>
|
||||
</button>
|
||||
<div style="width: 1px; height: 20px; background: var(--neutral-200); margin: 0 4px;"></div>
|
||||
<button class="flex items-center justify-center rounded-md" style="width: 32px; height: 32px; color: var(--neutral-500);" title="快捷回复">
|
||||
<i data-lucide="zap" style="width: 17px; height: 17px;"></i>
|
||||
</button>
|
||||
<button class="flex items-center justify-center rounded-md" style="width: 32px; height: 32px; color: var(--neutral-500);" title="常用语">
|
||||
<i data-lucide="message-circle" style="width: 17px; height: 17px;"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Text Input + Send -->
|
||||
<div class="flex items-end gap-2.5 px-4 pb-3 pt-1">
|
||||
<div class="flex-1 min-w-0 rounded-lg px-3.5 py-2.5" style="min-height: 88px; max-height: 160px; background: var(--neutral-50); border: 1px solid var(--neutral-200); outline: none;">
|
||||
<div style="color: var(--neutral-400); font-size: var(--font-size-sm);">输入回复内容...</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 shrink-0">
|
||||
<button class="flex items-center justify-center rounded-lg" style="width: 40px; height: 40px; background: var(--neutral-100); border: 1px solid var(--neutral-200); color: var(--neutral-500);" title="语音">
|
||||
<i data-lucide="mic" style="width: 17px; height: 17px;"></i>
|
||||
</button>
|
||||
<button class="flex items-center justify-center rounded-lg" style="width: 40px; height: 40px; background: var(--brand-primary); color: var(--neutral-0);" title="发送">
|
||||
<i data-lucide="send" style="width: 17px; height: 17px;"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- ====== Right Panel: Customer Info (320px) ====== -->
|
||||
<aside class="shrink-0 flex flex-col h-full overflow-y-auto" style="width: var(--panel-width); border-left: 1px solid var(--neutral-200); background: var(--neutral-0);">
|
||||
|
||||
<!-- Customer Info Header -->
|
||||
<div class="shrink-0 flex items-center justify-between px-4" style="height: var(--header-height); border-bottom: 1px solid var(--neutral-200);">
|
||||
<span class="font-semibold truncate" style="font-size: var(--font-size-base); color: var(--neutral-800);">客户信息</span>
|
||||
<button class="flex items-center justify-center rounded-md" style="width: 28px; height: 28px; color: var(--neutral-400);">
|
||||
<i data-lucide="x" style="width: 16px; height: 16px;"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto px-4 py-4">
|
||||
|
||||
<!-- Avatar + Name -->
|
||||
<div class="flex flex-col items-center mb-5">
|
||||
<div class="flex items-center justify-center rounded-full mb-2" style="width: 56px; height: 56px; background: var(--state-error-bg); color: var(--state-error); font-size: 22px; font-weight: 600;">王</div>
|
||||
<div class="font-semibold" style="font-size: var(--font-size-lg); color: var(--neutral-900);">王建国</div>
|
||||
<div class="flex items-center gap-1 mt-1" style="font-size: var(--font-size-xs); color: var(--neutral-400);">
|
||||
<span class="inline-block rounded-full" style="width: 6px; height: 6px; background: var(--state-success);"></span>
|
||||
在线
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Basic Info Section -->
|
||||
<div class="mb-5">
|
||||
<div class="flex items-center gap-1.5 mb-2.5" style="font-size: var(--font-size-xs); font-weight: 600; color: var(--neutral-500); text-transform: uppercase; letter-spacing: 0.05em;">
|
||||
<i data-lucide="user" style="width: 13px; height: 13px;"></i>
|
||||
基本信息
|
||||
</div>
|
||||
<div class="flex flex-col gap-2" style="font-size: var(--font-size-sm);">
|
||||
<div class="flex items-start gap-2">
|
||||
<span class="shrink-0 whitespace-nowrap" style="color: var(--neutral-400); min-width: 48px;">手机</span>
|
||||
<span class="truncate" style="color: var(--neutral-800);">138****6789</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<span class="shrink-0 whitespace-nowrap" style="color: var(--neutral-400); min-width: 48px;">邮箱</span>
|
||||
<span class="truncate" style="color: var(--neutral-800);">wang.jianguo@email.com</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<span class="shrink-0 whitespace-nowrap" style="color: var(--neutral-400); min-width: 48px;">地区</span>
|
||||
<span class="truncate" style="color: var(--neutral-800);">北京市朝阳区</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<span class="shrink-0 whitespace-nowrap" style="color: var(--neutral-400); min-width: 48px;">注册</span>
|
||||
<span class="truncate" style="color: var(--neutral-800);">2025-03-12</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tags Section -->
|
||||
<div class="mb-5">
|
||||
<div class="flex items-center gap-1.5 mb-2.5" style="font-size: var(--font-size-xs); font-weight: 600; color: var(--neutral-500); text-transform: uppercase; letter-spacing: 0.05em;">
|
||||
<i data-lucide="tag" style="width: 13px; height: 13px;"></i>
|
||||
客户标签
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-md whitespace-nowrap" style="font-size: var(--font-size-xs); font-weight: 500; background: var(--state-warning-bg); color: var(--state-warning);">VIP</span>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-md whitespace-nowrap" style="font-size: var(--font-size-xs); font-weight: 500; background: var(--brand-primary-light); color: var(--brand-primary);">新客户</span>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-md whitespace-nowrap" style="font-size: var(--font-size-xs); font-weight: 500; background: var(--state-success-bg); color: var(--state-success);">活跃</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Source Info Section -->
|
||||
<div class="mb-5">
|
||||
<div class="flex items-center gap-1.5 mb-2.5" style="font-size: var(--font-size-xs); font-weight: 600; color: var(--neutral-500); text-transform: uppercase; letter-spacing: 0.05em;">
|
||||
<i data-lucide="globe" style="width: 13px; height: 13px;"></i>
|
||||
访问来源
|
||||
</div>
|
||||
<div class="flex flex-col gap-2" style="font-size: var(--font-size-sm);">
|
||||
<div class="flex items-start gap-2">
|
||||
<span class="shrink-0 whitespace-nowrap" style="color: var(--neutral-400); min-width: 48px;">渠道</span>
|
||||
<span class="truncate" style="color: var(--neutral-800);">网页在线客服</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<span class="shrink-0 whitespace-nowrap" style="color: var(--neutral-400); min-width: 48px;">来源</span>
|
||||
<span class="truncate" style="color: var(--neutral-800);">百度搜索 / 产品详情页</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<span class="shrink-0 whitespace-nowrap" style="color: var(--neutral-400); min-width: 48px;">设备</span>
|
||||
<span class="truncate" style="color: var(--neutral-800);">Chrome / Windows</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Session History -->
|
||||
<div class="mb-5">
|
||||
<div class="flex items-center gap-1.5 mb-2.5" style="font-size: var(--font-size-xs); font-weight: 600; color: var(--neutral-500); text-transform: uppercase; letter-spacing: 0.05em;">
|
||||
<i data-lucide="history" style="width: 13px; height: 13px;"></i>
|
||||
历史会话
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="rounded-lg px-3 py-2" style="background: var(--neutral-50); border: 1px solid var(--neutral-100);">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<span class="truncate" style="font-size: var(--font-size-sm); font-weight: 500; color: var(--neutral-700);">订单查询</span>
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-400);">07-05</span>
|
||||
</div>
|
||||
<p class="line-clamp-1" style="font-size: var(--font-size-xs); color: var(--neutral-400);">咨询订单物流进度，已解答</p>
|
||||
</div>
|
||||
<div class="rounded-lg px-3 py-2" style="background: var(--neutral-50); border: 1px solid var(--neutral-100);">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<span class="truncate" style="font-size: var(--font-size-sm); font-weight: 500; color: var(--neutral-700);">产品咨询</span>
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-400);">06-28</span>
|
||||
</div>
|
||||
<p class="line-clamp-1" style="font-size: var(--font-size-xs); color: var(--neutral-400);">询问产品规格参数，已推荐合适产品</p>
|
||||
</div>
|
||||
<div class="rounded-lg px-3 py-2" style="background: var(--neutral-50); border: 1px solid var(--neutral-100);">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<span class="truncate" style="font-size: var(--font-size-sm); font-weight: 500; color: var(--neutral-700);">售后问题</span>
|
||||
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-400);">06-15</span>
|
||||
</div>
|
||||
<p class="line-clamp-1" style="font-size: var(--font-size-xs); color: var(--neutral-400);">申请换货处理，已成功完成换货</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom Fields -->
|
||||
<div>
|
||||
<div class="flex items-center gap-1.5 mb-2.5" style="font-size: var(--font-size-xs); font-weight: 600; color: var(--neutral-500); text-transform: uppercase; letter-spacing: 0.05em;">
|
||||
<i data-lucide="file-text" style="width: 13px; height: 13px;"></i>
|
||||
自定义字段
|
||||
</div>
|
||||
<div class="flex flex-col gap-2" style="font-size: var(--font-size-sm);">
|
||||
<div class="flex items-start gap-2">
|
||||
<span class="shrink-0 whitespace-nowrap" style="color: var(--neutral-400); min-width: 64px;">客户等级</span>
|
||||
<span class="truncate" style="color: var(--neutral-800);">金牌客户</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<span class="shrink-0 whitespace-nowrap" style="color: var(--neutral-400); min-width: 64px;">客户经理</span>
|
||||
<span class="truncate" style="color: var(--neutral-800);">张经理</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<span class="shrink-0 whitespace-nowrap" style="color: var(--neutral-400); min-width: 64px;">备注</span>
|
||||
<span class="line-clamp-2" style="color: var(--neutral-800);">大客户，对服务质量要求较高，优先处理</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,620 @@
|
||||
<!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-primary-dark: var(--brand-primary-dark);
|
||||
--color-foreground: var(--neutral-900);
|
||||
--color-foreground-muted: var(--neutral-500);
|
||||
--color-card: var(--neutral-0);
|
||||
--color-card-foreground: var(--neutral-900);
|
||||
--color-muted: var(--neutral-100);
|
||||
--color-muted-foreground: var(--neutral-600);
|
||||
--color-border: var(--neutral-200);
|
||||
--color-accent: var(--neutral-100);
|
||||
--color-accent-foreground: var(--neutral-900);
|
||||
--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);
|
||||
--font-sans: var(--font-family-base);
|
||||
--font-mono: var(--font-family-mono);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
background-color: var(--neutral-50);
|
||||
color: var(--neutral-900);
|
||||
font-family: var(--font-family-base);
|
||||
font-size: var(--font-size-base);
|
||||
line-height: var(--line-height-normal);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="antialiased">
|
||||
<main>
|
||||
<!-- Top Header Bar -->
|
||||
<header style="height:var(--header-height); background:var(--neutral-0); border-bottom:1px solid var(--neutral-200); position:fixed; top:0; left:0; right:0; z-index:40; display:flex; align-items:center; padding:0 var(--space-6);">
|
||||
<div style="width:var(--sidebar-width); display:flex; align-items:center; gap:var(--space-3); flex-shrink:0;">
|
||||
<div style="width:32px; height:32px; background: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:#fff;"></i>
|
||||
</div>
|
||||
<span style="font-size:var(--font-size-lg); font-weight:var(--font-weight-semibold); color:var(--neutral-900);">在线客服</span>
|
||||
</div>
|
||||
<div style="flex:1; display:flex; align-items:center; justify-content:space-between; padding:0 var(--space-6);">
|
||||
<div style="width:320px; height:32px; background:var(--neutral-100); border:1px solid var(--neutral-200); border-radius:var(--radius-md); display:flex; align-items:center; padding:0 var(--space-3); gap:var(--space-2);">
|
||||
<i data-lucide="search" style="width:14px; height:14px; color:var(--neutral-400);"></i>
|
||||
<span style="font-size:var(--font-size-sm); color:var(--neutral-400);">搜索知识条目...</span>
|
||||
</div>
|
||||
<div style="display:flex; align-items:center; gap:var(--space-4);">
|
||||
<div style="position:relative;">
|
||||
<i data-lucide="bell" style="width:18px; height:18px; color:var(--neutral-500);"></i>
|
||||
<span style="position:absolute; top:-4px; right:-4px; width:8px; height:8px; background:var(--state-error); border-radius:var(--radius-full);"></span>
|
||||
</div>
|
||||
<div style="display:flex; align-items:center; gap:var(--space-2);">
|
||||
<div style="width:28px; height:28px; background:var(--brand-primary-light); border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center; font-size:var(--font-size-xs); font-weight:var(--font-weight-semibold); color:var(--brand-primary);">管</div>
|
||||
<span style="font-size:var(--font-size-sm); color:var(--neutral-700);">管理员</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div style="display:flex; padding-top:var(--header-height); min-height:100vh;">
|
||||
<!-- Left Sidebar Navigation (240px) -->
|
||||
<nav style="width:var(--sidebar-width); background:var(--neutral-0); border-right:1px solid var(--neutral-200); position:fixed; top:var(--header-height); bottom:0; left:0; overflow-y:auto; flex-shrink:0;">
|
||||
<div style="padding:var(--space-4) var(--space-3);">
|
||||
<div style="display:flex; flex-direction:column; gap:var(--space-1);">
|
||||
<!-- Nav: Dashboard -->
|
||||
<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); text-decoration:none; color:var(--neutral-600); font-size:var(--font-size-sm); transition:background var(--transition-fast);">
|
||||
<i data-lucide="layout-dashboard" style="width:18px; height:18px; flex-shrink:0;"></i>
|
||||
<span>客服工作台</span>
|
||||
</a>
|
||||
<!-- Nav: Customers -->
|
||||
<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); text-decoration:none; color:var(--neutral-600); font-size:var(--font-size-sm); transition:background var(--transition-fast);">
|
||||
<i data-lucide="users" style="width:18px; height:18px; flex-shrink:0;"></i>
|
||||
<span>客户管理</span>
|
||||
</a>
|
||||
<!-- Nav: History -->
|
||||
<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); text-decoration:none; color:var(--neutral-600); font-size:var(--font-size-sm); transition:background var(--transition-fast);">
|
||||
<i data-lucide="message-square" style="width:18px; height:18px; flex-shrink:0;"></i>
|
||||
<span>对话记录</span>
|
||||
</a>
|
||||
<!-- Nav: Knowledge (Active) -->
|
||||
<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); text-decoration:none; background:var(--brand-primary-lighter); color:var(--brand-primary); font-size:var(--font-size-sm); font-weight:var(--font-weight-medium);">
|
||||
<i data-lucide="book-open" style="width:18px; height:18px; flex-shrink:0;"></i>
|
||||
<span>知识库</span>
|
||||
</a>
|
||||
<!-- Nav: Statistics -->
|
||||
<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); text-decoration:none; color:var(--neutral-600); font-size:var(--font-size-sm); transition:background var(--transition-fast);">
|
||||
<i data-lucide="bar-chart-3" style="width:18px; height:18px; flex-shrink:0;"></i>
|
||||
<span>数据统计</span>
|
||||
</a>
|
||||
<!-- Nav: Settings -->
|
||||
<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); text-decoration:none; color:var(--neutral-600); font-size:var(--font-size-sm); transition:background var(--transition-fast);">
|
||||
<i data-lucide="settings" style="width:18px; height:18px; flex-shrink:0;"></i>
|
||||
<span>系统设置</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<div style="margin-left:var(--sidebar-width); flex:1; display:flex; min-height:calc(100vh - var(--header-height));">
|
||||
<!-- Left Category Panel (280px) -->
|
||||
<aside style="width:280px; background:var(--neutral-0); border-right:1px solid var(--neutral-200); flex-shrink:0; display:flex; flex-direction:column;">
|
||||
<!-- Category Panel Header -->
|
||||
<div style="padding:var(--space-4); border-bottom:1px solid var(--neutral-200);">
|
||||
<div style="font-size:var(--font-size-md); font-weight:var(--font-weight-semibold); color:var(--neutral-900); margin-bottom:var(--space-3);">知识分类</div>
|
||||
<!-- Search Box -->
|
||||
<div style="height:32px; background:var(--neutral-50); border:1px solid var(--neutral-200); border-radius:var(--radius-md); display:flex; align-items:center; padding:0 var(--space-3); gap:var(--space-2);">
|
||||
<i data-lucide="search" style="width:14px; height:14px; color:var(--neutral-400); flex-shrink:0;"></i>
|
||||
<span style="font-size:var(--font-size-xs); color:var(--neutral-400);">搜索分类...</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Category Tree -->
|
||||
<div style="flex:1; overflow-y:auto; padding:var(--space-2) 0;">
|
||||
<!-- All KB (Active) -->
|
||||
<div style="display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4); background:var(--brand-primary-lighter); color:var(--brand-primary); font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); cursor:pointer;">
|
||||
<i data-lucide="layers" style="width:16px; height:16px; flex-shrink:0;"></i>
|
||||
<span style="flex:1; truncate;">全部知识库</span>
|
||||
<span style="font-size:var(--font-size-xs); background:var(--brand-primary-light); padding:1px 6px; border-radius:var(--radius-full);">128</span>
|
||||
</div>
|
||||
|
||||
<!-- 产品常见问题 (Expanded) -->
|
||||
<div style="display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4); color:var(--neutral-700); font-size:var(--font-size-sm); cursor:pointer;">
|
||||
<i data-lucide="chevron-down" style="width:14px; height:14px; flex-shrink:0;"></i>
|
||||
<i data-lucide="package" style="width:16px; height:16px; flex-shrink:0;"></i>
|
||||
<span style="flex:1; truncate;">产品常见问题</span>
|
||||
<span style="font-size:var(--font-size-xs); color:var(--neutral-400);">45</span>
|
||||
</div>
|
||||
<!-- Sub-categories -->
|
||||
<div style="padding-left:var(--space-6);">
|
||||
<div style="display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4); color:var(--neutral-600); font-size:var(--font-size-xs); cursor:pointer;">
|
||||
<i data-lucide="user-circle" style="width:14px; height:14px; flex-shrink:0;"></i>
|
||||
<span style="flex:1; truncate;">账户相关</span>
|
||||
<span style="font-size:var(--font-size-xs); color:var(--neutral-400);">15</span>
|
||||
</div>
|
||||
<div style="display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4); color:var(--neutral-600); font-size:var(--font-size-xs); cursor:pointer;">
|
||||
<i data-lucide="mouse-pointer-click" style="width:14px; height:14px; flex-shrink:0;"></i>
|
||||
<span style="flex:1; truncate;">功能使用</span>
|
||||
<span style="font-size:var(--font-size-xs); color:var(--neutral-400);">20</span>
|
||||
</div>
|
||||
<div style="display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4); color:var(--neutral-600); font-size:var(--font-size-xs); cursor:pointer;">
|
||||
<i data-lucide="credit-card" style="width:14px; height:14px; flex-shrink:0;"></i>
|
||||
<span style="flex:1; truncate;">计费问题</span>
|
||||
<span style="font-size:var(--font-size-xs); color:var(--neutral-400);">10</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 售后服务 -->
|
||||
<div style="display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4); color:var(--neutral-700); font-size:var(--font-size-sm); cursor:pointer;">
|
||||
<i data-lucide="chevron-right" style="width:14px; height:14px; flex-shrink:0;"></i>
|
||||
<i data-lucide="shield-check" style="width:16px; height:16px; flex-shrink:0;"></i>
|
||||
<span style="flex:1; truncate;">售后服务</span>
|
||||
<span style="font-size:var(--font-size-xs); color:var(--neutral-400);">32</span>
|
||||
</div>
|
||||
|
||||
<!-- 技术支持 -->
|
||||
<div style="display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4); color:var(--neutral-700); font-size:var(--font-size-sm); cursor:pointer;">
|
||||
<i data-lucide="chevron-right" style="width:14px; height:14px; flex-shrink:0;"></i>
|
||||
<i data-lucide="wrench" style="width:16px; height:16px; flex-shrink:0;"></i>
|
||||
<span style="flex:1; truncate;">技术支持</span>
|
||||
<span style="font-size:var(--font-size-xs); color:var(--neutral-400);">28</span>
|
||||
</div>
|
||||
|
||||
<!-- 政策条款 -->
|
||||
<div style="display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4); color:var(--neutral-700); font-size:var(--font-size-sm); cursor:pointer;">
|
||||
<i data-lucide="chevron-right" style="width:14px; height:14px; flex-shrink:0;"></i>
|
||||
<i data-lucide="file-text" style="width:16px; height:16px; flex-shrink:0;"></i>
|
||||
<span style="flex:1; truncate;">政策条款</span>
|
||||
<span style="font-size:var(--font-size-xs); color:var(--neutral-400);">15</span>
|
||||
</div>
|
||||
|
||||
<!-- 快捷回复模板 -->
|
||||
<div style="display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4); color:var(--neutral-700); font-size:var(--font-size-sm); cursor:pointer;">
|
||||
<i data-lucide="chevron-right" style="width:14px; height:14px; flex-shrink:0;"></i>
|
||||
<i data-lucide="zap" style="width:16px; height:16px; flex-shrink:0;"></i>
|
||||
<span style="flex:1; truncate;">快捷回复模板</span>
|
||||
<span style="font-size:var(--font-size-xs); color:var(--neutral-400);">8</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- New Category Button -->
|
||||
<div style="padding:var(--space-3) var(--space-4); border-top:1px solid var(--neutral-200);">
|
||||
<button style="width:100%; height:32px; display:flex; align-items:center; justify-content:center; gap:var(--space-2); background:var(--neutral-0); border:1px solid var(--neutral-200); border-radius:var(--radius-md); color:var(--neutral-600); font-size:var(--font-size-xs); cursor:pointer; font-family:var(--font-family-base);">
|
||||
<i data-lucide="folder-plus" style="width:14px; height:14px;"></i>
|
||||
<span>新建分类</span>
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Right Content List -->
|
||||
<section style="flex:1; display:flex; flex-direction:column; overflow:hidden;">
|
||||
<!-- Toolbar -->
|
||||
<div style="padding:var(--space-4) var(--space-6); border-bottom:1px solid var(--neutral-200); display:flex; align-items:center; gap:var(--space-3); flex-shrink:0;">
|
||||
<!-- Search -->
|
||||
<div style="flex:1; max-width:400px; height:32px; background:var(--neutral-0); border:1px solid var(--neutral-200); border-radius:var(--radius-md); display:flex; align-items:center; padding:0 var(--space-3); gap:var(--space-2);">
|
||||
<i data-lucide="search" style="width:14px; height:14px; color:var(--neutral-400); flex-shrink:0;"></i>
|
||||
<span style="font-size:var(--font-size-xs); color:var(--neutral-400);">搜索知识条目...</span>
|
||||
</div>
|
||||
<!-- Sort -->
|
||||
<div style="display:flex; align-items:center; gap:var(--space-2);">
|
||||
<span style="font-size:var(--font-size-xs); color:var(--neutral-500); white-space:nowrap;">排序:</span>
|
||||
<div style="height:32px; padding:0 var(--space-3); background:var(--neutral-0); border:1px solid var(--neutral-200); border-radius:var(--radius-md); display:flex; align-items:center; gap:var(--space-2); font-size:var(--font-size-xs); color:var(--neutral-700); cursor:pointer;">
|
||||
<span>按使用次数</span>
|
||||
<i data-lucide="chevron-down" style="width:12px; height:12px; color:var(--neutral-400);"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Spacer -->
|
||||
<div style="flex:1;"></div>
|
||||
<!-- New Entry Button -->
|
||||
<button style="height:32px; padding:0 var(--space-4); background:var(--brand-primary); border:none; border-radius:var(--radius-md); color:#fff; font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); cursor:pointer; display:flex; align-items:center; gap:var(--space-2); font-family:var(--font-family-base);">
|
||||
<i data-lucide="plus" style="width:14px; height:14px;"></i>
|
||||
<span>新建知识条目</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- List Header -->
|
||||
<div style="display:flex; align-items:center; padding:var(--space-2) var(--space-6); background:var(--neutral-100); border-bottom:1px solid var(--neutral-200); font-size:var(--font-size-xs); color:var(--neutral-500); font-weight:var(--font-weight-medium); flex-shrink:0;">
|
||||
<div style="width:40%; padding-left:var(--space-3);">标题</div>
|
||||
<div style="width:12%; text-align:center;">分类</div>
|
||||
<div style="width:10%; text-align:center;">状态</div>
|
||||
<div style="width:14%; text-align:center;">使用频率</div>
|
||||
<div style="width:12%; text-align:center;">更新时间</div>
|
||||
<div style="width:12%; text-align:right; padding-right:var(--space-3);">操作</div>
|
||||
</div>
|
||||
|
||||
<!-- Knowledge Entries List -->
|
||||
<div style="flex:1; overflow-y:auto;">
|
||||
<!-- Entry 1: High usage -->
|
||||
<div style="display:flex; align-items:center; padding:var(--space-3) var(--space-6); border-bottom:1px solid var(--neutral-100); transition:background var(--transition-fast); cursor:pointer;" onmouseover="this.style.background='var(--neutral-50)'" onmouseout="this.style.background='transparent'">
|
||||
<div style="width:40%; padding-left:var(--space-3); min-w-0;">
|
||||
<div style="font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); color:var(--neutral-900); truncate;">如何重置账户密码？</div>
|
||||
<div style="font-size:var(--font-size-xs); color:var(--neutral-500); margin-top:var(--space-1); line-clamp:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">用户可以通过手机验证码或邮箱链接两种方式重置密码，如果均不可用请联系客服人工重置...</div>
|
||||
</div>
|
||||
<div style="width:12%; text-align:center;">
|
||||
<span style="display:inline-flex; padding:1px 8px; background:var(--brand-primary-lighter); color:var(--brand-primary); font-size:var(--font-size-xs); border-radius:var(--radius-sm); white-space:nowrap;">账户相关</span>
|
||||
</div>
|
||||
<div style="width:10%; text-align:center;">
|
||||
<span style="display:inline-flex; align-items:center; gap:var(--space-1); padding:1px 8px; background:var(--state-success-bg); color:var(--state-success); font-size:var(--font-size-xs); border-radius:var(--radius-sm); white-space:nowrap;">
|
||||
<span style="width:6px; height:6px; border-radius:var(--radius-full); background:var(--state-success);"></span>
|
||||
已发布
|
||||
</span>
|
||||
</div>
|
||||
<div style="width:14%; display:flex; flex-direction:column; align-items:center; gap:var(--space-1);">
|
||||
<span style="font-size:var(--font-size-xs); color:var(--neutral-700); white-space:nowrap;">2,847 次</span>
|
||||
<!-- Usage frequency bar (soul element) -->
|
||||
<div style="width:80px; height:4px; background:var(--neutral-200); border-radius:2px; overflow:hidden;">
|
||||
<div style="width:95%; height:100%; background:var(--brand-primary); border-radius:2px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:12%; text-align:center;">
|
||||
<span style="font-size:var(--font-size-xs); color:var(--neutral-500); white-space:nowrap;">2025-07-08</span>
|
||||
</div>
|
||||
<div style="width:12%; display:flex; align-items:center; justify-content:flex-end; gap:var(--space-2); padding-right:var(--space-3);">
|
||||
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="编辑"><i data-lucide="pencil" style="width:14px; height:14px;"></i></button>
|
||||
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="复制"><i data-lucide="copy" style="width:14px; height:14px;"></i></button>
|
||||
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="删除"><i data-lucide="trash-2" style="width:14px; height:14px;"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Entry 2: High usage -->
|
||||
<div style="display:flex; align-items:center; padding:var(--space-3) var(--space-6); border-bottom:1px solid var(--neutral-100); transition:background var(--transition-fast); cursor:pointer;" onmouseover="this.style.background='var(--neutral-50)'" onmouseout="this.style.background='transparent'">
|
||||
<div style="width:40%; padding-left:var(--space-3); min-w-0;">
|
||||
<div style="font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); color:var(--neutral-900); truncate;">订单退款流程说明</div>
|
||||
<div style="font-size:var(--font-size-xs); color:var(--neutral-500); margin-top:var(--space-1); line-clamp:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">用户发起退款申请后，系统将在1-3个工作日内审核，审核通过后原路退回支付账户...</div>
|
||||
</div>
|
||||
<div style="width:12%; text-align:center;">
|
||||
<span style="display:inline-flex; padding:1px 8px; background:var(--state-warning-bg); color:var(--state-warning); font-size:var(--font-size-xs); border-radius:var(--radius-sm); white-space:nowrap;">售后服务</span>
|
||||
</div>
|
||||
<div style="width:10%; text-align:center;">
|
||||
<span style="display:inline-flex; align-items:center; gap:var(--space-1); padding:1px 8px; background:var(--state-success-bg); color:var(--state-success); font-size:var(--font-size-xs); border-radius:var(--radius-sm); white-space:nowrap;">
|
||||
<span style="width:6px; height:6px; border-radius:var(--radius-full); background:var(--state-success);"></span>
|
||||
已发布
|
||||
</span>
|
||||
</div>
|
||||
<div style="width:14%; display:flex; flex-direction:column; align-items:center; gap:var(--space-1);">
|
||||
<span style="font-size:var(--font-size-xs); color:var(--neutral-700); white-space:nowrap;">2,156 次</span>
|
||||
<div style="width:80px; height:4px; background:var(--neutral-200); border-radius:2px; overflow:hidden;">
|
||||
<div style="width:78%; height:100%; background:var(--brand-primary); border-radius:2px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:12%; text-align:center;">
|
||||
<span style="font-size:var(--font-size-xs); color:var(--neutral-500); white-space:nowrap;">2025-07-07</span>
|
||||
</div>
|
||||
<div style="width:12%; display:flex; align-items:center; justify-content:flex-end; gap:var(--space-2); padding-right:var(--space-3);">
|
||||
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="编辑"><i data-lucide="pencil" style="width:14px; height:14px;"></i></button>
|
||||
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="复制"><i data-lucide="copy" style="width:14px; height:14px;"></i></button>
|
||||
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="删除"><i data-lucide="trash-2" style="width:14px; height:14px;"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Entry 3: Medium-high usage -->
|
||||
<div style="display:flex; align-items:center; padding:var(--space-3) var(--space-6); border-bottom:1px solid var(--neutral-100); transition:background var(--transition-fast); cursor:pointer;" onmouseover="this.style.background='var(--neutral-50)'" onmouseout="this.style.background='transparent'">
|
||||
<div style="width:40%; padding-left:var(--space-3); min-w-0;">
|
||||
<div style="font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); color:var(--neutral-900); truncate;">如何升级为高级会员？</div>
|
||||
<div style="font-size:var(--font-size-xs); color:var(--neutral-500); margin-top:var(--space-1); line-clamp-1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">进入账户设置页面，选择会员升级选项，支持月付和年付两种方式，年付享8折优惠...</div>
|
||||
</div>
|
||||
<div style="width:12%; text-align:center;">
|
||||
<span style="display:inline-flex; padding:1px 8px; background:var(--brand-primary-lighter); color:var(--brand-primary); font-size:var(--font-size-xs); border-radius:var(--radius-sm); white-space:nowrap;">计费问题</span>
|
||||
</div>
|
||||
<div style="width:10%; text-align:center;">
|
||||
<span style="display:inline-flex; align-items:center; gap:var(--space-1); padding:1px 8px; background:var(--state-success-bg); color:var(--state-success); font-size:var(--font-size-xs); border-radius:var(--radius-sm); white-space:nowrap;">
|
||||
<span style="width:6px; height:6px; border-radius:var(--radius-full); background:var(--state-success);"></span>
|
||||
已发布
|
||||
</span>
|
||||
</div>
|
||||
<div style="width:14%; display:flex; flex-direction:column; align-items:center; gap:var(--space-1);">
|
||||
<span style="font-size:var(--font-size-xs); color:var(--neutral-700); white-space:nowrap;">1,583 次</span>
|
||||
<div style="width:80px; height:4px; background:var(--neutral-200); border-radius:2px; overflow:hidden;">
|
||||
<div style="width:60%; height:100%; background:var(--brand-primary); border-radius:2px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:12%; text-align:center;">
|
||||
<span style="font-size:var(--font-size-xs); color:var(--neutral-500); white-space:nowrap;">2025-07-05</span>
|
||||
</div>
|
||||
<div style="width:12%; display:flex; align-items:center; justify-content:flex-end; gap:var(--space-2); padding-right:var(--space-3);">
|
||||
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="编辑"><i data-lucide="pencil" style="width:14px; height:14px;"></i></button>
|
||||
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="复制"><i data-lucide="copy" style="width:14px; height:14px;"></i></button>
|
||||
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="删除"><i data-lucide="trash-2" style="width:14px; height:14px;"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Entry 4: Medium usage -->
|
||||
<div style="display:flex; align-items:center; padding:var(--space-3) var(--space-6); border-bottom:1px solid var(--neutral-100); transition:background var(--transition-fast); cursor:pointer;" onmouseover="this.style.background='var(--neutral-50)'" onmouseout="this.style.background='transparent'">
|
||||
<div style="width:40%; padding-left:var(--space-3); min-w-0;">
|
||||
<div style="font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); color:var(--neutral-900); truncate;">系统常见报错代码对照表</div>
|
||||
<div style="font-size:var(--font-size-xs); color:var(--neutral-500); margin-top:var(--space-1); line-clamp-1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">错误代码E1001表示网络超时，E1002表示认证失败，E1003表示权限不足，E2001表示数据格式错误...</div>
|
||||
</div>
|
||||
<div style="width:12%; text-align:center;">
|
||||
<span style="display:inline-flex; padding:1px 8px; background:var(--state-info-bg); color:var(--state-info); font-size:var(--font-size-xs); border-radius:var(--radius-sm); white-space:nowrap;">技术支持</span>
|
||||
</div>
|
||||
<div style="width:10%; text-align:center;">
|
||||
<span style="display:inline-flex; align-items:center; gap:var(--space-1); padding:1px 8px; background:var(--state-success-bg); color:var(--state-success); font-size:var(--font-size-xs); border-radius:var(--radius-sm); white-space:nowrap;">
|
||||
<span style="width:6px; height:6px; border-radius:var(--radius-full); background:var(--state-success);"></span>
|
||||
已发布
|
||||
</span>
|
||||
</div>
|
||||
<div style="width:14%; display:flex; flex-direction:column; align-items:center; gap:var(--space-1);">
|
||||
<span style="font-size:var(--font-size-xs); color:var(--neutral-700); white-space:nowrap;">1,024 次</span>
|
||||
<div style="width:80px; height:4px; background:var(--neutral-200); border-radius:2px; overflow:hidden;">
|
||||
<div style="width:42%; height:100%; background:var(--brand-primary); border-radius:2px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:12%; text-align:center;">
|
||||
<span style="font-size:var(--font-size-xs); color:var(--neutral-500); white-space:nowrap;">2025-07-03</span>
|
||||
</div>
|
||||
<div style="width:12%; display:flex; align-items:center; justify-content:flex-end; gap:var(--space-2); padding-right:var(--space-3);">
|
||||
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="编辑"><i data-lucide="pencil" style="width:14px; height:14px;"></i></button>
|
||||
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="复制"><i data-lucide="copy" style="width:14px; height:14px;"></i></button>
|
||||
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="删除"><i data-lucide="trash-2" style="width:14px; height:14px;"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Entry 5: Low-medium usage -->
|
||||
<div style="display:flex; align-items:center; padding:var(--space-3) var(--space-6); border-bottom:1px solid var(--neutral-100); transition:background var(--transition-fast); cursor:pointer;" onmouseover="this.style.background='var(--neutral-50)'" onmouseout="this.style.background='transparent'">
|
||||
<div style="width:40%; padding-left:var(--space-3); min-w-0;">
|
||||
<div style="font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); color:var(--neutral-900); truncate;">隐私政策更新通知模板</div>
|
||||
<div style="font-size:var(--font-size-xs); color:var(--neutral-500); margin-top:var(--space-1); line-clamp-1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">尊敬的用户，我们于2025年7月对隐私政策进行了更新，主要变更包括数据收集范围调整...</div>
|
||||
</div>
|
||||
<div style="width:12%; text-align:center;">
|
||||
<span style="display:inline-flex; padding:1px 8px; background:var(--neutral-100); color:var(--neutral-600); font-size:var(--font-size-xs); border-radius:var(--radius-sm); white-space:nowrap;">政策条款</span>
|
||||
</div>
|
||||
<div style="width:10%; text-align:center;">
|
||||
<span style="display:inline-flex; align-items:center; gap:var(--space-1); padding:1px 8px; background:var(--state-success-bg); color:var(--state-success); font-size:var(--font-size-xs); border-radius:var(--radius-sm); white-space:nowrap;">
|
||||
<span style="width:6px; height:6px; border-radius:var(--radius-full); background:var(--state-success);"></span>
|
||||
已发布
|
||||
</span>
|
||||
</div>
|
||||
<div style="width:14%; display:flex; flex-direction:column; align-items:center; gap:var(--space-1);">
|
||||
<span style="font-size:var(--font-size-xs); color:var(--neutral-700); white-space:nowrap;">486 次</span>
|
||||
<div style="width:80px; height:4px; background:var(--neutral-200); border-radius:2px; overflow:hidden;">
|
||||
<div style="width:22%; height:100%; background:var(--neutral-400); border-radius:2px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:12%; text-align:center;">
|
||||
<span style="font-size:var(--font-size-xs); color:var(--neutral-500); white-space:nowrap;">2025-07-01</span>
|
||||
</div>
|
||||
<div style="width:12%; display:flex; align-items:center; justify-content:flex-end; gap:var(--space-2); padding-right:var(--space-3);">
|
||||
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="编辑"><i data-lucide="pencil" style="width:14px; height:14px;"></i></button>
|
||||
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="复制"><i data-lucide="copy" style="width:14px; height:14px;"></i></button>
|
||||
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="删除"><i data-lucide="trash-2" style="width:14px; height:14px;"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Entry 6: Low usage -->
|
||||
<div style="display:flex; align-items:center; padding:var(--space-3) var(--space-6); border-bottom:1px solid var(--neutral-100); transition:background var(--transition-fast); cursor:pointer;" onmouseover="this.style.background='var(--neutral-50)'" onmouseout="this.style.background='transparent'">
|
||||
<div style="width:40%; padding-left:var(--space-3); min-w-0;">
|
||||
<div style="font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); color:var(--neutral-900); truncate;">导出聊天记录功能说明</div>
|
||||
<div style="font-size:var(--font-size-xs); color:var(--neutral-500); margin-top:var(--space-1); line-clamp-1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">管理员可在对话记录页面选择时间范围后点击导出按钮，支持CSV和PDF两种格式...</div>
|
||||
</div>
|
||||
<div style="width:12%; text-align:center;">
|
||||
<span style="display:inline-flex; padding:1px 8px; background:var(--brand-primary-lighter); color:var(--brand-primary); font-size:var(--font-size-xs); border-radius:var(--radius-sm); white-space:nowrap;">功能使用</span>
|
||||
</div>
|
||||
<div style="width:10%; text-align:center;">
|
||||
<span style="display:inline-flex; align-items:center; gap:var(--space-1); padding:1px 8px; background:var(--state-success-bg); color:var(--state-success); font-size:var(--font-size-xs); border-radius:var(--radius-sm); white-space:nowrap;">
|
||||
<span style="width:6px; height:6px; border-radius:var(--radius-full); background:var(--state-success);"></span>
|
||||
已发布
|
||||
</span>
|
||||
</div>
|
||||
<div style="width:14%; display:flex; flex-direction:column; align-items:center; gap:var(--space-1);">
|
||||
<span style="font-size:var(--font-size-xs); color:var(--neutral-700); white-space:nowrap;">217 次</span>
|
||||
<div style="width:80px; height:4px; background:var(--neutral-200); border-radius:2px; overflow:hidden;">
|
||||
<div style="width:12%; height:100%; background:var(--neutral-400); border-radius:2px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:12%; text-align:center;">
|
||||
<span style="font-size:var(--font-size-xs); color:var(--neutral-500); white-space:nowrap;">2025-06-28</span>
|
||||
</div>
|
||||
<div style="width:12%; display:flex; align-items:center; justify-content:flex-end; gap:var(--space-2); padding-right:var(--space-3);">
|
||||
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="编辑"><i data-lucide="pencil" style="width:14px; height:14px;"></i></button>
|
||||
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="复制"><i data-lucide="copy" style="width:14px; height:14px;"></i></button>
|
||||
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="删除"><i data-lucide="trash-2" style="width:14px; height:14px;"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Entry 7: Draft -->
|
||||
<div style="display:flex; align-items:center; padding:var(--space-3) var(--space-6); border-bottom:1px solid var(--neutral-100); transition:background var(--transition-fast); cursor:pointer;" onmouseover="this.style.background='var(--neutral-50)'" onmouseout="this.style.background='transparent'">
|
||||
<div style="width:40%; padding-left:var(--space-3); min-w-0;">
|
||||
<div style="font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); color:var(--neutral-900); truncate;">产品新功能发布标准话术</div>
|
||||
<div style="font-size:var(--font-size-xs); color:var(--neutral-500); margin-top:var(--space-1); line-clamp-1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">当用户咨询新功能相关信息时，使用以下话术模板回复，包含功能亮点、使用方式和常见疑问...</div>
|
||||
</div>
|
||||
<div style="width:12%; text-align:center;">
|
||||
<span style="display:inline-flex; padding:1px 8px; background:var(--neutral-100); color:var(--neutral-500); font-size:var(--font-size-xs); border-radius:var(--radius-sm); white-space:nowrap;">快捷回复</span>
|
||||
</div>
|
||||
<div style="width:10%; text-align:center;">
|
||||
<span style="display:inline-flex; align-items:center; gap:var(--space-1); padding:1px 8px; background:var(--neutral-100); color:var(--neutral-500); font-size:var(--font-size-xs); border-radius:var(--radius-sm); white-space:nowrap;">
|
||||
<span style="width:6px; height:6px; border-radius:var(--radius-full); background:var(--neutral-400);"></span>
|
||||
草稿
|
||||
</span>
|
||||
</div>
|
||||
<div style="width:14%; display:flex; flex-direction:column; align-items:center; gap:var(--space-1);">
|
||||
<span style="font-size:var(--font-size-xs); color:var(--neutral-400); white-space:nowrap;">0 次</span>
|
||||
<div style="width:80px; height:4px; background:var(--neutral-200); border-radius:2px; overflow:hidden;">
|
||||
<div style="width:0%; height:100%; background:var(--neutral-300); border-radius:2px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:12%; text-align:center;">
|
||||
<span style="font-size:var(--font-size-xs); color:var(--neutral-500); white-space:nowrap;">2025-07-09</span>
|
||||
</div>
|
||||
<div style="width:12%; display:flex; align-items:center; justify-content:flex-end; gap:var(--space-2); padding-right:var(--space-3);">
|
||||
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="编辑"><i data-lucide="pencil" style="width:14px; height:14px;"></i></button>
|
||||
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="复制"><i data-lucide="copy" style="width:14px; height:14px;"></i></button>
|
||||
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="删除"><i data-lucide="trash-2" style="width:14px; height:14px;"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Entry 8: Low usage -->
|
||||
<div style="display:flex; align-items:center; padding:var(--space-3) var(--space-6); border-bottom:1px solid var(--neutral-100); transition:background var(--transition-fast); cursor:pointer;" onmouseover="this.style.background='var(--neutral-50)'" onmouseout="this.style.background='transparent'">
|
||||
<div style="width:40%; padding-left:var(--space-3); min-w-0;">
|
||||
<div style="font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); color:var(--neutral-900); truncate;">API接口调用频率限制说明</div>
|
||||
<div style="font-size:var(--font-size-xs); color:var(--neutral-500); margin-top:var(--space-1); line-clamp-1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">标准版用户API调用频率限制为每分钟60次，专业版为每分钟300次，企业版可定制...</div>
|
||||
</div>
|
||||
<div style="width:12%; text-align:center;">
|
||||
<span style="display:inline-flex; padding:1px 8px; background:var(--state-info-bg); color:var(--state-info); font-size:var(--font-size-xs); border-radius:var(--radius-sm); white-space:nowrap;">技术支持</span>
|
||||
</div>
|
||||
<div style="width:10%; text-align:center;">
|
||||
<span style="display:inline-flex; align-items:center; gap:var(--space-1); padding:1px 8px; background:var(--state-success-bg); color:var(--state-success); font-size:var(--font-size-xs); border-radius:var(--radius-sm); white-space:nowrap;">
|
||||
<span style="width:6px; height:6px; border-radius:var(--radius-full); background:var(--state-success);"></span>
|
||||
已发布
|
||||
</span>
|
||||
</div>
|
||||
<div style="width:14%; display:flex; flex-direction:column; align-items:center; gap:var(--space-1);">
|
||||
<span style="font-size:var(--font-size-xs); color:var(--neutral-700); white-space:nowrap;">93 次</span>
|
||||
<div style="width:80px; height:4px; background:var(--neutral-200); border-radius:2px; overflow:hidden;">
|
||||
<div style="width:6%; height:100%; background:var(--neutral-400); border-radius:2px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:12%; text-align:center;">
|
||||
<span style="font-size:var(--font-size-xs); color:var(--neutral-500); white-space:nowrap;">2025-06-20</span>
|
||||
</div>
|
||||
<div style="width:12%; display:flex; align-items:center; justify-content:flex-end; gap:var(--space-2); padding-right:var(--space-3);">
|
||||
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="编辑"><i data-lucide="pencil" style="width:14px; height:14px;"></i></button>
|
||||
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="复制"><i data-lucide="copy" style="width:14px; height:14px;"></i></button>
|
||||
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-400);" title="删除"><i data-lucide="trash-2" style="width:14px; height:14px;"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div style="padding:var(--space-3) var(--space-6); border-top:1px solid var(--neutral-200); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; background:var(--neutral-0);">
|
||||
<span style="font-size:var(--font-size-xs); color:var(--neutral-500);">共 128 条，当前第 1/13 页</span>
|
||||
<div style="display:flex; align-items:center; gap:var(--space-1);">
|
||||
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:1px solid var(--neutral-200); background:var(--neutral-0); border-radius:var(--radius-md); color:var(--neutral-400); cursor:pointer; font-family:var(--font-family-base);">
|
||||
<i data-lucide="chevron-left" style="width:14px; height:14px;"></i>
|
||||
</button>
|
||||
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:1px solid var(--brand-primary); background:var(--brand-primary); border-radius:var(--radius-md); color:#fff; font-size:var(--font-size-xs); font-weight:var(--font-weight-medium); cursor:pointer; font-family:var(--font-family-base);">1</button>
|
||||
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:1px solid var(--neutral-200); background:var(--neutral-0); border-radius:var(--radius-md); color:var(--neutral-600); font-size:var(--font-size-xs); cursor:pointer; font-family:var(--font-family-base);">2</button>
|
||||
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:1px solid var(--neutral-200); background:var(--neutral-0); border-radius:var(--radius-md); color:var(--neutral-600); font-size:var(--font-size-xs); cursor:pointer; font-family:var(--font-family-base);">3</button>
|
||||
<span style="font-size:var(--font-size-xs); color:var(--neutral-400); padding:0 2px;">...</span>
|
||||
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:1px solid var(--neutral-200); background:var(--neutral-0); border-radius:var(--radius-md); color:var(--neutral-600); font-size:var(--font-size-xs); cursor:pointer; font-family:var(--font-family-base);">13</button>
|
||||
<button style="width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:1px solid var(--neutral-200); background:var(--neutral-0); border-radius:var(--radius-md); color:var(--neutral-600); cursor:pointer; font-family:var(--font-family-base);">
|
||||
<i data-lucide="chevron-right" style="width:14px; height:14px;"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,332 @@
|
||||
<!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>
|
||||
<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);
|
||||
}
|
||||
@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="antialiased" style="margin:0; padding:0; overflow:hidden;">
|
||||
|
||||
<!-- Simulated webpage background (blurred) -->
|
||||
<div style="position:fixed; inset:0; background:var(--neutral-100); z-index:0;">
|
||||
<div style="max-width:960px; margin:0 auto; padding:40px 24px; filter:blur(4px); opacity:0.4;">
|
||||
<div style="height:40px; width:60%; background:var(--neutral-200); border-radius:var(--radius-sm); margin-bottom:16px;"></div>
|
||||
<div style="height:16px; width:90%; background:var(--neutral-200); border-radius:var(--radius-sm); margin-bottom:12px;"></div>
|
||||
<div style="height:16px; width:75%; background:var(--neutral-200); border-radius:var(--radius-sm); margin-bottom:24px;"></div>
|
||||
<div style="display:flex; gap:16px; margin-bottom:24px;">
|
||||
<div style="width:200px; height:120px; background:var(--neutral-200); border-radius:var(--radius-md);"></div>
|
||||
<div style="width:200px; height:120px; background:var(--neutral-200); border-radius:var(--radius-md);"></div>
|
||||
<div style="width:200px; height:120px; background:var(--neutral-200); border-radius:var(--radius-md);"></div>
|
||||
</div>
|
||||
<div style="height:16px; width:85%; background:var(--neutral-200); border-radius:var(--radius-sm); margin-bottom:12px;"></div>
|
||||
<div style="height:16px; width:70%; background:var(--neutral-200); border-radius:var(--radius-sm); margin-bottom:12px;"></div>
|
||||
<div style="height:16px; width:80%; background:var(--neutral-200); border-radius:var(--radius-sm); margin-bottom:24px;"></div>
|
||||
<div style="height:200px; width:100%; background:var(--neutral-200); border-radius:var(--radius-md);"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chat Window (floating component) -->
|
||||
<main style="position:fixed; z-index:10; right:max(24px, calc((100vw - 400px)/2)); bottom:max(24px, calc((100vh - 600px)/2)); width:400px; height:600px; max-width:calc(100vw - 32px); max-height:calc(100vh - 32px); display:flex; flex-direction:column; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-floating); background:var(--neutral-0);">
|
||||
|
||||
<!-- ===== Window Header ===== -->
|
||||
<header style="flex-shrink:0; padding:var(--space-4) var(--space-4); background:var(--brand-primary); color:var(--neutral-0); display:flex; align-items:center; gap:var(--space-3);">
|
||||
<!-- Agent avatar -->
|
||||
<div style="width:40px; height:40px; border-radius:var(--radius-full); background:rgba(255,255,255,0.2); flex-shrink:0; display:flex; align-items:center; justify-content:center;">
|
||||
<i data-lucide="headset" style="width:20px; height:20px; color:var(--neutral-0);"></i>
|
||||
</div>
|
||||
<!-- Title block -->
|
||||
<div style="flex:1; min-width:0;">
|
||||
<h1 style="margin:0; font-size:var(--font-size-md); font-weight:var(--font-weight-semibold); line-height:var(--line-height-tight); color:var(--neutral-0);">在线客服</h1>
|
||||
<p style="margin:0; font-size:var(--font-size-xs); line-height:var(--line-height-normal); color:rgba(255,255,255,0.8); display:flex; align-items:center; gap:var(--space-1);">
|
||||
<span style="width:6px; height:6px; border-radius:var(--radius-full); background:var(--state-success); display:inline-block;"></span>
|
||||
正在为您服务
|
||||
</p>
|
||||
</div>
|
||||
<!-- Window controls -->
|
||||
<div style="display:flex; align-items:center; gap:var(--space-1); flex-shrink:0;">
|
||||
<button style="width:28px; height:28px; border-radius:var(--radius-sm); border:none; background:rgba(255,255,255,0.15); cursor:pointer; display:flex; align-items:center; justify-content:center;" aria-label="最小化">
|
||||
<i data-lucide="minus" style="width:16px; height:16px; color:var(--neutral-0);"></i>
|
||||
</button>
|
||||
<button style="width:28px; height:28px; border-radius:var(--radius-sm); border:none; background:rgba(255,255,255,0.15); cursor:pointer; display:flex; align-items:center; justify-content:center;" aria-label="关闭">
|
||||
<i data-lucide="x" style="width:16px; height:16px; color:var(--neutral-0);"></i>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- ===== Message Area ===== -->
|
||||
<section style="flex:1; overflow-y:auto; padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-3); background:var(--neutral-50);">
|
||||
|
||||
<!-- System welcome message -->
|
||||
<div style="display:flex; flex-direction:column; align-items:center; gap:var(--space-3);">
|
||||
<div style="padding:var(--space-2) var(--space-4); border-radius:var(--radius-lg); background:var(--neutral-0); border:1px solid var(--neutral-200); max-width:85%; text-align:center;">
|
||||
<p style="margin:0; font-size:var(--font-size-sm); color:var(--neutral-600); line-height:var(--line-height-normal);">您好！欢迎咨询，请问有什么可以帮您？</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick question tags -->
|
||||
<div style="display:flex; flex-wrap:wrap; gap:var(--space-2); justify-content:center;">
|
||||
<button style="padding:var(--space-1) var(--space-3); border-radius:var(--radius-full); border:1px solid var(--brand-primary); background:var(--neutral-0); color:var(--brand-primary); font-size:var(--font-size-xs); cursor:pointer; white-space:nowrap; line-height:var(--line-height-normal);">查询订单状态</button>
|
||||
<button style="padding:var(--space-1) var(--space-3); border-radius:var(--radius-full); border:1px solid var(--brand-primary); background:var(--neutral-0); color:var(--brand-primary); font-size:var(--font-size-xs); cursor:pointer; white-space:nowrap; line-height:var(--line-height-normal);">退换货政策</button>
|
||||
<button style="padding:var(--space-1) var(--space-3); border-radius:var(--radius-full); border:1px solid var(--brand-primary); background:var(--neutral-0); color:var(--brand-primary); font-size:var(--font-size-xs); cursor:pointer; white-space:nowrap; line-height:var(--line-height-normal);">配送时效说明</button>
|
||||
</div>
|
||||
|
||||
<!-- Customer message (right aligned, blue) -->
|
||||
<div style="display:flex; justify-content:flex-end; max-width:85%; margin-left:auto;">
|
||||
<div style="padding:var(--space-3) var(--space-4); border-radius:var(--radius-lg); background:var(--brand-primary); color:var(--neutral-0); font-size:var(--font-size-sm); line-height:var(--line-height-normal);">
|
||||
<p style="margin:0;">你好，我想查询一下我的订单什么时候能到？</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Agent message (left aligned, gray, with avatar) -->
|
||||
<div style="display:flex; gap:var(--space-2); max-width:85%;">
|
||||
<div style="width:32px; height:32px; border-radius:var(--radius-full); background:var(--neutral-200); flex-shrink:0; display:flex; align-items:center; justify-content:center; margin-top:2px;">
|
||||
<i data-lucide="headset" style="width:16px; height:16px; color:var(--neutral-500);"></i>
|
||||
</div>
|
||||
<div style="padding:var(--space-3) var(--space-4); border-radius:var(--radius-lg); background:var(--neutral-0); border:1px solid var(--neutral-200); font-size:var(--font-size-sm); color:var(--neutral-800); line-height:var(--line-height-normal);">
|
||||
<p style="margin:0;">您好！请提供一下您的订单编号，我帮您查询最新的物流信息。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Customer message with image -->
|
||||
<div style="display:flex; flex-direction:column; align-items:flex-end; gap:var(--space-2); max-width:85%; margin-left:auto;">
|
||||
<div style="padding:var(--space-3) var(--space-4); border-radius:var(--radius-lg); background:var(--brand-primary); color:var(--neutral-0); font-size:var(--font-size-sm); line-height:var(--line-height-normal);">
|
||||
<p style="margin:0;">订单号是 ORD-20250709-8842</p>
|
||||
</div>
|
||||
<div style="padding:var(--space-2); border-radius:var(--radius-lg); background:var(--brand-primary); overflow:hidden; max-width:180px;">
|
||||
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='100' fill='none'%3E%3Crect width='180' height='100' rx='8' fill='%23dbeafe'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-size='13' fill='%232563eb' font-family='sans-serif'%3E订单截图%3C/text%3E%3C/svg%3E" alt="订单截图" style="display:block; width:100%; border-radius:var(--radius-md);">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Agent message with info -->
|
||||
<div style="display:flex; gap:var(--space-2); max-width:85%;">
|
||||
<div style="width:32px; height:32px; border-radius:var(--radius-full); background:var(--neutral-200); flex-shrink:0; display:flex; align-items:center; justify-content:center; margin-top:2px;">
|
||||
<i data-lucide="headset" style="width:16px; height:16px; color:var(--neutral-500);"></i>
|
||||
</div>
|
||||
<div style="padding:var(--space-3) var(--space-4); border-radius:var(--radius-lg); background:var(--neutral-0); border:1px solid var(--neutral-200); font-size:var(--font-size-sm); color:var(--neutral-800); line-height:var(--line-height-normal);">
|
||||
<p style="margin:0;">查到了，您的包裹目前已经到达本地分拣中心，预计明天下午14:00前送达，请保持手机畅通以便签收。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Customer reply -->
|
||||
<div style="display:flex; justify-content:flex-end; max-width:85%; margin-left:auto;">
|
||||
<div style="padding:var(--space-3) var(--space-4); border-radius:var(--radius-lg); background:var(--brand-primary); color:var(--neutral-0); font-size:var(--font-size-sm); line-height:var(--line-height-normal);">
|
||||
<p style="margin:0;">好的，谢谢！如果需要放快递柜可以吗？</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Typing indicator -->
|
||||
<div style="display:flex; gap:var(--space-2); max-width:85%;">
|
||||
<div style="width:32px; height:32px; border-radius:var(--radius-full); background:var(--neutral-200); flex-shrink:0; display:flex; align-items:center; justify-content:center; margin-top:2px;">
|
||||
<i data-lucide="headset" style="width:16px; height:16px; color:var(--neutral-500);"></i>
|
||||
</div>
|
||||
<div style="padding:var(--space-3) var(--space-4); border-radius:var(--radius-lg); background:var(--neutral-0); border:1px solid var(--neutral-200); display:flex; align-items:center; gap:var(--space-1);">
|
||||
<span style="width:6px; height:6px; border-radius:var(--radius-full); background:var(--neutral-400); animation:typingDot 1.4s infinite 0s;"></span>
|
||||
<span style="width:6px; height:6px; border-radius:var(--radius-full); background:var(--neutral-400); animation:typingDot 1.4s infinite 0.2s;"></span>
|
||||
<span style="width:6px; height:6px; border-radius:var(--radius-full); background:var(--neutral-400); animation:typingDot 1.4s infinite 0.4s;"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Typing status text -->
|
||||
<p style="text-align:left; font-size:var(--font-size-xs); color:var(--neutral-400); margin:0; padding-left:42px;">客服正在输入...</p>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- ===== Input Area ===== -->
|
||||
<footer style="flex-shrink:0; position:relative; padding:var(--space-3) var(--space-4); background:var(--neutral-0); border-top:1px solid var(--neutral-200);">
|
||||
<!-- Soul element: subtle brand gradient glow -->
|
||||
<div style="position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, transparent 0%, var(--brand-primary) 50%, transparent 100%); opacity:0.4; pointer-events:none;"></div>
|
||||
|
||||
<!-- Action bar -->
|
||||
<div style="display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-2);">
|
||||
<button style="width:32px; height:32px; border-radius:var(--radius-md); border:none; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center;" aria-label="发送图片">
|
||||
<i data-lucide="image" style="width:18px; height:18px; color:var(--neutral-400);"></i>
|
||||
</button>
|
||||
<button style="width:32px; height:32px; border-radius:var(--radius-md); border:none; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center;" aria-label="发送表情">
|
||||
<i data-lucide="smile" style="width:18px; height:18px; color:var(--neutral-400);"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Input row -->
|
||||
<div style="display:flex; align-items:center; gap:var(--space-2);">
|
||||
<input type="text" placeholder="请输入您的问题..." style="flex:1; min-width:0; height:40px; padding:0 var(--space-3); border-radius:var(--radius-lg); border:1px solid var(--neutral-200); background:var(--neutral-50); font-size:var(--font-size-sm); color:var(--neutral-800); outline:none; font-family:var(--font-family-base);" />
|
||||
<button style="width:40px; height:40px; border-radius:var(--radius-full); border:none; background:var(--brand-primary); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0;" aria-label="发送">
|
||||
<i data-lucide="send" style="width:18px; height:18px; color:var(--neutral-0);"></i>
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@keyframes typingDot {
|
||||
0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
|
||||
30% { opacity: 1; transform: translateY(-3px); }
|
||||
}
|
||||
</style>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,3 @@
|
||||
module github.com/kefu-sys/server
|
||||
|
||||
go 1.26.3
|
||||
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"$schema": "./node_modules/oxlint/configuration_schema.json",
|
||||
"plugins": ["react", "typescript", "oxc"],
|
||||
"rules": {
|
||||
"react/rules-of-hooks": "error",
|
||||
"react/only-export-components": ["warn", { "allowConstantExport": true }]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
# React + TypeScript + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some Oxlint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
|
||||
|
||||
## React Compiler
|
||||
|
||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||
|
||||
## Expanding the Oxlint configuration
|
||||
|
||||
If you are developing a production application, we recommend enabling type-aware lint rules by installing `oxlint-tsgolint` and editing `.oxlintrc.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"$schema": "./node_modules/oxlint/configuration_schema.json",
|
||||
"plugins": ["react", "typescript", "oxc"],
|
||||
"options": {
|
||||
"typeAware": true
|
||||
},
|
||||
"rules": {
|
||||
"react/rules-of-hooks": "error",
|
||||
"react/only-export-components": ["warn", { "allowConstantExport": true }]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
See the [Oxlint rules documentation](https://oxc.rs/docs/guide/usage/linter/rules) for the full list of rules and categories.
|
||||
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>web</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+3899
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"name": "web",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "oxlint",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/charts": "^2.6.7",
|
||||
"@ant-design/icons": "^6.3.2",
|
||||
"@tailwindcss/vite": "^4.3.2",
|
||||
"antd": "^6.5.1",
|
||||
"react": "^19.2.7",
|
||||
"react-dom": "^19.2.7",
|
||||
"tailwindcss": "^4.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^24.13.2",
|
||||
"@types/react": "^19.2.17",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^6.0.3",
|
||||
"oxlint": "^1.71.0",
|
||||
"typescript": "~6.0.2",
|
||||
"vite": "^8.1.1"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
const App = () => {
|
||||
return (
|
||||
<div className="h-screen flex items-center justify-center bg-neutral-50">
|
||||
<div className="text-center">
|
||||
<h1 className="text-2xl font-bold text-neutral-900 mb-2">客服云</h1>
|
||||
<p className="text-neutral-500">在线客服系统</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
@@ -0,0 +1,27 @@
|
||||
@import 'tailwindcss';
|
||||
|
||||
:root {
|
||||
--brand-primary: #2563eb;
|
||||
--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;
|
||||
--success: #16a34a;
|
||||
--warning: #d97706;
|
||||
--error: #dc2626;
|
||||
--info: #0891b2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import { ConfigProvider } from 'antd'
|
||||
import zhCN from 'antd/locale/zh_CN'
|
||||
import App from './App'
|
||||
import './index.css'
|
||||
|
||||
const theme = {
|
||||
token: {
|
||||
colorPrimary: '#2563eb',
|
||||
borderRadius: 6,
|
||||
fontFamily: "'Inter', 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif",
|
||||
},
|
||||
}
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<ConfigProvider theme={theme} locale={zhCN}>
|
||||
<App />
|
||||
</ConfigProvider>
|
||||
</React.StrictMode>,
|
||||
)
|
||||
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"target": "es2023",
|
||||
"lib": ["ES2023", "DOM"],
|
||||
"module": "esnext",
|
||||
"types": ["vite/client"],
|
||||
"allowArbitraryExtensions": true,
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "es2023",
|
||||
"lib": ["ES2023"],
|
||||
"types": ["node"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"module": "nodenext",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
import path from 'path'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react(), tailwindcss()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, 'src'),
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user