From c5d29c72e9df7408520184c1bd7b343e083c99d5 Mon Sep 17 00:00:00 2001
From: overwriter <9856mmm@gmail.com>
Date: Sat, 19 Oct 2024 23:08:23 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=B8=BB=E9=A1=B5=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html | 117 +++++++++++++++++++++++++++++++++-------------
 1 file changed, 85 insertions(+), 32 deletions(-)
diff --git a/public/index.html b/public/index.html
index 1b2aba4..27e9748 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,58 +6,111 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>网易云音乐 API</title>
-</head>
-
-<body>
-  <h1>网易云音乐 API</h1>
-  当你看到这个页面时,这个服务已经成功跑起来了~
-  <a href="/docs">查看文档</a>
-  <h2>例子:</h2>
-  <ul>
-    <li>1. <a href="./search?keywords=海阔天空">搜索</a></li>
-    <li>2. <a href="./comment/music?id=186016&limit=1">歌曲评论</a></li>
-    <li>3. <a href="./dj/program?rid=336355127">电台节目</a></li>
-    <li>4. <a href="./qrlogin.html">二维码登录</a></li>
-    <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,
-    body {
+    html, body {
       height: 100vh;
       width: 100vw;
       margin: 0;
       padding: 0;
-      background: #ffffff;
-      text-align: center;
-      margin-top: 30px;
-      overflow: hidden;
+      background: #f9f9f9;
+      font-family: Arial, sans-serif;
+      color: #333;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
     }
 
-    * {
-      color: rgb(100, 100, 100);
+    h1 {
+      font-size: 2.5em;
+      margin-bottom: 1em;
+      color: #42b983;
+    }
+
+    p {
+      font-size: 1.2em;
+      margin-bottom: 2em;
+      color: #666;
     }
 
     a {
       color: #42b983;
+      text-decoration: none;
+      transition: color 0.3s ease;
     }
 
-    ul,
-    li {
-      margin: 0;
+    a:hover {
+      color: #329d6e;
     }
 
     ul {
-      margin-left: -40px;
-      line-height: 30px;
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      text-align: left;
+      max-width: 600px;
+      width: 100%;
     }
 
     li {
-      list-style: none;
+      margin: 0.5em 0;
+      line-height: 1.5;
+      display: flex;
+      align-items: center;
+    }
+
+    .number {
+      margin-right: 10px;
+      color: #999;
+      font-weight: bold;
+    }
+
+    .container {
+      background: #fff;
+      padding: 2em;
+      border-radius: 8px;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      max-height: 80vh; /* 设置最大高度 */
+      overflow-y: auto; /* 启用垂直滚动条 */
     }
   </style>
+</head>
+
+<body>
+  <div class="container">
+    <h1>网易云音乐 API</h1>
+    <p>当你看到这个页面时，这个服务已经成功跑起来了~</p>
+    <p class="current-url"><span id="current-url"></span></p>
+    <a href="/docs">查看文档</a>
+    <h2>例子:</h2>
+    <ul id="example-list">
+      <li><a href="./search?keywords=海阔天空">搜索</a></li>
+      <li><a href="./comment/music?id=186016&limit=1">歌曲评论</a></li>
+      <li><a href="./dj/program?rid=336355127">电台节目</a></li>
+      <li><a href="./qrlogin.html">二维码登录</a></li>
+      <li><a href="./audio_match_demo/index.html">听歌识曲</a></li>
+      <li><a href="./cloud.html">云盘上传</a></li>
+      <li><a href="./eapi_decrypt.html">eapi 参数/返回值解析</a></li>
+      <li><a href="./api.html">API 调试界面</a></li>
+    </ul>
+  </div>
+
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const currentUrlElement = document.getElementById('current-url');
+      currentUrlElement.textContent = window.location.href;
+
+      const exampleList = document.getElementById('example-list');
+      const items = exampleList.getElementsByTagName('li');
+
+      for (let i = 0; i < items.length; i++) {
+        const number = document.createElement('span');
+        number.className = 'number';
+        number.textContent = (i + 1) + '. ';
+        items[i].prepend(number);
+      }
+    });
+  </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
