mirror of
https://github.com/ant-design/ant-design.git
synced 2026-02-11 20:09:22 +08:00
Compare commits
1 Commits
feature
...
docs/theme
| Author | SHA1 | Date | |
|---|---|---|---|
|
8f95529432 |
@@ -4,7 +4,6 @@ import {
|
||||
Alert,
|
||||
App,
|
||||
Button,
|
||||
Card,
|
||||
Checkbox,
|
||||
ColorPicker,
|
||||
ConfigProvider,
|
||||
@@ -95,7 +94,7 @@ const ComponentsBlock: React.FC<ComponentsBlockProps> = (props) => {
|
||||
|
||||
return (
|
||||
<ConfigProvider {...config}>
|
||||
<Card className={clsx(containerClassName, styles.container)}>
|
||||
<div className={clsx(containerClassName, styles.container)}>
|
||||
<App>
|
||||
<Flex vertical gap="middle" style={style} className={className}>
|
||||
<ModalPanel title="Ant Design" width="100%">
|
||||
@@ -190,7 +189,7 @@ const ComponentsBlock: React.FC<ComponentsBlockProps> = (props) => {
|
||||
</Flex>
|
||||
</Flex>
|
||||
</App>
|
||||
</Card>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,22 +1,32 @@
|
||||
import React, { useRef, useState } from 'react';
|
||||
import { AntDesignOutlined, UserOutlined } from '@ant-design/icons';
|
||||
import { UserOutlined } from '@ant-design/icons';
|
||||
import { Bubble, Sender } from '@ant-design/x';
|
||||
import type { SenderRef } from '@ant-design/x/es/sender';
|
||||
import { Drawer, Flex, Typography } from 'antd';
|
||||
import type { GetProp } from 'antd';
|
||||
import type { BubbleProps } from '@ant-design/x';
|
||||
import { Button, Drawer, Flex, Space, Splitter, Typography } from 'antd';
|
||||
|
||||
import useLocale from '../../../hooks/useLocale';
|
||||
import type { SiteContextProps } from '../../../theme/slots/SiteContext';
|
||||
import useLocale from '../../../hooks/useLocale';
|
||||
import ComponentsBlock from '../../../pages/index/components/ThemePreview/ComponentsBlock';
|
||||
import usePromptTheme from './usePromptTheme';
|
||||
import usePromptRecommend from './usePromptRecommend';
|
||||
|
||||
const antdLogoSrc = 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg';
|
||||
|
||||
const locales = {
|
||||
cn: {
|
||||
title: 'AI 生成主题',
|
||||
finishTips: '生成完成，对话以重新生成。',
|
||||
placeholder: '描述你想要的主题风格，如：温暖阳光、清新自然、科技感...',
|
||||
recommendTitle: 'AI 推荐主题',
|
||||
loading: '加载中...',
|
||||
},
|
||||
en: {
|
||||
title: 'AI Theme Generator',
|
||||
finishTips: 'Completed. Regenerate by start a new conversation.',
|
||||
placeholder: 'Describe your desired theme style, e.g., warm sunny, fresh natural, tech feel...',
|
||||
recommendTitle: 'AI Recommended',
|
||||
loading: 'Loading...',
|
||||
},
|
||||
};
|
||||
|
||||
@@ -27,12 +37,16 @@ export interface PromptDrawerProps {
|
||||
}
|
||||
|
||||
const PromptDrawer: React.FC<PromptDrawerProps> = ({ open, onClose, onThemeChange }) => {
|
||||
const [locale] = useLocale(locales);
|
||||
// @ts-ignore - useLocale returns type with proper locale key
|
||||
const locale = useLocale(locales) as typeof locales.cn;
|
||||
const localeKey = locale.title === 'AI 生成主题' ? 'cn' : 'en';
|
||||
const [inputValue, setInputValue] = useState('');
|
||||
|
||||
const senderRef = useRef<SenderRef>(null);
|
||||
|
||||
const [submitPrompt, loading, prompt, resText, cancelRequest] = usePromptTheme(onThemeChange);
|
||||
const { recommendations, loading: recommendLoading, fetch: fetchRecommendations } =
|
||||
usePromptRecommend(localeKey);
|
||||
|
||||
const handleSubmit = (value: string) => {
|
||||
submitPrompt(value);
|
||||
@@ -44,9 +58,13 @@ const PromptDrawer: React.FC<PromptDrawerProps> = ({ open, onClose, onThemeChang
|
||||
// Focus the Sender component when drawer opens
|
||||
senderRef.current.focus?.();
|
||||
}
|
||||
// Fetch AI recommendations when drawer opens
|
||||
if (isOpen) {
|
||||
fetchRecommendations(`prompt-drawer-${Date.now()}`);
|
||||
}
|
||||
};
|
||||
|
||||
const items = React.useMemo<GetProp<typeof Bubble.List, 'items'>>(() => {
|
||||
const items = React.useMemo<BubbleProps['ListProps']['items']>(() => {
|
||||
if (!prompt) {
|
||||
return [];
|
||||
}
|
||||
@@ -62,10 +80,9 @@ const PromptDrawer: React.FC<PromptDrawerProps> = ({ open, onClose, onThemeChang
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
role: 'system',
|
||||
placement: 'start',
|
||||
content: resText,
|
||||
avatar: <AntDesignOutlined />,
|
||||
avatar: <img src={antdLogoSrc} alt="Ant Design" style={{ width: 28, height: 28 }} />,
|
||||
loading: !resText,
|
||||
contentRender: (content: string) => (
|
||||
<Typography>
|
||||
@@ -81,7 +98,7 @@ const PromptDrawer: React.FC<PromptDrawerProps> = ({ open, onClose, onThemeChang
|
||||
role: 'divider',
|
||||
placement: 'start',
|
||||
content: locale.finishTips,
|
||||
avatar: <AntDesignOutlined />,
|
||||
avatar: <img src={antdLogoSrc} alt="Ant Design" style={{ width: 28, height: 28 }} />,
|
||||
shape: 'corner',
|
||||
});
|
||||
}
|
||||
@@ -89,29 +106,75 @@ const PromptDrawer: React.FC<PromptDrawerProps> = ({ open, onClose, onThemeChang
|
||||
return nextItems;
|
||||
}, [prompt, resText, loading, locale.finishTips]);
|
||||
|
||||
const prompts = React.useMemo<string[]>(() => recommendations, [recommendations]);
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
title={locale.title}
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
size={480}
|
||||
width="75vw"
|
||||
placement="right"
|
||||
afterOpenChange={handleAfterOpenChange}
|
||||
>
|
||||
<Flex vertical style={{ height: '100%' }}>
|
||||
<Bubble.List style={{ flex: 1, overflow: 'auto' }} items={items} />
|
||||
<Sender
|
||||
ref={senderRef}
|
||||
style={{ flex: 0 }}
|
||||
value={inputValue}
|
||||
onChange={setInputValue}
|
||||
onSubmit={handleSubmit}
|
||||
loading={loading}
|
||||
onCancel={cancelRequest}
|
||||
/>
|
||||
</Flex>
|
||||
<Splitter style={{ height: '100%' }}>
|
||||
{/* 左侧预览区域 */}
|
||||
<Splitter.Panel defaultSize="50%" min="30%" max="70%">
|
||||
<Flex vertical style={{ height: '100%', padding: '0 8px' }}>
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: '24px 8px 8px',
|
||||
overflow: 'auto',
|
||||
}}
|
||||
>
|
||||
<ComponentsBlock className="prompt-drawer-preview" />
|
||||
</div>
|
||||
</Flex>
|
||||
</Splitter.Panel>
|
||||
|
||||
{/* 右侧对话区域 */}
|
||||
<Splitter.Panel defaultSize="50%" min="30%" max="70%">
|
||||
<Flex vertical gap={12} style={{ height: '100%', padding: '0 8px' }}>
|
||||
{!prompt && (
|
||||
<Flex vertical gap={8}>
|
||||
<Typography.Text type="secondary" style={{ fontSize: 12 }}>
|
||||
{locale.recommendTitle}
|
||||
</Typography.Text>
|
||||
<Space wrap size="small">
|
||||
{recommendLoading && (
|
||||
<Button size="small" disabled>
|
||||
{locale.loading}
|
||||
</Button>
|
||||
)}
|
||||
{prompts.map((theme) => (
|
||||
<Button
|
||||
key={theme}
|
||||
size="small"
|
||||
onClick={() => handleSubmit(theme)}
|
||||
style={{ borderRadius: 6 }}
|
||||
>
|
||||
{theme}
|
||||
</Button>
|
||||
))}
|
||||
</Space>
|
||||
</Flex>
|
||||
)}
|
||||
<Bubble.List style={{ flex: 1, overflow: 'auto' }} items={items} />
|
||||
<Sender
|
||||
ref={senderRef}
|
||||
value={inputValue}
|
||||
onChange={setInputValue}
|
||||
onSubmit={handleSubmit}
|
||||
loading={loading}
|
||||
onCancel={cancelRequest}
|
||||
placeholder={locale.placeholder}
|
||||
/>
|
||||
</Flex>
|
||||
</Splitter.Panel>
|
||||
</Splitter>
|
||||
</Drawer>
|
||||
);
|
||||
};
|
||||
|
||||
export default PromptDrawer;
|
||||
export default PromptDrawer;
|
||||
124
.dumi/theme/common/ThemeSwitch/usePromptRecommend.ts
Normal file
124
.dumi/theme/common/ThemeSwitch/usePromptRecommend.ts
Normal file
@@ -0,0 +1,124 @@
|
||||
import { XStream } from '@ant-design/x-sdk';
|
||||
import { useRef, useState } from 'react';
|
||||
cn: {
|
||||
recommendPrompt:
|
||||
'请推荐 6 个适合 Ant Design 组件库的主题风格的名称，每个名称 4-6 个字，用逗号分隔。只返回主题名称，不要其他内容。',
|
||||
},
|
||||
en: {
|
||||
recommendPrompt:
|
||||
'Recommend 6 theme style names for Ant Design component library, each name 2-4 words, separated by commas. Return only theme names, nothing else.',
|
||||
},
|
||||
};
|
||||
|
||||
const fetchRecommendations = async (
|
||||
localeKey: keyof typeof locales,
|
||||
abortSignal?: AbortSignal,
|
||||
): Promise<string[]> => {
|
||||
const options = {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
query: locales[localeKey].recommendPrompt,
|
||||
userId: 'AntDesignSite',
|
||||
}),
|
||||
signal: abortSignal,
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch('https://api.x.ant.design/api/agent_tbox_antd', options);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
if (!response.body) {
|
||||
throw new Error('Response body is null');
|
||||
}
|
||||
|
||||
let fullContent = '';
|
||||
|
||||
for await (const chunk of XStream({
|
||||
readableStream: response.body,
|
||||
})) {
|
||||
if (chunk.event === 'message') {
|
||||
const data = JSON.parse(chunk.data) as {
|
||||
lane: string;
|
||||
payload: string;
|
||||
};
|
||||
|
||||
const payload = JSON.parse(data.payload) as {
|
||||
text: string;
|
||||
};
|
||||
|
||||
fullContent += payload.text || '';
|
||||
}
|
||||
}
|
||||
|
||||
// Parse theme names from response
|
||||
const text = fullContent.replace(/```json\s*|\s*```/g, '').trim();
|
||||
const items = text.split(/,|，|\n/).map((item) => item.trim()).filter(Boolean);
|
||||
const result = items.slice(0, 6);
|
||||
|
||||
// If parsing failed or got no results, use fallback
|
||||
if (result.length === 0) {
|
||||
if (localeKey === 'cn') {
|
||||
return ['禅意简约', '科技蓝调', '温暖暖橙', '清新森绿', '优雅紫罗兰', '深色暗夜'];
|
||||
}
|
||||
return ['Zen Minimal', 'Tech Blue', 'Warm Orange', 'Fresh Green', 'Elegant Purple', 'Dark Night'];
|
||||
}
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.error('Error in fetchRecommendations:', error);
|
||||
// Return fallback themes
|
||||
return localeKey === 'cn'
|
||||
? ['禅意简约', '科技蓝调', '温暖暖橙', '清新森绿', '优雅紫罗兰', '深色暗夜']
|
||||
: ['Zen Minimal', 'Tech Blue', 'Warm Orange', 'Fresh Green', 'Elegant Purple', 'Dark Night'];
|
||||
}
|
||||
};
|
||||
|
||||
export default function usePromptRecommend(localeKey: keyof typeof locales = 'cn') {
|
||||
const [recommendations, setRecommendations] = useState<string[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const abortControllerRef = useRef<AbortController | null>(null);
|
||||
const fetchedKeyRef = useRef<string>('');
|
||||
|
||||
const fetch = async (key: string) => {
|
||||
if (fetchedKeyRef.current === key) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Cancel previous request if it exists
|
||||
if (abortControllerRef.current) {
|
||||
abortControllerRef.current.abort();
|
||||
}
|
||||
|
||||
const abortController = new AbortController();
|
||||
abortControllerRef.current = abortController;
|
||||
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const items = await fetchRecommendations(localeKey, abortController.signal);
|
||||
setRecommendations(items);
|
||||
fetchedKeyRef.current = key;
|
||||
} catch (error) {
|
||||
if (!(error instanceof Error && error.name === 'AbortError')) {
|
||||
console.error('Failed to fetch recommendations:', error);
|
||||
// Use fallback on error
|
||||
setRecommendations(
|
||||
localeKey === 'cn'
|
||||
? ['禅意简约', '科技蓝调', '温暖暖橙', '清新森绿', '优雅紫罗兰', '深色暗夜']
|
||||
: ['Zen Minimal', 'Tech Blue', 'Warm Orange', 'Fresh Green', 'Elegant Purple', 'Dark Night'],
|
||||
);
|
||||
fetchedKeyRef.current = key;
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
abortControllerRef.current = null;
|
||||
}
|
||||
};
|
||||
|
||||
return { recommendations, loading, fetch };
|
||||
}
|
||||
48
AGENTS.md
48
AGENTS.md
@@ -460,8 +460,7 @@ export function TestComp(props) {
|
||||
|
||||
3. **开发者视角**：用面向开发者的角度和叙述方式撰写 CHANGELOG，描述"用户的原始问题"和"对开发者的影响"，而非"具体的解决代码"。
|
||||
- ❌ 修复 Typography 的 DOM 结构问题。
|
||||
- ✅ 💄 Typography 重构并简化 DOM 结构，修复内容空格丢失的问题。（中文：Emoji + 组件名 + 描述，无冒号）
|
||||
- ✅ 💄 Refactor Typography DOM structure and fix content space loss.（英文：Emoji + 动词 + 组件名 + 描述）
|
||||
- ✅ Typography: 💄 重构并简化了 Typography 的 DOM 结构，修复了内容空格丢失的问题。
|
||||
|
||||
4. **版本与命名**：
|
||||
- 新增属性必须符合 antd API 命名规则
|
||||
@@ -473,26 +472,15 @@ export function TestComp(props) {
|
||||
|
||||
#### 🎨 格式与结构规范
|
||||
|
||||
1. **条目顺序与符号**：
|
||||
- **Emoji 置顶**：每条条目以 Emoji 开头（如 🐞 💄 🆕），后接内容
|
||||
- **不加冒号**：组件名后不使用英文冒号，直接接描述
|
||||
1. **单条条目结构**：`组件名称: 图标 描述内容 [#PR号](链接) [@贡献者]`
|
||||
- 组件名**无需加粗**，后接英文冒号和空格
|
||||
|
||||
2. **组件名要求**：
|
||||
- **每条必含组件名**：每条 changelog 正文中都必须出现对应组件名（分组标题下的子条同样要在句中出现组件名）
|
||||
- **组件名不用反引号**：组件名（如 Modal、Drawer、Button、Upload.Dragger）不使用 `` ` `` 包裹；属性名、API、token 等仍用反引号
|
||||
2. **分组逻辑**：
|
||||
- **多项改动**：同一组件有 2 条及以上改动时，使用 `- 组件名` 作为分类标题（不加粗），具体条目缩进排列
|
||||
- **单项改动**：直接编写单行条目，不设分类标题
|
||||
|
||||
3. **中英文条目句式**：
|
||||
- **中文**：`Emoji 组件名 动词/描述 … [#PR](链接) [@贡献者]`
|
||||
例：`🐞 Button 修复暗色主题下 \`color\` 的 \`hover\` 与 \`active\` 状态颜色相反的问题。`
|
||||
- **英文**：`Emoji 动词 组件名 描述 … [#PR](链接) [@贡献者]`（动词在前，如 Fix / Add / Support / Remove / Disable / Refactor / Improve / Change）
|
||||
例：`🐞 Fix Button reversed \`hover\` and \`active\` colors for \`color\` in dark theme.`
|
||||
|
||||
4. **分组逻辑**：
|
||||
- **多项改动**：同一组件有 2 条及以上改动时，使用 `- 组件名` 作为分类标题（不加粗），具体条目缩进排列，子条中仍须包含组件名
|
||||
- **单项改动**：直接写单行条目，不设分类标题
|
||||
|
||||
5. **文本细节**：
|
||||
- **代码包裹**：所有属性名、方法名、API、`role`/`aria` 属性必须使用反引号 `` ` `` 包裹（组件名除外）
|
||||
3. **文本细节**：
|
||||
- **代码包裹**：所有属性名、方法名、API、`role`/`aria` 属性必须使用反引号 `` ` `` 包裹
|
||||
- **中英空格**：中文与英文、数字、链接、`@` 用户名之间必须保留 **一个空格**
|
||||
|
||||
#### 🏷️ Emoji 规范（严格执行）
|
||||
@@ -514,26 +502,18 @@ export function TestComp(props) {
|
||||
|
||||
#### 💡 输出示例参考
|
||||
|
||||
**中文版**（Emoji 在前、无冒号、每条含组件名、属性用反引号）：
|
||||
**中文版**：
|
||||
|
||||
```markdown
|
||||
- ConfigProvider
|
||||
- 🆕 ConfigProvider 支持 Modal 和 Drawer 的 `maskClosable` 全局配置。[#56739](链接) [@luozz1994](链接)
|
||||
- Button
|
||||
- 🐞 Button 修复暗色主题下 `color` 的 `hover` 与 `active` 状态颜色相反的问题。[#56872](链接) [@zombieJ](链接)
|
||||
- 💄 Modal & Drawer 默认关闭蒙层 blur 效果。[#56781](链接) [@aojunhao123](链接)
|
||||
- 🐞 Tooltip & Popover 修复弹出层动画起始位置偏左的问题。[#56887](链接) [@zombieJ](链接)
|
||||
- 🐞 Drawer: 修复 Drawer.PurePanel 无法响应鼠标交互的问题。[#56387](https://github.com/ant-design/ant-design/pull/56387) [@wanpan11](https://github.com/wanpan11)
|
||||
- 🐞 Select: 修复 Select `options` 属性透传至原生 DOM 导致 React 未知属性警告的问题。[#56341](https://github.com/ant-design/ant-design/pull/56341) [@afc163](https://github.com/afc163)
|
||||
```
|
||||
|
||||
**英文版**（Emoji 在前、动词在前、无冒号、每条含组件名）：
|
||||
**English Version**：
|
||||
|
||||
```markdown
|
||||
- ConfigProvider
|
||||
- 🆕 Support ConfigProvider global configuration of `maskClosable` for Modal and Drawer. [#56739](link) [@luozz1994](link)
|
||||
- Button
|
||||
- 🐞 Fix Button reversed `hover` and `active` colors for `color` in dark theme. [#56872](link) [@zombieJ](link)
|
||||
- 💄 Disable Modal & Drawer mask blur effect by default. [#56781](link) [@aojunhao123](link)
|
||||
- 🐞 Fix Tooltip & Popover popup animation starting position being shifted to the left. [#56887](link) [@zombieJ](link)
|
||||
- 🐞 Drawer: Fix Drawer.PurePanel failing to respond to mouse interactions. [#56387](https://github.com/ant-design/ant-design/pull/56387) [@wanpan11](https://github.com/wanpan11)
|
||||
- 🐞 Select: Fix Select `options` props leaking to DOM elements and causing React unknown-prop warnings. [#56341](https://github.com/ant-design/ant-design/pull/56341) [@afc163](https://github.com/afc163)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
@@ -15,48 +15,6 @@ tag: vVERSION
|
||||
|
||||
---
|
||||
|
||||
## 6.3.0
|
||||
|
||||
`2026-02-10`
|
||||
|
||||
- ConfigProvider
|
||||
- 🆕 Support ConfigProvider global configuration of `maskClosable` for Modal and Drawer. [#56739](https://github.com/ant-design/ant-design/pull/56739) [@luozz1994](https://github.com/luozz1994)
|
||||
- 🆕 Support ConfigProvider `suffixIcon` global configuration for DatePicker and TimePicker. [#56709](https://github.com/ant-design/ant-design/pull/56709) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 🆕 Support ConfigProvider `expandIcon` and `loadingIcon` global configuration for Cascader. [#56482](https://github.com/ant-design/ant-design/pull/56482) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 🆕 Support ConfigProvider `scroll` global configuration for Table. [#56628](https://github.com/ant-design/ant-design/pull/56628) [@Clayton](https://github.com/Clayton)
|
||||
- 🆕 Support ConfigProvider `className` and `style` configuration for App, and `arrow` prop for ColorPicker. [#56573](https://github.com/ant-design/ant-design/pull/56573) [@zombieJ](https://github.com/zombieJ)
|
||||
- 🆕 Support ConfigProvider `loadingIcon` global configuration for Button. [#56439](https://github.com/ant-design/ant-design/pull/56439) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 🆕 Support ConfigProvider `rangePicker.separator` global configuration. [#56499](https://github.com/ant-design/ant-design/pull/56499) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 🆕 Support ConfigProvider `tooltipIcon` and `tooltipProps` global configuration for Form. [#56372](https://github.com/ant-design/ant-design/pull/56372) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- Upload
|
||||
- 🆕 Add Upload `classNames.trigger` and `styles.trigger` props. [#56578](https://github.com/ant-design/ant-design/pull/56578) [@QdabuliuQ](https://github.com/QdabuliuQ)
|
||||
- 🆕 Support Upload.Dragger `onDoubleClick` event. [#56579](https://github.com/ant-design/ant-design/pull/56579) [@ug-hero](https://github.com/ug-hero)
|
||||
- 🐞 Fix Upload missing default height for `picture-card` / `picture-circle` parent nodes. [#56864](https://github.com/ant-design/ant-design/pull/56864) [@wanpan11](https://github.com/wanpan11)
|
||||
- 🆕 Add Grid `xxxl` (1920px) breakpoint to adapt to FHD screens. [#56825](https://github.com/ant-design/ant-design/pull/56825) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 🆕 Support Switch `indicator` customization for semantic structure. [#56710](https://github.com/ant-design/ant-design/pull/56710) [@zombieJ](https://github.com/zombieJ)
|
||||
- Button
|
||||
- 🐞 Fix Button reversed `hover` and `active` colors for `color` in dark theme. [#56872](https://github.com/ant-design/ant-design/pull/56872) [@zombieJ](https://github.com/zombieJ)
|
||||
- 🐞 Fix Button border size not following Design Token `lineWidth`. [#56683](https://github.com/ant-design/ant-design/pull/56683) [@zombieJ](https://github.com/zombieJ)
|
||||
- Select
|
||||
- 💄 Remove Select redundant `-content-value` div DOM in single mode to optimize semantic structure, allowing override via `classNames` and `styles`. [#56811](https://github.com/ant-design/ant-design/pull/56811) [@zombieJ](https://github.com/zombieJ)
|
||||
- 🐞 Fix Select `notFoundContent` not taking effect. [#56756](https://github.com/ant-design/ant-design/pull/56756) [@QdabuliuQ](https://github.com/QdabuliuQ)
|
||||
- Radio
|
||||
- 🐞 Fix Radio.Group extra right margin for radio items when vertically aligned. [#56909](https://github.com/ant-design/ant-design/pull/56909) [@jany55555](https://github.com/jany55555)
|
||||
- 💄 Remove Radio `-inner` DOM node of `icon` sub-element for better semantic structure adaptation. [#56783](https://github.com/ant-design/ant-design/pull/56783) [@zombieJ](https://github.com/zombieJ)
|
||||
- 💄 Disable Modal & Drawer mask blur effect by default. [#56781](https://github.com/ant-design/ant-design/pull/56781) [@aojunhao123](https://github.com/aojunhao123)
|
||||
- 🐞 Fix Tooltip & Popover popup animation starting position being shifted to the left. [#56887](https://github.com/ant-design/ant-design/pull/56887) [@zombieJ](https://github.com/zombieJ)
|
||||
- 🐞 Fix List color-related tokens not working for deprecated component config. [#56913](https://github.com/ant-design/ant-design/pull/56913) [@zombieJ](https://github.com/zombieJ)
|
||||
- 🛠 Refactor Spin DOM structure to align across different scenarios and support full Semantic Structure. [#56852](https://github.com/ant-design/ant-design/pull/56852) [@zombieJ](https://github.com/zombieJ)
|
||||
- ⌨️ ♿ Add Icon accessibility names to the search icon SVG to improve screen reader support. [#56521](https://github.com/ant-design/ant-design/pull/56521) [@huangkevin-apr](https://github.com/huangkevin-apr)
|
||||
- 🐞 Fix Cascader filter list resetting immediately when closing on selection in search mode, affecting UX. [#56764](https://github.com/ant-design/ant-design/pull/56764) [@zombieJ](https://github.com/zombieJ)
|
||||
- ⌨️ ♿ Improve Tree accessibility support. [#56716](https://github.com/ant-design/ant-design/pull/56716) [@aojunhao123](https://github.com/aojunhao123)
|
||||
- 🐞 Support ColorPicker semantic structure for selection block, and fix `root` semantic being incorrectly applied to popup elements. [#56607](https://github.com/ant-design/ant-design/pull/56607) [@zombieJ](https://github.com/zombieJ)
|
||||
- 💄 Change Avatar default value of `size` from `default` to `medium` for consistency. [#56440](https://github.com/ant-design/ant-design/pull/56440) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 💄 Remove Checkbox `-inner` DOM node of `icon` sub-element for better semantic structure adaptation. [#56783](https://github.com/ant-design/ant-design/pull/56783) [@zombieJ](https://github.com/zombieJ)
|
||||
- MISC
|
||||
- 🐞 MISC: Fix React Compiler compatibility in UMD version, now disabled by default. [#56830](https://github.com/ant-design/ant-design/pull/56830) [@zombieJ](https://github.com/zombieJ)
|
||||
- 🛠 Streamline `styles` and `classNames` type definitions for better standardization. [#56758](https://github.com/ant-design/ant-design/pull/56758) [@crazyair](https://github.com/crazyair)
|
||||
|
||||
## 6.2.3
|
||||
|
||||
`2026-02-02`
|
||||
|
||||
@@ -15,48 +15,6 @@ tag: vVERSION
|
||||
|
||||
---
|
||||
|
||||
## 6.3.0
|
||||
|
||||
`2026-02-10`
|
||||
|
||||
- ConfigProvider
|
||||
- 🆕 ConfigProvider 支持 Modal 和 Drawer 的 `maskClosable` 全局配置。[#56739](https://github.com/ant-design/ant-design/pull/56739) [@luozz1994](https://github.com/luozz1994)
|
||||
- 🆕 ConfigProvider 支持 DatePicker 和 TimePicker 的 `suffixIcon` 全局配置。[#56709](https://github.com/ant-design/ant-design/pull/56709) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 🆕 ConfigProvider 支持 Cascader 的 `expandIcon` 和 `loadingIcon` 全局配置。[#56482](https://github.com/ant-design/ant-design/pull/56482) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 🆕 ConfigProvider 支持 Table 的 `scroll` 全局配置。[#56628](https://github.com/ant-design/ant-design/pull/56628) [@Clayton](https://github.com/Clayton)
|
||||
- 🆕 ConfigProvider 支持配置 App 的 `className` 与 `style`，以及 ColorPicker 的 `arrow` 属性。[#56573](https://github.com/ant-design/ant-design/pull/56573) [@zombieJ](https://github.com/zombieJ)
|
||||
- 🆕 ConfigProvider 支持 Button 的 `loadingIcon` 全局配置。[#56439](https://github.com/ant-design/ant-design/pull/56439) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 🆕 ConfigProvider 支持 `rangePicker.separator` 全局配置。[#56499](https://github.com/ant-design/ant-design/pull/56499) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 🆕 ConfigProvider 支持 Form 的 `tooltipIcon` 和 `tooltipProps` 全局配置。[#56372](https://github.com/ant-design/ant-design/pull/56372) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- Upload
|
||||
- 🆕 Upload 新增 `classNames.trigger` 和 `styles.trigger` 属性。[#56578](https://github.com/ant-design/ant-design/pull/56578) [@QdabuliuQ](https://github.com/QdabuliuQ)
|
||||
- 🆕 Upload.Dragger 支持 `onDoubleClick` 事件。[#56579](https://github.com/ant-design/ant-design/pull/56579) [@ug-hero](https://github.com/ug-hero)
|
||||
- 🐞 Upload 修复 `picture-card` / `picture-circle` 父节点缺少默认高度的问题。[#56864](https://github.com/ant-design/ant-design/pull/56864) [@wanpan11](https://github.com/wanpan11)
|
||||
- 🆕 Grid 新增 `xxxl`（1920px）断点以适应 FHD 屏幕。[#56825](https://github.com/ant-design/ant-design/pull/56825) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 🆕 Switch 语义化结构支持 `indicator` 定制。[#56710](https://github.com/ant-design/ant-design/pull/56710) [@zombieJ](https://github.com/zombieJ)
|
||||
- Button
|
||||
- 🐞 Button 修复暗色主题下 `color` 的 `hover` 与 `active` 状态颜色相反的问题。[#56872](https://github.com/ant-design/ant-design/pull/56872) [@zombieJ](https://github.com/zombieJ)
|
||||
- 🐞 Button 修复边框尺寸未跟随 Design Token `lineWidth` 的问题。[#56683](https://github.com/ant-design/ant-design/pull/56683) [@zombieJ](https://github.com/zombieJ)
|
||||
- Select
|
||||
- 💄 Select 移除单选模式下额外的 `-content-value` div DOM，优化语义化结构并支持通过 `classNames` 与 `styles` 覆盖。[#56811](https://github.com/ant-design/ant-design/pull/56811) [@zombieJ](https://github.com/zombieJ)
|
||||
- 🐞 Select 修复 `notFoundContent` 不生效的问题。[#56756](https://github.com/ant-design/ant-design/pull/56756) [@QdabuliuQ](https://github.com/QdabuliuQ)
|
||||
- Radio
|
||||
- 🐞 Radio.Group 修复垂直排列时单选项出现多余右边距的问题。[#56909](https://github.com/ant-design/ant-design/pull/56909) [@jany55555](https://github.com/jany55555)
|
||||
- 💄 Radio 移除 `icon` 子元素 `-inner` DOM 节点以更好适配语义化结构。[#56783](https://github.com/ant-design/ant-design/pull/56783) [@zombieJ](https://github.com/zombieJ)
|
||||
- 💄 Modal & Drawer 默认关闭蒙层 blur 效果。[#56781](https://github.com/ant-design/ant-design/pull/56781) [@aojunhao123](https://github.com/aojunhao123)
|
||||
- 🐞 Tooltip & Popover 修复弹出层动画起始位置偏左的问题。[#56887](https://github.com/ant-design/ant-design/pull/56887) [@zombieJ](https://github.com/zombieJ)
|
||||
- 🐞 List 修复废弃组件配置的颜色相关 token 不生效的问题。[#56913](https://github.com/ant-design/ant-design/pull/56913) [@zombieJ](https://github.com/zombieJ)
|
||||
- 🛠 Spin 重构 DOM 结构以对齐不同场景，并支持全量语义化结构（Semantic Structure）。[#56852](https://github.com/ant-design/ant-design/pull/56852) [@zombieJ](https://github.com/zombieJ)
|
||||
- ⌨️ ♿ Icon 为搜索图标 SVG 添加无障碍名称，改善屏幕阅读器支持。[#56521](https://github.com/ant-design/ant-design/pull/56521) [@huangkevin-apr](https://github.com/huangkevin-apr)
|
||||
- 🐞 Cascader 修复搜索模式下选择选项并关闭时，过滤列表立即还原影响体验的问题。[#56764](https://github.com/ant-design/ant-design/pull/56764) [@zombieJ](https://github.com/zombieJ)
|
||||
- ⌨️ ♿ Tree 优化无障碍支持。[#56716](https://github.com/ant-design/ant-design/pull/56716) [@aojunhao123](https://github.com/aojunhao123)
|
||||
- 🐞 ColorPicker 选择块支持语义化结构，并修复 `root` 语义化错误应用到弹出元素的问题。[#56607](https://github.com/ant-design/ant-design/pull/56607) [@zombieJ](https://github.com/zombieJ)
|
||||
- 💄 Avatar 将 `size` 默认值从 `default` 改为 `medium` 以保持一致性。[#56440](https://github.com/ant-design/ant-design/pull/56440) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 💄 Checkbox 移除 `icon` 子元素 `-inner` DOM 节点以更好适配语义化结构。[#56783](https://github.com/ant-design/ant-design/pull/56783) [@zombieJ](https://github.com/zombieJ)
|
||||
- MISC
|
||||
- 🐞 MISC: 修复 UMD 版本中 React Compiler 兼容性问题，现已默认关闭。[#56830](https://github.com/ant-design/ant-design/pull/56830) [@zombieJ](https://github.com/zombieJ)
|
||||
- 🛠 精简 `styles` 和 `classNames` 类型定义，使其更规范。[#56758](https://github.com/ant-design/ant-design/pull/56758) [@crazyair](https://github.com/crazyair)
|
||||
|
||||
## 6.2.3
|
||||
|
||||
`2026-02-02`
|
||||
|
||||
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
|
||||
import { Modal } from 'antd';
|
||||
|
||||
import ConfigProvider from '..';
|
||||
import { Button, InputNumber, Select, Space } from '../..';
|
||||
import { Button, InputNumber, Select } from '../..';
|
||||
import { render, waitFakeTimer } from '../../../tests/utils';
|
||||
import theme from '../../theme';
|
||||
import type { GlobalToken } from '../../theme/internal';
|
||||
@@ -113,21 +113,6 @@ describe('ConfigProvider.Theme', () => {
|
||||
).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should support Addon component token', () => {
|
||||
const { container } = render(
|
||||
<ConfigProvider theme={{ components: { Addon: { colorText: '#0000FF', algorithm: true } } }}>
|
||||
<Space.Compact>
|
||||
<Space.Addon className="test-addon">Addon Content</Space.Addon>
|
||||
</Space.Compact>
|
||||
</ConfigProvider>,
|
||||
);
|
||||
|
||||
const addon = container.querySelector('.test-addon')!;
|
||||
expect(addon).toHaveStyle({
|
||||
'--ant-color-text': '#0000FF',
|
||||
});
|
||||
});
|
||||
|
||||
it('hashed should be true if not changed', () => {
|
||||
let hashId = 'hashId';
|
||||
|
||||
|
||||
@@ -121,6 +121,10 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token) => {
|
||||
alignItems: 'center',
|
||||
},
|
||||
|
||||
[`&-active:not(${selectItemCls}-option-disabled)`]: {
|
||||
backgroundColor: token.optionActiveBg,
|
||||
},
|
||||
|
||||
[`&-selected:not(${selectItemCls}-option-disabled)`]: {
|
||||
color: token.optionSelectedColor,
|
||||
fontWeight: token.optionSelectedFontWeight,
|
||||
@@ -131,10 +135,6 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token) => {
|
||||
},
|
||||
},
|
||||
|
||||
[`&-active:not(${selectItemCls}-option-disabled)`]: {
|
||||
backgroundColor: token.optionActiveBg,
|
||||
},
|
||||
|
||||
'&-disabled': {
|
||||
[`&${selectItemCls}-option-selected`]: {
|
||||
backgroundColor: token.colorBgContainerDisabled,
|
||||
|
||||
@@ -16066,28 +16066,6 @@ exports[`renders components/space/demo/compact-nested.tsx extend context correct
|
||||
|
||||
exports[`renders components/space/demo/compact-nested.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/space/demo/component-token.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-space-compact"
|
||||
>
|
||||
<div
|
||||
class="ant-space-addon ant-space-addon-compact-item ant-space-addon-compact-first-item css-var-test-id ant-space-addon-variant-outlined"
|
||||
>
|
||||
Addon
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-compact-item ant-btn-compact-last-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Button
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/space/demo/component-token.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/space/demo/debug.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-test-id"
|
||||
|
||||
@@ -4097,26 +4097,6 @@ exports[`renders components/space/demo/compact-nested.tsx correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/space/demo/component-token.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-space-compact"
|
||||
>
|
||||
<div
|
||||
class="ant-space-addon ant-space-addon-compact-item ant-space-addon-compact-first-item css-var-test-id ant-space-addon-variant-outlined"
|
||||
>
|
||||
Addon
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-compact-item ant-btn-compact-last-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Button
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/space/demo/debug.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-test-id"
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
## zh-CN
|
||||
|
||||
使用 `ConfigProvider` 自定义 `Space.Addon` 的主题样式。
|
||||
|
||||
## en-US
|
||||
|
||||
Use `ConfigProvider` to customize the theme of `Space.Addon`.
|
||||
@@ -1,19 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Button, ConfigProvider, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
components: {
|
||||
Addon: { colorText: 'blue', algorithm: true },
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Space.Compact>
|
||||
<Space.Addon>Addon</Space.Addon>
|
||||
<Button type="primary">Button</Button>
|
||||
</Space.Compact>
|
||||
</ConfigProvider>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@@ -34,7 +34,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*37T2R6O9oi0AAA
|
||||
<code src="./demo/debug.tsx" debug>Diverse Child</code>
|
||||
<code src="./demo/gap-in-line.tsx" debug>Flex gap style</code>
|
||||
<code src="./demo/style-class.tsx" version="6.0.0">Custom semantic dom styling</code>
|
||||
<code src="./demo/component-token.tsx" debug>Customize Addon with theme</code>
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@@ -38,7 +38,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*37T2R6O9oi0AAA
|
||||
<code src="./demo/debug.tsx" debug>多样的 Child</code>
|
||||
<code src="./demo/gap-in-line.tsx" debug>Flex gap 样式</code>
|
||||
<code src="./demo/style-class.tsx" version="6.0.0">自定义语义结构的样式和类</code>
|
||||
<code src="./demo/component-token.tsx" debug>自定义主题</code>
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { resetComponent } from '../../style';
|
||||
import { genCompactItemStyle } from '../../style/compact-item';
|
||||
import { genStyleHooks } from '../../theme/internal';
|
||||
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
@@ -8,11 +7,11 @@ import { genCssVar } from '../../theme/util/genStyleUtils';
|
||||
// biome-ignore lint/suspicious/noEmptyInterface: ComponentToken need to be empty by default
|
||||
export interface ComponentToken {}
|
||||
|
||||
interface AddonToken extends FullToken<'Space'> {
|
||||
interface SpaceToken extends FullToken<'Space'> {
|
||||
// Custom token here
|
||||
}
|
||||
|
||||
const genSpaceAddonStyle: GenerateStyle<AddonToken> = (token) => {
|
||||
const genSpaceAddonStyle: GenerateStyle<SpaceToken> = (token) => {
|
||||
const {
|
||||
componentCls,
|
||||
borderRadius,
|
||||
@@ -28,7 +27,7 @@ const genSpaceAddonStyle: GenerateStyle<AddonToken> = (token) => {
|
||||
antCls,
|
||||
} = token;
|
||||
|
||||
const [varName, varRef] = genCssVar(antCls, 'space-addon');
|
||||
const [varName, varRef] = genCssVar(antCls, 'space');
|
||||
|
||||
return {
|
||||
[componentCls]: [
|
||||
@@ -36,7 +35,6 @@ const genSpaceAddonStyle: GenerateStyle<AddonToken> = (token) => {
|
||||
// == Base ==
|
||||
// ==========================================================
|
||||
{
|
||||
...resetComponent(token),
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: 0,
|
||||
@@ -146,7 +144,7 @@ const genSpaceAddonStyle: GenerateStyle<AddonToken> = (token) => {
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genStyleHooks('Addon', (token) => [
|
||||
export default genStyleHooks(['Space', 'Addon'], (token) => [
|
||||
genSpaceAddonStyle(token),
|
||||
genCompactItemStyle(token, { focus: false }),
|
||||
]);
|
||||
|
||||
@@ -49,7 +49,6 @@ import type { ComponentToken as SelectComponentToken } from '../../select/style'
|
||||
import type { ComponentToken as SkeletonComponentToken } from '../../skeleton/style';
|
||||
import type { ComponentToken as SliderComponentToken } from '../../slider/style';
|
||||
import type { ComponentToken as SpaceComponentToken } from '../../space/style';
|
||||
import type { ComponentToken as AddonComponentToken } from '../../space/style/addon';
|
||||
import type { ComponentToken as SpinComponentToken } from '../../spin/style';
|
||||
import type { ComponentToken as SplitterComponentToken } from '../../splitter/style';
|
||||
import type { ComponentToken as StatisticComponentToken } from '../../statistic/style';
|
||||
@@ -69,7 +68,6 @@ import type { ComponentToken as UploadComponentToken } from '../../upload/style'
|
||||
|
||||
export interface ComponentTokenMap {
|
||||
Affix?: AffixComponentToken;
|
||||
Addon?: AddonComponentToken;
|
||||
Alert?: AlertComponentToken;
|
||||
Anchor?: AnchorComponentToken;
|
||||
Avatar?: AvatarComponentToken;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "antd",
|
||||
"version": "6.3.0",
|
||||
"version": "6.2.3",
|
||||
"description": "An enterprise-class UI design language and React components implementation",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
|
||||
Reference in New Issue
Block a user