✨ feat: 支持导出导入设置

Author: kazukokawagawa

auto-eslint.mjs

@@ -59,7 +59,6 @@ export default {
     "isRef": true,
     "isShallow": true,
     "makeDestructurable": true,
-    "manualResetRef": true,
     "markRaw": true,
     "nextTick": true,
     "onActivated": true,
@@ -97,11 +96,11 @@ export default {
     "refAutoReset": true,
     "refDebounced": true,
     "refDefault": true,
-    "refManualReset": true,
     "refThrottled": true,
     "refWithControl": true,
     "resolveComponent": true,
     "resolveRef": true,
+    "resolveUnref": true,
     "shallowReactive": true,
     "shallowReadonly": true,
     "shallowRef": true,

electron/main/ipc/ipc-store.ts

@@ -1,4 +1,5 @@
-import { ipcMain } from "electron";
+import { ipcMain, dialog, app } from "electron";
+import { writeFile, readFile } from "fs/promises";
 import { useStore } from "../store";
 import type { StoreType } from "../store";
 
@@ -40,6 +41,72 @@ const initStoreIpc = (): void => {
     }
     return true;
   });
+  // 导出配置
+  ipcMain.handle("store-export", async (_event, rendererData: any) => {
+    console.log("[IPC] store-export called");
+    try {
+      const now = new Date();
+      const timestamp = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}_${String(now.getHours()).padStart(2, "0")}-${String(now.getMinutes()).padStart(2, "0")}-${String(now.getSeconds()).padStart(2, "0")}`;
+      const filename = `SPlayer_Settings_${timestamp}.json`;
+
+      const { filePath } = await dialog.showSaveDialog({
+        title: "导出设置",
+        defaultPath: filename,
+        filters: [{ name: "JSON", extensions: ["json"] }],
+      });
+
+      if (filePath) {
+        console.log("[IPC] Exporting to:", filePath);
+        const fullData = {
+          version: app.getVersion(),
+          timestamp: now.getTime(),
+          electron: store.store,
+          renderer: rendererData,
+        };
+        const data = JSON.stringify(fullData, null, 2);
+        await writeFile(filePath, data, "utf-8");
+        return true;
+      }
+      console.log("[IPC] Export cancelled");
+      return false;
+    } catch (error) {
+      console.error("❌ Export settings failed:", error);
+      return false;
+    }
+  });
+
+  // 导入配置
+  ipcMain.handle("store-import", async () => {
+    console.log("[IPC] store-import called");
+    try {
+      const { filePaths } = await dialog.showOpenDialog({
+        title: "导入设置",
+        filters: [{ name: "JSON", extensions: ["json"] }],
+        properties: ["openFile"],
+      });
+
+      if (filePaths && filePaths.length > 0) {
+        console.log("[IPC] Importing from:", filePaths[0]);
+        const data = await readFile(filePaths[0], "utf-8");
+        const settings = JSON.parse(data);
+
+        // 恢复 Electron Store 配置
+        if (settings.electron) {
+          store.store = settings.electron;
+        } else if (!settings.renderer) {
+          // 兼容旧版导出（如果是纯 electron store 数据）
+          store.store = settings;
+        }
+
+        return settings;
+      }
+      console.log("[IPC] Import cancelled");
+      return false;
+    } catch (error) {
+      console.error("❌ Import settings failed:", error);
+      return false;
+    }
+  });
 };
 
 export default initStoreIpc;

electron/preload/index.ts

@@ -15,6 +15,8 @@ if (process.contextIsolated) {
         has: (key: string) => ipcRenderer.invoke("store-has", key),
         delete: (key: string) => ipcRenderer.invoke("store-delete", key),
         reset: (keys?: string[]) => ipcRenderer.invoke("store-reset", keys),
+        export: (data: any) => ipcRenderer.invoke("store-export", data),
+        import: () => ipcRenderer.invoke("store-import"),
       },
     });
   } catch (error) {

src/components/Setting/OtherSetting.vue

@@ -101,6 +101,26 @@
         </n-card>
       </n-collapse-transition>
     </div>
+    <div v-if="isElectron" class="set-list">
+      <n-h3 prefix="bar"> 
+        备份与恢复 
+        <n-tag type="warning" size="small" round>Beta</n-tag>
+      </n-h3>
+      <n-card class="set-item">
+        <div class="label">
+          <n-text class="name">导出设置</n-text>
+          <n-text class="tip" :depth="3">将当前所有设置导出为 JSON 文件</n-text>
+        </div>
+        <n-button type="primary" strong secondary @click="exportSettings"> 导出设置 </n-button>
+      </n-card>
+      <n-card class="set-item">
+        <div class="label">
+          <n-text class="name">导入设置</n-text>
+          <n-text class="tip" :depth="3">从 JSON 文件恢复设置（导入后将自动重启）</n-text>
+        </div>
+        <n-button type="primary" strong secondary @click="importSettings"> 导入设置 </n-button>
+      </n-card>
+    </div>
     <div class="set-list">
       <n-h3 prefix="bar"> 重置 </n-h3>
       <n-card class="set-item">
@@ -125,6 +145,7 @@
 import { useSettingStore, useDataStore } from "@/stores";
 import { isElectron } from "@/utils/env";
 import { debounce } from "lodash-es";
+import { NAlert, NTag } from "naive-ui";
 
 const dataStore = useDataStore();
 const settingStore = useSettingStore();
@@ -159,6 +180,69 @@ const testProxy = async () => {
     window.$message.error("代理测试失败，请重试");
   }
   testProxyLoading.value = false;
+  testProxyLoading.value = false;
+};
+
+// 导出设置
+const exportSettings = async () => {
+  console.log("[Frontend] Export settings clicked");
+  try {
+    // 收集渲染进程数据 (localStorage)
+    const rendererData = {
+      "setting-store": localStorage.getItem("setting-store"),
+      "shortcut-store": localStorage.getItem("shortcut-store"),
+    };
+    
+    const result = await window.api.store.export(rendererData);
+    console.log("[Frontend] Export result:", result);
+    if (result) {
+      window.$message.success("设置导出成功");
+    } else {
+      window.$message.error("设置导出失败");
+    }
+  } catch (error) {
+    console.error("[Frontend] Export error:", error);
+    window.$message.error("设置导出出错");
+  }
+};
+
+// 导入设置
+const importSettings = async () => {
+  console.log("[Frontend] Import settings clicked");
+  window.$dialog.warning({
+    title: "导入设置",
+    content: () => h("div", null, [
+      h(NAlert, { type: "warning", showIcon: true, style: { marginBottom: "12px" } }, { default: () => "目前备份数据功能属于测试阶段，不保证可用性" }),
+      h("div", null, "导入设置将覆盖当前所有配置并重启软件，是否继续？")
+    ]),
+    positiveText: "确定",
+    negativeText: "取消",
+    onPositiveClick: async () => {
+      console.log("[Frontend] Import confirmed");
+      try {
+        const data = await window.api.store.import();
+        console.log("[Frontend] Import data:", data);
+        
+        if (data) {
+          // 恢复渲染进程数据
+          if (data.renderer) {
+            if (data.renderer["setting-store"]) localStorage.setItem("setting-store", data.renderer["setting-store"]);
+            if (data.renderer["shortcut-store"]) localStorage.setItem("shortcut-store", data.renderer["shortcut-store"]);
+          }
+          
+          window.$message.success("设置导入成功，即将重启");
+          setTimeout(() => {
+            window.location.reload();
+          }, 1000);
+        } else {
+          window.$message.error("设置导入失败或已取消");
+        }
+      } catch (error) {
+        console.error("[Frontend] Import error:", error);
+        window.$message.error("设置导入出错");
+      }
+    },
+  });
 };
 
 // 重置设置

src/types/global.d.ts

@@ -13,5 +13,17 @@ declare global {
     $notification: NotificationApi;
     $loadingBar: LoadingBarApi;
     $modal: ModalApi;
+    // electron
+    api: {
+      store: {
+        get: (key: string) => Promise<any>;
+        set: (key: string, value: unknown) => Promise<boolean>;
+        has: (key: string) => Promise<boolean>;
+        delete: (key: string) => Promise<boolean>;
+        reset: (keys?: string[]) => Promise<boolean>;
+        export: (data: any) => Promise<boolean>;
+        import: () => Promise<any>;
+      };
+    };
   }
 }