bella/test-chat.html at main · e-lsco/bella · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天界面测试</title>
    <link rel="stylesheet" href="chatStyles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        body {
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            min-height: 100vh;
        }
        .test-controls {
            position: fixed;
            top: 20px;
            left: 20px;
            background: rgba(255, 255, 255, 0.9);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            z-index: 2000;
        }
        .test-btn {
            display: block;
            width: 100%;
            margin: 10px 0;
            padding: 10px 20px;
            background: #ff6b9d;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
        }
        .test-btn:hover {
            background: #ff5a8a;
        }
        .status {
            margin-top: 10px;
            padding: 10px;
            background: #f0f0f0;
            border-radius: 5px;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="test-controls">
        <h3>聊天界面测试</h3>
        <button class="test-btn" onclick="showChat()">显示聊天界面</button>
        <button class="test-btn" onclick="hideChat()">隐藏聊天界面</button>
        <button class="test-btn" onclick="toggleChat()">切换聊天界面</button>
        <button class="test-btn" onclick="checkStatus()">检查状态</button>
        <div class="status" id="status">等待操作...</div>
    </div>

    <script src="chatInterface.js"></script>
    <script>
        let chatInterface;

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('测试页面加载完成');

            try {
                chatInterface = new ChatInterface();
                console.log('ChatInterface 创建成功:', chatInterface);
                updateStatus('ChatInterface 创建成功');

                // 设置消息回调
                chatInterface.onMessageSend = function(message) {
                    console.log('收到消息:', message);
                    setTimeout(() => {
                        chatInterface.addMessage('assistant', '测试回复: ' + message);
                    }, 1000);
                };

            } catch (error) {
                console.error('ChatInterface 创建失败:', error);
                updateStatus('ChatInterface 创建失败: ' + error.message);
            }
        });

        function showChat() {
            if (chatInterface) {
                console.log('尝试显示聊天界面');
                chatInterface.show();
                updateStatus('调用 show() 方法，当前状态: ' + chatInterface.getVisibility());
            } else {
                updateStatus('ChatInterface 未初始化');
            }
        }

        function hideChat() {
            if (chatInterface) {
                console.log('尝试隐藏聊天界面');
                chatInterface.hide();
                updateStatus('调用 hide() 方法，当前状态: ' + chatInterface.getVisibility());
            } else {
                updateStatus('ChatInterface 未初始化');
            }
        }

        function toggleChat() {
            if (chatInterface) {
                console.log('尝试切换聊天界面');
                chatInterface.toggle();
                updateStatus('调用 toggle() 方法，当前状态: ' + chatInterface.getVisibility());
            } else {
                updateStatus('ChatInterface 未初始化');
            }
        }

        function checkStatus() {
            if (chatInterface) {
                const isVisible = chatInterface.getVisibility();
                const className = chatInterface.chatContainer.className;
                const computedStyle = window.getComputedStyle(chatInterface.chatContainer);
                const opacity = computedStyle.opacity;
                const transform = computedStyle.transform;
                const zIndex = computedStyle.zIndex;

                const statusText = `
                    可见性: ${isVisible}
                    类名: ${className}
                    透明度: ${opacity}
                    变换: ${transform}
                    层级: ${zIndex}
                `;

                console.log('聊天界面状态:', statusText);
                updateStatus(statusText);
            } else {
                updateStatus('ChatInterface 未初始化');
            }
        }

        function updateStatus(text) {
            const statusEl = document.getElementById('status');
            statusEl.textContent = text;
        }
    </script>
</body>
</html>