Skip to content

Commit 3e4e1de

Browse files
fireyyfireyy
authored
Merge pull request #19 from fireyy/feat/i18n
feat: #17 add i18n support
2 parents 60ee262 + e6cda99 commit 3e4e1de

File tree

14 files changed

+202
-37
lines changed

14 files changed

+202
-37
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
"nanoid": "^1.0.1",
3434
"spectre.css": "^0.5.0",
3535
"vue": "^2.5.22",
36+
"vue-i18n": "^7.6.0",
3637
"vue-page-designer-widgets": "^0.1.4",
3738
"vue-server-renderer": "^2.5.17"
3839
},

‎src/App.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,11 @@ import vpd from './mixins/vpd'
3939
import toast from './components/toast.vue'
4040
import uploader from './components/uploader.vue'
4141
import slider from './components/slider.vue'
42+
import i18n from './plugins/i18n'
4243
4344
export default {
4445
name: 'VuePageDesigner',
46+
i18n: i18n,
4547
components: {
4648
navbar, // 顶部导航栏
4749
toolbar, // 左侧菜单栏
@@ -66,7 +68,7 @@ export default {
6668
},
6769
beforeCreate () {
6870
// TODO: custom svg path by config
69-
loadSprite('//unpkg.com/vue-page-designer/dist/icons.svg', 'svgspriteit')
71+
loadSprite('//unpkg.com/vue-page-designer@0.7.1/dist/icons.svg', 'svgspriteit')
7072
},
7173
created () {
7274
// 注册 widgets

‎src/components/navbar.vue

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,26 @@
99
class="btn btn-link tooltip tooltip-bottom"
1010
data-tooltip="复制元件 Ctrl + C"
1111
@click="copyWidget">
12-
<vpd-icon name="copy" /> 复制
12+
<vpd-icon name="copy" /> {{ $t('data.actions.copy') }}
1313
</a>
1414
<a
1515
class="btn btn-link tooltip tooltip-bottom"
1616
data-tooltip="删除元件 Delete"
1717
@click="dele">
18-
<vpd-icon name="trash-2" /> 删除
18+
<vpd-icon name="trash-2" /> {{ $t('data.actions.delete') }}
1919
</a>
2020
<a
2121
class="btn btn-link tooltip tooltip-bottom"
2222
data-tooltip="保存 Ctrl + S"
23-
@click="save"><vpd-icon name="save" /> 保存</a>
23+
@click="save"><vpd-icon name="save" /> {{ $t('data.actions.save') }}</a>
24+
<select
25+
v-model="$i18n.locale"
26+
class="lang-change">
27+
<option
28+
v-for="(lang, i) in langs"
29+
:key="`Lang${i}`"
30+
:value="lang">{{ lang }}</option>
31+
</select>
2432
</section>
2533
</div>
2634
</header>
@@ -30,6 +38,11 @@
3038
import vpd from '../mixins/vpd'
3139
export default {
3240
mixins: [vpd],
41+
data () {
42+
return {
43+
langs: ['cn', 'en']
44+
}
45+
},
3346
computed: {
3447
show () {
3548
return this.$vpd.state.type !== 'page'
@@ -120,5 +133,8 @@ export default {
120133
border-radius: 50%;
121134
}
122135
}
136+
.lang-change {
137+
width: 80px;
138+
}
123139
}
124140
</style>

‎src/components/panel/animation.vue

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@
1616

1717
<div class="panel-row">
1818
<vpd-icon name="film" />
19-
<div class="panel-label">选择动画</div>
19+
<div class="panel-label">{{ $t('panel.animation.select') }}</div>
2020
<div class="panel-value">
2121
<select v-model="currentName">
22-
<option value="">无</option>
22+
<option value="">{{ $t('data.no') }}</option>
2323
<option
2424
v-for="(val, index) in animationNames"
2525
:key="index"
@@ -32,7 +32,7 @@
3232
<hr>
3333
<div class="panel-row">
3434
<vpd-icon name="type" />
35-
<div class="panel-label">动画名称</div>
35+
<div class="panel-label">{{ $t('data.name') }}</div>
3636
<div class="panel-value">
3737
<input
3838
v-model.trim="currentAnimation.name"
@@ -44,7 +44,7 @@
4444

4545
<div class="panel-row">
4646
<vpd-icon name="clock" />
47-
<div class="panel-label">动画时长</div>
47+
<div class="panel-label">{{ $t('data.duration') }}</div>
4848
<div class="panel-value">
4949
<input
5050
v-model.number="currentAnimation.duration"
@@ -55,7 +55,7 @@
5555

5656
<div class="panel-row">
5757
<vpd-icon name="watch" />
58-
<div class="panel-label">动画延迟</div>
58+
<div class="panel-label">{{ $t('data.delay') }}</div>
5959
<div class="panel-value">
6060
<input
6161
v-model.number="currentAnimation.delay"
@@ -66,7 +66,7 @@
6666

6767
<div class="panel-row">
6868
<vpd-icon name="repeat" />
69-
<div class="panel-label">动画循环</div>
69+
<div class="panel-label">{{ $t('data.iteration') }}</div>
7070
<div class="panel-value">
7171
<input
7272
v-model.number="currentAnimation.iteration"
@@ -77,7 +77,7 @@
7777

7878
<div class="panel-row">
7979
<vpd-icon name="activity" />
80-
<div class="panel-label">缓动函数</div>
80+
<div class="panel-label">{{ $t('data.timing') }}</div>
8181
<div class="panel-value">
8282
<select v-model="currentAnimation.timing">
8383
<option>linear</option>
@@ -91,7 +91,7 @@
9191

9292
<div class="panel-row">
9393
<vpd-icon name="rotate-cw" />
94-
<div class="panel-label">动画方向</div>
94+
<div class="panel-label">{{ $t('data.direction') }}</div>
9595
<div class="panel-value">
9696
<select v-model="currentAnimation.direction">
9797
<option>normal</option>
@@ -138,7 +138,7 @@
138138
v-if="i + 1 === currentAnimation.keyframes.length"
139139
class="btn btn-primary"
140140
@click="addkeyframe">
141-
<vpd-icon name="plus" /> 添加新的动画
141+
<vpd-icon name="plus" /> {{ $t('data.actions.add') }}
142142
</button>
143143
</div>
144144
</div>
@@ -192,7 +192,7 @@ export default {
192192
// 检查是否存在未命名动画，避免重复添加
193193
if (this.$vpd.state.animation.some(val => val.name === '')) {
194194
this.$vpd.$emit('notify', {
195-
info: '还有未命名动画，请先命名'
195+
info: this.$t('messages.alerts.unnamedanimations')
196196
})
197197
return
198198
}
@@ -210,7 +210,7 @@ export default {
210210
var name = this.currentAnimation.name
211211
if (name === '') {
212212
this.$vpd.$emit('notify', {
213-
info: '请先为动画命名'
213+
info: this.$t('messages.alerts.animation_name_required')
214214
})
215215
return
216216
}
@@ -225,7 +225,7 @@ export default {
225225
this.currentAnimation.name = ''
226226
})
227227
this.$vpd.$emit('notify', {
228-
info: '动画名称必须以英文开头'
228+
info: this.$t('messages.alerts.animation_name_validate')
229229
})
230230
}
231231
@@ -234,7 +234,7 @@ export default {
234234
this.currentAnimation.name = value.replace(/\W/g, '')
235235
})
236236
this.$vpd.$emit('notify', {
237-
info: '请勿使用英文和数字以外的字符'
237+
info: this.$t('messages.alerts.animation_name_validate')
238238
})
239239
}
240240
},

‎src/components/panel/event.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@
44
class="panel-wrap">
55
<div class="panel-row">
66
<vpd-icon name="link" />
7-
<div class="panel-label">点击时</div>
7+
<div class="panel-label">{{ $t('data.events.onclick') }}</div>
88
</div>
99

1010
<div
1111
v-if="activeElement.href !== undefined"
1212
class="panel-row">
13-
<div class="panel-label">链接至</div>
13+
<div class="panel-label">{{ $t('data.events.linkTo') }}</div>
1414
<div class="panel-value">
1515
<input
1616
v-model="activeElement.href"

‎src/components/panel/index.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@
44
<li
55
:class="{active: activeTab === 1}"
66
class="tab-item"
7-
@click="activeTab = 1"><a>参数</a></li>
7+
@click="activeTab = 1"><a>{{ $t('data.names.params') }}</a></li>
88
<li
99
:class="{active: activeTab === 2}"
1010
class="tab-item"
11-
@click="activeTab = 2"><a>交互</a></li>
11+
@click="activeTab = 2"><a>{{ $t('data.names.event') }}</a></li>
1212
<li
1313
:class="{active: activeTab === 3}"
1414
class="tab-item"
15-
@click="activeTab = 3"><a>动画</a></li>
15+
@click="activeTab = 3"><a>{{ $t('data.names.animation') }}</a></li>
1616
</ul>
1717

1818
<page

‎src/components/panel/page.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
class="panel-row"
77
flex>
88
<vpd-icon name="type" />
9-
<div class="panel-label">页面标题</div>
9+
<div class="panel-label">{{ $t('messages.page.name') }}</div>
1010
<div class="panel-value">
1111
<input
1212
v-model="activeElement.title"
@@ -18,7 +18,7 @@
1818
class="panel-row"
1919
flex>
2020
<vpd-icon name="smartphone" />
21-
<div class="panel-label">页面高度</div>
21+
<div class="panel-label">{{ $t('messages.page.height') }}</div>
2222
<div class="panel-value">
2323
<input
2424
v-model="activeElement.height"
@@ -30,7 +30,7 @@
3030
class="panel-row"
3131
flex>
3232
<vpd-icon name="droplet" />
33-
<div class="panel-label">页面背景色</div>
33+
<div class="panel-label">{{ $t('messages.page.background') }}</div>
3434
<div class="panel-value">
3535
<input
3636
v-model="activeElement.backgroundColor"
@@ -42,7 +42,7 @@
4242
class="panel-row"
4343
flex>
4444
<vpd-icon name="clock" />
45-
<div class="panel-label">截止日期</div>
45+
<div class="panel-label">{{ $t('messages.page.endTime') }}</div>
4646
<div class="panel-value">
4747
<input
4848
v-model="activeElement.endTime"

‎src/components/panel/style.vue

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<!-- 公共属性 -->
66
<div class="panel-row">
77
<vpd-icon name="layers" />
8-
<div class="panel-label">层级</div>
8+
<div class="panel-label">{{ $t('data.levels') }}</div>
99
<div class="panel-value">{{ activeElement.z }}</div>
1010
<div class="panel-slider-wrap">
1111
<vpd-slider
@@ -17,7 +17,7 @@
1717

1818
<div class="panel-row">
1919
<vpd-icon name="more-horizontal" />
20-
<div class="panel-label">宽度</div>
20+
<div class="panel-label">{{ $t('data.names.width') }}</div>
2121
<div class="panel-value">{{ activeElement.width }}</div>
2222
<div class="panel-slider-wrap">
2323
<vpd-slider
@@ -29,7 +29,7 @@
2929

3030
<div class="panel-row">
3131
<vpd-icon name="more-vertical" />
32-
<div class="panel-label">高度</div>
32+
<div class="panel-label">{{ $t('data.names.height') }}</div>
3333
<div class="panel-value">{{ activeElement.height }}</div>
3434
<div class="panel-slider-wrap">
3535
<vpd-slider
@@ -41,7 +41,7 @@
4141

4242
<div class="panel-row">
4343
<vpd-icon name="arrow-right" />
44-
<div class="panel-label">横坐标</div>
44+
<div class="panel-label">{{ $t('data.names.left') }}</div>
4545
<div class="panel-value">{{ activeElement.left }}</div>
4646
<div class="panel-slider-wrap">
4747
<vpd-slider
@@ -53,7 +53,7 @@
5353

5454
<div class="panel-row">
5555
<vpd-icon name="arrow-down" />
56-
<div class="panel-label">纵坐标</div>
56+
<div class="panel-label">{{ $t('data.names.top') }}</div>
5757
<div class="panel-value">{{ activeElement.top }}</div>
5858
<div class="panel-slider-wrap">
5959
<vpd-slider
@@ -76,7 +76,7 @@
7676
<hr>
7777
<div class="panel-row">
7878
<vpd-icon name="layout" />
79-
<div class="panel-label">所属容器</div>
79+
<div class="panel-label">{{ $t('data.names.belonging') }}</div>
8080
<div class="panel-value">
8181
<select v-model="activeElement.belong">
8282
<option>page</option>

‎src/components/popbox.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@
1616
<div class="footer">
1717
<button
1818
class="btn"
19-
@click="confirm">确定</button>
19+
@click="confirm">{{ $t('data.actions.determine') }}</button>
2020
<button
2121
class="btn"
22-
@click="close">取消</button>
22+
@click="close">{{ $t('data.actions.cancel') }}</button>
2323
</div>
2424
</div>
2525
</div>

‎src/components/toolbar.vue

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div class="menu-bar">
33
<details open>
4-
<summary><vpd-icon name="list" />可用组件</summary>
4+
<summary><vpd-icon name="list" />{{ $t('data.components') }}</summary>
55
<ul
66
class="widget-list columns"
77
@mousedown="updateSrollTop">
@@ -18,7 +18,7 @@
1818
</ul>
1919
</details>
2020
<details>
21-
<summary><vpd-icon name="layers" />已加组件</summary>
21+
<summary><vpd-icon name="layers" />{{ $t('data.added_components') }}</summary>
2222
<ul class="layer-list">
2323
<li
2424
v-for="layer in layers"
@@ -95,6 +95,9 @@ export default {
9595
}
9696
summary {
9797
padding: 5px 0;
98+
text-overflow: ellipsis;
99+
white-space: nowrap;
100+
overflow: hidden;
98101
border-bottom: 1px solid #f5f5f5;
99102
.svg-icon {
100103
margin-right: 5px;

0 commit comments

Comments
 (0)