diff --git a/.dumirc.ts b/.dumirc.ts index 7615538a9..8317d22b6 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -124,6 +124,10 @@ export default defineConfig({ { title: 'Typography 排版', link: '/components/typography' }, ], }, + { + title: '导航', + children: [{ title: 'Breadcrumb 面包屑', link: '/components/breadcrumb' }], + }, { title: '布局', children: [ diff --git a/docs/design/design-CHANGELOG.md b/docs/design/design-CHANGELOG.md index a7a0a795e..fbd0dba19 100644 --- a/docs/design/design-CHANGELOG.md +++ b/docs/design/design-CHANGELOG.md @@ -8,6 +8,13 @@ group: 基础组件 --- +## 0.3.4 + +`2024-05-11` + +- 💄 优化 Empty 步骤提示的背景颜色,以对齐设计规范。[#586](https://github.com/oceanbase/oceanbase-design/pull/587) +- 💄 将 Breadcrumb 字体大小改为 12px,以对齐设计规范。[#587](https://github.com/oceanbase/oceanbase-design/pull/587) + ## 0.3.3 `2024-04-25` diff --git a/docs/ui/ui-CHANGELOG.md b/docs/ui/ui-CHANGELOG.md index 863d58c71..20dcbb06f 100644 --- a/docs/ui/ui-CHANGELOG.md +++ b/docs/ui/ui-CHANGELOG.md @@ -8,6 +8,12 @@ group: 业务组件 --- +## 0.3.4 + +`2024-05-11` + +- 💄 调整 PageContainer 刷新图标的大小和间距,以对齐设计规范。[#588](https://github.com/oceanbase/oceanbase-design/pull/588) + ## 0.3.3 `2024-04-25` diff --git a/packages/codemod/package.json b/packages/codemod/package.json index 8cb29ed59..fe7985134 100644 --- a/packages/codemod/package.json +++ b/packages/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@oceanbase/codemod", - "version": "0.3.2", + "version": "0.3.3", "description": "Codemod for OceanBase Design upgrade", "keywords": [ "oceanbase", diff --git a/packages/design/package.json b/packages/design/package.json index 90172f002..e93c08e8d 100644 --- a/packages/design/package.json +++ b/packages/design/package.json @@ -1,6 +1,6 @@ { "name": "@oceanbase/design", - "version": "0.3.3", + "version": "0.3.4", "description": "The Design System of OceanBase", "keywords": [ "oceanbase", diff --git a/packages/design/src/breadcrumb/demo/basic.tsx b/packages/design/src/breadcrumb/demo/basic.tsx new file mode 100644 index 000000000..b8991de74 --- /dev/null +++ b/packages/design/src/breadcrumb/demo/basic.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { Breadcrumb } from '@oceanbase/design'; + +const App: React.FC = () => ( + +); + +export default App; diff --git a/packages/design/src/breadcrumb/demo/icon.tsx b/packages/design/src/breadcrumb/demo/icon.tsx new file mode 100644 index 000000000..1ad054329 --- /dev/null +++ b/packages/design/src/breadcrumb/demo/icon.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { Breadcrumb } from '@oceanbase/design'; +import { UserOutlined } from '@oceanbase/icons'; + +const App: React.FC = () => ( + + + User + + ), + }, + { + href: '', + title: 'User List', + }, + { + title: 'User Detail', + }, + ]} + /> +); + +export default App; diff --git a/packages/design/src/breadcrumb/demo/menu.tsx b/packages/design/src/breadcrumb/demo/menu.tsx new file mode 100644 index 000000000..9ee35980b --- /dev/null +++ b/packages/design/src/breadcrumb/demo/menu.tsx @@ -0,0 +1,45 @@ +import React, { useState } from 'react'; +import { Breadcrumb } from '@oceanbase/design'; + +const App: React.FC = () => { + const [selectedKey, setSelectedKey] = useState('1'); + const menuItems = [ + { + key: '1', + label: 'Jackson', + }, + { + key: '2', + label: 'John', + }, + { + key: '3', + label: 'Lucy', + }, + ]; + return ( + item.key === selectedKey).label, + menu: { + items: menuItems, + selectedKeys: [selectedKey], + onClick: ({ key }) => { + setSelectedKey(key); + }, + }, + }, + ]} + /> + ); +}; + +export default App; diff --git a/packages/design/src/breadcrumb/index.md b/packages/design/src/breadcrumb/index.md new file mode 100644 index 000000000..4548aeb27 --- /dev/null +++ b/packages/design/src/breadcrumb/index.md @@ -0,0 +1,22 @@ +--- +title: Breadcrumb 面包屑 +nav: + title: 基础组件 + path: /components +demo: + cols: 2 +--- + +- 🔥 完全继承 antd [Breadcrumb](https://ant.design/components/breadcrumb-cn) 的能力和 API,可无缝切换。 +- 💄 定制主题和样式,符合 OceanBase Design 设计规范。 + +## 代码演示 + + + + + + +## API + +- 详见 antd Breadcrumb 文档: https://ant.design/components/breadcrumb-cn diff --git a/packages/design/src/cascader/index.md b/packages/design/src/cascader/index.md index e798aad7a..10344d71d 100644 --- a/packages/design/src/cascader/index.md +++ b/packages/design/src/cascader/index.md @@ -18,4 +18,4 @@ demo: ## API -- 详见 antd InputNumber 文档: https://ant.design/components/input-number-cn +- 详见 antd Cascader 文档: https://ant.design/components/cascader-cn diff --git a/packages/design/src/empty/style/index.ts b/packages/design/src/empty/style/index.ts index f2d1120d3..9ee8a18a0 100644 --- a/packages/design/src/empty/style/index.ts +++ b/packages/design/src/empty/style/index.ts @@ -42,15 +42,16 @@ export const genEmptyStyle: GenerateStyle = (token: EmptyToken): CSS [`${antCls}-steps`]: { marginTop: token.margin, padding: token.paddingLG, - backgroundColor: colorBgLayout, + backgroundColor: token.colorFillQuaternary, borderRadius: token.borderRadiusLG, [`${antCls}-steps-item-container`]: { [`${antCls}-steps-item-icon`]: { height: token.controlHeightSM, width: token.controlHeightSM, lineHeight: `${token.controlHeightSM}px`, - backgroundColor: colorFill, - borderColor: colorFill, + backgroundColor: token.colorFillSecondary, + // override default border color + borderColor: token.colorFillSecondary, [`${antCls}-steps-icon`]: { color: colorTextSecondary, fontSize: token.fontSize, diff --git a/packages/design/src/theme/default.ts b/packages/design/src/theme/default.ts index 297d4dfe1..a6e97526e 100644 --- a/packages/design/src/theme/default.ts +++ b/packages/design/src/theme/default.ts @@ -81,6 +81,12 @@ const defaultTheme: ThemeConfig = { wireframe: false, }, components: { + Breadcrumb: { + fontSize: 12, + // @ts-ignore + // fontHeight is internal token + fontHeight: 20, + }, InputNumber: { handleVisible: true, }, diff --git a/packages/ui/package.json b/packages/ui/package.json index 40be205be..8db8fa798 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,6 +1,6 @@ { "name": "@oceanbase/ui", - "version": "0.3.3", + "version": "0.3.4", "description": "The UI library based on OceanBase Design", "keywords": [ "oceanbase", diff --git a/packages/ui/src/PageContainer/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/PageContainer/__tests__/__snapshots__/index.test.tsx.snap index 5dee956ae..32d4bac5b 100644 --- a/packages/ui/src/PageContainer/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/PageContainer/__tests__/__snapshots__/index.test.tsx.snap @@ -5,41 +5,8 @@ exports[`PageContainer > basic 1`] = ` class="ant-pro-page-container ant-pro-page-container-with-footer" >
-
@@ -52,39 +19,6 @@ exports[`PageContainer > basic 1`] = ` > 页面标题 - -
-
- - - -
-
-
basic 1`] = ` class="ant-pro-page-container-children-container" >
- - - +
+
-
+ + +
-
+
+
+ + + - - 创建人 - - - - 曲丽丽 - - - - - + - + - - - + + - - 关联表单 - - - - - 421421 - - - - - - + - + - - -
-
- + 创建人 + + + + 曲丽丽 + + +
+
- 电话号码 - - - - 1810000000 - - - - -
- + 电话号码 + + + + 1810000000 + + +
+
- 地址 - - - - 浙江省杭州市西湖区工专路 - - - -
-
+ 地址 + + + + 浙江省杭州市西湖区工专路 + + +
+
-
- + 关联表单 + + + + + 421421 + + + +
+
- 创建时间 - - - - 2017-01-10 - - - - -
- + 创建时间 + + + + 2017-01-10 + + +
+
- 备注 - - - - 这是备注 - - - -
+ + 备注 + + + + 这是备注 + + +
+
+
+
@@ -380,8 +331,7 @@ exports[`PageContainer > extra and footer 1`] = ` class="ant-page-header-heading-sub-title" >
extra and footer 1`] = ` class="ant-pro-page-container-children-container" >
- - - - + + +
-
+
+ + + - - 创建人 - - - - 曲丽丽 - - - - - + - + - - - + + - - 关联表单 - - - - - 421421 - - - - - - + - + - - -
-
- + 创建人 + + + + 曲丽丽 + + +
+
- 电话号码 - - - - 1810000000 - - - - -
- - 地址 - - + 电话号码 + + + + 1810000000 + + +
+
- - 浙江省杭州市西湖区工专路 - - - -
-
+ 地址 + + + + 浙江省杭州市西湖区工专路 + + +
+
-
- - 创建时间 - - + 关联表单 + + + + + 421421 + + + +
+
- - 2017-01-10 - - - - -
- - 备注 - - + 创建时间 + + + + 2017-01-10 + + +
+
- - 这是备注 - - - -
+ + 备注 + + + + 这是备注 + + +
+
+
+
diff --git a/packages/ui/src/PageContainer/demo/basic.tsx b/packages/ui/src/PageContainer/demo/basic.tsx index f60f581a7..59e62f5ad 100644 --- a/packages/ui/src/PageContainer/demo/basic.tsx +++ b/packages/ui/src/PageContainer/demo/basic.tsx @@ -1,54 +1,17 @@ /** * iframe: 600 */ -import React, { useState } from 'react'; -import { Button, Descriptions, Dropdown, message } from '@oceanbase/design'; +import React from 'react'; +import { Button, Card, Descriptions, Dropdown } from '@oceanbase/design'; import { PageContainer } from '@oceanbase/ui'; import { EllipsisOutlined } from '@oceanbase/icons'; export default () => { - const [loading, setLoading] = useState(false); - - const mockRequest = () => { - const promise = new Promise(resolve => { - setTimeout(() => { - resolve(); - }, 1000); - }); - setLoading(true); - promise.then(() => { - setLoading(false); - message.success('刷新成功'); - }); - return promise; - }; return ( { - mockRequest(); - }, - }, - breadcrumb: { - items: [ - { - href: '', - title: '一级页面', - }, - { - href: '', - title: '二级页面', - }, - { - title: '当前页面', - }, - ], - }, extra: [ , , ]} > - - 曲丽丽 - 1810000000 - 浙江省杭州市西湖区工专路 - - 421421 - - 2017-01-10 - 这是备注 - + + + 曲丽丽 + 1810000000 + 浙江省杭州市西湖区工专路 + + 421421 + + 2017-01-10 + 这是备注 + + ); }; diff --git a/packages/ui/src/PageContainer/demo/complete.tsx b/packages/ui/src/PageContainer/demo/complete.tsx index be52c4738..04e63b076 100644 --- a/packages/ui/src/PageContainer/demo/complete.tsx +++ b/packages/ui/src/PageContainer/demo/complete.tsx @@ -1,7 +1,16 @@ -import { EllipsisOutlined } from '@oceanbase/icons'; -import { Button, Card, Descriptions, Dropdown, Modal, message, Table } from '@oceanbase/design'; -import { PageContainer } from '@oceanbase/ui'; import React, { useState } from 'react'; +import { + Button, + Card, + Descriptions, + Dropdown, + Modal, + message, + Table, + Space, +} from '@oceanbase/design'; +import { PageContainer } from '@oceanbase/ui'; +import { EllipsisOutlined } from '@oceanbase/icons'; export default () => { const [loading, setLoading] = useState(false); @@ -106,6 +115,7 @@ export default () => { loading={loading} header={{ title: '页面标题', + onBack: () => {}, reload: { spin: loading, onClick: () => { @@ -174,31 +184,35 @@ export default () => { }} footer={[, ]} > - - 曲丽丽 - 1810000000 - 浙江省杭州市西湖区工专路 - - 421421 - - 2017-01-10 - 这是备注 - - - - + + + + 曲丽丽 + 1810000000 + 浙江省杭州市西湖区工专路 + + 421421 + + 2017-01-10 + 这是备注 + + + +
+ + ); }; diff --git a/packages/ui/src/PageContainer/demo/empty.tsx b/packages/ui/src/PageContainer/demo/empty.tsx index 5ee82a0b6..6110a9fe6 100644 --- a/packages/ui/src/PageContainer/demo/empty.tsx +++ b/packages/ui/src/PageContainer/demo/empty.tsx @@ -18,14 +18,11 @@ export default () => { display: 'flex', justifyContent: 'center', alignItems: 'center', - height: 'calc(100vh - 48px - 72px - 24px)', + height: 'calc(100vh - 72px - 24px)', }} > - 暂无数据} - image="https://mdn.alipayobjects.com/huamei_n8rchn/afts/img/A*GIGHRpu40ZoAAAAAAAAAAAAADvSFAQ/original" - > - + + diff --git a/packages/ui/src/PageContainer/demo/extra-footer.tsx b/packages/ui/src/PageContainer/demo/extra-footer.tsx index dad2569a2..71ed4549e 100644 --- a/packages/ui/src/PageContainer/demo/extra-footer.tsx +++ b/packages/ui/src/PageContainer/demo/extra-footer.tsx @@ -4,6 +4,7 @@ import React, { useState } from 'react'; import { Button, + Card, DatePicker, Descriptions, Dropdown, @@ -157,16 +158,18 @@ export default () => { , ]} > - - 曲丽丽 - 1810000000 - 浙江省杭州市西湖区工专路 - - 421421 - - 2017-01-10 - 这是备注 - + + + 曲丽丽 + 1810000000 + 浙江省杭州市西湖区工专路 + + 421421 + + 2017-01-10 + 这是备注 + + ); }; diff --git a/packages/ui/src/PageContainer/demo/with-tabs.tsx b/packages/ui/src/PageContainer/demo/with-tabs.tsx index 2b75053eb..c8df68a5d 100644 --- a/packages/ui/src/PageContainer/demo/with-tabs.tsx +++ b/packages/ui/src/PageContainer/demo/with-tabs.tsx @@ -3,7 +3,7 @@ */ import React, { useState } from 'react'; import { EllipsisOutlined } from '@oceanbase/icons'; -import { Button, Descriptions, Dropdown, Input, Radio, Tabs, message } from '@oceanbase/design'; +import { Button, Card, Dropdown, Tabs, message } from '@oceanbase/design'; import { PageContainer } from '@oceanbase/ui'; export default () => { @@ -77,19 +77,26 @@ export default () => { , ], }} - footer={[, ]} > + This is content of Tab 1 + + ), }, { key: '2', label: 'Tab 2', - children: 'This is content of Tab 2', + children: ( + + This is content of Tab 2 + + ), }, ]} tabBarExtraContent="This is tabBarExtraContent content" diff --git a/packages/ui/src/PageContainer/index.md b/packages/ui/src/PageContainer/index.md index 940ff7765..83b93d24c 100644 --- a/packages/ui/src/PageContainer/index.md +++ b/packages/ui/src/PageContainer/index.md @@ -13,14 +13,14 @@ nav: ## 代码演示 - + - - - + + + diff --git a/packages/ui/src/PageContainer/index.tsx b/packages/ui/src/PageContainer/index.tsx index 76e3a315c..90418376d 100644 --- a/packages/ui/src/PageContainer/index.tsx +++ b/packages/ui/src/PageContainer/index.tsx @@ -59,7 +59,7 @@ const PageContainer = ({ ); const newSubTitle = (reload || subTitle) && ( - + {reload && ( {isObject(reload) && React.isValidElement(reload) ? ( diff --git a/packages/ui/src/PageContainer/style/index.ts b/packages/ui/src/PageContainer/style/index.ts index 567fb9726..222d6dab1 100644 --- a/packages/ui/src/PageContainer/style/index.ts +++ b/packages/ui/src/PageContainer/style/index.ts @@ -39,9 +39,12 @@ export const genPageContainerStyle: GenerateStyle = ( }, [`${antCls}-page-header-heading-title`]: { fontSize: fontSizeHeading3, + marginInlineEnd: token.marginXS, }, [`${antCls}-page-header-heading-reload`]: { cursor: 'pointer', + fontSize: token.fontSizeLG, + marginTop: token.marginXXS, }, [`${antCls}-page-header-heading-extra`]: { height, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 06f9bfb7a..ec9467a0e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,4 +1,4 @@ -lockfileVersion: '6.0' +lockfileVersion: '6.1' settings: autoInstallPeers: true