refactor: 拆分图床配置，可配置独立的 Github 图床 (#306)

* refactor: 增加图床配置，Github 图床配置移至图床配置

* feat: Github 图床可配置独立的 token

* feat: 上传图片使用独立 Github 图床

Author: codexu

messages/en.json

@@ -109,7 +109,7 @@
     },
     "sync": {
       "title": "Sync",
-      "desc": "Here, you can add and manage repositories, helping you sync your notes and images.",
+      "desc": "Here, you can configure the synchronization repository, which can help you synchronize records, markdown files, system configurations and other information.",
       "repoStatus": "Repository Status",
       "syncRepo": "Sync Repository",
       "syncRepoDesc": "Sync markdown files in writing",
@@ -142,6 +142,12 @@
         "30m": "30 minutes"
       }
     },
+    "imageHosting": {
+      "title": "Image Hosting",
+      "desc": "Here, you can configure image hosting, uploading images to the image hosting service.",
+      "isPrimaryBackup": "Current {type} primary image hosting method",
+      "setPrimaryBackup": "Set as Primary Image Hosting"
+    },
     "backupSync": {
       "title": "Backup Data",
       "desc": "Here, you can use other methods to backup your data, you can regularly backup to ensure data security.",

messages/ja.json

@@ -107,7 +107,7 @@
     },
     "sync": {
       "title": "同期",
-      "desc": "ここで同期リポジトリを設定し、執筆中のファイルをリポジトリと同期できます。画像ホスティングもサポートしています。",
+      "desc": "ここでは、同期リポジトリを設定することができます。ログ、markdownファイル、システム設定などの情報を同期するのに役立ちます。",
       "repoStatus": "リポジトリの状態",
       "syncRepo": "同期リポジトリ",
       "syncRepoDesc": "執筆中のMarkdownファイルを同期",
@@ -140,8 +140,14 @@
         "30m": "30 分"
       }
     },
+    "imageHosting": {
+      "title": "画像ホスティング",
+      "desc": "ここでは、画像ホスティングを設定できます。",
+      "isPrimaryBackup": "現在の {type} 主要バックアップ方法",
+      "setPrimaryBackup": "主要バックアップ方法として設定"
+    },
     "backupSync": {
-      "title": "データバックアップ",
+      "title": "備用方案",
       "desc": "ここでは、他の方法でデータをバックアップすることができます。定期的にバックアップを取ることで、データの安全を確保できます。",
       "webdav": {
         "connectionState": {

messages/zh.json

@@ -107,10 +107,10 @@
     },
     "sync": {
       "title": "同步配置",
-      "desc": "在这里，你可以配置同步仓库，将写作中的文件同步到仓库，并支持图床。",
+      "desc": "在这里，你可以配置同步仓库，它可以帮助你同步记录、markdown 文件、系统配置等信息。",
       "repoStatus": "仓库状态",
       "syncRepo": "同步仓库",
-      "syncRepoDesc": "同步写作中的 markdown 文件",
+      "syncRepoDesc": "同步写作中的 markdown 文件。",
       "imageRepo": "图床仓库",
       "imageRepoDesc": "同步你的图片到图床仓库。",
       "private": "私有",
@@ -140,8 +140,14 @@
         "30m": "30 分钟"
       }
     },
+    "imageHosting": {
+      "title": "图床",
+      "desc": "在这里，你可以配置图床，将图片上传到图床。",
+      "isPrimaryBackup": "当前 {type} 为主要图床",
+      "setPrimaryBackup": "设为主要图床"
+    },
     "backupSync": {
-      "title": "数据备份",
+      "title": "备用方案",
       "desc": "在这里，你可以使用其他方案来备份你的数据，你可以定期进行备份，以确保数据的安全。",
       "webdav": {
         "connectionState": {

src/app/core/article/md-editor.tsx

@@ -8,13 +8,10 @@ import CustomToolbar from './custom-toolbar'
 import './style.scss'
 import { useTheme } from 'next-themes'
 import { toast } from '@/hooks/use-toast'
-import { fileToBase64, uploadFile } from '@/lib/github'
-import { RepoNames } from '@/lib/github.types'
 import { Store } from '@tauri-apps/plugin-store'
 import { useTranslations } from 'next-intl'
 import { useI18n } from '@/hooks/useI18n'
 import emitter from '@/lib/emitter'
-import dayjs from 'dayjs'
 import { appDataDir } from '@tauri-apps/api/path'
 import { v4 as uuid } from 'uuid'
 import { convertImage } from '@/lib/utils'
@@ -25,6 +22,7 @@ import { isMobileDevice } from '@/lib/check'
 import { getWorkspacePath } from '@/lib/workspace'
 import { convertFileSrc } from "@tauri-apps/api/core";
 import useSettingStore from '@/stores/setting'
+import { uploadImage } from '@/lib/imageHosting'
 
 export function MdEditor() {
   const [editor, setEditor] = useState<Vditor>();
@@ -173,7 +171,7 @@ export function MdEditor() {
       upload: {
         async handler(files: File[]) {
           const store = await Store.load('store.json');
-          const accessToken = await store.get('accessToken')
+          const accessToken = await store.get('githubImageAccessToken')
           const useImageRepo = await store.get('useImageRepo')
           if (accessToken && useImageRepo) {
             const filesUrls = await uploadImages(files)
@@ -257,23 +255,7 @@ export function MdEditor() {
             description: file.name,
             duration: 600000,
           })
-          const path = dayjs().format('YYYY-MM')
-          const fileBase64 = await fileToBase64(file)
-          const ext = file.name.split('.')[file.name.split('.').length - 1]
-          await uploadFile({
-            ext,
-            file: fileBase64,
-            repo: RepoNames.image,
-            path
-          }).then(async res => {
-            const store = await Store.load('store.json');
-            const jsdelivr = await store.get('jsdelivr')
-            let url = res?.data.content.download_url
-            if (jsdelivr) {
-              const githubUsername = await store.get('githubUsername')
-              await fetch(`https://purge.jsdelivr.net/gh/${githubUsername}/${RepoNames.image}@main/${path}/${res?.data.content.name}`)
-              url = `https://cdn.jsdelivr.net/gh/${githubUsername}/${RepoNames.image}@main/${path}/${res?.data.content.name}`
-            }
+          await uploadImage(file).then(async url => {
             resolve(url)
           }).catch(err => {
             reject(err)

src/app/core/image/folder-card.tsx

@@ -3,7 +3,7 @@ import {
   CardContent,
 } from "@/components/ui/card"
 import { GithubFile } from "@/lib/github"
-import useImageStore from "@/stores/image"
+import useImageStore from "@/stores/imageHosting"
 import { Folder } from 'lucide-react'
 
 export function FolderCard({file}: {file: GithubFile}) {

src/app/core/image/image-card.tsx

@@ -7,7 +7,7 @@ import { GithubFile } from "@/lib/github"
 import { convertBytesToSize } from '@/lib/utils'
 import { deleteFile } from "@/lib/github"
 import { toast } from "@/hooks/use-toast"
-import useImageStore from "@/stores/image"
+import useImageStore from "@/stores/imageHosting"
 import { RepoNames } from "@/lib/github.types"
 import { PhotoProvider, PhotoView } from 'react-photo-view';
 import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "@/components/ui/context-menu"

src/app/core/image/image-header.tsx

@@ -3,7 +3,7 @@ import {TooltipButton} from "@/components/tooltip-button"
 import {TooltipProvider} from "@/components/ui/tooltip"
 import {RefreshCcw} from "lucide-react"
 import * as React from "react"
-import useImageStore from "@/stores/image"
+import useImageStore from "@/stores/imageHosting"
 import {Separator} from "@/components/ui/separator"
 import {convertBytesToSize} from "@/lib/utils"
 import {open} from '@tauri-apps/plugin-shell';

src/app/core/image/page.tsx

@@ -2,7 +2,7 @@
 import { fileToBase64, GithubFile, uploadFile } from '@/lib/github'
 import { useEffect, useState } from 'react'
 import { ImageCard } from './image-card'
-import useImageStore from '@/stores/image'
+import useImageStore from '@/stores/imageHosting'
 import useMarkStore from '@/stores/mark'
 import { ImageHeader } from './image-header'
 import useSettingStore from '@/stores/setting'

src/app/core/layout.tsx

@@ -11,16 +11,19 @@ import zh from "dayjs/locale/zh-cn";
 import en from "dayjs/locale/en";
 import { useI18n } from "@/hooks/useI18n"
 import useVectorStore from "@/stores/vector"
+import useImageStore from "@/stores/imageHosting"
 
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   const { initSettingData } = useSettingStore()
+  const { initMainHosting } = useImageStore()
   const { currentLocale } = useI18n()
   useEffect(() => {
     initSettingData()
+    initMainHosting()
     initAllDatabases()
   }, [])
 

src/app/core/record/mark/control-image.tsx

@@ -7,12 +7,10 @@ import useMarkStore from "@/stores/mark"
 import useTagStore from "@/stores/tag"
 import { BaseDirectory, copyFile, exists, mkdir, readFile } from "@tauri-apps/plugin-fs"
 import { ImagePlus } from "lucide-react"
-import { uploadFile, uint8ArrayToBase64 } from "@/lib/github"
 import useSettingStore from "@/stores/setting"
 import { v4 as uuid } from 'uuid'
-import { RepoNames } from "@/lib/github.types"
 import { open } from '@tauri-apps/plugin-dialog';
-import dayjs from "dayjs"
+import { uploadImage } from "@/lib/imageHosting"
 
 export function ControlImage() {
   const t = useTranslations();
@@ -31,11 +29,11 @@ export function ControlImage() {
     });
     if (!filePaths) return
     filePaths.forEach(async (path) => {
-      await uploadImage(path)
+      await upload(path)
     })
   }
 
-  async function uploadImage(path: string) {
+  async function upload(path: string) {
     const queueId = uuid()
     addQueue({ queueId, progress: t('record.mark.progress.cacheImage'), type: 'image', startTime: Date.now() })
     const ext = path.substring(path.lastIndexOf('.') + 1)
@@ -44,7 +42,7 @@ export function ControlImage() {
       await mkdir('image', { baseDir: BaseDirectory.AppData})
     }
     await copyFile(path, `image/${queueId}.${ext}`, { toPathBaseDir: BaseDirectory.AppData})
-    const file = await readFile(path)
+    const fileData = await readFile(path)
     const filename = `${queueId}.${ext}`
     setQueue(queueId, { progress: t('record.mark.progress.ocr') });
     const content = await ocr(`image/${filename}`)
@@ -64,20 +62,10 @@ export function ControlImage() {
     }
     if (githubUsername) {
       setQueue(queueId, { progress: t('record.mark.progress.uploadImage') });
-      const path = dayjs().format('YYYY-MM')
-      const res = await uploadFile({
-        ext,
-        file: uint8ArrayToBase64(file),
-        filename,
-        repo: RepoNames.image,
-        path
-      })
-      if (res) {
-        setQueue(queueId, { progress: t('record.mark.progress.jsdelivrCache') });
-        await fetch(`https://purge.jsdelivr.net/gh/${githubUsername}/${RepoNames.image}@main/${path}/${res.data.content.name}`)
-        mark.url = `https://cdn.jsdelivr.net/gh/${githubUsername}/${RepoNames.image}@main/${path}/${res.data.content.name}`
-      } else {
-        mark.url = filename
+      const file = new File([new Blob([fileData])], filename, { type: `image/${ext}` })
+      const url = await uploadImage(file)
+      if (url) {
+        mark.url = url
       }
     }
     removeQueue(queueId)