style: 💄优化了历史记录回滚的布局

Author: codexu

src/app/core/article/custom-toolbar/history.tsx

@@ -1,5 +1,4 @@
-import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
-import { HistoryIcon, LoaderCircle } from "lucide-react";
+import { GitPullRequestArrow, HistoryIcon, LoaderCircle } from "lucide-react";
 import { ExposeParam } from "md-editor-rt";
 import { RefObject, useState } from "react";
 import { Button } from "@/components/ui/button";
@@ -9,17 +8,23 @@ import { RepoNames, ResCommit } from "@/lib/github.types";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import zh from "dayjs/locale/zh-cn";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { TooltipButton } from "@/components/tooltip-button";
+import { open } from "@tauri-apps/plugin-shell";
 
 dayjs.extend(relativeTime)
 dayjs.locale(zh)
 
 export default function History({mdRef}: {mdRef: RefObject<ExposeParam>}) {
+  const [sheetOpen, setSheetOpen] = useState(false);
   const { activeFilePath, setCurrentArticle, currentArticle } = useArticleStore()
   const [commits, setCommits] = useState<ResCommit[]>([])
   const [loading, setLoading] = useState(false)
   const [commitsLoading, setCommitsLoading] = useState(false)
 
   async function onOpenChange(e: boolean) {
+    setSheetOpen(e)
     if (!e) return
     setCommitsLoading(true)
     setCommits([])
@@ -31,6 +36,7 @@ export default function History({mdRef}: {mdRef: RefObject<ExposeParam>}) {
 
   async function handleCommit(sha: string) {
     setLoading(true)
+    setSheetOpen(false)
     const cacheArticle = currentArticle;
     setCurrentArticle('正在读取历史记录...')
     const res = await getFiles({path: `${activeFilePath}?ref=${sha}`, repo: RepoNames.article})
@@ -41,35 +47,58 @@ export default function History({mdRef}: {mdRef: RefObject<ExposeParam>}) {
     }
     setLoading(false)
   }
+
+  function openHandler(url: string) {
+    open(url)
+  }
   return (
-    <DropdownMenu onOpenChange={onOpenChange}>
-      <DropdownMenuTrigger asChild className="outline-none">
+    <Sheet open={sheetOpen} onOpenChange={onOpenChange}>
+      <SheetTrigger asChild>
         <Button variant="ghost" size="icon" title="翻译">
           {
             loading ? <LoaderCircle className="animate-spin size-4" /> : <HistoryIcon />
           }
         </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuLabel>历史记录（60秒间隔）</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        {
-          commitsLoading ? 
-          <DropdownMenuItem><LoaderCircle className="animate-spin size-4" />正在获取历史记录...</DropdownMenuItem> :
-            <DropdownMenuGroup>
-              {
-                commits.length ?
-                  commits.map((commit) => (
-                    <DropdownMenuItem className="flex justify-between" key={commit.sha} onClick={() => handleCommit(commit.sha)}>
-                      <span>{commit.commit.message}</span>
-                      <span className="ml-4">{dayjs(commit.commit.committer.date).fromNow()}</span>
-                    </DropdownMenuItem>
-                  )) :
-                  <DropdownMenuItem>暂无历史记录</DropdownMenuItem>
-              }
-            </DropdownMenuGroup>
-        }
-      </DropdownMenuContent>
-    </DropdownMenu>
+      </SheetTrigger>
+      <SheetContent className="p-0 min-w-[500px]">
+        <SheetHeader className="p-4 border-b">
+          <SheetTitle>历史记录</SheetTitle>
+          <SheetDescription className="flex items-center gap-1">
+            {
+              commitsLoading ? <LoaderCircle className="size-4 animate-spin" /> : <HistoryIcon className="size-4" />
+            }
+            {
+              commitsLoading ? <span>加载中</span> : <span>{commits.length} 条记录</span>
+            }
+          </SheetDescription>
+        </SheetHeader>
+        <div className="max-h-[calc(100vh-90px)] overflow-y-auto">
+          {
+            commits.map((commit) => (
+              <div className="flex justify-between items-center gap-4 border-b px-4 py-2" key={commit.sha}>
+                <div className="flex-1 flex flex-col">
+                  <span
+                    className="text-sm line-clamp-1 hover:underline cursor-pointer"
+                    onClick={() => openHandler(commit.html_url)}
+                  >{commit.commit.message}</span>
+                  <div className="flex gap-1 items-center mt-2">
+                    <Avatar className="size-5">
+                      <AvatarImage src={commit.author.avatar_url} alt={commit.author.login} />
+                      <AvatarFallback>CN</AvatarFallback>
+                    </Avatar>
+                    <span className="text-xs text-zinc-500">
+                      {commit.author.login} 提交于 {dayjs(commit.commit.committer.date).fromNow()}
+                    </span>
+                  </div>
+                </div>
+                <div className="w-8">
+                  <TooltipButton icon={<GitPullRequestArrow />} tooltipText="拉取" onClick={() => handleCommit(commit.sha)} />
+                </div>
+              </div>
+            ))
+          }
+        </div>
+      </SheetContent>
+    </Sheet>
   )
 }

src/app/core/article/custom-toolbar/sync.tsx

@@ -50,7 +50,11 @@ export default function Sync({mdRef}: {mdRef: RefObject<ExposeParam>}) {
       repo: RepoNames.article
     })
     if (uploadRes?.status === 200 || uploadRes?.status === 201) {
-      toast({title: '同步成功', description: uploadRes.data?.commit.message})
+      if (uploadRes.data.content?.sha === sha) {
+        toast({title: '内容未改变，无需提交', variant: 'destructive'})
+      } else {
+        toast({title: '同步成功', description: uploadRes.data?.commit.message})
+      }
     }
     setLoading(false)
   }