Merge branch 'feat/add-intl' into 'develop'

Code review title: feat(intl): add translation
Code review description: 增加部分文案翻译
Code review Link: https://code.aone.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/codereview/8416010

packages/designer/src/builtin-simulator/bem-tools/border-detecting.tsx

@@ -5,6 +5,7 @@ import { TitleContent } from '@ali/lowcode-types';
 import { getClosestNode } from '@ali/lowcode-utils';
 
 import { BuiltinSimulatorHost } from '../host';
+import { intl } from '../../locale';
 
 
 export class BorderDetectingInstance extends PureComponent<{
@@ -37,7 +38,7 @@ export class BorderDetectingInstance extends PureComponent<{
       <div className={className} style={style}>
         <Title title={title} className="lc-borders-title" />
         {
-          isLocked ? (<Title title="已锁定" className="lc-borders-status" />) : null
+          isLocked ? (<Title title={intl('Locked')} className="lc-borders-status" />) : null
         }
       </div>
     );

packages/designer/src/locale/en-US.json

@@ -5,5 +5,6 @@
   "lock": "Lock",
   "unlock": "Unlock",
   "Condition Group": "Condition Group",
-  "No opened document": "No opened document, open some document to editing"
+  "No opened document": "No opened document, open some document to editing",
+  "Locked": "Locked"
 }

packages/designer/src/locale/zh-CN.json

@@ -5,5 +5,6 @@
   "lock": "锁定",
   "unlock": "解锁",
   "Condition Group": "条件组",
-  "No opened document": "没有打开的页面，请选择页面打开编辑"
+  "No opened document": "没有打开的页面，请选择页面打开编辑",
+  "Locked": "已锁定"
 }

packages/editor-skeleton/src/components/field/fields.tsx

@@ -7,6 +7,7 @@ import { IEditor, TitleContent } from '@ali/lowcode-types';
 import { PopupPipe, PopupContext } from '../popup';
 import './index.less';
 import InlineTip from './inlinetip';
+import { intl } from '../../locale';
 
 export interface FieldProps {
   className?: string;
@@ -105,22 +106,22 @@ export class Field extends Component<FieldProps> {
   getTipContent(propName: string, tip?: any): any {
     let tipContent = (
       <div>
-        <div>属性：{propName}</div>
+        <div>{intl('PropName:')}{propName}</div>
       </div>
     );
 
     if (isObject(tip)) {
       tipContent = (
         <div>
-          <div>属性：{propName}</div>
-          <div>说明：{(tip as any).content}</div>
+          <div>{intl('PropName:')}{propName}</div>
+          <div>{intl('Explanation:')}{(tip as any).content}</div>
         </div>
       );
     } else if (tip) {
       tipContent = (
         <div>
-          <div>属性：{propName}</div>
-          <div>说明：{tip}</div>
+          <div>{intl('PropName:')}{propName}</div>
+          <div>{intl('Explanation:')}{tip}</div>
         </div>
       );
     }

packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx

@@ -7,6 +7,7 @@ import { SettingsPane } from './settings-pane';
 import { StageBox } from '../stage-box';
 import { SkeletonContext } from '../../context';
 import { createIcon } from '@ali/lowcode-utils';
+import { intl } from '../../locale';
 
 @observer
 export class SettingsPrimaryPane extends Component<{ editor: Editor; config: any }, { shouldIgnoreRoot: boolean }> {
@@ -133,7 +134,7 @@ export class SettingsPrimaryPane extends Component<{ editor: Editor; config: any
       return (
         <div className="lc-settings-main">
           <div className="lc-settings-notice">
-            <p>请在左侧画布选中节点</p>
+            <p>{intl('Please select the node on the left canvas')}</p>
           </div>
         </div>
       );
@@ -144,7 +145,7 @@ export class SettingsPrimaryPane extends Component<{ editor: Editor; config: any
       return (
         <div className="lc-settings-main">
           <div className="lc-settings-notice">
-            <p>该节点已被锁定，无法配置</p>
+            <p>{intl('Locked node cannot be configured')}</p>
           </div>
         </div>
       );
@@ -153,7 +154,7 @@ export class SettingsPrimaryPane extends Component<{ editor: Editor; config: any
       return (
         <div className="lc-settings-main">
           <div className="lc-settings-notice">
-            <p>该组件暂无配置</p>
+            <p>{intl('There is no configuration for this component')}</p>
           </div>
         </div>
       );
@@ -164,7 +165,7 @@ export class SettingsPrimaryPane extends Component<{ editor: Editor; config: any
       return (
         <div className="lc-settings-main">
           <div className="lc-settings-notice">
-            <p>请选中同一类型节点编辑</p>
+            <p>{intl('Please select the same type of node to edit')}</p>
           </div>
         </div>
       );

packages/editor-skeleton/src/components/slot-setter/index.tsx

@@ -2,6 +2,7 @@ import { Component } from 'react';
 import { isJSSlot } from '@ali/lowcode-types';
 import { Button, Input, Icon } from '@alifd/next';
 import './index.less';
+import { intl } from '../../locale';
 
 export default class SlotSetter extends Component<{
   value: any;
@@ -30,7 +31,7 @@ export default class SlotSetter extends Component<{
     if (!isJSSlot(value)) {
       return (
         <Button type="primary" onClick={this.handleInitial}>
-          开启插槽
+          {intl('Open slot')}
         </Button>
       );
     }
@@ -46,13 +47,13 @@ export default class SlotSetter extends Component<{
           }}
           type="secondary"
         >
-          关闭插槽
+          {intl('Close slot')}
         </Button>
         {hasParams ? (
           <Input
             className="lc-slot-params"
-            addonTextBefore="入参"
-            placeholder="插槽入参，以逗号风格"
+            addonTextBefore={intl('Parameter')}
+            placeholder={intl('ParameterPlaceholder')}
             value={value.params!.join(',')}
             autoFocus
             onChange={(val) => {
@@ -91,7 +92,7 @@ export default class SlotSetter extends Component<{
                 });
             }}
           >
-            添加入参
+            {intl('Add parameters')}
           </Button>
         ) : null}
       </div>

packages/editor-skeleton/src/locale/en-US.json

@@ -5,5 +5,16 @@
   "Multiple Value, Click to Clear": "Multiple Value, Click to Clear",
   "Required": "Required",
   "Setted Value, Click to Clear": "Setted Value, Click to Clear",
-  "Multiple Value": "Multiple Value"
+  "Multiple Value": "Multiple Value",
+  "Please select the node on the left canvas": "Please select the node on the left canvas",
+  "Locked node cannot be configured": "Locked node cannot be configured",
+  "There is no configuration for this component": "There is no configuration for this component",
+  "Please select the same type of node to edit": "Please select the same type of node to edit",
+  "PropName:": "Prop: ",
+  "Explanation:": "Explanation: ",
+  "Open slot": "Open slot",
+  "Close slot": "Close slot",
+  "Add parameters": "Add parameters",
+  "Parameter": "Parameter",
+  "ParameterPlaceholder": "Slot input parameters, separated by commas"
 }

packages/editor-skeleton/src/locale/zh-CN.json

@@ -5,5 +5,17 @@
   "Multiple Value, Click to Clear": "多种值, 点击清除",
   "Required": "必填项",
   "Setted Value, Click to Clear": "已设置值，点击清除",
-  "Multiple Value": "多种值"
+  "Multiple Value": "多种值",
+  "Please select the node on the left canvas": "请在左侧画布选中节点",
+  "The node is locked and cannot be configured": "该节点已被锁定，无法配置",
+  "Locked node cannot be configured": "该节点已被锁定，无法配置",
+  "There is no configuration for this component": "该组件暂无配置",
+  "Please select the same type of node to edit": "请选中同一类型节点编辑",
+  "PropName:": "属性：",
+  "Explanation:": "说明：",
+  "Open slot": "开启插槽",
+  "Close slot": "关闭插槽",
+  "Add parameters": "添加入参",
+  "Parameter": "入参",
+  "ParameterPlaceholder": "插槽入参，以逗号分隔"
 }

packages/plugin-outline-pane/src/locale/en-US.json

@@ -10,5 +10,6 @@
   "Loop": "Loop",
   "Slots": "Slots",
   "Slot for {prop}": "Slot for {prop}",
-  "Outline Tree": "Outline Tree"
+  "Outline Tree": "Outline Tree",
+  "Modal Views": "Modal Views"
 }

packages/plugin-outline-pane/src/locale/zh-CN.json

@@ -10,5 +10,6 @@
   "Loop": "循环",
   "Slots": "插槽",
   "Slot for {prop}": "属性 {prop} 的插槽",
-  "Outline Tree": "大纲树"
+  "Outline Tree": "大纲树",
+  "Modal Views": "模态视图层"
 }

packages/plugin-outline-pane/src/views/root-tree-node.tsx

@@ -6,6 +6,7 @@ import TreeNode from '../tree-node';
 import TreeTitle from './tree-title';
 import TreeBranches from './tree-branches';
 import { IconEyeClose } from '../icons/eye-close';
+import { intl } from '../locale';
 
 @observer
 class ModalTreeNodeView extends Component<{ treeNode: TreeNode }> {
@@ -37,7 +38,7 @@ class ModalTreeNodeView extends Component<{ treeNode: TreeNode }> {
     return (
       <div className="tree-node-modal">
         <div className="tree-node-modal-title">
-          <span>模态视图层</span>
+          <span>{intl('Modal Views')}</span>
           <div
             className="tree-node-modal-title-visible-icon"
             onClick={this.hideAllNodes.bind(this)}

packages/rax-simulator-renderer/src/locale/en-US.json

@@ -0,0 +1,3 @@
+{
+  "Drag and drop components or templates here": "Drag and drop components or templates here"
+}

packages/rax-simulator-renderer/src/locale/index.ts

@@ -0,0 +1,10 @@
+import { createIntl } from '@ali/lowcode-editor-core';
+import en_US from './en-US.json';
+import zh_CN from './zh-CN.json';
+
+const { intl, intlNode, getLocale, setLocale } = createIntl({
+  'en-US': en_US,
+  'zh-CN': zh_CN,
+});
+
+export { intl, intlNode, getLocale, setLocale };

packages/rax-simulator-renderer/src/locale/zh-CN.json

@@ -0,0 +1,3 @@
+{
+  "Drag and drop components or templates here": "拖拽组件或模板到这里"
+}

packages/rax-simulator-renderer/src/renderer-view.tsx

@@ -7,6 +7,7 @@ import './renderer.less';
 import { uniqueId } from '@ali/lowcode-utils';
 import { GlobalEvent } from '@ali/lowcode-types';
 import { host } from './host';
+import { intl } from './locale';
 
 // patch cloneElement avoid lost keyProps
 const originCloneElement = (window as any).Rax.cloneElement;
@@ -69,8 +70,8 @@ export default class SimulatorRendererView extends Component<{ rendererContainer
 }
 
 export const Routes = (props: {
-  rendererContainer: SimulatorRendererContainer,
-  history: History
+  rendererContainer: SimulatorRendererContainer;
+  history: History;
 }) => {
   const { rendererContainer, history } = props;
   const { documentInstances } = rendererContainer;
@@ -238,7 +239,7 @@ class Renderer extends Component<{
           ) {
             children = (
               <div className="lc-container-placeholder" style={viewProps.placeholderStyle}>
-                {viewProps.placeholder || '拖拽组件或模板到这里'}
+                {viewProps.placeholder || intl('Drag and drop components or templates here')}
               </div>
             );
           }

packages/react-simulator-renderer/src/locale/en-US.json

@@ -0,0 +1,4 @@
+{
+  "Drag and drop components or templates here": "Drag and drop components or templates here",
+  "Locked elements and child elements cannot be edited": "Locked elements and child elements cannot be edited"
+}

packages/react-simulator-renderer/src/locale/index.ts

@@ -0,0 +1,10 @@
+import { createIntl } from '@ali/lowcode-editor-core';
+import en_US from './en-US.json';
+import zh_CN from './zh-CN.json';
+
+const { intl, intlNode, getLocale, setLocale } = createIntl({
+  'en-US': en_US,
+  'zh-CN': zh_CN,
+});
+
+export { intl, intlNode, getLocale, setLocale };

packages/react-simulator-renderer/src/locale/zh-CN.json

@@ -0,0 +1,4 @@
+{
+  "Drag and drop components or templates here": "拖拽组件或模板到这里",
+  "Locked elements and child elements cannot be edited": "锁定元素及子元素无法编辑"
+}

packages/react-simulator-renderer/src/renderer-view.tsx

@@ -8,6 +8,7 @@ import { getClosestNode, isFromVC } from '@ali/lowcode-utils';
 import { GlobalEvent } from '@ali/lowcode-types';
 import { SimulatorRendererContainer, DocumentInstance } from './renderer';
 import { host } from './host';
+import { intl } from './locale';
 
 import './renderer.less';
 
@@ -206,12 +207,12 @@ class Renderer extends Component<{
             (children == null || (Array.isArray(children) && !children.length)) &&
             (!viewProps.style || Object.keys(viewProps.style).length === 0)
           ) {
-            let defaultPlaceholder = '拖拽组件或模板到这里';
+            let defaultPlaceholder = intl('Drag and drop components or templates here');
             const lockedNode = getClosestNode(leaf, (node) => {
               return node?.getExtraProp('isLocked')?.getValue() === true;
             });
             if (lockedNode) {
-              defaultPlaceholder = '锁定元素及子元素无法编辑';
+              defaultPlaceholder = intl('Locked elements and child elements cannot be edited');
             }
             children = (
               <div className={cn('lc-container-placeholder', { 'lc-container-locked': !!lockedNode })} style={viewProps.placeholderStyle}>

packages/vision-polyfill/src/bundle/upgrade-metadata.ts

@@ -13,6 +13,7 @@ import {
   isJSExpression,
 } from '@ali/lowcode-types';
 import { editorCabin, designerCabin } from '@ali/lowcode-engine';
+import { intl } from '../locale';
 
 const { SettingField } = designerCabin;
 const { untracked } = editorCabin;
@@ -270,7 +271,7 @@ function getTipAttr(tip: Tip, attrName: string, decorator: (originalValue: strin
 }
 
 function getTipContent(tip: Tip, name: string): string {
-  return getTipAttr(tip, 'content', (v) => `属性：${name} | 说明：${v}`);
+  return getTipAttr(tip, 'content', (v) => `${intl('PropName:')}${name} | ${intl('Explanation:')}${v}`);
 }
 
 export function upgradePropConfig(config: OldPropConfig, collector: ConfigCollector) {
@@ -802,10 +803,9 @@ export function upgradeMetadata(oldConfig: OldPrototypeConfig) {
         schema,
       };
     });
-  }
-  // FIXME! defaultProps for initial input
-  // initialChildren maybe a function
-  else if (defaultProps || initialChildren) {
+  } else if (defaultProps || initialChildren) {
+    // FIXME! defaultProps for initial input
+    // initialChildren maybe a function
     const snippet = {
       screenshot: icon,
       label: title,

packages/vision-polyfill/src/fields/field.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { Component } from 'react';
 import InlineTip from './inlinetip';
 import { isPlainObject } from '@ali/lowcode-utils';
+import { intl } from '../locale';
 
 interface IHelpTip {
   url?: string;
@@ -26,7 +27,7 @@ function getFieldTitle(title: string, tip: IHelpTip, compact?: boolean, propName
 
   tipContent = (
     <div>
-      <div>属性：{propName}</div>
+      <div>{intl('PropName:')}{propName}</div>
     </div>
   );
 
@@ -34,15 +35,15 @@ function getFieldTitle(title: string, tip: IHelpTip, compact?: boolean, propName
     tipUrl = tip.url;
     tipContent = (
       <div>
-        <div>属性：{propName}</div>
-        <div>说明：{tip.content}</div>
+        <div>{intl('PropName:')}{propName}</div>
+        <div>{intl('Explanation:')}{tip.content}</div>
       </div>
     );
   } else if (tip) {
     tipContent = (
       <div>
-        <div>属性：{propName}</div>
-        <div>说明：{tip}</div>
+        <div>{intl('PropName:')}{propName}</div>
+        <div>{intl('Explanation:')}{tip}</div>
       </div>
     );
   }

packages/vision-polyfill/src/fields/fields.tsx

@@ -6,6 +6,7 @@ import VEField, { IVEFieldProps } from './field';
 import { SettingField } from './setting-field';
 import VariableSwitcher from './variable-switcher';
 import popups from '@ali/ve-popups';
+import { intl } from '../locale';
 
 import './fields.less';
 
@@ -29,8 +30,8 @@ function renderTip(tip: IHelpTip, prop?: { propName?: string }) {
     return (
       <Icons.Tip position="top" url={tip.url} key="icon-tip" className="engine-field-tip-icon">
         <div>
-          <div>属性：{propName}</div>
-          <div>说明：{tip.content}</div>
+          <div>{intl('PropName:')}{propName}</div>
+          <div>{intl('Explanation:')}{tip.content}</div>
         </div>
       </Icons.Tip>
     );
@@ -38,8 +39,8 @@ function renderTip(tip: IHelpTip, prop?: { propName?: string }) {
   return (
     <Icons.Tip position="top" key="icon" className="engine-field-tip-icon">
       <div>
-        <div>属性：{propName}</div>
-        <div>说明：{tip}</div>
+        <div>{intl('PropName:')}{propName}</div>
+        <div>{intl('Explanation:')}{tip}</div>
       </div>
     </Icons.Tip>
   );

packages/vision-polyfill/src/locale/en-US.json

@@ -0,0 +1,4 @@
+{
+  "PropName:": "Prop: ",
+  "Explanation:": "Explanation: "
+}

packages/vision-polyfill/src/locale/index.ts

@@ -0,0 +1,10 @@
+import { createIntl } from '@ali/lowcode-editor-core';
+import en_US from './en-US.json';
+import zh_CN from './zh-CN.json';
+
+const { intl, intlNode, getLocale, setLocale } = createIntl({
+  'en-US': en_US,
+  'zh-CN': zh_CN,
+});
+
+export { intl, intlNode, getLocale, setLocale };

packages/vision-polyfill/src/locale/zh-CN.json

@@ -0,0 +1,4 @@
+{
+  "PropName:": "属性：",
+  "Explanation:": "说明："
+}