File size: 5,008 Bytes
9bdc593 cc826a1 9bdc593 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 | <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件缓存</title>
<link rel="stylesheet" href="/static/plugin-ui.css">
</head>
<body>
<main class="plugin-shell">
<header class="plugin-header">
<div>
<h1 class="plugin-title">文件缓存</h1>
<p class="plugin-subtitle">上传临时或永久文件，查看缓存清单，并复制可访问地址。</p>
</div>
<span id="statusPill" class="plugin-status">检查中</span>
</header>
<div id="message" class="plugin-message"></div>
<section class="plugin-grid">
<div class="plugin-panel">
<h2 class="plugin-panel-title">上传文件</h2>
<div class="plugin-stack">
<div class="plugin-field">
<label class="plugin-label" for="file">文件</label>
<input id="file" type="file">
</div>
<div class="plugin-field">
<label class="plugin-label" for="fileType">保存类型</label>
<select id="fileType">
<option value="temp">临时文件</option>
<option value="permanent">永久文件</option>
</select>
</div>
<button class="plugin-button" onclick="uploadFile()">上传</button>
</div>
</div>
<div class="plugin-panel">
<h2 class="plugin-panel-title">插件状态</h2>
<pre id="statusOutput" class="plugin-output">等待状态数据。</pre>
</div>
</section>
<section class="plugin-panel">
<div class="plugin-header" style="margin-bottom:12px">
<h2 class="plugin-panel-title" style="margin:0">缓存文件</h2>
<button class="plugin-button secondary" onclick="loadFiles()">刷新列表</button>
</div>
<div id="fileList" class="plugin-list"></div>
</section>
</main>
<script src="/static/plugin-ui.js"></script>
<script>
const API = "/plugins/cache/api";
async function loadStatus() {
try {
const data = await PluginUI.request(`${API}/status`);
PluginUI.setJson("statusOutput", data);
const pill = document.getElementById("statusPill");
pill.textContent = data.enabled === false ? "插件未启用" : "可用";
pill.className = `plugin-status ${data.enabled === false ? "warn" : "ok"}`;
} catch (error) {
PluginUI.showMessage("message", error.message, "error");
}
}
async function uploadFile() {
try {
const input = document.getElementById("file");
if (!input.files.length) throw new Error("请选择要上传的文件");
const form = new FormData();
form.append("file", input.files[0]);
form.append("file_type", document.getElementById("fileType").value);
const data = await PluginUI.request(`${API}/upload`, { method: "POST", body: form });
PluginUI.showMessage("message", `上传成功：${data.filename}`);
input.value = "";
await loadFiles();
await loadStatus();
} catch (error) {
PluginUI.showMessage("message", error.message, "error");
}
}
async function loadFiles() {
const list = document.getElementById("fileList");
try {
const data = await PluginUI.request(`${API}/list`);
if (!data.files || data.files.length === 0) {
list.innerHTML = '<div class="plugin-muted">暂无缓存文件。</div>';
return;
}
list.innerHTML = data.files.map((file) => `
<div class="plugin-item">
<div>
<strong>${file.name || file.filename || file.file_id}</strong>
<div class="plugin-muted">${file.type || "-"} · ${file.file_id}</div>
</div>
<div class="plugin-row">
<a class="plugin-button secondary" href="${API}/file/${file.file_id}" target="_blank" rel="noreferrer">下载</a>
<button class="plugin-button secondary" onclick="copyUrl('${API}/file/${file.file_id}')">复制地址</button>
<button class="plugin-button danger" onclick="deleteFile('${file.file_id}')">删除</button>
</div>
</div>
`).join("");
} catch (error) {
list.innerHTML = "";
PluginUI.showMessage("message", error.message, "error");
}
}
async function copyUrl(url) {
await PluginUI.copyText(`${location.origin}${url}`);
PluginUI.showMessage("message", "文件地址已复制");
}
async function deleteFile(fileId) {
try {
const data = await PluginUI.request(`${API}/file/${fileId}`, { method: "DELETE" });
PluginUI.showMessage("message", data.message || "文件已删除");
await loadFiles();
await loadStatus();
} catch (error) {
PluginUI.showMessage("message", error.message, "error");
}
}
loadStatus();
loadFiles();
</script>
</body>
</html>
|