🚧 Refactor backup service

frontend/src/views/settings/pages/BackupPage.vue

@@ -2,7 +2,7 @@
 import {useConfigStore} from '@/stores/configStore';
 import {useBackupStore} from '@/stores/backupStore';
 import {useI18n} from 'vue-i18n';
-import {computed} from 'vue';
+import {computed, ref, watch, onUnmounted} from 'vue';
 import SettingSection from '../components/SettingSection.vue';
 import SettingItem from '../components/SettingItem.vue';
 import ToggleSwitch from '../components/ToggleSwitch.vue';
@@ -13,6 +13,37 @@ const {t} = useI18n();
 const configStore = useConfigStore();
 const backupStore = useBackupStore();
 
+// 消息显示状态
+const message = ref<string | null>(null);
+const isError = ref(false);
+let messageTimer: ReturnType<typeof setTimeout> | null = null;
+
+const clearMessage = () => {
+  if (messageTimer) {
+    clearTimeout(messageTimer);
+    messageTimer = null;
+  }
+  message.value = null;
+};
+
+// 监听同步完成，显示消息并自动消失
+watch(() => backupStore.isSyncing, (syncing, wasSyncing) => {
+  if (wasSyncing && !syncing) {
+    clearMessage();
+    if (backupStore.error) {
+      message.value = backupStore.error;
+      isError.value = true;
+      messageTimer = setTimeout(clearMessage, 5000);
+    } else {
+      message.value = 'Sync successful';
+      isError.value = false;
+      messageTimer = setTimeout(clearMessage, 3000);
+    }
+  }
+});
+
+onUnmounted(clearMessage);
+
 const authMethodOptions = computed(() => [
   {value: AuthMethod.Token, label: t('settings.backup.authMethods.token')},
   {value: AuthMethod.SSHKey, label: t('settings.backup.authMethods.sshKey')},
@@ -172,18 +203,18 @@ const selectSshKeyFile = async () => {
     <!-- 备份操作 -->
     <SettingSection :title="t('settings.backup.backupOperations')">
       <SettingItem 
-        :title="t('settings.backup.pushToRemote')"
-        :description="backupStore.message || undefined"
-        :descriptionType="backupStore.message ? (backupStore.isError ? 'error' : 'success') : 'default'"
+        :title="t('settings.backup.syncToRemote')"
+        :description="message || undefined"
+        :descriptionType="message ? (isError ? 'error' : 'success') : 'default'"
       >
         <button
-          class="push-button"
-          @click="backupStore.pushToRemote"
-          :disabled="!configStore.config.backup.enabled || !configStore.config.backup.repo_url || backupStore.isPushing"
-          :class="{ 'backing-up': backupStore.isPushing }"
+          class="sync-button"
+          @click="backupStore.sync"
+          :disabled="!configStore.config.backup.enabled || !configStore.config.backup.repo_url || backupStore.isSyncing"
+          :class="{ 'syncing': backupStore.isSyncing }"
         >
-          <span v-if="backupStore.isPushing" class="loading-spinner"></span>
-          {{ backupStore.isPushing ? t('settings.backup.pushing') : t('settings.backup.actions.push') }}
+          <span v-if="backupStore.isSyncing" class="loading-spinner"></span>
+          {{ backupStore.isSyncing ? t('settings.backup.syncing') : t('settings.backup.actions.sync') }}
         </button>
       </SettingItem>
     </SettingSection>
@@ -257,7 +288,7 @@ const selectSshKeyFile = async () => {
 }
 
 // 按钮样式
-.push-button {
+.sync-button {
   padding: 8px 16px;
   background-color: var(--settings-input-bg);
   border: 1px solid var(--settings-input-border);
@@ -294,7 +325,7 @@ const selectSshKeyFile = async () => {
     animation: spin 1s linear infinite;
   }
 
-  &.backing-up {
+  &.syncing {
     background-color: #2196f3;
     border-color: #2196f3;
     color: white;

frontend/src/views/settings/pages/KeyBindingsPage.vue

@@ -3,33 +3,27 @@ import { useI18n } from 'vue-i18n';
 import { onMounted, computed } from 'vue';
 import SettingSection from '../components/SettingSection.vue';
 import { useKeybindingStore } from '@/stores/keybindingStore';
-import { useExtensionStore } from '@/stores/extensionStore';
 import { useSystemStore } from '@/stores/systemStore';
 import { getCommandDescription } from '@/views/editor/keymap/commands';
 import { KeyBindingKey } from '@/../bindings/voidraft/internal/models/models';
 
 const { t } = useI18n();
 const keybindingStore = useKeybindingStore();
-const extensionStore = useExtensionStore();
 const systemStore = useSystemStore();
 
 // 加载数据
 onMounted(async () => {
   await keybindingStore.loadKeyBindings();
-  await extensionStore.loadExtensions();
 });
 
 // 从store中获取快捷键数据并转换为显示格式
 const keyBindings = computed(() => {
-  // 只显示启用扩展的快捷键
-  const enabledExtensionIds = new Set(extensionStore.enabledExtensionIds);
-  
   return keybindingStore.keyBindings
-    .filter(kb => kb.enabled && (!kb.extension || enabledExtensionIds.has(kb.extension)))
+    .filter(kb => kb.enabled)
     .map(kb => ({
-      id: kb.key,
-      keys: parseKeyBinding(kb.command || '', kb.key),
-      category: kb.extension || '',
+      key: kb.key,
+      command: parseKeyBinding(kb.command || '', kb.key),
+      extension: kb.extension || '',
       description: kb.key ? (getCommandDescription(kb.key) || kb.key) : ''
     }));
 });
@@ -204,25 +198,25 @@ const parseKeyBinding = (keyStr: string, keyBindingKey?: string): string[] => {
       <div class="key-bindings-container">
         <div class="key-bindings-header">
           <div class="keybinding-col">{{ t('keybindings.headers.shortcut') }}</div>
-          <div class="category-col">{{ t('keybindings.headers.category') }}</div>
+          <div class="extension-col">{{ t('keybindings.headers.extension') }}</div>
           <div class="description-col">{{ t('keybindings.headers.description') }}</div>
         </div>
         
         <div
           v-for="binding in keyBindings"
-          :key="binding.id"
+          :key="binding.key"
           class="key-binding-row"
         >
           <div class="keybinding-col">
             <span 
-              v-for="(key, index) in binding.keys" 
+              v-for="(key, index) in binding.command"
               :key="index"
               class="key-badge"
             >
               {{ key }}
             </span>
           </div>
-          <div class="category-col">{{ binding.category }}</div>
+          <div class="extension-col">{{ binding.extension }}</div>
           <div class="description-col">{{ binding.description }}</div>
         </div>
       </div>
@@ -276,7 +270,7 @@ const parseKeyBinding = (keyStr: string, keyBindingKey?: string): string[] => {
     }
   }
   
-  .category-col {
+  .extension-col {
     width: 80px;
     padding: 0 10px 0 0;
     font-size: 13px;