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-16 22:41:14 +08:00
parent b0eed27371
commit ec0010aa93
36 changed files with 2996 additions and 743 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
app/pages/about.vue Normal file
View File

@@ -0,0 +1,252 @@
<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="space-y-4">
<div class="flex items-center space-x-4">
<div class="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
<UIcon name="i-heroicons-tv" class="w-8 h-8 text-blue-600 dark:text-blue-400" />
</div>
<div>
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">{{ appInfo.name }}</h3>
<p class="text-gray-600 dark:text-gray-400">版本 {{ appInfo.version }}</p>
</div>
</div>
<div class="space-y-2">
<p class="text-gray-700 dark:text-gray-300">{{ appInfo.description }}</p>
<p class="text-sm text-gray-600 dark:text-gray-400">
构建时间: {{ appInfo.buildDate }}
</p>
<p class="text-sm text-gray-600 dark:text-gray-400">
作者: {{ appInfo.author }}
</p>
</div>
</div>
</UCard>
<!-- 技术栈 -->
<UCard>
<template #header>
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">技术栈</h2>
</template>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="space-y-3">
<h4 class="font-medium text-gray-900 dark:text-white">前端技术</h4>
<div class="space-y-2">
<div class="flex items-center space-x-3">
<div class="w-6 h-6 bg-green-100 dark:bg-green-900 rounded flex items-center justify-center">
<div class="w-3 h-3 bg-green-500 rounded"></div>
</div>
<span class="text-sm">Nuxt 4 - 全栈 Vue.js 框架</span>
</div>
<div class="flex items-center space-x-3">
<div class="w-6 h-6 bg-blue-100 dark:bg-blue-900 rounded flex items-center justify-center">
<div class="w-3 h-3 bg-blue-500 rounded"></div>
</div>
<span class="text-sm">Vue 3 - 渐进式 JavaScript 框架</span>
</div>
<div class="flex items-center space-x-3">
<div class="w-6 h-6 bg-cyan-100 dark:bg-cyan-900 rounded flex items-center justify-center">
<div class="w-3 h-3 bg-cyan-500 rounded"></div>
</div>
<span class="text-sm">Tailwind CSS - 原子化 CSS 框架</span>
</div>
<div class="flex items-center space-x-3">
<div class="w-6 h-6 bg-emerald-100 dark:bg-emerald-900 rounded flex items-center justify-center">
<div class="w-3 h-3 bg-emerald-500 rounded"></div>
</div>
<span class="text-sm">Nuxt UI - 现代化 UI 组件库</span>
</div>
</div>
</div>
<div class="space-y-3">
<h4 class="font-medium text-gray-900 dark:text-white">后端技术</h4>
<div class="space-y-2">
<div class="flex items-center space-x-3">
<div class="w-6 h-6 bg-orange-100 dark:bg-orange-900 rounded flex items-center justify-center">
<div class="w-3 h-3 bg-orange-500 rounded"></div>
</div>
<span class="text-sm">Tauri 2 - 跨平台桌面应用框架</span>
</div>
<div class="flex items-center space-x-3">
<div class="w-6 h-6 bg-red-100 dark:bg-red-900 rounded flex items-center justify-center">
<div class="w-3 h-3 bg-red-500 rounded"></div>
</div>
<span class="text-sm">Rust - 系统级编程语言</span>
</div>
<div class="flex items-center space-x-3">
<div class="w-6 h-6 bg-purple-100 dark:bg-purple-900 rounded flex items-center justify-center">
<div class="w-3 h-3 bg-purple-500 rounded"></div>
</div>
<span class="text-sm">WebSocket - 实时通信协议</span>
</div>
</div>
</div>
</div>
</UCard>
<!-- 功能特性 -->
<UCard>
<template #header>
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">功能特性</h2>
</template>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="space-y-2">
<div class="flex items-center space-x-2">
<UIcon name="i-heroicons-check-circle" class="w-5 h-5 text-green-500" />
<span class="text-sm">远程视频播放控制</span>
</div>
<div class="flex items-center space-x-2">
<UIcon name="i-heroicons-check-circle" class="w-5 h-5 text-green-500" />
<span class="text-sm">实时播放进度同步</span>
</div>
<div class="flex items-center space-x-2">
<UIcon name="i-heroicons-check-circle" class="w-5 h-5 text-green-500" />
<span class="text-sm">音量调节控制</span>
</div>
<div class="flex items-center space-x-2">
<UIcon name="i-heroicons-check-circle" class="w-5 h-5 text-green-500" />
<span class="text-sm">播放列表管理</span>
</div>
</div>
<div class="space-y-2">
<div class="flex items-center space-x-2">
<UIcon name="i-heroicons-check-circle" class="w-5 h-5 text-green-500" />
<span class="text-sm">循环播放设置</span>
</div>
<div class="flex items-center space-x-2">
<UIcon name="i-heroicons-check-circle" class="w-5 h-5 text-green-500" />
<span class="text-sm">全屏控制</span>
</div>
<div class="flex items-center space-x-2">
<UIcon name="i-heroicons-check-circle" class="w-5 h-5 text-green-500" />
<span class="text-sm">自动重连功能</span>
</div>
<div class="flex items-center space-x-2">
<UIcon name="i-heroicons-check-circle" class="w-5 h-5 text-green-500" />
<span class="text-sm">响应式界面设计</span>
</div>
</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>
<h4 class="font-medium text-gray-900 dark:text-white mb-2">支持的操作系统</h4>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="flex items-center space-x-2 text-sm">
<UIcon name="i-heroicons-computer-desktop" class="w-5 h-5 text-gray-500" />
<span>Windows 10/11</span>
</div>
<div class="flex items-center space-x-2 text-sm">
<UIcon name="i-heroicons-computer-desktop" class="w-5 h-5 text-gray-500" />
<span>macOS 10.15+</span>
</div>
<div class="flex items-center space-x-2 text-sm">
<UIcon name="i-heroicons-computer-desktop" class="w-5 h-5 text-gray-500" />
<span>Linux (x64)</span>
</div>
</div>
</div>
<div>
<h4 class="font-medium text-gray-900 dark:text-white mb-2">网络要求</h4>
<ul class="text-sm text-gray-600 dark:text-gray-400 space-y-1">
<li>• 与视频播放器处于同一局域网</li>
<li>• TCP/IP 网络连接</li>
<li>• 端口访问权限 (默认 8080)</li>
</ul>
</div>
</div>
</UCard>
<!-- 开源许可 -->
<UCard>
<template #header>
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">开源许可</h2>
</template>
<div class="space-y-3">
<p class="text-sm text-gray-600 dark:text-gray-400">
本软件基于 MIT 许可证开源，您可以自由使用、修改和分发。
</p>
<div class="flex space-x-4">
<UButton variant="outline" size="sm">
<UIcon name="i-heroicons-code-bracket" class="w-4 h-4 mr-2" />
查看源码
</UButton>
<UButton variant="outline" size="sm">
<UIcon name="i-heroicons-document-text" class="w-4 h-4 mr-2" />
许可协议
</UButton>
</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">
<p class="text-sm text-gray-600 dark:text-gray-400">
遇到问题或有建议？欢迎通过以下方式联系我们：
</p>
<div class="flex flex-wrap gap-2">
<UButton variant="outline" size="sm">
<UIcon name="i-heroicons-bug-ant" class="w-4 h-4 mr-2" />
报告问题
</UButton>
<UButton variant="outline" size="sm">
<UIcon name="i-heroicons-light-bulb" class="w-4 h-4 mr-2" />
功能建议
</UButton>
<UButton variant="outline" size="sm">
<UIcon name="i-heroicons-question-mark-circle" class="w-4 h-4 mr-2" />
使用帮助
</UButton>
</div>
</div>
</UCard>
</div>
</template>
<script lang="ts" setup>
interface AppInfo {
name: string
version: string
description: string
author: string
buildDate: string
}
const { app } = useAppConfig()
// 应用信息
const appInfo = ref<AppInfo>({
name: app.name,
version: app.version,
description: app.description,
author: app.author,
buildDate: new Date().toLocaleDateString('zh-CN')
})
// 页面加载时获取构建信息
onMounted(async () => {
try {
// TODO: 调用 Tauri API 获取应用构建信息
console.log('获取应用信息')
} catch (error) {
console.error('获取应用信息失败:', error)
}
})
</script>