Skip to content

Commit

Permalink
[Feature Branch] 🔥 feat(design): New design for Empty (#476)
Browse files Browse the repository at this point in the history 
* feat(design): New design for Result
  • Loading branch information
@dengfuping
dengfuping authored Feb 18, 2024
1 parent f473d9c commit a981ce6
Show file tree
Hide file tree
Showing 21 changed files with 1,871 additions and 1 deletion.
1 change: 1 addition & 0 deletions .dumirc.ts
View file
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
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

Large diffs are not rendered by default.

269 changes: 269 additions & 0 deletions packages/design/src/result/404.tsx
View file
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

0 comments on commit a981ce6

Please sign in to comment.