From 13555bfa4f4b30ded2ba25047f3fa8404789cf83 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Mon, 21 Jul 2025 13:31:37 +0800 Subject: [PATCH] site: fix site style issue (#54247) Co-authored-by: afc163 --- .../builtins/FlexWithImagePreview/index.tsx | 62 ++++++++++++++++ .dumi/theme/builtins/ImagePreview/index.tsx | 2 +- .dumi/theme/common/styles/Markdown.tsx | 36 +++++----- .dumi/theme/slots/Content/index.tsx | 14 ++-- components/icon/index.zh-CN.md | 2 +- docs/spec/lightweight.en-US.md | 44 +++++------- docs/spec/lightweight.zh-CN.md | 42 +++++------ docs/spec/stay.en-US.md | 70 +++++++------------ docs/spec/stay.zh-CN.md | 70 +++++++------------ 9 files changed, 173 insertions(+), 169 deletions(-) create mode 100644 .dumi/theme/builtins/FlexWithImagePreview/index.tsx diff --git a/.dumi/theme/builtins/FlexWithImagePreview/index.tsx b/.dumi/theme/builtins/FlexWithImagePreview/index.tsx new file mode 100644 index 0000000000..97c20682c4 --- /dev/null +++ b/.dumi/theme/builtins/FlexWithImagePreview/index.tsx @@ -0,0 +1,62 @@ +import React from 'react'; +import { Flex } from 'antd'; +import type { FlexProps } from 'antd'; +import { createStyles } from 'antd-style'; +import classNames from 'classnames'; + +import ImagePreview from '../ImagePreview'; +import type { ImagePreviewProps } from '../ImagePreview'; + +const isNotEmpty = (val: any) => { + return typeof val !== 'undefined' && val !== null && val !== ''; +}; + +const useStyle = createStyles(({ css, token }) => { + return { + wrapper: css` + color: ${token.colorText}; + font-size: ${token.fontSize}px; + line-height: 2; + `, + title: css` + margin: 1em 0; + `, + description: css` + margin: 1em 0; + padding-inline-start: 0.8em; + color: ${token.colorTextSecondary}; + font-size: 90%; + border-inline-start: 4px solid ${token.colorSplit}; + p { + margin: 0; + } + `, + }; +}); + +interface FlexWithImagePreviewProps { + imagePreviewProps?: ImagePreviewProps; + title?: string; + description?: string; +} + +const FlexWithImagePreview: React.FC< + FlexWithImagePreviewProps & React.PropsWithChildren +> = (props) => { + const { imagePreviewProps, title, description, className, style, children, ...rest } = props; + const { styles } = useStyle(); + if (!title && !description) { + return {children}; + } + return ( + + + {isNotEmpty(title) &&
{title}
} + {isNotEmpty(description) &&
{description}
} + + {children} + + ); +}; + +export default FlexWithImagePreview; diff --git a/.dumi/theme/builtins/ImagePreview/index.tsx b/.dumi/theme/builtins/ImagePreview/index.tsx index 3035aaba63..d74d242a23 100644 --- a/.dumi/theme/builtins/ImagePreview/index.tsx +++ b/.dumi/theme/builtins/ImagePreview/index.tsx @@ -3,7 +3,7 @@ import { Image } from 'antd'; import classNames from 'classnames'; import toArray from 'rc-util/lib/Children/toArray'; -interface ImagePreviewProps { +export interface ImagePreviewProps { className?: string; /** Do not show padding & background */ pure?: boolean; diff --git a/.dumi/theme/common/styles/Markdown.tsx b/.dumi/theme/common/styles/Markdown.tsx index 81920b3ce8..fb41f54f2a 100644 --- a/.dumi/theme/common/styles/Markdown.tsx +++ b/.dumi/theme/common/styles/Markdown.tsx @@ -18,7 +18,7 @@ const GlobalStyle: React.FC = () => { font-size: ${token.fontSize}px; line-height: 2; } - + .highlight { line-height: 1.5; } @@ -208,13 +208,13 @@ const GlobalStyle: React.FC = () => { padding-inline-start: 0.8em; color: ${token.colorTextSecondary}; font-size: 90%; - border-left: 4px solid ${token.colorSplit}; + border-inline-start: 4px solid ${token.colorSplit}; .rtl & { padding-inline-end: 0.8em; padding-inline-start: 0; - border-right: 4px solid ${token.colorSplit}; - border-left: none; + border-inline-end: 4px solid ${token.colorSplit}; + border-inline-start: none; } } @@ -298,11 +298,11 @@ const GlobalStyle: React.FC = () => { border: 1px solid ${token.colorSplit}; &:first-child { - border-left: 1px solid ${token.colorSplit}; + border-inline-start: 1px solid ${token.colorSplit}; } &:last-child { - border-right: 1px solid ${token.colorSplit}; + border-inline-end: 1px solid ${token.colorSplit}; } img { @@ -381,23 +381,23 @@ const GlobalStyle: React.FC = () => { } } - /* + /* Api 表中某些属性用 del 标记，表示已废弃（但仍期望给开发者一个过渡期)用 css 标记出来。仅此而已。 有更多看法？移步讨论区: https://github.com/ant-design/ant-design/discussions/51298 */ - tr:has(td:first-child > del) { - color: ${token.colorWarning} !important; - background-color: ${token.colorWarningBg} !important; - display: var(--antd-site-api-deprecated-display, none); + tr:has(td:first-child > del) { + color: ${token.colorWarning} !important; + background-color: ${token.colorWarningBg} !important; + display: var(--antd-site-api-deprecated-display, none); - del { - color: ${token.colorWarning}; - } - - &:hover del { - text-decoration: none; - } + del { + color: ${token.colorWarning}; } + + &:hover del { + text-decoration: none; + } + } } .grid-demo, diff --git a/.dumi/theme/slots/Content/index.tsx b/.dumi/theme/slots/Content/index.tsx index 8e738db4f0..3a673d5af9 100644 --- a/.dumi/theme/slots/Content/index.tsx +++ b/.dumi/theme/slots/Content/index.tsx @@ -6,16 +6,16 @@ import { FormattedMessage, useRouteMeta } from 'dumi'; import useLayoutState from '../../../hooks/useLayoutState'; import useLocation from '../../../hooks/useLocation'; import ComponentMeta from '../../builtins/ComponentMeta'; +import EditButton from '../../common/EditButton'; +import PrevAndNext from '../../common/PrevAndNext'; import type { DemoContextProps } from '../DemoContext'; import DemoContext from '../DemoContext'; -import SiteContext from '../SiteContext'; -import DocAnchor, { useStyle } from './DocAnchor'; -import Contributors from './Contributors'; -import ColumnCard from './ColumnCard'; -import DocMeta from './DocMeta'; import Footer from '../Footer'; -import PrevAndNext from '../../common/PrevAndNext'; -import EditButton from '../../common/EditButton'; +import SiteContext from '../SiteContext'; +import ColumnCard from './ColumnCard'; +import Contributors from './Contributors'; +import DocAnchor, { useStyle } from './DocAnchor'; +import DocMeta from './DocMeta'; const AvatarPlaceholder: React.FC<{ num?: number }> = ({ num = 6 }) => Array.from({ length: num }).map((_, i) => ( diff --git a/components/icon/index.zh-CN.md b/components/icon/index.zh-CN.md index 6a6e56c8a6..1a3855b4a1 100644 --- a/components/icon/index.zh-CN.md +++ b/components/icon/index.zh-CN.md @@ -203,7 +203,7 @@ ReactDOM.createRoot(mountNode).render(); 这个问题可以通过以下两步解决： -1. 使用 `@ant-design/icons@5.x` 配合 `antd@5.x`，而不是最新版本。 +1. 使用 `@ant-design/icons@5.x` 配合 `antd@5.x`，而不是最新版本。 2. 停止使用 `message`, `Modal` 和 `notification` 的静态方法，改为使用 hooks 版本或 App 提供的实例。 如果无法避免使用静态方法，可以在 App 组件下立刻使用任一一个 icon 组件，以规避静态方法对样式的影响。 diff --git a/docs/spec/lightweight.en-US.md b/docs/spec/lightweight.en-US.md index 7d890c8b16..8dbda88433 100644 --- a/docs/spec/lightweight.en-US.md +++ b/docs/spec/lightweight.en-US.md @@ -7,17 +7,15 @@ title: Keep it Lightweight Fitts's Law is an ergonomic principle that ties the size of a target and its contextual proximity to ease of use. In other words, if a tool is close at hand and large enough to target, then we can improve the user's interaction. Putting tools in context makes for lightweight interaction. -> -> **Fitts's Law**: The time to acquire a target is a function of the distance to and size of the target. It is proportional to the distance to the target and inversely proportional to the width of the target. +> **Fitts's Law**:fittsThe time to acquire a target is a function of the distance to and size of the target. It is proportional to the distance to the target and inversely proportional to the width of the target. --- ## Always-Visible Tools - - example of Always-Visible Tools, from Zhihu - -If an action is critical, expose it directly in the interface and keep it always visible. + + example of Always-Visible Tools, from Zhihu +
@@ -25,11 +23,9 @@ If an action is critical, expose it directly in the interface and keep it always ## Hover-Reveal Tools - - example of Hover-Reveal Tools - - -Instead of making Contextual Tools always visible, we can show them on demand. One way to do this is to reveal the tools when the user pauses the mouse over an object. + + example of Hover-Reveal Tools +
@@ -37,11 +33,9 @@ Instead of making Contextual Tools always visible, we can show them on demand. O ## Toggle-Reveal Tools - - example of Toggle-Reveal Tools - - -Toggle a tool mode for an area or page when the actions are not the main flow. The tools to accomplish this are revealed on the activation of the toggle. + + example of Toggle-Reveal Tools +
@@ -49,18 +43,12 @@ Toggle a tool mode for an area or page when the actions are not the main flow. T ## Visible Area ≠ Clickable Area - - example of hypertext hot spot - - -The clickable area of hypertext is affected by the length of the string in a cell. The whole cell can be set to a hot spot in order to be triggered easier. + + example of hypertext hot spot +
- - example of button hot spot - - -Increase the clickable hot spot to strengthen the responsiveness rather than increase the size of the button. - -> Note that it is especially suited for Mobile. + + example of button hot spot + diff --git a/docs/spec/lightweight.zh-CN.md b/docs/spec/lightweight.zh-CN.md index 6be475300b..a7381715a4 100644 --- a/docs/spec/lightweight.zh-CN.md +++ b/docs/spec/lightweight.zh-CN.md @@ -7,16 +7,15 @@ title: 简化交互 根据费茨法则（Fitts's Law），用户鼠标移动距离越短、对象相对目标越大，用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互。 -> **费茨法则** ：到达目标的时间是到达目标的距离与目标大小的函数，具体：其中：1. D 为设备当前位置和目标位置的距离；2. W 为目标的大小。距离越长，所用时间越长；目标越大，所用时间越短。 +> **费茨法则** ：到达目标的时间是到达目标的距离与目标大小的函数，具体：fitts 其中：1. D 为设备当前位置和目标位置的距离；2. W 为目标的大小。距离越长，所用时间越长；目标越大，所用时间越短。 --- ## 实时可见工具 - - 实时可见工具示例 --摘自知乎 - -如果某个操作非常重要，就应该把它放在界面中，并实时可见。 + + 实时可见工具示例 +
@@ -24,10 +23,9 @@ title: 简化交互 ## 悬停即现工具 - - 悬停即现工具示例 - -如果某个操作不那么重要，或者使用「实时可见工具」过于啰嗦会影响用户阅读时，可以在悬停在该对象上时展示操作项。 + + 悬停即现工具示例 +
@@ -35,11 +33,9 @@ title: 简化交互 ## 开关显示工具 - - 开关显示工具示例 - - -如果某些操作只需要在特定模式时显示，可以通过开关来实现。 + + 开关显示工具示例 +
@@ -47,18 +43,12 @@ title: 简化交互 ## 可视区域 ≠ 可点击区域 - - 文字链热区示例 - - -在使用 Table 时，文字链的点击范围受到文字长短影响，可以设置整个单元格为热区，以便用户触发。 + + 文字链热区示例 +
- - 按钮热区示例 - - -当需要增强按钮的响应性时，可以通过增加用户点击热区的范围，而不是增大按钮形状，来增强响应性，又不降低美感。 - -> 注：在移动端尤其适用。 + + 按钮热区示例 + diff --git a/docs/spec/stay.en-US.md b/docs/spec/stay.en-US.md index 13a48f6e41..0a229a10c6 100644 --- a/docs/spec/stay.en-US.md +++ b/docs/spec/stay.en-US.md @@ -15,32 +15,24 @@ Solve most of problems on the same page and avoid a new one, because the page re ## Overlays - -good example -good example (special case) -bad example + good example (special case) + bad example - - -Double-confirm overlay: Using the Modal to double confirm should be avoided, while affording an opportunity to undo is preferred. +
- -example of Detail Overlay - - -Detail Overlay: Allows an overlay to present additional information when the user clicks or hovers over a link or section of content. - -> Note that when a mouseover event occurs to trigger the Detail Overlay, 0.5-second delay needs to be added, and when the mouse is out, the overlay needs to be closed immediately. + + example of Detail Overlay +
- -example of Input Overlay - - -Input Overlay: Let the user enter small amounts of text on the overlay. + + example of Input Overlay +
@@ -48,19 +40,15 @@ Input Overlay: Let the user enter small amounts of text on the overlay. ## Inlays - -example of List Inlay - - -List Inlay: Works as an effective way to hide detail until needed — while at the same time preserving space on the page for high-level overview information. + + example of List Inlay +
- -example of Tabs - - -Tabs: Provides additional panels of information accessible by tab controls. + + example of Tabs +
@@ -80,24 +68,18 @@ It has long been common practice on the Web to turn each step into a separate pa
- -example of Responsive Disclosure - - -Responsive Disclosure: Make the experience for selecting painless by providing disclosures as quickly as possible, and doing it all in a single-page interface. + + example of Responsive Disclosure +
- -example of Configurator Process - - -Configurator Process: Provides a configurator that allows users to help them accomplish the task or build their own product. + + example of Configurator Process +
- -example of Dialog Overlay Process - - -Dialog Overlay Process: Any page switch is an interruption to the user's mental flow. In addition, any context switch is a chance for a user to leave the site. But sometimes the step-by-step flow is necessary. + + example of Dialog Overlay Process + diff --git a/docs/spec/stay.zh-CN.md b/docs/spec/stay.zh-CN.md index b51c74d089..05e5c6d444 100644 --- a/docs/spec/stay.zh-CN.md +++ b/docs/spec/stay.zh-CN.md @@ -15,31 +15,23 @@ title: 足不出户 ## 覆盖层 - -推荐示例 -推荐示例 -不推荐示例 - - -二次确认覆盖层：避免滥用 Modal 进行二次确认，应该勇敢的让用户去尝试，给用户机会「撤销」即可。 + + 推荐示例 + 推荐示例 + 不推荐示例 +
- -详情覆盖层示例 - - -详情覆盖层：一般在列表中，通过用户「悬停」/「点击」某个区块，在当前页加载该条列表项的更多详情信息。 - -> 注：使用「悬停」激活时，当鼠标移入时，需要设置 0.5 秒左右的延迟触发；当鼠标移出时，立刻关闭覆盖层 + + 详情覆盖层示例 +
- -输入覆盖层示例 - - -输入覆盖层：在覆盖层上，让用户直接进行少量字段的输入。 + + 输入覆盖层示例 +
@@ -47,19 +39,15 @@ title: 足不出户 ## 嵌入层 - -列表嵌入层示例 - - -列表嵌入层：在列表中，显示某条列表项的详情信息，保持上下文不中断。 + + 列表嵌入层示例 +
- -标签页示例 - - -标签页：将多个平级的信息进行整理和分类了，一次只显示一组信息。 + + 标签页示例 +
@@ -79,24 +67,18 @@ title: 足不出户
- -渐进式展现示例 - - -渐进式展现：基于用户的操作/某种特定规则，渐进式展现不同的操作选项。 + + 渐进式展现示例 +
- -配置程序示例 - - -配置程序：通过提供一系列的配置项，帮助用户完成任务或者产品组装。 + + 配置程序示例 +
- -弹出框覆盖层示例 - - -弹出框覆盖层：虽然弹出框的出现会打断用户的心流，但是有时候在弹出框中使用「步骤条」来管理复杂流程也是可行的。 + + 弹出框覆盖层示例 +