estel/video-tool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改部分样式

Browse Source
This commit is contained in:
estel
2025-08-17 13:25:15 +08:00
parent aa2a552820
commit f45aa01cf0
17 changed files with 14003 additions and 13556 deletions
Download Patch File Download Diff File Expand all files Collapse all files

234
app/pages/index.vue
View File

@@ -3,20 +3,22 @@
<!-- 连接状态 -->
<UCard>
<template #header>
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">连接状态</h2>
<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"></div>
<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
@click="toggleConnection"
<UButton
:variant="connectionStatus === 'connected' ? 'soft' : 'solid'"
:color="connectionStatus === 'connected' ? 'red' : 'blue'"
size="sm"
@click="toggleConnection"
>
{{ connectionStatus === 'connected' ? '断开连接' : '连接' }}
</UButton>
@@ -29,16 +31,22 @@
<!-- 视频预览区域 -->
<UCard>
<template #header>
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">视频预览</h2>
<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>
<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>
<p class="text-gray-400 text-sm">
暂无视频
</p>
</div>
</div>
</UCard>
@@ -46,20 +54,22 @@
<!-- 播放控制 -->
<UCard>
<template #header>
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">播放控制</h2>
<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 @click="playVideo" :disabled="!isConnected" color="green" size="lg">
<UButton :disabled="!isConnected" color="green" size="lg" @click="playVideo">
<UIcon name="i-heroicons-play" class="w-5 h-5 mr-2" />
播放
</UButton>
<UButton @click="pauseVideo" :disabled="!isConnected" color="orange" size="lg">
<UButton :disabled="!isConnected" color="orange" size="lg" @click="pauseVideo">
<UIcon name="i-heroicons-pause" class="w-5 h-5 mr-2" />
暂停
</UButton>
<UButton @click="stopVideo" :disabled="!isConnected" color="red" size="lg">
<UButton :disabled="!isConnected" color="red" size="lg" @click="stopVideo">
<UIcon name="i-heroicons-stop" class="w-5 h-5 mr-2" />
停止
</UButton>
@@ -87,15 +97,15 @@
<!-- 额外功能 -->
<div class="flex flex-wrap gap-2 pt-4 border-t border-gray-200 dark:border-gray-700">
<UButton @click="toggleLoop" :disabled="!isConnected" :variant="isLooping ? 'solid' : 'outline'" size="sm">
<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 @click="toggleFullscreen" :disabled="!isConnected" variant="outline" size="sm">
<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 @click="openVideoFile" variant="outline" size="sm">
<UButton variant="outline" size="sm" @click="openVideoFile">
<UIcon name="i-heroicons-folder-open" class="w-4 h-4 mr-1" />
打开文件
</UButton>
@@ -107,8 +117,10 @@
<UCard>
<template #header>
<div class="flex items-center justify-between">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">播放列表</h2>
<UButton @click="clearPlaylist" variant="ghost" size="sm" color="red">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">
播放列表
</h2>
<UButton variant="ghost" size="sm" color="red" @click="clearPlaylist">
<UIcon name="i-heroicons-trash" class="w-4 h-4 mr-1" />
清空
</UButton>
@@ -120,8 +132,8 @@
<p>播放列表为空</p>
</div>
<div v-else>
<div
v-for="(item, index) in playlist"
<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"
>
@@ -130,10 +142,10 @@
<span class="text-sm font-medium">{{ item }}</span>
</div>
<div class="flex space-x-1">
<UButton @click="playVideoFromPlaylist(index)" size="xs" variant="ghost">
<UButton size="xs" variant="ghost" @click="playVideoFromPlaylist(index)">
<UIcon name="i-heroicons-play" class="w-4 h-4" />
</UButton>
<UButton @click="removeFromPlaylist(index)" size="xs" variant="ghost" color="red">
<UButton size="xs" variant="ghost" color="red" @click="removeFromPlaylist(index)">
<UIcon name="i-heroicons-x-mark" class="w-4 h-4" />
</UButton>
</div>
@@ -145,108 +157,108 @@
</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 '未连接'
interface VideoControllerState {
connectionStatus: "connected" | "connecting" | "disconnected"
currentVideo: string | null
progress: number
volume: number
isLooping: boolean
playlist: string[]
playerAddress: string
}
})
// 方法
const toggleConnection = async () => {
if (connectionStatus.value === 'connected') {
// 断开连接
connectionStatus.value = 'disconnected'
} else {
// 尝试连接
connectionStatus.value = 'connecting'
// TODO: 在这里调用 Tauri API 进行实际连接
setTimeout(() => {
connectionStatus.value = 'connected' // 模拟连接成功
}, 1000)
}
}
// 响应式状态
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 playVideo = async () => {
// TODO: 调用 Tauri API
console.log('播放视频')
}
// 计算属性
const isConnected = computed(() => connectionStatus.value === "connected");
const pauseVideo = async () => {
// TODO: 调用 Tauri API
console.log('暂停视频')
}
const connectionStatusText = computed(() => {
switch (connectionStatus.value) {
case "connected": return "已连接";
case "connecting": return "连接中...";
default: return "未连接";
}
});
const stopVideo = async () => {
// TODO: 调用 Tauri API
console.log('停止视频')
}
// 方法
const toggleConnection = async () => {
if (connectionStatus.value === "connected") {
// 断开连接
connectionStatus.value = "disconnected";
} else {
// 尝试连接
connectionStatus.value = "connecting";
// TODO: 在这里调用 Tauri API 进行实际连接
setTimeout(() => {
connectionStatus.value = "connected"; // 模拟连接成功
}, 1000);
}
};
const toggleLoop = async () => {
isLooping.value = !isLooping.value
// TODO: 调用 Tauri API
console.log('循环播放:', isLooping.value)
}
const playVideo = async () => {
// TODO: 调用 Tauri API
console.log("播放视频");
};
const toggleFullscreen = async () => {
// TODO: 调用 Tauri API
console.log('切换全屏')
}
const pauseVideo = async () => {
// TODO: 调用 Tauri API
console.log("暂停视频");
};
const openVideoFile = async () => {
// TODO: 调用 Tauri API 打开文件选择器
console.log('打开文件')
// 模拟添加到播放列表
playlist.value.push(`示例视频${playlist.value.length + 1}.mp4`)
}
const stopVideo = async () => {
// TODO: 调用 Tauri API
console.log("停止视频");
};
const playVideoFromPlaylist = async (index: number) => {
currentVideo.value = playlist.value[index]
// TODO: 调用 Tauri API 播放指定视频
console.log('播放:', currentVideo.value)
}
const toggleLoop = async () => {
isLooping.value = !isLooping.value;
// TODO: 调用 Tauri API
console.log("循环播放:", isLooping.value);
};
const removeFromPlaylist = (index: number) => {
playlist.value.splice(index, 1)
}
const toggleFullscreen = async () => {
// TODO: 调用 Tauri API
console.log("切换全屏");
};
const clearPlaylist = () => {
playlist.value = []
currentVideo.value = null
}
const openVideoFile = async () => {
// TODO: 调用 Tauri API 打开文件选择器
console.log("打开文件");
// 模拟添加到播放列表
playlist.value.push(`示例视频${playlist.value.length + 1}.mp4`);
};
// 监听进度变化
watch(progress, (newProgress) => {
// TODO: 调用 Tauri API 设置播放进度
console.log('设置进度:', newProgress)
})
const playVideoFromPlaylist = async (index: number) => {
currentVideo.value = playlist.value[index];
// TODO: 调用 Tauri API 播放指定视频
console.log("播放:", currentVideo.value);
};
// 监听音量变化
watch(volume, (newVolume) => {
// TODO: 调用 Tauri API 设置音量
console.log('设置音量:', newVolume)
})
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>