feat: 增加API调试界面

2025-05-23 22:37:41 +08:00 · 2024-07-20 00:21:54 +08:00 · 2024-07-20 00:21:54 +08:00 · a0d4a3c27a
commit a0d4a3c27a
parent 2469823df2
2 changed files with 128 additions and 0 deletions
--- a/public/api.html
+++ b/public/api.html
@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>API 调试界面</title>
+<style>
+    body {
+        font-family: Arial, sans-serif;
+        margin: 20px;
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh;
+    }
+    .container {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+    }
+    form {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 10px;
+        margin-bottom: 10px;
+    }
+    input, button {
+        padding: 10px;
+        box-sizing: border-box;
+        flex: 1;
+    }
+    button {
+        background-color: #4CAF50;
+        color: white;
+        border: none;
+        cursor: pointer;
+    }
+    .data-result {
+        display: flex;
+        flex-direction: row;
+        flex-grow: 1;
+    }
+    .data-result > div {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        padding: 10px;
+        box-sizing: border-box;
+    }
+    .data-result label {
+        margin-bottom: 10px;
+    }
+    #data, #result {
+        height: 100%;
+        box-sizing: border-box;
+    }
+    #data {
+        border-right: 1px solid #ccc;
+    }
+</style>
+</head>
+<body>
+    <div class="container">
+        <form onsubmit="event.preventDefault(); sendRequest();">
+            <label for="uri">uri</label>
+            <input type="text" id="uri" name="uri" value="/api/song/lyric/v1">
+            <label for="crypto">crypto</label>
+            <select id="crypto" name="crypto">
+                <option value="weapi">weapi</option>
+                <option value="eapi">eapi</option>
+                <option value="api">api</option>
+                <option value="linuxapi">linuxapi</option>
+                <option value="" selected>(默认)</option>
+            </select>
+            <button type="submit">发送</button>
+        </form>
+        <div class="data-result">
+            <div>
+                <label for="result">result</label>
+                <textarea id="result" name="result"></textarea>
+            </div>
+            <div>
+                <label for="data">data</label>
+                <textarea id="data" name="data">
+{
+    "cp": false,
+    "id": "2058263032",
+    "kv": 0,
+    "lv": 0,
+    "rv": 0,
+    "tv": 0,
+    "yrv": 0,
+    "ytv": 0,
+    "yv": 0
+}</textarea>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <script>
+        async function sendRequest() {
+            document.getElementById('result').value = ""
+
+            const uri = document.getElementById('uri').value;
+            const crypto = document.getElementById('crypto').value;
+            const data = document.getElementById('data').value;
+
+            try {
+                const res = await axios({
+                    url: `/api?timestamp=${Date.now()}`,
+                    method: 'post',
+                    data: {
+                        uri: uri,
+                        data: data,
+                        crypto: crypto,
+                    },
+                });
+
+                document.getElementById('result').value = JSON.stringify(res.data, null, 2);
+            } catch (error) {
+                document.getElementById('result').value = 'Request failed: ' + error.message;
+            }
+        }
+    </script>
+</body>
+</html>
--- a/public/index.html
+++ b/public/index.html
@ -21,6 +21,7 @@
    <li>4. <a href="./audio_match_demo/index.html">听歌识曲</a></li>
    <li>5. <a href="./cloud.html">云盘上传</a></li>
    <li>6. <a href="./eapi_decrypt.html">eapi 参数和返回内容解析</a></li>
+    <li>7. <a href="./api.html">API 调试界面</a></li>
  </ul>
  <style>
    html,