Fix web version compatibility - remove Tauri dependencies for web environment

Author: xiaojunjun

src/App.vue

@@ -12,6 +12,9 @@ const isSettingsOpen = ref(false);
 const settingsStore = useSettingsStore();
 const tabsStore = useTabsStore();
 
+// Check if we're running in a web environment
+const isWeb = typeof window !== 'undefined' && !window.__TAURI__;
+
 // Watch for theme changes and apply them to the body element
 watchEffect(() => {
   document.body.dataset.theme = settingsStore.theme;
@@ -21,11 +24,13 @@ watchEffect(() => {
 onMounted(() => {
   tabsStore.setup_menu_listeners();
   
-  // Listen for menu events from native menu and system tray
-  listen("menu-event", (event) => {
-    const menuId = event.payload as string;
-    handleMenuEvent(menuId);
-  });
+  // Listen for menu events from native menu and system tray (Tauri only)
+  if (!isWeb) {
+    listen("menu-event", (event) => {
+      const menuId = event.payload as string;
+      handleMenuEvent(menuId);
+    });
+  }
 });
 
 const handleMenuEvent = (menuId: string) => {

src/components/EditorArea.vue

@@ -18,6 +18,9 @@ const editorRef = ref<HTMLTextAreaElement | null>(null);
 const lineNumbersRef = ref<HTMLDivElement | null>(null);
 let unlisten: UnlistenFn | null = null;
 
+// Check if we're running in a web environment
+const isWeb = typeof window !== 'undefined' && !window.__TAURI__;
+
 const activeTab = computed(() => tabsStore.activeTab);
 
 const lineCount = computed(() => {
@@ -40,12 +43,14 @@ const syncScroll = () => {
 };
 
 onMounted(async () => {
-  // Listen for the custom file drop event from the Rust backend
-  unlisten = await listen<string[]>("custom-file-drop", (event) => {
-    for (const filePath of event.payload) {
-      tabsStore.openSpecificFile(filePath);
-    }
-  });
+  // Listen for the custom file drop event from the Rust backend (Tauri only)
+  if (!isWeb) {
+    unlisten = await listen<string[]>("custom-file-drop", (event) => {
+      for (const filePath of event.payload) {
+        tabsStore.openSpecificFile(filePath);
+      }
+    });
+  }
 });
 
 onBeforeUnmount(() => {

src/components/SettingsModal.vue

@@ -7,6 +7,9 @@ import { invoke } from "@tauri-apps/api/tauri";
 const { t, i18next } = useTranslation();
 const settingsStore = useSettingsStore();
 
+// Check if we're running in a web environment
+const isWeb = typeof window !== 'undefined' && !window.__TAURI__;
+
 // Local state for form values
 const localTheme = ref<Theme>("light");
 const localLanguage = ref("en");
@@ -67,7 +70,11 @@ const saveSettings = async () => {
     settingsStore.newNoteShortcut = getShortcutString(localShortcutKeys.value);
     settingsStore.closeTabShortcut = getShortcutString(localCloseTabShortcutKeys.value);
     settingsStore.toggleWindowShortcut = getShortcutString(localToggleWindowShortcutKeys.value);
-    await settingsStore.save_all_settings();
+    
+    if (!isWeb) {
+      await settingsStore.save_all_settings();
+    }
+    
     if (localLanguage.value !== i18next.language) {
       i18next.changeLanguage(localLanguage.value);
     }
@@ -80,7 +87,19 @@ const saveSettings = async () => {
 
 const resetToDefaults = async () => {
   try {
-    await settingsStore.reset_settings();
+    if (!isWeb) {
+      await settingsStore.reset_settings();
+    } else {
+      // In web environment, just reset the local state
+      settingsStore.theme = "light";
+      settingsStore.language = "en";
+      settingsStore.defaultFormat = "txt";
+      settingsStore.defaultPath = null;
+      settingsStore.newNoteShortcut = "CmdOrCtrl+Option+T";
+      settingsStore.closeTabShortcut = "CmdOrCtrl+Option+Y";
+      settingsStore.toggleWindowShortcut = "CmdOrCtrl+Option+U";
+    }
+    
     localTheme.value = settingsStore.theme;
     localLanguage.value = settingsStore.language;
     localDefaultFormat.value = settingsStore.defaultFormat;
@@ -99,6 +118,12 @@ const resetToDefaults = async () => {
 };
 
 const browsePath = async () => {
+  if (isWeb) {
+    // In web environment, show a message that file operations are not available
+    alert("File operations are not available in the web version. Please download the desktop app for full functionality.");
+    return;
+  }
+
   try {
     const selectedPath = await invoke<string | null>("select_directory");
     if (selectedPath) {

src/components/TabBar.vue

@@ -6,6 +6,9 @@ import { appWindow } from "@tauri-apps/api/window";
 
 // Import Vue and utility functions
 
+// Check if we're running in a web environment
+const isWeb = typeof window !== 'undefined' && !window.__TAURI__;
+
 // Store reference to the tabs state
 const tabsStore = useTabsStore();
 const tabsContainer = ref<HTMLDivElement | null>(null);
@@ -44,7 +47,14 @@ const trafficLightSvg = (
 };
 
 // Only close (red) button has click handler; minimize and maximize are UI only
-const handleClose = () => appWindow.hide();
+const handleClose = () => {
+  if (!isWeb) {
+    appWindow.hide();
+  } else {
+    // In web environment, show a message
+    alert("This is a web demo. Please download the desktop app for full functionality.");
+  }
+};
 
 // Emit events for parent communication
 const emit = defineEmits<{

src/main.ts

@@ -12,9 +12,14 @@ async function main() {
   app.use(pinia);
   app.use(I18nextVue, { i18next });
 
-  // Initialize settings from the backend before mounting the app
-  const settingsStore = useSettingsStore();
-  await settingsStore.initialize_settings();
+  // Check if we're running in a web environment
+  const isWeb = typeof window !== 'undefined' && !window.__TAURI__;
+  
+  if (!isWeb) {
+    // Initialize settings from the backend before mounting the app (Tauri only)
+    const settingsStore = useSettingsStore();
+    await settingsStore.initialize_settings();
+  }
 
   app.mount("#app");
 }

src/stores/settings.ts

@@ -14,6 +14,9 @@ export interface SettingsState {
   loadError: boolean;
 }
 
+// Check if we're running in a web environment
+const isWeb = typeof window !== 'undefined' && !window.__TAURI__;
+
 export const useSettingsStore = defineStore("settings", {
   state: (): SettingsState => ({
     theme: "light",
@@ -31,6 +34,12 @@ export const useSettingsStore = defineStore("settings", {
      * Loads settings from the backend and initializes the store.
      */
     async initialize_settings() {
+      // Skip Tauri API calls in web environment
+      if (isWeb) {
+        console.log("Running in web environment, using default settings");
+        return;
+      }
+
       try {
         const settings = await invoke<{
           theme: string;
@@ -68,6 +77,12 @@ export const useSettingsStore = defineStore("settings", {
       theme: Theme,
     ) {
       this.theme = theme;
+      
+      // Skip Tauri API calls in web environment
+      if (isWeb) {
+        return;
+      }
+
       try {
         await invoke("save_settings", {
           settings: {
@@ -89,6 +104,11 @@ export const useSettingsStore = defineStore("settings", {
      * Saves all settings to the backend.
      */
     async save_all_settings() {
+      // Skip Tauri API calls in web environment
+      if (isWeb) {
+        return;
+      }
+
       try {
         await invoke("save_settings", {
           settings: {
@@ -130,7 +150,9 @@ export const useSettingsStore = defineStore("settings", {
       this.closeTabShortcut = "CmdOrCtrl+Option+Y";
       this.toggleWindowShortcut = "CmdOrCtrl+Option+U";
 
-      await this.save_all_settings();
+      if (!isWeb) {
+        await this.save_all_settings();
+      }
     },
   },
 });

src/stores/tabs.ts

@@ -55,6 +55,9 @@ function extractFileName(path: string): string {
   return path.split(/[\\/]/).pop() || path;
 }
 
+// Check if we're running in a web environment
+const isWeb = typeof window !== 'undefined' && !window.__TAURI__;
+
 export const useTabsStore = defineStore("tabs", {
   state: () => {
     const firstTabId = generateId();
@@ -99,9 +102,11 @@ export const useTabsStore = defineStore("tabs", {
       this.tabs.push(newTab);
       this.activeTabId = newTab.id;
 
-      // Show and focus window when a new tab is created
-      await appWindow.show();
-      await appWindow.setFocus();
+      // Show and focus window when a new tab is created (Tauri only)
+      if (!isWeb) {
+        await appWindow.show();
+        await appWindow.setFocus();
+      }
     },
 
     /**
@@ -116,18 +121,30 @@ export const useTabsStore = defineStore("tabs", {
 
       // If tab has unsaved changes, ask user before closing
       if (tabToClose.isUnsaved) {
-        const result = await ask(`"${tabToClose.name}" has unsaved changes.`, {
-          title: "Unsaved Changes",
-          type: "warning",
-          okLabel: "Save",
-          cancelLabel: "Don't Save", // This will return `false`
-        });
-
-        if (result) {
-          // User clicked "Save", result is true
-          const savedSuccessfully = await this.saveActiveFile();
-          if (!savedSuccessfully) {
-            return; // User cancelled the save dialog, so we abort closing the tab
+        if (isWeb) {
+          // In web environment, use browser confirm dialog
+          const result = confirm(`"${tabToClose.name}" has unsaved changes. Do you want to save?`);
+          if (result) {
+            const savedSuccessfully = await this.saveActiveFile();
+            if (!savedSuccessfully) {
+              return; // User cancelled the save dialog, so we abort closing the tab
+            }
+          }
+        } else {
+          // In Tauri environment, use native dialog
+          const result = await ask(`"${tabToClose.name}" has unsaved changes.`, {
+            title: "Unsaved Changes",
+            type: "warning",
+            okLabel: "Save",
+            cancelLabel: "Don't Save", // This will return `false`
+          });
+
+          if (result) {
+            // User clicked "Save", result is true
+            const savedSuccessfully = await this.saveActiveFile();
+            if (!savedSuccessfully) {
+              return; // User cancelled the save dialog, so we abort closing the tab
+            }
           }
         }
         // If user clicked "Don't Save" (result is false), we just proceed to close.
@@ -166,8 +183,8 @@ export const useTabsStore = defineStore("tabs", {
         }
       }
 
-      // Hide window if no tabs left
-      if (this.tabs.length === 0) {
+      // Hide window if no tabs left (Tauri only)
+      if (!isWeb && this.tabs.length === 0) {
         appWindow.hide();
       }
     },
@@ -201,6 +218,12 @@ export const useTabsStore = defineStore("tabs", {
 
     // === File operations using backend commands ===
     async openFileFromDialog() {
+      if (isWeb) {
+        // In web environment, show a message that file operations are not available
+        alert("File operations are not available in the web version. Please download the desktop app for full functionality.");
+        return;
+      }
+
       try {
         const results = await invoke<Array<{
           path: string;
@@ -232,6 +255,12 @@ export const useTabsStore = defineStore("tabs", {
     },
 
     async openSpecificFile(path: string) {
+      if (isWeb) {
+        // In web environment, show a message that file operations are not available
+        alert("File operations are not available in the web version. Please download the desktop app for full functionality.");
+        return;
+      }
+
       try {
         // 如果已經有這個檔案的分頁，直接切換
         const existingTab = this.tabs.find((tab) => tab.path === path);
@@ -275,6 +304,12 @@ export const useTabsStore = defineStore("tabs", {
         return this.saveActiveFileAs();
       }
 
+      if (isWeb) {
+        // In web environment, just mark as saved
+        activeTab.isUnsaved = false;
+        return true;
+      }
+
       try {
         await invoke("save_file", {
           path: activeTab.path,
@@ -293,6 +328,23 @@ export const useTabsStore = defineStore("tabs", {
       const activeTab = this.tabs.find((tab) => tab.id === this.activeTabId);
       if (!activeTab) return false;
 
+      if (isWeb) {
+        // In web environment, create a download link
+        const blob = new Blob([activeTab.content], { type: 'text/plain' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = activeTab.name || 'untitled.txt';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+        
+        // Mark as saved
+        activeTab.isUnsaved = false;
+        return true;
+      }
+
       const settingsStore = useSettingsStore();
 
       try {
@@ -316,6 +368,11 @@ export const useTabsStore = defineStore("tabs", {
 
     // === Menu event listeners ===
     setup_menu_listeners() {
+      if (isWeb) {
+        // Skip menu listeners in web environment
+        return;
+      }
+
       // Listen for shortcut-new-note event from backend
       listen("shortcut-new-note", () => {
         this.createTab();