feat: add live stream hub
This commit is contained in:
parent
5734a26cb1
commit
5e7534966d
|
|
@ -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':
|
||||
return Calculator;
|
||||
case 'livestream-hub':
|
||||
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')">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -4,20 +4,63 @@
|
|||
"systemSettings": "System Settings...",
|
||||
"toggleTheme": "Toggle Theme",
|
||||
"signOut": "Sign Out",
|
||||
"closeAllWindows": "Close All Windows",
|
||||
"language": "Language",
|
||||
"switchToEnglish": "Switch to English",
|
||||
"switchToChinese": "Switch to 繁體中文"
|
||||
"closeAllWindows": "Close All Windows"
|
||||
},
|
||||
"taskbar": {
|
||||
"zhuyin": "Zhuyin",
|
||||
"english_us": "English (US)",
|
||||
"language": "Language"
|
||||
"language": "Language",
|
||||
"currentLanguage": "EN"
|
||||
},
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -4,20 +4,63 @@
|
|||
"systemSettings": "系統設定...",
|
||||
"toggleTheme": "切換主題",
|
||||
"signOut": "登出",
|
||||
"closeAllWindows": "關閉所有視窗",
|
||||
"language": "語言",
|
||||
"switchToEnglish": "切換至英文",
|
||||
"switchToChinese": "切換至繁體中文"
|
||||
"closeAllWindows": "關閉所有視窗"
|
||||
},
|
||||
"taskbar": {
|
||||
"zhuyin": "注音",
|
||||
"english_us": "英文 (美國)",
|
||||
"language": "語言"
|
||||
"language": "語言",
|
||||
"currentLanguage": "注"
|
||||
},
|
||||
"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": "寵物愛好者"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,12 +34,12 @@ export const useAppsStore = defineStore('apps', () => {
|
|||
// Available apps registry
|
||||
const availableApps = ref<AppInfo[]>([
|
||||
{
|
||||
id: 'calculator',
|
||||
name: 'Calculator',
|
||||
icon: '🧮',
|
||||
component: 'Calculator',
|
||||
description: 'A simple calculator for basic arithmetic operations',
|
||||
category: 'Utilities'
|
||||
id: 'livestream-hub',
|
||||
name: 'livestream-hub', // Use translation key instead of hardcoded name
|
||||
icon: '📺',
|
||||
component: 'LiveStreamHub',
|
||||
description: 'Discover and watch live streams from popular streamers',
|
||||
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': {
|
||||
width: 300,
|
||||
height: 450,
|
||||
maxWidth: 350, // Prevent calculator from getting too wide
|
||||
maxHeight: 500, // Prevent calculator from getting too tall
|
||||
minWidth: 250, // Minimum usable width
|
||||
minHeight: 400 // Minimum usable height
|
||||
'livestream-hub': {
|
||||
width: 800,
|
||||
height: 600,
|
||||
maxWidth: 1200, // Allow wider view for better content display
|
||||
maxHeight: 800, // Allow taller view for more streamers
|
||||
minWidth: 600, // Minimum usable width
|
||||
minHeight: 500 // Minimum usable height
|
||||
},
|
||||
'text-editor': {
|
||||
width: 600,
|
||||
|
|
|
|||
Loading…
Reference in New Issue