Skip to content

Commit 323c626

Browse files
ddiu8081ddiu8081
committed
feat: i18n
1 parent e519e1e commit 323c626

File tree

9 files changed

+209
-58
lines changed

9 files changed

+209
-58
lines changed

Diff for: ‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
},
1111
"dependencies": {
1212
"@unocss/reset": "^0.44.5",
13-
"vue": "^3.2.37"
13+
"vue": "^3.2.37",
14+
"vue-i18n": "9"
1415
},
1516
"devDependencies": {
1617
"@iconify-json/gg": "^1.1.2",

Diff for: ‎pnpm-lock.yaml

+75
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎src/App.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<script setup lang="ts">
2+
import { onMounted } from 'vue';
23
import Home from './pages/Home.vue'
34
import Result from './pages/Result.vue'
45
import Loading from './components/Loading.vue'
5-
import { onMounted } from 'vue';
66
77
let oreoList = $ref<OreoKey[]>([])
88
let loading = $ref(true)

Diff for: ‎src/components/HelloWorld.vue

-38
This file was deleted.

Diff for: ‎src/locales.ts

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
const locales = {
2+
en: {
3+
basic: {
4+
o: "O | o",
5+
r: "Re | re",
6+
and: "-"
7+
},
8+
tooltip: "Keyboard shortcuts: <br>o/r : Input 'O' or 'RE'<br>-/Space : Input Space<br>Enter : Generate<br>Backspace : Back",
9+
input: {
10+
meta: "I'd like:",
11+
placeholder: "Oreo...",
12+
generate: "Generate",
13+
btn: {
14+
o: "O",
15+
r: "R",
16+
and: "and",
17+
},
18+
},
19+
output: {
20+
meta: "Here's your",
21+
back: "Back"
22+
}
23+
},
24+
zh_cn: {
25+
basic: {
26+
o: "奥",
27+
r: "利",
28+
and: "与"
29+
},
30+
tooltip: "键盘快捷键: <br>o/r : 输入奥/利<br>-/空格 : 输入与<br>回车 : 生成<br>退格 : 返回",
31+
input: {
32+
meta: "我想要：",
33+
placeholder: "奥利奥...",
34+
generate: "生成",
35+
btn: {
36+
o: "+奥",
37+
r: "+利",
38+
and: "+与"
39+
},
40+
},
41+
output: {
42+
meta: "這是你的",
43+
back: "返回"
44+
}
45+
},
46+
ja: {
47+
basic: {
48+
o: "オ",
49+
r: "レ",
50+
and: "と"
51+
},
52+
tooltip: "キーボード・ショートカット: <br>o/r/-/Space : 編集する<br>Enter : 実行<br>Backspace : 元に戻す",
53+
input: {
54+
meta: "私は...したい",
55+
placeholder: "オレオ...",
56+
generate: "実行",
57+
btn: {
58+
o: "+オ",
59+
r: "+レ",
60+
and: "+と"
61+
},
62+
},
63+
output: {
64+
meta: "結果",
65+
back: "元に戻す"
66+
}
67+
},
68+
de_de: {
69+
basic: {
70+
o: "O | o",
71+
r: "Re | re",
72+
and: "-"
73+
},
74+
tooltip: "Tastaturkürzel: <br>o/r :<br>'O' oder 'RE'<br>-/Leerzeichen :<br>Leerzeichen<br>Enter :<br>Generieren<br>Rücktaste :<br>Zurück",
75+
input: {
76+
meta: "Ich möchte ein:",
77+
placeholder: "Oreo...",
78+
generate: "Generieren",
79+
btn: {
80+
o: "O",
81+
r: "R",
82+
and: "und"
83+
},
84+
},
85+
output: {
86+
meta: "Hier ist dein",
87+
back: "Zurück"
88+
}
89+
}
90+
}
91+
92+
export default locales

Diff for: ‎src/main.ts

+12-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,18 @@
11
import { createApp } from 'vue'
2+
import { createI18n } from 'vue-i18n'
23
// import './style.css'
34
import 'uno.css'
45
import '@unocss/reset/eric-meyer.css'
56
import App from './App.vue'
7+
import messages from './locales'
68

7-
createApp(App).mount('#app')
9+
const i18n = createI18n({
10+
legacy: false,
11+
locale: 'zh_cn',
12+
fallbackLocale: 'zh_cn',
13+
messages,
14+
})
15+
16+
const app = createApp(App)
17+
app.use(i18n)
18+
app.mount('#app')

Diff for: ‎src/pages/Home.vue

+14-6
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
<script setup lang="ts">
2+
import { useI18n } from 'vue-i18n'
23
import { formattedOreoStr, generateRandomOreoKey } from '../utils'
34
import Button from '../components/Button.vue'
45
56
const emit = defineEmits<{
67
(e: 'submit', value: OreoKey[]): void
78
}>()
89
10+
const { t, locale } = useI18n()
911
let oreoList = $ref<OreoKey[]>([])
10-
const oreoFormattedStr = $computed(() => formattedOreoStr(oreoList))
12+
const oreoFormattedStr = $computed(() => formattedOreoStr(oreoList, t))
1113
1214
const handleClick = () => {
1315
emit('submit', oreoList)
@@ -45,7 +47,7 @@ const generateRandomOreo = () => {
4547
<template>
4648
<main flex="~ col" bg-white w-full max-w-96 p-8 rounded-xl shadow="md black/5">
4749
<header>
48-
<h1 text="center 2xl" font-bold>我想要：</h1>
50+
<h1 text="center 2xl" font-bold>{{ t('input.meta') }}</h1>
4951
</header>
5052
<main py-4>
5153
<div
@@ -79,9 +81,9 @@ const generateRandomOreo = () => {
7981
</div>
8082
</div>
8183
<div flex py-6 justify-center gap-4>
82-
<Button @click="addSlice('o')">O</Button>
83-
<Button @click="addSlice('r')">Re</Button>
84-
<Button @click="addSlice('-')">And</Button>
84+
<Button @click="addSlice('o')">{{ t('input.btn.o') }}</Button>
85+
<Button @click="addSlice('r')">{{ t('input.btn.r') }}</Button>
86+
<Button @click="addSlice('-')">{{ t('input.btn.and') }}</Button>
8587
<Button @click="addSlice('-1')">-1</Button>
8688
</div>
8789
</main>
@@ -94,7 +96,13 @@ const generateRandomOreo = () => {
9496
hover="bg-truegray-800 text-2xl" rounded-b-xl
9597
@click="handleClick"
9698
>
97-
生成
99+
{{ t('input.generate') }}
98100
</footer>
99101
</main>
102+
<select v-model="locale" mt-3>
103+
<option value="en">en</option>
104+
<option value="zh_cn">zh</option>
105+
<option value="ja">ja</option>
106+
<option value="de_de">de</option>
107+
</select>
100108
</template>

Diff for: ‎src/pages/Result.vue

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
11
<script setup lang="ts">
2+
import { useI18n } from 'vue-i18n'
23
import { formattedOreoStr } from '../utils'
34
import Button from '../components/Button.vue'
45
import Canvas from '../components/Canvas.vue'
56
67
const emit = defineEmits<{
78
(e: 'back'): void
89
}>()
9-
1010
const props = defineProps<{
1111
oreoList: OreoKey[]
1212
}>()
13+
14+
const { t } = useI18n()
1315
const oreoFormattedStr = $computed(() => {
1416
const copyList = [...props.oreoList]
1517
if (copyList.length > 0 && copyList[copyList.length - 1] === '-') {
1618
copyList.pop()
1719
}
18-
return formattedOreoStr(copyList)
20+
return formattedOreoStr(copyList, t)
1921
})
2022
2123
const handleClick = () => {
@@ -28,14 +30,14 @@ const handleClick = () => {
2830
<template>
2931
<main flex="~ col" bg-white w-full p-8 max-w-96 rounded-xl shadow="md black/5">
3032
<header>
31-
<h1 text="center 2xl" font-bold>這是你的</h1>
33+
<h1 text="center 2xl" font-bold>{{ t('output.meta') }}</h1>
3234
</header>
3335
<main text-center py-4>
3436
<div text-3xl mb-6>{{ oreoFormattedStr }}</div>
3537
<Canvas :input="props.oreoList" />
3638
</main>
3739
<div flex justify-center gap-4 mt-4>
38-
<Button @click="handleClick">返回</Button>
40+
<Button @click="handleClick">{{ t('output.back') }}</Button>
3941
</div>
4042
</main>
4143
</template>

0 commit comments

Comments
 (0)