✨ Added the backup feature
This commit is contained in:
@@ -1,10 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue';
|
||||
import { useConfigStore } from '@/stores/configStore';
|
||||
import { useSystemStore } from '@/stores/systemStore';
|
||||
import { useKeybindingStore } from '@/stores/keybindingStore';
|
||||
import { useThemeStore } from '@/stores/themeStore';
|
||||
import { useUpdateStore } from '@/stores/updateStore';
|
||||
import {onMounted} from 'vue';
|
||||
import {useConfigStore} from '@/stores/configStore';
|
||||
import {useSystemStore} from '@/stores/systemStore';
|
||||
import {useKeybindingStore} from '@/stores/keybindingStore';
|
||||
import {useThemeStore} from '@/stores/themeStore';
|
||||
import {useUpdateStore} from '@/stores/updateStore';
|
||||
import {useBackupStore} from '@/stores/backupStore';
|
||||
import WindowTitleBar from '@/components/titlebar/WindowTitleBar.vue';
|
||||
|
||||
const configStore = useConfigStore();
|
||||
@@ -12,6 +13,7 @@ const systemStore = useSystemStore();
|
||||
const keybindingStore = useKeybindingStore();
|
||||
const themeStore = useThemeStore();
|
||||
const updateStore = useUpdateStore();
|
||||
const backupStore = useBackupStore();
|
||||
|
||||
// 应用启动时加载配置和初始化系统信息
|
||||
onMounted(async () => {
|
||||
@@ -26,6 +28,9 @@ onMounted(async () => {
|
||||
await configStore.initializeLanguage();
|
||||
themeStore.initializeTheme();
|
||||
|
||||
// 初始化备份服务
|
||||
await backupStore.initialize();
|
||||
|
||||
// 启动时检查更新
|
||||
await updateStore.checkOnStartup();
|
||||
});
|
||||
@@ -33,7 +38,7 @@ onMounted(async () => {
|
||||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<WindowTitleBar />
|
||||
<WindowTitleBar/>
|
||||
<div class="app-content">
|
||||
<router-view/>
|
||||
</div>
|
||||
|
||||
@@ -119,6 +119,7 @@ export default {
|
||||
general: 'General',
|
||||
editing: 'Editor',
|
||||
appearance: 'Appearance',
|
||||
backupPage: 'Backup',
|
||||
keyBindings: 'Key Bindings',
|
||||
updates: 'Updates',
|
||||
reset: 'Reset',
|
||||
@@ -242,6 +243,49 @@ export default {
|
||||
restartNow: 'Restart Now',
|
||||
hotkeyPreview: 'Preview:',
|
||||
none: 'None',
|
||||
backup: {
|
||||
basicSettings: 'Basic Settings',
|
||||
enableBackup: 'Enable Git Backup',
|
||||
autoBackup: 'Auto Backup',
|
||||
backupInterval: 'Backup Interval',
|
||||
intervals: {
|
||||
'5min': '5 minutes',
|
||||
'10min': '10 minutes',
|
||||
'15min': '15 minutes',
|
||||
'30min': '30 minutes',
|
||||
'1hour': '1 hour'
|
||||
},
|
||||
repositoryConfig: 'Repository Configuration',
|
||||
repoUrl: 'Repository URL',
|
||||
repoUrlPlaceholder: 'Enter Git repository URL',
|
||||
authConfig: 'Authentication Configuration',
|
||||
authMethod: 'Authentication Method',
|
||||
authMethods: {
|
||||
token: 'Access Token',
|
||||
sshKey: 'SSH Key',
|
||||
userPass: 'Username/Password'
|
||||
},
|
||||
username: 'Username',
|
||||
usernamePlaceholder: 'Enter username',
|
||||
password: 'Password',
|
||||
passwordPlaceholder: 'Enter password',
|
||||
token: 'Access Token',
|
||||
tokenPlaceholder: 'Enter access token',
|
||||
sshKeyPath: 'SSH Key Path',
|
||||
sshKeyPathPlaceholder: 'Select SSH key file',
|
||||
sshKeyPassphrase: 'SSH Key Passphrase',
|
||||
sshKeyPassphrasePlaceholder: 'Enter SSH key passphrase',
|
||||
backupOperations: 'Backup Operations',
|
||||
pushToRemote: 'Push to Remote',
|
||||
pushing: 'Pushing...',
|
||||
actions: {
|
||||
push: 'Push',
|
||||
},
|
||||
status: {
|
||||
success: 'Success',
|
||||
failed: 'Failed'
|
||||
}
|
||||
},
|
||||
},
|
||||
extensions: {
|
||||
rainbowBrackets: {
|
||||
|
||||
@@ -119,6 +119,7 @@ export default {
|
||||
general: '常规',
|
||||
editing: '编辑器',
|
||||
appearance: '外观',
|
||||
backupPage: '备份',
|
||||
extensions: '扩展',
|
||||
keyBindings: '快捷键',
|
||||
updates: '更新',
|
||||
@@ -243,6 +244,49 @@ export default {
|
||||
},
|
||||
hotkeyPreview: '预览：',
|
||||
none: '无',
|
||||
backup: {
|
||||
basicSettings: '基本设置',
|
||||
enableBackup: '启用备份',
|
||||
autoBackup: '自动备份',
|
||||
backupInterval: '备份间隔',
|
||||
intervals: {
|
||||
'5min': '5分钟',
|
||||
'10min': '10分钟',
|
||||
'15min': '15分钟',
|
||||
'30min': '30分钟',
|
||||
'1hour': '1小时'
|
||||
},
|
||||
repositoryConfig: '仓库配置',
|
||||
repoUrl: '仓库地址',
|
||||
repoUrlPlaceholder: '请输入Git仓库地址',
|
||||
authConfig: '认证配置',
|
||||
authMethod: '认证方式',
|
||||
authMethods: {
|
||||
token: '访问令牌',
|
||||
sshKey: 'SSH密钥',
|
||||
userPass: '用户名密码'
|
||||
},
|
||||
username: '用户名',
|
||||
usernamePlaceholder: '请输入用户名',
|
||||
password: '密码',
|
||||
passwordPlaceholder: '请输入密码',
|
||||
token: '访问令牌',
|
||||
tokenPlaceholder: '请输入访问令牌',
|
||||
sshKeyPath: 'SSH密钥路径',
|
||||
sshKeyPathPlaceholder: '请选择SSH密钥文件',
|
||||
sshKeyPassphrase: 'SSH密钥密码',
|
||||
sshKeyPassphrasePlaceholder: '请输入SSH密钥密码',
|
||||
backupOperations: '备份操作',
|
||||
pushToRemote: '推送到远程',
|
||||
pushing: '推送中...',
|
||||
actions: {
|
||||
push: '推送',
|
||||
},
|
||||
status: {
|
||||
success: '成功',
|
||||
failed: '失败'
|
||||
}
|
||||
},
|
||||
},
|
||||
extensions: {
|
||||
rainbowBrackets: {
|
||||
|
||||
@@ -7,6 +7,7 @@ import AppearancePage from '@/views/settings/pages/AppearancePage.vue';
|
||||
import KeyBindingsPage from '@/views/settings/pages/KeyBindingsPage.vue';
|
||||
import UpdatesPage from '@/views/settings/pages/UpdatesPage.vue';
|
||||
import ExtensionsPage from '@/views/settings/pages/ExtensionsPage.vue';
|
||||
import BackupPage from '@/views/settings/pages/BackupPage.vue';
|
||||
|
||||
const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
@@ -49,6 +50,11 @@ const routes: RouteRecordRaw[] = [
|
||||
path: 'updates',
|
||||
name: 'SettingsUpdates',
|
||||
component: UpdatesPage
|
||||
},
|
||||
{
|
||||
path: 'backup',
|
||||
name: 'SettingsBackup',
|
||||
component: BackupPage
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -59,4 +65,4 @@ const router = createRouter({
|
||||
routes: routes
|
||||
});
|
||||
|
||||
export default router;
|
||||
export default router;
|
||||
125
frontend/src/stores/backupStore.ts
Normal file
125
frontend/src/stores/backupStore.ts
Normal file
@@ -0,0 +1,125 @@
|
||||
import {defineStore} from 'pinia'
|
||||
import {computed, readonly, ref} from 'vue'
|
||||
import type {GitBackupConfig} from '@/../bindings/voidraft/internal/models'
|
||||
import {BackupService} from '@/../bindings/voidraft/internal/services'
|
||||
import {useConfigStore} from '@/stores/configStore'
|
||||
|
||||
/**
|
||||
* Minimalist Backup Store
|
||||
*/
|
||||
export const useBackupStore = defineStore('backup', () => {
|
||||
// Core state
|
||||
const config = ref<GitBackupConfig | null>(null)
|
||||
const isPushing = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
const isInitialized = ref(false)
|
||||
|
||||
// Backup result states
|
||||
const pushSuccess = ref(false)
|
||||
const pushError = ref(false)
|
||||
|
||||
// Timers for auto-hiding status icons and error messages
|
||||
let pushStatusTimer: number | null = null
|
||||
let errorTimer: number | null = null
|
||||
|
||||
// 获取configStore
|
||||
const configStore = useConfigStore()
|
||||
|
||||
// Computed properties
|
||||
const isEnabled = computed(() => configStore.config.backup.enabled)
|
||||
const isConfigured = computed(() => configStore.config.backup.repo_url)
|
||||
|
||||
// 清除状态显示
|
||||
const clearPushStatus = () => {
|
||||
if (pushStatusTimer !== null) {
|
||||
window.clearTimeout(pushStatusTimer)
|
||||
pushStatusTimer = null
|
||||
}
|
||||
pushSuccess.value = false
|
||||
pushError.value = false
|
||||
}
|
||||
|
||||
// 清除错误信息
|
||||
const clearError = () => {
|
||||
if (errorTimer !== null) {
|
||||
window.clearTimeout(errorTimer)
|
||||
errorTimer = null
|
||||
}
|
||||
error.value = null
|
||||
}
|
||||
|
||||
// 设置错误信息并自动清除
|
||||
const setErrorWithAutoHide = (errorMessage: string, hideAfter: number = 5000) => {
|
||||
clearError() // 清除之前的错误定时器
|
||||
error.value = errorMessage
|
||||
errorTimer = window.setTimeout(() => {
|
||||
error.value = null
|
||||
errorTimer = null
|
||||
}, hideAfter)
|
||||
}
|
||||
|
||||
// Push to remote repository
|
||||
const pushToRemote = async () => {
|
||||
if (isPushing.value || !isConfigured.value) return
|
||||
|
||||
isPushing.value = true
|
||||
clearError() // 清除之前的错误信息
|
||||
clearPushStatus()
|
||||
|
||||
try {
|
||||
await BackupService.PushToRemote()
|
||||
// 显示成功状态，并设置3秒后自动消失
|
||||
pushSuccess.value = true
|
||||
pushStatusTimer = window.setTimeout(() => {
|
||||
pushSuccess.value = false
|
||||
pushStatusTimer = null
|
||||
}, 3000)
|
||||
} catch (err: any) {
|
||||
setErrorWithAutoHide(err?.message || 'Backup operation failed')
|
||||
// 显示错误状态，并设置3秒后自动消失
|
||||
pushError.value = true
|
||||
pushStatusTimer = window.setTimeout(() => {
|
||||
pushError.value = false
|
||||
pushStatusTimer = null
|
||||
}, 3000)
|
||||
} finally {
|
||||
isPushing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化备份服务（只在应用启动时调用一次）
|
||||
const initialize = async () => {
|
||||
if (!isEnabled.value) return
|
||||
|
||||
// 避免重复初始化
|
||||
if (isInitialized.value) return
|
||||
|
||||
clearError() // 清除之前的错误信息
|
||||
try {
|
||||
await BackupService.Initialize()
|
||||
isInitialized.value = true
|
||||
} catch (err: any) {
|
||||
setErrorWithAutoHide(err?.message || 'Failed to initialize backup service')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
// State
|
||||
config: readonly(config),
|
||||
isPushing: readonly(isPushing),
|
||||
error: readonly(error),
|
||||
isInitialized: readonly(isInitialized),
|
||||
pushSuccess: readonly(pushSuccess),
|
||||
pushError: readonly(pushError),
|
||||
|
||||
// Computed
|
||||
isEnabled,
|
||||
isConfigured,
|
||||
|
||||
// Methods
|
||||
pushToRemote,
|
||||
initialize,
|
||||
clearError
|
||||
}
|
||||
})
|
||||
@@ -11,14 +11,14 @@ import {
|
||||
TabType,
|
||||
UpdatesConfig,
|
||||
UpdateSourceType,
|
||||
GitSyncConfig,
|
||||
AuthMethod,
|
||||
SyncStrategy
|
||||
GitBackupConfig,
|
||||
AuthMethod
|
||||
} from '@/../bindings/voidraft/internal/models/models';
|
||||
import {useI18n} from 'vue-i18n';
|
||||
import {ConfigUtils} from '@/utils/configUtils';
|
||||
import {WindowController} from '@/utils/windowController';
|
||||
import * as runtime from '@wailsio/runtime';
|
||||
import {useBackupStore} from '@/stores/backupStore';
|
||||
// 国际化相关导入
|
||||
export type SupportedLocaleType = 'zh-CN' | 'en-US';
|
||||
|
||||
@@ -51,8 +51,8 @@ type UpdatesConfigKeyMap = {
|
||||
readonly [K in keyof UpdatesConfig]: string;
|
||||
};
|
||||
|
||||
type SyncConfigKeyMap = {
|
||||
readonly [K in keyof GitSyncConfig]: string;
|
||||
type BackupConfigKeyMap = {
|
||||
readonly [K in keyof GitBackupConfig]: string;
|
||||
};
|
||||
|
||||
type NumberConfigKey = 'fontSize' | 'tabSize' | 'lineHeight';
|
||||
@@ -95,22 +95,18 @@ const UPDATES_CONFIG_KEY_MAP: UpdatesConfigKeyMap = {
|
||||
gitea: 'updates.gitea'
|
||||
} as const;
|
||||
|
||||
const SYNC_CONFIG_KEY_MAP: SyncConfigKeyMap = {
|
||||
enabled: 'sync.enabled',
|
||||
repo_url: 'sync.repo_url',
|
||||
branch: 'sync.branch',
|
||||
auth_method: 'sync.auth_method',
|
||||
username: 'sync.username',
|
||||
password: 'sync.password',
|
||||
token: 'sync.token',
|
||||
ssh_key_path: 'sync.ssh_key_path',
|
||||
ssh_key_passphrase: 'sync.ssh_key_passphrase',
|
||||
sync_interval: 'sync.sync_interval',
|
||||
last_sync_time: 'sync.last_sync_time',
|
||||
auto_sync: 'sync.auto_sync',
|
||||
local_repo_path: 'sync.local_repo_path',
|
||||
sync_strategy: 'sync.sync_strategy',
|
||||
files_to_sync: 'sync.files_to_sync'
|
||||
const BACKUP_CONFIG_KEY_MAP: BackupConfigKeyMap = {
|
||||
enabled: 'backup.enabled',
|
||||
repo_url: 'backup.repo_url',
|
||||
auth_method: 'backup.auth_method',
|
||||
username: 'backup.username',
|
||||
password: 'backup.password',
|
||||
token: 'backup.token',
|
||||
ssh_key_path: 'backup.ssh_key_path',
|
||||
ssh_key_passphrase: 'backup.ssh_key_passphrase',
|
||||
backup_interval: 'backup.backup_interval',
|
||||
auto_backup: 'backup.auto_backup',
|
||||
|
||||
} as const;
|
||||
|
||||
// 配置限制
|
||||
@@ -286,22 +282,17 @@ const DEFAULT_CONFIG: AppConfig = {
|
||||
repo: "voidraft",
|
||||
}
|
||||
},
|
||||
sync: {
|
||||
backup: {
|
||||
enabled: false,
|
||||
repo_url: "",
|
||||
branch: "main",
|
||||
auth_method: AuthMethod.Token,
|
||||
auth_method: AuthMethod.UserPass,
|
||||
username: "",
|
||||
password: "",
|
||||
token: "",
|
||||
ssh_key_path: "",
|
||||
ssh_key_passphrase: "",
|
||||
sync_interval: 60,
|
||||
last_sync_time: null,
|
||||
auto_sync: true,
|
||||
local_repo_path: "",
|
||||
sync_strategy: SyncStrategy.LocalFirst,
|
||||
files_to_sync: ["voidraft.db"]
|
||||
backup_interval: 60,
|
||||
auto_backup: true,
|
||||
},
|
||||
metadata: {
|
||||
version: '1.0.0',
|
||||
@@ -390,19 +381,19 @@ export const useConfigStore = defineStore('config', () => {
|
||||
state.config.updates[key] = value;
|
||||
};
|
||||
|
||||
const updateSyncConfig = async <K extends keyof GitSyncConfig>(key: K, value: GitSyncConfig[K]): Promise<void> => {
|
||||
const updateBackupConfig = async <K extends keyof GitBackupConfig>(key: K, value: GitBackupConfig[K]): Promise<void> => {
|
||||
// 确保配置已加载
|
||||
if (!state.configLoaded && !state.isLoading) {
|
||||
await initConfig();
|
||||
}
|
||||
|
||||
const backendKey = SYNC_CONFIG_KEY_MAP[key];
|
||||
const backendKey = BACKUP_CONFIG_KEY_MAP[key];
|
||||
if (!backendKey) {
|
||||
throw new Error(`No backend key mapping found for sync.${key.toString()}`);
|
||||
throw new Error(`No backend key mapping found for backup.${key.toString()}`);
|
||||
}
|
||||
|
||||
await ConfigService.Set(backendKey, value);
|
||||
state.config.sync[key] = value;
|
||||
state.config.backup[key] = value;
|
||||
};
|
||||
|
||||
// 加载配置
|
||||
@@ -419,7 +410,7 @@ export const useConfigStore = defineStore('config', () => {
|
||||
if (appConfig.editing) Object.assign(state.config.editing, appConfig.editing);
|
||||
if (appConfig.appearance) Object.assign(state.config.appearance, appConfig.appearance);
|
||||
if (appConfig.updates) Object.assign(state.config.updates, appConfig.updates);
|
||||
if (appConfig.sync) Object.assign(state.config.sync, appConfig.sync);
|
||||
if (appConfig.backup) Object.assign(state.config.backup, appConfig.backup);
|
||||
if (appConfig.metadata) Object.assign(state.config.metadata, appConfig.metadata);
|
||||
}
|
||||
|
||||
@@ -654,18 +645,16 @@ export const useConfigStore = defineStore('config', () => {
|
||||
// 更新配置相关方法
|
||||
setAutoUpdate: async (value: boolean) => await updateUpdatesConfig('autoUpdate', value),
|
||||
|
||||
// Git同步配置相关方法
|
||||
setGitSyncEnabled: (value: boolean) => updateSyncConfig('enabled', value),
|
||||
setGitRepoUrl: (value: string) => updateSyncConfig('repo_url', value),
|
||||
setGitBranch: (value: string) => updateSyncConfig('branch', value),
|
||||
setAuthMethod: (value: AuthMethod) => updateSyncConfig('auth_method', value),
|
||||
setGitUsername: (value: string) => updateSyncConfig('username', value),
|
||||
setGitPassword: (value: string) => updateSyncConfig('password', value),
|
||||
setGitToken: (value: string) => updateSyncConfig('token', value),
|
||||
setSSHKeyPath: (value: string) => updateSyncConfig('ssh_key_path', value),
|
||||
setSyncInterval: (value: number) => updateSyncConfig('sync_interval', value),
|
||||
setAutoSync: (value: boolean) => updateSyncConfig('auto_sync', value),
|
||||
setSyncStrategy: (value: SyncStrategy) => updateSyncConfig('sync_strategy', value),
|
||||
setFilesToSync: (value: string[]) => updateSyncConfig('files_to_sync', value),
|
||||
// 备份配置相关方法
|
||||
setEnableBackup: async (value: boolean) => {await updateBackupConfig('enabled', value);},
|
||||
setAutoBackup: async (value: boolean) => {await updateBackupConfig('auto_backup', value);},
|
||||
setRepoUrl: async (value: string) => await updateBackupConfig('repo_url', value),
|
||||
setAuthMethod: async (value: AuthMethod) => await updateBackupConfig('auth_method', value),
|
||||
setUsername: async (value: string) => await updateBackupConfig('username', value),
|
||||
setPassword: async (value: string) => await updateBackupConfig('password', value),
|
||||
setToken: async (value: string) => await updateBackupConfig('token', value),
|
||||
setSshKeyPath: async (value: string) => await updateBackupConfig('ssh_key_path', value),
|
||||
setSshKeyPassphrase: async (value: string) => await updateBackupConfig('ssh_key_passphrase', value),
|
||||
setBackupInterval: async (value: number) => await updateBackupConfig('backup_interval', value),
|
||||
};
|
||||
});
|
||||
@@ -13,6 +13,7 @@ const navItems = [
|
||||
{ id: 'general', icon: '⚙️', route: '/settings/general' },
|
||||
{ id: 'editing', icon: '✏️', route: '/settings/editing' },
|
||||
{ id: 'appearance', icon: '🎨', route: '/settings/appearance' },
|
||||
{ id: 'backupPage', icon: '🔗', route: '/settings/backup' },
|
||||
{ id: 'extensions', icon: '🧩', route: '/settings/extensions' },
|
||||
{ id: 'keyBindings', icon: '⌨️', route: '/settings/key-bindings' },
|
||||
{ id: 'updates', icon: '🔄', route: '/settings/updates' }
|
||||
@@ -194,11 +195,11 @@ const goBackToEditor = async () => {
|
||||
.settings-content {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
padding: 0 20px;
|
||||
overflow-y: scroll;
|
||||
background-color: var(--settings-bg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</style>
|
||||
503
frontend/src/views/settings/pages/BackupPage.vue
Normal file
503
frontend/src/views/settings/pages/BackupPage.vue
Normal file
@@ -0,0 +1,503 @@
|
||||
<script setup lang="ts">
|
||||
import {useConfigStore} from '@/stores/configStore';
|
||||
import {useBackupStore} from '@/stores/backupStore';
|
||||
import {useI18n} from 'vue-i18n';
|
||||
import {computed, onMounted, onUnmounted} from 'vue';
|
||||
import SettingSection from '../components/SettingSection.vue';
|
||||
import SettingItem from '../components/SettingItem.vue';
|
||||
import ToggleSwitch from '../components/ToggleSwitch.vue';
|
||||
import {AuthMethod} from '@/../bindings/voidraft/internal/models/models';
|
||||
import {DialogService} from '@/../bindings/voidraft/internal/services';
|
||||
|
||||
const {t} = useI18n();
|
||||
const configStore = useConfigStore();
|
||||
const backupStore = useBackupStore();
|
||||
|
||||
// 确保配置已加载
|
||||
onMounted(async () => {
|
||||
if (!configStore.configLoaded) {
|
||||
await configStore.initConfig();
|
||||
}
|
||||
});
|
||||
onUnmounted(() => {
|
||||
backupStore.clearError();
|
||||
})
|
||||
|
||||
// 认证方式选项
|
||||
const authMethodOptions = computed(() => [
|
||||
{value: AuthMethod.Token, label: t('settings.backup.authMethods.token')},
|
||||
{value: AuthMethod.SSHKey, label: t('settings.backup.authMethods.sshKey')},
|
||||
{value: AuthMethod.UserPass, label: t('settings.backup.authMethods.userPass')}
|
||||
]);
|
||||
|
||||
// 备份间隔选项（分钟）
|
||||
const backupIntervalOptions = computed(() => [
|
||||
{value: 5, label: t('settings.backup.intervals.5min')},
|
||||
{value: 10, label: t('settings.backup.intervals.10min')},
|
||||
{value: 15, label: t('settings.backup.intervals.15min')},
|
||||
{value: 30, label: t('settings.backup.intervals.30min')},
|
||||
{value: 60, label: t('settings.backup.intervals.1hour')}
|
||||
]);
|
||||
|
||||
// 计算属性 - 启用备份
|
||||
const enableBackup = computed({
|
||||
get: () => configStore.config.backup.enabled,
|
||||
set: (value: boolean) => configStore.setEnableBackup(value)
|
||||
});
|
||||
|
||||
// 计算属性 - 自动备份
|
||||
const autoBackup = computed({
|
||||
get: () => configStore.config.backup.auto_backup,
|
||||
set: (value: boolean) => configStore.setAutoBackup(value)
|
||||
});
|
||||
|
||||
// 仓库URL
|
||||
const repoUrl = computed({
|
||||
get: () => configStore.config.backup.repo_url,
|
||||
set: (value: string) => configStore.setRepoUrl(value)
|
||||
});
|
||||
|
||||
|
||||
// 认证方式
|
||||
const authMethod = computed({
|
||||
get: () => configStore.config.backup.auth_method,
|
||||
set: (value: AuthMethod) => configStore.setAuthMethod(value)
|
||||
});
|
||||
|
||||
// 备份间隔
|
||||
const backupInterval = computed({
|
||||
get: () => configStore.config.backup.backup_interval,
|
||||
set: (value: number) => configStore.setBackupInterval(value)
|
||||
});
|
||||
|
||||
// 用户名
|
||||
const username = computed({
|
||||
get: () => configStore.config.backup.username,
|
||||
set: (value: string) => configStore.setUsername(value)
|
||||
});
|
||||
|
||||
// 密码
|
||||
const password = computed({
|
||||
get: () => configStore.config.backup.password,
|
||||
set: (value: string) => configStore.setPassword(value)
|
||||
});
|
||||
|
||||
// 访问令牌
|
||||
const token = computed({
|
||||
get: () => configStore.config.backup.token,
|
||||
set: (value: string) => configStore.setToken(value)
|
||||
});
|
||||
|
||||
// SSH密钥路径
|
||||
const sshKeyPath = computed({
|
||||
get: () => configStore.config.backup.ssh_key_path,
|
||||
set: (value: string) => configStore.setSshKeyPath(value)
|
||||
});
|
||||
|
||||
// SSH密钥密码
|
||||
const sshKeyPassphrase = computed({
|
||||
get: () => configStore.config.backup.ssh_key_passphrase,
|
||||
set: (value: string) => configStore.setSshKeyPassphrase(value)
|
||||
});
|
||||
|
||||
// 处理输入变化
|
||||
const handleRepoUrlChange = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement;
|
||||
repoUrl.value = target.value;
|
||||
};
|
||||
|
||||
|
||||
const handleUsernameChange = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement;
|
||||
username.value = target.value;
|
||||
};
|
||||
|
||||
const handlePasswordChange = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement;
|
||||
password.value = target.value;
|
||||
};
|
||||
|
||||
const handleTokenChange = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement;
|
||||
token.value = target.value;
|
||||
};
|
||||
|
||||
const handleSshKeyPassphraseChange = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement;
|
||||
sshKeyPassphrase.value = target.value;
|
||||
};
|
||||
|
||||
const handleAuthMethodChange = (event: Event) => {
|
||||
const target = event.target as HTMLSelectElement;
|
||||
authMethod.value = target.value as AuthMethod;
|
||||
};
|
||||
|
||||
const handleBackupIntervalChange = (event: Event) => {
|
||||
const target = event.target as HTMLSelectElement;
|
||||
backupInterval.value = parseInt(target.value);
|
||||
};
|
||||
|
||||
// 推送到远程
|
||||
const pushToRemote = async () => {
|
||||
await backupStore.pushToRemote();
|
||||
};
|
||||
|
||||
// 选择SSH密钥文件
|
||||
const selectSshKeyFile = async () => {
|
||||
// 使用DialogService选择文件
|
||||
const selectedPath = await DialogService.SelectFile();
|
||||
// 检查用户是否取消了选择或路径为空
|
||||
if (!selectedPath.trim()) {
|
||||
return;
|
||||
}
|
||||
// 更新SSH密钥路径
|
||||
sshKeyPath.value = selectedPath.trim();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="settings-page">
|
||||
<!-- 基本设置 -->
|
||||
<SettingSection :title="t('settings.backup.basicSettings')">
|
||||
<SettingItem
|
||||
:title="t('settings.backup.enableBackup')"
|
||||
>
|
||||
<ToggleSwitch v-model="enableBackup"/>
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem
|
||||
:title="t('settings.backup.autoBackup')"
|
||||
:class="{ 'disabled-setting': !enableBackup }"
|
||||
>
|
||||
<ToggleSwitch v-model="autoBackup" :disabled="!enableBackup"/>
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem
|
||||
:title="t('settings.backup.backupInterval')"
|
||||
:class="{ 'disabled-setting': !enableBackup || !autoBackup }"
|
||||
>
|
||||
<select
|
||||
class="backup-interval-select"
|
||||
:value="backupInterval"
|
||||
@change="handleBackupIntervalChange"
|
||||
:disabled="!enableBackup || !autoBackup"
|
||||
>
|
||||
<option
|
||||
v-for="option in backupIntervalOptions"
|
||||
:key="option.value"
|
||||
:value="option.value"
|
||||
>
|
||||
{{ option.label }}
|
||||
</option>
|
||||
</select>
|
||||
</SettingItem>
|
||||
</SettingSection>
|
||||
|
||||
<!-- 仓库配置 -->
|
||||
<SettingSection :title="t('settings.backup.repositoryConfig')">
|
||||
<SettingItem
|
||||
:title="t('settings.backup.repoUrl')"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="repo-url-input"
|
||||
:value="repoUrl"
|
||||
@input="handleRepoUrlChange"
|
||||
:placeholder="t('settings.backup.repoUrlPlaceholder')"
|
||||
:disabled="!enableBackup"
|
||||
/>
|
||||
</SettingItem>
|
||||
|
||||
|
||||
</SettingSection>
|
||||
|
||||
<!-- 认证配置 -->
|
||||
<SettingSection :title="t('settings.backup.authConfig')">
|
||||
<SettingItem
|
||||
:title="t('settings.backup.authMethod')"
|
||||
>
|
||||
<select
|
||||
class="auth-method-select"
|
||||
:value="authMethod"
|
||||
@change="handleAuthMethodChange"
|
||||
:disabled="!enableBackup"
|
||||
>
|
||||
<option
|
||||
v-for="option in authMethodOptions"
|
||||
:key="option.value"
|
||||
:value="option.value"
|
||||
>
|
||||
{{ option.label }}
|
||||
</option>
|
||||
</select>
|
||||
</SettingItem>
|
||||
|
||||
<!-- 用户名密码认证 -->
|
||||
<template v-if="authMethod === AuthMethod.UserPass">
|
||||
<SettingItem :title="t('settings.backup.username')">
|
||||
<input
|
||||
type="text"
|
||||
class="username-input"
|
||||
:value="username"
|
||||
@input="handleUsernameChange"
|
||||
:placeholder="t('settings.backup.usernamePlaceholder')"
|
||||
:disabled="!enableBackup"
|
||||
/>
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem :title="t('settings.backup.password')">
|
||||
<input
|
||||
type="password"
|
||||
class="password-input"
|
||||
:value="password"
|
||||
@input="handlePasswordChange"
|
||||
:placeholder="t('settings.backup.passwordPlaceholder')"
|
||||
:disabled="!enableBackup"
|
||||
/>
|
||||
</SettingItem>
|
||||
</template>
|
||||
|
||||
<!-- 访问令牌认证 -->
|
||||
<template v-if="authMethod === AuthMethod.Token">
|
||||
<SettingItem
|
||||
:title="t('settings.backup.token')"
|
||||
>
|
||||
<input
|
||||
type="password"
|
||||
class="token-input"
|
||||
:value="token"
|
||||
@input="handleTokenChange"
|
||||
:placeholder="t('settings.backup.tokenPlaceholder')"
|
||||
:disabled="!enableBackup"
|
||||
/>
|
||||
</SettingItem>
|
||||
</template>
|
||||
|
||||
<!-- SSH密钥认证 -->
|
||||
<template v-if="authMethod === AuthMethod.SSHKey">
|
||||
<SettingItem
|
||||
:title="t('settings.backup.sshKeyPath')"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="ssh-key-path-input"
|
||||
:value="sshKeyPath"
|
||||
:placeholder="t('settings.backup.sshKeyPathPlaceholder')"
|
||||
:disabled="!enableBackup"
|
||||
readonly
|
||||
@click="enableBackup && selectSshKeyFile()"
|
||||
/>
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem
|
||||
:title="t('settings.backup.sshKeyPassphrase')"
|
||||
>
|
||||
<input
|
||||
type="password"
|
||||
class="ssh-passphrase-input"
|
||||
:value="sshKeyPassphrase"
|
||||
@input="handleSshKeyPassphraseChange"
|
||||
:placeholder="t('settings.backup.sshKeyPassphrasePlaceholder')"
|
||||
:disabled="!enableBackup"
|
||||
/>
|
||||
</SettingItem>
|
||||
</template>
|
||||
</SettingSection>
|
||||
|
||||
<!-- 备份操作 -->
|
||||
<SettingSection :title="t('settings.backup.backupOperations')">
|
||||
<SettingItem
|
||||
:title="t('settings.backup.pushToRemote')"
|
||||
>
|
||||
<div class="backup-operation-container">
|
||||
<div class="backup-status-icons">
|
||||
<span v-if="backupStore.pushSuccess" class="success-icon">✓</span>
|
||||
<span v-if="backupStore.pushError" class="error-icon">✗</span>
|
||||
</div>
|
||||
<button
|
||||
class="push-button"
|
||||
@click="() => pushToRemote()"
|
||||
:disabled="!enableBackup || !repoUrl || backupStore.isPushing"
|
||||
:class="{ 'backing-up': backupStore.isPushing }"
|
||||
>
|
||||
<span v-if="backupStore.isPushing" class="loading-spinner"></span>
|
||||
{{ backupStore.isPushing ? t('settings.backup.pushing') : t('settings.backup.actions.push') }}
|
||||
</button>
|
||||
</div>
|
||||
</SettingItem>
|
||||
<div v-if="backupStore.error" class="error-message-row">
|
||||
{{ backupStore.error }}
|
||||
</div>
|
||||
</SettingSection>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.settings-page {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
// 统一的输入控件样式
|
||||
.repo-url-input,
|
||||
.branch-input,
|
||||
.username-input,
|
||||
.password-input,
|
||||
.token-input,
|
||||
.ssh-key-path-input,
|
||||
.ssh-passphrase-input,
|
||||
.backup-interval-select,
|
||||
.auth-method-select {
|
||||
width: 50%;
|
||||
min-width: 200px;
|
||||
padding: 10px 12px;
|
||||
background-color: var(--settings-input-bg);
|
||||
border: 1px solid var(--settings-input-border);
|
||||
border-radius: 4px;
|
||||
color: var(--settings-text);
|
||||
font-size: 12px;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #4a9eff;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
background-color: var(--settings-hover);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--settings-text-secondary);
|
||||
}
|
||||
|
||||
&[readonly]:not(:disabled) {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--settings-hover);
|
||||
background-color: var(--settings-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 选择框特有样式
|
||||
.backup-interval-select,
|
||||
.auth-method-select {
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 8px center;
|
||||
background-size: 16px;
|
||||
padding-right: 30px;
|
||||
|
||||
option {
|
||||
background-color: var(--settings-input-bg);
|
||||
color: var(--settings-text);
|
||||
}
|
||||
}
|
||||
|
||||
// 备份操作容器
|
||||
.backup-operation-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
// 备份状态图标
|
||||
.backup-status-icons {
|
||||
width: 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
// 成功和错误图标
|
||||
.success-icon {
|
||||
color: #4caf50;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
color: #f44336;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// 按钮样式
|
||||
.push-button {
|
||||
padding: 8px 16px;
|
||||
background-color: var(--settings-input-bg);
|
||||
border: 1px solid var(--settings-input-border);
|
||||
border-radius: 4px;
|
||||
color: var(--settings-text);
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--settings-hover);
|
||||
border-color: var(--settings-border);
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 50%;
|
||||
border-top-color: var(--settings-text);
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
&.backing-up {
|
||||
background-color: #2196f3;
|
||||
border-color: #2196f3;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
// 错误信息行样式
|
||||
.error-message-row {
|
||||
color: #f44336;
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
word-wrap: break-word;
|
||||
margin-top: 8px;
|
||||
padding: 8px 16px;
|
||||
background-color: rgba(244, 67, 54, 0.1);
|
||||
border-left: 3px solid #f44336;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
// 禁用状态
|
||||
.disabled-setting {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// 加载动画
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -266,6 +266,7 @@ const currentVersion = computed(() => {
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--settings-border, rgba(0,0,0,0.1));
|
||||
background: transparent;
|
||||
|
||||
.notes-title {
|
||||
font-size: 12px;
|
||||
@@ -278,24 +279,76 @@ const currentVersion = computed(() => {
|
||||
font-size: 12px;
|
||||
color: var(--settings-text);
|
||||
line-height: 1.4;
|
||||
background: transparent;
|
||||
|
||||
/* Markdown内容样式 */
|
||||
:deep(p) {
|
||||
margin: 0 0 6px 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
:deep(ul), :deep(ol) {
|
||||
margin: 6px 0;
|
||||
padding-left: 16px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
:deep(li) {
|
||||
margin-bottom: 4px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
:deep(h1), :deep(h2), :deep(h3), :deep(h4), :deep(h5), :deep(h6) {
|
||||
margin: 10px 0 6px 0;
|
||||
font-size: 13px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
:deep(pre), :deep(code) {
|
||||
background-color: var(--settings-code-bg, rgba(0,0,0,0.05));
|
||||
border-radius: 3px;
|
||||
padding: 2px 4px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
:deep(pre) {
|
||||
padding: 8px;
|
||||
overflow-x: auto;
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
:deep(blockquote) {
|
||||
border-left: 3px solid var(--settings-border, rgba(0,0,0,0.1));
|
||||
margin: 6px 0;
|
||||
padding-left: 10px;
|
||||
color: var(--settings-text-secondary, #757575);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
:deep(a) {
|
||||
color: var(--theme-primary, #2196f3);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(table) {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin: 6px 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
:deep(th), :deep(td) {
|
||||
border: 1px solid var(--settings-border, rgba(0,0,0,0.1));
|
||||
padding: 4px 8px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
:deep(th) {
|
||||
background-color: var(--settings-table-header-bg, rgba(0,0,0,0.02));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user