拙劣的实现文件分卷压缩传输

client/css/style.css

@@ -897,3 +897,132 @@ body {
 	border-radius: 4px;
 }
 
+/* File message styles */
+/* 文件消息样式 */
+.file-message {
+	max-width: 300px;
+	background: #f8f9fa;
+	border: 1px solid #e0e0e0;
+	border-radius: 12px;
+	padding: 12px;
+	margin: 4px 0;
+	font-family: inherit;
+}
+
+.file-info {
+	display: flex;
+	align-items: center;
+	margin-bottom: 8px;
+}
+
+.file-icon {
+	font-size: 24px;
+	margin-right: 10px;
+	flex-shrink: 0;
+}
+
+.file-details {
+	flex: 1;
+	min-width: 0;
+}
+
+.file-name {
+	font-weight: 500;
+	font-size: 14px;
+	color: #333;
+	margin-bottom: 2px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.file-meta {
+	font-size: 12px;
+	color: #666;
+	display: flex;
+	gap: 8px;
+}
+
+.file-size {
+	font-weight: 500;
+}
+
+.file-volumes {
+	color: #888;
+}
+
+.file-progress-container {
+	margin-bottom: 8px;
+}
+
+.file-progress-bar {
+	width: 100%;
+	height: 6px;
+	background: #e0e0e0;
+	border-radius: 3px;
+	overflow: hidden;
+	margin-bottom: 4px;
+}
+
+.file-progress {
+	height: 100%;
+	background: linear-gradient(90deg, #30a8f7, #4fc3f7);
+	border-radius: 3px;
+	transition: width 0.3s ease;
+	width: 0%;
+}
+
+.file-status {
+	font-size: 11px;
+	color: #666;
+	text-align: center;
+}
+
+.file-download-btn {
+	width: 100%;
+	padding: 8px 12px;
+	background: #30a8f7;
+	color: white;
+	border: none;
+	border-radius: 8px;
+	font-size: 13px;
+	font-weight: 500;
+	cursor: pointer;
+	transition: background-color 0.2s ease, transform 0.1s ease;
+	display: none;
+}
+
+.file-download-btn:hover {
+	background: #2196f3;
+	transform: translateY(-1px);
+}
+
+.file-download-btn:active {
+	transform: translateY(0);
+}
+
+.file-download-btn:disabled {
+	background: #ccc;
+	cursor: not-allowed;
+	transform: none;
+}
+
+/* File message in bubbles */
+.bubble .file-message {
+	background: rgba(255, 255, 255, 0.9);
+	border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.bubble.me .file-message {
+	background: rgba(255, 255, 255, 0.95);
+}
+
+.bubble.other .file-message {
+	background: #fff;
+}
+
+.bubble.private-message .file-message {
+	background: rgba(255, 248, 220, 0.9);
+	border-color: rgba(255, 193, 7, 0.3);
+}
+