baiyue-logistics-chat/templates/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, interactive-widget=resizes-content">
    <meta name="theme-color" content="#315fd5">
    <title>柏悦智能物流客服系统</title>
    <link rel="icon" href="{{ url_for('static', filename='fa.jpg') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/theme.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/chat.css') }}">
</head>
<body>
<div class="chat-container">
    <aside class="left-panel" aria-label="历史对话">
        <a class="brand" href="/" aria-label="柏悦物流首页"><span class="brand-mark"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m4 7 8-4 8 4v10l-8 4-8-4Z"/><path d="m4 7 8 4 8-4M12 11v10M8 5l8 4"/></svg></span><span><span class="brand-name">柏悦物流</span><span class="brand-caption">BAIYUE LOGISTICS</span></span></a>
        <button type="button" class="new-chat-btn">新建对话</button>
        <h2 class="panel-title">历史对话</h2>
        <div class="history-search-wrap">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 4 4"/></svg>
            <input id="history-search" class="history-search" type="search" aria-label="搜索历史对话" placeholder="搜索历史对话..." autocomplete="off">
        </div>
        <div class="history-wrap" id="historyWrap"></div>
        <div class="sidebar-footer">
            <button type="button" id="customer-account" class="customer-account">登录</button>
            <button type="button" class="clear-all-btn">清空全部历史</button>
        </div>
    </aside>
    <button class="sidebar-backdrop" type="button" aria-label="关闭历史侧栏"></button>
    <main class="main-chat">
        <header class="chat-title">
            <button class="toggle-divider" type="button" aria-label="切换历史侧栏" aria-expanded="true"></button>
            <div class="header-copy"><div class="header-kicker">BAIYUE · CUSTOMER SUPPORT</div><span id="app-title">柏悦物流智能助手</span></div>
            <div class="title-actions">
                <button type="button" id="notifications-toggle" class="theme-toggle" title="开启浏览器通知" aria-label="开启浏览器通知" aria-pressed="false">🔔</button>
                <span class="service-label"><span class="status-dot" aria-hidden="true"></span><span data-i18n="serviceTag">智能客服</span></span>
                <button type="button" id="lang-toggle" class="theme-toggle lang-toggle" title="中英文切换（Ctrl+L）">中</button>
                <button type="button" id="font-toggle" class="theme-toggle" title="字体大小">16px</button>
                <button type="button" id="theme-toggle" class="theme-toggle" title="切换深色/浅色">☾</button>
            </div>
        </header>
        <div id="chatDom" role="log" aria-live="polite" aria-label="聊天内容">
            <section class="ai-welcome-card">
                <div class="ai-welcome-top">
                    <div class="ai-avatar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m4 7 8-4 8 4v10l-8 4-8-4Z"/><path d="m4 7 8 4 8-4M12 11v10M8 5l8 4"/></svg></div>
                    <div class="welcome-eyebrow">中欧 · 英国物流服务</div>
                    <h3>物流问题，随时为您解答</h3>
                </div>
            </section>
        </div>
        <footer class="composer">
            <div id="human-session" class="human-session" role="status" hidden><span id="human-session-label"></span><button id="return-ai" type="button">返回 AI 问答</button></div>
            <div class="composer-toolbar"><div class="hot-bar">
                <button type="button" class="hot-capsule" data-question-index="0" data-i18n="footerTrack">查入仓码</button>
                <button type="button" class="hot-capsule" data-question-index="1" data-i18n="footerQuote">专线报价</button>
                <button type="button" class="hot-capsule" data-question-index="2" data-i18n="footerException">异常处理</button>
                <button type="button" class="hot-capsule" onclick="showHuman()" data-i18n="footerHuman">联系人工</button>
            </div><button id="voice-toggle" class="voice-toggle" type="button" aria-label="语音输入" aria-pressed="false" title="语音输入">🎙</button></div>
            <div class="input-area">
                <button type="button" id="upload-btn" title="发送附件" aria-label="发送附件">＋</button>
                <div class="emoji-control"><button id="emoji-toggle" class="icon-button" type="button" aria-label="选择表情" aria-expanded="false" aria-controls="emoji-panel">😊</button><div id="emoji-panel" class="emoji-picker" hidden></div></div>
                <input type="file" id="upload-input" accept="image/*,.pdf,.txt,.csv" hidden>
                <textarea id="input-text" rows="1" enterkeyhint="send" aria-label="输入问题或入仓码" placeholder="输入入仓码或问题…"></textarea>
                <button id="voice-hold" class="voice-hold" type="button">按住说话</button>
                <button type="button" id="send-button">发送</button>
            </div>
            <p id="composer-status" class="composer-status" role="status" hidden></p>
        </footer>
        <div id="voice-panel" class="voice-panel" role="status" aria-live="polite" hidden><span class="voice-wave" aria-hidden="true">▂ ▆ █ ▆ ▂</span><p id="voice-label"></p><span id="voice-clock"></span></div>
        <button type="button" id="to-bottom" class="to-bottom" title="回到底部" aria-label="回到底部">↓</button>
    </main>
</div>
<div id="customer-login" class="customer-login-overlay" hidden>
    <section class="customer-login-dialog" role="dialog" aria-modal="true" aria-labelledby="customer-login-title">
        <h2 id="customer-login-title">登录</h2>
        <form id="customer-login-form">
            <label for="customer-username" id="customer-username-label">账号</label>
            <input id="customer-username" name="username" type="text" autocomplete="username" placeholder="请输入账号" maxlength="80" required>
            <label for="customer-password" id="customer-password-label">密码</label>
            <input id="customer-password" name="password" type="password" autocomplete="current-password" placeholder="请输入密码" maxlength="256" required>
            <p id="customer-error" role="alert" hidden></p>
            <div class="customer-login-actions"><button type="button" id="customer-cancel">取消</button><button type="submit" id="customer-submit">登录</button></div>
        </form>
    </section>
</div>
<script src="{{ url_for('static', filename='js/support.js') }}"></script>
<script src="{{ url_for('static', filename='js/visitor.js') }}"></script>
<script src="{{ url_for('static', filename='js/customer.js') }}"></script>
<script src="{{ url_for('static', filename='js/drafts.js') }}"></script>
<script src="{{ url_for('static', filename='js/voice.js') }}"></script>
<script src="{{ url_for('static', filename='js/chat.js') }}"></script>
</body>
</html>