coderiver-org · ZoeLeee · Jan 26, 2019 · Jan 28, 2019
diff --git a/.gitignore b/.gitignore
@@ -6,3 +6,4 @@ node_modules
 public
 .idea
 .git
+.yarn.lock
diff --git a/configs/webpack.config.js b/configs/webpack.config.js
@@ -63,16 +63,14 @@ module.exports = argv => ({
         use: [
           MiniCssExtractPlugin.loader,
           { loader: 'css-loader' },
-          {
-            loader: 'less-loader',
+          { loader: 'less-loader',
             options: {
+              modules:false,
               modifyVars: theme,
-              javascriptEnabled: true,
-            },
-          },
+              javascriptEnabled: true
+          }},
         ],
         exclude: /\.module\.less$/,
-        include: /node_modules/,
       },
 
       {
@@ -129,11 +127,10 @@ module.exports = argv => ({
   devServer: {
     contentBase: SRC,
     hot: true,
+    host:"0.0.0.0",
     inline: true,
     disableHostCheck: true,
-    historyApiFallback: {
-      disableDotRule: true,
-    },
+    historyApiFallback:true,
     stats: 'minimal',
     clientLogLevel: 'warning',
   },

diff --git a/index.html b/index.html
@@ -34,6 +34,9 @@
         transform: translateX(-50%);
       }
     </style>
+    <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />
+    <title>河码</title>
+    <base href="/">
   </head>
   <body>
     <div id="root">

diff --git a/package.json b/package.json
@@ -61,8 +61,8 @@
     "@types/react-dom": "^16.0.11",
     "antd-mobile": "^2.2.8",
     "dva": "^2.4.1",
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3",
+    "react": "^16.8.0-alpha.1",
+    "react-dom": "^16.8.0-alpha.1",
     "tslib": "^1.9.3"
   },
   "husky": {

diff --git a/scripts/start.js b/scripts/start.js
@@ -21,6 +21,6 @@ const devServerOptions = Object.assign({}, config.devServer, {
 
 const server = new webpackDevServer(compiler, devServerOptions);
 
-server.listen(8080, '127.0.0.1', () => {
+server.listen(8080, '0.0.0.0', () => {
   console.log('Starting server on http://localhost:8080');
 });
diff --git a/src/assets/Icons/头像.png b/src/assets/Icons/头像.png
diff --git a/src/assets/Icons/添加.png b/src/assets/Icons/添加.png
diff --git a/src/assets/images/logo图案.png b/src/assets/images/logo图案.png
diff --git a/src/assets/images/react.png b/src/assets/images/react.png
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,5 +1,6 @@
 import dva from 'dva';
 import createHistory from 'history/createBrowserHistory';
+import './style.less';
 
 const app = dva({
   history: createHistory(),
@@ -11,11 +12,11 @@ const app = dva({
 });
 
 import router from './router';
-import count from './models/count';
+import appModel from './models/app/app.model';
 // 4. 注册程序路由
 app.router(router);
 
-app.model(count);
+app.model(appModel);
 
 // 5. 启动项目
 app.start('#root');
diff --git a/src/models/app/app.model.ts b/src/models/app/app.model.ts
@@ -0,0 +1,7 @@
+export default {
+  namespace: 'app',
+  state: {
+    isLogin: true,
+  },
+  reducers: {},
+};
diff --git a/src/pages/Common/Avater.tsx b/src/pages/Common/Avater.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+interface IAvater {
+  url: string;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+export const Avater = (props: IAvater) => {
+  return (
+    <div style={props.style} className={props.className}>
+      <img src={props.url} alt="" />
+    </div>
+  );
+};
diff --git a/src/pages/Common/Input.tsx b/src/pages/Common/Input.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { Icon } from 'antd-mobile';
+import styles from './index.module.less';
+
+export type InputType = 'text' | 'password' | 'phone' | 'file';
+type RuleType = RegExp | boolean | (RegExp | boolean)[];
+interface IInputProps {
+  type?: InputType;
+  onchange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  rule: RuleType;
+  isALlMatch?: boolean; // 是否需要完全匹配规则
+  value?: string | number;
+  refValue?: string; // 与value值比较是否相等
+}
+
+export const Input = (props: IInputProps) => {
+  const [isOk, setOk] = React.useState(false);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    const isOk = props.refValue ? val === props.refValue : true;
+    const regs: (RegExp | boolean)[] = [];
+    //校验规则
+    if (Array.isArray(props.rule)) regs.push(...props.rule);
+    else regs.push(props.rule);
+    if (props.isALlMatch)
+      setOk(isOk && regs.every(r => (typeof r === 'boolean' ? r : r.test(e.target.value))));
+    else setOk(isOk && regs.some(r => (typeof r === 'boolean' ? r : r.test(e.target.value))));
+
+    if (props.onchange) props.onchange(e);
+  };
+
+  return (
+    <div className={styles.commonInput}>
+      <input type={props.type} value={props.value} onChange={handleChange} />
+      {isOk ? (
+        <span>
+          <Icon type="check" />
+        </span>
+      ) : (
+        <div className="am-input-error-extra" />
+      )}
+    </div>
+  );
+};
diff --git a/src/pages/Common/PickerComponent.tsx b/src/pages/Common/PickerComponent.tsx
@@ -0,0 +1,26 @@
+import { Picker } from 'antd-mobile';
+import { PickerData } from 'antd-mobile/lib/picker/PropsType';
+import * as React from 'react';
+import { useState } from 'react';
+import styles from '../Register/index.module.less';
+import { SignItem } from './SignItem';
+
+interface IPickerProps {
+  data: PickerData[];
+  title: string;
+  head: string;
+}
+
+export const PickerComponent = (props: IPickerProps) => {
+  const [val, setVal] = useState(props.data[0].label);
+
+  return (
+    <SignItem title={props.title} className={styles.roleTitle}>
+      <h3 className={styles.info}>Coderiver会基于您的角色向您推荐相关项目和团队</h3>
+      <h6>{props.head}</h6>
+      <Picker data={props.data} cols={1} onOk={val => setVal(props.data[val].label as string)}>
+        <span className="val">{val}</span>
+      </Picker>
+    </SignItem>
+  );
+};
diff --git a/src/pages/Common/SignItem.tsx b/src/pages/Common/SignItem.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+interface IRegisterItem {
+  title: string;
+  className?: string;
+}
+
+export class SignItem extends React.Component<IRegisterItem, {}> {
+  render() {
+    const { title } = this.props;
+    return (
+      <>
+        <h1 className={this.props.className}>{title}</h1>
+        {this.props.children}
+      </>
+    );
+  }
+}
diff --git a/src/pages/Common/index.module.less b/src/pages/Common/index.module.less
@@ -0,0 +1,32 @@
+:global{
+  .am-input-error-extra{
+    position: absolute;
+    right: 0;
+    top: calc(~"50% - 12.5px");
+    height: 42px;
+    width: 42px;
+    margin-left: 6px;
+    background-image: url("data:image/svg+xml;charset=utf-8,<svg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'><path d='M9 1.266a7.69 7.69 0 0 1 5.469 2.264c.71.71 1.269 1.538 1.657 2.459.404.954.608 1.967.608 3.011a7.69 7.69 0 0 1-2.264 5.469 7.694 7.694 0 0 1-2.459 1.657A7.675 7.675 0 0 1 9 16.734a7.69 7.69 0 0 1-5.469-2.264 7.694 7.694 0 0 1-1.657-2.459A7.675 7.675 0 0 1 1.266 9 7.69 7.69 0 0 1 3.53 3.531a7.694 7.694 0 0 1 2.459-1.657A7.675 7.675 0 0 1 9 1.266zM9 0a9 9 0 0 0-9 9 9 9 0 0 0 9 9 9 9 0 0 0 9-9 9 9 0 0 0-9-9zm0 11.25a.703.703 0 0 1-.703-.703V4.06a.703.703 0 1 1 1.406 0v6.486A.703.703 0 0 1 9 11.25zm-.791 1.916a.791.791 0 1 1 1.582 0 .791.791 0 0 1-1.582 0z' fill='%23F50' fill-rule='evenodd'/></svg>");
+    background-size: 42px auto;
+  }
+  .flex{
+    display: flex;
+  }
+  .flex-btw{
+    .flex();
+    justify-content: space-between;
+  }
+}
+img{
+  width: 100%;
+  height: 100%;
+}
+
+.commonInput{
+  position: relative;
+  &>span{
+    position: absolute;
+    right: 0;
+    top: calc(~"50% - 12.5px");
+  }
+}
diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
@@ -0,0 +1,62 @@
+import { Button, Icon } from 'antd-mobile';
+import { Link, Redirect, Route, Switch } from 'dva/router';
+import { History } from 'history';
+import * as React from 'react';
+import { ESignMethod } from 'utils/enum';
+import styles from '../Register/index.module.less';
+import { SignItem } from '@pages/Common/SignItem';
+
+export interface ILoginProps {
+  history: History;
+}
+
+export class Login extends React.Component<ILoginProps, { method: ESignMethod }> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      method: ESignMethod.Phone,
+    };
+  }
+  private handleMethod = () => {
+    let nextUrl = this.state.method === ESignMethod.Email ? 'phone' : 'email';
+    this.setState({ method: nextUrl as ESignMethod });
+    this.props.history.replace('/login/' + nextUrl);
+  };
+  public render() {
+    return (
+      <div className={styles.login + ' bg'}>
+        <div>
+          <Icon type="left" size="lg" onClick={() => this.props.history.goBack()} />
+        </div>
+        <SignItem title="登陆">
+          <Switch>
+            <Redirect exact from="/login" to="/login/phone" />
+            <Route exact path="/login/email" component={InputEmail} />
+            <Route exact path="/login/phone" component={InputPhone} />
+          </Switch>
+          <h6>输入密码</h6>
+          <input type="password" />
+        </SignItem>
+        <div>
+          <Link to="/main" className={styles.right}>
+            <Icon type="right" />
+          </Link>
+        </div>
+      </div>
+    );
+  }
+}
+
+const InputEmail = () => (
+  <>
+    <h6>输入邮箱</h6>
+    <input />
+  </>
+);
+
+const InputPhone = () => (
+  <>
+    <h6>手机号码</h6>
+    <input />
+  </>
+);
diff --git a/src/pages/Main/index.module.less b/src/pages/Main/index.module.less
@@ -0,0 +1,35 @@
+.main{
+  padding: 40px 0;
+
+  h1,h5{
+    padding: 0 40px;
+    margin: 0;
+  }
+  .content{
+    padding: 40px;
+  }
+  .title{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .itemIcon,.itemIconLg{
+    width: 22px;
+    height: 22px;
+    background-position: center;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+  }
+  .itemIconLg{
+    width: 36px;
+    height: 36px
+  }
+}
+
+:global{
+  .am-tabs-tab-bar-wrap{
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+  }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,3 +6,4 @@ node_modules @@
     public
     .idea
     .git
+    .yarn.lock