6058 lines
192 KiB
HTML
6058 lines
192 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>叠加态 - 局域网聊天室</title>
|
||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.4.0/css/all.min.css">
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
|
||
<link rel="icon" href="/image/logo_w.ico" type="image/x-icon">
|
||
<style>
|
||
:root {
|
||
--primary-color: #4a90e2;
|
||
--secondary-color: #357abd;
|
||
--background-color: #f5f7fa;
|
||
--message-sent: #dcf8c6;
|
||
--message-received: #fff;
|
||
--sidebar-width: 280px;
|
||
--header-height: 60px;
|
||
--border-radius: 12px;
|
||
--shadow-color: rgba(0, 0, 0, 0.1);
|
||
--transition-speed: 0.3s;
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
background-color: var(--background-color);
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.app-container {
|
||
display: flex;
|
||
height: 100vh;
|
||
position: relative;
|
||
}
|
||
|
||
/* 侧边栏样式 */
|
||
.sidebar {
|
||
width: var(--sidebar-width);
|
||
background: white;
|
||
height: 100%;
|
||
position: fixed;
|
||
left: calc(-1 * var(--sidebar-width));
|
||
transition: transform var(--transition-speed);
|
||
z-index: 1000;
|
||
box-shadow: 2px 0 10px var(--shadow-color);
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.sidebar.visible {
|
||
transform: translateX(var(--sidebar-width));
|
||
}
|
||
|
||
.sidebar-header {
|
||
padding: 20px;
|
||
background: var(--primary-color);
|
||
color: white;
|
||
font-size: 1.2em;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.chat-modes {
|
||
padding: 15px;
|
||
}
|
||
|
||
.mode-item {
|
||
padding: 12px 15px;
|
||
margin-bottom: 8px;
|
||
border-radius: var(--border-radius);
|
||
cursor: pointer;
|
||
transition: all var(--transition-speed);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.mode-item:hover {
|
||
background: rgba(74, 144, 226, 0.1);
|
||
}
|
||
|
||
.mode-item.active {
|
||
background: var(--primary-color);
|
||
color: white;
|
||
}
|
||
|
||
.mode-item i {
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
/* 主聊天区域 */
|
||
.chat-main {
|
||
flex: 1;
|
||
margin-left: 0;
|
||
transition: margin var(--transition-speed);
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
background: white;
|
||
}
|
||
|
||
.chat-header {
|
||
height: var(--header-height);
|
||
background: white;
|
||
border-bottom: 1px solid #eee;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 20px;
|
||
position: relative;
|
||
}
|
||
|
||
.menu-toggle {
|
||
background: none;
|
||
border: none;
|
||
font-size: 1.5em;
|
||
color: var(--primary-color);
|
||
cursor: pointer;
|
||
padding: 10px;
|
||
margin-right: 15px;
|
||
transition: transform var(--transition-speed);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 40px;
|
||
height: 40px;
|
||
}
|
||
|
||
.menu-toggle:hover {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.chat-title {
|
||
font-size: 1.2em;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.connection-status {
|
||
margin-left: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.status-indicator {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: #ccc;
|
||
transition: background var(--transition-speed);
|
||
}
|
||
|
||
.status-indicator.connected {
|
||
background: #4caf50;
|
||
}
|
||
|
||
/* 消息区域 */
|
||
.chat-messages {
|
||
flex: 1;
|
||
padding: 20px;
|
||
overflow-y: auto;
|
||
background: #e5ddd5;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
position: relative;
|
||
}
|
||
|
||
.message {
|
||
position: relative;
|
||
padding: 12px 15px;
|
||
border-radius: 12px;
|
||
word-wrap: break-word;
|
||
margin: 0;
|
||
min-width: 120px;
|
||
}
|
||
|
||
.message.sent {
|
||
background: linear-gradient(135deg, var(--message-sent) 0%, #c5e1a5 100%);
|
||
margin-left: auto;
|
||
border-bottom-right-radius: 5px;
|
||
}
|
||
|
||
.message.received {
|
||
background: linear-gradient(135deg, var(--message-received) 0%, #f5f5f5 100%);
|
||
margin-right: auto;
|
||
border-bottom-left-radius: 5px;
|
||
}
|
||
|
||
.message-content {
|
||
padding-top: 8px;
|
||
font-size: 1em;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.message-info {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 0.75em;
|
||
margin-top: 4px;
|
||
padding-top: 4px;
|
||
border-top: 1px solid rgba(0,0,0,0.05);
|
||
color: #666;
|
||
}
|
||
|
||
.info-item {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 2px 6px;
|
||
border-radius: 10px;
|
||
background: rgba(0,0,0,0.04);
|
||
margin-right: 6px;
|
||
}
|
||
|
||
.info-item:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.info-item i {
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
.message.sent .message-info {
|
||
color: #558b2f;
|
||
}
|
||
|
||
.message.received .message-info {
|
||
color: #666;
|
||
}
|
||
|
||
/* 消息时间悬浮效果 */
|
||
.message-time {
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.message:hover .message-time {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 消息气泡尾<E6B3A1><E5B0BE><EFBFBD><EFBFBD><EFBFBD> */
|
||
.message::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 12px;
|
||
height: 12px;
|
||
}
|
||
|
||
.message.sent::after {
|
||
right: -6px;
|
||
background: linear-gradient(135deg, var(--message-sent) 0%, #c5e1a5 100%);
|
||
transform: skewX(45deg);
|
||
border-bottom-right-radius: 5px;
|
||
}
|
||
|
||
.message.received::after {
|
||
left: -6px;
|
||
background: linear-gradient(135deg, var(--message-received) 0%, #f5f5f5 100%);
|
||
transform: skewX(-45deg);
|
||
border-bottom-left-radius: 5px;
|
||
}
|
||
|
||
/* 优化聊天区域滚动条 */
|
||
.chat-messages::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
|
||
.chat-messages::-webkit-scrollbar-track {
|
||
background: rgba(0,0,0,0.05);
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.chat-messages::-webkit-scrollbar-thumb {
|
||
background: rgba(0,0,0,0.2);
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.chat-messages::-webkit-scrollbar-thumb:hover {
|
||
background: rgba(0,0,0,0.3);
|
||
}
|
||
|
||
/* 输入区域 */
|
||
.chat-input-container {
|
||
padding: 15px 20px;
|
||
background: white;
|
||
border-top: 1px solid #eee;
|
||
display: flex;
|
||
gap: 15px;
|
||
align-items: center;
|
||
}
|
||
|
||
.chat-input {
|
||
flex: 1;
|
||
padding: 12px 20px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 24px;
|
||
outline: none;
|
||
font-size: 1em;
|
||
transition: border-color var(--transition-speed);
|
||
}
|
||
|
||
.chat-input:focus {
|
||
border-color: var(--primary-color);
|
||
}
|
||
|
||
.send-btn {
|
||
padding: 12px 24px;
|
||
background: var(--primary-color);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 24px;
|
||
cursor: pointer;
|
||
transition: all var(--transition-speed);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.send-btn:hover {
|
||
background: var(--secondary-color);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.send-btn:active {
|
||
transform: translateY(1px);
|
||
}
|
||
|
||
/* 动画效果 */
|
||
@keyframes messageSlide {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
/* 私<><E7A781>输<EFBFBD><E8BE93>框 */
|
||
.private-chat-input {
|
||
padding: 15px;
|
||
border-bottom: 1px solid #eee;
|
||
display: none;
|
||
}
|
||
|
||
.private-chat-input.active {
|
||
display: block;
|
||
}
|
||
|
||
.private-chat-input input {
|
||
width: 100%;
|
||
padding: 10px;
|
||
border: 1px solid #ddd;
|
||
border-radius: var(--border-radius);
|
||
outline: none;
|
||
}
|
||
|
||
/* 移动端适配 */
|
||
@media (max-width: 768px) {
|
||
.sidebar {
|
||
width: 100%;
|
||
max-width: 320px;
|
||
}
|
||
|
||
.chat-main {
|
||
width: 100%;
|
||
}
|
||
|
||
.message {
|
||
max-width: 85%;
|
||
}
|
||
|
||
.chat-input-container {
|
||
padding: 10px;
|
||
}
|
||
|
||
.send-btn {
|
||
padding: 12px 20px;
|
||
}
|
||
}
|
||
|
||
/* 触摸设备优化 */
|
||
@media (hover: none) {
|
||
.mode-item:active {
|
||
background: rgba(74, 144, 226, 0.1);
|
||
}
|
||
|
||
.send-btn:active {
|
||
background: var(--secondary-color);
|
||
}
|
||
}
|
||
|
||
/* 在原有样式的基础上添加 */
|
||
.icon-fallback {
|
||
display: inline-block;
|
||
width: 24px;
|
||
height: 24px;
|
||
line-height: 24px;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 修改菜单图标样式 */
|
||
.menu-toggle {
|
||
/* 原有样式保持不变 */
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 40px;
|
||
height: 40px;
|
||
}
|
||
|
||
/* 添加汉堡菜单的回退样式 */
|
||
.menu-icon {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
width: 20px;
|
||
height: 16px;
|
||
}
|
||
|
||
.menu-icon span {
|
||
display: block;
|
||
width: 100%;
|
||
height: 2px;
|
||
background-color: var(--primary-color);
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
/* 发送按钮图标样式优化 */
|
||
.send-btn i {
|
||
font-size: 1.2em;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 在原有样式基础上添加 */
|
||
.message {
|
||
margin: 20px 0; /* 增加消息间距 */
|
||
}
|
||
|
||
/* IP 头像样式 */
|
||
.avatar {
|
||
width: 35px;
|
||
height: 35px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: bold;
|
||
color: white;
|
||
font-size: 1.2em;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
/* 消息容器布局优化 */
|
||
.message-container {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
margin: 12px 0;
|
||
max-width: 85%;
|
||
}
|
||
|
||
.message-container.sent {
|
||
flex-direction: row-reverse;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.message-container.received {
|
||
margin-right: auto;
|
||
}
|
||
|
||
/* 优化头像样式 */
|
||
.avatar {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: bold;
|
||
color: white;
|
||
font-size: 1.1em;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.message-container.sent .avatar {
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.message-container.received .avatar {
|
||
margin-right: 8px;
|
||
}
|
||
|
||
/* 优化消息内容包装器 */
|
||
.message-content-wrapper {
|
||
flex: 1;
|
||
min-width: 200px;
|
||
max-width: calc(100% - 40px);
|
||
}
|
||
|
||
/* 优化消息气泡样式 */
|
||
.message {
|
||
padding: 10px 12px;
|
||
border-radius: 12px;
|
||
position: relative;
|
||
word-wrap: break-word;
|
||
margin: 0;
|
||
min-width: 120px;
|
||
}
|
||
|
||
.message.sent {
|
||
background: linear-gradient(135deg, var(--message-sent) 0%, #c5e1a5 100%);
|
||
border-bottom-right-radius: 4px;
|
||
}
|
||
|
||
.message.received {
|
||
background: linear-gradient(135deg, var(--message-received) 0%, #f5f5f5 100%);
|
||
border-bottom-left-radius: 4px;
|
||
}
|
||
|
||
/* 优化用户标签样式 */
|
||
.user-tag {
|
||
font-size: 0.8em;
|
||
color: #666;
|
||
margin-bottom: 4px;
|
||
position: absolute;
|
||
top: -18px;
|
||
}
|
||
|
||
.message-container.sent .user-tag {
|
||
right: 45px; /* 调整"我"的位置，与头像对齐 */
|
||
}
|
||
|
||
.message-container.received .user-tag {
|
||
left: 45px;
|
||
}
|
||
|
||
/* 添加复制按钮样式 */
|
||
.message-actions {
|
||
position: absolute;
|
||
right: -30px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
opacity: 0;
|
||
transition: opacity 0.2s ease;
|
||
}
|
||
|
||
.message-container.received .message-actions {
|
||
left: -30px;
|
||
right: auto;
|
||
}
|
||
|
||
.message-container:hover .message-actions {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 优化消息容器样式 */
|
||
.message-container {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
margin: 12px 0;
|
||
max-width: 85%;
|
||
}
|
||
|
||
/* 优化复制按钮样式 */
|
||
.copy-btn {
|
||
position: absolute;
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
background: white;
|
||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
opacity: 0;
|
||
transition: all 0.3s ease;
|
||
z-index: 2;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
/* 发送消息的复制按钮位置 */
|
||
.message-container.sent .copy-btn {
|
||
left: -40px; /* 调整到消息外侧 */
|
||
}
|
||
|
||
/* 接收消息的复制按钮位置 */
|
||
.message-container.received .copy-btn {
|
||
right: -40px; /* 调整到<E695B4><E588B0><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>外<EFBFBD><E5A496> */
|
||
}
|
||
|
||
.message-container:hover .copy-btn {
|
||
opacity: 1;
|
||
}
|
||
|
||
.copy-btn:hover {
|
||
background: white;
|
||
transform: translateY(-50%) scale(1.1);
|
||
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.copy-btn i {
|
||
color: var(--primary-color);
|
||
font-size: 1.1em;
|
||
}
|
||
|
||
/* 复制成功提示优化 */
|
||
.copy-tooltip {
|
||
position: fixed;
|
||
bottom: 30px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: rgba(0, 0, 0, 0.8);
|
||
color: white;
|
||
padding: 8px 16px;
|
||
border-radius: 20px;
|
||
font-size: 0.9em;
|
||
z-index: 1000;
|
||
pointer-events: none;
|
||
opacity: 0;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.copy-tooltip.show {
|
||
opacity: 1;
|
||
transform: translate(-50%, -10px);
|
||
}
|
||
|
||
/* 响应式布局优化 */
|
||
@media (max-width: 768px) {
|
||
.message-container {
|
||
max-width: 95%;
|
||
}
|
||
|
||
.message-content-wrapper {
|
||
min-width: 160px;
|
||
}
|
||
|
||
.message {
|
||
min-width: 100px;
|
||
}
|
||
|
||
.info-item {
|
||
font-size: 0.8em;
|
||
padding: 1px 4px;
|
||
}
|
||
}
|
||
|
||
/* 超小屏幕优化 */
|
||
@media (max-width: 480px) {
|
||
.message-info {
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
gap: 2px;
|
||
}
|
||
|
||
.info-item {
|
||
width: auto;
|
||
}
|
||
|
||
.message-content-wrapper {
|
||
min-width: 120px;
|
||
}
|
||
}
|
||
|
||
/* 添加消息内容最大宽度制 */
|
||
.message-content {
|
||
font-size: 1em;
|
||
line-height: 1.4;
|
||
margin-bottom: 4px;
|
||
word-break: break-word;
|
||
}
|
||
|
||
/* 在样式部分添加收回按钮的样式 */
|
||
.sidebar-toggle {
|
||
position: absolute;
|
||
right: -15px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 30px;
|
||
height: 60px;
|
||
background: var(--primary-color);
|
||
border: none;
|
||
border-radius: 0 30px 30px 0;
|
||
color: white;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s ease;
|
||
box-shadow: 2px 0 5px rgba(0,0,0,0.1);
|
||
z-index: 1001;
|
||
}
|
||
|
||
.sidebar-toggle:hover {
|
||
background: var(--secondary-color);
|
||
width: 35px;
|
||
}
|
||
|
||
.sidebar-toggle i {
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.sidebar.visible .sidebar-toggle i {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
/* 优化侧边栏样式 */
|
||
.sidebar {
|
||
width: var(--sidebar-width);
|
||
background: white;
|
||
height: 100%;
|
||
position: fixed;
|
||
left: calc(-1 * var(--sidebar-width));
|
||
transition: transform var(--transition-speed);
|
||
z-index: 1000;
|
||
box-shadow: 2px 0 10px var(--shadow-color);
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 优化头部状态栏样式 */
|
||
.connection-status {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
background: rgba(0, 0, 0, 0.05);
|
||
padding: 6px 12px;
|
||
border-radius: 20px;
|
||
}
|
||
|
||
.ip-display {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
padding-left: 8px;
|
||
border-left: 1px solid rgba(0, 0, 0, 0.1);
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
/* 修改消息中 IP 显示样式 */
|
||
.info-item.ip-info {
|
||
background: rgba(74, 144, 226, 0.1);
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.message.sent .info-item.ip-info {
|
||
background: rgba(85, 139, 47, 0.1);
|
||
color: #558b2f;
|
||
}
|
||
|
||
.sidebar-actions {
|
||
padding: 15px;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.action-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 12px 15px;
|
||
background: var(--primary-color);
|
||
color: white;
|
||
text-decoration: none;
|
||
border-radius: var(--border-radius);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.action-btn:hover {
|
||
background: var(--secondary-color);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.action-btn i {
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
/* 聊天列表样式 */
|
||
.chat-list {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
border-top: 1px solid #eee;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.chat-list-header {
|
||
padding: 15px;
|
||
font-weight: bold;
|
||
background: #f8f9fa;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.chat-list-content {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 10px;
|
||
}
|
||
|
||
.chat-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 10px;
|
||
border-radius: var(--border-radius);
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
margin-bottom: 5px;
|
||
position: relative;
|
||
}
|
||
|
||
.chat-item:hover {
|
||
background: rgba(74, 144, 226, 0.1);
|
||
}
|
||
|
||
.chat-item.active {
|
||
background: var(--primary-color);
|
||
color: white;
|
||
}
|
||
|
||
.chat-item-avatar {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
margin-right: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
.chat-item-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.chat-item-name {
|
||
font-weight: 500;
|
||
margin-bottom: 3px;
|
||
}
|
||
|
||
.chat-item-last-msg {
|
||
font-size: 0.8em;
|
||
color: #666;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.chat-item-badge {
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 10px;
|
||
background: #f44336;
|
||
color: white;
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.7em;
|
||
opacity: 0;
|
||
transform: scale(0);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.chat-item-badge.show {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
|
||
/* 消息分组样式 */
|
||
.message-date-divider {
|
||
text-align: center;
|
||
margin: 20px 0;
|
||
position: relative;
|
||
}
|
||
|
||
.message-date-divider::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
width: 100%;
|
||
height: 1px;
|
||
background: rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.message-date-divider span {
|
||
background: #e5ddd5;
|
||
padding: 0 10px;
|
||
color: #666;
|
||
font-size: 0.8em;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.chat-item-actions {
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
display: none;
|
||
gap: 5px;
|
||
}
|
||
|
||
.chat-item:hover .chat-item-actions {
|
||
display: flex;
|
||
}
|
||
|
||
.chat-delete-btn {
|
||
background: #dc3545;
|
||
color: white;
|
||
border: none;
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.chat-delete-btn:hover {
|
||
opacity: 1;
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
/* 确聊天项有足够的右边距来容按钮 */
|
||
.chat-item {
|
||
padding-right: 45px;
|
||
}
|
||
|
||
/* Toast 提示样式 */
|
||
.toast {
|
||
position: fixed;
|
||
bottom: 20px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: rgba(0, 0, 0, 0.8);
|
||
color: white;
|
||
padding: 10px 20px;
|
||
border-radius: 20px;
|
||
font-size: 0.9em;
|
||
z-index: 1000;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.toast.show {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 添加确认对话框样式 */
|
||
.confirm-dialog {
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background: white;
|
||
padding: 20px;
|
||
border-radius: 10px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
|
||
z-index: 1001;
|
||
max-width: 300px;
|
||
width: 90%;
|
||
}
|
||
|
||
.confirm-dialog-buttons {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 10px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.confirm-dialog-buttons button {
|
||
padding: 8px 15px;
|
||
border: none;
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.confirm-dialog-buttons .confirm-btn {
|
||
background: #dc3545;
|
||
color: white;
|
||
}
|
||
|
||
.confirm-dialog-buttons .cancel-btn {
|
||
background: #6c757d;
|
||
color: white;
|
||
}
|
||
|
||
/* 修改导航栏和消息气泡的移动端样式 */
|
||
@media (max-width: 768px) {
|
||
/* 导航栏优化 */
|
||
.chat-header {
|
||
padding: 0 15px;
|
||
height: 50px;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
/* 移动端 IP 显示优化 */
|
||
.connection-status {
|
||
font-size: 0.85em;
|
||
padding: 4px 10px;
|
||
background: rgba(74, 144, 226, 0.1);
|
||
border-radius: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.ip-display {
|
||
display: flex !important; /* 强制显示 IP */
|
||
border: none;
|
||
padding: 0;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
/* 左侧栏按钮优化 */
|
||
.mode-item {
|
||
margin: 8px 12px;
|
||
padding: 12px 16px;
|
||
border-radius: 12px;
|
||
background: #f8f9fa;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.mode-item.active {
|
||
background: var(--primary-color);
|
||
transform: scale(1.02);
|
||
box-shadow: 0 2px 8px rgba(74, 144, 226, 0.2);
|
||
}
|
||
|
||
.mode-item i {
|
||
font-size: 1.3em;
|
||
width: 30px;
|
||
height: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
border-radius: 50%;
|
||
margin-right: 12px;
|
||
}
|
||
|
||
/* 聊天列表项优化 */
|
||
.chat-item {
|
||
margin: 8px 12px;
|
||
padding: 12px;
|
||
border-radius: 12px;
|
||
background: #f8f9fa;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.chat-item:active {
|
||
transform: scale(0.98);
|
||
background: rgba(74, 144, 226, 0.1);
|
||
}
|
||
|
||
/* 返回按钮优化 */
|
||
.action-btn {
|
||
margin: 12px 15px;
|
||
padding: 14px;
|
||
border-radius: 12px;
|
||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||
box-shadow: 0 2px 8px rgba(74, 144, 226, 0.2);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.action-btn:active {
|
||
transform: scale(0.98);
|
||
box-shadow: 0 1px 4px rgba(74, 144, 226, 0.1);
|
||
}
|
||
|
||
/* 侧边栏头部优化 */
|
||
.sidebar-header {
|
||
padding: 20px 15px;
|
||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
min-height: 70px;
|
||
}
|
||
|
||
.sidebar-header span {
|
||
font-size: 1.1em;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 分类标题优化 */
|
||
.chat-list-header {
|
||
padding: 15px;
|
||
font-size: 0.9em;
|
||
color: #666;
|
||
background: transparent;
|
||
font-weight: 600;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
/* 滚动条优化 */
|
||
.chat-list-content::-webkit-scrollbar {
|
||
width: 4px;
|
||
}
|
||
|
||
.chat-list-content::-webkit-scrollbar-thumb {
|
||
background: rgba(0, 0, 0, 0.1);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
/* 添加分割线 */
|
||
.chat-modes {
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
/* 优化动画效果 */
|
||
.sidebar {
|
||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
.sidebar.visible {
|
||
transform: translateX(100%);
|
||
}
|
||
|
||
/* 未读消息提示优化 */
|
||
.chat-item-badge {
|
||
background: #ff4757;
|
||
font-weight: 600;
|
||
box-shadow: 0 2px 4px rgba(255, 71, 87, 0.3);
|
||
}
|
||
|
||
/* IP地址显示优化 */
|
||
#currentIp {
|
||
font-size: 0.9em;
|
||
opacity: 0.9;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
padding: 4px 10px;
|
||
border-radius: 10px;
|
||
}
|
||
}
|
||
|
||
/* 超小屏幕优化 */
|
||
@media (max-width: 360px) {
|
||
.mode-item {
|
||
margin: 6px 10px;
|
||
padding: 10px 14px;
|
||
}
|
||
|
||
.chat-item {
|
||
margin: 6px 10px;
|
||
padding: 10px;
|
||
}
|
||
|
||
.action-btn {
|
||
margin: 10px;
|
||
padding: 12px;
|
||
}
|
||
|
||
.chat-item-avatar {
|
||
width: 35px;
|
||
height: 35px;
|
||
}
|
||
}
|
||
|
||
/* 添加触摸反馈 */
|
||
@media (hover: none) {
|
||
.mode-item:active,
|
||
.chat-item:active,
|
||
.action-btn:active {
|
||
transform: scale(0.98);
|
||
}
|
||
}
|
||
|
||
/* 添加侧边栏遮罩 */
|
||
.sidebar-overlay {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
z-index: 999;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.sidebar-overlay.visible {
|
||
display: block;
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 优化消息时间显示 */
|
||
.message-time {
|
||
font-size: 0.9em;
|
||
color: rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.message.sent .message-time {
|
||
color: rgba(0, 0, 0, 0.4);
|
||
}
|
||
|
||
/* 移动端侧边栏优化 */
|
||
@media (max-width: 768px) {
|
||
/* 侧边栏基础样式 */
|
||
.sidebar {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
height: 100vh;
|
||
position: fixed;
|
||
left: -100%;
|
||
top: 0;
|
||
background: white;
|
||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
z-index: 1000;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding-top: env(safe-area-inset-top);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
}
|
||
|
||
.sidebar.visible {
|
||
transform: translateX(100%);
|
||
}
|
||
|
||
/* 侧边栏头部 */
|
||
.sidebar-header {
|
||
padding: 16px;
|
||
background: var(--primary-color);
|
||
color: white;
|
||
font-size: 1.1em;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
min-height: 60px;
|
||
}
|
||
|
||
/* 聊天模式选择器 */
|
||
.chat-modes {
|
||
padding: 12px;
|
||
}
|
||
|
||
.mode-item {
|
||
padding: 15px;
|
||
margin-bottom: 6px;
|
||
border-radius: 12px;
|
||
font-size: 1em;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
touch-action: manipulation;
|
||
}
|
||
|
||
.mode-item i {
|
||
font-size: 1.2em;
|
||
width: 24px;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 聊天列表 */
|
||
.chat-list {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.chat-list-header {
|
||
padding: 12px 16px;
|
||
font-size: 0.95em;
|
||
font-weight: 500;
|
||
background: #f8f9fa;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.chat-list-content {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
padding: 8px;
|
||
}
|
||
|
||
/* 聊天项样式 */
|
||
.chat-item {
|
||
padding: 12px;
|
||
margin-bottom: 4px;
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
position: relative;
|
||
touch-action: manipulation;
|
||
}
|
||
|
||
.chat-item-avatar {
|
||
width: 45px;
|
||
height: 45px;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.chat-item-info {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.chat-item-name {
|
||
font-size: 0.95em;
|
||
margin-bottom: 4px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.chat-item-last-msg {
|
||
font-size: 0.85em;
|
||
color: #666;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* 返回按钮 */
|
||
.action-btn {
|
||
margin: 12px;
|
||
padding: 14px;
|
||
border-radius: 12px;
|
||
font-size: 0.95em;
|
||
}
|
||
|
||
/* 遮罩层优化 */
|
||
.sidebar-overlay {
|
||
background: rgba(0, 0, 0, 0.4);
|
||
backdrop-filter: blur(2px);
|
||
}
|
||
|
||
/* 未读消息提示 */
|
||
.chat-item-badge {
|
||
width: 20px;
|
||
height: 20px;
|
||
font-size: 0.8em;
|
||
right: 8px;
|
||
top: 50%;
|
||
transform: translateY(-50%) scale(0);
|
||
}
|
||
|
||
.chat-item-badge.show {
|
||
transform: translateY(-50%) scale(1);
|
||
}
|
||
|
||
/* 添加滑动手势支持 */
|
||
.sidebar {
|
||
touch-action: pan-y pinch-zoom;
|
||
}
|
||
|
||
/* 优化触摸反馈 */
|
||
.mode-item:active,
|
||
.chat-item:active {
|
||
background: rgba(74, 144, 226, 0.1);
|
||
}
|
||
|
||
/* 安全区域适配 */
|
||
@supports (padding: max(0px)) {
|
||
.sidebar {
|
||
padding-top: max(16px, env(safe-area-inset-top));
|
||
padding-bottom: max(16px, env(safe-area-inset-bottom));
|
||
padding-left: max(16px, env(safe-area-inset-left));
|
||
padding-right: max(16px, env(safe-area-inset-right));
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 超小屏幕优化 */
|
||
@media (max-width: 360px) {
|
||
.mode-item {
|
||
padding: 12px;
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
.chat-item-avatar {
|
||
width: 40px;
|
||
height: 40px;
|
||
}
|
||
|
||
.chat-item-name {
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
.chat-item-last-msg {
|
||
font-size: 0.8em;
|
||
}
|
||
}
|
||
|
||
.file-message {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 12px;
|
||
background: rgba(74, 144, 226, 0.05);
|
||
border-radius: 12px;
|
||
margin: 8px 0;
|
||
border: 1px solid rgba(74, 144, 226, 0.1);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.file-message:hover {
|
||
background: rgba(74, 144, 226, 0.08);
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.file-icon-wrapper {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 8px;
|
||
background: var(--primary-color);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.file-icon-wrapper i {
|
||
font-size: 24px;
|
||
color: white;
|
||
}
|
||
|
||
.file-info {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.file-info .file-name {
|
||
font-weight: 500;
|
||
font-size: 0.95em;
|
||
margin-bottom: 4px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
color: #333;
|
||
}
|
||
|
||
.file-details {
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
}
|
||
|
||
.file-details .file-size {
|
||
font-size: 0.8em;
|
||
color: #666;
|
||
}
|
||
|
||
.file-details .file-type {
|
||
font-size: 0.75em;
|
||
background: var(--primary-color);
|
||
color: white;
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.image-message {
|
||
position: relative;
|
||
max-width: 350px;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.image-message:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.image-message img {
|
||
width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.image-message:hover img {
|
||
transform: scale(1.02);
|
||
}
|
||
|
||
/* 图片悬停下载按钮 */
|
||
.image-download-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.4);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
backdrop-filter: blur(2px);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.image-message:hover .image-download-overlay {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
/* 移动端图片点击状态 */
|
||
.image-message.mobile-clicked .image-download-overlay {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.image-download-btn {
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 50%;
|
||
background: rgba(255, 255, 255, 0.9);
|
||
border: none;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s ease;
|
||
backdrop-filter: blur(10px);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.image-download-btn:hover {
|
||
background: white;
|
||
transform: scale(1.1);
|
||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.image-download-btn i {
|
||
font-size: 24px;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
/* 图片信息显示 */
|
||
.image-info-overlay {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
|
||
color: white;
|
||
padding: 12px;
|
||
transform: translateY(100%);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.image-message:hover .image-info-overlay,
|
||
.image-message.mobile-clicked .image-info-overlay {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.image-info-overlay .file-name {
|
||
font-size: 0.9em;
|
||
margin-bottom: 2px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.image-info-overlay .file-size {
|
||
font-size: 0.8em;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.drag-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(255, 255, 255, 0.9);
|
||
display: none;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.drag-overlay.active {
|
||
display: flex;
|
||
}
|
||
|
||
.drag-overlay i {
|
||
font-size: 48px;
|
||
color: var(--primary-color);
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.drag-overlay h3 {
|
||
color: var(--primary-color);
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
/* 优化复制按钮样式 */
|
||
.copy-btn {
|
||
position: absolute;
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
background: white;
|
||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
opacity: 0;
|
||
transition: all 0.3s ease;
|
||
z-index: 2;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
/* 发送消息的复制按钮位置 */
|
||
.message-container.sent .copy-btn {
|
||
left: -40px; /* 调整到消息外侧 */
|
||
}
|
||
|
||
/* 接收消息的复制按钮位置 */
|
||
.message-container.received .copy-btn {
|
||
right: -40px; /* 调整到外 */
|
||
}
|
||
|
||
.message-container:hover .copy-btn {
|
||
opacity: 1;
|
||
}
|
||
|
||
.copy-btn:hover {
|
||
background: white;
|
||
transform: translateY(-50%) scale(1.1);
|
||
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.copy-btn i {
|
||
color: var(--primary-color);
|
||
font-size: 1.1em;
|
||
}
|
||
|
||
/* 移动端适配 */
|
||
@media (max-width: 768px) {
|
||
.copy-btn {
|
||
opacity: 0.8; /* 移动端保持半透明可见 */
|
||
width: 28px;
|
||
height: 28px;
|
||
}
|
||
|
||
.message-container.sent .copy-btn {
|
||
left: -34px;
|
||
}
|
||
|
||
.message-container.received .copy-btn {
|
||
right: -34px;
|
||
}
|
||
|
||
/* 增加按钮点击区域 */
|
||
.copy-btn::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -8px;
|
||
right: -8px;
|
||
bottom: -8px;
|
||
left: -8px;
|
||
}
|
||
}
|
||
|
||
/* 优化复制成功提示 */
|
||
.copy-toast {
|
||
position: fixed;
|
||
bottom: 80px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: rgba(0, 0, 0, 0.8);
|
||
color: white;
|
||
padding: 10px 20px;
|
||
border-radius: 20px;
|
||
font-size: 14px;
|
||
z-index: 1000;
|
||
opacity: 0;
|
||
transition: all 0.3s ease;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.copy-toast.show {
|
||
opacity: 1;
|
||
transform: translate(-50%, -10px);
|
||
}
|
||
|
||
/* 在现有的 .copy-btn 样式基础上添加 */
|
||
.copy-btn.download-btn {
|
||
background: var(--primary-color);
|
||
color: white;
|
||
}
|
||
|
||
.copy-btn.download-btn:hover {
|
||
background: var(--secondary-color);
|
||
color: white;
|
||
transform: translateY(-50%) scale(1.1);
|
||
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.copy-btn.download-btn i {
|
||
color: white;
|
||
}
|
||
|
||
/* 添加上传按钮样式 */
|
||
.upload-btn {
|
||
background: none;
|
||
border: none;
|
||
color: var(--primary-color);
|
||
cursor: pointer;
|
||
padding: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.upload-btn:hover {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.upload-btn i {
|
||
font-size: 1.5em;
|
||
}
|
||
|
||
/* 隐藏文件输入框 */
|
||
.file-input {
|
||
display: none;
|
||
}
|
||
|
||
/* 添加系统消息样式 */
|
||
.system-message {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin: 15px 0;
|
||
}
|
||
|
||
.system-content {
|
||
background: rgba(74, 144, 226, 0.1);
|
||
color: var(--primary-color);
|
||
padding: 8px 16px;
|
||
border-radius: 15px;
|
||
font-size: 0.9em;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.system-content i {
|
||
font-size: 1em;
|
||
}
|
||
|
||
/* 历史消息样式 */
|
||
.history-message {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 历史消息中的图片不变灰 */
|
||
.history-message .image-message,
|
||
.history-message .media-message {
|
||
opacity: 1;
|
||
}
|
||
|
||
.history-badge {
|
||
background: rgba(255, 152, 0, 0.2);
|
||
color: #ff9800;
|
||
padding: 2px 6px;
|
||
border-radius: 8px;
|
||
font-size: 0.7em;
|
||
margin-left: 6px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.history-message .message {
|
||
border-left: 3px solid rgba(255, 152, 0, 0.3);
|
||
padding-left: 15px;
|
||
}
|
||
|
||
/* 但是文本消息保持历史样式 */
|
||
.history-message .message-content {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* 优化历史消息在移动端的显示 */
|
||
@media (max-width: 768px) {
|
||
.history-badge {
|
||
font-size: 0.65em;
|
||
padding: 1px 4px;
|
||
}
|
||
|
||
.system-content {
|
||
font-size: 0.85em;
|
||
padding: 6px 12px;
|
||
}
|
||
}
|
||
|
||
/* 媒体消息通用样式 */
|
||
.media-message {
|
||
max-width: 400px;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
margin: 8px 0;
|
||
position: relative;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.media-message:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
/* 音频消息特殊样式 - 更宽的容器 */
|
||
.audio-message {
|
||
max-width: 450px;
|
||
min-width: 350px;
|
||
}
|
||
|
||
.media-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 12px;
|
||
background: rgba(74, 144, 226, 0.05);
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||
position: relative;
|
||
}
|
||
|
||
.media-header i {
|
||
font-size: 24px;
|
||
color: var(--primary-color);
|
||
width: 32px;
|
||
text-align: center;
|
||
}
|
||
|
||
.media-title {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.media-title .file-name {
|
||
font-weight: 500;
|
||
font-size: 0.95em;
|
||
margin-bottom: 2px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.media-title .file-size {
|
||
font-size: 0.8em;
|
||
color: #666;
|
||
}
|
||
|
||
/* 媒体播放器样式 */
|
||
.media-player {
|
||
width: 100%;
|
||
outline: none;
|
||
background: #000;
|
||
}
|
||
|
||
.audio-message .media-player {
|
||
height: 60px;
|
||
width: 100%;
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
.video-message .media-player {
|
||
max-height: 300px;
|
||
background: #000;
|
||
}
|
||
|
||
/* 音频消息悬停下载按钮 */
|
||
.audio-download-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 80px;
|
||
background: linear-gradient(90deg, transparent, rgba(74, 144, 226, 0.1));
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.audio-message:hover .audio-download-overlay {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.audio-download-btn {
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 50%;
|
||
background: var(--primary-color);
|
||
border: none;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s ease;
|
||
box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
|
||
}
|
||
|
||
.audio-download-btn:hover {
|
||
background: var(--secondary-color);
|
||
transform: scale(1.1);
|
||
box-shadow: 0 4px 16px rgba(74, 144, 226, 0.4);
|
||
}
|
||
|
||
.audio-download-btn i {
|
||
font-size: 20px;
|
||
color: white;
|
||
}
|
||
|
||
/* 视频消息悬停下载按钮 */
|
||
.video-download-overlay {
|
||
position: absolute;
|
||
top: 8px;
|
||
right: 8px;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
z-index: 10;
|
||
}
|
||
|
||
.video-message:hover .video-download-overlay {
|
||
opacity: 1;
|
||
}
|
||
|
||
.video-download-btn {
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 50%;
|
||
background: rgba(0, 0, 0, 0.7);
|
||
border: 2px solid white;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s ease;
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
|
||
.video-download-btn:hover {
|
||
background: rgba(0, 0, 0, 0.9);
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.video-download-btn i {
|
||
font-size: 18px;
|
||
color: white;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.media-message {
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* 移动端图片消息优化 */
|
||
.image-message {
|
||
max-width: 100%;
|
||
margin: 12px 0;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.image-message img {
|
||
width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
}
|
||
|
||
/* 移动端默认隐藏下载按钮，点击后才显示 */
|
||
.image-download-overlay {
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
}
|
||
|
||
/* 移动端点击状态显示下载按钮 */
|
||
.image-message.mobile-clicked .image-download-overlay {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.image-download-btn {
|
||
width: 50px;
|
||
height: 50px;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
}
|
||
|
||
.image-download-btn i {
|
||
font-size: 20px;
|
||
}
|
||
|
||
/* 移动端音频消息优化 */
|
||
.audio-message {
|
||
max-width: 100%;
|
||
min-width: 300px;
|
||
margin: 12px 0;
|
||
}
|
||
|
||
/* 移动端音频下载按钮始终可见 */
|
||
.audio-download-overlay {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
width: 70px;
|
||
background: linear-gradient(90deg, transparent, rgba(74, 144, 226, 0.08));
|
||
}
|
||
|
||
.audio-download-btn {
|
||
width: 44px;
|
||
height: 44px;
|
||
}
|
||
|
||
.audio-download-btn i {
|
||
font-size: 18px;
|
||
}
|
||
|
||
/* 移动端音频播放器优化 */
|
||
.audio-message .media-player {
|
||
height: 70px;
|
||
padding: 8px;
|
||
background: #f8f9fa;
|
||
border-radius: 0 0 12px 12px;
|
||
}
|
||
|
||
/* 移动端媒体头部优化 */
|
||
.audio-message .media-header {
|
||
padding: 14px 16px;
|
||
background: rgba(74, 144, 226, 0.08);
|
||
}
|
||
|
||
.audio-message .media-header i {
|
||
font-size: 26px;
|
||
width: 36px;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.audio-message .media-title .file-name {
|
||
font-size: 1em;
|
||
font-weight: 600;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.audio-message .media-title .file-size {
|
||
font-size: 0.85em;
|
||
color: #666;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 移动端视频下载按钮 */
|
||
.video-download-overlay {
|
||
opacity: 1;
|
||
top: 12px;
|
||
right: 12px;
|
||
}
|
||
|
||
.video-download-btn {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: rgba(0, 0, 0, 0.8);
|
||
border: 2px solid rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
.video-download-btn i {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.video-message .media-player {
|
||
max-height: 250px;
|
||
}
|
||
|
||
.media-header {
|
||
padding: 10px;
|
||
}
|
||
|
||
.file-message {
|
||
padding: 10px;
|
||
}
|
||
|
||
.file-icon-wrapper {
|
||
width: 40px;
|
||
height: 40px;
|
||
}
|
||
|
||
.file-icon-wrapper i {
|
||
font-size: 20px;
|
||
}
|
||
|
||
/* 移动端图片信息优化 */
|
||
.image-info-overlay {
|
||
transform: translateY(100%);
|
||
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
|
||
padding: 8px 12px;
|
||
}
|
||
|
||
.image-info-overlay .file-name {
|
||
font-size: 0.85em;
|
||
}
|
||
|
||
.image-info-overlay .file-size {
|
||
font-size: 0.75em;
|
||
}
|
||
|
||
/* 移动端图片点击提示 */
|
||
.image-click-hint {
|
||
position: absolute;
|
||
top: 8px;
|
||
left: 8px;
|
||
background: rgba(0, 0, 0, 0.7);
|
||
color: white;
|
||
padding: 4px 8px;
|
||
border-radius: 12px;
|
||
font-size: 0.75em;
|
||
opacity: 0.9;
|
||
transition: opacity 0.3s ease;
|
||
pointer-events: none;
|
||
font-weight: 500;
|
||
backdrop-filter: blur(4px);
|
||
}
|
||
|
||
.image-message.mobile-clicked .image-click-hint {
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 移动端触摸优化 */
|
||
.image-download-btn:active,
|
||
.audio-download-btn:active,
|
||
.video-download-btn:active {
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
/* 移动端文件消息优化 */
|
||
.file-message {
|
||
padding: 10px;
|
||
margin: 8px 0;
|
||
}
|
||
|
||
.file-icon-wrapper {
|
||
width: 40px;
|
||
height: 40px;
|
||
}
|
||
|
||
.file-icon-wrapper i {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.file-info .file-name {
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
.file-details .file-size {
|
||
font-size: 0.75em;
|
||
}
|
||
|
||
.file-details .file-type {
|
||
font-size: 0.7em;
|
||
padding: 1px 4px;
|
||
}
|
||
}
|
||
|
||
/* 播放器控件优化 */
|
||
.media-player::-webkit-media-controls-panel {
|
||
background-color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
.audio-message .media-player::-webkit-media-controls-panel {
|
||
background-color: #f8f9fa;
|
||
}
|
||
|
||
/* 音频播放器进度条优化 */
|
||
.audio-message .media-player::-webkit-media-controls-timeline {
|
||
background-color: rgba(74, 144, 226, 0.2);
|
||
border-radius: 2px;
|
||
margin: 0 8px;
|
||
}
|
||
|
||
.audio-message .media-player::-webkit-media-controls-current-time-display,
|
||
.audio-message .media-player::-webkit-media-controls-time-remaining-display {
|
||
color: var(--primary-color);
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* 音频播放按钮优化 */
|
||
.audio-message .media-player::-webkit-media-controls-play-button {
|
||
background-color: var(--primary-color);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
/* 音频消息容器优化 */
|
||
.audio-message {
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.audio-message:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
/* 加载状态 */
|
||
.media-loading {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 20px;
|
||
color: #666;
|
||
}
|
||
|
||
.media-loading i {
|
||
animation: spin 1s linear infinite;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
@keyframes spin {
|
||
from { transform: rotate(0deg); }
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
/* 超小屏幕优化 */
|
||
@media (max-width: 480px) {
|
||
.audio-message {
|
||
min-width: 100px;
|
||
margin: 6px 0;
|
||
}
|
||
|
||
.audio-message .media-header {
|
||
padding: 12px 14px;
|
||
}
|
||
|
||
.audio-message .media-header i {
|
||
font-size: 24px;
|
||
width: 32px;
|
||
}
|
||
|
||
.audio-message .media-title .file-name {
|
||
font-size: 0.95em;
|
||
margin-bottom: 3px;
|
||
}
|
||
|
||
.audio-message .media-title .file-size {
|
||
font-size: 0.8em;
|
||
}
|
||
|
||
.audio-download-overlay {
|
||
width: 60px;
|
||
}
|
||
|
||
.audio-download-btn {
|
||
width: 40px;
|
||
height: 40px;
|
||
}
|
||
|
||
.audio-download-btn i {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.audio-message .media-player {
|
||
height: 65px;
|
||
padding: 6px;
|
||
}
|
||
|
||
.image-download-btn {
|
||
width: 44px;
|
||
height: 44px;
|
||
}
|
||
|
||
.image-download-btn i {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.video-download-btn {
|
||
width: 36px;
|
||
height: 36px;
|
||
}
|
||
|
||
.video-download-btn i {
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 超小屏幕播放器控件 */
|
||
.audio-message .media-player::-webkit-media-controls-play-button {
|
||
width: 42px;
|
||
height: 42px;
|
||
margin: 0 8px 0 6px;
|
||
}
|
||
|
||
.audio-message .media-player::-webkit-media-controls-timeline {
|
||
min-width: 100px;
|
||
margin: 0 6px;
|
||
}
|
||
|
||
.audio-message .media-player::-webkit-media-controls-current-time-display,
|
||
.audio-message .media-player::-webkit-media-controls-time-remaining-display {
|
||
font-size: 13px;
|
||
margin: 0 3px;
|
||
}
|
||
|
||
.audio-message .media-player::-webkit-media-controls-volume-slider {
|
||
width: 50px;
|
||
margin: 0 6px;
|
||
}
|
||
|
||
.audio-message .media-player::-webkit-media-controls-mute-button {
|
||
width: 28px;
|
||
height: 28px;
|
||
margin: 0 3px;
|
||
}
|
||
|
||
/* 超小屏幕文件消息优化 */
|
||
.file-message {
|
||
padding: 8px;
|
||
gap: 8px;
|
||
}
|
||
|
||
.file-icon-wrapper {
|
||
width: 36px;
|
||
height: 36px;
|
||
}
|
||
|
||
.file-icon-wrapper i {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.file-info .file-name {
|
||
font-size: 0.85em;
|
||
}
|
||
|
||
.file-details .file-size {
|
||
font-size: 0.7em;
|
||
}
|
||
|
||
.file-details .file-type {
|
||
font-size: 0.65em;
|
||
padding: 1px 3px;
|
||
}
|
||
}
|
||
|
||
/* 管理员设置样式 */
|
||
.admin-settings {
|
||
padding: 15px;
|
||
border-bottom: 1px solid #eee;
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
.admin-settings-header {
|
||
font-size: 0.9em;
|
||
font-weight: 600;
|
||
color: #666;
|
||
margin-bottom: 10px;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.admin-input-container {
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.admin-ip-input {
|
||
flex: 1;
|
||
padding: 8px 12px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 6px;
|
||
font-size: 0.9em;
|
||
outline: none;
|
||
transition: border-color 0.3s ease;
|
||
}
|
||
|
||
.admin-ip-input:focus {
|
||
border-color: var(--primary-color);
|
||
}
|
||
|
||
.admin-set-btn {
|
||
width: 36px;
|
||
height: 36px;
|
||
border: none;
|
||
border-radius: 6px;
|
||
background: var(--primary-color);
|
||
color: white;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.admin-set-btn:hover {
|
||
background: var(--secondary-color);
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.admin-set-btn i {
|
||
font-size: 1.1em;
|
||
}
|
||
|
||
.admin-status {
|
||
padding: 6px 10px;
|
||
border-radius: 15px;
|
||
background: rgba(0, 0, 0, 0.05);
|
||
text-align: center;
|
||
}
|
||
|
||
.admin-status-text {
|
||
font-size: 0.8em;
|
||
color: #666;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.admin-status.admin-set .admin-status-text {
|
||
color: #28a745;
|
||
}
|
||
|
||
.admin-status.is-admin .admin-status-text {
|
||
color: #dc3545;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 管理员功能样式 */
|
||
.admin-functions {
|
||
padding: 15px;
|
||
border-bottom: 1px solid #eee;
|
||
background: linear-gradient(135deg, #fff5f5 0%, #fff0f0 100%);
|
||
}
|
||
|
||
.admin-functions-header {
|
||
font-size: 0.9em;
|
||
font-weight: 600;
|
||
color: #dc3545;
|
||
margin-bottom: 10px;
|
||
letter-spacing: 0.5px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.admin-functions-header::before {
|
||
content: "👑";
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
.admin-function-btn {
|
||
width: 100%;
|
||
padding: 12px 15px;
|
||
border: none;
|
||
border-radius: 8px;
|
||
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
|
||
color: white;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
font-size: 0.9em;
|
||
font-weight: 500;
|
||
transition: all 0.3s ease;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.admin-function-btn:hover {
|
||
background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
|
||
}
|
||
|
||
.admin-function-btn:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.admin-function-btn i {
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
.clear-all-btn {
|
||
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
|
||
}
|
||
|
||
.clear-all-btn:hover {
|
||
background: linear-gradient(135deg, #bd2130 0%, #a71e2a 100%);
|
||
}
|
||
|
||
/* 移动端管理员样式优化 */
|
||
@media (max-width: 768px) {
|
||
.admin-settings {
|
||
margin: 0 12px;
|
||
border-radius: 12px;
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
.admin-input-container {
|
||
gap: 10px;
|
||
}
|
||
|
||
.admin-ip-input {
|
||
padding: 10px 14px;
|
||
font-size: 16px; /* 防止iOS缩放 */
|
||
}
|
||
|
||
.admin-set-btn {
|
||
width: 40px;
|
||
height: 40px;
|
||
}
|
||
|
||
.admin-functions {
|
||
margin: 0 12px;
|
||
border-radius: 12px;
|
||
background: linear-gradient(135deg, #fff5f5 0%, #fff0f0 100%);
|
||
}
|
||
|
||
.admin-function-btn {
|
||
padding: 14px 16px;
|
||
font-size: 1em;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.admin-function-btn:active {
|
||
transform: scale(0.98);
|
||
}
|
||
}
|
||
|
||
/* 超小屏幕优化 */
|
||
@media (max-width: 360px) {
|
||
.mode-item {
|
||
padding: 12px;
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
.chat-item-avatar {
|
||
width: 40px;
|
||
height: 40px;
|
||
}
|
||
|
||
.chat-item-name {
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
.chat-item-last-msg {
|
||
font-size: 0.8em;
|
||
}
|
||
}
|
||
|
||
.file-message {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 12px;
|
||
background: rgba(74, 144, 226, 0.05);
|
||
border-radius: 12px;
|
||
margin: 8px 0;
|
||
border: 1px solid rgba(74, 144, 226, 0.1);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.file-message:hover {
|
||
background: rgba(74, 144, 226, 0.08);
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.file-icon-wrapper {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 8px;
|
||
background: var(--primary-color);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.file-icon-wrapper i {
|
||
font-size: 24px;
|
||
color: white;
|
||
}
|
||
|
||
.file-info {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.file-info .file-name {
|
||
font-weight: 500;
|
||
font-size: 0.95em;
|
||
margin-bottom: 4px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
color: #333;
|
||
}
|
||
|
||
.file-details {
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
}
|
||
|
||
.file-details .file-size {
|
||
font-size: 0.8em;
|
||
color: #666;
|
||
}
|
||
|
||
.file-details .file-type {
|
||
font-size: 0.75em;
|
||
background: var(--primary-color);
|
||
color: white;
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.image-message {
|
||
position: relative;
|
||
max-width: 350px;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.image-message:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.image-message img {
|
||
width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.image-message:hover img {
|
||
transform: scale(1.02);
|
||
}
|
||
|
||
/* 图片悬停下载按钮 */
|
||
.image-download-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.4);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
backdrop-filter: blur(2px);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.image-message:hover .image-download-overlay {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
/* 移动端图片点击状态 */
|
||
.image-message.mobile-clicked .image-download-overlay {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.image-download-btn {
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 50%;
|
||
background: rgba(255, 255, 255, 0.9);
|
||
border: none;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s ease;
|
||
backdrop-filter: blur(10px);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.image-download-btn:hover {
|
||
background: white;
|
||
transform: scale(1.1);
|
||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.image-download-btn i {
|
||
font-size: 24px;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
/* 图片信息显示 */
|
||
.image-info-overlay {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
|
||
color: white;
|
||
padding: 12px;
|
||
transform: translateY(100%);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.image-message:hover .image-info-overlay,
|
||
.image-message.mobile-clicked .image-info-overlay {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.image-info-overlay .file-name {
|
||
font-size: 0.9em;
|
||
margin-bottom: 2px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.image-info-overlay .file-size {
|
||
font-size: 0.8em;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.drag-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(255, 255, 255, 0.9);
|
||
display: none;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.drag-overlay.active {
|
||
display: flex;
|
||
}
|
||
|
||
.drag-overlay i {
|
||
font-size: 48px;
|
||
color: var(--primary-color);
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.drag-overlay h3 {
|
||
color: var(--primary-color);
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
/* 优化复制按钮样式 */
|
||
.copy-btn {
|
||
position: absolute;
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
background: white;
|
||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
opacity: 0;
|
||
transition: all 0.3s ease;
|
||
z-index: 2;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
/* 发送消息的复制按钮位置 */
|
||
.message-container.sent .copy-btn {
|
||
left: -40px; /* 调整到消息外侧 */
|
||
}
|
||
|
||
/* 接收消息的复制按钮位置 */
|
||
.message-container.received .copy-btn {
|
||
right: -40px; /* 调整到外 */
|
||
}
|
||
|
||
.message-container:hover .copy-btn {
|
||
opacity: 1;
|
||
}
|
||
|
||
.copy-btn:hover {
|
||
background: white;
|
||
transform: translateY(-50%) scale(1.1);
|
||
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.copy-btn i {
|
||
color: var(--primary-color);
|
||
font-size: 1.1em;
|
||
}
|
||
|
||
/* 移动端适配 */
|
||
@media (max-width: 768px) {
|
||
.copy-btn {
|
||
opacity: 0.8; /* 移动端保持半透明可见 */
|
||
width: 28px;
|
||
height: 28px;
|
||
}
|
||
|
||
.message-container.sent .copy-btn {
|
||
left: -34px;
|
||
}
|
||
|
||
.message-container.received .copy-btn {
|
||
right: -34px;
|
||
}
|
||
|
||
/* 增加按钮点击区域 */
|
||
.copy-btn::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -8px;
|
||
right: -8px;
|
||
bottom: -8px;
|
||
left: -8px;
|
||
}
|
||
}
|
||
|
||
/* 优化复制成功提示 */
|
||
.copy-toast {
|
||
position: fixed;
|
||
bottom: 80px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: rgba(0, 0, 0, 0.8);
|
||
color: white;
|
||
padding: 10px 20px;
|
||
border-radius: 20px;
|
||
font-size: 14px;
|
||
z-index: 1000;
|
||
opacity: 0;
|
||
transition: all 0.3s ease;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.copy-toast.show {
|
||
opacity: 1;
|
||
transform: translate(-50%, -10px);
|
||
}
|
||
|
||
/* 在现有的 .copy-btn 样式基础上添加 */
|
||
.copy-btn.download-btn {
|
||
background: var(--primary-color);
|
||
color: white;
|
||
}
|
||
|
||
.copy-btn.download-btn:hover {
|
||
background: var(--secondary-color);
|
||
color: white;
|
||
transform: translateY(-50%) scale(1.1);
|
||
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.copy-btn.download-btn i {
|
||
color: white;
|
||
}
|
||
|
||
/* 添加上传按钮样式 */
|
||
.upload-btn {
|
||
background: none;
|
||
border: none;
|
||
color: var(--primary-color);
|
||
cursor: pointer;
|
||
padding: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.upload-btn:hover {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.upload-btn i {
|
||
font-size: 1.5em;
|
||
}
|
||
|
||
/* 隐藏文件输入框 */
|
||
.file-input {
|
||
display: none;
|
||
}
|
||
|
||
/* 添加系统消息样式 */
|
||
.system-message {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin: 15px 0;
|
||
}
|
||
|
||
.system-content {
|
||
background: rgba(74, 144, 226, 0.1);
|
||
color: var(--primary-color);
|
||
padding: 8px 16px;
|
||
border-radius: 15px;
|
||
font-size: 0.9em;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.system-content i {
|
||
font-size: 1em;
|
||
}
|
||
|
||
/* 历史消息样式 */
|
||
.history-message {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 历史消息中的图片不变灰 */
|
||
.history-message .image-message,
|
||
.history-message .media-message {
|
||
opacity: 1;
|
||
}
|
||
|
||
.history-badge {
|
||
background: rgba(255, 152, 0, 0.2);
|
||
color: #ff9800;
|
||
padding: 2px 6px;
|
||
border-radius: 8px;
|
||
font-size: 0.7em;
|
||
margin-left: 6px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.history-message .message {
|
||
border-left: 3px solid rgba(255, 152, 0, 0.3);
|
||
padding-left: 15px;
|
||
}
|
||
|
||
/* 但是文本消息保持历史样式 */
|
||
.history-message .message-content {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* 优化历史消息在移动端的显示 */
|
||
@media (max-width: 768px) {
|
||
.history-badge {
|
||
font-size: 0.65em;
|
||
padding: 1px 4px;
|
||
}
|
||
|
||
.system-content {
|
||
font-size: 0.85em;
|
||
padding: 6px 12px;
|
||
}
|
||
}
|
||
|
||
/* 媒体消息通用样式 */
|
||
.media-message {
|
||
max-width: 400px;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
margin: 8px 0;
|
||
position: relative;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.media-message:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
/* 音频消息特殊样式 - 更宽的容器 */
|
||
.audio-message {
|
||
max-width: 450px;
|
||
min-width: 350px;
|
||
}
|
||
|
||
.media-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 12px;
|
||
background: rgba(74, 144, 226, 0.05);
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||
position: relative;
|
||
}
|
||
|
||
.media-header i {
|
||
font-size: 24px;
|
||
color: var(--primary-color);
|
||
width: 32px;
|
||
text-align: center;
|
||
}
|
||
|
||
.media-title {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.media-title .file-name {
|
||
font-weight: 500;
|
||
font-size: 0.95em;
|
||
margin-bottom: 2px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.media-title .file-size {
|
||
font-size: 0.8em;
|
||
color: #666;
|
||
}
|
||
|
||
/* 媒体播放器样式 */
|
||
.media-player {
|
||
width: 100%;
|
||
outline: none;
|
||
background: #000;
|
||
}
|
||
|
||
.audio-message .media-player {
|
||
height: 60px;
|
||
width: 100%;
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
.video-message .media-player {
|
||
max-height: 300px;
|
||
background: #000;
|
||
}
|
||
|
||
/* 音频消息悬停下载按钮 */
|
||
.audio-download-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 80px;
|
||
background: linear-gradient(90deg, transparent, rgba(74, 144, 226, 0.1));
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.audio-message:hover .audio-download-overlay {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.audio-download-btn {
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 50%;
|
||
background: var(--primary-color);
|
||
border: none;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s ease;
|
||
box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
|
||
}
|
||
|
||
.audio-download-btn:hover {
|
||
background: var(--secondary-color);
|
||
transform: scale(1.1);
|
||
box-shadow: 0 4px 16px rgba(74, 144, 226, 0.4);
|
||
}
|
||
|
||
.audio-download-btn i {
|
||
font-size: 20px;
|
||
color: white;
|
||
}
|
||
|
||
/* 视频消息悬停下载按钮 */
|
||
.video-download-overlay {
|
||
position: absolute;
|
||
top: 8px;
|
||
right: 8px;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
z-index: 10;
|
||
}
|
||
|
||
.video-message:hover .video-download-overlay {
|
||
opacity: 1;
|
||
}
|
||
|
||
.video-download-btn {
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 50%;
|
||
background: rgba(0, 0, 0, 0.7);
|
||
border: 2px solid white;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s ease;
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
|
||
.video-download-btn:hover {
|
||
background: rgba(0, 0, 0, 0.9);
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.video-download-btn i {
|
||
font-size: 18px;
|
||
color: white;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.media-message {
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* 移动端图片消息优化 */
|
||
.image-message {
|
||
max-width: 100%;
|
||
margin: 12px 0;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.image-message img {
|
||
width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
}
|
||
|
||
/* 移动端默认隐藏下载按钮，点击后才显示 */
|
||
.image-download-overlay {
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
}
|
||
|
||
/* 移动端点击状态显示下载按钮 */
|
||
.image-message.mobile-clicked .image-download-overlay {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.image-download-btn {
|
||
width: 50px;
|
||
height: 50px;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
}
|
||
|
||
.image-download-btn i {
|
||
font-size: 20px;
|
||
}
|
||
|
||
/* 移动端音频消息优化 */
|
||
.audio-message {
|
||
max-width: 100%;
|
||
min-width: 300px;
|
||
margin: 12px 0;
|
||
}
|
||
|
||
/* 移动端音频下载按钮始终可见 */
|
||
.audio-download-overlay {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
width: 70px;
|
||
background: linear-gradient(90deg, transparent, rgba(74, 144, 226, 0.08));
|
||
}
|
||
|
||
.audio-download-btn {
|
||
width: 44px;
|
||
height: 44px;
|
||
}
|
||
|
||
.audio-download-btn i {
|
||
font-size: 18px;
|
||
}
|
||
|
||
/* 移动端音频播放器优化 */
|
||
.audio-message .media-player {
|
||
height: 70px;
|
||
padding: 8px;
|
||
background: #f8f9fa;
|
||
border-radius: 0 0 12px 12px;
|
||
}
|
||
|
||
/* 移动端媒体头部优化 */
|
||
.audio-message .media-header {
|
||
padding: 14px 16px;
|
||
background: rgba(74, 144, 226, 0.08);
|
||
}
|
||
|
||
.audio-message .media-header i {
|
||
font-size: 26px;
|
||
width: 36px;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.audio-message .media-title .file-name {
|
||
font-size: 1em;
|
||
font-weight: 600;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.audio-message .media-title .file-size {
|
||
font-size: 0.85em;
|
||
color: #666;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 移动端视频下载按钮 */
|
||
.video-download-overlay {
|
||
opacity: 1;
|
||
top: 12px;
|
||
right: 12px;
|
||
}
|
||
|
||
.video-download-btn {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: rgba(0, 0, 0, 0.8);
|
||
border: 2px solid rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
.video-download-btn i {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.video-message .media-player {
|
||
max-height: 250px;
|
||
}
|
||
|
||
.media-header {
|
||
padding: 10px;
|
||
}
|
||
|
||
.file-message {
|
||
padding: 10px;
|
||
}
|
||
|
||
.file-icon-wrapper {
|
||
width: 40px;
|
||
height: 40px;
|
||
}
|
||
|
||
.file-icon-wrapper i {
|
||
font-size: 20px;
|
||
}
|
||
|
||
/* 移动端图片信息优化 */
|
||
.image-info-overlay {
|
||
transform: translateY(100%);
|
||
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
|
||
padding: 8px 12px;
|
||
}
|
||
|
||
.image-info-overlay .file-name {
|
||
font-size: 0.85em;
|
||
}
|
||
|
||
.image-info-overlay .file-size {
|
||
font-size: 0.75em;
|
||
}
|
||
|
||
/* 移动端图片点击提示 */
|
||
.image-click-hint {
|
||
position: absolute;
|
||
top: 8px;
|
||
left: 8px;
|
||
background: rgba(0, 0, 0, 0.7);
|
||
color: white;
|
||
padding: 4px 8px;
|
||
border-radius: 12px;
|
||
font-size: 0.75em;
|
||
opacity: 0.9;
|
||
transition: opacity 0.3s ease;
|
||
pointer-events: none;
|
||
font-weight: 500;
|
||
backdrop-filter: blur(4px);
|
||
}
|
||
|
||
.image-message.mobile-clicked .image-click-hint {
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 移动端触摸优化 */
|
||
.image-download-btn:active,
|
||
.audio-download-btn:active,
|
||
.video-download-btn:active {
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
/* 移动端文件消息优化 */
|
||
.file-message {
|
||
padding: 10px;
|
||
margin: 8px 0;
|
||
}
|
||
|
||
.file-icon-wrapper {
|
||
width: 40px;
|
||
height: 40px;
|
||
}
|
||
|
||
.file-icon-wrapper i {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.file-info .file-name {
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
.file-details .file-size {
|
||
font-size: 0.75em;
|
||
}
|
||
|
||
.file-details .file-type {
|
||
font-size: 0.7em;
|
||
padding: 1px 4px;
|
||
}
|
||
}
|
||
|
||
/* 播放器控件优化 */
|
||
.media-player::-webkit-media-controls-panel {
|
||
background-color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
.audio-message .media-player::-webkit-media-controls-panel {
|
||
background-color: #f8f9fa;
|
||
}
|
||
|
||
/* 音频播放器进度条优化 */
|
||
.audio-message .media-player::-webkit-media-controls-timeline {
|
||
background-color: rgba(74, 144, 226, 0.2);
|
||
border-radius: 2px;
|
||
margin: 0 8px;
|
||
}
|
||
|
||
.audio-message .media-player::-webkit-media-controls-current-time-display,
|
||
.audio-message .media-player::-webkit-media-controls-time-remaining-display {
|
||
color: var(--primary-color);
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* 音频播放按钮优化 */
|
||
.audio-message .media-player::-webkit-media-controls-play-button {
|
||
background-color: var(--primary-color);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
/* 音频消息容器优化 */
|
||
.audio-message {
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.audio-message:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
/* 加载状态 */
|
||
.media-loading {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 20px;
|
||
color: #666;
|
||
}
|
||
|
||
.media-loading i {
|
||
animation: spin 1s linear infinite;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
@keyframes spin {
|
||
from { transform: rotate(0deg); }
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
/* 超小屏幕优化 */
|
||
@media (max-width: 480px) {
|
||
.audio-message {
|
||
min-width: 100px;
|
||
margin: 6px 0;
|
||
}
|
||
|
||
.audio-message .media-header {
|
||
padding: 12px 14px;
|
||
}
|
||
|
||
.audio-message .media-header i {
|
||
font-size: 24px;
|
||
width: 32px;
|
||
}
|
||
|
||
.audio-message .media-title .file-name {
|
||
font-size: 0.95em;
|
||
margin-bottom: 3px;
|
||
}
|
||
|
||
.audio-message .media-title .file-size {
|
||
font-size: 0.8em;
|
||
}
|
||
|
||
.audio-download-overlay {
|
||
width: 60px;
|
||
}
|
||
|
||
.audio-download-btn {
|
||
width: 40px;
|
||
height: 40px;
|
||
}
|
||
|
||
.audio-download-btn i {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.audio-message .media-player {
|
||
height: 65px;
|
||
padding: 6px;
|
||
}
|
||
|
||
.image-download-btn {
|
||
width: 44px;
|
||
height: 44px;
|
||
}
|
||
|
||
.image-download-btn i {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.video-download-btn {
|
||
width: 36px;
|
||
height: 36px;
|
||
}
|
||
|
||
.video-download-btn i {
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 超小屏幕播放器控件 */
|
||
.audio-message .media-player::-webkit-media-controls-play-button {
|
||
width: 42px;
|
||
height: 42px;
|
||
margin: 0 8px 0 6px;
|
||
}
|
||
|
||
.audio-message .media-player::-webkit-media-controls-timeline {
|
||
min-width: 100px;
|
||
margin: 0 6px;
|
||
}
|
||
|
||
.audio-message .media-player::-webkit-media-controls-current-time-display,
|
||
.audio-message .media-player::-webkit-media-controls-time-remaining-display {
|
||
font-size: 13px;
|
||
margin: 0 3px;
|
||
}
|
||
|
||
.audio-message .media-player::-webkit-media-controls-volume-slider {
|
||
width: 50px;
|
||
margin: 0 6px;
|
||
}
|
||
|
||
.audio-message .media-player::-webkit-media-controls-mute-button {
|
||
width: 28px;
|
||
height: 28px;
|
||
margin: 0 3px;
|
||
}
|
||
|
||
/* 超小屏幕文件消息优化 */
|
||
.file-message {
|
||
padding: 8px;
|
||
gap: 8px;
|
||
}
|
||
|
||
.file-icon-wrapper {
|
||
width: 36px;
|
||
height: 36px;
|
||
}
|
||
|
||
.file-icon-wrapper i {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.file-info .file-name {
|
||
font-size: 0.85em;
|
||
}
|
||
|
||
.file-details .file-size {
|
||
font-size: 0.7em;
|
||
}
|
||
|
||
.file-details .file-type {
|
||
font-size: 0.65em;
|
||
padding: 1px 3px;
|
||
}
|
||
}
|
||
|
||
/* 管理员设置样式 */
|
||
.admin-settings {
|
||
padding: 15px;
|
||
border-bottom: 1px solid #eee;
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
.admin-settings-header {
|
||
font-size: 0.9em;
|
||
font-weight: 600;
|
||
color: #666;
|
||
margin-bottom: 10px;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.admin-input-container {
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.admin-ip-input {
|
||
flex: 1;
|
||
padding: 8px 12px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 6px;
|
||
font-size: 0.9em;
|
||
outline: none;
|
||
transition: border-color 0.3s ease;
|
||
}
|
||
|
||
.admin-ip-input:focus {
|
||
border-color: var(--primary-color);
|
||
}
|
||
|
||
.admin-set-btn {
|
||
width: 36px;
|
||
height: 36px;
|
||
border: none;
|
||
border-radius: 6px;
|
||
background: var(--primary-color);
|
||
color: white;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.admin-set-btn:hover {
|
||
background: var(--secondary-color);
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.admin-set-btn i {
|
||
font-size: 1.1em;
|
||
}
|
||
|
||
.admin-status {
|
||
padding: 6px 10px;
|
||
border-radius: 15px;
|
||
background: rgba(0, 0, 0, 0.05);
|
||
text-align: center;
|
||
}
|
||
|
||
.admin-status-text {
|
||
font-size: 0.8em;
|
||
color: #666;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.admin-status.admin-set .admin-status-text {
|
||
color: #28a745;
|
||
}
|
||
|
||
.admin-status.is-admin .admin-status-text {
|
||
color: #dc3545;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 管理员功能样式 */
|
||
.admin-functions {
|
||
padding: 15px;
|
||
border-bottom: 1px solid #eee;
|
||
background: linear-gradient(135deg, #fff5f5 0%, #fff0f0 100%);
|
||
}
|
||
|
||
.admin-functions-header {
|
||
font-size: 0.9em;
|
||
font-weight: 600;
|
||
color: #dc3545;
|
||
margin-bottom: 10px;
|
||
letter-spacing: 0.5px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.admin-functions-header::before {
|
||
content: "👑";
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
.admin-function-btn {
|
||
width: 100%;
|
||
padding: 12px 15px;
|
||
border: none;
|
||
border-radius: 8px;
|
||
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
|
||
color: white;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
font-size: 0.9em;
|
||
font-weight: 500;
|
||
transition: all 0.3s ease;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.admin-function-btn:hover {
|
||
background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
|
||
}
|
||
|
||
.admin-function-btn:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.admin-function-btn i {
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
.clear-all-btn {
|
||
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
|
||
}
|
||
|
||
.clear-all-btn:hover {
|
||
background: linear-gradient(135deg, #bd2130 0%, #a71e2a 100%);
|
||
}
|
||
|
||
/* 移动端管理员样式优化 */
|
||
@media (max-width: 768px) {
|
||
.admin-settings {
|
||
margin: 0 12px;
|
||
border-radius: 12px;
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
.admin-input-container {
|
||
gap: 10px;
|
||
}
|
||
|
||
.admin-ip-input {
|
||
padding: 10px 14px;
|
||
font-size: 16px; /* 防止iOS缩放 */
|
||
}
|
||
|
||
.admin-set-btn {
|
||
width: 40px;
|
||
height: 40px;
|
||
}
|
||
|
||
.admin-functions {
|
||
margin: 0 12px;
|
||
border-radius: 12px;
|
||
background: linear-gradient(135deg, #fff5f5 0%, #fff0f0 100%);
|
||
}
|
||
|
||
.admin-function-btn {
|
||
padding: 14px 16px;
|
||
font-size: 1em;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.admin-function-btn:active {
|
||
transform: scale(0.98);
|
||
}
|
||
}
|
||
|
||
/* 超小屏幕图片消息优化 */
|
||
.image-message {
|
||
margin: 8px 0;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.image-download-btn {
|
||
width: 44px;
|
||
height: 44px;
|
||
}
|
||
|
||
.image-download-btn i {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.image-click-hint {
|
||
font-size: 0.7em;
|
||
padding: 3px 6px;
|
||
top: 6px;
|
||
left: 6px;
|
||
}
|
||
|
||
.image-info-overlay {
|
||
padding: 6px 10px;
|
||
}
|
||
|
||
.image-info-overlay .file-name {
|
||
font-size: 0.8em;
|
||
}
|
||
|
||
.image-info-overlay .file-size {
|
||
font-size: 0.7em;
|
||
}
|
||
|
||
/* 超小屏幕播放器控件 */
|
||
.audio-message .media-player::-webkit-media-controls-play-button {
|
||
width: 42px;
|
||
height: 42px;
|
||
margin: 0 8px 0 6px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="app-container">
|
||
<!-- 侧边栏 -->
|
||
<div class="sidebar" id="sidebar">
|
||
<button class="sidebar-toggle" onclick="toggleSidebar()">
|
||
<i class="bi bi-chevron-right"></i>
|
||
</button>
|
||
<div class="sidebar-header">
|
||
<span>聊天模式</span>
|
||
<span id="currentIp"></span>
|
||
</div>
|
||
<div class="sidebar-actions">
|
||
<a href="/" class="action-btn">
|
||
<i class="bi bi-file-earmark-arrow-up"></i>
|
||
<span>返回文件传输</span>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- 管理员设置区域 -->
|
||
<div class="admin-settings">
|
||
<div class="admin-settings-header">管理员信息</div>
|
||
<div class="admin-status" id="adminStatus">
|
||
<span class="admin-status-text">正在检查管理员权限...</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 管理员功能区域（仅管理员可见） -->
|
||
<div class="admin-functions" id="adminFunctions" style="display: none;">
|
||
<div class="admin-functions-header">管理员功能</div>
|
||
<button class="admin-function-btn clear-all-btn" onclick="clearAllChatHistory()">
|
||
<i class="bi bi-trash3"></i>
|
||
<span>清空所有历史记录</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="chat-modes">
|
||
<div class="mode-item active" data-mode="group">
|
||
<i class="bi bi-people-fill"></i>
|
||
<span>群聊</span>
|
||
</div>
|
||
<div class="mode-item" data-mode="private">
|
||
<i class="bi bi-person-fill"></i>
|
||
<span>私聊</span>
|
||
</div>
|
||
</div>
|
||
<div class="chat-list" id="chatList">
|
||
<div class="chat-list-header">聊天列表</div>
|
||
<div class="chat-list-content" id="chatListContent">
|
||
<!-- 聊天列表将通过 JavaScript 动态添加 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 主聊天区域 -->
|
||
<div class="chat-main">
|
||
<div class="chat-header">
|
||
<button class="menu-toggle" onclick="toggleSidebar()">
|
||
<div class="menu-icon">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</div>
|
||
</button>
|
||
<div class="chat-title-container">
|
||
<img src="/image/logo2.png" alt="Logo" style="height: 24px; width: auto; margin-right: 8px; vertical-align: middle;">
|
||
<span class="chat-title" id="chatTitle">内网群聊</span>
|
||
</div>
|
||
<div class="connection-status">
|
||
<span class="status-indicator" id="connectionIndicator"></span>
|
||
<span>在线</span>
|
||
<span class="ip-display">
|
||
<i class="bi bi-pc-display"></i>
|
||
<span id="headerIp"></span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="chat-messages" id="messageContainer">
|
||
<div class="drag-overlay" id="dragOverlay">
|
||
<i class="bi bi-cloud-upload"></i>
|
||
<h3>释放发送文件</h3>
|
||
</div>
|
||
<!-- 现有的消息内容 -->
|
||
</div>
|
||
<div class="chat-input-container">
|
||
<input type="file" id="fileInput" class="file-input">
|
||
<button class="upload-btn" onclick="document.getElementById('fileInput').click()">
|
||
<i class="bi bi-paperclip"></i>
|
||
</button>
|
||
<input type="text" class="chat-input" id="messageInput" placeholder="输入消息...">
|
||
<button class="send-btn" onclick="sendMessage()">
|
||
<i class="bi bi-send-fill"></i>
|
||
<span>发送</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 在 body 开始处添加遮罩层 -->
|
||
<div class="sidebar-overlay" id="sidebarOverlay" onclick="toggleSidebar()"></div>
|
||
|
||
<script>
|
||
let ws = null;
|
||
let currentMode = 'group';
|
||
let targetIp = '';
|
||
let myIp = '';
|
||
let sidebarVisible = false;
|
||
|
||
// 添加聊天管理相关变量
|
||
let chatHistory = {
|
||
group: [],
|
||
private: {}
|
||
};
|
||
let unreadMessages = {};
|
||
let currentChatTarget = null;
|
||
let isLoadingHistory = false; // 添加历史加载状态标识
|
||
|
||
// 添加IP名称映射相关变量
|
||
let ipNameMapping = {};
|
||
let ipAvatarMapping = {};
|
||
let availableUsers = [];
|
||
|
||
// 管理员相关变量
|
||
let adminIp = null;
|
||
let isAdmin = false;
|
||
|
||
// 初始化 WebSocket 连接
|
||
async function initializeChat() {
|
||
try {
|
||
// 获取真实IP
|
||
const response = await fetch('/get_ip');
|
||
const data = await response.json();
|
||
myIp = data.ip;
|
||
console.log('My IP:', myIp);
|
||
|
||
// 获取IP名称映射
|
||
await fetchIpNameMapping();
|
||
|
||
// 更新显示（使用名称）
|
||
const myName = getDisplayName(myIp);
|
||
document.getElementById('currentIp').textContent = `本机: ${myName}${myName !== myIp ? ` (${myIp})` : ''}`;
|
||
document.getElementById('headerIp').textContent = myName;
|
||
|
||
// 建立WebSocket连接
|
||
connectWebSocket();
|
||
initializeChatList();
|
||
|
||
// 从本地存储恢复聊天历史
|
||
loadLocalChatHistory();
|
||
|
||
// 初始化管理员功能
|
||
initializeAdminFeatures();
|
||
} catch (error) {
|
||
console.error('初始化失败:', error);
|
||
}
|
||
}
|
||
|
||
function connectWebSocket() {
|
||
ws = new WebSocket(`ws://${window.location.host}/ws`);
|
||
|
||
ws.onopen = function() {
|
||
console.log('WebSocket连接已建立');
|
||
document.getElementById('connectionIndicator').classList.add('connected');
|
||
};
|
||
|
||
ws.onmessage = function(event) {
|
||
console.log('收到消息:', event.data);
|
||
const data = JSON.parse(event.data);
|
||
|
||
// 处理系统消息
|
||
if (data.type === 'system') {
|
||
addSystemMessage(data.message);
|
||
return;
|
||
}
|
||
|
||
// 处理管理员操作消息
|
||
if (data.type === 'admin_action') {
|
||
if (data.action === 'clear_all_history') {
|
||
// 如果收到管理员清空历史的通知且不是自己发送的
|
||
if (data.admin_ip !== myIp) {
|
||
// 清空本地历史
|
||
chatHistory.group = [];
|
||
chatHistory.private = {};
|
||
unreadMessages = {};
|
||
|
||
// 清空显示
|
||
const messageContainer = document.getElementById('messageContainer');
|
||
messageContainer.innerHTML = '';
|
||
|
||
// 重新初始化聊天列表
|
||
initializeChatList();
|
||
|
||
// 切换到群聊模式
|
||
currentMode = 'group';
|
||
currentChatTarget = null;
|
||
document.getElementById('chatTitle').textContent = '内网群聊';
|
||
updateModeButtons('group');
|
||
|
||
addSystemMessage(`📢 ${data.message}`);
|
||
showToast('管理员已清空所有聊天记录');
|
||
}
|
||
}
|
||
return;
|
||
}
|
||
|
||
// 处理历史消息开始和结束标识
|
||
if (data.type === 'history_start') {
|
||
isLoadingHistory = true;
|
||
console.log('开始加载历史消息');
|
||
addSystemMessage(data.message);
|
||
return;
|
||
}
|
||
|
||
if (data.type === 'history_end') {
|
||
isLoadingHistory = false;
|
||
console.log('历史消息加载结束');
|
||
addSystemMessage(data.message);
|
||
// 保存到本地存储
|
||
saveLocalChatHistory();
|
||
// 滚动到最新消息
|
||
setTimeout(() => {
|
||
const messageContainer = document.getElementById('messageContainer');
|
||
messageContainer.scrollTop = messageContainer.scrollHeight;
|
||
}, 100);
|
||
return;
|
||
}
|
||
|
||
// 如果是自己发送的消息且已经显示过，并且不是历史消息，直接返回
|
||
if (data.ip === myIp && data.alreadyDisplayed && !data.is_history) {
|
||
console.log('跳过已显示的消息');
|
||
return;
|
||
}
|
||
|
||
// 处理历史消息的存储
|
||
const isHistory = data.is_history || isLoadingHistory;
|
||
console.log('处理消息:', {
|
||
message: data.message,
|
||
ip: data.ip,
|
||
isHistory: isHistory,
|
||
currentMode: currentMode,
|
||
isLoadingHistory: isLoadingHistory
|
||
});
|
||
|
||
// 处理私聊消息
|
||
if (data.targetIp) {
|
||
const chatPartner = data.ip === myIp ? data.targetIp : data.ip;
|
||
|
||
// 存储到私聊历史
|
||
if (!chatHistory.private[chatPartner]) {
|
||
chatHistory.private[chatPartner] = [];
|
||
}
|
||
|
||
// 检查是否已存在相同消息（避免重复）
|
||
const isDuplicate = chatHistory.private[chatPartner].some(msg =>
|
||
msg.timestamp === data.timestamp &&
|
||
msg.message === data.message &&
|
||
msg.ip === data.ip
|
||
);
|
||
|
||
if (!isDuplicate) {
|
||
chatHistory.private[chatPartner].push(data);
|
||
|
||
// 按时间排序
|
||
chatHistory.private[chatPartner].sort((a, b) =>
|
||
(a.timestamp || 0) - (b.timestamp || 0)
|
||
);
|
||
}
|
||
|
||
// 如果是当前聊天对象，显示消息
|
||
if (currentMode === 'private' && currentChatTarget === chatPartner) {
|
||
if (!isDuplicate) {
|
||
addMessage(data, isHistory);
|
||
}
|
||
} else if (!isHistory) {
|
||
// 如果不是历史消息且不是当前聊天，添加未读提醒
|
||
updateChatList(chatPartner, data.message);
|
||
addUnreadBadge(chatPartner);
|
||
}
|
||
} else {
|
||
// 处理群聊消息
|
||
const isDuplicate = chatHistory.group.some(msg =>
|
||
msg.timestamp === data.timestamp &&
|
||
msg.message === data.message &&
|
||
msg.ip === data.ip
|
||
);
|
||
|
||
if (!isDuplicate) {
|
||
chatHistory.group.push(data);
|
||
|
||
// 按时间排序
|
||
chatHistory.group.sort((a, b) =>
|
||
(a.timestamp || 0) - (b.timestamp || 0)
|
||
);
|
||
|
||
// 限制历史消息数量
|
||
if (chatHistory.group.length > 200) {
|
||
chatHistory.group = chatHistory.group.slice(-200);
|
||
}
|
||
}
|
||
|
||
// 在群聊模式下始终显示消息（包括历史消息）
|
||
if (currentMode === 'group') {
|
||
if (!isDuplicate || isHistory) {
|
||
console.log('显示群聊消息:', data, '是否历史:', isHistory);
|
||
addMessage(data, isHistory);
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
ws.onclose = function() {
|
||
console.log('WebSocket连接已关闭');
|
||
document.getElementById('connectionIndicator').classList.remove('connected');
|
||
setTimeout(connectWebSocket, 3000);
|
||
};
|
||
|
||
ws.onerror = function(error) {
|
||
console.error('WebSocket错误:', error);
|
||
};
|
||
}
|
||
|
||
// 本地存储相关函数
|
||
function saveLocalChatHistory() {
|
||
try {
|
||
const historyData = {
|
||
group: chatHistory.group,
|
||
private: chatHistory.private,
|
||
lastSaved: new Date().toISOString()
|
||
};
|
||
localStorage.setItem(`chatHistory_${myIp}`, JSON.stringify(historyData));
|
||
console.log('聊天历史已保存到本地存储');
|
||
} catch (error) {
|
||
console.error('保存本地聊天历史失败:', error);
|
||
}
|
||
}
|
||
|
||
function loadLocalChatHistory() {
|
||
try {
|
||
const savedHistory = localStorage.getItem(`chatHistory_${myIp}`);
|
||
if (savedHistory) {
|
||
const historyData = JSON.parse(savedHistory);
|
||
chatHistory.group = historyData.group || [];
|
||
chatHistory.private = historyData.private || {};
|
||
console.log('从本地存储加载聊天历史:', {
|
||
群聊消息: chatHistory.group.length,
|
||
私聊对话: Object.keys(chatHistory.private).length
|
||
});
|
||
|
||
// 更新聊天列表
|
||
Object.keys(chatHistory.private).forEach(ip => {
|
||
if (ip !== myIp && chatHistory.private[ip].length > 0) {
|
||
const lastMessage = chatHistory.private[ip][chatHistory.private[ip].length - 1];
|
||
updateChatList(ip, lastMessage.message || '文件消息');
|
||
}
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.error('加载本地聊天历史失败:', error);
|
||
}
|
||
}
|
||
|
||
// 清理本地存储的历史数据
|
||
function clearLocalChatHistory() {
|
||
try {
|
||
localStorage.removeItem(`chatHistory_${myIp}`);
|
||
chatHistory.group = [];
|
||
chatHistory.private = {};
|
||
console.log('本地聊天历史已清空');
|
||
} catch (error) {
|
||
console.error('清空本地历史失败:', error);
|
||
}
|
||
}
|
||
|
||
// 添加颜色生成函数
|
||
function generateColor(str) {
|
||
let hash = 0;
|
||
for (let i = 0; i < str.length; i++) {
|
||
hash = str.charCodeAt(i) + ((hash << 5) - hash);
|
||
}
|
||
const colors = [
|
||
'#4CAF50', '#2196F3', '#9C27B0', '#FF9800',
|
||
'#E91E63', '#3F51B5', '#009688', '#795548'
|
||
];
|
||
return colors[Math.abs(hash) % colors.length];
|
||
}
|
||
|
||
// 创建头像元素的统一函数
|
||
function createAvatarElement(ip, size = '32px', fontSize = '1.1em') {
|
||
const avatar = generateAvatar(ip);
|
||
|
||
if (avatar.type === 'image') {
|
||
// 生成回退emoji
|
||
const emojis = ['🌟', '🎯', '🎨', '🎭', '🎪', '🎫', '🎮', '🎲', '🎸', '🎺',
|
||
'🎭', '🎪', '🎨', '🎯', '🌟', '🎲', '🎮', '🎫', '🎸', '🎺'];
|
||
const fallbackEmoji = emojis[ip.split('.')[3] % emojis.length];
|
||
|
||
return `
|
||
<div style="
|
||
width: ${size};
|
||
height: ${size};
|
||
border-radius: 50%;
|
||
background-color: ${avatar.color};
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-size: ${fontSize};
|
||
position: relative;
|
||
overflow: hidden;
|
||
">
|
||
<img src="${avatar.src}" alt="头像"
|
||
style="width: 100%; height: 100%; border-radius: 50%; object-fit: cover;"
|
||
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
|
||
<span style="display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; align-items: center; justify-content: center;">${fallbackEmoji}</span>
|
||
</div>
|
||
`;
|
||
} else {
|
||
return `
|
||
<div style="
|
||
width: ${size};
|
||
height: ${size};
|
||
border-radius: 50%;
|
||
background-color: ${avatar.color};
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-size: ${fontSize};
|
||
">
|
||
${avatar.icon}
|
||
</div>
|
||
`;
|
||
}
|
||
}
|
||
|
||
//// / 生成用户头像
|
||
function generateAvatar(ip) {
|
||
// 如果有配置的头像，优先使用配置的头像
|
||
if (ipAvatarMapping[ip]) {
|
||
return {
|
||
type: 'image',
|
||
src: ipAvatarMapping[ip],
|
||
color: generateColor(ip)
|
||
};
|
||
}
|
||
|
||
// 使用固定的 emoji 数组作为头像
|
||
const emojis = ['🌟', '🎯', '🎨', '🎭', '🎪', '🎫', '🎮', '🎲', '🎸', '🎺',
|
||
'🎭', '🎪', '🎨', '🎯', '🌟', '🎲', '🎮', '🎫', '🎸', '🎺'];
|
||
const icon = emojis[ip.split('.')[3] % emojis.length];
|
||
return {
|
||
type: 'emoji',
|
||
icon: icon,
|
||
color: generateColor(ip)
|
||
};
|
||
}
|
||
|
||
// 修改消息显示函数
|
||
function addMessage(data, isHistory = false) {
|
||
const messageContainer = document.getElementById('messageContainer');
|
||
|
||
// 检查是否已存在相同消息（避免重复显示）
|
||
const existingMessages = messageContainer.querySelectorAll('.message-container');
|
||
for (let existingMsg of existingMessages) {
|
||
const existingTimestamp = existingMsg.getAttribute('data-timestamp');
|
||
const existingIp = existingMsg.getAttribute('data-ip');
|
||
const existingContent = existingMsg.querySelector('.message-content');
|
||
|
||
if (existingTimestamp == data.timestamp &&
|
||
existingIp === data.ip &&
|
||
existingContent &&
|
||
existingContent.textContent.includes(data.message)) {
|
||
console.log('跳过重复消息:', data);
|
||
return;
|
||
}
|
||
}
|
||
|
||
const messageWrapper = document.createElement('div');
|
||
const isCurrentUser = data.ip === myIp;
|
||
const avatar = generateAvatar(data.ip);
|
||
|
||
messageWrapper.className = `message-container ${isCurrentUser ? 'sent' : 'received'}`;
|
||
messageWrapper.setAttribute('data-timestamp', data.timestamp);
|
||
messageWrapper.setAttribute('data-ip', data.ip);
|
||
|
||
// 如果是历史消息，添加特殊样式
|
||
if (isHistory) {
|
||
messageWrapper.classList.add('history-message');
|
||
}
|
||
|
||
let messageContent = '';
|
||
if (data.type === 'file') {
|
||
try {
|
||
const fileData = JSON.parse(data.message);
|
||
console.log('解析文件数据:', fileData); // 添加调试日志
|
||
|
||
// 验证文件数据完整性
|
||
if (!fileData.fileName || !fileData.filePath) {
|
||
throw new Error('文件数据不完整');
|
||
}
|
||
|
||
const encodedFileData = encodeURIComponent(JSON.stringify(fileData));
|
||
const fileExtension = fileData.fileName.toLowerCase().split('.').pop();
|
||
const detectedFileType = getFileType(fileData.fileName, fileData.fileType || '');
|
||
const fileIcon = getFileIcon(detectedFileType, fileExtension);
|
||
|
||
// 根据文件类型显示不同的内容
|
||
if (detectedFileType === 'image' || fileData.isImage) {
|
||
messageContent = `
|
||
<div class="media-message image-message" onclick="handleImageClick(this, event)">
|
||
<img src="${fileData.filePath}" alt="${fileData.fileName}"
|
||
onclick="event.stopPropagation(); window.open('${fileData.filePath}', '_blank')"
|
||
loading="lazy">
|
||
<div class="image-click-hint">点击图片下载</div>
|
||
<div class="image-download-overlay">
|
||
<button class="image-download-btn" onclick="event.stopPropagation(); handleFileAction('${encodedFileData}')">
|
||
<i class="bi bi-download"></i>
|
||
</button>
|
||
</div>
|
||
<div class="image-info-overlay">
|
||
<div class="file-name">${fileData.fileName}</div>
|
||
<div class="file-size">${formatFileSize(fileData.fileSize)}</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
} else if (detectedFileType === 'audio') {
|
||
messageContent = `
|
||
<div class="media-message audio-message">
|
||
<div class="media-header">
|
||
<i class="${fileIcon}"></i>
|
||
<div class="media-title">
|
||
<div class="file-name">${fileData.fileName}</div>
|
||
<div class="file-size">${formatFileSize(fileData.fileSize)}</div>
|
||
</div>
|
||
</div>
|
||
<audio controls preload="metadata" class="media-player">
|
||
<source src="${fileData.filePath}" type="${fileData.fileType || 'audio/mpeg'}">
|
||
您的浏览器不支持音频播放。
|
||
</audio>
|
||
<div class="audio-download-overlay">
|
||
<button class="audio-download-btn" onclick="handleFileAction('${encodedFileData}')">
|
||
<i class="bi bi-download"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
} else if (detectedFileType === 'video') {
|
||
messageContent = `
|
||
<div class="media-message video-message">
|
||
<div class="media-header">
|
||
<i class="${fileIcon}"></i>
|
||
<div class="media-title">
|
||
<div class="file-name">${fileData.fileName}</div>
|
||
<div class="file-size">${formatFileSize(fileData.fileSize)}</div>
|
||
</div>
|
||
</div>
|
||
<video controls preload="metadata" class="media-player">
|
||
<source src="${fileData.filePath}" type="${fileData.fileType || 'video/mp4'}">
|
||
您的浏览器不支持视频播放。
|
||
</video>
|
||
<div class="video-download-overlay">
|
||
<button class="video-download-btn" onclick="handleFileAction('${encodedFileData}')">
|
||
<i class="bi bi-download"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
} else {
|
||
// 其他文件类型的通用显示
|
||
messageContent = `
|
||
<div class="file-message">
|
||
<div class="file-icon-wrapper">
|
||
<i class="${fileIcon}"></i>
|
||
</div>
|
||
<div class="file-info">
|
||
<div class="file-name">${fileData.fileName}</div>
|
||
<div class="file-details">
|
||
<span class="file-size">${formatFileSize(fileData.fileSize)}</span>
|
||
<span class="file-type">${detectedFileType.toUpperCase()}</span>
|
||
</div>
|
||
</div>
|
||
<button class="copy-btn download-btn" onclick="handleFileAction('${encodedFileData}')">
|
||
<i class="bi bi-download"></i>
|
||
</button>
|
||
</div>
|
||
`;
|
||
}
|
||
} catch (error) {
|
||
console.error('文件消息处理失败:', error);
|
||
messageContent = `
|
||
<div class="message-content error">
|
||
<i class="bi bi-exclamation-triangle"></i>
|
||
文件消息处理失败: ${error.message}
|
||
</div>
|
||
`;
|
||
}
|
||
} else {
|
||
messageContent = `
|
||
<div class="message-content">
|
||
${data.message}
|
||
<button class="copy-btn" onclick="copyMessage('${data.message.replace(/'/g, "\\'")}')">
|
||
<i class="bi bi-clipboard"></i>
|
||
</button>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
// 添加历史消息标识
|
||
const historyBadge = isHistory ? '<span class="history-badge">历史</span>' : '';
|
||
|
||
// 获取用户显示名称
|
||
const senderName = getDisplayName(data.ip);
|
||
const userDisplayText = isCurrentUser ? '我' : senderName;
|
||
|
||
messageWrapper.innerHTML = `
|
||
<div class="user-tag">${userDisplayText} ${historyBadge}</div>
|
||
<div class="avatar" style="background-color: transparent !important; padding: 0;">
|
||
${createAvatarElement(data.ip, '32px', '1.1em')}
|
||
</div>
|
||
<div class="message-content-wrapper">
|
||
<div class="message ${isCurrentUser ? 'sent' : 'received'}">
|
||
${messageContent}
|
||
<div class="message-info">
|
||
<div class="info-item ip-info">
|
||
<i class="bi bi-pc-display"></i>
|
||
<span>${senderName}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<i class="bi bi-clock"></i>
|
||
<span class="message-time">${formatTime(data.timestamp)}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
messageContainer.appendChild(messageWrapper);
|
||
|
||
// 如果不是历史消息，滚动到底部
|
||
if (!isHistory && !isLoadingHistory) {
|
||
setTimeout(() => {
|
||
messageContainer.scrollTop = messageContainer.scrollHeight;
|
||
}, 50);
|
||
}
|
||
}
|
||
|
||
// 添加系统消息显示函数
|
||
function addSystemMessage(message) {
|
||
const messageContainer = document.getElementById('messageContainer');
|
||
const systemMessage = document.createElement('div');
|
||
systemMessage.className = 'system-message';
|
||
systemMessage.innerHTML = `
|
||
<div class="system-content">
|
||
<i class="bi bi-info-circle"></i>
|
||
<span>${message}</span>
|
||
</div>
|
||
`;
|
||
messageContainer.appendChild(systemMessage);
|
||
messageContainer.scrollTop = messageContainer.scrollHeight;
|
||
}
|
||
|
||
// 添加时间格式化函数
|
||
function formatTime(timestamp) {
|
||
const date = new Date(timestamp);
|
||
const hours = date.getHours().toString().padStart(2, '0');
|
||
const minutes = date.getMinutes().toString().padStart(2, '0');
|
||
const seconds = date.getSeconds().toString().padStart(2, '0');
|
||
return `${hours}:${minutes}:${seconds}`;
|
||
}
|
||
|
||
// 发送消息时保存到历史
|
||
function sendMessage() {
|
||
const messageInput = document.getElementById('messageInput');
|
||
const message = messageInput.value.trim();
|
||
|
||
if (!message || !ws || ws.readyState !== WebSocket.OPEN) {
|
||
return;
|
||
}
|
||
|
||
const messageData = {
|
||
message: message,
|
||
timestamp: new Date().getTime(),
|
||
alreadyDisplayed: true // 标记消息已在发送者端显示
|
||
};
|
||
|
||
if (currentMode === 'private' && currentChatTarget) {
|
||
messageData.targetIp = currentChatTarget;
|
||
}
|
||
|
||
try {
|
||
// 发送消息
|
||
ws.send(JSON.stringify(messageData));
|
||
messageInput.value = '';
|
||
|
||
// 添加到本地显示和历史记录
|
||
const localMessage = {
|
||
...messageData,
|
||
ip: myIp
|
||
};
|
||
|
||
// 存储消息到本地历史
|
||
if (currentMode === 'private' && currentChatTarget) {
|
||
if (!chatHistory.private[currentChatTarget]) {
|
||
chatHistory.private[currentChatTarget] = [];
|
||
}
|
||
chatHistory.private[currentChatTarget].push(localMessage);
|
||
|
||
// 保持时间排序
|
||
chatHistory.private[currentChatTarget].sort((a, b) =>
|
||
(a.timestamp || 0) - (b.timestamp || 0)
|
||
);
|
||
|
||
// 更新聊天列表
|
||
updateChatList(currentChatTarget, message);
|
||
} else {
|
||
chatHistory.group.push(localMessage);
|
||
|
||
// 保持时间排序
|
||
chatHistory.group.sort((a, b) =>
|
||
(a.timestamp || 0) - (b.timestamp || 0)
|
||
);
|
||
|
||
// 限制历史消息数量
|
||
if (chatHistory.group.length > 200) {
|
||
chatHistory.group = chatHistory.group.slice(-200);
|
||
}
|
||
}
|
||
|
||
// 显示消息
|
||
addMessage(localMessage);
|
||
|
||
// 滚动到最新消息
|
||
const messageContainer = document.getElementById('messageContainer');
|
||
messageContainer.scrollTop = messageContainer.scrollHeight;
|
||
|
||
// 保存到本地存储
|
||
saveLocalChatHistory();
|
||
|
||
} catch (error) {
|
||
console.error('发送消息失败:', error);
|
||
showToast('发送消息失败');
|
||
}
|
||
}
|
||
|
||
function handleKeyPress(event) {
|
||
if (event.key === 'Enter') {
|
||
sendMessage();
|
||
}
|
||
}
|
||
|
||
function toggleSidebar() {
|
||
const sidebar = document.getElementById('sidebar');
|
||
const overlay = document.getElementById('sidebarOverlay');
|
||
const toggleIcon = sidebar.querySelector('.sidebar-toggle i');
|
||
|
||
sidebarVisible = !sidebarVisible;
|
||
|
||
sidebar.classList.toggle('visible');
|
||
overlay.classList.toggle('visible');
|
||
|
||
// 更新箭头方向
|
||
if (sidebarVisible) {
|
||
toggleIcon.classList.remove('bi-chevron-right');
|
||
toggleIcon.classList.add('bi-chevron-left');
|
||
document.body.style.overflow = 'hidden'; // 防止背景滚动
|
||
} else {
|
||
toggleIcon.classList.remove('bi-chevron-left');
|
||
toggleIcon.classList.add('bi-chevron-right');
|
||
document.body.style.overflow = '';
|
||
}
|
||
}
|
||
|
||
|
||
function switchMode(mode) {
|
||
// 清空消息容器
|
||
const messageContainer = document.getElementById('messageContainer');
|
||
messageContainer.innerHTML = '';
|
||
|
||
if (mode === 'private') {
|
||
// 私聊模式 - 显示用户选择界面
|
||
showPrivateChatSelector();
|
||
return; // 不立即切换模式，等用户选择后再切换
|
||
} else {
|
||
// 群聊模式
|
||
switchToGroupChat();
|
||
}
|
||
|
||
// 保存状态到本地存储
|
||
saveLocalChatHistory();
|
||
|
||
// 滚动到最新消息
|
||
setTimeout(() => {
|
||
messageContainer.scrollTop = messageContainer.scrollHeight;
|
||
}, 100);
|
||
}
|
||
|
||
// 添加更新模式按钮状态的函数
|
||
function updateModeButtons(activeMode) {
|
||
document.querySelectorAll('.mode-item').forEach(btn => {
|
||
btn.classList.remove('active');
|
||
});
|
||
document.querySelector(`[data-mode="${activeMode}"]`).classList.add('active');
|
||
}
|
||
|
||
// 修改事件监听器绑定
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 为群聊和私聊按钮添加点击事件
|
||
document.querySelectorAll('.mode-item').forEach(item => {
|
||
item.addEventListener('click', function(e) {
|
||
e.preventDefault(); // 防止事件冒泡
|
||
const mode = this.getAttribute('data-mode');
|
||
switchMode(mode);
|
||
});
|
||
});
|
||
|
||
// 点击主聊天区域时关闭侧边栏（移动端）
|
||
document.querySelector('.chat-main').addEventListener('click', function(e) {
|
||
if (sidebarVisible && window.innerWidth <= 768) {
|
||
if (!e.target.closest('.menu-toggle')) {
|
||
toggleSidebar();
|
||
}
|
||
}
|
||
});
|
||
|
||
// 为输入框添加回车键事件监听
|
||
const messageInput = document.getElementById('messageInput');
|
||
messageInput.addEventListener('keypress', function(event) {
|
||
if (event.key === 'Enter') {
|
||
sendMessage();
|
||
}
|
||
});
|
||
});
|
||
|
||
// 优化复制功能
|
||
async function copyMessage(text) {
|
||
try {
|
||
// 使用 Clipboard API
|
||
await navigator.clipboard.writeText(text);
|
||
showCopyToast('复制成功');
|
||
} catch (err) {
|
||
// 降级方案
|
||
const textarea = document.createElement('textarea');
|
||
textarea.value = text;
|
||
textarea.style.position = 'fixed';
|
||
textarea.style.left = '-9999px';
|
||
textarea.style.top = '0';
|
||
document.body.appendChild(textarea);
|
||
|
||
try {
|
||
// 选择文本
|
||
if (navigator.userAgent.match(/ipad|iphone/i)) {
|
||
// iOS 设备特殊处理
|
||
const range = document.createRange();
|
||
range.selectNodeContents(textarea);
|
||
const selection = window.getSelection();
|
||
selection.removeAllRanges();
|
||
selection.addRange(range);
|
||
textarea.setSelectionRange(0, 999999);
|
||
} else {
|
||
textarea.select();
|
||
}
|
||
|
||
// 执行复制
|
||
const successful = document.execCommand('copy');
|
||
if (successful) {
|
||
showCopyToast('复制成功');
|
||
} else {
|
||
showCopyToast('复制失败，请手动复制');
|
||
}
|
||
} catch (err) {
|
||
showCopyToast('复制失败，请手动复制');
|
||
} finally {
|
||
document.body.removeChild(textarea);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 优化提示显示
|
||
function showCopyToast(message) {
|
||
let toast = document.querySelector('.copy-toast');
|
||
if (!toast) {
|
||
toast = document.createElement('div');
|
||
toast.className = 'copy-toast';
|
||
document.body.appendChild(toast);
|
||
}
|
||
|
||
// 清除之前的定时器
|
||
if (toast.timeoutId) {
|
||
clearTimeout(toast.timeoutId);
|
||
}
|
||
|
||
toast.textContent = message;
|
||
toast.classList.add('show');
|
||
|
||
// 设置新的定时器
|
||
toast.timeoutId = setTimeout(() => {
|
||
toast.classList.remove('show');
|
||
}, 2000);
|
||
}
|
||
|
||
// 在添加消息时的HTML模板中修改复制按钮的位置
|
||
function createMessageHTML(message, isSent) {
|
||
return `
|
||
<div class="message-container ${isSent ? 'sent' : 'received'}">
|
||
<button class="copy-btn" aria-label="复制消息"
|
||
onclick="event.stopPropagation(); copyMessage('${message.text.replace(/'/g, "\\'")}')">
|
||
<i class="bi bi-clipboard"></i>
|
||
</button>
|
||
<div class="message ${isSent ? 'sent' : 'received'}">
|
||
<!-- 其他消息内容 -->
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
// 在 body 标签末尾添加提示元素
|
||
document.body.insertAdjacentHTML('beforeend', '<div class="copy-tooltip"></div>');
|
||
|
||
// 初始化
|
||
initializeChat();
|
||
document.getElementById('messageInput').focus();
|
||
|
||
// 添加窗口大小变化监听
|
||
window.addEventListener('resize', function() {
|
||
const sidebar = document.getElementById('sidebar');
|
||
const toggleIcon = sidebar.querySelector('.sidebar-toggle i');
|
||
|
||
if (window.innerWidth > 768) {
|
||
// 在桌面端保持侧边栏状态
|
||
if (!sidebarVisible) {
|
||
toggleIcon.classList.remove('bi-chevron-left');
|
||
toggleIcon.classList.add('bi-chevron-right');
|
||
}
|
||
} else {
|
||
// 在移动端自动隐藏边栏
|
||
sidebarVisible = false;
|
||
sidebar.classList.remove('visible');
|
||
toggleIcon.classList.remove('bi-chevron-left');
|
||
toggleIcon.classList.add('bi-chevron-right');
|
||
}
|
||
});
|
||
|
||
// 初始化聊天列表
|
||
function initializeChatList() {
|
||
const chatListContent = document.getElementById('chatListContent');
|
||
chatListContent.innerHTML = `
|
||
<div class="chat-item active" data-chat="group">
|
||
<div class="chat-item-avatar" style="background: var(--primary-color)">
|
||
<i class="bi bi-people-fill"></i>
|
||
</div>
|
||
<div class="chat-item-info">
|
||
<div class="chat-item-name">群聊</div>
|
||
<div class="chat-item-last-msg">所有人的聊天室</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
// 为群聊项添加点击事件监听器
|
||
const groupChatItem = chatListContent.querySelector('.chat-item[data-chat="group"]');
|
||
if (groupChatItem) {
|
||
groupChatItem.addEventListener('click', () => {
|
||
switchToGroupChat();
|
||
});
|
||
}
|
||
|
||
// 设置默认为群聊模式，并且不清空消息容器
|
||
currentMode = 'group';
|
||
currentChatTarget = null;
|
||
document.getElementById('chatTitle').textContent = '内网群聊';
|
||
updateModeButtons('group');
|
||
}
|
||
|
||
// 添加或更新聊天项
|
||
function updateChatList(ip, lastMessage) {
|
||
if (ip === myIp) return;
|
||
|
||
const chatListContent = document.getElementById('chatListContent');
|
||
let chatItem = document.querySelector(`.chat-item[data-chat="${ip}"]`);
|
||
|
||
if (!chatItem) {
|
||
const displayName = getDisplayName(ip);
|
||
|
||
chatItem = document.createElement('div');
|
||
chatItem.className = 'chat-item';
|
||
chatItem.setAttribute('data-chat', ip);
|
||
chatItem.innerHTML = `
|
||
<div class="chat-item-avatar" style="background-color: transparent !important; padding: 0;">
|
||
${createAvatarElement(ip, '40px', '1.2em')}
|
||
</div>
|
||
<div class="chat-item-info">
|
||
<div class="chat-item-name">${displayName}</div>
|
||
<div class="chat-item-last-msg"></div>
|
||
</div>
|
||
<div class="chat-item-badge">1</div>
|
||
<div class="chat-item-actions">
|
||
<button class="chat-delete-btn" onclick="deleteChatHistory('${ip}', event)">
|
||
<i class="bi bi-trash"></i>
|
||
</button>
|
||
</div>
|
||
`;
|
||
chatItem.addEventListener('click', () => switchToPrivateChat(ip));
|
||
chatListContent.appendChild(chatItem);
|
||
}
|
||
|
||
// 更新最后一条消息
|
||
chatItem.querySelector('.chat-item-last-msg').textContent = lastMessage;
|
||
}
|
||
|
||
// 切换到私聊
|
||
function switchToPrivateChat(targetIp) {
|
||
currentMode = 'private';
|
||
currentChatTarget = targetIp;
|
||
|
||
// 更新UI
|
||
const targetName = getDisplayName(targetIp);
|
||
document.getElementById('chatTitle').textContent = `与 ${targetName} 的私聊`;
|
||
updateModeButtons('private');
|
||
|
||
// 清除未读消息提醒
|
||
clearUnreadBadge(targetIp);
|
||
|
||
// 清空并显示私聊消息
|
||
const messageContainer = document.getElementById('messageContainer');
|
||
messageContainer.innerHTML = '';
|
||
|
||
// 显示私聊历史
|
||
if (chatHistory.private[targetIp] && chatHistory.private[targetIp].length > 0) {
|
||
const sortedMessages = [...chatHistory.private[targetIp]].sort((a, b) =>
|
||
(a.timestamp || 0) - (b.timestamp || 0)
|
||
);
|
||
|
||
sortedMessages.forEach(msg => {
|
||
addMessage(msg, true); // 标记为历史消息
|
||
});
|
||
|
||
// 添加分隔线
|
||
addSystemMessage('以上为历史消息');
|
||
}
|
||
|
||
// 更新聊天列表状态
|
||
updateChatItemStatus(targetIp);
|
||
|
||
// 滚动到最新消息
|
||
setTimeout(() => {
|
||
messageContainer.scrollTop = messageContainer.scrollHeight;
|
||
}, 100);
|
||
|
||
// 自动关闭侧边栏（移动端）
|
||
if (window.innerWidth <= 768 && sidebarVisible) {
|
||
toggleSidebar();
|
||
}
|
||
}
|
||
|
||
// 切换到群聊
|
||
function switchToGroupChat() {
|
||
currentMode = 'group';
|
||
currentChatTarget = null;
|
||
|
||
// 更新UI
|
||
document.getElementById('chatTitle').textContent = '内网群聊';
|
||
updateModeButtons('group');
|
||
|
||
// 清空并显示群聊消息
|
||
const messageContainer = document.getElementById('messageContainer');
|
||
messageContainer.innerHTML = '';
|
||
|
||
// 显示群聊历史
|
||
displayGroupHistory();
|
||
|
||
// 更新聊天列表状态
|
||
updateChatItemStatus('group');
|
||
|
||
// 自动关闭侧边栏（移动端）
|
||
if (window.innerWidth <= 768 && sidebarVisible) {
|
||
toggleSidebar();
|
||
}
|
||
}
|
||
|
||
// 显示聊天记录
|
||
function displayChatHistory(targetIp) {
|
||
const messageContainer = document.getElementById('messageContainer');
|
||
messageContainer.innerHTML = '';
|
||
|
||
const messages = chatHistory.private[targetIp] || [];
|
||
messages.forEach(data => addMessage(data, false));
|
||
}
|
||
|
||
// 更新聊天项状态
|
||
function updateChatItemStatus(activeIp) {
|
||
document.querySelectorAll('.chat-item').forEach(item => {
|
||
item.classList.remove('active');
|
||
if (item.getAttribute('data-chat') === activeIp) {
|
||
item.classList.add('active');
|
||
}
|
||
});
|
||
}
|
||
|
||
// 添加未读消息提醒
|
||
function addUnreadBadge(ip) {
|
||
if (currentChatTarget !== ip) {
|
||
unreadMessages[ip] = (unreadMessages[ip] || 0) + 1;
|
||
const badge = document.querySelector(`.chat-item[data-chat="${ip}"] .chat-item-badge`);
|
||
if (badge) {
|
||
badge.textContent = unreadMessages[ip];
|
||
badge.classList.add('show');
|
||
// 添加闪烁动画
|
||
badge.style.animation = 'none';
|
||
badge.offsetHeight; // 触发重绘
|
||
badge.style.animation = 'badgePulse 1s infinite';
|
||
}
|
||
}
|
||
}
|
||
|
||
// 清除未读消息提醒
|
||
function clearUnreadBadge(ip) {
|
||
unreadMessages[ip] = 0;
|
||
const badge = document.querySelector(`.chat-item[data-chat="${ip}"] .chat-item-badge`);
|
||
if (badge) {
|
||
badge.classList.remove('show');
|
||
}
|
||
}
|
||
|
||
// 添加提示音函数
|
||
function playNotificationSound() {
|
||
const audio = new Audio('data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBkCY2e/GdSgFKHzK8N2NOwgXZLnv6KJQDgtMpOL0uWYeBj2V1/LJeCoFJHfH8uCRPwgUYbbx7KVTDghIoOD3vGkhBTqS1fPMeywFIHPE9OOVQwgRXrTz76hWDgZEnN75v20jBTeP0/XPfi4FHW/B9eaYRwgOWrH18qtZDgRBmd/8wm8lBTSM0fbSgjAFGWu+9+mcSwgLV6/39K5cDwM+lt//xXInBTGJz/fVhTIFGGi7+OyeTggJVK34961fDwE7k+D/yHUpBS2GzPjYiDQFF2W4+e+hUQgHUaz6+LBiEAE4j97/y3crBSqDyvrbiTYFFWK2+vGjUwgFTqr7+rNkEAA1jd3/znktBSeBx/vdizgFE1+z+/SmVggDTKj8/LVmEQAyi9v/0HsuBSR/xfzfjDoFEV2x/PanWAgBSab9/bhpEQAwh9n/03wtBSF8w/3ikz0FD1qu/fmqWwj/R6T+/7pqEgAuhdf/1X4vBR56wf7klD8FDVis/vutXQj9RaL//71sEwAshNb/14AxBRx3v//nlUEFDFaq//2vXwj8Q6D//79uFAAqgdT/2YIyBRp1vf/qlkMFC1Wo//+yYQj6QZ7//8FwFQAof9P/24QzBRhyuv/sl0UFCVOm//+0Ywj5P5z//8NyFgAmfdH/3YY1BRZwuP/umEYFCFGk//+2ZQj3PZr//8V0FwAkfM//34g2BRRutv/wmUgFBlCj//+4Zwj2O5j//8d1GQAie87/4Yo3BRJstP/ymUkFBU6h//+6aQj1OZb//8l3GgAgec3/44w5BRBqsv/0mkoFA0yf//+8awj0N5X//8t4GwAfeM3/5Y46BQ9osP/2m0wFAkqe//++bQjyNZP//817HQAdd8z/55A7BQ1mr//4nE0FAUid//7AcAjxM5H//899HgAcdcv/6ZE9BQtlrf/6nU8F/0ac//7BcgjwMY///9F/HwAadMv/65M+BQpjq//8nlAF/kSa//7DdAjuL47//9OAIQAZc8r/7JRABQhiqf/+n1IF/EKY//7FdgjuLYz//9WCIgAXcsn/7pZBBQdgp///oFMF+0CW//7HeAjtK4r//9eEIwAWcMj/8JdDBQVfpv//oVUF+T6U//7JegjsKYj//9mGJAAVb8f/8plEBQRdpP//o1cF+DyS//7LfAjrJ4b//9uIJQATbcb/9JpGBQJbo///pVgF9zqQ//7NfgjqJYX//92JJgASbMX/9pxHBQFZof//plkF9jiO//7PgAjpI4P//9+LJwARasT/+J1JBQBYn///qFsF9TaM//7RggjnIYH//+GNKQAPacP/+p9KBf9Wnf//qVwF9DSK//7ThAjmH3///+OPKgAOaML//KBMBf5UnP//q14F8zKI//7VhgjlHn3//+WQLAANZsH//qJNBfxSm///rWAF8jCG//7XiAjkHHv//+eSLQALZcD//6NOBftQmf//rmEF8S6E//7ZigjjGnn//+mULgAKY7///6VQBfpOl///sGMF8CyC//7bjAjiGHf//+uWMAAJYr7//6dRBflMlf//smQF7yqA//7djgihFnX//+2YMQAHYb3//6lTBfhKk///s2YF7iiA//7fkAigFHP//++aMgAGX7z//6tUBfdIkf//tWgF7SZ+//7hlAifEnH///GcNAAFXrr//61WBfZGj///tmkF7CR8//7jlgieDG///fOfNQAEXLn//69XBfVEjf//uGsF6yJ6//7lmAidCm3//fWhNwACW7j//7FZBfRCi///um0F6iB4//7nmgicCGv//fenOAACWbb//7NaBfNAif//vG8F6R52//7pnAibBmn//fmpOgAAWLX//7VcBfI+h///vnAF6Bx0//7rngiaBGf//fusPAAAVrP//7deBfE8hf//wHIF5xpy//7toQiZAmX//f2uPQAAVbL//7lgBfA6g///wnQF5hhw//7vpQiYAGP//f+xPwAAU7D//7phBe84gf//xHYF5RZu//7xpwiXAGH//f+zQQAA[base64 audio data]').play();
|
||
}
|
||
|
||
// 添加闪烁动画样式
|
||
const style = document.createElement('style');
|
||
style.textContent = `
|
||
@keyframes badgePulse {
|
||
0% { transform: scale(1); }
|
||
50% { transform: scale(1.2); }
|
||
100% { transform: scale(1); }
|
||
}
|
||
`;
|
||
document.head.appendChild(style);
|
||
|
||
// 添加状态检查函数
|
||
function checkCurrentMode() {
|
||
console.log('Current Mode:', currentMode);
|
||
console.log('Current Target:', currentChatTarget);
|
||
console.log('Chat History:', chatHistory);
|
||
}
|
||
|
||
// 添加显示群聊历史的函数
|
||
function displayGroupHistory() {
|
||
const messageContainer = document.getElementById('messageContainer');
|
||
messageContainer.innerHTML = '';
|
||
|
||
// 按时间顺序显示群聊消息
|
||
if (chatHistory.group && chatHistory.group.length > 0) {
|
||
// 对消息按时间戳排序
|
||
const sortedMessages = [...chatHistory.group].sort((a, b) =>
|
||
(a.timestamp || 0) - (b.timestamp || 0)
|
||
);
|
||
|
||
sortedMessages.forEach(msg => {
|
||
addMessage(msg, true); // 标记为历史消息
|
||
});
|
||
|
||
// 添加分隔线
|
||
addSystemMessage('以上为历史消息');
|
||
}
|
||
|
||
// 滚动到最新消息
|
||
setTimeout(() => {
|
||
messageContainer.scrollTop = messageContainer.scrollHeight;
|
||
}, 100);
|
||
}
|
||
|
||
// 添加删除聊天历史的函数
|
||
function deleteChatHistory(ip, event) {
|
||
// 阻止事件冒泡，避免触发聊天项的点击事件
|
||
event.stopPropagation();
|
||
|
||
if (!confirm(`确定要删除与 ${ip} 的聊天记录吗？删除后将无法恢复。`)) {
|
||
return;
|
||
}
|
||
|
||
// 删除聊天历史
|
||
delete chatHistory.private[ip];
|
||
delete unreadMessages[ip];
|
||
|
||
// 从聊天列表中移除
|
||
const chatItem = document.querySelector(`.chat-item[data-chat="${ip}"]`);
|
||
if (chatItem) {
|
||
chatItem.remove();
|
||
}
|
||
|
||
// 如果当前正在查看这个聊天，切换到群聊
|
||
if (currentMode === 'private' && currentChatTarget === ip) {
|
||
switchMode('group');
|
||
}
|
||
|
||
showToast('聊天记录已删除');
|
||
}
|
||
|
||
// 添加 Toast 提示函数
|
||
function showToast(message) {
|
||
let toast = document.querySelector('.toast');
|
||
if (!toast) {
|
||
toast = document.createElement('div');
|
||
toast.className = 'toast';
|
||
document.body.appendChild(toast);
|
||
}
|
||
|
||
toast.textContent = message;
|
||
toast.classList.add('show');
|
||
|
||
setTimeout(() => {
|
||
toast.classList.remove('show');
|
||
}, 3000);
|
||
}
|
||
|
||
// 添加屏幕旋转处理
|
||
window.addEventListener('orientationchange', function() {
|
||
// 关闭侧边栏
|
||
if (sidebarVisible) {
|
||
toggleSidebar();
|
||
}
|
||
|
||
// 重新计算高度
|
||
setTimeout(() => {
|
||
const messages = document.querySelector('.chat-messages');
|
||
messages.scrollTop = messages.scrollHeight;
|
||
}, 100);
|
||
});
|
||
|
||
// 添加触摸手势支持
|
||
let touchStartX = 0;
|
||
let touchEndX = 0;
|
||
|
||
document.addEventListener('touchstart', e => {
|
||
touchStartX = e.touches[0].clientX;
|
||
});
|
||
|
||
document.addEventListener('touchend', e => {
|
||
touchEndX = e.changedTouches[0].clientX;
|
||
handleSwipe();
|
||
});
|
||
|
||
function handleSwipe() {
|
||
const swipeDistance = touchEndX - touchStartX;
|
||
const threshold = 100; // 滑动阈值
|
||
|
||
if (Math.abs(swipeDistance) > threshold) {
|
||
if (swipeDistance > 0 && !sidebarVisible) {
|
||
// 向右滑动，打开侧边栏
|
||
toggleSidebar();
|
||
} else if (swipeDistance < 0 && sidebarVisible) {
|
||
// 向左滑动，关闭侧边栏
|
||
toggleSidebar();
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
// 修改拖拽相关事件处理
|
||
const messageContainer = document.getElementById('messageContainer');
|
||
const dragOverlay = document.getElementById('dragOverlay');
|
||
|
||
// 防止默认行为
|
||
function preventDefaults(e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
}
|
||
|
||
// 显示拖拽覆盖层
|
||
function highlight(e) {
|
||
preventDefaults(e);
|
||
dragOverlay.classList.add('active');
|
||
}
|
||
|
||
// 隐藏拖拽覆盖层
|
||
function unhighlight(e) {
|
||
preventDefaults(e);
|
||
dragOverlay.classList.remove('active');
|
||
}
|
||
|
||
// 添加文件验证函数
|
||
function validateFile(file) {
|
||
// 最大文件大小（例如 500MB，增加限制以支持更大的音视频文件）
|
||
const MAX_FILE_SIZE = 500 * 1024 * 1024;
|
||
|
||
// 检查文件大小
|
||
if (file.size > MAX_FILE_SIZE) {
|
||
throw new Error(`文件大小超过限制 (最大 ${formatFileSize(MAX_FILE_SIZE)})`);
|
||
}
|
||
|
||
// 移除文件类型限制，支持所有格式
|
||
// 所有文件类型都被允许
|
||
|
||
return true;
|
||
}
|
||
|
||
// 添加文件类型检测函数
|
||
function getFileType(filename, mimeType) {
|
||
const ext = filename.toLowerCase().split('.').pop();
|
||
|
||
// 音频文件类型
|
||
const audioExtensions = ['mp3', 'wav', 'ogg', 'aac', 'm4a', 'flac', 'wma'];
|
||
const audioMimeTypes = ['audio/'];
|
||
|
||
// 视频文件类型
|
||
const videoExtensions = ['mp4', 'webm', 'ogg', 'avi', 'mov', 'wmv', 'flv', 'mkv', '3gp'];
|
||
const videoMimeTypes = ['video/'];
|
||
|
||
// 图片文件类型
|
||
const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg', 'ico'];
|
||
const imageMimeTypes = ['image/'];
|
||
|
||
// 文档文件类型
|
||
const docExtensions = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'rtf'];
|
||
|
||
// 代码文件类型
|
||
const codeExtensions = ['js', 'html', 'css', 'py', 'java', 'cpp', 'c', 'php', 'rb', 'go', 'rs', 'ts', 'jsx', 'tsx', 'vue', 'json', 'xml', 'sql'];
|
||
|
||
// 压缩文件类型
|
||
const archiveExtensions = ['zip', 'rar', '7z', 'tar', 'gz', 'bz2'];
|
||
|
||
if (audioExtensions.includes(ext) || audioMimeTypes.some(type => mimeType.startsWith(type))) {
|
||
return 'audio';
|
||
} else if (videoExtensions.includes(ext) || videoMimeTypes.some(type => mimeType.startsWith(type))) {
|
||
return 'video';
|
||
} else if (imageExtensions.includes(ext) || imageMimeTypes.some(type => mimeType.startsWith(type))) {
|
||
return 'image';
|
||
} else if (docExtensions.includes(ext)) {
|
||
return 'document';
|
||
} else if (codeExtensions.includes(ext)) {
|
||
return 'code';
|
||
} else if (archiveExtensions.includes(ext)) {
|
||
return 'archive';
|
||
} else {
|
||
return 'file';
|
||
}
|
||
}
|
||
|
||
// 获取文件图标
|
||
function getFileIcon(fileType, extension) {
|
||
const iconMap = {
|
||
'audio': 'bi-music-note-beamed',
|
||
'video': 'bi-play-circle',
|
||
'image': 'bi-image',
|
||
'document': 'bi-file-earmark-text',
|
||
'code': 'bi-file-earmark-code',
|
||
'archive': 'bi-file-earmark-zip',
|
||
'file': 'bi-file-earmark'
|
||
};
|
||
|
||
// 特殊文件类型的图标
|
||
const extIconMap = {
|
||
'pdf': 'bi-file-earmark-pdf',
|
||
'doc': 'bi-file-earmark-word',
|
||
'docx': 'bi-file-earmark-word',
|
||
'xls': 'bi-file-earmark-excel',
|
||
'xlsx': 'bi-file-earmark-excel',
|
||
'ppt': 'bi-file-earmark-ppt',
|
||
'pptx': 'bi-file-earmark-ppt',
|
||
'txt': 'bi-file-earmark-text',
|
||
'py': 'bi-file-earmark-code',
|
||
'js': 'bi-file-earmark-code',
|
||
'html': 'bi-file-earmark-code',
|
||
'css': 'bi-file-earmark-code'
|
||
};
|
||
|
||
return extIconMap[extension] || iconMap[fileType] || 'bi-file-earmark';
|
||
}
|
||
|
||
// 修改文件拖放处理
|
||
async function handleDrop(e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
|
||
unhighlight(e);
|
||
|
||
const files = e.dataTransfer.files;
|
||
if (!files || files.length === 0) return;
|
||
|
||
const file = files[0];
|
||
|
||
try {
|
||
// 验证文件
|
||
validateFile(file);
|
||
|
||
if (isUploading) return;
|
||
isUploading = true;
|
||
|
||
await handleFileUpload(file);
|
||
} catch (error) {
|
||
console.error('文件处理失败:', error);
|
||
showToast(error.message);
|
||
} finally {
|
||
isUploading = false;
|
||
}
|
||
}
|
||
|
||
// 修改事件监听器绑定方式
|
||
function initializeDropZone() {
|
||
const messageContainer = document.getElementById('messageContainer');
|
||
|
||
// 移除现有的事件监听器（如果有）
|
||
messageContainer.removeEventListener('dragenter', handleDragEnter);
|
||
messageContainer.removeEventListener('dragover', handleDragOver);
|
||
messageContainer.removeEventListener('dragleave', handleDragLeave);
|
||
messageContainer.removeEventListener('drop', handleDrop);
|
||
|
||
// 添加新的事件监听器
|
||
messageContainer.addEventListener('dragenter', handleDragEnter, false);
|
||
messageContainer.addEventListener('dragover', handleDragOver, false);
|
||
messageContainer.addEventListener('dragleave', handleDragLeave, false);
|
||
messageContainer.addEventListener('drop', handleDrop, false);
|
||
}
|
||
|
||
// 拖拽事件处理函数
|
||
function handleDragEnter(e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
highlight(e);
|
||
}
|
||
|
||
function handleDragOver(e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
highlight(e);
|
||
}
|
||
|
||
function handleDragLeave(e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
|
||
// 检查是否真的离开了容器
|
||
const rect = e.target.getBoundingClientRect();
|
||
const x = e.clientX;
|
||
const y = e.clientY;
|
||
|
||
if (x <= rect.left || x >= rect.right || y <= rect.top || y >= rect.bottom) {
|
||
unhighlight(e);
|
||
}
|
||
}
|
||
|
||
// 添加上传状态标志
|
||
let isUploading = false;
|
||
|
||
// 在页面加载完成后初始化
|
||
document.addEventListener('DOMContentLoaded', initializeDropZone);
|
||
|
||
// 处理文件上传和发送
|
||
async function handleFileUpload(file) {
|
||
const formData = new FormData();
|
||
formData.append('file', file);
|
||
|
||
try {
|
||
// 添加文件信息日志
|
||
console.log('准备上传文件:', {
|
||
name: file.name,
|
||
type: file.type,
|
||
size: file.size
|
||
});
|
||
|
||
const response = await fetch('/upload', {
|
||
method: 'POST',
|
||
body: formData
|
||
});
|
||
|
||
// 添加响应状态日志
|
||
console.log('上传响应状态:', response.status);
|
||
|
||
if (!response.ok) {
|
||
const errorText = await response.text();
|
||
console.error('上传失败响应:', errorText);
|
||
throw new Error(`上传失败: ${response.status} ${errorText}`);
|
||
}
|
||
|
||
const result = await response.json();
|
||
console.log('上传成功结果:', result);
|
||
|
||
// 检测文件类型
|
||
const detectedFileType = getFileType(file.name, file.type);
|
||
const fileExtension = file.name.toLowerCase().split('.').pop();
|
||
|
||
// 构建增强的文件数据
|
||
const fileData = {
|
||
fileName: file.name,
|
||
fileSize: file.size,
|
||
filePath: result.path,
|
||
fileType: file.type,
|
||
fileExtension: fileExtension,
|
||
detectedType: detectedFileType,
|
||
isImage: detectedFileType === 'image',
|
||
isAudio: detectedFileType === 'audio',
|
||
isVideo: detectedFileType === 'video',
|
||
uploadTime: new Date().toISOString()
|
||
};
|
||
|
||
const messageData = {
|
||
type: 'file',
|
||
message: JSON.stringify(fileData),
|
||
timestamp: new Date().getTime(),
|
||
alreadyDisplayed: true
|
||
};
|
||
|
||
if (currentMode === 'private') {
|
||
messageData.targetIp = currentChatTarget;
|
||
}
|
||
|
||
// 发送WebSocket消息
|
||
ws.send(JSON.stringify(messageData));
|
||
|
||
// 本地显示和保存
|
||
const localMessage = {
|
||
...messageData,
|
||
ip: myIp
|
||
};
|
||
|
||
// 保存到历史记录
|
||
if (currentMode === 'private' && currentChatTarget) {
|
||
if (!chatHistory.private[currentChatTarget]) {
|
||
chatHistory.private[currentChatTarget] = [];
|
||
}
|
||
chatHistory.private[currentChatTarget].push(localMessage);
|
||
|
||
// 根据文件类型显示不同的最后消息提示
|
||
let lastMsgHint = '文件消息';
|
||
if (detectedFileType === 'image') lastMsgHint = '图片';
|
||
else if (detectedFileType === 'audio') lastMsgHint = '音频';
|
||
else if (detectedFileType === 'video') lastMsgHint = '视频';
|
||
else if (detectedFileType === 'document') lastMsgHint = '文档';
|
||
|
||
updateChatList(currentChatTarget, lastMsgHint);
|
||
} else {
|
||
chatHistory.group.push(localMessage);
|
||
}
|
||
|
||
addMessage(localMessage);
|
||
saveLocalChatHistory();
|
||
|
||
// 滚动到最新消息
|
||
const messageContainer = document.getElementById('messageContainer');
|
||
messageContainer.scrollTop = messageContainer.scrollHeight;
|
||
|
||
} catch (error) {
|
||
console.error('文件上传失败详细信息:', error);
|
||
showToast('文件上传失败：' + error.message);
|
||
throw error;
|
||
}
|
||
}
|
||
|
||
function formatFileSize(bytes) {
|
||
if (bytes < 1024) {
|
||
return bytes + ' B';
|
||
} else if (bytes < 1024 * 1024) {
|
||
return (bytes / 1024).toFixed(2) + ' KB';
|
||
} else if (bytes < 1024 * 1024 * 1024) {
|
||
return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
|
||
} else {
|
||
return (bytes / (1024 * 1024 * 1024)).toFixed(2) + ' GB';
|
||
}
|
||
}
|
||
|
||
// 添加文件信息复制功能
|
||
async function copyFileInfo(fileName, fileSize) {
|
||
const text = `文件名：${fileName}\n文件大小：${fileSize}`;
|
||
await copyMessage(text);
|
||
}
|
||
|
||
// 添加触摸反馈
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 为所有复制按钮添加触摸反馈
|
||
document.addEventListener('click', function(e) {
|
||
if (e.target.closest('.copy-btn')) {
|
||
const btn = e.target.closest('.copy-btn');
|
||
btn.style.transform = 'scale(0.95)';
|
||
setTimeout(() => {
|
||
btn.style.transform = '';
|
||
}, 200);
|
||
}
|
||
});
|
||
|
||
// 防止触摸事件穿透
|
||
document.querySelectorAll('.copy-btn').forEach(btn => {
|
||
btn.addEventListener('touchstart', e => {
|
||
e.preventDefault();
|
||
}, { passive: false });
|
||
});
|
||
});
|
||
|
||
|
||
|
||
|
||
// 添加文件操作处理函数
|
||
async function handleFileAction(messageData) {
|
||
try {
|
||
// 解码并解析文件数据
|
||
const decodedData = decodeURIComponent(messageData);
|
||
const fileData = JSON.parse(decodedData);
|
||
|
||
console.log('Downloading file:', fileData); // 添加调试日志
|
||
|
||
// 验证必要的文件信息是否存在
|
||
if (!fileData.filePath || !fileData.fileName) {
|
||
throw new Error('文件信息不完整');
|
||
}
|
||
|
||
// 创建下载链接
|
||
const link = document.createElement('a');
|
||
link.href = fileData.filePath;
|
||
link.download = fileData.fileName;
|
||
|
||
// 触发下载
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
|
||
showToast('开始下载文件');
|
||
} catch (error) {
|
||
console.error('文件下载失败:', error);
|
||
showToast('文件下载失败: ' + error.message);
|
||
}
|
||
}
|
||
|
||
// 初始化文件上传相关事件
|
||
function initializeFileUpload() {
|
||
const fileInput = document.getElementById('fileInput');
|
||
|
||
fileInput.addEventListener('change', async (e) => {
|
||
const file = e.target.files[0];
|
||
if (!file) return;
|
||
|
||
try {
|
||
validateFile(file);
|
||
|
||
if (isUploading) return;
|
||
isUploading = true;
|
||
|
||
await handleFileUpload(file);
|
||
} catch (error) {
|
||
console.error('文件处理失败:', error);
|
||
showToast(error.message);
|
||
} finally {
|
||
isUploading = false;
|
||
fileInput.value = ''; // 清空文件输入框,允许重复选择相同文件
|
||
}
|
||
});
|
||
}
|
||
|
||
// 在页面加载完成后初始化
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
initializeDropZone();
|
||
initializeFileUpload();
|
||
});
|
||
|
||
// 管理员功能实现
|
||
// 设置管理员IP
|
||
function setAdminIp() {
|
||
const adminIpInput = document.getElementById('adminIpInput');
|
||
const inputIp = adminIpInput.value.trim();
|
||
|
||
if (!inputIp) {
|
||
// 清空管理员设置
|
||
adminIp = null;
|
||
localStorage.removeItem('adminIp');
|
||
updateAdminStatus();
|
||
showToast('已清空管理员设置');
|
||
return;
|
||
}
|
||
|
||
// 验证IP格式
|
||
if (!isValidIp(inputIp)) {
|
||
showToast('请输入有效的IP地址');
|
||
return;
|
||
}
|
||
|
||
adminIp = inputIp;
|
||
localStorage.setItem('adminIp', adminIp);
|
||
updateAdminStatus();
|
||
showToast(`管理员已设置为: ${adminIp}`);
|
||
|
||
adminIpInput.value = '';
|
||
}
|
||
|
||
// 验证IP地址格式
|
||
function isValidIp(ip) {
|
||
const ipRegex = /^(\d{1,3}\.){3}\d{1,3}$/;
|
||
if (!ipRegex.test(ip)) return false;
|
||
|
||
const parts = ip.split('.');
|
||
return parts.every(part => {
|
||
const num = parseInt(part, 10);
|
||
return num >= 0 && num <= 255;
|
||
});
|
||
}
|
||
|
||
// 更新管理员状态显示
|
||
function updateAdminStatus() {
|
||
const adminStatus = document.getElementById('adminStatus');
|
||
const adminFunctions = document.getElementById('adminFunctions');
|
||
const statusText = adminStatus.querySelector('.admin-status-text');
|
||
|
||
// 重置样式
|
||
adminStatus.className = 'admin-status';
|
||
|
||
if (!adminIp) {
|
||
statusText.textContent = '未设置管理员';
|
||
adminFunctions.style.display = 'none';
|
||
isAdmin = false;
|
||
} else if (myIp === adminIp) {
|
||
statusText.textContent = '您是管理员';
|
||
adminStatus.classList.add('is-admin');
|
||
adminFunctions.style.display = 'block';
|
||
isAdmin = true;
|
||
} else {
|
||
statusText.textContent = `管理员: ${adminIp}`;
|
||
adminStatus.classList.add('admin-set');
|
||
adminFunctions.style.display = 'none';
|
||
isAdmin = false;
|
||
}
|
||
}
|
||
|
||
// 加载管理员设置
|
||
function loadAdminSettings() {
|
||
const savedAdminIp = localStorage.getItem('adminIp');
|
||
if (savedAdminIp) {
|
||
adminIp = savedAdminIp;
|
||
updateAdminStatus();
|
||
}
|
||
}
|
||
|
||
// 清空所有聊天历史记录
|
||
async function clearAllChatHistory() {
|
||
// 先验证管理员权限
|
||
const hasPermission = await verifyAdminPermission();
|
||
if (!hasPermission) {
|
||
return;
|
||
}
|
||
|
||
// 确认对话框
|
||
const confirmed = confirm(
|
||
'⚠️ 警告：此操作将永久删除所有聊天记录！\n' +
|
||
'包括：\n' +
|
||
'• 所有群聊消息\n' +
|
||
'• 所有私聊对话\n' +
|
||
'• 本地存储的历史记录\n' +
|
||
'• 服务器端的历史文件\n\n' +
|
||
'此操作无法撤销，确定要继续吗？'
|
||
);
|
||
|
||
if (!confirmed) return;
|
||
|
||
// 二次确认
|
||
const doubleConfirmed = confirm(
|
||
'🔴 最后确认：您确定要删除所有聊天记录吗？\n' +
|
||
'这将清空服务器上的所有历史数据。'
|
||
);
|
||
|
||
if (!doubleConfirmed) return;
|
||
|
||
try {
|
||
// 先清空本地数据
|
||
chatHistory.group = [];
|
||
chatHistory.private = {};
|
||
unreadMessages = {};
|
||
|
||
// 清空本地存储
|
||
if (myIp) {
|
||
localStorage.removeItem(`chatHistory_${myIp}`);
|
||
}
|
||
|
||
// 清空所有用户的本地存储（清理可能存在的其他IP记录）
|
||
Object.keys(localStorage).forEach(key => {
|
||
if (key.startsWith('chatHistory_')) {
|
||
localStorage.removeItem(key);
|
||
}
|
||
});
|
||
|
||
// 清空当前显示的消息
|
||
const messageContainer = document.getElementById('messageContainer');
|
||
messageContainer.innerHTML = '';
|
||
|
||
// 重新初始化聊天列表
|
||
initializeChatList();
|
||
|
||
// 切换到群聊模式
|
||
currentMode = 'group';
|
||
currentChatTarget = null;
|
||
document.getElementById('chatTitle').textContent = '群聊';
|
||
updateModeButtons('group');
|
||
|
||
// 发送WebSocket消息通知其他用户并清空服务器历史
|
||
if (ws && ws.readyState === WebSocket.OPEN) {
|
||
const systemMessage = {
|
||
type: 'admin_action',
|
||
action: 'clear_all_history',
|
||
admin_ip: myIp,
|
||
message: `管理员 ${myIp} 已清空所有聊天记录`,
|
||
timestamp: new Date().getTime()
|
||
};
|
||
|
||
try {
|
||
ws.send(JSON.stringify(systemMessage));
|
||
} catch (error) {
|
||
console.warn('发送WebSocket通知失败:', error);
|
||
}
|
||
}
|
||
|
||
// 同时调用后端API确保服务器端历史也被清空
|
||
fetch('/admin/clear_history', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
}
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.success) {
|
||
console.log('服务器端历史记录已清空:', data);
|
||
addSystemMessage('✅ 所有聊天记录已被管理员彻底清空（包括服务器历史）');
|
||
showToast('✅ 所有聊天记录已成功清空（包括服务器端）');
|
||
} else {
|
||
console.error('服务器端清空失败:', data.message);
|
||
addSystemMessage('⚠️ 本地记录已清空，但服务器端清空可能失败');
|
||
showToast('⚠️ 本地清空成功，服务器端可能需要手动处理');
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('调用服务器清空API失败:', error);
|
||
addSystemMessage('⚠️ 本地记录已清空，但服务器端清空失败');
|
||
showToast('⚠️ 本地清空成功，但服务器端清空失败');
|
||
});
|
||
|
||
addSystemMessage('🔄 正在清空服务器历史记录...');
|
||
|
||
// 调用后端API清空服务器端历史（包含权限验证）
|
||
const response = await fetch('/admin/clear_history', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
}
|
||
});
|
||
|
||
if (response.ok) {
|
||
const data = await response.json();
|
||
if (data.success) {
|
||
console.log('服务器端历史记录已清空:', data);
|
||
addSystemMessage('✅ 所有聊天记录已被管理员彻底清空（包括服务器历史）');
|
||
showToast('✅ 所有聊天记录已成功清空（包括服务器端）');
|
||
|
||
// 发送WebSocket消息通知其他用户（服务器端已经广播了，这里不再重复发送）
|
||
console.log('管理员操作：所有聊天记录已清空');
|
||
} else {
|
||
console.error('服务器端清空失败:', data.message);
|
||
addSystemMessage('⚠️ 本地记录已清空，但服务器端清空失败');
|
||
showToast('⚠️ 本地清空成功，服务器端清空失败');
|
||
}
|
||
} else {
|
||
const error = await response.json();
|
||
console.error('服务器权限验证失败:', error);
|
||
addSystemMessage('❌ 权限验证失败，操作被拒绝');
|
||
showToast('❌ 权限不足：' + (error.detail || '操作被拒绝'));
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error('清空聊天记录失败:', error);
|
||
addSystemMessage('❌ 清空操作失败');
|
||
showToast('❌ 清空操作失败: ' + error.message);
|
||
}
|
||
}
|
||
|
||
// 管理员权限检查装饰器
|
||
function requireAdmin(fn) {
|
||
return function(...args) {
|
||
if (!isAdmin) {
|
||
showToast('此功能仅限管理员使用');
|
||
return;
|
||
}
|
||
return fn.apply(this, args);
|
||
};
|
||
}
|
||
|
||
// 初始化管理员相关功能
|
||
async function initializeAdminFeatures() {
|
||
// 从后端获取管理员信息
|
||
await fetchAdminInfo();
|
||
}
|
||
|
||
// 管理员功能实现
|
||
// 从后端获取管理员信息
|
||
async function fetchAdminInfo() {
|
||
try {
|
||
const response = await fetch('/admin/info');
|
||
const data = await response.json();
|
||
|
||
adminIp = data.admin_ip;
|
||
isAdmin = data.is_admin;
|
||
|
||
console.log('管理员信息:', {
|
||
adminIp: adminIp,
|
||
isAdmin: isAdmin,
|
||
clientIp: data.client_ip
|
||
});
|
||
|
||
updateAdminStatus();
|
||
return data;
|
||
} catch (error) {
|
||
console.error('获取管理员信息失败:', error);
|
||
showToast('获取管理员信息失败');
|
||
return null;
|
||
}
|
||
}
|
||
|
||
// 更新管理员状态显示
|
||
function updateAdminStatus() {
|
||
const adminStatus = document.getElementById('adminStatus');
|
||
const adminFunctions = document.getElementById('adminFunctions');
|
||
const statusText = adminStatus.querySelector('.admin-status-text');
|
||
|
||
// 重置样式
|
||
adminStatus.className = 'admin-status';
|
||
|
||
if (!adminIp) {
|
||
statusText.textContent = '未配置管理员';
|
||
adminFunctions.style.display = 'none';
|
||
isAdmin = false;
|
||
} else if (isAdmin) {
|
||
statusText.innerHTML = `
|
||
<i class="bi bi-shield-check"></i>
|
||
您是管理员 (${adminIp})
|
||
`;
|
||
adminStatus.classList.add('is-admin');
|
||
adminFunctions.style.display = 'block';
|
||
} else {
|
||
statusText.innerHTML = `
|
||
<i class="bi bi-shield"></i>
|
||
管理员: ${adminIp}
|
||
`;
|
||
adminStatus.classList.add('admin-set');
|
||
adminFunctions.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
// 验证管理员权限
|
||
async function verifyAdminPermission() {
|
||
if (!isAdmin) {
|
||
showToast('只有管理员才能执行此操作');
|
||
return false;
|
||
}
|
||
|
||
try {
|
||
const response = await fetch('/admin/verify');
|
||
if (response.ok) {
|
||
const data = await response.json();
|
||
return data.verified;
|
||
} else {
|
||
const error = await response.json();
|
||
showToast(error.detail || '权限验证失败');
|
||
return false;
|
||
}
|
||
} catch (error) {
|
||
console.error('权限验证失败:', error);
|
||
showToast('权限验证失败');
|
||
return false;
|
||
}
|
||
}
|
||
|
||
// 获取IP名称映射
|
||
async function fetchIpNameMapping() {
|
||
try {
|
||
const response = await fetch('/get_ip_names');
|
||
const data = await response.json();
|
||
ipNameMapping = data.ip_vs_name || {};
|
||
ipAvatarMapping = data.ip_vs_avatar || {};
|
||
console.log('IP名称映射已加载:', ipNameMapping);
|
||
console.log('IP头像映射已加载:', ipAvatarMapping);
|
||
|
||
// 更新可用用户列表
|
||
availableUsers = Object.keys(ipNameMapping).filter(ip => ip !== myIp);
|
||
|
||
// 更新所有已显示的IP为名称
|
||
updateDisplayedNames();
|
||
|
||
return data;
|
||
} catch (error) {
|
||
console.error('获取IP名称映射失败:', error);
|
||
return null;
|
||
}
|
||
}
|
||
|
||
// 获取显示名称（名称优先，如果没有映射则显示IP）
|
||
function getDisplayName(ip) {
|
||
const name = ipNameMapping[ip];
|
||
return name ? `${name} (${ip})` : ip;
|
||
}
|
||
|
||
// 获取简短显示名称（用于头像等小空间）
|
||
function getShortDisplayName(ip) {
|
||
const name = getDisplayName(ip);
|
||
if (name === ip) {
|
||
return ip;
|
||
}
|
||
// 如果是中文名称，返回前2个字符
|
||
if (/[\u4e00-\u9fa5]/.test(name)) {
|
||
return name.substring(0, 2);
|
||
}
|
||
// 如果是英文名称，返回前3个字符
|
||
return name.substring(0, 3);
|
||
}
|
||
|
||
// 更新已显示的所有IP为名称
|
||
function updateDisplayedNames() {
|
||
// 更新消息中的IP显示
|
||
document.querySelectorAll('.ip-info span').forEach(span => {
|
||
const ip = span.textContent;
|
||
if (ipNameMapping[ip]) {
|
||
span.textContent = getDisplayName(ip);
|
||
}
|
||
});
|
||
|
||
// 更新用户标签
|
||
document.querySelectorAll('.user-tag').forEach(tag => {
|
||
const text = tag.textContent;
|
||
const ipMatch = text.match(/用户 ([\d.]+)/);
|
||
if (ipMatch) {
|
||
const ip = ipMatch[1];
|
||
const name = getDisplayName(ip);
|
||
if (name !== ip) {
|
||
tag.innerHTML = tag.innerHTML.replace(`用户 ${ip}`, name);
|
||
}
|
||
}
|
||
});
|
||
|
||
// 更新聊天列表中的名称
|
||
document.querySelectorAll('.chat-item').forEach(item => {
|
||
const ip = item.getAttribute('data-chat');
|
||
if (ip !== 'group' && ipNameMapping[ip]) {
|
||
const nameElement = item.querySelector('.chat-item-name');
|
||
if (nameElement) {
|
||
nameElement.textContent = getDisplayName(ip);
|
||
}
|
||
}
|
||
});
|
||
|
||
// 更新当前聊天标题
|
||
if (currentMode === 'private' && currentChatTarget) {
|
||
const targetName = getDisplayName(currentChatTarget);
|
||
document.getElementById('chatTitle').textContent = `与 ${targetName} 的私聊`;
|
||
}
|
||
|
||
// 更新头部IP显示
|
||
const headerIp = document.getElementById('headerIp');
|
||
if (headerIp) {
|
||
headerIp.textContent = getDisplayName(myIp);
|
||
}
|
||
|
||
// 更新侧边栏当前IP显示
|
||
const currentIpElement = document.getElementById('currentIp');
|
||
if (currentIpElement) {
|
||
const myName = getDisplayName(myIp);
|
||
currentIpElement.textContent = `本机: ${myName}${myName !== myIp ? ` (${myIp})` : ''}`;
|
||
}
|
||
}
|
||
|
||
// 创建私聊用户选择对话框
|
||
function showPrivateChatSelector() {
|
||
// 如果没有可用用户，直接提示输入IP
|
||
if (availableUsers.length === 0) {
|
||
const targetIpInput = prompt('没有预设用户，请输入目标IP地址：');
|
||
if (targetIpInput && targetIpInput.trim()) {
|
||
startPrivateChat(targetIpInput.trim());
|
||
}
|
||
return;
|
||
}
|
||
|
||
// 创建选择对话框
|
||
const overlay = document.createElement('div');
|
||
overlay.style.cssText = `
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
z-index: 2000;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
backdrop-filter: blur(4px);
|
||
`;
|
||
|
||
const dialog = document.createElement('div');
|
||
dialog.style.cssText = `
|
||
background: white;
|
||
border-radius: 16px;
|
||
padding: 24px;
|
||
max-width: 400px;
|
||
width: 90%;
|
||
max-height: 80vh;
|
||
overflow-y: auto;
|
||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
||
`;
|
||
|
||
let dialogHTML = `
|
||
<div style="margin-bottom: 20px;">
|
||
<h3 style="margin: 0 0 8px 0; color: var(--primary-color); font-size: 1.2em;">
|
||
<i class="bi bi-person-plus" style="margin-right: 8px;"></i>
|
||
选择聊天对象
|
||
</h3>
|
||
<p style="margin: 0; color: #666; font-size: 0.9em;">选择一个用户开始私聊</p>
|
||
</div>
|
||
<div style="margin-bottom: 20px;">
|
||
`;
|
||
|
||
// 添加预设用户列表
|
||
availableUsers.forEach(ip => {
|
||
const name = getDisplayName(ip);
|
||
|
||
dialogHTML += `
|
||
<div class="user-selector-item" onclick="selectPrivateChatUser('${ip}')" style="
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 12px;
|
||
border-radius: 12px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
margin-bottom: 8px;
|
||
border: 1px solid #eee;
|
||
" onmouseover="this.style.background='#f8f9fa'" onmouseout="this.style.background='transparent'">
|
||
<div style="margin-right: 12px;">
|
||
${createAvatarElement(ip, '40px', '1.2em')}
|
||
</div>
|
||
<div style="flex: 1;">
|
||
<div style="font-weight: 500; margin-bottom: 2px;">${name}</div>
|
||
<div style="font-size: 0.8em; color: #666;">${ip}</div>
|
||
</div>
|
||
<i class="bi bi-chevron-right" style="color: #ccc;"></i>
|
||
</div>
|
||
`;
|
||
});
|
||
|
||
dialogHTML += `
|
||
</div>
|
||
<div style="border-top: 1px solid #eee; padding-top: 16px;">
|
||
<button onclick="showCustomIpInput()" style="
|
||
width: 100%;
|
||
padding: 12px;
|
||
border: 1px solid var(--primary-color);
|
||
background: transparent;
|
||
color: var(--primary-color);
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
margin-bottom: 8px;
|
||
transition: all 0.3s ease;
|
||
" onmouseover="this.style.background='rgba(74, 144, 226, 0.1)'" onmouseout="this.style.background='transparent'">
|
||
<i class="bi bi-plus-circle" style="margin-right: 8px;"></i>
|
||
输入其他IP地址
|
||
</button>
|
||
<button onclick="closePrivateChatSelector()" style="
|
||
width: 100%;
|
||
padding: 12px;
|
||
border: none;
|
||
background: #f8f9fa;
|
||
color: #666;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
" onmouseover="this.style.background='#e9ecef'" onmouseout="this.style.background='#f8f9fa'">
|
||
取消
|
||
</button>
|
||
</div>
|
||
`;
|
||
|
||
dialog.innerHTML = dialogHTML;
|
||
overlay.appendChild(dialog);
|
||
document.body.appendChild(overlay);
|
||
|
||
// 保存引用用于关闭
|
||
window.privateChatSelectorOverlay = overlay;
|
||
}
|
||
|
||
// 选择私聊用户
|
||
function selectPrivateChatUser(ip) {
|
||
closePrivateChatSelector();
|
||
startPrivateChat(ip);
|
||
}
|
||
|
||
// 显示自定义IP输入
|
||
function showCustomIpInput() {
|
||
const targetIpInput = prompt('请输入目标IP地址：');
|
||
if (targetIpInput && targetIpInput.trim()) {
|
||
closePrivateChatSelector();
|
||
startPrivateChat(targetIpInput.trim());
|
||
}
|
||
}
|
||
|
||
// 关闭私聊选择器
|
||
function closePrivateChatSelector() {
|
||
if (window.privateChatSelectorOverlay) {
|
||
document.body.removeChild(window.privateChatSelectorOverlay);
|
||
window.privateChatSelectorOverlay = null;
|
||
}
|
||
}
|
||
|
||
// 开始私聊
|
||
function startPrivateChat(targetIp) {
|
||
if (targetIp === myIp) {
|
||
showToast('不能与自己私聊');
|
||
return;
|
||
}
|
||
|
||
currentMode = 'private';
|
||
currentChatTarget = targetIp;
|
||
|
||
// 更新UI
|
||
const targetName = getDisplayName(targetIp);
|
||
document.getElementById('chatTitle').textContent = `与 ${targetName} 的私聊`;
|
||
updateModeButtons('private');
|
||
|
||
// 添加或更新聊天列表
|
||
updateChatList(targetIp, '开始私聊');
|
||
|
||
// 清空并显示私聊消息
|
||
const messageContainer = document.getElementById('messageContainer');
|
||
messageContainer.innerHTML = '';
|
||
|
||
if (chatHistory.private[targetIp] && chatHistory.private[targetIp].length > 0) {
|
||
const sortedMessages = [...chatHistory.private[targetIp]].sort((a, b) =>
|
||
(a.timestamp || 0) - (b.timestamp || 0)
|
||
);
|
||
|
||
sortedMessages.forEach(msg => {
|
||
addMessage(msg, true);
|
||
});
|
||
|
||
addSystemMessage('以上为历史消息');
|
||
}
|
||
|
||
// 更新聊天项状态
|
||
updateChatItemStatus(targetIp);
|
||
|
||
// 自动关闭侧边栏（移动端）
|
||
if (window.innerWidth <= 768 && sidebarVisible) {
|
||
toggleSidebar();
|
||
}
|
||
|
||
// 滚动到最新消息
|
||
setTimeout(() => {
|
||
messageContainer.scrollTop = messageContainer.scrollHeight;
|
||
}, 100);
|
||
}
|
||
|
||
// 检测是否为移动设备
|
||
function isMobileDevice() {
|
||
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ||
|
||
window.innerWidth <= 768;
|
||
}
|
||
|
||
// 处理图片点击事件
|
||
function handleImageClick(imageElement, event) {
|
||
// 阻止事件冒泡
|
||
event.stopPropagation();
|
||
|
||
// 只在移动端执行点击逻辑
|
||
if (!isMobileDevice()) {
|
||
return;
|
||
}
|
||
|
||
// 切换点击状态
|
||
const isClicked = imageElement.classList.contains('mobile-clicked');
|
||
|
||
// 先移除所有其他图片的点击状态
|
||
document.querySelectorAll('.image-message.mobile-clicked').forEach(img => {
|
||
if (img !== imageElement) {
|
||
img.classList.remove('mobile-clicked');
|
||
}
|
||
});
|
||
|
||
if (isClicked) {
|
||
// 如果已经点击过，再次点击则隐藏下载按钮
|
||
imageElement.classList.remove('mobile-clicked');
|
||
} else {
|
||
// 显示下载按钮和信息
|
||
imageElement.classList.add('mobile-clicked');
|
||
|
||
// 3秒后自动隐藏
|
||
setTimeout(() => {
|
||
imageElement.classList.remove('mobile-clicked');
|
||
}, 3000);
|
||
}
|
||
}
|
||
|
||
// 添加全局点击事件监听，点击其他地方时隐藏所有图片下载按钮
|
||
document.addEventListener('click', function(event) {
|
||
if (!isMobileDevice()) return;
|
||
|
||
// 如果点击的不是图片消息相关元素，则隐藏所有下载按钮
|
||
if (!event.target.closest('.image-message')) {
|
||
document.querySelectorAll('.image-message.mobile-clicked').forEach(img => {
|
||
img.classList.remove('mobile-clicked');
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |