Feat: Home Page

首页内容完善

src/components/ArticleSnippet.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+import Alipay from "@/images/donate/alipay.png";
+import WeChat from "@/images/donate/wechat.png";
+import QQ from "@/images/donate/qq.png";
+
+export const About = () => {
+  return (
+    <>
+      <h3>关于本项目</h3>
+      <p>保罗 API 基本上作为一只辅助角色，默默无闻的服务着其他主要项目，这便是它存在的意义。像「随机动漫壁纸」接口就是为 <a href="https://github.com/Dreamer-Paul/Single" target="_blank">Single</a> 主题量身定做的，既符合主题外观特性，又能满足其他人的快捷使用。它诞生于 2018 年 4 月，是保罗入门后端和 PHP 语言的主要项目之一。</p>
+      <p>项目后端采用原生 PHP 编写，前端是原生 CSS 和 JS，也就是非前后端分离项目，不需要额外的前端 SSR 服务。它没有任何框架加持（自己写的），所以执行速度和并发还是个谜。尽管如此，它也较为稳定的跑了这么久，不是吗？</p>
+      <ul>
+          <li>前端：CSS + Vanilla JS</li>
+          <li>后端：PHP</li>
+          <li>数据库：MariaDB</li>
+          <li>缓存：Redis</li>
+      </ul>
+    </>
+  )
+}
+
+export const Donate = () => {
+  return (
+    <>
+      <h3>赞助我：</h3>
+      <p>本服务将长期免费提供，运行至今暂无任何打赏记录，故不进行展示。如您能为本站献上微薄之力，就是对我的最大支持了~ 记得备注「支持保罗的 API」噢！</p>
+      <div className="row center">
+        <div className="col-6 col-m-4 center-fixed">
+          <img src={Alipay} alt="支付宝" />
+          <p>支付宝</p>
+        </div>
+        <div className="col-6 col-m-4 center-fixed">
+          <img src={WeChat} alt="微信支付" />
+          <p>微信支付</p>
+        </div>
+        <div className="col-6 col-m-4 center-fixed">
+          <img src={QQ} alt="QQ 钱包" />
+          <p>QQ 钱包</p>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/Layout/ArticleHead.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+interface ArticleHeadProps {
+  title: string
+  desc: string
+}
+
+function ArticleHead({ title, desc }: ArticleHeadProps) {
+  return (
+    <section className="header">
+      <h1>{title}</h1>
+      <h2>{desc}</h2>
+    </section>
+  )
+}
+
+export default ArticleHead;

src/index.css

@@ -1,5 +1,3 @@
-@charset "UTF-8";
-
 /* ----
 
 # Paul API
@@ -35,6 +33,11 @@ button{
 
 .radius-full{ border-radius: 100% }
 
+.notice{
+  color: #175782;
+  font-style: normal;
+}
+
 /* 1 - 页眉
 -------------------------------- */
 .sidebar{
@@ -181,7 +184,7 @@ main .post{
   margin-bottom: 3em;
 }
 
-main .post a{
+main .post p a{
   text-decoration: 1px dashed underline;
   text-underline-offset: 0.1em;
 }

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>
+
+        <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>
     
   )