Common

.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,14 +2,13 @@
 
 import path from 'path';
 
-
 export default {
   plugins: [
     // ref: https://umijs.org/plugin/umi-plugin-react.html
     [
       'umi-plugin-react',
       {
-        antd: false,
+        antd: true,
         dva: true,
         dynamicImport: true,
         title: 'umi-ts',
@@ -23,6 +22,9 @@ export default {
   ],
   history: 'hash',
   cssLoaderOptions: {},
+  alias: {
+    component: path.resolve(__dirname, './src/component'),
+  },
   chainWebpack(config, { webpack }) {
     // config.plugin('analyzer').use(
     //   new BundleAnalyzerPlugin({
@@ -57,6 +59,8 @@ export default {
     //   })
     // );
     config.resolve.alias.set('src', path.resolve(__dirname, './src'));
+    config.resolve.alias.set('component', path.resolve(__dirname, './src/component'));
+    config.resolve.alias.set('assets', path.resolve(__dirname, './src/assets'));
     // config.module
     //   .rule('save')
     //   .test(/\.less$/)

src/assets/css/common/index.less

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

src/component/common/BasicFooter/index.less

@@ -0,0 +1,57 @@
+@import url('../../../assets/css/common/index');
+
+.cr-footer {
+  width: 100%;
+  height: 390px;
+  border-top: 4px solid @footer-border-color;
+  background: #fff;
+  font-family: 'Microsoft YaHei UI';
+  font-weight: bold;
+  display: flex;
+  :global {
+    .cr-footer-left {
+      width: 835px;
+      padding-right: 100px;
+      text-align: left;
+      font-size: 18px;
+      flex-shrink: 0;
+      > p {
+        margin: 0;
+      }
+      > p:last-child {
+        font-size: 20px;
+        margin-top: 20px;
+      }
+      .cr-footer-logo {
+        margin-top: 60px;
+        margin-bottom: 30px;
+        img {
+          width: 214px;
+          height: 50px;
+        }
+      }
+    }
+    .cr-footer-right {
+      text-align: left;
+      font-weight: normal;
+      .cr-friendly-link-title {
+        font-size: 40px;
+        margin-top: 60px;
+        line-height: 50px;
+        margin-bottom: 30px;
+      }
+      .cr-friendly-link {
+        font-size: 20px;
+        > ul {
+          list-style: none;
+          margin: 0;
+          padding: 0;
+          li {
+            float: left;
+            margin-right: 20px;
+          }
+        }
+      }
+    }
+  }
+}

src/component/common/BasicFooter/index.tsx

@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+import styles from './index.less';
+import logo from 'assets/images/home/logo@2x.png';
+import android from 'assets/images/home/android@2x.png';
+import ios from 'assets/images/home/ios@2x.png';
+import github from 'assets/images/home/Github@2x.png';
+import wbicon from 'assets/images/home/wb-icon@2x.png';
+import wxicon from 'assets/images/home/wx-icon@2x.png';
+
+export default class BasicFooter extends Component {
+  render() {
+    return (
+      <footer className={styles['cr-footer']}>
+        <div className={'cr-footer-left'}>
+          <div className={'cr-footer-logo'}>
+            <img src={logo} alt="" />
+          </div>
+          <p>
+            CodeRiver河码专注于IT行业，是集教，学，研，实战，公益为一体的综合社区。目前分为五大生态群：
+          </p>
+          <p>CodeRiver开源：致力于打造全平台精品开源项目。</p>
+          <p>CodeRiver协作平台：程序员、设计师、产品经理等IT从业者的项目协作平台。</p>
+          <p>CodeRiver学院：提供多种形式的热门技术学习资源，免费专业的职业拓展平台。</p>
+          <p>CodeRiver公益：以推动技术公益事业发展，为公益团队免费开发项目。</p>
+          <p>CodeRiver&copy;2018</p>
+        </div>
+        <div className={'cr-footer-right'}>
+          <div className={'cr-friendly-link-title'}>友情链接</div>
+          <div className={'cr-friendly-link'}>
+            <ul>
+              <li>优设网</li>
+              <li>优优教程网</li>
+              <li>BootStrap中文网</li>
+              <li>GitHub</li>
+              <li>UI中国</li>
+            </ul>
+            <div style={{ clear: 'both' }} />
+          </div>
+          <div className={'cr-friendly-link-logo'}>
+            <div style={{ margin: '40px 0' }}>
+              <img style={{ width: 140, marginRight: 10 }} src={android} alt="" />
+              <img style={{ width: 100 }} src={ios} alt="" />
+            </div>
+            <div>
+              <img style={{ width: 28, margin: '0 15px' }} src={github} alt="" />
+              <img style={{ width: 28, margin: '0 15px' }} src={wbicon} alt="" />
+              <img style={{ width: 28, margin: '0 15px' }} src={wxicon} alt="" />
+            </div>
+          </div>
+        </div>
+      </footer>
+    );
+  }
+}

src/component/common/BasicHeader/index.less

@@ -0,0 +1,52 @@
+@import '../../../assets/css/common/index';
+.cr-header {
+  width: 100%;
+  display: flex;
+  height: 80px;
+  :global {
+    .cr-logo {
+      flex-shrink: 0;
+      img {
+        width: 214px;
+        height: 50px;
+        margin: 10px 20px 20px;
+      }
+    }
+    .cr-nav {
+      flex: 1;
+      margin-bottom: 8px;
+      align-self: center;
+      overflow: hidden;
+    }
+    .cr-user {
+      flex-shrink: 0;
+      font-size: 20px;
+      line-height: 80px;
+      > span,
+      > i {
+        margin: 0 15px;
+      }
+      > i {
+        font-weight: bold;
+      }
+    }
+    .ant-menu-item {
+      font-size: 20px;
+      color: #000;
+      line-height: 68px;
+      margin: 0 10px;
+      border-bottom: 4px solid transparent;
+    }
+    .ant-menu-item-selected,
+    .ant-menu-item:hover {
+      border-bottom: 4px solid @header-nav-color;
+      color: #000000;
+    }
+    .ant-menu-item-active .ant-menu-item-selected {
+      border-bottom: 4px solid @header-nav-color;
+    }
+    .ant-menu-horizontal {
+      border: none;
+    }
+  }
+}

src/component/common/BasicHeader/index.tsx

@@ -0,0 +1,55 @@
+import React, { Component } from 'react';
+import styles from './index.less';
+import { Menu, Icon } from 'antd';
+import logo from 'assets/images/home/logo@2x.png';
+import router from 'umi/router';
+
+export default class BasicHeader extends Component {
+  state = {
+    current: 'home',
+  };
+
+  handleClick = e => {
+    console.log('click ', e);
+    this.setState({
+      current: e.key,
+    });
+  };
+
+  render() {
+    const Nav = props => (
+      <Menu onClick={props.handleClick} selectedKeys={[props.current]} mode="horizontal">
+        <Menu.Item key="home">首页</Menu.Item>
+        <Menu.Item key="project-center">项目中心</Menu.Item>
+        <Menu.Item key="talent-plaza">人才广场</Menu.Item>
+      </Menu>
+    );
+    return (
+      <header className={styles['cr-header']}>
+        <div className={'cr-logo'}>
+          <img src={logo} alt="" />
+        </div>
+        <div className={'cr-nav'}>
+          <Nav handleClick={this.handleClick} current={this.state.current} />
+        </div>
+        <div className={'cr-user'}>
+          <Icon type="search" />
+          <span
+            onClick={() => {
+              router.push('/user');
+            }}
+          >
+            登录
+          </span>
+          <span
+            onClick={() => {
+              router.push('/user');
+            }}
+          >
+            注册
+          </span>
+        </div>
+      </header>
+    );
+  }
+}

src/component/home/HomeTitle/index.less

@@ -0,0 +1,17 @@
+.cr-home-title {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  :global {
+    .cr-home-title-text {
+      font-size: 40px;
+      height: 140px;
+      text-align: left;
+      line-height: 140px;
+    }
+    .cr-home-title-more {
+      font-size: 30px;
+      line-height: 140px;
+    }
+  }
+}

src/component/home/HomeTitle/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import router from 'umi/router';
+import styles from './index.less';
+
+type HomeTitleProps = {
+  title: string;
+  path?: string;
+  color?: string;
+};
+
+export default function(props: HomeTitleProps) {
+  return (
+    <div
+      className={styles['cr-home-title']}
+      style={{ borderTop: `4px solid ${props.color ? props.color : '#40aea8'}` }}
+    >
+      <div className={'cr-home-title-text'}>{props.title}</div>
+      <div className={'cr-home-title-more'}>
+        <span
+          onClick={() => {
+            router.push(props.path);
+          }}
+        >
+          {props.path ? '查看更多' : ''}
+        </span>
+      </div>
+    </div>
+  );
+}

src/index.d.ts

@@ -0,0 +1,2 @@
+declare module '*.png';
+declare module 'component/*';