| <!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 equal"> |
| <div class="plugin-panel"> |
| <h2 class="plugin-panel-title">输入</h2> |
| <div class="plugin-stack"> |
| <div class="plugin-field"> |
| <label class="plugin-label" for="mode">清理模式</label> |
| <select id="mode"> |
| <option value="standard">标准</option> |
| <option value="compact">紧凑</option> |
| <option value="none">仅标点规范</option> |
| </select> |
| </div> |
| <div class="plugin-field"> |
| <label class="plugin-label" for="file">从文件读取，可选</label> |
| <input id="file" type="file" accept=".md,.txt" onchange="loadFile()"> |
| </div> |
| <textarea id="inputText" placeholder="粘贴需要清理的文本"></textarea> |
| <button class="plugin-button" onclick="processText()">清理文本</button> |
| </div> |
| </div> |
|
|
| <div class="plugin-panel"> |
| <h2 class="plugin-panel-title">输出</h2> |
| <pre id="output" class="plugin-output">等待清理结果。</pre> |
| </div> |
| </section> |
| </main> |
|
|
| <script src="/static/plugin-ui.js"></script> |
| <script> |
| const API = "/plugins/text/api"; |
| |
| async function loadStatus() { |
| try { |
| const data = await PluginUI.request(`${API}/status`); |
| const pill = document.getElementById("statusPill"); |
| pill.textContent = data.enabled === false ? "插件未启用" : "可用"; |
| pill.className = `plugin-status ${data.enabled === false ? "warn" : "ok"}`; |
| } catch { |
| document.getElementById("statusPill").textContent = "状态未知"; |
| } |
| } |
| |
| async function loadFile() { |
| try { |
| const input = document.getElementById("file"); |
| if (!input.files.length) return; |
| const form = new FormData(); |
| form.append("file", input.files[0]); |
| const data = await PluginUI.request(`${API}/upload`, { method: "POST", body: form }); |
| document.getElementById("inputText").value = data.content || ""; |
| PluginUI.showMessage("message", `已读取文件：${data.filename}`); |
| } catch (error) { |
| PluginUI.showMessage("message", error.message, "error"); |
| } |
| } |
| |
| async function processText() { |
| try { |
| const form = new FormData(); |
| form.append("text", document.getElementById("inputText").value); |
| form.append("mode", document.getElementById("mode").value); |
| const data = await PluginUI.request(`${API}/process`, { method: "POST", body: form }); |
| PluginUI.setText("output", data.cleaned_text || ""); |
| PluginUI.showMessage("message", `清理完成：${data.original_char_count} -> ${data.cleaned_char_count} 字符`); |
| } catch (error) { |
| PluginUI.showMessage("message", error.message, "error"); |
| } |
| } |
| |
| loadStatus(); |
| </script> |
| </body> |
| </html> |
|
|
