Skip to content

Commit eb6c495

Browse files
liujupingliujuping
committed
feat: add i18n to lowcode-plugin-resource-tabs
1 parent 4500aba commit eb6c495

7 files changed

Lines changed: 153 additions & 91 deletions

File tree

‎packages/plugin-resource-tabs/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@alilc/lowcode-plugin-resource-tabs",
3-
"version": "1.0.1",
3+
"version": "1.0.2",
44
"description": "alibaba lowcode resource tabs plugin",
55
"files": [
66
"es",

‎packages/plugin-resource-tabs/src/icon.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ import React from "react"
33
export const LockIcon = () => {
44
return (
55
<svg className="icon" width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg">
6-
<g id="全局逻辑" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
7-
<g id="画板" transform="translate(-396.000000, -124.000000)" fill="#A5B0BF" fill-rule="nonzero">
8-
<g id="编组-2" transform="translate(53.000000, 114.000000)">
9-
<g id="编组" transform="translate(343.000000, 10.000000)">
10-
<rect id="矩形" opacity="0" x="0" y="0" width="12" height="12"></rect>
11-
<path d="M9.75,5.4375 L8.953125,5.4375 L8.953125,2.8125 C8.953125,1.98398437 8.28164063,1.3125 7.453125,1.3125 L4.546875,1.3125 C3.71835938,1.3125 3.046875,1.98398437 3.046875,2.8125 L3.046875,5.4375 L2.25,5.4375 C2.04257813,5.4375 1.875,5.60507813 1.875,5.8125 L1.875,10.3125 C1.875,10.5199219 2.04257813,10.6875 2.25,10.6875 L9.75,10.6875 C9.95742187,10.6875 10.125,10.5199219 10.125,10.3125 L10.125,5.8125 C10.125,5.60507813 9.95742187,5.4375 9.75,5.4375 Z M3.890625,2.8125 C3.890625,2.45039062 4.18476563,2.15625 4.546875,2.15625 L7.453125,2.15625 C7.81523437,2.15625 8.109375,2.45039062 8.109375,2.8125 L8.109375,5.4375 L3.890625,5.4375 L3.890625,2.8125 Z M9.28125,9.84375 L2.71875,9.84375 L2.71875,6.28125 L9.28125,6.28125 L9.28125,9.84375 Z M5.671875,8.21484375 L5.671875,8.8359375 C5.671875,8.8875 5.7140625,8.9296875 5.765625,8.9296875 L6.234375,8.9296875 C6.2859375,8.9296875 6.328125,8.8875 6.328125,8.8359375 L6.328125,8.21484375 C6.46992188,8.11289062 6.5625,7.94648437 6.5625,7.7578125 C6.5625,7.44726562 6.31054688,7.1953125 6,7.1953125 C5.68945312,7.1953125 5.4375,7.44726562 5.4375,7.7578125 C5.4375,7.94648437 5.53007812,8.11289062 5.671875,8.21484375 Z" id="形状"></path>
6+
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
7+
<g transform="translate(-396.000000, -124.000000)" fill="#A5B0BF" fill-rule="nonzero">
8+
<g transform="translate(53.000000, 114.000000)">
9+
<g transform="translate(343.000000, 10.000000)">
10+
<rect opacity="0" x="0" y="0" width="12" height="12"></rect>
11+
<path d="M9.75,5.4375 L8.953125,5.4375 L8.953125,2.8125 C8.953125,1.98398437 8.28164063,1.3125 7.453125,1.3125 L4.546875,1.3125 C3.71835938,1.3125 3.046875,1.98398437 3.046875,2.8125 L3.046875,5.4375 L2.25,5.4375 C2.04257813,5.4375 1.875,5.60507813 1.875,5.8125 L1.875,10.3125 C1.875,10.5199219 2.04257813,10.6875 2.25,10.6875 L9.75,10.6875 C9.95742187,10.6875 10.125,10.5199219 10.125,10.3125 L10.125,5.8125 C10.125,5.60507813 9.95742187,5.4375 9.75,5.4375 Z M3.890625,2.8125 C3.890625,2.45039062 4.18476563,2.15625 4.546875,2.15625 L7.453125,2.15625 C7.81523437,2.15625 8.109375,2.45039062 8.109375,2.8125 L8.109375,5.4375 L3.890625,5.4375 L3.890625,2.8125 Z M9.28125,9.84375 L2.71875,9.84375 L2.71875,6.28125 L9.28125,6.28125 L9.28125,9.84375 Z M5.671875,8.21484375 L5.671875,8.8359375 C5.671875,8.8875 5.7140625,8.9296875 5.765625,8.9296875 L6.234375,8.9296875 C6.2859375,8.9296875 6.328125,8.8875 6.328125,8.8359375 L6.328125,8.21484375 C6.46992188,8.11289062 6.5625,7.94648437 6.5625,7.7578125 C6.5625,7.44726562 6.31054688,7.1953125 6,7.1953125 C5.68945312,7.1953125 5.4375,7.44726562 5.4375,7.7578125 C5.4375,7.94648437 5.53007812,8.11289062 5.671875,8.21484375 Z"></path>
1212
</g>
1313
</g>
1414
</g>
@@ -20,11 +20,11 @@ export const LockIcon = () => {
2020
export const CloseIcon = () => {
2121
return (
2222
<svg className="icon" width="12" height="12" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg">
23-
<g id="控件" stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
24-
<g id="设计器页面Tab栏" fill-rule="nonzero">
25-
<g id="编组">
26-
<rect id="矩形" opacity="0" x="0" y="0" width="12" height="12"></rect>
27-
<path d="M6.38025,5.85 L9.715125,2.515125 C9.85723958,2.36798292 9.85520714,2.13409321 9.71055697,1.98944303 C9.56590679,1.84479286 9.33201708,1.84276042 9.184875,1.984875 L5.85,5.31975 L2.515125,1.984875 C2.36798292,1.84276042 2.13409321,1.84479286 1.98944303,1.98944303 C1.84479286,2.13409321 1.84276042,2.36798292 1.984875,2.515125 L5.31975,5.85 L1.984875,9.184875 C1.84276042,9.33201708 1.84479286,9.56590679 1.98944303,9.71055697 C2.13409321,9.85520714 2.36798292,9.85723958 2.515125,9.715125 L5.85,6.38025 L9.184875,9.715125 C9.25505067,9.78570346 9.35047139,9.82538807 9.45,9.82538807 C9.54952861,9.82538807 9.64494933,9.78570346 9.715125,9.715125 C9.86151823,9.56868756 9.86151823,9.33131244 9.715125,9.184875 L6.38025,5.85 Z" id="路径"></path>
23+
<g stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
24+
<g fill-rule="nonzero">
25+
<g>
26+
<rect opacity="0" x="0" y="0" width="12" height="12"></rect>
27+
<path d="M6.38025,5.85 L9.715125,2.515125 C9.85723958,2.36798292 9.85520714,2.13409321 9.71055697,1.98944303 C9.56590679,1.84479286 9.33201708,1.84276042 9.184875,1.984875 L5.85,5.31975 L2.515125,1.984875 C2.36798292,1.84276042 2.13409321,1.84479286 1.98944303,1.98944303 C1.84479286,2.13409321 1.84276042,2.36798292 1.984875,2.515125 L5.31975,5.85 L1.984875,9.184875 C1.84276042,9.33201708 1.84479286,9.56590679 1.98944303,9.71055697 C2.13409321,9.85520714 2.36798292,9.85723958 2.515125,9.715125 L5.85,6.38025 L9.184875,9.715125 C9.25505067,9.78570346 9.35047139,9.82538807 9.45,9.82538807 C9.54952861,9.82538807 9.64494933,9.78570346 9.715125,9.715125 C9.86151823,9.56868756 9.86151823,9.33131244 9.715125,9.184875 L6.38025,5.85 Z"></path>
2828
</g>
2929
</g>
3030
</g>
@@ -35,12 +35,12 @@ export const CloseIcon = () => {
3535
export const WarnIcon = () => {
3636
return (
3737
<svg className="icon" width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg">
38-
<g id="全局逻辑" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
39-
<g id="画板" transform="translate(-218.000000, -124.000000)" fill="#F3AD13" fill-rule="nonzero">
40-
<g id="编组-2" transform="translate(53.000000, 114.000000)">
41-
<g id="编组" transform="translate(165.000000, 10.000000)">
42-
<rect id="矩形" opacity="0" x="0" y="0" width="12" height="12"></rect>
43-
<path d="M11.184319,9.78270333 L6.48418972,1.64185482 C6.38427751,1.46882851 6.19965139,1.3622428 5.99985011,1.3622428 C5.80004882,1.3622428 5.6154227,1.46882851 5.51551049,1.64185482 L0.806051496,9.79886837 C0.706153196,9.97190719 0.706155703,10.1850961 0.806058072,10.3581326 C0.905960441,10.5311691 1.09058595,10.6377716 1.29039111,10.6377716 L10.7095969,10.6377716 C11.0184715,10.6377716 11.2688617,10.3873814 11.2688617,10.0784948 C11.2688617,9.96987243 11.2379107,9.86849317 11.184319,9.78270333 L11.184319,9.78270333 Z M6.47966878,8.93107673 C6.47966878,9.19600112 6.26490639,9.41075152 5.999994,9.41075152 C5.73506961,9.41075152 5.52031922,9.19600112 5.52031922,8.93107673 L5.52031922,8.91569116 C5.52031922,8.65076678 5.73506961,8.43601638 5.999994,8.43601638 C6.26490639,8.43601638 6.47966878,8.65076678 6.47966878,8.91569116 L6.47966878,8.93107673 Z M6.47966878,7.17836906 C6.47966878,7.44329345 6.26491839,7.65804384 5.999994,7.65804384 C5.73508161,7.65804384 5.52031922,7.44329345 5.52031922,7.17836906 L5.52031922,4.6278663 C5.52031922,4.36294192 5.73508161,4.14819152 5.999994,4.14819152 C6.26491839,4.14819152 6.47966878,4.36294192 6.47966878,4.6278663 L6.47966878,7.17836906 Z" id="形状"></path>
38+
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
39+
<g transform="translate(-218.000000, -124.000000)" fill="#F3AD13" fill-rule="nonzero">
40+
<g transform="translate(53.000000, 114.000000)">
41+
<g transform="translate(165.000000, 10.000000)">
42+
<rect opacity="0" x="0" y="0" width="12" height="12"></rect>
43+
<path d="M11.184319,9.78270333 L6.48418972,1.64185482 C6.38427751,1.46882851 6.19965139,1.3622428 5.99985011,1.3622428 C5.80004882,1.3622428 5.6154227,1.46882851 5.51551049,1.64185482 L0.806051496,9.79886837 C0.706153196,9.97190719 0.706155703,10.1850961 0.806058072,10.3581326 C0.905960441,10.5311691 1.09058595,10.6377716 1.29039111,10.6377716 L10.7095969,10.6377716 C11.0184715,10.6377716 11.2688617,10.3873814 11.2688617,10.0784948 C11.2688617,9.96987243 11.2379107,9.86849317 11.184319,9.78270333 L11.184319,9.78270333 Z M6.47966878,8.93107673 C6.47966878,9.19600112 6.26490639,9.41075152 5.999994,9.41075152 C5.73506961,9.41075152 5.52031922,9.19600112 5.52031922,8.93107673 L5.52031922,8.91569116 C5.52031922,8.65076678 5.73506961,8.43601638 5.999994,8.43601638 C6.26490639,8.43601638 6.47966878,8.65076678 6.47966878,8.91569116 L6.47966878,8.93107673 Z M6.47966878,7.17836906 C6.47966878,7.44329345 6.26491839,7.65804384 5.999994,7.65804384 C5.73508161,7.65804384 5.52031922,7.44329345 5.52031922,7.17836906 L5.52031922,4.6278663 C5.52031922,4.36294192 5.73508161,4.14819152 5.999994,4.14819152 C6.26491839,4.14819152 6.47966878,4.36294192 6.47966878,4.6278663 L6.47966878,7.17836906 Z"></path>
4444
</g>
4545
</g>
4646
</g>

‎packages/plugin-resource-tabs/src/index.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
width: 5px;
2525
height: 5px;
2626
border-radius: 100%;
27-
background-color: var(--color-brand1-6, #006aff);
27+
background-color: var(--color-brand, #006aff);
2828
margin: 0 auto;
2929
}
3030

‎packages/plugin-resource-tabs/src/index.tsx‎

Lines changed: 104 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
import { Tab, Dialog } from '@alifd/next';
2-
import { IPublicModelPluginContext, IPublicModelResource, IPublicModelWindow, IPublicTypePlugin } from '@alilc/lowcode-types';
2+
import {
3+
IPublicModelPluginContext,
4+
IPublicModelResource,
5+
IPublicModelWindow,
6+
IPublicTypePlugin,
7+
} from '@alilc/lowcode-types';
38
import React from 'react';
49
import { useState, useEffect, useCallback } from 'react';
510
import './index.scss';
611
import { CloseIcon, LockIcon, WarnIcon } from './icon';
12+
import { intl } from './locale';
713

814
function CustomTabItem(props: {
915
icon: any;
@@ -53,52 +59,50 @@ function CustomTabItem(props: {
5359
const ResourceIcon = props.icon;
5460
return (
5561
<div className="next-tabs-tab-inner resource-tab-item">
56-
<div className='resource-tab-item-resource-icon'>
57-
{ ResourceIcon ? <ResourceIcon /> : null }
62+
<div className="resource-tab-item-resource-icon">
63+
{ResourceIcon ? <ResourceIcon /> : null}
5864
</div>
59-
<div className='resource-tab-item-title'>{ title }</div>
60-
<div className='resource-tab-item-tips'>
65+
<div className="resource-tab-item-title">{title}</div>
66+
<div className="resource-tab-item-tips">
6167
<div
6268
onClick={async (e) => {
6369
e.stopPropagation();
6470
if (changed) {
6571
Dialog.show({
6672
v2: true,
67-
title: "警告",
68-
content: "当前窗口有还未保存的改动，是否要舍弃变更",
73+
title: intl('resource_tabs.src.Warning'),
74+
content: intl('resource_tabs.src.TheCurrentWindowHasUnsaved'),
6975
onOk: () => {},
7076
onCancel: () => {
7177
props.onClose();
7278
},
7379
cancelProps: {
74-
children: '舍弃变更'
80+
children: intl('resource_tabs.src.DiscardChanges'),
7581
},
7682
okProps: {
77-
children: '继续编辑',
78-
}
83+
children: intl('resource_tabs.src.ContinueEditing'),
84+
},
7985
});
8086
return;
8187
}
8288
props.onClose();
8389
}}
84-
className='resource-tab-item-close-icon'
90+
className="resource-tab-item-close-icon"
8591
>
8692
<CloseIcon />
8793
</div>
88-
<div className='resource-tab-item-others'>
89-
{
90-
changed && !warned ? (<span className="resource-tab-item-changed-icon"></span>) : null
91-
}
92-
{
93-
locked ? (<LockIcon />) : null
94-
}
95-
{
96-
warned ? (<WarnIcon />) : null
97-
}
94+
<div className="resource-tab-item-others">
95+
{changed && !warned ? (
96+
<span className="resource-tab-item-changed-icon"></span>
97+
) : null}
98+
99+
{locked ? <LockIcon /> : null}
100+
101+
{warned ? <WarnIcon /> : null}
98102
</div>
99103
</div>
100104
</div>
101-
)
105+
);
102106
}
103107

104108
interface ITabItem {
@@ -126,22 +130,32 @@ function Content(props: {
126130
windows = props.onSort(workspace.windows);
127131
}
128132

129-
return windows.map(d => {
133+
return windows.map((d) => {
130134
return {
131135
id: d.resource?.id || d.resource?.options.id,
132-
windowId: d.id
133-
}
134-
})
136+
windowId: d.id,
137+
};
138+
});
135139
}, []);
136140

137141
const [tabs, setTabs] = useState(getTabs());
138-
const [activeTitle, setActiveTitle] = useState(workspace.window?.resource?.id || workspace.window?.resource?.options?.id);
142+
const [activeTitle, setActiveTitle] = useState(
143+
workspace.window?.resource?.id || workspace.window?.resource?.options?.id
144+
);
139145

140146
const saveTabsToLocal = useCallback(() => {
141-
localStorage.setItem('___lowcode_plugin_resource_tabs___' + props.appKey, JSON.stringify(getTabs()));
142-
localStorage.setItem('___lowcode_plugin_resource_tabs_active_title___' + props.appKey, JSON.stringify({
143-
id: workspace.window?.resource.id || workspace.window?.resource?.options.id,
144-
}));
147+
localStorage.setItem(
148+
'___lowcode_plugin_resource_tabs___' + props.appKey,
149+
JSON.stringify(getTabs())
150+
);
151+
localStorage.setItem(
152+
'___lowcode_plugin_resource_tabs_active_title___' + props.appKey,
153+
JSON.stringify({
154+
id:
155+
workspace.window?.resource.id ||
156+
workspace.window?.resource?.options.id,
157+
})
158+
);
145159
}, []);
146160

147161
const initEvent = useCallback<() => void>(() => {
@@ -150,19 +164,21 @@ function Content(props: {
150164
saveTabsToLocal();
151165
});
152166
workspace.onChangeActiveWindow(() => {
153-
setActiveTitle(workspace.window?.resource.id || workspace.window?.resource?.options.id);
167+
setActiveTitle(
168+
workspace.window?.resource.id || workspace.window?.resource?.options.id
169+
);
154170
saveTabsToLocal();
155171
});
156172
}, []);
157173

158174
useEffect(() => {
159175
const initResourceListMap = () => {
160176
const resourceListMap = {};
161-
workspace.resourceList.forEach(d => {
177+
workspace.resourceList.forEach((d) => {
162178
resourceListMap[d.id || d.options.id] = d;
163179
});
164180
setResourceListMap(resourceListMap);
165-
}
181+
};
166182

167183
if (workspace.resourceList) {
168184
initResourceListMap();
@@ -176,14 +192,22 @@ function Content(props: {
176192
if (!Object.keys(resourceListMap).length || tabs.length) {
177193
return;
178194
}
179-
const value: ITabItem[] = JSON.parse(localStorage.getItem('___lowcode_plugin_resource_tabs___' + props.appKey));
195+
const value: ITabItem[] = JSON.parse(
196+
localStorage.getItem(
197+
'___lowcode_plugin_resource_tabs___' + props.appKey
198+
)
199+
);
180200
const activeValue: {
181201
id: string;
182-
} = JSON.parse(localStorage.getItem('___lowcode_plugin_resource_tabs_active_title___' + props.appKey));
202+
} = JSON.parse(
203+
localStorage.getItem(
204+
'___lowcode_plugin_resource_tabs_active_title___' + props.appKey
205+
)
206+
);
183207

184208
if (value && value.length) {
185-
value.forEach(d => {
186-
const resource = resourceListMap[d.id]
209+
value.forEach((d) => {
210+
const resource = resourceListMap[d.id];
187211
resource && workspace.openEditorWindow(resource, true);
188212
});
189213

@@ -194,9 +218,11 @@ function Content(props: {
194218

195219
if (activeValue) {
196220
const resource = resourceListMap[activeValue.id];
197-
resource && workspace.openEditorWindow(resource);
221+
if (resource) {
222+
workspace.openEditorWindow(resource);
223+
}
198224
}
199-
} catch(e) {
225+
} catch (e) {
200226
console.error(e);
201227
}
202228
}, [resourceListMap]);
@@ -213,13 +239,16 @@ function Content(props: {
213239
contentStyle={{
214240
height: 0,
215241
}}
216-
tabRender={(key, props: {
217-
key: string;
218-
title: string;
219-
icon: any;
220-
onClose: () => void;
221-
value: string;
222-
}) => (
242+
tabRender={(
243+
key,
244+
props: {
245+
key: string;
246+
title: string;
247+
icon: any;
248+
onClose: () => void;
249+
value: string;
250+
}
251+
) => (
223252
<CustomTabItem
224253
key={key}
225254
icon={props.icon}
@@ -231,12 +260,12 @@ function Content(props: {
231260
)}
232261
onChange={(name) => {
233262
setActiveTitle(name);
234-
const item = tabs.filter(d => String(d.id) === String(name))?.[0];
263+
const item = tabs.filter((d) => String(d.id) === String(name))?.[0];
235264
const resource = resourceListMap[item.id];
236265
workspace.openEditorWindow(resource);
237266
}}
238267
>
239-
{tabs.map(item => {
268+
{tabs.map((item) => {
240269
const resource = resourceListMap[item.id];
241270
if (!resource) {
242271
return null;
@@ -253,21 +282,22 @@ function Content(props: {
253282
(workspace as any).removeEditorWindow(resource);
254283
}}
255284
/>
256-
)
285+
);
257286
})}
258287
</Tab>
259-
)
288+
);
260289
}
261290

262-
const resourceTabs: IPublicTypePlugin = function (ctx: IPublicModelPluginContext, options: {
263-
appKey?: string;
264-
onSort?: (windows: IPublicModelWindow[]) => IPublicModelWindow[];
265-
shape?: string;
266-
tabClassName?: string;
267-
}) {
268-
const {
269-
skeleton,
270-
} = ctx;
291+
const resourceTabs: IPublicTypePlugin = function (
292+
ctx: IPublicModelPluginContext,
293+
options: {
294+
appKey?: string;
295+
onSort?: (windows: IPublicModelWindow[]) => IPublicModelWindow[];
296+
shape?: string;
297+
tabClassName?: string;
298+
}
299+
) {
300+
const { skeleton } = ctx;
271301
return {
272302
async init() {
273303
skeleton.add({
@@ -285,23 +315,25 @@ const resourceTabs: IPublicTypePlugin = function (ctx: IPublicModelPluginContext
285315
appKey: options?.appKey,
286316
onSort: options?.onSort,
287317
shape: options?.shape,
288-
tabClassName: options?.tabClassName
318+
tabClassName: options?.tabClassName,
289319
},
290320
});
291-
}
292-
}
293-
}
321+
},
322+
};
323+
};
294324

295325
resourceTabs.pluginName = 'resourceTabs';
296326

297327
resourceTabs.meta = {
298328
preferenceDeclaration: {
299-
title: '应用标签栏插件参数定义',
329+
title: intl('resource_tabs.src.ApplicationTagColumnPlugIn'),
300330
properties: [
301331
{
302332
key: 'appKey',
303333
type: 'string',
304-
description: '唯一标识，用于缓存应用 Tab',
334+
description: intl(
335+
'resource_tabs.src.UniqueIdentifierForCachingApplication'
336+
),
305337
},
306338
{
307339
key: 'onSort',
@@ -311,15 +343,15 @@ resourceTabs.meta = {
311343
{
312344
key: 'shape',
313345
type: 'string',
314-
description: 'Tab shape'
346+
description: 'Tab shape',
315347
},
316348
{
317349
key: 'tabClassName',
318350
type: 'string',
319351
description: 'Tab className',
320-
}
321-
]
322-
}
323-
}
352+
},
353+
],
354+
},
355+
};
324356

325-
export default resourceTabs;
357+
export default resourceTabs;

0 commit comments

Comments
 (0)