lanhu/admin
2
0
Fork 0
Code Issues Actions Packages Releases 7 Activity

实现登录功能

Browse Source 
Signed-off-by: luorijun <luorijun@outlook.com>
This commit is contained in:
luorijun
2025-12-29 14:09:13 +08:00
parent f9a8df0fe5
commit bb8aec8ce5
19 changed files with 1079 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/actions/auth.ts Normal file
View File

@@ -0,0 +1,49 @@
"use server"
import { cookies } from "next/headers"
import type { ApiResponse } from "@/lib/api"
import { callByDevice } from "./base"
export async function login(params: LoginReq): Promise<ApiResponse> {
const resp = await callByDevice<LoginRes>("/api/auth/token", {
grant_type: "password",
login_type: "password",
login_pool: "admin",
...params,
})
if (!resp.success) {
return resp
}
// 保存到 cookies
const data = resp.data
const cookieStore = await cookies()
cookieStore.set("auth_token", data.access_token, {
httpOnly: true,
sameSite: "strict",
maxAge: Math.max(data.expires_in, 0),
})
cookieStore.set("auth_refresh", data.refresh_token, {
httpOnly: true,
sameSite: "strict",
maxAge: Number.MAX_SAFE_INTEGER,
})
return {
success: true,
data: undefined,
}
}
export type LoginReq = {
username: string
password: string
remember: boolean
}
export type LoginRes = {
access_token: string
refresh_token: string
expires_in: number
token_type: string
scope?: string
}

184
src/actions/base.ts Normal file
View File

@@ -0,0 +1,184 @@
"use server"
import { cookies, headers } from "next/headers"
import { redirect } from "next/navigation"
import { cache } from "react"
import {
API_BASE_URL,
type ApiResponse,
CLIENT_ID,
CLIENT_SECRET,
} from "@/lib/api"
// ======================
// public
// ======================
async function callPublic<R = undefined>(
endpoint: string,
data?: unknown,
): Promise<ApiResponse<R>> {
return _callPublic(endpoint, data ? JSON.stringify(data) : undefined)
}
const _callPublic = cache(
async <R = undefined>(
endpoint: string,
data?: string,
): Promise<ApiResponse<R>> => {
return call(`${API_BASE_URL}${endpoint}`, data)
},
)
// ======================
// device
// ======================
async function callByDevice<R = undefined>(
endpoint: string,
data: unknown,
): Promise<ApiResponse<R>> {
return _callByDevice(endpoint, data ? JSON.stringify(data) : undefined)
}
const _callByDevice = cache(
async <R = undefined>(
endpoint: string,
data?: string,
): Promise<ApiResponse<R>> => {
// 获取设备令牌
if (!CLIENT_ID || !CLIENT_SECRET) {
return {
success: false,
status: 401,
message: "未配置 CLIENT_ID 或 CLIENT_SECRET",
}
}
const token = Buffer.from(`${CLIENT_ID}:${CLIENT_SECRET}`).toString(
"base64url",
)
// 发起请求
return call(`${API_BASE_URL}${endpoint}`, data, `Basic ${token}`)
},
)
// ======================
// user
// ======================
async function callByUser<R = undefined>(
endpoint: string,
data?: unknown,
): Promise<ApiResponse<R>> {
return _callByUser(endpoint, data ? JSON.stringify(data) : undefined)
}
const _callByUser = cache(
async <R = undefined>(
endpoint: string,
data?: string,
): Promise<ApiResponse<R>> => {
// 获取用户令牌
const cookie = await cookies()
const token = cookie.get("auth_token")?.value
if (!token) {
return {
success: false,
status: 401,
message: "会话已失效",
}
}
// 发起请求
return await call<R>(`${API_BASE_URL}${endpoint}`, data, `Bearer ${token}`)
},
)
// ======================
// call
// ======================
async function call<R = undefined>(
url: string,
body: RequestInit["body"],
auth?: string,
): Promise<ApiResponse<R>> {
let response: Response
try {
const reqHeaders = await headers()
const reqIP = reqHeaders.get("x-forwarded-for")
const reqUA = reqHeaders.get("user-agent")
const callHeaders: RequestInit["headers"] = {
"Content-Type": "application/json",
}
if (auth) callHeaders["Authorization"] = auth
if (reqIP) callHeaders["X-Forwarded-For"] = reqIP
if (reqUA) callHeaders["User-Agent"] = reqUA
response = await fetch(url, {
method: "POST",
headers: callHeaders,
body,
})
} catch (e) {
console.error("后端请求失败", url, (e as Error).message)
throw new Error(`请求失败，网络错误`)
}
const type = response.headers.get("Content-Type") ?? "text/plain"
if (type.indexOf("text/plain") !== -1) {
const text = await response.text()
if (!response.ok) {
console.log("后端请求失败", url, `status=${response.status}`, text)
return {
success: false,
status: response.status,
message: text || "请求失败",
}
}
if (text?.trim()?.length) {
console.log("未处理的响应成功", `type=text`, `text=${text}`)
}
return {
success: true,
data: undefined as R, // 强转类型，考虑优化
}
} else if (type.indexOf("application/json") !== -1) {
const json = await response.json()
if (!response.ok) {
console.log("后端请求失败", url, `status=${response.status}`, json)
return {
success: false,
status: response.status,
message: json.message || json.error_description || "请求失败", // 业务错误（message）或者 oauth 错误（error_description）
}
}
return {
success: true,
data: json,
}
}
throw new Error(`无法解析响应数据，未处理的 Content-Type: ${type}`)
}
async function postCall<R = undefined>(rawResp: Promise<ApiResponse<R>>) {
const header = await headers()
const pathname = header.get("x-pathname") || "/"
const resp = await rawResp
// 重定向到登录页
const match = [/^\/admin.*/].some(item => item.test(pathname))
if (match && !resp.success && resp.status === 401) {
console.log("🚗🚗🚗🚗🚗 非正常重定向 🚗🚗🚗🚗🚗")
redirect("/login?force=true")
}
return resp
}
// 导出
export { callPublic, callByDevice, callByUser }

132
src/app/globals.css
View File

@@ -1,26 +1,124 @@
@import "tailwindcss";
:root {
--background: #ffffff;
--foreground: #171717;
}
@custom-variant dark (&:is(.dark *));
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
--color-sidebar-ring: var(--sidebar-ring);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar: var(--sidebar);
--color-chart-5: var(--chart-5);
--color-chart-4: var(--chart-4);
--color-chart-3: var(--chart-3);
--color-chart-2: var(--chart-2);
--color-chart-1: var(--chart-1);
--color-ring: var(--ring);
--color-input: var(--input);
--color-border: var(--border);
--color-destructive: var(--destructive);
--color-accent-foreground: var(--accent-foreground);
--color-accent: var(--accent);
--color-muted-foreground: var(--muted-foreground);
--color-muted: var(--muted);
--color-secondary-foreground: var(--secondary-foreground);
--color-secondary: var(--secondary);
--color-primary-foreground: var(--primary-foreground);
--color-primary: var(--primary);
--color-popover-foreground: var(--popover-foreground);
--color-popover: var(--popover);
--color-card-foreground: var(--card-foreground);
--color-card: var(--card);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--radius-2xl: calc(var(--radius) + 8px);
--radius-3xl: calc(var(--radius) + 12px);
--radius-4xl: calc(var(--radius) + 16px);
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
:root {
--radius: 0.625rem;
--background: oklch(1 0 0);
--foreground: oklch(0.13 0.028 261.692);
--card: oklch(1 0 0);
--card-foreground: oklch(0.13 0.028 261.692);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.13 0.028 261.692);
--primary: oklch(0.7 0.12 265);
--primary-foreground: oklch(0.985 0.002 247.839);
--secondary: oklch(0.967 0.003 264.542);
--secondary-foreground: oklch(0.21 0.034 264.665);
--muted: oklch(0.967 0.003 264.542);
--muted-foreground: oklch(0.551 0.027 264.364);
--accent: oklch(0.967 0.003 264.542);
--accent-foreground: oklch(0.21 0.034 264.665);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--ring: oklch(0.7 0.12 265);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.985 0.002 247.839);
--sidebar-foreground: oklch(0.13 0.028 261.692);
--sidebar-primary: oklch(0.21 0.034 264.665);
--sidebar-primary-foreground: oklch(0.985 0.002 247.839);
--sidebar-accent: oklch(0.967 0.003 264.542);
--sidebar-accent-foreground: oklch(0.21 0.034 264.665);
--sidebar-border: oklch(0.928 0.006 264.531);
--sidebar-ring: oklch(0.707 0.022 261.325);
}
body {
background: var(--background);
color: var(--foreground);
font-family: Arial, Helvetica, sans-serif;
.dark {
--background: oklch(0.13 0.028 261.692);
--foreground: oklch(0.985 0.002 247.839);
--card: oklch(0.21 0.034 264.665);
--card-foreground: oklch(0.985 0.002 247.839);
--popover: oklch(0.21 0.034 264.665);
--popover-foreground: oklch(0.985 0.002 247.839);
--primary: oklch(0.928 0.006 264.531);
--primary-foreground: oklch(0.21 0.034 264.665);
--secondary: oklch(0.278 0.033 256.848);
--secondary-foreground: oklch(0.985 0.002 247.839);
--muted: oklch(0.278 0.033 256.848);
--muted-foreground: oklch(0.707 0.022 261.325);
--accent: oklch(0.278 0.033 256.848);
--accent-foreground: oklch(0.985 0.002 247.839);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.551 0.027 264.364);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.21 0.034 264.665);
--sidebar-foreground: oklch(0.985 0.002 247.839);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0.002 247.839);
--sidebar-accent: oklch(0.278 0.033 256.848);
--sidebar-accent-foreground: oklch(0.985 0.002 247.839);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.551 0.027 264.364);
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
}
}

16
src/app/layout.tsx
View File

@@ -1,16 +1,20 @@
import type { Metadata } from "next";
import type { ReactNode } from "react";
import "./globals.css";
import type { Metadata } from "next"
import type { ReactNode } from "react"
import "./globals.css"
import { Toaster } from "@/components/ui/sonner"
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
}
export default function RootLayout(props: { children: ReactNode }) {
return (
<html lang="zh-CN">
<body>{props.children}</body>
<body>
{props.children}
<Toaster />
</body>
</html>
);
)
}

197
src/app/login/page.tsx
View File

@@ -1,85 +1,132 @@
export type LoginPageProps = {};
"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { useRouter } from "next/navigation"
import { Controller, useForm } from "react-hook-form"
import { toast } from "sonner"
import { z } from "zod"
import { login } from "@/actions/auth"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {
Field,
FieldDescription,
FieldError,
FieldGroup,
FieldLabel,
FieldLegend,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
const schema = z.object({
username: z.string().min(4).max(50),
password: z.string().min(4).max(50),
remember: z.boolean(),
})
type Schema = z.infer<typeof schema>
export default function LoginPage() {
const methods = useForm<Schema>({
resolver: zodResolver(schema),
defaultValues: {
username: "",
password: "",
remember: true,
},
})
const router = useRouter()
const onSubmit = async (data: Schema) => {
try {
const resp = await login(data)
if (!resp.success) {
throw new Error(resp.message)
}
// 登录成功后跳转到首页
router.push("/")
} catch (e) {
toast.error("登录失败", {
description: e instanceof Error ? e.message : "未知错误",
})
}
}
export default function LoginPage(props: LoginPageProps) {
return (
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center p-4">
<div className="min-h-screen bg-linear-to-br from-blue-50 to-indigo-50 flex items-center justify-center p-4">
{/* 登录卡片 */}
<div className="bg-white rounded-lg shadow-lg w-full max-w-md p-8">
<div className="text-center mb-8">
<h1 className="text-2xl font-bold text-gray-800">内容管理系统</h1>
<p className="text-sm text-gray-500 mt-2">请登录以访问管理后台</p>
<form
onSubmit={methods.handleSubmit(onSubmit)}
className="flex flex-col bg-white p-6 gap-4 w-100 rounded-xl"
>
<div>
<FieldLegend>蓝狐后台</FieldLegend>
<FieldDescription>请登录以访问管理后台</FieldDescription>
</div>
<form className="space-y-6">
<div>
<label
htmlFor="username"
className="block text-sm font-medium text-gray-700"
>
账号
</label>
<input
type="text"
id="username"
className="mt-1 block w-full px-4 py-3 border border-gray-200 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
placeholder="请输入用户名"
/>
</div>
<FieldGroup>
{/* username */}
<Controller
name="username"
control={methods.control}
render={({ field, fieldState }) => (
<Field data-invalid={fieldState.invalid}>
<FieldLabel htmlFor={field.name}>账号</FieldLabel>
<Input
{...field}
id={field.name}
type="text"
placeholder="请输入用户名"
/>
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<div>
<label
htmlFor="password"
className="block text-sm font-medium text-gray-700"
>
密码
</label>
<input
type="password"
id="password"
className="mt-1 block w-full px-4 py-3 border border-gray-200 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
placeholder="请输入密码"
/>
</div>
{/* password */}
<Controller
name="password"
control={methods.control}
render={({ field, fieldState }) => (
<Field data-invalid={fieldState.invalid}>
<FieldLabel htmlFor={field.name}>密码</FieldLabel>
<Input
{...field}
id={field.name}
type="password"
placeholder="请输入密码"
/>
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<div className="flex items-center justify-between">
<div className="flex items-center">
<input
id="remember-me"
name="remember-me"
type="checkbox"
className="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
/>
<label
htmlFor="remember-me"
className="ml-2 block text-sm text-gray-700"
>
记住账号
</label>
</div>
<div className="text-sm">
<a
href="#"
className="font-medium text-blue-600 hover:text-blue-500"
>
忘记密码
</a>
</div>
</div>
{/* remember */}
<Controller
name="remember"
control={methods.control}
render={({ field, fieldState }) => (
<Field data-invalid={fieldState.invalid} orientation="horizontal">
<Checkbox
id={field.name}
name={field.name}
checked={field.value}
onCheckedChange={value => field.onChange(value)}
disabled={field.disabled}
onBlur={field.onBlur}
/>
<FieldLabel htmlFor={field.name}>记住账号</FieldLabel>
<FieldError>{fieldState.error?.message}</FieldError>
</Field>
)}
/>
<div>
<button
type="submit"
className="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
>
登录系统
</button>
</div>
</form>
<div className="mt-6 text-center text-xs text-gray-500">
© {new Date().getFullYear()} 内部系统 - 仅限授权人员访问
</div>
</div>
<Button type="submit" className="h-10">
登录系统
</Button>
</FieldGroup>
</form>
</div>
);
)
}

62
src/components/ui/button.tsx Normal file
View File

@@ -0,0 +1,62 @@
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive:
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
outline:
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost:
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: "h-9 px-4 py-2 has-[>svg]:px-3",
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
icon: "size-9",
"icon-sm": "size-8",
"icon-lg": "size-10",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
)
function Button({
className,
variant = "default",
size = "default",
asChild = false,
...props
}: React.ComponentProps<"button"> &
VariantProps<typeof buttonVariants> & {
asChild?: boolean
}) {
const Comp = asChild ? Slot : "button"
return (
<Comp
data-slot="button"
data-variant={variant}
data-size={size}
className={cn(buttonVariants({ variant, size, className }))}
{...props}
/>
)
}
export { Button, buttonVariants }

32
src/components/ui/checkbox.tsx Normal file
View File

@@ -0,0 +1,32 @@
"use client"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { CheckIcon } from "lucide-react"
import type * as React from "react"
import { cn } from "@/lib/utils"
function Checkbox({
className,
...props
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
return (
<CheckboxPrimitive.Root
data-slot="checkbox"
className={cn(
"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
className,
)}
{...props}
>
<CheckboxPrimitive.Indicator
data-slot="checkbox-indicator"
className="grid place-content-center text-current transition-none"
>
<CheckIcon className="size-3.5" />
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
)
}
export { Checkbox }

248
src/components/ui/field.tsx Normal file
View File

@@ -0,0 +1,248 @@
"use client"
import { useMemo } from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
return (
<fieldset
data-slot="field-set"
className={cn(
"flex flex-col gap-6",
"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
className
)}
{...props}
/>
)
}
function FieldLegend({
className,
variant = "legend",
...props
}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
return (
<legend
data-slot="field-legend"
data-variant={variant}
className={cn(
"mb-3 font-medium",
"data-[variant=legend]:text-base",
"data-[variant=label]:text-sm",
className
)}
{...props}
/>
)
}
function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="field-group"
className={cn(
"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
className
)}
{...props}
/>
)
}
const fieldVariants = cva(
"group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
{
variants: {
orientation: {
vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
horizontal: [
"flex-row items-center",
"[&>[data-slot=field-label]]:flex-auto",
"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
],
responsive: [
"flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
"@md/field-group:[&>[data-slot=field-label]]:flex-auto",
"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
],
},
},
defaultVariants: {
orientation: "vertical",
},
}
)
function Field({
className,
orientation = "vertical",
...props
}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
return (
<div
role="group"
data-slot="field"
data-orientation={orientation}
className={cn(fieldVariants({ orientation }), className)}
{...props}
/>
)
}
function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="field-content"
className={cn(
"group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
className
)}
{...props}
/>
)
}
function FieldLabel({
className,
...props
}: React.ComponentProps<typeof Label>) {
return (
<Label
data-slot="field-label"
className={cn(
"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
"has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
className
)}
{...props}
/>
)
}
function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="field-label"
className={cn(
"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
className
)}
{...props}
/>
)
}
function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
return (
<p
data-slot="field-description"
className={cn(
"text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
"last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
className
)}
{...props}
/>
)
}
function FieldSeparator({
children,
className,
...props
}: React.ComponentProps<"div"> & {
children?: React.ReactNode
}) {
return (
<div
data-slot="field-separator"
data-content={!!children}
className={cn(
"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
className
)}
{...props}
>
<Separator className="absolute inset-0 top-1/2" />
{children && (
<span
className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
data-slot="field-separator-content"
>
{children}
</span>
)}
</div>
)
}
function FieldError({
className,
children,
errors,
...props
}: React.ComponentProps<"div"> & {
errors?: Array<{ message?: string } | undefined>
}) {
const content = useMemo(() => {
if (children) {
return children
}
if (!errors?.length) {
return null
}
const uniqueErrors = [
...new Map(errors.map((error) => [error?.message, error])).values(),
]
if (uniqueErrors?.length == 1) {
return uniqueErrors[0]?.message
}
return (
<ul className="ml-4 flex list-disc flex-col gap-1">
{uniqueErrors.map(
(error, index) =>
error?.message && <li key={index}>{error.message}</li>
)}
</ul>
)
}, [children, errors])
if (!content) {
return null
}
return (
<div
role="alert"
data-slot="field-error"
className={cn("text-destructive text-sm font-normal", className)}
{...props}
>
{content}
</div>
)
}
export {
Field,
FieldLabel,
FieldDescription,
FieldError,
FieldGroup,
FieldLegend,
FieldSeparator,
FieldSet,
FieldContent,
FieldTitle,
}

21
src/components/ui/input.tsx Normal file
View File

@@ -0,0 +1,21 @@
import * as React from "react"
import { cn } from "@/lib/utils"
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
return (
<input
type={type}
data-slot="input"
className={cn(
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
className
)}
{...props}
/>
)
}
export { Input }

24
src/components/ui/label.tsx Normal file
View File

@@ -0,0 +1,24 @@
"use client"
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cn } from "@/lib/utils"
function Label({
className,
...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
return (
<LabelPrimitive.Root
data-slot="label"
className={cn(
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
className
)}
{...props}
/>
)
}
export { Label }

28
src/components/ui/separator.tsx Normal file
View File

@@ -0,0 +1,28 @@
"use client"
import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"
import { cn } from "@/lib/utils"
function Separator({
className,
orientation = "horizontal",
decorative = true,
...props
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
return (
<SeparatorPrimitive.Root
data-slot="separator"
decorative={decorative}
orientation={orientation}
className={cn(
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
className
)}
{...props}
/>
)
}
export { Separator }

41
src/components/ui/sonner.tsx Normal file
View File

@@ -0,0 +1,41 @@
"use client"
import {
CircleCheckIcon,
InfoIcon,
Loader2Icon,
OctagonXIcon,
TriangleAlertIcon,
} from "lucide-react"
import { useTheme } from "next-themes"
import { Toaster as Sonner, type ToasterProps } from "sonner"
const Toaster = ({ ...props }: ToasterProps) => {
const { theme = "system" } = useTheme()
return (
<Sonner
theme={theme as ToasterProps["theme"]}
className="toaster group"
position="top-center"
icons={{
success: <CircleCheckIcon className="size-4" />,
info: <InfoIcon className="size-4" />,
warning: <TriangleAlertIcon className="size-4" />,
error: <OctagonXIcon className="size-4" />,
loading: <Loader2Icon className="size-4 animate-spin" />,
}}
style={
{
"--normal-bg": "var(--popover)",
"--normal-text": "var(--popover-foreground)",
"--normal-border": "var(--border)",
"--border-radius": "var(--radius)",
} as React.CSSProperties
}
{...props}
/>
)
}
export { Toaster }

45
src/lib/api.ts Normal file
View File

@@ -0,0 +1,45 @@
// 定义后端服务URL和OAuth2配置
const API_BASE_URL = process.env.API_BASE_URL
const CLIENT_ID = process.env.CLIENT_ID
const CLIENT_SECRET = process.env.CLIENT_SECRET
// 统一的API响应类型
type ApiResponse<T = undefined> =
| {
success: false
status: number
message: string
}
| {
success: true
data: T
}
type PageRecord<T = unknown> = {
total: number
page: number
size: number
list: T[]
}
type ExtraReq<T extends (...args: never) => unknown> = T extends (
...args: infer P
) => unknown
? P[0]
: never
type ExtraResp<T extends (...args: never) => unknown> =
Awaited<ReturnType<T>> extends ApiResponse<infer D> ? D : never
// 预定义错误
const UnauthorizedError = new Error("未授权访问")
export {
API_BASE_URL,
CLIENT_ID,
CLIENT_SECRET,
type ApiResponse,
type PageRecord,
type ExtraReq,
type ExtraResp,
UnauthorizedError,
}

6
src/lib/utils.ts Normal file
View File

@@ -0,0 +1,6 @@
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}