added some optimizations

ui/src/components/ui/scroll-area.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }

ui/src/pages/DashboardLayout.tsx

@@ -169,8 +169,20 @@ export default function Dashboard() {
                 </DropdownMenuContent>
               </DropdownMenu>
             </header>
-            <main className="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
+            <main className="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6 relative">
               <Outlet />
+
+              <div className="fixed right-0 bottom-0 w-full flex justify-between p-5">
+                <div className=""></div>
+                <div className="text-muted-foreground text-sm hover:text-stone-900">
+                  <a
+                    href="https://github.com/usual2970/certimate/releases"
+                    target="_blank"
+                  >
+                    Certimate v0.0.2
+                  </a>
+                </div>
+              </div>
             </main>
           </div>
         </div>

ui/src/pages/domains/Home.tsx

@@ -20,7 +20,13 @@ import { Tooltip, TooltipTrigger } from "@/components/ui/tooltip";
 import { useToast } from "@/components/ui/use-toast";
 import { Domain } from "@/domain/domain";
 import { convertZulu2Beijing, getDate } from "@/lib/time";
-import { list, remove, save } from "@/repository/domains";
+import {
+  list,
+  remove,
+  save,
+  subscribeId,
+  unsubscribeId,
+} from "@/repository/domains";
 
 import { TooltipContent, TooltipProvider } from "@radix-ui/react-tooltip";
 import { CircleCheck, CircleX, Earth } from "lucide-react";
@@ -82,22 +88,25 @@ const Home = () => {
 
   const handleRightNowClick = async (domain: Domain) => {
     try {
+      unsubscribeId(domain.id);
+      subscribeId(domain.id, (resp) => {
+        console.log(resp);
+        const updatedDomains = domains.map((domain) => {
+          if (domain.id === resp.id) {
+            return { ...resp };
+          }
+          return domain;
+        });
+        setDomains(updatedDomains);
+      });
       domain.rightnow = true;
-      const resp = await save(domain);
-      const updatedDomains = domains.map((domain) => {
-        if (domain.id === resp.id) {
-          return { ...resp };
-        }
-        return domain;
-      });
-      setDomains(updatedDomains);
+
+      await save(domain);
+
       toast.toast({
-        title: "执行成功",
-        description: "执行成功",
+        title: "操作成功",
+        description: "已发起部署，请稍后查看部署日志。",
       });
-      setTimeout(() => {
-        navigate(0);
-      }, 1000);
     } catch (e) {
       toast.toast({
         title: "执行失败",

ui/src/pages/history/History.tsx

@@ -1,6 +1,7 @@
 import DeployProgress from "@/components/certimate/DeployProgress";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
 
 import {
   Sheet,
@@ -35,7 +36,7 @@ const History = () => {
   }, [domain]);
 
   return (
-    <div>
+    <ScrollArea className="h-[80vh] overflow-hidden">
       <div className="text-muted-foreground">部署历史</div>
       {!deployments?.length ? (
         <>
@@ -184,7 +185,7 @@ const History = () => {
           ))}
         </>
       )}
-    </div>
+    </ScrollArea>
   );
 };
 

ui/src/repository/domains.ts

@@ -25,3 +25,24 @@ export const save = async (data: Domain) => {
 export const remove = async (id: string) => {
   return await getPb().collection("domains").delete(id);
 };
+
+type Callback = (data: Domain) => void;
+export const subscribeId = (id: string, callback: Callback) => {
+  return getPb()
+    .collection("domains")
+    .subscribe<Domain>(
+      id,
+      (e) => {
+        if (e.action === "update") {
+          callback(e.record);
+        }
+      },
+      {
+        expand: "lastDeployment",
+      }
+    );
+};
+
+export const unsubscribeId = (id: string) => {
+  getPb().collection("domains").unsubscribe(id);
+};