786 lines
48 KiB
HTML
786 lines
48 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN" class="light">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>客服工作台</title>
|
|
<style id="theme-vars">
|
|
/* Online Customer Service System — Brand CSS */
|
|
/* Professional & Efficient Style — Cool Blue-Gray */
|
|
|
|
:root {
|
|
/* === Brand Primary === */
|
|
--brand-primary: #2563eb;
|
|
--brand-primary-hover: #1d4ed8;
|
|
--brand-primary-active: #1e40af;
|
|
--brand-primary-light: #dbeafe;
|
|
--brand-primary-lighter: #eff6ff;
|
|
--brand-primary-dark: #1e3a8a;
|
|
|
|
/* === Neutrals === */
|
|
--neutral-0: #ffffff;
|
|
--neutral-50: #f8fafc;
|
|
--neutral-100: #f1f5f9;
|
|
--neutral-200: #e2e8f0;
|
|
--neutral-300: #cbd5e1;
|
|
--neutral-400: #94a3b8;
|
|
--neutral-500: #64748b;
|
|
--neutral-600: #475569;
|
|
--neutral-700: #334155;
|
|
--neutral-800: #1e293b;
|
|
--neutral-900: #0f172a;
|
|
--neutral-950: #020617;
|
|
|
|
/* === State Colors === */
|
|
--state-success: #16a34a;
|
|
--state-success-bg: #f0fdf4;
|
|
--state-warning: #d97706;
|
|
--state-warning-bg: #fffbeb;
|
|
--state-error: #dc2626;
|
|
--state-error-bg: #fef2f2;
|
|
--state-info: #0891b2;
|
|
--state-info-bg: #ecfeff;
|
|
|
|
/* === Typography === */
|
|
--font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
|
--font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
|
|
|
|
--font-size-xs: 12px;
|
|
--font-size-sm: 13px;
|
|
--font-size-base: 14px;
|
|
--font-size-md: 15px;
|
|
--font-size-lg: 16px;
|
|
--font-size-xl: 18px;
|
|
--font-size-2xl: 20px;
|
|
--font-size-3xl: 24px;
|
|
--font-size-4xl: 30px;
|
|
|
|
--font-weight-normal: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-semibold: 600;
|
|
--font-weight-bold: 700;
|
|
|
|
--line-height-tight: 1.25;
|
|
--line-height-normal: 1.5;
|
|
--line-height-relaxed: 1.625;
|
|
|
|
/* === Spacing === */
|
|
--space-0: 0px;
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 20px;
|
|
--space-6: 24px;
|
|
--space-8: 32px;
|
|
--space-10: 40px;
|
|
--space-12: 48px;
|
|
|
|
/* === Radius === */
|
|
--radius-sm: 4px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
--radius-full: 9999px;
|
|
|
|
/* === Shadows (static: alpha <= 0.05; floating layers only may exceed) === */
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03);
|
|
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.04);
|
|
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.05);
|
|
--shadow-floating: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
|
|
/* === Transitions === */
|
|
--transition-fast: 150ms ease;
|
|
--transition-normal: 200ms ease;
|
|
--transition-slow: 300ms ease;
|
|
|
|
/* === Layout === */
|
|
--sidebar-width: 240px;
|
|
--sidebar-collapsed-width: 64px;
|
|
--header-height: 56px;
|
|
--panel-width: 320px;
|
|
--chat-panel-min: 300px;
|
|
--chat-panel-max: 600px;
|
|
}
|
|
|
|
/* Dark mode */
|
|
.dark {
|
|
--brand-primary: #3b82f6;
|
|
--brand-primary-hover: #60a5fa;
|
|
--brand-primary-active: #2563eb;
|
|
--brand-primary-light: #1e3a5f;
|
|
--brand-primary-lighter: #172554;
|
|
--brand-primary-dark: #93c5fd;
|
|
|
|
--neutral-0: #0f172a;
|
|
--neutral-50: #1e293b;
|
|
--neutral-100: #334155;
|
|
--neutral-200: #475569;
|
|
--neutral-300: #64748b;
|
|
--neutral-400: #94a3b8;
|
|
--neutral-500: #cbd5e1;
|
|
--neutral-600: #e2e8f0;
|
|
--neutral-700: #f1f5f9;
|
|
--neutral-800: #f8fafc;
|
|
--neutral-900: #ffffff;
|
|
--neutral-950: #ffffff;
|
|
|
|
--state-success-bg: #052e16;
|
|
--state-warning-bg: #451a03;
|
|
--state-error-bg: #450a0a;
|
|
--state-info-bg: #083344;
|
|
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.35);
|
|
--shadow-floating: 0 8px 24px rgba(0, 0, 0, 0.5);
|
|
}
|
|
</style>
|
|
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.3.1/dist/index.global.js"></script>
|
|
<script src="https://unpkg.com/lucide@1.8.0/dist/umd/lucide.min.js"></script>
|
|
<style type="text/tailwindcss">
|
|
@theme inline {
|
|
--color-primary: var(--brand-primary);
|
|
--color-primary-hover: var(--brand-primary-hover);
|
|
--color-primary-active: var(--brand-primary-active);
|
|
--color-primary-light: var(--brand-primary-light);
|
|
--color-primary-lighter: var(--brand-primary-lighter);
|
|
--color-primary-dark: var(--brand-primary-dark);
|
|
--color-background: var(--neutral-50);
|
|
--color-foreground: var(--neutral-900);
|
|
--color-card: var(--neutral-0);
|
|
--color-card-foreground: var(--neutral-900);
|
|
--color-muted: var(--neutral-100);
|
|
--color-muted-foreground: var(--neutral-500);
|
|
--color-border: var(--neutral-200);
|
|
--color-accent: var(--brand-primary-light);
|
|
--color-accent-foreground: var(--brand-primary-dark);
|
|
--color-destructive: var(--state-error);
|
|
--color-destructive-foreground: var(--state-error-bg);
|
|
--color-ring: var(--brand-primary);
|
|
--color-sidebar: var(--neutral-0);
|
|
--color-sidebar-foreground: var(--neutral-700);
|
|
--color-sidebar-primary: var(--brand-primary);
|
|
--color-sidebar-primary-foreground: var(--neutral-0);
|
|
--color-sidebar-accent: var(--brand-primary-lighter);
|
|
--color-sidebar-accent-foreground: var(--brand-primary-dark);
|
|
--color-success: var(--state-success);
|
|
--color-success-bg: var(--state-success-bg);
|
|
--color-warning: var(--state-warning);
|
|
--color-warning-bg: var(--state-warning-bg);
|
|
--color-error: var(--state-error);
|
|
--color-error-bg: var(--state-error-bg);
|
|
--color-info: var(--state-info);
|
|
--color-info-bg: var(--state-info-bg);
|
|
--color-neutral-0: var(--neutral-0);
|
|
--color-neutral-50: var(--neutral-50);
|
|
--color-neutral-100: var(--neutral-100);
|
|
--color-neutral-200: var(--neutral-200);
|
|
--color-neutral-300: var(--neutral-300);
|
|
--color-neutral-400: var(--neutral-400);
|
|
--color-neutral-500: var(--neutral-500);
|
|
--color-neutral-600: var(--neutral-600);
|
|
--color-neutral-700: var(--neutral-700);
|
|
--color-neutral-800: var(--neutral-800);
|
|
--color-neutral-900: var(--neutral-900);
|
|
--radius-sm: var(--radius-sm);
|
|
--radius-md: var(--radius-md);
|
|
--radius-lg: var(--radius-lg);
|
|
}
|
|
@layer base {
|
|
body { background: var(--neutral-50); color: var(--neutral-900); }
|
|
td, th { @apply break-words; word-break: break-all; word-break: auto-phrase; }
|
|
th { @apply whitespace-nowrap; }
|
|
}
|
|
</style>
|
|
<style>
|
|
.no-scrollbar::-webkit-scrollbar { display: none; }
|
|
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
|
[data-icon] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
-webkit-mask-size: contain;
|
|
mask-size: contain;
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-position: center;
|
|
mask-position: center;
|
|
background-color: currentColor;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen antialiased" style="font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: var(--line-height-normal); color: var(--neutral-900); background: var(--neutral-50);">
|
|
<main class="flex h-screen overflow-hidden">
|
|
|
|
<!-- ====== Left Sidebar (240px) ====== -->
|
|
<aside class="shrink-0 flex flex-col h-full" style="width: var(--sidebar-width); background: var(--neutral-0); border-right: 1px solid var(--neutral-200);">
|
|
|
|
<!-- Logo -->
|
|
<div class="flex items-center gap-2.5 px-4 shrink-0" style="height: var(--header-height); border-bottom: 1px solid var(--neutral-200);">
|
|
<div class="flex items-center justify-center rounded-lg shrink-0" style="width: 32px; height: 32px; background: var(--brand-primary);">
|
|
<i data-lucide="headphones" style="width: 18px; height: 18px; color: var(--neutral-0);"></i>
|
|
</div>
|
|
<span class="font-semibold truncate" style="font-size: var(--font-size-lg); color: var(--neutral-900);">在线客服</span>
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="flex-1 overflow-y-auto py-3 px-2">
|
|
<ul class="flex flex-col gap-0.5">
|
|
|
|
<!-- Active: 工作台 -->
|
|
<li>
|
|
<a href="#" data-dom-id="nav-dashboard" class="flex items-center gap-2.5 px-3 py-2 rounded-lg font-medium truncate" style="background: var(--brand-primary-light); color: var(--brand-primary);">
|
|
<i data-lucide="layout-dashboard" style="width: 18px; height: 18px; flex-shrink: 0;"></i>
|
|
<span class="truncate" style="font-size: var(--font-size-base);">工作台</span>
|
|
</a>
|
|
</li>
|
|
|
|
<!-- 客户管理 -->
|
|
<li>
|
|
<a href="#" data-dom-id="nav-customers" class="flex items-center gap-2.5 px-3 py-2 rounded-lg truncate" style="color: var(--neutral-600);">
|
|
<i data-lucide="users" style="width: 18px; height: 18px; flex-shrink: 0;"></i>
|
|
<span class="truncate" style="font-size: var(--font-size-base);">客户管理</span>
|
|
</a>
|
|
</li>
|
|
|
|
<!-- 对话记录 -->
|
|
<li>
|
|
<a href="#" data-dom-id="nav-history" class="flex items-center gap-2.5 px-3 py-2 rounded-lg truncate" style="color: var(--neutral-600);">
|
|
<i data-lucide="message-square" style="width: 18px; height: 18px; flex-shrink: 0;"></i>
|
|
<span class="truncate" style="font-size: var(--font-size-base);">对话记录</span>
|
|
</a>
|
|
</li>
|
|
|
|
<!-- 知识库 -->
|
|
<li>
|
|
<a href="#" data-dom-id="nav-knowledge" class="flex items-center gap-2.5 px-3 py-2 rounded-lg truncate" style="color: var(--neutral-600);">
|
|
<i data-lucide="book-open" style="width: 18px; height: 18px; flex-shrink: 0;"></i>
|
|
<span class="truncate" style="font-size: var(--font-size-base);">知识库</span>
|
|
</a>
|
|
</li>
|
|
|
|
<!-- 数据统计 -->
|
|
<li>
|
|
<a href="#" data-dom-id="nav-statistics" class="flex items-center gap-2.5 px-3 py-2 rounded-lg truncate" style="color: var(--neutral-600);">
|
|
<i data-lucide="bar-chart-3" style="width: 18px; height: 18px; flex-shrink: 0;"></i>
|
|
<span class="truncate" style="font-size: var(--font-size-base);">数据统计</span>
|
|
</a>
|
|
</li>
|
|
|
|
<!-- 系统设置 -->
|
|
<li>
|
|
<a href="#" data-dom-id="nav-settings" class="flex items-center gap-2.5 px-3 py-2 rounded-lg truncate" style="color: var(--neutral-600);">
|
|
<i data-lucide="settings" style="width: 18px; height: 18px; flex-shrink: 0;"></i>
|
|
<span class="truncate" style="font-size: var(--font-size-base);">系统设置</span>
|
|
</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- Sidebar Footer: User Info -->
|
|
<div class="flex items-center gap-2.5 px-4 shrink-0" style="height: 52px; border-top: 1px solid var(--neutral-200);">
|
|
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 32px; height: 32px; background: var(--brand-primary-light); color: var(--brand-primary); font-size: var(--font-size-sm); font-weight: 600;">
|
|
李
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="truncate font-medium" style="font-size: var(--font-size-sm); color: var(--neutral-800);">李晓明</div>
|
|
<div class="truncate" style="font-size: var(--font-size-xs); color: var(--neutral-400);">在线</div>
|
|
</div>
|
|
</div>
|
|
|
|
</aside>
|
|
|
|
<!-- ====== Middle Area (flex-1) ====== -->
|
|
<div class="flex flex-1 min-w-0 h-full">
|
|
|
|
<!-- Conversation List Panel -->
|
|
<section class="shrink-0 flex flex-col h-full" style="width: 320px; border-right: 1px solid var(--neutral-200); background: var(--neutral-0);">
|
|
|
|
<!-- Conversation List Header -->
|
|
<div class="shrink-0 px-3 py-3" style="border-bottom: 1px solid var(--neutral-200);">
|
|
<!-- Search + Filter Row -->
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<div class="flex items-center flex-1 min-w-0 rounded-lg px-2.5" style="height: 34px; background: var(--neutral-100); border: 1px solid var(--neutral-200);">
|
|
<i data-lucide="search" style="width: 15px; height: 15px; flex-shrink: 0; color: var(--neutral-400); margin-right: 6px;"></i>
|
|
<input type="text" placeholder="搜索对话..." class="bg-transparent border-none outline-none flex-1 min-w-0" style="font-size: var(--font-size-sm); color: var(--neutral-900);">
|
|
</div>
|
|
<button class="flex items-center justify-center rounded-lg shrink-0" style="width: 34px; height: 34px; background: var(--neutral-100); border: 1px solid var(--neutral-200); color: var(--neutral-500);">
|
|
<i data-lucide="sliders-horizontal" style="width: 15px; height: 15px;"></i>
|
|
</button>
|
|
</div>
|
|
<!-- Session Count Tag -->
|
|
<div class="flex items-center justify-between">
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded-md whitespace-nowrap" style="font-size: var(--font-size-xs); font-weight: 500; background: var(--brand-primary-light); color: var(--brand-primary);">当前会话 6 个</span>
|
|
<button data-dom-id="preview-visitor-chat" class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--brand-primary); cursor: pointer;">
|
|
<i data-lucide="eye" style="width: 12px; height: 12px;"></i>
|
|
<span>预览访客窗口</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Conversation List -->
|
|
<div class="flex-1 overflow-y-auto">
|
|
|
|
<!-- Conversation 1 — Active (Selected), Priority: Urgent (Red) -->
|
|
<div class="flex items-stretch relative cursor-pointer" style="background: var(--brand-primary-lighter);">
|
|
<!-- Priority Bar -->
|
|
<div class="shrink-0 rounded-l-none" style="width: 3px; background: var(--state-error);"></div>
|
|
<div class="flex-1 min-w-0 px-3 py-3">
|
|
<div class="flex items-center justify-between mb-1">
|
|
<div class="flex items-center gap-2 min-w-0">
|
|
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 36px; height: 36px; background: var(--state-error-bg); color: var(--state-error); font-size: var(--font-size-sm); font-weight: 600;">王</div>
|
|
<span class="truncate font-medium" style="font-size: var(--font-size-sm); color: var(--neutral-800);">王建国</span>
|
|
</div>
|
|
<div class="flex items-center gap-1.5 shrink-0 ml-2">
|
|
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-400);">2分钟前</span>
|
|
<span class="flex items-center justify-center rounded-full whitespace-nowrap" style="min-width: 18px; height: 18px; font-size: 11px; font-weight: 600; background: var(--state-error); color: var(--neutral-0); padding: 0 5px;">3</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<p class="truncate flex-1 min-w-0 mr-2" style="font-size: var(--font-size-xs); color: var(--neutral-500);">请尽快帮我处理退款问题，已经等了很久了！</p>
|
|
<span class="flex items-center gap-1 shrink-0" style="font-size: var(--font-size-xs);">
|
|
<span class="inline-block rounded-full" style="width: 7px; height: 7px; background: var(--state-error);"></span>
|
|
<span style="color: var(--state-error);">紧急</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Conversation 2 — Priority: Waiting (Yellow) -->
|
|
<div class="flex items-stretch relative cursor-pointer" style="border-bottom: 1px solid var(--neutral-100);">
|
|
<div class="shrink-0" style="width: 3px; background: var(--state-warning);"></div>
|
|
<div class="flex-1 min-w-0 px-3 py-3">
|
|
<div class="flex items-center justify-between mb-1">
|
|
<div class="flex items-center gap-2 min-w-0">
|
|
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 36px; height: 36px; background: var(--state-warning-bg); color: var(--state-warning); font-size: var(--font-size-sm); font-weight: 600;">赵</div>
|
|
<span class="truncate font-medium" style="font-size: var(--font-size-sm); color: var(--neutral-800);">赵芳</span>
|
|
</div>
|
|
<div class="flex items-center gap-1.5 shrink-0 ml-2">
|
|
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-400);">8分钟前</span>
|
|
<span class="flex items-center justify-center rounded-full whitespace-nowrap" style="min-width: 18px; height: 18px; font-size: 11px; font-weight: 600; background: var(--brand-primary); color: var(--neutral-0); padding: 0 5px;">1</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<p class="truncate flex-1 min-w-0 mr-2" style="font-size: var(--font-size-xs); color: var(--neutral-500);">想问一下订单什么时候能发货？</p>
|
|
<span class="flex items-center gap-1 shrink-0" style="font-size: var(--font-size-xs);">
|
|
<span class="inline-block rounded-full" style="width: 7px; height: 7px; background: var(--state-warning);"></span>
|
|
<span style="color: var(--state-warning);">等待中</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Conversation 3 — Priority: In Progress (Blue) -->
|
|
<div class="flex items-stretch relative cursor-pointer" style="border-bottom: 1px solid var(--neutral-100);">
|
|
<div class="shrink-0" style="width: 3px; background: var(--brand-primary);"></div>
|
|
<div class="flex-1 min-w-0 px-3 py-3">
|
|
<div class="flex items-center justify-between mb-1">
|
|
<div class="flex items-center gap-2 min-w-0">
|
|
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 36px; height: 36px; background: var(--brand-primary-light); color: var(--brand-primary); font-size: var(--font-size-sm); font-weight: 600;">刘</div>
|
|
<span class="truncate font-medium" style="font-size: var(--font-size-sm); color: var(--neutral-800);">刘美华</span>
|
|
</div>
|
|
<div class="flex items-center gap-1.5 shrink-0 ml-2">
|
|
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-400);">15分钟前</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<p class="truncate flex-1 min-w-0 mr-2" style="font-size: var(--font-size-xs); color: var(--neutral-500);">好的，我已经把资料发给您了，请查收</p>
|
|
<span class="flex items-center gap-1 shrink-0" style="font-size: var(--font-size-xs);">
|
|
<span class="inline-block rounded-full" style="width: 7px; height: 7px; background: var(--brand-primary);"></span>
|
|
<span style="color: var(--brand-primary);">进行中</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Conversation 4 — Priority: In Progress (Blue) -->
|
|
<div class="flex items-stretch relative cursor-pointer" style="border-bottom: 1px solid var(--neutral-100);">
|
|
<div class="shrink-0" style="width: 3px; background: var(--brand-primary);"></div>
|
|
<div class="flex-1 min-w-0 px-3 py-3">
|
|
<div class="flex items-center justify-between mb-1">
|
|
<div class="flex items-center gap-2 min-w-0">
|
|
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 36px; height: 36px; background: var(--state-info-bg); color: var(--state-info); font-size: var(--font-size-sm); font-weight: 600;">张</div>
|
|
<span class="truncate font-medium" style="font-size: var(--font-size-sm); color: var(--neutral-800);">张伟</span>
|
|
</div>
|
|
<div class="flex items-center gap-1.5 shrink-0 ml-2">
|
|
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-400);">28分钟前</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<p class="truncate flex-1 min-w-0 mr-2" style="font-size: var(--font-size-xs); color: var(--neutral-500);">请问这个产品支持哪些支付方式？</p>
|
|
<span class="flex items-center gap-1 shrink-0" style="font-size: var(--font-size-xs);">
|
|
<span class="inline-block rounded-full" style="width: 7px; height: 7px; background: var(--brand-primary);"></span>
|
|
<span style="color: var(--brand-primary);">进行中</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Conversation 5 — Priority: Waiting (Yellow) -->
|
|
<div class="flex items-stretch relative cursor-pointer" style="border-bottom: 1px solid var(--neutral-100);">
|
|
<div class="shrink-0" style="width: 3px; background: var(--state-warning);"></div>
|
|
<div class="flex-1 min-w-0 px-3 py-3">
|
|
<div class="flex items-center justify-between mb-1">
|
|
<div class="flex items-center gap-2 min-w-0">
|
|
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 36px; height: 36px; background: var(--state-success-bg); color: var(--state-success); font-size: var(--font-size-sm); font-weight: 600;">陈</div>
|
|
<span class="truncate font-medium" style="font-size: var(--font-size-sm); color: var(--neutral-800);">陈思思</span>
|
|
</div>
|
|
<div class="flex items-center gap-1.5 shrink-0 ml-2">
|
|
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-400);">1小时前</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<p class="truncate flex-1 min-w-0 mr-2" style="font-size: var(--font-size-xs); color: var(--neutral-500);">可以帮我修改一下收货地址吗？</p>
|
|
<span class="flex items-center gap-1 shrink-0" style="font-size: var(--font-size-xs);">
|
|
<span class="inline-block rounded-full" style="width: 7px; height: 7px; background: var(--state-warning);"></span>
|
|
<span style="color: var(--state-warning);">等待中</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Conversation 6 — Priority: In Progress (Blue) -->
|
|
<div class="flex items-stretch relative cursor-pointer">
|
|
<div class="shrink-0" style="width: 3px; background: var(--brand-primary);"></div>
|
|
<div class="flex-1 min-w-0 px-3 py-3">
|
|
<div class="flex items-center justify-between mb-1">
|
|
<div class="flex items-center gap-2 min-w-0">
|
|
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 36px; height: 36px; background: var(--brand-primary-light); color: var(--brand-primary); font-size: var(--font-size-sm); font-weight: 600;">孙</div>
|
|
<span class="truncate font-medium" style="font-size: var(--font-size-sm); color: var(--neutral-800);">孙文博</span>
|
|
</div>
|
|
<div class="flex items-center gap-1.5 shrink-0 ml-2">
|
|
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-400);">2小时前</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<p class="truncate flex-1 min-w-0 mr-2" style="font-size: var(--font-size-xs); color: var(--neutral-500);">你们有没有APP端的客服？网页不太方便</p>
|
|
<span class="flex items-center gap-1 shrink-0" style="font-size: var(--font-size-xs);">
|
|
<span class="inline-block rounded-full" style="width: 7px; height: 7px; background: var(--brand-primary);"></span>
|
|
<span style="color: var(--brand-primary);">进行中</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ====== Main Chat Area ====== -->
|
|
<section class="flex-1 flex flex-col min-w-0 h-full" style="background: var(--neutral-50);">
|
|
|
|
<!-- Chat Header -->
|
|
<div class="shrink-0 flex items-center justify-between px-5" style="height: var(--header-height); border-bottom: 1px solid var(--neutral-200); background: var(--neutral-0);">
|
|
<div class="flex items-center gap-3 min-w-0">
|
|
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 38px; height: 38px; background: var(--state-error-bg); color: var(--state-error); font-size: var(--font-size-base); font-weight: 600;">王</div>
|
|
<div class="min-w-0">
|
|
<div class="flex items-center gap-2">
|
|
<span class="truncate font-semibold" style="font-size: var(--font-size-base); color: var(--neutral-900);">王建国</span>
|
|
<span class="inline-flex items-center px-1.5 py-0.5 rounded whitespace-nowrap" style="font-size: var(--font-size-xs); background: var(--state-info-bg); color: var(--state-info);">网页</span>
|
|
<span class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded whitespace-nowrap" style="font-size: var(--font-size-xs); background: var(--state-success-bg); color: var(--state-success);">
|
|
<span class="inline-block rounded-full" style="width: 6px; height: 6px; background: var(--state-success);"></span>
|
|
在线
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 mt-0.5">
|
|
<span class="truncate" style="font-size: var(--font-size-xs); color: var(--neutral-400);">IP: 192.168.1.105</span>
|
|
<span style="font-size: var(--font-size-xs); color: var(--neutral-300);">|</span>
|
|
<span class="truncate" style="font-size: var(--font-size-xs); color: var(--neutral-400);">北京</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-1.5 shrink-0 ml-4">
|
|
<button class="flex items-center justify-center rounded-lg" style="width: 34px; height: 34px; color: var(--neutral-500);" title="转接">
|
|
<i data-lucide="forward" style="width: 16px; height: 16px;"></i>
|
|
</button>
|
|
<button class="flex items-center justify-center rounded-lg" style="width: 34px; height: 34px; color: var(--neutral-500);" title="标记">
|
|
<i data-lucide="bookmark" style="width: 16px; height: 16px;"></i>
|
|
</button>
|
|
<button class="flex items-center justify-center rounded-lg" style="width: 34px; height: 34px; color: var(--neutral-500);" title="更多">
|
|
<i data-lucide="more-vertical" style="width: 16px; height: 16px;"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Messages Area -->
|
|
<div class="flex-1 overflow-y-auto px-5 py-4" style="min-height: 0;">
|
|
|
|
<!-- System Message -->
|
|
<div class="flex justify-center mb-4">
|
|
<span class="inline-flex items-center px-3 py-1 rounded-lg whitespace-nowrap" style="font-size: var(--font-size-xs); background: var(--neutral-100); color: var(--neutral-400);">会话开始 — 今天 14:23</span>
|
|
</div>
|
|
|
|
<!-- Customer Message (Left) -->
|
|
<div class="flex items-start gap-2.5 mb-4">
|
|
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 36px; height: 36px; background: var(--state-error-bg); color: var(--state-error); font-size: var(--font-size-sm); font-weight: 600;">王</div>
|
|
<div class="min-w-0 max-w-[65%]">
|
|
<div class="rounded-xl rounded-tl-sm px-3.5 py-2.5" style="background: var(--neutral-0); border: 1px solid var(--neutral-200); box-shadow: var(--shadow-sm);">
|
|
<p style="font-size: var(--font-size-base); color: var(--neutral-800); line-height: var(--line-height-normal); word-break: break-word;">你好，我在你们平台上买了一个商品，订单号是 #20260709-8832，但是收到货之后发现有质量问题，想要申请退款。</p>
|
|
</div>
|
|
<div class="mt-1" style="font-size: var(--font-size-xs); color: var(--neutral-400);">14:23:15</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Agent Message (Right) -->
|
|
<div class="flex items-start gap-2.5 mb-4 flex-row-reverse">
|
|
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 36px; height: 36px; background: var(--brand-primary); color: var(--neutral-0); font-size: var(--font-size-sm); font-weight: 600;">李</div>
|
|
<div class="min-w-0 max-w-[65%]">
|
|
<div class="rounded-xl rounded-tr-sm px-3.5 py-2.5" style="background: var(--brand-primary); box-shadow: var(--shadow-sm);">
|
|
<p style="font-size: var(--font-size-base); color: var(--neutral-0); line-height: var(--line-height-normal); word-break: break-word;">您好王先生，非常抱歉给您带来了不好的购物体验。我已经查看了您的订单，请问方便把质量问题拍照发给我看一下吗？这样我可以帮您加快退款处理。</p>
|
|
</div>
|
|
<div class="mt-1 text-right" style="font-size: var(--font-size-xs); color: var(--neutral-400);">14:24:02</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Customer: Image Message -->
|
|
<div class="flex items-start gap-2.5 mb-4">
|
|
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 36px; height: 36px; background: var(--state-error-bg); color: var(--state-error); font-size: var(--font-size-sm); font-weight: 600;">王</div>
|
|
<div class="min-w-0 max-w-[65%]">
|
|
<div class="rounded-xl rounded-tl-sm p-1.5" style="background: var(--neutral-0); border: 1px solid var(--neutral-200); box-shadow: var(--shadow-sm);">
|
|
<div class="rounded-lg overflow-hidden" style="width: 200px; height: 150px; background: var(--neutral-100); display: flex; align-items: center; justify-content: center;">
|
|
<div class="flex flex-col items-center gap-1" style="color: var(--neutral-400);">
|
|
<i data-lucide="image" style="width: 24px; height: 24px;"></i>
|
|
<span style="font-size: var(--font-size-xs);">商品缺陷照片</span>
|
|
</div>
|
|
</div>
|
|
<p class="mt-1.5 px-2 pb-1" style="font-size: var(--font-size-sm); color: var(--neutral-800); word-break: break-word;">这就是收到货时的样子，表面有明显划痕。</p>
|
|
</div>
|
|
<div class="mt-1" style="font-size: var(--font-size-xs); color: var(--neutral-400);">14:25:38</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Agent Message -->
|
|
<div class="flex items-start gap-2.5 mb-4 flex-row-reverse">
|
|
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 36px; height: 36px; background: var(--brand-primary); color: var(--neutral-0); font-size: var(--font-size-sm); font-weight: 600;">李</div>
|
|
<div class="min-w-0 max-w-[65%]">
|
|
<div class="rounded-xl rounded-tr-sm px-3.5 py-2.5" style="background: var(--brand-primary); box-shadow: var(--shadow-sm);">
|
|
<p style="font-size: var(--font-size-base); color: var(--neutral-0); line-height: var(--line-height-normal); word-break: break-word;">非常感谢您提供的照片，我已经确认了质量问题。现在我为您发起退款申请，预计3-5个工作日退款会到账，请您留意。</p>
|
|
</div>
|
|
<div class="mt-1 text-right" style="font-size: var(--font-size-xs); color: var(--neutral-400);">14:27:10</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Customer Message -->
|
|
<div class="flex items-start gap-2.5 mb-4">
|
|
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 36px; height: 36px; background: var(--state-error-bg); color: var(--state-error); font-size: var(--font-size-sm); font-weight: 600;">王</div>
|
|
<div class="min-w-0 max-w-[65%]">
|
|
<div class="rounded-xl rounded-tl-sm px-3.5 py-2.5" style="background: var(--neutral-0); border: 1px solid var(--neutral-200); box-shadow: var(--shadow-sm);">
|
|
<p style="font-size: var(--font-size-base); color: var(--neutral-800); line-height: var(--line-height-normal); word-break: break-word;">好的，那我需要寄回商品吗？运费谁承担？</p>
|
|
</div>
|
|
<div class="mt-1" style="font-size: var(--font-size-xs); color: var(--neutral-400);">14:28:05</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Agent Message -->
|
|
<div class="flex items-start gap-2.5 mb-4 flex-row-reverse">
|
|
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 36px; height: 36px; background: var(--brand-primary); color: var(--neutral-0); font-size: var(--font-size-sm); font-weight: 600;">李</div>
|
|
<div class="min-w-0 max-w-[65%]">
|
|
<div class="rounded-xl rounded-tr-sm px-3.5 py-2.5" style="background: var(--brand-primary); box-shadow: var(--shadow-sm);">
|
|
<p style="font-size: var(--font-size-base); color: var(--neutral-0); line-height: var(--line-height-normal); word-break: break-word;">由于是质量问题，运费由我们承担。稍后我会发给您退货地址和 prepaid 运费单号，您直接寄回即可，无需支付任何费用。</p>
|
|
</div>
|
|
<div class="mt-1 text-right" style="font-size: var(--font-size-xs); color: var(--neutral-400);">14:29:22</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Customer Message (Urgent) -->
|
|
<div class="flex items-start gap-2.5 mb-4">
|
|
<div class="flex items-center justify-center rounded-full shrink-0" style="width: 36px; height: 36px; background: var(--state-error-bg); color: var(--state-error); font-size: var(--font-size-sm); font-weight: 600;">王</div>
|
|
<div class="min-w-0 max-w-[65%]">
|
|
<div class="rounded-xl rounded-tl-sm px-3.5 py-2.5" style="background: var(--neutral-0); border: 1px solid var(--neutral-200); box-shadow: var(--shadow-sm);">
|
|
<p style="font-size: var(--font-size-base); color: var(--neutral-800); line-height: var(--line-height-normal); word-break: break-word;">请尽快帮我处理退款问题，已经等了很久了！另外运费单号麻烦今天之内发给我。</p>
|
|
</div>
|
|
<div class="mt-1" style="font-size: var(--font-size-xs); color: var(--neutral-400);">14:31:47</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Input Area -->
|
|
<div class="shrink-0" style="background: var(--neutral-0); border-top: 1px solid var(--neutral-200);">
|
|
|
|
<!-- Toolbar -->
|
|
<div class="flex items-center gap-1 px-4 pt-2.5 pb-1">
|
|
<button class="flex items-center justify-center rounded-md" style="width: 32px; height: 32px; color: var(--neutral-500);" title="表情">
|
|
<i data-lucide="smile" style="width: 17px; height: 17px;"></i>
|
|
</button>
|
|
<button class="flex items-center justify-center rounded-md" style="width: 32px; height: 32px; color: var(--neutral-500);" title="图片">
|
|
<i data-lucide="image" style="width: 17px; height: 17px;"></i>
|
|
</button>
|
|
<button class="flex items-center justify-center rounded-md" style="width: 32px; height: 32px; color: var(--neutral-500);" title="文件">
|
|
<i data-lucide="paperclip" style="width: 17px; height: 17px;"></i>
|
|
</button>
|
|
<div style="width: 1px; height: 20px; background: var(--neutral-200); margin: 0 4px;"></div>
|
|
<button class="flex items-center justify-center rounded-md" style="width: 32px; height: 32px; color: var(--neutral-500);" title="快捷回复">
|
|
<i data-lucide="zap" style="width: 17px; height: 17px;"></i>
|
|
</button>
|
|
<button class="flex items-center justify-center rounded-md" style="width: 32px; height: 32px; color: var(--neutral-500);" title="常用语">
|
|
<i data-lucide="message-circle" style="width: 17px; height: 17px;"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Text Input + Send -->
|
|
<div class="flex items-end gap-2.5 px-4 pb-3 pt-1">
|
|
<div class="flex-1 min-w-0 rounded-lg px-3.5 py-2.5" style="min-height: 88px; max-height: 160px; background: var(--neutral-50); border: 1px solid var(--neutral-200); outline: none;">
|
|
<div style="color: var(--neutral-400); font-size: var(--font-size-sm);">输入回复内容...</div>
|
|
</div>
|
|
<div class="flex flex-col gap-2 shrink-0">
|
|
<button class="flex items-center justify-center rounded-lg" style="width: 40px; height: 40px; background: var(--neutral-100); border: 1px solid var(--neutral-200); color: var(--neutral-500);" title="语音">
|
|
<i data-lucide="mic" style="width: 17px; height: 17px;"></i>
|
|
</button>
|
|
<button class="flex items-center justify-center rounded-lg" style="width: 40px; height: 40px; background: var(--brand-primary); color: var(--neutral-0);" title="发送">
|
|
<i data-lucide="send" style="width: 17px; height: 17px;"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<!-- ====== Right Panel: Customer Info (320px) ====== -->
|
|
<aside class="shrink-0 flex flex-col h-full overflow-y-auto" style="width: var(--panel-width); border-left: 1px solid var(--neutral-200); background: var(--neutral-0);">
|
|
|
|
<!-- Customer Info Header -->
|
|
<div class="shrink-0 flex items-center justify-between px-4" style="height: var(--header-height); border-bottom: 1px solid var(--neutral-200);">
|
|
<span class="font-semibold truncate" style="font-size: var(--font-size-base); color: var(--neutral-800);">客户信息</span>
|
|
<button class="flex items-center justify-center rounded-md" style="width: 28px; height: 28px; color: var(--neutral-400);">
|
|
<i data-lucide="x" style="width: 16px; height: 16px;"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex-1 overflow-y-auto px-4 py-4">
|
|
|
|
<!-- Avatar + Name -->
|
|
<div class="flex flex-col items-center mb-5">
|
|
<div class="flex items-center justify-center rounded-full mb-2" style="width: 56px; height: 56px; background: var(--state-error-bg); color: var(--state-error); font-size: 22px; font-weight: 600;">王</div>
|
|
<div class="font-semibold" style="font-size: var(--font-size-lg); color: var(--neutral-900);">王建国</div>
|
|
<div class="flex items-center gap-1 mt-1" style="font-size: var(--font-size-xs); color: var(--neutral-400);">
|
|
<span class="inline-block rounded-full" style="width: 6px; height: 6px; background: var(--state-success);"></span>
|
|
在线
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Basic Info Section -->
|
|
<div class="mb-5">
|
|
<div class="flex items-center gap-1.5 mb-2.5" style="font-size: var(--font-size-xs); font-weight: 600; color: var(--neutral-500); text-transform: uppercase; letter-spacing: 0.05em;">
|
|
<i data-lucide="user" style="width: 13px; height: 13px;"></i>
|
|
基本信息
|
|
</div>
|
|
<div class="flex flex-col gap-2" style="font-size: var(--font-size-sm);">
|
|
<div class="flex items-start gap-2">
|
|
<span class="shrink-0 whitespace-nowrap" style="color: var(--neutral-400); min-width: 48px;">手机</span>
|
|
<span class="truncate" style="color: var(--neutral-800);">138****6789</span>
|
|
</div>
|
|
<div class="flex items-start gap-2">
|
|
<span class="shrink-0 whitespace-nowrap" style="color: var(--neutral-400); min-width: 48px;">邮箱</span>
|
|
<span class="truncate" style="color: var(--neutral-800);">wang.jianguo@email.com</span>
|
|
</div>
|
|
<div class="flex items-start gap-2">
|
|
<span class="shrink-0 whitespace-nowrap" style="color: var(--neutral-400); min-width: 48px;">地区</span>
|
|
<span class="truncate" style="color: var(--neutral-800);">北京市朝阳区</span>
|
|
</div>
|
|
<div class="flex items-start gap-2">
|
|
<span class="shrink-0 whitespace-nowrap" style="color: var(--neutral-400); min-width: 48px;">注册</span>
|
|
<span class="truncate" style="color: var(--neutral-800);">2025-03-12</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tags Section -->
|
|
<div class="mb-5">
|
|
<div class="flex items-center gap-1.5 mb-2.5" style="font-size: var(--font-size-xs); font-weight: 600; color: var(--neutral-500); text-transform: uppercase; letter-spacing: 0.05em;">
|
|
<i data-lucide="tag" style="width: 13px; height: 13px;"></i>
|
|
客户标签
|
|
</div>
|
|
<div class="flex flex-wrap gap-1.5">
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded-md whitespace-nowrap" style="font-size: var(--font-size-xs); font-weight: 500; background: var(--state-warning-bg); color: var(--state-warning);">VIP</span>
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded-md whitespace-nowrap" style="font-size: var(--font-size-xs); font-weight: 500; background: var(--brand-primary-light); color: var(--brand-primary);">新客户</span>
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded-md whitespace-nowrap" style="font-size: var(--font-size-xs); font-weight: 500; background: var(--state-success-bg); color: var(--state-success);">活跃</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Source Info Section -->
|
|
<div class="mb-5">
|
|
<div class="flex items-center gap-1.5 mb-2.5" style="font-size: var(--font-size-xs); font-weight: 600; color: var(--neutral-500); text-transform: uppercase; letter-spacing: 0.05em;">
|
|
<i data-lucide="globe" style="width: 13px; height: 13px;"></i>
|
|
访问来源
|
|
</div>
|
|
<div class="flex flex-col gap-2" style="font-size: var(--font-size-sm);">
|
|
<div class="flex items-start gap-2">
|
|
<span class="shrink-0 whitespace-nowrap" style="color: var(--neutral-400); min-width: 48px;">渠道</span>
|
|
<span class="truncate" style="color: var(--neutral-800);">网页在线客服</span>
|
|
</div>
|
|
<div class="flex items-start gap-2">
|
|
<span class="shrink-0 whitespace-nowrap" style="color: var(--neutral-400); min-width: 48px;">来源</span>
|
|
<span class="truncate" style="color: var(--neutral-800);">百度搜索 / 产品详情页</span>
|
|
</div>
|
|
<div class="flex items-start gap-2">
|
|
<span class="shrink-0 whitespace-nowrap" style="color: var(--neutral-400); min-width: 48px;">设备</span>
|
|
<span class="truncate" style="color: var(--neutral-800);">Chrome / Windows</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Session History -->
|
|
<div class="mb-5">
|
|
<div class="flex items-center gap-1.5 mb-2.5" style="font-size: var(--font-size-xs); font-weight: 600; color: var(--neutral-500); text-transform: uppercase; letter-spacing: 0.05em;">
|
|
<i data-lucide="history" style="width: 13px; height: 13px;"></i>
|
|
历史会话
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<div class="rounded-lg px-3 py-2" style="background: var(--neutral-50); border: 1px solid var(--neutral-100);">
|
|
<div class="flex items-center justify-between mb-1">
|
|
<span class="truncate" style="font-size: var(--font-size-sm); font-weight: 500; color: var(--neutral-700);">订单查询</span>
|
|
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-400);">07-05</span>
|
|
</div>
|
|
<p class="line-clamp-1" style="font-size: var(--font-size-xs); color: var(--neutral-400);">咨询订单物流进度，已解答</p>
|
|
</div>
|
|
<div class="rounded-lg px-3 py-2" style="background: var(--neutral-50); border: 1px solid var(--neutral-100);">
|
|
<div class="flex items-center justify-between mb-1">
|
|
<span class="truncate" style="font-size: var(--font-size-sm); font-weight: 500; color: var(--neutral-700);">产品咨询</span>
|
|
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-400);">06-28</span>
|
|
</div>
|
|
<p class="line-clamp-1" style="font-size: var(--font-size-xs); color: var(--neutral-400);">询问产品规格参数，已推荐合适产品</p>
|
|
</div>
|
|
<div class="rounded-lg px-3 py-2" style="background: var(--neutral-50); border: 1px solid var(--neutral-100);">
|
|
<div class="flex items-center justify-between mb-1">
|
|
<span class="truncate" style="font-size: var(--font-size-sm); font-weight: 500; color: var(--neutral-700);">售后问题</span>
|
|
<span class="whitespace-nowrap" style="font-size: var(--font-size-xs); color: var(--neutral-400);">06-15</span>
|
|
</div>
|
|
<p class="line-clamp-1" style="font-size: var(--font-size-xs); color: var(--neutral-400);">申请换货处理，已成功完成换货</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Custom Fields -->
|
|
<div>
|
|
<div class="flex items-center gap-1.5 mb-2.5" style="font-size: var(--font-size-xs); font-weight: 600; color: var(--neutral-500); text-transform: uppercase; letter-spacing: 0.05em;">
|
|
<i data-lucide="file-text" style="width: 13px; height: 13px;"></i>
|
|
自定义字段
|
|
</div>
|
|
<div class="flex flex-col gap-2" style="font-size: var(--font-size-sm);">
|
|
<div class="flex items-start gap-2">
|
|
<span class="shrink-0 whitespace-nowrap" style="color: var(--neutral-400); min-width: 64px;">客户等级</span>
|
|
<span class="truncate" style="color: var(--neutral-800);">金牌客户</span>
|
|
</div>
|
|
<div class="flex items-start gap-2">
|
|
<span class="shrink-0 whitespace-nowrap" style="color: var(--neutral-400); min-width: 64px;">客户经理</span>
|
|
<span class="truncate" style="color: var(--neutral-800);">张经理</span>
|
|
</div>
|
|
<div class="flex items-start gap-2">
|
|
<span class="shrink-0 whitespace-nowrap" style="color: var(--neutral-400); min-width: 64px;">备注</span>
|
|
<span class="line-clamp-2" style="color: var(--neutral-800);">大客户，对服务质量要求较高，优先处理</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</aside>
|
|
|
|
</div>
|
|
|
|
</main>
|
|
<script>lucide.createIcons();</script>
|
|
</body>
|
|
</html> |