feat: 通过加密会话和冲突设置连接桌面 Sync
This commit is contained in:
@@ -0,0 +1,120 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, ref } from 'vue'
|
||||
import { hostInvoke } from '@/services/platform/desktop'
|
||||
import ActionDialog from '@/components/common/ActionDialog.vue'
|
||||
import { useActionDialog } from '@/composables/useActionDialog'
|
||||
import { t } from '@/i18n'
|
||||
const { actionDialog, resolveAction, askConfirm } = useActionDialog()
|
||||
interface Binding { id: string; endpoint: string; account: string; remote_vault: string; cursor: number }
|
||||
interface Conflict { sequence: number; local_path: string; local_hash: string; current_hash?: string; current_path?: string; remote: { path: string; operation: string } }
|
||||
interface Status { vault_id: string; binding: Binding | null; paused: boolean; pending: number; conflicts: Conflict[]; credential_state: string; running: boolean; error: string | null; retry_in: number | null }
|
||||
interface RemoteVault { id: string; name: string; sequence: number; used: number; quota: number }
|
||||
const status = ref<Status | null>(null)
|
||||
const endpoint = ref('https://'), account = ref(''), password = ref(''), device = ref('OpenNexus Desktop'), testHttp = ref(false)
|
||||
const connected = ref(false), busy = ref(false), message = ref(''), remoteVaults = ref<RemoteVault[]>([]), selected = ref(''), newName = ref('')
|
||||
const copies = ref<Record<number, string>>({})
|
||||
let timer: ReturnType<typeof setInterval> | undefined
|
||||
let mounted = true
|
||||
async function refresh() {
|
||||
const next = await hostInvoke<Status>('sync_status')
|
||||
if (!mounted) return
|
||||
status.value = next
|
||||
if (next.binding) { endpoint.value = next.binding.endpoint; account.value = next.binding.account; connected.value = next.credential_state === 'ready' }
|
||||
}
|
||||
async function act(action: () => Promise<void>) {
|
||||
if (busy.value) return
|
||||
busy.value = true; message.value = ''
|
||||
try { await action(); await refresh() }
|
||||
catch (error) { message.value = error instanceof Error ? error.message : 'SYNC_FAILED' }
|
||||
finally { busy.value = false }
|
||||
}
|
||||
async function listVaults() {
|
||||
const result = await hostInvoke<{ items: RemoteVault[] }>('sync_vaults', { endpoint: endpoint.value, account: account.value })
|
||||
remoteVaults.value = result.items
|
||||
}
|
||||
function login() {
|
||||
const secret = password.value; password.value = ''
|
||||
return act(async () => {
|
||||
const result = await hostInvoke<{ endpoint: string; account: string }>('sync_login', { request: { endpoint: endpoint.value, account: account.value, password: secret, device_name: device.value, allow_test_http: testHttp.value } })
|
||||
endpoint.value = result.endpoint; account.value = result.account; connected.value = true
|
||||
await listVaults()
|
||||
})
|
||||
}
|
||||
function createVault() { return act(async () => {
|
||||
const result = await hostInvoke<{ vault_id: string }>('sync_create_vault', { endpoint: endpoint.value, account: account.value, name: newName.value })
|
||||
newName.value = ''; await listVaults(); selected.value = result.vault_id
|
||||
}) }
|
||||
async function bind(mode: 'upload' | 'download') {
|
||||
const vaultId = status.value?.vault_id
|
||||
const remote = selected.value
|
||||
if (!vaultId || !remote) return
|
||||
if (!(await askConfirm(mode === 'upload' ? t('将当前本地笔记上传到所选空远端库？', 'Upload current notes to the selected empty remote vault?') : t('将所选远端库下载到当前空本地库？', 'Download the selected remote vault into this empty local vault?')))) return
|
||||
await act(async () => { await hostInvoke('sync_bind', { request: { vault_id: vaultId, endpoint: endpoint.value, account: account.value, remote_vault: remote, mode } }) })
|
||||
}
|
||||
async function unbind() {
|
||||
const binding = status.value?.binding
|
||||
if (!binding || !(await askConfirm(t('解除当前绑定并封存待上传任务？本地文件仍保留。', 'Unbind and archive pending uploads? Local files are retained.')))) return
|
||||
await act(async () => { await hostInvoke('sync_unbind', { bindingId: binding.id }); remoteVaults.value = []; selected.value = '' })
|
||||
}
|
||||
async function resolve(conflict: Conflict, choice: 'local' | 'remote' | 'copy') {
|
||||
const binding = status.value?.binding
|
||||
const destination = choice === 'copy' ? copies.value[conflict.sequence] ?? '' : ''
|
||||
if (!binding || (choice === 'copy' && !destination)) return
|
||||
if (!(await askConfirm(t(`确认解决 ${conflict.local_path} 的冲突？`, `Resolve the conflict for ${conflict.local_path}?`)))) return
|
||||
await act(async () => { await hostInvoke('sync_resolve', { bindingId: binding.id, sequence: conflict.sequence, choice, destination, expected: conflict.current_hash ?? conflict.local_hash }) })
|
||||
}
|
||||
onMounted(() => {
|
||||
void refresh().catch(error => { message.value = error instanceof Error ? error.message : 'SYNC_FAILED' })
|
||||
timer = setInterval(() => { if (!busy.value) void refresh().catch(() => {}) }, 1500)
|
||||
})
|
||||
onUnmounted(() => { mounted = false; clearInterval(timer); password.value = '' })
|
||||
</script>
|
||||
<template>
|
||||
<section class="panel settings-section sync-settings" aria-labelledby="sync-title">
|
||||
<ActionDialog v-if="actionDialog" v-bind="actionDialog" @resolve="resolveAction" />
|
||||
<h2 id="sync-title">OpenNexus Sync</h2>
|
||||
<p>{{ t('同步当前 Vault 的文件。登录前请先解锁设备凭据保险库。', 'Sync files in the current vault. Unlock the device credential vault before signing in.') }}</p>
|
||||
<p class="subtle">{{ t('当前支持本地上传到空远端，或远端下载到空本地。两边都有文件时请先使用独立空库；合并预览仍在开发中。', 'Upload to an empty remote vault, or download into an empty local vault. Initial merge of two populated vaults is still under development.') }}</p>
|
||||
<p v-if="message" class="error-banner" role="alert">{{ message }}</p>
|
||||
<form class="sync-form" @submit.prevent="login">
|
||||
<label>{{ t('服务器地址', 'Server URL') }}<input v-model="endpoint" required :disabled="!!status?.binding || busy" type="url" autocomplete="url" /></label>
|
||||
<label>{{ t('账户', 'Account') }}<input v-model="account" required :disabled="!!status?.binding || busy" autocomplete="username" /></label>
|
||||
<label>{{ t('密码', 'Password') }}<input v-model="password" required type="password" autocomplete="current-password" :disabled="busy" /></label>
|
||||
<label>{{ t('设备名称', 'Device name') }}<input v-model="device" required maxlength="100" :disabled="busy" /></label>
|
||||
<label class="test-http"><input v-model="testHttp" type="checkbox" :disabled="busy" />{{ t('仅测试：允许 HTTP 明文连接', 'Testing only: allow unencrypted HTTP') }}</label>
|
||||
<button class="button-primary" :disabled="busy || !password">{{ t('登录', 'Sign in') }}</button>
|
||||
</form>
|
||||
<div v-if="connected && !status?.binding" class="sync-connect">
|
||||
<button :disabled="busy" @click="act(listVaults)">{{ t('刷新远端库', 'Refresh vaults') }}</button>
|
||||
<label>{{ t('远端库', 'Remote vault') }}<select v-model="selected"><option value="">{{ t('请选择', 'Choose a vault') }}</option><option v-for="vault in remoteVaults" :key="vault.id" :value="vault.id">{{ vault.name }} · {{ vault.sequence }}</option></select></label>
|
||||
<div class="inline-actions"><input v-model="newName" :placeholder="t('新远端库名称', 'New vault name')" /><button :disabled="busy || !newName.trim()" @click="createVault">{{ t('创建远端库', 'Create vault') }}</button></div>
|
||||
<div class="inline-actions"><button :disabled="busy || !selected || !status" @click="bind('upload')">{{ t('上传到空远端', 'Upload to empty remote') }}</button><button :disabled="busy || !selected || !status" @click="bind('download')">{{ t('下载到空本地', 'Download into empty local') }}</button></div>
|
||||
</div>
|
||||
<div v-if="status?.binding" class="sync-bound">
|
||||
<p>{{ status.binding.endpoint }} · {{ status.binding.account }} · {{ status.binding.remote_vault }}</p>
|
||||
<p aria-live="polite">{{ status.paused ? t('已暂停', 'Paused') : status.running ? t('同步中', 'Syncing') : t('等待下一轮同步', 'Waiting for next sync') }} · {{ t('待上传', 'Pending') }} {{ status.pending }} · cursor {{ status.binding.cursor }}</p>
|
||||
<p v-if="status.credential_state !== 'ready'" role="status">{{ status.credential_state }}</p>
|
||||
<p v-if="status.error" role="alert">{{ status.error }}<span v-if="status.retry_in"> · {{ status.retry_in }}s</span></p>
|
||||
<div class="inline-actions">
|
||||
<button :disabled="busy || status.running || status.paused" @click="act(async () => { await hostInvoke('sync_run') })">{{ t('立即同步', 'Sync now') }}</button>
|
||||
<button :disabled="busy" @click="act(async () => { await hostInvoke('sync_pause', { bindingId: status!.binding!.id, paused: !status!.paused }) })">{{ status.paused ? t('继续同步', 'Resume sync') : t('暂停同步', 'Pause sync') }}</button>
|
||||
<button :disabled="busy" @click="unbind">{{ t('解除绑定', 'Unbind') }}</button>
|
||||
<button :disabled="busy" @click="act(async () => { await hostInvoke('sync_logout', { endpoint, account }); connected = false })">{{ t('退出登录', 'Sign out') }}</button>
|
||||
</div>
|
||||
<article v-for="conflict in status.conflicts" :key="conflict.sequence" class="sync-conflict">
|
||||
<h3>{{ conflict.local_path }}</h3><p>{{ t('远端版本', 'Remote revision') }} {{ conflict.sequence }} · {{ conflict.remote.operation }} · {{ conflict.remote.path }}</p>
|
||||
<div class="inline-actions"><button :disabled="busy" @click="resolve(conflict, 'local')">{{ t('保留本地', 'Keep local') }}</button><button :disabled="busy" @click="resolve(conflict, 'remote')">{{ t('采用远端', 'Use remote') }}</button></div>
|
||||
<label>{{ t('副本相对路径', 'Relative copy path') }}<input v-model="copies[conflict.sequence]" placeholder="conflicts/note-copy.md" /></label><button :disabled="busy || !copies[conflict.sequence]" @click="resolve(conflict, 'copy')">{{ t('另存本地副本并采用远端', 'Save local copy and use remote') }}</button>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<style scoped>
|
||||
.sync-form,.sync-connect,.sync-bound { display:grid;gap:12px;margin-top:16px }
|
||||
.sync-form label,.sync-connect label,.sync-conflict label { display:grid;gap:5px }
|
||||
input,select { padding:8px;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-primary);color:inherit;min-width:0 }
|
||||
.test-http { display:flex!important;align-items:center }
|
||||
.inline-actions { display:flex;flex-wrap:wrap;gap:8px }
|
||||
.sync-conflict { border:1px solid var(--border-color);padding:14px;border-radius:8px;display:grid;gap:10px }
|
||||
button { padding:7px 12px;cursor:pointer } button:disabled { cursor:default;opacity:.5 }
|
||||
</style>
|
||||
Reference in New Issue
Block a user