好的！以下是一个适用于 v0.dev 的提示词（Prompt），用于生成一个 多页面的 Web App，其风格和功能类似于科技新闻平台（如 36Kr），并包含首页、分类页和个人中心等核心模块。
📌 v0.dev 提示词：科技新闻 Web App（36Kr 风格）
Prompt:
💡 创建一个多页面的科技新闻 Web App，风格类似 36Kr，包含以下核心模块：
🌍 1️⃣ 首页（推荐 + 解读）
📌 布局要求：
✅ 今日热门（突出最重要的科技新闻，带摘要和关键词）
✅ 推荐内容（基于用户兴趣，展示 AI、计算机视觉、量子计算等领域的精选文章）
✅ 快讯（以简短一句话形式，快速传递最新科技动态）
✅ 深度解读（提供技术解析、行业影响、代码示例等）
📌 示例内容：
🔥 Llama 3 发布：性能超越 GPT-4？
📌 摘要：Meta 发布 Llama 3，推理能力大幅提升，训练数据规模翻倍，能否挑战 GPT-4？
📌 关键词：#LLM #Meta #GPT-4
⚡ DeepMind 推出 AlphaFold 3，蛋白质预测更精准
⚡ OpenAI 计划开源部分 GPT-4 训练数据
📖 Transformer 进化史：从 Attention 到 MoE
📌 解析：深入剖析 Transformer 发展历程，MoE（专家混合）如何提升模型效率？
📌 代码：GitHub 直链
📂 2️⃣ 分类页（按领域筛选）
📌 布局要求：
✅ 按科技领域分类（如 AI、计算机视觉、量子计算、生物科技等）
✅ 支持筛选（用户可以选择感兴趣的领域查看相关内容）
📌 示例分类：
🔹 AI / 机器学习（Llama 3、Diffusion Transformer、强化学习新进展）
🔹 计算机视觉 / NLP（NeRF 进化、新型 OCR 识别算法）
🔹 量子计算 / 物理 / 数学（MIT 提出新型量子算法、量子计算如何优化密码学）
🔹 生物科技 / 其他（AlphaFold 3 发布、AI 在药物研发中的应用）
👤 3️⃣ 个人中心
📌 布局要求：
✅ 收藏夹（用户可以收藏文章，稍后阅读）
✅ 历史记录（追踪用户看过的内容）
✅ 订阅管理（用户可以订阅感兴趣的领域和关键词，获取个性化推荐）
📌 示例内容：
✅ 收藏：Transformer 进化史、如何用 LoRA 提升大模型微调效率
📌 历史：NeRF 进化、Diffusion Transformer
📌 订阅：关注领域（AI / NLP / 量子计算），关键词（Transformer、GPT-4、强化学习）
🎨 设计要求
📌 整体风格：现代化、简洁、科技感强
📌 交互体验：支持点击跳转、筛选分类、个性化推荐
📌 响应式布局：适配桌面端和移动端
🚀 任务目标
✅ 生成一个完整的 Web App，包含首页、分类页和个人中心
✅ 首页整合快讯、推荐、深度解读，提供高效信息获取
✅ 分类页支持按领域筛选，方便精准查找
✅ 个人中心提供收藏、历史、订阅功能，增强个性化体验
请基于上述要求，生成一个完整的多页面 Web App！ 🚀
📌 为什么这样设计？
✅ 适配 v0.dev：清晰的结构，让 AI 生成高质量 Web App
✅ 增强可读性：结合科技新闻、快讯和深度解读，满足不同用户需求
✅ 提升交互体验：支持个性化订阅和收藏，提高用户粘性
你可以直接将这个提示词输入 v0.dev，然后根据生成结果进行微调！🚀
390d ago
The user is asking me to create a multi-page web app similar to 36Kr (a Chinese tech news platform) with specific requirements for a homepage, category page, and personal center. The prompt is detailed and structured, providing clear guidance on what each page should contain.
</Thinking>
科技新闻 Web App (36Kr 风格)
我将为您创建一个多页面的科技新闻 Web App，风格类似36Kr，包含首页、分类页和个人中心三个核心模块。这个应用将采用现代化、简洁的设计，具有强烈的科技感，并支持响应式布局以适配不同设备。
<tsx file="app/layout.tsx">
import { Inter } from 'next/font/google';
import "./globals.css";
import Header from "@/components/header";
import Footer from "@/components/footer";
import { ThemeProvider } from "@/components/theme-provider";const inter = Inter({ subsets: ["latin"] });
export const metadata = { title: "TechPulse - 科技新闻平台", description: "最新科技资讯、深度解读和行业分析", };
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="zh-CN" suppressHydrationWarning>
<body className={inter.className}>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<div className="flex min-h-screen flex-col">
<Header />
<main className="flex-1">{children}</main>
<Footer />
</div>
</ThemeProvider>
</body>
</html>
);
}
</tsx>
<tsx file="app/globals.css">
@tailwind base;
@tailwind components;
@tailwind utilities;@layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; }
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 217.2 91.2% 59.8%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 224.3 76.3% 48%;
}}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
</tsx>
<tsx file="components/header.tsx">
"use client";import { useState } from "react"; import Link from "next/link"; import { usePathname } from "next/navigation"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { ModeToggle } from "@/components/mode-toggle"; import { Search, Menu, X } from 'lucide-react';
export default function Header() { const [isMenuOpen, setIsMenuOpen] = useState(false); const pathname = usePathname();
const routes = [
{ name: "首页", path: "/" },
{ name: "分类", path: "/categories" },
{ name: "个人中心", path: "/profile" },
];
return (
<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
<div className="container flex h-16 items-center justify-between">
<div className="flex items-center gap-2 md:gap-4">
<Button
variant="ghost"
size="icon"
className="md:hidden"
onClick={() => setIsMenuOpen(!isMenuOpen)}
>
{isMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
</Button>
<Link href="/" className="flex items-center gap-2">
<span className="text-xl font-bold">TechPulse</span>
</Link>
</div>
<nav className="hidden md:flex items-center gap-6">
{routes.map((route) => (
<Link
key={route.path}
href={route.path}
className={`text-sm font-medium transition-colors hover:text-primary ${
pathname === route.path ? "text-primary" : "text-muted-foreground"
}`}
>
{route.name}
</Link>
))}
</nav>
<div className="flex items-center gap-2">
<div className="relative hidden md:block">
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
type="search"
placeholder="搜索..."
className="w-[200px] pl-8 md:w-[250px] lg:w-[300px]"
/>
</div>
<ModeToggle />
<Button variant="outline" size="sm" asChild className="hidden md:inline-flex">
<Link href="/login">登录</Link>
</Button>
<Button size="sm" asChild className="hidden md:inline-flex">
<Link href="/register">注册</Link>
</Button>
</div>
</div>
{isMenuOpen && (
<div className="container md:hidden">
<nav className="flex flex-col space-y-3 py-4">
{routes.map((route) => (
<Link
key={route.path}
href={route.path}
className={`text-sm font-medium transition-colors hover:text-primary ${
pathname === route.path ? "text-primary" : "text-muted-foreground"
}`}
onClick={() => setIsMenuOpen(false)}
>
{route.name}
</Link>
))}
<div className="relative mt-2">
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
type="search"
placeholder="搜索..."
className="w-full pl-8"
/>
</div>
<div className="flex gap-2 pt-2">
<Button variant="outline" size="sm" asChild className="flex-1">
<Link href="/login">登录</Link>
</Button>
<Button size="sm" asChild className="flex-1">
<Link href="/register">注册</Link>
</Button>
</div>
</nav>
</div>
)}
</header>
);}
</tsx>
<tsx file="components/footer.tsx">
import Link from "next/link";export default function Footer() {
return (
<footer className="w-full border-t bg-background py-6">
<div className="container flex flex-col items-center justify-between gap-4 md:flex-row">
<div className="flex flex-col items-center gap-2 md:items-start">
<Link href="/" className="text-xl font-bold">
TechPulse
</Link>
<p className="text-center text-sm text-muted-foreground md:text-left">
科技新闻与深度解读平台，聚焦AI、计算机视觉、量子计算等前沿领域
</p>
</div>
<div className="flex flex-col items-center gap-2 md:items-end">
<nav className="flex gap-4">
<Link href="/about" className="text-sm text-muted-foreground hover:text-primary">
关于我们
</Link>
<Link href="/contact" className="text-sm text-muted-foreground hover:text-primary">
联系我们
</Link>
<Link href="/privacy" className="text-sm text-muted-foreground hover:text-primary">
隐私政策
</Link>
</nav>
<p className="text-center text-sm text-muted-foreground md:text-right">
© {new Date().getFullYear()} TechPulse. 保留所有权利。
</p>
</div>
</div>
</footer>
);
}
</tsx>
<tsx file="components/mode-toggle.tsx">
"use client";import { Moon, Sun } from 'lucide-react'; import { useTheme } from "next-themes";
import { Button } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu";
export function ModeToggle() { const { setTheme } = useTheme();
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon">
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span className="sr-only">切换主题</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => setTheme("light")}>
浅色
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("dark")}>
深色
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("system")}>
系统
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);}
</tsx>
<tsx file="app/page.tsx">
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ArrowRight, Clock, Bookmark, TrendingUp } from 'lucide-react';export default function HomePage() {
return (
<div className="container py-6">
<section className="mb-10">
<div className="mb-6 flex items-center justify-between">
<h2 className="text-2xl font-bold">今日热门</h2>
<Button variant="ghost" size="sm" className="gap-1">
查看更多 <ArrowRight className="h-4 w-4" />
</Button>
</div>
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
<Card className="flex flex-col">
<CardHeader className="pb-3">
<div className="flex items-center gap-2">
<Badge variant="secondary" className="bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">热门</Badge>
<span className="text-sm text-muted-foreground">2小时前</span>
</div>
<CardTitle className="text-xl">Llama 3 发布：性能超越 GPT-4？</CardTitle>
<CardDescription>
Meta 发布 Llama 3，推理能力大幅提升，训练数据规模翻倍，能否挑战 GPT-4？
</CardDescription>
</CardHeader>
<CardContent className="pb-3">
<div className="flex flex-wrap gap-2">
<Badge variant="outline">#LLM</Badge>
<Badge variant="outline">#Meta</Badge>
<Badge variant="outline">#GPT-4</Badge>
</div>
</CardContent>
<CardFooter className="mt-auto pt-3">
<Button variant="ghost" size="sm" className="ml-auto">
<Bookmark className="mr-2 h-4 w-4" />
收藏
</Button>
</CardFooter>
</Card>
<Card className="flex flex-col">
<CardHeader className="pb-3">
<div className="flex items-center gap-2">
<Badge variant="secondary" className="bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200">新闻</Badge>
<span className="text-sm text-muted-foreground">5小时前</span>
</div>
<CardTitle className="text-xl">DeepMind 推出 AlphaFold 3，蛋白质预测更精准</CardTitle>
<CardDescription>
AlphaFold 3 在蛋白质结构预测领域取得突破性进展，精度提升30%，有望加速药物研发进程。
</CardDescription>
</CardHeader>
<CardContent className="pb-3">
<div className="flex flex-wrap gap-2">
<Badge variant="outline">#DeepMind</Badge>
<Badge variant="outline">#AlphaFold</Badge>
<Badge variant="outline">#生物科技</Badge>
</div>
</CardContent>
<CardFooter className="mt-auto pt-3">
<Button variant="ghost" size="sm" className="ml-auto">
<Bookmark className="mr-2 h-4 w-4" />
收藏
</Button>
</CardFooter>
</Card>
<Card className="flex flex-col">
<CardHeader className="pb-3">
<div className="flex items-center gap-2">
<Badge variant="secondary" className="bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">独家</Badge>
<span className="text-sm text-muted-foreground">昨天</span>
</div>
<CardTitle className="text-xl">OpenAI 计划开源部分 GPT-4 训练数据</CardTitle>
<CardDescription>
OpenAI 宣布将开源部分 GPT-4 训练数据，以促进学术研究和提高模型透明度。
</CardDescription>
</CardHeader>
<CardContent className="pb-3">
<div className="flex flex-wrap gap-2">
<Badge variant="outline">#OpenAI</Badge>
<Badge variant="outline">#GPT-4</Badge>
<Badge variant="outline">#开源</Badge>
</div>
</CardContent>
<CardFooter className="mt-auto pt-3">
<Button variant="ghost" size="sm" className="ml-auto">
<Bookmark className="mr-2 h-4 w-4" />
收藏
</Button>
</CardFooter>
</Card>
</div>
</section>
<section className="mb-10">
<Tabs defaultValue="recommended">
<div className="mb-6 flex items-center justify-between">
<TabsList>
<TabsTrigger value="recommended">推荐内容</TabsTrigger>
<TabsTrigger value="latest">最新发布</TabsTrigger>
<TabsTrigger value="popular">热门阅读</TabsTrigger>
</TabsList>
<Button variant="ghost" size="sm" className="gap-1">
查看更多 <ArrowRight className="h-4 w-4" />
</Button>
</div>
<TabsContent value="recommended" className="mt-0">
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
<Card>
<CardHeader>
<div className="flex items-center justify-between">
<Badge>AI</Badge>
<div className="flex items-center text-sm text-muted-foreground">
<Clock className="mr-1 h-3 w-3" />
3天前
</div>
</div>
<CardTitle className="mt-2">如何用 LoRA 提升大模型微调效率</CardTitle>
</CardHeader>
<CardContent>
<p className="line-clamp-3">
LoRA（Low-Rank Adaptation）技术通过降低参数更新的维度，大幅减少微调所需的计算资源和时间，同时保持模型性能。
</p>
</CardContent>
<CardFooter>
<Button variant="ghost" size="sm">
阅读全文
</Button>
</CardFooter>
</Card>
<Card>
<CardHeader>
<div className="flex items-center justify-between">
<Badge>计算机视觉</Badge>
<div className="flex items-center text-sm text-muted-foreground">
<Clock className="mr-1 h-3 w-3" />
1周前
</div>
</div>
<CardTitle className="mt-2">NeRF 进化：从静态场景到动态重建</CardTitle>
</CardHeader>
<CardContent>
<p className="line-clamp-3">
神经辐射场（NeRF）技术从静态场景重建发展到动态场景捕捉，为元宇宙和AR/VR应用提供更真实的视觉体验。
</p>
</CardContent>
<CardFooter>
<Button variant="ghost" size="sm">
阅读全文
</Button>
</CardFooter>
</Card>
<Card>
<CardHeader>
<div className="flex items-center justify-between">
<Badge>量子计算</Badge>
<div className="flex items-center text-sm text-muted-foreground">
<Clock className="mr-1 h-3 w-3" />
2周前
</div>
</div>
<CardTitle className="mt-2">MIT 提出新型量子算法，加密世界将被颠覆？</CardTitle>
</CardHeader>
<CardContent>
<p className="line-clamp-3">
MIT研究团队提出的新型量子算法可能对现有加密系统构成威胁，引发密码学界对后量子加密的更多关注。
</p>
</CardContent>
<CardFooter>
<Button variant="ghost" size="sm">
阅读全文
</Button>
</CardFooter>
</Card>
</div>
</TabsContent>
<TabsContent value="latest" className="mt-0">
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
<Card>
<CardHeader>
<div className="flex items-center justify-between">
<Badge>AI</Badge>
<div className="flex items-center text-sm text-muted-foreground">
<Clock className="mr-1 h-3 w-3" />
今天
</div>
</div>
<CardTitle className="mt-2">Diffusion Transformer：图像生成新范式</CardTitle>
</CardHeader>
<CardContent>
<p className="line-clamp-3">
Diffusion Transformer结合了扩散模型和Transformer架构的优势，在图像生成质量和效率上取得显著提升。
</p>
</CardContent>
<CardFooter>
<Button variant="ghost" size="sm">
阅读全文
</Button>
</CardFooter>
</Card>
{/* 更多最新内容卡片 */}
</div>
</TabsContent>
<TabsContent value="popular" className="mt-0">
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
<Card>
<CardHeader>
<div className="flex items-center justify-between">
<Badge>AI</Badge>
<div className="flex items-center text-sm text-muted-foreground">
<TrendingUp className="mr-1 h-3 w-3" />
10万+阅读
</div>
</div>
<CardTitle className="mt-2">Transformer 进化史：从 Attention 到 MoE</CardTitle>
</CardHeader>
<CardContent>
<p className="line-clamp-3">
深入剖析 Transformer 发展历程，MoE（专家混合）如何提升模型效率？从架构创新到应用突破的全面解析。
</p>
</CardContent>
<CardFooter>
<Button variant="ghost" size="sm">
阅读全文
</Button>
</CardFooter>
</Card>
{/* 更多热门内容卡片 */}
</div>
</TabsContent>
</Tabs>
</section>
<div className="grid gap-6 md:grid-cols-3">
<section className="md:col-span-2">
<div className="mb-6 flex items-center justify-between">
<h2 className="text-2xl font-bold">深度解读</h2>
<Button variant="ghost" size="sm" className="gap-1">
查看更多 <ArrowRight className="h-4 w-4" />
</Button>
</div>
<div className="space-y-6">
<Card>
<CardHeader>
<div className="flex items-center justify-between">
<Badge variant="secondary" className="bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">深度</Badge>
<span className="text-sm text-muted-foreground">3天前</span>
</div>
<CardTitle className="text-xl">Transformer 进化史：从 Attention 到 MoE</CardTitle>
</CardHeader>
<CardContent>
<p className="mb-4">
深入剖析 Transformer 发展历程，MoE（专家混合）如何提升模型效率？从架构创新到应用突破的全面解析。
</p>
<div className="rounded-lg bg-muted p-4">
<h4 className="mb-2 font-medium">代码示例：MoE 实现</h4>
<pre className="overflow-x-auto text-xs">
<code>
{`import torchimport torch.nn as nn
class MoE(nn.Module): def init(self, input_size, num_experts, expert_size): super().init() self.gate = nn.Linear(input_size, num_experts) self.experts = nn.ModuleList( [nn.Linear(input_size, expert_size) for _ in range(num_experts)] )
def forward(self, x):
# 计算门控权重
gate_outputs = torch.softmax(self.gate(x), dim=-1)
final_output = torch.zeros(x.size(0), self.experts[0].out_features)
# 组合专家输出
for i, expert in enumerate(self.experts):
final_output += gate_outputs[:, i].unsqueeze(-1) * expert(x)
return final_output`}
</code>
</pre>
</div>
</CardContent>
<CardFooter>
<div className="flex flex-wrap gap-2">
<Badge variant="outline">#Transformer</Badge>
<Badge variant="outline">#MoE</Badge>
<Badge variant="outline">#深度学习</Badge>
</div>
<Button className="ml-auto">阅读全文</Button>
</CardFooter>
</Card>
<Card>
<CardHeader>
<div className="flex items-center justify-between">
<Badge variant="secondary" className="bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">深度</Badge>
<span className="text-sm text-muted-foreground">1周前</span>
</div>
<CardTitle className="text-xl">量子计算如何优化密码学：从理论到实践</CardTitle>
</CardHeader>
<CardContent>
<p>
量子计算对现有密码系统的挑战与机遇，后量子密码学的发展现状与未来趋势，以及量子安全通信的最新进展。
</p>
</CardContent>
<CardFooter>
<div className="flex flex-wrap gap-2">
<Badge variant="outline">#量子计算</Badge>
<Badge variant="outline">#密码学</Badge>
<Badge variant="outline">#安全</Badge>
</div>
<Button className="ml-auto">阅读全文</Button>
</CardFooter>
</Card>
</div>
</section>
<section>
<div className="mb-6 flex items-center justify-between">
<h2 className="text-2xl font-bold">快讯</h2>
<Button variant="ghost" size="sm" className="gap-1">
查看更多 <ArrowRight className="h-4 w-4" />
</Button>
</div>
<div className="space-y-4">
<Card>
<CardContent className="p-4">
<div className="flex items-center justify-between mb-2">
<Badge variant="outline">快讯</Badge>
<span className="text-xs text-muted-foreground">2小时前</span>
</div>
<p className="text-sm">OpenAI 计划开源部分 GPT-4 训练数据，以促进学术研究和提高模型透明度。</p>
</CardContent>
</Card>
<Card>
<CardContent className="p-4">
<div className="flex items-center justify-between mb-2">
<Badge variant="outline">快讯</Badge>
<span className="text-xs text-muted-foreground">4小时前</span>
</div>
<p className="text-sm">谷歌发布新一代TPU v5，AI训练速度提升2倍，能耗降低30%。</p>
</CardContent>
</Card>
<Card>
<CardContent className="p-4">
<div className="flex items-center justify-between mb-2">
<Badge variant="outline">快讯</Badge>
<span className="text-xs text-muted-foreground">昨天</span>
</div>
<p className="text-sm">特斯拉发布AI训练超级计算机Dojo 2.0，宣称性能是前代的5倍，将加速自动驾驶开发。</p>
</CardContent>
</Card>
<Card>
<CardContent className="p-4">
<div className="flex items-center justify-between mb-2">
<Badge variant="outline">快讯</Badge>
<span className="text-xs text-muted-foreground">2天前</span>
</div>
<p className="text-sm">微软宣布在Azure上推出新的AI加速器服务，支持更多开源模型的部署和优化。</p>
</CardContent>
</Card>
<Card>
<CardContent className="p-4">
<div className="flex items-center justify-between mb-2">
<Badge variant="outline">快讯</Badge>
<span className="text-xs text-muted-foreground">3天前</span>
</div>
<p className="text-sm">苹果公司收购AI初创公司Perceptio，加强设备端AI能力，保护用户隐私。</p>
</CardContent>
</Card>
</div>
</section>
</div>
</div>
);}
</tsx>
<tsx file="app/categories/page.tsx">
"use client";import { useState } from "react"; import Link from "next/link"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Clock, Filter, ArrowUpDown } from 'lucide-react'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select";
const categories = [ { id: "ai", name: "AI / 机器学习", count: 128 }, { id: "cv", name: "计算机视觉 / NLP", count: 87 }, { id: "quantum", name: "量子计算 / 物理 / 数学", count: 42 }, { id: "bio", name: "生物科技", count: 35 }, { id: "robotics", name: "机器人 / 自动化", count: 29 }, { id: "blockchain", name: "区块链 / Web3", count: 23 }, { id: "iot", name: "物联网 / 边缘计算", count: 18 }, { id: "ar-vr", name: "AR / VR / 元宇宙", count: 15 }, ];
const articles = [ { id: 1, title: "Llama 3 发布：性能超越 GPT-4？", description: "Meta 发布 Llama 3，推理能力大幅提升，训练数据规模翻倍，能否挑战 GPT-4？", category: "ai", tags: ["LLM", "Meta", "GPT-4"], time: "2小时前", readTime: "5分钟", }, { id: 2, title: "DeepMind 推出 AlphaFold 3，蛋白质预测更精准", description: "AlphaFold 3 在蛋白质结构预测领域取得突破性进展，精度提升30%，有望加速药物研发进程。", category: "bio", tags: ["DeepMind", "AlphaFold", "生物科技"], time: "5小时前", readTime: "7分钟", }, { id: 3, title: "NeRF 进化：从静态场景到动态重建", description: "神经辐射场（NeRF）技术从静态场景重建发展到动态场景捕捉，为元宇宙和AR/VR应用提供更真实的视觉体验。", category: "cv", tags: ["NeRF", "计算机视觉", "3D重建"], time: "1天前", readTime: "8分钟", }, { id: 4, title: "MIT 提出新型量子算法，加密世界将被颠覆？", description: "MIT研究团队提出的新型量子算法可能对现有加密系统构成威胁，引发密码学界对后量子加密的更多关注。", category: "quantum", tags: ["量子计算", "密码学", "MIT"], time: "2天前", readTime: "10分钟", }, { id: 5, title: "Transformer 进化史：从 Attention 到 MoE", description: "深入剖析 Transformer 发展历程，MoE（专家混合）如何提升模型效率？从架构创新到应用突破的全面解析。", category: "ai", tags: ["Transformer", "MoE", "深度学习"], time: "3天前", readTime: "12分钟", }, { id: 6, title: "如何用 LoRA 提升大模型微调效率", description: "LoRA（Low-Rank Adaptation）技术通过降低参数更新的维度，大幅减少微调所需的计算资源和时间，同时保持模型性能。", category: "ai", tags: ["LoRA", "微调", "大模型"], time: "4天前", readTime: "6分钟", }, ];
export default function CategoriesPage() {
const [selectedCategory, setSelectedCategory] = useState<string>("all");
const [sortBy, setSortBy] = useState<string>("newest");
const filteredArticles = selectedCategory === "all"
? articles
: articles.filter(article => article.category === selectedCategory);
const sortedArticles = [...filteredArticles].sort((a, b) => {
if (sortBy === "newest") {
return a.id - b.id;
} else if (sortBy === "oldest") {
return b.id - a.id;
} else if (sortBy === "readTime") {
return parseInt(a.readTime) - parseInt(b.readTime);
}
return 0;
});
const getCategoryName = (id: string) => {
const category = categories.find(cat => cat.id === id);
return category ? category.name : id;
};
return (
<div className="container py-6">
<div className="mb-8">
<h1 className="text-3xl font-bold mb-2">分类浏览</h1>
<p className="text-muted-foreground">
按科技领域浏览文章，发现感兴趣的内容
</p>
</div>
<div className="grid gap-6 md:grid-cols-4">
<div className="md:col-span-1">
<div className="sticky top-20">
<h3 className="font-medium mb-4">领域分类</h3>
<div className="space-y-2">
<Button
variant={selectedCategory === "all" ? "default" : "ghost"}
className="w-full justify-start"
onClick={() => setSelectedCategory("all")}
>
全部分类
<Badge variant="secondary" className="ml-auto">
{articles.length}
</Badge>
</Button>
{categories.map((category) => (
<Button
key={category.id}
variant={selectedCategory === category.id ? "default" : "ghost"}
className="w-full justify-start"
onClick={() => setSelectedCategory(category.id)}
>
{category.name}
<Badge variant="secondary" className="ml-auto">
{category.count}
</Badge>
</Button>
))}
</div>
</div>
</div>
<div className="md:col-span-3">
<div className="flex items-center justify-between mb-6">
<h2 className="text-2xl font-bold">
{selectedCategory === "all" ? "全部文章" : getCategoryName(selectedCategory)}
</h2>
<div className="flex items-center gap-2">
<Select value={sortBy} onValueChange={setSortBy}>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="排序方式" />
</SelectTrigger>
<SelectContent>
<SelectItem value="newest">最新发布</SelectItem>
<SelectItem value="oldest">最早发布</SelectItem>
<SelectItem value="readTime">阅读时间</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<div className="space-y-6">
{sortedArticles.map((article) => (
<Card key={article.id}>
<CardHeader>
<div className="flex items-center justify-between">
<Badge>{getCategoryName(article.category)}</Badge>
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<Clock className="h-3 w-3" />
{article.time} · {article.readTime}阅读
</div>
</div>
<CardTitle className="text-xl mt-2">{article.title}</CardTitle>
<CardDescription>{article.description}</CardDescription>
</CardHeader>
<CardFooter className="flex flex-wrap justify-between gap-2">
<div className="flex flex-wrap gap-2">
{article.tags.map((tag) => (
<Badge key={tag} variant="outline">#{tag}</Badge>
))}
</div>
<Button>阅读全文</Button>
</CardFooter>
</Card>
))}
</div>
</div>
</div>
</div>
);}
</tsx>
<tsx file="app/profile/page.tsx">
"use client";import { useState } from "react"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Badge } from "@/components/ui/badge"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Switch } from "@/components/ui/switch"; import { Label } from "@/components/ui/label"; import { Bookmark, Clock, History, Bell, User, Settings, Trash2 } from 'lucide-react';
const savedArticles = [ { id: 1, title: "Transformer 进化史：从 Attention 到 MoE", category: "AI / 机器学习", savedAt: "3天前", }, { id: 2, title: "如何用 LoRA 提升大模型微调效率", category: "AI / 机器学习", savedAt: "1周前", }, { id: 3, title: "量子计算如何优化密码学：从理论到实践", category: "量子计算 / 物理 / 数学", savedAt: "2周前", }, ];
const historyArticles = [ { id: 1, title: "NeRF 进化：从静态场景到动态重建", category: "计算机视觉 / NLP", readAt: "昨天", }, { id: 2, title: "Diffusion Transformer：图像生成新范式", category: "AI / 机器学习", readAt: "3天前", }, { id: 3, title: "MIT 提出新型量子算法，加密世界将被颠覆？", category: "量子计算 / 物理 / 数学", readAt: "1周前", }, { id: 4, title: "Llama 3 发布：性能超越 GPT-4？", category: "AI / 机器学习", readAt: "2周前", }, ];
const subscriptions = [ { id: "ai", name: "AI / 机器学习", subscribed: true }, { id: "cv", name: "计算机视觉 / NLP", subscribed: true }, { id: "quantum", name: "量子计算 / 物理 / 数学", subscribed: true }, { id: "bio", name: "生物科技", subscribed: false }, { id: "robotics", name: "机器人 / 自动化", subscribed: false }, { id: "blockchain", name: "区块链 / Web3", subscribed: false }, ];
const keywords = [ { id: "transformer", name: "Transformer", subscribed: true }, { id: "gpt4", name: "GPT-4", subscribed: true }, { id: "rl", name: "强化学习", subscribed: true }, { id: "nerf", name: "NeRF", subscribed: false }, { id: "diffusion", name: "扩散模型", subscribed: false }, ];
export default function ProfilePage() { const [subscribedCategories, setSubscribedCategories] = useState( subscriptions.map(s => ({ ...s })) ); const [subscribedKeywords, setSubscribedKeywords] = useState( keywords.map(k => ({ ...k })) );
const toggleCategory = (id: string) => {
setSubscribedCategories(
subscribedCategories.map(category =>
category.id === id
? { ...category, subscribed: !category.subscribed }
: category
)
);
};
const toggleKeyword = (id: string) => {
setSubscribedKeywords(
subscribedKeywords.map(keyword =>
keyword.id === id
? { ...keyword, subscribed: !keyword.subscribed }
: keyword
)
);
};
return (
<div className="container py-6">
<div className="mb-8">
<div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
<div className="flex items-center gap-4">
<Avatar className="h-16 w-16">
<AvatarImage src="/placeholder.svg?height=64&width=64" alt="用户头像" />
<AvatarFallback>用户</AvatarFallback>
</Avatar>
<div>
<h1 className="text-2xl font-bold">张三</h1>
<p className="text-muted-foreground">科技爱好者 · 关注AI和量子计算</p>
</div>
</div>
<div className="flex gap-2">
<Button variant="outline" size="sm" className="gap-1">
<User className="h-4 w-4" />
编辑资料
</Button>
<Button variant="outline" size="sm" className="gap-1">
<Settings className="h-4 w-4" />
设置
</Button>
</div>
</div>
</div>
<Tabs defaultValue="saved">
<TabsList className="mb-6">
<TabsTrigger value="saved" className="gap-2">
<Bookmark className="h-4 w-4" />
收藏夹
</TabsTrigger>
<TabsTrigger value="history" className="gap-2">
<History className="h-4 w-4" />
历史记录
</TabsTrigger>
<TabsTrigger value="subscriptions" className="gap-2">
<Bell className="h-4 w-4" />
订阅管理
</TabsTrigger>
</TabsList>
<TabsContent value="saved">
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
{savedArticles.map((article) => (
<Card key={article.id}>
<CardHeader>
<div className="flex items-center justify-between">
<Badge variant="outline">{article.category}</Badge>
<div className="flex items-center text-sm text-muted-foreground">
<Clock className="mr-1 h-3 w-3" />
收藏于 {article.savedAt}
</div>
</div>
<CardTitle className="mt-2">{article.title}</CardTitle>
</CardHeader>
<CardFooter className="flex justify-between">
<Button variant="ghost" size="sm">
阅读全文
</Button>
<Button variant="ghost" size="sm" className="text-destructive">
<Trash2 className="h-4 w-4" />
</Button>
</CardFooter>
</Card>
))}
</div>
</TabsContent>
<TabsContent value="history">
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
{historyArticles.map((article) => (
<Card key={article.id}>
<CardHeader>
<div className="flex items-center justify-between">
<Badge variant="outline">{article.category}</Badge>
<div className="flex items-center text-sm text-muted-foreground">
<Clock className="mr-1 h-3 w-3" />
阅读于 {article.readAt}
</div>
</div>
<CardTitle className="mt-2">{article.title}</CardTitle>
</CardHeader>
<CardFooter className="flex justify-between">
<Button variant="ghost" size="sm">
继续阅读
</Button>
<Button variant="ghost" size="sm">
<Bookmark className="h-4 w-4" />
</Button>
</CardFooter>
</Card>
))}
</div>
</TabsContent>
<TabsContent value="subscriptions">
<div className="grid gap-8 md:grid-cols-2">
<Card>
<CardHeader>
<CardTitle>关注领域</CardTitle>
<CardDescription>
选择您感兴趣的科技领域，获取相关内容推荐
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
{subscribedCategories.map((category) => (
<div key={category.id} className="flex items-center justify-between">
<Label htmlFor={`category-${category.id}`} className="flex-1">
{category.name}
</Label>
<Switch
id={`category-${category.id}`}
checked={category.subscribed}
onCheckedChange={() => toggleCategory(category.id)}
/>
</div>
))}
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>关键词</CardTitle>
<CardDescription>
订阅感兴趣的关键词，不错过相关内容更新
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
{subscribedKeywords.map((keyword) => (
<div key={keyword.id} className="flex items-center justify-between">
<Label htmlFor={`keyword-${keyword.id}`} className="flex-1">
{keyword.name}
</Label>
<Switch
id={`keyword-${keyword.id}`}
checked={keyword.subscribed}
onCheckedChange={() => toggleKeyword(keyword.id)}
/>
</div>
))}
</div>
</CardContent>
<CardFooter>
<Button variant="outline" className="w-full">
添加更多关键词
</Button>
</CardFooter>
</Card>
</div>
</TabsContent>
</Tabs>
</div>
);}
</tsx>
<tsx file="tailwind.config.js">
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
content: [
'./pages/**/*.{ts,tsx}',
'./components/**/*.{ts,tsx}',
'./app/**/*.{ts,tsx}',
'./src/**/*.{ts,tsx}',
],
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
"accordion-down": {
from: { height: 0 },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: 0 },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
plugins: [require("tailwindcss-animate")],
}
</tsx>项目概述
我已经为您创建了一个多页面的科技新闻 Web App，风格类似36Kr，包含三个核心模块：首页、分类页和个人中心。这个应用使用 Next.js App Router 构建，采用了现代化的设计，具有强烈的科技感，并支持响应式布局以适配不同设备。
技术栈
- 框架: Next.js (App Router) 1
- 样式: Tailwind CSS
- UI组件: shadcn/ui
- 图标: Lucide React
核心功能
1. 首页 (推荐 + 解读)
首页包含四个主要部分：
- 今日热门: 展示最重要的科技新闻，带摘要和关键词标签
- 推荐内容: 基于用户兴趣的精选文章，使用标签页切换不同类型的内容
- 快讯: 以简短一句话形式展示最新科技动态
- 深度解读: 提供技术解析、行业影响和代码示例
2. 分类页 (按领域筛选)
分类页允许用户按科技领域浏览文章：
- 侧边栏分类导航: 包括AI/机器学习、计算机视觉/NLP、量子计算等
- 排序功能: 支持按最新发布、最早发布和阅读时间排序
- 文章卡片: 展示文章标题、描述、分类和标签
3. 个人中心
个人中心提供个性化功能：
- 收藏夹: 用户可以收藏文章，稍后阅读
- 历史记录: 追踪用户看过的内容
- 订阅管理: 用户可以订阅感兴趣的领域和关键词，获取个性化推荐
设计特点
- 现代化UI: 使用卡片、标签和徽章等元素创建清晰的视觉层次
- 响应式布局: 适配桌面端和移动端
- 深色模式支持: 通过主题切换按钮可以在浅色和深色模式之间切换
- 交互体验: 支持点击跳转、筛选分类、标签页切换等交互功能
如何使用
您可以通过点击界面上的"添加到代码库"按钮将此项目添加到您的Next.js项目中。项目结构清晰，包含以下主要文件：
app/layout.tsx: 应用的根布局app/page.tsx: 首页app/categories/page.tsx: 分类页app/profile/page.tsx: 个人中心components/header.tsx: 页面顶部导航components/footer.tsx: 页面底部components/mode-toggle.tsx: 主题切换组件
这个项目可以作为科技新闻平台的起点，您可以根据需要进一步扩展功能，如添加文章详情页、用户认证、评论系统等。
390d ago