From 76e5e7ba68c4f0759b7b5bcd9134a8190e8aaf12 Mon Sep 17 00:00:00 2001
From: Zyronon <zyronon@163.com>
Date: Tue, 18 Nov 2025 00:09:25 +0800
Subject: [PATCH] save

---
 public/migrate.html     | 180 ++++++++++++++++++++++++----------
 public/static-home.html | 208 +++++++++++++++++++++-------------------
 src/App.vue             | 206 ++++++++++++++++++++++++++++++++++-----
 3 files changed, 426 insertions(+), 168 deletions(-)
diff --git a/public/migrate.html b/public/migrate.html
index 0db735d0..1e896896 100644
--- a/public/migrate.html
+++ b/public/migrate.html
@@ -1,62 +1,146 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh-CN">
 <head>
-    <meta charset="UTF-8">
-    <title>Migrate Data</title>
+    <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>
 </head>
 <body>
-<script>
-  async function readIndexedDB() {
-    return new Promise((resolve, reject) => {
-      const request = indexedDB.open('keyval-store', 1); // 你的数据库名
-      request.onsuccess = function (event) {
-        const db = event.target.result;
-        const keys = ['typing-word-dict', 'typing-word-setting', 'typing-word-files','type-words-app-version'];
-        const tx = db.transaction(keys, 'readonly');
-        const result = {};
+<h2>TypeWords 数据迁移（旧域名）</h2>
+<p>等待新域名发送迁移指令 ...</p>
+<pre id="log"></pre>
 
-        let count = 0;
-        keys.forEach((storeName) => {
-          const store = tx.objectStore(storeName);
-          const allRequest = store.getAll();
-          allRequest.onsuccess = function (e) {
-            result[storeName] = e.target.result;
-            count++;
-            if (count === keys.length) {
-              resolve(result);
-            }
-          };
-          allRequest.onerror = function (e) {
-            result[storeName] = null;
-            count++;
-            if (count === keys.length) resolve(result);
-          };
+<script>
+  function log(msg) {
+    console.log(msg);
+    document.getElementById('log').textContent += msg + "\n";
+  }
+
+  // --- localStorage 读取 ---
+  function readLocalStorageKeys(keys) {
+    const out = {};
+    keys.forEach(k => { out[k] = localStorage.getItem(k); });
+    return out;
+  }
+
+  // --- IndexedDB（兼容 idb-keyval）读取 ---
+  function readIndexedDBCompatible(dbName, keys = [
+    'type-words-app-version',
+    'typing-word-dict',
+    'typing-word-setting',
+    'typing-word-files'
+  ]) {
+    return new Promise((resolve) => {
+      const openReq = indexedDB.open(dbName);
+
+      openReq.onerror = tryOpenKeyvalDefault;
+
+      openReq.onsuccess = function () {
+        const db = openReq.result;
+        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 });
+            };
+          });
         });
-      };
-      request.onerror = function (e) {
-        resolve({});
-      };
+      }
+
+      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 });
+            }
+          });
+        });
+      }
     });
   }
-  // 监听 postMessage
-  window.addEventListener('message', async (e) => {
-    if (e.data && e.data.type === 'requestData') {
-      const local = {};
-      ['PracticeSaveWord', 'PracticeSaveArticle'].forEach(key => {
-        local[key] = localStorage.getItem(key) || null;
-      });
 
-      const indexed = await readIndexedDB();
+  async function readAllStorageForMigration() {
+    const local = readLocalStorageKeys(['PracticeSaveWord', 'PracticeSaveArticle']);
+    const indexed = await readIndexedDBCompatible('keyval-store');
+    return { localStorage: local, indexedDB: indexed.indexedDB ?? {} };
+  }
 
-      // 回复新域名
-      e.source.postMessage({
-        type: 'responseData',
-        localStorageData: local,
-        indexedDBData: indexed
-      }, e.origin);
+  // =====================
+  // 🔥 自动监听迁移指令
+  // =====================
+  window.addEventListener('message', async (event) => {
+    if (event.data?.type === 'REQUEST_MIGRATION_DATA') {
+      log('收到迁移指令，开始读取本地数据...');
+      const data = await readAllStorageForMigration();
+      log('读取完成，开始发送数据到新域名');
+
+      event.source.postMessage({ type: 'MIGRATE_DATA', payload: data }, event.origin);
+
+      log('已发送迁移数据');
     }
   });
-
 </script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/public/static-home.html b/public/static-home.html
index fe9f2f0f..fe6bd0d4 100644
--- a/public/static-home.html
+++ b/public/static-home.html
@@ -326,111 +326,125 @@
     </script>
 
     <script>
-      function migrateFromOldDomain() {
+      // 旧域名
+      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",
+      ];
+
+      // 需要迁移的 localStorage key
+      const LS_KEYS = [
+        "PracticeSaveWord",
+        "PracticeSaveArticle"
+      ];
+      let key = 'keyval-store'
+
+      // 打开或创建新的 IndexedDB
+      function openIndexedDB() {
         return new Promise((resolve, reject) => {
-          const OLD_ORIGIN = 'https://2study.top';
-          const iframe = document.createElement('iframe');
-          iframe.style.display = 'none';
-          iframe.src = OLD_ORIGIN + '/migrate.html';
+          const request = indexedDB.open(key, 1);
 
-          // 超时保护
-          const TIMEOUT = 15000;
-          const timeoutId = setTimeout(() => {
-            cleanup();
-            reject(new Error('迁移超时：未收到老域名响应'));
-          }, TIMEOUT);
-
-          // 确保先监听消息
-          function messageHandler(e) {
-            try {
-              // 校验来源
-              if (e.origin !== OLD_ORIGIN) return;
-              if (!e.data || e.data.type !== 'responseData') return;
-
-              // 写 localStorage
-              const local = e.data.localStorageData || {};
-              for (const key in local) {
-                if (local[key] !== null) localStorage.setItem(key, local[key]);
+          request.onupgradeneeded = (event) => {
+            const db = event.target.result;
+            IDB_STORE_NAMES.forEach((storeName) => {
+              if (!db.objectStoreNames.contains(storeName)) {
+                db.createObjectStore(storeName);
               }
-
-              // 写 IndexedDB（简单实现：覆盖写入）
-              const indexed = e.data.indexedDBData || {};
-              const req = indexedDB.open('keyval-store', 1);
-
-              const keys = ['typing-word-dict', 'typing-word-setting', 'typing-word-files', 'type-words-app-version'];
-              req.onupgradeneeded = function (ev) {
-                const db = ev.target.result;
-                keys.forEach(name => {
-                  if (!db.objectStoreNames.contains(name)) {
-                    db.createObjectStore(name, {autoIncrement: true});
-                  }
-                });
-              };
-              req.onsuccess = function (ev) {
-                const db = ev.target.result;
-                const tx = db.transaction(keys, 'readwrite');
-                tx.oncomplete = function () {
-                  clearTimeout(timeoutId);
-                  cleanup();
-                  resolve(true);
-                };
-                tx.onerror = function () {
-                  clearTimeout(timeoutId);
-                  cleanup();
-                  reject(new Error('写入 IndexedDB 出错'));
-                };
-                for (const storeName in indexed) {
-                  const items = indexed[storeName];
-                  if (Array.isArray(items)) {
-                    const store = tx.objectStore(storeName);
-                    items.forEach(item => {
-                      // 如果你的对象有主键 id，请改用 put(item, id)
-                      store.put(item);
-                    });
-                  }
-                }
-              };
-              req.onerror = function () {
-                clearTimeout(timeoutId);
-                cleanup();
-                reject(new Error('打开 IndexedDB 失败'));
-              };
-            } catch (err) {
-              clearTimeout(timeoutId);
-              cleanup();
-              reject(err);
-            }
-          }
-
-          function cleanup() {
-            window.removeEventListener('message', messageHandler);
-            if (iframe.parentNode) iframe.parentNode.removeChild(iframe);
-          }
-
-          window.addEventListener('message', messageHandler);
-
-          // 把 iframe 插入 DOM，等待加载完成再发请求
-          iframe.onload = function () {
-            // 此时 iframe.contentWindow 应该可用，向老域名发送请求
-            try {
-              iframe.contentWindow.postMessage({type: 'requestData'}, OLD_ORIGIN);
-            } catch (err) {
-              clearTimeout(timeoutId);
-              cleanup();
-              reject(err);
-            }
+            });
           };
 
-          document.body.appendChild(iframe);
+          request.onsuccess = () => resolve(request.result);
+          request.onerror = () => reject(request.error);
         });
       }
 
-      // // 使用示例
-      // migrateFromOldDomain().then(() => {
-      //   console.log('迁移成功');
-      // }).catch(err => {
-      //   console.error('迁移失败', err);
-      // });
+      // 写入数据到 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();
+
+            resolve(true);
+          });
+
+          iframe.onload = () => {
+            // iframe 加载完成，发送命令
+            iframe.contentWindow.postMessage(
+              {type: "MIGRATE_REQUEST"},
+              OLD_ORIGIN
+            );
+          };
+        });
+      }
+
+      // 自动启动迁移（只执行一次）
+      (async () => {
+        // 避免重复迁移
+        if (localStorage.getItem("__migrated_from_2study_top__")) {
+          console.log("数据已迁移过");
+          return;
+        }
+
+        console.log("开始从旧域名迁移数据…");
+
+        try {
+          await migrateFromOldSite();
+          localStorage.setItem("__migrated_from_2study_top__", "1");
+          console.log("迁移完成");
+        } catch (e) {
+          console.error("迁移失败", e);
+        }
+      })();
+
 
       if (location.href === 'https://typewords.cc/') {
         document.onload = function () {
diff --git a/src/App.vue b/src/App.vue
index c6325637..8f22d5cb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,12 +17,12 @@ const store = useBaseStore()
 const runtimeStore = useRuntimeStore()
 const settingStore = useSettingStore()
 const userStore = useUserStore()
-const { setTheme } = useTheme()
+const {setTheme} = useTheme()
 
 let lastAudioFileIdList = []
 watch(store.$state, (n: BaseState) => {
   let data = shakeCommonDict(n)
-  set(SAVE_DICT_KEY.key, JSON.stringify({ val: data, version: SAVE_DICT_KEY.version }))
+  set(SAVE_DICT_KEY.key, JSON.stringify({val: data, version: SAVE_DICT_KEY.version}))
 
   //筛选自定义和收藏
   let bookList = data.article.bookList.filter(v => v.custom || [DictId.articleCollect].includes(v.id))
@@ -51,11 +51,11 @@ watch(store.$state, (n: BaseState) => {
 })
 
 watch(() => settingStore.$state, (n) => {
-  set(SAVE_SETTING_KEY.key, JSON.stringify({ val: n, version: SAVE_SETTING_KEY.version }))
+  set(SAVE_SETTING_KEY.key, JSON.stringify({val: n, version: SAVE_SETTING_KEY.version}))
   if (AppEnv.CAN_REQUEST) {
     syncSetting(null, settingStore.$state)
   }
-}, { deep: true })
+}, {deep: true})
 
 async function init() {
   await userStore.init()
@@ -66,37 +66,197 @@ async function init() {
   setTheme(settingStore.theme)
 
   if (settingStore.first) {
-    set(APP_VERSION.key,APP_VERSION.version)
-  }else {
+    set(APP_VERSION.key, APP_VERSION.version)
+  } else {
     get(APP_VERSION.key).then(r => {
       runtimeStore.isNew = r ? (APP_VERSION.version > Number(r)) : true
     })
   }
-  window.umami?.track('host', { host: window.location.host })
+  window.umami?.track('host', {host: window.location.host})
 }
 
 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 || {}
+    };
+  }
+
+// 使用示例（在老域名 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) => {
 //   return transitionName = ''
-  // console.log('watch', to, from)
-  // //footer下面的5个按钮，对跳不要用动画
-  // let noAnimation = [
-  //   '/pc/practice',
-  //   '/pc/dict',
-  //   '/mobile',
-  //   '/'
-  // ]
-  // if (noAnimation.indexOf(from) !== -1 && noAnimation.indexOf(to) !== -1) {
-  //   return transitionName = ''
-  // }
-  //
-  // const toDepth = routes.findIndex(v => v.path === to)
-  // const fromDepth = routes.findIndex(v => v.path === from)
-  // transitionName = toDepth > fromDepth ? 'go' : 'back'
-  // console.log('transitionName', transitionName, toDepth, fromDepth)
+// console.log('watch', to, from)
+// //footer下面的5个按钮，对跳不要用动画
+// let noAnimation = [
+//   '/pc/practice',
+//   '/pc/dict',
+//   '/mobile',
+//   '/'
+// ]
+// if (noAnimation.indexOf(from) !== -1 && noAnimation.indexOf(to) !== -1) {
+//   return transitionName = ''
+// }
+//
+// const toDepth = routes.findIndex(v => v.path === to)
+// const fromDepth = routes.findIndex(v => v.path === from)
+// transitionName = toDepth > fromDepth ? 'go' : 'back'
+// console.log('transitionName', transitionName, toDepth, fromDepth)
 // })
 </script>
 
