From 440197a7bf9bd01ba3ff551988d24bab23afcd05 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9C=9F=E8=B4=A4?= Date: Thu, 23 Mar 2023 11:10:00 +0800 Subject: [PATCH] css --- src/pages/User/register-result/style.style.ts | 28 +- src/pages/User/register/style.style.ts | 28 +- src/pages/account/center/Center.style.ts | 70 ++-- .../components/Applications/index.style.ts | 58 ++-- .../center/components/Applications/index.tsx | 47 +-- .../ArticleListContent/index.style.ts | 14 +- .../components/ArticleListContent/index.tsx | 10 +- .../center/components/Articles/index.style.ts | 8 +- .../center/components/Articles/index.tsx | 22 +- .../components/AvatarList/index.style.ts | 32 +- .../center/components/AvatarList/index.tsx | 43 +-- .../center/components/Projects/index.style.ts | 48 +-- .../center/components/Projects/index.tsx | 29 +- src/pages/account/center/index.tsx | 70 ++-- .../settings/components/BaseView.style.ts | 42 +-- .../account/settings/components/PhoneView.tsx | 10 +- src/pages/account/settings/index.tsx | 56 ++- src/pages/account/settings/style.style.ts | 72 ++-- .../analysis/components/Charts/Bar/index.tsx | 31 +- .../Charts/ChartCard/index.style.ts | 82 ++--- .../components/Charts/Field/index.style.ts | 14 +- .../components/Charts/Field/index.tsx | 4 +- .../components/Charts/MiniArea/index.tsx | 22 +- .../components/Charts/MiniBar/index.tsx | 31 +- .../components/Charts/MiniProgress/index.tsx | 8 +- .../analysis/components/Charts/Pie/index.tsx | 90 ++--- .../components/Charts/TagCloud/index.tsx | 47 ++- .../components/Charts/TimelineChart/index.tsx | 58 ++-- .../components/Charts/WaterWave/index.tsx | 34 +- .../analysis/components/Charts/index.style.ts | 26 +- .../analysis/components/IntroduceRow.tsx | 55 +-- .../components/NumberInfo/index.style.ts | 42 +-- .../analysis/components/NumberInfo/index.tsx | 23 +- .../analysis/components/OfflineData.tsx | 25 +- .../analysis/components/ProportionSales.tsx | 30 +- .../analysis/components/SalesCard.tsx | 70 ++-- .../analysis/components/Trend/index.style.ts | 18 +- .../analysis/components/Trend/index.tsx | 20 +- src/pages/dashboard/analysis/index.tsx | 72 ++-- src/pages/dashboard/analysis/style.style.ts | 136 ++++---- .../dashboard/analysis/utils/utils.style.ts | 2 +- .../components/ActiveChart/index.style.ts | 67 ++-- .../components/Charts/MiniArea/index.tsx | 22 +- .../monitor/components/Charts/Pie/index.tsx | 91 ++--- .../components/Charts/TagCloud/index.tsx | 47 ++- .../components/Charts/WaterWave/index.tsx | 34 +- src/pages/dashboard/monitor/index.tsx | 71 ++-- src/pages/dashboard/monitor/style.style.ts | 10 +- .../EditableLinkGroup/index.style.ts | 16 +- .../components/EditableLinkGroup/index.tsx | 14 +- .../workplace/components/Radar/index.tsx | 322 ++++++++---------- src/pages/dashboard/workplace/index.tsx | 79 ++--- src/pages/dashboard/workplace/style.style.ts | 158 ++++----- .../advanced-form/components/TableForm.tsx | 85 ++--- src/pages/form/advanced-form/index.tsx | 196 +++++------ src/pages/form/advanced-form/style.style.ts | 52 +-- src/pages/form/basic-form/index.tsx | 63 ++-- src/pages/form/basic-form/style.style.ts | 4 +- src/pages/form/step-form/index.tsx | 62 ++-- src/pages/form/step-form/style.style.ts | 10 +- .../basic-list/components/OperationModal.tsx | 32 +- src/pages/list/basic-list/index.tsx | 74 ++-- src/pages/list/basic-list/style.style.ts | 94 ++--- .../list/basic-list/utils/utils.style.ts | 2 +- src/pages/list/card-list/index.tsx | 45 +-- src/pages/list/card-list/style.style.ts | 56 +-- src/pages/list/card-list/utils/utils.style.ts | 2 +- .../components/StandardFormRow/index.style.ts | 52 +-- .../components/StandardFormRow/index.tsx | 6 +- .../components/TagSelect/index.style.ts | 38 +-- .../components/TagSelect/index.tsx | 47 +-- src/pages/list/search/applications/index.tsx | 70 ++-- .../list/search/applications/style.style.ts | 56 +-- .../search/applications/utils/utils.style.ts | 2 +- .../ArticleListContent/index.style.ts | 14 +- .../components/ArticleListContent/index.tsx | 10 +- .../components/StandardFormRow/index.style.ts | 54 +-- .../components/StandardFormRow/index.tsx | 6 +- .../components/TagSelect/index.style.ts | 38 +-- .../articles/components/TagSelect/index.tsx | 47 +-- src/pages/list/search/articles/index.tsx | 71 ++-- src/pages/list/search/articles/style.style.ts | 12 +- .../components/AvatarList/index.style.ts | 32 +- .../projects/components/AvatarList/index.tsx | 43 +-- .../components/StandardFormRow/index.style.ts | 54 +-- .../components/StandardFormRow/index.tsx | 6 +- .../components/TagSelect/index.style.ts | 38 +-- .../projects/components/TagSelect/index.tsx | 47 +-- src/pages/list/search/projects/index.tsx | 34 +- src/pages/list/search/projects/style.style.ts | 48 +-- .../list/search/projects/utils/utils.style.ts | 2 +- src/pages/profile/advanced/style.style.ts | 34 +- src/pages/profile/basic/index.tsx | 100 +++--- src/pages/profile/basic/style.style.ts | 8 +- src/pages/result/fail/index.style.ts | 8 +- src/pages/result/success/index.style.ts | 16 +- src/pages/user/register-result/index.tsx | 10 +- src/pages/user/register/index.tsx | 100 +++--- 98 files changed, 1994 insertions(+), 2444 deletions(-) diff --git a/src/pages/User/register-result/style.style.ts b/src/pages/User/register-result/style.style.ts index b715734e..0191d0d2 100644 --- a/src/pages/User/register-result/style.style.ts +++ b/src/pages/User/register-result/style.style.ts @@ -1,27 +1,27 @@ -import { createStyles } from "antd-style"; +import { createStyles } from 'antd-style'; const useStyles = createStyles(() => { return { registerResult: { - width: "800px", - minHeight: "400px", - margin: "auto", - padding: "80px", - background: "none", + width: '800px', + minHeight: '400px', + margin: 'auto', + padding: '80px', + background: 'none', }, - ".anticon": { - fontSize: "64px", + '.anticon': { + fontSize: '64px', }, title: { - marginTop: "32px", - fontSize: "20px", - lineHeight: "28px", + marginTop: '32px', + fontSize: '20px', + lineHeight: '28px', }, actions: { - marginTop: "40px", + marginTop: '40px', }, - "a + a": { - marginLeft: "8px", + 'a + a': { + marginLeft: '8px', }, }; }); diff --git a/src/pages/User/register/style.style.ts b/src/pages/User/register/style.style.ts index 42656203..dc424779 100644 --- a/src/pages/User/register/style.style.ts +++ b/src/pages/User/register/style.style.ts @@ -1,30 +1,30 @@ -import { createStyles } from "antd-style"; +import { createStyles } from 'antd-style'; const useStyles = createStyles(({ token }) => { return { main: { - width: "368px", - margin: "0 auto", + width: '368px', + margin: '0 auto', }, h3: { - marginBottom: "20px", - fontSize: "16px", + marginBottom: '20px', + fontSize: '16px', }, password: { - marginBottom: "24px", + marginBottom: '24px', }, - ".ant-form-item-explain": { - display: "none", + '.ant-form-item-explain': { + display: 'none', }, getCaptcha: { - display: "block", - width: "100%", + display: 'block', + width: '100%', }, submit: { - width: "50%", + width: '50%', }, login: { - float: "right", + float: 'right', lineHeight: token.controlHeight, }, success: { @@ -36,8 +36,8 @@ const useStyles = createStyles(({ token }) => { error: { color: token.colorError, }, - ".progress-pass > .progress": {}, - ".ant-progress-bg": { + '.progress-pass > .progress': {}, + '.ant-progress-bg': { backgroundColor: token.colorWarning, }, }; diff --git a/src/pages/account/center/Center.style.ts b/src/pages/account/center/Center.style.ts index 634db3d3..7412c65a 100644 --- a/src/pages/account/center/Center.style.ts +++ b/src/pages/account/center/Center.style.ts @@ -1,65 +1,65 @@ -import { createStyles } from "antd-style"; +import { createStyles } from 'antd-style'; const useStyles = createStyles(({ token }) => { return { avatarHolder: { - marginBottom: "24px", - textAlign: "center", - "& > img": { width: "104px", height: "104px", marginBottom: "20px" }, + marginBottom: '24px', + textAlign: 'center', + '& > img': { width: '104px', height: '104px', marginBottom: '20px' }, }, name: { - marginBottom: "4px", + marginBottom: '4px', color: token.colorTextHeading, - fontWeight: "500", - fontSize: "20px", - lineHeight: "28px", + fontWeight: '500', + fontSize: '20px', + lineHeight: '28px', }, detail: {}, p: { - position: "relative", - marginBottom: "8px", - paddingLeft: "26px", - "&:last-child": { marginBottom: "0" }, + position: 'relative', + marginBottom: '8px', + paddingLeft: '26px', + '&:last-child': { marginBottom: '0' }, }, i: { - position: "absolute", - top: "4px", - left: "0", - width: "14px", - height: "14px", + position: 'absolute', + top: '4px', + left: '0', + width: '14px', + height: '14px', }, tagsTitle: { - marginBottom: "12px", + marginBottom: '12px', color: token.colorTextHeading, - fontWeight: "500", + fontWeight: '500', }, teamTitle: { - marginBottom: "12px", + marginBottom: '12px', color: token.colorTextHeading, - fontWeight: "500", + fontWeight: '500', }, tags: {}, - ".ant-tag": { - marginBottom: "8px", + '.ant-tag': { + marginBottom: '8px', }, team: {}, - ".ant-avatar": { - marginRight: "12px", + '.ant-avatar': { + marginRight: '12px', }, a: { - display: "block", - marginBottom: "24px", - overflow: "hidden", + display: 'block', + marginBottom: '24px', + overflow: 'hidden', color: token.colorText, - whiteSpace: "nowrap", - textOverflow: "ellipsis", - wordBreak: "break-all", - transition: "color 0.3s", - "&:hover": { color: token.colorPrimary }, + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + wordBreak: 'break-all', + transition: 'color 0.3s', + '&:hover': { color: token.colorPrimary }, }, tabsCard: {}, - ".ant-card-head": { - padding: "0 16px", + '.ant-card-head': { + padding: '0 16px', }, }; }); diff --git a/src/pages/account/center/components/Applications/index.style.ts b/src/pages/account/center/components/Applications/index.style.ts index 2b01d253..280cb2b7 100644 --- a/src/pages/account/center/components/Applications/index.style.ts +++ b/src/pages/account/center/components/Applications/index.style.ts @@ -1,47 +1,47 @@ -import { createStyles } from "antd-style"; +import { createStyles } from 'antd-style'; const useStyles = createStyles(({ token }) => { return { filterCardList: { - marginBottom: "-24px", + marginBottom: '-24px', }, - ".ant-card-meta-content": { - marginTop: "0", + '.ant-card-meta-content': { + marginTop: '0', }, - "// disabled white space .ant-card-meta-avatar": { - fontSize: "0", + '// disabled white space .ant-card-meta-avatar': { + fontSize: '0', }, - ".ant-list .ant-list-item-content-single": { - maxWidth: "100%", + '.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", + 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", + '& > div': { + position: 'relative', + float: 'left', + width: '50%', + textAlign: 'left', }, }, p: { - margin: "0", - fontSize: "24px", - lineHeight: "32px", + margin: '0', + fontSize: '24px', + lineHeight: '32px', }, - "p:first-child": { - marginBottom: "4px", + 'p:first-child': { + marginBottom: '4px', color: token.colorTextSecondary, - fontSize: "12px", - lineHeight: "20px", + fontSize: '12px', + lineHeight: '20px', }, }; }); diff --git a/src/pages/account/center/components/Applications/index.tsx b/src/pages/account/center/components/Applications/index.tsx index 28c88595..0fc1455c 100644 --- a/src/pages/account/center/components/Applications/index.tsx +++ b/src/pages/account/center/components/Applications/index.tsx @@ -3,17 +3,17 @@ import { EditOutlined, EllipsisOutlined, ShareAltOutlined, -} from "@ant-design/icons"; -import { useRequest } from "@umijs/max"; -import { Avatar, Card, Dropdown, List, Menu, Tooltip } from "antd"; -import React from "react"; -import numeral from "numeral"; -import type { ListItemDataType } from "../../data.d"; -import { queryFakeList } from "../../service"; -import useStyles from "./index.style"; +} from '@ant-design/icons'; +import { useRequest } from '@umijs/max'; +import { Avatar, Card, Dropdown, List, Menu, Tooltip } from 'antd'; +import React from 'react'; +import numeral from 'numeral'; +import type { ListItemDataType } from '../../data.d'; +import { queryFakeList } from '../../service'; +import useStyles from './index.style'; export function formatWan(val: number) { const v = val * 1; - if (!v || Number.isNaN(v)) return ""; + if (!v || Number.isNaN(v)) return ''; let result: React.ReactNode = val; if (val > 10000) { result = ( @@ -21,10 +21,10 @@ export function formatWan(val: number) { {Math.floor(val / 10000)} @@ -46,29 +46,17 @@ const Applications: React.FC = () => { const itemMenu = ( - + 1st menu item - + 2nd menu item - + 3d menu item @@ -125,14 +113,11 @@ const Applications: React.FC = () => { , ]} > - } - title={item.title} - /> + } title={item.title} />
diff --git a/src/pages/account/center/components/ArticleListContent/index.style.ts b/src/pages/account/center/components/ArticleListContent/index.style.ts index 178e968e..286b97b6 100644 --- a/src/pages/account/center/components/ArticleListContent/index.style.ts +++ b/src/pages/account/center/components/ArticleListContent/index.style.ts @@ -1,4 +1,4 @@ -import { createStyles } from "antd-style"; +import { createStyles } from 'antd-style'; const useStyles = createStyles(({ token }) => { return { @@ -6,15 +6,15 @@ const useStyles = createStyles(({ token }) => { [`@media screen and (max-width: ${token.screenXS}px)`]: {}, }, description: { - maxWidth: "720px", - lineHeight: "22px", + maxWidth: '720px', + lineHeight: '22px', }, extra: { [`@media screen and (max-width: ${token.screenXS}px)`]: { - "& > em": { - display: "block", - marginTop: "8px", - marginLeft: "0", + '& > em': { + display: 'block', + marginTop: '8px', + marginLeft: '0', }, }, }, diff --git a/src/pages/account/center/components/ArticleListContent/index.tsx b/src/pages/account/center/components/ArticleListContent/index.tsx index 0097246c..083b705f 100644 --- a/src/pages/account/center/components/ArticleListContent/index.tsx +++ b/src/pages/account/center/components/ArticleListContent/index.tsx @@ -1,7 +1,7 @@ -import { Avatar } from "antd"; -import React from "react"; -import dayjs from "dayjs"; -import useStyles from "./index.style"; +import { Avatar } from 'antd'; +import React from 'react'; +import dayjs from 'dayjs'; +import useStyles from './index.style'; export type ApplicationsProps = { data: { content?: string; @@ -21,7 +21,7 @@ const ArticleListContent: React.FC = ({
{owner} 发布在 {href} - {dayjs(updatedAt).format("YYYY-MM-DD HH:mm")} + {dayjs(updatedAt).format('YYYY-MM-DD HH:mm')}
); diff --git a/src/pages/account/center/components/Articles/index.style.ts b/src/pages/account/center/components/Articles/index.style.ts index a95ac137..5f87a85a 100644 --- a/src/pages/account/center/components/Articles/index.style.ts +++ b/src/pages/account/center/components/Articles/index.style.ts @@ -1,12 +1,12 @@ -import { createStyles } from "antd-style"; +import { createStyles } from 'antd-style'; const useStyles = createStyles(({ token }) => { return { articleList: {}, - ".ant-list-item:first-child": { - paddingTop: "0", + '.ant-list-item:first-child': { + paddingTop: '0', }, - "a.listItemMetaTitle": { + 'a.listItemMetaTitle': { color: token.colorTextHeading, }, }; diff --git a/src/pages/account/center/components/Articles/index.tsx b/src/pages/account/center/components/Articles/index.tsx index 7a8dfd9f..cd3b2dbc 100644 --- a/src/pages/account/center/components/Articles/index.tsx +++ b/src/pages/account/center/components/Articles/index.tsx @@ -1,11 +1,11 @@ -import React from "react"; -import { StarTwoTone, LikeOutlined, MessageFilled } from "@ant-design/icons"; -import { useRequest } from "@umijs/max"; -import { List, Tag } from "antd"; -import ArticleListContent from "../ArticleListContent"; -import type { ListItemDataType } from "../../data.d"; -import { queryFakeList } from "../../service"; -import useStyles from "./index.style"; +import React from 'react'; +import { StarTwoTone, LikeOutlined, MessageFilled } from '@ant-design/icons'; +import { useRequest } from '@umijs/max'; +import { List, Tag } from 'antd'; +import ArticleListContent from '../ArticleListContent'; +import type { ListItemDataType } from '../../data.d'; +import { queryFakeList } from '../../service'; +import useStyles from './index.style'; const Articles: React.FC = () => { const { styles } = useStyles(); const IconText: React.FC<{ @@ -36,11 +36,7 @@ const Articles: React.FC = () => { actions={[ } text={item.star} />, } text={item.like} />, - } - text={item.message} - />, + } text={item.message} />, ]} > { return { avatarList: { - display: "inline-block", + display: 'inline-block', }, ul: { - display: "inline-block", - marginLeft: "8px", - fontSize: "0", + display: 'inline-block', + marginLeft: '8px', + fontSize: '0', }, avatarItem: { - display: "inline-block", + display: 'inline-block', width: token.controlHeight, height: token.controlHeight, - marginLeft: "-8px", + marginLeft: '-8px', fontSize: token.fontSize, }, - ".ant-avatar": { - width: "20px", - height: "20px", - lineHeight: "20px", + '.ant-avatar': { + width: '20px', + height: '20px', + lineHeight: '20px', }, avatarItemLarge: { width: token.controlHeightLG, @@ -31,12 +31,12 @@ const useStyles = createStyles(({ token }) => { height: token.controlHeightSM, }, avatarItemMini: { - width: "20px", - height: "20px", + width: '20px', + height: '20px', }, - ".ant-avatar-string": { - fontSize: "12px", - lineHeight: "18px", + '.ant-avatar-string': { + fontSize: '12px', + lineHeight: '18px', }, }; }); diff --git a/src/pages/account/center/components/AvatarList/index.tsx b/src/pages/account/center/components/AvatarList/index.tsx index 64e390df..b0417348 100644 --- a/src/pages/account/center/components/AvatarList/index.tsx +++ b/src/pages/account/center/components/AvatarList/index.tsx @@ -1,8 +1,8 @@ -import { Avatar, Tooltip } from "antd"; -import React from "react"; -import classNames from "classnames"; -import useStyles from "./index.style"; -export declare type SizeType = number | "small" | "default" | "large"; +import { Avatar, Tooltip } from 'antd'; +import React from 'react'; +import classNames from 'classnames'; +import useStyles from './index.style'; +export declare type SizeType = number | 'small' | 'default' | 'large'; export type AvatarItemProps = { tips: React.ReactNode; src: string; @@ -16,22 +16,15 @@ export type AvatarListProps = { maxLength?: number; excessItemsStyle?: React.CSSProperties; style?: React.CSSProperties; - children: - | React.ReactElement - | React.ReactElement[]; + children: React.ReactElement | React.ReactElement[]; }; -const avatarSizeToClassName = (size?: SizeType | "mini") => +const avatarSizeToClassName = (size?: SizeType | 'mini') => classNames(styles.avatarItem, { - [styles.avatarItemLarge]: size === "large", - [styles.avatarItemSmall]: size === "small", - [styles.avatarItemMini]: size === "mini", + [styles.avatarItemLarge]: size === 'large', + [styles.avatarItemSmall]: size === 'small', + [styles.avatarItemMini]: size === 'mini', }); -const Item: React.FC = ({ - src, - size, - tips, - onClick = () => {}, -}) => { +const Item: React.FC = ({ src, size, tips, onClick = () => {} }) => { const cls = avatarSizeToClassName(size); return (
  • @@ -41,7 +34,7 @@ const Item: React.FC = ({ src={src} size={size} style={{ - cursor: "pointer", + cursor: 'pointer', }} /> @@ -57,22 +50,18 @@ const AvatarList: React.FC & { const { styles } = useStyles(); const numOfChildren = React.Children.count(children); const numToShow = maxLength >= numOfChildren ? numOfChildren : maxLength; - const childrenArray = React.Children.toArray( - children - ) as React.ReactElement[]; + const childrenArray = React.Children.toArray(children) as React.ReactElement[]; const childrenWithProps = childrenArray.slice(0, numToShow).map((child) => React.cloneElement(child, { size, - }) + }), ); if (numToShow < numOfChildren) { const cls = avatarSizeToClassName(size); childrenWithProps.push(
  • - {`+${ - numOfChildren - maxLength - }`} -
    • + {`+${numOfChildren - maxLength}`} + , ); } return ( diff --git a/src/pages/account/center/components/Projects/index.style.ts b/src/pages/account/center/components/Projects/index.style.ts index 2b5415c0..32572b7a 100644 --- a/src/pages/account/center/components/Projects/index.style.ts +++ b/src/pages/account/center/components/Projects/index.style.ts @@ -1,47 +1,47 @@ -import { createStyles } from "antd-style"; +import { createStyles } from 'antd-style'; const useStyles = createStyles(({ token }) => { return { coverCardList: {}, card: { - "&:hover": {}, + '&:hover': {}, }, - ".ant-card-meta-title": { - marginBottom: "4px", - "& > a": { - display: "inline-block", - maxWidth: "100%", + '.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", + '.ant-card-meta-description': { + height: '44px', + overflow: 'hidden', + lineHeight: '22px', }, - ".ant-card-meta-title > a": { + '.ant-card-meta-title > a': { color: token.colorPrimary, }, cardItemContent: { - display: "flex", - height: "20px", - marginTop: "16px", - marginBottom: "-4px", - lineHeight: "20px", - "& > span": { - flex: "1", + display: 'flex', + height: '20px', + marginTop: '16px', + marginBottom: '-4px', + lineHeight: '20px', + '& > span': { + flex: '1', color: token.colorTextSecondary, - fontSize: "12px", + fontSize: '12px', }, }, avatarList: { - flex: "0 1 auto", + flex: '0 1 auto', }, cardList: { - marginTop: "24px", + marginTop: '24px', }, - ".ant-list .ant-list-item-content-single": { - maxWidth: "100%", + '.ant-list .ant-list-item-content-single': { + maxWidth: '100%', }, }; }); diff --git a/src/pages/account/center/components/Projects/index.tsx b/src/pages/account/center/components/Projects/index.tsx index d0b3530a..e206fc27 100644 --- a/src/pages/account/center/components/Projects/index.tsx +++ b/src/pages/account/center/components/Projects/index.tsx @@ -1,12 +1,12 @@ -import { Card, List } from "antd"; -import { useRequest } from "@umijs/max"; -import React from "react"; -import dayjs from "dayjs"; -import { queryFakeList } from "../../service"; -import AvatarList from "../AvatarList"; -import type { ListItemDataType } from "../../data.d"; -import useStyles from "./index.style"; -import relativeTime from "dayjs/plugin/relativeTime"; +import { Card, List } from 'antd'; +import { useRequest } from '@umijs/max'; +import React from 'react'; +import dayjs from 'dayjs'; +import { queryFakeList } from '../../service'; +import AvatarList from '../AvatarList'; +import type { ListItemDataType } from '../../data.d'; +import useStyles from './index.style'; +import relativeTime from 'dayjs/plugin/relativeTime'; dayjs.extend(relativeTime); const Projects: React.FC = () => { const { styles } = useStyles(); @@ -32,15 +32,8 @@ const Projects: React.FC = () => { dataSource={listData?.list || []} renderItem={(item) => ( - } - > - {item.title}} - description={item.subDescription} - /> + }> + {item.title}} description={item.subDescription} />
    {dayjs(item.updatedAt).fromNow()}
    diff --git a/src/pages/account/center/index.tsx b/src/pages/account/center/index.tsx index 1d0c74d7..92d373fd 100644 --- a/src/pages/account/center/index.tsx +++ b/src/pages/account/center/index.tsx @@ -1,25 +1,20 @@ -import { - PlusOutlined, - HomeOutlined, - ContactsOutlined, - ClusterOutlined, -} from "@ant-design/icons"; -import { Avatar, Card, Col, Divider, Input, InputRef, Row, Tag } from "antd"; -import React, { useState, useRef } from "react"; -import { GridContent } from "@ant-design/pro-components"; -import { Link, useRequest } from "@umijs/max"; -import Projects from "./components/Projects"; -import Articles from "./components/Articles"; -import Applications from "./components/Applications"; -import type { CurrentUser, TagType, tabKeyType } from "./data.d"; -import { queryCurrent } from "./service"; -import useStyles from "./Center.style"; +import { PlusOutlined, HomeOutlined, ContactsOutlined, ClusterOutlined } from '@ant-design/icons'; +import { Avatar, Card, Col, Divider, Input, InputRef, Row, Tag } from 'antd'; +import React, { useState, useRef } from 'react'; +import { GridContent } from '@ant-design/pro-components'; +import { Link, useRequest } from '@umijs/max'; +import Projects from './components/Projects'; +import Articles from './components/Articles'; +import Applications from './components/Applications'; +import type { CurrentUser, TagType, tabKeyType } from './data.d'; +import { queryCurrent } from './service'; +import useStyles from './Center.style'; const operationTabList = [ { - key: "articles", + key: 'articles', tab: ( - 文章{" "} + 文章{' '} - 应用{" "} + 应用{' '} - 项目{" "} + 项目{' '} = ({ tags }) => { const { styles } = useStyles(); const ref = useRef(null); const [newTags, setNewTags] = useState([]); const [inputVisible, setInputVisible] = useState(false); - const [inputValue, setInputValue] = useState(""); + const [inputValue, setInputValue] = useState(''); const showInput = () => { setInputVisible(true); if (ref.current) { @@ -81,10 +76,7 @@ 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, { @@ -95,7 +87,7 @@ const TagList: React.FC<{ } setNewTags(tempsTags); setInputVisible(false); - setInputValue(""); + setInputValue(''); }; return (
    @@ -121,7 +113,7 @@ const TagList: React.FC<{ @@ -132,7 +124,7 @@ const TagList: React.FC<{ }; const Center: React.FC = () => { const { styles } = useStyles(); - const [tabKey, setTabKey] = useState("articles"); + const [tabKey, setTabKey] = useState('articles'); // 获取用户信息 const { data: currentUser, loading } = useRequest(() => { @@ -140,11 +132,7 @@ const Center: React.FC = () => { }); // 渲染用户信息 - const renderUserInfo = ({ - title, - group, - geographic, - }: Partial) => { + const renderUserInfo = ({ title, group, geographic }: Partial) => { return (

    @@ -173,7 +161,7 @@ const Center: React.FC = () => { ( geographic || { province: { - label: "", + label: '', }, } ).province.label @@ -182,7 +170,7 @@ const Center: React.FC = () => { ( geographic || { city: { - label: "", + label: '', }, } ).city.label @@ -194,13 +182,13 @@ const Center: React.FC = () => { // 渲染tab切换 const renderChildrenByTabKey = (tabValue: tabKeyType) => { - if (tabValue === "projects") { + if (tabValue === 'projects') { return ; } - if (tabValue === "applications") { + if (tabValue === 'applications') { return ; } - if (tabValue === "articles") { + if (tabValue === 'articles') { return ; } return null; diff --git a/src/pages/account/settings/components/BaseView.style.ts b/src/pages/account/settings/components/BaseView.style.ts index 5607bc81..04661f83 100644 --- a/src/pages/account/settings/components/BaseView.style.ts +++ b/src/pages/account/settings/components/BaseView.style.ts @@ -1,51 +1,51 @@ -import { createStyles } from "antd-style"; +import { createStyles } from 'antd-style'; const useStyles = createStyles(({ token }) => { return { baseView: { [`@media screen and (max-width: ${token.screenXL}px)`]: { - flexDirection: "column-reverse", + flexDirection: 'column-reverse', }, }, - ".ant-legacy-form-item .ant-legacy-form-item-control-wrapper": { - width: "100%", + '.ant-legacy-form-item .ant-legacy-form-item-control-wrapper': { + width: '100%', }, left: { - minWidth: "224px", - maxWidth: "448px", + minWidth: '224px', + maxWidth: '448px', }, right: { [`@media screen and (max-width: ${token.screenXL}px)`]: { - display: "flex", - flexDirection: "column", - alignItems: "center", - maxWidth: "448px", - padding: "20px", + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + maxWidth: '448px', + padding: '20px', }, }, avatar_title: { [`@media screen and (max-width: ${token.screenXL}px)`]: { - display: "none", + display: 'none', }, }, avatar: { - width: "144px", - height: "144px", - marginBottom: "12px", - overflow: "hidden", + width: '144px', + height: '144px', + marginBottom: '12px', + overflow: 'hidden', }, img: { - width: "100%", + width: '100%', }, button_view: { - width: "144px", - textAlign: "center", + width: '144px', + textAlign: 'center', }, area_code: { - width: "72px", + width: '72px', }, phone_number: { - width: "214px", + width: '214px', }, }; }); diff --git a/src/pages/account/settings/components/PhoneView.tsx b/src/pages/account/settings/components/PhoneView.tsx index 820cd3c3..2196129a 100644 --- a/src/pages/account/settings/components/PhoneView.tsx +++ b/src/pages/account/settings/components/PhoneView.tsx @@ -1,6 +1,6 @@ -import React from "react"; -import { Input } from "antd"; -import useStyles from "./PhoneView.style"; +import React from 'react'; +import { Input } from 'antd'; +import useStyles from './PhoneView.style'; type PhoneViewProps = { value?: string; onChange?: (value: string) => void; @@ -8,9 +8,9 @@ type PhoneViewProps = { const PhoneView: React.FC = (props) => { const { styles } = useStyles(); const { value, onChange } = props; - let values = ["", ""]; + let values = ['', '']; if (value) { - values = value.split("-"); + values = value.split('-'); } return ( <> diff --git a/src/pages/account/settings/index.tsx b/src/pages/account/settings/index.tsx index fa9f55b7..b5fec182 100644 --- a/src/pages/account/settings/index.tsx +++ b/src/pages/account/settings/index.tsx @@ -1,28 +1,28 @@ -import React, { useState, useRef, useLayoutEffect } from "react"; -import { GridContent } from "@ant-design/pro-components"; -import { Menu } from "antd"; -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"; +import React, { useState, useRef, useLayoutEffect } from 'react'; +import { GridContent } from '@ant-design/pro-components'; +import { Menu } from 'antd'; +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'; const { Item } = Menu; -type SettingsStateKeys = "base" | "security" | "binding" | "notification"; +type SettingsStateKeys = 'base' | 'security' | 'binding' | 'notification'; type SettingsState = { - mode: "inline" | "horizontal"; + mode: 'inline' | 'horizontal'; selectKey: SettingsStateKeys; }; const Settings: React.FC = () => { const { styles } = useStyles(); const menuMap: Record = { - base: "基本设置", - security: "安全设置", - binding: "账号绑定", - notification: "新消息通知", + base: '基本设置', + security: '安全设置', + binding: '账号绑定', + notification: '新消息通知', }; const [initConfig, setInitConfig] = useState({ - mode: "inline", - selectKey: "base", + mode: 'inline', + selectKey: 'base', }); const dom = useRef(); const resize = () => { @@ -30,44 +30,42 @@ const Settings: React.FC = () => { if (!dom.current) { return; } - let mode: "inline" | "horizontal" = "inline"; + let mode: 'inline' | 'horizontal' = 'inline'; const { offsetWidth } = dom.current; if (dom.current.offsetWidth < 641 && offsetWidth > 400) { - mode = "horizontal"; + mode = 'horizontal'; } if (window.innerWidth < 768 && offsetWidth > 400) { - mode = "horizontal"; + mode = 'horizontal'; } setInitConfig({ ...initConfig, - mode: mode as SettingsState["mode"], + mode: mode as SettingsState['mode'], }); }); }; useLayoutEffect(() => { if (dom.current) { - window.addEventListener("resize", resize); + window.addEventListener('resize', resize); resize(); } return () => { - window.removeEventListener("resize", resize); + window.removeEventListener('resize', resize); }; }, [dom.current]); const getMenu = () => { - return Object.keys(menuMap).map((item) => ( - {menuMap[item]} - )); + return Object.keys(menuMap).map((item) => {menuMap[item]}); }; const renderChildren = () => { const { selectKey } = initConfig; switch (selectKey) { - case "base": + case 'base': return ; - case "security": + case 'security': return ; - case "binding": + case 'binding': return ; - case "notification": + case 'notification': return ; default: return null; diff --git a/src/pages/account/settings/style.style.ts b/src/pages/account/settings/style.style.ts index d40583d3..0c217efc 100644 --- a/src/pages/account/settings/style.style.ts +++ b/src/pages/account/settings/style.style.ts @@ -1,73 +1,73 @@ -import { createStyles } from "antd-style"; +import { createStyles } from 'antd-style'; const useStyles = createStyles(({ token }) => { return { main: { [`@media screen and (max-width: ${token.screenMD}px)`]: { - flexDirection: "column", + flexDirection: 'column', }, }, leftMenu: { [`@media screen and (max-width: ${token.screenMD}px)`]: { - width: "100%", - border: "none", + width: '100%', + border: 'none', }, }, - ".ant-menu-inline": { - border: "none", + '.ant-menu-inline': { + border: 'none', }, - ".ant-menu-horizontal": { - fontWeight: "bold", + '.ant-menu-horizontal': { + fontWeight: 'bold', }, right: { [`@media screen and (max-width: ${token.screenMD}px)`]: { - padding: "40px", + padding: '40px', }, }, title: { - marginBottom: "12px", + marginBottom: '12px', color: token.colorTextHeading, - fontWeight: "500", - fontSize: "20px", - lineHeight: "28px", + fontWeight: '500', + fontSize: '20px', + lineHeight: '28px', }, - ".ant-list-split .ant-list-item:last-child": { - borderBottom: "1px solid @border-color-split", + '.ant-list-split .ant-list-item:last-child': { + borderBottom: '1px solid @border-color-split', }, - ".ant-list-item": { - paddingTop: "14px", - paddingBottom: "14px", + '.ant-list-item': { + paddingTop: '14px', + paddingBottom: '14px', }, - ".ant-list-item-meta": {}, - "// 账号绑定图标 .taobao": { - display: "block", - color: "#ff4000", - fontSize: "48px", - lineHeight: "48px", + '.ant-list-item-meta': {}, + '// 账号绑定图标 .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", + margin: '2px', + padding: '6px', + color: '#fff', + fontSize: '32px', + lineHeight: '32px', + backgroundColor: '#2eabff', borderRadius: token.borderRadius, }, alipay: { - color: "#2eabff", - fontSize: "48px", - lineHeight: "48px", + color: '#2eabff', + fontSize: '48px', + lineHeight: '48px', borderRadius: token.borderRadius, }, - "// 密码强度 font.strong": { + '// 密码强度 font.strong': { color: token.colorSuccess, }, - "font.medium": { + 'font.medium': { color: token.colorWarning, }, - "font.weak": { + 'font.weak': { color: token.colorError, }, }; diff --git a/src/pages/dashboard/analysis/components/Charts/Bar/index.tsx b/src/pages/dashboard/analysis/components/Charts/Bar/index.tsx index dc3faacf..c419fdc9 100644 --- a/src/pages/dashboard/analysis/components/Charts/Bar/index.tsx +++ b/src/pages/dashboard/analysis/components/Charts/Bar/index.tsx @@ -1,8 +1,8 @@ -import { Axis, Chart, Geom, Tooltip } from "bizcharts"; -import React, { Component } from "react"; -import Debounce from "lodash.debounce"; -import autoHeight from "../autoHeight"; -import useStyles from "../index.style"; +import { Axis, Chart, Geom, Tooltip } from 'bizcharts'; +import React, { Component } from 'react'; +import Debounce from 'lodash.debounce'; +import autoHeight from '../autoHeight'; +import useStyles from '../index.style'; export type BarProps = { title: React.ReactNode; color?: string; @@ -51,12 +51,12 @@ class Bar extends Component< } }, 500); componentDidMount() { - window.addEventListener("resize", this.resize, { + window.addEventListener('resize', this.resize, { passive: true, }); } componentWillUnmount() { - window.removeEventListener("resize", this.resize); + window.removeEventListener('resize', this.resize); } handleRoot = (n: HTMLDivElement) => { this.root = n; @@ -70,13 +70,13 @@ class Bar extends Component< title, forceFit = true, data, - color = "rgba(24, 144, 255, 0.85)", + color = 'rgba(24, 144, 255, 0.85)', padding, } = this.props; const { autoHideXLabels } = this.state; const scale = { x: { - type: "cat", + type: 'cat', }, y: { min: 0, @@ -87,9 +87,9 @@ class Bar extends Component< (...args: any[]) => { name?: string; value: string; - } + }, ] = [ - "x*y", + 'x*y', (x: string, y: string) => ({ name: x, value: y, @@ -118,7 +118,7 @@ class Bar extends Component< height={title ? height - 41 : height} forceFit={forceFit} data={data} - padding={padding || "auto"} + padding={padding || 'auto'} > - +

    diff --git a/src/pages/dashboard/analysis/components/Charts/ChartCard/index.style.ts b/src/pages/dashboard/analysis/components/Charts/ChartCard/index.style.ts index fcecf940..562910c0 100644 --- a/src/pages/dashboard/analysis/components/Charts/ChartCard/index.style.ts +++ b/src/pages/dashboard/analysis/components/Charts/ChartCard/index.style.ts @@ -1,77 +1,77 @@ -import { createStyles } from "antd-style"; +import { createStyles } from 'antd-style'; const useStyles = createStyles(({ token }) => { return { chartCard: { - position: "relative", + position: 'relative', }, chartTop: { - position: "relative", - width: "100%", - overflow: "hidden", + position: 'relative', + width: '100%', + overflow: 'hidden', }, chartTopMargin: { - marginBottom: "12px", + marginBottom: '12px', }, chartTopHasMargin: { - marginBottom: "20px", + marginBottom: '20px', }, metaWrap: { - float: "left", + float: 'left', }, avatar: { - position: "relative", - top: "4px", - float: "left", - marginRight: "20px", + position: 'relative', + top: '4px', + float: 'left', + marginRight: '20px', }, img: { - borderRadius: "100%", + borderRadius: '100%', }, meta: { - height: "22px", + height: '22px', color: token.colorTextSecondary, fontSize: token.fontSize, - lineHeight: "22px", + lineHeight: '22px', }, action: { - position: "absolute", - top: "4px", - right: "0", - lineHeight: "1", - cursor: "pointer", + position: 'absolute', + top: '4px', + right: '0', + lineHeight: '1', + cursor: 'pointer', }, total: { - height: "38px", - marginTop: "4px", - marginBottom: "0", - overflow: "hidden", + height: '38px', + marginTop: '4px', + marginBottom: '0', + overflow: 'hidden', color: token.colorTextHeading, - fontSize: "30px", - lineHeight: "38px", - whiteSpace: "nowrap", - textOverflow: "ellipsis", - wordBreak: "break-all", + fontSize: '30px', + lineHeight: '38px', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + wordBreak: 'break-all', }, content: { - position: "relative", - width: "100%", - marginBottom: "12px", + position: 'relative', + width: '100%', + marginBottom: '12px', }, contentFixed: { - position: "absolute", - bottom: "0", - left: "0", - width: "100%", + position: 'absolute', + bottom: '0', + left: '0', + width: '100%', }, footer: { - marginTop: "8px", - paddingTop: "9px", - borderTop: "1px solid @border-color-split", - "& > *": { position: "relative" }, + marginTop: '8px', + paddingTop: '9px', + borderTop: '1px solid @border-color-split', + '& > *': { position: 'relative' }, }, footerMargin: { - marginTop: "20px", + marginTop: '20px', }, }; }); diff --git a/src/pages/dashboard/analysis/components/Charts/Field/index.style.ts b/src/pages/dashboard/analysis/components/Charts/Field/index.style.ts index 49286c62..22192d8a 100644 --- a/src/pages/dashboard/analysis/components/Charts/Field/index.style.ts +++ b/src/pages/dashboard/analysis/components/Charts/Field/index.style.ts @@ -1,19 +1,19 @@ -import { createStyles } from "antd-style"; +import { createStyles } from 'antd-style'; const useStyles = createStyles(({ token }) => { return { field: { - margin: "0", - overflow: "hidden", - whiteSpace: "nowrap", - textOverflow: "ellipsis", + margin: '0', + overflow: 'hidden', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', }, label: { fontSize: token.fontSize, - lineHeight: "22px", + lineHeight: '22px', }, number: { - marginLeft: "8px", + marginLeft: '8px', color: token.colorTextHeading, }, }; diff --git a/src/pages/dashboard/analysis/components/Charts/Field/index.tsx b/src/pages/dashboard/analysis/components/Charts/Field/index.tsx index 249040b8..97e4a171 100644 --- a/src/pages/dashboard/analysis/components/Charts/Field/index.tsx +++ b/src/pages/dashboard/analysis/components/Charts/Field/index.tsx @@ -1,5 +1,5 @@ -import React from "react"; -import useStyles from "./index.style"; +import React from 'react'; +import useStyles from './index.style'; export type FieldProps = { label: React.ReactNode; value: React.ReactNode; diff --git a/src/pages/dashboard/analysis/components/Charts/MiniArea/index.tsx b/src/pages/dashboard/analysis/components/Charts/MiniArea/index.tsx index 3aab3cc0..7b7f08fe 100644 --- a/src/pages/dashboard/analysis/components/Charts/MiniArea/index.tsx +++ b/src/pages/dashboard/analysis/components/Charts/MiniArea/index.tsx @@ -1,8 +1,8 @@ -import type { AxisProps } from "bizcharts"; -import { Axis, Chart, Geom, Tooltip } from "bizcharts"; -import React from "react"; -import autoHeight from "../autoHeight"; -import useStyles from "../index.style"; +import type { AxisProps } from 'bizcharts'; +import { Axis, Chart, Geom, Tooltip } from 'bizcharts'; +import React from 'react'; +import autoHeight from '../autoHeight'; +import useStyles from '../index.style'; export type MiniAreaProps = { color?: string; height?: number; @@ -32,8 +32,8 @@ const MiniArea: React.FC = (props) => { height = 1, data = [], forceFit = true, - color = "rgba(24, 144, 255, 0.2)", - borderColor = "#1089ff", + color = 'rgba(24, 144, 255, 0.2)', + borderColor = '#1089ff', scale = { x: {}, y: {}, @@ -47,7 +47,7 @@ const MiniArea: React.FC = (props) => { const padding: [number, number, number, number] = [36, 5, 30, 5]; const scaleProps = { x: { - type: "cat", + type: 'cat', range: [0, 1], ...scale.x, }, @@ -61,9 +61,9 @@ const MiniArea: React.FC = (props) => { (...args: any[]) => { name?: string; value: string; - } + }, ] = [ - "x*y", + 'x*y', (x: string, y: string) => ({ name: x, value: y, @@ -128,7 +128,7 @@ const MiniArea: React.FC = (props) => { ) : ( )} diff --git a/src/pages/dashboard/analysis/components/Charts/MiniBar/index.tsx b/src/pages/dashboard/analysis/components/Charts/MiniBar/index.tsx index 7e4cccf4..2ae9f178 100644 --- a/src/pages/dashboard/analysis/components/Charts/MiniBar/index.tsx +++ b/src/pages/dashboard/analysis/components/Charts/MiniBar/index.tsx @@ -1,7 +1,7 @@ -import { Chart, Geom, Tooltip } from "bizcharts"; -import React from "react"; -import autoHeight from "../autoHeight"; -import useStyles from "../index.style"; +import { Chart, Geom, Tooltip } from 'bizcharts'; +import React from 'react'; +import autoHeight from '../autoHeight'; +import useStyles from '../index.style'; export type MiniBarProps = { color?: string; height?: number; @@ -14,10 +14,10 @@ export type MiniBarProps = { }; const MiniBar: React.FC = (props) => { const { styles } = useStyles(); - const { height = 0, forceFit = true, color = "#1890FF", data = [] } = props; + const { height = 0, forceFit = true, color = '#1890FF', data = [] } = props; const scale = { x: { - type: "cat", + type: 'cat', }, y: { min: 0, @@ -29,9 +29,9 @@ const MiniBar: React.FC = (props) => { (...args: any[]) => { name?: string; value: string; - } + }, ] = [ - "x*y", + 'x*y', (x: string, y: string) => ({ name: x, value: y, @@ -48,20 +48,9 @@ const MiniBar: React.FC = (props) => { }} >
    - + - +
    diff --git a/src/pages/dashboard/analysis/components/Charts/MiniProgress/index.tsx b/src/pages/dashboard/analysis/components/Charts/MiniProgress/index.tsx index 9d3e9793..91b9f060 100644 --- a/src/pages/dashboard/analysis/components/Charts/MiniProgress/index.tsx +++ b/src/pages/dashboard/analysis/components/Charts/MiniProgress/index.tsx @@ -1,6 +1,6 @@ -import React from "react"; -import { Tooltip } from "antd"; -import useStyles from "./index.style"; +import React from 'react'; +import { Tooltip } from 'antd'; +import useStyles from './index.style'; export type MiniProgressProps = { target: number; targetLabel?: string; @@ -12,7 +12,7 @@ export type MiniProgressProps = { const MiniProgress: React.FC = ({ targetLabel, target, - color = "rgb(19, 194, 194)", + color = 'rgb(19, 194, 194)', strokeWidth, percent, }) => { diff --git a/src/pages/dashboard/analysis/components/Charts/Pie/index.tsx b/src/pages/dashboard/analysis/components/Charts/Pie/index.tsx index dc0470b5..75897177 100644 --- a/src/pages/dashboard/analysis/components/Charts/Pie/index.tsx +++ b/src/pages/dashboard/analysis/components/Charts/Pie/index.tsx @@ -1,12 +1,13 @@ -import { Chart, Coord, Geom, Tooltip } from "bizcharts"; -import React, { Component } from "react"; -import { DataView } from "@antv/data-set"; -import Debounce from "lodash.debounce"; -import { Divider } from "antd"; -import ReactFitText from "react-fittext"; -import classNames from "classnames"; -import autoHeight from "../autoHeight"; -import useStyles from "./index.style"; +import { Chart, Coord, Geom, Tooltip } from 'bizcharts'; +import React, { Component } from 'react'; +import { DataView } from '@antv/data-set'; +import Debounce from 'lodash.debounce'; +import { Divider } from 'antd'; +import ReactFitText from 'react-fittext'; +import classNames from 'classnames'; +import autoHeight from '../autoHeight'; +import useStyles from './index.style'; + export type PieProps = { animate?: boolean; color?: string; @@ -56,7 +57,7 @@ class Pie extends Component { const { hasLegend } = this.props; const { legendBlock } = this.state; if (!hasLegend || !this.root) { - window.removeEventListener("resize", this.resize); + window.removeEventListener('resize', this.resize); return; } if ( @@ -77,13 +78,13 @@ class Pie extends Component { }, 400); componentDidMount() { window.addEventListener( - "resize", + 'resize', () => { this.requestRef = requestAnimationFrame(() => this.resize()); }, { passive: true, - } + }, ); } componentDidUpdate(preProps: PieProps) { @@ -98,7 +99,7 @@ class Pie extends Component { if (this.requestRef) { window.cancelAnimationFrame(this.requestRef); } - window.removeEventListener("resize", this.resize); + window.removeEventListener('resize', this.resize); if (this.resize) { (this.resize as any).cancel(); } @@ -116,21 +117,21 @@ class Pie extends Component { if (!this.chart) return; const geom = this.chart.getAllGeoms()[0]; // 获取所有的图形 if (!geom) return; - const items = (geom as any).get("dataArray") || []; // 获取图形对应的 + const items = (geom as any).get('dataArray') || []; // 获取图形对应的 const legendData = items.map( ( item: { color: any; _origin: any; - }[] + }[], ) => { /* eslint no-underscore-dangle:0 */ const origin = item[0]._origin; origin.color = item[0].color; origin.checked = true; return origin; - } + }, ); this.setState({ legendData, @@ -145,14 +146,9 @@ class Pie extends Component { const { legendData } = this.state; const key = i as unknown as number; legendData[key] = newItem; - const filteredLegendData = legendData - .filter((l) => l.checked) - .map((l) => l.x); + const filteredLegendData = legendData.filter((l) => l.checked).map((l) => l.x); if (this.chart) { - this.chart.filter( - "x", - (val) => filteredLegendData.indexOf(`${val}`) > -1 - ); + this.chart.filter('x', (val) => filteredLegendData.indexOf(`${val}`) > -1); } this.setState({ legendData, @@ -195,7 +191,7 @@ class Pie extends Component { let formatColor; const scale = { x: { - type: "cat", + type: 'cat', range: [0, 1], }, y: { @@ -206,18 +202,18 @@ class Pie extends Component { selected = false; tooltip = false; formatColor = (value: string) => { - if (value === "占比") { - return color || "rgba(24, 144, 255, 0.85)"; + if (value === '占比') { + return color || 'rgba(24, 144, 255, 0.85)'; } - return "#F0F2F5"; + return '#F0F2F5'; }; data = [ { - x: "占比", + x: '占比', y: parseFloat(`${percent}`), }, { - x: "反比", + x: '反比', y: 100 - parseFloat(`${percent}`), }, ]; @@ -227,9 +223,9 @@ class Pie extends Component { (...args: any[]) => { name?: string; value: string; - } + }, ] = [ - "x*percent", + 'x*percent', (x: string, p: number) => ({ name: x, value: `${(p * 100).toFixed(2)}%`, @@ -238,10 +234,10 @@ class Pie extends Component { const padding = [12, 0, 12, 0] as [number, number, number, number]; const dv = new DataView(); dv.source(data).transform({ - type: "percent", - field: "y", - dimension: "x", - as: "percent", + type: 'percent', + field: 'y', + dimension: 'x', + as: 'percent', }); return (
    @@ -261,17 +257,12 @@ class Pie extends Component { @@ -281,9 +272,7 @@ class Pie extends Component { {subTitle &&

    {subTitle}

    } {/* eslint-disable-next-line */} {total && ( -
    - {typeof total === "function" ? total() : total} -
    +
    {typeof total === 'function' ? total() : total}
    )}
    )} @@ -297,20 +286,15 @@ class Pie extends Component { {item.x} - {`${(Number.isNaN(item.percent) - ? 0 - : item.percent * 100 - ).toFixed(2)}%`} - - - {valueFormat ? valueFormat(item.y) : item.y} + {`${(Number.isNaN(item.percent) ? 0 : item.percent * 100).toFixed(2)}%`} + {valueFormat ? valueFormat(item.y) : item.y} ))} diff --git a/src/pages/dashboard/analysis/components/Charts/TagCloud/index.tsx b/src/pages/dashboard/analysis/components/Charts/TagCloud/index.tsx index 74d03387..4b892c01 100644 --- a/src/pages/dashboard/analysis/components/Charts/TagCloud/index.tsx +++ b/src/pages/dashboard/analysis/components/Charts/TagCloud/index.tsx @@ -1,16 +1,15 @@ -import { Chart, Coord, Geom, Shape, Tooltip } from "bizcharts"; -import React, { Component } from "react"; -import DataSet from "@antv/data-set"; -import Debounce from "lodash.debounce"; -import classNames from "classnames"; -import autoHeight from "../autoHeight"; -import useStyles from "./index.style"; +import { Chart, Coord, Geom, Shape, Tooltip } from 'bizcharts'; +import React, { Component } from 'react'; +import DataSet from '@antv/data-set'; +import Debounce from 'lodash.debounce'; +import classNames from 'classnames'; +import autoHeight from '../autoHeight'; +import useStyles from './index.style'; /* eslint no-underscore-dangle: 0 */ /* eslint no-param-reassign: 0 */ -const imgUrl = - "https://gw.alipayobjects.com/zos/rmsportal/gWyeGLCdFFRavBGIDzWk.png"; +const imgUrl = 'https://gw.alipayobjects.com/zos/rmsportal/gWyeGLCdFFRavBGIDzWk.png'; export type TagCloudProps = { data: { name: string; @@ -40,7 +39,7 @@ class TagCloud extends Component { this.initTagCloud(); this.renderChart(this.props); }); - window.addEventListener("resize", this.resize, { + window.addEventListener('resize', this.resize, { passive: true, }); } @@ -53,7 +52,7 @@ class TagCloud extends Component { componentWillUnmount() { this.isUnmount = true; window.cancelAnimationFrame(this.requestRef); - window.removeEventListener("resize", this.resize); + window.removeEventListener('resize', this.resize); } resize = () => { this.requestRef = requestAnimationFrame(() => { @@ -78,13 +77,13 @@ class TagCloud extends Component { fontSize: cfg.origin._origin.size, rotate: cfg.origin._origin.rotate, text: cfg.origin._origin.text, - textAlign: "center", + textAlign: 'center', fontFamily: cfg.origin._origin.font, fill: cfg.color, - textBaseline: "Alphabetic", + textBaseline: 'Alphabetic', }; } - (Shape as any).registerShape("point", "cloud", { + (Shape as any).registerShape('point', 'cloud', { drawShape( cfg: { x: any; @@ -95,12 +94,12 @@ class TagCloud extends Component { arg0: string, arg1: { attrs: any; - } + }, ) => void; - } + }, ) { const attrs = getTextAttrs(cfg); - return container.addShape("text", { + return container.addShape('text', { attrs: { ...attrs, x: cfg.x, @@ -120,13 +119,13 @@ class TagCloud extends Component { const w = this.root.offsetWidth; const onload = () => { const dv = new DataSet.View().source(data); - const range = dv.range("value"); + const range = dv.range('value'); const [min, max] = range; dv.transform({ - type: "tag-cloud", - fields: ["name", "value"], + type: 'tag-cloud', + fields: ['name', 'value'], imageMask: this.imageMask, - font: "Verdana", + font: 'Verdana', size: [w, h], // 宽高设置最好根据 imageMask 做调整 padding: 0, @@ -151,7 +150,7 @@ class TagCloud extends Component { }; if (!this.imageMask) { this.imageMask = new Image(); - this.imageMask.crossOrigin = ""; + this.imageMask.crossOrigin = ''; this.imageMask.src = imgUrl; this.imageMask.onload = onload; } else { @@ -165,7 +164,7 @@ class TagCloud extends Component {
    { color="text" shape="cloud" tooltip={[ - "text*value", + 'text*value', function trans(text, value) { return { name: text, diff --git a/src/pages/dashboard/analysis/components/Charts/TimelineChart/index.tsx b/src/pages/dashboard/analysis/components/Charts/TimelineChart/index.tsx index 1205a89b..3790c3a4 100644 --- a/src/pages/dashboard/analysis/components/Charts/TimelineChart/index.tsx +++ b/src/pages/dashboard/analysis/components/Charts/TimelineChart/index.tsx @@ -1,9 +1,9 @@ -import { Axis, Chart, Geom, Legend, Tooltip } from "bizcharts"; -import DataSet from "@antv/data-set"; -import React from "react"; -import Slider from "bizcharts-plugin-slider"; -import autoHeight from "../autoHeight"; -import useStyles from "./index.style"; +import { Axis, Chart, Geom, Legend, Tooltip } from 'bizcharts'; +import DataSet from '@antv/data-set'; +import React from 'react'; +import Slider from 'bizcharts-plugin-slider'; +import autoHeight from '../autoHeight'; +import useStyles from './index.style'; export type TimelineChartProps = { data: { x: number; @@ -27,8 +27,8 @@ const TimelineChart: React.FC = (props) => { height = 400, padding = [60, 20, 40, 40] as [number, number, number, number], titleMap = { - y1: "y1", - y2: "y2", + y1: 'y1', + y2: 'y2', }, borderWidth = 2, data: sourceData, @@ -47,7 +47,7 @@ const TimelineChart: React.FC = (props) => { if (data[0] && data[0].y1 && data[0].y2) { max = Math.max( [...data].sort((a, b) => b.y1 - a.y1)[0].y1, - [...data].sort((a, b) => b.y2 - a.y2)[0].y2 + [...data].sort((a, b) => b.y2 - a.y2)[0].y2, ); } const ds = new DataSet({ @@ -59,36 +59,36 @@ const TimelineChart: React.FC = (props) => { const dv = ds.createView(); dv.source(data) .transform({ - type: "filter", + type: 'filter', callback: (obj: { x: string }) => { const date = obj.x; return date <= ds.state.end && date >= ds.state.start; }, }) .transform({ - type: "map", + type: 'map', callback(row: { y1: string; y2: string }) { const newRow = { ...row, }; - newRow[titleMap.y1 as "y1"] = row.y1; - newRow[titleMap.y2 as "y2"] = row.y2; + newRow[titleMap.y1 as 'y1'] = row.y1; + newRow[titleMap.y2 as 'y2'] = row.y2; return newRow; }, }) .transform({ - type: "fold", + type: 'fold', fields: [titleMap.y1, titleMap.y2], // 展开字段集 - key: "key", + key: 'key', // key字段 - value: "value", // value字段 + value: 'value', // value字段 }); const timeScale = { - type: "time", + type: 'time', tickInterval: 60 * 60 * 1000, - mask: "HH:mm", + mask: 'HH:mm', range: [0, 1], }; const cols = { @@ -112,17 +112,11 @@ const TimelineChart: React.FC = (props) => { start={ds.state.start} end={ds.state.end} backgroundChart={{ - type: "line", + type: 'line', }} - onChange={({ - startValue, - endValue, - }: { - startValue: string; - endValue: string; - }) => { - ds.setState("start", startValue); - ds.setState("end", endValue); + onChange={({ startValue, endValue }: { startValue: string; endValue: string }) => { + ds.setState('start', startValue); + ds.setState('end', endValue); }} /> ); @@ -135,13 +129,7 @@ const TimelineChart: React.FC = (props) => { >
    {title &&

    {title}

    } - + diff --git a/src/pages/dashboard/analysis/components/Charts/WaterWave/index.tsx b/src/pages/dashboard/analysis/components/Charts/WaterWave/index.tsx index fba06a8c..2681d484 100644 --- a/src/pages/dashboard/analysis/components/Charts/WaterWave/index.tsx +++ b/src/pages/dashboard/analysis/components/Charts/WaterWave/index.tsx @@ -1,6 +1,6 @@ -import React, { Component } from "react"; -import autoHeight from "../autoHeight"; -import useStyles from "./index.style"; +import React, { Component } from 'react'; +import autoHeight from '../autoHeight'; +import useStyles from './index.style'; /* eslint no-return-assign: 0 */ /* eslint no-mixed-operators: 0 */ @@ -24,28 +24,28 @@ class WaterWave extends Component { this.renderChart(); this.resize(); window.addEventListener( - "resize", + 'resize', () => { requestAnimationFrame(() => this.resize()); }, { passive: true, - } + }, ); } componentDidUpdate(props: WaterWaveProps) { const { percent } = this.props; if (props.percent !== percent) { // 不加这个会造成绘制缓慢 - this.renderChart("update"); + this.renderChart('update'); } } componentWillUnmount() { cancelAnimationFrame(this.timer); if (this.node) { - this.node.innerHTML = ""; + this.node.innerHTML = ''; } - window.removeEventListener("resize", this.resize); + window.removeEventListener('resize', this.resize); } resize = () => { if (this.root) { @@ -57,14 +57,14 @@ class WaterWave extends Component { } }; renderChart(type?: string) { - const { percent, color = "#1890FF" } = this.props; + 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"); + const ctx = canvas.getContext('2d'); if (!ctx) { return; } @@ -88,11 +88,7 @@ class WaterWave extends Component { 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[]; @@ -118,7 +114,7 @@ class WaterWave extends Component { ctx.lineTo(xOffset, canvasHeight); ctx.lineTo(startPoint[0], startPoint[1]); const gradient = ctx.createLinearGradient(0, 0, 0, canvasHeight); - gradient.addColorStop(0, "#ffffff"); + gradient.addColorStop(0, '#ffffff'); gradient.addColorStop(1, color); ctx.fillStyle = gradient; ctx.fill(); @@ -129,7 +125,7 @@ class WaterWave extends Component { return; } ctx.clearRect(0, 0, canvasWidth, canvasHeight); - if (circleLock && type !== "update") { + if (circleLock && type !== 'update') { if (arcStack.length) { const temp = arcStack.shift() as number[]; ctx.lineTo(temp[0], temp[1]); @@ -139,7 +135,7 @@ class WaterWave extends Component { ctx.lineTo(cStartPoint[0], cStartPoint[1]); ctx.stroke(); arcStack = []; - ctx.globalCompositeOperation = "destination-over"; + ctx.globalCompositeOperation = 'destination-over'; ctx.beginPath(); ctx.lineWidth = lineWidth; ctx.arc(radius, radius, bR, 0, 2 * Math.PI, true); @@ -199,7 +195,7 @@ class WaterWave extends Component { style={{ width: height, height, - overflow: "hidden", + overflow: 'hidden', }} > { return { miniChart: { - position: "relative", - width: "100%", + position: 'relative', + width: '100%', }, chartContent: { - position: "absolute", - bottom: "-28px", - width: "100%", + position: 'absolute', + bottom: '-28px', + width: '100%', }, - "> div": { - margin: "0 -5px", - overflow: "hidden", + '> div': { + margin: '0 -5px', + overflow: 'hidden', }, chartLoading: { - position: "absolute", - top: "16px", - left: "50%", - marginLeft: "-7px", + position: 'absolute', + top: '16px', + left: '50%', + marginLeft: '-7px', }, }; }); diff --git a/src/pages/dashboard/analysis/components/IntroduceRow.tsx b/src/pages/dashboard/analysis/components/IntroduceRow.tsx index 3ebeced1..3cac1d10 100644 --- a/src/pages/dashboard/analysis/components/IntroduceRow.tsx +++ b/src/pages/dashboard/analysis/components/IntroduceRow.tsx @@ -1,12 +1,12 @@ -import { InfoCircleOutlined } from "@ant-design/icons"; -import { TinyArea, TinyColumn, Progress } from "@ant-design/charts"; -import { Col, Row, Tooltip } from "antd"; -import numeral from "numeral"; -import { ChartCard, Field } from "./Charts"; -import type { DataItem } from "../data.d"; -import Trend from "./Trend"; -import Yuan from "../utils/Yuan"; -import useStyles from "../style.style"; +import { InfoCircleOutlined } from '@ant-design/icons'; +import { TinyArea, TinyColumn, Progress } from '@ant-design/charts'; +import { Col, Row, Tooltip } from 'antd'; +import numeral from 'numeral'; +import { ChartCard, Field } from './Charts'; +import type { DataItem } from '../data.d'; +import Trend from './Trend'; +import Yuan from '../utils/Yuan'; +import useStyles from '../style.style'; const topColResponsiveProps = { xs: 24, sm: 12, @@ -17,13 +17,7 @@ const topColResponsiveProps = { marginBottom: 24, }, }; -const IntroduceRow = ({ - loading, - visitData, -}: { - loading: boolean; - visitData: DataItem[]; -}) => { +const IntroduceRow = ({ loading, visitData }: { loading: boolean; visitData: DataItem[] }) => { const { styles } = useStyles(); return ( @@ -38,12 +32,7 @@ const IntroduceRow = ({ } loading={loading} total={() => 126560} - footer={ - - } + footer={} contentHeight={46} > } - total={numeral(8846).format("0,0")} - footer={ - - } + total={numeral(8846).format('0,0')} + footer={} contentHeight={46} > } - total={numeral(6560).format("0,0")} + total={numeral(6560).format('0,0')} footer={} contentHeight={46} > - + @@ -126,8 +107,8 @@ const IntroduceRow = ({ footer={
    { return { numberInfo: {}, suffix: { - marginLeft: "4px", + marginLeft: '4px', color: token.colorText, - fontSize: "16px", - fontStyle: "normal", + fontSize: '16px', + fontStyle: 'normal', }, numberInfoTitle: { - marginBottom: "16px", + marginBottom: '16px', color: token.colorText, fontSize: token.fontSizeLg, - transition: "all 0.3s", + transition: 'all 0.3s', }, numberInfoSubTitle: { - height: "22px", - overflow: "hidden", + height: '22px', + overflow: 'hidden', color: token.colorTextSecondary, fontSize: token.fontSize, - lineHeight: "22px", - whiteSpace: "nowrap", - textOverflow: "ellipsis", - wordBreak: "break-all", + lineHeight: '22px', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + wordBreak: 'break-all', }, numberInfoValue: { - "& > span": { color: token.colorText }, + '& > span': { color: token.colorText }, }, subTotal: { - marginRight: "0", + marginRight: '0', color: token.colorTextSecondary, fontSize: token.fontSizeLg, - verticalAlign: "top", + verticalAlign: 'top', }, - ".anticon": { - marginLeft: "4px", - fontSize: "12px", - transform: "scale(0.82)", + '.anticon': { + marginLeft: '4px', + fontSize: '12px', + transform: 'scale(0.82)', }, - ".anticon-caret-up": { + '.anticon-caret-up': { color: token.red6, }, - ".anticon-caret-down": { + '.anticon-caret-down': { color: token.green6, }, numberInfolight: {}, diff --git a/src/pages/dashboard/analysis/components/NumberInfo/index.tsx b/src/pages/dashboard/analysis/components/NumberInfo/index.tsx index 4fea6019..c433260a 100644 --- a/src/pages/dashboard/analysis/components/NumberInfo/index.tsx +++ b/src/pages/dashboard/analysis/components/NumberInfo/index.tsx @@ -1,12 +1,12 @@ -import { CaretUpOutlined, CaretDownOutlined } from "@ant-design/icons"; -import React from "react"; -import classNames from "classnames"; -import useStyles from "./index.style"; +import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons'; +import React from 'react'; +import classNames from 'classnames'; +import useStyles from './index.style'; export type NumberInfoProps = { title?: React.ReactNode | string; subTitle?: React.ReactNode | string; total?: React.ReactNode | string; - status?: "up" | "down"; + status?: 'up' | 'down'; theme?: string; gap?: number; subTotal?: number; @@ -33,17 +33,14 @@ const NumberInfo: React.FC = ({ {...rest} > {title && ( -
    +
    {title}
    )} {subTitle && (
    {subTitle}
    @@ -65,11 +62,7 @@ const NumberInfo: React.FC = ({ {(status || subTotal) && ( {subTotal} - {status && status === "up" ? ( - - ) : ( - - )} + {status && status === 'up' ? : } )}
    diff --git a/src/pages/dashboard/analysis/components/OfflineData.tsx b/src/pages/dashboard/analysis/components/OfflineData.tsx index 304b5af2..f58b6e3b 100644 --- a/src/pages/dashboard/analysis/components/OfflineData.tsx +++ b/src/pages/dashboard/analysis/components/OfflineData.tsx @@ -1,8 +1,8 @@ -import { Card, Col, Row, Tabs } from "antd"; -import { RingProgress, Line } from "@ant-design/charts"; -import type { OfflineDataType, DataItem } from "../data.d"; -import NumberInfo from "./NumberInfo"; -import useStyles from "../style.style"; +import { Card, Col, Row, Tabs } from 'antd'; +import { RingProgress, Line } from '@ant-design/charts'; +import type { OfflineDataType, DataItem } from '../data.d'; +import NumberInfo from './NumberInfo'; +import useStyles from '../style.style'; const CustomTab = ({ data, currentTabKey: currentKey, @@ -14,7 +14,7 @@ const CustomTab = ({ gutter={8} style={{ width: 138, - margin: "8px 0", + margin: '8px 0', }} > @@ -23,7 +23,7 @@ const CustomTab = ({ subTitle="转化率" gap={2} total={`${data.cvr * 100}%`} - theme={currentKey !== data.name ? "light" : undefined} + theme={currentKey !== data.name ? 'light' : undefined} /> {offlineData.map((shop) => ( - } - key={shop.name} - > + } key={shop.name}>
    diff --git a/src/pages/dashboard/analysis/components/ProportionSales.tsx b/src/pages/dashboard/analysis/components/ProportionSales.tsx index c71de67b..84177c09 100644 --- a/src/pages/dashboard/analysis/components/ProportionSales.tsx +++ b/src/pages/dashboard/analysis/components/ProportionSales.tsx @@ -1,11 +1,11 @@ -import { Card, Radio, Typography } from "antd"; -import numeral from "numeral"; -import type { RadioChangeEvent } from "antd/es/radio"; -import { Donut } from "@ant-design/charts"; -import type { DonutConfig } from "@ant-design/charts/es/donut"; -import React from "react"; -import type { DataItem } from "../data.d"; -import useStyles from "../style.style"; +import { Card, Radio, Typography } from 'antd'; +import numeral from 'numeral'; +import type { RadioChangeEvent } from 'antd/es/radio'; +import { Donut } from '@ant-design/charts'; +import type { DonutConfig } from '@ant-design/charts/es/donut'; +import React from 'react'; +import type { DataItem } from '../data.d'; +import useStyles from '../style.style'; const { Text } = Typography; const ProportionSales = ({ dropdownGroup, @@ -16,7 +16,7 @@ const ProportionSales = ({ }: { loading: boolean; dropdownGroup: React.ReactNode; - salesType: "all" | "online" | "stores"; + salesType: 'all' | 'online' | 'stores'; salesPieData: DataItem[]; handleChangeSalesType?: (e: RadioChangeEvent) => void; }) => { @@ -28,7 +28,7 @@ const ProportionSales = ({ bordered={false} title="销售额类别占比" style={{ - height: "100%", + height: '100%', }} extra={
    @@ -57,18 +57,16 @@ const ProportionSales = ({ }} label={{ visible: true, - type: "spider", + type: 'spider', formatter: (text, item) => { // eslint-disable-next-line no-underscore-dangle - return `${item._origin.x}: ${numeral(item._origin.y).format( - "0,0" - )}`; + return `${item._origin.x}: ${numeral(item._origin.y).format('0,0')}`; }, }} statistic={ { - totalLabel: "销售额", - } as DonutConfig["statistic"] + totalLabel: '销售额', + } as DonutConfig['statistic'] } />
    diff --git a/src/pages/dashboard/analysis/components/SalesCard.tsx b/src/pages/dashboard/analysis/components/SalesCard.tsx index 46342d34..1c4a3afa 100644 --- a/src/pages/dashboard/analysis/components/SalesCard.tsx +++ b/src/pages/dashboard/analysis/components/SalesCard.tsx @@ -1,11 +1,11 @@ -import { Card, Col, DatePicker, Row, Tabs } from "antd"; -import type { RangePickerProps } from "antd/es/date-picker/generatePicker"; -import type dayjs from "dayjs"; -import { Column } from "@ant-design/charts"; -import numeral from "numeral"; -import type { DataItem } from "../data.d"; -import useStyles from "../style.style"; -export type TimeType = "today" | "week" | "month" | "year"; +import { Card, Col, DatePicker, Row, Tabs } from 'antd'; +import type { RangePickerProps } from 'antd/es/date-picker/generatePicker'; +import type dayjs from 'dayjs'; +import { Column } from '@ant-design/charts'; +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 { TabPane } = Tabs; const rankingListData: { @@ -26,11 +26,11 @@ const SalesCard = ({ loading, selectDate, }: { - rangePickerValue: RangePickerProps["value"]; + rangePickerValue: RangePickerProps['value']; isActive: (key: TimeType) => string; salesData: DataItem[]; loading: boolean; - handleRangePickerChange: RangePickerProps["onChange"]; + handleRangePickerChange: RangePickerProps['onChange']; selectDate: (key: TimeType) => void; }) => { const { styles } = useStyles(); @@ -47,28 +47,16 @@ const SalesCard = ({ tabBarExtraContent={
    @@ -110,14 +98,14 @@ const SalesCard = ({ }} title={{ visible: true, - text: "销售趋势", + text: '销售趋势', style: { fontSize: 14, }, }} meta={{ y: { - alias: "销售量", + alias: '销售量', }, }} /> @@ -130,20 +118,15 @@ const SalesCard = ({ {rankingListData.map((item, i) => (
  • {i + 1} - + {item.title} - {numeral(item.total).format("0,0")} + {numeral(item.total).format('0,0')}
    • ))} @@ -176,14 +159,14 @@ const SalesCard = ({ }} title={{ visible: true, - text: "访问量趋势", + text: '访问量趋势', style: { fontSize: 14, }, }} meta={{ y: { - alias: "访问量", + alias: '访问量', }, }} /> @@ -196,19 +179,14 @@ const SalesCard = ({ {rankingListData.map((item, i) => (
  • {i + 1} - + {item.title} - {numeral(item.total).format("0,0")} + {numeral(item.total).format('0,0')}
    • ))} diff --git a/src/pages/dashboard/analysis/components/Trend/index.style.ts b/src/pages/dashboard/analysis/components/Trend/index.style.ts index 49dfe8cc..9fafc272 100644 --- a/src/pages/dashboard/analysis/components/Trend/index.style.ts +++ b/src/pages/dashboard/analysis/components/Trend/index.style.ts @@ -1,30 +1,30 @@ -import { createStyles } from "antd-style"; +import { createStyles } from 'antd-style'; const useStyles = createStyles(({ token }) => { return { trendItem: { - display: "inline-block", + display: 'inline-block', fontSize: token.fontSize, - lineHeight: "22px", + lineHeight: '22px', }, up: { color: token.red6, }, down: { - top: "-1px", + top: '-1px', color: token.green6, }, span: { - fontSize: "12px", - transform: "scale(0.83)", + fontSize: '12px', + transform: 'scale(0.83)', }, - "trendItemGrey .up, trendItemGrey .down": { + 'trendItemGrey .up, trendItemGrey .down': { color: token.colorText, }, - "reverseColor .up": { + 'reverseColor .up': { color: token.green6, }, - "reverseColor .down": { + 'reverseColor .down': { color: token.red6, }, }; diff --git a/src/pages/dashboard/analysis/components/Trend/index.tsx b/src/pages/dashboard/analysis/components/Trend/index.tsx index d9581e19..4ac1e69f 100644 --- a/src/pages/dashboard/analysis/components/Trend/index.tsx +++ b/src/pages/dashboard/analysis/components/Trend/index.tsx @@ -1,10 +1,10 @@ -import { CaretUpOutlined, CaretDownOutlined } from "@ant-design/icons"; -import React from "react"; -import classNames from "classnames"; -import useStyles from "./index.style"; +import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons'; +import React from 'react'; +import classNames from 'classnames'; +import useStyles from './index.style'; export type TrendProps = { colorful?: boolean; - flag: "up" | "down"; + flag: 'up' | 'down'; style?: React.CSSProperties; reverseColor?: boolean; className?: string; @@ -25,18 +25,14 @@ const Trend: React.FC = ({ [styles.trendItemGrey]: !colorful, [styles.reverseColor]: reverseColor && colorful, }, - className + className, ); return ( -
    +
    {children} {flag && ( - {flag === "up" ? : } + {flag === 'up' ? : } )}
    diff --git a/src/pages/dashboard/analysis/index.tsx b/src/pages/dashboard/analysis/index.tsx index 1f4ab341..fa1e825e 100644 --- a/src/pages/dashboard/analysis/index.tsx +++ b/src/pages/dashboard/analysis/index.tsx @@ -1,35 +1,35 @@ -import type { FC } from "react"; -import { Suspense, useState } from "react"; -import { EllipsisOutlined } from "@ant-design/icons"; -import { Col, Dropdown, Menu, Row } from "antd"; -import { GridContent } from "@ant-design/pro-components"; -import type { RadioChangeEvent } from "antd/es/radio"; -import type { RangePickerProps } from "antd/es/date-picker/generatePicker"; -import type dayjs from "dayjs"; -import IntroduceRow from "./components/IntroduceRow"; -import SalesCard from "./components/SalesCard"; -import TopSearch from "./components/TopSearch"; -import ProportionSales from "./components/ProportionSales"; -import OfflineData from "./components/OfflineData"; -import { useRequest } from "@umijs/max"; -import { fakeChartData } from "./service"; -import PageLoading from "./components/PageLoading"; -import type { TimeType } from "./components/SalesCard"; -import { getTimeDistance } from "./utils/utils"; -import type { AnalysisData } from "./data.d"; -import useStyles from "./style.style"; -type RangePickerValue = RangePickerProps["value"]; +import type { FC } from 'react'; +import { Suspense, useState } from 'react'; +import { EllipsisOutlined } from '@ant-design/icons'; +import { Col, Dropdown, Menu, Row } from 'antd'; +import { GridContent } from '@ant-design/pro-components'; +import type { RadioChangeEvent } from 'antd/es/radio'; +import type { RangePickerProps } from 'antd/es/date-picker/generatePicker'; +import type dayjs from 'dayjs'; +import IntroduceRow from './components/IntroduceRow'; +import SalesCard from './components/SalesCard'; +import TopSearch from './components/TopSearch'; +import ProportionSales from './components/ProportionSales'; +import OfflineData from './components/OfflineData'; +import { useRequest } from '@umijs/max'; +import { fakeChartData } from './service'; +import PageLoading from './components/PageLoading'; +import type { TimeType } from './components/SalesCard'; +import { getTimeDistance } from './utils/utils'; +import type { AnalysisData } from './data.d'; +import useStyles from './style.style'; +type RangePickerValue = RangePickerProps['value']; type AnalysisProps = { dashboardAndanalysis: AnalysisData; loading: boolean; }; -type SalesType = "all" | "online" | "stores"; +type SalesType = 'all' | 'online' | 'stores'; const Analysis: FC = () => { const { styles } = useStyles(); - const [salesType, setSalesType] = useState("all"); - const [currentTabKey, setCurrentTabKey] = useState(""); + const [salesType, setSalesType] = useState('all'); + const [currentTabKey, setCurrentTabKey] = useState(''); const [rangePickerValue, setRangePickerValue] = useState( - getTimeDistance("year") + getTimeDistance('year'), ); const { loading, data } = useRequest(fakeChartData); const selectDate = (type: TimeType) => { @@ -40,31 +40,28 @@ const Analysis: FC = () => { }; const isActive = (type: TimeType) => { if (!rangePickerValue) { - return ""; + return ''; } const value = getTimeDistance(type); if (!value) { - return ""; + return ''; } if (!rangePickerValue[0] || !rangePickerValue[1]) { - return ""; + return ''; } if ( - rangePickerValue[0].isSame(value[0] as dayjs.Dayjs, "day") && - rangePickerValue[1].isSame(value[1] as dayjs.Dayjs, "day") + rangePickerValue[0].isSame(value[0] as dayjs.Dayjs, 'day') && + rangePickerValue[1].isSame(value[1] as dayjs.Dayjs, 'day') ) { return styles.currentDate; } - return ""; + return ''; }; let salesPieData; - if (salesType === "all") { + if (salesType === 'all') { salesPieData = data?.salesTypeData; } else { - salesPieData = - salesType === "online" - ? data?.salesTypeDataOnline - : data?.salesTypeDataOffline; + salesPieData = salesType === 'online' ? data?.salesTypeDataOnline : data?.salesTypeDataOffline; } const menu = ( @@ -85,8 +82,7 @@ const Analysis: FC = () => { const handleTabChange = (key: string) => { setCurrentTabKey(key); }; - const activeKey = - currentTabKey || (data?.offlineData[0] && data?.offlineData[0].name) || ""; + const activeKey = currentTabKey || (data?.offlineData[0] && data?.offlineData[0].name) || ''; return ( <> diff --git a/src/pages/dashboard/analysis/style.style.ts b/src/pages/dashboard/analysis/style.style.ts index d588a793..8ef98de7 100644 --- a/src/pages/dashboard/analysis/style.style.ts +++ b/src/pages/dashboard/analysis/style.style.ts @@ -1,14 +1,14 @@ -import { createStyles } from "antd-style"; +import { createStyles } from 'antd-style'; const useStyles = createStyles(({ token }) => { return { iconGroup: {}, - "span.anticon": { - marginLeft: "16px", + 'span.anticon': { + marginLeft: '16px', color: token.colorTextSecondary, - cursor: "pointer", - transition: "color 0.32s", - "&:hover": { color: token.colorText }, + cursor: 'pointer', + transition: 'color 0.32s', + '&:hover': { color: token.colorText }, }, rankingList: { [`@media screen and (max-width: ${token.screenLG}px)`]: {}, @@ -18,42 +18,42 @@ const useStyles = createStyles(({ token }) => { }, span: { color: token.colorText, - fontSize: "14px", - lineHeight: "22px", + fontSize: '14px', + lineHeight: '22px', }, rankingItemNumber: { - display: "inline-block", - width: "20px", - height: "20px", - marginTop: "1.5px", - marginRight: "16px", - fontWeight: "600", - fontSize: "12px", - lineHeight: "20px", - textAlign: "center", + display: 'inline-block', + width: '20px', + height: '20px', + marginTop: '1.5px', + marginRight: '16px', + fontWeight: '600', + fontSize: '12px', + lineHeight: '20px', + textAlign: 'center', backgroundColor: token.tagDefaultBg, - borderRadius: "20px", + borderRadius: '20px', }, active: { - color: "#fff", - backgroundColor: "#314659", + color: '#fff', + backgroundColor: '#314659', }, rankingItemTitle: { - flex: "1", - marginRight: "8px", - overflow: "hidden", - whiteSpace: "nowrap", - textOverflow: "ellipsis", + flex: '1', + marginRight: '8px', + overflow: 'hidden', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', }, salesExtra: { [`@media screen and (max-width: ${token.screenLG}px)`]: { - display: "none", + display: 'none', }, }, a: { - marginLeft: "24px", + marginLeft: '24px', color: token.colorText, - "&:hover": { color: token.colorPrimary }, + '&:hover': { color: token.colorPrimary }, }, currentDate: { color: token.colorPrimary, @@ -63,82 +63,82 @@ const useStyles = createStyles(({ token }) => { }, salesBar: { [`@media screen and (max-width: ${token.screenMD}px)`]: { - padding: "16px", + padding: '16px', }, }, salesRank: { - padding: "0 32px 32px 72px", + padding: '0 32px 32px 72px', }, - ".ant-tabs-bar, .ant-tabs-nav-wrap": { - paddingLeft: "16px", + '.ant-tabs-bar, .ant-tabs-nav-wrap': { + paddingLeft: '16px', }, - ".ant-tabs-nav .ant-tabs-tab": { - paddingTop: "16px", - paddingBottom: "14px", - lineHeight: "24px", + '.ant-tabs-nav .ant-tabs-tab': { + paddingTop: '16px', + paddingBottom: '14px', + lineHeight: '24px', }, - ".ant-tabs-extra-content": { - paddingRight: "24px", - lineHeight: "55px", + '.ant-tabs-extra-content': { + paddingRight: '24px', + lineHeight: '55px', }, - ".ant-card-head": { - position: "relative", + '.ant-card-head': { + position: 'relative', }, - ".ant-card-head-title": { - alignItems: "normal", + '.ant-card-head-title': { + alignItems: 'normal', }, salesCardExtra: { - height: "inherit", + height: 'inherit', }, salesTypeRadio: { - position: "absolute", - right: "54px", - bottom: "12px", + position: 'absolute', + right: '54px', + bottom: '12px', }, offlineCard: {}, - ".ant-tabs-ink-bar": { - bottom: "auto", + '.ant-tabs-ink-bar': { + bottom: 'auto', }, - ".ant-tabs-bar": { - borderBottom: "none", + '.ant-tabs-bar': { + borderBottom: 'none', }, - ".ant-tabs-nav-container-scrolling": { - paddingRight: "40px", - paddingLeft: "40px", + '.ant-tabs-nav-container-scrolling': { + paddingRight: '40px', + paddingLeft: '40px', }, - ".ant-tabs-tab-prev-icon::before": { - position: "relative", - left: "6px", + '.ant-tabs-tab-prev-icon::before': { + position: 'relative', + left: '6px', }, - ".ant-tabs-tab-next-icon::before": { - position: "relative", - right: "6px", + '.ant-tabs-tab-next-icon::before': { + position: 'relative', + right: '6px', }, - ".ant-tabs-tab-active h4": { + '.ant-tabs-tab-active h4': { color: token.colorPrimary, }, trendText: { - marginLeft: "8px", + marginLeft: '8px', color: token.colorTextHeading, }, - "span:first-child": { + 'span:first-child': { [`@media screen and (max-width: ${token.screenLG}px)`]: { - marginRight: "8px", + marginRight: '8px', }, }, rankingTitle: { [`@media screen and (max-width: ${token.screenMD}px)`]: { - marginTop: "16px", + marginTop: '16px', }, }, salesExtraWrap: { [`@media screen and (max-width: ${token.screenSM}px)`]: { - display: "none", + display: 'none', }, }, - ".ant-tabs-content": { + '.ant-tabs-content': { [`@media screen and (max-width: ${token.screenSM}px)`]: { - paddingTop: "30px", + paddingTop: '30px', }, }, }; diff --git a/src/pages/dashboard/analysis/utils/utils.style.ts b/src/pages/dashboard/analysis/utils/utils.style.ts index bc4d077f..0ad5e64a 100644 --- a/src/pages/dashboard/analysis/utils/utils.style.ts +++ b/src/pages/dashboard/analysis/utils/utils.style.ts @@ -1,4 +1,4 @@ -import { createStyles } from "antd-style"; +import { createStyles } from 'antd-style'; const useStyles = createStyles(() => { return {}; diff --git a/src/pages/dashboard/monitor/components/ActiveChart/index.style.ts b/src/pages/dashboard/monitor/components/ActiveChart/index.style.ts index 059d3df5..628c016a 100644 --- a/src/pages/dashboard/monitor/components/ActiveChart/index.style.ts +++ b/src/pages/dashboard/monitor/components/ActiveChart/index.style.ts @@ -1,55 +1,54 @@ -import { createStyles } from "antd-style"; +import { createStyles } from 'antd-style'; const useStyles = createStyles(() => { return { activeChart: { - position: "relative", + position: 'relative', }, activeChartGrid: {}, p: { - position: "absolute", - top: "80px", + position: 'absolute', + top: '80px', }, - "p:last-child": { - top: "115px", + 'p:last-child': { + top: '115px', }, activeChartLegend: { - position: "relative", - height: "20px", - marginTop: "8px", - fontSize: "0", - lineHeight: "20px", + position: 'relative', + height: '20px', + marginTop: '8px', + fontSize: '0', + lineHeight: '20px', }, span: { - display: "inline-block", - width: "33.33%", - fontSize: "12px", - textAlign: "center", + display: 'inline-block', + width: '33.33%', + fontSize: '12px', + textAlign: 'center', }, - "span:first-child": { - textAlign: "left", + 'span:first-child': { + textAlign: 'left', }, - "span:last-child": { - textAlign: "right", + 'span:last-child': { + textAlign: 'right', }, dashedLine: { - position: "relative", - top: "-70px", - left: "-3px", - height: "1px", + 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", + 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', }, }; }); diff --git a/src/pages/dashboard/monitor/components/Charts/MiniArea/index.tsx b/src/pages/dashboard/monitor/components/Charts/MiniArea/index.tsx index 3aab3cc0..7b7f08fe 100644 --- a/src/pages/dashboard/monitor/components/Charts/MiniArea/index.tsx +++ b/src/pages/dashboard/monitor/components/Charts/MiniArea/index.tsx @@ -1,8 +1,8 @@ -import type { AxisProps } from "bizcharts"; -import { Axis, Chart, Geom, Tooltip } from "bizcharts"; -import React from "react"; -import autoHeight from "../autoHeight"; -import useStyles from "../index.style"; +import type { AxisProps } from 'bizcharts'; +import { Axis, Chart, Geom, Tooltip } from 'bizcharts'; +import React from 'react'; +import autoHeight from '../autoHeight'; +import useStyles from '../index.style'; export type MiniAreaProps = { color?: string; height?: number; @@ -32,8 +32,8 @@ const MiniArea: React.FC = (props) => { height = 1, data = [], forceFit = true, - color = "rgba(24, 144, 255, 0.2)", - borderColor = "#1089ff", + color = 'rgba(24, 144, 255, 0.2)', + borderColor = '#1089ff', scale = { x: {}, y: {}, @@ -47,7 +47,7 @@ const MiniArea: React.FC = (props) => { const padding: [number, number, number, number] = [36, 5, 30, 5]; const scaleProps = { x: { - type: "cat", + type: 'cat', range: [0, 1], ...scale.x, }, @@ -61,9 +61,9 @@ const MiniArea: React.FC = (props) => { (...args: any[]) => { name?: string; value: string; - } + }, ] = [ - "x*y", + 'x*y', (x: string, y: string) => ({ name: x, value: y, @@ -128,7 +128,7 @@ const MiniArea: React.FC = (props) => { ) : ( )} diff --git a/src/pages/dashboard/monitor/components/Charts/Pie/index.tsx b/src/pages/dashboard/monitor/components/Charts/Pie/index.tsx index 4d7d92bc..6d7b0cd6 100644 --- a/src/pages/dashboard/monitor/components/Charts/Pie/index.tsx +++ b/src/pages/dashboard/monitor/components/Charts/Pie/index.tsx @@ -1,12 +1,12 @@ -import { Chart, Coord, Geom, Tooltip } from "bizcharts"; -import React, { Component } from "react"; -import { DataView } from "@antv/data-set"; -import Debounce from "lodash.debounce"; -import { Divider } from "antd"; -import ReactFitText from "react-fittext"; -import classNames from "classnames"; -import autoHeight from "../autoHeight"; -import useStyles from "./index.style"; +import { Chart, Coord, Geom, Tooltip } from 'bizcharts'; +import React, { Component } from 'react'; +import { DataView } from '@antv/data-set'; +import Debounce from 'lodash.debounce'; +import { Divider } from 'antd'; +import ReactFitText from 'react-fittext'; +import classNames from 'classnames'; +import autoHeight from '../autoHeight'; +import useStyles from './index.style'; export type PieProps = { animate?: boolean; color?: string; @@ -56,7 +56,7 @@ class Pie extends Component { const { hasLegend } = this.props; const { legendBlock } = this.state; if (!hasLegend || !this.root) { - window.removeEventListener("resize", this.resize); + window.removeEventListener('resize', this.resize); return; } if ( @@ -77,13 +77,13 @@ class Pie extends Component { }, 300); componentDidMount() { window.addEventListener( - "resize", + 'resize', () => { this.requestRef = requestAnimationFrame(() => this.resize()); }, { passive: true, - } + }, ); } componentDidUpdate(preProps: PieProps) { @@ -98,7 +98,7 @@ class Pie extends Component { if (this.requestRef) { window.cancelAnimationFrame(this.requestRef); } - window.removeEventListener("resize", this.resize); + window.removeEventListener('resize', this.resize); if (this.resize) { (this.resize as any).cancel(); } @@ -117,21 +117,21 @@ class Pie extends Component { const geom = this.chart.getAllGeoms()[0]; // 获取所有的图形 if (!geom) return; // g2 的类型有问题 - const items = (geom as any).get("dataArray") || []; // 获取图形对应的 + const items = (geom as any).get('dataArray') || []; // 获取图形对应的 const legendData = items.map( ( item: { color: any; _origin: any; - }[] + }[], ) => { /* eslint no-underscore-dangle:0 */ const origin = item[0]._origin; origin.color = item[0].color; origin.checked = true; return origin; - } + }, ); this.setState({ legendData, @@ -144,7 +144,7 @@ class Pie extends Component { item: { checked: boolean; }, - i: string | number + i: string | number, ) => { const newItem = { ...item, @@ -152,14 +152,9 @@ class Pie extends Component { newItem.checked = !newItem.checked; const { legendData } = this.state; legendData[i as unknown as number] = newItem as any; - const filteredLegendData = legendData - .filter((l) => l.checked) - .map((l) => l.x); + const filteredLegendData = legendData.filter((l) => l.checked).map((l) => l.x); if (this.chart) { - this.chart.filter( - "x", - (val) => filteredLegendData.indexOf(`${val}`) > -1 - ); + this.chart.filter('x', (val) => filteredLegendData.indexOf(`${val}`) > -1); } this.setState({ legendData, @@ -202,7 +197,7 @@ class Pie extends Component { let formatColor; const scale = { x: { - type: "cat", + type: 'cat', range: [0, 1], }, y: { @@ -213,18 +208,18 @@ class Pie extends Component { selected = false; tooltip = false; formatColor = (value: string) => { - if (value === "占比") { - return color || "rgba(24, 144, 255, 0.85)"; + if (value === '占比') { + return color || 'rgba(24, 144, 255, 0.85)'; } - return "#F0F2F5"; + return '#F0F2F5'; }; data = [ { - x: "占比", + x: '占比', y: parseFloat(`${percent}`), }, { - x: "反比", + x: '反比', y: 100 - parseFloat(`${percent}`), }, ]; @@ -234,9 +229,9 @@ class Pie extends Component { (...args: any[]) => { name?: string; value: string; - } + }, ] = [ - "x*percent", + 'x*percent', (x: string, p: number) => ({ name: x, value: `${(p * 100).toFixed(2)}%`, @@ -245,10 +240,10 @@ class Pie extends Component { const padding = [12, 0, 12, 0] as [number, number, number, number]; const dv = new DataView(); dv.source(data).transform({ - type: "percent", - field: "y", - dimension: "x", - as: "percent", + type: 'percent', + field: 'y', + dimension: 'x', + as: 'percent', }); return (
    @@ -268,17 +263,12 @@ class Pie extends Component { @@ -288,9 +278,7 @@ class Pie extends Component { {subTitle &&

    {subTitle}

    } {/* eslint-disable-next-line */} {total && ( -
    - {typeof total === "function" ? total() : total} -
    +
    {typeof total === 'function' ? total() : total}
    )}
    )} @@ -304,20 +292,15 @@ class Pie extends Component { {item.x} - {`${(Number.isNaN(item.percent) - ? 0 - : item.percent * 100 - ).toFixed(2)}%`} - - - {valueFormat ? valueFormat(item.y) : item.y} + {`${(Number.isNaN(item.percent) ? 0 : item.percent * 100).toFixed(2)}%`} + {valueFormat ? valueFormat(item.y) : item.y} ))} diff --git a/src/pages/dashboard/monitor/components/Charts/TagCloud/index.tsx b/src/pages/dashboard/monitor/components/Charts/TagCloud/index.tsx index db655d7d..347a43f0 100644 --- a/src/pages/dashboard/monitor/components/Charts/TagCloud/index.tsx +++ b/src/pages/dashboard/monitor/components/Charts/TagCloud/index.tsx @@ -1,16 +1,15 @@ -import { Chart, Coord, Geom, Shape, Tooltip } from "bizcharts"; -import React, { Component } from "react"; -import DataSet from "@antv/data-set"; -import Debounce from "lodash.debounce"; -import classNames from "classnames"; -import autoHeight from "../autoHeight"; -import useStyles from "./index.style"; +import { Chart, Coord, Geom, Shape, Tooltip } from 'bizcharts'; +import React, { Component } from 'react'; +import DataSet from '@antv/data-set'; +import Debounce from 'lodash.debounce'; +import classNames from 'classnames'; +import autoHeight from '../autoHeight'; +import useStyles from './index.style'; /* eslint no-underscore-dangle: 0 */ /* eslint no-param-reassign: 0 */ -const imgUrl = - "https://gw.alipayobjects.com/zos/rmsportal/gWyeGLCdFFRavBGIDzWk.png"; +const imgUrl = 'https://gw.alipayobjects.com/zos/rmsportal/gWyeGLCdFFRavBGIDzWk.png'; export type TagCloudProps = { data: { name: string; @@ -40,7 +39,7 @@ class TagCloud extends Component { this.initTagCloud(); this.renderChart(this.props); }); - window.addEventListener("resize", this.resize, { + window.addEventListener('resize', this.resize, { passive: true, }); } @@ -53,7 +52,7 @@ class TagCloud extends Component { componentWillUnmount() { this.isUnmount = true; window.cancelAnimationFrame(this.requestRef); - window.removeEventListener("resize", this.resize); + window.removeEventListener('resize', this.resize); } resize = () => { this.requestRef = requestAnimationFrame(() => { @@ -78,13 +77,13 @@ class TagCloud extends Component { fontSize: cfg.origin._origin.size, rotate: cfg.origin._origin.rotate, text: cfg.origin._origin.text, - textAlign: "center", + textAlign: 'center', fontFamily: cfg.origin._origin.font, fill: cfg.color, - textBaseline: "Alphabetic", + textBaseline: 'Alphabetic', }; } - (Shape as any).registerShape("point", "cloud", { + (Shape as any).registerShape('point', 'cloud', { drawShape( cfg: { x: any; @@ -95,12 +94,12 @@ class TagCloud extends Component { arg0: string, arg1: { attrs: any; - } + }, ) => void; - } + }, ) { const attrs = getTextAttrs(cfg); - return container.addShape("text", { + return container.addShape('text', { attrs: { ...attrs, x: cfg.x, @@ -120,13 +119,13 @@ class TagCloud extends Component { const w = this.root.offsetWidth; const onload = () => { const dv = new DataSet.View().source(data); - const range = dv.range("value"); + const range = dv.range('value'); const [min, max] = range; dv.transform({ - type: "tag-cloud", - fields: ["name", "value"], + type: 'tag-cloud', + fields: ['name', 'value'], imageMask: this.imageMask, - font: "Verdana", + font: 'Verdana', size: [w, h], // 宽高设置最好根据 imageMask 做调整 padding: 0, @@ -151,7 +150,7 @@ class TagCloud extends Component { }; if (!this.imageMask) { this.imageMask = new Image(); - this.imageMask.crossOrigin = ""; + this.imageMask.crossOrigin = ''; this.imageMask.src = imgUrl; this.imageMask.onload = onload; } else { @@ -165,7 +164,7 @@ class TagCloud extends Component {
    { color="text" shape="cloud" tooltip={[ - "text*value", + 'text*value', function trans(text, value) { return { name: text, diff --git a/src/pages/dashboard/monitor/components/Charts/WaterWave/index.tsx b/src/pages/dashboard/monitor/components/Charts/WaterWave/index.tsx index fba06a8c..2681d484 100644 --- a/src/pages/dashboard/monitor/components/Charts/WaterWave/index.tsx +++ b/src/pages/dashboard/monitor/components/Charts/WaterWave/index.tsx @@ -1,6 +1,6 @@ -import React, { Component } from "react"; -import autoHeight from "../autoHeight"; -import useStyles from "./index.style"; +import React, { Component } from 'react'; +import autoHeight from '../autoHeight'; +import useStyles from './index.style'; /* eslint no-return-assign: 0 */ /* eslint no-mixed-operators: 0 */ @@ -24,28 +24,28 @@ class WaterWave extends Component { this.renderChart(); this.resize(); window.addEventListener( - "resize", + 'resize', () => { requestAnimationFrame(() => this.resize()); }, { passive: true, - } + }, ); } componentDidUpdate(props: WaterWaveProps) { const { percent } = this.props; if (props.percent !== percent) { // 不加这个会造成绘制缓慢 - this.renderChart("update"); + this.renderChart('update'); } } componentWillUnmount() { cancelAnimationFrame(this.timer); if (this.node) { - this.node.innerHTML = ""; + this.node.innerHTML = ''; } - window.removeEventListener("resize", this.resize); + window.removeEventListener('resize', this.resize); } resize = () => { if (this.root) { @@ -57,14 +57,14 @@ class WaterWave extends Component { } }; renderChart(type?: string) { - const { percent, color = "#1890FF" } = this.props; + 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"); + const ctx = canvas.getContext('2d'); if (!ctx) { return; } @@ -88,11 +88,7 @@ class WaterWave extends Component { 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[]; @@ -118,7 +114,7 @@ class WaterWave extends Component { ctx.lineTo(xOffset, canvasHeight); ctx.lineTo(startPoint[0], startPoint[1]); const gradient = ctx.createLinearGradient(0, 0, 0, canvasHeight); - gradient.addColorStop(0, "#ffffff"); + gradient.addColorStop(0, '#ffffff'); gradient.addColorStop(1, color); ctx.fillStyle = gradient; ctx.fill(); @@ -129,7 +125,7 @@ class WaterWave extends Component { return; } ctx.clearRect(0, 0, canvasWidth, canvasHeight); - if (circleLock && type !== "update") { + if (circleLock && type !== 'update') { if (arcStack.length) { const temp = arcStack.shift() as number[]; ctx.lineTo(temp[0], temp[1]); @@ -139,7 +135,7 @@ class WaterWave extends Component { ctx.lineTo(cStartPoint[0], cStartPoint[1]); ctx.stroke(); arcStack = []; - ctx.globalCompositeOperation = "destination-over"; + ctx.globalCompositeOperation = 'destination-over'; ctx.beginPath(); ctx.lineWidth = lineWidth; ctx.arc(radius, radius, bR, 0, 2 * Math.PI, true); @@ -199,7 +195,7 @@ class WaterWave extends Component { style={{ width: height, height, - overflow: "hidden", + overflow: 'hidden', }} > { - + - +
    @@ -84,7 +76,7 @@ const Monitor: FC = () => { marginBottom: 24, }} bodyStyle={{ - textAlign: "center", + textAlign: 'center', }} bordered={false} > @@ -97,8 +89,8 @@ const Monitor: FC = () => { range={[0, 25, 50, 75, 100]} statistic={{ visible: true, - text: "优", - color: "#30bf78", + text: '优', + color: '#30bf78', }} /> @@ -114,14 +106,10 @@ const Monitor: FC = () => { marginBottom: 24, }} > - + @@ -136,20 +124,10 @@ const Monitor: FC = () => { /> */} - + - + @@ -168,7 +146,7 @@ const Monitor: FC = () => { loading={loading} bordered={false} bodyStyle={{ - overflow: "hidden", + overflow: 'hidden', }} > { { forceFit padding={[0, 0, 0, 0]} statistic={{ - formatter: (value) => - `${((100 * value) / 10000).toFixed(1)}%`, + formatter: (value) => `${((100 * value) / 10000).toFixed(1)}%`, }} /> diff --git a/src/pages/dashboard/monitor/style.style.ts b/src/pages/dashboard/monitor/style.style.ts index ae2e6285..c8f9fd60 100644 --- a/src/pages/dashboard/monitor/style.style.ts +++ b/src/pages/dashboard/monitor/style.style.ts @@ -1,16 +1,16 @@ -import { createStyles } from "antd-style"; +import { createStyles } from 'antd-style'; const useStyles = createStyles(({ token }) => { return { mapChart: { [`@media screen and (max-width: ${token.screenLG}px)`]: { - height: "auto", + height: 'auto', }, }, img: { - display: "inline-block", - maxWidth: "100%", - maxHeight: "437px", + display: 'inline-block', + maxWidth: '100%', + maxHeight: '437px', }, }; }); diff --git a/src/pages/dashboard/workplace/components/EditableLinkGroup/index.style.ts b/src/pages/dashboard/workplace/components/EditableLinkGroup/index.style.ts index 1dcef2c1..09279efc 100644 --- a/src/pages/dashboard/workplace/components/EditableLinkGroup/index.style.ts +++ b/src/pages/dashboard/workplace/components/EditableLinkGroup/index.style.ts @@ -1,17 +1,17 @@ -import { createStyles } from "antd-style"; +import { createStyles } from 'antd-style'; const useStyles = createStyles(({ token }) => { return { linkGroup: { - padding: "20px 0 8px 24px", - fontSize: "0", - "& > a": { - display: "inline-block", - width: "25%", - marginBottom: "13px", + padding: '20px 0 8px 24px', + fontSize: '0', + '& > a': { + display: 'inline-block', + width: '25%', + marginBottom: '13px', color: token.colorText, fontSize: token.fontSize, - "&:hover": { + '&:hover': { color: token.colorPrimary, }, }, diff --git a/src/pages/dashboard/workplace/components/EditableLinkGroup/index.tsx b/src/pages/dashboard/workplace/components/EditableLinkGroup/index.tsx index 6c49c867..77a95020 100644 --- a/src/pages/dashboard/workplace/components/EditableLinkGroup/index.tsx +++ b/src/pages/dashboard/workplace/components/EditableLinkGroup/index.tsx @@ -1,7 +1,7 @@ -import React, { createElement } from "react"; -import { PlusOutlined } from "@ant-design/icons"; -import { Button } from "antd"; -import useStyles from "./index.style"; +import React, { createElement } from 'react'; +import { PlusOutlined } from '@ant-design/icons'; +import { Button } from 'antd'; +import useStyles from './index.style'; export type EditableLink = { title: string; href: string; @@ -25,8 +25,8 @@ const EditableLinkGroup: React.FC = (props) => { to: link.href, href: link.href, }, - link.title - ) + link.title, + ), )}
    + ); +}; + export default autoHeight()(Radar); diff --git a/src/pages/dashboard/workplace/index.tsx b/src/pages/dashboard/workplace/index.tsx index e24e80b1..23aa9714 100644 --- a/src/pages/dashboard/workplace/index.tsx +++ b/src/pages/dashboard/workplace/index.tsx @@ -1,39 +1,39 @@ -import type { FC } from "react"; -import { Avatar, Card, Col, List, Skeleton, Row, Statistic } from "antd"; -import { Radar } from "@ant-design/charts"; -import { Link, useRequest } from "@umijs/max"; -import { PageContainer } from "@ant-design/pro-components"; -import dayjs from "dayjs"; -import EditableLinkGroup from "./components/EditableLinkGroup"; -import useStyles from "./style.style"; -import type { ActivitiesType, CurrentUser } from "./data.d"; -import { queryProjectNotice, queryActivities, fakeChartData } from "./service"; -import relativeTime from "dayjs/plugin/relativeTime"; +import type { FC } from 'react'; +import { Avatar, Card, Col, List, Skeleton, Row, Statistic } from 'antd'; +import { Radar } from '@ant-design/charts'; +import { Link, useRequest } from '@umijs/max'; +import { PageContainer } from '@ant-design/pro-components'; +import dayjs from 'dayjs'; +import EditableLinkGroup from './components/EditableLinkGroup'; +import useStyles from './style.style'; +import type { ActivitiesType, CurrentUser } from './data.d'; +import { queryProjectNotice, queryActivities, fakeChartData } from './service'; +import relativeTime from 'dayjs/plugin/relativeTime'; dayjs.extend(relativeTime); const links = [ { - title: "操作一", - href: "", + title: '操作一', + href: '', }, { - title: "操作二", - href: "", + title: '操作二', + href: '', }, { - title: "操作三", - href: "", + title: '操作三', + href: '', }, { - title: "操作四", - href: "", + title: '操作四', + href: '', }, { - title: "操作五", - href: "", + title: '操作五', + href: '', }, { - title: "操作六", - href: "", + title: '操作六', + href: '', }, ]; const PageHeaderContent: FC<{ @@ -88,15 +88,13 @@ const ExtraContent: FC> = () => { }; 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) => { if (item[key as keyof ActivitiesType]) { - const value = item[key as "user"]; + const value = item[key as 'user']; return ( {value.name} @@ -130,14 +128,13 @@ const Workplace: FC = () => { content={ } @@ -176,7 +173,7 @@ const Workplace: FC = () => { description={item.description} />
    - {item.member || ""} + {item.member || ''} {item.updatedAt && ( {dayjs(item.updatedAt).fromNow()} @@ -216,11 +213,7 @@ const Workplace: FC = () => { padding: 0, }} > - {}} - links={links} - linkElement={Link} - /> + {}} links={links} linkElement={Link} /> { visible: true, }} legend={{ - position: "bottom-center", + position: 'bottom-center', }} />
    diff --git a/src/pages/dashboard/workplace/style.style.ts b/src/pages/dashboard/workplace/style.style.ts index 8902e252..93489ad5 100644 --- a/src/pages/dashboard/workplace/style.style.ts +++ b/src/pages/dashboard/workplace/style.style.ts @@ -1,147 +1,147 @@ -import { createStyles } from "antd-style"; +import { createStyles } from 'antd-style'; const useStyles = createStyles(({ token }) => { return { activitiesList: { - padding: "0 24px 8px 24px", + padding: '0 24px 8px 24px', }, username: { color: token.colorText, }, event: { - fontWeight: "normal", + fontWeight: 'normal', }, pageHeaderContent: { [`@media screen and (max-width: ${token.screenSM}px)`]: { - display: "block", + display: 'block', }, }, avatar: { - flex: "0 1 72px", - "& > span": { - display: "block", - width: "72px", - height: "72px", - borderRadius: "72px", + flex: '0 1 72px', + '& > span': { + display: 'block', + width: '72px', + height: '72px', + borderRadius: '72px', }, }, content: { [`@media screen and (max-width: ${token.screenSM}px)`]: { - marginLeft: "0", + marginLeft: '0', }, }, contentTitle: { - marginBottom: "12px", + marginBottom: '12px', color: token.colorTextHeading, - fontWeight: "500", - fontSize: "20px", - lineHeight: "28px", + fontWeight: '500', + fontSize: '20px', + lineHeight: '28px', }, extraContent: { [`@media screen and (max-width: ${token.screenSM}px)`]: {}, }, statItem: { - [`@media screen and (max-width: ${token.screenSM}px)`]: { float: "none" }, + [`@media screen and (max-width: ${token.screenSM}px)`]: { float: 'none' }, }, - "> p:first-child": { - marginBottom: "4px", + '> p:first-child': { + marginBottom: '4px', color: token.colorTextSecondary, fontSize: token.fontSize, - lineHeight: "22px", + lineHeight: '22px', }, - "> p": { - margin: "0", + '> p': { + margin: '0', color: token.colorTextHeading, - fontSize: "30px", - lineHeight: "38px", + fontSize: '30px', + lineHeight: '38px', }, - "> span": { + '> span': { color: token.colorTextSecondary, - fontSize: "20px", + fontSize: '20px', }, members: { [`@media screen and (max-width: ${token.screenLG}px)`]: { - marginBottom: "0", + marginBottom: '0', }, }, a: { - display: "inline-block", - flex: "1 1 0", + display: 'inline-block', + flex: '1 1 0', color: token.colorTextSecondary, - position: "relative", + position: 'relative', maxHeight: token.line * 1.5, - marginRight: "-1em", - paddingRight: "1em", - overflow: "hidden", - lineHeight: "1.5em", - textAlign: "justify", - "&::before": { - position: "absolute", - right: "14px", - bottom: "0", - padding: "0 1px", + marginRight: '-1em', + paddingRight: '1em', + overflow: 'hidden', + lineHeight: '1.5em', + textAlign: 'justify', + '&::before': { + position: 'absolute', + right: '14px', + bottom: '0', + padding: '0 1px', background: token.bg, content: "'...'", }, - "&::after": { - position: "absolute", - right: "14px", - width: "1em", - height: "1em", - marginTop: "0.2em", - background: "white", + '&::after': { + position: 'absolute', + right: '14px', + width: '1em', + height: '1em', + marginTop: '0.2em', + background: 'white', content: "''", }, - "&:hover": { color: token.colorPrimary }, + '&:hover': { color: token.colorPrimary }, }, member: { - marginLeft: "12px", + marginLeft: '12px', fontSize: token.fontSize, - lineHeight: "24px", - verticalAlign: "top", + lineHeight: '24px', + verticalAlign: 'top', }, projectList: { [`@media screen and (max-width: ${token.screenXS}px)`]: {}, }, - ".ant-card-meta-description": { - height: "44px", - overflow: "hidden", + '.ant-card-meta-description': { + height: '44px', + overflow: 'hidden', color: token.colorTextSecondary, - lineHeight: "22px", + lineHeight: '22px', }, cardTitle: { - fontSize: "0", + fontSize: '0', }, projectGrid: { - [`@media screen and (max-width: ${token.screenXS}px)`]: { width: "100%" }, + [`@media screen and (max-width: ${token.screenXS}px)`]: { width: '100%' }, }, projectItemContent: { - display: "flex", - height: "20px", - marginTop: "8px", - overflow: "hidden", - fontSize: "12px", - lineHeight: "1.5em", - position: "relative", + display: 'flex', + height: '20px', + marginTop: '8px', + overflow: 'hidden', + fontSize: '12px', + lineHeight: '1.5em', + position: 'relative', maxHeight: token.line * 1.5, - marginRight: "-1em", - paddingRight: "1em", - textAlign: "justify", - "&::before": { - position: "absolute", - right: "14px", - bottom: "0", - padding: "0 1px", + marginRight: '-1em', + paddingRight: '1em', + textAlign: 'justify', + '&::before': { + position: 'absolute', + right: '14px', + bottom: '0', + padding: '0 1px', background: token.bg, content: "'...'", }, - "&::after": { - position: "absolute", - right: "14px", - width: "1em", - height: "1em", - marginTop: "0.2em", - background: "white", + '&::after': { + position: 'absolute', + right: '14px', + width: '1em', + height: '1em', + marginTop: '0.2em', + background: 'white', content: "''", }, }, @@ -150,7 +150,7 @@ const useStyles = createStyles(({ token }) => { }, activeCard: { [`@media screen and (max-width: ${token.screenLG}px)`]: { - marginBottom: "24px", + marginBottom: '24px', }, }, }; diff --git a/src/pages/form/advanced-form/components/TableForm.tsx b/src/pages/form/advanced-form/components/TableForm.tsx index 07c4e302..b39d1e97 100644 --- a/src/pages/form/advanced-form/components/TableForm.tsx +++ b/src/pages/form/advanced-form/components/TableForm.tsx @@ -1,8 +1,8 @@ -import { PlusOutlined } from "@ant-design/icons"; -import { Button, Divider, Input, Popconfirm, Table, message } from "antd"; -import type { FC } from "react"; -import React, { useState } from "react"; -import useStyles from "../style.style"; +import { PlusOutlined } from '@ant-design/icons'; +import { Button, Divider, Input, Popconfirm, Table, message } from 'antd'; +import type { FC } from 'react'; +import React, { useState } from 'react'; +import useStyles from '../style.style'; type TableFormDateType = { key: string; workId?: string; @@ -20,16 +20,11 @@ const TableForm: FC = ({ value, onChange }) => { const [clickedCancel, setClickedCancel] = useState(false); const [loading, setLoading] = useState(false); const [index, setIndex] = useState(0); - const [cacheOriginData, setCacheOriginData] = useState>( - {} - ); + const [cacheOriginData, setCacheOriginData] = useState>({}); 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, @@ -54,9 +49,9 @@ const TableForm: FC = ({ value, onChange }) => { })) || []; newData.push({ key: `NEW_TEMP_ID_${index}`, - workId: "", - name: "", - department: "", + workId: '', + name: '', + department: '', editable: true, isNew: true, }); @@ -64,9 +59,7 @@ const TableForm: FC = ({ 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); @@ -75,12 +68,12 @@ const TableForm: FC = ({ value, onChange }) => { const handleFieldChange = ( e: React.ChangeEvent, fieldName: keyof TableFormDateType, - key: string + key: string, ) => { const newData = [...(data as TableFormDateType[])]; const target = getRowByKey(key, newData); if (target && target[fieldName]) { - target[fieldName as "key"] = e.target.value; + target[fieldName as 'key'] = e.target.value; setData(newData); } }; @@ -94,7 +87,7 @@ const TableForm: FC = ({ value, onChange }) => { } const target = getRowByKey(key) || ({} as any); if (!target.workId || !target.name || !target.department) { - message.error("请填写完整成员信息。"); + message.error('请填写完整成员信息。'); (e.target as HTMLInputElement).focus(); setLoading(false); return; @@ -108,7 +101,7 @@ const TableForm: FC = ({ value, onChange }) => { }, 500); }; const handleKeyPress = (e: React.KeyboardEvent, key: string) => { - if (e.key === "Enter") { + if (e.key === 'Enter') { saveRow(e, key); } }; @@ -138,17 +131,17 @@ const TableForm: FC = ({ value, onChange }) => { }; const columns = [ { - title: "成员姓名", - dataIndex: "name", - key: "name", - width: "20%", + title: '成员姓名', + dataIndex: 'name', + key: 'name', + width: '20%', render: (text: string, record: TableFormDateType) => { if (record.editable) { return ( handleFieldChange(e, "name", record.key)} + onChange={(e) => handleFieldChange(e, 'name', record.key)} onKeyPress={(e) => handleKeyPress(e, record.key)} placeholder="成员姓名" /> @@ -158,16 +151,16 @@ const TableForm: FC = ({ value, onChange }) => { }, }, { - title: "工号", - dataIndex: "workId", - key: "workId", - width: "20%", + title: '工号', + dataIndex: 'workId', + key: 'workId', + width: '20%', render: (text: string, record: TableFormDateType) => { if (record.editable) { return ( handleFieldChange(e, "workId", record.key)} + onChange={(e) => handleFieldChange(e, 'workId', record.key)} onKeyPress={(e) => handleKeyPress(e, record.key)} placeholder="工号" /> @@ -177,16 +170,16 @@ const TableForm: FC = ({ value, onChange }) => { }, }, { - title: "所属部门", - dataIndex: "department", - key: "department", - width: "40%", + title: '所属部门', + dataIndex: 'department', + key: 'department', + width: '40%', render: (text: string, record: TableFormDateType) => { if (record.editable) { return ( handleFieldChange(e, "department", record.key)} + onChange={(e) => handleFieldChange(e, 'department', record.key)} onKeyPress={(e) => handleKeyPress(e, record.key)} placeholder="所属部门" /> @@ -196,8 +189,8 @@ const TableForm: FC = ({ value, onChange }) => { }, }, { - title: "操作", - key: "action", + title: '操作', + key: 'action', render: (text: string, record: TableFormDateType) => { if (!!record.editable && loading) { return null; @@ -208,10 +201,7 @@ const TableForm: FC = ({ value, onChange }) => {     saveRow(e, record.key)}>添加 - remove(record.key)} - > + remove(record.key)}> 删除 @@ -229,10 +219,7 @@ const TableForm: FC = ({ value, onChange }) => { toggleEditable(e, record.key)}>编辑 - remove(record.key)} - > + remove(record.key)}> 删除 @@ -247,11 +234,11 @@ const TableForm: FC = ({ value, onChange }) => { columns={columns} dataSource={data} pagination={false} - rowClassName={(record) => (record.editable ? styles.editable : "")} + rowClassName={(record) => (record.editable ? styles.editable : '')} />
    @@ -144,7 +139,7 @@ const Articles: FC = () => { layout="inline" form={form} initialValues={{ - owner: ["wjh", "zxx"], + owner: ['wjh', 'zxx'], }} onValuesChange={reload} > @@ -178,7 +173,7 @@ const Articles: FC = () => { mode="multiple" placeholder="选择 owner" style={{ - minWidth: "6rem", + minWidth: '6rem', }} > {owners.map((owner) => ( @@ -200,7 +195,7 @@ const Articles: FC = () => { placeholder="不限" style={{ maxWidth: 200, - width: "100%", + width: '100%', }} > @@ -213,7 +208,7 @@ const Articles: FC = () => { placeholder="不限" style={{ maxWidth: 200, - width: "100%", + width: '100%', }} > @@ -230,7 +225,7 @@ const Articles: FC = () => { }} bordered={false} bodyStyle={{ - padding: "8px 32px 32px 32px", + padding: '8px 32px 32px 32px', }} > diff --git a/src/pages/list/search/articles/style.style.ts b/src/pages/list/search/articles/style.style.ts index 0a4ec44a..5b5c0f3b 100644 --- a/src/pages/list/search/articles/style.style.ts +++ b/src/pages/list/search/articles/style.style.ts @@ -1,20 +1,20 @@ -import { createStyles } from "antd-style"; +import { createStyles } from 'antd-style'; const useStyles = createStyles(({ token }) => { return { - "a.listItemMetaTitle": { + 'a.listItemMetaTitle': { color: token.colorTextHeading, }, listItemExtra: { [`@media screen and (max-width: ${token.screenLG}px)`]: { - width: "0", - height: "1px", + width: '0', + height: '1px', }, }, selfTrigger: { [`@media screen and (max-width: ${token.screenMD}px)`]: { - display: "block", - marginLeft: "0", + display: 'block', + marginLeft: '0', }, }, }; diff --git a/src/pages/list/search/projects/components/AvatarList/index.style.ts b/src/pages/list/search/projects/components/AvatarList/index.style.ts index 6fa97e3c..68d62237 100644 --- a/src/pages/list/search/projects/components/AvatarList/index.style.ts +++ b/src/pages/list/search/projects/components/AvatarList/index.style.ts @@ -1,26 +1,26 @@ -import { createStyles } from "antd-style"; +import { createStyles } from 'antd-style'; const useStyles = createStyles(({ token }) => { return { avatarList: { - display: "inline-block", + display: 'inline-block', }, ul: { - display: "inline-block", - marginLeft: "8px", - fontSize: "0", + display: 'inline-block', + marginLeft: '8px', + fontSize: '0', }, avatarItem: { - display: "inline-block", + display: 'inline-block', width: token.controlHeight, height: token.controlHeight, - marginLeft: "-8px", + marginLeft: '-8px', fontSize: token.fontSize, }, - ".ant-avatar": { - width: "20px", - height: "20px", - lineHeight: "20px", + '.ant-avatar': { + width: '20px', + height: '20px', + lineHeight: '20px', }, avatarItemLarge: { width: token.controlHeightLG, @@ -31,12 +31,12 @@ const useStyles = createStyles(({ token }) => { height: token.controlHeightSM, }, avatarItemMini: { - width: "20px", - height: "20px", + width: '20px', + height: '20px', }, - ".ant-avatar-string": { - fontSize: "12px", - lineHeight: "18px", + '.ant-avatar-string': { + fontSize: '12px', + lineHeight: '18px', }, }; }); diff --git a/src/pages/list/search/projects/components/AvatarList/index.tsx b/src/pages/list/search/projects/components/AvatarList/index.tsx index 64e390df..b0417348 100644 --- a/src/pages/list/search/projects/components/AvatarList/index.tsx +++ b/src/pages/list/search/projects/components/AvatarList/index.tsx @@ -1,8 +1,8 @@ -import { Avatar, Tooltip } from "antd"; -import React from "react"; -import classNames from "classnames"; -import useStyles from "./index.style"; -export declare type SizeType = number | "small" | "default" | "large"; +import { Avatar, Tooltip } from 'antd'; +import React from 'react'; +import classNames from 'classnames'; +import useStyles from './index.style'; +export declare type SizeType = number | 'small' | 'default' | 'large'; export type AvatarItemProps = { tips: React.ReactNode; src: string; @@ -16,22 +16,15 @@ export type AvatarListProps = { maxLength?: number; excessItemsStyle?: React.CSSProperties; style?: React.CSSProperties; - children: - | React.ReactElement - | React.ReactElement[]; + children: React.ReactElement | React.ReactElement[]; }; -const avatarSizeToClassName = (size?: SizeType | "mini") => +const avatarSizeToClassName = (size?: SizeType | 'mini') => classNames(styles.avatarItem, { - [styles.avatarItemLarge]: size === "large", - [styles.avatarItemSmall]: size === "small", - [styles.avatarItemMini]: size === "mini", + [styles.avatarItemLarge]: size === 'large', + [styles.avatarItemSmall]: size === 'small', + [styles.avatarItemMini]: size === 'mini', }); -const Item: React.FC = ({ - src, - size, - tips, - onClick = () => {}, -}) => { +const Item: React.FC = ({ src, size, tips, onClick = () => {} }) => { const cls = avatarSizeToClassName(size); return (
  • @@ -41,7 +34,7 @@ const Item: React.FC = ({ src={src} size={size} style={{ - cursor: "pointer", + cursor: 'pointer', }} /> @@ -57,22 +50,18 @@ const AvatarList: React.FC & { const { styles } = useStyles(); const numOfChildren = React.Children.count(children); const numToShow = maxLength >= numOfChildren ? numOfChildren : maxLength; - const childrenArray = React.Children.toArray( - children - ) as React.ReactElement[]; + const childrenArray = React.Children.toArray(children) as React.ReactElement[]; const childrenWithProps = childrenArray.slice(0, numToShow).map((child) => React.cloneElement(child, { size, - }) + }), ); if (numToShow < numOfChildren) { const cls = avatarSizeToClassName(size); childrenWithProps.push(
  • - {`+${ - numOfChildren - maxLength - }`} -
    • + {`+${numOfChildren - maxLength}`} + , ); } return ( diff --git a/src/pages/list/search/projects/components/StandardFormRow/index.style.ts b/src/pages/list/search/projects/components/StandardFormRow/index.style.ts index 6d8c0abc..704e16c3 100644 --- a/src/pages/list/search/projects/components/StandardFormRow/index.style.ts +++ b/src/pages/list/search/projects/components/StandardFormRow/index.style.ts @@ -1,52 +1,52 @@ -import { createStyles } from "antd-style"; +import { createStyles } from 'antd-style'; const useStyles = createStyles(({ token }) => { return { standardFormRow: { - display: "flex", - width: "100%", - marginBottom: "16px", - paddingBottom: "16px", - borderBottom: "1px dashed @border-color-split", + display: 'flex', + width: '100%', + marginBottom: '16px', + paddingBottom: '16px', + borderBottom: '1px dashed @border-color-split', }, - ".ant-form-item, .ant-legacy-form-item": { - "&:last-child": { display: "block", marginRight: "0" }, + '.ant-form-item, .ant-legacy-form-item': { + '&:last-child': { display: 'block', marginRight: '0' }, }, - ".ant-form-item-label, .ant-legacy-form-item-label": { - float: "left", + '.ant-form-item-label, .ant-legacy-form-item-label': { + float: 'left', }, label: { - flex: "0 0 auto", - marginRight: "24px", + flex: '0 0 auto', + marginRight: '24px', color: token.colorTextHeading, fontSize: token.fontSize, - textAlign: "right", - "& > span": { - display: "inline-block", - height: "32px", - lineHeight: "32px", - "&::after": { + textAlign: 'right', + '& > span': { + display: 'inline-block', + height: '32px', + lineHeight: '32px', + '&::after': { content: "'：'", }, }, }, - ".ant-form-item-label, .ant-legacy-form-item-label, .ant-form-item-control, .ant-legacy-form-item-control": + '.ant-form-item-label, .ant-legacy-form-item-label, .ant-form-item-control, .ant-legacy-form-item-control': { - padding: "0", - lineHeight: "32px", + padding: '0', + lineHeight: '32px', }, content: { - flex: "1 1 0", + flex: '1 1 0', }, standardFormRowLast: { - marginBottom: "0", - paddingBottom: "0", - border: "none", + marginBottom: '0', + paddingBottom: '0', + border: 'none', }, standardFormRowBlock: {}, - ".ant-form-item, .ant-legacy-form-item, div.ant-form-item-control-wrapper, div.ant-legacy-form-item-control-wrapper": + '.ant-form-item, .ant-legacy-form-item, div.ant-form-item-control-wrapper, div.ant-legacy-form-item-control-wrapper': { - display: "block", + display: 'block', }, standardFormRowGrid: {}, }; diff --git a/src/pages/list/search/projects/components/StandardFormRow/index.tsx b/src/pages/list/search/projects/components/StandardFormRow/index.tsx index 04b8e38a..4b55b1c8 100644 --- a/src/pages/list/search/projects/components/StandardFormRow/index.tsx +++ b/src/pages/list/search/projects/components/StandardFormRow/index.tsx @@ -1,6 +1,6 @@ -import React from "react"; -import classNames from "classnames"; -import useStyles from "./index.style"; +import React from 'react'; +import classNames from 'classnames'; +import useStyles from './index.style'; type StandardFormRowProps = { title?: string; last?: boolean; diff --git a/src/pages/list/search/projects/components/TagSelect/index.style.ts b/src/pages/list/search/projects/components/TagSelect/index.style.ts index 09faba15..e289aed0 100644 --- a/src/pages/list/search/projects/components/TagSelect/index.style.ts +++ b/src/pages/list/search/projects/components/TagSelect/index.style.ts @@ -1,35 +1,35 @@ -import { createStyles } from "antd-style"; +import { createStyles } from 'antd-style'; const useStyles = createStyles(({ token }) => { return { tagSelect: { - position: "relative", - maxHeight: "32px", - marginLeft: "-8px", - overflow: "hidden", - lineHeight: "32px", - transition: "all 0.3s", - userSelect: "none", + position: 'relative', + maxHeight: '32px', + marginLeft: '-8px', + overflow: 'hidden', + lineHeight: '32px', + transition: 'all 0.3s', + userSelect: 'none', }, - ".ant-tag": { - marginRight: "24px", - padding: "0 8px", + '.ant-tag': { + marginRight: '24px', + padding: '0 8px', fontSize: token.fontSize, }, expanded: { - maxHeight: "200px", - transition: "all 0.3s", + maxHeight: '200px', + transition: 'all 0.3s', }, trigger: { - position: "absolute", - top: "0", - right: "0", + position: 'absolute', + top: '0', + right: '0', }, - "span.anticon": { - fontSize: "12px", + 'span.anticon': { + fontSize: '12px', }, hasExpandTag: { - paddingRight: "50px", + paddingRight: '50px', }, }; }); diff --git a/src/pages/list/search/projects/components/TagSelect/index.tsx b/src/pages/list/search/projects/components/TagSelect/index.tsx index 897f7955..32ca2791 100644 --- a/src/pages/list/search/projects/components/TagSelect/index.tsx +++ b/src/pages/list/search/projects/components/TagSelect/index.tsx @@ -1,10 +1,10 @@ -import { DownOutlined, UpOutlined } from "@ant-design/icons"; -import { useBoolean, useControllableValue } from "ahooks"; -import { Tag } from "antd"; -import classNames from "classnames"; -import type { FC } from "react"; -import React from "react"; -import useStyles from "./index.style"; +import { DownOutlined, UpOutlined } from '@ant-design/icons'; +import { useBoolean, useControllableValue } from 'ahooks'; +import { Tag } from 'antd'; +import classNames from 'classnames'; +import type { FC } from 'react'; +import React from 'react'; +import useStyles from './index.style'; const { CheckableTag } = Tag; export interface TagSelectOptionProps { value: string | number; @@ -25,10 +25,7 @@ const TagSelectOption: React.FC & { ); TagSelectOption.isTagSelectOption = true; -type TagSelectOptionElement = React.ReactElement< - TagSelectOptionProps, - typeof TagSelectOption ->; +type TagSelectOptionElement = React.ReactElement; export interface TagSelectProps { onChange?: (value: (string | number)[]) => void; expandable?: boolean; @@ -49,25 +46,15 @@ const TagSelect: FC & { 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, { toggle }] = useBoolean(); const [value, setValue] = useControllableValue<(string | number)[]>(props); const isTagSelectOption = (node: TagSelectOptionElement) => node && 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); @@ -91,11 +78,7 @@ const TagSelect: FC & { 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, @@ -103,11 +86,7 @@ const TagSelect: FC & { return (
    {hideCheckAll ? null : ( - + {selectAllText} )} diff --git a/src/pages/list/search/projects/index.tsx b/src/pages/list/search/projects/index.tsx index 798357a8..1abf5638 100644 --- a/src/pages/list/search/projects/index.tsx +++ b/src/pages/list/search/projects/index.tsx @@ -1,14 +1,14 @@ -import { Card, Col, Form, List, Row, Select, Typography } from "antd"; -import type { FC } from "react"; -import { useRequest } from "@umijs/max"; -import AvatarList from "./components/AvatarList"; -import StandardFormRow from "./components/StandardFormRow"; -import TagSelect from "./components/TagSelect"; -import type { ListItemDataType } from "./data.d"; -import { queryFakeList } from "./service"; -import useStyles from "./style.style"; -import dayjs from "dayjs"; -import relativeTime from "dayjs/plugin/relativeTime"; +import { Card, Col, Form, List, Row, Select, Typography } from 'antd'; +import type { FC } from 'react'; +import { useRequest } from '@umijs/max'; +import AvatarList from './components/AvatarList'; +import StandardFormRow from './components/StandardFormRow'; +import TagSelect from './components/TagSelect'; +import type { ListItemDataType } from './data.d'; +import { queryFakeList } from './service'; +import useStyles from './style.style'; +import dayjs from 'dayjs'; +import relativeTime from 'dayjs/plugin/relativeTime'; dayjs.extend(relativeTime); const { Option } = Select; const FormItem = Form.Item; @@ -17,7 +17,7 @@ const getKey = (id: string, index: number) => `${id}-${index}`; const Projects: FC = () => { const { styles } = useStyles(); const { data, loading, run } = useRequest((values: any) => { - console.log("form data", values); + console.log('form data', values); return queryFakeList({ count: 8, }); @@ -39,11 +39,7 @@ const Projects: FC = () => { dataSource={list} renderItem={(item) => ( - } - > + }> {item.title}} description={ @@ -129,7 +125,7 @@ const Projects: FC = () => { placeholder="不限" style={{ maxWidth: 200, - width: "100%", + width: '100%', }} > @@ -142,7 +138,7 @@ const Projects: FC = () => { placeholder="不限" style={{ maxWidth: 200, - width: "100%", + width: '100%', }} > diff --git a/src/pages/list/search/projects/style.style.ts b/src/pages/list/search/projects/style.style.ts index 2b5415c0..32572b7a 100644 --- a/src/pages/list/search/projects/style.style.ts +++ b/src/pages/list/search/projects/style.style.ts @@ -1,47 +1,47 @@ -import { createStyles } from "antd-style"; +import { createStyles } from 'antd-style'; const useStyles = createStyles(({ token }) => { return { coverCardList: {}, card: { - "&:hover": {}, + '&:hover': {}, }, - ".ant-card-meta-title": { - marginBottom: "4px", - "& > a": { - display: "inline-block", - maxWidth: "100%", + '.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", + '.ant-card-meta-description': { + height: '44px', + overflow: 'hidden', + lineHeight: '22px', }, - ".ant-card-meta-title > a": { + '.ant-card-meta-title > a': { color: token.colorPrimary, }, cardItemContent: { - display: "flex", - height: "20px", - marginTop: "16px", - marginBottom: "-4px", - lineHeight: "20px", - "& > span": { - flex: "1", + display: 'flex', + height: '20px', + marginTop: '16px', + marginBottom: '-4px', + lineHeight: '20px', + '& > span': { + flex: '1', color: token.colorTextSecondary, - fontSize: "12px", + fontSize: '12px', }, }, avatarList: { - flex: "0 1 auto", + flex: '0 1 auto', }, cardList: { - marginTop: "24px", + marginTop: '24px', }, - ".ant-list .ant-list-item-content-single": { - maxWidth: "100%", + '.ant-list .ant-list-item-content-single': { + maxWidth: '100%', }, }; }); diff --git a/src/pages/list/search/projects/utils/utils.style.ts b/src/pages/list/search/projects/utils/utils.style.ts index bc4d077f..0ad5e64a 100644 --- a/src/pages/list/search/projects/utils/utils.style.ts +++ b/src/pages/list/search/projects/utils/utils.style.ts @@ -1,4 +1,4 @@ -import { createStyles } from "antd-style"; +import { createStyles } from 'antd-style'; const useStyles = createStyles(() => { return {}; diff --git a/src/pages/profile/advanced/style.style.ts b/src/pages/profile/advanced/style.style.ts index 923bf4ff..e8966e3d 100644 --- a/src/pages/profile/advanced/style.style.ts +++ b/src/pages/profile/advanced/style.style.ts @@ -1,38 +1,38 @@ -import { createStyles } from "antd-style"; +import { createStyles } from 'antd-style'; const useStyles = createStyles(({ token }) => { return { main: {}, - ".ant-descriptions-row > td": { - paddingBottom: "8px", + '.ant-descriptions-row > td': { + paddingBottom: '8px', }, - ".ant-page-header-heading-extra": { - flexDirection: "column", + '.ant-page-header-heading-extra': { + flexDirection: 'column', }, headerList: { - marginBottom: "4px", + marginBottom: '4px', }, stepDescription: { - [`@media screen and (max-width: ${token.screenSM}px)`]: { left: "8px" }, + [`@media screen and (max-width: ${token.screenSM}px)`]: { left: '8px' }, }, - "> div": { - marginTop: "8px", - marginBottom: "4px", + '> div': { + marginTop: '8px', + marginBottom: '4px', }, pageHeader: { [`@media screen and (max-width: ${token.screenSM}px)`]: {}, }, - ".ant-page-header-heading-extra > * + *": { - marginLeft: "8px", + '.ant-page-header-heading-extra > * + *': { + marginLeft: '8px', }, moreInfo: { - display: "flex", - justifyContent: "space-between", - width: "200px", + display: 'flex', + justifyContent: 'space-between', + width: '200px', }, - ".ant-pro-page-header-wrap-row": { + '.ant-pro-page-header-wrap-row': { [`@media screen and (max-width: ${token.screenSM}px)`]: { - flexDirection: "column", + flexDirection: 'column', }, }, }; diff --git a/src/pages/profile/basic/index.tsx b/src/pages/profile/basic/index.tsx index 5b34327d..2a9eb78b 100644 --- a/src/pages/profile/basic/index.tsx +++ b/src/pages/profile/basic/index.tsx @@ -1,44 +1,44 @@ -import { PageContainer } from "@ant-design/pro-components"; -import type { ProColumns } from "@ant-design/pro-components"; -import { ProTable } from "@ant-design/pro-components"; -import { Badge, Card, Descriptions, Divider } from "antd"; -import type { FC } from "react"; -import React from "react"; -import { useRequest } from "@umijs/max"; -import type { BasicGood, BasicProgress } from "./data.d"; -import { queryBasicProfile } from "./service"; -import useStyles from "./style.style"; +import { PageContainer } from '@ant-design/pro-components'; +import type { ProColumns } from '@ant-design/pro-components'; +import { ProTable } from '@ant-design/pro-components'; +import { Badge, Card, Descriptions, Divider } from 'antd'; +import type { FC } from 'react'; +import React from 'react'; +import { useRequest } from '@umijs/max'; +import type { BasicGood, BasicProgress } from './data.d'; +import { queryBasicProfile } from './service'; +import useStyles from './style.style'; const progressColumns: ProColumns[] = [ { - title: "时间", - dataIndex: "time", - key: "time", + title: '时间', + dataIndex: 'time', + key: 'time', }, { - title: "当前进度", - dataIndex: "rate", - key: "rate", + title: '当前进度', + dataIndex: 'rate', + key: 'rate', }, { - title: "状态", - dataIndex: "status", - key: "status", + title: '状态', + dataIndex: 'status', + key: 'status', render: (text: React.ReactNode) => { - if (text === "success") { + if (text === 'success') { return ; } return ; }, }, { - title: "操作员ID", - dataIndex: "operator", - key: "operator", + title: '操作员ID', + dataIndex: 'operator', + key: 'operator', }, { - title: "耗时", - dataIndex: "cost", - key: "cost", + title: '耗时', + dataIndex: 'cost', + key: 'cost', }, ]; const Basic: FC = () => { @@ -59,7 +59,7 @@ const Basic: FC = () => { amount += Number(item.amount); }); goodsData = basicGoods.concat({ - id: "总计", + id: '总计', num, amount, }); @@ -81,9 +81,9 @@ const Basic: FC = () => { }; const goodsColumns: ProColumns[] = [ { - title: "商品编号", - dataIndex: "id", - key: "id", + title: '商品编号', + dataIndex: 'id', + key: 'id', render: (text: React.ReactNode, _: any, index: number) => { if (index < basicGoods.length) { return {text}; @@ -105,29 +105,29 @@ const Basic: FC = () => { }, }, { - title: "商品名称", - dataIndex: "name", - key: "name", + title: '商品名称', + dataIndex: 'name', + key: 'name', render: renderContent, }, { - title: "商品条码", - dataIndex: "barcode", - key: "barcode", + title: '商品条码', + dataIndex: 'barcode', + key: 'barcode', render: renderContent, }, { - title: "单价", - dataIndex: "price", - key: "price", - align: "right" as "left" | "right" | "center", + title: '单价', + dataIndex: 'price', + key: 'price', + align: 'right' as 'left' | 'right' | 'center', render: renderContent, }, { - title: "数量（件）", - dataIndex: "num", - key: "num", - align: "right" as "left" | "right" | "center", + title: '数量（件）', + dataIndex: 'num', + key: 'num', + align: 'right' as 'left' | 'right' | 'center', render: (text: React.ReactNode, _: any, index: number) => { if (index < basicGoods.length) { return text; @@ -144,10 +144,10 @@ const Basic: FC = () => { }, }, { - title: "金额", - dataIndex: "amount", - key: "amount", - align: "right" as "left" | "right" | "center", + title: '金额', + dataIndex: 'amount', + key: 'amount', + align: 'right' as 'left' | 'right' | 'center', render: (text: React.ReactNode, _: any, index: number) => { if (index < basicGoods.length) { return text; @@ -192,9 +192,7 @@ const Basic: FC = () => { 付小小 18100000000 菜鸟仓储 - - 浙江省杭州市西湖区万塘路18号 - + 浙江省杭州市西湖区万塘路18号 无 { return { title: { - marginBottom: "16px", + marginBottom: '16px', color: token.colorTextHeading, - fontWeight: "500", - fontSize: "16px", + fontWeight: '500', + fontSize: '16px', }, }; }); diff --git a/src/pages/result/fail/index.style.ts b/src/pages/result/fail/index.style.ts index 25852186..7cb682d9 100644 --- a/src/pages/result/fail/index.style.ts +++ b/src/pages/result/fail/index.style.ts @@ -1,4 +1,4 @@ -import { createStyles } from "antd-style"; +import { createStyles } from 'antd-style'; const useStyles = createStyles(({ token }) => { return { @@ -6,10 +6,10 @@ const useStyles = createStyles(({ token }) => { color: token.colorBgTextActive, }, title: { - marginBottom: "16px", + marginBottom: '16px', color: token.colorTextHeading, - fontWeight: "500", - fontSize: "16px", + fontWeight: '500', + fontSize: '16px', }, }; }); diff --git a/src/pages/result/success/index.style.ts b/src/pages/result/success/index.style.ts index 8c0523e3..169a71f1 100644 --- a/src/pages/result/success/index.style.ts +++ b/src/pages/result/success/index.style.ts @@ -1,18 +1,18 @@ -import { createStyles } from "antd-style"; +import { createStyles } from 'antd-style'; const useStyles = createStyles(({ token }) => { return { title: { - position: "relative", + position: 'relative', color: token.colorText, - fontSize: "12px", - textAlign: "center", + fontSize: '12px', + textAlign: 'center', }, - "head-title": { - marginBottom: "20px", + 'head-title': { + marginBottom: '20px', color: token.colorTextHeading, - fontWeight: "500px", - fontSize: "16px", + fontWeight: '500px', + fontSize: '16px', }, }; }); diff --git a/src/pages/user/register-result/index.tsx b/src/pages/user/register-result/index.tsx index 19e7b180..2564a983 100644 --- a/src/pages/user/register-result/index.tsx +++ b/src/pages/user/register-result/index.tsx @@ -1,7 +1,7 @@ -import { Button, Result } from "antd"; -import { Link, useSearchParams } from "@umijs/max"; -import React from "react"; -import useStyles from "./style.style"; +import { Button, Result } from 'antd'; +import { Link, useSearchParams } from '@umijs/max'; +import React from 'react'; +import useStyles from './style.style'; const actions = (
    @@ -17,7 +17,7 @@ const actions = ( const RegisterResult: React.FC> = () => { const { styles } = useStyles(); const [params] = useSearchParams(); - const email = params?.get("account") || "AntDesign@example.com"; + const email = params?.get('account') || 'AntDesign@example.com'; return ( { const { styles } = useStyles(); const [count, setCount]: [number, any] = useState(0); const [visible, setVisible]: [boolean, any] = useState(false); - const [prefix, setPrefix]: [string, any] = useState("86"); + const [prefix, setPrefix]: [string, any] = useState('86'); const [popover, setPopover]: [boolean, any] = useState(false); const confirmDirty = false; let interval: number | undefined; @@ -58,7 +48,7 @@ const Register: FC = () => { () => () => { clearInterval(interval); }, - [interval] + [interval], ); const onGetCaptcha = () => { let counts = 59; @@ -72,24 +62,24 @@ const Register: FC = () => { }, 1000); }; const getPasswordStatus = () => { - const value = form.getFieldValue("password"); + const value = form.getFieldValue('password'); if (value && value.length > 9) { - return "ok"; + return 'ok'; } if (value && value.length > 5) { - return "pass"; + return 'pass'; } - return "poor"; + return 'poor'; }; const { loading: submitting, run: register } = useRequest<{ data: StateType; }>(fakeRegister, { manual: true, onSuccess: (data, params) => { - if (data.status === "ok") { - message.success("注册成功！"); + if (data.status === 'ok') { + message.success('注册成功！'); history.push({ - pathname: "/user/register-result?account=" + params.email, + pathname: '/user/register-result?account=' + params.email, }); } }, @@ -99,8 +89,8 @@ const Register: FC = () => { }; const checkConfirm = (_: any, value: string) => { const promise = Promise; - if (value && value !== form.getFieldValue("password")) { - return promise.reject("两次输入的密码不匹配!"); + if (value && value !== form.getFieldValue('password')) { + return promise.reject('两次输入的密码不匹配!'); } return promise.resolve(); }; @@ -109,7 +99,7 @@ const Register: FC = () => { // 没有值的情况 if (!value) { setVisible(!!value); - return promise.reject("请输入密码!"); + return promise.reject('请输入密码!'); } // 有值的情况 if (!visible) { @@ -117,10 +107,10 @@ const Register: FC = () => { } setPopover(!popover); if (value.length < 6) { - return promise.reject(""); + return promise.reject(''); } if (value && confirmDirty) { - form.validateFields(["confirm"]); + form.validateFields(['confirm']); } return promise.resolve(); }; @@ -128,7 +118,7 @@ const Register: FC = () => { setPrefix(value); }; const renderPasswordProgress = () => { - const value = form.getFieldValue("password"); + const value = form.getFieldValue('password'); const passwordStatus = getPasswordStatus(); return value && value.length ? (
    @@ -151,11 +141,11 @@ const Register: FC = () => { rules={[ { required: true, - message: "请输入邮箱地址!", + message: '请输入邮箱地址!', }, { - type: "email", - message: "邮箱地址格式错误!", + type: 'email', + message: '邮箱地址格式错误!', }, ]} > @@ -172,7 +162,7 @@ const Register: FC = () => { visible && (
    {passwordStatusMap[getPasswordStatus()]} @@ -196,8 +186,8 @@ const Register: FC = () => { 0 && + form.getFieldValue('password') && + form.getFieldValue('password').length > 0 && styles.password } rules={[ @@ -206,11 +196,7 @@ const Register: FC = () => { }, ]} > - + { rules={[ { required: true, - message: "确认密码", + message: '确认密码', }, { validator: checkConfirm, @@ -233,7 +219,7 @@ const Register: FC = () => { value={prefix} onChange={changePrefix} style={{ - width: "20%", + width: '20%', }} > @@ -241,17 +227,17 @@ const Register: FC = () => { @@ -265,7 +251,7 @@ const Register: FC = () => { rules={[ { required: true, - message: "请输入验证码!", + message: '请输入验证码!', }, ]} > @@ -279,7 +265,7 @@ const Register: FC = () => { className={styles.getCaptcha} onClick={onGetCaptcha} > - {count ? `${count} s` : "获取验证码"} + {count ? `${count} s` : '获取验证码'}