265 lines
8.3 KiB
Vue
265 lines
8.3 KiB
Vue
<template>
|
|
<div class="space-y-6">
|
|
<!-- 连接状态 -->
|
|
<UCard>
|
|
<template #header>
|
|
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">
|
|
连接状态
|
|
</h2>
|
|
</template>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center space-x-3">
|
|
<div :class="connectionStatus === 'connected' ? 'bg-green-500' : connectionStatus === 'connecting' ? 'bg-yellow-500' : 'bg-red-500'" class="w-3 h-3 rounded-full" />
|
|
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
{{ connectionStatusText }}
|
|
</span>
|
|
</div>
|
|
<UButton
|
|
:variant="connectionStatus === 'connected' ? 'soft' : 'solid'"
|
|
:color="connectionStatus === 'connected' ? 'primary' : 'secondary'"
|
|
size="sm"
|
|
@click="toggleConnection"
|
|
>
|
|
{{ connectionStatus === 'connected' ? '断开连接' : '连接' }}
|
|
</UButton>
|
|
</div>
|
|
<div class="mt-4 text-sm text-gray-600 dark:text-gray-400">
|
|
<p>视频播放器地址: {{ playerAddress }}</p>
|
|
</div>
|
|
</UCard>
|
|
|
|
<!-- 视频预览区域 -->
|
|
<UCard>
|
|
<template #header>
|
|
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">
|
|
视频预览
|
|
</h2>
|
|
</template>
|
|
<div class="bg-black rounded-lg aspect-video flex items-center justify-center">
|
|
<div v-if="currentVideo" class="text-center">
|
|
<UIcon name="i-heroicons-film" class="w-16 h-16 text-gray-400 mx-auto mb-2" />
|
|
<p class="text-white text-sm">
|
|
{{ currentVideo }}
|
|
</p>
|
|
</div>
|
|
<div v-else class="text-center">
|
|
<UIcon name="i-heroicons-video-camera-slash" class="w-16 h-16 text-gray-600 mx-auto mb-2" />
|
|
<p class="text-gray-400 text-sm">
|
|
暂无视频
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
|
|
<!-- 播放控制 -->
|
|
<UCard>
|
|
<template #header>
|
|
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">
|
|
播放控制
|
|
</h2>
|
|
</template>
|
|
<div class="space-y-4">
|
|
<!-- 主要控制按钮 -->
|
|
<div class="flex justify-center space-x-4">
|
|
<UButton :disabled="!isConnected" color="success" size="lg" @click="playVideo">
|
|
<UIcon name="i-heroicons-play" class="w-5 h-5 mr-2" />
|
|
播放
|
|
</UButton>
|
|
<UButton :disabled="!isConnected" color="warning" size="lg" @click="pauseVideo">
|
|
<UIcon name="i-heroicons-pause" class="w-5 h-5 mr-2" />
|
|
暂停
|
|
</UButton>
|
|
<UButton :disabled="!isConnected" color="error" size="lg" @click="stopVideo">
|
|
<UIcon name="i-heroicons-stop" class="w-5 h-5 mr-2" />
|
|
停止
|
|
</UButton>
|
|
</div>
|
|
|
|
<!-- 进度控制 -->
|
|
<div class="space-y-2">
|
|
<label class="text-sm font-medium text-gray-700 dark:text-gray-300">播放进度</label>
|
|
<div class="flex items-center space-x-4">
|
|
<URange v-model="progress" :min="0" :max="100" :disabled="!isConnected" class="flex-1" />
|
|
<span class="text-sm text-gray-600 dark:text-gray-400 min-w-[3rem]">{{ progress }}%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 音量控制 -->
|
|
<div class="space-y-2">
|
|
<label class="text-sm font-medium text-gray-700 dark:text-gray-300">音量</label>
|
|
<div class="flex items-center space-x-4">
|
|
<UIcon name="i-heroicons-speaker-x-mark" class="w-5 h-5 text-gray-400" />
|
|
<URange v-model="volume" :min="0" :max="100" :disabled="!isConnected" class="flex-1" />
|
|
<UIcon name="i-heroicons-speaker-wave" class="w-5 h-5 text-gray-400" />
|
|
<span class="text-sm text-gray-600 dark:text-gray-400 min-w-[3rem]">{{ volume }}%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 额外功能 -->
|
|
<div class="flex flex-wrap gap-2 pt-4 border-t border-gray-200 dark:border-gray-700">
|
|
<UButton :disabled="!isConnected" :variant="isLooping ? 'solid' : 'outline'" size="sm" @click="toggleLoop">
|
|
<UIcon name="i-heroicons-arrow-path" class="w-4 h-4 mr-1" />
|
|
循环播放
|
|
</UButton>
|
|
<UButton :disabled="!isConnected" variant="outline" size="sm" @click="toggleFullscreen">
|
|
<UIcon name="i-heroicons-arrows-pointing-out" class="w-4 h-4 mr-1" />
|
|
全屏
|
|
</UButton>
|
|
<UButton variant="outline" size="sm" @click="openVideoFile">
|
|
<UIcon name="i-heroicons-folder-open" class="w-4 h-4 mr-1" />
|
|
打开文件
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
|
|
<!-- 播放列表 -->
|
|
<UCard>
|
|
<template #header>
|
|
<div class="flex items-center justify-between">
|
|
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">
|
|
播放列表
|
|
</h2>
|
|
<UButton variant="ghost" size="sm" color="error" @click="clearPlaylist">
|
|
<UIcon name="i-heroicons-trash" class="w-4 h-4 mr-1" />
|
|
清空
|
|
</UButton>
|
|
</div>
|
|
</template>
|
|
<div class="space-y-2">
|
|
<div v-if="playlist.length === 0" class="text-center py-8 text-gray-500 dark:text-gray-400">
|
|
<UIcon name="i-heroicons-queue-list" class="w-12 h-12 mx-auto mb-2 text-gray-300" />
|
|
<p>播放列表为空</p>
|
|
</div>
|
|
<div v-else>
|
|
<div
|
|
v-for="(item, index) in playlist"
|
|
:key="index"
|
|
class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg"
|
|
>
|
|
<div class="flex items-center space-x-3">
|
|
<UIcon name="i-heroicons-film" class="w-5 h-5 text-gray-400" />
|
|
<span class="text-sm font-medium">{{ item }}</span>
|
|
</div>
|
|
<div class="flex space-x-1">
|
|
<UButton size="xs" variant="ghost" @click="playVideoFromPlaylist(index)">
|
|
<UIcon name="i-heroicons-play" class="w-4 h-4" />
|
|
</UButton>
|
|
<UButton size="xs" variant="ghost" color="error" @click="removeFromPlaylist(index)">
|
|
<UIcon name="i-heroicons-x-mark" class="w-4 h-4" />
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
interface VideoControllerState {
|
|
connectionStatus: "connected" | "connecting" | "disconnected"
|
|
currentVideo: string | null
|
|
progress: number
|
|
volume: number
|
|
isLooping: boolean
|
|
playlist: string[]
|
|
playerAddress: string
|
|
}
|
|
|
|
// 响应式状态
|
|
const connectionStatus = ref<VideoControllerState["connectionStatus"]>("disconnected");
|
|
const currentVideo = ref<string | null>(null);
|
|
const progress = ref(0);
|
|
const volume = ref(50);
|
|
const isLooping = ref(false);
|
|
const playlist = ref<string[]>([]);
|
|
const playerAddress = ref("192.168.1.100:8080");
|
|
|
|
// 计算属性
|
|
const isConnected = computed(() => connectionStatus.value === "connected");
|
|
|
|
const connectionStatusText = computed(() => {
|
|
switch (connectionStatus.value) {
|
|
case "connected": return "已连接";
|
|
case "connecting": return "连接中...";
|
|
default: return "未连接";
|
|
}
|
|
});
|
|
|
|
// 方法
|
|
const toggleConnection = async () => {
|
|
if (connectionStatus.value === "connected") {
|
|
// 断开连接
|
|
connectionStatus.value = "disconnected";
|
|
} else {
|
|
// 尝试连接
|
|
connectionStatus.value = "connecting";
|
|
// TODO: 在这里调用 Tauri API 进行实际连接
|
|
setTimeout(() => {
|
|
connectionStatus.value = "connected"; // 模拟连接成功
|
|
}, 1000);
|
|
}
|
|
};
|
|
|
|
const playVideo = async () => {
|
|
// TODO: 调用 Tauri API
|
|
console.log("播放视频");
|
|
};
|
|
|
|
const pauseVideo = async () => {
|
|
// TODO: 调用 Tauri API
|
|
console.log("暂停视频");
|
|
};
|
|
|
|
const stopVideo = async () => {
|
|
// TODO: 调用 Tauri API
|
|
console.log("停止视频");
|
|
};
|
|
|
|
const toggleLoop = async () => {
|
|
isLooping.value = !isLooping.value;
|
|
// TODO: 调用 Tauri API
|
|
console.log("循环播放:", isLooping.value);
|
|
};
|
|
|
|
const toggleFullscreen = async () => {
|
|
// TODO: 调用 Tauri API
|
|
console.log("切换全屏");
|
|
};
|
|
|
|
const openVideoFile = async () => {
|
|
// TODO: 调用 Tauri API 打开文件选择器
|
|
console.log("打开文件");
|
|
// 模拟添加到播放列表
|
|
playlist.value.push(`示例视频${playlist.value.length + 1}.mp4`);
|
|
};
|
|
|
|
const playVideoFromPlaylist = async (index: number) => {
|
|
currentVideo.value = playlist.value[index] || null;
|
|
// TODO: 调用 Tauri API 播放指定视频
|
|
console.log("播放:", currentVideo.value);
|
|
};
|
|
|
|
const removeFromPlaylist = (index: number) => {
|
|
playlist.value.splice(index, 1);
|
|
};
|
|
|
|
const clearPlaylist = () => {
|
|
playlist.value = [];
|
|
currentVideo.value = null;
|
|
};
|
|
|
|
// 监听进度变化
|
|
watch(progress, (newProgress) => {
|
|
// TODO: 调用 Tauri API 设置播放进度
|
|
console.log("设置进度:", newProgress);
|
|
});
|
|
|
|
// 监听音量变化
|
|
watch(volume, (newVolume) => {
|
|
// TODO: 调用 Tauri API 设置音量
|
|
console.log("设置音量:", newVolume);
|
|
});
|
|
</script>
|