GraphScope · pomelo-nwu · Oct 23, 2024 · Oct 21, 2024 · Oct 22, 2024 · Oct 22, 2024
diff --git a/packages/studio-components/src/Icons/FileExport.tsx b/packages/studio-components/src/Icons/FileExport.tsx
@@ -1,8 +1,15 @@
 import React from 'react';
 export default ({ style }: { style?: Record<string, string> }) => {
-  const { color = '#2c2c2c' } = style || { color: '#2c2c2c' };
+  const { color = '#2c2c2c', fontSize = '18px' } = style || { color: '#2c2c2c' };
   return (
-    <svg style={style} viewBox="0 0 1066 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+    <svg
+      style={style}
+      viewBox="0 0 1066 1024"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      width={fontSize}
+      height={fontSize}
+    >
       <path
         d="M935.253333 666.453333a49.066667 49.066667 0 0 0-8.96-14.08l-128-128a42.837333 42.837333 0 1 0-60.586666 60.586667l55.466666 55.04H554.666667a42.666667 42.666667 0 1 0 0 85.333333h238.506666l-55.466666 55.04a42.666667 42.666667 0 0 0 0 60.586667 42.666667 42.666667 0 0 0 60.586666 0l128-128a39.68 39.68 0 0 0 8.96-14.08 42.666667 42.666667 0 0 0 0-32.426667zM640 853.333333H298.666667a42.666667 42.666667 0 0 1-42.666667-42.666666V213.333333a42.666667 42.666667 0 0 1 42.666667-42.666666h213.333333v128a128 128 0 0 0 128 128h170.666667a42.666667 42.666667 0 0 0 39.253333-26.453334 42.666667 42.666667 0 0 0-8.96-46.506666l-256-256a45.653333 45.653333 0 0 0-11.946667-8.106667h-3.84l-11.946666-4.266667H298.666667a128 128 0 0 0-128 128v597.333334a128 128 0 0 0 128 128h341.333333a42.666667 42.666667 0 1 0 0-85.333334zM597.333333 230.826667L707.84 341.333333H640a42.666667 42.666667 0 0 1-42.666667-42.666666V230.826667z"
         fill={color}

diff --git a/packages/studio-components/src/Icons/Graph2D.tsx b/packages/studio-components/src/Icons/Graph2D.tsx
@@ -5,10 +5,17 @@ interface IGraph3DProps {
 }
 const Graph2D: React.FunctionComponent<IGraph3DProps> = props => {
   const { style } = props;
-  const { color } = style as { color: string };
+  const { color = '#000', fontSize = '18px' } = style as { color: string; fontSize: string };
   return (
     <div>
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" version="1.1" width="18" height="18" viewBox="0 0 180 180">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        version="1.1"
+        width={fontSize}
+        height={fontSize}
+        viewBox="0 0 180 180"
+      >
         <g>
           <path
             d="M82.0745,0.218048L86.8725,0C132.599,0,170.038,35.1852,173.672,79.8936L162.768,79.8936C160.223,52.5598,143.212,29.5148,119.441,18.2468L109.772,27.9155L82.0745,0.218048ZM78.3984,115.913L39.7104,115.913L39.7104,109.283C55.4664,95.2435,64.6703,84.4015,64.6703,75.4315C64.6703,69.7375,61.5504,66.1495,56.0124,66.1495C51.8004,66.1495,48.3683,68.8795,45.4824,72.0775L39.0864,65.9155C44.4684,60.1435,49.6164,57.1015,57.4944,57.1015C68.4144,57.1015,75.6684,64.1215,75.6684,74.8855C75.6684,85.3375,66.9324,96.5695,56.4023,106.943C59.3664,106.553,63.1884,106.241,65.9184,106.241L78.3984,106.241L78.3984,115.913ZM114.643,60.1202C117.841,61.4287,120.604,63.3189,122.93,65.7178C125.256,68.1168,127.074,71.0247,128.382,74.4413C129.618,77.8582,130.272,81.6385,130.272,85.8548L130.272,88.7626C130.272,92.9792,129.618,96.7594,128.382,100.176C127.147,103.52,125.329,106.428,123.003,108.827C120.676,111.226,117.841,113.043,114.57,114.352C111.299,115.66,107.591,116.315,103.593,116.315L86.8725,116.315L86.8725,58.1574L104.029,58.1574C107.955,58.1574,111.517,58.8117,114.643,60.1202ZM119.077,96.9049C119.731,94.4332,120.095,91.7434,120.095,88.6901L120.095,85.782C120.095,79.4575,118.714,74.6596,115.952,71.3155C113.262,67.9715,109.263,66.2995,104.029,66.2995L96.9777,66.2995L96.9776,108.246L103.593,108.246C106.283,108.246,108.682,107.81,110.79,106.937C112.826,106.065,114.57,104.756,115.951,103.084C117.333,101.412,118.35,99.3039,119.077,96.9049ZM10.9044,94.5057C13.5214,121.84,30.5325,144.957,54.3044,156.153L63.9732,146.557L91.6705,174.254L86.8725,174.472C41.1463,174.472,3.70746,139.287,0,94.5057L10.9044,94.5057Z"

diff --git a/packages/studio-components/src/Icons/Graph3D.tsx b/packages/studio-components/src/Icons/Graph3D.tsx
@@ -6,10 +6,10 @@ interface IGraph3DProps {
 
 const Graph3D: React.FunctionComponent<IGraph3DProps> = props => {
   const { style } = props;
-  const { color } = style as { color: string };
+  const { color, fontSize = '18px' } = style as { color: string; fontSize: string };
   return (
     <div>
-      <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+      <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width={fontSize} height={fontSize}>
         <path
           fill={color}
           d="M342.773807 866.503966c-121.712039-57.319473-208.8087-175.682231-222.207871-315.631634L64.735373 550.872333c18.98233 229.27994 210.66907 409.42788 444.787202 409.42788l24.565489-1.116427L392.278291 817.372989C392.278291 817.372989 342.773807 866.503966 342.773807 866.503966zM375.900276 623.824855c-7.072069 0-13.771655-1.116427-19.354813-2.977821-5.955642-2.232854-10.793834-4.839215-14.888082-8.933463-4.094248-3.721765-7.444553-8.188496-9.677407-13.771655-2.232854-5.210675-3.350304-11.166317-3.350304-17.493419l-48.387034 0c0 13.399171 2.605338 25.310456 7.816013 35.359322 5.210675 10.04989 12.282744 18.61087 20.843724 25.681916 8.93244 6.699586 18.98233 11.910261 30.521131 15.260565 11.166317 3.721765 23.076578 5.583159 35.731806 5.583159 13.771655 0 26.799366-1.861394 38.337143-5.583159 11.910261-3.721765 22.332634-9.304923 30.893614-16.376992 8.56098-7.072069 15.633049-16.004509 20.47124-26.799366 4.839215-10.793834 7.444553-22.705118 7.444553-36.104289 0-7.072069-0.743944-14.144138-2.605338-20.843724-1.861394-6.699586-4.466732-13.027711-8.56098-18.98233-3.721765-5.955642-8.93244-11.166317-14.888082-16.004509-6.327102-4.838192-13.771655-8.56098-22.705118-11.538801 7.444553-3.350304 13.771655-7.444553 19.354813-12.282744 5.583159-4.839215 10.04989-10.04989 13.771655-15.633049 3.721765-5.583159 6.327102-11.166317 8.188496-17.121959 1.861394-5.955642 2.605338-11.910261 2.605338-17.865903 0-13.399171-2.232854-25.310456-6.699586-35.731806-4.466732-10.42135-10.793834-18.98233-18.98233-25.681916-7.444553-7.072069-17.493419-12.282744-28.659737-16.004509-11.538801-3.349281-24.193005-5.210675-37.96466-5.210675-13.399171 0-25.681916 1.861394-37.220716 5.955642-11.166317 4.094248-21.216207 9.677407-29.404704 16.749476-7.816013 7.072069-14.144138 15.260565-18.98233 24.937972-4.466732 9.677407-6.699586 20.098757-6.699586 31.637558l48.387034 0c0-6.327102 1.116427-11.910261 3.350304-16.749476 2.232854-4.838192 5.210675-9.304923 9.304923-12.655228 4.094248-3.350304 8.56098-6.327102 14.144138-8.188496 5.583159-1.861394 11.166317-2.977821 17.865903-2.977821 14.888082 0 26.054399 3.721765 33.126468 11.538801 7.072069 7.444553 10.793834 18.238386 10.793834 32.010041 0 6.699586-1.116427 12.655228-2.977821 18.238386s-5.210675 10.04989-9.304923 13.771655c-4.094248 3.721765-9.304923 6.699586-15.260565 8.933463s-13.399171 3.350304-21.587668 3.350304l-28.659737 0 0 38.337143 28.659737 0c8.188496 0 15.633049 0.743944 22.332634 2.605338 6.699586 1.861394 12.282744 4.838192 16.749476 8.56098 4.466732 4.094248 8.188496 8.93244 10.793834 14.888082 2.605338 5.955642 3.721765 13.027711 3.721765 21.216207 0 15.260565-4.466732 26.799366-13.027711 34.615379C402.699642 620.10309 390.789381 623.824855 375.900276 623.824855zM694.137247 403.478378c-11.910261-12.282744-26.054399-21.960151-42.431392-28.659737-16.004509-6.699586-34.242895-10.04989-54.342676-10.04989l-87.840604 0 0 297.765731 85.60775 0c20.47124 0 39.45357-3.350304 56.203046-10.04989 16.749476-6.699586 31.265074-16.004509 43.176358-28.287253 11.910261-12.282744 21.216207-27.170826 27.54331-44.292785 6.327102-17.493419 9.677407-36.848233 9.677407-58.436924l0-14.888082c0-21.587668-3.350304-40.942481-9.677407-58.436924C715.353454 430.649204 706.048531 415.761122 694.137247 403.478378zM679.621649 521.096169c0 15.633049-1.861394 29.404704-5.210675 42.059931-3.721765 12.282744-8.93244 23.076578-16.004509 31.637558-7.072069 8.56098-16.004509 15.260565-26.426883 19.727297-10.793834 4.466732-23.076578 6.699586-36.848233 6.699586l-33.870412 0L561.260937 406.456199l36.104289 0c26.799366 0 47.270607 8.56098 61.042261 25.681916 14.144138 17.121959 21.216207 41.687448 21.216207 74.068949L679.623695 521.096169zM509.522576 67.00302l-24.565489 1.116427 141.810796 141.810796 49.503461-49.503461c121.712039 57.691957 208.807676 175.682231 221.835388 315.631634l55.830563 0C935.328471 247.15096 743.641731 67.00302 509.522576 67.00302z"

diff --git a/packages/studio-components/src/Icons/Lock.tsx b/packages/studio-components/src/Icons/Lock.tsx
@@ -1,16 +1,17 @@
 import * as React from 'react';
 
 interface ILockProps {
-  fill?: string;
+  style?: React.CSSProperties;
 }
 
 const Lock: React.FunctionComponent<ILockProps> = props => {
-  const { fill = '#000' } = props;
+  const { style } = props;
+  const { color = '#000', fontSize = '14px' } = style || {};
   return (
-    <svg width="14px" height="14px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
+    <svg width={fontSize} height={fontSize} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
       <path
         d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047z"
-        fill={fill}
+        fill={color}
       ></path>
     </svg>
   );

diff --git a/packages/studio-components/src/Icons/Sidebar.tsx b/packages/studio-components/src/Icons/Sidebar.tsx
@@ -2,15 +2,15 @@ import React from 'react';
 export default ({ style, revert }: { style?: React.CSSProperties; revert?: boolean }) => {
   // 根据revert属性判断是否需要镜像
   const transformStyle = revert ? { ...style, transform: 'scaleX(-1)' } : style;
-  const { color } = style || { color: '#000' };
+  const { color, fontSize = '14px' } = style || { color: '#000' };
   return (
     <svg
       viewBox="0 0 1024 1024"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
       p-id="1426"
-      width="14"
-      height="14"
+      width={fontSize}
+      height={fontSize}
       style={transformStyle}
     >
       <path

diff --git a/packages/studio-components/src/Icons/Trash.tsx b/packages/studio-components/src/Icons/Trash.tsx
@@ -1,17 +1,18 @@
 import React from 'react';
-export default ({ style, disabled, fill }: { style?: React.CSSProperties; disabled?: boolean; fill?: string }) => {
+export default ({ style, disabled }: { style?: React.CSSProperties; disabled?: boolean }) => {
+  const { color, fontSize = '15px' } = style || {};
   return (
     <svg
-      width="15px"
-      height="15px"
+      width={fontSize}
+      height={fontSize}
       viewBox="0 0 1024 1024"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
       style={style}
     >
       <path
         fontWeight="bold"
-        fill={fill || '#000'}
+        fill={color || '#000'}
         d="M793.6 102.4H614.4v-25.6c0-42.3424-34.4576-76.8-76.8-76.8h-102.4C392.8576 0 358.4 34.4576 358.4 76.8V102.4H179.2C136.8576 102.4 102.4 136.8576 102.4 179.2v51.2c0 33.3824 21.4016 61.8496 51.2 72.3968V947.2c0 42.3424 34.4576 76.8 76.8 76.8h512c42.3424 0 76.8-34.4576 76.8-76.8V302.7968c29.7984-10.5472 51.2-39.0144 51.2-72.3968v-51.2c0-42.3424-34.4576-76.8-76.8-76.8zM409.6 76.8a25.6 25.6 0 0 1 25.6-25.6h102.4a25.6 25.6 0 0 1 25.6 25.6V102.4H409.6v-25.6zM742.4 972.8h-512a25.6 25.6 0 0 1-25.6-25.6V307.2h563.2v640a25.6 25.6 0 0 1-25.6 25.6zM819.2 230.4a25.6 25.6 0 0 1-25.6 25.6h-614.4a25.6 25.6 0 0 1-25.6-25.6v-51.2a25.6 25.6 0 0 1 25.6-25.6h614.4a25.6 25.6 0 0 1 25.6 25.6v51.2zM640 358.4a25.6 25.6 0 0 0-25.6 25.6v512a25.6 25.6 0 0 0 51.2 0v-512a25.6 25.6 0 0 0-25.6-25.6zM486.4 358.4a25.6 25.6 0 0 0-25.6 25.6v512a25.6 25.6 0 0 0 51.2 0v-512a25.6 25.6 0 0 0-25.6-25.6zM332.8 358.4a25.6 25.6 0 0 0-25.6 25.6v512a25.6 25.6 0 0 0 51.2 0v-512a25.6 25.6 0 0 0-25.6-25.6z"
       />
     </svg>

diff --git a/packages/studio-components/src/Icons/Unlock.tsx b/packages/studio-components/src/Icons/Unlock.tsx
@@ -1,16 +1,17 @@
 import * as React from 'react';
 
 interface IUnlockProps {
-  fill?: string;
+  style?: React.CSSProperties;
 }
 
 const Unlock: React.FunctionComponent<IUnlockProps> = props => {
-  const { fill = '#000' } = props;
+  const { style } = props;
+  const { color = '#000', fontSize = '14px' } = style || {};
   return (
-    <svg width="14px" height="14px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
+    <svg width={fontSize} height={fontSize} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
       <path
         d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z"
-        fill={fill}
+        fill={color}
       ></path>
     </svg>
   );

diff --git a/packages/studio-components/src/Icons/ZoomFit.tsx b/packages/studio-components/src/Icons/ZoomFit.tsx
@@ -6,9 +6,9 @@ interface IZoomFitProps {
 
 const ZoomFit: React.FunctionComponent<IZoomFitProps> = props => {
   const { style } = props;
-  const { color } = style as { color: string };
+  const { color, fontSize = '18px' } = style as { color: string; fontSize: string };
   return (
-    <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+    <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width={fontSize} height={fontSize}>
       <path
         fill={color}
         d="M187.456 138.752a42.688 42.688 0 0 0-42.688 42.688V352h85.376v-128h128V138.752H187.456z m641.344 0h-170.624v85.312h128v128h85.312V181.44a42.688 42.688 0 0 0-42.688-42.688z m-598.656 524.8v128h128V876.8H187.456a42.688 42.688 0 0 1-42.688-42.688v-170.624h85.376z m556.032 0v128h-128V876.8h170.624a42.688 42.688 0 0 0 42.688-42.688v-170.624h-85.312zM426.624 384A42.688 42.688 0 0 0 384 426.624v170.688c0 23.552 19.072 42.688 42.624 42.688h170.688A42.688 42.688 0 0 0 640 597.312V426.624A42.688 42.688 0 0 0 597.312 384H426.624z"

diff --git a/packages/studio-components/src/Icons/primary-key.tsx b/packages/studio-components/src/Icons/primary-key.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-export default ({ style: { color } }: { style: React.CSSProperties }) => {
+export default ({ style: { color, fontSize = '16px' } }: { style: React.CSSProperties }) => {
   return (
-    <svg width="16px" height="16px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <svg width={fontSize} height={fontSize} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
       <path
         fill={color}
         d="M664.894853 0.00768a355.837331 355.837331 0 0 1 357.757317 339.581453l0.383997 16.255878v2.239983a355.837331 355.837331 0 0 1-353.597348 358.077315h-4.479966c-45.823656 0-89.599328-8.319938-129.663028-23.679823l-315.389634 315.325635c-10.239923 10.239923-20.479846 15.359885-35.839731 15.359885H51.139456c-30.71977 0-51.135616-20.479846-51.135616-51.199616v-132.991002c0-15.359885 5.119962-25.599808 15.359885-35.839732l35.839731-35.839731h102.271233V664.962693h102.335232V562.69146l74.879439-74.879439a362.493281 362.493281 0 0 1-23.743822-129.727027 355.837331 355.837331 0 0 1 339.581453-357.757316L664.958853 0.00768z m-3.96797 63.99952a291.96581 291.96581 0 0 0-289.981825 294.205793c-0.064 30.399772 4.479966 60.607545 13.567898 89.599328l5.951956 17.279871 14.719889 38.65571-85.37536 85.439359v139.838951h-102.399232l0.064 102.271233H77.699257L64.00336 844.993343v114.175143h113.919146l341.501438-341.30944 38.783709 14.847889c27.775792 10.68792 57.471569 17.087872 88.191339 18.879858l18.559861 0.575996h4.095969a292.02981 292.02981 0 0 0 289.725827-280.893894l0.255998-17.27987a291.837811 291.837811 0 0 0-279.9979-289.725827L660.926883 64.0072z"

diff --git a/packages/studio-components/src/Provider/index.tsx b/packages/studio-components/src/Provider/index.tsx
@@ -55,6 +55,8 @@ const Provider: React.FC<IThemeProvider> = props => {
     });
 
     setState(preState => {
+      // 特殊化处理,切token数据需初始化数据做基础
+      storage.set('token', { ...preState.token, ...token });
       return {
         ...preState,
         components: { ...preState.components, ...components },

diff --git a/packages/studio-importor/src/app/button-controller/clear-canvas.tsx b/packages/studio-importor/src/app/button-controller/clear-canvas.tsx
@@ -42,7 +42,7 @@ const ClearCanvas: React.FunctionComponent<IAddNodeProps> = props => {
         onClick={handleClear}
         style={style}
         type="text"
-        icon={<Icons.Trash fill={pathFill()} />}
+        icon={<Icons.Trash style={{ color: pathFill() }} />}
       ></Button>
     </Tooltip>
   );

diff --git a/packages/studio-importor/src/app/graph-canvas/CustomControls.tsx b/packages/studio-importor/src/app/graph-canvas/CustomControls.tsx
@@ -13,9 +13,9 @@ const CustomControls: React.FunctionComponent<ICustomControlsProps> = props => {
   const { zoomIn, zoomOut, fitView } = useReactFlow();
   const { isLight } = useStudioProvier();
   // svg path fill
-  const fill = !isLight ? '#FFF' : '#000';
+  const color = !isLight ? '#FFF' : '#000';
   // lock or unlock
-  const Icon = isLocked ? <Icons.Lock fill={fill} /> : <Icons.Unlock fill={fill} />;
+  const Icon = isLocked ? <Icons.Lock style={{ color }} /> : <Icons.Unlock style={{ color }} />;
   const background = !isLight ? '#1d1d1d' : '#fff';
   return (
     <>

diff --git a/packages/studio-website/src/pages/setting/International.tsx b/packages/studio-website/src/pages/setting/International.tsx
@@ -7,7 +7,7 @@ import SettingParcel from '../../components/setting-parcel';
 
 const International: React.FunctionComponent = () => {
   const { store, updateStore } = useContext();
-  const { locale = 'zh-CN' } = store;
+  const { locale = 'en-US' } = store;
   const { handleThemeOrLocale } = useStudioProvier();
 
   const handleLocales = (value: ILocaleSwitchProps['value']) => {

diff --git a/packages/studio-website/src/pages/setting/primary-color/index.tsx b/packages/studio-website/src/pages/setting/primary-color/index.tsx
@@ -8,11 +8,11 @@ const { useToken } = theme;
 const PrimaryColor: React.FunctionComponent = () => {
   const { handleThemeOrLocale } = useStudioProvier();
   const { token } = useToken();
-  const { borderRadius, colorPrimary } = token;
+  const { colorPrimary } = token;
 
   // Function to handle primary color change
   const handlePrimaryColor = (color: string) => {
-    handleThemeOrLocale({ token: { colorPrimary: color, borderRadius } });
+    handleThemeOrLocale({ token: { colorPrimary: color } });
   };
   return (
     <SettingParcel title="Primary color" text="Set the primary color">

diff --git a/packages/studio-website/src/pages/setting/rounded-corner.tsx b/packages/studio-website/src/pages/setting/rounded-corner.tsx
@@ -10,7 +10,7 @@ const RoundedCorner: React.FunctionComponent = () => {
 
   const handleBorderRadiusChange: (newBorderRadius: number | null) => void = newBorderRadius => {
     //@ts-ignore
-    handleThemeOrLocale({ token: { ...token, borderRadius: newBorderRadius } });
+    handleThemeOrLocale({ token: { borderRadius: newBorderRadius } });
   };
 
   return (