Feat: Home Page

首页内容完善

src/pages/index.tsx

@@ -6,63 +6,94 @@ import fetchGithubStars from '../api/star';
 import { getBookByParams, getBookByQuery } from '../api/book';
 import getStat from "../api/stat";
 
-function Index() {
+import { Link } from "react-router-dom";
+import ArticleHead from "@/components/Layout/ArticleHead";
+import { Donate, About } from "@/components/ArticleSnippet";
 
-  const { data: date } = useRequest(() => getDate());
-  // const { data: repo, loading } = useRequest(() =>
-  //   fetchGithubStars('midwayjs/midway')
-  // );
-  const { data: book } = useRequest(() =>
-    getBookByParams({ params: { id: '1' } })
-  );
-  const { data: book2 } = useRequest(() =>
-    getBookByQuery({ query: { id: '2' } })
-  );
+const apiMap: Record<string, string> = {
+  wallpaper: "随机动漫壁纸",
+  netease: "网易云解析",
+  acgm: "随机动漫音乐",
+  bili: "哔哩小窗",
+  bing: "必应每日壁纸"
+}
+
+function Index() {
 
   const { data: stat } = useRequest(() => getStat());
 
   return (
     <main>
-      <img src="/logo.png" className="logo" />
-      <h2>Hello Midway Hooks</h2>
-      <p style={{ textAlign: 'center' }}>
-        Edit <code>src/api/*.ts</code> and watch it change.
-        <br />
-        You can also open Devtools to see the request details.
-      </p>
-      <div>
-        <p>
-          <span className="lambda">λ GET</span>
-          <span className="lambda">getDate()</span>
-          <span>Server Date: {date}</span>
-        </p>
-        <p>
-          <span className="lambda">λ POST</span>
-          <span className="lambda">fetchStars('midwayjs/midway')</span>
-          {/* <span>Github Stars: {loading ? 'Fetching...' : repo.stars}</span> */}
-        </p>
-        <div>
+      <ArticleHead title="保罗 API" desc="这里是保罗制作的简易 API 系列~" />
+      <article className="post">
+        <blockquote className="notice"><i className="fa fa-bell"></i> 公告：API 重构了 NodeJS 版本，基于 MidwayJS 实现，速度也许会略快一点？</blockquote>
+
+        <h3>说明：</h3>
+        <p>本网站旨在于提供我开发的简易 API，用更精简的信息为你的网站/软件提供实用的服务。如果您的项目已开始使用我提供的 API 服务，则默认视为遵守 <Link to="/notice">本约定</Link>！项目维护记录详见 <Link to="/log">此页面</Link>！</p>
+
+        <h3>累计调用：</h3>
+        <p>自 2018 年 7 月初开始至今，各 API 的使用状况如下：</p>
+
+        <div className="row text-center">
           {
             stat?.data && Object.keys(stat.data).map((item) => (
-              <p key={item}>{item}: {stat.data[item]}</p>
+              <div className="col-4" key={item}>
+                <h2>{stat.data[item]}</h2>
+                <p>{apiMap[item]}</p>
+              </div>
             ))
           }
         </div>
-        <p>
-          <span className="lambda">λ GET</span>
-          <span className="lambda">
-            {`getBookByParams({ params: { id: '1' } })`}
-          </span>
-          <span>Book title: {book?.title}</span>
-        </p>
-        <p>
-          <span className="lambda">λ GET</span>
-          <span className="lambda">
-            {`getBookByQuery({ query: { id: '2' } })`}
-          </span>
-          <span>Book title: {book2?.title}</span>
-        </p>
-      </div>
+
+        <h3>接口列表：</h3>
+        <div className="row full">
+          <div className="col-6 col-m-4">
+            <Link className="box first" to="/netease">
+              <h3><i className="fa fa-music"></i>网易云解析</h3>
+              <p>解析音乐并精简输出，配合 Kico Player 使用更佳</p>
+            </Link>
+          </div>
+          {/* <div className="col-6 col-m-4">
+            <a className="box second" href="javascript:ks.notice('由于经费和资源问题，暂不考虑公开，求赞助！', {time: 2000, color: 'yellow'})">
+              <h3><i className="fa fa-heart"></i>随机看板娘模型</h3>
+              <p>在你的网站生成随机的 L2D 看板娘</p>
+            </a>
+          </div> */}
+          <div className="col-6 col-m-4">
+            <Link className="box third" to="/wallpaper">
+              <h3><i className="fa fa-photo"></i>随机动漫壁纸</h3>
+              <p>生成适合 Single 主题的白底动漫壁纸</p>
+            </Link>
+          </div>
+          <div className="col-6 col-m-4">
+            <Link className="box fourth" to="/acgm">
+              <h3><i className="fa fa-headphones"></i>随机动漫音乐</h3>
+              <p>随机生成动漫背景音乐，基于网易云解析</p>
+            </Link>
+          </div>
+          {/* <div className="col-6 col-m-4">
+            <Link className="box fifth" to="/gravatar">
+              <h3><i className="fa fa-user"></i>Gravatar 解析</h3>
+              <p>将邮箱地址转换为 MD5，并跳转到相对应的图片</p>
+            </Link>
+          </div> */}
+          <div className="col-6 col-m-4">
+            <Link className="box sixth" to="/bili">
+              <h3><i className="fa fa-film"></i>哔哩哔哩小窗</h3>
+              <p>更简洁的展示你在 B 站发布的视频内容</p>
+            </Link>
+          </div>
+          <div className="col-6 col-m-4">
+            <Link className="box seventh" to="/bing">
+              <h3><i className="fa fa-gift"></i>必应每日壁纸</h3>
+              <p>每日更新，尽享乐趣，直接跳转，使用便捷</p>
+            </Link>
+          </div>
+        </div>
+
+        <Donate />
+        <About />
+      </article>
     </main>
     
   )