feat: add home page

thonatos · thonatos · commit 7622c0563a69 · 2021-12-30T04:02:19.000+08:00
diff --git a/config/basic.ts b/config/basic.ts
@@ -1,4 +1,5 @@
 export default {
+  logo: '//static2.cnodejs.org/public/images/cnodejs_light.svg',
   title: 'CNode.js',
-  description: 'Node.js专业中文社区',
+  description: 'Node.js 专业中文社区',
 };
diff --git a/config/config.ts b/config/config.ts
@@ -14,6 +14,10 @@ export default defineConfig({
 
   antd: {},
 
+  theme: {
+    '@primary-color': '#1DA57A',
+  },
+
   dva: {
     immer: true,
   },
diff --git a/config/routes.ts b/config/routes.ts
@@ -5,10 +5,9 @@ const routes: IRoute[] = [
     path: '/',
     exact: true,
     icon: 'home',
-    name: 'Home',
-    title: '主页',
+    name: '主页',
     component: '@/page/home',
-    // access: 'canReadCommon',
+    wrappers: ['@/layout/index'],
     hideInNav: false,
     hideInMenu: false,
   },
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "@ant-design/icons": "^4.7.0",
     "@ant-design/pro-card": "^1.18.20",
     "@ant-design/pro-layout": "^6.32.1",
+    "@ant-design/pro-list": "^1.21.12",
     "@ant-design/pro-table": "^2.61.9",
     "@types/dotenv": "^8.2.0",
     "@types/react": "^17.0.0",
@@ -37,6 +38,7 @@
     "@umijs/preset-react": "1.x",
     "@umijs/test": "^3.5.20",
     "ahooks": "^3.1.3",
+    "dayjs": "^1.10.7",
     "lint-staged": "^10.0.7",
     "prettier": "^2.2.0",
     "typescript": "^4.1.2",
diff --git a/src/app.tsx b/src/app.tsx
@@ -1,9 +1,17 @@
 import React from 'react';
+
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import 'dayjs/locale/zh';
+
 import { MicroApp, IRoute, request as requestClient, RequestConfig } from 'umi';
 import { PageContainer } from '@ant-design/pro-layout';
 import { BASE_URL } from './constants';
 import proLayout from './proLayout';
 
+dayjs.locale('zh');
+dayjs.extend(relativeTime);
+
 const qiankunApps: Array<QiankunApp> = [];
 
 export async function getInitialState() {
diff --git a/src/component/Brand/index.module.less b/src/component/Brand/index.module.less
@@ -3,14 +3,18 @@
   align-items: baseline;
 }
 
+.logo {
+}
+
 .title {
-  color: #829a82;
+  color: rgba(0, 0, 0, 0.85);
   margin: 0;
-  padding: 0;
+  padding: 0 4px;
 }
 
 .description {
-  color: #8264ff;
+  color: #222;
   opacity: 0.55;
   margin: 0 0 0 0.4em;
+  padding: 0 4px;
 }
diff --git a/src/component/Brand/index.tsx b/src/component/Brand/index.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import * as styles from './index.module.less';
 
-const Brand: React.FC<Props> = ({ title, description }) => (
+const Brand: React.FC<Props> = ({ logo, title, description }) => (
   <div className={styles.container}>
+    <img className={styles.logo} src={logo} alt="logo" />
     <h1 className={styles.title}>{title}</h1>
     <p className={styles.description}>{description}</p>
   </div>
@@ -13,4 +14,5 @@ export default Brand;
 interface Props {
   title: string;
   description: string;
+  logo?: string;
 }
diff --git a/src/component/Logo/index.module.less b/src/component/Logo/index.module.less
diff --git a/src/component/Logo/index.tsx b/src/component/Logo/index.tsx
diff --git a/src/component/Topic/index.module.less b/src/component/Topic/index.module.less
@@ -0,0 +1,10 @@
+.list {
+  :global {
+    .ant-card {
+      padding: 0;
+      > .ant-card-body {
+        padding: 0;
+      }
+    }
+  }
+}
diff --git a/src/component/Topic/index.tsx b/src/component/Topic/index.tsx
@@ -0,0 +1,110 @@
+import React from 'react';
+import dayjs from 'dayjs';
+
+import { Avatar, Tag, Space } from 'antd';
+import { useRequest, useReactive } from 'ahooks';
+import { ProListMetas } from '@ant-design/pro-list';
+import ProList from '@ant-design/pro-list';
+
+import { TABS_MAP } from '@/constants';
+import type { TabType } from '@/constants';
+
+import * as API from '@/service/topic';
+import * as styles from './index.module.less';
+
+interface Props {
+  tab?: TabType;
+}
+
+const Topics: React.FC<Props> = (props) => {
+  const { tab = 'share' } = props;
+
+  const state = useReactive({
+    page: 1,
+    limit: 20,
+  });
+
+  const { page, limit } = state;
+
+  const { data, loading, refresh } = useRequest(
+    async () => {
+      const res = await API.queryTopics({
+        tab,
+        page,
+        limit,
+      });
+
+      return res.data;
+    },
+    {
+      refreshDeps: [tab, page, limit],
+    },
+  );
+
+  const metas: ProListMetas = {
+    avatar: {
+      dataIndex: 'author.avatar_url',
+      render: (_, entity) => {
+        const { tab: _tab, author, reply_count, visit_count } = entity;
+
+        const category = TABS_MAP[_tab as keyof typeof TABS_MAP];
+
+        return (
+          <Space>
+            <Avatar size="small" src={author.avatar_url} />
+            <div
+              style={{
+                width: '96px',
+                padding: '0 8px',
+              }}
+            >
+              <span
+                style={{
+                  color: '#9e78c0',
+                }}
+              >
+                {reply_count}
+              </span>
+              /<span>{visit_count}</span>
+            </div>
+            <Tag color={category.color}>{category.name}</Tag>
+          </Space>
+        );
+      },
+    },
+    title: {
+      dataIndex: 'title',
+      valueType: 'text',
+    },
+    actions: {
+      render: (_, entity) => {
+        const { last_reply_at } = entity;
+        return dayjs(last_reply_at).fromNow();
+      },
+    },
+  };
+
+  return (
+    <ProList
+      rowKey="id"
+      showActions="always"
+      dataSource={data}
+      loading={loading}
+      metas={metas}
+      className={styles.list}
+      request={async (params) => {
+        state.page = params.current || page;
+        state.limit = params.pageSize || limit;
+        return Promise.resolve({});
+      }}
+      pagination={{
+        total: 100,
+        current: page,
+        pageSize: limit,
+        responsive: true,
+      }}
+    />
+  );
+};
+
+export default Topics;
diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -1 +1,22 @@
 export const BASE_URL = 'https://cnodejs.org';
+
+export const TABS_MAP = {
+  good: {
+    name: '精华',
+    color: '#5BD8A6',
+  },
+  share: {
+    name: '分享',
+    color: '#5BD8A6',
+  },
+  ask: {
+    name: '问答',
+    color: '#5BD8A6',
+  },
+  job: {
+    name: '招聘',
+    color: '#5BD8A6',
+  },
+};
+
+export type TabType = keyof typeof TABS_MAP;
diff --git a/src/layout/index.tsx b/src/layout/index.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { PageContainer } from '@ant-design/pro-layout';
+import ProCard from '@ant-design/pro-card';
+import { IRoute } from 'umi';
+
+const getCurrentRoute = (route: IRoute, path: string): IRoute | undefined => {
+  let target;
+
+  if (route.exact && route.path === path) {
+    return route;
+  }
+
+  if (!route.routes) {
+    return;
+  }
+
+  for (const _route of route.routes) {
+    target = getCurrentRoute(_route, path);
+    if (target) {
+      break;
+    }
+  }
+
+  return target;
+};
+
+const Layout: React.FC<React.PropsWithChildren<Props>> = (props) => {
+  const { route, match } = props;
+  const currentRoute = getCurrentRoute(route, match.path);
+
+  return (
+    <PageContainer
+      header={{
+        title: currentRoute?.name,
+      }}
+    >
+      <ProCard gutter={16} bordered={false}>
+        <ProCard bordered={false}>{props.children}</ProCard>
+        <ProCard
+          title=""
+          layout="center"
+          bordered={false}
+          colSpan={{
+            xs: '50px',
+            sm: '100px',
+            md: '200px',
+            lg: '300px',
+            xl: '400px',
+          }}
+        ></ProCard>
+      </ProCard>
+    </PageContainer>
+  );
+};
+
+export default Layout;
+
+interface Props {
+  route: IRoute;
+  match: {
+    isExact: boolean;
+    path: string;
+  };
+}
diff --git a/src/page/home/index.tsx b/src/page/home/index.tsx
diff --git a/src/proLayout.tsx b/src/proLayout.tsx
diff --git a/src/service/topic.ts b/src/service/topic.ts
