Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature Branch] 🔥 feat(design): New design for Result #476

Merged
merged 6 commits into from
Feb 18, 2024
Merged

[Feature Branch] 🔥 feat(design): New design for Result #476

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3cfebc3
chore(deps): Upgrade deps
dengfuping Feb 6, 2024
0b12590
fix(ui): Ranger ts error
dengfuping Feb 6, 2024
2cbd0fa
fix(test): PageContainer snapshots
dengfuping Feb 6, 2024
f27857e
Merge branch 'feature' of github.com:oceanbase/oceanbase-design into …
dengfuping Feb 6, 2024
9cbf7e8
feat(design): New design for Result
dengfuping Feb 18, 2024
94c3ed8
Merge branch 'feature' of github.com:oceanbase/oceanbase-design into …
dengfuping Feb 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .dumirc.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,7 @@ export default defineConfig({
{ title: 'Modal 对话框', link: '/components/modal' },
{ title: 'Drawer 抽屉', link: '/components/drawer' },
{ title: 'Notification 通知提醒框', link: '/components/notification' },
{ title: 'Result 结果', link: '/components/result' },
{ title: 'Spin 加载中', link: '/components/spin' },
{ title: 'Badge 徽标数', link: '/components/badge' },
],
Expand Down
3 changes: 3 additions & 0 deletions packages/design/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,9 @@ export type { SegmentedProps } from './segmented';
export { default as Breadcrumb } from './breadcrumb';
export type { BreadcrumbProps, BreadcrumbItemProps } from './breadcrumb';

export { default as Result } from './result';
export type { ResultProps, ResultType, ResultStatusType } from './result';

export { default as Spin } from './spin';
export type { SpinProps } from './spin';

Expand Down
124 changes: 124 additions & 0 deletions packages/design/src/result/403.tsx
View file
Open in desktop

Large diffs are not rendered by default.

269 changes: 269 additions & 0 deletions packages/design/src/result/404.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,269 @@
import React from 'react';
import Icon from '@oceanbase/icons';
import type { CustomIconComponentProps } from '@oceanbase/icons/es/components/Icon';

const Svg404 = () => (
<svg
width="160px"
height="160px"
viewBox="0 0 160 160"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<ellipse id="path-1" cx="34.818724" cy="24.1269436" rx="11.9125" ry="32.8"></ellipse>
<ellipse id="path-3" cx="15.452048" cy="9.8598182" rx="4.1375" ry="15.0625"></ellipse>
</defs>
<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g>
<g>
<rect
fill="#0181FD"
fillRule="nonzero"
transform="translate(79.9561, 79.9561) rotate(-45) translate(-79.9561, -79.9561)"
x="23.4185993"
y="23.4185993"
width="113.075"
height="113.075"
rx="9.375"
></rect>
<g transform="translate(74.9398, 16.9811)" fill="#FFFFFF">
<path d="M1.2675486,0 L8.7300486,0 C9.4425486,0 10.0175486,0.575 10.0175486,1.2875 C10.0175486,1.325 10.0175486,1.3625 10.0175486,1.3875 L8.1800486,23.65 C8.1300486,24.3125 7.5675486,24.825 6.9050486,24.825 L3.1175486,24.825 C2.4550486,24.825 1.8925486,24.3125 1.8425486,23.65 L0.00504859767,1.3875 C-0.0574514023,0.6875 0.467548598,0.0625 1.1800486,0 C1.2175486,0 1.2550486,0 1.2800486,0 L1.2675486,0 Z"></path>
<rect
fillRule="nonzero"
x="1.9300486"
y="27.3125"
width="6.15"
height="6.15"
rx="1.2875"
></rect>
</g>
<g transform="translate(25.2579, 17.3935)">
<path
d="M22.9743998,31.93757 L14.6993998,21.00007 C14.4493998,20.66257 13.8493998,20.73757 13.4118998,21.15007 L9.94939985,24.46257 C9.51189985,24.87507 9.41189985,25.47507 9.73689985,25.73757 L20.2743998,34.52507 C20.5618998,34.76257 21.0868998,34.66257 21.4868998,34.28757 L22.6993998,33.13757 C23.0868998,32.76257 23.2118998,32.23757 22.9868998,31.93757 L22.9743998,31.93757 Z"
fill="#FFA005"
></path>
<path
d="M14.8618998,33.76257 L1.54939985,30.45007 C1.13689985,30.35007 0.724399847,30.77507 0.636899847,31.37507 L0.0118998472,36.12507 C-0.0631001528,36.72507 0.224399847,37.25007 0.649399847,37.25007 L14.3618998,37.47507 C14.7368998,37.47507 15.0868998,37.07507 15.1493998,36.53757 L15.3618998,34.87507 C15.4368998,34.33757 15.1993998,33.85007 14.8368998,33.76257 L14.8618998,33.76257 Z"
fill="#FFA005"
></path>
<g transform="translate(23.3994, 0)">
<g transform="translate(37.7544, 0)">
<ellipse
fill="#132039"
fillRule="nonzero"
transform="translate(37.9026, 16.4296) rotate(-64.52) translate(-37.9026, -16.4296)"
cx="37.9025702"
cy="16.4296397"
rx="10.1625"
ry="15.1"
></ellipse>
<ellipse
fill="#FFFFFF"
fillRule="nonzero"
transform="translate(34.8187, 24.1269) rotate(-66.22) translate(-34.8187, -24.1269)"
cx="34.818724"
cy="24.1269436"
rx="11.9125"
ry="32.8"
></ellipse>
<g id="Clipped">
<mask id="mask-2" fill="white">
<use transform="translate(34.8187, 24.1269) rotate(-66.22) translate(-34.8187, -24.1269)"></use>
</mask>
<g transform="translate(34.8187, 24.1269) rotate(-66.22) translate(-34.8187, -24.1269)"></g>
<path
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)"
></path>
</g>
<ellipse
fill="#F2F2F2"
fillRule="nonzero"
transform="translate(32.4969, 28.0548) rotate(-66.22) translate(-32.4969, -28.0548)"
cx="32.496932"
cy="28.0547542"
rx="4.1375"
ry="15.0625"
></ellipse>
<g id="Clipped" transform="translate(17.0449, 18.1949)">
<mask id="mask-4" fill="white">
<use transform="translate(15.452, 9.8598) rotate(-66.22) translate(-15.452, -9.8598)"></use>
</mask>
<g transform="translate(15.452, 9.8598) rotate(-66.22) translate(-15.452, -9.8598)"></g>
<ellipse
fill="#132039"
fillRule="nonzero"
mask="url(#mask-4)"
transform="translate(15.0168, 10.8584) rotate(-66.22) translate(-15.0168, -10.8584)"
cx="15.0167984"
cy="10.8583602"
rx="4.1375"
ry="15.0625"
></ellipse>
</g>
<ellipse
fill="#07C846"
fillRule="nonzero"
transform="translate(12.5525, 14.7215) rotate(-66.22) translate(-12.5525, -14.7215)"
cx="12.5524632"
cy="14.7215446"
rx="1"
ry="2.1"
></ellipse>
<ellipse
fill="#07C846"
fillRule="nonzero"
transform="translate(22.7155, 14.9902) rotate(-66.22) translate(-22.7155, -14.9902)"
cx="22.7154602"
cy="14.9901828"
rx="1"
ry="2.2125"
></ellipse>
<ellipse
fill="#07C846"
fillRule="nonzero"
transform="translate(56.5394, 34.0083) rotate(-66.22) translate(-56.5394, -34.0083)"
cx="56.5393625"
cy="34.0082818"
rx="1"
ry="1.7625"
></ellipse>
<ellipse
fill="#07C846"
fillRule="nonzero"
transform="translate(49.3038, 26.501) rotate(-66.22) translate(-49.3038, -26.501)"
cx="49.3037824"
cy="26.5010257"
rx="1"
ry="2.125"
></ellipse>
<ellipse
fill="#07C846"
fillRule="nonzero"
transform="translate(36.9344, 19.2406) rotate(-66.22) translate(-36.9344, -19.2406)"
cx="36.9344239"
cy="19.2405677"
rx="1"
ry="2.975"
></ellipse>
</g>
<polygon
fill="#07C846"
fillRule="nonzero"
points="61.475 25.41257 0.325 99.27507 62.575 100.36257 77.825 32.66257"
></polygon>
<ellipse
fill="#00A146"
fillRule="nonzero"
transform="translate(69.598, 29.133) rotate(-66.22) translate(-69.598, -29.133)"
cx="69.5979965"
cy="29.1330373"
rx="1.775"
ry="8.95"
></ellipse>
<ellipse
fill="#132039"
fillRule="nonzero"
cx="31.2875"
cy="100.10007"
rx="31.2875"
ry="5.725"
></ellipse>
</g>
<g transform="translate(9.8468, 37.4573)" fillRule="nonzero">
<rect
fill="#FFFFFF"
transform="translate(38.3302, 31.1054) rotate(13.39) translate(-38.3302, -31.1054)"
x="4.63020562"
y="7.15537986"
width="67.4"
height="47.9"
rx="3.7125"
></rect>
<g transform="translate(4.4808, 12.6065)" fill="#F2F2F2">
<rect
transform="translate(36.4816, 8.2812) rotate(13.39) translate(-36.4816, -8.2812)"
x="6.15660249"
y="6.98743755"
width="60.65"
height="2.5875"
rx="0.6375"
></rect>
<rect
transform="translate(34.8099, 15.3145) rotate(13.39) translate(-34.8099, -15.3145)"
x="4.48490416"
y="14.020739"
width="60.65"
height="2.5875"
rx="0.6375"
></rect>
<rect
transform="translate(33.1286, 22.3356) rotate(13.39) translate(-33.1286, -22.3356)"
x="2.80360055"
y="21.0418802"
width="60.65"
height="2.5875"
rx="0.6375"
></rect>
<rect
transform="translate(31.4691, 29.3843) rotate(13.39) translate(-31.4691, -29.3843)"
x="1.14406243"
y="28.0905764"
width="60.65"
height="2.5875"
rx="0.6375"
></rect>
<rect
transform="translate(29.8003, 36.4055) rotate(13.39) translate(-29.8003, -36.4055)"
x="-0.524741177"
y="35.1117176"
width="60.65"
height="2.5875"
rx="0.6375"
></rect>
</g>
<path
d="M12.9229845,7.69069069 L72.8979845,7.69069069 C74.9479845,7.69069069 76.6104845,9.35319069 76.6104845,11.4031907 L76.6104845,16.0406907 L9.2104845,16.0406907 L9.2104845,11.4031907 C9.2104845,9.35319069 10.8729845,7.69069069 12.9229845,7.69069069 Z"
fill="#132039"
transform="translate(42.9105, 11.8657) rotate(13.39) translate(-42.9105, -11.8657)"
></path>
<circle fill="#FFFFFF" cx="14.4901053" cy="5.09272299" r="1.275"></circle>
<circle fill="#FFFFFF" cx="18.2776053" cy="6.00522299" r="1.275"></circle>
<circle fill="#FFFFFF" cx="22.0776053" cy="6.90522299" r="1.275"></circle>
</g>
</g>
</g>
<g transform="translate(60.1823, 76.3936)" fillRule="nonzero">
<circle fill="#FFA005" cx="12.55" cy="12.55" r="12.55"></circle>
<rect
fill="#FFFFFF"
transform="translate(12.5554, 12.5616) rotate(60.61) translate(-12.5554, -12.5616)"
x="11.0178965"
y="4.06785186"
width="3.075"
height="16.9875"
rx="1.5375"
></rect>
<rect
fill="#FFFFFF"
transform="translate(12.5384, 12.5554) rotate(150.61) translate(-12.5384, -12.5554)"
x="11.0008981"
y="4.06164654"
width="3.075"
height="16.9875"
rx="1.5375"
></rect>
</g>
</g>
</g>
</svg>
);

const Image404: React.FC = (props: Partial<CustomIconComponentProps>) => (
<Icon component={Svg404} {...props} />
);

export default Image404;
Loading
Loading