From d1cc68e8dce16bbb97bdf9f76ac4f01b35486d27 Mon Sep 17 00:00:00 2001 From: Wanpan Date: Tue, 18 Jun 2024 19:17:40 +0800 Subject: [PATCH] =?UTF-8?q?chroe=EF=BC=9Aupdate=20zh-CN=20dcos=20url?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/api/create-styles.zh-CN.md | 4 ++-- docs/api/create-stylish.zh-CN.md | 2 +- docs/api/theme-provider.zh-CN.md | 6 +++--- docs/best-practice/antd-override.zh-CN.md | 2 +- .../mirgration-less-global-style.zh-CN.md | 2 +- docs/best-practice/nest-element-style.zh-CN.md | 2 +- docs/best-practice/static-message.zh-CN.md | 2 +- docs/guide/compare.zh-CN.md | 2 +- docs/guide/components-usage.zh-CN.md | 4 ++-- docs/guide/create-styles.zh-CN.md | 2 +- docs/guide/custom-theme.zh-CN.md | 2 +- docs/guide/migrate-less-component.zh-CN.md | 2 +- docs/guide/strategy.zh-CN.md | 4 ++-- docs/guide/styled.zh-CN.md | 4 ++-- docs/guide/switch-theme.zh-CN.md | 10 +++++----- docs/index.zh-CN.md | 18 +++++++++--------- 16 files changed, 34 insertions(+), 34 deletions(-) diff --git a/docs/api/create-styles.zh-CN.md b/docs/api/create-styles.zh-CN.md index af91fad3..ea746c90 100644 --- a/docs/api/create-styles.zh-CN.md +++ b/docs/api/create-styles.zh-CN.md @@ -12,7 +12,7 @@ demo: 这是最推荐的使用方式。书写应用样式或者覆写基础组件样式，都可以采用这种写法。 ::: -使用 `createStyles` 可以创建具有作用域的的样式。书写能力上和 DX 基本与 CSS Modules 齐平。并在动态主题写法更方便，能力更强。createStyles 的基础使用方法详见[快速上手 - 样式创建](/guide/create-styles)，本节将重点介绍 createStyles 的 API。 +使用 `createStyles` 可以创建具有作用域的的样式。书写能力上和 DX 基本与 CSS Modules 齐平。并在动态主题写法更方便，能力更强。createStyles 的基础使用方法详见[快速上手 - 样式创建](/zh-CN/guide/create-styles)，本节将重点介绍 createStyles 的 API。 @@ -54,7 +54,7 @@ interface CssObject { CSS 序列化函数，是 createStyles 中的核心 api。该方法底层基于 `emotion/css` 封装，我们做了诸多能力上的强化，例如 支持多个 css 对象级联（ `@emotion/css` 在 v11 之后不再支持级联，相关 [issue](https://github.com/emotion-js/emotion/issues/1186)）、支持 `:where` 选择器等。 -该序列化函数支持 CSS Object，也支持 CSS String。CSS Object 写法默认可以获得 TS 类型提示， CSS String 写法需要结合 [相关插件](/guide/css-in-js-intro#工程化支持) 获得提示能力。 +该序列化函数支持 CSS Object，也支持 CSS String。CSS Object 写法默认可以获得 TS 类型提示， CSS String 写法需要结合 [相关插件](/zh-CN/guide/css-in-js-intro#工程化支持) 获得提示能力。 :::warning{title=注意事项} 与 @emotion/css 的 css 不同，该方法的产物类型为 SerializedStyles，是无法直接应用到 className 上的。我们在 createStyles 中做了一层转换，最终得到的 `styles.xxx` 是 className 字符串。 diff --git a/docs/api/create-stylish.zh-CN.md b/docs/api/create-stylish.zh-CN.md index 4beeda77..9ac3948d 100644 --- a/docs/api/create-stylish.zh-CN.md +++ b/docs/api/create-stylish.zh-CN.md @@ -8,7 +8,7 @@ group: ## 简介 -对于一般的样式诉求，通过 [createStyles](/usage/create-styles) 就可以基本满足，`createStylish` 属于进阶用法。 +对于一般的样式诉求，通过 [createStyles](/zh-CN/usage/create-styles) 就可以基本满足，`createStylish` 属于进阶用法。 在一个复杂的业务系统中，可能会存在一些通用的样式，这些样式颗粒度更细，并不足以形成一个组件。但是如果每次都重复书写即耗费精力，又会有很多重复的代码，一旦设计师要求统一调整设计风格，多次修改的成本极高。为了解决这个问题，`createStylish` 应运而生。 diff --git a/docs/api/theme-provider.zh-CN.md b/docs/api/theme-provider.zh-CN.md index f32aefaa..e5c5b1fb 100644 --- a/docs/api/theme-provider.zh-CN.md +++ b/docs/api/theme-provider.zh-CN.md @@ -23,13 +23,13 @@ ThemeProvider 本质上是一个 React Context 的数据容器，用于为子级 ## 主题切换 -ThemeProvider 默认集成亮暗色主题切换能力，通过 `appearance` props 即可快速完成亮暗色的主题切换。如需详细了解 `antd-style` 的主题切换能力，可以参阅 [主题切换](/guide/switch-theme) 这一部分。 +ThemeProvider 默认集成亮暗色主题切换能力，通过 `appearance` props 即可快速完成亮暗色的主题切换。如需详细了解 `antd-style` 的主题切换能力，可以参阅 [主题切换](/zh-CN/guide/switch-theme) 这一部分。 ## useTheme 用法 -全局顶层包裹 ThemeProvider 后，使用 `useTheme` 获取 theme 对象，其中包含 antd v5 token 主题值、自定义主题、当前的主题外观等方法。 api 详见 [](api/use-theme-mode) +全局顶层包裹 ThemeProvider 后，使用 `useTheme` 获取 theme 对象，其中包含 antd v5 token 主题值、自定义主题、当前的主题外观等方法。 api 详见 [](/zh-CN/api/use-theme-mode) ```tsx | pure import { ThemeProvider, useTheme } from 'antd-style'; @@ -172,7 +172,7 @@ export default () => { :::info{title=全局样式作用域} -在 css-in-js 的世界中，局部作用域非常容易实现。因此应该尽量减少全局作用域的使用（实在不行才用全局作用域）。 这也是 antd v5 中推荐的用法。但如果仍然需全局作用域层面的样式注入，可以使用 [createGlobalStyles](/usage/global-styles) 来完成。 +在 css-in-js 的世界中，局部作用域非常容易实现。因此应该尽量减少全局作用域的使用（实在不行才用全局作用域）。 这也是 antd v5 中推荐的用法。但如果仍然需全局作用域层面的样式注入，可以使用 [createGlobalStyles](/zh-CN/usage/global-styles) 来完成。 ::: diff --git a/docs/best-practice/antd-override.zh-CN.md b/docs/best-practice/antd-override.zh-CN.md index b66b8ec0..1e82e877 100644 --- a/docs/best-practice/antd-override.zh-CN.md +++ b/docs/best-practice/antd-override.zh-CN.md @@ -17,7 +17,7 @@ antd 在 V5 提供了全新的 theme 属性用于自定义，因此如果需要 更多基于 ConfigProvider 的主题定制能力，详见 [聊聊 Ant Design V5 的主题（上）：CSSinJS 动态主题的花活](https://www.yuque.com/antfe/featured/durxuu94nvgvgmzq#vFlnd)。 ::: -antd-style 的 ThemeProvider 是基于 ConfigProvider 的业务层封装，提供业务友好的定制能力，查看：[自定义主题](/guide/custom-theme) +antd-style 的 ThemeProvider 是基于 ConfigProvider 的业务层封装，提供业务友好的定制能力，查看：[自定义主题](/zh-CN/guide/custom-theme) ## 基本覆写 diff --git a/docs/best-practice/mirgration-less-global-style.zh-CN.md b/docs/best-practice/mirgration-less-global-style.zh-CN.md index c7be6cd5..00ebafad 100644 --- a/docs/best-practice/mirgration-less-global-style.zh-CN.md +++ b/docs/best-practice/mirgration-less-global-style.zh-CN.md @@ -13,7 +13,7 @@ group: ## 解决方案 -优先使用 [codemod](/guide/migrate-less-codemod) 一键迁移，该 Codemod 会自动将 Css Modules 语法中的 :global 转换为 antd-style 中的语法。 +优先使用 [codemod](/zh-CN/guide/migrate-less-codemod) 一键迁移，该 Codemod 会自动将 Css Modules 语法中的 :global 转换为 antd-style 中的语法。 如需手动调整，那么直接移除 :global 语法既可。 diff --git a/docs/best-practice/nest-element-style.zh-CN.md b/docs/best-practice/nest-element-style.zh-CN.md index ee6984a0..64ff1038 100644 --- a/docs/best-practice/nest-element-style.zh-CN.md +++ b/docs/best-practice/nest-element-style.zh-CN.md @@ -41,7 +41,7 @@ const useStyles = createStyles(({ css, cx }) => { ## 原理解析 -思路上很简单，因为 `css` 方法产出的始终是[序列化样式对象](/api/create-styles#css)。用 `cx` 包裹 `css` 对象，就会将该对象转成类名 (`acss-xxxx`)。 +思路上很简单，因为 `css` 方法产出的始终是[序列化样式对象](/zh-CN/api/create-styles#css)。用 `cx` 包裹 `css` 对象，就会将该对象转成类名 (`acss-xxxx`)。 ## 相关讨论 diff --git a/docs/best-practice/static-message.zh-CN.md b/docs/best-practice/static-message.zh-CN.md index 603afea9..33bd06ba 100644 --- a/docs/best-practice/static-message.zh-CN.md +++ b/docs/best-practice/static-message.zh-CN.md @@ -19,7 +19,7 @@ group: 主题定制 ## 原理解析 -antd-style 在 `ThemeProvider` 中提供了一个 [`getStaticInstance`](api/theme-provider#消费静态实例方法) 接口，用户可以从中获取集成后的实例。 +antd-style 在 `ThemeProvider` 中提供了一个 [`getStaticInstance`](/zh-CN/api/theme-provider#消费静态实例方法) 接口，用户可以从中获取集成后的实例。 该方法的实现原理也很简单，以 message 为例： diff --git a/docs/guide/compare.zh-CN.md b/docs/guide/compare.zh-CN.md index d33444f1..41464eed 100644 --- a/docs/guide/compare.zh-CN.md +++ b/docs/guide/compare.zh-CN.md @@ -69,7 +69,7 @@ export default () => { 由于 styled 的写法可以保证每一个样式都能形成标准的 React 组件，且样式与样式之间的组合比较方便。因此，它非常适合制作一个从 0 开始建设的业务风格化组件库，或者制作一些具有统一风格的样式组件。 -通过 styled 来声明一系列标准的样式组件，可以极大程度地减少重复的样式代码，并且帮助开发者形成明确的样式语义认知。详见案例：[Typography 风格化组件](/case/styled) +通过 styled 来声明一系列标准的样式组件，可以极大程度地减少重复的样式代码，并且帮助开发者形成明确的样式语义认知。详见案例：[Typography 风格化组件](/zh-CN/case/styled) 如果是在已有一个设计系统的基础上，styled 是不合适的。尤其是 antd v5 本身已经具有很强的动态主题能力基础之上。 diff --git a/docs/guide/components-usage.zh-CN.md b/docs/guide/components-usage.zh-CN.md index 588cd81f..0ed364f0 100644 --- a/docs/guide/components-usage.zh-CN.md +++ b/docs/guide/components-usage.zh-CN.md @@ -114,13 +114,13 @@ export const { createStyles, ThemeProvider } = createInstance({ -`createInstance` 方法详细的 API 请查阅: [createInstance](/api/create-instance)。 +`createInstance` 方法详细的 API 请查阅: [createInstance](/zh-CN/api/create-instance)。 ## 最佳实践建议 在组件研发的场景下，我们建议你使用 `createInstance` 方法来创建一个独立的样式实例，这样可以让你的组件库更加独立可控。自定义 token 的消费使用也更加便捷。 -针对从 less 迁移的部分，我们建议开启 `{ hashPriority: 'low' }` 配置，这样可以通过极小的迁移成本完成 cssinjs 的改造（详见：[组件代码迁移](/guide/migrate-less-component)）。 +针对从 less 迁移的部分，我们建议开启 `{ hashPriority: 'low' }` 配置，这样可以通过极小的迁移成本完成 cssinjs 的改造（详见：[组件代码迁移](/zh-CN/guide/migrate-less-component)）。 针对使用 cssinjs 完全新写的组件，我们建议仍然使用 `{ hashPriority: 'high' }` 配置。并将所有样式实现放置在 `css` 中，有需要的部分再额外添加 className。这样有两点好处： diff --git a/docs/guide/create-styles.zh-CN.md b/docs/guide/create-styles.zh-CN.md index 37680815..cc1c01a9 100644 --- a/docs/guide/create-styles.zh-CN.md +++ b/docs/guide/create-styles.zh-CN.md @@ -111,4 +111,4 @@ const Select = () => { ## API -关于 `createStyles` 方法的详细 API 说明，可以参阅 [createStyles API 文档](/api/create-styles)。 +关于 `createStyles` 方法的详细 API 说明，可以参阅 [createStyles API 文档](/zh-CN/api/create-styles)。 diff --git a/docs/guide/custom-theme.zh-CN.md b/docs/guide/custom-theme.zh-CN.md index 70450cfe..4d573a1a 100644 --- a/docs/guide/custom-theme.zh-CN.md +++ b/docs/guide/custom-theme.zh-CN.md @@ -121,7 +121,7 @@ export default () => ( ); ``` -关于自定义 Token API 的 demo、Typescript 类型定义集成 等详细介绍，可以查阅 [ThemeProvider - 注入自定义 Token 主题](/api/theme-provider#注入自定义-token-主题)。 +关于自定义 Token API 的 demo、Typescript 类型定义集成 等详细介绍，可以查阅 [ThemeProvider - 注入自定义 Token 主题](/zh-CN/api/theme-provider#注入自定义-token-主题)。 :::success{title=应用案例} antd-style 所使用的文档主题包，就自定义了主题包所需的一些自定义 Token，若感兴趣可以前往 [dumi-theme-antd-style](https://dumi-theme-antd-style.arvinx.app/components/dumi-site-provider#demo) 查看。 diff --git a/docs/guide/migrate-less-component.zh-CN.md b/docs/guide/migrate-less-component.zh-CN.md index 526d4e7d..31f55b86 100644 --- a/docs/guide/migrate-less-component.zh-CN.md +++ b/docs/guide/migrate-less-component.zh-CN.md @@ -124,4 +124,4 @@ export const useStyles = createStyles(({ css, prefixCls })=>{ ## 新组件书写方案 -详见：[组件研发](/guide/components-usage#最佳实践建议) +详见：[组件研发](/zh-CN/guide/components-usage#最佳实践建议) diff --git a/docs/guide/strategy.zh-CN.md b/docs/guide/strategy.zh-CN.md index 451fd6b2..8f803f53 100644 --- a/docs/guide/strategy.zh-CN.md +++ b/docs/guide/strategy.zh-CN.md @@ -66,12 +66,12 @@ styled 的语法候选池中有两个库： `styled-component` 和 `emotion`。 此外，在我们实际业务落地测试中发现，95% 的样式书写场景都不会用到组件选择器的语法。只有在需要动画、复合选择器等场景才会用到， 而在这种场景下 `createStyles` 的写法将会更加自然易用。 -在我们看来，组件选择器的语法本质上是因为 styled 不支持创建 className 才不得已提供的补救措施。而为了这 5% 的使用场景再去额外增大 40% 的体积（10kb+），完全不划算。同时，在最终定稿的实现方案中也明确产出了 styled 的语法替换能力方案。详见：[createInstance-兼容 styled-components](/api/create-instance#兼容-styled-主题方案)。 +在我们看来，组件选择器的语法本质上是因为 styled 不支持创建 className 才不得已提供的补救措施。而为了这 5% 的使用场景再去额外增大 40% 的体积（10kb+），完全不划算。同时，在最终定稿的实现方案中也明确产出了 styled 的语法替换能力方案。详见：[createInstance-兼容 styled-components](/zh-CN/api/create-instance#兼容-styled-主题方案)。 因此综合实践案例，结合包体积、使用场景，我们在多次摇摆下最终选择了 `@emotion/styled` 作为 `styled` 语法的样式引擎。 :::info{title=特别说明} -虽然选择了 `@emotion/styled` 作为 styled 语法的样式引擎，但是 antd-style 并没有内置 `styled` 方法，而仅仅默认集成 `@emotion/react` 的 ThemeContext。详情可以查看：[与 styled 集成](/guide/styled) +虽然选择了 `@emotion/styled` 作为 styled 语法的样式引擎，但是 antd-style 并没有内置 `styled` 方法，而仅仅默认集成 `@emotion/react` 的 ThemeContext。详情可以查看：[与 styled 集成](/zh-CN/guide/styled) ::: ### css: 为什么选择 emotion diff --git a/docs/guide/styled.zh-CN.md b/docs/guide/styled.zh-CN.md index 44e5ca63..26aa44f8 100644 --- a/docs/guide/styled.zh-CN.md +++ b/docs/guide/styled.zh-CN.md @@ -68,7 +68,7 @@ StyledButton.defaultProps = { 这也就意味如果想要自定义一个 ThemeContext 作为组件的默认主题，并在 styled 的写法中获取到，就必须要自己实现自己的 styled 方法，但这对于绝大多数组件开发者来说并不现实。 -在 [CSS in JS 写法对比](/guide/compare) 这一章节中，我们认为 styled 这个 api 由于设计缺陷，在未来将会没落。所以我们在 antd-style 中也将只提供 styled 的 ThemeProvider 和 useTheme 的兼容使用方案。 +在 [CSS in JS 写法对比](/zh-CN/guide/compare) 这一章节中，我们认为 styled 这个 api 由于设计缺陷，在未来将会没落。所以我们在 antd-style 中也将只提供 styled 的 ThemeProvider 和 useTheme 的兼容使用方案。 ## styled 与 ThemeProvider 集成 @@ -88,7 +88,7 @@ render( -关于 ThemeProvider 的 styled API 文档，详见: [ThemeProvider - styled 集成配置](/api/theme-provider#styled-集成) +关于 ThemeProvider 的 styled API 文档，详见: [ThemeProvider - styled 集成配置](/zh-CN/api/theme-provider#styled-集成) ## 全局统一集成 styled diff --git a/docs/guide/switch-theme.zh-CN.md b/docs/guide/switch-theme.zh-CN.md index d43c474a..e676860c 100644 --- a/docs/guide/switch-theme.zh-CN.md +++ b/docs/guide/switch-theme.zh-CN.md @@ -14,7 +14,7 @@ demo: ## 1. 亮暗色主题切换 -通过在容器组件 [ThemeProvider](/usage/theme-provider) 上修改 `appearance` props，即可实现主题切换，这是也是动态主题最简单的使用方式。 +通过在容器组件 [ThemeProvider](/zh-CN/usage/theme-provider) 上修改 `appearance` props，即可实现主题切换，这是也是动态主题最简单的使用方式。 ```tsx | pure import { ThemeProvider } from 'antd-style'; @@ -31,10 +31,10 @@ export default () => { -:::warning{title=如果你有使用message等静态方法} +:::warning{title=如果你有使用 message 等静态方法} antd v5 中 message、notification、modal 这三个静态不会响应主题。建议优先使用 hooks 版本的静态方法。 -如果你有使用这三个静态方法的诉求，又同时希望能够响应主题，请查看 [静态方法响应主题](/case/static-method)。 +如果你有使用这三个静态方法的诉求，又同时希望能够响应主题，请查看 [静态方法响应主题](/zh-CN/case/static-method)。 ::: ## 2. 自动响应系统主题 @@ -59,7 +59,7 @@ export default () => { -:::info{title=appearance与themeMode的差别是什么？} +:::info{title=appearance 与 themeMode 的差别是什么？} appearance 描述了应用当前的外观状态， themeMode 则用于描述控制主题模式的逻辑。区分两者有助于实现高级的主题能力。 详见讨论: [#52](https://github.com/ant-design/antd-style/issues/52) @@ -124,4 +124,4 @@ export default () => ( ## API -与主题切换相关的 API 查阅：[ThemeProvider](/api/theme-provider#themeprovider-api) +与主题切换相关的 API 查阅：[ThemeProvider](/zh-CN/api/theme-provider#themeprovider-api) diff --git a/docs/index.zh-CN.md b/docs/index.zh-CN.md index 8db08e7b..392b307e 100644 --- a/docs/index.zh-CN.md +++ b/docs/index.zh-CN.md @@ -4,33 +4,33 @@ hero: description: 基于 Ant Design V5 Token System 构建的应用级 CSS in JS 解决方案 actions: - text: 立即开始 - link: /guide + link: /zh-CN/guide - text: 使用案例 - link: /case + link: /zh-CN/case features: - title: 兼容样式引擎 image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*MvKkQqXEyfQAAAAAAAAAAAAADoN6AQ/original description: Ant Design Style 可以同时兼容 styled-components、emotion-styled 等多种样式引擎，兼具丰富的写法能力 - link: /guide/strategy + link: /zh-CN/guide/strategy imageType: light row: 8 - title: 暗色模式一键切换 - link: /guide/switch-theme + link: /zh-CN/guide/switch-theme description: 我们基于 antd v5 cssinjs 动态主题配置与暗色主题算法封装了，为应用级场景提供易用的亮暗色主题切换能力，使用方式更加简单。 image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*8KE7T7l39J0AAAAAAAAAAAAADoN6AQ/original imageType: primary - title: 主题灵活扩展 description: Ant Design Style 提供自定义 token 与 自定义 stylish 的功能，当 antd 默认的 token 不能满足样式诉求时，可以灵活扩展出自己的主题体系，并在 CSS in JS 中自由消费。 - link: /guide/custom-theme + link: /zh-CN/guide/custom-theme image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*6sjjRa7lLhAAAAAAAAAAAAAADoN6AQ/original imageType: primary row: 8 - title: Ant Design Token System - link: /guide/switch-theme + link: /zh-CN/guide/switch-theme description: 默认集成 Ant Design V5 的 Token System，主题定制轻而易举，token 消费灵活易用 image: https://gw.alipayobjects.com/zos/hitu-asset/c88e3678-6900-4289-8538-31367c2d30f2/hitu-1609235995955-image.png imageType: light @@ -39,14 +39,14 @@ features: - title: 复合样式 —— Stylish description: Ant Design Style 提供了复合样式的能力，我们称它为 Stylish。Stylish 可以通过组合多个原子 token 来组织形成复杂的交互样式，实现极高的复用度。 感觉很熟悉？没错，它和 tailwindcss 的思想高度一致，但 stylish 将会具有更加明确的设计语义，维护也会更加轻松。 - link: /guide/stylish + link: /zh-CN/guide/stylish image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*_in2RLf5pY8AAAAAAAAAAAAADoN6AQ/original imageType: primary row: 9 - title: less 平滑迁移 description: 旧项目需要迁移？使用 antd-style 可以将项目中的 less 较低成本地迁移到 CSS in JS，并获得更好的用户体验与开发体验。 - link: /guide/migrate-from-less + link: /zh-CN/guide/migrate-from-less image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*5H2ySLO-X4cAAAAAAAAAAAAADoN6AQ/original imageType: primary @@ -58,7 +58,7 @@ features: - title: 应用案例 description: 展示使用 Ant Design Style 的组件、应用的各种案例，帮助开发者快速上手。 本文档同样使用 Ant Design Style 构建样式，可以作为静态站点类的参考。 - link: /case + link: /zh-CN/case image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*5H2ySLO-X4cAAAAAAAAAAAAADoN6AQ/original imageType: soon row: 8