Skip to content

Commit 4500aba

Browse files
liujupingliujuping
committed
feat: add i18n to plugin-view-manager-pane
1 parent 84720d4 commit 4500aba

14 files changed

Lines changed: 488 additions & 313 deletions

File tree

‎packages/plugin-view-manager-pane/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@alilc/lowcode-plugin-view-manager-pane",
3-
"version": "1.0.0",
3+
"version": "1.0.1",
44
"description": "alibaba lowcode editor undo redo plugin",
55
"files": [
66
"es",
@@ -18,8 +18,8 @@
1818
"editor"
1919
],
2020
"dependencies": {
21-
"@alilc/lowcode-utils": "^1.0.0",
2221
"@alilc/lowcode-types": "^1.0.0",
22+
"@alilc/lowcode-utils": "^1.0.0",
2323
"react": "^16.8.1",
2424
"react-dom": "^16.8.1"
2525
},

‎packages/plugin-view-manager-pane/src/components/addFile/behaviors.tsx‎

Lines changed: 63 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import React from "react";
1+
import React from 'react';
22
import { Balloon } from '@alifd/next';
33
import { IPublicModelResource } from '@alilc/lowcode-types';
4-
import { OthersIcon } from "../resourceTree/icon";
5-
import { IOptions } from "../..";
4+
import { OthersIcon } from '../resourceTree/icon';
5+
import { IOptions } from '../..';
6+
import { intl } from '../../locale';
67

78
export function Behaviors(props: {
89
resource: IPublicModelResource;
@@ -30,62 +31,72 @@ export function Behaviors(props: {
3031
return (
3132
<Balloon
3233
v2
33-
trigger={(
34-
<div className="resource-tree-group-item-behaviors-trigger" onClick={(e) => {
35-
e.stopPropagation();
36-
e.preventDefault();
37-
}}>
34+
trigger={
35+
<div
36+
className="resource-tree-group-item-behaviors-trigger"
37+
onClick={(e) => {
38+
e.stopPropagation();
39+
e.preventDefault();
40+
}}
41+
>
3842
<OthersIcon />
3943
</div>
40-
)}
44+
}
4145
triggerType="click"
42-
align='bl'
43-
popupClassName='view-pane-popup'
46+
align="bl"
47+
popupClassName="view-pane-popup"
4448
closable={false}
4549
visible={props.showBehaviors}
4650
safeNode={props.safeNode}
4751
onVisibleChange={props.onVisibleChange}
4852
>
49-
{
50-
behaviors.map(d => {
51-
let text, handleLowcodeClick, handlePageClick;
52-
switch(d) {
53-
case 'edit':
54-
text = `${description}设置`;
55-
handleLowcodeClick = props.options?.onEditComponent;
56-
handlePageClick = props.options?.onEditPage;
57-
break;
58-
case 'copy':
59-
text = `复制${description}`;
60-
handleLowcodeClick = props.options?.onCopyComponent;
61-
handlePageClick = props.options?.onCopyPage;
62-
break;
63-
case 'delete':
64-
text = `删除${description}`;
65-
handleLowcodeClick = props.options?.onDeleteComponent;
66-
handlePageClick = props.options?.onDeletePage;
67-
break;
68-
}
53+
{behaviors.map((d) => {
54+
let text, handleLowcodeClick, handlePageClick;
55+
switch (d) {
56+
case 'edit':
57+
text = intl(
58+
'view_manager.components.addFile.behaviors.DescriptionSettings',
59+
{ description: description }
60+
);
61+
handleLowcodeClick = props.options?.onEditComponent;
62+
handlePageClick = props.options?.onEditPage;
63+
break;
64+
case 'copy':
65+
text = intl(
66+
'view_manager.components.addFile.behaviors.CopyDescription',
67+
{ description: description }
68+
);
69+
handleLowcodeClick = props.options?.onCopyComponent;
70+
handlePageClick = props.options?.onCopyPage;
71+
break;
72+
case 'delete':
73+
text = intl(
74+
'view_manager.components.addFile.behaviors.DeleteDescription',
75+
{ description: description }
76+
);
77+
handleLowcodeClick = props.options?.onDeleteComponent;
78+
handlePageClick = props.options?.onDeletePage;
79+
break;
80+
}
6981

70-
return (
71-
<div
72-
onClick={(e) => {
73-
e.stopPropagation();
74-
e.preventDefault();
75-
props.onVisibleChange(false);
76-
if (name === 'lowcode') {
77-
handleLowcodeClick(props.resource);
78-
} else {
79-
handlePageClick(props.resource);
80-
}
81-
}}
82-
className='view-pane-popup-item'
83-
>
84-
{text}
85-
</div>
86-
)
87-
})
88-
}
82+
return (
83+
<div
84+
onClick={(e) => {
85+
e.stopPropagation();
86+
e.preventDefault();
87+
props.onVisibleChange(false);
88+
if (name === 'lowcode') {
89+
handleLowcodeClick(props.resource);
90+
} else {
91+
handlePageClick(props.resource);
92+
}
93+
}}
94+
className="view-pane-popup-item"
95+
>
96+
{text}
97+
</div>
98+
);
99+
})}
89100
</Balloon>
90-
)
91-
}
101+
);
102+
}

‎packages/plugin-view-manager-pane/src/components/addFile/index.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
.next-overlay-wrapper .next-overlay-inner.view-pane-popup {
22
padding: 6px 0;
3-
background-color: #fff;
4-
box-shadow: 0 0 6px 0 rgba(0,0,0,0.44);
3+
background: var(--color-pane-background, #fff);
4+
box-shadow: 0 0 6px 0 var(--color-layer-mask-background, rgba(0,0,0,0.44));
55
border-radius: 2px;
66

77
&::after {
88
display: none;
99
}
1010

1111
.view-pane-popup-item {
12-
width: 130px;
1312
height: 28px;
1413
line-height: 28px;
1514
padding: 0 12px;
15+
color: var(--color-text);
1616
cursor: pointer;
1717

1818
&:hover {
19-
background-color: var(--color-fill1-2, #f1f3f6);
19+
background-color: var(--color-block-background-light, #f1f3f6);
2020
}
2121
}
2222
}

‎packages/plugin-view-manager-pane/src/components/addFile/index.tsx‎

Lines changed: 32 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import { Balloon } from '@alifd/next';
22
import * as React from 'react';
3-
import { observer } from "mobx-react"
3+
import { observer } from 'mobx-react';
44
import { AddIcon } from '../../icon';
55
import { IOptions } from '../..';
66

77
import './index.scss';
8+
import { intl } from '../../locale';
89

9-
function AddFileComponent(props: {
10-
options: IOptions;
11-
}) {
10+
function AddFileComponent(props: { options: IOptions }) {
1211
if (!props.options?.onAddPage && !props.options?.onAddComponent) {
1312
return null;
1413
}
@@ -17,40 +16,40 @@ function AddFileComponent(props: {
1716
<>
1817
<Balloon
1918
v2
20-
trigger={<span><AddIcon /></span>}
19+
trigger={
20+
<span>
21+
<AddIcon />
22+
</span>
23+
}
2124
triggerType="click"
22-
align='bl'
23-
popupClassName='view-pane-popup'
25+
align="bl"
26+
popupClassName="view-pane-popup"
2427
closable={false}
2528
>
26-
{
27-
props.options.onAddPage ? (
28-
<div
29-
onClick={(e) => {
30-
props.options.onAddPage();
31-
}}
32-
className='view-pane-popup-item'
33-
>
34-
新建页面
35-
</div>
36-
) : null
37-
}
29+
{props.options.onAddPage ? (
30+
<div
31+
onClick={(e) => {
32+
props.options.onAddPage?.();
33+
}}
34+
className="view-pane-popup-item"
35+
>
36+
{intl('view_manager.components.addFile.CreatePage')}
37+
</div>
38+
) : null}
3839

39-
{
40-
props.options.onAddComponent ? (
41-
<div
42-
className='view-pane-popup-item'
43-
onClick={(e) => {
44-
props.options.onAddComponent();
45-
}}
46-
>
47-
新建组件
48-
</div>
49-
) : null
50-
}
40+
{props.options.onAddComponent ? (
41+
<div
42+
className="view-pane-popup-item"
43+
onClick={(e) => {
44+
props.options.onAddComponent?.();
45+
}}
46+
>
47+
{intl('view_manager.components.addFile.CreateAComponent')}
48+
</div>
49+
) : null}
5150
</Balloon>
5251
</>
53-
)
52+
);
5453
}
5554

56-
export const AddFile = observer(AddFileComponent);
55+
export const AddFile = observer(AddFileComponent);

‎packages/plugin-view-manager-pane/src/components/resourceTree/icon.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ import { SVGIcon, IconProps } from '@alilc/lowcode-utils';
44
export const FileIcon = () => {
55
return (
66
<svg width="13px" viewBox="0 0 12 10" version="1.1" xmlns="http://www.w3.org/2000/svg">
7-
<g id="视图面板分镜" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
8-
<g id="画板" transform="translate(-870.000000, -540.000000)" fill="#5894FF" fill-rule="nonzero">
9-
<g id="编组-8" transform="translate(845.000000, 106.000000)">
10-
<g id="编组-2" transform="translate(25.000000, 428.000000)">
11-
<g id="编组" transform="translate(0.000000, 3.000000)">
12-
<path d="M0.95109375,6.82898437 L0,10.31625 L0,3.625 C0.000387484524,3.27998266 0.279982657,3.00038749 0.624999996,2.99999765 L3.5946875,2.99999765 C3.76053924,2.99954423 3.91968069,3.06545698 4.03664062,3.18304687 L5.31695312,4.46335938 C5.34031447,4.48690772 5.37214224,4.50010597 5.4053125,4.49999765 L9.875,4.49999765 C10.2200173,4.50038749 10.4996125,4.77998266 10.5,5.125 L10.5,5.99999765 L2.03640625,5.99999765 C1.52937862,6.00082464 1.08528165,6.34003519 0.95109375,6.82898437 Z M11.7557813,6.745625 C11.6380118,6.59023627 11.4540362,6.49926127 11.2590625,6.49999554 L2.03640625,6.49999554 C1.75461929,6.50053437 1.50787274,6.68915897 1.4334375,6.9609375 L0.137968746,11.7109375 C0.086858708,11.8988145 0.126226378,12.0997785 0.244446437,12.2544848 C0.362666496,12.409191 0.546232613,12.4999955 0.740937504,12.4999955 L9.96359375,12.4999955 C10.2453807,12.4994656 10.4921273,12.310841 10.5665625,12.0390625 L11.8620313,7.2890625 C11.9138564,7.10126887 11.8744839,6.90003814 11.7557031,6.745625 L11.7557813,6.745625 Z" id="形状"></path>
7+
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
8+
<g transform="translate(-870.000000, -540.000000)" fill="currentColor" fill-rule="nonzero">
9+
<g transform="translate(845.000000, 106.000000)">
10+
<g transform="translate(25.000000, 428.000000)">
11+
<g transform="translate(0.000000, 3.000000)">
12+
<path d="M0.95109375,6.82898437 L0,10.31625 L0,3.625 C0.000387484524,3.27998266 0.279982657,3.00038749 0.624999996,2.99999765 L3.5946875,2.99999765 C3.76053924,2.99954423 3.91968069,3.06545698 4.03664062,3.18304687 L5.31695312,4.46335938 C5.34031447,4.48690772 5.37214224,4.50010597 5.4053125,4.49999765 L9.875,4.49999765 C10.2200173,4.50038749 10.4996125,4.77998266 10.5,5.125 L10.5,5.99999765 L2.03640625,5.99999765 C1.52937862,6.00082464 1.08528165,6.34003519 0.95109375,6.82898437 Z M11.7557813,6.745625 C11.6380118,6.59023627 11.4540362,6.49926127 11.2590625,6.49999554 L2.03640625,6.49999554 C1.75461929,6.50053437 1.50787274,6.68915897 1.4334375,6.9609375 L0.137968746,11.7109375 C0.086858708,11.8988145 0.126226378,12.0997785 0.244446437,12.2544848 C0.362666496,12.409191 0.546232613,12.4999955 0.740937504,12.4999955 L9.96359375,12.4999955 C10.2453807,12.4994656 10.4921273,12.310841 10.5665625,12.0390625 L11.8620313,7.2890625 C11.9138564,7.10126887 11.8744839,6.90003814 11.7557031,6.745625 L11.7557813,6.745625 Z"></path>
1313
</g>
1414
</g>
1515
</g>
@@ -22,12 +22,12 @@ export const FileIcon = () => {
2222
export const OthersIcon = () => {
2323
return (
2424
<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg">
25-
<g id="视图面板分镜" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
26-
<g id="画板" transform="translate(-1055.000000, -461.000000)" fill="#8F9AA9" fill-rule="nonzero">
27-
<g id="编组-8" transform="translate(845.000000, 106.000000)">
28-
<g id="编组" transform="translate(210.000000, 355.000000)">
29-
<rect id="矩形" opacity="0" x="0" y="0" width="12" height="12"></rect>
30-
<path d="M1.764,5.052 C2.06,5.052 2.288,5.146 2.448,5.334 C2.608,5.522 2.688,5.724 2.688,5.94 L2.688,6.072 C2.688,6.344 2.618,6.574 2.478,6.762 C2.338,6.95 2.104,7.044 1.776,7.044 L1.692,7.044 C1.388,7.044 1.146,6.96 0.966,6.792 C0.786,6.624 0.696,6.392 0.696,6.096 L0.696,5.928 C0.696,5.824 0.718,5.72 0.762,5.616 C0.806,5.512 0.868,5.418 0.948,5.334 C1.028,5.25 1.128,5.182 1.248,5.13 C1.368,5.078 1.5,5.052 1.644,5.052 L1.764,5.052 L1.764,5.052 Z M6.084,5.052 C6.38,5.052 6.608,5.146 6.768,5.334 C6.928,5.522 7.008,5.724 7.008,5.94 L7.008,6.072 C7.008,6.344 6.938,6.574 6.798,6.762 C6.658,6.95 6.424,7.044 6.096,7.044 L6.012,7.044 C5.708,7.044 5.466,6.96 5.286,6.792 C5.106,6.624 5.016,6.392 5.016,6.096 L5.016,5.928 C5.016,5.824 5.038,5.72 5.082,5.616 C5.126,5.512 5.188,5.418 5.268,5.334 C5.348,5.25 5.448,5.182 5.568,5.13 C5.688,5.078 5.82,5.052 5.964,5.052 L6.084,5.052 L6.084,5.052 Z M10.404,5.052 C10.7,5.052 10.928,5.146 11.088,5.334 C11.248,5.522 11.328,5.724 11.328,5.94 L11.328,6.072 C11.328,6.344 11.258,6.574 11.118,6.762 C10.978,6.95 10.744,7.044 10.416,7.044 L10.332,7.044 C10.028,7.044 9.786,6.96 9.606,6.792 C9.426,6.624 9.336,6.392 9.336,6.096 L9.336,5.928 C9.336,5.824 9.358,5.72 9.402,5.616 C9.446,5.512 9.508,5.418 9.588,5.334 C9.668,5.25 9.768,5.182 9.888,5.13 C10.008,5.078 10.14,5.052 10.284,5.052 L10.404,5.052 L10.404,5.052 Z" id="形状"></path>
25+
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
26+
<g transform="translate(-1055.000000, -461.000000)" fill="currentColor" fill-rule="nonzero">
27+
<g transform="translate(845.000000, 106.000000)">
28+
<g transform="translate(210.000000, 355.000000)">
29+
<rect opacity="0" x="0" y="0" width="12" height="12"></rect>
30+
<path d="M1.764,5.052 C2.06,5.052 2.288,5.146 2.448,5.334 C2.608,5.522 2.688,5.724 2.688,5.94 L2.688,6.072 C2.688,6.344 2.618,6.574 2.478,6.762 C2.338,6.95 2.104,7.044 1.776,7.044 L1.692,7.044 C1.388,7.044 1.146,6.96 0.966,6.792 C0.786,6.624 0.696,6.392 0.696,6.096 L0.696,5.928 C0.696,5.824 0.718,5.72 0.762,5.616 C0.806,5.512 0.868,5.418 0.948,5.334 C1.028,5.25 1.128,5.182 1.248,5.13 C1.368,5.078 1.5,5.052 1.644,5.052 L1.764,5.052 L1.764,5.052 Z M6.084,5.052 C6.38,5.052 6.608,5.146 6.768,5.334 C6.928,5.522 7.008,5.724 7.008,5.94 L7.008,6.072 C7.008,6.344 6.938,6.574 6.798,6.762 C6.658,6.95 6.424,7.044 6.096,7.044 L6.012,7.044 C5.708,7.044 5.466,6.96 5.286,6.792 C5.106,6.624 5.016,6.392 5.016,6.096 L5.016,5.928 C5.016,5.824 5.038,5.72 5.082,5.616 C5.126,5.512 5.188,5.418 5.268,5.334 C5.348,5.25 5.448,5.182 5.568,5.13 C5.688,5.078 5.82,5.052 5.964,5.052 L6.084,5.052 L6.084,5.052 Z M10.404,5.052 C10.7,5.052 10.928,5.146 11.088,5.334 C11.248,5.522 11.328,5.724 11.328,5.94 L11.328,6.072 C11.328,6.344 11.258,6.574 11.118,6.762 C10.978,6.95 10.744,7.044 10.416,7.044 L10.332,7.044 C10.028,7.044 9.786,6.96 9.606,6.792 C9.426,6.624 9.336,6.392 9.336,6.096 L9.336,5.928 C9.336,5.824 9.358,5.72 9.402,5.616 C9.446,5.512 9.508,5.418 9.588,5.334 C9.668,5.25 9.768,5.182 9.888,5.13 C10.008,5.078 10.14,5.052 10.284,5.052 L10.404,5.052 L10.404,5.052 Z"></path>
3131
</g>
3232
</g>
3333
</g>

‎packages/plugin-view-manager-pane/src/components/resourceTree/index.scss‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
overflow: scroll;
88

99
&-group {
10-
fill: var(--color-data1-1, #5894ff);
10+
fill: var(--color-brand, #5894ff);
1111

1212
& > .resource-tree-group-item {
1313
padding-left: 14px;
@@ -27,7 +27,7 @@
2727
align-items: center;
2828
transition: color 200ms ease;
2929
margin-right: 4px;
30-
color: var(--color-fill1-8, #5f697a);
30+
color: var(--color-icon-hover, #5f697a);
3131

3232
&.expanded > svg {
3333
transform: rotate(0)
@@ -42,7 +42,7 @@
4242

4343
&-title {
4444
margin-left: 3px;
45-
color: var(--color-fill1-8, #5f697a);
45+
color: var(--color-text, #5f697a);
4646
font-weight: 500;
4747
font-size: 12px;
4848
}
@@ -53,27 +53,27 @@
5353
}
5454

5555
&-items {
56-
fill: var(--color-fill1-8, #5f697a);
56+
fill: var(--color-text, #5f697a);
5757
}
5858

5959
&-item {
6060
position: relative;
6161
padding: 2px 0 2px 21px;
6262
font-size: 12px;
6363
font-weight: 500;
64-
color: var(--color-fill1-8, #5f697a);
64+
color: var(--color-text, #5f697a);
6565

6666
&.resource-tree-group-item-pro-code {
67-
color: var(--color-text1-1, #bcc5d1);
67+
color: var(--color-text-disabled, #bcc5d1);
6868
pointer-events: none;
6969
}
7070

7171
&.active {
72-
background-color: var(--color-fill1-1, #f7f8fa);
72+
background-color: var(--color-block-background-light, #f7f8fa);
7373
}
7474

7575
&:hover {
76-
background-color: var(--color-fill1-1, #f7f8fa);
76+
background-color: var(--color-block-background-light, #f7f8fa);
7777

7878
.resource-tree-group-item-behaviors {
7979
display: flex;
@@ -86,7 +86,7 @@
8686

8787
&-modified {
8888
position: absolute;
89-
background-color: var(--color-error-4, #e43823);
89+
background-color: var(--color-function-error, #e43823);
9090
width: 5px;
9191
height: 5px;
9292
left: 11px;
@@ -103,7 +103,7 @@
103103
}
104104

105105
&-code {
106-
color: var(--color-text1-2, #8f9aa9);
106+
color: var(--color-text-dark, #8f9aa9);
107107
margin-left: 6px;
108108
display: none;
109109
max-width: 70px;

0 commit comments

Comments
 (0)