feat(design): Add Divider docs

.dumirc.ts

@@ -143,6 +143,7 @@ export default defineConfig({
         {
           title: '布局',
           children: [
+            { title: 'Divider 分割线', link: '/components/divider' },
             { title: 'Grid 栅格', link: '/components/grid' },
             { title: 'Space 间距', link: '/components/space' },
           ],

packages/design/src/divider/demo/horizontal.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Divider } from 'antd';
+
+const App: React.FC = () => (
+  <>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
+      probare, quae sunt a te dicta? Refert tamen, quo modo.
+    </p>
+    <Divider />
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
+      probare, quae sunt a te dicta? Refert tamen, quo modo.
+    </p>
+  </>
+);
+
+export default App;

packages/design/src/divider/demo/vertical.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Divider } from '@oceanbase/design';
+
+const App: React.FC = () => (
+  <>
+    Text
+    <Divider type="vertical" />
+    <a href="#">Link</a>
+    <Divider type="vertical" />
+    <a href="#">Link</a>
+  </>
+);
+
+export default App;

packages/design/src/divider/index.md

@@ -0,0 +1,21 @@
+---
+title: Divider 分割线
+nav:
+  title: 基础组件
+  path: /components
+demo:
+  cols: 2
+---
+
+- 🔥 完全继承 antd [Divider](https://ant.design/components/divider-cn/) 的能力和 API，可无缝切换。
+- 💄 定制主题和样式，符合 OceanBase Design 设计规范。
+
+## 代码演示
+
+<!-- prettier-ignore -->
+<code src="./demo/horizontal.tsx" title="默认为水平分割线"></code>
+<code src="./demo/vertical.tsx" title="垂直分割线" description='通过 `type="vertical"` 设置为垂直分割线'></code>
+
+## API
+
+- 详见 antd Divider 文档: https://ant.design/components/divider-cn/

packages/design/src/grid/index.md

@@ -10,6 +10,14 @@ nav:
 
 ## 代码演示
 
-<code src="./demo/basic.tsx" title="基础栅格" description="使用单一的一组 Row 和 Col 栅格组件，就可以创建一个基本的栅格系统，所有列（Col）必须放在 Row 内。"></code> <code src="./demo/gutter.tsx" title="区块栅格" description="栅格常常需要和间隔进行配合，你可以使用 Row 的 gutter 属性，我们推荐使用 (16+8n)px 作为栅格间隔(n 是自然数)。"></code><code src="./demo/offset.tsx" title="左右偏移" description="使用 offset 可以将列向右侧偏。例如，offset={4} 将元素向右侧偏移了 4 个列（column）的宽度。"></code><code src="./demo/flex.tsx" title="排版" description="子元素根据不同的值 start、center、end、space-between、space-around 和 space-evenly，分别定义其在父节点里面的排版方式。"></code>
+<code src="./demo/basic.tsx" title="基础栅格" description="使用单一的一组 Row 和 Col 栅格组件，就可以创建一个基本的栅格系统，所有列（Col）必须放在 Row 内。"></code>
+
+<code src="./demo/gutter.tsx" title="区块栅格" description="栅格常常需要和间隔进行配合，你可以使用 Row 的 gutter 属性，我们推荐使用 (16+8n)px 作为栅格间隔(n 是自然数)。"></code>
+
+<code src="./demo/offset.tsx" title="左右偏移" description="使用 offset 可以将列向右侧偏。例如，offset={4} 将元素向右侧偏移了 4 个列（column）的宽度。"></code>
+
+<code src="./demo/flex.tsx" title="排版" description="子元素根据不同的值 start、center、end、space-between、space-around 和 space-evenly，分别定义其在父节点里面的排版方式。"></code>
+
+## API
 
 - 详见 antd Grid 文档: https://ant.design/components/grid-cn/