feat: add taskbar

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>

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' });
+  dateString.value = now.toLocaleDateString(locale.value, { weekday: 'short', month: 'short', day: 'numeric' });
-  timeString.value = now.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit', hour12: false });
+  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 = [
+const availableInputModes = computed(() => [
-  { key: '注', label: '注音' },
+  { key: '注', label: t('taskbar.zhuyin') },
-  { key: 'A', label: 'English (US)' },
+  { key: 'A', label: t('taskbar.english_us') },
-];
+]);
 
 function toggleInputMenu() {
   isInputMenuOpen.value = !isInputMenuOpen.value;

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,
   }
 }

lang/en.json

@@ -5,5 +5,9 @@
     "toggleTheme": "Toggle Theme",
     "signOut": "Sign Out",
     "closeAllWindows": "Close All Windows"
+  },
+  "taskbar": {
+    "zhuyin": "Zhuyin",
+    "english_us": "English (US)"
   }
 }

lang/zh-TW.json

@@ -5,5 +5,9 @@
     "toggleTheme": "切換主題",
     "signOut": "登出",
     "closeAllWindows": "關閉所有視窗"
+  },
+  "taskbar": {
+    "zhuyin": "注音",
+    "english_us": "英文 (美國)"
   }
 }

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