18879694722
/
ai-salesperson-assistant


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>话术决策助手 - AI实验室</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        :root {
            --primary: #64a0ff;
            --primary-light: rgba(100, 160, 255, 0.1);
            --dark: #0a192f;
            --dark-light: #112240;
            --gray: #8892b0;
            --light-gray: #f8f9fa;
            --white: #ffffff;
            --blue: #64a0ff;
            --blue-light: rgba(100, 160, 255, 0.15);
            --yellow: #ffd43b;
            --orange: #ff922b;
            --purple: #9c36b5;
            --shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            --shadow-primary: 0 4px 20px rgba(100, 160, 255, 0.2);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
        }
        
        body {
            background-color: #f0f5ff;
            color: var(--dark);
            line-height: 1.6;
            overflow-x: hidden;
            background: linear-gradient(135deg, #e6f0ff 0%, #f5f9ff 100%);
            min-height: 100vh;
            padding: 20px 0;
        }
        
        .container {
            max-width: 480px;
            margin: 0 auto;
            padding: 0 16px 30px;
            position: relative;
        }
        
        /* 顶部导航 */
        .app-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
            margin-bottom: 15px;
            border-bottom: 1px solid rgba(10, 25, 47, 0.05);
        }
        
        .header-title {
            font-size: 22px;
            font-weight: 700;
            color: var(--dark);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .header-title i {
            color: var(--primary);
            background: var(--primary-light);
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* 场景选择 */
        .scene-selector {
            background: var(--white);
            border-radius: 20px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: var(--shadow);
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(100, 160, 255, 0.2);
        }
        
        .scene-options {
            display: flex;
            gap: 15px;
            margin-top: 10px;
        }
        
        .scene-option {
            flex: 1;
            padding: 15px;
            border-radius: 15px;
            background: var(--light-gray);
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid rgba(100, 160, 255, 0.1);
        }
        
        .scene-option.active {
            background: var(--primary-light);
            border-color: var(--primary);
            box-shadow: var(--shadow-primary);
        }
        
        .scene-option i {
            font-size: 28px;
            margin-bottom: 10px;
            color: var(--primary);
        }
        
        .scene-option h3 {
            font-size: 16px;
            margin-bottom: 5px;
        }
        
        .scene-option p {
            font-size: 13px;
            color: var(--gray);
        }
        
        /* 对话聊天区 */
        .chat-area {
            background: var(--white);
            border-radius: 20px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: var(--shadow);
            height: 350px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 15px;
            border: 1px solid rgba(100, 160, 255, 0.2);
        }
        
        .chat-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 15px;
            color: var(--dark);
            display: flex;
            align-items: center;
            gap: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(100, 160, 255, 0.1);
        }
        
        .chat-title i {
            color: var(--primary);
        }
        
        .chat-message {
            max-width: 85%;
            padding: 14px 18px;
            border-radius: 18px;
            position: relative;
            animation: fadeIn 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .customer-message {
            background: linear-gradient(135deg, #e6f0ff, #ebf2ff);
            align-self: flex-start;
            border-bottom-left-radius: 5px;
            border-left: 3px solid var(--blue);
        }
        
        .assistant-message {
            background: linear-gradient(135deg, #e6f7ff, #ebf9ff);
            border: 1px solid rgba(100, 160, 255, 0.3);
            align-self: flex-end;
            border-bottom-right-radius: 5px;
            border-right: 3px solid var(--primary);
        }
        
        .message-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
            font-weight: 600;
        }
        
        .customer-header .icon {
            background: var(--blue-light);
            color: var(--blue);
        }
        
        .assistant-header .icon {
            background: var(--primary-light);
            color: var(--primary);
        }
        
        .message-header .icon {
            width: 28px;
            height: 28px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }
        
        .message-content {
            line-height: 1.5;
        }
        
        .message-time {
            font-size: 11px;
            color: var(--gray);
            margin-top: 8px;
            text-align: right;
        }
        
        /* 客户标签编辑区 */
        .tags-area {
            background: var(--light-gray);
            border-radius: 15px;
            padding: 15px;
            margin-top: 10px;
            border: 1px solid rgba(100, 160, 255, 0.1);
        }
        
        .tags-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .tags-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--dark);
        }
        
        .input-tags {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        
        .tag {
            background: var(--primary-light);
            color: var(--primary);
            padding: 6px 12px 6px 8px;
            border-radius: 20px;
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            transition: all 0.2s ease;
            border: 1px solid rgba(100, 160, 255, 0.2);
        }
        
        .tag:hover {
            background: rgba(100, 160, 255, 0.3);
        }
        
        .tag .delete {
            font-size: 12px;
            margin-left: 5px;
            opacity: 0.7;
        }
        
        .tag .delete:hover {
            opacity: 1;
        }
        
        .add-tag {
            background: rgba(136, 146, 176, 0.1);
            color: var(--gray);
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .add-tag:hover {
            background: rgba(136, 146, 176, 0.2);
        }
        
        /* 输入工作区 */
        .input-area {
            background: var(--white);
            border-radius: 20px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: var(--shadow);
            border: 1px solid rgba(100, 160, 255, 0.2);
        }
        
        .input-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 15px;
            color: var(--dark);
            display: flex;
            align-items: center;
            gap: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(100, 160, 255, 0.1);
        }
        
        .input-title i {
            color: var(--primary);
        }
        
        .role-selector {
            display: flex;
            background: var(--light-gray);
            border-radius: 12px;
            padding: 4px;
            margin-bottom: 15px;
        }
        
        .role-btn {
            flex: 1;
            padding: 10px;
            text-align: center;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
        }
        
        .role-btn.active {
            background: var(--white);
            box-shadow: var(--shadow);
            color: var(--primary);
        }
        
        .input-field {
            position: relative;
        }
        
        .text-input {
            width: 100%;
            height: 120px;
            padding: 15px;
            border-radius: 15px;
            border: 1px solid rgba(136, 146, 176, 0.2);
            background: var(--light-gray);
            resize: none;
            font-size: 16px;
            color: var(--dark);
            transition: all 0.3s ease;
        }
        
        .text-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(100, 160, 255, 0.2);
        }
        
        /* 策略卡片组 */
        .strategy-area {
            margin-bottom: 25px;
        }
        
        .strategy-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 15px;
            color: var(--dark);
            display: flex;
            align-items: center;
            gap: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(100, 160, 255, 0.1);
        }
        
        .strategy-title i {
            color: var(--primary);
        }
        
        .cards-container {
            position: relative;
            height: 320px;
            perspective: 1000px;
        }
        
        .strategy-card {
            position: absolute;
            width: 100%;
            height: 280px;
            border-radius: 20px;
            padding: 25px;
            box-shadow: var(--shadow);
            display: flex;
            flex-direction: column;
            transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), 
                        opacity 0.4s ease, 
                        box-shadow 0.3s ease;
            backface-visibility: hidden;
            cursor: pointer;
            border: 1px solid rgba(100, 160, 255, 0.2);
        }
        
        .card-aggressive {
            background: linear-gradient(135deg, #eef6ff, #f0f8ff);
            border-top: 4px solid var(--blue);
            z-index: 30;
        }
        
        .card-neutral {
            background: linear-gradient(135deg, #fff9e6, #fffbf0);
            border-top: 4px solid var(--yellow);
            transform: translateY(20px) scale(0.95);
            z-index: 20;
        }
        
        .card-conservative {
            background: linear-gradient(135deg, #f9f0ff, #fdf5ff);
            border-top: 4px solid var(--purple);
            transform: translateY(40px) scale(0.9);
            z-index: 10;
        }
        
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .card-title {
            font-size: 18px;
            font-weight: 700;
        }
        
        .card-icon {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }
        
        .card-content {
            flex: 1;
            overflow-y: auto;
            padding-right: 10px;
        }
        
        .card-content p {
            margin-bottom: 15px;
            line-height: 1.7;
            color: #333;
        }
        
        .card-highlight {
            background: rgba(10, 25, 47, 0.05);
            padding: 12px 15px;
            border-radius: 12px;
            border-left: 3px solid var(--primary);
            margin: 15px 0;
            font-weight: 500;
            line-height: 1.6;
        }
        
        .card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid rgba(136, 146, 176, 0.1);
        }
        
        .card-hint {
            font-size: 14px;
            color: var(--gray);
        }
        
        /* 卡片导航点 */
        .card-navigation {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 15px;
        }
        
        .card-nav-btn {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--light-gray);
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .card-nav-btn.active {
            background: var(--primary);
            transform: scale(1.2);
        }
        
        /* 操作按钮 */
        .action-buttons {
            display: flex;
            gap: 15px;
            margin-top: 25px;
        }
        
        .action-btn {
            flex: 1;
            height: 50px;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .save-btn {
            background: var(--primary);
            color: var(--dark);
            border: none;
            box-shadow: 0 4px 15px rgba(100, 160, 255, 0.3);
        }
        
        .save-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(100, 160, 255, 0.4);
        }
        
        .history-btn {
            background: var(--white);
            color: var(--dark);
            border: 2px solid var(--primary);
            box-shadow: 0 4px 15px rgba(100, 160, 255, 0.1);
        }
        
        .history-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(100, 160, 255, 0.2);
        }
        
        /* 响应式调整 */
        @media (max-width: 380px) {
            .container {
                padding: 0 12px 25px;
            }
            
            .scene-options {
                flex-direction: column;
            }
            
            .cards-container {
                height: 300px;
            }
            
            .strategy-card {
                height: 260px;
                padding: 20px;
            }
            
            .chat-area {
                height: 320px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 顶部导航 -->
        <header class="app-header">
            <div class="header-title">
                <i class="fas fa-robot"></i>
                <h1>话术决策助手</h1>
            </div>
        </header>
        
        <!-- 场景选择 -->
        <section class="scene-selector">
            <h2 class="input-title">
                <i class="fas fa-dharmachakra"></i>
                选择对话场景
            </h2>
            <div class="scene-options">
                <div class="scene-option active" data-scene="first-contact">
                    <i class="fas fa-handshake"></i>
                    <h3>首次接触</h3>
                    <p>初次沟通建立信任</p>
                </div>
                <div class="scene-option" data-scene="deep-talk">
                    <i class="fas fa-comments"></i>
                    <h3>深度交流</h3>
                    <p>深入挖掘客户需求</p>
                </div>
            </div>
        </section>
        
        <!-- 客户对话分析 -->
        <section class="input-area">
            <h2 class="chat-title">
                <i class="fas fa-comments"></i>
                客户对话分析
            </h2>
            <div class="chat-area" id="chatContainer">
                <div class="chat-message customer-message">
                    <div class="message-header customer-header">
                        <div class="icon"><i class="fas fa-user"></i></div>
                        <div>客户</div>
                    </div>
                    <div class="message-content">您好，我对贵酒店的豪华套房很感兴趣，但觉得价格偏高，能否提供一些优惠？</div>
                    <div class="message-time">10:25 AM</div>
                </div>
                <div class="chat-message assistant-message">
                    <div class="message-header assistant-header">
                        <div class="icon"><i class="fas fa-headset"></i></div>
                        <div>销售顾问</div>
                    </div>
                    <div class="message-content">感谢您对我们豪华套房的关注！我们的套房拥有全景海景和私人管家服务，目前预订可享8折优惠，您觉得如何？</div>
                    <div class="message-time">10:26 AM</div>
                </div>
                <div class="chat-message customer-message">
                    <div class="message-header customer-header">
                        <div class="icon"><i class="fas fa-user"></i></div>
                        <div>客户</div>
                    </div>
                    <div class="message-content">8折还是有点高，我看到其他酒店类似房型有更优惠的价格。</div>
                    <div class="message-time">10:27 AM</div>
                </div>
                <div class="chat-message assistant-message">
                    <div class="message-header assistant-header">
                        <div class="icon"><i class="fas fa-headset"></i></div>
                        <div>销售顾问</div>
                    </div>
                    <div class="message-content">我理解您的考虑。我们的套房包含双人早餐和免费SPA体验，这些增值服务能让您的住宿体验更加完美。</div>
                    <div class="message-time">10:28 AM</div>
                </div>
                <div class="chat-message customer-message">
                    <div class="message-header customer-header">
                        <div class="icon"><i class="fas fa-user"></i></div>
                        <div>客户</div>
                    </div>
                    <div class="message-content">这个听起来不错，我考虑一下。</div>
                    <div class="message-time">10:29 AM</div>
                </div>
                <div class="chat-message assistant-message">
                    <div class="message-header assistant-header">
                        <div class="icon"><i class="fas fa-headset"></i></div>
                        <div>销售顾问</div>
                    </div>
                    <div class="message-content">好的，如果您今天预订，我们还可以额外赠送您一次下午茶体验。</div>
                    <div class="message-time">10:30 AM</div>
                </div>
            </div>
            
            <!-- 客户标签编辑区 -->
            <div class="tags-area">
                <div class="tags-header">
                    <div class="tags-title">客户标签</div>
                    <div class="add-tag" id="addTagBtn">
                        <i class="fas fa-plus"></i>
                        <span>添加标签</span>
                    </div>
                </div>
                <div class="input-tags" id="tagsContainer">
                    <div class="tag" style="background: rgba(100, 160, 255, 0.15); color: #64a0ff;">
                        <i class="fas fa-user"></i>
                        <span>VIP客户</span>
                        <span class="delete"><i class="fas fa-times"></i></span>
                    </div>
                    <div class="tag" style="background: rgba(255, 212, 59, 0.15); color: #ffd43b;">
                        <i class="fas fa-calendar"></i>
                        <span>旺季时段</span>
                        <span class="delete"><i class="fas fa-times"></i></span>
                    </div>
                    <div class="tag" style="background: rgba(156, 54, 181, 0.15); color: #9c36b5;">
                        <i class="fas fa-percent"></i>
                        <span>价格敏感</span>
                        <span class="delete"><i class="fas fa-times"></i></span>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 输入工作区 -->
        <section class="input-area">
            <h2 class="input-title">
                <i class="fas fa-comment-dots"></i>
                输入对话内容
            </h2>
            
            <div class="role-selector">
                <div class="role-btn active" id="customerRoleBtn">客户消息</div>
                <div class="role-btn" id="assistantRoleBtn">销售回复</div>
            </div>
            
            <div class="input-field">
                <textarea class="text-input" placeholder="输入对话内容..." id="messageInput"></textarea>
            </div>
            
            <div class="action-buttons">
                <div class="action-btn save-btn" onclick="sendMessage()">
                    <i class="fas fa-paper-plane"></i>
                    <span>发送消息</span>
                </div>
            </div>
        </section>
        
        <!-- 策略卡片组 -->
        <section class="strategy-area">
            <h2 class="strategy-title">
                <i class="fas fa-cards"></i>
                推荐应对策略
            </h2>
            <div class="cards-container">
                <div class="strategy-card card-aggressive" onclick="activateCard(0)">
                    <div class="card-header">
                        <div class="card-title">主动型策略</div>
                        <div class="card-icon" style="background: var(--blue-light); color: var(--blue);">
                            <i class="fas fa-bolt"></i>
                        </div>
                    </div>
                    <div class="card-content">
                        <p>直接强调酒店独特价值，限量优惠制造紧迫感：</p>
                        <div class="card-highlight">
                            "我们的豪华套房拥有全景海景和私人管家服务，目前仅剩3间，现在预订可享8折限时优惠！"
                        </div>
                        <p><strong>适用场景：</strong>客户表现出明确兴趣，决策周期短</p>
                        <p><strong>优势：</strong>快速成交，提升单笔订单价值</p>
                    </div>
                    <div class="card-footer">
                        <div class="card-hint">成功率: 68%</div>
                        <div class="card-hint"><i class="fas fa-clock"></i> 推荐指数: ⭐⭐⭐⭐</div>
                    </div>
                </div>
                
                <div class="strategy-card card-neutral" onclick="activateCard(1)">
                    <div class="card-header">
                        <div class="card-title">平衡型策略</div>
                        <div class="card-icon" style="background: rgba(255, 212, 59, 0.15); color: var(--yellow);">
                            <i class="fas fa-balance-scale"></i>
                        </div>
                    </div>
                    <div class="card-content">
                        <p>提供阶梯式优惠，引导客户选择：</p>
                        <div class="card-highlight">
                            "如果您连住3晚以上，我们可以提供免费升级和早餐。另外，会员可额外享受9折优惠，现在注册立享福利！"
                        </div>
                        <p><strong>适用场景：</strong>客户在多个选项间犹豫</p>
                        <p><strong>优势：</strong>平衡双方利益，建立长期关系</p>
                    </div>
                    <div class="card-footer">
                        <div class="card-hint">成功率: 82%</div>
                        <div class="card-hint"><i class="fas fa-clock"></i> 推荐指数: ⭐⭐⭐⭐⭐</div>
                    </div>
                </div>
                
                <div class="strategy-card card-conservative" onclick="activateCard(2)">
                    <div class="card-header">
                        <div class="card-title">保守型策略</div>
                        <div class="card-icon" style="background: rgba(156, 54, 181, 0.15); color: var(--purple);">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                    </div>
                    <div class="card-content">
                        <p>提供灵活方案，降低决策风险：</p>
                        <div class="card-highlight">
                            "我们提供24小时免费取消政策，现在预订可锁定当前价格。如果您对入住体验有任何不满意，我们将提供额外补偿。"
                        </div>
                        <p><strong>适用场景：</strong>客户犹豫不决，决策周期长</p>
                        <p><strong>优势：</strong>降低客户风险感知，提高转化率</p>
                    </div>
                    <div class="card-footer">
                        <div class="card-hint">成功率: 75%</div>
                        <div class="card-hint"><i class="fas fa-clock"></i> 推荐指数: ⭐⭐⭐⭐</div>
                    </div>
                </div>
            </div>
            
            <!-- 卡片导航点 -->
            <div class="card-navigation">
                <div class="card-nav-btn active" onclick="activateCard(0)"></div>
                <div class="card-nav-btn" onclick="activateCard(1)"></div>
                <div class="card-nav-btn" onclick="activateCard(2)"></div>
            </div>
            
            <!-- 操作按钮 -->
            <div class="action-buttons">
                <div class="action-btn save-btn" onclick="saveRecord()">
                    <i class="fas fa-save"></i>
                    <span>保存记录</span>
                </div>
                <div class="action-btn history-btn" onclick="viewHistory()">
                    <i class="fas fa-history"></i>
                    <span>查看历史</span>
                </div>
            </div>
        </section>
    </div>

    <script>
        // 初始化变量
        let selectedColor = '#64a0ff';
        
        // 场景选择功能
        document.querySelectorAll('.scene-option').forEach(item => {
            item.addEventListener('click', function() {
                document.querySelectorAll('.scene-option').forEach(i => i.classList.remove('active'));
                this.classList.add('active');
                
                // 更新策略内容
                const scene = this.getAttribute('data-scene');
                updateStrategies(scene);
            });
        });
        
        // 更新策略内容
        function updateStrategies(scene) {
            const strategies = {
                "first-contact": {
                    aggressive: "主动介绍酒店特色和限时优惠，强调独特卖点",
                    neutral: "提供套餐选择，引导客户了解不同房型",
                    conservative: "邀请客户参观虚拟酒店，提供详细资料"
                },
                "deep-talk": {
                    aggressive: "深度挖掘客户需求，提供定制化解决方案",
                    neutral: "建立信任关系，分享成功案例和客户评价",
                    conservative: "提供专业建议，解答客户深层疑问"
                }
            };
            
            const sceneTitles = {
                "first-contact": "首次接触",
                "deep-talk": "深度交流"
            };
            
            const sceneTitle = sceneTitles[scene] || "当前场景";
            
            // 更新策略内容
            document.querySelector('.card-aggressive .card-highlight').textContent = 
                strategies[scene].aggressive;
            document.querySelector('.card-neutral .card-highlight').textContent = 
                strategies[scene].neutral;
            document.querySelector('.card-conservative .card-highlight').textContent = 
                strategies[scene].conservative;
                
            // 更新策略标题
            document.querySelector('.strategy-title').innerHTML = 
                `<i class="fas fa-cards"></i> ${sceneTitle} - 推荐应对策略`;
        }
        
        // 激活卡片功能
        function activateCard(index) {
            const cards = document.querySelectorAll('.strategy-card');
            const navBtns = document.querySelectorAll('.card-nav-btn');
            
            cards.forEach((c, i) => {
                if (i === index) {
                    c.style.transform = 'translateY(0) scale(1)';
                    c.style.zIndex = '30';
                } else if (Math.abs(i - index) === 1) {
                    c.style.transform = `translateY(${20 * Math.abs(i - index)}px) scale(${1 - 0.05 * Math.abs(i - index)})`;
                    c.style.zIndex = '20';
                } else {
                    c.style.transform = `translateY(${40 * Math.abs(i - index)}px) scale(${1 - 0.1 * Math.abs(i - index)})`;
                    c.style.zIndex = '10';
                }
            });
            
            navBtns.forEach((btn, i) => {
                if (i === index) {
                    btn.classList.add('active');
                } else {
                    btn.classList.remove('active');
                }
            });
        }
        
        // 角色切换功能
        const customerRoleBtn = document.getElementById('customerRoleBtn');
        const assistantRoleBtn = document.getElementById('assistantRoleBtn');
        
        customerRoleBtn.addEventListener('click', function() {
            customerRoleBtn.classList.add('active');
            assistantRoleBtn.classList.remove('active');
        });
        
        assistantRoleBtn.addEventListener('click', function() {
            assistantRoleBtn.classList.add('active');
            customerRoleBtn.classList.remove('active');
        });
        
        // 标签删除功能
        function setupTagDeletion() {
            document.querySelectorAll('.tag .delete').forEach(deleteBtn => {
                deleteBtn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    this.closest('.tag').remove();
                });
            });
        }
        
        // 初始化标签删除功能
        setupTagDeletion();
        
        // 添加新标签功能
        const addTagBtn = document.getElementById('addTagBtn');
        const tagsContainer = document.getElementById('tagsContainer');
        
        addTagBtn.addEventListener('click', function() {
            const newTag = document.createElement('div');
            newTag.className = 'tag';
            newTag.style.background = 'rgba(100, 160, 255, 0.15)';
            newTag.style.color = '#64a0ff';
            newTag.innerHTML = `
                <i class="fas fa-tag"></i>
                <span>新标签</span>
                <span class="delete"><i class="fas fa-times"></i></span>
            `;
            
            // 添加删除事件
            newTag.querySelector('.delete').addEventListener('click', function(e) {
                e.stopPropagation();
                this.closest('.tag').remove();
            });
            
            tagsContainer.appendChild(newTag);
        });
        
        // 发送消息功能
        const messageInput = document.getElementById('messageInput');
        const chatContainer = document.getElementById('chatContainer');
        
        function sendMessage() {
            const message = messageInput.value.trim();
            if (message) {
                // 确定消息角色
                const isCustomer = customerRoleBtn.classList.contains('active');
                const role = isCustomer ? 'customer' : 'assistant';
                
                // 创建新消息元素
                const newMessage = document.createElement('div');
                newMessage.className = `chat-message ${role}-message`;
                
                // 获取当前时间
                const now = new Date();
                const timeString = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`;
                
                // 消息头部
                let headerHtml = '';
                if (isCustomer) {
                    headerHtml = `
                        <div class="message-header customer-header">
                            <div class="icon"><i class="fas fa-user"></i></div>
                            <div>客户</div>
                        </div>
                    `;
                } else {
                    headerHtml = `
                        <div class="message-header assistant-header">
                            <div class="icon"><i class="fas fa-headset"></i></div>
                            <div>销售顾问</div>
                        </div>
                    `;
                }
                
                newMessage.innerHTML = `
                    ${headerHtml}
                    <div class="message-content">${message}</div>
                    <div class="message-time">${timeString}</div>
                `;
                
                // 添加到聊天容器
                chatContainer.appendChild(newMessage);
                
                // 清空输入框
                messageInput.value = '';
                
                // 滚动到底部
                chatContainer.scrollTop = chatContainer.scrollHeight;
                
                // 如果是销售发送消息，模拟客户回复
                if (!isCustomer) {
                    setTimeout(() => {
                        const customerReply = document.createElement('div');
                        customerReply.className = 'chat-message customer-message';
                        
                        // 模拟回复内容
                        const replies = [
                            "这个优惠包含早餐吗？",
                            "我需要和家人商量一下",
                            "能否提供免费接机服务？",
                            "价格还是有点高，能再优惠些吗？",
                            "你们的取消政策是怎样的？",
                            "如果我今天预订，还有额外优惠吗？",
                            "套餐包含哪些服务？",
                            "有更经济的房型推荐吗？"
                        ];
                        const randomReply = replies[Math.floor(Math.random() * replies.length)];
                        
                        customerReply.innerHTML = `
                            <div class="message-header customer-header">
                                <div class="icon"><i class="fas fa-user"></i></div>
                                <div>客户</div>
                            </div>
                            <div class="message-content">${randomReply}</div>
                            <div class="message-time">${now.getHours()}:${(now.getMinutes() + 1).toString().padStart(2, '0')}</div>
                        `;
                        
                        chatContainer.appendChild(customerReply);
                        chatContainer.scrollTop = chatContainer.scrollHeight;
                    }, 1500);
                }
                
                // 重新聚焦输入框
                messageInput.focus();
            }
        }
        
        // 支持按Enter发送消息（Shift+Enter换行）
        messageInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                sendMessage();
            }
        });
        
        // 保存记录功能
        function saveRecord() {
            // 创建动画效果
            const saveBtn = document.querySelector('.save-btn');
            saveBtn.innerHTML = '<i class="fas fa-check"></i> 已保存';
            saveBtn.style.background = '#4da3ff';
            
            setTimeout(() => {
                saveBtn.innerHTML = '<i class="fas fa-save"></i> 保存记录';
                saveBtn.style.background = '';
            }, 2000);
        }
        
        // 查看历史功能
        function viewHistory() {
            alert('历史记录功能即将开放，正在开发中...');
        }
        
        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化卡片位置
            activateCard(0);
            
            // 滚动到聊天底部
            chatContainer.scrollTop = chatContainer.scrollHeight;
        });
    </script>
</body>
</html>