feat: add live stream hub

components/AppWindow.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { computed, ref, onMounted, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
 import type { AppInstance } from '../stores/apps';
 import { useAppsStore } from '../stores/apps';
 import { useDraggable } from '../composables/useDraggable';
 import type { SnapType } from '../composables/useDraggable';
 import { useResizable } from '../composables/useResizable';
 import { useBreakpoint } from '../composables/useBreakpoint';
-import Calculator from './Calculator.vue';
+import LiveStreamHub from './LiveStreamHub.vue';
 
 const props = defineProps<{ 
   instance: AppInstance;
@@ -14,6 +15,7 @@ const props = defineProps<{
 
 const emit = defineEmits(['snap-preview', 'snap-execute']);
 
+const { t } = useI18n();
 const appsStore = useAppsStore();
 const { isMobile } = useBreakpoint();
 
@@ -122,8 +124,8 @@ function onMouseDown() {
 // Dynamic component loading
 const appComponent = computed(() => {
   switch (props.instance.appId) {
-    case 'calculator':
+    case 'livestream-hub':
-      return Calculator;
+      return LiveStreamHub;
     default:
       return null;
   }
@@ -141,7 +143,7 @@ const appComponent = computed(() => {
     <div class="title-bar" ref="titleBarRef">
       <div class="title-content">
         <span class="app-icon">{{ appInfo?.icon }}</span>
-        <span class="title">{{ instance.title }}</span>
+        <span class="title">{{ appInfo ? t(`apps.${appInfo.name}`) : instance.title }}</span>
       </div>
       <div class="controls">
         <button @click.stop="minimizeAppInstance(instance.id)" class="control-btn minimize" :title="$t('common.minimize')">

components/Desktop.vue

@@ -24,7 +24,7 @@ const { orderedWindows } = storeToRefs(windowsStore);
 const { orderedAppInstances, availableApps } = storeToRefs(appsStore);
 const { iconPositions } = storeToRefs(desktopStore);
 const { isStartMenuOpen } = storeToRefs(uiStore);
-const { createWindow, snapWindow, closeAllWindows } = windowsStore;
+const { snapWindow, closeAllWindows } = windowsStore;
 const { launchApp, closeAllAppInstances } = appsStore;
 const { initializeDesktopIcons, updateIconPosition } = desktopStore;
 const { closeStartMenu } = uiStore;
@@ -192,14 +192,6 @@ watch(availableApps, () => {
       @close-all-windows="handleCloseAllWindows"
     />
 
-    <!-- Legacy Window Button (hidden in corner) -->
-    <button 
-      @click="() => createWindow('New Window')" 
-      class="legacy-window-btn"
-      title="Create Legacy Window"
-    >
-      +
-    </button>
 
     <Taskbar />
   </div>
@@ -215,30 +207,4 @@ watch(availableApps, () => {
   padding-top: 22px;
 }
 
-.legacy-window-btn {
-  position: fixed;
-  bottom: 30px;
-  right: 30px;
-  width: 50px;
-  height: 50px;
-  background: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 50%;
-  color: white;
-  font-weight: bold;
-  font-size: 20px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-.legacy-window-btn:hover {
-  background: rgba(255, 255, 255, 0.2);
-  transform: scale(1.1);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-}
 </style>

components/DesktopIcon.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
 import type { AppInfo } from '../stores/apps';
 import { useAppsStore } from '../stores/apps';
 import { useDraggable } from '../composables/useDraggable';
@@ -14,6 +15,7 @@ interface DesktopIconProps {
 const props = defineProps<DesktopIconProps>();
 const emit = defineEmits(['launch']);
 
+const { t } = useI18n();
 const appsStore = useAppsStore();
 const iconRef = ref<HTMLElement | null>(null);
 
@@ -130,7 +132,7 @@ onUnmounted(() => {
   >
     <div class="icon-container">
       <div class="icon-image">{{ app.icon }}</div>
-      <div class="icon-label">{{ app.name }}</div>
+      <div class="icon-label">{{ t(`apps.${app.name}`) }}</div>
     </div>
   </div>
 </template>

components/LiveStreamHub.vue

@@ -0,0 +1,401 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+// Mock data for live streams
+const featuredStreams = computed(() => [
+  {
+    id: 1,
+    image: "https://picsum.photos/800/400?random=1",
+    externalUrl: "https://twitch.tv/gamingking"
+  },
+  {
+    id: 2,
+    image: "https://picsum.photos/800/400?random=2",
+    externalUrl: "https://youtube.com/watch?v=music123"
+  },
+  {
+    id: 3,
+    image: "https://picsum.photos/800/400?random=3",
+    externalUrl: "https://twitch.tv/cookingchef"
+  },
+  {
+    id: 4,
+    image: "https://picsum.photos/800/400?random=4",
+    externalUrl: "https://youtube.com/watch?v=coding123"
+  }
+]);
+
+const popularStreamers = computed(() => [
+  { id: 1, name: t('livestream.streamers.gamingKing'), avatar: "🎮", viewers: 15420, isLive: true },
+  { id: 2, name: t('livestream.streamers.musicMaster'), avatar: "🎵", viewers: 8930, isLive: true },
+  { id: 3, name: t('livestream.streamers.cookingChef'), avatar: "🍳", viewers: 5670, isLive: true },
+  { id: 4, name: t('livestream.streamers.codeTeacher'), avatar: "💻", viewers: 12300, isLive: true },
+  { id: 5, name: t('livestream.streamers.artist'), avatar: "🎨", viewers: 4200, isLive: true },
+  { id: 6, name: t('livestream.streamers.trainer'), avatar: "💪", viewers: 6800, isLive: false },
+  { id: 7, name: t('livestream.streamers.traveler'), avatar: "✈️", viewers: 3200, isLive: true },
+  { id: 8, name: t('livestream.streamers.petLover'), avatar: "🐱", viewers: 5100, isLive: false }
+]);
+
+// Carousel state
+const currentSlide = ref(0);
+const carouselInterval = ref<number | null>(null);
+
+
+// Auto-play carousel
+const startCarousel = () => {
+  carouselInterval.value = window.setInterval(() => {
+    currentSlide.value = (currentSlide.value + 1) % featuredStreams.value.length;
+  }, 4000);
+};
+
+const stopCarousel = () => {
+  if (carouselInterval.value) {
+    clearInterval(carouselInterval.value);
+    carouselInterval.value = null;
+  }
+};
+
+
+// Handle stream click
+const handleStreamClick = (stream: any) => {
+  if (stream.externalUrl) {
+    window.open(stream.externalUrl, '_blank', 'noopener,noreferrer');
+  }
+};
+
+// Handle streamer click
+const handleStreamerClick = (streamer: any) => {
+  console.log(`查看主播: ${streamer.name}`);
+  // TODO: Open streamer profile
+};
+
+
+onMounted(() => {
+  startCarousel();
+});
+
+onUnmounted(() => {
+  stopCarousel();
+});
+</script>
+
+<template>
+  <div class="livestream-hub">
+    <!-- Header -->
+    <div class="hub-header">
+      <h2 class="hub-title">📺 {{ t('livestream.title') }}</h2>
+      <div class="hub-subtitle">{{ t('livestream.subtitle') }}</div>
+    </div>
+
+    <!-- Home View -->
+    <div class="home-view">
+
+    <!-- Featured Streams Carousel -->
+    <div class="carousel-section">
+      <h3 class="section-title">🔥 {{ t('livestream.featuredStreams') }}</h3>
+      <div class="carousel-container" @mouseenter="stopCarousel" @mouseleave="startCarousel">
+        <div class="carousel-track" :style="{ transform: `translateX(-${currentSlide * 100}%)` }">
+          <div 
+            v-for="stream in featuredStreams" 
+            :key="stream.id"
+            class="carousel-slide"
+            @click="handleStreamClick(stream)"
+          >
+            <div 
+              class="stream-image-card"
+              :style="{ backgroundImage: `url(${stream.image})` }"
+            >
+            </div>
+          </div>
+        </div>
+        
+        <!-- Carousel Controls -->
+        <button 
+          class="carousel-btn prev" 
+          @click="currentSlide = currentSlide > 0 ? currentSlide - 1 : featuredStreams.length - 1"
+        >
+          ‹
+        </button>
+        <button 
+          class="carousel-btn next" 
+          @click="currentSlide = (currentSlide + 1) % featuredStreams.length"
+        >
+          ›
+        </button>
+        
+        <!-- Carousel Indicators -->
+        <div class="carousel-indicators">
+          <button 
+            v-for="(stream, index) in featuredStreams" 
+            :key="index"
+            class="indicator"
+            :class="{ active: index === currentSlide }"
+            @click="currentSlide = index"
+          ></button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Popular Streamers -->
+    <div class="streamers-section">
+      <h3 class="section-title">⭐ {{ t('livestream.popularStreamers') }}</h3>
+      <div class="streamers-grid">
+        <div 
+          v-for="streamer in popularStreamers" 
+          :key="streamer.id"
+          class="streamer-card"
+          @click="handleStreamerClick(streamer)"
+        >
+          <div class="streamer-avatar">{{ streamer.avatar }}</div>
+          <div class="streamer-info">
+            <div class="streamer-name">{{ streamer.name }}</div>
+            <div class="streamer-viewers">{{ streamer.viewers }} {{ t('livestream.viewers') }}</div>
+          </div>
+          <div class="streamer-status" :class="{ 'is-live': streamer.isLive }">
+            {{ streamer.isLive ? `🔴 ${t('livestream.live')}` : `⚪ ${t('livestream.offline')}` }}
+          </div>
+        </div>
+      </div>
+    </div>
+    </div> <!-- End home-view -->
+  </div>
+</template>
+
+<style scoped>
+.livestream-hub {
+  width: 100%;
+  height: 100%;
+  background: var(--window-background);
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+
+.hub-header {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.hub-title {
+  font-size: 24px;
+  font-weight: bold;
+  color: var(--content-text-color);
+  margin: 0 0 8px 0;
+}
+
+.hub-subtitle {
+  font-size: 14px;
+  color: var(--content-text-color);
+  opacity: 0.7;
+}
+
+.carousel-section {
+  margin-bottom: 32px;
+}
+
+.section-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: var(--content-text-color);
+  margin: 0 0 16px 0;
+}
+
+.carousel-container {
+  position: relative;
+  width: 100%;
+  height: 300px;
+  overflow: hidden;
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+}
+
+.carousel-track {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.5s ease-in-out;
+}
+
+.carousel-slide {
+  min-width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.stream-image-card {
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  position: relative;
+  cursor: pointer;
+  transition: transform 0.3s ease;
+}
+
+.stream-image-card:hover {
+  transform: scale(1.02);
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}
+
+.carousel-btn {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgba(0, 0, 0, 0.5);
+  border: none;
+  color: white;
+  font-size: 24px;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  z-index: 10;
+  backdrop-filter: blur(10px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.carousel-btn:hover {
+  background: rgba(0, 0, 0, 0.7);
+  transform: translateY(-50%) scale(1.1);
+}
+
+.carousel-btn.prev {
+  left: 16px;
+}
+
+.carousel-btn.next {
+  right: 16px;
+}
+
+.carousel-indicators {
+  position: absolute;
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 8px;
+  z-index: 10;
+}
+
+.indicator {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 2px solid rgba(255, 255, 255, 0.6);
+  background: rgba(255, 255, 255, 0.3);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  flex-shrink: 0;
+  aspect-ratio: 1;
+  min-width: 12px;
+  min-height: 12px;
+}
+
+.indicator.active {
+  background: white;
+  border-color: white;
+  transform: scale(1.2);
+}
+
+.streamers-section {
+  flex: 1;
+}
+
+.streamers-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+}
+
+.streamer-card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  background: var(--window-background);
+  border: 1px solid var(--window-border-color);
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.streamer-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  border-color: var(--window-border-color-focused);
+}
+
+.streamer-avatar {
+  font-size: 32px;
+  width: 50px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--title-bar-background);
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.streamer-info {
+  flex: 1;
+}
+
+.streamer-name {
+  font-weight: bold;
+  color: var(--content-text-color);
+  margin-bottom: 4px;
+}
+
+.streamer-viewers {
+  font-size: 12px;
+  color: var(--content-text-color);
+  opacity: 0.7;
+}
+
+.streamer-status {
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.streamer-status.is-live {
+  animation: pulse 2s infinite;
+}
+
+/* Light theme adjustments */
+.theme-light .carousel-btn {
+  background: rgba(255, 255, 255, 0.8);
+  color: #333;
+}
+
+.theme-light .carousel-btn:hover {
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.theme-light .indicator {
+  border-color: rgba(0, 0, 0, 0.6);
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.theme-light .indicator.active {
+  background: #333;
+  border-color: #333;
+}
+
+</style>

components/Taskbar.vue

@@ -105,7 +105,7 @@ const taskbarItems = computed(() => {
     const appInfo = appsStore.getAppById(instance.appId);
     items.push({
       id: instance.id,
-      title: instance.title,
+      title: appInfo ? t(`apps.${appInfo.name}`) : instance.title,
       isActive: instance.isFocused,
       type: 'app',
       icon: appInfo?.icon

i18n/lang/en.json

@@ -4,20 +4,63 @@
     "systemSettings": "System Settings...",
     "toggleTheme": "Toggle Theme",
     "signOut": "Sign Out",
-    "closeAllWindows": "Close All Windows",
+    "closeAllWindows": "Close All Windows"
-    "language": "Language",
-    "switchToEnglish": "Switch to English",
-    "switchToChinese": "Switch to 繁體中文"
   },
   "taskbar": {
-    "zhuyin": "Zhuyin",
+    "language": "Language",
-    "english_us": "English (US)",
+    "currentLanguage": "EN"
-    "language": "Language"
   },
   "common": {
     "createWindow": "Create Window",
     "close": "Close",
     "minimize": "Minimize",
-    "maximize": "Maximize"
+    "maximize": "Maximize",
+    "back": "Back"
+  },
+  "apps": {
+    "livestream-hub": "LiveStream Hub",
+    "calculator": "Calculator"
+  },
+  "livestream": {
+    "title": "LiveStream Hub",
+    "subtitle": "Discover amazing live content",
+    "featuredStreams": "Featured Streams",
+    "popularStreamers": "Popular Streamers",
+    "viewers": "viewers",
+    "live": "Live",
+    "offline": "Offline",
+    "watch": "Watch",
+    "follow": "Follow",
+    "share": "Share",
+    "categories": {
+      "gaming": "Gaming",
+      "music": "Music",
+      "lifestyle": "Lifestyle",
+      "education": "Education",
+      "art": "Art",
+      "fitness": "Fitness",
+      "travel": "Travel",
+      "pets": "Pets"
+    },
+    "streams": {
+      "gamingNight": "🎮 Gaming All Night!",
+      "musicShare": "🎵 Late Night Music",
+      "cooking": "🍳 Late Night Kitchen - Learn Cooking",
+      "coding": "💻 Programming Tutorial",
+      "art": "🎨 Digital Art Creation",
+      "fitness": "💪 Fitness Training",
+      "travel": "✈️ Travel Vlog",
+      "pets": "🐱 Pet Care Tips"
+    },
+    "streamers": {
+      "gamingKing": "Gaming King",
+      "musicMaster": "Music Master",
+      "cookingChef": "Cooking Chef",
+      "codeTeacher": "Code Teacher",
+      "artist": "Digital Artist",
+      "trainer": "Fitness Trainer",
+      "traveler": "Travel Blogger",
+      "petLover": "Pet Lover"
+    }
   }
 }

i18n/lang/zh-TW.json

@@ -4,20 +4,63 @@
     "systemSettings": "系統設定...",
     "toggleTheme": "切換主題",
     "signOut": "登出",
-    "closeAllWindows": "關閉所有視窗",
+    "closeAllWindows": "關閉所有視窗"
-    "language": "語言",
-    "switchToEnglish": "切換至英文",
-    "switchToChinese": "切換至繁體中文"
   },
   "taskbar": {
-    "zhuyin": "注音",
+    "language": "語言",
-    "english_us": "英文 (美國)",
+    "currentLanguage": "注"
-    "language": "語言"
   },
   "common": {
     "createWindow": "建立視窗",
     "close": "關閉",
     "minimize": "最小化",
-    "maximize": "最大化"
+    "maximize": "最大化",
+    "back": "返回"
+  },
+  "apps": {
+    "livestream-hub": "直播中心",
+    "calculator": "計算機"
+  },
+  "livestream": {
+    "title": "直播中心",
+    "subtitle": "發現最精彩的直播內容",
+    "featuredStreams": "精選直播",
+    "popularStreamers": "熱門主播",
+    "viewers": "觀看",
+    "live": "直播中",
+    "offline": "離線",
+    "watch": "觀看",
+    "follow": "關注",
+    "share": "分享",
+    "categories": {
+      "gaming": "遊戲",
+      "music": "音樂",
+      "lifestyle": "生活",
+      "education": "教育",
+      "art": "藝術",
+      "fitness": "健身",
+      "travel": "旅遊",
+      "pets": "寵物"
+    },
+    "streams": {
+      "gamingNight": "🎮 今晚通宵打遊戲！",
+      "musicShare": "🎵 深夜音樂分享",
+      "cooking": "🍳 深夜廚房 - 學做菜",
+      "coding": "💻 程式設計教學",
+      "art": "🎨 數位藝術創作",
+      "fitness": "💪 健身訓練",
+      "travel": "✈️ 旅遊日誌",
+      "pets": "🐱 寵物照護小貼士"
+    },
+    "streamers": {
+      "gamingKing": "遊戲小王子",
+      "musicMaster": "音樂達人",
+      "cookingChef": "料理大師",
+      "codeTeacher": "程式導師",
+      "artist": "繪畫師",
+      "trainer": "健身教練",
+      "traveler": "旅遊達人",
+      "petLover": "寵物愛好者"
+    }
   }
 }

stores/apps.ts

@@ -34,12 +34,12 @@ export const useAppsStore = defineStore('apps', () => {
   // Available apps registry
   const availableApps = ref<AppInfo[]>([
     {
-      id: 'calculator',
+      id: 'livestream-hub',
-      name: 'Calculator',
+      name: 'livestream-hub', // Use translation key instead of hardcoded name
-      icon: '🧮',
+      icon: '📺',
-      component: 'Calculator',
+      component: 'LiveStreamHub',
-      description: 'A simple calculator for basic arithmetic operations',
+      description: 'Discover and watch live streams from popular streamers',
-      category: 'Utilities'
+      category: 'Entertainment'
     },
     // More apps can be added here in the future
   ]);
@@ -75,13 +75,13 @@ export const useAppsStore = defineStore('apps', () => {
       minWidth?: number; 
       minHeight?: number; 
     }> = {
-      'calculator': { 
+      'livestream-hub': { 
-        width: 300, 
+        width: 800, 
-        height: 450,
+        height: 600,
-        maxWidth: 350,  // Prevent calculator from getting too wide
+        maxWidth: 1200, // Allow wider view for better content display
-        maxHeight: 500, // Prevent calculator from getting too tall
+        maxHeight: 800, // Allow taller view for more streamers
-        minWidth: 250,  // Minimum usable width
+        minWidth: 600,  // Minimum usable width
-        minHeight: 400  // Minimum usable height
+        minHeight: 500  // Minimum usable height
       },
       'text-editor': { 
         width: 600,