Commit 5b134797 authored by jim's avatar jim

merge master

parents 7eb045c6 7f704c4f
--- ---
order: 0 order: 0
title: Basic title:
zh-CN: 基本
en-US: Basic
--- ---
## zh-CN
基本描述列表。 基本描述列表。
## en-US
Basic DescriptionList.
````jsx ````jsx
import DescriptionList from 'ant-design-pro/lib/DescriptionList'; import DescriptionList from 'ant-design-pro/lib/DescriptionList';
......
--- ---
order: 1 order: 1
title: Vertical title:
zh-CN: 垂直型
en-US: Vertical
--- ---
## zh-CN
垂直布局。 垂直布局。
## en-US
Vertical layout.
````jsx ````jsx
import DescriptionList from 'ant-design-pro/lib/DescriptionList'; import DescriptionList from 'ant-design-pro/lib/DescriptionList';
......
---
title: DescriptionList
cols: 1
order: 4
---
Groups display multiple read-only fields, which are common to informational displays on detail pages.
## API
### DescriptionList
| Property | Description | Type | Default |
|----------|------------------------------------------|-------------|---------|
| layout | type of layout | Enum{'horizontal', 'vertical'} | 'horizontal' |
| col | specify the maximum number of columns to display, the final columns number is determined by col setting combined with [Responsive Rules](/components/DescriptionList#Responsive-Rules) | number(0 < col <= 4) | 3 |
| title | title | ReactNode | - |
| gutter | specify the distance between two items, unit is `px` | number | 32 |
| size | size of list | Enum{'large', 'small'} | - |
#### Responsive Rules
| Window Width | Columns Number |
|---------------------|---------------------------------------------|
| `≥768px` | `col` |
| `≥576px` | `col < 2 ? col : 2` |
| `<576px` | `1` |
### DescriptionList.Description
| Property | Description | Type | Default |
|----------|------------------------------------------|-------------|-------|
| term | item title | ReactNode | - |
--- ---
title: title: DescriptionList
en-US: DescriptionList
zh-CN: DescriptionList
subtitle: 描述列表 subtitle: 描述列表
cols: 1 cols: 1
order: 4 order: 4
...@@ -19,7 +17,7 @@ order: 4 ...@@ -19,7 +17,7 @@ order: 4
| col | 指定信息最多分几列展示,最终一行几列由 col 配置结合[响应式规则](/components/DescriptionList#响应式规则)决定 | number(0 < col <= 4) | 3 | | col | 指定信息最多分几列展示,最终一行几列由 col 配置结合[响应式规则](/components/DescriptionList#响应式规则)决定 | number(0 < col <= 4) | 3 |
| title | 列表标题 | ReactNode | - | | title | 列表标题 | ReactNode | - |
| gutter | 列表项间距,单位为 `px` | number | 32 | | gutter | 列表项间距,单位为 `px` | number | 32 |
| size | 列表型号,可以设置为 `large` `small` | Enum{'large', 'small'} | - | | size | 列表型号 | Enum{'large', 'small'} | - |
#### 响应式规则 #### 响应式规则
......
--- ---
order: 1 order: 1
title: 按照行数省略 title:
zh-CN: 按照行数省略
en-US: Truncate according to the number of rows
--- ---
## zh-CN
通过设置 `lines` 属性指定最大行数,如果超过这个行数的文本会自动截取。但是在这种模式下所有 `children` 将会被转换成纯文本。 通过设置 `lines` 属性指定最大行数,如果超过这个行数的文本会自动截取。但是在这种模式下所有 `children` 将会被转换成纯文本。
并且注意在这种模式下,外容器需要有指定的宽度(或设置自身宽度)。 并且注意在这种模式下,外容器需要有指定的宽度(或设置自身宽度)。
## en-US
`lines` attribute specifies the maximum number of rows where the text will automatically be truncated when exceeded. In this mode, all children will be converted to plain text.
Also note that, in this mode, the outer container needs to have a specified width (or set its own width).
````jsx ````jsx
import Ellipsis from 'ant-design-pro/lib/Ellipsis'; import Ellipsis from 'ant-design-pro/lib/Ellipsis';
......
--- ---
order: 0 order: 0
title: 按照字符数省略 title:
zh-CN: 按照字符数省略
en-US: Truncate according to the number of character
--- ---
## zh-CN
通过设置 `length` 属性指定文本最长长度,如果超过这个长度会自动截取。 通过设置 `length` 属性指定文本最长长度,如果超过这个长度会自动截取。
## en-US
`length` attribute specifies the maximum length where the text will automatically be truncated when exceeded.
````jsx ````jsx
import Ellipsis from 'ant-design-pro/lib/Ellipsis'; import Ellipsis from 'ant-design-pro/lib/Ellipsis';
......
---
title: Ellipsis
cols: 1
order: 10
---
When the text is too long, the Ellipsis automatically shortens it according to its length or the maximum number of lines.
## API
Property | Description | Type | Default
----|------|-----|------
tooltip | tooltip for showing the full text content when hovering over | boolean | -
length | maximum number of characters in the text before being truncated | number | -
lines | maximum number of rows in the text before being truncated | number | `1`
--- ---
title: title: Ellipsis
en-US: Ellipsis
zh-CN: Ellipsis
subtitle: 文本自动省略号 subtitle: 文本自动省略号
cols: 1 cols: 1
order: 10 order: 10
......
--- ---
order: 2 order: 2
title: 403 title:
zh-CN: 403
en-US: 403
--- ---
## zh-CN
403 页面,配合自定义操作。 403 页面,配合自定义操作。
## en-US
403 page with custom operations.
````jsx ````jsx
import Exception from 'ant-design-pro/lib/Exception'; import Exception from 'ant-design-pro/lib/Exception';
import { Button } from 'antd'; import { Button } from 'antd';
const actions = ( const actions = (
<div> <div>
<Button type="primary">回到首页</Button> <Button type="primary">Home</Button>
<Button>查看详情</Button> <Button>Detail</Button>
</div> </div>
); );
ReactDOM.render( ReactDOM.render(
......
--- ---
order: 0 order: 0
title: 404 title:
zh-CN: 404
en-US: 404
--- ---
## zh-CN
404 页面。 404 页面。
## en-US
404 page.
````jsx ````jsx
import Exception from 'ant-design-pro/lib/Exception'; import Exception from 'ant-design-pro/lib/Exception';
......
--- ---
order: 1 order: 1
title: 500 title:
zh-CN: 500
en-US: 500
--- ---
## zh-CN
500 页面。 500 页面。
## en-US
500 page.
````jsx ````jsx
import Exception from 'ant-design-pro/lib/Exception'; import Exception from 'ant-design-pro/lib/Exception';
......
---
title: Exception
cols: 1
order: 5
---
Exceptions page is used to provide feedback on specific abnormal state. Usually, it contains an explanation of the error status, and provides users with suggestions or operations, to prevent users from feeling lost and confused.
## API
Property | Description | Type | Default
---------|-------------|------|--------
type | type of exception, the corresponding default `title`, `desc`, `img` will be given if set, which can be overridden by explicit setting of `title`, `desc`, `img` | Enum {'403', '404', '500'} | -
title | title | ReactNode | -
desc | supplementary description | ReactNode | -
img | the url of background image | string | -
actions | suggested operations, a default 'Home' link will show if not set | ReactNode | -
linkElement | to specify the element of link | string\|ReactElement | 'a'
\ No newline at end of file
--- ---
title: title: Exception
en-US: Exception
zh-CN: Exception
subtitle: 异常 subtitle: 异常
cols: 1 cols: 1
order: 5 order: 5
...@@ -18,4 +16,4 @@ order: 5 ...@@ -18,4 +16,4 @@ order: 5
| desc | 补充描述 | ReactNode | - | | desc | 补充描述 | ReactNode | - |
| img | 背景图片地址 | string | - | | img | 背景图片地址 | string | - |
| actions | 建议操作,配置此属性时默认的『返回首页』按钮不生效 | ReactNode | - | | actions | 建议操作,配置此属性时默认的『返回首页』按钮不生效 | ReactNode | - |
| linkElement | 定义链接的元素,默认为 `a` | string\|ReactElement | - | | linkElement | 定义链接的元素 | string\|ReactElement | 'a' |
...@@ -8,7 +8,6 @@ import LoginSubmit from './LoginSubmit'; ...@@ -8,7 +8,6 @@ import LoginSubmit from './LoginSubmit';
import styles from './index.less'; import styles from './index.less';
import LoginContext from './loginContext'; import LoginContext from './loginContext';
@Form.create()
class Login extends Component { class Login extends Component {
static defaultProps = { static defaultProps = {
className: '', className: '',
...@@ -117,4 +116,4 @@ Object.keys(LoginItem).forEach(item => { ...@@ -117,4 +116,4 @@ Object.keys(LoginItem).forEach(item => {
Login[item] = LoginItem[item]; Login[item] = LoginItem[item];
}); });
export default Login; export default Form.create()(Login);
--- ---
order: 0 order: 0
title: 演示 title:
zh-CN: 演示
en-US: Demo
--- ---
## zh-CN
各种数据文案的展现方式。 各种数据文案的展现方式。
## en-US
Used for presenting various numerical data.
````jsx ````jsx
import NumberInfo from 'ant-design-pro/lib/NumberInfo'; import NumberInfo from 'ant-design-pro/lib/NumberInfo';
import numeral from 'numeral'; import numeral from 'numeral';
...@@ -12,7 +20,7 @@ import numeral from 'numeral'; ...@@ -12,7 +20,7 @@ import numeral from 'numeral';
ReactDOM.render( ReactDOM.render(
<div> <div>
<NumberInfo <NumberInfo
subTitle={<span>本周访问</span>} subTitle={<span>Visits this week</span>}
total={numeral(12321).format('0,0')} total={numeral(12321).format('0,0')}
status="up" status="up"
subTotal={17.1} subTotal={17.1}
......
---
title: NumberInfo
cols: 1
order: 10
---
Often used in data cards for highlighting the business data.
## API
Property | Description | Type | Default
----|------|-----|------
title | title | ReactNode\|string | -
subTitle | subtitle | ReactNode\|string | -
total | total amount | ReactNode\|string | -
subTotal | total amount of additional information | ReactNode\|string | -
status | increase state | 'up \| down' | -
theme | state style | string | 'light'
gap | set the spacing (pixels) between numbers and descriptions | number | 8
--- ---
title: title: NumberInfo
en-US: NumberInfo
zh-CN: NumberInfo
subtitle: 数据文本 subtitle: 数据文本
cols: 1 cols: 1
order: 10 order: 10
...@@ -19,4 +17,4 @@ total | 总量 | ReactNode\|string | - ...@@ -19,4 +17,4 @@ total | 总量 | ReactNode\|string | -
subTotal | 子总量 | ReactNode\|string | - subTotal | 子总量 | ReactNode\|string | -
status | 增加状态 | 'up \| down' | - status | 增加状态 | 'up \| down' | -
theme | 状态样式 | string | 'light' theme | 状态样式 | string | 'light'
gap | 设置数字和描述直接的间距(像素) | number | 8 gap | 设置数字和描述之间的间距(像素)| number | 8
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { Spin } from 'antd'; import { Spin } from 'antd';
import { enquireScreen } from 'enquire-js';
import { connect } from 'dva'; import { connect } from 'dva';
import { enquireScreen, unenquireScreen } from 'enquire-js';
import BasicLayout from './BasicLayout'; import BasicLayout from './BasicLayout';
import { getMenuData } from '../common/menu'; import { getMenuData } from '../common/menu';
/** /**
* 根据菜单取得重定向地址. * 根据菜单取得重定向地址.
*/ */
...@@ -12,14 +12,14 @@ import { getMenuData } from '../common/menu'; ...@@ -12,14 +12,14 @@ import { getMenuData } from '../common/menu';
const MenuData = getMenuData(); const MenuData = getMenuData();
const getRedirectData = () => { const getRedirectData = () => {
const redirectData = []; const redirectData = [];
const getRedirect = (item) => { const getRedirect = item => {
if (item && item.children) { if (item && item.children) {
if (item.children[0] && item.children[0].path) { if (item.children[0] && item.children[0].path) {
redirectData.push({ redirectData.push({
from: `${item.path}`, from: `${item.path}`,
to: `${item.children[0].path}`, to: `${item.children[0].path}`,
}); });
item.children.forEach((children) => { item.children.forEach(children => {
getRedirect(children); getRedirect(children);
}); });
} }
...@@ -35,8 +35,9 @@ class LoadingPage extends PureComponent { ...@@ -35,8 +35,9 @@ class LoadingPage extends PureComponent {
loading: true, loading: true,
isMobile: false, isMobile: false,
}; };
componentDidMount() { componentDidMount() {
enquireScreen((mobile) => { this.enquireHandler = enquireScreen(mobile => {
this.setState({ this.setState({
isMobile: mobile, isMobile: mobile,
}); });
...@@ -48,7 +49,7 @@ class LoadingPage extends PureComponent { ...@@ -48,7 +49,7 @@ class LoadingPage extends PureComponent {
const settingString = urlParams.searchParams.get('setting'); const settingString = urlParams.searchParams.get('setting');
if (settingString) { if (settingString) {
const setting = {}; const setting = {};
settingString.split(';').forEach((keyValue) => { settingString.split(';').forEach(keyValue => {
const [key, value] = keyValue.split(':'); const [key, value] = keyValue.split(':');
setting[key] = value; setting[key] = value;
}); });
...@@ -59,6 +60,9 @@ class LoadingPage extends PureComponent { ...@@ -59,6 +60,9 @@ class LoadingPage extends PureComponent {
} }
this.hideLoading(); this.hideLoading();
} }
componentWillUnmount() {
unenquireScreen(this.enquireHandler);
}
hideLoading() { hideLoading() {
this.setState({ this.setState({
loading: false, loading: false,
......
...@@ -59,7 +59,6 @@ export default function request(url, options) { ...@@ -59,7 +59,6 @@ export default function request(url, options) {
// newOptions.body is FormData // newOptions.body is FormData
newOptions.headers = { newOptions.headers = {
Accept: 'application/json', Accept: 'application/json',
'Content-Type': 'multipart/form-data',
...newOptions.headers, ...newOptions.headers,
}; };
} }
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment