diff --git a/.gitignore b/.gitignore index fcd0041..e2838ea 100644 --- 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 index 368e725..2265d64 100644 --- 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 index 5f33cb5..2f2f093 100644 --- a/index.html +++ b/index.html @@ -34,6 +34,9 @@ transform: translateX(-50%); } + + 河码 +
diff --git a/package.json b/package.json index e84a6d3..e589a5f 100644 --- 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 index 0136277..3fd17e0 100644 --- 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/\345\244\264\345\203\217.png" "b/src/assets/Icons/\345\244\264\345\203\217.png" new file mode 100644 index 0000000..ada87a3 Binary files /dev/null and "b/src/assets/Icons/\345\244\264\345\203\217.png" differ diff --git "a/src/assets/Icons/\346\267\273\345\212\240.png" "b/src/assets/Icons/\346\267\273\345\212\240.png" new file mode 100644 index 0000000..cbab15b Binary files /dev/null and "b/src/assets/Icons/\346\267\273\345\212\240.png" differ diff --git "a/src/assets/images/logo\345\233\276\346\241\210.png" "b/src/assets/images/logo\345\233\276\346\241\210.png" new file mode 100644 index 0000000..7400ee1 Binary files /dev/null and "b/src/assets/images/logo\345\233\276\346\241\210.png" differ diff --git a/src/assets/images/react.png b/src/assets/images/react.png deleted file mode 100644 index e648293..0000000 Binary files a/src/assets/images/react.png and /dev/null differ diff --git a/src/index.tsx b/src/index.tsx index c0cbfd8..f94b562 100644 --- 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 new file mode 100644 index 0000000..dc5fa81 --- /dev/null +++ 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 new file mode 100644 index 0000000..8d4289b --- /dev/null +++ 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 ( +
+ +
+ ); +}; diff --git a/src/pages/Common/Input.tsx b/src/pages/Common/Input.tsx new file mode 100644 index 0000000..a31e431 --- /dev/null +++ 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) => 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) => { + 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 ( +
+ + {isOk ? ( + + + + ) : ( +
+ )} +
+ ); +}; diff --git a/src/pages/Common/PickerComponent.tsx b/src/pages/Common/PickerComponent.tsx new file mode 100644 index 0000000..15b5f0f --- /dev/null +++ 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 ( + +

Coderiver会基于您的角色向您推荐相关项目和团队

+
{props.head}
+ setVal(props.data[val].label as string)}> + {val} + + + ); +}; diff --git a/src/pages/Common/SignItem.tsx b/src/pages/Common/SignItem.tsx new file mode 100644 index 0000000..6d25c89 --- /dev/null +++ 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 { + render() { + const { title } = this.props; + return ( + <> +

{title}

+ {this.props.children} + + ); + } +} diff --git a/src/pages/Common/index.module.less b/src/pages/Common/index.module.less new file mode 100644 index 0000000..867415e --- /dev/null +++ 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,"); + 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 new file mode 100644 index 0000000..6cdfada --- /dev/null +++ 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 { + 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 ( +
+
+ this.props.history.goBack()} /> +
+ + + + + + +
输入密码
+ + +
+ + + +
+
+ ); + } +} + +const InputEmail = () => ( + <> +
输入邮箱
+ + +); + +const InputPhone = () => ( + <> +
手机号码
+ + +); diff --git a/src/pages/Main/index.module.less b/src/pages/Main/index.module.less new file mode 100644 index 0000000..42bcd57 --- /dev/null +++ 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%; + } +} diff --git a/src/pages/Main/index.tsx b/src/pages/Main/index.tsx new file mode 100644 index 0000000..2a94956 --- /dev/null +++ b/src/pages/Main/index.tsx @@ -0,0 +1,167 @@ +import * as React from 'react'; +import { TabBar } from 'antd-mobile'; +import styles from './index.module.less'; +import avater from '@assets/Icons/头像.png'; +import { Avater } from '@pages/Common/Avater'; + +export interface IMainProps {} + +export class MainComponent extends React.Component { + constructor(props) { + super(props); + this.state = { + selectedTab: 'redTab', + hidden: false, + }; + } + + renderContent(pageText) { + return
haha
; + } + + render() { + return ( +
+
Hi,Mike
+

+ 为您推荐 + +

+