Feat: Add Bili Page

哔哩小窗说明页面，状态和随机壁纸接口调整

src/api/data/wallpaper.ts

@@ -6,18 +6,18 @@ export const source: Record<string, IWallpaperSource> = {
     name: "Gitee",
     url: "https://dreamer-paul.gitee.io/anime-wallpaper/",
     start: 1,
-    end: 104
+    end: 107
   },
   gh: {
     name: "GitHub",
     url: "https://dreamer-paul.github.io/Anime-Wallpaper/",
     start: 1,
-    end: 104
+    end: 107
   },
   jsd: {
     name: "JSDelivr",
     url: "https://fastly.jsdelivr.net/gh/Dreamer-Paul/Anime-Wallpaper/",
     start: 1,
-    end: 104
+    end: 107
   }
 }

src/api/date.ts

@@ -1,5 +0,0 @@
-import { Api, Get } from '@midwayjs/hooks';
-
-export const getDate = Api(Get(), async () => {
-  return new Date().toString();
-});

src/api/star.ts

@@ -1,10 +0,0 @@
-import { Api, Post } from '@midwayjs/hooks';
-import fetch from 'isomorphic-unfetch';
-
-export default Api(Post(), async (repo: string) => {
-  const response = await fetch(`https://api.github.com/repos/${repo}`);
-  const json = await response.json();
-  return {
-    stars: json.stargazers_count,
-  };
-});

src/api/stat.ts

@@ -5,18 +5,19 @@ import { client } from "./utils/redis";
 export default Api(
   Get(),
   async () => {
-    const wallpaperStat = await client.get("api-next:stat:wallpaper");
     const neteaseStat = await client.get("api-next:stat:netease");
+    const wallpaperStat = await client.get("api-next:stat:wallpaper");
+    const biliStat = await client.get("api-next:stat:bili");
     const bingStat = await client.get("api-next:stat:bing");
     const acgmStat = await client.get("api-next:stat:acgm");
 
     return {
       code: 1,
       data: {
-        wallpaper: Number(wallpaperStat),
         netease: Number(neteaseStat),
+        wallpaper: Number(wallpaperStat),
         acgm: Number(acgmStat),
-        bili: -1,
+        bili: Number(biliStat),
         bing: Number(bingStat),
       }
     };

src/index.tsx

@@ -19,6 +19,7 @@ import Log from "./pages/log";
 import Netease from "./pages/netease";
 import Wallpaper from "./pages/wallpaper";
 import ACGM from "./pages/acgm";
+import Bili from "./pages/bili";
 import Bing from "./pages/bing";
 import NoMatch from "./pages/404";
 
@@ -34,6 +35,7 @@ function App() {
         <Route path="/netease" element={<Netease />} />
         <Route path="/wallpaper" element={<Wallpaper />} />
         <Route path="/acgm" element={<ACGM />} />
+        <Route path="/bili" element={<Bili />} />
         <Route path="/bing" element={<Bing />} />
         <Route path="*" element={<NoMatch />} />
       </Routes>

src/pages/bili.tsx

@@ -0,0 +1,112 @@
+// React
+import React, { useEffect } from "react";
+
+
+// UI
+import { Link } from "react-router-dom";
+import prism from "prismjs";
+import ArticleHead from "@/components/Layout/ArticleHead";
+
+
+// Components
+function Bili() {
+  useEffect(() => {
+    prism.highlightAll();
+  }, []);
+
+  return (
+    <main>
+      <ArticleHead title="哔哩哔哩小窗" desc="更简洁的展示 B 站发布的视频内容" />
+      <article className="post">
+        <h3>使用方法：</h3>
+        <p>在你的网页上插入 <code>iframe</code> 标签，并将本 API 的地址 <code>https://api.paugram.com/bili/?av=视频 AV 号</code> 填写在 <code>src</code> 属性里即可食用。</p>
+        <p>如果您已开始使用本 API 服务，则默认视为遵守 <Link to="/notice">本约定</Link>。</p>
+
+        <h3>参数：</h3>
+        <div className="ks-table text-nowrap">
+          <table>
+            <thead>
+              <tr>
+                <td>参数</td>
+                <td>要求</td>
+                <td>描述</td>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>av <em>二选一</em></td>
+                <td>有效的 AV 号</td>
+                <td>可以在 B 站上正常打开访问的视频</td>
+              </tr>
+              <tr>
+                <td>bv <em>二选一</em></td>
+                <td>有效的 BV 号</td>
+                <td>可以在 B 站上正常打开访问的视频</td>
+              </tr>
+              <tr>
+                <td>style</td>
+                <td><code>white</code> <code>gray</code> <code>black</code></td>
+                <td>指定展示内容的风格和样式</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <h3>风格：</h3>
+        <div className="ks-table text-nowrap">
+          <table>
+            <thead>
+              <tr>
+                <td>参数名称</td>
+                <td>描述</td>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>[默认]</td>
+                <td>不填写本参数，默认为透明背景</td>
+              </tr>
+              <tr>
+                <td>white</td>
+                <td>白色背景，搭配灰色背景的网页</td>
+              </tr>
+              <tr>
+                <td>gray</td>
+                <td>浅灰色背景，搭配白色背景的网页</td>
+              </tr>
+              <tr>
+                <td>black</td>
+                <td>深黑色背景，搭配深色系（包括夜间模式）的网页</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <h3>示例：</h3>
+        <p>获得视频 av39027441 的结果，并且改为灰色背景样式</p>
+<pre className="language-html"><code>&lt;iframe src="https://api.paugram.com/bili?av=39027441&style=gray" style="height: 10em; width: 100%"&gt;&lt;/iframe&gt;</code></pre>
+        <p>得到的结果效果如下：</p>
+        <iframe src={`//${location.host}/api/bili?av=39027441&style=gray`} style={{ height: "10em", width: "100%"}}></iframe>
+        <p>获得视频 av69269716 的结果，并且改为黑色背景样式</p>
+<pre className="language-html"><code>&lt;iframe src="https://api.paugram.com/bili?av=69269716&style=black" style="height: 10em; width: 100%"&gt;&lt;/iframe&gt;</code></pre>
+        <p>得到的结果效果如下：</p>
+        <iframe src={`//${location.host}/api/bili?av=69269716&style=black`} style={{ height: "10em", width: "100%"}}></iframe>
+        <p>获得视频 BV19f4y1k7eN 的结果，并且改为白色背景样式</p>
+<pre className="language-html"><code>&lt;iframe src="https://api.paugram.com/bili?bv=BV19f4y1k7eN&style=white" style="height: 10em; width: 100%"&gt;&lt;/iframe&gt;</code></pre>
+        <p>得到的结果效果如下：</p>
+        <iframe src={`//${location.host}/api/bili?bv=BV19f4y1k7eN&style=white`} style={{ height: "10em", width: "100%"}}></iframe>
+
+        <h3>常见问题：</h3>
+        <p>为什么我用以上代码，插入进网页会出现滚动条？</p>
+        <p>答：因为页面设计使用的是相对单位，默认以 <code>16px</code> 为基准，将上方的 <code>height: 10em</code> 替换成 <code>height: 160px</code> 就可以解决这个问题了。</p>
+
+        <h3>感谢：</h3>
+        <ul>
+          <li><a href="https://www.bilibili.com" rel="nofollow" target="_blank">BiliBili</a></li>
+        </ul>
+      </article>
+    </main>
+  )
+}
+
+export default Bili;

src/pages/index.tsx

@@ -34,7 +34,7 @@ function Index() {
         <h3>累计调用：</h3>
         <p>自 2018 年 7 月初开始至今，各 API 的使用状况如下：</p>
 
-        <div className="row text-center">
+        <div className="row text-center" style={{ marginTop: "2em" }}>
           {
             stat?.data && Object.keys(stat.data).map((item) => (
               <div className="col-4" key={item}>