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

- 重构主页、关于页、演示页和帖子页的UI，使用现代化的卡片设计和布局
- 添加主题切换功能，支持亮色/暗色模式
- 修复后端认证路由路径，从`/api`改为`/api/auth`
- 更新页面标题为"HLAE中文站"
- 简化Providers组件，移除未使用的主题配置
- 添加Hero组件展示网站主标题和操作按钮
- 优化登录和注册页面的表单验证和UI
- 更新全局样式，添加品牌颜色和主题变量
- 改进导航栏，添加图标和更好的响应式设计
- 优化资源管理模态框，添加图标字段支持

web/src/components/SiteNavbar.tsx

@@ -5,8 +5,11 @@ import {
   Dropdown,
   Label
 } from "@heroui/react";
+import { linkVariants, buttonVariants } from "@heroui/styles";
 import { useEffect, useState } from "react";
 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() {
   const { data: session } = useSession();
@@ -27,66 +30,74 @@ export function SiteNavbar() {
   };
 
   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">
-        <Link className="font-bold text-inherit text-lg no-underline text-foreground" href="/">
-          HLAE 中文站
-        </Link>
+        <RouterLink to="/" className="font-bold text-inherit text-xl no-underline text-foreground">
+          HLAE中文站
+        </RouterLink>
       </div>
 
-      <div className="hidden sm:flex gap-6 justify-center flex-1">
-        <Link className="text-foreground hover:text-primary transition-colors" href="/">
-          首页
-        </Link>
-        <Link className="text-foreground hover:text-primary transition-colors" href="/posts">
-          帖子
-        </Link>
-      </div>
+      <div className="flex items-center gap-8">
+        <div className="hidden sm:flex gap-8 items-center">
+          <RouterLink to="/" className="text-foreground/80 hover:text-foreground font-medium transition-colors">
+            主页
+          </RouterLink>
+          <RouterLink to="/demo" className="text-foreground/80 hover:text-foreground font-medium transition-colors">
+            击杀生成
+          </RouterLink>
+          <RouterLink to="/about" className="text-foreground/80 hover:text-foreground font-medium transition-colors">
+            关于
+          </RouterLink>
+        </div>
 
-      <div className="flex items-center gap-4 justify-end">
-        <Button variant="ghost" onPress={toggleTheme}>
-          {theme === "dark" ? "☀️" : "🌙"}
-        </Button>
-        {session ? (
-          <Dropdown>
-            <Dropdown.Trigger>
-              <button className="outline-none focus:outline-none rounded-full">
-                <Avatar size="sm">
-                  <Avatar.Image
-                    alt={session.user.name || "用户头像"}
-                    src={session.user.image || ""}
-                  />
-                  <Avatar.Fallback>
-                    {(session.user.name || "U").slice(0, 2).toUpperCase()}
-                  </Avatar.Fallback>
-                </Avatar>
-              </button>
-            </Dropdown.Trigger>
-            <Dropdown.Popover>
-              <Dropdown.Menu aria-label="Profile Actions">
-                <Dropdown.Item id="profile" textValue="Profile">
-                  <Label className="font-semibold">登录为 {session.user.email}</Label>
-                </Dropdown.Item>
-                <Dropdown.Item id="logout" textValue="Logout" onPress={() => signOut()}>
-                  <Label className="text-danger">退出登录</Label>
-                </Dropdown.Item>
-              </Dropdown.Menu>
-            </Dropdown.Popover>
-          </Dropdown>
-        ) : (
-          <div className="flex gap-4 items-center">
-            <Link href="/login">
-              <Button variant="ghost" className="text-foreground hover:text-primary">
+        <div className="flex items-center gap-4">
+          <Button 
+            isIconOnly 
+            variant="light" 
+            onPress={toggleTheme}
+            className="text-foreground/80"
+          >
+            {theme === "dark" ? (
+              <SunIcon className="w-5 h-5" />
+            ) : (
+              <MoonIcon className="w-5 h-5" />
+            )}
+          </Button>
+          
+          {session ? (
+            <Dropdown>
+              <Dropdown.Trigger>
+                <Button isIconOnly variant="tertiary" className="rounded-full">
+                  <Avatar size="sm" color="accent">
+                    <Avatar.Image
+                      alt={session.user.name || "用户头像"}
+                      src={session.user.image || ""}
+                    />
+                    <Avatar.Fallback>
+                      {(session.user.name || "U").slice(0, 2).toUpperCase()}
+                    </Avatar.Fallback>
+                  </Avatar>
+                </Button>
+              </Dropdown.Trigger>
+              <Dropdown.Popover>
+                <Dropdown.Menu aria-label="Profile Actions">
+                  <Dropdown.Item id="profile" textValue="Profile">
+                    <Label className="font-semibold">登录为 {session.user.email}</Label>
+                  </Dropdown.Item>
+                  <Dropdown.Item id="logout" textValue="Logout" onPress={() => signOut()}>
+                    <Label className="text-danger">退出登录</Label>
+                  </Dropdown.Item>
+                </Dropdown.Menu>
+              </Dropdown.Popover>
+            </Dropdown>
+          ) : (
+            <div className="flex gap-4 items-center">
+              <RouterLink to="/login" className={buttonVariants({ variant: "light", className: "text-foreground font-medium" })}>
                 登录
-              </Button>
-            </Link>
-            <Link href="/register">
-              <Button variant="primary" className="text-foreground hover:text-primary">
-                注册
-              </Button>
-            </Link>
-          </div>
-        )}
+              </RouterLink>
+            </div>
+          )}
+        </div>
       </div>
     </nav>
   );