feat: i18n

.devcontainer/devcontainer.json

@@ -20,6 +20,7 @@
         "dbaeumer.vscode-eslint",
         "Nuxtr.nuxtr-vscode",
         "Prisma.prisma",
+        "lokalise.i18n-ally",
         // Do not install Prettier. It will conflict with eslint.
         "-esbenp.prettier-vscode"
       ]

.vscode/settings.json

@@ -13,11 +13,16 @@
   "eslint.options": {
     "overrideConfigFile": "./eslint.config.js"
   },
-  "eslint.experimental.useFlatConfig": true,
+  "eslint.useFlatConfig": true,
   "eslint.lintTask.enable": true,
   "editor.codeActionsOnSave": {
     "source.fixAll": "explicit"
   },
   "editor.insertSpaces": true,
-  "editor.tabSize": 2
+  "editor.tabSize": 2,
+  "i18n-ally.localesPaths": [
+    "locales"
+  ],
+  "i18n-ally.enabledParsers": ["js", "ts", "json"],
+  "i18n-ally.enabledFrameworks": ["vue-sfc", "vue"]
 }

components/custom/sidebar.vue

@@ -2,10 +2,12 @@
 import { Button } from '@/components/ui/button'
 import { cn } from '@/lib/utils'
 import { useClerk } from 'vue-clerk'
 import type { AllClubs } from '~/types/api/user/all_clubs'
 
+const { t } = useI18n({
+  useScope: 'local',
+})
 const clerk = useClerk()
-
 const route = useRoute()
 
 const isPresidentOrVicePresident = ref(false)
@@ -31,33 +33,33 @@
           <NuxtLink to="/">
             <Button :variant="route.name === 'index' ? 'secondary' : 'ghost'" class="w-full justify-start">
               <Icon class="mr-2 h-4 w-4" name="material-symbols:home-outline-rounded" />
-              首页
+              {{ t('home') }}
             </Button>
           </NuxtLink>
         </div>
       </div>
       <div class="px-3 py-2">
         <h2 class="relative px-4 text-lg font-semibold tracking-tight">
-          学校事务
+          {{ t('school_affairs') }}
         </h2>
         <div class="mt-2">
           <NuxtLink to="/forms">
             <Button :variant="route.name === 'forms' ? 'secondary' : 'ghost'" class="w-full justify-start">
               <Icon class="mr-2 h-4 w-4" name="material-symbols:grid-view-outline-rounded" />
-              表单
+              {{ t('forms') }}
             </Button>
           </NuxtLink>
         </div>
       </div>
       <div class="px-3 py-2">
         <h2 class="relative px-4 text-lg font-semibold tracking-tight">
-          社团信息
+          {{ t('cas_information') }}
         </h2>
         <div class="mt-2">
           <NuxtLink to="/cas/clubs">
             <Button :variant="route.name === 'cas-clubs' ? 'secondary' : 'ghost'" class="w-full justify-start">
               <Icon class="mr-2 h-4 w-4" name="material-symbols:grid-view-outline-rounded" />
-              社团列表
+              {{ t('clubs') }}
             </Button>
           </NuxtLink>
           <NuxtLink v-if="[0, 1, 5, 6].includes(new Date().getMonth())" to="/cas/rating">
@@ -70,48 +72,83 @@
       </div>
       <div class="px-3 py-2">
         <h2 class="relative px-4 text-lg font-semibold tracking-tight">
-          CAS管理
+          {{ t('manage') }}
         </h2>
         <div class="mt-2">
           <NuxtLink v-if="isPresidentOrVicePresident" to="/manage/reservation">
             <Button :variant="route.name === 'manage-reservation' ? 'secondary' : 'ghost'" class="w-full justify-start mt-1">
               <Icon class="mr-2 h-4 w-4" name="material-symbols:calendar-today-outline" />
-              预约教室
+              {{ t('reservation') }}
             </Button>
           </NuxtLink>
           <NuxtLink to="/manage/manage">
             <Button v-if="isPresidentOrVicePresident" :variant="route.name === 'manage-manage' ? 'secondary' : 'ghost'" class="w-full justify-start mt-1">
               <Icon class="mr-2 h-4 w-4" name="material-symbols:calendar-today-outline" />
-              管理预约
+              {{ t('manage_reservation') }}
             </Button>
           </NuxtLink>
           <NuxtLink to="/manage/statuses">
             <Button :variant="route.name === 'manage-statuses' ? 'secondary' : 'ghost'" class="w-full justify-start mt-1">
               <Icon class="mr-2 h-4 w-4" name="material-symbols:calendar-today-outline" />
-              教室状态
+              {{ t('statuses') }}
             </Button>
           </NuxtLink>
           <NuxtLink to="/manage/record">
             <Button :variant="route.name === 'manage-record' ? 'secondary' : 'ghost'" class="w-full justify-start mt-1">
               <Icon class="mr-2 h-4 w-4" name="charm:tick-double" />
-              活动签到
+              {{ t('record') }}
             </Button>
           </NuxtLink>
         </div>
       </div>
       <div class="py-2 px-3">
         <h2 class="relative px-4 text-lg font-semibold tracking-tight">
-          信息
+          {{ t('info') }}
         </h2>
         <div class="space-y-1 mt-2">
           <NuxtLink to="/about">
             <Button :variant="route.name === 'about' ? 'secondary' : 'ghost'" class="w-full justify-start">
               <Icon class="mr-2 h-4 w-4" name="material-symbols:info-outline" />
-              关于 Enspire
+              {{ t('about') }}
             </Button>
           </NuxtLink>
         </div>
       </div>
     </div>
   </div>
 </template>
+
+<i18n lang="json">
+{
+  "zh": {
+    "home": "首页",
+    "school_affairs": "校务",
+    "forms": "表格",
+    "cas_information": "CAS信息",
+    "clubs": "社团",
+    "rating": "期末评价",
+    "manage": "CAS管理",
+    "reservation": "预约教室",
+    "manage_reservation": "管理预约",
+    "statuses": "教室状态",
+    "record": "活动签到",
+    "info": "信息",
+    "about": "关于 Enspire"
+  },
+  "en": {
+    "home": "Home",
+    "school_affairs": "School Affairs",
+    "forms": "Forms",
+    "cas_information": "CAS Information",
+    "clubs": "Clubs",
+    "rating": "Rating",
+    "manage": "CAS Management",
+    "reservation": "Reservation",
+    "manage_reservation": "Manage Reservation",
+    "statuses": "Statuses",
+    "record": "Record",
+    "info": "Info",
+    "about": "About Enspire"
+  }
+}
+</i18n>

i18n.config.ts

@@ -0,0 +1,12 @@
+import en from './locales/en.json'
+import zh from './locales/zh.json'
+
+export default defineI18nConfig(() => ({
+  legacy: false,
+  locale: 'en',
+  fallbackLocale: 'zh',
+  messages: {
+    zh,
+    en,
+  },
+}))

locales/en.json

@@ -0,0 +1,3 @@
+{
+
+}

locales/zh.json

@@ -0,0 +1,3 @@
+{
+
+}

nuxt.config.ts

@@ -24,6 +24,7 @@ export default defineNuxtConfig({
     '@sentry/nuxt/module',
     '@nuxt/image',
     'dayjs-nuxt',
+    '@nuxtjs/i18n',
   ],
 
   build: {
@@ -71,5 +72,22 @@ export default defineNuxtConfig({
     },
   },
 
+  future: {
+    compatibilityVersion: 4,
+  },
+
+  i18n: {
+    vueI18n: './i18n.config.ts',
+    detectBrowserLanguage: {
+      useCookie: true,
+      cookieKey: 'i18n_redirected',
+      redirectOn: 'root',
+    },
+  },
+
   compatibilityDate: '2024-08-31',
+
+  devtools: {
+    enabled: true,
+  },
 })

package.json

@@ -24,6 +24,7 @@
     "@netlify/integrations": "^0.5.4",
     "@netlify/sentry": "^0.0.10",
     "@nuxt/content": "^2.13.4",
+    "@nuxtjs/i18n": "^9.1.0",
     "@radix-icons/vue": "^1.0.0",
     "@sentry/nuxt": "^8.34.0",
     "@tanstack/vue-table": "^8.20.5",
@@ -88,5 +89,11 @@
   },
   "prisma": {
     "schema": "db/schema.prisma"
+  },
+  "pnpm": {
+    "overrides": {
+      "@intlify/core": "10.0.5",
+      "@intlify/shared": "10.0.5"
+    }
   }
 }