From 7515b048fcf7bf2218b3e386b2647fcfa149ed00 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 13 Apr 2026 16:09:53 +0800 Subject: [PATCH] fix: resolve multiple UI issues (#11678) Co-authored-by: Claude Opus 4.6 --- cloudflare-worker/src/data/common.ts | 30 ++- mock/utils.ts | 4 +- src/pages/Welcome.tsx | 207 ++++++++---------- src/pages/account/center/Center.style.ts | 4 +- .../center/components/Articles/index.tsx | 8 +- src/pages/account/center/index.tsx | 55 ++--- src/pages/dashboard/workplace/index.tsx | 4 +- src/pages/list/card-list/index.tsx | 4 +- src/pages/list/card-list/style.style.ts | 9 +- src/pages/list/search/articles/index.tsx | 8 +- types/cache/mock/login.mock.cache.js | 2 +- types/index.d.ts | 2 +- 12 files changed, 170 insertions(+), 167 deletions(-) diff --git a/cloudflare-worker/src/data/common.ts b/cloudflare-worker/src/data/common.ts index 3026c888..db7f479c 100644 --- a/cloudflare-worker/src/data/common.ts +++ b/cloudflare-worker/src/data/common.ts @@ -50,17 +50,20 @@ export const user = [ export const members = [ { - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png', + avatar: + 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png', name: '曲丽丽', id: 'member1', }, { - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png', + avatar: + 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png', name: '王昭君', id: 'member2', }, { - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png', + avatar: + 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png', name: '董娜娜', id: 'member3', }, @@ -68,12 +71,13 @@ export const members = [ export const defaultUser = { name: 'Serati Ma', - avatar: 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png', + avatar: + 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png', userid: '00000001', email: 'antdesign@alipay.com', signature: '海纳百川，有容乃大', title: '交互专家', - group: '蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED', + group: '蚂蚁集团－某某某事业群－某某平台部－某某技术部－UED', tags: [ { key: '0', label: '很有想法的' }, { key: '1', label: '专注设计' }, @@ -96,7 +100,8 @@ export const defaultUser = { const statuses = ['active', 'exception', 'normal']; export function fakeList(count: number) { - const safeCount = Number.isFinite(count) && count >= 0 ? Math.floor(count) : 0; + const safeCount = + Number.isFinite(count) && count >= 0 ? Math.floor(count) : 0; const list = []; for (let i = 0; i < safeCount; i += 1) { list.push({ @@ -104,7 +109,10 @@ export function fakeList(count: number) { owner: user[i % user.length], title: titles[i % titles.length], avatar: avatars[i % avatars.length], - cover: Math.floor(i / covers.length) % 2 === 0 ? covers[i % covers.length] : covers[covers.length - 1 - (i % covers.length)], + cover: + Math.floor(i / covers.length) % 2 === 0 + ? covers[i % covers.length] + : covers[covers.length - 1 - (i % covers.length)], status: statuses[i % statuses.length], percent: Math.ceil(Math.random() * 50) + 50, logo: avatars[i % avatars.length], @@ -112,15 +120,17 @@ export function fakeList(count: number) { updatedAt: Date.now() - Math.floor(Math.random() * 1000000000), createdAt: Date.now() - Math.floor(Math.random() * 1000000000), subDescription: desc[i % desc.length], - description: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的共通点和组成部分，该专案即是致力于归纳和吸收各种产品的各自优势，致力于打造成中后台产品的根底', + description: + '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的共通点和组成部分，该专案即是致力于归纳和吸收各种产品的各自优势，致力于打造成中后台产品的根底', activeUser: Math.floor(Math.random() * 10000) + 1000, newUser: Math.floor(Math.random() * 1000) + 100, star: Math.floor(Math.random() * 100) + 10, like: Math.floor(Math.random() * 100) + 10, message: Math.floor(Math.random() * 100) + 10, - content: '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。', + content: + '段落示意：蚂蚁集团设计平台 ant.design，用最小的工作量，无缝接入蚂蚁集团生态，提供跨越设计与开发的体验解决方案。蚂蚁集团设计平台 ant.design，用最小的工作量，无缝接入蚂蚁集团生态，提供跨越设计与开发的体验解决方案。', members, }); } return list; -} \ No newline at end of file +} diff --git a/mock/utils.ts b/mock/utils.ts index dd4e74ed..1e5ad279 100644 --- a/mock/utils.ts +++ b/mock/utils.ts @@ -62,7 +62,7 @@ export const defaultUser = { email: 'antdesign@alipay.com', signature: '海纳百川，有容乃大', title: '交互专家', - group: '蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED', + group: '蚂蚁集团－某某某事业群－某某平台部－某某技术部－UED', tags: [ { key: '0', label: '很有想法的' }, { key: '1', label: '专注设计' }, @@ -133,7 +133,7 @@ export function fakeList(count: number) { star: Math.ceil(Math.random() * 100) + 100, like: Math.ceil(Math.random() * 100) + 100, message: Math.ceil(Math.random() * 10) + 10, - content: '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。', + content: '段落示意：蚂蚁集团设计平台 ant.design，用最小的工作量，无缝接入蚂蚁集团生态，提供跨越设计与开发的体验解决方案。蚂蚁集团设计平台 ant.design，用最小的工作量，无缝接入蚂蚁集团生态，提供跨越设计与开发的体验解决方案。', members, }); } diff --git a/src/pages/Welcome.tsx b/src/pages/Welcome.tsx index 7b77a531..691e97ca 100644 --- a/src/pages/Welcome.tsx +++ b/src/pages/Welcome.tsx @@ -1,144 +1,129 @@ import { PageContainer } from '@ant-design/pro-components'; import { useModel } from '@umijs/max'; -import { Card, theme } from 'antd'; +import { Card, Col, Row, Typography } from 'antd'; import React from 'react'; -const InfoCard: React.FC<{ +const { Title, Paragraph, Text } = Typography; + +interface InfoCardProps { title: string; index: number; desc: string; href: string; - isDark?: boolean; -}> = ({ title, href, index, desc, isDark }) => { - const { token } = theme.useToken(); - - return ( - - {/* 悬停时的光效 */} -
+} -
+const InfoCard: React.FC = ({ title, index, desc, href }) => ( + + +
{index}
-
-

+
+ {title} - </h3> - <p - className="text-sm leading-relaxed line-clamp-2" - style={{ color: token.colorTextSecondary }} + + {desc} -

+

- -
- 了解更多 - → -
- - ); -}; + + +); const Welcome: React.FC = () => { - const { token } = theme.useToken(); const { initialState } = useModel('@@initialState'); const isDark = initialState?.settings?.navTheme === 'realDark'; return ( - -
- {/* 标题区域 */} -
-

+ + + {/* 标题区域 */} +
+ + 欢迎使用 Ant Design Pro + + + Ant Design Pro 是一个整合了 umi，Ant Design 和 ProComponents + 的脚手架方案。致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。 + +
+ + {/* 卡片区域 */} + + + + + + + + + + + + + {/* 底部链接 */} +
- 欢迎使用 Ant Design Pro -

-

- Ant Design Pro 是一个整合了 umi，Ant Design 和 ProComponents - 的脚手架方案。致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。 -

-
- - {/* 卡片区域 */} -
- - - -
-
- + + 更多文档请访问：{' '} + + Pro 官方文档 + + +
+ + + ); }; diff --git a/src/pages/account/center/Center.style.ts b/src/pages/account/center/Center.style.ts index e8d91b75..f91ff52f 100644 --- a/src/pages/account/center/Center.style.ts +++ b/src/pages/account/center/Center.style.ts @@ -41,9 +41,7 @@ const useStyles = createStyles(({ token }) => { color: token.colorTextHeading, fontWeight: '500', }, - tags: { - '.ant-tag': { marginBottom: '8px' }, - }, + tags: {}, team: { '.ant-avatar': { marginRight: '12px' }, a: { diff --git a/src/pages/account/center/components/Articles/index.tsx b/src/pages/account/center/components/Articles/index.tsx index 26b3936d..939c9c4a 100644 --- a/src/pages/account/center/components/Articles/index.tsx +++ b/src/pages/account/center/components/Articles/index.tsx @@ -1,6 +1,6 @@ import { LikeOutlined, MessageFilled, StarTwoTone } from '@ant-design/icons'; import { useQuery } from '@tanstack/react-query'; -import { List, Tag } from 'antd'; +import { Flex, List, Tag } from 'antd'; import React from 'react'; import type { ListItemDataType } from '../../data.d'; import { queryFakeList } from '../../service'; @@ -54,11 +54,11 @@ const Articles: React.FC = () => { } description={ - + Ant Design 设计语言 - 蚂蚁金服 - + 蚂蚁集团 + } /> diff --git a/src/pages/account/center/index.tsx b/src/pages/account/center/index.tsx index 929d7738..5f01ce59 100644 --- a/src/pages/account/center/index.tsx +++ b/src/pages/account/center/index.tsx @@ -11,6 +11,7 @@ import { Card, Col, Divider, + Flex, Input, type InputRef, Row, @@ -110,32 +111,34 @@ const TagList: React.FC<{ return (
标签
- {(tags || []).concat(newTags).map((item) => ( - {item.label} - ))} - {inputVisible && ( - - )} - {!inputVisible && ( - - - - )} + + {(tags || []).concat(newTags).map((item) => ( + {item.label} + ))} + {inputVisible && ( + + )} + {!inputVisible && ( + + + + )} +
); }; diff --git a/src/pages/dashboard/workplace/index.tsx b/src/pages/dashboard/workplace/index.tsx index 0d29e101..1dd7c1e9 100644 --- a/src/pages/dashboard/workplace/index.tsx +++ b/src/pages/dashboard/workplace/index.tsx @@ -67,7 +67,7 @@ const PageHeaderContent: FC<{ ，祝你开心每一天！
- {currentUser.title} |{currentUser.group} + {currentUser.title} | {currentUser.group}
@@ -148,7 +148,7 @@ const Workplace: FC = () => { email: 'antdesign@alipay.com', signature: '海纳百川，有容乃大', title: '交互专家', - group: '蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED', + group: '蚂蚁集团－某某某事业群－某某平台部－某某技术部－UED', }} /> } diff --git a/src/pages/list/card-list/index.tsx b/src/pages/list/card-list/index.tsx index 928520df..3c6951d9 100644 --- a/src/pages/list/card-list/index.tsx +++ b/src/pages/list/card-list/index.tsx @@ -17,8 +17,8 @@ const CardList = () => { const content = (

- 段落示意：蚂蚁金服务设计平台 - ant.design，用最小的工作量，无缝接入蚂蚁金服生态， + 段落示意：蚂蚁集团务设计平台 + ant.design，用最小的工作量，无缝接入蚂蚁集团生态， 提供跨越设计与开发的体验解决方案。

diff --git a/src/pages/list/card-list/style.style.ts b/src/pages/list/card-list/style.style.ts index 69bbff47..7814d258 100644 --- a/src/pages/list/card-list/style.style.ts +++ b/src/pages/list/card-list/style.style.ts @@ -52,19 +52,26 @@ const useStyles = createStyles(({ token }) => { }, pageHeaderContent: { position: 'relative', + overflow: 'visible', [`@media screen and (max-width: ${token.screenSM}px)`]: { paddingBottom: '30px', }, }, contentLink: { + display: 'flex', + flexWrap: 'nowrap', marginTop: '16px', a: { + display: 'inline-flex', + alignItems: 'center', marginRight: '32px', + whiteSpace: 'nowrap', img: { width: '24px', + flexShrink: 0, }, }, - img: { marginRight: '8px', verticalAlign: 'middle' }, + img: { marginRight: '8px' }, [`@media screen and (max-width: ${token.screenLG}px)`]: { a: { marginRight: '16px', diff --git a/src/pages/list/search/articles/index.tsx b/src/pages/list/search/articles/index.tsx index fb35f33d..19e55932 100644 --- a/src/pages/list/search/articles/index.tsx +++ b/src/pages/list/search/articles/index.tsx @@ -5,7 +5,7 @@ import { StarOutlined, } from '@ant-design/icons'; import { useQuery } from '@tanstack/react-query'; -import { Button, Card, Col, Form, List, Row, Select, Tag } from 'antd'; +import { Button, Card, Col, Flex, Form, List, Row, Select, Tag } from 'antd'; import type { DefaultOptionType } from 'antd/es/select'; import type { FC } from 'react'; import React, { useMemo, useRef } from 'react'; @@ -256,11 +256,11 @@ const Articles: FC = () => { } description={ - + Ant Design 设计语言 - 蚂蚁金服 - + 蚂蚁集团 + } /> diff --git a/types/cache/mock/login.mock.cache.js b/types/cache/mock/login.mock.cache.js index 6c59e198..9b9f29d2 100644 --- a/types/cache/mock/login.mock.cache.js +++ b/types/cache/mock/login.mock.cache.js @@ -7,7 +7,7 @@ module.exports = { email: 'antdesign@alipay.com', signature: '海纳百川，有容乃大', title: '交互专家', - group: '蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED', + group: '蚂蚁集团－某某某事业群－某某平台部－某某技术部－UED', tags: [ { key: '0', label: '很有想法的' }, { key: '1', label: '专注设计' }, diff --git a/types/index.d.ts b/types/index.d.ts index 2c2805a9..f3d8a3a7 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -8,7 +8,7 @@ export namespace API { export type GET_API_CURRENT_USER_PAYLOAD = Record; export type GET_API_CURRENT_USER_RES = { - /** example: {"name": "Serati Ma", "avatar": "https: //gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png", "userid": "00000001", "email": "antdesign@alipay.com", "signature": "海纳百川，有容乃大", "title": "交互专家", "group": "蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED", "tags": [{"key": "0", "label": "很有想法的"}, {"key": "1", "label": "专注设计"}, {"key": "2", "label": "辣~"}, {"key": "3", "label": "大长腿"}, {"key": "4", "label": "川妹子"}, {"key": "5", "label": "海纳百川"}], "notifyCount": 12, "unreadCount": 11, "country": "China", "geographic": {"province": {"label": "浙江省", "key": "330000"}, "city": {"label": "杭州市", "key": "330100"}}, "address": "西湖区工专路 77 号", "phone": "0752-268888888"} */ + /** example: {"name": "Serati Ma", "avatar": "https: //gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png", "userid": "00000001", "email": "antdesign@alipay.com", "signature": "海纳百川，有容乃大", "title": "交互专家", "group": "蚂蚁集团－某某某事业群－某某平台部－某某技术部－UED", "tags": [{"key": "0", "label": "很有想法的"}, {"key": "1", "label": "专注设计"}, {"key": "2", "label": "辣~"}, {"key": "3", "label": "大长腿"}, {"key": "4", "label": "川妹子"}, {"key": "5", "label": "海纳百川"}], "notifyCount": 12, "unreadCount": 11, "country": "China", "geographic": {"province": {"label": "浙江省", "key": "330000"}, "city": {"label": "杭州市", "key": "330100"}}, "address": "西湖区工专路 77 号", "phone": "0752-268888888"} */ data: { name: string; avatar: string;