From 700c25d79ed2306073c8336a318a544b652a3b87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E6=80=A7=E9=A9=8A?= <igs170911@gmail.com>
Date: Thu, 25 Sep 2025 10:10:57 +0800
Subject: [PATCH] feat: add taskbar

---
 components/StartMenu.vue |  3 ++-
 components/Taskbar.vue   | 18 +++++++++++-------
 i18n.config.ts           |  4 ++--
 lang/en.json             |  4 ++++
 lang/zh-TW.json          |  4 ++++
 nuxt.config.ts           |  8 ++++++--
 6 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/components/StartMenu.vue b/components/StartMenu.vue
index 8599ac6..e50ff82 100644
--- a/components/StartMenu.vue
+++ b/components/StartMenu.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { t } = useI18n();
+const { t, locale, setLocale } = useI18n();
 
 // This component now only emits events and has no internal logic.
 const emit = defineEmits([
@@ -9,6 +9,7 @@ const emit = defineEmits([
   'sign-out',
   'close-all-windows'
 ]);
+
 </script>
 
 <template>
diff --git a/components/Taskbar.vue b/components/Taskbar.vue
index 19a0ad7..4019d5a 100644
--- a/components/Taskbar.vue
+++ b/components/Taskbar.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useWindowsStore } from '../stores/windows';
 import { useUIStore } from '../stores/ui';
+import { useI18n } from 'vue-i18n';
 
+const { t, locale } = useI18n();
 const windowsStore = useWindowsStore();
 const uiStore = useUIStore();
 
@@ -18,10 +20,12 @@ let timer: number;
 
 const updateTime = () => {
   const now = new Date();
-  dateString.value = now.toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric' });
-  timeString.value = now.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit', hour12: false });
+  dateString.value = now.toLocaleDateString(locale.value, { weekday: 'short', month: 'short', day: 'numeric' });
+  timeString.value = now.toLocaleTimeString(locale.value, { hour: '2-digit', minute: '2-digit', hour12: false });
 };
 
+watch(locale, updateTime);
+
 onMounted(() => {
   updateTime();
   timer = window.setInterval(updateTime, 1000);
@@ -31,10 +35,10 @@ onMounted(() => {
 const inputMode = ref('A');
 const isInputMenuOpen = ref(false);
 const inputSwitcherWrapper = ref<HTMLElement | null>(null);
-const availableInputModes = [
-  { key: '注', label: '注音' },
-  { key: 'A', label: 'English (US)' },
-];
+const availableInputModes = computed(() => [
+  { key: '注', label: t('taskbar.zhuyin') },
+  { key: 'A', label: t('taskbar.english_us') },
+]);
 
 function toggleInputMenu() {
   isInputMenuOpen.value = !isInputMenuOpen.value;
diff --git a/i18n.config.ts b/i18n.config.ts
index 4f7077f..baaa68d 100644
--- a/i18n.config.ts
+++ b/i18n.config.ts
@@ -3,9 +3,9 @@ import zhTW from './lang/zh-TW.json';
 
 export default {
   legacy: false,
-  locale: 'zh-TW',
+  locale: 'zh',
   messages: {
     en,
-    'zh-TW': zhTW,
+    'zh': zhTW,
   }
 }
diff --git a/lang/en.json b/lang/en.json
index 24262f7..871a867 100644
--- a/lang/en.json
+++ b/lang/en.json
@@ -5,5 +5,9 @@
     "toggleTheme": "Toggle Theme",
     "signOut": "Sign Out",
     "closeAllWindows": "Close All Windows"
+  },
+  "taskbar": {
+    "zhuyin": "Zhuyin",
+    "english_us": "English (US)"
   }
 }
diff --git a/lang/zh-TW.json b/lang/zh-TW.json
index 9a73c0b..fdc9739 100644
--- a/lang/zh-TW.json
+++ b/lang/zh-TW.json
@@ -5,5 +5,9 @@
     "toggleTheme": "切換主題",
     "signOut": "登出",
     "closeAllWindows": "關閉所有視窗"
+  },
+  "taskbar": {
+    "zhuyin": "注音",
+    "english_us": "英文 (美國)"
   }
 }
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 9fd4c1d..5f8d5b2 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -17,12 +17,16 @@ export default defineNuxtConfig({
         name: 'English'
       },
       {
-        code: 'zh-TW',
+        code: 'zh',
         name: '繁體中文'
       }
     ],
-    defaultLocale: 'zh-TW', // Set default language to Traditional Chinese
+    defaultLocale: 'zh', // Set default language to Traditional Chinese
     vueI18n: './i18n.config.ts', // Point to a separate config file for cleaner setup
+    detectBrowserLanguage: {
+      useCookie: true,
+      fallbackLocale: 'zh'
+    }
   },
 
   // Global CSS - We will import this in app.vue instead