733 lines
50 KiB
HTML
733 lines
50 KiB
HTML
<!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> |