Skip to content

Commit

Permalink
add update dialog
Browse files Browse the repository at this point in the history
  • Loading branch information
Nervonment committed Jun 8, 2024
1 parent c4bc83c commit 52e550b
Show file tree
Hide file tree
Showing 6 changed files with 281 additions and 14 deletions.
96 changes: 94 additions & 2 deletions app/page.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,20 @@
const poppins = Poppins({ subsets: ["latin"], weight: ["800"] })

import SudokuBoard from "@/components/sudoku_board";
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";
import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { Label } from "@/components/ui/label";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Separator } from "@/components/ui/separator";
import { Slider } from "@/components/ui/slider";
import { Switch } from "@/components/ui/switch";
import { cn, difficultyDesc } from "@/lib/utils";
import { getVersion } from "@tauri-apps/api/app";
import { invoke } from "@tauri-apps/api/tauri";
import { ChevronDown, HelpCircle, Settings2 } from "lucide-react";
import { checkUpdate, installUpdate } from "@tauri-apps/api/updater";
import { ChevronDown, HelpCircle, Loader2, Settings2 } from "lucide-react";
import { useTheme } from "next-themes";
import { Poppins } from "next/font/google";
import Link from "next/link";
Expand All @@ -21,12 +25,27 @@ import { useEffect, useState } from "react";
export default function Home() {
const [difficulty, setDifficulty] = useState(2);
const [markingAssist, setMarkingAssist] = useState(false);
const [appVersion, setAppversion] = useState("");
const [updateDialogOpen, setUpdateDialogOpen] = useState(false);
const [updateManifest, setUpdateManifest] = useState({});
const [updating, setUpdating] = useState(false);
const [updateFailed, setUpdateFailed] = useState(false);

useEffect(() => {
invoke('get_difficulty').then((difficulty) => setDifficulty(difficulty));
invoke('get_marking_assist').then((markingAssist) => setMarkingAssist(markingAssist));
}, []);

useEffect(() => {
getVersion().then(setAppversion);
checkUpdate().then(({ shouldUpdate, manifest }) => {
if (shouldUpdate) {
setUpdateManifest(manifest);
setUpdateDialogOpen(true);
}
})
}, []);

const randomPuzzle = [
[4, 0, 8, 0, 0, 0, 0, 0, 9],
[0, 0, 0, 4, 9, 0, 7, 0, 0],
Expand Down Expand Up @@ -58,6 +77,10 @@ export default function Home() {
</DrawerTrigger>
<DrawerContent>
<div className="w-80 py-8 px-4 flex flex-col justify-center gap-4">
<div className="font-bold text-lg">
设置
</div>
<Separator />
<div className="flex flex-col justify-center gap-4 mb-4">
<div className="flex justify-between">
<Label className="font-bold">难度</Label>
Expand Down Expand Up @@ -99,7 +122,7 @@ export default function Home() {
<DropdownMenuTrigger asChild>
<Label className="flex items-center cursor-pointer">{
{ "light": "浅色", "dark": "深色", "system": "跟随系统" }[theme]
}<ChevronDown size={14}/>
}<ChevronDown size={14} />
</Label>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
Expand All @@ -115,10 +138,79 @@ export default function Home() {
</DropdownMenuContent>
</DropdownMenu>
</div>
<div className="flex-1 flex justify-center items-end">
<Label className="text-muted-foreground">版本:v{appVersion}</Label>
</div>
</div>
</DrawerContent>
</Drawer>

<AlertDialog
defaultOpen={false}
open={updateDialogOpen}
>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>
版本更新
</AlertDialogTitle>
{updateManifest ?
<AlertDialogDescription>
<p>发现新版本v{updateManifest.version}。更新内容:</p>
<br />
<p>{updateManifest.body}</p>
<br />
<p>是否立即更新?</p>
{
updateFailed ?
<>
<br />
<p className="text-destructive">
更新失败,请前往
<button
className="underline bg-none border-none"
onClick={() => window.open("https://github.com/Nervonment/sudoxide/releases")}
>
发布页面
</button>
手动下载更新。
</p>
</>
: <></>
}
</AlertDialogDescription> : <></>
}
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel
onClick={() => {
setUpdateDialogOpen(false);
setUpdateFailed(false);
setUpdating(false);
}}
>
稍后再说
</AlertDialogCancel>
<AlertDialogAction
disabled={updating}
className="flex items-center"
onClick={() => {
setUpdating(true);
installUpdate()
.catch(() => {
setUpdateFailed(true);
});
}}
>
{
updating ?
<>更新中<Loader2 size={14} className="turn" /> </> : <>立即更新</>
}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>

<div className="absolute z-[-10] left-[-120px] bottom-[-380px] brightness-75">
<SudokuBoard board={randomPuzzle} />
</div>
Expand Down
99 changes: 99 additions & 0 deletions components/ui/alert-dialog.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
"use client"

import * as React from "react"
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

const AlertDialog = AlertDialogPrimitive.Root

const AlertDialogTrigger = AlertDialogPrimitive.Trigger

const AlertDialogPortal = AlertDialogPrimitive.Portal

const AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Overlay
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)}
{...props}
ref={ref} />
))
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName

const AlertDialogContent = React.forwardRef(({ className, ...props }, ref) => (
<AlertDialogPortal>
<AlertDialogOverlay />
<AlertDialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
className
)}
{...props} />
</AlertDialogPortal>
))
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName

const AlertDialogHeader = ({
className,
...props
}) => (
<div
className={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
{...props} />
)
AlertDialogHeader.displayName = "AlertDialogHeader"

const AlertDialogFooter = ({
className,
...props
}) => (
<div
className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
{...props} />
)
AlertDialogFooter.displayName = "AlertDialogFooter"

const AlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold", className)} {...props} />
))
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName

const AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Description
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props} />
))
AlertDialogDescription.displayName =
AlertDialogPrimitive.Description.displayName

const AlertDialogAction = React.forwardRef(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
))
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName

const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Cancel
ref={ref}
className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
{...props} />
))
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName

export {
AlertDialog,
AlertDialogPortal,
AlertDialogOverlay,
AlertDialogTrigger,
AlertDialogContent,
AlertDialogHeader,
AlertDialogFooter,
AlertDialogTitle,
AlertDialogDescription,
AlertDialogAction,
AlertDialogCancel,
}
25 changes: 25 additions & 0 deletions components/ui/separator.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
"use client"

import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"

import { cn } from "@/lib/utils"

const Separator = React.forwardRef((
{ className, orientation = "horizontal", decorative = true, ...props },
ref
) => (
<SeparatorPrimitive.Root
ref={ref}
decorative={decorative}
orientation={orientation}
className={cn(
"shrink-0 bg-border",
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
className
)}
{...props} />
))
Separator.displayName = SeparatorPrimitive.Root.displayName

export { Separator }
61 changes: 57 additions & 4 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "sudoxide",
"version": "0.2.1",
"version": "0.2.2",
"private": true,
"scripts": {
"dev": "next dev",
Expand All @@ -10,10 +10,12 @@
"tauri": "tauri"
},
"dependencies": {
"@radix-ui/react-alert-dialog": "^1.0.5",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-popover": "^1.0.7",
"@radix-ui/react-separator": "^1.0.3",
"@radix-ui/react-slider": "^1.1.2",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-switch": "^1.0.3",
Expand Down
Loading

0 comments on commit 52e550b

Please sign in to comment.