266 lines
12 KiB
Vue
266 lines
12 KiB
Vue
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import { useSettingsStore } from '../stores/settings'
|
||
import { invoke } from '@tauri-apps/api/core'
|
||
import { open } from '@tauri-apps/plugin-dialog'
|
||
import { Folder, RefreshCw, Monitor, Sun, Moon, Terminal, Download, FileText, X } from 'lucide-vue-next'
|
||
import { format } from 'date-fns' // Import format
|
||
|
||
const settingsStore = useSettingsStore()
|
||
const updatingYtdlp = ref(false)
|
||
const updatingQuickjs = ref(false)
|
||
const updatingFfmpeg = ref(false)
|
||
const updateStatus = ref('')
|
||
|
||
async function browsePath() {
|
||
const selected = await open({
|
||
directory: true,
|
||
multiple: false,
|
||
defaultPath: settingsStore.settings.download_path
|
||
})
|
||
|
||
if (selected) {
|
||
settingsStore.settings.download_path = selected as string
|
||
await settingsStore.save()
|
||
}
|
||
}
|
||
|
||
async function browseCookies() {
|
||
const selected = await open({
|
||
multiple: false,
|
||
directory: false,
|
||
filters: [{ name: 'Text Files', extensions: ['txt', 'cookies'] }, { name: 'All Files', extensions: ['*'] }],
|
||
defaultPath: settingsStore.settings.cookies_path || undefined
|
||
})
|
||
|
||
if (selected) {
|
||
settingsStore.settings.cookies_path = selected as string
|
||
await settingsStore.save()
|
||
}
|
||
}
|
||
|
||
async function clearCookies() {
|
||
settingsStore.settings.cookies_path = ''
|
||
await settingsStore.save()
|
||
}
|
||
|
||
async function updateYtdlp() {
|
||
updatingYtdlp.value = true
|
||
updateStatus.value = '正在更新 yt-dlp...'
|
||
try {
|
||
const res = await invoke<string>('update_ytdlp')
|
||
updateStatus.value = res
|
||
await settingsStore.refreshVersions()
|
||
} catch (e: any) {
|
||
updateStatus.value = 'yt-dlp 错误：' + e.toString()
|
||
} finally {
|
||
updatingYtdlp.value = false
|
||
}
|
||
}
|
||
|
||
async function updateQuickjs() {
|
||
updatingQuickjs.value = true
|
||
updateStatus.value = '正在更新 QuickJS...'
|
||
try {
|
||
const res = await invoke<string>('update_quickjs')
|
||
updateStatus.value = res
|
||
await settingsStore.refreshVersions()
|
||
} catch (e: any) {
|
||
updateStatus.value = 'QuickJS 错误：' + e.toString()
|
||
} finally {
|
||
updatingQuickjs.value = false
|
||
}
|
||
}
|
||
|
||
async function updateFfmpeg() {
|
||
updatingFfmpeg.value = true
|
||
updateStatus.value = '正在更新 FFmpeg...'
|
||
try {
|
||
const res = await invoke<string>('update_ffmpeg')
|
||
updateStatus.value = res
|
||
await settingsStore.refreshVersions()
|
||
} catch (e: any) {
|
||
updateStatus.value = 'FFmpeg 错误：' + e.toString()
|
||
} finally {
|
||
updatingFfmpeg.value = false
|
||
}
|
||
}
|
||
|
||
function setTheme(theme: 'light' | 'dark' | 'system') {
|
||
settingsStore.settings.theme = theme
|
||
settingsStore.save()
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="max-w-3xl mx-auto p-8">
|
||
<header class="mb-8">
|
||
<h1 class="text-3xl font-bold text-zinc-900 dark:text-white">设置</h1>
|
||
<!-- <p class="text-gray-500 dark:text-gray-400 mt-2">配置您的下载偏好。</p> -->
|
||
</header>
|
||
|
||
<div class="space-y-6">
|
||
<!-- Download Path -->
|
||
<section class="bg-white dark:bg-zinc-900 p-6 rounded-2xl shadow-sm border border-gray-200 dark:border-zinc-800">
|
||
<h2 class="text-lg font-bold mb-4 text-zinc-900 dark:text-white">下载位置</h2>
|
||
<div class="flex gap-3">
|
||
<div class="flex-1 bg-gray-50 dark:bg-zinc-800 rounded-xl px-4 py-3 text-sm text-gray-600 dark:text-gray-300 font-mono truncate border border-transparent focus-within:border-blue-500 transition-colors">
|
||
{{ settingsStore.settings.download_path || '未设置 (使用默认)' }}
|
||
</div>
|
||
<button
|
||
@click="browsePath"
|
||
class="bg-gray-100 hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700 text-zinc-900 dark:text-white px-4 py-3 rounded-xl font-medium transition-colors flex items-center gap-2"
|
||
>
|
||
<Folder class="w-5 h-5" />
|
||
浏览
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Cookies Path -->
|
||
<section class="bg-white dark:bg-zinc-900 p-6 rounded-2xl shadow-sm border border-gray-200 dark:border-zinc-800">
|
||
<h2 class="text-lg font-bold mb-4 text-zinc-900 dark:text-white">Cookies 文件</h2>
|
||
<div class="flex gap-3">
|
||
<div class="flex-1 bg-gray-50 dark:bg-zinc-800 rounded-xl px-4 py-3 text-sm text-gray-600 dark:text-gray-300 font-mono border border-transparent focus-within:border-blue-500 transition-colors flex items-center justify-between group min-w-0">
|
||
<div class="truncate mr-2">
|
||
{{ settingsStore.settings.cookies_path || '未设置 (默认空)' }}
|
||
</div>
|
||
<button
|
||
v-if="settingsStore.settings.cookies_path"
|
||
@click="clearCookies"
|
||
class="text-gray-400 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-all p-1 rounded-md hover:bg-gray-200 dark:hover:bg-zinc-700 shrink-0"
|
||
title="清除 Cookies 路径"
|
||
>
|
||
<X class="w-4 h-4" />
|
||
</button>
|
||
</div>
|
||
<button
|
||
@click="browseCookies"
|
||
class="bg-gray-100 hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700 text-zinc-900 dark:text-white px-4 py-3 rounded-xl font-medium transition-colors flex items-center gap-2 shrink-0"
|
||
>
|
||
<FileText class="w-5 h-5" />
|
||
选择
|
||
</button>
|
||
</div>
|
||
<p class="text-xs text-gray-400 mt-2">选填。请指定包含 cookies 的文本文件（Netscape 格式）。频繁使用 cookies 下载视频可能导致封号，慎用。</p>
|
||
</section>
|
||
|
||
<!-- Theme -->
|
||
<section class="bg-white dark:bg-zinc-900 p-6 rounded-2xl shadow-sm border border-gray-200 dark:border-zinc-800">
|
||
<h2 class="text-lg font-bold mb-4 text-zinc-900 dark:text-white">外观</h2>
|
||
<div class="grid grid-cols-3 gap-4">
|
||
<button
|
||
@click="setTheme('light')"
|
||
class="flex flex-col items-center gap-3 p-4 rounded-xl border-2 transition-all"
|
||
:class="settingsStore.settings.theme === 'light' ? 'border-blue-600 bg-blue-50 dark:bg-blue-900/20 text-blue-600' : 'border-transparent bg-gray-50 dark:bg-zinc-800 text-gray-500 hover:bg-gray-100 dark:hover:bg-zinc-700'"
|
||
>
|
||
<Sun class="w-6 h-6" />
|
||
<span class="font-medium">浅色</span>
|
||
</button>
|
||
<button
|
||
@click="setTheme('dark')"
|
||
class="flex flex-col items-center gap-3 p-4 rounded-xl border-2 transition-all"
|
||
:class="settingsStore.settings.theme === 'dark' ? 'border-blue-600 bg-blue-50 dark:bg-blue-900/20 text-blue-600' : 'border-transparent bg-gray-50 dark:bg-zinc-800 text-gray-500 hover:bg-gray-100 dark:hover:bg-zinc-700'"
|
||
>
|
||
<Moon class="w-6 h-6" />
|
||
<span class="font-medium">深色</span>
|
||
</button>
|
||
<button
|
||
@click="setTheme('system')"
|
||
class="flex flex-col items-center gap-3 p-4 rounded-xl border-2 transition-all"
|
||
:class="settingsStore.settings.theme === 'system' ? 'border-blue-600 bg-blue-50 dark:bg-blue-900/20 text-blue-600' : 'border-transparent bg-gray-50 dark:bg-zinc-800 text-gray-500 hover:bg-gray-100 dark:hover:bg-zinc-700'"
|
||
>
|
||
<Monitor class="w-6 h-6" />
|
||
<span class="font-medium">跟随系统</span>
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Binary Management -->
|
||
<section class="bg-white dark:bg-zinc-900 p-6 rounded-2xl shadow-sm border border-gray-200 dark:border-zinc-800">
|
||
<h2 class="text-lg font-bold mb-4 text-zinc-900 dark:text-white">外部二进制文件</h2>
|
||
|
||
<div class="space-y-4">
|
||
<!-- yt-dlp -->
|
||
<div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-zinc-800 rounded-xl">
|
||
<div class="flex items-center gap-4">
|
||
<div class="w-10 h-10 bg-white dark:bg-zinc-700 rounded-lg flex items-center justify-center shadow-sm">
|
||
<Download class="w-5 h-5 text-blue-600" />
|
||
</div>
|
||
<div>
|
||
<div class="font-medium text-zinc-900 dark:text-white">yt-dlp</div>
|
||
<div class="text-xs text-gray-500 mt-0.5 font-mono">v{{ settingsStore.ytdlpVersion }}</div>
|
||
</div>
|
||
</div>
|
||
<button
|
||
@click="updateYtdlp"
|
||
:disabled="updatingYtdlp"
|
||
class="text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 px-4 py-2 rounded-lg transition-colors text-sm font-medium flex items-center gap-2 disabled:opacity-50"
|
||
>
|
||
<RefreshCw class="w-4 h-4" :class="{ 'animate-spin': updatingYtdlp }" />
|
||
更新
|
||
</button>
|
||
</div>
|
||
|
||
<!-- QuickJS -->
|
||
<div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-zinc-800 rounded-xl">
|
||
<div class="flex items-center gap-4">
|
||
<div class="w-10 h-10 bg-white dark:bg-zinc-700 rounded-lg flex items-center justify-center shadow-sm">
|
||
<Terminal class="w-5 h-5 text-green-600" />
|
||
</div>
|
||
<div>
|
||
<div class="font-medium text-zinc-900 dark:text-white">QuickJS</div>
|
||
<div class="text-xs text-gray-500 mt-0.5 font-mono" :title="settingsStore.quickjsVersion">{{ settingsStore.quickjsVersion }}</div>
|
||
</div>
|
||
</div>
|
||
<button
|
||
@click="updateQuickjs"
|
||
:disabled="updatingQuickjs"
|
||
class="text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 px-4 py-2 rounded-lg transition-colors text-sm font-medium flex items-center gap-2 disabled:opacity-50"
|
||
>
|
||
<RefreshCw class="w-4 h-4" :class="{ 'animate-spin': updatingQuickjs }" />
|
||
更新
|
||
</button>
|
||
</div>
|
||
|
||
<!-- FFmpeg -->
|
||
<div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-zinc-800 rounded-xl">
|
||
<div class="flex items-center gap-4">
|
||
<div class="w-10 h-10 bg-white dark:bg-zinc-700 rounded-lg flex items-center justify-center shadow-sm">
|
||
<Terminal class="w-5 h-5 text-purple-600" />
|
||
</div>
|
||
<div>
|
||
<div class="font-medium text-zinc-900 dark:text-white">FFmpeg</div>
|
||
<div class="text-xs text-gray-500 mt-0.5 font-mono" :title="settingsStore.ffmpegVersion">
|
||
{{ ['Checking...', '未安装', 'Error'].includes(settingsStore.ffmpegVersion) ? settingsStore.ffmpegVersion : '已安装' }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button
|
||
@click="updateFfmpeg"
|
||
:disabled="updatingFfmpeg"
|
||
class="text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 px-4 py-2 rounded-lg transition-colors text-sm font-medium flex items-center gap-2 disabled:opacity-50"
|
||
>
|
||
<RefreshCw class="w-4 h-4" :class="{ 'animate-spin': updatingFfmpeg }" />
|
||
更新
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="updateStatus" class="mt-4 p-3 bg-gray-50 dark:bg-zinc-800 rounded-lg text-xs font-mono text-gray-600 dark:text-gray-400 whitespace-pre-wrap border border-gray-200 dark:border-zinc-700">
|
||
{{ updateStatus }}
|
||
</div>
|
||
<div v-if="settingsStore.runtimeStatus" class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-3 text-xs">
|
||
<div class="rounded-lg border border-gray-200 dark:border-zinc-700 bg-gray-50 dark:bg-zinc-800 px-3 py-2">
|
||
FFmpeg 来源：{{ settingsStore.runtimeStatus.ffmpeg_source }}
|
||
</div>
|
||
<div class="rounded-lg border border-gray-200 dark:border-zinc-700 bg-gray-50 dark:bg-zinc-800 px-3 py-2">
|
||
JS Runtime：{{ settingsStore.runtimeStatus.js_runtime_name }} ({{ settingsStore.runtimeStatus.js_runtime_source }})
|
||
</div>
|
||
</div>
|
||
<p class="text-xs text-gray-400 mt-4 text-right">上次检查： {{ settingsStore.settings.last_updated ? format(new Date(settingsStore.settings.last_updated), 'yyyy-MM-dd HH:mm:ss') : '从未' }}</p>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</template>
|