Browse Source

chore: fix biome lint errors

pull/11501/head
afc163 9 months ago
parent
commit
eb51b87590
  1. 3
      biome.json
  2. 6
      src/app.tsx
  3. 2
      src/components/HeaderDropdown/index.tsx
  4. 17
      src/pages/account/center/_mock.ts
  5. 5
      src/pages/account/center/components/Applications/index.tsx
  6. 7
      src/pages/account/center/components/Articles/index.tsx
  7. 20
      src/pages/account/center/components/AvatarList/index.tsx
  8. 12
      src/pages/account/center/components/Projects/index.tsx
  9. 32
      src/pages/account/center/index.tsx
  10. 3
      src/pages/account/settings/_mock.ts
  11. 15
      src/pages/account/settings/components/base.tsx
  12. 6
      src/pages/account/settings/components/binding.tsx
  13. 4
      src/pages/account/settings/components/notification.tsx
  14. 10
      src/pages/account/settings/index.tsx
  15. 4
      src/pages/account/settings/service.ts
  16. 21
      src/pages/dashboard/analysis/components/Charts/ChartCard/index.tsx
  17. 6
      src/pages/dashboard/analysis/components/Charts/WaterWave/index.tsx
  18. 26
      src/pages/dashboard/analysis/components/IntroduceRow.tsx
  19. 11
      src/pages/dashboard/analysis/components/NumberInfo/index.tsx
  20. 15
      src/pages/dashboard/analysis/components/OfflineData.tsx
  21. 1
      src/pages/dashboard/analysis/components/ProportionSales.tsx
  22. 34
      src/pages/dashboard/analysis/components/SalesCard.tsx
  23. 10
      src/pages/dashboard/analysis/components/TopSearch.tsx
  24. 6
      src/pages/dashboard/analysis/components/Trend/index.tsx
  25. 13
      src/pages/dashboard/analysis/index.tsx
  26. 9
      src/pages/dashboard/analysis/utils/utils.ts
  27. 10
      src/pages/dashboard/monitor/components/ActiveChart/index.style.ts
  28. 13
      src/pages/dashboard/monitor/components/ActiveChart/index.tsx
  29. 6
      src/pages/dashboard/monitor/components/Charts/WaterWave/index.tsx
  30. 4
      src/pages/dashboard/monitor/components/Charts/autoHeight.tsx
  31. 10
      src/pages/dashboard/monitor/components/Map/index.tsx
  32. 21
      src/pages/dashboard/monitor/index.tsx
  33. 20
      src/pages/dashboard/workplace/index.tsx
  34. 12
      src/pages/dashboard/workplace/style.style.ts
  35. 24
      src/pages/form/advanced-form/components/TableForm.tsx
  36. 15
      src/pages/form/advanced-form/index.tsx
  37. 4
      src/pages/form/basic-form/index.tsx
  38. 11
      src/pages/form/step-form/index.tsx
  39. 14
      src/pages/list/basic-list/_mock.ts
  40. 1
      src/pages/list/basic-list/components/OperationModal.tsx
  41. 27
      src/pages/list/basic-list/index.tsx
  42. 3
      src/pages/list/basic-list/style.style.ts
  43. 14
      src/pages/list/card-list/_mock.ts
  44. 32
      src/pages/list/card-list/index.tsx
  45. 14
      src/pages/list/search/applications/_mock.ts
  46. 1
      src/pages/list/search/applications/components/StandardFormRow/index.tsx
  47. 41
      src/pages/list/search/applications/components/TagSelect/index.tsx
  48. 28
      src/pages/list/search/applications/index.tsx
  49. 14
      src/pages/list/search/articles/_mock.ts
  50. 1
      src/pages/list/search/articles/components/ArticleListContent/index.tsx
  51. 1
      src/pages/list/search/articles/components/StandardFormRow/index.tsx
  52. 41
      src/pages/list/search/articles/components/TagSelect/index.tsx
  53. 18
      src/pages/list/search/articles/index.tsx
  54. 8
      src/pages/list/search/index.tsx
  55. 14
      src/pages/list/search/projects/_mock.ts
  56. 20
      src/pages/list/search/projects/components/AvatarList/index.tsx
  57. 1
      src/pages/list/search/projects/components/StandardFormRow/index.tsx
  58. 41
      src/pages/list/search/projects/components/TagSelect/index.tsx
  59. 17
      src/pages/list/search/projects/index.tsx
  60. 22
      src/pages/list/table-list/_mock.ts
  61. 22
      src/pages/list/table-list/index.tsx
  62. 15
      src/pages/list/table-list/service.ts
  63. 60
      src/pages/profile/advanced/index.tsx
  64. 5
      src/pages/profile/basic/index.tsx
  65. 4
      src/pages/result/success/index.tsx
  66. 9
      src/pages/table-list/components/CreateForm.tsx
  67. 4
      src/pages/table-list/components/UpdateForm.tsx
  68. 17
      src/pages/table-list/index.tsx
  69. 19
      src/pages/user/register/index.tsx

3
biome.json

@ -28,6 +28,9 @@
"suspicious": {
"noExplicitAny": "off"
},
"correctness": {
"useExhaustiveDependencies": "off"
},
"a11y": {
"noStaticElementInteractions": "off",
"useValidAnchor": "off",

6
src/app.tsx

@ -41,7 +41,11 @@ export async function getInitialState(): Promise<{
};
// 如果不是登录页面,执行
const { location } = history;
if (![loginPath, '/user/register', '/user/register-result'].includes(location.pathname)) {
if (
![loginPath, '/user/register', '/user/register-result'].includes(
location.pathname,
)
) {
const currentUser = await fetchUserInfo();
return {
fetchUserInfo,

2
src/components/HeaderDropdown/index.tsx

@ -1,6 +1,6 @@
import { Dropdown } from 'antd';
import { createStyles } from 'antd-style';
import type { DropDownProps } from 'antd/es/dropdown';
import { createStyles } from 'antd-style';
import classNames from 'classnames';
import React from 'react';

17
src/pages/account/center/_mock.ts

@ -52,7 +52,8 @@ const user = [
// 当前用户信息
const currentUseDetail = {
name: 'Serati Ma',
avatar: 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
avatar:
'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
userid: '00000001',
email: 'antdesign@alipay.com',
signature: '海纳百川,有容乃大',
@ -171,7 +172,10 @@ function fakeList(count: number): ListItemDataType[] {
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)],
cover:
parseInt(`${i / 4}`, 10) % 2 === 0
? covers[i % 4]
: covers[3 - (i % 4)],
status: ['active', 'exception', 'normal'][i % 3] as
| 'normal'
| 'exception'
@ -194,17 +198,20 @@ function fakeList(count: number): ListItemDataType[] {
'段落示意:蚂蚁金服设计平台 ant.design,用最小的工作量,无缝接入蚂蚁金服生态,提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design,用最小的工作量,无缝接入蚂蚁金服生态,提供跨越设计与开发的体验解决方案。',
members: [
{
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
avatar:
'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
name: '曲丽丽',
id: 'member1',
},
{
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
avatar:
'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
name: '王昭君',
id: 'member2',
},
{
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
avatar:
'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
name: '董娜娜',
id: 'member3',
},

5
src/pages/account/center/components/Applications/index.tsx

@ -107,7 +107,10 @@ const Applications: React.FC = () => {
</Dropdown>,
]}
>
<Card.Meta avatar={<Avatar size="small" src={item.avatar} />} title={item.title} />
<Card.Meta
avatar={<Avatar size="small" src={item.avatar} />}
title={item.title}
/>
<div>
<CardInfo
activeUser={formatWan(item.activeUser)}

7
src/pages/account/center/components/Articles/index.tsx

@ -6,6 +6,7 @@ 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<{
@ -36,7 +37,11 @@ const Articles: React.FC = () => {
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} />,
<IconText
key="message"
icon={<MessageFilled />}
text={item.message}
/>,
]}
>
<List.Item.Meta

20
src/pages/account/center/components/AvatarList/index.tsx

@ -16,9 +16,16 @@ export type AvatarListProps = {
maxLength?: number;
excessItemsStyle?: React.CSSProperties;
style?: React.CSSProperties;
children: React.ReactElement<AvatarItemProps> | React.ReactElement<AvatarItemProps>[];
children:
| React.ReactElement<AvatarItemProps>
| React.ReactElement<AvatarItemProps>[];
};
const Item: React.FC<AvatarItemProps> = ({ src, size, tips, onClick = () => {} }) => {
const Item: React.FC<AvatarItemProps> = ({
src,
size,
tips,
onClick = () => {},
}) => {
const { styles } = useStyles();
const avatarSizeToClassName = (size?: SizeType | 'mini') =>
classNames(styles.avatarItem, {
@ -51,7 +58,9 @@ const AvatarList: React.FC<AvatarListProps> & {
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 childrenArray = React.Children.toArray(
children,
) as React.ReactElement<AvatarItemProps>[];
const childrenWithProps = childrenArray.slice(0, numToShow).map((child) =>
React.cloneElement(child, {
size,
@ -61,7 +70,10 @@ const AvatarList: React.FC<AvatarListProps> & {
const cls = avatarSizeToClassName(size);
childrenWithProps.push(
<li key="exceed" className={cls}>
<Avatar size={size} style={excessItemsStyle}>{`+${numOfChildren - maxLength}`}</Avatar>
<Avatar
size={size}
style={excessItemsStyle}
>{`+${numOfChildren - maxLength}`}</Avatar>
</li>,
);
}

12
src/pages/account/center/components/Projects/index.tsx

@ -7,6 +7,7 @@ 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();
@ -32,8 +33,15 @@ const Projects: React.FC = () => {
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} />
<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}>

32
src/pages/account/center/index.tsx

@ -1,14 +1,29 @@
import { ClusterOutlined, ContactsOutlined, HomeOutlined, PlusOutlined } from '@ant-design/icons';
import {
ClusterOutlined,
ContactsOutlined,
HomeOutlined,
PlusOutlined,
} from '@ant-design/icons';
import { GridContent } from '@ant-design/pro-components';
import { useRequest } from '@umijs/max';
import { Avatar, Card, Col, Divider, Input, type InputRef, Row, Tag } from 'antd';
import {
Avatar,
Card,
Col,
Divider,
Input,
type InputRef,
Row,
Tag,
} from 'antd';
import React, { useRef, useState } from 'react';
import useStyles from './Center.style';
import Applications from './components/Applications';
import Articles from './components/Articles';
import Projects from './components/Projects';
import type { CurrentUser, tabKeyType, TagType } from './data.d';
import type { CurrentUser, TagType, tabKeyType } from './data.d';
import { queryCurrent } from './service';
const operationTabList = [
{
key: 'articles',
@ -76,7 +91,10 @@ const TagList: React.FC<{
};
const handleInputConfirm = () => {
let tempsTags = [...newTags];
if (inputValue && tempsTags.filter((tag) => tag.label === inputValue).length === 0) {
if (
inputValue &&
tempsTags.filter((tag) => tag.label === inputValue).length === 0
) {
tempsTags = [
...tempsTags,
{
@ -132,7 +150,11 @@ const Center: React.FC = () => {
});
// 渲染用户信息
const renderUserInfo = ({ title, group, geographic }: Partial<CurrentUser>) => {
const renderUserInfo = ({
title,
group,
geographic,
}: Partial<CurrentUser>) => {
return (
<div className={styles.detail}>
<p>

3
src/pages/account/settings/_mock.ts

@ -19,7 +19,8 @@ function getCurrentUse(_req: Request, res: Response) {
return res.json({
data: {
name: 'Serati Ma',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
avatar:
'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
userid: '00000001',
email: 'antdesign@alipay.com',
signature: '海纳百川,有容乃大',

15
src/pages/account/settings/components/base.tsx

@ -13,7 +13,11 @@ 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) => {
const validatorPhone = (
_rule: any,
value: string[],
callback: (message?: string) => void,
) => {
if (!value[0]) {
callback('Please input your area code!');
}
@ -50,7 +54,8 @@ const BaseView: React.FC = () => {
if (currentUser.avatar) {
return currentUser.avatar;
}
const url = 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png';
const url =
'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png';
return url;
}
return '';
@ -175,14 +180,16 @@ const BaseView: React.FC = () => {
if (!province?.key) {
return [];
}
return queryCity(province.key || '').then(({ data }) => {
return queryCity(province.key || '').then(
({ data }) => {
return data.map((item) => {
return {
label: item.name,
value: item.id,
};
});
});
},
);
}}
/>
);

6
src/pages/account/settings/components/binding.tsx

@ -1,4 +1,8 @@
import { AlipayOutlined, DingdingOutlined, TaobaoOutlined } from '@ant-design/icons';
import {
AlipayOutlined,
DingdingOutlined,
TaobaoOutlined,
} from '@ant-design/icons';
import { List } from 'antd';
import React, { Fragment } from 'react';

4
src/pages/account/settings/components/notification.tsx

@ -5,7 +5,9 @@ type Unpacked<T> = T extends (infer U)[] ? U : T;
const NotificationView: React.FC = () => {
const getData = () => {
const Action = <Switch checkedChildren="开" unCheckedChildren="关" defaultChecked />;
const Action = (
<Switch checkedChildren="开" unCheckedChildren="关" defaultChecked />
);
return [
{
title: '账户密码',

10
src/pages/account/settings/index.tsx

@ -6,6 +6,7 @@ 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';
@ -23,7 +24,7 @@ const Settings: React.FC = () => {
mode: 'inline',
selectKey: 'base',
});
const dom = useRef<HTMLDivElement>();
const dom = useRef<HTMLDivElement>(null);
const resize = () => {
requestAnimationFrame(() => {
if (!dom.current) {
@ -51,9 +52,12 @@ const Settings: React.FC = () => {
return () => {
window.removeEventListener('resize', resize);
};
}, [resize]);
}, []);
const getMenu = () => {
return Object.keys(menuMap).map((item) => ({ key: item, label: menuMap[item] }));
return Object.keys(menuMap).map((item) => ({
key: item,
label: menuMap[item],
}));
};
const renderChildren = () => {
const { selectKey } = initConfig;

4
src/pages/account/settings/service.ts

@ -9,7 +9,9 @@ export async function queryProvince(): Promise<{ data: GeographicItemType[] }> {
return request('/api/geographic/province');
}
export async function queryCity(province: string): Promise<{ data: GeographicItemType[] }> {
export async function queryCity(
province: string,
): Promise<{ data: GeographicItemType[] }> {
return request(`/api/geographic/city/${province}`);
}

21
src/pages/dashboard/analysis/components/Charts/ChartCard/index.tsx

@ -4,6 +4,7 @@ import type { CardProps } from 'antd/es/card';
import classNames from 'classnames';
import React from 'react';
import useStyles from './index.style';
type totalType = () => React.ReactNode;
export type ChartCardProps = {
@ -36,7 +37,16 @@ const ChartCard: React.FC<ChartCardProps> = (props) => {
return totalDom;
};
const renderContent = () => {
const { contentHeight, title, avatar, action, total, footer, children, loading } = props;
const {
contentHeight,
title,
avatar,
action,
total,
footer,
children,
loading,
} = props;
if (loading) {
return false;
}
@ -63,7 +73,9 @@ const ChartCard: React.FC<ChartCardProps> = (props) => {
height: contentHeight || 'auto',
}}
>
<div className={contentHeight ? styles.contentFixed : undefined}>{children}</div>
<div className={contentHeight ? styles.contentFixed : undefined}>
{children}
</div>
</div>
)}
{footer && (
@ -79,10 +91,7 @@ const ChartCard: React.FC<ChartCardProps> = (props) => {
);
};
const {
loading = false,
...rest
} = props;
const { loading = false, ...rest } = props;
return (
<Card
loading={loading}

6
src/pages/dashboard/analysis/components/Charts/WaterWave/index.tsx

@ -87,7 +87,11 @@ class WaterWave extends Component<WaterWaveProps> {
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)) {
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[];

26
src/pages/dashboard/analysis/components/IntroduceRow.tsx

@ -7,6 +7,7 @@ import useStyles from '../style.style';
import Yuan from '../utils/Yuan';
import { ChartCard, Field } from './Charts';
import Trend from './Trend';
const topColResponsiveProps = {
xs: 24,
sm: 12,
@ -17,7 +18,13 @@ const topColResponsiveProps = {
marginBottom: 24,
},
};
const IntroduceRow = ({ loading, visitData }: { loading: boolean; visitData: DataItem[] }) => {
const IntroduceRow = ({
loading,
visitData,
}: {
loading: boolean;
visitData: DataItem[];
}) => {
const { styles } = useStyles();
return (
<Row gutter={24}>
@ -32,7 +39,12 @@ const IntroduceRow = ({ loading, visitData }: { loading: boolean; visitData: Dat
}
loading={loading}
total={() => <Yuan>126560</Yuan>}
footer={<Field label="日销售额" value={`${numeral(12423).format('0,0')}`} />}
footer={
<Field
label="日销售额"
value={`${numeral(12423).format('0,0')}`}
/>
}
contentHeight={46}
>
<Trend
@ -62,7 +74,9 @@ const IntroduceRow = ({ loading, visitData }: { loading: boolean; visitData: Dat
</Tooltip>
}
total={numeral(8846).format('0,0')}
footer={<Field label="日访问量" value={numeral(1234).format('0,0')} />}
footer={
<Field label="日访问量" value={numeral(1234).format('0,0')} />
}
contentHeight={46}
>
<Area
@ -141,7 +155,11 @@ const IntroduceRow = ({ loading, visitData }: { loading: boolean; visitData: Dat
}
contentHeight={46}
>
<Progress percent={78} strokeColor={{ from: '#108ee9', to: '#87d068' }} status="active" />
<Progress
percent={78}
strokeColor={{ from: '#108ee9', to: '#87d068' }}
status="active"
/>
</ChartCard>
</Col>
</Row>

11
src/pages/dashboard/analysis/components/NumberInfo/index.tsx

@ -33,7 +33,10 @@ const NumberInfo: React.FC<NumberInfoProps> = ({
{...rest}
>
{title && (
<div className={styles.numberInfoTitle} title={typeof title === 'string' ? title : ''}>
<div
className={styles.numberInfoTitle}
title={typeof title === 'string' ? title : ''}
>
{title}
</div>
)}
@ -62,7 +65,11 @@ const NumberInfo: React.FC<NumberInfoProps> = ({
{(status || subTotal) && (
<span className={styles.subTotal}>
{subTotal}
{status && status === 'up' ? <CaretUpOutlined /> : <CaretDownOutlined />}
{status && status === 'up' ? (
<CaretUpOutlined />
) : (
<CaretDownOutlined />
)}
</span>
)}
</div>

15
src/pages/dashboard/analysis/components/OfflineData.tsx

@ -3,6 +3,7 @@ import { Card, Col, Row, Tabs } from 'antd';
import type { DataItem, OfflineDataType } from '../data.d';
import useStyles from '../style.style';
import NumberInfo from './NumberInfo';
const CustomTab = ({
data,
currentTabKey: currentKey,
@ -32,7 +33,12 @@ const CustomTab = ({
paddingTop: 36,
}}
>
<Tiny.Ring height={60} width={60} percent={data.cvr} color={['#E8EEF4', '#5FABF4']} />
<Tiny.Ring
height={60}
width={60}
percent={data.cvr}
color={['#E8EEF4', '#5FABF4']}
/>
</Col>
</Row>
);
@ -81,7 +87,12 @@ const OfflineData = ({
slider={{ x: true }}
axis={{
x: { title: false },
y: { title: false, gridLineDash: null, gridStroke: '#ccc', gridStrokeOpacity: 1 },
y: {
title: false,
gridLineDash: null,
gridStroke: '#ccc',
gridStrokeOpacity: 1,
},
}}
legend={{
color: {

1
src/pages/dashboard/analysis/components/ProportionSales.tsx

@ -5,6 +5,7 @@ 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,

34
src/pages/dashboard/analysis/components/SalesCard.tsx

@ -50,16 +50,28 @@ const SalesCard = ({
tabBarExtraContent={
<div className={styles.salesExtraWrap}>
<div className={styles.salesExtra}>
<a className={isActive('today')} onClick={() => selectDate('today')}>
<a
className={isActive('today')}
onClick={() => selectDate('today')}
>
</a>
<a className={isActive('week')} onClick={() => selectDate('week')}>
<a
className={isActive('week')}
onClick={() => selectDate('week')}
>
</a>
<a className={isActive('month')} onClick={() => selectDate('month')}>
<a
className={isActive('month')}
onClick={() => selectDate('month')}
>
</a>
<a className={isActive('year')} onClick={() => selectDate('year')}>
<a
className={isActive('year')}
onClick={() => selectDate('year')}
>
</a>
</div>
@ -123,7 +135,10 @@ const SalesCard = ({
>
{i + 1}
</span>
<span className={styles.rankingItemTitle} title={item.title}>
<span
className={styles.rankingItemTitle}
title={item.title}
>
{item.title}
</span>
<span>{numeral(item.total).format('0,0')}</span>
@ -174,12 +189,17 @@ const SalesCard = ({
<li key={item.title}>
<span
className={`${
i < 3 ? styles.rankingItemNumberActive : styles.rankingItemNumber
i < 3
? styles.rankingItemNumberActive
: styles.rankingItemNumber
}`}
>
{i + 1}
</span>
<span className={styles.rankingItemTitle} title={item.title}>
<span
className={styles.rankingItemTitle}
title={item.title}
>
{item.title}
</span>
<span>{numeral(item.total).format('0,0')}</span>

10
src/pages/dashboard/analysis/components/TopSearch.tsx

@ -116,7 +116,10 @@ const TopSearch = ({
height={45}
axis={false}
padding={-12}
style={{ fill: 'linear-gradient(-90deg, white 0%, #6294FA 100%)', fillOpacity: 0.4 }}
style={{
fill: 'linear-gradient(-90deg, white 0%, #6294FA 100%)',
fillOpacity: 0.4,
}}
data={visitData2}
/>
</Col>
@ -151,7 +154,10 @@ const TopSearch = ({
shapeField="smooth"
height={45}
padding={-12}
style={{ fill: 'linear-gradient(-90deg, white 0%, #6294FA 100%)', fillOpacity: 0.4 }}
style={{
fill: 'linear-gradient(-90deg, white 0%, #6294FA 100%)',
fillOpacity: 0.4,
}}
data={visitData2}
axis={false}
/>

6
src/pages/dashboard/analysis/components/Trend/index.tsx

@ -30,7 +30,11 @@ const Trend: React.FC<TrendProps> = ({
className,
);
return (
<div {...rest} className={classString} title={typeof children === 'string' ? children : ''}>
<div
{...rest}
className={classString}
title={typeof children === 'string' ? children : ''}
>
<span>{children}</span>
{flag && (
<span className={styles[flag]}>

13
src/pages/dashboard/analysis/index.tsx

@ -18,8 +18,8 @@ import type { AnalysisData } from './data.d';
import { fakeChartData } from './service';
import useStyles from './style.style';
import { getTimeDistance } from './utils/utils';
type RangePickerValue = RangePickerProps<dayjs.Dayjs>[
'value'];
type RangePickerValue = RangePickerProps<dayjs.Dayjs>['value'];
type AnalysisProps = {
dashboardAndanalysis: AnalysisData;
loading: boolean;
@ -63,7 +63,10 @@ const Analysis: FC<AnalysisProps> = () => {
if (salesType === 'all') {
salesPieData = data?.salesTypeData;
} else {
salesPieData = salesType === 'online' ? data?.salesTypeDataOnline : data?.salesTypeDataOffline;
salesPieData =
salesType === 'online'
? data?.salesTypeDataOnline
: data?.salesTypeDataOffline;
}
const dropdownGroup = (
@ -93,10 +96,9 @@ const Analysis: FC<AnalysisProps> = () => {
const handleTabChange = (key: string) => {
setCurrentTabKey(key);
};
const activeKey = currentTabKey || (data?.offlineData[0]?.name) || '';
const activeKey = currentTabKey || data?.offlineData[0]?.name || '';
return (
<GridContent>
<Suspense fallback={<PageLoading />}>
<IntroduceRow loading={loading} visitData={data?.visitData || []} />
</Suspense>
@ -150,7 +152,6 @@ const Analysis: FC<AnalysisProps> = () => {
handleTabChange={handleTabChange}
/>
</Suspense>
</GridContent>
);
};

9
src/pages/dashboard/analysis/utils/utils.ts

@ -7,7 +7,9 @@ export function fixedZero(val: number) {
return val * 1 < 10 ? `0${val}` : val;
}
export function getTimeDistance(type: 'today' | 'week' | 'month' | 'year'): RangePickerValue {
export function getTimeDistance(
type: 'today' | 'week' | 'month' | 'year',
): RangePickerValue {
const now = new Date();
const oneDay = 1000 * 60 * 60 * 24;
@ -44,7 +46,10 @@ export function getTimeDistance(type: 'today' | 'week' | 'month' | 'year'): Rang
return [
dayjs(`${year}-${fixedZero(month + 1)}-01 00:00:00`),
dayjs(dayjs(`${nextYear}-${fixedZero(nextMonth + 1)}-01 00:00:00`).valueOf() - 1000),
dayjs(
dayjs(`${nextYear}-${fixedZero(nextMonth + 1)}-01 00:00:00`).valueOf() -
1000,
),
];
}

10
src/pages/dashboard/monitor/components/ActiveChart/index.style.ts

@ -15,7 +15,12 @@ const useStyles = createStyles(() => {
marginTop: '8px',
fontSize: '0',
lineHeight: '20px',
span: { display: 'inline-block', width: '33.33%', fontSize: '12px', textAlign: 'center' },
span: {
display: 'inline-block',
width: '33.33%',
fontSize: '12px',
textAlign: 'center',
},
'span:first-child': { textAlign: 'left' },
'span:last-child': { textAlign: 'right' },
},
@ -31,7 +36,8 @@ const useStyles = createStyles(() => {
left: '0',
width: '100%',
height: '100%',
backgroundImage: 'linear-gradient(to right, transparent 50%, #e9e9e9 50%)',
backgroundImage:
'linear-gradient(to right, transparent 50%, #e9e9e9 50%)',
backgroundSize: '6px',
},
'dashedLine:last-child': {

13
src/pages/dashboard/monitor/components/ActiveChart/index.tsx

@ -1,7 +1,8 @@
import { Area } from '@ant-design/plots';
import { Statistic } from 'antd';
import { useEffect, useRef, useState, useCallback } from 'react';
import { useCallback, useEffect, useRef, useState } from 'react';
import useStyles from './index.style';
function fixedZero(val: number) {
return val * 1 < 10 ? `0${val}` : val;
}
@ -54,7 +55,10 @@ const ActiveChart = () => {
axis={false}
yField="y"
height={84}
style={{ fill: 'linear-gradient(-90deg, white 0%, #6294FA 100%)', fillOpacity: 0.6 }}
style={{
fill: 'linear-gradient(-90deg, white 0%, #6294FA 100%)',
fillOpacity: 0.6,
}}
data={activeData}
/>
</div>
@ -62,7 +66,10 @@ const ActiveChart = () => {
<div>
<div className={styles.activeChartGrid}>
<p>{[...activeData].sort()[activeData.length - 1]?.y + 200} 亿</p>
<p>{[...activeData].sort()[Math.floor(activeData.length / 2)]?.y} 亿</p>
<p>
{[...activeData].sort()[Math.floor(activeData.length / 2)]?.y}{' '}
亿
</p>
</div>
<div className={styles.dashedLine}>
<div className={styles.line} />

6
src/pages/dashboard/monitor/components/Charts/WaterWave/index.tsx

@ -87,7 +87,11 @@ class WaterWave extends Component<WaterWaveProps> {
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)) {
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[];

4
src/pages/dashboard/monitor/components/Charts/autoHeight.tsx

@ -1,6 +1,8 @@
import React from 'react';
export type IReactComponent<P = any> = React.ComponentClass<P> | React.ClassicComponentClass<P>;
export type IReactComponent<P = any> =
| React.ComponentClass<P>
| React.ClassicComponentClass<P>;
function computeHeight(node: HTMLDivElement) {
const { style } = node;

10
src/pages/dashboard/monitor/components/Map/index.tsx

@ -2,7 +2,15 @@ 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'];
const colors = [
'#eff3ff',
'#c6dbef',
'#9ecae1',
'#6baed6',
'#4292c6',
'#2171b5',
'#084594',
];
export default class MonitorMap extends React.Component {
state = {
data: null,

21
src/pages/dashboard/monitor/index.tsx

@ -48,10 +48,18 @@ const Monitor: FC = () => {
<Statistic title="销售目标完成率" value="92%" />
</Col>
<Col md={6} sm={12} xs={24}>
<Countdown title="活动剩余时间" value={deadline} format="HH:mm:ss:SSS" />
<Countdown
title="活动剩余时间"
value={deadline}
format="HH:mm:ss:SSS"
/>
</Col>
<Col md={6} sm={12} xs={24}>
<Statistic title="每秒交易总额" suffix="元" value={numeral(234).format('0,0')} />
<Statistic
title="每秒交易总额"
suffix="元"
value={numeral(234).format('0,0')}
/>
</Col>
</Row>
<div className={styles.mapChart}>
@ -95,7 +103,13 @@ const Monitor: FC = () => {
}}
meta={{
color: {
range: ['#6395FA', '#62DAAB', '#657798', '#F7C128', '#1F8718'],
range: [
'#6395FA',
'#62DAAB',
'#657798',
'#F7C128',
'#1F8718',
],
},
}}
/>
@ -177,7 +191,6 @@ const Monitor: FC = () => {
</Card>
</Col>
</Row>
</GridContent>
);
};

20
src/pages/dashboard/workplace/index.tsx

@ -9,6 +9,7 @@ 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 = [
@ -89,8 +90,10 @@ const ExtraContent: FC<Record<string, any>> = () => {
};
const Workplace: FC = () => {
const { styles } = useStyles();
const { loading: projectLoading, data: projectNotice = [] } = useRequest(queryProjectNotice);
const { loading: activitiesLoading, data: activities = [] } = useRequest(queryActivities);
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) => {
@ -130,7 +133,8 @@ const Workplace: FC = () => {
content={
<PageHeaderContent
currentUser={{
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
avatar:
'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
name: '吴彦祖',
userid: '00000001',
email: 'antdesign@alipay.com',
@ -218,7 +222,11 @@ const Workplace: FC = () => {
padding: 0,
}}
>
<EditableLinkGroup onAdd={() => {}} links={links} linkElement={Link} />
<EditableLinkGroup
onAdd={() => {}}
links={links}
linkElement={Link}
/>
</Card>
<Card
style={{
@ -271,7 +279,9 @@ const Workplace: FC = () => {
<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>
<span className={styles.member}>
{item.member.substring(0, 3)}
</span>
</a>
</Col>
);

12
src/pages/dashboard/workplace/style.style.ts

@ -55,7 +55,8 @@ const useStyles = createStyles(({ token }) => {
},
float: 'right',
whiteSpace: 'nowrap',
[`@media screen and (max-width: ${token.screenXL}px) and (min-width: @screen-lg)`]: {
[`@media screen and (max-width: ${token.screenXL}px) and (min-width: @screen-lg)`]:
{
marginLeft: '-44px',
},
[`@media screen and (max-width: ${token.screenLG}px)`]: {
@ -101,7 +102,8 @@ const useStyles = createStyles(({ token }) => {
display: 'none',
},
},
[`@media screen and (max-width: ${token.screenXL}px) and (min-width: @screen-lg)`]: {
[`@media screen and (max-width: ${token.screenXL}px) and (min-width: @screen-lg)`]:
{
padding: '0 16px',
},
[`@media screen and (max-width: ${token.screenLG}px)`]: {
@ -128,7 +130,8 @@ const useStyles = createStyles(({ token }) => {
color: token.colorPrimary,
},
},
[`@media screen and (max-width: ${token.screenXL}px) and (min-width: @screen-lg)`]: {
[`@media screen and (max-width: ${token.screenXL}px) and (min-width: @screen-lg)`]:
{
marginBottom: '0',
},
[`@media screen and (max-width: ${token.screenLG}px)`]: {
@ -199,7 +202,8 @@ const useStyles = createStyles(({ token }) => {
color: token.colorTextDisabled,
},
activeCard: {
[`@media screen and (max-width: ${token.screenXL}px) and (min-width: @screen-lg)`]: {
[`@media screen and (max-width: ${token.screenXL}px) and (min-width: @screen-lg)`]:
{
marginBottom: '24px',
},
[`@media screen and (max-width: ${token.screenLG}px)`]: {

24
src/pages/form/advanced-form/components/TableForm.tsx

@ -3,6 +3,7 @@ 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;
@ -20,11 +21,16 @@ const TableForm: FC<TableFormProps> = ({ value, onChange }) => {
const [clickedCancel, setClickedCancel] = useState(false);
const [loading, setLoading] = useState(false);
const [index, setIndex] = useState(0);
const [cacheOriginData, setCacheOriginData] = useState<Record<string, any>>({});
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) => {
const toggleEditable = (
e: React.MouseEvent | React.KeyboardEvent,
key: string,
) => {
e.preventDefault();
const newData = data?.map((item) => ({
...item,
@ -59,7 +65,9 @@ const TableForm: FC<TableFormProps> = ({ value, onChange }) => {
setData(newData);
};
const remove = (key: string) => {
const newData = data?.filter((item) => item.key !== key) as TableFormDateType[];
const newData = data?.filter(
(item) => item.key !== key,
) as TableFormDateType[];
setData(newData);
if (onChange) {
onChange(newData);
@ -201,7 +209,10 @@ const TableForm: FC<TableFormProps> = ({ value, onChange }) => {
<span>
<a onClick={(e) => saveRow(e, record.key)}></a>
<Divider type="vertical" />
<Popconfirm title="是否要删除此行?" onConfirm={() => remove(record.key)}>
<Popconfirm
title="是否要删除此行?"
onConfirm={() => remove(record.key)}
>
<a></a>
</Popconfirm>
</span>
@ -219,7 +230,10 @@ const TableForm: FC<TableFormProps> = ({ value, onChange }) => {
<span>
<a onClick={(e) => toggleEditable(e, record.key)}></a>
<Divider type="vertical" />
<Popconfirm title="是否要删除此行?" onConfirm={() => remove(record.key)}>
<Popconfirm
title="是否要删除此行?"
onConfirm={() => remove(record.key)}
>
<a></a>
</Popconfirm>
</span>

15
src/pages/form/advanced-form/index.tsx

@ -15,6 +15,7 @@ import type { FC } from 'react';
import { useState } from 'react';
import { fakeSubmitForm } from './service';
import useStyles from './style.style';
interface TableFormDateType {
key: string;
workId?: string;
@ -80,9 +81,19 @@ const AdvancedForm: FC<Record<string, any>> = () => {
if (!err || err.errors.length === 0) {
return null;
}
const key = err.name[0] as 'name' | 'url' | 'owner' | 'approver' | 'dateRange' | 'type';
const key = err.name[0] as
| 'name'
| 'url'
| 'owner'
| 'approver'
| 'dateRange'
| 'type';
return (
<li key={key} className={styles.errorListItem} onClick={() => scrollToField(key)}>
<li
key={key}
className={styles.errorListItem}
onClick={() => scrollToField(key)}
>
<CloseCircleOutlined className={styles.errorIcon} />
<div className={styles.errorMessage}>{err.errors[0]}</div>
<div className={styles.errorField}>{fieldLabels[key]}</div>

4
src/pages/form/basic-form/index.tsx

@ -14,6 +14,7 @@ import { Card, message } from 'antd';
import type { FC } from 'react';
import { fakeSubmitForm } from './service';
import useStyles from './style.style';
const BasicForm: FC<Record<string, any>> = () => {
const { styles } = useStyles();
const { run } = useRequest(fakeSubmitForm, {
@ -163,7 +164,8 @@ const BasicForm: FC<Record<string, any>> = () => {
fieldProps={{
style: {
margin: '8px 0',
display: publicType && publicType === '2' ? 'block' : 'none',
display:
publicType && publicType === '2' ? 'block' : 'none',
},
}}
options={[

11
src/pages/form/step-form/index.tsx

@ -7,10 +7,19 @@ import {
StepsForm,
} from '@ant-design/pro-components';
import type { FormInstance } from 'antd';
import { Alert, Button, Card, Descriptions, Divider, Result, Statistic } from 'antd';
import {
Alert,
Button,
Card,
Descriptions,
Divider,
Result,
Statistic,
} from 'antd';
import React, { useRef, useState } from 'react';
import type { StepDataType } from './data.d';
import useStyles from './style.style';
const StepDescriptions: React.FC<{
stepData: StepDataType;
bordered?: boolean;

14
src/pages/list/basic-list/_mock.ts

@ -57,7 +57,10 @@ function fakeList(count: number): BasicListItemDataType[] {
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)],
cover:
parseInt(`${i / 4}`, 10) % 2 === 0
? covers[i % 4]
: covers[3 - (i % 4)],
status: ['active', 'exception', 'normal'][i % 3] as
| 'normal'
| 'exception'
@ -80,17 +83,20 @@ function fakeList(count: number): BasicListItemDataType[] {
'段落示意:蚂蚁金服设计平台 ant.design,用最小的工作量,无缝接入蚂蚁金服生态,提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design,用最小的工作量,无缝接入蚂蚁金服生态,提供跨越设计与开发的体验解决方案。',
members: [
{
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
avatar:
'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
name: '曲丽丽',
id: 'member1',
},
{
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
avatar:
'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
name: '王昭君',
id: 'member2',
},
{
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
avatar:
'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
name: '董娜娜',
id: 'member3',
},

1
src/pages/list/basic-list/components/OperationModal.tsx

@ -9,6 +9,7 @@ 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;

27
src/pages/list/basic-list/index.tsx

@ -19,8 +19,14 @@ import type { FC } from 'react';
import React, { useState } from 'react';
import OperationModal from './components/OperationModal';
import type { BasicListItemDataType } from './data.d';
import { addFakeList, queryFakeList, removeFakeList, updateFakeList } from './service';
import {
addFakeList,
queryFakeList,
removeFakeList,
updateFakeList,
} from './service';
import useStyles from './style.style';
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const { Search } = Input;
@ -71,7 +77,9 @@ export const BasicList: FC = () => {
const { styles } = useStyles();
const [done, setDone] = useState<boolean>(false);
const [open, setVisible] = useState<boolean>(false);
const [current, setCurrent] = useState<Partial<BasicListItemDataType> | undefined>(undefined);
const [current, setCurrent] = useState<
Partial<BasicListItemDataType> | undefined
>(undefined);
const {
data: listData,
loading,
@ -114,7 +122,10 @@ export const BasicList: FC = () => {
id,
});
};
const editAndDelete = (key: string | number, currentItem: BasicListItemDataType) => {
const editAndDelete = (
key: string | number,
currentItem: BasicListItemDataType,
) => {
if (key === 'edit') showEditModal(currentItem);
else if (key === 'delete') {
Modal.confirm({
@ -133,7 +144,11 @@ export const BasicList: FC = () => {
<RadioButton value="progress"></RadioButton>
<RadioButton value="waiting"></RadioButton>
</RadioGroup>
<Search className={styles.extraContentSearch} placeholder="请输入" onSearch={() => ({})} />
<Search
className={styles.extraContentSearch}
placeholder="请输入"
onSearch={() => ({})}
/>
</div>
);
const MoreBtn: React.FC<{
@ -221,7 +236,9 @@ export const BasicList: FC = () => {
]}
>
<List.Item.Meta
avatar={<Avatar src={item.logo} shape="square" size="large" />}
avatar={
<Avatar src={item.logo} shape="square" size="large" />
}
title={<a href={item.href}>{item.title}</a>}
description={item.subDescription}
/>

3
src/pages/list/basic-list/style.style.ts

@ -67,7 +67,8 @@ const useStyles = createStyles(({ token }) => {
width: '100%',
},
},
[`@media screen and (max-width: ${token.screenLG}px) and (min-width: @screen-md)`]: {
[`@media screen and (max-width: ${token.screenLG}px) and (min-width: @screen-md)`]:
{
'& > div': {
display: 'block',
},

14
src/pages/list/card-list/_mock.ts

@ -57,7 +57,10 @@ function fakeList(count: number): CardListItemDataType[] {
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)],
cover:
parseInt(`${i / 4}`, 10) % 2 === 0
? covers[i % 4]
: covers[3 - (i % 4)],
status: ['active', 'exception', 'normal'][i % 3] as
| 'normal'
| 'exception'
@ -80,17 +83,20 @@ function fakeList(count: number): CardListItemDataType[] {
'段落示意:蚂蚁金服设计平台 ant.design,用最小的工作量,无缝接入蚂蚁金服生态,提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design,用最小的工作量,无缝接入蚂蚁金服生态,提供跨越设计与开发的体验解决方案。',
members: [
{
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
avatar:
'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
name: '曲丽丽',
id: 'member1',
},
{
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
avatar:
'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
name: '王昭君',
id: 'member2',
},
{
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
avatar:
'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
name: '董娜娜',
id: 'member3',
},

32
src/pages/list/card-list/index.tsx

@ -5,6 +5,7 @@ import { Button, Card, List, Typography } from 'antd';
import type { CardListItemDataType } from './data.d';
import { queryFakeList } from './service';
import useStyles from './style.style';
const { Paragraph } = Typography;
const CardList = () => {
const { styles } = useStyles();
@ -17,20 +18,30 @@ const CardList = () => {
const content = (
<div className={styles.pageHeaderContent}>
<p>
ant.design
ant.design
</p>
<div className={styles.contentLink}>
<a>
<img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg" />{' '}
<img
alt=""
src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg"
/>{' '}
</a>
<a>
<img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg" />{' '}
<img
alt=""
src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg"
/>{' '}
</a>
<a>
<img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg" />{' '}
<img
alt=""
src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg"
/>{' '}
</a>
</div>
@ -68,10 +79,19 @@ const CardList = () => {
<Card
hoverable
className={styles.card}
actions={[<a key="option1"></a>, <a key="option2"></a>]}
actions={[
<a key="option1"></a>,
<a key="option2"></a>,
]}
>
<Card.Meta
avatar={<img alt="" className={styles.cardAvatar} src={item.avatar} />}
avatar={
<img
alt=""
className={styles.cardAvatar}
src={item.avatar}
/>
}
title={<a>{item.title}</a>}
description={
<Paragraph

14
src/pages/list/search/applications/_mock.ts

@ -56,7 +56,10 @@ function fakeList(count: number): ListItemDataType[] {
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)],
cover:
parseInt(`${i / 4}`, 10) % 2 === 0
? covers[i % 4]
: covers[3 - (i % 4)],
status: ['active', 'exception', 'normal'][i % 3] as
| 'normal'
| 'exception'
@ -79,17 +82,20 @@ function fakeList(count: number): ListItemDataType[] {
'段落示意:蚂蚁金服设计平台 ant.design,用最小的工作量,无缝接入蚂蚁金服生态,提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design,用最小的工作量,无缝接入蚂蚁金服生态,提供跨越设计与开发的体验解决方案。',
members: [
{
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
avatar:
'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
name: '曲丽丽',
id: 'member1',
},
{
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
avatar:
'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
name: '王昭君',
id: 'member2',
},
{
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
avatar:
'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
name: '董娜娜',
id: 'member3',
},

1
src/pages/list/search/applications/components/StandardFormRow/index.tsx

@ -1,6 +1,7 @@
import classNames from 'classnames';
import React from 'react';
import useStyles from './index.style';
type StandardFormRowProps = {
title?: string;
last?: boolean;

41
src/pages/list/search/applications/components/TagSelect/index.tsx

@ -4,6 +4,7 @@ import classNames from 'classnames';
import { useMergedState } from 'rc-util';
import React, { type FC, useState } from 'react';
import useStyles from './index.style';
const { CheckableTag } = Tag;
export interface TagSelectOptionProps {
value: string | number;
@ -26,7 +27,10 @@ const TagSelectOption: React.FC<TagSelectOptionProps> & {
TagSelectOption.isTagSelectOption = true;
type TagSelectOptionElement = React.ReactElement<TagSelectOptionProps, typeof TagSelectOption>;
type TagSelectOptionElement = React.ReactElement<
TagSelectOptionProps,
typeof TagSelectOption
>;
export interface TagSelectProps {
onChange?: (value: (string | number)[]) => void;
@ -48,20 +52,33 @@ const TagSelect: FC<TagSelectProps> & {
Option: typeof TagSelectOption;
} = (props) => {
const { styles } = useStyles();
const { children, hideCheckAll = false, className, style, expandable, actionsText = {} } = props;
const {
children,
hideCheckAll = false,
className,
style,
expandable,
actionsText = {},
} = props;
const [expand, setExpand] = useState<boolean>(false);
const [value, setValue] = useMergedState<(string | number)[]>(props.defaultValue || [], {
const [value, setValue] = useMergedState<(string | number)[]>(
props.defaultValue || [],
{
value: props.value,
defaultValue: props.defaultValue,
onChange: props.onChange,
});
},
);
const isTagSelectOption = (node: TagSelectOptionElement) =>
node?.type &&
(node.type.isTagSelectOption || node.type.displayName === 'TagSelectOption');
(node.type.isTagSelectOption ||
node.type.displayName === 'TagSelectOption');
const getAllTags = () => {
const childrenArray = React.Children.toArray(children) as TagSelectOptionElement[];
const childrenArray = React.Children.toArray(
children,
) as TagSelectOptionElement[];
const checkedTags = childrenArray
.filter((child) => isTagSelectOption(child))
.map((child) => child.props.value);
@ -85,7 +102,11 @@ const TagSelect: FC<TagSelectProps> & {
setValue(checkedTags);
};
const checkedAll = getAllTags().length === value?.length;
const { expandText = '展开', collapseText = '收起', selectAllText = '全部' } = actionsText;
const {
expandText = '展开',
collapseText = '收起',
selectAllText = '全部',
} = actionsText;
const cls = classNames(styles.tagSelect, className, {
[styles.hasExpandTag]: expandable,
[styles.expanded]: expand,
@ -93,7 +114,11 @@ const TagSelect: FC<TagSelectProps> & {
return (
<div className={cls} style={style}>
{hideCheckAll ? null : (
<CheckableTag checked={checkedAll} key="tag-select-__all__" onChange={onSelectAll}>
<CheckableTag
checked={checkedAll}
key="tag-select-__all__"
onChange={onSelectAll}
>
{selectAllText}
</CheckableTag>
)}

28
src/pages/list/search/applications/index.tsx

@ -5,7 +5,17 @@ import {
ShareAltOutlined,
} from '@ant-design/icons';
import { useRequest } from '@umijs/max';
import { Avatar, Card, Col, Dropdown, Form, List, Row, Select, Tooltip } from 'antd';
import {
Avatar,
Card,
Col,
Dropdown,
Form,
List,
Row,
Select,
Tooltip,
} from 'antd';
import numeral from 'numeral';
import type { FC } from 'react';
import React from 'react';
@ -97,11 +107,16 @@ export const Applications: FC<Record<string, any>> = () => {
<TagSelect expandable>
{categoryOptions
.filter(
(category): category is { value: string | number; label: string } =>
category.value !== undefined && category.value !== null
(
category,
): category is { value: string | number; label: string } =>
category.value !== undefined && category.value !== null,
)
.map((category) => (
<TagSelect.Option value={category.value} key={category.value}>
<TagSelect.Option
value={category.value}
key={category.value}
>
{category.label}
</TagSelect.Option>
))}
@ -202,7 +217,10 @@ export const Applications: FC<Record<string, any>> = () => {
</Dropdown>,
]}
>
<Card.Meta avatar={<Avatar size="small" src={item.avatar} />} title={item.title} />
<Card.Meta
avatar={<Avatar size="small" src={item.avatar} />}
title={item.title}
/>
<div>
<CardInfo
activeUser={formatWan(item.activeUser)}

14
src/pages/list/search/articles/_mock.ts

@ -56,7 +56,10 @@ function fakeList(count: number): ListItemDataType[] {
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)],
cover:
parseInt(`${i / 4}`, 10) % 2 === 0
? covers[i % 4]
: covers[3 - (i % 4)],
status: ['active', 'exception', 'normal'][i % 3] as
| 'normal'
| 'exception'
@ -79,17 +82,20 @@ function fakeList(count: number): ListItemDataType[] {
'段落示意:蚂蚁金服设计平台 ant.design,用最小的工作量,无缝接入蚂蚁金服生态,提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design,用最小的工作量,无缝接入蚂蚁金服生态,提供跨越设计与开发的体验解决方案。',
members: [
{
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
avatar:
'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
name: '曲丽丽',
id: 'member1',
},
{
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
avatar:
'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
name: '王昭君',
id: 'member2',
},
{
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
avatar:
'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
name: '董娜娜',
id: 'member3',
},

1
src/pages/list/search/articles/components/ArticleListContent/index.tsx

@ -2,6 +2,7 @@ import { Avatar } from 'antd';
import dayjs from 'dayjs';
import React from 'react';
import useStyles from './index.style';
type ArticleListContentProps = {
data: {
content: React.ReactNode;

1
src/pages/list/search/articles/components/StandardFormRow/index.tsx

@ -1,6 +1,7 @@
import classNames from 'classnames';
import React from 'react';
import useStyles from './index.style';
type StandardFormRowProps = {
title?: string;
last?: boolean;

41
src/pages/list/search/articles/components/TagSelect/index.tsx

@ -4,6 +4,7 @@ import classNames from 'classnames';
import { useMergedState } from 'rc-util';
import React, { type FC, useState } from 'react';
import useStyles from './index.style';
const { CheckableTag } = Tag;
export interface TagSelectOptionProps {
value: string | number;
@ -26,7 +27,10 @@ const TagSelectOption: React.FC<TagSelectOptionProps> & {
TagSelectOption.isTagSelectOption = true;
type TagSelectOptionElement = React.ReactElement<TagSelectOptionProps, typeof TagSelectOption>;
type TagSelectOptionElement = React.ReactElement<
TagSelectOptionProps,
typeof TagSelectOption
>;
export interface TagSelectProps {
onChange?: (value: (string | number)[]) => void;
@ -48,20 +52,33 @@ const TagSelect: FC<TagSelectProps> & {
Option: typeof TagSelectOption;
} = (props) => {
const { styles } = useStyles();
const { children, hideCheckAll = false, className, style, expandable, actionsText = {} } = props;
const {
children,
hideCheckAll = false,
className,
style,
expandable,
actionsText = {},
} = props;
const [expand, setExpand] = useState<boolean>(false);
const [value, setValue] = useMergedState<(string | number)[]>(props.defaultValue || [], {
const [value, setValue] = useMergedState<(string | number)[]>(
props.defaultValue || [],
{
value: props.value,
defaultValue: props.defaultValue,
onChange: props.onChange,
});
},
);
const isTagSelectOption = (node: TagSelectOptionElement) =>
node?.type &&
(node.type.isTagSelectOption || node.type.displayName === 'TagSelectOption');
(node.type.isTagSelectOption ||
node.type.displayName === 'TagSelectOption');
const getAllTags = () => {
const childrenArray = React.Children.toArray(children) as TagSelectOptionElement[];
const childrenArray = React.Children.toArray(
children,
) as TagSelectOptionElement[];
const checkedTags = childrenArray
.filter((child) => isTagSelectOption(child))
.map((child) => child.props.value);
@ -85,7 +102,11 @@ const TagSelect: FC<TagSelectProps> & {
setValue(checkedTags);
};
const checkedAll = getAllTags().length === value?.length;
const { expandText = '展开', collapseText = '收起', selectAllText = '全部' } = actionsText;
const {
expandText = '展开',
collapseText = '收起',
selectAllText = '全部',
} = actionsText;
const cls = classNames(styles.tagSelect, className, {
[styles.hasExpandTag]: expandable,
[styles.expanded]: expand,
@ -93,7 +114,11 @@ const TagSelect: FC<TagSelectProps> & {
return (
<div className={cls} style={style}>
{hideCheckAll ? null : (
<CheckableTag checked={checkedAll} key="tag-select-__all__" onChange={onSelectAll}>
<CheckableTag
checked={checkedAll}
key="tag-select-__all__"
onChange={onSelectAll}
>
{selectAllText}
</CheckableTag>
)}

18
src/pages/list/search/articles/index.tsx

@ -1,4 +1,9 @@
import { LikeOutlined, LoadingOutlined, MessageOutlined, StarOutlined } from '@ant-design/icons';
import {
LikeOutlined,
LoadingOutlined,
MessageOutlined,
StarOutlined,
} from '@ant-design/icons';
import { useRequest } from '@umijs/max';
import { Button, Card, Col, Form, List, Row, Select, Tag } from 'antd';
import type { DefaultOptionType } from 'antd/es/select';
@ -141,11 +146,16 @@ const Articles: FC = () => {
<TagSelect expandable>
{categoryOptions
.filter(
(category): category is { value: string | number; label: string } =>
category.value !== undefined && category.value !== null
(
category,
): category is { value: string | number; label: string } =>
category.value !== undefined && category.value !== null,
)
.map((category) => (
<TagSelect.Option value={category.value} key={category.value}>
<TagSelect.Option
value={category.value}
key={category.value}
>
{category.label}
</TagSelect.Option>
))}

8
src/pages/list/search/index.tsx

@ -27,7 +27,9 @@ const Search: FC<SearchProps> = () => {
const match = useMatch(location.pathname);
const handleTabChange = (key: string) => {
const url =
match?.pathname === '/' ? '' : match?.pathname.substring(0, match.pathname.lastIndexOf('/'));
match?.pathname === '/'
? ''
: match?.pathname.substring(0, match.pathname.lastIndexOf('/'));
switch (key) {
case 'articles':
history.push(`${url}/articles`);
@ -49,7 +51,9 @@ const Search: FC<SearchProps> = () => {
};
const getTabKey = () => {
const tabKey = location.pathname.substring(location.pathname.lastIndexOf('/') + 1);
const tabKey = location.pathname.substring(
location.pathname.lastIndexOf('/') + 1,
);
if (tabKey && tabKey !== '/') {
return tabKey;
}

14
src/pages/list/search/projects/_mock.ts

@ -56,7 +56,10 @@ function fakeList(count: number): ListItemDataType[] {
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)],
cover:
parseInt(`${i / 4}`, 10) % 2 === 0
? covers[i % 4]
: covers[3 - (i % 4)],
status: ['active', 'exception', 'normal'][i % 3] as
| 'normal'
| 'exception'
@ -79,17 +82,20 @@ function fakeList(count: number): ListItemDataType[] {
'段落示意:蚂蚁金服设计平台 ant.design,用最小的工作量,无缝接入蚂蚁金服生态,提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design,用最小的工作量,无缝接入蚂蚁金服生态,提供跨越设计与开发的体验解决方案。',
members: [
{
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
avatar:
'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
name: '曲丽丽',
id: 'member1',
},
{
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
avatar:
'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
name: '王昭君',
id: 'member2',
},
{
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
avatar:
'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
name: '董娜娜',
id: 'member3',
},

20
src/pages/list/search/projects/components/AvatarList/index.tsx

@ -16,7 +16,9 @@ export type AvatarListProps = {
maxLength?: number;
excessItemsStyle?: React.CSSProperties;
style?: React.CSSProperties;
children: React.ReactElement<AvatarItemProps> | React.ReactElement<AvatarItemProps>[];
children:
| React.ReactElement<AvatarItemProps>
| React.ReactElement<AvatarItemProps>[];
};
const avatarSizeToClassName = (size: SizeType | 'mini', styles: any) =>
classNames(styles.avatarItem, {
@ -25,7 +27,12 @@ const avatarSizeToClassName = (size: SizeType | 'mini', styles: any) =>
[styles.avatarItemMini]: size === 'mini',
});
const Item: React.FC<AvatarItemProps> = ({ src, size, tips, onClick = () => {} }) => {
const Item: React.FC<AvatarItemProps> = ({
src,
size,
tips,
onClick = () => {},
}) => {
const { styles } = useStyles();
const cls = avatarSizeToClassName(size || 'default', styles);
@ -54,7 +61,9 @@ const AvatarList: React.FC<AvatarListProps> & {
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 childrenArray = React.Children.toArray(
children,
) as React.ReactElement<AvatarItemProps>[];
const childrenWithProps = childrenArray.slice(0, numToShow).map((child) =>
React.cloneElement(child, {
@ -65,7 +74,10 @@ const AvatarList: React.FC<AvatarListProps> & {
const cls = avatarSizeToClassName(size || 'default', styles);
childrenWithProps.push(
<li key="exceed" className={cls}>
<Avatar size={size} style={excessItemsStyle}>{`+${numOfChildren - maxLength}`}</Avatar>
<Avatar
size={size}
style={excessItemsStyle}
>{`+${numOfChildren - maxLength}`}</Avatar>
</li>,
);
}

1
src/pages/list/search/projects/components/StandardFormRow/index.tsx

@ -1,6 +1,7 @@
import classNames from 'classnames';
import React from 'react';
import useStyles from './index.style';
type StandardFormRowProps = {
title?: string;
last?: boolean;

41
src/pages/list/search/projects/components/TagSelect/index.tsx

@ -4,6 +4,7 @@ import classNames from 'classnames';
import { useMergedState } from 'rc-util';
import React, { type FC, useState } from 'react';
import useStyles from './index.style';
const { CheckableTag } = Tag;
export interface TagSelectOptionProps {
value: string | number;
@ -26,7 +27,10 @@ const TagSelectOption: React.FC<TagSelectOptionProps> & {
TagSelectOption.isTagSelectOption = true;
type TagSelectOptionElement = React.ReactElement<TagSelectOptionProps, typeof TagSelectOption>;
type TagSelectOptionElement = React.ReactElement<
TagSelectOptionProps,
typeof TagSelectOption
>;
export interface TagSelectProps {
onChange?: (value: (string | number)[]) => void;
@ -48,20 +52,33 @@ const TagSelect: FC<TagSelectProps> & {
Option: typeof TagSelectOption;
} = (props) => {
const { styles } = useStyles();
const { children, hideCheckAll = false, className, style, expandable, actionsText = {} } = props;
const {
children,
hideCheckAll = false,
className,
style,
expandable,
actionsText = {},
} = props;
const [expand, setExpand] = useState<boolean>(false);
const [value, setValue] = useMergedState<(string | number)[]>(props.defaultValue || [], {
const [value, setValue] = useMergedState<(string | number)[]>(
props.defaultValue || [],
{
value: props.value,
defaultValue: props.defaultValue,
onChange: props.onChange,
});
},
);
const isTagSelectOption = (node: TagSelectOptionElement) =>
node?.type &&
(node.type.isTagSelectOption || node.type.displayName === 'TagSelectOption');
(node.type.isTagSelectOption ||
node.type.displayName === 'TagSelectOption');
const getAllTags = () => {
const childrenArray = React.Children.toArray(children) as TagSelectOptionElement[];
const childrenArray = React.Children.toArray(
children,
) as TagSelectOptionElement[];
const checkedTags = childrenArray
.filter((child) => isTagSelectOption(child))
.map((child) => child.props.value);
@ -85,7 +102,11 @@ const TagSelect: FC<TagSelectProps> & {
setValue(checkedTags);
};
const checkedAll = getAllTags().length === value?.length;
const { expandText = '展开', collapseText = '收起', selectAllText = '全部' } = actionsText;
const {
expandText = '展开',
collapseText = '收起',
selectAllText = '全部',
} = actionsText;
const cls = classNames(styles.tagSelect, className, {
[styles.hasExpandTag]: expandable,
[styles.expanded]: expand,
@ -93,7 +114,11 @@ const TagSelect: FC<TagSelectProps> & {
return (
<div className={cls} style={style}>
{hideCheckAll ? null : (
<CheckableTag checked={checkedAll} key="tag-select-__all__" onChange={onSelectAll}>
<CheckableTag
checked={checkedAll}
key="tag-select-__all__"
onChange={onSelectAll}
>
{selectAllText}
</CheckableTag>
)}

17
src/pages/list/search/projects/index.tsx

@ -41,7 +41,11 @@ const Projects: FC = () => {
dataSource={list}
renderItem={(item) => (
<List.Item>
<Card className={styles.card} hoverable cover={<img alt={item.title} src={item.cover} />}>
<Card
className={styles.card}
hoverable
cover={<img alt={item.title} src={item.cover} />}
>
<Card.Meta
title={<a>{item.title}</a>}
description={
@ -105,11 +109,16 @@ const Projects: FC = () => {
<TagSelect expandable>
{categoryOptions
.filter(
(category): category is { value: string | number; label: string } =>
category.value !== undefined && category.value !== null
(
category,
): category is { value: string | number; label: string } =>
category.value !== undefined && category.value !== null,
)
.map((category) => (
<TagSelect.Option value={category.value} key={category.value}>
<TagSelect.Option
value={category.value}
key={category.value}
>
{category.label}
</TagSelect.Option>
))}

22
src/pages/list/table-list/_mock.ts

@ -1,5 +1,5 @@
import type { Request, Response } from 'express';
import { parse } from 'node:url';
import type { Request, Response } from 'express';
import type { TableListItem, TableListParams } from './data.d';
// mock tableListDataSource
@ -34,7 +34,10 @@ let tableListDataSource = genList(1, 100);
function getRule(req: Request, res: Response, u: string) {
let realUrl = u;
if (!realUrl || Object.prototype.toString.call(realUrl) !== '[object String]') {
if (
!realUrl ||
Object.prototype.toString.call(realUrl) !== '[object String]'
) {
realUrl = req.url;
}
const { current = 1, pageSize = 10 } = req.query;
@ -84,7 +87,9 @@ function getRule(req: Request, res: Response, u: string) {
}
if (params.name) {
dataSource = dataSource.filter((data) => data.name.includes(params.name || ''));
dataSource = dataSource.filter((data) =>
data.name.includes(params.name || ''),
);
}
let finalPageSize = 10;
@ -105,17 +110,22 @@ function getRule(req: Request, res: Response, u: string) {
function postRule(req: Request, res: Response, u: string, b: Request) {
let realUrl = u;
if (!realUrl || Object.prototype.toString.call(realUrl) !== '[object String]') {
if (
!realUrl ||
Object.prototype.toString.call(realUrl) !== '[object String]'
) {
realUrl = req.url;
}
const body = (b?.body) || req.body;
const body = b?.body || req.body;
const { name, desc, key } = body;
switch (req.method) {
/* eslint no-case-declarations:0 */
case 'DELETE':
tableListDataSource = tableListDataSource.filter((item) => key.indexOf(item.key) === -1);
tableListDataSource = tableListDataSource.filter(
(item) => key.indexOf(item.key) === -1,
);
break;
case 'POST':
(() => {

22
src/pages/list/table-list/index.tsx

@ -1,5 +1,9 @@
import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns, ProDescriptionsItemProps } from '@ant-design/pro-components';
import type {
ActionType,
ProColumns,
ProDescriptionsItemProps,
} from '@ant-design/pro-components';
import {
FooterToolbar,
ModalForm,
@ -15,6 +19,7 @@ import type { FormValueType } from './components/UpdateForm';
import UpdateForm from './components/UpdateForm';
import type { TableListItem, TableListPagination } from './data';
import { addRule, removeRule, rule, updateRule } from './service';
/**
*
*
@ -41,7 +46,10 @@ const handleAdd = async (fields: TableListItem) => {
* @param fields
*/
const handleUpdate = async (fields: FormValueType, currentRow?: TableListItem) => {
const handleUpdate = async (
fields: FormValueType,
currentRow?: TableListItem,
) => {
const hide = message.loading('正在配置');
try {
@ -87,7 +95,8 @@ const TableList: React.FC = () => {
const [createModalVisible, handleModalVisible] = useState<boolean>(false);
/** 分布更新窗口的弹窗 */
const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);
const [updateModalVisible, handleUpdateModalVisible] =
useState<boolean>(false);
const [showDetail, setShowDetail] = useState<boolean>(false);
const actionRef = useRef<ActionType>();
const [currentRow, setCurrentRow] = useState<TableListItem>();
@ -229,7 +238,12 @@ const TableList: React.FC = () => {
</a>{' '}
&nbsp;&nbsp;
<span>
{selectedRowsState.reduce((pre, item) => pre + (item.callNo ?? 0), 0)}
{' '}
{selectedRowsState.reduce(
(pre, item) => pre + (item.callNo ?? 0),
0,
)}{' '}
</span>
</div>
}

15
src/pages/list/table-list/service.ts

@ -29,7 +29,10 @@ export async function rule(
}
/** 新建规则 PUT /api/rule */
export async function updateRule(data: { [key: string]: any }, options?: { [key: string]: any }) {
export async function updateRule(
data: { [key: string]: any },
options?: { [key: string]: any },
) {
return request<TableListItem>('/api/rule', {
data,
method: 'PUT',
@ -38,7 +41,10 @@ export async function updateRule(data: { [key: string]: any }, options?: { [key:
}
/** 新建规则 POST /api/rule */
export async function addRule(data: { [key: string]: any }, options?: { [key: string]: any }) {
export async function addRule(
data: { [key: string]: any },
options?: { [key: string]: any },
) {
return request<TableListItem>('/api/rule', {
data,
method: 'POST',
@ -47,7 +53,10 @@ export async function addRule(data: { [key: string]: any }, options?: { [key: st
}
/** 删除规则 DELETE /api/rule */
export async function removeRule(data: { key: number[] }, options?: { [key: string]: any }) {
export async function removeRule(
data: { key: number[] },
options?: { [key: string]: any },
) {
return request<Record<string, any>>('/api/rule', {
data,
method: 'DELETE',

60
src/pages/profile/advanced/index.tsx

@ -4,7 +4,11 @@ import {
EllipsisOutlined,
InfoCircleOutlined,
} from '@ant-design/icons';
import { GridContent, PageContainer, RouteContext } from '@ant-design/pro-components';
import {
GridContent,
PageContainer,
RouteContext,
} from '@ant-design/pro-components';
import { useRequest } from '@umijs/max';
import {
Badge,
@ -160,15 +164,23 @@ const Advanced: FC = () => {
const description = (
<RouteContext.Consumer>
{({ isMobile }) => (
<Descriptions className={styles.headerList} size="small" column={isMobile ? 1 : 2}>
<Descriptions
className={styles.headerList}
size="small"
column={isMobile ? 1 : 2}
>
<Descriptions.Item label="创建人"></Descriptions.Item>
<Descriptions.Item label="订购产品">XX </Descriptions.Item>
<Descriptions.Item label="创建时间">2017-07-07</Descriptions.Item>
<Descriptions.Item label="关联单据">
<a href="">12421</a>
</Descriptions.Item>
<Descriptions.Item label="生效日期">2017-07-07 ~ 2017-08-08</Descriptions.Item>
<Descriptions.Item label="备注"></Descriptions.Item>
<Descriptions.Item label="生效日期">
2017-07-07 ~ 2017-08-08
</Descriptions.Item>
<Descriptions.Item label="备注">
</Descriptions.Item>
</Descriptions>
)}
</RouteContext.Consumer>
@ -252,7 +264,11 @@ const Advanced: FC = () => {
);
if (status === 'process') {
return (
<Popover placement="topLeft" arrowPointAtCenter content={popoverContent}>
<Popover
placement="topLeft"
arrowPointAtCenter
content={popoverContent}
>
<span>{dot}</span>
</Popover>
);
@ -358,9 +374,15 @@ const Advanced: FC = () => {
}}
>
<Descriptions.Item label="用户姓名"></Descriptions.Item>
<Descriptions.Item label="会员卡号">32943898021309809423</Descriptions.Item>
<Descriptions.Item label="身份证">3321944288191034921</Descriptions.Item>
<Descriptions.Item label="联系方式">18112345678</Descriptions.Item>
<Descriptions.Item label="会员卡号">
32943898021309809423
</Descriptions.Item>
<Descriptions.Item label="身份证">
3321944288191034921
</Descriptions.Item>
<Descriptions.Item label="联系方式">
18112345678
</Descriptions.Item>
<Descriptions.Item label="联系地址">
18100000000 西
</Descriptions.Item>
@ -372,7 +394,9 @@ const Advanced: FC = () => {
title="信息组"
>
<Descriptions.Item label="某某数据">725</Descriptions.Item>
<Descriptions.Item label="该数据更新时间">2017-08-08</Descriptions.Item>
<Descriptions.Item label="该数据更新时间">
2017-08-08
</Descriptions.Item>
<Descriptions.Item
label={
<span>
@ -390,7 +414,9 @@ const Advanced: FC = () => {
>
725
</Descriptions.Item>
<Descriptions.Item label="该数据更新时间">2017-08-08</Descriptions.Item>
<Descriptions.Item label="该数据更新时间">
2017-08-08
</Descriptions.Item>
</Descriptions>
<h4
style={{
@ -408,8 +434,12 @@ const Advanced: FC = () => {
>
<Descriptions.Item label="负责人"></Descriptions.Item>
<Descriptions.Item label="角色码">1234567</Descriptions.Item>
<Descriptions.Item label="所属部门">XX公司 - YY部</Descriptions.Item>
<Descriptions.Item label="过期时间">2017-08-08</Descriptions.Item>
<Descriptions.Item label="所属部门">
XX公司 - YY部
</Descriptions.Item>
<Descriptions.Item label="过期时间">
2017-08-08
</Descriptions.Item>
<Descriptions.Item label="描述">
...
</Descriptions.Item>
@ -451,7 +481,11 @@ const Advanced: FC = () => {
>
<Empty />
</Card>
<Card bordered={false} tabList={operationTabList} onTabChange={onOperationTabChange}>
<Card
bordered={false}
tabList={operationTabList}
onTabChange={onOperationTabChange}
>
{contentList[tabStatus.operationKey] as React.ReactNode}
</Card>
</GridContent>

5
src/pages/profile/basic/index.tsx

@ -7,6 +7,7 @@ import React from 'react';
import type { BasicGood, BasicProgress } from './data.d';
import { queryBasicProfile } from './service';
import useStyles from './style.style';
const progressColumns: ProColumns<BasicProgress>[] = [
{
title: '时间',
@ -191,7 +192,9 @@ const Basic: FC = () => {
<Descriptions.Item label="用户姓名"></Descriptions.Item>
<Descriptions.Item label="联系电话">18100000000</Descriptions.Item>
<Descriptions.Item label="常用快递"></Descriptions.Item>
<Descriptions.Item label="取货地址">西18</Descriptions.Item>
<Descriptions.Item label="取货地址">
西18
</Descriptions.Item>
<Descriptions.Item label="备注"></Descriptions.Item>
</Descriptions>
<Divider

4
src/pages/result/success/index.tsx

@ -56,7 +56,9 @@ export default () => {
<Descriptions title="项目名称">
<Descriptions.Item label="项目 ID">23421</Descriptions.Item>
<Descriptions.Item label="负责人"></Descriptions.Item>
<Descriptions.Item label="生效时间">2016-12-12 ~ 2017-12-12</Descriptions.Item>
<Descriptions.Item label="生效时间">
2016-12-12 ~ 2017-12-12
</Descriptions.Item>
</Descriptions>
<br />
<Steps progressDot current={1}>

9
src/pages/table-list/components/CreateForm.tsx

@ -1,9 +1,14 @@
import { addRule } from '@/services/ant-design-pro/api';
import { PlusOutlined } from '@ant-design/icons';
import { type ActionType, ModalForm, ProFormText, ProFormTextArea } from '@ant-design/pro-components';
import {
type ActionType,
ModalForm,
ProFormText,
ProFormTextArea,
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl, useRequest } from '@umijs/max';
import { Button, message } from 'antd';
import type { FC } from 'react';
import { addRule } from '@/services/ant-design-pro/api';
interface CreateFormProps {
reload?: ActionType['reload'];

4
src/pages/table-list/components/UpdateForm.tsx

@ -1,4 +1,3 @@
import { updateRule } from '@/services/ant-design-pro/api';
import {
ProFormDateTimePicker,
ProFormRadio,
@ -8,8 +7,9 @@ import {
StepsForm,
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl, useRequest } from '@umijs/max';
import { message, Modal } from 'antd';
import { Modal, message } from 'antd';
import React, { cloneElement, useCallback, useState } from 'react';
import { updateRule } from '@/services/ant-design-pro/api';
export type FormValueType = {
target?: string;

17
src/pages/table-list/index.tsx

@ -1,5 +1,8 @@
import { removeRule, rule } from '@/services/ant-design-pro/api';
import type { ActionType, ProColumns, ProDescriptionsItemProps } from '@ant-design/pro-components';
import type {
ActionType,
ProColumns,
ProDescriptionsItemProps,
} from '@ant-design/pro-components';
import {
FooterToolbar,
PageContainer,
@ -9,6 +12,7 @@ import {
import { FormattedMessage, useIntl, useRequest } from '@umijs/max';
import { Button, Drawer, Input, message } from 'antd';
import React, { useCallback, useRef, useState } from 'react';
import { removeRule, rule } from '@/services/ant-design-pro/api';
import CreateForm from './components/CreateForm';
import UpdateForm from './components/UpdateForm';
@ -178,7 +182,10 @@ const TableList: React.FC = () => {
<UpdateForm
trigger={
<a>
<FormattedMessage id="pages.searchTable.config" defaultMessage="Configuration" />
<FormattedMessage
id="pages.searchTable.config"
defaultMessage="Configuration"
/>
</a>
}
key="config"
@ -231,7 +238,9 @@ const TableList: React.FC = () => {
search={{
labelWidth: 120,
}}
toolBarRender={() => [<CreateForm key="create" reload={actionRef.current?.reload} />]}
toolBarRender={() => [
<CreateForm key="create" reload={actionRef.current?.reload} />,
]}
request={rule}
columns={columns}
rowSelection={{

19
src/pages/user/register/index.tsx

@ -1,5 +1,16 @@
import { history, Link, useRequest } from '@umijs/max';
import { Button, Col, Form, Input, message, Popover, Progress, Row, Select, Space } from 'antd';
import {
Button,
Col,
Form,
Input,
message,
Popover,
Progress,
Row,
Select,
Space,
} from 'antd';
import type { Store } from 'antd/es/form/interface';
import type { FC } from 'react';
import { useEffect, useState } from 'react';
@ -198,7 +209,11 @@ const Register: FC = () => {
},
]}
>
<Input size="large" type="password" placeholder="至少6位密码,区分大小写" />
<Input
size="large"
type="password"
placeholder="至少6位密码,区分大小写"
/>
</FormItem>
</Popover>
<FormItem

Loading…
Cancel
Save