Merge pull request #503 from oceanbase/dengfuping-feature-design

[Feature Branch] improve(design): Result image, style and demo
oceanbase · Mar 11, 2024 · 64c02eb · 64c02eb
2 parents 99e253b + f398077
commit 64c02eb
Show file tree

Hide file tree

Showing 13 changed files with 225 additions and 63 deletions.
diff --git a/packages/design/src/empty/colored.tsx b/packages/design/src/empty/colored.tsx
@@ -15,14 +15,14 @@ const ColoredEmptyImg: React.FC = props => (
   >
     <defs>
       <ellipse
-        id="path-1"
+        id="oceanbase-design-empty-colored-path-1"
         cx="62.2411374"
         cy="62.0341728"
         rx="62.2411374"
         ry="62.0341728"
       ></ellipse>
       <ellipse
-        id="path-3"
+        id="oceanbase-design-empty-colored-path-3"
         cx="34.7282761"
         cy="34.6127975"
         rx="34.7282761"
@@ -36,20 +36,20 @@ const ColoredEmptyImg: React.FC = props => (
             <rect x="0" y="0" width="160" height="160"></rect>
             <g transform="translate(10.6667, 0)">
               <g id="Clipped" transform="translate(15.5177, 17.1889)">
-                <mask id="mask-2" fill="white">
-                  <use xlinkHref="#path-1"></use>
+                <mask id="oceanbase-design-empty-colored-mask-2" fill="white">
+                  <use xlinkHref="#oceanbase-design-empty-colored-path-1"></use>
                 </mask>
                 <g></g>
                 <ellipse
                   fill="#0181FD"
                   fillRule="nonzero"
-                  mask="url(#mask-2)"
+                  mask="url(#oceanbase-design-empty-colored-mask-2)"
                   cx="62.2411374"
                   cy="62.0341728"
                   rx="62.2411374"
                   ry="62.0341728"
                 ></ellipse>
-                <g mask="url(#mask-2)">
+                <g mask="url(#oceanbase-design-empty-colored-mask-2)">
                   <g transform="translate(-8.1975, 47.8341)">
                     <g strokeWidth="1" fill="none" fillRule="evenodd">
                       <rect
@@ -247,11 +247,11 @@ const ColoredEmptyImg: React.FC = props => (
                   ></path>
                 </g>
                 <g id="Clipped" transform="translate(4.8927, 4.8552)">
-                  <mask id="mask-4" fill="white">
-                    <use xlinkHref="#path-3"></use>
+                  <mask id="oceanbase-design-empty-colored-mask-4" fill="white">
+                    <use xlinkHref="#oceanbase-design-empty-colored-path-3"></use>
                   </mask>
                   <g></g>
-                  <g mask="url(#mask-4)" fillRule="nonzero">
+                  <g mask="url(#oceanbase-design-empty-colored-mask-4)" fillRule="nonzero">
                     <g transform="translate(-45.2175, 16.1057)">
                       <rect
                         fill="#6ADE90"

diff --git a/packages/design/src/empty/demo/with-page-container.tsx b/packages/design/src/empty/demo/with-page-container.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Empty, Button, Card } from '@oceanbase/design';
+import { Button, Card, Empty } from '@oceanbase/design';
 import { PageContainer } from '@oceanbase/ui';
 
 export default () => {

diff --git a/packages/design/src/result/404.tsx b/packages/design/src/result/404.tsx
@@ -68,15 +68,15 @@ const Svg404 = () => (
                   ry="32.8"
                 ></ellipse>
                 <g id="Clipped">
-                  <mask id="mask-2" fill="white">
+                  <mask id="oceanbase-design-result-404-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)"
+                    mask="url(#oceanbase-design-result-404-mask-2)"
                   ></path>
                 </g>
                 <ellipse
@@ -89,14 +89,14 @@ const Svg404 = () => (
                   ry="15.0625"
                 ></ellipse>
                 <g id="Clipped" transform="translate(17.0449, 18.1949)">
-                  <mask id="mask-4" fill="white">
+                  <mask id="oceanbase-design-result-success-404-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)"
+                    mask="url(#oceanbase-design-result-success-404-4)"
                     transform="translate(15.0168, 10.8584) rotate(-66.22) translate(-15.0168, -10.8584)"
                     cx="15.0167984"
                     cy="10.8583602"

diff --git a/packages/design/src/result/500.tsx b/packages/design/src/result/500.tsx
@@ -44,11 +44,11 @@ const Svg500 = () => (
           ></rect>
         </g>
         <g id="Clipped" transform="translate(0, 0)">
-          <mask id="mask-2" fill="white">
+          <mask id="oceanbase-design-result-500-mask-2" fill="white">
             <use transform="translate(80, 80) rotate(-45) translate(-80, -80)"></use>
           </mask>
           <g transform="translate(80, 80) rotate(-45) translate(-80, -80)"></g>
-          <g mask="url(#mask-2)">
+          <g mask="url(#oceanbase-design-result-500-mask-2)">
             <g transform="translate(18.166, 42.1381)">
               <path
                 d="M99.5820637,41.2755382 L93.0288089,32.6666047 L3.2143341,32.6666047 C1.44520448,32.6666047 0.0124586593,34.0993505 0.0124586593,35.8684801 L0.0124586593,48.1278008 L78.0659591,48.1278008 L78.0659591,56.7367344 L116.301584,56.7367344 L116.301584,44.4774137 C116.301584,42.708284 114.868839,41.2755382 113.099709,41.2755382 L99.5820637,41.2755382 L99.5820637,41.2755382 Z"

diff --git a/packages/design/src/result/Error.tsx b/packages/design/src/result/Error.tsx
@@ -7,7 +7,7 @@ const ErrorSvg = () => (
     <defs>
       <path
         d="M33.1125,0.0125 L100.6125,0.0125 C118.8875,0.0125 133.725,14.85 133.725,33.125 L133.725,118.1 L33.1125,118.1 C14.8375,118.1 0,103.2625 0,84.9875 L0,33.1125 C0,14.8375 14.8375,0 33.1125,0 L33.1125,0.0125 Z"
-        id="path-1"
+        id="oceanbase-design-result-error-path-1"
       ></path>
     </defs>
     <g stroke="none" fill="none">
@@ -38,11 +38,11 @@ const ErrorSvg = () => (
           ></rect>
         </g>
         <g id="Clipped" transform="translate(14.9125, 13.75)">
-          <mask id="mask-2" fill="white">
-            <use href="#path-1"></use>
+          <mask id="oceanbase-design-result-error-mask-2" fill="white">
+            <use href="#oceanbase-design-result-error-path-1"></use>
           </mask>
           <g></g>
-          <g mask="url(#mask-2)">
+          <g mask="url(#oceanbase-design-result-error-mask-2)">
             <g transform="translate(10.4625, 25.15)">
               <path
                 d="M108.075,63.4125 L4.725,63.4125 L10.2125,55.3875 C10.825,54.4875 11.8375,53.9625 12.925,53.9625 L99.8625,53.9625 C100.95,53.9625 101.9625,54.5 102.575,55.3875 L108.0625,63.4125 L108.075,63.4125 Z"

diff --git a/packages/design/src/result/Processing.tsx b/packages/design/src/result/Processing.tsx
@@ -13,7 +13,7 @@ const ProcessingSvg = () => (
     <defs>
       <path
         d="M33.1125,0.0125 L100.6125,0.0125 C118.8875,0.0125 133.725,14.85 133.725,33.125 L133.725,118.1 L33.1125,118.1 C14.8375,118.1 4.4408921e-15,103.2625 4.4408921e-15,84.9875 L4.4408921e-15,33.1125 C4.4408921e-15,14.8375 14.8375,0 33.1125,0 L33.1125,0.0125 Z"
-        id="path-1"
+        id="oceanbase-design-result-processing-path-1"
       ></path>
     </defs>
     <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
@@ -111,11 +111,11 @@ const ProcessingSvg = () => (
           ></polygon>
         </g>
         <g id="Clipped" transform="translate(14.9125, 13.75)">
-          <mask id="mask-2" fill="white">
-            <use href="#path-1"></use>
+          <mask id="oceanbase-design-result-processing-mask-2" fill="white">
+            <use href="#oceanbase-design-result-processing-path-1"></use>
           </mask>
           <g></g>
-          <g mask="url(#mask-2)">
+          <g mask="url(#oceanbase-design-result-processing-mask-2)">
             <g transform="translate(31.5625, 35.9375)">
               <rect
                 fill="#132039"

diff --git a/packages/design/src/result/Success.tsx b/packages/design/src/result/Success.tsx
@@ -7,23 +7,23 @@ const SuccessSvg = () => (
     <defs>
       <path
         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"
-        id="path-1"
+        id="oceanbase-design-result-success-path-1"
       ></path>
       <path
         d="M1.43012646,5.5292612 L17.6801265,0.154261199 C19.1801265,-0.345738801 20.8051265,0.404261199 21.1801265,1.9042612 L21.9301265,4.1542612 C22.3051265,5.2792612 21.6801265,6.5292612 20.5551265,6.9042612 L3.80512646,12.5292612 C2.68012646,12.9042612 1.43012646,12.2792612 1.05512646,11.1542612 L0.0551264646,8.2792612 C-0.194873535,7.1542612 0.430126465,5.9042612 1.43012646,5.5292612 L1.43012646,5.5292612 Z"
-        id="path-3"
+        id="oceanbase-design-result-success-path-3"
       ></path>
       <path
         d="M1.89214041,4.7792612 L15.8921404,0.154261199 C17.3921404,-0.345738801 18.8921404,0.404261199 19.3921404,1.9042612 L20.2671404,4.4042612 C20.7671404,5.9042612 20.0171404,7.4042612 18.5171404,7.9042612 L4.51714041,12.5292612 C3.01714041,13.0292612 1.51714041,12.2792612 1.01714041,10.7792612 L0.142140412,8.2792612 C-0.357859588,6.9042612 0.517140412,5.2792612 1.89214041,4.7792612 Z"
-        id="path-5"
+        id="oceanbase-design-result-success-path-5"
       ></path>
       <path
         d="M2.02814371,4.73308102 L15.9031437,0.108081022 C17.1531437,-0.266918978 18.5281437,0.358081022 19.0281437,1.60808102 L20.0281437,4.60808102 C20.4031437,5.85808102 19.7781437,7.23308102 18.5281437,7.73308102 L4.65314371,12.358081 C3.02814371,12.858081 1.27814371,11.983081 0.778143715,10.483081 L0.153143715,8.60808102 C-0.346856285,6.98308102 0.403143715,5.23308102 2.02814371,4.73308102 Z"
-        id="path-7"
+        id="oceanbase-design-result-success-path-7"
       ></path>
       <path
         d="M2.08661279,3.86102208 L13.2116128,0.111022078 C14.0866128,-0.263977922 15.0866128,0.361022078 15.4616128,1.23602208 L16.4616128,4.36102208 C16.9616128,5.73602208 16.2116128,7.36102208 14.7116128,7.73602208 L4.46161279,11.1110221 C2.96161279,11.6110221 1.21161279,10.7360221 0.711612789,9.23602208 L0.0866127887,7.48602208 C-0.288387211,5.98602208 0.586612789,4.36102208 2.08661279,3.86102208 Z"
-        id="path-9"
+        id="oceanbase-design-result-success-path-9"
       ></path>
     </defs>
     <g stroke="none" fill="none">
@@ -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"
         ></path>
-        <g id="Clipped">
-          <mask id="mask-2" fill="white">
-            <use href="#path-1"></use>
+        <g>
+          <mask id="oceanbase-design-result-success-mask-2" fill="white">
+            <use href="#oceanbase-design-result-success-path-1"></use>
           </mask>
           <g></g>
-          <g mask="url(#mask-2)">
+          <g mask="url(#oceanbase-design-result-success-mask-2)">
             <g transform="translate(-8.125, 9.25)">
               <path
                 d="M6.75,0 L44,0 C47.75,0 50.75,3 50.75,6.75 L50.75,31.375 C50.75,35.125 47.75,38.125 44,38.125 L36.25,38.125 L36.25,46.25 C36.25,47.375 34.875,47.75 34.25,46.875 L28,38.125 L6.75,38.125 C3,38.125 0,35.125 0,31.375 L0,6.75 C0,3 3,0 6.75,0 Z"
@@ -83,45 +83,45 @@ const SuccessSvg = () => (
                     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"
                   ></path>
-                  <g id="Clipped" transform="translate(39.5699, 47.5344)">
-                    <mask id="mask-4" fill="white">
-                      <use href="#path-3"></use>
+                  <g transform="translate(39.5699, 47.5344)">
+                    <mask id="oceanbase-design-result-success-mask-4" fill="white">
+                      <use href="#oceanbase-design-result-success-path-3"></use>
                     </mask>
                     <g id="SVGID_00000136373575218028105800000015833068694952139445_"></g>
                     <path
                       d="M0.555126465,5.7792612 L11.8051265,2.0292612 C12.8051265,1.6542612 13.9301265,2.2792612 14.3051265,3.2792612 L15.5551265,7.0292612 C15.8051265,7.7792612 15.4301265,8.6542612 14.6801265,8.9042612 L2.93012646,12.7792612 C2.18012646,13.0292612 1.30512646,12.6542612 1.05512646,11.9042612 L-0.319873535,7.6542612 C-0.569873535,6.9042612 -0.194873535,6.0292612 0.555126465,5.7792612 Z"
                       fill="#D8D8D8"
-                      mask="url(#mask-4)"
+                      mask="url(#oceanbase-design-result-success-mask-4)"
                     ></path>
                   </g>
                   <path
                     d="M47.25,58.6887085 L61.25,54.0637085 C62.75,53.5637085 64.25,54.3137085 64.75,55.8137085 L65.625,58.3137085 C66.125,59.8137085 65.375,61.3137085 63.875,61.8137085 L49.875,66.4387085 C48.375,66.9387085 46.875,66.1887085 46.375,64.6887085 L45.5,62.1887085 C45,60.8137085 45.875,59.1887085 47.25,58.6887085 Z"
                     fill="#F2F2F2"
                   ></path>
-                  <g id="Clipped" transform="translate(45.3579, 53.9094)">
-                    <mask id="mask-6" fill="white">
-                      <use href="#path-5"></use>
+                  <g transform="translate(45.3579, 53.9094)">
+                    <mask id="oceanbase-design-result-success-mask-6" fill="white">
+                      <use href="#oceanbase-design-result-success-path-5"></use>
                     </mask>
                     <g id="SVGID_00000072260953934706606590000017879755367803290522_"></g>
                     <path
                       d="M-6.73285959,7.5292612 L8.76714041,2.4042612 C9.76714041,2.0292612 10.8921404,2.6542612 11.2671404,3.6542612 L12.6421404,7.7792612 C13.0171404,8.7792612 12.3921404,9.9042612 11.3921404,10.2792612 L-4.23285959,15.5292612 C-5.23285959,15.9042612 -6.35785959,15.2792612 -6.73285959,14.2792612 L-8.10785959,10.1542612 C-8.35785959,9.0292612 -7.73285959,7.9042612 -6.73285959,7.5292612 Z"
                       fill="#D8D8D8"
-                      mask="url(#mask-6)"
+                      mask="url(#oceanbase-design-result-success-mask-6)"
                     ></path>
                   </g>
                   <path
                     d="M49.25,66.5637085 L63.125,61.9387085 C64.375,61.5637085 65.75,62.1887085 66.25,63.4387085 L67.25,66.4387085 C67.625,67.6887085 67,69.0637085 65.75,69.5637085 L51.875,74.1887085 C50.25,74.6887085 48.5,73.8137085 48,72.3137085 L47.375,70.4387085 C46.875,68.8137085 47.625,67.0637085 49.25,66.5637085 Z"
                     fill="#F2F2F2"
                   ></path>
-                  <g id="Clipped" transform="translate(47.2219, 61.8306)">
-                    <mask id="mask-8" fill="white">
-                      <use href="#path-7"></use>
+                  <g transform="translate(47.2219, 61.8306)">
+                    <mask id="oceanbase-design-result-success-mask-8" fill="white">
+                      <use href="#oceanbase-design-result-success-path-7"></use>
                     </mask>
                     <g id="SVGID_00000019653314099838397220000000586077130363906990_"></g>
                     <path
                       d="M-5.09685629,7.10808102 L8.77814371,2.48308102 C10.0281437,2.10808102 11.4031437,2.73308102 11.9031437,3.98308102 L12.9031437,6.98308102 C13.2781437,8.23308102 12.6531437,9.60808102 11.4031437,10.108081 L-2.47185629,14.733081 C-4.09685629,15.233081 -5.84685629,14.358081 -6.34685629,12.858081 L-6.97185629,10.983081 C-7.59685629,9.35808102 -6.72185629,7.73308102 -5.09685629,7.10808102 Z"
                       fill="#D8D8D8"
-                      mask="url(#mask-8)"
+                      mask="url(#oceanbase-design-result-success-mask-8)"
                     ></path>
                   </g>
                   <polygon
@@ -132,15 +132,15 @@ const SuccessSvg = () => (
                     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"
                   ></path>
-                  <g id="Clipped" transform="translate(50.7884, 69.8277)">
-                    <mask id="mask-10" fill="white">
-                      <use href="#path-9"></use>
+                  <g transform="translate(50.7884, 69.8277)">
+                    <mask id="oceanbase-design-result-success-mask-10" fill="white">
+                      <use href="#oceanbase-design-result-success-path-9"></use>
                     </mask>
                     <g id="SVGID_00000091695442429382600100000003029485216806722220_"></g>
                     <path
                       d="M-3.66338721,5.73602208 L7.46161279,1.98602208 C8.33661279,1.61102208 9.33661279,2.23602208 9.71161279,3.11102208 L10.7116128,6.23602208 C11.2116128,7.61102208 10.4616128,9.23602208 8.96161279,9.61102208 L-1.28838721,12.9860221 C-2.78838721,13.4860221 -4.53838721,12.6110221 -5.03838721,11.1110221 L-5.53838721,9.48602208 C-6.16338721,7.86102208 -5.28838721,6.23602208 -3.66338721,5.73602208 Z"
                       fill="#D8D8D8"
-                      mask="url(#mask-10)"
+                      mask="url(#oceanbase-design-result-success-mask-10)"
                     ></path>
                   </g>
                   <path

diff --git a/packages/design/src/result/Warning.tsx b/packages/design/src/result/Warning.tsx
@@ -13,7 +13,7 @@ const WarningSvg = () => (
     <defs>
       <path
         d="M33.1125,0 L100.6125,0 C118.8875,0 133.725,14.8375 133.725,33.1125 L133.725,118.0875 L33.1125,118.0875 C14.8375,118.0875 -4.4408921e-15,103.25 -4.4408921e-15,84.975 L-4.4408921e-15,33.1125 C-4.4408921e-15,14.8375 14.8375,0 33.1125,0 Z"
-        id="path-1"
+        id="oceanbase-design-result-warning-path-1"
       ></path>
     </defs>
     <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
@@ -24,11 +24,11 @@ const WarningSvg = () => (
           fillRule="nonzero"
         ></path>
         <g id="Clipped" transform="translate(14.9125, 13.75)">
-          <mask id="mask-2" fill="white">
-            <use href="#path-1"></use>
+          <mask id="oceanbase-design-result-warning-mask-2" fill="white">
+            <use href="#oceanbase-design-result-warning-path-1"></use>
           </mask>
           <g></g>
-          <g mask="url(#mask-2)">
+          <g mask="url(#oceanbase-design-result-warning-mask-2)">
             <g transform="translate(-13.25, 47.0625)">
               <path
                 d="M76.075,40.3375 C85.7625,33.55 97.6875,18.85 104.2,0"