feat: add login page

Author: thonatos

config/config.ts

@@ -1,4 +1,3 @@
-import config from './basic';
 import routes from './routes';
 
 import { defineConfig } from 'umi';

config/routes.ts

@@ -1,6 +1,12 @@
 import { IRoute } from 'umi';
 
 const routes: IRoute[] = [
+  {
+    path: '/auth',
+    exact: true,
+    layout: false,
+    component: '@/page/auth',
+  },
   {
     path: '/',
     exact: false,
@@ -13,6 +19,7 @@ const routes: IRoute[] = [
         name: '主页',
         component: '@/page/home',
       },
+
       {
         path: '/api',
         exact: true,
@@ -27,6 +34,7 @@ const routes: IRoute[] = [
       },
     ],
   },
+
   { component: '@/page/404' },
 ];
 

src/app.tsx

@@ -1,26 +1,48 @@
 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 { loadInitialState } from '@/util';
 import proLayout from './layout';
 
 dayjs.locale('zh');
 dayjs.extend(relativeTime);
 
-const qiankunApps: Array<QiankunApp> = [];
+const qiankunApps: QiankunApp[] = [];
 
 export async function getInitialState(): Promise<InitialState> {
-  return {
-    avatar_url: 'https://avatars.githubusercontent.com/u/958063?v=4&s=120',
-    loginname: 'thonatos',
-  };
+  const initialState = loadInitialState();
+  return initialState;
 }
 
+export const layout = proLayout;
+
+export const qiankun = async () => {
+  try {
+    // const params = { method: 'get', json: {} };
+    // const { apps } = await requestClient<{
+    //   apps: QiankunApp[];
+    // }>(`${BASE_URL}/getFeConfig`, params);
+
+    // console.log('===getFeConfig', apps);
+
+    // apps
+    //   .filter(({ type }) => type === 'App')
+    //   .sort((appA, appB) => appA.order - appB.order)
+    //   .forEach((app) => qiankunApps.push(app));
+
+    return {
+      apps: [],
+    };
+  } catch (error) {
+    return {};
+  }
+};
+
 export const patchRoutes = ({ routes }: { routes: Array<IRoute> }) => {
   const root = routes[0];
 
@@ -48,49 +70,10 @@ export const patchRoutes = ({ routes }: { routes: Array<IRoute> }) => {
   });
 };
 
-export const layout = proLayout;
-
-export const qiankun = async () => {
-  try {
-    // const params = { method: 'get', json: {} };
-    // const { apps } = await requestClient<{
-    //   apps: QiankunApp[];
-    // }>(`${BASE_URL}/getFeConfig`, params);
-
-    // console.log('===getFeConfig', apps);
-
-    // apps
-    //   .filter(({ type }) => type === 'App')
-    //   .sort((appA, appB) => appA.order - appB.order)
-    //   .forEach((app) => qiankunApps.push(app));
-
-    return {
-      apps: [],
-    };
-  } catch (error) {
-    return {};
-  }
-};
-
 export const request: RequestConfig = {
   timeout: 1000,
   errorConfig: {},
   middlewares: [],
   requestInterceptors: [],
   responseInterceptors: [],
 };
-
-interface QiankunApp {
-  name: string;
-  type: string;
-  path: string;
-  entry: string;
-  order: number;
-  remark?: string;
-  locale?: string;
-}
-
-export interface InitialState {
-  loginname: string;
-  avatar_url: string;
-}

src/config/index.ts

@@ -0,0 +1,3 @@
+import config from '../../config/basic';
+
+export default config;

src/constants/index.ts

@@ -20,3 +20,8 @@ export const TABS_MAP = {
 };
 
 export type TabType = keyof typeof TABS_MAP;
+
+export enum FORM_TYPE {
+  LOGIN = 'login',
+  REGISTER = 'register',
+}

src/layout.tsx

@@ -1,25 +1,31 @@
 import React from 'react';
-import { Link } from 'umi';
-import { Avatar } from 'antd';
+import { Link, history } from 'umi';
+import { Avatar, Tooltip } from 'antd';
 
 import {
   DefaultFooter,
   BasicLayoutProps,
   MenuDataItem,
 } from '@ant-design/pro-layout';
 
-import { InitialState } from './app';
-
 import config from '../config/basic';
 import Brand from './component/Brand';
 
 const RightContent: React.FC<{
-  data: InitialState;
+  user?: UserModel;
 }> = (props) => {
-  const { avatar_url } = props.data;
+  const user = props?.user;
+
+  if (!user) {
+    return null;
+  }
+
+  const { loginname, avatar_url } = user;
   return (
     <div className="cnode-header-right">
-      <Avatar shape="square" size="small" src={avatar_url} />
+      <Tooltip title={loginname}>
+        <Avatar shape="square" size="small" src={avatar_url} />
+      </Tooltip>
     </div>
   );
 };
@@ -79,8 +85,7 @@ const layoutConfig = ({
 
     // right
     rightContentRender: () => {
-      const { avatar_url } = initialState;
-      return <RightContent data={initialState} />;
+      return <RightContent user={initialState.user} />;
     },
 
     // footer
@@ -90,6 +95,17 @@ const layoutConfig = ({
         copyright={`${new Date().getFullYear()} - CNodejs.org`}
       />
     ),
+
+    onPageChange: () => {
+      const { user, token } = initialState || {};
+
+      // 非登录页面
+      if (history.location.pathname !== '/auth') {
+        if (!user || !token) {
+          history.push('/auth');
+        }
+      }
+    },
   };
 };
 

src/layout/component/UserInfo.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { useModel } from 'umi';
+import { useRequest } from 'ahooks';
+import { Avatar, Space } from 'antd';
+import ProCard from '@ant-design/pro-card';
+
+import * as API from '@/service/user';
+
+const UserInfo: React.FC<Props> = (props) => {
+  const { user } = useModel('user');
+
+  if (!user) {
+    return null;
+  }
+
+  const { loginname, avatar_url } = user;
+
+  const { data } = useRequest(
+    async () => {
+      if (!loginname) {
+        return;
+      }
+
+      const res = await API.getUserInfo({ loginname });
+      return res.data;
+    },
+    {
+      refreshDeps: [loginname],
+    },
+  );
+
+  const renderMore = () => {
+    if (!data) {
+      return null;
+    }
+
+    return (
+      <div style={{ padding: '8px 0' }}>
+        <span>积分：{data?.score}</span>
+      </div>
+    );
+  };
+
+  return (
+    <ProCard title="个人信息">
+      <Space size={8}>
+        <Avatar shape="square" size="small" src={avatar_url} />
+        <span>{loginname}</span>
+      </Space>
+      {renderMore()}
+    </ProCard>
+  );
+};
+
+export default UserInfo;
+
+interface Props {}

src/layout/index.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import ProCard from '@ant-design/pro-card';
 
-import { IRoute } from 'umi';
+import { IRoute, Link } from 'umi';
 import { PageContainer } from '@ant-design/pro-layout';
+import UserInfo from './component/UserInfo';
 
 const getCurrentRoute = (route: IRoute, path: string): IRoute | undefined => {
   let target;
@@ -34,28 +35,31 @@ const Layout: React.FC<React.PropsWithChildren<Props>> = (props) => {
   };
 
   if (location.pathname.startsWith('/topic/')) {
-    return (
-      <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>
-    );
+    const topicBreadcrumbName = location.pathname.split('/').pop();
+
+    headerConfig = {
+      title: null,
+      breadcrumb: {
+        itemRender: (route: { path: string; breadcrumbName: string }) => {
+          return <Link to={route.path}>{route.breadcrumbName}</Link>;
+        },
+        routes: [
+          {
+            path: '/',
+            breadcrumbName: '主页',
+          },
+          {
+            path: location.pathname,
+            breadcrumbName: topicBreadcrumbName,
+          },
+        ],
+      },
+    };
   }
 
   return (
     <PageContainer header={headerConfig}>
-      <ProCard gutter={16} bordered={false}>
+      <ProCard gutter={16} bordered={false} ghost>
         <ProCard bordered={false}>{props.children}</ProCard>
         <ProCard
           title=""
@@ -68,7 +72,9 @@ const Layout: React.FC<React.PropsWithChildren<Props>> = (props) => {
             lg: '300px',
             xl: '400px',
           }}
-        ></ProCard>
+        >
+          <UserInfo />
+        </ProCard>
       </ProCard>
     </PageContainer>
   );

src/model/user.ts

@@ -1,8 +1,29 @@
-import { useState } from 'react';
+import { useState, useCallback } from 'react';
+import { loadInitialState } from '@/util';
 
 export default () => {
-  const [user, setUser] = useState<string>();
-  const login = (name: string) => setUser(name);
-  const logout = () => setUser('');
-  return { user, login, logout };
+  const initialState = loadInitialState();
+
+  const [user, setUser] = useState<UserModel | undefined>(initialState.user);
+
+  const login = useCallback((data: InitialState, useLocalStorage = false) => {
+    const { user: userInfo } = data;
+
+    if (useLocalStorage) {
+      window.localStorage.setItem('initialState', JSON.stringify(data));
+    }
+    setUser(userInfo);
+  }, []);
+
+  const logout = useCallback(() => {
+    window.localStorage.removeItem('initialState');
+    setUser(undefined);
+  }, []);
+
+  const reload = useCallback(() => {
+    const state = loadInitialState();
+    setUser(state.user);
+  }, []);
+
+  return { user, login, logout, reload };
 };