From 3182baafbaeb407cf53a61be0cf3e064456af4fe Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 13 Apr 2026 16:23:55 +0800
Subject: [PATCH] fix: resolve multiple UI issues and refactor Welcome with
 Tailwind CSS (#11679)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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>
---
 src/pages/Welcome.tsx              | 172 ++++++++++-------------------
 src/pages/list/card-list/index.tsx |   2 +-
 2 files changed, 61 insertions(+), 113 deletions(-)

diff --git a/src/pages/Welcome.tsx b/src/pages/Welcome.tsx
index 691e97ca..f46b0d12 100644
--- a/src/pages/Welcome.tsx
+++ b/src/pages/Welcome.tsx
@@ -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;
diff --git a/src/pages/list/card-list/index.tsx b/src/pages/list/card-list/index.tsx
index 3c6951d9..f450c911 100644
--- a/src/pages/list/card-list/index.tsx
+++ b/src/pages/list/card-list/index.tsx
@@ -17,7 +17,7 @@ const CardList = () => {
   const content = (
     <div className={styles.pageHeaderContent}>
       <p>
-        段落示意：蚂蚁集团务设计平台
+        段落示意：蚂蚁集团设计平台
         ant.design，用最小的工作量，无缝接入蚂蚁集团生态，
         提供跨越设计与开发的体验解决方案。
       </p>