2025.11.27.17.50
This commit is contained in:
282
src/pages/article/[id].tsx
Normal file
282
src/pages/article/[id].tsx
Normal file
@@ -0,0 +1,282 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/router';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import MainLayout from '@/components/layouts/MainLayout';
|
||||
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 { Loader2, Lock, Download, Calendar, User as UserIcon, Tag as TagIcon } from 'lucide-react';
|
||||
import { format } from 'date-fns';
|
||||
import { zhCN } from 'date-fns/locale';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
interface Article {
|
||||
_id: string;
|
||||
文章标题: string;
|
||||
封面图: string;
|
||||
摘要: string;
|
||||
正文内容: string;
|
||||
作者ID: {
|
||||
用户名: string;
|
||||
头像: string;
|
||||
};
|
||||
分类ID: {
|
||||
分类名称: string;
|
||||
};
|
||||
标签ID列表: {
|
||||
标签名称: string;
|
||||
}[];
|
||||
价格: number;
|
||||
支付方式: 'points' | 'cash';
|
||||
资源属性?: {
|
||||
下载链接: string;
|
||||
提取码: string;
|
||||
解压密码: string;
|
||||
隐藏内容: string;
|
||||
};
|
||||
createdAt: string;
|
||||
统计数据: {
|
||||
阅读数: number;
|
||||
};
|
||||
}
|
||||
|
||||
export default function ArticleDetail() {
|
||||
const router = useRouter();
|
||||
const { id } = router.query;
|
||||
const { user, loading: authLoading } = useAuth();
|
||||
const [article, setArticle] = useState<Article | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [hasAccess, setHasAccess] = useState(false);
|
||||
const [purchasing, setPurchasing] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
fetchArticle();
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
const fetchArticle = async () => {
|
||||
try {
|
||||
const res = await fetch(`/api/articles/${id}`);
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setArticle(data.article);
|
||||
setHasAccess(data.hasAccess);
|
||||
} else {
|
||||
toast.error('文章不存在或已被删除');
|
||||
router.push('/');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch article', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePurchase = async () => {
|
||||
if (!user) {
|
||||
router.push(`/auth/login?redirect=${encodeURIComponent(router.asPath)}`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!article) return;
|
||||
|
||||
// If price is 0, it should be accessible, but just in case
|
||||
if (article.价格 === 0) return;
|
||||
|
||||
setPurchasing(true);
|
||||
try {
|
||||
const res = await fetch('/api/orders/create', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
type: 'buy_resource',
|
||||
itemId: article._id,
|
||||
paymentMethod: 'alipay', // Default to alipay for now
|
||||
returnUrl: window.location.href // Pass current page URL for redirect after payment
|
||||
}),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
// Redirect to Alipay
|
||||
window.location.href = data.payUrl;
|
||||
} else {
|
||||
const data = await res.json();
|
||||
toast.error(data.message || '创建订单失败');
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error('网络错误，请稍后重试');
|
||||
} finally {
|
||||
setPurchasing(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<MainLayout>
|
||||
<div className="container mx-auto px-4 py-8 max-w-4xl">
|
||||
<div className="space-y-4 mb-8">
|
||||
<Skeleton className="h-12 w-3/4" />
|
||||
<div className="flex gap-4">
|
||||
<Skeleton className="h-4 w-24" />
|
||||
<Skeleton className="h-4 w-24" />
|
||||
</div>
|
||||
</div>
|
||||
<Skeleton className="h-[400px] w-full rounded-xl mb-8" />
|
||||
<div className="space-y-4">
|
||||
<Skeleton className="h-4 w-full" />
|
||||
<Skeleton className="h-4 w-full" />
|
||||
<Skeleton className="h-4 w-5/6" />
|
||||
</div>
|
||||
</div>
|
||||
</MainLayout>
|
||||
);
|
||||
}
|
||||
|
||||
if (!article) return null;
|
||||
|
||||
return (
|
||||
<MainLayout
|
||||
seo={{
|
||||
title: article.文章标题,
|
||||
description: article.摘要 || article.正文内容.substring(0, 100),
|
||||
keywords: article.标签ID列表?.map(t => t.标签名称).join(',')
|
||||
}}
|
||||
>
|
||||
<div className="max-w-4xl mx-auto px-4 py-8">
|
||||
{/* Article Header */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Badge variant="secondary" className="text-primary bg-primary/10 hover:bg-primary/20">
|
||||
{article.分类ID?.分类名称 || '未分类'}
|
||||
</Badge>
|
||||
{article.标签ID列表?.map((tag, index) => (
|
||||
<Badge key={index} variant="outline" className="text-gray-500">
|
||||
{tag.标签名称}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6 leading-tight">
|
||||
{article.文章标题}
|
||||
</h1>
|
||||
|
||||
<div className="flex items-center gap-6 text-sm text-gray-500 border-b border-gray-100 pb-8">
|
||||
<div className="flex items-center gap-2">
|
||||
<UserIcon className="w-4 h-4" />
|
||||
<span>{article.作者ID?.用户名 || '匿名'}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar className="w-4 h-4" />
|
||||
<span>{format(new Date(article.createdAt), 'yyyy-MM-dd', { locale: zhCN })}</span>
|
||||
</div>
|
||||
<div>
|
||||
阅读 {article.统计数据?.阅读数 || 0}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cover Image */}
|
||||
{article.封面图 && (
|
||||
<div className="mb-10 rounded-xl overflow-hidden shadow-lg">
|
||||
<img
|
||||
src={article.封面图}
|
||||
alt={article.文章标题}
|
||||
className="w-full h-auto object-cover max-h-[500px]"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 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">
|
||||
<div dangerouslySetInnerHTML={{ __html: article.正文内容 }} />
|
||||
</article>
|
||||
|
||||
{/* Resource Download / Paywall Section */}
|
||||
<div className="bg-gray-50 rounded-xl p-8 mb-12 border border-gray-100">
|
||||
{hasAccess ? (
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-xl font-bold flex items-center gap-2 text-green-700">
|
||||
<Download className="w-6 h-6" />
|
||||
资源下载
|
||||
</h3>
|
||||
{article.资源属性 ? (
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="bg-white p-4 rounded-lg border border-gray-200">
|
||||
<span className="text-gray-500 text-sm block mb-1">下载链接</span>
|
||||
<a
|
||||
href={article.资源属性.下载链接}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary font-medium hover:underline break-all"
|
||||
>
|
||||
{article.资源属性.下载链接}
|
||||
</a>
|
||||
</div>
|
||||
{article.资源属性.提取码 && (
|
||||
<div className="bg-white p-4 rounded-lg border border-gray-200">
|
||||
<span className="text-gray-500 text-sm block mb-1">提取码</span>
|
||||
<code className="bg-gray-100 px-2 py-1 rounded text-gray-900 font-mono">
|
||||
{article.资源属性.提取码}
|
||||
</code>
|
||||
</div>
|
||||
)}
|
||||
{article.资源属性.解压密码 && (
|
||||
<div className="bg-white p-4 rounded-lg border border-gray-200">
|
||||
<span className="text-gray-500 text-sm block mb-1">解压密码</span>
|
||||
<code className="bg-gray-100 px-2 py-1 rounded text-gray-900 font-mono">
|
||||
{article.资源属性.解压密码}
|
||||
</code>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-gray-500">此资源暂无下载信息</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8">
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||
<Lock className="w-8 h-8 text-primary" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-2">
|
||||
此内容需要付费查看
|
||||
</h3>
|
||||
<p className="text-gray-600 mb-8 max-w-md mx-auto">
|
||||
购买此资源或开通会员，即可解锁全文及下载链接，享受更多优质内容。
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button
|
||||
size="lg"
|
||||
className="px-8"
|
||||
onClick={handlePurchase}
|
||||
disabled={purchasing}
|
||||
>
|
||||
{purchasing ? (
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
) : (
|
||||
<span className="mr-2">¥{article.价格}</span>
|
||||
)}
|
||||
立即购买
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
onClick={() => router.push('/membership')}
|
||||
>
|
||||
开通会员 (免费下载)
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Comments Section */}
|
||||
<CommentSection articleId={article._id} isLoggedIn={!!user} />
|
||||
</div>
|
||||
</MainLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user