From 5fc0dbaa1d08910792e5bee320cbc4f2be70efe7 Mon Sep 17 00:00:00 2001
From: Zyronon <zyronon@163.com>
Date: Tue, 18 Nov 2025 01:35:27 +0800
Subject: [PATCH] save

---
 public/migrate.html     | 221 +++++++++++-----------------------------
 public/static-home.html | 155 ++++++++++++----------------
 src/App.vue             | 186 +--------------------------------
 3 files changed, 123 insertions(+), 439 deletions(-)
diff --git a/public/migrate.html b/public/migrate.html
index d155252e..1d99d837 100644
--- a/public/migrate.html
+++ b/public/migrate.html
@@ -1,30 +1,11 @@
 <!DOCTYPE html>
-<html lang="zh-CN">
+<html lang="en">
 <head>
-    <meta charset="UTF-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <title>TypeWords 数据迁移</title>
-    <style>
-        body {
-            font-family: sans-serif;
-            padding: 20px;
-        }
-
-        button {
-            padding: 10px 20px;
-            font-size: 16px;
-        }
-
-        pre {
-            background: #f7f7f7;
-            padding: 10px;
-            border-radius: 4px;
-        }
-    </style>
+    <meta charset="UTF-8">
+    <title>TypeWords 数据迁移（旧域名）</title>
 </head>
 <body>
-<h2>TypeWords 数据迁移（旧域名）</h2>
-<p>等待新域名发送迁移指令 ...</p>
+<h2>等待新域名发送迁移指令...</h2>
 <pre id="log"></pre>
 
 <script>
@@ -33,154 +14,66 @@
     document.getElementById('log').textContent += msg + "\n";
   }
 
-  let dbReadyPromise = null;
-  let name = 'keyval-store';
-  let keys = [
-    'type-words-app-version',
-    'typing-word-dict',
-    'typing-word-setting',
-    'typing-word-files'
-  ]
-
-  function openDB(dbName, keys) {
-    if (dbReadyPromise) return dbReadyPromise;
-
-    dbReadyPromise = new Promise((resolve, reject) => {
-      const request = indexedDB.open(dbName, 1);
-
-      request.onupgradeneeded = (event) => {
-        const db = event.target.result;
-
-        keys.forEach((name) => {
-          if (!db.objectStoreNames.contains(name)) {
-            db.createObjectStore(name);
-          }
-        });
+  // 1️⃣ 先动态加载 idb-keyval
+  function loadIDBKeyval() {
+    return new Promise((resolve) => {
+      let script = document.createElement("script");
+      script.src = 'https://cdn.jsdelivr.net/npm/idb-keyval@6.2.2/dist/umd.js';
+      script.onload = function () {
+        log("idb-keyval 加载完成");
+        resolve(window.idbKeyval);
       };
-
-      request.onsuccess = () => resolve(request.result);
-      request.onerror = () => reject(request.error);
-    });
-
-    return dbReadyPromise;
-  }
-
-  openDB(name, keys)
-
-  // --- localStorage 读取 ---
-  function readLocalStorageKeys(keys) {
-    const out = {};
-    keys.forEach(k => {
-      out[k] = localStorage.getItem(k);
-    });
-    return out;
-  }
-
-  // --- IndexedDB（兼容 idb-keyval）读取 ---
-  function readIndexedDBCompatible(dbName, keys) {
-    return new Promise(async (resolve) => {
-      const db = await openDB(dbName, keys);
-      const stores = Array.from(db.objectStoreNames);
-
-      if (stores.length === 0) {
-        db.close();
-        tryOpenKeyvalDefault();
-        return;
-      }
-
-      if (stores.length === 1 && stores[0] === 'keyval') {
-        readFromKeyvalDB(db).then(result => {
-          db.close();
-          resolve(result);
-        });
-      } else {
-        readFromMultipleStores(db, stores).then(result => {
-          db.close();
-          resolve(result);
-        });
-      }
-
-      function tryOpenKeyvalDefault() {
-        const req = indexedDB.open('keyval');
-        req.onerror = () => resolve({indexedDB: {}, reason: 'no-db'});
-        req.onsuccess = function () {
-          const db2 = req.result;
-          readFromKeyvalDB(db2).then(result => {
-            db2.close();
-            resolve(result);
-          });
-        };
-      }
-
-      function readFromKeyvalDB(db) {
-        return new Promise((res) => {
-          const tx = db.transaction('keyval', 'readonly');
-          const store = tx.objectStore('keyval');
-
-          const out = {};
-          let finished = 0;
-          keys.forEach(k => {
-            const r = store.get(k);
-            r.onsuccess = () => {
-              out[k] = r.result ?? null;
-              if (++finished === keys.length) res({indexedDB: out});
-            };
-            r.onerror = () => {
-              out[k] = null;
-              if (++finished === keys.length) res({indexedDB: out});
-            };
-          });
-        });
-      }
-
-      function readFromMultipleStores(db, stores) {
-        return new Promise(res => {
-          const result = {};
-          let count = 0;
-          stores.forEach(storeName => {
-            try {
-              const tx = db.transaction(storeName, 'readonly');
-              const store = tx.objectStore(storeName);
-              const req = store.getAll();
-
-              req.onsuccess = () => {
-                result[storeName] = req.result;
-                if (++count === stores.length) res({indexedDB: result});
-              };
-              req.onerror = () => {
-                result[storeName] = [];
-                if (++count === stores.length) res({indexedDB: result});
-              };
-            } catch {
-              result[storeName] = [];
-              if (++count === stores.length) res({indexedDB: result});
-            }
-          });
-        });
-      }
+      document.head.appendChild(script);
     });
   }
 
-  async function readAllStorageForMigration() {
-    const local = readLocalStorageKeys(['PracticeSaveWord', 'PracticeSaveArticle']);
-    const indexed = await readIndexedDBCompatible(name, keys);
-    return {localStorage: local, indexedDB: indexed.indexedDB ?? {}};
-  }
+  // 2️⃣ 读取 IndexedDB
+  async function readAllStorageForMigration(db) {
+    // localStorage 数据
+    const localStorageData = {
+      PracticeSaveWord: localStorage.getItem('PracticeSaveWord'),
+      PracticeSaveArticle: localStorage.getItem('PracticeSaveArticle')
+    };
 
-  // =====================
-  // 🔥 自动监听迁移指令
-  // =====================
-  window.addEventListener('message', async (event) => {
-    if (event.data?.type === 'REQUEST_MIGRATION_DATA') {
-      log('收到迁移指令，开始读取本地数据...');
-      const data = await readAllStorageForMigration();
-      log('读取完成，开始发送数据到新域名');
+    // IndexedDB 数据，key 对应你的老项目
+    const keys = [
+      'type-words-app-version',
+      'typing-word-dict',
+      'typing-word-setting',
+      'typing-word-files'
+    ];
 
-      event.source.postMessage({type: 'MIGRATE_DATA', payload: data}, event.origin);
-
-      log('已发送迁移数据');
+    const indexedDBData = {};
+    for (let key of keys) {
+      indexedDBData[key] = await db.get(key);
     }
+
+    return {
+      localStorage: localStorageData,
+      indexedDB: indexedDBData
+    };
+  }
+
+  // 3️⃣ 接收新域名指令
+  window.addEventListener('message', async (event) => {
+    if (event.data?.type !== 'REQUEST_MIGRATION_DATA') return;
+
+    // 安全校验 origin，可选
+    // if (event.origin !== 'https://typewords.cc') return;
+
+    log("收到迁移指令，开始读取数据...");
+
+    const db = await loadIDBKeyval(); // 确保 idb-keyval 已经加载
+    const data = await readAllStorageForMigration(db);
+
+    log("读取完成，发送数据给新域名");
+    event.source.postMessage({
+      type: 'MIGRATION_RESULT',
+      payload: data
+    }, event.origin);
+
+    log("已发送迁移数据");
   });
 </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/public/static-home.html b/public/static-home.html
index 22d7049d..5d2e297e 100644
--- a/public/static-home.html
+++ b/public/static-home.html
@@ -326,122 +326,97 @@
     </script>
 
     <script>
-      // 旧域名
-      const OLD_ORIGIN = "https://2study.top";
+      // 旧域名地址
+      const OLD_ORIGIN = 'https://2study.top';
 
-      // 需要迁移的 IndexedDB store 名称
-      const IDB_STORE_NAMES = [
-        "type-words-app-version",
-        "typing-word-dict",
-        "typing-word-setting",
-        "typing-word-files",
+      // 需要迁移的 IndexedDB key
+      const IDB_KEYS = [
+        'type-words-app-version',
+        'typing-word-dict',
+        'typing-word-setting',
+        'typing-word-files'
       ];
 
       // 需要迁移的 localStorage key
       const LS_KEYS = [
-        "PracticeSaveWord",
-        "PracticeSaveArticle"
+        'PracticeSaveWord',
+        'PracticeSaveArticle'
       ];
-      let key = 'keyval-store'
 
-      // 打开或创建新的 IndexedDB
-      function openIndexedDB() {
-        return new Promise((resolve, reject) => {
-          const request = indexedDB.open(key, 1);
+      // 1️⃣ 动态加载 idb-keyval
+      function loadIDBKeyval() {
+        return new Promise((resolve) => {
+          if (window.idbKeyval) return resolve(window.idbKeyval);
 
-          request.onupgradeneeded = (event) => {
-            const db = event.target.result;
-            IDB_STORE_NAMES.forEach((storeName) => {
-              if (!db.objectStoreNames.contains(storeName)) {
-                db.createObjectStore(storeName);
+          const script = document.createElement('script');
+          script.src = 'https://cdn.jsdelivr.net/npm/idb-keyval@6.2.2/dist/umd.js';
+          script.onload = () => resolve(window.idbKeyval);
+          document.head.appendChild(script);
+        });
+      }
+
+      // 2️⃣ 创建 iframe 并发送迁移请求
+      async function migrateFromOldSite() {
+        return new Promise(async (resolve, reject) => {
+          const db = await loadIDBKeyval();
+
+          const iframe = document.createElement('iframe');
+          iframe.style.display = 'none';
+          iframe.src = `${OLD_ORIGIN}/migrate.html`;
+
+          // 安全接收旧域名返回的数据
+          function onMessage(event) {
+            if (event.data?.type !== 'MIGRATION_RESULT') return;
+
+            const payload = event.data.payload;
+
+            // 写入 localStorage
+            LS_KEYS.forEach(key => {
+              if (payload.localStorage[key] !== undefined) {
+                localStorage.setItem(key, payload.localStorage[key]);
               }
             });
-          };
 
-          request.onsuccess = () => resolve(request.result);
-          request.onerror = () => reject(request.error);
-        });
-      }
-
-      // 写入数据到 IndexedDB
-      async function writeToIndexedDB(data) {
-        const db = await openIndexedDB();
-
-        return new Promise((resolve, reject) => {
-          const tx = db.transaction(IDB_STORE_NAMES, "readwrite");
-
-          for (const storeName of IDB_STORE_NAMES) {
-            const store = tx.objectStore(storeName);
-            const value = data.indexedDB[storeName];
-            if (value !== undefined) {
-              store.put(value, "value");
-            }
-          }
-
-          tx.oncomplete = () => resolve();
-          tx.onerror = () => reject(tx.error);
-        });
-      }
-
-      // 写入 LocalStorage
-      function writeToLocalStorage(data) {
-        for (const key of LS_KEYS) {
-          if (data.localStorage[key] !== undefined) {
-            localStorage.setItem(key, data.localStorage[key]);
-          }
-        }
-      }
-
-      // ---- 主逻辑 ----
-
-      async function migrateFromOldSite() {
-        return new Promise((resolve) => {
-          // 创建隐藏 iframe
-          const iframe = document.createElement("iframe");
-          iframe.style.display = "none";
-          iframe.src = `${OLD_ORIGIN}/migrate.html`;
-          document.body.appendChild(iframe);
-
-          // 接收旧域名的数据
-          window.addEventListener("message", async (event) => {
-            if (event.data.type !== "MIGRATE_RESULT") return;
-            const payload = event.data.payload;
-            // 写入 LocalStorage
-            writeToLocalStorage(payload);
             // 写入 IndexedDB
-            await writeToIndexedDB(payload);
-            // 清理 iframe
-            iframe.remove();
+            (async () => {
+              for (let key of IDB_KEYS) {
+                if (payload.indexedDB[key] !== undefined) {
+                  await db.set(key, payload.indexedDB[key]);
+                }
+              }
 
-            resolve(true);
-          });
+              // 清理
+              window.removeEventListener('message', onMessage);
+              iframe.remove();
+              resolve(true);
+            })();
+          }
 
-          iframe.onload = function () {
-            setTimeout(()=>{
-              iframe.contentWindow.postMessage({type: "REQUEST_MIGRATION_DATA"}, OLD_ORIGIN);
-            },3000)
+          window.addEventListener('message', onMessage);
+
+          // 等 iframe 加载完成再发请求
+          iframe.onload = () => {
+            iframe.contentWindow.postMessage({type: 'REQUEST_MIGRATION_DATA'}, OLD_ORIGIN);
           };
+
+          document.body.appendChild(iframe);
         });
       }
 
-
       if (location.href === 'https://typewords.cc/') {
         window.addEventListener("DOMContentLoaded", () => {
+          // 3️⃣ 自动执行迁移（只执行一次）
           (async () => {
-            // 避免重复迁移
-            if (localStorage.getItem("__migrated_from_2study_top__")) {
-              console.log("数据已迁移过");
-              return;
-            }
+            if (localStorage.getItem('__migrated_from_2study_top__')) return;
 
-            console.log("开始从旧域名迁移数据…");
+            console.log('开始从旧域名迁移数据…');
 
             try {
               await migrateFromOldSite();
-              localStorage.setItem("__migrated_from_2study_top__", "1");
-              console.log("迁移完成");
+              localStorage.setItem('__migrated_from_2study_top__', '1');
+              console.log('迁移完成');
             } catch (e) {
-              console.error("迁移失败", e);
+              console.error('迁移失败', e);
             }
           })();
         });
diff --git a/src/App.vue b/src/App.vue
index 0198f88d..a6ebf175 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,7 @@ import { BaseState, useBaseStore } from "@/stores/base.ts";
 import { useRuntimeStore } from "@/stores/runtime.ts";
 import { useSettingStore } from "@/stores/setting.ts";
 import useTheme from "@/hooks/theme.ts";
-import { shakeCommonDict } from "@/utils";
+import { loadJsLib, shakeCommonDict } from "@/utils";
 import { get, set } from 'idb-keyval'
 
 import { useRoute } from "vue-router";
@@ -77,190 +77,6 @@ async function init() {
 
 onMounted(init)
 
-onMounted(() => {
-  let key = 'keyval-store'
-
-  // keys: 你想读取的 idb key 列表
-  async function readIndexedDBCompatible(dbName = 'type-words', keys = [
-    'type-words-app-version',
-    'typing-word-dict',
-    'typing-word-setting',
-    'typing-word-files'
-  ]) {
-    // 尝试打开数据库；如果不存在则会触发 onerror 或返回空
-    return new Promise((resolve, reject) => {
-      const openReq = indexedDB.open(dbName);
-
-      openReq.onerror = function () {
-        // 如果按 dbName 打不开，再尝试 idb-keyval 默认 db 名：'keyval'
-        tryOpenKeyvalDefault();
-      };
-
-      openReq.onsuccess = function () {
-        const db = openReq.result;
-        // 列出所有 objectStoreNames
-        const stores = Array.from(db.objectStoreNames);
-        if (stores.length === 0) {
-          db.close();
-          // 没有 store，尝试 idb-keyval 默认 db
-          tryOpenKeyvalDefault();
-          return;
-        }
-
-        // 如果只有 keyval（idb-keyval 常见情况），直接按 key 获取
-        if (stores.length === 1 && stores[0] === 'keyval') {
-          readFromKeyvalDB(db, keys).then(result => {
-            db.close();
-            resolve(result);
-          }).catch(err => {
-            db.close();
-            reject(err);
-          });
-        } else {
-          // 否则尝试按每个 store 名读取全部（兼容之前代码）
-          readFromMultipleStores(db, stores).then(result => {
-            db.close();
-            resolve(result);
-          }).catch(err => {
-            db.close();
-            reject(err);
-          });
-        }
-      };
-
-      function tryOpenKeyvalDefault() {
-        const req2 = indexedDB.open('keyval');
-        req2.onerror = function () {
-          // 两种尝试都失败，返回空结果而不是抛错（容错）
-          resolve({indexedDB: {}, reason: 'no-db'});
-        };
-        req2.onsuccess = function () {
-          const db2 = req2.result;
-          readFromKeyvalDB(db2, keys).then(result => {
-            db2.close();
-            resolve(result);
-          }).catch(err => {
-            db2.close();
-            reject(err);
-          });
-        };
-      }
-
-      function readFromKeyvalDB(db, keysToRead) {
-        return new Promise((res, rej) => {
-          const tx = db.transaction('keyval', 'readonly');
-          const store = tx.objectStore('keyval');
-          const out = {};
-          let done = 0;
-
-          keysToRead.forEach(k => {
-            const r = store.get(k);
-            r.onsuccess = function (e) {
-              out[k] = e.target.result === undefined ? null : e.target.result;
-              done++;
-              if (done === keysToRead.length) res({indexedDB: out});
-            };
-            r.onerror = function (e) {
-              out[k] = null;
-              done++;
-              if (done === keysToRead.length) res({indexedDB: out});
-            };
-          });
-
-          // 如果 keysToRead 为空，直接返回空对象
-          if (keysToRead.length === 0) res({indexedDB: {}});
-        });
-      }
-
-      function readFromMultipleStores(db, stores) {
-        return new Promise((res, rej) => {
-          const result = {};
-          let idx = 0;
-          stores.forEach(storeName => {
-            try {
-              const tx = db.transaction(storeName, 'readonly');
-              const store = tx.objectStore(storeName);
-              const getAllReq = store.getAll();
-              getAllReq.onsuccess = function (e) {
-                result[storeName] = e.target.result;
-                idx++;
-                if (idx === stores.length) res({indexedDB: result});
-              };
-              getAllReq.onerror = function () {
-                result[storeName] = [];
-                idx++;
-                if (idx === stores.length) res({indexedDB: result});
-              };
-            } catch (err) {
-              // 可能 store 不存在或其它问题
-              result[storeName] = [];
-              idx++;
-              if (idx === stores.length) res({indexedDB: result});
-            }
-          });
-          if (stores.length === 0) res({indexedDB: {}});
-        });
-      }
-    });
-  }
-
-// 读取 localStorage 的指定 keys
-  function readLocalStorageKeys(keys = ['PracticeSaveWord', 'PracticeSaveArticle']) {
-    const out = {};
-    keys.forEach(k => {
-      out[k] = localStorage.getItem(k);
-    });
-    return out;
-  }
-
-// 汇总读取：localStorage + IndexedDB（兼容 idb-keyval）
-  async function readAllStorageForMigration() {
-    const local = readLocalStorageKeys(['PracticeSaveWord', 'PracticeSaveArticle']);
-    // 这里 dbName 传 'type-words'（你之前创建的）或也可以尝试 'keyval'，函数内部会降级尝试
-    const indexed = await readIndexedDBCompatible(key, [
-      'type-words-app-version',
-      'typing-word-dict',
-      'typing-word-setting',
-      'typing-word-files'
-    ]);
-    return {
-      localStorage: local,
-      indexedDB: indexed.indexedDB || {}
-    };
-  }
-
-
-  // if (!OLD_ORIGIN){
-  //   var OLD_ORIGIN = "https://2study.top";
-  // }
-  // // 创建隐藏 iframe
-  // const iframe = document.createElement("iframe");
-  // iframe.style.display = "none";
-  // iframe.src = `${OLD_ORIGIN}/migrate.html`;
-  // document.body.appendChild(iframe);
-  // // 接收旧域名的数据
-  // window.addEventListener("message", async (event) => {
-  //   if (event.data.type !== "MIGRATE_RESULT") return;
-  //   const payload = event.data.payload;
-  //   console.log('payload', payload)
-  // });
-  //
-  // iframe.onload = function () {
-  //   setTimeout(()=>{
-  //     iframe.contentWindow.postMessage({type: "REQUEST_MIGRATION_DATA"}, OLD_ORIGIN);
-  //   },3000)
-  // };
-
-
-// 使用示例（在老域名 2study.top 的控制台执行）：
-//   readAllStorageForMigration().then(result => {
-//     console.log('读取到的数据：', result);
-//   }).catch(err => {
-//     console.error('读取失败：', err);
-//   });
-})
-
-
 // let transitionName = $ref('go')
 // const route = useRoute()
 // watch(() => route.path, (to, from) => {
