feat(#279): 本地图片支持相对路径引入，文件管理器增加图片预览 (#294)

* feat: 支持相对路径图片

* fix: 下载配置未正常保存导致同步失败

* feat: 文件设置增加写作资源路径，可自定义保存静态资源的路径

* feat: 写作文件管理器中可展示图片文件

* feat: 写作资源文件夹图标、图片文件图标

* feat: 图片静态资源预览

Author: codexu

messages/en.json

@@ -255,6 +255,11 @@
         "errorDesc": "Unable to select workspace directory, please try again",
         "resetError": "Workspace Reset Failed",
         "resetErrorDesc": "Unable to reset to default workspace, please try again"
+      },
+      "assets": {
+        "title": "Assets Path",
+        "desc": "Set the path where resources (e.g. images, videos, files etc.) used in writing will be saved. Resources will be saved at the same level as the currently edited markdown file.",
+        "select": "Set the path where resources used in writing will be saved"
       }
     }
   },

messages/ja.json

@@ -248,6 +248,11 @@
         "errorDesc": "ワークスペースディレクトリを選択できません。再試行してください。",
         "resetError": "ワークスペースのリセットに失敗しました",
         "resetErrorDesc": "デフォルトのワークスペースにリセットできません。再試行してください。"
+      },
+      "assets": {
+        "title": "アセット",
+        "desc": "執筆中のリソース（例：画像、ビデオ、ファイル等）の保存パスを設定します。現在編集中の markdown ファイルと同じレベルに保存されます。",
+        "select": "執筆中のリソースの保存パスを設定してください"
       }
     }
   },

messages/zh.json

@@ -248,6 +248,11 @@
         "errorDesc": "无法选择工作区目录，请重试",
         "resetError": "重置工作区失败",
         "resetErrorDesc": "无法重置为默认工作区，请重试"
+      },
+      "assets": {
+        "title": "写作资源路径",
+        "desc": "设置写作资源的保存路径，例如图片、视频、文件等，与当前编辑的 markdown 文件同级。",
+        "select": "请设置写作资源路径，例如：assets"
       }
     }
   },

src-tauri/capabilities/default.json

@@ -28,6 +28,9 @@
         },
         {
           "path": "$APPDATA/**"
+        },
+        {
+          "path": "**"
         }
       ]
     },

src/app/core/article/file/file-item.tsx

@@ -2,8 +2,7 @@ import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator,
 import { Input } from "@/components/ui/input";
 import useArticleStore, { DirTree } from "@/stores/article";
 import { BaseDirectory, exists, readTextFile, remove, rename, writeTextFile } from "@tauri-apps/plugin-fs";
-import { appDataDir } from '@tauri-apps/api/path';
-import { Cloud, CloudDownload, File } from "lucide-react"
+import { Cloud, CloudDownload, File, ImageIcon } from "lucide-react"
 import { useEffect, useRef, useState } from "react";
 import { ask } from '@tauri-apps/plugin-dialog';
 import { Store } from '@tauri-apps/plugin-store';
@@ -14,6 +13,9 @@ import { computedParentPath, getCurrentFolder } from "@/lib/path";
 import { toast } from "@/hooks/use-toast";
 import { useTranslations } from "next-intl";
 import useClipboardStore from "@/stores/clipboard";
+import { PhotoProvider, PhotoView } from "react-photo-view";
+import { convertImageByWorkspace } from "@/lib/utils";
+import { appDataDir } from '@tauri-apps/api/path';
 
 export function FileItem({ item }: { item: DirTree }) {
   const [isEditing, setIsEditing] = useState(item.isEditing)
@@ -22,16 +24,28 @@ export function FileItem({ item }: { item: DirTree }) {
   const { activeFilePath, setActiveFilePath, readArticle, setCurrentArticle, fileTree, setFileTree, loadFileTree } = useArticleStore()
   const { setClipboardItem, clipboardItem, clipboardOperation } = useClipboardStore()
   const t = useTranslations('article.file')
+  const [imageUrl, setImageUrl] = useState('')
 
   const path = computedParentPath(item)
   const isRoot = path.split('/').length === 1
   const folderPath = path.includes('/') ? path.split('/').slice(0, -1).join('/') : ''
   const cacheTree = cloneDeep(fileTree)
   const currentFolder = getCurrentFolder(folderPath, cacheTree)
 
-  function handleSelectFile() {
-    setActiveFilePath(computedParentPath(item))
-    readArticle(computedParentPath(item), item.sha, item.isLocale)
+  async function handleSelectFile() {
+    if (item.name.match(/\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i)) {
+      let path = ''
+      if (item.isLocale) {
+        path = computedParentPath(item)
+      } else {
+        path = activeFilePath
+      }
+      const url = await convertImageByWorkspace(path)
+      setImageUrl(url)
+    } else {
+      setActiveFilePath(computedParentPath(item))
+      readArticle(computedParentPath(item), item.sha, item.isLocale)
+    }
   }
 
   async function handleDeleteFile() {
@@ -381,72 +395,96 @@ export function FileItem({ item }: { item: DirTree }) {
   }, [item])
 
   return (
-    <ContextMenu>
-      <ContextMenuTrigger>
-        <div
-          className={`${path === activeFilePath ? 'file-manange-item active' : 'file-manange-item'} ${!isRoot && 'translate-x-5 !w-[calc(100%-22px)]'}`}
-          onClick={handleSelectFile}
-          onContextMenu={handleSelectFile}
-        >
-          {
-            isEditing ? 
-            <div className="flex gap-1 items-center w-full select-none">
-              <span className={item.parent ? 'size-0' : 'size-4 ml-1'} />
-              <File className="size-4" />
-              <Input
-                ref={inputRef}
-                className="h-5 rounded-sm text-xs px-1 font-normal flex-1 mr-1"
-                value={name}
-                onBlur={handleRename}
-                onChange={(e) => { setName(e.target.value) }}
-                onKeyDown={(e) => {
-                  if (e.code === 'Enter' && !e.nativeEvent.isComposing) {
-                    handleRename()
-                  } else if (e.code === 'Escape') {
-                    handleEditEnd()
-                  }
-                }}
-              />
-            </div> :
-            <span draggable onDragStart={handleDragStart}
-              className={`${item.isLocale ? '' : 'opacity-50'} flex justify-between flex-1 select-none items-center gap-1 dark:hover:text-white`}>
-              <div className="flex flex-1 gap-1 select-none relative">
-                <span className={item.parent ? 'size-0' : 'size-4 ml-1'}></span>
-                <div className="relative">
-                  { item.isLocale ? <File className="size-4" /> : <CloudDownload className="size-4" /> }
-                  { item.sha && item.isLocale && <Cloud className="size-2.5 absolute left-0 bottom-0 z-10 bg-primary-foreground" /> }
-                </div>
-                <span className="text-xs flex-1 line-clamp-1">{item.name}</span>
-              </div> 
-            </span>
-          }
-        </div>
-      </ContextMenuTrigger>
-      <ContextMenuContent>
-        <ContextMenuItem inset onClick={handleShowFileManager}>
-          {t('context.viewDirectory')}
-        </ContextMenuItem>
-        <ContextMenuSeparator />
-        <ContextMenuItem inset disabled={!item.isLocale} onClick={handleCutFile}>
-          {t('context.cut')}
-        </ContextMenuItem>
-        <ContextMenuItem inset onClick={handleCopyFile}>
-          {t('context.copy')}
-        </ContextMenuItem>
-        <ContextMenuItem inset disabled={!clipboardItem} onClick={handlePasteFile}>
-          {t('context.paste')}
-        </ContextMenuItem>
-        <ContextMenuSeparator />
-        <ContextMenuItem disabled={!item.isLocale} inset onClick={handleStartRename}>
-          {t('context.rename')}
-        </ContextMenuItem>
-        <ContextMenuItem disabled={!item.sha} inset className="text-red-900" onClick={handleDeleteSyncFile}>
-          {t('context.deleteSyncFile')}
-        </ContextMenuItem>
-        <ContextMenuItem disabled={!item.isLocale} inset className="text-red-900" onClick={handleDeleteFile}>
-          {t('context.deleteLocalFile')}
-        </ContextMenuItem>
-      </ContextMenuContent>
-    </ContextMenu>
+    <>
+      <ContextMenu>
+        <ContextMenuTrigger>
+          <div
+            className={`${path === activeFilePath ? 'file-manange-item active' : 'file-manange-item'} ${!isRoot && 'translate-x-5 !w-[calc(100%-22px)]'}`}
+            onClick={handleSelectFile}
+            onContextMenu={handleSelectFile}
+          >
+            {
+              isEditing ? 
+              <div className="flex gap-1 items-center w-full select-none">
+                <span className={item.parent ? 'size-0' : 'size-4 ml-1'} />
+                <File className="size-4" />
+                <Input
+                  ref={inputRef}
+                  className="h-5 rounded-sm text-xs px-1 font-normal flex-1 mr-1"
+                  value={name}
+                  onBlur={handleRename}
+                  onChange={(e) => { setName(e.target.value) }}
+                  onKeyDown={(e) => {
+                    if (e.code === 'Enter' && !e.nativeEvent.isComposing) {
+                      handleRename()
+                    } else if (e.code === 'Escape') {
+                      handleEditEnd()
+                    }
+                  }}
+                />
+              </div> :
+              item.name.match(/\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i) ? 
+              <PhotoProvider>
+                <PhotoView src={imageUrl}>
+                  <span
+                    draggable
+                    onDragStart={handleDragStart}
+                    title={item.name}
+                    className={`${item.isLocale ? '' : 'opacity-50'} flex justify-between flex-1 select-none items-center gap-1 dark:hover:text-white`}>
+                    <div className="flex flex-1 gap-1 select-none relative">
+                      <span className={item.parent ? 'size-0' : 'size-4 ml-1'}></span>
+                      <div className="relative">
+                        <ImageIcon className="size-4" />
+                        { item.sha && item.isLocale && <Cloud className="size-2.5 absolute left-0 bottom-0 z-10 bg-primary-foreground" /> }
+                      </div>
+                      <span className="text-xs flex-1 line-clamp-1">{item.name}</span>
+                    </div> 
+                  </span>
+                </PhotoView>
+              </PhotoProvider> :
+              <span
+                draggable
+                onDragStart={handleDragStart}
+                title={item.name}
+                className={`${item.isLocale ? '' : 'opacity-50'} flex justify-between flex-1 select-none items-center gap-1 dark:hover:text-white`}>
+                <div className="flex flex-1 gap-1 select-none relative">
+                  <span className={item.parent ? 'size-0' : 'size-4 ml-1'}></span>
+                  <div className="relative">
+                    { item.isLocale ? <File className="size-4" /> : <CloudDownload className="size-4" /> }
+                    { item.sha && item.isLocale && <Cloud className="size-2.5 absolute left-0 bottom-0 z-10 bg-primary-foreground" /> }
+                  </div>
+                  <span className="text-xs flex-1 line-clamp-1">{item.name}</span>
+                </div> 
+              </span>
+            }
+          </div>
+        </ContextMenuTrigger>
+        <ContextMenuContent>
+          <ContextMenuItem inset onClick={handleShowFileManager}>
+            {t('context.viewDirectory')}
+          </ContextMenuItem>
+          <ContextMenuSeparator />
+          <ContextMenuItem inset disabled={!item.isLocale} onClick={handleCutFile}>
+            {t('context.cut')}
+          </ContextMenuItem>
+          <ContextMenuItem inset onClick={handleCopyFile}>
+            {t('context.copy')}
+          </ContextMenuItem>
+          <ContextMenuItem inset disabled={!clipboardItem} onClick={handlePasteFile}>
+            {t('context.paste')}
+          </ContextMenuItem>
+          <ContextMenuSeparator />
+          <ContextMenuItem disabled={!item.isLocale} inset onClick={handleStartRename}>
+            {t('context.rename')}
+          </ContextMenuItem>
+          <ContextMenuItem disabled={!item.sha} inset className="text-red-900" onClick={handleDeleteSyncFile}>
+            {t('context.deleteSyncFile')}
+          </ContextMenuItem>
+          <ContextMenuItem disabled={!item.isLocale} inset className="text-red-900" onClick={handleDeleteFile}>
+            {t('context.deleteLocalFile')}
+          </ContextMenuItem>
+        </ContextMenuContent>
+      </ContextMenu>
+    </>
   )
 }

src/app/core/article/file/file-manager.tsx

@@ -10,7 +10,7 @@ import {
 import React, { useEffect, useState } from "react"
 import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible"
 import useArticleStore, { DirTree } from "@/stores/article"
-import { BaseDirectory, rename, writeTextFile } from "@tauri-apps/plugin-fs"
+import { BaseDirectory, rename, writeTextFile, writeFile } from "@tauri-apps/plugin-fs"
 import { FileItem } from './file-item'
 import { FolderItem } from "./folder-item"
 import { computedParentPath } from "@/lib/path"
@@ -86,6 +86,7 @@ export function FileManager() {
       const files = e.dataTransfer.files
       for (let i = 0; i < files.length; i += 1) {
         const file = files[i]
+        // 接受 markdown 和图片文件
         if (file.name.endsWith('.md')) {
           const text = await file.text()
           await writeTextFile(`article/${file.name}`, text, { baseDir: BaseDirectory.AppData })
@@ -97,6 +98,19 @@ export function FileManager() {
             isFile: true,
             isSymlink: false
           })
+        } else if (file.name.match(/\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i)) {
+          // 处理图片文件
+          const arrayBuffer = await file.arrayBuffer()
+          const uint8Array = new Uint8Array(arrayBuffer)
+          await writeFile(`article/${file.name}`, uint8Array, { baseDir: BaseDirectory.AppData })
+          addFile({
+            name: file.name,
+            isEditing: false,
+            isLocale: true,
+            isDirectory: false,
+            isFile: true,
+            isSymlink: false
+          })
         }
       }
     }

src/app/core/article/file/folder-item.tsx

@@ -3,7 +3,7 @@ import { Input } from "@/components/ui/input";
 import useArticleStore, { DirTree } from "@/stores/article";
 import { BaseDirectory, exists, mkdir, readDir, readTextFile, remove, rename, writeTextFile } from "@tauri-apps/plugin-fs";
 import { appDataDir } from '@tauri-apps/api/path';
-import { ChevronRight, Cloud, Folder, FolderDown } from "lucide-react"
+import { ChevronRight, Cloud, Folder, FolderDot, FolderDown, FolderOpen, FolderOpenDot } from "lucide-react"
 import { useEffect, useRef, useState } from "react";
 import { CollapsibleTrigger } from "@/components/ui/collapsible";
 import { toast } from "@/hooks/use-toast";
@@ -13,6 +13,7 @@ import { computedParentPath, getCurrentFolder } from "@/lib/path";
 import { useTranslations } from "next-intl";
 import useClipboardStore from "@/stores/clipboard";
 import { ask } from '@tauri-apps/plugin-dialog';
+import useSettingStore from '@/stores/setting'
 
 export function FolderItem({ item }: { item: DirTree }) {
   const [isEditing, setIsEditing] = useState(item.isEditing)
@@ -21,6 +22,7 @@ export function FolderItem({ item }: { item: DirTree }) {
   const inputRef = useRef<HTMLInputElement>(null)
   const t = useTranslations('article.file')
   const { setClipboardItem, clipboardItem, clipboardOperation } = useClipboardStore()
+  const { assetsPath } = useSettingStore()
 
   const { 
     activeFilePath,
@@ -442,7 +444,10 @@ export function FolderItem({ item }: { item: DirTree }) {
                 >
                   <div className="flex flex-1 gap-1 select-none relative">
                     <div className="relative">
-                      {item.isLocale ? <Folder className="size-4" /> : <FolderDown className="size-4" /> }
+                      {collapsibleList.includes(path) ? 
+                        (assetsPath === item.name ? <FolderOpenDot className="size-4" /> : <FolderOpen className="size-4" />) :
+                        (assetsPath === item.name ? <FolderDot className="size-4" /> : <Folder className="size-4" />)
+                      }
                       {item.sha && item.isLocale && <Cloud className="size-2.5 absolute left-0 bottom-0 z-10 bg-primary-foreground" />}
                     </div>
                     <span className="text-xs line-clamp-1">{item.name}</span>