generated from root/feiqiu-ETL
feat:引入 TDesign 以及前端初稿
This commit is contained in:
185
Prototype/pages/chat.html
Normal file
185
Prototype/pages/chat.html
Normal file
@@ -0,0 +1,185 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>助手对话 - 球房运营助手</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#0052d9',
|
||||
'primary-light': '#ecf2fe',
|
||||
success: '#00a870',
|
||||
warning: '#ed7b2f',
|
||||
error: '#e34d59',
|
||||
'gray-1': '#f3f3f3',
|
||||
'gray-2': '#eeeeee',
|
||||
'gray-3': '#e7e7e7',
|
||||
'gray-4': '#dcdcdc',
|
||||
'gray-5': '#c5c5c5',
|
||||
'gray-6': '#a6a6a6',
|
||||
'gray-7': '#8b8b8b',
|
||||
'gray-8': '#777777',
|
||||
'gray-9': '#5e5e5e',
|
||||
'gray-10': '#4b4b4b',
|
||||
'gray-11': '#393939',
|
||||
'gray-12': '#2c2c2c',
|
||||
'gray-13': '#242424',
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Noto Sans SC', 'sans-serif'],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
.safe-area-top {
|
||||
padding-top: env(safe-area-inset-top, 44px);
|
||||
}
|
||||
.chat-container {
|
||||
height: calc(100vh - 44px - 70px - env(safe-area-inset-top, 44px));
|
||||
overflow-y: auto;
|
||||
}
|
||||
.message-bubble {
|
||||
max-width: 80%;
|
||||
}
|
||||
.voice-btn:active {
|
||||
background: #0052d9;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen flex flex-col">
|
||||
<!-- 顶部导航 -->
|
||||
<div class="safe-area-top bg-white sticky top-0 z-10">
|
||||
<div class="h-11 flex items-center relative border-b border-gray-2 px-4">
|
||||
<button onclick="history.back()" class="absolute left-4 p-1">
|
||||
<svg class="w-5 h-5 text-gray-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="15 18 9 12 15 6"/>
|
||||
</svg>
|
||||
</button>
|
||||
<h1 class="flex-1 text-center text-base font-medium text-gray-13">智能助手</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 对话内容区域 -->
|
||||
<div class="chat-container flex-1 p-4 space-y-4">
|
||||
<!-- 引用内容卡片 -->
|
||||
<div class="bg-gray-2 rounded-lg p-3 text-sm">
|
||||
<div class="flex items-center gap-2 text-gray-7 mb-1">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
|
||||
</svg>
|
||||
<span>来源：任务 - 高优先召回</span>
|
||||
</div>
|
||||
<p class="text-gray-9">王先生 · 最近到店15天前 · VIP客户</p>
|
||||
</div>
|
||||
|
||||
<!-- 用户消息 -->
|
||||
<div class="flex justify-end">
|
||||
<div class="message-bubble bg-primary text-white rounded-2xl rounded-tr-sm px-4 py-3">
|
||||
<p class="text-sm">如何提升这位客户的到店频率？</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 助手消息 -->
|
||||
<div class="flex justify-start gap-2">
|
||||
<div class="w-8 h-8 bg-gradient-to-br from-primary to-blue-400 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="message-bubble bg-white rounded-2xl rounded-tl-sm px-4 py-3 shadow-sm">
|
||||
<p class="text-sm text-gray-13 leading-relaxed">
|
||||
根据王先生的消费数据分析，我有以下建议：
|
||||
</p>
|
||||
<ol class="text-sm text-gray-13 leading-relaxed mt-2 list-decimal list-inside space-y-2">
|
||||
<li><strong>个性化邀约</strong>：王先生偏好晚间21:00后到店，建议在这个时间段前发送邀约消息。</li>
|
||||
<li><strong>活动推荐</strong>：他对斯诺克感兴趣，可以推荐即将举办的斯诺克比赛活动。</li>
|
||||
<li><strong>储值提醒</strong>：他的储值余额还有8600元，可以提醒他来消费，避免余额长期闲置。</li>
|
||||
<li><strong>专属服务</strong>：安排他熟悉的助教张三接待，提升服务体验。</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户消息 -->
|
||||
<div class="flex justify-end">
|
||||
<div class="message-bubble bg-primary text-white rounded-2xl rounded-tr-sm px-4 py-3">
|
||||
<p class="text-sm">能帮我生成一条邀约话术吗？</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 助手消息 -->
|
||||
<div class="flex justify-start gap-2">
|
||||
<div class="w-8 h-8 bg-gradient-to-br from-primary to-blue-400 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="message-bubble bg-white rounded-2xl rounded-tl-sm px-4 py-3 shadow-sm">
|
||||
<p class="text-sm text-gray-13 leading-relaxed">
|
||||
好的，根据王先生的特点，为您生成以下邀约话术：
|
||||
</p>
|
||||
<div class="mt-3 p-3 bg-primary-light rounded-lg">
|
||||
<p class="text-sm text-primary leading-relaxed">
|
||||
"王哥您好！好久不见了，最近工作顺利吧？😊 我们店里最近新到了几张英国进口的斯诺克球桌，球感特别好，知道您是斯诺克爱好者，第一时间想到邀请您来体验一下。这周末晚上有空吗？我提前给您预留好包厢～"
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-xs text-gray-7 mt-2">💡 提示：建议在晚间8点左右发送，这是王先生活跃的时间段。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户消息 -->
|
||||
<div class="flex justify-end">
|
||||
<div class="message-bubble bg-primary text-white rounded-2xl rounded-tr-sm px-4 py-3">
|
||||
<p class="text-sm">太棒了，谢谢！</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 助手消息 -->
|
||||
<div class="flex justify-start gap-2">
|
||||
<div class="w-8 h-8 bg-gradient-to-br from-primary to-blue-400 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="message-bubble bg-white rounded-2xl rounded-tl-sm px-4 py-3 shadow-sm">
|
||||
<p class="text-sm text-gray-13 leading-relaxed">
|
||||
不客气！祝您沟通顺利！如果需要更多帮助，随时问我。😊
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 输入区域 -->
|
||||
<div class="bg-white border-t border-gray-2 p-3 pb-6">
|
||||
<div class="flex items-end gap-2">
|
||||
<div class="flex-1 bg-gray-1 rounded-2xl px-4 py-2.5 flex items-center">
|
||||
<input type="text" placeholder="输入消息..." class="flex-1 bg-transparent text-sm text-gray-13 placeholder-gray-6 outline-none">
|
||||
</div>
|
||||
<button class="voice-btn w-10 h-10 bg-gray-1 rounded-full flex items-center justify-center text-gray-7 transition-colors">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/>
|
||||
<path d="M19 10v2a7 7 0 01-14 0v-2"/>
|
||||
<line x1="12" y1="19" x2="12" y2="23"/>
|
||||
<line x1="8" y1="23" x2="16" y2="23"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="w-10 h-10 bg-primary rounded-full flex items-center justify-center text-white">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user