未验证 提交 1a594a46 编写于 作者: X xrk 提交者: GitHub

chore: merge master into feature (#26998)

...@@ -23,7 +23,7 @@ And 4 other properties additionally. ...@@ -23,7 +23,7 @@ And 4 other properties additionally.
- `danger`: used for actions of risk, like deletion or authorization. - `danger`: used for actions of risk, like deletion or authorization.
- `ghost`: used in situations with complex background, home pages usually. - `ghost`: used in situations with complex background, home pages usually.
- `disabled`: when actions is not available. - `disabled`: when actions are not available.
- `loading`: add loading spinner in button, avoiding multiple submits too. - `loading`: add loading spinner in button, avoiding multiple submits too.
## API ## API
......
import * as React from 'react'; import * as React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import { ConfigContext } from '../config-provider';
import LocaleReceiver from '../locale-provider/LocaleReceiver'; import LocaleReceiver from '../locale-provider/LocaleReceiver';
import DefaultEmptyImg from './empty'; import DefaultEmptyImg from './empty';
import SimpleEmptyImg from './simple'; import SimpleEmptyImg from './simple';
...@@ -30,59 +30,55 @@ interface EmptyType extends React.FC<EmptyProps> { ...@@ -30,59 +30,55 @@ interface EmptyType extends React.FC<EmptyProps> {
PRESENTED_IMAGE_SIMPLE: React.ReactNode; PRESENTED_IMAGE_SIMPLE: React.ReactNode;
} }
const Empty: EmptyType = (props: EmptyProps) => ( const Empty: EmptyType = ({
<ConfigConsumer> className,
{({ getPrefixCls, direction }: ConfigConsumerProps) => { prefixCls: customizePrefixCls,
const { image = defaultEmptyImg,
className, description,
prefixCls: customizePrefixCls, children,
image = defaultEmptyImg, imageStyle,
description, ...restProps
children, }) => {
imageStyle, const { getPrefixCls, direction } = React.useContext(ConfigContext);
...restProps
} = props;
return ( return (
<LocaleReceiver componentName="Empty"> <LocaleReceiver componentName="Empty">
{(locale: TransferLocale) => { {(locale: TransferLocale) => {
const prefixCls = getPrefixCls('empty', customizePrefixCls); const prefixCls = getPrefixCls('empty', customizePrefixCls);
const des = typeof description !== 'undefined' ? description : locale.description; const des = typeof description !== 'undefined' ? description : locale.description;
const alt = typeof des === 'string' ? des : 'empty'; const alt = typeof des === 'string' ? des : 'empty';
let imageNode: React.ReactNode = null; let imageNode: React.ReactNode = null;
if (typeof image === 'string') { if (typeof image === 'string') {
imageNode = <img alt={alt} src={image} />; imageNode = <img alt={alt} src={image} />;
} else { } else {
imageNode = image; imageNode = image;
} }
return ( return (
<div <div
className={classNames( className={classNames(
prefixCls, prefixCls,
{ {
[`${prefixCls}-normal`]: image === simpleEmptyImg, [`${prefixCls}-normal`]: image === simpleEmptyImg,
[`${prefixCls}-rtl`]: direction === 'rtl', [`${prefixCls}-rtl`]: direction === 'rtl',
}, },
className, className,
)} )}
{...restProps} {...restProps}
> >
<div className={`${prefixCls}-image`} style={imageStyle}> <div className={`${prefixCls}-image`} style={imageStyle}>
{imageNode} {imageNode}
</div> </div>
{des && <p className={`${prefixCls}-description`}>{des}</p>} {des && <p className={`${prefixCls}-description`}>{des}</p>}
{children && <div className={`${prefixCls}-footer`}>{children}</div>} {children && <div className={`${prefixCls}-footer`}>{children}</div>}
</div> </div>
); );
}} }}
</LocaleReceiver> </LocaleReceiver>
); );
}} };
</ConfigConsumer>
);
Empty.PRESENTED_IMAGE_DEFAULT = defaultEmptyImg; Empty.PRESENTED_IMAGE_DEFAULT = defaultEmptyImg;
Empty.PRESENTED_IMAGE_SIMPLE = simpleEmptyImg; Empty.PRESENTED_IMAGE_SIMPLE = simpleEmptyImg;
......
...@@ -26,38 +26,48 @@ exports[`renders ./components/image/demo/fallback.md correctly 1`] = ` ...@@ -26,38 +26,48 @@ exports[`renders ./components/image/demo/fallback.md correctly 1`] = `
`; `;
exports[`renders ./components/image/demo/placeholder.md correctly 1`] = ` exports[`renders ./components/image/demo/placeholder.md correctly 1`] = `
Array [ <div
class="ant-space ant-space-horizontal ant-space-align-center"
>
<div <div
class="ant-image" class="ant-space-item"
style="width:200px" style="margin-right:12px"
> >
<img
class="ant-image-img"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?undefined"
/>
<div <div
aria-hidden="true" class="ant-image"
class="ant-image-placeholder" style="width:200px"
> >
<img
class="ant-image-img"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?undefined"
/>
<div <div
class="ant-image" aria-hidden="true"
style="width:200px" class="ant-image-placeholder"
> >
<img <div
class="ant-image-img" class="ant-image"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200" style="width:200px"
/> >
<img
class="ant-image-img"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200"
/>
</div>
</div> </div>
</div> </div>
</div>, </div>
<button <div
class="ant-btn ant-btn-primary" class="ant-space-item"
style="margin-left:10px"
type="button"
> >
<span> <button
Reload class="ant-btn ant-btn-primary"
</span> type="button"
</button>, >
] <span>
Reload
</span>
</button>
</div>
</div>
`; `;
...@@ -15,12 +15,12 @@ Progressive when large image loading. ...@@ -15,12 +15,12 @@ Progressive when large image loading.
```jsx ```jsx
import React from 'react'; import React from 'react';
import { Image, Button } from 'antd'; import { Image, Button, Space } from 'antd';
function ImageDemo() { function ImageDemo() {
const [random, setRandom] = React.useState(); const [random, setRandom] = React.useState();
return ( return (
<> <Space size={12}>
<Image <Image
width={200} width={200}
src={`https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?${random}`} src={`https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?${random}`}
...@@ -33,16 +33,13 @@ function ImageDemo() { ...@@ -33,16 +33,13 @@ function ImageDemo() {
/> />
<Button <Button
type="primary" type="primary"
style={{
marginLeft: 10,
}}
onClick={() => { onClick={() => {
setRandom(Date.now()); setRandom(Date.now());
}} }}
> >
Reload Reload
</Button> </Button>
</> </Space>
); );
} }
......
...@@ -58,7 +58,7 @@ Input 的其他属性和 React 自带的 [input](https://facebook.github.io/reac ...@@ -58,7 +58,7 @@ Input 的其他属性和 React 自带的 [input](https://facebook.github.io/reac
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| enterButton | 是否有确认按钮,可设为按钮文字。该属性会与 `addonAfter` 冲突。 | boolean \| ReactNode | false | | enterButton | 是否有确认按钮,可设为按钮文字。该属性会与 `addonAfter` 冲突。 | boolean \| ReactNode | false |
| onSearch | 点击搜索或按下回车键时的回调 | function(value, event) | - | | onSearch | 点击搜索图标、清除图标,或按下回车键时的回调 | function(value, event) | - |
| loading | 搜索 loading | boolean | false | | loading | 搜索 loading | boolean | false |
其余属性和 Input 一致。 其余属性和 Input 一致。
......
...@@ -38,9 +38,9 @@ ...@@ -38,9 +38,9 @@
} }
& > li:first-child { & > li:first-child {
.@{list-prefix-cls}-rtl & { .@{list-prefix-cls}.@{list-prefix-cls}-rtl & {
padding-right: 0; padding-right: 0;
padding-left: @padding-xs; padding-left: @padding-md;
} }
} }
......
...@@ -40,6 +40,44 @@ describe('Slider', () => { ...@@ -40,6 +40,44 @@ describe('Slider', () => {
expect(wrapper.find('.ant-tooltip-content').length).toBe(0); expect(wrapper.find('.ant-tooltip-content').length).toBe(0);
}); });
it('when step is null, thumb can only be slided to the specific mark', () => {
const intentionallyWrongValue = 40;
const marks = {
0: '0',
48: '48',
100: '100',
};
const wrapper = mount(
<Slider marks={marks} defaultValue={intentionallyWrongValue} step={null} tooltipVisible />,
);
expect(wrapper.find('.ant-slider-handle').get(0).props).toHaveProperty('value', 48);
});
it('when step is not null, thumb can be slided to the multiples of step', () => {
const marks = {
0: '0',
48: '48',
100: '100',
};
const wrapper = mount(<Slider marks={marks} defaultValue={49} step={1} tooltipVisible />);
expect(wrapper.find('.ant-slider-handle').get(0).props).toHaveProperty('value', 49);
});
it('when step is undefined, thumb can be slided to the multiples of step', () => {
const marks = {
0: '0',
48: '48',
100: '100',
};
const wrapper = mount(
<Slider marks={marks} defaultValue={49} step={undefined} tooltipVisible />,
);
expect(wrapper.find('.ant-slider-handle').get(0).props).toHaveProperty('value', 49);
});
it('should render in RTL direction', () => { it('should render in RTL direction', () => {
const wrapper = mount( const wrapper = mount(
<ConfigProvider direction="rtl"> <ConfigProvider direction="rtl">
...@@ -70,4 +108,9 @@ describe('Slider', () => { ...@@ -70,4 +108,9 @@ describe('Slider', () => {
mount(<Slider value={value} tooltipVisible />); mount(<Slider value={value} tooltipVisible />);
}); });
}); });
it('step should not crash with undefined value', () => {
[undefined, null].forEach(value => {
mount(<Slider step={value} tooltipVisible />);
});
});
}); });
...@@ -29,4 +29,21 @@ describe('Slider.typescript', () => { ...@@ -29,4 +29,21 @@ describe('Slider.typescript', () => {
); );
expect(result).toBeTruthy(); expect(result).toBeTruthy();
}); });
it('step can be null value', () => {
const value = 0;
function onChange(v: number) {
return v;
}
const result = (
<Slider
defaultValue={value}
value={value}
onChange={onChange}
onAfterChange={onChange}
step={null}
/>
);
expect(result).toBeTruthy();
});
}); });
...@@ -32,7 +32,7 @@ export interface SliderBaseProps { ...@@ -32,7 +32,7 @@ export interface SliderBaseProps {
reverse?: boolean; reverse?: boolean;
min?: number; min?: number;
max?: number; max?: number;
step?: number; step?: null | number;
marks?: SliderMarks; marks?: SliderMarks;
dots?: boolean; dots?: boolean;
included?: boolean; included?: boolean;
...@@ -47,6 +47,7 @@ export interface SliderBaseProps { ...@@ -47,6 +47,7 @@ export interface SliderBaseProps {
tooltipVisible?: boolean; tooltipVisible?: boolean;
tooltipPlacement?: TooltipPlacement; tooltipPlacement?: TooltipPlacement;
getTooltipPopupContainer?: (triggerNode: HTMLElement) => HTMLElement; getTooltipPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
autoFocus?: boolean;
} }
export interface SliderSingleProps extends SliderBaseProps { export interface SliderSingleProps extends SliderBaseProps {
...@@ -143,6 +144,7 @@ const Slider = React.forwardRef<unknown, SliderSingleProps | SliderRangeProps>( ...@@ -143,6 +144,7 @@ const Slider = React.forwardRef<unknown, SliderSingleProps | SliderRangeProps>(
return ( return (
<RcRange <RcRange
{...(restProps as SliderRangeProps)} {...(restProps as SliderRangeProps)}
step={restProps.step!}
className={cls} className={cls}
ref={ref} ref={ref}
handle={(info: HandleGeneratorInfo) => handle={(info: HandleGeneratorInfo) =>
...@@ -159,6 +161,7 @@ const Slider = React.forwardRef<unknown, SliderSingleProps | SliderRangeProps>( ...@@ -159,6 +161,7 @@ const Slider = React.forwardRef<unknown, SliderSingleProps | SliderRangeProps>(
return ( return (
<RcSlider <RcSlider
{...(restProps as SliderSingleProps)} {...(restProps as SliderSingleProps)}
step={restProps.step!}
className={cls} className={cls}
ref={ref} ref={ref}
handle={(info: HandleGeneratorInfo) => handle={(info: HandleGeneratorInfo) =>
......
...@@ -1519,8 +1519,7 @@ Array [ ...@@ -1519,8 +1519,7 @@ Array [
class="ant-tabs-extra-content" class="ant-tabs-extra-content"
> >
<button <button
class="ant-btn" class="ant-btn tabs-extra-demo-button"
style="margin-right:15px"
type="button" type="button"
> >
<span> <span>
......
...@@ -23,7 +23,7 @@ const CheckboxGroup = Checkbox.Group; ...@@ -23,7 +23,7 @@ const CheckboxGroup = Checkbox.Group;
const operations = <Button>Extra Action</Button>; const operations = <Button>Extra Action</Button>;
const OperationsSlot = { const OperationsSlot = {
left: <Button style={{ marginRight: 15 }}>Left Extra Action</Button>, left: <Button className="tabs-extra-demo-button">Left Extra Action</Button>,
right: <Button>Right Extra Action</Button>, right: <Button>Right Extra Action</Button>,
}; };
...@@ -85,3 +85,14 @@ const Demo = () => { ...@@ -85,3 +85,14 @@ const Demo = () => {
ReactDOM.render(<Demo />, mountNode); ReactDOM.render(<Demo />, mountNode);
``` ```
```css
.tabs-extra-demo-button {
margin-right: 16px;
}
.ant-row-rtl .tabs-extra-demo-button {
margin-right: 0;
margin-left: 16px;
}
```
...@@ -642,10 +642,17 @@ Array [ ...@@ -642,10 +642,17 @@ Array [
exports[`renders ./components/tag/demo/status.md correctly 1`] = ` exports[`renders ./components/tag/demo/status.md correctly 1`] = `
Array [ Array [
<div> <div
<h4> class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
role="separator"
>
<span
class="ant-divider-inner-text"
>
Without icon Without icon
</h4> </span>
</div>,
<div>
<span <span
class="ant-tag ant-tag-success" class="ant-tag ant-tag-success"
> >
...@@ -672,10 +679,17 @@ Array [ ...@@ -672,10 +679,17 @@ Array [
default default
</span> </span>
</div>, </div>,
<div> <div
<h4> class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
role="separator"
>
<span
class="ant-divider-inner-text"
>
With icon With icon
</h4> </span>
</div>,
<div>
<span <span
class="ant-tag ant-tag-success" class="ant-tag ant-tag-success"
> >
......
...@@ -14,7 +14,7 @@ title: ...@@ -14,7 +14,7 @@ title:
We preset five different colors, you can set color property such as `success`,`processing`,`error`,`default` and `warning` to indicate specific status. We preset five different colors, you can set color property such as `success`,`processing`,`error`,`default` and `warning` to indicate specific status.
```jsx ```jsx
import { Tag } from 'antd'; import { Tag, Divider } from 'antd';
import { import {
CheckCircleOutlined, CheckCircleOutlined,
SyncOutlined, SyncOutlined,
...@@ -26,17 +26,16 @@ import { ...@@ -26,17 +26,16 @@ import {
ReactDOM.render( ReactDOM.render(
<> <>
<Divider orientation="left">Without icon</Divider>
<div> <div>
<h4>Without icon</h4>
<Tag color="success">success</Tag> <Tag color="success">success</Tag>
<Tag color="processing">processing</Tag> <Tag color="processing">processing</Tag>
<Tag color="error">error</Tag> <Tag color="error">error</Tag>
<Tag color="warning">warning</Tag> <Tag color="warning">warning</Tag>
<Tag color="default">default</Tag> <Tag color="default">default</Tag>
</div> </div>
<Divider orientation="left">With icon</Divider>
<div> <div>
<h4>With icon</h4>
<Tag icon={<CheckCircleOutlined />} color="success"> <Tag icon={<CheckCircleOutlined />} color="success">
success success
</Tag> </Tag>
......
...@@ -23,7 +23,7 @@ export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> { ...@@ -23,7 +23,7 @@ export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
closable?: boolean; closable?: boolean;
closeIcon?: React.ReactNode; closeIcon?: React.ReactNode;
visible?: boolean; visible?: boolean;
onClose?: Function; onClose?: (e: React.MouseEvent<HTMLElement>) => void;
style?: React.CSSProperties; style?: React.CSSProperties;
icon?: React.ReactNode; icon?: React.ReactNode;
} }
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
@tag-prefix-cls: ~'@{ant-prefix}-tag'; @tag-prefix-cls: ~'@{ant-prefix}-tag';
.@{tag-prefix-cls} { .@{tag-prefix-cls} {
&-rtl { &&-rtl {
margin-right: 0; margin-right: 0;
margin-left: 8px; margin-left: 8px;
direction: rtl; direction: rtl;
......
...@@ -53,6 +53,12 @@ ...@@ -53,6 +53,12 @@
} }
} }
&-pagination {
.@{transfer-prefix-cls}-rtl & {
text-align: left;
}
}
&-footer { &-footer {
.@{transfer-prefix-cls}-rtl & { .@{transfer-prefix-cls}-rtl & {
right: 0; right: 0;
......
...@@ -11,8 +11,7 @@ ...@@ -11,8 +11,7 @@
&&-select-picture-card { &&-select-picture-card {
.@{upload-prefix-cls}-rtl& { .@{upload-prefix-cls}-rtl& {
float: right; margin-right: auto;
margin-right: 0;
margin-left: 8px; margin-left: 8px;
} }
} }
...@@ -97,6 +96,10 @@ ...@@ -97,6 +96,10 @@
&-picture, &-picture,
&-picture-card { &-picture-card {
.@{upload-item}-info {
padding: 0;
}
.@{upload-item}-thumbnail { .@{upload-item}-thumbnail {
.@{upload-prefix-cls}-list-rtl& { .@{upload-prefix-cls}-list-rtl& {
right: 8px; right: 8px;
...@@ -136,7 +139,7 @@ ...@@ -136,7 +139,7 @@
.@{upload-item}-progress { .@{upload-item}-progress {
.@{upload-prefix-cls}-list-rtl& { .@{upload-prefix-cls}-list-rtl& {
padding-right: 56px; padding-right: 0;
padding-left: 0; padding-left: 0;
} }
} }
...@@ -152,15 +155,7 @@ ...@@ -152,15 +155,7 @@
&-picture-card { &-picture-card {
&-container { &-container {
.@{upload-prefix-cls}-list-rtl & { .@{upload-prefix-cls}-list-rtl & {
float: right; margin: 0 0 @margin-xs @margin-xs;
margin: 0 0 8px 8px;
}
}
.@{upload-item} {
.@{upload-prefix-cls}-list-rtl& {
float: right;
margin: 0 0 8px 8px;
} }
} }
...@@ -178,11 +173,5 @@ ...@@ -178,11 +173,5 @@
padding: 0; padding: 0;
} }
} }
.@{upload-item}-info {
.@{upload-prefix-cls}-list-rtl& {
padding: 0;
}
}
} }
} }
...@@ -36,8 +36,8 @@ The numerical value is used to indicate the measurement size, it can be used alo ...@@ -36,8 +36,8 @@ The numerical value is used to indicate the measurement size, it can be used alo
| Currency Symbol | How and When to Use | Example | | Currency Symbol | How and When to Use | Example |
| --- | --- | --- | | --- | --- | --- |
| Character | Take RMB as example, its character symbol is "¥", placed in front of the amount. | ¥123.00 | | Character | Take RMB as example, its character symbol is `¥`, placed in front of the amount. | ¥123.00 |
| Letter | Take RMB as example, it is recommended to use CNY, which is the international currency code. | CNY123.00 | | Letter | Take RMB as example, it is recommended to use `CNY`, which is the international currency code. | CNY123.00 |
Large amount: If an amount is large, "M/Mill." (abbreviation of million) and "B/Bill." (abbreviation of billion) can be used. Large amount: If an amount is large, "M/Mill." (abbreviation of million) and "B/Bill." (abbreviation of billion) can be used.
...@@ -53,16 +53,16 @@ We suggest the following formats: ...@@ -53,16 +53,16 @@ We suggest the following formats:
| Format | How and when to use | Examples | | Format | How and when to use | Examples |
| --- | --- | --- | | --- | --- | --- |
| Year, month, day | In China「YYYY-MM-DD」format is used by default. | `2019-12-08` | | Year, month, day | In China `YYYY-MM-DD` format is used by default. | 2019-12-08 |
| Terms | When a special term containing a date expressed with numbers,display a "." between the month and the day, and quotation marks should be added before and after the term. | `6.1 children's day` | | Terms | When a special term containing a date expressed with numbers,display a `.` between the month and the day, and quotation marks should be added before and after the term. | 6.1 children's day |
| Date range | Put "~" or "-" between the date or time range (space is required before and after). | `2018-12-08 ~ 2019-12-07` | | Date range | Put `~` or `-` between the date or time range (space is required before and after). | 2018-12-08 ~ 2019-12-07 |
**Time Format:** **Time Format:**
| Time System | How and when to use | Examples | | Time System | How and when to use | Examples |
| --- | --- | --- | | --- | --- | --- |
| 24-hour clock | The format is HH:MM:SS. Omit hours or second if not apply. Use the 24-hour clock by default. | `14:08:00` | | 24-hour clock | The format is `HH:MM:SS`. Omit hours or second if not apply. Use the 24-hour clock by default. | 14:08:00 |
| 12-hour clock | Use the format H:MM:SS AM/PM (or am/pm).  | `2:08:00 PM ~ 2:08:00 AM` | | 12-hour clock | Use the format `H:MM:SS AM/PM` (or am/pm).  | 2:08:00 PM ~ 2:08:00 AM |
**Standard format**: When put a date and a time together, show a space between them, e.g. "2019-12-08 06:00:00". **Standard format**: When put a date and a time together, show a space between them, e.g. "2019-12-08 06:00:00".
...@@ -75,8 +75,8 @@ To the users, the accuracy of time is not so important as the immediacy of the i ...@@ -75,8 +75,8 @@ To the users, the accuracy of time is not so important as the immediacy of the i
| Less than 1 minute | just now | | Less than 1 minute | just now |
| Less than 1 hour | N minutes ago | | Less than 1 hour | N minutes ago |
| Within 24 hours | N hours ago | | Within 24 hours | N hours ago |
| Longer than 24 hours | MM-DD HH:MM, e.g. "12-08 08:00" | | Longer than 24 hours | `MM-DD HH:MM`, e.g. "12-08 08:00" |
| Longer than one year | YYYY-MM-DD HH:MM,e.g. "2019-12-08 08:00" | | Longer than one year | `YYYY-MM-DD HH:MM`,e.g. "2019-12-08 08:00" |
### Data Redaction ### Data Redaction
...@@ -87,21 +87,21 @@ Data redaction refers to representing truncated data to protect sensitive privac ...@@ -87,21 +87,21 @@ Data redaction refers to representing truncated data to protect sensitive privac
<img class="preview-img good" align="right" alt="Do" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NJs8QYejQyEAAAAAAAAAAABkARQnAQ"> <img class="preview-img good" align="right" alt="Do" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NJs8QYejQyEAAAAAAAAAAABkARQnAQ">
<img class="preview-img bad" align="right" alt="Don't" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*JvI4T5SXvIYAAAAAAAAAAABkARQnAQ"> <img class="preview-img bad" align="right" alt="Don't" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*JvI4T5SXvIYAAAAAAAAAAABkARQnAQ">
Generally used for particularly important and sensitive information such as amount and time. All the numbers need to be hidden. And the data is replaced by "\*\*\*". Generally used for particularly important and sensitive information such as amount and time. All the numbers need to be hidden. And the data is replaced by `***`.
#### Partial Redaction #### Partial Redaction
Generally used for situations that require partial information for identification. In such cases, some part of the information is truncated, but the numerical digits of the numbers need to retain. The truncated data is replaced by "\*". Generally used for situations that require partial information for identification. In such cases, some part of the information is truncated, but the numerical digits of the numbers need to retain. The truncated data is replaced by `*`.
| Data Type | How and When to Use | Example | | Data Type | How and When to Use | Example |
| --- | --- | --- | | --- | --- | --- |
| Name | Two-character name: display the first character, followed by a "\*". | 仲\* | | Name | Two-character name: display the first character, followed by a `*`. | 仲\* |
| | Names with three characters or more: display the first character and the last character, replace the middle character(s) with "\*". | 仲\*<br />\*\*妮 | | | Names with three characters or more: display the first character and the last character, replace the middle character(s) with `*`. | 仲\*<br />\*\*妮 |
| Mobile number | Keep the first three and the last four digits of the mobile number. | 186\*\*\*\*1402 | | Mobile number | Keep the first three and the last four digits of the mobile number. | 186\*\*\*\*1402 |
| ID number | The Chinese citizenship number consists of six address codes, eight birthdate codes, three sequential codes and one check code.<br /><br />Redaction rules are classified into high, medium and low levels: <br />**High**: Show the first and last digits, and replace the others with `_`.<br />**Medium**: Show the first three and the last three. Replace the others with `_`.<br />**Low**: Show the first six and the last four. Replace the others with `*`. | High:<br />`6*************2`<br />Medium:<br />`213***********203`<br />Low:<br />`212912******2233` | | ID number | The Chinese citizenship number consists of six address codes, eight birthdate codes, three sequential codes and one check code.<br /><br />Redaction rules are classified into high, medium and low levels: <br />**High**: Show the first and last digits, and replace the others with `*`.<br />**Medium**: Show the first three and the last three. Replace the others with `*`.<br />**Low**: Show the first six and the last four. Replace the others with `*`. | 6\*\*\*\*\*\*\*\*\*\*\*\*\*2<br />213\*\*\*\*\*\*\*\*\*\*\*203<br />212912\*\*\*\*\*\*2233 |
| Address | Keep the provinces, cities and district information, followed by several "\*". | 浙江省杭州市 西湖区 \***\*\*\*\*** | | Address | Keep the provinces, cities and district information, followed by several `*`. | 浙江省杭州市 西湖区 \***\*\*\*\*** |
| Email | Keep the host name of the mail and the first three characters, indicate the rest information with "\*". | 123\***\*\*\*\*\*\***@163.com | | Email | Keep the host name of the mail and the first three characters, indicate the rest information with `*`. | 123\***\*\*\*\*\*\***@163.com |
| Bank card number | The bank card number consists of the issuing bank identification code (ranging from 6 to 12 digits), personal account identification (ranging from 6 to 12 digits), and a check code. <br /><br />Redaction rules are classified into high, medium and low levels: <br />**High**: Display the last four digits, and replace the others with `_`.<br />**Medium**: Display the first six and the last four digits, replace the others with `_`<br />**Low**: Display the first six and the last six digits, display the remaining digits with `*`. | \***\*\*\*\*\*\*\***1208<br />620121**\*\***1208<br />620121\*\*\*\*111208 | | Bank card number | The bank card number consists of the issuing bank identification code (ranging from 6 to 12 digits), personal account identification (ranging from 6 to 12 digits), and a check code. <br /><br />Redaction rules are classified into high, medium and low levels: <br />**High**: Display the last four digits, and replace the others with `*`.<br />**Medium**: Display the first six and the last four digits, replace the others with `*`<br />**Low**: Display the first six and the last six digits, display the remaining digits with `*`. | \*\*\*\*\*\*\*\*1208<br />620121\*\*1208<br />620121\*\*\*\*111208 |
### Data Status ### Data Status
......
...@@ -43,8 +43,8 @@ title: 数据格式 ...@@ -43,8 +43,8 @@ title: 数据格式
| 货币符号 | 如何使用及何时使用 | 例子 | | 货币符号 | 如何使用及何时使用 | 例子 |
| -------- | -------------------------------------------------------- | --------- | | -------- | -------------------------------------------------------- | --------- |
| 字符 | 以人民币为例,金额前带货币单位标志「¥」 | ¥123.00 | | 字符 | 以人民币为例,金额前带货币单位标志`¥` | ¥123.00 |
| 字母 | 以人民币为例,推荐使用 CNY,CNY 为国际上通用的货币代码。 | CNY123.00 | | 字母 | 以人民币为例,推荐使用 `CNY``CNY` 为国际上通用的货币代码。 | CNY123.00 |
<br /> <br />
...@@ -71,16 +71,16 @@ title: 数据格式 ...@@ -71,16 +71,16 @@ title: 数据格式
| 格式 | 如何使用及何时使用 | 例子 | | 格式 | 如何使用及何时使用 | 例子 |
| --- | --- | --- | | --- | --- | --- |
| 年、月、日 | 中国默认使用「yyyy-mm-dd」格式。([其它国家参考链接)](https://zh.wikipedia.org/wiki/%E5%90%84%E5%9C%B0%E6%97%A5%E6%9C%9F%E5%92%8C%E6%97%B6%E9%97%B4%E8%A1%A8%E7%A4%BA%E6%B3%95)。 | 2019-12-08 | | 年、月、日 | 中国默认使用 `yyyy-mm-dd` 格式。([其它国家参考链接)](https://zh.wikipedia.org/wiki/%E5%90%84%E5%9C%B0%E6%97%A5%E6%9C%9F%E5%92%8C%E6%97%B6%E9%97%B4%E8%A1%A8%E7%A4%BA%E6%B3%95)。 | 2019-12-08 |
| 专用名词 | 含有月日的专用名词采用阿拉伯数字表示时,应采用间隔号「·」将月、日分开,并在数字前后加引号。 | “6.1 儿童节” | | 专用名词 | 含有月日的专用名词采用阿拉伯数字表示时,应采用间隔号 `·` 将月、日分开,并在数字前后加引号。 | 6.1 儿童节 |
| 日期范围 | 在日期或时间范围之间显示一个波浪号 (前后需要空格)。 | 2018-12-08 ~ 2019-12-07 | | 日期范围 | 在日期或时间范围之间显示一个波浪号 (前后需要空格)。 | 2018-12-08 ~ 2019-12-07 |
**时间格式**:默认使用二十四小时制: **时间格式**:默认使用二十四小时制:
| 时间制 | 如何使用及何时使用 | 例子 | | 时间制 | 如何使用及何时使用 | 例子 |
| ------------ | ------------------------------- | ------------------------ | | ------------ | ------------------------------- | ------------------------ |
| 二十四小时制 | 二十四小时时间格式  HH:mm:ss 。 | 14:08:00 | | 二十四小时制 | 二十四小时时间格式  `HH:mm:ss` 。 | 14:08:00 |
| 十二小时制 | 十二小时时间格式 h:mm:ss 。 | 2:08:00 PM \| 2:08:00 AM | | 十二小时制 | 十二小时时间格式 `h:mm:ss` 。 | 2:08:00 PM \| 2:08:00 AM |
**标准格式**:日期与时间连在一起时,两者之间用「空格」隔开,如“2019-12-08 06:00:00”。 **标准格式**:日期与时间连在一起时,两者之间用「空格」隔开,如“2019-12-08 06:00:00”。
...@@ -93,8 +93,8 @@ title: 数据格式 ...@@ -93,8 +93,8 @@ title: 数据格式
| 1 分钟以内的时间 | 刚刚 | | 1 分钟以内的时间 | 刚刚 |
| 1 小时以内的时间 | N 分钟前 | | 1 小时以内的时间 | N 分钟前 |
| 24 小时以内的时间 | N 小时前 | | 24 小时以内的时间 | N 小时前 |
| 24 小时以外的时间 | 用 mm-dd HH:mm 的形式表示,即「12-08 08:00」 | | 24 小时以外的时间 | 用 `mm-dd HH:mm` 的形式表示,即 12-08 08:00 |
| 超过一年的时间 | 用 yyyy-mm-dd HH:mm 的形式表示,即「2019-12-08 08:00」 | | 超过一年的时间 | 用 `yyyy-mm-dd HH:mm` 的形式表示,即 2019-12-08 08:00 |
### 数字脱敏 ### 数字脱敏
...@@ -105,21 +105,21 @@ title: 数据格式 ...@@ -105,21 +105,21 @@ title: 数据格式
<img class="preview-img good" align="right" alt="推荐示例" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NJs8QYejQyEAAAAAAAAAAABkARQnAQ"> <img class="preview-img good" align="right" alt="推荐示例" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NJs8QYejQyEAAAAAAAAAAABkARQnAQ">
<img class="preview-img bad" align="right" alt="不推荐示例" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*JvI4T5SXvIYAAAAAAAAAAABkARQnAQ"> <img class="preview-img bad" align="right" alt="不推荐示例" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*JvI4T5SXvIYAAAAAAAAAAABkARQnAQ">
一般用于金额、时间等特别重要敏感的信息,需要对所有数字进行脱敏。数据用一个\*\*\*代替。 一般用于金额、时间等特别重要敏感的信息,需要对所有数字进行脱敏。数据用一个 `***` 代替。
#### 部分脱敏 #### 部分脱敏
一般用于需要部分信息进行识别的状况,只需要对部分信息进行脱敏处理,但数字真实位数保留。数据脱敏部分用\*代替。 一般用于需要部分信息进行识别的状况,只需要对部分信息进行脱敏处理,但数字真实位数保留。数据脱敏部分用 `*` 代替。
| 脱敏类型 | 如何使用 | 例子 | | 脱敏类型 | 如何使用 | 例子 |
| --- | --- | --- | | --- | --- | --- |
| 姓名 | 两个字的姓名:显示第一个字符,后面的隐藏为\*。 | 仲\* | | 姓名 | 两个字的姓名:显示第一个字符,后面的隐藏为 `*`。 | 仲\* |
| | 三个字及三个字以上的姓名:显示第一个字符和最后一个字符,中间字符为\*。 | 仲\*<br />\*\*妮 | | | 三个字及三个字以上的姓名:显示第一个字符和最后一个字符,中间字符为 `*`。 | 仲\*<br />\*\*妮 |
| 手机号码 | 保留手机号码前 3 位与后 4 位。 | 186 \*\*\*\* 1402 | | 手机号码 | 保留手机号码前 3 位与后 4 位。 | 186 \*\*\*\* 1402 |
| 身份证号码 | 公民身份号码由六位地址码,八位出生日期码,三位顺序码和一位校验码组成。脱敏规则分为高、中、低级:<br />高级:保留前一位与后一位,其余「_」表示,仅能识别该人属于哪个地区。<br />中级:保留前三位与后三位,其余「_」表示,仅能识别该人的省市与是男是女。<br />低级:保留前六位与后四位,其余「\*表示,仅能识别该人的省市区与是男是女。 | 6\*\*\*\*\*\*\*\*\*\*\*\*\*2<br />213\*\*\*\*\*\*\*\*\*\*\*203<br />212912\*\*\*\*\*\*2233 | | 身份证号码 | 公民身份号码由六位地址码,八位出生日期码,三位顺序码和一位校验码组成。脱敏规则分为高、中、低级:<br />**高级**:保留前一位与后一位,其余 `*` 表示,仅能识别该人属于哪个地区。<br />**中级**:保留前三位与后三位,其余 `*` 表示,仅能识别该人的省市与是男是女。<br />**低级**:保留前六位与后四位,其余 `*` 表示,仅能识别该人的省市区与是男是女。 | 6\*\*\*\*\*\*\*\*\*\*\*\*\*2<br />213\*\*\*\*\*\*\*\*\*\*\*203<br />212912\*\*\*\*\*\*2233 |
| 联系地址 | 保留省市区,后面的用\*表述。 | 浙江省杭州市 西湖区 \***\*\*\*\*** | | 联系地址 | 保留省市区,后面的用 `*` 表述。 | 浙江省杭州市 西湖区 \***\*\*\*\*** |
| 邮箱 | 保留邮箱主机名与前三位字符,其余\*表示。 | 123\***\*\*\*\*\*\***@163.com | | 邮箱 | 保留邮箱主机名与前三位字符,其余 `*` 表示。 | 123\***\*\*\*\*\*\***@163.com |
| 银行卡号码 | 银行卡号码由发卡行标识代码(六到十二位不等),个人账号标识(六到十二位不等),一位校验码组成。脱敏规则分为高、中、低级:高级:保留后四位,其余「_」表示,仅能识别部份个人账号标识。中级:保留前六位与后位,其余「_」表示,仅能识别发卡行与小部份个人账号标识。低级:保留前四位与后六位,其余「\*表示。仅能识别发卡行与大部份个人账号标识。 | \***\*\*\*\*\*\*\***1208<br />620121**\*\***1208<br />620121\*\*\*\*111208 | | 银行卡号码 | 银行卡号码由发卡行标识代码(六到十二位不等),个人账号标识(六到十二位不等),一位校验码组成。脱敏规则分为高、中、低级:<br />**高级**:保留后四位,其余 `*` 表示,仅能识别部份个人账号标识。<br />**中级**:保留前六位与后位,其余 `*` 表示,仅能识别发卡行与小部份个人账号标识。<br />**低级**:保留前四位与后六位,其余 `*` 表示。仅能识别发卡行与大部份个人账号标识。 | \***\*\*\*\*\*\*\***1208<br />620121**\*\***1208<br />620121\*\*\*\*111208 |
### 数据状态 ### 数据状态
......
...@@ -93,6 +93,10 @@ ...@@ -93,6 +93,10 @@
} }
} }
a[disabled] {
color: rgba(255, 255, 255, 0.25);
}
h1, h1,
h2, h2,
h3, h3,
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册