172 lines
7.9 KiB
Vue
172 lines
7.9 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 } from 'lucide-vue-next'
|
||
import { format } from 'date-fns' // Import format
|
||
|
||
const settingsStore = useSettingsStore()
|
||
const updatingYtdlp = ref(false)
|
||
const updatingQuickjs = 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 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
|
||
}
|
||
}
|
||
|
||
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>
|
||
|
||
<!-- 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">{{ 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>
|
||
</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>
|
||
<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> |