feat: download image in electron

Signed-off-by: Innei <i@innei.in>

src/main/lib/download.ts

@@ -0,0 +1,18 @@
+import { createWriteStream } from "node:fs"
+import { pipeline } from "node:stream"
+import { promisify } from "node:util"
+
+const streamPipeline = promisify(pipeline)
+
+export async function downloadFile(url: string, dest: string) {
+  const res = await fetch(url)
+
+  // 检查响应是否成功
+  if (!res.ok) {
+    throw new Error(`Failed to fetch ${url}: ${res.statusText}`)
+  }
+  if (!res.body) {
+    throw new Error(`Failed to get response body`)
+  }
+  await streamPipeline(res.body as any, createWriteStream(dest))
+}

src/main/tipc.ts

@@ -1,7 +1,9 @@
 import { getRendererHandlers, tipc } from "@egoist/tipc/main"
+import { callGlobalContextMethod } from "@shared/bridge"
 import type { MessageBoxOptions } from "electron"
 import { app, dialog, Menu, ShareMenu } from "electron"
 
+import { downloadFile } from "./lib/download"
 import type { RendererHandlers } from "./renderer-handlers"
 import { createSettingWindow, createWindow, getMainWindow } from "./window"
 
@@ -171,6 +173,26 @@ export const router = {
   setMacOSBadge: t.procedure.input<number>().action(async ({ input }) => {
     app.setBadgeCount(input)
   }),
+
+  saveImage: t.procedure.input<string>().action(async ({ input }) => {
+    const result = await dialog.showSaveDialog({
+      defaultPath: input.split("/").pop(),
+    })
+    if (result.canceled) return
+
+    // return result.filePath;
+    await downloadFile(input, result.filePath)
+      .catch((err) => {
+        const mainWindow = getMainWindow()
+        if (!mainWindow) return
+        callGlobalContextMethod(mainWindow, "toast.error", ["Download failed!"])
+        throw err
+      })
+
+    const mainWindow = getMainWindow()
+    if (!mainWindow) return
+    callGlobalContextMethod(mainWindow, "toast.success", ["Download success!"])
+  }),
 }
 
 export type Router = typeof router

src/renderer/src/App.tsx

@@ -2,6 +2,7 @@ import { queryClient } from "@renderer/lib/query-client"
 import { registerGlobalContext } from "@shared/bridge"
 import { useEffect } from "react"
 import { Outlet } from "react-router-dom"
+import { toast } from "sonner"
 
 import { useAppIsReady, useUISettingKey } from "./atoms"
 import { useDark } from "./hooks/common/useDark"
@@ -20,6 +21,7 @@ function App() {
 
     registerGlobalContext({
       showSetting: window.router.showSettings,
+      toast,
     })
     return cleanup
   }, [])

src/renderer/src/components/ui/image/preview-image.tsx

@@ -1,14 +1,14 @@
 import { m } from "@renderer/components/common/Motion"
+import { tipcClient } from "@renderer/lib/client"
 import { stopPropagation } from "@renderer/lib/dom"
+import { showNativeMenu } from "@renderer/lib/native-menu"
 import type { FC } from "react"
-import { useState } from "react"
+import { useCallback, useState } from "react"
 import { Mousewheel, Scrollbar, Virtual } from "swiper/modules"
 import { Swiper, SwiperSlide } from "swiper/react"
 
 import { ActionButton } from "../button"
-import {
-  microReboundPreset,
-} from "../constants/spring"
+import { microReboundPreset } from "../constants/spring"
 import { useCurrentModal } from "../modal"
 
 const Wrapper: Component<{
@@ -52,12 +52,51 @@ export const PreviewImageContent: FC<{
 }> = ({ images, initialIndex = 0 }) => {
   const [currentSrc, setCurrentSrc] = useState(images[initialIndex])
 
+  const handleContextMenu = useCallback(
+    (image: string, e: React.MouseEvent<HTMLImageElement>) => {
+      if (!window.electron) return
+
+      showNativeMenu(
+        [
+          {
+            label: "Open in browser",
+            type: "text",
+            click: () => {
+              window.open(image)
+            },
+          },
+          {
+            label: "Copy image address",
+            type: "text",
+            click: () => {
+              navigator.clipboard.writeText(image)
+            },
+          },
+          {
+            label: "Save image as...",
+            type: "text",
+            click: () => {
+              // window.electron.ipcRenderer.invoke("save-image", image);
+              tipcClient?.saveImage(image)
+            },
+          },
+        ],
+        e,
+      )
+    },
+    [],
+  )
   if (images.length === 0) return null
   if (images.length === 1) {
     const src = images[0]
     return (
       <Wrapper src={src}>
-        <img className="size-full object-contain" alt="cover" src={src} />
+        <img
+          className="size-full object-contain"
+          alt="cover"
+          src={src}
+          onContextMenu={(e) => handleContextMenu(src, e)}
+        />
       </Wrapper>
     )
   }
@@ -81,6 +120,7 @@ export const PreviewImageContent: FC<{
         {images.map((image, index) => (
           <SwiperSlide key={image} virtualIndex={index}>
             <img
+              onContextMenu={(e) => handleContextMenu(image, e)}
               className="size-full object-contain"
               alt="cover"
               src={image}

src/renderer/src/modules/entry-content/index.tsx

@@ -24,6 +24,7 @@ export const EntryContent = ({ entryId }: { entryId: ActiveEntryId }) => {
   if (!entryId) {
     return (
       <m.div
+        onContextMenu={stopPropagation}
         className="-mt-2 flex size-full min-w-0 flex-col items-center justify-center gap-1 text-lg font-medium text-zinc-400"
         initial={{ opacity: 0.01, y: 300 }}
         animate={{ opacity: 1, y: 0 }}

src/shared/src/bridge.ts

@@ -1,14 +1,39 @@
 import type { BrowserWindow } from "electron"
+import type { toast } from "sonner"
 
 const PREFIX = "__follow"
 interface RenderGlobalContext {
   showSetting: () => void
+
+  toast: typeof toast
 }
 
 export const registerGlobalContext = (context: RenderGlobalContext) => {
   globalThis[PREFIX] = context
 }
-export const callGlobalContextMethod = (
+
+export function callGlobalContextMethod(
   window: BrowserWindow,
-  method: keyof RenderGlobalContext,
-) => window.webContents.executeJavaScript(`globalThis.${PREFIX}.${method}()`)
+  method: string,
+  args?: any[]
+): void
+
+export function callGlobalContextMethod<T extends keyof RenderGlobalContext>(
+  window: BrowserWindow,
+  method: T,
+
+  // @ts-expect-error
+  args: Parameters<RenderGlobalContext[T]> = [] as any
+): void
+export function callGlobalContextMethod<T extends keyof RenderGlobalContext>(
+  window: BrowserWindow,
+  method: T,
+
+  args: Parameters<RenderGlobalContext[T]> = [] as any,
+) {
+  return window.webContents.executeJavaScript(
+    `globalThis.${PREFIX}.${method}(${args
+      .map((arg) => JSON.stringify(arg))
+      .join(",")})`,
+  )
+}