Skip to content

Commit 8c6ad87

Browse files
dengfupingdengfuping
committed
feat(docs): Add component design docs for Alert, Button, Tabs, Table, Modal and DateRanger
1 parent 728d959 commit 8c6ad87

File tree

20 files changed

+6251
-14429
lines changed

20 files changed

+6251
-14429
lines changed

‎.dumi/hooks/useMenu.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import type { MenuProps } from '@oceanbase/design';
2-
import { Tag, theme } from '@oceanbase/design';
2+
import { Tag } from '@oceanbase/design';
33
import { Link, useFullSidebarData, useSidebarData } from 'dumi';
44
import React, { useMemo } from 'react';
5+
import queryString from 'query-string';
56
import useLocation from './useLocation';
67
import useSiteToken from './useSiteToken';
78
import { ISidebarGroup } from 'dumi/dist/client/theme-api/types';
@@ -13,7 +14,10 @@ export interface UseMenuOptions {
1314

1415
const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] => {
1516
const fullData = useFullSidebarData();
16-
const { pathname, search } = useLocation();
17+
const { pathname, search: allSearch } = useLocation();
18+
const { theme } = queryString.parse(allSearch);
19+
// sync theme query only when click menu
20+
const search = allSearch ? `?${queryString.stringify({ theme })}` : '';
1721
const sidebarData = useSidebarData();
1822
const { before, after } = options;
1923
const { token } = useSiteToken();
@@ -92,8 +96,6 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
9296
return childItems;
9397
};
9498

95-
console.log(sidebarItems);
96-
9799
return (
98100
sidebarItems?.reduce<Exclude<MenuProps['items'], undefined>>((result, group) => {
99101
if (group?.title) {
@@ -195,7 +197,6 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
195197
}, []) ?? []
196198
);
197199
}, [sidebarData, fullData, pathname, search, options]);
198-
console.log(menuItems);
199200

200201
return [menuItems, pathname];
201202
};

‎.dumi/rehypePlugin.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,8 @@ function rehypeAntd(): UnifiedTransformer<HastRoot> {
5858
node.tagName === 'Table' &&
5959
(/^packages\/design/.test(filename) ||
6060
/^packages\/ui/.test(filename) ||
61-
/^packages\/charts/.test(filename))
61+
/^packages\/charts/.test(filename)) &&
62+
!/\$tab-design/.test(filename)
6263
) {
6364
if (!node.properties) return;
6465
node.properties.className ??= [];

‎.dumi/theme/common/styles/Markdown.tsx

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const GlobalStyle: React.FC = () => {
1515
styles={css`
1616
.markdown {
1717
color: ${token.colorText};
18-
font-size: 14px;
18+
font-size: ${token.fontSize}px;
1919
line-height: 2;
2020
}
2121
@@ -525,6 +525,25 @@ const GlobalStyle: React.FC = () => {
525525
margin-bottom: 0;
526526
}
527527
}
528+
529+
.dumi-default-container.markdown[data-type='info'] {
530+
padding: ${token.padding}px ${token.paddingLG}px;
531+
background: ${token.colorBgLayout};
532+
> svg {
533+
display: none;
534+
}
535+
> h4 {
536+
display: none;
537+
}
538+
> section {
539+
font-size: ${token.fontSize}px;
540+
color: ${token.colorTextSecondary};
541+
}
542+
}
543+
544+
.dumi-default-container.markdown:not(:last-child) {
545+
margin-top: ${token.marginLG}px;
546+
}
528547
`}
529548
/>
530549
);

‎.dumi/theme/slots/ContentTabs/index.tsx

Lines changed: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useRouteMeta } from 'dumi';
66
import type { IContentTabsProps } from 'dumi/theme-default/slots/ContentTabs';
77
import type { TabsProps } from 'rc-tabs';
88

9-
const titleMap: Record<string, string> = {
9+
const titleMap: Record<string, ReactNode> = {
1010
design: '设计',
1111
};
1212

@@ -23,33 +23,28 @@ const ContentTabs: FC<IContentTabsProps> = ({ tabs, tabKey, onChange }) => {
2323

2424
const items: TabsProps['items'] = [
2525
{
26-
label: (
27-
<span>
28-
<CodeOutlined />
29-
开发
30-
</span>
31-
),
3226
key: 'development',
27+
label: '开发',
28+
icon: <CodeOutlined />,
3329
},
3430
];
31+
3532
tabs?.forEach(tab => {
3633
items.push({
37-
label: (
38-
<span>
39-
{iconMap[tab.key]}
40-
{titleMap[tab.key]}
41-
</span>
42-
),
4334
key: tab.key,
35+
label: titleMap[tab.key],
36+
icon: iconMap[tab.key],
4437
});
4538
});
4639

4740
return (
4841
<Tabs
42+
size="large"
4943
items={items}
5044
activeKey={tabKey || 'development'}
51-
onChange={key => onChange(tabs.find(tab => tab.key === key))}
52-
style={{ margin: '32px 0 -16px' }}
45+
onChange={key => onChange(tabs?.find(tab => tab.key === key))}
46+
// style={{ margin: '32px 0 -16px' }}
47+
style={{ marginBottom: -16 }}
5348
/>
5449
);
5550
};

‎.dumirc.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -251,8 +251,8 @@ export default defineConfig({
251251
title: 'ContentWithIcon 文字旁提示',
252252
link: '/biz-components/content-with-icon',
253253
},
254-
{ title: 'Ranger 日期时间选择', link: '/biz-components/ranger' },
255254
{ title: 'DateRanger 新版日期时间选择', link: '/biz-components/date-ranger' },
255+
{ title: 'Ranger 日期时间选择', link: '/biz-components/ranger' },
256256
{ title: 'TreeSearch 树搜索', link: '/biz-components/tree-search' },
257257
{ title: 'Password 密码输入框', link: '/biz-components/password' },
258258
{ title: 'Boundary 错误兜底', link: '/biz-components/boundary' },

‎docs/spec/language-symbol.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ order: 20
5151
</div>
5252
</div>
5353

54-
:::tips
54+
:::info
5555

5656
- 中文标点与其他字符间不加空格
5757
- 以下单位与数字间不使用空格：
@@ -106,7 +106,7 @@ order: 20
106106

107107
<strong>以下场景中不要使用句号:</strong>
108108

109-
:::tips
109+
:::info
110110

111111
1. 组件标题
112112
2. 邮件地址

‎docs/spec/ux-writing.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,9 @@ order: 18
6666
</div>
6767
</div>
6868

69-
:::tips 💡 按钮文案书写说明：
69+
:::info
70+
71+
💡 按钮文案书写说明：
7072

7173
- 以动词为开始，例如 Create Database
7274
- 文案保持精简，控制在1至2个词

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@
9595
"mockdate": "^3.0.5",
9696
"prettier": "^3.3.3",
9797
"prismjs": "^1.29.0",
98+
"query-string": "^9.1.1",
9899
"rc-checkbox": "^3.5.0",
99100
"rc-drawer": "^7.2.0",
100101
"rc-footer": "^0.6.8",

‎packages/design/src/alert/index.$tab-design.md

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
以横幅形式显示突出的信息和相关的可选操作。
2+
3+
![](https://mdn.alipayobjects.com/oceanbase_design/afts/img/3jjcQ6Q0uIIAAAAAAAAAAAAADv3-AQBr/original)
4+
5+
## 何时使用
6+
7+
用于显示重要、简洁的消息，为用户提供处理(或取消)的操作。告警是持久且非模态的，允许用户在任何时候忽略或与其交互，一次只能显示一条告警。
8+
9+
## 组件剖析
10+
11+
![](https://mdn.alipayobjects.com/oceanbase_design/afts/img/uWojT6FSMFAAAAAAAAAAAAAADv3-AQBr/original)
12+
13+
1. 容器
14+
2. 图标
15+
3. 标题（可选）
16+
4. 按钮（可选）
17+
5. 关闭（可选）
18+
6. 描述文字
19+
20+
### 容器
21+
22+
告警容器由竖色块+背景色+线框构成，色块与图标颜色一致，与背景色保持统一色系。
23+
24+
<div style="display: flex">
25+
<div>
26+
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/AkJHRo5qq1EAAAAAAAAAAAAADv3-AQBr/original" />
27+
<div class="image-description-center"></div>
28+
</div>
29+
<div>
30+
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/AUBqQK8YE1sAAAAAAAAAAAAADv3-AQBr/original" />
31+
<div class="image-description-center"></div>
32+
</div>
33+
</div>
34+
35+
### 图标
36+
37+
仅支持线性图标，于文字左侧辅助说明当前消息状态；图标颜色与容器左侧竖色块一致。
38+
39+
<div style="display: flex">
40+
<div style="width: 50%">
41+
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/Wf8pSKgj-IoAAAAAAAAAAAAADv3-AQBr/original" />
42+
<div class="image-description">使用线性图标，颜色与背景色对应</div>
43+
</div>
44+
<div style="width: 50%">
45+
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/9TWkQ4Ey51MAAAAAAAAAAAAADv3-AQBr/original" />
46+
<div class="image-description">应避免使用面性图标</div>
47+
</div>
48+
</div>
49+
50+
### 标题
51+
52+
标题为可选项，仅在需要强调场景使用。
53+
54+
<div style="display: flex">
55+
<div>
56+
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/4OVsRJwlRrcAAAAAAAAAAAAADv3-AQBr/original" />
57+
<div class="image-description">若使用标题，标题需明确表达场景及任务需求</div>
58+
</div>
59+
<div>
60+
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/-P8uRJlFY4QAAAAAAAAAAAAADv3-AQBr/original" />
61+
<div class="image-description">避免用默认信息等文字填充标题</div>
62+
</div>
63+
</div>
64+
65+
### 按钮
66+
67+
操作按钮不是必须项，可基于使用场景自行调整。
68+
69+
<div style="display: flex">
70+
<div style="width: 50%">
71+
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/0AEJRpNcdyQAAAAAAAAAAAAADv3-AQBr/original" />
72+
<div class="image-description">按钮需有明确行为描述</div>
73+
</div>
74+
<div style="width: 50%">
75+
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/82-EQ7wiDYUAAAAAAAAAAAAADv3-AQBr/original" />
76+
<div class="image-description">避免在其他位置放置按钮</div>
77+
</div>
78+
</div>
79+
80+
### 关闭
81+
82+
关闭按钮不是必须项，可基于使用场景自行调整。
83+
84+
<div style="display: flex">
85+
<div style="width: 50%">
86+
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/YMq4TKMqvgwAAAAAAAAAAAAADv3-AQBr/original" />
87+
<div class="image-description">强制性信息提示不需要提供关闭按钮</div>
88+
</div>
89+
<div style="width: 50%">
90+
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/sDM8Q68VvDMAAAAAAAAAAAAADv3-AQBr/original" />
91+
<div class="image-description">避免使用文字按钮作为关闭行为</div>
92+
</div>
93+
</div>
94+
95+
### 描述文字
96+
97+
描述应尽量保持简短，清晰。在宽度不够时，支持换行显示全部文字内容。
98+
99+
<div style="display: flex">
100+
<div style="width: 50%">
101+
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/2WguRqVzI6IAAAAAAAAAAAAADv3-AQBr/original" />
102+
<div class="image-description">文字显示完成</div>
103+
</div>
104+
<div style="width: 50%">
105+
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/_HupQrXrBqoAAAAAAAAAAAAADv3-AQBr/original" />
106+
<div class="image-description">避免由于宽度限制而省略文字</div>
107+
</div>
108+
</div>
109+
110+
## 告警状态
111+
112+
共有4种告警类型，分别为 `信息`、`警告`、`成功`、`错误`。
113+
114+
### 信息
115+
116+
默认状态下，页面中引导用户查看的额外说明信息。
117+
118+
![](https://mdn.alipayobjects.com/oceanbase_design/afts/img/0bnbS6U9fMcAAAAAAAAAAAAADv3-AQBr/original)
119+
120+
### 警告
121+
122+
页面警告提醒，不采取将对后续操作产生影响
123+
124+
![](https://mdn.alipayobjects.com/oceanbase_design/afts/img/svt2QrQ7IbkAAAAAAAAAAAAADv3-AQBr/original)
125+
126+
### 成功
127+
128+
提醒用户某项操作取得成功或已完成。
129+
130+
![](https://mdn.alipayobjects.com/oceanbase_design/afts/img/eac3R4hR8uQAAAAAAAAAAAAADv3-AQBr/original)
131+
132+
### 错误
133+
134+
页面报错提醒，对下一步操作产生直接影响，必须修复。
135+
136+
![](https://mdn.alipayobjects.com/oceanbase_design/afts/img/zOkWSaDPx68AAAAAAAAAAAAADv3-AQBr/original)
137+
138+
## 告警类型
139+
140+
共有3种告警类型，分别为 `带标题 VS 无标题`、`按钮 VS 链接`、`可关闭 VS 不可关闭`。
141+
142+
### 带标题 VS 无标题
143+
144+
标题可基于告警场景自行决定，非强制文字。
145+
146+
| 带标题 | 当有明确语意场景需要总结时 | ![](https://mdn.alipayobjects.com/oceanbase_design/afts/img/-6t4TIFulvgAAAAAAAAAAAAADv3-AQBr/original) |
147+
| --- | --- | --- |
148+
| 无标题 | 无明确场景概述，仅行动引导或简单提示时 | ![](https://mdn.alipayobjects.com/oceanbase_design/afts/img/vyB6SqC44xAAAAAAAAAAAAAADv3-AQBr/original) |
149+
150+
### 按钮 VS 链接
151+
152+
按钮为可选项，依据场景决定是否需要。支持「次级按钮」与「链接」，分别服务不同的业务场景与用户交互。
153+
154+
| 按钮 | 点击后告警关闭，行动立刻应用于当前页面。例如，同意某个条款 | ![](https://mdn.alipayobjects.com/oceanbase_design/afts/img/UI-rTaYXEgoAAAAAAAAAAAAADv3-AQBr/original) |
155+
| --- | --- | --- |
156+
| 链接 | 点击后打开新页面，弹窗，抽屉，且告警不自动关闭。例如，查看文档 | ![](https://mdn.alipayobjects.com/oceanbase_design/afts/img/liVERo_VoeMAAAAAAAAAAAAADv3-AQBr/original) |
157+
158+
### 可关闭 VS 不可关闭
159+
160+
可根据告警信息的内容与业务需要，决定是否给予用户关闭功能。
161+
162+
| 可关闭 | 软性提示，关闭后不影响用户任务 | ![](https://mdn.alipayobjects.com/oceanbase_design/afts/img/gW3NSZSzHJcAAAAAAAAAAAAADv3-AQBr/original) |
163+
| --- | --- | --- |
164+
| 不可关闭 | 必要提示，若关闭，用户当前任务无法顺利通过 | ![](https://mdn.alipayobjects.com/oceanbase_design/afts/img/ZJPCRLaGS2cAAAAAAAAAAAAADv3-AQBr/original) |
165+
166+
## 使用格式
167+
168+
### 按钮自适应
169+
170+
<div style="display: flex">
171+
<div>
172+
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/KDF9Q4KJk6kAAAAAAAAAAAAADv3-AQBr/original" />
173+
<div class="image-description">最多支持2个按钮。在文字多行时，始终与左侧图标保持顶部对齐</div>
174+
</div>
175+
<div>
176+
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/jk_-RbwTD88AAAAAAAAAAAAADv3-AQBr/original" />
177+
<div class="image-description">避免根据文字行数调整按钮位置</div>
178+
</div>
179+
</div>
180+
181+
### 容器自适应
182+
183+
默认宽度 600px, 实际宽度应与应用页面规则保持一致，可自行调小、调大。
184+
185+
<div style="display: flex; height: 200px">
186+
<div>
187+
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/O8SCT5suEtIAAAAAAAAAAAAADv3-AQBr/original" />
188+
<div class="image-description-center">自适应与表格居中对齐</div>
189+
</div>
190+
<div>
191+
<img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/tCbxTY-OjxIAAAAAAAAAAAAADv3-AQBr/original" />
192+
<div class="image-description-center">与表单一致，保持左侧对齐，不需要占满卡片</div>
193+
</div>
194+
</div>
195+
196+
## 相关资产
197+
198+
- [警告提示 Alert - Ant Design](https://ant.design/components/alert-cn)

‎packages/design/src/alert/index.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ nav:
55
path: /components
66
---
77

8+
## 组件说明
9+
810
- 🔥 完全继承 antd [Alert](https://ant.design/components/alert-cn) 的能力和 API，可无缝切换。
911
- 💄 定制主题和样式，符合 OceanBase Design 设计规范。
1012
- 🆕 新增 `ghost` 属性，支持透明背景。

0 commit comments

Comments
 (0)