feat: 新增保存按钮高亮提醒

src/main/index.ts

@@ -3,16 +3,16 @@ import { join } from 'path'
 import { electronApp, optimizer, is } from '@electron-toolkit/utils'
 import icon from '../../resources/icon.png?asset'
 import fs from 'node:fs/promises'
-import { readFileSync } from 'node:fs'
 import path from 'node:path'
 import { mdToHtml } from '../../lib/render'
 import { getTheme } from '../../lib/theme'
+import { embedImageIntoHtml } from './utils'
 
 function createWindow(): void {
   // Create the browser window.
   const mainWindow = new BrowserWindow({
     width: 905,
-    height: 670,
+    height: 700,
     minWidth: 768,
     minHeight: 512,
     show: false,
@@ -120,21 +120,9 @@ app.whenReady().then(() => {
       }
     }
   )
-  ipcMain.handle(
-    'embedImageIntoHtml',
-    async (_, html: string, filepath: string): Promise<string> => {
-      return html.replace(/<img src="(.+?)"/g, (match, p1) => {
-        if (p1.startsWith('http')) return match
-        try {
-          const url = path.resolve(filepath, decodeURI(p1))
-          const data = readFileSync(url).toString('base64')
-          return `<img src="data:image/${path.extname(p1).replace('.', '')};base64,${data}"`
-        } catch (_) {
-          return match
-        }
-      })
-    }
-  )
+  ipcMain.handle('embedImageIntoHtml', (_, html: string, filepath: string): Promise<string> => {
+    return embedImageIntoHtml(html, filepath)
+  })
   ipcMain.handle(
     'createPdf',
     async (
@@ -156,16 +144,7 @@ app.whenReady().then(() => {
       }
       const theme = getTheme(themeName)
       const dist = path.resolve(filePath)
-      const html = (await mdToHtml(markdown, theme)).replace(/<img src="(.+?)"/g, (match, p1) => {
-        if (p1.startsWith('http')) return match
-        try {
-          const url = path.resolve(filepath, decodeURI(p1))
-          const data = readFileSync(url).toString('base64')
-          return `<img src="data:image/${path.extname(p1).replace('.', '')};base64,${data}"`
-        } catch (_) {
-          return match
-        }
-      })
+      const html = await embedImageIntoHtml(await mdToHtml(markdown, theme), filepath)
       const win = new BrowserWindow()
       const temp = path.resolve(filepath, 'easy_paper_temp_file.html')
       await fs.writeFile(temp, html)

src/main/utils.ts

@@ -0,0 +1,15 @@
+import { readFileSync } from 'node:fs'
+import path from 'node:path'
+
+export async function embedImageIntoHtml(html: string, filepath: string): Promise<string> {
+  return html.replace(/<img src="(.+?)"/g, (match, p1) => {
+    if (p1.startsWith('http')) return match
+    try {
+      const url = path.resolve(filepath, decodeURI(p1))
+      const data = readFileSync(url).toString('base64')
+      return `<img src="data:image/${path.extname(p1).replace('.', '')};base64,${data}"`
+    } catch (_) {
+      return match
+    }
+  })
+}

src/renderer/src/components/Toolbar.tsx

@@ -21,6 +21,8 @@ export default function Toolbar(): JSX.Element {
     setMarkdown,
     messageApi,
     markdown,
+    savedMarkdown,
+    setSavedMarkdown,
     theme,
     disabled,
     setDisabled
@@ -35,6 +37,7 @@ export default function Toolbar(): JSX.Element {
           setFilename(filename)
           setFilepath(filepath)
           setMarkdown('')
+          setSavedMarkdown('')
         }}
       >
         <FileAddOutlined /> 新建
@@ -47,16 +50,21 @@ export default function Toolbar(): JSX.Element {
           setFilename(filename)
           setFilepath(filepath)
           setMarkdown(content)
+          setSavedMarkdown(content)
         }}
       >
         <FolderOpenOutlined /> 打开
       </Button>
       <Button
+        type={markdown === savedMarkdown ? 'default' : 'primary'}
         disabled={!filepath || !filename || !markdown.length || !messageApi || disabled}
         onClick={async () => {
           await window.api
             .savePaper(filepath, filename, markdown)
-            .then(() => messageApi!.success('保存成功'))
+            .then(() => {
+              setSavedMarkdown(markdown)
+              messageApi!.success('保存成功')
+            })
             .catch(() => messageApi!.error('保存失败'))
         }}
       >

src/renderer/src/lib/useStore.tsx

@@ -9,6 +9,8 @@ interface State {
   setTheme: (theme: MarkdownPaperTheme) => void
   markdown: string
   setMarkdown: (markdown: string) => void
+  savedMarkdown: string
+  setSavedMarkdown: (savedMarkdown: string) => void
   filepath: string
   setFilepath: (filepath: string) => void
   filename: string
@@ -24,6 +26,8 @@ export const useStore = create<State>()((set) => ({
   setTheme: (theme): void => set({ theme }),
   markdown: '',
   setMarkdown: (markdown): void => set({ markdown }),
+  savedMarkdown: '',
+  setSavedMarkdown: (savedMarkdown): void => set({ savedMarkdown }),
   filepath: '',
   setFilepath: (filepath): void => set({ filepath }),
   filename: '',