初始化项目：前端 React+TS+Tailwind+antd 脚手架，后端 Go，保留原型设计稿
This commit is contained in:
yml2213
@@ -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>
|
||||
Reference in New Issue
Block a user