User Role (#69)

* fix: window.DisableAnimatedMan as boolean * chore: auto-fix linting and formatting issues * feat: user role * feat: use user agent_secret * feat: hide setting when user role is not admin * feat: new waf api * chore: auto-fix linting and formatting issues * fix: admin settings page * feat: online-user setting * fix: pagination --------- Co-authored-by: hamster1963 <hamster1963@users.noreply.github.com>
2026-02-05 05:00:06 +00:00 · 2024-12-22 23:17:20 +08:00
parent cc30a53380
commit 4d12682cdf
15 changed files with 703 additions and 36 deletions
--- a/src/components/install-commands.tsx
+++ b/src/components/install-commands.tsx
@@ -5,9 +5,10 @@ import {
    DropdownMenuItem,
    DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
+import { useAuth } from "@/hooks/useAuth"
 import useSettings from "@/hooks/useSetting"
 import { copyToClipboard } from "@/lib/utils"
-import { ModelSettingResponse } from "@/types"
+import { ModelProfile, ModelSettingResponse } from "@/types"
 import i18next from "i18next"
 import { Check, Clipboard } from "lucide-react"
 import { forwardRef, useState } from "react"
@@ -23,14 +24,17 @@ enum OSTypes {
 export const InstallCommandsMenu = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
    const [copy, setCopy] = useState(false)
    const { data: settings } = useSettings()
+    const { profile } = useAuth()
+
    const { t } = useTranslation()

    const switchState = async (type: number) => {
        if (!copy) {
            try {
                setCopy(true)
+                if (!profile) throw new Error("Profile is not found.")
                if (!settings) throw new Error("Settings is not found.")
-                await copyToClipboard(generateCommand(type, settings) || "")
+                await copyToClipboard(generateCommand(type, settings, profile) || "")
            } catch (e: Error | any) {
                console.error(e)
                toast(t("Error"), {
@@ -85,9 +89,19 @@ export const InstallCommandsMenu = forwardRef<HTMLButtonElement, ButtonProps>((p
 const generateCommand = (
    type: number,
    { agent_secret_key, install_host, tls }: ModelSettingResponse,
+    { agent_secret, role }: ModelProfile,
 ) => {
    if (!install_host) throw new Error(i18next.t("Results.InstallHostRequired"))

+    // 如果 agent_secret 为空且 role 为 0 ，则使用 agent_secret_key，否则如果 agent_secret 为空则报错
+    if (!agent_secret && role === 0) {
+        agent_secret = agent_secret_key
+    } else if (!agent_secret) {
+        throw new Error(i18next.t("Results.AgentSecretRequired"))
+    }
+
+    agent_secret_key = agent_secret
+
    const env = `NZ_SERVER=${install_host} NZ_TLS=${tls || false} NZ_CLIENT_SECRET=${agent_secret_key}`
    const env_win = `$env:NZ_SERVER=\"${install_host}\";$env:NZ_TLS=\"${tls || false}\";$env:NZ_CLIENT_SECRET=\"${agent_secret_key}\";`

--- a/src/components/settings-tab.tsx
+++ b/src/components/settings-tab.tsx
@@ -1,20 +1,30 @@
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { useAuth } from "@/hooks/useAuth"
 import { useTranslation } from "react-i18next"
-import { Link, useLocation } from "react-router-dom"
+import { Link } from "react-router-dom"

 export const SettingsTab = ({ className }: { className?: string }) => {
    const { t } = useTranslation()
-    const location = useLocation()
+    const { profile } = useAuth()
+
+    const isAdmin = profile?.role === 0

    return (
-        <Tabs defaultValue={location.pathname} className={className}>
-            <TabsList className="grid w-full grid-cols-3">
-                <TabsTrigger value="/dashboard/settings" asChild>
-                    <Link to="/dashboard/settings">{t("Settings")}</Link>
-                </TabsTrigger>
-                <TabsTrigger value="/dashboard/settings/user" asChild>
-                    <Link to="/dashboard/settings/user">{t("User")}</Link>
-                </TabsTrigger>
+        <Tabs defaultValue={window.location.pathname} className={className}>
+            <TabsList className="grid w-full grid-cols-4">
+                {isAdmin && (
+                    <>
+                        <TabsTrigger value="/dashboard/settings" asChild>
+                            <Link to="/dashboard/settings">{t("Settings")}</Link>
+                        </TabsTrigger>
+                        <TabsTrigger value="/dashboard/settings/user" asChild>
+                            <Link to="/dashboard/settings/user">{t("User")}</Link>
+                        </TabsTrigger>
+                        <TabsTrigger value="/dashboard/settings/online-user" asChild>
+                            <Link to="/dashboard/settings/online-user">{t("OnlineUser")}</Link>
+                        </TabsTrigger>
+                    </>
+                )}
                <TabsTrigger value="/dashboard/settings/waf" asChild>
                    <Link to="/dashboard/settings/waf">{t("WAF")}</Link>
                </TabsTrigger>
--- a/src/components/ui/pagination.tsx
+++ b/src/components/ui/pagination.tsx
@@ -0,0 +1,97 @@
+import { ButtonProps, buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+import * as React from "react"
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+    <nav
+        role="navigation"
+        aria-label="pagination"
+        className={cn("mx-auto flex w-full justify-center", className)}
+        {...props}
+    />
+)
+Pagination.displayName = "Pagination"
+
+const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
+    ({ className, ...props }, ref) => (
+        <ul ref={ref} className={cn("flex flex-row items-center gap-1", className)} {...props} />
+    ),
+)
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
+    ({ className, ...props }, ref) => <li ref={ref} className={cn("", className)} {...props} />,
+)
+PaginationItem.displayName = "PaginationItem"
+
+type PaginationLinkProps = {
+    isActive?: boolean
+} & Pick<ButtonProps, "size"> &
+    React.ComponentProps<"a">
+
+const PaginationLink = ({ className, isActive, size = "icon", ...props }: PaginationLinkProps) => (
+    <a
+        aria-current={isActive ? "page" : undefined}
+        className={cn(
+            buttonVariants({
+                variant: isActive ? "outline" : "ghost",
+                size,
+            }),
+            className,
+        )}
+        {...props}
+    />
+)
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = ({
+    className,
+    ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+    <PaginationLink
+        aria-label="Go to previous page"
+        size="default"
+        className={cn("gap-1 pl-2.5", className)}
+        {...props}
+    >
+        <ChevronLeft className="h-4 w-4" />
+        <span>Previous</span>
+    </PaginationLink>
+)
+PaginationPrevious.displayName = "PaginationPrevious"
+
+const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
+    <PaginationLink
+        aria-label="Go to next page"
+        size="default"
+        className={cn("gap-1 pr-2.5", className)}
+        {...props}
+    >
+        <span>Next</span>
+        <ChevronRight className="h-4 w-4" />
+    </PaginationLink>
+)
+PaginationNext.displayName = "PaginationNext"
+
+const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
+    <span
+        aria-hidden
+        className={cn("flex h-9 w-9 items-center justify-center", className)}
+        {...props}
+    >
+        <MoreHorizontal className="h-4 w-4" />
+        <span className="sr-only">More pages</span>
+    </span>
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+    Pagination,
+    PaginationContent,
+    PaginationEllipsis,
+    PaginationItem,
+    PaginationLink,
+    PaginationNext,
+    PaginationPrevious,
+}
--- a/src/components/user.tsx
+++ b/src/components/user.tsx
@@ -20,6 +20,13 @@ import {
 } from "@/components/ui/form"
 import { Input } from "@/components/ui/input"
 import { ScrollArea } from "@/components/ui/scroll-area"
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select"
 import { IconButton } from "@/components/xui/icon-button"
 import { ModelUser } from "@/types"
 import { zodResolver } from "@hookform/resolvers/zod"
@@ -35,6 +42,7 @@ interface UserCardProps {

 const userFormSchema = z.object({
    username: z.string().min(1),
+    role: z.number().int().min(0).max(1),
    password: z.string().min(8).max(72),
 })

@@ -44,6 +52,7 @@ export const UserCard: React.FC<UserCardProps> = ({ mutate }) => {
        resolver: zodResolver(userFormSchema),
        defaultValues: {
            username: "",
+            role: 1,
            password: "",
        },
        resetOptions: {
@@ -100,6 +109,34 @@ export const UserCard: React.FC<UserCardProps> = ({ mutate }) => {
                                        </FormItem>
                                    )}
                                />
+                                <FormField
+                                    control={form.control}
+                                    name="role"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>{t("Role")}</FormLabel>
+                                            <Select
+                                                onValueChange={(value) =>
+                                                    field.onChange(parseInt(value))
+                                                }
+                                                defaultValue={field.value.toString()}
+                                            >
+                                                <FormControl>
+                                                    <SelectTrigger>
+                                                        <SelectValue
+                                                            placeholder={t("SelectRole")}
+                                                        />
+                                                    </SelectTrigger>
+                                                </FormControl>
+                                                <SelectContent>
+                                                    <SelectItem value="0">{t("Admin")}</SelectItem>
+                                                    <SelectItem value="1">{t("User")}</SelectItem>
+                                                </SelectContent>
+                                            </Select>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
                                <DialogFooter className="justify-end">
                                    <DialogClose asChild>
                                        <Button type="button" className="my-2" variant="secondary">