purp1e/hlae-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 重构前端界面并修复认证路径

Browse Source 
- 重构主页、关于页、演示页和帖子页的UI，使用现代化的卡片设计和布局
- 添加主题切换功能，支持亮色/暗色模式
- 修复后端认证路由路径，从`/api`改为`/api/auth`
- 更新页面标题为"HLAE中文站"
- 简化Providers组件，移除未使用的主题配置
- 添加Hero组件展示网站主标题和操作按钮
- 优化登录和注册页面的表单验证和UI
- 更新全局样式，添加品牌颜色和主题变量
- 改进导航栏，添加图标和更好的响应式设计
- 优化资源管理模态框，添加图标字段支持
This commit is contained in:
purp1e
2026-03-10 17:52:32 +08:00
parent e06d464a74
commit 58373a15a9
19 changed files with 638 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
backend/src/auth.ts
View File

@@ -6,7 +6,7 @@ export const auth = betterAuth({
database: prismaAdapter(prisma, { database: prismaAdapter(prisma, {
provider: 'sqlite' provider: 'sqlite'
}), }),
basePath: '/api', basePath: '/api/auth',
emailAndPassword: { emailAndPassword: {
enabled: true, enabled: true,
}, },

2
backend/src/index.ts
View File

@@ -14,7 +14,7 @@ const app = new Elysia()
allowedHeaders: ['Content-Type', 'Authorization'] allowedHeaders: ['Content-Type', 'Authorization']
}) })
) )
.mount('/auth', auth.handler) .mount(auth.handler)
.get('/health', () => 'OK') .get('/health', () => 'OK')
.use(resources) .use(resources)
.use(posts) .use(posts)

7
web/index.html
View File

@@ -3,7 +3,12 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HLAE Site</title> <title>HLAE中文站</title>
<script>
const theme = localStorage.getItem('theme') || 'light';
document.documentElement.classList.add(theme);
document.documentElement.setAttribute('data-theme', theme);
</script>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

26
web/src/app/about/index.tsx
View File

@@ -1,11 +1,27 @@
import { Button } from "@heroui/react"; import { Button, Card } from "@heroui/react";
import { Link as RouterLink } from "react-router-dom"; import { useNavigate } from "react-router-dom";
export default function AboutPage() { export default function AboutPage() {
const navigate = useNavigate();
return ( return (
<div className="py-16"> <div className="container mx-auto px-6 py-12 max-w-4xl">
<h1>About</h1> <Card>
<Button as={RouterLink} to="/">Back</Button> <Card.Header>
<Card.Title className="text-3xl font-bold">关于 HLAE 中文站</Card.Title>
</Card.Header>
<Card.Content className="prose dark:prose-invert">
<p className="text-default-500 mb-6 leading-relaxed">
HLAE 中文站是一个致力于为 CS 视频制作者提供工具和资源的社区。
我们旨在简化创作流程，提供各种实用的工具、录像分析和下载加速服务。
</p>
</Card.Content>
<Card.Footer>
<Button onPress={() => navigate("/")}>
返回首页
</Button>
</Card.Footer>
</Card>
</div> </div>
); );
} }

27
web/src/app/demo/index.tsx
View File

@@ -1,15 +1,26 @@
import { Button } from "@heroui/react"; import { Button, Card } from "@heroui/react";
import { Link, useNavigate } from "react-router"; import { useNavigate } from "react-router-dom";
export default function DemoPage() { export default function DemoPage() {
const navigate = useNavigate(); const navigate = useNavigate();
return ( return (
<div className="flex flex-col gap-3 py-16 max-w-3xl mx-auto"> <div className="container mx-auto px-6 py-12 max-w-4xl">
<h1 className="text-2xl font-bold leading-loose">Demo Page</h1> <Card>
<button onClick={() => navigate("/")} className="p-3 rounded-lg bg-zinc-300 transition hover:scale-105 cursor-pointer">Back</button> <Card.Header>
<Button color="primary" variant="flat" onPress={() => navigate("/")}>HeroUI Back</Button> <Card.Title className="text-3xl font-bold">击杀生成 (Kill Generation)</Card.Title>
<Link to="/">Back</Link> </Card.Header>
<Card.Content>
<p className="text-default-500 mb-4">
这里是击杀生成工具页面。目前正在开发中，敬请期待！
</p>
</Card.Content>
<Card.Footer>
<Button onPress={() => navigate("/")}>
返回首页
</Button>
</Card.Footer>
</Card>
</div> </div>
) );
} }

203
web/src/app/index.tsx
View File

@@ -1,28 +1,139 @@
import { useState } from 'react'; import { useState } from 'react';
import { SiteNavbar } from '../components/SiteNavbar'; import { useResources } from '../hooks/useApi';
import { useResources, Resource } from '../hooks/useApi';
import { CustomCard } from '../components/CustomCard'; import { CustomCard } from '../components/CustomCard';
import { Button, Link } from '@heroui/react'; import { Hero } from '../components/Hero';
import { Button, Link, Chip } from '@heroui/react';
import { buttonVariants, linkVariants } from '@heroui/styles';
import { CreateResourceModal } from '../components/CreateResourceModal'; import { CreateResourceModal } from '../components/CreateResourceModal';
import { EditResourceModal } from '../components/EditResourceModal'; import { EditResourceModal } from '../components/EditResourceModal';
import { useSession } from '../lib/auth-client'; import { useSession } from '../lib/auth-client';
import {
ChatBubbleLeftEllipsisIcon,
BookOpenIcon,
BookmarkIcon,
QuestionMarkCircleIcon,
WrenchScrewdriverIcon,
ListBulletIcon,
VideoCameraIcon,
UserGroupIcon
} from '@heroicons/react/24/outline';
import { Link as RouterLink } from 'react-router-dom';
const PORTALS = [
{
title: '中文论坛',
description: 'HLAE中文交流社区',
icon: ChatBubbleLeftEllipsisIcon,
url: 'https://bbs.hlae.site',
},
{
title: '官方Wiki',
description: '权威，但是英文 orz',
icon: BookOpenIcon,
url: 'https://github.com/advancedfx/advancedfx/wiki',
},
{
title: '新版文档',
description: '新版 advancedfx 文档，建设中',
icon: BookmarkIcon,
url: 'https://docs.hlae.site',
},
{
title: '官方Discord',
description: '和开发者近距离交流',
icon: UserGroupIcon,
url: 'https://discord.gg/advancedfx',
},
{
title: '问题与建议提交',
description: 'tnnd 为什么不更新',
icon: QuestionMarkCircleIcon,
url: 'https://github.com/advancedfx/advancedfx/issues',
},
{
title: 'HUD生成器',
description: '击杀信息和准星生成工具',
icon: WrenchScrewdriverIcon,
url: '/hud-generator',
},
{
title: '击杀信息生成',
description: 'CS2 · CS 击杀信息生成工具（测试）',
icon: ListBulletIcon,
url: '/demo',
},
{
title: 'HLTV',
description: 'CSGO新闻、数据、录像',
icon: VideoCameraIcon,
url: 'https://www.hltv.org',
},
];
export default function HomePage() { export default function HomePage() {
const { resources, isLoading } = useResources(); const { resources, isLoading } = useResources();
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false);
const [isEditModalOpen, setIsEditModalOpen] = useState(false); const [isEditModalOpen, setIsEditModalOpen] = useState(false);
const [selectedResource, setSelectedResource] = useState<Resource | null>(null); const [selectedResource, setSelectedResource] = useState<any>(null);
const { data: session } = useSession(); const { data: session } = useSession();
return ( return (
<div className="min-h-screen bg-background text-foreground"> <div className="pb-20">
<SiteNavbar /> <main className="container mx-auto px-6">
<main className="container mx-auto px-4 py-8"> <Hero />
<section className="mb-12"> {/* Portals Section */}
<div className="flex justify-between items-center mb-6"> <section className="mb-20">
<h2 className="text-2xl font-bold">传送门 & 资源</h2> <h2 className="text-3xl font-bold text-center mb-12">传送门</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
{PORTALS.map((portal) => {
const isExternal = portal.url.startsWith('http');
const Content = (
<CustomCard className="group cursor-pointer p-6 h-full">
<div className="flex gap-4">
<div className="p-3 rounded-2xl bg-default-100 text-default-600 group-hover:bg-primary-50 group-hover:text-primary transition-colors">
<portal.icon className="w-6 h-6" />
</div>
<div className="flex flex-col gap-1">
<h3 className="text-lg font-bold">{portal.title}</h3>
<p className="text-sm text-default-500 line-clamp-1">{portal.description}</p>
</div>
</div>
</CustomCard>
);
return isExternal ? (
<a
key={portal.title}
href={portal.url}
target="_blank"
rel="noopener noreferrer"
className="no-underline text-inherit block"
>
{Content}
</a>
) : (
<RouterLink
key={portal.title}
to={portal.url}
className="no-underline text-inherit block"
>
{Content}
</RouterLink>
);
})}
</div>
</section>
{/* Resources Section */}
<section>
<div className="flex justify-center items-center mb-12 relative">
<h2 className="text-3xl font-bold">资源下载</h2>
{session && ( {session && (
<Button onPress={() => setIsModalOpen(true)} color="primary" variant="secondary"> <Button
onPress={() => setIsModalOpen(true)}
variant="tertiary"
className="absolute right-0"
>
添加资源 添加资源
</Button> </Button>
)} )}
@@ -36,41 +147,73 @@ export default function HomePage() {
/> />
{isLoading ? ( {isLoading ? (
<div>加载中...</div> <div className="flex justify-center py-20">加载中...</div>
) : ( ) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{resources?.map((res) => ( {resources?.map((res) => (
<CustomCard key={res.id} variant="glass" className="p-4"> <CustomCard key={res.id} className="p-6">
<CustomCard.Header> <div className="flex gap-4 mb-4">
<div className="flex flex-col"> <div className="w-16 h-16 rounded-2xl bg-default-100 overflow-hidden flex-shrink-0 flex items-center justify-center">
<p className="text-md">{res.title}</p> {res.icon ? (
{res.category && <p className="text-small text-default-500">{res.category}</p>} <img
alt={res.title}
src={res.icon}
className="w-10 h-10 object-contain"
/>
) : (
<div className="text-2xl font-bold text-default-400">
{res.title[0]}
</div> </div>
</CustomCard.Header> )}
<CustomCard.Content> </div>
<p className="text-sm text-gray-600 dark:text-gray-300 mb-4">{res.description}</p> <div className="flex flex-col gap-1 flex-1 min-w-0">
</CustomCard.Content> <div className="flex items-center gap-2">
<CustomCard.Footer className="flex justify-between items-center gap-2"> <h3 className="text-lg font-bold truncate">{res.title}</h3>
<Button as={Link} href={res.url} target="_blank" size="sm" color="primary"> {res.category && (
访问 <Chip size="sm" variant="soft" className="text-[10px] h-5">
</Button> {res.category}
</Chip>
)}
</div>
<p className="text-sm text-default-500 line-clamp-2">{res.description}</p>
</div>
</div>
<div className="flex gap-3 mt-auto">
<a
href={res.url}
target="_blank"
rel="noopener noreferrer"
className={buttonVariants({ fullWidth: true, className: "bg-[#C14B4B] text-white font-medium hover:opacity-90 flex items-center justify-center h-10 px-4 rounded-3xl" })}
>
加速下载
</a>
<a
href={res.url}
target="_blank"
rel="noopener noreferrer"
className={buttonVariants({ fullWidth: true, variant: "tertiary", className: "bg-default-200 text-default-600 font-medium hover:bg-default-300 flex items-center justify-center h-10 px-4 rounded-3xl" })}
>
原始下载
</a>
{session && ( {session && (
<Button <Button
size="sm" isIconOnly
variant="ghost" variant="secondary"
onPress={() => { onPress={() => {
setSelectedResource(res); setSelectedResource(res);
setIsEditModalOpen(true); setIsEditModalOpen(true);
}} }}
className="flex-shrink-0"
> >
编辑 <WrenchScrewdriverIcon className="w-4 h-4" />
</Button> </Button>
)} )}
</CustomCard.Footer> </div>
</CustomCard> </CustomCard>
))} ))}
{!resources?.length && ( {!resources?.length && (
<div className="col-span-full text-center text-gray-500"> <div className="col-span-full text-center text-default-400 py-20">
暂无资源 暂无资源
</div> </div>
)} )}

56
web/src/app/login/index.tsx
View File

@@ -1,6 +1,6 @@
import { useState } from 'react'; import { useState } from 'react';
import { useNavigate, Link } from 'react-router-dom'; import { useNavigate, Link } from 'react-router-dom';
import { Card, Input, Button, Form, toast } from '@heroui/react'; import { Card, Input, Button, Form, toast, TextField, Label, FieldError } from '@heroui/react';
import { signIn } from '../../lib/auth-client'; import { signIn } from '../../lib/auth-client';
export default function LoginPage() { export default function LoginPage() {
@@ -9,7 +9,7 @@ export default function LoginPage() {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const navigate = useNavigate(); const navigate = useNavigate();
const handleLogin = async (e: React.FormEvent) => { const handleLogin = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
setLoading(true); setLoading(true);
try { try {
@@ -32,32 +32,50 @@ export default function LoginPage() {
}; };
return ( return (
<div className="flex items-center justify-center min-h-screen p-4"> <div className="flex flex-col items-center justify-center min-h-[calc(100vh-64px)] p-4">
<Card className="w-full max-w-md p-6"> <Card className="w-full max-w-md">
<h1 className="text-2xl font-bold mb-6 text-center">登录 HLAE 中文站</h1> <Card.Header>
<Form validationBehavior="native" onSubmit={handleLogin} className="flex flex-col gap-4"> <Card.Title className="text-2xl font-bold text-center w-full">登录 HLAE 中文站</Card.Title>
<Input </Card.Header>
<Form validationBehavior="native" onSubmit={handleLogin}>
<Card.Content className="flex flex-col gap-6">
<TextField
isRequired isRequired
label="邮箱" name="email"
placeholder="请输入您的邮箱"
type="email" type="email"
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={setEmail}
/> >
<Input <Label>邮箱</Label>
<Input placeholder="请输入您的邮箱" variant="secondary" />
<FieldError />
</TextField>
<TextField
isRequired isRequired
label="密码" name="password"
placeholder="请输入您的密码"
type="password" type="password"
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={setPassword}
/> >
<Button color="primary" type="submit" isLoading={loading}> <Label>密码</Label>
<Input placeholder="请输入您的密码" variant="secondary" />
<FieldError />
</TextField>
</Card.Content>
<Card.Footer className="flex flex-col gap-3 mt-2">
<Button type="submit" isPending={loading} fullWidth className="font-bold">
登录 登录
</Button> </Button>
<div className="text-center text-sm"> <Button as={Link} to="/register" variant="tertiary" fullWidth className="font-bold">
还没有账号？ <Link to="/register" className="text-primary hover:underline">去注册</Link> 注册账号
</Button>
<div className="flex justify-center mt-2">
<Link to="/" className="text-sm text-default-500 hover:text-primary transition-colors flex items-center gap-1">
<span>← 返回首页</span>
</Link>
</div> </div>
</Card.Footer>
</Form> </Form>
</Card> </Card>
</div> </div>

46
web/src/app/posts/[id]/index.tsx
View File

@@ -1,8 +1,7 @@
import { useParams, Link as RouterLink } from 'react-router-dom'; import { useParams, Link as RouterLink } from 'react-router-dom';
import { SiteNavbar } from '../../../components/SiteNavbar';
import { usePost } from '../../../hooks/useApi'; import { usePost } from '../../../hooks/useApi';
import { Card, Button, Avatar, Divider, Skeleton } from '@heroui/react'; import { Card, Button, Avatar, Separator, Skeleton } from '@heroui/react';
import { Link } from '@heroui/react'; import { buttonVariants } from '@heroui/styles';
export default function PostDetailPage() { export default function PostDetailPage() {
const { id } = useParams<{ id: string }>(); const { id } = useParams<{ id: string }>();
@@ -10,19 +9,12 @@ export default function PostDetailPage() {
if (isLoading) { if (isLoading) {
return ( return (
<div className="min-h-screen bg-background text-foreground"> <div className="pb-20">
<SiteNavbar />
<main className="container mx-auto px-4 py-8"> <main className="container mx-auto px-4 py-8">
<Card className="p-6 max-w-4xl mx-auto space-y-4"> <Card className="p-6 max-w-4xl mx-auto space-y-4">
<Skeleton className="rounded-lg"> <Skeleton className="h-8 w-3/4 rounded-lg" />
<div className="h-8 w-3/4 rounded-lg bg-default-300"></div> <Skeleton className="h-4 w-1/4 rounded-lg" />
</Skeleton> <Skeleton className="h-40 w-full rounded-lg" />
<Skeleton className="rounded-lg">
<div className="h-4 w-1/4 rounded-lg bg-default-300"></div>
</Skeleton>
<Skeleton className="rounded-lg">
<div className="h-40 w-full rounded-lg bg-default-300"></div>
</Skeleton>
</Card> </Card>
</main> </main>
</div> </div>
@@ -31,44 +23,42 @@ export default function PostDetailPage() {
if (isError || !post) { if (isError || !post) {
return ( return (
<div className="min-h-screen bg-background text-foreground"> <div className="pb-20">
<SiteNavbar />
<main className="container mx-auto px-4 py-8 text-center"> <main className="container mx-auto px-4 py-8 text-center">
<h1 className="text-2xl font-bold mb-4">帖子未找到</h1> <h1 className="text-2xl font-bold mb-4">帖子未找到</h1>
<Button as={RouterLink} to="/posts" color="primary"> <RouterLink to="/posts" className={buttonVariants({ variant: "secondary" })}>
返回帖子列表 返回帖子列表
</Button> </RouterLink>
</main> </main>
</div> </div>
); );
} }
return ( return (
<div className="min-h-screen bg-background text-foreground"> <div className="pb-20">
<SiteNavbar />
<main className="container mx-auto px-4 py-8"> <main className="container mx-auto px-4 py-8">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<div className="mb-4"> <div className="mb-4">
<Link as={RouterLink} to="/posts" className="text-default-500 hover:text-foreground"> <RouterLink to="/posts" className="text-default-500 hover:text-foreground">
&larr; 返回帖子列表 &larr; 返回帖子列表
</Link> </RouterLink>
</div> </div>
<Card className="p-6 mb-8"> <Card className="p-6 mb-8">
<Card.Header className="flex flex-col items-start gap-2"> <Card.Header className="flex flex-col items-start gap-2">
<h1 className="text-3xl font-bold">{post.title}</h1> <h1 className="text-3xl font-bold">{post.title}</h1>
<div className="flex items-center gap-2 text-small text-default-500"> <div className="flex items-center gap-2 text-small text-default-500">
<Avatar <Avatar className="w-6 h-6">
className="w-6 h-6" <Avatar.Fallback>
name={post.user?.name || ''} {(post.user?.name || 'U').slice(0, 2).toUpperCase()}
src={undefined} // Add user image if available in API </Avatar.Fallback>
/> </Avatar>
<span>{post.user?.name || '匿名用户'}</span> <span>{post.user?.name || '匿名用户'}</span>
<span>•</span> <span>•</span>
<span>{new Date(post.createdAt).toLocaleString()}</span> <span>{new Date(post.createdAt).toLocaleString()}</span>
</div> </div>
</Card.Header> </Card.Header>
<Divider className="my-4" /> <Separator className="my-4" />
<Card.Content> <Card.Content>
<div className="whitespace-pre-wrap text-lg leading-relaxed"> <div className="whitespace-pre-wrap text-lg leading-relaxed">
{post.content} {post.content}

42
web/src/app/posts/index.tsx
View File

@@ -1,8 +1,7 @@
import { useState } from 'react'; import { useState } from 'react';
import { SiteNavbar } from '../../components/SiteNavbar';
import { usePosts } from '../../hooks/useApi'; import { usePosts } from '../../hooks/useApi';
import { Link as RouterLink } from 'react-router-dom'; import { Link as RouterLink } from 'react-router-dom';
import { Card, Button, Input, TextArea, Form, Link, toast } from '@heroui/react'; import { Card, Button, Input, TextArea, Form, Link, toast, TextField, Label, FieldError } from '@heroui/react';
import { useSession } from '../../lib/auth-client'; import { useSession } from '../../lib/auth-client';
import { api } from '../../api/client'; import { api } from '../../api/client';
@@ -13,7 +12,7 @@ export default function PostsPage() {
const [content, setContent] = useState(''); const [content, setContent] = useState('');
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
if (!session) return; if (!session) return;
setIsSubmitting(true); setIsSubmitting(true);
@@ -36,8 +35,7 @@ export default function PostsPage() {
}; };
return ( return (
<div className="min-h-screen bg-background text-foreground"> <div className="pb-20">
<SiteNavbar />
<main className="container mx-auto px-4 py-8"> <main className="container mx-auto px-4 py-8">
<div className="flex flex-col md:flex-row gap-8"> <div className="flex flex-col md:flex-row gap-8">
<div className="flex-1"> <div className="flex-1">
@@ -50,9 +48,9 @@ export default function PostsPage() {
<Card key={post.id} className="p-4"> <Card key={post.id} className="p-4">
<Card.Header> <Card.Header>
<div className="flex flex-col"> <div className="flex flex-col">
<Link as={RouterLink} to={`/posts/${post.id}`} className="text-md font-bold text-foreground hover:text-primary"> <RouterLink to={`/posts/${post.id}`} className="text-md font-bold text-foreground hover:text-primary">
{post.title} {post.title}
</Link> </RouterLink>
<p className="text-small text-default-500"> <p className="text-small text-default-500">
{post.user?.name || '匿名用户'} - {new Date(post.createdAt).toLocaleDateString()} {post.user?.name || '匿名用户'} - {new Date(post.createdAt).toLocaleDateString()}
</p> </p>
@@ -73,21 +71,29 @@ export default function PostsPage() {
<Card className="p-4 sticky top-4"> <Card className="p-4 sticky top-4">
<h3 className="text-xl font-bold mb-4">发布新帖</h3> <h3 className="text-xl font-bold mb-4">发布新帖</h3>
<Form validationBehavior="native" onSubmit={handleSubmit} className="flex flex-col gap-4"> <Form validationBehavior="native" onSubmit={handleSubmit} className="flex flex-col gap-4">
<Input <TextField
isRequired isRequired
label="标题" name="title"
placeholder="请输入标题"
value={title} value={title}
onValueChange={setTitle} onChange={setTitle}
/> >
<TextArea <Label>标题</Label>
<Input placeholder="请输入标题" />
<FieldError />
</TextField>
<TextField
isRequired isRequired
label="内容" name="content"
placeholder="请输入内容"
value={content} value={content}
onValueChange={setContent} onChange={setContent}
/> >
<Button color="primary" type="submit" isLoading={isSubmitting}> <Label>内容</Label>
<TextArea placeholder="请输入内容" />
<FieldError />
</TextField>
<Button type="submit" isPending={isSubmitting}>
发布 发布
</Button> </Button>
</Form> </Form>

56
web/src/app/register/index.tsx
View File

@@ -1,6 +1,6 @@
import { useState } from 'react'; import { useState } from 'react';
import { useNavigate, Link } from 'react-router-dom'; import { useNavigate, Link } from 'react-router-dom';
import { Card, Input, Button, Form, toast } from '@heroui/react'; import { Card, Input, Button, Form, toast, TextField, Label, FieldError } from '@heroui/react';
import { signUp } from '../../lib/auth-client'; import { signUp } from '../../lib/auth-client';
export default function RegisterPage() { export default function RegisterPage() {
@@ -9,7 +9,7 @@ export default function RegisterPage() {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const navigate = useNavigate(); const navigate = useNavigate();
const handleRegister = async (e: React.FormEvent) => { const handleRegister = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
setLoading(true); setLoading(true);
try { try {
@@ -33,32 +33,50 @@ export default function RegisterPage() {
}; };
return ( return (
<div className="flex items-center justify-center min-h-screen p-4"> <div className="flex flex-col items-center justify-center min-h-[calc(100vh-64px)] p-4">
<Card className="w-full max-w-md p-6"> <Card className="w-full max-w-md">
<h1 className="text-2xl font-bold mb-6 text-center">注册 HLAE 中文站</h1> <Card.Header>
<Form validationBehavior="native" onSubmit={handleRegister} className="flex flex-col gap-4"> <Card.Title className="text-2xl font-bold text-center w-full">注册 HLAE 中文站</Card.Title>
<Input </Card.Header>
<Form validationBehavior="native" onSubmit={handleRegister}>
<Card.Content className="flex flex-col gap-6">
<TextField
isRequired isRequired
label="邮箱" name="email"
placeholder="请输入您的邮箱"
type="email" type="email"
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={setEmail}
/> >
<Input <Label>邮箱</Label>
<Input placeholder="请输入您的邮箱" variant="secondary" />
<FieldError />
</TextField>
<TextField
isRequired isRequired
label="密码" name="password"
placeholder="请输入您的密码"
type="password" type="password"
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={setPassword}
/> >
<Button color="primary" type="submit" isLoading={loading}> <Label>密码</Label>
<Input placeholder="请输入您的密码" variant="secondary" />
<FieldError />
</TextField>
</Card.Content>
<Card.Footer className="flex flex-col gap-3 mt-2">
<Button type="submit" isPending={loading} fullWidth className="font-bold">
注册 注册
</Button> </Button>
<div className="text-center text-sm"> <Button as={Link} to="/login" variant="tertiary" fullWidth className="font-bold">
已有账号？ <Link to="/login" className="text-primary hover:underline">去登录</Link> 已有账号？登录
</Button>
<div className="flex justify-center mt-2">
<Link to="/" className="text-sm text-default-500 hover:text-primary transition-colors flex items-center gap-1">
<span>← 返回首页</span>
</Link>
</div> </div>
</Card.Footer>
</Form> </Form>
</Card> </Card>
</div> </div>

80
web/src/components/CreateResourceModal.tsx
View File

@@ -1,5 +1,5 @@
import { useState } from 'react'; import { useState } from 'react';
import { Modal, Button, Input, Form, toast } from "@heroui/react"; import { Modal, Button, Input, Form, toast, TextField, Label, FieldError } from "@heroui/react";
import { api } from '../api/client'; import { api } from '../api/client';
import { useSWRConfig } from 'swr'; import { useSWRConfig } from 'swr';
@@ -7,11 +7,12 @@ export function CreateResourceModal({ isOpen, onOpenChange }: { isOpen: boolean,
const [title, setTitle] = useState(''); const [title, setTitle] = useState('');
const [description, setDescription] = useState(''); const [description, setDescription] = useState('');
const [url, setUrl] = useState(''); const [url, setUrl] = useState('');
const [icon, setIcon] = useState('');
const [category, setCategory] = useState(''); const [category, setCategory] = useState('');
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const { mutate } = useSWRConfig(); const { mutate } = useSWRConfig();
const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
setLoading(true); setLoading(true);
try { try {
@@ -19,6 +20,7 @@ export function CreateResourceModal({ isOpen, onOpenChange }: { isOpen: boolean,
title, title,
description, description,
url, url,
icon,
category category
}); });
mutate('/resources'); mutate('/resources');
@@ -26,6 +28,7 @@ export function CreateResourceModal({ isOpen, onOpenChange }: { isOpen: boolean,
setTitle(''); setTitle('');
setDescription(''); setDescription('');
setUrl(''); setUrl('');
setIcon('');
setCategory(''); setCategory('');
} catch (err) { } catch (err) {
console.error(err); console.error(err);
@@ -37,7 +40,7 @@ export function CreateResourceModal({ isOpen, onOpenChange }: { isOpen: boolean,
return ( return (
<Modal isOpen={isOpen} onOpenChange={onOpenChange}> <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
<Modal.Backdrop /> <Modal.Backdrop>
<Modal.Container> <Modal.Container>
<Modal.Dialog> <Modal.Dialog>
<Modal.Header> <Modal.Header>
@@ -46,44 +49,71 @@ export function CreateResourceModal({ isOpen, onOpenChange }: { isOpen: boolean,
</Modal.Header> </Modal.Header>
<Modal.Body> <Modal.Body>
<Form validationBehavior="native" onSubmit={handleSubmit} className="flex flex-col gap-4"> <Form validationBehavior="native" onSubmit={handleSubmit} className="flex flex-col gap-4">
<Input <TextField
isRequired isRequired
label="标题" name="title"
placeholder="资源名称"
value={title} value={title}
onValueChange={setTitle} onChange={setTitle}
/> >
<Input <Label>标题</Label>
label="描述" <Input placeholder="资源名称" variant="secondary" />
placeholder="简短描述" <FieldError />
</TextField>
<TextField
name="description"
value={description} value={description}
onValueChange={setDescription} onChange={setDescription}
/> >
<Input <Label>描述</Label>
<Input placeholder="简短描述" variant="secondary" />
<FieldError />
</TextField>
<TextField
isRequired isRequired
label="链接" name="url"
placeholder="https://..."
value={url} value={url}
onValueChange={setUrl} onChange={setUrl}
/> >
<Input <Label>链接</Label>
label="分类" <Input placeholder="https://..." variant="secondary" />
placeholder="如: 工具, 文档" <FieldError />
</TextField>
<TextField
name="icon"
value={icon}
onChange={setIcon}
>
<Label>图标 URL</Label>
<Input placeholder="如: /icon/hlae.png" variant="secondary" />
<FieldError />
</TextField>
<TextField
name="category"
value={category} value={category}
onValueChange={setCategory} onChange={setCategory}
/> >
<Button color="primary" type="submit" isLoading={loading}> <Label>版本/分类</Label>
<Input placeholder="如: v2.189.6" variant="secondary" />
<FieldError />
</TextField>
<Button type="submit" isPending={loading}>
提交 提交
</Button> </Button>
</Form> </Form>
</Modal.Body> </Modal.Body>
<Modal.Footer> <Modal.Footer>
<Button color="danger" variant="ghost" onPress={() => onOpenChange(false)}> <Button variant="tertiary" onPress={() => onOpenChange(false)}>
取消 取消
</Button> </Button>
</Modal.Footer> </Modal.Footer>
</Modal.Dialog> </Modal.Dialog>
</Modal.Container> </Modal.Container>
</Modal.Backdrop>
</Modal> </Modal>
); );
} }

4
web/src/components/CustomCard.tsx
View File

@@ -9,8 +9,12 @@ export const customStyles = tv({
glass: "bg-white/70 backdrop-blur-md border-white/20 shadow-xl dark:bg-black/70 dark:border-white/10", glass: "bg-white/70 backdrop-blur-md border-white/20 shadow-xl dark:bg-black/70 dark:border-white/10",
neon: "border border-blue-500 shadow-[0_0_15px_rgba(59,130,246,0.5)] bg-gray-900/90 text-white", neon: "border border-blue-500 shadow-[0_0_15px_rgba(59,130,246,0.5)] bg-gray-900/90 text-white",
minimal: "border-none shadow-none bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors", minimal: "border-none shadow-none bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",
modern: "bg-default-50/40 hover:bg-default-100/60 transition-all duration-500 border-none shadow-sm hover:shadow-xl hover:-translate-y-1 rounded-3xl",
}, },
}, },
defaultVariants: {
variant: "modern",
}
}); });
type CustomCardProps = React.ComponentProps<typeof Card> & VariantProps<typeof customStyles>; type CustomCardProps = React.ComponentProps<typeof Card> & VariantProps<typeof customStyles>;

82
web/src/components/EditResourceModal.tsx
View File

@@ -1,5 +1,5 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { Modal, Button, Input, Form, toast } from "@heroui/react"; import { Modal, Button, Input, Form, toast, TextField, Label, FieldError } from "@heroui/react";
import { api } from '../api/client'; import { api } from '../api/client';
import { useSWRConfig } from 'swr'; import { useSWRConfig } from 'swr';
import { Resource } from '../hooks/useApi'; import { Resource } from '../hooks/useApi';
@@ -16,6 +16,7 @@ export function EditResourceModal({
const [title, setTitle] = useState(''); const [title, setTitle] = useState('');
const [description, setDescription] = useState(''); const [description, setDescription] = useState('');
const [url, setUrl] = useState(''); const [url, setUrl] = useState('');
const [icon, setIcon] = useState('');
const [category, setCategory] = useState(''); const [category, setCategory] = useState('');
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const { mutate } = useSWRConfig(); const { mutate } = useSWRConfig();
@@ -25,11 +26,12 @@ export function EditResourceModal({
setTitle(resource.title); setTitle(resource.title);
setDescription(resource.description || ''); setDescription(resource.description || '');
setUrl(resource.url); setUrl(resource.url);
setIcon(resource.icon || '');
setCategory(resource.category || ''); setCategory(resource.category || '');
} }
}, [resource]); }, [resource]);
const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
if (!resource) return; if (!resource) return;
setLoading(true); setLoading(true);
@@ -38,6 +40,7 @@ export function EditResourceModal({
title, title,
description, description,
url, url,
icon,
category category
}); });
mutate('/resources'); mutate('/resources');
@@ -67,7 +70,7 @@ export function EditResourceModal({
return ( return (
<Modal isOpen={isOpen} onOpenChange={onOpenChange}> <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
<Modal.Backdrop /> <Modal.Backdrop>
<Modal.Container> <Modal.Container>
<Modal.Dialog> <Modal.Dialog>
<Modal.Header> <Modal.Header>
@@ -76,41 +79,67 @@ export function EditResourceModal({
</Modal.Header> </Modal.Header>
<Modal.Body> <Modal.Body>
<Form validationBehavior="native" onSubmit={handleSubmit} className="flex flex-col gap-4"> <Form validationBehavior="native" onSubmit={handleSubmit} className="flex flex-col gap-4">
<Input <TextField
isRequired isRequired
label="标题" name="title"
placeholder="资源名称"
value={title} value={title}
onValueChange={setTitle} onChange={setTitle}
/> >
<Input <Label>标题</Label>
label="描述" <Input placeholder="资源名称" variant="secondary" />
placeholder="简短描述" <FieldError />
</TextField>
<TextField
name="description"
value={description} value={description}
onValueChange={setDescription} onChange={setDescription}
/> >
<Input <Label>描述</Label>
<Input placeholder="简短描述" variant="secondary" />
<FieldError />
</TextField>
<TextField
isRequired isRequired
label="链接" name="url"
placeholder="https://..."
value={url} value={url}
onValueChange={setUrl} onChange={setUrl}
/> >
<Input <Label>链接</Label>
label="分类" <Input placeholder="https://..." variant="secondary" />
placeholder="如: 工具, 文档" <FieldError />
</TextField>
<TextField
name="icon"
value={icon}
onChange={setIcon}
>
<Label>图标 URL</Label>
<Input placeholder="如: /icon/hlae.png" variant="secondary" />
<FieldError />
</TextField>
<TextField
name="category"
value={category} value={category}
onValueChange={setCategory} onChange={setCategory}
/> >
<Label>版本/分类</Label>
<Input placeholder="如: v2.189.6" variant="secondary" />
<FieldError />
</TextField>
<div className="flex justify-between gap-2 mt-4"> <div className="flex justify-between gap-2 mt-4">
<Button color="danger" variant="flat" onPress={handleDelete} isLoading={loading}> <Button variant="danger" onPress={handleDelete} isPending={loading}>
删除资源 删除资源
</Button> </Button>
<div className="flex gap-2"> <div className="flex gap-2">
<Button color="danger" variant="ghost" onPress={() => onOpenChange(false)}> <Button variant="ghost" onPress={() => onOpenChange(false)}>
取消 取消
</Button> </Button>
<Button color="primary" type="submit" isLoading={loading}> <Button type="submit" isPending={loading}>
保存 保存
</Button> </Button>
</div> </div>
@@ -119,6 +148,7 @@ export function EditResourceModal({
</Modal.Body> </Modal.Body>
</Modal.Dialog> </Modal.Dialog>
</Modal.Container> </Modal.Container>
</Modal.Backdrop>
</Modal> </Modal>
); );
} }

51
web/src/components/Hero.tsx Normal file
View File

@@ -0,0 +1,51 @@
import { Button } from '@heroui/react';
import { WrenchScrewdriverIcon } from '@heroicons/react/24/outline';
export const Hero = () => {
return (
<section className="flex flex-col items-center justify-center py-20 text-center">
<h1 className="text-6xl font-extrabold tracking-tight mb-8">
HLAE中文站
</h1>
<p className="text-2xl text-default-600 mb-12 max-w-3xl leading-relaxed">
<span className="text-[#FF6B00] font-bold">CS</span>等起源引擎游戏的影片制作工具
<span className="text-brand font-bold mx-1">HLAE</span>的中文门户网站
</p>
<div className="flex gap-6">
<Button
as="a"
href="https://www.advancedfx.org/"
target="_blank"
rel="noopener noreferrer"
className="bg-brand text-white font-medium px-10 h-14 rounded-full text-lg shadow-lg shadow-brand/20 hover:opacity-90 transition-opacity"
startContent={<WrenchScrewdriverIcon className="w-6 h-6" />}
>
官方网站
</Button>
<Button
as="a"
href="https://github.com/purp1e/hlae-site"
target="_blank"
rel="noopener noreferrer"
className="bg-default-100 text-default-900 font-medium px-10 h-14 rounded-full text-lg hover:bg-default-200 transition-colors"
startContent={
<svg
className="w-6 h-6"
fill="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
fillRule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clipRule="evenodd"
/>
</svg>
}
>
本项目
</Button>
</div>
</section>
);
};

63
web/src/components/SiteNavbar.tsx
View File

@@ -5,8 +5,11 @@ import {
Dropdown, Dropdown,
Label Label
} from "@heroui/react"; } from "@heroui/react";
import { linkVariants, buttonVariants } from "@heroui/styles";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useSession, signOut } from "../lib/auth-client"; import { useSession, signOut } from "../lib/auth-client";
import { SunIcon, MoonIcon } from "@heroicons/react/24/outline";
import { Link as RouterLink } from "react-router-dom";
export function SiteNavbar() { export function SiteNavbar() {
const { data: session } = useSession(); const { data: session } = useSession();
@@ -27,31 +30,45 @@ export function SiteNavbar() {
}; };
return ( return (
<nav className="flex items-center justify-between px-6 py-3 bg-background/70 backdrop-blur-md border-b border-white/10 sticky top-0 z-50 w-full"> <nav className="flex items-center justify-between px-8 py-4 bg-background/70 backdrop-blur-md border-b border-default-100 sticky top-0 z-50 w-full">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<Link className="font-bold text-inherit text-lg no-underline text-foreground" href="/"> <RouterLink to="/" className="font-bold text-inherit text-xl no-underline text-foreground">
HLAE 中文站 HLAE中文站
</Link> </RouterLink>
</div> </div>
<div className="hidden sm:flex gap-6 justify-center flex-1"> <div className="flex items-center gap-8">
<Link className="text-foreground hover:text-primary transition-colors" href="/"> <div className="hidden sm:flex gap-8 items-center">
首页 <RouterLink to="/" className="text-foreground/80 hover:text-foreground font-medium transition-colors">
</Link> 主页
<Link className="text-foreground hover:text-primary transition-colors" href="/posts"> </RouterLink>
帖子 <RouterLink to="/demo" className="text-foreground/80 hover:text-foreground font-medium transition-colors">
</Link> 击杀生成
</RouterLink>
<RouterLink to="/about" className="text-foreground/80 hover:text-foreground font-medium transition-colors">
关于
</RouterLink>
</div> </div>
<div className="flex items-center gap-4 justify-end"> <div className="flex items-center gap-4">
<Button variant="ghost" onPress={toggleTheme}> <Button
{theme === "dark" ? "☀️" : "🌙"} isIconOnly
variant="light"
onPress={toggleTheme}
className="text-foreground/80"
>
{theme === "dark" ? (
<SunIcon className="w-5 h-5" />
) : (
<MoonIcon className="w-5 h-5" />
)}
</Button> </Button>
{session ? ( {session ? (
<Dropdown> <Dropdown>
<Dropdown.Trigger> <Dropdown.Trigger>
<button className="outline-none focus:outline-none rounded-full"> <Button isIconOnly variant="tertiary" className="rounded-full">
<Avatar size="sm"> <Avatar size="sm" color="accent">
<Avatar.Image <Avatar.Image
alt={session.user.name || "用户头像"} alt={session.user.name || "用户头像"}
src={session.user.image || ""} src={session.user.image || ""}
@@ -60,7 +77,7 @@ export function SiteNavbar() {
{(session.user.name || "U").slice(0, 2).toUpperCase()} {(session.user.name || "U").slice(0, 2).toUpperCase()}
</Avatar.Fallback> </Avatar.Fallback>
</Avatar> </Avatar>
</button> </Button>
</Dropdown.Trigger> </Dropdown.Trigger>
<Dropdown.Popover> <Dropdown.Popover>
<Dropdown.Menu aria-label="Profile Actions"> <Dropdown.Menu aria-label="Profile Actions">
@@ -75,19 +92,13 @@ export function SiteNavbar() {
</Dropdown> </Dropdown>
) : ( ) : (
<div className="flex gap-4 items-center"> <div className="flex gap-4 items-center">
<Link href="/login"> <RouterLink to="/login" className={buttonVariants({ variant: "light", className: "text-foreground font-medium" })}>
<Button variant="ghost" className="text-foreground hover:text-primary">
登录 登录
</Button> </RouterLink>
</Link>
<Link href="/register">
<Button variant="primary" className="text-foreground hover:text-primary">
注册
</Button>
</Link>
</div> </div>
)} )}
</div> </div>
</div>
</nav> </nav>
); );
} }

24
web/src/globals.css
View File

@@ -1,7 +1,27 @@
@import "tailwindcss"; @import "tailwindcss";
@import "@heroui/styles"; @import "@heroui/styles";
@layer base { @theme {
/* :root {} */ --color-brand: #C14B4B;
--color-brand-foreground: #FFFFFF;
--radius-2xl: 1.25rem;
--radius-3xl: 1.5rem;
}
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
}
.dark {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
}
}
body {
@apply bg-background text-foreground antialiased selection:bg-brand/20 selection:text-brand;
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
} }

8
web/src/layout.tsx
View File

@@ -1,7 +1,6 @@
import { Toast } from "@heroui/react"; import { Toast } from "@heroui/react";
import "./globals.css"; import "./globals.css";
// import Footer from "./components/footer"; import { SiteNavbar } from "./components/SiteNavbar";
// import Header from "./components/header";
export default function RootLayout({ export default function RootLayout({
children, children,
@@ -9,11 +8,10 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}) { }) {
return ( return (
<div className="min-h-screen"> <div className="min-h-screen bg-background text-foreground">
<Toast.Provider /> <Toast.Provider />
{/* <Header /> */} <SiteNavbar />
<main className="min-h-screen h-full">{children}</main> <main className="min-h-screen h-full">{children}</main>
{/* <Footer /> */}
</div> </div>
); );
} }

10
web/src/providers.tsx
View File

@@ -1,14 +1,8 @@
// import { ThemeProvider } from "next-themes";
// import { HeroUIProvider, ToastProvider } from '@heroui/react'
export function Providers( { children }: { children: React.ReactNode } ) { export function Providers( { children }: { children: React.ReactNode } ) {
return ( return (
// <HeroUIProvider> <>
// <ThemeProvider attribute="class" defaultTheme="dark">
// <ToastProvider />
{children} {children}
// </ThemeProvider> </>
// </HeroUIProvider>
); );
} }

6
web/src/root.tsx
View File

@@ -1,7 +1,7 @@
import { StrictMode, Suspense, useEffect } from "react"; import { StrictMode, Suspense, useEffect } from "react";
import { createRoot } from "react-dom/client"; import { createRoot } from "react-dom/client";
import { BrowserRouter, useRoutes } from "react-router-dom"; import { BrowserRouter, useRoutes } from "react-router-dom";
// import { Providers } from "./providers"; import { Providers } from "./providers";
import RootLayout from "./layout"; import RootLayout from "./layout";
import routes from "~react-pages"; import routes from "~react-pages";
@@ -28,11 +28,11 @@ const app = createRoot(document.getElementById("root")!);
app.render( app.render(
<StrictMode> <StrictMode>
<BrowserRouter> <BrowserRouter>
{/* <Providers> */} <Providers>
<RootLayout> <RootLayout>
<App /> <App />
</RootLayout> </RootLayout>
{/* </Providers> */} </Providers>
</BrowserRouter> </BrowserRouter>
</StrictMode>, </StrictMode>,
); );