陈帅
8 years ago
25 changed files with 649 additions and 57 deletions
@ -0,0 +1,103 @@ |
|||||
|
Русский | [English](./README.md) | [简体中文](./README.zh-CN.md) |
||||
|
|
||||
|
# Ant Design Pro |
||||
|
|
||||
|
[](https://travis-ci.org/ant-design/ant-design-pro) |
||||
|
[](https://ci.appveyor.com/project/afc163/ant-design-pro/branch/master) |
||||
|
[](https://david-dm.org/ant-design/ant-design-pro) |
||||
|
[](https://david-dm.org/ant-design/ant-design-pro#info=devDependencies&view=list) |
||||
|
[](https://gitter.im/ant-design/ant-design-pro?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) |
||||
|
|
||||
|
UI-решение "из коробки" для корпоративных приложений как React boilerplate |
||||
|
|
||||
|
 |
||||
|
|
||||
|
- Демо: http://preview.pro.ant.design |
||||
|
- Домашняя страница: http://pro.ant.design |
||||
|
- Документация: http://pro.ant.design/docs/getting-started |
||||
|
- История изменений: http://pro.ant.design/docs/changelog |
||||
|
- FAQ: http://pro.ant.design/docs/faq |
||||
|
- Китайское зеркало сайта: http://ant-design-pro.gitee.io |
||||
|
|
||||
|
## Поиск переводчиков :loudspeaker: |
||||
|
|
||||
|
Нам нужна ваша помощь: https://github.com/ant-design/ant-design-pro/issues/120 |
||||
|
|
||||
|
## Возможности |
||||
|
|
||||
|
- :gem: **Аккуратный дизайн**: Посмотрите [спецификацию Ant Design](http://ant.design/) |
||||
|
- :triangular_ruler: **Общие шаблоны**: Стандартные шаблоны для корпоративных приложений |
||||
|
- :rocket: **Разработка, как искусство**: Новейший стек технологий React/dva/antd |
||||
|
- :iphone: **Отзывчивая верстка**: Создан для экранов разных размеров |
||||
|
- :art: **Темизация**: Возможность изменения темы с помощью конфигурации |
||||
|
- :globe_with_meridians: **Мультиязычность**: Встроенное i18n решение |
||||
|
- :gear: **Лучшие практики**: Надежные процессы для хорошего кода |
||||
|
- :1234: **Разработка по шиблону**: Простое в использовании решение для разработки |
||||
|
- :white_check_mark: **UI тесты**: Разрабатывайте безопасно с юнит и e2e тестами |
||||
|
|
||||
|
## Шаблоны |
||||
|
|
||||
|
``` |
||||
|
- Dashboard |
||||
|
- Analytic |
||||
|
- Monitor |
||||
|
- Workspace |
||||
|
- Form |
||||
|
- Basic Form |
||||
|
- Step Form |
||||
|
- Advanced From |
||||
|
- List |
||||
|
- Standard Table |
||||
|
- Standard List |
||||
|
- Card List |
||||
|
- Search List (Project/Applications/Article) |
||||
|
- Profile |
||||
|
- Simple Profile |
||||
|
- Advanced Profile |
||||
|
- Result |
||||
|
- Success |
||||
|
- Failed |
||||
|
- Exception |
||||
|
- 403 |
||||
|
- 404 |
||||
|
- 500 |
||||
|
- User |
||||
|
- Login |
||||
|
- Register |
||||
|
- Register Result |
||||
|
``` |
||||
|
|
||||
|
## Использование |
||||
|
|
||||
|
```bash |
||||
|
$ git clone https://github.com/ant-design/ant-design-pro.git --depth=1 |
||||
|
$ cd ant-design-pro |
||||
|
$ npm install |
||||
|
$ npm start # visit http://localhost:8000 |
||||
|
``` |
||||
|
|
||||
|
Также можно использовать инструмент командной строки: [ant-design-pro-cli](https://github.com/ant-design/ant-design-pro-cli) |
||||
|
|
||||
|
```bash |
||||
|
$ npm install ant-design-pro-cli -g |
||||
|
$ mkdir pro-demo && cd pro-demo |
||||
|
$ pro new |
||||
|
``` |
||||
|
|
||||
|
Больше информации в [документации](http://pro.ant.design/docs/getting-started). |
||||
|
|
||||
|
## Совместимость |
||||
|
|
||||
|
Современные браузеры и IE11. |
||||
|
|
||||
|
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | |
||||
|
| --------- | --------- | --------- | --------- | --------- | |
||||
|
| IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions |
||||
|
|
||||
|
## Распространение |
||||
|
|
||||
|
Любые варианты распространения приветствуются! Вот несколько примероы того, как вы можете помочь распространению проекта: |
||||
|
|
||||
|
- Использовать Ant Design Pro в ежедневной работе. |
||||
|
- Создавать [задачи](http://github.com/ant-design/ant-design-pro/issues) заводить баги или отвечать на вопросы. |
||||
|
- Делать [pull-реквесты](http://github.com/ant-design/ant-design-pro/pulls) для совершенствования нашего кода. |
||||
@ -0,0 +1,3 @@ |
|||||
|
module.exports = { |
||||
|
testURL: 'http://localhost:8000', |
||||
|
}; |
||||
@ -0,0 +1,309 @@ |
|||||
|
import React, { Fragment } from 'react'; |
||||
|
import PropTypes from 'prop-types'; |
||||
|
import { Layout, Icon, message } from 'antd'; |
||||
|
import DocumentTitle from 'react-document-title'; |
||||
|
import { connect } from 'dva'; |
||||
|
import { Route, Redirect, Switch, routerRedux } from 'dva/router'; |
||||
|
import { ContainerQuery } from 'react-container-query'; |
||||
|
import classNames from 'classnames'; |
||||
|
import pathToRegexp from 'path-to-regexp'; |
||||
|
import { enquireScreen, unenquireScreen } from 'enquire-js'; |
||||
|
import GlobalHeader from '../components/GlobalHeader'; |
||||
|
import GlobalFooter from '../components/GlobalFooter'; |
||||
|
import SiderMenu from '../components/SiderMenu'; |
||||
|
import NotFound from '../routes/Exception/404'; |
||||
|
import { getRoutes } from '../utils/utils'; |
||||
|
import Authorized from '../utils/Authorized'; |
||||
|
import { getMenuData } from '../common/menu'; |
||||
|
import logo from '../assets/logo.svg'; |
||||
|
|
||||
|
const { Content, Header, Footer } = Layout; |
||||
|
const { AuthorizedRoute, check } = Authorized; |
||||
|
|
||||
|
/** |
||||
|
* 根据菜单取得重定向地址. |
||||
|
*/ |
||||
|
const redirectData = []; |
||||
|
const getRedirect = item => { |
||||
|
if (item && item.children) { |
||||
|
if (item.children[0] && item.children[0].path) { |
||||
|
redirectData.push({ |
||||
|
from: `${item.path}`, |
||||
|
to: `${item.children[0].path}`, |
||||
|
}); |
||||
|
item.children.forEach(children => { |
||||
|
getRedirect(children); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
getMenuData().forEach(getRedirect); |
||||
|
|
||||
|
/** |
||||
|
* 获取面包屑映射 |
||||
|
* @param {Object} menuData 菜单配置 |
||||
|
* @param {Object} routerData 路由配置 |
||||
|
*/ |
||||
|
const getBreadcrumbNameMap = (menuData, routerData) => { |
||||
|
const result = {}; |
||||
|
const childResult = {}; |
||||
|
for (const i of menuData) { |
||||
|
if (!routerData[i.path]) { |
||||
|
result[i.path] = i; |
||||
|
} |
||||
|
if (i.children) { |
||||
|
Object.assign(childResult, getBreadcrumbNameMap(i.children, routerData)); |
||||
|
} |
||||
|
} |
||||
|
return Object.assign({}, routerData, result, childResult); |
||||
|
}; |
||||
|
|
||||
|
const query = { |
||||
|
'screen-xs': { |
||||
|
maxWidth: 575, |
||||
|
}, |
||||
|
'screen-sm': { |
||||
|
minWidth: 576, |
||||
|
maxWidth: 767, |
||||
|
}, |
||||
|
'screen-md': { |
||||
|
minWidth: 768, |
||||
|
maxWidth: 991, |
||||
|
}, |
||||
|
'screen-lg': { |
||||
|
minWidth: 992, |
||||
|
maxWidth: 1199, |
||||
|
}, |
||||
|
'screen-xl': { |
||||
|
minWidth: 1200, |
||||
|
maxWidth: 1599, |
||||
|
}, |
||||
|
'screen-xxl': { |
||||
|
minWidth: 1600, |
||||
|
}, |
||||
|
}; |
||||
|
|
||||
|
let isMobile; |
||||
|
enquireScreen(b => { |
||||
|
isMobile = b; |
||||
|
}); |
||||
|
|
||||
|
@connect(({ user, global = {}, loading }) => ({ |
||||
|
currentUser: user.currentUser, |
||||
|
collapsed: global.collapsed, |
||||
|
fetchingNotices: loading.effects['global/fetchNotices'], |
||||
|
notices: global.notices, |
||||
|
})) |
||||
|
export default class BasicLayout extends React.PureComponent { |
||||
|
static childContextTypes = { |
||||
|
location: PropTypes.object, |
||||
|
breadcrumbNameMap: PropTypes.object, |
||||
|
}; |
||||
|
|
||||
|
state = { |
||||
|
isMobile, |
||||
|
}; |
||||
|
|
||||
|
getChildContext() { |
||||
|
const { location, routerData } = this.props; |
||||
|
return { |
||||
|
location, |
||||
|
breadcrumbNameMap: getBreadcrumbNameMap(getMenuData(), routerData), |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
componentDidMount() { |
||||
|
this.enquireHandler = enquireScreen(mobile => { |
||||
|
this.setState({ |
||||
|
isMobile: mobile, |
||||
|
}); |
||||
|
}); |
||||
|
const { dispatch } = this.props; |
||||
|
dispatch({ |
||||
|
type: 'user/fetchCurrent', |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
componentWillUnmount() { |
||||
|
unenquireScreen(this.enquireHandler); |
||||
|
} |
||||
|
|
||||
|
getPageTitle() { |
||||
|
const { routerData, location } = this.props; |
||||
|
const { pathname } = location; |
||||
|
let title = 'Ant Design Pro'; |
||||
|
let currRouterData = null; |
||||
|
// match params path
|
||||
|
Object.keys(routerData).forEach(key => { |
||||
|
if (pathToRegexp(key).test(pathname)) { |
||||
|
currRouterData = routerData[key]; |
||||
|
} |
||||
|
}); |
||||
|
if (currRouterData && currRouterData.name) { |
||||
|
title = `${currRouterData.name} - Ant Design Pro`; |
||||
|
} |
||||
|
return title; |
||||
|
} |
||||
|
|
||||
|
getBaseRedirect = () => { |
||||
|
// According to the url parameter to redirect
|
||||
|
// 这里是重定向的,重定向到 url 的 redirect 参数所示地址
|
||||
|
const urlParams = new URL(window.location.href); |
||||
|
|
||||
|
const redirect = urlParams.searchParams.get('redirect'); |
||||
|
// Remove the parameters in the url
|
||||
|
if (redirect) { |
||||
|
urlParams.searchParams.delete('redirect'); |
||||
|
window.history.replaceState(null, 'redirect', urlParams.href); |
||||
|
} else { |
||||
|
const { routerData } = this.props; |
||||
|
// get the first authorized route path in routerData
|
||||
|
const authorizedPath = Object.keys(routerData).find( |
||||
|
item => check(routerData[item].authority, item) && item !== '/' |
||||
|
); |
||||
|
return authorizedPath; |
||||
|
} |
||||
|
return redirect; |
||||
|
}; |
||||
|
|
||||
|
handleMenuCollapse = collapsed => { |
||||
|
const { dispatch } = this.props; |
||||
|
dispatch({ |
||||
|
type: 'global/changeLayoutCollapsed', |
||||
|
payload: collapsed, |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
handleNoticeClear = type => { |
||||
|
message.success(`清空了${type}`); |
||||
|
const { dispatch } = this.props; |
||||
|
dispatch({ |
||||
|
type: 'global/clearNotices', |
||||
|
payload: type, |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
handleMenuClick = ({ key }) => { |
||||
|
const { dispatch } = this.props; |
||||
|
if (key === 'triggerError') { |
||||
|
dispatch(routerRedux.push('/exception/trigger')); |
||||
|
return; |
||||
|
} |
||||
|
if (key === 'logout') { |
||||
|
dispatch({ |
||||
|
type: 'login/logout', |
||||
|
}); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
handleNoticeVisibleChange = visible => { |
||||
|
const { dispatch } = this.props; |
||||
|
if (visible) { |
||||
|
dispatch({ |
||||
|
type: 'global/fetchNotices', |
||||
|
}); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
render() { |
||||
|
const { |
||||
|
currentUser, |
||||
|
collapsed, |
||||
|
fetchingNotices, |
||||
|
notices, |
||||
|
routerData, |
||||
|
match, |
||||
|
location, |
||||
|
} = this.props; |
||||
|
const { isMobile: mb } = this.state; |
||||
|
const baseRedirect = this.getBaseRedirect(); |
||||
|
const layout = ( |
||||
|
<Layout> |
||||
|
<SiderMenu |
||||
|
logo={logo} |
||||
|
// 不带Authorized参数的情况下如果没有权限,会强制跳到403界面
|
||||
|
// If you do not have the Authorized parameter
|
||||
|
// you will be forced to jump to the 403 interface without permission
|
||||
|
Authorized={Authorized} |
||||
|
menuData={getMenuData()} |
||||
|
collapsed={collapsed} |
||||
|
location={location} |
||||
|
isMobile={mb} |
||||
|
onCollapse={this.handleMenuCollapse} |
||||
|
/> |
||||
|
<Layout> |
||||
|
<Header style={{ padding: 0 }}> |
||||
|
<GlobalHeader |
||||
|
logo={logo} |
||||
|
currentUser={currentUser} |
||||
|
fetchingNotices={fetchingNotices} |
||||
|
notices={notices} |
||||
|
collapsed={collapsed} |
||||
|
isMobile={mb} |
||||
|
onNoticeClear={this.handleNoticeClear} |
||||
|
onCollapse={this.handleMenuCollapse} |
||||
|
onMenuClick={this.handleMenuClick} |
||||
|
onNoticeVisibleChange={this.handleNoticeVisibleChange} |
||||
|
/> |
||||
|
</Header> |
||||
|
<Content style={{ margin: '24px 24px 0', height: '100%' }}> |
||||
|
<Switch> |
||||
|
{redirectData.map(item => ( |
||||
|
<Redirect key={item.from} exact from={item.from} to={item.to} /> |
||||
|
))} |
||||
|
{getRoutes(match.path, routerData).map(item => ( |
||||
|
<AuthorizedRoute |
||||
|
key={item.key} |
||||
|
path={item.path} |
||||
|
component={item.component} |
||||
|
exact={item.exact} |
||||
|
authority={item.authority} |
||||
|
redirectPath="/exception/403" |
||||
|
/> |
||||
|
))} |
||||
|
<Redirect exact from="/" to={baseRedirect} /> |
||||
|
<Route render={NotFound} /> |
||||
|
</Switch> |
||||
|
</Content> |
||||
|
<Footer style={{ padding: 0 }}> |
||||
|
<GlobalFooter |
||||
|
links={[ |
||||
|
{ |
||||
|
key: 'Pro 首页', |
||||
|
title: 'Pro 首页', |
||||
|
href: 'http://pro.ant.design', |
||||
|
blankTarget: true, |
||||
|
}, |
||||
|
{ |
||||
|
key: 'github', |
||||
|
title: <Icon type="github" />, |
||||
|
href: 'https://github.com/ant-design/ant-design-pro', |
||||
|
blankTarget: true, |
||||
|
}, |
||||
|
{ |
||||
|
key: 'Ant Design', |
||||
|
title: 'Ant Design', |
||||
|
href: 'http://ant.design', |
||||
|
blankTarget: true, |
||||
|
}, |
||||
|
]} |
||||
|
copyright={ |
||||
|
<Fragment> |
||||
|
Copyright <Icon type="copyright" /> 2018 蚂蚁金服体验技术部出品 |
||||
|
</Fragment> |
||||
|
} |
||||
|
/> |
||||
|
</Footer> |
||||
|
</Layout> |
||||
|
</Layout> |
||||
|
); |
||||
|
|
||||
|
return ( |
||||
|
<DocumentTitle title={this.getPageTitle()}> |
||||
|
<ContainerQuery query={query}> |
||||
|
{params => <div className={classNames(params)}>{layout}</div>} |
||||
|
</ContainerQuery> |
||||
|
</DocumentTitle> |
||||
|
); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,159 @@ |
|||||
|
import React, { PureComponent } from 'react'; |
||||
|
import moment from 'moment'; |
||||
|
import { connect } from 'dva'; |
||||
|
import { |
||||
|
List, |
||||
|
Card, |
||||
|
Row, |
||||
|
Col, |
||||
|
Radio, |
||||
|
Input, |
||||
|
Progress, |
||||
|
Button, |
||||
|
Icon, |
||||
|
Dropdown, |
||||
|
Menu, |
||||
|
Avatar, |
||||
|
} from 'antd'; |
||||
|
|
||||
|
import PageHeaderLayout from '../../layouts/PageHeaderLayout'; |
||||
|
|
||||
|
import styles from './BasicList.less'; |
||||
|
|
||||
|
const RadioButton = Radio.Button; |
||||
|
const RadioGroup = Radio.Group; |
||||
|
const { Search } = Input; |
||||
|
|
||||
|
const ListContent = ({ data: { owner, createdAt, percent, status } }) => ( |
||||
|
<div className={styles.listContent}> |
||||
|
<div className={styles.listContentItem}> |
||||
|
<span>Owner</span> |
||||
|
<p>{owner}</p> |
||||
|
</div> |
||||
|
<div className={styles.listContentItem}> |
||||
|
<span>开始时间</span> |
||||
|
<p>{moment(createdAt).format('YYYY-MM-DD HH:mm')}</p> |
||||
|
</div> |
||||
|
<div className={styles.listContentItem}> |
||||
|
<Progress percent={percent} status={status} strokeWidth={6} style={{ width: 180 }} /> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
|
||||
|
@connect(({ list, loading }) => ({ |
||||
|
list, |
||||
|
loading: loading.models.list, |
||||
|
})) |
||||
|
export default class BasicList extends PureComponent { |
||||
|
componentDidMount() { |
||||
|
const { dispatch } = this.props; |
||||
|
dispatch({ |
||||
|
type: 'list/fetch', |
||||
|
payload: { |
||||
|
count: 5, |
||||
|
}, |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
render() { |
||||
|
const { |
||||
|
list: { list }, |
||||
|
loading, |
||||
|
} = this.props; |
||||
|
|
||||
|
const Info = ({ title, value, bordered }) => ( |
||||
|
<div className={styles.headerInfo}> |
||||
|
<span>{title}</span> |
||||
|
<p>{value}</p> |
||||
|
{bordered && <em />} |
||||
|
</div> |
||||
|
); |
||||
|
|
||||
|
const extraContent = ( |
||||
|
<div className={styles.extraContent}> |
||||
|
<RadioGroup defaultValue="all"> |
||||
|
<RadioButton value="all">全部</RadioButton> |
||||
|
<RadioButton value="progress">进行中</RadioButton> |
||||
|
<RadioButton value="waiting">等待中</RadioButton> |
||||
|
</RadioGroup> |
||||
|
<Search className={styles.extraContentSearch} placeholder="请输入" onSearch={() => ({})} /> |
||||
|
</div> |
||||
|
); |
||||
|
|
||||
|
const paginationProps = { |
||||
|
showSizeChanger: true, |
||||
|
showQuickJumper: true, |
||||
|
pageSize: 5, |
||||
|
total: 50, |
||||
|
}; |
||||
|
|
||||
|
const menu = ( |
||||
|
<Menu> |
||||
|
<Menu.Item> |
||||
|
<a>编辑</a> |
||||
|
</Menu.Item> |
||||
|
<Menu.Item> |
||||
|
<a>删除</a> |
||||
|
</Menu.Item> |
||||
|
</Menu> |
||||
|
); |
||||
|
|
||||
|
const MoreBtn = () => ( |
||||
|
<Dropdown overlay={menu}> |
||||
|
<a> |
||||
|
更多 <Icon type="down" /> |
||||
|
</a> |
||||
|
</Dropdown> |
||||
|
); |
||||
|
|
||||
|
return ( |
||||
|
<PageHeaderLayout> |
||||
|
<div className={styles.standardList}> |
||||
|
<Card bordered={false}> |
||||
|
<Row> |
||||
|
<Col sm={8} xs={24}> |
||||
|
<Info title="我的待办" value="8个任务" bordered /> |
||||
|
</Col> |
||||
|
<Col sm={8} xs={24}> |
||||
|
<Info title="本周任务平均处理时间" value="32分钟" bordered /> |
||||
|
</Col> |
||||
|
<Col sm={8} xs={24}> |
||||
|
<Info title="本周完成任务数" value="24个任务" /> |
||||
|
</Col> |
||||
|
</Row> |
||||
|
</Card> |
||||
|
|
||||
|
<Card |
||||
|
className={styles.listCard} |
||||
|
bordered={false} |
||||
|
title="标准列表" |
||||
|
style={{ marginTop: 24 }} |
||||
|
bodyStyle={{ padding: '0 32px 40px 32px' }} |
||||
|
extra={extraContent} |
||||
|
> |
||||
|
<Button type="dashed" style={{ width: '100%', marginBottom: 8 }} icon="plus"> |
||||
|
添加 |
||||
|
</Button> |
||||
|
<List |
||||
|
size="large" |
||||
|
rowKey="id" |
||||
|
loading={loading} |
||||
|
pagination={paginationProps} |
||||
|
dataSource={list} |
||||
|
renderItem={item => ( |
||||
|
<List.Item actions={[<a>编辑</a>, <MoreBtn />]}> |
||||
|
<List.Item.Meta |
||||
|
avatar={<Avatar src={item.logo} shape="square" size="large" />} |
||||
|
title={<a href={item.href}>{item.title}</a>} |
||||
|
description={item.subDescription} |
||||
|
/> |
||||
|
<ListContent data={item} /> |
||||
|
</List.Item> |
||||
|
)} |
||||
|
/> |
||||
|
</Card> |
||||
|
</div> |
||||
|
</PageHeaderLayout> |
||||
|
); |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue