277 lines
7.6 KiB
Vue
277 lines
7.6 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">
|
|
<UFormGroup label="视频播放器地址" description="设置要连接的视频播放器的IP地址和端口">
|
|
<div class="flex space-x-2">
|
|
<UInput v-model="settings.playerHost" placeholder="192.168.1.100" class="flex-1 mb-3" />
|
|
<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 variant="outline" color="success" @click="resetSettings">
|
|
<UIcon name="i-heroicons-arrow-path" class="w-4 h-4 mr-2" />
|
|
重置设置
|
|
</UButton>
|
|
<div class="space-x-2">
|
|
<UButton variant="outline" @click="exportSettings">
|
|
<UIcon name="i-heroicons-arrow-up-tray" class="w-4 h-4 mr-2" />
|
|
导出配置
|
|
</UButton>
|
|
<UButton variant="outline" @click="importSettings">
|
|
<UIcon name="i-heroicons-arrow-down-tray" class="w-4 h-4 mr-2" />
|
|
导入配置
|
|
</UButton>
|
|
<UButton color="primary" @click="saveSettings">
|
|
<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>
|