feat: character page

BIYUEHU · Jun 13, 2024 · 99c7339 · 99c7339
1 parent efb3c94
commit 99c7339
Show file tree

Hide file tree

Showing 20 changed files with 447 additions and 101 deletions.
diff --git a/README.md b/README.md
@@ -2,6 +2,10 @@
 
 Your anime character collection gallery, easily build, freely share.
 
+## Example
+
+> [👉 There](https://hotaru.icu/moehub.html)
+
 ## Stacks
 
 - Frontend: React, tailwind-css

diff --git a/packages/client/index.html b/packages/client/index.html
@@ -3,9 +3,9 @@
 
 <head>
   <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="" />
+  <link rel="icon" type="image/svg+xml" href="https://hotaru.icu/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Moehub</title>
+  <title>MoeHub</title>
 </head>
 
 <body>

diff --git a/packages/client/src/App.tsx b/packages/client/src/App.tsx
@@ -1,11 +1,12 @@
 import { useRoutes } from 'react-router-dom';
-import layout from './components/layout';
+import Layout from './components/Layout';
 import router from './router';
 
 function App() {
   const outlet = useRoutes(router);
+  document.title = 'MoeHub';
 
-  return <div>{layout(outlet!)}</div>;
+  return <Layout outlet={outlet!} />;
 }
 
 export default App;
diff --git a/packages/client/src/components/Layout/index.tsx b/packages/client/src/components/Layout/index.tsx
@@ -0,0 +1,32 @@
+import { Flex, Layout as AntLayout } from 'antd';
+import { Link } from 'react-router-dom';
+import styles from './styles.module.css';
+
+const { Header, Footer, Content } = AntLayout;
+
+const Layout: React.FC<{ outlet: React.ReactElement }> = ({ outlet }) => (
+  <>
+    <div className={styles.background}></div>
+    <Flex gap="middle" wrap>
+      <AntLayout className={styles.layout}>
+        <Header className={styles.header}>
+          <h1>
+            <Link className={styles.headerTitle} to="/">
+              Moe Hub
+            </Link>
+          </h1>
+        </Header>
+        <Content className={styles.content}>{outlet}</Content>
+        <Footer className={styles.footer}>
+          Made with ❤ By{' '}
+          <a href="https://github.com/biyuehu" target="_blank">
+            Arimura Sena
+          </a>{' '}
+          In © 2024
+        </Footer>
+      </AntLayout>
+    </Flex>
+  </>
+);
+
+export default Layout;
diff --git a/packages/client/src/components/Layout/styles.module.css b/packages/client/src/components/Layout/styles.module.css
@@ -0,0 +1,42 @@
+.background {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 110vh;
+  position: fixed;
+  z-index: -1;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: url('https://himeno-sena.com/pic3.jpg');
+}
+
+.header {
+  color: #eee;
+  background-color: #227d51;
+  height: 64px;
+  padding-inline: 48px;
+  line-height: 64px;
+}
+
+.headerTitle {
+  color: #eee;
+}
+
+.content {
+  min-height: 120px;
+  line-height: 120px;
+  overflow: initial;
+}
+
+.footer {
+  color: #eee;
+  background-color: #333;
+}
+
+.layout {
+  text-align: center;
+  border-radius: 8px;
+  min-height: 100vh;
+  background-color: #ffffffc0;
+}
diff --git a/packages/client/src/components/layout.tsx b/packages/client/src/components/layout.tsx
diff --git a/packages/client/src/components/loading.tsx b/packages/client/src/components/loading.tsx
@@ -0,0 +1,11 @@
+import { Flex, Spin } from 'antd';
+
+const Loading: React.FC = () => (
+  <Flex justify="center" align="center" style={{ width: '100%', height: '80vh' }}>
+    <Spin tip="Loading" size="large">
+      <div></div>
+    </Spin>
+  </Flex>
+);
+
+export default Loading;
diff --git a/packages/client/src/components/result/error.tsx b/packages/client/src/components/result/error.tsx
@@ -0,0 +1,7 @@
+import { Result } from 'antd';
+
+const ErrorResult: React.FC = () => (
+  <Result status="error" title="获取数据失败" subTitle="请检查网络连接或接口地址是否配置正确" />
+);
+
+export default ErrorResult;
diff --git a/packages/client/src/http/http.tsx → packages/client/src/http/http.ts b/packages/client/src/http/http.tsx → packages/client/src/http/http.ts
@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { message } from 'antd';
+import { notification } from 'antd';
 import config from './config.js';
 
 const http = axios.create({
@@ -19,7 +19,11 @@ http.interceptors.response.use(
     } */
     response.data,
   (err) => {
-    if (err instanceof Error) message.useMessage()[0].error(`请求错误：${err.message}`);
+    notification.error({
+      message: 'Http request error',
+      description: err instanceof Error ? err.message : err || 'Unknown error',
+      placement: 'topRight'
+    });
     return Promise.reject(err);
   }
 );

diff --git a/packages/client/src/main.tsx b/packages/client/src/main.tsx
@@ -5,8 +5,13 @@ import 'antd/dist/reset.css';
 import 'tailwindcss/tailwind.css';
 import 'antd/dist/antd.min.js.LICENSE.txt';
 import './styles/index.css';
+import { notification } from 'antd';
 import App from './App.tsx';
 
+notification.config({
+  duration: 3
+});
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <BrowserRouter>

diff --git a/packages/client/src/router/index.tsx b/packages/client/src/router/index.tsx
@@ -1,10 +1,11 @@
 import React, { lazy } from 'react';
+import Loading from '../components/loading';
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 function lazyLoader(callback: () => Promise<any>) {
   const Component = lazy(callback);
   return (
-    <React.Suspense fallback={<div>Loading...</div>}>
+    <React.Suspense fallback={<Loading />}>
       <Component />
     </React.Suspense>
   );
@@ -15,6 +16,10 @@ export default [
     path: '/',
     element: lazyLoader(() => import('../views/Home'))
   },
+  {
+    path: '/character/:id',
+    element: lazyLoader(() => import('../views/Character'))
+  },
   {
     path: '/about',
     element: lazyLoader(() => import('../views/About'))

diff --git a/packages/client/src/styles/index.css b/packages/client/src/styles/index.css
@@ -0,0 +1,22 @@
+::selection {
+  background-color: #227d51bb;
+}
+
+a {
+  color: #227d51;
+}
+
+a:hover {
+  background-color: #096148;
+}
+
+a::selection {
+  color: #333;
+  background-color: #096148;
+}
+
+.card {
+  background: none;
+  border: 1px solid #00000040;
+  border-radius: 10px;
+}
diff --git a/packages/client/src/styles/index.tsx b/packages/client/src/styles/index.tsx
@@ -0,0 +1,5 @@
+export const MAIN_COLOR = '#227D51';
+
+export const MAIN_COLOR_DEEP = '#096148';
+
+export const PRIMARY_COLOR = '#0077B6';
diff --git a/packages/client/src/views/About.tsx → packages/client/src/views/About/index.tsx b/packages/client/src/views/About.tsx → packages/client/src/views/About/index.tsx
@@ -1,6 +1,8 @@
-export default () => (
+const AboutView: React.FC = () => (
   <div>
     Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste quod culpa dolores esse quis beatae cupiditate
     commodi, id vitae tenetur, facilis dicta iusto atque, animi soluta consequatur! Officia, ab rerum!
   </div>
 );
+
+export default AboutView;