♻️ Refactor synchronization service
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -1,79 +0,0 @@
|
||||
// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
|
||||
// This file is automatically generated. DO NOT EDIT
|
||||
|
||||
/**
|
||||
* BackupService 提供基于Git的备份同步功能
|
||||
* @module
|
||||
*/
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore: Unused imports
|
||||
import {Call as $Call, Create as $Create} from "@wailsio/runtime";
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore: Unused imports
|
||||
import * as application$0 from "../../../github.com/wailsapp/wails/v3/pkg/application/models.js";
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore: Unused imports
|
||||
import * as models$0 from "../models/models.js";
|
||||
|
||||
/**
|
||||
* HandleConfigChange 处理配置变更
|
||||
*/
|
||||
export function HandleConfigChange(config: models$0.GitBackupConfig | null): Promise<void> & { cancel(): void } {
|
||||
let $resultPromise = $Call.ByID(395287784, config) as any;
|
||||
return $resultPromise;
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize 初始化备份服务
|
||||
*/
|
||||
export function Initialize(): Promise<void> & { cancel(): void } {
|
||||
let $resultPromise = $Call.ByID(1052437974) as any;
|
||||
return $resultPromise;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reinitialize 重新初始化
|
||||
*/
|
||||
export function Reinitialize(): Promise<void> & { cancel(): void } {
|
||||
let $resultPromise = $Call.ByID(301562543) as any;
|
||||
return $resultPromise;
|
||||
}
|
||||
|
||||
/**
|
||||
* ServiceShutdown 服务关闭
|
||||
*/
|
||||
export function ServiceShutdown(): Promise<void> & { cancel(): void } {
|
||||
let $resultPromise = $Call.ByID(422131801) as any;
|
||||
return $resultPromise;
|
||||
}
|
||||
|
||||
export function ServiceStartup(options: application$0.ServiceOptions): Promise<void> & { cancel(): void } {
|
||||
let $resultPromise = $Call.ByID(2900331732, options) as any;
|
||||
return $resultPromise;
|
||||
}
|
||||
|
||||
/**
|
||||
* StartAutoBackup 启动自动备份
|
||||
*/
|
||||
export function StartAutoBackup(): Promise<void> & { cancel(): void } {
|
||||
let $resultPromise = $Call.ByID(3035755449) as any;
|
||||
return $resultPromise;
|
||||
}
|
||||
|
||||
/**
|
||||
* StopAutoBackup 停止自动备份
|
||||
*/
|
||||
export function StopAutoBackup(): Promise<void> & { cancel(): void } {
|
||||
let $resultPromise = $Call.ByID(2641894021) as any;
|
||||
return $resultPromise;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sync 执行完整的同步流程：导出 -> commit -> pull -> 解决冲突 -> push -> 导入
|
||||
*/
|
||||
export function Sync(): Promise<void> & { cancel(): void } {
|
||||
let $resultPromise = $Call.ByID(3420383211) as any;
|
||||
return $resultPromise;
|
||||
}
|
||||
@@ -1,41 +0,0 @@
|
||||
// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
|
||||
// This file is automatically generated. DO NOT EDIT
|
||||
|
||||
import * as BackupService from "./backupservice.js";
|
||||
import * as ConfigService from "./configservice.js";
|
||||
import * as DatabaseService from "./databaseservice.js";
|
||||
import * as DialogService from "./dialogservice.js";
|
||||
import * as DocumentService from "./documentservice.js";
|
||||
import * as ExtensionService from "./extensionservice.js";
|
||||
import * as HotkeyService from "./hotkeyservice.js";
|
||||
import * as HttpClientService from "./httpclientservice.js";
|
||||
import * as KeyBindingService from "./keybindingservice.js";
|
||||
import * as MigrationService from "./migrationservice.js";
|
||||
import * as SelfUpdateService from "./selfupdateservice.js";
|
||||
import * as StartupService from "./startupservice.js";
|
||||
import * as SystemService from "./systemservice.js";
|
||||
import * as TestService from "./testservice.js";
|
||||
import * as ThemeService from "./themeservice.js";
|
||||
import * as TranslationService from "./translationservice.js";
|
||||
import * as WindowService from "./windowservice.js";
|
||||
export {
|
||||
BackupService,
|
||||
ConfigService,
|
||||
DatabaseService,
|
||||
DialogService,
|
||||
DocumentService,
|
||||
ExtensionService,
|
||||
HotkeyService,
|
||||
HttpClientService,
|
||||
KeyBindingService,
|
||||
MigrationService,
|
||||
SelfUpdateService,
|
||||
StartupService,
|
||||
SystemService,
|
||||
TestService,
|
||||
ThemeService,
|
||||
TranslationService,
|
||||
WindowService
|
||||
};
|
||||
|
||||
export * from "./models.js";
|
||||
@@ -1,6 +1,7 @@
|
||||
import {
|
||||
AppConfig,
|
||||
AuthMethod,
|
||||
SyncTarget,
|
||||
KeyBindingType,
|
||||
LanguageType,
|
||||
SystemThemeType,
|
||||
@@ -8,12 +9,8 @@ import {
|
||||
} from '@/../bindings/voidraft/internal/models/models';
|
||||
import {FONT_OPTIONS} from './fonts';
|
||||
|
||||
export type NumberConfigKey = 'fontSize' | 'tabSize' | 'lineHeight';
|
||||
export type ConfigSection = 'general' | 'editing' | 'appearance' | 'updates' | 'backup';
|
||||
|
||||
// 统一配置键映射（平级展开）
|
||||
export const CONFIG_KEY_MAP = {
|
||||
// general
|
||||
alwaysOnTop: 'general.alwaysOnTop',
|
||||
dataPath: 'general.dataPath',
|
||||
enableSystemTray: 'general.enableSystemTray',
|
||||
@@ -24,7 +21,7 @@ export const CONFIG_KEY_MAP = {
|
||||
enableLoadingAnimation: 'general.enableLoadingAnimation',
|
||||
enableTabs: 'general.enableTabs',
|
||||
enableMemoryMonitor: 'general.enableMemoryMonitor',
|
||||
// editing
|
||||
|
||||
fontSize: 'editing.fontSize',
|
||||
fontFamily: 'editing.fontFamily',
|
||||
fontWeight: 'editing.fontWeight',
|
||||
@@ -34,33 +31,35 @@ export const CONFIG_KEY_MAP = {
|
||||
tabType: 'editing.tabType',
|
||||
keymapMode: 'editing.keymapMode',
|
||||
autoSaveDelay: 'editing.autoSaveDelay',
|
||||
// appearance
|
||||
|
||||
language: 'appearance.language',
|
||||
systemTheme: 'appearance.systemTheme',
|
||||
currentTheme: 'appearance.currentTheme',
|
||||
// updates
|
||||
version: 'updates.version',
|
||||
|
||||
autoUpdate: 'updates.autoUpdate',
|
||||
primarySource: 'updates.primarySource',
|
||||
backupSource: 'updates.backupSource',
|
||||
backupBeforeUpdate: 'updates.backupBeforeUpdate',
|
||||
updateTimeout: 'updates.updateTimeout',
|
||||
github: 'updates.github',
|
||||
gitea: 'updates.gitea',
|
||||
// backup
|
||||
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',
|
||||
|
||||
sync_target: 'sync.target',
|
||||
git_enabled: 'sync.git.enabled',
|
||||
git_auto_sync: 'sync.git.auto_sync',
|
||||
git_sync_interval: 'sync.git.sync_interval',
|
||||
git_repo_url: 'sync.git.repo_url',
|
||||
git_auth_method: 'sync.git.auth_method',
|
||||
git_username: 'sync.git.username',
|
||||
git_password: 'sync.git.password',
|
||||
git_token: 'sync.git.token',
|
||||
git_ssh_key_path: 'sync.git.ssh_key_path',
|
||||
git_ssh_key_passphrase: 'sync.git.ssh_key_passphrase',
|
||||
localfs_enabled: 'sync.localfs.enabled',
|
||||
localfs_auto_sync: 'sync.localfs.auto_sync',
|
||||
localfs_sync_interval: 'sync.localfs.sync_interval',
|
||||
localfs_root_path: 'sync.localfs.root_path',
|
||||
} as const;
|
||||
|
||||
export type ConfigKey = keyof typeof CONFIG_KEY_MAP;
|
||||
export type NumberConfigKey = 'fontSize' | 'tabSize' | 'lineHeight';
|
||||
|
||||
// 配置限制
|
||||
export const CONFIG_LIMITS = {
|
||||
@@ -116,20 +115,29 @@ export const DEFAULT_CONFIG: AppConfig = {
|
||||
repo: "voidraft",
|
||||
},
|
||||
},
|
||||
backup: {
|
||||
enabled: false,
|
||||
repo_url: "",
|
||||
auth_method: AuthMethod.UserPass,
|
||||
username: "",
|
||||
password: "",
|
||||
token: "",
|
||||
ssh_key_path: "",
|
||||
ssh_key_passphrase: "",
|
||||
backup_interval: 60,
|
||||
auto_backup: true,
|
||||
sync: {
|
||||
target: SyncTarget.SyncTargetGit,
|
||||
git: {
|
||||
enabled: false,
|
||||
auto_sync: false,
|
||||
sync_interval: 60,
|
||||
repo_url: '',
|
||||
auth_method: AuthMethod.UserPass,
|
||||
username: '',
|
||||
password: '',
|
||||
token: '',
|
||||
ssh_key_path: '',
|
||||
ssh_key_passphrase: '',
|
||||
},
|
||||
localfs: {
|
||||
enabled: false,
|
||||
auto_sync: false,
|
||||
sync_interval: 60,
|
||||
root_path: '',
|
||||
},
|
||||
},
|
||||
metadata: {
|
||||
version: '1.0.0',
|
||||
lastUpdated: new Date().toString(),
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
@@ -182,7 +182,7 @@ export default {
|
||||
general: 'General',
|
||||
editing: 'Editor',
|
||||
appearance: 'Appearance',
|
||||
backupPage: 'Backup',
|
||||
syncPage: 'Sync',
|
||||
keyBindings: 'Key Bindings',
|
||||
updates: 'Updates',
|
||||
reset: 'Reset',
|
||||
@@ -257,11 +257,16 @@ export default {
|
||||
restartNow: 'Restart Now',
|
||||
hotkeyPreview: 'Preview:',
|
||||
none: 'None',
|
||||
backup: {
|
||||
basicSettings: 'Basic Settings',
|
||||
enableBackup: 'Enable Git Backup',
|
||||
autoBackup: 'Auto Backup',
|
||||
backupInterval: 'Backup Interval',
|
||||
sync: {
|
||||
basicSettings: 'Basic Settings',
|
||||
enableSync: 'Enable Sync',
|
||||
targetType: 'Sync Type',
|
||||
targetTypes: {
|
||||
git: 'Git',
|
||||
localfs: 'Local File System'
|
||||
},
|
||||
autoSync: 'Auto Sync',
|
||||
syncInterval: 'Sync Interval',
|
||||
intervals: {
|
||||
'5min': '5 minutes',
|
||||
'10min': '10 minutes',
|
||||
@@ -270,8 +275,11 @@ export default {
|
||||
'1hour': '1 hour'
|
||||
},
|
||||
repositoryConfig: 'Repository Configuration',
|
||||
repoUrl: 'Repository URL',
|
||||
repoUrlPlaceholder: 'Enter Git repository URL',
|
||||
storageConfig: 'Storage Configuration',
|
||||
repoUrl: 'Repository URL',
|
||||
repoUrlPlaceholder: 'Enter Git repository URL',
|
||||
localfsRootPath: 'Local Storage Directory',
|
||||
localfsRootPathPlaceholder: 'Select local sync directory',
|
||||
authConfig: 'Authentication Configuration',
|
||||
authMethod: 'Authentication Method',
|
||||
authMethods: {
|
||||
@@ -289,9 +297,11 @@ export default {
|
||||
sshKeyPathPlaceholder: 'Select SSH key file',
|
||||
sshKeyPassphrase: 'SSH Key Passphrase',
|
||||
sshKeyPassphrasePlaceholder: 'Enter SSH key passphrase',
|
||||
backupOperations: 'Backup Operations',
|
||||
syncToRemote: 'Sync to Remote',
|
||||
syncOperations: 'Sync Operations',
|
||||
syncToRemote: 'Sync to Remote',
|
||||
syncToTarget: 'Sync to Target',
|
||||
syncing: 'Syncing...',
|
||||
syncSuccess: 'Sync completed',
|
||||
actions: {
|
||||
sync: 'Sync',
|
||||
}
|
||||
|
||||
@@ -182,7 +182,7 @@ export default {
|
||||
general: '常规',
|
||||
editing: '编辑器',
|
||||
appearance: '外观',
|
||||
backupPage: '备份',
|
||||
syncPage: '同步',
|
||||
extensions: '扩展',
|
||||
keyBindings: '快捷键',
|
||||
updates: '更新',
|
||||
@@ -259,11 +259,16 @@ export default {
|
||||
colorValue: '颜色值',
|
||||
hotkeyPreview: '预览：',
|
||||
none: '无',
|
||||
backup: {
|
||||
sync: {
|
||||
basicSettings: '基本设置',
|
||||
enableBackup: '启用备份',
|
||||
autoBackup: '自动备份',
|
||||
backupInterval: '备份间隔',
|
||||
enableSync: '启用同步',
|
||||
targetType: '同步方式',
|
||||
targetTypes: {
|
||||
git: 'Git',
|
||||
localfs: '本地文件系统'
|
||||
},
|
||||
autoSync: '自动同步',
|
||||
syncInterval: '同步间隔',
|
||||
intervals: {
|
||||
'5min': '5分钟',
|
||||
'10min': '10分钟',
|
||||
@@ -272,8 +277,11 @@ export default {
|
||||
'1hour': '1小时'
|
||||
},
|
||||
repositoryConfig: '仓库配置',
|
||||
storageConfig: '存储配置',
|
||||
repoUrl: '仓库地址',
|
||||
repoUrlPlaceholder: '请输入Git仓库地址',
|
||||
localfsRootPath: '本地存储目录',
|
||||
localfsRootPathPlaceholder: '请选择本地同步目录',
|
||||
authConfig: '认证配置',
|
||||
authMethod: '认证方式',
|
||||
authMethods: {
|
||||
@@ -291,9 +299,11 @@ export default {
|
||||
sshKeyPathPlaceholder: '请选择SSH密钥文件',
|
||||
sshKeyPassphrase: 'SSH密钥密码',
|
||||
sshKeyPassphrasePlaceholder: '请输入SSH密钥密码',
|
||||
backupOperations: '备份操作',
|
||||
syncOperations: '同步操作',
|
||||
syncToRemote: '同步到远程',
|
||||
syncToTarget: '同步到目标',
|
||||
syncing: '同步中...',
|
||||
syncSuccess: '同步成功',
|
||||
actions: {
|
||||
sync: '同步',
|
||||
}
|
||||
|
||||
@@ -7,7 +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';
|
||||
import SyncPage from '@/views/settings/pages/SyncPage.vue';
|
||||
// 测试页面
|
||||
import TestPage from '@/views/settings/pages/TestPage.vue';
|
||||
|
||||
@@ -44,9 +44,9 @@ const settingsChildren: RouteRecordRaw[] = [
|
||||
component: UpdatesPage
|
||||
},
|
||||
{
|
||||
path: 'backup',
|
||||
name: 'SettingsBackup',
|
||||
component: BackupPage
|
||||
path: 'sync',
|
||||
name: 'SettingsSync',
|
||||
component: SyncPage
|
||||
}
|
||||
];
|
||||
|
||||
@@ -79,4 +79,4 @@ const router = createRouter({
|
||||
routes: routes
|
||||
});
|
||||
|
||||
export default router;
|
||||
export default router;
|
||||
|
||||
@@ -1,113 +1,124 @@
|
||||
import {defineStore} from 'pinia';
|
||||
import {computed, reactive} from 'vue';
|
||||
import {ConfigService, StartupService} from '@/../bindings/voidraft/internal/services';
|
||||
import {AppConfig, AuthMethod, LanguageType, SystemThemeType, TabType} from '@/../bindings/voidraft/internal/models/models';
|
||||
import {
|
||||
AppConfig,
|
||||
AuthMethod,
|
||||
SyncTarget,
|
||||
LanguageType,
|
||||
SystemThemeType,
|
||||
} from '@/../bindings/voidraft/internal/models/models';
|
||||
import {useI18n} from 'vue-i18n';
|
||||
import {ConfigUtils} from '@/common/utils/configUtils';
|
||||
import {FONT_OPTIONS} from '@/common/constant/fonts';
|
||||
import {
|
||||
CONFIG_KEY_MAP,
|
||||
CONFIG_LIMITS,
|
||||
ConfigKey,
|
||||
ConfigSection,
|
||||
DEFAULT_CONFIG,
|
||||
NumberConfigKey
|
||||
} from '@/common/constant/config';
|
||||
import {CONFIG_KEY_MAP, CONFIG_LIMITS, ConfigKey, DEFAULT_CONFIG, NumberConfigKey} from '@/common/constant/config';
|
||||
import * as runtime from '@wailsio/runtime';
|
||||
|
||||
export const useConfigStore = defineStore('config', () => {
|
||||
const {locale} = useI18n();
|
||||
|
||||
// 响应式状态
|
||||
const state = reactive({
|
||||
config: {...DEFAULT_CONFIG} as AppConfig,
|
||||
config: structuredClone(DEFAULT_CONFIG) as AppConfig,
|
||||
isLoading: false,
|
||||
configLoaded: false
|
||||
});
|
||||
|
||||
// Font options (no longer localized)
|
||||
const fontOptions = computed(() => FONT_OPTIONS);
|
||||
|
||||
// 统一配置更新方法
|
||||
const updateConfig = async <K extends ConfigKey>(key: K, value: any): Promise<void> => {
|
||||
const applyConfig = (appConfig?: AppConfig | null): void => {
|
||||
const nextConfig = structuredClone(DEFAULT_CONFIG) as AppConfig;
|
||||
|
||||
if (appConfig?.general) Object.assign(nextConfig.general, appConfig.general);
|
||||
if (appConfig?.editing) Object.assign(nextConfig.editing, appConfig.editing);
|
||||
if (appConfig?.appearance) Object.assign(nextConfig.appearance, appConfig.appearance);
|
||||
if (appConfig?.updates) Object.assign(nextConfig.updates, appConfig.updates);
|
||||
if (appConfig?.sync) {
|
||||
if (appConfig.sync.target) {
|
||||
nextConfig.sync.target = appConfig.sync.target;
|
||||
}
|
||||
if (appConfig.sync.git) {
|
||||
Object.assign(nextConfig.sync.git, appConfig.sync.git);
|
||||
}
|
||||
if (appConfig.sync.localfs) {
|
||||
Object.assign(nextConfig.sync.localfs, appConfig.sync.localfs);
|
||||
}
|
||||
}
|
||||
if (appConfig?.metadata) Object.assign(nextConfig.metadata, appConfig.metadata);
|
||||
|
||||
state.config = nextConfig;
|
||||
};
|
||||
|
||||
const ensureConfigLoaded = async (): Promise<void> => {
|
||||
if (!state.configLoaded && !state.isLoading) {
|
||||
await initConfig();
|
||||
}
|
||||
};
|
||||
|
||||
const backendKey = CONFIG_KEY_MAP[key];
|
||||
if (!backendKey) {
|
||||
throw new Error(`No backend key mapping found for ${String(key)}`);
|
||||
const setValueByPath = (target: Record<string, any>, path: string, value: unknown): void => {
|
||||
const segments = path.split('.');
|
||||
const lastIndex = segments.length - 1;
|
||||
|
||||
let current: Record<string, any> = target;
|
||||
for (let index = 0; index < lastIndex; index++) {
|
||||
current = current[segments[index]];
|
||||
}
|
||||
|
||||
// 从 backendKey 提取 section（例如 'general.alwaysOnTop' -> 'general'）
|
||||
const section = backendKey.split('.')[0] as ConfigSection;
|
||||
|
||||
await ConfigService.Set(backendKey, value);
|
||||
(state.config[section] as any)[key] = value;
|
||||
current[segments[lastIndex]] = value;
|
||||
};
|
||||
|
||||
// 只更新本地状态，不保存到后端
|
||||
const updateConfigLocal = <K extends ConfigKey>(key: K, value: any): void => {
|
||||
const backendKey = CONFIG_KEY_MAP[key];
|
||||
const section = backendKey.split('.')[0] as ConfigSection;
|
||||
(state.config[section] as any)[key] = value;
|
||||
const getValueByPath = (target: Record<string, any>, path: string): unknown => {
|
||||
return path.split('.').reduce<unknown>((current, segment) => (current as Record<string, any>)[segment], target);
|
||||
};
|
||||
|
||||
const updateConfig = async <K extends ConfigKey>(key: K, value: unknown): Promise<void> => {
|
||||
await ensureConfigLoaded();
|
||||
const path = CONFIG_KEY_MAP[key];
|
||||
await ConfigService.Set(path, value);
|
||||
setValueByPath(state.config as Record<string, any>, path, value);
|
||||
};
|
||||
|
||||
const updateConfigLocal = <K extends ConfigKey>(key: K, value: unknown): void => {
|
||||
setValueByPath(state.config as Record<string, any>, CONFIG_KEY_MAP[key], value);
|
||||
};
|
||||
|
||||
// 保存指定配置到后端
|
||||
const saveConfig = async <K extends ConfigKey>(key: K): Promise<void> => {
|
||||
const backendKey = CONFIG_KEY_MAP[key];
|
||||
const section = backendKey.split('.')[0] as ConfigSection;
|
||||
await ConfigService.Set(backendKey, (state.config[section] as any)[key]);
|
||||
const path = CONFIG_KEY_MAP[key];
|
||||
await ConfigService.Set(path, getValueByPath(state.config as Record<string, any>, path));
|
||||
};
|
||||
|
||||
// 加载配置
|
||||
const activeSyncKey = <G extends ConfigKey, L extends ConfigKey>(gitKey: G, localFSKey: L): G | L => (
|
||||
state.config.sync.target === SyncTarget.SyncTargetGit ? gitKey : localFSKey
|
||||
);
|
||||
|
||||
const initConfig = async (): Promise<void> => {
|
||||
if (state.isLoading) return;
|
||||
|
||||
state.isLoading = true;
|
||||
try {
|
||||
const appConfig = await ConfigService.GetConfig();
|
||||
|
||||
if (appConfig) {
|
||||
// 合并配置
|
||||
if (appConfig.general) Object.assign(state.config.general, appConfig.general);
|
||||
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.backup) Object.assign(state.config.backup, appConfig.backup);
|
||||
if (appConfig.metadata) Object.assign(state.config.metadata, appConfig.metadata);
|
||||
}
|
||||
|
||||
applyConfig(await ConfigService.GetConfig());
|
||||
state.configLoaded = true;
|
||||
|
||||
} finally {
|
||||
state.isLoading = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 重置配置
|
||||
const resetConfig = async (): Promise<void> => {
|
||||
if (state.isLoading) return;
|
||||
|
||||
state.isLoading = true;
|
||||
try {
|
||||
await ConfigService.ResetConfig();
|
||||
const appConfig = await ConfigService.GetConfig();
|
||||
if (appConfig) {
|
||||
state.config = JSON.parse(JSON.stringify(appConfig)) as AppConfig;
|
||||
}
|
||||
applyConfig(await ConfigService.GetConfig());
|
||||
state.configLoaded = true;
|
||||
} finally {
|
||||
state.isLoading = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 辅助函数：限制数值范围
|
||||
const clampValue = (value: number, key: NumberConfigKey): number => {
|
||||
const limit = CONFIG_LIMITS[key];
|
||||
return ConfigUtils.clamp(value, limit.min, limit.max);
|
||||
};
|
||||
|
||||
// 计算属性
|
||||
const fontConfig = computed(() => ({
|
||||
fontSize: state.config.editing.fontSize,
|
||||
fontFamily: state.config.editing.fontFamily,
|
||||
@@ -122,7 +133,6 @@ export const useConfigStore = defineStore('config', () => {
|
||||
}));
|
||||
|
||||
return {
|
||||
// 状态
|
||||
config: computed(() => state.config),
|
||||
configLoaded: computed(() => state.configLoaded),
|
||||
isLoading: computed(() => state.isLoading),
|
||||
@@ -130,31 +140,25 @@ export const useConfigStore = defineStore('config', () => {
|
||||
fontConfig,
|
||||
tabConfig,
|
||||
|
||||
// 核心方法
|
||||
initConfig,
|
||||
resetConfig,
|
||||
|
||||
// 语言相关方法
|
||||
setLanguage: (value: LanguageType) => {
|
||||
updateConfig('language', value);
|
||||
setLanguage: async (value: LanguageType) => {
|
||||
await updateConfig('language', value);
|
||||
locale.value = value as any;
|
||||
},
|
||||
|
||||
// 主题相关方法
|
||||
setSystemTheme: (value: SystemThemeType) => updateConfig('systemTheme', value),
|
||||
setCurrentTheme: (value: string) => updateConfig('currentTheme', value),
|
||||
|
||||
// 字体大小操作
|
||||
setFontSize: async (value: number) => {
|
||||
await updateConfig('fontSize', clampValue(value, 'fontSize'));
|
||||
},
|
||||
increaseFontSize: async () => {
|
||||
const newValue = state.config.editing.fontSize + 1;
|
||||
await updateConfig('fontSize', clampValue(newValue, 'fontSize'));
|
||||
await updateConfig('fontSize', clampValue(state.config.editing.fontSize + 1, 'fontSize'));
|
||||
},
|
||||
decreaseFontSize: async () => {
|
||||
const newValue = state.config.editing.fontSize - 1;
|
||||
await updateConfig('fontSize', clampValue(newValue, 'fontSize'));
|
||||
await updateConfig('fontSize', clampValue(state.config.editing.fontSize - 1, 'fontSize'));
|
||||
},
|
||||
resetFontSize: async () => {
|
||||
await updateConfig('fontSize', CONFIG_LIMITS.fontSize.default);
|
||||
@@ -169,89 +173,63 @@ export const useConfigStore = defineStore('config', () => {
|
||||
await saveConfig('fontSize');
|
||||
},
|
||||
|
||||
// 字体操作
|
||||
setFontFamily: (value: string) => updateConfig('fontFamily', value),
|
||||
setFontWeight: (value: string) => updateConfig('fontWeight', value),
|
||||
|
||||
// 行高操作
|
||||
setLineHeight: async (value: number) => {
|
||||
await updateConfig('lineHeight', clampValue(value, 'lineHeight'));
|
||||
},
|
||||
|
||||
// Tab操作
|
||||
setEnableTabIndent: (value: boolean) => updateConfig('enableTabIndent', value),
|
||||
setTabSize: async (value: number) => {
|
||||
await updateConfig('tabSize', clampValue(value, 'tabSize'));
|
||||
},
|
||||
increaseTabSize: async () => {
|
||||
const newValue = state.config.editing.tabSize + 1;
|
||||
await updateConfig('tabSize', clampValue(newValue, 'tabSize'));
|
||||
await updateConfig('tabSize', clampValue(state.config.editing.tabSize + 1, 'tabSize'));
|
||||
},
|
||||
decreaseTabSize: async () => {
|
||||
const newValue = state.config.editing.tabSize - 1;
|
||||
await updateConfig('tabSize', clampValue(newValue, 'tabSize'));
|
||||
await updateConfig('tabSize', clampValue(state.config.editing.tabSize - 1, 'tabSize'));
|
||||
},
|
||||
toggleTabType: async () => {
|
||||
const values = CONFIG_LIMITS.tabType.values;
|
||||
const currentIndex = values.indexOf(state.config.editing.tabType as typeof values[number]);
|
||||
const nextIndex = (currentIndex + 1) % values.length;
|
||||
await updateConfig('tabType', values[nextIndex]);
|
||||
await updateConfig('tabType', values[(currentIndex + 1) % values.length]);
|
||||
},
|
||||
|
||||
// 窗口操作
|
||||
toggleAlwaysOnTop: async () => {
|
||||
await updateConfig('alwaysOnTop', !state.config.general.alwaysOnTop);
|
||||
await runtime.Window.SetAlwaysOnTop(state.config.general.alwaysOnTop);
|
||||
},
|
||||
setAlwaysOnTop: (value: boolean) => updateConfig('alwaysOnTop', value),
|
||||
|
||||
// 路径操作
|
||||
setDataPath: (value: string) => updateConfigLocal('dataPath', value),
|
||||
|
||||
// 保存配置相关方法
|
||||
setAutoSaveDelay: (value: number) => updateConfig('autoSaveDelay', value),
|
||||
|
||||
// 热键配置相关方法
|
||||
setEnableGlobalHotkey: (value: boolean) => updateConfig('enableGlobalHotkey', value),
|
||||
setGlobalHotkey: (hotkey: any) => updateConfig('globalHotkey', hotkey),
|
||||
|
||||
// 系统托盘配置相关方法
|
||||
setEnableSystemTray: (value: boolean) => updateConfig('enableSystemTray', value),
|
||||
|
||||
// 开机启动配置相关方法
|
||||
setStartAtLogin: async (value: boolean) => {
|
||||
await updateConfig('startAtLogin', value);
|
||||
await StartupService.SetEnabled(value);
|
||||
},
|
||||
|
||||
// 窗口吸附配置相关方法
|
||||
setEnableWindowSnap: (value: boolean) => updateConfig('enableWindowSnap', value),
|
||||
|
||||
// 加载动画配置相关方法
|
||||
setEnableLoadingAnimation: (value: boolean) => updateConfig('enableLoadingAnimation', value),
|
||||
|
||||
// 标签页配置相关方法
|
||||
setEnableTabs: (value: boolean) => updateConfig('enableTabs', value),
|
||||
|
||||
// 内存监视器配置相关方法
|
||||
setEnableMemoryMonitor: (value: boolean) => updateConfig('enableMemoryMonitor', value),
|
||||
|
||||
// 快捷键模式配置相关方法
|
||||
setKeymapMode: (value: any) => updateConfig('keymapMode', value),
|
||||
|
||||
// 更新配置相关方法
|
||||
setAutoUpdate: (value: boolean) => updateConfig('autoUpdate', value),
|
||||
|
||||
// 备份配置相关方法
|
||||
setEnableBackup: (value: boolean) => updateConfig('enabled', value),
|
||||
setAutoBackup: (value: boolean) => updateConfig('auto_backup', value),
|
||||
setRepoUrl: (value: string) => updateConfig('repo_url', value),
|
||||
setAuthMethod: (value: AuthMethod) => updateConfig('auth_method', value),
|
||||
setUsername: (value: string) => updateConfig('username', value),
|
||||
setPassword: (value: string) => updateConfig('password', value),
|
||||
setToken: (value: string) => updateConfig('token', value),
|
||||
setSshKeyPath: (value: string) => updateConfig('ssh_key_path', value),
|
||||
setSshKeyPassphrase: (value: string) => updateConfig('ssh_key_passphrase', value),
|
||||
setBackupInterval: (value: number) => updateConfig('backup_interval', value),
|
||||
setSyncTarget: (value: SyncTarget) => updateConfig('sync_target', value),
|
||||
setEnableSync: (value: boolean) => updateConfig(activeSyncKey('git_enabled', 'localfs_enabled'), value),
|
||||
setAutoSync: (value: boolean) => updateConfig(activeSyncKey('git_auto_sync', 'localfs_auto_sync'), value),
|
||||
setSyncInterval: (value: number) => updateConfig(
|
||||
activeSyncKey('git_sync_interval', 'localfs_sync_interval'),
|
||||
Math.max(1, value)
|
||||
),
|
||||
setRepoUrl: (value: string) => updateConfig('git_repo_url', value),
|
||||
setAuthMethod: (value: AuthMethod) => updateConfig('git_auth_method', value),
|
||||
setUsername: (value: string) => updateConfig('git_username', value),
|
||||
setPassword: (value: string) => updateConfig('git_password', value),
|
||||
setToken: (value: string) => updateConfig('git_token', value),
|
||||
setSshKeyPath: (value: string) => updateConfig('git_ssh_key_path', value),
|
||||
setSshKeyPassphrase: (value: string) => updateConfig('git_ssh_key_passphrase', value),
|
||||
setLocalFSRootPath: (value: string) => updateConfig('localfs_root_path', value),
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import { ref } from 'vue';
|
||||
import { BackupService } from '@/../bindings/voidraft/internal/services';
|
||||
import { SyncService } from '@/../bindings/voidraft/internal/services';
|
||||
|
||||
export const useBackupStore = defineStore('backup', () => {
|
||||
export const useSyncStore = defineStore('sync', () => {
|
||||
const isSyncing = ref(false);
|
||||
|
||||
const sync = async (): Promise<void> => {
|
||||
@@ -11,11 +11,8 @@ export const useBackupStore = defineStore('backup', () => {
|
||||
}
|
||||
|
||||
isSyncing.value = true;
|
||||
|
||||
try {
|
||||
await BackupService.Sync();
|
||||
} catch (e) {
|
||||
throw e;
|
||||
await SyncService.Sync();
|
||||
} finally {
|
||||
isSyncing.value = false;
|
||||
}
|
||||
@@ -25,4 +22,4 @@ export const useBackupStore = defineStore('backup', () => {
|
||||
isSyncing,
|
||||
sync
|
||||
};
|
||||
});
|
||||
});
|
||||
@@ -18,7 +18,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: 'syncPage', icon: '🔗', route: '/settings/sync' },
|
||||
{ id: 'extensions', icon: '🧩', route: '/settings/extensions' },
|
||||
{ id: 'keyBindings', icon: '⌨️', route: '/settings/key-bindings' },
|
||||
{ id: 'updates', icon: '🔄', route: '/settings/updates' }
|
||||
@@ -212,4 +212,4 @@ const goBackToEditor = async () => {
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,321 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import {useConfigStore} from '@/stores/configStore';
|
||||
import {useBackupStore} from '@/stores/backupStore';
|
||||
import {useI18n} from 'vue-i18n';
|
||||
import {computed} 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';
|
||||
import toast from '@/components/toast';
|
||||
|
||||
const {t} = useI18n();
|
||||
const configStore = useConfigStore();
|
||||
const backupStore = useBackupStore();
|
||||
|
||||
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 selectSshKeyFile = async () => {
|
||||
const selectedPath = await DialogService.SelectFile();
|
||||
if (selectedPath.trim()) {
|
||||
configStore.setSshKeyPath(selectedPath.trim());
|
||||
}
|
||||
};
|
||||
|
||||
const handleSync = async () => {
|
||||
try {
|
||||
await backupStore.sync();
|
||||
toast.success('Sync successful');
|
||||
} catch (e) {
|
||||
toast.error(e instanceof Error ? e.message : String(e));
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="settings-page">
|
||||
<!-- 基本设置 -->
|
||||
<SettingSection :title="t('settings.backup.basicSettings')">
|
||||
<SettingItem :title="t('settings.backup.enableBackup')">
|
||||
<ToggleSwitch
|
||||
:modelValue="configStore.config.backup.enabled"
|
||||
@update:modelValue="configStore.setEnableBackup"
|
||||
/>
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem
|
||||
:title="t('settings.backup.autoBackup')"
|
||||
:class="{ 'disabled-setting': !configStore.config.backup.enabled }"
|
||||
>
|
||||
<ToggleSwitch
|
||||
:modelValue="configStore.config.backup.auto_backup"
|
||||
@update:modelValue="configStore.setAutoBackup"
|
||||
:disabled="!configStore.config.backup.enabled"
|
||||
/>
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem
|
||||
:title="t('settings.backup.backupInterval')"
|
||||
:class="{ 'disabled-setting': !configStore.config.backup.enabled || !configStore.config.backup.auto_backup }"
|
||||
>
|
||||
<select
|
||||
class="backup-interval-select"
|
||||
:value="configStore.config.backup.backup_interval"
|
||||
@change="(e) => configStore.setBackupInterval(Number((e.target as HTMLSelectElement).value))"
|
||||
:disabled="!configStore.config.backup.enabled || !configStore.config.backup.auto_backup"
|
||||
>
|
||||
<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="configStore.config.backup.repo_url"
|
||||
@input="(e) => configStore.setRepoUrl((e.target as HTMLInputElement).value)"
|
||||
:placeholder="t('settings.backup.repoUrlPlaceholder')"
|
||||
:disabled="!configStore.config.backup.enabled"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingSection>
|
||||
|
||||
<!-- 认证配置 -->
|
||||
<SettingSection :title="t('settings.backup.authConfig')">
|
||||
<SettingItem :title="t('settings.backup.authMethod')">
|
||||
<select
|
||||
class="auth-method-select"
|
||||
:value="configStore.config.backup.auth_method"
|
||||
@change="(e) => configStore.setAuthMethod((e.target as HTMLSelectElement).value as AuthMethod)"
|
||||
:disabled="!configStore.config.backup.enabled"
|
||||
>
|
||||
<option v-for="option in authMethodOptions" :key="option.value" :value="option.value">
|
||||
{{ option.label }}
|
||||
</option>
|
||||
</select>
|
||||
</SettingItem>
|
||||
|
||||
<!-- 用户名密码认证 -->
|
||||
<template v-if="configStore.config.backup.auth_method === AuthMethod.UserPass">
|
||||
<SettingItem :title="t('settings.backup.username')">
|
||||
<input
|
||||
type="text"
|
||||
class="username-input"
|
||||
:value="configStore.config.backup.username"
|
||||
@input="(e) => configStore.setUsername((e.target as HTMLInputElement).value)"
|
||||
:placeholder="t('settings.backup.usernamePlaceholder')"
|
||||
:disabled="!configStore.config.backup.enabled"
|
||||
/>
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem :title="t('settings.backup.password')">
|
||||
<input
|
||||
type="password"
|
||||
class="password-input"
|
||||
:value="configStore.config.backup.password"
|
||||
@input="(e) => configStore.setPassword((e.target as HTMLInputElement).value)"
|
||||
:placeholder="t('settings.backup.passwordPlaceholder')"
|
||||
:disabled="!configStore.config.backup.enabled"
|
||||
/>
|
||||
</SettingItem>
|
||||
</template>
|
||||
|
||||
<!-- 访问令牌认证 -->
|
||||
<template v-if="configStore.config.backup.auth_method === AuthMethod.Token">
|
||||
<SettingItem :title="t('settings.backup.token')">
|
||||
<input
|
||||
type="password"
|
||||
class="token-input"
|
||||
:value="configStore.config.backup.token"
|
||||
@input="(e) => configStore.setToken((e.target as HTMLInputElement).value)"
|
||||
:placeholder="t('settings.backup.tokenPlaceholder')"
|
||||
:disabled="!configStore.config.backup.enabled"
|
||||
/>
|
||||
</SettingItem>
|
||||
</template>
|
||||
|
||||
<!-- SSH密钥认证 -->
|
||||
<template v-if="configStore.config.backup.auth_method === AuthMethod.SSHKey">
|
||||
<SettingItem :title="t('settings.backup.sshKeyPath')">
|
||||
<input
|
||||
type="text"
|
||||
class="ssh-key-path-input"
|
||||
:value="configStore.config.backup.ssh_key_path"
|
||||
:placeholder="t('settings.backup.sshKeyPathPlaceholder')"
|
||||
:disabled="!configStore.config.backup.enabled"
|
||||
readonly
|
||||
@click="configStore.config.backup.enabled && selectSshKeyFile()"
|
||||
/>
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem :title="t('settings.backup.sshKeyPassphrase')">
|
||||
<input
|
||||
type="password"
|
||||
class="ssh-passphrase-input"
|
||||
:value="configStore.config.backup.ssh_key_passphrase"
|
||||
@input="(e) => configStore.setSshKeyPassphrase((e.target as HTMLInputElement).value)"
|
||||
:placeholder="t('settings.backup.sshKeyPassphrasePlaceholder')"
|
||||
:disabled="!configStore.config.backup.enabled"
|
||||
/>
|
||||
</SettingItem>
|
||||
</template>
|
||||
</SettingSection>
|
||||
|
||||
<!-- 备份操作 -->
|
||||
<SettingSection :title="t('settings.backup.backupOperations')">
|
||||
<SettingItem :title="t('settings.backup.syncToRemote')">
|
||||
<button
|
||||
class="sync-button"
|
||||
@click="handleSync"
|
||||
:disabled="!configStore.config.backup.enabled || !configStore.config.backup.repo_url || backupStore.isSyncing"
|
||||
:class="{ 'syncing': backupStore.isSyncing }"
|
||||
>
|
||||
<span v-if="backupStore.isSyncing" class="loading-spinner"></span>
|
||||
{{ backupStore.isSyncing ? t('settings.backup.syncing') : t('settings.backup.actions.sync') }}
|
||||
</button>
|
||||
</SettingItem>
|
||||
</SettingSection>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// 统一的输入控件样式
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮样式
|
||||
.sync-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;
|
||||
}
|
||||
|
||||
&.syncing {
|
||||
background-color: #2196f3;
|
||||
border-color: #2196f3;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
// 禁用状态
|
||||
.disabled-setting {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// 加载动画
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
368
frontend/src/views/settings/pages/SyncPage.vue
Normal file
368
frontend/src/views/settings/pages/SyncPage.vue
Normal file
@@ -0,0 +1,368 @@
|
||||
<script setup lang="ts">
|
||||
import {useConfigStore} from '@/stores/configStore';
|
||||
import {useSyncStore} from '@/stores/syncStore';
|
||||
import {useI18n} from 'vue-i18n';
|
||||
import {computed} from 'vue';
|
||||
import SettingSection from '../components/SettingSection.vue';
|
||||
import SettingItem from '../components/SettingItem.vue';
|
||||
import ToggleSwitch from '../components/ToggleSwitch.vue';
|
||||
import {AuthMethod, SyncTarget} from '@/../bindings/voidraft/internal/models/models';
|
||||
import {DialogService} from '@/../bindings/voidraft/internal/services';
|
||||
import toast from '@/components/toast';
|
||||
|
||||
const {t} = useI18n();
|
||||
const configStore = useConfigStore();
|
||||
const syncStore = useSyncStore();
|
||||
|
||||
const syncConfig = computed(() => configStore.config.sync);
|
||||
const isGitTarget = computed(() => syncConfig.value.target === SyncTarget.SyncTargetGit);
|
||||
const isSyncEnabled = computed(() => isGitTarget.value ? syncConfig.value.git.enabled : syncConfig.value.localfs.enabled);
|
||||
const isAutoSyncEnabled = computed(() => isGitTarget.value ? syncConfig.value.git.auto_sync : syncConfig.value.localfs.auto_sync);
|
||||
const currentInterval = computed(() => isGitTarget.value ? syncConfig.value.git.sync_interval : syncConfig.value.localfs.sync_interval);
|
||||
|
||||
const authMethodOptions = computed(() => [
|
||||
{value: AuthMethod.Token, label: t('settings.sync.authMethods.token')},
|
||||
{value: AuthMethod.SSHKey, label: t('settings.sync.authMethods.sshKey')},
|
||||
{value: AuthMethod.UserPass, label: t('settings.sync.authMethods.userPass')}
|
||||
]);
|
||||
|
||||
const syncTargetOptions = computed(() => [
|
||||
{value: SyncTarget.SyncTargetGit, label: t('settings.sync.targetTypes.git')},
|
||||
{value: SyncTarget.SyncTargetLocalFS, label: t('settings.sync.targetTypes.localfs')}
|
||||
]);
|
||||
|
||||
const syncIntervalOptions = computed(() => [
|
||||
{value: 5, label: t('settings.sync.intervals.5min')},
|
||||
{value: 10, label: t('settings.sync.intervals.10min')},
|
||||
{value: 15, label: t('settings.sync.intervals.15min')},
|
||||
{value: 30, label: t('settings.sync.intervals.30min')},
|
||||
{value: 60, label: t('settings.sync.intervals.1hour')}
|
||||
]);
|
||||
|
||||
const canSync = computed(() => {
|
||||
if (!isSyncEnabled.value) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return isGitTarget.value
|
||||
? Boolean(syncConfig.value.git.repo_url.trim())
|
||||
: Boolean(syncConfig.value.localfs.root_path.trim());
|
||||
});
|
||||
|
||||
const selectSshKeyFile = async () => {
|
||||
const selectedPath = await DialogService.SelectFile();
|
||||
if (selectedPath.trim()) {
|
||||
await configStore.setSshKeyPath(selectedPath.trim());
|
||||
}
|
||||
};
|
||||
|
||||
const selectLocalFSDirectory = async () => {
|
||||
const selectedPath = await DialogService.SelectDirectory();
|
||||
if (selectedPath.trim()) {
|
||||
await configStore.setLocalFSRootPath(selectedPath.trim());
|
||||
}
|
||||
};
|
||||
|
||||
const handleSync = async () => {
|
||||
try {
|
||||
await syncStore.sync();
|
||||
toast.success(t('settings.sync.syncSuccess'));
|
||||
} catch (e) {
|
||||
toast.error(e instanceof Error ? e.message : String(e));
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="settings-page">
|
||||
<SettingSection :title="t('settings.sync.basicSettings')">
|
||||
<SettingItem :title="t('settings.sync.enableSync')">
|
||||
<ToggleSwitch
|
||||
:modelValue="isSyncEnabled"
|
||||
@update:modelValue="configStore.setEnableSync"
|
||||
/>
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem :title="t('settings.sync.targetType')">
|
||||
<select
|
||||
class="target-type-select"
|
||||
:value="syncConfig.target"
|
||||
@change="(e) => configStore.setSyncTarget((e.target as HTMLSelectElement).value as SyncTarget)"
|
||||
>
|
||||
<option v-for="option in syncTargetOptions" :key="option.value" :value="option.value">
|
||||
{{ option.label }}
|
||||
</option>
|
||||
</select>
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem
|
||||
:title="t('settings.sync.autoSync')"
|
||||
:class="{ 'disabled-setting': !isSyncEnabled }"
|
||||
>
|
||||
<ToggleSwitch
|
||||
:modelValue="isAutoSyncEnabled"
|
||||
@update:modelValue="configStore.setAutoSync"
|
||||
:disabled="!isSyncEnabled"
|
||||
/>
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem
|
||||
:title="t('settings.sync.syncInterval')"
|
||||
:class="{ 'disabled-setting': !isSyncEnabled || !isAutoSyncEnabled }"
|
||||
>
|
||||
<select
|
||||
class="sync-interval-select"
|
||||
:value="currentInterval"
|
||||
@change="(e) => configStore.setSyncInterval(Number((e.target as HTMLSelectElement).value))"
|
||||
:disabled="!isSyncEnabled || !isAutoSyncEnabled"
|
||||
>
|
||||
<option v-for="option in syncIntervalOptions" :key="option.value" :value="option.value">
|
||||
{{ option.label }}
|
||||
</option>
|
||||
</select>
|
||||
</SettingItem>
|
||||
</SettingSection>
|
||||
|
||||
<SettingSection :title="isGitTarget ? t('settings.sync.repositoryConfig') : t('settings.sync.storageConfig')">
|
||||
<template v-if="isGitTarget">
|
||||
<SettingItem :title="t('settings.sync.repoUrl')">
|
||||
<input
|
||||
type="text"
|
||||
class="repo-url-input"
|
||||
:value="syncConfig.git.repo_url"
|
||||
@input="(e) => configStore.setRepoUrl((e.target as HTMLInputElement).value)"
|
||||
:placeholder="t('settings.sync.repoUrlPlaceholder')"
|
||||
:disabled="!isSyncEnabled"
|
||||
/>
|
||||
</SettingItem>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<SettingItem :title="t('settings.sync.localfsRootPath')">
|
||||
<input
|
||||
type="text"
|
||||
class="localfs-root-path-input"
|
||||
:value="syncConfig.localfs.root_path"
|
||||
:placeholder="t('settings.sync.localfsRootPathPlaceholder')"
|
||||
:disabled="!isSyncEnabled"
|
||||
readonly
|
||||
@click="isSyncEnabled && selectLocalFSDirectory()"
|
||||
/>
|
||||
</SettingItem>
|
||||
</template>
|
||||
</SettingSection>
|
||||
|
||||
<SettingSection v-if="isGitTarget" :title="t('settings.sync.authConfig')">
|
||||
<SettingItem :title="t('settings.sync.authMethod')">
|
||||
<select
|
||||
class="auth-method-select"
|
||||
:value="syncConfig.git.auth_method"
|
||||
@change="(e) => configStore.setAuthMethod((e.target as HTMLSelectElement).value as AuthMethod)"
|
||||
:disabled="!isSyncEnabled"
|
||||
>
|
||||
<option v-for="option in authMethodOptions" :key="option.value" :value="option.value">
|
||||
{{ option.label }}
|
||||
</option>
|
||||
</select>
|
||||
</SettingItem>
|
||||
|
||||
<template v-if="syncConfig.git.auth_method === AuthMethod.UserPass">
|
||||
<SettingItem :title="t('settings.sync.username')">
|
||||
<input
|
||||
type="text"
|
||||
class="username-input"
|
||||
:value="syncConfig.git.username ?? ''"
|
||||
@input="(e) => configStore.setUsername((e.target as HTMLInputElement).value)"
|
||||
:placeholder="t('settings.sync.usernamePlaceholder')"
|
||||
:disabled="!isSyncEnabled"
|
||||
/>
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem :title="t('settings.sync.password')">
|
||||
<input
|
||||
type="password"
|
||||
class="password-input"
|
||||
:value="syncConfig.git.password ?? ''"
|
||||
@input="(e) => configStore.setPassword((e.target as HTMLInputElement).value)"
|
||||
:placeholder="t('settings.sync.passwordPlaceholder')"
|
||||
:disabled="!isSyncEnabled"
|
||||
/>
|
||||
</SettingItem>
|
||||
</template>
|
||||
|
||||
<template v-if="syncConfig.git.auth_method === AuthMethod.Token">
|
||||
<SettingItem :title="t('settings.sync.token')">
|
||||
<input
|
||||
type="password"
|
||||
class="token-input"
|
||||
:value="syncConfig.git.token ?? ''"
|
||||
@input="(e) => configStore.setToken((e.target as HTMLInputElement).value)"
|
||||
:placeholder="t('settings.sync.tokenPlaceholder')"
|
||||
:disabled="!isSyncEnabled"
|
||||
/>
|
||||
</SettingItem>
|
||||
</template>
|
||||
|
||||
<template v-if="syncConfig.git.auth_method === AuthMethod.SSHKey">
|
||||
<SettingItem :title="t('settings.sync.sshKeyPath')">
|
||||
<input
|
||||
type="text"
|
||||
class="ssh-key-path-input"
|
||||
:value="syncConfig.git.ssh_key_path ?? ''"
|
||||
:placeholder="t('settings.sync.sshKeyPathPlaceholder')"
|
||||
:disabled="!isSyncEnabled"
|
||||
readonly
|
||||
@click="isSyncEnabled && selectSshKeyFile()"
|
||||
/>
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem :title="t('settings.sync.sshKeyPassphrase')">
|
||||
<input
|
||||
type="password"
|
||||
class="ssh-passphrase-input"
|
||||
:value="syncConfig.git.ssh_key_passphrase ?? ''"
|
||||
@input="(e) => configStore.setSshKeyPassphrase((e.target as HTMLInputElement).value)"
|
||||
:placeholder="t('settings.sync.sshKeyPassphrasePlaceholder')"
|
||||
:disabled="!isSyncEnabled"
|
||||
/>
|
||||
</SettingItem>
|
||||
</template>
|
||||
</SettingSection>
|
||||
|
||||
<SettingSection :title="t('settings.sync.syncOperations')">
|
||||
<SettingItem :title="t('settings.sync.syncToTarget')">
|
||||
<button
|
||||
class="sync-button"
|
||||
@click="handleSync"
|
||||
:disabled="!canSync || syncStore.isSyncing"
|
||||
:class="{ 'syncing': syncStore.isSyncing }"
|
||||
>
|
||||
<span v-if="syncStore.isSyncing" class="loading-spinner"></span>
|
||||
{{ syncStore.isSyncing ? t('settings.sync.syncing') : t('settings.sync.actions.sync') }}
|
||||
</button>
|
||||
</SettingItem>
|
||||
</SettingSection>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.repo-url-input,
|
||||
.localfs-root-path-input,
|
||||
.username-input,
|
||||
.password-input,
|
||||
.token-input,
|
||||
.ssh-key-path-input,
|
||||
.ssh-passphrase-input,
|
||||
.sync-interval-select,
|
||||
.auth-method-select,
|
||||
.target-type-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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sync-interval-select,
|
||||
.auth-method-select,
|
||||
.target-type-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);
|
||||
}
|
||||
}
|
||||
|
||||
.sync-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;
|
||||
}
|
||||
|
||||
&.syncing {
|
||||
background-color: #2196f3;
|
||||
border-color: #2196f3;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.disabled-setting {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user