Skip to content

Commit 3e0fe64

Browse files
09473ZH09473ZH
committed
feat: add i18n
1 parent b22ed5e commit 3e0fe64

File tree

4 files changed

+191
-32
lines changed

4 files changed

+191
-32
lines changed

‎demo/App.vue‎

Lines changed: 61 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script lang="ts" setup>
22
import { version } from 'vue-demi'
3-
import { reactive, ref, watch } from 'vue'
3+
import { computed, reactive, ref, watch } from 'vue'
4+
import { useI18n } from 'vue-i18n'
45
import { newShortText } from './text/new-short-text'
56
import { oldShortText } from './text/old-short-text'
67
@@ -34,12 +35,14 @@ function resetText() {
3435
oldString.value = oldShortText.value
3536
newString.value = newShortText.value
3637
}
38+
3739
function clearText() {
3840
localStorage.removeItem('oldString')
3941
localStorage.removeItem('newString')
4042
oldString.value = ''
4143
newString.value = ''
4244
}
45+
4346
watch(oldString, () => localStorage.setItem('oldString', oldString.value))
4447
watch(newString, () => localStorage.setItem('newString', newString.value))
4548
@@ -49,18 +52,29 @@ function printEvent(e) {
4952
// eslint-disable-next-line no-console
5053
console.log(e)
5154
}
55+
56+
const { locale, t } = useI18n()
57+
58+
function toggleLang() {
59+
locale.value = locale.value === 'en' ? 'cn' : 'en'
60+
}
61+
62+
const label = computed(() => t('options.theme'))
5263
</script>
5364

5465
<template>
5566
<div style="padding:10px 35px">
5667
<div class="banner">
5768
<h1>v-code-diff</h1>
58-
<p>A code diff display plugin, available for Vue2 / Vue3.</p>
69+
<p>{{ t('desc') }}</p>
5970
<p align="center">
60-
Vue version: {{ version }}. CodeDiff version: {{ appVersion }}
71+
Vue ver: {{ version }}. CodeDiff ver: {{ appVersion }}
6172
</p>
6273
<a-button type="primary">
63-
<a href="https://github.com/Shimada666/v-code-diff">View on Github</a>
74+
<a href="https://github.com/Shimada666/v-code-diff">GitHub</a>
75+
</a-button>
76+
<a-button v-model="locale" style="margin-left: 5px; width: 100px" @click="toggleLang">
77+
{{ t('tools.lang') }}
6478
</a-button>
6579
</div>
6680
<div style="display: flex; justify-content: space-between;">
@@ -75,17 +89,18 @@ function printEvent(e) {
7589
</div>
7690
<div style="margin-top: 10px;">
7791
<a-button style="margin-right: 5px;" @click="resetText">
78-
重置文本(reset text)
92+
{{ t('tools.resetText') }}
7993
</a-button>
8094
<a-button type="default" @click="clearText">
81-
清空文本(clear text)
95+
{{ t('tools.clearText') }}
8296
</a-button>
8397
</div>
84-
<a-card style="margin-top:15px" title="Options">
98+
<a-card style="margin-top:15px" :title="t('options.title')">
8599
<a-form layout="inline" :model="formState">
86100
<a-row :gutter="16">
87101
<a-col :md="8" :sm="24">
88-
<a-form-item label="语言(langauge)">
102+
<a-form-item>
103+
<slot><span class="form-item-label">{{ t('options.language') }}</span> </slot>
89104
<a-select v-model:value="formState.language" style="width: 12vw;">
90105
<a-select-option
91106
v-for="item in ['plaintext', 'json', 'yaml', 'javascript', 'java', 'python', 'sql', 'xml', 'bash']"
@@ -97,63 +112,71 @@ function printEvent(e) {
97112
</a-form-item>
98113
</a-col>
99114
<a-col :md="8" :sm="24">
100-
<a-form-item label="主题模式(theme)">
115+
<a-form-item>
116+
<slot><span class="form-item-label">{{ t('options.theme') }}</span> </slot>
101117
<a-radio-group v-model:value="formState.theme">
102118
<a-radio value="light">
103-
日间模式(light)
119+
{{ t('options.dayMode') }}
104120
</a-radio>
105121
<a-radio value="dark">
106-
夜间模式(dark)
122+
{{ t('options.nightMode') }}
107123
</a-radio>
108124
</a-radio-group>
109125
</a-form-item>
110126
</a-col>
111127
<a-col :md="8" :sm="24">
112-
<a-form-item label="差异化范围(context)">
128+
<a-form-item>
129+
<slot><span class="form-item-label">{{ t('options.contextRange') }}</span> </slot>
113130
<a-input-number v-model:value="formState.context" :min="0" style="width: 12vw;" />
114131
</a-form-item>
115132
</a-col>
116133
<a-col :md="8" :sm="24">
117-
<a-form-item label="显示方式(outputFormat)">
134+
<a-form-item>
135+
<slot><span class="form-item-label">{{ t('options.outputFormat') }}</span> </slot>
118136
<a-radio-group v-model:value="formState.outputFormat">
119137
<a-radio value="line-by-line">
120-
line-by-line
138+
{{ t('options.lineByLine') }}
121139
</a-radio>
122140
<a-radio value="side-by-side">
123-
side-by-side
141+
{{ t('options.sideBySide') }}
124142
</a-radio>
125143
</a-radio-group>
126144
</a-form-item>
127145
</a-col>
128146
<a-col :md="8" :sm="24">
129-
<a-form-item label="差异级别(diffStyle)">
147+
<a-form-item>
148+
<slot><span class="form-item-label">{{ t('options.diffStyle') }}</span> </slot>
130149
<a-radio-group v-model:value="formState.diffStyle">
131150
<a-radio value="word">
132-
word
151+
{{ t('options.word') }}
133152
</a-radio>
134153
<a-radio value="char">
135-
char
154+
{{ t('options.char') }}
136155
</a-radio>
137156
</a-radio-group>
138157
</a-form-item>
139158
</a-col>
140159
<a-col :md="8" :sm="24">
141-
<a-form-item label="移除字符串前后空白字符(trim)">
160+
<a-form-item>
161+
<slot><span class="form-item-label">{{ t('options.trim') }}</span> </slot>
142162
<a-switch v-model:checked="formState.trim" />
143163
</a-form-item>
144164
</a-col>
145165
<a-col :md="8" :sm="24">
146-
<a-form-item label="不 diff 换行符(noDiffLineFeed)">
166+
<a-form-item>
167+
<slot><span class="form-item-label">{{ t('options.noDiffLineFeed') }}</span> </slot>
147168
<a-switch v-model:checked="formState.noDiffLineFeed" />
148169
</a-form-item>
149170
</a-col>
150171
<a-col :md="8" :sm="24">
151-
<a-form-item label="隐藏首部(hide Header)">
172+
<a-form-item>
173+
<slot><span class="form-item-label">{{ t('options.hideHeader') }}</span> </slot>
152174
<a-switch v-model:checked="formState.hideHeader" />
153175
</a-form-item>
154176
</a-col>
155177
<a-col :md="8" :sm="24">
156-
<a-form-item label="隐藏统计信息(hide Statistics)">
178+
<a-form-item>
179+
<slot><span class="form-item-label">{{ t('options.hideStatistics') }}</span> </slot>
157180
<a-switch v-model:checked="formState.hideStat" />
158181
</a-form-item>
159182
</a-col>
@@ -193,4 +216,20 @@ function printEvent(e) {
193216
font-size: 16px;
194217
color: #666;
195218
}
219+
220+
.form-item-label {
221+
display: inline-block;
222+
flex-grow: 0;
223+
overflow: hidden;
224+
white-space: nowrap;
225+
text-align: right;
226+
vertical-align: middle;
227+
}
228+
229+
.form-item-label:after {
230+
content: ":";
231+
position: relative;
232+
top: -0.5px;
233+
margin: 0 8px 0 2px;
234+
}
196235
</style>

‎demo/main.ts‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,87 @@
11
import { createApp } from 'vue'
2+
import { createI18n } from 'vue-i18n'
23
import CodeDiff from '../src/index'
34
import App from './App.vue'
5+
function getDefaultLang() {
6+
// 用户指定了默认语言时，使用用户指定的
7+
if (localStorage.getItem('lang') !== null) {
8+
return localStorage.getItem('lang')
9+
}
10+
else {
11+
// 用户未指定时，根据游览器选择:
12+
if (navigator.language === 'zh')
13+
return 'cn'
14+
else if (navigator.language === 'en')
15+
return 'en'
16+
else
17+
return 'en'
18+
}
19+
}
20+
21+
const i18n = createI18n({
22+
locale: getDefaultLang() || 'cn', // 设置当前语言类型
23+
legacy: false, // 如果要支持compositionAPI，此项必须设置为false
24+
messages: {
25+
cn: {
26+
desc: '一个代码差异展示插件，支持 Vue 2 和 Vue 3',
27+
tools: {
28+
resetText: '重置文本',
29+
clearText: '清空文本',
30+
lang: 'English',
31+
},
32+
options: {
33+
title: '选项',
34+
language: '语言',
35+
theme: '主题',
36+
dayMode: '日间模式',
37+
nightMode: '夜间模式',
38+
contextRange: '差异化范围',
39+
outputFormat: '显示方式',
40+
lineByLine: '逐行显示',
41+
sideBySide: '并排显示',
42+
diffStyle: '差异风格',
43+
word: '按单词',
44+
char: '按字符',
45+
trim: '移除字符串前后空白字符',
46+
noDiffLineFeed: '不显示差异换行符',
47+
hideHeader: '隐藏首部',
48+
hideStatistics: '隐藏统计信息',
49+
},
50+
},
51+
en: {
52+
desc: 'A code diff display plugin, available for Vue2 / Vue3.',
53+
tools: {
54+
resetText: 'Reset Text',
55+
clearText: 'Clear Text',
56+
lang: '简体中文',
57+
},
58+
options: {
59+
title: 'Options',
60+
language: 'Language',
61+
theme: 'Theme',
62+
dayMode: 'Day Mode',
63+
nightMode: 'Night Mode',
64+
contextRange: 'Context Range',
65+
outputFormat: 'Output Format',
66+
lineByLine: 'Line by Line',
67+
sideBySide: 'Side by Side',
68+
diffStyle: 'Diff Level',
69+
word: 'Word',
70+
char: 'Character',
71+
trim: 'Trim',
72+
noDiffLineFeed: 'No Diff Line Feed',
73+
hideHeader: 'Hide Header',
74+
hideStatistics: 'Hide Statistics',
75+
},
76+
},
77+
},
78+
},
79+
)
80+
81+
export default i18n
482

583
const app = createApp(App)
684
app.use(CodeDiff)
85+
app.use(i18n)
786

887
app.mount('#app')

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,8 @@
5353
"diff": "^5.1.0",
5454
"diff-match-patch": "^1.0.5",
5555
"highlight.js": "^11.9.0",
56-
"vue-demi": "^0.14.6"
56+
"vue-demi": "^0.14.6",
57+
"vue-i18n": "9"
5758
},
5859
"devDependencies": {
5960
"@antfu/eslint-config": "^2.4.5",

0 commit comments

Comments
 (0)