diff --git a/pages/chat/components/ai-paging.vue b/pages/chat/components/ai-paging.vue index 3ef38d2..e94a544 100644 --- a/pages/chat/components/ai-paging.vue +++ b/pages/chat/components/ai-paging.vue @@ -210,7 +210,6 @@ @@ -219,7 +218,7 @@ @click="preViewImage(file)" v-if="isImage(file.type)" :src="file.url" - mode="scaleToFill" + mode="heightFix" > @@ -1107,22 +1106,23 @@ image-margin-top = 40rpx padding: 16rpx 20rpx 18rpx 20rpx height: calc(100% - 40rpx) .doc-icon - width: 60rpx - height: 76rpx - margin-right: 20rpx + width: 60rpx; + height: 76rpx; + margin-right: 20rpx; .doc-con - flex: 1 - width: 0 + max-width:320rpx; + overflow :hidden; + padding-right:40rpx; + box-sizing:border-box; .file-uploadsend margin: 10rpx 18rpx 0 0; height: 100% font-size: 24rpx position: relative - min-width: 460rpx; height: 160rpx; border-radius: 12rpx 12rpx 12rpx 12rpx; border: 2rpx solid #E2E2E2; - overflow: hidden + flex-shrink: 0; .file-del position: absolute right: 25rpx @@ -1155,8 +1155,8 @@ image-margin-top = 40rpx color: #7B7B7B; max-width: 100% .file-iconImg - // height: 100% - width: 100% + height: 100% + // width: 100% .filerow display: flex align-items: center @@ -1166,8 +1166,6 @@ image-margin-top = 40rpx height: 20rpx width: 2rpx background: rgba(226, 226, 226, .9) - .file-border - width: 160rpx !important; @keyframes ai-circle { 0% { diff --git a/static/upload.html b/static/upload.html index b0b361a..3c4e6da 100644 --- a/static/upload.html +++ b/static/upload.html @@ -18,7 +18,7 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; - background: linear-gradient(to bottom, #4995FF 0%, #ffffff 100%); + background: linear-gradient(to bottom, #4995ff 0%, #ffffff 100%); min-height: 100vh; padding: 0; color: #333; @@ -26,7 +26,7 @@ .container { min-height: 100vh; - padding: 20px 20px ; + padding: 20px 20px; display: flex; flex-direction: column; position: relative; @@ -291,7 +291,7 @@ } .upload-btn { - background: linear-gradient(135deg, #4191FE 0%, #a5c6f7 100%); + background: linear-gradient(135deg, #4191fe 0%, #a5c6f7 100%); color: white; box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); } @@ -499,7 +499,7 @@ font-size: 20px; } } - + /* 限制提示样式 */ .limit-info { background: #fff8e1; @@ -514,16 +514,16 @@ gap: 8px; animation: slideIn 0.3s ease; } - + .limit-info.show { display: flex; } - + .limit-icon { font-size: 18px; flex-shrink: 0; } - + .limit-text { flex: 1; } @@ -542,16 +542,16 @@ gap: 8px; animation: slideIn 0.3s ease; } - + .limit-warning-info.show { display: flex; } - + .limit-warning-icon { font-size: 18px; flex-shrink: 0; } - + .limit-warning-text { flex: 1; } @@ -576,7 +576,7 @@ ⚠️
已超过文件上传总数限制
- +

📎 选择文件

@@ -635,7 +635,7 @@ const sessionId = urlParams.get('sessionId'); const uploadApi = urlParams.get('uploadApi'); const fileCountParam = urlParams.get('fileCount'); - + // 配置常量 const MAX_FILE_COUNT = fileCountParam ? parseInt(fileCountParam) : 2; // 从URL参数获取，默认为2 const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB @@ -677,13 +677,13 @@ function init() { // 更新限制提示文本 updateLimitText(); - + // 显示限制提示 limitInfo.classList.add('show'); - + // 检查本地存储中已上传的文件数量 checkUploadedCount(); - + // 事件监听 fileInput.addEventListener('change', handleFileSelect); clearBtn.addEventListener('click', clearAllFiles); @@ -723,11 +723,13 @@ // 检查已上传的文件数量 function checkUploadedCount() { - // 使用sessionStorage存储当前会话的上传数量 - // 如果要永久存储，可以改用localStorage + if (sessionStorage.getItem('sessionId') && sessionStorage.getItem('sessionId') != sessionId) { + sessionStorage.setItem('uploadedFileCount', '0'); + } + // // 使用sessionStorage存储当前会话的上传数量 + // // 如果要永久存储，可以改用localStorage const storedCount = sessionStorage.getItem('uploadedFileCount'); uploadedCount = storedCount ? parseInt(storedCount) : 0; - // 更新警告提示 updateWarningText(); } @@ -736,7 +738,7 @@ function updateWarningText() { if (MAX_FILE_COUNT > 0 && uploadedCount >= MAX_FILE_COUNT) { limitWarningInfo.classList.add('show'); - limitWarningText.textContent = `已超过文件上传总数限制（${MAX_FILE_COUNT}个）`; + limitWarningText.textContent = `已达文件上传总数限制（${MAX_FILE_COUNT}个）`; } else { limitWarningInfo.classList.remove('show'); } @@ -766,7 +768,7 @@ e.preventDefault(); return; } - + e.preventDefault(); uploadArea.classList.add('dragover'); }); @@ -821,7 +823,7 @@ } // 检查是否会导致超过总数限制 - if (MAX_FILE_COUNT > 0 && (uploadedCount + selectedFiles.length) >= MAX_FILE_COUNT) { + if (MAX_FILE_COUNT > 0 && uploadedCount + selectedFiles.length >= MAX_FILE_COUNT) { showError(`已超过文件上传总数限制（${MAX_FILE_COUNT}个）`); break; } @@ -1011,18 +1013,18 @@ fileInput.disabled = true; uploadText.textContent = '文件上传总数已达上限'; uploadHint.innerHTML = `总共可上传 ${MAX_FILE_COUNT} 个文件
已上传: ${uploadedCount}`; - + // 禁用按钮 clearBtn.disabled = true; uploadBtn.disabled = true; - + // 显示限制警告提示 limitWarningInfo.classList.add('show'); limitWarningText.textContent = `已超过文件上传总数限制（${MAX_FILE_COUNT}个）`; } else { // 更新上传区域状态 uploadArea.classList.remove('disabled'); - + // 根据文件数量更新上传区域 if (MAX_FILE_COUNT <= 0) { // 如果没有设置文件数量限制，始终可以上传 @@ -1047,9 +1049,9 @@ // 更新上传按钮文本 if (hasFiles && !isTotalLimitReached) { const totalSize = selectedFiles.reduce((sum, file) => sum + file.size, 0); - uploadBtn.innerHTML = `⬆️ 上传 (${selectedFiles.length}/${MAX_FILE_COUNT}, ${formatFileSize( - totalSize - )})`; + uploadBtn.innerHTML = `⬆️ 上传 (${ + selectedFiles.length + }/${MAX_FILE_COUNT}, ${formatFileSize(totalSize)})`; } else { uploadBtn.innerHTML = `⬆️ 开始上传`; } @@ -1123,12 +1125,13 @@ // 更新已上传的文件数量 uploadedCount += successCount; saveUploadedCount(); - + showSuccess(`成功上传 ${successCount} 个文件${failCount > 0 ? `，${failCount} 个失败` : ''}`); // 清空文件列表 clearAllFiles(); // 更新UI updateUI(); + sessionStorage.setItem('sessionId', sessionId); } else { showError('文件上传失败，请重试'); } @@ -1246,4 +1249,4 @@ document.addEventListener('drop', (e) => e.preventDefault()); - \ No newline at end of file + diff --git a/utils/fileValidator.js b/utils/fileValidator.js index f511496..54034df 100644 --- a/utils/fileValidator.js +++ b/utils/fileValidator.js @@ -1,6 +1,6 @@ /** * FileValidator.js - * 封装好的文件安全校验类 (ES Module) + * 封装好的文件安全校验类 */ // ========================================== @@ -141,7 +141,7 @@ export class FileValidator { // 获取文件头 Hex (读取足够长的字节以覆盖最长的魔数，PNG需8字节) const fileHeader = this._bufferToHex(buffer.slice(0, 8)); - // 使用 startsWith 匹配 (兼容 4字节或8字节魔数) + // 使用 startsWith 匹配 if (fileHeader.startsWith(expectedMagic)) { isSafe = true; } else { @@ -154,7 +154,7 @@ export class FileValidator { reader.onerror = () => reject('文件读取失败，无法校验'); - // 读取前 1KB 足够进行判断 + // 读取前 1KB 进行判断 reader.readAsArrayBuffer(file.slice(0, 1024)); }); } @@ -170,12 +170,12 @@ export class FileValidator { // imageValidator // .validate(file) // .then(() => { -// statusDiv.textContent = `✅ 检测通过: ${file.name}`; +// statusDiv.textContent = `检测通过: ${file.name}`; // statusDiv.style.color = 'green'; // console.log('图片校验通过，开始上传...'); // // upload(file)... // }) // .catch((err) => { -// statusDiv.textContent = `❌ 检测失败: ${err}`; +// statusDiv.textContent = `检测失败: ${err}`; // statusDiv.style.color = 'red'; // }); \ No newline at end of file