feat: 云端备份增加 Dropbox 备份源
This commit is contained in:
1 parent
00cda8017b
commit
52c9b0a454
15 files changed
+701
-77
No files matched your search
@@ -84,6 +84,8 @@ jobs:
|
||||
OAUTH_MICROSOFT_CLIENT_SECRET: ${{ secrets.OAUTH_MICROSOFT_CLIENT_SECRET }}
|
||||
OAUTH_BAIDU_CLIENT_ID: ${{ secrets.OAUTH_BAIDU_CLIENT_ID }}
|
||||
OAUTH_BAIDU_CLIENT_SECRET: ${{ secrets.OAUTH_BAIDU_CLIENT_SECRET }}
|
||||
OAUTH_DROPBOX_CLIENT_ID: ${{ secrets.OAUTH_DROPBOX_CLIENT_ID }}
|
||||
OAUTH_DROPBOX_CLIENT_SECRET: ${{ secrets.OAUTH_DROPBOX_CLIENT_SECRET }}
|
||||
|
||||
run: |
|
||||
SECRETS="
|
||||
@@ -101,6 +103,7 @@ jobs:
|
||||
"OAUTH_GOOGLE_CLIENT_ID" "OAUTH_GOOGLE_CLIENT_SECRET" "OAUTH_GOOGLE_REDIRECT_URI"
|
||||
"OAUTH_MICROSOFT_CLIENT_ID" "OAUTH_MICROSOFT_CLIENT_SECRET"
|
||||
"OAUTH_BAIDU_CLIENT_ID" "OAUTH_BAIDU_CLIENT_SECRET"
|
||||
"OAUTH_DROPBOX_CLIENT_ID" "OAUTH_DROPBOX_CLIENT_SECRET"
|
||||
)
|
||||
|
||||
for VAR in "${OPTIONAL_VARS[@]}"; do
|
||||
@@ -153,6 +156,8 @@ jobs:
|
||||
OAUTH_MICROSOFT_CLIENT_SECRET: ${{ secrets.OAUTH_MICROSOFT_CLIENT_SECRET }}
|
||||
OAUTH_BAIDU_CLIENT_ID: ${{ secrets.OAUTH_BAIDU_CLIENT_ID }}
|
||||
OAUTH_BAIDU_CLIENT_SECRET: ${{ secrets.OAUTH_BAIDU_CLIENT_SECRET }}
|
||||
OAUTH_DROPBOX_CLIENT_ID: ${{ secrets.OAUTH_DROPBOX_CLIENT_ID }}
|
||||
OAUTH_DROPBOX_CLIENT_SECRET: ${{ secrets.OAUTH_DROPBOX_CLIENT_SECRET }}
|
||||
ENCRYPTION_KEY: ${{ secrets.ENCRYPTION_KEY }}
|
||||
JWT_SECRET: ${{ secrets.JWT_SECRET }}
|
||||
|
||||
|
||||
@@ -47,6 +47,9 @@ export const CSP_POLICY = {
|
||||
"https://graph.microsoft.com",
|
||||
"https://openapi.baidu.com",
|
||||
"https://pan.baidu.com",
|
||||
"https://api.dropboxapi.com",
|
||||
"https://content.dropboxapi.com",
|
||||
"https://www.dropbox.com",
|
||||
],
|
||||
// 框架源
|
||||
FRAMES: [
|
||||
@@ -82,6 +85,9 @@ export type EnvBindings = {
|
||||
OAUTH_BAIDU_CLIENT_ID?: string;
|
||||
OAUTH_BAIDU_CLIENT_SECRET?: string;
|
||||
OAUTH_BAIDU_BACKUP_REDIRECT_URI?: string;
|
||||
OAUTH_DROPBOX_CLIENT_ID?: string;
|
||||
OAUTH_DROPBOX_CLIENT_SECRET?: string;
|
||||
OAUTH_DROPBOX_BACKUP_REDIRECT_URI?: string;
|
||||
OAUTH_ALLOWED_USERS: string; // 允许登录的 Email 或 Username 白名单 (必填)
|
||||
OAUTH_ALLOW_ALL?: string; // 是否允许所有用户登录 (仅推荐用于测试演示环境)
|
||||
JWT_SECRET: string;
|
||||
|
||||
@@ -469,6 +469,152 @@ backups.get('/oauth/baidu/callback', async (c) => {
|
||||
`);
|
||||
});
|
||||
|
||||
// --- Dropbox OAuth Callback ---
|
||||
backups.get('/oauth/dropbox/callback', async (c) => {
|
||||
c.header('Cross-Origin-Opener-Policy', 'unsafe-none');
|
||||
|
||||
const stateInQuery = c.req.query('state');
|
||||
const stateInCookie = getCookie(c, 'dropbox_oauth_state');
|
||||
|
||||
if (!stateInQuery || !stateInCookie || stateInQuery !== stateInCookie) {
|
||||
return c.html(`
|
||||
<html><body><script>
|
||||
const msg = { type: 'DROPBOX_AUTH_ERROR', message: 'Security Warning: State mismatch.' };
|
||||
if (window.opener) window.opener.postMessage(msg, '*');
|
||||
try { const bc = new BroadcastChannel('dropbox_oauth_channel'); bc.postMessage(msg); bc.close(); } catch (e) { }
|
||||
window.close();
|
||||
</script></body></html>
|
||||
`);
|
||||
}
|
||||
|
||||
const token = getCookie(c, 'auth_token');
|
||||
if (!token) {
|
||||
return c.html(`
|
||||
<html><body><script>
|
||||
const msg = { type: 'DROPBOX_AUTH_ERROR', message: 'Session expired' };
|
||||
if (window.opener) window.opener.postMessage(msg, '*');
|
||||
try { const bc = new BroadcastChannel('dropbox_oauth_channel'); bc.postMessage(msg); bc.close(); } catch (e) { }
|
||||
window.close();
|
||||
</script></body></html>
|
||||
`);
|
||||
}
|
||||
|
||||
const payload = await verifySecureJWT(token, c.env.JWT_SECRET);
|
||||
if (!payload?.userInfo) {
|
||||
return c.html(`
|
||||
<html><body><script>
|
||||
const msg = { type: 'DROPBOX_AUTH_ERROR', message: 'Invalid session' };
|
||||
if (window.opener) window.opener.postMessage(msg, '*');
|
||||
try { const bc = new BroadcastChannel('dropbox_oauth_channel'); bc.postMessage(msg); bc.close(); } catch (e) { }
|
||||
window.close();
|
||||
</script></body></html>
|
||||
`);
|
||||
}
|
||||
|
||||
const code = c.req.query('code');
|
||||
const error = c.req.query('error');
|
||||
if (error === 'access_denied') {
|
||||
return c.html(`
|
||||
<html><body><script>
|
||||
const msg = { type: 'DROPBOX_AUTH_ERROR', message: 'User denied access' };
|
||||
if (window.opener) window.opener.postMessage(msg, '*');
|
||||
try { const bc = new BroadcastChannel('dropbox_oauth_channel'); bc.postMessage(msg); bc.close(); } catch (e) { }
|
||||
window.close();
|
||||
</script></body></html>
|
||||
`);
|
||||
}
|
||||
if (!code) {
|
||||
return c.html(`
|
||||
<html><body><script>
|
||||
const msg = { type: 'DROPBOX_AUTH_ERROR', message: 'Auth code missing' };
|
||||
if (window.opener) window.opener.postMessage(msg, '*');
|
||||
try { const bc = new BroadcastChannel('dropbox_oauth_channel'); bc.postMessage(msg); bc.close(); } catch (e) { }
|
||||
window.close();
|
||||
</script></body></html>
|
||||
`);
|
||||
}
|
||||
|
||||
const clientId = c.env.OAUTH_DROPBOX_CLIENT_ID;
|
||||
const clientSecret = c.env.OAUTH_DROPBOX_CLIENT_SECRET;
|
||||
const redirectUri = c.env.OAUTH_DROPBOX_BACKUP_REDIRECT_URI || `${new URL(c.req.url).origin}/api/backups/oauth/dropbox/callback`;
|
||||
|
||||
const tokenRes = await fetch('https://api.dropboxapi.com/oauth2/token', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
body: new URLSearchParams({
|
||||
client_id: clientId || '',
|
||||
client_secret: clientSecret || '',
|
||||
code: code,
|
||||
grant_type: 'authorization_code',
|
||||
redirect_uri: redirectUri
|
||||
})
|
||||
});
|
||||
|
||||
if (!tokenRes.ok) {
|
||||
const errData = await tokenRes.json() as any;
|
||||
console.error('[OAuth] Dropbox Token exchange failed:', errData);
|
||||
return c.html(`
|
||||
<html><body><script>
|
||||
const msg = { type: 'DROPBOX_AUTH_ERROR', message: 'Token exchange failed: ${errData.error_description || errData.error}' };
|
||||
if (window.opener) window.opener.postMessage(msg, '*');
|
||||
try { const bc = new BroadcastChannel('dropbox_oauth_channel'); bc.postMessage(msg); bc.close(); } catch (e) { }
|
||||
window.close();
|
||||
</script></body></html>
|
||||
`);
|
||||
}
|
||||
|
||||
const tokenData = await tokenRes.json() as any;
|
||||
const refreshToken = tokenData.refresh_token;
|
||||
|
||||
if (!refreshToken) {
|
||||
return c.html(`
|
||||
<html><body><script>
|
||||
const msg = { type: 'DROPBOX_AUTH_ERROR', message: 'No refresh token received.' };
|
||||
if (window.opener) window.opener.postMessage(msg, '*');
|
||||
try { const bc = new BroadcastChannel('dropbox_oauth_channel'); bc.postMessage(msg); bc.close(); } catch (e) { }
|
||||
window.close();
|
||||
</script></body></html>
|
||||
`);
|
||||
}
|
||||
|
||||
return c.html(`
|
||||
<html>
|
||||
<head><title>Success</title></head>
|
||||
<body style="font-family:sans-serif; text-align:center; padding-top:50px; color:#555;">
|
||||
<div id="status">授权成功,正在返回应用...</div>
|
||||
<script>
|
||||
(function () {
|
||||
const message = {
|
||||
type: 'DROPBOX_AUTH_SUCCESS',
|
||||
refreshToken: ${JSON.stringify(refreshToken)}
|
||||
};
|
||||
|
||||
function transmit() {
|
||||
if (window.opener) {
|
||||
window.opener.postMessage(message, '*');
|
||||
}
|
||||
try {
|
||||
const bc = new BroadcastChannel('dropbox_oauth_channel');
|
||||
bc.postMessage(message);
|
||||
bc.close();
|
||||
} catch (e) { }
|
||||
}
|
||||
|
||||
transmit();
|
||||
setTimeout(transmit, 100);
|
||||
setTimeout(transmit, 400);
|
||||
|
||||
setTimeout(() => {
|
||||
transmit();
|
||||
window.close();
|
||||
}, 800);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
`);
|
||||
});
|
||||
|
||||
// =========================================================================
|
||||
// === PROTECTED ROUTES ===
|
||||
// All routes below this middleware require a valid JWT AND a valid CSRF token.
|
||||
@@ -490,6 +636,9 @@ backups.get('/providers', async (c) => {
|
||||
if (c.env.OAUTH_BAIDU_CLIENT_ID && c.env.OAUTH_BAIDU_CLIENT_SECRET) {
|
||||
availableTypes.push('baidu');
|
||||
}
|
||||
if (c.env.OAUTH_DROPBOX_CLIENT_ID && c.env.OAUTH_DROPBOX_CLIENT_SECRET) {
|
||||
availableTypes.push('dropbox');
|
||||
}
|
||||
|
||||
return c.json({ success: true, providers, availableTypes });
|
||||
});
|
||||
@@ -654,6 +803,37 @@ backups.post('/oauth/baidu/auth', async (c) => {
|
||||
});
|
||||
});
|
||||
|
||||
// --- Dropbox OAuth Initiation ---
|
||||
backups.post('/oauth/dropbox/auth', async (c) => {
|
||||
const clientId = c.env.OAUTH_DROPBOX_CLIENT_ID;
|
||||
const redirectUri = c.env.OAUTH_DROPBOX_BACKUP_REDIRECT_URI || `${new URL(c.req.url).origin}/api/backups/oauth/dropbox/callback`;
|
||||
|
||||
if (!clientId) throw new AppError('oauth_config_incomplete', 400);
|
||||
|
||||
const state = crypto.randomUUID();
|
||||
|
||||
setCookie(c, 'dropbox_oauth_state', state, {
|
||||
path: '/api/backups/oauth/dropbox/callback',
|
||||
secure: true,
|
||||
httpOnly: true,
|
||||
sameSite: 'Lax',
|
||||
maxAge: 600
|
||||
});
|
||||
|
||||
const params = new URLSearchParams({
|
||||
client_id: clientId,
|
||||
redirect_uri: redirectUri,
|
||||
response_type: 'code',
|
||||
token_access_type: 'offline', // Request refresh token
|
||||
state: state
|
||||
});
|
||||
|
||||
return c.json({
|
||||
success: true,
|
||||
authUrl: `https://www.dropbox.com/oauth2/authorize?${params.toString()}`
|
||||
});
|
||||
});
|
||||
|
||||
export async function handleScheduledBackup(env: EnvBindings) {
|
||||
const service = new BackupService(env);
|
||||
await service.handleScheduledBackup();
|
||||
|
||||
@@ -2,7 +2,7 @@ import { eq } from 'drizzle-orm';
|
||||
import { EnvBindings, AppError } from '@/app/config';
|
||||
import { BackupRepository } from '@/shared/db/repositories/backupRepository';
|
||||
import { encryptData, decryptData, encryptBackupFile } from '@/shared/utils/crypto';
|
||||
import { BackupProvider, WebDavProvider, S3Provider, TelegramProvider, GoogleDriveProvider, OneDriveProvider, BaiduNetdiskProvider } from '@/features/backup/providers';
|
||||
import { BackupProvider, WebDavProvider, S3Provider, TelegramProvider, GoogleDriveProvider, OneDriveProvider, BaiduNetdiskProvider, DropboxProvider } from '@/features/backup/providers';
|
||||
import { decryptField } from '@/shared/db/db';
|
||||
import { vault as vaultTable, backupProviders } from '@/shared/db/schema';
|
||||
|
||||
@@ -24,7 +24,8 @@ export class BackupService {
|
||||
telegram: ['botToken'],
|
||||
gdrive: ['refreshToken'],
|
||||
onedrive: ['refreshToken'],
|
||||
baidu: ['refreshToken']
|
||||
baidu: ['refreshToken'],
|
||||
dropbox: ['refreshToken']
|
||||
};
|
||||
|
||||
private maskConfigForFrontend(type: string, config: any) {
|
||||
@@ -86,6 +87,8 @@ export class BackupService {
|
||||
return new OneDriveProvider(config, this.env);
|
||||
case 'baidu':
|
||||
return new BaiduNetdiskProvider(config, this.env);
|
||||
case 'dropbox':
|
||||
return new DropboxProvider(config, this.env);
|
||||
default:
|
||||
throw new AppError('provider_not_found', 400);
|
||||
}
|
||||
@@ -111,6 +114,9 @@ export class BackupService {
|
||||
if (type === 'baidu' && processed.refreshToken) {
|
||||
processed.refreshToken = await encryptData(processed.refreshToken, key);
|
||||
}
|
||||
if (type === 'dropbox' && processed.refreshToken) {
|
||||
processed.refreshToken = await encryptData(processed.refreshToken, key);
|
||||
}
|
||||
return JSON.stringify(processed);
|
||||
}
|
||||
|
||||
@@ -134,6 +140,9 @@ export class BackupService {
|
||||
if (type === 'baidu' && config.refreshToken) {
|
||||
config.refreshToken = await decryptData(config.refreshToken, key);
|
||||
}
|
||||
if (type === 'dropbox' && config.refreshToken) {
|
||||
config.refreshToken = await decryptData(config.refreshToken, key);
|
||||
}
|
||||
return config;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,169 @@
|
||||
import { BackupProvider, BackupFile } from '@/features/backup/providers/backupProvider';
|
||||
import { AppError } from '@/app/config';
|
||||
|
||||
export class DropboxProvider implements BackupProvider {
|
||||
private clientId: string;
|
||||
private clientSecret: string;
|
||||
private refreshToken: string;
|
||||
private accessToken: string | null = null;
|
||||
private saveDir: string;
|
||||
|
||||
constructor(config: any, env: any) {
|
||||
this.clientId = env.OAUTH_DROPBOX_CLIENT_ID;
|
||||
this.clientSecret = env.OAUTH_DROPBOX_CLIENT_SECRET;
|
||||
|
||||
if (!config.refreshToken) {
|
||||
throw new Error('dropbox_token_missing');
|
||||
}
|
||||
this.refreshToken = config.refreshToken;
|
||||
this.saveDir = config.saveDir || ''; // Dropbox App Folder is root by default
|
||||
}
|
||||
|
||||
private async getAccessToken(): Promise<string> {
|
||||
if (this.accessToken) return this.accessToken;
|
||||
|
||||
const res = await fetch('https://api.dropboxapi.com/oauth2/token', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
body: new URLSearchParams({
|
||||
client_id: this.clientId,
|
||||
client_secret: this.clientSecret,
|
||||
refresh_token: this.refreshToken,
|
||||
grant_type: 'refresh_token'
|
||||
})
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const err = await res.json() as any;
|
||||
const errorDesc = (err.error || err.error_description || '').toLowerCase();
|
||||
if (errorDesc.includes('invalid_grant') || res.status === 401) {
|
||||
throw new AppError('oauth_token_revoked', 401);
|
||||
}
|
||||
throw new Error(`dropbox_auth_failed: ${err.error_description || res.statusText}`);
|
||||
}
|
||||
|
||||
const data = await res.json() as any;
|
||||
this.accessToken = data.access_token;
|
||||
return this.accessToken!;
|
||||
}
|
||||
|
||||
async testConnection(): Promise<boolean> {
|
||||
await this.getAccessToken();
|
||||
// Simple list check
|
||||
await this.listBackups();
|
||||
return true;
|
||||
}
|
||||
|
||||
async listBackups(): Promise<BackupFile[]> {
|
||||
const token = await this.getAccessToken();
|
||||
const path = this.saveDir === '/' || this.saveDir === '' ? '' : (this.saveDir.startsWith('/') ? this.saveDir : '/' + this.saveDir);
|
||||
|
||||
const res = await fetch('https://api.dropboxapi.com/2/files/list_folder', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
path: path,
|
||||
recursive: false,
|
||||
include_media_info: false,
|
||||
include_deleted: false
|
||||
})
|
||||
});
|
||||
|
||||
if (res.status === 409) {
|
||||
// Path not found, return empty
|
||||
return [];
|
||||
}
|
||||
|
||||
if (!res.ok) {
|
||||
const err = await res.json() as any;
|
||||
if (err?.error?.['.tag'] === 'path' && err?.error?.path?.['.tag'] === 'not_found') {
|
||||
return [];
|
||||
}
|
||||
throw new Error(`dropbox_list_failed: ${res.status}`);
|
||||
}
|
||||
|
||||
const data = await res.json() as any;
|
||||
return (data.entries || [])
|
||||
.filter((f: any) => f['.tag'] === 'file' && f.name.includes('2fa-backup-'))
|
||||
.map((f: any) => ({
|
||||
filename: f.name,
|
||||
size: f.size,
|
||||
lastModified: f.server_modified
|
||||
}));
|
||||
}
|
||||
|
||||
async uploadBackup(filename: string, data: string): Promise<void> {
|
||||
const token = await this.getAccessToken();
|
||||
const path = this.saveDir === '/' || this.saveDir === '' ? '' : (this.saveDir.startsWith('/') ? this.saveDir : '/' + this.saveDir);
|
||||
const fullPath = `${path}/${filename}`.replace(/\/+/g, '/');
|
||||
|
||||
const args = {
|
||||
path: fullPath,
|
||||
mode: 'overwrite',
|
||||
autorename: false,
|
||||
mute: false,
|
||||
strict_conflict: false
|
||||
};
|
||||
|
||||
const res = await fetch('https://content.dropboxapi.com/2/files/upload', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Dropbox-API-Arg': JSON.stringify(args),
|
||||
'Content-Type': 'application/octet-stream'
|
||||
},
|
||||
body: data
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const err = await res.json() as any;
|
||||
throw new Error(`dropbox_upload_failed: ${err.error_summary || res.statusText}`);
|
||||
}
|
||||
}
|
||||
|
||||
async downloadBackup(filename: string): Promise<string> {
|
||||
const token = await this.getAccessToken();
|
||||
const path = this.saveDir === '/' || this.saveDir === '' ? '' : (this.saveDir.startsWith('/') ? this.saveDir : '/' + this.saveDir);
|
||||
const fullPath = `${path}/${filename}`.replace(/\/+/g, '/');
|
||||
|
||||
const args = {
|
||||
path: fullPath
|
||||
};
|
||||
|
||||
const res = await fetch('https://content.dropboxapi.com/2/files/download', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Dropbox-API-Arg': JSON.stringify(args)
|
||||
}
|
||||
});
|
||||
|
||||
if (!res.ok) throw new Error(`dropbox_download_failed: ${res.status}`);
|
||||
return await res.text();
|
||||
}
|
||||
|
||||
async deleteBackup(filename: string): Promise<void> {
|
||||
const token = await this.getAccessToken();
|
||||
const path = this.saveDir === '/' || this.saveDir === '' ? '' : (this.saveDir.startsWith('/') ? this.saveDir : '/' + this.saveDir);
|
||||
const fullPath = `${path}/${filename}`.replace(/\/+/g, '/');
|
||||
|
||||
const res = await fetch('https://api.dropboxapi.com/2/files/delete_v2', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ path: fullPath })
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const err = await res.json() as any;
|
||||
// Ignore if already deleted
|
||||
if (err?.error_summary?.includes('path_lookup/not_found')) return;
|
||||
throw new Error(`dropbox_delete_failed: ${res.statusText}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -4,4 +4,5 @@ export * from '@/features/backup/providers/s3Provider';
|
||||
export * from '@/features/backup/providers/telegramProvider';
|
||||
export * from '@/features/backup/providers/googleDriveProvider';
|
||||
export * from '@/features/backup/providers/oneDriveProvider';
|
||||
export * from '@/features/backup/providers/baiduNetdiskProvider';
|
||||
export * from '@/features/backup/providers/baiduNetdiskProvider';
|
||||
export * from '@/features/backup/providers/dropboxProvider';
|
||||
@@ -241,4 +241,26 @@
|
||||
|
||||
.dark .btn-baidu-auth:hover {
|
||||
background-color: #222850;
|
||||
}
|
||||
|
||||
.btn-dropbox-auth {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #0061FF;
|
||||
color: #0061FF;
|
||||
}
|
||||
|
||||
.btn-dropbox-auth:hover {
|
||||
background-color: #f0f7ff;
|
||||
border-color: #0061FF;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 97, 255, 0.30), 0 4px 8px 3px rgba(0, 97, 255, 0.15);
|
||||
}
|
||||
|
||||
.dark .btn-dropbox-auth {
|
||||
background-color: #002d75;
|
||||
border-color: #0061FF;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.dark .btn-dropbox-auth:hover {
|
||||
background-color: #00368c;
|
||||
}
|
||||
@@ -139,42 +139,68 @@
|
||||
}
|
||||
|
||||
.ecosystem-groups {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.ecosystem-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
gap: 16px;
|
||||
padding: 20px 20px 0;
|
||||
background-color: none;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-radius: 12px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.ecosystem-group:hover {
|
||||
border-color: var(--el-border-color);
|
||||
box-shadow: var(--el-box-shadow-lighter);
|
||||
}
|
||||
|
||||
.group-title {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
color: var(--el-text-color-regular);
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.ecosystem-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px 24px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.ecosystem-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-primary);
|
||||
font-size: 13px;
|
||||
color: var(--el-text-color-regular);
|
||||
line-height: 1.2;
|
||||
padding: 6px 12px;
|
||||
background: var(--el-fill-color-lighter);
|
||||
border-radius: 20px;
|
||||
border: 1px solid transparent;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.ecosystem-item:hover {
|
||||
color: var(--el-color-primary);
|
||||
background: var(--el-color-primary-light-9);
|
||||
border-color: var(--el-color-primary-light-8);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.ecosystem-item .el-icon,
|
||||
.ecosystem-item svg {
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
/* 疑难解答折叠面板 */
|
||||
@@ -185,9 +211,10 @@
|
||||
}
|
||||
|
||||
.ecosystem-collapse :deep(.el-collapse),
|
||||
.ecosystem-collapse :deep(.el-collapse-item),
|
||||
.ecosystem-collapse :deep(.el-collapse-item__header),
|
||||
.ecosystem-collapse :deep(.el-collapse-item__wrap) {
|
||||
border: none;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.ecosystem-collapse :deep(.el-collapse-item__header) {
|
||||
@@ -204,57 +231,89 @@
|
||||
}
|
||||
|
||||
.ecosystem-collapse :deep(.el-collapse-item__content) {
|
||||
padding: 10px 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.migration-ga-tip,
|
||||
.migration-ms-tip {
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.migration-ga-tip {
|
||||
background-color: var(--el-color-primary-light-9);
|
||||
padding: 10px 12px;
|
||||
border-radius: 6px;
|
||||
border-left: 3px solid var(--el-color-primary);
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.migration-ga-tip span {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
color: var(--el-color-primary);
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.migration-ga-tip p {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-regular);
|
||||
line-height: 1.5;
|
||||
border-color: var(--el-color-primary-light-8);
|
||||
}
|
||||
|
||||
.migration-ms-tip {
|
||||
background-color: var(--el-color-success-light-9);
|
||||
padding: 10px 12px;
|
||||
border-radius: 6px;
|
||||
border-left: 3px solid var(--el-color-success);
|
||||
margin-top: 15px;
|
||||
border-color: var(--el-color-success-light-8);
|
||||
}
|
||||
|
||||
.migration-ga-tip span,
|
||||
.migration-ms-tip span {
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.migration-ga-tip span {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.migration-ms-tip span {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
color: var(--el-color-success);
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.migration-ga-tip p,
|
||||
.migration-ms-tip p {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: var(--el-color-regular);
|
||||
line-height: 1.5;
|
||||
color: var(--el-text-color-regular);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.migration-ms-tip code {
|
||||
word-wrap: break-word;
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
padding: 6px 10px;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 4px;
|
||||
font-family: var(--el-font-family-mono);
|
||||
font-size: 11px;
|
||||
word-break: break-all;
|
||||
color: var(--el-text-color-regular);
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* 深色模式优化 */
|
||||
html.dark .migration-ga-tip {
|
||||
background-color: rgba(64, 158, 255, 0.1);
|
||||
border-color: rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
|
||||
html.dark .migration-ms-tip {
|
||||
background-color: rgba(103, 194, 58, 0.1);
|
||||
border-color: rgba(103, 194, 58, 0.2);
|
||||
}
|
||||
|
||||
html.dark .migration-ms-tip code {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
html.dark .ecosystem-item {
|
||||
background: var(--el-fill-color-light);
|
||||
}
|
||||
|
||||
html.dark .ecosystem-item:hover {
|
||||
background: rgba(64, 158, 255, 0.15);
|
||||
}
|
||||
|
||||
/* dataMigration.vue */
|
||||
|
||||
@@ -80,6 +80,7 @@
|
||||
<el-option v-if="availableTypes.includes('gdrive')" :label="$t('backup.type_gdrive')" value="gdrive" />
|
||||
<el-option v-if="availableTypes.includes('onedrive')" :label="$t('backup.type_onedrive')" value="onedrive" />
|
||||
<el-option v-if="availableTypes.includes('baidu')" :label="$t('backup.type_baidu')" value="baidu" />
|
||||
<el-option v-if="availableTypes.includes('dropbox')" :label="$t('backup.type_dropbox')" value="dropbox" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('backup.name_label')">
|
||||
@@ -327,6 +328,61 @@
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
<!-- Dropbox 配置 -->
|
||||
<template v-if="form.type === 'dropbox'">
|
||||
<!-- 1. 授权引导/状态区域 -->
|
||||
<div v-if="!form.config.refreshToken" class="p-10 mb-20 text-center bg-fill rounded-8 border-1 border-dashed min-h-120 flex flex-center flex-column">
|
||||
<template v-if="!authStatusDropbox">
|
||||
<p class="mb-15 text-secondary text-13">{{ $t('backup.dropbox_auth_tip') }}</p>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-oauth-auth btn-dropbox-auth pointer"
|
||||
:class="{ 'is-loading': isAuthenticatingDropbox }"
|
||||
:disabled="isAuthenticatingDropbox"
|
||||
@click="startDropboxAuth"
|
||||
>
|
||||
<el-icon v-if="isAuthenticatingDropbox" class="is-loading"><Loading /></el-icon>
|
||||
<component v-else :is="iconDropbox" width="20" height="20" />
|
||||
<span>{{ isAuthenticatingDropbox ? $t('backup.waiting_authorization') : $t('backup.auth_with_dropbox') }}</span>
|
||||
</button>
|
||||
</template>
|
||||
<template v-else-if="authStatusDropbox === 'error'">
|
||||
<div class="text-danger flex flex-items-center flex-column py-10">
|
||||
<el-icon size="42"><CircleClose /></el-icon>
|
||||
<p class="mt-15 font-bold">{{ authErrorMessageDropbox }}</p>
|
||||
<el-button type="primary" link class="mt-10" @click="startDropboxAuth">{{ $t('backup.re_authorize') }}</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- 2. 已授权标识 -->
|
||||
<el-form-item v-if="!isEditing && authStatusDropbox === 'success'" class="animate-fade-in">
|
||||
<div class="backup-status-box is-success">
|
||||
<div class="backup-status-content">
|
||||
<el-icon class="status-icon"><CircleCheck /></el-icon>
|
||||
<span class="status-text">{{ $t('backup.authorized_success_dropbox') }}</span>
|
||||
</div>
|
||||
<el-button type="primary" link @click="startDropboxAuth">{{ $t('backup.re_authorize') }}</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 3. 配置项区域 -->
|
||||
<div v-if="form.config.refreshToken">
|
||||
<el-form-item :label="$t('backup.save_dir')">
|
||||
<el-input v-model="form.config.saveDir" :placeholder="$t('backup.save_dir_placeholder')" />
|
||||
<div class="backup-form-tip">{{ $t('backup.gdrive_folder_tip') }}</div>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="isEditing" :label="$t('backup.dropbox_refresh_token')">
|
||||
<div class="backup-status-box">
|
||||
<div class="backup-status-content">
|
||||
<el-icon class="status-icon" color="var(--el-text-color-secondary)"><CircleCheck /></el-icon>
|
||||
<span class="status-text text-secondary">{{ $t('backup.dropbox_token_active') }}</span>
|
||||
</div>
|
||||
<el-button type="primary" link @click="startDropboxAuth">{{ $t('backup.re_authorize') }}</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-divider content-position="left">{{ $t('backup.auto_backup_config') }}</el-divider>
|
||||
<el-form-item :label="$t('backup.auto_backup')">
|
||||
@@ -419,6 +475,7 @@ import { Plus, Edit, Delete, CircleCheck, CircleClose, Timer, Loading } from '@e
|
||||
import iconGoogleDrive from '@/shared/components/icons/iconGoogleDrive.vue'
|
||||
import iconOnedrive from '@/shared/components/icons/iconOnedrive.vue'
|
||||
import iconBaiduNetdisk from '@/shared/components/icons/iconBaiduNetdisk.vue'
|
||||
import iconDropbox from '@/shared/components/icons/iconDropbox.vue'
|
||||
import { useLayoutStore } from '@/shared/stores/layoutStore'
|
||||
import { useBackupProviders } from '@/features/backup/composables/useBackupProviders'
|
||||
import { useBackupActions } from '@/features/backup/composables/useBackupActions'
|
||||
@@ -431,10 +488,10 @@ const {
|
||||
isEditingWebdavPwd, isEditingS3Secret, isEditingTelegramToken, form,
|
||||
isAutoBackupPasswordSaved, shouldUseExistingAutoBackupPassword, fetchProviders, openAddDialog,
|
||||
editProvider, testConnection, saveProvider, deleteProvider,
|
||||
startGoogleAuth, startMicrosoftAuth, startBaiduAuth, handleAuthMessage,
|
||||
isAuthenticatingGoogle, isAuthenticatingMicrosoft, isAuthenticatingBaidu,
|
||||
authStatusGoogle, authStatusMicrosoft, authStatusBaidu,
|
||||
authErrorMessageGoogle, authErrorMessageMicrosoft, authErrorMessageBaidu,
|
||||
startGoogleAuth, startMicrosoftAuth, startBaiduAuth, startDropboxAuth, handleAuthMessage,
|
||||
isAuthenticatingGoogle, isAuthenticatingMicrosoft, isAuthenticatingBaidu, isAuthenticatingDropbox,
|
||||
authStatusGoogle, authStatusMicrosoft, authStatusBaidu, authStatusDropbox,
|
||||
authErrorMessageGoogle, authErrorMessageMicrosoft, authErrorMessageBaidu, authErrorMessageDropbox,
|
||||
setupAuthListener, availableTypes
|
||||
} = useBackupProviders()
|
||||
|
||||
@@ -465,8 +522,9 @@ const getProviderTypeTag = (type) => {
|
||||
s3: 'warning',
|
||||
telegram: 'success',
|
||||
gdrive: 'danger',
|
||||
onedrive: '',
|
||||
baidu: 'primary'
|
||||
onedrive: 'success',
|
||||
baidu: 'warning',
|
||||
dropbox: 'primary'
|
||||
}
|
||||
return map[type] || 'info'
|
||||
}
|
||||
|
||||
@@ -26,12 +26,15 @@ export function useBackupProviders() {
|
||||
const isAuthenticatingGoogle = ref(false)
|
||||
const isAuthenticatingMicrosoft = ref(false)
|
||||
const isAuthenticatingBaidu = ref(false)
|
||||
const isAuthenticatingDropbox = ref(false)
|
||||
const authStatusGoogle = ref(null) // null, 'success', 'error'
|
||||
const authStatusMicrosoft = ref(null)
|
||||
const authStatusBaidu = ref(null)
|
||||
const authStatusDropbox = ref(null)
|
||||
const authErrorMessageGoogle = ref('')
|
||||
const authErrorMessageMicrosoft = ref('')
|
||||
const authErrorMessageBaidu = ref('')
|
||||
const authErrorMessageDropbox = ref('')
|
||||
|
||||
const initialFormState = () => ({
|
||||
type: 's3',
|
||||
@@ -119,6 +122,8 @@ export function useBackupProviders() {
|
||||
if (!config.refreshToken) return t('backup.require_microsoft_auth')
|
||||
} else if (form.value.type === 'baidu') {
|
||||
if (!config.refreshToken) return t('backup.require_baidu_auth')
|
||||
} else if (form.value.type === 'dropbox') {
|
||||
if (!config.refreshToken) return t('backup.require_dropbox_auth')
|
||||
}
|
||||
|
||||
if (form.value.autoBackup) {
|
||||
@@ -137,13 +142,15 @@ export function useBackupProviders() {
|
||||
if (error) return ElMessage.warning(error)
|
||||
|
||||
isTesting.value = true;
|
||||
// Reset old error states before starting a new test to ensure UI reflects current result
|
||||
authStatusGoogle.value = null;
|
||||
// Only reset error states, keep 'success' state if it exists
|
||||
if (authStatusGoogle.value === 'error') authStatusGoogle.value = null;
|
||||
authErrorMessageGoogle.value = '';
|
||||
authStatusMicrosoft.value = null;
|
||||
if (authStatusMicrosoft.value === 'error') authStatusMicrosoft.value = null;
|
||||
authErrorMessageMicrosoft.value = '';
|
||||
authStatusBaidu.value = null;
|
||||
if (authStatusBaidu.value === 'error') authStatusBaidu.value = null;
|
||||
authErrorMessageBaidu.value = '';
|
||||
if (authStatusDropbox.value === 'error') authStatusDropbox.value = null;
|
||||
authErrorMessageDropbox.value = '';
|
||||
|
||||
try {
|
||||
const res = await backupService.testConnection(
|
||||
@@ -151,7 +158,15 @@ export function useBackupProviders() {
|
||||
form.value.config,
|
||||
isEditing.value ? currentProviderId.value : null
|
||||
)
|
||||
if (res.success) ElMessage.success(t('backup.test_success'))
|
||||
if (res.success) {
|
||||
ElMessage.success(t('backup.test_success'))
|
||||
// Ensure the success status is reflected in the UI for OAuth providers
|
||||
const type = form.value.type
|
||||
if (type === 'gdrive') authStatusGoogle.value = 'success'
|
||||
else if (type === 'onedrive') authStatusMicrosoft.value = 'success'
|
||||
else if (type === 'baidu') authStatusBaidu.value = 'success'
|
||||
else if (type === 'dropbox') authStatusDropbox.value = 'success'
|
||||
}
|
||||
} catch (e) {
|
||||
// Error is handled here natively since we silenced the global request.js interceptor for testConnection
|
||||
const rawMsg = e?.details?.message || e?.message || e?.response?.data?.message || (typeof e === 'string' ? e : t('common.error'));
|
||||
@@ -175,6 +190,9 @@ export function useBackupProviders() {
|
||||
} else if (type === 'baidu') {
|
||||
authStatusBaidu.value = 'error';
|
||||
authErrorMessageBaidu.value = t('backup.token_expired_or_revoked');
|
||||
} else if (type === 'dropbox') {
|
||||
authStatusDropbox.value = 'error';
|
||||
authErrorMessageDropbox.value = t('backup.token_expired_or_revoked');
|
||||
}
|
||||
|
||||
// If we are editing an existing provider, update the global store to reflect the state
|
||||
@@ -313,6 +331,35 @@ export function useBackupProviders() {
|
||||
}
|
||||
}
|
||||
|
||||
const startDropboxAuth = async () => {
|
||||
isAuthenticatingDropbox.value = true
|
||||
authStatusDropbox.value = null
|
||||
authErrorMessageDropbox.value = ''
|
||||
try {
|
||||
const res = await backupService.getDropboxAuthUrl()
|
||||
if (res.success && res.authUrl) {
|
||||
const name = 'dropbox_auth'
|
||||
const specs = 'width=600,height=700,left=200,top=100'
|
||||
const authWindow = window.open(res.authUrl, name, specs)
|
||||
|
||||
const timer = setInterval(() => {
|
||||
try {
|
||||
if (authWindow && authWindow.closed) {
|
||||
clearInterval(timer)
|
||||
if (isAuthenticatingDropbox.value && !authStatusDropbox.value) {
|
||||
isAuthenticatingDropbox.value = false
|
||||
}
|
||||
}
|
||||
} catch (e) { }
|
||||
}, 1000)
|
||||
} else {
|
||||
isAuthenticatingDropbox.value = false
|
||||
}
|
||||
} catch (e) {
|
||||
isAuthenticatingDropbox.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleAuthMessage = async (event) => {
|
||||
const data = event instanceof MessageEvent ? event.data : event
|
||||
if (!data || !data.type) return
|
||||
@@ -350,6 +397,17 @@ export function useBackupProviders() {
|
||||
isAuthenticatingBaidu.value = false
|
||||
authStatusBaidu.value = 'error'
|
||||
authErrorMessageBaidu.value = data.message || t('backup.baidu_auth_failed')
|
||||
} else if (data.type === 'DROPBOX_AUTH_SUCCESS') {
|
||||
isAuthenticatingDropbox.value = false
|
||||
authStatusDropbox.value = 'success'
|
||||
form.value.config.refreshToken = data.refreshToken
|
||||
if (!form.value.config.saveDir) {
|
||||
form.value.config.saveDir = ''
|
||||
}
|
||||
} else if (data.type === 'DROPBOX_AUTH_ERROR') {
|
||||
isAuthenticatingDropbox.value = false
|
||||
authStatusDropbox.value = 'error'
|
||||
authErrorMessageDropbox.value = data.message || t('backup.dropbox_auth_failed')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -377,11 +435,15 @@ export function useBackupProviders() {
|
||||
const bcBaidu = new BroadcastChannel('baidu_oauth_channel')
|
||||
bcBaidu.onmessage = handleMsg
|
||||
|
||||
const bcDropbox = new BroadcastChannel('dropbox_oauth_channel')
|
||||
bcDropbox.onmessage = handleMsg
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('message', handleMsg)
|
||||
bcGDrive.close()
|
||||
bcMs.close()
|
||||
bcBaidu.close()
|
||||
bcDropbox.close()
|
||||
}
|
||||
}
|
||||
|
||||
@@ -400,12 +462,15 @@ export function useBackupProviders() {
|
||||
isAuthenticatingGoogle,
|
||||
isAuthenticatingMicrosoft,
|
||||
isAuthenticatingBaidu,
|
||||
isAuthenticatingDropbox,
|
||||
authStatusGoogle,
|
||||
authStatusMicrosoft,
|
||||
authStatusBaidu,
|
||||
authStatusDropbox,
|
||||
authErrorMessageGoogle,
|
||||
authErrorMessageMicrosoft,
|
||||
authErrorMessageBaidu,
|
||||
authErrorMessageDropbox,
|
||||
form,
|
||||
isAutoBackupPasswordSaved,
|
||||
shouldUseExistingAutoBackupPassword,
|
||||
@@ -418,6 +483,7 @@ export function useBackupProviders() {
|
||||
startGoogleAuth,
|
||||
startMicrosoftAuth,
|
||||
startBaiduAuth,
|
||||
startDropboxAuth,
|
||||
handleAuthMessage,
|
||||
setupAuthListener,
|
||||
availableTypes
|
||||
|
||||
@@ -221,5 +221,17 @@ export const backupService = {
|
||||
} catch (e) {
|
||||
throw new backupError('Failed to get Baidu Auth URL', 'AUTH_URL_FETCH_FAILED', e)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取 Dropbox 授权地址
|
||||
* @returns {Promise<{success: boolean, authUrl: string}>}
|
||||
*/
|
||||
async getDropboxAuthUrl() {
|
||||
try {
|
||||
return await request('/api/backups/oauth/dropbox/auth', { method: 'POST' })
|
||||
} catch (e) {
|
||||
throw new backupError('Failed to get Dropbox Auth URL', 'AUTH_URL_FETCH_FAILED', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -25,22 +25,31 @@
|
||||
</div>
|
||||
</el-upload>
|
||||
|
||||
<!-- 生态支持矩阵 (独立剥离的说明区) -->
|
||||
<!-- 生态支持矩阵 (优化后的说明区) -->
|
||||
<div class="migration-ecosystem mt-30">
|
||||
<el-divider border-style="dashed" />
|
||||
<h3 class="ecosystem-title">{{ $t('migration.support_desc') }}</h3>
|
||||
<el-divider border-style="dashed">
|
||||
<span class="text-secondary font-12">{{ $t('migration.support_desc') }}</span>
|
||||
</el-divider>
|
||||
|
||||
<div class="ecosystem-groups">
|
||||
<!-- 组1: 本系统 -->
|
||||
<div class="ecosystem-group">
|
||||
<h4 class="group-title">📁 {{ $t('migration.system_backup_format') }}</h4>
|
||||
<h4 class="group-title">
|
||||
<el-icon><Folder /></el-icon>
|
||||
{{ $t('migration.system_backup_format') }}
|
||||
</h4>
|
||||
<div class="ecosystem-grid">
|
||||
<span class="ecosystem-item"><el-icon><Lock /></el-icon> {{ $t('migration.encrypted_backup_json') }}</span>
|
||||
<span class="ecosystem-item"><el-icon><Unlock /></el-icon> {{ $t('migration.plaintext_backup_json') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ecosystem-group">
|
||||
<h4 class="group-title">📱 {{ $t('migration.mobile_app_format') }}</h4>
|
||||
<!-- 组2: 移动端 App -->
|
||||
<div class="ecosystem-group mobile-group">
|
||||
<h4 class="group-title">
|
||||
<el-icon><Iphone /></el-icon>
|
||||
{{ $t('migration.mobile_app_format') }}
|
||||
</h4>
|
||||
<div class="ecosystem-grid">
|
||||
<span class="ecosystem-item"><icon2FAS /> 2FAS (.2fas)</span>
|
||||
<span class="ecosystem-item"><iconAegis /> Aegis (.json/.txt)</span>
|
||||
@@ -51,30 +60,36 @@
|
||||
<span class="ecosystem-item"><iconMicrosoftAuth /> Microsoft Auth</span>
|
||||
</div>
|
||||
|
||||
<!-- 疑难解答(折叠) -->
|
||||
<el-collapse class="ecosystem-collapse mt-15">
|
||||
<!-- 疑难解答(优化后的折叠样式) -->
|
||||
<el-collapse class="ecosystem-collapse">
|
||||
<el-collapse-item name="1">
|
||||
<template #title>
|
||||
<el-icon class="mr-5"><Warning /></el-icon> <strong>{{ $t('migration.ga_ms_import_guide') }}</strong>
|
||||
<h4 class="group-title">
|
||||
<el-icon class="mr-8"><QuestionFilled /></el-icon> <strong>{{ $t('migration.ga_ms_import_guide') }}</strong>
|
||||
</h4>
|
||||
</template>
|
||||
<div class="migration-ga-tip mt-5">
|
||||
<span>Google Authenticator</span>
|
||||
<div class="migration-ga-tip">
|
||||
<span><el-icon><iconGoogleAuth /></el-icon> Google Authenticator</span>
|
||||
<p>{{ $t('migration.ga_auth_desc') }}</p>
|
||||
</div>
|
||||
<div class="migration-ms-tip mt-10">
|
||||
<span>{{ $t('migration.ms_auth_desc') }}</span>
|
||||
<p>{{ $t('migration.ms_auth_detail') }}:<br />
|
||||
<code>/data/data/com.azure.authenticator/databases/PhoneFactor</code><br />
|
||||
<code>/data/data/com.azure.authenticator/databases/PhoneFactor-wal</code><br />
|
||||
<code>/data/data/com.azure.authenticator/databases/PhoneFactor-shm</code>
|
||||
</p>
|
||||
<span><el-icon><iconMicrosoftAuth /></el-icon> Microsoft Authenticator</span>
|
||||
<p>{{ $t('migration.ms_auth_desc') }}</p>
|
||||
<p class="mt-5 font-11 text-secondary">{{ $t('migration.ms_auth_detail') }}:</p>
|
||||
<code>/data/data/com.azure.authenticator/databases/PhoneFactor</code>
|
||||
<code>/data/data/com.azure.authenticator/databases/PhoneFactor-wal</code>
|
||||
<code>/data/data/com.azure.authenticator/databases/PhoneFactor-shm</code>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
|
||||
<!-- 组3: 通用格式 -->
|
||||
<div class="ecosystem-group">
|
||||
<h4 class="group-title">📄 {{ $t('migration.generic_format') }}</h4>
|
||||
<h4 class="group-title">
|
||||
<el-icon><Document /></el-icon>
|
||||
{{ $t('migration.generic_format') }}
|
||||
</h4>
|
||||
<div class="ecosystem-grid">
|
||||
<span class="ecosystem-item"><el-icon><Document /></el-icon> {{ $t('migration.generic_json') }}</span>
|
||||
<span class="ecosystem-item"><el-icon><Tickets /></el-icon> OTPAuth URI (.txt)</span>
|
||||
@@ -132,7 +147,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { UploadFilled, Lock, Unlock, Document, Tickets, Grid, Warning } from '@element-plus/icons-vue'
|
||||
import { UploadFilled, Lock, Unlock, Document, Tickets, Grid, Warning, Folder, Iphone, QuestionFilled } from '@element-plus/icons-vue'
|
||||
import { useDataImport } from '@/features/migration/composables/useDataImport'
|
||||
|
||||
// icons for import options (follow export page style)
|
||||
|
||||
@@ -135,6 +135,7 @@
|
||||
"type_gdrive": "Google Drive",
|
||||
"type_onedrive": "OneDrive",
|
||||
"type_baidu": "Baidu Netdisk",
|
||||
"type_dropbox": "Dropbox",
|
||||
"name_label": "Name (Alias)",
|
||||
"name_placeholder": "e.g., OpenList",
|
||||
"webdav_url": "WebDAV URL",
|
||||
@@ -149,9 +150,11 @@
|
||||
"auth_with_google": "Authorize Google Drive",
|
||||
"auth_with_microsoft": "Authorize OneDrive",
|
||||
"auth_with_baidu": "Authorize Baidu Netdisk",
|
||||
"auth_with_dropbox": "Authorize Dropbox",
|
||||
"gdrive_auth_tip": "Back up to your personal Google Drive for full data sovereignty and high availability.",
|
||||
"onedrive_auth_tip": "Back up to your personal OneDrive for full data sovereignty and high availability.",
|
||||
"baidu_auth_tip": "Back up to your personal Baidu Netdisk for full data sovereignty and high availability.",
|
||||
"dropbox_auth_tip": "Back up to your personal Dropbox for full data sovereignty and high availability.",
|
||||
"gdrive_auth_success": "Google Drive authorized successfully",
|
||||
"onedrive_auth_success": "OneDrive authorized successfully",
|
||||
"gdrive_refresh_token": "Authorization Token",
|
||||
@@ -160,6 +163,7 @@
|
||||
"gdrive_token_active": "OAuth Token Active",
|
||||
"onedrive_token_active": "OAuth Token Active",
|
||||
"baidu_token_active": "OAuth Token Active",
|
||||
"dropbox_token_active": "OAuth Token Active",
|
||||
"gdrive_folder_tip": "Recommended to use alphanumeric paths. e.g., /backups",
|
||||
"onedrive_folder_tip": "Recommended to use alphanumeric paths. e.g., /backups",
|
||||
"baidu_folder_tip": "Backup files will be saved to: /apps/2fauth-backup",
|
||||
@@ -171,9 +175,11 @@
|
||||
"authorized_success_gd": "Google Drive Connected Successfully",
|
||||
"authorized_success_ms": "OneDrive Connected Successfully",
|
||||
"authorized_success_baidu": "Baidu Netdisk Connected Successfully",
|
||||
"authorized_success_dropbox": "Dropbox Connected Successfully",
|
||||
"require_google_auth": "Please authorize Google Drive first",
|
||||
"require_microsoft_auth": "Please authorize OneDrive first",
|
||||
"require_baidu_auth": "Please authorize Baidu Netdisk first",
|
||||
"require_dropbox_auth": "Please authorize Dropbox first",
|
||||
"telegram_bot_token": "Bot Token",
|
||||
"telegram_bot_token_placeholder": "123456789:ABCdefGHIjklmNOPQrsTUVwxyZ",
|
||||
"telegram_chat_id": "Chat ID",
|
||||
@@ -207,6 +213,7 @@
|
||||
"use_new_pwd": "Use New Password",
|
||||
"input_custom_pwd": "Enter custom encryption password (at least 12 chars)",
|
||||
"baidu_auth_failed": "Baidu Netdisk authorization failed",
|
||||
"dropbox_auth_failed": "Dropbox authorization failed",
|
||||
"start_backup": "Start Backup",
|
||||
"select_restore_file": "Select Backup to Restore",
|
||||
"filename": "Filename",
|
||||
@@ -333,7 +340,7 @@
|
||||
"ga_auth_desc": "Export 'Transfer QR code' in the App and upload the screenshot (.png / .jpg)",
|
||||
"ms_auth_desc": "Microsoft Authenticator (Android Only)",
|
||||
"ms_auth_detail": "Export the following 3 files from Android and upload them together",
|
||||
"ga_ms_import_guide": "Google Auth / Microsoft Auth Import Guide",
|
||||
"ga_ms_import_guide": "Google / Microsoft Import Guide",
|
||||
"batch_import_processing": "📦 Batch Import Processing",
|
||||
"batch_progress": "{processed} / {total} tasks completed",
|
||||
"decrypt_backup_title": "🔓 Decrypt Backup File",
|
||||
|
||||
@@ -135,6 +135,7 @@
|
||||
"type_gdrive": "Google Drive",
|
||||
"type_onedrive": "OneDrive",
|
||||
"type_baidu": "百度网盘",
|
||||
"type_dropbox": "Dropbox",
|
||||
"name_label": "名称 (别名)",
|
||||
"name_placeholder": "例如: OpenList",
|
||||
"webdav_url": "WebDAV 地址",
|
||||
@@ -149,9 +150,11 @@
|
||||
"auth_with_google": "连接 Google Drive 授权",
|
||||
"auth_with_microsoft": "连接 OneDrive 授权",
|
||||
"auth_with_baidu": "连接 百度网盘 授权",
|
||||
"auth_with_dropbox": "连接 Dropbox 授权",
|
||||
"gdrive_auth_tip": "建议备份至您的个人 Google Drive 以确保数据主权与高可用性。",
|
||||
"onedrive_auth_tip": "建议备份至您的个人 OneDrive 以确保数据主权与高可用性。",
|
||||
"baidu_auth_tip": "建议备份至您的个人 百度网盘 以确保数据主权与高可用性。",
|
||||
"dropbox_auth_tip": "建议备份至您的个人 Dropbox 以确保数据主权与高可用性。",
|
||||
"gdrive_auth_success": "Google Drive 授权成功",
|
||||
"onedrive_auth_success": "OneDrive 授权成功",
|
||||
"gdrive_refresh_token": "授权令牌",
|
||||
@@ -160,6 +163,7 @@
|
||||
"gdrive_token_active": "授权令牌生效中",
|
||||
"onedrive_token_active": "授权令牌生效中",
|
||||
"baidu_token_active": "授权令牌生效中",
|
||||
"dropbox_token_active": "授权令牌生效中",
|
||||
"gdrive_folder_tip": "建议使用英文或数字路径。例如:/backups",
|
||||
"onedrive_folder_tip": "建议使用英文或数字路径。例如:/backups",
|
||||
"baidu_folder_tip": "备份文件将保存在网盘的:/apps/2fauth-backup ",
|
||||
@@ -171,9 +175,11 @@
|
||||
"authorized_success_gd": "已成功连接 Google Drive",
|
||||
"authorized_success_ms": "已成功连接 OneDrive",
|
||||
"authorized_success_baidu": "已成功连接 百度网盘",
|
||||
"authorized_success_dropbox": "已成功连接 Dropbox",
|
||||
"require_google_auth": "请先完成 Google Drive 授权",
|
||||
"require_microsoft_auth": "请先完成 OneDrive 授权",
|
||||
"require_baidu_auth": "请先完成 百度网盘 授权",
|
||||
"require_dropbox_auth": "请先完成 Dropbox 授权",
|
||||
"telegram_bot_token": "Bot Token",
|
||||
"telegram_bot_token_placeholder": "123456789:ABCdefGHIjklmNOPQrsTUVwxyZ",
|
||||
"telegram_chat_id": "Chat ID",
|
||||
@@ -207,6 +213,7 @@
|
||||
"use_new_pwd": "使用新密码",
|
||||
"input_custom_pwd": "输入自定义加密密码 (至少12位)",
|
||||
"baidu_auth_failed": "百度网盘授权失败",
|
||||
"dropbox_auth_failed": "Dropbox 授权失败",
|
||||
"start_backup": "开始备份",
|
||||
"select_restore_file": "选择备份文件恢复",
|
||||
"filename": "文件名",
|
||||
@@ -333,7 +340,7 @@
|
||||
"ga_auth_desc": "请在 App 内导出\"迁移二维码\",将截图直接上传 (.png / .jpg)",
|
||||
"ms_auth_desc": "Microsoft Authenticator (仅支持 Android)",
|
||||
"ms_auth_detail": "Android 手机导出以下3个文件后,同时选中上传即可导入",
|
||||
"ga_ms_import_guide": "Google Auth / Microsoft Auth 导入指南",
|
||||
"ga_ms_import_guide": "Google / Microsoft Auth 导入指南",
|
||||
"batch_import_processing": "📦 批量导入处理中",
|
||||
"batch_progress": "{processed} / {total} 任务已完成",
|
||||
"decrypt_backup_title": "🔓 解密备份文件",
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1333.34 1133.07" fill="currentColor">
|
||||
<path d="M667.53 212.92L333.76 425.84l333.77 212.92-333.77 212.92L0 637.61l333.76-212.92L0 212.92 333.76 0l333.77 212.92zM332.04 920.15L665.8 707.23l333.76 212.92-333.76 212.92-333.76-212.92zM667.53 637.6l333.76-212.92-333.76-211.77L999.57-.01l333.77 212.92-333.77 212.92 333.77 212.92-333.77 212.92L667.53 637.6z"/>
|
||||
</svg>
|
||||
</template>
|
||||
<script>
|
||||
export default { name: 'iconDropbox' }
|
||||
</script>
|
||||
Reference in new issue
Block a user