feat：站点资产国际化

README.md

@@ -29,7 +29,7 @@ G6VP 取名意为 AntV G6 Visualization Platform，曾用名 `AntV/GraphInsight`
 
 ![image](https://github.com/antvis/G6VP/assets/10703060/85667759-70b2-4166-8181-47cb9e9fa3a3)
 
-### 1.2 创建工作薄
+### 1.2 创建工作簿
 
 有了数据，我们便可以创建一个分析画布，创建画布的时候，我们可以选择不同的模版，模版来自资产包，也可以来自用户手动保存或者从资产清单选购的模版。
 

packages/gi-assets-basic/src/components/FilterPanel/Component.tsx

@@ -40,7 +40,8 @@ const FilterPanel: React.FunctionComponent<FilterPanelProps> = props => {
     node: { propertyName: string; entropy: number }[];
     edge: { propertyName: string; entropy: number }[];
   }>({ node: [], edge: [] });
-  const { source, updateContext, updateHistory, transform, schemaData, graph, propertyGraphData, useIntl } = useContext();
+  const { source, updateContext, updateHistory, transform, schemaData, graph, propertyGraphData, useIntl } =
+    useContext();
   const { formatMessage } = useIntl();
 
   useEffect(() => {
@@ -338,7 +339,7 @@ const FilterPanel: React.FunctionComponent<FilterPanelProps> = props => {
         onClick={() => addFilter()}
         icon={<PlusOutlined />}
       >
-        {formatMessage({id: 'FilterPanel.addfilter'})}
+        {formatMessage({ id: 'FilterPanel.addfilter' })}
       </Button>
       {enableInfoDetect ? (
         <Button style={{ width: '100px', marginLeft: '4px' }} onClick={handleClickRecommend}>

packages/gi-httpservice/app/router.ts

@@ -68,7 +68,7 @@ export default (app: Application) => {
   // router.post('/dataset/delete', controller.graphinsight.removeProjectById);
   // router.post('/dataset/update', controller.graphinsight.updateProjectById);
 
-  // project 工作薄
+  // project 工作簿
   router.post('/project/create', controller.graphinsight.createProject);
   router.post('/project/list', controller.graphinsight.listProject);
   router.post('/project/delete', controller.graphinsight.removeProjectById);

packages/gi-sdk/package.json

@@ -31,6 +31,7 @@
     "postpublish": "tnpm sync @antv/gi-sdk"
   },
   "dependencies": {
+    "@aligov/global-locale": "^1.0.5",
     "@antv/gi-common-components": "workspace:*",
     "@ant-design/icons": "^4.7.0",
     "immer": "^9.0.7",

packages/gi-sdk/src/GISDK.tsx

@@ -391,7 +391,7 @@ const GISDK = (props: Props) => {
   }, [data]);
 
   return (
-    <IntlProvider locale={language} messages={localeMessages}>
+    <IntlProvider locale={language as string} messages={localeMessages}>
       {/* @ts-ignore */}
       <GraphInsightContext.Provider value={ContextValue}>
         <GICC_LAYOUT_COMPONENT {...GICC_LAYOUT_PROPS}>

packages/gi-sdk/src/typing.ts

@@ -91,10 +91,10 @@ export interface Props {
   /** 注册的全局数据服务 */
   services: GIService[];
   /** 国际化语言配置 */
-  locales: {
+  locales?: {
     language: LANGUAGE_KEY_NAME;
     [k: string]: string;
-  }
+  };
   /**
    * style
    */

packages/gi-site/.must.config.js

@@ -0,0 +1,42 @@
+// more config: http://gitlab.alibaba-inc.com/parrot/parrot-tool-must/blob/master/doc/config.md
+module.exports = {
+  extract: {
+    name: 'gi-site',
+    sourcePath: 'src',
+    fileType: 'ts',
+    prettier: true,
+    macro: {
+      path: 'src/i18n',
+      method: '$i18n.get({id:"$key$",dm:"$defaultMessage$"})',
+      import: 'import $i18n from "src/i18n"',
+      keySplitter: '.',
+      placeholder: variable => {
+        return `{${variable}}`;
+      },
+      dependencies: ['@aligov/global-locale', '@aligov/global-string-format'],
+    },
+    babel: {
+      allowImportExportEverywhere: true,
+      decoratorsBeforeExport: true,
+      plugins: [
+        'asyncGenerators',
+        'classProperties',
+        'decorators-legacy',
+        'doExpressions',
+        'exportExtensions',
+        'exportDefaultFrom',
+        'typescript',
+        'functionSent',
+        'functionBind',
+        'jsx',
+        'objectRestSpread',
+        'dynamicImport',
+        'numericSeparator',
+        'optionalChaining',
+        'optionalCatchBinding',
+      ],
+    },
+    isNeedUploadCopyToMedusa: true,
+    sourceLang: 'zh-CN',
+  },
+};

packages/gi-site/package.json

@@ -14,13 +14,14 @@
     "build": "node --experimental-json-modules scripts/pre-build.mjs && NODE_OPTIONS=--max_old_space_size=4096 umi build",
     "build:docker": "node scripts/link.mjs && cd ../../ && npm run build:all:umd && cd packages/gi-site/ &&  BUILD_MODE=docker node scripts/pre-build.mjs  && node scripts/copy-assets.mjs && BUILD_MODE=docker  NODE_OPTIONS=--max_old_space_size=4096 umi build",
     "deploy": "node ./scripts/deploy.js",
-    "start": "node --experimental-json-modules scripts/link.mjs && node scripts/pre-build.mjs && cross-env NODE_OPTIONS=--max_old_space_size=4096 cross-env PORT=8000 umi dev",
+    "start": "node --experimental-json-modules scripts/link.mjs && node scripts/pre-build.mjs && cross-env NODE_OPTIONS=--openssl-legacy-provider --max_old_space_size=4096 cross-env PORT=8000 umi dev",
     "link": "node scripts/link.mjs",
     "unlink": "cross-env UNLINK=true node scripts/link.mjs",
     "eject": "cross-env EJECT=true node scripts/link.mjs"
-
   },
   "dependencies": {
+    "@aligov/global-locale": "^1.0.5",
+    "@aligov/global-string-format": "^1.0.7",
     "@ant-design/charts": "^1.0.21",
     "@ant-design/compatible": "^1.0.2",
     "@ant-design/icons": "^4.0.6",

packages/gi-site/src/components/AntGroupLogin/index.tsx

@@ -1,13 +1,34 @@
 import { AlipayCircleOutlined } from '@ant-design/icons';
 import { Button, Popover } from 'antd';
 import React from 'react';
+import $i18n from '../../i18n';
 const Notification = () => {
   const content = (
     <div>
-      <p>蚂蚁集团，阿里集团的同学，可以访问 G6VP 域内站点啦 🎉</p>
-      <p>✅ 支持域内用户，数据存放在云端，可根据权限进行查看与分享</p>
-      <p>✅ 支持域内用户，根据权限，新增/查看/使用 业务沉淀的图分析资产</p>
-      <p>✅ 支持域内用户，使用 ODPS 数据源，支持多款图计算引擎</p>
+      <p>
+        {$i18n.get({
+          id: 'gi-site.components.AntGroupLogin.AntGroupAlibabaGroupS',
+          dm: '蚂蚁集团，阿里集团的同学，可以访问 G6VP 域内站点啦 🎉',
+        })}
+      </p>
+      <p>
+        {$i18n.get({
+          id: 'gi-site.components.AntGroupLogin.SupportsUsersInTheDomain',
+          dm: '✅ 支持域内用户，数据存放在云端，可根据权限进行查看与分享',
+        })}
+      </p>
+      <p>
+        {$i18n.get({
+          id: 'gi-site.components.AntGroupLogin.SupportsUsersInTheDomain.1',
+          dm: '✅ 支持域内用户，根据权限，新增/查看/使用 业务沉淀的图分析资产',
+        })}
+      </p>
+      <p>
+        {$i18n.get({
+          id: 'gi-site.components.AntGroupLogin.SupportsDomainUsersOdpsData',
+          dm: '✅ 支持域内用户，使用 ODPS 数据源，支持多款图计算引擎',
+        })}
+      </p>
     </div>
   );
 
@@ -17,9 +38,14 @@ const Notification = () => {
 
   return (
     <>
-      <Popover title="内网登陆" content={content} placement="bottom" trigger="hover">
+      <Popover
+        title={$i18n.get({ id: 'gi-site.components.AntGroupLogin.IntranetLogin', dm: '内网登陆' })}
+        content={content}
+        placement="bottom"
+        trigger="hover"
+      >
         <Button icon={<AlipayCircleOutlined style={{ color: 'var(--primary-color)' }} />} onClick={handleClick}>
-          内网登陆
+          {$i18n.get({ id: 'gi-site.components.AntGroupLogin.IntranetLogin', dm: '内网登陆' })}
         </Button>
       </Popover>
     </>

packages/gi-site/src/components/AssetsCenter/AllAssets.tsx

@@ -5,7 +5,9 @@ import React from 'react';
 import { queryAssetList } from '../../services/assets';
 import AssetCard from './Card';
 import ComponentsPanel from './Components';
+import $i18n from '../../i18n';
 import './index.less';
+
 const { TabPane } = Tabs;
 const { Paragraph } = Typography;
 
@@ -16,17 +18,17 @@ interface AssetsCenterProps {
 }
 const options = [
   {
-    name: '组件',
+    name: $i18n.get({ id: 'gi-site.components.AssetsCenter.AllAssets.Component', dm: '组件' }),
     key: 'components',
     icon: <AppstoreOutlined />,
   },
   {
-    name: '元素',
+    name: $i18n.get({ id: 'gi-site.components.AssetsCenter.AllAssets.Element', dm: '元素' }),
     key: 'elements',
     icon: <BgColorsOutlined />,
   },
   {
-    name: '布局',
+    name: $i18n.get({ id: 'gi-site.components.AssetsCenter.AllAssets.Layout', dm: '布局' }),
     key: 'layouts',
     icon: <BranchesOutlined />,
   },

packages/gi-site/src/components/AssetsCenter/constants.tsx

@@ -10,72 +10,73 @@ import {
   SelectOutlined,
   SlackOutlined,
 } from '@ant-design/icons';
+import $i18n from '../../i18n';
 
 export const CategroyOptions = {
   'container-components': {
-    name: '容器组件',
+    name: $i18n.get({ id: 'gi-site.components.AssetsCenter.constants.ContainerComponents', dm: '容器组件' }),
     icon: <InsertRowBelowOutlined />,
     order: 1,
   },
   'canvas-interaction': {
-    name: '画布交互',
+    name: $i18n.get({ id: 'gi-site.components.AssetsCenter.constants.CanvasInteraction', dm: '画布交互' }),
     icon: <SelectOutlined />,
     order: 2,
   },
   'elements-interaction': {
-    name: '元素交互',
+    name: $i18n.get({ id: 'gi-site.components.AssetsCenter.constants.ElementInteraction', dm: '元素交互' }),
     icon: <PieChartOutlined />,
     order: 3,
   },
   'node-interaction': {
-    name: '节点交互',
+    name: $i18n.get({ id: 'gi-site.components.AssetsCenter.constants.NodeInteraction', dm: '节点交互' }),
     icon: <PieChartOutlined />,
     order: 3,
   },
   'system-interaction': {
-    name: '系统交互',
+    name: $i18n.get({ id: 'gi-site.components.AssetsCenter.constants.SystemInteraction', dm: '系统交互' }),
     icon: <SlackOutlined />,
     order: 4,
   },
   'styling-analysis': {
-    name: '样式分析',
+    name: $i18n.get({ id: 'gi-site.components.AssetsCenter.constants.StyleAnalysis', dm: '样式分析' }),
     icon: <BgColorsOutlined />,
     order: 5,
   },
   'data-analysis': {
-    name: '数据分析',
+    name: $i18n.get({ id: 'gi-site.components.AssetsCenter.constants.DataAnalysis', dm: '数据分析' }),
     icon: <BarChartOutlined />,
     order: 6,
   },
 
   'layout-analysis': {
-    name: '布局分析',
+    name: $i18n.get({ id: 'gi-site.components.AssetsCenter.constants.LayoutAnalysis', dm: '布局分析' }),
     icon: <BranchesOutlined />,
     order: 7,
   },
   'data-query': {
-    name: '数据查询',
+    name: $i18n.get({ id: 'gi-site.components.AssetsCenter.constants.DataQuery', dm: '数据查询' }),
     icon: <ConsoleSqlOutlined />,
     order: 8,
   },
   'algorithm-analysis': {
-    name: '算法分析',
+    name: $i18n.get({ id: 'gi-site.components.AssetsCenter.constants.AlgorithmAnalysis', dm: '算法分析' }),
     icon: <PieChartOutlined />,
     order: 9,
   },
   'scene-analysis': {
-    name: '场景分析',
+    name: $i18n.get({ id: 'gi-site.components.AssetsCenter.constants.ScenarioAnalysis', dm: '场景分析' }),
     icon: <PieChartOutlined />,
     order: 10,
   },
   workbook: {
-    name: '工作簿',
+    name: $i18n.get({ id: 'gi-site.components.AssetsCenter.constants.Workbook', dm: '工作簿' }),
     icon: <CarryOutOutlined />,
     order: 11,
   },
 };
 export const otherCategory = {
-  name: '未分类',
+  name: $i18n.get({ id: 'gi-site.components.AssetsCenter.constants.Uncategorized', dm: '未分类' }),
   icon: <QuestionCircleOutlined />,
   order: 12,
 };