Browse Source
chore: remove unused dependencies from package.json chore: merge all-blocks chore: remove unused mock filespull/11531/head
afc163
9 months ago
158 changed files with 20 additions and 13384 deletions
@ -1,210 +0,0 @@ |
|||||
import dayjs from 'dayjs'; |
|
||||
import type { Request, Response } from 'express'; |
|
||||
import type { AnalysisData, DataItem, RadarData } from '../src/pages/dashboard/analysis/data'; |
|
||||
|
|
||||
// mock data
|
|
||||
const visitData: DataItem[] = []; |
|
||||
const beginDay = new Date().getTime(); |
|
||||
|
|
||||
const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5]; |
|
||||
for (let i = 0; i < fakeY.length; i += 1) { |
|
||||
visitData.push({ |
|
||||
x: dayjs(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'), |
|
||||
y: fakeY[i], |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
const visitData2 = []; |
|
||||
const fakeY2 = [1, 6, 4, 8, 3, 7, 2]; |
|
||||
for (let i = 0; i < fakeY2.length; i += 1) { |
|
||||
visitData2.push({ |
|
||||
x: dayjs(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'), |
|
||||
y: fakeY2[i], |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
const salesData = []; |
|
||||
for (let i = 0; i < 12; i += 1) { |
|
||||
salesData.push({ |
|
||||
x: `${i + 1}月`, |
|
||||
y: Math.floor(Math.random() * 1000) + 200, |
|
||||
}); |
|
||||
} |
|
||||
const searchData = []; |
|
||||
for (let i = 0; i < 50; i += 1) { |
|
||||
searchData.push({ |
|
||||
index: i + 1, |
|
||||
keyword: `搜索关键词-${i}`, |
|
||||
count: Math.floor(Math.random() * 1000), |
|
||||
range: Math.floor(Math.random() * 100), |
|
||||
status: Math.floor((Math.random() * 10) % 2), |
|
||||
}); |
|
||||
} |
|
||||
const salesTypeData = [ |
|
||||
{ |
|
||||
x: '家用电器', |
|
||||
y: 4544, |
|
||||
}, |
|
||||
{ |
|
||||
x: '食用酒水', |
|
||||
y: 3321, |
|
||||
}, |
|
||||
{ |
|
||||
x: '个护健康', |
|
||||
y: 3113, |
|
||||
}, |
|
||||
{ |
|
||||
x: '服饰箱包', |
|
||||
y: 2341, |
|
||||
}, |
|
||||
{ |
|
||||
x: '母婴产品', |
|
||||
y: 1231, |
|
||||
}, |
|
||||
{ |
|
||||
x: '其他', |
|
||||
y: 1231, |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
const salesTypeDataOnline = [ |
|
||||
{ |
|
||||
x: '家用电器', |
|
||||
y: 244, |
|
||||
}, |
|
||||
{ |
|
||||
x: '食用酒水', |
|
||||
y: 321, |
|
||||
}, |
|
||||
{ |
|
||||
x: '个护健康', |
|
||||
y: 311, |
|
||||
}, |
|
||||
{ |
|
||||
x: '服饰箱包', |
|
||||
y: 41, |
|
||||
}, |
|
||||
{ |
|
||||
x: '母婴产品', |
|
||||
y: 121, |
|
||||
}, |
|
||||
{ |
|
||||
x: '其他', |
|
||||
y: 111, |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
const salesTypeDataOffline = [ |
|
||||
{ |
|
||||
x: '家用电器', |
|
||||
y: 99, |
|
||||
}, |
|
||||
{ |
|
||||
x: '食用酒水', |
|
||||
y: 188, |
|
||||
}, |
|
||||
{ |
|
||||
x: '个护健康', |
|
||||
y: 344, |
|
||||
}, |
|
||||
{ |
|
||||
x: '服饰箱包', |
|
||||
y: 255, |
|
||||
}, |
|
||||
{ |
|
||||
x: '其他', |
|
||||
y: 65, |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
const offlineData = []; |
|
||||
for (let i = 0; i < 10; i += 1) { |
|
||||
offlineData.push({ |
|
||||
name: `Stores ${i}`, |
|
||||
cvr: Math.ceil(Math.random() * 9) / 10, |
|
||||
}); |
|
||||
} |
|
||||
const offlineChartData = []; |
|
||||
for (let i = 0; i < 20; i += 1) { |
|
||||
const date = dayjs(new Date().getTime() + 1000 * 60 * 30 * i).format('HH:mm'); |
|
||||
offlineChartData.push({ |
|
||||
date, |
|
||||
type: '客流量', |
|
||||
value: Math.floor(Math.random() * 100) + 10, |
|
||||
}); |
|
||||
offlineChartData.push({ |
|
||||
date, |
|
||||
type: '支付笔数', |
|
||||
value: Math.floor(Math.random() * 100) + 10, |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
const radarOriginData = [ |
|
||||
{ |
|
||||
name: '个人', |
|
||||
ref: 10, |
|
||||
koubei: 8, |
|
||||
output: 4, |
|
||||
contribute: 5, |
|
||||
hot: 7, |
|
||||
}, |
|
||||
{ |
|
||||
name: '团队', |
|
||||
ref: 3, |
|
||||
koubei: 9, |
|
||||
output: 6, |
|
||||
contribute: 3, |
|
||||
hot: 1, |
|
||||
}, |
|
||||
{ |
|
||||
name: '部门', |
|
||||
ref: 4, |
|
||||
koubei: 1, |
|
||||
output: 6, |
|
||||
contribute: 5, |
|
||||
hot: 7, |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
const radarData: RadarData[] = []; |
|
||||
const radarTitleMap = { |
|
||||
ref: '引用', |
|
||||
koubei: '口碑', |
|
||||
output: '产量', |
|
||||
contribute: '贡献', |
|
||||
hot: '热度', |
|
||||
}; |
|
||||
radarOriginData.forEach((item) => { |
|
||||
Object.keys(item).forEach((key) => { |
|
||||
if (key !== 'name') { |
|
||||
radarData.push({ |
|
||||
name: item.name, |
|
||||
label: radarTitleMap[key as 'ref'], |
|
||||
value: item[key as 'ref'], |
|
||||
}); |
|
||||
} |
|
||||
}); |
|
||||
}); |
|
||||
|
|
||||
const getFakeChartData: AnalysisData = { |
|
||||
visitData, |
|
||||
visitData2, |
|
||||
salesData, |
|
||||
searchData, |
|
||||
offlineData, |
|
||||
offlineChartData, |
|
||||
salesTypeData, |
|
||||
salesTypeDataOnline, |
|
||||
salesTypeDataOffline, |
|
||||
radarData, |
|
||||
}; |
|
||||
|
|
||||
const fakeChartData = (_: Request, res: Response) => { |
|
||||
return res.json({ |
|
||||
data: getFakeChartData, |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
export default { |
|
||||
'GET /api/fake_analysis_chart_data': fakeChartData, |
|
||||
}; |
|
||||
@ -1,418 +0,0 @@ |
|||||
import dayjs from 'dayjs'; |
|
||||
import type { Request, Response } from 'express'; |
|
||||
import type { DataItem, OfflineDataType } from '../src/pages/dashboard/workplace/data.d'; |
|
||||
|
|
||||
export type SearchDataType = { |
|
||||
index: number; |
|
||||
keyword: string; |
|
||||
count: number; |
|
||||
range: number; |
|
||||
status: number; |
|
||||
}; |
|
||||
|
|
||||
// mock data
|
|
||||
const visitData: DataItem[] = []; |
|
||||
const beginDay = new Date().getTime(); |
|
||||
|
|
||||
const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5]; |
|
||||
for (let i = 0; i < fakeY.length; i += 1) { |
|
||||
visitData.push({ |
|
||||
x: dayjs(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'), |
|
||||
y: fakeY[i], |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
const visitData2: DataItem[] = []; |
|
||||
const fakeY2 = [1, 6, 4, 8, 3, 7, 2]; |
|
||||
for (let i = 0; i < fakeY2.length; i += 1) { |
|
||||
visitData2.push({ |
|
||||
x: dayjs(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'), |
|
||||
y: fakeY2[i], |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
const salesData: DataItem[] = []; |
|
||||
for (let i = 0; i < 12; i += 1) { |
|
||||
salesData.push({ |
|
||||
x: `${i + 1}月`, |
|
||||
y: Math.floor(Math.random() * 1000) + 200, |
|
||||
}); |
|
||||
} |
|
||||
const searchData: SearchDataType[] = []; |
|
||||
for (let i = 0; i < 50; i += 1) { |
|
||||
searchData.push({ |
|
||||
index: i + 1, |
|
||||
keyword: `搜索关键词-${i}`, |
|
||||
count: Math.floor(Math.random() * 1000), |
|
||||
range: Math.floor(Math.random() * 100), |
|
||||
status: Math.floor((Math.random() * 10) % 2), |
|
||||
}); |
|
||||
} |
|
||||
const salesTypeData = [ |
|
||||
{ |
|
||||
x: '家用电器', |
|
||||
y: 4544, |
|
||||
}, |
|
||||
{ |
|
||||
x: '食用酒水', |
|
||||
y: 3321, |
|
||||
}, |
|
||||
{ |
|
||||
x: '个护健康', |
|
||||
y: 3113, |
|
||||
}, |
|
||||
{ |
|
||||
x: '服饰箱包', |
|
||||
y: 2341, |
|
||||
}, |
|
||||
{ |
|
||||
x: '母婴产品', |
|
||||
y: 1231, |
|
||||
}, |
|
||||
{ |
|
||||
x: '其他', |
|
||||
y: 1231, |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
const salesTypeDataOnline = [ |
|
||||
{ |
|
||||
x: '家用电器', |
|
||||
y: 244, |
|
||||
}, |
|
||||
{ |
|
||||
x: '食用酒水', |
|
||||
y: 321, |
|
||||
}, |
|
||||
{ |
|
||||
x: '个护健康', |
|
||||
y: 311, |
|
||||
}, |
|
||||
{ |
|
||||
x: '服饰箱包', |
|
||||
y: 41, |
|
||||
}, |
|
||||
{ |
|
||||
x: '母婴产品', |
|
||||
y: 121, |
|
||||
}, |
|
||||
{ |
|
||||
x: '其他', |
|
||||
y: 111, |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
const salesTypeDataOffline = [ |
|
||||
{ |
|
||||
x: '家用电器', |
|
||||
y: 99, |
|
||||
}, |
|
||||
{ |
|
||||
x: '食用酒水', |
|
||||
y: 188, |
|
||||
}, |
|
||||
{ |
|
||||
x: '个护健康', |
|
||||
y: 344, |
|
||||
}, |
|
||||
{ |
|
||||
x: '服饰箱包', |
|
||||
y: 255, |
|
||||
}, |
|
||||
{ |
|
||||
x: '其他', |
|
||||
y: 65, |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
const offlineData: OfflineDataType[] = []; |
|
||||
for (let i = 0; i < 10; i += 1) { |
|
||||
offlineData.push({ |
|
||||
name: `Stores ${i}`, |
|
||||
cvr: Math.ceil(Math.random() * 9) / 10, |
|
||||
}); |
|
||||
} |
|
||||
const offlineChartData: DataItem[] = []; |
|
||||
for (let i = 0; i < 20; i += 1) { |
|
||||
offlineChartData.push({ |
|
||||
x: new Date().getTime() + 1000 * 60 * 30 * i, |
|
||||
y1: Math.floor(Math.random() * 100) + 10, |
|
||||
y2: Math.floor(Math.random() * 100) + 10, |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
const titles = [ |
|
||||
'Alipay', |
|
||||
'Angular', |
|
||||
'Ant Design', |
|
||||
'Ant Design Pro', |
|
||||
'Bootstrap', |
|
||||
'React', |
|
||||
'Vue', |
|
||||
'Webpack', |
|
||||
]; |
|
||||
const avatars = [ |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', // Alipay
|
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', // Angular
|
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', // Ant Design
|
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', // Ant Design Pro
|
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', // Bootstrap
|
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png', // React
|
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', // Vue
|
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png', // Webpack
|
|
||||
]; |
|
||||
|
|
||||
const avatars2 = [ |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png', |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png', |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png', |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png', |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png', |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png', |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/psOgztMplJMGpVEqfcgF.png', |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/ZpBqSxLxVEXfcUNoPKrz.png', |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/laiEnJdGHVOhJrUShBaJ.png', |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/UrQsqscbKEpNuJcvBZBu.png', |
|
||||
]; |
|
||||
|
|
||||
const getNotice = (_: Request, res: Response) => { |
|
||||
res.json({ |
|
||||
data: [ |
|
||||
{ |
|
||||
id: 'xxx1', |
|
||||
title: titles[0], |
|
||||
logo: avatars[0], |
|
||||
description: '那是一种内在的东西，他们到达不了，也无法触及的', |
|
||||
updatedAt: new Date(), |
|
||||
member: '科学搬砖组', |
|
||||
href: '', |
|
||||
memberLink: '', |
|
||||
}, |
|
||||
{ |
|
||||
id: 'xxx2', |
|
||||
title: titles[1], |
|
||||
logo: avatars[1], |
|
||||
description: '希望是一个好东西，也许是最好的，好东西是不会消亡的', |
|
||||
updatedAt: new Date('2017-07-24'), |
|
||||
member: '全组都是吴彦祖', |
|
||||
href: '', |
|
||||
memberLink: '', |
|
||||
}, |
|
||||
{ |
|
||||
id: 'xxx3', |
|
||||
title: titles[2], |
|
||||
logo: avatars[2], |
|
||||
description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆', |
|
||||
updatedAt: new Date(), |
|
||||
member: '中二少女团', |
|
||||
href: '', |
|
||||
memberLink: '', |
|
||||
}, |
|
||||
{ |
|
||||
id: 'xxx4', |
|
||||
title: titles[3], |
|
||||
logo: avatars[3], |
|
||||
description: '那时候我只会想自己想要什么，从不想自己拥有什么', |
|
||||
updatedAt: new Date('2017-07-23'), |
|
||||
member: '程序员日常', |
|
||||
href: '', |
|
||||
memberLink: '', |
|
||||
}, |
|
||||
{ |
|
||||
id: 'xxx5', |
|
||||
title: titles[4], |
|
||||
logo: avatars[4], |
|
||||
description: '凛冬将至', |
|
||||
updatedAt: new Date('2017-07-23'), |
|
||||
member: '高逼格设计天团', |
|
||||
href: '', |
|
||||
memberLink: '', |
|
||||
}, |
|
||||
{ |
|
||||
id: 'xxx6', |
|
||||
title: titles[5], |
|
||||
logo: avatars[5], |
|
||||
description: '生命就像一盒巧克力，结果往往出人意料', |
|
||||
updatedAt: new Date('2017-07-23'), |
|
||||
member: '骗你来学计算机', |
|
||||
href: '', |
|
||||
memberLink: '', |
|
||||
}, |
|
||||
], |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
const getActivities = (_: Request, res: Response) => { |
|
||||
res.json({ |
|
||||
data: [ |
|
||||
{ |
|
||||
id: 'trend-1', |
|
||||
updatedAt: new Date(), |
|
||||
user: { |
|
||||
name: '曲丽丽', |
|
||||
avatar: avatars2[0], |
|
||||
}, |
|
||||
group: { |
|
||||
name: '高逼格设计天团', |
|
||||
link: 'http://github.com/', |
|
||||
}, |
|
||||
project: { |
|
||||
name: '六月迭代', |
|
||||
link: 'http://github.com/', |
|
||||
}, |
|
||||
template: '在 @{group} 新建项目 @{project}', |
|
||||
}, |
|
||||
{ |
|
||||
id: 'trend-2', |
|
||||
updatedAt: new Date(), |
|
||||
user: { |
|
||||
name: '付小小', |
|
||||
avatar: avatars2[1], |
|
||||
}, |
|
||||
group: { |
|
||||
name: '高逼格设计天团', |
|
||||
link: 'http://github.com/', |
|
||||
}, |
|
||||
project: { |
|
||||
name: '六月迭代', |
|
||||
link: 'http://github.com/', |
|
||||
}, |
|
||||
template: '在 @{group} 新建项目 @{project}', |
|
||||
}, |
|
||||
{ |
|
||||
id: 'trend-3', |
|
||||
updatedAt: new Date(), |
|
||||
user: { |
|
||||
name: '林东东', |
|
||||
avatar: avatars2[2], |
|
||||
}, |
|
||||
group: { |
|
||||
name: '中二少女团', |
|
||||
link: 'http://github.com/', |
|
||||
}, |
|
||||
project: { |
|
||||
name: '六月迭代', |
|
||||
link: 'http://github.com/', |
|
||||
}, |
|
||||
template: '在 @{group} 新建项目 @{project}', |
|
||||
}, |
|
||||
{ |
|
||||
id: 'trend-4', |
|
||||
updatedAt: new Date(), |
|
||||
user: { |
|
||||
name: '周星星', |
|
||||
avatar: avatars2[4], |
|
||||
}, |
|
||||
project: { |
|
||||
name: '5 月日常迭代', |
|
||||
link: 'http://github.com/', |
|
||||
}, |
|
||||
template: '将 @{project} 更新至已发布状态', |
|
||||
}, |
|
||||
{ |
|
||||
id: 'trend-5', |
|
||||
updatedAt: new Date(), |
|
||||
user: { |
|
||||
name: '朱偏右', |
|
||||
avatar: avatars2[3], |
|
||||
}, |
|
||||
project: { |
|
||||
name: '工程效能', |
|
||||
link: 'http://github.com/', |
|
||||
}, |
|
||||
comment: { |
|
||||
name: '留言', |
|
||||
link: 'http://github.com/', |
|
||||
}, |
|
||||
template: '在 @{project} 发布了 @{comment}', |
|
||||
}, |
|
||||
{ |
|
||||
id: 'trend-6', |
|
||||
updatedAt: new Date(), |
|
||||
user: { |
|
||||
name: '乐哥', |
|
||||
avatar: avatars2[5], |
|
||||
}, |
|
||||
group: { |
|
||||
name: '程序员日常', |
|
||||
link: 'http://github.com/', |
|
||||
}, |
|
||||
project: { |
|
||||
name: '品牌迭代', |
|
||||
link: 'http://github.com/', |
|
||||
}, |
|
||||
template: '在 @{group} 新建项目 @{project}', |
|
||||
}, |
|
||||
], |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
const radarOriginData = [ |
|
||||
{ |
|
||||
name: '个人', |
|
||||
ref: 10, |
|
||||
koubei: 8, |
|
||||
output: 4, |
|
||||
contribute: 5, |
|
||||
hot: 7, |
|
||||
}, |
|
||||
{ |
|
||||
name: '团队', |
|
||||
ref: 3, |
|
||||
koubei: 9, |
|
||||
output: 6, |
|
||||
contribute: 3, |
|
||||
hot: 1, |
|
||||
}, |
|
||||
{ |
|
||||
name: '部门', |
|
||||
ref: 4, |
|
||||
koubei: 1, |
|
||||
output: 6, |
|
||||
contribute: 5, |
|
||||
hot: 7, |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
const radarData: any[] = []; |
|
||||
const radarTitleMap = { |
|
||||
ref: '引用', |
|
||||
koubei: '口碑', |
|
||||
output: '产量', |
|
||||
contribute: '贡献', |
|
||||
hot: '热度', |
|
||||
}; |
|
||||
radarOriginData.forEach((item) => { |
|
||||
Object.keys(item).forEach((key) => { |
|
||||
if (key !== 'name') { |
|
||||
radarData.push({ |
|
||||
name: item.name, |
|
||||
label: radarTitleMap[key as 'ref'], |
|
||||
value: item[key as 'ref'], |
|
||||
}); |
|
||||
} |
|
||||
}); |
|
||||
}); |
|
||||
|
|
||||
const getChartData = (_: Request, res: Response) => { |
|
||||
res.json({ |
|
||||
data: { |
|
||||
visitData, |
|
||||
visitData2, |
|
||||
salesData, |
|
||||
searchData, |
|
||||
offlineData, |
|
||||
offlineChartData, |
|
||||
salesTypeData, |
|
||||
salesTypeDataOnline, |
|
||||
salesTypeDataOffline, |
|
||||
radarData, |
|
||||
}, |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
export default { |
|
||||
'GET /api/project/notice': getNotice, |
|
||||
'GET /api/activities': getActivities, |
|
||||
'GET /api/fake_workplace_chart_data': getChartData, |
|
||||
}; |
|
||||
@ -1,69 +0,0 @@ |
|||||
import { createStyles } from 'antd-style'; |
|
||||
|
|
||||
const useStyles = createStyles(({ token }) => { |
|
||||
return { |
|
||||
avatarHolder: { |
|
||||
marginBottom: '24px', |
|
||||
textAlign: 'center', |
|
||||
'& > img': { width: '104px', height: '104px', marginBottom: '20px' }, |
|
||||
}, |
|
||||
name: { |
|
||||
marginBottom: '4px', |
|
||||
color: token.colorTextHeading, |
|
||||
fontWeight: '500', |
|
||||
fontSize: '20px', |
|
||||
lineHeight: '28px', |
|
||||
}, |
|
||||
detail: { |
|
||||
p: { |
|
||||
position: 'relative', |
|
||||
marginBottom: '8px', |
|
||||
paddingLeft: '26px', |
|
||||
'&:last-child': { |
|
||||
marginBottom: '0', |
|
||||
}, |
|
||||
}, |
|
||||
i: { |
|
||||
position: 'absolute', |
|
||||
top: '4px', |
|
||||
left: '0', |
|
||||
width: '14px', |
|
||||
height: '14px', |
|
||||
}, |
|
||||
}, |
|
||||
tagsTitle: { |
|
||||
marginBottom: '12px', |
|
||||
color: token.colorTextHeading, |
|
||||
fontWeight: '500', |
|
||||
}, |
|
||||
teamTitle: { |
|
||||
marginBottom: '12px', |
|
||||
color: token.colorTextHeading, |
|
||||
fontWeight: '500', |
|
||||
}, |
|
||||
tags: { |
|
||||
'.ant-tag': { marginBottom: '8px' }, |
|
||||
}, |
|
||||
team: { |
|
||||
'.ant-avatar': { marginRight: '12px' }, |
|
||||
a: { |
|
||||
display: 'block', |
|
||||
marginBottom: '24px', |
|
||||
overflow: 'hidden', |
|
||||
color: token.colorText, |
|
||||
whiteSpace: 'nowrap', |
|
||||
textOverflow: 'ellipsis', |
|
||||
wordBreak: 'break-all', |
|
||||
transition: 'color 0.3s', |
|
||||
'&:hover': { |
|
||||
color: token.colorPrimary, |
|
||||
}, |
|
||||
}, |
|
||||
}, |
|
||||
tabsCard: { |
|
||||
'.ant-card-head': { padding: '0 16px' }, |
|
||||
}, |
|
||||
}; |
|
||||
}); |
|
||||
|
|
||||
export default useStyles; |
|
||||
@ -1,249 +0,0 @@ |
|||||
import type { Request, Response } from 'express'; |
|
||||
import type { ListItemDataType } from './data.d'; |
|
||||
|
|
||||
const titles = [ |
|
||||
'Alipay', |
|
||||
'Angular', |
|
||||
'Ant Design', |
|
||||
'Ant Design Pro', |
|
||||
'Bootstrap', |
|
||||
'React', |
|
||||
'Vue', |
|
||||
'Webpack', |
|
||||
]; |
|
||||
const avatars = [ |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', // Alipay
|
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', // Angular
|
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', // Ant Design
|
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', // Ant Design Pro
|
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', // Bootstrap
|
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png', // React
|
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', // Vue
|
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png', // Webpack
|
|
||||
]; |
|
||||
|
|
||||
const covers = [ |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png', |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png', |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png', |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png', |
|
||||
]; |
|
||||
const desc = [ |
|
||||
'那是一种内在的东西， 他们到达不了，也无法触及的', |
|
||||
'希望是一个好东西，也许是最好的，好东西是不会消亡的', |
|
||||
'生命就像一盒巧克力，结果往往出人意料', |
|
||||
'城镇中有那么多的酒馆，她却偏偏走进了我的酒馆', |
|
||||
'那时候我只会想自己想要什么，从不想自己拥有什么', |
|
||||
]; |
|
||||
|
|
||||
const user = [ |
|
||||
'付小小', |
|
||||
'曲丽丽', |
|
||||
'林东东', |
|
||||
'周星星', |
|
||||
'吴加好', |
|
||||
'朱偏右', |
|
||||
'鱼酱', |
|
||||
'乐哥', |
|
||||
'谭小仪', |
|
||||
'仲尼', |
|
||||
]; |
|
||||
|
|
||||
// 当前用户信息
|
|
||||
const currentUseDetail = { |
|
||||
name: 'Serati Ma', |
|
||||
avatar: |
|
||||
'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png', |
|
||||
userid: '00000001', |
|
||||
email: 'antdesign@alipay.com', |
|
||||
signature: '海纳百川，有容乃大', |
|
||||
title: '交互专家', |
|
||||
group: '蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED', |
|
||||
tags: [ |
|
||||
{ |
|
||||
key: '0', |
|
||||
label: '很有想法的', |
|
||||
}, |
|
||||
{ |
|
||||
key: '1', |
|
||||
label: '专注设计', |
|
||||
}, |
|
||||
{ |
|
||||
key: '2', |
|
||||
label: '辣~', |
|
||||
}, |
|
||||
{ |
|
||||
key: '3', |
|
||||
label: '大长腿', |
|
||||
}, |
|
||||
{ |
|
||||
key: '4', |
|
||||
label: '川妹子', |
|
||||
}, |
|
||||
{ |
|
||||
key: '5', |
|
||||
label: '海纳百川', |
|
||||
}, |
|
||||
], |
|
||||
notice: [ |
|
||||
{ |
|
||||
id: 'xxx1', |
|
||||
title: titles[0], |
|
||||
logo: avatars[0], |
|
||||
description: '那是一种内在的东西，他们到达不了，也无法触及的', |
|
||||
updatedAt: new Date(), |
|
||||
member: '科学搬砖组', |
|
||||
href: '', |
|
||||
memberLink: '', |
|
||||
}, |
|
||||
{ |
|
||||
id: 'xxx2', |
|
||||
title: titles[1], |
|
||||
logo: avatars[1], |
|
||||
description: '希望是一个好东西，也许是最好的，好东西是不会消亡的', |
|
||||
updatedAt: new Date('2017-07-24'), |
|
||||
member: '全组都是吴彦祖', |
|
||||
href: '', |
|
||||
memberLink: '', |
|
||||
}, |
|
||||
{ |
|
||||
id: 'xxx3', |
|
||||
title: titles[2], |
|
||||
logo: avatars[2], |
|
||||
description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆', |
|
||||
updatedAt: new Date(), |
|
||||
member: '中二少女团', |
|
||||
href: '', |
|
||||
memberLink: '', |
|
||||
}, |
|
||||
{ |
|
||||
id: 'xxx4', |
|
||||
title: titles[3], |
|
||||
logo: avatars[3], |
|
||||
description: '那时候我只会想自己想要什么，从不想自己拥有什么', |
|
||||
updatedAt: new Date('2017-07-23'), |
|
||||
member: '程序员日常', |
|
||||
href: '', |
|
||||
memberLink: '', |
|
||||
}, |
|
||||
{ |
|
||||
id: 'xxx5', |
|
||||
title: titles[4], |
|
||||
logo: avatars[4], |
|
||||
description: '凛冬将至', |
|
||||
updatedAt: new Date('2017-07-23'), |
|
||||
member: '高逼格设计天团', |
|
||||
href: '', |
|
||||
memberLink: '', |
|
||||
}, |
|
||||
{ |
|
||||
id: 'xxx6', |
|
||||
title: titles[5], |
|
||||
logo: avatars[5], |
|
||||
description: '生命就像一盒巧克力，结果往往出人意料', |
|
||||
updatedAt: new Date('2017-07-23'), |
|
||||
member: '骗你来学计算机', |
|
||||
href: '', |
|
||||
memberLink: '', |
|
||||
}, |
|
||||
], |
|
||||
notifyCount: 12, |
|
||||
unreadCount: 11, |
|
||||
country: 'China', |
|
||||
geographic: { |
|
||||
province: { |
|
||||
label: '浙江省', |
|
||||
key: '330000', |
|
||||
}, |
|
||||
city: { |
|
||||
label: '杭州市', |
|
||||
key: '330100', |
|
||||
}, |
|
||||
}, |
|
||||
address: '西湖区工专路 77 号', |
|
||||
phone: '0752-268888888', |
|
||||
}; |
|
||||
|
|
||||
function fakeList(count: number): ListItemDataType[] { |
|
||||
const list = []; |
|
||||
for (let i = 0; i < count; i += 1) { |
|
||||
list.push({ |
|
||||
id: `fake-list-${i}`, |
|
||||
owner: user[i % 10], |
|
||||
title: titles[i % 8], |
|
||||
avatar: avatars[i % 8], |
|
||||
cover: |
|
||||
parseInt(`${i / 4}`, 10) % 2 === 0 |
|
||||
? covers[i % 4] |
|
||||
: covers[3 - (i % 4)], |
|
||||
status: ['active', 'exception', 'normal'][i % 3] as |
|
||||
| 'normal' |
|
||||
| 'exception' |
|
||||
| 'active' |
|
||||
| 'success', |
|
||||
percent: Math.ceil(Math.random() * 50) + 50, |
|
||||
logo: avatars[i % 8], |
|
||||
href: 'https://ant.design', |
|
||||
updatedAt: new Date(Date.now() - 1000 * 60 * 60 * 2 * i).getTime(), |
|
||||
createdAt: new Date(Date.now() - 1000 * 60 * 60 * 2 * i).getTime(), |
|
||||
subDescription: desc[i % 5], |
|
||||
description: |
|
||||
'在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。', |
|
||||
activeUser: Math.ceil(Math.random() * 100000) + 100000, |
|
||||
newUser: Math.ceil(Math.random() * 1000) + 1000, |
|
||||
star: Math.ceil(Math.random() * 100) + 100, |
|
||||
like: Math.ceil(Math.random() * 100) + 100, |
|
||||
message: Math.ceil(Math.random() * 10) + 10, |
|
||||
content: |
|
||||
'段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。', |
|
||||
members: [ |
|
||||
{ |
|
||||
avatar: |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png', |
|
||||
name: '曲丽丽', |
|
||||
id: 'member1', |
|
||||
}, |
|
||||
{ |
|
||||
avatar: |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png', |
|
||||
name: '王昭君', |
|
||||
id: 'member2', |
|
||||
}, |
|
||||
{ |
|
||||
avatar: |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png', |
|
||||
name: '董娜娜', |
|
||||
id: 'member3', |
|
||||
}, |
|
||||
], |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
return list; |
|
||||
} |
|
||||
|
|
||||
function getFakeList(req: Request, res: Response) { |
|
||||
const params = req.query as any; |
|
||||
|
|
||||
const count = Number(params.count) * 1 || 5; |
|
||||
|
|
||||
const result = fakeList(count); |
|
||||
return res.json({ |
|
||||
data: { |
|
||||
list: result, |
|
||||
}, |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
// 获取用户信息
|
|
||||
function getCurrentUser(_req: Request, res: Response) { |
|
||||
return res.json({ |
|
||||
data: currentUseDetail, |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
export default { |
|
||||
'GET /api/fake_list_Detail': getFakeList, |
|
||||
// 支持值为 Object 和 Array
|
|
||||
'GET /api/currentUserDetail': getCurrentUser, |
|
||||
}; |
|
||||
@ -1,43 +0,0 @@ |
|||||
import { createStyles } from 'antd-style'; |
|
||||
|
|
||||
const useStyles = createStyles(({ token }) => { |
|
||||
return { |
|
||||
filterCardList: { |
|
||||
marginBottom: '-24px', |
|
||||
'.ant-card-meta-content': { marginTop: '0' }, |
|
||||
'.ant-card-meta-avatar': { fontSize: '0' }, |
|
||||
'.ant-list .ant-list-item-content-single': { maxWidth: '100%' }, |
|
||||
}, |
|
||||
cardInfo: { |
|
||||
marginTop: '16px', |
|
||||
marginLeft: '40px', |
|
||||
zoom: '1', |
|
||||
'&::before, &::after': { display: 'table', content: "' '" }, |
|
||||
'&::after': { |
|
||||
clear: 'both', |
|
||||
height: '0', |
|
||||
fontSize: '0', |
|
||||
visibility: 'hidden', |
|
||||
}, |
|
||||
'& > div': { |
|
||||
position: 'relative', |
|
||||
float: 'left', |
|
||||
width: '50%', |
|
||||
textAlign: 'left', |
|
||||
p: { |
|
||||
margin: '0', |
|
||||
fontSize: '24px', |
|
||||
lineHeight: '32px', |
|
||||
}, |
|
||||
'p:first-child': { |
|
||||
marginBottom: '4px', |
|
||||
color: token.colorTextSecondary, |
|
||||
fontSize: '12px', |
|
||||
lineHeight: '20px', |
|
||||
}, |
|
||||
}, |
|
||||
}, |
|
||||
}; |
|
||||
}); |
|
||||
|
|
||||
export default useStyles; |
|
||||
@ -1,31 +0,0 @@ |
|||||
import { createStyles } from 'antd-style'; |
|
||||
|
|
||||
const useStyles = createStyles(({ token }) => { |
|
||||
return { |
|
||||
description: { |
|
||||
maxWidth: '720px', |
|
||||
lineHeight: '22px', |
|
||||
}, |
|
||||
extra: { |
|
||||
marginTop: '16px', |
|
||||
color: token.colorTextSecondary, |
|
||||
lineHeight: '22px', |
|
||||
display: 'flex', |
|
||||
gap: '8px', |
|
||||
alignItems: 'center', |
|
||||
'& > em': { |
|
||||
color: token.colorTextDisabled, |
|
||||
fontStyle: 'normal', |
|
||||
}, |
|
||||
[`@media screen and (max-width: ${token.screenXS}px)`]: { |
|
||||
'& > em': { |
|
||||
display: 'block', |
|
||||
marginTop: '8px', |
|
||||
marginLeft: '0', |
|
||||
}, |
|
||||
}, |
|
||||
}, |
|
||||
}; |
|
||||
}); |
|
||||
|
|
||||
export default useStyles; |
|
||||
@ -1,29 +0,0 @@ |
|||||
import { Avatar } from 'antd'; |
|
||||
import dayjs from 'dayjs'; |
|
||||
import React from 'react'; |
|
||||
import useStyles from './index.style'; |
|
||||
export type ApplicationsProps = { |
|
||||
data: { |
|
||||
content?: string; |
|
||||
updatedAt?: any; |
|
||||
avatar?: string; |
|
||||
owner?: string; |
|
||||
href?: string; |
|
||||
}; |
|
||||
}; |
|
||||
const ArticleListContent: React.FC<ApplicationsProps> = ({ |
|
||||
data: { content, updatedAt, avatar, owner, href }, |
|
||||
}) => { |
|
||||
const { styles } = useStyles(); |
|
||||
return ( |
|
||||
<div> |
|
||||
<div className={styles.description}>{content}</div> |
|
||||
<div className={styles.extra}> |
|
||||
<Avatar src={avatar} size="small" /> |
|
||||
<a href={href}>{owner}</a> 发布在 <a href={href}>{href}</a> |
|
||||
<em>{dayjs(updatedAt).format('YYYY-MM-DD HH:mm')}</em> |
|
||||
</div> |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
export default ArticleListContent; |
|
||||
@ -1,14 +0,0 @@ |
|||||
import { createStyles } from 'antd-style'; |
|
||||
|
|
||||
const useStyles = createStyles(({ token }) => { |
|
||||
return { |
|
||||
articleList: { |
|
||||
'.ant-list-item:first-child': { paddingTop: '0' }, |
|
||||
}, |
|
||||
listItemMetaTitle: { |
|
||||
color: token.colorTextHeading, |
|
||||
}, |
|
||||
}; |
|
||||
}); |
|
||||
|
|
||||
export default useStyles; |
|
||||
@ -1,70 +0,0 @@ |
|||||
import { LikeOutlined, MessageFilled, StarTwoTone } from '@ant-design/icons'; |
|
||||
import { useRequest } from '@umijs/max'; |
|
||||
import { List, Tag } from 'antd'; |
|
||||
import React from 'react'; |
|
||||
import type { ListItemDataType } from '../../data.d'; |
|
||||
import { queryFakeList } from '../../service'; |
|
||||
import ArticleListContent from '../ArticleListContent'; |
|
||||
import useStyles from './index.style'; |
|
||||
|
|
||||
const Articles: React.FC = () => { |
|
||||
const { styles } = useStyles(); |
|
||||
const IconText: React.FC<{ |
|
||||
icon: React.ReactNode; |
|
||||
text: React.ReactNode; |
|
||||
}> = ({ icon, text }) => ( |
|
||||
<span> |
|
||||
{icon} {text} |
|
||||
</span> |
|
||||
); |
|
||||
|
|
||||
// 获取tab列表数据
|
|
||||
const { data: listData } = useRequest(() => { |
|
||||
return queryFakeList({ |
|
||||
count: 30, |
|
||||
}); |
|
||||
}); |
|
||||
return ( |
|
||||
<List<ListItemDataType> |
|
||||
size="large" |
|
||||
className={styles.articleList} |
|
||||
rowKey="id" |
|
||||
itemLayout="vertical" |
|
||||
dataSource={listData?.list || []} |
|
||||
style={{ |
|
||||
margin: '0 -24px', |
|
||||
}} |
|
||||
renderItem={(item) => ( |
|
||||
<List.Item |
|
||||
key={item.id} |
|
||||
actions={[ |
|
||||
<IconText key="star" icon={<StarTwoTone />} text={item.star} />, |
|
||||
<IconText key="like" icon={<LikeOutlined />} text={item.like} />, |
|
||||
<IconText |
|
||||
key="message" |
|
||||
icon={<MessageFilled />} |
|
||||
text={item.message} |
|
||||
/>, |
|
||||
]} |
|
||||
> |
|
||||
<List.Item.Meta |
|
||||
title={ |
|
||||
<a className={styles.listItemMetaTitle} href={item.href}> |
|
||||
{item.title} |
|
||||
</a> |
|
||||
} |
|
||||
description={ |
|
||||
<span> |
|
||||
<Tag>Ant Design</Tag> |
|
||||
<Tag>设计语言</Tag> |
|
||||
<Tag>蚂蚁金服</Tag> |
|
||||
</span> |
|
||||
} |
|
||||
/> |
|
||||
<ArticleListContent data={item} /> |
|
||||
</List.Item> |
|
||||
)} |
|
||||
/> |
|
||||
); |
|
||||
}; |
|
||||
export default Articles; |
|
||||
@ -1,41 +0,0 @@ |
|||||
import { createStyles } from 'antd-style'; |
|
||||
|
|
||||
const useStyles = createStyles(({ token }) => { |
|
||||
return { |
|
||||
avatarList: { |
|
||||
display: 'inline-block', |
|
||||
ul: { display: 'inline-block', marginLeft: '8px', fontSize: '0' }, |
|
||||
}, |
|
||||
avatarItem: { |
|
||||
display: 'inline-block', |
|
||||
width: token.controlHeight, |
|
||||
height: token.controlHeight, |
|
||||
marginLeft: '-8px', |
|
||||
fontSize: token.fontSize, |
|
||||
'.ant-avatar': { border: `1px solid ${token.colorBorder}` }, |
|
||||
}, |
|
||||
avatarItemLarge: { |
|
||||
width: token.controlHeightLG, |
|
||||
height: token.controlHeightLG, |
|
||||
}, |
|
||||
avatarItemSmall: { |
|
||||
width: token.controlHeightSM, |
|
||||
height: token.controlHeightSM, |
|
||||
}, |
|
||||
avatarItemMini: { |
|
||||
width: '20px', |
|
||||
height: '20px', |
|
||||
'.ant-avatar': { |
|
||||
width: '20px', |
|
||||
height: '20px', |
|
||||
lineHeight: '20px', |
|
||||
'.ant-avatar-string': { |
|
||||
fontSize: '12px', |
|
||||
lineHeight: '18px', |
|
||||
}, |
|
||||
}, |
|
||||
}, |
|
||||
}; |
|
||||
}); |
|
||||
|
|
||||
export default useStyles; |
|
||||
@ -1,89 +0,0 @@ |
|||||
import { Avatar, Tooltip } from 'antd'; |
|
||||
import classNames from 'classnames'; |
|
||||
import React from 'react'; |
|
||||
import useStyles from './index.style'; |
|
||||
export declare type SizeType = number | 'small' | 'default' | 'large'; |
|
||||
export type AvatarItemProps = { |
|
||||
tips: React.ReactNode; |
|
||||
src: string; |
|
||||
size?: SizeType; |
|
||||
style?: React.CSSProperties; |
|
||||
onClick?: () => void; |
|
||||
}; |
|
||||
export type AvatarListProps = { |
|
||||
Item?: React.ReactElement<AvatarItemProps>; |
|
||||
size?: SizeType; |
|
||||
maxLength?: number; |
|
||||
excessItemsStyle?: React.CSSProperties; |
|
||||
style?: React.CSSProperties; |
|
||||
children: |
|
||||
| React.ReactElement<AvatarItemProps> |
|
||||
| React.ReactElement<AvatarItemProps>[]; |
|
||||
}; |
|
||||
|
|
||||
const avatarSizeToClassName = (styles: any, size?: SizeType | 'mini') => |
|
||||
classNames(styles.avatarItem, { |
|
||||
[styles.avatarItemLarge]: size === 'large', |
|
||||
[styles.avatarItemSmall]: size === 'small', |
|
||||
[styles.avatarItemMini]: size === 'mini', |
|
||||
}); |
|
||||
|
|
||||
const Item: React.FC<AvatarItemProps> = ({ |
|
||||
src, |
|
||||
size, |
|
||||
tips, |
|
||||
onClick = () => {}, |
|
||||
}) => { |
|
||||
const { styles } = useStyles(); |
|
||||
const cls = avatarSizeToClassName(styles, size); |
|
||||
return ( |
|
||||
<li className={cls} onClick={onClick}> |
|
||||
{tips ? ( |
|
||||
<Tooltip title={tips}> |
|
||||
<Avatar |
|
||||
src={src} |
|
||||
size={size} |
|
||||
style={{ |
|
||||
cursor: 'pointer', |
|
||||
}} |
|
||||
/> |
|
||||
</Tooltip> |
|
||||
) : ( |
|
||||
<Avatar src={src} size={size} /> |
|
||||
)} |
|
||||
</li> |
|
||||
); |
|
||||
}; |
|
||||
const AvatarList: React.FC<AvatarListProps> & { |
|
||||
Item: typeof Item; |
|
||||
} = ({ children, size, maxLength = 5, excessItemsStyle, ...other }) => { |
|
||||
const { styles } = useStyles(); |
|
||||
const numOfChildren = React.Children.count(children); |
|
||||
const numToShow = maxLength >= numOfChildren ? numOfChildren : maxLength; |
|
||||
const childrenArray = React.Children.toArray( |
|
||||
children, |
|
||||
) as React.ReactElement<AvatarItemProps>[]; |
|
||||
const childrenWithProps = childrenArray.slice(0, numToShow).map((child) => |
|
||||
React.cloneElement(child, { |
|
||||
size, |
|
||||
}), |
|
||||
); |
|
||||
if (numToShow < numOfChildren) { |
|
||||
const cls = avatarSizeToClassName(styles, size); |
|
||||
childrenWithProps.push( |
|
||||
<li key="exceed" className={cls}> |
|
||||
<Avatar |
|
||||
size={size} |
|
||||
style={excessItemsStyle} |
|
||||
>{`+${numOfChildren - maxLength}`}</Avatar> |
|
||||
</li>, |
|
||||
); |
|
||||
} |
|
||||
return ( |
|
||||
<div {...other} className={styles.avatarList}> |
|
||||
<ul> {childrenWithProps} </ul> |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
AvatarList.Item = Item; |
|
||||
export default AvatarList; |
|
||||
@ -1,49 +0,0 @@ |
|||||
import { createStyles } from 'antd-style'; |
|
||||
|
|
||||
const useStyles = createStyles(({ token }) => { |
|
||||
return { |
|
||||
card: { |
|
||||
'.ant-card-meta-title': { |
|
||||
marginBottom: '4px', |
|
||||
'& > a': { |
|
||||
display: 'inline-block', |
|
||||
maxWidth: '100%', |
|
||||
color: token.colorTextHeading, |
|
||||
}, |
|
||||
}, |
|
||||
'.ant-card-meta-description': { |
|
||||
height: '44px', |
|
||||
overflow: 'hidden', |
|
||||
lineHeight: '22px', |
|
||||
}, |
|
||||
'&:hover': { |
|
||||
'.ant-card-meta-title > a': { |
|
||||
color: token.colorPrimary, |
|
||||
}, |
|
||||
}, |
|
||||
}, |
|
||||
cardItemContent: { |
|
||||
display: 'flex', |
|
||||
height: '20px', |
|
||||
marginTop: '16px', |
|
||||
marginBottom: '-4px', |
|
||||
lineHeight: '20px', |
|
||||
'& > span': { |
|
||||
flex: '1', |
|
||||
color: token.colorTextSecondary, |
|
||||
fontSize: '12px', |
|
||||
}, |
|
||||
}, |
|
||||
avatarList: { |
|
||||
flex: '0 1 auto', |
|
||||
}, |
|
||||
cardList: { |
|
||||
marginTop: '24px', |
|
||||
}, |
|
||||
coverCardList: { |
|
||||
'.ant-list .ant-list-item-content-single': { maxWidth: '100%' }, |
|
||||
}, |
|
||||
}; |
|
||||
}); |
|
||||
|
|
||||
export default useStyles; |
|
||||
@ -1,65 +0,0 @@ |
|||||
import { useRequest } from '@umijs/max'; |
|
||||
import { Card, List } from 'antd'; |
|
||||
import dayjs from 'dayjs'; |
|
||||
import relativeTime from 'dayjs/plugin/relativeTime'; |
|
||||
import React from 'react'; |
|
||||
import type { ListItemDataType } from '../../data.d'; |
|
||||
import { queryFakeList } from '../../service'; |
|
||||
import AvatarList from '../AvatarList'; |
|
||||
import useStyles from './index.style'; |
|
||||
|
|
||||
dayjs.extend(relativeTime); |
|
||||
const Projects: React.FC = () => { |
|
||||
const { styles } = useStyles(); |
|
||||
// 获取tab列表数据
|
|
||||
const { data: listData } = useRequest(() => { |
|
||||
return queryFakeList({ |
|
||||
count: 30, |
|
||||
}); |
|
||||
}); |
|
||||
return ( |
|
||||
<List<ListItemDataType> |
|
||||
className={styles.coverCardList} |
|
||||
rowKey="id" |
|
||||
grid={{ |
|
||||
gutter: 24, |
|
||||
xxl: 3, |
|
||||
xl: 2, |
|
||||
lg: 2, |
|
||||
md: 2, |
|
||||
sm: 2, |
|
||||
xs: 1, |
|
||||
}} |
|
||||
dataSource={listData?.list || []} |
|
||||
renderItem={(item) => ( |
|
||||
<List.Item> |
|
||||
<Card |
|
||||
className={styles.card} |
|
||||
hoverable |
|
||||
cover={<img alt={item.title} src={item.cover} />} |
|
||||
> |
|
||||
<Card.Meta |
|
||||
title={<a>{item.title}</a>} |
|
||||
description={item.subDescription} |
|
||||
/> |
|
||||
<div className={styles.cardItemContent}> |
|
||||
<span>{dayjs(item.updatedAt).fromNow()}</span> |
|
||||
<div className={styles.avatarList}> |
|
||||
<AvatarList size="small"> |
|
||||
{item.members.map((member) => ( |
|
||||
<AvatarList.Item |
|
||||
key={`${item.id}-avatar-${member.id}`} |
|
||||
src={member.avatar} |
|
||||
tips={member.name} |
|
||||
/> |
|
||||
))} |
|
||||
</AvatarList> |
|
||||
</div> |
|
||||
</div> |
|
||||
</Card> |
|
||||
</List.Item> |
|
||||
)} |
|
||||
/> |
|
||||
); |
|
||||
}; |
|
||||
export default Projects; |
|
||||
@ -1,75 +0,0 @@ |
|||||
export type tabKeyType = 'articles' | 'applications' | 'projects'; |
|
||||
export interface TagType { |
|
||||
key: string; |
|
||||
label: string; |
|
||||
} |
|
||||
|
|
||||
export type GeographicType = { |
|
||||
province: { |
|
||||
label: string; |
|
||||
key: string; |
|
||||
}; |
|
||||
city: { |
|
||||
label: string; |
|
||||
key: string; |
|
||||
}; |
|
||||
}; |
|
||||
|
|
||||
export type NoticeType = { |
|
||||
id: string; |
|
||||
title: string; |
|
||||
logo: string; |
|
||||
description: string; |
|
||||
updatedAt: string; |
|
||||
member: string; |
|
||||
href: string; |
|
||||
memberLink: string; |
|
||||
}; |
|
||||
|
|
||||
export type CurrentUser = { |
|
||||
name: string; |
|
||||
avatar: string; |
|
||||
userid: string; |
|
||||
notice: NoticeType[]; |
|
||||
email: string; |
|
||||
signature: string; |
|
||||
title: string; |
|
||||
group: string; |
|
||||
tags: TagType[]; |
|
||||
notifyCount: number; |
|
||||
unreadCount: number; |
|
||||
country: string; |
|
||||
geographic: GeographicType; |
|
||||
address: string; |
|
||||
phone: string; |
|
||||
}; |
|
||||
|
|
||||
export type Member = { |
|
||||
avatar: string; |
|
||||
name: string; |
|
||||
id: string; |
|
||||
}; |
|
||||
|
|
||||
export type ListItemDataType = { |
|
||||
id: string; |
|
||||
owner: string; |
|
||||
title: string; |
|
||||
avatar: string; |
|
||||
cover: string; |
|
||||
status: 'normal' | 'exception' | 'active' | 'success'; |
|
||||
percent: number; |
|
||||
logo: string; |
|
||||
href: string; |
|
||||
body?: any; |
|
||||
updatedAt: number; |
|
||||
createdAt: number; |
|
||||
subDescription: string; |
|
||||
description: string; |
|
||||
activeUser: number; |
|
||||
newUser: number; |
|
||||
star: number; |
|
||||
like: number; |
|
||||
message: number; |
|
||||
content: string; |
|
||||
members: Member[]; |
|
||||
}; |
|
||||
@ -1,14 +0,0 @@ |
|||||
import { request } from '@umijs/max'; |
|
||||
import type { CurrentUser, ListItemDataType } from './data.d'; |
|
||||
|
|
||||
export async function queryCurrent(): Promise<{ data: CurrentUser }> { |
|
||||
return request('/api/currentUserDetail'); |
|
||||
} |
|
||||
|
|
||||
export async function queryFakeList(params: { |
|
||||
count: number; |
|
||||
}): Promise<{ data: { list: ListItemDataType[] } }> { |
|
||||
return request('/api/fake_list_Detail', { |
|
||||
params, |
|
||||
}); |
|
||||
} |
|
||||
@ -1,79 +0,0 @@ |
|||||
import type { Request, Response } from 'express'; |
|
||||
|
|
||||
const city = require('./geographic/city.json'); |
|
||||
const province = require('./geographic/province.json'); |
|
||||
|
|
||||
function getProvince(_: Request, res: Response) { |
|
||||
return res.json({ |
|
||||
data: province, |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
function getCity(req: Request, res: Response) { |
|
||||
return res.json({ |
|
||||
data: city[req.params.province], |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
function getCurrentUse(_req: Request, res: Response) { |
|
||||
return res.json({ |
|
||||
data: { |
|
||||
name: 'Serati Ma', |
|
||||
avatar: |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png', |
|
||||
userid: '00000001', |
|
||||
email: 'antdesign@alipay.com', |
|
||||
signature: '海纳百川，有容乃大', |
|
||||
title: '交互专家', |
|
||||
group: '蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED', |
|
||||
tags: [ |
|
||||
{ |
|
||||
key: '0', |
|
||||
label: '很有想法的', |
|
||||
}, |
|
||||
{ |
|
||||
key: '1', |
|
||||
label: '专注设计', |
|
||||
}, |
|
||||
{ |
|
||||
key: '2', |
|
||||
label: '辣~', |
|
||||
}, |
|
||||
{ |
|
||||
key: '3', |
|
||||
label: '大长腿', |
|
||||
}, |
|
||||
{ |
|
||||
key: '4', |
|
||||
label: '川妹子', |
|
||||
}, |
|
||||
{ |
|
||||
key: '5', |
|
||||
label: '海纳百川', |
|
||||
}, |
|
||||
], |
|
||||
notifyCount: 12, |
|
||||
unreadCount: 11, |
|
||||
country: 'China', |
|
||||
geographic: { |
|
||||
province: { |
|
||||
label: '浙江省', |
|
||||
key: '330000', |
|
||||
}, |
|
||||
city: { |
|
||||
label: '杭州市', |
|
||||
key: '330100', |
|
||||
}, |
|
||||
}, |
|
||||
address: '西湖区工专路 77 号', |
|
||||
phone: '0752-268888888', |
|
||||
}, |
|
||||
}); |
|
||||
} |
|
||||
// 代码中会兼容本地 service mock 以及部署站点的静态数据
|
|
||||
export default { |
|
||||
// 支持值为 Object 和 Array
|
|
||||
'GET /api/accountSettingCurrentUser': getCurrentUse, |
|
||||
'GET /api/geographic/province': getProvince, |
|
||||
'GET /api/geographic/city/:province': getCity, |
|
||||
}; |
|
||||
@ -1,39 +0,0 @@ |
|||||
import { Input } from 'antd'; |
|
||||
import React from 'react'; |
|
||||
import useStyles from './index.style'; |
|
||||
|
|
||||
type PhoneViewProps = { |
|
||||
value?: string; |
|
||||
onChange?: (value: string) => void; |
|
||||
}; |
|
||||
const PhoneView: React.FC<PhoneViewProps> = (props) => { |
|
||||
const { styles } = useStyles(); |
|
||||
const { value, onChange } = props; |
|
||||
let values = ['', '']; |
|
||||
if (value) { |
|
||||
values = value.split('-'); |
|
||||
} |
|
||||
return ( |
|
||||
<> |
|
||||
<Input |
|
||||
className={styles.area_code} |
|
||||
value={values[0]} |
|
||||
onChange={(e) => { |
|
||||
if (onChange) { |
|
||||
onChange(`${e.target.value}-${values[1]}`); |
|
||||
} |
|
||||
}} |
|
||||
/> |
|
||||
<Input |
|
||||
className={styles.phone_number} |
|
||||
onChange={(e) => { |
|
||||
if (onChange) { |
|
||||
onChange(`${values[0]}-${e.target.value}`); |
|
||||
} |
|
||||
}} |
|
||||
value={values[1]} |
|
||||
/> |
|
||||
</> |
|
||||
); |
|
||||
}; |
|
||||
export default PhoneView; |
|
||||
@ -1,234 +0,0 @@ |
|||||
import { UploadOutlined } from '@ant-design/icons'; |
|
||||
import { |
|
||||
ProForm, |
|
||||
ProFormDependency, |
|
||||
ProFormFieldSet, |
|
||||
ProFormSelect, |
|
||||
ProFormText, |
|
||||
ProFormTextArea, |
|
||||
} from '@ant-design/pro-components'; |
|
||||
import { useRequest } from '@umijs/max'; |
|
||||
import { Button, Input, message, Upload } from 'antd'; |
|
||||
import React from 'react'; |
|
||||
import { queryCity, queryCurrent, queryProvince } from '../service'; |
|
||||
import useStyles from './index.style'; |
|
||||
|
|
||||
const validatorPhone = ( |
|
||||
_rule: any, |
|
||||
value: string[], |
|
||||
callback: (message?: string) => void, |
|
||||
) => { |
|
||||
if (!value[0]) { |
|
||||
callback('Please input your area code!'); |
|
||||
} |
|
||||
if (!value[1]) { |
|
||||
callback('Please input your phone number!'); |
|
||||
} |
|
||||
callback(); |
|
||||
}; |
|
||||
|
|
||||
const BaseView: React.FC = () => { |
|
||||
const { styles } = useStyles(); |
|
||||
// 头像组件 方便以后独立，增加裁剪之类的功能
|
|
||||
const AvatarView = ({ avatar }: { avatar: string }) => ( |
|
||||
<> |
|
||||
<div className={styles.avatar_title}>头像</div> |
|
||||
<div className={styles.avatar}> |
|
||||
<img src={avatar} alt="avatar" /> |
|
||||
</div> |
|
||||
<Upload showUploadList={false}> |
|
||||
<div className={styles.button_view}> |
|
||||
<Button> |
|
||||
<UploadOutlined /> |
|
||||
更换头像 |
|
||||
</Button> |
|
||||
</div> |
|
||||
</Upload> |
|
||||
</> |
|
||||
); |
|
||||
const { data: currentUser, loading } = useRequest(() => { |
|
||||
return queryCurrent(); |
|
||||
}); |
|
||||
const getAvatarURL = () => { |
|
||||
if (currentUser) { |
|
||||
if (currentUser.avatar) { |
|
||||
return currentUser.avatar; |
|
||||
} |
|
||||
const url = |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png'; |
|
||||
return url; |
|
||||
} |
|
||||
return ''; |
|
||||
}; |
|
||||
const handleFinish = async () => { |
|
||||
message.success('更新基本信息成功'); |
|
||||
}; |
|
||||
return ( |
|
||||
<div className={styles.baseView}> |
|
||||
{loading ? null : ( |
|
||||
<> |
|
||||
<div className={styles.left}> |
|
||||
<ProForm |
|
||||
layout="vertical" |
|
||||
onFinish={handleFinish} |
|
||||
submitter={{ |
|
||||
searchConfig: { |
|
||||
submitText: '更新基本信息', |
|
||||
}, |
|
||||
render: (_, dom) => dom[1], |
|
||||
}} |
|
||||
initialValues={{ |
|
||||
...currentUser, |
|
||||
phone: currentUser?.phone.split('-'), |
|
||||
}} |
|
||||
hideRequiredMark |
|
||||
> |
|
||||
<ProFormText |
|
||||
width="md" |
|
||||
name="email" |
|
||||
label="邮箱" |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请输入您的邮箱!', |
|
||||
}, |
|
||||
]} |
|
||||
/> |
|
||||
<ProFormText |
|
||||
width="md" |
|
||||
name="name" |
|
||||
label="昵称" |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请输入您的昵称!', |
|
||||
}, |
|
||||
]} |
|
||||
/> |
|
||||
<ProFormTextArea |
|
||||
name="profile" |
|
||||
label="个人简介" |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请输入个人简介!', |
|
||||
}, |
|
||||
]} |
|
||||
placeholder="个人简介" |
|
||||
/> |
|
||||
<ProFormSelect |
|
||||
width="sm" |
|
||||
name="country" |
|
||||
label="国家/地区" |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请输入您的国家或地区!', |
|
||||
}, |
|
||||
]} |
|
||||
options={[ |
|
||||
{ |
|
||||
label: '中国', |
|
||||
value: 'China', |
|
||||
}, |
|
||||
]} |
|
||||
/> |
|
||||
|
|
||||
<ProForm.Group title="所在省市" size={8}> |
|
||||
<ProFormSelect |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请输入您的所在省!', |
|
||||
}, |
|
||||
]} |
|
||||
width="sm" |
|
||||
fieldProps={{ |
|
||||
labelInValue: true, |
|
||||
}} |
|
||||
name="province" |
|
||||
request={async () => { |
|
||||
return queryProvince().then(({ data }) => { |
|
||||
return data.map((item) => { |
|
||||
return { |
|
||||
label: item.name, |
|
||||
value: item.id, |
|
||||
}; |
|
||||
}); |
|
||||
}); |
|
||||
}} |
|
||||
/> |
|
||||
<ProFormDependency name={['province']}> |
|
||||
{({ province }) => { |
|
||||
return ( |
|
||||
<ProFormSelect |
|
||||
params={{ |
|
||||
key: province?.value, |
|
||||
}} |
|
||||
name="city" |
|
||||
width="sm" |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请输入您的所在城市!', |
|
||||
}, |
|
||||
]} |
|
||||
disabled={!province} |
|
||||
request={async () => { |
|
||||
if (!province?.key) { |
|
||||
return []; |
|
||||
} |
|
||||
return queryCity(province.key || '').then( |
|
||||
({ data }) => { |
|
||||
return data.map((item) => { |
|
||||
return { |
|
||||
label: item.name, |
|
||||
value: item.id, |
|
||||
}; |
|
||||
}); |
|
||||
}, |
|
||||
); |
|
||||
}} |
|
||||
/> |
|
||||
); |
|
||||
}} |
|
||||
</ProFormDependency> |
|
||||
</ProForm.Group> |
|
||||
<ProFormText |
|
||||
width="md" |
|
||||
name="address" |
|
||||
label="街道地址" |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请输入您的街道地址!', |
|
||||
}, |
|
||||
]} |
|
||||
/> |
|
||||
<ProFormFieldSet |
|
||||
name="phone" |
|
||||
label="联系电话" |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请输入您的联系电话!', |
|
||||
}, |
|
||||
{ |
|
||||
validator: validatorPhone, |
|
||||
}, |
|
||||
]} |
|
||||
> |
|
||||
<Input className={styles.area_code} /> |
|
||||
<Input className={styles.phone_number} /> |
|
||||
</ProFormFieldSet> |
|
||||
</ProForm> |
|
||||
</div> |
|
||||
<div className={styles.right}> |
|
||||
<AvatarView avatar={getAvatarURL()} /> |
|
||||
</div> |
|
||||
</> |
|
||||
)} |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
export default BaseView; |
|
||||
@ -1,48 +0,0 @@ |
|||||
import { |
|
||||
AlipayOutlined, |
|
||||
DingdingOutlined, |
|
||||
TaobaoOutlined, |
|
||||
} from '@ant-design/icons'; |
|
||||
import { List } from 'antd'; |
|
||||
import React from 'react'; |
|
||||
|
|
||||
const BindingView: React.FC = () => { |
|
||||
const getData = () => [ |
|
||||
{ |
|
||||
title: '绑定淘宝', |
|
||||
description: '当前未绑定淘宝账号', |
|
||||
actions: [<a key="Bind">绑定</a>], |
|
||||
avatar: <TaobaoOutlined className="taobao" />, |
|
||||
}, |
|
||||
{ |
|
||||
title: '绑定支付宝', |
|
||||
description: '当前未绑定支付宝账号', |
|
||||
actions: [<a key="Bind">绑定</a>], |
|
||||
avatar: <AlipayOutlined className="alipay" />, |
|
||||
}, |
|
||||
{ |
|
||||
title: '绑定钉钉', |
|
||||
description: '当前未绑定钉钉账号', |
|
||||
actions: [<a key="Bind">绑定</a>], |
|
||||
avatar: <DingdingOutlined className="dingding" />, |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
return ( |
|
||||
<List |
|
||||
itemLayout="horizontal" |
|
||||
dataSource={getData()} |
|
||||
renderItem={(item) => ( |
|
||||
<List.Item actions={item.actions}> |
|
||||
<List.Item.Meta |
|
||||
avatar={item.avatar} |
|
||||
title={item.title} |
|
||||
description={item.description} |
|
||||
/> |
|
||||
</List.Item> |
|
||||
)} |
|
||||
/> |
|
||||
); |
|
||||
}; |
|
||||
|
|
||||
export default BindingView; |
|
||||
@ -1,60 +0,0 @@ |
|||||
import { createStyles } from 'antd-style'; |
|
||||
|
|
||||
const useStyles = createStyles(({ token }) => { |
|
||||
return { |
|
||||
baseView: { |
|
||||
display: 'flex', |
|
||||
paddingTop: '12px', |
|
||||
'.ant-legacy-form-item .ant-legacy-form-item-control-wrapper': { |
|
||||
width: '100%', |
|
||||
}, |
|
||||
[`@media screen and (max-width: ${token.screenXL}px)`]: { |
|
||||
flexDirection: 'column-reverse', |
|
||||
}, |
|
||||
}, |
|
||||
left: { |
|
||||
minWidth: '224px', |
|
||||
maxWidth: '448px', |
|
||||
}, |
|
||||
right: { |
|
||||
flex: '1', |
|
||||
paddingLeft: '104px', |
|
||||
[`@media screen and (max-width: ${token.screenXL}px)`]: { |
|
||||
display: 'flex', |
|
||||
flexDirection: 'column', |
|
||||
alignItems: 'center', |
|
||||
maxWidth: '448px', |
|
||||
padding: '20px', |
|
||||
}, |
|
||||
}, |
|
||||
avatar_title: { |
|
||||
height: '22px', |
|
||||
marginBottom: '8px', |
|
||||
color: token.colorTextHeading, |
|
||||
fontSize: token.fontSize, |
|
||||
lineHeight: '22px', |
|
||||
[`@media screen and (max-width: ${token.screenXL}px)`]: { |
|
||||
display: 'none', |
|
||||
}, |
|
||||
}, |
|
||||
avatar: { |
|
||||
width: '144px', |
|
||||
height: '144px', |
|
||||
marginBottom: '12px', |
|
||||
overflow: 'hidden', |
|
||||
img: { width: '100%' }, |
|
||||
}, |
|
||||
button_view: { |
|
||||
width: '144px', |
|
||||
textAlign: 'center', |
|
||||
}, |
|
||||
area_code: { |
|
||||
width: '72px', |
|
||||
}, |
|
||||
phone_number: { |
|
||||
width: '214px', |
|
||||
}, |
|
||||
}; |
|
||||
}); |
|
||||
|
|
||||
export default useStyles; |
|
||||
@ -1,44 +0,0 @@ |
|||||
import { List, Switch } from 'antd'; |
|
||||
import React from 'react'; |
|
||||
|
|
||||
type Unpacked<T> = T extends (infer U)[] ? U : T; |
|
||||
|
|
||||
const NotificationView: React.FC = () => { |
|
||||
const getData = () => { |
|
||||
const Action = ( |
|
||||
<Switch checkedChildren="开" unCheckedChildren="关" defaultChecked /> |
|
||||
); |
|
||||
return [ |
|
||||
{ |
|
||||
title: '用户消息', |
|
||||
description: '其他用户的消息将以站内信的形式通知', |
|
||||
actions: [Action], |
|
||||
}, |
|
||||
{ |
|
||||
title: '系统消息', |
|
||||
description: '系统消息将以站内信的形式通知', |
|
||||
actions: [Action], |
|
||||
}, |
|
||||
{ |
|
||||
title: '待办任务', |
|
||||
description: '待办任务将以站内信的形式通知', |
|
||||
actions: [Action], |
|
||||
}, |
|
||||
]; |
|
||||
}; |
|
||||
|
|
||||
const data = getData(); |
|
||||
return ( |
|
||||
<List<Unpacked<typeof data>> |
|
||||
itemLayout="horizontal" |
|
||||
dataSource={data} |
|
||||
renderItem={(item) => ( |
|
||||
<List.Item actions={item.actions}> |
|
||||
<List.Item.Meta title={item.title} description={item.description} /> |
|
||||
</List.Item> |
|
||||
)} |
|
||||
/> |
|
||||
); |
|
||||
}; |
|
||||
|
|
||||
export default NotificationView; |
|
||||
@ -1,60 +0,0 @@ |
|||||
import { List } from 'antd'; |
|
||||
import React from 'react'; |
|
||||
|
|
||||
type Unpacked<T> = T extends (infer U)[] ? U : T; |
|
||||
|
|
||||
const passwordStrength = { |
|
||||
strong: <span className="strong">强</span>, |
|
||||
medium: <span className="medium">中</span>, |
|
||||
weak: <span className="weak">弱 Weak</span>, |
|
||||
}; |
|
||||
|
|
||||
const SecurityView: React.FC = () => { |
|
||||
const getData = () => [ |
|
||||
{ |
|
||||
title: '账户密码', |
|
||||
description: ( |
|
||||
<> |
|
||||
当前密码强度： |
|
||||
{passwordStrength.strong} |
|
||||
</> |
|
||||
), |
|
||||
actions: [<a key="Modify">修改</a>], |
|
||||
}, |
|
||||
{ |
|
||||
title: '密保手机', |
|
||||
description: `已绑定手机：138****8293`, |
|
||||
actions: [<a key="Modify">修改</a>], |
|
||||
}, |
|
||||
{ |
|
||||
title: '密保问题', |
|
||||
description: '未设置密保问题，密保问题可有效保护账户安全', |
|
||||
actions: [<a key="Set">设置</a>], |
|
||||
}, |
|
||||
{ |
|
||||
title: '备用邮箱', |
|
||||
description: `已绑定邮箱：ant***sign.com`, |
|
||||
actions: [<a key="Modify">修改</a>], |
|
||||
}, |
|
||||
{ |
|
||||
title: 'MFA 设备', |
|
||||
description: '未绑定 MFA 设备，绑定后，可以进行二次确认', |
|
||||
actions: [<a key="bind">绑定</a>], |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
const data = getData(); |
|
||||
return ( |
|
||||
<List<Unpacked<typeof data>> |
|
||||
itemLayout="horizontal" |
|
||||
dataSource={data} |
|
||||
renderItem={(item) => ( |
|
||||
<List.Item actions={item.actions}> |
|
||||
<List.Item.Meta title={item.title} description={item.description} /> |
|
||||
</List.Item> |
|
||||
)} |
|
||||
/> |
|
||||
); |
|
||||
}; |
|
||||
|
|
||||
export default SecurityView; |
|
||||
@ -1,43 +0,0 @@ |
|||||
export type TagType = { |
|
||||
key: string; |
|
||||
label: string; |
|
||||
}; |
|
||||
|
|
||||
export type GeographicItemType = { |
|
||||
name: string; |
|
||||
id: string; |
|
||||
}; |
|
||||
|
|
||||
export type GeographicType = { |
|
||||
province: GeographicItemType; |
|
||||
city: GeographicItemType; |
|
||||
}; |
|
||||
|
|
||||
export type NoticeType = { |
|
||||
id: string; |
|
||||
title: string; |
|
||||
logo: string; |
|
||||
description: string; |
|
||||
updatedAt: string; |
|
||||
member: string; |
|
||||
href: string; |
|
||||
memberLink: string; |
|
||||
}; |
|
||||
|
|
||||
export type CurrentUser = { |
|
||||
name: string; |
|
||||
avatar: string; |
|
||||
userid: string; |
|
||||
notice: NoticeType[]; |
|
||||
email: string; |
|
||||
signature: string; |
|
||||
title: string; |
|
||||
group: string; |
|
||||
tags: TagType[]; |
|
||||
notifyCount: number; |
|
||||
unreadCount: number; |
|
||||
country: string; |
|
||||
geographic: GeographicType; |
|
||||
address: string; |
|
||||
phone: string; |
|
||||
}; |
|
||||
File diff suppressed because it is too large
@ -1,138 +0,0 @@ |
|||||
[ |
|
||||
{ |
|
||||
"name": "北京市", |
|
||||
"id": "110000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "天津市", |
|
||||
"id": "120000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "河北省", |
|
||||
"id": "130000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "山西省", |
|
||||
"id": "140000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "内蒙古自治区", |
|
||||
"id": "150000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "辽宁省", |
|
||||
"id": "210000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "吉林省", |
|
||||
"id": "220000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "黑龙江省", |
|
||||
"id": "230000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "上海市", |
|
||||
"id": "310000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "江苏省", |
|
||||
"id": "320000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "浙江省", |
|
||||
"id": "330000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "安徽省", |
|
||||
"id": "340000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "福建省", |
|
||||
"id": "350000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "江西省", |
|
||||
"id": "360000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "山东省", |
|
||||
"id": "370000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "河南省", |
|
||||
"id": "410000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "湖北省", |
|
||||
"id": "420000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "湖南省", |
|
||||
"id": "430000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "广东省", |
|
||||
"id": "440000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "广西壮族自治区", |
|
||||
"id": "450000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "海南省", |
|
||||
"id": "460000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "重庆市", |
|
||||
"id": "500000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "四川省", |
|
||||
"id": "510000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "贵州省", |
|
||||
"id": "520000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "云南省", |
|
||||
"id": "530000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "西藏自治区", |
|
||||
"id": "540000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "陕西省", |
|
||||
"id": "610000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "甘肃省", |
|
||||
"id": "620000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "青海省", |
|
||||
"id": "630000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "宁夏回族自治区", |
|
||||
"id": "640000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "新疆维吾尔自治区", |
|
||||
"id": "650000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "台湾省", |
|
||||
"id": "710000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "香港特别行政区", |
|
||||
"id": "810000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "澳门特别行政区", |
|
||||
"id": "820000" |
|
||||
} |
|
||||
] |
|
||||
@ -1,108 +0,0 @@ |
|||||
import { GridContent } from '@ant-design/pro-components'; |
|
||||
import { Menu } from 'antd'; |
|
||||
import React, { useLayoutEffect, useRef, useState } from 'react'; |
|
||||
import BaseView from './components/base'; |
|
||||
import BindingView from './components/binding'; |
|
||||
import NotificationView from './components/notification'; |
|
||||
import SecurityView from './components/security'; |
|
||||
import useStyles from './style.style'; |
|
||||
|
|
||||
type SettingsStateKeys = 'base' | 'security' | 'binding' | 'notification'; |
|
||||
type SettingsState = { |
|
||||
mode: 'inline' | 'horizontal'; |
|
||||
selectKey: SettingsStateKeys; |
|
||||
}; |
|
||||
const Settings: React.FC = () => { |
|
||||
const { styles } = useStyles(); |
|
||||
const menuMap: Record<string, React.ReactNode> = { |
|
||||
base: '基本设置', |
|
||||
security: '安全设置', |
|
||||
binding: '账号绑定', |
|
||||
notification: '新消息通知', |
|
||||
}; |
|
||||
const [initConfig, setInitConfig] = useState<SettingsState>({ |
|
||||
mode: 'inline', |
|
||||
selectKey: 'base', |
|
||||
}); |
|
||||
const dom = useRef<HTMLDivElement>(null); |
|
||||
const resize = () => { |
|
||||
requestAnimationFrame(() => { |
|
||||
if (!dom.current) { |
|
||||
return; |
|
||||
} |
|
||||
let mode: 'inline' | 'horizontal' = 'inline'; |
|
||||
const { offsetWidth } = dom.current; |
|
||||
if (dom.current.offsetWidth < 641 && offsetWidth > 400) { |
|
||||
mode = 'horizontal'; |
|
||||
} |
|
||||
if (window.innerWidth < 768 && offsetWidth > 400) { |
|
||||
mode = 'horizontal'; |
|
||||
} |
|
||||
setInitConfig({ |
|
||||
...initConfig, |
|
||||
mode: mode as SettingsState['mode'], |
|
||||
}); |
|
||||
}); |
|
||||
}; |
|
||||
useLayoutEffect(() => { |
|
||||
if (dom.current) { |
|
||||
window.addEventListener('resize', resize); |
|
||||
resize(); |
|
||||
} |
|
||||
return () => { |
|
||||
window.removeEventListener('resize', resize); |
|
||||
}; |
|
||||
}, []); |
|
||||
const getMenu = () => { |
|
||||
return Object.keys(menuMap).map((item) => ({ |
|
||||
key: item, |
|
||||
label: menuMap[item], |
|
||||
})); |
|
||||
}; |
|
||||
const renderChildren = () => { |
|
||||
const { selectKey } = initConfig; |
|
||||
switch (selectKey) { |
|
||||
case 'base': |
|
||||
return <BaseView />; |
|
||||
case 'security': |
|
||||
return <SecurityView />; |
|
||||
case 'binding': |
|
||||
return <BindingView />; |
|
||||
case 'notification': |
|
||||
return <NotificationView />; |
|
||||
default: |
|
||||
return null; |
|
||||
} |
|
||||
}; |
|
||||
return ( |
|
||||
<GridContent> |
|
||||
<div |
|
||||
className={styles.main} |
|
||||
ref={(ref) => { |
|
||||
if (ref) { |
|
||||
dom.current = ref; |
|
||||
} |
|
||||
}} |
|
||||
> |
|
||||
<div className={styles.leftMenu}> |
|
||||
<Menu |
|
||||
mode={initConfig.mode} |
|
||||
selectedKeys={[initConfig.selectKey]} |
|
||||
onClick={({ key }) => { |
|
||||
setInitConfig({ |
|
||||
...initConfig, |
|
||||
selectKey: key as SettingsStateKeys, |
|
||||
}); |
|
||||
}} |
|
||||
items={getMenu()} |
|
||||
/> |
|
||||
</div> |
|
||||
<div className={styles.right}> |
|
||||
<div className={styles.title}>{menuMap[initConfig.selectKey]}</div> |
|
||||
{renderChildren()} |
|
||||
</div> |
|
||||
</div> |
|
||||
</GridContent> |
|
||||
); |
|
||||
}; |
|
||||
export default Settings; |
|
||||
@ -1,20 +0,0 @@ |
|||||
import { request } from '@umijs/max'; |
|
||||
import type { CurrentUser, GeographicItemType } from './data'; |
|
||||
|
|
||||
export async function queryCurrent(): Promise<{ data: CurrentUser }> { |
|
||||
return request('/api/accountSettingCurrentUser'); |
|
||||
} |
|
||||
|
|
||||
export async function queryProvince(): Promise<{ data: GeographicItemType[] }> { |
|
||||
return request('/api/geographic/province'); |
|
||||
} |
|
||||
|
|
||||
export async function queryCity( |
|
||||
province: string, |
|
||||
): Promise<{ data: GeographicItemType[] }> { |
|
||||
return request(`/api/geographic/city/${province}`); |
|
||||
} |
|
||||
|
|
||||
export async function query() { |
|
||||
return request('/api/users'); |
|
||||
} |
|
||||
@ -1,74 +0,0 @@ |
|||||
import { createStyles } from 'antd-style'; |
|
||||
|
|
||||
const useStyles = createStyles(({ token }) => { |
|
||||
return { |
|
||||
main: { |
|
||||
display: 'flex', |
|
||||
width: '100%', |
|
||||
height: '100%', |
|
||||
paddingTop: '16px', |
|
||||
paddingBottom: '16px', |
|
||||
backgroundColor: token.colorBgContainer, |
|
||||
'.ant-list-split .ant-list-item:last-child': { |
|
||||
borderBottom: `1px solid ${token.colorSplit}`, |
|
||||
}, |
|
||||
'.ant-list-item': { paddingTop: '14px', paddingBottom: '14px' }, |
|
||||
[`@media screen and (max-width: ${token.screenMD}px)`]: { |
|
||||
flexDirection: 'column', |
|
||||
}, |
|
||||
}, |
|
||||
leftMenu: { |
|
||||
width: '224px', |
|
||||
borderRight: `${token.lineWidth}px solid ${token.colorSplit}`, |
|
||||
'.ant-menu-inline': { border: 'none' }, |
|
||||
'.ant-menu-horizontal': { fontWeight: 'bold' }, |
|
||||
[`@media screen and (max-width: ${token.screenMD}px)`]: { |
|
||||
width: '100%', |
|
||||
border: 'none', |
|
||||
}, |
|
||||
}, |
|
||||
right: { |
|
||||
flex: '1', |
|
||||
padding: '8px 40px', |
|
||||
[`@media screen and (max-width: ${token.screenMD}px)`]: { |
|
||||
padding: '40px', |
|
||||
}, |
|
||||
}, |
|
||||
title: { |
|
||||
marginBottom: '12px', |
|
||||
color: token.colorTextHeading, |
|
||||
fontWeight: '500', |
|
||||
fontSize: '20px', |
|
||||
lineHeight: '28px', |
|
||||
}, |
|
||||
taobao: { |
|
||||
display: 'block', |
|
||||
color: '#ff4000', |
|
||||
fontSize: '48px', |
|
||||
lineHeight: '48px', |
|
||||
borderRadius: token.borderRadius, |
|
||||
}, |
|
||||
dingding: { |
|
||||
margin: '2px', |
|
||||
padding: '6px', |
|
||||
color: '#fff', |
|
||||
fontSize: '32px', |
|
||||
lineHeight: '32px', |
|
||||
backgroundColor: '#2eabff', |
|
||||
borderRadius: token.borderRadius, |
|
||||
}, |
|
||||
alipay: { |
|
||||
color: '#2eabff', |
|
||||
fontSize: '48px', |
|
||||
lineHeight: '48px', |
|
||||
borderRadius: token.borderRadius, |
|
||||
}, |
|
||||
':global': { |
|
||||
'font.strong': { color: token.colorSuccess }, |
|
||||
'font.medium': { color: token.colorWarning }, |
|
||||
'font.weak': { color: token.colorError }, |
|
||||
}, |
|
||||
}; |
|
||||
}); |
|
||||
|
|
||||
export default useStyles; |
|
||||
@ -1,210 +0,0 @@ |
|||||
import dayjs from 'dayjs'; |
|
||||
import type { Request, Response } from 'express'; |
|
||||
import type { AnalysisData, DataItem, RadarData } from './data.d'; |
|
||||
|
|
||||
// mock data
|
|
||||
const visitData: DataItem[] = []; |
|
||||
const beginDay = Date.now(); |
|
||||
|
|
||||
const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5]; |
|
||||
for (let i = 0; i < fakeY.length; i += 1) { |
|
||||
visitData.push({ |
|
||||
x: dayjs(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'), |
|
||||
y: fakeY[i], |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
const visitData2 = []; |
|
||||
const fakeY2 = [1, 6, 4, 8, 3, 7, 2]; |
|
||||
for (let i = 0; i < fakeY2.length; i += 1) { |
|
||||
visitData2.push({ |
|
||||
x: dayjs(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'), |
|
||||
y: fakeY2[i], |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
const salesData = []; |
|
||||
for (let i = 0; i < 12; i += 1) { |
|
||||
salesData.push({ |
|
||||
x: `${i + 1}月`, |
|
||||
y: Math.floor(Math.random() * 1000) + 200, |
|
||||
}); |
|
||||
} |
|
||||
const searchData = []; |
|
||||
for (let i = 0; i < 50; i += 1) { |
|
||||
searchData.push({ |
|
||||
index: i + 1, |
|
||||
keyword: `搜索关键词-${i}`, |
|
||||
count: Math.floor(Math.random() * 1000), |
|
||||
range: Math.floor(Math.random() * 100), |
|
||||
status: Math.floor((Math.random() * 10) % 2), |
|
||||
}); |
|
||||
} |
|
||||
const salesTypeData = [ |
|
||||
{ |
|
||||
x: '家用电器', |
|
||||
y: 4544, |
|
||||
}, |
|
||||
{ |
|
||||
x: '食用酒水', |
|
||||
y: 3321, |
|
||||
}, |
|
||||
{ |
|
||||
x: '个护健康', |
|
||||
y: 3113, |
|
||||
}, |
|
||||
{ |
|
||||
x: '服饰箱包', |
|
||||
y: 2341, |
|
||||
}, |
|
||||
{ |
|
||||
x: '母婴产品', |
|
||||
y: 1231, |
|
||||
}, |
|
||||
{ |
|
||||
x: '其他', |
|
||||
y: 1231, |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
const salesTypeDataOnline = [ |
|
||||
{ |
|
||||
x: '家用电器', |
|
||||
y: 244, |
|
||||
}, |
|
||||
{ |
|
||||
x: '食用酒水', |
|
||||
y: 321, |
|
||||
}, |
|
||||
{ |
|
||||
x: '个护健康', |
|
||||
y: 311, |
|
||||
}, |
|
||||
{ |
|
||||
x: '服饰箱包', |
|
||||
y: 41, |
|
||||
}, |
|
||||
{ |
|
||||
x: '母婴产品', |
|
||||
y: 121, |
|
||||
}, |
|
||||
{ |
|
||||
x: '其他', |
|
||||
y: 111, |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
const salesTypeDataOffline = [ |
|
||||
{ |
|
||||
x: '家用电器', |
|
||||
y: 99, |
|
||||
}, |
|
||||
{ |
|
||||
x: '食用酒水', |
|
||||
y: 188, |
|
||||
}, |
|
||||
{ |
|
||||
x: '个护健康', |
|
||||
y: 344, |
|
||||
}, |
|
||||
{ |
|
||||
x: '服饰箱包', |
|
||||
y: 255, |
|
||||
}, |
|
||||
{ |
|
||||
x: '其他', |
|
||||
y: 65, |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
const offlineData = []; |
|
||||
for (let i = 0; i < 10; i += 1) { |
|
||||
offlineData.push({ |
|
||||
name: `Stores ${i}`, |
|
||||
cvr: Math.ceil(Math.random() * 9) / 10, |
|
||||
}); |
|
||||
} |
|
||||
const offlineChartData = []; |
|
||||
for (let i = 0; i < 20; i += 1) { |
|
||||
const date = dayjs(Date.now() + 1000 * 60 * 30 * i).format('HH:mm'); |
|
||||
offlineChartData.push({ |
|
||||
date, |
|
||||
type: '客流量', |
|
||||
value: Math.floor(Math.random() * 100) + 10, |
|
||||
}); |
|
||||
offlineChartData.push({ |
|
||||
date, |
|
||||
type: '支付笔数', |
|
||||
value: Math.floor(Math.random() * 100) + 10, |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
const radarOriginData = [ |
|
||||
{ |
|
||||
name: '个人', |
|
||||
ref: 10, |
|
||||
koubei: 8, |
|
||||
output: 4, |
|
||||
contribute: 5, |
|
||||
hot: 7, |
|
||||
}, |
|
||||
{ |
|
||||
name: '团队', |
|
||||
ref: 3, |
|
||||
koubei: 9, |
|
||||
output: 6, |
|
||||
contribute: 3, |
|
||||
hot: 1, |
|
||||
}, |
|
||||
{ |
|
||||
name: '部门', |
|
||||
ref: 4, |
|
||||
koubei: 1, |
|
||||
output: 6, |
|
||||
contribute: 5, |
|
||||
hot: 7, |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
const radarData: RadarData[] = []; |
|
||||
const radarTitleMap = { |
|
||||
ref: '引用', |
|
||||
koubei: '口碑', |
|
||||
output: '产量', |
|
||||
contribute: '贡献', |
|
||||
hot: '热度', |
|
||||
}; |
|
||||
radarOriginData.forEach((item) => { |
|
||||
Object.keys(item).forEach((key) => { |
|
||||
if (key !== 'name') { |
|
||||
radarData.push({ |
|
||||
name: item.name, |
|
||||
label: radarTitleMap[key as 'ref'], |
|
||||
value: item[key as 'ref'], |
|
||||
}); |
|
||||
} |
|
||||
}); |
|
||||
}); |
|
||||
|
|
||||
const getFakeChartData: AnalysisData = { |
|
||||
visitData, |
|
||||
visitData2, |
|
||||
salesData, |
|
||||
searchData, |
|
||||
offlineData, |
|
||||
offlineChartData, |
|
||||
salesTypeData, |
|
||||
salesTypeDataOnline, |
|
||||
salesTypeDataOffline, |
|
||||
radarData, |
|
||||
}; |
|
||||
|
|
||||
const fakeChartData = (_: Request, res: Response) => { |
|
||||
return res.json({ |
|
||||
data: getFakeChartData, |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
export default { |
|
||||
'GET /api/fake_analysis_chart_data': fakeChartData, |
|
||||
}; |
|
||||
@ -1,75 +0,0 @@ |
|||||
@import '~antd/es/style/themes/default.less'; |
|
||||
|
|
||||
.chartCard { |
|
||||
position: relative; |
|
||||
.chartTop { |
|
||||
position: relative; |
|
||||
width: 100%; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
.chartTopMargin { |
|
||||
margin-bottom: 12px; |
|
||||
} |
|
||||
.chartTopHasMargin { |
|
||||
margin-bottom: 20px; |
|
||||
} |
|
||||
.metaWrap { |
|
||||
float: left; |
|
||||
} |
|
||||
.avatar { |
|
||||
position: relative; |
|
||||
top: 4px; |
|
||||
float: left; |
|
||||
margin-right: 20px; |
|
||||
img { |
|
||||
border-radius: 100%; |
|
||||
} |
|
||||
} |
|
||||
.meta { |
|
||||
height: 22px; |
|
||||
color: @text-color-secondary; |
|
||||
font-size: @font-size-base; |
|
||||
line-height: 22px; |
|
||||
} |
|
||||
.action { |
|
||||
position: absolute; |
|
||||
top: 4px; |
|
||||
right: 0; |
|
||||
line-height: 1; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
.total { |
|
||||
height: 38px; |
|
||||
margin-top: 4px; |
|
||||
margin-bottom: 0; |
|
||||
overflow: hidden; |
|
||||
color: @heading-color; |
|
||||
font-size: 30px; |
|
||||
line-height: 38px; |
|
||||
white-space: nowrap; |
|
||||
text-overflow: ellipsis; |
|
||||
word-break: break-all; |
|
||||
} |
|
||||
.content { |
|
||||
position: relative; |
|
||||
width: 100%; |
|
||||
margin-bottom: 12px; |
|
||||
} |
|
||||
.contentFixed { |
|
||||
position: absolute; |
|
||||
bottom: 0; |
|
||||
left: 0; |
|
||||
width: 100%; |
|
||||
} |
|
||||
.footer { |
|
||||
margin-top: 8px; |
|
||||
padding-top: 9px; |
|
||||
border-top: 1px solid @border-color-split; |
|
||||
& > * { |
|
||||
position: relative; |
|
||||
} |
|
||||
} |
|
||||
.footerMargin { |
|
||||
margin-top: 20px; |
|
||||
} |
|
||||
} |
|
||||
@ -1,77 +0,0 @@ |
|||||
import { createStyles } from 'antd-style'; |
|
||||
|
|
||||
const useStyles = createStyles(({ token }) => { |
|
||||
return { |
|
||||
chartCard: { |
|
||||
position: 'relative', |
|
||||
}, |
|
||||
chartTop: { |
|
||||
position: 'relative', |
|
||||
width: '100%', |
|
||||
overflow: 'hidden', |
|
||||
}, |
|
||||
chartTopMargin: { |
|
||||
marginBottom: '12px', |
|
||||
}, |
|
||||
chartTopHasMargin: { |
|
||||
marginBottom: '20px', |
|
||||
}, |
|
||||
metaWrap: { |
|
||||
float: 'left', |
|
||||
}, |
|
||||
avatar: { |
|
||||
position: 'relative', |
|
||||
top: '4px', |
|
||||
float: 'left', |
|
||||
marginRight: '20px', |
|
||||
img: { borderRadius: '100%' }, |
|
||||
}, |
|
||||
meta: { |
|
||||
height: '22px', |
|
||||
color: token.colorTextSecondary, |
|
||||
fontSize: token.fontSize, |
|
||||
lineHeight: '22px', |
|
||||
}, |
|
||||
action: { |
|
||||
position: 'absolute', |
|
||||
top: '4px', |
|
||||
right: '0', |
|
||||
lineHeight: '1', |
|
||||
cursor: 'pointer', |
|
||||
}, |
|
||||
total: { |
|
||||
height: '38px', |
|
||||
marginTop: '4px', |
|
||||
marginBottom: '0', |
|
||||
overflow: 'hidden', |
|
||||
color: token.colorTextHeading, |
|
||||
fontSize: '30px', |
|
||||
lineHeight: '38px', |
|
||||
whiteSpace: 'nowrap', |
|
||||
textOverflow: 'ellipsis', |
|
||||
wordBreak: 'break-all', |
|
||||
}, |
|
||||
content: { |
|
||||
position: 'relative', |
|
||||
width: '100%', |
|
||||
marginBottom: '12px', |
|
||||
}, |
|
||||
contentFixed: { |
|
||||
position: 'absolute', |
|
||||
bottom: '0', |
|
||||
left: '0', |
|
||||
width: '100%', |
|
||||
}, |
|
||||
footer: { |
|
||||
marginTop: '8px', |
|
||||
paddingTop: '9px', |
|
||||
borderTop: `1px solid ${token.colorSplit}`, |
|
||||
'& > *': { position: 'relative' }, |
|
||||
}, |
|
||||
footerMargin: { |
|
||||
marginTop: '20px', |
|
||||
}, |
|
||||
}; |
|
||||
}); |
|
||||
|
|
||||
export default useStyles; |
|
||||
@ -1,17 +0,0 @@ |
|||||
@import '~antd/es/style/themes/default.less'; |
|
||||
|
|
||||
.field { |
|
||||
margin: 0; |
|
||||
overflow: hidden; |
|
||||
white-space: nowrap; |
|
||||
text-overflow: ellipsis; |
|
||||
.label, |
|
||||
.number { |
|
||||
font-size: @font-size-base; |
|
||||
line-height: 22px; |
|
||||
} |
|
||||
.number { |
|
||||
margin-left: 8px; |
|
||||
color: @heading-color; |
|
||||
} |
|
||||
} |
|
||||
@ -1,22 +0,0 @@ |
|||||
import { createStyles } from 'antd-style'; |
|
||||
|
|
||||
const useStyles = createStyles(({ token }) => { |
|
||||
return { |
|
||||
field: { |
|
||||
margin: '0', |
|
||||
overflow: 'hidden', |
|
||||
whiteSpace: 'nowrap', |
|
||||
textOverflow: 'ellipsis', |
|
||||
}, |
|
||||
label: { |
|
||||
fontSize: token.fontSize, |
|
||||
lineHeight: '22px', |
|
||||
}, |
|
||||
number: { |
|
||||
marginLeft: '8px', |
|
||||
color: token.colorTextHeading, |
|
||||
}, |
|
||||
}; |
|
||||
}); |
|
||||
|
|
||||
export default useStyles; |
|
||||
@ -1,17 +0,0 @@ |
|||||
import React from 'react'; |
|
||||
import useStyles from './index.style'; |
|
||||
export type FieldProps = { |
|
||||
label: React.ReactNode; |
|
||||
value: React.ReactNode; |
|
||||
style?: React.CSSProperties; |
|
||||
}; |
|
||||
const Field: React.FC<FieldProps> = ({ label, value, ...rest }) => { |
|
||||
const { styles } = useStyles(); |
|
||||
return ( |
|
||||
<div className={styles.field} {...rest}> |
|
||||
<span className={styles.label}>{label}</span> |
|
||||
<span className={styles.number}>{value}</span> |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
export default Field; |
|
||||
@ -1,225 +0,0 @@ |
|||||
import React, { Component } from 'react'; |
|
||||
import autoHeight from '../../../../monitor/components/Charts/autoHeight'; |
|
||||
|
|
||||
/* eslint no-return-assign: 0 */ |
|
||||
/* eslint no-mixed-operators: 0 */ |
|
||||
// riddle: https://riddle.alibaba-inc.com/riddles/2d9a4b90
|
|
||||
|
|
||||
export type WaterWaveProps = { |
|
||||
title: React.ReactNode; |
|
||||
color?: string; |
|
||||
height?: number; |
|
||||
percent: number; |
|
||||
style?: React.CSSProperties; |
|
||||
}; |
|
||||
class WaterWave extends Component<WaterWaveProps> { |
|
||||
state = { |
|
||||
radio: 1, |
|
||||
}; |
|
||||
timer: number = 0; |
|
||||
root: HTMLDivElement | undefined | null = null; |
|
||||
node: HTMLCanvasElement | undefined | null = null; |
|
||||
componentDidMount() { |
|
||||
this.renderChart(); |
|
||||
this.resize(); |
|
||||
window.addEventListener( |
|
||||
'resize', |
|
||||
() => { |
|
||||
requestAnimationFrame(() => this.resize()); |
|
||||
}, |
|
||||
{ |
|
||||
passive: true, |
|
||||
}, |
|
||||
); |
|
||||
} |
|
||||
componentDidUpdate(props: WaterWaveProps) { |
|
||||
const { percent } = this.props; |
|
||||
if (props.percent !== percent) { |
|
||||
// 不加这个会造成绘制缓慢
|
|
||||
this.renderChart('update'); |
|
||||
} |
|
||||
} |
|
||||
componentWillUnmount() { |
|
||||
cancelAnimationFrame(this.timer); |
|
||||
if (this.node) { |
|
||||
this.node.innerHTML = ''; |
|
||||
} |
|
||||
window.removeEventListener('resize', this.resize); |
|
||||
} |
|
||||
resize = () => { |
|
||||
if (this.root) { |
|
||||
const { height = 1 } = this.props; |
|
||||
const { offsetWidth } = this.root.parentNode as HTMLElement; |
|
||||
this.setState({ |
|
||||
radio: offsetWidth < height ? offsetWidth / height : 1, |
|
||||
}); |
|
||||
} |
|
||||
}; |
|
||||
renderChart(type?: string) { |
|
||||
const { percent, color = '#1890FF' } = this.props; |
|
||||
const data = percent / 100; |
|
||||
cancelAnimationFrame(this.timer); |
|
||||
if (!this.node || (data !== 0 && !data)) { |
|
||||
return; |
|
||||
} |
|
||||
const canvas = this.node; |
|
||||
const ctx = canvas.getContext('2d'); |
|
||||
if (!ctx) { |
|
||||
return; |
|
||||
} |
|
||||
const canvasWidth = canvas.width; |
|
||||
const canvasHeight = canvas.height; |
|
||||
const radius = canvasWidth / 2; |
|
||||
const lineWidth = 2; |
|
||||
const cR = radius - lineWidth; |
|
||||
ctx.beginPath(); |
|
||||
ctx.lineWidth = lineWidth * 2; |
|
||||
const axisLength = canvasWidth - lineWidth; |
|
||||
const unit = axisLength / 8; |
|
||||
const range = 0.2; // 振幅
|
|
||||
let currRange = range; |
|
||||
const xOffset = lineWidth; |
|
||||
let sp = 0; // 周期偏移量
|
|
||||
let currData = 0; |
|
||||
const waveupsp = 0.005; // 水波上涨速度
|
|
||||
|
|
||||
let arcStack: number[][] = []; |
|
||||
const bR = radius - lineWidth; |
|
||||
const circleOffset = -(Math.PI / 2); |
|
||||
let circleLock = true; |
|
||||
for ( |
|
||||
let i = circleOffset; |
|
||||
i < circleOffset + 2 * Math.PI; |
|
||||
i += 1 / (8 * Math.PI) |
|
||||
) { |
|
||||
arcStack.push([radius + bR * Math.cos(i), radius + bR * Math.sin(i)]); |
|
||||
} |
|
||||
const cStartPoint = arcStack.shift() as number[]; |
|
||||
ctx.strokeStyle = color; |
|
||||
ctx.moveTo(cStartPoint[0], cStartPoint[1]); |
|
||||
const drawSin = () => { |
|
||||
if (!ctx) { |
|
||||
return; |
|
||||
} |
|
||||
ctx.beginPath(); |
|
||||
ctx.save(); |
|
||||
const sinStack = []; |
|
||||
for (let i = xOffset; i <= xOffset + axisLength; i += 20 / axisLength) { |
|
||||
const x = sp + (xOffset + i) / unit; |
|
||||
const y = Math.sin(x) * currRange; |
|
||||
const dx = i; |
|
||||
const dy = 2 * cR * (1 - currData) + (radius - cR) - unit * y; |
|
||||
ctx.lineTo(dx, dy); |
|
||||
sinStack.push([dx, dy]); |
|
||||
} |
|
||||
const startPoint = sinStack.shift() as number[]; |
|
||||
ctx.lineTo(xOffset + axisLength, canvasHeight); |
|
||||
ctx.lineTo(xOffset, canvasHeight); |
|
||||
ctx.lineTo(startPoint[0], startPoint[1]); |
|
||||
const gradient = ctx.createLinearGradient(0, 0, 0, canvasHeight); |
|
||||
gradient.addColorStop(0, '#ffffff'); |
|
||||
gradient.addColorStop(1, color); |
|
||||
ctx.fillStyle = gradient; |
|
||||
ctx.fill(); |
|
||||
ctx.restore(); |
|
||||
}; |
|
||||
const render = () => { |
|
||||
if (!ctx) { |
|
||||
return; |
|
||||
} |
|
||||
ctx.clearRect(0, 0, canvasWidth, canvasHeight); |
|
||||
if (circleLock && type !== 'update') { |
|
||||
if (arcStack.length) { |
|
||||
const temp = arcStack.shift() as number[]; |
|
||||
ctx.lineTo(temp[0], temp[1]); |
|
||||
ctx.stroke(); |
|
||||
} else { |
|
||||
circleLock = false; |
|
||||
ctx.lineTo(cStartPoint[0], cStartPoint[1]); |
|
||||
ctx.stroke(); |
|
||||
arcStack = []; |
|
||||
ctx.globalCompositeOperation = 'destination-over'; |
|
||||
ctx.beginPath(); |
|
||||
ctx.lineWidth = lineWidth; |
|
||||
ctx.arc(radius, radius, bR, 0, 2 * Math.PI, true); |
|
||||
ctx.beginPath(); |
|
||||
ctx.save(); |
|
||||
ctx.arc(radius, radius, radius - 3 * lineWidth, 0, 2 * Math.PI, true); |
|
||||
ctx.restore(); |
|
||||
ctx.clip(); |
|
||||
ctx.fillStyle = color; |
|
||||
} |
|
||||
} else { |
|
||||
if (data >= 0.85) { |
|
||||
if (currRange > range / 4) { |
|
||||
const t = range * 0.01; |
|
||||
currRange -= t; |
|
||||
} |
|
||||
} else if (data <= 0.1) { |
|
||||
if (currRange < range * 1.5) { |
|
||||
const t = range * 0.01; |
|
||||
currRange += t; |
|
||||
} |
|
||||
} else { |
|
||||
if (currRange <= range) { |
|
||||
const t = range * 0.01; |
|
||||
currRange += t; |
|
||||
} |
|
||||
if (currRange >= range) { |
|
||||
const t = range * 0.01; |
|
||||
currRange -= t; |
|
||||
} |
|
||||
} |
|
||||
if (data - currData > 0) { |
|
||||
currData += waveupsp; |
|
||||
} |
|
||||
if (data - currData < 0) { |
|
||||
currData -= waveupsp; |
|
||||
} |
|
||||
sp += 0.07; |
|
||||
drawSin(); |
|
||||
} |
|
||||
this.timer = requestAnimationFrame(render); |
|
||||
}; |
|
||||
render(); |
|
||||
} |
|
||||
render() { |
|
||||
const { radio } = this.state; |
|
||||
const { percent, title, height = 1 } = this.props; |
|
||||
return ( |
|
||||
<div |
|
||||
ref={(n) => { |
|
||||
this.root = n; |
|
||||
}} |
|
||||
style={{ |
|
||||
transform: `scale(${radio})`, |
|
||||
}} |
|
||||
> |
|
||||
<div |
|
||||
style={{ |
|
||||
width: height, |
|
||||
height, |
|
||||
overflow: 'hidden', |
|
||||
}} |
|
||||
> |
|
||||
<canvas |
|
||||
ref={(n) => { |
|
||||
this.node = n; |
|
||||
}} |
|
||||
width={height * 2} |
|
||||
height={height * 2} |
|
||||
/> |
|
||||
</div> |
|
||||
<div |
|
||||
style={{ |
|
||||
width: height, |
|
||||
}} |
|
||||
> |
|
||||
{title && <span>{title}</span>} |
|
||||
<h4>{percent}%</h4> |
|
||||
</div> |
|
||||
</div> |
|
||||
); |
|
||||
} |
|
||||
} |
|
||||
export default autoHeight()(WaterWave); |
|
||||
@ -1,19 +0,0 @@ |
|||||
.miniChart { |
|
||||
position: relative; |
|
||||
width: 100%; |
|
||||
.chartContent { |
|
||||
position: absolute; |
|
||||
bottom: -28px; |
|
||||
width: 100%; |
|
||||
> div { |
|
||||
margin: 0 -5px; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
} |
|
||||
.chartLoading { |
|
||||
position: absolute; |
|
||||
top: 16px; |
|
||||
left: 50%; |
|
||||
margin-left: -7px; |
|
||||
} |
|
||||
} |
|
||||
@ -1,23 +0,0 @@ |
|||||
import { createStyles } from 'antd-style'; |
|
||||
|
|
||||
const useStyles = createStyles(() => { |
|
||||
return { |
|
||||
miniChart: { |
|
||||
position: 'relative', |
|
||||
width: '100%', |
|
||||
}, |
|
||||
chartContent: { |
|
||||
position: 'absolute', |
|
||||
bottom: '-28px', |
|
||||
width: '100%', |
|
||||
'> div': { margin: '0 -5px', overflow: 'hidden' }, |
|
||||
}, |
|
||||
chartLoading: { |
|
||||
position: 'absolute', |
|
||||
top: '16px', |
|
||||
left: '50%', |
|
||||
marginLeft: '-7px', |
|
||||
}, |
|
||||
}; |
|
||||
}); |
|
||||
export default useStyles; |
|
||||
@ -1,13 +0,0 @@ |
|||||
import numeral from 'numeral'; |
|
||||
import ChartCard from './ChartCard'; |
|
||||
import Field from './Field'; |
|
||||
|
|
||||
const yuan = (val: number | string) => `¥ ${numeral(val).format('0,0')}`; |
|
||||
|
|
||||
const Charts = { |
|
||||
yuan, |
|
||||
ChartCard, |
|
||||
Field, |
|
||||
}; |
|
||||
|
|
||||
export { Charts as default, yuan, ChartCard, Field }; |
|
||||
@ -1,68 +0,0 @@ |
|||||
@import '~antd/es/style/themes/default.less'; |
|
||||
|
|
||||
.numberInfo { |
|
||||
.suffix { |
|
||||
margin-left: 4px; |
|
||||
color: @text-color; |
|
||||
font-size: 16px; |
|
||||
font-style: normal; |
|
||||
} |
|
||||
.numberInfoTitle { |
|
||||
margin-bottom: 16px; |
|
||||
color: @text-color; |
|
||||
font-size: @font-size-lg; |
|
||||
transition: all 0.3s; |
|
||||
} |
|
||||
.numberInfoSubTitle { |
|
||||
height: 22px; |
|
||||
overflow: hidden; |
|
||||
color: @text-color-secondary; |
|
||||
font-size: @font-size-base; |
|
||||
line-height: 22px; |
|
||||
white-space: nowrap; |
|
||||
text-overflow: ellipsis; |
|
||||
word-break: break-all; |
|
||||
} |
|
||||
.numberInfoValue { |
|
||||
margin-top: 4px; |
|
||||
overflow: hidden; |
|
||||
font-size: 0; |
|
||||
white-space: nowrap; |
|
||||
text-overflow: ellipsis; |
|
||||
word-break: break-all; |
|
||||
& > span { |
|
||||
display: inline-block; |
|
||||
height: 32px; |
|
||||
margin-right: 32px; |
|
||||
color: @heading-color; |
|
||||
font-size: 24px; |
|
||||
line-height: 32px; |
|
||||
} |
|
||||
.subTotal { |
|
||||
margin-right: 0; |
|
||||
color: @text-color-secondary; |
|
||||
font-size: @font-size-lg; |
|
||||
vertical-align: top; |
|
||||
.anticon { |
|
||||
margin-left: 4px; |
|
||||
font-size: 12px; |
|
||||
transform: scale(0.82); |
|
||||
} |
|
||||
:global { |
|
||||
.anticon-caret-up { |
|
||||
color: @red-6; |
|
||||
} |
|
||||
.anticon-caret-down { |
|
||||
color: @green-6; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.numberInfolight { |
|
||||
.numberInfoValue { |
|
||||
& > span { |
|
||||
color: @text-color; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
@ -1,56 +0,0 @@ |
|||||
import { createStyles } from 'antd-style'; |
|
||||
|
|
||||
const useStyles = createStyles(({ token }) => { |
|
||||
return { |
|
||||
suffix: { |
|
||||
marginLeft: '4px', |
|
||||
color: token.colorText, |
|
||||
fontSize: '16px', |
|
||||
fontStyle: 'normal', |
|
||||
}, |
|
||||
numberInfoTitle: { |
|
||||
marginBottom: '16px', |
|
||||
color: token.colorText, |
|
||||
fontSize: token.fontSizeLG, |
|
||||
transition: 'all 0.3s', |
|
||||
}, |
|
||||
numberInfoSubTitle: { |
|
||||
height: '22px', |
|
||||
overflow: 'hidden', |
|
||||
color: token.colorTextSecondary, |
|
||||
fontSize: token.fontSize, |
|
||||
lineHeight: '22px', |
|
||||
whiteSpace: 'nowrap', |
|
||||
textOverflow: 'ellipsis', |
|
||||
wordBreak: 'break-all', |
|
||||
}, |
|
||||
numberInfoValue: { |
|
||||
marginTop: '4px', |
|
||||
overflow: 'hidden', |
|
||||
fontSize: '0', |
|
||||
whiteSpace: 'nowrap', |
|
||||
textOverflow: 'ellipsis', |
|
||||
wordBreak: 'break-all', |
|
||||
'& > span': { color: token.colorText }, |
|
||||
}, |
|
||||
subTotal: { |
|
||||
marginRight: '0', |
|
||||
color: token.colorTextSecondary, |
|
||||
fontSize: token.fontSizeLG, |
|
||||
verticalAlign: 'top', |
|
||||
}, |
|
||||
anticon: { |
|
||||
marginLeft: '4px', |
|
||||
fontSize: '12px', |
|
||||
transform: 'scale(0.82)', |
|
||||
}, |
|
||||
'anticon-caret-up': { |
|
||||
color: token['red-6'], |
|
||||
}, |
|
||||
'anticon-caret-down': { |
|
||||
color: token['green-6'], |
|
||||
}, |
|
||||
}; |
|
||||
}); |
|
||||
|
|
||||
export default useStyles; |
|
||||
@ -1,79 +0,0 @@ |
|||||
import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons'; |
|
||||
import classNames from 'classnames'; |
|
||||
import React from 'react'; |
|
||||
import useStyles from './index.style'; |
|
||||
export type NumberInfoProps = { |
|
||||
title?: React.ReactNode | string; |
|
||||
subTitle?: React.ReactNode | string; |
|
||||
total?: React.ReactNode | string; |
|
||||
status?: 'up' | 'down'; |
|
||||
theme?: string; |
|
||||
gap?: number; |
|
||||
subTotal?: number; |
|
||||
suffix?: string; |
|
||||
style?: React.CSSProperties; |
|
||||
}; |
|
||||
const NumberInfo: React.FC<NumberInfoProps> = ({ |
|
||||
theme, |
|
||||
title, |
|
||||
subTitle, |
|
||||
total, |
|
||||
subTotal, |
|
||||
status, |
|
||||
suffix, |
|
||||
gap, |
|
||||
...rest |
|
||||
}) => { |
|
||||
const { styles } = useStyles(); |
|
||||
return ( |
|
||||
<div |
|
||||
className={classNames({ |
|
||||
[styles[`numberInfo${theme}` as keyof typeof styles]]: !!theme, |
|
||||
})} |
|
||||
{...rest} |
|
||||
> |
|
||||
{title && ( |
|
||||
<div |
|
||||
className={styles.numberInfoTitle} |
|
||||
title={typeof title === 'string' ? title : ''} |
|
||||
> |
|
||||
{title} |
|
||||
</div> |
|
||||
)} |
|
||||
{subTitle && ( |
|
||||
<div |
|
||||
className={styles.numberInfoSubTitle} |
|
||||
title={typeof subTitle === 'string' ? subTitle : ''} |
|
||||
> |
|
||||
{subTitle} |
|
||||
</div> |
|
||||
)} |
|
||||
<div |
|
||||
className={styles.numberInfoValue} |
|
||||
style={ |
|
||||
gap |
|
||||
? { |
|
||||
marginTop: gap, |
|
||||
} |
|
||||
: {} |
|
||||
} |
|
||||
> |
|
||||
<span> |
|
||||
{total} |
|
||||
{suffix && <em className={styles.suffix}>{suffix}</em>} |
|
||||
</span> |
|
||||
{(status || subTotal) && ( |
|
||||
<span className={styles.subTotal}> |
|
||||
{subTotal} |
|
||||
{status && status === 'up' ? ( |
|
||||
<CaretUpOutlined /> |
|
||||
) : ( |
|
||||
<CaretDownOutlined /> |
|
||||
)} |
|
||||
</span> |
|
||||
)} |
|
||||
</div> |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
export default NumberInfo; |
|
||||
@ -1,9 +0,0 @@ |
|||||
import { Spin } from 'antd'; |
|
||||
|
|
||||
// loading components from code split
|
|
||||
// https://umijs.org/plugin/umi-plugin-react.html#dynamicimport
|
|
||||
export default () => ( |
|
||||
<div style={{ paddingTop: 100, textAlign: 'center' }}> |
|
||||
<Spin size="large" /> |
|
||||
</div> |
|
||||
); |
|
||||
@ -1,67 +0,0 @@ |
|||||
import { Pie } from '@ant-design/plots'; |
|
||||
import { Card, Segmented, Typography } from 'antd'; |
|
||||
import numeral from 'numeral'; |
|
||||
import React from 'react'; |
|
||||
import type { DataItem } from '../data.d'; |
|
||||
import useStyles from '../style.style'; |
|
||||
|
|
||||
const { Text } = Typography; |
|
||||
const ProportionSales = ({ |
|
||||
dropdownGroup, |
|
||||
salesType, |
|
||||
loading, |
|
||||
salesPieData, |
|
||||
handleChangeSalesType, |
|
||||
}: { |
|
||||
loading: boolean; |
|
||||
dropdownGroup: React.ReactNode; |
|
||||
salesType: 'all' | 'online' | 'stores'; |
|
||||
salesPieData: DataItem[]; |
|
||||
handleChangeSalesType?: (value: 'all' | 'online' | 'stores') => void; |
|
||||
}) => { |
|
||||
const { styles } = useStyles(); |
|
||||
return ( |
|
||||
<Card |
|
||||
loading={loading} |
|
||||
className={styles.salesCard} |
|
||||
variant="borderless" |
|
||||
title="销售额类别占比" |
|
||||
style={{ |
|
||||
height: '100%', |
|
||||
}} |
|
||||
extra={ |
|
||||
<div className={styles.salesCardExtra}> |
|
||||
{dropdownGroup} |
|
||||
<Segmented |
|
||||
className={styles.salesTypeRadio} |
|
||||
value={salesType} |
|
||||
onChange={handleChangeSalesType} |
|
||||
options={[ |
|
||||
{ label: '全部渠道', value: 'all' }, |
|
||||
{ label: '线上', value: 'online' }, |
|
||||
{ label: '门店', value: 'stores' }, |
|
||||
]} |
|
||||
size="middle" |
|
||||
/> |
|
||||
</div> |
|
||||
} |
|
||||
> |
|
||||
<Text>销售额</Text> |
|
||||
<Pie |
|
||||
height={340} |
|
||||
radius={0.8} |
|
||||
innerRadius={0.5} |
|
||||
angleField="y" |
|
||||
colorField="x" |
|
||||
data={salesPieData as any} |
|
||||
legend={false} |
|
||||
label={{ |
|
||||
position: 'spider', |
|
||||
text: (item: { x: number; y: number }) => |
|
||||
`${item.x}: ${numeral(item.y).format('0,0')}`, |
|
||||
}} |
|
||||
/> |
|
||||
</Card> |
|
||||
); |
|
||||
}; |
|
||||
export default ProportionSales; |
|
||||
@ -1,225 +0,0 @@ |
|||||
import { Column } from '@ant-design/plots'; |
|
||||
import { Button, Card, Col, DatePicker, Row, Tabs } from 'antd'; |
|
||||
import type { RangePickerProps } from 'antd/es/date-picker'; |
|
||||
import numeral from 'numeral'; |
|
||||
import type { DataItem } from '../data.d'; |
|
||||
import useStyles from '../style.style'; |
|
||||
|
|
||||
export type TimeType = 'today' | 'week' | 'month' | 'year'; |
|
||||
const { RangePicker } = DatePicker; |
|
||||
|
|
||||
const rankingListData: { |
|
||||
title: string; |
|
||||
total: number; |
|
||||
}[] = []; |
|
||||
|
|
||||
for (let i = 0; i < 7; i += 1) { |
|
||||
rankingListData.push({ |
|
||||
title: `工专路 ${i} 号店`, |
|
||||
total: 323234, |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
const SalesCard = ({ |
|
||||
rangePickerValue, |
|
||||
salesData, |
|
||||
isActive, |
|
||||
handleRangePickerChange, |
|
||||
loading, |
|
||||
selectDate, |
|
||||
}: { |
|
||||
rangePickerValue: RangePickerProps['value']; |
|
||||
isActive: (key: TimeType) => string; |
|
||||
salesData: DataItem[]; |
|
||||
loading: boolean; |
|
||||
handleRangePickerChange: RangePickerProps['onChange']; |
|
||||
selectDate: (key: TimeType) => void; |
|
||||
}) => { |
|
||||
const { styles } = useStyles(); |
|
||||
return ( |
|
||||
<Card |
|
||||
loading={loading} |
|
||||
variant="borderless" |
|
||||
styles={{ |
|
||||
body: { |
|
||||
padding: loading ? 24 : 0, |
|
||||
}, |
|
||||
}} |
|
||||
> |
|
||||
<Tabs |
|
||||
className={styles.salesCard} |
|
||||
tabBarExtraContent={ |
|
||||
<div className={styles.salesExtraWrap}> |
|
||||
<div className={styles.salesExtra}> |
|
||||
<Button |
|
||||
type="text" |
|
||||
className={isActive('today')} |
|
||||
onClick={() => selectDate('today')} |
|
||||
> |
|
||||
今日 |
|
||||
</Button> |
|
||||
<Button |
|
||||
type="text" |
|
||||
className={isActive('week')} |
|
||||
onClick={() => selectDate('week')} |
|
||||
> |
|
||||
本周 |
|
||||
</Button> |
|
||||
<Button |
|
||||
type="text" |
|
||||
className={isActive('month')} |
|
||||
onClick={() => selectDate('month')} |
|
||||
> |
|
||||
本月 |
|
||||
</Button> |
|
||||
<Button |
|
||||
type="text" |
|
||||
className={isActive('year')} |
|
||||
onClick={() => selectDate('year')} |
|
||||
> |
|
||||
本年 |
|
||||
</Button> |
|
||||
</div> |
|
||||
<RangePicker |
|
||||
value={rangePickerValue} |
|
||||
onChange={handleRangePickerChange} |
|
||||
variant="filled" |
|
||||
style={{ |
|
||||
width: 256, |
|
||||
}} |
|
||||
/> |
|
||||
</div> |
|
||||
} |
|
||||
size="large" |
|
||||
tabBarStyle={{ |
|
||||
marginBottom: 24, |
|
||||
}} |
|
||||
items={[ |
|
||||
{ |
|
||||
key: 'sales', |
|
||||
label: '销售额', |
|
||||
children: ( |
|
||||
<Row> |
|
||||
<Col xl={16} lg={12} md={12} sm={24} xs={24}> |
|
||||
<div className={styles.salesBar}> |
|
||||
<Column |
|
||||
height={300} |
|
||||
data={salesData} |
|
||||
xField="x" |
|
||||
yField="y" |
|
||||
paddingBottom={12} |
|
||||
axis={{ |
|
||||
x: { |
|
||||
title: false, |
|
||||
}, |
|
||||
y: { |
|
||||
title: false, |
|
||||
gridLineDash: null, |
|
||||
gridStroke: '#ccc', |
|
||||
}, |
|
||||
}} |
|
||||
scale={{ |
|
||||
x: { paddingInner: 0.4 }, |
|
||||
}} |
|
||||
tooltip={{ |
|
||||
name: '销售量', |
|
||||
channel: 'y', |
|
||||
}} |
|
||||
/> |
|
||||
</div> |
|
||||
</Col> |
|
||||
<Col xl={8} lg={12} md={12} sm={24} xs={24}> |
|
||||
<div className={styles.salesRank}> |
|
||||
<h4 className={styles.rankingTitle}>门店销售额排名</h4> |
|
||||
<ul className={styles.rankingList}> |
|
||||
{rankingListData.map((item, i) => ( |
|
||||
<li key={item.title}> |
|
||||
<span |
|
||||
className={`${styles.rankingItemNumber} ${ |
|
||||
i < 3 ? styles.rankingItemNumberActive : '' |
|
||||
}`}
|
|
||||
> |
|
||||
{i + 1} |
|
||||
</span> |
|
||||
<span |
|
||||
className={styles.rankingItemTitle} |
|
||||
title={item.title} |
|
||||
> |
|
||||
{item.title} |
|
||||
</span> |
|
||||
<span>{numeral(item.total).format('0,0')}</span> |
|
||||
</li> |
|
||||
))} |
|
||||
</ul> |
|
||||
</div> |
|
||||
</Col> |
|
||||
</Row> |
|
||||
), |
|
||||
}, |
|
||||
{ |
|
||||
key: 'views', |
|
||||
label: '访问量', |
|
||||
children: ( |
|
||||
<Row> |
|
||||
<Col xl={16} lg={12} md={12} sm={24} xs={24}> |
|
||||
<div className={styles.salesBar}> |
|
||||
<Column |
|
||||
height={300} |
|
||||
data={salesData} |
|
||||
xField="x" |
|
||||
yField="y" |
|
||||
paddingBottom={12} |
|
||||
axis={{ |
|
||||
x: { |
|
||||
title: false, |
|
||||
}, |
|
||||
y: { |
|
||||
title: false, |
|
||||
}, |
|
||||
}} |
|
||||
scale={{ |
|
||||
x: { paddingInner: 0.4 }, |
|
||||
}} |
|
||||
tooltip={{ |
|
||||
name: '访问量', |
|
||||
channel: 'y', |
|
||||
}} |
|
||||
/> |
|
||||
</div> |
|
||||
</Col> |
|
||||
<Col xl={8} lg={12} md={12} sm={24} xs={24}> |
|
||||
<div className={styles.salesRank}> |
|
||||
<h4 className={styles.rankingTitle}>门店访问量排名</h4> |
|
||||
<ul className={styles.rankingList}> |
|
||||
{rankingListData.map((item, i) => ( |
|
||||
<li key={item.title}> |
|
||||
<span |
|
||||
className={`${ |
|
||||
i < 3 |
|
||||
? styles.rankingItemNumberActive |
|
||||
: styles.rankingItemNumber |
|
||||
}`}
|
|
||||
> |
|
||||
{i + 1} |
|
||||
</span> |
|
||||
<span |
|
||||
className={styles.rankingItemTitle} |
|
||||
title={item.title} |
|
||||
> |
|
||||
{item.title} |
|
||||
</span> |
|
||||
<span>{numeral(item.total).format('0,0')}</span> |
|
||||
</li> |
|
||||
))} |
|
||||
</ul> |
|
||||
</div> |
|
||||
</Col> |
|
||||
</Row> |
|
||||
), |
|
||||
}, |
|
||||
]} |
|
||||
/> |
|
||||
</Card> |
|
||||
); |
|
||||
}; |
|
||||
export default SalesCard; |
|
||||
@ -1,37 +0,0 @@ |
|||||
@import '~antd/es/style/themes/default.less'; |
|
||||
|
|
||||
.trendItem { |
|
||||
display: inline-block; |
|
||||
font-size: @font-size-base; |
|
||||
line-height: 22px; |
|
||||
|
|
||||
.up, |
|
||||
.down { |
|
||||
position: relative; |
|
||||
top: 1px; |
|
||||
margin-left: 4px; |
|
||||
span { |
|
||||
font-size: 12px; |
|
||||
transform: scale(0.83); |
|
||||
} |
|
||||
} |
|
||||
.up { |
|
||||
color: @red-6; |
|
||||
} |
|
||||
.down { |
|
||||
top: -1px; |
|
||||
color: @green-6; |
|
||||
} |
|
||||
|
|
||||
&.trendItemGrey .up, |
|
||||
&.trendItemGrey .down { |
|
||||
color: @text-color; |
|
||||
} |
|
||||
|
|
||||
&.reverseColor .up { |
|
||||
color: @green-6; |
|
||||
} |
|
||||
&.reverseColor .down { |
|
||||
color: @red-6; |
|
||||
} |
|
||||
} |
|
||||
@ -1,32 +0,0 @@ |
|||||
import { createStyles } from 'antd-style'; |
|
||||
|
|
||||
const useStyles = createStyles(({ token }) => { |
|
||||
return { |
|
||||
trendItem: { |
|
||||
display: 'inline-block', |
|
||||
fontSize: token.fontSize, |
|
||||
lineHeight: '22px', |
|
||||
}, |
|
||||
up: { |
|
||||
color: token['red-6'], |
|
||||
}, |
|
||||
down: { |
|
||||
top: '-1px', |
|
||||
color: token['green-6'], |
|
||||
}, |
|
||||
trendItemGrey: { |
|
||||
up: { |
|
||||
color: token.colorText, |
|
||||
}, |
|
||||
down: { |
|
||||
color: token.colorText, |
|
||||
}, |
|
||||
}, |
|
||||
reverseColor: { |
|
||||
up: { color: token['green-6'] }, |
|
||||
down: { color: token['red-6'] }, |
|
||||
}, |
|
||||
}; |
|
||||
}); |
|
||||
|
|
||||
export default useStyles; |
|
||||
@ -1,47 +0,0 @@ |
|||||
import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons'; |
|
||||
import classNames from 'classnames'; |
|
||||
import React from 'react'; |
|
||||
import useStyles from './index.style'; |
|
||||
|
|
||||
export type TrendProps = { |
|
||||
colorful?: boolean; |
|
||||
flag: 'up' | 'down'; |
|
||||
style?: React.CSSProperties; |
|
||||
reverseColor?: boolean; |
|
||||
className?: string; |
|
||||
children?: React.ReactNode; |
|
||||
}; |
|
||||
|
|
||||
const Trend: React.FC<TrendProps> = ({ |
|
||||
colorful = true, |
|
||||
reverseColor = false, |
|
||||
flag, |
|
||||
children, |
|
||||
className, |
|
||||
...rest |
|
||||
}) => { |
|
||||
const { styles } = useStyles(); |
|
||||
const classString = classNames( |
|
||||
styles.trendItem, |
|
||||
{ |
|
||||
[styles.trendItemGrey]: !colorful, |
|
||||
[styles.reverseColor]: reverseColor && colorful, |
|
||||
}, |
|
||||
className, |
|
||||
); |
|
||||
return ( |
|
||||
<div |
|
||||
{...rest} |
|
||||
className={classString} |
|
||||
title={typeof children === 'string' ? children : ''} |
|
||||
> |
|
||||
<span>{children}</span> |
|
||||
{flag && ( |
|
||||
<span className={styles[flag]}> |
|
||||
{flag === 'up' ? <CaretUpOutlined /> : <CaretDownOutlined />} |
|
||||
</span> |
|
||||
)} |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
export default Trend; |
|
||||
@ -1,45 +0,0 @@ |
|||||
export interface DataItem { |
|
||||
[field: string]: string | number | number[] | null | undefined; |
|
||||
} |
|
||||
export interface VisitDataType { |
|
||||
x: string; |
|
||||
y: number; |
|
||||
} |
|
||||
|
|
||||
export type SearchDataType = { |
|
||||
index: number; |
|
||||
keyword: string; |
|
||||
count: number; |
|
||||
range: number; |
|
||||
status: number; |
|
||||
}; |
|
||||
|
|
||||
export type OfflineDataType = { |
|
||||
name: string; |
|
||||
cvr: number; |
|
||||
}; |
|
||||
|
|
||||
export interface OfflineChartData { |
|
||||
date: number; |
|
||||
type: number; |
|
||||
value: number; |
|
||||
} |
|
||||
|
|
||||
export type RadarData = { |
|
||||
name: string; |
|
||||
label: string; |
|
||||
value: number; |
|
||||
}; |
|
||||
|
|
||||
export interface AnalysisData { |
|
||||
visitData: DataItem[]; |
|
||||
visitData2: DataItem[]; |
|
||||
salesData: DataItem[]; |
|
||||
searchData: DataItem[]; |
|
||||
offlineData: OfflineDataType[]; |
|
||||
offlineChartData: DataItem[]; |
|
||||
salesTypeData: DataItem[]; |
|
||||
salesTypeDataOnline: DataItem[]; |
|
||||
salesTypeDataOffline: DataItem[]; |
|
||||
radarData: RadarData[]; |
|
||||
} |
|
||||
@ -1,157 +0,0 @@ |
|||||
import { EllipsisOutlined } from '@ant-design/icons'; |
|
||||
import { GridContent } from '@ant-design/pro-components'; |
|
||||
import { useRequest } from '@umijs/max'; |
|
||||
import { Col, Dropdown, Row } from 'antd'; |
|
||||
import type { RangePickerProps } from 'antd/es/date-picker'; |
|
||||
import type { Dayjs } from 'dayjs'; |
|
||||
import type { FC } from 'react'; |
|
||||
import { Suspense, useState } from 'react'; |
|
||||
import IntroduceRow from './components/IntroduceRow'; |
|
||||
import OfflineData from './components/OfflineData'; |
|
||||
import PageLoading from './components/PageLoading'; |
|
||||
import ProportionSales from './components/ProportionSales'; |
|
||||
import type { TimeType } from './components/SalesCard'; |
|
||||
import SalesCard from './components/SalesCard'; |
|
||||
import TopSearch from './components/TopSearch'; |
|
||||
import type { AnalysisData } from './data.d'; |
|
||||
import { fakeChartData } from './service'; |
|
||||
import useStyles from './style.style'; |
|
||||
import { getTimeDistance } from './utils/utils'; |
|
||||
|
|
||||
type RangePickerValue = RangePickerProps['value']; |
|
||||
type AnalysisProps = { |
|
||||
dashboardAndanalysis: AnalysisData; |
|
||||
loading: boolean; |
|
||||
}; |
|
||||
type SalesType = 'all' | 'online' | 'stores'; |
|
||||
const Analysis: FC<AnalysisProps> = () => { |
|
||||
const { styles } = useStyles(); |
|
||||
const [salesType, setSalesType] = useState<SalesType>('all'); |
|
||||
const [currentTabKey, setCurrentTabKey] = useState<string>(''); |
|
||||
const [rangePickerValue, setRangePickerValue] = useState<RangePickerValue>( |
|
||||
getTimeDistance('year'), |
|
||||
); |
|
||||
const { loading, data } = useRequest(fakeChartData); |
|
||||
const selectDate = (type: TimeType) => { |
|
||||
setRangePickerValue(getTimeDistance(type)); |
|
||||
}; |
|
||||
const handleRangePickerChange = (value: RangePickerValue) => { |
|
||||
setRangePickerValue(value); |
|
||||
}; |
|
||||
const isActive = (type: TimeType) => { |
|
||||
if (!rangePickerValue) { |
|
||||
return ''; |
|
||||
} |
|
||||
const value = getTimeDistance(type); |
|
||||
if (!value) { |
|
||||
return ''; |
|
||||
} |
|
||||
if (!rangePickerValue[0] || !rangePickerValue[1]) { |
|
||||
return ''; |
|
||||
} |
|
||||
if ( |
|
||||
rangePickerValue[0].isSame(value[0] as Dayjs, 'day') && |
|
||||
rangePickerValue[1].isSame(value[1] as Dayjs, 'day') |
|
||||
) { |
|
||||
return styles.currentDate; |
|
||||
} |
|
||||
return ''; |
|
||||
}; |
|
||||
|
|
||||
let salesPieData: any; |
|
||||
if (salesType === 'all') { |
|
||||
salesPieData = data?.salesTypeData; |
|
||||
} else { |
|
||||
salesPieData = |
|
||||
salesType === 'online' |
|
||||
? data?.salesTypeDataOnline |
|
||||
: data?.salesTypeDataOffline; |
|
||||
} |
|
||||
|
|
||||
const dropdownGroup = ( |
|
||||
<span className={styles.iconGroup}> |
|
||||
<Dropdown |
|
||||
menu={{ |
|
||||
items: [ |
|
||||
{ |
|
||||
key: '1', |
|
||||
label: '操作一', |
|
||||
}, |
|
||||
{ |
|
||||
key: '2', |
|
||||
label: '操作二', |
|
||||
}, |
|
||||
], |
|
||||
}} |
|
||||
placement="bottomRight" |
|
||||
> |
|
||||
<EllipsisOutlined /> |
|
||||
</Dropdown> |
|
||||
</span> |
|
||||
); |
|
||||
const handleChangeSalesType = (value: SalesType) => { |
|
||||
setSalesType(value); |
|
||||
}; |
|
||||
const handleTabChange = (key: string) => { |
|
||||
setCurrentTabKey(key); |
|
||||
}; |
|
||||
const activeKey = currentTabKey || data?.offlineData[0]?.name || ''; |
|
||||
return ( |
|
||||
<GridContent> |
|
||||
<Suspense fallback={<PageLoading />}> |
|
||||
<IntroduceRow loading={loading} visitData={data?.visitData || []} /> |
|
||||
</Suspense> |
|
||||
|
|
||||
<Suspense fallback={null}> |
|
||||
<SalesCard |
|
||||
rangePickerValue={rangePickerValue} |
|
||||
salesData={data?.salesData || []} |
|
||||
isActive={isActive} |
|
||||
handleRangePickerChange={handleRangePickerChange} |
|
||||
loading={loading} |
|
||||
selectDate={selectDate} |
|
||||
/> |
|
||||
</Suspense> |
|
||||
|
|
||||
<Row |
|
||||
gutter={24} |
|
||||
style={{ |
|
||||
marginTop: 24, |
|
||||
}} |
|
||||
> |
|
||||
<Col xl={12} lg={24} md={24} sm={24} xs={24}> |
|
||||
<Suspense fallback={null}> |
|
||||
<TopSearch |
|
||||
loading={loading} |
|
||||
visitData2={data?.visitData2 || []} |
|
||||
searchData={data?.searchData || []} |
|
||||
dropdownGroup={dropdownGroup} |
|
||||
/> |
|
||||
</Suspense> |
|
||||
</Col> |
|
||||
<Col xl={12} lg={24} md={24} sm={24} xs={24}> |
|
||||
<Suspense fallback={null}> |
|
||||
<ProportionSales |
|
||||
dropdownGroup={dropdownGroup} |
|
||||
salesType={salesType} |
|
||||
loading={loading} |
|
||||
salesPieData={salesPieData || []} |
|
||||
handleChangeSalesType={handleChangeSalesType} |
|
||||
/> |
|
||||
</Suspense> |
|
||||
</Col> |
|
||||
</Row> |
|
||||
|
|
||||
<Suspense fallback={null}> |
|
||||
<OfflineData |
|
||||
activeKey={activeKey} |
|
||||
loading={loading} |
|
||||
offlineData={data?.offlineData || []} |
|
||||
offlineChartData={data?.offlineChartData || []} |
|
||||
handleTabChange={handleTabChange} |
|
||||
/> |
|
||||
</Suspense> |
|
||||
</GridContent> |
|
||||
); |
|
||||
}; |
|
||||
export default Analysis; |
|
||||
@ -1,6 +0,0 @@ |
|||||
import { request } from '@umijs/max'; |
|
||||
import type { AnalysisData } from './data'; |
|
||||
|
|
||||
export async function fakeChartData(): Promise<{ data: AnalysisData }> { |
|
||||
return request('/api/fake_analysis_chart_data'); |
|
||||
} |
|
||||
@ -1,189 +0,0 @@ |
|||||
@import '~antd/es/style/themes/default.less'; |
|
||||
|
|
||||
.iconGroup { |
|
||||
span.anticon { |
|
||||
margin-left: 16px; |
|
||||
color: @text-color-secondary; |
|
||||
cursor: pointer; |
|
||||
transition: color 0.32s; |
|
||||
&:hover { |
|
||||
color: @text-color; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.rankingList { |
|
||||
margin: 25px 0 0; |
|
||||
padding: 0; |
|
||||
list-style: none; |
|
||||
li { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
margin-top: 16px; |
|
||||
zoom: 1; |
|
||||
&::before, |
|
||||
&::after { |
|
||||
display: table; |
|
||||
content: ' '; |
|
||||
} |
|
||||
&::after { |
|
||||
clear: both; |
|
||||
height: 0; |
|
||||
font-size: 0; |
|
||||
visibility: hidden; |
|
||||
} |
|
||||
span { |
|
||||
color: @text-color; |
|
||||
font-size: 14px; |
|
||||
line-height: 22px; |
|
||||
} |
|
||||
.rankingItemNumber { |
|
||||
display: inline-block; |
|
||||
width: 20px; |
|
||||
height: 20px; |
|
||||
margin-top: 1.5px; |
|
||||
margin-right: 16px; |
|
||||
font-weight: 600; |
|
||||
font-size: 12px; |
|
||||
line-height: 20px; |
|
||||
text-align: center; |
|
||||
background-color: @tag-default-bg; |
|
||||
border-radius: 20px; |
|
||||
&.active { |
|
||||
color: #fff; |
|
||||
background-color: #314659; |
|
||||
} |
|
||||
} |
|
||||
.rankingItemTitle { |
|
||||
flex: 1; |
|
||||
margin-right: 8px; |
|
||||
overflow: hidden; |
|
||||
white-space: nowrap; |
|
||||
text-overflow: ellipsis; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.salesExtra { |
|
||||
display: inline-block; |
|
||||
margin-right: 24px; |
|
||||
a { |
|
||||
margin-left: 24px; |
|
||||
color: @text-color; |
|
||||
&:hover { |
|
||||
color: @primary-color; |
|
||||
} |
|
||||
&.currentDate { |
|
||||
color: @primary-color; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.salesCard { |
|
||||
.salesBar { |
|
||||
padding: 0 0 32px 32px; |
|
||||
} |
|
||||
.salesRank { |
|
||||
padding: 0 32px 32px 72px; |
|
||||
} |
|
||||
:global { |
|
||||
.ant-tabs-bar, |
|
||||
.ant-tabs-nav-wrap { |
|
||||
padding-left: 16px; |
|
||||
.ant-tabs-nav .ant-tabs-tab { |
|
||||
padding-top: 16px; |
|
||||
padding-bottom: 14px; |
|
||||
line-height: 24px; |
|
||||
} |
|
||||
} |
|
||||
.ant-tabs-extra-content { |
|
||||
padding-right: 24px; |
|
||||
line-height: 55px; |
|
||||
} |
|
||||
.ant-card-head { |
|
||||
position: relative; |
|
||||
} |
|
||||
.ant-card-head-title { |
|
||||
align-items: normal; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.salesCardExtra { |
|
||||
height: inherit; |
|
||||
} |
|
||||
|
|
||||
.salesTypeRadio { |
|
||||
position: absolute; |
|
||||
right: 54px; |
|
||||
bottom: 12px; |
|
||||
} |
|
||||
|
|
||||
.offlineCard { |
|
||||
:global { |
|
||||
.ant-tabs-ink-bar { |
|
||||
bottom: auto; |
|
||||
} |
|
||||
.ant-tabs-bar { |
|
||||
border-bottom: none; |
|
||||
} |
|
||||
.ant-tabs-nav-container-scrolling { |
|
||||
padding-right: 40px; |
|
||||
padding-left: 40px; |
|
||||
} |
|
||||
.ant-tabs-tab-prev-icon::before { |
|
||||
position: relative; |
|
||||
left: 6px; |
|
||||
} |
|
||||
.ant-tabs-tab-next-icon::before { |
|
||||
position: relative; |
|
||||
right: 6px; |
|
||||
} |
|
||||
.ant-tabs-tab-active h4 { |
|
||||
color: @primary-color; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.trendText { |
|
||||
margin-left: 8px; |
|
||||
color: @heading-color; |
|
||||
} |
|
||||
|
|
||||
@media screen and (max-width: @screen-lg) { |
|
||||
.salesExtra { |
|
||||
display: none; |
|
||||
} |
|
||||
|
|
||||
.rankingList { |
|
||||
li { |
|
||||
span:first-child { |
|
||||
margin-right: 8px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@media screen and (max-width: @screen-md) { |
|
||||
.rankingTitle { |
|
||||
margin-top: 16px; |
|
||||
} |
|
||||
|
|
||||
.salesCard .salesBar { |
|
||||
padding: 16px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@media screen and (max-width: @screen-sm) { |
|
||||
.salesExtraWrap { |
|
||||
display: none; |
|
||||
} |
|
||||
|
|
||||
.salesCard { |
|
||||
:global { |
|
||||
.ant-tabs-content { |
|
||||
padding-top: 30px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
@ -1,160 +0,0 @@ |
|||||
import { createStyles } from 'antd-style'; |
|
||||
|
|
||||
const useStyles = createStyles(({ token }) => { |
|
||||
return { |
|
||||
iconGroup: { |
|
||||
'span.anticon': { |
|
||||
marginLeft: '16px', |
|
||||
color: token.colorTextSecondary, |
|
||||
cursor: 'pointer', |
|
||||
transition: 'color 0.32s', |
|
||||
'&:hover': { |
|
||||
color: token.colorText, |
|
||||
}, |
|
||||
}, |
|
||||
}, |
|
||||
rankingList: { |
|
||||
margin: '25px 0 0', |
|
||||
padding: '0', |
|
||||
listStyle: 'none', |
|
||||
li: { |
|
||||
display: 'flex', |
|
||||
alignItems: 'center', |
|
||||
marginTop: '16px', |
|
||||
zoom: '1', |
|
||||
'&::before, &::after': { |
|
||||
display: 'table', |
|
||||
content: "' '", |
|
||||
}, |
|
||||
'&::after': { |
|
||||
clear: 'both', |
|
||||
height: '0', |
|
||||
fontSize: '0', |
|
||||
visibility: 'hidden', |
|
||||
}, |
|
||||
}, |
|
||||
[`@media screen and (max-width: ${token.screenLG}px)`]: { |
|
||||
li: { |
|
||||
'span:first-child': { marginRight: '8px' }, |
|
||||
}, |
|
||||
}, |
|
||||
}, |
|
||||
rankingItemNumber: { |
|
||||
display: 'inline-block', |
|
||||
width: '20px', |
|
||||
height: '20px', |
|
||||
marginTop: '1.5px', |
|
||||
marginRight: '16px', |
|
||||
fontWeight: '600', |
|
||||
fontSize: '12px', |
|
||||
lineHeight: '20px', |
|
||||
textAlign: 'center', |
|
||||
borderRadius: '20px', |
|
||||
backgroundColor: token.colorBgContainerDisabled, |
|
||||
}, |
|
||||
rankingItemTitle: { |
|
||||
flex: '1', |
|
||||
marginRight: '8px', |
|
||||
overflow: 'hidden', |
|
||||
whiteSpace: 'nowrap', |
|
||||
textOverflow: 'ellipsis', |
|
||||
}, |
|
||||
rankingItemNumberActive: { |
|
||||
display: 'inline-block', |
|
||||
width: '20px', |
|
||||
height: '20px', |
|
||||
marginTop: '1.5px', |
|
||||
marginRight: '16px', |
|
||||
fontWeight: '600', |
|
||||
fontSize: '12px', |
|
||||
lineHeight: '20px', |
|
||||
textAlign: 'center', |
|
||||
borderRadius: '20px', |
|
||||
color: '#fff', |
|
||||
backgroundColor: token.colorBgSpotlight, |
|
||||
}, |
|
||||
salesExtra: { |
|
||||
display: 'inline-block', |
|
||||
marginRight: '24px', |
|
||||
a: { |
|
||||
marginLeft: '24px', |
|
||||
color: token.colorText, |
|
||||
'&:hover': { |
|
||||
color: token.colorPrimary, |
|
||||
}, |
|
||||
}, |
|
||||
[`@media screen and (max-width: ${token.screenLG}px)`]: { |
|
||||
display: 'none', |
|
||||
}, |
|
||||
}, |
|
||||
currentDate: { |
|
||||
color: token.colorPrimary, |
|
||||
fontWeight: 'bold', |
|
||||
}, |
|
||||
salesBar: { |
|
||||
padding: '0 0 32px 32px', |
|
||||
[`@media screen and (max-width: ${token.screenMD}px)`]: { |
|
||||
padding: '16px', |
|
||||
}, |
|
||||
}, |
|
||||
salesRank: { |
|
||||
padding: '0 32px 32px 72px', |
|
||||
}, |
|
||||
salesCard: { |
|
||||
'.ant-tabs-bar, .ant-tabs-nav-wrap': { |
|
||||
paddingLeft: '16px', |
|
||||
'.ant-tabs-nav .ant-tabs-tab': { |
|
||||
paddingTop: '16px', |
|
||||
paddingBottom: '14px', |
|
||||
lineHeight: '24px', |
|
||||
}, |
|
||||
}, |
|
||||
'.ant-tabs-extra-content': { paddingRight: '24px', lineHeight: '55px' }, |
|
||||
'.ant-card-head': { position: 'relative' }, |
|
||||
'.ant-card-head-title': { alignItems: 'normal' }, |
|
||||
[`@media screen and (max-width: ${token.screenMD}px)`]: { |
|
||||
padding: '16px', |
|
||||
}, |
|
||||
[`@media screen and (max-width: ${token.screenSM}px)`]: { |
|
||||
'.ant-tabs-content': { |
|
||||
paddingTop: '30px', |
|
||||
}, |
|
||||
}, |
|
||||
}, |
|
||||
salesCardExtra: { |
|
||||
height: 'inherit', |
|
||||
}, |
|
||||
salesTypeRadio: { |
|
||||
position: 'absolute', |
|
||||
right: '54px', |
|
||||
bottom: '12px', |
|
||||
}, |
|
||||
offlineCard: { |
|
||||
'.ant-tabs-ink-bar': { bottom: 'auto' }, |
|
||||
'.ant-tabs-bar': { borderBottom: 'none' }, |
|
||||
'.ant-tabs-nav-container-scrolling': { |
|
||||
paddingRight: '40px', |
|
||||
paddingLeft: '40px', |
|
||||
}, |
|
||||
'.ant-tabs-tab-prev-icon::before': { position: 'relative', left: '6px' }, |
|
||||
'.ant-tabs-tab-next-icon::before': { position: 'relative', right: '6px' }, |
|
||||
'.ant-tabs-tab-active h4': { color: token.colorPrimary }, |
|
||||
}, |
|
||||
trendText: { |
|
||||
marginLeft: '8px', |
|
||||
color: token.colorTextHeading, |
|
||||
}, |
|
||||
rankingTitle: { |
|
||||
[`@media screen and (max-width: ${token.screenMD}px)`]: { |
|
||||
marginTop: '16px', |
|
||||
}, |
|
||||
}, |
|
||||
salesExtraWrap: { |
|
||||
[`@media screen and (max-width: ${token.screenSM}px)`]: { |
|
||||
display: 'none', |
|
||||
}, |
|
||||
}, |
|
||||
}; |
|
||||
}); |
|
||||
|
|
||||
export default useStyles; |
|
||||
@ -1,33 +0,0 @@ |
|||||
import React from 'react'; |
|
||||
import { yuan } from '../components/Charts'; |
|
||||
/** 减少使用 dangerouslySetInnerHTML */ |
|
||||
export default class Yuan extends React.Component<{ |
|
||||
children: string | number; |
|
||||
}> { |
|
||||
main: HTMLSpanElement | undefined | null = null; |
|
||||
|
|
||||
componentDidMount() { |
|
||||
this.renderToHtml(); |
|
||||
} |
|
||||
|
|
||||
componentDidUpdate() { |
|
||||
this.renderToHtml(); |
|
||||
} |
|
||||
|
|
||||
renderToHtml = () => { |
|
||||
const { children } = this.props; |
|
||||
if (this.main) { |
|
||||
this.main.innerHTML = yuan(children); |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
render() { |
|
||||
return ( |
|
||||
<span |
|
||||
ref={(ref) => { |
|
||||
this.main = ref; |
|
||||
}} |
|
||||
/> |
|
||||
); |
|
||||
} |
|
||||
} |
|
||||
@ -1,57 +0,0 @@ |
|||||
import type { RangePickerProps } from 'antd/es/date-picker'; |
|
||||
import dayjs from 'dayjs'; |
|
||||
|
|
||||
type RangePickerValue = RangePickerProps['value']; |
|
||||
|
|
||||
export function fixedZero(val: number) { |
|
||||
return val * 1 < 10 ? `0${val}` : val; |
|
||||
} |
|
||||
|
|
||||
export function getTimeDistance( |
|
||||
type: 'today' | 'week' | 'month' | 'year', |
|
||||
): RangePickerValue { |
|
||||
const now = new Date(); |
|
||||
const oneDay = 1000 * 60 * 60 * 24; |
|
||||
|
|
||||
if (type === 'today') { |
|
||||
now.setHours(0); |
|
||||
now.setMinutes(0); |
|
||||
now.setSeconds(0); |
|
||||
return [dayjs(now), dayjs(now.getTime() + (oneDay - 1000))]; |
|
||||
} |
|
||||
|
|
||||
if (type === 'week') { |
|
||||
let day = now.getDay(); |
|
||||
now.setHours(0); |
|
||||
now.setMinutes(0); |
|
||||
now.setSeconds(0); |
|
||||
|
|
||||
if (day === 0) { |
|
||||
day = 6; |
|
||||
} else { |
|
||||
day -= 1; |
|
||||
} |
|
||||
|
|
||||
const beginTime = now.getTime() - day * oneDay; |
|
||||
|
|
||||
return [dayjs(beginTime), dayjs(beginTime + (7 * oneDay - 1000))]; |
|
||||
} |
|
||||
const year = now.getFullYear(); |
|
||||
|
|
||||
if (type === 'month') { |
|
||||
const month = now.getMonth(); |
|
||||
const nextDate = dayjs(now).add(1, 'months'); |
|
||||
const nextYear = nextDate.year(); |
|
||||
const nextMonth = nextDate.month(); |
|
||||
|
|
||||
return [ |
|
||||
dayjs(`${year}-${fixedZero(month + 1)}-01 00:00:00`), |
|
||||
dayjs( |
|
||||
dayjs(`${nextYear}-${fixedZero(nextMonth + 1)}-01 00:00:00`).valueOf() - |
|
||||
1000, |
|
||||
), |
|
||||
]; |
|
||||
} |
|
||||
|
|
||||
return [dayjs(`${year}-01-01 00:00:00`), dayjs(`${year}-12-31 23:59:59`)]; |
|
||||
} |
|
||||
@ -1,14 +0,0 @@ |
|||||
import type { Request, Response } from 'express'; |
|
||||
import mockjs from 'mockjs'; |
|
||||
|
|
||||
const getTags = (_: Request, res: Response) => { |
|
||||
return res.json({ |
|
||||
data: mockjs.mock({ |
|
||||
'list|100': [{ name: '@city', 'value|1-100': 150, 'type|0-2': 1 }], |
|
||||
}), |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
export default { |
|
||||
'GET /api/tags': getTags, |
|
||||
}; |
|
||||
@ -1,51 +0,0 @@ |
|||||
.activeChart { |
|
||||
position: relative; |
|
||||
} |
|
||||
.activeChartGrid { |
|
||||
p { |
|
||||
position: absolute; |
|
||||
top: 80px; |
|
||||
} |
|
||||
p:last-child { |
|
||||
top: 115px; |
|
||||
} |
|
||||
} |
|
||||
.activeChartLegend { |
|
||||
position: relative; |
|
||||
height: 20px; |
|
||||
margin-top: 8px; |
|
||||
font-size: 0; |
|
||||
line-height: 20px; |
|
||||
span { |
|
||||
display: inline-block; |
|
||||
width: 33.33%; |
|
||||
font-size: 12px; |
|
||||
text-align: center; |
|
||||
} |
|
||||
span:first-child { |
|
||||
text-align: left; |
|
||||
} |
|
||||
span:last-child { |
|
||||
text-align: right; |
|
||||
} |
|
||||
} |
|
||||
.dashedLine { |
|
||||
position: relative; |
|
||||
top: -70px; |
|
||||
left: -3px; |
|
||||
height: 1px; |
|
||||
|
|
||||
.line { |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
left: 0; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
background-image: linear-gradient(to right, transparent 50%, #e9e9e9 50%); |
|
||||
background-size: 6px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.dashedLine:last-child { |
|
||||
top: -36px; |
|
||||
} |
|
||||
@ -1,48 +0,0 @@ |
|||||
import { createStyles } from 'antd-style'; |
|
||||
|
|
||||
const useStyles = createStyles(() => { |
|
||||
return { |
|
||||
activeChart: { |
|
||||
position: 'relative', |
|
||||
}, |
|
||||
activeChartGrid: { |
|
||||
p: { position: 'absolute', top: '80px' }, |
|
||||
'p:last-child': { top: '115px' }, |
|
||||
}, |
|
||||
activeChartLegend: { |
|
||||
position: 'relative', |
|
||||
height: '20px', |
|
||||
marginTop: '8px', |
|
||||
fontSize: '0', |
|
||||
lineHeight: '20px', |
|
||||
span: { |
|
||||
display: 'inline-block', |
|
||||
width: '33.33%', |
|
||||
fontSize: '12px', |
|
||||
textAlign: 'center', |
|
||||
}, |
|
||||
'span:first-child': { textAlign: 'left' }, |
|
||||
'span:last-child': { textAlign: 'right' }, |
|
||||
}, |
|
||||
dashedLine: { |
|
||||
position: 'relative', |
|
||||
top: '-70px', |
|
||||
left: '-3px', |
|
||||
height: '1px', |
|
||||
}, |
|
||||
line: { |
|
||||
position: 'absolute', |
|
||||
top: '0', |
|
||||
left: '0', |
|
||||
width: '100%', |
|
||||
height: '100%', |
|
||||
backgroundImage: |
|
||||
'linear-gradient(to right, transparent 50%, #e9e9e9 50%)', |
|
||||
backgroundSize: '6px', |
|
||||
}, |
|
||||
'dashedLine:last-child': { |
|
||||
top: '-36px', |
|
||||
}, |
|
||||
}; |
|
||||
}); |
|
||||
export default useStyles; |
|
||||
@ -1,93 +0,0 @@ |
|||||
import { Area } from '@ant-design/plots'; |
|
||||
import { Statistic } from 'antd'; |
|
||||
import { useCallback, useEffect, useRef, useState } from 'react'; |
|
||||
import useStyles from './index.style'; |
|
||||
|
|
||||
function fixedZero(val: number) { |
|
||||
return val * 1 < 10 ? `0${val}` : val; |
|
||||
} |
|
||||
function getActiveData() { |
|
||||
const activeData = []; |
|
||||
for (let i = 0; i < 24; i += 1) { |
|
||||
activeData.push({ |
|
||||
x: `${fixedZero(i)}:00`, |
|
||||
y: Math.floor(Math.random() * 200) + i * 50, |
|
||||
}); |
|
||||
} |
|
||||
return activeData; |
|
||||
} |
|
||||
|
|
||||
const ActiveChart = () => { |
|
||||
const timerRef = useRef<number | null>(null); |
|
||||
const requestRef = useRef<number | null>(null); |
|
||||
const { styles } = useStyles(); |
|
||||
const [activeData, setActiveData] = useState<{ x: string; y: number }[]>([]); |
|
||||
const loopData = useCallback(() => { |
|
||||
requestRef.current = requestAnimationFrame(() => { |
|
||||
timerRef.current = window.setTimeout(() => { |
|
||||
setActiveData(getActiveData()); |
|
||||
loopData(); |
|
||||
}, 2000); |
|
||||
}); |
|
||||
}, []); |
|
||||
|
|
||||
useEffect(() => { |
|
||||
loopData(); |
|
||||
return () => { |
|
||||
clearTimeout(timerRef.current as number); |
|
||||
if (requestRef.current) { |
|
||||
cancelAnimationFrame(requestRef.current); |
|
||||
} |
|
||||
}; |
|
||||
}, [loopData]); |
|
||||
|
|
||||
return ( |
|
||||
<div className={styles.activeChart}> |
|
||||
<Statistic title="目标评估" value="有望达到预期" /> |
|
||||
<div |
|
||||
style={{ |
|
||||
marginTop: 32, |
|
||||
}} |
|
||||
> |
|
||||
<Area |
|
||||
padding={[0, 0, 0, 0]} |
|
||||
xField="x" |
|
||||
axis={false} |
|
||||
yField="y" |
|
||||
height={84} |
|
||||
style={{ |
|
||||
fill: 'linear-gradient(-90deg, white 0%, #6294FA 100%)', |
|
||||
fillOpacity: 0.6, |
|
||||
}} |
|
||||
data={activeData} |
|
||||
/> |
|
||||
</div> |
|
||||
{activeData && ( |
|
||||
<div> |
|
||||
<div className={styles.activeChartGrid}> |
|
||||
<p>{[...activeData].sort()[activeData.length - 1]?.y + 200} 亿元</p> |
|
||||
<p> |
|
||||
{[...activeData].sort()[Math.floor(activeData.length / 2)]?.y}{' '} |
|
||||
亿元 |
|
||||
</p> |
|
||||
</div> |
|
||||
<div className={styles.dashedLine}> |
|
||||
<div className={styles.line} /> |
|
||||
</div> |
|
||||
<div className={styles.dashedLine}> |
|
||||
<div className={styles.line} /> |
|
||||
</div> |
|
||||
</div> |
|
||||
)} |
|
||||
{activeData && ( |
|
||||
<div className={styles.activeChartLegend}> |
|
||||
<span>00:00</span> |
|
||||
<span>{activeData[Math.floor(activeData.length / 2)]?.x}</span> |
|
||||
<span>{activeData[activeData.length - 1]?.x}</span> |
|
||||
</div> |
|
||||
)} |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
|
|
||||
export default ActiveChart; |
|
||||
@ -1,225 +0,0 @@ |
|||||
import React, { Component } from 'react'; |
|
||||
import autoHeight from '../autoHeight'; |
|
||||
|
|
||||
/* eslint no-return-assign: 0 */ |
|
||||
/* eslint no-mixed-operators: 0 */ |
|
||||
// riddle: https://riddle.alibaba-inc.com/riddles/2d9a4b90
|
|
||||
|
|
||||
export type WaterWaveProps = { |
|
||||
title: React.ReactNode; |
|
||||
color?: string; |
|
||||
height?: number; |
|
||||
percent: number; |
|
||||
style?: React.CSSProperties; |
|
||||
}; |
|
||||
class WaterWave extends Component<WaterWaveProps> { |
|
||||
state = { |
|
||||
radio: 1, |
|
||||
}; |
|
||||
timer: number = 0; |
|
||||
root: HTMLDivElement | undefined | null = null; |
|
||||
node: HTMLCanvasElement | undefined | null = null; |
|
||||
componentDidMount() { |
|
||||
this.renderChart(); |
|
||||
this.resize(); |
|
||||
window.addEventListener( |
|
||||
'resize', |
|
||||
() => { |
|
||||
requestAnimationFrame(() => this.resize()); |
|
||||
}, |
|
||||
{ |
|
||||
passive: true, |
|
||||
}, |
|
||||
); |
|
||||
} |
|
||||
componentDidUpdate(props: WaterWaveProps) { |
|
||||
const { percent } = this.props; |
|
||||
if (props.percent !== percent) { |
|
||||
// 不加这个会造成绘制缓慢
|
|
||||
this.renderChart('update'); |
|
||||
} |
|
||||
} |
|
||||
componentWillUnmount() { |
|
||||
cancelAnimationFrame(this.timer); |
|
||||
if (this.node) { |
|
||||
this.node.innerHTML = ''; |
|
||||
} |
|
||||
window.removeEventListener('resize', this.resize); |
|
||||
} |
|
||||
resize = () => { |
|
||||
if (this.root) { |
|
||||
const { height = 1 } = this.props; |
|
||||
const { offsetWidth } = this.root.parentNode as HTMLElement; |
|
||||
this.setState({ |
|
||||
radio: offsetWidth < height ? offsetWidth / height : 1, |
|
||||
}); |
|
||||
} |
|
||||
}; |
|
||||
renderChart(type?: string) { |
|
||||
const { percent, color = '#1890FF' } = this.props; |
|
||||
const data = percent / 100; |
|
||||
cancelAnimationFrame(this.timer); |
|
||||
if (!this.node || (data !== 0 && !data)) { |
|
||||
return; |
|
||||
} |
|
||||
const canvas = this.node; |
|
||||
const ctx = canvas.getContext('2d'); |
|
||||
if (!ctx) { |
|
||||
return; |
|
||||
} |
|
||||
const canvasWidth = canvas.width; |
|
||||
const canvasHeight = canvas.height; |
|
||||
const radius = canvasWidth / 2; |
|
||||
const lineWidth = 2; |
|
||||
const cR = radius - lineWidth; |
|
||||
ctx.beginPath(); |
|
||||
ctx.lineWidth = lineWidth * 2; |
|
||||
const axisLength = canvasWidth - lineWidth; |
|
||||
const unit = axisLength / 8; |
|
||||
const range = 0.2; // 振幅
|
|
||||
let currRange = range; |
|
||||
const xOffset = lineWidth; |
|
||||
let sp = 0; // 周期偏移量
|
|
||||
let currData = 0; |
|
||||
const waveupsp = 0.005; // 水波上涨速度
|
|
||||
|
|
||||
let arcStack: number[][] = []; |
|
||||
const bR = radius - lineWidth; |
|
||||
const circleOffset = -(Math.PI / 2); |
|
||||
let circleLock = true; |
|
||||
for ( |
|
||||
let i = circleOffset; |
|
||||
i < circleOffset + 2 * Math.PI; |
|
||||
i += 1 / (8 * Math.PI) |
|
||||
) { |
|
||||
arcStack.push([radius + bR * Math.cos(i), radius + bR * Math.sin(i)]); |
|
||||
} |
|
||||
const cStartPoint = arcStack.shift() as number[]; |
|
||||
ctx.strokeStyle = color; |
|
||||
ctx.moveTo(cStartPoint[0], cStartPoint[1]); |
|
||||
const drawSin = () => { |
|
||||
if (!ctx) { |
|
||||
return; |
|
||||
} |
|
||||
ctx.beginPath(); |
|
||||
ctx.save(); |
|
||||
const sinStack = []; |
|
||||
for (let i = xOffset; i <= xOffset + axisLength; i += 20 / axisLength) { |
|
||||
const x = sp + (xOffset + i) / unit; |
|
||||
const y = Math.sin(x) * currRange; |
|
||||
const dx = i; |
|
||||
const dy = 2 * cR * (1 - currData) + (radius - cR) - unit * y; |
|
||||
ctx.lineTo(dx, dy); |
|
||||
sinStack.push([dx, dy]); |
|
||||
} |
|
||||
const startPoint = sinStack.shift() as number[]; |
|
||||
ctx.lineTo(xOffset + axisLength, canvasHeight); |
|
||||
ctx.lineTo(xOffset, canvasHeight); |
|
||||
ctx.lineTo(startPoint[0], startPoint[1]); |
|
||||
const gradient = ctx.createLinearGradient(0, 0, 0, canvasHeight); |
|
||||
gradient.addColorStop(0, '#ffffff'); |
|
||||
gradient.addColorStop(1, color); |
|
||||
ctx.fillStyle = gradient; |
|
||||
ctx.fill(); |
|
||||
ctx.restore(); |
|
||||
}; |
|
||||
const render = () => { |
|
||||
if (!ctx) { |
|
||||
return; |
|
||||
} |
|
||||
ctx.clearRect(0, 0, canvasWidth, canvasHeight); |
|
||||
if (circleLock && type !== 'update') { |
|
||||
if (arcStack.length) { |
|
||||
const temp = arcStack.shift() as number[]; |
|
||||
ctx.lineTo(temp[0], temp[1]); |
|
||||
ctx.stroke(); |
|
||||
} else { |
|
||||
circleLock = false; |
|
||||
ctx.lineTo(cStartPoint[0], cStartPoint[1]); |
|
||||
ctx.stroke(); |
|
||||
arcStack = []; |
|
||||
ctx.globalCompositeOperation = 'destination-over'; |
|
||||
ctx.beginPath(); |
|
||||
ctx.lineWidth = lineWidth; |
|
||||
ctx.arc(radius, radius, bR, 0, 2 * Math.PI, true); |
|
||||
ctx.beginPath(); |
|
||||
ctx.save(); |
|
||||
ctx.arc(radius, radius, radius - 3 * lineWidth, 0, 2 * Math.PI, true); |
|
||||
ctx.restore(); |
|
||||
ctx.clip(); |
|
||||
ctx.fillStyle = color; |
|
||||
} |
|
||||
} else { |
|
||||
if (data >= 0.85) { |
|
||||
if (currRange > range / 4) { |
|
||||
const t = range * 0.01; |
|
||||
currRange -= t; |
|
||||
} |
|
||||
} else if (data <= 0.1) { |
|
||||
if (currRange < range * 1.5) { |
|
||||
const t = range * 0.01; |
|
||||
currRange += t; |
|
||||
} |
|
||||
} else { |
|
||||
if (currRange <= range) { |
|
||||
const t = range * 0.01; |
|
||||
currRange += t; |
|
||||
} |
|
||||
if (currRange >= range) { |
|
||||
const t = range * 0.01; |
|
||||
currRange -= t; |
|
||||
} |
|
||||
} |
|
||||
if (data - currData > 0) { |
|
||||
currData += waveupsp; |
|
||||
} |
|
||||
if (data - currData < 0) { |
|
||||
currData -= waveupsp; |
|
||||
} |
|
||||
sp += 0.07; |
|
||||
drawSin(); |
|
||||
} |
|
||||
this.timer = requestAnimationFrame(render); |
|
||||
}; |
|
||||
render(); |
|
||||
} |
|
||||
render() { |
|
||||
const { radio } = this.state; |
|
||||
const { percent, title, height = 1 } = this.props; |
|
||||
return ( |
|
||||
<div |
|
||||
ref={(n) => { |
|
||||
this.root = n; |
|
||||
}} |
|
||||
style={{ |
|
||||
transform: `scale(${radio})`, |
|
||||
}} |
|
||||
> |
|
||||
<div |
|
||||
style={{ |
|
||||
width: height, |
|
||||
height, |
|
||||
overflow: 'hidden', |
|
||||
}} |
|
||||
> |
|
||||
<canvas |
|
||||
ref={(n) => { |
|
||||
this.node = n; |
|
||||
}} |
|
||||
width={height * 2} |
|
||||
height={height * 2} |
|
||||
/> |
|
||||
</div> |
|
||||
<div |
|
||||
style={{ |
|
||||
width: height, |
|
||||
}} |
|
||||
> |
|
||||
{title && <span>{title}</span>} |
|
||||
<h4>{percent}%</h4> |
|
||||
</div> |
|
||||
</div> |
|
||||
); |
|
||||
} |
|
||||
} |
|
||||
export default autoHeight()(WaterWave); |
|
||||
@ -1,78 +0,0 @@ |
|||||
import React from 'react'; |
|
||||
|
|
||||
export type IReactComponent<P = any> = |
|
||||
| React.ComponentClass<P> |
|
||||
| React.ClassicComponentClass<P>; |
|
||||
|
|
||||
function computeHeight(node: HTMLDivElement) { |
|
||||
const { style } = node; |
|
||||
style.height = '100%'; |
|
||||
const totalHeight = parseInt(`${getComputedStyle(node).height}`, 10); |
|
||||
const padding = |
|
||||
parseInt(`${getComputedStyle(node).paddingTop}`, 10) + |
|
||||
parseInt(`${getComputedStyle(node).paddingBottom}`, 10); |
|
||||
return totalHeight - padding; |
|
||||
} |
|
||||
|
|
||||
function getAutoHeight(n: HTMLDivElement) { |
|
||||
if (!n) { |
|
||||
return 0; |
|
||||
} |
|
||||
|
|
||||
const node = n; |
|
||||
|
|
||||
let height = computeHeight(node); |
|
||||
const parentNode = node.parentNode as HTMLDivElement; |
|
||||
if (parentNode) { |
|
||||
height = computeHeight(parentNode); |
|
||||
} |
|
||||
|
|
||||
return height; |
|
||||
} |
|
||||
|
|
||||
type AutoHeightProps = { |
|
||||
height?: number; |
|
||||
}; |
|
||||
|
|
||||
function autoHeight() { |
|
||||
return <P extends AutoHeightProps>( |
|
||||
WrappedComponent: React.ComponentClass<P> | React.FC<P>, |
|
||||
): React.ComponentClass<P> => { |
|
||||
class AutoHeightComponent extends React.Component<P & AutoHeightProps> { |
|
||||
state = { |
|
||||
computedHeight: 0, |
|
||||
}; |
|
||||
|
|
||||
root: HTMLDivElement | null = null; |
|
||||
|
|
||||
componentDidMount() { |
|
||||
const { height } = this.props; |
|
||||
if (!height && this.root) { |
|
||||
let h = getAutoHeight(this.root); |
|
||||
this.setState({ computedHeight: h }); |
|
||||
if (h < 1) { |
|
||||
h = getAutoHeight(this.root); |
|
||||
this.setState({ computedHeight: h }); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
handleRoot = (node: HTMLDivElement) => { |
|
||||
this.root = node; |
|
||||
}; |
|
||||
|
|
||||
render() { |
|
||||
const { height } = this.props; |
|
||||
const { computedHeight } = this.state; |
|
||||
const h = height || computedHeight; |
|
||||
return ( |
|
||||
<div ref={this.handleRoot}> |
|
||||
{h > 0 && <WrappedComponent {...this.props} height={h} />} |
|
||||
</div> |
|
||||
); |
|
||||
} |
|
||||
} |
|
||||
return AutoHeightComponent; |
|
||||
}; |
|
||||
} |
|
||||
export default autoHeight; |
|
||||
@ -1,153 +0,0 @@ |
|||||
import { PageLoading } from '@ant-design/pro-components'; |
|
||||
import { HeatmapLayer, MapboxScene, PointLayer } from '@antv/l7-react'; |
|
||||
import * as React from 'react'; |
|
||||
|
|
||||
const colors = [ |
|
||||
'#eff3ff', |
|
||||
'#c6dbef', |
|
||||
'#9ecae1', |
|
||||
'#6baed6', |
|
||||
'#4292c6', |
|
||||
'#2171b5', |
|
||||
'#084594', |
|
||||
]; |
|
||||
export default class MonitorMap extends React.Component { |
|
||||
state = { |
|
||||
data: null, |
|
||||
grid: null, |
|
||||
loading: false, |
|
||||
}; |
|
||||
|
|
||||
public async componentDidMount() { |
|
||||
const [geoData, gridData] = await Promise.all([ |
|
||||
fetch( |
|
||||
'https://gw.alipayobjects.com/os/bmw-prod/c5dba875-b6ea-4e88-b778-66a862906c93.json', |
|
||||
).then((d) => d.json()), |
|
||||
fetch( |
|
||||
'https://gw.alipayobjects.com/os/bmw-prod/8990e8b4-c58e-419b-afb9-8ea3daff2dd1.json', |
|
||||
).then((d) => d.json()), |
|
||||
]); |
|
||||
this.setState({ |
|
||||
data: geoData, |
|
||||
grid: gridData, |
|
||||
loading: true, |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
public render() { |
|
||||
const { data, grid, loading } = this.state; |
|
||||
return loading === false ? ( |
|
||||
<PageLoading /> |
|
||||
) : ( |
|
||||
<MapboxScene |
|
||||
map={{ |
|
||||
center: [110.19382669582967, 50.258134], |
|
||||
pitch: 0, |
|
||||
style: 'blank', |
|
||||
zoom: 1, |
|
||||
}} |
|
||||
style={{ |
|
||||
position: 'relative', |
|
||||
width: '100%', |
|
||||
height: '452px', |
|
||||
}} |
|
||||
> |
|
||||
{grid && ( |
|
||||
<HeatmapLayer |
|
||||
key="1" |
|
||||
source={{ |
|
||||
data: grid, |
|
||||
transforms: [ |
|
||||
{ |
|
||||
type: 'hexagon', |
|
||||
size: 800000, |
|
||||
field: 'capacity', |
|
||||
method: 'sum', |
|
||||
}, |
|
||||
], |
|
||||
}} |
|
||||
color={{ |
|
||||
values: '#ddd', |
|
||||
}} |
|
||||
shape={{ |
|
||||
values: 'hexagon', |
|
||||
}} |
|
||||
style={{ |
|
||||
coverage: 0.7, |
|
||||
opacity: 0.8, |
|
||||
}} |
|
||||
/> |
|
||||
)} |
|
||||
{data && [ |
|
||||
<PointLayer |
|
||||
key="2" |
|
||||
options={{ |
|
||||
autoFit: true, |
|
||||
}} |
|
||||
source={{ |
|
||||
data, |
|
||||
}} |
|
||||
scale={{ |
|
||||
values: { |
|
||||
color: { |
|
||||
field: 'cum_conf', |
|
||||
type: 'quantile', |
|
||||
}, |
|
||||
size: { |
|
||||
field: 'cum_conf', |
|
||||
type: 'log', |
|
||||
}, |
|
||||
}, |
|
||||
}} |
|
||||
color={{ |
|
||||
field: 'cum_conf', |
|
||||
values: colors, |
|
||||
}} |
|
||||
shape={{ |
|
||||
values: 'circle', |
|
||||
}} |
|
||||
active={{ |
|
||||
option: { |
|
||||
color: '#0c2c84', |
|
||||
}, |
|
||||
}} |
|
||||
size={{ |
|
||||
field: 'cum_conf', |
|
||||
values: [0, 30], |
|
||||
}} |
|
||||
style={{ |
|
||||
opacity: 0.8, |
|
||||
}} |
|
||||
/>, |
|
||||
<PointLayer |
|
||||
key="5" |
|
||||
source={{ |
|
||||
data, |
|
||||
}} |
|
||||
color={{ |
|
||||
values: '#fff', |
|
||||
}} |
|
||||
shape={{ |
|
||||
field: 'Short_Name_ZH', |
|
||||
values: 'text', |
|
||||
}} |
|
||||
filter={{ |
|
||||
field: 'cum_conf', |
|
||||
values: (v) => { |
|
||||
return v > 2000; |
|
||||
}, |
|
||||
}} |
|
||||
size={{ |
|
||||
values: 12, |
|
||||
}} |
|
||||
style={{ |
|
||||
opacity: 1, |
|
||||
strokeOpacity: 1, |
|
||||
strokeWidth: 0, |
|
||||
}} |
|
||||
/>, |
|
||||
]} |
|
||||
</MapboxScene> |
|
||||
); |
|
||||
} |
|
||||
} |
|
||||
@ -1,5 +0,0 @@ |
|||||
export type TagType = { |
|
||||
name: string; |
|
||||
value: number; |
|
||||
type: string; |
|
||||
}; |
|
||||
@ -1,6 +0,0 @@ |
|||||
import { request } from '@umijs/max'; |
|
||||
import type { TagType } from './data'; |
|
||||
|
|
||||
export async function queryTags(): Promise<{ data: { list: TagType[] } }> { |
|
||||
return request('/api/tags'); |
|
||||
} |
|
||||
@ -1,21 +0,0 @@ |
|||||
@import '~antd/es/style/themes/default.less'; |
|
||||
|
|
||||
.mapChart { |
|
||||
height: 452px; |
|
||||
padding-top: 24px; |
|
||||
img { |
|
||||
display: inline-block; |
|
||||
max-width: 100%; |
|
||||
max-height: 437px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.pieCard :global(.pie-stat) { |
|
||||
font-size: 24px !important; |
|
||||
} |
|
||||
|
|
||||
@media screen and (max-width: @screen-lg) { |
|
||||
.mapChart { |
|
||||
height: auto; |
|
||||
} |
|
||||
} |
|
||||
@ -1,16 +0,0 @@ |
|||||
import { createStyles } from 'antd-style'; |
|
||||
|
|
||||
const useStyles = createStyles(({ token }) => { |
|
||||
return { |
|
||||
mapChart: { |
|
||||
height: '452px', |
|
||||
paddingTop: '24px', |
|
||||
img: { display: 'inline-block', maxWidth: '100%', maxHeight: '437px' }, |
|
||||
[`@media screen and (max-width: ${token.screenLG}px)`]: { |
|
||||
height: 'auto', |
|
||||
}, |
|
||||
}, |
|
||||
}; |
|
||||
}); |
|
||||
|
|
||||
export default useStyles; |
|
||||
@ -1,410 +0,0 @@ |
|||||
import dayjs from 'dayjs'; |
|
||||
import type { Request, Response } from 'express'; |
|
||||
import type { DataItem, OfflineDataType, SearchDataType } from './data.d'; |
|
||||
|
|
||||
// mock data
|
|
||||
const visitData: DataItem[] = []; |
|
||||
const beginDay = Date.now(); |
|
||||
|
|
||||
const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5]; |
|
||||
for (let i = 0; i < fakeY.length; i += 1) { |
|
||||
visitData.push({ |
|
||||
x: dayjs(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'), |
|
||||
y: fakeY[i], |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
const visitData2: DataItem[] = []; |
|
||||
const fakeY2 = [1, 6, 4, 8, 3, 7, 2]; |
|
||||
for (let i = 0; i < fakeY2.length; i += 1) { |
|
||||
visitData2.push({ |
|
||||
x: dayjs(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'), |
|
||||
y: fakeY2[i], |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
const salesData: DataItem[] = []; |
|
||||
for (let i = 0; i < 12; i += 1) { |
|
||||
salesData.push({ |
|
||||
x: `${i + 1}月`, |
|
||||
y: Math.floor(Math.random() * 1000) + 200, |
|
||||
}); |
|
||||
} |
|
||||
const searchData: SearchDataType[] = []; |
|
||||
for (let i = 0; i < 50; i += 1) { |
|
||||
searchData.push({ |
|
||||
index: i + 1, |
|
||||
keyword: `搜索关键词-${i}`, |
|
||||
count: Math.floor(Math.random() * 1000), |
|
||||
range: Math.floor(Math.random() * 100), |
|
||||
status: Math.floor((Math.random() * 10) % 2), |
|
||||
}); |
|
||||
} |
|
||||
const salesTypeData = [ |
|
||||
{ |
|
||||
x: '家用电器', |
|
||||
y: 4544, |
|
||||
}, |
|
||||
{ |
|
||||
x: '食用酒水', |
|
||||
y: 3321, |
|
||||
}, |
|
||||
{ |
|
||||
x: '个护健康', |
|
||||
y: 3113, |
|
||||
}, |
|
||||
{ |
|
||||
x: '服饰箱包', |
|
||||
y: 2341, |
|
||||
}, |
|
||||
{ |
|
||||
x: '母婴产品', |
|
||||
y: 1231, |
|
||||
}, |
|
||||
{ |
|
||||
x: '其他', |
|
||||
y: 1231, |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
const salesTypeDataOnline = [ |
|
||||
{ |
|
||||
x: '家用电器', |
|
||||
y: 244, |
|
||||
}, |
|
||||
{ |
|
||||
x: '食用酒水', |
|
||||
y: 321, |
|
||||
}, |
|
||||
{ |
|
||||
x: '个护健康', |
|
||||
y: 311, |
|
||||
}, |
|
||||
{ |
|
||||
x: '服饰箱包', |
|
||||
y: 41, |
|
||||
}, |
|
||||
{ |
|
||||
x: '母婴产品', |
|
||||
y: 121, |
|
||||
}, |
|
||||
{ |
|
||||
x: '其他', |
|
||||
y: 111, |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
const salesTypeDataOffline = [ |
|
||||
{ |
|
||||
x: '家用电器', |
|
||||
y: 99, |
|
||||
}, |
|
||||
{ |
|
||||
x: '食用酒水', |
|
||||
y: 188, |
|
||||
}, |
|
||||
{ |
|
||||
x: '个护健康', |
|
||||
y: 344, |
|
||||
}, |
|
||||
{ |
|
||||
x: '服饰箱包', |
|
||||
y: 255, |
|
||||
}, |
|
||||
{ |
|
||||
x: '其他', |
|
||||
y: 65, |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
const offlineData: OfflineDataType[] = []; |
|
||||
for (let i = 0; i < 10; i += 1) { |
|
||||
offlineData.push({ |
|
||||
name: `Stores ${i}`, |
|
||||
cvr: Math.ceil(Math.random() * 9) / 10, |
|
||||
}); |
|
||||
} |
|
||||
const offlineChartData: DataItem[] = []; |
|
||||
for (let i = 0; i < 20; i += 1) { |
|
||||
offlineChartData.push({ |
|
||||
x: Date.now() + 1000 * 60 * 30 * i, |
|
||||
y1: Math.floor(Math.random() * 100) + 10, |
|
||||
y2: Math.floor(Math.random() * 100) + 10, |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
const titles = [ |
|
||||
'Alipay', |
|
||||
'Angular', |
|
||||
'Ant Design', |
|
||||
'Ant Design Pro', |
|
||||
'Bootstrap', |
|
||||
'React', |
|
||||
'Vue', |
|
||||
'Webpack', |
|
||||
]; |
|
||||
const avatars = [ |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', // Alipay
|
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', // Angular
|
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', // Ant Design
|
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', // Ant Design Pro
|
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', // Bootstrap
|
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png', // React
|
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', // Vue
|
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png', // Webpack
|
|
||||
]; |
|
||||
|
|
||||
const avatars2 = [ |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png', |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png', |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png', |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png', |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png', |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png', |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/psOgztMplJMGpVEqfcgF.png', |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/ZpBqSxLxVEXfcUNoPKrz.png', |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/laiEnJdGHVOhJrUShBaJ.png', |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/UrQsqscbKEpNuJcvBZBu.png', |
|
||||
]; |
|
||||
|
|
||||
const getNotice = (_: Request, res: Response) => { |
|
||||
res.json({ |
|
||||
data: [ |
|
||||
{ |
|
||||
id: 'xxx1', |
|
||||
title: titles[0], |
|
||||
logo: avatars[0], |
|
||||
description: '那是一种内在的东西，他们到达不了，也无法触及的', |
|
||||
updatedAt: new Date(), |
|
||||
member: '科学搬砖组', |
|
||||
href: '', |
|
||||
memberLink: '', |
|
||||
}, |
|
||||
{ |
|
||||
id: 'xxx2', |
|
||||
title: titles[1], |
|
||||
logo: avatars[1], |
|
||||
description: '希望是一个好东西，也许是最好的，好东西是不会消亡的', |
|
||||
updatedAt: new Date('2017-07-24'), |
|
||||
member: '全组都是吴彦祖', |
|
||||
href: '', |
|
||||
memberLink: '', |
|
||||
}, |
|
||||
{ |
|
||||
id: 'xxx3', |
|
||||
title: titles[2], |
|
||||
logo: avatars[2], |
|
||||
description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆', |
|
||||
updatedAt: new Date(), |
|
||||
member: '中二少女团', |
|
||||
href: '', |
|
||||
memberLink: '', |
|
||||
}, |
|
||||
{ |
|
||||
id: 'xxx4', |
|
||||
title: titles[3], |
|
||||
logo: avatars[3], |
|
||||
description: '那时候我只会想自己想要什么，从不想自己拥有什么', |
|
||||
updatedAt: new Date('2017-07-23'), |
|
||||
member: '程序员日常', |
|
||||
href: '', |
|
||||
memberLink: '', |
|
||||
}, |
|
||||
{ |
|
||||
id: 'xxx5', |
|
||||
title: titles[4], |
|
||||
logo: avatars[4], |
|
||||
description: '凛冬将至', |
|
||||
updatedAt: new Date('2017-07-23'), |
|
||||
member: '高逼格设计天团', |
|
||||
href: '', |
|
||||
memberLink: '', |
|
||||
}, |
|
||||
{ |
|
||||
id: 'xxx6', |
|
||||
title: titles[5], |
|
||||
logo: avatars[5], |
|
||||
description: '生命就像一盒巧克力，结果往往出人意料', |
|
||||
updatedAt: new Date('2017-07-23'), |
|
||||
member: '骗你来学计算机', |
|
||||
href: '', |
|
||||
memberLink: '', |
|
||||
}, |
|
||||
], |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
const getActivities = (_: Request, res: Response) => { |
|
||||
res.json({ |
|
||||
data: [ |
|
||||
{ |
|
||||
id: 'trend-1', |
|
||||
updatedAt: new Date(), |
|
||||
user: { |
|
||||
name: '曲丽丽', |
|
||||
avatar: avatars2[0], |
|
||||
}, |
|
||||
group: { |
|
||||
name: '高逼格设计天团', |
|
||||
link: 'http://github.com/', |
|
||||
}, |
|
||||
project: { |
|
||||
name: '六月迭代', |
|
||||
link: 'http://github.com/', |
|
||||
}, |
|
||||
template: '在 @{group} 新建项目 @{project}', |
|
||||
}, |
|
||||
{ |
|
||||
id: 'trend-2', |
|
||||
updatedAt: new Date(), |
|
||||
user: { |
|
||||
name: '付小小', |
|
||||
avatar: avatars2[1], |
|
||||
}, |
|
||||
group: { |
|
||||
name: '高逼格设计天团', |
|
||||
link: 'http://github.com/', |
|
||||
}, |
|
||||
project: { |
|
||||
name: '六月迭代', |
|
||||
link: 'http://github.com/', |
|
||||
}, |
|
||||
template: '在 @{group} 新建项目 @{project}', |
|
||||
}, |
|
||||
{ |
|
||||
id: 'trend-3', |
|
||||
updatedAt: new Date(), |
|
||||
user: { |
|
||||
name: '林东东', |
|
||||
avatar: avatars2[2], |
|
||||
}, |
|
||||
group: { |
|
||||
name: '中二少女团', |
|
||||
link: 'http://github.com/', |
|
||||
}, |
|
||||
project: { |
|
||||
name: '六月迭代', |
|
||||
link: 'http://github.com/', |
|
||||
}, |
|
||||
template: '在 @{group} 新建项目 @{project}', |
|
||||
}, |
|
||||
{ |
|
||||
id: 'trend-4', |
|
||||
updatedAt: new Date(), |
|
||||
user: { |
|
||||
name: '周星星', |
|
||||
avatar: avatars2[4], |
|
||||
}, |
|
||||
project: { |
|
||||
name: '5 月日常迭代', |
|
||||
link: 'http://github.com/', |
|
||||
}, |
|
||||
template: '将 @{project} 更新至已发布状态', |
|
||||
}, |
|
||||
{ |
|
||||
id: 'trend-5', |
|
||||
updatedAt: new Date(), |
|
||||
user: { |
|
||||
name: '朱偏右', |
|
||||
avatar: avatars2[3], |
|
||||
}, |
|
||||
project: { |
|
||||
name: '工程效能', |
|
||||
link: 'http://github.com/', |
|
||||
}, |
|
||||
comment: { |
|
||||
name: '留言', |
|
||||
link: 'http://github.com/', |
|
||||
}, |
|
||||
template: '在 @{project} 发布了 @{comment}', |
|
||||
}, |
|
||||
{ |
|
||||
id: 'trend-6', |
|
||||
updatedAt: new Date(), |
|
||||
user: { |
|
||||
name: '乐哥', |
|
||||
avatar: avatars2[5], |
|
||||
}, |
|
||||
group: { |
|
||||
name: '程序员日常', |
|
||||
link: 'http://github.com/', |
|
||||
}, |
|
||||
project: { |
|
||||
name: '品牌迭代', |
|
||||
link: 'http://github.com/', |
|
||||
}, |
|
||||
template: '在 @{group} 新建项目 @{project}', |
|
||||
}, |
|
||||
], |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
const radarOriginData = [ |
|
||||
{ |
|
||||
name: '个人', |
|
||||
ref: 10, |
|
||||
koubei: 8, |
|
||||
output: 4, |
|
||||
contribute: 5, |
|
||||
hot: 7, |
|
||||
}, |
|
||||
{ |
|
||||
name: '团队', |
|
||||
ref: 3, |
|
||||
koubei: 9, |
|
||||
output: 6, |
|
||||
contribute: 3, |
|
||||
hot: 1, |
|
||||
}, |
|
||||
{ |
|
||||
name: '部门', |
|
||||
ref: 4, |
|
||||
koubei: 1, |
|
||||
output: 6, |
|
||||
contribute: 5, |
|
||||
hot: 7, |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
const radarData: any[] = []; |
|
||||
const radarTitleMap = { |
|
||||
ref: '引用', |
|
||||
koubei: '口碑', |
|
||||
output: '产量', |
|
||||
contribute: '贡献', |
|
||||
hot: '热度', |
|
||||
}; |
|
||||
radarOriginData.forEach((item) => { |
|
||||
Object.keys(item).forEach((key) => { |
|
||||
if (key !== 'name') { |
|
||||
radarData.push({ |
|
||||
name: item.name, |
|
||||
label: radarTitleMap[key as 'ref'], |
|
||||
value: item[key as 'ref'], |
|
||||
}); |
|
||||
} |
|
||||
}); |
|
||||
}); |
|
||||
|
|
||||
const getChartData = (_: Request, res: Response) => { |
|
||||
res.json({ |
|
||||
data: { |
|
||||
visitData, |
|
||||
visitData2, |
|
||||
salesData, |
|
||||
searchData, |
|
||||
offlineData, |
|
||||
offlineChartData, |
|
||||
salesTypeData, |
|
||||
salesTypeDataOnline, |
|
||||
salesTypeDataOffline, |
|
||||
radarData, |
|
||||
}, |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
export default { |
|
||||
'GET /api/project/notice': getNotice, |
|
||||
'GET /api/activities': getActivities, |
|
||||
'GET /api/fake_workplace_chart_data': getChartData, |
|
||||
}; |
|
||||
@ -1,16 +0,0 @@ |
|||||
@import '~antd/es/style/themes/default.less'; |
|
||||
|
|
||||
.linkGroup { |
|
||||
padding: 20px 0 8px 24px; |
|
||||
font-size: 0; |
|
||||
& > a { |
|
||||
display: inline-block; |
|
||||
width: 25%; |
|
||||
margin-bottom: 13px; |
|
||||
color: @text-color; |
|
||||
font-size: @font-size-base; |
|
||||
&:hover { |
|
||||
color: @primary-color; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
@ -1,21 +0,0 @@ |
|||||
import { createStyles } from 'antd-style'; |
|
||||
|
|
||||
const useStyles = createStyles(({ token }) => { |
|
||||
return { |
|
||||
linkGroup: { |
|
||||
fontSize: '0', |
|
||||
'& > a': { |
|
||||
display: 'inline-block', |
|
||||
width: '25%', |
|
||||
marginBottom: '13px', |
|
||||
color: token.colorText, |
|
||||
fontSize: token.fontSize, |
|
||||
'&:hover': { |
|
||||
color: token.colorPrimary, |
|
||||
}, |
|
||||
}, |
|
||||
}, |
|
||||
}; |
|
||||
}); |
|
||||
|
|
||||
export default useStyles; |
|
||||
@ -1,38 +0,0 @@ |
|||||
import { PlusOutlined } from '@ant-design/icons'; |
|
||||
import { Button } from 'antd'; |
|
||||
import React, { createElement } from 'react'; |
|
||||
import useStyles from './index.style'; |
|
||||
export type EditableLink = { |
|
||||
title: string; |
|
||||
href: string; |
|
||||
id?: string; |
|
||||
}; |
|
||||
type EditableLinkGroupProps = { |
|
||||
onAdd: () => void; |
|
||||
links: EditableLink[]; |
|
||||
linkElement: any; |
|
||||
}; |
|
||||
const EditableLinkGroup: React.FC<EditableLinkGroupProps> = (props) => { |
|
||||
const { styles } = useStyles(); |
|
||||
const { links = [], linkElement = 'a', onAdd = () => {} } = props; |
|
||||
return ( |
|
||||
<div className={styles.linkGroup}> |
|
||||
{links.map((link) => |
|
||||
createElement( |
|
||||
linkElement, |
|
||||
{ |
|
||||
key: `linkGroup-item-${link.id || link.title}`, |
|
||||
to: link.href, |
|
||||
href: link.href, |
|
||||
}, |
|
||||
link.title, |
|
||||
), |
|
||||
)} |
|
||||
<Button size="small" type="primary" ghost onClick={onAdd}> |
|
||||
<PlusOutlined /> 添加 |
|
||||
</Button> |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
|
|
||||
export default EditableLinkGroup; |
|
||||
@ -1,111 +0,0 @@ |
|||||
export interface DataItem { |
|
||||
[field: string]: string | number | number[] | null | undefined; |
|
||||
} |
|
||||
export interface TagType { |
|
||||
key: string; |
|
||||
label: string; |
|
||||
} |
|
||||
|
|
||||
export type SearchDataType = { |
|
||||
index: number; |
|
||||
keyword: string; |
|
||||
count: number; |
|
||||
range: number; |
|
||||
status: number; |
|
||||
}; |
|
||||
|
|
||||
export type OfflineDataType = { |
|
||||
name: string; |
|
||||
cvr: number; |
|
||||
}; |
|
||||
|
|
||||
export interface RadarData { |
|
||||
name: string; |
|
||||
label: string; |
|
||||
value: number; |
|
||||
} |
|
||||
|
|
||||
export type AnalysisData = { |
|
||||
visitData: VisitDataType[]; |
|
||||
visitData2: VisitDataType[]; |
|
||||
salesData: VisitDataType[]; |
|
||||
searchData: SearchDataType[]; |
|
||||
offlineData: OfflineDataType[]; |
|
||||
offlineChartData: OfflineChartData[]; |
|
||||
salesTypeData: VisitDataType[]; |
|
||||
salesTypeDataOnline: VisitDataType[]; |
|
||||
salesTypeDataOffline: VisitDataType[]; |
|
||||
radarData: DataItem[]; |
|
||||
}; |
|
||||
|
|
||||
export type GeographicType = { |
|
||||
province: { |
|
||||
label: string; |
|
||||
key: string; |
|
||||
}; |
|
||||
city: { |
|
||||
label: string; |
|
||||
key: string; |
|
||||
}; |
|
||||
}; |
|
||||
|
|
||||
export type NoticeType = { |
|
||||
id: string; |
|
||||
title: string; |
|
||||
logo: string; |
|
||||
description: string; |
|
||||
updatedAt: string; |
|
||||
member: string; |
|
||||
href: string; |
|
||||
memberLink: string; |
|
||||
}; |
|
||||
|
|
||||
export type CurrentUser = { |
|
||||
name: string; |
|
||||
avatar: string; |
|
||||
userid: string; |
|
||||
notice: NoticeType[]; |
|
||||
email: string; |
|
||||
signature: string; |
|
||||
title: string; |
|
||||
group: string; |
|
||||
tags: TagType[]; |
|
||||
notifyCount: number; |
|
||||
unreadCount: number; |
|
||||
country: string; |
|
||||
geographic: GeographicType; |
|
||||
address: string; |
|
||||
phone: string; |
|
||||
}; |
|
||||
|
|
||||
export type Member = { |
|
||||
avatar: string; |
|
||||
name: string; |
|
||||
id: string; |
|
||||
}; |
|
||||
|
|
||||
export type ActivitiesType = { |
|
||||
id: string; |
|
||||
updatedAt: string; |
|
||||
user: { |
|
||||
link?: string; |
|
||||
name: string; |
|
||||
avatar: string; |
|
||||
}; |
|
||||
group: { |
|
||||
name: string; |
|
||||
link: string; |
|
||||
}; |
|
||||
project: { |
|
||||
name: string; |
|
||||
link: string; |
|
||||
}; |
|
||||
|
|
||||
template: string; |
|
||||
}; |
|
||||
|
|
||||
export type RadarDataType = { |
|
||||
label: string; |
|
||||
name: string; |
|
||||
value: number; |
|
||||
}; |
|
||||
@ -1,286 +0,0 @@ |
|||||
import { Radar } from '@ant-design/plots'; |
|
||||
import { PageContainer } from '@ant-design/pro-components'; |
|
||||
import { Link, useRequest } from '@umijs/max'; |
|
||||
import { Avatar, Card, Col, List, Row, Skeleton, Statistic } from 'antd'; |
|
||||
import dayjs from 'dayjs'; |
|
||||
import relativeTime from 'dayjs/plugin/relativeTime'; |
|
||||
import type { FC } from 'react'; |
|
||||
import EditableLinkGroup from './components/EditableLinkGroup'; |
|
||||
import type { ActivitiesType, CurrentUser } from './data.d'; |
|
||||
import { fakeChartData, queryActivities, queryProjectNotice } from './service'; |
|
||||
import useStyles from './style.style'; |
|
||||
|
|
||||
dayjs.extend(relativeTime); |
|
||||
|
|
||||
const links = [ |
|
||||
{ |
|
||||
title: '操作一', |
|
||||
href: '', |
|
||||
}, |
|
||||
{ |
|
||||
title: '操作二', |
|
||||
href: '', |
|
||||
}, |
|
||||
{ |
|
||||
title: '操作三', |
|
||||
href: '', |
|
||||
}, |
|
||||
{ |
|
||||
title: '操作四', |
|
||||
href: '', |
|
||||
}, |
|
||||
{ |
|
||||
title: '操作五', |
|
||||
href: '', |
|
||||
}, |
|
||||
{ |
|
||||
title: '操作六', |
|
||||
href: '', |
|
||||
}, |
|
||||
]; |
|
||||
const PageHeaderContent: FC<{ |
|
||||
currentUser: Partial<CurrentUser>; |
|
||||
}> = ({ currentUser }) => { |
|
||||
const { styles } = useStyles(); |
|
||||
const loading = currentUser && Object.keys(currentUser).length; |
|
||||
if (!loading) { |
|
||||
return ( |
|
||||
<Skeleton |
|
||||
avatar |
|
||||
paragraph={{ |
|
||||
rows: 1, |
|
||||
}} |
|
||||
active |
|
||||
/> |
|
||||
); |
|
||||
} |
|
||||
return ( |
|
||||
<div className={styles.pageHeaderContent}> |
|
||||
<div className={styles.avatar}> |
|
||||
<Avatar size="large" src={currentUser.avatar} /> |
|
||||
</div> |
|
||||
<div className={styles.content}> |
|
||||
<div className={styles.contentTitle}> |
|
||||
早安， |
|
||||
{currentUser.name} |
|
||||
，祝你开心每一天！ |
|
||||
</div> |
|
||||
<div> |
|
||||
{currentUser.title} |{currentUser.group} |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
const ExtraContent: FC<Record<string, any>> = () => { |
|
||||
const { styles } = useStyles(); |
|
||||
return ( |
|
||||
<div className={styles.extraContent}> |
|
||||
<div className={styles.statItem}> |
|
||||
<Statistic title="项目数" value={56} /> |
|
||||
</div> |
|
||||
<div className={styles.statItem}> |
|
||||
<Statistic title="团队内排名" value={8} suffix="/ 24" /> |
|
||||
</div> |
|
||||
<div className={styles.statItem}> |
|
||||
<Statistic title="项目访问" value={2223} /> |
|
||||
</div> |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
const Workplace: FC = () => { |
|
||||
const { styles } = useStyles(); |
|
||||
const { loading: projectLoading, data: projectNotice = [] } = |
|
||||
useRequest(queryProjectNotice); |
|
||||
const { loading: activitiesLoading, data: activities = [] } = |
|
||||
useRequest(queryActivities); |
|
||||
const { data } = useRequest(fakeChartData); |
|
||||
const renderActivities = (item: ActivitiesType) => { |
|
||||
const events = item.template.split(/@\{([^{}]*)\}/gi).map((key) => { |
|
||||
if (item[key as keyof ActivitiesType]) { |
|
||||
const value = item[key as 'user']; |
|
||||
return ( |
|
||||
<a href={value?.link} key={value?.name}> |
|
||||
{value.name} |
|
||||
</a> |
|
||||
); |
|
||||
} |
|
||||
return key; |
|
||||
}); |
|
||||
return ( |
|
||||
<List.Item key={item.id}> |
|
||||
<List.Item.Meta |
|
||||
avatar={<Avatar src={item.user.avatar} />} |
|
||||
title={ |
|
||||
<span> |
|
||||
<a className={styles.username}>{item.user.name}</a> |
|
||||
|
|
||||
<span className={styles.event}>{events}</span> |
|
||||
</span> |
|
||||
} |
|
||||
description={ |
|
||||
<span className={styles.datetime} title={item.updatedAt}> |
|
||||
{dayjs(item.updatedAt).fromNow()} |
|
||||
</span> |
|
||||
} |
|
||||
/> |
|
||||
</List.Item> |
|
||||
); |
|
||||
}; |
|
||||
|
|
||||
return ( |
|
||||
<PageContainer |
|
||||
content={ |
|
||||
<PageHeaderContent |
|
||||
currentUser={{ |
|
||||
avatar: |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png', |
|
||||
name: '吴彦祖', |
|
||||
userid: '00000001', |
|
||||
email: 'antdesign@alipay.com', |
|
||||
signature: '海纳百川，有容乃大', |
|
||||
title: '交互专家', |
|
||||
group: '蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED', |
|
||||
}} |
|
||||
/> |
|
||||
} |
|
||||
extraContent={<ExtraContent />} |
|
||||
> |
|
||||
<Row gutter={24}> |
|
||||
<Col xl={16} lg={24} md={24} sm={24} xs={24}> |
|
||||
<Card |
|
||||
className={styles.projectList} |
|
||||
style={{ |
|
||||
marginBottom: 24, |
|
||||
}} |
|
||||
title="进行中的项目" |
|
||||
variant="borderless" |
|
||||
extra={<Link to="/">全部项目</Link>} |
|
||||
loading={projectLoading} |
|
||||
> |
|
||||
{projectNotice.map((item) => ( |
|
||||
<Card.Grid className={styles.projectGrid} key={item.id}> |
|
||||
<Card.Meta |
|
||||
title={ |
|
||||
<div className={styles.cardTitle}> |
|
||||
<Avatar size="small" src={item.logo} /> |
|
||||
<Link to={item.href || '/'}>{item.title}</Link> |
|
||||
</div> |
|
||||
} |
|
||||
description={item.description} |
|
||||
style={{ |
|
||||
width: '100%', |
|
||||
}} |
|
||||
/> |
|
||||
<div className={styles.projectItemContent}> |
|
||||
<Link to={item.memberLink || '/'}>{item.member || ''}</Link> |
|
||||
{item.updatedAt && ( |
|
||||
<span className={styles.datetime} title={item.updatedAt}> |
|
||||
{dayjs(item.updatedAt).fromNow()} |
|
||||
</span> |
|
||||
)} |
|
||||
</div> |
|
||||
</Card.Grid> |
|
||||
))} |
|
||||
</Card> |
|
||||
<Card |
|
||||
styles={{ |
|
||||
body: { |
|
||||
padding: activitiesLoading ? 16 : 0, |
|
||||
}, |
|
||||
}} |
|
||||
variant="borderless" |
|
||||
className={styles.activeCard} |
|
||||
title="动态" |
|
||||
loading={activitiesLoading} |
|
||||
> |
|
||||
<List<ActivitiesType> |
|
||||
loading={activitiesLoading} |
|
||||
renderItem={(item) => renderActivities(item)} |
|
||||
dataSource={activities} |
|
||||
className={styles.activitiesList} |
|
||||
size="large" |
|
||||
/> |
|
||||
</Card> |
|
||||
</Col> |
|
||||
<Col xl={8} lg={24} md={24} sm={24} xs={24}> |
|
||||
<Card |
|
||||
style={{ |
|
||||
marginBottom: 24, |
|
||||
}} |
|
||||
title="快速开始 / 便捷导航" |
|
||||
variant="borderless" |
|
||||
> |
|
||||
<EditableLinkGroup |
|
||||
onAdd={() => {}} |
|
||||
links={links} |
|
||||
linkElement={Link} |
|
||||
/> |
|
||||
</Card> |
|
||||
<Card |
|
||||
style={{ |
|
||||
marginBottom: 24, |
|
||||
}} |
|
||||
variant="borderless" |
|
||||
title="XX 指数" |
|
||||
loading={data?.radarData?.length === 0} |
|
||||
> |
|
||||
<Radar |
|
||||
height={343} |
|
||||
data={data?.radarData || []} |
|
||||
xField="label" |
|
||||
colorField="name" |
|
||||
yField="value" |
|
||||
shapeField="smooth" |
|
||||
area={{ |
|
||||
style: { |
|
||||
fillOpacity: 0.4, |
|
||||
}, |
|
||||
}} |
|
||||
axis={{ |
|
||||
y: { |
|
||||
gridStrokeOpacity: 0.5, |
|
||||
}, |
|
||||
}} |
|
||||
legend={{ |
|
||||
color: { |
|
||||
position: 'bottom', |
|
||||
layout: { justifyContent: 'center' }, |
|
||||
}, |
|
||||
}} |
|
||||
/> |
|
||||
</Card> |
|
||||
<Card |
|
||||
styles={{ |
|
||||
body: { |
|
||||
paddingTop: 12, |
|
||||
paddingBottom: 12, |
|
||||
}, |
|
||||
}} |
|
||||
variant="borderless" |
|
||||
title="团队" |
|
||||
loading={projectLoading} |
|
||||
> |
|
||||
<div className={styles.members}> |
|
||||
<Row gutter={48}> |
|
||||
{projectNotice.map((item) => { |
|
||||
return ( |
|
||||
<Col span={12} key={`members-item-${item.id}`}> |
|
||||
<a> |
|
||||
<Avatar src={item.logo} size="small" /> |
|
||||
<span className={styles.member}> |
|
||||
{item.member.substring(0, 3)} |
|
||||
</span> |
|
||||
</a> |
|
||||
</Col> |
|
||||
); |
|
||||
})} |
|
||||
</Row> |
|
||||
</div> |
|
||||
</Card> |
|
||||
</Col> |
|
||||
</Row> |
|
||||
</PageContainer> |
|
||||
); |
|
||||
}; |
|
||||
export default Workplace; |
|
||||
@ -1,14 +0,0 @@ |
|||||
import { request } from '@umijs/max'; |
|
||||
import type { ActivitiesType, AnalysisData, NoticeType } from './data'; |
|
||||
|
|
||||
export async function queryProjectNotice(): Promise<{ data: NoticeType[] }> { |
|
||||
return request('/api/project/notice'); |
|
||||
} |
|
||||
|
|
||||
export async function queryActivities(): Promise<{ data: ActivitiesType[] }> { |
|
||||
return request('/api/activities'); |
|
||||
} |
|
||||
|
|
||||
export async function fakeChartData(): Promise<{ data: AnalysisData }> { |
|
||||
return request('/api/fake_workplace_chart_data'); |
|
||||
} |
|
||||
@ -1,251 +0,0 @@ |
|||||
@import '~antd/es/style/themes/default.less'; |
|
||||
|
|
||||
.textOverflow() { |
|
||||
overflow: hidden; |
|
||||
white-space: nowrap; |
|
||||
text-overflow: ellipsis; |
|
||||
word-break: break-all; |
|
||||
} |
|
||||
|
|
||||
// mixins for clearfix |
|
||||
// ------------------------ |
|
||||
.clearfix() { |
|
||||
zoom: 1; |
|
||||
&::before, |
|
||||
&::after { |
|
||||
display: table; |
|
||||
content: ' '; |
|
||||
} |
|
||||
&::after { |
|
||||
clear: both; |
|
||||
height: 0; |
|
||||
font-size: 0; |
|
||||
visibility: hidden; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.activitiesList { |
|
||||
padding: 0 24px 8px 24px; |
|
||||
|
|
||||
.username { |
|
||||
color: @text-color; |
|
||||
} |
|
||||
.event { |
|
||||
font-weight: normal; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.pageHeaderContent { |
|
||||
display: flex; |
|
||||
.avatar { |
|
||||
flex: 0 1 72px; |
|
||||
& > span { |
|
||||
display: block; |
|
||||
width: 72px; |
|
||||
height: 72px; |
|
||||
border-radius: 72px; |
|
||||
} |
|
||||
} |
|
||||
.content { |
|
||||
position: relative; |
|
||||
top: 4px; |
|
||||
flex: 1 1 auto; |
|
||||
margin-left: 24px; |
|
||||
color: @text-color-secondary; |
|
||||
line-height: 22px; |
|
||||
.contentTitle { |
|
||||
margin-bottom: 12px; |
|
||||
color: @heading-color; |
|
||||
font-weight: 500; |
|
||||
font-size: 20px; |
|
||||
line-height: 28px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.extraContent { |
|
||||
.clearfix(); |
|
||||
|
|
||||
float: right; |
|
||||
white-space: nowrap; |
|
||||
.statItem { |
|
||||
position: relative; |
|
||||
display: inline-block; |
|
||||
padding: 0 32px; |
|
||||
> p:first-child { |
|
||||
margin-bottom: 4px; |
|
||||
color: @text-color-secondary; |
|
||||
font-size: @font-size-base; |
|
||||
line-height: 22px; |
|
||||
} |
|
||||
> p { |
|
||||
margin: 0; |
|
||||
color: @heading-color; |
|
||||
font-size: 30px; |
|
||||
line-height: 38px; |
|
||||
> span { |
|
||||
color: @text-color-secondary; |
|
||||
font-size: 20px; |
|
||||
} |
|
||||
} |
|
||||
&::after { |
|
||||
position: absolute; |
|
||||
top: 8px; |
|
||||
right: 0; |
|
||||
width: 1px; |
|
||||
height: 40px; |
|
||||
background-color: @border-color-split; |
|
||||
content: ''; |
|
||||
} |
|
||||
&:last-child { |
|
||||
padding-right: 0; |
|
||||
&::after { |
|
||||
display: none; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.members { |
|
||||
a { |
|
||||
display: block; |
|
||||
height: 24px; |
|
||||
margin: 12px 0; |
|
||||
color: @text-color; |
|
||||
transition: all 0.3s; |
|
||||
.textOverflow(); |
|
||||
.member { |
|
||||
margin-left: 12px; |
|
||||
font-size: @font-size-base; |
|
||||
line-height: 24px; |
|
||||
vertical-align: top; |
|
||||
} |
|
||||
&:hover { |
|
||||
color: @primary-color; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.projectList { |
|
||||
:global { |
|
||||
.ant-card-meta-description { |
|
||||
height: 44px; |
|
||||
overflow: hidden; |
|
||||
color: @text-color-secondary; |
|
||||
line-height: 22px; |
|
||||
} |
|
||||
} |
|
||||
.cardTitle { |
|
||||
font-size: 0; |
|
||||
a { |
|
||||
display: inline-block; |
|
||||
height: 24px; |
|
||||
margin-left: 12px; |
|
||||
color: @heading-color; |
|
||||
font-size: @font-size-base; |
|
||||
line-height: 24px; |
|
||||
vertical-align: top; |
|
||||
&:hover { |
|
||||
color: @primary-color; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.projectGrid { |
|
||||
width: 33.33%; |
|
||||
} |
|
||||
.projectItemContent { |
|
||||
display: flex; |
|
||||
height: 20px; |
|
||||
margin-top: 8px; |
|
||||
overflow: hidden; |
|
||||
font-size: 12px; |
|
||||
line-height: 20px; |
|
||||
.textOverflow(); |
|
||||
a { |
|
||||
display: inline-block; |
|
||||
flex: 1 1 0; |
|
||||
color: @text-color-secondary; |
|
||||
.textOverflow(); |
|
||||
&:hover { |
|
||||
color: @primary-color; |
|
||||
} |
|
||||
} |
|
||||
.datetime { |
|
||||
flex: 0 0 auto; |
|
||||
float: right; |
|
||||
color: @disabled-color; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.datetime { |
|
||||
color: @disabled-color; |
|
||||
} |
|
||||
|
|
||||
@media screen and (max-width: @screen-xl) and (min-width: @screen-lg) { |
|
||||
.activeCard { |
|
||||
margin-bottom: 24px; |
|
||||
} |
|
||||
.members { |
|
||||
margin-bottom: 0; |
|
||||
} |
|
||||
.extraContent { |
|
||||
margin-left: -44px; |
|
||||
.statItem { |
|
||||
padding: 0 16px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@media screen and (max-width: @screen-lg) { |
|
||||
.activeCard { |
|
||||
margin-bottom: 24px; |
|
||||
} |
|
||||
.members { |
|
||||
margin-bottom: 0; |
|
||||
} |
|
||||
.extraContent { |
|
||||
float: none; |
|
||||
margin-right: 0; |
|
||||
.statItem { |
|
||||
padding: 0 16px; |
|
||||
text-align: left; |
|
||||
&::after { |
|
||||
display: none; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@media screen and (max-width: @screen-md) { |
|
||||
.extraContent { |
|
||||
margin-left: -16px; |
|
||||
} |
|
||||
.projectList { |
|
||||
.projectGrid { |
|
||||
width: 50%; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@media screen and (max-width: @screen-sm) { |
|
||||
.pageHeaderContent { |
|
||||
display: block; |
|
||||
.content { |
|
||||
margin-left: 0; |
|
||||
} |
|
||||
} |
|
||||
.extraContent { |
|
||||
.statItem { |
|
||||
float: none; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@media screen and (max-width: @screen-xs) { |
|
||||
.projectList { |
|
||||
.projectGrid { |
|
||||
width: 100%; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
@ -1,215 +0,0 @@ |
|||||
import { createStyles } from 'antd-style'; |
|
||||
|
|
||||
const useStyles = createStyles(({ token }) => { |
|
||||
return { |
|
||||
activitiesList: { |
|
||||
padding: 0, |
|
||||
}, |
|
||||
username: { |
|
||||
color: token.colorText, |
|
||||
}, |
|
||||
event: { |
|
||||
fontWeight: 'normal', |
|
||||
}, |
|
||||
pageHeaderContent: { |
|
||||
display: 'flex', |
|
||||
[`@media screen and (max-width: ${token.screenSM}px)`]: { |
|
||||
display: 'block', |
|
||||
}, |
|
||||
}, |
|
||||
avatar: { |
|
||||
flex: '0 1 72px', |
|
||||
'& > span': { |
|
||||
display: 'block', |
|
||||
width: '72px', |
|
||||
height: '72px', |
|
||||
borderRadius: '72px', |
|
||||
}, |
|
||||
}, |
|
||||
content: { |
|
||||
position: 'relative', |
|
||||
top: '4px', |
|
||||
flex: '1 1 auto', |
|
||||
marginLeft: '24px', |
|
||||
color: token.colorTextSecondary, |
|
||||
lineHeight: '22px', |
|
||||
[`@media screen and (max-width: ${token.screenSM}px)`]: { |
|
||||
marginLeft: '0', |
|
||||
}, |
|
||||
}, |
|
||||
contentTitle: { |
|
||||
marginBottom: '12px', |
|
||||
color: token.colorTextHeading, |
|
||||
fontWeight: '500', |
|
||||
fontSize: '20px', |
|
||||
lineHeight: '28px', |
|
||||
}, |
|
||||
extraContent: { |
|
||||
zoom: '1', |
|
||||
'&::before, &::after': { display: 'table', content: "' '" }, |
|
||||
'&::after': { |
|
||||
clear: 'both', |
|
||||
height: '0', |
|
||||
fontSize: '0', |
|
||||
visibility: 'hidden', |
|
||||
}, |
|
||||
float: 'right', |
|
||||
whiteSpace: 'nowrap', |
|
||||
[`@media screen and (max-width: ${token.screenXL}px) and (min-width: @screen-lg)`]: |
|
||||
{ |
|
||||
marginLeft: '-44px', |
|
||||
}, |
|
||||
[`@media screen and (max-width: ${token.screenLG}px)`]: { |
|
||||
float: 'none', |
|
||||
marginRight: '0', |
|
||||
}, |
|
||||
[`@media screen and (max-width: ${token.screenMD}px)`]: { |
|
||||
marginLeft: '-16px', |
|
||||
}, |
|
||||
}, |
|
||||
statItem: { |
|
||||
position: 'relative', |
|
||||
display: 'inline-block', |
|
||||
padding: '0 32px', |
|
||||
'> p:first-child': { |
|
||||
marginBottom: '4px', |
|
||||
color: token.colorTextSecondary, |
|
||||
fontSize: token.fontSize, |
|
||||
lineHeight: '22px', |
|
||||
}, |
|
||||
'> p': { |
|
||||
margin: '0', |
|
||||
color: token.colorTextHeading, |
|
||||
fontSize: '30px', |
|
||||
lineHeight: '38px', |
|
||||
'> span': { |
|
||||
color: token.colorTextSecondary, |
|
||||
fontSize: '20px', |
|
||||
}, |
|
||||
}, |
|
||||
'&::after': { |
|
||||
position: 'absolute', |
|
||||
top: '8px', |
|
||||
right: '0', |
|
||||
width: '1px', |
|
||||
height: '40px', |
|
||||
backgroundColor: token.colorSplit, |
|
||||
content: "''", |
|
||||
}, |
|
||||
'&:last-child': { |
|
||||
paddingRight: '0', |
|
||||
'&::after': { |
|
||||
display: 'none', |
|
||||
}, |
|
||||
}, |
|
||||
[`@media screen and (max-width: ${token.screenXL}px) and (min-width: @screen-lg)`]: |
|
||||
{ |
|
||||
padding: '0 16px', |
|
||||
}, |
|
||||
[`@media screen and (max-width: ${token.screenLG}px)`]: { |
|
||||
padding: '0 16px', |
|
||||
textAlign: 'left', |
|
||||
'&::after': { |
|
||||
display: 'none', |
|
||||
}, |
|
||||
}, |
|
||||
[`@media screen and (max-width: ${token.screenSM}px)`]: { float: 'none' }, |
|
||||
}, |
|
||||
members: { |
|
||||
a: { |
|
||||
display: 'block', |
|
||||
height: '24px', |
|
||||
margin: '12px 0', |
|
||||
color: token.colorText, |
|
||||
transition: 'all 0.3s', |
|
||||
overflow: 'hidden', |
|
||||
whiteSpace: 'nowrap', |
|
||||
textOverflow: 'ellipsis', |
|
||||
wordBreak: 'break-all', |
|
||||
'&:hover': { |
|
||||
color: token.colorPrimary, |
|
||||
}, |
|
||||
}, |
|
||||
[`@media screen and (max-width: ${token.screenXL}px) and (min-width: @screen-lg)`]: |
|
||||
{ |
|
||||
marginBottom: '0', |
|
||||
}, |
|
||||
[`@media screen and (max-width: ${token.screenLG}px)`]: { |
|
||||
marginBottom: '0', |
|
||||
}, |
|
||||
}, |
|
||||
member: { |
|
||||
marginLeft: '12px', |
|
||||
fontSize: token.fontSize, |
|
||||
lineHeight: '24px', |
|
||||
verticalAlign: 'top', |
|
||||
}, |
|
||||
projectList: { |
|
||||
'.ant-card-meta-description': { |
|
||||
height: '44px', |
|
||||
overflow: 'hidden', |
|
||||
color: token.colorTextSecondary, |
|
||||
lineHeight: '22px', |
|
||||
}, |
|
||||
}, |
|
||||
cardTitle: { |
|
||||
fontSize: '0', |
|
||||
a: { |
|
||||
display: 'inline-block', |
|
||||
height: '24px', |
|
||||
marginLeft: '12px', |
|
||||
color: token.colorTextHeading, |
|
||||
fontSize: token.fontSize, |
|
||||
lineHeight: '24px', |
|
||||
verticalAlign: 'top', |
|
||||
'&:hover': { |
|
||||
color: token.colorPrimary, |
|
||||
}, |
|
||||
}, |
|
||||
}, |
|
||||
projectGrid: { |
|
||||
width: '33.33%', |
|
||||
[`@media screen and (max-width: ${token.screenMD}px)`]: { width: '50%' }, |
|
||||
[`@media screen and (max-width: ${token.screenXS}px)`]: { width: '100%' }, |
|
||||
}, |
|
||||
projectItemContent: { |
|
||||
display: 'flex', |
|
||||
height: '20px', |
|
||||
marginTop: '8px', |
|
||||
overflow: 'hidden', |
|
||||
fontSize: '12px', |
|
||||
gap: 'epx', |
|
||||
lineHeight: '20px', |
|
||||
whiteSpace: 'nowrap', |
|
||||
textOverflow: 'ellipsis', |
|
||||
wordBreak: 'break-all', |
|
||||
a: { |
|
||||
display: 'inline-block', |
|
||||
flex: '1 1 0', |
|
||||
color: token.colorTextSecondary, |
|
||||
overflow: 'hidden', |
|
||||
whiteSpace: 'nowrap', |
|
||||
textOverflow: 'ellipsis', |
|
||||
wordBreak: 'break-all', |
|
||||
'&:hover': { |
|
||||
color: token.colorPrimary, |
|
||||
}, |
|
||||
}, |
|
||||
}, |
|
||||
datetime: { |
|
||||
flex: '0 0 auto', |
|
||||
color: token.colorTextDisabled, |
|
||||
}, |
|
||||
activeCard: { |
|
||||
[`@media screen and (max-width: ${token.screenXL}px) and (min-width: @screen-lg)`]: |
|
||||
{ |
|
||||
marginBottom: '24px', |
|
||||
}, |
|
||||
[`@media screen and (max-width: ${token.screenLG}px)`]: { |
|
||||
marginBottom: '24px', |
|
||||
}, |
|
||||
}, |
|
||||
}; |
|
||||
}); |
|
||||
|
|
||||
export default useStyles; |
|
||||
@ -1,17 +0,0 @@ |
|||||
import { Link } from '@umijs/max'; |
|
||||
import { Button, Card, Result } from 'antd'; |
|
||||
|
|
||||
export default () => ( |
|
||||
<Card variant="borderless"> |
|
||||
<Result |
|
||||
status="403" |
|
||||
title="403" |
|
||||
subTitle="Sorry, you are not authorized to access this page." |
|
||||
extra={ |
|
||||
<Link to="/"> |
|
||||
<Button type="primary">Back to home</Button> |
|
||||
</Link> |
|
||||
} |
|
||||
/> |
|
||||
</Card> |
|
||||
); |
|
||||
@ -1,17 +0,0 @@ |
|||||
import { Link } from '@umijs/max'; |
|
||||
import { Button, Card, Result } from 'antd'; |
|
||||
|
|
||||
export default () => ( |
|
||||
<Card variant="borderless"> |
|
||||
<Result |
|
||||
status="404" |
|
||||
title="404" |
|
||||
subTitle="Sorry, the page you visited does not exist." |
|
||||
extra={ |
|
||||
<Link to="/"> |
|
||||
<Button type="primary">Back Home</Button> |
|
||||
</Link> |
|
||||
} |
|
||||
/> |
|
||||
</Card> |
|
||||
); |
|
||||
@ -1,17 +0,0 @@ |
|||||
import { Link } from '@umijs/max'; |
|
||||
import { Button, Card, Result } from 'antd'; |
|
||||
|
|
||||
export default () => ( |
|
||||
<Card variant="borderless"> |
|
||||
<Result |
|
||||
status="500" |
|
||||
title="500" |
|
||||
subTitle="Sorry, something went wrong." |
|
||||
extra={ |
|
||||
<Link to="/"> |
|
||||
<Button type="primary">Back Home</Button> |
|
||||
</Link> |
|
||||
} |
|
||||
/> |
|
||||
</Card> |
|
||||
); |
|
||||
@ -1,7 +0,0 @@ |
|||||
import type { Request, Response } from 'express'; |
|
||||
|
|
||||
export default { |
|
||||
'POST /api/advancedForm': (_: Request, res: Response) => { |
|
||||
res.send({ data: { message: 'Ok' } }); |
|
||||
}, |
|
||||
}; |
|
||||
@ -1,268 +0,0 @@ |
|||||
import { PlusOutlined } from '@ant-design/icons'; |
|
||||
import { Button, Divider, Input, message, Popconfirm, Table } from 'antd'; |
|
||||
import type { FC } from 'react'; |
|
||||
import React, { useState } from 'react'; |
|
||||
import useStyles from '../style.style'; |
|
||||
|
|
||||
type TableFormDateType = { |
|
||||
key: string; |
|
||||
workId?: string; |
|
||||
name?: string; |
|
||||
department?: string; |
|
||||
isNew?: boolean; |
|
||||
editable?: boolean; |
|
||||
}; |
|
||||
type TableFormProps = { |
|
||||
value?: TableFormDateType[]; |
|
||||
onChange?: (value: TableFormDateType[]) => void; |
|
||||
}; |
|
||||
const TableForm: FC<TableFormProps> = ({ value, onChange }) => { |
|
||||
const { styles } = useStyles(); |
|
||||
const [clickedCancel, setClickedCancel] = useState(false); |
|
||||
const [loading, setLoading] = useState(false); |
|
||||
const [index, setIndex] = useState(0); |
|
||||
const [cacheOriginData, setCacheOriginData] = useState<Record<string, any>>( |
|
||||
{}, |
|
||||
); |
|
||||
const [data, setData] = useState(value); |
|
||||
const getRowByKey = (key: string, newData?: TableFormDateType[]) => |
|
||||
(newData || data)?.filter((item) => item.key === key)[0]; |
|
||||
const toggleEditable = ( |
|
||||
e: React.MouseEvent | React.KeyboardEvent, |
|
||||
key: string, |
|
||||
) => { |
|
||||
e.preventDefault(); |
|
||||
const newData = data?.map((item) => ({ |
|
||||
...item, |
|
||||
})); |
|
||||
const target = getRowByKey(key, newData); |
|
||||
if (target) { |
|
||||
// 进入编辑状态时保存原始数据
|
|
||||
if (!target.editable) { |
|
||||
cacheOriginData[key] = { |
|
||||
...target, |
|
||||
}; |
|
||||
setCacheOriginData(cacheOriginData); |
|
||||
} |
|
||||
target.editable = !target.editable; |
|
||||
setData(newData); |
|
||||
} |
|
||||
}; |
|
||||
const newMember = () => { |
|
||||
const newData = |
|
||||
data?.map((item) => ({ |
|
||||
...item, |
|
||||
})) || []; |
|
||||
newData.push({ |
|
||||
key: `NEW_TEMP_ID_${index}`, |
|
||||
workId: '', |
|
||||
name: '', |
|
||||
department: '', |
|
||||
editable: true, |
|
||||
isNew: true, |
|
||||
}); |
|
||||
setIndex(index + 1); |
|
||||
setData(newData); |
|
||||
}; |
|
||||
const remove = (key: string) => { |
|
||||
const newData = data?.filter( |
|
||||
(item) => item.key !== key, |
|
||||
) as TableFormDateType[]; |
|
||||
setData(newData); |
|
||||
if (onChange) { |
|
||||
onChange(newData); |
|
||||
} |
|
||||
}; |
|
||||
const handleFieldChange = ( |
|
||||
e: React.ChangeEvent<HTMLInputElement>, |
|
||||
fieldName: keyof TableFormDateType, |
|
||||
key: string, |
|
||||
) => { |
|
||||
const newData = [...(data as TableFormDateType[])]; |
|
||||
const target = getRowByKey(key, newData); |
|
||||
if (target?.[fieldName]) { |
|
||||
target[fieldName as 'key'] = e.target.value; |
|
||||
setData(newData); |
|
||||
} |
|
||||
}; |
|
||||
const saveRow = (e: React.MouseEvent | React.KeyboardEvent, key: string) => { |
|
||||
e.persist(); |
|
||||
setLoading(true); |
|
||||
setTimeout(() => { |
|
||||
if (clickedCancel) { |
|
||||
setClickedCancel(false); |
|
||||
return; |
|
||||
} |
|
||||
const target = getRowByKey(key) || ({} as any); |
|
||||
if (!target.workId || !target.name || !target.department) { |
|
||||
message.error('请填写完整成员信息。'); |
|
||||
(e.target as HTMLInputElement).focus(); |
|
||||
setLoading(false); |
|
||||
return; |
|
||||
} |
|
||||
delete target.isNew; |
|
||||
toggleEditable(e, key); |
|
||||
if (onChange) { |
|
||||
onChange(data as TableFormDateType[]); |
|
||||
} |
|
||||
setLoading(false); |
|
||||
}, 500); |
|
||||
}; |
|
||||
const handleKeyPress = (e: React.KeyboardEvent, key: string) => { |
|
||||
if (e.key === 'Enter') { |
|
||||
saveRow(e, key); |
|
||||
} |
|
||||
}; |
|
||||
const cancel = (e: React.MouseEvent, key: string) => { |
|
||||
setClickedCancel(true); |
|
||||
e.preventDefault(); |
|
||||
const newData = [...(data as TableFormDateType[])]; |
|
||||
// 编辑前的原始数据
|
|
||||
let cacheData = []; |
|
||||
cacheData = newData.map((item) => { |
|
||||
if (item.key === key) { |
|
||||
if (cacheOriginData[key]) { |
|
||||
const originItem = { |
|
||||
...item, |
|
||||
...cacheOriginData[key], |
|
||||
editable: false, |
|
||||
}; |
|
||||
delete cacheOriginData[key]; |
|
||||
setCacheOriginData(cacheOriginData); |
|
||||
return originItem; |
|
||||
} |
|
||||
} |
|
||||
return item; |
|
||||
}); |
|
||||
setData(cacheData); |
|
||||
setClickedCancel(false); |
|
||||
}; |
|
||||
const columns = [ |
|
||||
{ |
|
||||
title: '成员姓名', |
|
||||
dataIndex: 'name', |
|
||||
key: 'name', |
|
||||
width: '20%', |
|
||||
render: (text: string, record: TableFormDateType) => { |
|
||||
if (record.editable) { |
|
||||
return ( |
|
||||
<Input |
|
||||
value={text} |
|
||||
autoFocus |
|
||||
onChange={(e) => handleFieldChange(e, 'name', record.key)} |
|
||||
onKeyPress={(e) => handleKeyPress(e, record.key)} |
|
||||
placeholder="成员姓名" |
|
||||
/> |
|
||||
); |
|
||||
} |
|
||||
return text; |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
title: '工号', |
|
||||
dataIndex: 'workId', |
|
||||
key: 'workId', |
|
||||
width: '20%', |
|
||||
render: (text: string, record: TableFormDateType) => { |
|
||||
if (record.editable) { |
|
||||
return ( |
|
||||
<Input |
|
||||
value={text} |
|
||||
onChange={(e) => handleFieldChange(e, 'workId', record.key)} |
|
||||
onKeyPress={(e) => handleKeyPress(e, record.key)} |
|
||||
placeholder="工号" |
|
||||
/> |
|
||||
); |
|
||||
} |
|
||||
return text; |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
title: '所属部门', |
|
||||
dataIndex: 'department', |
|
||||
key: 'department', |
|
||||
width: '40%', |
|
||||
render: (text: string, record: TableFormDateType) => { |
|
||||
if (record.editable) { |
|
||||
return ( |
|
||||
<Input |
|
||||
value={text} |
|
||||
onChange={(e) => handleFieldChange(e, 'department', record.key)} |
|
||||
onKeyPress={(e) => handleKeyPress(e, record.key)} |
|
||||
placeholder="所属部门" |
|
||||
/> |
|
||||
); |
|
||||
} |
|
||||
return text; |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
title: '操作', |
|
||||
key: 'action', |
|
||||
render: (_text: string, record: TableFormDateType) => { |
|
||||
if (!!record.editable && loading) { |
|
||||
return null; |
|
||||
} |
|
||||
if (record.editable) { |
|
||||
if (record.isNew) { |
|
||||
return ( |
|
||||
<span> |
|
||||
<a onClick={(e) => saveRow(e, record.key)}>添加</a> |
|
||||
<Divider type="vertical" /> |
|
||||
<Popconfirm |
|
||||
title="是否要删除此行？" |
|
||||
onConfirm={() => remove(record.key)} |
|
||||
> |
|
||||
<a>删除</a> |
|
||||
</Popconfirm> |
|
||||
</span> |
|
||||
); |
|
||||
} |
|
||||
return ( |
|
||||
<span> |
|
||||
<a onClick={(e) => saveRow(e, record.key)}>保存</a> |
|
||||
<Divider type="vertical" /> |
|
||||
<a onClick={(e) => cancel(e, record.key)}>取消</a> |
|
||||
</span> |
|
||||
); |
|
||||
} |
|
||||
return ( |
|
||||
<span> |
|
||||
<a onClick={(e) => toggleEditable(e, record.key)}>编辑</a> |
|
||||
<Divider type="vertical" /> |
|
||||
<Popconfirm |
|
||||
title="是否要删除此行？" |
|
||||
onConfirm={() => remove(record.key)} |
|
||||
> |
|
||||
<a>删除</a> |
|
||||
</Popconfirm> |
|
||||
</span> |
|
||||
); |
|
||||
}, |
|
||||
}, |
|
||||
]; |
|
||||
return ( |
|
||||
<> |
|
||||
<Table<TableFormDateType> |
|
||||
loading={loading} |
|
||||
columns={columns} |
|
||||
dataSource={data} |
|
||||
pagination={false} |
|
||||
rowClassName={(record) => (record.editable ? styles.editable : '')} |
|
||||
/> |
|
||||
<Button |
|
||||
style={{ |
|
||||
width: '100%', |
|
||||
marginTop: 16, |
|
||||
marginBottom: 8, |
|
||||
}} |
|
||||
type="dashed" |
|
||||
onClick={newMember} |
|
||||
> |
|
||||
<PlusOutlined /> |
|
||||
新增成员 |
|
||||
</Button> |
|
||||
</> |
|
||||
); |
|
||||
}; |
|
||||
export default TableForm; |
|
||||
@ -1,8 +0,0 @@ |
|||||
import { request } from '@umijs/max'; |
|
||||
|
|
||||
export async function fakeSubmitForm(params: any) { |
|
||||
return request('/api/advancedForm', { |
|
||||
method: 'POST', |
|
||||
data: params, |
|
||||
}); |
|
||||
} |
|
||||
@ -1,65 +0,0 @@ |
|||||
@import '~antd/es/style/themes/default.less'; |
|
||||
|
|
||||
.card { |
|
||||
margin-bottom: 24px; |
|
||||
|
|
||||
:global { |
|
||||
.ant-legacy-form-item .ant-legacy-form-item-control-wrapper { |
|
||||
width: 100%; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.errorIcon { |
|
||||
margin-right: 24px; |
|
||||
color: @error-color; |
|
||||
cursor: pointer; |
|
||||
|
|
||||
span.anticon { |
|
||||
margin-right: 4px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.errorPopover { |
|
||||
:global { |
|
||||
.ant-popover-inner-content { |
|
||||
min-width: 256px; |
|
||||
max-height: 290px; |
|
||||
padding: 0; |
|
||||
overflow: auto; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.errorListItem { |
|
||||
padding: 8px 16px; |
|
||||
list-style: none; |
|
||||
border-bottom: 1px solid @border-color-split; |
|
||||
cursor: pointer; |
|
||||
transition: all 0.3s; |
|
||||
&:hover { |
|
||||
background: @item-active-bg; |
|
||||
} |
|
||||
&:last-child { |
|
||||
border: 0; |
|
||||
} |
|
||||
.errorIcon { |
|
||||
float: left; |
|
||||
margin-top: 4px; |
|
||||
margin-right: 12px; |
|
||||
padding-bottom: 22px; |
|
||||
color: @error-color; |
|
||||
} |
|
||||
.errorField { |
|
||||
margin-top: 2px; |
|
||||
color: @text-color-secondary; |
|
||||
font-size: 12px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.editable { |
|
||||
td { |
|
||||
padding-top: 13px !important; |
|
||||
padding-bottom: 12.5px !important; |
|
||||
} |
|
||||
} |
|
||||
@ -1,48 +0,0 @@ |
|||||
import { createStyles } from 'antd-style'; |
|
||||
|
|
||||
const useStyles = createStyles(({ token }) => { |
|
||||
return { |
|
||||
card: { |
|
||||
marginBottom: '24px', |
|
||||
'.ant-legacy-form-item .ant-legacy-form-item-control-wrapper': { |
|
||||
width: '100%', |
|
||||
}, |
|
||||
}, |
|
||||
errorIcon: { |
|
||||
marginRight: '12px', |
|
||||
color: token.colorError, |
|
||||
cursor: 'pointer', |
|
||||
'span.anticon': { marginRight: '4px' }, |
|
||||
float: 'left', |
|
||||
marginTop: '4px', |
|
||||
paddingBottom: '22px', |
|
||||
}, |
|
||||
errorPopover: { |
|
||||
'.ant-popover-inner-content': { |
|
||||
minWidth: '256px', |
|
||||
maxHeight: '290px', |
|
||||
padding: '0', |
|
||||
overflow: 'auto', |
|
||||
}, |
|
||||
}, |
|
||||
errorListItem: { |
|
||||
padding: '8px 16px', |
|
||||
listStyle: 'none', |
|
||||
borderBottom: `1px solid ${token.colorSplit}`, |
|
||||
cursor: 'pointer', |
|
||||
transition: 'all 0.3s', |
|
||||
'&:hover': { background: token.colorBgTextActive }, |
|
||||
'&:last-child': { border: '0' }, |
|
||||
}, |
|
||||
errorField: { |
|
||||
marginTop: '2px', |
|
||||
color: token.colorTextSecondary, |
|
||||
fontSize: '12px', |
|
||||
}, |
|
||||
editable: { |
|
||||
td: { paddingTop: '13px', paddingBottom: '12.5px' }, |
|
||||
}, |
|
||||
}; |
|
||||
}); |
|
||||
|
|
||||
export default useStyles; |
|
||||
@ -1,7 +0,0 @@ |
|||||
import type { Request, Response } from 'express'; |
|
||||
|
|
||||
export default { |
|
||||
'POST /api/basicForm': (_: Request, res: Response) => { |
|
||||
res.send({ data: { message: 'Ok' } }); |
|
||||
}, |
|
||||
}; |
|
||||
@ -1,8 +0,0 @@ |
|||||
import { request } from '@umijs/max'; |
|
||||
|
|
||||
export async function fakeSubmitForm(params: any) { |
|
||||
return request('/api/basicForm', { |
|
||||
method: 'POST', |
|
||||
data: params, |
|
||||
}); |
|
||||
} |
|
||||
@ -1,6 +0,0 @@ |
|||||
@import '~antd/es/style/themes/default.less'; |
|
||||
|
|
||||
.optional { |
|
||||
color: @text-color-secondary; |
|
||||
font-style: normal; |
|
||||
} |
|
||||
@ -1,12 +0,0 @@ |
|||||
import { createStyles } from 'antd-style'; |
|
||||
|
|
||||
const useStyles = createStyles(({ token }) => { |
|
||||
return { |
|
||||
optional: { |
|
||||
color: token.colorTextSecondary, |
|
||||
fontStyle: 'normal', |
|
||||
}, |
|
||||
}; |
|
||||
}); |
|
||||
|
|
||||
export default useStyles; |
|
||||
@ -1,7 +0,0 @@ |
|||||
import type { Request, Response } from 'express'; |
|
||||
|
|
||||
export default { |
|
||||
'POST /api/stepForm': (_: Request, res: Response) => { |
|
||||
res.send({ data: { message: 'Ok' } }); |
|
||||
}, |
|
||||
}; |
|
||||
@ -1,9 +0,0 @@ |
|||||
export interface StepDataType { |
|
||||
payAccount: string; |
|
||||
receiverAccount: string; |
|
||||
receiverName: string; |
|
||||
amount: string; |
|
||||
receiverMode: string; |
|
||||
} |
|
||||
|
|
||||
export type CurrentTypes = 'base' | 'confirm' | 'result'; |
|
||||
@ -1,8 +0,0 @@ |
|||||
import { request } from '@umijs/max'; |
|
||||
|
|
||||
export async function fakeSubmitForm(params: any) { |
|
||||
return request('/api/stepForm', { |
|
||||
method: 'POST', |
|
||||
data: params, |
|
||||
}); |
|
||||
} |
|
||||
@ -1,11 +0,0 @@ |
|||||
@import '~antd/es/style/themes/default.less'; |
|
||||
|
|
||||
.card { |
|
||||
margin-bottom: 24px; |
|
||||
} |
|
||||
|
|
||||
.result { |
|
||||
max-width: 560px; |
|
||||
margin: 0 auto; |
|
||||
padding: 24px 0 8px; |
|
||||
} |
|
||||
@ -1,15 +0,0 @@ |
|||||
import { createStyles } from 'antd-style'; |
|
||||
|
|
||||
const useStyles = createStyles(() => { |
|
||||
return { |
|
||||
card: { |
|
||||
marginBottom: '24px', |
|
||||
}, |
|
||||
result: { |
|
||||
maxWidth: '560px', |
|
||||
margin: '0 auto', |
|
||||
padding: '24px 0 8px', |
|
||||
}, |
|
||||
}; |
|
||||
}); |
|
||||
export default useStyles; |
|
||||
@ -1,165 +0,0 @@ |
|||||
import type { Request, Response } from 'express'; |
|
||||
import type { BasicListItemDataType } from './data.d'; |
|
||||
|
|
||||
const titles = [ |
|
||||
'Alipay', |
|
||||
'Angular', |
|
||||
'Ant Design', |
|
||||
'Ant Design Pro', |
|
||||
'Bootstrap', |
|
||||
'React', |
|
||||
'Vue', |
|
||||
'Webpack', |
|
||||
]; |
|
||||
const avatars = [ |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', // Alipay
|
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', // Angular
|
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', // Ant Design
|
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', // Ant Design Pro
|
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', // Bootstrap
|
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png', // React
|
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', // Vue
|
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png', // Webpack
|
|
||||
]; |
|
||||
|
|
||||
const covers = [ |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png', |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png', |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png', |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png', |
|
||||
]; |
|
||||
const desc = [ |
|
||||
'那是一种内在的东西， 他们到达不了，也无法触及的', |
|
||||
'希望是一个好东西，也许是最好的，好东西是不会消亡的', |
|
||||
'生命就像一盒巧克力，结果往往出人意料', |
|
||||
'城镇中有那么多的酒馆，她却偏偏走进了我的酒馆', |
|
||||
'那时候我只会想自己想要什么，从不想自己拥有什么', |
|
||||
]; |
|
||||
|
|
||||
const user = [ |
|
||||
'付小小', |
|
||||
'曲丽丽', |
|
||||
'林东东', |
|
||||
'周星星', |
|
||||
'吴加好', |
|
||||
'朱偏右', |
|
||||
'鱼酱', |
|
||||
'乐哥', |
|
||||
'谭小仪', |
|
||||
'仲尼', |
|
||||
]; |
|
||||
|
|
||||
function fakeList(count: number): BasicListItemDataType[] { |
|
||||
const list = []; |
|
||||
for (let i = 0; i < count; i += 1) { |
|
||||
list.push({ |
|
||||
id: `fake-list-${i}`, |
|
||||
owner: user[i % 10], |
|
||||
title: titles[i % 8], |
|
||||
avatar: avatars[i % 8], |
|
||||
cover: |
|
||||
parseInt(`${i / 4}`, 10) % 2 === 0 |
|
||||
? covers[i % 4] |
|
||||
: covers[3 - (i % 4)], |
|
||||
status: ['active', 'exception', 'normal'][i % 3] as |
|
||||
| 'normal' |
|
||||
| 'exception' |
|
||||
| 'active' |
|
||||
| 'success', |
|
||||
percent: Math.ceil(Math.random() * 50) + 50, |
|
||||
logo: avatars[i % 8], |
|
||||
href: 'https://ant.design', |
|
||||
updatedAt: new Date(Date.now() - 1000 * 60 * 60 * 2 * i).getTime(), |
|
||||
createdAt: new Date(Date.now() - 1000 * 60 * 60 * 2 * i).getTime(), |
|
||||
subDescription: desc[i % 5], |
|
||||
description: |
|
||||
'在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。', |
|
||||
activeUser: Math.ceil(Math.random() * 100000) + 100000, |
|
||||
newUser: Math.ceil(Math.random() * 1000) + 1000, |
|
||||
star: Math.ceil(Math.random() * 100) + 100, |
|
||||
like: Math.ceil(Math.random() * 100) + 100, |
|
||||
message: Math.ceil(Math.random() * 10) + 10, |
|
||||
content: |
|
||||
'段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。', |
|
||||
members: [ |
|
||||
{ |
|
||||
avatar: |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png', |
|
||||
name: '曲丽丽', |
|
||||
id: 'member1', |
|
||||
}, |
|
||||
{ |
|
||||
avatar: |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png', |
|
||||
name: '王昭君', |
|
||||
id: 'member2', |
|
||||
}, |
|
||||
{ |
|
||||
avatar: |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png', |
|
||||
name: '董娜娜', |
|
||||
id: 'member3', |
|
||||
}, |
|
||||
], |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
return list; |
|
||||
} |
|
||||
|
|
||||
let sourceData: BasicListItemDataType[] = []; |
|
||||
|
|
||||
function getFakeList(req: Request, res: Response) { |
|
||||
const params = req.query as any; |
|
||||
|
|
||||
const count = Number(params.count) * 1 || 20; |
|
||||
|
|
||||
const result = fakeList(count); |
|
||||
sourceData = result; |
|
||||
return res.json({ |
|
||||
data: { |
|
||||
list: result, |
|
||||
}, |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
function postFakeList(req: Request, res: Response) { |
|
||||
const { /* url = '', */ body } = req; |
|
||||
// const params = getUrlParams(url);
|
|
||||
const { method, id } = body; |
|
||||
// const count = (params.count * 1) || 20;
|
|
||||
let result = sourceData || []; |
|
||||
|
|
||||
switch (method) { |
|
||||
case 'delete': |
|
||||
result = result.filter((item) => item.id !== id); |
|
||||
break; |
|
||||
case 'update': |
|
||||
result.forEach((item, i) => { |
|
||||
if (item.id === id) { |
|
||||
result[i] = { ...item, ...body }; |
|
||||
} |
|
||||
}); |
|
||||
break; |
|
||||
case 'post': |
|
||||
result.unshift({ |
|
||||
...body, |
|
||||
id: `fake-list-${result.length}`, |
|
||||
createdAt: Date.now(), |
|
||||
}); |
|
||||
break; |
|
||||
default: |
|
||||
break; |
|
||||
} |
|
||||
|
|
||||
return res.json({ |
|
||||
data: { |
|
||||
list: result, |
|
||||
}, |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
export default { |
|
||||
'GET /api/get_list': getFakeList, |
|
||||
'POST /api/post_fake_list': postFakeList, |
|
||||
}; |
|
||||
@ -1,29 +0,0 @@ |
|||||
export type Member = { |
|
||||
avatar: string; |
|
||||
name: string; |
|
||||
id: string; |
|
||||
}; |
|
||||
|
|
||||
export type BasicListItemDataType = { |
|
||||
id: string; |
|
||||
owner: string; |
|
||||
title: string; |
|
||||
avatar: string; |
|
||||
cover: string; |
|
||||
status: 'normal' | 'exception' | 'active' | 'success'; |
|
||||
percent: number; |
|
||||
logo: string; |
|
||||
href: string; |
|
||||
body?: any; |
|
||||
updatedAt: number; |
|
||||
createdAt: number; |
|
||||
subDescription: string; |
|
||||
description: string; |
|
||||
activeUser: number; |
|
||||
newUser: number; |
|
||||
star: number; |
|
||||
like: number; |
|
||||
message: number; |
|
||||
content: string; |
|
||||
members: Member[]; |
|
||||
}; |
|
||||
@ -1,50 +0,0 @@ |
|||||
import { request } from '@umijs/max'; |
|
||||
import type { BasicListItemDataType } from './data.d'; |
|
||||
|
|
||||
type ParamsType = { |
|
||||
count?: number; |
|
||||
} & Partial<BasicListItemDataType>; |
|
||||
|
|
||||
export async function queryFakeList( |
|
||||
params: ParamsType, |
|
||||
): Promise<{ data: { list: BasicListItemDataType[] } }> { |
|
||||
return request('/api/get_list', { |
|
||||
params, |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
export async function removeFakeList( |
|
||||
params: ParamsType, |
|
||||
): Promise<{ data: { list: BasicListItemDataType[] } }> { |
|
||||
return request('/api/post_fake_list', { |
|
||||
method: 'POST', |
|
||||
data: { |
|
||||
...params, |
|
||||
method: 'delete', |
|
||||
}, |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
export async function addFakeList( |
|
||||
params: ParamsType, |
|
||||
): Promise<{ data: { list: BasicListItemDataType[] } }> { |
|
||||
return request('/api/post_fake_list', { |
|
||||
method: 'POST', |
|
||||
data: { |
|
||||
...params, |
|
||||
method: 'post', |
|
||||
}, |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
export async function updateFakeList( |
|
||||
params: ParamsType, |
|
||||
): Promise<{ data: { list: BasicListItemDataType[] } }> { |
|
||||
return request('/api/post_fake_list', { |
|
||||
method: 'POST', |
|
||||
data: { |
|
||||
...params, |
|
||||
method: 'update', |
|
||||
}, |
|
||||
}); |
|
||||
} |
|
||||
@ -1,141 +0,0 @@ |
|||||
import { createStyles } from 'antd-style'; |
|
||||
|
|
||||
const useStyles = createStyles(({ token }) => { |
|
||||
return { |
|
||||
standardList: { |
|
||||
'.ant-card-head': { borderBottom: 'none' }, |
|
||||
'.ant-card-head-title': { padding: '24px 0', lineHeight: '32px' }, |
|
||||
'.ant-card-extra': { padding: '24px 0' }, |
|
||||
'.ant-list-pagination': { marginTop: '24px', textAlign: 'right' }, |
|
||||
'.ant-avatar-lg': { width: '48px', height: '48px', lineHeight: '48px' }, |
|
||||
[`@media screen and (max-width: ${token.screenXS}px)`]: { |
|
||||
'.ant-list-item-content': { |
|
||||
display: 'block', |
|
||||
flex: 'none', |
|
||||
width: '100%', |
|
||||
}, |
|
||||
'.ant-list-item-action': { |
|
||||
marginLeft: '0', |
|
||||
}, |
|
||||
}, |
|
||||
}, |
|
||||
headerInfo: { |
|
||||
position: 'relative', |
|
||||
textAlign: 'center', |
|
||||
'& > span': { |
|
||||
display: 'inline-block', |
|
||||
marginBottom: '4px', |
|
||||
color: token.colorTextSecondary, |
|
||||
fontSize: token.fontSize, |
|
||||
lineHeight: '22px', |
|
||||
}, |
|
||||
'& > p': { |
|
||||
margin: '0', |
|
||||
color: token.colorTextHeading, |
|
||||
fontSize: '24px', |
|
||||
lineHeight: '32px', |
|
||||
}, |
|
||||
'& > em': { |
|
||||
position: 'absolute', |
|
||||
top: '0', |
|
||||
right: '0', |
|
||||
width: '1px', |
|
||||
height: '56px', |
|
||||
backgroundColor: token.colorSplit, |
|
||||
}, |
|
||||
[`@media screen and (max-width: ${token.screenSM}px)`]: { |
|
||||
marginBottom: '16px', |
|
||||
'& > em': { |
|
||||
display: 'none', |
|
||||
}, |
|
||||
}, |
|
||||
}, |
|
||||
listContent: { |
|
||||
fontSize: '0', |
|
||||
[`@media screen and (max-width: ${token.screenXS}px)`]: { |
|
||||
marginLeft: '0', |
|
||||
'& > div': { |
|
||||
marginLeft: '0', |
|
||||
}, |
|
||||
}, |
|
||||
[`@media screen and (max-width: ${token.screenMD}px)`]: { |
|
||||
'& > div': { |
|
||||
display: 'block', |
|
||||
}, |
|
||||
'& > div:last-child': { |
|
||||
top: '0', |
|
||||
width: '100%', |
|
||||
}, |
|
||||
}, |
|
||||
[`@media screen and (max-width: ${token.screenLG}px) and (min-width: @screen-md)`]: |
|
||||
{ |
|
||||
'& > div': { |
|
||||
display: 'block', |
|
||||
}, |
|
||||
'& > div:last-child': { |
|
||||
top: '0', |
|
||||
width: '100%', |
|
||||
}, |
|
||||
}, |
|
||||
[`@media screen and (max-width: ${token.screenXL}px)`]: { |
|
||||
'& > div': { |
|
||||
marginLeft: '24px', |
|
||||
}, |
|
||||
'& > div:last-child': { |
|
||||
top: '0', |
|
||||
}, |
|
||||
}, |
|
||||
'@media screen and (max-width: 1400px)': { |
|
||||
textAlign: 'right', |
|
||||
'& > div:last-child': { |
|
||||
top: '0', |
|
||||
}, |
|
||||
}, |
|
||||
}, |
|
||||
listContentItem: { |
|
||||
display: 'inline-block', |
|
||||
marginLeft: '40px', |
|
||||
color: token.colorTextSecondary, |
|
||||
fontSize: token.fontSize, |
|
||||
verticalAlign: 'middle', |
|
||||
'> span': { lineHeight: '20px' }, |
|
||||
'> p': { marginTop: '4px', marginBottom: '0', lineHeight: '22px' }, |
|
||||
}, |
|
||||
extraContentSearch: { |
|
||||
width: '272px', |
|
||||
marginLeft: '16px', |
|
||||
[`@media screen and (max-width: ${token.screenSM}px)`]: { |
|
||||
width: '100%', |
|
||||
marginLeft: '0', |
|
||||
}, |
|
||||
}, |
|
||||
listCard: { |
|
||||
[`@media screen and (max-width: ${token.screenXS}px)`]: { |
|
||||
'.ant-card-head-title': { |
|
||||
overflow: 'open', |
|
||||
}, |
|
||||
}, |
|
||||
[`@media screen and (max-width: ${token.screenMD}px)`]: { |
|
||||
'.ant-radio-group': { |
|
||||
display: 'block', |
|
||||
marginBottom: '8px', |
|
||||
}, |
|
||||
}, |
|
||||
}, |
|
||||
standardListForm: { |
|
||||
'.ant-form-item': { |
|
||||
marginBottom: '12px', |
|
||||
'&:last-child': { |
|
||||
marginBottom: '32px', |
|
||||
paddingTop: '4px', |
|
||||
}, |
|
||||
}, |
|
||||
}, |
|
||||
formResult: { |
|
||||
width: '100%', |
|
||||
"[class^='title']": { marginBottom: '8px' }, |
|
||||
}, |
|
||||
}; |
|
||||
}); |
|
||||
|
|
||||
export default useStyles; |
|
||||
@ -1,6 +0,0 @@ |
|||||
import { createStyles } from 'antd-style'; |
|
||||
|
|
||||
const useStyles = createStyles(() => { |
|
||||
return {}; |
|
||||
}); |
|
||||
export default useStyles; |
|
||||
@ -1,125 +0,0 @@ |
|||||
import type { Request, Response } from 'express'; |
|
||||
import type { CardListItemDataType } from './data.d'; |
|
||||
|
|
||||
const titles = [ |
|
||||
'Alipay', |
|
||||
'Angular', |
|
||||
'Ant Design', |
|
||||
'Ant Design Pro', |
|
||||
'Bootstrap', |
|
||||
'React', |
|
||||
'Vue', |
|
||||
'Webpack', |
|
||||
]; |
|
||||
const avatars = [ |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', // Alipay
|
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', // Angular
|
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', // Ant Design
|
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', // Ant Design Pro
|
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', // Bootstrap
|
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png', // React
|
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', // Vue
|
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png', // Webpack
|
|
||||
]; |
|
||||
|
|
||||
const covers = [ |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png', |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png', |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png', |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png', |
|
||||
]; |
|
||||
const desc = [ |
|
||||
'那是一种内在的东西， 他们到达不了，也无法触及的', |
|
||||
'希望是一个好东西，也许是最好的，好东西是不会消亡的', |
|
||||
'生命就像一盒巧克力，结果往往出人意料', |
|
||||
'城镇中有那么多的酒馆，她却偏偏走进了我的酒馆', |
|
||||
'那时候我只会想自己想要什么，从不想自己拥有什么', |
|
||||
]; |
|
||||
|
|
||||
const user = [ |
|
||||
'付小小', |
|
||||
'曲丽丽', |
|
||||
'林东东', |
|
||||
'周星星', |
|
||||
'吴加好', |
|
||||
'朱偏右', |
|
||||
'鱼酱', |
|
||||
'乐哥', |
|
||||
'谭小仪', |
|
||||
'仲尼', |
|
||||
]; |
|
||||
|
|
||||
function fakeList(count: number): CardListItemDataType[] { |
|
||||
const list = []; |
|
||||
for (let i = 0; i < count; i += 1) { |
|
||||
list.push({ |
|
||||
id: `fake-list-${i}`, |
|
||||
owner: user[i % 10], |
|
||||
title: titles[i % 8], |
|
||||
avatar: avatars[i % 8], |
|
||||
cover: |
|
||||
parseInt(`${i / 4}`, 10) % 2 === 0 |
|
||||
? covers[i % 4] |
|
||||
: covers[3 - (i % 4)], |
|
||||
status: ['active', 'exception', 'normal'][i % 3] as |
|
||||
| 'normal' |
|
||||
| 'exception' |
|
||||
| 'active' |
|
||||
| 'success', |
|
||||
percent: Math.ceil(Math.random() * 50) + 50, |
|
||||
logo: avatars[i % 8], |
|
||||
href: 'https://ant.design', |
|
||||
updatedAt: new Date(Date.now() - 1000 * 60 * 60 * 2 * i).getTime(), |
|
||||
createdAt: new Date(Date.now() - 1000 * 60 * 60 * 2 * i).getTime(), |
|
||||
subDescription: desc[i % 5], |
|
||||
description: |
|
||||
'在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。', |
|
||||
activeUser: Math.ceil(Math.random() * 100000) + 100000, |
|
||||
newUser: Math.ceil(Math.random() * 1000) + 1000, |
|
||||
star: Math.ceil(Math.random() * 100) + 100, |
|
||||
like: Math.ceil(Math.random() * 100) + 100, |
|
||||
message: Math.ceil(Math.random() * 10) + 10, |
|
||||
content: |
|
||||
'段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。', |
|
||||
members: [ |
|
||||
{ |
|
||||
avatar: |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png', |
|
||||
name: '曲丽丽', |
|
||||
id: 'member1', |
|
||||
}, |
|
||||
{ |
|
||||
avatar: |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png', |
|
||||
name: '王昭君', |
|
||||
id: 'member2', |
|
||||
}, |
|
||||
{ |
|
||||
avatar: |
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png', |
|
||||
name: '董娜娜', |
|
||||
id: 'member3', |
|
||||
}, |
|
||||
], |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
return list; |
|
||||
} |
|
||||
|
|
||||
function getFakeList(req: Request, res: Response) { |
|
||||
const params = req.query as any; |
|
||||
|
|
||||
const count = Number(params.count) * 1 || 20; |
|
||||
|
|
||||
const result = fakeList(count); |
|
||||
return res.json({ |
|
||||
data: { |
|
||||
list: result, |
|
||||
}, |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
export default { |
|
||||
'GET /api/card_fake_list': getFakeList, |
|
||||
}; |
|
||||
@ -1,29 +0,0 @@ |
|||||
export type Member = { |
|
||||
avatar: string; |
|
||||
name: string; |
|
||||
id: string; |
|
||||
}; |
|
||||
|
|
||||
export type CardListItemDataType = { |
|
||||
id: string; |
|
||||
owner: string; |
|
||||
title: string; |
|
||||
avatar: string; |
|
||||
cover: string; |
|
||||
status: 'normal' | 'exception' | 'active' | 'success'; |
|
||||
percent: number; |
|
||||
logo: string; |
|
||||
href: string; |
|
||||
body?: any; |
|
||||
updatedAt: number; |
|
||||
createdAt: number; |
|
||||
subDescription: string; |
|
||||
description: string; |
|
||||
activeUser: number; |
|
||||
newUser: number; |
|
||||
star: number; |
|
||||
like: number; |
|
||||
message: number; |
|
||||
content: string; |
|
||||
members: Member[]; |
|
||||
}; |
|
||||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue