Merge pull request #5 from cnodejs/feat/about

feat: add about page

Author: thonatos

config/routes.ts

@@ -19,7 +19,13 @@ const routes: IRoute[] = [
         name: '主页',
         component: '@/page/topic',
       },
-
+      {
+        path: '/about',
+        exact: true,
+        icon: 'info',
+        name: '关于',
+        component: '@/page/about',
+      },
       {
         path: '/api',
         exact: true,

src/layout/component/AppQrcode.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import ProCard from '@ant-design/pro-card';
+
+const AppQrcode: React.FC<Props> = (props) => {
+  return (
+    <ProCard title="客户端二维码" headerBordered>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        <img
+          width={200}
+          src="https://static.cnodejs.org/FtG0YVgQ6iginiLpf9W4_ShjiLfU"
+          alt="客户端二维码"
+        />
+        <span>客户端源码地址</span>
+      </div>
+    </ProCard>
+  );
+};
+
+export default AppQrcode;
+
+interface Props {}

src/layout/component/UserInfo.tsx

@@ -42,7 +42,7 @@ const UserInfo: React.FC<Props> = (props) => {
   };
 
   return (
-    <ProCard title="个人信息">
+    <ProCard title="个人信息" headerBordered>
       <Space size={8}>
         <Avatar shape="square" size="small" src={avatar_url} />
         <span>{loginname}</span>

src/layout/index.tsx

@@ -3,10 +3,11 @@ import ProCard from '@ant-design/pro-card';
 
 import { IRoute, Link } from 'umi';
 import { PageContainer } from '@ant-design/pro-layout';
-import { Affix, Button } from 'antd';
+import { Affix, Button, Space } from 'antd';
 import { UpCircleOutlined } from '@ant-design/icons';
 
 import UserInfo from './component/UserInfo';
+import AppQrcode from './component/AppQrcode';
 
 const getCurrentRoute = (route: IRoute, path: string): IRoute | undefined => {
   let target;
@@ -71,16 +72,17 @@ const Layout: React.FC<React.PropsWithChildren<Props>> = (props) => {
           bordered={false}
           ghost
           colSpan={{
-            xs: '50px',
-            sm: '100px',
-            md: '200px',
-            lg: '300px',
-            xl: '400px',
+            sm: '200px',
+            md: '400px',
           }}
         >
-          <UserInfo />
+          <Space size={16} direction="vertical" style={{ width: '100%' }}>
+            <UserInfo />
+            <AppQrcode />
+          </Space>
         </ProCard>
       </ProCard>
+
       <Affix
         offsetBottom={50}
         style={{

src/page/about/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import Markdown from '@/component/Markdown';
+
+const content = `
+## 关于
+
+- CNode 社区为国内最大最具影响力的 Node.js 开源技术社区，致力于 Node.js 的技术研究。
+
+- CNode 社区由一批热爱 Node.js 技术的工程师发起，目前已经吸引了互联网各个公司的专业技术人员加入，我们非常欢迎更多对 Node.js 感兴趣的朋友。
+
+- CNode 的 SLA 保证是，一个9，即 90.000000%。
+
+社区目前由 [@alsotang](http://cnodejs.org/user/alsotang) 在维护，有问题请联系：[https://github.com/alsotang](https://github.com/alsotang)
+
+请关注我们的官方微博：[http://weibo.com/cnodejs](http://weibo.com/cnodejs)
+
+## 客户端
+
+- 客户端由 [@soliury](https://cnodejs.org/user/soliury) 开发维护。
+
+- 源码地址： [https://github.com/soliury/noder-react-native](https://github.com/soliury/noder-react-native) 。
+
+立即体验 CNode 客户端，直接扫描页面右侧二维码。
+
+另，安卓用户同时可选择：[https://github.com/TakWolf/CNode-Material-Design](https://github.com/TakWolf/CNode-Material-Design) ，这是 Java 原生开发的安卓客户端。
+`;
+
+const AboutPage: React.FC<Props> = (props) => {
+  return <Markdown type="render" value={content} />;
+};
+
+export default AboutPage;
+
+interface Props {}

src/page/home/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-const Home: React.FC<Props> = () => {
+const HomePage: React.FC<Props> = () => {
   return null;
 };
 
-export default Home;
+export default HomePage;
 
 interface Props {}