503 lines
13 KiB
Vue
503 lines
13 KiB
Vue
<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> |