mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-15 13:38:29 +02:00
site: add BehaviorPattern for en page (#54254)
* site: add BehaviorPattern for en page * site: add BehaviorPattern for en page * fix: fix
This commit is contained in:
lijianan
GitHub
parent
05926aae76
commit
84ce358d10
20 changed files with 858 additions and 421 deletions
|
|
@ -6,9 +6,7 @@ import useLocale from '../../../hooks/useLocale';
|
|||
|
||||
const dataTransform = (data: BehaviorMapItem) => {
|
||||
const changeData = (d: any, level = 0) => {
|
||||
const clonedData: any = {
|
||||
...d,
|
||||
};
|
||||
const clonedData: any = { ...d };
|
||||
switch (level) {
|
||||
case 0:
|
||||
clonedData.type = 'behavior-start-node';
|
||||
|
|
|
|||
|
|
@ -6,17 +6,32 @@ import { useRouteMeta } from 'dumi';
|
|||
import type { IContentTabsProps } from 'dumi/theme-default/slots/ContentTabs';
|
||||
import type { TabsProps } from 'rc-tabs';
|
||||
|
||||
const titleMap: Record<string, ReactNode> = {
|
||||
design: '设计',
|
||||
};
|
||||
import useLocale from '../../../hooks/useLocale';
|
||||
|
||||
const iconMap: Record<string, ReactNode> = {
|
||||
design: <SkinOutlined />,
|
||||
};
|
||||
|
||||
const locales = {
|
||||
cn: {
|
||||
development: '开发',
|
||||
design: '设计',
|
||||
},
|
||||
en: {
|
||||
development: 'Development',
|
||||
design: 'Design',
|
||||
},
|
||||
};
|
||||
|
||||
const ContentTabs: FC<IContentTabsProps> = ({ tabs, tabKey, onChange }) => {
|
||||
const meta = useRouteMeta();
|
||||
|
||||
const [locale] = useLocale(locales);
|
||||
|
||||
const titleMap: Record<string, ReactNode> = {
|
||||
design: locale.design,
|
||||
};
|
||||
|
||||
if (!meta.tabs) {
|
||||
return null;
|
||||
}
|
||||
|
|
@ -24,7 +39,7 @@ const ContentTabs: FC<IContentTabsProps> = ({ tabs, tabKey, onChange }) => {
|
|||
const items: TabsProps['items'] = [
|
||||
{
|
||||
key: 'development',
|
||||
label: '开发',
|
||||
label: locale.development,
|
||||
icon: <CodeOutlined />,
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,39 +1,60 @@
|
|||
import React from 'react';
|
||||
|
||||
import useLocale from '../../../.dumi/hooks/useLocale';
|
||||
import BehaviorMap from '../../../.dumi/theme/common/BehaviorMap';
|
||||
|
||||
const BehaviorPattern: React.FC = () => (
|
||||
<BehaviorMap
|
||||
data={{
|
||||
id: '200000004',
|
||||
label: '了解页面/模块内需要关注的提示',
|
||||
children: [
|
||||
{
|
||||
id: '500000061',
|
||||
label: '了解提示信息',
|
||||
targetType: 'mvp',
|
||||
children: [
|
||||
{
|
||||
id: '707000085',
|
||||
label: '了解提示内容',
|
||||
link: 'alert-index-tab-design-demo-content',
|
||||
},
|
||||
{
|
||||
id: '707000086',
|
||||
label: '了解提示类型',
|
||||
link: 'alert-index-tab-design-demo-type',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '200000005',
|
||||
label: '针对提示进行操作',
|
||||
targetType: 'extension',
|
||||
link: 'alert-index-tab-design-demo-action',
|
||||
},
|
||||
],
|
||||
}}
|
||||
/>
|
||||
);
|
||||
const locales = {
|
||||
cn: {
|
||||
title: '了解页面/模块内需要关注的提示',
|
||||
understandAlertInfo: '了解提示信息',
|
||||
understandAlertContent: '了解提示内容',
|
||||
understandAlertType: '了解提示类型',
|
||||
performAlertOperations: '针对提示进行操作',
|
||||
},
|
||||
en: {
|
||||
title: 'Understand alerts that need attention within pages/modules',
|
||||
understandAlertInfo: 'Understand Alert Information',
|
||||
understandAlertContent: 'Understand Alert Content',
|
||||
understandAlertType: 'Understand Alert Type',
|
||||
performAlertOperations: 'Perform Operations on Alerts',
|
||||
},
|
||||
};
|
||||
|
||||
const BehaviorPattern: React.FC = () => {
|
||||
const [locale] = useLocale(locales);
|
||||
return (
|
||||
<BehaviorMap
|
||||
data={{
|
||||
id: '200000004',
|
||||
label: locale.title,
|
||||
children: [
|
||||
{
|
||||
id: '500000061',
|
||||
label: locale.understandAlertInfo,
|
||||
targetType: 'mvp',
|
||||
children: [
|
||||
{
|
||||
id: '707000085',
|
||||
label: locale.understandAlertContent,
|
||||
link: 'alert-index-tab-design-demo-content',
|
||||
},
|
||||
{
|
||||
id: '707000086',
|
||||
label: locale.understandAlertType,
|
||||
link: 'alert-index-tab-design-demo-type',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '200000005',
|
||||
label: locale.performAlertOperations,
|
||||
targetType: 'extension',
|
||||
link: 'alert-index-tab-design-demo-action',
|
||||
},
|
||||
],
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default BehaviorPattern;
|
||||
|
|
|
|||
|
|
@ -1,34 +1,81 @@
|
|||
import React from 'react';
|
||||
import { Alert, Flex, Typography } from 'antd';
|
||||
|
||||
const Demo = () => {
|
||||
import useLocale from '../../../../.dumi/hooks/useLocale';
|
||||
|
||||
const locales = {
|
||||
cn: {
|
||||
closeAlertTitle: '关闭提示',
|
||||
welcomeMessage: '你好！欢迎使用专业版，你可以根据自身需求添加业务模块。',
|
||||
helpTitle: '帮助信息',
|
||||
helpDescription:
|
||||
'你好，由于你的良好信用，我们决定赠送你三个月产品会员，欲了解会员特权与活动请进首页会员专区查看。',
|
||||
expandCollapseTitle: '展开/收起提示',
|
||||
longMessage:
|
||||
'提示信息超过2行时，可以使用将部分信息折叠，以减少空间占用。提示信息超过2行时，可以使用将部分信息折叠，以减少空间占用。提示信息超过2行时，可以使用将部分信息折叠，以减少空间占用。提示信息超过2行时，可以使用将部分信息折叠，以减少空间占用。提示信息超过2行时，可以使用将部分信息折叠，以减少空间占用。',
|
||||
collapse: '收起',
|
||||
expandMore: '展开更多',
|
||||
otherActionsTitle: '执行其他操作',
|
||||
singleLineMessage: '提示信息不超过一行时，按钮放在信息右侧。',
|
||||
relatedAction: '相关操作',
|
||||
multiLineMessage:
|
||||
'提示信息超过一行，此时按钮按照从上至下的视觉流，放置在信息区下方，这样浏览起来更流畅，即先阅读提示信息，再根据信息判断执行什么操作。',
|
||||
relatedAction1: '相关操作1',
|
||||
relatedAction2: '相关操作2',
|
||||
alertTitle: '提示标题',
|
||||
guidanceText:
|
||||
'建议统一使用 Link Button，明确可点击的同时，整体视觉也更和谐；当提示信息不超一行时，按钮放在信息右侧；当提示信息超过一行，按钮放置在信息区下方；这样能够确保用户的浏览动线一致，即先阅读提示信息，再根据信息判断执行什么操作。',
|
||||
},
|
||||
en: {
|
||||
closeAlertTitle: 'Close Alert',
|
||||
welcomeMessage:
|
||||
'Hello! Welcome to use the professional version. You can add business modules according to your needs.',
|
||||
helpTitle: 'Help Information',
|
||||
helpDescription:
|
||||
'Hello, due to your good credit, we have decided to give you a three-month product membership. To learn about membership privileges and activities, please visit the membership section on the homepage.',
|
||||
expandCollapseTitle: 'Expand/Collapse Alert',
|
||||
longMessage:
|
||||
'When alert information exceeds 2 lines, you can collapse part of the information to reduce space usage. When alert information exceeds 2 lines, you can collapse part of the information to reduce space usage. When alert information exceeds 2 lines, you can collapse part of the information to reduce space usage. When alert information exceeds 2 lines, you can collapse part of the information to reduce space usage. When alert information exceeds 2 lines, you can collapse part of the information to reduce space usage.',
|
||||
collapse: 'Collapse',
|
||||
expandMore: 'Expand More',
|
||||
otherActionsTitle: 'Perform Other Actions',
|
||||
singleLineMessage:
|
||||
'When alert information does not exceed one line, the button is placed on the right side of the information.',
|
||||
relatedAction: 'Related Action',
|
||||
multiLineMessage:
|
||||
'When alert information exceeds one line, the button is placed below the information area according to the top-to-bottom visual flow, making browsing smoother, i.e., first read the alert information, then decide what action to take based on the information.',
|
||||
relatedAction1: 'Related Action 1',
|
||||
relatedAction2: 'Related Action 2',
|
||||
alertTitle: 'Alert Title',
|
||||
guidanceText:
|
||||
'It is recommended to uniformly use Link Button, which clarifies clickability while maintaining overall visual harmony; when alert information does not exceed one line, the button is placed on the right side of the information; when alert information exceeds one line, the button is placed below the information area; this ensures consistent user browsing flow, i.e., first read the alert information, then decide what action to take based on the information.',
|
||||
},
|
||||
};
|
||||
|
||||
const Demo: React.FC = () => {
|
||||
const [locale] = useLocale(locales);
|
||||
|
||||
const [expandA, setExpandA] = React.useState(false);
|
||||
const [expandB, setExpandB] = React.useState(true);
|
||||
|
||||
return (
|
||||
<Flex gap="large" vertical style={{ maxWidth: 600 }}>
|
||||
<Flex gap="middle" vertical>
|
||||
<div>关闭提示</div>
|
||||
<Alert showIcon closable message="你好！欢迎使用专业版，你可以根据自身需求添加业务模块。" />
|
||||
<Alert
|
||||
showIcon
|
||||
closable
|
||||
message="帮助信息"
|
||||
description="你好，由于你的良好信用，我们决定赠送你三个月产品会员，欲了解会员特权与活动请进首页会员专区查看。"
|
||||
/>
|
||||
<div>{locale.closeAlertTitle}</div>
|
||||
<Alert showIcon closable message={locale.welcomeMessage} />
|
||||
<Alert showIcon closable message={locale.helpTitle} description={locale.helpDescription} />
|
||||
</Flex>
|
||||
<Flex gap="middle" vertical>
|
||||
<div>展开/收起提示</div>
|
||||
<div>{locale.expandCollapseTitle}</div>
|
||||
<Alert
|
||||
showIcon
|
||||
closable
|
||||
message={
|
||||
<div>
|
||||
<Typography.Paragraph ellipsis={!expandA && { rows: 2 }} style={{ marginBottom: 8 }}>
|
||||
提示信息超过2行时，可以使用将部分信息折叠，以减少空间占用。提示信息超过2行时，可以使用将部分信息折叠，以减少空间占用。提示信息超过2行时，可以使用将部分信息折叠，以减少空间占用。提示信息超过2行时，可以使用将部分信息折叠，以减少空间占用。提示信息超过2行时，可以使用将部分信息折叠，以减少空间占用。
|
||||
{locale.longMessage}
|
||||
</Typography.Paragraph>
|
||||
<Typography.Link onClick={() => setExpandA((prev) => !prev)}>
|
||||
{expandA ? '收起' : '展开更多'}
|
||||
{expandA ? locale.collapse : locale.expandMore}
|
||||
</Typography.Link>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -40,10 +87,10 @@ const Demo = () => {
|
|||
message={
|
||||
<div>
|
||||
<Typography.Paragraph ellipsis={!expandB && { rows: 2 }} style={{ marginBottom: 8 }}>
|
||||
提示信息超过2行时，可以使用将部分信息折叠，以减少空间占用。提示信息超过2行时，可以使用将部分信息折叠，以减少空间占用。提示信息超过2行时，可以使用将部分信息折叠，以减少空间占用。提示信息超过2行时，可以使用将部分信息折叠，以减少空间占用。提示信息超过2行时，可以使用将部分信息折叠，以减少空间占用。
|
||||
{locale.longMessage}
|
||||
</Typography.Paragraph>
|
||||
<Typography.Link onClick={() => setExpandB((prev) => !prev)}>
|
||||
{expandB ? '收起' : '展开更多'}
|
||||
{expandB ? locale.collapse : locale.expandMore}
|
||||
</Typography.Link>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -51,12 +98,12 @@ const Demo = () => {
|
|||
/>
|
||||
</Flex>
|
||||
<Flex gap="middle" vertical>
|
||||
<div>执行其他操作</div>
|
||||
<div>{locale.otherActionsTitle}</div>
|
||||
<Alert
|
||||
showIcon
|
||||
closable
|
||||
message="提示信息不超过一行时，按钮放在信息右侧。"
|
||||
action={<Typography.Link>相关操作</Typography.Link>}
|
||||
message={locale.singleLineMessage}
|
||||
action={<Typography.Link>{locale.relatedAction}</Typography.Link>}
|
||||
/>
|
||||
<Alert
|
||||
showIcon
|
||||
|
|
@ -64,11 +111,11 @@ const Demo = () => {
|
|||
message={
|
||||
<div>
|
||||
<Typography.Paragraph style={{ marginBottom: 8 }}>
|
||||
提示信息超过一行，此时按钮按照从上至下的视觉流，放置在信息区下方，这样浏览起来更流畅，即先阅读提示信息，再根据信息判断执行什么操作。
|
||||
{locale.multiLineMessage}
|
||||
</Typography.Paragraph>
|
||||
<Flex gap={8}>
|
||||
<Typography.Link>相关操作1</Typography.Link>
|
||||
<Typography.Link>相关操作2</Typography.Link>
|
||||
<Typography.Link>{locale.relatedAction1}</Typography.Link>
|
||||
<Typography.Link>{locale.relatedAction2}</Typography.Link>
|
||||
</Flex>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -77,23 +124,20 @@ const Demo = () => {
|
|||
<Alert
|
||||
showIcon
|
||||
closable
|
||||
message="提示标题"
|
||||
message={locale.alertTitle}
|
||||
description={
|
||||
<div>
|
||||
<Typography.Paragraph style={{ marginBottom: 8 }}>
|
||||
提示信息超过一行，此时按钮按照从上至下的视觉流，放置在信息区下方，这样浏览起来更流畅，即先阅读提示信息，再根据信息判断执行什么操作。
|
||||
{locale.multiLineMessage}
|
||||
</Typography.Paragraph>
|
||||
<Flex gap={8}>
|
||||
<Typography.Link>相关操作1</Typography.Link>
|
||||
<Typography.Link>相关操作2</Typography.Link>
|
||||
<Typography.Link>{locale.relatedAction1}</Typography.Link>
|
||||
<Typography.Link>{locale.relatedAction2}</Typography.Link>
|
||||
</Flex>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<Typography.Paragraph type="secondary">
|
||||
建议统一使用Link
|
||||
Button，明确可点击的同时，整体视觉也更和谐；当提示信息不超一行时，按钮放在信息右侧；当提示信息超过一行，按钮放置在信息区下方；这样能够确保用户的浏览动线一致，即先阅读提示信息，再根据信息判断执行什么操作。
|
||||
</Typography.Paragraph>
|
||||
<Typography.Paragraph type="secondary">{locale.guidanceText}</Typography.Paragraph>
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,14 +1,32 @@
|
|||
import React from 'react';
|
||||
import { Alert, Flex } from 'antd';
|
||||
|
||||
const Demo = () => (
|
||||
<Flex gap="middle" vertical style={{ maxWidth: 600 }}>
|
||||
<Alert message="你好！欢迎使用专业版，你可以根据自身需求添加业务模块。" />
|
||||
<Alert
|
||||
message="帮助信息"
|
||||
description="你好，由于你的良好信用，我们决定赠送你三个月产品会员，欲了解会员特权与活动请进首页会员专区查看。"
|
||||
/>
|
||||
</Flex>
|
||||
);
|
||||
import useLocale from '../../../../.dumi/hooks/useLocale';
|
||||
|
||||
const locales = {
|
||||
cn: {
|
||||
welcomeMessage: '你好！欢迎使用专业版，你可以根据自身需求添加业务模块。',
|
||||
helpTitle: '帮助信息',
|
||||
helpDescription:
|
||||
'你好，由于你的良好信用，我们决定赠送你三个月产品会员，欲了解会员特权与活动请进首页会员专区查看。',
|
||||
},
|
||||
en: {
|
||||
welcomeMessage:
|
||||
'Hello! Welcome to use the professional version. You can add business modules according to your needs.',
|
||||
helpTitle: 'Help Information',
|
||||
helpDescription:
|
||||
'Hello, due to your good credit, we have decided to give you a three-month product membership. To learn about membership privileges and activities, please visit the membership section on the homepage.',
|
||||
},
|
||||
};
|
||||
|
||||
const Demo: React.FC = () => {
|
||||
const [locale] = useLocale(locales);
|
||||
return (
|
||||
<Flex gap="middle" vertical style={{ maxWidth: 600 }}>
|
||||
<Alert message={locale.welcomeMessage} />
|
||||
<Alert message={locale.helpTitle} description={locale.helpDescription} />
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default Demo;
|
||||
|
|
|
|||
|
|
@ -1,61 +1,104 @@
|
|||
import React from 'react';
|
||||
import { Alert, Flex } from 'antd';
|
||||
|
||||
const Demo = () => (
|
||||
<Flex gap="large" vertical style={{ maxWidth: 600 }}>
|
||||
<Flex gap="middle" vertical>
|
||||
<div>成功提示</div>
|
||||
<Alert
|
||||
showIcon
|
||||
type="success"
|
||||
message="恭喜！你所提交的信息已经审核通过，如有问题请联系客服。"
|
||||
/>
|
||||
<Alert
|
||||
showIcon
|
||||
type="success"
|
||||
message="已成功！"
|
||||
description="你所提交的信息已经审核通过，请及时跟进申请状况。如有问题，请联系审核人员或在线客服。"
|
||||
/>
|
||||
import useLocale from '../../../../.dumi/hooks/useLocale';
|
||||
|
||||
const locales = {
|
||||
cn: {
|
||||
successTitle: '成功提示',
|
||||
successMessage1: '恭喜！你所提交的信息已经审核通过，如有问题请联系客服。',
|
||||
successMessage2: '已成功！',
|
||||
successDescription2:
|
||||
'你所提交的信息已经审核通过，请及时跟进申请状况。如有问题，请联系审核人员或在线客服。',
|
||||
infoTitle: '信息提示',
|
||||
infoMessage1: '你好！欢迎使用专业版，你可以根据自身需求添加业务模块。',
|
||||
infoMessage2: '帮助信息',
|
||||
infoDescription2:
|
||||
'你好，由于你的良好信用，我们决定赠送你三个月产品会员，欲了解会员特权与活动请进首页会员专区查看。',
|
||||
warningTitle: '警告提示',
|
||||
warningMessage1: '系统将于 15 : 00 - 17 : 00 进行升级，请及时保存你的资料！',
|
||||
warningMessage2: '请注意',
|
||||
warningDescription2:
|
||||
'你所提交的信息已经审核失败，可以进入个人信箱查看原因，如有疑问，请联系客服人员。',
|
||||
errorTitle: '错误提示',
|
||||
errorMessage1: '系统错误，请稍后重试。',
|
||||
errorMessage2: '出错了！',
|
||||
errorDescription2:
|
||||
'你的账户会员使用权限将在3天后到期，请及时跟进申请状况。如有问题，请联系审核人员。',
|
||||
},
|
||||
en: {
|
||||
successTitle: 'Success Alert',
|
||||
successMessage1:
|
||||
'Congratulations! Your submitted information has been approved. Please contact customer service if you have any questions.',
|
||||
successMessage2: 'Success!',
|
||||
successDescription2:
|
||||
'Your submitted information has been approved. Please follow up on the application status in time. If you have any questions, please contact the reviewer or online customer service.',
|
||||
infoTitle: 'Info Alert',
|
||||
infoMessage1:
|
||||
'Hello! Welcome to use the professional version. You can add business modules according to your needs.',
|
||||
infoMessage2: 'Help Information',
|
||||
infoDescription2:
|
||||
'Hello, due to your good credit, we have decided to give you a three-month product membership. To learn about membership privileges and activities, please visit the membership section on the homepage.',
|
||||
warningTitle: 'Warning Alert',
|
||||
warningMessage1:
|
||||
'The system will be upgraded from 15:00 - 17:00. Please save your data in time!',
|
||||
warningMessage2: 'Please Note',
|
||||
warningDescription2:
|
||||
'Your submitted information has failed the review. You can check the reason in your personal mailbox. If you have any questions, please contact customer service.',
|
||||
errorTitle: 'Error Alert',
|
||||
errorMessage1: 'System error, please try again later.',
|
||||
errorMessage2: 'Error!',
|
||||
errorDescription2:
|
||||
'Your account membership privileges will expire in 3 days. Please follow up on the application status in time. If you have any questions, please contact the reviewer.',
|
||||
},
|
||||
};
|
||||
|
||||
const Demo: React.FC = () => {
|
||||
const [locale] = useLocale(locales);
|
||||
return (
|
||||
<Flex gap="large" vertical style={{ maxWidth: 600 }}>
|
||||
<Flex gap="middle" vertical>
|
||||
<div>{locale.successTitle}</div>
|
||||
<Alert showIcon type="success" message={locale.successMessage1} />
|
||||
<Alert
|
||||
showIcon
|
||||
type="success"
|
||||
message={locale.successMessage2}
|
||||
description={locale.successDescription2}
|
||||
/>
|
||||
</Flex>
|
||||
<Flex gap="middle" vertical>
|
||||
<div>{locale.infoTitle}</div>
|
||||
<Alert showIcon type="info" message={locale.infoMessage1} />
|
||||
<Alert
|
||||
showIcon
|
||||
type="info"
|
||||
message={locale.infoMessage2}
|
||||
description={locale.infoDescription2}
|
||||
/>
|
||||
</Flex>
|
||||
<Flex gap="middle" vertical>
|
||||
<div>{locale.warningTitle}</div>
|
||||
<Alert showIcon type="warning" message={locale.warningMessage1} />
|
||||
<Alert
|
||||
showIcon
|
||||
type="warning"
|
||||
message={locale.warningMessage2}
|
||||
description={locale.warningDescription2}
|
||||
/>
|
||||
</Flex>
|
||||
<Flex gap="middle" vertical>
|
||||
<div>{locale.errorTitle}</div>
|
||||
<Alert showIcon type="error" message={locale.errorMessage1} />
|
||||
<Alert
|
||||
showIcon
|
||||
type="error"
|
||||
message={locale.errorMessage2}
|
||||
description={locale.errorDescription2}
|
||||
/>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex gap="middle" vertical>
|
||||
<div>信息提示</div>
|
||||
<Alert
|
||||
showIcon
|
||||
type="info"
|
||||
message="你好！欢迎使用专业版，你可以根据自身需求添加业务模块。"
|
||||
/>
|
||||
<Alert
|
||||
showIcon
|
||||
type="info"
|
||||
message="帮助信息"
|
||||
description="你好，由于你的良好信用，我们决定赠送你三个月产品会员，欲了解会员特权与活动请进首页会员专区查看。"
|
||||
/>
|
||||
</Flex>
|
||||
<Flex gap="middle" vertical>
|
||||
<div>警告提示</div>
|
||||
<Alert
|
||||
showIcon
|
||||
type="warning"
|
||||
message="系统将于 15 : 00 - 17 : 00 进行升级，请及时保存你的资料！"
|
||||
/>
|
||||
<Alert
|
||||
showIcon
|
||||
type="warning"
|
||||
message="请注意"
|
||||
description="你所提交的信息已经审核失败，可以进入个人信箱查看原因，如有疑问，请联系客服人员。"
|
||||
/>
|
||||
</Flex>
|
||||
<Flex gap="middle" vertical>
|
||||
<div>错误提示</div>
|
||||
<Alert showIcon type="error" message="系统错误，请稍后重试。" />
|
||||
<Alert
|
||||
showIcon
|
||||
type="error"
|
||||
message="出错了！"
|
||||
description="你的账户会员使用权限将在3天后到期，请及时跟进申请状况。如有问题，请联系审核人员。"
|
||||
/>
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
export default Demo;
|
||||
|
|
|
|||
15
components/alert/index.$tab-design.en-US.md
Normal file
15
components/alert/index.$tab-design.en-US.md
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
## Component Definition
|
||||
|
||||
The essence of Alert is to understand the alerts that need attention within pages/modules
|
||||
|
||||
<code src="./design/behavior-pattern.tsx" inline></code>
|
||||
|
||||
## Basic Usage
|
||||
|
||||
<code src="./design/demo/content" description="Display alert content, can also be used together with titles">Understanding Alert Content</code>
|
||||
|
||||
<code src="./design/demo/type" description="Combined with background colors and icons to understand alert types (success, info, warning, error)">Understanding Alert Types</code>
|
||||
|
||||
## Interactive Variants
|
||||
|
||||
<code src="./design/demo/action" description="Can perform operations on alerts such as closing, expanding/collapsing, or executing other actions">Perform Operations on Alerts</code>
|
||||
|
|
@ -1,23 +1,25 @@
|
|||
import React from 'react';
|
||||
import { Breadcrumb } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{
|
||||
title: 'Home',
|
||||
},
|
||||
{
|
||||
title: <a href="">Application Center</a>,
|
||||
},
|
||||
{
|
||||
title: <a href="">Application List</a>,
|
||||
},
|
||||
{
|
||||
title: 'An Application',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
const App: React.FC = () => {
|
||||
return (
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{
|
||||
title: 'Home',
|
||||
},
|
||||
{
|
||||
title: <a href="">Application Center</a>,
|
||||
},
|
||||
{
|
||||
title: <a href="">Application List</a>,
|
||||
},
|
||||
{
|
||||
title: 'An Application',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
|
|
|||
|
|
@ -1,45 +1,68 @@
|
|||
import React from 'react';
|
||||
|
||||
import useLocale from '../../../.dumi/hooks/useLocale';
|
||||
import BehaviorMap from '../../../.dumi/theme/common/BehaviorMap';
|
||||
|
||||
const BehaviorPattern: React.FC = () => (
|
||||
<BehaviorMap
|
||||
data={{
|
||||
id: '200000004',
|
||||
label: '了解当前所处页面的位置并向上导航',
|
||||
children: [
|
||||
{
|
||||
id: '500000061',
|
||||
label: '确定位置',
|
||||
targetType: 'mvp',
|
||||
children: [
|
||||
{
|
||||
id: '707000085',
|
||||
label: '了解当前页面的位置',
|
||||
link: 'breadcrumb-index-tab-design-demo-basic',
|
||||
},
|
||||
{
|
||||
id: '707000086',
|
||||
label: '了解系统层级结构',
|
||||
link: 'breadcrumb-index-tab-design-demo-basic',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '200000005',
|
||||
label: '向上导航',
|
||||
targetType: 'mvp',
|
||||
link: 'breadcrumb-index-tab-design-demo-basic',
|
||||
},
|
||||
{
|
||||
id: '200000006',
|
||||
label: '快捷导航',
|
||||
targetType: 'extension',
|
||||
link: 'breadcrumb-index-tab-design-demo-overlay',
|
||||
},
|
||||
],
|
||||
}}
|
||||
/>
|
||||
);
|
||||
const locales = {
|
||||
cn: {
|
||||
title: '了解当前所处页面的位置并向上导航',
|
||||
determineLocation: '确定位置',
|
||||
understandCurrentPageLocation: '了解当前页面的位置',
|
||||
understandSystemHierarchy: '了解系统层级结构',
|
||||
upwardNavigation: '向上导航',
|
||||
quickNavigation: '快捷导航',
|
||||
},
|
||||
en: {
|
||||
title: 'Understand the location of the current page and navigate upward',
|
||||
determineLocation: 'Determine Location',
|
||||
understandCurrentPageLocation: 'Understand Current Page Location',
|
||||
understandSystemHierarchy: 'Understand System Hierarchy',
|
||||
upwardNavigation: 'Upward Navigation',
|
||||
quickNavigation: 'Quick Navigation',
|
||||
},
|
||||
};
|
||||
|
||||
const BehaviorPattern: React.FC = () => {
|
||||
const [locale] = useLocale(locales);
|
||||
return (
|
||||
<BehaviorMap
|
||||
data={{
|
||||
id: '200000004',
|
||||
label: locale.title,
|
||||
children: [
|
||||
{
|
||||
id: '500000061',
|
||||
label: locale.determineLocation,
|
||||
targetType: 'mvp',
|
||||
children: [
|
||||
{
|
||||
id: '707000085',
|
||||
label: locale.understandCurrentPageLocation,
|
||||
link: 'breadcrumb-index-tab-design-demo-basic',
|
||||
},
|
||||
{
|
||||
id: '707000086',
|
||||
label: locale.understandSystemHierarchy,
|
||||
link: 'breadcrumb-index-tab-design-demo-basic',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '200000005',
|
||||
label: locale.upwardNavigation,
|
||||
targetType: 'mvp',
|
||||
link: 'breadcrumb-index-tab-design-demo-basic',
|
||||
},
|
||||
{
|
||||
id: '200000006',
|
||||
label: locale.quickNavigation,
|
||||
targetType: 'extension',
|
||||
link: 'breadcrumb-index-tab-design-demo-overlay',
|
||||
},
|
||||
],
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default BehaviorPattern;
|
||||
|
|
|
|||
19
components/breadcrumb/index.$tab-design.en-US.md
Normal file
19
components/breadcrumb/index.$tab-design.en-US.md
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
## Component Definition
|
||||
|
||||
The essence of Breadcrumb is to understand the location of the current page and enable upward navigation.
|
||||
|
||||
<code src="./design/behavior-pattern.tsx" inline></code>
|
||||
|
||||
## Basic Usage
|
||||
|
||||
<code src="./demo/basic" description="Used when users need to understand the position of the current page in the system hierarchy or need to navigate upward. This is the most basic usage.">Determine Location and Navigate Upward</code>
|
||||
|
||||
## Interactive Variants
|
||||
|
||||
<code src="./demo/overlay" description="With dropdown menu, the content in the dropdown can carry content at the same level as the first-level breadcrumb, or can carry sub-level content of the breadcrumb, facilitating quick switching.">Quick Navigation</code>
|
||||
|
||||
## Style Variants
|
||||
|
||||
<code src="./demo/withIcon" description="Icons replace part of the text, or add icons before the text.">Icon Style</code>
|
||||
|
||||
<code src="./demo/separator" description="Separators can use the greater-than symbol from mathematics.">Custom Separator Style</code>
|
||||
|
|
@ -1,113 +1,163 @@
|
|||
import React from 'react';
|
||||
|
||||
import useLocale from '../../../.dumi/hooks/useLocale';
|
||||
import BehaviorMap from '../../../.dumi/theme/common/BehaviorMap';
|
||||
|
||||
const BehaviorPattern: React.FC = () => (
|
||||
<BehaviorMap
|
||||
data={{
|
||||
id: '200000004',
|
||||
label: '选择（输入）日期数据',
|
||||
children: [
|
||||
{
|
||||
id: '500000061',
|
||||
label: '选择时间点',
|
||||
targetType: 'mvp',
|
||||
children: [
|
||||
{
|
||||
id: '707000085',
|
||||
label: '选择某天',
|
||||
link: 'date-picker-index-tab-design-zh-cn-demo-pick-date',
|
||||
},
|
||||
{
|
||||
id: '707000086',
|
||||
label: '选择某周',
|
||||
link: 'date-picker-index-tab-design-zh-cn-demo-pick-week',
|
||||
},
|
||||
{
|
||||
id: '707000087',
|
||||
label: '选择某月',
|
||||
link: 'date-picker-index-tab-design-zh-cn-demo-pick-month',
|
||||
},
|
||||
{
|
||||
id: '707000088',
|
||||
label: '选择某季度',
|
||||
link: 'date-picker-index-tab-design-zh-cn-demo-pick-quarter',
|
||||
},
|
||||
{
|
||||
id: '707000089',
|
||||
label: '选择某年',
|
||||
link: 'date-picker-index-tab-design-zh-cn-demo-pick-year',
|
||||
},
|
||||
{
|
||||
id: '707000090',
|
||||
label: '选择某时间',
|
||||
link: 'date-picker-index-tab-design-zh-cn-demo-pick-time',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '200000005',
|
||||
label: '选择时间段',
|
||||
targetType: 'mvp',
|
||||
children: [
|
||||
{
|
||||
id: '7070000851',
|
||||
label: '选择某天至某天',
|
||||
link: 'date-picker-index-tab-design-zh-cn-demo-pick-date-range',
|
||||
},
|
||||
{
|
||||
id: '7070000861',
|
||||
label: '选择某周至某周',
|
||||
link: 'date-picker-index-tab-design-zh-cn-demo-pick-week-range',
|
||||
},
|
||||
{
|
||||
id: '7070000871',
|
||||
label: '选择某月至某月',
|
||||
link: 'date-picker-index-tab-design-zh-cn-demo-pick-month-range',
|
||||
},
|
||||
{
|
||||
id: '7070000881',
|
||||
label: '选择某季度至某季度',
|
||||
link: 'date-picker-index-tab-design-zh-cn-demo-pick-quarter-range',
|
||||
},
|
||||
{
|
||||
id: '7070000891',
|
||||
label: '选择某年至某年',
|
||||
link: 'date-picker-index-tab-design-zh-cn-demo-pick-year-range',
|
||||
},
|
||||
{
|
||||
id: '7070000901',
|
||||
label: '选择某时间至某时间',
|
||||
link: 'date-picker-index-tab-design-zh-cn-demo-pick-time-range',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '200000006',
|
||||
label: '快捷选择日期数据',
|
||||
targetType: 'extension',
|
||||
children: [
|
||||
{
|
||||
id: '70700008912',
|
||||
label: '快捷选择时间点',
|
||||
link: 'date-picker-index-tab-design-zh-cn-demo-preset-time',
|
||||
},
|
||||
{
|
||||
id: '70700009012',
|
||||
label: '快捷选择时间段',
|
||||
link: 'date-picker-index-tab-design-zh-cn-demo-preset-range',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '200000007',
|
||||
label: '查看日期附属信息',
|
||||
targetType: 'extension',
|
||||
link: 'date-picker-index-tab-design-zh-cn-demo-date-extra-info',
|
||||
},
|
||||
],
|
||||
}}
|
||||
/>
|
||||
);
|
||||
const locales = {
|
||||
cn: {
|
||||
title: '选择（输入）日期数据',
|
||||
selectTimePoint: '选择时间点',
|
||||
selectDay: '选择某天',
|
||||
selectWeek: '选择某周',
|
||||
selectMonth: '选择某月',
|
||||
selectQuarter: '选择某季度',
|
||||
selectYear: '选择某年',
|
||||
selectTime: '选择某时间',
|
||||
selectTimeRange: '选择时间段',
|
||||
selectDayRange: '选择某天至某天',
|
||||
selectWeekRange: '选择某周至某周',
|
||||
selectMonthRange: '选择某月至某月',
|
||||
selectQuarterRange: '选择某季度至某季度',
|
||||
selectYearRange: '选择某年至某年',
|
||||
selectTimeRangeDetailed: '选择某时间至某时间',
|
||||
quickSelectDate: '快捷选择日期数据',
|
||||
quickSelectTimePoint: '快捷选择时间点',
|
||||
quickSelectTimeRange: '快捷选择时间段',
|
||||
viewDateExtraInfo: '查看日期附属信息',
|
||||
},
|
||||
en: {
|
||||
title: 'Select (Input) Date Data',
|
||||
selectTimePoint: 'Select Time Point',
|
||||
selectDay: 'Select a Day',
|
||||
selectWeek: 'Select a Week',
|
||||
selectMonth: 'Select a Month',
|
||||
selectQuarter: 'Select a Quarter',
|
||||
selectYear: 'Select a Year',
|
||||
selectTime: 'Select a Time',
|
||||
selectTimeRange: 'Select Time Range',
|
||||
selectDayRange: 'Select from Day to Day',
|
||||
selectWeekRange: 'Select from Week to Week',
|
||||
selectMonthRange: 'Select from Month to Month',
|
||||
selectQuarterRange: 'Select from Quarter to Quarter',
|
||||
selectYearRange: 'Select from Year to Year',
|
||||
selectTimeRangeDetailed: 'Select from Time to Time',
|
||||
quickSelectDate: 'Quick Select Date Data',
|
||||
quickSelectTimePoint: 'Quick Select Time Point',
|
||||
quickSelectTimeRange: 'Quick Select Time Range',
|
||||
viewDateExtraInfo: 'View Date Additional Information',
|
||||
},
|
||||
};
|
||||
|
||||
const BehaviorPattern: React.FC = () => {
|
||||
const [locale, localeType] = useLocale(locales);
|
||||
const anchorType = localeType === 'cn' ? 'zh-cn' : 'en-us';
|
||||
return (
|
||||
<BehaviorMap
|
||||
data={{
|
||||
id: '200000004',
|
||||
label: locale.title,
|
||||
children: [
|
||||
{
|
||||
id: '500000061',
|
||||
label: locale.selectTimePoint,
|
||||
targetType: 'mvp',
|
||||
children: [
|
||||
{
|
||||
id: '707000085',
|
||||
label: locale.selectDay,
|
||||
link: `date-picker-index-tab-design-${anchorType}-demo-pick-date`,
|
||||
},
|
||||
{
|
||||
id: '707000086',
|
||||
label: locale.selectWeek,
|
||||
link: `date-picker-index-tab-design-${anchorType}-demo-pick-week`,
|
||||
},
|
||||
{
|
||||
id: '707000087',
|
||||
label: locale.selectMonth,
|
||||
link: `date-picker-index-tab-design-${anchorType}-demo-pick-month`,
|
||||
},
|
||||
{
|
||||
id: '707000088',
|
||||
label: locale.selectQuarter,
|
||||
link: `date-picker-index-tab-design-${anchorType}-demo-pick-quarter`,
|
||||
},
|
||||
{
|
||||
id: '707000089',
|
||||
label: locale.selectYear,
|
||||
link: `date-picker-index-tab-design-${anchorType}-demo-pick-year`,
|
||||
},
|
||||
{
|
||||
id: '707000090',
|
||||
label: locale.selectTime,
|
||||
link: `date-picker-index-tab-design-${anchorType}-demo-pick-time`,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '200000005',
|
||||
label: locale.selectTimeRange,
|
||||
targetType: 'mvp',
|
||||
children: [
|
||||
{
|
||||
id: '7070000851',
|
||||
label: locale.selectDayRange,
|
||||
link: `date-picker-index-tab-design-${anchorType}-demo-pick-date-range`,
|
||||
},
|
||||
{
|
||||
id: '7070000861',
|
||||
label: locale.selectWeekRange,
|
||||
link: `date-picker-index-tab-design-${anchorType}-demo-pick-week-range`,
|
||||
},
|
||||
{
|
||||
id: '7070000871',
|
||||
label: locale.selectMonthRange,
|
||||
link: `date-picker-index-tab-design-${anchorType}-demo-pick-month-range`,
|
||||
},
|
||||
{
|
||||
id: '7070000881',
|
||||
label: locale.selectQuarterRange,
|
||||
link: `date-picker-index-tab-design-${anchorType}-demo-pick-quarter-range`,
|
||||
},
|
||||
{
|
||||
id: '7070000891',
|
||||
label: locale.selectYearRange,
|
||||
link: `date-picker-index-tab-design-${anchorType}-demo-pick-year-range`,
|
||||
},
|
||||
{
|
||||
id: '7070000901',
|
||||
label: locale.selectTimeRangeDetailed,
|
||||
link: `date-picker-index-tab-design-${anchorType}-demo-pick-time-range`,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '200000006',
|
||||
label: locale.quickSelectDate,
|
||||
targetType: 'extension',
|
||||
children: [
|
||||
{
|
||||
id: '70700008912',
|
||||
label: locale.quickSelectTimePoint,
|
||||
link: `date-picker-index-tab-design-${anchorType}-demo-preset-time`,
|
||||
},
|
||||
{
|
||||
id: '70700009012',
|
||||
label: locale.quickSelectTimeRange,
|
||||
link: `date-picker-index-tab-design-${anchorType}-demo-preset-range`,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '200000007',
|
||||
label: locale.viewDateExtraInfo,
|
||||
targetType: 'extension',
|
||||
link: `date-picker-index-tab-design-${anchorType}-demo-date-extra-info`,
|
||||
},
|
||||
],
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default BehaviorPattern;
|
||||
|
|
|
|||
39
components/date-picker/index.$tab-design.en-US.md
Normal file
39
components/date-picker/index.$tab-design.en-US.md
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
## Component Definition
|
||||
|
||||
The essence of DatePicker is to select (input) date type data.
|
||||
|
||||
<code src="./design/behavior-pattern.tsx" inline></code>
|
||||
|
||||
## Basic Usage
|
||||
|
||||
<code src="./design/demo/pick-date.tsx" description="Used for selecting specific dates. Used when users only need to input very specific date information.">Select a Day</code>
|
||||
|
||||
<code src="./design/demo/pick-week.tsx" description="Used for selecting weeks. Used when users only need to input year + week information.">Select a Week</code>
|
||||
|
||||
<code src="./design/demo/pick-month.tsx" description="Used for selecting months. Used when users only need to input year + month information.">Select a Month</code>
|
||||
|
||||
<code src="./design/demo/pick-quarter.tsx" description="Used for selecting quarters. Used when users only need to input year + quarter information.">Select a Quarter</code>
|
||||
|
||||
<code src="./design/demo/pick-year.tsx" description="Used for selecting years. Used when users only need to input year information.">Select a Year</code>
|
||||
|
||||
<code src="./design/demo/pick-time.tsx" description="Used for selecting specific moments. Used when users need to input year + month + date + time information.">Select a Moment</code>
|
||||
|
||||
<code src="./design/demo/pick-date-range.tsx" description="Used for selecting specific date ranges.">Select from Day to Day</code>
|
||||
|
||||
<code src="./design/demo/pick-week-range.tsx" description="Used for selecting week ranges.">Select from Week to Week</code>
|
||||
|
||||
<code src="./design/demo/pick-month-range.tsx" description="Used for selecting month ranges.">Select from Month to Month</code>
|
||||
|
||||
<code src="./design/demo/pick-quarter-range.tsx" description="Used for selecting quarter ranges.">Select from Quarter to Quarter</code>
|
||||
|
||||
<code src="./design/demo/pick-year-range.tsx" description="Used for selecting year ranges.">Select from Year to Year</code>
|
||||
|
||||
<code src="./design/demo/pick-time-range.tsx" description="Used for selecting specific moment ranges.">Select from Moment to Moment</code>
|
||||
|
||||
## Interactive Variants
|
||||
|
||||
<code src="./design/demo/preset-time.tsx" description="Help users quickly complete time point selection through preset options provided in the left area of the panel." tip="According to Hick's Law, it is recommended that the number of shortcut options does not exceed 8.">Quick Select Time Point</code>
|
||||
|
||||
<code src="./design/demo/preset-range.tsx" description="Help users quickly complete time range selection through preset options provided in the left area of the panel." tip="According to Hick's Law, it is recommended that the number of shortcut options does not exceed 8.">Quick Select Time Range</code>
|
||||
|
||||
<code src="./design/demo/date-extra-info.tsx" description="By defining date cell content and styles, display more business scenario-related information for users as selection reference.">View Date Additional Information</code>
|
||||
|
|
@ -1,39 +1,60 @@
|
|||
import React from 'react';
|
||||
|
||||
import useLocale from '../../../.dumi/hooks/useLocale';
|
||||
import BehaviorMap from '../../../.dumi/theme/common/BehaviorMap';
|
||||
|
||||
const BehaviorPattern: React.FC = () => (
|
||||
<BehaviorMap
|
||||
data={{
|
||||
id: '200000004',
|
||||
label: '跳转页面',
|
||||
children: [
|
||||
{
|
||||
id: '500000061',
|
||||
label: '跳转至指定页面',
|
||||
targetType: 'mvp',
|
||||
},
|
||||
{
|
||||
id: '200000005',
|
||||
label: '调整单页展示条数',
|
||||
targetType: 'extension',
|
||||
link: 'pagination-index-tab-design-demo-page-size',
|
||||
},
|
||||
{
|
||||
id: '200000006',
|
||||
label: '快速跳转',
|
||||
targetType: 'extension',
|
||||
link: 'pagination-index-tab-design-demo-quick-jump',
|
||||
},
|
||||
{
|
||||
id: '200000007',
|
||||
label: '了解数据总量',
|
||||
targetType: 'extension',
|
||||
link: 'pagination-index-tab-design-demo-total',
|
||||
},
|
||||
],
|
||||
}}
|
||||
/>
|
||||
);
|
||||
const locales = {
|
||||
cn: {
|
||||
title: '跳转页面',
|
||||
jumpToSpecificPage: '跳转至指定页面',
|
||||
adjustItemsPerPage: '调整单页展示条数',
|
||||
quickJump: '快速跳转',
|
||||
understandTotalData: '了解数据总量',
|
||||
},
|
||||
en: {
|
||||
title: 'Navigate Pages',
|
||||
jumpToSpecificPage: 'Jump to Specific Page',
|
||||
adjustItemsPerPage: 'Adjust Items Per Page',
|
||||
quickJump: 'Quick Jump',
|
||||
understandTotalData: 'Understand Total Data',
|
||||
},
|
||||
};
|
||||
|
||||
const BehaviorPattern: React.FC = () => {
|
||||
const [locale] = useLocale(locales);
|
||||
return (
|
||||
<BehaviorMap
|
||||
data={{
|
||||
id: '200000004',
|
||||
label: locale.title,
|
||||
children: [
|
||||
{
|
||||
id: '500000061',
|
||||
label: locale.jumpToSpecificPage,
|
||||
targetType: 'mvp',
|
||||
},
|
||||
{
|
||||
id: '200000005',
|
||||
label: locale.adjustItemsPerPage,
|
||||
targetType: 'extension',
|
||||
link: 'pagination-index-tab-design-demo-page-size',
|
||||
},
|
||||
{
|
||||
id: '200000006',
|
||||
label: locale.quickJump,
|
||||
targetType: 'extension',
|
||||
link: 'pagination-index-tab-design-demo-quick-jump',
|
||||
},
|
||||
{
|
||||
id: '200000007',
|
||||
label: locale.understandTotalData,
|
||||
targetType: 'extension',
|
||||
link: 'pagination-index-tab-design-demo-total',
|
||||
},
|
||||
],
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default BehaviorPattern;
|
||||
|
|
|
|||
|
|
@ -1,20 +1,34 @@
|
|||
import React from 'react';
|
||||
import { Flex, Pagination } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Flex vertical gap="middle">
|
||||
<Pagination defaultCurrent={1} total={50} showSizeChanger={false} size="small" />
|
||||
<Pagination defaultCurrent={1} total={100} showSizeChanger={false} size="small" />
|
||||
<Pagination defaultCurrent={1} total={100} size="small" />
|
||||
<Pagination defaultCurrent={1} total={100} showQuickJumper size="small" />
|
||||
<Pagination
|
||||
defaultCurrent={1}
|
||||
total={100}
|
||||
showQuickJumper
|
||||
size="small"
|
||||
showTotal={(total, range) => `第 ${range.join('-')} 条 / 共 ${total} 条`}
|
||||
/>
|
||||
</Flex>
|
||||
);
|
||||
import useLocale from '../../../../.dumi/hooks/useLocale';
|
||||
|
||||
const locales = {
|
||||
cn: {
|
||||
total: (total: number, current: string | number) => `第 ${current} 条 / 共 ${total} 条`,
|
||||
},
|
||||
en: {
|
||||
total: (total: number, current: string | number) => `${current} of ${total} items`,
|
||||
},
|
||||
};
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [locale] = useLocale(locales);
|
||||
return (
|
||||
<Flex vertical gap="middle">
|
||||
<Pagination defaultCurrent={1} total={50} showSizeChanger={false} size="small" />
|
||||
<Pagination defaultCurrent={1} total={100} showSizeChanger={false} size="small" />
|
||||
<Pagination defaultCurrent={1} total={100} size="small" />
|
||||
<Pagination defaultCurrent={1} total={100} showQuickJumper size="small" />
|
||||
<Pagination
|
||||
defaultCurrent={1}
|
||||
total={100}
|
||||
showQuickJumper
|
||||
size="small"
|
||||
showTotal={(total, range) => locale.total(total, range.join('-'))}
|
||||
/>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,27 @@
|
|||
import React from 'react';
|
||||
import { Pagination } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Pagination
|
||||
defaultCurrent={3}
|
||||
total={500}
|
||||
showQuickJumper
|
||||
showTotal={(total, range) => `第 ${range.join('-')} 条 / 共 ${total} 条`}
|
||||
/>
|
||||
);
|
||||
import useLocale from '../../../../.dumi/hooks/useLocale';
|
||||
|
||||
const locales = {
|
||||
cn: {
|
||||
total: (total: number, current: string | number) => `第 ${current} 条 / 共 ${total} 条`,
|
||||
},
|
||||
en: {
|
||||
total: (total: number, current: string | number) => `${current} of ${total} items`,
|
||||
},
|
||||
};
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [locale] = useLocale(locales);
|
||||
return (
|
||||
<Pagination
|
||||
defaultCurrent={3}
|
||||
total={500}
|
||||
showQuickJumper
|
||||
showTotal={(total, range) => locale.total(total, range.join('-'))}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
|
|
|||
27
components/pagination/index.$tab-design.en-US.md
Normal file
27
components/pagination/index.$tab-design.en-US.md
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
## Component Definition
|
||||
|
||||
The essence of Pagination is to control the amount of information on a single page and enable page navigation.
|
||||
|
||||
<code src="./design/behavior-pattern.tsx" inline></code>
|
||||
|
||||
## Basic Usage
|
||||
|
||||
<code src="./design/demo/basic" description="The most basic pagination control that only displays page numbers." tip="Recommended for lightweight pagination scenarios with less than 10 pages of content.">Few Pages</code>
|
||||
|
||||
<code src="./design/demo/large-amount" description="When there is a large amount of data to display, pagination allows users to quickly locate the current page number. Shows first and last page numbers with some page numbers omitted." tip="Recommended for pagination scenarios with more than 10 pages of content.">Large Amount of Pages</code>
|
||||
|
||||
## Interactive Variants
|
||||
|
||||
<code src="./design/demo/page-size" description="Allows adjustment of the number of items displayed per page according to user needs.">Adjust Items Per Page</code>
|
||||
|
||||
<code src="./design/demo/quick-jump" description="When data requires quick positioning, enter a page number to quickly jump to the specified page.">Quick Jump</code>
|
||||
|
||||
<code src="./design/demo/total" description="Users can quickly understand the total amount of data without browsing everything. Commonly used for data statistics in tables.">Understanding Total Data</code>
|
||||
|
||||
## Style Variants
|
||||
|
||||
<code src="./design/demo/simple" description="An extremely simple pagination control that only shows current page, total pages, and previous/next navigation. Suitable for scenarios with limited horizontal space within modules.">Simple Pagination</code>
|
||||
|
||||
<code src="./design/demo/mini" description="Small-sized pagination control. Suitable for scenarios with limited space within modules that require lightweight page navigation.">Mini Pagination</code>
|
||||
|
||||
<code src="./demo/itemRender" description="Modify previous and next steps to text links.">Previous and Next Steps</code>
|
||||
|
|
@ -1,39 +1,60 @@
|
|||
import React from 'react';
|
||||
|
||||
import useLocale from '../../../.dumi/hooks/useLocale';
|
||||
import BehaviorMap from '../../../.dumi/theme/common/BehaviorMap';
|
||||
|
||||
const BehaviorPattern: React.FC = () => (
|
||||
<BehaviorMap
|
||||
data={{
|
||||
id: '200000004',
|
||||
label: '了解任务的进度',
|
||||
children: [
|
||||
{
|
||||
id: '500000061',
|
||||
label: '查看任务的完成程度',
|
||||
targetType: 'mvp',
|
||||
children: [
|
||||
{
|
||||
id: '707000085',
|
||||
label: '了解任务进度',
|
||||
link: 'progress-index-tab-design-demo-progress',
|
||||
},
|
||||
{
|
||||
id: '707000086',
|
||||
label: '了解任务状态',
|
||||
link: 'progress-index-tab-design-demo-status',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '200000005',
|
||||
label: '查看进度相关描述',
|
||||
targetType: 'extension',
|
||||
link: 'progress-index-tab-design-demo-info',
|
||||
},
|
||||
],
|
||||
}}
|
||||
/>
|
||||
);
|
||||
const locales = {
|
||||
cn: {
|
||||
title: '了解任务的进度',
|
||||
viewTaskCompletion: '查看任务的完成程度',
|
||||
understandTaskProgress: '了解任务进度',
|
||||
understandTaskStatus: '了解任务状态',
|
||||
viewProgressDescription: '查看进度相关描述',
|
||||
},
|
||||
en: {
|
||||
title: 'Understand Task Progress',
|
||||
viewTaskCompletion: 'View Task Completion',
|
||||
understandTaskProgress: 'Understand Task Progress',
|
||||
understandTaskStatus: 'Understand Task Status',
|
||||
viewProgressDescription: 'View Progress-related Description',
|
||||
},
|
||||
};
|
||||
|
||||
const BehaviorPattern: React.FC = () => {
|
||||
const [locale] = useLocale(locales);
|
||||
return (
|
||||
<BehaviorMap
|
||||
data={{
|
||||
id: '200000004',
|
||||
label: locale.title,
|
||||
children: [
|
||||
{
|
||||
id: '500000061',
|
||||
label: locale.viewTaskCompletion,
|
||||
targetType: 'mvp',
|
||||
children: [
|
||||
{
|
||||
id: '707000085',
|
||||
label: locale.understandTaskProgress,
|
||||
link: 'progress-index-tab-design-demo-progress',
|
||||
},
|
||||
{
|
||||
id: '707000086',
|
||||
label: locale.understandTaskStatus,
|
||||
link: 'progress-index-tab-design-demo-status',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '200000005',
|
||||
label: locale.viewProgressDescription,
|
||||
targetType: 'extension',
|
||||
link: 'progress-index-tab-design-demo-info',
|
||||
},
|
||||
],
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default BehaviorPattern;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,27 @@
|
|||
import React from 'react';
|
||||
import { Flex, Progress } from 'antd';
|
||||
|
||||
const Demo = () => (
|
||||
<Flex vertical gap="middle">
|
||||
<Progress type="line" percent={50} style={{ width: 320 }} />
|
||||
<Progress percent={50} format={() => '加载中'} style={{ width: 320 }} />
|
||||
<Progress percent={100} status="success" style={{ width: 320 }} />
|
||||
<Progress percent={70} status="exception" style={{ width: 320 }} />
|
||||
</Flex>
|
||||
);
|
||||
import useLocale from '../../../../.dumi/hooks/useLocale';
|
||||
|
||||
const locales = {
|
||||
cn: {
|
||||
loading: '加载中',
|
||||
},
|
||||
en: {
|
||||
loading: 'Loading',
|
||||
},
|
||||
};
|
||||
|
||||
const Demo: React.FC = () => {
|
||||
const [locale] = useLocale(locales);
|
||||
return (
|
||||
<Flex vertical gap="middle">
|
||||
<Progress type="line" percent={50} style={{ width: 320 }} />
|
||||
<Progress percent={50} format={() => locale.loading} style={{ width: 320 }} />
|
||||
<Progress percent={100} status="success" style={{ width: 320 }} />
|
||||
<Progress percent={70} status="exception" style={{ width: 320 }} />
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default Demo;
|
||||
|
|
|
|||
|
|
@ -1,33 +1,51 @@
|
|||
import React from 'react';
|
||||
import { Flex, Progress } from 'antd';
|
||||
|
||||
const Demo = () => (
|
||||
<Flex vertical gap="middle">
|
||||
<Flex>
|
||||
<div style={{ width: 106 }}>任务进行中</div>
|
||||
<Progress type="line" percent={50} showInfo={false} style={{ width: 320 }} />
|
||||
import useLocale from '../../../../.dumi/hooks/useLocale';
|
||||
|
||||
const locales = {
|
||||
cn: {
|
||||
taskInProgress: '任务进行中',
|
||||
taskCompleted: '任务完成',
|
||||
taskFailed: '任务失败',
|
||||
},
|
||||
en: {
|
||||
taskInProgress: 'Task In Progress',
|
||||
taskCompleted: 'Task Completed',
|
||||
taskFailed: 'Task Failed',
|
||||
},
|
||||
};
|
||||
|
||||
const Demo: React.FC = () => {
|
||||
const [locale] = useLocale(locales);
|
||||
return (
|
||||
<Flex vertical gap="middle">
|
||||
<Flex>
|
||||
<div style={{ width: 106 }}>{locale.taskInProgress}</div>
|
||||
<Progress type="line" percent={50} showInfo={false} style={{ width: 320 }} />
|
||||
</Flex>
|
||||
<Flex>
|
||||
<div style={{ width: 106 }}>{locale.taskCompleted}</div>
|
||||
<Progress
|
||||
type="line"
|
||||
percent={100}
|
||||
status="success"
|
||||
showInfo={false}
|
||||
style={{ width: 320 }}
|
||||
/>
|
||||
</Flex>
|
||||
<Flex>
|
||||
<div style={{ width: 106 }}>{locale.taskFailed}</div>
|
||||
<Progress
|
||||
type="line"
|
||||
percent={30}
|
||||
status="exception"
|
||||
showInfo={false}
|
||||
style={{ width: 320 }}
|
||||
/>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex>
|
||||
<div style={{ width: 106 }}>任务完成</div>
|
||||
<Progress
|
||||
type="line"
|
||||
percent={100}
|
||||
status="success"
|
||||
showInfo={false}
|
||||
style={{ width: 320 }}
|
||||
/>
|
||||
</Flex>
|
||||
<Flex>
|
||||
<div style={{ width: 106 }}>任务失败</div>
|
||||
<Progress
|
||||
type="line"
|
||||
percent={30}
|
||||
status="exception"
|
||||
showInfo={false}
|
||||
style={{ width: 320 }}
|
||||
/>
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
export default Demo;
|
||||
|
|
|
|||
21
components/progress/index.$tab-design.en-US.md
Normal file
21
components/progress/index.$tab-design.en-US.md
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
## Component Definition
|
||||
|
||||
The essence of Progress is to understand the progress of a task
|
||||
|
||||
<code src="./design/behavior-pattern.tsx" inline></code>
|
||||
|
||||
## Basic Usage
|
||||
|
||||
<code src="./design/demo/progress" description="Display total progress and completed progress in a linear format, the most basic usage">Understanding Task Progress</code>
|
||||
|
||||
<code src="./design/demo/status" description="Understand the current status of the task through the color of the completed progress">Understanding Task Status</code>
|
||||
|
||||
## Interactive Variants
|
||||
|
||||
<code src="./design/demo/info" description="View progress-related descriptions through text and icons">View Progress-related Descriptions</code>
|
||||
|
||||
## Style Variants
|
||||
|
||||
<code src="./design/demo/circle" description="Display progress in a circular format, mostly used in scenarios that need to emphasize percentages, such as Dashboard">Circular Progress Bar</code>
|
||||
|
||||
<code src="./design/demo/content" description="Micro progress bar suitable for content-level scenarios, often used with text">Content-level Progress Bar</code>
|
||||
Loading…
Add table
Add a link
Reference in a new issue