⚡️ feat: update global styles and color variables for improved theming

refactor: change import paths for DeviceContext and GravatarAvatar components

fix: adjust login form API call and update UI text for clarity

feat: add post API for listing posts with pagination and filtering options

feat: implement BlogCard component for displaying blog posts with enhanced UI

feat: create Badge component for consistent styling of labels and indicators

refactor: reintroduce DeviceContext with improved functionality for theme and language management

feat: define Label and Post models for better type safety and structure

web/src/api/client.ts

@@ -3,12 +3,12 @@ import { camelToSnakeObj, snakeToCamelObj } from "field-conv";
 
 const API_SUFFIX = "/api/v1";
 
-const axiosInstance = axios.create({
+const axiosClient = axios.create({
   baseURL: API_SUFFIX,
   timeout: 10000,
 });
 
-axiosInstance.interceptors.request.use((config) => {
+axiosClient.interceptors.request.use((config) => {
   if (config.data && typeof config.data === "object") {
     config.data = camelToSnakeObj(config.data);
   }
@@ -18,7 +18,7 @@ axiosInstance.interceptors.request.use((config) => {
   return config;
 });
 
-axiosInstance.interceptors.response.use(
+axiosClient.interceptors.response.use(
   (response) => {
     if (response.data && typeof response.data === "object") {
       response.data = snakeToCamelObj(response.data);
@@ -28,4 +28,4 @@ axiosInstance.interceptors.response.use(
   (error) => Promise.reject(error),
 );
 
-export default axiosInstance;
+export default axiosClient;

web/src/api/post.ts

@@ -0,0 +1,30 @@
+import type { BaseResponse } from "@/models/resp";
+import type { Post } from "@/models/post";
+import axiosClient from "./client";
+
+interface ListPostsParams {
+    page?: number;
+    size?: number;
+    orderedBy?: string;
+    reverse?: boolean;
+    keywords?: string;
+}
+
+export async function listPosts({
+    page = 1,
+    size = 10,
+    orderedBy = 'updated_at',
+    reverse = false,
+    keywords = ''
+}: ListPostsParams = {}): Promise<BaseResponse<Post[]>> {
+    const res = await axiosClient.get<BaseResponse<Post[]>>("/post/list", {
+        params: {
+            page,
+            size,
+            orderedBy,
+            reverse,
+            keywords
+        }
+    });
+    return res.data;
+}

web/src/api/user.ts

@@ -1,56 +1,46 @@
-import axiosInstance from "./client";
-
+import axiosClient from "./client";
 import type { OidcConfig } from "@/models/oidc-config";
 import type { User } from "@/models/user";
 import type { BaseResponse } from "@/models/resp";
 
-export function userLogin(
-    username: string,
-    password: string
-): Promise<BaseResponse<{ token: string; user: User }>> {
-    return axiosInstance
-        .post<BaseResponse<{ token: string; user: User }>>(
-            "/user/login",
-            {
-                username,
-                password,
-            }
-        )
-        .then(res => res.data);
+export interface LoginRequest {
+    username: string;
+    password: string;
+    rememberMe?: boolean;  // 可以轻松添加新字段
+    captcha?: string;
 }
 
-export function userRegister(
-    username: string,
-    password: string,
-    nickname: string,
-    email: string,
-    verificationCode?: string
-): Promise<BaseResponse<{ token: string; user: User }>> {
-    return axiosInstance
-        .post<BaseResponse<{ token: string; user: User }>>(
-            "/user/register",
-            {
-                username,
-                password,
-                nickname,
-                email,
-                verificationCode,
-            }
-        )
-        .then(res => res.data);
+export interface RegisterRequest {
+    username: string;
+    password: string;
+    nickname: string;
+    email: string;
+    verificationCode?: string;
 }
 
-export function ListOidcConfigs(): Promise<BaseResponse<{ oidcConfigs: OidcConfig[] }>> {
-    return axiosInstance
-        .get<BaseResponse<{ oidcConfigs: OidcConfig[] }>>("/user/oidc/list")
-        .then(res => {
-            const data = res.data;
-            if ('configs' in data) {
-                return {
-                    ...data,
-                    oidcConfigs: data.configs,
-                };
-            }
-            return data;
-        });
+export async function userLogin(
+    data: LoginRequest
+): Promise<BaseResponse<{ token: string; user: User }>> {
+    const res = await axiosClient.post<BaseResponse<{ token: string; user: User }>>(
+        "/user/login",
+        data 
+    );
+    return res.data;
+}
+
+export async function userRegister(
+    data: RegisterRequest
+): Promise<BaseResponse<{ token: string; user: User }>> {
+    const res = await axiosClient.post<BaseResponse<{ token: string; user: User }>>(
+        "/user/register",
+        data
+    );
+    return res.data;
+}
+
+export async function ListOidcConfigs(): Promise<BaseResponse<OidcConfig[]>> {
+    const res = await axiosClient.get<BaseResponse<OidcConfig[]>>(
+        "/user/oidc/list"
+    );
+    return res.data;
 }

web/src/app/(main)/layout.tsx

@@ -1,4 +1,4 @@
-import { Navbar } from "@/components/Navbar";
+import { Navbar } from "@/components/navbar";
 
 export default function RootLayout({
   children,

web/src/app/(main)/page.tsx

@@ -1,104 +1,189 @@
-import { NavigationMenu } from "@/components/ui/navigation-menu";
-import Image from "next/image";
+"use client";
+
+import { BlogCardGrid } from "@/components/blog-card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Search, TrendingUp, Clock, Heart, Eye } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import config from '../../config';
+import type { Label } from "@/models/label";
+import type { Post } from "@/models/post";
+import { listPosts } from "@/api/post";
+
+import { useEffect, useState } from "react";
+
 
 export default function Home() {
-  return (
-    <div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start bg-amber-500">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded">
-              src/app/page.tsx
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
+  const [labels, setLabels] = useState<Label[]>([]);
+  const [posts, setPosts] = useState<Post[]>([]);
 
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
+  useEffect(() => {
+    listPosts().then(data => {
+      setPosts(data.data);
+      console.log(posts);
+    }).catch(error => {
+      console.error("Failed to fetch posts:", error);
+    });
+  }, []);
+
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50">
+      {/* Hero Section */}
+      <section className="relative py-10 lg:py-16 overflow-hidden">
+      {/* 背景装饰 */}
+      <div className="absolute inset-0 bg-grid-white/[0.02] bg-grid-16 pointer-events-none" />
+
+      {/* 容器 - 关键布局 */}
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
+        <div className="text-center max-w-4xl mx-auto">
+        <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 bg-gradient-to-r from-slate-900 via-blue-900 to-slate-900 bg-clip-text text-transparent">
+          Snowykami's Blog
+        </h1>
+        <p className="text-xl md:text-2xl text-slate-600 mb-8 max-w-2xl mx-auto leading-relaxed">
+          {config.metadata.description}
+        </p>
+
+          {/* 搜索框 */}
+          <div className="relative max-w-md mx-auto mb-12">
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 w-5 h-5" />
+          <Input
+            placeholder="搜索文章..."
+            className="pl-10 pr-4 py-3 text-lg border-slate-200 focus:border-blue-500 rounded-full"
+          />
+          </div>
+
+          {/* 热门标签 */}
+          <div className="flex flex-wrap justify-center gap-2 mb-8">
+          {['React', 'TypeScript', 'Next.js', 'Node.js', 'AI', '前端开发'].map((tag) => (
+            <Badge
+            key={tag}
+            variant="secondary"
+            className="px-4 py-2 hover:bg-blue-100 cursor-pointer transition-colors"
+            >
+            {tag}
+            </Badge>
+          ))}
+          </div>
         </div>
-      </main>
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
+      </div>
+      </section>
+
+      {/* 主内容区域 */}
+      <section className="py-16">
+      {/* 容器 - 关键布局 */}
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
+        <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
+        {/* 主要内容区域 */}
+        <div className="lg:col-span-3">
+          {/* 文章列表标题 */}
+          <div className="flex items-center justify-between mb-8">
+          <h2 className="text-3xl font-bold text-slate-900">最新文章</h2>
+          <div className="flex items-center gap-4">
+            <Button variant="outline" size="sm">
+            <Clock className="w-4 h-4 mr-2" />
+            最新
+            </Button>
+            <Button variant="outline" size="sm">
+            <TrendingUp className="w-4 h-4 mr-2" />
+            热门
+            </Button>
+          </div>
+          </div>
+
+          {/* 博客卡片网格 */}
+          <BlogCardGrid posts={posts} />
+
+          {/* 加载更多按钮 */}
+          <div className="text-center mt-12">
+          <Button size="lg" className="px-8">
+            加载更多文章
+          </Button>
+          </div>
+        </div>
+
+        {/* 侧边栏 */}
+        <div className="lg:col-span-1 space-y-6">
+          {/* 关于我 */}
+          <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+            <Heart className="w-5 h-5 text-red-500" />
+            关于我
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-center mb-4">
+            <div className="w-20 h-20 mx-auto mb-3 bg-gradient-to-br from-blue-400 to-purple-500 rounded-full flex items-center justify-center text-white text-2xl font-bold">
+              S
+            </div>
+            <h3 className="font-semibold text-lg">{config.owner.name}</h3>
+            <p className="text-sm text-slate-600">{config.owner.motto}</p>
+            </div>
+            <p className="text-sm text-slate-600 leading-relaxed">
+            {config.owner.description}
+            </p>
+          </CardContent>
+          </Card>
+
+          {/* 热门文章 */}
+          <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+            <TrendingUp className="w-5 h-5 text-orange-500" />
+            热门文章
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {posts.slice(0, 3).map((post, index) => (
+            <div key={post.id} className="flex items-start gap-3">
+              <span className="flex-shrink-0 w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-sm font-semibold">
+              {index + 1}
+              </span>
+              <div className="flex-1 min-w-0">
+              <h4 className="font-medium text-sm line-clamp-2 mb-1">
+                {post.title}
+              </h4>
+              <div className="flex items-center gap-2 text-xs text-slate-500">
+                <span className="flex items-center gap-1">
+                <Eye className="w-3 h-3" />
+                {post.viewCount}
+                </span>
+                <span className="flex items-center gap-1">
+                <Heart className="w-3 h-3" />
+                {post.likeCount}
+                </span>
+              </div>
+              </div>
+            </div>
+            ))}
+          </CardContent>
+          </Card>
+
+          {/* 标签云 */}
+          <Card>
+          <CardHeader>
+            <CardTitle>标签云</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-wrap gap-2">
+            {['React', 'TypeScript', 'Next.js', 'Node.js', 'JavaScript', 'CSS', 'HTML', 'Vue', 'Angular', 'Webpack'].map((tag) => (
+              <Badge
+              key={tag}
+              variant="outline"
+              className="text-xs hover:bg-blue-50 cursor-pointer"
+              >
+              {tag}
+              </Badge>
+            ))}
+            </div>
+          </CardContent>
+          </Card>
+        </div>
+        </div>
+      </div>
+      </section>
     </div>
   );
-}
+}

web/src/app/globals.css

@@ -44,72 +44,72 @@
 }
 
 :root {
-  --radius: 0.625rem;
+  --radius: 0.65rem;
   --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.623 0.214 259.815);
+  --primary-foreground: oklch(0.97 0.014 254.604);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
   --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.623 0.214 259.815);
   --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 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.623 0.214 259.815);
+  --sidebar-primary-foreground: oklch(0.97 0.014 254.604);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.623 0.214 259.815);
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
+  --background: oklch(0.141 0.005 285.823);
   --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
+  --card: oklch(0.21 0.006 285.885);
   --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
+  --popover: oklch(0.21 0.006 285.885);
   --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
+  --primary: oklch(0.546 0.245 262.881);
+  --primary-foreground: oklch(0.379 0.146 265.522);
+  --secondary: oklch(0.274 0.006 286.033);
   --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
+  --ring: oklch(0.488 0.243 264.376);
   --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.205 0 0);
+  --sidebar: oklch(0.21 0.006 285.885);
   --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-primary: oklch(0.546 0.245 262.881);
+  --sidebar-primary-foreground: oklch(0.379 0.146 265.522);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+  --sidebar-ring: oklch(0.488 0.243 264.376);
 }
 
 @layer base {

web/src/app/layout.tsx

@@ -1,8 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
-import { Navbar } from "@/components/Navbar";
-import { DeviceProvider } from "@/contexts/DeviceContext";
+import { DeviceProvider } from "@/contexts/device-context";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",

web/src/components/Navbar.tsx

@@ -12,8 +12,8 @@ import {
     NavigationMenuTrigger,
     navigationMenuTriggerStyle,
 } from "@/components/ui/navigation-menu"
-import GravatarAvatar from "./Gravatar"
-import { useDevice } from "@/contexts/DeviceContext"
+import GravatarAvatar from "@/components/gravatar"
+import { useDevice } from "@/contexts/device-context"
 
 const components: { title: string; href: string }[] = [
     {

web/src/components/blog-card.tsx

@@ -0,0 +1,289 @@
+import { Post } from "@/models/post";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import Image from "next/image";
+import { Calendar, Clock, Eye, Heart, MessageCircle, Lock } from "lucide-react";
+import { cn } from "@/lib/utils";
+import config from "@/config";
+
+interface BlogCardProps {
+  post: Post;
+  className?: string;
+}
+
+export function BlogCard({ post, className }: BlogCardProps) {
+  // 格式化日期
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('zh-CN', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit'
+    });
+  };
+
+  // 计算阅读时间（估算）
+  const getReadingTime = (content: string) => {
+    const wordsPerMinute = 200;
+    const wordCount = content.length;
+    const minutes = Math.ceil(wordCount / wordsPerMinute);
+    return `${minutes} 分钟阅读`;
+  };
+
+  // 根据内容类型获取图标
+  const getContentTypeIcon = (type: Post['type']) => {
+    switch (type) {
+      case 'markdown':
+        return '📝';
+      case 'html':
+        return '🌐';
+      case 'text':
+        return '📄';
+      default:
+        return '📝';
+    }
+  };
+
+  return (
+    <Card className={cn(
+      "group overflow-hidden hover:shadow-xl transition-all duration-300 h-full flex flex-col cursor-pointer",
+      className
+    )}>
+      {/* 封面图片区域 */}
+      <div className="relative aspect-[16/9] overflow-hidden">
+        {/* 自定义封面图片 */}
+        {(post.cover || config.defaultCover) ? (
+          <Image
+            src={post.cover || config.defaultCover}
+            alt={post.title}
+            fill
+            className="object-cover w-full h-full transition-transform duration-300 group-hover:scale-105"
+            sizes="(max-width: 768px) 100vw, 33vw"
+            priority={false}
+          />
+        ) : (
+          // 默认渐变背景 - 基于热度生成颜色
+          <div 
+            className={cn(
+              "w-full h-full bg-gradient-to-br",
+              post.heat > 80 ? "from-red-400 via-pink-500 to-orange-500" :
+              post.heat > 60 ? "from-orange-400 via-yellow-500 to-red-500" :
+              post.heat > 40 ? "from-blue-400 via-purple-500 to-pink-500" :
+              post.heat > 20 ? "from-green-400 via-blue-500 to-purple-500" :
+              "from-gray-400 via-slate-500 to-gray-600"
+            )}
+          />
+        )}
+        
+        {/* 覆盖层 */}
+        <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
+        
+        {/* 私有文章标识 */}
+        {post.isPrivate && (
+          <Badge 
+            variant="destructive" 
+            className="absolute top-4 left-4 bg-red-500/90 text-white hover:bg-red-500"
+          >
+            <Lock className="w-3 h-3 mr-1" />
+            私有
+          </Badge>
+        )}
+        
+        {/* 内容类型标签 */}
+        <Badge 
+          variant="secondary"
+          className="absolute top-4 right-4 bg-white/90 text-gray-700 hover:bg-white"
+        >
+          {getContentTypeIcon(post.type)} {post.type.toUpperCase()}
+        </Badge>
+
+        {/* 热度指示器 */}
+        {post.heat > 50 && (
+          <div className="absolute bottom-4 right-4">
+            <Badge className="bg-gradient-to-r from-orange-500 to-red-500 text-white border-0">
+              🔥 {post.heat}
+            </Badge>
+          </div>
+        )}
+      </div>
+
+      {/* Card Header - 标题区域 */}
+      <CardHeader className="pb-3">
+        <CardTitle className="line-clamp-2 group-hover:text-primary transition-colors text-lg leading-tight">
+          {post.title}
+        </CardTitle>
+        <CardDescription className="line-clamp-3 leading-relaxed">
+          {post.content.replace(/[#*`]/g, '').substring(0, 150)}
+          {post.content.length > 150 ? '...' : ''}
+        </CardDescription>
+      </CardHeader>
+
+      {/* Card Content - 主要内容 */}
+      <CardContent className="flex-1 pb-3">
+        {/* 标签列表 */}
+        {post.labels && post.labels.length > 0 && (
+          <div className="flex flex-wrap gap-2 mb-4">
+            {post.labels.slice(0, 3).map((label) => (
+              <Badge 
+                key={label.id} 
+                variant="outline" 
+                className="text-xs hover:bg-primary/10"
+                style={{ 
+                  borderColor: label.color || '#e5e7eb',
+                  color: label.color || '#6b7280'
+                }}
+              >
+                {label.key}
+              </Badge>
+            ))}
+            {post.labels.length > 3 && (
+              <Badge variant="outline" className="text-xs">
+                +{post.labels.length - 3}
+              </Badge>
+            )}
+          </div>
+        )}
+        
+        {/* 统计信息 */}
+        <div className="grid grid-cols-2 gap-4 text-sm text-muted-foreground">
+          <div className="flex items-center gap-3">
+            {/* 点赞数 */}
+            <div className="flex items-center gap-1">
+              <Heart className="w-4 h-4" />
+              <span>{post.likeCount}</span>
+            </div>
+            
+            {/* 评论数 */}
+            <div className="flex items-center gap-1">
+              <MessageCircle className="w-4 h-4" />
+              <span>{post.commentCount}</span>
+            </div>
+          </div>
+          
+          <div className="flex items-center justify-end gap-3">
+            {/* 阅读量 */}
+            <div className="flex items-center gap-1">
+              <Eye className="w-4 h-4" />
+              <span>{post.viewCount}</span>
+            </div>
+            
+            {/* 阅读时间 */}
+            <div className="flex items-center gap-1">
+              <Clock className="w-4 h-4" />
+              <span>{getReadingTime(post.content)}</span>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+
+      {/* Card Footer - 日期和操作区域 */}
+      <CardFooter className="pt-3 border-t border-border/50 flex items-center justify-between">
+        {/* 创建日期 */}
+        <div className="flex items-center gap-1 text-sm text-muted-foreground">
+          <Calendar className="w-4 h-4" />
+          <time dateTime={post.createdAt}>
+            {formatDate(post.createdAt)}
+          </time>
+        </div>
+        
+        {/* 更新日期（如果与创建日期不同）或阅读提示 */}
+        {post.updatedAt !== post.createdAt ? (
+          <div className="text-xs text-muted-foreground">
+            更新于 {formatDate(post.updatedAt)}
+          </div>
+        ) : (
+          <div className="text-sm text-primary">
+            阅读更多 →
+          </div>
+        )}
+      </CardFooter>
+    </Card>
+  );
+}
+
+// 骨架屏加载组件 - 使用 shadcn Card 结构
+export function BlogCardSkeleton() {
+  return (
+    <Card className="overflow-hidden h-full flex flex-col">
+      {/* 封面图片骨架 */}
+      <div className="aspect-[16/9] bg-muted animate-pulse" />
+      
+      {/* Header 骨架 */}
+      <CardHeader className="pb-3">
+        <div className="h-6 bg-muted rounded animate-pulse mb-2" />
+        <div className="space-y-2">
+          <div className="h-4 bg-muted rounded animate-pulse" />
+          <div className="h-4 bg-muted rounded w-3/4 animate-pulse" />
+          <div className="h-4 bg-muted rounded w-1/2 animate-pulse" />
+        </div>
+      </CardHeader>
+      
+      {/* Content 骨架 */}
+      <CardContent className="flex-1 pb-3">
+        <div className="flex gap-2 mb-4">
+          <div className="h-6 w-16 bg-muted rounded animate-pulse" />
+          <div className="h-6 w-20 bg-muted rounded animate-pulse" />
+          <div className="h-6 w-14 bg-muted rounded animate-pulse" />
+        </div>
+        <div className="grid grid-cols-2 gap-4">
+          <div className="h-4 bg-muted rounded animate-pulse" />
+          <div className="h-4 bg-muted rounded animate-pulse" />
+        </div>
+      </CardContent>
+      
+      {/* Footer 骨架 */}
+      <CardFooter className="pt-3 border-t">
+        <div className="h-4 w-24 bg-muted rounded animate-pulse" />
+        <div className="h-4 w-20 bg-muted rounded animate-pulse ml-auto" />
+      </CardFooter>
+    </Card>
+  );
+}
+
+// 网格布局的博客卡片列表
+export function BlogCardGrid({ 
+  posts, 
+  isLoading,
+  showPrivate = false
+}: { 
+  posts: Post[]; 
+  isLoading?: boolean;
+  showPrivate?: boolean;
+}) {
+  const filteredPosts = showPrivate ? posts : posts.filter(post => !post.isPrivate);
+
+  if (isLoading) {
+    return (
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {Array.from({ length: 6 }).map((_, index) => (
+          <BlogCardSkeleton key={index} />
+        ))}
+      </div>
+    );
+  }
+
+  if (filteredPosts.length === 0) {
+    return (
+      <Card className="p-12 text-center">
+        <CardContent>
+          <p className="text-muted-foreground text-lg">暂无文章</p>
+          <p className="text-sm text-muted-foreground mt-2">
+            {showPrivate ? '没有找到任何文章' : '没有找到公开的文章'}
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      {filteredPosts.map((post) => (
+        <Link key={post.id} href={`/posts/${post.id}`} className="block h-full">
+          <BlogCard post={post} />
+        </Link>
+      ))}
+    </div>
+  );
+}

web/src/components/login-form.tsx

@@ -15,7 +15,7 @@ import Image from "next/image"
 import { useEffect, useState } from "react"
 import type { OidcConfig } from "@/models/oidc-config"
 import { ListOidcConfigs, userLogin } from "@/api/user"
-import Link from "next/link" // 使用 Next.js 的 Link 而不是 lucide 的 Link
+import Link from "next/link"
 import { useRouter, useSearchParams } from "next/navigation"
 
 export function LoginForm({
@@ -32,8 +32,7 @@ export function LoginForm({
   useEffect(() => {
     ListOidcConfigs()
       .then((res) => {
-        setOidcConfigs(res.data.oidcConfigs || []) // 确保是数组
-        console.log("OIDC configs fetched:", res.data.oidcConfigs)
+        setOidcConfigs(res.data || []) // 确保是数组
       })
       .catch((error) => {
         console.error("Error fetching OIDC configs:", error)
@@ -44,7 +43,7 @@ export function LoginForm({
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault()
     try {
-      const res = await userLogin(username, password)
+      const res = await userLogin({username, password})
       console.log("Login successful:", res)
       router.push(redirectBack)
     } catch (error) {
@@ -58,7 +57,7 @@ export function LoginForm({
         <CardHeader className="text-center">
           <CardTitle className="text-xl">Welcome back</CardTitle>
           <CardDescription>
-            Login with Open ID Connect or your email and password.
+            Login with Open ID Connect.
           </CardDescription>
         </CardHeader>
         <CardContent>

web/src/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+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 badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

web/src/config.ts

@@ -2,6 +2,13 @@ const config = {
     metadata: {
         name: "Snowykami's Blog",
         icon: "https://cdn.liteyuki.org/snowykami/avatar.jpg",
+        description: "分享一些好玩的东西"
+    },
+    defaultCover: "https://cdn.liteyuki.org/blog/background.png",
+    owner: {
+        name: "Snowykami",
+        description: "全栈开发工程师，喜欢分享技术心得和生活感悟。",
+        motto: "And now that story unfolds into a journey that, alone, I set out to"
     }
 }
 

web/src/models/label.ts

@@ -0,0 +1,7 @@
+export interface Label {
+    id: number;
+    key: string;
+    value: string;
+    color: string;
+    className?: string;
+}

web/src/models/post.ts

@@ -0,0 +1,17 @@
+import type { Label } from "@/models/label";
+
+export interface Post {
+    id: number;
+    title: string;
+    content: string;
+    cover: string | null; // 封面可以为空
+    type: "markdown" | "html" | "text";
+    labels: Label[] | null; // 标签可以为空
+    isPrivate: boolean;
+    likeCount: number;
+    commentCount: number;
+    viewCount: number;
+    heat: number;
+    createdAt: string;
+    updatedAt: string;
+}