refactor(core): 实现跨平台适配架构

Author: bealqiu

packages/app-mobile/src/components/settings/AppearanceSettings.tsx

@@ -31,12 +31,12 @@ export function AppearanceSettings() {
   }, [theme]);
 
   const handleLangChange = useCallback(
-    (code: string) => {
+    async (code: string) => {
       setLang(code);
-      i18n.changeLanguage(code);
-      localStorage.setItem("readany-lang", code);
+      const { changeAndPersistLanguage } = await import("@readany/core/i18n");
+      await changeAndPersistLanguage(code);
     },
-    [i18n],
+    [],
   );
 
   return (

packages/app-mobile/src/lib/platform/mobile-platform-service.ts

@@ -173,4 +173,54 @@ export class MobilePlatformService implements IPlatformService {
   async installUpdate() {
     // noop on mobile
   }
+
+  // ---- KV Storage (backed by localStorage in Tauri mobile WebView) ----
+
+  async kvGetItem(key: string): Promise<string | null> {
+    return localStorage.getItem(key);
+  }
+
+  async kvSetItem(key: string, value: string): Promise<void> {
+    localStorage.setItem(key, value);
+  }
+
+  async kvRemoveItem(key: string): Promise<void> {
+    localStorage.removeItem(key);
+  }
+
+  async kvGetAllKeys(): Promise<string[]> {
+    const keys: string[] = [];
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (key) keys.push(key);
+    }
+    return keys;
+  }
+
+  // ---- Clipboard ----
+
+  async copyToClipboard(content: string): Promise<void> {
+    await navigator.clipboard.writeText(content);
+  }
+
+  // ---- File sharing / download ----
+
+  async shareOrDownloadFile(
+    content: string,
+    filename: string,
+    mimeType: string,
+  ): Promise<void> {
+    const blob = new Blob([content], { type: `${mimeType};charset=utf-8` });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    a.style.display = "none";
+    document.body.appendChild(a);
+    a.click();
+    setTimeout(() => {
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    }, 100);
+  }
 }

packages/app-mobile/src/main.tsx

@@ -5,6 +5,7 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App";
 import "@readany/core/i18n";
+import { initI18nLanguage } from "@readany/core/i18n";
 import "./styles/globals.css";
 import { setPlatformService } from "@readany/core/services";
 import { MobilePlatformService } from "./lib/platform/mobile-platform-service";
@@ -14,6 +15,9 @@ const mobilePlatform = new MobilePlatformService();
 mobilePlatform.initSync().catch(console.error);
 setPlatformService(mobilePlatform);
 
+// Restore saved language from platform KV storage
+initI18nLanguage().catch(console.error);
+
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <App />

packages/app/src/components/settings/GeneralSettings.tsx

@@ -13,9 +13,9 @@ import { useTranslation } from "react-i18next";
 export function GeneralSettings() {
   const { t, i18n } = useTranslation();
 
-  const handleLanguageChange = (lang: string) => {
-    i18n.changeLanguage(lang);
-    localStorage.setItem("readany-lang", lang);
+  const handleLanguageChange = async (lang: string) => {
+    const { changeAndPersistLanguage } = await import("@readany/core/i18n");
+    await changeAndPersistLanguage(lang);
   };
 
   return (

packages/app/src/lib/platform/tauri-platform-service.ts

@@ -193,4 +193,54 @@ export class TauriPlatformService implements IPlatformService {
       await relaunch();
     }
   }
+
+  // ---- KV Storage (backed by localStorage on desktop/web) ----
+
+  async kvGetItem(key: string): Promise<string | null> {
+    return localStorage.getItem(key);
+  }
+
+  async kvSetItem(key: string, value: string): Promise<void> {
+    localStorage.setItem(key, value);
+  }
+
+  async kvRemoveItem(key: string): Promise<void> {
+    localStorage.removeItem(key);
+  }
+
+  async kvGetAllKeys(): Promise<string[]> {
+    const keys: string[] = [];
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (key) keys.push(key);
+    }
+    return keys;
+  }
+
+  // ---- Clipboard ----
+
+  async copyToClipboard(content: string): Promise<void> {
+    await navigator.clipboard.writeText(content);
+  }
+
+  // ---- File sharing / download ----
+
+  async shareOrDownloadFile(
+    content: string,
+    filename: string,
+    mimeType: string,
+  ): Promise<void> {
+    const blob = new Blob([content], { type: `${mimeType};charset=utf-8` });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    a.style.display = "none";
+    document.body.appendChild(a);
+    a.click();
+    setTimeout(() => {
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    }, 100);
+  }
 }

packages/app/src/main.tsx

@@ -5,6 +5,7 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App";
 import "@readany/core/i18n";
+import { initI18nLanguage } from "@readany/core/i18n";
 import "./styles/globals.css";
 import { useLibraryStore } from "./stores/library-store";
 import { flushAllWrites } from "./stores/persist";
@@ -16,6 +17,9 @@ const tauriPlatform = new TauriPlatformService();
 tauriPlatform.initSync().catch(console.error);
 setPlatformService(tauriPlatform);
 
+// Restore saved language from platform KV storage
+initI18nLanguage().catch(console.error);
+
 // Flush pending state writes before window closes
 window.addEventListener("beforeunload", () => {
   flushAllWrites();

packages/core/src/export/annotation-exporter.ts

@@ -1,8 +1,11 @@
 /**
  * Annotation Exporter — export highlights and notes in multiple formats
  * Supports: Markdown, JSON, Obsidian (with frontmatter), Notion (clipboard-friendly)
+ *
+ * Cross-platform: uses IPlatformService for file download and clipboard operations.
  */
 import type { Book, Highlight, Note } from "../types";
+import { getPlatformService } from "../services/platform";
 
 export type ExportFormat = "markdown" | "json" | "obsidian" | "notion";
 
@@ -47,29 +50,17 @@ export class AnnotationExporter {
     }
   }
 
-  /** Trigger a file download with the exported content */
-  downloadAsFile(content: string, filename: string, format: ExportFormat): void {
+  /** Trigger a file download / share with the exported content (cross-platform) */
+  async downloadAsFile(content: string, filename: string, format: ExportFormat): Promise<void> {
     const mimeType = format === "json" ? "application/json" : "text/markdown";
-    const blob = new Blob([content], { type: `${mimeType};charset=utf-8` });
-    const url = URL.createObjectURL(blob);
-
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = filename;
-    a.style.display = "none";
-    document.body.appendChild(a);
-    a.click();
-
-    // Cleanup
-    setTimeout(() => {
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url);
-    }, 100);
+    const platform = getPlatformService();
+    await platform.shareOrDownloadFile(content, filename, mimeType);
   }
 
-  /** Copy export content to clipboard */
+  /** Copy export content to clipboard (cross-platform) */
   async copyToClipboard(content: string): Promise<void> {
-    await navigator.clipboard.writeText(content);
+    const platform = getPlatformService();
+    await platform.copyToClipboard(content);
   }
 
   // --- Format implementations ---

packages/core/src/hooks/index.ts

@@ -6,7 +6,12 @@ export { useDrag } from "./use-drag";
 export { useThrottledValue, useThrottledCallback, useStreamingText } from "./use-throttled-value";
 export { useKeyboard } from "./use-keyboard";
 export { useTranslator, type UseTranslatorOptions } from "./useTranslator";
-export { useReadingSession } from "./use-reading-session";
+export {
+  useReadingSession,
+  setSessionEventSource,
+  webSessionEventSource,
+  type SessionEventSource,
+} from "./use-reading-session";
 export { useStreamingChat, type StreamingChatOptions, type StreamingState } from "./use-streaming-chat";
 
 // Reader hooks

packages/core/src/hooks/use-reading-session.ts

@@ -1,5 +1,9 @@
 /**
  * useReadingSession — reading session state machine hook
+ *
+ * Cross-platform: event listeners are provided by a SessionEventSource adapter.
+ * - Web: uses window/document event listeners (default)
+ * - React Native: inject an AppState-based adapter
  */
 import { type SessionEvent, createSessionDetector } from "../reader/session-detector";
 import { useReadingSessionStore } from "../stores/reading-session-store";
@@ -9,6 +13,50 @@ import { useCallback, useEffect, useRef } from "react";
 // Save session every 5 minutes
 const AUTO_SAVE_INTERVAL = 5 * 60 * 1000;
 
+/**
+ * Platform adapter for user activity / visibility / unload events.
+ * Each platform provides its own implementation.
+ */
+export interface SessionEventSource {
+  /** Subscribe to user activity events. Returns unsubscribe function. */
+  subscribeActivity(callback: () => void): () => void;
+  /** Subscribe to visibility changes. Returns unsubscribe function. */
+  subscribeVisibility(callback: (visible: boolean) => void): () => void;
+  /** Subscribe to app close / beforeunload. Returns unsubscribe function. */
+  subscribeBeforeUnload(callback: () => void): () => void;
+}
+
+/** Default Web implementation using window/document events */
+export const webSessionEventSource: SessionEventSource = {
+  subscribeActivity(callback) {
+    const events = ["mousemove", "keydown", "scroll", "click", "touchstart"] as const;
+    for (const evt of events) {
+      window.addEventListener(evt, callback);
+    }
+    return () => {
+      for (const evt of events) {
+        window.removeEventListener(evt, callback);
+      }
+    };
+  },
+  subscribeVisibility(callback) {
+    const handler = () => callback(!document.hidden);
+    document.addEventListener("visibilitychange", handler);
+    return () => document.removeEventListener("visibilitychange", handler);
+  },
+  subscribeBeforeUnload(callback) {
+    window.addEventListener("beforeunload", callback);
+    return () => window.removeEventListener("beforeunload", callback);
+  },
+};
+
+/** Global override — set by platforms that cannot use web events (e.g. React Native) */
+let _sessionEventSource: SessionEventSource = webSessionEventSource;
+
+export function setSessionEventSource(source: SessionEventSource): void {
+  _sessionEventSource = source;
+}
+
 export function useReadingSession(bookId: string | null, tabId?: string) {
   const { startSession, pauseSession, resumeSession, stopSession, updateActiveTime, saveCurrentSession } =
     useReadingSessionStore();
@@ -56,24 +104,19 @@ export function useReadingSession(bookId: string | null, tabId?: string) {
   useEffect(() => {
     if (!bookId) return;
 
+    const source = _sessionEventSource;
+
     const onActivity = () => {
       if (useAppStore.getState().activeTabId === tabId || !tabId) {
         sendEvent({ type: "activity" });
       }
     };
-    const onVisibility = () => sendEvent({ type: "visibility", visible: !document.hidden });
-    
-    const onBeforeUnload = () => {
-      stopSession();
-    };
 
-    window.addEventListener("mousemove", onActivity);
-    window.addEventListener("keydown", onActivity);
-    window.addEventListener("scroll", onActivity);
-    window.addEventListener("click", onActivity);
-    window.addEventListener("touchstart", onActivity);
-    document.addEventListener("visibilitychange", onVisibility);
-    window.addEventListener("beforeunload", onBeforeUnload);
+    const unsubActivity = source.subscribeActivity(onActivity);
+    const unsubVisibility = source.subscribeVisibility((visible) =>
+      sendEvent({ type: "visibility", visible }),
+    );
+    const unsubUnload = source.subscribeBeforeUnload(() => stopSession());
 
     sendEvent({ type: "activity" });
 
@@ -98,13 +141,9 @@ export function useReadingSession(bookId: string | null, tabId?: string) {
     }, 1000);
 
     return () => {
-      window.removeEventListener("mousemove", onActivity);
-      window.removeEventListener("keydown", onActivity);
-      window.removeEventListener("scroll", onActivity);
-      window.removeEventListener("click", onActivity);
-      window.removeEventListener("touchstart", onActivity);
-      document.removeEventListener("visibilitychange", onVisibility);
-      window.removeEventListener("beforeunload", onBeforeUnload);
+      unsubActivity();
+      unsubVisibility();
+      unsubUnload();
       clearInterval(timer);
       sendEvent({ type: "close" });
     };

packages/core/src/hooks/useTranslator.ts

@@ -35,14 +35,16 @@ export function useTranslator(options: UseTranslatorOptions = {}) {
 
       const cachedResults: string[] = [];
       const needsTranslation: { index: number; text: string }[] = [];
-      textsToTranslate.forEach((text, index) => {
-        const cached = getFromCache(text, sourceLang, targetLanguage, providerId);
-        if (cached) {
-          cachedResults[index] = cached;
-        } else {
-          needsTranslation.push({ index, text });
-        }
-      });
+      await Promise.all(
+        textsToTranslate.map(async (text, index) => {
+          const cached = await getFromCache(text, sourceLang, targetLanguage, providerId);
+          if (cached) {
+            cachedResults[index] = cached;
+          } else {
+            needsTranslation.push({ index, text });
+          }
+        }),
+      );
 
       if (needsTranslation.length === 0) {
         return textsToTranslate.map((_, i) => cachedResults[i] || "");
@@ -86,11 +88,13 @@ export function useTranslator(options: UseTranslatorOptions = {}) {
           throw new Error(`Unknown translation provider: ${providerId}`);
         }
 
-        needsTranslation.forEach(({ text }, i) => {
-          if (translatedTexts[i]) {
-            storeInCache(text, translatedTexts[i], sourceLang, targetLanguage, providerId);
-          }
-        });
+        await Promise.all(
+          needsTranslation.map(async ({ text }, i) => {
+            if (translatedTexts[i]) {
+              await storeInCache(text, translatedTexts[i], sourceLang, targetLanguage, providerId);
+            }
+          }),
+        );
 
         const results = [...textsToTranslate];
         cachedResults.forEach((cached, i) => {