lanhu/admin
2
0
Fork 0
Code Issues Actions Packages Releases 9 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

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>
);
)
}