271 lines
8.5 KiB
Vue
271 lines
8.5 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="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">
|
||
UI
|
||
</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>
|
||
<span class="text-sm">Nuxt 4 </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>
|
||
<span class="text-sm">Tailwind CSS - 原子化 CSS 框架</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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
</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-2 lg:grid-cols-5 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 class="flex items-center space-x-2 text-sm">
|
||
<UIcon name="i-heroicons-device-phone-mobile" class="w-5 h-5 text-gray-500" />
|
||
<span>Android 8.0+</span>
|
||
</div>
|
||
<div class="flex items-center space-x-2 text-sm">
|
||
<UIcon name="i-heroicons-device-phone-mobile" class="w-5 h-5 text-gray-500" />
|
||
<span>iOS 13.0+</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>
|