Commit a7962d4d authored by Thiago Broges's avatar Thiago Broges

Translate most texts to American English

parent c86c321c
...@@ -41,24 +41,24 @@ const covers = [ ...@@ -41,24 +41,24 @@ const covers = [
'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png', 'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png',
]; ];
const desc = [ const desc = [
'那是一种内在的东西, 他们到达不了,也无法触及的', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum condimentum cursus.',
'希望是一个好东西,也许是最好的,好东西是不会消亡的', 'Praesent rhoncus mi metus. Aliquam sollicitudin felis sagittis bibendum luctus.',
'生命就像一盒巧克力,结果往往出人意料', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum condimentum cursus.',
'城镇中有那么多的酒馆,她却偏偏走进了我的酒馆', 'Praesent rhoncus mi metus. Aliquam sollicitudin felis sagittis bibendum luctus.',
'那时候我只会想自己想要什么,从不想自己拥有什么', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum condimentum cursus.',
]; ];
const user = [ const user = [
'付小小', 'Fu Xiaoxiao',
'曲丽丽', 'John Doe',
'林东东', 'Lin Dongdong',
'周星星', 'Zhou Xingxing',
'吴加好', 'Wu Jiahao',
'朱偏右', 'Zhu Zuoyou',
'鱼酱', 'Fish Sauce', //鱼酱
'乐哥', 'Brother', //乐哥
'谭小仪', 'Tan Xiaoyi',
'仲尼', 'Zhong Ni', //Johnny?
]; ];
export function fakeList(count) { export function fakeList(count) {
...@@ -78,26 +78,26 @@ export function fakeList(count) { ...@@ -78,26 +78,26 @@ export function fakeList(count) {
createdAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i), createdAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i),
subDescription: desc[i % 5], subDescription: desc[i % 5],
description: description:
'在中台产品的研发过程中,会出现不同的设计规范和实现方式,但其中往往存在很多类似的页面和组件,这些类似的组件会被抽离成一套标准规范。', 'In the process of R&D of the middle stage products, there will be different design specifications and implementation methods, but often there are many similar pages and components, and these similar components will be separated into a set of standard specifications.',
activeUser: Math.ceil(Math.random() * 100000) + 100000, activeUser: Math.ceil(Math.random() * 100000) + 100000,
newUser: Math.ceil(Math.random() * 1000) + 1000, newUser: Math.ceil(Math.random() * 1000) + 1000,
star: Math.ceil(Math.random() * 100) + 100, star: Math.ceil(Math.random() * 100) + 100,
like: Math.ceil(Math.random() * 100) + 100, like: Math.ceil(Math.random() * 100) + 100,
message: Math.ceil(Math.random() * 10) + 10, message: Math.ceil(Math.random() * 10) + 10,
content: content:
'段落示意:蚂蚁金服设计平台 ant.design,用最小的工作量,无缝接入蚂蚁金服生态,提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design,用最小的工作量,无缝接入蚂蚁金服生态,提供跨越设计与开发的体验解决方案。', 'In the paragraph: ant.design, Ant Financial Design Platform, seamlessly accesses the ecology of Ant Financial with minimal workload, providing experience solutions that span design and development. The ant gold design platform ant.design, with the minimal workload, seamlessly accesses the ant gold suit ecology, providing experience solutions that span design and development.',
members: [ members: [
{ {
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png', avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
name: '曲丽丽', name: 'John Doe',
}, },
{ {
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png', avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
name: '王昭君', name: 'Wang Zhaojun',
}, },
{ {
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png', avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
name: '董娜娜', name: 'Dong Nana',
}, },
], ],
}); });
...@@ -130,9 +130,9 @@ export const getNotice = [ ...@@ -130,9 +130,9 @@ export const getNotice = [
id: 'xxx1', id: 'xxx1',
title: titles[0], title: titles[0],
logo: avatars[0], logo: avatars[0],
description: '那是一种内在的东西,他们到达不了,也无法触及的', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum condimentum cursus.',
updatedAt: new Date(), updatedAt: new Date(),
member: '科学搬砖组', member: 'The Scientist',
href: '', href: '',
memberLink: '', memberLink: '',
}, },
...@@ -140,9 +140,9 @@ export const getNotice = [ ...@@ -140,9 +140,9 @@ export const getNotice = [
id: 'xxx2', id: 'xxx2',
title: titles[1], title: titles[1],
logo: avatars[1], logo: avatars[1],
description: '希望是一个好东西,也许是最好的,好东西是不会消亡的', description: 'Praesent rhoncus mi metus. Aliquam sollicitudin felis sagittis bibendum luctus.',
updatedAt: new Date('2017-07-24'), updatedAt: new Date('2017-07-24'),
member: '全组都是吴彦祖', member: 'Daniel Wu',
href: '', href: '',
memberLink: '', memberLink: '',
}, },
...@@ -150,9 +150,9 @@ export const getNotice = [ ...@@ -150,9 +150,9 @@ export const getNotice = [
id: 'xxx3', id: 'xxx3',
title: titles[2], title: titles[2],
logo: avatars[2], logo: avatars[2],
description: '城镇中有那么多的酒馆,她却偏偏走进了我的酒馆', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum condimentum cursus.',
updatedAt: new Date(), updatedAt: new Date(),
member: '中二少女团', member: 'Secondary Girl',
href: '', href: '',
memberLink: '', memberLink: '',
}, },
...@@ -160,9 +160,9 @@ export const getNotice = [ ...@@ -160,9 +160,9 @@ export const getNotice = [
id: 'xxx4', id: 'xxx4',
title: titles[3], title: titles[3],
logo: avatars[3], logo: avatars[3],
description: '那时候我只会想自己想要什么,从不想自己拥有什么', description: 'Praesent rhoncus mi metus. Aliquam sollicitudin felis sagittis bibendum luctus.',
updatedAt: new Date('2017-07-23'), updatedAt: new Date('2017-07-23'),
member: '程序员日常', member: 'Everyday Programmer',
href: '', href: '',
memberLink: '', memberLink: '',
}, },
...@@ -170,9 +170,9 @@ export const getNotice = [ ...@@ -170,9 +170,9 @@ export const getNotice = [
id: 'xxx5', id: 'xxx5',
title: titles[4], title: titles[4],
logo: avatars[4], logo: avatars[4],
description: '凛冬将至', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum condimentum cursus.',
updatedAt: new Date('2017-07-23'), updatedAt: new Date('2017-07-23'),
member: '高逼格设计天团', member: 'Design Missioner',
href: '', href: '',
memberLink: '', memberLink: '',
}, },
...@@ -180,9 +180,9 @@ export const getNotice = [ ...@@ -180,9 +180,9 @@ export const getNotice = [
id: 'xxx6', id: 'xxx6',
title: titles[5], title: titles[5],
logo: avatars[5], logo: avatars[5],
description: '生命就像一盒巧克力,结果往往出人意料', description: 'Praesent rhoncus mi metus. Aliquam sollicitudin felis sagittis bibendum luctus.',
updatedAt: new Date('2017-07-23'), updatedAt: new Date('2017-07-23'),
member: '骗你来学计算机', member: 'Computer Learner',
href: '', href: '',
memberLink: '', memberLink: '',
}, },
...@@ -193,99 +193,99 @@ export const getActivities = [ ...@@ -193,99 +193,99 @@ export const getActivities = [
id: 'trend-1', id: 'trend-1',
updatedAt: new Date(), updatedAt: new Date(),
user: { user: {
name: '曲丽丽', name: 'John Doe',
avatar: avatars2[0], avatar: avatars2[0],
}, },
group: { group: {
name: '高逼格设计天团', name: 'Design Missioner',
link: 'http://github.com/', link: 'http://github.com/',
}, },
project: { project: {
name: '六月迭代', name: 'June Iteration',
link: 'http://github.com/', link: 'http://github.com/',
}, },
template: '在 @{group} 新建项目 @{project}', template: 'In @{group} New Project @{project}',
}, },
{ {
id: 'trend-2', id: 'trend-2',
updatedAt: new Date(), updatedAt: new Date(),
user: { user: {
name: '付小小', name: 'Fu Xiaoxiao',
avatar: avatars2[1], avatar: avatars2[1],
}, },
group: { group: {
name: '高逼格设计天团', name: 'Design Missioner',
link: 'http://github.com/', link: 'http://github.com/',
}, },
project: { project: {
name: '六月迭代', name: 'June Iteration',
link: 'http://github.com/', link: 'http://github.com/',
}, },
template: '在 @{group} 新建项目 @{project}', template: 'In @{group} New Project @{project}',
}, },
{ {
id: 'trend-3', id: 'trend-3',
updatedAt: new Date(), updatedAt: new Date(),
user: { user: {
name: '林东东', name: 'Lin Dongdong',
avatar: avatars2[2], avatar: avatars2[2],
}, },
group: { group: {
name: '中二少女团', name: 'Secondary Girl',
link: 'http://github.com/', link: 'http://github.com/',
}, },
project: { project: {
name: '六月迭代', name: 'June Iteration',
link: 'http://github.com/', link: 'http://github.com/',
}, },
template: '在 @{group} 新建项目 @{project}', template: 'In @{group} New Project @{project}',
}, },
{ {
id: 'trend-4', id: 'trend-4',
updatedAt: new Date(), updatedAt: new Date(),
user: { user: {
name: '周星星', name: 'Zhou Xingxing',
avatar: avatars2[4], avatar: avatars2[4],
}, },
project: { project: {
name: '5 月日常迭代', name: '5 Daily Iteration of the Month',
link: 'http://github.com/', link: 'http://github.com/',
}, },
template: '将 @{project} 更新至已发布状态', template: 'Will @{project} Release status update',
}, },
{ {
id: 'trend-5', id: 'trend-5',
updatedAt: new Date(), updatedAt: new Date(),
user: { user: {
name: '朱偏右', name: 'Zhu Zuoyou',
avatar: avatars2[3], avatar: avatars2[3],
}, },
project: { project: {
name: '工程效能', name: 'Project performance',
link: 'http://github.com/', link: 'http://github.com/',
}, },
comment: { comment: {
name: '留言', name: 'Comments',
link: 'http://github.com/', link: 'http://github.com/',
}, },
template: '在 @{project} 发布了 @{comment}', template: 'In @{project} Announced @{comment}',
}, },
{ {
id: 'trend-6', id: 'trend-6',
updatedAt: new Date(), updatedAt: new Date(),
user: { user: {
name: '乐哥', name: 'Brother',
avatar: avatars2[5], avatar: avatars2[5],
}, },
group: { group: {
name: '程序员日常', name: 'Everyday Programmer',
link: 'http://github.com/', link: 'http://github.com/',
}, },
project: { project: {
name: '品牌迭代', name: 'Brand iteration',
link: 'http://github.com/', link: 'http://github.com/',
}, },
template: '在 @{group} 新建项目 @{project}', template: 'In @{group} New Project @{project}',
}, },
]; ];
......
...@@ -24,7 +24,7 @@ for (let i = 0; i < fakeY2.length; i += 1) { ...@@ -24,7 +24,7 @@ for (let i = 0; i < fakeY2.length; i += 1) {
const salesData = []; const salesData = [];
for (let i = 0; i < 12; i += 1) { for (let i = 0; i < 12; i += 1) {
salesData.push({ salesData.push({
x: `${i + 1}`, x: `${i + 1} Month`,
y: Math.floor(Math.random() * 1000) + 200, y: Math.floor(Math.random() * 1000) + 200,
}); });
} }
...@@ -32,7 +32,7 @@ const searchData = []; ...@@ -32,7 +32,7 @@ const searchData = [];
for (let i = 0; i < 50; i += 1) { for (let i = 0; i < 50; i += 1) {
searchData.push({ searchData.push({
index: i + 1, index: i + 1,
keyword: `搜索关键词-${i}`, keyword: ` Search Keyword-${i}`,
count: Math.floor(Math.random() * 1000), count: Math.floor(Math.random() * 1000),
range: Math.floor(Math.random() * 100), range: Math.floor(Math.random() * 100),
status: Math.floor((Math.random() * 10) % 2), status: Math.floor((Math.random() * 10) % 2),
...@@ -40,77 +40,77 @@ for (let i = 0; i < 50; i += 1) { ...@@ -40,77 +40,77 @@ for (let i = 0; i < 50; i += 1) {
} }
const salesTypeData = [ const salesTypeData = [
{ {
x: '家用电器', x: 'Household appliances',
y: 4544, y: 4544,
}, },
{ {
x: '食用酒水', x: 'Drink Wine',
y: 3321, y: 3321,
}, },
{ {
x: '个护健康', x: 'Health Care',
y: 3113, y: 3113,
}, },
{ {
x: '服饰箱包', x: 'Clothing Bags',
y: 2341, y: 2341,
}, },
{ {
x: '母婴产品', x: 'Maternal and child products',
y: 1231, y: 1231,
}, },
{ {
x: '其他', x: 'Others',
y: 1231, y: 1231,
}, },
]; ];
const salesTypeDataOnline = [ const salesTypeDataOnline = [
{ {
x: '家用电器', x: 'Household appliances',
y: 244, y: 244,
}, },
{ {
x: '食用酒水', x: 'Drink Wine',
y: 321, y: 321,
}, },
{ {
x: '个护健康', x: 'Health Care',
y: 311, y: 311,
}, },
{ {
x: '服饰箱包', x: 'Clothing Bags',
y: 41, y: 41,
}, },
{ {
x: '母婴产品', x: 'Maternal and child products',
y: 121, y: 121,
}, },
{ {
x: '其他', x: 'Others',
y: 111, y: 111,
}, },
]; ];
const salesTypeDataOffline = [ const salesTypeDataOffline = [
{ {
x: '家用电器', x: 'Household appliances',
y: 99, y: 99,
}, },
{ {
x: '个护健康', x: 'Health Care',
y: 188, y: 188,
}, },
{ {
x: '服饰箱包', x: 'Clothing Bags',
y: 344, y: 344,
}, },
{ {
x: '母婴产品', x: 'Maternal and child products',
y: 255, y: 255,
}, },
{ {
x: '其他', x: 'Others',
y: 65, y: 65,
}, },
]; ];
...@@ -118,7 +118,7 @@ const salesTypeDataOffline = [ ...@@ -118,7 +118,7 @@ const salesTypeDataOffline = [
const offlineData = []; const offlineData = [];
for (let i = 0; i < 10; i += 1) { for (let i = 0; i < 10; i += 1) {
offlineData.push({ offlineData.push({
name: `门店${i}`, name: `Store ${i}`,
cvr: Math.ceil(Math.random() * 9) / 10, cvr: Math.ceil(Math.random() * 9) / 10,
}); });
} }
...@@ -133,7 +133,7 @@ for (let i = 0; i < 20; i += 1) { ...@@ -133,7 +133,7 @@ for (let i = 0; i < 20; i += 1) {
const radarOriginData = [ const radarOriginData = [
{ {
name: '个人', name: 'Personal',
ref: 10, ref: 10,
koubei: 8, koubei: 8,
output: 4, output: 4,
...@@ -141,7 +141,7 @@ const radarOriginData = [ ...@@ -141,7 +141,7 @@ const radarOriginData = [
hot: 7, hot: 7,
}, },
{ {
name: '团队', name: 'Team',
ref: 3, ref: 3,
koubei: 9, koubei: 9,
output: 6, output: 6,
...@@ -149,7 +149,7 @@ const radarOriginData = [ ...@@ -149,7 +149,7 @@ const radarOriginData = [
hot: 1, hot: 1,
}, },
{ {
name: '部门', name: 'Department',
ref: 4, ref: 4,
koubei: 1, koubei: 1,
output: 6, output: 6,
...@@ -161,11 +161,11 @@ const radarOriginData = [ ...@@ -161,11 +161,11 @@ const radarOriginData = [
// //
const radarData = []; const radarData = [];
const radarTitleMap = { const radarTitleMap = {
ref: '引用', ref: 'Reference',
koubei: '口碑', koubei: 'Opinion',
output: '产量', output: 'Yield',
contribute: '贡献', contribute: 'Contribution',
hot: '热度', hot: 'Heat',
}; };
radarOriginData.forEach(item => { radarOriginData.forEach(item => {
Object.keys(item).forEach(key => { Object.keys(item).forEach(key => {
......
...@@ -3,94 +3,94 @@ export const getNotices = (req, res) => { ...@@ -3,94 +3,94 @@ export const getNotices = (req, res) => {
{ {
id: '000000001', id: '000000001',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png', avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
title: '你收到了 14 份新周报', title: 'You have received 14 new weekly reports',
datetime: '2017-08-09', datetime: '2017-08-09',
type: '通知', type: 'Notice',
}, },
{ {
id: '000000002', id: '000000002',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png', avatar: 'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png',
title: '你推荐的 曲妮妮 已通过第三轮面试', title: 'Your recommended Mr. Doe has passed the third round of interview',
datetime: '2017-08-08', datetime: '2017-08-08',
type: '通知', type: 'Notice',
}, },
{ {
id: '000000003', id: '000000003',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png', avatar: 'https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png',
title: '这种模板可以区分多种通知类型', title: 'This template can distinguish between multiple notification types',
datetime: '2017-08-07', datetime: '2017-08-07',
read: true, read: true,
type: '通知', type: 'Notice',
}, },
{ {
id: '000000004', id: '000000004',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png', avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
title: '左侧图标用于区分不同的类型', title: 'The left icon is used to distinguish between different types',
datetime: '2017-08-07', datetime: '2017-08-07',
type: '通知', type: 'Notice',
}, },
{ {
id: '000000005', id: '000000005',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png', avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
title: '内容不要超过两行字,超出时自动截断', title: 'Do not exceed two lines of text and automatically truncate when exceeded',
datetime: '2017-08-07', datetime: '2017-08-07',
type: '通知', type: 'Notice',
}, },
{ {
id: '000000006', id: '000000006',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg', avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
title: '曲丽丽 评论了你', title: 'John Doe commented on you',
description: '描述信息描述信息描述信息', description: 'Description Information Description Information Description Information',
datetime: '2017-08-07', datetime: '2017-08-07',
type: '消息', type: 'News',
}, },
{ {
id: '000000007', id: '000000007',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg', avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
title: '朱偏右 回复了你', title: 'Zhu right back to you',
description: '这种模板用于提醒谁与你发生了互动,左侧放『谁』的头像', description: 'This template is used to remind who has interacted with you.',
datetime: '2017-08-07', datetime: '2017-08-07',
type: '消息', type: 'News',
}, },
{ {
id: '000000008', id: '000000008',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg', avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
title: '标题', title: 'Title',
description: '这种模板用于提醒谁与你发生了互动,左侧放『谁』的头像', description: 'This template is used to remind who has interacted with you.',
datetime: '2017-08-07', datetime: '2017-08-07',
type: '消息', type: 'News',
}, },
{ {
id: '000000009', id: '000000009',
title: '任务名称', title: 'Mission Name',
description: '任务需要在 2017-01-12 20:00 前启动', description: 'The task needs to start before 2017-01-12 20:00',
extra: '未开始', extra: 'Has Not Started',
status: 'todo', status: 'todo',
type: '待办', type: 'Upcoming',
}, },
{ {
id: '000000010', id: '000000010',
title: '第三方紧急代码变更', title: 'Third-party emergency code changes',
description: '冠霖提交于 2017-01-06,需在 2017-01-07 前完成代码变更任务', description: 'Guan Lin submitted on 2017-01-06, need to complete the code change task before 2017-01-07',
extra: '马上到期', extra: 'Expire Soon',
status: 'urgent', status: 'urgent',
type: '待办', type: 'Upcoming',
}, },
{ {
id: '000000011', id: '000000011',
title: '信息安全考试', title: 'Information Security Test',
description: '指派竹尔于 2017-01-09 前完成更新并发布', description: 'Assign Zhuer to update and publish before 2017-01-09',
extra: '已耗时 8 天', extra: 'It has taken 8 days',
status: 'doing', status: 'doing',
type: '待办', type: 'Upcoming',
}, },
{ {
id: '000000012', id: '000000012',
title: 'ABCD 版本发布', title: 'ABCD Released',
description: '冠霖提交于 2017-01-06,需在 2017-01-07 前完成代码变更任务', description: 'Guan Lin submitted on 2017-01-06, need to complete the code change task before 2017-01-07',
extra: '进行中', extra: 'Processing',
status: 'processing', status: 'processing',
type: '待办', type: 'Upcoming',
}, },
]); ]);
}; };
......
const basicGoods = [ const basicGoods = [
{ {
id: '1234561', id: '1234561',
name: '矿泉水 550ml', name: 'Mineral Water 550ml',
barcode: '12421432143214321', barcode: '12421432143214321',
price: '2.00', price: '2.00',
num: '1', num: '1',
...@@ -9,7 +9,7 @@ const basicGoods = [ ...@@ -9,7 +9,7 @@ const basicGoods = [
}, },
{ {
id: '1234562', id: '1234562',
name: '凉茶 300ml', name: 'Herbal Tea 300ml',
barcode: '12421432143214322', barcode: '12421432143214322',
price: '3.00', price: '3.00',
num: '2', num: '2',
...@@ -17,7 +17,7 @@ const basicGoods = [ ...@@ -17,7 +17,7 @@ const basicGoods = [
}, },
{ {
id: '1234563', id: '1234563',
name: '好吃的薯片', name: 'Delicious Potato Chips',
barcode: '12421432143214323', barcode: '12421432143214323',
price: '7.00', price: '7.00',
num: '4', num: '4',
...@@ -25,7 +25,7 @@ const basicGoods = [ ...@@ -25,7 +25,7 @@ const basicGoods = [
}, },
{ {
id: '1234564', id: '1234564',
name: '特别好吃的蛋卷', name: 'Especially Delicious Egg Rolls',
barcode: '12421432143214324', barcode: '12421432143214324',
price: '8.50', price: '8.50',
num: '3', num: '3',
...@@ -37,41 +37,41 @@ const basicProgress = [ ...@@ -37,41 +37,41 @@ const basicProgress = [
{ {
key: '1', key: '1',
time: '2017-10-01 14:10', time: '2017-10-01 14:10',
rate: '联系客户', rate: 'Contact Clients',
status: 'processing', status: 'processing',
operator: '取货员 ID1234', operator: 'Receiver ID1234',
cost: '5mins', cost: '5mins',
}, },
{ {
key: '2', key: '2',
time: '2017-10-01 14:05', time: '2017-10-01 14:05',
rate: '取货员出发', rate: 'Departure from the Clark',
status: 'success', status: 'success',
operator: '取货员 ID1234', operator: 'Receiver ID1234',
cost: '1h', cost: '1h',
}, },
{ {
key: '3', key: '3',
time: '2017-10-01 13:05', time: '2017-10-01 13:05',
rate: '取货员接单', rate: 'Receiver Orders',
status: 'success', status: 'success',
operator: '取货员 ID1234', operator: 'Receiver ID1234',
cost: '5mins', cost: '5mins',
}, },
{ {
key: '4', key: '4',
time: '2017-10-01 13:00', time: '2017-10-01 13:00',
rate: '申请审批通过', rate: 'Apply for Approval',
status: 'success', status: 'success',
operator: '系统', operator: 'System',
cost: '1h', cost: '1h',
}, },
{ {
key: '5', key: '5',
time: '2017-10-01 12:00', time: '2017-10-01 12:00',
rate: '发起退货申请', rate: 'Initiate a Return Request',
status: 'success', status: 'success',
operator: '用户', operator: 'User',
cost: '5mins', cost: '5mins',
}, },
]; ];
...@@ -79,40 +79,40 @@ const basicProgress = [ ...@@ -79,40 +79,40 @@ const basicProgress = [
const advancedOperation1 = [ const advancedOperation1 = [
{ {
key: 'op1', key: 'op1',
type: '订购关系生效', type: '订购关系生效', //Subscription relationship takes effect???
name: '曲丽丽', name: 'John Doe',
status: 'agree', status: 'agree',
updatedAt: '2017-10-03 19:23:12', updatedAt: '2017-10-03 19:23:12',
memo: '-', memo: '-',
}, },
{ {
key: 'op2', key: 'op2',
type: '财务复审', type: 'Financial Review',
name: '付小小', name: 'Fu Xiaoxiao',
status: 'reject', status: 'reject',
updatedAt: '2017-10-03 19:23:12', updatedAt: '2017-10-03 19:23:12',
memo: '不通过原因', memo: 'Do not pass the reason',
}, },
{ {
key: 'op3', key: 'op3',
type: '部门初审', type: 'Department First Review',
name: '周毛毛', name: 'Zhou Maomao',
status: 'agree', status: 'agree',
updatedAt: '2017-10-03 19:23:12', updatedAt: '2017-10-03 19:23:12',
memo: '-', memo: '-',
}, },
{ {
key: 'op4', key: 'op4',
type: '提交订单', type: 'Submit Order',
name: '林东东', name: 'Ling Dongdong',
status: 'agree', status: 'agree',
updatedAt: '2017-10-03 19:23:12', updatedAt: '2017-10-03 19:23:12',
memo: '很棒', memo: 'Great',
}, },
{ {
key: 'op5', key: 'op5',
type: '创建订单', type: 'Create Order',
name: '汗牙牙', name: 'Han Yaya',
status: 'agree', status: 'agree',
updatedAt: '2017-10-03 19:23:12', updatedAt: '2017-10-03 19:23:12',
memo: '-', memo: '-',
...@@ -122,8 +122,8 @@ const advancedOperation1 = [ ...@@ -122,8 +122,8 @@ const advancedOperation1 = [
const advancedOperation2 = [ const advancedOperation2 = [
{ {
key: 'op1', key: 'op1',
type: '订购关系生效', type: '订购关系生效',//Subscription relationship takes effect???
name: '曲丽丽', name: 'John Doe',
status: 'agree', status: 'agree',
updatedAt: '2017-10-03 19:23:12', updatedAt: '2017-10-03 19:23:12',
memo: '-', memo: '-',
...@@ -133,8 +133,8 @@ const advancedOperation2 = [ ...@@ -133,8 +133,8 @@ const advancedOperation2 = [
const advancedOperation3 = [ const advancedOperation3 = [
{ {
key: 'op1', key: 'op1',
type: '创建订单', type: 'Create Order',
name: '汗牙牙', name: 'Han Yaya',
status: 'agree', status: 'agree',
updatedAt: '2017-10-03 19:23:12', updatedAt: '2017-10-03 19:23:12',
memo: '-', memo: '-',
......
...@@ -12,9 +12,9 @@ for (let i = 0; i < 46; i += 1) { ...@@ -12,9 +12,9 @@ for (let i = 0; i < 46; i += 1) {
'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png', 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
][i % 2], ][i % 2],
no: `TradeCode ${i}`, no: `TradeCode ${i}`,
title: `一个任务名称 ${i}`, title: `Task Name ${i}`,
owner: '曲丽丽', owner: 'John Doe',
description: '这是一段描述', description: 'This is a description',
callNo: Math.floor(Math.random() * 1000), callNo: Math.floor(Math.random() * 1000),
status: Math.floor(Math.random() * 10) % 4, status: Math.floor(Math.random() * 10) % 4,
updatedAt: new Date(`2017-07-${Math.floor(i / 2) + 1}`), updatedAt: new Date(`2017-07-${Math.floor(i / 2) + 1}`),
......
...@@ -7,15 +7,15 @@ const menuData = [ ...@@ -7,15 +7,15 @@ const menuData = [
path: 'dashboard', path: 'dashboard',
children: [ children: [
{ {
name: '分析页', name: 'analysis',
path: 'analysis', path: 'analysis',
}, },
{ {
name: '监控页', name: 'monitor',
path: 'monitor', path: 'monitor',
}, },
{ {
name: '工作台', name: 'workplace',
path: 'workplace', path: 'workplace',
// hideInBreadcrumb: true, // hideInBreadcrumb: true,
// hideInMenu: true, // hideInMenu: true,
...@@ -23,56 +23,56 @@ const menuData = [ ...@@ -23,56 +23,56 @@ const menuData = [
], ],
}, },
{ {
name: '表单页', name: 'form',
icon: 'form', icon: 'form',
path: 'form', path: 'form',
children: [ children: [
{ {
name: '基础表单', name: 'basic-form',
path: 'basic-form', path: 'basic-form',
}, },
{ {
name: '分步表单', name: 'step-form',
path: 'step-form', path: 'step-form',
}, },
{ {
name: '高级表单', name: 'advanced-form',
authority: 'admin', authority: 'admin',
path: 'advanced-form', path: 'advanced-form',
}, },
], ],
}, },
{ {
name: '列表页', name: 'list',
icon: 'table', icon: 'table',
path: 'list', path: 'list',
children: [ children: [
{ {
name: '查询表格', name: 'table-list',
path: 'table-list', path: 'table-list',
}, },
{ {
name: '标准列表', name: 'basic-list',
path: 'basic-list', path: 'basic-list',
}, },
{ {
name: '卡片列表', name: 'card-list',
path: 'card-list', path: 'card-list',
}, },
{ {
name: '搜索列表', name: 'search',
path: 'search', path: 'search',
children: [ children: [
{ {
name: '搜索列表(文章)', name: 'articles',
path: 'articles', path: 'articles',
}, },
{ {
name: '搜索列表(项目)', name: 'projects',
path: 'projects', path: 'projects',
}, },
{ {
name: '搜索列表(应用)', name: 'applications',
path: 'applications', path: 'applications',
}, },
], ],
...@@ -80,38 +80,38 @@ const menuData = [ ...@@ -80,38 +80,38 @@ const menuData = [
], ],
}, },
{ {
name: '详情页', name: 'profile',
icon: 'profile', icon: 'profile',
path: 'profile', path: 'profile',
children: [ children: [
{ {
name: '基础详情页', name: 'basic',
path: 'basic', path: 'basic',
}, },
{ {
name: '高级详情页', name: 'advanced',
path: 'advanced', path: 'advanced',
authority: 'admin', authority: 'admin',
}, },
], ],
}, },
{ {
name: '结果页', name: 'result',
icon: 'check-circle-o', icon: 'check-circle-o',
path: 'result', path: 'result',
children: [ children: [
{ {
name: '成功', name: 'success',
path: 'success', path: 'success',
}, },
{ {
name: '失败', name: 'fail',
path: 'fail', path: 'fail',
}, },
], ],
}, },
{ {
name: '异常页', name: 'exception',
icon: 'warning', icon: 'warning',
path: 'exception', path: 'exception',
children: [ children: [
...@@ -128,28 +128,28 @@ const menuData = [ ...@@ -128,28 +128,28 @@ const menuData = [
path: '500', path: '500',
}, },
{ {
name: '触发异常', name: 'tigger',
path: 'trigger', path: 'trigger',
hideInMenu: true, hideInMenu: true,
}, },
], ],
}, },
{ {
name: '账户', name: 'user',
icon: 'user', icon: 'user',
path: 'user', path: 'user',
authority: 'guest', authority: 'guest',
children: [ children: [
{ {
name: '登录', name: 'login',
path: 'login', path: 'login',
}, },
{ {
name: '注册', name: 'register',
path: 'register', path: 'register',
}, },
{ {
name: '注册结果', name: 'register-result',
path: 'register-result', path: 'register-result',
}, },
], ],
......
...@@ -42,7 +42,7 @@ export default class ActiveChart extends Component { ...@@ -42,7 +42,7 @@ export default class ActiveChart extends Component {
return ( return (
<div className={styles.activeChart}> <div className={styles.activeChart}>
<NumberInfo subTitle="目标评估" total="有望达到预期" /> <NumberInfo subTitle="Target Assessment" total="Expected to reach expectations" />
<div style={{ marginTop: 32 }}> <div style={{ marginTop: 32 }}>
<MiniArea <MiniArea
animate={false} animate={false}
...@@ -65,8 +65,8 @@ export default class ActiveChart extends Component { ...@@ -65,8 +65,8 @@ export default class ActiveChart extends Component {
</div> </div>
{activeData && ( {activeData && (
<div className={styles.activeChartGrid}> <div className={styles.activeChartGrid}>
<p>{[...activeData].sort()[activeData.length - 1].y + 200} 亿元</p> <p>{[...activeData].sort()[activeData.length - 1].y + 200} Billion</p>
<p>{[...activeData].sort()[Math.floor(activeData.length / 2)].y} 亿元</p> <p>{[...activeData].sort()[Math.floor(activeData.length / 2)].y} Billion</p>
</div> </div>
)} )}
{activeData && ( {activeData && (
......
...@@ -7,7 +7,7 @@ import styles from './index.less'; ...@@ -7,7 +7,7 @@ import styles from './index.less';
const renderTotal = total => { const renderTotal = total => {
let totalDom; let totalDom;
switch (typeof total) { switch (typeof total) {
case 'undefined': case undefined:
totalDom = null; totalDom = null;
break; break;
case 'function': case 'function':
......
...@@ -7,13 +7,13 @@ const { Arc, Html, Line } = Guide; ...@@ -7,13 +7,13 @@ const { Arc, Html, Line } = Guide;
const defaultFormatter = val => { const defaultFormatter = val => {
switch (val) { switch (val) {
case '2': case '2':
return ''; return 'Poor';
case '4': case '4':
return ''; return 'Medium';
case '6': case '6':
return ''; return 'Good';
case '8': case '8':
return ''; return 'Excellent';
default: default:
return ''; return '';
} }
......
...@@ -77,7 +77,7 @@ class TagCloud extends Component { ...@@ -77,7 +77,7 @@ class TagCloud extends Component {
@Bind() @Bind()
@Debounce(500) @Debounce(500)
renderChart(nextProps) { renderChart = nextProps => {
// const colors = ['#1890FF', '#41D9C7', '#2FC25B', '#FACC14', '#9AE65C']; // const colors = ['#1890FF', '#41D9C7', '#2FC25B', '#FACC14', '#9AE65C'];
const { data, height } = nextProps || this.props; const { data, height } = nextProps || this.props;
...@@ -129,7 +129,7 @@ class TagCloud extends Component { ...@@ -129,7 +129,7 @@ class TagCloud extends Component {
} else { } else {
onload(); onload();
} }
} };
render() { render() {
const { className, height } = this.props; const { className, height } = this.props;
......
...@@ -71,8 +71,8 @@ export default class TimelineChart extends React.Component { ...@@ -71,8 +71,8 @@ export default class TimelineChart extends React.Component {
const timeScale = { const timeScale = {
type: 'time', type: 'time',
tickInterval: 60 * 60 * 1000, tickCount: 10,
mask: 'HH:mm', mask: 'HH:MM',
range: [0, 1], range: [0, 1],
}; };
......
...@@ -36,8 +36,8 @@ const salesPieData = [ ...@@ -36,8 +36,8 @@ const salesPieData = [
ReactDOM.render( ReactDOM.render(
<Pie <Pie
hasLegend hasLegend
title="销售额" title="Sale"
subTitle="销售额" subTitle="Sale"
total={() => ( total={() => (
<span <span
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
......
...@@ -13,7 +13,7 @@ import WaterWave from './WaterWave'; ...@@ -13,7 +13,7 @@ import WaterWave from './WaterWave';
import TagCloud from './TagCloud'; import TagCloud from './TagCloud';
import TimelineChart from './TimelineChart'; import TimelineChart from './TimelineChart';
const yuan = val => `&yen; ${numeral(val).format('0,0')}`; const yuan = val => `$ ${numeral(val).format('0,0')}`;
export { export {
yuan, yuan,
......
--- ---
order: 0 order: 0
title: title: Basic
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: title: Vertical
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:
en-US: DescriptionList
zh-CN: DescriptionList
subtitle: 描述列表
cols: 1
order: 4
---
成组展示多个只读字段,常见于详情页的信息展示。
## API
### DescriptionList
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------|
| layout | 布局方式 | Enum{'horizontal', 'vertical'} | 'horizontal' |
| col | 指定信息最多分几列展示,最终一行几列由 col 配置结合[响应式规则](/components/DescriptionList#响应式规则)决定 | number(0 < col <= 4) | 3 |
| title | 列表标题 | ReactNode | - |
| gutter | 列表项间距,单位为 `px` | number | 32 |
| size | 列表型号,可以设置为 `large` `small` | Enum{'large', 'small'} | - |
#### 响应式规则
| 窗口宽度 | 展示列数 |
|---------------------|---------------------------------------------|
| `≥768px` | `col` |
| `≥576px` | `col < 2 ? col : 2` |
| `<576px` | `1` |
### DescriptionList.Description
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------|
| term | 列表项标题 | ReactNode | - |
...@@ -35,7 +35,7 @@ class EditableLinkGroup extends PureComponent { ...@@ -35,7 +35,7 @@ class EditableLinkGroup extends PureComponent {
)} )}
{ {
<Button size="small" type="primary" ghost onClick={onAdd} icon="plus"> <Button size="small" type="primary" ghost onClick={onAdd} icon="plus">
添加 Add
</Button> </Button>
} }
</div> </div>
......
--- ---
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:
en-US: Ellipsis
zh-CN: Ellipsis
subtitle: 文本自动省略号
cols: 1
order: 10
---
文本过长自动处理省略号,支持按照文本长度和最大行数两种方式截取。
## API
参数 | 说明 | 类型 | 默认值
----|------|-----|------
tooltip | 移动到文本展示完整内容的提示 | boolean | -
length | 在按照长度截取下的文本最大字符数,超过则截取省略 | number | -
lines | 在按照行数截取下最大的行数,超过则截取省略 | number | `1`
--- ---
order: 2 order: 2
title: title: 403
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">Home</Button> <Button type="primary">回到首页</Button>
<Button>Detail</Button> <Button>查看详情</Button>
</div> </div>
); );
ReactDOM.render( ReactDOM.render(
......
--- ---
order: 0 order: 0
title: title: 404
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: title: 500
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';
......
...@@ -26,7 +26,7 @@ export default ({ className, linkElement = 'a', type, title, desc, img, actions, ...@@ -26,7 +26,7 @@ export default ({ className, linkElement = 'a', type, title, desc, img, actions,
to: '/', to: '/',
href: '/', href: '/',
}, },
<Button type="primary">返回首页</Button> <Button type="primary">Return</Button>
)} )}
</div> </div>
</div> </div>
......
---
title:
en-US: Exception
zh-CN: Exception
subtitle: 异常
cols: 1
order: 5
---
异常页用于对页面特定的异常状态进行反馈。通常,它包含对错误状态的阐述,并向用户提供建议或操作,避免用户感到迷失和困惑。
## API
| 参数 | 说明 | 类型 | 默认值 |
|-------------|------------------------------------------|-------------|-------|
| type | 页面类型,若配置,则自带对应类型默认的 `title``desc``img`,此默认设置可以被 `title``desc``img` 覆盖 | Enum {'403', '404', '500'} | - |
| title | 标题 | ReactNode | - |
| desc | 补充描述 | ReactNode | - |
| img | 背景图片地址 | string | - |
| actions | 建议操作,配置此属性时默认的『返回首页』按钮不生效 | ReactNode | - |
| linkElement | 定义链接的元素,默认为 `a` | string\|ReactElement | - |
...@@ -2,17 +2,17 @@ const config = { ...@@ -2,17 +2,17 @@ const config = {
403: { 403: {
img: 'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOEYFcZDnb.svg', img: 'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOEYFcZDnb.svg',
title: '403', title: '403',
desc: '抱歉,你无权访问该页面', desc: 'Sorry, you do not have permission to access this page.',
}, },
404: { 404: {
img: 'https://gw.alipayobjects.com/zos/rmsportal/KpnpchXsobRgLElEozzI.svg', img: 'https://gw.alipayobjects.com/zos/rmsportal/KpnpchXsobRgLElEozzI.svg',
title: '404', title: '404',
desc: '抱歉,你访问的页面不存在', desc: 'Sorry, the page you visited does not exist.',
}, },
500: { 500: {
img: 'https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg', img: 'https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg',
title: '500', title: '500',
desc: '抱歉,服务器出错了', desc: 'Sorry, the server has gone wrong.',
}, },
}; };
......
...@@ -69,17 +69,17 @@ export default class GlobalHeader extends PureComponent { ...@@ -69,17 +69,17 @@ export default class GlobalHeader extends PureComponent {
const menu = ( const menu = (
<Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}> <Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
<Menu.Item disabled> <Menu.Item disabled>
<Icon type="user" />个人中心 <Icon type="user" />User Information
</Menu.Item> </Menu.Item>
<Menu.Item disabled> <Menu.Item disabled>
<Icon type="setting" />设置 <Icon type="setting" />Settings
</Menu.Item> </Menu.Item>
<Menu.Item key="triggerError"> <Menu.Item key="triggerError">
<Icon type="close-circle" />触发报错 <Icon type="close-circle" />Errors Menu
</Menu.Item> </Menu.Item>
<Menu.Divider /> <Menu.Divider />
<Menu.Item key="logout"> <Menu.Item key="logout">
<Icon type="logout" />退出登录 <Icon type="logout" />Logout
</Menu.Item> </Menu.Item>
</Menu> </Menu>
); );
...@@ -100,8 +100,8 @@ export default class GlobalHeader extends PureComponent { ...@@ -100,8 +100,8 @@ export default class GlobalHeader extends PureComponent {
<div className={styles.right}> <div className={styles.right}>
<HeaderSearch <HeaderSearch
className={`${styles.action} ${styles.search}`} className={`${styles.action} ${styles.search}`}
placeholder="站内搜索" placeholder="Search?"
dataSource={['搜索提示一', '搜索提示二', '搜索提示三']} dataSource={['Tip 1', 'Tip 2', 'Tip 3']}
onSearch={value => { onSearch={value => {
console.log('input', value); // eslint-disable-line console.log('input', value); // eslint-disable-line
}} }}
...@@ -109,7 +109,7 @@ export default class GlobalHeader extends PureComponent { ...@@ -109,7 +109,7 @@ export default class GlobalHeader extends PureComponent {
console.log('enter', value); // eslint-disable-line console.log('enter', value); // eslint-disable-line
}} }}
/> />
<Tooltip title="使用文档"> <Tooltip title="Documentation">
<a <a
target="_blank" target="_blank"
href="http://pro.ant.design/docs/getting-started" href="http://pro.ant.design/docs/getting-started"
...@@ -131,21 +131,21 @@ export default class GlobalHeader extends PureComponent { ...@@ -131,21 +131,21 @@ export default class GlobalHeader extends PureComponent {
popupAlign={{ offset: [20, -16] }} popupAlign={{ offset: [20, -16] }}
> >
<NoticeIcon.Tab <NoticeIcon.Tab
list={noticeData['通知']} list={noticeData['Notice']}
title="通知" title="Notice"
emptyText="你已查看所有通知" emptyText="You have read all the notices"
emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg" emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg"
/> />
<NoticeIcon.Tab <NoticeIcon.Tab
list={noticeData['消息']} list={noticeData['News']}
title="消息" title="News"
emptyText="您已读完所有消息" emptyText="You have read all the messages"
emptyImage="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg" emptyImage="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg"
/> />
<NoticeIcon.Tab <NoticeIcon.Tab
list={noticeData['待办']} list={noticeData['Upcoming']}
title="待办" title="Upcoming"
emptyText="你已完成所有待办" emptyText="You have completed all your to-dos"
emptyImage="https://gw.alipayobjects.com/zos/rmsportal/HsIsxMZiWKrNUavQUXqx.svg" emptyImage="https://gw.alipayobjects.com/zos/rmsportal/HsIsxMZiWKrNUavQUXqx.svg"
/> />
</NoticeIcon> </NoticeIcon>
......
...@@ -73,7 +73,7 @@ function generator({ defaultProps, defaultRules, type }) { ...@@ -73,7 +73,7 @@ function generator({ defaultProps, defaultRules, type }) {
size="large" size="large"
onClick={this.onGetCaptcha} onClick={this.onGetCaptcha}
> >
{count ? `${count} s` : '获取验证码'} {count ? `${count} s` : 'Send Code'}
</Button> </Button>
</Col> </Col>
</Row> </Row>
......
...@@ -7,6 +7,7 @@ import LoginTab from './LoginTab'; ...@@ -7,6 +7,7 @@ import LoginTab from './LoginTab';
import LoginSubmit from './LoginSubmit'; import LoginSubmit from './LoginSubmit';
import styles from './index.less'; import styles from './index.less';
@Form.create()
class Login extends Component { class Login extends Component {
static defaultProps = { static defaultProps = {
className: '', className: '',
...@@ -118,4 +119,4 @@ Object.keys(LoginItem).forEach(item => { ...@@ -118,4 +119,4 @@ Object.keys(LoginItem).forEach(item => {
Login[item] = LoginItem[item]; Login[item] = LoginItem[item];
}); });
export default Form.create()(Login); export default Login;
...@@ -55,12 +55,12 @@ const map = { ...@@ -55,12 +55,12 @@ const map = {
props: { props: {
size: 'large', size: 'large',
prefix: <Icon type="mail" className={styles.prefixIcon} />, prefix: <Icon type="mail" className={styles.prefixIcon} />,
placeholder: 'captcha', placeholder: 'Verification Code',
}, },
rules: [ rules: [
{ {
required: true, required: true,
message: 'Please enter Captcha!', message: 'Enter Verification Code',
}, },
], ],
}, },
......
...@@ -14,8 +14,8 @@ export default class NoticeIcon extends PureComponent { ...@@ -14,8 +14,8 @@ export default class NoticeIcon extends PureComponent {
onClear: () => {}, onClear: () => {},
loading: false, loading: false,
locale: { locale: {
emptyText: '暂无数据', emptyText: 'No Data',
clear: '清空', clear: 'Clear ',
}, },
emptyImage: 'https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg', emptyImage: 'https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg',
}; };
......
--- ---
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';
...@@ -20,7 +12,7 @@ import numeral from 'numeral'; ...@@ -20,7 +12,7 @@ import numeral from 'numeral';
ReactDOM.render( ReactDOM.render(
<div> <div>
<NumberInfo <NumberInfo
subTitle={<span>Visits this week</span>} subTitle={<span>本周访问</span>}
total={numeral(12321).format('0,0')} total={numeral(12321).format('0,0')}
status="up" status="up"
subTotal={17.1} subTotal={17.1}
......
---
title:
en-US: NumberInfo
zh-CN: NumberInfo
subtitle: 数据文本
cols: 1
order: 10
---
常用在数据卡片中,用于突出展示某个业务数据。
## API
参数 | 说明 | 类型 | 默认值
----|------|-----|------
title | 标题 | ReactNode\|string | -
subTitle | 子标题 | ReactNode\|string | -
total | 总量 | ReactNode\|string | -
subTotal | 子总量 | ReactNode\|string | -
status | 增加状态 | 'up \| down' | -
theme | 状态样式 | string | 'light'
gap | 设置数字和描述直接的间距(像素) | number | 8
...@@ -86,7 +86,7 @@ export default class PageHeader extends PureComponent { ...@@ -86,7 +86,7 @@ export default class PageHeader extends PureComponent {
{ {
[linkElement === 'a' ? 'href' : 'to']: '/', [linkElement === 'a' ? 'href' : 'to']: '/',
}, },
'首页' 'Home'
)} )}
</Breadcrumb.Item> </Breadcrumb.Item>
); );
......
...@@ -85,17 +85,17 @@ class StandardTable extends PureComponent { ...@@ -85,17 +85,17 @@ class StandardTable extends PureComponent {
<Alert <Alert
message={ message={
<Fragment> <Fragment>
已选择 <a style={{ fontWeight: 600 }}>{selectedRowKeys.length}</a> 项&nbsp;&nbsp; Chosen <a style={{ fontWeight: 600 }}>{selectedRowKeys.length}</a> Item&nbsp;&nbsp;
{needTotalList.map(item => ( {needTotalList.map(item => (
<span style={{ marginLeft: 8 }} key={item.dataIndex}> <span style={{ marginLeft: 8 }} key={item.dataIndex}>
{item.title}总计&nbsp; {item.title} Total&nbsp;
<span style={{ fontWeight: 600 }}> <span style={{ fontWeight: 600 }}>
{item.render ? item.render(item.total) : item.total} {item.render ? item.render(item.total) : item.total}
</span> </span>
</span> </span>
))} ))}
<a onClick={this.cleanSelectedKeys} style={{ marginLeft: 24 }}> <a onClick={this.cleanSelectedKeys} style={{ marginLeft: 24 }}>
清空 Empty
</a> </a>
</Fragment> </Fragment>
} }
......
...@@ -91,7 +91,7 @@ class TagSelect extends Component { ...@@ -91,7 +91,7 @@ class TagSelect extends Component {
return ( return (
<div className={cls} style={style}> <div className={cls} style={style}>
<CheckableTag checked={checkedAll} key="tag-select-__all__" onChange={this.onSelectAll}> <CheckableTag checked={checkedAll} key="tag-select-__all__" onChange={this.onSelectAll}>
全部 All
</CheckableTag> </CheckableTag>
{value && {value &&
React.Children.map(children, child => { React.Children.map(children, child => {
...@@ -107,7 +107,7 @@ class TagSelect extends Component { ...@@ -107,7 +107,7 @@ class TagSelect extends Component {
})} })}
{expandable && ( {expandable && (
<a className={styles.trigger} onClick={this.handleExpand}> <a className={styles.trigger} onClick={this.handleExpand}>
{expand ? '收起' : '展开'} <Icon type={expand ? 'up' : 'down'} /> {expand ? 'Collapse' : 'Unfold'} <Icon type={expand ? 'up' : 'down'} />
</a> </a>
)} )}
</div> </div>
......
import '@babel/polyfill'; import '@babel/polyfill';
import 'url-polyfill'; import 'url-polyfill';
import dva from 'dva'; import dva from 'dva'; //NERF THIS
import createHistory from 'history/createHashHistory'; import createHistory from 'history/createHashHistory';
// user BrowserHistory // user BrowserHistory
// import createHistory from 'history/createBrowserHistory'; // import createHistory from 'history/createBrowserHistory';
import createLoading from 'dva-loading'; import createLoading from 'dva-loading';
import 'moment/locale/zh-cn'; import 'moment/locale/en-ca';
import './rollbar'; import './rollbar';
import './index.less'; import './index.less';
......
...@@ -6,7 +6,7 @@ import { connect } from 'dva'; ...@@ -6,7 +6,7 @@ import { connect } from 'dva';
import { Route, Redirect, Switch, routerRedux } from 'dva/router'; import { Route, Redirect, Switch, routerRedux } from 'dva/router';
import { ContainerQuery } from 'react-container-query'; import { ContainerQuery } from 'react-container-query';
import classNames from 'classnames'; import classNames from 'classnames';
import { enquireScreen, unenquireScreen } from 'enquire-js'; import { enquireScreen } from 'enquire-js';
import GlobalHeader from '../components/GlobalHeader'; import GlobalHeader from '../components/GlobalHeader';
import GlobalFooter from '../components/GlobalFooter'; import GlobalFooter from '../components/GlobalFooter';
import SiderMenu from '../components/SiderMenu'; import SiderMenu from '../components/SiderMenu';
...@@ -99,7 +99,7 @@ class BasicLayout extends React.PureComponent { ...@@ -99,7 +99,7 @@ class BasicLayout extends React.PureComponent {
}; };
} }
componentDidMount() { componentDidMount() {
this.enquireHandler = enquireScreen(mobile => { enquireScreen(mobile => {
this.setState({ this.setState({
isMobile: mobile, isMobile: mobile,
}); });
...@@ -108,9 +108,6 @@ class BasicLayout extends React.PureComponent { ...@@ -108,9 +108,6 @@ class BasicLayout extends React.PureComponent {
type: 'user/fetchCurrent', type: 'user/fetchCurrent',
}); });
} }
componentWillUnmount(){
unenquireScreen(this.enquireHandler);
}
getPageTitle() { getPageTitle() {
const { routerData, location } = this.props; const { routerData, location } = this.props;
const { pathname } = location; const { pathname } = location;
...@@ -147,7 +144,7 @@ class BasicLayout extends React.PureComponent { ...@@ -147,7 +144,7 @@ class BasicLayout extends React.PureComponent {
}); });
}; };
handleNoticeClear = type => { handleNoticeClear = type => {
message.success(`清空了${type}`); message.success(`Cleared ${type}`);
this.props.dispatch({ this.props.dispatch({
type: 'global/clearNotices', type: 'global/clearNotices',
payload: type, payload: type,
...@@ -234,8 +231,8 @@ class BasicLayout extends React.PureComponent { ...@@ -234,8 +231,8 @@ class BasicLayout extends React.PureComponent {
<GlobalFooter <GlobalFooter
links={[ links={[
{ {
key: 'Pro 首页', key: 'Pro Home',
title: 'Pro 首页', title: 'Pro Home',
href: 'http://pro.ant.design', href: 'http://pro.ant.design',
blankTarget: true, blankTarget: true,
}, },
...@@ -254,7 +251,7 @@ class BasicLayout extends React.PureComponent { ...@@ -254,7 +251,7 @@ class BasicLayout extends React.PureComponent {
]} ]}
copyright={ copyright={
<Fragment> <Fragment>
Copyright <Icon type="copyright" /> 2018 蚂蚁金服体验技术部出品 Copyright <Icon type="copyright" /> 2018 Ant Financial Experience Technology Division
</Fragment> </Fragment>
} }
/> />
......
...@@ -10,24 +10,24 @@ import { getRoutes } from '../utils/utils'; ...@@ -10,24 +10,24 @@ import { getRoutes } from '../utils/utils';
const links = [ const links = [
{ {
key: 'help', key: 'help',
title: '帮助', title: 'help',
href: '', href: '',
}, },
{ {
key: 'privacy', key: 'privacy',
title: '隐私', title: 'privacy',
href: '', href: '',
}, },
{ {
key: 'terms', key: 'terms',
title: '条款', title: 'terms',
href: '', href: '',
}, },
]; ];
const copyright = ( const copyright = (
<Fragment> <Fragment>
Copyright <Icon type="copyright" /> 2018 蚂蚁金服体验技术部出品 Copyright <Icon type="copyright" /> 2018 Ant Financial Experience Technology Division
</Fragment> </Fragment>
); );
...@@ -54,7 +54,7 @@ class UserLayout extends React.PureComponent { ...@@ -54,7 +54,7 @@ class UserLayout extends React.PureComponent {
<span className={styles.title}>Ant Design</span> <span className={styles.title}>Ant Design</span>
</Link> </Link>
</div> </div>
<div className={styles.desc}>Ant Design 是西湖区最具影响力的 Web 设计规范</div> <div className={styles.desc}>Ant Design Is the most influential Web design specification in the West Lake District</div>
</div> </div>
<Switch> <Switch>
{getRoutes(match.path, routerData).map(item => ( {getRoutes(match.path, routerData).map(item => (
......
...@@ -17,7 +17,7 @@ export default { ...@@ -17,7 +17,7 @@ export default {
effects: { effects: {
*submitRegularForm({ payload }, { call }) { *submitRegularForm({ payload }, { call }) {
yield call(fakeSubmitForm, payload); yield call(fakeSubmitForm, payload);
message.success('提交成功'); message.success('Submitted successfully');
}, },
*submitStepForm({ payload }, { call, put }) { *submitStepForm({ payload }, { call, put }) {
yield call(fakeSubmitForm, payload); yield call(fakeSubmitForm, payload);
...@@ -29,7 +29,7 @@ export default { ...@@ -29,7 +29,7 @@ export default {
}, },
*submitAdvancedForm({ payload }, { call }) { *submitAdvancedForm({ payload }, { call }) {
yield call(fakeSubmitForm, payload); yield call(fakeSubmitForm, payload);
message.success('提交成功'); message.success('Submitted successfully');
}, },
}, },
......
import React from 'react'; import React from 'react';
import { routerRedux, Route, Switch } from 'dva/router'; import { routerRedux, Route, Switch } from 'dva/router';
import { LocaleProvider, Spin } from 'antd'; import { LocaleProvider, Spin } from 'antd';
import zhCN from 'antd/lib/locale-provider/zh_CN'; import enUS from 'antd/lib/locale-provider/en_US';
import dynamic from 'dva/dynamic'; import dynamic from 'dva/dynamic';
import { getRouterData } from './common/router'; import { getRouterData } from './common/router';
import Authorized from './utils/Authorized'; import Authorized from './utils/Authorized';
...@@ -18,7 +18,7 @@ function RouterConfig({ history, app }) { ...@@ -18,7 +18,7 @@ function RouterConfig({ history, app }) {
const UserLayout = routerData['/user'].component; const UserLayout = routerData['/user'].component;
const BasicLayout = routerData['/'].component; const BasicLayout = routerData['/'].component;
return ( return (
<LocaleProvider locale={zhCN}> <LocaleProvider locale={enUS}>
<ConnectedRouter history={history}> <ConnectedRouter history={history}>
<Switch> <Switch>
<Route path="/user" component={UserLayout} /> <Route path="/user" component={UserLayout} />
......
...@@ -37,7 +37,7 @@ const { RangePicker } = DatePicker; ...@@ -37,7 +37,7 @@ const { RangePicker } = DatePicker;
const rankingListData = []; const rankingListData = [];
for (let i = 0; i < 7; i += 1) { for (let i = 0; i < 7; i += 1) {
rankingListData.push({ rankingListData.push({
title: `工专路 ${i} 号店`, title: `Park ${i} Shop`,
total: 323234, total: 323234,
}); });
} }
...@@ -134,8 +134,8 @@ export default class Analysis extends Component { ...@@ -134,8 +134,8 @@ export default class Analysis extends Component {
const menu = ( const menu = (
<Menu> <Menu>
<Menu.Item>操作一</Menu.Item> <Menu.Item>Operation One</Menu.Item>
<Menu.Item>操作二</Menu.Item> <Menu.Item>Operation Two</Menu.Item>
</Menu> </Menu>
); );
...@@ -151,16 +151,16 @@ export default class Analysis extends Component { ...@@ -151,16 +151,16 @@ export default class Analysis extends Component {
<div className={styles.salesExtraWrap}> <div className={styles.salesExtraWrap}>
<div className={styles.salesExtra}> <div className={styles.salesExtra}>
<a className={this.isActive('today')} onClick={() => this.selectDate('today')}> <a className={this.isActive('today')} onClick={() => this.selectDate('today')}>
今日 Today
</a> </a>
<a className={this.isActive('week')} onClick={() => this.selectDate('week')}> <a className={this.isActive('week')} onClick={() => this.selectDate('week')}>
本周 Week
</a> </a>
<a className={this.isActive('month')} onClick={() => this.selectDate('month')}> <a className={this.isActive('month')} onClick={() => this.selectDate('month')}>
本月 Month
</a> </a>
<a className={this.isActive('year')} onClick={() => this.selectDate('year')}> <a className={this.isActive('year')} onClick={() => this.selectDate('year')}>
全年 Year
</a> </a>
</div> </div>
<RangePicker <RangePicker
...@@ -173,25 +173,25 @@ export default class Analysis extends Component { ...@@ -173,25 +173,25 @@ export default class Analysis extends Component {
const columns = [ const columns = [
{ {
title: '排名', title: 'Index',
dataIndex: 'index', dataIndex: 'index',
key: 'index', key: 'index',
}, },
{ {
title: '搜索关键词', title: 'Keyword',
dataIndex: 'keyword', dataIndex: 'keyword',
key: 'keyword', key: 'keyword',
render: text => <a href="/">{text}</a>, render: text => <a href="/">{text}</a>,
}, },
{ {
title: '用户数', title: 'Count',
dataIndex: 'count', dataIndex: 'count',
key: 'count', key: 'count',
sorter: (a, b) => a.count - b.count, sorter: (a, b) => a.count - b.count,
className: styles.alignRight, className: styles.alignRight,
}, },
{ {
title: '周涨幅', title: 'Weekly Gains',
dataIndex: 'range', dataIndex: 'range',
key: 'range', key: 'range',
sorter: (a, b) => a.range - b.range, sorter: (a, b) => a.range - b.range,
...@@ -211,7 +211,7 @@ export default class Analysis extends Component { ...@@ -211,7 +211,7 @@ export default class Analysis extends Component {
<Col span={12}> <Col span={12}>
<NumberInfo <NumberInfo
title={data.name} title={data.name}
subTitle="转化率" subTitle="Conversion rate"
gap={2} gap={2}
total={`${data.cvr * 100}%`} total={`${data.cvr * 100}%`}
theme={currentKey !== data.name && 'light'} theme={currentKey !== data.name && 'light'}
...@@ -246,35 +246,35 @@ export default class Analysis extends Component { ...@@ -246,35 +246,35 @@ export default class Analysis extends Component {
<Col {...topColResponsiveProps}> <Col {...topColResponsiveProps}>
<ChartCard <ChartCard
bordered={false} bordered={false}
title="总销售额" title="Total Sales"
action={ action={
<Tooltip title="指标说明"> <Tooltip title="Indicator Description">
<Icon type="info-circle-o" /> <Icon type="info-circle-o" />
</Tooltip> </Tooltip>
} }
total={() => <span dangerouslySetInnerHTML={{ __html: yuan(126560) }} />} total={() => <span dangerouslySetInnerHTML={{ __html: yuan(126560) }} />}
footer={<Field label="日均销售额" value={`¥${numeral(12423).format('0,0')}`} />} footer={<Field label="Average daily sales" value={`$${numeral(12423).format('0,0')}`} />}
contentHeight={46} contentHeight={46}
> >
<Trend flag="up" style={{ marginRight: 16 }}> <Trend flag="up" style={{ marginRight: 16 }}>
周同比<span className={styles.trendText}>12%</span> Weekly Ratio<span className={styles.trendText}>12%</span>
</Trend> </Trend>
<Trend flag="down"> <Trend flag="down">
日环比<span className={styles.trendText}>11%</span> Daily ratio<span className={styles.trendText}>11%</span>
</Trend> </Trend>
</ChartCard> </ChartCard>
</Col> </Col>
<Col {...topColResponsiveProps}> <Col {...topColResponsiveProps}>
<ChartCard <ChartCard
bordered={false} bordered={false}
title="访问量" title="Views"
action={ action={
<Tooltip title="指标说明"> <Tooltip title="Indicator description">
<Icon type="info-circle-o" /> <Icon type="info-circle-o" />
</Tooltip> </Tooltip>
} }
total={numeral(8846).format('0,0')} total={numeral(8846).format('0,0')}
footer={<Field label="日访问量" value={numeral(1234).format('0,0')} />} footer={<Field label="Daily Traffic" value={numeral(1234).format('0,0')} />}
contentHeight={46} contentHeight={46}
> >
<MiniArea color="#975FE4" data={visitData} /> <MiniArea color="#975FE4" data={visitData} />
...@@ -283,14 +283,14 @@ export default class Analysis extends Component { ...@@ -283,14 +283,14 @@ export default class Analysis extends Component {
<Col {...topColResponsiveProps}> <Col {...topColResponsiveProps}>
<ChartCard <ChartCard
bordered={false} bordered={false}
title="支付笔数" title="Payments"
action={ action={
<Tooltip title="指标说明"> <Tooltip title="Indicator description">
<Icon type="info-circle-o" /> <Icon type="info-circle-o" />
</Tooltip> </Tooltip>
} }
total={numeral(6560).format('0,0')} total={numeral(6560).format('0,0')}
footer={<Field label="转化率" value="60%" />} footer={<Field label="Conversion rate" value="60%" />}
contentHeight={46} contentHeight={46}
> >
<MiniBar data={visitData} /> <MiniBar data={visitData} />
...@@ -299,9 +299,9 @@ export default class Analysis extends Component { ...@@ -299,9 +299,9 @@ export default class Analysis extends Component {
<Col {...topColResponsiveProps}> <Col {...topColResponsiveProps}>
<ChartCard <ChartCard
bordered={false} bordered={false}
title="运营活动效果" title="Operational Effect"
action={ action={
<Tooltip title="指标说明"> <Tooltip title="Indicator description">
<Icon type="info-circle-o" /> <Icon type="info-circle-o" />
</Tooltip> </Tooltip>
} }
...@@ -309,10 +309,10 @@ export default class Analysis extends Component { ...@@ -309,10 +309,10 @@ export default class Analysis extends Component {
footer={ footer={
<div style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}> <div style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
<Trend flag="up" style={{ marginRight: 16 }}> <Trend flag="up" style={{ marginRight: 16 }}>
周同比<span className={styles.trendText}>12%</span> Weekly ratio<span className={styles.trendText}>12%</span>
</Trend> </Trend>
<Trend flag="down"> <Trend flag="down">
日环比<span className={styles.trendText}>11%</span> Daily ratio<span className={styles.trendText}>11%</span>
</Trend> </Trend>
</div> </div>
} }
...@@ -326,16 +326,16 @@ export default class Analysis extends Component { ...@@ -326,16 +326,16 @@ export default class Analysis extends Component {
<Card loading={loading} bordered={false} bodyStyle={{ padding: 0 }}> <Card loading={loading} bordered={false} bodyStyle={{ padding: 0 }}>
<div className={styles.salesCard}> <div className={styles.salesCard}>
<Tabs tabBarExtraContent={salesExtra} size="large" tabBarStyle={{ marginBottom: 24 }}> <Tabs tabBarExtraContent={salesExtra} size="large" tabBarStyle={{ marginBottom: 24 }}>
<TabPane tab="销售额" key="sales"> <TabPane tab="Sale" key="sales">
<Row> <Row>
<Col xl={16} lg={12} md={12} sm={24} xs={24}> <Col xl={16} lg={12} md={12} sm={24} xs={24}>
<div className={styles.salesBar}> <div className={styles.salesBar}>
<Bar height={295} title="销售额趋势" data={salesData} /> <Bar height={295} title="Sales trend" data={salesData} />
</div> </div>
</Col> </Col>
<Col xl={8} lg={12} md={12} sm={24} xs={24}> <Col xl={8} lg={12} md={12} sm={24} xs={24}>
<div className={styles.salesRank}> <div className={styles.salesRank}>
<h4 className={styles.rankingTitle}>门店销售额排名</h4> <h4 className={styles.rankingTitle}>Store sales raking</h4>
<ul className={styles.rankingList}> <ul className={styles.rankingList}>
{rankingListData.map((item, i) => ( {rankingListData.map((item, i) => (
<li key={item.title}> <li key={item.title}>
...@@ -349,16 +349,16 @@ export default class Analysis extends Component { ...@@ -349,16 +349,16 @@ export default class Analysis extends Component {
</Col> </Col>
</Row> </Row>
</TabPane> </TabPane>
<TabPane tab="访问量" key="views"> <TabPane tab="Views" key="views">
<Row> <Row>
<Col xl={16} lg={12} md={12} sm={24} xs={24}> <Col xl={16} lg={12} md={12} sm={24} xs={24}>
<div className={styles.salesBar}> <div className={styles.salesBar}>
<Bar height={292} title="访问量趋势" data={salesData} /> <Bar height={292} title="Visits trend" data={salesData} />
</div> </div>
</Col> </Col>
<Col xl={8} lg={12} md={12} sm={24} xs={24}> <Col xl={8} lg={12} md={12} sm={24} xs={24}>
<div className={styles.salesRank}> <div className={styles.salesRank}>
<h4 className={styles.rankingTitle}>门店访问量排名</h4> <h4 className={styles.rankingTitle}>Store visits raking</h4>
<ul className={styles.rankingList}> <ul className={styles.rankingList}>
{rankingListData.map((item, i) => ( {rankingListData.map((item, i) => (
<li key={item.title}> <li key={item.title}>
...@@ -381,7 +381,7 @@ export default class Analysis extends Component { ...@@ -381,7 +381,7 @@ export default class Analysis extends Component {
<Card <Card
loading={loading} loading={loading}
bordered={false} bordered={false}
title="线上热门搜索" title="Online top research"
extra={iconGroup} extra={iconGroup}
style={{ marginTop: 24 }} style={{ marginTop: 24 }}
> >
...@@ -390,8 +390,8 @@ export default class Analysis extends Component { ...@@ -390,8 +390,8 @@ export default class Analysis extends Component {
<NumberInfo <NumberInfo
subTitle={ subTitle={
<span> <span>
搜索用户数 Search Users
<Tooltip title="指标文案"> <Tooltip title="Indicator">
<Icon style={{ marginLeft: 8 }} type="info-circle-o" /> <Icon style={{ marginLeft: 8 }} type="info-circle-o" />
</Tooltip> </Tooltip>
</span> </span>
...@@ -405,7 +405,7 @@ export default class Analysis extends Component { ...@@ -405,7 +405,7 @@ export default class Analysis extends Component {
</Col> </Col>
<Col sm={12} xs={24} style={{ marginBottom: 24 }}> <Col sm={12} xs={24} style={{ marginBottom: 24 }}>
<NumberInfo <NumberInfo
subTitle="人均搜索次数" subTitle="Search times per person"
total={2.7} total={2.7}
status="down" status="down"
subTotal={26.2} subTotal={26.2}
...@@ -431,26 +431,26 @@ export default class Analysis extends Component { ...@@ -431,26 +431,26 @@ export default class Analysis extends Component {
loading={loading} loading={loading}
className={styles.salesCard} className={styles.salesCard}
bordered={false} bordered={false}
title="销售额类别占比" title="The proportion of sales"
bodyStyle={{ padding: 24 }} bodyStyle={{ padding: 24 }}
extra={ extra={
<div className={styles.salesCardExtra}> <div className={styles.salesCardExtra}>
{iconGroup} {iconGroup}
<div className={styles.salesTypeRadio}> <div className={styles.salesTypeRadio}>
<Radio.Group value={salesType} onChange={this.handleChangeSalesType}> <Radio.Group value={salesType} onChange={this.handleChangeSalesType}>
<Radio.Button value="all">全部渠道</Radio.Button> <Radio.Button value="all">All Channels</Radio.Button>
<Radio.Button value="online">线上</Radio.Button> <Radio.Button value="online">On-line</Radio.Button>
<Radio.Button value="offline">门店</Radio.Button> <Radio.Button value="offline">Store</Radio.Button>
</Radio.Group> </Radio.Group>
</div> </div>
</div> </div>
} }
style={{ marginTop: 24, minHeight: 509 }} style={{ marginTop: 24, minHeight: 509 }}
> >
<h4 style={{ marginTop: 8, marginBottom: 32 }}>销售额</h4> <h4 style={{ marginTop: 8, marginBottom: 32 }}>Sale</h4>
<Pie <Pie
hasLegend hasLegend
subTitle="销售额" subTitle="Sales"
total={() => ( total={() => (
<span <span
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
...@@ -481,7 +481,7 @@ export default class Analysis extends Component { ...@@ -481,7 +481,7 @@ export default class Analysis extends Component {
<TimelineChart <TimelineChart
height={400} height={400}
data={offlineChartData} data={offlineChartData}
titleMap={{ y1: '客流量', y2: '支付笔数' }} titleMap={{ y1: 'Customer Flow', y2: 'Payments' }}
/> />
</div> </div>
</TabPane> </TabPane>
......
...@@ -38,31 +38,31 @@ export default class Monitor extends PureComponent { ...@@ -38,31 +38,31 @@ export default class Monitor extends PureComponent {
<Fragment> <Fragment>
<Row gutter={24}> <Row gutter={24}>
<Col xl={18} lg={24} md={24} sm={24} xs={24} style={{ marginBottom: 24 }}> <Col xl={18} lg={24} md={24} sm={24} xs={24} style={{ marginBottom: 24 }}>
<Card title="活动实时交易情况" bordered={false}> <Card title="Real-time tranding activity" bordered={false}>
<Row> <Row>
<Col md={6} sm={12} xs={24}> <Col md={6} sm={12} xs={24}>
<NumberInfo <NumberInfo
subTitle="今日交易总额" subTitle="Total transition today"
suffix="" suffix="Yuan"
total={numeral(124543233).format('0,0')} total={numeral(124543233).format('0,0')}
/> />
</Col> </Col>
<Col md={6} sm={12} xs={24}> <Col md={6} sm={12} xs={24}>
<NumberInfo subTitle="销售目标完成率" total="92%" /> <NumberInfo subTitle="Sales target rate" total="92%" />
</Col> </Col>
<Col md={6} sm={12} xs={24}> <Col md={6} sm={12} xs={24}>
<NumberInfo subTitle="活动剩余时间" total={<CountDown target={targetTime} />} /> <NumberInfo subTitle="Activity remaining time" total={<CountDown target={targetTime} />} />
</Col> </Col>
<Col md={6} sm={12} xs={24}> <Col md={6} sm={12} xs={24}>
<NumberInfo <NumberInfo
subTitle="每秒交易总额" subTitle="Total transitions per second"
suffix="" suffix="Yuan"
total={numeral(234).format('0,0')} total={numeral(234).format('0,0')}
/> />
</Col> </Col>
</Row> </Row>
<div className={styles.mapChart}> <div className={styles.mapChart}>
<Tooltip title="等待后期实现"> <Tooltip title="Waiting for late realization">
<img <img
src="https://gw.alipayobjects.com/zos/rmsportal/HBWnDEUXCnGnGrRfrpKa.png" src="https://gw.alipayobjects.com/zos/rmsportal/HBWnDEUXCnGnGrRfrpKa.png"
alt="map" alt="map"
...@@ -72,28 +72,28 @@ export default class Monitor extends PureComponent { ...@@ -72,28 +72,28 @@ export default class Monitor extends PureComponent {
</Card> </Card>
</Col> </Col>
<Col xl={6} lg={24} md={24} sm={24} xs={24}> <Col xl={6} lg={24} md={24} sm={24} xs={24}>
<Card title="活动情况预测" style={{ marginBottom: 24 }} bordered={false}> <Card title="Activity forecast" style={{ marginBottom: 24 }} bordered={false}>
<ActiveChart /> <ActiveChart />
</Card> </Card>
<Card <Card
title="券核效率" title="Voucher Efficiency"
style={{ marginBottom: 24 }} style={{ marginBottom: 24 }}
bodyStyle={{ textAlign: 'center' }} bodyStyle={{ textAlign: 'center' }}
bordered={false} bordered={false}
> >
<Gauge title="跳出率" height={180} percent={87} /> <Gauge title="Bounce rate" height={180} percent={87} />
</Card> </Card>
</Col> </Col>
</Row> </Row>
<Row gutter={24}> <Row gutter={24}>
<Col xl={12} lg={24} sm={24} xs={24}> <Col xl={12} lg={24} sm={24} xs={24}>
<Card title="各品类占比" bordered={false} className={styles.pieCard}> <Card title="Category proportion" bordered={false} className={styles.pieCard}>
<Row style={{ padding: '16px 0' }}> <Row style={{ padding: '16px 0' }}>
<Col span={8}> <Col span={8}>
<Pie <Pie
animate={false} animate={false}
percent={28} percent={28}
subTitle="中式快餐" subTitle="Chinese fast food"
total="28%" total="28%"
height={128} height={128}
lineWidth={2} lineWidth={2}
...@@ -104,7 +104,7 @@ export default class Monitor extends PureComponent { ...@@ -104,7 +104,7 @@ export default class Monitor extends PureComponent {
animate={false} animate={false}
color="#5DDECF" color="#5DDECF"
percent={22} percent={22}
subTitle="西餐" subTitle="Western food"
total="22%" total="22%"
height={128} height={128}
lineWidth={2} lineWidth={2}
...@@ -115,7 +115,7 @@ export default class Monitor extends PureComponent { ...@@ -115,7 +115,7 @@ export default class Monitor extends PureComponent {
animate={false} animate={false}
color="#2FC25B" color="#2FC25B"
percent={32} percent={32}
subTitle="火锅" subTitle="Hot pot"
total="32%" total="32%"
height={128} height={128}
lineWidth={2} lineWidth={2}
...@@ -126,7 +126,7 @@ export default class Monitor extends PureComponent { ...@@ -126,7 +126,7 @@ export default class Monitor extends PureComponent {
</Col> </Col>
<Col xl={6} lg={12} sm={24} xs={24}> <Col xl={6} lg={12} sm={24} xs={24}>
<Card <Card
title="热门搜索" title="Popular searches"
loading={loading} loading={loading}
bordered={false} bordered={false}
bodyStyle={{ overflow: 'hidden' }} bodyStyle={{ overflow: 'hidden' }}
...@@ -136,11 +136,11 @@ export default class Monitor extends PureComponent { ...@@ -136,11 +136,11 @@ export default class Monitor extends PureComponent {
</Col> </Col>
<Col xl={6} lg={12} sm={24} xs={24}> <Col xl={6} lg={12} sm={24} xs={24}>
<Card <Card
title="资源剩余" title="Resource surplus"
bodyStyle={{ textAlign: 'center', fontSize: 0 }} bodyStyle={{ textAlign: 'center', fontSize: 0 }}
bordered={false} bordered={false}
> >
<WaterWave height={161} title="补贴资金剩余" percent={34} /> <WaterWave height={161} title="remaining subsidies" percent={34} />
</Card> </Card>
</Col> </Col>
</Row> </Row>
......
...@@ -12,27 +12,27 @@ import styles from './Workplace.less'; ...@@ -12,27 +12,27 @@ import styles from './Workplace.less';
const links = [ const links = [
{ {
title: '操作一', title: 'Operação 1',
href: '', href: '',
}, },
{ {
title: '操作二', title: 'Operação 2',
href: '', href: '',
}, },
{ {
title: '操作三', title: 'Operação 3',
href: '', href: '',
}, },
{ {
title: '操作四', title: 'Operação 4',
href: '', href: '',
}, },
{ {
title: '操作五', title: 'Operação 5',
href: '', href: '',
}, },
{ {
title: '操作六', title: 'Operação 6',
href: '', href: '',
}, },
]; ];
...@@ -40,31 +40,31 @@ const links = [ ...@@ -40,31 +40,31 @@ const links = [
const members = [ const members = [
{ {
id: 'members-1', id: 'members-1',
title: '科学搬砖组', title: 'The Scientist',
logo: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png', logo: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
link: '', link: '',
}, },
{ {
id: 'members-2', id: 'members-2',
title: '程序员日常', title: 'Everyday Programmer',
logo: 'https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png', logo: 'https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png',
link: '', link: '',
}, },
{ {
id: 'members-3', id: 'members-3',
title: '设计天团', title: 'Designer Missioner',
logo: 'https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png', logo: 'https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png',
link: '', link: '',
}, },
{ {
id: 'members-4', id: 'members-4',
title: '中二少女团', title: 'Secondary girl',
logo: 'https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png', logo: 'https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png',
link: '', link: '',
}, },
{ {
id: 'members-5', id: 'members-5',
title: '骗你学计算机', title: 'Computer Learner',
logo: 'https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png', logo: 'https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png',
link: '', link: '',
}, },
...@@ -150,8 +150,8 @@ export default class Workplace extends PureComponent { ...@@ -150,8 +150,8 @@ export default class Workplace extends PureComponent {
/> />
</div> </div>
<div className={styles.content}> <div className={styles.content}>
<div className={styles.contentTitle}>早安,曲丽丽,祝你开心每一天!</div> <div className={styles.contentTitle}>Good Morning, John Doe. Have a nice day.</div>
<div>交互专家 | 蚂蚁金服-某某某事业群-某某平台部-某某技术部-UED</div> <div>Interaction Experts | Ant Financial Services - Certain Business Group - Certain Platform Division - Technical Department - UED</div>
</div> </div>
</div> </div>
); );
...@@ -159,17 +159,17 @@ export default class Workplace extends PureComponent { ...@@ -159,17 +159,17 @@ export default class Workplace extends PureComponent {
const extraContent = ( const extraContent = (
<div className={styles.extraContent}> <div className={styles.extraContent}>
<div className={styles.statItem}> <div className={styles.statItem}>
<p>项目数</p> <p>Number of Itens</p>
<p>56</p> <p>56</p>
</div> </div>
<div className={styles.statItem}> <div className={styles.statItem}>
<p>团队内排名</p> <p>Team Rank</p>
<p> <p>
8<span> / 24</span> 8<span> / 24</span>
</p> </p>
</div> </div>
<div className={styles.statItem}> <div className={styles.statItem}>
<p>项目访问</p> <p>Projects visited</p>
<p>2,223</p> <p>2,223</p>
</div> </div>
</div> </div>
...@@ -182,9 +182,9 @@ export default class Workplace extends PureComponent { ...@@ -182,9 +182,9 @@ export default class Workplace extends PureComponent {
<Card <Card
className={styles.projectList} className={styles.projectList}
style={{ marginBottom: 24 }} style={{ marginBottom: 24 }}
title="进行中的项目" title="Ongoing Projects"
bordered={false} bordered={false}
extra={<Link to="/">全部项目</Link>} extra={<Link to="/">All Itens</Link>}
loading={projectLoading} loading={projectLoading}
bodyStyle={{ padding: 0 }} bodyStyle={{ padding: 0 }}
> >
...@@ -216,7 +216,7 @@ export default class Workplace extends PureComponent { ...@@ -216,7 +216,7 @@ export default class Workplace extends PureComponent {
bodyStyle={{ padding: 0 }} bodyStyle={{ padding: 0 }}
bordered={false} bordered={false}
className={styles.activeCard} className={styles.activeCard}
title="动态" title="Dynamic"
loading={activitiesLoading} loading={activitiesLoading}
> >
<List loading={activitiesLoading} size="large"> <List loading={activitiesLoading} size="large">
...@@ -227,7 +227,7 @@ export default class Workplace extends PureComponent { ...@@ -227,7 +227,7 @@ export default class Workplace extends PureComponent {
<Col xl={8} lg={24} md={24} sm={24} xs={24}> <Col xl={8} lg={24} md={24} sm={24} xs={24}>
<Card <Card
style={{ marginBottom: 24 }} style={{ marginBottom: 24 }}
title="快速开始 / 便捷导航" title="Quick Start / Easy Navigation"
bordered={false} bordered={false}
bodyStyle={{ padding: 0 }} bodyStyle={{ padding: 0 }}
> >
...@@ -236,14 +236,14 @@ export default class Workplace extends PureComponent { ...@@ -236,14 +236,14 @@ export default class Workplace extends PureComponent {
<Card <Card
style={{ marginBottom: 24 }} style={{ marginBottom: 24 }}
bordered={false} bordered={false}
title="XX 指数" title="XX Index"
loading={radarData.length === 0} loading={radarData.length === 0}
> >
<div className={styles.chart}> <div className={styles.chart}>
<Radar hasLegend height={343} data={radarData} /> <Radar hasLegend height={343} data={radarData} />
</div> </div>
</Card> </Card>
<Card bodyStyle={{ paddingTop: 12, paddingBottom: 12 }} bordered={false} title="团队"> <Card bodyStyle={{ paddingTop: 12, paddingBottom: 12 }} bordered={false} title="Team">
<div className={styles.members}> <div className={styles.members}>
<Row gutter={48}> <Row gutter={48}>
{members.map(item => ( {members.map(item => (
......
...@@ -22,18 +22,18 @@ const { Option } = Select; ...@@ -22,18 +22,18 @@ const { Option } = Select;
const { RangePicker } = DatePicker; const { RangePicker } = DatePicker;
const fieldLabels = { const fieldLabels = {
name: '仓库名', name: 'Warehouse Name',
url: '仓库域名', url: 'Warehouse Domain Name',
owner: '仓库管理员', owner: 'Warehouse Manager',
approver: '审批人', approver: 'Approver',
dateRange: '生效日期', dateRange: 'Effective Date',
type: '仓库类型', type: 'Warehouse Type',
name2: '任务名', name2: 'Mission Name',
url2: '任务描述', url2: 'Mission Details',
owner2: '执行人', owner2: 'Performer',
approver2: '责任人', approver2: 'Responsible',
dateRange2: '生效日期', dateRange2: 'Effective Hour',
type2: '任务类型', type2: 'Task Type',
}; };
const tableData = [ const tableData = [
...@@ -115,7 +115,7 @@ class AdvancedForm extends PureComponent { ...@@ -115,7 +115,7 @@ class AdvancedForm extends PureComponent {
return ( return (
<span className={styles.errorIcon}> <span className={styles.errorIcon}>
<Popover <Popover
title="表单校验信息" title="Form Verification Information"
content={errorList} content={errorList}
overlayClassName={styles.errorPopover} overlayClassName={styles.errorPopover}
trigger="click" trigger="click"
...@@ -129,30 +129,30 @@ class AdvancedForm extends PureComponent { ...@@ -129,30 +129,30 @@ class AdvancedForm extends PureComponent {
}; };
return ( return (
<PageHeaderLayout <PageHeaderLayout
title="高级表单" title="Advanced Form"
content="高级表单常见于一次性输入和提交大批量数据的场景。" content="Advanced forms are common in scenarios where you enter and submit large amounts of data at once."
wrapperClassName={styles.advancedForm} wrapperClassName={styles.advancedForm}
> >
<Card title="仓库管理" className={styles.card} bordered={false}> <Card title="Warehouse Management" className={styles.card} bordered={false}>
<Form layout="vertical" hideRequiredMark> <Form layout="vertical" hideRequiredMark>
<Row gutter={16}> <Row gutter={16}>
<Col lg={6} md={12} sm={24}> <Col lg={6} md={12} sm={24}>
<Form.Item label={fieldLabels.name}> <Form.Item label={fieldLabels.name}>
{getFieldDecorator('name', { {getFieldDecorator('name', {
rules: [{ required: true, message: '请输入仓库名称' }], rules: [{ required: true, message: 'Please enter the warehouse name' }],
})(<Input placeholder="请输入仓库名称" />)} })(<Input placeholder="Please enter the warehouse name" />)}
</Form.Item> </Form.Item>
</Col> </Col>
<Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}> <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
<Form.Item label={fieldLabels.url}> <Form.Item label={fieldLabels.url}>
{getFieldDecorator('url', { {getFieldDecorator('url', {
rules: [{ required: true, message: '请选择' }], rules: [{ required: true, message: 'Please Choose' }],
})( })(
<Input <Input
style={{ width: '100%' }} style={{ width: '100%' }}
addonBefore="http://" addonBefore="http://"
addonAfter=".com" addonAfter=".com"
placeholder="请输入" placeholder="Please Enter"
/> />
)} )}
</Form.Item> </Form.Item>
...@@ -160,11 +160,11 @@ class AdvancedForm extends PureComponent { ...@@ -160,11 +160,11 @@ class AdvancedForm extends PureComponent {
<Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}> <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
<Form.Item label={fieldLabels.owner}> <Form.Item label={fieldLabels.owner}>
{getFieldDecorator('owner', { {getFieldDecorator('owner', {
rules: [{ required: true, message: '请选择管理员' }], rules: [{ required: true, message: 'Please Select an Administrator' }],
})( })(
<Select placeholder="请选择管理员"> <Select placeholder="Please Select an Administrator">
<Option value="xiao">付晓晓</Option> <Option value="xiao">Fu Xiaoxiao</Option>
<Option value="mao">周毛毛</Option> <Option value="mao">Zhou Maomao</Option>
</Select> </Select>
)} )}
</Form.Item> </Form.Item>
...@@ -174,11 +174,11 @@ class AdvancedForm extends PureComponent { ...@@ -174,11 +174,11 @@ class AdvancedForm extends PureComponent {
<Col lg={6} md={12} sm={24}> <Col lg={6} md={12} sm={24}>
<Form.Item label={fieldLabels.approver}> <Form.Item label={fieldLabels.approver}>
{getFieldDecorator('approver', { {getFieldDecorator('approver', {
rules: [{ required: true, message: '请选择审批员' }], rules: [{ required: true, message: 'Please Select an Approver' }],
})( })(
<Select placeholder="请选择审批员"> <Select placeholder="Please Select an Approver">
<Option value="xiao">付晓晓</Option> <Option value="xiao">Fu Xiaoxiao</Option>
<Option value="mao">周毛毛</Option> <Option value="mao">Zhou Maomao</Option>
</Select> </Select>
)} )}
</Form.Item> </Form.Item>
...@@ -186,20 +186,20 @@ class AdvancedForm extends PureComponent { ...@@ -186,20 +186,20 @@ class AdvancedForm extends PureComponent {
<Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}> <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
<Form.Item label={fieldLabels.dateRange}> <Form.Item label={fieldLabels.dateRange}>
{getFieldDecorator('dateRange', { {getFieldDecorator('dateRange', {
rules: [{ required: true, message: '请选择生效日期' }], rules: [{ required: true, message: 'Please Select an Effective Date' }],
})( })(
<RangePicker placeholder={['开始日期', '结束日期']} style={{ width: '100%' }} /> <RangePicker placeholder={['Start Date', 'End Date']} style={{ width: '100%' }} />
)} )}
</Form.Item> </Form.Item>
</Col> </Col>
<Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}> <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
<Form.Item label={fieldLabels.type}> <Form.Item label={fieldLabels.type}>
{getFieldDecorator('type', { {getFieldDecorator('type', {
rules: [{ required: true, message: '请选择仓库类型' }], rules: [{ required: true, message: 'Please Select a Warehouse Type' }],
})( })(
<Select placeholder="请选择仓库类型"> <Select placeholder="Please Select a Warehouse Type">
<Option value="private">私密</Option> <Option value="private">Private</Option>
<Option value="public">公开</Option> <Option value="public">Public</Option>
</Select> </Select>
)} )}
</Form.Item> </Form.Item>
...@@ -207,31 +207,31 @@ class AdvancedForm extends PureComponent { ...@@ -207,31 +207,31 @@ class AdvancedForm extends PureComponent {
</Row> </Row>
</Form> </Form>
</Card> </Card>
<Card title="任务管理" className={styles.card} bordered={false}> <Card title="Task Management" className={styles.card} bordered={false}>
<Form layout="vertical" hideRequiredMark> <Form layout="vertical" hideRequiredMark>
<Row gutter={16}> <Row gutter={16}>
<Col lg={6} md={12} sm={24}> <Col lg={6} md={12} sm={24}>
<Form.Item label={fieldLabels.name2}> <Form.Item label={fieldLabels.name2}>
{getFieldDecorator('name2', { {getFieldDecorator('name2', {
rules: [{ required: true, message: '请输入' }], rules: [{ required: true, message: 'Please Enter' }],
})(<Input placeholder="请输入" />)} })(<Input placeholder="Please Enter" />)}
</Form.Item> </Form.Item>
</Col> </Col>
<Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}> <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
<Form.Item label={fieldLabels.url2}> <Form.Item label={fieldLabels.url2}>
{getFieldDecorator('url2', { {getFieldDecorator('url2', {
rules: [{ required: true, message: '请选择' }], rules: [{ required: true, message: 'Please Choose' }],
})(<Input placeholder="请输入" />)} })(<Input placeholder="Please Choose" />)}
</Form.Item> </Form.Item>
</Col> </Col>
<Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}> <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
<Form.Item label={fieldLabels.owner2}> <Form.Item label={fieldLabels.owner2}>
{getFieldDecorator('owner2', { {getFieldDecorator('owner2', {
rules: [{ required: true, message: '请选择管理员' }], rules: [{ required: true, message: 'Please Select an Administrator' }],
})( })(
<Select placeholder="请选择管理员"> <Select placeholder="Please Select an Administrator">
<Option value="xiao">付晓晓</Option> <Option value="xiao">Fu Xiaoxiao</Option>
<Option value="mao">周毛毛</Option> <Option value="mao">Zhou Maomao</Option>
</Select> </Select>
)} )}
</Form.Item> </Form.Item>
...@@ -241,11 +241,11 @@ class AdvancedForm extends PureComponent { ...@@ -241,11 +241,11 @@ class AdvancedForm extends PureComponent {
<Col lg={6} md={12} sm={24}> <Col lg={6} md={12} sm={24}>
<Form.Item label={fieldLabels.approver2}> <Form.Item label={fieldLabels.approver2}>
{getFieldDecorator('approver2', { {getFieldDecorator('approver2', {
rules: [{ required: true, message: '请选择审批员' }], rules: [{ required: true, message: 'Please Select an Approver' }],
})( })(
<Select placeholder="请选择审批员"> <Select placeholder="Please Select an Approver">
<Option value="xiao">付晓晓</Option> <Option value="xiao">Fu Xiaoxiao</Option>
<Option value="mao">周毛毛</Option> <Option value="mao">Zhou Maomao</Option>
</Select> </Select>
)} )}
</Form.Item> </Form.Item>
...@@ -253,10 +253,10 @@ class AdvancedForm extends PureComponent { ...@@ -253,10 +253,10 @@ class AdvancedForm extends PureComponent {
<Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}> <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
<Form.Item label={fieldLabels.dateRange2}> <Form.Item label={fieldLabels.dateRange2}>
{getFieldDecorator('dateRange2', { {getFieldDecorator('dateRange2', {
rules: [{ required: true, message: '请输入' }], rules: [{ required: true, message: 'Please Enter' }],
})( })(
<TimePicker <TimePicker
placeholder="提醒时间" placeholder="Remind Time"
style={{ width: '100%' }} style={{ width: '100%' }}
getPopupContainer={trigger => trigger.parentNode} getPopupContainer={trigger => trigger.parentNode}
/> />
...@@ -266,11 +266,11 @@ class AdvancedForm extends PureComponent { ...@@ -266,11 +266,11 @@ class AdvancedForm extends PureComponent {
<Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}> <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
<Form.Item label={fieldLabels.type2}> <Form.Item label={fieldLabels.type2}>
{getFieldDecorator('type2', { {getFieldDecorator('type2', {
rules: [{ required: true, message: '请选择仓库类型' }], rules: [{ required: true, message: 'Please Select a Warehouse Type' }],
})( })(
<Select placeholder="请选择仓库类型"> <Select placeholder="Please Select a Warehouse Type">
<Option value="private">私密</Option> <Option value="private">Private</Option>
<Option value="public">公开</Option> <Option value="public">Public</Option>
</Select> </Select>
)} )}
</Form.Item> </Form.Item>
...@@ -278,7 +278,7 @@ class AdvancedForm extends PureComponent { ...@@ -278,7 +278,7 @@ class AdvancedForm extends PureComponent {
</Row> </Row>
</Form> </Form>
</Card> </Card>
<Card title="成员管理" bordered={false}> <Card title="Member Management" bordered={false}>
{getFieldDecorator('members', { {getFieldDecorator('members', {
initialValue: tableData, initialValue: tableData,
})(<TableForm />)} })(<TableForm />)}
...@@ -286,7 +286,7 @@ class AdvancedForm extends PureComponent { ...@@ -286,7 +286,7 @@ class AdvancedForm extends PureComponent {
<FooterToolbar style={{ width: this.state.width }}> <FooterToolbar style={{ width: this.state.width }}>
{getErrorInfo()} {getErrorInfo()}
<Button type="primary" onClick={validate} loading={submitting}> <Button type="primary" onClick={validate} loading={submitting}>
提交 Submit
</Button> </Button>
</FooterToolbar> </FooterToolbar>
</PageHeaderLayout> </PageHeaderLayout>
......
...@@ -61,65 +61,65 @@ export default class BasicForms extends PureComponent { ...@@ -61,65 +61,65 @@ export default class BasicForms extends PureComponent {
return ( return (
<PageHeaderLayout <PageHeaderLayout
title="基础表单" title="Basic Form"
content="表单页用于向用户收集或验证信息,基础表单常见于数据项较少的表单场景。" content="Form pages are used to collect or verify information from users, and basic forms are often found in form scenes with fewer data items."
> >
<Card bordered={false}> <Card bordered={false}>
<Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}> <Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
<FormItem {...formItemLayout} label="标题"> <FormItem {...formItemLayout} label="Title">
{getFieldDecorator('title', { {getFieldDecorator('title', {
rules: [ rules: [
{ {
required: true, required: true,
message: '请输入标题', message: 'Please enter a title',
}, },
], ],
})(<Input placeholder="给目标起个名字" />)} })(<Input placeholder="Give a name" />)}
</FormItem> </FormItem>
<FormItem {...formItemLayout} label="起止日期"> <FormItem {...formItemLayout} label="Start & End Dates">
{getFieldDecorator('date', { {getFieldDecorator('date', {
rules: [ rules: [
{ {
required: true, required: true,
message: '请选择起止日期', message: 'Please select starting and ending dates',
}, },
], ],
})(<RangePicker style={{ width: '100%' }} placeholder={['开始日期', '结束日期']} />)} })(<RangePicker style={{ width: '100%' }} placeholder={['Start Date', 'End Date']} />)}
</FormItem> </FormItem>
<FormItem {...formItemLayout} label="目标描述"> <FormItem {...formItemLayout} label="Goal Description">
{getFieldDecorator('goal', { {getFieldDecorator('goal', {
rules: [ rules: [
{ {
required: true, required: true,
message: '请输入目标描述', message: 'Please enter with a description',
}, },
], ],
})( })(
<TextArea <TextArea
style={{ minHeight: 32 }} style={{ minHeight: 32 }}
placeholder="请输入你的阶段性工作目标" placeholder="Please enter with your milestone goal" //milestone goal ??
rows={4} rows={4}
/> />
)} )}
</FormItem> </FormItem>
<FormItem {...formItemLayout} label="衡量标准"> <FormItem {...formItemLayout} label="Metrics">
{getFieldDecorator('standard', { {getFieldDecorator('standard', {
rules: [ rules: [
{ {
required: true, required: true,
message: '请输入衡量标准', message: 'Please Enter Metrics',
}, },
], ],
})(<TextArea style={{ minHeight: 32 }} placeholder="请输入衡量标准" rows={4} />)} })(<TextArea style={{ minHeight: 32 }} placeholder="Please Enter Metrics" rows={4} />)}
</FormItem> </FormItem>
<FormItem <FormItem
{...formItemLayout} {...formItemLayout}
label={ label={
<span> <span>
客户 Client
<em className={styles.optional}> <em className={styles.optional}>
选填 Optional
<Tooltip title="目标的服务对象"> <Tooltip title="Objective Target">
<Icon type="info-circle-o" style={{ marginRight: 4 }} /> <Icon type="info-circle-o" style={{ marginRight: 4 }} />
</Tooltip> </Tooltip>
</em> </em>
...@@ -127,56 +127,56 @@ export default class BasicForms extends PureComponent { ...@@ -127,56 +127,56 @@ export default class BasicForms extends PureComponent {
} }
> >
{getFieldDecorator('client')( {getFieldDecorator('client')(
<Input placeholder="请描述你服务的客户,内部客户直接 @姓名/工号" /> <Input placeholder="Please describe the customer you serve, internal customer direct @ name / job number" />
)} )}
</FormItem> </FormItem>
<FormItem <FormItem
{...formItemLayout} {...formItemLayout}
label={ label={
<span> <span>
邀评人<em className={styles.optional}>(选填</em> Invitees<em className={styles.optional}>Optional</em>
</span> </span>
} }
> >
{getFieldDecorator('invites')( {getFieldDecorator('invites')(
<Input placeholder="请直接 @姓名/工号,最多可邀请 5 人" /> <Input placeholder="Please direct @ name / job number, up to 5 people can be invited" />
)} )}
</FormItem> </FormItem>
<FormItem <FormItem
{...formItemLayout} {...formItemLayout}
label={ label={
<span> <span>
权重<em className={styles.optional}>(选填</em> Weights<em className={styles.optional}>Optional</em>
</span> </span>
} }
> >
{getFieldDecorator('weight')(<InputNumber placeholder="请输入" min={0} max={100} />)} {getFieldDecorator('weight')(<InputNumber placeholder="Please Enter" min={0} max={100} />)}
<span>%</span> <span>%</span>
</FormItem> </FormItem>
<FormItem {...formItemLayout} label="目标公开" help="客户、邀评人默认被分享"> <FormItem {...formItemLayout} label="Target Public" help="Customers and appraisers are shared by default">
<div> <div>
{getFieldDecorator('public', { {getFieldDecorator('public', {
initialValue: '1', initialValue: '1',
})( })(
<Radio.Group> <Radio.Group>
<Radio value="1">公开</Radio> <Radio value="1">Public</Radio>
<Radio value="2">部分公开</Radio> <Radio value="2">Partly Open</Radio>
<Radio value="3">不公开</Radio> <Radio value="3">Private</Radio>
</Radio.Group> </Radio.Group>
)} )}
<FormItem style={{ marginBottom: 0 }}> <FormItem style={{ marginBottom: 0 }}>
{getFieldDecorator('publicUsers')( {getFieldDecorator('publicUsers')(
<Select <Select
mode="multiple" mode="multiple"
placeholder="公开给" placeholder="Open to"
style={{ style={{
margin: '8px 0', margin: '8px 0',
display: getFieldValue('public') === '2' ? 'block' : 'none', display: getFieldValue('public') === '2' ? 'block' : 'none',
}} }}
> >
<Option value="1">同事甲</Option> <Option value="1">Colleague A</Option>
<Option value="2">同事乙</Option> <Option value="2">Colleague B</Option>
<Option value="3">同事丙</Option> <Option value="3">Colleague C</Option>
</Select> </Select>
)} )}
</FormItem> </FormItem>
...@@ -184,9 +184,9 @@ export default class BasicForms extends PureComponent { ...@@ -184,9 +184,9 @@ export default class BasicForms extends PureComponent {
</FormItem> </FormItem>
<FormItem {...submitFormLayout} style={{ marginTop: 32 }}> <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
<Button type="primary" htmlType="submit" loading={submitting}> <Button type="primary" htmlType="submit" loading={submitting}>
提交 Submit
</Button> </Button>
<Button style={{ marginLeft: 8 }}>保存</Button> <Button style={{ marginLeft: 8 }}>Save</Button>
</FormItem> </FormItem>
</Form> </Form>
</Card> </Card>
......
...@@ -34,48 +34,48 @@ class Step1 extends React.PureComponent { ...@@ -34,48 +34,48 @@ class Step1 extends React.PureComponent {
return ( return (
<Fragment> <Fragment>
<Form layout="horizontal" className={styles.stepForm} hideRequiredMark> <Form layout="horizontal" className={styles.stepForm} hideRequiredMark>
<Form.Item {...formItemLayout} label="付款账户"> <Form.Item {...formItemLayout} label="Payment Account">
{getFieldDecorator('payAccount', { {getFieldDecorator('payAccount', {
initialValue: data.payAccount, initialValue: data.payAccount,
rules: [{ required: true, message: '请选择付款账户' }], rules: [{ required: true, message: 'Please select a payment account' }],
})( })(
<Select placeholder="test@example.com"> <Select placeholder="test@example.com">
<Option value="ant-design@alipay.com">ant-design@alipay.com</Option> <Option value="ant-design@alipay.com">ant-design@alipay.com</Option>
</Select> </Select>
)} )}
</Form.Item> </Form.Item>
<Form.Item {...formItemLayout} label="收款账户"> <Form.Item {...formItemLayout} label="Accounts receivable">
<Input.Group compact> <Input.Group compact>
<Select defaultValue="alipay" style={{ width: 100 }}> <Select defaultValue="alipay" style={{ width: 100 }}>
<Option value="alipay">支付宝</Option> <Option value="alipay">Alipay</Option>
<Option value="bank">银行账户</Option> <Option value="bank">Bank Account</Option>
</Select> </Select>
{getFieldDecorator('receiverAccount', { {getFieldDecorator('receiverAccount', {
initialValue: data.receiverAccount, initialValue: data.receiverAccount,
rules: [ rules: [
{ required: true, message: '请输入收款人账户' }, { required: true, message: 'Please enter payee account' },
{ type: 'email', message: '账户名应为邮箱格式' }, { type: 'email', message: 'Account name should be in email format' },
], ],
})(<Input style={{ width: 'calc(100% - 100px)' }} placeholder="test@example.com" />)} })(<Input style={{ width: 'calc(100% - 100px)' }} placeholder="test@example.com" />)}
</Input.Group> </Input.Group>
</Form.Item> </Form.Item>
<Form.Item {...formItemLayout} label="收款人姓名"> <Form.Item {...formItemLayout} label="Payee Name">
{getFieldDecorator('receiverName', { {getFieldDecorator('receiverName', {
initialValue: data.receiverName, initialValue: data.receiverName,
rules: [{ required: true, message: '请输入收款人姓名' }], rules: [{ required: true, message: 'Please enter payee name' }],
})(<Input placeholder="请输入收款人姓名" />)} })(<Input placeholder="Please enter payee name" />)}
</Form.Item> </Form.Item>
<Form.Item {...formItemLayout} label="转账金额"> <Form.Item {...formItemLayout} label="Transfer Amount">
{getFieldDecorator('amount', { {getFieldDecorator('amount', {
initialValue: data.amount, initialValue: data.amount,
rules: [ rules: [
{ required: true, message: '请输入转账金额' }, { required: true, message: 'Please Enter The Transfer Amount' },
{ {
pattern: /^(\d+)((?:\.\d+)?)$/, pattern: /^(\d+)((?:\.\d+)?)$/,
message: '请输入合法金额数字', message: 'Please Enter The Legal Amount Number',
}, },
], ],
})(<Input prefix="¥" placeholder="请输入金额" />)} })(<Input prefix="$" placeholder="Please Enter The Amount" />)}
</Form.Item> </Form.Item>
<Form.Item <Form.Item
wrapperCol={{ wrapperCol={{
...@@ -88,20 +88,20 @@ class Step1 extends React.PureComponent { ...@@ -88,20 +88,20 @@ class Step1 extends React.PureComponent {
label="" label=""
> >
<Button type="primary" onClick={onValidateForm}> <Button type="primary" onClick={onValidateForm}>
下一步 Next Step
</Button> </Button>
</Form.Item> </Form.Item>
</Form> </Form>
<Divider style={{ margin: '40px 0 24px' }} /> <Divider style={{ margin: '40px 0 24px' }} />
<div className={styles.desc}> <div className={styles.desc}>
<h3>说明</h3> <h3>Instructions</h3>
<h4>转账到支付宝账户</h4> <h4>Transfer to Alipay Account</h4>
<p> <p>
如果需要,这里可以放一些关于产品的常见问题说明。如果需要,这里可以放一些关于产品的常见问题说明。如果需要,这里可以放一些关于产品的常见问题说明。 If needed, here are some common questions about the product. If needed, here are some common questions about the product. If needed, here are some common questions about the product.
</p> </p>
<h4>转账到银行卡</h4> <h4>Transfer To Bank Card</h4>
<p> <p>
如果需要,这里可以放一些关于产品的常见问题说明。如果需要,这里可以放一些关于产品的常见问题说明。如果需要,这里可以放一些关于产品的常见问题说明。 If needed, here are some common questions about the product. If needed, here are some common questions about the product. If needed, here are some common questions about the product.
</p> </p>
</div> </div>
</Fragment> </Fragment>
......
...@@ -41,30 +41,30 @@ class Step2 extends React.PureComponent { ...@@ -41,30 +41,30 @@ class Step2 extends React.PureComponent {
<Alert <Alert
closable closable
showIcon showIcon
message="确认转账后,资金将直接打入对方账户,无法退回。" message="After confirming the transfer, funds will be directly credited to the other party's account and cannot be returned."
style={{ marginBottom: 24 }} style={{ marginBottom: 24 }}
/> />
<Form.Item {...formItemLayout} className={styles.stepFormText} label="付款账户"> <Form.Item {...formItemLayout} className={styles.stepFormText} label="Payment Account: ">
{data.payAccount} {data.payAccount}
</Form.Item> </Form.Item>
<Form.Item {...formItemLayout} className={styles.stepFormText} label="收款账户"> <Form.Item {...formItemLayout} className={styles.stepFormText} label="Accounts Receivable: ">
{data.receiverAccount} {data.receiverAccount}
</Form.Item> </Form.Item>
<Form.Item {...formItemLayout} className={styles.stepFormText} label="收款人姓名"> <Form.Item {...formItemLayout} className={styles.stepFormText} label="Payee Name: ">
{data.receiverName} {data.receiverName}
</Form.Item> </Form.Item>
<Form.Item {...formItemLayout} className={styles.stepFormText} label="转账金额"> <Form.Item {...formItemLayout} className={styles.stepFormText} label="Transfer Amount: ">
<span className={styles.money}>{data.amount}</span> <span className={styles.money}>{data.amount}</span>
<span className={styles.uppercase}>{digitUppercase(data.amount)}</span> <span className={styles.uppercase}>{digitUppercase(data.amount)}</span>
</Form.Item> </Form.Item>
<Divider style={{ margin: '24px 0' }} /> <Divider style={{ margin: '24px 0' }} />
<Form.Item {...formItemLayout} label="支付密码" required={false}> <Form.Item {...formItemLayout} label="Payment Password" required={false}>
{getFieldDecorator('password', { {getFieldDecorator('password', {
initialValue: '123456', initialValue: '123456',
rules: [ rules: [
{ {
required: true, required: true,
message: '需要支付密码才能进行支付', message: 'Pay Password Needed to Make Payment',
}, },
], ],
})(<Input type="password" autoComplete="off" style={{ width: '80%' }} />)} })(<Input type="password" autoComplete="off" style={{ width: '80%' }} />)}
...@@ -81,10 +81,10 @@ class Step2 extends React.PureComponent { ...@@ -81,10 +81,10 @@ class Step2 extends React.PureComponent {
label="" label=""
> >
<Button type="primary" onClick={onValidateForm} loading={submitting}> <Button type="primary" onClick={onValidateForm} loading={submitting}>
提交 Submit
</Button> </Button>
<Button onClick={onPrev} style={{ marginLeft: 8 }}> <Button onClick={onPrev} style={{ marginLeft: 8 }}>
上一步 Previous Step
</Button> </Button>
</Form.Item> </Form.Item>
</Form> </Form>
......
...@@ -15,28 +15,28 @@ class Step3 extends React.PureComponent { ...@@ -15,28 +15,28 @@ class Step3 extends React.PureComponent {
<div className={styles.information}> <div className={styles.information}>
<Row> <Row>
<Col span={8} className={styles.label}> <Col span={8} className={styles.label}>
付款账户: Payment Account:
</Col> </Col>
<Col span={16}>{data.payAccount}</Col> <Col span={16}>{data.payAccount}</Col>
</Row> </Row>
<Row> <Row>
<Col span={8} className={styles.label}> <Col span={8} className={styles.label}>
收款账户: Accounts Receivable:
</Col> </Col>
<Col span={16}>{data.receiverAccount}</Col> <Col span={16}>{data.receiverAccount}</Col>
</Row> </Row>
<Row> <Row>
<Col span={8} className={styles.label}> <Col span={8} className={styles.label}>
收款人姓名: Payee Name:
</Col> </Col>
<Col span={16}>{data.receiverName}</Col> <Col span={16}>{data.receiverName}</Col>
</Row> </Row>
<Row> <Row>
<Col span={8} className={styles.label}> <Col span={8} className={styles.label}>
转账金额: Transfer Amount:
</Col> </Col>
<Col span={16}> <Col span={16}>
<span className={styles.money}>{data.amount}</span> <span className={styles.money}>{data.amount}</span> $
</Col> </Col>
</Row> </Row>
</div> </div>
...@@ -44,16 +44,16 @@ class Step3 extends React.PureComponent { ...@@ -44,16 +44,16 @@ class Step3 extends React.PureComponent {
const actions = ( const actions = (
<Fragment> <Fragment>
<Button type="primary" onClick={onFinish}> <Button type="primary" onClick={onFinish}>
再转一笔 Make Another Transfer
</Button> </Button>
<Button>查看账单</Button> <Button>Check Bills</Button>
</Fragment> </Fragment>
); );
return ( return (
<Result <Result
type="success" type="success"
title="操作成功" title="Successful Operation"
description="预计两小时内到账" description="It is expected to arrive within two hours"
extra={information} extra={information}
actions={actions} actions={actions}
className={styles.result} className={styles.result}
......
...@@ -28,15 +28,15 @@ export default class StepForm extends PureComponent { ...@@ -28,15 +28,15 @@ export default class StepForm extends PureComponent {
const { match, routerData } = this.props; const { match, routerData } = this.props;
return ( return (
<PageHeaderLayout <PageHeaderLayout
title="分步表单" title="Step-by-step form"
content="将一个冗长或用户不熟悉的表单任务分成多个步骤,指导用户完成。" content="Divide a lengthy or unfamiliar form task into multiple steps to guide the user through it."
> >
<Card bordered={false}> <Card bordered={false}>
<Fragment> <Fragment>
<Steps current={this.getCurrentStep()} className={styles.steps}> <Steps current={this.getCurrentStep()} className={styles.steps}>
<Step title="填写转账信息" /> <Step title="Fill in transfer information" />
<Step title="确认转账信息" /> <Step title="Confirm transfer information" />
<Step title="完成" /> <Step title="Complete" />
</Steps> </Steps>
<Switch> <Switch>
{getRoutes(match.path, routerData).map(item => ( {getRoutes(match.path, routerData).map(item => (
......
...@@ -79,7 +79,7 @@ export default class TableForm extends PureComponent { ...@@ -79,7 +79,7 @@ export default class TableForm extends PureComponent {
} }
const target = this.getRowByKey(key) || {}; const target = this.getRowByKey(key) || {};
if (!target.workId || !target.name || !target.department) { if (!target.workId || !target.name || !target.department) {
message.error('请填写完整成员信息。'); message.error('Please fill in the complete membership information.');
e.target.focus(); e.target.focus();
this.setState({ this.setState({
loading: false, loading: false,
...@@ -110,7 +110,7 @@ export default class TableForm extends PureComponent { ...@@ -110,7 +110,7 @@ export default class TableForm extends PureComponent {
render() { render() {
const columns = [ const columns = [
{ {
title: '成员姓名', title: 'Name of the Member',
dataIndex: 'name', dataIndex: 'name',
key: 'name', key: 'name',
width: '20%', width: '20%',
...@@ -122,7 +122,7 @@ export default class TableForm extends PureComponent { ...@@ -122,7 +122,7 @@ export default class TableForm extends PureComponent {
autoFocus autoFocus
onChange={e => this.handleFieldChange(e, 'name', record.key)} onChange={e => this.handleFieldChange(e, 'name', record.key)}
onKeyPress={e => this.handleKeyPress(e, record.key)} onKeyPress={e => this.handleKeyPress(e, record.key)}
placeholder="成员姓名" placeholder="Name of the Member"
/> />
); );
} }
...@@ -130,7 +130,7 @@ export default class TableForm extends PureComponent { ...@@ -130,7 +130,7 @@ export default class TableForm extends PureComponent {
}, },
}, },
{ {
title: '工号', title: 'Job Number',
dataIndex: 'workId', dataIndex: 'workId',
key: 'workId', key: 'workId',
width: '20%', width: '20%',
...@@ -141,7 +141,7 @@ export default class TableForm extends PureComponent { ...@@ -141,7 +141,7 @@ export default class TableForm extends PureComponent {
value={text} value={text}
onChange={e => this.handleFieldChange(e, 'workId', record.key)} onChange={e => this.handleFieldChange(e, 'workId', record.key)}
onKeyPress={e => this.handleKeyPress(e, record.key)} onKeyPress={e => this.handleKeyPress(e, record.key)}
placeholder="工号" placeholder="Job Number"
/> />
); );
} }
...@@ -149,7 +149,7 @@ export default class TableForm extends PureComponent { ...@@ -149,7 +149,7 @@ export default class TableForm extends PureComponent {
}, },
}, },
{ {
title: '所属部门', title: 'Department',
dataIndex: 'department', dataIndex: 'department',
key: 'department', key: 'department',
width: '40%', width: '40%',
...@@ -160,7 +160,7 @@ export default class TableForm extends PureComponent { ...@@ -160,7 +160,7 @@ export default class TableForm extends PureComponent {
value={text} value={text}
onChange={e => this.handleFieldChange(e, 'department', record.key)} onChange={e => this.handleFieldChange(e, 'department', record.key)}
onKeyPress={e => this.handleKeyPress(e, record.key)} onKeyPress={e => this.handleKeyPress(e, record.key)}
placeholder="所属部门" placeholder="Department"
/> />
); );
} }
...@@ -168,7 +168,7 @@ export default class TableForm extends PureComponent { ...@@ -168,7 +168,7 @@ export default class TableForm extends PureComponent {
}, },
}, },
{ {
title: '操作', title: 'Operating',
key: 'action', key: 'action',
render: (text, record) => { render: (text, record) => {
if (!!record.editable && this.state.loading) { if (!!record.editable && this.state.loading) {
...@@ -178,28 +178,28 @@ export default class TableForm extends PureComponent { ...@@ -178,28 +178,28 @@ export default class TableForm extends PureComponent {
if (record.isNew) { if (record.isNew) {
return ( return (
<span> <span>
<a onClick={e => this.saveRow(e, record.key)}>添加</a> <a onClick={e => this.saveRow(e, record.key)}>Add to</a>
<Divider type="vertical" /> <Divider type="vertical" />
<Popconfirm title="是否要删除此行?" onConfirm={() => this.remove(record.key)}> <Popconfirm title="Do you want to delete this line?" onConfirm={() => this.remove(record.key)}>
<a>删除</a> <a>Delete</a>
</Popconfirm> </Popconfirm>
</span> </span>
); );
} }
return ( return (
<span> <span>
<a onClick={e => this.saveRow(e, record.key)}>保存</a> <a onClick={e => this.saveRow(e, record.key)}>Save</a>
<Divider type="vertical" /> <Divider type="vertical" />
<a onClick={e => this.cancel(e, record.key)}>取消</a> <a onClick={e => this.cancel(e, record.key)}>Cancel</a>
</span> </span>
); );
} }
return ( return (
<span> <span>
<a onClick={e => this.toggleEditable(e, record.key)}>编辑</a> <a onClick={e => this.toggleEditable(e, record.key)}>Edit</a>
<Divider type="vertical" /> <Divider type="vertical" />
<Popconfirm title="是否要删除此行?" onConfirm={() => this.remove(record.key)}> <Popconfirm title="Do you want to delete this line?" onConfirm={() => this.remove(record.key)}>
<a>删除</a> <a>Delete</a>
</Popconfirm> </Popconfirm>
</span> </span>
); );
...@@ -224,7 +224,7 @@ export default class TableForm extends PureComponent { ...@@ -224,7 +224,7 @@ export default class TableForm extends PureComponent {
onClick={this.newMember} onClick={this.newMember}
icon="plus" icon="plus"
> >
新增成员 Add Member
</Button> </Button>
</Fragment> </Fragment>
); );
......
...@@ -21,7 +21,7 @@ const formatWan = val => { ...@@ -21,7 +21,7 @@ const formatWan = val => {
result = ( result = (
<span> <span>
{result} {result}
<em className={styles.wan}></em> <em className={styles.wan}>0000</em>
</span> </span>
); );
} }
...@@ -69,11 +69,11 @@ export default class FilterCardList extends PureComponent { ...@@ -69,11 +69,11 @@ export default class FilterCardList extends PureComponent {
const CardInfo = ({ activeUser, newUser }) => ( const CardInfo = ({ activeUser, newUser }) => (
<div className={styles.cardInfo}> <div className={styles.cardInfo}>
<div> <div>
<p>活跃用户</p> <p>Active User</p>
<p>{activeUser}</p> <p>{activeUser}</p>
</div> </div>
<div> <div>
<p>新增用户</p> <p>New User</p>
<p>{newUser}</p> <p>{newUser}</p>
</div> </div>
</div> </div>
...@@ -110,51 +110,51 @@ export default class FilterCardList extends PureComponent { ...@@ -110,51 +110,51 @@ export default class FilterCardList extends PureComponent {
<div className={styles.filterCardList}> <div className={styles.filterCardList}>
<Card bordered={false}> <Card bordered={false}>
<Form layout="inline"> <Form layout="inline">
<StandardFormRow title="所属类目" block style={{ paddingBottom: 11 }}> <StandardFormRow title="Categories" block style={{ paddingBottom: 11 }}>
<FormItem> <FormItem>
{getFieldDecorator('category')( {getFieldDecorator('category')(
<TagSelect onChange={this.handleFormSubmit} expandable> <TagSelect onChange={this.handleFormSubmit} expandable>
<TagSelect.Option value="cat1">类目一</TagSelect.Option> <TagSelect.Option value="cat1">Category 1</TagSelect.Option>
<TagSelect.Option value="cat2">类目二</TagSelect.Option> <TagSelect.Option value="cat2">Category 2</TagSelect.Option>
<TagSelect.Option value="cat3">类目三</TagSelect.Option> <TagSelect.Option value="cat3">Category 3</TagSelect.Option>
<TagSelect.Option value="cat4">类目四</TagSelect.Option> <TagSelect.Option value="cat4">Category 4</TagSelect.Option>
<TagSelect.Option value="cat5">类目五</TagSelect.Option> <TagSelect.Option value="cat5">Category 5</TagSelect.Option>
<TagSelect.Option value="cat6">类目六</TagSelect.Option> <TagSelect.Option value="cat6">Category 6</TagSelect.Option>
<TagSelect.Option value="cat7">类目七</TagSelect.Option> <TagSelect.Option value="cat7">Category 7</TagSelect.Option>
<TagSelect.Option value="cat8">类目八</TagSelect.Option> <TagSelect.Option value="cat8">Category 8</TagSelect.Option>
<TagSelect.Option value="cat9">类目九</TagSelect.Option> <TagSelect.Option value="cat9">Category 9</TagSelect.Option>
<TagSelect.Option value="cat10">类目十</TagSelect.Option> <TagSelect.Option value="cat10">Category 10</TagSelect.Option>
<TagSelect.Option value="cat11">类目十一</TagSelect.Option> <TagSelect.Option value="cat11">Category 11</TagSelect.Option>
<TagSelect.Option value="cat12">类目十二</TagSelect.Option> <TagSelect.Option value="cat12">Category 12</TagSelect.Option>
</TagSelect> </TagSelect>
)} )}
</FormItem> </FormItem>
</StandardFormRow> </StandardFormRow>
<StandardFormRow title="其它选项" grid last> <StandardFormRow title="Other Options" grid last>
<Row gutter={16}> <Row gutter={16}>
<Col lg={8} md={10} sm={10} xs={24}> <Col lg={8} md={10} sm={10} xs={24}>
<FormItem {...formItemLayout} label="作者"> <FormItem {...formItemLayout} label="The Author">
{getFieldDecorator('author', {})( {getFieldDecorator('author', {})(
<Select <Select
onChange={this.handleFormSubmit} onChange={this.handleFormSubmit}
placeholder="不限" placeholder="Any"
style={{ maxWidth: 200, width: '100%' }} style={{ maxWidth: 200, width: '100%' }}
> >
<Option value="lisa">王昭君</Option> <Option value="lisa">In Progress</Option>
</Select> </Select>
)} )}
</FormItem> </FormItem>
</Col> </Col>
<Col lg={8} md={10} sm={10} xs={24}> <Col lg={8} md={10} sm={10} xs={24}>
<FormItem {...formItemLayout} label="好评度"> <FormItem {...formItemLayout} label="Praise of">
{getFieldDecorator('rate', {})( {getFieldDecorator('rate', {})(
<Select <Select
onChange={this.handleFormSubmit} onChange={this.handleFormSubmit}
placeholder="不限" placeholder="Any"
style={{ maxWidth: 200, width: '100%' }} style={{ maxWidth: 200, width: '100%' }}
> >
<Option value="good">优秀</Option> <Option value="good">Good</Option>
<Option value="normal">普通</Option> <Option value="normal">Normal</Option>
</Select> </Select>
)} )}
</FormItem> </FormItem>
...@@ -175,13 +175,13 @@ export default class FilterCardList extends PureComponent { ...@@ -175,13 +175,13 @@ export default class FilterCardList extends PureComponent {
hoverable hoverable
bodyStyle={{ paddingBottom: 20 }} bodyStyle={{ paddingBottom: 20 }}
actions={[ actions={[
<Tooltip title="下载"> <Tooltip title="Download">
<Icon type="download" /> <Icon type="download" />
</Tooltip>, </Tooltip>,
<Tooltip title="编辑"> <Tooltip title="Edit">
<Icon type="edit" /> <Icon type="edit" />
</Tooltip>, </Tooltip>,
<Tooltip title="分享"> <Tooltip title="Share">
<Icon type="share-alt" /> <Icon type="share-alt" />
</Tooltip>, </Tooltip>,
<Dropdown overlay={itemMenu}> <Dropdown overlay={itemMenu}>
......
...@@ -45,23 +45,23 @@ export default class SearchList extends Component { ...@@ -45,23 +45,23 @@ export default class SearchList extends Component {
const owners = [ const owners = [
{ {
id: 'wzj', id: 'wzj',
name: '我自己', name: 'Myself', //Wo Ziji
}, },
{ {
id: 'wjh', id: 'wjh',
name: '吴家豪', name: 'Wu Jiahao',
}, },
{ {
id: 'zxx', id: 'zxx',
name: '周星星', name: 'Zhou Xiaoxiao',
}, },
{ {
id: 'zly', id: 'zly',
name: '赵丽颖', name: 'Zhao Liying',
}, },
{ {
id: 'ym', id: 'ym',
name: '姚明', name: 'Yao Ming',
}, },
]; ];
...@@ -77,7 +77,7 @@ export default class SearchList extends Component { ...@@ -77,7 +77,7 @@ export default class SearchList extends Component {
<div className={styles.description}>{content}</div> <div className={styles.description}>{content}</div>
<div className={styles.extra}> <div className={styles.extra}>
<Avatar src={avatar} size="small" /> <Avatar src={avatar} size="small" />
<a href={href}>{owner}</a> 发布在 <a href={href}>{href}</a> <a href={href}>{owner}</a> Posted In <a href={href}>{href}</a>
<em>{moment(updatedAt).format('YYYY-MM-DD HH:mm')}</em> <em>{moment(updatedAt).format('YYYY-MM-DD HH:mm')}</em>
</div> </div>
</div> </div>
...@@ -97,10 +97,10 @@ export default class SearchList extends Component { ...@@ -97,10 +97,10 @@ export default class SearchList extends Component {
<Button onClick={this.fetchMore} style={{ paddingLeft: 48, paddingRight: 48 }}> <Button onClick={this.fetchMore} style={{ paddingLeft: 48, paddingRight: 48 }}>
{loading ? ( {loading ? (
<span> <span>
<Icon type="loading" /> 加载中... <Icon type="loading" /> Loading...
</span> </span>
) : ( ) : (
'加载更多' 'Load More'
)} )}
</Button> </Button>
</div> </div>
...@@ -110,22 +110,22 @@ export default class SearchList extends Component { ...@@ -110,22 +110,22 @@ export default class SearchList extends Component {
<Fragment> <Fragment>
<Card bordered={false}> <Card bordered={false}>
<Form layout="inline"> <Form layout="inline">
<StandardFormRow title="所属类目" block style={{ paddingBottom: 11 }}> <StandardFormRow title="Categories" block style={{ paddingBottom: 11 }}>
<FormItem> <FormItem>
{getFieldDecorator('category')( {getFieldDecorator('category')(
<TagSelect onChange={this.handleFormSubmit} expandable> <TagSelect onChange={this.handleFormSubmit} expandable>
<TagSelect.Option value="cat1">类目一</TagSelect.Option> <TagSelect.Option value="cat1">Category 1</TagSelect.Option>
<TagSelect.Option value="cat2">类目二</TagSelect.Option> <TagSelect.Option value="cat2">Category 2</TagSelect.Option>
<TagSelect.Option value="cat3">类目三</TagSelect.Option> <TagSelect.Option value="cat3">Category 3</TagSelect.Option>
<TagSelect.Option value="cat4">类目四</TagSelect.Option> <TagSelect.Option value="cat4">Category 4</TagSelect.Option>
<TagSelect.Option value="cat5">类目五</TagSelect.Option> <TagSelect.Option value="cat5">Category 5</TagSelect.Option>
<TagSelect.Option value="cat6">类目六</TagSelect.Option> <TagSelect.Option value="cat6">Category 6</TagSelect.Option>
<TagSelect.Option value="cat7">类目七</TagSelect.Option> <TagSelect.Option value="cat7">Category 7</TagSelect.Option>
<TagSelect.Option value="cat8">类目八</TagSelect.Option> <TagSelect.Option value="cat8">Category 8</TagSelect.Option>
<TagSelect.Option value="cat9">类目九</TagSelect.Option> <TagSelect.Option value="cat9">Category 9</TagSelect.Option>
<TagSelect.Option value="cat10">类目十</TagSelect.Option> <TagSelect.Option value="cat10">Category 10</TagSelect.Option>
<TagSelect.Option value="cat11">类目十一</TagSelect.Option> <TagSelect.Option value="cat11">Category 11</TagSelect.Option>
<TagSelect.Option value="cat12">类目十二</TagSelect.Option> <TagSelect.Option value="cat12">Category 12</TagSelect.Option>
</TagSelect> </TagSelect>
)} )}
</FormItem> </FormItem>
...@@ -140,7 +140,7 @@ export default class SearchList extends Component { ...@@ -140,7 +140,7 @@ export default class SearchList extends Component {
<Select <Select
mode="multiple" mode="multiple"
style={{ maxWidth: 286, width: '100%' }} style={{ maxWidth: 286, width: '100%' }}
placeholder="选择 owner" placeholder="Select Owner"
> >
{owners.map(owner => ( {owners.map(owner => (
<Option key={owner.id} value={owner.id}> <Option key={owner.id} value={owner.id}>
...@@ -150,36 +150,36 @@ export default class SearchList extends Component { ...@@ -150,36 +150,36 @@ export default class SearchList extends Component {
</Select> </Select>
)} )}
<a className={styles.selfTrigger} onClick={this.setOwner}> <a className={styles.selfTrigger} onClick={this.setOwner}>
只看自己的 Your Own
</a> </a>
</FormItem> </FormItem>
</Col> </Col>
</Row> </Row>
</StandardFormRow> </StandardFormRow>
<StandardFormRow title="其它选项" grid last> <StandardFormRow title="Other Options" grid last>
<Row gutter={16}> <Row gutter={16}>
<Col xl={8} lg={10} md={12} sm={24} xs={24}> <Col xl={8} lg={10} md={12} sm={24} xs={24}>
<FormItem {...formItemLayout} label="活跃用户"> <FormItem {...formItemLayout} label="Active User">
{getFieldDecorator('user', {})( {getFieldDecorator('user', {})(
<Select <Select
onChange={this.handleFormSubmit} onChange={this.handleFormSubmit}
placeholder="不限" placeholder="Any"
style={{ maxWidth: 200, width: '100%' }} style={{ maxWidth: 200, width: '100%' }}
> >
<Option value="lisa">李三</Option> <Option value="lisa">Li San</Option>
</Select> </Select>
)} )}
</FormItem> </FormItem>
</Col> </Col>
<Col xl={8} lg={10} md={12} sm={24} xs={24}> <Col xl={8} lg={10} md={12} sm={24} xs={24}>
<FormItem {...formItemLayout} label="好评度"> <FormItem {...formItemLayout} label="Praise Of">
{getFieldDecorator('rate', {})( {getFieldDecorator('rate', {})(
<Select <Select
onChange={this.handleFormSubmit} onChange={this.handleFormSubmit}
placeholder="不限" placeholder="Any"
style={{ maxWidth: 200, width: '100%' }} style={{ maxWidth: 200, width: '100%' }}
> >
<Option value="good">优秀</Option> <Option value="good">Excellent</Option>
</Select> </Select>
)} )}
</FormItem> </FormItem>
...@@ -219,8 +219,8 @@ export default class SearchList extends Component { ...@@ -219,8 +219,8 @@ export default class SearchList extends Component {
description={ description={
<span> <span>
<Tag>Ant Design</Tag> <Tag>Ant Design</Tag>
<Tag>设计语言</Tag> <Tag>Design Language</Tag>
<Tag>蚂蚁金服</Tag> <Tag>Ant Financial Service Group</Tag>
</span> </span>
} }
/> />
......
...@@ -52,11 +52,11 @@ export default class BasicList extends PureComponent { ...@@ -52,11 +52,11 @@ export default class BasicList extends PureComponent {
const extraContent = ( const extraContent = (
<div className={styles.extraContent}> <div className={styles.extraContent}>
<RadioGroup defaultValue="all"> <RadioGroup defaultValue="all">
<RadioButton value="all">全部</RadioButton> <RadioButton value="all">All</RadioButton>
<RadioButton value="progress">进行中</RadioButton> <RadioButton value="progress">In Progress</RadioButton>
<RadioButton value="waiting">等待中</RadioButton> <RadioButton value="waiting">Waiting</RadioButton>
</RadioGroup> </RadioGroup>
<Search className={styles.extraContentSearch} placeholder="请输入" onSearch={() => ({})} /> <Search className={styles.extraContentSearch} placeholder="Please Enter" onSearch={() => ({})} />
</div> </div>
); );
...@@ -74,7 +74,7 @@ export default class BasicList extends PureComponent { ...@@ -74,7 +74,7 @@ export default class BasicList extends PureComponent {
<p>{owner}</p> <p>{owner}</p>
</div> </div>
<div className={styles.listContentItem}> <div className={styles.listContentItem}>
<span>开始时间</span> <span>Starting time</span>
<p>{moment(createdAt).format('YYYY-MM-DD HH:mm')}</p> <p>{moment(createdAt).format('YYYY-MM-DD HH:mm')}</p>
</div> </div>
<div className={styles.listContentItem}> <div className={styles.listContentItem}>
...@@ -86,10 +86,10 @@ export default class BasicList extends PureComponent { ...@@ -86,10 +86,10 @@ export default class BasicList extends PureComponent {
const menu = ( const menu = (
<Menu> <Menu>
<Menu.Item> <Menu.Item>
<a>编辑</a> <a>Edit</a>
</Menu.Item> </Menu.Item>
<Menu.Item> <Menu.Item>
<a>删除</a> <a>Delete</a>
</Menu.Item> </Menu.Item>
</Menu> </Menu>
); );
...@@ -97,7 +97,7 @@ export default class BasicList extends PureComponent { ...@@ -97,7 +97,7 @@ export default class BasicList extends PureComponent {
const MoreBtn = () => ( const MoreBtn = () => (
<Dropdown overlay={menu}> <Dropdown overlay={menu}>
<a> <a>
更多 <Icon type="down" /> More <Icon type="down" />
</a> </a>
</Dropdown> </Dropdown>
); );
...@@ -108,13 +108,13 @@ export default class BasicList extends PureComponent { ...@@ -108,13 +108,13 @@ export default class BasicList extends PureComponent {
<Card bordered={false}> <Card bordered={false}>
<Row> <Row>
<Col sm={8} xs={24}> <Col sm={8} xs={24}>
<Info title="我的待办" value="8个任务" bordered /> <Info title="My To-do" value="8 Tasks" bordered />
</Col> </Col>
<Col sm={8} xs={24}> <Col sm={8} xs={24}>
<Info title="本周任务平均处理时间" value="32分钟" bordered /> <Info title="This week's average processing time" value="32 Minutes" bordered />
</Col> </Col>
<Col sm={8} xs={24}> <Col sm={8} xs={24}>
<Info title="本周完成任务数" value="24个任务" /> <Info title="The number of tasks completed this week" value="24 Tasks" />
</Col> </Col>
</Row> </Row>
</Card> </Card>
...@@ -122,13 +122,13 @@ export default class BasicList extends PureComponent { ...@@ -122,13 +122,13 @@ export default class BasicList extends PureComponent {
<Card <Card
className={styles.listCard} className={styles.listCard}
bordered={false} bordered={false}
title="标准列表" title="Standard list"
style={{ marginTop: 24 }} style={{ marginTop: 24 }}
bodyStyle={{ padding: '0 32px 40px 32px' }} bodyStyle={{ padding: '0 32px 40px 32px' }}
extra={extraContent} extra={extraContent}
> >
<Button type="dashed" style={{ width: '100%', marginBottom: 8 }} icon="plus"> <Button type="dashed" style={{ width: '100%', marginBottom: 8 }} icon="plus">
添加 Add to
</Button> </Button>
<List <List
size="large" size="large"
...@@ -137,7 +137,7 @@ export default class BasicList extends PureComponent { ...@@ -137,7 +137,7 @@ export default class BasicList extends PureComponent {
pagination={paginationProps} pagination={paginationProps}
dataSource={list} dataSource={list}
renderItem={item => ( renderItem={item => (
<List.Item actions={[<a>编辑</a>, <MoreBtn />]}> <List.Item actions={[<a>Edit</a>, <MoreBtn />]}>
<List.Item.Meta <List.Item.Meta
avatar={<Avatar src={item.logo} shape="square" size="large" />} avatar={<Avatar src={item.logo} shape="square" size="large" />}
title={<a href={item.href}>{item.title}</a>} title={<a href={item.href}>{item.title}</a>}
......
...@@ -27,21 +27,20 @@ export default class CardList extends PureComponent { ...@@ -27,21 +27,20 @@ export default class CardList extends PureComponent {
const content = ( const content = (
<div className={styles.pageHeaderContent}> <div className={styles.pageHeaderContent}>
<p> <p>
段落示意:蚂蚁金服务设计平台 ant.design,用最小的工作量,无缝接入蚂蚁金服生态, Paragraphant.design, an Ant Financial Service Design Platform, seamlessly accesses Ant Financial with minimum workload, providing experience solutions that span design and development.
提供跨越设计与开发的体验解决方案。
</p> </p>
<div className={styles.contentLink}> <div className={styles.contentLink}>
<a> <a>
<img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg" />{' '} <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg" />{' '}
快速开始 Quick Start
</a> </a>
<a> <a>
<img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg" />{' '} <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg" />{' '}
产品简介 Product Introduction
</a> </a>
<a> <a>
<img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg" />{' '} <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg" />{' '}
产品文档 Product Documentation
</a> </a>
</div> </div>
</div> </div>
...@@ -50,14 +49,14 @@ export default class CardList extends PureComponent { ...@@ -50,14 +49,14 @@ export default class CardList extends PureComponent {
const extraContent = ( const extraContent = (
<div className={styles.extraImg}> <div className={styles.extraImg}>
<img <img
alt="这是一个标题" alt="This is a Title"
src="https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png" src="https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png"
/> />
</div> </div>
); );
return ( return (
<PageHeaderLayout title="卡片列表" content={content} extraContent={extraContent}> <PageHeaderLayout title="Card List" content={content} extraContent={extraContent}>
<div className={styles.cardList}> <div className={styles.cardList}>
<List <List
rowKey="id" rowKey="id"
...@@ -67,7 +66,7 @@ export default class CardList extends PureComponent { ...@@ -67,7 +66,7 @@ export default class CardList extends PureComponent {
renderItem={item => renderItem={item =>
item ? ( item ? (
<List.Item key={item.id}> <List.Item key={item.id}>
<Card hoverable className={styles.card} actions={[<a>操作一</a>, <a>操作二</a>]}> <Card hoverable className={styles.card} actions={[<a>Operation 1</a>, <a>Operation 2</a>]}>
<Card.Meta <Card.Meta
avatar={<img alt="" className={styles.cardAvatar} src={item.avatar} />} avatar={<img alt="" className={styles.cardAvatar} src={item.avatar} />}
title={<a href="#">{item.title}</a>} title={<a href="#">{item.title}</a>}
...@@ -82,7 +81,7 @@ export default class CardList extends PureComponent { ...@@ -82,7 +81,7 @@ export default class CardList extends PureComponent {
) : ( ) : (
<List.Item> <List.Item>
<Button type="dashed" className={styles.newButton}> <Button type="dashed" className={styles.newButton}>
<Icon type="plus" /> 新增产品 <Icon type="plus" /> New Product
</Button> </Button>
</List.Item> </List.Item>
) )
......
...@@ -28,23 +28,23 @@ export default class SearchList extends Component { ...@@ -28,23 +28,23 @@ export default class SearchList extends Component {
const tabList = [ const tabList = [
{ {
key: 'articles', key: 'articles',
tab: '文章', tab: 'Articles',
}, },
{ {
key: 'applications', key: 'applications',
tab: '应用', tab: 'Applications',
}, },
{ {
key: 'projects', key: 'projects',
tab: '项目', tab: 'Projects',
}, },
]; ];
const mainSearch = ( const mainSearch = (
<div style={{ textAlign: 'center' }}> <div style={{ textAlign: 'center' }}>
<Input.Search <Input.Search
placeholder="请输入" placeholder="Please Enter"
enterButton="搜索" enterButton="Search For"
size="large" size="large"
onSearch={this.handleFormSubmit} onSearch={this.handleFormSubmit}
style={{ width: 522 }} style={{ width: 522 }}
...@@ -57,7 +57,7 @@ export default class SearchList extends Component { ...@@ -57,7 +57,7 @@ export default class SearchList extends Component {
return ( return (
<PageHeaderLayout <PageHeaderLayout
title="搜索列表" title="Search List"
content={mainSearch} content={mainSearch}
tabList={tabList} tabList={tabList}
tabActiveKey={location.pathname.replace(`${match.path}/`, '')} tabActiveKey={location.pathname.replace(`${match.path}/`, '')}
......
...@@ -99,51 +99,51 @@ export default class CoverCardList extends PureComponent { ...@@ -99,51 +99,51 @@ export default class CoverCardList extends PureComponent {
<div className={styles.coverCardList}> <div className={styles.coverCardList}>
<Card bordered={false}> <Card bordered={false}>
<Form layout="inline"> <Form layout="inline">
<StandardFormRow title="所属类目" block style={{ paddingBottom: 11 }}> <StandardFormRow title="Categories" block style={{ paddingBottom: 11 }}>
<FormItem> <FormItem>
{getFieldDecorator('category')( {getFieldDecorator('category')(
<TagSelect onChange={this.handleFormSubmit} expandable> <TagSelect onChange={this.handleFormSubmit} expandable>
<TagSelect.Option value="cat1">类目一</TagSelect.Option> <TagSelect.Option value="cat1">Category 1</TagSelect.Option>
<TagSelect.Option value="cat2">类目二</TagSelect.Option> <TagSelect.Option value="cat2">Category 2</TagSelect.Option>
<TagSelect.Option value="cat3">类目三</TagSelect.Option> <TagSelect.Option value="cat3">Category 3</TagSelect.Option>
<TagSelect.Option value="cat4">类目四</TagSelect.Option> <TagSelect.Option value="cat4">Category 4</TagSelect.Option>
<TagSelect.Option value="cat5">类目五</TagSelect.Option> <TagSelect.Option value="cat5">Category 5</TagSelect.Option>
<TagSelect.Option value="cat6">类目六</TagSelect.Option> <TagSelect.Option value="cat6">Category 6</TagSelect.Option>
<TagSelect.Option value="cat7">类目七</TagSelect.Option> <TagSelect.Option value="cat7">Category 7</TagSelect.Option>
<TagSelect.Option value="cat8">类目八</TagSelect.Option> <TagSelect.Option value="cat8">Category 8</TagSelect.Option>
<TagSelect.Option value="cat9">类目九</TagSelect.Option> <TagSelect.Option value="cat9">Category 9</TagSelect.Option>
<TagSelect.Option value="cat10">类目十</TagSelect.Option> <TagSelect.Option value="cat10">Category 10</TagSelect.Option>
<TagSelect.Option value="cat11">类目十一</TagSelect.Option> <TagSelect.Option value="cat11">Category 11</TagSelect.Option>
<TagSelect.Option value="cat12">类目十二</TagSelect.Option> <TagSelect.Option value="cat12">Category 12</TagSelect.Option>
</TagSelect> </TagSelect>
)} )}
</FormItem> </FormItem>
</StandardFormRow> </StandardFormRow>
<StandardFormRow title="其它选项" grid last> <StandardFormRow title="Other Options" grid last>
<Row gutter={16}> <Row gutter={16}>
<Col lg={8} md={10} sm={10} xs={24}> <Col lg={8} md={10} sm={10} xs={24}>
<FormItem {...formItemLayout} label="作者"> <FormItem {...formItemLayout} label="The Author">
{getFieldDecorator('author', {})( {getFieldDecorator('author', {})(
<Select <Select
onChange={this.handleFormSubmit} onChange={this.handleFormSubmit}
placeholder="不限" placeholder="Any"
style={{ maxWidth: 200, width: '100%' }} style={{ maxWidth: 200, width: '100%' }}
> >
<Option value="lisa">王昭君</Option> <Option value="lisa">In Progress</Option>
</Select> </Select>
)} )}
</FormItem> </FormItem>
</Col> </Col>
<Col lg={8} md={10} sm={10} xs={24}> <Col lg={8} md={10} sm={10} xs={24}>
<FormItem {...formItemLayout} label="好评度"> <FormItem {...formItemLayout} label="Praise of">
{getFieldDecorator('rate', {})( {getFieldDecorator('rate', {})(
<Select <Select
onChange={this.handleFormSubmit} onChange={this.handleFormSubmit}
placeholder="不限" placeholder="Any"
style={{ maxWidth: 200, width: '100%' }} style={{ maxWidth: 200, width: '100%' }}
> >
<Option value="good">优秀</Option> <Option value="good">Good</Option>
<Option value="normal">普通</Option> <Option value="normal">Normal</Option>
</Select> </Select>
)} )}
</FormItem> </FormItem>
......
...@@ -31,7 +31,7 @@ const getValue = obj => ...@@ -31,7 +31,7 @@ const getValue = obj =>
.map(key => obj[key]) .map(key => obj[key])
.join(','); .join(',');
const statusMap = ['default', 'processing', 'success', 'error']; const statusMap = ['default', 'processing', 'success', 'error'];
const status = ['关闭', '运行中', '已上线', '异常']; const status = ['Shutdown', 'Running', 'Has Been Online', 'Unusual'];
const CreateForm = Form.create()(props => { const CreateForm = Form.create()(props => {
const { modalVisible, form, handleAdd, handleModalVisible } = props; const { modalVisible, form, handleAdd, handleModalVisible } = props;
...@@ -44,15 +44,15 @@ const CreateForm = Form.create()(props => { ...@@ -44,15 +44,15 @@ const CreateForm = Form.create()(props => {
}; };
return ( return (
<Modal <Modal
title="新建规则" title="New Rules"
visible={modalVisible} visible={modalVisible}
onOk={okHandle} onOk={okHandle}
onCancel={() => handleModalVisible()} onCancel={() => handleModalVisible()}
> >
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="描述"> <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="Description">
{form.getFieldDecorator('desc', { {form.getFieldDecorator('desc', {
rules: [{ required: true, message: 'Please input some description...' }], rules: [{ required: true, message: 'Please input some description...' }],
})(<Input placeholder="请输入" />)} })(<Input placeholder="Please Enter" />)}
</FormItem> </FormItem>
</Modal> </Modal>
); );
...@@ -191,7 +191,7 @@ export default class TableList extends PureComponent { ...@@ -191,7 +191,7 @@ export default class TableList extends PureComponent {
}, },
}); });
message.success('添加成功'); message.success('Added Successfully');
this.setState({ this.setState({
modalVisible: false, modalVisible: false,
}); });
...@@ -203,16 +203,16 @@ export default class TableList extends PureComponent { ...@@ -203,16 +203,16 @@ export default class TableList extends PureComponent {
<Form onSubmit={this.handleSearch} layout="inline"> <Form onSubmit={this.handleSearch} layout="inline">
<Row gutter={{ md: 8, lg: 24, xl: 48 }}> <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={8} sm={24}> <Col md={8} sm={24}>
<FormItem label="规则编号"> <FormItem label="Rule Number">
{getFieldDecorator('no')(<Input placeholder="请输入" />)} {getFieldDecorator('no')(<Input placeholder="Please Enter" />)}
</FormItem> </FormItem>
</Col> </Col>
<Col md={8} sm={24}> <Col md={8} sm={24}>
<FormItem label="使用状态"> <FormItem label="Status of Use">
{getFieldDecorator('status')( {getFieldDecorator('status')(
<Select placeholder="请选择" style={{ width: '100%' }}> <Select placeholder="Please Choose" style={{ width: '100%' }}>
<Option value="0">关闭</Option> <Option value="0">Shutdown</Option>
<Option value="1">运行中</Option> <Option value="1">Running</Option>
</Select> </Select>
)} )}
</FormItem> </FormItem>
...@@ -220,13 +220,13 @@ export default class TableList extends PureComponent { ...@@ -220,13 +220,13 @@ export default class TableList extends PureComponent {
<Col md={8} sm={24}> <Col md={8} sm={24}>
<span className={styles.submitButtons}> <span className={styles.submitButtons}>
<Button type="primary" htmlType="submit"> <Button type="primary" htmlType="submit">
查询 Inquire
</Button> </Button>
<Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}> <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
重置 Reset
</Button> </Button>
<a style={{ marginLeft: 8 }} onClick={this.toggleForm}> <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
展开 <Icon type="down" /> Unfold <Icon type="down" />
</a> </a>
</span> </span>
</Col> </Col>
...@@ -241,50 +241,50 @@ export default class TableList extends PureComponent { ...@@ -241,50 +241,50 @@ export default class TableList extends PureComponent {
<Form onSubmit={this.handleSearch} layout="inline"> <Form onSubmit={this.handleSearch} layout="inline">
<Row gutter={{ md: 8, lg: 24, xl: 48 }}> <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={8} sm={24}> <Col md={8} sm={24}>
<FormItem label="规则编号"> <FormItem label="Rule Number">
{getFieldDecorator('no')(<Input placeholder="请输入" />)} {getFieldDecorator('no')(<Input placeholder="Please Enter" />)}
</FormItem> </FormItem>
</Col> </Col>
<Col md={8} sm={24}> <Col md={8} sm={24}>
<FormItem label="使用状态"> <FormItem label="Status of Use">
{getFieldDecorator('status')( {getFieldDecorator('status')(
<Select placeholder="请选择" style={{ width: '100%' }}> <Select placeholder="Please Choose" style={{ width: '100%' }}>
<Option value="0">关闭</Option> <Option value="0">Shutdown</Option>
<Option value="1">运行中</Option> <Option value="1">Running</Option>
</Select> </Select>
)} )}
</FormItem> </FormItem>
</Col> </Col>
<Col md={8} sm={24}> <Col md={8} sm={24}>
<FormItem label="调用次数"> <FormItem label="Number of Calls">
{getFieldDecorator('number')(<InputNumber style={{ width: '100%' }} />)} {getFieldDecorator('number')(<InputNumber style={{ width: '100%' }} />)}
</FormItem> </FormItem>
</Col> </Col>
</Row> </Row>
<Row gutter={{ md: 8, lg: 24, xl: 48 }}> <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={8} sm={24}> <Col md={8} sm={24}>
<FormItem label="更新日期"> <FormItem label="Updated">
{getFieldDecorator('date')( {getFieldDecorator('date')(
<DatePicker style={{ width: '100%' }} placeholder="请输入更新日期" /> <DatePicker style={{ width: '100%' }} placeholder="Please Enter the Update Date" />
)} )}
</FormItem> </FormItem>
</Col> </Col>
<Col md={8} sm={24}> <Col md={8} sm={24}>
<FormItem label="使用状态"> <FormItem label="Status of Use">
{getFieldDecorator('status3')( {getFieldDecorator('status3')(
<Select placeholder="请选择" style={{ width: '100%' }}> <Select placeholder="Please Choose" style={{ width: '100%' }}>
<Option value="0">关闭</Option> <Option value="0">Shutdown</Option>
<Option value="1">运行中</Option> <Option value="1">Running</Option>
</Select> </Select>
)} )}
</FormItem> </FormItem>
</Col> </Col>
<Col md={8} sm={24}> <Col md={8} sm={24}>
<FormItem label="使用状态"> <FormItem label="Status of Use">
{getFieldDecorator('status4')( {getFieldDecorator('status4')(
<Select placeholder="请选择" style={{ width: '100%' }}> <Select placeholder="Please Choose" style={{ width: '100%' }}>
<Option value="0">关闭</Option> <Option value="0">Shutdown</Option>
<Option value="1">运行中</Option> <Option value="1">Running</Option>
</Select> </Select>
)} )}
</FormItem> </FormItem>
...@@ -293,13 +293,13 @@ export default class TableList extends PureComponent { ...@@ -293,13 +293,13 @@ export default class TableList extends PureComponent {
<div style={{ overflow: 'hidden' }}> <div style={{ overflow: 'hidden' }}>
<span style={{ float: 'right', marginBottom: 24 }}> <span style={{ float: 'right', marginBottom: 24 }}>
<Button type="primary" htmlType="submit"> <Button type="primary" htmlType="submit">
查询 Inquire
</Button> </Button>
<Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}> <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
重置 Reset
</Button> </Button>
<a style={{ marginLeft: 8 }} onClick={this.toggleForm}> <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
收起 <Icon type="up" /> Collapse <Icon type="up" />
</a> </a>
</span> </span>
</div> </div>
...@@ -317,24 +317,24 @@ export default class TableList extends PureComponent { ...@@ -317,24 +317,24 @@ export default class TableList extends PureComponent {
const columns = [ const columns = [
{ {
title: '规则编号', title: 'Rule Number',
dataIndex: 'no', dataIndex: 'no',
}, },
{ {
title: '描述', title: 'Description',
dataIndex: 'description', dataIndex: 'description',
}, },
{ {
title: '服务调用次数', title: 'Service Calls',
dataIndex: 'callNo', dataIndex: 'callNo',
sorter: true, sorter: true,
align: 'right', align: 'right',
render: val => `${val} 万`, render: val => `${val}0000`, //Ten thousand
// mark to display a total number // mark to display a total number
needTotal: true, needTotal: true,
}, },
{ {
title: '状态', title: 'Status',
dataIndex: 'status', dataIndex: 'status',
filters: [ filters: [
{ {
...@@ -360,18 +360,18 @@ export default class TableList extends PureComponent { ...@@ -360,18 +360,18 @@ export default class TableList extends PureComponent {
}, },
}, },
{ {
title: '更新时间', title: 'Update At',
dataIndex: 'updatedAt', dataIndex: 'updatedAt',
sorter: true, sorter: true,
render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>, render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
}, },
{ {
title: '操作', title: 'Operating',
render: () => ( render: () => (
<Fragment> <Fragment>
<a href="">配置</a> <a href="">Configuration</a>
<Divider type="vertical" /> <Divider type="vertical" />
<a href="">订阅警报</a> <a href="">Subscribe to Alerts</a>
</Fragment> </Fragment>
), ),
}, },
...@@ -379,8 +379,8 @@ export default class TableList extends PureComponent { ...@@ -379,8 +379,8 @@ export default class TableList extends PureComponent {
const menu = ( const menu = (
<Menu onClick={this.handleMenuClick} selectedKeys={[]}> <Menu onClick={this.handleMenuClick} selectedKeys={[]}>
<Menu.Item key="remove">删除</Menu.Item> <Menu.Item key="remove">Delete</Menu.Item>
<Menu.Item key="approval">批量审批</Menu.Item> <Menu.Item key="approval">Batch Approval</Menu.Item>
</Menu> </Menu>
); );
...@@ -390,20 +390,20 @@ export default class TableList extends PureComponent { ...@@ -390,20 +390,20 @@ export default class TableList extends PureComponent {
}; };
return ( return (
<PageHeaderLayout title="查询表格"> <PageHeaderLayout title="Inquiry Form">
<Card bordered={false}> <Card bordered={false}>
<div className={styles.tableList}> <div className={styles.tableList}>
<div className={styles.tableListForm}>{this.renderForm()}</div> <div className={styles.tableListForm}>{this.renderForm()}</div>
<div className={styles.tableListOperator}> <div className={styles.tableListOperator}>
<Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}> <Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>
新建 New
</Button> </Button>
{selectedRows.length > 0 && ( {selectedRows.length > 0 && (
<span> <span>
<Button>批量操作</Button> <Button>Batch Operation</Button>
<Dropdown overlay={menu}> <Dropdown overlay={menu}>
<Button> <Button>
更多操作 <Icon type="down" /> More Operations <Icon type="down" />
</Button> </Button>
</Dropdown> </Dropdown>
</span> </span>
......
...@@ -30,68 +30,68 @@ const getWindowWidth = () => window.innerWidth || document.documentElement.clien ...@@ -30,68 +30,68 @@ const getWindowWidth = () => window.innerWidth || document.documentElement.clien
const menu = ( const menu = (
<Menu> <Menu>
<Menu.Item key="1">选项一</Menu.Item> <Menu.Item key="1">Options 1</Menu.Item>
<Menu.Item key="2">选项二</Menu.Item> <Menu.Item key="2">Options 2</Menu.Item>
<Menu.Item key="3">选项三</Menu.Item> <Menu.Item key="3">Options 3</Menu.Item>
</Menu> </Menu>
); );
const action = ( const action = (
<Fragment> <Fragment>
<ButtonGroup> <ButtonGroup>
<Button>操作</Button> <Button>Operating</Button>
<Button>操作</Button> <Button>Operating</Button>
<Dropdown overlay={menu} placement="bottomRight"> <Dropdown overlay={menu} placement="bottomRight">
<Button> <Button>
<Icon type="ellipsis" /> <Icon type="ellipsis" />
</Button> </Button>
</Dropdown> </Dropdown>
</ButtonGroup> </ButtonGroup>
<Button type="primary">主操作</Button> <Button type="primary">Main Operation</Button>
</Fragment> </Fragment>
); );
const extra = ( const extra = (
<Row> <Row>
<Col xs={24} sm={12}> <Col xs={24} sm={12}>
<div className={styles.textSecondary}>状态</div> <div className={styles.textSecondary}>Status</div>
<div className={styles.heading}>待审批</div> <div className={styles.heading}>Pending</div>
</Col> </Col>
<Col xs={24} sm={12}> <Col xs={24} sm={12}>
<div className={styles.textSecondary}>订单金额</div> <div className={styles.textSecondary}>Order Amount</div>
<div className={styles.heading}>¥ 568.08</div> <div className={styles.heading}>$ 568.08</div>
</Col> </Col>
</Row> </Row>
); );
const description = ( const description = (
<DescriptionList className={styles.headerList} size="small" col="2"> <DescriptionList className={styles.headerList} size="small" col="2">
<Description term="创建人">曲丽丽</Description> <Description term="Founder">John doe</Description>
<Description term="订购产品">XX 服务</Description> <Description term="Ordering Products">XX Service</Description>
<Description term="创建时间">2017-07-07</Description> <Description term="Creation Time">2017-07-07</Description>
<Description term="关联单据"> <Description term="Associated Documents">
<a href="">12421</a> <a href="">12421</a>
</Description> </Description>
<Description term="生效日期">2017-07-07 ~ 2017-08-08</Description> <Description term="Effective Date">2017-07-07 ~ 2017-08-08</Description>
<Description term="备注">请于两个工作日内确认</Description> <Description term="Note">Please confirm within two working days</Description>
</DescriptionList> </DescriptionList>
); );
const tabList = [ const tabList = [
{ {
key: 'detail', key: 'detail',
tab: '详情', tab: 'Details',
}, },
{ {
key: 'rule', key: 'rule',
tab: '规则', tab: 'Rule',
}, },
]; ];
const desc1 = ( const desc1 = (
<div className={classNames(styles.textSecondary, styles.stepDescription)}> <div className={classNames(styles.textSecondary, styles.stepDescription)}>
<Fragment> <Fragment>
曲丽丽 John Doe
<Icon type="dingding-o" style={{ marginLeft: 8 }} /> <Icon type="dingding-o" style={{ marginLeft: 8 }} />
</Fragment> </Fragment>
<div>2016-12-12 12:32</div> <div>2016-12-12 12:32</div>
...@@ -101,23 +101,23 @@ const desc1 = ( ...@@ -101,23 +101,23 @@ const desc1 = (
const desc2 = ( const desc2 = (
<div className={styles.stepDescription}> <div className={styles.stepDescription}>
<Fragment> <Fragment>
周毛毛 Zhou Maomao
<Icon type="dingding-o" style={{ color: '#00A0E9', marginLeft: 8 }} /> <Icon type="dingding-o" style={{ color: '#00A0E9', marginLeft: 8 }} />
</Fragment> </Fragment>
<div> <div>
<a href="">催一下</a> <a href="">Urgent</a>
</div> </div>
</div> </div>
); );
const popoverContent = ( const popoverContent = (
<div style={{ width: 160 }}> <div style={{ width: 160 }}>
吴加号 Wu Jiahao
<span className={styles.textSecondary} style={{ float: 'right' }}> <span className={styles.textSecondary} style={{ float: 'right' }}>
<Badge status="default" text={<span style={{ color: 'rgba(0, 0, 0, 0.45)' }}>未响应</span>} /> <Badge status="default" text={<span style={{ color: 'rgba(0, 0, 0, 0.45)' }}>No Response</span>} />
</span> </span>
<div className={styles.textSecondary} style={{ marginTop: 4 }}> <div className={styles.textSecondary} style={{ marginTop: 4 }}>
耗时:2小时25分钟 Time-consuming: 2 hours and 25 minutes
</div> </div>
</div> </div>
); );
...@@ -134,47 +134,47 @@ const customDot = (dot, { status }) => ...@@ -134,47 +134,47 @@ const customDot = (dot, { status }) =>
const operationTabList = [ const operationTabList = [
{ {
key: 'tab1', key: 'tab1',
tab: '操作日志一', tab: 'Operation Log 1',
}, },
{ {
key: 'tab2', key: 'tab2',
tab: '操作日志二', tab: 'Operation Log 2',
}, },
{ {
key: 'tab3', key: 'tab3',
tab: '操作日志三', tab: 'Operation Log 3',
}, },
]; ];
const columns = [ const columns = [
{ {
title: '操作类型', title: 'Operation Type',
dataIndex: 'type', dataIndex: 'type',
key: 'type', key: 'type',
}, },
{ {
title: '操作人', title: 'Operator Name',
dataIndex: 'name', dataIndex: 'name',
key: 'name', key: 'name',
}, },
{ {
title: '执行结果', title: 'Status',
dataIndex: 'status', dataIndex: 'status',
key: 'status', key: 'status',
render: text => render: text =>
text === 'agree' ? ( text === 'agree' ? (
<Badge status="success" text="成功" /> <Badge status="success" text="Success" />
) : ( ) : (
<Badge status="error" text="驳回" /> <Badge status="error" text="Error" />
), ),
}, },
{ {
title: '操作时间', title: 'Updated At',
dataIndex: 'updatedAt', dataIndex: 'updatedAt',
key: 'updatedAt', key: 'updatedAt',
}, },
{ {
title: '备注', title: 'Note',
dataIndex: 'memo', dataIndex: 'memo',
key: 'memo', key: 'memo',
}, },
...@@ -258,7 +258,7 @@ export default class AdvancedProfile extends Component { ...@@ -258,7 +258,7 @@ export default class AdvancedProfile extends Component {
return ( return (
<PageHeaderLayout <PageHeaderLayout
title="单号:234231029431" title="Unique Number:234231029431"
logo={ logo={
<img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png" /> <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png" />
} }
...@@ -267,33 +267,33 @@ export default class AdvancedProfile extends Component { ...@@ -267,33 +267,33 @@ export default class AdvancedProfile extends Component {
extraContent={extra} extraContent={extra}
tabList={tabList} tabList={tabList}
> >
<Card title="流程进度" style={{ marginBottom: 24 }} bordered={false}> <Card title="Process Progress" style={{ marginBottom: 24 }} bordered={false}>
<Steps direction={stepDirection} progressDot={customDot} current={1}> <Steps direction={stepDirection} progressDot={customDot} current={1}>
<Step title="创建项目" description={desc1} /> <Step title="Create a Project" description={desc1} />
<Step title="部门初审" description={desc2} /> <Step title="Department First Review" description={desc2} />
<Step title="财务复核" /> <Step title="Financial Review" />
<Step title="完成" /> <Step title="Carry Out" />
</Steps> </Steps>
</Card> </Card>
<Card title="用户信息" style={{ marginBottom: 24 }} bordered={false}> <Card title="User Info" style={{ marginBottom: 24 }} bordered={false}>
<DescriptionList style={{ marginBottom: 24 }}> <DescriptionList style={{ marginBottom: 24 }}>
<Description term="用户姓名">付小小</Description> <Description term="Username">Fu Xiaoxiao</Description>
<Description term="会员卡号">32943898021309809423</Description> <Description term="Member Card Number">32943898021309809423</Description>
<Description term="身份证">3321944288191034921</Description> <Description term="ID Card">3321944288191034921</Description>
<Description term="联系方式">18112345678</Description> <Description term="Contact Information">18112345678</Description>
<Description term="联系地址"> <Description term="Contact Address">
曲丽丽 18100000000 浙江省杭州市西湖区黄姑山路工专路交叉路口 John Doe 18100000000 Intersection of Gonggu Road, Huanggushan Road, Xihu District, Hangzhou City, Zhejiang Province, China
</Description> </Description>
</DescriptionList> </DescriptionList>
<DescriptionList style={{ marginBottom: 24 }} title="信息组"> <DescriptionList style={{ marginBottom: 24 }} title="Information Group">
<Description term="某某数据">725</Description> <Description term="Certain Data">725</Description>
<Description term="该数据更新时间">2017-08-08</Description> <Description term="Update Date">2017-08-08</Description>
<Description>&nbsp;</Description> <Description>&nbsp;</Description>
<Description <Description
term={ term={
<span> <span>
某某数据 Centain Data
<Tooltip title="数据说明"> <Tooltip title="Data Shows">
<Icon <Icon
style={{ color: 'rgba(0, 0, 0, 0.43)', marginLeft: 4 }} style={{ color: 'rgba(0, 0, 0, 0.43)', marginLeft: 4 }}
type="info-circle-o" type="info-circle-o"
...@@ -304,36 +304,36 @@ export default class AdvancedProfile extends Component { ...@@ -304,36 +304,36 @@ export default class AdvancedProfile extends Component {
> >
725 725
</Description> </Description>
<Description term="该数据更新时间">2017-08-08</Description> <Description term="Update Date">2017-08-08</Description>
</DescriptionList> </DescriptionList>
<h4 style={{ marginBottom: 16 }}>信息组</h4> <h4 style={{ marginBottom: 16 }}>Information Group</h4>
<Card type="inner" title="多层级信息组"> <Card type="inner" title="Multilevel Information Group">
<DescriptionList size="small" style={{ marginBottom: 16 }} title="组名称"> <DescriptionList size="small" style={{ marginBottom: 16 }} title="Group Name">
<Description term="负责人">林东东</Description> <Description term="Principal">Lin Dongdong</Description>
<Description term="角色码">1234567</Description> <Description term="Role Code">1234567</Description>
<Description term="所属部门">XX公司 - YY</Description> <Description term="Department">XX Company - YY Unit</Description>
<Description term="过期时间">2017-08-08</Description> <Description term="Expiration">2017-08-08</Description>
<Description term="描述"> <Description term="Description">
这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长... This description is very long, long, long, long, long, long, long, long, long, long, long, long, long,...
</Description> </Description>
</DescriptionList> </DescriptionList>
<Divider style={{ margin: '16px 0' }} /> <Divider style={{ margin: '16px 0' }} />
<DescriptionList size="small" style={{ marginBottom: 16 }} title="组名称" col="1"> <DescriptionList size="small" style={{ marginBottom: 16 }} title="Group Name" col="1">
<Description term="学名"> <Description term="Scientific Name">
Citrullus lanatus (Thunb.) Matsum. et Citrullus lanatus (Thunb.) Matsum. et
Nakai一年生蔓生藤本;茎、枝粗壮,具明显的棱。卷须较粗.. Nakai一年生蔓生藤本;茎、枝粗壮,具明显的棱。卷须较粗..
</Description> </Description>
</DescriptionList> </DescriptionList>
<Divider style={{ margin: '16px 0' }} /> <Divider style={{ margin: '16px 0' }} />
<DescriptionList size="small" title="组名称"> <DescriptionList size="small" title="Group Name">
<Description term="负责人">付小小</Description> <Description term="Principal">Fu Xiaoxiao</Description>
<Description term="角色码">1234568</Description> <Description term="Role Code">1234568</Description>
</DescriptionList> </DescriptionList>
</Card> </Card>
</Card> </Card>
<Card title="用户近半年来电记录" style={{ marginBottom: 24 }} bordered={false}> <Card title="User's call record in the past six months" style={{ marginBottom: 24 }} bordered={false}>
<div className={styles.noData}> <div className={styles.noData}>
<Icon type="frown-o" />暂无数据 <Icon type="frown-o" />No Data
</div> </div>
</Card> </Card>
<Card <Card
......
...@@ -9,33 +9,33 @@ const { Description } = DescriptionList; ...@@ -9,33 +9,33 @@ const { Description } = DescriptionList;
const progressColumns = [ const progressColumns = [
{ {
title: '时间', title: 'Time',
dataIndex: 'time', dataIndex: 'time',
key: 'time', key: 'time',
}, },
{ {
title: '当前进度', title: 'Current Progress',
dataIndex: 'rate', dataIndex: 'rate',
key: 'rate', key: 'rate',
}, },
{ {
title: '状态', title: 'Status',
dataIndex: 'status', dataIndex: 'status',
key: 'status', key: 'status',
render: text => render: text =>
text === 'success' ? ( text === 'success' ? (
<Badge status="success" text="成功" /> <Badge status="success" text="Success" />
) : ( ) : (
<Badge status="processing" text="进行中" /> <Badge status="processing" text="Processing" />
), ),
}, },
{ {
title: '操作员ID', title: 'Operator ID',
dataIndex: 'operator', dataIndex: 'operator',
key: 'operator', key: 'operator',
}, },
{ {
title: '耗时', title: 'Time Consumption',
dataIndex: 'cost', dataIndex: 'cost',
key: 'cost', key: 'cost',
}, },
...@@ -65,7 +65,7 @@ export default class BasicProfile extends Component { ...@@ -65,7 +65,7 @@ export default class BasicProfile extends Component {
amount += Number(item.amount); amount += Number(item.amount);
}); });
goodsData = basicGoods.concat({ goodsData = basicGoods.concat({
id: '总计', id: 'Total',
num, num,
amount, amount,
}); });
...@@ -82,7 +82,7 @@ export default class BasicProfile extends Component { ...@@ -82,7 +82,7 @@ export default class BasicProfile extends Component {
}; };
const goodsColumns = [ const goodsColumns = [
{ {
title: '商品编号', title: 'Product Number',
dataIndex: 'id', dataIndex: 'id',
key: 'id', key: 'id',
render: (text, row, index) => { render: (text, row, index) => {
...@@ -90,7 +90,7 @@ export default class BasicProfile extends Component { ...@@ -90,7 +90,7 @@ export default class BasicProfile extends Component {
return <a href="">{text}</a>; return <a href="">{text}</a>;
} }
return { return {
children: <span style={{ fontWeight: 600 }}>总计</span>, children: <span style={{ fontWeight: 600 }}> Total</span>,
props: { props: {
colSpan: 4, colSpan: 4,
}, },
...@@ -98,26 +98,26 @@ export default class BasicProfile extends Component { ...@@ -98,26 +98,26 @@ export default class BasicProfile extends Component {
}, },
}, },
{ {
title: '商品名称', title: 'Product Name',
dataIndex: 'name', dataIndex: 'name',
key: 'name', key: 'name',
render: renderContent, render: renderContent,
}, },
{ {
title: '商品条码', title: 'Barcode',
dataIndex: 'barcode', dataIndex: 'barcode',
key: 'barcode', key: 'barcode',
render: renderContent, render: renderContent,
}, },
{ {
title: '单价', title: 'Price',
dataIndex: 'price', dataIndex: 'price',
key: 'price', key: 'price',
align: 'right', align: 'right',
render: renderContent, render: renderContent,
}, },
{ {
title: '数量(件)', title: 'Quantity(Piece)',
dataIndex: 'num', dataIndex: 'num',
key: 'num', key: 'num',
align: 'right', align: 'right',
...@@ -129,7 +129,7 @@ export default class BasicProfile extends Component { ...@@ -129,7 +129,7 @@ export default class BasicProfile extends Component {
}, },
}, },
{ {
title: '金额', title: 'Amount',
dataIndex: 'amount', dataIndex: 'amount',
key: 'amount', key: 'amount',
align: 'right', align: 'right',
...@@ -142,24 +142,24 @@ export default class BasicProfile extends Component { ...@@ -142,24 +142,24 @@ export default class BasicProfile extends Component {
}, },
]; ];
return ( return (
<PageHeaderLayout title="基础详情页"> <PageHeaderLayout title="Basic Details Page">
<Card bordered={false}> <Card bordered={false}>
<DescriptionList size="large" title="退款申请" style={{ marginBottom: 32 }}> <DescriptionList size="large" title="Refund Application" style={{ marginBottom: 32 }}>
<Description term="取货单号">1000000000</Description> <Description term="Pickup No.">1000000000</Description>
<Description term="状态">已取货</Description> <Description term="Status">Picked</Description>
<Description term="销售单号">1234123421</Description> <Description term="Sales Order Number">1234123421</Description>
<Description term="子订单">3214321432</Description> <Description term="Suborders">3214321432</Description>
</DescriptionList> </DescriptionList>
<Divider style={{ marginBottom: 32 }} /> <Divider style={{ marginBottom: 32 }} />
<DescriptionList size="large" title="用户信息" style={{ marginBottom: 32 }}> <DescriptionList size="large" title="User Info" style={{ marginBottom: 32 }}>
<Description term="用户姓名">付小小</Description> <Description term="Username">Fu Xiaoxiao</Description>
<Description term="联系电话">18100000000</Description> <Description term="Contact Number">18100000000</Description>
<Description term="常用快递">菜鸟仓储</Description> <Description term="常用快递">菜鸟仓储</Description>
<Description term="取货地址">浙江省杭州市西湖区万塘路18</Description> <Description term="Pickup Address">No.18 Wantang Road, Xihu District, Hangzhou City, Zhejiang Province, China</Description>
<Description term="备注"></Description> <Description term="Note">No</Description>
</DescriptionList> </DescriptionList>
<Divider style={{ marginBottom: 32 }} /> <Divider style={{ marginBottom: 32 }} />
<div className={styles.title}>退货商品</div> <div className={styles.title}>Return Goods</div>
<Table <Table
style={{ marginBottom: 24 }} style={{ marginBottom: 24 }}
pagination={false} pagination={false}
...@@ -168,7 +168,7 @@ export default class BasicProfile extends Component { ...@@ -168,7 +168,7 @@ export default class BasicProfile extends Component {
columns={goodsColumns} columns={goodsColumns}
rowKey="id" rowKey="id"
/> />
<div className={styles.title}>退货进度</div> <div className={styles.title}>Return Progress</div>
<Table <Table
style={{ marginBottom: 16 }} style={{ marginBottom: 16 }}
pagination={false} pagination={false}
......
...@@ -13,32 +13,32 @@ const extra = ( ...@@ -13,32 +13,32 @@ const extra = (
marginBottom: 16, marginBottom: 16,
}} }}
> >
您提交的内容有如下错误 Your Submission Has The Following Error
</div> </div>
<div style={{ marginBottom: 16 }}> <div style={{ marginBottom: 16 }}>
<Icon style={{ color: '#f5222d', marginRight: 8 }} type="close-circle-o" />您的账户已被冻结 <Icon style={{ color: '#f5222d', marginRight: 8 }} type="close-circle-o" />Your account has been frozen
<a style={{ marginLeft: 16 }}> <a style={{ marginLeft: 16 }}>
立即解冻 <Icon type="right" /> Thaw immediately <Icon type="right" />
</a> </a>
</div> </div>
<div> <div>
<Icon style={{ color: '#f5222d', marginRight: 8 }} type="close-circle-o" />您的账户还不具备申请资格 <Icon style={{ color: '#f5222d', marginRight: 8 }} type="close-circle-o" />Your account is not eligible for application
<a style={{ marginLeft: 16 }}> <a style={{ marginLeft: 16 }}>
立即升级 <Icon type="right" /> Upgrade immediately <Icon type="right" />
</a> </a>
</div> </div>
</Fragment> </Fragment>
); );
const actions = <Button type="primary">返回修改</Button>; const actions = <Button type="primary">Return to Edit</Button>;
export default () => ( export default () => (
<PageHeaderLayout> <PageHeaderLayout>
<Card bordered={false}> <Card bordered={false}>
<Result <Result
type="error" type="error"
title="提交失败" title="Submission Failed"
description="请核对并修改以下信息后,再重新提交。" description="Please check and modify the following information before resubmitting。"
extra={extra} extra={extra}
actions={actions} actions={actions}
style={{ marginTop: 48, marginBottom: 16 }} style={{ marginTop: 48, marginBottom: 16 }}
......
...@@ -15,7 +15,7 @@ const desc1 = ( ...@@ -15,7 +15,7 @@ const desc1 = (
}} }}
> >
<div style={{ margin: '8px 0 4px' }}> <div style={{ margin: '8px 0 4px' }}>
曲丽丽<Icon style={{ marginLeft: 8 }} type="dingding-o" /> John Doe<Icon style={{ marginLeft: 8 }} type="dingding-o" />
</div> </div>
<div>2016-12-12 12:32</div> <div>2016-12-12 12:32</div>
</div> </div>
...@@ -24,10 +24,10 @@ const desc1 = ( ...@@ -24,10 +24,10 @@ const desc1 = (
const desc2 = ( const desc2 = (
<div style={{ fontSize: 12, position: 'relative', left: 42 }}> <div style={{ fontSize: 12, position: 'relative', left: 42 }}>
<div style={{ margin: '8px 0 4px' }}> <div style={{ margin: '8px 0 4px' }}>
周毛毛<Icon type="dingding-o" style={{ color: '#00A0E9', marginLeft: 8 }} /> Zhou Maomao<Icon type="dingding-o" style={{ color: '#00A0E9', marginLeft: 8 }} />
</div> </div>
<div> <div>
<a href="">催一下</a> <a href="">Urgent</a>
</div> </div>
</div> </div>
); );
...@@ -42,36 +42,36 @@ const extra = ( ...@@ -42,36 +42,36 @@ const extra = (
marginBottom: 20, marginBottom: 20,
}} }}
> >
项目名称 Project Name
</div> </div>
<Row style={{ marginBottom: 16 }}> <Row style={{ marginBottom: 16 }}>
<Col xs={24} sm={12} md={12} lg={12} xl={6}> <Col xs={24} sm={12} md={12} lg={12} xl={6}>
<span style={{ color: 'rgba(0, 0, 0, 0.85)' }}>项目 ID</span> <span style={{ color: 'rgba(0, 0, 0, 0.85)' }}>Project ID</span>
23421 23421
</Col> </Col>
<Col xs={24} sm={12} md={12} lg={12} xl={6}> <Col xs={24} sm={12} md={12} lg={12} xl={6}>
<span style={{ color: 'rgba(0, 0, 0, 0.85)' }}>负责人</span> <span style={{ color: 'rgba(0, 0, 0, 0.85)' }}>Principal</span>
曲丽丽 John Doe
</Col> </Col>
<Col xs={24} sm={24} md={24} lg={24} xl={12}> <Col xs={24} sm={24} md={24} lg={24} xl={12}>
<span style={{ color: 'rgba(0, 0, 0, 0.85)' }}>生效时间</span> <span style={{ color: 'rgba(0, 0, 0, 0.85)' }}>Effective Time</span>
2016-12-12 ~ 2017-12-12 2016-12-12 ~ 2017-12-12
</Col> </Col>
</Row> </Row>
<Steps style={{ marginLeft: -42, width: 'calc(100% + 84px)' }} progressDot current={1}> <Steps style={{ marginLeft: -42, width: 'calc(100% + 84px)' }} progressDot current={1}>
<Step title={<span style={{ fontSize: 14 }}>创建项目</span>} description={desc1} /> <Step title={<span style={{ fontSize: 14 }}>Create a Project</span>} description={desc1} />
<Step title={<span style={{ fontSize: 14 }}>部门初审</span>} description={desc2} /> <Step title={<span style={{ fontSize: 14 }}>Department First Review</span>} description={desc2} />
<Step title={<span style={{ fontSize: 14 }}>财务复核</span>} /> <Step title={<span style={{ fontSize: 14 }}>Financial Review</span>} />
<Step title={<span style={{ fontSize: 14 }}>完成</span>} /> <Step title={<span style={{ fontSize: 14 }}>Carry Out</span>} />
</Steps> </Steps>
</Fragment> </Fragment>
); );
const actions = ( const actions = (
<Fragment> <Fragment>
<Button type="primary">返回列表</Button> <Button type="primary">Back to List</Button>
<Button>查看项目</Button> <Button>Check Item</Button>
<Button> </Button> <Button>Print</Button>
</Fragment> </Fragment>
); );
...@@ -80,11 +80,8 @@ export default () => ( ...@@ -80,11 +80,8 @@ export default () => (
<Card bordered={false}> <Card bordered={false}>
<Result <Result
type="success" type="success"
title="提交成功" title="Submit Successfully"
description="提交结果页用于反馈一系列操作任务的处理结果, description="The submission result page is used to feed back the results of a series of operations. If it is a simple operation, use the Message global feedback. This text area can show simple supplementary explanations. If there are similar requirements for displaying 'documents', the following gray area can present more complicated content."
如果仅是简单操作,使用 Message 全局提示反馈即可。
本文字区域可以展示简单的补充说明,如果有类似展示
“单据”的需求,下面这个灰色区域可以呈现比较复杂的内容。"
extra={extra} extra={extra}
actions={actions} actions={actions}
style={{ marginTop: 48, marginBottom: 16 }} style={{ marginTop: 48, marginBottom: 16 }}
......
...@@ -50,38 +50,38 @@ export default class LoginPage extends Component { ...@@ -50,38 +50,38 @@ export default class LoginPage extends Component {
return ( return (
<div className={styles.main}> <div className={styles.main}>
<Login defaultActiveKey={type} onTabChange={this.onTabChange} onSubmit={this.handleSubmit}> <Login defaultActiveKey={type} onTabChange={this.onTabChange} onSubmit={this.handleSubmit}>
<Tab key="account" tab="账户密码登录"> <Tab key="account" tab="Account">
{login.status === 'error' && {login.status === 'error' &&
login.type === 'account' && login.type === 'account' &&
!login.submitting && !login.submitting &&
this.renderMessage('账户或密码错误(admin/888888)')} this.renderMessage('Account or Password Do Not Match')}
<UserName name="userName" placeholder="admin/user" /> <UserName name="userName" placeholder="Login"/>
<Password name="password" placeholder="888888/123456" /> <Password name="password" placeholder="Password" />
</Tab> </Tab>
<Tab key="mobile" tab="手机号登录"> <Tab key="mobile" tab="Mobile">
{login.status === 'error' && {login.status === 'error' &&
login.type === 'mobile' && login.type === 'mobile' &&
!login.submitting && !login.submitting &&
this.renderMessage('验证码错误')} this.renderMessage('Verification Code Error')}
<Mobile name="mobile" /> <Mobile name="mobile" />
<Captcha name="captcha" /> <Captcha name="captcha" />
</Tab> </Tab>
<div> <div>
<Checkbox checked={this.state.autoLogin} onChange={this.changeAutoLogin}> <Checkbox checked={this.state.autoLogin} onChange={this.changeAutoLogin}>
自动登录 Remember me
</Checkbox> </Checkbox>
<a style={{ float: 'right' }} href=""> <a style={{ float: 'right' }} href="">
忘记密码 Forgot Password?
</a> </a>
</div> </div>
<Submit loading={submitting}>登录</Submit> <Submit loading={submitting}>Submit</Submit>
<div className={styles.other}> <div className={styles.other}>
其他登录方式 Other ways to log in
<Icon className={styles.icon} type="alipay-circle" /> <Icon className={styles.icon} type="facebook" />
<Icon className={styles.icon} type="taobao-circle" /> <Icon className={styles.icon} type="google" />
<Icon className={styles.icon} type="weibo-circle" /> <Icon className={styles.icon} type="twitter" />
<Link className={styles.register} to="/user/register"> <Link className={styles.register} to="/user/register">
注册账户 Register
</Link> </Link>
</div> </div>
</Login> </Login>
......
...@@ -9,9 +9,9 @@ const { Option } = Select; ...@@ -9,9 +9,9 @@ const { Option } = Select;
const InputGroup = Input.Group; const InputGroup = Input.Group;
const passwordStatusMap = { const passwordStatusMap = {
ok: <div className={styles.success}>强度:强</div>, ok: <div className={styles.success}>Ok</div>,
pass: <div className={styles.warning}>强度:中</div>, pass: <div className={styles.warning}>Pass</div>,
poor: <div className={styles.error}>强度:太短</div>, poor: <div className={styles.error}>Poor</div>,
}; };
const passwordProgressMap = { const passwordProgressMap = {
...@@ -108,7 +108,7 @@ export default class Register extends Component { ...@@ -108,7 +108,7 @@ export default class Register extends Component {
checkPassword = (rule, value, callback) => { checkPassword = (rule, value, callback) => {
if (!value) { if (!value) {
this.setState({ this.setState({
help: '请输入密码!', help: 'HELP!',
visible: !!value, visible: !!value,
}); });
callback('error'); callback('error');
...@@ -162,21 +162,21 @@ export default class Register extends Component { ...@@ -162,21 +162,21 @@ export default class Register extends Component {
const { count, prefix } = this.state; const { count, prefix } = this.state;
return ( return (
<div className={styles.main}> <div className={styles.main}>
<h3>注册</h3> <h3>Registro</h3>
<Form onSubmit={this.handleSubmit}> <Form onSubmit={this.handleSubmit}>
<FormItem> <FormItem>
{getFieldDecorator('mail', { {getFieldDecorator('mail', {
rules: [ rules: [
{ {
required: true, required: true,
message: '请输入邮箱地址!', message: 'Please Input the E-mail Address!',
}, },
{ {
type: 'email', type: 'email',
message: '邮箱地址格式错误!', message: 'Wrong E-mail Address Format!',
}, },
], ],
})(<Input size="large" placeholder="邮箱" />)} })(<Input size="large" placeholder="E-mail" />)}
</FormItem> </FormItem>
<FormItem help={this.state.help}> <FormItem help={this.state.help}>
<Popover <Popover
...@@ -185,7 +185,7 @@ export default class Register extends Component { ...@@ -185,7 +185,7 @@ export default class Register extends Component {
{passwordStatusMap[this.getPasswordStatus()]} {passwordStatusMap[this.getPasswordStatus()]}
{this.renderPasswordProgress()} {this.renderPasswordProgress()}
<div style={{ marginTop: 10 }}> <div style={{ marginTop: 10 }}>
请至少输入 6 个字符。请不要使用容易被猜到的密码。 Please enter at least 6 characters. Please do not use passwords that are easy to guess.
</div> </div>
</div> </div>
} }
...@@ -199,7 +199,7 @@ export default class Register extends Component { ...@@ -199,7 +199,7 @@ export default class Register extends Component {
validator: this.checkPassword, validator: this.checkPassword,
}, },
], ],
})(<Input size="large" type="password" placeholder="至少6位密码,区分大小写" />)} })(<Input size="large" type="password" placeholder="Insert your password" />)}
</Popover> </Popover>
</FormItem> </FormItem>
<FormItem> <FormItem>
...@@ -207,13 +207,13 @@ export default class Register extends Component { ...@@ -207,13 +207,13 @@ export default class Register extends Component {
rules: [ rules: [
{ {
required: true, required: true,
message: '请确认密码!', message: 'Please Confirm Your Password!',
}, },
{ {
validator: this.checkConfirm, validator: this.checkConfirm,
}, },
], ],
})(<Input size="large" type="password" placeholder="确认密码" />)} })(<Input size="large" type="password" placeholder="Confirm your password" />)}
</FormItem> </FormItem>
<FormItem> <FormItem>
<InputGroup compact> <InputGroup compact>
...@@ -230,14 +230,14 @@ export default class Register extends Component { ...@@ -230,14 +230,14 @@ export default class Register extends Component {
rules: [ rules: [
{ {
required: true, required: true,
message: '请输入手机号!', message: 'Please Enter Phone Number',
}, },
{ {
pattern: /^1\d{10}$/, pattern: /^1\d{10}$/,
message: '手机号格式错误!', message: 'Malformed Phone Number!',
}, },
], ],
})(<Input size="large" style={{ width: '80%' }} placeholder="11位手机号" />)} })(<Input size="large" style={{ width: '80%' }} placeholder="Insert Your Cellphone Number" />)}
</InputGroup> </InputGroup>
</FormItem> </FormItem>
<FormItem> <FormItem>
...@@ -247,10 +247,10 @@ export default class Register extends Component { ...@@ -247,10 +247,10 @@ export default class Register extends Component {
rules: [ rules: [
{ {
required: true, required: true,
message: '请输入验证码!', message: 'Please Enter Verification Code',
}, },
], ],
})(<Input size="large" placeholder="验证码" />)} })(<Input size="large" placeholder="Verify Code" />)}
</Col> </Col>
<Col span={8}> <Col span={8}>
<Button <Button
...@@ -259,7 +259,7 @@ export default class Register extends Component { ...@@ -259,7 +259,7 @@ export default class Register extends Component {
className={styles.getCaptcha} className={styles.getCaptcha}
onClick={this.onGetCaptcha} onClick={this.onGetCaptcha}
> >
{count ? `${count} s` : '获取验证码'} {count ? `${count} s` : 'Send Code'}
</Button> </Button>
</Col> </Col>
</Row> </Row>
...@@ -272,10 +272,10 @@ export default class Register extends Component { ...@@ -272,10 +272,10 @@ export default class Register extends Component {
type="primary" type="primary"
htmlType="submit" htmlType="submit"
> >
注册 Submit
</Button> </Button>
<Link className={styles.login} to="/user/login"> <Link className={styles.login} to="/user/login">
使用已有账户登录 Already Have an Account
</Link> </Link>
</FormItem> </FormItem>
</Form> </Form>
......
...@@ -8,11 +8,11 @@ const actions = ( ...@@ -8,11 +8,11 @@ const actions = (
<div className={styles.actions}> <div className={styles.actions}>
<a href=""> <a href="">
<Button size="large" type="primary"> <Button size="large" type="primary">
查看邮箱 Verificar
</Button> </Button>
</a> </a>
<Link to="/"> <Link to="/">
<Button size="large">返回首页</Button> <Button size="large">Voltar</Button>
</Link> </Link>
</div> </div>
); );
...@@ -23,10 +23,10 @@ export default ({ location }) => ( ...@@ -23,10 +23,10 @@ export default ({ location }) => (
type="success" type="success"
title={ title={
<div className={styles.title}> <div className={styles.title}>
你的账户:{location.state ? location.state.account : 'AntDesign@example.com'} 注册成功 Sua conta{location.state ? location.state.account : 'AntDesign@example.com'} foi registrada com sucesso.
</div> </div>
} }
description="激活邮件已发送到你的邮箱中,邮件有效期为24小时。请及时登录邮箱,点击邮件中的链接激活帐户。" description="Um email foi enviado para a sua conta. Por favor, ative a sua conta clicando no link. O link será desativado em 24H."
actions={actions} actions={actions}
style={{ marginTop: 56 }} style={{ marginTop: 56 }}
/> />
......
...@@ -59,6 +59,7 @@ export default function request(url, options) { ...@@ -59,6 +59,7 @@ 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