添加首页header和footer的Layout

Author: 290352095

.eslintrc.js

@@ -231,7 +231,7 @@ module.exports = {
      */
 
     // 'typescript/no-constant-condition': 2,
-    'typescript/quotemark': [true,"single","avoid-escape","jsx-double"],
+    'typescript/quotemark': [true, 'single', 'avoid-escape', 'jsx-double'],
     'typescript/no-console': 0,
     'typescript/ordered-imports': 0,
     'typescript/no-namespace': 0,
@@ -259,8 +259,8 @@ module.exports = {
     //     "public-instence-method"
     //   ]
     // }],
-    'typescript/object-literal-key-quotes': [true,"as-needed"],
-    'typescript/no-trailing-whitespace': [false,"ignore-comments"],
+    'typescript/object-literal-key-quotes': [true, 'as-needed'],
+    'typescript/no-trailing-whitespace': [false, 'ignore-comments'],
     'typescript/class-name-casing': 2,
 
     /**
@@ -274,6 +274,8 @@ module.exports = {
     'react/jsx-sort-prop-types': 0, // 是否排序 prop types
     'react/jsx-uses-react': 2, // 组件中中是否用了 react
     'react/jsx-uses-vars': 2, // 定义了 jsx component 没有使用
+    'react/jsx-pascal-case': 1, // 使用jsx作为组件扩展名，采用pascal命名法  引用名采用驼峰命名
+    'react/jsx-closing-bracket-location': 1, // 组件prop的的对齐风格
     'react/no-did-mount-set-state': 0, // 不要在 componentDidMount 里面设置 state
     'react/no-did-update-set-state': 0, // 同上
     'react/no-multi-comp': 0, // 一个文件里面禁止声明多个 component
@@ -282,6 +284,7 @@ module.exports = {
     'react/react-in-jsx-scope': 1, // 查看 jsx 是否引入 react
     'react/self-closing-comp': 2, // 检查是否有没有 children 的非子闭合标签
     'react/jsx-wrap-multilines': 1, // 不强制 return 的时候，结构的格式
+    'react/prefer-es6-class': 1, // 使用组件类继承React.Component
     'react/sort-comp': [
       0,
       {
@@ -298,8 +301,6 @@ module.exports = {
     ],
     'react/jsx-indent-props': 0,
 
-
-    'no-var':0
+    'no-var': 0,
   },
-
 };

.umirc.js

@@ -2,7 +2,6 @@
 
 import path from 'path';
 
-
 export default {
   plugins: [
     // ref: https://umijs.org/plugin/umi-plugin-react.html
@@ -57,6 +56,7 @@ export default {
     //   })
     // );
     config.resolve.alias.set('src', path.resolve(__dirname, './src'));
+    config.resolve.alias.set('component', path.resolve(__dirname, './src/component'));
     // config.module
     //   .rule('save')
     //   .test(/\.less$/)

src/assets/common/index.less

@@ -0,0 +1 @@
+@footer-border-color:#40aea8;

src/component/common/BasicFooter/index.less

@@ -0,0 +1,15 @@
+@import url('../../../assets/common/index');
+
+.cr-footer {
+  width: 100%;
+  height: 390px;
+  border-top: 4px solid @footer-border-color;
+  background: #fff;
+  :global {
+    .main {
+      width: 1280px;
+      margin: 0 auto;
+      background: #ccc;
+    }
+  }
+}

src/component/common/BasicFooter/index.tsx

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import styles from './index.less';
+
+export default class BasicHeader extends Component {
+  render() {
+    return (
+      <footer className={styles['cr-footer']}>
+        <div>
+          <a href="www.baidu.com">footer</a>
+        </div>
+      </footer>
+    );
+  }
+}

src/component/common/BasicHeader/index.less

@@ -0,0 +1,6 @@
+.cr-header {
+  width: 100%;
+  height: 70px;
+  :global {
+  }
+}

src/component/common/BasicHeader/index.tsx

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import styles from './index.less';
+
+export default class BasicHeader extends Component {
+  render() {
+    return (
+      <header className={styles['cr-header']}>
+        <div>
+          <a href="www.baidu.com">header</a>
+        </div>
+      </header>
+    );
+  }
+}

src/layouts/BasicLayout.tsx

@@ -12,3 +12,17 @@
   color: white;
   margin: 0;
 }
+
+.cr-base {
+  width: 100%;
+  background: #ccc;
+  min-height: 100vh;
+  :global {
+    .cr-main {
+      width: 1200px;
+      margin: 0 auto;
+      background: #ffffff;
+      height: 100%;
+    }
+  }
+}

src/layouts/BasicLayout.less src/layouts/BasicLayout/index.lesssrc/layouts/BasicLayout.less renamed to src/layouts/BasicLayout/index.less

@@ -0,0 +1,16 @@
+import styles from './index.less';
+import { ComProps } from 'src/type/common';
+import BasicHeader from 'component/common/BasicHeader/';
+import BasicFooter from 'component/common/BasicFooter/';
+
+export default function Index(props: ComProps) {
+  return (
+    <section className={styles['cr-base']}>
+      <div className={'cr-main'}>
+        <BasicHeader />
+        {props.children}
+        <BasicFooter />
+      </div>
+    </section>
+  );
+}