feat: update empty canvas style

Author: pomelo-nwu

packages/studio-components/src/EmptyCanvas/image.tsx

@@ -1,16 +1,17 @@
 import React from 'react';
 import { theme } from 'antd';
 
-export default () => {
+export default ({ style }: { style?: React.CSSProperties }) => {
   const { token } = theme.useToken();
-  const stroke = token.colorBgBase;
+  const stroke = token.colorBgLayout;
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 915 866" fill="none">
+    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 915 866" fill="none" style={style}>
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M552.085 623.067C491.189 655.842 482.589 745.72 418.484 770.756C352.941 796.353 259.359 798.915 226.164 750.352C189.108 696.141 291.287 607.551 265.559 547.035C237.793 481.726 101.961 496.952 88.3682 426.238C76.2288 363.085 150.831 297.41 208.118 248.21C263.376 200.753 332.496 162.372 402.856 156.147C468.399 150.348 511.091 201.87 571.612 216.049C633.101 230.454 738.7 185.557 759.412 239.679C782.973 301.247 654.143 363.856 654.328 432.195C654.506 498.496 794.484 523.038 760.348 586.766C727.485 648.115 617.062 588.097 552.085 623.067Z"
-        fill={token.colorText}
+        fill={token.colorBgLayout}
+        opacity={0.5}
       />
       <circle cx="595.876" cy="255.218" r="12.5406" transform="rotate(30 595.876 255.218)" fill={stroke} />
       <circle cx="724.312" cy="289.146" r="12.5406" transform="rotate(30 724.312 289.146)" fill={stroke} />

packages/studio-components/src/EmptyCanvas/index.tsx

@@ -18,16 +18,19 @@ const Empty: React.FunctionComponent<IEmptyProps> = props => {
         fontSize: '14px',
         height: '100%',
         width: '100%',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
       }}
     >
-      <Image />
+      <Image
+        style={{
+          position: 'absolute',
+          zIndex: 2,
+        }}
+      />
       <Typography.Text
         type="secondary"
         style={{
           position: 'absolute',
+          zIndex: 3,
         }}
       >
         {description}

packages/studio-website/src/layouts/index.tsx

@@ -49,9 +49,16 @@ export default function StudioLayout() {
           });
         }
       }
+      const graph_id = Utils.getSearchParams('graph_id');
+      if (graph_id === 'DRAFT_GRAPH') {
+        return {
+          graphs: res,
+          graphId: 'DRAFT_GRAPH',
+        };
+      }
       return {
         graphs: res,
-        graphId: (matchGraph && matchGraph.id) || '',
+        graphId: (matchGraph && matchGraph.id) || 'DRAFT_GRAPH',
       };
     });
   };