root/webRtc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

【m】布局修改完成确认

Browse Source
This commit is contained in:
zhangzheng
2026-03-03 18:06:20 +08:00
parent a0ab9b44f1
commit b0b88dc88d
6 changed files with 135 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
WebApp/client/public/images/screenshot.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 274 KiB

4
WebApp/client/public/onebyone/index.html
View File

@@ -360,9 +360,11 @@
-->
<div class="p-4 border-t border-white/10">
<div class="glass rounded-2xl flex items-center gap-2 p-2">
<button class="w-8 h-8 rounded-full hover:bg-white/10 flex items-center justify-center text-gray-400 transition-colors">
<button class="w-8 h-8 rounded-full hover:bg-white/10 flex items-center justify-center text-gray-400 transition-colors" onclick="openImagePicker()">
<i class="fas fa-plus"></i>
</button>
<!-- 隐藏的文件输入元素 -->
<input type="file" id="imageInput" accept="image/*" class="hidden" onchange="handleImageUpload(event)">
<!-- [INPUT_FIELD] [BIND: inputValue] [EVENT: onEnter => sendMessage()] -->
<input type="text"
id="chatInput"

55
WebApp/client/public/onebyone/main.js
View File

@@ -180,6 +180,61 @@ function bindDomEvents() {
}
};
// 打开图片选择器
window.openImagePicker = function() {
document.getElementById('imageInput').click();
};
// 处理图片上传
window.handleImageUpload = function(event) {
const file = event.target.files[0];
if (file) {
// 检查文件类型
if (!file.type.startsWith('image/')) {
showNotification('请选择图片文件', 3000);
return;
}
// 检查文件大小（限制为5MB）
if (file.size > 5 * 1024 * 1024) {
showNotification('图片文件不能超过5MB', 3000);
return;
}
// 读取图片文件
const reader = new FileReader();
reader.onload = function(e) {
const imageUrl = e.target.result;
sendImageMessage(imageUrl, file.name);
};
reader.readAsDataURL(file);
// 重置文件输入
event.target.value = '';
}
};
// 发送图片消息
function sendImageMessage(imageUrl, fileName) {
const state = store.getState();
const newMessage = {
id: generateId(),
senderId: state.session.localUser.id,
senderName: state.session.localUser.name,
senderAvatar: state.session.localUser.avatar,
content: imageUrl,
fileName: fileName,
type: 'file',
timestamp: new Date().toISOString(),
isSelf: true
};
store.addMessage(newMessage);
// 发送消息到服务器
// wsManager.send('send-message', newMessage);
}
// 键盘快捷键
document.addEventListener('keydown', (event) => {
// 空格键静音

2
WebApp/client/public/onebyone/models.js
View File

@@ -101,7 +101,7 @@ const mockMessages = [
id: "msg-001",
senderId: "system",
senderName: "系统",
senderAvatar: "https://via.placeholder.com/100",
senderAvatar: "/images/screenshot.png",
content: "通话已建立连接",
type: "system",
timestamp: "2024-01-15T14:30:00.000Z",

53
WebApp/client/public/onebyone/renderer.js
View File

@@ -38,6 +38,8 @@ class UIRenderer {
sidebar: document.getElementById('sidebar'),
chatContent: document.getElementById('chatContent'),
userList: document.getElementById('userList'),
localMediaStatus: document.getElementById('localMediaStatus'),
localMuteIcon: document.querySelector('[data-field="localUser.muteIcon"]'),
// 控制按钮
micBtn: document.getElementById('micBtn'),
@@ -66,6 +68,7 @@ class UIRenderer {
case 'LOCAL_MEDIA_CHANGE':
this.renderControlButtons(state.session.localUser.mediaState);
this.renderLocalVideo(state.session.localUser);
this.renderLocalUserStatus(state.session.localUser);
break;
case 'REMOTE_MEDIA_CHANGE':
this.renderRemoteVideo(state.session.remoteUser);
@@ -142,6 +145,36 @@ class UIRenderer {
if (this.elements.localAudioWave) {
toggleElement(this.elements.localAudioWave, localUser.mediaState.isSpeaking);
}
// 同时渲染本地用户状态
this.renderLocalUserStatus(localUser);
}
// 渲染本地用户状态
renderLocalUserStatus(localUser) {
// 更新本地媒体状态文本
if (this.elements.localMediaStatus) {
if (!localUser.mediaState.audio) {
this.elements.localMediaStatus.textContent = '静音中';
this.elements.localMediaStatus.className = 'text-xs text-gray-500';
} else if (!localUser.mediaState.video) {
this.elements.localMediaStatus.textContent = '视频关闭';
this.elements.localMediaStatus.className = 'text-xs text-gray-500';
} else {
this.elements.localMediaStatus.textContent = '在线';
this.elements.localMediaStatus.className = 'text-xs text-green-400';
}
}
// 更新静音图标
if (this.elements.localMuteIcon) {
if (!localUser.mediaState.audio) {
this.elements.localMuteIcon.classList.remove('hidden');
this.elements.localMuteIcon.className = 'fas fa-microphone-slash text-gray-500 text-xs';
} else {
this.elements.localMuteIcon.classList.add('hidden');
}
}
}
// 渲染控制按钮
@@ -200,6 +233,24 @@ class UIRenderer {
messageDiv.className = messageClass;
messageDiv.dataset.messageId = message.id;
let contentHTML = '';
if (message.type === 'file' && message.content.startsWith('data:image/')) {
// 图片消息
contentHTML = `
<div class="message-image-container">
<img src="${message.content}" class="message-image" alt="${message.fileName || '图片'}">
${message.fileName ? `<div class="message-image-name">${message.fileName}</div>` : ''}
</div>
`;
} else {
// 文本消息
contentHTML = `
<div class="message-text">
${message.content}
</div>
`;
}
messageDiv.innerHTML = `
<div class="message-header">
<img src="${message.senderAvatar}" class="message-avatar">
@@ -209,7 +260,7 @@ class UIRenderer {
</div>
</div>
<div class="message-content">
${message.content}
${contentHTML}
</div>
`;

24
WebApp/client/public/onebyone/style.css
View File

@@ -134,6 +134,30 @@ body {
border-top-right-radius: 0;
}
/* 图片消息样式 */
.message-image-container {
display: flex;
flex-direction: column;
gap: 8px;
}
.message-image {
max-width: 200px;
max-height: 200px;
border-radius: 8px;
object-fit: cover;
}
.message-image-name {
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
text-align: center;
}
.message-text {
word-wrap: break-word;
}
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
}