初步完成框架
This commit is contained in:
268
app/pages/settings.vue
Normal file
268
app/pages/settings.vue
Normal file
@@ -0,0 +1,268 @@
|
||||
<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">
|
||||
<UFormGroup label="视频播放器地址" description="设置要连接的视频播放器的IP地址和端口">
|
||||
<div class="flex space-x-2">
|
||||
<UInput v-model="settings.playerHost" placeholder="192.168.1.100" class="flex-1" />
|
||||
<span class="self-center text-gray-500">:</span>
|
||||
<UInput v-model="settings.playerPort" type="number" placeholder="8080" class="w-24" />
|
||||
</div>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="连接超时时间 (秒)" description="连接超时的时间设置">
|
||||
<UInput v-model.number="settings.connectionTimeout" type="number" min="1" max="60" />
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="自动重连" description="连接断开后是否自动尝试重连">
|
||||
<UToggle v-model="settings.autoReconnect" />
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="重连间隔 (秒)" description="自动重连的间隔时间">
|
||||
<UInput
|
||||
v-model.number="settings.reconnectInterval"
|
||||
type="number"
|
||||
min="1"
|
||||
max="300"
|
||||
:disabled="!settings.autoReconnect"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- 播放设置 -->
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">播放设置</h2>
|
||||
</template>
|
||||
<div class="space-y-4">
|
||||
<UFormGroup label="默认音量" description="新视频播放时的默认音量">
|
||||
<div class="flex items-center space-x-4">
|
||||
<URange v-model="settings.defaultVolume" :min="0" :max="100" class="flex-1" />
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400 min-w-[3rem]">{{ settings.defaultVolume }}%</span>
|
||||
</div>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="默认循环播放" description="是否默认启用循环播放">
|
||||
<UToggle v-model="settings.defaultLoop" />
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="自动全屏" description="播放视频时是否自动全屏">
|
||||
<UToggle v-model="settings.autoFullscreen" />
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="播放完成后行为">
|
||||
<USelectMenu
|
||||
v-model="settings.playbackEndBehavior"
|
||||
:options="playbackEndOptions"
|
||||
option-attribute="label"
|
||||
value-attribute="value"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- 界面设置 -->
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">界面设置</h2>
|
||||
</template>
|
||||
<div class="space-y-4">
|
||||
<UFormGroup label="主题模式">
|
||||
<USelectMenu
|
||||
v-model="settings.theme"
|
||||
:options="themeOptions"
|
||||
option-attribute="label"
|
||||
value-attribute="value"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="语言">
|
||||
<USelectMenu
|
||||
v-model="settings.language"
|
||||
:options="languageOptions"
|
||||
option-attribute="label"
|
||||
value-attribute="value"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="显示通知" description="是否显示操作通知">
|
||||
<UToggle v-model="settings.showNotifications" />
|
||||
</UFormGroup>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- 高级设置 -->
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">高级设置</h2>
|
||||
</template>
|
||||
<div class="space-y-4">
|
||||
<UFormGroup label="调试模式" description="启用详细的日志记录">
|
||||
<UToggle v-model="settings.debugMode" />
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="缓存大小 (MB)" description="播放列表和缩略图缓存大小">
|
||||
<UInput v-model.number="settings.cacheSize" type="number" min="10" max="1000" />
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="网络代理" description="设置网络代理（可选）">
|
||||
<UInput v-model="settings.proxy" placeholder="http://proxy.example.com:8080" />
|
||||
</UFormGroup>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="flex justify-between">
|
||||
<UButton @click="resetSettings" variant="outline" color="gray">
|
||||
<UIcon name="i-heroicons-arrow-path" class="w-4 h-4 mr-2" />
|
||||
重置设置
|
||||
</UButton>
|
||||
<div class="space-x-2">
|
||||
<UButton @click="exportSettings" variant="outline">
|
||||
<UIcon name="i-heroicons-arrow-up-tray" class="w-4 h-4 mr-2" />
|
||||
导出配置
|
||||
</UButton>
|
||||
<UButton @click="importSettings" variant="outline">
|
||||
<UIcon name="i-heroicons-arrow-down-tray" class="w-4 h-4 mr-2" />
|
||||
导入配置
|
||||
</UButton>
|
||||
<UButton @click="saveSettings" color="blue">
|
||||
<UIcon name="i-heroicons-check" class="w-4 h-4 mr-2" />
|
||||
保存设置
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
interface AppSettings {
|
||||
playerHost: string
|
||||
playerPort: number
|
||||
connectionTimeout: number
|
||||
autoReconnect: boolean
|
||||
reconnectInterval: number
|
||||
defaultVolume: number
|
||||
defaultLoop: boolean
|
||||
autoFullscreen: boolean
|
||||
playbackEndBehavior: string
|
||||
theme: string
|
||||
language: string
|
||||
showNotifications: boolean
|
||||
debugMode: boolean
|
||||
cacheSize: number
|
||||
proxy: string
|
||||
}
|
||||
|
||||
// 响应式设置数据
|
||||
const settings = ref<AppSettings>({
|
||||
playerHost: '192.168.1.100',
|
||||
playerPort: 8080,
|
||||
connectionTimeout: 10,
|
||||
autoReconnect: true,
|
||||
reconnectInterval: 5,
|
||||
defaultVolume: 50,
|
||||
defaultLoop: false,
|
||||
autoFullscreen: false,
|
||||
playbackEndBehavior: 'stop',
|
||||
theme: 'system',
|
||||
language: 'zh-CN',
|
||||
showNotifications: true,
|
||||
debugMode: false,
|
||||
cacheSize: 100,
|
||||
proxy: ''
|
||||
})
|
||||
|
||||
// 选项数据
|
||||
const playbackEndOptions = [
|
||||
{ label: '停止播放', value: 'stop' },
|
||||
{ label: '播放下一个', value: 'next' },
|
||||
{ label: '重复播放', value: 'repeat' }
|
||||
]
|
||||
|
||||
const themeOptions = [
|
||||
{ label: '跟随系统', value: 'system' },
|
||||
{ label: '浅色模式', value: 'light' },
|
||||
{ label: '深色模式', value: 'dark' }
|
||||
]
|
||||
|
||||
const languageOptions = [
|
||||
{ label: '简体中文', value: 'zh-CN' },
|
||||
{ label: 'English', value: 'en' },
|
||||
{ label: '日本語', value: 'ja' }
|
||||
]
|
||||
|
||||
// 方法
|
||||
const saveSettings = async () => {
|
||||
try {
|
||||
// TODO: 调用 Tauri API 保存设置
|
||||
console.log('保存设置:', settings.value)
|
||||
// 显示成功通知
|
||||
// useToast().add({ title: '设置已保存', color: 'green' })
|
||||
} catch (error) {
|
||||
console.error('保存设置失败:', error)
|
||||
// 显示错误通知
|
||||
// useToast().add({ title: '保存失败', color: 'red' })
|
||||
}
|
||||
}
|
||||
|
||||
const resetSettings = async () => {
|
||||
// 重置为默认设置
|
||||
settings.value = {
|
||||
playerHost: '192.168.1.100',
|
||||
playerPort: 8080,
|
||||
connectionTimeout: 10,
|
||||
autoReconnect: true,
|
||||
reconnectInterval: 5,
|
||||
defaultVolume: 50,
|
||||
defaultLoop: false,
|
||||
autoFullscreen: false,
|
||||
playbackEndBehavior: 'stop',
|
||||
theme: 'system',
|
||||
language: 'zh-CN',
|
||||
showNotifications: true,
|
||||
debugMode: false,
|
||||
cacheSize: 100,
|
||||
proxy: ''
|
||||
}
|
||||
}
|
||||
|
||||
const exportSettings = async () => {
|
||||
try {
|
||||
// TODO: 调用 Tauri API 导出设置到文件
|
||||
console.log('导出设置')
|
||||
} catch (error) {
|
||||
console.error('导出设置失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const importSettings = async () => {
|
||||
try {
|
||||
// TODO: 调用 Tauri API 从文件导入设置
|
||||
console.log('导入设置')
|
||||
} catch (error) {
|
||||
console.error('导入设置失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载时读取设置
|
||||
onMounted(async () => {
|
||||
try {
|
||||
// TODO: 调用 Tauri API 读取保存的设置
|
||||
console.log('加载设置')
|
||||
} catch (error) {
|
||||
console.error('加载设置失败:', error)
|
||||
}
|
||||
})
|
||||
|
||||
// 监听设置变化并自动保存关键设置
|
||||
watch(() => [settings.value.playerHost, settings.value.playerPort], async () => {
|
||||
// 自动保存连接相关设置
|
||||
await saveSettings()
|
||||
}, { debounce: 1000 })
|
||||
</script>
|
||||
Reference in New Issue
Block a user