40 | ); 41 | } 42 | } 43 | 44 | export default SampleChart; -------------------------------------------------------------------------------- /src/component/SiderMenu/SiderMenu.js: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | import { Layout, Menu, Icon } from 'antd'; 3 | import pathToRegexp from 'path-to-regexp'; 4 | import Link from 'umi/link'; 5 | import styles from './index.less'; 6 | import { urlToList } from '../_utils/pathTools'; 7 | 8 | const { Sider } = Layout; 9 | const { SubMenu } = Menu; 10 | 11 | // Allow menu.js config icon as string or ReactNode 12 | // icon: 'setting', 13 | // icon: 'http://demo.com/icon.png', 14 | // icon: , 15 | const getIcon = icon => { 16 | if (typeof icon === 'string' && icon.indexOf('http') === 0) { 17 | return

; 18 | } 19 | if (typeof icon === 'string') { 20 | return ; 21 | } 22 | return icon; 23 | }; 24 | 25 | export const getMeunMatcheys = (flatMenuKeys, path) => { 26 | return flatMenuKeys.filter(item => { 27 | return pathToRegexp(item).test(path); 28 | }); 29 | }; 30 | 31 | export default class SiderMenu extends PureComponent { 32 | constructor(props) { 33 | super(props); 34 | this.menus = props.menuData; 35 | this.flatMenuKeys = this.getFlatMenuKeys(props.menuData); 36 | this.state = { 37 | openKeys: this.getDefaultCollapsedSubMenus(props), 38 | }; 39 | } 40 | UNSAFE_componentWillReceiveProps(nextProps) { 41 | if (nextProps.location.pathname !== this.props.location.pathname) { 42 | this.setState({ 43 | openKeys: this.getDefaultCollapsedSubMenus(nextProps), 44 | }); 45 | } 46 | } 47 | /** 48 | * Convert pathname to openKeys 49 | * /list/search/articles = > ['list','/list/search'] 50 | * @param props 51 | */ 52 | getDefaultCollapsedSubMenus(props) { 53 | const { location: { pathname } } = props || this.props; 54 | return urlToList(pathname) 55 | .map(item => { 56 | return getMeunMatcheys(this.flatMenuKeys, item)[0]; 57 | }) 58 | .filter(item => item); 59 | } 60 | /** 61 | * Recursively flatten the data 62 | * [{path:string},{path:string}] => {path,path2} 63 | * @param menus 64 | */ 65 | getFlatMenuKeys(menus) { 66 | let keys = []; 67 | menus.forEach(item => { 68 | if (item.children) { 69 | keys = keys.concat(this.getFlatMenuKeys(item.children)); 70 | } 71 | keys.push(item.path); 72 | }); 73 | return keys; 74 | } 75 | /** 76 | * 判断是否是http链接.返回 Link 或 a 77 | * Judge whether it is http link.return a or Link 78 | * @memberof SiderMenu 79 | */ 80 | getMenuItemPath = item => { 81 | const itemPath = this.conversionPath(item.path); 82 | const icon = getIcon(item.icon); 83 | const { target, name } = item; 84 | // Is it a http link 85 | if (/^https?:\/\//.test(itemPath)) { 86 | return ( 87 | 88 | {icon} 89 | {name} 90 | 91 | ); 92 | } 93 | return ( 94 | { 101 | this.props.onCollapse(true); 102 | } 103 | : undefined 104 | } 105 | > 106 | {icon} 107 | {name} 108 | 109 | ); 110 | }; 111 | /** 112 | * get SubMenu or Item 113 | */ 114 | getSubMenuOrItem = item => { 115 | if (item.children && item.children.some(child => child.name)) { 116 | const childrenItems = this.getNavMenuItems(item.children); 117 | // 当无子菜单时就不展示菜单 118 | if (childrenItems && childrenItems.length > 0) { 119 | return ( 120 | 124 | {getIcon(item.icon)} 125 | {item.name} 126 | 127 | ) : ( 128 | item.name 129 | ) 130 | } 131 | key={item.path} 132 | > 133 | {childrenItems} 134 | 135 | ); 136 | } 137 | return null; 138 | } else { 139 | return {this.getMenuItemPath(item)}; 140 | } 141 | }; 142 | /** 143 | * 获得菜单子节点 144 | * @memberof SiderMenu 145 | */ 146 | getNavMenuItems = menusData => { 147 | if (!menusData) { 148 | return []; 149 | } 150 | return menusData 151 | .filter(item => item.name && !item.hideInMenu) 152 | .map(item => { 153 | // make dom 154 | const ItemDom = this.getSubMenuOrItem(item); 155 | return this.checkPermissionItem(item.authority, ItemDom); 156 | }) 157 | .filter(item => item); 158 | }; 159 | // Get the currently selected menu 160 | getSelectedMenuKeys = () => { 161 | const { location: { pathname } } = this.props; 162 | return urlToList(pathname).map(itemPath => getMeunMatcheys(this.flatMenuKeys, itemPath).pop()); 163 | }; 164 | // conversion Path 165 | // 转化路径 166 | conversionPath = path => { 167 | if (path && path.indexOf('http') === 0) { 168 | return path; 169 | } else { 170 | return `/${path || ''}`.replace(/\/+/g, '/'); 171 | } 172 | }; 173 | // permission to check 174 | checkPermissionItem = (authority, ItemDom) => { 175 | if (this.props.Authorized && this.props.Authorized.check) { 176 | const { check } = this.props.Authorized; 177 | return check(authority, ItemDom); 178 | } 179 | return ItemDom; 180 | }; 181 | isMainMenu = key => { 182 | return this.menus.some(item => key && (item.key === key || item.path === key)); 183 | }; 184 | handleOpenChange = openKeys => { 185 | const lastOpenKey = openKeys[openKeys.length - 1]; 186 | const moreThanOne = openKeys.filter(openKey => this.isMainMenu(openKey)).length > 1; 187 | this.setState({ 188 | openKeys: moreThanOne ? [lastOpenKey] : [...openKeys], 189 | }); 190 | }; 191 | render() { 192 | const { logo, collapsed, onCollapse } = this.props; 193 | const { openKeys } = this.state; 194 | // Don't show popup menu when it is been collapsed 195 | const menuProps = collapsed 196 | ? {} 197 | : { 198 | openKeys, 199 | }; 200 | // if pathname can't match, use the nearest parent's key 201 | let selectedKeys = this.getSelectedMenuKeys(); 202 | if (!selectedKeys.length) { 203 | selectedKeys = [openKeys[openKeys.length - 1]]; 204 | } 205 | return ( 206 | 215 |

216 | 217 |

218 |

Ant Design Pro

219 | 220 |

221 | 230 | {this.getNavMenuItems(this.menus)} 231 | 232 | 233 | ); 234 | } 235 | } 236 | -------------------------------------------------------------------------------- /src/component/SiderMenu/index.js: -------------------------------------------------------------------------------- 1 | import 'rc-drawer-menu/assets/index.css'; 2 | import React from 'react'; 3 | import DrawerMenu from 'rc-drawer-menu'; 4 | import SiderMenu from './SiderMenu'; 5 | 6 | const SiderMenuWrapper = props => 7 | props.isMobile ? ( 8 | { 14 | props.onCollapse(true); 15 | }} 16 | width="256px" 17 | > 18 | 19 | 20 | ) : ( 21 | 22 | ); 23 | 24 | export default SiderMenuWrapper; 25 | -------------------------------------------------------------------------------- /src/component/SiderMenu/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/lib/style/themes/default.less'; 2 | @ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86); 3 | .logo { 4 | height: 64px; 5 | position: relative; 6 | line-height: 64px; 7 | padding-left: (@menu-collapsed-width - 32px) / 2; 8 | transition: all 0.3s; 9 | background: #002140; 10 | overflow: hidden; 11 | img { 12 | display: inline-block; 13 | vertical-align: middle; 14 | height: 32px; 15 | } 16 | h1 { 17 | color: white; 18 | display: inline-block; 19 | vertical-align: middle; 20 | font-size: 20px; 21 | margin: 0 0 0 12px; 22 | font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif; 23 | font-weight: 600; 24 | } 25 | } 26 | 27 | .sider { 28 | min-height: 100vh; 29 | box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35); 30 | position: relative; 31 | z-index: 10; 32 | &.ligth { 33 | background-color: white; 34 | .logo { 35 | background: white; 36 | h1 { 37 | color: #002140; 38 | } 39 | } 40 | } 41 | } 42 | 43 | .icon { 44 | width: 14px; 45 | margin-right: 10px; 46 | } 47 | 48 | :global { 49 | .drawer .drawer-content { 50 | background: #001529; 51 | } 52 | .ant-menu-inline-collapsed { 53 | & > .ant-menu-item .sider-menu-item-img + span, 54 | & 55 | > .ant-menu-item-group 56 | > .ant-menu-item-group-list 57 | > .ant-menu-item 58 | .sider-menu-item-img 59 | + span, 60 | & > .ant-menu-submenu > .ant-menu-submenu-title .sider-menu-item-img + span { 61 | max-width: 0; 62 | display: inline-block; 63 | opacity: 0; 64 | } 65 | } 66 | .ant-menu-item .sider-menu-item-img + span, 67 | .ant-menu-submenu-title .sider-menu-item-img + span { 68 | transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out; 69 | opacity: 1; 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /src/component/TestDemo.js: -------------------------------------------------------------------------------- 1 | export default () => { 2 | return

test

; 3 | }; 4 | -------------------------------------------------------------------------------- /src/component/_utils/pathTools.js: -------------------------------------------------------------------------------- 1 | // /userinfo/2144/id => ['/userinfo','/useinfo/2144,'/userindo/2144/id'] 2 | export function urlToList(url) { 3 | const urllist = url.split('/').filter(i => i); 4 | return urllist.map((urlItem, index) => { 5 | return `/${urllist.slice(0, index + 1).join('/')}`; 6 | }); 7 | } 8 | -------------------------------------------------------------------------------- /src/layout/index.js: -------------------------------------------------------------------------------- 1 | import { Component } from 'react'; 2 | import { Layout } from 'antd'; 3 | import SiderMenu from "../component/SiderMenu/SiderMenu"; 4 | import { getMenuData } from '../common/menu'; 5 | import logo from '../assets/logo.svg'; 6 | import GlobalHeader from "../component/GlobalHeader"; 7 | 8 | const { Content, Header } = Layout; 9 | 10 | class BasicLayout extends Component { 11 | constructor(props) { 12 | super(props); 13 | this.state = { 14 | collapsed: false, 15 | }; 16 | } 17 | 18 | handleMenuCollapse = () => { 19 | this.setState({ 20 | collapsed: !this.state.collapsed, 21 | }); 22 | }; 23 | 24 | render() { 25 | const { children, location } = this.props; 26 | const { collapsed } = this.state; 27 | return ( 28 | 29 | 36 | 37 |

38 | 49 |

50 | 51 | { children } 52 | 53 | 54 | 55 | ); 56 | } 57 | } 58 | 59 | export default BasicLayout; 60 | -------------------------------------------------------------------------------- /src/locale/en-US.js: -------------------------------------------------------------------------------- 1 | export default { 2 | lang: 'English', 3 | helloworld: 'hello world', 4 | } 5 | -------------------------------------------------------------------------------- /src/locale/zh-CN.js: -------------------------------------------------------------------------------- 1 | export default { 2 | lang: '中文', 3 | helloworld: '你好', 4 | } 5 | -------------------------------------------------------------------------------- /src/model/cards.js: -------------------------------------------------------------------------------- 1 | import * as cardsService from '../service/cards'; 2 | 3 | export default { 4 | 5 | namespace: 'cards', 6 | 7 | state: { 8 | cardsList: [], 9 | statistic: {}, 10 | }, 11 | 12 | effects: { 13 | *queryList({ _ }, { call, put }) { 14 | const rsp = yield call(cardsService.queryList); 15 | console.log('queryList'); 16 | console.log(rsp); 17 | yield put({ type: 'saveList', payload: { cardsList: rsp.result } }); 18 | }, 19 | *deleteOne({ payload }, { call, put }) { 20 | const rsp = yield call(cardsService.deleteOne, payload); 21 | console.log('deleteOne'); 22 | console.log(rsp); 23 | return rsp; 24 | }, 25 | *addOne({ payload }, { call, put }) { 26 | const rsp = yield call(cardsService.addOne, payload); 27 | yield put({ type: 'queryList' }); 28 | return rsp; 29 | }, 30 | *getStatistic({ payload }, { call, put }) { 31 | const rsp = yield call(cardsService.getStatistic, payload); 32 | yield put({ 33 | type: 'saveStatistic', 34 | payload: { 35 | id: payload, 36 | data: rsp.result, 37 | }, 38 | }); 39 | return rsp; 40 | }, 41 | }, 42 | 43 | reducers: { 44 | saveList(state, { payload: { cardsList } }) { 45 | return { 46 | ...state, 47 | cardsList, 48 | } 49 | }, 50 | saveStatistic(state, { payload: { id, data } }) { 51 | return { 52 | ...state, 53 | statistic: { 54 | ...state.statistic, 55 | [id]: data, 56 | }, 57 | } 58 | }, 59 | }, 60 | }; 61 | -------------------------------------------------------------------------------- /src/model/puzzlecards.js: -------------------------------------------------------------------------------- 1 | import request from '../util/request'; // request 是 demo 项目脚手架中提供的一个做 http 请求的方法，是对于 fetch 的封装，返回 Promise 2 | 3 | const delay = (millisecond) => { 4 | return new Promise((resolve) => { 5 | setTimeout(resolve, millisecond); 6 | }); 7 | }; 8 | 9 | export default { 10 | namespace: 'puzzlecards', 11 | state: { 12 | data: [], 13 | counter: 0, 14 | }, 15 | effects: { 16 | *queryInitCards(_, sagaEffects) { 17 | const { call, put } = sagaEffects; 18 | const endPointURI = '/dev/random_joke'; 19 | 20 | const puzzle = yield call(request, endPointURI); 21 | yield put({ type: 'addNewCard', payload: puzzle }); 22 | 23 | yield call(delay, 3000); 24 | 25 | const puzzle2 = yield call(request, endPointURI); 26 | yield put({ type: 'addNewCard', payload: puzzle2 }); 27 | } 28 | }, 29 | reducers: { 30 | addNewCard(state, { payload: newCard }) { 31 | const nextCounter = state.counter + 1; 32 | const newCardWithId = { ...newCard, id: nextCounter }; 33 | const nextData = state.data.concat(newCardWithId); 34 | return { 35 | data: nextData, 36 | counter: nextCounter, 37 | }; 38 | } 39 | }, 40 | }; -------------------------------------------------------------------------------- /src/page/UmiLocale.js: -------------------------------------------------------------------------------- 1 | import { DatePicker } from 'antd'; 2 | import { 3 | FormattedMessage, 4 | } from 'umi/locale'; 5 | 6 | export default () => { 7 | return ( 8 |

9 | 10 | 11 |

12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /src/page/cards.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { connect } from 'dva'; 3 | // import Link from 'umi/link'; 4 | import { Card, Icon, message } from 'antd'; 5 | 6 | class CardsPage extends Component { 7 | componentDidMount() { 8 | this.queryList(); 9 | } 10 | 11 | queryList = () => { 12 | this.props.dispatch({ 13 | type: 'cards/queryList', 14 | }); 15 | }; 16 | 17 | deleteOne = (id) => { 18 | this.props.dispatch({ 19 | type: 'cards/deleteOne', 20 | payload: id, 21 | }).then(() => { 22 | message.success('delete success, refresh'); 23 | this.queryList(); 24 | }); 25 | }; 26 | 27 | render() { 28 | const { cardsList = [] } = this.props; 29 | console.log('cardsList'); 30 | console.log(cardsList); 31 | 32 | return ( 33 |

34 | {cardsList.map(v => this.deleteOne(v.id)} />} 39 | >{v.desc})} 40 |

41 | ); 42 | } 43 | } 44 | 45 | function mapStateToProps(state) { 46 | console.log('state'); 47 | console.log(state); 48 | return { 49 | cardsList: state.cards.cardsList, 50 | }; 51 | } 52 | 53 | export default connect(mapStateToProps)(CardsPage); 54 | 55 | // TODO replace antd Card with own Card. 56 | -------------------------------------------------------------------------------- /src/page/dashboard/analysis.js: -------------------------------------------------------------------------------- 1 | import router from 'umi/router'; 2 | import { Button } from 'antd'; 3 | 4 | export default () => 5 | <> 6 |

Dashboard Analysis Page

7 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/page/helloworld.js: -------------------------------------------------------------------------------- 1 | import { 2 | FormattedMessage, 3 | } from 'umi/locale'; 4 | 5 | export default () => { 6 | return

; 7 | } 8 | -------------------------------------------------------------------------------- /src/page/index.js: -------------------------------------------------------------------------------- 1 | import Link from 'umi/link'; 2 | 3 | export default () => 4 | <> 5 |

Index Page

6 |

Pages

7 |

/dashboard/analysis
/cards
/puzzlecards
/helloworld
/locale

14 | 15 | -------------------------------------------------------------------------------- /src/page/list/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Table, Modal, Button, Form, Input } from 'antd'; 3 | import { connect } from 'dva'; 4 | import SampleChart from '../../component/SampleChart'; 5 | 6 | const FormItem = Form.Item; 7 | 8 | class List extends React.Component { 9 | state = { 10 | visible: false, 11 | statisticVisible: false, 12 | id: null, 13 | }; 14 | 15 | columns = [ 16 | { 17 | title: '名称', 18 | dataIndex: 'name', 19 | }, 20 | { 21 | title: '描述', 22 | dataIndex: 'desc', 23 | }, 24 | { 25 | title: '链接', 26 | dataIndex: 'url', 27 | render(value) { 28 | return ( 29 | {value} 30 | ); 31 | }, 32 | }, 33 | { 34 | title: '', 35 | dataIndex: 'statistic', 36 | render: (_, { id }) => { 37 | return ( 38 | 39 | ); 40 | }, 41 | }, 42 | ]; 43 | 44 | componentDidMount() { 45 | this.props.dispatch({ 46 | type: 'cards/queryList', 47 | }); 48 | } 49 | 50 | showModal = () => { 51 | this.setState({ visible: true }); 52 | }; 53 | 54 | showStatistic = (id) => { 55 | this.props.dispatch({ 56 | type: 'cards/getStatistic', 57 | payload: id, 58 | }); 59 | this.setState({ id, statisticVisible: true }); 60 | }; 61 | 62 | handleOk = () => { 63 | const { dispatch, form: { validateFields } } = this.props; 64 | 65 | validateFields((err, values) => { 66 | if (!err) { 67 | dispatch({ 68 | type: 'cards/addOne', 69 | payload: values, 70 | }); 71 | this.setState({ visible: false }); 72 | } 73 | }); 74 | } 75 | 76 | handleCancel = () => { 77 | this.setState({ 78 | visible: false, 79 | }); 80 | } 81 | 82 | handleStatisticCancel = () => { 83 | this.setState({ 84 | statisticVisible: false, 85 | }); 86 | } 87 | 88 | render() { 89 | const { visible, statisticVisible, id } = this.state; 90 | const { cardsList, cardsLoading, form: { getFieldDecorator }, statistic } = this.props; 91 | 92 | return ( 93 |

94 | 95 | 96 | 97 | 98 | 104 | 105 | 106 | {getFieldDecorator('name', { 107 | rules: [{ required: true }], 108 | })( 109 | 110 | )} 111 | 112 | 113 | {getFieldDecorator('desc')( 114 | 115 | )} 116 | 117 | 118 | {getFieldDecorator('url', { 119 | rules: [{ type: 'url' }], 120 | })( 121 | 122 | )} 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | ); 132 | } 133 | } 134 | 135 | function mapStateToProps(state) { 136 | return { 137 | cardsList: state.cards.cardsList, 138 | cardsLoading: state.loading.effects['cards/queryList'], 139 | statistic: state.cards.statistic, 140 | }; 141 | } 142 | 143 | export default connect(mapStateToProps)(Form.create()(List)); -------------------------------------------------------------------------------- /src/page/locale.js: -------------------------------------------------------------------------------- 1 | // 对应课程参考代码中的 src/page/locale.js 2 | import zhCN from 'antd/lib/locale-provider/zh_CN'; 3 | import { DatePicker, LocaleProvider } from 'antd'; 4 | import { 5 | FormattedMessage, 6 | IntlProvider, 7 | addLocaleData, 8 | } from 'react-intl'; 9 | import zhData from 'react-intl/locale-data/zh'; 10 | 11 | const messages = { 12 | 'helloworld': '你好', 13 | }; 14 | 15 | addLocaleData(zhData); 16 | 17 | export default () => { 18 | return ( 19 | 20 | 21 |

22 | 23 | 24 |

25 | 26 | 27 | ) 28 | } 29 | -------------------------------------------------------------------------------- /src/page/puzzlecards.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Card, /* Button */ } from 'antd'; 3 | import { connect } from 'dva'; 4 | 5 | const namespace = 'puzzlecards'; 6 | 7 | const mapStateToProps = (state) => { 8 | const cardList = state[namespace].data; 9 | return { 10 | cardList, 11 | }; 12 | }; 13 | 14 | const mapDispatchToProps = (dispatch) => { 15 | return { 16 | onDidMount: () => { 17 | dispatch({ 18 | type: `${namespace}/queryInitCards`, 19 | }); 20 | }, 21 | }; 22 | }; 23 | 24 | @connect(mapStateToProps, mapDispatchToProps) 25 | export default class PuzzleCardsPage extends Component { 26 | componentDidMount() { 27 | this.props.onDidMount(); 28 | } 29 | render() { 30 | return ( 31 |

32 | { 33 | this.props.cardList.map(card => { 34 | return ( 35 | 36 |

Q: {card.setup}

37 |

38 | A: {card.punchline} 39 |

40 | 41 | ); 42 | }) 43 | } 44 |

45 | ); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/page/tsdemo.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // name为必填 4 | const Hello = ({ name }) =>

Hello,{name}

; 5 | 6 | // 约束 name 的类型 7 | const SFCHello: React.SFC<{ name: string }> = ({ name }) => ( 8 |

Hello,{name}

9 | ); 10 | 11 | class Message extends React.Component< 12 | { 13 | message: string; 14 | }, 15 | { 16 | count: number; 17 | } 18 | > { 19 | constructor(props) { 20 | super(props); 21 | this.state = { 22 | count: 0 23 | }; 24 | } 25 | public increment = () => { 26 | const { count } = this.state; 27 | this.setState({ 28 | count: count + 1 29 | }); 30 | }; 31 | public render() { 32 | return ( 33 |

34 | {this.props.message} 35 | {this.state.count} 36 |

37 | ); 38 | } 39 | } 40 | 41 | const App = () => ( 42 | <> 43 | 44 | 45 | 46 | 47 | ); 48 | 49 | export default App; 50 | -------------------------------------------------------------------------------- /src/service/cards.js: -------------------------------------------------------------------------------- 1 | import request from '../util/request'; 2 | 3 | export function queryList() { 4 | return request('/api/cards'); 5 | } 6 | 7 | export function deleteOne(id) { 8 | return request(`/api/cards/${id}`, { 9 | method: 'DELETE' 10 | }); 11 | } 12 | 13 | export function addOne(data) { 14 | return request('/api/cards/add', { 15 | headers: { 16 | 'content-type': 'application/json', 17 | }, 18 | method: 'POST', 19 | body: JSON.stringify(data), 20 | }); 21 | } 22 | 23 | export function getStatistic(id) { 24 | return request(`/api/cards/${id}/statistic`); 25 | } -------------------------------------------------------------------------------- /src/util/request.js: -------------------------------------------------------------------------------- 1 | // import fetch from 'dva/fetch'; 2 | 3 | function checkStatus(response) { 4 | if (response.status >= 200 && response.status < 300) { 5 | return response; 6 | } 7 | 8 | const error = new Error(response.statusText); 9 | error.response = response; 10 | throw error; 11 | } 12 | 13 | /** 14 | * Requests a URL, returning a promise. 15 | * 16 | * @param {string} url The URL we want to request 17 | * @param {object} [options] The options we want to pass to "fetch" 18 | * @return {object} An object containing either "data" or "err" 19 | */ 20 | export default async function request(url, options) { 21 | const response = await fetch(url, options); 22 | checkStatus(response); 23 | return await response.json(); 24 | } 25 | -------------------------------------------------------------------------------- /test/helloworld.test.js: -------------------------------------------------------------------------------- 1 | import { mount } from 'enzyme'; 2 | import TestDemo from '../src/component/TestDemo'; 3 | 4 | const sum = function (a, b) { 5 | return a + b; 6 | }; 7 | 8 | test('adds 1 + 2 to equal 3', () => { 9 | expect(sum(1, 2)).toBe(3); 10 | }); 11 | 12 | test('TestDemo', () => { 13 | const wrapper = mount(); 14 | expect(wrapper.find('div').text()).toBe('test'); 15 | }); 16 | -------------------------------------------------------------------------------- /tool/bigfish.js: -------------------------------------------------------------------------------- 1 | // 代码参考 http://gitlab.alipay-inc.com/bigfish/bigfish-antdpro-adapter 2 | 3 | const executeRule = require('./executeRule'); 4 | 5 | const rules = [ 6 | // copy 代码 7 | { 8 | pattern: '!(dist|node_modules|tool|.git|.gitlab-ci.yml)', 9 | operation: 'cp', 10 | target: 'dist/', 11 | }, 12 | // 修改代码从 umi 到 bigfish 13 | { 14 | pattern: 'dist/package.json', 15 | operation: 'modify', 16 | ops: [{ 17 | match: '"umi": "^2.0.0",', 18 | replace: '"@alipay/bigfish": "^2.0.0",' 19 | }, { 20 | match: `, 21 | "umi-plugin-react": "^1.0.0"`, 22 | replace: '' 23 | }, { 24 | match: /umi/g, 25 | replace: 'bigfish', 26 | }], 27 | }, 28 | // 修改配置 29 | { 30 | pattern: 'dist/config/config.js', 31 | operation: 'modify', 32 | ops: [{ 33 | match: ` 34 | singular: true, 35 | plugins: [ 36 | ['umi-plugin-react', { 37 | antd: true, 38 | dva: true, 39 | locale: { 40 | enable: true, 41 | }, 42 | }], 43 | ],`, 44 | replace: ` 45 | locale: { 46 | enable: true, 47 | },`, 48 | }], 49 | }, 50 | // 修改组件中的依赖路径 51 | { 52 | pattern: 'dist/src/**/*.js', 53 | operation: 'modify', 54 | ops: [{ 55 | match: '\'react\'', 56 | replace: '\'@alipay/bigfish/react\'', 57 | }, { 58 | match: '\'dva\'', 59 | replace: '\'@alipay/bigfish/sdk\'', 60 | }, { 61 | match: /'antd/g, 62 | replace: '\'@alipay/bigfish/antd', 63 | }, { 64 | match: '\'classnames\'', 65 | replace: '\'@alipay/bigfish/util/classnames\'', 66 | }, { 67 | match: 'import { routerRedux } from \'dva/router\'', 68 | replace: 'import history from \'@alipay/bigfish/sdk/history\';', 69 | }, { 70 | match: '\'dva/router\'', 71 | replace: '\'@alipay/bigfish/sdk/router\'', 72 | }, { 73 | match: '\'prop-types\'', 74 | replace: '\'@alipay/bigfish/util/prop-types\'', 75 | }, { 76 | match: '\'umi/locale\'', 77 | replace: '\'@alipay/bigfish/locale\'', 78 | }, { 79 | match: 'import Link from \'umi/link\';', 80 | replace: 'import { Link } from \'@alipay/bigfish/sdk/router\';', 81 | }] 82 | } 83 | ] 84 | 85 | rules.forEach((rule) => { 86 | executeRule(rule, true); 87 | }); 88 | 89 | console.log('done'); 90 | process.exit(0); 91 | -------------------------------------------------------------------------------- /tool/executeRule.js: -------------------------------------------------------------------------------- 1 | const glob = require('glob'); 2 | const fs = require('fs-extra'); 3 | const { join, basename } = require('path'); 4 | 5 | const getRealPath = (p) => { 6 | return join(__dirname, '..', p); 7 | }; 8 | 9 | const rfRule = (path) => { 10 | fs.removeSync(path); 11 | }; 12 | 13 | const cpRule = (path, { target }) => { 14 | let realPath = getRealPath(target); 15 | if (target.endsWith('/')) { 16 | realPath = join(realPath, basename(path)) 17 | } 18 | fs.copySync(path, realPath); 19 | }; 20 | 21 | const modifyRule = (path, { ops }) => { 22 | let fileContent = '' + fs.readFileSync(path); 23 | ops.forEach(({ match, replace }) => { 24 | fileContent = fileContent.replace(match, replace); 25 | }); 26 | fs.writeFileSync(path, fileContent); 27 | }; 28 | 29 | const renamRule = (path, { name }) => { 30 | const oldName = basename(path); 31 | if (typeof name === 'function') { 32 | name = name(oldName); 33 | } 34 | fs.moveSync(path, path.replace(oldName, name)); 35 | }; 36 | 37 | function executeRule(rule, dot) { 38 | const { pattern, operation } = rule; 39 | const files = glob.sync(pattern, { dot }); 40 | console.log(`find ${files.length} matched for ${pattern}`); 41 | files.forEach((f => { 42 | const realPath = getRealPath(f); 43 | let op = () => { console.warn(`not find operation: ${operation}`); }; 44 | switch(operation) { 45 | case 'rf': 46 | op = rfRule; 47 | break; 48 | case 'cp': 49 | op = cpRule; 50 | break; 51 | case 'modify': 52 | op = modifyRule; 53 | break; 54 | case 'rename': 55 | op = renamRule; 56 | break; 57 | } 58 | console.log(`start execute ${operation} for ${realPath} ...`); 59 | op(realPath, rule); 60 | })); 61 | }; 62 | 63 | module.exports = executeRule; 64 | 65 | -------------------------------------------------------------------------------- /tool/tobigfish.sh: -------------------------------------------------------------------------------- 1 | # 将 umi 的代码转换为 bigfish(蚂蚁金服基于 umi 封装的内部框架) 2 | 3 | rm -rf dist 4 | node tool/bigfish.js 5 | 6 | ## sync to bigfish git 7 | git clone $BIGFISH_GIT 8 | cd course-demo-bigfish 9 | rm -rf ./* 10 | rm .editorconfig .eslintrc .gitignore 11 | cp -r ../dist/* ./ 12 | cp ../dist/.* ./ 13 | git add -A 14 | git commit -m 'commit for bigfish' 15 | git push 16 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "build/dist", 4 | "module": "esnext", 5 | "target": "es2016", 6 | "lib": ["es6", "dom"], 7 | "sourceMap": true, 8 | "jsx": "react", 9 | "allowSyntheticDefaultImports": true, 10 | "moduleResolution": "node", 11 | "rootDir": "src", 12 | "forceConsistentCasingInFileNames": true, 13 | "noImplicitReturns": true, 14 | "suppressImplicitAnyIndexErrors": true, 15 | "noUnusedLocals": true, 16 | "experimentalDecorators": true 17 | }, 18 | "exclude": [ 19 | "node_modules", 20 | "build", 21 | "scripts", 22 | "acceptance-tests", 23 | "webpack", 24 | "jest", 25 | "src/setupTests.ts", 26 | "tslint:latest", 27 | "tslint-config-prettier" 28 | ] 29 | } -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["tslint:latest", "tslint-react", "tslint-config-prettier"], 3 | "rules": { 4 | "no-var-requires": false, 5 | "no-submodule-imports": false, 6 | "object-literal-sort-keys": false, 7 | "jsx-no-lambda": false, 8 | "no-implicit-dependencies": false 9 | } 10 | } --------------------------------------------------------------------------------