chore: 🤖 独立 tairl 事件

Author: maqi1520

package.json

@@ -12,6 +12,7 @@
     "release": "tr release --git"
   },
   "dependencies": {
+    "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
@@ -21,6 +22,7 @@
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-toast": "^1.2.1",
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@tailwindcss/forms": "^0.5.6",

src/components/CheckUpdate.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from 'react'
+import { DropdownMenuItem } from '@/components/ui/dropdown-menu'
+import { Loader2Icon } from 'lucide-react'
+import { check } from '@tauri-apps/plugin-updater'
+import { relaunch } from '@tauri-apps/plugin-process'
+import { message } from '@tauri-apps/plugin-dialog'
+import { useTranslation } from 'react-i18next'
+
+type Props = {}
+
+export default function CheckUpdate({}: Props) {
+  const { t } = useTranslation()
+  const [isDownloading, setIsDownloading] = useState(false)
+  const handleCheckUpdate = async () => {
+    if (isDownloading) {
+      return
+    }
+    setIsDownloading(true)
+    try {
+      const update = await check()
+
+      if (update?.available) {
+        // You could show a dialog asking the user if they want to install the update here.
+        console.log(`Installing update ${update?.version}`)
+
+        // Install the update. This will also restart the app on Windows!
+        await update.downloadAndInstall()
+
+        // On macOS and Linux you will need to restart the app manually.
+        // You could use this step to display another confirmation dialog.
+        await relaunch()
+      } else {
+        message(t('Already the latest version'), {
+          title: t('Prompt'),
+          kind: 'info',
+        })
+      }
+    } catch (error) {
+      message(error, { title: t('Prompt'), kind: 'info' })
+      console.error(error)
+    } finally {
+      setIsDownloading(false)
+    }
+  }
+  return (
+    <DropdownMenuItem onClick={handleCheckUpdate}>
+      {isDownloading ? (
+        <div className="flex items-center">
+          <Loader2Icon className="w-4 h-4 mr-1" /> {t('Downloading')}
+        </div>
+      ) : (
+        t('Check update')
+      )}
+    </DropdownMenuItem>
+  )
+}

src/components/Editor.js

@@ -10,8 +10,8 @@ import {
   registerDocumentFormattingEditProviders,
 } from '../monaco/getOrCreateModel'
 import { useUpdateEffect } from 'react-use'
-import { open } from '@tauri-apps/plugin-shell'
 import { listenPaste } from '../monaco/pasteImage'
+import { openLink } from '@/lib/bindings'
 
 export default function Editor({
   onMount,
@@ -58,9 +58,7 @@ export default function Editor({
 
     disposables.push(editor)
 
-    window.open = (url) => {
-      open(url)
-    }
+    window.open = openLink
     onMount(editor)
 
     return () => {

src/components/FileTree.tsx

@@ -18,20 +18,23 @@ import {
   findPathInTree,
 } from './utils/file-tree-util'
 
-import { confirm, message, open } from '@tauri-apps/plugin-dialog'
-import { documentDir, resolve } from '@tauri-apps/api/path'
-import { getCurrent } from '@tauri-apps/api/window'
+import { useToast } from '@/components/ui/use-toast'
+import { useTranslation } from 'react-i18next'
 import {
+  fullScreen,
+  openLink,
+  searchKeywordInDir,
+  readDir,
+  showInFlower,
+  chooseDir,
+  resolve,
   exists,
   mkdir,
   rename,
   writeTextFile,
   readTextFile,
   remove,
-} from '@tauri-apps/plugin-fs'
-import { useTranslation } from 'react-i18next'
-import { invoke } from '@tauri-apps/api/core'
-import { open as openLink } from '@tauri-apps/plugin-shell'
+} from '@/lib/bindings'
 import Tree from './Tree'
 import SearchList from './SearchList'
 import TocList from './TocList'
@@ -48,6 +51,7 @@ import dayjs from 'dayjs'
 import { useLocalStorage } from 'react-use'
 import { Context } from './Layout'
 import { useHotkeys } from 'react-hotkeys-hook'
+import { useConfirm } from './ui/confirm'
 
 interface FileNode {
   name: string
@@ -91,6 +95,8 @@ const FileTree = forwardRef<TreeRef, Props>(
     { onSelect, selectedPath, setShowPPT, onScroll, dirPath, setDirPath },
     ref
   ) => {
+    const { toast } = useToast()
+    const { confirm } = useConfirm()
     const { isMacOS } = useContext(Context)
     const { t } = useTranslation()
     const [scrollLine, setScrollLine] = useState(1)
@@ -108,12 +114,9 @@ const FileTree = forwardRef<TreeRef, Props>(
     const [fileTreeData, setTreeData] = useState<FileNode[]>([])
 
     const reloadTree = async () => {
-      const res = await exists(dirPath)
-      if (res) {
-        const result: FileNode = await invoke('read_dir', { path: dirPath })
-        if (result.children) {
-          setTreeData(result.children)
-        }
+      const result = await readDir<FileNode>(dirPath)
+      if (result.children) {
+        setTreeData(result.children)
       }
     }
     useEffect(() => {
@@ -174,8 +177,9 @@ title: ${file}
           const content = await readTextFile(filePath)
           openMd(fullPath, content.replace(/{{date}}/g, fileName))
         } catch (error) {
-          message(t('The template file does not exist'), {
-            title: t('Prompt'),
+          toast({
+            title: t('Error'),
+            description: t('The template file does not exist'),
           })
         }
       } else {
@@ -209,15 +213,17 @@ title: ${file}
         reloadTree()
         onSelect(dirPath + '/' + fileName)
       } else {
-        message(t('Please set the working directory'), {
+        toast({
           title: t('Prompt'),
+          description: t('Please set the working directory'),
         })
       }
     })
 
     const fileExists = async () => {
-      await message(t('File already exists'), {
+      toast({
         title: t('Prompt'),
+        description: t('File already exists'),
       })
       setAction({
         path: '',
@@ -247,10 +253,10 @@ title: ${file}
       if (e.keyCode !== 13) {
         return
       }
-      const result: SearchResultItem[] = await invoke('search_keyword_in_dir', {
-        keyword: value.trim(),
-        path: dirPath,
-      })
+      const result = await searchKeywordInDir<SearchResultItem[]>(
+        value.trim(),
+        dirPath
+      )
       console.log('search', result)
       setSearchList(result)
       setSearchValue(value)
@@ -490,7 +496,7 @@ title: ${file}
     const handleOpenFinder = async () => {
       setMenuStyle({ display: 'none' })
       const path = selectedKeys[0]
-      await invoke('show_in_folder', { path })
+      showInFlower(path)
     }
 
     const handleRefresh = async () => {
@@ -504,30 +510,27 @@ title: ${file}
         return
       }
       const name = getCurrentFolderName(path)
-      const confirmed = await confirm(
-        `${t('Are you sure you want to delete')}'${name}'?`,
-        {
-          title: t('Delete confirmation'),
-          kind: 'warning',
-        }
-      )
-      if (confirmed) {
-        if (supportFile(path)) {
-          await remove(path)
-        } else {
-          remove(path, {
-            recursive: true,
-          })
-        }
-        reloadTree()
-      }
+
+      confirm({
+        title: t('Delete confirmation'),
+        description: `${t('Are you sure you want to delete')} ${name}?`,
+        onOk: async () => {
+          if (supportFile(path)) {
+            await remove(path)
+          } else {
+            remove(path, {
+              recursive: true,
+            })
+          }
+          reloadTree()
+        },
+      })
     }, [selectedKeys, dirPath])
 
     const handlePPT = async () => {
       setMenuStyle({ display: 'none' })
       setShowPPT()
-      const appWindow = getCurrent()
-      await appWindow.setFullscreen(true)
+      fullScreen()
     }
 
     let menu: MenuItemProps[] = [
@@ -552,10 +555,7 @@ title: ${file}
       menu = dirItemMenu
     }
     const handleChooseDir = async () => {
-      const selected = await open({
-        directory: true,
-        defaultPath: await documentDir(),
-      })
+      const selected = await chooseDir()
       if (selected) {
         setDirPath(selected)
         setExpandedKeys([])
@@ -567,38 +567,40 @@ title: ${file}
         <div
           data-tauri-drag-region
           className={clsx(
-            'px-4 pb-3 bg-white dark:bg-gray-900 sticky top-0 left-0 z-10 border-b border-gray-200 dark:border-gray-800 flex items-center flex-none',
-            isMacOS ? 'pt-7' : 'pt-4'
+            'px-4 pb-3 bg-white dark:bg-gray-900 sticky top-0 left-0 z-10 border-b flex-none dark:shadow-highlight/4',
+            isMacOS ? 'pt-6' : 'pt-4'
           )}
         >
-          <div className="flex items-center w-full text-left px-2 h-8 mt-[2px] bg-white ring-1 ring-slate-900/10 hover:ring-slate-300 focus:outline-none focus:ring-2 focus:ring-sky-500 shadow-sm rounded-lg text-slate-400 dark:bg-slate-800 dark:ring-0 dark:text-slate-300 dark:highlight-white/5 dark:hover:bg-slate-700">
-            <SearchIcon className="w-4 h-4 flex-none text-slate-300 dark:text-slate-400" />
-            <input
-              className="flex-auto bg-transparent w-full px-2 focus:ring-0 outline-none h-full border-0 text-slate-900 dark:text-slate-200"
-              aria-label="search"
-              ref={searchInputRef}
-              onKeyDown={onChange}
-            />
-            {searchValue && (
-              <XCircleIcon
-                onClick={() => {
-                  setSearchValue('')
-                  if (searchInputRef.current) {
-                    searchInputRef.current.value = ''
-                  }
-                }}
-                className="w-4 h-4 cursor-pointer flex-none text-slate-300 dark:text-slate-400"
+          <div className="h-9 flex items-center">
+            <div className="flex items-center w-full text-left px-2 h-8 mt-[2px] bg-white ring-1 ring-slate-900/10 hover:ring-slate-300 focus:outline-none focus:ring-2 focus:ring-sky-500 shadow-sm rounded-lg text-slate-400 dark:bg-slate-800 dark:ring-0 dark:text-slate-300 dark:highlight-white/5 dark:hover:bg-slate-700">
+              <SearchIcon className="w-4 h-4 flex-none text-slate-300 dark:text-slate-400" />
+              <input
+                className="flex-auto bg-transparent w-full px-2 focus:ring-0 outline-none h-full border-0 text-slate-900 dark:text-slate-200"
+                aria-label="search"
+                ref={searchInputRef}
+                onKeyDown={onChange}
               />
+              {searchValue && (
+                <XCircleIcon
+                  onClick={() => {
+                    setSearchValue('')
+                    if (searchInputRef.current) {
+                      searchInputRef.current.value = ''
+                    }
+                  }}
+                  className="w-4 h-4 cursor-pointer flex-none text-slate-300 dark:text-slate-400"
+                />
+              )}
+            </div>
+            {!searchValue && (
+              <span
+                onClick={() => setShowToc(!showToc)}
+                className="pl-2 cursor-pointer text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300"
+              >
+                {showToc ? <ListIcon /> : <ListTreeIcon />}
+              </span>
             )}
           </div>
-          {!searchValue && (
-            <span
-              onClick={() => setShowToc(!showToc)}
-              className="pl-2 cursor-pointer text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300"
-            >
-              {showToc ? <ListIcon /> : <ListTreeIcon />}
-            </span>
-          )}
         </div>
         <SearchList
           value={searchList}

src/components/Header.js

@@ -12,8 +12,8 @@ export default function Header({ children, logo }) {
     <div
       data-tauri-drag-region
       className={clsx(
-        'relative z-20 flex-none pb-3 pl-5 pr-3 sm:pl-6 sm:pr-4 md:pr-3.5 lg:px-6 flex items-center justify-between antialiased select-none',
-        isMacOS ? 'pt-6' : 'pt-3'
+        'sticky top-0 z-20 flex-none pb-3 px-5 flex items-center justify-between antialiased select-none border-b dark:shadow-lg',
+        isMacOS ? 'pt-6' : 'pt-4'
       )}
       style={{ fontFeatureSettings: '"cv02", "cv03", "cv04", "cv11"' }}
     >
@@ -22,9 +22,7 @@ export default function Header({ children, logo }) {
       </div>
       <div className="flex items-center space-x-2">
         {children}
-
         <div className="block mx-2 w-px h-6 bg-gray-200 dark:bg-gray-700" />
-
         <Button size="icon" onClick={toggleTheme} variant="outline">
           <Sun className="w-5 h-5 stroke-primary fill-sky-100 dark:fill-sky-400/50 hidden dark:block" />
           <MoonStar className="w-5 h-5 stroke-primary fill-sky-100 dark:fill-sky-400/50 dark:hidden" />

src/components/ImagePreview.tsx

@@ -1,5 +1,6 @@
+/* eslint-disable @next/next/no-img-element */
 import React from 'react'
-import { convertFileSrc } from '@tauri-apps/api/core'
+import { convertImageFileSrc } from '@/lib/bindings'
 
 type Props = {
   path: string
@@ -9,7 +10,11 @@ export default function ImagePreview({ path }: Props) {
   return (
     <div className="h-full flex overflow-auto">
       <div className="p-8 flex justify-center items-center m-auto">
-        <img style={{ maxWidth: '100%' }} src={convertFileSrc('') + path} />
+        <img
+          alt=""
+          style={{ maxWidth: '100%' }}
+          src={convertImageFileSrc(path)}
+        />
       </div>
     </div>
   )