diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index f74b736..e0cf4e8 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -582,6 +582,77 @@ h1, h2, h3, h4 {
border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
}
+ /* 首页欢迎横幅 */
+ .j13-hero {
+ position: relative;
+ overflow: hidden;
+ padding: 20px 22px;
+ border-radius: var(--r);
+ border: 1px solid var(--line);
+ box-shadow: var(--shadow-sm);
+ background:
+ linear-gradient(115deg, color-mix(in srgb, var(--accent-soft) 75%, var(--panel)) 0%, var(--panel) 60%);
+ }
+ .j13-hero-glow {
+ position: absolute;
+ top: -72px;
+ right: -52px;
+ width: 200px;
+ height: 200px;
+ border-radius: 9999px;
+ background: var(--accent-soft);
+ pointer-events: none;
+ }
+ .j13-hero-stats {
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ gap: 12px 10px;
+ width: 100%;
+ }
+ .j13-hero-stat {
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+ min-width: 0;
+ }
+ .j13-hero-stat-num {
+ font-size: 21px;
+ font-weight: 800;
+ line-height: 1.15;
+ letter-spacing: -0.015em;
+ color: var(--ink);
+ font-variant-numeric: tabular-nums;
+ }
+ .j13-hero-stat-num.is-hot { color: var(--accent); }
+ .j13-hero-stat-lab {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ font-size: 12px;
+ color: var(--ink-3);
+ white-space: nowrap;
+ }
+ .j13-dot-pulse {
+ width: 6px;
+ height: 6px;
+ border-radius: 9999px;
+ background: var(--accent);
+ animation: j13-dot-pulse 2.4s ease-in-out infinite;
+ }
+ @media (min-width: 1024px) {
+ .j13-hero { padding: 22px 26px; }
+ .j13-hero-stats {
+ display: flex;
+ width: auto;
+ gap: 0;
+ }
+ .j13-hero-stat + .j13-hero-stat {
+ margin-left: 22px;
+ padding-left: 22px;
+ border-left: 1px solid var(--line);
+ }
+ }
+
/* 移动端横向板块条(滚动条隐藏,保留触控惯性) */
.j13-chips {
display: flex;
@@ -739,6 +810,11 @@ h1, h2, h3, h4 {
}
.j13-fade-up { animation: j13-fade-up 0.2s ease-out both; }
+@keyframes j13-dot-pulse {
+ 0%, 100% { opacity: 1; transform: scale(1); }
+ 50% { opacity: 0.35; transform: scale(0.8); }
+}
+
/* 跳到主内容 */
.skip-link {
position: fixed;
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index f95358e..4ace582 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -14,6 +14,7 @@ import PostRow from "@/components/PostRow";
import FeedTabs, { type FeedSort } from "@/components/home/FeedTabs";
import { WorkspaceNav, WorkspaceNavMobile } from "@/components/home/WorkspaceNav";
import { CommunityPanels, CommunityPanelsMobile } from "@/components/home/CommunityPanels";
+import HomeHero from "@/components/home/HomeHero";
export const metadata: Metadata = {
title: "姜十三论坛 · 技术讨论社区",
@@ -150,6 +151,8 @@ export default async function HomePage({ searchParams }: HomePageProps) {
return (
+
+
@@ -201,22 +204,14 @@ export default async function HomePage({ searchParams }: HomePageProps) {
{/* 右栏:社区面板 */}
{overview && (
-
+
)}
{/* 窄屏:面板下沉到帖子流之后 */}
{overview && (
-
+
)}
diff --git a/frontend/components/home/CommunityPanels.tsx b/frontend/components/home/CommunityPanels.tsx
index 35f4938..481e4db 100644
--- a/frontend/components/home/CommunityPanels.tsx
+++ b/frontend/components/home/CommunityPanels.tsx
@@ -1,36 +1,8 @@
import Link from "next/link";
-import { BarChart3, Flame, Users, MessagesSquare, MessageCircle, Heart, Sparkles } from "lucide-react";
-import type { OverviewStats, PostListItem, ActiveUser } from "@/lib/api";
+import { Flame, Users, MessageCircle, Heart } from "lucide-react";
+import type { PostListItem, ActiveUser } from "@/lib/api";
import Avatar from "@/components/Avatar";
-/* ---------- 统计 2×2 ---------- */
-
-function StatsGrid({ stats }: { stats: OverviewStats }) {
- const items = [
- { icon: MessagesSquare, label: "讨论", value: stats.posts },
- { icon: Users, label: "成员", value: stats.users },
- { icon: MessageCircle, label: "评论", value: stats.comments },
- { icon: Sparkles, label: "今日", value: stats.today_posts },
- ];
- return (
-
-
- 社区数据
-
-
- {items.map(({ icon: Icon, label, value }) => (
-
- {value}
-
- {label}
-
-
- ))}
-
-
- );
-}
-
/* ---------- 热门榜 ---------- */
function HotRanking({ posts }: { posts: PostListItem[] }) {
@@ -77,8 +49,8 @@ function HotRanking({ posts }: { posts: PostListItem[] }) {
function ActiveUsers({ users }: { users: ActiveUser[] }) {
return (
-
-
+
+
活跃成员
{users.length === 0 ? (
@@ -104,18 +76,15 @@ function ActiveUsers({ users }: { users: ActiveUser[] }) {
/* ---------- 桌面 / 移动两种装配 ---------- */
export function CommunityPanels({
- stats,
hot,
activeUsers,
}: {
- stats: OverviewStats;
hot: PostListItem[];
activeUsers: ActiveUser[];
}) {
return (