mirror of
https://github.com/Buriburizaem0n/admin-frontend-domain.git
synced 2026-05-06 05:38:51 +00:00
implement setting page (#12)
This commit is contained in:
UUBulb
GitHub
@@ -13,13 +13,13 @@ import {
|
||||
import { KeyedMutator } from "swr";
|
||||
import { buttonVariants } from "@/components/ui/button"
|
||||
|
||||
interface ButtonGroupProps<T> {
|
||||
interface ButtonGroupProps<E, U> {
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
delete: { fn: (id: number[]) => Promise<void>, id: number, mutate: KeyedMutator<T> };
|
||||
delete: { fn: (id: E[]) => Promise<void>, id: E, mutate: KeyedMutator<U> };
|
||||
}
|
||||
|
||||
export function ActionButtonGroup<T>({ className, children, delete: { fn, id, mutate } }: ButtonGroupProps<T>) {
|
||||
export function ActionButtonGroup<E, U>({ className, children, delete: { fn, id, mutate } }: ButtonGroupProps<E, U>) {
|
||||
const handleDelete = async () => {
|
||||
await fn([id]);
|
||||
await mutate();
|
||||
|
||||
@@ -14,13 +14,13 @@ import {
|
||||
import { KeyedMutator } from "swr";
|
||||
import { toast } from "sonner"
|
||||
|
||||
interface ButtonGroupProps<T> {
|
||||
interface ButtonGroupProps<E, U> {
|
||||
className?: string;
|
||||
children?: React.ReactNode;
|
||||
delete: { fn: (id: number[]) => Promise<void>, id: number[], mutate: KeyedMutator<T> };
|
||||
delete: { fn: (id: E[]) => Promise<void>, id: E[], mutate: KeyedMutator<U> };
|
||||
}
|
||||
|
||||
export function HeaderButtonGroup<T>({ className, children, delete: { fn, id, mutate } }: ButtonGroupProps<T>) {
|
||||
export function HeaderButtonGroup<E, U>({ className, children, delete: { fn, id, mutate } }: ButtonGroupProps<E, U>) {
|
||||
const handleDelete = async () => {
|
||||
await fn(id);
|
||||
await mutate();
|
||||
|
||||
+20
-15
@@ -10,8 +10,8 @@ import { Card } from "./ui/card";
|
||||
import { useMainStore } from "@/hooks/useMainStore";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
|
||||
import { NzNavigationMenuLink } from "./xui/navigation-menu";
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./ui/dropdown-menu";
|
||||
import { User, LogOut } from "lucide-react";
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger } from "./ui/dropdown-menu";
|
||||
import { LogOut, Settings } from "lucide-react";
|
||||
import { useAuth } from "@/hooks/useAuth";
|
||||
import { Link, useLocation } from "react-router-dom";
|
||||
import { useMediaQuery } from "@/hooks/useMediaQuery";
|
||||
@@ -47,6 +47,7 @@ export default function Header() {
|
||||
const isDesktop = useMediaQuery("(min-width: 890px)")
|
||||
|
||||
const [open, setOpen] = useState(false)
|
||||
const [dropdownOpen, setDropdownOpen] = useState(false);
|
||||
|
||||
return (
|
||||
isDesktop ? (
|
||||
@@ -105,7 +106,7 @@ export default function Header() {
|
||||
<ModeToggle />
|
||||
{
|
||||
profile && <>
|
||||
<DropdownMenu>
|
||||
<DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Avatar className="ml-1 h-8 w-8 cursor-pointer border-foreground border-[1px]">
|
||||
<AvatarImage src={'https://api.dicebear.com/7.x/notionists/svg?seed=' + profile.username} alt={profile.username} />
|
||||
@@ -116,14 +117,16 @@ export default function Header() {
|
||||
<DropdownMenuLabel>{profile.username}</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem>
|
||||
<User />
|
||||
<span>Profile</span>
|
||||
<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
|
||||
<DropdownMenuItem onClick={() => { setDropdownOpen(false) }}>
|
||||
<Link to="/dashboard/settings" className="flex items-center gap-2 w-full">
|
||||
<Settings />
|
||||
Settings
|
||||
<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onClick={logout}>
|
||||
<DropdownMenuItem onClick={logout} className="cursor-pointer">
|
||||
<LogOut />
|
||||
<span>Log out</span>
|
||||
<DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
|
||||
@@ -171,13 +174,13 @@ export default function Header() {
|
||||
}
|
||||
</div>
|
||||
<Card className="mx-2 my-2 flex justify-center items-center hover:bg-accent transition duration-200">
|
||||
<Link className="inline-flex w-full items-center px-4 py-2" to="/dashboard"><img className="h-7 mr-1" src='/dashboard/logo.svg' /> NEZHA</Link>
|
||||
<Link className="inline-flex w-full items-center px-4 py-2" to={profile ? "/dashboard" : '#'}><img className="h-7 mr-1" src='/dashboard/logo.svg' /> NEZHA</Link>
|
||||
</Card>
|
||||
<div className="ml-auto flex items-center gap-1">
|
||||
<ModeToggle />
|
||||
{
|
||||
profile && <>
|
||||
<DropdownMenu>
|
||||
<DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Avatar className="ml-1 h-8 w-8 cursor-pointer border-foreground border-[1px]">
|
||||
<AvatarImage src={'https://api.dicebear.com/7.x/notionists/svg?seed=' + profile.username} alt={profile.username} />
|
||||
@@ -188,14 +191,16 @@ export default function Header() {
|
||||
<DropdownMenuLabel>{profile.username}</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem>
|
||||
<User />
|
||||
<span>Profile</span>
|
||||
<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
|
||||
<DropdownMenuItem onClick={() => { setDropdownOpen(false) }}>
|
||||
<Link to="/dashboard/settings" className="flex items-center gap-2 w-full">
|
||||
<Settings />
|
||||
Settings
|
||||
<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onClick={logout}>
|
||||
<DropdownMenuItem onClick={logout} className="cursor-pointer">
|
||||
<LogOut />
|
||||
<span>Log out</span>
|
||||
<DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
|
||||
|
||||
@@ -77,7 +77,7 @@ export const ServiceCard: React.FC<ServiceCardProps> = ({ data, mutate }) => {
|
||||
resolver: zodResolver(serviceFormSchema),
|
||||
defaultValues: data ? {
|
||||
...data,
|
||||
skip_servers_raw: conv.recordToStrArr(data.skip_servers),
|
||||
skip_servers_raw: conv.recordToStrArr(data.skip_servers ? data.skip_servers : {}),
|
||||
} : {
|
||||
type: 1,
|
||||
cover: 0,
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
import {
|
||||
Tabs,
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
} from "@/components/ui/tabs"
|
||||
import { Link, useLocation } from "react-router-dom"
|
||||
|
||||
export const SettingsTab = ({ className }: { className?: string }) => {
|
||||
const location = useLocation();
|
||||
|
||||
return (
|
||||
<Tabs defaultValue={location.pathname} className={className}>
|
||||
<TabsList className="grid w-full grid-cols-3">
|
||||
<TabsTrigger value="/dashboard/settings" asChild>
|
||||
<Link to="/dashboard/settings">Config</Link>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="/dashboard/settings/user" asChild>
|
||||
<Link to="/dashboard/settings/user">User</Link>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="/dashboard/settings/waf" asChild>
|
||||
<Link to="/dashboard/settings/waf">WAF</Link>
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form"
|
||||
import { ScrollArea } from "@/components/ui/scroll-area"
|
||||
import { useForm } from "react-hook-form"
|
||||
import { z } from "zod"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { ModelUser } from "@/types"
|
||||
import { useState } from "react"
|
||||
import { KeyedMutator } from "swr"
|
||||
import { IconButton } from "@/components/xui/icon-button"
|
||||
import { createUser } from "@/api/user"
|
||||
|
||||
interface UserCardProps {
|
||||
mutate: KeyedMutator<ModelUser[]>;
|
||||
}
|
||||
|
||||
const userFormSchema = z.object({
|
||||
username: z.string().min(1),
|
||||
password: z.string().min(8).max(72),
|
||||
});
|
||||
|
||||
export const UserCard: React.FC<UserCardProps> = ({ mutate }) => {
|
||||
const form = useForm<z.infer<typeof userFormSchema>>({
|
||||
resolver: zodResolver(userFormSchema),
|
||||
defaultValues: {
|
||||
username: "",
|
||||
password: "",
|
||||
},
|
||||
resetOptions: {
|
||||
keepDefaultValues: false,
|
||||
}
|
||||
})
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const onSubmit = async (values: z.infer<typeof userFormSchema>) => {
|
||||
await createUser(values);
|
||||
setOpen(false);
|
||||
await mutate();
|
||||
form.reset();
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<IconButton icon="plus" />
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-xl">
|
||||
<ScrollArea className="max-h-[calc(100dvh-5rem)] p-3">
|
||||
<div className="items-center mx-1">
|
||||
<DialogHeader>
|
||||
<DialogTitle>New User</DialogTitle>
|
||||
<DialogDescription />
|
||||
</DialogHeader>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2 my-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="username"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Username</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Password</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<DialogFooter className="justify-end">
|
||||
<DialogClose asChild>
|
||||
<Button type="button" className="my-2" variant="secondary">
|
||||
Close
|
||||
</Button>
|
||||
</DialogClose>
|
||||
<Button type="submit" className="my-2">Submit</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</Form>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user