feat(design): Add Progress docs and demos

.dumirc.ts

@@ -191,6 +191,7 @@ export default defineConfig({
             { title: 'Modal 对话框', link: '/components/modal' },
             { title: 'Drawer 抽屉', link: '/components/drawer' },
             { title: 'Notification 通知提醒框', link: '/components/notification' },
+            { title: 'Progress 进度条', link: '/components/progress' },
             { title: 'Result 结果', link: '/components/result' },
             { title: 'Skeleton 骨架屏', link: '/components/skeleton' },
             { title: 'Spin 加载中', link: '/components/spin' },

packages/design/src/badge/demo/dot.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Badge, Space } from '@oceanbase/design';
-import { NotificationOutlined } from '@ant-design/icons';
+import { NotificationOutlined } from '@oceanbase/icons';
 
 const App: React.FC = () => (
   <Space>

packages/design/src/input/demo/password.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input, Space } from 'antd';
+import { Input, Space } from '@oceanbase/design';
 
 const App: React.FC = () => {
   return (

packages/design/src/progress/demo/cicle-micro.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Flex, Progress } from '@oceanbase/design';
+
+const App: React.FC = () => (
+  <Flex align="center" gap="small">
+    <Progress
+      type="circle"
+      trailColor="#e6f4ff"
+      percent={60}
+      strokeWidth={20}
+      size={14}
+      format={number => `进行中，已完成${number}%`}
+    />
+    <span>应用发布</span>
+  </Flex>
+);
+
+export default App;

packages/design/src/progress/demo/circle-steps.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Flex, Progress, theme } from '@oceanbase/design';
+
+const App: React.FC = () => {
+  const { token } = theme.useToken();
+  return (
+    <Flex wrap gap="middle" style={{ marginTop: 16 }}>
+      <Progress
+        type="dashboard"
+        steps={8}
+        percent={50}
+        trailColor={token.colorFillSecondary}
+        strokeWidth={20}
+      />
+      <Progress
+        type="circle"
+        percent={100}
+        trailColor={token.colorFillSecondary}
+        steps={{ count: 5, gap: 7 }}
+        strokeWidth={20}
+      />
+    </Flex>
+  );
+};
+
+export default App;

packages/design/src/progress/demo/circle.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import { Flex, Radio, Space, Progress } from '@oceanbase/design';
+import type { ProgressSize } from '@oceanbase/design/es/progress';
+
+const App: React.FC = () => {
+  const [size, setSize] = useState<ProgressSize>('default');
+  return (
+    <>
+      <Space style={{ marginBottom: 16 }}>
+        Size:
+        <Radio.Group
+          value={size}
+          onChange={e => {
+            setSize(e.target.value);
+          }}
+        >
+          <Radio value="default">default</Radio>
+          <Radio value="small">small</Radio>
+        </Radio.Group>
+      </Space>
+      <Flex gap="small">
+        <Progress size={size} type="circle" percent={75} />
+        <Progress size={size} type="circle" percent={70} status="exception" />
+        <Progress size={size} type="circle" percent={100} />
+      </Flex>
+    </>
+  );
+};
+
+export default App;

packages/design/src/progress/demo/line.tsx

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import { Flex, Radio, Progress, Space } from '@oceanbase/design';
+import type { ProgressSize } from '@oceanbase/design/es/progress';
+
+const App: React.FC = () => {
+  const [size, setSize] = useState<ProgressSize>('default');
+  return (
+    <>
+      <Space style={{ marginBottom: 16 }}>
+        Size:
+        <Radio.Group
+          value={size}
+          onChange={e => {
+            setSize(e.target.value);
+          }}
+        >
+          <Radio value="default">default</Radio>
+          <Radio value="small">small</Radio>
+        </Radio.Group>
+      </Space>
+      <Flex gap="small" vertical>
+        <Progress size={size} percent={30} />
+        <Progress size={size} percent={50} status="active" />
+        <Progress size={size} percent={70} status="exception" />
+        <Progress size={size} percent={100} />
+      </Flex>
+    </>
+  );
+};
+
+export default App;

packages/design/src/progress/demo/steps.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Flex, Progress, theme } from '@oceanbase/design';
+
+const App: React.FC = () => {
+  const { token } = theme.useToken();
+  return (
+    <Flex gap="small" vertical>
+      <Progress percent={30} steps={3} />
+      <Progress percent={50} steps={5} />
+      <Progress percent={100} steps={5} size="small" strokeColor={token.colorSuccess} />
+      <Progress
+        percent={60}
+        steps={5}
+        strokeColor={[token.colorSuccess, token.colorSuccess, token.colorError]}
+      />
+    </Flex>
+  );
+};
+
+export default App;

packages/design/src/progress/index.md

@@ -0,0 +1,24 @@
+---
+title: Progress 进度条
+nav:
+  title: 基础组件
+  path: /components
+demo:
+  cols: 2
+---
+
+- 🔥 完全继承 antd [Progress](https://ant.design/components/progress-cn) 的能力和 API，可无缝切换。
+- 💄 定制主题和样式，符合 OceanBase Design 设计规范。
+
+## 代码演示
+
+<!-- prettier-ignore -->
+<code src="./demo/line.tsx" title="进度条"></code>
+<code src="./demo/circle.tsx" title="圆形进度条"></code>
+<code src="./demo/steps.tsx" title="步骤进度条"></code>
+<code src="./demo/circle-steps.tsx" title="圆形步骤进度条"></code>
+<code src="./demo/cicle-micro.tsx" title="圆形小型进度条" description="当圆形进度条 `width <= 20` 的时候，进度信息会以 Tooltip 的形式展示。"></code>
+
+## API
+
+- 详见 antd Progress 文档: https://ant.design/components/progress-cn

packages/design/src/progress/index.ts

@@ -1 +1,2 @@
+export * from 'antd/es/progress/progress';
 export * from 'antd/es/progress';

packages/design/src/progress/progress.ts

@@ -0,0 +1 @@
+export * from 'antd/es/progress/progress';

packages/design/src/switch/demo/text.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
+import { CheckOutlined, CloseOutlined } from '@oceanbase/icons';
 import { Space, Switch } from '@oceanbase/design';
 
 const App: React.FC = () => (

packages/design/src/switch/index.md

@@ -8,7 +8,7 @@ demo:
 ---
 
 - 🔥 完全继承 antd [Switch](https://ant.design/components/switch-cn) 的能力和 API，可无缝切换。
-- 💄 定制主题和样式，符合 OceanBase Design 设计规范，比如总是展示上下箭头。
+- 💄 定制主题和样式，符合 OceanBase Design 设计规范。
 
 ## 代码演示