refactor: 文件上传直接填入输入框,支持光标位置插入

This commit is contained in:
root
2026-04-29 09:25:23 +08:00
parent 5f7c95e861
commit 2cc4d8b907

View File

@ -194,39 +194,7 @@ body {
background: var(--surface-darken);
}
.file-info {
display: none;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text-muted);
background: var(--surface-darken);
padding: 3px 8px;
border-radius: 4px;
}
.file-info.attached {
display: inline-flex;
}
.file-info-name {
color: var(--success);
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-info-remove {
cursor: pointer;
color: var(--accent);
font-weight: bold;
padding: 0 4px;
}
.file-info-remove:hover {
color: var(--warning);
}
.btn {
padding: 6px 16px;
@ -635,10 +603,7 @@ body {
<div class="file-upload-row">
<input type="file" class="file-input" id="fileInput">
<button class="file-upload-btn" id="fileUploadBtn">📎 添加文件</button>
<span class="file-info" id="fileInfo">
<span class="file-info-name" id="fileInfoName"></span>
<span class="file-info-remove" id="fileInfoRemove"></span>
</span>
</div>
<div class="input-buttons">
<button class="btn" id="sendBtn">发送</button>
@ -758,10 +723,6 @@ const closeHelpBtn = document.getElementById('closeHelp');
// File upload
const fileInputEl = document.getElementById('fileInput');
const fileUploadBtn = document.getElementById('fileUploadBtn');
const fileInfoEl = document.getElementById('fileInfo');
const fileInfoNameEl = document.getElementById('fileInfoName');
const fileInfoRemoveEl = document.getElementById('fileInfoRemove');
let attachedFile = null;
// Config inputs
const apiKeyEl = document.getElementById('apiKey');
@ -1036,8 +997,8 @@ function readFileAsText(file) {
// Send Message
async function sendMessage() {
let message = messageInputEl.value.trim();
if (!message && !attachedFile) return;
const message = messageInputEl.value.trim();
if (!message) return;
// Check if API is configured
if (apiStatusEl.textContent === '未配置') {
@ -1045,19 +1006,6 @@ async function sendMessage() {
return;
}
// If file is attached, read it and prepend to message
if (attachedFile) {
try {
const fileContent = await readFileAsText(attachedFile);
const fileBlock = `文件名:${attachedFile.name}\n内容:\n\`\`\`\n${fileContent}\n\`\`\``;
message = message ? `${fileBlock}\n\n${message}` : fileBlock;
} catch (e) {
updateLatestMessage(`❌ 文件读取失败: ${e.message}`);
return;
}
clearFile();
}
// Add user message to UI
addMessageToUI('user', message);
messageInputEl.value = '';
@ -1177,27 +1125,30 @@ function closeSidebar() {
}
// File upload helpers
function attachFile(file) {
attachedFile = file;
fileInfoNameEl.textContent = file.name;
fileInfoEl.classList.add('attached');
fileUploadBtn.textContent = '📎 更换文件';
}
function clearFile() {
attachedFile = null;
fileInputEl.value = '';
fileInfoEl.classList.remove('attached');
fileUploadBtn.textContent = '📎 添加文件';
function insertFileContent(file) {
readFileAsText(file).then(content => {
const block = `文件名:${file.name}\n内容:\n${content}`;
const current = messageInputEl.value;
const cursorPos = messageInputEl.selectionStart;
if (current.length === 0) {
messageInputEl.value = block;
} else {
// 插入到光标位置
messageInputEl.value = current.slice(0, cursorPos) + block + '\n\n' + current.slice(cursorPos);
}
messageInputEl.focus();
fileInputEl.value = '';
}).catch(e => {
alert(`文件读取失败: ${e.message}`);
});
}
fileUploadBtn.addEventListener('click', () => fileInputEl.click());
fileInputEl.addEventListener('change', () => {
if (fileInputEl.files && fileInputEl.files[0]) {
attachFile(fileInputEl.files[0]);
insertFileContent(fileInputEl.files[0]);
}
});
fileInfoRemoveEl.addEventListener('click', clearFile);
// Event Listeners
sendBtn.addEventListener('click', sendMessage);