feat:导入导出accounts信息功能

src/components.d.ts

@@ -9,5 +9,6 @@ declare module 'vue' {
   export interface GlobalComponents {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    StorageManager: typeof import('./components/StorageManager.vue')['default']
   }
 }

src/components/StorageManager.vue

@@ -0,0 +1,101 @@
+<template>
+    <div class="flex items-center justify-between space-mx-4">
+        <button @click="exportData" class=" rounded hover:bg-green-600 transition ml-6">
+            导出数据
+        </button>
+
+        <input type="file" id="fileInput" ref="fileInput" @change="handleFileChange" accept=".json" class="hidden">
+
+        <p v-if="state.isLoading" class="text-gray-500">
+            加载中...
+        </p>
+
+        <p v-if="state.errorMessage" class="text-red-500">
+            {{ state.errorMessage }}
+        </p>
+
+        <button @click="triggerFileInput" class=" rounded hover:bg-green-600 transition mr-6">
+            导入数据
+        </button>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const fileInput = ref(null);
+const selectedFile = ref<File | null>(null);
+const state = reactive({
+    isLoading: false,
+    errorMessage: ''
+});
+
+const clearError = () => {
+    state.errorMessage = '';
+};
+
+const exportData = () => {
+    state.isLoading = true;
+    clearError();
+    chrome.storage.local.get(null, items => {
+        const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(items));
+        const downloadAnchorNode = document.createElement('a');
+        downloadAnchorNode.setAttribute("href", dataStr);
+        downloadAnchorNode.setAttribute("download", "storage_data.json");
+        document.body.appendChild(downloadAnchorNode); // required for firefox
+        downloadAnchorNode.click();
+        downloadAnchorNode.remove();
+    });
+    state.isLoading = false;
+};
+
+const triggerFileInput = () => {
+    fileInput.value.click();
+};
+
+const handleFileChange = (event: Event) => {
+    try {
+        const target = event.target as HTMLInputElement;
+        if (target.files) {
+            selectedFile.value = target.files[0];
+            importData();
+        }
+    } catch (error) {
+        state.errorMessage = '文件读取失败: ' + error.message;
+    }
+};
+
+const importStorageData = (data: string) => {
+    try {
+        const jsonData = JSON.parse(data);
+        chrome.storage.local.set(jsonData, () => {
+            if (chrome.runtime.lastError) {
+                console.error("无法保存数据:", chrome.runtime.lastError);
+            } else {
+                console.log("数据成功导入");
+            }
+        });
+    } catch (error: any) {
+        state.errorMessage = '数据解析失败: ' + error.message;
+    }
+};
+
+const importData = () => {
+    state.isLoading = true;
+    clearError();
+    if (selectedFile.value) {
+        const reader = new FileReader();
+        reader.readAsText(selectedFile.value, "UTF-8");
+        reader.onload = evt => {
+            if (evt.target) {
+                const result = evt.target.result as string;
+                importStorageData(result);
+            }
+        };
+        reader.onerror = () => {
+            console.error("读取文件时发生错误");
+        };
+    }
+    state.isLoading = false;
+};
+</script>

src/popup/pages/index.vue

@@ -51,6 +51,7 @@
           <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold rounded mr-2 shadow-lg" @click="loadAllCookies">
             <img src="../../assets/LoadAllCookies.png" alt="Load All Cookies Icon" title="Load All Cookies"
               :class="imageClass" data-i18n-title="loadAllCookies"></button>
+              <StorageManager/>
           <!-- <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold rounded mr-2 p-2" @click="openOptions"
             data-i18n="options">
             Options</button> -->