diff --git a/packages/design/src/empty/colored.tsx b/packages/design/src/empty/colored.tsx index 5b2cdd924..3a1fb34d1 100644 --- a/packages/design/src/empty/colored.tsx +++ b/packages/design/src/empty/colored.tsx @@ -15,14 +15,14 @@ const ColoredEmptyImg: React.FC = props => ( > ( - - + + - + ( > - - + + - + { diff --git a/packages/design/src/result/404.tsx b/packages/design/src/result/404.tsx index 093dca5c0..ec32402ba 100644 --- a/packages/design/src/result/404.tsx +++ b/packages/design/src/result/404.tsx @@ -68,7 +68,7 @@ const Svg404 = () => ( ry="32.8" > - + @@ -76,7 +76,7 @@ const Svg404 = () => ( d="M64.4080716,38.11257 C61.1330716,43.25007 46.5955716,42.33757 30.0205716,35.03757 C13.4455716,27.73757 2.79557161,17.55007 4.54557161,11.72507 C6.29557161,5.90007003 22.3330716,7.56257003 38.9080716,14.86257 C55.4830716,22.16257 68.1330716,32.28757 64.4080716,38.11257 L64.4080716,38.11257 Z" fill="#132039" fillRule="nonzero" - mask="url(#mask-2)" + mask="url(#oceanbase-design-result-404-mask-2)" > ( ry="15.0625" > - + ( > - + - + ( @@ -38,11 +38,11 @@ const ErrorSvg = () => ( > - - + + - + ( @@ -111,11 +111,11 @@ const ProcessingSvg = () => ( > - - + + - + ( @@ -32,12 +32,12 @@ const SuccessSvg = () => ( d="M33.125,0 L100.625,0 C118.875,0 133.75,14.875 133.75,33.125 L133.75,118.125 L33.125,118.125 C14.875,118.125 0,103.25 0,85 L0,33.125 C0,14.875 14.875,0 33.125,0 Z" fill="#0181FD" > - - - + + + - + ( d="M41,53.0637085 L57.25,47.6887085 C58.75,47.1887085 60.375,47.9387085 60.75,49.4387085 L61.5,51.6887085 C61.875,52.8137085 61.25,54.0637085 60.125,54.4387085 L43.375,60.0637085 C42.25,60.4387085 41,59.8137085 40.625,58.6887085 L39.625,55.8137085 C39.375,54.6887085 40,53.4387085 41,53.0637085 L41,53.0637085 Z" fill="#F2F2F2" > - - - + + + - - - + + + - - - + + + ( d="M52.875,73.6887085 L64,69.9387085 C64.875,69.5637085 65.875,70.1887085 66.25,71.0637085 L67.25,74.1887085 C67.75,75.5637085 67,77.1887085 65.5,77.5637085 L55.25,80.9387085 C53.75,81.4387085 52,80.5637085 51.5,79.0637085 L50.875,77.3137085 C50.5,75.8137085 51.375,74.1887085 52.875,73.6887085 Z" fill="#F2F2F2" > - - - + + + ( @@ -24,11 +24,11 @@ const WarningSvg = () => ( fillRule="nonzero" > - - + + - + { ]} > 出错原因 - - {`Error1: Failed to load Stripe-js at HTMLScriptElement. sanonymous> (727.93344492.async.is:1:7397) - Error2: Failed to load Stripe-js at HTMLScriptElement. sanonymous> (727.93344492.async.is:1:7397) - Error3: Failed to load Stripe-js at HTMLScriptElement. sanonymous> (727.93344492.async.is:1:7397) - Error4: Failed to load Stripe-js at HTMLScriptElement. sanonymous> (727.93344492.async.is:1:7397)`} - +
+ { + 'Error1: Failed to load Stripe-js at HTMLScriptElement. sanonymous> (727.93344492.async.is:1:7397)' + } +
+
+ { + 'Error2: Failed to load Stripe-js at HTMLScriptElement. sanonymous> (727.93344492.async.is:1:7397)' + } +
+
+ { + 'Error3: Failed to load Stripe-js at HTMLScriptElement. sanonymous> (727.93344492.async.is:1:7397)' + } +
+
+ { + 'Error4: Failed to load Stripe-js at HTMLScriptElement. sanonymous> (727.93344492.async.is:1:7397)' + } +
+ ); }; diff --git a/packages/design/src/result/demo/with-page-container.tsx b/packages/design/src/result/demo/with-page-container.tsx new file mode 100644 index 000000000..d1339031d --- /dev/null +++ b/packages/design/src/result/demo/with-page-container.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { Button, Card, Result } from '@oceanbase/design'; +import { PageContainer } from '@oceanbase/ui'; + +export default () => { + return ( + + + + 主操作 + , + , + ]} + /> + + + ); +}; diff --git a/packages/design/src/result/index.md b/packages/design/src/result/index.md index 3dc4f1f38..726905453 100644 --- a/packages/design/src/result/index.md +++ b/packages/design/src/result/index.md @@ -27,6 +27,8 @@ nav: + + ## API | 参数 | 说明 | 类型 | 默认值 | 版本 | diff --git a/packages/design/src/result/style/index.ts b/packages/design/src/result/style/index.ts index e0c9b4097..fc2d58f4e 100644 --- a/packages/design/src/result/style/index.ts +++ b/packages/design/src/result/style/index.ts @@ -5,7 +5,14 @@ import { genComponentStyleHook } from '../../_util/genComponentStyleHook'; export type ResultToken = FullToken<'Result'>; export const genResultStyle: GenerateStyle = (token: ResultToken): CSSObject => { - return {}; + const { componentCls } = token; + return { + [`${componentCls}`]: { + [`${componentCls}-content`]: { + padding: token.paddingLG, + }, + }, + }; }; export default (prefixCls: string) => { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c40e4fc95..d7e9c557c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -88,7 +88,7 @@ importers: version: 1.2.2(react@18.2.0) antd: specifier: ^5.15.1 - version: 5.15.1(moment@2.30.1)(react-dom@18.2.0)(react@18.2.0) + version: 5.15.1(react-dom@18.2.0)(react@18.2.0) antd-style: specifier: ^3.6.1 version: 3.6.1(@types/react@18.2.64)(antd@5.15.1)(react-dom@18.2.0)(react@18.2.0) @@ -8116,7 +8116,7 @@ packages: '@emotion/serialize': 1.1.3 '@emotion/server': 11.11.0(@emotion/css@11.11.2) '@emotion/utils': 1.2.1 - antd: 5.15.1(moment@2.30.1)(react-dom@18.2.0)(react@18.2.0) + antd: 5.15.1(react-dom@18.2.0)(react@18.2.0) react: 18.2.0 use-merge-value: 1.2.0(react@18.2.0) transitivePeerDependencies: @@ -8166,7 +8166,7 @@ packages: '@arvinxu/layout-kit': 1.4.0(@babel/core@7.24.0)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0) '@babel/runtime': 7.24.0 '@ctrl/tinycolor': 3.6.1 - antd: 5.15.1(moment@2.30.1)(react-dom@18.2.0)(react@18.2.0) + antd: 5.15.1(react-dom@18.2.0)(react@18.2.0) classnames: 2.5.1 rc-util: 5.38.2(react-dom@18.2.0)(react@18.2.0) react: 18.2.0 @@ -8356,6 +8356,69 @@ packages: - date-fns - luxon - moment + dev: false + + /antd@5.15.1(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-wPoydYS63jikgHEBhiEu+IoLXwyrDlDpbV68PCPXs3sa+nthvJOpvaV/0tfrkStkpc8WsBtsJfe9Lx7AUor5Rg==} + peerDependencies: + react: '>=16.9.0' + react-dom: '>=16.9.0' + dependencies: + '@ant-design/colors': 7.0.2 + '@ant-design/cssinjs': 1.18.4(react-dom@18.2.0)(react@18.2.0) + '@ant-design/icons': 5.3.1(react-dom@18.2.0)(react@18.2.0) + '@ant-design/react-slick': 1.0.2(react@18.2.0) + '@babel/runtime': 7.24.0 + '@ctrl/tinycolor': 3.6.1 + '@rc-component/color-picker': 1.5.2(react-dom@18.2.0)(react@18.2.0) + '@rc-component/mutate-observer': 1.1.0(react-dom@18.2.0)(react@18.2.0) + '@rc-component/tour': 1.12.3(react-dom@18.2.0)(react@18.2.0) + '@rc-component/trigger': 1.18.3(react-dom@18.2.0)(react@18.2.0) + classnames: 2.5.1 + copy-to-clipboard: 3.3.3 + dayjs: 1.11.10 + qrcode.react: 3.1.0(react@18.2.0) + rc-cascader: 3.22.0(react-dom@18.2.0)(react@18.2.0) + rc-checkbox: 3.2.0(react-dom@18.2.0)(react@18.2.0) + rc-collapse: 3.7.2(react-dom@18.2.0)(react@18.2.0) + rc-dialog: 9.4.0(react-dom@18.2.0)(react@18.2.0) + rc-drawer: 7.1.0(react-dom@18.2.0)(react@18.2.0) + rc-dropdown: 4.1.0(react-dom@18.2.0)(react@18.2.0) + rc-field-form: 1.42.1(react-dom@18.2.0)(react@18.2.0) + rc-image: 7.6.0(react-dom@18.2.0)(react@18.2.0) + rc-input: 1.4.3(react-dom@18.2.0)(react@18.2.0) + rc-input-number: 9.0.0(react-dom@18.2.0)(react@18.2.0) + rc-mentions: 2.10.1(react-dom@18.2.0)(react@18.2.0) + rc-menu: 9.12.4(react-dom@18.2.0)(react@18.2.0) + rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0) + rc-notification: 5.3.0(react-dom@18.2.0)(react@18.2.0) + rc-pagination: 4.0.4(react-dom@18.2.0)(react@18.2.0) + rc-picker: 4.2.1(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0) + rc-progress: 3.5.1(react-dom@18.2.0)(react@18.2.0) + rc-rate: 2.12.0(react-dom@18.2.0)(react@18.2.0) + rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0) + rc-segmented: 2.3.0(react-dom@18.2.0)(react@18.2.0) + rc-select: 14.12.1(react-dom@18.2.0)(react@18.2.0) + rc-slider: 10.5.0(react-dom@18.2.0)(react@18.2.0) + rc-steps: 6.0.1(react-dom@18.2.0)(react@18.2.0) + rc-switch: 4.1.0(react-dom@18.2.0)(react@18.2.0) + rc-table: 7.42.0(react-dom@18.2.0)(react@18.2.0) + rc-tabs: 14.0.0(react-dom@18.2.0)(react@18.2.0) + rc-textarea: 1.6.3(react-dom@18.2.0)(react@18.2.0) + rc-tooltip: 6.1.3(react-dom@18.2.0)(react@18.2.0) + rc-tree: 5.8.5(react-dom@18.2.0)(react@18.2.0) + rc-tree-select: 5.18.0(react-dom@18.2.0)(react@18.2.0) + rc-upload: 4.5.2(react-dom@18.2.0)(react@18.2.0) + rc-util: 5.39.1(react-dom@18.2.0)(react@18.2.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + scroll-into-view-if-needed: 3.1.0 + throttle-debounce: 5.0.0 + transitivePeerDependencies: + - date-fns + - luxon + - moment + dev: true /anymatch@3.1.3: resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==} @@ -10510,6 +10573,7 @@ packages: resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} engines: {node: '>=4'} hasBin: true + requiresBuild: true dev: true /cssfontparser@1.2.1: @@ -12879,6 +12943,7 @@ packages: /fill-range@7.0.1: resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==} engines: {node: '>=8'} + requiresBuild: true dependencies: to-regex-range: 5.0.1 @@ -14913,6 +14978,7 @@ packages: /is-extglob@2.1.1: resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==} engines: {node: '>=0.10.0'} + requiresBuild: true /is-finalizationregistry@1.0.2: resolution: {integrity: sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==} @@ -15037,6 +15103,7 @@ packages: /is-number@7.0.0: resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==} engines: {node: '>=0.12.0'} + requiresBuild: true /is-obj@1.0.1: resolution: {integrity: sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==} @@ -17919,6 +17986,7 @@ packages: /moment@2.30.1: resolution: {integrity: sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==} + dev: false /moo-color@1.0.3: resolution: {integrity: sha512-i/+ZKXMDf6aqYtBhuOcej71YSlbjT3wCO/4H1j8rPvxDJEifdwgg5MaFyu6iYAT8GBZJg2z0dkgK4YMzvURALQ==} @@ -21087,6 +21155,38 @@ packages: rc-util: 5.39.1(react-dom@18.2.0)(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) + dev: false + + /rc-picker@4.2.1(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-HU1ZdSEKE7CpH+3yBgFrhHipShqsExSr2VwqlDKILNMHBq2/pEyjOAj4fd1SPNcewm2sg+tw3LOsGYfTaZ0ABQ==} + engines: {node: '>=8.x'} + peerDependencies: + date-fns: '>= 2.x' + dayjs: '>= 1.x' + luxon: '>= 3.x' + moment: '>= 2.x' + react: '>=16.9.0' + react-dom: '>=16.9.0' + peerDependenciesMeta: + date-fns: + optional: true + dayjs: + optional: true + luxon: + optional: true + moment: + optional: true + dependencies: + '@babel/runtime': 7.24.0 + '@rc-component/trigger': 1.18.3(react-dom@18.2.0)(react@18.2.0) + classnames: 2.5.1 + dayjs: 1.11.10 + rc-overflow: 1.3.2(react-dom@18.2.0)(react@18.2.0) + rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0) + rc-util: 5.39.1(react-dom@18.2.0)(react@18.2.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: true /rc-progress@3.4.2(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-iAGhwWU+tsayP+Jkl9T4+6rHeQTG9kDz8JAHZk4XtQOcYN5fj9H34NXNEdRdZx94VUDHMqCb1yOIvi8eJRh67w==} @@ -24675,6 +24775,7 @@ packages: /to-regex-range@5.0.1: resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==} engines: {node: '>=8.0'} + requiresBuild: true dependencies: is-number: 7.0.0