+
+
+ {intl.formatMessage({
+ id: 'menu.login',
+ defaultMessage: '登录页',
+ })}
+ - {Settings.title}
+
+
+
+
}
title="Ant Design"
subTitle={intl.formatMessage({ id: 'pages.layouts.userLayout.title' })}
@@ -96,30 +178,33 @@ const Login: React.FC = () => {
id="pages.login.loginWith"
defaultMessage="其他登录方式"
/>,
-
,
-
,
-
,
+
,
]}
onFinish={async (values) => {
await handleSubmit(values as API.LoginParams);
}}
>
-
-
-
-
+
{status === 'error' && loginType === 'account' && (
{
name="username"
fieldProps={{
size: 'large',
- prefix: ,
+ prefix: ,
}}
placeholder={intl.formatMessage({
id: 'pages.login.username.placeholder',
@@ -157,7 +242,7 @@ const Login: React.FC = () => {
name="password"
fieldProps={{
size: 'large',
- prefix: ,
+ prefix: ,
}}
placeholder={intl.formatMessage({
id: 'pages.login.password.placeholder',
@@ -184,7 +269,7 @@ const Login: React.FC = () => {
,
+ prefix: ,
}}
name="mobile"
placeholder={intl.formatMessage({
@@ -215,7 +300,7 @@ const Login: React.FC = () => {
,
+ prefix: ,
}}
captchaProps={{
size: 'large',
@@ -252,7 +337,7 @@ const Login: React.FC = () => {
const result = await getFakeCaptcha({
phone,
});
- if (result === false) {
+ if (!result) {
return;
}
message.success('获取验证码成功!验证码为:1234');
diff --git a/src/pages/User/Login/login.test.tsx b/src/pages/User/Login/login.test.tsx
new file mode 100644
index 00000000..18593f83
--- /dev/null
+++ b/src/pages/User/Login/login.test.tsx
@@ -0,0 +1,96 @@
+import { render, fireEvent, act } from '@testing-library/react';
+import React from 'react';
+import { TestBrowser } from '@@/testBrowser';
+
+// @ts-ignore
+import { startMock } from '@@/requestRecordMock';
+
+const waitTime = (time: number = 100) => {
+ return new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(true);
+ }, time);
+ });
+};
+
+let server: {
+ close: () => void;
+};
+
+describe('Login Page', () => {
+ beforeAll(async () => {
+ server = await startMock({
+ port: 8000,
+ scene: 'login',
+ });
+ });
+
+ afterAll(() => {
+ server?.close();
+ });
+
+ it('should show login form', async () => {
+ const historyRef = React.createRef();
+ const rootContainer = render(
+ ,
+ );
+
+ await rootContainer.findAllByText('Ant Design');
+
+ act(() => {
+ historyRef.current?.push('/user/login');
+ });
+
+ expect(rootContainer.baseElement?.querySelector('.ant-pro-form-login-desc')?.textContent).toBe(
+ 'Ant Design is the most influential web design specification in Xihu district',
+ );
+
+ expect(rootContainer.asFragment()).toMatchSnapshot();
+
+ rootContainer.unmount();
+ });
+
+ it('should login success', async () => {
+ const historyRef = React.createRef();
+ const rootContainer = render(
+ ,
+ );
+
+ await rootContainer.findAllByText('Ant Design');
+
+ const userNameInput = await rootContainer.findByPlaceholderText('Username: admin or user');
+
+ act(() => {
+ fireEvent.change(userNameInput, { target: { value: 'admin' } });
+ });
+
+ const passwordInput = await rootContainer.findByPlaceholderText('Password: ant.design');
+
+ act(() => {
+ fireEvent.change(passwordInput, { target: { value: 'ant.design' } });
+ });
+
+ await (await rootContainer.findByText('Login')).click();
+
+ // 等待接口返回结果
+ await waitTime(5000);
+
+ await rootContainer.findAllByText('Ant Design Pro');
+
+ expect(rootContainer.asFragment()).toMatchSnapshot();
+
+ await waitTime(2000);
+
+ rootContainer.unmount();
+ });
+});
diff --git a/src/pages/User/register-result/style.style.ts b/src/pages/User/register-result/style.style.ts
new file mode 100644
index 00000000..7761aa15
--- /dev/null
+++ b/src/pages/User/register-result/style.style.ts
@@ -0,0 +1,27 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ registerResult: {
+ width: '800px',
+ minHeight: '400px',
+ margin: 'auto',
+ padding: '80px',
+ background: 'none',
+ ':global': {
+ anticon: {
+ fontSize: '64px',
+ },
+ },
+ title: { marginTop: '32px', fontSize: '20px', lineHeight: '28px' },
+ actions: {
+ marginTop: '40px',
+ 'a + a': {
+ marginLeft: '8px',
+ },
+ },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/User/register/style.style.ts b/src/pages/User/register/style.style.ts
new file mode 100644
index 00000000..8000a26d
--- /dev/null
+++ b/src/pages/User/register/style.style.ts
@@ -0,0 +1,41 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ main: {
+ width: '368px',
+ margin: '0 auto',
+ h3: { marginBottom: '20px', fontSize: '16px' },
+ password: {
+ marginBottom: '24px',
+ ':global': {
+ 'ant-form-item-explain': { display: 'none' },
+ },
+ },
+ getCaptcha: { display: 'block', width: '100%' },
+ submit: { width: '50%' },
+ login: { float: 'right', lineHeight: token.btnHeightLg },
+ },
+ 'success,.warning,.error': {
+ transition: 'color 0.3s',
+ },
+ success: {
+ color: token.successColor,
+ },
+ warning: {
+ color: token.warningColor,
+ },
+ error: {
+ color: token.errorColor,
+ },
+ 'progress-pass > .progress': {
+ ':global': {
+ 'ant-progress-bg': {
+ backgroundColor: token.warningColor,
+ },
+ },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/Welcome.less b/src/pages/Welcome.less
deleted file mode 100644
index 224a7932..00000000
--- a/src/pages/Welcome.less
+++ /dev/null
@@ -1,8 +0,0 @@
-@import (reference) '~antd/es/style/themes/index';
-
-.pre {
- margin: 12px 0;
- padding: 12px 20px;
- background: @input-bg;
- box-shadow: @card-shadow;
-}
diff --git a/src/pages/Welcome.tsx b/src/pages/Welcome.tsx
index 9041b181..d0c49f7a 100644
--- a/src/pages/Welcome.tsx
+++ b/src/pages/Welcome.tsx
@@ -1,63 +1,161 @@
+import { PageContainer } from '@ant-design/pro-components';
+import { useModel } from '@umijs/max';
+import { Card, theme } from 'antd';
import React from 'react';
-import { PageContainer } from '@ant-design/pro-layout';
-import { Card, Alert, Typography } from 'antd';
-import { useIntl, FormattedMessage } from 'umi';
-import styles from './Welcome.less';
-const CodePreview: React.FC = ({ children }) => (
-
-
- {children}
-
-
-);
+/**
+ * 每个单独的卡片,为了复用样式抽成了组件
+ * @param param0
+ * @returns
+ */
+const InfoCard: React.FC<{
+ title: string;
+ index: number;
+ desc: string;
+ href: string;
+}> = ({ title, href, index, desc }) => {
+ const { useToken } = theme;
-const Welcome: React.FC = () => {
- const intl = useIntl();
+ const { token } = useToken();
return (
-
-
-
+
+
-
- {' '}
-
-
-
-
-
yarn add @ant-design/pro-table
-
+ {index}
+
+
+
+ {desc}
+
+
+ 了解更多 {'>'}
+
+
+ );
+};
+
+const Welcome: React.FC = () => {
+ const { token } = theme.useToken();
+ const { initialState } = useModel('@@initialState');
+ return (
+
+
+
+
+ 欢迎使用 Ant Design Pro
+
+
+ Ant Design Pro 是一个整合了 umi,Ant Design 和 ProComponents
+ 的脚手架方案。致力于在设计规范和基础组件的基础上,继续向上构建,提炼出典型模板/业务组件/配套设计资源,进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。
+
+
-
-
-
- yarn add @ant-design/pro-layout
+
+
+
+
+
);
diff --git a/src/pages/account/center/Center.less b/src/pages/account/center/Center.less
index f547b406..e1a90ee0 100644
--- a/src/pages/account/center/Center.less
+++ b/src/pages/account/center/Center.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.avatarHolder {
margin-bottom: 24px;
diff --git a/src/pages/account/center/Center.style.ts b/src/pages/account/center/Center.style.ts
new file mode 100644
index 00000000..7f4751b4
--- /dev/null
+++ b/src/pages/account/center/Center.style.ts
@@ -0,0 +1,76 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ avatarHolder: {
+ marginBottom: '24px',
+ textAlign: 'center',
+ '& > img': { width: '104px', height: '104px', marginBottom: '20px' },
+ name: {
+ marginBottom: '4px',
+ color: token.headingColor,
+ fontWeight: '500',
+ fontSize: '20px',
+ lineHeight: '28px',
+ },
+ },
+ detail: {
+ p: {
+ position: 'relative',
+ marginBottom: '8px',
+ paddingLeft: '26px',
+ '&:last-child': {
+ marginBottom: '0',
+ },
+ },
+ i: {
+ position: 'absolute',
+ top: '4px',
+ left: '0',
+ width: '14px',
+ height: '14px',
+ },
+ },
+ 'tagsTitle,.teamTitle': {
+ marginBottom: '12px',
+ color: token.headingColor,
+ fontWeight: '500',
+ },
+ tags: {
+ ':global': {
+ 'ant-tag': {
+ marginBottom: '8px',
+ },
+ },
+ },
+ team: {
+ ':global': {
+ 'ant-avatar': {
+ marginRight: '12px',
+ },
+ },
+ a: {
+ display: 'block',
+ marginBottom: '24px',
+ overflow: 'hidden',
+ color: token.textColor,
+ whiteSpace: 'nowrap',
+ textOverflow: 'ellipsis',
+ wordBreak: 'break-all',
+ transition: 'color 0.3s',
+ '&:hover': {
+ color: token.colorPrimary,
+ },
+ },
+ },
+ tabsCard: {
+ ':global': {
+ 'ant-card-head': {
+ padding: '0 16px',
+ },
+ },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/account/center/components/Applications/index.less b/src/pages/account/center/components/Applications/index.less
index c550b333..efe5d19f 100644
--- a/src/pages/account/center/components/Applications/index.less
+++ b/src/pages/account/center/components/Applications/index.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.filterCardList {
margin-bottom: -24px;
diff --git a/src/pages/account/center/components/Applications/index.style.ts b/src/pages/account/center/components/Applications/index.style.ts
new file mode 100644
index 00000000..81baaa0d
--- /dev/null
+++ b/src/pages/account/center/components/Applications/index.style.ts
@@ -0,0 +1,50 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ filterCardList: {
+ marginBottom: '-24px',
+ ':global': {
+ 'ant-card-meta-content': {
+ marginTop: '0',
+ },
+ '// disabled white space ant-card-meta-avatar': {
+ fontSize: '0',
+ },
+ 'ant-list .ant-list-item-content-single': {
+ maxWidth: '100%',
+ },
+ },
+ cardInfo: {
+ marginTop: '16px',
+ marginLeft: '40px',
+ zoom: '1',
+ '&::before, &::after': {
+ display: 'table',
+ content: "' '",
+ },
+ '&::after': {
+ clear: 'both',
+ height: '0',
+ fontSize: '0',
+ visibility: 'hidden',
+ },
+ '& > div': {
+ position: 'relative',
+ float: 'left',
+ width: '50%',
+ textAlign: 'left',
+ p: { margin: '0', fontSize: '24px', lineHeight: '32px' },
+ 'p:first-child': {
+ marginBottom: '4px',
+ color: token.textColorSecondary,
+ fontSize: '12px',
+ lineHeight: '20px',
+ },
+ },
+ },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/account/center/components/Applications/index.tsx b/src/pages/account/center/components/Applications/index.tsx
index c7bd3a9f..f3518e17 100644
--- a/src/pages/account/center/components/Applications/index.tsx
+++ b/src/pages/account/center/components/Applications/index.tsx
@@ -4,13 +4,13 @@ import {
EllipsisOutlined,
ShareAltOutlined,
} from '@ant-design/icons';
-import { useRequest } from 'umi';
+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 stylesApplications from './index.less';
+import stylesApplications from './index.style.ts';
export function formatWan(val: number) {
const v = val * 1;
diff --git a/src/pages/account/center/components/ArticleListContent/index.less b/src/pages/account/center/components/ArticleListContent/index.less
index eca0811c..e8220265 100644
--- a/src/pages/account/center/components/ArticleListContent/index.less
+++ b/src/pages/account/center/components/ArticleListContent/index.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.listContent {
.description {
diff --git a/src/pages/account/center/components/ArticleListContent/index.style.ts b/src/pages/account/center/components/ArticleListContent/index.style.ts
new file mode 100644
index 00000000..c4d29458
--- /dev/null
+++ b/src/pages/account/center/components/ArticleListContent/index.style.ts
@@ -0,0 +1,28 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ listContent: {
+ description: { maxWidth: '720px', lineHeight: '22px' },
+ extra: {
+ marginTop: '16px',
+ color: token.textColorSecondary,
+ lineHeight: '22px',
+ '& > em': {
+ marginLeft: '16px',
+ color: token.disabledColor,
+ fontStyle: 'normal',
+ },
+ },
+ },
+ [`@mediascreen and (max-width: token.screen-xs)`]: {
+ listContent: {
+ extra: {
+ '& > em': { display: 'block', marginTop: '8px', marginLeft: '0' },
+ },
+ },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/account/center/components/ArticleListContent/index.tsx b/src/pages/account/center/components/ArticleListContent/index.tsx
index 183c38e8..15164e4e 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 moment from 'moment';
-import styles from './index.less';
+import styles from './index.style.ts';
export type ApplicationsProps = {
data: {
diff --git a/src/pages/account/center/components/Articles/index.less b/src/pages/account/center/components/Articles/index.less
index e78c412c..e87ca84c 100644
--- a/src/pages/account/center/components/Articles/index.less
+++ b/src/pages/account/center/components/Articles/index.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.articleList {
:global {
diff --git a/src/pages/account/center/components/Articles/index.style.ts b/src/pages/account/center/components/Articles/index.style.ts
new file mode 100644
index 00000000..9343b414
--- /dev/null
+++ b/src/pages/account/center/components/Articles/index.style.ts
@@ -0,0 +1,18 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ articleList: {
+ ':global': {
+ 'ant-list-item:first-child': {
+ paddingTop: '0',
+ },
+ },
+ },
+ alistItemMetaTitle: {
+ color: token.headingColor,
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/account/center/components/Articles/index.tsx b/src/pages/account/center/components/Articles/index.tsx
index 94adefee..06bee34f 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 'umi';
+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 styles from './index.less';
+import styles from './index.style.ts';
const Articles: React.FC = () => {
const IconText: React.FC<{
diff --git a/src/pages/account/center/components/AvatarList/index.less b/src/pages/account/center/components/AvatarList/index.less
index a7a3d441..52e65a72 100644
--- a/src/pages/account/center/components/AvatarList/index.less
+++ b/src/pages/account/center/components/AvatarList/index.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.avatarList {
display: inline-block;
diff --git a/src/pages/account/center/components/AvatarList/index.style.ts b/src/pages/account/center/components/AvatarList/index.style.ts
new file mode 100644
index 00000000..6df8dc71
--- /dev/null
+++ b/src/pages/account/center/components/AvatarList/index.style.ts
@@ -0,0 +1,44 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ avatarList: {
+ display: 'inline-block',
+ ul: { display: 'inline-block', marginLeft: '8px', fontSize: '0' },
+ },
+ avatarItem: {
+ display: 'inline-block',
+ width: token.avatarSizeBase,
+ height: token.avatarSizeBase,
+ marginLeft: '-8px',
+ fontSize: token.fontSizeBase,
+ ':global': {
+ 'ant-avatar': {
+ border: '1px solid @border-color-base',
+ },
+ },
+ },
+ avatarItemLarge: {
+ width: token.avatarSizeLg,
+ height: token.avatarSizeLg,
+ },
+ avatarItemSmall: {
+ width: token.avatarSizeSm,
+ height: token.avatarSizeSm,
+ },
+ avatarItemMini: {
+ width: '20px',
+ height: '20px',
+ ':global': {
+ 'ant-avatar': {
+ width: '20px',
+ height: '20px',
+ lineHeight: '20px',
+ 'ant-avatar-string': { fontSize: '12px', lineHeight: '18px' },
+ },
+ },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/account/center/components/AvatarList/index.tsx b/src/pages/account/center/components/AvatarList/index.tsx
index 4d57501a..4f8e3e27 100644
--- a/src/pages/account/center/components/AvatarList/index.tsx
+++ b/src/pages/account/center/components/AvatarList/index.tsx
@@ -2,7 +2,7 @@ import { Avatar, Tooltip } from 'antd';
import React from 'react';
import classNames from 'classnames';
-import styles from './index.less';
+import styles from './index.style.ts';
export declare type SizeType = number | 'small' | 'default' | 'large';
diff --git a/src/pages/account/center/components/Projects/index.less b/src/pages/account/center/components/Projects/index.less
index bfa61475..875a6f22 100644
--- a/src/pages/account/center/components/Projects/index.less
+++ b/src/pages/account/center/components/Projects/index.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.coverCardList {
.card {
diff --git a/src/pages/account/center/components/Projects/index.style.ts b/src/pages/account/center/components/Projects/index.style.ts
new file mode 100644
index 00000000..16aafb6f
--- /dev/null
+++ b/src/pages/account/center/components/Projects/index.style.ts
@@ -0,0 +1,55 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ coverCardList: {
+ card: {
+ ':global': {
+ 'ant-card-meta-title': {
+ marginBottom: '4px',
+ '& > a': {
+ display: 'inline-block',
+ maxWidth: '100%',
+ color: token.headingColor,
+ },
+ },
+ 'ant-card-meta-description': {
+ height: '44px',
+ overflow: 'hidden',
+ lineHeight: '22px',
+ },
+ },
+ '&:hover': {
+ ':global': {
+ 'ant-card-meta-title > a': {
+ color: token.colorPrimary,
+ },
+ },
+ },
+ },
+ cardItemContent: {
+ display: 'flex',
+ height: '20px',
+ marginTop: '16px',
+ marginBottom: '-4px',
+ lineHeight: '20px',
+ '& > span': {
+ flex: '1',
+ color: token.textColorSecondary,
+ fontSize: '12px',
+ },
+ avatarList: {
+ flex: '0 1 auto',
+ },
+ },
+ cardList: { marginTop: '24px' },
+ ':global': {
+ 'ant-list .ant-list-item-content-single': {
+ maxWidth: '100%',
+ },
+ },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/account/center/components/Projects/index.tsx b/src/pages/account/center/components/Projects/index.tsx
index a03c383d..ba4e5f3d 100644
--- a/src/pages/account/center/components/Projects/index.tsx
+++ b/src/pages/account/center/components/Projects/index.tsx
@@ -1,11 +1,11 @@
import { Card, List } from 'antd';
-import { useRequest } from 'umi';
+import { useRequest } from '@umijs/max';
import React from 'react';
import moment from 'moment';
import { queryFakeList } from '../../service';
import AvatarList from '../AvatarList';
import type { ListItemDataType } from '../../data.d';
-import styles from './index.less';
+import styles from './index.style.ts';
const Projects: React.FC = () => {
// 获取tab列表数据
diff --git a/src/pages/account/center/index.tsx b/src/pages/account/center/index.tsx
index 2410ff48..028d8168 100644
--- a/src/pages/account/center/index.tsx
+++ b/src/pages/account/center/index.tsx
@@ -1,15 +1,15 @@
import { PlusOutlined, HomeOutlined, ContactsOutlined, ClusterOutlined } from '@ant-design/icons';
import { Avatar, Card, Col, Divider, Input, Row, Tag } from 'antd';
import React, { useState, useRef } from 'react';
-import { GridContent } from '@ant-design/pro-layout';
-import { Link, useRequest } from 'umi';
+import { GridContent } from '@ant-design/pro-components';
+import { Link, useRequest } from '@umijs/max';
import type { RouteChildrenProps } from 'react-router';
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 styles from './Center.less';
+import styles from './Center.style.ts';
const operationTabList = [
{
diff --git a/src/pages/account/center/service.ts b/src/pages/account/center/service.ts
index b6bfad71..dee1554e 100644
--- a/src/pages/account/center/service.ts
+++ b/src/pages/account/center/service.ts
@@ -1,4 +1,4 @@
-import { request } from 'umi';
+import { request } from '@umijs/max';
import type { CurrentUser, ListItemDataType } from './data.d';
export async function queryCurrent(): Promise<{ data: CurrentUser }> {
diff --git a/src/pages/account/settings/components/BaseView.less b/src/pages/account/settings/components/BaseView.less
index ca328b47..9be85e32 100644
--- a/src/pages/account/settings/components/BaseView.less
+++ b/src/pages/account/settings/components/BaseView.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.baseView {
display: flex;
diff --git a/src/pages/account/settings/components/BaseView.style.ts b/src/pages/account/settings/components/BaseView.style.ts
new file mode 100644
index 00000000..85fcfde9
--- /dev/null
+++ b/src/pages/account/settings/components/BaseView.style.ts
@@ -0,0 +1,59 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ baseView: {
+ display: 'flex',
+ paddingTop: '12px',
+ ':global': {
+ 'ant-legacy-form-item .ant-legacy-form-item-control-wrapper': {
+ width: '100%',
+ },
+ },
+ left: { minWidth: '224px', maxWidth: '448px' },
+ right: {
+ flex: '1',
+ paddingLeft: '104px',
+ avatar_title: {
+ height: '22px',
+ marginBottom: '8px',
+ color: token.headingColor,
+ fontSize: token.fontSizeBase,
+ lineHeight: '22px',
+ },
+ avatar: {
+ width: '144px',
+ height: '144px',
+ marginBottom: '12px',
+ overflow: 'hidden',
+ img: { width: '100%' },
+ },
+ button_view: {
+ width: '144px',
+ textAlign: 'center',
+ },
+ },
+ },
+ area_code: {
+ width: '72px',
+ },
+ phone_number: {
+ width: '214px',
+ },
+ [`@mediascreen and (max-width: token.screen-xl)`]: {
+ baseView: {
+ flexDirection: 'column-reverse',
+ right: {
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ maxWidth: '448px',
+ padding: '20px',
+ avatar_title: { display: 'none' },
+ },
+ },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/account/settings/components/PhoneView.tsx b/src/pages/account/settings/components/PhoneView.tsx
index 43894f34..874965ec 100644
--- a/src/pages/account/settings/components/PhoneView.tsx
+++ b/src/pages/account/settings/components/PhoneView.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { Input } from 'antd';
-import styles from './PhoneView.less';
+import styles from './PhoneView.style.ts';
type PhoneViewProps = {
value?: string;
diff --git a/src/pages/account/settings/components/base.tsx b/src/pages/account/settings/components/base.tsx
index e13ee787..8d4c1ba6 100644
--- a/src/pages/account/settings/components/base.tsx
+++ b/src/pages/account/settings/components/base.tsx
@@ -1,18 +1,19 @@
import React from 'react';
import { UploadOutlined } from '@ant-design/icons';
import { Button, Input, Upload, message } from 'antd';
-import ProForm, {
+import {
+ ProForm,
ProFormDependency,
ProFormFieldSet,
ProFormSelect,
ProFormText,
ProFormTextArea,
-} from '@ant-design/pro-form';
-import { useRequest } from 'umi';
+} from '@ant-design/pro-components';
+import { useRequest } from '@umijs/max';
import { queryCurrent } from '../service';
import { queryProvince, queryCity } from '../service';
-import styles from './BaseView.less';
+import styles from './BaseView.style.ts';
const validatorPhone = (rule: any, value: string[], callback: (message?: string) => void) => {
if (!value[0]) {
diff --git a/src/pages/account/settings/index.tsx b/src/pages/account/settings/index.tsx
index d5131ec5..9b9b4115 100644
--- a/src/pages/account/settings/index.tsx
+++ b/src/pages/account/settings/index.tsx
@@ -1,11 +1,11 @@
import React, { useState, useRef, useLayoutEffect } from 'react';
-import { GridContent } from '@ant-design/pro-layout';
+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 styles from './style.less';
+import styles from './style.style.ts';
const { Item } = Menu;
diff --git a/src/pages/account/settings/service.ts b/src/pages/account/settings/service.ts
index e2a6031a..fb047d20 100644
--- a/src/pages/account/settings/service.ts
+++ b/src/pages/account/settings/service.ts
@@ -1,4 +1,4 @@
-import { request } from 'umi';
+import { request } from '@umijs/max';
import type { CurrentUser, GeographicItemType } from './data';
export async function queryCurrent(): Promise<{ data: CurrentUser }> {
diff --git a/src/pages/account/settings/style.less b/src/pages/account/settings/style.less
index fee54c2d..5c72b0c6 100644
--- a/src/pages/account/settings/style.less
+++ b/src/pages/account/settings/style.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.main {
display: flex;
diff --git a/src/pages/account/settings/style.style.ts b/src/pages/account/settings/style.style.ts
new file mode 100644
index 00000000..e03c26f0
--- /dev/null
+++ b/src/pages/account/settings/style.style.ts
@@ -0,0 +1,85 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ main: {
+ display: 'flex',
+ width: '100%',
+ height: '100%',
+ paddingTop: '16px',
+ paddingBottom: '16px',
+ backgroundColor: token.menuBg,
+ leftMenu: {
+ width: '224px',
+ borderRight: `${token.borderWidthBase} ${token.borderStyleBase} ${token.borderColorSplit}`,
+ ':global': {
+ 'ant-menu-inline': { border: 'none' },
+ '.ant-menu-horizontal': { fontWeight: 'bold' },
+ },
+ },
+ right: {
+ flex: '1',
+ padding: '8px 40px',
+ title: {
+ marginBottom: '12px',
+ color: token.headingColor,
+ fontWeight: '500',
+ fontSize: '20px',
+ lineHeight: '28px',
+ },
+ },
+ ':global': {
+ 'ant-list-split .ant-list-item:last-child': {
+ borderBottom: '1px solid @border-color-split',
+ },
+ 'ant-list-item': {
+ paddingTop: '14px',
+ paddingBottom: '14px',
+ },
+ },
+ },
+ ':global': {
+ 'ant-list-item-meta': {
+ '// 账号绑定图标 taobao': {
+ display: 'block',
+ color: '#ff4000',
+ fontSize: '48px',
+ lineHeight: '48px',
+ borderRadius: token.borderRadiusBase,
+ },
+ dingding: {
+ margin: '2px',
+ padding: '6px',
+ color: '#fff',
+ fontSize: '32px',
+ lineHeight: '32px',
+ backgroundColor: '#2eabff',
+ borderRadius: token.borderRadiusBase,
+ },
+ alipay: {
+ color: '#2eabff',
+ fontSize: '48px',
+ lineHeight: '48px',
+ borderRadius: token.borderRadiusBase,
+ },
+ },
+ '// 密码强度 fontstrong': { color: token.successColor },
+ fontmedium: { color: token.warningColor },
+ fontweak: { color: token.errorColor },
+ },
+ [`@mediascreen and (max-width: token.screen-md)`]: {
+ main: {
+ flexDirection: 'column',
+ leftMenu: {
+ width: '100%',
+ border: 'none',
+ },
+ right: {
+ padding: '40px',
+ },
+ },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/dashboard/analysis/components/Charts/Bar/index.tsx b/src/pages/dashboard/analysis/components/Charts/Bar/index.tsx
index c2650fff..045e7da0 100644
--- a/src/pages/dashboard/analysis/components/Charts/Bar/index.tsx
+++ b/src/pages/dashboard/analysis/components/Charts/Bar/index.tsx
@@ -3,7 +3,7 @@ import React, { Component } from 'react';
import Debounce from 'lodash.debounce';
import autoHeight from '../autoHeight';
-import styles from '../index.less';
+import styles from '../index.style.ts';
export type BarProps = {
title: React.ReactNode;
diff --git a/src/pages/dashboard/analysis/components/Charts/ChartCard/index.less b/src/pages/dashboard/analysis/components/Charts/ChartCard/index.less
index d7bf6dda..aee87e00 100644
--- a/src/pages/dashboard/analysis/components/Charts/ChartCard/index.less
+++ b/src/pages/dashboard/analysis/components/Charts/ChartCard/index.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.chartCard {
position: relative;
diff --git a/src/pages/dashboard/analysis/components/Charts/ChartCard/index.style.ts b/src/pages/dashboard/analysis/components/Charts/ChartCard/index.style.ts
new file mode 100644
index 00000000..b82abba6
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/Charts/ChartCard/index.style.ts
@@ -0,0 +1,65 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ chartCard: {
+ position: 'relative',
+ chartTop: { position: 'relative', width: '100%', overflow: 'hidden' },
+ chartTopMargin: { marginBottom: '12px' },
+ chartTopHasMargin: { marginBottom: '20px' },
+ metaWrap: { float: 'left' },
+ avatar: {
+ position: 'relative',
+ top: '4px',
+ float: 'left',
+ marginRight: '20px',
+ img: {
+ borderRadius: '100%',
+ },
+ },
+ meta: {
+ height: '22px',
+ color: token.textColorSecondary,
+ fontSize: token.fontSizeBase,
+ lineHeight: '22px',
+ },
+ action: {
+ position: 'absolute',
+ top: '4px',
+ right: '0',
+ lineHeight: '1',
+ cursor: 'pointer',
+ },
+ total: {
+ height: '38px',
+ marginTop: '4px',
+ marginBottom: '0',
+ overflow: 'hidden',
+ color: token.headingColor,
+ fontSize: '30px',
+ lineHeight: '38px',
+ whiteSpace: 'nowrap',
+ textOverflow: 'ellipsis',
+ wordBreak: 'break-all',
+ },
+ content: { position: 'relative', width: '100%', marginBottom: '12px' },
+ contentFixed: {
+ position: 'absolute',
+ bottom: '0',
+ left: '0',
+ width: '100%',
+ },
+ footer: {
+ marginTop: '8px',
+ paddingTop: '9px',
+ borderTop: '1px solid @border-color-split',
+ '& > *': {
+ position: 'relative',
+ },
+ },
+ footerMargin: { marginTop: '20px' },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/dashboard/analysis/components/Charts/ChartCard/index.tsx b/src/pages/dashboard/analysis/components/Charts/ChartCard/index.tsx
index e860582d..9362001e 100644
--- a/src/pages/dashboard/analysis/components/Charts/ChartCard/index.tsx
+++ b/src/pages/dashboard/analysis/components/Charts/ChartCard/index.tsx
@@ -2,7 +2,7 @@ import { Card } from 'antd';
import type { CardProps } from 'antd/es/card';
import React from 'react';
import classNames from 'classnames';
-import styles from './index.less';
+import styles from './index.style.ts';
type totalType = () => React.ReactNode;
diff --git a/src/pages/dashboard/analysis/components/Charts/Field/index.less b/src/pages/dashboard/analysis/components/Charts/Field/index.less
index 4fe0d1f6..e065345b 100644
--- a/src/pages/dashboard/analysis/components/Charts/Field/index.less
+++ b/src/pages/dashboard/analysis/components/Charts/Field/index.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.field {
margin: 0;
diff --git a/src/pages/dashboard/analysis/components/Charts/Field/index.style.ts b/src/pages/dashboard/analysis/components/Charts/Field/index.style.ts
new file mode 100644
index 00000000..aae4ccf2
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/Charts/Field/index.style.ts
@@ -0,0 +1,16 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ field: {
+ margin: '0',
+ overflow: 'hidden',
+ whiteSpace: 'nowrap',
+ textOverflow: 'ellipsis',
+ 'label, .number': { fontSize: token.fontSizeBase, lineHeight: '22px' },
+ number: { marginLeft: '8px', color: token.headingColor },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/dashboard/analysis/components/Charts/Field/index.tsx b/src/pages/dashboard/analysis/components/Charts/Field/index.tsx
index a6fb64a9..8de028c9 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 styles from './index.less';
+import styles from './index.style.ts';
export type FieldProps = {
label: 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 5b20ae85..5c0c6e56 100644
--- a/src/pages/dashboard/analysis/components/Charts/MiniArea/index.tsx
+++ b/src/pages/dashboard/analysis/components/Charts/MiniArea/index.tsx
@@ -3,7 +3,7 @@ import { Axis, Chart, Geom, Tooltip } from 'bizcharts';
import React from 'react';
import autoHeight from '../autoHeight';
-import styles from '../index.less';
+import styles from '../index.style.ts';
export type MiniAreaProps = {
color?: string;
diff --git a/src/pages/dashboard/analysis/components/Charts/MiniBar/index.tsx b/src/pages/dashboard/analysis/components/Charts/MiniBar/index.tsx
index 46be2760..11cb40bb 100644
--- a/src/pages/dashboard/analysis/components/Charts/MiniBar/index.tsx
+++ b/src/pages/dashboard/analysis/components/Charts/MiniBar/index.tsx
@@ -2,7 +2,7 @@ import { Chart, Geom, Tooltip } from 'bizcharts';
import React from 'react';
import autoHeight from '../autoHeight';
-import styles from '../index.less';
+import styles from '../index.style.ts';
export type MiniBarProps = {
color?: string;
diff --git a/src/pages/dashboard/analysis/components/Charts/MiniProgress/index.tsx b/src/pages/dashboard/analysis/components/Charts/MiniProgress/index.tsx
index ad0a2d2e..cb06115a 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 styles from './index.less';
+import styles from './index.style.ts';
export type MiniProgressProps = {
target: number;
diff --git a/src/pages/dashboard/analysis/components/Charts/Pie/index.tsx b/src/pages/dashboard/analysis/components/Charts/Pie/index.tsx
index e996c1e3..b0061479 100644
--- a/src/pages/dashboard/analysis/components/Charts/Pie/index.tsx
+++ b/src/pages/dashboard/analysis/components/Charts/Pie/index.tsx
@@ -7,7 +7,7 @@ import { Divider } from 'antd';
import ReactFitText from 'react-fittext';
import classNames from 'classnames';
import autoHeight from '../autoHeight';
-import styles from './index.less';
+import styles from './index.style.ts';
export type PieProps = {
animate?: boolean;
diff --git a/src/pages/dashboard/analysis/components/Charts/TagCloud/index.tsx b/src/pages/dashboard/analysis/components/Charts/TagCloud/index.tsx
index 56e8df47..2bd3a204 100644
--- a/src/pages/dashboard/analysis/components/Charts/TagCloud/index.tsx
+++ b/src/pages/dashboard/analysis/components/Charts/TagCloud/index.tsx
@@ -5,7 +5,7 @@ import DataSet from '@antv/data-set';
import Debounce from 'lodash.debounce';
import classNames from 'classnames';
import autoHeight from '../autoHeight';
-import styles from './index.less';
+import styles from './index.style.ts';
/* eslint no-underscore-dangle: 0 */
/* eslint no-param-reassign: 0 */
diff --git a/src/pages/dashboard/analysis/components/Charts/TimelineChart/index.tsx b/src/pages/dashboard/analysis/components/Charts/TimelineChart/index.tsx
index fa17bfa7..5b47fbe5 100644
--- a/src/pages/dashboard/analysis/components/Charts/TimelineChart/index.tsx
+++ b/src/pages/dashboard/analysis/components/Charts/TimelineChart/index.tsx
@@ -4,7 +4,7 @@ import DataSet from '@antv/data-set';
import React from 'react';
import Slider from 'bizcharts-plugin-slider';
import autoHeight from '../autoHeight';
-import styles from './index.less';
+import styles from './index.style.ts';
export type TimelineChartProps = {
data: {
diff --git a/src/pages/dashboard/analysis/components/Charts/WaterWave/index.tsx b/src/pages/dashboard/analysis/components/Charts/WaterWave/index.tsx
index a9b64110..4d9206e4 100644
--- a/src/pages/dashboard/analysis/components/Charts/WaterWave/index.tsx
+++ b/src/pages/dashboard/analysis/components/Charts/WaterWave/index.tsx
@@ -1,7 +1,7 @@
import React, { Component } from 'react';
import autoHeight from '../autoHeight';
-import styles from './index.less';
+import styles from './index.style.ts';
/* eslint no-return-assign: 0 */
/* eslint no-mixed-operators: 0 */
diff --git a/src/pages/dashboard/analysis/components/Charts/index.style.ts b/src/pages/dashboard/analysis/components/Charts/index.style.ts
new file mode 100644
index 00000000..59b0ff23
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/Charts/index.style.ts
@@ -0,0 +1,27 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ miniChart: {
+ position: 'relative',
+ width: '100%',
+ chartContent: {
+ position: 'absolute',
+ bottom: '-28px',
+ width: '100%',
+ '> div': {
+ margin: '0 -5px',
+ overflow: 'hidden',
+ },
+ },
+ chartLoading: {
+ position: 'absolute',
+ top: '16px',
+ left: '50%',
+ marginLeft: '-7px',
+ },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/dashboard/analysis/components/IntroduceRow.tsx b/src/pages/dashboard/analysis/components/IntroduceRow.tsx
index cf0f3fd0..b6f3ec29 100644
--- a/src/pages/dashboard/analysis/components/IntroduceRow.tsx
+++ b/src/pages/dashboard/analysis/components/IntroduceRow.tsx
@@ -7,7 +7,7 @@ import { ChartCard, Field } from './Charts';
import type { DataItem } from '../data.d';
import Trend from './Trend';
import Yuan from '../utils/Yuan';
-import styles from '../style.less';
+import styles from '../style.style.ts';
const topColResponsiveProps = {
xs: 24,
diff --git a/src/pages/dashboard/analysis/components/NumberInfo/index.less b/src/pages/dashboard/analysis/components/NumberInfo/index.less
index 847d25ee..a9502055 100644
--- a/src/pages/dashboard/analysis/components/NumberInfo/index.less
+++ b/src/pages/dashboard/analysis/components/NumberInfo/index.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.numberInfo {
.suffix {
diff --git a/src/pages/dashboard/analysis/components/NumberInfo/index.style.ts b/src/pages/dashboard/analysis/components/NumberInfo/index.style.ts
new file mode 100644
index 00000000..59aeea43
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/NumberInfo/index.style.ts
@@ -0,0 +1,74 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ numberInfo: {
+ suffix: {
+ marginLeft: '4px',
+ color: token.textColor,
+ fontSize: '16px',
+ fontStyle: 'normal',
+ },
+ numberInfoTitle: {
+ marginBottom: '16px',
+ color: token.textColor,
+ fontSize: token.fontSizeLg,
+ transition: 'all 0.3s',
+ },
+ numberInfoSubTitle: {
+ height: '22px',
+ overflow: 'hidden',
+ color: token.textColorSecondary,
+ fontSize: token.fontSizeBase,
+ lineHeight: '22px',
+ whiteSpace: 'nowrap',
+ textOverflow: 'ellipsis',
+ wordBreak: 'break-all',
+ },
+ numberInfoValue: {
+ marginTop: '4px',
+ overflow: 'hidden',
+ fontSize: '0',
+ whiteSpace: 'nowrap',
+ textOverflow: 'ellipsis',
+ wordBreak: 'break-all',
+ '& > span': {
+ display: 'inline-block',
+ height: '32px',
+ marginRight: '32px',
+ color: token.headingColor,
+ fontSize: '24px',
+ lineHeight: '32px',
+ },
+ subTotal: {
+ marginRight: '0',
+ color: token.textColorSecondary,
+ fontSize: token.fontSizeLg,
+ verticalAlign: 'top',
+ anticon: {
+ marginLeft: '4px',
+ fontSize: '12px',
+ transform: 'scale(0.82)',
+ },
+ ':global': {
+ 'anticon-caret-up': {
+ color: token.red6,
+ },
+ 'anticon-caret-down': {
+ color: token.green6,
+ },
+ },
+ },
+ },
+ },
+ numberInfolight: {
+ numberInfoValue: {
+ '& > span': {
+ color: token.textColor,
+ },
+ },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/dashboard/analysis/components/NumberInfo/index.tsx b/src/pages/dashboard/analysis/components/NumberInfo/index.tsx
index 60b4e946..555ee052 100644
--- a/src/pages/dashboard/analysis/components/NumberInfo/index.tsx
+++ b/src/pages/dashboard/analysis/components/NumberInfo/index.tsx
@@ -1,7 +1,7 @@
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons';
import React from 'react';
import classNames from 'classnames';
-import styles from './index.less';
+import styles from './index.style.ts';
export type NumberInfoProps = {
title?: React.ReactNode | string;
diff --git a/src/pages/dashboard/analysis/components/OfflineData.tsx b/src/pages/dashboard/analysis/components/OfflineData.tsx
index eca987bd..393dab83 100644
--- a/src/pages/dashboard/analysis/components/OfflineData.tsx
+++ b/src/pages/dashboard/analysis/components/OfflineData.tsx
@@ -3,7 +3,7 @@ import { RingProgress, Line } from '@ant-design/charts';
import type { OfflineDataType, DataItem } from '../data.d';
import NumberInfo from './NumberInfo';
-import styles from '../style.less';
+import styles from '../style.style.ts';
const CustomTab = ({
data,
diff --git a/src/pages/dashboard/analysis/components/ProportionSales.tsx b/src/pages/dashboard/analysis/components/ProportionSales.tsx
index f96d0ea1..3ea9e531 100644
--- a/src/pages/dashboard/analysis/components/ProportionSales.tsx
+++ b/src/pages/dashboard/analysis/components/ProportionSales.tsx
@@ -5,7 +5,7 @@ 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 styles from '../style.less';
+import styles from '../style.style.ts';
const { Text } = Typography;
diff --git a/src/pages/dashboard/analysis/components/SalesCard.tsx b/src/pages/dashboard/analysis/components/SalesCard.tsx
index 152d9cef..5cd1b51a 100644
--- a/src/pages/dashboard/analysis/components/SalesCard.tsx
+++ b/src/pages/dashboard/analysis/components/SalesCard.tsx
@@ -5,7 +5,7 @@ import { Column } from '@ant-design/charts';
import numeral from 'numeral';
import type { DataItem } from '../data.d';
-import styles from '../style.less';
+import styles from '../style.style.ts';
type RangePickerValue = RangePickerProps
['value'];
export type TimeType = 'today' | 'week' | 'month' | 'year';
diff --git a/src/pages/dashboard/analysis/components/TopSearch.tsx b/src/pages/dashboard/analysis/components/TopSearch.tsx
index 48bfe03a..bd0a85c0 100644
--- a/src/pages/dashboard/analysis/components/TopSearch.tsx
+++ b/src/pages/dashboard/analysis/components/TopSearch.tsx
@@ -7,7 +7,7 @@ import type { DataItem } from '../data.d';
import NumberInfo from './NumberInfo';
import Trend from './Trend';
-import styles from '../style.less';
+import styles from '../style.style.ts';
const columns = [
{
diff --git a/src/pages/dashboard/analysis/components/Trend/index.less b/src/pages/dashboard/analysis/components/Trend/index.less
index 3d7fdf99..e6430f60 100644
--- a/src/pages/dashboard/analysis/components/Trend/index.less
+++ b/src/pages/dashboard/analysis/components/Trend/index.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.trendItem {
display: inline-block;
diff --git a/src/pages/dashboard/analysis/components/Trend/index.style.ts b/src/pages/dashboard/analysis/components/Trend/index.style.ts
new file mode 100644
index 00000000..b2e84a32
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/Trend/index.style.ts
@@ -0,0 +1,27 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ trendItem: {
+ display: 'inline-block',
+ fontSize: token.fontSizeBase,
+ lineHeight: '22px',
+ 'up, .down': {
+ position: 'relative',
+ top: '1px',
+ marginLeft: '4px',
+ span: {
+ fontSize: '12px',
+ transform: 'scale(0.83)',
+ },
+ },
+ up: { color: token.red6 },
+ down: { top: '-1px', color: token.green6 },
+ '&trendItemGrey .up, &.trendItemGrey .down': { color: token.textColor },
+ '&reverseColor .up': { color: token.green6 },
+ '&reverseColor .down': { color: token.red6 },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/dashboard/analysis/components/Trend/index.tsx b/src/pages/dashboard/analysis/components/Trend/index.tsx
index 58f7196a..0a4f3671 100644
--- a/src/pages/dashboard/analysis/components/Trend/index.tsx
+++ b/src/pages/dashboard/analysis/components/Trend/index.tsx
@@ -1,7 +1,7 @@
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons';
import React from 'react';
import classNames from 'classnames';
-import styles from './index.less';
+import styles from './index.style.ts';
export type TrendProps = {
colorful?: boolean;
diff --git a/src/pages/dashboard/analysis/index.tsx b/src/pages/dashboard/analysis/index.tsx
index 331d7e6a..3f590033 100644
--- a/src/pages/dashboard/analysis/index.tsx
+++ b/src/pages/dashboard/analysis/index.tsx
@@ -2,7 +2,7 @@ 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-layout';
+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 moment from 'moment';
@@ -11,14 +11,14 @@ import SalesCard from './components/SalesCard';
import TopSearch from './components/TopSearch';
import ProportionSales from './components/ProportionSales';
import OfflineData from './components/OfflineData';
-import { useRequest } from 'umi';
+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 styles from './style.less';
+import styles from './style.style.ts';
type RangePickerValue = RangePickerProps['value'];
diff --git a/src/pages/dashboard/analysis/service.ts b/src/pages/dashboard/analysis/service.ts
index c8a6b08a..d24e6262 100644
--- a/src/pages/dashboard/analysis/service.ts
+++ b/src/pages/dashboard/analysis/service.ts
@@ -1,4 +1,4 @@
-import { request } from 'umi';
+import { request } from '@umijs/max';
import type { AnalysisData } from './data';
export async function fakeChartData(): Promise<{ data: AnalysisData }> {
diff --git a/src/pages/dashboard/analysis/style.less b/src/pages/dashboard/analysis/style.less
index 38a790b6..b1e866ed 100644
--- a/src/pages/dashboard/analysis/style.less
+++ b/src/pages/dashboard/analysis/style.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.iconGroup {
span.anticon {
diff --git a/src/pages/dashboard/analysis/style.style.ts b/src/pages/dashboard/analysis/style.style.ts
new file mode 100644
index 00000000..f2d8fc9e
--- /dev/null
+++ b/src/pages/dashboard/analysis/style.style.ts
@@ -0,0 +1,161 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ iconGroup: {
+ spananticon: {
+ marginLeft: '16px',
+ color: token.textColorSecondary,
+ cursor: 'pointer',
+ transition: 'color 0.32s',
+ '&:hover': {
+ color: token.textColor,
+ },
+ },
+ },
+ rankingList: {
+ margin: '25px 0 0',
+ padding: '0',
+ listStyle: 'none',
+ li: {
+ display: 'flex',
+ alignItems: 'center',
+ marginTop: '16px',
+ zoom: '1',
+ '&::before, &::after': {
+ display: 'table',
+ content: "' '",
+ },
+ '&::after': {
+ clear: 'both',
+ height: '0',
+ fontSize: '0',
+ visibility: 'hidden',
+ },
+ span: {
+ color: token.textColor,
+ 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',
+ backgroundColor: token.tagDefaultBg,
+ borderRadius: '20px',
+ '&active': { color: '#fff', backgroundColor: '#314659' },
+ },
+ rankingItemTitle: {
+ flex: '1',
+ marginRight: '8px',
+ overflow: 'hidden',
+ whiteSpace: 'nowrap',
+ textOverflow: 'ellipsis',
+ },
+ },
+ },
+ salesExtra: {
+ display: 'inline-block',
+ marginRight: '24px',
+ a: {
+ marginLeft: '24px',
+ color: token.textColor,
+ '&:hover': {
+ color: token.colorPrimary,
+ },
+ '¤tDate': {
+ color: token.colorPrimary,
+ },
+ },
+ },
+ salesCard: {
+ salesBar: { padding: '0 0 32px 32px' },
+ salesRank: { padding: '0 32px 32px 72px' },
+ ':global': {
+ 'ant-tabs-bar, .ant-tabs-nav-wrap': {
+ paddingLeft: '16px',
+ 'ant-tabs-nav .ant-tabs-tab': {
+ paddingTop: '16px',
+ paddingBottom: '14px',
+ lineHeight: '24px',
+ },
+ },
+ 'ant-tabs-extra-content': {
+ paddingRight: '24px',
+ lineHeight: '55px',
+ },
+ 'ant-card-head': {
+ position: 'relative',
+ },
+ 'ant-card-head-title': {
+ alignItems: 'normal',
+ },
+ },
+ },
+ salesCardExtra: {
+ height: 'inherit',
+ },
+ salesTypeRadio: {
+ position: 'absolute',
+ right: '54px',
+ bottom: '12px',
+ },
+ offlineCard: {
+ ':global': {
+ 'ant-tabs-ink-bar': {
+ bottom: 'auto',
+ },
+ 'ant-tabs-bar': {
+ borderBottom: 'none',
+ },
+ 'ant-tabs-nav-container-scrolling': {
+ paddingRight: '40px',
+ paddingLeft: '40px',
+ },
+ 'ant-tabs-tab-prev-icon::before': {
+ position: 'relative',
+ left: '6px',
+ },
+ 'ant-tabs-tab-next-icon::before': {
+ position: 'relative',
+ right: '6px',
+ },
+ 'ant-tabs-tab-active h4': {
+ color: token.colorPrimary,
+ },
+ },
+ },
+ trendText: {
+ marginLeft: '8px',
+ color: token.headingColor,
+ },
+ [`@mediascreen and (max-width: token.screen-lg)`]: {
+ salesExtra: { display: 'none' },
+ rankingList: {
+ li: {
+ 'span:first-child': { marginRight: '8px' },
+ },
+ },
+ },
+ [`@mediascreen and (max-width: token.screen-md)`]: {
+ rankingTitle: { marginTop: '16px' },
+ 'salesCard .salesBar': { padding: '16px' },
+ },
+ [`@mediascreen and (max-width: token.screen-sm)`]: {
+ salesExtraWrap: { display: 'none' },
+ salesCard: {
+ ':global': {
+ 'ant-tabs-content': { paddingTop: '30px' },
+ },
+ },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/dashboard/analysis/utils/utils.style.ts b/src/pages/dashboard/analysis/utils/utils.style.ts
new file mode 100644
index 00000000..d8f6b99f
--- /dev/null
+++ b/src/pages/dashboard/analysis/utils/utils.style.ts
@@ -0,0 +1,7 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {};
+});
+
+export default useStyles;
diff --git a/src/pages/dashboard/monitor/components/ActiveChart/index.style.ts b/src/pages/dashboard/monitor/components/ActiveChart/index.style.ts
new file mode 100644
index 00000000..8a3472cd
--- /dev/null
+++ b/src/pages/dashboard/monitor/components/ActiveChart/index.style.ts
@@ -0,0 +1,48 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ activeChart: {
+ position: 'relative',
+ },
+ activeChartGrid: {
+ p: { position: 'absolute', top: '80px' },
+ 'p:last-child': { top: '115px' },
+ },
+ activeChartLegend: {
+ position: 'relative',
+ height: '20px',
+ marginTop: '8px',
+ fontSize: '0',
+ lineHeight: '20px',
+ span: {
+ display: 'inline-block',
+ width: '33.33%',
+ fontSize: '12px',
+ textAlign: 'center',
+ },
+ 'span:first-child': { textAlign: 'left' },
+ 'span:last-child': { textAlign: 'right' },
+ },
+ dashedLine: {
+ position: 'relative',
+ top: '-70px',
+ left: '-3px',
+ height: '1px',
+ line: {
+ position: 'absolute',
+ top: '0',
+ left: '0',
+ width: '100%',
+ height: '100%',
+ backgroundImage: 'linear-gradient(to right, transparent 50%, #e9e9e9 50%)',
+ backgroundSize: '6px',
+ },
+ },
+ 'dashedLine:last-child': {
+ top: '-36px',
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/dashboard/monitor/components/ActiveChart/index.tsx b/src/pages/dashboard/monitor/components/ActiveChart/index.tsx
index 9f0df840..3aa5e451 100644
--- a/src/pages/dashboard/monitor/components/ActiveChart/index.tsx
+++ b/src/pages/dashboard/monitor/components/ActiveChart/index.tsx
@@ -2,7 +2,7 @@ import { Component } from 'react';
import { TinyArea } from '@ant-design/charts';
import { Statistic } from 'antd';
-import styles from './index.less';
+import styles from './index.style.ts';
function fixedZero(val: number) {
return val * 1 < 10 ? `0${val}` : val;
diff --git a/src/pages/dashboard/monitor/components/Charts/MiniArea/index.tsx b/src/pages/dashboard/monitor/components/Charts/MiniArea/index.tsx
index 5b20ae85..5c0c6e56 100644
--- a/src/pages/dashboard/monitor/components/Charts/MiniArea/index.tsx
+++ b/src/pages/dashboard/monitor/components/Charts/MiniArea/index.tsx
@@ -3,7 +3,7 @@ import { Axis, Chart, Geom, Tooltip } from 'bizcharts';
import React from 'react';
import autoHeight from '../autoHeight';
-import styles from '../index.less';
+import styles from '../index.style.ts';
export type MiniAreaProps = {
color?: string;
diff --git a/src/pages/dashboard/monitor/components/Charts/Pie/index.tsx b/src/pages/dashboard/monitor/components/Charts/Pie/index.tsx
index 520c5c57..e49b22f3 100644
--- a/src/pages/dashboard/monitor/components/Charts/Pie/index.tsx
+++ b/src/pages/dashboard/monitor/components/Charts/Pie/index.tsx
@@ -7,7 +7,7 @@ import { Divider } from 'antd';
import ReactFitText from 'react-fittext';
import classNames from 'classnames';
import autoHeight from '../autoHeight';
-import styles from './index.less';
+import styles from './index.style.ts';
export type PieProps = {
animate?: boolean;
diff --git a/src/pages/dashboard/monitor/components/Charts/TagCloud/index.tsx b/src/pages/dashboard/monitor/components/Charts/TagCloud/index.tsx
index f3ee5192..42d457c6 100644
--- a/src/pages/dashboard/monitor/components/Charts/TagCloud/index.tsx
+++ b/src/pages/dashboard/monitor/components/Charts/TagCloud/index.tsx
@@ -5,7 +5,7 @@ import DataSet from '@antv/data-set';
import Debounce from 'lodash.debounce';
import classNames from 'classnames';
import autoHeight from '../autoHeight';
-import styles from './index.less';
+import styles from './index.style.ts';
/* eslint no-underscore-dangle: 0 */
/* eslint no-param-reassign: 0 */
diff --git a/src/pages/dashboard/monitor/components/Charts/WaterWave/index.tsx b/src/pages/dashboard/monitor/components/Charts/WaterWave/index.tsx
index a9b64110..4d9206e4 100644
--- a/src/pages/dashboard/monitor/components/Charts/WaterWave/index.tsx
+++ b/src/pages/dashboard/monitor/components/Charts/WaterWave/index.tsx
@@ -1,7 +1,7 @@
import React, { Component } from 'react';
import autoHeight from '../autoHeight';
-import styles from './index.less';
+import styles from './index.style.ts';
/* eslint no-return-assign: 0 */
/* eslint no-mixed-operators: 0 */
diff --git a/src/pages/dashboard/monitor/components/Map/index.tsx b/src/pages/dashboard/monitor/components/Map/index.tsx
index ff9d924f..d79abdf0 100644
--- a/src/pages/dashboard/monitor/components/Map/index.tsx
+++ b/src/pages/dashboard/monitor/components/Map/index.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import { HeatmapLayer, MapboxScene, PointLayer } from '@antv/l7-react';
-import { PageLoading } from '@ant-design/pro-layout';
+import { PageLoading } from '@ant-design/pro-components';
const colors = ['#eff3ff', '#c6dbef', '#9ecae1', '#6baed6', '#4292c6', '#2171b5', '#084594'];
export default class Map extends React.Component {
diff --git a/src/pages/dashboard/monitor/index.tsx b/src/pages/dashboard/monitor/index.tsx
index 779d200a..72d6fc6b 100644
--- a/src/pages/dashboard/monitor/index.tsx
+++ b/src/pages/dashboard/monitor/index.tsx
@@ -1,15 +1,15 @@
import { Card, Col, Row, Statistic } from 'antd';
-import { useRequest } from 'umi';
+import { useRequest } from '@umijs/max';
import type { FC } from 'react';
import { Gauge, WordCloud, Liquid, RingProgress } from '@ant-design/charts';
import type { WordCloudData } from '@antv/g2plot/esm/plots/word-cloud/layer';
-import { GridContent } from '@ant-design/pro-layout';
+import { GridContent } from '@ant-design/pro-components';
import numeral from 'numeral';
import Map from './components/Map';
import ActiveChart from './components/ActiveChart';
import { queryTags } from './service';
-import styles from './style.less';
+import styles from './style.style.ts';
const { Countdown } = Statistic;
diff --git a/src/pages/dashboard/monitor/service.ts b/src/pages/dashboard/monitor/service.ts
index 431c4106..2f4f5bce 100644
--- a/src/pages/dashboard/monitor/service.ts
+++ b/src/pages/dashboard/monitor/service.ts
@@ -1,4 +1,4 @@
-import { request } from 'umi';
+import { request } from '@umijs/max';
import type { TagType } from './data';
export async function queryTags(): Promise<{ data: { list: TagType[] } }> {
diff --git a/src/pages/dashboard/monitor/style.less b/src/pages/dashboard/monitor/style.less
index d2f0c686..ac350dc9 100644
--- a/src/pages/dashboard/monitor/style.less
+++ b/src/pages/dashboard/monitor/style.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.mapChart {
height: 452px;
diff --git a/src/pages/dashboard/monitor/style.style.ts b/src/pages/dashboard/monitor/style.style.ts
new file mode 100644
index 00000000..ab67e84d
--- /dev/null
+++ b/src/pages/dashboard/monitor/style.style.ts
@@ -0,0 +1,16 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ mapChart: {
+ height: '452px',
+ paddingTop: '24px',
+ img: { display: 'inline-block', maxWidth: '100%', maxHeight: '437px' },
+ },
+ [`@mediascreen and (max-width: token.screen-lg)`]: {
+ mapChart: { height: 'auto' },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/dashboard/workplace/components/EditableLinkGroup/index.less b/src/pages/dashboard/workplace/components/EditableLinkGroup/index.less
index 5add1b0b..443bb6ea 100644
--- a/src/pages/dashboard/workplace/components/EditableLinkGroup/index.less
+++ b/src/pages/dashboard/workplace/components/EditableLinkGroup/index.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.linkGroup {
padding: 20px 0 8px 24px;
diff --git a/src/pages/dashboard/workplace/components/EditableLinkGroup/index.style.ts b/src/pages/dashboard/workplace/components/EditableLinkGroup/index.style.ts
new file mode 100644
index 00000000..e0f6f0ab
--- /dev/null
+++ b/src/pages/dashboard/workplace/components/EditableLinkGroup/index.style.ts
@@ -0,0 +1,22 @@
+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',
+ color: token.textColor,
+ fontSize: token.fontSizeBase,
+ '&:hover': {
+ color: token.colorPrimary,
+ },
+ },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/dashboard/workplace/components/EditableLinkGroup/index.tsx b/src/pages/dashboard/workplace/components/EditableLinkGroup/index.tsx
index 73b34384..a18223f5 100644
--- a/src/pages/dashboard/workplace/components/EditableLinkGroup/index.tsx
+++ b/src/pages/dashboard/workplace/components/EditableLinkGroup/index.tsx
@@ -2,7 +2,7 @@ import React, { createElement } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { Button } from 'antd';
-import styles from './index.less';
+import styles from './index.style.ts';
export type EditableLink = {
title: string;
diff --git a/src/pages/dashboard/workplace/components/Radar/index.tsx b/src/pages/dashboard/workplace/components/Radar/index.tsx
index f7b8596a..e1af9f93 100644
--- a/src/pages/dashboard/workplace/components/Radar/index.tsx
+++ b/src/pages/dashboard/workplace/components/Radar/index.tsx
@@ -3,7 +3,7 @@ import { Col, Row } from 'antd';
import React, { Component } from 'react';
import autoHeight from './autoHeight';
-import styles from './index.less';
+import styles from './index.style.ts';
export type RadarProps = {
title?: React.ReactNode;
diff --git a/src/pages/dashboard/workplace/index.tsx b/src/pages/dashboard/workplace/index.tsx
index 701e64a1..fbb41410 100644
--- a/src/pages/dashboard/workplace/index.tsx
+++ b/src/pages/dashboard/workplace/index.tsx
@@ -2,11 +2,11 @@ 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 'umi';
-import { PageContainer } from '@ant-design/pro-layout';
+import { Link, useRequest } from '@umijs/max';
+import { PageContainer } from '@ant-design/pro-components';
import moment from 'moment';
import EditableLinkGroup from './components/EditableLinkGroup';
-import styles from './style.less';
+import styles from './style.style.ts';
import type { ActivitiesType, CurrentUser } from './data.d';
import { queryProjectNotice, queryActivities, fakeChartData } from './service';
diff --git a/src/pages/dashboard/workplace/service.ts b/src/pages/dashboard/workplace/service.ts
index 9d5cd915..7e59e4db 100644
--- a/src/pages/dashboard/workplace/service.ts
+++ b/src/pages/dashboard/workplace/service.ts
@@ -1,4 +1,4 @@
-import { request } from 'umi';
+import { request } from '@umijs/max';
import type { NoticeType, ActivitiesType, AnalysisData } from './data';
export async function queryProjectNotice(): Promise<{ data: NoticeType[] }> {
diff --git a/src/pages/dashboard/workplace/style.less b/src/pages/dashboard/workplace/style.less
index 46c10e14..99755cf8 100644
--- a/src/pages/dashboard/workplace/style.less
+++ b/src/pages/dashboard/workplace/style.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.textOverflow() {
overflow: hidden;
diff --git a/src/pages/dashboard/workplace/style.style.ts b/src/pages/dashboard/workplace/style.style.ts
new file mode 100644
index 00000000..1dc60c41
--- /dev/null
+++ b/src/pages/dashboard/workplace/style.style.ts
@@ -0,0 +1,268 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ activitiesList: {
+ padding: '0 24px 8px 24px',
+ username: { color: token.textColor },
+ event: { fontWeight: 'normal' },
+ },
+ pageHeaderContent: {
+ display: 'flex',
+ avatar: {
+ flex: '0 1 72px',
+ '& > span': {
+ display: 'block',
+ width: '72px',
+ height: '72px',
+ borderRadius: '72px',
+ },
+ },
+ content: {
+ position: 'relative',
+ top: '4px',
+ flex: '1 1 auto',
+ marginLeft: '24px',
+ color: token.textColorSecondary,
+ lineHeight: '22px',
+ contentTitle: {
+ marginBottom: '12px',
+ color: token.headingColor,
+ fontWeight: '500',
+ fontSize: '20px',
+ lineHeight: '28px',
+ },
+ },
+ },
+ extraContent: {
+ zoom: '1',
+ '&::before, &::after': { display: 'table', content: "' '" },
+ '&::after': {
+ clear: 'both',
+ height: '0',
+ fontSize: '0',
+ visibility: 'hidden',
+ },
+ float: 'right',
+ whiteSpace: 'nowrap',
+ statItem: {
+ position: 'relative',
+ display: 'inline-block',
+ padding: '0 32px',
+ '> p:first-child': {
+ marginBottom: '4px',
+ color: token.textColorSecondary,
+ fontSize: token.fontSizeBase,
+ lineHeight: '22px',
+ },
+ '> p': {
+ margin: '0',
+ color: token.headingColor,
+ fontSize: '30px',
+ lineHeight: '38px',
+ '> span': { color: token.textColorSecondary, fontSize: '20px' },
+ },
+ '&::after': {
+ position: 'absolute',
+ top: '8px',
+ right: '0',
+ width: '1px',
+ height: '40px',
+ backgroundColor: token.borderColorSplit,
+ content: "''",
+ },
+ '&:last-child': {
+ paddingRight: '0',
+ '&::after': { display: 'none' },
+ },
+ },
+ },
+ members: {
+ a: {
+ display: 'block',
+ height: '24px',
+ margin: '12px 0',
+ color: token.textColor,
+ transition: 'all 0.3s',
+ 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',
+ background: token.bg,
+ content: "'...'",
+ },
+ '&::after': {
+ position: 'absolute',
+ right: '14px',
+ width: '1em',
+ height: '1em',
+ marginTop: '0.2em',
+ background: 'white',
+ content: "''",
+ },
+ member: {
+ marginLeft: '12px',
+ fontSize: token.fontSizeBase,
+ lineHeight: '24px',
+ verticalAlign: 'top',
+ },
+ '&:hover': {
+ color: token.colorPrimary,
+ },
+ },
+ },
+ projectList: {
+ ':global': {
+ 'ant-card-meta-description': {
+ height: '44px',
+ overflow: 'hidden',
+ color: token.textColorSecondary,
+ lineHeight: '22px',
+ },
+ },
+ cardTitle: {
+ fontSize: '0',
+ a: {
+ display: 'inline-block',
+ height: '24px',
+ marginLeft: '12px',
+ color: token.headingColor,
+ fontSize: token.fontSizeBase,
+ lineHeight: '24px',
+ verticalAlign: 'top',
+ '&:hover': { color: token.colorPrimary },
+ },
+ },
+ projectGrid: { width: '33.33%' },
+ projectItemContent: {
+ 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',
+ background: token.bg,
+ content: "'...'",
+ },
+ '&::after': {
+ position: 'absolute',
+ right: '14px',
+ width: '1em',
+ height: '1em',
+ marginTop: '0.2em',
+ background: 'white',
+ content: "''",
+ },
+ a: {
+ display: 'inline-block',
+ flex: '1 1 0',
+ color: token.textColorSecondary,
+ 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',
+ background: token.bg,
+ content: "'...'",
+ },
+ '&::after': {
+ position: 'absolute',
+ right: '14px',
+ width: '1em',
+ height: '1em',
+ marginTop: '0.2em',
+ background: 'white',
+ content: "''",
+ },
+ '&:hover': { color: token.colorPrimary },
+ },
+ datetime: {
+ flex: '0 0 auto',
+ float: 'right',
+ color: token.disabledColor,
+ },
+ },
+ },
+ datetime: {
+ color: token.disabledColor,
+ },
+ [`@mediascreen and (max-width: token.screen-xl) and (min-width: token.screen-lg)`]: {
+ activeCard: { marginBottom: '24px' },
+ members: { marginBottom: '0' },
+ extraContent: {
+ marginLeft: '-44px',
+ statItem: {
+ padding: '0 16px',
+ },
+ },
+ },
+ [`@mediascreen and (max-width: token.screen-lg)`]: {
+ activeCard: { marginBottom: '24px' },
+ members: { marginBottom: '0' },
+ extraContent: {
+ float: 'none',
+ marginRight: '0',
+ statItem: {
+ padding: '0 16px',
+ textAlign: 'left',
+ '&::after': { display: 'none' },
+ },
+ },
+ },
+ [`@mediascreen and (max-width: token.screen-md)`]: {
+ extraContent: { marginLeft: '-16px' },
+ projectList: {
+ projectGrid: {
+ width: '50%',
+ },
+ },
+ },
+ [`@mediascreen and (max-width: token.screen-sm)`]: {
+ pageHeaderContent: {
+ display: 'block',
+ content: {
+ marginLeft: '0',
+ },
+ },
+ extraContent: {
+ statItem: {
+ float: 'none',
+ },
+ },
+ },
+ [`@mediascreen and (max-width: token.screen-xs)`]: {
+ projectList: {
+ projectGrid: {
+ width: '100%',
+ },
+ },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/editor/flow/components/EditorContextMenu/FlowContextMenu.tsx b/src/pages/editor/flow/components/EditorContextMenu/FlowContextMenu.tsx
index c5cc4e50..cd0df025 100644
--- a/src/pages/editor/flow/components/EditorContextMenu/FlowContextMenu.tsx
+++ b/src/pages/editor/flow/components/EditorContextMenu/FlowContextMenu.tsx
@@ -1,7 +1,7 @@
import { CanvasMenu, ContextMenu, EdgeMenu, GroupMenu, MultiMenu, NodeMenu } from 'gg-editor';
import MenuItem from './MenuItem';
-import styles from './index.less';
+import styles from './index.style.ts';
const FlowContextMenu = () => (
diff --git a/src/pages/editor/flow/components/EditorContextMenu/MenuItem.tsx b/src/pages/editor/flow/components/EditorContextMenu/MenuItem.tsx
index 297967ab..b52a9b49 100644
--- a/src/pages/editor/flow/components/EditorContextMenu/MenuItem.tsx
+++ b/src/pages/editor/flow/components/EditorContextMenu/MenuItem.tsx
@@ -1,7 +1,7 @@
import { Command } from 'gg-editor';
import React from 'react';
import IconFont from '../../common/IconFont';
-import styles from './index.less';
+import styles from './index.style.ts';
const upperFirst = (str: string) =>
str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
diff --git a/src/pages/editor/flow/components/EditorContextMenu/MindContextMenu.tsx b/src/pages/editor/flow/components/EditorContextMenu/MindContextMenu.tsx
index 5a8b4076..ac293932 100644
--- a/src/pages/editor/flow/components/EditorContextMenu/MindContextMenu.tsx
+++ b/src/pages/editor/flow/components/EditorContextMenu/MindContextMenu.tsx
@@ -1,7 +1,7 @@
import { CanvasMenu, ContextMenu, NodeMenu } from 'gg-editor';
import MenuItem from './MenuItem';
-import styles from './index.less';
+import styles from './index.style.ts';
const MindContextMenu = () => (
diff --git a/src/pages/editor/flow/components/EditorContextMenu/index.less b/src/pages/editor/flow/components/EditorContextMenu/index.less
index 39cbd2e9..0b5d81a1 100644
--- a/src/pages/editor/flow/components/EditorContextMenu/index.less
+++ b/src/pages/editor/flow/components/EditorContextMenu/index.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.contextMenu {
display: none;
diff --git a/src/pages/editor/flow/components/EditorContextMenu/index.style.ts b/src/pages/editor/flow/components/EditorContextMenu/index.style.ts
new file mode 100644
index 00000000..9b33397c
--- /dev/null
+++ b/src/pages/editor/flow/components/EditorContextMenu/index.style.ts
@@ -0,0 +1,40 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ contextMenu: {
+ display: 'none',
+ overflow: 'hidden',
+ background: token.componentBackground,
+ borderRadius: '4px',
+ boxShadow: token.boxShadowBase,
+ item: {
+ display: 'flex',
+ alignItems: 'center',
+ padding: '5px 12px',
+ cursor: 'pointer',
+ transition: 'all 0.3s',
+ userSelect: 'none',
+ '&:hover': {
+ background: token.selectItemSelectedBg,
+ },
+ spananticon: {
+ marginRight: '8px',
+ },
+ },
+ ':global': {
+ disable: {
+ ':local': {
+ item: {
+ color: token.disabledColor,
+ cursor: 'auto',
+ '&:hover': { background: token.itemHoverBg },
+ },
+ },
+ },
+ },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/editor/flow/components/EditorDetailPanel/FlowDetailPanel.tsx b/src/pages/editor/flow/components/EditorDetailPanel/FlowDetailPanel.tsx
index bb7035c9..09118663 100644
--- a/src/pages/editor/flow/components/EditorDetailPanel/FlowDetailPanel.tsx
+++ b/src/pages/editor/flow/components/EditorDetailPanel/FlowDetailPanel.tsx
@@ -2,7 +2,7 @@ import { CanvasPanel, DetailPanel, EdgePanel, GroupPanel, MultiPanel, NodePanel
import { Card } from 'antd';
import DetailForm from './DetailForm';
-import styles from './index.less';
+import styles from './index.style.ts';
const FlowDetailPanel = () => (
diff --git a/src/pages/editor/flow/components/EditorDetailPanel/MindDetailPanel.tsx b/src/pages/editor/flow/components/EditorDetailPanel/MindDetailPanel.tsx
index dceaf36e..19a5dca1 100644
--- a/src/pages/editor/flow/components/EditorDetailPanel/MindDetailPanel.tsx
+++ b/src/pages/editor/flow/components/EditorDetailPanel/MindDetailPanel.tsx
@@ -2,7 +2,7 @@ import { CanvasPanel, DetailPanel, NodePanel } from 'gg-editor';
import { Card } from 'antd';
import DetailForm from './DetailForm';
-import styles from './index.less';
+import styles from './index.style.ts';
const MindDetailPanel = () => (
diff --git a/src/pages/editor/flow/components/EditorDetailPanel/index.less b/src/pages/editor/flow/components/EditorDetailPanel/index.less
index 0b2c564b..a19cc1e4 100644
--- a/src/pages/editor/flow/components/EditorDetailPanel/index.less
+++ b/src/pages/editor/flow/components/EditorDetailPanel/index.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.detailPanel {
flex: 1;
diff --git a/src/pages/editor/flow/components/EditorDetailPanel/index.style.ts b/src/pages/editor/flow/components/EditorDetailPanel/index.style.ts
new file mode 100644
index 00000000..601937dc
--- /dev/null
+++ b/src/pages/editor/flow/components/EditorDetailPanel/index.style.ts
@@ -0,0 +1,12 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ detailPanel: {
+ flex: '1',
+ backgroundColor: token.componentBackground,
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/editor/flow/components/EditorItemPanel/FlowItemPanel.tsx b/src/pages/editor/flow/components/EditorItemPanel/FlowItemPanel.tsx
index c7dcbe60..31ae103b 100644
--- a/src/pages/editor/flow/components/EditorItemPanel/FlowItemPanel.tsx
+++ b/src/pages/editor/flow/components/EditorItemPanel/FlowItemPanel.tsx
@@ -1,7 +1,7 @@
import { Item, ItemPanel } from 'gg-editor';
import { Card } from 'antd';
-import styles from './index.less';
+import styles from './index.style.ts';
const FlowItemPanel = () => (
diff --git a/src/pages/editor/flow/components/EditorItemPanel/KoniItemPanel.tsx b/src/pages/editor/flow/components/EditorItemPanel/KoniItemPanel.tsx
index 3901d292..6286b168 100644
--- a/src/pages/editor/flow/components/EditorItemPanel/KoniItemPanel.tsx
+++ b/src/pages/editor/flow/components/EditorItemPanel/KoniItemPanel.tsx
@@ -1,7 +1,7 @@
import { Item, ItemPanel } from 'gg-editor';
import { Card } from 'antd';
-import styles from './index.less';
+import styles from './index.style.ts';
const KoniItemPanel = () => (
diff --git a/src/pages/editor/flow/components/EditorItemPanel/index.less b/src/pages/editor/flow/components/EditorItemPanel/index.less
index b594a66b..a794394e 100644
--- a/src/pages/editor/flow/components/EditorItemPanel/index.less
+++ b/src/pages/editor/flow/components/EditorItemPanel/index.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.itemPanel {
flex: 1;
diff --git a/src/pages/editor/flow/components/EditorItemPanel/index.style.ts b/src/pages/editor/flow/components/EditorItemPanel/index.style.ts
new file mode 100644
index 00000000..a614a382
--- /dev/null
+++ b/src/pages/editor/flow/components/EditorItemPanel/index.style.ts
@@ -0,0 +1,22 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ itemPanel: {
+ flex: '1',
+ ':global': {
+ 'ant-card': {
+ height: '100%',
+ },
+ 'ant-card-body': {
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ '> div': { marginBottom: '16px' },
+ },
+ },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/editor/flow/components/EditorToolbar/FlowToolbar.tsx b/src/pages/editor/flow/components/EditorToolbar/FlowToolbar.tsx
index 90494876..c7154330 100644
--- a/src/pages/editor/flow/components/EditorToolbar/FlowToolbar.tsx
+++ b/src/pages/editor/flow/components/EditorToolbar/FlowToolbar.tsx
@@ -1,7 +1,7 @@
import { Divider } from 'antd';
import { Toolbar } from 'gg-editor';
import ToolbarButton from './ToolbarButton';
-import styles from './index.less';
+import styles from './index.style.ts';
const FlowToolbar = () => (
diff --git a/src/pages/editor/flow/components/EditorToolbar/MindToolbar.tsx b/src/pages/editor/flow/components/EditorToolbar/MindToolbar.tsx
index 23761093..cf761938 100644
--- a/src/pages/editor/flow/components/EditorToolbar/MindToolbar.tsx
+++ b/src/pages/editor/flow/components/EditorToolbar/MindToolbar.tsx
@@ -1,7 +1,7 @@
import { Divider } from 'antd';
import { Toolbar } from 'gg-editor';
import ToolbarButton from './ToolbarButton';
-import styles from './index.less';
+import styles from './index.style.ts';
const FlowToolbar = () => (
diff --git a/src/pages/editor/flow/components/EditorToolbar/ToolbarButton.tsx b/src/pages/editor/flow/components/EditorToolbar/ToolbarButton.tsx
index 94f9e9c6..8deb15de 100644
--- a/src/pages/editor/flow/components/EditorToolbar/ToolbarButton.tsx
+++ b/src/pages/editor/flow/components/EditorToolbar/ToolbarButton.tsx
@@ -2,7 +2,7 @@ import { Command } from 'gg-editor';
import React from 'react';
import { Tooltip } from 'antd';
import IconFont from '../../common/IconFont';
-import styles from './index.less';
+import styles from './index.style.ts';
const upperFirst = (str: string) =>
str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
diff --git a/src/pages/editor/flow/components/EditorToolbar/index.less b/src/pages/editor/flow/components/EditorToolbar/index.less
index d9e98d1f..8664603c 100644
--- a/src/pages/editor/flow/components/EditorToolbar/index.less
+++ b/src/pages/editor/flow/components/EditorToolbar/index.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.toolbar {
display: flex;
diff --git a/src/pages/editor/flow/components/EditorToolbar/index.style.ts b/src/pages/editor/flow/components/EditorToolbar/index.style.ts
new file mode 100644
index 00000000..1c81f00a
--- /dev/null
+++ b/src/pages/editor/flow/components/EditorToolbar/index.style.ts
@@ -0,0 +1,37 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ toolbar: {
+ display: 'flex',
+ alignItems: 'center',
+ ':global': {
+ 'command .anticon': {
+ display: 'inline-block',
+ width: '27px',
+ height: '27px',
+ margin: '0 6px',
+ paddingTop: '6px',
+ textAlign: 'center',
+ cursor: 'pointer',
+ '&:hover': { border: '1px solid @item-active-bg' },
+ },
+ 'disable .anticon': {
+ color: token.textColorSecondary,
+ cursor: 'auto',
+ '&:hover': { border: '1px solid @border-color-base' },
+ },
+ },
+ },
+ tooltip: {
+ ':global': {
+ 'ant-tooltip-inner': {
+ fontSize: '12px',
+ borderRadius: '0',
+ },
+ },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/editor/flow/index.less b/src/pages/editor/flow/index.less
index 92dac57d..c28fddfe 100644
--- a/src/pages/editor/flow/index.less
+++ b/src/pages/editor/flow/index.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.editor {
display: flex;
diff --git a/src/pages/editor/flow/index.style.ts b/src/pages/editor/flow/index.style.ts
new file mode 100644
index 00000000..6f8ebdab
--- /dev/null
+++ b/src/pages/editor/flow/index.style.ts
@@ -0,0 +1,41 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ editor: {
+ display: 'flex',
+ flex: '1',
+ flexDirection: 'column',
+ width: '100%',
+ height: 'calc(100vh - 250px)',
+ background: token.componentBackground,
+ },
+ editorHd: {
+ padding: '8px',
+ background: token.descriptionsBg,
+ border: '1px solid @item-active-bg',
+ },
+ editorBd: {
+ flex: '1',
+ },
+ 'editorSidebar,.editorContent': {
+ display: 'flex',
+ flexDirection: 'column',
+ },
+ editorSidebar: {
+ background: token.descriptionsBg,
+ ':global': {
+ 'g6-editor-minimap-container': {
+ background: 'none',
+ },
+ },
+ '&:first-child': { borderRight: '1px solid @item-active-bg' },
+ '&:last-child': { borderLeft: '1px solid @item-active-bg' },
+ },
+ 'flow,.mind,.koni': {
+ flex: '1',
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/editor/flow/index.tsx b/src/pages/editor/flow/index.tsx
index b8da7bb3..86501321 100644
--- a/src/pages/editor/flow/index.tsx
+++ b/src/pages/editor/flow/index.tsx
@@ -1,13 +1,13 @@
import { Col, Row } from 'antd';
import GGEditor, { Flow } from 'gg-editor';
-import { PageContainer } from '@ant-design/pro-layout';
+import { PageContainer } from '@ant-design/pro-components';
import EditorMinimap from './components/EditorMinimap';
import { FlowContextMenu } from './components/EditorContextMenu';
import { FlowDetailPanel } from './components/EditorDetailPanel';
import { FlowItemPanel } from './components/EditorItemPanel';
import { FlowToolbar } from './components/EditorToolbar';
-import styles from './index.less';
+import styles from './index.style.ts';
GGEditor.setTrackable(false);
diff --git a/src/pages/editor/koni/components/EditorContextMenu/FlowContextMenu.tsx b/src/pages/editor/koni/components/EditorContextMenu/FlowContextMenu.tsx
index c5cc4e50..cd0df025 100644
--- a/src/pages/editor/koni/components/EditorContextMenu/FlowContextMenu.tsx
+++ b/src/pages/editor/koni/components/EditorContextMenu/FlowContextMenu.tsx
@@ -1,7 +1,7 @@
import { CanvasMenu, ContextMenu, EdgeMenu, GroupMenu, MultiMenu, NodeMenu } from 'gg-editor';
import MenuItem from './MenuItem';
-import styles from './index.less';
+import styles from './index.style.ts';
const FlowContextMenu = () => (
diff --git a/src/pages/editor/koni/components/EditorContextMenu/MenuItem.tsx b/src/pages/editor/koni/components/EditorContextMenu/MenuItem.tsx
index 297967ab..b52a9b49 100644
--- a/src/pages/editor/koni/components/EditorContextMenu/MenuItem.tsx
+++ b/src/pages/editor/koni/components/EditorContextMenu/MenuItem.tsx
@@ -1,7 +1,7 @@
import { Command } from 'gg-editor';
import React from 'react';
import IconFont from '../../common/IconFont';
-import styles from './index.less';
+import styles from './index.style.ts';
const upperFirst = (str: string) =>
str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
diff --git a/src/pages/editor/koni/components/EditorContextMenu/MindContextMenu.tsx b/src/pages/editor/koni/components/EditorContextMenu/MindContextMenu.tsx
index 5a8b4076..ac293932 100644
--- a/src/pages/editor/koni/components/EditorContextMenu/MindContextMenu.tsx
+++ b/src/pages/editor/koni/components/EditorContextMenu/MindContextMenu.tsx
@@ -1,7 +1,7 @@
import { CanvasMenu, ContextMenu, NodeMenu } from 'gg-editor';
import MenuItem from './MenuItem';
-import styles from './index.less';
+import styles from './index.style.ts';
const MindContextMenu = () => (
diff --git a/src/pages/editor/koni/components/EditorContextMenu/index.less b/src/pages/editor/koni/components/EditorContextMenu/index.less
index 25d68b2c..780b7479 100644
--- a/src/pages/editor/koni/components/EditorContextMenu/index.less
+++ b/src/pages/editor/koni/components/EditorContextMenu/index.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.contextMenu {
display: none;
diff --git a/src/pages/editor/koni/components/EditorContextMenu/index.style.ts b/src/pages/editor/koni/components/EditorContextMenu/index.style.ts
new file mode 100644
index 00000000..4632580b
--- /dev/null
+++ b/src/pages/editor/koni/components/EditorContextMenu/index.style.ts
@@ -0,0 +1,40 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ contextMenu: {
+ display: 'none',
+ overflow: 'hidden',
+ background: token.componentBackground,
+ borderRadius: '4px',
+ boxShadow: token.boxShadowBase,
+ item: {
+ display: 'flex',
+ alignItems: 'center',
+ padding: '5px 12px',
+ cursor: 'pointer',
+ transition: 'all 0.3s',
+ userSelect: 'none',
+ '&:hover': {
+ background: token.selectItemSelectedBg,
+ },
+ anticon: {
+ marginRight: '8px',
+ },
+ },
+ ':global': {
+ disable: {
+ ':local': {
+ item: {
+ color: token.disabledColor,
+ cursor: 'auto',
+ '&:hover': { background: token.itemHoverBg },
+ },
+ },
+ },
+ },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/editor/koni/components/EditorDetailPanel/FlowDetailPanel.tsx b/src/pages/editor/koni/components/EditorDetailPanel/FlowDetailPanel.tsx
index bb7035c9..09118663 100644
--- a/src/pages/editor/koni/components/EditorDetailPanel/FlowDetailPanel.tsx
+++ b/src/pages/editor/koni/components/EditorDetailPanel/FlowDetailPanel.tsx
@@ -2,7 +2,7 @@ import { CanvasPanel, DetailPanel, EdgePanel, GroupPanel, MultiPanel, NodePanel
import { Card } from 'antd';
import DetailForm from './DetailForm';
-import styles from './index.less';
+import styles from './index.style.ts';
const FlowDetailPanel = () => (
diff --git a/src/pages/editor/koni/components/EditorDetailPanel/MindDetailPanel.tsx b/src/pages/editor/koni/components/EditorDetailPanel/MindDetailPanel.tsx
index dceaf36e..19a5dca1 100644
--- a/src/pages/editor/koni/components/EditorDetailPanel/MindDetailPanel.tsx
+++ b/src/pages/editor/koni/components/EditorDetailPanel/MindDetailPanel.tsx
@@ -2,7 +2,7 @@ import { CanvasPanel, DetailPanel, NodePanel } from 'gg-editor';
import { Card } from 'antd';
import DetailForm from './DetailForm';
-import styles from './index.less';
+import styles from './index.style.ts';
const MindDetailPanel = () => (
diff --git a/src/pages/editor/koni/components/EditorDetailPanel/index.less b/src/pages/editor/koni/components/EditorDetailPanel/index.less
index 0b2c564b..a19cc1e4 100644
--- a/src/pages/editor/koni/components/EditorDetailPanel/index.less
+++ b/src/pages/editor/koni/components/EditorDetailPanel/index.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.detailPanel {
flex: 1;
diff --git a/src/pages/editor/koni/components/EditorDetailPanel/index.style.ts b/src/pages/editor/koni/components/EditorDetailPanel/index.style.ts
new file mode 100644
index 00000000..601937dc
--- /dev/null
+++ b/src/pages/editor/koni/components/EditorDetailPanel/index.style.ts
@@ -0,0 +1,12 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ detailPanel: {
+ flex: '1',
+ backgroundColor: token.componentBackground,
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/editor/koni/components/EditorItemPanel/FlowItemPanel.tsx b/src/pages/editor/koni/components/EditorItemPanel/FlowItemPanel.tsx
index c7dcbe60..31ae103b 100644
--- a/src/pages/editor/koni/components/EditorItemPanel/FlowItemPanel.tsx
+++ b/src/pages/editor/koni/components/EditorItemPanel/FlowItemPanel.tsx
@@ -1,7 +1,7 @@
import { Item, ItemPanel } from 'gg-editor';
import { Card } from 'antd';
-import styles from './index.less';
+import styles from './index.style.ts';
const FlowItemPanel = () => (
diff --git a/src/pages/editor/koni/components/EditorItemPanel/KoniItemPanel.tsx b/src/pages/editor/koni/components/EditorItemPanel/KoniItemPanel.tsx
index 3901d292..6286b168 100644
--- a/src/pages/editor/koni/components/EditorItemPanel/KoniItemPanel.tsx
+++ b/src/pages/editor/koni/components/EditorItemPanel/KoniItemPanel.tsx
@@ -1,7 +1,7 @@
import { Item, ItemPanel } from 'gg-editor';
import { Card } from 'antd';
-import styles from './index.less';
+import styles from './index.style.ts';
const KoniItemPanel = () => (
diff --git a/src/pages/editor/koni/components/EditorItemPanel/index.less b/src/pages/editor/koni/components/EditorItemPanel/index.less
index b594a66b..a794394e 100644
--- a/src/pages/editor/koni/components/EditorItemPanel/index.less
+++ b/src/pages/editor/koni/components/EditorItemPanel/index.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.itemPanel {
flex: 1;
diff --git a/src/pages/editor/koni/components/EditorItemPanel/index.style.ts b/src/pages/editor/koni/components/EditorItemPanel/index.style.ts
new file mode 100644
index 00000000..a614a382
--- /dev/null
+++ b/src/pages/editor/koni/components/EditorItemPanel/index.style.ts
@@ -0,0 +1,22 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ itemPanel: {
+ flex: '1',
+ ':global': {
+ 'ant-card': {
+ height: '100%',
+ },
+ 'ant-card-body': {
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ '> div': { marginBottom: '16px' },
+ },
+ },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/editor/koni/components/EditorToolbar/FlowToolbar.tsx b/src/pages/editor/koni/components/EditorToolbar/FlowToolbar.tsx
index 90494876..c7154330 100644
--- a/src/pages/editor/koni/components/EditorToolbar/FlowToolbar.tsx
+++ b/src/pages/editor/koni/components/EditorToolbar/FlowToolbar.tsx
@@ -1,7 +1,7 @@
import { Divider } from 'antd';
import { Toolbar } from 'gg-editor';
import ToolbarButton from './ToolbarButton';
-import styles from './index.less';
+import styles from './index.style.ts';
const FlowToolbar = () => (
diff --git a/src/pages/editor/koni/components/EditorToolbar/MindToolbar.tsx b/src/pages/editor/koni/components/EditorToolbar/MindToolbar.tsx
index 23761093..cf761938 100644
--- a/src/pages/editor/koni/components/EditorToolbar/MindToolbar.tsx
+++ b/src/pages/editor/koni/components/EditorToolbar/MindToolbar.tsx
@@ -1,7 +1,7 @@
import { Divider } from 'antd';
import { Toolbar } from 'gg-editor';
import ToolbarButton from './ToolbarButton';
-import styles from './index.less';
+import styles from './index.style.ts';
const FlowToolbar = () => (
diff --git a/src/pages/editor/koni/components/EditorToolbar/ToolbarButton.tsx b/src/pages/editor/koni/components/EditorToolbar/ToolbarButton.tsx
index 94f9e9c6..8deb15de 100644
--- a/src/pages/editor/koni/components/EditorToolbar/ToolbarButton.tsx
+++ b/src/pages/editor/koni/components/EditorToolbar/ToolbarButton.tsx
@@ -2,7 +2,7 @@ import { Command } from 'gg-editor';
import React from 'react';
import { Tooltip } from 'antd';
import IconFont from '../../common/IconFont';
-import styles from './index.less';
+import styles from './index.style.ts';
const upperFirst = (str: string) =>
str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
diff --git a/src/pages/editor/koni/components/EditorToolbar/index.less b/src/pages/editor/koni/components/EditorToolbar/index.less
index 4edd156f..3ae05e3c 100644
--- a/src/pages/editor/koni/components/EditorToolbar/index.less
+++ b/src/pages/editor/koni/components/EditorToolbar/index.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.toolbar {
display: flex;
diff --git a/src/pages/editor/koni/components/EditorToolbar/index.style.ts b/src/pages/editor/koni/components/EditorToolbar/index.style.ts
new file mode 100644
index 00000000..1c81f00a
--- /dev/null
+++ b/src/pages/editor/koni/components/EditorToolbar/index.style.ts
@@ -0,0 +1,37 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ toolbar: {
+ display: 'flex',
+ alignItems: 'center',
+ ':global': {
+ 'command .anticon': {
+ display: 'inline-block',
+ width: '27px',
+ height: '27px',
+ margin: '0 6px',
+ paddingTop: '6px',
+ textAlign: 'center',
+ cursor: 'pointer',
+ '&:hover': { border: '1px solid @item-active-bg' },
+ },
+ 'disable .anticon': {
+ color: token.textColorSecondary,
+ cursor: 'auto',
+ '&:hover': { border: '1px solid @border-color-base' },
+ },
+ },
+ },
+ tooltip: {
+ ':global': {
+ 'ant-tooltip-inner': {
+ fontSize: '12px',
+ borderRadius: '0',
+ },
+ },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/editor/koni/index.less b/src/pages/editor/koni/index.less
index 42923fcb..0e7d315b 100644
--- a/src/pages/editor/koni/index.less
+++ b/src/pages/editor/koni/index.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.editor {
display: flex;
diff --git a/src/pages/editor/koni/index.style.ts b/src/pages/editor/koni/index.style.ts
new file mode 100644
index 00000000..b7973789
--- /dev/null
+++ b/src/pages/editor/koni/index.style.ts
@@ -0,0 +1,48 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ editor: {
+ display: 'flex',
+ flex: '1',
+ flexDirection: 'column',
+ width: '100%',
+ height: 'calc(100vh - 250px)',
+ background: token.descriptionsBg,
+ },
+ editorHd: {
+ padding: '8px',
+ background: token.descriptionsBg,
+ border: '1px solid @item-active-bg',
+ },
+ editorBd: {
+ flex: '1',
+ },
+ 'editorSidebar,.editorContent': {
+ display: 'flex',
+ flexDirection: 'column',
+ },
+ editorContent: {
+ ':global': {
+ 'graph-container canvas': {
+ verticalAlign: 'middle',
+ },
+ },
+ },
+ editorSidebar: {
+ background: token.descriptionsBg,
+ ':global': {
+ 'g6-editor-minimap-container': {
+ background: 'none',
+ },
+ },
+ '&:first-child': { borderRight: '1px solid @item-active-bg' },
+ '&:last-child': { borderLeft: '1px solid @item-active-bg' },
+ },
+ 'flow,.mind,.koni': {
+ flex: '1',
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/editor/koni/index.tsx b/src/pages/editor/koni/index.tsx
index f94da640..bcafbbb6 100644
--- a/src/pages/editor/koni/index.tsx
+++ b/src/pages/editor/koni/index.tsx
@@ -1,13 +1,13 @@
import { Col, Row } from 'antd';
import GGEditor, { Koni } from 'gg-editor';
-import { PageContainer } from '@ant-design/pro-layout';
+import { PageContainer } from '@ant-design/pro-components';
import EditorMinimap from './components/EditorMinimap';
import { KoniContextMenu } from './components/EditorContextMenu';
import { KoniDetailPanel } from './components/EditorDetailPanel';
import { KoniItemPanel } from './components/EditorItemPanel';
import { KoniToolbar } from './components/EditorToolbar';
-import styles from './index.less';
+import styles from './index.style.ts';
GGEditor.setTrackable(false);
diff --git a/src/pages/editor/mind/components/EditorContextMenu/FlowContextMenu.tsx b/src/pages/editor/mind/components/EditorContextMenu/FlowContextMenu.tsx
index c5cc4e50..cd0df025 100644
--- a/src/pages/editor/mind/components/EditorContextMenu/FlowContextMenu.tsx
+++ b/src/pages/editor/mind/components/EditorContextMenu/FlowContextMenu.tsx
@@ -1,7 +1,7 @@
import { CanvasMenu, ContextMenu, EdgeMenu, GroupMenu, MultiMenu, NodeMenu } from 'gg-editor';
import MenuItem from './MenuItem';
-import styles from './index.less';
+import styles from './index.style.ts';
const FlowContextMenu = () => (
diff --git a/src/pages/editor/mind/components/EditorContextMenu/MenuItem.tsx b/src/pages/editor/mind/components/EditorContextMenu/MenuItem.tsx
index 297967ab..b52a9b49 100644
--- a/src/pages/editor/mind/components/EditorContextMenu/MenuItem.tsx
+++ b/src/pages/editor/mind/components/EditorContextMenu/MenuItem.tsx
@@ -1,7 +1,7 @@
import { Command } from 'gg-editor';
import React from 'react';
import IconFont from '../../common/IconFont';
-import styles from './index.less';
+import styles from './index.style.ts';
const upperFirst = (str: string) =>
str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
diff --git a/src/pages/editor/mind/components/EditorContextMenu/MindContextMenu.tsx b/src/pages/editor/mind/components/EditorContextMenu/MindContextMenu.tsx
index 5a8b4076..ac293932 100644
--- a/src/pages/editor/mind/components/EditorContextMenu/MindContextMenu.tsx
+++ b/src/pages/editor/mind/components/EditorContextMenu/MindContextMenu.tsx
@@ -1,7 +1,7 @@
import { CanvasMenu, ContextMenu, NodeMenu } from 'gg-editor';
import MenuItem from './MenuItem';
-import styles from './index.less';
+import styles from './index.style.ts';
const MindContextMenu = () => (
diff --git a/src/pages/editor/mind/components/EditorContextMenu/index.less b/src/pages/editor/mind/components/EditorContextMenu/index.less
index 25d68b2c..780b7479 100644
--- a/src/pages/editor/mind/components/EditorContextMenu/index.less
+++ b/src/pages/editor/mind/components/EditorContextMenu/index.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.contextMenu {
display: none;
diff --git a/src/pages/editor/mind/components/EditorContextMenu/index.style.ts b/src/pages/editor/mind/components/EditorContextMenu/index.style.ts
new file mode 100644
index 00000000..4632580b
--- /dev/null
+++ b/src/pages/editor/mind/components/EditorContextMenu/index.style.ts
@@ -0,0 +1,40 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ contextMenu: {
+ display: 'none',
+ overflow: 'hidden',
+ background: token.componentBackground,
+ borderRadius: '4px',
+ boxShadow: token.boxShadowBase,
+ item: {
+ display: 'flex',
+ alignItems: 'center',
+ padding: '5px 12px',
+ cursor: 'pointer',
+ transition: 'all 0.3s',
+ userSelect: 'none',
+ '&:hover': {
+ background: token.selectItemSelectedBg,
+ },
+ anticon: {
+ marginRight: '8px',
+ },
+ },
+ ':global': {
+ disable: {
+ ':local': {
+ item: {
+ color: token.disabledColor,
+ cursor: 'auto',
+ '&:hover': { background: token.itemHoverBg },
+ },
+ },
+ },
+ },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/editor/mind/components/EditorDetailPanel/FlowDetailPanel.tsx b/src/pages/editor/mind/components/EditorDetailPanel/FlowDetailPanel.tsx
index bb7035c9..09118663 100644
--- a/src/pages/editor/mind/components/EditorDetailPanel/FlowDetailPanel.tsx
+++ b/src/pages/editor/mind/components/EditorDetailPanel/FlowDetailPanel.tsx
@@ -2,7 +2,7 @@ import { CanvasPanel, DetailPanel, EdgePanel, GroupPanel, MultiPanel, NodePanel
import { Card } from 'antd';
import DetailForm from './DetailForm';
-import styles from './index.less';
+import styles from './index.style.ts';
const FlowDetailPanel = () => (
diff --git a/src/pages/editor/mind/components/EditorDetailPanel/MindDetailPanel.tsx b/src/pages/editor/mind/components/EditorDetailPanel/MindDetailPanel.tsx
index dceaf36e..19a5dca1 100644
--- a/src/pages/editor/mind/components/EditorDetailPanel/MindDetailPanel.tsx
+++ b/src/pages/editor/mind/components/EditorDetailPanel/MindDetailPanel.tsx
@@ -2,7 +2,7 @@ import { CanvasPanel, DetailPanel, NodePanel } from 'gg-editor';
import { Card } from 'antd';
import DetailForm from './DetailForm';
-import styles from './index.less';
+import styles from './index.style.ts';
const MindDetailPanel = () => (
diff --git a/src/pages/editor/mind/components/EditorDetailPanel/index.less b/src/pages/editor/mind/components/EditorDetailPanel/index.less
index 0b2c564b..a19cc1e4 100644
--- a/src/pages/editor/mind/components/EditorDetailPanel/index.less
+++ b/src/pages/editor/mind/components/EditorDetailPanel/index.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.detailPanel {
flex: 1;
diff --git a/src/pages/editor/mind/components/EditorDetailPanel/index.style.ts b/src/pages/editor/mind/components/EditorDetailPanel/index.style.ts
new file mode 100644
index 00000000..601937dc
--- /dev/null
+++ b/src/pages/editor/mind/components/EditorDetailPanel/index.style.ts
@@ -0,0 +1,12 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ detailPanel: {
+ flex: '1',
+ backgroundColor: token.componentBackground,
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/editor/mind/components/EditorItemPanel/FlowItemPanel.tsx b/src/pages/editor/mind/components/EditorItemPanel/FlowItemPanel.tsx
index c7dcbe60..31ae103b 100644
--- a/src/pages/editor/mind/components/EditorItemPanel/FlowItemPanel.tsx
+++ b/src/pages/editor/mind/components/EditorItemPanel/FlowItemPanel.tsx
@@ -1,7 +1,7 @@
import { Item, ItemPanel } from 'gg-editor';
import { Card } from 'antd';
-import styles from './index.less';
+import styles from './index.style.ts';
const FlowItemPanel = () => (
diff --git a/src/pages/editor/mind/components/EditorItemPanel/KoniItemPanel.tsx b/src/pages/editor/mind/components/EditorItemPanel/KoniItemPanel.tsx
index 3901d292..6286b168 100644
--- a/src/pages/editor/mind/components/EditorItemPanel/KoniItemPanel.tsx
+++ b/src/pages/editor/mind/components/EditorItemPanel/KoniItemPanel.tsx
@@ -1,7 +1,7 @@
import { Item, ItemPanel } from 'gg-editor';
import { Card } from 'antd';
-import styles from './index.less';
+import styles from './index.style.ts';
const KoniItemPanel = () => (
diff --git a/src/pages/editor/mind/components/EditorItemPanel/index.less b/src/pages/editor/mind/components/EditorItemPanel/index.less
index b594a66b..a794394e 100644
--- a/src/pages/editor/mind/components/EditorItemPanel/index.less
+++ b/src/pages/editor/mind/components/EditorItemPanel/index.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.itemPanel {
flex: 1;
diff --git a/src/pages/editor/mind/components/EditorItemPanel/index.style.ts b/src/pages/editor/mind/components/EditorItemPanel/index.style.ts
new file mode 100644
index 00000000..a614a382
--- /dev/null
+++ b/src/pages/editor/mind/components/EditorItemPanel/index.style.ts
@@ -0,0 +1,22 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ itemPanel: {
+ flex: '1',
+ ':global': {
+ 'ant-card': {
+ height: '100%',
+ },
+ 'ant-card-body': {
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ '> div': { marginBottom: '16px' },
+ },
+ },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/editor/mind/components/EditorToolbar/FlowToolbar.tsx b/src/pages/editor/mind/components/EditorToolbar/FlowToolbar.tsx
index 90494876..c7154330 100644
--- a/src/pages/editor/mind/components/EditorToolbar/FlowToolbar.tsx
+++ b/src/pages/editor/mind/components/EditorToolbar/FlowToolbar.tsx
@@ -1,7 +1,7 @@
import { Divider } from 'antd';
import { Toolbar } from 'gg-editor';
import ToolbarButton from './ToolbarButton';
-import styles from './index.less';
+import styles from './index.style.ts';
const FlowToolbar = () => (
diff --git a/src/pages/editor/mind/components/EditorToolbar/MindToolbar.tsx b/src/pages/editor/mind/components/EditorToolbar/MindToolbar.tsx
index 23761093..cf761938 100644
--- a/src/pages/editor/mind/components/EditorToolbar/MindToolbar.tsx
+++ b/src/pages/editor/mind/components/EditorToolbar/MindToolbar.tsx
@@ -1,7 +1,7 @@
import { Divider } from 'antd';
import { Toolbar } from 'gg-editor';
import ToolbarButton from './ToolbarButton';
-import styles from './index.less';
+import styles from './index.style.ts';
const FlowToolbar = () => (
diff --git a/src/pages/editor/mind/components/EditorToolbar/ToolbarButton.tsx b/src/pages/editor/mind/components/EditorToolbar/ToolbarButton.tsx
index 94f9e9c6..8deb15de 100644
--- a/src/pages/editor/mind/components/EditorToolbar/ToolbarButton.tsx
+++ b/src/pages/editor/mind/components/EditorToolbar/ToolbarButton.tsx
@@ -2,7 +2,7 @@ import { Command } from 'gg-editor';
import React from 'react';
import { Tooltip } from 'antd';
import IconFont from '../../common/IconFont';
-import styles from './index.less';
+import styles from './index.style.ts';
const upperFirst = (str: string) =>
str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
diff --git a/src/pages/editor/mind/components/EditorToolbar/index.less b/src/pages/editor/mind/components/EditorToolbar/index.less
index d9e98d1f..8664603c 100644
--- a/src/pages/editor/mind/components/EditorToolbar/index.less
+++ b/src/pages/editor/mind/components/EditorToolbar/index.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.toolbar {
display: flex;
diff --git a/src/pages/editor/mind/components/EditorToolbar/index.style.ts b/src/pages/editor/mind/components/EditorToolbar/index.style.ts
new file mode 100644
index 00000000..1c81f00a
--- /dev/null
+++ b/src/pages/editor/mind/components/EditorToolbar/index.style.ts
@@ -0,0 +1,37 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ toolbar: {
+ display: 'flex',
+ alignItems: 'center',
+ ':global': {
+ 'command .anticon': {
+ display: 'inline-block',
+ width: '27px',
+ height: '27px',
+ margin: '0 6px',
+ paddingTop: '6px',
+ textAlign: 'center',
+ cursor: 'pointer',
+ '&:hover': { border: '1px solid @item-active-bg' },
+ },
+ 'disable .anticon': {
+ color: token.textColorSecondary,
+ cursor: 'auto',
+ '&:hover': { border: '1px solid @border-color-base' },
+ },
+ },
+ },
+ tooltip: {
+ ':global': {
+ 'ant-tooltip-inner': {
+ fontSize: '12px',
+ borderRadius: '0',
+ },
+ },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/editor/mind/index.less b/src/pages/editor/mind/index.less
index 42923fcb..0e7d315b 100644
--- a/src/pages/editor/mind/index.less
+++ b/src/pages/editor/mind/index.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.editor {
display: flex;
diff --git a/src/pages/editor/mind/index.style.ts b/src/pages/editor/mind/index.style.ts
new file mode 100644
index 00000000..b7973789
--- /dev/null
+++ b/src/pages/editor/mind/index.style.ts
@@ -0,0 +1,48 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ editor: {
+ display: 'flex',
+ flex: '1',
+ flexDirection: 'column',
+ width: '100%',
+ height: 'calc(100vh - 250px)',
+ background: token.descriptionsBg,
+ },
+ editorHd: {
+ padding: '8px',
+ background: token.descriptionsBg,
+ border: '1px solid @item-active-bg',
+ },
+ editorBd: {
+ flex: '1',
+ },
+ 'editorSidebar,.editorContent': {
+ display: 'flex',
+ flexDirection: 'column',
+ },
+ editorContent: {
+ ':global': {
+ 'graph-container canvas': {
+ verticalAlign: 'middle',
+ },
+ },
+ },
+ editorSidebar: {
+ background: token.descriptionsBg,
+ ':global': {
+ 'g6-editor-minimap-container': {
+ background: 'none',
+ },
+ },
+ '&:first-child': { borderRight: '1px solid @item-active-bg' },
+ '&:last-child': { borderLeft: '1px solid @item-active-bg' },
+ },
+ 'flow,.mind,.koni': {
+ flex: '1',
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/editor/mind/index.tsx b/src/pages/editor/mind/index.tsx
index 0760684d..2f21d1b6 100644
--- a/src/pages/editor/mind/index.tsx
+++ b/src/pages/editor/mind/index.tsx
@@ -1,13 +1,13 @@
import { Col, Row } from 'antd';
import GGEditor, { Mind } from 'gg-editor';
-import { PageContainer } from '@ant-design/pro-layout';
+import { PageContainer } from '@ant-design/pro-components';
import EditorMinimap from './components/EditorMinimap';
import { MindContextMenu } from './components/EditorContextMenu';
import { MindDetailPanel } from './components/EditorDetailPanel';
import { MindToolbar } from './components/EditorToolbar';
import data from './worldCup2018.json';
-import styles from './index.less';
+import styles from './index.style.ts';
GGEditor.setTrackable(false);
diff --git a/src/pages/exception/403/index.tsx b/src/pages/exception/403/index.tsx
index 1c73f934..0e37af3b 100644
--- a/src/pages/exception/403/index.tsx
+++ b/src/pages/exception/403/index.tsx
@@ -1,4 +1,4 @@
-import { Link } from 'umi';
+import { Link } from '@umijs/max';
import { Result, Button } from 'antd';
export default () => (
diff --git a/src/pages/exception/404/index.tsx b/src/pages/exception/404/index.tsx
index 60473b3f..43ba4fad 100644
--- a/src/pages/exception/404/index.tsx
+++ b/src/pages/exception/404/index.tsx
@@ -1,4 +1,4 @@
-import { Link } from 'umi';
+import { Link } from '@umijs/max';
import { Result, Button } from 'antd';
export default () => (
diff --git a/src/pages/exception/500/index.tsx b/src/pages/exception/500/index.tsx
index 44efc5b2..42cc4c65 100644
--- a/src/pages/exception/500/index.tsx
+++ b/src/pages/exception/500/index.tsx
@@ -1,4 +1,4 @@
-import { Link } from 'umi';
+import { Link } from '@umijs/max';
import { Result, Button } from 'antd';
export default () => (
diff --git a/src/pages/form/advanced-form/components/TableForm.tsx b/src/pages/form/advanced-form/components/TableForm.tsx
index 26059b67..3f2d3787 100644
--- a/src/pages/form/advanced-form/components/TableForm.tsx
+++ b/src/pages/form/advanced-form/components/TableForm.tsx
@@ -3,7 +3,7 @@ import { Button, Divider, Input, Popconfirm, Table, message } from 'antd';
import type { FC } from 'react';
import React, { useState } from 'react';
-import styles from '../style.less';
+import styles from '../style.style.ts';
type TableFormDateType = {
key: string;
diff --git a/src/pages/form/advanced-form/index.tsx b/src/pages/form/advanced-form/index.tsx
index b2b860b3..957218f6 100644
--- a/src/pages/form/advanced-form/index.tsx
+++ b/src/pages/form/advanced-form/index.tsx
@@ -3,17 +3,18 @@ import { Card, Col, Popover, Row, message } from 'antd';
import type { FC } from 'react';
import { useState } from 'react';
-import ProForm, {
+import {
+ ProForm,
ProFormDateRangePicker,
ProFormSelect,
ProFormText,
ProFormTimePicker,
-} from '@ant-design/pro-form';
-import type { ProColumnType } from '@ant-design/pro-table';
-import { EditableProTable } from '@ant-design/pro-table';
-import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
+} from '@ant-design/pro-components';
+import type { ProColumnType } from '@ant-design/pro-components';
+import { EditableProTable } from '@ant-design/pro-components';
+import { PageContainer, FooterToolbar } from '@ant-design/pro-components';
import { fakeSubmitForm } from './service';
-import styles from './style.less';
+import styles from './style.style.ts';
interface TableFormDateType {
key: string;
diff --git a/src/pages/form/advanced-form/service.ts b/src/pages/form/advanced-form/service.ts
index dd58aff5..652759d0 100644
--- a/src/pages/form/advanced-form/service.ts
+++ b/src/pages/form/advanced-form/service.ts
@@ -1,4 +1,4 @@
-import { request } from 'umi';
+import { request } from '@umijs/max';
export async function fakeSubmitForm(params: any) {
return request('/api/advancedForm', {
diff --git a/src/pages/form/advanced-form/style.less b/src/pages/form/advanced-form/style.less
index e83ac949..b315f452 100644
--- a/src/pages/form/advanced-form/style.less
+++ b/src/pages/form/advanced-form/style.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.card {
margin-bottom: 24px;
diff --git a/src/pages/form/advanced-form/style.style.ts b/src/pages/form/advanced-form/style.style.ts
new file mode 100644
index 00000000..a4f311f1
--- /dev/null
+++ b/src/pages/form/advanced-form/style.style.ts
@@ -0,0 +1,56 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ card: {
+ marginBottom: '24px',
+ ':global': {
+ 'ant-legacy-form-item .ant-legacy-form-item-control-wrapper': {
+ width: '100%',
+ },
+ },
+ },
+ errorIcon: {
+ marginRight: '24px',
+ color: token.errorColor,
+ cursor: 'pointer',
+ spananticon: { marginRight: '4px' },
+ },
+ errorPopover: {
+ ':global': {
+ 'ant-popover-inner-content': {
+ minWidth: '256px',
+ maxHeight: '290px',
+ padding: '0',
+ overflow: 'auto',
+ },
+ },
+ },
+ errorListItem: {
+ padding: '8px 16px',
+ listStyle: 'none',
+ borderBottom: '1px solid @border-color-split',
+ cursor: 'pointer',
+ transition: 'all 0.3s',
+ '&:hover': { background: token.itemActiveBg },
+ '&:last-child': { border: '0' },
+ errorIcon: {
+ float: 'left',
+ marginTop: '4px',
+ marginRight: '12px',
+ paddingBottom: '22px',
+ color: token.errorColor,
+ },
+ errorField: {
+ marginTop: '2px',
+ color: token.textColorSecondary,
+ fontSize: '12px',
+ },
+ },
+ editable: {
+ td: { paddingTop: '13px', paddingBottom: '12.5px' },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/form/basic-form/index.tsx b/src/pages/form/basic-form/index.tsx
index d1e44831..b34f7c1c 100644
--- a/src/pages/form/basic-form/index.tsx
+++ b/src/pages/form/basic-form/index.tsx
@@ -1,5 +1,6 @@
import { Card, message } from 'antd';
-import ProForm, {
+import {
+ ProForm,
ProFormDateRangePicker,
ProFormDependency,
ProFormDigit,
@@ -7,12 +8,12 @@ import ProForm, {
ProFormSelect,
ProFormText,
ProFormTextArea,
-} from '@ant-design/pro-form';
-import { useRequest } from 'umi';
+} from '@ant-design/pro-components';
+import { useRequest } from '@umijs/max';
import type { FC } from 'react';
-import { PageContainer } from '@ant-design/pro-layout';
+import { PageContainer } from '@ant-design/pro-components';
import { fakeSubmitForm } from './service';
-import styles from './style.less';
+import styles from './style.style.ts';
const BasicForm: FC> = () => {
const { run } = useRequest(fakeSubmitForm, {
diff --git a/src/pages/form/basic-form/service.ts b/src/pages/form/basic-form/service.ts
index b2648f0c..7553f9c4 100644
--- a/src/pages/form/basic-form/service.ts
+++ b/src/pages/form/basic-form/service.ts
@@ -1,4 +1,4 @@
-import { request } from 'umi';
+import { request } from '@umijs/max';
export async function fakeSubmitForm(params: any) {
return request('/api/basicForm', {
diff --git a/src/pages/form/basic-form/style.less b/src/pages/form/basic-form/style.less
index 60a374ba..302ea3d3 100644
--- a/src/pages/form/basic-form/style.less
+++ b/src/pages/form/basic-form/style.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.optional {
color: @text-color-secondary;
diff --git a/src/pages/form/basic-form/style.style.ts b/src/pages/form/basic-form/style.style.ts
new file mode 100644
index 00000000..65a6f60e
--- /dev/null
+++ b/src/pages/form/basic-form/style.style.ts
@@ -0,0 +1,12 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ optional: {
+ color: token.textColorSecondary,
+ fontStyle: 'normal',
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/form/step-form/index.tsx b/src/pages/form/step-form/index.tsx
index e374dc3e..a5a32b17 100644
--- a/src/pages/form/step-form/index.tsx
+++ b/src/pages/form/step-form/index.tsx
@@ -1,10 +1,16 @@
import React, { useRef, useState } from 'react';
import type { FormInstance } from 'antd';
import { Card, Result, Button, Descriptions, Divider, Alert, Statistic } from 'antd';
-import { PageContainer } from '@ant-design/pro-layout';
-import ProForm, { ProFormDigit, ProFormSelect, ProFormText, StepsForm } from '@ant-design/pro-form';
+import { PageContainer } from '@ant-design/pro-components';
+import {
+ ProForm,
+ ProFormDigit,
+ ProFormSelect,
+ ProFormText,
+ StepsForm,
+} from '@ant-design/pro-components';
import type { StepDataType } from './data.d';
-import styles from './style.less';
+import styles from './style.style.ts';
const StepDescriptions: React.FC<{
stepData: StepDataType;
diff --git a/src/pages/form/step-form/service.ts b/src/pages/form/step-form/service.ts
index 51237c74..5834a574 100644
--- a/src/pages/form/step-form/service.ts
+++ b/src/pages/form/step-form/service.ts
@@ -1,4 +1,4 @@
-import { request } from 'umi';
+import { request } from '@umijs/max';
export async function fakeSubmitForm(params: any) {
return request('/api/stepForm', {
diff --git a/src/pages/form/step-form/style.less b/src/pages/form/step-form/style.less
index 443eb2ef..435ab638 100644
--- a/src/pages/form/step-form/style.less
+++ b/src/pages/form/step-form/style.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.card {
margin-bottom: 24px;
diff --git a/src/pages/form/step-form/style.style.ts b/src/pages/form/step-form/style.style.ts
new file mode 100644
index 00000000..0a723c3c
--- /dev/null
+++ b/src/pages/form/step-form/style.style.ts
@@ -0,0 +1,16 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ card: {
+ marginBottom: '24px',
+ },
+ result: {
+ maxWidth: '560px',
+ margin: '0 auto',
+ padding: '24px 0 8px',
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/list/basic-list/components/OperationModal.tsx b/src/pages/list/basic-list/components/OperationModal.tsx
index d524727d..5c89bbe0 100644
--- a/src/pages/list/basic-list/components/OperationModal.tsx
+++ b/src/pages/list/basic-list/components/OperationModal.tsx
@@ -5,9 +5,9 @@ import {
ProFormDateTimePicker,
ProFormText,
ProFormTextArea,
-} from '@ant-design/pro-form';
+} from '@ant-design/pro-components';
import type { BasicListItemDataType } from '../data.d';
-import styles from '../style.less';
+import styles from '../style.style.ts';
import { Button, Result } from 'antd';
type OperationModalProps = {
diff --git a/src/pages/list/basic-list/index.tsx b/src/pages/list/basic-list/index.tsx
index a0d03139..694b9a20 100644
--- a/src/pages/list/basic-list/index.tsx
+++ b/src/pages/list/basic-list/index.tsx
@@ -16,13 +16,13 @@ import {
Row,
} from 'antd';
-import { PageContainer } from '@ant-design/pro-layout';
-import { useRequest } from 'umi';
+import { PageContainer } from '@ant-design/pro-components';
+import { useRequest } from '@umijs/max';
import moment from 'moment';
import OperationModal from './components/OperationModal';
import { addFakeList, queryFakeList, removeFakeList, updateFakeList } from './service';
import type { BasicListItemDataType } from './data.d';
-import styles from './style.less';
+import styles from './style.style.ts';
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
diff --git a/src/pages/list/basic-list/service.ts b/src/pages/list/basic-list/service.ts
index 4aa8f8d8..99eb3541 100644
--- a/src/pages/list/basic-list/service.ts
+++ b/src/pages/list/basic-list/service.ts
@@ -1,4 +1,4 @@
-import { request } from 'umi';
+import { request } from '@umijs/max';
import type { BasicListItemDataType } from './data.d';
type ParamsType = {
diff --git a/src/pages/list/basic-list/style.less b/src/pages/list/basic-list/style.less
index 2d3a58cc..67dfb728 100644
--- a/src/pages/list/basic-list/style.less
+++ b/src/pages/list/basic-list/style.less
@@ -1,5 +1,5 @@
-@import '~antd/es/style/themes/default.less';
-@import './utils/utils.less';
+@import '~antd/es/style/themes/default.style.ts';
+@import './utils/utils.style.ts';
.standardList {
:global {
diff --git a/src/pages/list/basic-list/style.style.ts b/src/pages/list/basic-list/style.style.ts
new file mode 100644
index 00000000..2d60efe1
--- /dev/null
+++ b/src/pages/list/basic-list/style.style.ts
@@ -0,0 +1,153 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ standardList: {
+ ':global': {
+ 'ant-card-head': {
+ borderBottom: 'none',
+ },
+ 'ant-card-head-title': {
+ padding: '24px 0',
+ lineHeight: '32px',
+ },
+ 'ant-card-extra': {
+ padding: '24px 0',
+ },
+ 'ant-list-pagination': {
+ marginTop: '24px',
+ textAlign: 'right',
+ },
+ 'ant-avatar-lg': {
+ width: '48px',
+ height: '48px',
+ lineHeight: '48px',
+ },
+ },
+ headerInfo: {
+ position: 'relative',
+ textAlign: 'center',
+ '& > span': {
+ display: 'inline-block',
+ marginBottom: '4px',
+ color: token.textColorSecondary,
+ fontSize: token.fontSizeBase,
+ lineHeight: '22px',
+ },
+ '& > p': {
+ margin: '0',
+ color: token.headingColor,
+ fontSize: '24px',
+ lineHeight: '32px',
+ },
+ '& > em': {
+ position: 'absolute',
+ top: '0',
+ right: '0',
+ width: '1px',
+ height: '56px',
+ backgroundColor: token.borderColorSplit,
+ },
+ },
+ listContent: {
+ fontSize: '0',
+ listContentItem: {
+ display: 'inline-block',
+ marginLeft: '40px',
+ color: token.textColorSecondary,
+ fontSize: token.fontSizeBase,
+ verticalAlign: 'middle',
+ '> span': { lineHeight: '20px' },
+ '> p': { marginTop: '4px', marginBottom: '0', lineHeight: '22px' },
+ },
+ },
+ extraContentSearch: { width: '272px', marginLeft: '16px' },
+ },
+ [`@mediascreen and (max-width: token.screen-xs)`]: {
+ standardList: {
+ ':global': {
+ 'ant-list-item-content': {
+ display: 'block',
+ flex: 'none',
+ width: '100%',
+ },
+ 'ant-list-item-action': { marginLeft: '0' },
+ },
+ listContent: {
+ marginLeft: '0',
+ '& > div': { marginLeft: '0' },
+ },
+ listCard: {
+ ':global': {
+ 'ant-card-head-title': {
+ overflow: 'visible',
+ },
+ },
+ },
+ },
+ },
+ [`@mediascreen and (max-width: token.screen-sm)`]: {
+ standardList: {
+ extraContentSearch: {
+ width: '100%',
+ marginLeft: '0',
+ },
+ headerInfo: {
+ marginBottom: '16px',
+ '& > em': { display: 'none' },
+ },
+ },
+ },
+ [`@mediascreen and (max-width: token.screen-md)`]: {
+ standardList: {
+ listContent: {
+ '& > div': { display: 'block' },
+ '& > div:last-child': { top: '0', width: '100%' },
+ },
+ },
+ listCard: {
+ ':global': {
+ 'ant-radio-group': { display: 'block', marginBottom: '8px' },
+ },
+ },
+ },
+ [`@mediascreen and (max-width: token.screen-lg) and (min-width: token.screen-md)`]: {
+ standardList: {
+ listContent: {
+ '& > div': { display: 'block' },
+ '& > div:last-child': { top: '0', width: '100%' },
+ },
+ },
+ },
+ [`@mediascreen and (max-width: token.screen-xl)`]: {
+ standardList: {
+ listContent: {
+ '& > div': { marginLeft: '24px' },
+ '& > div:last-child': { top: '0' },
+ },
+ },
+ },
+ '@mediascreen and (max-width: 1400px)': {
+ standardList: {
+ listContent: {
+ textAlign: 'right',
+ '& > div:last-child': { top: '0' },
+ },
+ },
+ },
+ standardListForm: {
+ ':global': {
+ 'ant-form-item': {
+ marginBottom: '12px',
+ '&:last-child': { marginBottom: '32px', paddingTop: '4px' },
+ },
+ },
+ },
+ formResult: {
+ width: '100%',
+ "[class^='title']": { marginBottom: '8px' },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/list/basic-list/utils/utils.style.ts b/src/pages/list/basic-list/utils/utils.style.ts
new file mode 100644
index 00000000..d8f6b99f
--- /dev/null
+++ b/src/pages/list/basic-list/utils/utils.style.ts
@@ -0,0 +1,7 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {};
+});
+
+export default useStyles;
diff --git a/src/pages/list/card-list/index.tsx b/src/pages/list/card-list/index.tsx
index d7c46ef1..2ed1a5f9 100644
--- a/src/pages/list/card-list/index.tsx
+++ b/src/pages/list/card-list/index.tsx
@@ -1,10 +1,10 @@
import { PlusOutlined } from '@ant-design/icons';
import { Button, Card, List, Typography } from 'antd';
-import { PageContainer } from '@ant-design/pro-layout';
-import { useRequest } from 'umi';
+import { PageContainer } from '@ant-design/pro-components';
+import { useRequest } from '@umijs/max';
import { queryFakeList } from './service';
import type { CardListItemDataType } from './data.d';
-import styles from './style.less';
+import styles from './style.style.ts';
const { Paragraph } = Typography;
diff --git a/src/pages/list/card-list/service.ts b/src/pages/list/card-list/service.ts
index fee9a314..8095b5f0 100644
--- a/src/pages/list/card-list/service.ts
+++ b/src/pages/list/card-list/service.ts
@@ -1,4 +1,4 @@
-import { request } from 'umi';
+import { request } from '@umijs/max';
import type { CardListItemDataType } from './data.d';
export async function queryFakeList(params: {
diff --git a/src/pages/list/card-list/style.less b/src/pages/list/card-list/style.less
index 24a5bc67..ab7b83ac 100644
--- a/src/pages/list/card-list/style.less
+++ b/src/pages/list/card-list/style.less
@@ -1,5 +1,5 @@
-@import '~antd/es/style/themes/default.less';
-@import './utils/utils.less';
+@import '~antd/es/style/themes/default.style.ts';
+@import './utils/utils.style.ts';
.cardList {
.card {
diff --git a/src/pages/list/card-list/style.style.ts b/src/pages/list/card-list/style.style.ts
new file mode 100644
index 00000000..e44e6559
--- /dev/null
+++ b/src/pages/list/card-list/style.style.ts
@@ -0,0 +1,95 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ cardList: {
+ card: {
+ ':global': {
+ 'ant-card-meta-title': {
+ marginBottom: '12px',
+ '& > a': {
+ display: 'inline-block',
+ maxWidth: '100%',
+ color: token.headingColor,
+ },
+ },
+ 'ant-card-body:hover': {
+ 'ant-card-meta-title > a': {
+ color: token.colorPrimary,
+ },
+ },
+ },
+ },
+ item: { height: '64px' },
+ ':global': {
+ 'ant-list .ant-list-item-content-single': {
+ maxWidth: '100%',
+ },
+ },
+ },
+ extraImg: {
+ width: '155px',
+ marginTop: '-20px',
+ textAlign: 'center',
+ img: { width: '100%' },
+ },
+ newButton: {
+ width: '100%',
+ height: '201px',
+ color: token.textColorSecondary,
+ backgroundColor: token.componentBackground,
+ borderColor: token.colorBorder,
+ },
+ cardAvatar: {
+ width: '48px',
+ height: '48px',
+ borderRadius: '48px',
+ },
+ cardDescription: {
+ overflow: 'hidden',
+ whiteSpace: 'nowrap',
+ textOverflow: 'ellipsis',
+ wordBreak: 'break-all',
+ },
+ pageHeaderContent: {
+ position: 'relative',
+ },
+ contentLink: {
+ marginTop: '16px',
+ a: {
+ marginRight: '32px',
+ img: {
+ width: '24px',
+ },
+ },
+ img: { marginRight: '8px', verticalAlign: 'middle' },
+ },
+ [`@mediascreen and (max-width: token.screen-lg)`]: {
+ contentLink: {
+ a: {
+ marginRight: '16px',
+ },
+ },
+ },
+ [`@mediascreen and (max-width: token.screen-md)`]: {
+ extraImg: { display: 'none' },
+ },
+ [`@mediascreen and (max-width: token.screen-sm)`]: {
+ pageHeaderContent: { paddingBottom: '30px' },
+ contentLink: {
+ position: 'absolute',
+ bottom: '-4px',
+ left: '0',
+ width: '1000px',
+ a: {
+ marginRight: '16px',
+ },
+ img: {
+ marginRight: '4px',
+ },
+ },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/list/card-list/utils/utils.style.ts b/src/pages/list/card-list/utils/utils.style.ts
new file mode 100644
index 00000000..d8f6b99f
--- /dev/null
+++ b/src/pages/list/card-list/utils/utils.style.ts
@@ -0,0 +1,7 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {};
+});
+
+export default useStyles;
diff --git a/src/pages/list/search/applications/components/StandardFormRow/index.less b/src/pages/list/search/applications/components/StandardFormRow/index.less
index 4067215f..cef8e648 100644
--- a/src/pages/list/search/applications/components/StandardFormRow/index.less
+++ b/src/pages/list/search/applications/components/StandardFormRow/index.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.standardFormRow {
display: flex;
diff --git a/src/pages/list/search/applications/components/StandardFormRow/index.style.ts b/src/pages/list/search/applications/components/StandardFormRow/index.style.ts
new file mode 100644
index 00000000..95249885
--- /dev/null
+++ b/src/pages/list/search/applications/components/StandardFormRow/index.style.ts
@@ -0,0 +1,74 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ standardFormRow: {
+ display: 'flex',
+ marginBottom: '16px',
+ paddingBottom: '16px',
+ borderBottom: '1px dashed @border-color-split',
+ ':global': {
+ 'ant-form-item, .ant-legacy-form-item': {
+ marginRight: '24px',
+ },
+ 'ant-form-item-label, .ant-legacy-form-item-label': {
+ label: { marginRight: '0', color: token.textColor },
+ },
+ 'ant-form-item-label, .ant-legacy-form-item-label, .ant-form-item-control, .ant-legacy-form-item-control':
+ {
+ padding: '0',
+ lineHeight: '32px',
+ },
+ },
+ label: {
+ flex: '0 0 auto',
+ marginRight: '24px',
+ color: token.headingColor,
+ fontSize: token.fontSizeBase,
+ textAlign: 'right',
+ '& > span': {
+ display: 'inline-block',
+ height: '32px',
+ lineHeight: '32px',
+ '&::after': { content: "':'" },
+ },
+ },
+ content: {
+ flex: '1 1 0',
+ ':global': {
+ 'ant-form-item, .ant-legacy-form-item': {
+ '&:last-child': {
+ marginRight: '0',
+ },
+ },
+ },
+ },
+ },
+ standardFormRowLast: {
+ marginBottom: '0',
+ paddingBottom: '0',
+ border: 'none',
+ },
+ standardFormRowBlock: {
+ ':global': {
+ 'ant-form-item, .ant-legacy-form-item, div.ant-form-item-control-wrapper, div.ant-legacy-form-item-control-wrapper':
+ {
+ display: 'block',
+ },
+ },
+ },
+ standardFormRowGrid: {
+ ':global': {
+ 'ant-form-item, .ant-legacy-form-item, div.ant-form-item-control-wrapper, div.ant-legacy-form-item-control-wrapper':
+ {
+ display: 'block',
+ },
+ 'ant-form-item-label, .ant-legacy-form-item-label': {
+ float: 'left',
+ },
+ },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/list/search/applications/components/StandardFormRow/index.tsx b/src/pages/list/search/applications/components/StandardFormRow/index.tsx
index fe4cb388..2e741156 100644
--- a/src/pages/list/search/applications/components/StandardFormRow/index.tsx
+++ b/src/pages/list/search/applications/components/StandardFormRow/index.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import classNames from 'classnames';
-import styles from './index.less';
+import styles from './index.style.ts';
type StandardFormRowProps = {
title?: string;
diff --git a/src/pages/list/search/applications/components/TagSelect/index.less b/src/pages/list/search/applications/components/TagSelect/index.less
index f366c587..25dc8ca8 100644
--- a/src/pages/list/search/applications/components/TagSelect/index.less
+++ b/src/pages/list/search/applications/components/TagSelect/index.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.tagSelect {
position: relative;
diff --git a/src/pages/list/search/applications/components/TagSelect/index.style.ts b/src/pages/list/search/applications/components/TagSelect/index.style.ts
new file mode 100644
index 00000000..3353b98d
--- /dev/null
+++ b/src/pages/list/search/applications/components/TagSelect/index.style.ts
@@ -0,0 +1,34 @@
+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',
+ ':global': {
+ 'ant-tag': {
+ marginRight: '24px',
+ padding: '0 8px',
+ fontSize: token.fontSizeBase,
+ },
+ },
+ '&expanded': { maxHeight: '200px', transition: 'all 0.3s' },
+ trigger: {
+ position: 'absolute',
+ top: '0',
+ right: '0',
+ spananticon: {
+ fontSize: '12px',
+ },
+ },
+ '&hasExpandTag': { paddingRight: '50px' },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/list/search/applications/components/TagSelect/index.tsx b/src/pages/list/search/applications/components/TagSelect/index.tsx
index 5f10efd4..42b6e4d8 100644
--- a/src/pages/list/search/applications/components/TagSelect/index.tsx
+++ b/src/pages/list/search/applications/components/TagSelect/index.tsx
@@ -4,7 +4,7 @@ import { Tag } from 'antd';
import classNames from 'classnames';
import type { FC } from 'react';
import React from 'react';
-import styles from './index.less';
+import styles from './index.style.ts';
const { CheckableTag } = Tag;
diff --git a/src/pages/list/search/applications/index.tsx b/src/pages/list/search/applications/index.tsx
index abb16cac..59b48a78 100644
--- a/src/pages/list/search/applications/index.tsx
+++ b/src/pages/list/search/applications/index.tsx
@@ -8,12 +8,12 @@ import { Avatar, Card, Col, Dropdown, Form, List, Menu, Row, Select, Tooltip } f
import numeral from 'numeral';
import type { FC } from 'react';
import React from 'react';
-import { useRequest } from 'umi';
+import { useRequest } from '@umijs/max';
import StandardFormRow from './components/StandardFormRow';
import TagSelect from './components/TagSelect';
import type { ListItemDataType } from './data.d';
import { queryFakeList } from './service';
-import styles from './style.less';
+import styles from './style.style.ts';
const { Option } = Select;
diff --git a/src/pages/list/search/applications/service.ts b/src/pages/list/search/applications/service.ts
index b6fb5712..b62d910d 100644
--- a/src/pages/list/search/applications/service.ts
+++ b/src/pages/list/search/applications/service.ts
@@ -1,4 +1,4 @@
-import { request } from 'umi';
+import { request } from '@umijs/max';
import type { Params, ListItemDataType } from './data.d';
export async function queryFakeList(
diff --git a/src/pages/list/search/applications/style.less b/src/pages/list/search/applications/style.less
index 3daa5c3e..aee8e7c6 100644
--- a/src/pages/list/search/applications/style.less
+++ b/src/pages/list/search/applications/style.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.filterCardList {
:global {
diff --git a/src/pages/list/search/applications/style.style.ts b/src/pages/list/search/applications/style.style.ts
new file mode 100644
index 00000000..c926cda3
--- /dev/null
+++ b/src/pages/list/search/applications/style.style.ts
@@ -0,0 +1,49 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ filterCardList: {
+ ':global': {
+ 'ant-card-meta-content': {
+ marginTop: '0',
+ },
+ '// disabled white space ant-card-meta-avatar': {
+ fontSize: '0',
+ },
+ 'ant-list .ant-list-item-content-single': {
+ maxWidth: '100%',
+ },
+ },
+ cardInfo: {
+ marginTop: '16px',
+ marginLeft: '40px',
+ zoom: '1',
+ '&::before, &::after': {
+ display: 'table',
+ content: "' '",
+ },
+ '&::after': {
+ clear: 'both',
+ height: '0',
+ fontSize: '0',
+ visibility: 'hidden',
+ },
+ '& > div': {
+ position: 'relative',
+ float: 'left',
+ width: '50%',
+ textAlign: 'left',
+ p: { margin: '0', fontSize: '24px', lineHeight: '32px' },
+ 'p:first-child': {
+ marginBottom: '4px',
+ color: token.textColorSecondary,
+ fontSize: '12px',
+ lineHeight: '20px',
+ },
+ },
+ },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/list/search/applications/utils/utils.style.ts b/src/pages/list/search/applications/utils/utils.style.ts
new file mode 100644
index 00000000..d8f6b99f
--- /dev/null
+++ b/src/pages/list/search/applications/utils/utils.style.ts
@@ -0,0 +1,7 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {};
+});
+
+export default useStyles;
diff --git a/src/pages/list/search/articles/components/ArticleListContent/index.less b/src/pages/list/search/articles/components/ArticleListContent/index.less
index eca0811c..e8220265 100644
--- a/src/pages/list/search/articles/components/ArticleListContent/index.less
+++ b/src/pages/list/search/articles/components/ArticleListContent/index.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.listContent {
.description {
diff --git a/src/pages/list/search/articles/components/ArticleListContent/index.style.ts b/src/pages/list/search/articles/components/ArticleListContent/index.style.ts
new file mode 100644
index 00000000..c4d29458
--- /dev/null
+++ b/src/pages/list/search/articles/components/ArticleListContent/index.style.ts
@@ -0,0 +1,28 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ listContent: {
+ description: { maxWidth: '720px', lineHeight: '22px' },
+ extra: {
+ marginTop: '16px',
+ color: token.textColorSecondary,
+ lineHeight: '22px',
+ '& > em': {
+ marginLeft: '16px',
+ color: token.disabledColor,
+ fontStyle: 'normal',
+ },
+ },
+ },
+ [`@mediascreen and (max-width: token.screen-xs)`]: {
+ listContent: {
+ extra: {
+ '& > em': { display: 'block', marginTop: '8px', marginLeft: '0' },
+ },
+ },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/list/search/articles/components/ArticleListContent/index.tsx b/src/pages/list/search/articles/components/ArticleListContent/index.tsx
index b5734538..746e385b 100644
--- a/src/pages/list/search/articles/components/ArticleListContent/index.tsx
+++ b/src/pages/list/search/articles/components/ArticleListContent/index.tsx
@@ -1,7 +1,7 @@
import { Avatar } from 'antd';
import React from 'react';
import moment from 'moment';
-import styles from './index.less';
+import styles from './index.style.ts';
type ArticleListContentProps = {
data: {
diff --git a/src/pages/list/search/articles/components/StandardFormRow/index.less b/src/pages/list/search/articles/components/StandardFormRow/index.less
index d619cd2c..5017de46 100644
--- a/src/pages/list/search/articles/components/StandardFormRow/index.less
+++ b/src/pages/list/search/articles/components/StandardFormRow/index.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.standardFormRow {
display: flex;
diff --git a/src/pages/list/search/articles/components/StandardFormRow/index.style.ts b/src/pages/list/search/articles/components/StandardFormRow/index.style.ts
new file mode 100644
index 00000000..9e0d048d
--- /dev/null
+++ b/src/pages/list/search/articles/components/StandardFormRow/index.style.ts
@@ -0,0 +1,76 @@
+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',
+ ':global': {
+ 'ant-form-item, .ant-legacy-form-item': {
+ marginRight: '24px',
+ },
+ 'ant-form-item-label, .ant-legacy-form-item-label': {
+ label: { marginRight: '0', color: token.textColor },
+ },
+ 'ant-form-item-label, .ant-legacy-form-item-label, .ant-form-item-control, .ant-legacy-form-item-control':
+ {
+ padding: '0',
+ lineHeight: '32px',
+ },
+ },
+ label: {
+ flex: '0 0 auto',
+ marginRight: '24px',
+ color: token.headingColor,
+ fontSize: token.fontSizeBase,
+ textAlign: 'right',
+ '& > span': {
+ display: 'inline-block',
+ height: '32px',
+ lineHeight: '32px',
+ '&::after': { content: "':'" },
+ },
+ },
+ content: {
+ flex: '1 1 0',
+ ':global': {
+ 'ant-form-item, .ant-legacy-form-item': {
+ '&:last-child': {
+ display: 'block',
+ marginRight: '0',
+ },
+ },
+ },
+ },
+ },
+ standardFormRowLast: {
+ marginBottom: '0',
+ paddingBottom: '0',
+ border: 'none',
+ },
+ standardFormRowBlock: {
+ ':global': {
+ 'ant-form-item, .ant-legacy-form-item, div.ant-form-item-control-wrapper, div.ant-legacy-form-item-control-wrapper':
+ {
+ display: 'block',
+ },
+ },
+ },
+ standardFormRowGrid: {
+ ':global': {
+ 'ant-form-item, .ant-legacy-form-item, div.ant-form-item-control-wrapper, div.ant-legacy-form-item-control-wrapper':
+ {
+ display: 'block',
+ },
+ 'ant-form-item-label, .ant-legacy-form-item-label': {
+ float: 'left',
+ },
+ },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/list/search/articles/components/StandardFormRow/index.tsx b/src/pages/list/search/articles/components/StandardFormRow/index.tsx
index fe4cb388..2e741156 100644
--- a/src/pages/list/search/articles/components/StandardFormRow/index.tsx
+++ b/src/pages/list/search/articles/components/StandardFormRow/index.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import classNames from 'classnames';
-import styles from './index.less';
+import styles from './index.style.ts';
type StandardFormRowProps = {
title?: string;
diff --git a/src/pages/list/search/articles/components/TagSelect/index.less b/src/pages/list/search/articles/components/TagSelect/index.less
index b174f042..aa5b7df3 100644
--- a/src/pages/list/search/articles/components/TagSelect/index.less
+++ b/src/pages/list/search/articles/components/TagSelect/index.less
@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/themes/default.style.ts';
.tagSelect {
position: relative;
diff --git a/src/pages/list/search/articles/components/TagSelect/index.style.ts b/src/pages/list/search/articles/components/TagSelect/index.style.ts
new file mode 100644
index 00000000..3353b98d
--- /dev/null
+++ b/src/pages/list/search/articles/components/TagSelect/index.style.ts
@@ -0,0 +1,34 @@
+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',
+ ':global': {
+ 'ant-tag': {
+ marginRight: '24px',
+ padding: '0 8px',
+ fontSize: token.fontSizeBase,
+ },
+ },
+ '&expanded': { maxHeight: '200px', transition: 'all 0.3s' },
+ trigger: {
+ position: 'absolute',
+ top: '0',
+ right: '0',
+ spananticon: {
+ fontSize: '12px',
+ },
+ },
+ '&hasExpandTag': { paddingRight: '50px' },
+ },
+ };
+});
+
+export default useStyles;
diff --git a/src/pages/list/search/articles/components/TagSelect/index.tsx b/src/pages/list/search/articles/components/TagSelect/index.tsx
index 5f10efd4..42b6e4d8 100644
--- a/src/pages/list/search/articles/components/TagSelect/index.tsx
+++ b/src/pages/list/search/articles/components/TagSelect/index.tsx
@@ -4,7 +4,7 @@ import { Tag } from 'antd';
import classNames from 'classnames';
import type { FC } from 'react';
import React from 'react';
-import styles from './index.less';
+import styles from './index.style.ts';
const { CheckableTag } = Tag;
diff --git a/src/pages/list/search/articles/index.tsx b/src/pages/list/search/articles/index.tsx
index e61be81c..9c7f7b32 100644
--- a/src/pages/list/search/articles/index.tsx
+++ b/src/pages/list/search/articles/index.tsx
@@ -2,13 +2,13 @@ import { LikeOutlined, LoadingOutlined, MessageOutlined, StarOutlined } from '@a
import { Button, Card, Col, Form, List, Row, Select, Tag } from 'antd';
import type { FC } from 'react';
import React from 'react';
-import { useRequest } from 'umi';
+import { useRequest } from '@umijs/max';
import ArticleListContent from './components/ArticleListContent';
import StandardFormRow from './components/StandardFormRow';
import TagSelect from './components/TagSelect';
import type { ListItemDataType } from './data.d';
import { queryFakeList } from './service';
-import styles from './style.less';
+import styles from './style.style.ts';
const { Option } = Select;
const FormItem = Form.Item;
@@ -144,7 +144,7 @@ const Articles: FC = () => {
-