feat: 首页添加 i18n 国际化

.vscode/settings.json

@@ -40,5 +40,8 @@
 	},
 	"[toml]": {
 		"editor.defaultFormatter": "bodil.prettier-toml"
+	},
+	"[yaml]": {
+		"editor.defaultFormatter": "redhat.vscode-yaml"
 	}
 }

locales/English.yml

@@ -0,0 +1,9 @@
+# English
+
+home: home
+about: about
+edit: Edit
+to test HMR: to test HMR
+check out: Check out
+The total number of views is: The total number of views is
+the official Tov + Vue + Vite template: the official Tov + Vue + Vite template

locales/简体中文.yml

@@ -0,0 +1,9 @@
+# 中文
+
+home: 主页
+about: 关于
+edit: 编辑
+to test HMR: 测试热更新
+check out: 查看
+The total number of views is: 总浏览数
+the official Tov + Vue + Vite template: 公共的 Tov + Vue + Vite 模板

package.json

@@ -40,6 +40,7 @@
 		"@vitejs/plugin-vue-jsx": "^3.0.1",
 		"@vue-macros/volar": "^0.9.7",
 		"@vue/runtime-core": "^3.2.47",
+		"@vueuse/components": "^10.1.0",
 		"@vueuse/core": "^10.1.0",
 		"@vueuse/integrations": "^10.1.0",
 		"bumpp": "^9.1.0",

presets/types/components.d.ts

@@ -10,6 +10,7 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     Counter: typeof import('./../../src/components/Counter.vue')['default']
+    Dropdown: typeof import('./../../src/components/Dropdown.vue')['default']
     HelloWorld: typeof import('./../../src/components/HelloWorld.vue')['default']
     Navigation: typeof import('./../../src/components/Navigation.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/components/Dropdown.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { vOnClickOutside } from '@vueuse/components'
+
+const visiable = ref(false)
+function dropdownHandler() {
+	visiable.value = false
+}
+
+const { availableLocales, locale } = useI18n()
+</script>
+
+<template>
+	<div class="relative">
+		<div class="inline-flex items-center overflow-hidden rounded-md">
+			<button
+				class="h-full cursor-pointer border-0 bg-white p-2 text-gray-600 hover:bg-gray-200 hover:text-gray-700"
+				dark="bg-transparent hover:bg-gray-500"
+				:class="visiable ? 'bg-gray-200 bg-gray-500 dark:bg-gray-500' : ''"
+				@click.stop="visiable = !visiable"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-4 w-4"
+					viewBox="0 0 20 20"
+					fill="currentColor"
+				>
+					<path
+						fill-rule="evenodd"
+						d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+			</button>
+		</div>
+
+		<Transition name="fade" mode="out-in">
+			<div
+				v-if="visiable"
+				v-on-click-outside.bubble="dropdownHandler"
+				dark="bg-gray-500"
+				class="absolute end-0 z-10 mt-2 w-56 border border-gray-100 rounded-md bg-white shadow-lg divide-y divide-gray-100"
+			>
+				<div class="p-2">
+					<span
+						v-for="availableLocale of availableLocales"
+						:key="availableLocale"
+						:class="
+							locale === availableLocale
+								? 'bg-gray-100 text-gray-800 dark:bg-gray-400'
+								: ''
+						"
+						class="block cursor-pointer rounded-lg px-4 py-2 text-sm text-gray-500 hover:text-gray-900"
+						dark="text-light-500 hover:text-light-900"
+						@click="locale = availableLocale"
+					>
+						{{ availableLocale }}
+					</span>
+				</div>
+			</div>
+		</Transition>
+	</div>
+</template>

src/components/HelloWorld.vue

@@ -2,26 +2,28 @@
 defineProps<{ msg: string }>()
 
 const visits = useVisits()
+
+const { t } = useI18n()
 </script>
 
 <template>
-	<div class="mt-10 flex flex-col items-center space-y-8">
+	<div class="mt-10 flex flex-col items-center space-y-7">
 		<h1 class="text-4xl">{{ msg }}</h1>
 
 		<Counter />
 		<p>
-			Edit
-			<code>components/HelloWorld.vue</code> to test HMR
+			{{ t('edit') }}
+			<code>components/HelloWorld.vue</code> {{ t('to test HMR') }}
 		</p>
 
 		<p>
-			Check out
+			{{ t('check out') }}
 			<a href="https://github.com/dishait/tov-template" target="_blank">
 				tov-template </a
-			>, the official Tov + Vue + Vite template
+			>, {{ t('the official Tov + Vue + Vite template') }}
 		</p>
 		<p class="read-the-docs">
-			The total number of views is
+			{{ t('The total number of views is') }}
 			<span class="text-gray-800" dark="text-gray-300">{{ visits ?? 0 }}</span>
 		</p>
 	</div>

src/components/Navigation.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { SwitchIcon } from 'vue-dark-switch'
 import 'vue-dark-switch/dist/style.css'
+
+const { t } = useI18n()
 </script>
 
 <template>
@@ -14,12 +16,14 @@ import 'vue-dark-switch/dist/style.css'
 
 		<ul class="flex items-center gap-2 text-sm font-medium">
 			<li class="hidden !block">
-				<RouterLink class="rounded-lg px-3 py-2" to="/"> Home </RouterLink>
+				<RouterLink class="rounded-lg px-3 py-2" to="/">
+					{{ t('home') }}
+				</RouterLink>
 			</li>
 
 			<li>
 				<RouterLink class="rounded-lg px-3 py-2" to="/about">
-					About
+					{{ t('about') }}
 				</RouterLink>
 			</li>
 
@@ -46,6 +50,10 @@ import 'vue-dark-switch/dist/style.css'
 					</svg>
 				</a>
 			</li>
+
+			<li class="hidden !block">
+				<Dropdown />
+			</li>
 		</ul>
 	</nav>
 </template>

src/layouts/default.vue

@@ -12,7 +12,7 @@
 <style>
 .fade-enter-active,
 .fade-leave-active {
-	transition: opacity 0.25s ease-out;
+	transition: opacity 0.25s ease;
 }
 
 .fade-enter-from,

src/modules/i18n.ts

@@ -15,7 +15,7 @@ const messages = Object.fromEntries(
 
 export const i18n = createI18n({
 	legacy: false,
-	locale: 'en',
+	locale: 'English', // 默认语言
 	messages,
 })