From 400525b40959aef828a6add9c3a0cdf73be6ed41 Mon Sep 17 00:00:00 2001 From: xwj02155382 Date: Mon, 7 Apr 2025 13:51:34 +0800 Subject: [PATCH 1/2] fix: Split StudioProvider into ThemeProvider and LocaleProvider --- .gitignore | 1 - .npmrc | 2 +- docs/interactive/.npmrc | 2 +- examples/graphy/.npmrc | 2 +- .../src/pages/dataset/cluster/graph.tsx | 72 +++-- .../src/pages/explore/paper-reading/index.tsx | 2 +- .../src/LocaleProvider/index.md | 64 ++++ .../src/LocaleProvider/index.tsx | 52 +++ .../src/LocaleProvider/useLocaleProvider.ts | 21 ++ .../src/LocaleProvider/useLocales.tsx | 14 + .../studio-components/src/Provider/index.md | 39 --- .../src/{Provider => ThemeProvider}/const.ts | 0 .../getThemeConfig.tsx | 1 + .../src/ThemeProvider/index.md | 45 +++ .../src/{Provider => ThemeProvider}/index.tsx | 33 +- .../useCustomToken.tsx | 4 +- .../useThemeConfigProvider.tsx | 11 +- .../src/ThemeProvider/useThemes.tsx | 17 + packages/studio-components/src/index.tsx | 14 +- .../src/layout/SvgEnToZh.tsx | 15 + .../src/layout/SvgZhToEn.tsx | 15 + .../studio-components/src/layout/index.tsx | 65 +++- .../studio-components/src/layout/sidebar.tsx | 4 +- packages/studio-explore/src/app.tsx | 295 +++++++++--------- .../studio-graph-editor/src/canvas/index.tsx | 4 +- .../src/elements/edge-types/graph-edge.tsx | 4 +- .../src/elements/edge-types/label.tsx | 4 +- .../src/elements/edge-types/useStyle.ts | 4 +- .../src/elements/node-types/graph-node.tsx | 4 +- .../src/components/SwitchEngine/index.tsx | 2 +- .../src/components/ZoomFit/index.tsx | 2 +- .../app/button-controller/clear-canvas.tsx | 4 +- .../src/app/button-controller/parse-csv.tsx | 4 +- .../app/elements/edge-types/graph-edge.tsx | 4 +- .../src/app/elements/edge-types/label.tsx | 4 +- .../src/app/elements/edge-types/useStyle.ts | 4 +- .../app/elements/node-types/graph-node.tsx | 4 +- .../src/app/graph-canvas/CustomControls.tsx | 4 +- .../src/app/graph-canvas/index.tsx | 2 +- packages/studio-importor/src/app/index.tsx | 68 ++-- .../studio-query/src/app/content/empty.tsx | 4 +- packages/studio-query/src/app/index.tsx | 48 +-- .../src/components/cypher-editor/index.tsx | 4 +- .../src/sdk/query-statement/index.tsx | 42 +-- .../src/components/section/index.tsx | 2 +- packages/studio-website/src/index.tsx | 1 + packages/studio-website/src/locales/en-US.ts | 24 +- packages/studio-website/src/locales/zh-CN.ts | 27 +- .../src/pages/extension/index.tsx | 3 +- packages/studio-website/src/pages/index.tsx | 24 +- .../src/pages/setting/International.tsx | 6 +- .../src/pages/setting/index.tsx | 86 ++--- .../src/pages/setting/interact-theme.tsx | 6 +- .../src/pages/setting/plugins/explore.tsx | 9 +- .../src/pages/setting/plugins/graphy.tsx | 11 +- .../src/pages/setting/primary-color/index.tsx | 6 +- .../src/pages/setting/rounded-corner.tsx | 6 +- packages/studio-website/src/pages/utils.ts | 4 +- packages/use-zustand/.npmrc | 2 +- 59 files changed, 760 insertions(+), 467 deletions(-) create mode 100644 packages/studio-components/src/LocaleProvider/index.md create mode 100644 packages/studio-components/src/LocaleProvider/index.tsx create mode 100644 packages/studio-components/src/LocaleProvider/useLocaleProvider.ts create mode 100644 packages/studio-components/src/LocaleProvider/useLocales.tsx delete mode 100644 packages/studio-components/src/Provider/index.md rename packages/studio-components/src/{Provider => ThemeProvider}/const.ts (100%) rename packages/studio-components/src/{Provider => ThemeProvider}/getThemeConfig.tsx (93%) create mode 100644 packages/studio-components/src/ThemeProvider/index.md rename packages/studio-components/src/{Provider => ThemeProvider}/index.tsx (73%) rename packages/studio-components/src/{Provider => ThemeProvider}/useCustomToken.tsx (90%) rename packages/studio-components/src/{Provider => ThemeProvider}/useThemeConfigProvider.tsx (73%) create mode 100644 packages/studio-components/src/ThemeProvider/useThemes.tsx create mode 100644 packages/studio-components/src/layout/SvgEnToZh.tsx create mode 100644 packages/studio-components/src/layout/SvgZhToEn.tsx diff --git a/.gitignore b/.gitignore index 09bbcc91b..26136b60e 100644 --- a/.gitignore +++ b/.gitignore @@ -134,7 +134,6 @@ db.sqlite3 db.sqlite3-journal # Flask stuff: -instance/ .webassets-cache # Scrapy stuff: diff --git a/.npmrc b/.npmrc index e21cbf73e..d22a8f833 100644 --- a/.npmrc +++ b/.npmrc @@ -1,5 +1,5 @@ # 修改仓库镜像（中国镜像） -registry=https://registry.npmmirror.com +registry=http://registry.anpm.alibaba-inc.com # pnpm auto-install-peers=true git-checks=false \ No newline at end of file diff --git a/docs/interactive/.npmrc b/docs/interactive/.npmrc index e21cbf73e..d22a8f833 100644 --- a/docs/interactive/.npmrc +++ b/docs/interactive/.npmrc @@ -1,5 +1,5 @@ # 修改仓库镜像（中国镜像） -registry=https://registry.npmmirror.com +registry=http://registry.anpm.alibaba-inc.com # pnpm auto-install-peers=true git-checks=false \ No newline at end of file diff --git a/examples/graphy/.npmrc b/examples/graphy/.npmrc index af73bd109..a1b0dd985 100644 --- a/examples/graphy/.npmrc +++ b/examples/graphy/.npmrc @@ -1,4 +1,4 @@ # registry=https://registry.npmjs.com/ # 修改仓库镜像（中国镜像） -registry=https://registry.npmmirror.com \ No newline at end of file +registry=http://registry.anpm.alibaba-inc.com \ No newline at end of file diff --git a/examples/graphy/src/pages/dataset/cluster/graph.tsx b/examples/graphy/src/pages/dataset/cluster/graph.tsx index b785c1688..9e1f12683 100644 --- a/examples/graphy/src/pages/dataset/cluster/graph.tsx +++ b/examples/graphy/src/pages/dataset/cluster/graph.tsx @@ -3,7 +3,15 @@ import React, { useRef } from 'react'; import { Button } from 'antd'; import { FilterOutlined } from '@ant-design/icons'; -import { Section, useSection, Icons, FullScreen, SegmentedTabs, StudioProvier } from '@graphscope/studio-components'; +import { + Section, + useSection, + Icons, + FullScreen, + SegmentedTabs, + ThemeProvider, + LocaleProvider, +} from '@graphscope/studio-components'; import { Toolbar, SwitchEngine, @@ -90,37 +98,39 @@ const ClusterGraph: React.FunctionComponent = props => { }} ref={containerRef} > - - -
} - autoResize={false} - rightSideStyle={{ - width: '350px', - }} - defaultCollapsed={{ - leftSide: true, - rightSide: false, - }} - > - - + + + +
} + autoResize={false} + rightSideStyle={{ + width: '350px', + }} + defaultCollapsed={{ + leftSide: true, + rightSide: false, + }} + > + + - - - - - - - - - {/* */} - - -
- - + + + + + + + + + {/* */} + + +
+ + + ); }; diff --git a/examples/graphy/src/pages/explore/paper-reading/index.tsx b/examples/graphy/src/pages/explore/paper-reading/index.tsx index f56f87367..397015263 100644 --- a/examples/graphy/src/pages/explore/paper-reading/index.tsx +++ b/examples/graphy/src/pages/explore/paper-reading/index.tsx @@ -2,7 +2,7 @@ import React, { useRef } from 'react'; import { Button } from 'antd'; -import { Section, useSection, Icons, FullScreen, StudioProvier } from '@graphscope/studio-components'; +import { Section, useSection, Icons, FullScreen } from '@graphscope/studio-components'; import { Toolbar, SwitchEngine, diff --git a/packages/studio-components/src/LocaleProvider/index.md b/packages/studio-components/src/LocaleProvider/index.md new file mode 100644 index 000000000..474275330 --- /dev/null +++ b/packages/studio-components/src/LocaleProvider/index.md @@ -0,0 +1,64 @@ +--- +title: LocaleProvider +--- + +```jsx +import React, { useState } from 'react'; +import { Button, Layout, Typography, Flex } from 'antd'; +import { FormattedMessage } from 'react-intl'; +import { useLocales, LocaleProvider, SvgEnToZh, SvgZhToEn } from '@graphscope/studio-components'; + +const { Content } = Layout; +const { Text } = Typography; + +const locales = { + 'en-US': { + 'navbar.jobs': 'Jobs', + 'navbar.extension': 'Extensions', + 'navbar.alert': 'Alerts', + 'navbar.setting': 'Settings', + 'navbar.deployment': 'Deployment', + }, + 'zh-CN': { + 'navbar.jobs': '作业管理', + 'navbar.extension': '扩展插件', + 'navbar.alert': '告警监控', + 'navbar.setting': '应用设置', + 'navbar.deployment': '部署状态', + } +} + +/** 修改主题色 */ +const ToogleButton = () => { + const { locale = 'en-US', handleLocales } = useLocales(); + return ( + + ); +}; + +export default () => { + return ( + + + + + + + + + + + + + + + ); +}; +``` diff --git a/packages/studio-components/src/LocaleProvider/index.tsx b/packages/studio-components/src/LocaleProvider/index.tsx new file mode 100644 index 000000000..7b4b02d94 --- /dev/null +++ b/packages/studio-components/src/LocaleProvider/index.tsx @@ -0,0 +1,52 @@ +import React, { useState } from 'react'; +import { IntlProvider } from 'react-intl'; +import { LocaleProvider } from './useLocaleProvider'; +import { storage } from '../Utils'; + +type localeType = 'zh-CN' | 'en-US'; + +type ILocaleProvider = { + locales: { + 'zh-CN': Record; + 'en-US': Record; + }; + children: React.ReactNode; + locale?: localeType; +}; + +const Provider: React.FC = props => { + const { children, locales } = props; + const [currentLocale, setCurrentLocale] = useState<'zh-CN' | 'en-US'>(() => { + let { locale } = props; + if (!locale) { + locale = storage.get('locale'); + if (!locale) { + locale = 'en-US'; + storage.set('locale', locale); + } + } + return locale; + }); + + const handleLocale = (localeConfig: localeType) => { + storage.set('locale', localeConfig); + setCurrentLocale(localeConfig); + }; + + const messages = locales[currentLocale || 'en-US']; + + return ( + + + {children} + + + ); +}; + +export default Provider; diff --git a/packages/studio-components/src/LocaleProvider/useLocaleProvider.ts b/packages/studio-components/src/LocaleProvider/useLocaleProvider.ts new file mode 100644 index 000000000..ec387d043 --- /dev/null +++ b/packages/studio-components/src/LocaleProvider/useLocaleProvider.ts @@ -0,0 +1,21 @@ +import { createContext, useContext } from 'react'; + +type localeType = 'zh-CN' | 'en-US'; +export interface IContainerContext { + handleLocale: (value: localeType) => void; + locale: localeType; +} +export const ContainerContext = createContext({ + handleLocale: ({}) => {}, + locale: 'en-US', +}); + +export const LocaleProvider = ContainerContext.Provider; + +export const useLocaleProvider = () => { + const context = useContext(ContainerContext); + if (context === undefined || Object.keys(context).length === 0) { + throw new Error(`useContext must be used within a LocaleProvider`); + } + return context; +}; diff --git a/packages/studio-components/src/LocaleProvider/useLocales.tsx b/packages/studio-components/src/LocaleProvider/useLocales.tsx new file mode 100644 index 000000000..2aef20974 --- /dev/null +++ b/packages/studio-components/src/LocaleProvider/useLocales.tsx @@ -0,0 +1,14 @@ +import { useLocaleProvider } from './useLocaleProvider'; + +export const useLocales = () => { + const { locale = 'en-US', handleLocale } = useLocaleProvider(); + const handleLocales = () => { + const updateTheValue = locale === 'en-US' ? 'zh-CN' : 'en-US'; + handleLocale(updateTheValue); + }; + return { + locale, + handleLocales, + }; +}; + diff --git a/packages/studio-components/src/Provider/index.md b/packages/studio-components/src/Provider/index.md deleted file mode 100644 index 965a6429a..000000000 --- a/packages/studio-components/src/Provider/index.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: ThemeProvider ---- - -```jsx -import React, { useState } from 'react'; -import { Button, Space, Input } from 'antd'; -import ThemeProvider from './index.tsx'; -import { useStudioProvier } from './useThemeConfigProvider.tsx'; -import { components, token } from './const.ts'; -/** 修改主题色 */ -const ToogleButton = () => { - const { handleThemeOrLocale } = useStudioProvier(); - return ( - - ); -}; - -export default () => { - return ( - - - - - ); -}; -``` diff --git a/packages/studio-components/src/Provider/const.ts b/packages/studio-components/src/ThemeProvider/const.ts similarity index 100% rename from packages/studio-components/src/Provider/const.ts rename to packages/studio-components/src/ThemeProvider/const.ts diff --git a/packages/studio-components/src/Provider/getThemeConfig.tsx b/packages/studio-components/src/ThemeProvider/getThemeConfig.tsx similarity index 93% rename from packages/studio-components/src/Provider/getThemeConfig.tsx rename to packages/studio-components/src/ThemeProvider/getThemeConfig.tsx index f6825b714..8f1ac5057 100644 --- a/packages/studio-components/src/Provider/getThemeConfig.tsx +++ b/packages/studio-components/src/ThemeProvider/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 }; }; diff --git a/packages/studio-components/src/ThemeProvider/index.md b/packages/studio-components/src/ThemeProvider/index.md new file mode 100644 index 000000000..421adf726 --- /dev/null +++ b/packages/studio-components/src/ThemeProvider/index.md @@ -0,0 +1,45 @@ +--- +title: ThemeProvider +--- + +```jsx +import React, { useState } from 'react'; +import { Button, Layout, Typography, Flex } from 'antd'; +import { SunOutlined, MoonOutlined } from '@ant-design/icons'; +import { useThemes, ThemeProvider } from '@graphscope/studio-components'; + +const { Content } = Layout; +const { Text } = Typography; + +/** 修改主题色 */ +const ToogleButton = () => { + const { algorithm, updateTheme, isDark } = useThemes(); + return ( + + ); +}; + +export default () => { + return ( + + + + + + + + + + ); +}; +``` diff --git a/packages/studio-components/src/Provider/index.tsx b/packages/studio-components/src/ThemeProvider/index.tsx similarity index 73% rename from packages/studio-components/src/Provider/index.tsx rename to packages/studio-components/src/ThemeProvider/index.tsx index 33ce939a4..4107c36a3 100644 --- a/packages/studio-components/src/Provider/index.tsx +++ b/packages/studio-components/src/ThemeProvider/index.tsx @@ -1,33 +1,20 @@ -import React, { useEffect, useState } from 'react'; +import React, { useState } from 'react'; import { ConfigProvider, theme } from 'antd'; -import { IntlProvider } from 'react-intl'; -import { ContainerProvider } from './useThemeConfigProvider'; +import { ThemeProvider } from './useThemeConfigProvider'; import type { ThemeProviderType } from './useThemeConfigProvider'; import { storage } from '../Utils'; import { getThemeConfig } from './getThemeConfig'; import { useCustomToken } from './useCustomToken'; type IThemeProvider = { - locales: { - 'zh-CN': Record; - 'en-US': Record; - }; children: React.ReactNode; - locale?: 'zh-CN' | 'en-US'; algorithm?: 'defaultAlgorithm' | 'darkAlgorithm'; }; const Provider: React.FC = props => { - const { children, locales } = props; + const { children } = props; const [state, setState] = useState(() => { - let { algorithm, locale } = props; - if (!locale) { - locale = storage.get('locale'); - if (!locale) { - locale = 'en-US'; - storage.set('locale', locale); - } - } + let { algorithm } = props; if (!algorithm) { algorithm = storage.get('algorithm'); if (!algorithm) { @@ -48,7 +35,7 @@ const Provider: React.FC = props => { const colorConfig = useCustomToken(); const isLight = algorithm === 'defaultAlgorithm'; - const handleThemeOrLocale = (themeConfig: Partial) => { + const handleTheme = (themeConfig: Partial) => { const { components, token } = themeConfig; Object.keys(themeConfig).forEach(key => { storage.set(key, themeConfig[key]); @@ -67,21 +54,18 @@ const Provider: React.FC = props => { }); }; - const messages = locales[locale || 'en-US']; return ( - - = props => { > {children} - - + ); }; diff --git a/packages/studio-components/src/Provider/useCustomToken.tsx b/packages/studio-components/src/ThemeProvider/useCustomToken.tsx similarity index 90% rename from packages/studio-components/src/Provider/useCustomToken.tsx rename to packages/studio-components/src/ThemeProvider/useCustomToken.tsx index fe3928d7b..6f9524f1b 100644 --- a/packages/studio-components/src/Provider/useCustomToken.tsx +++ b/packages/studio-components/src/ThemeProvider/useCustomToken.tsx @@ -1,4 +1,4 @@ -import { useStudioProvier } from './useThemeConfigProvider'; +import { useThemeProvider } from './useThemeConfigProvider'; export interface IColorStore { sectionBackground?: string; containerBackground?: string; @@ -12,7 +12,7 @@ export interface IColorStore { } export const useCustomToken = () => { - const { algorithm } = useStudioProvier(); + const { algorithm } = useThemeProvider(); const isLight = algorithm === 'defaultAlgorithm'; /** 特殊颜色配置 */ const colorConfig = { diff --git a/packages/studio-components/src/Provider/useThemeConfigProvider.tsx b/packages/studio-components/src/ThemeProvider/useThemeConfigProvider.tsx similarity index 73% rename from packages/studio-components/src/Provider/useThemeConfigProvider.tsx rename to packages/studio-components/src/ThemeProvider/useThemeConfigProvider.tsx index 73eb4edd9..67d4c307e 100644 --- a/packages/studio-components/src/Provider/useThemeConfigProvider.tsx +++ b/packages/studio-components/src/ThemeProvider/useThemeConfigProvider.tsx @@ -1,5 +1,6 @@ import { createContext, useContext } from 'react'; import type { IColorStore } from './getThemeConfig'; + export interface ThemeProviderType extends IColorStore { algorithm?: 'defaultAlgorithm' | 'darkAlgorithm'; components?: { [key: string]: { [key: string]: string | number } }; @@ -8,24 +9,24 @@ export interface ThemeProviderType extends IColorStore { isLight?: boolean; } export interface IContainerContext extends ThemeProviderType { - handleThemeOrLocale: (value: ThemeProviderType) => void; + handleTheme: (value: ThemeProviderType) => void; } export const ContainerContext = createContext({ components: {}, token: {}, - handleThemeOrLocale: ({}) => {}, + handleTheme: ({}) => {}, locale: 'en-US', algorithm: 'defaultAlgorithm', isLight: false, }); -export const ContainerProvider = ContainerContext.Provider; +export const ThemeProvider = ContainerContext.Provider; -export const useStudioProvier = () => { +export const useThemeProvider = () => { const context = useContext(ContainerContext); if (context === undefined || Object.keys(context).length === 0) { - throw new Error(`useContext must be used within a ContainerProvider`); + throw new Error(`useContext must be used within a ThemeProvider`); } return context; }; diff --git a/packages/studio-components/src/ThemeProvider/useThemes.tsx b/packages/studio-components/src/ThemeProvider/useThemes.tsx new file mode 100644 index 000000000..f85e196e0 --- /dev/null +++ b/packages/studio-components/src/ThemeProvider/useThemes.tsx @@ -0,0 +1,17 @@ +import { useThemeProvider } from './useThemeConfigProvider'; + +export const useThemes = () => { + const { algorithm = 'defaultAlgorithm', handleTheme } = useThemeProvider(); + const isDark = algorithm === 'darkAlgorithm'; + const updateTheme = () => { + const updateTheValue = isDark ? 'defaultAlgorithm' : 'darkAlgorithm'; + handleTheme({ + algorithm: updateTheValue, + }); + }; + return { + algorithm, + updateTheme, + isDark + }; +}; diff --git a/packages/studio-components/src/index.tsx b/packages/studio-components/src/index.tsx index 80d858ad6..da80159c1 100644 --- a/packages/studio-components/src/index.tsx +++ b/packages/studio-components/src/index.tsx @@ -12,7 +12,8 @@ export { default as Section } from './Section'; export { default as MultipleInstance } from './MultipleInstance'; export { default as SplitSection } from './SplitSection'; export { default as ResultConfig } from './ResultConfig'; -export { default as StudioProvier } from './Provider'; +export { default as ThemeProvider } from './ThemeProvider'; +export { default as LocaleProvider } from './LocaleProvider'; export { default as ImportFiles } from './ImportFiles'; export { default as SideTabs } from './SideTabs'; export { default as ResizablePanels } from './ResizablePanel'; @@ -22,6 +23,10 @@ export { default as TypingText } from './TypingText'; export { default as CreatePortal } from './CreatePortal'; export { default as Layout } from './layout'; export { default as GlobalSpin } from './GlobalSpin'; + +export { default as SvgEnToZh } from './layout/SvgEnToZh'; +export { default as SvgZhToEn } from './layout/SvgZhToEn'; + /** all */ export * as Utils from './Utils'; export * as Icons from './Icons'; @@ -29,8 +34,11 @@ export * as Icons from './Icons'; /** export hooks */ export { useSection } from './Section/useSection'; export { useMultipleInstance } from './MultipleInstance/useMultipleInstance'; -export { useStudioProvier } from './Provider/useThemeConfigProvider'; -export { useCustomToken } from './Provider/useCustomToken'; +export { useThemeProvider } from './ThemeProvider/useThemeConfigProvider'; +export { useCustomToken } from './ThemeProvider/useCustomToken'; +export { useThemes } from './ThemeProvider/useThemes'; +export { useLocaleProvider } from './LocaleProvider/useLocaleProvider'; +export { useLocales } from './LocaleProvider/useLocales'; /** export typing */ export type { SegmentedTabsProps } from './SegmentedTabs'; export type { Property } from './PropertiesList/typing'; diff --git a/packages/studio-components/src/layout/SvgEnToZh.tsx b/packages/studio-components/src/layout/SvgEnToZh.tsx new file mode 100644 index 000000000..94dd51cbf --- /dev/null +++ b/packages/studio-components/src/layout/SvgEnToZh.tsx @@ -0,0 +1,15 @@ +import * as React from "react"; + +const SvgIcon: React.FC> = (props) => ( + + + +); + +export default SvgIcon; diff --git a/packages/studio-components/src/layout/SvgZhToEn.tsx b/packages/studio-components/src/layout/SvgZhToEn.tsx new file mode 100644 index 000000000..da12547e1 --- /dev/null +++ b/packages/studio-components/src/layout/SvgZhToEn.tsx @@ -0,0 +1,15 @@ +import * as React from "react"; + +const SvgIcon: React.FC> = (props) => ( + + + +); + +export default SvgIcon; diff --git a/packages/studio-components/src/layout/index.tsx b/packages/studio-components/src/layout/index.tsx index 9f913f740..7a24b335e 100644 --- a/packages/studio-components/src/layout/index.tsx +++ b/packages/studio-components/src/layout/index.tsx @@ -3,9 +3,13 @@ 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 { ReadOutlined, GithubOutlined } from '@ant-design/icons'; +import { Button, Space, theme, Tooltip } from 'antd'; +import { ReadOutlined, GithubOutlined, SunOutlined, MoonOutlined } from '@ant-design/icons'; import { getCurrentNav } from '../Utils'; +import { useThemes } from '../ThemeProvider/useThemes'; +import { useLocales } from '../LocaleProvider/useLocales'; +import SvgEnToZh from './SvgEnToZh'; +import SvgZhToEn from './SvgZhToEn'; interface ILayoutProps { sideStyle?: { @@ -31,7 +35,8 @@ const Layout: React.FunctionComponent = props => { const { width = 220, collapsedWidth = 56 } = sideStyle; const activeKey = getCurrentNav(); const { token } = theme.useToken(); - + const { algorithm, updateTheme, isDark } = useThemes(); + const { locale = 'en-US', handleLocales } = useLocales(); const leftSideCollapsed = collapsedConfig[activeKey] || false; return ( @@ -61,20 +66,46 @@ const Layout: React.FunctionComponent = props => {
- - + + + + + + + + + + + + diff --git a/packages/studio-components/src/layout/sidebar.tsx b/packages/studio-components/src/layout/sidebar.tsx index 3b11c83b7..28162d0a1 100644 --- a/packages/studio-components/src/layout/sidebar.tsx +++ b/packages/studio-components/src/layout/sidebar.tsx @@ -4,11 +4,9 @@ import type { MenuProps } from 'antd'; import { Menu, Flex, theme } from 'antd'; import Logo from '../Logo'; import { useSection } from '../Section/useSection'; - import Header from './header'; import CollapsedButton from './collapsed'; -import { getAllSearchParams, setSearchParams, getCurrentNav } from '../Utils'; -import { useStudioProvier } from '../Provider/useThemeConfigProvider'; +import { getCurrentNav } from '../Utils'; interface ISidebar { sideStyle: { diff --git a/packages/studio-explore/src/app.tsx b/packages/studio-explore/src/app.tsx index b53eab9ad..604ee78d1 100644 --- a/packages/studio-explore/src/app.tsx +++ b/packages/studio-explore/src/app.tsx @@ -1,5 +1,12 @@ import React, { useRef, useState } from 'react'; -import { Section, FullScreen, StudioProvier, SegmentedTabs, Icons } from '@graphscope/studio-components'; +import { + Section, + FullScreen, + ThemeProvider, + LocaleProvider, + SegmentedTabs, + Icons, +} from '@graphscope/studio-components'; import { Toolbar, SwitchEngine, @@ -85,7 +92,7 @@ const Explore: React.FunctionComponent = props => { return (
- = props => { }, }} > -
- // - // Next Query - // - // ), - // children: , - // }, - // ]} - // > - // } - autoResize={false} - leftSideStyle={{ - width: '400px', - boxShadow: token.boxShadow, - marginRight: '0px', - // borderRadius: token.borderRadius, - overflow: 'scroll', - }} - rightSideStyle={{ - width: '360px', - boxShadow: 'rgba(0, 0, 0, 0.19) 0px 4px 12px', - overflowY: 'scroll', - }} - defaultCollapsed={{ - leftSide: true, - rightSide: true, - }} - > - - + +
+ // + // Next Query + // + // ), + // children: , + // }, + // ]} + // > + // } + autoResize={false} + leftSideStyle={{ + width: '400px', + boxShadow: token.boxShadow, + marginRight: '0px', + // borderRadius: token.borderRadius, + overflow: 'scroll', + }} + rightSideStyle={{ + width: '360px', + boxShadow: 'rgba(0, 0, 0, 0.19) 0px 4px 12px', + overflowY: 'scroll', + }} + defaultCollapsed={{ + leftSide: true, + rightSide: true, + }} + > + + - - - - - } - direction="vertical" - items={[ - { - label: Next Query, - icon: , - children: , - key: 'NextQuery', - }, - { - label: Statistics Analysis, - icon: , - children: ( - - - - - ), - key: 'Statistics', - }, - // { - // label: Table View, - // icon: , - // children: , - // key: 'TableView', - // }, - { - label: Cluster Analysis, - icon: , - children: , - key: 'ClusterAnalysis', - }, + + + + + } + direction="vertical" + items={[ + { + label: Next Query, + icon: , + children: , + key: 'NextQuery', + }, + { + label: Statistics Analysis, + icon: , + children: ( + + + + + ), + key: 'Statistics', + }, + // { + // label: Table View, + // icon: , + // children: , + // key: 'TableView', + // }, + { + label: Cluster Analysis, + icon: , + children: , + key: 'ClusterAnalysis', + }, - { - label: Cypher Query, - icon: , - children: , - key: 'CypherQuery', - }, - { - label: Report, - icon: , - children: , - key: 'Report', - }, + { + label: Cypher Query, + icon: , + children: , + key: 'CypherQuery', + }, + { + label: Report, + icon: , + children: , + key: 'Report', + }, - { - label: Style Setting, - icon: , - children: , - key: 'StyleSetting', - }, - { - label: Layout Setting, - icon: , - children: , - key: 'LayoutSetting', - }, - ]} - tools={ - <> - - {/* + { + label: Style Setting, + icon: , + children: , + key: 'StyleSetting', + }, + { + label: Layout Setting, + icon: , + children: , + key: 'LayoutSetting', + }, + ]} + tools={ + <> + + {/* */} - - - - - - } - > + + + + + + } + > - {/* + {/* */} - - - {/* */} - - - - - - + + + {/* */} + + + + + + - - {/* */} - {/* */} - - - - - - - - -
- + + {/* */} + {/* */} + + + + + + + + +
+ +
); diff --git a/packages/studio-graph-editor/src/canvas/index.tsx b/packages/studio-graph-editor/src/canvas/index.tsx index 0b8efa29f..3e42c8adc 100644 --- a/packages/studio-graph-editor/src/canvas/index.tsx +++ b/packages/studio-graph-editor/src/canvas/index.tsx @@ -1,6 +1,6 @@ import React, { CSSProperties, useEffect } from 'react'; import { ReactFlow, Controls, Background, MiniMap } from 'reactflow'; -import { EmptyCanvas, useStudioProvier, Utils,useDynamicStyle } from '@graphscope/studio-components'; +import { EmptyCanvas, useThemeProvider, Utils,useDynamicStyle } from '@graphscope/studio-components'; import { nodeTypes } from '../elements/node-types'; import { edgeTypes } from '../elements/edge-types'; import ConnectionLine from '../elements/connection-line'; @@ -25,7 +25,7 @@ const SchemaGraph: React.FunctionComponent = props => { const { store, updateStore } = useContext(); const { onEdgesChange, onNodesChange, onConnectStart, onConnectEnd } = useInteractive(); const { nodes, edges, theme } = store; - const { isLight } = useStudioProvier(); + const { isLight } = useThemeProvider(); const isEmpty = nodes.length === 0; // const rfBG = !isLight ? '#161616' : collapsed.left && collapsed.right ? '#fff' : '#f4f5f5'; const rfBG = '#fff'; diff --git a/packages/studio-graph-editor/src/elements/edge-types/graph-edge.tsx b/packages/studio-graph-editor/src/elements/edge-types/graph-edge.tsx index e768a5fd4..ffd1ef0b6 100644 --- a/packages/studio-graph-editor/src/elements/edge-types/graph-edge.tsx +++ b/packages/studio-graph-editor/src/elements/edge-types/graph-edge.tsx @@ -13,7 +13,7 @@ import { useContext } from '../../canvas/useContext'; import LoopEdge from './loop-edge'; import Label from './label'; -import { useStudioProvier } from '@graphscope/studio-components'; +import { useThemeProvider } from '@graphscope/studio-components'; import { useGraphContext } from '../..'; function GraphEdge(props: EdgeProps) { @@ -25,7 +25,7 @@ function GraphEdge(props: EdgeProps) { const { store } = useContext(); const { currentId, theme } = store; - const { isLight } = useStudioProvier(); + const { isLight } = useThemeProvider(); const { onEdgeClick } = useGraphContext(); if (!sourceNode || !targetNode) { return null; diff --git a/packages/studio-graph-editor/src/elements/edge-types/label.tsx b/packages/studio-graph-editor/src/elements/edge-types/label.tsx index bf8f83f48..aca560b4c 100644 --- a/packages/studio-graph-editor/src/elements/edge-types/label.tsx +++ b/packages/studio-graph-editor/src/elements/edge-types/label.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { EdgeLabelRenderer } from 'reactflow'; -import { EditableText, useStudioProvier, useSection } from '@graphscope/studio-components'; +import { EditableText, useThemeProvider, useSection } from '@graphscope/studio-components'; import { useContext } from '../../canvas/useContext'; import { CheckOutlined } from '@ant-design/icons'; import { theme } from 'antd'; @@ -22,7 +22,7 @@ const Label: React.FunctionComponent = props => { const { currentId, theme } = store; const isSelected = id === currentId; - const { isLight } = useStudioProvier(); + const { isLight } = useThemeProvider(); const { disabled: graphDisabled = false } = useGraphContext(); const onEdgeClick = () => { updateStore(draft => { diff --git a/packages/studio-graph-editor/src/elements/edge-types/useStyle.ts b/packages/studio-graph-editor/src/elements/edge-types/useStyle.ts index 06f39131f..bacd2e8cd 100644 --- a/packages/studio-graph-editor/src/elements/edge-types/useStyle.ts +++ b/packages/studio-graph-editor/src/elements/edge-types/useStyle.ts @@ -1,10 +1,10 @@ import { useContext } from '../../canvas/useContext'; -import { useStudioProvier } from '@graphscope/studio-components'; +import { useThemeProvider } from '@graphscope/studio-components'; export const usePathStyle = (id: string) => { const { store } = useContext(); const { currentId, theme } = store; const isSelected = id === currentId; - const { isLight } = useStudioProvier(); + const { isLight } = useThemeProvider(); const getStyle = () => { if (!isLight) { return isSelected ? theme.primaryColor : '#d7d7d7'; diff --git a/packages/studio-graph-editor/src/elements/node-types/graph-node.tsx b/packages/studio-graph-editor/src/elements/node-types/graph-node.tsx index 1c001c690..604253fbe 100644 --- a/packages/studio-graph-editor/src/elements/node-types/graph-node.tsx +++ b/packages/studio-graph-editor/src/elements/node-types/graph-node.tsx @@ -2,7 +2,7 @@ import React, { memo, useState } from 'react'; import { Handle, NodeProps, Position } from 'reactflow'; import { theme } from 'antd'; import { CheckOutlined } from '@ant-design/icons'; -import { EditableText, useStudioProvier, useSection } from '@graphscope/studio-components'; +import { EditableText, useThemeProvider, useSection } from '@graphscope/studio-components'; const { useToken } = theme; import { useContext } from '../../canvas/useContext'; @@ -27,7 +27,7 @@ const GraphNode = (props: NodeProps) => { const { label, filelocation, disabled } = data; const { store, updateStore } = useContext(); const { currentId, theme, elementOptions } = store; - const { isLight } = useStudioProvier(); + const { isLight } = useThemeProvider(); const { toggleRightSide, toggleLeftSide } = useSection(); const { token } = useToken(); const isSelected = id === currentId; diff --git a/packages/studio-graph/src/components/SwitchEngine/index.tsx b/packages/studio-graph/src/components/SwitchEngine/index.tsx index 5b7ccf6e2..bfa3932d6 100644 --- a/packages/studio-graph/src/components/SwitchEngine/index.tsx +++ b/packages/studio-graph/src/components/SwitchEngine/index.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { Button, TooltipProps, Tooltip, theme } from 'antd'; import { FormattedMessage } from 'react-intl'; import { useContext } from '../../'; -import { Icons, useStudioProvier } from '@graphscope/studio-components'; +import { Icons } from '@graphscope/studio-components'; const { Graph3D, Graph2D } = Icons; export interface ISwitchEngineProps { title?: TooltipProps['title']; diff --git a/packages/studio-graph/src/components/ZoomFit/index.tsx b/packages/studio-graph/src/components/ZoomFit/index.tsx index e250e97c3..aabe5cedf 100644 --- a/packages/studio-graph/src/components/ZoomFit/index.tsx +++ b/packages/studio-graph/src/components/ZoomFit/index.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { Button, TooltipProps, Tooltip } from 'antd'; import { FormattedMessage } from 'react-intl'; import { ForceGraphInstance, useContext } from '../../'; -import { Icons, useStudioProvier } from '@graphscope/studio-components'; +import { Icons } from '@graphscope/studio-components'; export interface IZoomFitProps { title?: TooltipProps['title']; diff --git a/packages/studio-importor/src/app/button-controller/clear-canvas.tsx b/packages/studio-importor/src/app/button-controller/clear-canvas.tsx index 8c90fd8f5..45badbf0a 100644 --- a/packages/studio-importor/src/app/button-controller/clear-canvas.tsx +++ b/packages/studio-importor/src/app/button-controller/clear-canvas.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { Button, Tooltip } from 'antd'; -import { Icons, useStudioProvier } from '@graphscope/studio-components'; +import { Icons, useThemeProvider } from '@graphscope/studio-components'; import { resetIndex } from '../utils'; import { FormattedMessage } from 'react-intl'; interface IAddNodeProps { @@ -12,7 +12,7 @@ const ClearCanvas: React.FunctionComponent = props => { const { style } = props; const { updateStore, store } = useContext(); const { elementOptions } = store; - const { isLight } = useStudioProvier(); + const { isLight } = useThemeProvider(); /** svg pathFill */ let pathFill = () => { if (!isLight) { diff --git a/packages/studio-importor/src/app/button-controller/parse-csv.tsx b/packages/studio-importor/src/app/button-controller/parse-csv.tsx index b100e491a..4e0450f9a 100644 --- a/packages/studio-importor/src/app/button-controller/parse-csv.tsx +++ b/packages/studio-importor/src/app/button-controller/parse-csv.tsx @@ -3,7 +3,7 @@ import { Button, Modal, Segmented, Space, Tooltip } from 'antd'; import { BulbOutlined } from '@ant-design/icons'; import ImportFromCSV from '../import-schema/import-from-csv'; -import { SegmentedTabs, Icons, useStudioProvier } from '@graphscope/studio-components'; +import { SegmentedTabs, Icons, useThemeProvider } from '@graphscope/studio-components'; import type { SegmentedTabsProps } from '@graphscope/studio-components'; import { FormattedMessage } from 'react-intl'; @@ -20,7 +20,7 @@ const ParseCSVButton: React.FunctionComponent = props => { const { visible } = state; const { store } = useContext(); const { elementOptions } = store; - const { isLight } = useStudioProvier(); + const { isLight } = useThemeProvider(); /** svg pathFill */ let pathFill = () => { diff --git a/packages/studio-importor/src/app/elements/edge-types/graph-edge.tsx b/packages/studio-importor/src/app/elements/edge-types/graph-edge.tsx index 6d7985671..7d7b40802 100644 --- a/packages/studio-importor/src/app/elements/edge-types/graph-edge.tsx +++ b/packages/studio-importor/src/app/elements/edge-types/graph-edge.tsx @@ -12,7 +12,7 @@ import { import { useContext } from '@graphscope/use-zustand'; import LoopEdge from './loop-edge'; import Label from './label'; -import { useStudioProvier } from '@graphscope/studio-components'; +import { useThemeProvider } from '@graphscope/studio-components'; function GraphEdge(props: EdgeProps) { const { id, source, target, style, data } = props; @@ -22,7 +22,7 @@ function GraphEdge(props: EdgeProps) { const targetNode = useStore(useCallback(store => store.nodeInternals.get(target), [target])); const { store } = useContext(); const { currentId, theme } = store; - const { isLight } = useStudioProvier(); + const { isLight } = useThemeProvider(); if (!sourceNode || !targetNode) { return null; } diff --git a/packages/studio-importor/src/app/elements/edge-types/label.tsx b/packages/studio-importor/src/app/elements/edge-types/label.tsx index 69b079434..4b03d4fd3 100644 --- a/packages/studio-importor/src/app/elements/edge-types/label.tsx +++ b/packages/studio-importor/src/app/elements/edge-types/label.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { EdgeLabelRenderer } from 'reactflow'; -import { EditableText, useStudioProvier, useSection } from '@graphscope/studio-components'; +import { EditableText, useThemeProvider, useSection } from '@graphscope/studio-components'; import { useContext } from '@graphscope/use-zustand'; import { CheckOutlined } from '@ant-design/icons'; import { theme } from 'antd'; @@ -20,7 +20,7 @@ const Label: React.FunctionComponent = props => { const { token } = useToken(); const { currentId, theme } = store; const isSelected = id === currentId; - const { isLight } = useStudioProvier(); + const { isLight } = useThemeProvider(); const onEdgeClick = () => { updateStore(draft => { draft.currentId = id; diff --git a/packages/studio-importor/src/app/elements/edge-types/useStyle.ts b/packages/studio-importor/src/app/elements/edge-types/useStyle.ts index e6f9ffc2f..1ea5c8183 100644 --- a/packages/studio-importor/src/app/elements/edge-types/useStyle.ts +++ b/packages/studio-importor/src/app/elements/edge-types/useStyle.ts @@ -1,10 +1,10 @@ import { useContext } from '@graphscope/use-zustand'; -import { useStudioProvier } from '@graphscope/studio-components'; +import { useThemeProvider } from '@graphscope/studio-components'; export const usePathStyle = (id: string) => { const { store } = useContext(); const { currentId, theme } = store; const isSelected = id === currentId; - const { isLight } = useStudioProvier(); + const { isLight } = useThemeProvider(); const getStyle = () => { if (!isLight) { return isSelected ? theme.primaryColor : '#d7d7d7'; diff --git a/packages/studio-importor/src/app/elements/node-types/graph-node.tsx b/packages/studio-importor/src/app/elements/node-types/graph-node.tsx index fcff6b572..94299ddae 100644 --- a/packages/studio-importor/src/app/elements/node-types/graph-node.tsx +++ b/packages/studio-importor/src/app/elements/node-types/graph-node.tsx @@ -2,7 +2,7 @@ import React, { memo, useState } from 'react'; import { Handle, NodeProps, Position } from 'reactflow'; import { theme } from 'antd'; import { CheckOutlined } from '@ant-design/icons'; -import { EditableText, useStudioProvier, useSection } from '@graphscope/studio-components'; +import { EditableText, useThemeProvider, useSection } from '@graphscope/studio-components'; const { useToken } = theme; import { useContext } from '@graphscope/use-zustand'; @@ -27,7 +27,7 @@ const GraphNode = (props: NodeProps) => { const { label, filelocation, disabled } = data; const { store, updateStore } = useContext(); const { currentId, theme, elementOptions } = store; - const { isLight } = useStudioProvier(); + const { isLight } = useThemeProvider(); const { toggleRightSide, toggleLeftSide } = useSection(); const { token } = useToken(); const isSelected = id === currentId; diff --git a/packages/studio-importor/src/app/graph-canvas/CustomControls.tsx b/packages/studio-importor/src/app/graph-canvas/CustomControls.tsx index deab55804..ad412f846 100644 --- a/packages/studio-importor/src/app/graph-canvas/CustomControls.tsx +++ b/packages/studio-importor/src/app/graph-canvas/CustomControls.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Button, Flex, Divider } from 'antd'; import { PlusOutlined, MinusOutlined, ExpandOutlined } from '@ant-design/icons'; import { useReactFlow, Panel } from 'reactflow'; -import { Icons, useStudioProvier } from '@graphscope/studio-components'; +import { Icons, useThemeProvider } from '@graphscope/studio-components'; interface ICustomControlsProps { isLocked: boolean; @@ -11,7 +11,7 @@ interface ICustomControlsProps { const CustomControls: React.FunctionComponent = props => { const { isLocked, handleLocked } = props; const { zoomIn, zoomOut, fitView } = useReactFlow(); - const { isLight } = useStudioProvier(); + const { isLight } = useThemeProvider(); // svg path fill const color = !isLight ? '#FFF' : '#000'; // lock or unlock diff --git a/packages/studio-importor/src/app/graph-canvas/index.tsx b/packages/studio-importor/src/app/graph-canvas/index.tsx index 4ae6ebe73..3da41ddc7 100644 --- a/packages/studio-importor/src/app/graph-canvas/index.tsx +++ b/packages/studio-importor/src/app/graph-canvas/index.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import { ReactFlow, Controls, Background, MiniMap, applyNodeChanges } from 'reactflow'; -import { EmptyCanvas, useStudioProvier } from '@graphscope/studio-components'; +import { EmptyCanvas, useThemeProvider } from '@graphscope/studio-components'; import { nodeTypes } from '../elements/node-types'; import { edgeTypes } from '../elements/edge-types'; import ConnectionLine from '../elements/connection-line'; diff --git a/packages/studio-importor/src/app/index.tsx b/packages/studio-importor/src/app/index.tsx index cf9d825bb..0962393ba 100644 --- a/packages/studio-importor/src/app/index.tsx +++ b/packages/studio-importor/src/app/index.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useMemo } from 'react'; import GraphCanvas from './graph-canvas'; import PropertiesEditor from './properties-editor'; import { ReactFlowProvider } from 'reactflow'; -import { Section, StudioProvier, GlobalSpin, useDynamicStyle } from '@graphscope/studio-components'; +import { Section, ThemeProvider, LocaleProvider, GlobalSpin, useDynamicStyle } from '@graphscope/studio-components'; import cssStyles from './style'; import { transformGraphNodes, transformEdges } from './elements/index'; @@ -89,38 +89,40 @@ const ImportApp: React.FunctionComponent = props => { const IS_PURE = appMode === 'PURE'; return ( - -
- ) - } - leftSideStyle={leftSideStyle} - rightSideStyle={rightSideStyle} - defaultCollapsed={defaultCollapsed} - style={{ height: 'calc(100vh - 50px)', ...style }} - splitBorder - > - {isReady ? ( - - {!IS_PURE && } - - {children} - - ) : ( - - )} -
- + + +
+ ) + } + leftSideStyle={leftSideStyle} + rightSideStyle={rightSideStyle} + defaultCollapsed={defaultCollapsed} + style={{ height: 'calc(100vh - 50px)', ...style }} + splitBorder + > + {isReady ? ( + + {!IS_PURE && } + + {children} + + ) : ( + + )} +
+ + ); }; diff --git a/packages/studio-query/src/app/content/empty.tsx b/packages/studio-query/src/app/content/empty.tsx index b91e2648f..a68b54e43 100644 --- a/packages/studio-query/src/app/content/empty.tsx +++ b/packages/studio-query/src/app/content/empty.tsx @@ -3,12 +3,12 @@ import { Typography } from 'antd'; import { FormattedMessage } from 'react-intl'; import { PlayCircleOutlined } from '@ant-design/icons'; import Image from './image'; -import { useStudioProvier } from '@graphscope/studio-components'; +import { useThemeProvider } from '@graphscope/studio-components'; interface IEmptyProps {} const Empty: React.FunctionComponent = props => { - const { isLight } = useStudioProvier(); + const { isLight } = useThemeProvider(); return (
= props => { rightSide: , }; return ( - -
- -
- + + +
+ +
+ + ); } return null; diff --git a/packages/studio-query/src/components/cypher-editor/index.tsx b/packages/studio-query/src/components/cypher-editor/index.tsx index 8c05535e5..9c4e4a6cc 100644 --- a/packages/studio-query/src/components/cypher-editor/index.tsx +++ b/packages/studio-query/src/components/cypher-editor/index.tsx @@ -1,5 +1,5 @@ import React, { forwardRef, useEffect } from 'react'; -import { useStudioProvier, useDynamicStyle } from '@graphscope/studio-components'; +import { useThemeProvider, useDynamicStyle } from '@graphscope/studio-components'; import { editor, languages } from 'monaco-editor'; import 'monaco-editor/esm/vs/basic-languages/cypher/cypher.contribution'; import { registerGremlinLanguage } from '../basic-languages-gremlin/index'; @@ -80,7 +80,7 @@ const Editor = forwardRef((props: IEditor, editorRef: any) => { const { value, language = 'cypher', maxRows = 10, minRows = 1, onChangeContent, clear, onInit } = props; let codeEditor: editor.IStandaloneCodeEditor; const MAGIC_NUMBER = onChangeContent ? 0 : countLines(value); - const { isLight } = useStudioProvier(); + const { isLight } = useThemeProvider(); useEffect(() => { if (editorRef && editorRef.current) { if (countLines(value) <= maxRows) { diff --git a/packages/studio-query/src/sdk/query-statement/index.tsx b/packages/studio-query/src/sdk/query-statement/index.tsx index 6f17f02a4..1fc5af10d 100644 --- a/packages/studio-query/src/sdk/query-statement/index.tsx +++ b/packages/studio-query/src/sdk/query-statement/index.tsx @@ -4,7 +4,7 @@ import { Statement } from '../..'; import type { IStatement } from '../..'; import { CypherDriver, GremlinDriver } from '@graphscope/studio-driver'; import ConnectEndpoint, { IConnectEndpointProps } from '../../components/connect-endpoint'; -import { StudioProvier } from '@graphscope/studio-components'; +import { ThemeProvider, LocaleProvider } from '@graphscope/studio-components'; import locales from '../../locales'; @@ -79,28 +79,32 @@ const QueryStatement = (props: IQueryStatementProps) => { if (!onQuery && (!endpoint || !language)) { return ( - - - + + + + + ); } return ( - - - + + + + + ); }; diff --git a/packages/studio-website/src/components/section/index.tsx b/packages/studio-website/src/components/section/index.tsx index ccc42b0ce..55b962bd0 100644 --- a/packages/studio-website/src/components/section/index.tsx +++ b/packages/studio-website/src/components/section/index.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { Breadcrumb, theme, Flex } from 'antd'; import type { TabsProps } from 'antd'; -import { CreatePortal, SegmentedTabs, useStudioProvier } from '@graphscope/studio-components'; +import { CreatePortal } from '@graphscope/studio-components'; interface IFormattedMessage { id: string; values?: { [key: string]: string }; diff --git a/packages/studio-website/src/index.tsx b/packages/studio-website/src/index.tsx index feadc863c..a3d9ab0b9 100644 --- a/packages/studio-website/src/index.tsx +++ b/packages/studio-website/src/index.tsx @@ -10,6 +10,7 @@ import { ROUTES } from './pages/index'; import { SIDE_MENU } from './layouts/const'; import { togglePlugin } from './pages/explore/slot'; + /** Portal 内置模块 */ installSlot('SIDE_MEU', 'studio', SIDE_MENU); installSlot('ROUTES', 'studio', ROUTES); diff --git a/packages/studio-website/src/locales/en-US.ts b/packages/studio-website/src/locales/en-US.ts index 4774a8a02..04296c333 100644 --- a/packages/studio-website/src/locales/en-US.ts +++ b/packages/studio-website/src/locales/en-US.ts @@ -270,7 +270,25 @@ export default { 'Data Load Configuration': 'Data Load Configuration', 'Download Load Task Config': 'Download Load Task Config', "Click to load all label's data": "Click to load all label's data", - "Please click the button below to 「Create instances」": "Please click the button below to 「Create instances」", - "No available Coordinator service": "No available Coordinator service", - "Start the local service by following the steps below and then refresh this web page": "Start the local service by following the steps below and then refresh this web page", + 'Please click the button below to 「Create instances」': 'Please click the button below to 「Create instances」', + 'No available Coordinator service': 'No available Coordinator service', + 'Start the local service by following the steps below and then refresh this web page': + 'Start the local service by following the steps below and then refresh this web page', + 'Configure GraphScope engine address and set query page sidebar style': + 'Configure GraphScope engine address and set query page sidebar style', + 'refers to the address of the GraphScope engine. If you have also started the GraphScope engine locally using Docker.': + 'refers to the address of the GraphScope engine. If you have also started the GraphScope engine locally using Docker.', + 'Configure theme colors and rounded corners': 'Configure theme colors and rounded corners', + 'Experimental Tools': 'Experimental Tools', + 'Coordinator URL': 'Coordinator URL', + 'Explor is a tool that allows you to explore the graph data in a more visual way.': + 'Explor is a tool that allows you to explore the graph data in a more visual way.', + Enable: 'Enable', + "Graphy": "Graphy", + "Graphy'ourData": "Graphy'ourData", + 'Graphy is an end-to-end platform designed for extracting, visualizing, and analyzing large volumes of unstructured data. Without structured organization, valuable insights in such data often remain hidden.Graphy empowers users to extract predefined structures from unstructured data, organizing it into a graph format for enhanced visualization, analysis, and exploration.': + 'Graphy is an end-to-end platform designed for extracting, visualizing, and analyzing large volumes of unstructured data. Without structured organization, valuable insights in such data often remain hidden.Graphy empowers users to extract predefined structures from unstructured data, organizing it into a graph format for enhanced visualization, analysis, and exploration.', + 'An intuitive tool that transforms unstructured data into graph dataset.': + 'An intuitive tool that transforms unstructured data into graph dataset.', + 'Configure and enable experimental tools for advanced graph data exploration and analysis.':'Configure and enable experimental tools for advanced graph data exploration and analysis.' }; diff --git a/packages/studio-website/src/locales/zh-CN.ts b/packages/studio-website/src/locales/zh-CN.ts index de4fd2737..0975f5e9e 100644 --- a/packages/studio-website/src/locales/zh-CN.ts +++ b/packages/studio-website/src/locales/zh-CN.ts @@ -136,7 +136,7 @@ export default { 'Select or customize your UI theme': '选择或自定义 UI 主题', 'Rounded corners': '圆角', 'Corner radians': '圆角弧度', - 'Appearance Setting': '系统设置', + 'Appearance Setting': '主题设置', 'Change how Untitled UI looks and feels in your browser': '您可以在这里自定义系统语言，主题样式等', 'Select navigation style': '选择导航样式', 'Navigation Style': '导航风格', @@ -265,7 +265,26 @@ export default { 'Data Load Configuration': '数据载入配置', 'Download Load Task Config': '下载数据导入任务的配置文件', "Click to load all label's data": '点击载入所有 label 的数据', - "Please click the button below to 「Create instances」": "请单击下面的按钮『创建图实例』", - "No available Coordinator service": "没有可用的协调服务", - "Start the local service by following the steps below and then refresh this web page": "按照以下步骤启动本地服务，然后刷新此网页", + 'Please click the button below to 「Create instances」': '请单击下面的按钮『创建图实例』', + 'No available Coordinator service': '没有可用的协调服务', + 'Start the local service by following the steps below and then refresh this web page': + '按照以下步骤启动本地服务，然后刷新此网页', + 'Configure GraphScope engine address and set query page sidebar style': + '配置 GraphScope 引擎地址并且设置查询页面侧边栏样式', + 'refers to the address of the GraphScope engine. If you have also started the GraphScope engine locally using Docker.': + '指定GraphScope引擎的地址。如果您还使用Docker在本地启动了GraphScope引擎', + 'Configure theme colors and rounded corners': '配置主题颜色及圆角', + 'Experimental Tools': '实验工具设置', + 'Coordinator URL': '引擎地址', + 'Explor is a tool that allows you to explore the graph data in a more visual way.': + 'Explor是一个工具，它允许您以更直观的方式探索图形数据。', + Enable: 'Enable', + "Graphy'ourData": '图数据工具', + 'Graphy is an end-to-end platform designed for extracting, visualizing, and analyzing large volumes of unstructured data. Without structured organization, valuable insights in such data often remain hidden.Graphy empowers users to extract predefined structures from unstructured data, organizing it into a graph format for enhanced visualization, analysis, and exploration.': + 'Graphy 是一个端到端的平台，旨在从大量非结构化数据中提取、可视化和分析信息。如果没有结构化的组织，这些数据中的宝贵见解往往会被隐藏起来。Graphy 赋能用户从非结构化数据中提取预定义的结构，并将其组织成图格式，以增强数据的可视化、分析和探索能力。', + 'An intuitive tool that transforms unstructured data into graph dataset.': + '一个直观的工具，能够将非结构化数据转换为图数据集，便于进一步分析和可视化。', + 'Configure and enable experimental tools for advanced graph data exploration and analysis.': + '配置和启用用于高级图形数据探索和分析的实验工具。', + Graphy: 'Graphy', }; diff --git a/packages/studio-website/src/pages/extension/index.tsx b/packages/studio-website/src/pages/extension/index.tsx index 2f6cb0fb7..c95006f2d 100644 --- a/packages/studio-website/src/pages/extension/index.tsx +++ b/packages/studio-website/src/pages/extension/index.tsx @@ -2,8 +2,7 @@ import * as React from 'react'; import Section from '../../components/section'; import Plugins from './plugins'; import { FormattedMessage } from 'react-intl'; -import { Flex } from 'antd'; -import { CreatePortal, SegmentedTabs, useStudioProvier } from '@graphscope/studio-components'; +import { SegmentedTabs } from '@graphscope/studio-components'; const Extension: React.FunctionComponent = () => { const items = [ diff --git a/packages/studio-website/src/pages/index.tsx b/packages/studio-website/src/pages/index.tsx index 4fab69b48..dfe9c640a 100644 --- a/packages/studio-website/src/pages/index.tsx +++ b/packages/studio-website/src/pages/index.tsx @@ -1,6 +1,6 @@ import React, { Suspense } from 'react'; import { Routes, Route, Navigate, HashRouter } from 'react-router-dom'; -import { StudioProvier, GlobalSpin } from '@graphscope/studio-components'; +import { ThemeProvider, GlobalSpin, LocaleProvider } from '@graphscope/studio-components'; import Layout from '../layouts'; import StoreProvider from '@graphscope/use-zustand'; import { initialStore } from '../layouts/useContext'; @@ -52,16 +52,18 @@ const Pages: React.FunctionComponent = props => { return ( - - - - }> - {routes} - {children} - - - - + + + + + }> + {routes} + {children} + + + + + ); }; diff --git a/packages/studio-website/src/pages/setting/International.tsx b/packages/studio-website/src/pages/setting/International.tsx index 136d0bf17..5806bb064 100644 --- a/packages/studio-website/src/pages/setting/International.tsx +++ b/packages/studio-website/src/pages/setting/International.tsx @@ -1,17 +1,17 @@ import React from 'react'; import { useContext } from '../../layouts/useContext'; import LocaleSwitch from '../../components/locale-switch'; -import { useStudioProvier } from '@graphscope/studio-components'; +import { useLocaleProvider } from '@graphscope/studio-components'; import type { ILocaleSwitchProps } from '../../components/locale-switch'; import SettingParcel from '../../components/setting-parcel'; const International: React.FunctionComponent = () => { const { store, updateStore } = useContext(); const { locale = 'en-US' } = store; - const { handleThemeOrLocale } = useStudioProvier(); + const { handleLocale } = useLocaleProvider(); const handleLocales = (value: ILocaleSwitchProps['value']) => { - handleThemeOrLocale({ locale: value }); + handleLocale({ locale: value }); updateStore(draft => { draft.locale = value; }); diff --git a/packages/studio-website/src/pages/setting/index.tsx b/packages/studio-website/src/pages/setting/index.tsx index f7d07fb3c..ada0f1374 100644 --- a/packages/studio-website/src/pages/setting/index.tsx +++ b/packages/studio-website/src/pages/setting/index.tsx @@ -1,17 +1,17 @@ import * as React from 'react'; import { Divider, Card, Row, Col, Typography, Flex } from 'antd'; import Section from '../../components/section'; -import InteractTheme from './interact-theme'; import PrimaryColor from './primary-color'; import RoundedCorner from './rounded-corner'; -import International from './International'; - +// import InteractTheme from './interact-theme'; +// import International from './International'; import QuerySetting from './query-setting'; import { FormattedMessage } from 'react-intl'; import Coordinator from './coordinator'; import GraphyPlugin from './plugins/graphy'; import ExplorePlugin from './plugins/explore'; +const { Meta } = Card; const Setting: React.FunctionComponent = () => { return (
{ ]} desc="Change how Untitled UI looks and feels in your browser" > - - - - + + + } - > - - - - - - - - + description={ + } - > - - - + style={{ paddingBottom: 24 }} + /> + + + + + {/* */} + - - - + + } - > - - - - - - - + } + style={{ paddingBottom: 24 }} + /> + {/* */} + + + + + + + + } - > - - - - - - - + description={ + + } + style={{ paddingBottom: 24 }} + /> + + + + + +
diff --git a/packages/studio-website/src/pages/setting/interact-theme.tsx b/packages/studio-website/src/pages/setting/interact-theme.tsx index 73a904c06..3b235ec84 100644 --- a/packages/studio-website/src/pages/setting/interact-theme.tsx +++ b/packages/studio-website/src/pages/setting/interact-theme.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import SelectCards from '../../components/select-cards'; import { FormattedMessage } from 'react-intl'; -import { useStudioProvier } from '@graphscope/studio-components'; +import { useThemeProvider } from '@graphscope/studio-components'; import SettingParcel from '../../components/setting-parcel'; const engines: any = [ @@ -21,9 +21,9 @@ const engines: any = [ }, ]; const InteractTheme: React.FunctionComponent = () => { - const { algorithm = 'defaultAlgorithm', handleThemeOrLocale } = useStudioProvier(); + const { algorithm = 'defaultAlgorithm', handleTheme } = useThemeProvider(); const changeEngineType = (item: { id: string }) => { - handleThemeOrLocale({ + handleTheme({ algorithm: item.id as 'defaultAlgorithm' | 'darkAlgorithm', }); }; diff --git a/packages/studio-website/src/pages/setting/plugins/explore.tsx b/packages/studio-website/src/pages/setting/plugins/explore.tsx index ed1ca4cde..01d108683 100644 --- a/packages/studio-website/src/pages/setting/plugins/explore.tsx +++ b/packages/studio-website/src/pages/setting/plugins/explore.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { Typography, Tooltip, Switch, Input, Flex, Space, Card } from 'antd'; import { QuestionCircleOutlined } from '@ant-design/icons'; +import { FormattedMessage } from 'react-intl'; import { togglePlugin } from '../../explore/slot'; export const PLUGIN_ID = 'EXPLORE'; export const PLUGIN_LOCAL_STORAGE_KEY = `PORTAL_PLUGIN_${PLUGIN_ID}`; @@ -16,17 +17,17 @@ const ExplorePlugin = () => { - Explore - + + }> - Explor is a tool that allows you to explore the graph data in a more visual way. + - Enable: + diff --git a/packages/studio-website/src/pages/setting/plugins/graphy.tsx b/packages/studio-website/src/pages/setting/plugins/graphy.tsx index e68dfbf46..7909e8e9b 100644 --- a/packages/studio-website/src/pages/setting/plugins/graphy.tsx +++ b/packages/studio-website/src/pages/setting/plugins/graphy.tsx @@ -4,6 +4,7 @@ import { QuestionCircleOutlined } from '@ant-design/icons'; import { Utils, Illustration } from '@graphscope/studio-components'; import { ROUTES, SIDE_MENU } from '@graphscope/graphy-website'; import { installSlot, unInstallSlot } from '../../../slots'; +import { FormattedMessage } from 'react-intl'; interface IGraphyPluginProps {} @@ -29,19 +30,16 @@ const GraphyPlugin: React.FunctionComponent = props => { - Graphy'ourData + } > - An intuitive tool that transforms unstructured data into graph dataset. + Enable: @@ -49,7 +47,6 @@ const GraphyPlugin: React.FunctionComponent = props => { Endpoint: - diff --git a/packages/studio-website/src/pages/setting/primary-color/index.tsx b/packages/studio-website/src/pages/setting/primary-color/index.tsx index 0bc40cb64..c2c1a258c 100644 --- a/packages/studio-website/src/pages/setting/primary-color/index.tsx +++ b/packages/studio-website/src/pages/setting/primary-color/index.tsx @@ -1,18 +1,18 @@ import React from 'react'; import { ColorPicker, Flex, Col, theme } from 'antd'; import SelectColor from './select-color'; -import { useStudioProvier } from '@graphscope/studio-components'; +import { useThemeProvider } from '@graphscope/studio-components'; import SettingParcel from '../../../components/setting-parcel'; const { useToken } = theme; const PrimaryColor: React.FunctionComponent = () => { - const { handleThemeOrLocale } = useStudioProvier(); + const { handleTheme } = useThemeProvider(); const { token } = useToken(); const { colorPrimary } = token; // Function to handle primary color change const handlePrimaryColor = (color: string) => { - handleThemeOrLocale({ token: { colorPrimary: color } }); + handleTheme({ token: { colorPrimary: color } }); }; return ( diff --git a/packages/studio-website/src/pages/setting/rounded-corner.tsx b/packages/studio-website/src/pages/setting/rounded-corner.tsx index ba972d7f6..ddd19cd45 100644 --- a/packages/studio-website/src/pages/setting/rounded-corner.tsx +++ b/packages/studio-website/src/pages/setting/rounded-corner.tsx @@ -1,16 +1,16 @@ import React from 'react'; import { InputNumber, Slider, theme } from 'antd'; -import { useStudioProvier } from '@graphscope/studio-components'; +import { useThemeProvider } from '@graphscope/studio-components'; import SettingParcel from '../../components/setting-parcel'; const { useToken } = theme; const RoundedCorner: React.FunctionComponent = () => { const { token } = useToken(); const { borderRadius } = token; - const { handleThemeOrLocale } = useStudioProvier(); + const { handleTheme } = useThemeProvider(); const handleBorderRadiusChange: (newBorderRadius: number | null) => void = newBorderRadius => { //@ts-ignore - handleThemeOrLocale({ token: { borderRadius: newBorderRadius } }); + handleTheme({ token: { borderRadius: newBorderRadius } }); }; return ( diff --git a/packages/studio-website/src/pages/utils.ts b/packages/studio-website/src/pages/utils.ts index a1272e00f..e4b164cf9 100644 --- a/packages/studio-website/src/pages/utils.ts +++ b/packages/studio-website/src/pages/utils.ts @@ -1,6 +1,6 @@ import { notification as notifications } from 'antd'; import { createTheme } from '@uiw/codemirror-themes'; -import { useStudioProvier, useCustomToken } from '@graphscope/studio-components'; +import { useThemeProvider, useCustomToken } from '@graphscope/studio-components'; export const getSearchParams = (location: Location) => { const { hash } = location; const [path, search] = hash.split('?'); @@ -34,7 +34,7 @@ export const notification = (type: string, data: any, defaultData?: string) => { //@ts-ignore export const useEditorTheme = (isEdit: boolean): any => { - const { algorithm } = useStudioProvier(); + const { algorithm } = useThemeProvider(); const { editorBackground, editorForeground } = useCustomToken(); const background = isEdit ? '#F5F5F5' : editorBackground; //@ts-ignore diff --git a/packages/use-zustand/.npmrc b/packages/use-zustand/.npmrc index e21cbf73e..d22a8f833 100644 --- a/packages/use-zustand/.npmrc +++ b/packages/use-zustand/.npmrc @@ -1,5 +1,5 @@ # 修改仓库镜像（中国镜像） -registry=https://registry.npmmirror.com +registry=http://registry.anpm.alibaba-inc.com # pnpm auto-install-peers=true git-checks=false \ No newline at end of file From 354e4f5c8568d0c03e57a457c6e479f37d175e8a Mon Sep 17 00:00:00 2001 From: xwj02155382 Date: Mon, 7 Apr 2025 14:05:09 +0800 Subject: [PATCH 2/2] fix: Modify image address --- .npmrc | 2 +- docs/interactive/.npmrc | 2 +- examples/graphy/.npmrc | 2 +- packages/use-zustand/.npmrc | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.npmrc b/.npmrc index d22a8f833..e21cbf73e 100644 --- a/.npmrc +++ b/.npmrc @@ -1,5 +1,5 @@ # 修改仓库镜像（中国镜像） -registry=http://registry.anpm.alibaba-inc.com +registry=https://registry.npmmirror.com # pnpm auto-install-peers=true git-checks=false \ No newline at end of file diff --git a/docs/interactive/.npmrc b/docs/interactive/.npmrc index d22a8f833..e21cbf73e 100644 --- a/docs/interactive/.npmrc +++ b/docs/interactive/.npmrc @@ -1,5 +1,5 @@ # 修改仓库镜像（中国镜像） -registry=http://registry.anpm.alibaba-inc.com +registry=https://registry.npmmirror.com # pnpm auto-install-peers=true git-checks=false \ No newline at end of file diff --git a/examples/graphy/.npmrc b/examples/graphy/.npmrc index a1b0dd985..af73bd109 100644 --- a/examples/graphy/.npmrc +++ b/examples/graphy/.npmrc @@ -1,4 +1,4 @@ # registry=https://registry.npmjs.com/ # 修改仓库镜像（中国镜像） -registry=http://registry.anpm.alibaba-inc.com \ No newline at end of file +registry=https://registry.npmmirror.com \ No newline at end of file diff --git a/packages/use-zustand/.npmrc b/packages/use-zustand/.npmrc index d22a8f833..e21cbf73e 100644 --- a/packages/use-zustand/.npmrc +++ b/packages/use-zustand/.npmrc @@ -1,5 +1,5 @@ # 修改仓库镜像（中国镜像） -registry=http://registry.anpm.alibaba-inc.com +registry=https://registry.npmmirror.com # pnpm auto-install-peers=true git-checks=false \ No newline at end of file