657 lines
62 KiB
HTML
657 lines
62 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Sino-MCI 消息中台 - 完整交互原型</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: { 50: '#eff6ff', 100: '#dbeafe', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8' },
|
|
slate: { 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 900: '#0f172a' },
|
|
},
|
|
fontFamily: {
|
|
sans: ['Inter', 'Noto Sans SC', 'system-ui', 'sans-serif'],
|
|
},
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style>
|
|
body { font-family: 'Inter', 'Noto Sans SC', system-ui, sans-serif; }
|
|
.nav-link.active { background: #eff6ff; color: #2563eb; border-right: 3px solid #2563eb; }
|
|
.drawer { transform: translateX(100%); transition: transform .25s ease; }
|
|
.drawer.open { transform: translateX(0); }
|
|
.scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
.scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-slate-50 text-slate-900 h-screen overflow-hidden flex">
|
|
|
|
<!-- Sidebar -->
|
|
<aside class="w-64 bg-white border-r border-slate-200 flex flex-col flex-shrink-0">
|
|
<div class="h-16 flex items-center px-6 border-b border-slate-200">
|
|
<div class="w-8 h-8 rounded-lg bg-primary-600 flex items-center justify-center text-white font-bold mr-3">M</div>
|
|
<div>
|
|
<div class="font-bold text-slate-900 leading-tight">Sino-MCI</div>
|
|
<div class="text-xs text-slate-500">消息中台</div>
|
|
</div>
|
|
</div>
|
|
<nav class="flex-1 overflow-y-auto scrollbar py-3 text-sm" id="sidebar">
|
|
<a href="#" data-target="dashboard" class="nav-link active flex items-center px-6 py-2.5 text-slate-600 hover:bg-slate-50">
|
|
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/></svg>
|
|
概览
|
|
</a>
|
|
<div class="px-6 pt-4 pb-1 text-xs font-semibold text-slate-400 uppercase tracking-wider">渠道接入</div>
|
|
<a href="#" data-target="channels" class="nav-link flex items-center px-6 py-2.5 text-slate-600 hover:bg-slate-50"><svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>渠道主体</a>
|
|
<a href="#" data-target="channel-apps" class="nav-link flex items-center px-6 py-2.5 text-slate-600 hover:bg-slate-50"><svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>渠道应用</a>
|
|
<a href="#" data-target="channel-accounts" class="nav-link flex items-center px-6 py-2.5 text-slate-600 hover:bg-slate-50"><svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>渠道账号</a>
|
|
<div class="px-6 pt-4 pb-1 text-xs font-semibold text-slate-400 uppercase tracking-wider">客户关系</div>
|
|
<a href="#" data-target="contacts" class="nav-link flex items-center px-6 py-2.5 text-slate-600 hover:bg-slate-50"><svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>联系人</a>
|
|
<a href="#" data-target="groups" class="nav-link flex items-center px-6 py-2.5 text-slate-600 hover:bg-slate-50"><svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>群聊</a>
|
|
<a href="#" data-target="tags" class="nav-link flex items-center px-6 py-2.5 text-slate-600 hover:bg-slate-50"><svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/></svg>标签体系</a>
|
|
<div class="px-6 pt-4 pb-1 text-xs font-semibold text-slate-400 uppercase tracking-wider">消息运营</div>
|
|
<a href="#" data-target="send-records" class="nav-link flex items-center px-6 py-2.5 text-slate-600 hover:bg-slate-50"><svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>发送记录</a>
|
|
<a href="#" data-target="messages" class="nav-link flex items-center px-6 py-2.5 text-slate-600 hover:bg-slate-50"><svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/></svg>消息查询</a>
|
|
<div class="px-6 pt-4 pb-1 text-xs font-semibold text-slate-400 uppercase tracking-wider">流程编排</div>
|
|
<a href="#" data-target="inbound-flow" class="nav-link flex items-center px-6 py-2.5 text-slate-600 hover:bg-slate-50"><svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/></svg>入站流程</a>
|
|
<div class="px-6 pt-4 pb-1 text-xs font-semibold text-slate-400 uppercase tracking-wider">系统管理</div>
|
|
<a href="#" data-target="tenants" class="nav-link flex items-center px-6 py-2.5 text-slate-600 hover:bg-slate-50"><svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>租户管理</a>
|
|
<a href="#" data-target="users" class="nav-link flex items-center px-6 py-2.5 text-slate-600 hover:bg-slate-50"><svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/></svg>用户管理</a>
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- Main -->
|
|
<main class="flex-1 flex flex-col min-w-0">
|
|
<!-- Header -->
|
|
<header class="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-6 flex-shrink-0">
|
|
<div class="text-lg font-semibold text-slate-900" id="page-title">概览</div>
|
|
<div class="flex items-center gap-4">
|
|
<button class="p-2 text-slate-500 hover:text-primary-600"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg></button>
|
|
<div class="flex items-center gap-2 pr-4 border-r border-slate-200">
|
|
<label class="text-sm text-slate-500">租户</label>
|
|
<select id="tenant-selector" class="border border-slate-200 rounded-lg px-2 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500">
|
|
<option value="">全部租户</option>
|
|
<option value="default">默认租户</option>
|
|
<option value="sinocare">Sinocare</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-8 h-8 rounded-full bg-primary-100 text-primary-700 flex items-center justify-center font-semibold text-sm">管</div>
|
|
<div class="text-sm">
|
|
<div class="font-medium text-slate-900">平台管理员</div>
|
|
<div class="text-xs text-slate-500">admin@sino-mci</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Content Views -->
|
|
<div class="flex-1 overflow-y-auto scrollbar p-6" id="content">
|
|
|
|
<!-- Dashboard -->
|
|
<section id="dashboard" class="view space-y-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<div class="bg-white rounded-xl border border-slate-200 p-5"><div class="text-sm text-slate-500">今日发送消息</div><div class="text-3xl font-bold text-slate-900 mt-1">12,458</div><div class="text-xs text-emerald-600 mt-2">↑ 12% 较昨日</div></div>
|
|
<div class="bg-white rounded-xl border border-slate-200 p-5"><div class="text-sm text-slate-500">今日接收消息</div><div class="text-3xl font-bold text-slate-900 mt-1">8,932</div><div class="text-xs text-emerald-600 mt-2">↑ 8% 较昨日</div></div>
|
|
<div class="bg-white rounded-xl border border-slate-200 p-5"><div class="text-sm text-slate-500">渠道账号在线</div><div class="text-3xl font-bold text-slate-900 mt-1">24 / 26</div><div class="text-xs text-slate-400 mt-2">2 个离线</div></div>
|
|
<div class="bg-white rounded-xl border border-slate-200 p-5"><div class="text-sm text-slate-500">待处理入站会话</div><div class="text-3xl font-bold text-slate-900 mt-1">156</div><div class="text-xs text-amber-600 mt-2">需人工跟进</div></div>
|
|
</div>
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<div class="lg:col-span-2 bg-white rounded-xl border border-slate-200 p-5">
|
|
<div class="flex items-center justify-between mb-4"><h3 class="font-semibold text-slate-900">最近消息</h3><button class="text-sm text-primary-600 hover:underline">查看全部</button></div>
|
|
<table class="w-full text-sm text-left"><thead class="text-xs text-slate-500 bg-slate-50"><tr><th class="px-3 py-2 font-medium">时间</th><th class="px-3 py-2 font-medium">渠道</th><th class="px-3 py-2 font-medium">发送方</th><th class="px-3 py-2 font-medium">内容摘要</th><th class="px-3 py-2 font-medium">状态</th></tr></thead>
|
|
<tbody class="divide-y divide-slate-100">
|
|
<tr class="hover:bg-slate-50"><td class="px-3 py-3 text-slate-500">10:23</td><td class="px-3 py-3">企微</td><td class="px-3 py-3">客户 A</td><td class="px-3 py-3 truncate max-w-xs">我要查询订单状态，订单号是 2025...</td><td class="px-3 py-3"><span class="px-2 py-0.5 rounded-full text-xs bg-amber-50 text-amber-700">待处理</span></td></tr>
|
|
<tr class="hover:bg-slate-50"><td class="px-3 py-3 text-slate-500">10:18</td><td class="px-3 py-3">个微</td><td class="px-3 py-3">客户 B</td><td class="px-3 py-3 truncate max-w-xs">[图片] 车牌号 京 A12345</td><td class="px-3 py-3"><span class="px-2 py-0.5 rounded-full text-xs bg-emerald-50 text-emerald-700">已归档</span></td></tr>
|
|
<tr class="hover:bg-slate-50"><td class="px-3 py-3 text-slate-500">10:05</td><td class="px-3 py-3">企微</td><td class="px-3 py-3">客户 C</td><td class="px-3 py-3 truncate max-w-xs">帮我发一份报价单到邮箱</td><td class="px-3 py-3"><span class="px-2 py-0.5 rounded-full text-xs bg-blue-50 text-blue-700">处理中</span></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="bg-white rounded-xl border border-slate-200 p-5">
|
|
<h3 class="font-semibold text-slate-900 mb-4">渠道状态</h3>
|
|
<div class="space-y-3">
|
|
<div class="flex items-center justify-between"><div class="flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-emerald-500"></span><span class="text-sm">企业微信主体-01</span></div><span class="text-xs text-emerald-600">正常</span></div>
|
|
<div class="flex items-center justify-between"><div class="flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-emerald-500"></span><span class="text-sm">个人微信机器人-A</span></div><span class="text-xs text-emerald-600">正常</span></div>
|
|
<div class="flex items-center justify-between"><div class="flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-slate-300"></span><span class="text-sm">钉钉（预留）</span></div><span class="text-xs text-slate-400">未启用</span></div>
|
|
<div class="flex items-center justify-between"><div class="flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-slate-300"></span><span class="text-sm">飞书（预留）</span></div><span class="text-xs text-slate-400">未启用</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Channel Subjects -->
|
|
<section id="channels" class="view hidden space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex gap-2"><input type="text" placeholder="搜索主体名称 / corpId" class="border border-slate-200 rounded-lg px-3 py-2 text-sm w-64 focus:outline-none focus:ring-2 focus:ring-primary-500" /><button class="bg-white border border-slate-200 text-slate-600 px-3 py-2 rounded-lg text-sm hover:bg-slate-50">筛选</button></div>
|
|
<button class="bg-primary-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-primary-700" onclick="openModal('channel-subject-modal')">新增主体</button>
|
|
</div>
|
|
<div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
|
<table class="w-full text-sm text-left">
|
|
<thead class="text-xs text-slate-500 bg-slate-50"><tr><th class="px-4 py-3 font-medium">主体名称</th><th class="px-4 py-3 font-medium">渠道类型</th><th class="px-4 py-3 font-medium">CorpID / 标识</th><th class="px-4 py-3 font-medium">应用数</th><th class="px-4 py-3 font-medium">账号数</th><th class="px-4 py-3 font-medium">状态</th></tr></thead>
|
|
<tbody class="divide-y divide-slate-100">
|
|
<tr class="hover:bg-slate-50 cursor-pointer" onclick="openDrawer('channel-detail')">
|
|
<td class="px-4 py-3 font-medium text-slate-900">Sinocare 企业微信</td>
|
|
<td class="px-4 py-3"><span class="px-2 py-0.5 rounded text-xs bg-blue-50 text-blue-700">企微</span></td>
|
|
<td class="px-4 py-3 text-slate-500">ww1234567890abcdef</td>
|
|
<td class="px-4 py-3">2</td>
|
|
<td class="px-4 py-3">18</td>
|
|
<td class="px-4 py-3"><span class="px-2 py-0.5 rounded-full text-xs bg-emerald-50 text-emerald-700">已连接</span></td>
|
|
</tr>
|
|
<tr class="hover:bg-slate-50 cursor-pointer" onclick="openDrawer('channel-detail')">
|
|
<td class="px-4 py-3 font-medium text-slate-900">Sinocare 个人微信</td>
|
|
<td class="px-4 py-3"><span class="px-2 py-0.5 rounded text-xs bg-green-50 text-green-700">个微</span></td>
|
|
<td class="px-4 py-3 text-slate-500">pywechat-001</td>
|
|
<td class="px-4 py-3">-</td>
|
|
<td class="px-4 py-3">3</td>
|
|
<td class="px-4 py-3"><span class="px-2 py-0.5 rounded-full text-xs bg-emerald-50 text-emerald-700">已连接</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="flex items-center justify-between bg-white rounded-xl border border-slate-200 px-4 py-3 text-sm">
|
|
<div class="text-slate-500">共 2 条</div>
|
|
<div class="flex items-center gap-2">
|
|
<button class="px-2 py-1 rounded border border-slate-200 text-slate-400" disabled><</button>
|
|
<button class="px-2.5 py-1 rounded bg-primary-600 text-white">1</button>
|
|
<button class="px-2 py-1 rounded border border-slate-200 text-slate-400" disabled>></button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Channel Apps -->
|
|
<section id="channel-apps" class="view hidden space-y-4">
|
|
<div class="flex items-center justify-between"><h3 class="font-semibold text-slate-900">企微应用列表</h3><button class="bg-primary-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-primary-700">新增应用</button></div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-sm transition">
|
|
<div class="flex items-center justify-between mb-3"><div class="font-semibold text-slate-900">会话存档应用</div><span class="px-2 py-0.5 rounded-full text-xs bg-emerald-50 text-emerald-700">启用</span></div>
|
|
<div class="text-sm text-slate-500 space-y-1"><div>AgentID: 1000002</div><div>Secret: ••••••••</div><div>会话存档: 已开启</div></div>
|
|
<div class="mt-4 flex gap-2"><button class="text-sm text-primary-600 hover:underline">编辑</button><button class="text-sm text-slate-500 hover:text-slate-700">初始化账号</button></div>
|
|
</div>
|
|
<div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-sm transition">
|
|
<div class="flex items-center justify-between mb-3"><div class="font-semibold text-slate-900">消息推送应用</div><span class="px-2 py-0.5 rounded-full text-xs bg-emerald-50 text-emerald-700">启用</span></div>
|
|
<div class="text-sm text-slate-500 space-y-1"><div>AgentID: 1000005</div><div>Secret: ••••••••</div><div>主动推送: 已开启</div></div>
|
|
<div class="mt-4 flex gap-2"><button class="text-sm text-primary-600 hover:underline">编辑</button><button class="text-sm text-slate-500 hover:text-slate-700">初始化账号</button></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Channel Accounts -->
|
|
<section id="channel-accounts" class="view hidden space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex gap-2"><input type="text" placeholder="搜索账号 / UserID" class="border border-slate-200 rounded-lg px-3 py-2 text-sm w-64 focus:outline-none focus:ring-2 focus:ring-primary-500" /><select class="border border-slate-200 rounded-lg px-3 py-2 text-sm"><option>全部主体</option><option>Sinocare 企业微信</option></select></div>
|
|
<button class="bg-primary-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-primary-700">新增账号</button>
|
|
</div>
|
|
<div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
|
<table class="w-full text-sm text-left"><thead class="text-xs text-slate-500 bg-slate-50"><tr><th class="px-4 py-3 font-medium">账号昵称</th><th class="px-4 py-3 font-medium">UserID</th><th class="px-4 py-3 font-medium">所属主体</th><th class="px-4 py-3 font-medium">部门路径</th><th class="px-4 py-3 font-medium">会话存档</th><th class="px-4 py-3 font-medium">状态</th></tr></thead>
|
|
<tbody class="divide-y divide-slate-100">
|
|
<tr class="hover:bg-slate-50 cursor-pointer" onclick="openDrawer('channel-account-detail')"><td class="px-4 py-3 flex items-center gap-2"><div class="w-7 h-7 rounded-full bg-slate-200"></div><span class="font-medium text-slate-900">张三</span></td><td class="px-4 py-3 text-slate-500">zhangsan</td><td class="px-4 py-3">Sinocare 企业微信</td><td class="px-4 py-3 text-slate-500">/销售部/华东区</td><td class="px-4 py-3"><span class="px-2 py-0.5 rounded-full text-xs bg-emerald-50 text-emerald-700">已开启</span></td><td class="px-4 py-3"><span class="px-2 py-0.5 rounded-full text-xs bg-emerald-50 text-emerald-700">在线</span></td></tr>
|
|
<tr class="hover:bg-slate-50 cursor-pointer" onclick="openDrawer('channel-account-detail')"><td class="px-4 py-3 flex items-center gap-2"><div class="w-7 h-7 rounded-full bg-slate-200"></div><span class="font-medium text-slate-900">李四</span></td><td class="px-4 py-3 text-slate-500">lisi</td><td class="px-4 py-3">Sinocare 企业微信</td><td class="px-4 py-3 text-slate-500">/客服部</td><td class="px-4 py-3"><span class="px-2 py-0.5 rounded-full text-xs bg-slate-100 text-slate-600">未开启</span></td><td class="px-4 py-3"><span class="px-2 py-0.5 rounded-full text-xs bg-slate-100 text-slate-600">离线</span></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="flex items-center justify-between bg-white rounded-xl border border-slate-200 px-4 py-3 text-sm">
|
|
<div class="text-slate-500">共 2 条</div>
|
|
<div class="flex items-center gap-2"><button class="px-2 py-1 rounded border border-slate-200 text-slate-400" disabled><</button><button class="px-2.5 py-1 rounded bg-primary-600 text-white">1</button><button class="px-2 py-1 rounded border border-slate-200 text-slate-400" disabled>></button></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contacts -->
|
|
<section id="contacts" class="view hidden space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex gap-2"><input type="text" placeholder="搜索姓名 / 手机号 / UserID" class="border border-slate-200 rounded-lg px-3 py-2 text-sm w-64" /><button class="bg-white border border-slate-200 text-slate-600 px-3 py-2 rounded-lg text-sm hover:bg-slate-50">标签筛选</button></div>
|
|
<button class="bg-primary-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-primary-700">新增联系人</button>
|
|
</div>
|
|
<div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
|
<table class="w-full text-sm text-left"><thead class="text-xs text-slate-500 bg-slate-50"><tr><th class="px-4 py-3 font-medium">联系人</th><th class="px-4 py-3 font-medium">渠道身份</th><th class="px-4 py-3 font-medium">所属主体</th><th class="px-4 py-3 font-medium">标签</th><th class="px-4 py-3 font-medium">最近会话</th></tr></thead>
|
|
<tbody class="divide-y divide-slate-100">
|
|
<tr class="hover:bg-slate-50 cursor-pointer" onclick="openDrawer('contact-detail')">
|
|
<td class="px-4 py-3"><div class="flex items-center gap-3"><div class="w-9 h-9 rounded-full bg-blue-100 text-blue-700 flex items-center justify-center font-semibold">A</div><div><div class="font-medium text-slate-900">艾先生</div><div class="text-xs text-slate-500">138****1234</div></div></div></td>
|
|
<td class="px-4 py-3 text-slate-500">wmABC123</td>
|
|
<td class="px-4 py-3">Sinocare 企业微信</td>
|
|
<td class="px-4 py-3"><span class="px-2 py-0.5 rounded text-xs bg-blue-50 text-blue-700">VIP客户</span> <span class="px-2 py-0.5 rounded text-xs bg-amber-50 text-amber-700">待回访</span></td>
|
|
<td class="px-4 py-3 text-slate-500">10 分钟前</td>
|
|
</tr>
|
|
<tr class="hover:bg-slate-50 cursor-pointer" onclick="openDrawer('contact-detail')">
|
|
<td class="px-4 py-3"><div class="flex items-center gap-3"><div class="w-9 h-9 rounded-full bg-emerald-100 text-emerald-700 flex items-center justify-center font-semibold">B</div><div><div class="font-medium text-slate-900">白女士</div><div class="text-xs text-slate-500">139****5678</div></div></div></td>
|
|
<td class="px-4 py-3 text-slate-500">wmDEF456</td>
|
|
<td class="px-4 py-3">Sinocare 企业微信</td>
|
|
<td class="px-4 py-3"><span class="px-2 py-0.5 rounded text-xs bg-slate-100 text-slate-600">普通客户</span></td>
|
|
<td class="px-4 py-3 text-slate-500">2 小时前</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="flex items-center justify-between bg-white rounded-xl border border-slate-200 px-4 py-3 text-sm">
|
|
<div class="text-slate-500">共 2 条</div>
|
|
<div class="flex items-center gap-2"><button class="px-2 py-1 rounded border border-slate-200 text-slate-400" disabled><</button><button class="px-2.5 py-1 rounded bg-primary-600 text-white">1</button><button class="px-2 py-1 rounded border border-slate-200 text-slate-400" disabled>></button></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Groups -->
|
|
<section id="groups" class="view hidden space-y-4">
|
|
<div class="flex items-center justify-between"><div class="flex gap-2"><input type="text" placeholder="搜索群名 / 群ID" class="border border-slate-200 rounded-lg px-3 py-2 text-sm w-64" /></div><button class="bg-primary-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-primary-700">抓取已有群聊</button></div>
|
|
<div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
|
<table class="w-full text-sm text-left"><thead class="text-xs text-slate-500 bg-slate-50"><tr><th class="px-4 py-3 font-medium">群名称</th><th class="px-4 py-3 font-medium">群ID</th><th class="px-4 py-3 font-medium">所属主体</th><th class="px-4 py-3 font-medium">人数</th><th class="px-4 py-3 font-medium">标签</th></tr></thead>
|
|
<tbody class="divide-y divide-slate-100">
|
|
<tr class="hover:bg-slate-50 cursor-pointer" onclick="openDrawer('group-detail')"><td class="px-4 py-3 font-medium text-slate-900">华东销售群</td><td class="px-4 py-3 text-slate-500">wrABC123</td><td class="px-4 py-3">Sinocare 企业微信</td><td class="px-4 py-3">128</td><td class="px-4 py-3"><span class="px-2 py-0.5 rounded text-xs bg-blue-50 text-blue-700">销售群</span></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="flex items-center justify-between bg-white rounded-xl border border-slate-200 px-4 py-3 text-sm">
|
|
<div class="text-slate-500">共 1 条</div>
|
|
<div class="flex items-center gap-2"><button class="px-2 py-1 rounded border border-slate-200 text-slate-400" disabled><</button><button class="px-2.5 py-1 rounded bg-primary-600 text-white">1</button><button class="px-2 py-1 rounded border border-slate-200 text-slate-400" disabled>></button></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Send Records -->
|
|
<section id="send-records" class="view hidden space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex gap-2"><input type="text" placeholder="任务ID / 回调地址" class="border border-slate-200 rounded-lg px-3 py-2 text-sm w-64" /><select class="border border-slate-200 rounded-lg px-3 py-2 text-sm"><option>全部状态</option><option>发送中</option><option>成功</option><option>失败</option></select></div>
|
|
<button class="bg-primary-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-primary-700">测试发送</button>
|
|
</div>
|
|
<div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
|
<table class="w-full text-sm text-left"><thead class="text-xs text-slate-500 bg-slate-50"><tr><th class="px-4 py-3 font-medium">任务ID</th><th class="px-4 py-3 font-medium">业务系统</th><th class="px-4 py-3 font-medium">目标类型</th><th class="px-4 py-3 font-medium">目标数</th><th class="px-4 py-3 font-medium">发送时间</th><th class="px-4 py-3 font-medium">回调地址</th><th class="px-4 py-3 font-medium">状态</th><th class="px-4 py-3 font-medium text-right">日志</th></tr></thead>
|
|
<tbody class="divide-y divide-slate-100">
|
|
<tr class="hover:bg-slate-50 cursor-pointer"><td class="px-4 py-3 font-medium text-slate-900">SND-20250709-001</td><td class="px-4 py-3">CRM</td><td class="px-4 py-3">单聊</td><td class="px-4 py-3">1,200</td><td class="px-4 py-3 text-slate-500">2025-07-09 09:30</td><td class="px-4 py-3 text-slate-500 truncate max-w-xs">https://crm.example.com/callback</td><td class="px-4 py-3"><span class="px-2 py-0.5 rounded-full text-xs bg-emerald-50 text-emerald-700">成功</span></td><td class="px-4 py-3 text-right"><button class="text-slate-400 hover:text-primary-600">查看</button></td></tr>
|
|
<tr class="hover:bg-slate-50 cursor-pointer"><td class="px-4 py-3 font-medium text-slate-900">SND-20250709-002</td><td class="px-4 py-3">ERP</td><td class="px-4 py-3">群聊</td><td class="px-4 py-3">45</td><td class="px-4 py-3 text-slate-500">2025-07-09 09:45</td><td class="px-4 py-3 text-slate-500">-</td><td class="px-4 py-3"><span class="px-2 py-0.5 rounded-full text-xs bg-red-50 text-red-700">失败</span></td><td class="px-4 py-3 text-right"><button class="text-slate-400 hover:text-primary-600">查看</button></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="flex items-center justify-between bg-white rounded-xl border border-slate-200 px-4 py-3 text-sm">
|
|
<div class="text-slate-500">共 2 条</div>
|
|
<div class="flex items-center gap-2"><button class="px-2 py-1 rounded border border-slate-200 text-slate-400" disabled><</button><button class="px-2.5 py-1 rounded bg-primary-600 text-white">1</button><button class="px-2 py-1 rounded border border-slate-200 text-slate-400" disabled>></button></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Messages -->
|
|
<section id="messages" class="view hidden h-[calc(100vh-140px)]">
|
|
<div class="bg-white rounded-xl border border-slate-200 h-full flex overflow-hidden">
|
|
<!-- Conversation list -->
|
|
<div class="w-80 border-r border-slate-200 flex flex-col">
|
|
<div class="p-3 border-b border-slate-200"><input type="text" placeholder="搜索会话" class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm" /></div>
|
|
<div class="flex-1 overflow-y-auto scrollbar">
|
|
<div class="p-3 border-b border-slate-100 hover:bg-slate-50 cursor-pointer bg-slate-50">
|
|
<div class="flex justify-between items-center"><div class="font-medium text-slate-900">艾先生</div><div class="text-xs text-slate-400">10:23</div></div>
|
|
<div class="text-sm text-slate-500 truncate">我要查询订单状态</div>
|
|
</div>
|
|
<div class="p-3 border-b border-slate-100 hover:bg-slate-50 cursor-pointer">
|
|
<div class="flex justify-between items-center"><div class="font-medium text-slate-900">华东销售群</div><div class="text-xs text-slate-400">09:58</div></div>
|
|
<div class="text-sm text-slate-500 truncate">[图片] 车牌号 京A12345</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Chat area -->
|
|
<div class="flex-1 flex flex-col">
|
|
<div class="h-14 border-b border-slate-200 flex items-center justify-between px-4">
|
|
<div class="font-medium text-slate-900">艾先生</div>
|
|
<div class="flex gap-2"><button class="text-sm text-slate-500 hover:text-primary-600">打标签</button><button class="text-sm text-slate-500 hover:text-primary-600">会话详情</button></div>
|
|
</div>
|
|
<div class="flex-1 overflow-y-auto scrollbar p-4 space-y-4 bg-slate-50">
|
|
<div class="flex justify-start"><div class="max-w-md bg-white border border-slate-200 rounded-2xl rounded-tl-sm px-4 py-2 text-sm text-slate-800 shadow-sm">我要查询订单状态</div></div>
|
|
<div class="flex justify-start"><div class="max-w-md bg-white border border-slate-200 rounded-2xl rounded-tl-sm px-4 py-2 text-sm text-slate-800 shadow-sm">订单号是 20250709001</div></div>
|
|
<div class="flex justify-end"><div class="max-w-md bg-primary-600 text-white rounded-2xl rounded-tr-sm px-4 py-2 text-sm shadow-sm">好的，已为您查询到订单正在发货中。</div></div>
|
|
</div>
|
|
<div class="p-3 border-t border-slate-200 flex gap-2">
|
|
<input type="text" placeholder="输入消息..." class="flex-1 border border-slate-200 rounded-lg px-3 py-2 text-sm" />
|
|
<button class="bg-primary-600 text-white px-4 py-2 rounded-lg text-sm font-medium">发送</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Inbound Flow -->
|
|
<section id="inbound-flow" class="view hidden space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex gap-2"><input type="text" placeholder="规则名称" class="border border-slate-200 rounded-lg px-3 py-2 text-sm w-64" /></div>
|
|
<button class="bg-primary-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-primary-700">新建流程</button>
|
|
</div>
|
|
<div class="bg-white rounded-xl border border-slate-200 h-[calc(100vh-220px)] flex">
|
|
<div class="w-72 border-r border-slate-200 p-4 overflow-y-auto">
|
|
<h4 class="font-semibold text-slate-900 mb-3">规则列表</h4>
|
|
<div class="space-y-2">
|
|
<div class="p-3 rounded-lg bg-primary-50 border border-primary-200 cursor-pointer"><div class="font-medium text-primary-700 text-sm">订单咨询自动分拣</div><div class="text-xs text-slate-500 mt-1">命中“订单”关键词</div></div>
|
|
<div class="p-3 rounded-lg border border-slate-200 hover:bg-slate-50 cursor-pointer"><div class="font-medium text-slate-900 text-sm">地址/车牌号收集</div><div class="text-xs text-slate-500 mt-1">多轮消息确认</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 bg-slate-50 relative p-8">
|
|
<div class="absolute top-6 left-1/2 -translate-x-1/2 px-4 py-2 bg-white border border-slate-200 rounded-lg shadow-sm text-sm font-medium">入站消息触发</div>
|
|
<div class="absolute top-24 left-1/2 -translate-x-1/2 w-0.5 h-12 bg-slate-300"></div>
|
|
<div class="absolute top-40 left-1/2 -translate-x-1/2 px-4 py-2 bg-white border border-slate-200 rounded-lg shadow-sm text-sm font-medium">LLM 意图识别</div>
|
|
<div class="absolute top-56 left-1/2 -translate-x-1/2 w-0.5 h-12 bg-slate-300"></div>
|
|
<div class="absolute top-72 left-1/2 -translate-x-1/2 flex gap-8">
|
|
<div class="px-4 py-2 bg-emerald-50 border border-emerald-200 rounded-lg text-sm text-emerald-700">自动回复</div>
|
|
<div class="px-4 py-2 bg-amber-50 border border-amber-200 rounded-lg text-sm text-amber-700">转人工</div>
|
|
<div class="px-4 py-2 bg-blue-50 border border-blue-200 rounded-lg text-sm text-blue-700">调用业务系统</div>
|
|
</div>
|
|
<div class="absolute bottom-6 right-6 text-xs text-slate-400">注：画布仅示意，真实实现使用 @vue-flow</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Tenants -->
|
|
<section id="tenants" class="view hidden space-y-4">
|
|
<div class="flex items-center justify-between"><button class="bg-primary-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-primary-700" onclick="openModal('tenant-modal')">新增租户</button></div>
|
|
<div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
|
<table class="w-full text-sm text-left"><thead class="text-xs text-slate-500 bg-slate-50"><tr><th class="px-4 py-3 font-medium">租户编码</th><th class="px-4 py-3 font-medium">租户名称</th><th class="px-4 py-3 font-medium">负责人</th><th class="px-4 py-3 font-medium">业务系统数</th><th class="px-4 py-3 font-medium">状态</th></tr></thead>
|
|
<tbody class="divide-y divide-slate-100">
|
|
<tr class="hover:bg-slate-50 cursor-pointer" onclick="openDrawer('tenant-detail')"><td class="px-4 py-3 font-medium text-slate-900">TENANT_DEFAULT</td><td class="px-4 py-3">默认租户</td><td class="px-4 py-3">system</td><td class="px-4 py-3">3</td><td class="px-4 py-3"><span class="px-2 py-0.5 rounded-full text-xs bg-emerald-50 text-emerald-700">启用</span></td></tr>
|
|
<tr class="hover:bg-slate-50 cursor-pointer" onclick="openDrawer('tenant-detail')"><td class="px-4 py-3 font-medium text-slate-900">TENANT_001</td><td class="px-4 py-3">Sinocare</td><td class="px-4 py-3">张三</td><td class="px-4 py-3">2</td><td class="px-4 py-3"><span class="px-2 py-0.5 rounded-full text-xs bg-emerald-50 text-emerald-700">启用</span></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="flex items-center justify-between bg-white rounded-xl border border-slate-200 px-4 py-3 text-sm">
|
|
<div class="text-slate-500">共 2 条</div>
|
|
<div class="flex items-center gap-2"><button class="px-2 py-1 rounded border border-slate-200 text-slate-400" disabled><</button><button class="px-2.5 py-1 rounded bg-primary-600 text-white">1</button><button class="px-2 py-1 rounded border border-slate-200 text-slate-400" disabled>></button></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Users -->
|
|
<section id="users" class="view hidden space-y-4">
|
|
<div class="flex items-center justify-between"><div class="flex gap-2"><select class="border border-slate-200 rounded-lg px-3 py-2 text-sm"><option>全部租户</option><option>默认租户</option></select></div><button class="bg-primary-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-primary-700" onclick="openModal('user-modal')">新增用户</button></div>
|
|
<div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
|
<table class="w-full text-sm text-left"><thead class="text-xs text-slate-500 bg-slate-50"><tr><th class="px-4 py-3 font-medium">用户名</th><th class="px-4 py-3 font-medium">角色</th><th class="px-4 py-3 font-medium">所属租户</th><th class="px-4 py-3 font-medium">手机号</th><th class="px-4 py-3 font-medium">状态</th></tr></thead>
|
|
<tbody class="divide-y divide-slate-100">
|
|
<tr class="hover:bg-slate-50 cursor-pointer" onclick="openDrawer('user-detail')"><td class="px-4 py-3 font-medium text-slate-900">admin</td><td class="px-4 py-3"><span class="px-2 py-0.5 rounded text-xs bg-purple-50 text-purple-700">平台管理员</span></td><td class="px-4 py-3">全部</td><td class="px-4 py-3 text-slate-500">138****0000</td><td class="px-4 py-3"><span class="px-2 py-0.5 rounded-full text-xs bg-emerald-50 text-emerald-700">启用</span></td></tr>
|
|
<tr class="hover:bg-slate-50 cursor-pointer" onclick="openDrawer('user-detail')"><td class="px-4 py-3 font-medium text-slate-900">ops_01</td><td class="px-4 py-3"><span class="px-2 py-0.5 rounded text-xs bg-blue-50 text-blue-700">租户管理员</span></td><td class="px-4 py-3">Sinocare</td><td class="px-4 py-3 text-slate-500">139****1111</td><td class="px-4 py-3"><span class="px-2 py-0.5 rounded-full text-xs bg-emerald-50 text-emerald-700">启用</span></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="flex items-center justify-between bg-white rounded-xl border border-slate-200 px-4 py-3 text-sm">
|
|
<div class="text-slate-500">共 2 条</div>
|
|
<div class="flex items-center gap-2"><button class="px-2 py-1 rounded border border-slate-200 text-slate-400" disabled><</button><button class="px-2.5 py-1 rounded bg-primary-600 text-white">1</button><button class="px-2 py-1 rounded border border-slate-200 text-slate-400" disabled>></button></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Tags -->
|
|
<section id="tags" class="view hidden space-y-4">
|
|
<div class="flex items-center justify-between"><button class="bg-primary-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-primary-700">新增标签</button></div>
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<div class="lg:col-span-1 bg-white rounded-xl border border-slate-200 p-4">
|
|
<h4 class="font-semibold text-slate-900 mb-3">标签树</h4>
|
|
<div class="space-y-2 text-sm">
|
|
<div class="p-2 rounded bg-slate-50 font-medium text-slate-900">客户等级</div>
|
|
<div class="pl-4 space-y-1 text-slate-600">
|
|
<div class="p-2 rounded hover:bg-slate-50 cursor-pointer">VIP客户</div>
|
|
<div class="p-2 rounded hover:bg-slate-50 cursor-pointer">普通客户</div>
|
|
<div class="p-2 rounded hover:bg-slate-50 cursor-pointer">潜在客户</div>
|
|
</div>
|
|
<div class="p-2 rounded bg-slate-50 font-medium text-slate-900">跟进状态</div>
|
|
<div class="pl-4 space-y-1 text-slate-600">
|
|
<div class="p-2 rounded hover:bg-slate-50 cursor-pointer">待回访</div>
|
|
<div class="p-2 rounded hover:bg-slate-50 cursor-pointer">已成交</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="lg:col-span-2 bg-white rounded-xl border border-slate-200 p-5">
|
|
<h4 class="font-semibold text-slate-900 mb-4">标签详情</h4>
|
|
<div class="grid grid-cols-2 gap-4 text-sm">
|
|
<div><label class="block text-slate-500 mb-1">标签名称</label><input type="text" value="VIP客户" class="w-full border border-slate-200 rounded-lg px-3 py-2" /></div>
|
|
<div><label class="block text-slate-500 mb-1">上级标签</label><select class="w-full border border-slate-200 rounded-lg px-3 py-2"><option>客户等级</option><option>无</option></select></div>
|
|
<div class="col-span-2"><label class="block text-slate-500 mb-1">备注</label><textarea class="w-full border border-slate-200 rounded-lg px-3 py-2" rows="3">高价值客户标签</textarea></div>
|
|
</div>
|
|
<div class="mt-4 flex gap-2"><button class="bg-primary-600 text-white px-4 py-2 rounded-lg text-sm">保存</button><button class="bg-white border border-slate-200 text-slate-600 px-4 py-2 rounded-lg text-sm">删除</button></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Drawer Overlay -->
|
|
<div id="drawer-overlay" class="fixed inset-0 bg-black/20 z-40 hidden" onclick="closeDrawer()"></div>
|
|
|
|
<!-- Channel Detail Drawer -->
|
|
<aside id="channel-detail" class="drawer fixed top-0 right-0 h-full w-[480px] bg-white shadow-2xl z-50 border-l border-slate-200 flex flex-col">
|
|
<div class="h-16 border-b border-slate-200 flex items-center justify-between px-6">
|
|
<div class="font-semibold text-slate-900">渠道主体详情</div>
|
|
<button class="text-slate-400 hover:text-slate-600" onclick="closeDrawer()">✕</button>
|
|
</div>
|
|
<div class="flex-1 overflow-y-auto scrollbar p-6 space-y-6">
|
|
<div class="space-y-3 text-sm">
|
|
<div class="flex justify-between"><span class="text-slate-500">主体名称</span><span class="font-medium text-slate-900">Sinocare 企业微信</span></div>
|
|
<div class="flex justify-between"><span class="text-slate-500">渠道类型</span><span class="px-2 py-0.5 rounded text-xs bg-blue-50 text-blue-700">企微</span></div>
|
|
<div class="flex justify-between"><span class="text-slate-500">CorpID</span><span class="text-slate-700">ww1234567890abcdef</span></div>
|
|
<div class="flex justify-between"><span class="text-slate-500">状态</span><span class="px-2 py-0.5 rounded-full text-xs bg-emerald-50 text-emerald-700">已连接</span></div>
|
|
</div>
|
|
<div>
|
|
<div class="flex items-center justify-between mb-2"><h4 class="font-semibold text-slate-900">应用</h4><button class="text-sm text-primary-600 hover:underline">新增应用</button></div>
|
|
<div class="bg-slate-50 rounded-lg border border-slate-200 p-3 text-sm space-y-2">
|
|
<div class="flex justify-between"><span class="font-medium">会话存档应用</span><span class="text-xs text-emerald-600">启用</span></div>
|
|
<div class="flex justify-between"><span class="font-medium">消息推送应用</span><span class="text-xs text-emerald-600">启用</span></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="flex items-center justify-between mb-2"><h4 class="font-semibold text-slate-900">账号</h4><button class="text-sm text-primary-600 hover:underline">初始化账号</button></div>
|
|
<div class="bg-slate-50 rounded-lg border border-slate-200 p-3 text-sm space-y-2">
|
|
<div class="flex justify-between"><span>张三 (zhangsan)</span><span class="text-xs text-slate-500">会话存档 开</span></div>
|
|
<div class="flex justify-between"><span>李四 (lisi)</span><span class="text-xs text-slate-500">会话存档 关</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 border-t border-slate-200 flex gap-2">
|
|
<button class="flex-1 bg-primary-600 text-white py-2 rounded-lg text-sm font-medium">保存</button>
|
|
<button class="flex-1 bg-white border border-slate-200 text-slate-600 py-2 rounded-lg text-sm">取消</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Contact Detail Drawer -->
|
|
<aside id="contact-detail" class="drawer fixed top-0 right-0 h-full w-[420px] bg-white shadow-2xl z-50 border-l border-slate-200 flex flex-col">
|
|
<div class="h-16 border-b border-slate-200 flex items-center justify-between px-6">
|
|
<div class="font-semibold text-slate-900">联系人详情</div>
|
|
<button class="text-slate-400 hover:text-slate-600" onclick="closeDrawer()">✕</button>
|
|
</div>
|
|
<div class="flex-1 overflow-y-auto scrollbar p-6 space-y-6">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-16 h-16 rounded-full bg-blue-100 text-blue-700 flex items-center justify-center text-2xl font-bold">A</div>
|
|
<div>
|
|
<div class="text-lg font-bold text-slate-900">艾先生</div>
|
|
<div class="text-sm text-slate-500">138****1234</div>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-3 text-sm">
|
|
<div class="flex justify-between"><span class="text-slate-500">渠道身份</span><span class="text-slate-700">wmABC123</span></div>
|
|
<div class="flex justify-between"><span class="text-slate-500">所属主体</span><span class="text-slate-700">Sinocare 企业微信</span></div>
|
|
<div class="flex justify-between"><span class="text-slate-500">来源</span><span class="text-slate-700">会话存档</span></div>
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-slate-900 mb-2">标签</div>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="px-2 py-1 rounded text-xs bg-blue-50 text-blue-700">VIP客户</span>
|
|
<span class="px-2 py-1 rounded text-xs bg-amber-50 text-amber-700">待回访</span>
|
|
<button class="px-2 py-1 rounded text-xs border border-dashed border-slate-300 text-slate-500 hover:border-primary-500 hover:text-primary-600">+ 编辑标签</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="flex items-center justify-between mb-2"><div class="font-semibold text-slate-900">关联会话</div><div class="text-xs text-slate-500">12 条</div></div>
|
|
<div class="space-y-2">
|
|
<div class="p-3 rounded-lg border border-slate-200 text-sm hover:bg-slate-50 cursor-pointer"><div class="text-slate-500 text-xs mb-1">2025-07-09 10:23</div><div class="text-slate-800">我要查询订单状态</div></div>
|
|
<div class="p-3 rounded-lg border border-slate-200 text-sm hover:bg-slate-50 cursor-pointer"><div class="text-slate-500 text-xs mb-1">2025-07-08 16:45</div><div class="text-slate-800">帮我发一份报价单</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 border-t border-slate-200 flex gap-2">
|
|
<button class="flex-1 bg-primary-600 text-white py-2 rounded-lg text-sm font-medium">编辑</button>
|
|
<button class="flex-1 bg-white border border-slate-200 text-slate-600 py-2 rounded-lg text-sm">发消息</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Channel Account Detail Drawer -->
|
|
<aside id="channel-account-detail" class="drawer fixed top-0 right-0 h-full w-[420px] bg-white shadow-2xl z-50 border-l border-slate-200 flex flex-col">
|
|
<div class="h-16 border-b border-slate-200 flex items-center justify-between px-6"><div class="font-semibold text-slate-900">渠道账号详情</div><button class="text-slate-400 hover:text-slate-600" onclick="closeDrawer()">✕</button></div>
|
|
<div class="flex-1 overflow-y-auto scrollbar p-6 space-y-6">
|
|
<div class="flex items-center gap-4"><div class="w-16 h-16 rounded-full bg-slate-200 flex items-center justify-center text-2xl font-bold text-slate-500">张</div><div><div class="text-lg font-bold text-slate-900">张三</div><div class="text-sm text-slate-500">zhangsan</div></div></div>
|
|
<div class="space-y-3 text-sm">
|
|
<div class="flex justify-between"><span class="text-slate-500">所属主体</span><span class="text-slate-700">Sinocare 企业微信</span></div>
|
|
<div class="flex justify-between"><span class="text-slate-500">部门路径</span><span class="text-slate-700">/销售部/华东区</span></div>
|
|
<div class="flex justify-between"><span class="text-slate-500">会话存档</span><span class="px-2 py-0.5 rounded-full text-xs bg-emerald-50 text-emerald-700">已开启</span></div>
|
|
<div class="flex justify-between"><span class="text-slate-500">在线状态</span><span class="px-2 py-0.5 rounded-full text-xs bg-emerald-50 text-emerald-700">在线</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 border-t border-slate-200 flex gap-2"><button class="flex-1 bg-primary-600 text-white py-2 rounded-lg text-sm font-medium">编辑</button><button class="flex-1 bg-white border border-slate-200 text-slate-600 py-2 rounded-lg text-sm">同步企微信息</button></div>
|
|
</aside>
|
|
|
|
<!-- Group Detail Drawer -->
|
|
<aside id="group-detail" class="drawer fixed top-0 right-0 h-full w-[420px] bg-white shadow-2xl z-50 border-l border-slate-200 flex flex-col">
|
|
<div class="h-16 border-b border-slate-200 flex items-center justify-between px-6"><div class="font-semibold text-slate-900">群聊详情</div><button class="text-slate-400 hover:text-slate-600" onclick="closeDrawer()">✕</button></div>
|
|
<div class="flex-1 overflow-y-auto scrollbar p-6 space-y-6">
|
|
<div><div class="text-lg font-bold text-slate-900">华东销售群</div><div class="text-sm text-slate-500">wrABC123 · 128 人</div></div>
|
|
<div class="space-y-3 text-sm">
|
|
<div class="flex justify-between"><span class="text-slate-500">所属主体</span><span class="text-slate-700">Sinocare 企业微信</span></div>
|
|
<div class="flex justify-between"><span class="text-slate-500">群主</span><span class="text-slate-700">张三</span></div>
|
|
<div class="flex justify-between"><span class="text-slate-500">创建时间</span><span class="text-slate-700">2025-01-15</span></div>
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-slate-900 mb-2">标签</div>
|
|
<div class="flex flex-wrap gap-2"><span class="px-2 py-1 rounded text-xs bg-blue-50 text-blue-700">销售群</span><button class="px-2 py-1 rounded text-xs border border-dashed border-slate-300 text-slate-500 hover:border-primary-500 hover:text-primary-600">+ 编辑标签</button></div>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 border-t border-slate-200 flex gap-2"><button class="flex-1 bg-primary-600 text-white py-2 rounded-lg text-sm font-medium">编辑</button><button class="flex-1 bg-white border border-slate-200 text-slate-600 py-2 rounded-lg text-sm">查看会话</button></div>
|
|
</aside>
|
|
|
|
<!-- Tenant Detail Drawer -->
|
|
<aside id="tenant-detail" class="drawer fixed top-0 right-0 h-full w-[420px] bg-white shadow-2xl z-50 border-l border-slate-200 flex flex-col">
|
|
<div class="h-16 border-b border-slate-200 flex items-center justify-between px-6"><div class="font-semibold text-slate-900">租户详情</div><button class="text-slate-400 hover:text-slate-600" onclick="closeDrawer()">✕</button></div>
|
|
<div class="flex-1 overflow-y-auto scrollbar p-6 space-y-6">
|
|
<div><div class="text-lg font-bold text-slate-900">Sinocare</div><div class="text-sm text-slate-500">TENANT_001</div></div>
|
|
<div class="space-y-3 text-sm">
|
|
<div class="flex justify-between"><span class="text-slate-500">负责人</span><span class="text-slate-700">张三</span></div>
|
|
<div class="flex justify-between"><span class="text-slate-500">业务系统数</span><span class="text-slate-700">2</span></div>
|
|
<div class="flex justify-between"><span class="text-slate-500">状态</span><span class="px-2 py-0.5 rounded-full text-xs bg-emerald-50 text-emerald-700">启用</span></div>
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-slate-900 mb-2">业务系统</div>
|
|
<div class="space-y-2"><div class="p-3 rounded-lg border border-slate-200 text-sm">CRM</div><div class="p-3 rounded-lg border border-slate-200 text-sm">ERP</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 border-t border-slate-200 flex gap-2"><button class="flex-1 bg-primary-600 text-white py-2 rounded-lg text-sm font-medium">编辑</button><button class="flex-1 bg-white border border-red-200 text-red-600 py-2 rounded-lg text-sm">删除</button></div>
|
|
</aside>
|
|
|
|
<!-- User Detail Drawer -->
|
|
<aside id="user-detail" class="drawer fixed top-0 right-0 h-full w-[420px] bg-white shadow-2xl z-50 border-l border-slate-200 flex flex-col">
|
|
<div class="h-16 border-b border-slate-200 flex items-center justify-between px-6"><div class="font-semibold text-slate-900">用户详情</div><button class="text-slate-400 hover:text-slate-600" onclick="closeDrawer()">✕</button></div>
|
|
<div class="flex-1 overflow-y-auto scrollbar p-6 space-y-6">
|
|
<div class="flex items-center gap-4"><div class="w-16 h-16 rounded-full bg-primary-100 text-primary-700 flex items-center justify-center text-2xl font-bold">管</div><div><div class="text-lg font-bold text-slate-900">admin</div><div class="text-sm text-slate-500">平台管理员</div></div></div>
|
|
<div class="space-y-3 text-sm">
|
|
<div class="flex justify-between"><span class="text-slate-500">所属租户</span><span class="text-slate-700">全部</span></div>
|
|
<div class="flex justify-between"><span class="text-slate-500">手机号</span><span class="text-slate-700">138****0000</span></div>
|
|
<div class="flex justify-between"><span class="text-slate-500">状态</span><span class="px-2 py-0.5 rounded-full text-xs bg-emerald-50 text-emerald-700">启用</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 border-t border-slate-200 flex gap-2"><button class="flex-1 bg-primary-600 text-white py-2 rounded-lg text-sm font-medium">编辑</button><button class="flex-1 bg-white border border-red-200 text-red-600 py-2 rounded-lg text-sm">删除</button></div>
|
|
</aside>
|
|
|
|
<!-- Modal: Add Tenant -->
|
|
<div id="tenant-modal" class="fixed inset-0 bg-black/30 z-50 hidden flex items-center justify-center">
|
|
<div class="bg-white rounded-xl shadow-2xl w-[480px] max-w-[90%] max-h-[90vh] overflow-y-auto">
|
|
<div class="h-14 border-b border-slate-200 flex items-center justify-between px-6"><div class="font-semibold text-slate-900">新增租户</div><button class="text-slate-400 hover:text-slate-600" onclick="closeModal('tenant-modal')">✕</button></div>
|
|
<div class="p-6 space-y-4 text-sm">
|
|
<div><label class="block text-slate-500 mb-1">租户编码</label><input type="text" class="w-full border border-slate-200 rounded-lg px-3 py-2" /></div>
|
|
<div><label class="block text-slate-500 mb-1">租户名称</label><input type="text" class="w-full border border-slate-200 rounded-lg px-3 py-2" /></div>
|
|
<div><label class="block text-slate-500 mb-1">负责人</label><input type="text" class="w-full border border-slate-200 rounded-lg px-3 py-2" /></div>
|
|
<div><label class="block text-slate-500 mb-1">备注</label><textarea class="w-full border border-slate-200 rounded-lg px-3 py-2" rows="3"></textarea></div>
|
|
</div>
|
|
<div class="p-4 border-t border-slate-200 flex justify-end gap-2">
|
|
<button class="px-4 py-2 rounded-lg border border-slate-200 text-slate-600 text-sm" onclick="closeModal('tenant-modal')">取消</button>
|
|
<button class="px-4 py-2 rounded-lg bg-primary-600 text-white text-sm font-medium" onclick="closeModal('tenant-modal')">确认</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal: Add User -->
|
|
<div id="user-modal" class="fixed inset-0 bg-black/30 z-50 hidden flex items-center justify-center">
|
|
<div class="bg-white rounded-xl shadow-2xl w-[480px] max-w-[90%] max-h-[90vh] overflow-y-auto">
|
|
<div class="h-14 border-b border-slate-200 flex items-center justify-between px-6"><div class="font-semibold text-slate-900">新增用户</div><button class="text-slate-400 hover:text-slate-600" onclick="closeModal('user-modal')">✕</button></div>
|
|
<div class="p-6 space-y-4 text-sm">
|
|
<div><label class="block text-slate-500 mb-1">用户名</label><input type="text" class="w-full border border-slate-200 rounded-lg px-3 py-2" /></div>
|
|
<div><label class="block text-slate-500 mb-1">角色</label><select class="w-full border border-slate-200 rounded-lg px-3 py-2"><option>平台管理员</option><option>租户管理员</option><option>运营人员</option></select></div>
|
|
<div><label class="block text-slate-500 mb-1">所属租户</label><select class="w-full border border-slate-200 rounded-lg px-3 py-2"><option>全部租户</option><option>默认租户</option><option>Sinocare</option></select></div>
|
|
<div><label class="block text-slate-500 mb-1">手机号</label><input type="text" class="w-full border border-slate-200 rounded-lg px-3 py-2" /></div>
|
|
</div>
|
|
<div class="p-4 border-t border-slate-200 flex justify-end gap-2">
|
|
<button class="px-4 py-2 rounded-lg border border-slate-200 text-slate-600 text-sm" onclick="closeModal('user-modal')">取消</button>
|
|
<button class="px-4 py-2 rounded-lg bg-primary-600 text-white text-sm font-medium" onclick="closeModal('user-modal')">确认</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal: Add Channel Subject -->
|
|
<div id="channel-subject-modal" class="fixed inset-0 bg-black/30 z-50 hidden flex items-center justify-center">
|
|
<div class="bg-white rounded-xl shadow-2xl w-[480px] max-w-[90%] max-h-[90vh] overflow-y-auto">
|
|
<div class="h-14 border-b border-slate-200 flex items-center justify-between px-6"><div class="font-semibold text-slate-900">新增渠道主体</div><button class="text-slate-400 hover:text-slate-600" onclick="closeModal('channel-subject-modal')">✕</button></div>
|
|
<div class="p-6 space-y-4 text-sm">
|
|
<div><label class="block text-slate-500 mb-1">主体名称</label><input type="text" class="w-full border border-slate-200 rounded-lg px-3 py-2" /></div>
|
|
<div><label class="block text-slate-500 mb-1">渠道类型</label><select class="w-full border border-slate-200 rounded-lg px-3 py-2"><option>企业微信</option><option>个人微信</option><option>钉钉（预留）</option><option>飞书（预留）</option></select></div>
|
|
<div><label class="block text-slate-500 mb-1">CorpID / 标识</label><input type="text" class="w-full border border-slate-200 rounded-lg px-3 py-2" /></div>
|
|
<div><label class="block text-slate-500 mb-1">备注</label><textarea class="w-full border border-slate-200 rounded-lg px-3 py-2" rows="3"></textarea></div>
|
|
</div>
|
|
<div class="p-4 border-t border-slate-200 flex justify-end gap-2">
|
|
<button class="px-4 py-2 rounded-lg border border-slate-200 text-slate-600 text-sm" onclick="closeModal('channel-subject-modal')">取消</button>
|
|
<button class="px-4 py-2 rounded-lg bg-primary-600 text-white text-sm font-medium" onclick="closeModal('channel-subject-modal')">确认</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const links = document.querySelectorAll('.nav-link');
|
|
const views = document.querySelectorAll('.view');
|
|
const titleMap = {
|
|
dashboard: '概览',
|
|
channels: '渠道主体',
|
|
'channel-apps': '渠道应用',
|
|
'channel-accounts': '渠道账号',
|
|
contacts: '联系人',
|
|
groups: '群聊',
|
|
'send-records': '发送记录',
|
|
messages: '消息查询',
|
|
'inbound-flow': '入站流程',
|
|
tenants: '租户管理',
|
|
users: '用户管理',
|
|
tags: '标签体系',
|
|
};
|
|
|
|
links.forEach(link => {
|
|
link.addEventListener('click', e => {
|
|
e.preventDefault();
|
|
const target = link.dataset.target;
|
|
showView(target);
|
|
links.forEach(l => l.classList.remove('active'));
|
|
link.classList.add('active');
|
|
});
|
|
});
|
|
|
|
function showView(id) {
|
|
views.forEach(v => v.classList.add('hidden'));
|
|
const el = document.getElementById(id);
|
|
if (el) el.classList.remove('hidden');
|
|
document.getElementById('page-title').textContent = titleMap[id] || '';
|
|
}
|
|
|
|
function openDrawer(id) {
|
|
document.getElementById('drawer-overlay').classList.remove('hidden');
|
|
document.querySelectorAll('.drawer').forEach(d => d.classList.remove('open'));
|
|
document.getElementById(id).classList.add('open');
|
|
}
|
|
|
|
function closeDrawer() {
|
|
document.getElementById('drawer-overlay').classList.add('hidden');
|
|
document.querySelectorAll('.drawer').forEach(d => d.classList.remove('open'));
|
|
}
|
|
|
|
function openModal(id) {
|
|
document.getElementById(id).classList.remove('hidden');
|
|
}
|
|
|
|
function closeModal(id) {
|
|
document.getElementById(id).classList.add('hidden');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|