37 | 表单项：
38 |
39 |
40 | ```
41 |
42 | 在上述代码中，我们将表单项和输入框都放在一个容器中，并使用 `justify-content: flex-end;` 将容器的对齐方式设置为右对齐。这样就可以实现冒号对齐的效果。
43 |
44 | ### 冒号对齐有什么作用？
45 |
46 | 冒号对齐能够让表单的填写项在视觉上形成一条线，让用户可以清晰地看到所有的填写项，从而提高填写效率。通过冒号对齐，用户的目光会顺着冒号形成的视觉流来找到需要填写的内容，避免了用户在表单中寻找填写项的困扰。
47 |
48 | ### 冒号对齐适用于哪些场景？
49 |
50 | 冒号对齐适用于包含多个填写项的表单场景，特别是当表单项较多并且需要在狭窄的空间内展示时，冒号对齐可以让表单更加整齐，方便用户填写。同时，对于阅读习惯从左到右的用户来说，冒号对齐也符合他们的阅读顺序，能够提高用户的填写体验。
51 |
52 | ### 数字类对齐
53 |
54 | 为了快速对比数值大小，在显示数值时，建议采用相同的有效位数，并且对齐方式应为右对齐。这样可以确保数值的可读性和比较的准确性。
55 |
56 | 在实际应用中，可以使用 CSS 设置文本的对齐方式为右对齐。以下是一个示例代码：
57 |
58 | ```css
59 | .text-right {
60 | text-align: right;
61 | }
62 | ```
63 |
64 | 然后，在需要对齐的数字元素上添加 `text-right` 类名即可实现右对齐效果。
65 |
66 | 正确示例： 
67 |
68 | 错误示例： 
69 |
70 | 通过设置右对齐的方式，可以更好地展示数值，并且方便用户进行比较和阅读。同时，统一的对齐方式也有利于页面的美观和一致性。希望以上信息能对您有所帮助。
71 |
--------------------------------------------------------------------------------
/docs/ant-design/docs/spec/cases.zh-CN.md:
--------------------------------------------------------------------------------
1 | ### Ant Design 在蚂蚁集团中的应用范围是怎样的？
2 |
3 | Ant Design 从 2015 年 4 月起在蚂蚁集团中后台产品线迅速推广，已经对接多条业务线，覆盖了系统 800 个以上。作为中台业务的解决方案，Ant Design 既能满足专业设计人员的需求，也能让非专业设计人员快速上手，并能够提供从界面设计到前端开发的全链路生态，从而大大提高设计和开发效率。
4 |
5 | ### Ant Design 的优势有哪些？
6 |
7 | Ant Design 不仅在蚂蚁集团内部广泛使用，也在外部有许多产品实践。它具有学习成本低、上手速度快、实现效果好等特点。Ant Design 提供了丰富的设计组件和开发工具，方便设计和开发人员快速构建高质量的界面和应用。同时，Ant Design 还支持定制化和扩展，能够满足不同产品的需求。
8 |
9 | ### 我公司和产品能否受益于 Ant Design？
10 |
11 | 如果你的公司和产品在设计和开发方面遇到困难，可以考虑使用 Ant Design。Ant Design 已经在蚂蚁集团内部积累了丰富的实践经验，并且在外部也有许多成功的产品实践。不论是专业设计人员还是非专业设计人员，都可以从 Ant Design 提供的组件和工具中受益。如果你有任何问题或建议，还可以通过留言的方式与 Ant Design 团队交流。
12 |
13 | ### 金融云是什么？
14 |
15 | 金融云是面向金融机构深度定制的行业云计算服务。它旨在帮助金融机构向新金融转型升级，并推动平台、数据和技术方面的能力全面对外开放。
16 |
17 | ### 蚂蚁金融科技提供的金融云有哪些特点？
18 |
19 | 蚂蚁金融科技的金融云服务提供了以下特点：
20 |
21 | - 面向金融机构深度定制，满足金融行业的需求；
22 | - 助力金融机构向新金融转型升级；
23 | - 推动平台、数据和技术方面的能力全面对外开放。
24 |
25 | ### 如何访问蚂蚁金融科技的金融云？
26 |
27 | 你可以通过访问 [蚂蚁金融科技](https://tech.antfin.com) 来了解更多关于蚂蚁金融科技的金融云服务。
28 |
29 | ### 什么是 OceanBase 云平台？
30 |
31 | OceanBase 云平台是以 OceanBase 数据库为基础的云服务，它是一款真正意义上的云端分布式关系型数据库。用户可以通过该平台快速创建并使用 OB 服务。
32 |
33 | ### OceanBase 云平台提供了哪些功能？
34 |
35 | OceanBase 云平台提供了以下功能：
36 |
37 | - 快速创建 OB 服务：用户可以轻松创建和配置 OceanBase 数据库服务。
38 | - 分布式关系型数据库：云平台基于 OceanBase 数据库，提供了强大的分布式关系型数据库功能。
39 | - 安全性：云平台提供了高级的安全性保障，包括数据加密、访问控制等功能。
40 | - 扩展性：云平台支持弹性扩展，在用户需求增长时能够快速扩展数据库容量。
41 |
42 | ### 如何访问 OceanBase 云平台？
43 |
44 | 您可以通过点击以下链接立即访问 OceanBase 云平台：[立即访问](https://www.oceanbase.com/docs/)
45 |
46 | ### 什么是 OceanBase 云平台的特点？
47 |
48 | - 高性能：OceanBase 云平台具备强大的处理能力，能够处理大规模数据和高并发请求。
49 | - 可靠性：云平台采用分布式架构，确保数据的高可用性和持久性。
50 | - 弹性扩展：云平台支持根据用户需求灵活扩展数据库容量。
51 | - 安全性：云平台提供了数据加密和访问控制等安全性功能，保护用户数据的安全。
52 |
53 | ### OceanBase 云平台的界面展示是什么样的？
54 |
55 | 以下是 OceanBase 云平台的界面展示截图：
56 |
57 | 
58 |
59 | ### Ant Design Pro 是什么？
60 |
61 | Ant Design Pro 是一个企业级中后台前端/设计解决方案，它的设计价值观来源于 Ant Design。它致力于在设计规范和基础组件的基础上继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的用户和设计者的体验。
62 |
63 | ### Ant Design Pro 的特点是什么？
64 |
65 | Ant Design Pro 的特点之一是提供了丰富的基础组件和配套设计资源，帮助企业级中后台产品的设计和开发工作。此外，Ant Design Pro 还秉承了 Ant Design 的设计价值观，将用户和设计者的体验放在首位，为企业级中后台产品的设计研发过程提供更好的支持。
66 |
67 | ### 如何访问 Ant Design Pro？
68 |
69 | 你可以通过访问 [Ant Design Pro官网](https://pro.ant.design) 来了解更多关于 Ant Design Pro 的信息。在官网上，你可以阅读到更详细的介绍、浏览示例和文档，以及获取最新版本的下载链接。同时，官网还提供了社区和博客等交流平台，方便用户与其他开发者进行交流和分享经验。
70 |
71 | ### 阿里云流计算是什么？
72 |
73 | 阿里云流计算是一种运行在阿里云平台上的流式大数据分析平台。它提供了实时化分析工具，让用户可以在云上进行流式数据实时化分析。
74 |
75 | ### 阿里云流计算有什么特点？
76 |
77 | 阿里云流计算具有以下特点：
78 |
79 | - 运行在阿里云平台上，提供云上的流式大数据分析环境。
80 | - 支持实时化分析，可以对流式数据进行即时处理和分析。
81 | - 提供丰富的分析工具，方便用户进行流式数据分析和处理。
82 |
83 | ### 如何访问阿里云流计算？
84 |
85 | 你可以通过点击以下链接访问阿里云流计算：[立即访问](https://data.aliyun.com/product/sc)
86 |
87 | 
88 |
--------------------------------------------------------------------------------
/docs/ant-design/docs/spec/contrast.zh-CN.md:
--------------------------------------------------------------------------------
1 | ## 如何在操作上突出主次关系？
2 |
3 | 在需要让用户快速做出判断的操作场景，我们可以通过突出其中一项相对更重要或者更高频的操作，来帮助用户快速执行操作。这种突出的方法不仅局限于强化重点项，还可以弱化其他项。
4 |
5 | 举个例子，在一个图片预览组件中，可以通过调整按钮的样式、位置或者尺寸等方式来突出某个操作。具体地说，可以将重要的操作按钮设计成突出的样式或者放置在更显眼的位置，而不重要的操作则可以采用较为普通的样式或者放置在次要的位置。
6 |
7 | 如果在某些场景中，需要用户进行慎重决策，比如审核、确认等操作，那么系统应该保持中立，不能替用户或者诱导用户做出判断。在这种情况下，我们不应该对操作进行主次区分。
8 |
9 | ### 如何在操作上保持中立？
10 |
11 | 在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户或者诱导用户做出判断。这样可以保证用户能够在没有干扰的情况下自主作出决策。
12 |
13 | 比如，在一个图片预览组件中，如果需要用户进行审核或者驳回操作，我们可以采用相同的按钮样式来表示这两个操作，同时在界面上不做任何区分。这样可以避免系统对用户产生影响，让用户更加自由地进行选择。
14 |
15 | 需要注意的是，在保持中立的同时，应该提供清晰明确的操作指引和必要的信息，以确保用户能够准确理解操作的含义和后果，并做出相应的决策。
16 |
17 | ### 总分关系对比示例 1
18 |
19 | 总分关系示例 1
20 |
21 | 
22 |
23 | 通过调整排版、字体、大小等方式来突出层次感，区分总分关系，使得页面更具张力和节奏感。
24 |
25 | ### 总分关系对比示例 2
26 |
27 | 总分关系示例 2
28 |
29 | 
30 |
31 | 通过调整排版、字体、大小等方式来突出层次感，区分总分关系，使得页面更具张力和节奏感。
32 |
33 | ### 总分关系对比效果提升方式
34 |
35 | 通过调整排版、字体、大小等方式来突出层次感，区分总分关系，使得页面更具张力和节奏感。这样的调整可以通过修改 CSS 样式来实现，例如调整不同标题的字体大小、颜色，增加不同级别标题的样式差异，以及改变总分之间的间距等。这样的优化在设计和开发中都非常重要，可以提升页面的可读性和用户体验。
36 |
37 | ### 状态关系对比中的静态对比示例
38 |
39 | 静态对比示例：通过使用不同颜色的点来表明不同状态。这种方法可以帮助用户更好地区分信息。
40 |
41 | 
42 |
43 | 描述：用不同颜色的点以及辅助形状来表达不同的状态关系。
44 |
45 | ### 状态关系对比中的动态对比示例
46 |
47 | 动态对比示例：当鼠标悬停在某一项上时，该项和其他项呈现明显不同的视觉效果，以响应用户操作。
48 |
49 | 
50 |
51 | 描述：鼠标悬停时，某一项以及其他项的视觉效果会有明显的变化，这样可以更好地响应用户的操作。
52 |
53 | ### 状态关系对比中常见类型
54 |
55 | 常见类型包括静态对比和动态对比。
56 |
57 | 静态对比通过改变颜色、增加辅助形状等方法来实现状态关系的对比，以便用户更好地区分信息。
58 |
59 | 动态对比则是在用户进行操作时，通过改变界面元素的视觉效果，来反馈用户的操作。
60 |
61 | 以上是状态关系对比中常见的两种类型。
62 |
--------------------------------------------------------------------------------
/docs/ant-design/docs/spec/data-display.zh-CN.md:
--------------------------------------------------------------------------------
1 | ### 合适的数据展示方式可以帮助用户快速地定位和浏览数据，以及更高效得协同工作。在设计时有哪些需要注意的点？
2 |
3 | - 依据信息的重要等级、操作频率和关联程度来编排展示的顺序。
4 | - 注意极端情况下的引导。如数据信息过长，内容为空的初始化状态等。
5 |
6 | ### 为什么合适的数据展示方式对用户很重要？
7 |
8 | 合适的数据展示方式可以帮助用户快速地定位和浏览数据，提高工作效率。同时，合适的展示方式也能减少用户的认知负荷，提供更好的用户体验。
9 |
10 | ### 在设计数据展示时，有哪些原则需要遵循？
11 |
12 | - 依据信息的重要等级、操作频率和关联程度来编排展示的顺序。
13 | - 注意极端情况下的引导，如数据信息过长、内容为空的初始化状态等。
14 | - 使用合适的数据可视化方式，如表格、图表等，以便用户能够直观地理解和分析数据。
15 |
16 | ### 如何处理数据信息过长的情况？
17 |
18 | 当数据信息过长时，可以采取以下措施：
19 |
20 | - 使用折叠或展开的方式显示详细信息，以免过多的信息占据空间。
21 | - 提供滚动条或分页功能，以方便用户查看完整的信息。
22 | - 使用合适的字号和行间距，以确保长文本的可读性。
23 |
24 | ### 空数据或内容为空的初始化状态应该如何处理？
25 |
26 | 当数据内容为空时，可以通过以下方式进行处理：
27 |
28 | - 提供友好的提示，如“暂无数据”、“内容为空”等，以告知用户当前暂无数据展示。
29 | - 提供直观的操作按钮或引导，以引导用户进行相关的数据录入或导入操作。
30 | - 如果应用场景适合，可以提供数据的默认值，以避免空数据的展示。
31 |
32 | ### 数据展示的优化有哪些方面？
33 |
34 | - 优化数据展示的性能，避免因为数据量过大导致页面卡顿或加载缓慢。
35 | - 使用合适的数据可视化方式，以提供更直观的数据展示效果。
36 | - 提供数据筛选、搜索等功能，以便用户能够快速找到所需的数据。
37 | - 灵活使用分页、滚动加载等技术，以提高数据展示的效率和用户体验。
38 |
39 | ### 表格的作用是什么？
40 |
41 | 表格被公认为是展现数据最为清晰、高效的形式之一。它常和排序、搜索、筛选、分页等其他界面元素一起协同，适用于信息的收集和展示、数据的分析和归纳整理、以及操作结构化数据。它结构简单，分隔归纳明确，使信息之间更易于对比，大大提升了用户对信息的接收效率和理解程度。
42 |
43 | ### 如何表示表格中的空数据？
44 |
45 | 当单元格数据为空时，通常可以使用 `-` 来表示暂无数据。
46 |
47 | ### 表格中的时间、状态、操作栏应该如何呈现？
48 |
49 | 在表格中，时间、状态和操作栏通常需要保持词语完整不折行，以便用户清晰地理解意义和进行操作。
50 |
51 | ### 折叠面板是什么？
52 |
53 | 折叠面板是一种前端组件，通过将信息进行分组和收纳，可以递进式地向用户展示信息。它能够使界面保持整洁，并提高空间的有效利用率。通常在导航菜单中广泛应用，也适用于对冗长和无规则内容进行管理的场景。
54 |
55 | ### 折叠面板的作用是什么？
56 |
57 | 折叠面板的作用是帮助用户递进式地获取信息。通过对信息进行分组和收纳，在界面上节省空间的同时，增加了信息的可视性和易访问性。
58 |
59 | ### 折叠面板有哪些应用场景？
60 |
61 | 折叠面板适用于导航菜单和内容管理等场景。在导航菜单中，折叠面板可以帮助用户快速浏览和选择目录，提升导航的效率。在内容管理中，特别是对于冗长和无规则的内容，折叠面板可以帮助用户组织和管理信息，提高信息的可读性和可操作性。
62 |
63 | ### 什么是『手风琴』模式？
64 |
65 | 『手风琴』是一种特殊的折叠面板模式。与普通的折叠面板不同，『手风琴』只允许单项内容区域展开，其他区域将被自动收起。这种模式通常在折叠内容彼此之间关联度较低的情况下使用，可以更节省空间。
66 |
67 | ### 卡片是什么？
68 |
69 | 卡片是一种承载信息的容器，用于集中化展示特定类型的信息。它可以容纳各种类型的内容，并以网格或矩阵的形式排列，以传达信息之间的层级关系。
70 |
71 | ### 卡片适用于哪些场景？
72 |
73 | 卡片适用于需要展示较为轻量级和个性化较强的信息区块的场景。它能够增强区块感，并提供便于操作的界面。
74 |
75 | ### 如何排列卡片？
76 |
77 | 卡片通常根据栅格进行排列，建议一行最多不超过四个卡片。此外，在有限的卡片空间内，需要注意信息之间的间距。如果信息内容过长，可以考虑对其进行截断处理，以保持整体布局的美观性。
78 |
79 | ### 走马灯（Carousel）是什么？
80 |
81 | 走马灯是一种用于展示一组平级内容的并列展示模式，常用于展示图片或卡片的轮播效果。它可以由用户主动触发或系统自动轮播，适用于在官网首页、产品介绍页等展示型区块中使用。
82 |
83 | ### 走马灯有哪些注意事项？
84 |
85 | 在使用走马灯时，需要注意以下几点：
86 |
87 | 1. 控制轮播的数量不宜过多，通常应该在 3~5 个之间，以免使用户感到厌烦。
88 | 2. 在设计上提供暗示，让用户对轮播的数量和方向保持清晰的认知，以提高用户体验。
89 |
90 | ### 走马灯适用于哪些场景？
91 |
92 | 走马灯适用于以下场景：
93 |
94 | 1. 在官网首页中展示不同产品或特色内容的图片轮播。
95 | 2. 在产品介绍页中展示产品特性或功能卡片的轮播。
96 | 3. 在其他展示型区块中需要逐个展示多个内容的情况下。
97 |
98 | 以上是关于走马灯的基本信息和使用注意事项，希望对你有所帮助！如果还有其他问题，请随时提问。
99 |
100 | ### 树形控件是什么？
101 |
102 | 树形控件是一种通过逐级大纲的形式展示信息层级关系的组件。它具有高效和良好的视觉可视性，可以清晰地展示整体信息框架。用户可以同时浏览和处理多个树状层级的内容。树形控件适用于需要通过层级组织信息的场景，如文件夹、组织架构、生物分类、国家地区等。
103 |
104 | ### 树形控件的特点是什么？
105 |
106 | 树形控件具有以下特点：
107 |
108 | - 通过逐级大纲的形式展示信息的层级关系；
109 | - 提供高效和良好的视觉可视性，使整体信息框架一目了然；
110 | - 可同时浏览和处理多个树状层级的内容；
111 | - 适用于任何需要通过层级组织信息的场景。
112 |
113 | ### 树形控件适用于哪些场景？
114 |
115 | 树形控件适用于以下场景：
116 |
117 | - 文件夹：展示文件夹和文件之间的层级关系；
118 | - 组织架构：展示公司、部门、岗位之间的层级关系；
119 | - 生物分类：展示不同物种和亚种之间的层级关系；
120 | - 国家地区：展示国家和地区之间的层级关系。
121 |
122 | 通过使用树形控件，可以更加清晰地组织和展示信息的层级关系，提高用户对信息的理解和处理能力。
123 |
124 | ### 时间轴的作用是什么？
125 |
126 | 时间轴是一种垂直展示时间流信息的方式，可以按照时间顺序记录事件，追踪用户的活动以及过去的记录。通过时间轴，可以清晰地了解用户在过去的行为以及当前做了什么。
127 |
128 | ### 时间轴常用的场景有哪些？
129 |
130 | 时间轴适用于各种场景，包括但不限于以下几种：
131 |
132 | - 事件追踪：用来记录和展示事件的发生顺序和详细信息，例如项目的时间线、任务的进展等。
133 | - 任务管理：用来展示任务的状态和进度，可以清晰地了解任务的开始时间、完成时间以及相关的附加信息。
134 | - 日程安排：用来标记和展示日程安排，可以快速查看未来的重要日期、会议、活动等。
135 | - 数据展示：用来展示一系列相关的数据或信息，按照时间顺序排列，方便用户进行查看和分析。
136 |
137 | ### 如何使用时间轴组件？
138 |
139 | 时间轴组件一般由时间节点和内容组成。每个时间节点可以包含主题、类型等附加信息，而内容部分可以展示相关的详细内容。
140 |
141 | 在使用时间轴组件时，需要按照时间顺序将信息记录在时间节点中，并将节点按照时间倒序排列。用户可以通过浏览时间轴来了解每个时间节点所包含的具体内容。
142 |
143 | ### 如何实现时间轴的垂直展示效果？
144 |
145 | 实现时间轴的垂直展示效果，可以通过以下几个步骤：
146 |
147 | 1. 使用垂直布局方式，将时间轴节点按照时间倒序排列。
148 | 2. 设置合适的节点样式，包括时间节点的图标、背景颜色等，以区分不同节点的类型。
149 | 3. 根据时间节点的内容和字段，展示相关的详细信息，例如主题、类型以及其他附加内容。
150 | 4. 根据需要，可以添加一些交互功能，例如点击时间节点展开/收起更多内容、跳转到相关页面等。
151 |
152 | 通过以上步骤，可以实现时间轴的垂直展示效果，并提供清晰、直观的时间线信息展示。
153 |
--------------------------------------------------------------------------------
/docs/ant-design/docs/spec/direct.zh-CN.md:
--------------------------------------------------------------------------------
1 | ### 页内编辑
2 |
3 | [image source](https://gw.alipayobjects.com/zos/rmsportal/EXKwsvUkIUNkHBSsOlRi.png)
4 |
5 | 描述：状态一：普通的浏览模式，不区分可编辑行和不可编辑行；状态二：鼠标悬停时，「指针」变为「手型」，编辑区域底色变黄，出现「Tooltips」提示单击编辑；状态三：鼠标点击后，出现「输入框」、「确定」、「取消」表单元素，同时光标定位在「输入框」中。
6 |
7 | 这种页内编辑的模式适用于当「易读性」远比「易编辑性」重要时。用户可以通过单击编辑进行相关操作。
8 |
9 | ### 单字段行内编辑
10 |
11 | [image source](https://gw.alipayobjects.com/zos/rmsportal/qiAYBQKcQnmavxHzkeaK.png)
12 |
13 | 描述：状态一：在可编辑行附近出现文字链/图标；状态二：鼠标点击「编辑」后，出现「输入框」、「确定」、「取消」表单元素，同时光标定位在「输入框」中。
14 |
15 | 这种单字段行内编辑的模式适用于当「易读性」为主，同时又要突出操作行的「易编辑性」时。用户可以通过点击编辑来进行相应的操作。
16 |
17 | ### 多字段行内编辑
18 |
19 | [image source](https://gw.alipayobjects.com/zos/rmsportal/ukbXcTHrgPmTfHmCassD.png)
20 |
21 | 描述：编辑模式在不破坏整体性的前提下，可扩大空间，以便放下「输入框」等表单元素；其中，在 Table 中进行编辑模式切换时，需要保证每列的不跳动。
22 |
23 | 在「多字段行内编辑」的情况下，显示的内容和编辑时所需的字段会存在比较大的差异，所以更需要「巧用过渡」原则中的[「解释刚刚发生了什么」](/docs/spec/transition#解释刚刚发生了什么)来消除这种视觉影响。用户可以通过编辑模式进行多个字段的操作。
24 |
25 | ### 拖放列表的使用方法是什么？
26 |
27 | 拖放列表示例中展示了拖放功能的几个状态。当鼠标悬停在列表的某一行时，会出现可移动的图标。当鼠标悬停在该图标上时，指针会变成手型，点击即可进行拖动。拖动到可放置的区块时，会出现蓝色描边，告知用户该区块可以放置该对象。
28 |
29 | ### 拖放列表是否有限制？
30 |
31 | 拖放列表只能在一个维度（上/下或者左/右）进行拖放，无法在多个维度进行拖放。
32 |
33 | ### 如何拖放图片/文件？
34 |
35 | 拖放图片/文件示例中展示了拖放图片或文件的使用方法。用户可以将图片或文件拖放到所需位置即可完成操作。
36 |
--------------------------------------------------------------------------------
/docs/ant-design/docs/spec/font.zh-CN.md:
--------------------------------------------------------------------------------
1 | ### 字体家族
2 |
3 | ### 字体家族在界面设计中的作用是什么？ 字体家族在界面设计中起到定义字体风格和特征的作用。不同的字体家族具有不同的视觉效果和情感传递，能够影响用户对界面的感受和理解。
4 |
5 | ### Ant Design 字体方案是如何选择字体家族的？ Ant Design 字体方案是基于「动态秩序」的设计原则，结合了自然对数以及音律的规则来选择字体家族。经过大量的蚂蚁中后台产品验证后，推荐给大家使用。
6 |
7 | ### 主字体
8 |
9 | ### 主字体在界面设计中的作用是什么？ 主字体是在界面中用于展示核心内容的字体，起到突出和引导用户注意力的作用。通过统一的主字体风格，可以提升用户的阅读体验和界面的整体协调性。
10 |
11 | ### Ant Design 的主字体是什么？ Ant Design 在中后台视觉体系中定义的主字体是基于动态秩序的设计原则，并经过大量验证的字体方案。
12 |
13 | ### 字阶与行高
14 |
15 | ### 字阶和行高在界面设计中的作用是什么？ 字阶和行高是为了调整界面文字的大小和行间距，以提升用户的阅读体验和可读性。通过合理的字阶和行高设置，可以使文字更易于辨认和理解。
16 |
17 | ### Ant Design 的字阶与行高如何定义和选择？ Ant Design 根据自然对数的规律和音律的规则来定义字阶和行高，经过大量的验证和调整，以保证整体的视觉效果和用户的阅读舒适度。
18 |
19 | 这些 文档基于原始文本信息生成，简洁精确地回答了与字体相关的问题，包括字体家族、主字体以及字阶与行高的作用和选择。
20 |
21 | ### Ant Design 的字体家族选择原则是什么？
22 |
23 | Ant Design 的字体家族选择原则是优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库。这样做是为了在不同平台和浏览器下，保持字体的良好易读性和可读性，体现友好、稳定和专业的特性。
24 |
25 | ### Ant Design 中提供了哪些字体家族？
26 |
27 | Ant Design 中提供的字体家族如下：
28 |
29 | ```css
30 | @font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
31 | 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
32 | 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
33 | ```
34 |
35 | 这个字体家族的选择参考了《Using System UI Fonts In Web Design: A Practical Guide》和《How GitHub uses font-family》两篇文章。
36 |
37 | ### Ant Design 在数字展示中有什么特殊处理？
38 |
39 | 在中后台系统中，数字经常需要进行纵向对比展示。为了达到这一效果，Ant Design 单独将数字的字体设置为 `tabular-nums`，使其成为等宽字体。
40 |
41 | 这个处理参考了《How to use Apple's new San Francisco font on a webpage?》中的评论。
42 |
43 | ### Ant Design 主字体的升级是为了什么目的？
44 |
45 | Ant Design 的主字体经过升级是为了保证在多数常用显示器上的用户阅读效率最佳。
46 |
47 | ### Ant Design 主字体的升级详情是什么？
48 |
49 | Ant Design 的主字体从原先的 12 升级至 14，基于电脑显示器阅读距离（50 cm）以及最佳阅读角度（0.3）的考虑。
50 |
51 | ### 主字体升级对用户有哪些影响？
52 |
53 | 主字体的升级将提高用户的阅读效率，特别是在常用显示器上，用户将能够更清晰地阅读 Ant Design 的内容。
54 |
55 | ### 字阶与行高是什么？
56 |
57 | 字阶与行高决定着一套字体系统的动态与秩序之美。字阶是指一系列有规律的不同尺寸的字体，而行高可以理解为一个包裹在字体外面的无形的盒子。
58 |
59 | ### Ant Design 的字阶和行高有哪些？
60 |
61 | Ant Design 受到 5 音阶以及自然律的启发，定义了 10 个不同尺寸的字体以及与之相对应的行高。具体的字阶和行高可以参考以下表格：
62 |
63 | 
64 |
65 | ### 如何选择字阶和行高？
66 |
67 | 在 Ant Design 的视觉体系中，我们建议的主要字体为 14，与之对应的行高为 22。其余的字阶的选择可根据具体情况进行自由的定义。根据我们的经验，建议在一个系统设计中（展示型页面除外），字阶的选择尽量控制在 3-5 种之间，保持克制的原则。这样可以确保界面的一致性和美观性。
68 |
69 | ### 字重的选择基于哪些原则？
70 |
71 | 字重的选择基于秩序、稳定和克制的原则。在大多数情况下，只会使用 regular 和 medium 两种字体重量，分别对应代码中的 400 和 500。只有在英文字体需要加粗的情况下，才会采用 semibold 的字体重量，对应代码中的 600。
72 |
73 | ### 字重的类名和对应的代码值是什么？
74 |
75 | 在代码中，字重的类名和相应的代码值对应如下：
76 |
77 | - regular：400
78 | - medium：500
79 | - semibold：600
80 |
81 | ### 字重样式示例
82 |
83 | 下面是字重样式的示例图：
84 |
85 | - Regular 字重样式：
86 | - Medium 字重样式：
87 | - Semibold 字重样式：
88 |
89 | 样式示例图展示了不同字重的文本和字号结合的效果。
90 |
91 | 请注意，在具体项目中的字重样式可能会有所变化，上述示例仅作参考。
92 |
93 | ### 文本颜色和背景颜色的对比度标准是什么？
94 |
95 | 根据 WCAG 的标准，为了保证文本的可读性和无障碍设计，正文文本、标题和背景色之间应该保持在 7:1 以上的 AAA 级对比度。这意味着如果文本颜色和背景颜色太接近，可能会导致难以阅读的问题。
96 |
97 | ### 如何判断文本颜色和背景颜色的对比度是否符合标准？
98 |
99 | 为了判断文本颜色和背景颜色的对比度是否符合标准，可以使用配色工具或者在线对比度计算器。将指定的文本颜色和背景颜色输入工具，它会返回对比度值。如果对比度值大于等于 7:1，那么表示符合 AAA 级对比度标准。
100 |
101 | ### 为什么要保持文本颜色和背景颜色的对比度？
102 |
103 | 保持文本颜色和背景颜色的对比度是为了提高文本的可读性和用户体验。如果对比度太低，用户可能会难以辨认文本内容，尤其是对于视力障碍的用户来说尤为重要。通过保持适当的对比度，可以确保文本清晰可见，并提供更好的阅读体验。
104 |
105 | ### 如何建立字体系统的设计思路？
106 |
107 | 在同一个系统的 UI 设计中，建立体系化的设计思路是实现字体系统的关键。首先要对主、次、辅助、标题、展示等类别的字体进行统一的规划，然后再将这些规划落地到具体的场景中进行微调。这样做有助于强化横向字体落地的一致性，提高字体应用的性价比，减少不必要的样式浪费。
108 |
109 | ### 在字体系统中，如何避免过度使用样式？
110 |
111 | 在设计中，我们应该遵循「少即是多」的原则，尽量用尽量少的样式去实现设计目的。我们要避免毫无意义地使用大量字阶、颜色、字重等强调视觉重点或对比关系的样式。这样做不仅可以减少视觉上的混乱，还能使设计更加简洁明了。
112 |
113 | ### 如何让字体在设计中呈现出韵律感？
114 |
115 | 当我们需要拉开字体大小之间的差距时，可以尝试在字阶表中跳跃地选择字体大小，这样可以让字体在视觉上呈现出一种微妙的韵律感，就像音符一样跳跃。这种技巧可以帮助我们在设计中创造出更丰富多样的视觉效果。
116 |
--------------------------------------------------------------------------------
/docs/ant-design/docs/spec/introduce.zh-CN.md:
--------------------------------------------------------------------------------
1 | ### 什么是 Ant Design？
2 |
3 | Ant Design 是由蚂蚁集团体验技术部打造的一个设计体系，旨在为企业级产品提供更好的用户体验。通过模块化解决方案，Ant Design 实现了稳定和高复用性的设计元素，降低了生产成本，让设计者能够更专注于优化用户体验。
4 |
5 | ### Ant Design 的设计价值观有哪些？
6 |
7 | Ant Design 的设计价值观包括「自然」、「确定性」、「意义感」和「生长性」。这些价值观的目标是提供自然、易于理解和使用的设计，为用户创造出具有意义的体验，并通过不断学习和成长来不断优化产品。
8 |
9 | ### Ant Design 如何帮助企业级产品？
10 |
11 | Ant Design 通过提供稳定和高复用性的设计元素，帮助企业级产品降低生产成本，并专注于更好的用户体验。它的模块化解决方案使得设计师和开发者能够快速响应产品变动和并发需求，同时提供了类似页面和组件的抽象，以增加设计的稳定性和复用性。
12 |
13 | ### 设计资源中的设计模式如何理解？
14 |
15 | 设计资源中的设计模式是一种被广泛接受和验证的设计解决方案。它们是对常见设计问题的有针对性的解决方案集合，可以帮助设计者快速产出高质量的产品原型。通过使用设计模式，设计者可以避免重复劳动，提高工作效率，同时保持设计的一致性和可维护性。
16 |
17 | ### 设计资源中的可视化是什么？
18 |
19 | 设计资源中的可视化是指通过视觉呈现的设计元素和效果。在设计过程中，通过使用颜色、形状、图标、排版等视觉要素，来传达信息、引导用户注意力、增强用户体验等。可视化设计可以帮助用户更好地理解和操作产品，提高产品的可用性和吸引力。
20 |
21 | ### 设计资源中的插画有什么作用？
22 |
23 | 设计资源中的插画是一种视觉表达手段，通过图像、图形等形式，来传达信息、故事或情感。插画可以为产品增加趣味性和个性化，提升用户的情感共鸣和参与度。在设计中使用插画可以使产品更加生动有趣，并且有助于品牌塑造和宣传推广。
24 |
25 | ### React 实现 Ant Design 组件库的要求是什么？
26 |
27 | React 实现 Ant Design 组件库的要求包括以下内容：
28 |
29 | - Ant Design of React 是官方实现，它是 Ant Design 组件库在 React 框架下的一个封装。
30 | - 可以通过访问 [官方文档](/docs/react/introduce) 来获取详细的使用说明和 API 文档。
31 | - 如果你想在 React 项目中使用 Ant Design 组件库，可以直接引入 Ant Design 的组件，在项目中使用。
32 | - React 实现需要遵循 Ant Design 组件库的设计规范和样式风格，以确保一致性和统一性。
33 | - React 实现的 Ant Design 组件库提供了丰富的组件，包括按钮、表单、弹出框、导航等，可以满足各种前端开发需求。
34 |
35 | ### Angular 实现 Ant Design 组件库的要求是什么？
36 |
37 | Angular 实现 Ant Design 组件库的要求包括以下内容：
38 |
39 | - NG-ZORRO 是社区实现的 Ant Design 组件库的 Angular 版本。
40 | - 可以通过访问 [NG-ZORRO - Ant Design of Angular](http://ng.ant.design) 来获取详细的使用说明和 API 文档。
41 | - 如果你想在 Angular 项目中使用 Ant Design 组件库，可以通过安装 NG-ZORRO 库来引入 Ant Design 的组件，并在项目中使用。
42 | - NG-ZORRO 提供了一套符合 Angular 规范的 Ant Design 组件，包括按钮、表单、弹出框、导航等，可以满足各种前端开发需求。
43 |
44 | ### Vue 实现 Ant Design 组件库的要求是什么？
45 |
46 | Vue 实现 Ant Design 组件库的要求包括以下内容：
47 |
48 | - Ant Design of Vue 是社区实现的 Ant Design 组件库的 Vue 版本。
49 | - 可以通过访问 [Ant Design of Vue](http://antdv.com) 来获取详细的使用说明和 API 文档。
50 | - 如果你想在 Vue 项目中使用 Ant Design 组件库，可以通过安装 Ant Design of Vue 库来引入 Ant Design 的组件，并在项目中使用。
51 | - Ant Design of Vue 提供了一套符合 Vue 规范的 Ant Design 组件，包括按钮、表单、弹出框、导航等，可以满足各种前端开发需求。
52 |
53 | 这些实现版本提供了丰富的组件库，让开发者可以根据自己的项目需求选择合适的框架进行开发。
54 |
55 | ### 蚂蚁集团如何使用 Ant Design 5.x 的 CSS 变量模式？
56 |
57 | 蚂蚁集团是正在使用 Ant Design 5.x 的 CSS 变量模式的公司之一。他们在其网站[蚂蚁集团](https://www.antgroup.com/)中应用了 Ant Design 的主题能力，并且开启了 CSS 变量模式。蚂蚁集团的使用案例可以为其他企业提供参考和借鉴。
58 |
59 | 如果你想了解更多关于蚂蚁集团如何使用 Ant Design 5.x 的 CSS 变量模式的详细信息，请访问他们的官方网站[蚂蚁集团](https://www.antgroup.com/)。
60 |
61 | ### 阿里巴巴如何应用 Ant Design 5.x 的 CSS 变量模式？
62 |
63 | 阿里巴巴是另一个正在应用 Ant Design 5.x 的 CSS 变量模式的公司。他们在[阿里巴巴](https://www.alibaba.com/)的产品和服务中使用了 Ant Design，并且对其进行了主题定制。
64 |
65 | 如果你想了解更多关于阿里巴巴如何应用 Ant Design 5.x 的 CSS 变量模式的详细信息，请访问他们的官方网站[阿里巴巴](https://www.alibaba.com/)。
66 |
67 | ### 腾讯是如何利用 Ant Design 5.x 的 CSS 变量模式？
68 |
69 | 腾讯是另一家正在利用 Ant Design 5.x 的 CSS 变量模式的公司。他们将 Ant Design 的主题能力应用于他们的产品和服务，并以腾讯自己的定制主题进行展示。
70 |
71 | 如果你想了解更多关于腾讯如何利用 Ant Design 5.x 的 CSS 变量模式的详细信息，请访问他们的官方网站[腾讯](https://www.tencent.com)。
72 |
73 | 请注意，以上信息并非官方证实，仅仅是根据公开的信息所得出的结论。
74 |
75 | ### 如何评价 Ant Design 这个项目？
76 |
77 | Ant Design 是一个非常受欢迎的前端项目，得到了社区的高度评价和关注。可以在知乎上找到有关 Ant Design 的专门讨论，地址是 [如何评价 Ant Design 这个项目？](https://www.zhihu.com/question/33629737)。此外，Hacknews 上也有一篇介绍 Ant Design 的帖子，可以在 [Show HN: Antd – A set of high-quality React components](https://news.ycombinator.com/item?id=13053137) 找到。这些资源可以帮助你更好地了解 Ant Design 项目，以及大家对它的评价。
78 |
79 | ### 如何在 React 中使用 Ant Design 来打造漂亮的 UI？
80 |
81 | 如果你正在使用 React 并且希望使用 Ant Design 来创建漂亮的用户界面，你可以参考 Alligator 上的一篇文章，标题为 [Crafting Beautiful UIs in React Using Ant Design](https://alligator.io/react/beautiful-uis-ant-design/)。这篇文章会告诉你如何使用 Ant Design 的组件库，以及如何通过它来创建各种美观的 UI。
82 |
83 | ### Ant Design 是什么，如何入门？
84 |
85 | 如果你对 Ant Design 还不太了解，可以阅读一篇简介文章，标题是 [Introduction to Ant Design](https://blog.logrocket.com/introduction-to-ant-design/)。这篇文章会向你介绍 Ant Design 是什么，它的特点和优势，并且还会给出使用 Ant Design 的基本入门步骤。另外，如果你想在 React App 中使用 Ant Design 的原则来构建应用，可以参考 Okta 开发者博客上的一篇教程，标题为 [Build a React App with Ant Design Principles](https://developer.okta.com/blog/2020/09/16/ant-design-react-app)。这个教程会向你展示如何在 React 中集成 Ant Design，以及使用 Ant Design 的设计原则来构建应用。
86 |
87 | 希望以上资源可以帮助你更好地了解和使用 Ant Design。
88 |
--------------------------------------------------------------------------------
/docs/ant-design/docs/spec/invitation.zh-CN.md:
--------------------------------------------------------------------------------
1 | ### 提供邀请在人机交互中的重要性是什么？
2 |
3 | 很多富交互模式（例如：「拖放」、「行内编辑」、「上下文工具」）存在一个共同问题，即缺乏易发现性。为了解决这个问题，提供邀请成为了成功完成人机交互的关键。邀请是一种引导用户进入下一个交互层次的提醒和暗示，通过意符和可供性来表明在下一个界面可以做什么。当可感知的部分表现为意符时，人机交互的过程会更加自然、顺畅。
4 |
5 | 意符是一种额外的提示，告诉用户可以采取什么行为以及应该如何操作。意符必须是可感知的，例如通过视觉、听觉、触觉等感官来呈现给用户。而可供性则是物品的特性与决定物品用途的主体能力之间的关系。其中部分可感知的部分被定义为 Perceived Affordance，而另外的一部分则不可感知。
6 |
7 | 通过提供邀请，我们可以增强用户对于下一步操作的理解和意识，提高整个人机交互过程的可用性和用户体验。
8 |
9 | ### 如何理解意符和可供性在提供邀请中的作用？
10 |
11 | 意符和可供性在提供邀请中起到了重要的作用。意符是一种额外的提示，通过视觉、听觉、触觉等感官来告诉用户可以采取什么行为以及应该如何操作。而可供性则是物品的特性与决定物品用途的主体能力之间的关系。
12 |
13 | 在提供邀请的过程中，通过意符的引导，用户可以更好地理解和意识到下一步操作的可能性。例如，在一个拖放功能中，当用户将一个物品拖动到另一个区域时，如果该区域以某种视觉效果或提示信息来表示可以放置物品，那么用户就能够更加明确地知道可以进行这样的操作。这样的意符会使人机交互过程更加自然、顺畅。
14 |
15 | 此外，可供性也是提供邀请中不可或缺的因素。通过设计具有良好可供性的界面，使用户能够直观地知道在下一个界面可以做什么。这种感知到的可供性会帮助用户更好地理解交互的目的和流程，从而提高整体的用户体验和可用性。
16 |
17 | ### 如何正确地提供邀请？
18 |
19 | 在提供邀请的过程中，我们需要注意以下几点来确保用户能够正确地理解和接受邀请：
20 |
21 | 1. 使用明确的意符：在界面中使用明确的视觉、听觉、触觉等意符来引导用户进行下一步操作。意符应该清晰、易于理解，使用户能够准确地知道可以采取什么行为以及如何操作。
22 |
23 | 2. 设计有良好可供性的界面：通过设计具有良好可供性的界面，使用户能够直观地了解在下一个界面可以做什么。通过适当的提示、按钮、操作区域等来提醒用户可以进行的操作，帮助用户更好地理解交互的目的和流程。
24 |
25 | 3. 提供必要的说明和指导：除了意符和可供性外，还可以提供必要的说明和指导，帮助用户理解和接受邀请。这可以通过文字说明、图标解释、引导性的提示信息等方式来实现。
26 |
27 | 通过以上的方法，我们可以有效地提供邀请，引导用户进入下一个交互层次，并提升整个人机交互过程的可用性和用户体验。
28 |
29 | ### 静态邀请
30 |
31 | 静态邀请是指通过可视化技术在页面上提供引导交互的邀请。它们一般以静态说明的形式出现在页面上，但在视觉上也可以表现出多种不同的样式。常见的静态邀请类型有：文本邀请、白板式邀请和未完成邀请。
32 |
33 | 文本邀请示例： 
34 |
35 | 白板式邀请示例： 
36 |
37 | 未完成邀请示例： 
38 |
39 | ### 漫游探索邀请
40 |
41 | 漫游探索邀请是一种向用户介绍新功能的好方法，尤其对于那些设计优良的界面。它通过在用户首次登录时出现少量「探索点」，当用户点击「我知道了」时，能够快速切换到下一个探索点。然而，漫游探索邀请并不是解决界面交互真正问题的「创口贴」。
42 |
43 | 漫游探索邀请示例： 
44 |
45 | 请注意以下几点：
46 |
47 | - 保持漫游过程简单，让用户容易退出和重新启动；
48 | - 保持内容简明扼要，与功能密切相关。
49 |
50 | 以上是关于静态邀请和漫游探索邀请的说明。静态邀请通过可视化技术在页面上提供引导交互的方式，而漫游探索邀请是一种向用户介绍新功能的方法。对于前端开发者而言，了解和应用这些邀请方式，可以提升用户体验和界面交互设计的质量。
51 |
52 | ### 动态邀请是什么？
53 |
54 | 动态邀请是一种以响应用户在特定位置执行特定操作的方式，提供特定的邀请。它可以根据用户的行为或上下文来提供个性化的邀请，以满足用户的需求或引导用户进一步的操作。
55 |
56 | 举例来说，悬停邀请是一种常见的动态邀请方式。当用户将鼠标悬停在特定元素上时，会出现邀请的提示或按钮。这种邀请可以鼓励用户进行某项特定操作或提供更多信息。
57 |
58 | ### 什么是悬停邀请？
59 |
60 | 悬停邀请是动态邀请的一种形式，它通过使用悬停事件来触发邀请。当用户将鼠标悬停在特定元素上时，会出现邀请的提示或按钮。
61 |
62 | 例如，在一个卡片上，当用户将鼠标悬停在整个卡片上时，卡片中的某个部分（如文字链）会变为蓝色，表示可以点击。这样的悬停邀请可以引导用户进一步的操作，如阅读更多内容或进行特定的交互。
63 |
64 | ### 什么是推论邀请？
65 |
66 | 推论邀请是动态邀请的一种形式，它通过分析用户的行为和上下文来推测用户可能的需求，并提供相应的邀请。
67 |
68 | 例如，当用户点击了某篇文章的“赞”按钮时，系统可以分析用户的偏好，进而推断用户可能对类似的文章感兴趣。系统可以提供一个邀请，鼓励用户开启相关功能或查看更多相关内容。
69 |
70 | 推论邀请可以根据用户的行为和数据分析来提供个性化的建议，以满足用户的需求，并提高用户体验。
71 |
72 | ### 什么是更多内容邀请？
73 |
74 | 更多内容邀请是动态邀请的一种形式，它可以用于邀请用户查看更多相关内容。
75 |
76 | 例如，在弹出对话框（Modal）中，可以通过出现前后切换的箭头来邀请用户查看更多的内容。当用户点击这些箭头时，可以切换到其他相关内容，提供更丰富的信息。
77 |
78 | 更多内容邀请可以帮助用户发现更多相关内容，扩展用户的阅读范围或深入了解特定主题。这种邀请方式可以提高用户的参与度和满意度。
79 |
--------------------------------------------------------------------------------
/docs/ant-design/docs/spec/lightweight.zh-CN.md:
--------------------------------------------------------------------------------
1 | ### 什么是费茨法则（Fitts's Law）？
2 |
3 | 费茨法则是一条关于人机交互的原则，它指出用户鼠标移动距离越短、对象相对目标越大，用户越容易操作。费茨法则的具体计算公式为到达目标的时间 = 到达目标的距离 / 目标的大小。
4 |
5 | ### 什么是简化交互？
6 |
7 | 简化交互是通过运用上下文工具，将内容和操作融合在一起，从而简化用户与系统之间的交互。根据费茨法则，简化交互的关键是减少用户鼠标移动的距离，并增大操作工具的大小，使用户能够更轻松地进行操作。
8 |
9 | ### 简化交互的优势是什么？
10 |
11 | 简化交互有以下优势：
12 |
13 | 1. 提升用户操作的效率：通过减少鼠标移动距离和增大目标大小，用户能够更快地完成操作，提高了操作的效率。
14 | 2. 减少用户的操作疲劳：简化交互使得用户的操作更加轻松和舒适，减少了用户的操作疲劳感。
15 | 3. 提升用户的满意度：简化交互可以让用户更轻松地完成任务，提高用户的满意度和使用体验。
16 | 4. 降低误操作的风险：通过增大目标的大小，可以减少误操作的风险，提高了操作的准确性和稳定性。
17 |
18 | ### 实时可见工具示例 -- 摘自知乎
19 |
20 | 描述内容：实时可见工具的示例图片来自于知乎网站。图片展示了一种实时可见工具的使用方式。这种工具有三种状态：
21 |
22 | - 状态一：在文案中出现一个相对明显的点击区域。
23 | - 状态二：鼠标悬停时，鼠标指针变为手型，底色发生变化，邀请用户点击。
24 | - 状态三：鼠标点击后，和未点击前有明显的区分。
25 |
26 | 该工具的设计理念是将重要操作放在界面中，并实时可见。
27 |
28 | 
29 |
30 | ### 如何使用实时可见工具？
31 |
32 | 使用实时可见工具的步骤如下：
33 |
34 | 1. 在界面中找到一个明显的点击区域。
35 | 2. 将鼠标放在该区域上，观察鼠标指针是否变为手型，底色是否发生变化。
36 | 3. 如果鼠标指针变为手型且底色发生变化，表示该区域支持实时可见功能。
37 | 4. 点击该区域，观察是否有明显的区分变化。
38 |
39 | ### 实时可见工具的设计原则是什么？
40 |
41 | 实时可见工具的设计原则是将重要操作放在界面中，并实时可见。这样可以提醒用户该操作的重要性，并方便用户进行操作。通过鼠标指针的变化和底色的变化，可以吸引用户的注意并引导用户进行点击操作。
42 |
43 | 该设计原则可以提高用户的操作效率和体验，同时减少用户的操作错误和迷失。
44 |
45 | ### 如何判断一个区域是否支持实时可见功能？
46 |
47 | 判断一个区域是否支持实时可见功能可按照以下步骤进行：
48 |
49 | 1. 在界面中找到该区域，并将鼠标放在该区域上。
50 | 2. 观察鼠标指针是否变为手型，底色是否发生变化。
51 | 3. 如果鼠标指针变为手型且底色发生变化，表示该区域支持实时可见功能。
52 | 4. 可以点击该区域，观察是否有明显的区分变化。
53 |
54 | 通过以上判断步骤，可以确定一个区域是否支持实时可见功能，并进行相应的操作。
55 |
56 | ### 悬停即现工具
57 |
58 | 悬停即现工具是一种在鼠标悬停时出现操作项的工具。当某个操作不那么重要，或者使用实时可见工具会影响用户阅读时，可以考虑使用悬停即现工具。通过鼠标的悬停，用户可以快速浏览和使用相关的操作项。
59 |
60 | 举例来说，当用户需要在一个图片上进行操作时，可以在图片上悬停鼠标，出现操作项，比如下载、分享、删除等等。这样可以节省页面空间，使界面更加简洁。
61 |
62 | 悬停即现工具通常使用 CSS 进行实现，利用鼠标的悬停事件触发操作项的显示和隐藏。利用 CSS 样式和动画效果，可以使悬停即现工具更加美观和交互友好。
63 |
64 | ### 实时可见工具
65 |
66 | 实时可见工具是一种直接呈现操作项的工具，通常会在页面上持续显示。实时可见工具适用于那些操作项重要且频繁使用的情况。
67 |
68 | 与悬停即现工具不同的是，实时可见工具不需要鼠标的悬停事件触发，而是一直显示在页面上。用户可以直接看到并使用操作项，无需鼠标悬停操作。
69 |
70 | 实时可见工具可以在界面上以固定位置或者浮动的形式呈现。通过适当的样式和布局设计，可以使实时可见工具既方便用户使用，又不会影响到用户的阅读和浏览体验。
71 |
72 | ### 悬停即现工具与实时可见工具的选择
73 |
74 | 在设计页面时，我们需要根据具体的场景和需求来选择采用悬停即现工具还是实时可见工具。以下是一些参考因素：
75 |
76 | - 操作项的重要性：如果某个操作不那么重要，可以使用悬停即现工具将它隐藏起来，以减少界面的复杂性。
77 | - 用户阅读体验：如果使用实时可见工具会导致页面过于啰嗦，影响用户的阅读和浏览体验，可以考虑使用悬停即现工具。
78 | - 操作项的频繁程度：如果某个操作项需要频繁使用，可以考虑使用实时可见工具，让用户可以随时看到并使用该操作项。
79 |
80 | 综上所述，悬停即现工具和实时可见工具都是在页面中展示操作项的方式，根据具体的需求和场景选择合适的方式，可以提升用户的交互体验和页面的可用性。
81 |
82 | ### 如何使用开关显示工具？
83 |
84 | 可以通过添加一个开关，来控制某些操作只在特定模式时显示。例如可以通过点击开关来切换表格中的文本为输入框，启用编辑功能。
85 |
86 | ### 在开关显示工具中，如何实现文本和输入框的切换？
87 |
88 | 可以通过点击「修改」按钮来实现文本和输入框的切换。当用户点击「修改」按钮后，表格中的文本会变为输入框，从而开启编辑功能。
89 |
90 | ### 开关显示工具的示例图片是什么？
91 |
92 | 示例图片展示了一个开关显示工具的效果。当用户点击「修改」按钮时，表格中的「文本」会变为「输入框」，开启了编辑功能。图片链接：[点击查看示例图片](https://gw.alipayobjects.com/zos/rmsportal/iLilpTYKqogBNlwpmVGw.png)
93 |
94 | ### 可视区域与可点击区域有什么区别？
95 |
96 | 可视区域是指在页面上可以看到的区域，通常由浏览器窗口的大小和页面布局决定。可点击区域是指用户可以点击的区域，它可能比可视区域要大或要小。
97 |
98 | 在某些情况下，我们希望用户点击一个元素时能触发特定的事件，但实际上用户点击的范围可能比元素的可视区域要大。比如，在使用 Table 时，当文字链很短而单元格较大时，用户可能只点击了文字链附近的空白区域，而无法触发预期的事件。
99 |
100 | 为了增强用户的点击体验，可以将整个单元格设置为热区，这样用户点击单元格的任意位置都能触发事件。通过扩大可点击区域，可以提高用户点击的准确性，特别是在移动端使用时更加有效。
101 |
102 | ### 如何增强按钮的响应性？
103 |
104 | 当我们希望增强按钮的响应性时，通常会考虑增加用户点击热区的范围，而不是简单地增大按钮的形状。这样可以在不降低按钮美感的前提下提升用户的点击体验。
105 |
106 | 具体做法是通过扩大按钮的可点击区域，使其超出按钮实际的可见范围。这样，用户可以更轻松地点击按钮，尤其在移动设备上更加实用。
107 |
108 | 需要注意的是，增强按钮响应性时应考虑平衡美感与功能，确保扩大的点击区域不会影响用户对界面的正常操作。在移动端尤其适用，因为触摸屏上的操作精度相对较低。
109 |
--------------------------------------------------------------------------------
/docs/ant-design/docs/spec/motion.zh-CN.md:
--------------------------------------------------------------------------------
1 | ### 什么是 Ant Motion？
2 |
3 | Ant Motion 是 Ant Design 中提炼出来的动效语言，它不仅仅是动效语言，同时也是一套 React 框架动效解决方案。它可以帮助开发者更容易地在项目中使用动效，并提供了单项、组合动画以及整套解决方案。
4 |
5 | ### Ant Motion 能够为界面带来什么好处？
6 |
7 | Ant Motion 的使用能够增强用户认知并增加界面的活力。通过添加动效，可以使用户更加直观地理解界面的交互和变化，提高用户体验。
8 |
9 | ### 在项目中如何使用 Ant Motion？
10 |
11 | 在项目中使用 Ant Motion，需要使用 React 框架，并按照 Ant Design 的相关文档进行配置和调用。Ant Motion 提供了丰富的动画效果和组件，开发者可以根据需要选择合适的动效来应用在界面上，并通过组合不同的动画来实现更丰富的效果。
12 |
13 | ### Ant Design 动效设计的原则有哪些？
14 |
15 | Ant Design 动效设计的原则包括以下三点：
16 |
17 | 1. 自然：保证动作的视觉连贯，符合自然运动规律，让用户感知到动作是成立的。
18 | 2. 高效：尽量节省过渡的时间，快速完成过渡的动画效果，提高用户操作的效率。
19 | 3. 克制：做有意义的动效，不要过多修饰以干扰用户的焦点，保持动效的克制与简洁。
20 |
21 | 示例代码中展示了一个动效设计的实例，通过演示三个不同的动效，分别介绍了这三个原则的具体应用。
22 |
23 | ### Ant Design 如何应用动效设计原则？
24 |
25 | Ant Design 在产品设计中应用动效设计原则的具体方式包括以下几点：
26 |
27 | - 保证动作的连贯性：Ant Design 的动效设计遵循自然运动规律，通过设计连贯的动作，让用户感知到动作的连贯性。
28 | - 节省过渡时间：Ant Design 尽量减少过渡的时间，快速完成过渡的动画效果，提高用户的操作效率。
29 | - 保持克制：Ant Design 动效设计注重保持克制，避免过多修饰以干扰用户的焦点，保持动效的简洁与清晰。
30 |
31 | 示例代码中的动效展示了如何应用这些原则，通过自然的运动规律、高效的过渡时间和克制的修饰方式，为用户提供良好的交互体验。
32 |
33 | ### Ant Design 动效设计的重要性是什么？
34 |
35 | Ant Design 动效设计在企业级应用的产品设计中具有重要的作用，主要体现在以下几个方面：
36 |
37 | - 增强信息认知：动效可以帮助用户更好地理解界面元素之间的关系，提升信息的传达和认知效果。
38 | - 提升用户体验：动效可以增加界面的活力和交互性，提升用户的参与感和满意度。
39 | - 强化品牌形象：动效可以作为品牌的独特标识之一，通过独特的动效设计，增强品牌形象和辨识度。
40 | - 改善用户操作效率：恰当的动效设计可以简化用户操作过程，提高用户操作效率，减少用户的认知负担。
41 |
42 | 因此，Ant Design 动效设计在产品设计中的应用不仅可以提升用户体验，还能够增强品牌形象，提高用户操作效率，是企业级应用产品设计中不可忽视的重要环节。
43 |
44 | ### 如何设计自然的动效背后的运动规律？
45 |
46 | 自然的动效背后体现的是自然运动规律。设计师在设计动效时需要保证视觉上的连贯性，让用户感知到这个动作是成立的，是能够引起共鸣的。
47 |
48 | ### 以 button 的动效设计为例，如何让其看起来像一片树叶飘浮在水面之上？
49 |
50 | 设计师将 button 的动效设计成一片树叶飘浮在水面之上。当用户触碰按钮时，树叶会下浮再反弹，然后出现涟漪效果。这样的设计能够给用户带来自然的感觉，增加用户的互动体验。
51 |
52 | ### 在动效设计中，如何保持转换时的视觉连贯性？
53 |
54 | 在动效设计中，保持转换时的视觉连贯性至关重要。设计师需要确保动效的过程流畅自然，让用户感知到动作的连贯性。这样的设计能够增强用户对界面的理解和认知，并提升用户的交互体验。
55 |
56 | Q 为什么企业级应用需要高效的用户体验？ A 企业级应用需要高效的用户体验是为了提升用户的工作效率，节省时间和精力。
57 |
58 | Q 为什么动效设计需要尽量节省过渡的时间？ A 动效设计需要尽量节省过渡的时间是为了让用户感觉流畅，不被过长的过渡时间拖慢操作步骤。
59 |
60 | Q 动效设计中的出场动画应该如何设置？ A 在动效设计中的出场动画可以选择简单清晰的方式，使用快速的速度进行出场，并且可以直接消失而不需要队列依次出场的形式。
61 |
62 | ### 如何在前端开发中克制夸张的动效？
63 |
64 | 在前端开发中，我们应该尽量避免使用夸张的动效，而是做一些有意义的事情，而不是为了修饰而干扰用户。例如，当我们使用菜单时，展开菜单时应该更注重菜单的内容，而不是过度强调菜单图标的切换。我们可以通过在不经意间进行切换，明确指示变化即可，这样能够避免分散用户的注意力。
65 |
66 | ### 如何处理 Menu 展开时的图标切换？
67 |
68 | 在处理 Menu 展开时的图标切换时，我们应该注重菜单的内容，而不是图标的变化。图标的切换不需要过度强调。我们可以通过在不经意间进行切换，明确指示变化即可。这样不仅能够保持菜单的简洁性，还能够避免分散用户的注意力。
69 |
70 | ### 如何了解更多关于 Ant Motion 动效原则的详细内容？
71 |
72 | 如果想要了解更多关于 Ant Motion 动效原则的详细内容，可以访问 [Ant Motion 动效原则](https://motion.ant.design/language/basic)。在该页面上，你可以找到更多关于如何在前端开发中应用动效以及一些基本原则的信息。通过学习这些内容，你可以更好地运用动效来提升用户体验。
73 |
--------------------------------------------------------------------------------
/docs/ant-design/docs/spec/overview.zh-CN.md:
--------------------------------------------------------------------------------
1 | ### 什么是设计模式？
2 |
3 | 设计模式是一套通用的解决方案，用于解决企业产品中反复出现的设计问题。Ant Design 的设计模式遵循其设计价值观，并提供了一系列的设计方案，既可以直接用于界面设计，也可以根据业务需求进行个性化的定制。
4 |
5 | ### 设计模式有什么作用？
6 |
7 | 使用设计模式可以增加研发团队的确定性，节省设计成本，保持系统的一致性。设计模式帮助设计师解决常见的设计问题，并提供了通用的解决方案，让设计师专注于创意最需要的地方。
8 |
9 | ### 如何使用设计模式？
10 |
11 | 设计模式可以直接用于界面设计，也可以作为出发点，进行个性化的定制。设计者可以根据具体的业务需求来选择合适的设计模式，并将其应用到产品的设计过程中。如果在使用设计模式的过程中遇到问题或有改进建议，可以通过 Github 提交反馈。
12 |
13 | ### 框架设计模式中的功能示例是什么意思？
14 |
15 | 在框架的设计模式中，功能示例是由多个模板组成的，旨在启发用户如何使用和构建一个通用功能。这些示例可以帮助用户更好地理解系统的功能和使用方式。
16 |
17 | ### 框架设计模式中的模板是什么？
18 |
19 | 在框架的设计模式中，模板是一个页面级示例，用于启发用户如何在整个系统中构建典型页面，如详细信息页面。模板可以作为用户构建页面的参考，帮助用户快速搭建符合需求的界面。
20 |
21 | ### 框架设计模式中的组件有哪些分类？
22 |
23 | 在框架的设计模式中，组件分为基本组件和业务组件/模块两类。
24 |
25 | 基本组件是系统的最基本元素，例如按钮和分页器。它们是构建界面的基础，可以用于组成更复杂的业务组件或模块。
26 |
27 | 业务组件/模块是块级示例，通常由多个基本组件组成，如 PageHeader 通用标题。它们是针对特定业务场景设计的，可以帮助用户快速构建常见的业务功能。
28 |
29 | ### Ant Design Pro 是什么？有什么特点？
30 |
31 | Ant Design Pro 是一个开箱即用的解决方案，它提供了超过 20 个模板和 10 个业务组件，用于提高工程师的生产力和沟通效率。
32 |
33 | ### React 官方实现中的 Ant Design 是什么？
34 |
35 | 在 React 官方实现中，Ant Design 是一个拥有 60 多个基础组件的 React UI 库。这个库提供了丰富的组件供工程师使用，在前端开发中起到了重要的作用。
36 |
37 | ### Axure 设计库在 Ant Design 中的作用是什么？
38 |
39 | Axure 设计库是 Ant Design 中的一部分，它包含了一些 Axure 资源包。通过使用这些资源包，工程师可以将原型设计转化为具有视觉效果的组件，从而更好地展示和演示设计的思路和概念。 Axure 设计库中包含了模板、组件等，可以帮助工程师更好地进行开发工作。
40 |
--------------------------------------------------------------------------------
/docs/ant-design/docs/spec/proximity.zh-CN.md:
--------------------------------------------------------------------------------
1 | ### 亲密性的作用是什么？
2 |
3 | 亲密性的作用是实现页面的组织性，让用户对页面结构和信息层次一目了然。当信息之间关联性高时，它们的距离应该越接近，形成一个视觉单元；反之，当信息之间关联性低时，它们的距离应该越远，形成多个视觉单元。
4 |
5 | ### 为什么亲密性是设计中的重要原则？
6 |
7 | 亲密性是设计中的重要原则，因为它能有效地帮助用户理解页面的结构和信息层次。通过将关联性高的信息放在一起，并让它们之间的距离越接近，用户可以更轻松地理解信息之间的关系，提升用户体验。同时，亲密性还可以提高页面的可读性和可用性，让用户更快速地找到他们需要的信息。
8 |
9 | ### 如何实现亲密性？
10 |
11 | 要实现亲密性，可以采用以下方法：
12 |
13 | 1. 将关联性高的信息放在一起，形成一个视觉单元。
14 |
15 | 2. 使用对齐、间距和空白等视觉效果，让关联性高的信息之间的距离更接近。
16 |
17 | 3. 使用颜色、字体、形状等视觉元素，突出关联性高的信息。
18 |
19 | 4. 避免将关联性低的信息放在一起，保持它们之间的距离足够远。
20 |
21 | 通过以上方法，可以有效实现页面的亲密性，提升用户对页面结构和信息层次的理解。
22 |
23 | ### Ant Design 纵向间距关系如何划分？
24 |
25 | 在 Ant Design 中，纵向间距关系通过三种规格进行划分：小号间距、中号间距和大号间距。小号间距为 8px，中号间距为 16px，大号间距为 24px。这种划分方式可以用来组织信息的层次结构。
26 |
27 | ### 如何拉开信息的层次？
28 |
29 | 除了使用小号、中号和大号间距之外，还可以通过加减基础间距的倍数或者增加元素来拉开信息的层次。在 Ant Design 中，基础间距为 8px，通过加减基础间距的倍数，或者增加元素，可以更灵活地调整信息层次。
30 |
31 | ### Ant Design 中纵向间距的计算公式是什么？
32 |
33 | 在 Ant Design 中，纵向间距的计算公式为 `y = 8 + 8 * n`，其中 `n >= 0`。即纵向间距等于基础间距加上基础间距的倍数。这个公式可以帮助我们精确计算出不同层次的纵向间距。
34 |
35 | ### 横向间距关系
36 |
37 | 1. 为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性。
38 |
39 | 2. 在一个组件内部，元素的横向间距也应该有所不同。
40 |
41 | 请问横向间距关系主要是用什么方式实现的？
42 |
--------------------------------------------------------------------------------
/docs/ant-design/docs/spec/reaction.zh-CN.md:
--------------------------------------------------------------------------------
1 | ### 提供邀请的强大体现在什么时候？
2 |
3 | 提供邀请的强大体现在交互之前给出反馈，解决易发现性问题。
4 |
5 | ### 巧用过渡的有用体现在什么时候？
6 |
7 | 巧用过渡的有用体现在交互期间为用户提供视觉反馈。
8 |
9 | ### 为什么即时反应很重要？
10 |
11 | 即时反应的重要性体现在交互之后立即给出反馈。这是因为用户进行了操作或者内部数据发生了变化，系统应该立即有一个对应的反馈。输入量级越大、重要性越高，反馈量级也应该越大、重要性越高。反馈太少或没有反馈的系统会让人感觉迟钝和笨拙，用户体验更差。
12 |
13 | ### 查询模式中的确定类目示例是什么？
14 |
15 | 确定类目示例是指在查询模式中，当用户输入关键词后，查询结果会根据关键词匹配到的类目进行分类展示，其中每个类目都对应一个确定的类目。例如，在搜索引擎中，用户输入一个关键词后，系统会将查询结果按照不同类目进行分类展示，用户可以根据对应类目浏览相应的结果。
16 |
17 | ### 查询模式中的不确定类目示例是什么？
18 |
19 | 不确定类目示例是指在查询模式中，当用户输入关键词后，查询结果可能对应多个类目，但具体类目的数量是不确定的。例如，在电商网站中，当用户搜索某个商品时，由于该商品可能属于多个类别或者有多个相关类别，系统会将查询结果展示为不确定类目示例，用户可以根据具体商品的特点进行选择。
20 |
21 | ### 什么是实时搜索？
22 |
23 | 实时搜索是一种搜索功能，当用户在搜索框中输入关键词时，系统会实时根据用户输入的关键词进行搜索，并在搜索框下方显示与关键词匹配的结果。这样用户可以实时看到搜索结果，方便快捷地找到所需信息。实时搜索与自动完成、实时建议等概念相近，但实时搜索更加强调针对用户输入的实时搜索功能。在实时搜索中，用户可以根据搜索结果的变化来动态调整搜索词，以获取更准确的搜索结果。
24 |
25 | ### 反馈模式
26 |
27 | 实时预览是指在用户提交输入之前，提供一个预览功能，让用户了解系统将如何处理他们的输入。这种反馈模式可以有效地避免错误的发生，为用户提供更好的体验。通过实时预览，用户可以提前了解到密码强度、有效性等信息，从而在提交之前进行必要的修改或调整。
28 |
29 | 渐进式展现是一种在必要的时候提供必要提示的设计思路，而不是一股脑地显示所有提示。这样可以避免界面混乱，减少用户的认知负担。通过渐进式展现，用户可以逐步了解和掌握系统的功能和操作流程，提升整体的使用体验。
30 |
31 | ### 进度指示
32 |
33 | 进度指示是在一个操作需要一定时间完成时，及时告知用户操作进度的一种方式。常见的进度指示包括按钮加载、表格加载、富列表加载和页面加载。根据操作的量级和重要性，可以选择合适的进度指示类型来展示操作的进度，以保持与用户的沟通。
34 |
35 | 按钮加载指示是通过在按钮上显示加载状态的方式告知用户操作正在进行中，以避免用户多次点击按钮造成重复操作。
36 |
37 | 表格、富列表和页面加载指示是在数据加载过程中通过显示加载动画或进度条的方式告知用户操作正在进行中，以提供良好的用户体验。
38 |
39 | ### 点击刷新
40 |
41 | 点击刷新是一种用于告知用户有新内容的反馈方式，通常会提供按钮等工具来帮助用户查看新内容。通过点击刷新，用户可以主动获取最新的信息，并进行必要的操作或查看。
42 |
43 | ### 定时刷新
44 |
45 | 定时刷新是一种无需用户介入的方式，通过定时展示新内容来提供用户体验。定时刷新可以用于展示最新的列表项、活动等内容，提醒用户关注最新动态。
46 |
47 | 以上是关于反馈模式、进度指示、点击刷新和定时刷新的一些基本介绍。通过这些反馈模式和指示方式，可以为用户提供更好的交互体验，增强用户对系统操作的可控性和可预知性。
48 |
--------------------------------------------------------------------------------
/docs/ant-design/docs/spec/repetition.zh-CN.md:
--------------------------------------------------------------------------------
1 | ### 如何处理重复元素的问题？
2 |
3 | 重复元素是指在界面设计中出现相同的线条、线框、颜色、设计要素、设计风格、格式、空间关系等。为了解决重复元素的问题，可以采取以下方法：
4 |
5 | 1. 提取公共部分：通过将重复的元素提取出来，转化为可复用的组件或样式，从而避免重复的代码和样式。例如，在前端开发中可以将重复的线框或设计要素封装成组件，并在需要的地方引用。
6 |
7 | 2. 使用变量和常量：通过使用变量和常量来管理重复的元素，可以在需要修改时更加方便和高效。例如，在设计风格中可以使用CSS变量来定义颜色或其他设计属性，然后在需要的地方使用这些变量。
8 |
9 | 3. 利用工具和框架：很多前端开发工具和框架提供了处理重复元素的功能和机制，可以帮助开发者更好地管理和复用代码。例如，使用CSS预处理器如Less或Sass可以使用mixin来封装重复的样式。
10 |
11 | 通过上述方法，可以有效地处理重复元素的问题，减少代码冗余，提高开发效率，同时也能提升页面的一致性和可维护性。
12 |
--------------------------------------------------------------------------------
/docs/ant-design/docs/spec/research-empty.zh-CN.md:
--------------------------------------------------------------------------------
1 | ## 问题 设计原则中的明确原则是什么？
2 |
3 | 答案：明确原则是通过使用清晰明了的语言、插画等形式告知用户空状态的具体原因。
4 |
5 | ### 问题 设计原则中的提供邀请原则是什么？
6 |
7 | 答案：提供邀请原则是提供帮助文案、建议操作等解决方案，表明在下一个界面可以做什么，引导用户进行操作。
8 |
9 | ### 如何展示明确空状态提示？
10 |
11 | 正确示范如下：
12 |
13 | ### 如何避免空状态没有任何提示？
14 |
15 | 错误示范如下：
16 |
17 | ### 新手引导中的空状态如何帮助用户？
18 |
19 | 一般来说，新用户希望空状态具有帮助说明和推荐操作。首次使用应用或功能场景的空状态非常有用，因为它向用户展示了该功能和流程，并且可以帮助用户快速上手。为了帮助首次使用的新用户，空状态可以使用功能引导、帮助文档等方式填充原本为空的页面。
20 |
21 | ### 空状态在新手引导中扮演什么角色？
22 |
23 | 空状态在新手引导中扮演着非常重要的角色。它不仅向用户展示了应用的功能和流程，还可以帮助用户快速上手。在新手引导中，空状态可以通过功能引导、帮助文档等方式填充原本为空的页面，给用户提供必要的指引和操作建议。
24 |
25 | ### 在新用户引导中如何使用功能引导和帮助文档填充空状态？
26 |
27 | 在新用户引导中，可以使用功能引导和帮助文档来填充空状态，帮助用户快速上手。功能引导可以通过提示、弹窗、引导箭头等方式，向用户介绍应用的功能和流程。帮助文档可以提供更详细的说明，解答用户可能遇到的问题，并提供操作建议。通过这些方式，可以让新用户更容易理解和使用应用。
28 |
29 | ### 如何使用引导来提供状态提示？
30 |
31 | 要使用引导来提供状态提示，你可以将状态提示信息嵌入到页面中的适当位置。这可以包括状态图标、文字说明或颜色变化等元素。通过这些提示，用户可以清楚地了解当前页面的状态并采取相应的操作。同时，你还可以提供相应的快捷操作按钮，以便用户能够快速执行与状态相关的操作。
32 |
33 | ### 如何使用引导来提供帮助引导？
34 |
35 | 引导可以是一种有用的工具，用于向用户提供帮助和指导，特别是在复杂的流程中。你可以在页面上添加帮助引导模块，以帮助用户全面理解操作流程。这可以包括步骤说明、示例图像、交互提示等。通过这些帮助引导，用户可以更好地掌握操作流程并顺利完成任务。
36 |
37 | ### 如何使用引导来提供建议操作？
38 |
39 | 引导还可以用于向用户提供建议操作，以帮助他们根据当前状态做出正确的决策。你可以在页面上添加建议操作模块，其中包含基于当前情况的建议、提示或推荐。通过这些建议操作，用户可以获得有益的指导，以便在复杂的流程中做出明智的选择并采取正确的行动。
40 |
41 | ### 空状态是什么？在前端开发中如何处理空状态下的操作引导？
42 |
43 | 空状态是指用户自愿从功能上删除数据的情况，例如完成了任务清单上的所有项目或阅读了所有通知。在前端开发中，处理空状态下的操作引导一般不需要进行操作引导，只需要用图形元素或提示信息进行空状态的说明即可。
44 |
45 | ### 如何在前端开发中实现空状态的显示？
46 |
47 | 在前端开发中，可以通过以下方式实现空状态的显示：
48 |
49 | - 使用图形元素：通过在页面中插入相应的图标或图片，来展示空状态，以帮助用户理解当前场景。
50 | - 提示信息：可以通过文字提示或标语，向用户传达当前页面或应用程序的空状态信息，以便用户理解和作出相应操作。
51 |
52 | ### 如何处理空状态下的用户操作？
53 |
54 | 在处理空状态下的用户操作时，可以考虑以下几点：
55 |
56 | - 保持简洁：避免在空状态下进行过多的用户操作引导，以免给用户带来困扰或混淆。
57 | - 提供反馈：在用户执行操作后，及时给予反馈，以便用户得知他们的操作已经成功执行。
58 | - 直观明了：设计操作引导时，要保持操作的直观性和明了性，以便用户能够迅速理解并顺利执行。
59 |
60 | 以上就是关于空状态及其处理方式的一些说明，在前端开发中，我们可以根据具体场景采取相应的方式来处理和引导用户操作。
61 |
62 | ### 图形元素在内容区域无数据场景如何使用？
63 |
64 | 图形元素在内容区域无数据场景中，可用于给用户提供直观的视觉反馈。例如，可以使用一个无数据的图片展示给用户内容区域为空的情况。图形元素的选择要符合场景的要求，并能够清晰地传达无数据的信息。
65 |
66 | ### 提示信息在内容区域无数据场景如何使用？
67 |
68 | 提示信息在内容区域无数据场景中，可用于向用户解释为什么内容为空以及如何解决这个问题。提示信息应该简洁明了，能够清晰地告诉用户当前情况，并引导用户进行下一步操作。
69 |
70 | ### 建议操作在内容区域无数据场景如何使用？
71 |
72 | 建议操作在内容区域无数据场景中，可用于给用户提供解决问题的建议。这些建议操作可以包括点击按钮重新加载数据、切换筛选条件等。建议操作的选择要基于用户的需求和场景需求，能够有效帮助用户解决问题。
73 |
74 | ### Salesforce 空状态设计准则
75 |
76 | Salesforce 空状态设计准则提供了一系列指导，用于设计和展示空状态的信息。空状态是指当用户在应用中遇到没有相关内容的页面时，显示给用户的提示和引导信息。
77 |
78 | - **清晰明了的消息**：空状态消息应该简洁明了，能够准确传达给用户当前的情况和应该采取的行动。
79 | - **引导和建议**：提供用户在空状态下的建议和引导，帮助用户快速找到合适的操作或者下一步的行动。
80 | - **图标和插图**：使用图标和插图来增加视觉吸引力，并更加生动地传达空状态的信息。
81 | - **可点击元素**：在空状态中，可以添加一些可点击的元素，如按钮、链接等，给用户提供与内容相关的操作。
82 |
83 | - **一致性**：在整个应用中保持空状态的设计一致性，使用户可以轻松识别和理解空状态的含义。
84 | - **可操作性**：提供用户可以执行的操作，指导用户开始或继续他们的任务。
85 | - **关注点引导**：通过强调关键信息和操作，让用户快速找到下一步的行动。
86 |
87 | ### Material Design 空状态设计准则
88 |
89 | Material Design 空状态设计准则提供了一系列指导，用于设计和展示空状态的信息。空状态是指在应用中没有相关内容的页面，向用户展示的提示信息。
90 |
91 | ### 主要内容
92 |
93 | - **清晰明了的消息**：提供清晰、简洁的消息，告诉用户当前页面的情况和可以采取的行动。
94 | - **引导和建议**：给出用户在空状态下的建议和引导，帮助用户快速找到合适的操作或者下一步的行动。
95 | - **图标和插图**：使用图标和插图来增加视觉吸引力，并更加生动地传达空状态的信息。
96 | - **动画效果**：可以添加一些动画效果，吸引用户的注意力并提高用户的参与度。
97 |
98 | ### 设计原则
99 |
100 | - **一致性**：在整个应用中保持空状态的设计一致性，使用户可以轻松识别和理解空状态的含义。
101 | - **可操作性**：提供用户可以执行的操作，指导用户开始或继续他们的任务。
102 | - **视觉吸引力**：使用图标、插图和动画效果来吸引用户的注意力，提高用户的参与度。
103 |
--------------------------------------------------------------------------------
/docs/ant-design/docs/spec/research-overview.zh-CN.md:
--------------------------------------------------------------------------------
1 | ### 设计模式 - 探索频道的目的是什么？
2 |
3 | 设计模式 - 探索频道的目的是公开正在研究完善的设计模式和尚未定稿的内容。这些内容大部分可以通过使用现有的 antd 组件进行搭建，但也可能存在一小部分新的组件尚未开发。探索频道的初心是与用户一起完善 Ant Design。如果用户正在使用这些内容，他们的反馈可以帮助我们更快地进行优化和迭代，并推动组件尽快进入开发状态。
4 |
5 | ### 如何向设计模式 - 探索频道提供反馈？
6 |
7 | 用户可以通过 [反馈地址](https://www.yuque.com/antdesign/topics) 或 [阿里内网反馈地址](https://yuque.antfin-inc.com/ui-assets/topics) 向设计模式 - 探索频道提供反馈。我们欢迎用户的反馈，并将根据反馈进行相应的优化和改进。
8 |
--------------------------------------------------------------------------------
/docs/ant-design/docs/spec/research-workbench.zh-CN.md:
--------------------------------------------------------------------------------
1 | ### 工作台是什么？
2 |
3 | 工作台常被作为应用的主页，是一个为用户提供便利的交通枢纽。它提供常用信息入口，以中心辐射的方式导航至应用的各功能模块；呈现用户当前需要关注的信息，缩短获取关键信息的路径；同时允许用户在工作台直接操作一些高频任务。
4 |
5 | ### 工作台的作用是什么？
6 |
7 | 工作台的作用是为用户提供便利的交通枢纽。它可以帮助用户快速导航至应用的各功能模块，并呈现用户当前需要关注的信息。工作台同时也允许用户直接在其上执行一些高频任务，使用户能够更高效地完成工作。
8 |
9 | ### 工作台和主页有什么区别？
10 |
11 | 工作台常被作为应用的主页，但工作台和主页有一些区别。主页更倾向于呈现整个应用的概览和导航入口，而工作台则更注重为用户提供便利的交通枢纽。工作台的设计目标是缩短用户获取关键信息的路径，以及直接执行一些高频任务，使用户能够更高效地完成工作。因此，工作台通常会提供常用信息入口、中心辐射的功能模块导航等特性，以满足用户的个性化需求。
12 |
13 | ### QA1：什么是可寻性？
14 |
15 | 可寻性是指用户能否快速定位到他们想要的信息。在设计中，我们需要考虑如何提高用户的信息获取效率，使其能够方便地找到所需的内容。
16 |
17 | ### QA2：如何降低记忆负载？
18 |
19 | 降低记忆负载是指在用户再次访问时，能够理解其核心目标，并为可能的目的地提供最短的导航路径。在设计中，我们需要提供直观的页面结构和导航方式，使用户能够轻松回忆起之前的操作，并快速找到他们想要的内容。
20 |
21 | ### QA3：为什么重视可寻性和降低记忆负载？
22 |
23 | 重视可寻性和降低记忆负载可以提高用户体验和效率。当用户能够迅速找到所需的信息，并从头脑中记忆出之前的操作时，他们将更愿意在我们的产品或网站中停留并继续使用。因此，设计中需要关注这些因素，以提供更好的用户体验。
24 |
25 | ### 什么时候使用模板 - 工作台？\*\*
26 |
27 | 模板 - 工作台可以在以下情况下使用：
28 |
29 | - 为用户再次访问缩短导航路径；
30 | - 为用户提供常用导航入口。
31 |
32 | ### 模板 - 工作台涉及哪些功能？\*\*
33 |
34 | 模板 - 工作台涉及以下功能：
35 |
36 | - 使用帮助；
37 | - 核心数据；
38 | - 快捷入口；
39 | - 待办清单；
40 | - 关注；
41 | - 运营模块。
42 |
43 | ### 在设计模板 - 工作台时有哪些建议？\*\*
44 |
45 | 在设计模板 - 工作台时，以下是一些建议：
46 |
47 | - 展示与日常工作相关模块，将总模块数量控制在 5-9 个；
48 | - 尽量在首屏呈现最常使用的内容；
49 | - 提供基于角色的差异化视图。
50 |
51 | ### 模板 - 工作台适用于哪些情况？\*\*
52 |
53 | 模板 - 工作台适用于以下情况：
54 |
55 | - 需要为用户再次访问缩短导航路径；
56 | - 需要提供常用导航入口。
57 |
58 | ### 模板 - 工作台设计上涉及哪些功能？\*\*
59 |
60 | 模板 - 工作台设计上涉及以下功能：
61 |
62 | - 使用帮助；
63 | - 核心数据；
64 | - 快捷入口；
65 | - 待办清单；
66 | - 关注；
67 | - 运营模块。
68 |
69 | ### 在设计模板 - 工作台时，需要考虑哪些建议？\*\*
70 |
71 | 在设计模板 - 工作台时，需要考虑以下建议：
72 |
73 | - 展示与日常工作相关的模块，但总模块数量应控制在 5-9 个之间；
74 | - 尽量在首屏显示最常使用的内容；
75 | - 为不同角色提供差异化的视图。
76 |
77 | ### 在什么情况下可以使用模板 - 工作台？\*\*
78 |
79 | 可以在以下情况下使用模板 - 工作台：
80 |
81 | - 为用户再次访问缩短导航路径的情况下；
82 | - 为用户提供常用导航入口的情况下。
83 |
84 | ### 模板 - 工作台包含哪些功能？\*\*
85 |
86 | 模板 - 工作台包含以下功能：
87 |
88 | - 使用帮助；
89 | - 核心数据；
90 | - 快捷入口；
91 | - 待办清单；
92 | - 关注；
93 | - 运营模块。
94 |
95 | ### 设计模板 - 工作台时有哪些建议需要考虑？\*\*
96 |
97 | 设计模板 - 工作台时需要考虑以下建议：
98 |
99 | - 展示与日常工作相关的模块，但总模块数量应控制在 5-9 个之间；
100 | - 尽量在首屏显示最常使用的内容；
101 | - 提供基于角色的差异化视图。
102 |
103 | ### 新手引导模板
104 |
105 | 什么时候使用新手引导模板？
106 |
107 | - 当新用户到达平台，尚未开始任何工作时，可以使用新手引导模板来缩短新用户的学习时长。
108 | - 当部分模块没有内容时，也可以使用新手引导模板作为空状态指引。
109 |
110 | 新手引导模板涉及哪些功能？
111 |
112 | - 新手引导模板主要涉及使用帮助和空状态引导的功能。
113 |
114 | 设计建议：
115 |
116 | - 在新手引导模板中，应向用户介绍平台的用途，并引导用户开始工作。
117 | - 如果用户需要管理复杂的对象，可以提供 Demo 预览入口。
118 |
119 | ### 使用帮助
120 |
121 | 什么时候使用使用帮助？
122 |
123 | - 当用户需要了解平台的使用方法、功能说明或操作指南等内容时，可以使用使用帮助。
124 |
125 | 使用帮助涉及哪些功能？
126 |
127 | - 使用帮助主要涉及向用户提供平台的使用方法、功能说明或操作指南等内容。
128 |
129 | 设计建议：
130 |
131 | - 在使用帮助中，应该清晰地向用户展示平台的各项功能和操作方法，以便用户能够更好地理解和使用平台。
132 |
133 | ### 空状态引导
134 |
135 | 什么时候使用空状态引导？
136 |
137 | - 当某个模块没有内容时，可以使用空状态引导来引导用户如何操作或提醒用户当前模块为空。
138 |
139 | 空状态引导涉及哪些功能？
140 |
141 | - 空状态引导主要涉及提供引导用户如何操作或提醒用户当前模块为空的功能。
142 |
143 | 设计建议：
144 |
145 | - 在空状态引导中，应向用户清晰地展示当前模块为空的原因，并向用户提供操作指南或引导，以便用户能够快速填充或操作当前模块。
146 |
147 | ### 页面中应该提供哪两类导航形式？
148 |
149 | 页面中应该提供用户知道所需功能的导航和发现类导航两种形式。
150 |
151 | ### 用户知道他想要使用的功能，应该如何进行导航？
152 |
153 | 用户知道所需功能后，可以通过利用导航来获取功能。导航通常会提供相关链接或按钮，用户可以点击链接或按钮，以便进入所需功能的页面。
154 |
155 | [](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*xlYoTIf8NpwAAAAAAAAAAABkARQnAQ)
156 |
157 | ### 发现类导航是什么？
158 |
159 | 发现类导航适用于用户需要完成某个任务，但不知道使用哪个功能来完成。发现类导航一般会展示多个相关功能或选项，用户可以根据自己的需求和感兴趣的方向进行选择。
160 |
161 | [](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*9nKdRJBAu8sAAAAAAAAAAABkARQnAQ)
162 |
163 | ### 如何按照使用频次布置内容？
164 |
165 | 在日常工作中，我们可以根据使用频次来布置内容。以下是一些方法可以帮助你有效地按照使用频次布置内容：
166 |
167 | 1. 观察用户行为：通过工具或系统日志，观察用户在应用或网站上的行为，可以收集用户的点击、浏览、搜索行为等数据信息，从而了解用户对不同内容的使用频次。
168 |
169 | 2. 进行用户调研：通过问卷调查、用户访谈等方式，主动获取用户对不同内容的使用频次反馈。这种方式可以直接从用户口中了解到他们对不同内容的关注度和需求程度。
170 |
171 | 3. 数据分析和模型预测：通过对历史数据的分析，可以得出不同内容的使用频次趋势，并基于模型预测未来的使用频次。这样可以有针对性地布置内容。
172 |
173 | 4. 交互设计和用户界面优化：通过合理的交互设计和用户界面优化，提高用户对某些内容的访问权重，从而影响用户对内容的使用频次。
174 |
175 | 以上是按照使用频次布置内容的一些常用方法和技巧，希望对你在前端开发中有所帮助。如果还有其他问题，请随时提问。
176 |
--------------------------------------------------------------------------------
/docs/ant-design/docs/spec/stay.zh-CN.md:
--------------------------------------------------------------------------------
1 | ### 足不出户是什么原则？
2 |
3 | 足不出户是一种设计原则，意思是在一个页面解决尽可能多的问题，尽量避免页面的刷新和跳转。这是因为频繁的页面刷新和跳转容易导致变化盲视现象，打断用户的心流。根据变化盲视理论，人们往往会忽视场景中的一些变化，这些变化可能是由于障碍物、眼球运动、地点的变化或缺乏注意力等原因导致的。心流是一种将个人精神力完全投注在某种活动上的感觉，心流状态下人们会感到高度的兴奋和充实。
4 |
5 | ### 为什么要遵循足不出户的原则？
6 |
7 | 遵循足不出户的原则可以提升用户的使用体验。频繁的页面刷新和跳转会打断用户的心流，导致用户的注意力被分散，使用体验下降。通过在一个页面解决尽可能多的问题，可以减少用户在页面之间的切换，提供连贯的使用体验。同时，减少页面刷新和跳转也可以提升页面的性能，减少加载时间，提高用户的满意度。
8 |
9 | ### 如何实现足不出户？
10 |
11 | 实现足不出户的关键是设计和开发人员需要详细分析用户需求，尽可能在一个页面上提供多种功能和解决方案。可以通过使用异步加载数据、动态更新页面内容等技术手段，减少页面的刷新和跳转。另外，使用交互设计和用户界面设计的最佳实践，如使用面包屑导航、侧边栏菜单等，可以方便用户在页面内进行导航和切换功能。最重要的是，要时刻关注用户的使用体验，不断优化和改进页面的设计，提高用户的满意度。
12 |
13 | ### 覆盖层的二次确认功能如何应用？
14 |
15 | 覆盖层的二次确认功能主要是为了避免滥用 Modal 弹出框进行二次确认。在实际开发中，我们可以勇敢地让用户尝试，给用户提供「撤销」的机会。当用户点击「删除」按钮后，会出现一个 Message 告知用户操作成功，并提供「撤销」的按钮。如果用户进行下一个操作或者在 1 分钟内不进行任何操作，Message 会消失，用户无法再「撤销」。
16 |
17 | ### 覆盖层的详情展示功能如何实现？
18 |
19 | 覆盖层的详情展示功能一般用在列表中，通过用户「悬停」或「点击」某个区块来显示该条列表项的更多详情信息。当用户悬停在某个区块上时，需要设置一个适当的延迟触发时间（例如 0.5 秒左右），之后覆盖层会立即加载并显示对应的详情信息。当鼠标移出区块时，覆盖层会立即关闭。
20 |
21 | ### 覆盖层的输入功能如何实现？
22 |
23 | 覆盖层的输入功能可以让用户直接在覆盖层上进行少量字段的输入。一般情况下，用户可以通过鼠标「点击」图标来触发输入覆盖层。当用户在覆盖层中进行输入后，如果点击覆盖层以外的其他区块，输入结果会被保存并覆盖层会关闭。这样用户可以方便地在覆盖层上进行输入操作。
24 |
25 | ### 嵌入层是什么？
26 |
27 | 嵌入层是指在列表中，用于显示某条列表项的详情信息，以保持上下文的连续性。它通常以弹出层的形式呈现，可以包含图片、文字等内容。
28 |
29 | 
30 |
31 | ### 标签页是如何使用的？
32 |
33 | 标签页是一种整理和分类多个平级信息的方式，它将多组相关的信息放在不同的标签页中，一次只显示一组信息。用户可以通过点击标签页切换不同的内容。
34 |
35 | 
36 |
37 | 以上是关于嵌入层和标签页的说明，可以帮助你了解它们的使用方法和作用。如果你在开发中遇到相关需求，可以参考以上信息进行实现。
38 |
39 | ### Web 实现流程的方式有哪些？
40 |
41 | 长期以来，Web 实现流程的方式有一种常见的做法，就是把每个步骤放在一个单独的页面上。虽然这种方式是分解问题的简单方式，但并不是最佳解决方案。对于某些「流程处理」而言，让用户始终待在同一个页面上则更有必要。
42 |
43 | ### 什么是渐进式展现？它有什么作用？
44 |
45 | 渐进式展现是一种基于用户的操作或某种特定规则，逐步展现不同的操作选项的方式。它可以根据用户的行为或者特定规则，动态调整页面上显示的选项。渐进式展现可以提供更简洁的界面，减少用户的困惑和错误操作。
46 |
47 | ### 配置程序指的是什么？它是如何帮助用户完成任务或产品组装的？
48 |
49 | 配置程序是通过提供一系列的配置项，帮助用户完成任务或者产品组装的工具。用户可以根据自己的需求和偏好，选择适当的配置项来创建或修改产品。配置程序可以提供灵活性和个性化选择，以满足用户的特定需求。
50 |
51 | ### 弹出框覆盖层是什么？它适用于什么样的场景？
52 |
53 | 弹出框覆盖层是指通过弹出一个对话框来展示一部分内容，并在弹框中使用「步骤条」来管理复杂流程的方式。虽然弹出框的出现会打断用户的心流，但在某些复杂流程中，使用弹出框覆盖层可以更好地引导用户完成任务并确保流程的顺利进行。
54 |
--------------------------------------------------------------------------------
/docs/ant-design/docs/spec/transition.zh-CN.md:
--------------------------------------------------------------------------------
1 | ### 巧用过渡是为了什么？
2 |
3 | 巧用过渡是为了增强用户和界面的沟通，让界面保持生动。人脑对动态的事物更加敏感，适当加入过渡效果可以提醒用户新加入的信息元素如何使用，并重新识别从页面转变的信息元素。
4 |
5 | ### 什么是巧用过渡中的"Adding"？
6 |
7 | "Adding"是巧用过渡中的一种情况。当页面中有新加入的信息元素时，用户应该被告知如何使用这些新元素。过渡效果应该能够引起用户的注意，并提示新元素的存在和用途。
8 |
9 | ### 巧用过渡中的"Receding"是什么意思？
10 |
11 | "Receding"是巧用过渡中的一种情况。当页面中有与当前页无关的信息元素时，这些元素应该以适当的方式进行移除。过渡效果可以让用户意识到这些元素的消失，以免产生困惑或干扰。
12 |
13 | ### "Normal"在巧用过渡中的作用是什么？
14 |
15 | "Normal"指的是那些从转场开始到结束都没有发生变化的信息元素。这些元素不需要添加过渡效果，因为它们保持不变，不会引起用户的注意。过渡效果应该更多地关注于新加入或移除的元素，以提升用户界面的交互体验。
16 |
17 | ### 如何在视图变化时保持上下文？
18 |
19 | 在视图变化时，可以通过滑入与滑出的方式来有效构建虚拟空间。通过使用滑入与滑出的效果，可以使视图的切换更加平滑，帮助用户保持上下文的连贯性。
20 |
21 | ### 什么是传送带？如何使用传送带来扩展虚拟空间？
22 |
23 | 传送带是一种在视图切换时能够极大地扩展虚拟空间的技术。通过使用传送带效果，可以使视图的切换变得更加流畅，用户可以在不同的视图之间进行快速切换，从而扩展虚拟空间的可视范围。
24 |
25 | ### 折叠窗口对于视图切换起到了什么作用？
26 |
27 | 折叠窗口是一种在视图切换时有助于保持上下文的技术。通过使用折叠窗口效果，可以将不需要展示的内容进行收起，从而在视图切换时保持用户的上下文，并且还可以拓展虚拟空间。折叠窗口能够使用户在视图切换时更加方便地获取所需的信息。
28 |
29 | ### 对象增加示例
30 |
31 | 示例中展示了在列表/表格中如何新增一个对象。通过视频可以看到，新增的对象会在列表/表格中以一行高亮的形式显示出来，以便告知用户这是新增的项。几秒后，高亮效果消失，以免过度干扰用户。
32 |
33 | ### 对象删除示例
34 |
35 | 在列表/表格中删除一个对象的示例。通过视频可以看到，被删除的对象会在列表/表格中消失。删除操作可能是通过用户点击删除按钮或者其他触发方式进行的。
36 |
37 | ### 对象更改示例
38 |
39 | 在列表/表格中更改一个对象的示例。通过视频可以看到，当用户更改了某个对象的详情内容后，详情所在的网格会以黄底的形式显示，表明该对象发生了更改。几秒后，黄底效果消失，恢复正常。
40 |
41 | ### 对象呼出示例
42 |
43 | 点击页面中特定的元素时，呼出一个新对象的示例。通过视频可以看到，当用户点击页面中的元素时，会呼出一个新对象。呼出的对象可能是弹窗、浮层或其他形式的展示。
44 |
45 | 以上是根据提供的视频生成的文档，用于展示在列表/表格中对象的增删改呼出等操作示例。
46 |
--------------------------------------------------------------------------------
/docs/ant-design/docs/spec/values.zh-CN.md:
--------------------------------------------------------------------------------
1 | ### Ant Design 设计价值观是什么？
2 |
3 | Ant Design 设计价值观是设计者在评价设计优劣时所遵循的内在标准。它启发了 Ant Design 的设计原则和设计模式，并为解决具体设计问题提供了指导和通用解决方案。
4 |
5 | ### Ant Design 的设计价值观有哪些特点？
6 |
7 | Ant Design 在坚持设计价值观的过程中有四个与众不同的特点。这些特点可以帮助设计者更好地理解和应用 Ant Design 的设计理念。
8 |
9 | ### 设计价值观对 Ant Design 的设计起到了什么作用？
10 |
11 | Ant Design 的设计价值观作为内在标准，指导和激发了 Ant Design 的设计原则和设计模式。通过遵循设计价值观，设计者可以更好地评价设计的优劣，并为具体的设计问题提供向导和一般解决方案。这有助于保持设计的一致性和高质量。
12 |
13 | ### Ant Design 的设计理念是什么？
14 |
15 | Ant Design 的设计理念是追求「自然」交互。在设计中，Ant Design 借鉴了自然界的规律，通过充分利用视觉要素，如布局、色彩、插画、图标等，降低用户的认知成本，让用户能够获得真实流畅的感受。此外，Ant Design 还注重行为自然，通过深入理解用户、系统角色和任务目标之间的关系，以及利用行为分析、人工智能、传感器、元数据等策略，提供主动式服务，帮助用户决策并减少操作，使人机交互行为更自然。
16 |
17 | ### Ant Design 如何体现自然交互？
18 |
19 | Ant Design 在体现自然交互方面采取了多种措施。首先，Ant Design 在界面设计中充分借鉴了自然界规律，从而降低用户的认知成本。其次，Ant Design 在一些场景下，适时加入听觉、触觉等其他感知通道，为用户创造更丰富自然的产品体验。此外，Ant Design 在与系统的互动中，通过充分理解用户、系统角色和任务目标之间的关系，场景化组织系统功能和服务，并辅以行为分析、人工智能、传感器、元数据等策略，提供主动式服务，帮助用户决策并减少操作，让人机交互行为更自然。
20 |
21 | ### 自然交互在产品设计中的重要性是什么？
22 |
23 | 自然交互在产品设计中具有重要的意义。首先，自然交互能够降低用户的认知成本，使用户能够更轻松地使用产品，提升用户的满意度和体验。其次，自然交互能够减少用户的脑力和体力消耗，让用户更加轻松地完成任务。此外，自然交互还能够创造真实流畅的产品体验，增强用户的情感共鸣，提高产品的吸引力和竞争力。因此，在产品设计中，注重自然交互是非常重要的。
24 |
25 | ### Ant Design 如何通过高确定性降低合作熵？
26 |
27 | Ant Design 通过探索设计规律、模块化设计思路来降低合作熵，提供设计者精简的设计规则、组件和模式。这样设计者可以聚焦于最有价值的产品功能打磨，用尽可能少的设计元素表达功能。同时，Ant Design 还采用面向对象的方法，将设计规律抽象成"对象"，增强界面设计的灵活性和可维护性，降低系统的不确定性。另外，Ant Design 还采用模块化设计，将复杂或重复出现的局部封装成模块，最终降低系统的复杂度，提升可靠性和可维护性。
28 |
29 | ### Ant Design 如何保持用户确定性？
30 |
31 | Ant Design 在设计过程中注重保持用户确定性。它提供一致的外观和交互，让用户在不同产品、终端和系统之间保持熟悉感。这种一致性可以提升产品的易学性，降低用户的认知和操作成本，提高工作效率。通过Ant Design，用户可以更轻松地完成日常工作，实现各个企业级产品的协同。
32 |
33 | ### Ant Design 如何通过设计者确定性提升产品界面？
34 |
35 | Ant Design 通过向设计者提供精简的设计规则、组件和模式，来提升产品界面的确定性。设计者可以聚焦于最有价值的产品功能打磨，并用尽可能少的设计元素来表达这些功能。另外，Ant Design 还提倡设计者运用面向对象的方法，探索设计规律并将其抽象成“对象”，增强界面设计的灵活性和可维护性，降低系统的不确定性。此外，Ant Design 还倡导模块化设计，将复杂或重复出现的局部封装成模块，减少系统的复杂度，提高可靠性和可维护性。通过这些方法，Ant Design 赋能设计者，降低合作熵，提升产品界面的质量。
36 |
37 | ### 什么是意义感在产品设计中的重要性？
38 |
39 | 意义感在产品设计中非常重要，它能够促成用户使命的达成。产品设计应该明确目标，提供即时的反馈，让用户能够明白每个交互行为对于主目标的达成的贡献。此外，过程的意义也很重要，设计应该挑战适中，让用户全情投入工作中，而不是被界面分散注意力。
40 |
41 | ### 如何实现结果的意义感在产品设计中？
42 |
43 | 实现结果的意义感需要明确目标，拆解明确的子目标，让每个交互行为都围绕主目标的达成。同时，每个行为都应该提供恰当、即时的反馈，让用户能够了解自己的操作结果。此外，还可以通过情感化设计来适度安抚用户负面情感，并强化用户的正面情感。
44 |
45 | ### 为什么挑战适中的过程意义对于产品设计很重要？
46 |
47 | 挑战适中的过程意义对于产品设计至关重要，它能够让用户全情投入工作中并获得富有成就感的工作体验。设计师需要根据不同场景下的工作难度来调整功能的触发时机，以匹配用户的能力。同时，要避免增加无必要的实体，不分散用户的注意力，让用户专注于任务的达成，而不是界面。这样可以让用户持续沉浸在工作的心流中，并随着用户能力的成长提供更高的挑战。
48 |
49 | ### 什么是生长性？
50 |
51 | 生长性指的是企业级产品功能的增长与用户系统角色的演变相生相伴。设计者在创建产品时应该为其负责，并提升功能和价值的可发现性。设计者应该以发展的眼光思考设计，全面考虑人与机器两个方面的共同成长。
52 |
53 | ### 价值连接是什么？
54 |
55 | 价值连接指的是产品增长依赖于用户群体的扩大和深度使用，而用户的成长又依赖于产品功能的完善。设计者应该采用系统设计思维，了解产品功能的价值，探索用户在不同场景下的需求，并建立起价值和需求之间的连接。通过让产品的价值被发现，帮助用户建立更有效、更高效的工作方式。
56 |
57 | ### 人机共生的重要性是什么？
58 |
59 | 人机共生指的是产品功能和用户需求之间更紧密的连接，使人机互动更加紧密，用户与系统共同发展。在进行产品设计时，不应将用户和系统视为独立的实体，而应将它们视为一个动态发展的共同体来思考。这样可以确保产品具有足够的灵活性和适应性，充满生命力。
60 |
--------------------------------------------------------------------------------
/docs/pro-components/LICENSE.md:
--------------------------------------------------------------------------------
1 | ### MIT 许可证是什么？
2 |
3 | MIT 许可证是一种开源软件许可证，它允许使用、修改、合并、发布、分发、再许可和出售软件的副本。该许可证还包含了代码的免责声明，表示软件是"按原样"提供的，没有任何担保。此外，MIT 许可证要求在所有副本或实质部分中包含版权声明和许可声明。
4 |
5 | ### MIT 许可证有什么限制和条件？
6 |
7 | MIT 许可证中明确规定了一些限制和条件，包括：
8 |
9 | - 必须包含版权声明和许可声明；
10 | - 不提供任何担保和条件；
11 | - 不承担任何索赔、损害赔偿责任等。
12 |
13 | ### 如何使用 MIT 许可证？
14 |
15 | 使用 MIT 许可证的软件需要在每个副本中包含版权声明和许可声明。此外，您可以根据自己的需求对软件进行修改、合并、发布、分发、再许可和出售。请注意，MIT 许可证不提供任何担保，使用软件时需要自行承担风险和责任。
16 |
17 | 注意：本文所提供的信息仅用于参考。具体的法律问题和许可证应该请教专业人士。
18 |
--------------------------------------------------------------------------------
/docs/pro-components/docs/components.md:
--------------------------------------------------------------------------------
1 | ### 如何在 ProTable 和 ProList 中使用新的数据结构？
2 |
3 | ProTable 和 ProList 使用了新的数据结构，你只需要按照我们的约定使用参数，就能非常简单地使用它们。以下是一个示例：
4 |
5 | ```tsx
6 | const msg: {
7 | datT[];
8 | page: number;
9 | success: boolean;
10 | total: number;
11 | } = {
12 | dat[],
13 | page: 1,
14 | success: true,
15 | total: 0,
16 | };
17 | ```
18 |
19 | 只需要将你的数据按照这个结构传递给 ProTable 或 ProList，就可以轻松地使用它们了。
20 |
21 | ### 如何配置全局的网络请求转化器？
22 |
23 | 如果你的后端数据使用了自己熟悉的 URL，虽然我们可以用 Umi 的 request 来转化，但是每个 table 都需要单独配置就比较麻烦。不过，如果你使用 Umi 的 request，我们可以定义一个全局的转化器。在 app.tsx 文件中进行如下配置：
24 |
25 | ```tsx
26 | import { request, RequestConfig } from 'umi';
27 |
28 | export const request: RequestConfig = {
29 | errorConfig: {
30 | adaptor: (resData) => {
31 | // resData 是我们自己的数据
32 | return {
33 | ...resData,
34 | total: resData.sum,
35 | success: resData.ok,
36 | errorMessage: resData.message,
37 | };
38 | },
39 | },
40 | };
41 | ```
42 |
43 | 配置完成后，你可以在任何地方使用像这样的代码：
44 |
45 | ```tsx
46 | ` 标签将代码包裹起来，并将代码文件的路径传入 `src` 属性中。
20 |
21 | 3. 在代码示例的 `title` 属性中，填写相应的标题名称，以便更好地描述这段代码的功能和使用场景。
22 |
23 | 4. 确保你的代码中已经定义了 `onOpenChange` 函数，它将作为回调函数，以响应开关状态的变化。
24 |
25 | 5. 将 `open` 属性设置为一个布尔值，用于控制组件的打开或关闭状态。
26 |
27 | 6. 当你需要在组件的打开或关闭状态发生变化时执行一些操作时，你可以在 `onOpenChange` 函数中编写相应的逻辑代码。
28 |
29 | 7. 最后，根据你的具体需求和应用场景，调整代码中的其他相关属性和参数。
30 |
31 | 通过遵循以上步骤，你可以成功使用 open 和 onOpenChange 属性，并根据需要对组件的打开和关闭状态进行控制和相应操作。
32 |
33 | ### open 和 onOpenChange 属性分别用于什么？
34 |
35 | open 和 onOpenChange 属性在前端开发中常用于组件的状态管理和交互控制。
36 |
37 | - open 属性用于控制组件的打开和关闭状态。它的值为布尔类型，当为 true 时表示组件处于打开状态，当为 false 时表示组件处于关闭状态。
38 |
39 | - onOpenChange 属性是一个回调函数，用于监听组件的打开和关闭状态的变化。当组件的打开或关闭状态发生变化时，该函数会被触发，并执行相应的操作逻辑。
40 |
41 | 通过使用 open 和 onOpenChange 属性，你可以实现组件的状态控制和响应交互，以便根据用户的操作和需求对组件进行动态的打开和关闭操作，并在状态变化时执行相应的逻辑代码。
42 |
43 | ### 使用 open 和 onOpenChange 的注意事项
44 |
45 | 在使用 open 和 onOpenChange 属性时，需要注意以下几点：
46 |
47 | - 确保你已经引入了支持这些属性的组件，并按照正确的方式使用它们。
48 |
49 | - 在代码示例中，需要定义一个 `onOpenChange` 函数，该函数将作为回调函数，在组件的打开或关闭状态发生变化时被触发。
50 |
51 | - open 属性的值应为一个布尔类型的变量，用于控制组件的打开和关闭状态。
52 |
53 | - 根据你的具体需求和场景，可以根据组件的打开和关闭状态执行一些操作，例如切换样式、加载数据等。
54 |
55 | - 确保你的代码中也包含了其他相关属性和参数，以满足你的具体需求和应用场景。
56 |
57 | 通过遵循以上注意事项，你可以更好地使用 open 和 onOpenChange 属性，并在前端开发中实现组件的状态控制和交互操作。
58 |
59 | ### ModalForm 组合了哪些组件？
60 |
61 | ModalForm 组合了 Modal 和 ProForm 两个组件。
62 |
63 | ### ModalForm 中的 trigger 参数是用来做什么的？
64 |
65 | trigger 参数是用来触发 Modal 打开的 DOM 元素，通常是一个按钮。
66 |
67 | ### ModalForm 中的 open 参数的类型是什么？
68 |
69 | open 参数的类型是 open，具体含义未给出。
70 |
71 | ### ModalForm 中的 onOpenChange 参数是在什么情况下触发的？
72 |
73 | onOpenChange 参数在 visible 改变时触发。
74 |
75 | ### ModalForm 中的 modalProps 参数是用来做什么的？
76 |
77 | modalProps 参数是 Modal 组件的 props，可以使用与 antd 相同的方式进行配置。
78 |
79 | ### ModalForm 中的 title 参数表示什么？
80 |
81 | title 参数表示弹框的标题。
82 |
83 | ### ModalForm 中的 width 参数表示什么？
84 |
85 | width 参数表示弹框的宽度。
86 |
87 | ### ModalForm 中的 onFinish 参数在什么情况下触发？
88 |
89 | onFinish 参数在提交数据时触发。
90 |
91 | ### ModalForm 中的 submitTimeout 参数是用来做什么的？
92 |
93 | submitTimeout 参数是在提交数据时禁用取消按钮的超时时间（毫秒）。
94 |
95 | ### ModalForm 中的 submitter 参数与哪个组件的配置方式相同？
96 |
97 | submitter 参数的配置方式与 ProForm 组件相同。
98 |
99 | ### DrawerForm 的触发方式是什么？可以使用什么类型的 dom？
100 |
101 | DrawerForm 的触发方式是使用 trigger 参数来触发 Modal 打开，一般是 button。trigger 参数的类型是 ReactNode。
102 |
103 | ### DrawerForm 是否支持调整大小？怎么调整大小？
104 |
105 | 是的，DrawerForm 支持调整大小。调整大小的方式可以通过 resize 参数来实现。resize 参数可以是一个对象，包含 onResize、maxWidth 和 minWidth 属性，也可以是一个布尔值。onResize 用于定义调整大小时的回调函数，maxWidth 和 minWidth 分别用于定义宽度的最大值和最小值。
106 |
107 | ### DrawerForm 的 onFinish 事件是在什么时候触发？触发后会有什么效果？
108 |
109 | DrawerForm 的 onFinish 事件是在提交数据时触发的。当触发 onFinish 事件后，会根据事件处理函数的返回值决定抽屉的行为。如果返回 true，抽屉会关闭，并且如果配置了 destroyOnClose 属性，表单会被重置。如果返回 false，则抽屉会保持打开状态，并且表单不会被重置。如果没有配置 onFinish 事件，提交数据后不会有任何效果。
110 |
--------------------------------------------------------------------------------
/docs/pro-components/packages/form/src/components/StepsForm/index.md:
--------------------------------------------------------------------------------
1 | ## 什么是 StepsForm？
2 |
3 | StepsForm 是一个分步表单组件，通过使用 Provider 来管理子表单的数据。每个子表单都是完整的数据，在 StepsForm 组合成最后的数据。该组件还自带一个进度条和一些管理进度条的相关 API。
4 |
5 | ### StepsForm 继承自哪个组件？它有什么功能？
6 |
7 | StepsForm 继承自 Form.Provider 组件。可以查看[这里](https://ant.design/components/form-cn/#Form.Provider)了解更多关于 Form.Provider 组件的信息。
8 |
9 | StepsForm 还提供了转化 moment 值的功能，这是由 ProForm 提供的功能。因此，在 `onFormFinish` 和 `onFormChange` 事件中，所传递的值都是未经转化的值。你可以使用这些值进行进一步处理或操作。
10 |
11 | ### StepsForm 如何管理进度条？
12 |
13 | StepsForm 自带了一个进度条，以帮助用户了解当前分步表单的进度。此外，StepsForm 还提供了一些管理进度条的相关 API，你可以使用这些 API 来控制进度条的显示和行为。具体的管理进度条的相关 API 可以在官方文档中找到。
14 |
15 | 1. ### `current` 参数的作用是什么？
16 |
17 | - 说明：`current` 是当前表单的步骤数，从 0 开始计数。
18 | - 类型：`number`
19 | - 默认值：0
20 |
21 | 2. ### `onCurrentChange` 是一个什么样的事件？
22 |
23 | - 说明：`onCurrentChange` 是当 `current` 发生改变时触发的事件。
24 | - 类型：`(current:number)=>void`
25 | - 参数：`current`，表示当前的步骤数。
26 |
27 | 3. ### `onFinish` 事件的触发条件是什么？
28 |
29 | - 说明：`onFinish` 是在表单的最后一步提交成功之后触发的事件。
30 | - 类型：`(values:T)=>void | boolean`
31 | - 参数：`values`，表单提交成功后返回的值。
32 | - 返回值：如果返回 `true`，表单将会自动重置（包括 `StepForm` 返回第一步）。
33 |
34 | 4. ### `stepsProps` 是什么？
35 |
36 | - 说明：`stepsProps` 是 `StepsForm` 自带的 `Steps` 组件的属性，使用方式同 [antd](https://ant.design/components/steps-cn/) 组件相同，但去掉了 `current` 和 `onChange`。
37 | - 类型：[props](https://ant.design/components/steps-cn/#API)
38 |
39 | 5. ### `stepFormRender` 的作用是什么？
40 |
41 | - 说明：`stepFormRender` 是用于自定义当前展示的表单的函数，返回的 DOM 会在表单内部显示。
42 | - 参数：`form`，表单的引用对象。
43 | - 返回值：返回一个 `ReactNode`，表示自定义的表单展示内容。
44 |
45 | 6. ### `stepsFormRender` 的作用是什么？
46 |
47 | - 说明：`stepsFormRender` 是用于自定义整个表单区域的函数，返回的 DOM 会在表单的外部显示。
48 | - 参数：`form`，表单的引用对象；`submitter`，表单自带的提交区域。
49 | - 返回值：返回一个 `ReactNode`，表示自定义的表单区域展示内容。
50 |
51 | 7. ### `stepsRender` 的作用是什么？
52 |
53 | - 说明：`stepsRender` 是用于自定义步骤器的函数。
54 | - 参数：`steps`，当前的步骤器；`dom`，DOM 节点。
55 | - 返回值：返回一个 `ReactNode`，表示自定义的步骤器展示内容。
56 |
57 | 8. ### `formRef` 是什么？
58 |
59 | - 说明：`formRef` 是 `StepForm` 引用的对象，方便自定义触发操作。
60 | - 类型：`MutableRefObject`
61 |
62 | ### StepForm 是什么？
63 |
64 | StepForm 是一个基于 ProForm 的组件，提供了与 ProForm 相同的功能，只是在 `onFinish` 回调中支持 Promise。当 `onFinish` 返回 `false` 时，StepForm 不会跳转到下一步。
65 |
66 | ### StepForm 的参数有哪些？
67 |
68 | StepForm 的参数如下：
69 |
70 | - `onFinish`：当表单提交成功时触发的回调函数，类型为`(values:T) => Promise`。
71 |
72 | ### StepForm 的默认值是什么？
73 |
74 | StepForm 没有默认值。
75 |
76 | ### StepForm 的 onFinish 参数是什么类型的？
77 |
78 | StepForm 的 `onFinish` 参数类型为 `(values:T) => Promise`，其中 `values` 表示表单提交时的值。返回的 Promise 中如果是 `false`，则 StepForm 不会跳转到下一步。
79 |
80 | 请注意，以上内容的示例是基于 ProForm 组件，详情请参考 [ProForm](/components/form)。
81 |
--------------------------------------------------------------------------------
/docs/pro-components/packages/layout/src/components/PageHeader/index.md:
--------------------------------------------------------------------------------
1 | ### 什么是页头（PageHeader）组件？
2 |
3 | 页头（PageHeader）组件位于页容器中，页容器的顶部，起到了内容概览和引导页级操作的作用。它包括了面包屑、标题、页面内容简介、页面级操作等元素，以及页面级导航组件。
4 |
5 | ### 页头的作用是什么？
6 |
7 | 页头的作用是提供页面的概览和引导，使用户能够快速了解页面的内容和可用的操作。通过显示面包屑、标题和简介，以及提供页面级别的操作按钮和导航，页头组件帮助用户更好地理解页面的结构和功能，并提供直接进入下一步操作的入口。
8 |
9 | ### 页头包含哪些元素？
10 |
11 | 页头包含以下几个元素：
12 |
13 | - 面包屑：显示当前页面在网站或应用程序结构中的位置。
14 | - 标题：页面的主要标题，用于描述页面的内容。
15 | - 页面内容简介：对页面主要内容的简要描述或说明。
16 | - 页面级操作：与页面内容相关的操作按钮，例如编辑、保存或分享。
17 | - 页面级导航：链接到页面内其他部分的导航组件，例如标签页或侧边栏菜单。
18 |
19 | 通过组合这些元素，页头组件提供了一个整体的上部信息区域，以帮助用户快速了解页面内容和可用的操作选项。
20 |
21 | ### PageHeader 组件有哪些参数？
22 |
23 | 参数列表如下：
24 |
25 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
26 | | --- | --- | --- | --- | --- |
27 | | avatar | 标题栏旁的头像 | [AvatarProps](/components/avatar/) | - | |
28 | | backIcon | 自定义 back icon ，如果为 false 不渲染 back icon | ReactNode \| boolean | \。
11 | - metas: 列表项配置，类似 Table 中的 columns，类型为 Metas。
12 | - rowKey: 行的 key，一般是行 id，类型为 string 或者 `(row,index)=>string`，默认值为 `'id'`。
13 | - headerTitle: 列表头部主标题，类型为 React.ReactNode。
14 | - loading: 是否加载中，类型为 boolean 或者 `(item: any) => boolean`，默认值为 `false`。
15 | - split: 是否有分割线，类型为 boolean，默认值为 `false`。
16 | - rowSelection: 与 antd 相同的配置，表示行选择，类型为对象或者布尔值，默认值为 false。
17 | - expandable: 与 antd 相同的配置，表示可展开行的配置，类型为对象或者 `false`。
18 | - showActions: 何时展示 actions，CardList 模式下不生效，类型为 `'hover'` 或者 `'always'`，默认值为 `'always'`。
19 | - showExtr 何时展示 extra，类型为 `'hover'` 或者 `'always'`，默认值为 `'always'`。
20 | - onRow: 与 antd 相同的配置，当用户传入 `grid` 属性时，列表将会以卡片模式进行渲染，此事件将不会触发，请使用 `onItem`，类型为 `function(record, index)`。
21 | - onItem: 与 antd 相同的配置，表示在所有类型点击某个项目都会触发该事件，类型为 `function(record, index)`。
22 | - rowClassName: 自定义列表行的类名，类型为字符串或者 `(row, index) => string`。
23 | - itemHeaderRender: 自定义每一列的 header，不同于 itemRender 的是它会保留多选和展开收起。
24 | - itemCardProps: 自定义卡片列表的 proCard props，只在卡片列表下生效。
25 |
26 | ### 如何使用 itemHeaderRender 和 itemCardProps？
27 |
28 | itemHeaderRender 和 itemCardProps 是 ProList 的两个参数。
29 |
30 | - itemHeaderRender 是用来自定义每一列的 header，与 itemRender 不同的是，它会保留多选和展开收起。你可以将自定义的组件传入到 itemHeaderRender 中，实现个性化的列表列头显示。
31 |
32 | - itemCardProps 是用来自定义卡片列表的 proCard 的 props，只在卡片列表下生效。你可以传入一个对象，设置 proCard 的属性，从而自定义卡片列表的显示样式。
33 |
34 | ### Metas.[Meta] 通用 API
35 |
36 | ### 参数
37 |
38 | - **dataIndex**: 数据在数据项中对应的路径，支持通过数组查询嵌套路径
39 |
40 | - 类型: `string` | `string[]`
41 | - 默认值: `-`
42 |
43 | - **valueType**: 值的类型，和 ProTable 一致
44 |
45 | - 类型: `'text'` | `'date'` ...
46 | - 默认值: `'text'`
47 |
48 | - **render**: 自定义渲染函数
49 | - 类型: `(text: React.ReactNode, record: T, index: number) => React.ReactNode | React.ReactNode[]`
50 | - 默认值: `-`
51 |
52 | ### 说明
53 |
54 | Metas.[Meta] 是一个通用 API，用于配置 ProTable 的元数据项。
55 |
56 | ### 示例
57 |
58 | ```jsx
59 | import { ProTable } from 'antd';
60 |
61 | const columns = [
62 | {
63 | title: '姓名',
64 | dataIndex: 'name',
65 | },
66 | {
67 | title: '年龄',
68 | dataIndex: 'age',
69 | valueType: 'number',
70 | },
71 | {
72 | title: '操作',
73 | render: (text, record, index) => (
74 | handleEdit(record)}>编辑
75 | ),
76 | },
77 | ];
78 |
79 | const dataSource = [
80 | {
81 | name: '张三',
82 | age: 18,
83 | },
84 | {
85 | name: '李四',
86 | age: 20,
87 | },
88 | ];
89 |
90 | const MyTable = () => {
91 | return | void
16 | - 默认值：-
17 |
--------------------------------------------------------------------------------
/docs/umi/docs/docs/blog/code-splitting.md:
--------------------------------------------------------------------------------
1 | ### Umi 4 内置了哪些代码分包策略？
2 |
3 | Umi 4 内置了以下代码分包策略：
4 |
5 | - `all`：将所有路由页面拆分为一个个独立的 JS 文件，每个文件都是一个独立的分包。
6 | - `asyncChunks`：根据异步加载的路由页面进行分包，每个异步加载的路由页面都是一个独立的分包。
7 | - `granularChunks`：根据每个组件或页面的大小进行分包，将大组件或页面拆分为多个独立的分包。
8 | - `children`：将路由页面的子页面拆分为一个个独立的分包。
9 |
10 | 你可以通过配置 `codeSplitting` 的 `jsStrategy` 字段来指定使用哪种代码分包策略。
11 |
12 | ### 如何手动进行更细致的分包？
13 |
14 | 如果你需要手动进行更细致的分包，可以通过配置 `dynamicImport` 字段来实现。在 routes 配置中，可以将 `dynamicImport` 设置为一个函数，该函数返回一个 promise，该 promise 解析后返回组件实例。
15 |
16 | 例如：
17 |
18 | ```ts
19 | export default [
20 | {
21 | path: '/user',
22 | component: dynamic(() => import('./user')),
23 | },
24 | ];
25 | ```
26 |
27 | 其中，`dynamic` 函数用于将组件包装为一个动态加载的组件。
28 |
29 | 这样配置后，会自动将 `/user` 页面以及相关依赖进行分包，实现按需加载的效果。
30 |
31 | ### 如何手动拆分代码？
32 |
33 | 当项目的产物体积变得较大时，我们可以考虑手动拆分代码。下面是一个示例：
34 |
35 | 在 React 应用中，我们可以使用 `lazy` 和 `Suspense` 实现手动拆分。首先，我们需要引入 `lazy` 和 `Suspense`：
36 |
37 | ```ts
38 | import { lazy, Suspense } from 'react';
39 | ```
40 |
41 | 接下来，我们可以使用 `lazy` 方法来异步加载我们要拆分的组件。这样，只有当组件被需要时才会被加载。例如，下面的代码将会把 `./Page` 组件拆分出去：
42 |
43 | ```ts
44 | const Page = lazy(() => import('./Page'));
45 | ```
46 |
47 | 最后，我们需要在组件中使用 `Suspense` 组件来包裹我们需要异步加载的组件，并提供一个 loading 的回退组件：
48 |
49 | ```ts
50 | export default function MyComponent() {
51 | return (
52 | loading...}>
53 |
55 | )
56 | }
57 | ```
58 |
59 | 通过手动拆分代码，我们可以按需加载较大的第三方库或组件，从而减小项目的总体积。这有助于提升应用的性能和加载速度。
60 |
61 | ### 为什么要手动拆分代码？
62 |
63 | 手动拆分代码是为了应对项目产物体积变大的情况。当应用中引入了较大的第三方库或组件时，整个应用的体积可能会变得很大，导致加载时间变长。
64 |
65 | 通过手动拆分，我们可以将原本一次性加载的组件拆分成多个部分，只在需要时进行加载。这样可以减小初始加载的体积，提升应用的加载速度和性能。
66 |
67 | 手动拆分代码也有助于按需加载，只加载当前页面所需的组件，避免不必要的资源消耗。
68 |
69 | ### 如何手动拆分使用了较大第三方库的组件？
70 |
71 | 当我们的组件依赖于较大的第三方库时，可以使用手动拆分来实现按需加载。下面是一个示例：
72 |
73 | 假设我们的组件需要依赖第三方库 `lodash`，我们可以按如下步骤来手动拆分：
74 |
75 | 1. 首先，引入 `lazy` 和 `Suspense`：
76 |
77 | ```ts
78 | import { lazy, Suspense } from 'react';
79 | ```
80 |
81 | 2. 接下来，使用 `lazy` 方法来异步加载我们要拆分的组件。例如，下面的代码将会拆分出一个组件 `MyComponent`：
82 |
83 | ```ts
84 | const MyComponent = lazy(() => import('./MyComponent'));
85 | ```
86 |
87 | 3. 最后，在使用该组件的地方，使用 `Suspense` 组件来包裹我们需要异步加载的组件，并提供一个 loading 的回退组件：
88 |
89 | ```ts
90 | export default function App() {
91 | return (
92 | Loading...}>
93 |
95 | )
96 | }
97 | ```
98 |
99 | 通过以上步骤，我们可以手动拆分使用了较大第三方库的组件，并且在需要时进行按需加载。这样可以减小项目的体积，提升应用的性能和加载速度。
100 |
--------------------------------------------------------------------------------
/docs/umi/docs/docs/blog/mfsu-faster-than-vite.md:
--------------------------------------------------------------------------------
1 | ### Vite 和 MFSU 的区别是什么？
2 |
3 | Vite 是一种快速的现代前端构建工具，它利用浏览器原生 ES 模块的能力，在开发环境下实现了按需编译和快速冷启动。相比之下，MFSU 是一种优化方案，它通过对模块进行按需编译和缓存，提高了 Webpack 在开发环境下的构建速度。
4 |
5 | ### Umi 4 中支持的构建方式有哪些？
6 |
7 | Umi 4 同时支持 webpack 和 vite 两种构建方式。这样可以让开发者可以根据项目需求选择合适的构建工具，既可以享受 Webpack 的功能和生态，又可以获得 Vite 的速度优势。
8 |
9 | ### MFSU with esbuild 模式与其他模式相比有什么优势？
10 |
11 | 根据测试结果，在多个场景下，MFSU with esbuild 模式在速度方面表现较优。它利用了 MFSU（Module Federation Server-Usage），对模块进行按需编译和缓存。结合 esbuild，可以进一步提高构建速度。根据测试数据，这种模式在无缓存的冷启动、有缓存的热启动、修改代码后的热更新等方面都表现出优秀的性能。
12 |
--------------------------------------------------------------------------------
/docs/umi/docs/docs/blog/umi-4-rc.md:
--------------------------------------------------------------------------------
1 | ### Umi 4 RC 发布的新功能有哪些？
2 |
3 | Umi 4 RC发布了以下新功能：
4 |
5 | - 新官网和文档
6 | - MFSU V3 & 默认开启
7 | - 双构建引擎和ESMi
8 | - Webpack 5
9 | - React Router 6 & 新路由
10 | - 最佳实践迭代
11 | - 依赖预打包
12 | - Umi Max
13 | - Low Import 研发模式
14 | - 强约束功能集成
15 | - Import All From Umi 迭代
16 | - srcTranspiler 和 depTranspiler
17 | - jsMinifier 和 cssMinifier
18 | - 应用元数据
19 | - 微生成器
20 | - 贴心小改进
21 |
22 | 还有一些计划在正式版发布之前做的事情，包括api route、umi server and adapter、route loader、稳定的 lint、更多命令、组件研发 father 4、文档工具 dumi 2等。
23 |
--------------------------------------------------------------------------------
/docs/umi/docs/docs/docs/guides/boilerplate.md:
--------------------------------------------------------------------------------
1 | ### 如何在当前目录下创建一个 `my-umi-app` 的项目？
2 |
3 | 你可以使用以下命令在当前目录创建一个名为 `my-umi-app` 的 Umi 项目：
4 |
5 | ```
6 | pnpm create umi my-umi-app
7 | ```
8 |
9 | 运行这个命令后，会自动安装 `create-umi` 脚手架，并创建一个最基本的 Umi 项目。
10 |
11 | ### 在创建项目时，有哪些可选项需要注意？
12 |
13 | 在运行 `pnpm create umi my-umi-app` 命令时，会出现两个可选项：
14 |
15 | 1. 选择 Npm 客户端
16 |
17 | 你可以从以下几个选项中选择你习惯使用的 Node 依赖管理工具：
18 |
19 | - npm
20 | - cnpm
21 | - tnpm
22 | - yarn
23 | - pnpm（Umi 官方推荐）
24 |
25 | 2. 选择 Npm 源
26 |
27 | 你可以从以下几个选项中选择你想要使用的 Npm 源：
28 |
29 | - npm
30 | - taobao
31 |
32 | 选择好这两个选项后，脚手架会根据你的选择生成一个最基本的 Umi 项目，并自动安装依赖。
33 |
34 | ### 生成的项目结构是怎样的？
35 |
36 | 创建完项目后，你会在当前文件夹下看到一个名为 `my-umi-app` 的文件夹。这个文件夹包含了以下文件和文件夹：
37 |
38 | - package.json：Umi 项目的配置文件。
39 | - pnpm-lock.yaml：pnpm 安装依赖的锁定文件。
40 | - src/assets：存放项目的静态资源文件。
41 | - src/layouts：存放项目的布局文件。
42 | - src/pages：存放项目的页面文件。
43 | - tsconfig.json：TypeScript 的配置文件。
44 | - typings.d.ts：TypeScript 的类型声明文件。
45 |
46 | 这样，你就成功地一键初始化了一个 Umi 项目。
47 |
--------------------------------------------------------------------------------
/docs/umi/docs/docs/docs/guides/client-loader.md:
--------------------------------------------------------------------------------
1 | ## 如何在路由文件中使用 `clientLoader` 函数？
2 |
3 | 要在路由文件中使用 `clientLoader` 函数，需要完成以下步骤：
4 |
5 | 1. 在路由文件（如 `pages/.../some_page.tsx`）中，除了默认导出页面组件外，再导出一个名为 `clientLoader` 的异步函数。
6 | 2. 在 `clientLoader` 函数内部，完成路由数据加载的逻辑，可以通过 `fetch` 或其他方式获取数据。
7 | 3. 在页面组件中，通过调用 `useClientLoaderData` 钩子函数，获取 `clientLoader` 函数返回的数据。
8 |
9 | ### 如何使用 `useClientLoaderData` 钩子函数获取 `clientLoader` 函数返回的数据？
10 |
11 | 要使用 `useClientLoaderData` 钩子函数获取 `clientLoader` 函数返回的数据，可以按照以下步骤进行操作：
12 |
13 | 1. 在需要获取数据的页面组件中，引入 `useClientLoaderData` 钩子函数。
14 | 2. 在页面组件中调用 `useClientLoaderData` 钩子函数，将返回的 `data` 解构赋值给变量。
15 | 3. 在页面组件中使用该变量来显示相应的数据。
16 |
17 | 注意，`useClientLoaderData` 钩子函数是通过 umi 提供的自定义 hooks `useClientLoaderData` 来实现的。
18 |
19 | ### 如何在页面组件中显示 `clientLoader` 函数返回的数据？
20 |
21 | 要在页面组件中显示 `clientLoader` 函数返回的数据，可以按照以下步骤进行操作：
22 |
23 | 1. 在页面组件中定义一个变量，例如 `data`，用于保存 `clientLoader` 函数返回的数据。
24 | 2. 在页面组件中调用 `useClientLoaderData` 钩子函数，将返回的 `data` 解构赋值给变量。
25 | 3. 在页面组件的 JSX 内容中使用该变量来渲染相应的数据。
26 |
27 | 例如，在一个 `SomePage` 组件中，可以使用以下代码来显示 `clientLoader` 函数返回的数据：
28 |
29 | ```tsx
30 | import { useClientLoaderData } from 'umi';
31 |
32 | export default function SomePage() {
33 | const { data } = useClientLoaderData();
34 | return {data};
35 | }
36 | ```
37 |
38 | 在上述代码中，`data` 变量保存了 `clientLoader` 函数返回的数据，并在 `` 中进行了展示。
39 |
40 | ### 如何优化三层嵌套路由的数据请求？
41 |
42 | 在三层嵌套路由的场景中，瀑布流式的数据请求会严重影响用户的体验。为了提高页面渲染速度，我们可以采用以下优化方法：
43 |
44 | 1. 将组件请求数据的程序提取到 `clientLoader` 中。这样，Umi 可以并行地请求这些数据，而不必等待前一层路由的组件加载完成。
45 |
46 | 优化前的瀑布流请求示意图如下：
47 |
48 | 
49 |
50 | 优化后的并行请求示意图如下：
51 |
52 | 
53 |
54 | 通过将组件请求数据的程序提取到 `clientLoader` 中，可以避免瀑布流式的数据请求，提高页面加载速度，提升用户体验。
55 |
56 | 例如，将第一层路由的组件请求数据的逻辑提取到 `clientLoader` 中，使得第一层路由的组件可以并行加载，不必等待数据请求完成。
57 |
58 | 2. 合理使用数据缓存。在嵌套路由场景中，可能会存在多次加载同一组件的情况。为了避免重复加载和数据请求，可以合理使用数据缓存。可以通过 `dva` 的 `loading` 属性来判断数据是否已经加载完成，如果已经加载完成，则不再进行重复请求。
59 |
60 | 例如，当第一层路由的数据请求完成后，可以将请求结果保存到应用的状态管理中，下次再加载该组件时，先从状态管理中获取数据，避免重复请求。
61 |
62 | 3. 使用异步组件加载。在嵌套路由场景中，可以使用异步组件加载的方式来提高页面渲染速度。异步组件加载可以将页面的组件划分为更小的模块，按需加载，减少首屏加载所需的资源。
63 |
64 | 例如，将各个路由的组件按照层级划分为多个异步组件，根据路由的层级加载对应的异步组件，可以提高页面渲染速度，减少不必要的资源加载。
65 |
66 | 通过以上优化方法，可以有效地提高三层嵌套路由场景下页面的加载速度，提升用户的体验。
67 |
--------------------------------------------------------------------------------
/docs/umi/docs/docs/docs/guides/debug.md:
--------------------------------------------------------------------------------
1 | ### 如何调试 dev 阶段的构建产物？
2 |
3 | 要调试项目的构建产物，在这里以 `umi.js` 为例，你可以按照以下步骤进行操作：
4 |
5 | 1. 首先，将原来的 `umi.js` 下载到你的当前项目根目录下。
6 |
7 | 2. 然后，根据你的调试需要，对该文件进行编辑。
8 |
9 | 3. 接下来，在浏览器中刷新你的项目页面，此时项目会开始使用根目录下的 `umi.js` 文件。
10 |
11 | 4. 如果你调试完毕并想要恢复原状，只需删除根目录下的 `umi.js` 文件即可。
12 |
13 | 希望以上信息可以帮助到你！
14 |
15 | ### XSwitch 是什么？如何使用？
16 |
17 | XSwitch 是一个 Chrome 插件，提供了在特定的域名环境调试或验证代码的功能。你可以通过 [XSwitch Chrome 插件下载链接](https://chrome.google.com/webstore/detail/xswitch/idkjhjggpffolpidfkikidcokdkdaogg) 下载并安装 XSwitch 插件。安装完插件后，在特定的域名环境下，你可以通过 XSwitch 配置转发规则，替换特定资源的动态地址，以便调试或验证你的本地代码。
18 |
19 | ### 如何使用 XSwitch 配置转发规则调试本地代码？
20 |
21 | 如果你想在线上项目地址 `https://www.myproject.com` 上调试本地代码，可以使用 XSwitch 配置转发规则来实现。在配置转发规则之前，请确保你的本地开发环境已经启动，并设置了环境变量 `SOCKET_SERVER`。下面是具体的步骤：
22 |
23 | 1. 使用环境变量 `SOCKET_SERVER` 启动本地环境（防止因为连接不上 socket server 导致页面不断刷新）。示例代码如下：
24 |
25 | ```bash
26 | $SOCKET_SERVER=http://127.0.0.1:8000/ npx umi dev
27 | ```
28 |
29 | 2. 打开 XSwitch 插件，在转发规则中配置相应的资源替换规则。示例配置如下：
30 |
31 | ```json
32 | {
33 | "proxy": [
34 | [
35 | "https://www.myproject.com/umi.2c8a01df.js",
36 | "http://127.0.0.1:8000/umi.js"
37 | ],
38 | ["https://www.myproject.com/(.*.js)", "http://127.0.0.1:8000/$1"],
39 | [
40 | "https://www.myproject.com/umi.ae8b10e0.css",
41 | "http://127.0.0.1:8000/umi.css"
42 | ]
43 | ]
44 | }
45 | ```
46 |
47 | 这里的配置表示将 `https://www.myproject.com/umi.2c8a01df.js` 替换为本地开发环境的 `http://127.0.0.1:8000/umi.js`，将 `https://www.myproject.com/` 下的所有以 `.js` 结尾的资源替换为本地相同路径的资源，将 `https://www.myproject.com/umi.ae8b10e0.css` 替换为本地开发环境的 `http://127.0.0.1:8000/umi.css`。 3. 刷新页面，正式域名下的内容就被替换了，你就可以方便地在特定环境下调试你的代码了。
48 |
49 | ### 如何退出 XSwitch 的调试模式？
50 |
51 | 如果你调试完毕或者不需要继续调试，你可以关闭 XSwitch 插件的功能来退出调试模式。在 Chrome 浏览器中，点击 XSwitch 插件图标，即可关闭插件功能。
52 |
53 | ### 如何保存 XSwitch 的转发规则？
54 |
55 | 如果你经常使用 XSwitch，并且希望保存你的转发规则，可以新建一个规则保存起来。在 XSwitch 插件中，你可以点击新建规则按钮，并输入规则名称，将你的转发规则保存起来。
56 |
57 | ### 如何找到 XSwitch 插件图标？
58 |
59 | XSwitch 插件的图标一般会显示在 Chrome 浏览器的工具栏中。如果 XSwitch 插件的图标没有显示在工具栏中，你可以在 Chrome 浏览器的扩展程序管理页面找到 XSwitch，并将其固定到工具栏中。
60 |
--------------------------------------------------------------------------------
/docs/umi/docs/docs/docs/guides/prepare.md:
--------------------------------------------------------------------------------
1 | ### Umi.js 需要使用 Node.js 进行开发吗？
2 |
3 | 是的，Umi.js 需要使用 Node.js 来进行开发。请确保电脑已经安装了 Node.js，并且版本在 14 以上。如果还没有安装，你可以前往 [Node.js 官网](https://nodejs.org/zh-cn/) 下载并安装。
4 |
5 | ### 如何在 macOS 上安装 Node.js？
6 |
7 | 在 macOS 环境下，我们建议使用 [nvm](https://github.com/nvm-sh/nvm) 来管理 Node.js 的版本。你可以使用以下命令来安装 nvm 和 Node.js：
8 |
9 | ```bash
10 | curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
11 | nvm -v
12 |
13 | 0.39.1
14 | ```
15 |
16 | 安装完成后，你可以使用以下命令来安装指定版本的 Node.js：
17 |
18 | ```bash
19 | nvm install 16
20 | nvm use 16
21 | ```
22 |
23 | 然后，你可以使用以下命令来检查是否安装成功并且安装了正确的版本：
24 |
25 | ```bash
26 | node -v
27 |
28 | v16.14.0
29 | ```
30 |
31 | ### 如何在 Windows 上安装 Node.js？
32 |
33 | 在 Windows 环境下，我们建议使用 [nvm-windows](https://github.com/coreybutler/nvm-windows) 来管理 Node.js 的版本。你可以前往该项目的 GitHub 页面上进行下载和安装。
34 |
35 | 安装完成后，你可以使用以下命令来安装指定版本的 Node.js：
36 |
37 | ```bash
38 | nvm install 16
39 | nvm use 16
40 | ```
41 |
42 | 然后，你可以使用以下命令来检查是否安装成功并且安装了正确的版本：
43 |
44 | ```bash
45 | node -v
46 |
47 | v16.14.0
48 | ```
49 |
50 | 请根据你的操作系统选择适合的安装方式，并确保安装正确版本的 Node.js。
51 |
52 | ### 什么是 npm 依赖管理工具？
53 |
54 | npm（Node Package Manager）是 Node.js 自带的依赖管理工具，用于管理和发布 JavaScript 代码包。它是一种将代码包进行组织、分享和复用的解决方案。
55 |
56 | ### 为什么 Umi.js 推荐使用 pnpm 来管理依赖？
57 |
58 | Umi.js 是一个基于 React 的可插拔企业级前端应用框架，它推荐使用 pnpm 来管理依赖。pnpm 是一种快速、节省磁盘空间的依赖管理工具，相比 npm 和 yarn，在安装和更新依赖时更快更高效。
59 |
60 | ### 如何安装 pnpm？
61 |
62 | 使用以下命令可以安装 pnpm：
63 |
64 | ```bash
65 | curl -fsSL https://get.pnpm.io/install.sh | sh -
66 | ```
67 |
68 | ### 如何检查是否成功安装 pnpm？
69 |
70 | 安装完成后，可以使用以下命令来检查是否成功安装了 pnpm：
71 |
72 | ```bash
73 | pnpm -v
74 |
75 | 7.3.0
76 | ```
77 |
78 | 若返回的版本号与预期一致，则说明 pnpm 安装成功。
79 |
80 | ### 如何安装 Node.js 和 pnpm？
81 |
82 | 安装完 Node.js 和 pnpm 后，你就可以开始前端开发了。以下是安装步骤：
83 |
84 | 1. 首先，你需要下载 Node.js 的安装包。你可以在 Node.js 的官方网站 [https://nodejs.org/zh-cn/](https://nodejs.org/zh-cn/) 下载适合你操作系统的版本。
85 |
86 | 2. 下载完成后，运行安装包并按照提示完成安装。
87 |
88 | 3. 安装完成后，打开终端或命令行界面，并输入以下命令来验证 Node.js 是否成功安装：
89 |
90 | ```tsx
91 | node - v;
92 | ```
93 |
94 | 如果显示了 Node.js 的版本号，说明安装成功。
95 |
96 | 4. 接下来，你需要安装 pnpm，它是一个快速、零配置的包管理工具。
97 |
98 | 在终端或命令行界面中输入以下命令来安装 pnpm：
99 |
100 | ```tsx
101 | npm install -g pnpm
102 | ```
103 |
104 | 安装完成后，输入以下命令来验证 pnpm 是否成功安装：
105 |
106 | ```tsx
107 | pnpm - v;
108 | ```
109 |
110 | 如果显示了 pnpm 的版本号，说明安装成功。
111 |
112 | ### 前端开发 IDE 的选择有哪些？
113 |
114 | 当你已经安装好 Node.js 和 pnpm 后，你就可以选择一个适合你的 IDE 或文本编辑器来编写代码了。以下是几个常用的选择：
115 |
116 | 1. Visual Studio Code（推荐）- [https://code.visualstudio.com/](https://code.visualstudio.com/) Visual Studio Code 是一个轻量级，免费且强大的代码编辑器。它支持丰富的插件生态系统，可以满足大部分前端开发需求。
117 |
118 | 2. WebStorm（推荐）- [https://www.jetbrains.com/webstorm/](https://www.jetbrains.com/webstorm/) WebStorm 是 JetBrains 公司推出的一款专业的前端开发 IDE。它提供了很多强大的功能，如代码提示、调试工具等，适合专业开发者使用。
119 |
120 | 3. IntelliJ IDEA - [https://www.jetbrains.com/idea/](https://www.jetbrains.com/idea/) IntelliJ IDEA 是 JetBrains 公司推出的一款综合性的 Java IDE，它也支持前端开发，提供了一些有用的插件和功能。
121 |
122 | 4. Sublime Text - [https://www.sublimetext.com/](https://www.sublimetext.com/) Sublime Text 是一款轻巧、快速、稳定的文本编辑器。它支持多种编程语言和插件，可以满足大部分前端开发需求。
123 |
124 | 5. Atom - [https://atom.io/](https://atom.io/) Atom 是由 GitHub 开发的一款跨平台文本编辑器。它具有可配置性强、插件丰富等特点，适合于个性化定制和轻量级项目的开发。
125 |
126 | 根据你的需求和个人喜好，选择一个适合的 IDE 或文本编辑器来开始你的前端开发之旅吧！
127 |
--------------------------------------------------------------------------------
/docs/umi/docs/docs/docs/guides/proxy.md:
--------------------------------------------------------------------------------
1 | ### 什么是代理（Proxy）？
2 |
3 | 代理也称网络代理，是一种特殊的网络服务，允许一个终端（一般为客户端）通过这个服务与另一个终端（一般为服务器）进行非直接的连接。代理服务器作为中间人，接收客户端的请求并将其转发给目标服务器，然后再将目标服务器的响应返回给客户端。通过使用代理，客户端可以间接地访问其他服务器上的资源，解决跨域访问问题。
4 |
5 | ### 在项目开发中如何使用代理？
6 |
7 | 在项目开发（dev）中，为了解决跨域访问问题，我们可以通过使用代理来实现。一种常见的代理方式是使用 `http-proxy-middleware` 中间件。通过在配置文件中设置代理规则，可以将特定的请求代理到另一个目标服务器上。
8 |
9 | 例如，在配置文件中添加以下代理规则：
10 |
11 | ```ts
12 | export default {
13 | proxy: {
14 | '/api': {
15 | target: 'http://jsonplaceholder.typicode.com/',
16 | changeOrigin: true,
17 | pathRewrite: { '^/api': '' },
18 | },
19 | },
20 | };
21 | ```
22 |
23 | 上述配置表示，将以 `/api` 开头的请求代理到目标服务器 `http://jsonplaceholder.typicode.com/` 上。同时，将请求地址中的 `/api` 替换为空字符串，修改请求来源为目标url。例如，请求 `/api/a` 实际上是请求 `http://jsonplaceholder.typicode.com/a`。
24 |
25 | 这样，我们可以通过在本地服务器上发起代理请求，间接地获取远程服务器上的数据，解决跨域访问问题。
26 |
27 | ### 代理的作用是什么？
28 |
29 | 代理的主要作用是解决跨域访问问题。由于浏览器或者 webview 的同源策略限制，引起了跨域访问问题。通过使用代理，我们可以在本地的 node 服务器上发起请求，然后让服务器去请求非同源的远程服务器，从而绕过浏览器的同源策略。代理只是将目标服务器返回的数据传递到前端，不会直接修改发起请求的 URL。因此，在浏览器上看到的请求地址仍然是本地服务器的地址。
30 |
31 | 需要注意的是，代理只能解决开发时的跨域访问问题，在部署时可以使用同源部署。如果在生产环境中（build）出现跨域问题，可以将类似的配置转移到 Nginx 容器上进行处理。
32 |
--------------------------------------------------------------------------------
/docs/umi/docs/docs/docs/guides/styling.md:
--------------------------------------------------------------------------------
1 | ### 在 Umi 项目中如何使用 .css 文件声明样式？
2 |
3 | 你可以在 Umi 项目中使用 .css 文件来声明各种样式。首先，在你的项目中创建一个 .css 文件，例如 `src/pages/index.css`。然后，在该文件中按照以下代码声明你想要的样式：
4 |
5 | ```css
6 | .title {
7 | color: red;
8 | }
9 | ```
10 |
11 | 接下来，在你的页面或组件文件中引入该样式文件，即可使样式生效。例如，在 `src/pages/index.tsx` 文件中，你可以通过以下方式引入样式文件：
12 |
13 | ```jsx
14 | import './index.css';
15 | ```
16 |
17 | 此时，你可以使用样式类名 `.title` 来给任何元素应用该样式。
18 |
19 | ### 在 Umi 项目中如何限制样式的作用域？
20 |
21 | 如果你想要限制样式的作用范围，避免全局生效，你可以使用 CSS Modules 功能。使用 CSS Modules 时，每个样式类都会有一个唯一的类名，确保样式只应用在对应的页面或组件中。
22 |
23 | 要使用 CSS Modules，你只需要将你的样式文件命名为 `.module.css` 格式，例如 `index.module.css`。然后，在你的页面或组件文件中引入样式文件，并使用引入的样式类来应用样式。
24 |
25 | ### 在 Umi 项目中如何使用 CSS Modules？
26 |
27 | 要在 Umi 项目中使用 CSS Modules，首先将你的样式文件命名为 `.module.css` 格式，例如 `index.module.css`。
28 |
29 | 然后，在你的页面或组件文件中引入样式文件，并使用引入的样式类来应用样式。例如，在 `src/pages/index.tsx` 文件中：
30 |
31 | ```jsx
32 | import styles from './index.module.css';
33 |
34 | export default function () {
35 | return Hello World;
36 | }
37 | ```
38 |
39 | 在这个例子中，`styles.title` 表示被加工过的唯一样式类名，用它来应用样式。
40 |
41 | 通过使用 CSS Modules，每个样式类都会有一个唯一的类名，确保样式只在对应的页面或组件中生效。这样可以避免全局样式冲突的问题。
42 |
43 | ### 什么是 CSS Modules？
44 |
45 | CSS Modules 是一种将样式模块化的技术。在使用 CSS Modules 时，我们可以在 JavaScript 代码中引入样式文件，并将样式赋予一个变量名。这样，样式只会作用于该模块内部，不会对全局样式产生影响。
46 |
47 | ### 如何在 JavaScript 文件中使用 CSS Modules？
48 |
49 | 要在 JavaScript 文件中使用 CSS Modules，首先需要引入样式文件。可以使用 `import` 语句引入样式文件，并将其赋予一个变量名。然后，可以使用该变量名作为 `className` 属性的值来应用样式。
50 |
51 | 例如，在一个名为 `index.css` 的样式文件中声明了一个名为 `title` 的样式，我们可以在 `index.tsx` 文件中这样使用：
52 |
53 | ```jsx
54 | import styles from './index.css';
55 |
56 | export default function () {
57 | return Hello World;
58 | }
59 | ```
60 |
61 | 这样，`title` 样式只会应用于包裹在 `className={styles.title}` 中的 `div` 元素。
62 |
63 | ### CSS Modules 可以解决什么问题？
64 |
65 | CSS Modules 提供了一种样式模块化的解决方案，可以避免样式的全局污染问题。通过将样式赋予一个变量名，可以确保样式只会作用于当前模块内部，不会影响其他模块的样式。这样可以提高代码的可维护性和复用性，避免样式冲突和命名冲突的问题。
66 |
67 | ### Umi 中支持的 CSS 预处理器有哪些？
68 |
69 | Umi 默认支持 LESS、SASS 和 SCSS 样式的导入。你可以按照引入 CSS 文件的方式引入并使用这些由 CSS 预处理器处理的样式。
70 |
71 | ### 如何在 Umi 中使用 SASS？
72 |
73 | 在 Umi 中使用 SASS 需要额外安装预处理依赖，可以通过以下步骤来安装：
74 |
75 | 1. 打开终端，并进入到项目根目录下。
76 | 2. 执行命令 `npm add -D sass` 来安装 SASS 依赖。
77 | 3. 在你的代码文件中引入 SASS 样式文件即可。
78 |
79 | ### 如何在 Umi 中使用 CSS Module？
80 |
81 | 在 Umi 中同样也支持 CSS Module 的用法。你可以按照以下步骤来使用 CSS Module：
82 |
83 | 1. 在你的代码文件中引入不同的样式文件（比如 LESS、SASS、SCSS 文件）。
84 | 2. 使用导入样式文件时返回的对象来设置元素的 className。
85 |
86 | ### Umi 是否支持其他类型的样式文件？
87 |
88 | 除了支持 LESS、SASS 和 SCSS 文件之外，Umi 还提供了对 `.styl` 和 `.stylus` 文件的内置支持。如果想要使用这些类型的样式文件，你需要先安装相应的预处理器依赖（比如 `stylus`），然后按照之前的方法引入和使用即可。
89 |
90 | ### UnoCSS 是什么？
91 |
92 | UnoCSS 是一个用于快速构建样式的工具。它可以与 Umi 和 Tailwindcss 结合使用，并且提供了内置的 UnoCSS 插件。安装 UnoCSS 需要安装 `unocss` 和 `@unocss/cli`。
93 |
94 | ### 如何在 Umi 中启用 UnoCSS 插件？
95 |
96 | 要在 Umi 中启用 UnoCSS 插件，首先安装 `plugin-unocss`。然后，在项目的 `.umirc.ts` 文件中，使用 `@umijs/plugins/dist/unocss` 模块来引入插件。在 `unocss` 配置中，需要声明要使用 `unocss` 的文件目录。例如：
97 |
98 | ```js
99 | // .umirc.ts
100 |
101 | export default {
102 | plugins: [require.resolve('@umijs/plugins/dist/unocss')],
103 | unocss: {
104 | watch: ['src/**/*.tsx'],
105 | },
106 | };
107 | ```
108 |
109 | 这样配置之后，UnoCSS 插件会监听设置文件中的 `unocss.watch` 字段，动态生成样式文件并自动套用。
110 |
111 | ### 如何配置 UnoCSS？
112 |
113 | 要配置 UnoCSS，可以在项目的根目录下创建一个名为 `unocss.config.ts` 的文件。在这个配置文件中，可以使用 `unocss` 提供的 API 来定义配置项。
114 |
115 | 例如，可以使用 `defineConfig` 方法来创建配置对象，并使用 `presetAttributify` 和 `presetUno` 方法来定义 UnoCSS 的预设配置。在配置对象中，可以设置 `envMode`、`presets` 等属性来自定义 UnoCSS 的行为。例如：
116 |
117 | ```js
118 | // unocss.config.ts
119 |
120 | import { defineConfig, presetAttributify, presetUno } from 'unocss';
121 |
122 | export function createConfig({ strict = true, dev = true } = {}) {
123 | return defineConfig({
124 | envMode: dev ? 'dev' : 'build',
125 | presets: [presetAttributify({ strict }), presetUno()],
126 | });
127 | }
128 |
129 | export default createConfig();
130 | ```
131 |
132 | 这样配置之后，UnoCSS 将根据配置对象中的信息来生成样式。
133 |
134 | 这些信息可以帮助你了解如何在 Umi 中使用 UnoCSS，并进行相应的配置。
135 |
--------------------------------------------------------------------------------
/docs/umi/docs/docs/docs/guides/typescript.md:
--------------------------------------------------------------------------------
1 | ### 如何在配置时拥有 TypeScript 提示？
2 |
3 | 要在配置时拥有 TypeScript 语法提示，可以在配置的地方包一层 `defineConfig()`。下面是一个示例：
4 |
5 | ```ts
6 | // .umirc.ts
7 |
8 | import { defineConfig } from 'umi';
9 |
10 | export default defineConfig({
11 | routes: [{ path: '/', component: '@/pages/index' }],
12 | });
13 | ```
14 |
15 | ### 什么是 defineConfig()？
16 |
17 | `defineConfig()` 是一个函数，用于包装配置对象，以便在配置时拥有 TypeScript 语法提示。
18 |
19 | ### 如何使用 defineConfig()？
20 |
21 | 使用 `defineConfig()` 需要先导入它：
22 |
23 | ```ts
24 | import { defineConfig } from 'umi';
25 | ```
26 |
27 | 然后，在配置对象外部使用 `defineConfig()` 包装配置对象：
28 |
29 | ```ts
30 | export default defineConfig({
31 | routes: [{ path: '/', component: '@/pages/index' }],
32 | });
33 | ```
34 |
35 | 这样，在配置时就可以拥有 TypeScript 的语法提示了。
36 |
37 | 
38 |
39 | 以上是如何在配置中使用 TypeScript 提示的方法，并且使用 `defineConfig()` 函数来实现。
40 |
--------------------------------------------------------------------------------
/docs/umi/docs/docs/docs/guides/use-plugins.md:
--------------------------------------------------------------------------------
1 | ### 如何在普通的 Umi 应用中使用插件呢？
2 |
3 | 在普通的 Umi 应用中，默认是不附带任何插件的。如果你需要使用 Max 的功能，比如数据流、antd 等，你需要手动安装插件并将它们打开。
4 |
5 | 首先，安装 @umijs/plugins 插件：
6 |
7 | ```bash
8 | pnpm add -D @umijs/plugins
9 | ```
10 |
11 | 然后，在配置文件 .umirc.ts 中开启 antd 插件：
12 |
13 | ```ts
14 | export default {
15 | plugins: ['@umijs/plugins/dist/antd'],
16 | antd: {},
17 | };
18 | ```
19 |
20 | Umi 和 Max 的区别在于，Max 已经内置了很多常用插件，比如数据流（initial-state、model）、antd 等。这些插件都可以在 @umijs/plugins/dist/ 中找到并开启。
21 |
22 | 如果你想进一步了解 Max 具备的功能和配置说明，请参考 Umi Max 章节。
23 |
24 | :::info{title=💡} 我是否应该选择 Max？使用 Max 并不代表你需要使用全部 Max 的功能。你可以根据自己的需求选择关闭一些插件。因此，当你需要使用 Max 的功能时，你可以选择创建一个 Max 项目。 :::
25 |
26 | ### 如何在项目中使用插件功能？
27 |
28 | 要在项目中快速使用插件的功能，可以按照以下步骤进行操作：
29 |
30 | 1. 在项目的根目录创建一个名为 `plugin.ts` 的文件。
31 | 2. 在 `plugin.ts` 文件中编写你的项目级插件代码。
32 | 3. 保存并关闭 `plugin.ts` 文件，该文件将被自动作为插件加载。
33 |
34 | 请注意，在使用插件功能之前，请确保你已经熟悉了相关的目录结构，可以参考章节 [目录结构](./directory-structure) 进行更详细的了解。
35 |
--------------------------------------------------------------------------------
/docs/umi/docs/docs/docs/guides/use-vue.md:
--------------------------------------------------------------------------------
1 | ### 什么是命名路由？
2 |
3 | 命名路由是指在定义路由时可以为每个路由提供一个唯一的名称，除了路由的路径外，可以通过该名称来进行路由跳转。
4 |
5 | ### 如何为路由提供名称？
6 |
7 | 可以在定义路由时，通过name属性为路由提供一个名称。例如：
8 |
9 | ```ts
10 | export default {
11 | routes: [
12 | {
13 | path: '/user/:username',
14 | name: 'user',
15 | component: 'index',
16 | },
17 | ],
18 | };
19 | ```
20 |
21 | 在上述例子中，为路径为`/user/:username`的路由提供了一个名称为`user`。
22 |
23 | ### 如何使用命名路由进行导航？
24 |
25 | 要使用命名路由进行导航，可以通过`router-link`组件的`to`属性传递一个对象来链接到一个命名的路由。例如：
26 |
27 | ```html
28 |
29 | User
30 |
31 | ```
32 |
33 | 在上述例子中，通过`router-link`组件的`to`属性，使用`name`属性为`user`的路由，并传递`params`参数`{ username: 'erina' }`，来生成一个包含链接文本`User`的可点击的路由链接。
34 |
35 | ### 如何使用命名路由进行编程式导航？
36 |
37 | 使用命名路由进行编程式导航与使用命令式调用`router.push`方法一致。例如：
38 |
39 | ```ts
40 | router.push({ name: 'user', params: { username: 'erina' } });
41 | ```
42 |
43 | 在上述例子中，通过调用`router.push`方法，传递一个包含`name`属性为`user`的路由和`params`参数`{ username: 'erina' }`，实现了导航到路径`/user/erina`的效果。
44 |
--------------------------------------------------------------------------------
/docs/umi/docs/docs/docs/introduce/faq.md:
--------------------------------------------------------------------------------
1 | ### 如何关闭 dynamicImport？
2 |
3 | 要关闭 dynamicImport，你可以按照以下步骤进行操作：
4 |
5 | 1. 首先，在你的项目中安装依赖：
6 |
7 | ```bash
8 | pnpm i babel-plugin-dynamic-import-node -D
9 | ```
10 |
11 | 2. 然后，在你的配置文件中添加 `extraBabelPlugins` 配置项，但只在生产环境中启用该插件：
12 |
13 | ```ts
14 | // .umirc.ts
15 | export default {
16 | extraBabelPlugins:
17 | process.env.NODE_ENV === 'production'
18 | ? ['babel-plugin-dynamic-import-node']
19 | : [],
20 | };
21 | ```
22 |
23 | 请注意，关闭 dynamicImport 不是一个推荐的做法，因为它可以帮助你实现按需加载，提升应用性能。因此，你应该在确保不会对应用性能产生负面影响的情况下使用它。
24 |
25 | ### umi v4 升级了默认的 react 版本到 v18，可以使用 react 17 吗？
26 |
27 | 由于 umi v4 升级了默认的 react 版本到 v18，如果需要使用 react 17，请执行以下命令并重启：
28 |
29 | ```bash
30 | pnpm add react@^17 react-dom@^17
31 | ```
32 |
33 | ### 切换到 umi4 后，可以使用 react 17 吗？
34 |
35 | 如果你切换到 umi4，注意 umi4 默认使用的 react 版本是 v18。如果你仍然需要使用 react 17，可以通过以下命令安装 react 17 的依赖并重启：
36 |
37 | ```bash
38 | pnpm add react@^17 react-dom@^17
39 | ```
40 |
41 | ### umi4 支持使用 react 17 吗？
42 |
43 | umi4 升级了默认的 react 版本到 v18。如果你仍然需要使用 react 17，你可以通过执行以下命令并重启来安装 react 17 的依赖：
44 |
45 | ```bash
46 | pnpm add react@^17 react-dom@^17
47 | ```
48 |
49 | 请注意，以上的命令是使用 pnpm 包管理器进行安装的，如果你使用的是其他的包管理器，请相应地调整命令。
50 |
51 | ### 如何解决代理静态资源到本地后一直刷新页面的问题？
52 |
53 | 问题描述：我在代理静态资源到本地后，发现页面一直在刷新。这给我的开发工作带来了一些困扰。
54 |
55 | 解决方法：你可以配置 `SOCKET_SERVER=127.0.0.1:${port}` 来启动你的项目。具体操作如下：
56 |
57 | ```bash
58 | SOCKET_SERVER=http://127.0.0.1:8000 pnpm dev
59 | ```
60 |
61 | 通过以上配置，你可以解决页面一直刷新的问题。
62 |
63 | ### 为什么我的页面一直在刷新？
64 |
65 | 问题描述：最近我将静态资源代理到本地进行开发，但是发现页面一直在刷新，并无法正常加载。
66 |
67 | 解决方法：你可以尝试配置 `SOCKET_SERVER=127.0.0.1:${port}` 启动你的项目。具体操作如下：
68 |
69 | ```bash
70 | SOCKET_SERVER=http://127.0.0.1:8000 pnpm dev
71 | ```
72 |
73 | 这样的配置能够解决页面一直刷新的问题，让你的页面能够正常加载。
74 |
75 | ### 如何停止页面一直刷新的问题？
76 |
77 | 问题描述：在我将静态资源代理到本地后，页面一直在刷新，无法停止刷新。
78 |
79 | 解决方法：你可以通过配置 `SOCKET_SERVER=127.0.0.1:${port}` 来解决这个问题。具体操作如下：
80 |
81 | ```bash
82 | SOCKET_SERVER=http://127.0.0.1:8000 pnpm dev
83 | ```
84 |
85 | 配置之后，你的页面将不再一直刷新，可以正常加载了。
86 |
--------------------------------------------------------------------------------
/docs/umi/docs/docs/docs/introduce/philosophy.md:
--------------------------------------------------------------------------------
1 | ### Umi 的设计思路中的技术收敛是指什么？
2 |
3 | 技术收敛是 Umi 框架设计思路中的一个重要概念。它指的是将复杂多样的技术问题通过统一的方式解决，使得开发者在使用 Umi 框架时不再需要关注底层技术细节，从而提高开发效率。技术收敛帮助开发团队快速构建企业级应用，将重复性的工作交给框架去做，减少重复劳动。
4 |
5 | ### Umi 框架中的插件和插件集是什么？
6 |
7 | 插件和插件集是 Umi 框架设计思路中的两个重要概念。插件是指通过配置文件将一些通用的功能和扩展集成到应用中，例如路由、状态管理、国际化等，从而提高开发效率和代码质量。插件集是指一组相关的插件的集合，可以根据需求选择性地引入，实现功能的灵活组合。
8 |
9 | ### Umi 框架的最佳实践指什么？
10 |
11 | 最佳实践是指在使用 Umi 框架时的一些官方推荐的规范和经验总结。Umi 框架提供了一些约定和规范，通过遵循这些最佳实践可以使得开发团队更好地利用框架的特性和功能，编写出高质量的代码。最佳实践不仅包括代码规范，还包括项目结构、性能优化、异常处理等方面的建议。
12 |
13 | ### Umi 框架的企业级特性是什么？
14 |
15 | Umi 框架设计思路中强调了企业级特性的重要性。企业级特性包括多人协作、数据权限管理、项目部署等一系列与企业级需求相关的功能。Umi 框架提供了一些与企业级开发密切相关的功能和工具，帮助开发团队更好地应对复杂的业务需求和团队协作。
16 |
17 | ### Umi 框架中的 import all from umi 是什么意思？
18 |
19 | import all from umi 是 Umi 框架设计思路中的一个特性。它指的是通过一行代码将整个应用的路由、路由组件和页面组件全部导入，方便进行动态路由配置和页面渲染。import all from umi 的使用简化了繁琐的路由配置和组件导入过程，提高了开发效率和代码可读性。
20 |
--------------------------------------------------------------------------------
/docs/umi/docs/docs/docs/introduce/upgrade-to-umi-4.md:
--------------------------------------------------------------------------------
1 | ### 如何升级项目的 Umi 版本和插件？
2 |
3 | 要升级项目的 Umi 版本和插件，需要进行以下步骤：
4 |
5 | 1. 打开项目的 `package.json` 文件。
6 | 2. 在 `devDependencies` 中找到之前使用的 Umi 相关的依赖项。
7 | 3. 将之前的 Umi 相关依赖项的版本号改为新版的 Umi 和相关插件的版本号。例如，将 `umi` 的版本号改为 `"^3.0.0"`，将 `@umijs/preset-react` 的版本号改为 `"^1.2.2"`。
8 | 4. 删除项目的 `node_modules` 文件夹，以确保之前安装的 Umi 版本和插件被完全移除。
9 | 5. 执行 `npm install` 命令，重新安装项目的依赖。
10 |
11 | 注意：如果之前使用的是 `umi` + `@umijs/preset-react` 的组合进行开发，那么可以直接将 Umi 的版本号改为新版的 `max`，然后执行步骤 4 和 5。
12 |
13 | ### 如何使用 `@umijs/max` 替换 `umi` 命令
14 |
15 | 如果你已经安装并使用了 `@umijs/max`，可以使用 `max` 命令来替换 `umi` 命令。例如，使用 `max dev` 替换 `umi dev` 来启动开发服务器，使用 `max build` 替换 `umi build` 来构建项目。
16 |
17 | 在 `package.json` 文件中，修改相应的脚本命令：
18 |
19 | ```diff
20 | {
21 | "scripts": {
22 | - "build": "umi build",
23 | + "build": "max build",
24 | - "postinstall": "umi g tmp",
25 | + "postinstall": "max setup",
26 | - "start": "umi dev",
27 | + "start": "max dev",
28 | }
29 | }
30 | ```
31 |
32 | 这样就可以使用 `max` 命令来代替相应的 `umi` 命令了。
33 |
34 | 但是，需要注意的是，在 umi@4 中，一些项目前置操作被放到了 `setup` 命令中，例如 umi@3 中的 `umi g tmp` 等命令，需要使用 `max setup` 来替代。
35 |
36 | 希望以上信息对你有帮助。
37 |
38 | ### 配置项 `fastRefresh` 的使用方法
39 |
40 | 在 `umi@3` 版本中，`fastRefresh` 配置项是一个对象，在 `umi@4` 版本中，`fastRefresh` 配置项改为直接配置为 `true` 来开启 Fast Refresh 功能。
41 |
42 | 在 `umi@3` 中的配置示例：
43 |
44 | ```typescript
45 | import { defineConfig } from 'umi';
46 |
47 | export default defineConfig({
48 | fastRefresh: {},
49 | });
50 | ```
51 |
52 | 在 `umi@4` 中的配置示例：
53 |
54 | ```typescript
55 | import { defineConfig } from 'umi';
56 |
57 | export default defineConfig({
58 | fastRefresh: true,
59 | });
60 | ```
61 |
62 | 开启 `fastRefresh` 配置项后，可以实现在开发过程中的页面热更新功能，无需手动刷新页面即可查看最新的代码变更效果。
63 |
64 | ### 配置项 `dva` 的使用方法
65 |
66 | 在 `umi@3` 中，`dva` 配置项可以配置 `hmr` 参数来开启 Hot Module Replacement (HMR) 功能。但在 `umi@4` 中不再支持 `hmr` 参数。
67 |
68 | 在 `umi@3` 中的配置示例：
69 |
70 | ```typescript
71 | import { defineConfig } from 'umi';
72 |
73 | export default defineConfig({
74 | dv{
75 | hmr: true,
76 | },
77 | });
78 | ```
79 |
80 | 在 `umi@4` 中的配置示例：
81 |
82 | ```typescript
83 | import { defineConfig } from 'umi';
84 |
85 | export default defineConfig({
86 | dv{},
87 | });
88 | ```
89 |
90 | 在 `umi@4` 中，不再需要配置 `hmr` 参数来开启 HMR 功能，因为 `umi@4` 默认支持 HMR，无需额外配置。
91 |
92 | ### 配置项 `webpack5` 的使用方法
93 |
94 | 在 `umi@4` 中，默认使用 webpack5 作为默认的构建工具。
95 |
96 | 在 `umi@4` 中的配置示例：
97 |
98 | ```typescript
99 | import { defineConfig } from 'umi';
100 |
101 | export default defineConfig({
102 | webpack5: {},
103 | });
104 | ```
105 |
106 | 通过配置 `webpack5: {}`，即可启用 webpack5 的构建能力。
107 |
108 | 请注意，在 `umi@4` 中，默认即开启了 webpack5 的支持，因此不需要额外的配置来开启 webpack5。
109 |
110 | ### Umi 4 中的路由相关使用差异
111 |
112 | 在 Umi 4 中，将 `react-router@5` 升级到了 `react-router@6`，因此在路由相关的一些 API 上存在一些使用上的差异。
113 |
114 | - 在 Umi 3 中，props 默认为空对象，以下属性不能直接从 props 中取出：
115 |
116 | - history
117 | - location
118 | - match
119 |
120 | - 使用路由相关的 API 时，需要从 `useHistory()`，`useLocation()` 或 `useRouteMatch()` hook 中获取相应的属性。
121 |
122 | 请根据 Umi 4 的文档以及具体的代码实现进行修改和适配。
123 |
--------------------------------------------------------------------------------
/docs/umi/docs/docs/docs/max/access.md:
--------------------------------------------------------------------------------
1 | ### src/access.ts 文件的作用是什么？
2 |
3 | `src/access.ts` 文件是权限定义文件，用于定义项目中的权限。它需要默认导出一个方法，在项目初始化时被执行。该方法需要返回一个对象，对象的每一个值就对应定义了一条权限。
4 |
5 | ### initialState 参数在 src/access.ts 文件中有什么作用？
6 |
7 | `initialState` 是通过初始化状态插件 `initial-state` 提供的数据。它可以用来初始化用户权限。在 `src/access.ts` 文件中，可以使用 `initialState` 来获取用户的 userId 和 role，以确定用户具有哪些权限。
8 |
9 | ### src/access.ts 文件中的权限是如何定义的？
10 |
11 | 在 `src/access.ts` 文件中，权限通过返回的对象来进行定义。对象的每一个键值对都对应一条权限。例如，`canReadFoo` 是一个权限，对应值为 `true`，表示用户具有读取 Foo 的权限。`canUpdateFoo` 是另一条权限，对应值为 `role === 'admin'`，表示用户具有更新 Foo 的权限当且仅当用户的角色为 'admin'。`canDeleteFoo` 是一条更为复杂的权限，对应值为一个回调函数。该函数根据传入的 `foo` 对象和用户的 `userId` 来判断用户是否具有删除 Foo 的权限。
12 |
13 | 以上就是 `src/access.ts` 文件中权限的定义方式。通过定义权限，可以在项目中根据用户的角色和其他条件来控制用户的访问和操作权限。
14 |
15 | ### 如何在 Ant Design 中配置页面权限控制
16 |
17 | 要在 Ant Design 中配置页面权限控制，可以使用配合 `layout` 插件进行扩展的路由配置。以下是一个示例：
18 |
19 | ```ts
20 | export const routes = [
21 | {
22 | path: '/pageA',
23 | component: 'PageA',
24 | access: 'canReadPageA',
25 | },
26 | ];
27 | ```
28 |
29 | 在上述示例中，`routes` 是一个路由配置数组，其中每个对象代表一个页面。每个页面对象包含 `path`、`component` 和 `access` 属性。`path` 是页面的访问路径，`component` 是页面组件的名称或路径，`access` 是页面需要的权限。
30 |
31 | 通过配置 `access` 属性，可以控制只有具备特定权限的用户才能访问该页面。在示例中，用户只有拥有 `canReadPageA` 权限才能访问 `/pageA` 页面。
32 |
33 | 如果用户没有权限访问页面，则会默认渲染 Layout 插件内置的权限错误页面。
34 |
35 | 请注意，`access` 的值是权限定义返回值的某个键（在 `src/access.ts` 中定义）。
36 |
37 | 希望上述信息能够帮助您理解如何在 Ant Design 中配置页面权限控制。
38 |
39 | ### 如何自定义权限页面配置
40 |
41 | 默认情况下，Layout 插件会使用内置的权限错误页面进行渲染。如果你想自定义权限页面，可以在 `src/app.tsx` 文件中进行配置。
42 |
43 | 首先，你需要在该文件中定义 `layout` 函数，并返回一个对象。在该对象中，你可以设置自定义的权限页面。
44 |
45 | 以下是一个示例：
46 |
47 | ```tsx
48 | export const layout: RunTimeLayoutConfig = () => {
49 | return {
50 | // 自定义 403 页面
51 | unAccessible: 'unAccessible',
52 | // 自定义 404 页面
53 | noFound: 'noFound',
54 | };
55 | };
56 | ```
57 |
58 | 在上述示例中，我们定义了两个自定义权限页面：`unAccessible` 和 `noFound`。你可以根据自己的需求来设置这些页面的内容。
59 |
60 | 请注意，以上配置需要在 `src/app.tsx` 文件中进行，并且需要按照以上示例的格式进行编写。
61 |
62 | 该配置将覆盖默认的权限页面，使得渲染时会使用自定义的页面内容。
63 |
64 | 通过以上信息生成的 文档如下：
65 |
66 | ### 如何自定义权限页面配置？
67 |
68 | 要自定义权限页面配置，你需要在 `src/app.tsx` 文件中定义一个名为 `layout` 的函数，并返回一个对象。在该对象中，你可以设置自定义的权限页面。具体的配置如下：
69 |
70 | ```tsx
71 | export const layout: RunTimeLayoutConfig = () => {
72 | return {
73 | // 自定义 403 页面
74 | unAccessible: 'unAccessible',
75 | // 自定义 404 页面
76 | noFound: 'noFound',
77 | };
78 | };
79 | ```
80 |
81 | 在上述示例中，我们定义了两个自定义权限页面：`unAccessible` 和 `noFound`。你可以根据自己的需求来设置这些页面的内容。
82 |
83 | 请注意，以上配置需要在 `src/app.tsx` 文件中进行，并且需要按照以上示例的格式进行编写。
84 |
85 | 这样配置之后，默认的渲染 Layout 插件内置的权限错误页面将会被替换为自定义的页面内容。
86 |
87 | ### 如何使用 useAccess Hooks 在组件中获取权限相关信息？
88 |
89 | 要使用 `useAccess` Hooks 在组件中获取权限相关信息，请按照以下步骤操作：
90 |
91 | 1. 首先，在你的组件中导入 `useAccess` 方法。可以使用以下代码将其导入到你的组件中：
92 |
93 | ```js
94 | import { useAccess } from 'umi';
95 | ```
96 |
97 | 2. 定义你的组件，并在组件函数中调用 `useAccess` 方法，将其赋值给一个变量，例如 `access`。你可以使用以下代码在组件函数中获取权限相关信息：
98 |
99 | ```js
100 | const access = useAccess();
101 | ```
102 |
103 | 3. 现在，你可以在组件中使用 `access` 变量来获取权限相关信息。例如，如果你想检查是否有权限读取 `Foo`，你可以使用以下代码：
104 |
105 | ```js
106 | if (access.canReadFoo) {
107 | // 如果可以读取 Foo，则...
108 | }
109 | ```
110 |
111 | 4. 最后，根据你的需求，在组件中编写其他逻辑或返回 JSX 元素。
112 |
113 | 注意：`useAccess` Hooks 是基于你在项目中配置的权限规则生成的，并且与 `Access` 组件配合使用可以实现页面内元素的权限控制。
114 |
115 | ### How to use CSS variable mode in Ant Design 5.x?
116 |
117 | Starting from version 5.12.0, Ant Design reintroduced the CSS variable mode, which is a feature that was available in version 4.x. In this version, Ant Design combines the capabilities of CSS-in-JS and manages all design tokens using CSS variables. This means that styles in different themes can be shared within the same component, reducing the overall size of styles. Additionally, switching themes no longer requires re-serializing styles, resulting in improved performance when changing themes. If your application relies on Ant Design's theme capabilities, it is highly recommended to enable the CSS variable mode.
118 |
--------------------------------------------------------------------------------
/docs/umi/docs/docs/docs/max/analytics.md:
--------------------------------------------------------------------------------
1 | 1. **`@umijs/max`的站点统计功能有哪些支持的选项？**
2 |
3 | `@umijs/max`内置的站点统计功能目前支持 Google Analytics 和百度统计这两个选项。
4 |
5 | 2. **如何启用`@umijs/max`的站点统计功能？**
6 |
7 | 要启用`@umijs/max`的站点统计功能，首先需要在相关的统计服务中注册并获取统计服务提供的令牌或跟踪 ID。接下来，在 umi 项目的配置文件中配置统计服务的相关信息，包括站点 ID 或令牌等。具体配置的方法请参考`@umijs/max`的官方文档。
8 |
9 | 3. **为什么要使用`@umijs/max`内置的站点统计功能？**
10 |
11 | 使用`@umijs/max`内置的站点统计功能可以方便地统计和分析访问量、用户行为等数据，从而帮助开发者了解站点的受欢迎程度、用户偏好等信息。这些数据可以帮助开发者优化站点的设计和功能，提升用户体验，并且可以用作制定营销策略和决策的依据。
12 |
13 | 请注意，以上信息仅供参考，具体配置和使用请参考`@umijs/max`的官方文档或相关文档。
14 |
--------------------------------------------------------------------------------
/docs/umi/docs/docs/docs/max/introduce.md:
--------------------------------------------------------------------------------
1 | ### Umi Max 是什么？
2 |
3 | Umi Max 是一个可扩展的企业级前端应用框架，目前在蚂蚁集团内部已经直接或间接地服务了超过 10000 个应用。它解决了前端开发中的许多常见问题，并将这些经验累积成为 Umi 的各个插件。为了方便开发者使用这些插件，蚂蚁集团将它们整合到一起，并创建了 `@umijs/max`，让开发者可以通过脚手架快速获得和蚂蚁集团开发 Umi 应用相同的开发体验。
4 |
5 | ### Umi Max 提供了哪些功能？
6 |
7 | Umi Max 提供了以下功能：
8 |
9 | 1. 可扩展的企业级前端应用框架：Umi Max 是一个可扩展的前端应用框架，可以满足企业级应用的需求。
10 | 2. 解决常见问题：Umi Max 在工程实践中解决了许多前端开发中的常见问题，为开发者提供了更好的开发体验。
11 | 3. 插件集成：Umi Max 将蚂蚁集团内部已有的插件整合到一起，开发者可以直接使用这些插件，减少开发成本。
12 | 4. 脚手架支持：开发者可以使用 Umi Max 的脚手架工具快速创建基于 Umi 的应用，并获得与蚂蚁集团开发 Umi 应用相同的开发体验。
13 |
14 | 在使用 `create-umi` 命令创建 Ant Design Pro 项目后，可以根据需要选择安装其他插件来扩展项目功能。以下是可选插件的简要介绍：
15 |
16 | - [权限](./access)：为项目添加权限管理功能，控制用户访问的权限。
17 | - [站点统计](./analytics)：集成站点统计工具，用于监测和分析网站访问情况。
18 | - [Antd](./antd)：集成 Ant Design UI 库，提供丰富的 UI 组件。
19 | - [图表](./charts)：集成图表库，方便在项目中绘制各类图表。
20 | - [dva](./dva)：集成 dva 数据流方案，用于管理应用的状态和数据流。
21 | - [initial-state](./data-flow#全局初始状态)：生成全局初始状态，用于初始化应用的状态。
22 | - [数据流](./data-flow)：提供数据流管理工具，如 dva 和 redux，方便管理和共享应用的状态。
23 | - [布局和菜单](./layout-menu)：提供布局和菜单组件，用于构建项目的整体结构和导航功能。
24 | - [国际化(多语言)](./i18n)：支持应用的多语言功能，方便项目的国际化。
25 | - [model](./data-flow)：用于生成 dva model 文件，方便管理应用的状态和数据流。
26 | - [乾坤微前端](./micro-frontend)：集成乾坤微前端框架，用于构建微前端应用。
27 | - [请求库](./request)：集成请求库，方便进行网络请求操作。
28 | - [Tailwind CSS](./tailwindcss)：集成 Tailwind CSS 库，提供快速构建界面的样式工具。
29 | - [CSS-IN-JS](./styled-components)：支持使用 CSS-IN-JS 方式编写样式。
30 | - [请求方案](./react-query)：提供请求库的替代方案，使用 react-query 进行网络请求。
31 | - [全局数据存储方案](./valtio)：提供全局数据存储方案，用于管理和共享应用的状态。
32 | - [Module Federation](./mf)：集成 Module Federation，实现模块化开发和共享。
33 |
34 | 根据项目需求，可以选择安装以上插件来扩展项目功能。需要注意的是，在 Umi Max 项目中，命令行使用 `max` 前缀，而不是原来的 `umi`。例如，使用 `max` 命令生成 Jest 测试文件：
35 |
36 | ```bash /max/
37 | $ npx max g jest
38 | ```
39 |
40 | 希望以上信息可以帮助您开始使用 `create-umi` 创建 Ant Design Pro 项目，并根据需求选择合适的插件。
41 |
--------------------------------------------------------------------------------
/docs/umi/docs/docs/docs/max/layout-menu.md:
--------------------------------------------------------------------------------
1 | ### 是否开始国际化配置
2 |
3 | - 类型：布尔值（boolean）
4 | - 默认值：false
5 |
6 | 是否启用国际化配置。开启后，路由配置中的菜单名将被视为菜单名国际化的键值，插件将查找 locales 文件以获取对应的`menu.[key]`的文本。默认情况下，键值与路由配置中的`name`字段相同。如果菜单是多级路由，例如二级路由菜单，插件将查找 locales 文件以获取`menu.[key].[key]`对应的文本。此功能需要配置`i18n`才能使用。如果不需要菜单国际化，可以将其配置为`false`进行关闭。
7 |
8 | ### logout
9 |
10 | `logout` 是一个函数，用于处理用户点击退出登录的操作。它接收一个 `initialState` 参数，并根据需要对用户的登录状态进行处理。
11 |
12 | 默认情况下，`logout` 的值为 `null`，即没有任何处理逻辑。在默认的布局 UI 中，顶部右侧并不会显示退出按钮。如果想要显示退出按钮并实现退出登录功能，需要在运行配置中配合运行时配置 `app.ts(x)` 中的 `getInitialState` 方法返回一个对象。
13 |
14 | 通过在运行时配置中设置合适的 `logout` 函数，可以实现用户点击退出登录时的相关操作，例如清除用户的登录信息、跳转到登录页面或执行其他自定义的逻辑。
15 |
16 | 请根据具体需求，为 `logout` 方法提供对应的处理逻辑。
17 |
18 | ### 扩展的路由配置
19 |
20 | Layout 插件会基于 Umi 的路由，封装了更多的配置项，支持更多配置式的能力。新增的配置如下：
21 |
22 | - 侧边栏菜单配置。
23 | - 布局路由级别展示/隐藏相关配置。
24 | - 与权限插件结合，配置式实现权限路由的功能。
25 |
26 | 示例如下：
27 |
28 | ```typescript
29 | // config/route.ts
30 | export const routes: IBestAFSRoute[] = [
31 | {
32 | path: '/welcome',
33 | component: 'IndexPage',
34 | name: '欢迎',
35 | icon: 'testicon',
36 | target: '_blank',
37 | headerRender: false,
38 | footerRender: false,
39 | menuRender: false,
40 | menuHeaderRender: false,
41 | access: 'canRead',
42 | hideChildrenInMenu: true,
43 | hideInMenu: true,
44 | hideInBreadcrumb: true,
45 | flatMenu: true,
46 | },
47 | ];
48 | ```
49 |
50 | 这些配置项可以用来定制路由的显示和隐藏，在面包屑、侧边栏菜单和顶栏中控制路由的可见性。
51 |
52 | 其中：
53 |
54 | - `component` 表示该路由对应的组件。
55 | - `name` 是菜单项的名称，可以在侧边栏中显示。
56 | - `icon` 是菜单项的图标。
57 | - `target` 可以设置链接的打开方式，例如在新页面打开。
58 | - `headerRender` 可以控制是否在顶栏中展示路由。
59 | - `footerRender` 可以控制是否在页脚中展示路由。
60 | - `menuRender` 可以控制是否在菜单中展示路由。
61 | - `menuHeaderRender` 可以控制是否在菜单顶栏中展示路由。
62 | - `access` 是一个权限配置项，需要和权限插件配合使用。
63 | - `hideChildrenInMenu` 可以隐藏子菜单。
64 | - `hideInMenu` 可以隐藏自己和子菜单。
65 | - `hideInBreadcrumb` 可以在面包屑中隐藏。
66 | - `flatMenu` 可以将子项往上提，仍然展示。
67 |
68 | 这些配置项使得路由的控制更加灵活，可以根据需求来展示或隐藏路由及相关内容。
69 |
70 | ### flatMenu
71 |
72 | - 类型: `boolean`
73 | - 默认值: `false`
74 | - 说明: 当设置为 true 时，在菜单中只隐藏当前项，子项则继续展示，从而实现菜单的展开与收起。
75 |
76 | 该属性用于控制菜单是否打平显示。当你希望子级的菜单项不显示自身而直接展示在上一级菜单中时，可以将该属性配置为 true。
77 |
78 | 示例：
79 |
80 | ```tsx
81 | const before = [{ name: '111' }, { name: '222', children: [{ name: '333' }] }];
82 | // flatMenu = true
83 | const after = [{ name: '111' }, { name: '222' }, { name: '333' }];
84 | ```
85 |
86 | 提供了 xxxRender 参数用于在布局中显示或隐藏特定的模块。根据不同的需求，可以设置以下参数：
87 |
88 | - `headerRender=false`：不显示顶栏
89 | - `footerRender=false`：不显示页脚
90 | - `menuRender=false`：不显示菜单
91 | - `menuHeaderRender=false`：不显示菜单的标题和 logo
92 |
93 | 通过设置以上参数为 false，可以根据实际情况来决定是否展示特定的布局模块。
94 |
95 | 请注意，以上参数的默认值都是 true，即默认情况下会显示对应的布局模块。根据具体需求，灵活设置 xxxRender 参数，以满足项目的需求。
96 |
97 | ### hideChildrenInMenu 在 Ant Design Pro 中如何使用？
98 |
99 | hideChildrenInMenu 是 Ant Design Pro 中的一个属性，用于控制菜单的显示和隐藏。
100 |
101 | 当 hideChildrenInMenu 的值为 true 时，子菜单将会被隐藏，只显示父级菜单。这对于需要简化页面显示的场景非常有用。
102 |
103 | ### hideInMenu 在 Ant Design Pro 中的使用方法是什么？
104 |
105 | hideInMenu 是 Ant Design Pro 中的一个属性，用于控制菜单的显示和隐藏。
106 |
107 | 当隐藏某个页面时，可以将 hideInMenu 的值设为 true，这样该页面将不会在菜单中显示。这在需要隐藏某些敏感或不常用页面时非常有用。
108 |
109 | ### hideInBreadcrumb 在 Ant Design Pro 中如何使用？
110 |
111 | hideInBreadcrumb 是 Ant Design Pro 中的一个属性，用于控制在面包屑中的显示和隐藏。
112 |
113 | 当设置 hideInBreadcrumb 的值为 true 时，该页面在面包屑导航中将被隐藏，不会在导航中显示路径。这对于一些不需要展示在面包屑导航中的页面非常有用，可以减少面包屑导航的冗余信息。
114 |
--------------------------------------------------------------------------------
/docs/umi/docs/docs/docs/max/react-query.md:
--------------------------------------------------------------------------------
1 | ### 如何启用 @umijs/max 中的 reactQuery？
2 |
3 | 如果使用 @umijs/max 的 reactQuery，只需在配置文件中添加以下内容：
4 |
5 | ```ts
6 | export default {
7 | reactQuery: {},
8 | };
9 | ```
10 |
11 | ### 如何启用 umi？
12 |
13 | 如果使用 umi，需要先安装 @umijs/plugins 依赖，然后在配置文件中添加以下内容：
14 |
15 | ```bash
16 | $ pnpm i @umijs/plugins -D
17 | ```
18 |
19 | ```ts
20 | export default {
21 | plugins: ['@umijs/plugins/dist/react-query'],
22 | reactQuery: {},
23 | };
24 | ```
25 |
26 | ### 什么是 react-query 的 devtool？
27 |
28 | devtool 是 react-query 的一个特性，在开发模式下会开启一个 react-query 的浏览器扩展工具，用于在浏览器中查看和调试 react-query 的状态和缓存情况。默认情况下，devtool 是开启的，可以通过 `reactQuery: { devtool: false }` 关闭。
29 |
30 | ### 如何关闭 react-query 的 queryClient？
31 |
32 | 通过设置 `reactQuery: { queryClient: false }` 可以关闭 react-query 的全局 QueryClient 注册功能。在 app.ts 文件中，可以通过 `export const reactQuery = { queryClient }` 进行配置。
33 |
34 | ### 如何使用 react-query 的导出？
35 |
36 | react-query 的大部分导出，可以通过从 `umi` 或 `@umijs/max` 中 import 来使用。这样可以方便地在项目中使用 react-query 的各种功能和组件。
37 |
38 | ### 什么是 react query 的 devtool 工具？
39 |
40 | react query 的 devtool 工具是 react query 官方提供的一个开发工具，用于帮助开发者在浏览器中查看 react query 的状态和调试信息。通过 devtool 工具，开发者可以方便地查看和监控正在进行的查询、缓存的数据以及错误信息等。默认情况下，react query 的 devtool 工具是开启的，但你可以通过配置项将其关闭。
41 |
42 | ### 什么是 react query 的 QueryClient 和 QueryClientProvider？
43 |
44 | 在 react query 中，QueryClient 是一个核心概念，用于管理和缓存所有的查询请求和响应。而 QueryClientProvider 是一个 react 组件，用于将 QueryClient 实例提供给整个应用中的其他组件使用。通过 QueryClientProvider，我们可以在整个应用中使用同一个 QueryClient 实例，确保所有的查询请求都能共享相同的缓存和状态。默认情况下，react query 会注册全局的 QueryClient 和 QueryClientProvider，但你可以通过配置项将其关闭。
45 |
46 | ### 什么是查询客户端(queryClient)的作用？
47 |
48 | 查询客户端(queryClient)是一个配置项，用于配置查询数据的默认选项。在这个配置项中，可以设置默认的查询函数(`queryFn`)，以及其他与查询相关的参数。通过查询客户端，可以统一管理查询数据的行为，方便进行统一的异常处理、数据转换等操作，提升开发效率和代码质量。
49 |
50 | ### 如何配置开发工具(devtool)和查询客户端(queryClient)？
51 |
52 | 要配置开发工具(devtool)和查询客户端(queryClient)，需要提供相应的配置对象，并将其赋值给相应的变量。在配置对象中，可以设置开发工具的属性和查询客户端的属性，以满足具体的需求。配置对象示例：
53 |
54 | ```ts
55 | const API_SERVER = '/path/to/api/server';
56 | export const reactQuery = {
57 | devtool: {
58 | initialIsOpen: true,
59 | },
60 | queryClient: {
61 | defaultOptions: {
62 | queries: {
63 | queryFn: async ({ queryKey }) => {
64 | const res = await fetch(`${API_SERVER}/${queryKey.join('/')}`);
65 | if (res.status !== 200) {
66 | throw new Error(res.statusText);
67 | }
68 | return res.json();
69 | },
70 | },
71 | },
72 | },
73 | };
74 | ```
75 |
76 | 通过以上配置对象，可以设置开发工具的`initialIsOpen`属性为`true`，使得开发工具在初始时处于打开状态；同时，设置查询客户端的`defaultOptions`属性，指定查询函数`queryFn`为一个异步函数，用于处理查询数据的逻辑。
77 |
--------------------------------------------------------------------------------
/docs/umi/docs/docs/docs/max/styled-components.md:
--------------------------------------------------------------------------------
1 | ### 如何在 umi 项目中启用 styled-components 插件？
2 |
3 | 启用 styled-components 插件需要在 umi 项目中进行相关配置。请按照以下步骤进行操作：
4 |
5 | 1. 首先，确保已经安装了 `@umijs/plugins` 依赖。如果没有安装，请执行以下命令进行安装：
6 |
7 | ```bash
8 | $ pnpm i @umijs/plugins -D
9 | ```
10 |
11 | 2. 在项目的配置文件（通常是 `.umirc.ts` 或 `config/config.ts` 文件）中添加 `plugins` 配置项，并把 `'@umijs/plugins/dist/styled-components'` 添加到插件列表中。示例配置如下：
12 |
13 | ```ts
14 | export default {
15 | plugins: ['@umijs/plugins/dist/styled-components'],
16 | styledComponents: {},
17 | };
18 | ```
19 |
20 | 3. 保存配置文件，在 umi 项目中即可使用 styled-components。
21 |
22 | ### 如何在 @umijs/max 项目中启用 styled-components？
23 |
24 | 启用 styled-components 在 @umijs/max 项目中的配置方法与 umi 有所不同。请按照以下步骤进行操作：
25 |
26 | 1. 在 @umijs/max 项目中，styled-components 是默认已经安装的，无需额外安装。
27 |
28 | 2. 打开项目的配置文件（通常是 `.umirc.ts` 或 `config/config.ts` 文件），在 `export default` 中的 `styledComponents` 对象下添加以下配置：
29 |
30 | ```ts
31 | export default {
32 | styledComponents: {},
33 | };
34 | ```
35 |
36 | 3. 保存配置文件，在 @umijs/max 项目中即可使用 styled-components。
37 |
38 | ### 什么是 styled-components 的插件？
39 |
40 | styled-components 的插件是一个可以帮助你使用 styled-components 的工具。它提供了一些功能帮助你更方便地使用 styled-components。
41 |
42 | ### styled-components 插件都可以从哪里导入使用？
43 |
44 | 大部分 styled-components 的导出可以从 `umi` 或 `@umijs/max` 里 import 使用。
45 |
46 | ### styled-components 的插件有哪些特性？
47 |
48 | 1. 支持通过配置的方式开启 styled-components 的 babel 插件，仅 dev 模式有效。
49 |
50 | 2. 支持通过运行时配置的方式声明全局样式。
51 |
52 | ### 什么是 styled-components 的 babel 插件？
53 |
54 | styled-components 的 babel 插件是用于将 CSS-in-JS 的样式定义转换为对应的 CSS 样式。该插件可以在开发模式下使用，通过配置 `babelPlugin` 可以开启该插件。
55 |
56 | ### 如何配置 styled-components 的 babel 插件？
57 |
58 | 配置 styled-components 的 babel 插件可以通过在 `.umirc.ts` 文件中的 `styledComponents` 配置项中设置 `babelPlugin` 属性。例如：
59 |
60 | ```ts
61 | export default {
62 | styledComponents: {
63 | babelPlugin: {},
64 | },
65 | };
66 | ```
67 |
68 | 如果导入来源不是 `umi` / `@umijs/max`，需要将导入来源配置到 `topLevelImportPaths` 才可以使该 babel 插件生效。例如：
69 |
70 | ```ts
71 | export default {
72 | styledComponents: {
73 | babelPlugin: {
74 | topLevelImportPaths: ['alita'],
75 | },
76 | },
77 | };
78 | ```
79 |
80 | ### 如何使 styled-components 的 babel 插件生效？
81 |
82 | 要使 styled-components 的 babel 插件生效，需要将插件的导入来源配置到 `topLevelImportPaths` 中。例如，如果导入来源是 `alita`，则需要在配置中设置如下：
83 |
84 | ```ts
85 | export default {
86 | styledComponents: {
87 | babelPlugin: {
88 | topLevelImportPaths: ['alita'],
89 | },
90 | },
91 | };
92 | ```
93 |
94 | ### 什么是运行时配置项？
95 |
96 | 运行时配置项是用来配置应用程序在运行时的一些行为或特性的选项。它们可以用来修改默认行为、启用或禁用特定的功能，或者进行其他自定义操作。运行时配置项可以在应用程序启动时进行设置，也可以在运行过程中动态修改。
97 |
98 | ### 如何使用`styled-components`中的`GlobalStyle`？
99 |
100 | 在使用`styled-components`的过程中，可以通过`GlobalStyle`来定义全局样式。`GlobalStyle`是一个 React 组件，它使用了`createGlobalStyle`函数来创建，并可以在整个应用程序中生效。
101 |
102 | 在代码中，首先需要引入`createGlobalStyle`函数，然后使用它来创建一个`GlobalStyle`组件，通过模板字符串的形式定义全局样式。在模板字符串中，可以编写 CSS 样式规则，来定制全局样式。
103 |
104 | 最后，在应用程序中使用`GlobalStyle`组件来将全局样式应用到整个应用程序中，并确保它被正确地渲染和生效。
105 |
106 | ### 如何使用运行时配置项中的`styledComponents`?
107 |
108 | 在运行时配置项中，往往会定义一些常用的`styled-components`组件，以便在整个应用程序中重复使用。
109 |
110 | 在使用这些组件时，只需要将它们引入到代码中，并按照正确的方式使用它们即可。在代码中，可以直接使用这些组件，就像使用普通的`styled-components`组件一样。
111 |
112 | 例如，当一个应用程序需要使用全局样式时，可以直接引入运行时配置项中定义的`GlobalStyle`组件，并将其渲染到应用程序的根节点中，从而应用全局样式。
113 |
114 | ```tsx
115 | import { styledComponents } from 'umi';
116 |
117 | const { GlobalStyle } = styledComponents;
118 |
119 | function App() {
120 | return (
121 | <>
122 | \n \n```\n"
29 | },
30 | {
31 | "title": "CSS 变量模式需要注意哪些问题？",
32 | "md": "在 React 18 中，使用了 `useId` 来生成唯一的 key，所以不需要关心为每一个主题设置唯一的 key。但是在 React 17 或者 16 中，需要手动为每一个主题设置一个唯一的 key，否则会导致主题混乱。\n"
33 | },
34 | {
35 | "title": "如何确认 CSS 变量模式已经生效？",
36 | "md": "开启 CSS 变量模式后，可以审查元素，可以看到 antd 组件样式中一些原本具体的数值被替换为了 CSS 变量。示例图片如下：\n\n希望以上信息能帮到您。如果还有其他问题，请随时提问。\n"
37 | },
38 | {
39 | "title": "CSS 变量模式下，为什么可以关闭 hash？",
40 | "md": "在 Ant Design 5.x 及以上的版本中，hash 是用于隔离主题样式的一个特性。然而，在启用了 CSS 变量之后，相同版本的 Ant Design 下的组件样式不会随着 token 的变化而改变，因为动态部分的样式已经用 CSS 变量填充了。因此，如果你的应用中只使用了一个版本的 Ant Design，你可以考虑关闭 hash 来进一步减小样式体积。\n"
41 | },
42 | {
43 | "title": "如何关闭 hash？",
44 | "md": "你可以通过以下方式关闭 hash：\n```tsx\n\n \n```\n这样，你就可以在 `ConfigProvider` 中将 `theme` 的 `hashed` 属性设置为 `false`，来关闭 hash。\n同时，我们还强烈推荐你使用 `extractStyle` 来抽取静态样式。这样做可以提升应用的性能。\n"
45 | },
46 | {
47 | "title": "使用 CSS 变量模式后，关闭 hash 有什么好处？",
48 | "md": "通过关闭 hash，可以进一步减小样式的体积。同时，使用 CSS 变量模式后，即使样式中的 token 发生变化，组件样式也不会改变。这是因为 CSS 变量已经填充了样式中的动态部分。因此，如果应用中只使用了一个版本的 Ant Design，并且启用了 CSS 变量模式，关闭 hash 可以提供更好的性能和更小的样式体积。\n"
49 | },
50 | {
51 | "title": "CSS 变量的前缀是什么？",
52 | "md": "* 属性：prefix\n* 说明：CSS 变量的前缀\n* 类型：string\n* 默认值：`ant`\n* 版本：5.12.0\n"
53 | },
54 | {
55 | "title": "如何填充当前主题的唯一识别 key？",
56 | "md": "* 属性：key\n* 说明：当前主题的唯一识别 key. 在 React 18 中会默认用 `useId` 填充，小于 React 18 的版本需要手动填充。\n* 类型：string\n* 默认值：`useId` in React 18\n* 版本：5.12.0\n"
57 | },
58 | {
59 | "title": "有哪些参数支持在 `cssVar` 中使用？",
60 | "md": "* 属性：prefix\n\n* 说明：CSS 变量的前缀\n\n* 类型：string\n\n* 默认值：`ant`\n\n* 版本：5.12.0\n\n* 属性：key\n\n* 说明：当前主题的唯一识别 key. 在 React 18 中会默认用 `useId` 填充，小于 React 18 的版本需要手动填充。\n\n* 类型：string\n\n* 默认值：`useId` in React 18\n\n* 版本：5.12.0\n"
61 | }
62 | ]
--------------------------------------------------------------------------------
/meta/ant-design/recommendation.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "title": "React Hooks 库推荐",
4 | "md": "哪些 React Hooks 库可以推荐使用？\n我们可以推荐以下 React Hooks 库：\n* [ahooks](https://github.com/alibaba/hooks)\n"
5 | },
6 | {
7 | "title": "有哪些与表单相关的库可以推荐？",
8 | "md": "以下是一些与表单相关的库推荐：\n* [ProForm](https://procomponents.ant.design/components/form)\n* [Formily](https://github.com/alibaba/formily)\n* [react-hook-form](https://github.com/react-hook-form/react-hook-form)\n* [formik](https://github.com/formium/formik)\n"
9 | },
10 | {
11 | "title": "有哪些常用的图标库可以推荐？",
12 | "md": "以下是一些常用的图标库推荐：\n* [react-fontawesome](https://github.com/FortAwesome/react-fontawesome)\n* [react-icons](https://github.com/gorangajic/react-icons)\n请注意，以上推荐的库并非完整列表，仅供参考。你可以根据具体需求选择适合的库来使用。\n"
13 | },
14 | {
15 | "title": "文档管理推荐产品有哪些？",
16 | "md": "以下是一些常用的文档管理工具，供前端/设计/产品使用：\n1. [🐦 语雀](https://www.yuque.com/?chInfo=ch_antd)：语雀是一个很不错的文档管理工具，可以帮助团队更好地协作和分享知识。\n"
17 | },
18 | {
19 | "title": "前端常用的图标库有哪些？",
20 | "md": "以下是一些常用的前端图标库：\n1. [阿里巴巴矢量图标库](https://www.iconfont.cn/)：阿里巴巴矢量图标库是一个非常强大的图标库，包含了各种各样的图标，可以方便地在项目中使用。\n"
21 | },
22 | {
23 | "title": "有哪些 Sketch 插件推荐使用？",
24 | "md": "下面是一些推荐的 Sketch 插件：\n1. [Kitchen](https://kitchen.alipay.com)：Kitchen 是一个非常实用的 Sketch 插件，可以帮助开发者更高效地进行设计工作。\n"
25 | },
26 | {
27 | "title": "常用的在线代码编辑工具有哪些？",
28 | "md": "以下是一些常用的在线代码编辑工具：\n1. [codesandbox](https://codesandbox.io/)：codesandbox 是一个非常方便的在线代码编辑工具，可以帮助开发者快速创建、分享和部署前端应用。\n2. [codepen](https://codepen.io/)：codepen 也是一个非常好用的在线代码编辑工具，可以实时预览并分享你的前端代码。\n"
29 | },
30 | {
31 | "title": "有什么好用的图片压缩工具推荐？",
32 | "md": "以下是一些常用的图片压缩工具：\n1. [tinypng](https://tinypng.com/)：tinypng 是一个非常方便的在线图片压缩工具，可以帮助你减小图片的文件大小，同时保持较高的图片质量。\n"
33 | }
34 | ]
--------------------------------------------------------------------------------
/meta/ant-design/use-with-create-react-app.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "title": "Qcreate-react-app 是什么？",
4 | "md": "A`create-react-app` 是业界最优秀的 React 应用开发工具之一。\n"
5 | },
6 | {
7 | "title": "Q 如何在 create-react-app 中使用 antd？",
8 | "md": "A 在 create-react-app 中使用 antd，需要先创建一个 TypeScript 项目，并引入 antd。确保项目中使用匹配的 antd 版本。\n"
9 | },
10 | {
11 | "title": "Q antd 基于什么版本的 TypeScript？",
12 | "md": "A antd 基于最新稳定版本的 TypeScript（>=5.0.0）。\n"
13 | },
14 | {
15 | "title": "如何安装和初始化项目？",
16 | "md": "在开始之前，你需要安装 `yarn` 或者 `pnpm`，你可以使用以下命令来进行安装：\n* 如果你选择使用 `yarn`，可以运行以下命令：\n```bash\n$ yarn create react-app antd-demo --template typescript\n```\n* 如果你选择使用 `pnpm`，可以运行以下命令：\n```bash\n$ pnpm create react-app antd-demo --template typescript\n```\n这样工具会自动为你初始化一个脚手架，并安装 React 项目所需的各种必要依赖。\n请注意，如果在安装过程中出现网络问题，你可以尝试配置代理或者切换至其他 npm registry。\n安装和初始化完成后，你需要进入项目并启动，使用以下命令：\n```bash\n$ cd antd-demo\n$ npm run start\n```\n此时，你的浏览器将自动打开一个页面，访问 http://localhost:3000/，并显示 `Welcome to React` 的界面。这意味着安装和初始化项目成功了。\n"
17 | },
18 | {
19 | "title": "如何启动项目？",
20 | "md": "在项目初始化完成后，你可以使用以下命令来启动项目：\n```bash\n$ cd antd-demo\n$ npm run start\n```\n执行以上命令后，你的浏览器会自动打开一个页面，并访问 http://localhost:3000/。在页面上你将看到 `Welcome to React` 的界面，这意味着项目启动成功。\n"
21 | },
22 | {
23 | "title": "如果遇到网络问题怎么办？",
24 | "md": "如果在安装或初始化项目的过程中遇到网络问题，你可以尝试以下解决方案：\n* 配置代理：你可以通过设置代理来解决网络问题。具体的代理配置方法可以参考你所使用的工具的文档。\n\n* 使用其他 npm registry：如果你所使用的 npm registry 出现问题，你可以尝试切换至其他可靠的 npm registry。\n希望以上方法能够帮助你解决网络问题，并顺利安装和初始化你的项目。\n"
25 | },
26 | {
27 | "title": "如何安装和引入 antd？",
28 | "md": "你可以通过以下命令使用 npm 安装 antd：\n```\n$ npm install antd --save\n```\n或者使用 yarn：\n```\n$ yarn add antd\n```\n或者使用 pnpm：\n```\n$ pnpm install antd --save\n```\n安装完成后，你可以在项目中引入 antd 组件。例如，在 `src/App.js` 文件中，你可以按如下方式引入 antd 的按钮组件：\n```tsx\nimport React from 'react';\nimport { Button } from 'antd';\n\nconst App: React.FC = () => (\n \n \n \n);\n\nexport default App;\n```\n这样，你就可以在应用中使用 antd 的按钮组件了。\n"
29 | },
30 | {
31 | "title": "如何在 create-react-app 中使用 antd？",
32 | "md": "如果你使用 create-react-app 工具创建了项目，可以按照以下步骤来使用 antd：\n1. 在项目根目录下，使用命令安装 antd：\n```tsx\n $ npm install antd --save\n```\n或者\n```tsx\n $ yarn add antd\n```\n或者\n```tsx\n $ pnpm install antd --save\n```\n2. 在你想要使用 antd 组件的文件中，使用 `import` 语句来引入需要的组件，例如：\n```tsx\nimport { Button } from 'antd';\n```\n3. 在需要使用 antd 组件的地方直接使用它们，例如：\n```tsx\n\n```\n这样，在应用中就可以使用 antd 的组件了。\n4. 如果你还需要其他的 antd 组件，可以在相应的文件中引入并使用它们。\n以上是在 create-react-app 中使用 antd 的基本步骤，请参考 create-react-app 的[官方文档](https://create-react-app.dev/docs/getting-started)了解更多开发流程。\n"
33 | },
34 | {
35 | "title": "如何配置自定义主题？",
36 | "md": "要配置自定义主题，可以参考 Ant Design 的 [配置主题](/docs/react/customize-theme) 文档。在你的应用中，可以通过`ConfigProvider`组件进行主题配置。下面是一个示例：\n```tsx\nimport React from 'react';\nimport { ConfigProvider } from 'antd';\n\nconst App: React.FC = () => (\n \n \n);\n\nexport default App;\n```\n注意，在你的应用中使用`antd`时，还需要确保不要安装`@types/antd`，因为`antd`已经提供了完整的 TypeScript 定义。\n"
37 | },
38 | {
39 | "title": "如何享受 TypeScript 的属性输入建议和定义检查功能？",
40 | "md": "`antd`使用 TypeScript 书写，并提供了完整的定义。因此，在开发时，你可以享受组件属性输入建议和定义检查的功能。确保使用正确的`import`语句来导入`antd`组件，然后你就可以在编辑器中获得相应的输入建议和类型检查。\n"
41 | },
42 | {
43 | "title": "如何运行 antd 组件并开始开发我的应用？",
44 | "md": "通过上述配置主题的步骤，你已经成功将 antd 组件运行起来了。现在，你可以开始开发你的应用了！根据你的需求，使用 antd 提供的各种组件和功能，来构建出你想要的应用界面。\n"
45 | }
46 | ]
--------------------------------------------------------------------------------
/meta/ant-design/use-with-vite.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "title": "如何在 Vite 中使用 antd 组件？",
4 | "md": "在 Vite 创建的工程中使用 antd 组件是很简单的。首先，确保你已经安装了 `antd` 组件库。然后，按照以下步骤进行操作：\n1. 在你的 Vite 工程目录中，打开终端并执行以下命令安装 antd：\n```shell\n npm install antd\n```\n或者，你也可以使用 yarn：\n```shell\n yarn add antd\n```\n2. 在你的入口文件（一般是 `main.js` 或 `main.tsx`）中导入 antd 组件样式：\n```javascript\nimport 'antd/dist/antd.css';\n```\n这将会全局引入 antd 组件的样式。\n3. 现在，你可以在你的 Vite 工程中使用 antd 组件了。只需按照官方文档的示例代码，在你的组件中导入需要的组件并使用即可。\n```jsx\nimport { Button } from 'antd';\n\nfunction App() {\n return (\n \n \n \n );\n}\n```\n以上就是在 Vite 中使用 antd 组件的基本步骤。如果你想要进一步自定义 Vite 的配置以满足特定需求，可以参考下面的内容。\n"
5 | },
6 | {
7 | "title": "如何自定义 Vite 配置以满足各类工程化需求？",
8 | "md": "Vite 提供了很多配置选项，可以帮助你满足各类工程化需求。下面列举了一些常见的配置需求，并给出了相应的解决方案：\n* **自定义开发服务器配置**：你可以在 Vite 工程目录中创建一个 `vite.config.js` 文件，并在其中编写自定义的服务器配置。\n\n ```javascript\n // vite.config.js\n export default {\n server: {\n port: 3000, // 自定义端口号\n proxy: {\n '/api': {\n target: 'http://localhost:8080', // 自定义代理目标\n changeOrigin: true,\n rewrite: (path) => path.replace(/^\\/api/, ''),\n },\n },\n },\n };\n ```\n\n* **自定义构建配置**：你可以在 `vite.config.js` 文件中使用 `define` 和 `resolve` 配置项来定义全局变量和自定义模块解析规则。\n\n ```javascript\n // vite.config.js\n export default {\n build: {\n define: {\n __DEV__: true, // 自定义全局变量\n },\n resolve: {\n alias: {\n components: '/src/components', // 自定义模块解析别名\n },\n },\n },\n };\n ```\n\n* **添加额外的插件和工具**：你可以在 `vite.config.js` 文件中使用 `plugins` 配置项来添加额外的插件和工具。\n\n ```javascript\n // vite.config.js\n import vue from '@vitejs/plugin-vue';\n import myPlugin from './plugins/myPlugin';\n\n export default {\n plugins: [\n vue(), // 添加 vue 插件\n myPlugin(), // 添加自定义插件\n ],\n };\n ```\n通过自定义 Vite 的配置，你可以满足各类工程化需求，更好地开发 React 应用。\n希望以上内容对你有所帮助！如果还有其他问题，请随时提问。\n"
9 | },
10 | {
11 | "title": "如何安装并初始化 Ant Design React 项目？",
12 | "md": "在开始之前，你需要安装 `yarn` 或者 `pnpm`，然后执行以下命令初始化一个脚手架并安装 React 项目的必要依赖：\n```bash\n$ yarn create vite antd-demo\n```\n或者\n```bash\n$ pnpm create vite antd-demo\n```\n如果网络有问题，你可以尝试配置代理或使用其他 npm registry。\n然后进入项目目录并安装依赖，并启动项目：\n```bash\n$ cd antd-demo\n$ npm install\n$ npm run dev\n```\n最后，通过浏览器访问 http://localhost:5173/ ，如果能看到 `Vite + React` 的界面，说明安装和初始化成功。\n"
13 | },
14 | {
15 | "title": "如何启动 Ant Design React 项目？",
16 | "md": "在项目目录下执行以下命令启动 Ant Design React 项目：\n```bash\n$ npm run dev\n```\n然后，通过浏览器访问 http://localhost:5173/ ，如果能看到 `Vite + React` 的界面，说明项目启动成功。\n"
17 | },
18 | {
19 | "title": "如何安装 Ant Design React 的依赖？",
20 | "md": "在项目目录下执行以下命令安装 Ant Design React 的依赖：\n```bash\n$ npm install\n```\n"
21 | },
22 | {
23 | "title": "如何在 Vite 中引入 antd 组件？",
24 | "md": "在 Vite 生成的默认目录结构中，你可以通过以下步骤引入 antd 组件：\n1. 在 `src/App.js` 中导入 antd 组件库：\n```jsx\nimport { Button } from 'antd';\n```\n2. 在组件中使用 antd 的按钮组件：\n```jsx\n\n```\n这样，你就可以在页面上看到 antd 的蓝色按钮组件了。\n"
25 | },
26 | {
27 | "title": "如何安装 antd？",
28 | "md": "你可以通过以下命令使用 npm、yarn 或 pnpm 来安装 antd：\n使用 npm：\n```\n$ npm install antd --save\n```\n使用 yarn：\n```\n$ yarn add antd\n```\n使用 pnpm：\n```\n$ pnpm install antd --save\n```\n安装完成后，你就可以在项目中引入并使用 antd 组件了。\n"
29 | },
30 | {
31 | "title": "如何查阅 Vite 的官方文档？",
32 | "md": "如果你对 Vite 的其他开发流程感兴趣，你可以参考 Vite 的[官方文档](https://cn.vitejs.dev/)。官方文档中提供了详细的开发指南和文档，可以帮助你更好地使用 Vite 进行开发。\n希望以上信息能帮助你顺利引入 antd 组件并开始开发应用！如有其他问题，请继续提问。\n"
33 | }
34 | ]
--------------------------------------------------------------------------------
/meta/pro-components/LICENSE.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "title": "MIT 许可证是什么？",
4 | "md": "MIT 许可证是一种开源软件许可证，它允许使用、修改、合并、发布、分发、再许可和出售软件的副本。该许可证还包含了代码的免责声明，表示软件是\"按原样\"提供的，没有任何担保。此外，MIT 许可证要求在所有副本或实质部分中包含版权声明和许可声明。\n"
5 | },
6 | {
7 | "title": "MIT 许可证有什么限制和条件？",
8 | "md": "MIT 许可证中明确规定了一些限制和条件，包括：\n* 必须包含版权声明和许可声明；\n* 不提供任何担保和条件；\n* 不承担任何索赔、损害赔偿责任等。\n"
9 | },
10 | {
11 | "title": "如何使用 MIT 许可证？",
12 | "md": "使用 MIT 许可证的软件需要在每个副本中包含版权声明和许可声明。此外，您可以根据自己的需求对软件进行修改、合并、发布、分发、再许可和出售。请注意，MIT 许可证不提供任何担保，使用软件时需要自行承担风险和责任。\n注意：本文所提供的信息仅用于参考。具体的法律问题和许可证应该请教专业人士。\n"
13 | }
14 | ]
--------------------------------------------------------------------------------
/meta/pro-components/components.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "title": "如何在 ProTable 和 ProList 中使用新的数据结构？",
4 | "md": "ProTable 和 ProList 使用了新的数据结构，你只需要按照我们的约定使用参数，就能非常简单地使用它们。以下是一个示例：\n```tsx\nconst msg: {\n datT[];\n page: number;\n success: boolean;\n total: number;\n} = {\n dat[],\n page: 1,\n success: true,\n total: 0,\n};\n```\n只需要将你的数据按照这个结构传递给 ProTable 或 ProList，就可以轻松地使用它们了。\n"
5 | },
6 | {
7 | "title": "如何配置全局的网络请求转化器？",
8 | "md": "如果你的后端数据使用了自己熟悉的 URL，虽然我们可以用 Umi 的 request 来转化，但是每个 table 都需要单独配置就比较麻烦。不过，如果你使用 Umi 的 request，我们可以定义一个全局的转化器。在 app.tsx 文件中进行如下配置：\n```tsx\nimport { request, RequestConfig } from 'umi';\n\nexport const request: RequestConfig = {\n errorConfig: {\n adaptor: (resData) => {\n // resData 是我们自己的数据\n return {\n ...resData,\n total: resData.sum,\n success: resData.ok,\n errorMessage: resData.message,\n };\n },\n },\n};\n```\n配置完成后，你可以在任何地方使用像这样的代码：\n```tsx\n console.log(value)}\n style={{ width: 200 }}\n/>;\n```\n这样就在页面上创建了一个搜索框。\n3. 结合 Table 组件使用搜索功能：\n```tsx\n const columns = [\n {\n title: '姓名',\n dataIndex: 'name',\n key: 'name',\n },\n ...\n ];\n\n
\n```\n使用 Ant Design 的 Table 组件可以将搜索和表格结合起来，实现搜索功能。\n4. 根据需要配置搜索功能的逻辑和样式，在搜索框中输入内容后，可以通过相关的事件或回调函数处理搜索逻辑。\n"
5 | },
6 | {
7 | "title": "3：如何在 Ant Design 中使用下拉选择框？",
8 | "md": "Ant Design 提供了下拉选择框组件，你可以按照以下步骤来使用它：\n1. 首先，在你的代码中导入下拉选择框组件的模块：\n```tsx\nimport { Select } from 'antd';\n```\n2. 创建一个 Select 组件，并配置选项：\n```tsx\nconst { Option } = Select;\n\n;\n```\n通过添加 Option 组件可以配置下拉选择框的选项。\n3. 根据需要，你可以使用 onChange 属性来监听选择变化的事件，并在回调函数中处理选择逻辑。\n```tsx\nfunction handleChange(value) {\n console.log(`selected ${value}`);\n}\n```\n通过回调函数可以获取用户选择的值，并进行相应的操作。\n以上是在 Ant Design 中使用搜索功能和下拉选择框的基本步骤，具体使用方法可以参考 Ant Design 的官方文档。\n"
9 | },
10 | {
11 | "title": "text 参数",
12 | "md": "* 说明：需要格式化的值\n* 类型：any\n* 默认值：-\n"
13 | },
14 | {
15 | "title": "valueType 参数",
16 | "md": "* 说明：格式化的类型\n* 类型：ValueType\n* 默认值：-\n"
17 | },
18 | {
19 | "title": "mode 参数",
20 | "md": "* 说明：组件的模式\n* 默认值：-\n* 类型：-\n"
21 | },
22 | {
23 | "title": "plain 参数",
24 | "md": "* 说明：精简模式\n* 默认值：-\n* 类型：-\n"
25 | },
26 | {
27 | "title": "renderFormItem 参数",
28 | "md": "* 说明：自定义 `mode=update \\| edit` 下的 dom 表现，一般用于渲染编辑框\n* 默认值：-\n* 类型：-\n"
29 | },
30 | {
31 | "title": "render 参数",
32 | "md": "* 说明：自定义 `mode=read` 下的 dom 表现，只是单纯的表现形式\n* 默认值：-\n* 类型：-\n"
33 | }
34 | ]
--------------------------------------------------------------------------------
/meta/pro-components/index.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "title": "ProComponents 是基于什么开发的？",
4 | "md": "ProComponents 是基于 Ant Design 而开发的模板组件。\n"
5 | },
6 | {
7 | "title": "ProComponents 提供了哪些组件？",
8 | "md": "ProComponents 提供以下组件：\n* ProLayout 解决布局的问题，提供开箱即用的菜单和面包屑功能\n* ProTable 表格模板组件，抽象网络请求和表格格式化\n* ProForm 表单模板组件，预设常见布局和行为\n* ProCard 提供卡片切分和栅格布局能力\n* ProDescriptions 定义列表模板组件，ProTable 的配套组件\n* ProSkeleton 页面级别的骨架屏\n"
9 | },
10 | {
11 | "title": "ProComponents 适用于哪些场景？",
12 | "md": "ProComponents 适用于中后台的 CRUD，预设了丰富的样式和行为。如果你的业务需要丰富的自定义，建议直接使用 Ant Design。在使用 ProComponents 之前，可以查看典型的 Demo 来判断组件是否适合你们的业务。\n"
13 | },
14 | {
15 | "title": "如何安装 ProComponents？",
16 | "md": "你可以通过以下步骤来安装 ProComponents：\n1. 打开命令行工具，进入你的项目目录。\n2. 运行以下命令来安装 ProComponents 的 npm 包：\n```shell\nnpm i @ant-design/pro-components --save\n```\n这样就成功安装了 ProComponents。\n"
17 | },
18 | {
19 | "title": "ProComponents 提供了哪些组件？",
20 | "md": "ProComponents 提供了多个可直接使用的组件。你可以通过运行以下命令来安装这些组件：\n```shell\nnpm i @ant-design/pro-components --save\n```\n安装完成后，你就可以在你的项目中直接使用这些组件了。\n请注意，如果你只需要使用部分组件，可以根据自己的需求进行选择安装。\n"
21 | },
22 | {
23 | "title": "在项目中如何使用 ProForm 组件？",
24 | "md": "在项目中使用 ProForm 组件时，首先需要将该组件引入到项目中，示例如下：\n```jsx\nimport React from 'react';\nimport { ProForm } from '@ant-design/pro-components';\n\nexport default () => {\n return (\n {\n console.log(values);\n }}\n >\n {/* 其他表单项 */}\n \n );\n};\n```\n在上述示例代码中，我们将 ProForm 组件引入到项目中，并通过 onFinish 函数来处理表单提交事件。你可以根据项目的需求添加/修改表单项，并在 onFinish 函数中处理表单数据。\n记得在项目中安装 `@ant-design/pro-components` 包。\n"
25 | },
26 | {
27 | "title": "如何使用 ProFormText 组件？",
28 | "md": "ProFormText 是 ProForm 组件的子组件，用于创建文本输入框表单项。要使用 ProFormText 组件，需要先将其引入到项目中，示例如下：\n```jsx\nimport React from 'react';\nimport { ProForm, ProFormText } from '@ant-design/pro-components';\n\nexport default () => {\n return (\n {\n console.log(values);\n }}\n >\n {\n console.log(values);\n // 在这里可以进行表单数据的提交处理\n }}\n >\n {/* 表单项 */}\n \n );\n};\n```\n在上述示例代码中，我们在 ProForm 组件的 onFinish 函数中获取到了表单的值(values)，你可以在这个函数中对表单数据进行处理，比如提交到服务器或者进行其他操作。\n记得在项目中安装 `@ant-design/pro-components` 包。\n"
33 | }
34 | ]
--------------------------------------------------------------------------------
/meta/pro-components/list.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "title": "ProList 的常用参数有哪些？",
4 | "md": "ProList 的常用参数如下：\n* dataSource: 与 antd 相同的配置，表示数据源，类型为数组，默认值为 `false`。\n* actionRef: Table action 的引用，便于自定义触发，类型为 MutableRefObject。\n* metas: 列表项配置，类似 Table 中的 columns，类型为 Metas。\n* rowKey: 行的 key，一般是行 id，类型为 string 或者 `(row,index)=>string`，默认值为 `'id'`。\n* headerTitle: 列表头部主标题，类型为 React.ReactNode。\n* loading: 是否加载中，类型为 boolean 或者 `(item: any) => boolean`，默认值为 `false`。\n* split: 是否有分割线，类型为 boolean，默认值为 `false`。\n* rowSelection: 与 antd 相同的配置，表示行选择，类型为对象或者布尔值，默认值为 false。\n* expandable: 与 antd 相同的配置，表示可展开行的配置，类型为对象或者 `false`。\n* showActions: 何时展示 actions，CardList 模式下不生效，类型为 `'hover'` 或者 `'always'`，默认值为 `'always'`。\n* showExtr 何时展示 extra，类型为 `'hover'` 或者 `'always'`，默认值为 `'always'`。\n* onRow: 与 antd 相同的配置，当用户传入 `grid` 属性时，列表将会以卡片模式进行渲染，此事件将不会触发，请使用 `onItem`，类型为 `function(record, index)`。\n* onItem: 与 antd 相同的配置，表示在所有类型点击某个项目都会触发该事件，类型为 `function(record, index)`。\n* rowClassName: 自定义列表行的类名，类型为字符串或者 `(row, index) => string`。\n* itemHeaderRender: 自定义每一列的 header，不同于 itemRender 的是它会保留多选和展开收起。\n* itemCardProps: 自定义卡片列表的 proCard props，只在卡片列表下生效。\n"
5 | },
6 | {
7 | "title": "如何使用 itemHeaderRender 和 itemCardProps？",
8 | "md": "itemHeaderRender 和 itemCardProps 是 ProList 的两个参数。\n* itemHeaderRender 是用来自定义每一列的 header，与 itemRender 不同的是，它会保留多选和展开收起。你可以将自定义的组件传入到 itemHeaderRender 中，实现个性化的列表列头显示。\n\n* itemCardProps 是用来自定义卡片列表的 proCard 的 props，只在卡片列表下生效。你可以传入一个对象，设置 proCard 的属性，从而自定义卡片列表的显示样式。\n"
9 | },
10 | {
11 | "title": "Metas.\\[Meta] 通用 API",
12 | "md": ""
13 | },
14 | {
15 | "title": "参数",
16 | "md": "* **dataIndex**: 数据在数据项中对应的路径，支持通过数组查询嵌套路径\n\n * 类型: `string` | `string[]`\n * 默认值: `-`\n\n* **valueType**: 值的类型，和 ProTable 一致\n\n * 类型: `'text'` | `'date'` ...\n * 默认值: `'text'`\n\n* **render**: 自定义渲染函数\n * 类型: `(text: React.ReactNode, record: T, index: number) => React.ReactNode | React.ReactNode[]`\n * 默认值: `-`\n"
17 | },
18 | {
19 | "title": "说明",
20 | "md": "Metas.\\[Meta] 是一个通用 API，用于配置 ProTable 的元数据项。\n"
21 | },
22 | {
23 | "title": "示例",
24 | "md": "```jsx\nimport { ProTable } from 'antd';\n\nconst columns = [\n {\n title: '姓名',\n dataIndex: 'name',\n },\n {\n title: '年龄',\n dataIndex: 'age',\n valueType: 'number',\n },\n {\n title: '操作',\n render: (text, record, index) => (\n handleEdit(record)}>编辑\n ),\n },\n];\n\nconst dataSource = [\n {\n name: '张三',\n age: 18,\n },\n {\n name: '李四',\n age: 20,\n },\n];\n\nconst MyTable = () => {\n return \n User\n \n```\n在上述例子中，通过`router-link`组件的`to`属性，使用`name`属性为`user`的路由，并传递`params`参数`{ username: 'erina' }`，来生成一个包含链接文本`User`的可点击的路由链接。\n"
13 | },
14 | {
15 | "title": "如何使用命名路由进行编程式导航？",
16 | "md": "使用命名路由进行编程式导航与使用命令式调用`router.push`方法一致。例如：\n```ts\nrouter.push({ name: 'user', params: { username: 'erina' } });\n```\n在上述例子中，通过调用`router.push`方法，传递一个包含`name`属性为`user`的路由和`params`参数`{ username: 'erina' }`，实现了导航到路径`/user/erina`的效果。\n"
17 | }
18 | ]
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@ant-design/doc",
3 | "version": "1.0.6",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "genApi": "node scripts/readApi.mjs && node scripts/docsToJson.mjs && node scripts/apiToMd.mjs && npm run prettier",
8 | "genChangeLog": "node scripts/readChange.mjs",
9 | "prettier": "prettier --write \"docs/**/**.{js,jsx,tsx,ts,less,md,yaml,json}\" --loglevel warn",
10 | "test": "echo \"Error: no test specified\" && exit 1",
11 | "prepublishOnly": "npm run genApi && npm run genChangeLog && npm run prettier"
12 | },
13 | "files": [
14 | "api",
15 | "docs"
16 | ],
17 | "repository": {
18 | "type": "git",
19 | "url": "https://github.com/ant-design/doc"
20 | },
21 | "keywords": [],
22 | "author": "",
23 | "license": "ISC",
24 | "devDependencies": {
25 | "@qdrant/js-client-rest": "^1.7.0",
26 | "@umijs/fabric": "^4.0.1",
27 | "glob": "^10.3.10",
28 | "openai": "^4.26.0",
29 | "prettier": "^3.2.4",
30 | "prettier-plugin-organize-imports": "^3.2.4",
31 | "prettier-plugin-packagejson": "^2.4.10",
32 | "remark": "^15.0.1",
33 | "remark-gfm": "^4.0.0",
34 | "remark-parse": "^11.0.0",
35 | "unified": "^11.0.4",
36 | "unist-util-visit": "^5.0.0"
37 | },
38 | "publishConfig": {
39 | "access": "public"
40 | },
41 | "authors": [
42 | "chenshuai2144 (https://github.com/chenshuai2144)"
43 | ]
44 | }
45 |
--------------------------------------------------------------------------------
/scripts/apiToMd.mjs:
--------------------------------------------------------------------------------
1 | import fs from 'fs';
2 | import path from 'path';
3 | import { fileURLToPath } from 'url';
4 |
5 | // 获取当前脚本所在目录路径
6 | const __dirname = path.dirname(fileURLToPath(import.meta.url));
7 |
8 | const apiPath = path.join(__dirname, '..', 'api');
9 |
10 | fs.readdirSync(path.join(__dirname, '..', 'api')).forEach((jsonName) => {
11 | console.log('转化 => ' + jsonName);
12 | const json = JSON.parse(fs.readFileSync(path.join(apiPath, jsonName)));
13 | const packageName = path.basename(jsonName).split('.').at(0);
14 | const mdFile = json.map((item) => {
15 | const questionMd = `### ${packageName} 的 ${item.title} 有哪些配置？`;
16 | const subItemMd = [];
17 |
18 | if (item.md) {
19 | const childMd = item.properties
20 | ?.map((property) => {
21 | if (property.property?.length > 0) {
22 | return `**${item.title} ${property.title}** \n\n${property.md}\n${property.property
23 | .map((subItem) => {
24 | subItemMd.push(
25 | `### umi 如何使用 ${subItem.title}?\n\n${subItem.md}`,
26 | );
27 | return `#### ${subItem.title}\n${subItem.md}`;
28 | })
29 | .join('\n\n')}`;
30 | }
31 | return `**${item.title} ${property.title}** \n\n${property.md}`;
32 | })
33 | .join('');
34 |
35 | return [questionMd, childMd, ...subItemMd].join('\n');
36 | }
37 | const mdList = item.properties
38 | ?.map((row) => {
39 | if (row.property.length === 0) {
40 | return null;
41 | }
42 | const mdTitle = `### ${packageName} 的 ${row.title} 有哪些配置？`;
43 | const mdRow = `| ${Object.keys(row.property.at(0)).join(' | ')} |
44 | | ${Object.keys(row.property.at(0))
45 | .map(() => '---')
46 | .join(' | ')} |
47 | ${row.property
48 | .map((item) => {
49 | return `| ${Object.values(item)
50 | .map((apiItem) =>
51 | apiItem?.toString().replaceAll('|', '\\|').replaceAll('\\\\|', '\\|'),
52 | )
53 | .join(' | ')} |`;
54 | })
55 | .join('\n')}
56 | `;
57 |
58 | const propertyMd = row.property
59 | .map((item) => {
60 | const values = Object.values(item);
61 | return `### ${packageName} 中 ${row.title}的${values[0]}属性如何使用？ \n\n${Object.keys(
62 | item,
63 | )
64 | .map((key, index) => {
65 | return `${key}: ${values[index]}`;
66 | })
67 | .join(' \n\n')}`;
68 | })
69 | .join('\n\n');
70 |
71 | return {
72 | md: [mdTitle, mdRow, propertyMd].join('\n\n'),
73 | tableMd: mdRow,
74 | title: row.title,
75 | };
76 | })
77 | .filter(Boolean);
78 |
79 | const answerMd = mdList
80 | ?.map((mdListItem) => {
81 | return `#### ${mdListItem.title} \n\n${mdListItem.tableMd}`;
82 | })
83 | .join('\n\n');
84 |
85 | const md = [questionMd, answerMd].filter(Boolean).join('\n\n');
86 |
87 | return [md, mdList?.map((mdListItem) => mdListItem.md).join('\n\n')].join(
88 | '\n\n',
89 | );
90 | });
91 |
92 | fs.writeFileSync(
93 | path.join(__dirname, '..', 'docs', packageName, 'api.md'),
94 | mdFile.join('\n\n'),
95 | );
96 | });
97 |
--------------------------------------------------------------------------------
/scripts/docsToJson.mjs:
--------------------------------------------------------------------------------
1 | import fs from 'fs';
2 | import path from 'path';
3 | import { remark } from 'remark';
4 | import parse from 'remark-parse';
5 | import { unified } from 'unified';
6 | import { fileURLToPath } from 'url';
7 | import { readMarkdownFiles } from './readApi.mjs';
8 |
9 | // 获取当前脚本所在目录路径
10 | const __dirname = path.dirname(fileURLToPath(import.meta.url));
11 |
12 | const processor = unified().use(parse);
13 |
14 | /**
15 | * 解析Markdown文件并将其转换为JSON格式。
16 | * @param {string[]} fileList - 包含Markdown文件路径的数组。
17 | */
18 | const parseMDAndWrite = (fileList) => {
19 | fileList.forEach((fileName) => {
20 | const fileContent = fs.readFileSync(fileName, 'utf-8');
21 | const ast = processor.parse(fileContent);
22 | let apiJSON = [];
23 | ast.children.forEach((node) => {
24 | if (node.type === 'heading' && node.depth === 3) {
25 | apiJSON.push({
26 | title: remark
27 | .stringify(node)
28 | ?.replace(/\n/g, '')
29 | ?.replace('### ', '')
30 | ?.trim(),
31 | md: '',
32 | });
33 | } else {
34 | if (apiJSON.at(-1)) {
35 | let md = apiJSON.at(-1).md;
36 | md = md + remark.stringify(node);
37 | apiJSON.at(-1).md = md;
38 | }
39 | }
40 | });
41 | const metaPath = path.join(
42 | __dirname,
43 | '..',
44 | 'meta',
45 | fileName.split(path.sep).at(1),
46 | );
47 |
48 | if (metaPath) {
49 | fs.mkdirSync(metaPath, { recursive: true });
50 | }
51 |
52 | if (apiJSON.length > 0) {
53 | fs.writeFileSync(
54 | path.join(metaPath, path.basename(fileName).split('.').at(0) + '.json'),
55 | JSON.stringify(apiJSON, null, 2),
56 | );
57 | }
58 | });
59 | };
60 |
61 | parseMDAndWrite(readMarkdownFiles('./docs'));
62 |
--------------------------------------------------------------------------------
/scripts/genQA.mjs:
--------------------------------------------------------------------------------
1 | import OpenAI from 'openai';
2 | import { readMarkdownFiles } from './readApi.mjs';
3 | import fs from 'fs';
4 | import path from 'path';
5 | import { fileURLToPath } from 'url';
6 |
7 | // 创建 OpenAI 实例
8 | const openai = new OpenAI({
9 | apiKey: process.env.OPENAI_API_KEY,
10 | baseURL: 'https://api.openai-proxy.com/v1',
11 | });
12 |
13 | // 获取当前脚本所在目录路径
14 | const __dirname = path.dirname(fileURLToPath(import.meta.url));
15 |
16 | // 读取当前目录下的 Markdown 文件，并过滤掉以 'docs/' 开头的文件
17 | const mdFileList = readMarkdownFiles('.').filter(
18 | (file) => !file.startsWith('docs/')
19 | );
20 |
21 | // 遍历 Markdown 文件列表
22 | for await (const file of mdFileList) {
23 | // 读取 Markdown 文件内容
24 | const mdContent = fs.readFileSync(file, 'utf-8');
25 | // 将 Markdown 内容按照 '# ' 进行分割
26 | const mdContentArray = mdContent.split('\n#');
27 | const mdFile = [];
28 | // 构建新文件路径
29 | const newFileName = path.join(__dirname, '..', 'docs', file);
30 | // 如果新文件已存在，则跳过当前文件的处理
31 | if (fs.existsSync(newFileName)) continue;
32 |
33 | let i = 0;
34 | // 遍历 Markdown 内容数组
35 | for await (const section of mdContentArray) {
36 | // 如果段落长度小于 150，则跳过当前段落的处理
37 | if (section.length < 150) continue;
38 | i++;
39 | console.log(
40 | '正在处理' + file + ' (' + i + '/' + mdContentArray.length + ')'
41 | );
42 |
43 | // 使用 OpenAI 的 chat completions API 生成 QA 文档
44 | const jsonContent = await openai.chat.completions
45 | .create({
46 | model: 'gpt-3.5-turbo-16k',
47 | temperature: 1,
48 | frequency_penalty: 0,
49 | presence_penalty: 0,
50 | max_tokens: 2000,
51 | stream: false,
52 | messages: [
53 | {
54 | role: 'system',
55 | content: `
56 | 你是一个前端开发者，你想要生成一个 QA，生成的效果如下：
57 |
58 | """
59 | 例子：
60 | ### Ant Design 5.x 的 CSS 变量模式如何使用
61 |
62 | Ant Design 5.x 的 CSS 变量模式是从版本 5.12.0 开始重新支持的功能。与 4.x 版本不同的是，这次 Ant Design 融合了 CSS-in-JS 的能力，并将所有 Design Token 纳入了 CSS 变量的管理范畴。这意味着在同一组件中，不同主题下的样式可以共享，从而减少样式体积。此外，切换主题时不再需要重新序列化样式，提升了主题切换的性能。如果你的应用依赖 Ant Design 的主题能力，强烈建议开启 CSS 变量模式。
63 | """
64 |
65 | 生成的文档要简洁精确，语义通顺，符合前端开发的基础，输出不要包含《Ant Design 5.x 的 CSS 变量模式如何使用》这个例子，要尽量包含更多的原始文本信息。`,
66 | },
67 | {
68 | role: 'user',
69 | content: `
70 | ${section}
71 | 基于以上信息生成 3 个 QA 文档
72 | `,
73 | },
74 | ],
75 | })
76 | .then((res) => {
77 | return res.choices[0].message.content;
78 | });
79 |
80 | console.log('生成成功');
81 |
82 | // 将生成的 QA 文档内容添加到数组中
83 | mdFile.push(jsonContent);
84 | // 创建新文件所在的目录（如果不存在）
85 | fs.mkdirSync(path.dirname(newFileName), {
86 | recursive: true,
87 | });
88 | // 将生成的 QA 文档内容写入新文件
89 | fs.writeFileSync(newFileName, mdFile.join('\n\n'));
90 | }
91 | }
92 |
--------------------------------------------------------------------------------
/scripts/jsonToEmbedding.mjs:
--------------------------------------------------------------------------------
1 | import { QdrantClient } from '@qdrant/js-client-rest';
2 | import fs from 'fs';
3 | import { glob } from 'glob';
4 | import OpenAI from 'openai';
5 | import path from 'path';
6 | import { fileURLToPath } from 'url';
7 | if (!process.env.OPENAI_API_KEY) {
8 | throw new Error('Missing env var from OpenAI');
9 | }
10 | const openai = new OpenAI({
11 | apiKey: process.env.OPENAI_API_KEY,
12 | });
13 |
14 | const client = new QdrantClient({
15 | url: process.env.QDRANT_API_URL,
16 | apiKey: process.env.QDRANT_API_KEY,
17 | });
18 |
19 | const genEmbedding = async (payload) => {
20 | const embedding = await openai.embeddings
21 | .create({
22 | input: payload.title,
23 | model: 'text-embedding-ada-002',
24 | })
25 | .then((res) => {
26 | return res.data.at(0)?.embedding;
27 | });
28 | return embedding;
29 | };
30 |
31 | // 获取当前脚本所在目录路径
32 | const __dirname = path.dirname(fileURLToPath(import.meta.url));
33 | /**
34 | * 从目录中读取JSON文件并返回文件路径数组。
35 | * @param {string} directory - 要读取JSON文件的目录。
36 | * @returns {string[]} - 文件路径数组。
37 | */
38 | function readJsonFiles(directory) {
39 | const files = glob.sync('**/**/*.json', {
40 | cwd: directory,
41 | ignore: [
42 | '**/fixtures/**',
43 | '**/node_modules/**',
44 | '**/demo/**',
45 | '**/examples/**',
46 | '**/ant-design/docs/spec/**',
47 | '**/tests/**',
48 | '**/*$**/**',
49 | ],
50 | });
51 | return files.map((file) => path.join(directory, file));
52 | }
53 |
54 | const collectionName = 'test_collection';
55 |
56 | const jsonFileList = readJsonFiles(path.join(__dirname, '..', 'meta'));
57 |
58 | const initDb = async () => {
59 | // 获取已存在的集合列表
60 | let result = await client.getCollections();
61 |
62 | // 提取集合名称
63 | const collectionNames = result.collections.map(
64 | (collection) => collection.name,
65 | );
66 |
67 | // 如果集合已存在，则删除它
68 | if (collectionNames.includes(collectionName)) {
69 | await client.deleteCollection(collectionName);
70 | }
71 |
72 | // 创建新的集合
73 | await client.createCollection(collectionName, {
74 | vectors: {
75 | size: 1536,
76 | distance: 'Euclid',
77 | },
78 | optimizers_config: {
79 | default_segment_number: 2,
80 | },
81 | replication_factor: 2,
82 | });
83 | result = await client.getCollections();
84 |
85 | console.log('集合列表:', result.collections);
86 |
87 | // 创建 'text' 字段的索引
88 | await client.createPayloadIndex(collectionName, {
89 | field_name: 'text',
90 | field_schema: 'keyword',
91 | wait: true,
92 | });
93 |
94 | // 创建 'url' 字段的索引
95 | await client.createPayloadIndex(collectionName, {
96 | field_name: 'url',
97 | field_schema: 'keyword',
98 | wait: true,
99 | });
100 | };
101 |
102 | await initDb();
103 | let count = 0;
104 | for await (const file of jsonFileList) {
105 | count++;
106 | const json = JSON.parse(fs.readFileSync(file, 'utf-8'));
107 | console.log('正在处理', `(${count}/${jsonFileList.length}`);
108 | let index = 0;
109 | for await (const api of json) {
110 | index++;
111 | console.log('正在处理', `(${index}/${json.length}`);
112 | const vector = await genEmbedding(api);
113 | const mdVector = await genEmbedding({
114 | title: api.md,
115 | });
116 |
117 | await client.upsert(collectionName, {
118 | points: [
119 | {
120 | id: count * 100 + index * 10 + 1,
121 | vector,
122 | payload: {
123 | text: api.title + '\n' + api.md,
124 | url: file,
125 | },
126 | },
127 | {
128 | id: count * 100 + index * 10 + 2,
129 | vector: mdVector,
130 | payload: {
131 | text: api.title + '\n' + api.md,
132 | url: file,
133 | },
134 | },
135 | ],
136 | });
137 | }
138 | }
139 |
--------------------------------------------------------------------------------
/scripts/readChange.mjs:
--------------------------------------------------------------------------------
1 | import fs from 'fs';
2 | import path from 'path';
3 | import { remark } from 'remark';
4 | import remarkGfm from 'remark-gfm';
5 | import parse from 'remark-parse';
6 | import { unified } from 'unified';
7 | import { visit } from 'unist-util-visit';
8 | import { fileURLToPath } from 'url';
9 |
10 | // 获取当前脚本所在目录路径
11 | const __dirname = path.dirname(fileURLToPath(import.meta.url));
12 |
13 | const processor = unified().use(parse).use(remarkGfm, { singleTilde: false });
14 |
15 | /**
16 | * 解析变更日志并生成CHANGELOG.md文件。
17 | * @param {string[]} fileList - 包含变更日志文件路径的数组。
18 | * @param {string} packageName - 包名。
19 | */
20 | const parseChangeLog = (fileList, packageName) => {
21 | fileList.forEach((file) => {
22 | const fileContent = fs.readFileSync(file, 'utf-8');
23 | // 解析Markdown为抽象语法树（AST）
24 | const ast = processor.parse(fileContent);
25 | // 提取表格数据
26 | const changelogData = [];
27 | visit(ast, (node) => {
28 | if (node.type === 'heading' && node.depth === 2) {
29 | const versionTitle = remark
30 | .stringify(node.children[0])
31 | .replace(/\n/g, '')
32 | .trim();
33 |
34 | changelogData.push({
35 | version: versionTitle,
36 | content: '',
37 | });
38 | return;
39 | }
40 | if (!changelogData.at(-1)) {
41 | return;
42 | }
43 | if (node.type === 'inlineCode') {
44 | const time = remark
45 | .stringify(node)
46 | .replace(/\n/g, '')
47 | .trim()
48 | .replace('###', '');
49 | if (/^\d{4}-\d{2}-\d{2}$/.test(time.replaceAll('`', ''))) {
50 | changelogData.at(-1).time = time;
51 | }
52 |
53 | return;
54 | }
55 | if (node.type === 'list') {
56 | changelogData.at(-1).content = remark.stringify(node);
57 | return;
58 | }
59 | });
60 |
61 | const changeMd = changelogData
62 | .filter((item) => item.content && item.time)
63 | .map((item) => {
64 | return `### 在 ${item.time} 更新的 \`${item.version}\` 版本更新了什么？
65 |
66 | ${item.content}
67 | `;
68 | })
69 | .join('\n');
70 |
71 | fs.writeFileSync(
72 | path.join(__dirname, '..', 'docs', packageName, 'CHANGELOG.md'),
73 | changeMd,
74 | );
75 | });
76 | };
77 |
78 | parseChangeLog(['pro-components/docs/changelog.en-US.md'], 'pro-components');
79 |
80 | parseChangeLog(['ant-design/CHANGELOG.zh-CN.md'], 'ant-design');
81 |
--------------------------------------------------------------------------------