feat: add taskbar

components/StartMenu.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+const { t } = useI18n();
+
 // This component now only emits events and has no internal logic.
 const emit = defineEmits([
   'about',
@@ -12,13 +14,13 @@ const emit = defineEmits([
 <template>
   <div class="start-menu">
     <ul>
-      <li @click="emit('about')">About This Project</li>
+      <li @click="emit('about')">{{ t('startMenu.about') }}</li>
       <li class="separator"></li>
-      <li @click="emit('settings')">System Settings...</li>
-      <li @click="emit('toggle-theme')">Toggle Theme</li>
+      <li @click="emit('settings')">{{ t('startMenu.systemSettings') }}</li>
+      <li @click="emit('toggle-theme')">{{ t('startMenu.toggleTheme') }}</li>
       <li class="separator"></li>
-      <li @click="emit('sign-out')">Sign Out</li>
-      <li @click="emit('close-all-windows')">Close All Windows</li>
+      <li @click="emit('sign-out')">{{ t('startMenu.signOut') }}</li>
+      <li @click="emit('close-all-windows')">{{ t('startMenu.closeAllWindows') }}</li>
     </ul>
   </div>
 </template>

i18n.config.ts

@@ -1,11 +1,11 @@
 import en from './lang/en.json';
 import zhTW from './lang/zh-TW.json';
 
-export default defineI18nConfig(() => ({
+export default {
   legacy: false,
   locale: 'zh-TW',
   messages: {
     en,
     'zh-TW': zhTW,
   }
-}))
+}

lang/zh-TW.json

@@ -1,9 +1,9 @@
 {
   "startMenu": {
-    "about": "About This Project",
-    "systemSettings": "System Settings...",
-    "toggleTheme": "Toggle Theme",
-    "signOut": "Sign Out",
-    "closeAllWindows": "Close All Windows"
+    "about": "關於這個專案",
+    "systemSettings": "系統設定...",
+    "toggleTheme": "切換主題",
+    "signOut": "登出",
+    "closeAllWindows": "關閉所有視窗"
   }
 }

package.json

@@ -24,9 +24,8 @@
     "pinia": "^3.0.3",
     "typescript": "^5.9.2",
     "vue": "^3.5.21",
-    "vue-router": "^4.5.1"
-  },
-  "devDependencies": {
+    "vue-router": "^4.5.1",
     "@nuxtjs/i18n": "^10.1.0"
-  }
+  },
+  "devDependencies": {}
 }