tsai
/
ant-design-pro
mirror of https://github.com/ant-design/ant-design-pro
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

fix: resolve multiple UI issues and refactor Welcome with Tailwind CSS (#11679) 

* fix: 修复多个 UI 问题

1. account/center 左边标签增加间距（使用 Flex 包裹）
2. 搜索列表标签增加间距（使用 Flex 包裹）
3. 卡片列表快速开始等链接禁止换行
4. 修复 "交互专家 | 蚂蚁集团" 管道符后面缺少空格的问题
5. 全局将 "蚂蚁金服" 改为 "蚂蚁集团"

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: 修复个人中心左侧标签间距和卡片列表换行问题

1. account/center 左侧用户标签列表使用 Flex wrap gap 包裹
2. 卡片列表 contentLink 添加 display:flex 和 flexWrap:nowrap
3. 修复快速开始、产品简介、产品文档三个链接换行问题

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: 移除多余的 ant-tag marginBottom

* fix: 修复卡片列表链接图标文字不换行和垂直居中

* fix: 将添加标签按钮放入 Flex 容器避免换行

* refactor: 简化 Welcome 页面为简洁的 antd 现代风格

* refactor: 用 Tailwind CSS 重写 Welcome 页面并修复文案错误

- Welcome 页面从 antd 组件迁移到 Tailwind CSS，移除 Card/Row/Col/Typography 依赖
- 统一使用 Tailwind dark: 前缀处理暗色模式，移除 isDark JS 条件判断
- 减少 DOM 嵌套（合并 a+div、移除 span 包装）
- 修复"蚂蚁集团务设计平台"为"蚂蚁集团设计平台"

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
pull/11684/head
afc163 6 months ago
committed by GitHub
parent
7515b048fc
commit
3182baafba
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
2 changed files with 61 additions and 113 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 172
      src/pages/Welcome.tsx
  2. 2
      src/pages/list/card-list/index.tsx

172
src/pages/Welcome.tsx
View File

@ -1,10 +1,6 @@
import { PageContainer } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Card, Col, Row, Typography } from 'antd';
import React from 'react';
const { Title, Paragraph, Text } = Typography;
interface InfoCardProps {
title: string;
index: number;
@ -13,119 +9,71 @@ interface InfoCardProps {
}
const InfoCard: React.FC<InfoCardProps> = ({ title, index, desc, href }) => (
<a href={href} target="_blank" rel="noreferrer">
<Card hoverable style={{ height: '100%' }}>
<div style={{ display: 'flex', alignItems: 'flex-start', gap: 16 }}>
<div
style={{
width: 56,
height: 56,
borderRadius: 8,
background: '#1677ff',
color: '#fff',
fontSize: 24,
fontWeight: 'bold',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexShrink: 0,
}}
>
{index}
</div>
<div style={{ flex: 1, minWidth: 0 }}>
<Title level={4} style={{ marginBottom: 8, marginTop: 0 }}>
{title}
</Title>
<Paragraph
type="secondary"
ellipsis={{ rows: 2 }}
style={{ marginBottom: 0 }}
>
{desc}
</Paragraph>
</div>
<a
href={href}
target="_blank"
rel="noreferrer"
className="block h-full rounded-lg border border-solid border-gray-200 p-5 transition-shadow hover:shadow-md dark:border-gray-700"
>
<div className="flex items-start gap-4">
<div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-lg bg-[#1677ff] text-2xl font-bold text-white">
{index}
</div>
<div className="min-w-0 flex-1">
<h4 className="mb-2 mt-0 text-base font-semibold">{title}</h4>
<p className="mb-0 line-clamp-2 text-sm text-gray-500 dark:text-gray-400">
{desc}
</p>
</div>
</Card>
</div>
</a>
);
const Welcome: React.FC = () => {
const { initialState } = useModel('@@initialState');
const isDark = initialState?.settings?.navTheme === 'realDark';
return (
<PageContainer>
<Row justify="center">
<Col xs={24} lg={20}>
<Card>
{/* 标题区域 */}
<div style={{ textAlign: 'center', marginBottom: 40 }}>
<Title level={2} style={{ marginBottom: 16 }}>
欢迎使用 Ant Design Pro
</Title>
<Paragraph
type="secondary"
style={{ fontSize: 16, maxWidth: 600, margin: '0 auto' }}
>
Ant Design Pro 是一个整合了 umi，Ant Design 和 ProComponents
的脚手架方案。致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。
</Paragraph>
</div>
const Welcome: React.FC = () => (
<PageContainer>
<div className="rounded-lg border border-solid border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-[#141414]">
<div className="mb-10 text-center">
<h2 className="mb-4 text-2xl font-semibold">欢迎使用 Ant Design Pro</h2>
<p className="mx-auto max-w-[600px] text-base text-gray-500 dark:text-gray-400">
Ant Design Pro 是一个整合了 umi，Ant Design 和
ProComponents的脚手架方案。致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。
</p>
</div>
{/* 卡片区域 */}
<Row gutter={[24, 24]}>
<Col xs={24} md={8}>
<InfoCard
index={1}
href="https://umijs.org/docs/introduce/introduce"
title="了解 umi"
desc="umi 是一个可扩展的企业级前端应用框架,umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。"
/>
</Col>
<Col xs={24} md={8}>
<InfoCard
index={2}
title="了解 ant design"
href="https://ant.design"
desc="antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。"
/>
</Col>
<Col xs={24} md={8}>
<InfoCard
index={3}
title="了解 Pro Components"
href="https://procomponents.ant.design"
desc="ProComponents 是一个基于 Ant Design 做了更高抽象的模板组件，以 一个组件就是一个页面为开发理念，为中后台开发带来更好的体验。"
/>
</Col>
</Row>
<div className="grid grid-cols-1 gap-6 md:grid-cols-3">
<InfoCard
index={1}
href="https://umijs.org/docs/introduce/introduce"
title="了解 umi"
desc="umi 是一个可扩展的企业级前端应用框架,umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。"
/>
<InfoCard
index={2}
title="了解 ant design"
href="https://ant.design"
desc="antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。"
/>
<InfoCard
index={3}
title="了解 Pro Components"
href="https://procomponents.ant.design"
desc="ProComponents 是一个基于 Ant Design 做了更高抽象的模板组件，以 一个组件就是一个页面为开发理念，为中后台开发带来更好的体验。"
/>
</div>
{/* 底部链接 */}
<div
style={{
marginTop: 40,
paddingTop: 24,
borderTop: `1px solid ${isDark ? '#303030' : '#f0f0f0'}`,
textAlign: 'center',
}}
>
<Text type="secondary">
更多文档请访问：{' '}
<a
href="https://pro.ant.design"
target="_blank"
rel="noreferrer"
>
Pro 官方文档
</a>
</Text>
</div>
</Card>
</Col>
</Row>
</PageContainer>
);
};
<div className="mt-10 border-t border-gray-100 pt-6 text-center text-sm text-gray-500 dark:border-gray-700 dark:text-gray-400">
更多文档请访问：{' '}
<a
href="https://pro.ant.design"
target="_blank"
rel="noreferrer"
className="text-[#1677ff] hover:text-[#4096ff]"
>
Pro 官方文档
</a>
</div>
</div>
</PageContainer>
);
export default Welcome;

2
src/pages/list/card-list/index.tsx
View File

@ -17,7 +17,7 @@ const CardList = () => {
const content = (
<div className={styles.pageHeaderContent}>
<p>
段落示意：蚂蚁集团务设计平台
段落示意：蚂蚁集团设计平台
ant.design，用最小的工作量，无缝接入蚂蚁集团生态，
提供跨越设计与开发的体验解决方案。
</p>

Write Preview
Loading…
Cancel
Save