| <!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">上传图片，生成 16、32、48、128 像素规格的图标文件。</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="imageFile">图片文件</label> |
| <input id="imageFile" type="file" accept="image/png,image/jpeg,image/gif,image/bmp,image/webp" onchange="inspectImage()"> |
| </div> |
| <div class="plugin-field"> |
| <label class="plugin-label" for="size">目标尺寸</label> |
| <select id="size"> |
| <option value="16">16 x 16</option> |
| <option value="32">32 x 32</option> |
| <option value="48">48 x 48</option> |
| <option value="128">128 x 128</option> |
| </select> |
| </div> |
| <div class="plugin-field"> |
| <label class="plugin-label" for="format">输出格式</label> |
| <select id="format"> |
| <option value="PNG">PNG</option> |
| <option value="JPEG">JPEG</option> |
| <option value="WEBP">WEBP</option> |
| </select> |
| </div> |
| <button class="plugin-button" onclick="generateImage()">生成并下载</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/image/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 inspectImage() { |
| try { |
| const input = document.getElementById("imageFile"); |
| 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 }); |
| PluginUI.setJson("output", data); |
| } catch (error) { |
| PluginUI.showMessage("message", error.message, "error"); |
| } |
| } |
| |
| async function generateImage() { |
| try { |
| const input = document.getElementById("imageFile"); |
| if (!input.files.length) throw new Error("请选择图片文件"); |
| const form = new FormData(); |
| const size = document.getElementById("size").value; |
| const format = document.getElementById("format").value; |
| form.append("file", input.files[0]); |
| form.append("size", size); |
| form.append("format", format); |
| const blob = await PluginUI.requestBlob(`${API}/generate`, { method: "POST", body: form }); |
| const ext = format === "JPEG" ? "jpg" : format.toLowerCase(); |
| PluginUI.downloadBlob(blob, `icon${size}.${ext}`); |
| PluginUI.showMessage("message", "图片已生成并下载"); |
| } catch (error) { |
| PluginUI.showMessage("message", error.message, "error"); |
| } |
| } |
| |
| loadStatus(); |
| </script> |
| </body> |
| </html> |
|
|
