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