Browse Source
- Add missing basic-list components and service files - Fix jest.config.ts import path for @umijs/max/test.js - Update login test snapshots (fix 'Ant Desgin' typo) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>pull/11631/head
afc163
3 weeks ago
9 changed files with 559 additions and 51 deletions
@ -0,0 +1,17 @@ |
|||||
|
{ |
||||
|
"permissions": { |
||||
|
"allow": [ |
||||
|
"Bash(git ls-tree:*)", |
||||
|
"Bash(npm show:*)", |
||||
|
"Bash(git merge:*)", |
||||
|
"Bash(git add:*)", |
||||
|
"Bash(git checkout:*)", |
||||
|
"Bash(ls:*)", |
||||
|
"Bash(git commit:*)", |
||||
|
"Bash(npm test:*)", |
||||
|
"Bash(npm install:*)", |
||||
|
"Bash(npm publish:*)", |
||||
|
"Bash(tnpm publish:*)" |
||||
|
] |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,165 @@ |
|||||
|
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, |
||||
|
}; |
||||
@ -0,0 +1,129 @@ |
|||||
|
import { |
||||
|
ModalForm, |
||||
|
ProFormDateTimePicker, |
||||
|
ProFormSelect, |
||||
|
ProFormText, |
||||
|
ProFormTextArea, |
||||
|
} from '@ant-design/pro-components'; |
||||
|
import { Button, Result } from 'antd'; |
||||
|
import type { FC } from 'react'; |
||||
|
import type { BasicListItemDataType } from '../data.d'; |
||||
|
import useStyles from '../style.style'; |
||||
|
|
||||
|
type OperationModalProps = { |
||||
|
done: boolean; |
||||
|
open: boolean; |
||||
|
current: Partial<BasicListItemDataType> | undefined; |
||||
|
onDone: () => void; |
||||
|
onSubmit: (values: BasicListItemDataType) => void; |
||||
|
children?: React.ReactNode; |
||||
|
}; |
||||
|
const OperationModal: FC<OperationModalProps> = (props) => { |
||||
|
const { styles } = useStyles(); |
||||
|
const { done, open, current, onDone, onSubmit, children } = props; |
||||
|
if (!open) { |
||||
|
return null; |
||||
|
} |
||||
|
return ( |
||||
|
<ModalForm<BasicListItemDataType> |
||||
|
open={open} |
||||
|
title={done ? null : `任务${current ? '编辑' : '添加'}`} |
||||
|
className={styles.standardListForm} |
||||
|
width={640} |
||||
|
onFinish={async (values) => { |
||||
|
onSubmit(values); |
||||
|
}} |
||||
|
initialValues={current} |
||||
|
submitter={{ |
||||
|
render: (_, dom) => (done ? null : dom), |
||||
|
}} |
||||
|
trigger={children} |
||||
|
modalProps={{ |
||||
|
onCancel: () => onDone(), |
||||
|
destroyOnHidden: true, |
||||
|
bodyStyle: done |
||||
|
? { |
||||
|
padding: '72px 0', |
||||
|
} |
||||
|
: {}, |
||||
|
}} |
||||
|
> |
||||
|
{!done ? ( |
||||
|
<> |
||||
|
<ProFormText |
||||
|
name="title" |
||||
|
label="任务名称" |
||||
|
rules={[ |
||||
|
{ |
||||
|
required: true, |
||||
|
message: '请输入任务名称', |
||||
|
}, |
||||
|
]} |
||||
|
placeholder="请输入" |
||||
|
/> |
||||
|
<ProFormDateTimePicker |
||||
|
name="createdAt" |
||||
|
label="开始时间" |
||||
|
rules={[ |
||||
|
{ |
||||
|
required: true, |
||||
|
message: '请选择开始时间', |
||||
|
}, |
||||
|
]} |
||||
|
fieldProps={{ |
||||
|
style: { |
||||
|
width: '100%', |
||||
|
}, |
||||
|
}} |
||||
|
placeholder="请选择" |
||||
|
/> |
||||
|
<ProFormSelect |
||||
|
name="owner" |
||||
|
label="任务负责人" |
||||
|
rules={[ |
||||
|
{ |
||||
|
required: true, |
||||
|
message: '请选择任务负责人', |
||||
|
}, |
||||
|
]} |
||||
|
options={[ |
||||
|
{ |
||||
|
label: '付晓晓', |
||||
|
value: 'xiao', |
||||
|
}, |
||||
|
{ |
||||
|
label: '周毛毛', |
||||
|
value: 'mao', |
||||
|
}, |
||||
|
]} |
||||
|
placeholder="请选择管理员" |
||||
|
/> |
||||
|
<ProFormTextArea |
||||
|
name="subDescription" |
||||
|
label="产品描述" |
||||
|
rules={[ |
||||
|
{ |
||||
|
message: '请输入至少五个字符的产品描述！', |
||||
|
min: 5, |
||||
|
}, |
||||
|
]} |
||||
|
placeholder="请输入至少五个字符" |
||||
|
/> |
||||
|
</> |
||||
|
) : ( |
||||
|
<Result |
||||
|
status="success" |
||||
|
title="操作成功" |
||||
|
subTitle="一系列的信息描述，很短同样也可以带标点。" |
||||
|
extra={ |
||||
|
<Button type="primary" onClick={onDone}> |
||||
|
知道了 |
||||
|
</Button> |
||||
|
} |
||||
|
className={styles.formResult} |
||||
|
/> |
||||
|
)} |
||||
|
</ModalForm> |
||||
|
); |
||||
|
}; |
||||
|
export default OperationModal; |
||||
@ -0,0 +1,29 @@ |
|||||
|
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[]; |
||||
|
}; |
||||
@ -0,0 +1,50 @@ |
|||||
|
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', |
||||
|
}, |
||||
|
}); |
||||
|
} |
||||
@ -0,0 +1,141 @@ |
|||||
|
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; |
||||
@ -0,0 +1,6 @@ |
|||||
|
import { createStyles } from 'antd-style'; |
||||
|
|
||||
|
const useStyles = createStyles(() => { |
||||
|
return {}; |
||||
|
}); |
||||
|
export default useStyles; |
||||
Loading…
Reference in new issue