feat: add basic config & layout

Author: thonatos

.umirc.ts

@@ -0,0 +1,4 @@
+export default {
+  title: 'CNode.js',
+  description: 'Node.js专业中文社区',
+};

config/basic.ts

@@ -0,0 +1,32 @@
+import config from './basic';
+import routes from './routes';
+
+import { defineConfig } from 'umi';
+
+export default defineConfig({
+  singular: true,
+  fastRefresh: {},
+  mfsu: {},
+
+  nodeModulesTransform: {
+    type: 'none',
+  },
+
+  antd: {},
+
+  dva: {
+    immer: true,
+  },
+
+  layout: {
+    name: config.title,
+  },
+
+  qiankun: {
+    master: {
+      apps: [],
+    },
+  },
+
+  routes,
+});

config/config.ts

@@ -0,0 +1,17 @@
+import { IRoute } from 'umi';
+
+const routes: IRoute[] = [
+  {
+    path: '/',
+    exact: true,
+    icon: 'home',
+    name: 'Home',
+    title: '主页',
+    component: '@/page/home',
+    // access: 'canReadCommon',
+    hideInNav: false,
+    hideInMenu: false,
+  },
+];
+
+export default routes;

config/routes.ts

@@ -20,20 +20,27 @@
     ]
   },
   "dependencies": {
-    "@ant-design/pro-card": "^1.18.20",
-    "@ant-design/pro-layout": "^6.32.1",
+    "dotenv": "^10.0.0",
     "react": "17.x",
-    "react-dom": "17.x",
-    "umi": "^3.5.20"
+    "react-dom": "17.x"
   },
   "devDependencies": {
+    "@ant-design/icons": "^4.7.0",
+    "@ant-design/pro-card": "^1.18.20",
+    "@ant-design/pro-layout": "^6.32.1",
+    "@ant-design/pro-table": "^2.61.9",
+    "@types/dotenv": "^8.2.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@umijs/plugin-esbuild": "^1.4.1",
+    "@umijs/plugin-qiankun": "^2.35.4",
     "@umijs/preset-react": "1.x",
     "@umijs/test": "^3.5.20",
+    "ahooks": "^3.1.3",
     "lint-staged": "^10.0.7",
     "prettier": "^2.2.0",
     "typescript": "^4.1.2",
+    "umi": "^3.5.20",
     "yorkie": "^2.0.0"
   }
 }

package.json

@@ -1,45 +1,82 @@
 import React from 'react';
-import { Avatar } from 'antd';
-import { UserOutlined } from '@ant-design/icons';
+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';
 
-import {
-  BasicLayoutProps,
-  Settings as LayoutSettings,
-} from '@ant-design/pro-layout';
+const qiankunApps: Array<QiankunApp> = [];
 
 export async function getInitialState() {
   return {
     currentUser: 'Suyi',
   };
 }
 
-export const layout = ({
-  initialState,
-}: {
-  initialState: { settings?: LayoutSettings };
-}): BasicLayoutProps => {
-  return {
-    // rightContentRender: () => <RightContent />,
-    // footerRender: () => <Footer />,
-    onPageChange: () => {
-      // const { currentUser } = initialState;
-      // const { location } = history;
-      // 如果没有登录，重定向到 login
-      // if (!currentUser && location.pathname !== '/user/login') {
-      //   history.push('/user/login');
-      // }
-    },
-    // menuHeaderRender: undefined,
-    rightContentRender: () => {
-      return (
-        <div>
-          <Avatar shape="square" size="small" icon={<UserOutlined />} />
-        </div>
-      );
-    },
-
-    layout: 'top',
-    navTheme: 'light',
-    headerHeight: 64,
-  };
+export const patchRoutes = ({ routes }: { routes: Array<IRoute> }) => {
+  const root = routes[0];
+
+  qiankunApps.forEach((item) => {
+    const { name, path, locale, remark } = item;
+    if (!root.routes) {
+      return;
+    }
+
+    root.routes.push({
+      name,
+      path,
+      locale: locale || '',
+      exact: true,
+      hideInMenu: false,
+      hideInNav: false,
+      component: (props: any) => {
+        return (
+          <PageContainer content={remark}>
+            <MicroApp name={name} data={{ props }} />
+          </PageContainer>
+        );
+      },
+    });
+  });
+};
+
+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;
+}

src/app.tsx

@@ -0,0 +1,16 @@
+.container {
+  display: flex;
+  align-items: baseline;
+}
+
+.title {
+  color: #829a82;
+  margin: 0;
+  padding: 0;
+}
+
+.description {
+  color: #8264ff;
+  opacity: 0.55;
+  margin: 0 0 0 0.4em;
+}

src/component/Brand/index.module.less

@@ -0,0 +1,16 @@
+import React from 'react';
+import * as styles from './index.module.less';
+
+const Brand: React.FC<Props> = ({ title, description }) => (
+  <div className={styles.container}>
+    <h1 className={styles.title}>{title}</h1>
+    <p className={styles.description}>{description}</p>
+  </div>
+);
+
+export default Brand;
+
+interface Props {
+  title: string;
+  description: string;
+}

src/component/Brand/index.tsx

@@ -0,0 +1,21 @@
+.logo {
+  height: 240px;
+  width: 240px;
+  color: #fff;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+
+  > .title {
+    font-size: 58px;
+    letter-spacing: 8px;
+    width: 240px;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+  }
+
+  > .content {
+    font-size: 12px;
+    border-top: 1px solid #fff;
+    padding-top: 0.2em;
+  }
+}

src/component/Logo/index.module.less

@@ -0,0 +1,16 @@
+import React from 'react';
+import * as styles from './index.module.less';
+
+const Logo: React.FC<Props> = ({ title, description }) => (
+  <div className={styles.logo}>
+    <div className={styles.title}>{title}</div>
+    <div className={styles.content}>{description}</div>
+  </div>
+);
+
+export default Logo;
+
+interface Props {
+  title: string;
+  description: string;
+}