46 lines
2.3 KiB
HTML
46 lines
2.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>聊天窗口</title>
|
||
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/chat.css') }}">
|
||
|
|
<!-- 引入 Socket.IO 客户端库 -->
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.min.js" integrity="sha512-OE+tNYgJBSy/R8gSSzIjcC+3hkT0lj3cPnOeYv50E6n0Pzv1tq9I7YytCTv19Uaz1Lr5un2ngc7IQXBuT7GqdQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||
|
|
<!-- 引入 Vue.js -->
|
||
|
|
<script src="{{ url_for('static', filename='js/vue.js') }}"></script>
|
||
|
|
<!-- 引入 Element UI -->
|
||
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/element/theme-chalk.css') }}" />
|
||
|
|
<script src="{{ url_for('static', filename='js/element-ui.js') }}"></script>
|
||
|
|
<!-- 引入 chat.js -->
|
||
|
|
<script src="{{ url_for('static', filename='js/chat.js') }}" defer></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="chat-app">
|
||
|
|
<div id="chat-widget">
|
||
|
|
<button id="toggle-chat" @click="toggleChat">打开聊天</button>
|
||
|
|
<div id="chat-container" class="hidden">
|
||
|
|
<div id="messages">
|
||
|
|
<!-- 消息气泡将动态添加到这里 -->
|
||
|
|
<div v-for="(message, index) in messages" :key="index" class="message" :class="message.type">
|
||
|
|
<div class="bubble">
|
||
|
|
[[ message.content ]]
|
||
|
|
<div class="message-time">[[ message.timetext ]]</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="status-indicator">[[ status ]]</div>
|
||
|
|
<div id="input-area">
|
||
|
|
<button id="record-btn" @click="toggleRecording">
|
||
|
|
<img id="record-icon" :src="isRecording ? '/static/images/recording.png' : '/static/images/record.png'" alt="录音">
|
||
|
|
</button>
|
||
|
|
<input type="text" id="message-input" placeholder="请输入内容..." v-model="newMessage">
|
||
|
|
<button id="send-btn" @click="sendMessage">
|
||
|
|
<img src="{{ url_for('static', filename='images/send.png') }}" alt="发送">
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|