18152827937/AOUN
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2025.11.28.22.40

Browse Source
This commit is contained in:
RUI
2025-11-28 22:44:54 +08:00
parent 0d73d0c63b
commit 21da21925e
71 changed files with 2924 additions and 1834 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/pages/article/[id].tsx
View File

@@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import Image from 'next/image';
import Link from 'next/link';
@@ -8,9 +8,8 @@ import CommentSection from '@/components/article/CommentSection';
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Skeleton } from "@/components/ui/skeleton";
import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@/components/ui/card";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
import { Loader2, Lock, Download, Calendar, User as UserIcon, Tag as TagIcon, Share2, Crown, Sparkles, FileText, Eye, ShoppingCart, Copy, Check, Box, HardDrive } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Loader2, Lock, Download, Calendar, User as UserIcon, Tag as TagIcon, Share2, Crown, FileText, Eye, ShoppingCart, Copy, Check, Box, HardDrive } from 'lucide-react';
import { format } from 'date-fns';
import { zhCN } from 'date-fns/locale';
import { toast } from 'sonner';
@@ -53,7 +52,7 @@ interface Article {
export default function ArticleDetail() {
const router = useRouter();
const { id } = router.query;
const { user, loading: authLoading } = useAuth();
const { user } = useAuth();
const [article, setArticle] = useState<Article | null>(null);
const [recentArticles, setRecentArticles] = useState<Article[]>([]);
const [loading, setLoading] = useState(true);
@@ -193,9 +192,9 @@ export default function ArticleDetail() {
}}
>
<div className="max-w-7xl mx-auto px-4 py-8">
<div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
{/* Main Content - Left Column (75%) */}
<div className="lg:col-span-3">
<div className="grid grid-cols-1 lg:grid-cols-10 gap-8">
{/* Main Content - Left Column (70%) */}
<div className="lg:col-span-7">
{/* Article Header */}
<div className="mb-8">
<div className="flex items-center gap-2 mb-4">
@@ -203,18 +202,18 @@ export default function ArticleDetail() {
{article.分类ID?.分类名称 || '未分类'}
</Badge>
{article.标签ID列表?.map((tag, index) => (
<Badge key={index} variant="outline" className="text-gray-500">
<Badge key={index} variant="outline" className="text-muted-foreground">
{tag.标签名称}
</Badge>
))}
</div>
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6 leading-tight">
<h1 className="text-3xl md:text-4xl font-bold text-foreground mb-6 leading-tight">
{article.文章标题}
</h1>
<div className="flex flex-wrap items-center justify-between gap-4 border-b border-gray-100 pb-8">
<div className="flex items-center gap-6 text-sm text-gray-500">
<div className="flex flex-wrap items-center justify-between gap-4 border-b border-border pb-8">
<div className="flex items-center gap-6 text-sm text-muted-foreground">
<div className="flex items-center gap-2">
<UserIcon className="w-4 h-4" />
<span>{article.作者ID?.用户名 || '匿名'}</span>
@@ -229,7 +228,7 @@ export default function ArticleDetail() {
</div>
</div>
<Button variant="ghost" size="sm" onClick={handleShare} className="text-gray-500 hover:text-primary">
<Button variant="ghost" size="sm" onClick={handleShare} className="text-muted-foreground hover:text-primary">
<Share2 className="w-4 h-4 mr-2" />
分享
</Button>
@@ -238,7 +237,7 @@ export default function ArticleDetail() {
{/* Cover Image */}
{article.封面图 && (
<div className="mb-10 rounded-xl overflow-hidden shadow-lg relative aspect-video bg-gray-100">
<div className="mb-10 rounded-xl overflow-hidden shadow-lg relative aspect-video bg-muted">
<Image
src={article.封面图}
alt={article.文章标题}
@@ -251,7 +250,7 @@ export default function ArticleDetail() {
)}
{/* Article Content */}
<article className="prose prose-lg max-w-none mb-12 prose-headings:text-gray-900 prose-p:text-gray-700 prose-a:text-primary hover:prose-a:text-primary/80 prose-img:rounded-xl dark:prose-invert">
<article className="prose prose-lg max-w-none mb-12 prose-headings:text-foreground prose-p:text-foreground prose-a:text-primary hover:prose-a:text-primary/80 prose-img:rounded-xl dark:prose-invert">
<div dangerouslySetInnerHTML={{ __html: article.正文内容 }} />
</article>
@@ -259,45 +258,45 @@ export default function ArticleDetail() {
<CommentSection articleId={article._id} isLoggedIn={!!user} />
</div>
{/* Sidebar - Right Column (25%) */}
<div className="lg:col-span-1 space-y-6">
{/* Sidebar - Right Column (30%) */}
<div className="lg:col-span-3 space-y-6">
{/* Resource Card */}
<Card className="border-primary/20 shadow-md overflow-hidden">
<div className="bg-linear-to-r from-primary/10 to-primary/5 p-4 border-b border-primary/10">
<h3 className="font-bold text-lg flex items-center gap-2 text-gray-900">
<h3 className="font-bold text-lg flex items-center gap-2 text-foreground">
<Download className="w-5 h-5 text-primary" />
资源下载
</h3>
</div>
<CardContent className="p-6 space-y-6">
<div className="flex items-baseline justify-between">
<span className="text-sm text-gray-500">资源价格</span>
<span className="text-sm text-muted-foreground">资源价格</span>
<div className="flex items-baseline gap-1">
<span className="text-2xl font-bold text-primary">
{article.价格 > 0 ? `¥${article.价格}` : '免费'}
</span>
{article.价格 > 0 && <span className="text-xs text-gray-400">/ 永久</span>}
{article.价格 > 0 && <span className="text-xs text-muted-foreground">/ 永久</span>}
</div>
</div>
{/* Resource Attributes (Version, Size, etc.) */}
{article.资源属性 && (
<div className="grid grid-cols-2 gap-2 text-xs text-gray-600 bg-gray-50 p-3 rounded-lg border border-gray-100">
<div className="grid grid-cols-2 gap-2 text-xs text-muted-foreground bg-muted/50 p-3 rounded-lg border border-border">
{article.资源属性.版本号 && (
<div className="flex items-center gap-1.5">
<Box className="w-3.5 h-3.5 text-gray-400" />
<Box className="w-3.5 h-3.5 text-muted-foreground" />
<span>版本: {article.资源属性.版本号}</span>
</div>
)}
{article.资源属性.文件大小 && (
<div className="flex items-center gap-1.5">
<HardDrive className="w-3.5 h-3.5 text-gray-400" />
<HardDrive className="w-3.5 h-3.5 text-muted-foreground" />
<span>大小: {article.资源属性.文件大小}</span>
</div>
)}
{article.资源属性.扩展属性?.map((attr, idx) => (
<div key={idx} className="flex items-center gap-1.5 col-span-2">
<TagIcon className="w-3.5 h-3.5 text-gray-400" />
<TagIcon className="w-3.5 h-3.5 text-muted-foreground" />
<span>{attr.属性名}: {attr.属性值}</span>
</div>
))}
@@ -321,8 +320,8 @@ export default function ArticleDetail() {
</Button>
{article.资源属性.提取码 && (
<div className="flex items-center justify-between bg-gray-50 p-2 rounded text-sm border border-gray-100">
<span className="text-gray-500 pl-1">提取码: {article.资源属性.提取码}</span>
<div className="flex items-center justify-between bg-muted/50 p-2 rounded text-sm border border-border">
<span className="text-muted-foreground pl-1">提取码: {article.资源属性.提取码}</span>
<Button
variant="ghost"
size="icon"
@@ -335,8 +334,8 @@ export default function ArticleDetail() {
)}
{article.资源属性.解压密码 && (
<div className="flex items-center justify-between bg-gray-50 p-2 rounded text-sm border border-gray-100">
<span className="text-gray-500 pl-1">解压密码: {article.资源属性.解压密码}</span>
<div className="flex items-center justify-between bg-muted/50 p-2 rounded text-sm border border-border">
<span className="text-muted-foreground pl-1">解压密码: {article.资源属性.解压密码}</span>
<Button
variant="ghost"
size="icon"
@@ -383,7 +382,7 @@ export default function ArticleDetail() {
</div>
) : (
<div className="text-center">
<Link href="/membership" className="text-xs text-gray-500 hover:text-primary flex items-center justify-center gap-1">
<Link href="/membership" className="text-xs text-muted-foreground hover:text-primary flex items-center justify-center gap-1">
<Crown className="w-3 h-3 text-yellow-500" />
开通会员享受折扣
</Link>
@@ -392,13 +391,13 @@ export default function ArticleDetail() {
</div>
)}
<div className="pt-4 border-t border-gray-100 grid grid-cols-2 gap-4 text-center text-sm text-gray-500">
<div className="pt-4 border-t border-border grid grid-cols-2 gap-4 text-center text-sm text-muted-foreground">
<div>
<div className="text-gray-900 font-medium">{article.统计数据?.阅读数 || 0}</div>
<div className="text-foreground font-medium">{article.统计数据?.阅读数 || 0}</div>
<div className="text-xs mt-1">浏览次数</div>
</div>
<div>
<div className="text-gray-900 font-medium">{article.统计数据?.销量 || 0}</div>
<div className="text-foreground font-medium">{article.统计数据?.销量 || 0}</div>
<div className="text-xs mt-1">最近售出</div>
</div>
</div>
@@ -416,13 +415,13 @@ export default function ArticleDetail() {
<CardContent className="px-0 pb-2">
<div className="flex flex-col">
{recentArticles.length > 0 ? (
recentArticles.map((item, index) => (
recentArticles.map((item, _index) => (
<Link
key={item._id}
href={`/article/${item._id}`}
className="group flex items-start gap-3 px-6 py-3 hover:bg-gray-50 transition-colors border-b border-gray-50 last:border-0"
className="group flex items-start gap-3 px-6 py-3 hover:bg-accent transition-colors border-b border-border/50 last:border-0"
>
<div className="relative w-16 h-12 shrink-0 rounded overflow-hidden bg-gray-100">
<div className="relative w-16 h-12 shrink-0 rounded overflow-hidden bg-muted">
{item.封面图 ? (
<Image
src={item.封面图}
@@ -432,23 +431,23 @@ export default function ArticleDetail() {
sizes="64px"
/>
) : (
<div className="w-full h-full flex items-center justify-center text-gray-300">
<div className="w-full h-full flex items-center justify-center text-muted-foreground">
<FileText className="w-6 h-6" />
</div>
)}
</div>
<div className="flex-1 min-w-0">
<h4 className="text-sm font-medium text-gray-900 line-clamp-2 group-hover:text-primary transition-colors">
<h4 className="text-sm font-medium text-foreground line-clamp-2 group-hover:text-primary transition-colors">
{item.文章标题}
</h4>
<div className="flex items-center gap-2 mt-1 text-xs text-gray-400">
<div className="flex items-center gap-2 mt-1 text-xs text-muted-foreground">
<span>{format(new Date(item.createdAt), 'MM-dd')}</span>
</div>
</div>
</Link>
))
) : (
<div className="px-6 py-4 text-sm text-gray-500 text-center">
<div className="px-6 py-4 text-sm text-muted-foreground text-center">
暂无推荐
</div>
)}