Merge pull request #752 from GraphScope/feat-provider-extend

fix: modify provider

Author: pomelo-nwu

packages/studio-components/src/HomePage/Hooks/index.tsx

@@ -1,4 +1,5 @@
 export { useDynamicStyle } from './useDynamicStyle';
 export { useIsMobile } from './useIsMobile';
 export { useTheme } from './useTheme';
+export { useLocale } from './useLocale';
 export { EnvProvider, useEnv } from './useEnv';

packages/studio-components/src/HomePage/Hooks/useLocale.tsx

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+
+export const useLocale = () => {
+  const [value, setValue] = useState("en-US");
+
+  useEffect(() => {
+    const targetElement = document.querySelector('html'); // 目标元素
+    const observer = new MutationObserver((mutationsList, observer) => {
+      for (let mutation of mutationsList) {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'data-locale') {
+          //   const { cssText } = mutation.target.style;
+          const locale_value = localStorage.getItem('locale') || 'en-US';
+          console.log('locale_value::: ', locale_value);
+          setValue(JSON.parse(locale_value));
+        }
+      }
+    });
+    //@ts-ignore
+    observer.observe(targetElement, {
+      attributes: true,
+      attributeFilter: ['data-locale'], // 仅观察 'style' 属性
+    });
+    const locale_value = localStorage.getItem('locale') ||  'en-US';
+
+    setValue(JSON.parse(locale_value));
+  }, []);
+
+  return value || 'en-US';
+};

packages/studio-components/src/HomePage/Hooks/useTheme.tsx

@@ -1,41 +1,40 @@
 import { useState, useEffect } from 'react';
 
-const KEY = 'theme';
 
 const getThemeByAlgo = () => {
   const algo = localStorage.getItem('algorithm');
   if (algo === 'darkAlgorithm') {
-    return 'dark';
+    return 'darkAlgorithm';
   }
-  return 'light';
+  return 'defaultAlgorithm';
 };
 
 const getThemeByDumi = () => {
   return localStorage.getItem('dumi:prefers-color');
 };
 export const useTheme = () => {
-  const [value, setValue] = useState('');
+  const [value, setValue] = useState("defaultAlgorithm");
 
   useEffect(() => {
     const targetElement = document.querySelector('html'); // 目标元素
     const observer = new MutationObserver((mutationsList, observer) => {
       for (let mutation of mutationsList) {
-        if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
           //   const { cssText } = mutation.target.style;
-          const theme_value = localStorage.getItem('theme') || getThemeByDumi() || getThemeByAlgo() || 'light';
-          setValue(theme_value);
+          const theme_value = localStorage.getItem('algorithm') || 'defaultAlgorithm';
+          setValue(JSON.parse(theme_value));
         }
       }
     });
     //@ts-ignore
     observer.observe(targetElement, {
       attributes: true,
-      attributeFilter: ['style'], // 仅观察 'style' 属性
+      attributeFilter: ['data-theme'], // 仅观察 'style' 属性
     });
-    const theme_value = localStorage.getItem('theme') || getThemeByDumi() || getThemeByAlgo() || 'light';
+    const theme_value = localStorage.getItem('algorithm') ||  'defaultAlgorithm';
 
-    setValue(theme_value);
+    setValue(JSON.parse(theme_value));
   }, []);
 
-  return value || 'light';
+  return value || 'defaultAlgorithm';
 };

packages/studio-components/src/Provider/getThemeConfig.tsx

@@ -46,6 +46,7 @@ export const getThemeConfig = (algorithm: ThemeProviderType['algorithm']) => {
     colorBorder: isLight ? '#F0F0F0' : '#303030',
     colorBgBase: isLight ? '#fff' : '#1d1d1d',
     colorBgLayout: isLight ? '#f5f7f9' : 'rgba(43,43,43,1)',
+    fontFamily: "'Geist Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
   };
   return { componentsConfig, tokenConfig };
 };

packages/studio-components/src/Provider/index.md

@@ -10,11 +10,11 @@ import { useStudioProvier } from './useThemeConfigProvider.tsx';
 import { components, token } from './const.ts';
 /** 修改主题色 */
 const ToogleButton = () => {
-  const { handleThemeOrLocale } = useStudioProvier();
+  const { updateStudio } = useStudioProvier();
   return (
     <Button
       onClick={() => {
-        handleThemeOrLocale({
+        updateStudio({
           components,
           token,
         });

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

@@ -6,15 +6,17 @@ import type { ThemeProviderType } from './useThemeConfigProvider';
 import { storage } from '../Utils';
 import { getThemeConfig } from './getThemeConfig';
 import { useCustomToken } from './useCustomToken';
+import { useTheme, useLocale } from '../HomePage/Hooks';
 
+type AlgorithmType = 'defaultAlgorithm' | 'darkAlgorithm';
 type IThemeProvider = {
   locales: {
     'zh-CN': Record<string, string>;
     'en-US': Record<string, string>;
   };
   children: React.ReactNode;
   locale?: 'zh-CN' | 'en-US';
-  algorithm?: 'defaultAlgorithm' | 'darkAlgorithm';
+  algorithm?: AlgorithmType;
 };
 
 const Provider: React.FC<IThemeProvider> = props => {
@@ -47,13 +49,39 @@ const Provider: React.FC<IThemeProvider> = props => {
   const { componentsConfig, tokenConfig } = getThemeConfig(algorithm);
   const colorConfig = useCustomToken();
   const isLight = algorithm === 'defaultAlgorithm';
+  const currentTheme = useTheme();
+  const currentLocale = useLocale();
 
-  const handleThemeOrLocale = (themeConfig: Partial<ThemeProviderType>) => {
+  useEffect(() => {
+    setState(preState => {
+      return {
+        ...preState,
+        algorithm: currentTheme as AlgorithmType,
+        locale: currentLocale as 'zh-CN' | 'en-US',
+      };
+    });
+  }, [currentTheme, currentLocale]);
+
+  useEffect(() => {
+    const theme = storage.get<AlgorithmType>('algorithm');
+    const locale = storage.get<'zh-CN' | 'en-US'>('locale');
+    document.documentElement.setAttribute('data-theme', theme || 'defaultAlgorithm');
+    document.documentElement.setAttribute('data-locale', locale || 'en-US');
+  }, []);
+
+  const updateStudio = (themeConfig: Partial<ThemeProviderType>) => {
+    console.log('themeConfig::: ', themeConfig);
     const { components, token } = themeConfig;
     Object.keys(themeConfig).forEach(key => {
       storage.set(key, themeConfig[key]);
-    });
+      if (key === 'algorithm') {
+        document.documentElement.setAttribute('data-theme', themeConfig.algorithm || 'defaultAlgorithm');
+      }
 
+      if (key === 'locale') {
+        document.documentElement.setAttribute('data-locale', themeConfig.locale || 'en-US');
+      }
+    });
     setState(preState => {
       // 特殊化处理,切token数据需初始化数据做基础
       storage.set('token', { ...preState.token, ...token });
@@ -74,7 +102,7 @@ const Provider: React.FC<IThemeProvider> = props => {
       value={{
         token: { ...tokenConfig, ...token },
         components: { ...componentsConfig, ...components },
-        handleThemeOrLocale,
+        updateStudio,
         algorithm,
         locale: locale,
         isLight,

packages/studio-components/src/Provider/useThemeConfigProvider.tsx

@@ -8,12 +8,12 @@ export interface ThemeProviderType extends IColorStore {
   isLight?: boolean;
 }
 export interface IContainerContext extends ThemeProviderType {
-  handleThemeOrLocale: (value: ThemeProviderType) => void;
+  updateStudio: (value: ThemeProviderType) => void;
 }
 export const ContainerContext = createContext<IContainerContext>({
   components: {},
   token: {},
-  handleThemeOrLocale: ({}) => {},
+  updateStudio: ({}) => {},
   locale: 'en-US',
   algorithm: 'defaultAlgorithm',
   isLight: false,

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

@@ -3,7 +3,7 @@ import { Outlet } from 'react-router-dom';
 import Section from '../Section';
 import Header from './header';
 import Sidebar from './sidebar';
-import { Button, Space, theme } from 'antd';
+import { Button, Space, theme, Tooltip } from 'antd';
 import { ReadOutlined, GithubOutlined } from '@ant-design/icons';
 import { getCurrentNav } from '../Utils';
 
@@ -17,6 +17,7 @@ interface ILayoutProps {
   style?: React.CSSProperties;
   collapsedConfig?: Record<string, boolean>;
   onMenuClick?: (currentNav: string) => void;
+  headerSlot?: React.ReactNode | null;
 }
 
 const Layout: React.FunctionComponent<ILayoutProps> = props => {
@@ -27,7 +28,9 @@ const Layout: React.FunctionComponent<ILayoutProps> = props => {
     style = {},
     collapsedConfig = {},
     onMenuClick,
+    headerSlot=null,
   } = props;
+
   const { width = 220, collapsedWidth = 56 } = sideStyle;
   const activeKey = getCurrentNav();
   const { token } = theme.useToken();
@@ -61,20 +64,25 @@ const Layout: React.FunctionComponent<ILayoutProps> = props => {
           <div id="header-breadcrumb"></div>
         </Space>
         <Space>
-          <Button
-            onClick={() => {
-              window.open('https://graphscope.io/', '_blank');
-            }}
-            icon={<ReadOutlined />}
-            type="text"
-          ></Button>
-          <Button
-            onClick={() => {
-              window.open(github, '_blank');
-            }}
-            icon={<GithubOutlined />}
-            type="text"
-          ></Button>
+          {headerSlot}
+          <Tooltip title="访问 GraphScope 官网">
+            <Button
+              onClick={() => {
+                window.open('https://graphscope.io/', '_blank');
+              }}
+              icon={<ReadOutlined />}
+              type="text"
+            ></Button>
+          </Tooltip>
+          <Tooltip title="GraphScope Github">
+            <Button
+              onClick={() => {
+                window.open(github, '_blank');
+              }}
+              icon={<GithubOutlined />}
+              type="text"
+            ></Button>
+          </Tooltip>
         </Space>
       </Header>
       <Outlet />

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+const SvgIcon: React.FC<React.SVGProps<SVGElement>> = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="18"
+    height="18"
+    className="icon"
+    viewBox="0 0 1024 1024"
+  >
+    <path d="M335.815 79.644 512 512h-86.244l-48.07-117.93H213.901L165.888 512H79.644L255.83 79.644zm-39.993 113.38-49.948 122.425h99.84zm-22.414 449.65V710.2c0 1.024.398 1.934.398 2.958 0 .967.342 1.934.342 2.901 0 1.024.34 2.105.568 3.13.171.966.285 1.934.57 2.844.227 1.024.568 1.99.853 2.958l.91 2.958 1.138 2.73 1.251 2.732c.455.91.797 1.877 1.309 2.787.455.853 1.137 1.707 1.65 2.56.511.853.853 1.707 1.422 2.56l1.877 2.617c.569.796 1.138 1.593 1.82 2.39l1.992 2.389c.682.796 1.479 1.536 2.218 2.275l2.162 2.219a63.4 63.4 0 0 0 7.339 5.803l2.73 1.706a62 62 0 0 0 5.519 3.13c.91.454 1.763.966 2.73 1.364l2.902 1.195 2.958 1.024a74 74 0 0 0 9.33 2.617c1.024.228 2.048.683 3.128.683 1.024 0 2.048.341 3.072.341 1.081 0 2.276.341 3.3.341l5.12.171h102.969v64.455H342.016c-2.276 0-4.551-.17-6.77-.17-2.275 0-4.55-.342-6.77-.57a142 142 0 0 1-26.34-4.835c-2.16-.569-4.266-1.308-6.428-1.991a140 140 0 0 1-12.401-4.836c-2.048-.91-4.096-1.934-6.03-2.901a138 138 0 0 1-5.86-3.072c-1.934-1.138-3.812-2.105-5.689-3.3-1.877-1.137-3.698-2.503-5.461-3.754-1.82-1.252-3.584-2.446-5.348-3.812a134 134 0 0 1-5.12-4.096c-1.65-1.422-3.129-3.015-4.722-4.494-1.593-1.48-3.242-2.844-4.778-4.437a131 131 0 0 1-4.38-4.836c-1.423-1.65-2.675-3.3-3.983-5.006-1.365-1.707-2.844-3.413-4.096-5.12-1.252-1.764-2.276-3.527-3.413-5.348a126 126 0 0 1-3.357-5.518 130 130 0 0 1-8.249-17.351c-.74-1.934-1.536-3.982-2.161-5.973a124 124 0 0 1-4.38-18.603c-.342-2.048-.57-4.096-.74-6.144-.228-2.105-.57-4.267-.57-6.372l-.17-6.371v-64.455zM685.056 256l6.827.17c2.218 0 4.494.285 6.713.57a142.3 142.3 0 0 1 26.34 4.835 137.5 137.5 0 0 1 18.83 6.827c2.047.853 4.095 1.877 6.086 2.844l5.86 3.13c1.934 1.137 3.755 2.104 5.689 3.299 1.82 1.137 3.64 2.503 5.461 3.754 1.764 1.252 3.584 2.447 5.29 3.812l5.12 4.096c1.708 1.422 3.187 2.958 4.78 4.494 1.592 1.48 3.242 2.845 4.721 4.437a117 117 0 0 1 4.438 4.836c1.422 1.593 2.673 3.3 3.982 4.95 1.365 1.706 2.844 3.413 4.039 5.176 1.252 1.707 2.276 3.527 3.47 5.348a125.6 125.6 0 0 1 11.549 22.812c.74 1.991 1.536 3.982 2.161 6.03a131 131 0 0 1 4.38 18.546c.342 2.105.57 4.096.74 6.258.228 2.048.57 4.21.57 6.315l.17 6.371v64.455h-68.608v-67.641c0-1.024-.341-2.218-.341-3.242s-.399-2.048-.399-3.072c0-1.081-.284-2.105-.568-3.13a58 58 0 0 0-1.593-6.2l-1.138-2.844c-.341-1.024-.797-1.992-1.252-2.959l-1.251-2.958-1.48-2.901a66 66 0 0 0-1.706-2.73l-1.764-2.618-2.048-2.56-1.99-2.56a69 69 0 0 0-2.22-2.446l-2.332-2.219-2.39-2.275a69 69 0 0 0-2.56-1.991l-2.787-1.935c-.853-.568-1.763-1.308-2.73-1.877l-2.731-1.707a69 69 0 0 0-2.958-1.536c-.967-.512-2.048-.91-3.072-1.365a61 61 0 0 0-6.258-2.446l-3.072-1.024a75 75 0 0 0-6.6-1.536c-1.137-.228-2.16-.569-3.299-.569-1.137 0-2.161-.284-3.3-.284-1.137 0-2.161-.342-3.299-.342H582.258V256zm48.128 292.181H870.4v225.622H733.184V870.4h-68.608v-96.597H527.36V548.18h137.216v-64.455h68.608zm-68.608 64.455h-68.608v96.712h68.608zm137.216 0h-68.608v96.712h68.608z"></path>
+  </svg>
+);
+
+export default SvgIcon;

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+const SvgIcon: React.FC<React.SVGProps<SVGElement>> = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="18"
+    height="18"
+    className="icon"
+    viewBox="0 0 1024 1024"
+  >
+    <path d="m770.617 545.963 151.097 375.58h-74.126l-41.131-102.4H666.055l-41.187 102.4h-73.615l150.642-375.58h68.779zm-34.133 98.759-42.838 106.04h85.618l-42.837-106.04zM324.722 716.8v74.524c0 1.081.398 2.22.398 3.243 0 1.138.796 2.276.796 3.3s.399 1.82.399 2.844c0 1.081.853 2.276.853 3.3s1.252 1.877 1.252 2.844c0 1.024.796 2.276.796 3.3s.796 1.934 1.252 2.844c.455 1.024 1.137 1.934 1.65 2.845.454 1.024.682 1.99 1.25 2.9.513.968 1.025 1.594 1.594 2.447.569.91 1.479 2.048 2.105 2.845.569.91.967 1.706 1.65 2.503.625.853 1.365 1.65 2.047 2.446.683.853 1.309 1.707 2.048 2.503l2.447 2.446 2.105 2.048 2.446 2.048c.853.626 1.593 1.422 2.446 2.048.91.57 1.991 1.024 2.901 1.65.91.569 1.536 1.08 2.447 1.593l2.9 1.707c.968.455 1.935 1.137 2.845 1.592l2.902 1.195c1.024.455 1.877 1.252 2.901 1.252s2.276.796 3.3.796 1.877 1.252 2.844 1.252c1.08 0 2.276.398 3.356.398 1.024 0 1.82.853 2.845.853 1.08 0 2.275.398 3.3.398 1.08 0 2.275.399 3.299.399h107.861V921.6H386.503c-2.275 0-4.323-.796-6.599-.796-2.219 0-4.779-.797-6.997-.797a33.7 33.7 0 0 1-6.6-.853c-2.161-.398-4.38-1.081-6.542-1.65-2.218-.569-4.039-.967-6.2-1.593-2.162-.683-4.495-1.308-6.6-2.048a116 116 0 0 1-6.144-2.503c-2.105-.853-4.153-1.877-6.2-2.844-1.992-.968-4.21-1.82-6.145-2.845a132 132 0 0 1-11.548-6.997c-1.877-1.252-3.527-2.73-5.348-4.096a138 138 0 0 1-5.347-4.096c-1.707-1.422-3.698-2.56-5.348-4.096-1.706-1.48-2.958-3.3-4.55-4.893-1.594-1.593-3.414-2.844-4.95-4.55-1.48-1.594-2.674-3.585-4.096-5.291a142 142 0 0 1-4.096-5.348c-1.365-1.764-2.845-3.413-4.153-5.29a142 142 0 0 1-6.997-11.492c-1.024-1.934-1.935-4.096-2.845-6.144-.967-1.991-2.048-4.04-2.901-6.144-.853-2.048-1.707-3.982-2.446-6.144-.797-2.105-1.423-4.38-2.105-6.542-.626-2.105-1.081-3.983-1.65-6.144l-1.65-6.543a33.3 33.3 0 0 1-.796-6.542c0-2.275-.854-4.779-.854-6.997s-.796-4.324-.796-6.542V716.8h68.779zM736.37 307.2h6.599c2.275 0 4.38.796 6.599.796 2.276 0 4.779.854 6.997.854s4.38.398 6.6.796c2.161.455 4.38 1.138 6.542 1.65 2.218.569 4.039.967 6.2 1.65 2.162.626 4.495 1.308 6.6 2.048s4.096 1.593 6.144 2.446c2.105.853 4.153 1.934 6.2 2.844 2.049.968 4.21 1.82 6.145 2.845a131 131 0 0 1 11.548 6.997c1.877 1.252 3.527 2.788 5.348 4.096 1.82 1.366 3.64 2.674 5.347 4.096s3.698 2.617 5.348 4.096c1.706 1.536 2.958 3.357 4.55 4.95 1.594 1.536 3.414 2.844 4.95 4.494 1.48 1.65 2.674 3.584 4.096 5.29 1.422 1.707 2.788 3.528 4.096 5.348 1.365 1.82 2.845 3.413 4.153 5.348a144 144 0 0 1 6.997 11.434c1.024 1.991 1.935 4.153 2.845 6.144.967 2.048 2.048 4.096 2.901 6.144l2.503 6.144c.74 2.105 1.366 4.438 2.048 6.542.626 2.162 1.138 3.983 1.65 6.144.569 2.162 1.195 4.38 1.65 6.6a33.3 33.3 0 0 1 .796 6.542c0 2.218.854 4.722.854 6.94 0 2.276.796 4.324.796 6.542V512H804.75v-74.98c0-1.137-.455-2.161-.455-3.242 0-1.138-.796-2.219-.796-3.3 0-1.138-.854-2.162-.854-3.242 0-1.138-.796-2.276-.796-3.3 0-1.08-.853-2.276-.853-3.3s-.797-1.82-1.195-2.844c-.455-1.024-1.138-2.276-1.707-3.3-.455-.967-.682-1.877-1.138-2.844a64 64 0 0 0-1.706-2.844c-.57-.968-1.422-1.992-2.048-2.845-.626-.967-.967-2.048-1.65-2.901-.683-.91-1.365-1.593-2.048-2.446a90 90 0 0 0-2.503-2.845c-.74-.853-1.252-1.308-2.048-2.105l-2.446-2.446c-.854-.74-2.048-1.365-2.845-2.048-.91-.74-1.593-1.82-2.503-2.446-.91-.683-1.991-1.024-2.844-1.65-.967-.626-1.991-1.48-2.959-2.048a66 66 0 0 0-2.844-1.65c-1.024-.569-1.877-.74-2.844-1.194-1.081-.512-1.878-1.252-2.959-1.707-1.024-.398-2.218-1.138-3.242-1.138-1.138 0-2.276-.853-3.3-.853-1.138 0-2.275-.854-3.3-.854-1.137 0-2.218-.796-3.299-.796-1.138 0-2.162-.796-3.3-.796s-2.161-.456-3.3-.456h-109.51V307.2h102.969zM341.276 85.333v85.334h170.667v298.666H341.276v128h-85.333v-128H85.276V170.667h170.667V85.333zM255.943 256H170.61v128H256V256zm170.667 0h-85.334v128h85.334z"></path>
+  </svg>
+);
+
+export default SvgIcon;