fix(plugin-outline-pane): fix text display errors and improve internationalization

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

@@ -11,5 +11,12 @@
   "Slots": "Slots",
   "Slot for {prop}": "Slot for {prop}",
   "Outline Tree": "Outline Tree",
+  "Filter Node": "Filter Node",
+  "Check All": "Check All",
+  "Conditional rendering": "Conditional rendering",
+  "Loop rendering": "Loop rendering",
+  "Locked": "Locked",
+  "Hidden": "Hidden",
+  "Modal View": "Modal View",
   "Rename": "Rename"
 }

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

@@ -11,5 +11,12 @@
   "Slots": "插槽",
   "Slot for {prop}": "属性 {prop} 的插槽",
   "Outline Tree": "大纲树",
+  "Filter Node": "过滤节点",
+  "Check All": "全选",
+  "Conditional rendering": "条件渲染",
+  "Loop rendering": "循环渲染",
+  "Locked": "已锁定",
+  "Hidden": "已隐藏",
+  "Modal View": "模态视图层",
   "Rename": "重命名"
 }

packages/plugin-outline-pane/src/views/filter-tree.ts

@@ -9,16 +9,16 @@ export const FilterType = {
 
 export const FILTER_OPTIONS = [{
   value: FilterType.CONDITION,
-  label: '条件渲染',
+  label: 'Conditional rendering',
 }, {
   value: FilterType.LOOP,
-  label: '循环渲染',
+  label: 'Loop rendering',
 }, {
   value: FilterType.LOCKED,
-  label: '已锁定',
+  label: 'Locked',
 }, {
   value: FilterType.HIDDEN,
-  label: '已隐藏',
+  label: 'Hidden',
 }];
 
 export const matchTreeNode = (

packages/plugin-outline-pane/src/views/filter.tsx

@@ -5,10 +5,11 @@ import { Search, Checkbox, Balloon, Divider } from '@alifd/next';
 import TreeNode from '../controllers/tree-node';
 import { Tree } from '../controllers/tree';
 import { matchTreeNode, FILTER_OPTIONS } from './filter-tree';
-
+import { IPublicModelPluginContext } from '@alilc/lowcode-types';
 
 export default class Filter extends Component<{
   tree: Tree;
+  pluginContext: IPublicModelPluginContext;
 }, {
   keywords: string;
   filterOps: string[];
@@ -55,7 +56,7 @@ export default class Filter extends Component<{
         <Search
           hasClear
           shape="simple"
-          placeholder="过滤节点"
+          placeholder={this.props.pluginContext.intl('Filter Node')}
           className="lc-outline-filter-search-input"
           value={keywords}
           onChange={this.handleSearchChange}
@@ -76,7 +77,7 @@ export default class Filter extends Component<{
             indeterminate={indeterminate}
             onChange={this.handleCheckAll}
           >
-            全选
+            {this.props.pluginContext.intlNode('Check All')}
           </Checkbox>
           <Divider />
           <Checkbox.Group
@@ -90,7 +91,7 @@ export default class Filter extends Component<{
                 value={op.value}
                 key={op.value}
               >
-                {op.label}
+                {this.props.pluginContext.intlNode(op.label)}
               </Checkbox>
             ))}
           </Checkbox.Group>

packages/plugin-outline-pane/src/views/pane.tsx

@@ -6,7 +6,6 @@ import { IPublicModelPluginContext } from '@alilc/lowcode-types';
 import Filter from './filter';
 import { TreeMaster } from '../controllers/tree-master';
 
-
 export class Pane extends Component<{
   config: any;
   pluginContext: IPublicModelPluginContext;
@@ -40,7 +39,7 @@ export class Pane extends Component<{
 
     return (
       <div className="lc-outline-pane">
-        <Filter tree={tree} />
+        <Filter tree={tree} pluginContext={this.props.pluginContext} />
         <div ref={(shell) => this.controller.mount(shell)} className="lc-outline-tree-container">
           <TreeView key={tree.id} tree={tree} pluginContext={this.props.pluginContext} />
         </div>

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

@@ -38,7 +38,7 @@ class ModalTreeNodeView extends Component<{
     return (
       <div className="tree-node-modal">
         <div className="tree-node-modal-title">
-          <span>模态视图层</span>
+          <span>{this.pluginContext.intlNode('Modal View')}</span>
           <div
             className="tree-node-modal-title-visible-icon"
             onClick={this.hideAllNodes.bind(this)}