Skip to content

Commit 26985a0

Browse files
ly525ly525
committed
feat(#35): fixed toolbar
1 parent 27863bc commit 26985a0

File tree

3 files changed

+107
-27
lines changed

3 files changed

+107
-27
lines changed

‎front-end/h5/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"deploy": "rm -rf dist && npm run build && ./deploy.sh"
1212
},
1313
"dependencies": {
14-
"ant-design-vue": "^1.3.10",
14+
"ant-design-vue": "^1.3.14",
1515
"core-js": "^2.6.5",
1616
"element-ui": "^2.9.1",
1717
"font-awesome": "4.7.0",

‎front-end/h5/src/components/core/editor/index.js

+71-4
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,62 @@ const sidebarMenus = [
2929
antIcon: 'appstore'
3030
}
3131
]
32+
33+
const fixedTools = [
34+
{
35+
'tooltip': '撤消', // TODO 支持快捷键
36+
'text': '撤消',
37+
'icon': 'mail-reply',
38+
'action': () => undoRedoHistory.undo()
39+
},
40+
{
41+
'tooltip': '恢复',
42+
'text': '恢复',
43+
'icon': 'mail-forward',
44+
'action': () => undoRedoHistory.redo()
45+
},
46+
{
47+
'tooltip': '刷新预览',
48+
'text': '刷新预览',
49+
'icon': 'eye',
50+
'action': function () { this.previewVisible = true }
51+
},
52+
{
53+
'tooltip': '复制当前页',
54+
'text': '复制当前页',
55+
'icon': 'copy',
56+
'action': function () { this.pageManager({ type: 'copy' }) }
57+
},
58+
{
59+
'tooltip': '导入PSD',
60+
'text': 'Ps',
61+
'icon': '',
62+
'action': '',
63+
'disabled': true
64+
},
65+
{
66+
'tooltip': '放大画布',
67+
'text': '放大画布',
68+
'icon': 'plus',
69+
'action': function () { this.scaleRate += 0.25 }
70+
},
71+
{
72+
'tooltip': '缩小画布',
73+
'text': '缩小画布',
74+
'icon': 'minus',
75+
'action': function () { this.scaleRate -= 0.25 }
76+
}
77+
]
78+
3279
export default {
3380
name: 'Editor',
3481
components: {},
3582
data: () => ({
3683
activeMenuKey: 'pluginList',
3784
isPreviewMode: false,
3885
activeTabKey: '属性',
39-
previewVisible: false
86+
previewVisible: false,
87+
scaleRate: 1
4088
}),
4189
computed: {
4290
...mapState('editor', {
@@ -145,16 +193,17 @@ export default {
145193
<a-layout-content style={{ padding: '24px', margin: 0, minHeight: '280px' }}>
146194
<div style="text-align: center;">
147195
<a-radio-group
196+
size="small"
148197
value={this.isPreviewMode}
149198
onInput={value => {
150199
this.isPreviewMode = value
151200
}}
152201
>
153-
<a-radio-button label={false} value={false}>Edit</a-radio-button>
154-
<a-radio-button label={true} value={true}>Preview</a-radio-button>
202+
<a-radio-button label={false} value={false}>编辑模式</a-radio-button>
203+
<a-radio-button label={true} value={true}>预览模式</a-radio-button>
155204
</a-radio-group>
156205
</div>
157-
<div class='canvas-wrapper'>
206+
<div class='canvas-wrapper' style={{ transform: `scale(${this.scaleRate})` }}>
158207
{/* { this.isPreviewMode ? this.renderPreview(h, this.elements) : this.renderCanvas(h, this.elements) } */}
159208
{ this.isPreviewMode
160209
? <RenderPreviewCanvas elements={this.elements}/>
@@ -165,6 +214,23 @@ export default {
165214
</div>
166215
</a-layout-content>
167216
</a-layout>
217+
<a-layout-sider width="40" theme='light' style={{ background: '#fff', border: '1px solid #eee' }}>
218+
{/* <div>
219+
<a-button shape="circle" icon="search" type="link" />
220+
</div> */}
221+
<a-button-group style={{ display: 'flex', flexDirection: 'column' }}>
222+
{
223+
fixedTools.map(tool => (
224+
<a-tooltip effect="dark" placement="left" title={tool.tooltip}>
225+
<a-button block class="transparent-bg" type="link" size="small" style={{ height: '40px', color: '#000' }} onClick={() => tool.action && tool.action.call(this) } disabled={!!tool.disabled}>
226+
{ tool.icon ? <i class={['shortcut-icon', 'fa', `fa-${tool.icon}`]} aria-hidden='true'/> : tool.text }
227+
</a-button>
228+
</a-tooltip>
229+
))
230+
}
231+
<div style={{ fontSize: '12px', textAlign: 'center' }}>{this.scaleRate * 100}%</div>
232+
</a-button-group>
233+
</a-layout-sider>
168234
<a-layout-sider width="340" theme='light' style={{ background: '#fff', padding: '0 12px' }}>
169235
<a-tabs
170236
style="height: 100%;"
@@ -190,6 +256,7 @@ export default {
190256
<a-tab-pane label="脚本" key='脚本' tab='脚本'><RenderScriptEditor/></a-tab-pane>
191257
</a-tabs>
192258
</a-layout-sider>
259+
193260
</a-layout>
194261
{
195262
this.previewVisible && <PreviewDialog work={this.work} visible={this.previewVisible} handleClose={() => { this.previewVisible = false }} />

‎front-end/h5/yarn.lock

+35-22
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,25 @@
22
# yarn lockfile v1
33

44

5-
"@ant-design/icons-vue@^1.0.1":
6-
version "1.0.1"
7-
resolved "https://registry.npm.taobao.org/@ant-design/icons-vue/download/@ant-design/icons-vue-1.0.1.tgz#343579219c04190831c9ca3826aec7361bb8b4d4"
8-
integrity sha1-NDV5IZwEGQgxyco4Jq7HNhu4tNQ=
5+
"@ant-design/colors@^3.1.0":
6+
version "3.1.0"
7+
resolved "https://registry.npm.taobao.org/@ant-design/colors/download/@ant-design/colors-3.1.0.tgz#b7e2cc61a4e86d3d109494034acfb1222dacaa3c"
8+
integrity sha1-t+LMYaTobT0QlJQDSs+xIi2sqjw=
9+
dependencies:
10+
tinycolor2 "^1.4.1"
11+
12+
"@ant-design/icons-vue@^2.0.0":
13+
version "2.0.0"
14+
resolved "https://registry.npm.taobao.org/@ant-design/icons-vue/download/@ant-design/icons-vue-2.0.0.tgz#0357f5010a404e9f34a87a4b41b2a08df691dbce"
15+
integrity sha1-A1f1AQpATp80qHpLQbKgjfaR284=
916
dependencies:
10-
ant-design-palettes "^1.1.3"
17+
"@ant-design/colors" "^3.1.0"
1118
babel-runtime "^6.26.0"
1219

13-
"@ant-design/icons@^1.1.15":
14-
version "1.2.1"
15-
resolved "https://registry.npm.taobao.org/@ant-design/icons/download/@ant-design/icons-1.2.1.tgz#8e19301b1433ec67d6bbd0e892782e2ade561ff9"
16-
integrity sha1-jhkwGxQz7GfWu9DoknguKt5WH/k=
20+
"@ant-design/icons@^2.1.1":
21+
version "2.1.1"
22+
resolved "https://registry.npm.taobao.org/@ant-design/icons/download/@ant-design/icons-2.1.1.tgz#7b9c08dffd4f5d41db667d9dbe5e0107d0bd9a4a"
23+
integrity sha1-e5wI3/1PXUHbZn2dvl4BB9C9mko=
1724

1825
"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.0.0-beta.35":
1926
version "7.0.0"
@@ -1404,20 +1411,13 @@ ansi-styles@^3.2.0, ansi-styles@^3.2.1:
14041411
dependencies:
14051412
color-convert "^1.9.0"
14061413

1407-
ant-design-palettes@^1.1.3:
1408-
version "1.1.3"
1409-
resolved "https://registry.npm.taobao.org/ant-design-palettes/download/ant-design-palettes-1.1.3.tgz#84119b1a4d86363adc52a38d587e65336a0a27dd"
1410-
integrity sha1-hBGbGk2GNjrcUqONWH5lM2oKJ90=
1411-
dependencies:
1412-
tinycolor2 "^1.4.1"
1413-
1414-
ant-design-vue@^1.3.10:
1415-
version "1.3.10"
1416-
resolved "https://registry.npm.taobao.org/ant-design-vue/download/ant-design-vue-1.3.10.tgz#82813f90888f77dd0e56c8a71e14efa0f8d8e3da"
1417-
integrity sha1-goE/kIiPd90OVsinHhTvoPjY49o=
1414+
ant-design-vue@^1.3.14:
1415+
version "1.3.14"
1416+
resolved "https://registry.npm.taobao.org/ant-design-vue/download/ant-design-vue-1.3.14.tgz#4bef079ec7a74e79a20c5c4fab7b0ab7fb3568fc"
1417+
integrity sha1-S+8HnsenTnmiDFxPq3sKt/s1aPw=
14181418
dependencies:
1419-
"@ant-design/icons" "^1.1.15"
1420-
"@ant-design/icons-vue" "^1.0.1"
1419+
"@ant-design/icons" "^2.1.1"
1420+
"@ant-design/icons-vue" "^2.0.0"
14211421
add-dom-event-listener "^1.0.2"
14221422
array-tree-filter "^2.1.0"
14231423
async-validator "^1.8.2"
@@ -1436,6 +1436,7 @@ ant-design-vue@^1.3.10:
14361436
lodash "^4.17.5"
14371437
moment "^2.21.0"
14381438
mutationobserver-shim "^0.3.2"
1439+
node-emoji "^1.10.0"
14391440
omit.js "^1.0.0"
14401441
raf "^3.4.0"
14411442
resize-observer-polyfill "^1.5.1"
@@ -6804,6 +6805,11 @@ lodash.templatesettings@^4.0.0:
68046805
dependencies:
68056806
lodash._reinterpolate "^3.0.0"
68066807

6808+
lodash.toarray@^4.4.0:
6809+
version "4.4.0"
6810+
resolved "https://registry.npm.taobao.org/lodash.toarray/download/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
6811+
integrity sha1-JMS/zWsvuji/0FlNsRedjptlZWE=
6812+
68076813
lodash.transform@^4.6.0:
68086814
version "4.6.0"
68096815
resolved "https://registry.npm.taobao.org/lodash.transform/download/lodash.transform-4.6.0.tgz#12306422f63324aed8483d3f38332b5f670547a0"
@@ -7321,6 +7327,13 @@ node-cache@^4.1.1:
73217327
clone "2.x"
73227328
lodash "4.x"
73237329

7330+
node-emoji@^1.10.0:
7331+
version "1.10.0"
7332+
resolved "https://registry.npm.taobao.org/node-emoji/download/node-emoji-1.10.0.tgz#8886abd25d9c7bb61802a658523d1f8d2a89b2da"
7333+
integrity sha1-iIar0l2ce7YYAqZYUj0fjSqJsto=
7334+
dependencies:
7335+
lodash.toarray "^4.4.0"
7336+
73247337
node-eta@^0.1.1:
73257338
version "0.1.1"
73267339
resolved "https://registry.npm.taobao.org/node-eta/download/node-eta-0.1.1.tgz#4066109b39371c761c72b7ebda9a9ea0a5de121f"

0 commit comments

Comments
 (0)