初始化项目：前端 React+TS+Tailwind+antd 脚手架，后端 Go，保留原型设计稿
This commit is contained in:
yml2213
@@ -0,0 +1,616 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN" class="light">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>在线客服 - 系统设置</title>
|
||||
<style id="theme-vars">
|
||||
/* Online Customer Service System — Brand CSS */
|
||||
/* Professional & Efficient Style — Cool Blue-Gray */
|
||||
|
||||
:root {
|
||||
/* === Brand Primary === */
|
||||
--brand-primary: #2563eb;
|
||||
--brand-primary-hover: #1d4ed8;
|
||||
--brand-primary-active: #1e40af;
|
||||
--brand-primary-light: #dbeafe;
|
||||
--brand-primary-lighter: #eff6ff;
|
||||
--brand-primary-dark: #1e3a8a;
|
||||
|
||||
/* === Neutrals === */
|
||||
--neutral-0: #ffffff;
|
||||
--neutral-50: #f8fafc;
|
||||
--neutral-100: #f1f5f9;
|
||||
--neutral-200: #e2e8f0;
|
||||
--neutral-300: #cbd5e1;
|
||||
--neutral-400: #94a3b8;
|
||||
--neutral-500: #64748b;
|
||||
--neutral-600: #475569;
|
||||
--neutral-700: #334155;
|
||||
--neutral-800: #1e293b;
|
||||
--neutral-900: #0f172a;
|
||||
--neutral-950: #020617;
|
||||
|
||||
/* === State Colors === */
|
||||
--state-success: #16a34a;
|
||||
--state-success-bg: #f0fdf4;
|
||||
--state-warning: #d97706;
|
||||
--state-warning-bg: #fffbeb;
|
||||
--state-error: #dc2626;
|
||||
--state-error-bg: #fef2f2;
|
||||
--state-info: #0891b2;
|
||||
--state-info-bg: #ecfeff;
|
||||
|
||||
/* === Typography === */
|
||||
--font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
--font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
|
||||
|
||||
--font-size-xs: 12px;
|
||||
--font-size-sm: 13px;
|
||||
--font-size-base: 14px;
|
||||
--font-size-md: 15px;
|
||||
--font-size-lg: 16px;
|
||||
--font-size-xl: 18px;
|
||||
--font-size-2xl: 20px;
|
||||
--font-size-3xl: 24px;
|
||||
--font-size-4xl: 30px;
|
||||
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
|
||||
--line-height-tight: 1.25;
|
||||
--line-height-normal: 1.5;
|
||||
--line-height-relaxed: 1.625;
|
||||
|
||||
/* === Spacing === */
|
||||
--space-0: 0px;
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-10: 40px;
|
||||
--space-12: 48px;
|
||||
|
||||
/* === Radius === */
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* === Shadows (static: alpha <= 0.05; floating layers only may exceed) === */
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03);
|
||||
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.05);
|
||||
--shadow-floating: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
|
||||
/* === Transitions === */
|
||||
--transition-fast: 150ms ease;
|
||||
--transition-normal: 200ms ease;
|
||||
--transition-slow: 300ms ease;
|
||||
|
||||
/* === Layout === */
|
||||
--sidebar-width: 240px;
|
||||
--sidebar-collapsed-width: 64px;
|
||||
--header-height: 56px;
|
||||
--panel-width: 320px;
|
||||
--chat-panel-min: 300px;
|
||||
--chat-panel-max: 600px;
|
||||
}
|
||||
|
||||
/* Dark mode */
|
||||
.dark {
|
||||
--brand-primary: #3b82f6;
|
||||
--brand-primary-hover: #60a5fa;
|
||||
--brand-primary-active: #2563eb;
|
||||
--brand-primary-light: #1e3a5f;
|
||||
--brand-primary-lighter: #172554;
|
||||
--brand-primary-dark: #93c5fd;
|
||||
|
||||
--neutral-0: #0f172a;
|
||||
--neutral-50: #1e293b;
|
||||
--neutral-100: #334155;
|
||||
--neutral-200: #475569;
|
||||
--neutral-300: #64748b;
|
||||
--neutral-400: #94a3b8;
|
||||
--neutral-500: #cbd5e1;
|
||||
--neutral-600: #e2e8f0;
|
||||
--neutral-700: #f1f5f9;
|
||||
--neutral-800: #f8fafc;
|
||||
--neutral-900: #ffffff;
|
||||
--neutral-950: #ffffff;
|
||||
|
||||
--state-success-bg: #052e16;
|
||||
--state-warning-bg: #451a03;
|
||||
--state-error-bg: #450a0a;
|
||||
--state-info-bg: #083344;
|
||||
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.35);
|
||||
--shadow-floating: 0 8px 24px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
</style>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.3.1/dist/index.global.js"></script>
|
||||
<script src="https://unpkg.com/lucide@1.8.0/dist/umd/lucide.min.js"></script>
|
||||
<style type="text/tailwindcss">
|
||||
@theme inline {
|
||||
--color-primary: var(--brand-primary);
|
||||
--color-border: var(--neutral-200);
|
||||
--color-ring: var(--brand-primary);
|
||||
--radius-sm: var(--radius-sm);
|
||||
--radius-md: var(--radius-md);
|
||||
--radius-lg: var(--radius-lg);
|
||||
}
|
||||
@layer base {
|
||||
body { background: var(--neutral-50); color: var(--neutral-900); }
|
||||
td, th { @apply break-words; word-break: break-all; word-break: auto-phrase; }
|
||||
th { @apply whitespace-nowrap; }
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
[data-icon] {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
-webkit-mask-size: contain;
|
||||
mask-size: contain;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-position: center;
|
||||
mask-position: center;
|
||||
background-color: currentColor;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen antialiased" style="font-family: var(--font-family-base);">
|
||||
|
||||
<main>
|
||||
<!-- Top Header Bar -->
|
||||
<header class="fixed top-0 left-0 right-0 z-30 border-b flex items-center justify-between px-4"
|
||||
style="height: var(--header-height); background: var(--neutral-0); border-color: var(--neutral-200);">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center justify-center rounded-lg"
|
||||
style="width: 32px; height: 32px; background: var(--brand-primary);">
|
||||
<i data-lucide="headset" style="width: 18px; height: 18px; color: var(--neutral-0);"></i>
|
||||
</div>
|
||||
<span class="font-semibold text-sm truncate" style="color: var(--neutral-900);">在线客服系统</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2" style="flex: 1; max-width: 400px; margin-left: 32px;">
|
||||
<div class="flex items-center gap-2 rounded-md px-3 w-full"
|
||||
style="height: 32px; background: var(--neutral-100); border: 1px solid var(--neutral-200);">
|
||||
<i data-lucide="search" style="width: 14px; height: 14px; color: var(--neutral-400); flex-shrink: 0;"></i>
|
||||
<span class="text-xs truncate" style="color: var(--neutral-400);">搜索设置项...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center gap-2 rounded-md px-3 cursor-pointer"
|
||||
style="height: 32px; background: var(--neutral-100);">
|
||||
<i data-lucide="bell" style="width: 14px; height: 14px; color: var(--neutral-500);"></i>
|
||||
<span class="text-xs whitespace-nowrap" style="color: var(--neutral-600);">3 条通知</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 rounded-full cursor-pointer"
|
||||
style="width: 32px; height: 32px; background: var(--brand-primary-light);">
|
||||
<i data-lucide="user" style="width: 14px; height: 14px; color: var(--brand-primary); margin: 0 auto;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Left Sidebar Navigation -->
|
||||
<aside class="fixed top-0 left-0 z-20 border-r flex flex-col"
|
||||
style="width: var(--sidebar-width); height: 100vh; padding-top: var(--header-height); background: var(--neutral-0); border-color: var(--neutral-200);">
|
||||
<nav class="flex-1 py-3 overflow-y-auto no-scrollbar">
|
||||
<div class="flex flex-col gap-0.5 px-3">
|
||||
<a data-dom-id="nav-dashboard" href="dashboard.html"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2 text-xs font-medium transition-colors cursor-pointer"
|
||||
style="color: var(--neutral-600);">
|
||||
<i data-lucide="layout-dashboard" style="width: 16px; height: 16px; flex-shrink: 0;"></i>
|
||||
<span class="truncate">客服工作台</span>
|
||||
</a>
|
||||
<a data-dom-id="nav-customers" href="customer-management.html"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2 text-xs font-medium transition-colors cursor-pointer"
|
||||
style="color: var(--neutral-600);">
|
||||
<i data-lucide="users" style="width: 16px; height: 16px; flex-shrink: 0;"></i>
|
||||
<span class="truncate">客户管理</span>
|
||||
</a>
|
||||
<a data-dom-id="nav-history" href="chat-history.html"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2 text-xs font-medium transition-colors cursor-pointer"
|
||||
style="color: var(--neutral-600);">
|
||||
<i data-lucide="message-square" style="width: 16px; height: 16px; flex-shrink: 0;"></i>
|
||||
<span class="truncate">对话记录</span>
|
||||
</a>
|
||||
<a data-dom-id="nav-knowledge" href="knowledge-base.html"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2 text-xs font-medium transition-colors cursor-pointer"
|
||||
style="color: var(--neutral-600);">
|
||||
<i data-lucide="book-open" style="width: 16px; height: 16px; flex-shrink: 0;"></i>
|
||||
<span class="truncate">知识库</span>
|
||||
</a>
|
||||
<a data-dom-id="nav-statistics" href="statistics.html"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2 text-xs font-medium transition-colors cursor-pointer"
|
||||
style="color: var(--neutral-600);">
|
||||
<i data-lucide="bar-chart-3" style="width: 16px; height: 16px; flex-shrink: 0;"></i>
|
||||
<span class="truncate">数据统计</span>
|
||||
</a>
|
||||
<a data-dom-id="nav-settings" href="settings.html"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2 text-xs font-semibold transition-colors cursor-pointer"
|
||||
style="background: var(--brand-primary-lighter); color: var(--brand-primary);">
|
||||
<i data-lucide="settings" style="width: 16px; height: 16px; flex-shrink: 0;"></i>
|
||||
<span class="truncate">系统设置</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Sidebar footer -->
|
||||
<div class="border-t px-3 py-3" style="border-color: var(--neutral-200);">
|
||||
<div class="flex items-center gap-2 rounded-lg px-3 py-2" style="background: var(--neutral-50);">
|
||||
<div class="rounded-full flex items-center justify-center flex-shrink-0"
|
||||
style="width: 24px; height: 24px; background: var(--brand-primary);">
|
||||
<span class="text-xs font-semibold" style="color: var(--neutral-0);">A</span>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="text-xs font-medium truncate" style="color: var(--neutral-900);">Admin</div>
|
||||
<div class="text-xs truncate" style="color: var(--neutral-400);">管理员</div>
|
||||
</div>
|
||||
<i data-lucide="chevrons-up-down" style="width: 12px; height: 12px; color: var(--neutral-400); flex-shrink: 0;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<div class="flex" style="margin-left: var(--sidebar-width); padding-top: var(--header-height);">
|
||||
|
||||
<!-- Settings Category Navigation (Left) -->
|
||||
<div class="flex-shrink-0 border-r"
|
||||
style="width: 200px; min-height: calc(100vh - var(--header-height)); background: var(--neutral-0); border-color: var(--neutral-200);">
|
||||
<div class="py-4 px-3">
|
||||
<h2 class="text-sm font-semibold mb-1 px-3 truncate" style="color: var(--neutral-900);">设置分类</h2>
|
||||
<p class="text-xs px-3 mb-4 truncate" style="color: var(--neutral-400);">管理系统配置与渠道接入</p>
|
||||
|
||||
<div class="flex flex-col gap-0.5">
|
||||
<!-- 基本设置 -->
|
||||
<a class="settings-cat flex items-center gap-3 rounded-md px-3 py-2 text-xs transition-colors cursor-pointer"
|
||||
style="color: var(--neutral-600);" data-cat="basic">
|
||||
<i data-lucide="sliders-horizontal" style="width: 15px; height: 15px; flex-shrink: 0;"></i>
|
||||
<span class="truncate">基本设置</span>
|
||||
</a>
|
||||
<!-- 渠道管理 (active) -->
|
||||
<a class="settings-cat flex items-center gap-3 rounded-md px-3 py-2 text-xs font-medium transition-colors cursor-pointer"
|
||||
style="background: var(--brand-primary-lighter); color: var(--brand-primary);" data-cat="channel">
|
||||
<i data-lucide="radio" style="width: 15px; height: 15px; flex-shrink: 0;"></i>
|
||||
<span class="truncate">渠道管理</span>
|
||||
</a>
|
||||
<!-- 客服分配规则 -->
|
||||
<a class="settings-cat flex items-center gap-3 rounded-md px-3 py-2 text-xs transition-colors cursor-pointer"
|
||||
style="color: var(--neutral-600);" data-cat="routing">
|
||||
<i data-lucide="git-branch" style="width: 15px; height: 15px; flex-shrink: 0;"></i>
|
||||
<span class="truncate">客服分配规则</span>
|
||||
</a>
|
||||
<!-- 权限管理 -->
|
||||
<a class="settings-cat flex items-center gap-3 rounded-md px-3 py-2 text-xs transition-colors cursor-pointer"
|
||||
style="color: var(--neutral-600);" data-cat="permission">
|
||||
<i data-lucide="shield-check" style="width: 15px; height: 15px; flex-shrink: 0;"></i>
|
||||
<span class="truncate">权限管理</span>
|
||||
</a>
|
||||
<!-- 自动回复 -->
|
||||
<a class="settings-cat flex items-center gap-3 rounded-md px-3 py-2 text-xs transition-colors cursor-pointer"
|
||||
style="color: var(--neutral-600);" data-cat="auto-reply">
|
||||
<i data-lucide="message-circle" style="width: 15px; height: 15px; flex-shrink: 0;"></i>
|
||||
<span class="truncate">自动回复</span>
|
||||
</a>
|
||||
<!-- 工作时间 -->
|
||||
<a class="settings-cat flex items-center gap-3 rounded-md px-3 py-2 text-xs transition-colors cursor-pointer"
|
||||
style="color: var(--neutral-600);" data-cat="schedule">
|
||||
<i data-lucide="clock" style="width: 15px; height: 15px; flex-shrink: 0;"></i>
|
||||
<span class="truncate">工作时间</span>
|
||||
</a>
|
||||
<!-- 通知设置 -->
|
||||
<a class="settings-cat flex items-center gap-3 rounded-md px-3 py-2 text-xs transition-colors cursor-pointer"
|
||||
style="color: var(--neutral-600);" data-cat="notification">
|
||||
<i data-lucide="bell-ring" style="width: 15px; height: 15px; flex-shrink: 0;"></i>
|
||||
<span class="truncate">通知设置</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Settings Configuration Panel (Right) -->
|
||||
<div class="flex-1 min-w-0" style="background: var(--neutral-50);">
|
||||
<div class="p-6" style="max-width: 860px;">
|
||||
|
||||
<!-- Panel Header -->
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h1 class="text-lg font-semibold mb-0.5" style="color: var(--neutral-900);">渠道管理</h1>
|
||||
<p class="text-xs" style="color: var(--neutral-500);">配置客户服务接入渠道，管理各渠道开关与接入状态</p>
|
||||
</div>
|
||||
<button class="flex items-center gap-2 rounded-lg px-4 font-medium text-xs whitespace-nowrap transition-colors cursor-pointer"
|
||||
style="height: 32px; background: var(--brand-primary); color: var(--neutral-0);">
|
||||
<i data-lucide="plus" style="width: 14px; height: 14px;"></i>
|
||||
添加新渠道
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Channel Cards List -->
|
||||
<div class="flex flex-col gap-4">
|
||||
|
||||
<!-- Channel 1: 网页聊天 (Enabled, with code snippet) -->
|
||||
<div class="rounded-lg border p-4" style="background: var(--neutral-0); border-color: var(--neutral-200);">
|
||||
<div class="flex items-start gap-4">
|
||||
<!-- Left: Icon + Info -->
|
||||
<div class="flex-shrink-0 flex items-center justify-center rounded-lg"
|
||||
style="width: 40px; height: 40px; background: var(--brand-primary-lighter);">
|
||||
<i data-lucide="globe" style="width: 20px; height: 20px; color: var(--brand-primary);"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<h3 class="text-sm font-medium truncate" style="color: var(--neutral-900);">网页聊天</h3>
|
||||
<span class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium whitespace-nowrap"
|
||||
style="background: var(--state-success-bg); color: var(--state-success);">已启用</span>
|
||||
</div>
|
||||
<!-- Toggle Switch -->
|
||||
<div class="flex-shrink-0 toggle-switch active" style="width: 36px; height: 20px; background: var(--brand-primary); border-radius: var(--radius-full); position: relative; cursor: pointer; transition: background var(--transition-fast);">
|
||||
<div style="width: 16px; height: 16px; background: var(--neutral-0); border-radius: var(--radius-full); position: absolute; top: 2px; left: 18px; transition: left var(--transition-fast); box-shadow: 0 1px 2px rgba(0,0,0,0.1);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 mb-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i data-lucide="users" style="width: 12px; height: 12px; color: var(--neutral-400);"></i>
|
||||
<span class="text-xs" style="color: var(--neutral-500);">今日接入 <span class="font-medium" style="color: var(--neutral-700);">1,286</span></span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i data-lucide="trending-up" style="width: 12px; height: 12px; color: var(--state-success);"></i>
|
||||
<span class="text-xs" style="color: var(--state-success);">+12.3%</span>
|
||||
</div>
|
||||
<!-- Sparkline -->
|
||||
<div class="sparkline-container flex items-end gap-0.5 ml-auto" style="height: 24px;">
|
||||
<div class="sparkline-bar" style="width: 4px; height: 10px; background: var(--brand-primary-light); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 16px; background: var(--brand-primary-light); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 12px; background: var(--brand-primary-light); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 20px; background: var(--brand-primary); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 14px; background: var(--brand-primary-light); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 18px; background: var(--brand-primary); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 22px; background: var(--brand-primary); border-radius: 1px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Code Snippet -->
|
||||
<div class="rounded-md px-3 py-2" style="background: var(--neutral-900);">
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<span class="text-xs font-medium" style="color: var(--neutral-400);">接入代码</span>
|
||||
<button class="flex items-center gap-1 text-xs transition-colors cursor-pointer" style="color: var(--neutral-400);">
|
||||
<i data-lucide="copy" style="width: 12px; height: 12px;"></i>
|
||||
复制
|
||||
</button>
|
||||
</div>
|
||||
<code class="text-xs leading-relaxed block" style="color: var(--brand-primary); font-family: var(--font-family-mono); word-break: break-all;">
|
||||
<script src="https://cs.example.com/widget.js" data-id="WK_8a3f2e"></script>
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Channel 2: 微信公众号 (Enabled) -->
|
||||
<div class="rounded-lg border p-4" style="background: var(--neutral-0); border-color: var(--neutral-200);">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="flex-shrink-0 flex items-center justify-center rounded-lg"
|
||||
style="width: 40px; height: 40px; background: var(--state-success-bg);">
|
||||
<i data-lucide="message-circle" style="width: 20px; height: 20px; color: var(--state-success);"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<h3 class="text-sm font-medium truncate" style="color: var(--neutral-900);">微信公众号</h3>
|
||||
<span class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium whitespace-nowrap"
|
||||
style="background: var(--state-success-bg); color: var(--state-success);">已启用</span>
|
||||
</div>
|
||||
<div class="flex-shrink-0 toggle-switch active" style="width: 36px; height: 20px; background: var(--brand-primary); border-radius: var(--radius-full); position: relative; cursor: pointer; transition: background var(--transition-fast);">
|
||||
<div style="width: 16px; height: 16px; background: var(--neutral-0); border-radius: var(--radius-full); position: absolute; top: 2px; left: 18px; transition: left var(--transition-fast); box-shadow: 0 1px 2px rgba(0,0,0,0.1);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 mb-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i data-lucide="users" style="width: 12px; height: 12px; color: var(--neutral-400);"></i>
|
||||
<span class="text-xs" style="color: var(--neutral-500);">今日接入 <span class="font-medium" style="color: var(--neutral-700);">843</span></span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i data-lucide="trending-up" style="width: 12px; height: 12px; color: var(--state-success);"></i>
|
||||
<span class="text-xs" style="color: var(--state-success);">+8.7%</span>
|
||||
</div>
|
||||
<!-- Sparkline -->
|
||||
<div class="sparkline-container flex items-end gap-0.5 ml-auto" style="height: 24px;">
|
||||
<div class="sparkline-bar" style="width: 4px; height: 14px; background: var(--state-success); border-radius: 1px; opacity: 0.3;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 10px; background: var(--state-success); border-radius: 1px; opacity: 0.3;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 16px; background: var(--state-success); border-radius: 1px; opacity: 0.3;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 18px; background: var(--state-success); border-radius: 1px; opacity: 0.5;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 20px; background: var(--state-success); border-radius: 1px; opacity: 0.5;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 16px; background: var(--state-success); border-radius: 1px; opacity: 0.7;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 24px; background: var(--state-success); border-radius: 1px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2 rounded-md px-3 py-1.5" style="background: var(--neutral-100);">
|
||||
<i data-lucide="link" style="width: 12px; height: 12px; color: var(--neutral-400);"></i>
|
||||
<span class="text-xs truncate" style="color: var(--neutral-600);">绑定公众号: 在线客服助手</span>
|
||||
</div>
|
||||
<button class="flex items-center gap-1.5 rounded-lg px-3 text-xs font-medium whitespace-nowrap transition-colors cursor-pointer"
|
||||
style="height: 32px; background: var(--neutral-100); color: var(--neutral-700); border: 1px solid var(--neutral-200);">
|
||||
<i data-lucide="settings-2" style="width: 13px; height: 13px;"></i>
|
||||
配置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Channel 3: APP内嵌 (Enabled) -->
|
||||
<div class="rounded-lg border p-4" style="background: var(--neutral-0); border-color: var(--neutral-200);">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="flex-shrink-0 flex items-center justify-center rounded-lg"
|
||||
style="width: 40px; height: 40px; background: var(--state-info-bg);">
|
||||
<i data-lucide="smartphone" style="width: 20px; height: 20px; color: var(--state-info);"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<h3 class="text-sm font-medium truncate" style="color: var(--neutral-900);">APP 内嵌</h3>
|
||||
<span class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium whitespace-nowrap"
|
||||
style="background: var(--state-success-bg); color: var(--state-success);">已启用</span>
|
||||
</div>
|
||||
<div class="flex-shrink-0 toggle-switch active" style="width: 36px; height: 20px; background: var(--brand-primary); border-radius: var(--radius-full); position: relative; cursor: pointer; transition: background var(--transition-fast);">
|
||||
<div style="width: 16px; height: 16px; background: var(--neutral-0); border-radius: var(--radius-full); position: absolute; top: 2px; left: 18px; transition: left var(--transition-fast); box-shadow: 0 1px 2px rgba(0,0,0,0.1);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 mb-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i data-lucide="users" style="width: 12px; height: 12px; color: var(--neutral-400);"></i>
|
||||
<span class="text-xs" style="color: var(--neutral-500);">今日接入 <span class="font-medium" style="color: var(--neutral-700);">567</span></span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i data-lucide="trending-down" style="width: 12px; height: 12px; color: var(--state-error);"></i>
|
||||
<span class="text-xs" style="color: var(--state-error);">-3.2%</span>
|
||||
</div>
|
||||
<!-- Sparkline -->
|
||||
<div class="sparkline-container flex items-end gap-0.5 ml-auto" style="height: 24px;">
|
||||
<div class="sparkline-bar" style="width: 4px; height: 20px; background: var(--state-info); border-radius: 1px; opacity: 0.5;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 22px; background: var(--state-info); border-radius: 1px; opacity: 0.5;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 18px; background: var(--state-info); border-radius: 1px; opacity: 0.3;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 24px; background: var(--state-info); border-radius: 1px; opacity: 0.7;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 14px; background: var(--state-info); border-radius: 1px; opacity: 0.3;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 12px; background: var(--state-info); border-radius: 1px; opacity: 0.3;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 10px; background: var(--state-info); border-radius: 1px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2 rounded-md px-3 py-1.5" style="background: var(--neutral-100);">
|
||||
<i data-lucide="package" style="width: 12px; height: 12px; color: var(--neutral-400);"></i>
|
||||
<span class="text-xs truncate" style="color: var(--neutral-600);">SDK 版本: v2.4.1 (iOS & Android)</span>
|
||||
</div>
|
||||
<button class="flex items-center gap-1.5 rounded-lg px-3 text-xs font-medium whitespace-nowrap transition-colors cursor-pointer"
|
||||
style="height: 32px; background: var(--neutral-100); color: var(--neutral-700); border: 1px solid var(--neutral-200);">
|
||||
<i data-lucide="settings-2" style="width: 13px; height: 13px;"></i>
|
||||
配置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Channel 4: 电话客服 (Disabled) -->
|
||||
<div class="rounded-lg border p-4" style="background: var(--neutral-0); border-color: var(--neutral-200); opacity: 0.7;">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="flex-shrink-0 flex items-center justify-center rounded-lg"
|
||||
style="width: 40px; height: 40px; background: var(--neutral-100);">
|
||||
<i data-lucide="phone" style="width: 20px; height: 20px; color: var(--neutral-400);"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<h3 class="text-sm font-medium truncate" style="color: var(--neutral-900);">电话客服</h3>
|
||||
<span class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium whitespace-nowrap"
|
||||
style="background: var(--neutral-100); color: var(--neutral-400);">未启用</span>
|
||||
</div>
|
||||
<div class="flex-shrink-0 toggle-switch" style="width: 36px; height: 20px; background: var(--neutral-300); border-radius: var(--radius-full); position: relative; cursor: pointer; transition: background var(--transition-fast);">
|
||||
<div style="width: 16px; height: 16px; background: var(--neutral-0); border-radius: var(--radius-full); position: absolute; top: 2px; left: 2px; transition: left var(--transition-fast); box-shadow: 0 1px 2px rgba(0,0,0,0.1);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 mb-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i data-lucide="users" style="width: 12px; height: 12px; color: var(--neutral-300);"></i>
|
||||
<span class="text-xs" style="color: var(--neutral-400);">今日接入 <span class="font-medium" style="color: var(--neutral-400);">0</span></span>
|
||||
</div>
|
||||
<!-- Sparkline (flat) -->
|
||||
<div class="sparkline-container flex items-end gap-0.5 ml-auto" style="height: 24px;">
|
||||
<div class="sparkline-bar" style="width: 4px; height: 2px; background: var(--neutral-200); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 2px; background: var(--neutral-200); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 2px; background: var(--neutral-200); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 2px; background: var(--neutral-200); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 2px; background: var(--neutral-200); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 2px; background: var(--neutral-200); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 2px; background: var(--neutral-200); border-radius: 1px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2 rounded-md px-3 py-1.5" style="background: var(--neutral-50);">
|
||||
<i data-lucide="info" style="width: 12px; height: 12px; color: var(--neutral-400);"></i>
|
||||
<span class="text-xs truncate" style="color: var(--neutral-400);">启用后可接入 400/800 电话线路</span>
|
||||
</div>
|
||||
<button class="flex items-center gap-1.5 rounded-lg px-3 text-xs font-medium whitespace-nowrap transition-colors cursor-pointer"
|
||||
style="height: 32px; background: var(--neutral-100); color: var(--neutral-700); border: 1px solid var(--neutral-200);">
|
||||
<i data-lucide="settings-2" style="width: 13px; height: 13px;"></i>
|
||||
配置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Channel 5: 邮件工单 (Disabled) -->
|
||||
<div class="rounded-lg border p-4" style="background: var(--neutral-0); border-color: var(--neutral-200); opacity: 0.7;">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="flex-shrink-0 flex items-center justify-center rounded-lg"
|
||||
style="width: 40px; height: 40px; background: var(--neutral-100);">
|
||||
<i data-lucide="mail" style="width: 20px; height: 20px; color: var(--neutral-400);"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<h3 class="text-sm font-medium truncate" style="color: var(--neutral-900);">邮件工单</h3>
|
||||
<span class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium whitespace-nowrap"
|
||||
style="background: var(--neutral-100); color: var(--neutral-400);">未启用</span>
|
||||
</div>
|
||||
<div class="flex-shrink-0 toggle-switch" style="width: 36px; height: 20px; background: var(--neutral-300); border-radius: var(--radius-full); position: relative; cursor: pointer; transition: background var(--transition-fast);">
|
||||
<div style="width: 16px; height: 16px; background: var(--neutral-0); border-radius: var(--radius-full); position: absolute; top: 2px; left: 2px; transition: left var(--transition-fast); box-shadow: 0 1px 2px rgba(0,0,0,0.1);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 mb-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i data-lucide="users" style="width: 12px; height: 12px; color: var(--neutral-300);"></i>
|
||||
<span class="text-xs" style="color: var(--neutral-400);">今日接入 <span class="font-medium" style="color: var(--neutral-400);">0</span></span>
|
||||
</div>
|
||||
<!-- Sparkline (flat) -->
|
||||
<div class="sparkline-container flex items-end gap-0.5 ml-auto" style="height: 24px;">
|
||||
<div class="sparkline-bar" style="width: 4px; height: 2px; background: var(--neutral-200); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 2px; background: var(--neutral-200); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 2px; background: var(--neutral-200); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 2px; background: var(--neutral-200); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 2px; background: var(--neutral-200); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 2px; background: var(--neutral-200); border-radius: 1px;"></div>
|
||||
<div class="sparkline-bar" style="width: 4px; height: 2px; background: var(--neutral-200); border-radius: 1px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2 rounded-md px-3 py-1.5" style="background: var(--neutral-50);">
|
||||
<i data-lucide="info" style="width: 12px; height: 12px; color: var(--neutral-400);"></i>
|
||||
<span class="text-xs truncate" style="color: var(--neutral-400);">支持自动创建工单并分配处理</span>
|
||||
</div>
|
||||
<button class="flex items-center gap-1.5 rounded-lg px-3 text-xs font-medium whitespace-nowrap transition-colors cursor-pointer"
|
||||
style="height: 32px; background: var(--neutral-100); color: var(--neutral-700); border: 1px solid var(--neutral-200);">
|
||||
<i data-lucide="settings-2" style="width: 13px; height: 13px;"></i>
|
||||
配置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- End Channel Cards List -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Settings Configuration Panel -->
|
||||
|
||||
</div>
|
||||
<!-- End Main Content Area -->
|
||||
|
||||
</main>
|
||||
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user