556 lines
15 KiB
Vue
556 lines
15 KiB
Vue
<script setup lang="ts">
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { message } from 'ant-design-vue'
|
|
import { useTheme } from '@/composables/useTheme'
|
|
import type { ThemeColor, ThemeMode } from '@/composables/useTheme'
|
|
import type { SelectValue } from 'ant-design-vue/es/select'
|
|
import type { SettingsData } from '@/types/settings'
|
|
import { useSettingsApi } from '@/composables/useSettingsApi'
|
|
import { useUpdateChecker } from '@/composables/useUpdateChecker'
|
|
import { Service, type VersionOut } from '@/api'
|
|
import UpdateModal from '@/components/UpdateModal.vue'
|
|
import { mirrorManager } from '@/utils/mirrorManager'
|
|
|
|
// 引入拆分后的 Tab 组件
|
|
import TabBasic from './TabBasic.vue'
|
|
import TabFunction from './TabFunction.vue'
|
|
import TabNotify from './TabNotify.vue'
|
|
import TabAdvanced from './TabAdvanced.vue'
|
|
import TabOthers from './TabOthers.vue'
|
|
|
|
const router = useRouter()
|
|
const { themeMode, themeColor, themeColors, setThemeMode, setThemeColor } = useTheme()
|
|
const { loading, getSettings, updateSettings } = useSettingsApi()
|
|
const { restartPolling } = useUpdateChecker()
|
|
|
|
// 活动标签
|
|
const activeKey = ref('basic')
|
|
|
|
// 更新相关
|
|
const updateVisible = ref(false)
|
|
const updateData = ref<Record<string, string[]>>({})
|
|
const version = (import.meta as any).env?.VITE_APP_VERSION || '获取版本失败！'
|
|
const backendUpdateInfo = ref<VersionOut | null>(null)
|
|
|
|
// 镜像配置状态
|
|
const mirrorConfigStatus = ref({
|
|
isUsingCloudConfig: false,
|
|
version: '',
|
|
lastUpdated: '',
|
|
source: 'fallback' as 'cloud' | 'fallback',
|
|
})
|
|
const refreshingConfig = ref(false)
|
|
|
|
const settings = reactive<SettingsData>({
|
|
UI: { IfShowTray: false, IfToTray: false },
|
|
Function: {
|
|
BossKey: '',
|
|
HistoryRetentionTime: 0,
|
|
IfAgreeBilibili: false,
|
|
IfAllowSleep: false,
|
|
IfSilence: false,
|
|
IfSkipMumuSplashAds: false,
|
|
},
|
|
Notify: {
|
|
SendTaskResultTime: '不推送',
|
|
IfSendStatistic: false,
|
|
IfSendSixStar: false,
|
|
IfPushPlyer: false,
|
|
IfSendMail: false,
|
|
SMTPServerAddress: '',
|
|
AuthorizationCode: '',
|
|
FromAddress: '',
|
|
ToAddress: '',
|
|
IfServerChan: false,
|
|
ServerChanKey: '',
|
|
ServerChanChannel: '',
|
|
ServerChanTag: '',
|
|
IfCompanyWebHookBot: false,
|
|
CompanyWebHookBotUrl: '',
|
|
},
|
|
Voice: { Enabled: false, Type: 'simple' },
|
|
Start: { IfSelfStart: false, IfMinimizeDirectly: false },
|
|
Update: {
|
|
IfAutoUpdate: false,
|
|
Source: 'GitHub',
|
|
ProxyAddress: '',
|
|
MirrorChyanCDK: '',
|
|
},
|
|
})
|
|
|
|
// 下拉选项
|
|
const historyRetentionOptions = [
|
|
{ label: '7天', value: 7 },
|
|
{ label: '15天', value: 15 },
|
|
{ label: '30天', value: 30 },
|
|
{ label: '60天', value: 60 },
|
|
{ label: '90天', value: 90 },
|
|
{ label: '180天', value: 180 },
|
|
{ label: '365天', value: 365 },
|
|
{ label: '永久保留', value: 0 },
|
|
]
|
|
|
|
const sendTaskResultTimeOptions = [
|
|
{ label: '不推送', value: '不推送' },
|
|
{ label: '任何时刻', value: '任何时刻' },
|
|
{ label: '仅失败时', value: '仅失败时' },
|
|
]
|
|
|
|
const updateSourceOptions = [
|
|
{ label: 'GitHub', value: 'GitHub' },
|
|
{ label: 'Mirror酱', value: 'MirrorChyan' },
|
|
{ label: '自建下载站', value: 'AutoSite' },
|
|
]
|
|
|
|
const voiceTypeOptions = [
|
|
{ label: '简洁', value: 'simple' },
|
|
{ label: '聒噪', value: 'noisy' },
|
|
]
|
|
|
|
const themeModeOptions = [
|
|
{ label: '跟随系统', value: 'system' },
|
|
{ label: '浅色模式', value: 'light' },
|
|
{ label: '深色模式', value: 'dark' },
|
|
]
|
|
|
|
const themeColorLabels: Record<ThemeColor, string> = {
|
|
blue: '蓝色',
|
|
purple: '紫色',
|
|
cyan: '青色',
|
|
green: '绿色',
|
|
magenta: '洋红',
|
|
pink: '粉色',
|
|
red: '红色',
|
|
orange: '橙色',
|
|
yellow: '黄色',
|
|
volcano: '火山红',
|
|
geekblue: '极客蓝',
|
|
lime: '青柠',
|
|
gold: '金色',
|
|
}
|
|
|
|
const themeColorOptions = Object.entries(themeColors).map(([key, color]) => ({
|
|
label: themeColorLabels[key as ThemeColor],
|
|
value: key,
|
|
color,
|
|
}))
|
|
|
|
// 加载和保存
|
|
const loadSettings = async () => {
|
|
const data = await getSettings()
|
|
if (data) Object.assign(settings, data)
|
|
}
|
|
|
|
const saveSettings = async (category: keyof SettingsData, changes: any) => {
|
|
try {
|
|
const updateData = { [category]: changes }
|
|
const result = await updateSettings(updateData)
|
|
if (!result) message.error('设置保存失败')
|
|
} catch (e) {
|
|
console.error(e)
|
|
message.error('设置保存失败')
|
|
}
|
|
}
|
|
|
|
const handleSettingChange = async (category: keyof SettingsData, key: string, value: any) => {
|
|
const changes = { [key]: value }
|
|
await saveSettings(category, changes)
|
|
if (category === 'UI' && (key === 'IfShowTray' || key === 'IfToTray')) {
|
|
try {
|
|
if ((window as any).electronAPI?.updateTraySettings) {
|
|
await (window as any).electronAPI.updateTraySettings({ [key]: value })
|
|
}
|
|
} catch (e) {
|
|
console.error('更新托盘失败', e)
|
|
message.error('托盘设置更新失败')
|
|
}
|
|
}
|
|
if (category === 'Update' && key === 'IfAutoUpdate') {
|
|
try {
|
|
await restartPolling()
|
|
message.success(value ? '已启用自动检查更新' : '已禁用自动检查更新')
|
|
} catch (e) {
|
|
console.error('重启更新检查失败', e)
|
|
message.error('更新检查设置变更失败')
|
|
}
|
|
}
|
|
}
|
|
|
|
// 主题
|
|
const handleThemeModeChange = (e: any) => setThemeMode(e.target.value as ThemeMode)
|
|
const handleThemeColorChange = (value: SelectValue) => {
|
|
if (typeof value === 'string') setThemeColor(value as ThemeColor)
|
|
}
|
|
|
|
// 其他操作
|
|
const goToLogs = () => router.push('/logs')
|
|
const openDevTools = () => (window as any).electronAPI?.openDevTools?.()
|
|
|
|
// 更新检查
|
|
const checkUpdate = async () => {
|
|
try {
|
|
const response = await Service.checkUpdateApiUpdateCheckPost({
|
|
current_version: version,
|
|
if_force: true,
|
|
})
|
|
if (response.code === 200) {
|
|
if (response.if_need_update) {
|
|
updateData.value = response.update_info
|
|
updateVisible.value = true
|
|
} else message.success('暂无更新~')
|
|
} else message.error(response.message || '获取更新失败')
|
|
} catch (e) {
|
|
console.error(e)
|
|
message.error('获取更新失败！')
|
|
}
|
|
}
|
|
|
|
const onUpdateConfirmed = () => (updateVisible.value = false)
|
|
|
|
// 后端版本
|
|
const getBackendVersion = async () => {
|
|
try {
|
|
backendUpdateInfo.value = await Service.getGitVersionApiInfoVersionPost()
|
|
} catch (e) {
|
|
console.error('获取后端版本失败', e)
|
|
}
|
|
}
|
|
|
|
// 镜像配置
|
|
const updateMirrorConfigStatus = () => {
|
|
mirrorConfigStatus.value = mirrorManager.getConfigStatus()
|
|
}
|
|
const refreshMirrorConfig = async () => {
|
|
refreshingConfig.value = true
|
|
try {
|
|
const result = await mirrorManager.refreshCloudConfig()
|
|
if (result.success) {
|
|
message.success('镜像配置刷新成功')
|
|
updateMirrorConfigStatus()
|
|
} else message.warning(result.error || '刷新失败，继续使用当前配置')
|
|
} catch (e) {
|
|
console.error('刷新镜像配置失败', e)
|
|
message.error('刷新镜像配置失败')
|
|
} finally {
|
|
refreshingConfig.value = false
|
|
}
|
|
}
|
|
const goToMirrorTest = () => router.push('/mirror-test')
|
|
|
|
// 通知测试
|
|
const testingNotify = ref(false)
|
|
const testNotify = async () => {
|
|
testingNotify.value = true
|
|
try {
|
|
const res = await Service.testNotifyApiSettingTestNotifyPost()
|
|
if (res?.code && res.code !== 200) message.warning(res?.message || '测试通知发送结果未知')
|
|
else message.success('测试通知已发送')
|
|
} catch (e) {
|
|
console.error('测试通知发送失败', e)
|
|
message.error('测试通知发送失败')
|
|
} finally {
|
|
testingNotify.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadSettings()
|
|
getBackendVersion()
|
|
updateMirrorConfigStatus()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="settings-container">
|
|
<div class="settings-header"><h1 class="page-title">设置</h1></div>
|
|
<div class="settings-content">
|
|
<a-tabs v-model:activeKey="activeKey" type="card" :loading="loading" class="settings-tabs">
|
|
<a-tab-pane key="basic" tab="界面设置">
|
|
<TabBasic
|
|
:settings="settings"
|
|
:theme-mode="themeMode"
|
|
:theme-color="themeColor"
|
|
:theme-mode-options="themeModeOptions"
|
|
:theme-color-options="themeColorOptions"
|
|
:handle-theme-mode-change="handleThemeModeChange"
|
|
:handle-theme-color-change="handleThemeColorChange"
|
|
:handle-setting-change="handleSettingChange"
|
|
/>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="function" tab="功能设置">
|
|
<TabFunction
|
|
:settings="settings"
|
|
:history-retention-options="historyRetentionOptions"
|
|
:update-source-options="updateSourceOptions"
|
|
:voice-type-options="voiceTypeOptions"
|
|
:handle-setting-change="handleSettingChange"
|
|
:check-update="checkUpdate"
|
|
/>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="notify" tab="通知设置">
|
|
<TabNotify
|
|
:settings="settings"
|
|
:send-task-result-time-options="sendTaskResultTimeOptions"
|
|
:handle-setting-change="handleSettingChange"
|
|
:test-notify="testNotify"
|
|
:testing-notify="testingNotify"
|
|
/>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="advanced" tab="高级设置">
|
|
<TabAdvanced
|
|
:go-to-logs="goToLogs"
|
|
:open-dev-tools="openDevTools"
|
|
:mirror-config-status="mirrorConfigStatus"
|
|
:refreshing-config="refreshingConfig"
|
|
:refresh-mirror-config="refreshMirrorConfig"
|
|
:go-to-mirror-test="goToMirrorTest"
|
|
/>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="others" tab="其他设置">
|
|
<TabOthers :version="version" :backend-update-info="backendUpdateInfo" />
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</div>
|
|
<UpdateModal
|
|
v-if="updateVisible"
|
|
v-model:visible="updateVisible"
|
|
:update-data="updateData"
|
|
@confirmed="onUpdateConfirmed"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* 统一样式，使用 :deep 作用到子组件内部 */
|
|
.settings-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
.settings-header {
|
|
margin-bottom: 24px;
|
|
}
|
|
.page-title {
|
|
margin: 0;
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
color: var(--ant-color-text);
|
|
}
|
|
.settings-content {
|
|
background: var(--ant-color-bg-container);
|
|
border-radius: 12px;
|
|
}
|
|
.settings-tabs {
|
|
margin: 0;
|
|
}
|
|
.settings-tabs :deep(.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab) {
|
|
background: transparent;
|
|
border: 1px solid var(--ant-color-border);
|
|
border-radius: 8px 8px 0 0;
|
|
margin-right: 8px;
|
|
}
|
|
.settings-tabs :deep(.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active) {
|
|
background: var(--ant-color-bg-container);
|
|
border-bottom-color: var(--ant-color-bg-container);
|
|
}
|
|
:deep(.tab-content) {
|
|
padding: 24px;
|
|
}
|
|
:deep(.form-section) {
|
|
margin-bottom: 32px;
|
|
}
|
|
:deep(.form-section:last-child) {
|
|
margin-bottom: 0;
|
|
}
|
|
:deep(.section-header) {
|
|
margin-bottom: 20px;
|
|
padding-bottom: 8px;
|
|
border-bottom: 2px solid var(--ant-color-border-secondary);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
:deep(.section-header h3) {
|
|
margin: 0;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: var(--ant-color-text);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
:deep(.section-header h3::before) {
|
|
content: '';
|
|
width: 4px;
|
|
height: 24px;
|
|
background: linear-gradient(135deg, var(--ant-color-primary), var(--ant-color-primary-hover));
|
|
border-radius: 2px;
|
|
}
|
|
:deep(.section-description) {
|
|
margin: 4px 0 0;
|
|
font-size: 13px;
|
|
color: var(--ant-color-text-secondary);
|
|
}
|
|
:deep(.section-doc-link) {
|
|
color: var(--ant-color-primary) !important;
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--ant-color-primary);
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
:deep(.section-doc-link:hover) {
|
|
color: var(--ant-color-primary-hover) !important;
|
|
background-color: var(--ant-color-primary-bg);
|
|
border-color: var(--ant-color-primary-hover);
|
|
text-decoration: none;
|
|
}
|
|
:deep(.section-update-button) {
|
|
height: 32px;
|
|
padding: 0 12px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
border-radius: 6px;
|
|
box-shadow: 0 2px 6px rgba(22, 119, 255, 0.2);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--ant-color-primary),
|
|
var(--ant-color-primary-hover)
|
|
) !important;
|
|
border: none !important;
|
|
color: #fff !important;
|
|
}
|
|
:deep(.section-update-button:hover) {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(22, 119, 255, 0.3);
|
|
background: linear-gradient(135deg, #4096ff, #1677ff) !important;
|
|
color: #fff !important;
|
|
}
|
|
:deep(.section-update-button:active) {
|
|
transform: translateY(0);
|
|
color: #fff !important;
|
|
}
|
|
:deep(.section-update-button svg) {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
:deep(.section-update-button:hover svg) {
|
|
transform: rotate(180deg);
|
|
}
|
|
:deep(.form-item-vertical) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin-bottom: 16px;
|
|
}
|
|
:deep(.form-label-wrapper) {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
:deep(.form-label) {
|
|
font-weight: 600;
|
|
color: var(--ant-color-text);
|
|
font-size: 14px;
|
|
}
|
|
:deep(.help-icon) {
|
|
color: #8c8c8c;
|
|
font-size: 14px;
|
|
}
|
|
:deep(.tooltip-link) {
|
|
color: var(--ant-color-primary) !important;
|
|
text-decoration: underline;
|
|
transition: color 0.2s ease;
|
|
}
|
|
:deep(.tooltip-link:hover) {
|
|
color: var(--ant-color-primary-hover) !important;
|
|
text-decoration: underline;
|
|
}
|
|
:deep(.link-card) {
|
|
background: var(--ant-color-bg-container);
|
|
border: 1px solid var(--ant-color-border);
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
transition: all 0.3s ease;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
:deep(.link-card:hover) {
|
|
border-color: var(--ant-color-primary);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
transform: translateY(-2px);
|
|
}
|
|
:deep(.link-icon) {
|
|
font-size: 48px;
|
|
margin-bottom: 16px;
|
|
line-height: 1;
|
|
color: var(--ant-color-primary);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
:deep(.link-content) {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
:deep(.link-content h4) {
|
|
margin: 0 0 8px;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: var(--ant-color-text);
|
|
}
|
|
:deep(.link-content p) {
|
|
margin: 0 0 16px;
|
|
font-size: 14px;
|
|
color: var(--ant-color-text-secondary);
|
|
line-height: 1.5;
|
|
flex: 1;
|
|
}
|
|
:deep(.link-button) {
|
|
display: inline-block;
|
|
padding: 8px 16px;
|
|
background: var(--ant-color-primary);
|
|
color: #fff !important;
|
|
text-decoration: none;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
transition: background-color 0.2s ease;
|
|
margin-top: auto;
|
|
}
|
|
:deep(.link-button:hover) {
|
|
background: var(--ant-color-primary-hover);
|
|
color: #fff !important;
|
|
text-decoration: none;
|
|
}
|
|
:deep(.info-item) {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
:deep(.info-label) {
|
|
font-weight: 600;
|
|
color: var(--ant-color-text);
|
|
min-width: 100px;
|
|
flex-shrink: 0;
|
|
}
|
|
:deep(.info-value) {
|
|
color: var(--ant-color-text-secondary);
|
|
margin-left: 8px;
|
|
}
|
|
</style>
|