lukeye/kbsearch-extension
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

opt

Browse Source
This commit is contained in:
luke 2025-06-19 15:29:34 +08:00
parent fdad04fb38
commit d1a23b0000
2 changed files with 70 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
pages/uploader.html
View File

@ -1,26 +1,16 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<title>上传文件到 MinIO/S3</title> <title>上传文件到 MinIO/S3</title>
<style> <style>
body { font-family: system-ui, sans-serif; background: #f7f9fb; margin: 0; } body { font-family: system-ui, sans-serif; background: #f7f9fb; margin: 0; }
.main-flex { display: flex; justify-content: center; align-items: flex-start; gap: 36px; min-height: 90vh;} .main-flex { display: flex; justify-content: center; align-items: flex-start; gap: 36px; min-height: 90vh;}
.uploader-main { flex: none; width: 410px; margin: 60px 0 0; background: #fff; border-radius: 13px; box-shadow: 0 6px 26px #ccc4; padding: 32px 38px 28px; } .uploader-main { flex: none; width: 410px; margin: 60px 0 0; background: #fff; border-radius: 13px; box-shadow: 0 6px 26px #ccc4; padding: 32px 38px 28px; }
.uploader-main h2 { text-align: center; font-size: 1.28rem; color: #1a2557; margin-bottom: 22px; } .uploader-main h2 { text-align: center; font-size: 1.28rem; color: #1a2557; margin-bottom: 22px; }
.input-row { .input-row { margin-bottom: 14px; display: flex; align-items: center; }
margin-bottom: 14px; .input-row label { font-size: 15px; color: #444; width: 110px; flex-shrink: 0; }
display: flex; .input-row input, .input-row select {
align-items: center;
}
.input-row label {
font-size: 15px;
color: #444;
width: 110px;
flex-shrink: 0;
}
.input-row input,
.input-row select {
flex: 1; flex: 1;
padding: 6px 10px; padding: 6px 10px;
border-radius: 6px; border-radius: 6px;
@ -28,39 +18,33 @@
font-size: 15px; font-size: 15px;
box-sizing: border-box; box-sizing: border-box;
} }
#drop-area { .input-row .edit-btn {
width: 100%; min-height: 120px; border: 2px dashed #b7c7de; border-radius: 9px; margin-left: 12px;
background: #f5f7fa; text-align: center; line-height: 120px; font-size: 15px; color: #98a8c7; margin-bottom: 16px; cursor: pointer; transition: border-color .18s; padding: 2px 13px;
background: #f5f8fe;
color: #2b55d3;
border: 1px solid #c7d2e7;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
transition: background .2s;
} }
.input-row .edit-btn:hover { background: #eaf2fe; }
.success { color: #2d974b; }
.error { color: #e64e4e; }
.tip { font-size:12px;color:#998; }
#drop-area { width: 100%; min-height: 120px; border: 2px dashed #b7c7de; border-radius: 9px; background: #f5f7fa; text-align: center; line-height: 120px; font-size: 15px; color: #98a8c7; margin-bottom: 16px; cursor: pointer; transition: border-color .18s;}
#drop-area.dragover { border-color: #3b82f6; background: #f0f6ff; color: #234fa2; } #drop-area.dragover { border-color: #3b82f6; background: #f0f6ff; color: #234fa2; }
#uploadList { font-size: 13px; color: #888; margin-top: 7px; text-align: left;} #uploadList { font-size: 13px; color: #888; margin-top: 7px; text-align: left;}
.desc { color: #99a; font-size: 13px; margin-bottom: 7px; } .desc { color: #99a; font-size: 13px; margin-bottom: 7px; }
#fileElem { display: none; } #fileElem { display: none; }
.success { color: #2d974b; }
.error { color: #e64e4e; }
.tip { font-size:12px;color:#998; }
.progress-item { font-size: 14px; margin-bottom: 10px; color: #444; } .progress-item { font-size: 14px; margin-bottom: 10px; color: #444; }
.file-label { display: inline-block; width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } .file-label { display: inline-block; width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.percent-label { font-size: 12px; color: #888; } .percent-label { font-size: 12px; color: #888; }
.upload-msg { margin-left: 8px; } .upload-msg { margin-left: 8px; }
/* 右侧json面板 */
.result-panel { flex: none; width: 380px; margin: 60px 0 0; background: #fff; border-radius: 13px; box-shadow: 0 6px 26px #ccc4; padding: 28px 25px 22px;} .result-panel { flex: none; width: 380px; margin: 60px 0 0; background: #fff; border-radius: 13px; box-shadow: 0 6px 26px #ccc4; padding: 28px 25px 22px;}
.result-panel h3 { font-size: 1rem; margin-bottom: 9px; color: #1a2557;} .result-panel h3 { font-size: 1rem; margin-bottom: 9px; color: #1a2557;}
.json-box { .json-box { word-break: break-word; white-space: pre-wrap; overflow-x: auto; background: #f8fbfd; border-radius: 10px; padding: 18px 20px 16px 20px; margin-top: 8px; font-family: "JetBrains Mono", "Consolas", "monospace"; font-size: 15px; color: #26496e; min-height: 80px; max-height: 240px; box-shadow: 0 2px 10px #e3e9f2;}
word-break: break-word;
white-space: pre-wrap;
overflow-x: auto;
background: #f8fbfd;
border-radius: 10px;
padding: 18px 20px 16px 20px;
margin-top: 8px;
font-family: "JetBrains Mono", "Consolas", "monospace";
font-size: 15px;
color: #26496e;
min-height: 80px;
max-height: 240px;
box-shadow: 0 2px 10px #e3e9f2;
}
</style> </style>
</head> </head>
<body> <body>
@ -68,7 +52,6 @@
<div class="uploader-main"> <div class="uploader-main">
<h2>上传文件到 MinIO/S3</h2> <h2>上传文件到 MinIO/S3</h2>
<div class="desc">可拖拽或点击选择，支持多文件上传</div> <div class="desc">可拖拽或点击选择，支持多文件上传</div>
<div class="input-row"> <div class="input-row">
<label for="bucketName">Bucket 名称：</label> <label for="bucketName">Bucket 名称：</label>
<select id="bucketName"> <select id="bucketName">
@ -76,41 +59,28 @@
<option value="kbase-priv">kbase-priv（私有）</option> <option value="kbase-priv">kbase-priv（私有）</option>
</select> </select>
</div> </div>
<div id="bucketTip" class="tip" style="margin-bottom:8px; color:red"></div> <div id="bucketTip" class="tip" style="margin-bottom:8px; color:red"></div>
<!-- 目标路径 -->
<!-- 目标文件夹选择 -->
<div class="input-row"> <div class="input-row">
<label for="folderSelect">目标路径：</label> <label for="folderName">目标路径：</label>
<select id="folderSelect"> <input type="text" id="folderName" readonly style="background:#f7fafb;" />
<option value="" disabled selected>请选择</option> <button type="button" class="edit-btn" id="editFolderBtn">修改</button>
<option id="defaultFolderOption" value="">yyyy/yyyyMMdd</option>
<option value="custom">自定义</option>
</select>
</div> </div>
<div class="input-row" id="customFolderRow" style="display: none;">
<label for="folderName">自定义路径：</label>
<input type="text" id="folderName" placeholder="请输入自定义路径" />
</div>
<!-- 是否可检索 --> <!-- 是否可检索 -->
<div class="input-row"> <div class="input-row">
<label for="searchableSelect">是否可检索：</label> <label for="searchableSelect">是否可检索：</label>
<select id="searchableSelect"> <select id="searchableSelect">
<option value="true" selected>允许检索</option> <option value="false" selected>禁止检索</option>
<option value="false">禁止检索</option> <option value="true">允许检索</option>
</select> </select>
</div> </div>
<div class="tip" style="margin-bottom:12px;">* 如 bucket 不存在请先在 MinIO 控制台创建</div> <div class="tip" style="margin-bottom:12px;">* 如 bucket 不存在请先在 MinIO 控制台创建</div>
<div id="drop-area"> <div id="drop-area">
<div id="drop-msg">拖拽文件到此上传，或点击选择文件</div> <div id="drop-msg">拖拽文件到此上传，或点击选择文件</div>
<input type="file" id="fileElem" multiple /> <input type="file" id="fileElem" multiple />
</div> </div>
<div id="uploadList"></div> <div id="uploadList"></div>
</div> </div>
<div class="result-panel"> <div class="result-panel">
<h3>上传结果 JSON <h3>上传结果 JSON
<a href="upload-history.html" target="_blank" style="font-size: 13px; color: #2563eb; text-decoration: none; padding: 10px">查看历史上传记录 ↗</a> <a href="upload-history.html" target="_blank" style="font-size: 13px; color: #2563eb; text-decoration: none; padding: 10px">查看历史上传记录 ↗</a>

77
scripts/uploader.js
View File

@ -1,14 +1,48 @@
// uploader.js
const dropArea = document.getElementById("drop-area"); const dropArea = document.getElementById("drop-area");
const fileElem = document.getElementById("fileElem"); const fileElem = document.getElementById("fileElem");
const uploadList = document.getElementById("uploadList"); const uploadList = document.getElementById("uploadList");
const folderNameInput = document.getElementById("folderName"); const folderNameInput = document.getElementById("folderName");
const folderSelect = document.getElementById("folderSelect"); const editFolderBtn = document.getElementById("editFolderBtn");
const searchableSelect = document.getElementById("searchableSelect"); const searchableSelect = document.getElementById("searchableSelect");
const bucketNameInput = document.getElementById("bucketName"); const bucketNameInput = document.getElementById("bucketName");
const jsonResult = document.getElementById("jsonResult"); const jsonResult = document.getElementById("jsonResult");
const API_UPLOAD = "http://app.wisdompulse.cn/api/v1/doc/upload-files"; const API_UPLOAD = "http://app.wisdompulse.cn/api/v1/doc/upload-files";
// =========== 目标路径输入可编辑/不可编辑切换 ==============
function getDefaultFolderPath() {
const now = new Date();
const yyyy = now.getFullYear();
const mm = (now.getMonth() + 1).toString().padStart(2, "0");
const dd = now.getDate().toString().padStart(2, "0");
return `Year-${yyyy}/${yyyy}${mm}${dd}`;
}
let isEditing = false;
folderNameInput.value = getDefaultFolderPath();
editFolderBtn.onclick = function () {
if (!isEditing) {
folderNameInput.readOnly = false;
folderNameInput.style.background = "#fff";
folderNameInput.focus();
editFolderBtn.textContent = "完成";
isEditing = true;
} else {
folderNameInput.readOnly = true;
folderNameInput.style.background = "#f7fafb";
editFolderBtn.textContent = "修改";
isEditing = false;
}
};
folderNameInput.addEventListener("blur", function () {
if (isEditing) {
folderNameInput.readOnly = true;
folderNameInput.style.background = "#f7fafb";
editFolderBtn.textContent = "修改";
isEditing = false;
}
});
// =========== 拖拽、选择文件 ==============
dropArea.addEventListener("click", () => fileElem.click()); dropArea.addEventListener("click", () => fileElem.click());
dropArea.addEventListener("dragover", e => { dropArea.addEventListener("dragover", e => {
e.preventDefault(); dropArea.classList.add("dragover"); e.preventDefault(); dropArea.classList.add("dragover");
@ -23,19 +57,11 @@ dropArea.addEventListener("drop", e => {
fileElem.addEventListener("change", () => handleFiles(fileElem.files)); fileElem.addEventListener("change", () => handleFiles(fileElem.files));
function getTargetFolder() { function getTargetFolder() {
const selected = folderSelect?.value || ""; return (folderNameInput.value || getDefaultFolderPath()).trim().replace(/^\/+|\/+$/g, "");
const year = new Date().getFullYear();
if (selected === "custom") {
return (folderNameInput.value || `Year-${year}/default`).trim().replace(/^\/+|\/+$/g, "");
} else {
return selected || `Year-${year}/default`;
} }
}
function getSearchable() { function getSearchable() {
return searchableSelect?.value === "true"; return searchableSelect?.value === "true";
} }
function getBucketName() { function getBucketName() {
let bucket = (bucketNameInput.value || "").trim(); let bucket = (bucketNameInput.value || "").trim();
return bucket.replace(/^\/+|\/+$/g, ""); return bucket.replace(/^\/+|\/+$/g, "");
@ -54,7 +80,6 @@ function createProgressItem(filename) {
uploadList.appendChild(wrapper); uploadList.appendChild(wrapper);
return wrapper; return wrapper;
} }
function showMsg(msg, ok) { function showMsg(msg, ok) {
const div = document.createElement("div"); const div = document.createElement("div");
div.className = ok ? "success" : "error"; div.className = ok ? "success" : "error";
@ -62,7 +87,7 @@ function showMsg(msg, ok) {
uploadList.appendChild(div); uploadList.appendChild(div);
} }
// 批量上传（单次FormData），统一进度条管理，JSON右侧展示 // =========== 主上传逻辑 ===========
function handleFiles(fileList) { function handleFiles(fileList) {
uploadList.innerHTML = ""; uploadList.innerHTML = "";
jsonResult.textContent = "{}"; jsonResult.textContent = "{}";
@ -173,7 +198,7 @@ function handleFiles(fileList) {
xhr.send(form); xhr.send(form);
} }
// === 放在文件结尾，而不是 handleFiles 内部 === // ======== Bucket切换提示 ========
const bucketTip = document.getElementById("bucketTip"); const bucketTip = document.getElementById("bucketTip");
bucketNameInput.addEventListener("change", function () { bucketNameInput.addEventListener("change", function () {
if (bucketNameInput.value === "kbase-priv") { if (bucketNameInput.value === "kbase-priv") {
@ -185,27 +210,3 @@ bucketNameInput.addEventListener("change", function () {
} }
}); });
bucketNameInput.dispatchEvent(new Event("change")); bucketNameInput.dispatchEvent(new Event("change"));
document.addEventListener("DOMContentLoaded", function () {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
const defaultFolderPath = `Year-${year}/${month}${day}`;
const folderSelect = document.getElementById("folderSelect");
const folderNameInput = document.getElementById("folderName");
const customFolderRow = document.getElementById("customFolderRow");
const defaultOption = document.getElementById("defaultFolderOption");
defaultOption.value = defaultFolderPath;
defaultOption.textContent = defaultFolderPath;
folderSelect.value = defaultFolderPath;
folderSelect.addEventListener("change", function () {
if (this.value === "custom") {
customFolderRow.style.display = "block";
} else {
customFolderRow.style.display = "none";
}
});
});