first commit
This commit is contained in:
“dongming”
94
src/pages/Categories.tsx
Normal file
94
src/pages/Categories.tsx
Normal file
@@ -0,0 +1,94 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { Header } from '../components/Header'
|
||||
import { Footer } from '../components/Footer'
|
||||
import { Categories } from '../clientsdk/sdk.gen'
|
||||
import { createClient } from '../clientsdk/client'
|
||||
import { customQuerySerializer } from '../clientsdk/querySerializer'
|
||||
import { TENANT_SLUG, TENANT_API_KEY, API_URL } from '../config'
|
||||
|
||||
const client = createClient({
|
||||
baseUrl: API_URL,
|
||||
querySerializer: customQuerySerializer,
|
||||
headers: {
|
||||
'X-Tenant-Slug': TENANT_SLUG,
|
||||
'X-API-Key': TENANT_API_KEY,
|
||||
},
|
||||
})
|
||||
|
||||
export const CategoriesPage: React.FC = () => {
|
||||
const [categories, setCategories] = useState<any[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const fetchCategories = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
|
||||
const response = await Categories.listCategories({
|
||||
client,
|
||||
query: {
|
||||
limit: 100,
|
||||
},
|
||||
})
|
||||
|
||||
setCategories((response as any)?.data?.docs || [])
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : '加载失败')
|
||||
console.error('获取分类失败:', err)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
fetchCategories()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<Header />
|
||||
|
||||
<main className="container mx-auto px-4 py-8">
|
||||
<section className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-2">📂 文章分类</h2>
|
||||
<p className="text-gray-600">浏览所有分类</p>
|
||||
</section>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6">
|
||||
<strong>错误：</strong> {error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{loading
|
||||
? Array.from({ length: 6 }).map((_, i) => (
|
||||
<div key={i} className="bg-white p-6 rounded-lg shadow-sm animate-pulse">
|
||||
<div className="h-6 bg-gray-200 rounded w-3/4 mb-2"></div>
|
||||
<div className="h-4 bg-gray-200 rounded w-1/2"></div>
|
||||
</div>
|
||||
))
|
||||
: categories.map((category) => (
|
||||
<a
|
||||
key={category.id}
|
||||
href={`/categories/${category.slug}`}
|
||||
className="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow"
|
||||
>
|
||||
<h3 className="text-xl font-semibold text-gray-900 mb-2">{category.title}</h3>
|
||||
<p className="text-sm text-gray-600">查看该分类下的所有文章</p>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{!loading && categories.length === 0 && !error && (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-gray-500 text-lg">暂无分类</p>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
148
src/pages/CategoryDetail.tsx
Normal file
148
src/pages/CategoryDetail.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { useParams } from 'react-router-dom'
|
||||
import { Header } from '../components/Header'
|
||||
import { Footer } from '../components/Footer'
|
||||
import { PostCard } from '../components/PostCard'
|
||||
import { PostCardSkeleton } from '../components/PostCardSkeleton'
|
||||
import { Posts, Categories } from '../clientsdk/sdk.gen'
|
||||
import { createClient } from '../clientsdk/client'
|
||||
import { customQuerySerializer } from '../clientsdk/querySerializer'
|
||||
import { TENANT_SLUG, TENANT_API_KEY, API_URL } from '../config'
|
||||
|
||||
const client = createClient({
|
||||
baseUrl: API_URL,
|
||||
querySerializer: customQuerySerializer,
|
||||
headers: {
|
||||
'X-Tenant-Slug': TENANT_SLUG,
|
||||
'X-API-Key': TENANT_API_KEY,
|
||||
},
|
||||
})
|
||||
|
||||
export const CategoryDetail: React.FC = () => {
|
||||
const { slug } = useParams<{ slug: string }>()
|
||||
const [posts, setPosts] = useState<any[]>([])
|
||||
const [category, setCategory] = useState<any>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!slug) return
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
|
||||
const [categoriesRes, postsRes] = await Promise.all([
|
||||
// Use listCategories with where filter since findCategoryById doesn't support slug lookup
|
||||
Categories.listCategories({
|
||||
client,
|
||||
query: {
|
||||
where: {
|
||||
slug: {
|
||||
equals: slug,
|
||||
},
|
||||
},
|
||||
limit: 1,
|
||||
},
|
||||
}),
|
||||
Posts.listPosts({
|
||||
client,
|
||||
query: {
|
||||
limit: 100,
|
||||
sort: '-createdAt',
|
||||
},
|
||||
}),
|
||||
])
|
||||
|
||||
const categoryDocs = (categoriesRes as any)?.data?.docs || []
|
||||
if (categoryDocs[0]) {
|
||||
setCategory(categoryDocs[0])
|
||||
}
|
||||
|
||||
const allDocs = (postsRes as any)?.data?.docs || []
|
||||
// categories is an array, check if any category in the array matches the slug
|
||||
const categoryPosts = allDocs.filter((post: any) =>
|
||||
post.categories?.some((cat: any) => cat.slug === slug)
|
||||
)
|
||||
|
||||
setPosts(categoryPosts)
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : '加载失败')
|
||||
console.error('获取数据失败:', err)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
fetchData()
|
||||
}, [slug])
|
||||
|
||||
const stripHtml = (html: string): string => {
|
||||
const tmp = document.createElement('div')
|
||||
tmp.innerHTML = html
|
||||
return tmp.textContent || tmp.innerText || ''
|
||||
}
|
||||
|
||||
const formatDate = (dateString: string): string => {
|
||||
const date = new Date(dateString)
|
||||
return date.toLocaleDateString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
})
|
||||
}
|
||||
|
||||
const getCategoryTitle = (post: any): string | undefined => {
|
||||
// categories is an array, get the first one
|
||||
return post.categories?.[0]?.title
|
||||
}
|
||||
|
||||
const handlePostClick = (postSlug: string) => {
|
||||
window.location.href = `/posts/${postSlug}`
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<Header />
|
||||
|
||||
<main className="container mx-auto px-4 py-8">
|
||||
<section className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-2">
|
||||
📂 {category?.title || '分类'}
|
||||
</h2>
|
||||
<p className="text-gray-600">探索该分类下的所有内容</p>
|
||||
</section>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6">
|
||||
<strong>错误：</strong> {error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{loading
|
||||
? Array.from({ length: 6 }).map((_, i) => <PostCardSkeleton key={i} />)
|
||||
: posts.map((post) => (
|
||||
<PostCard
|
||||
key={post.id}
|
||||
title={post.title}
|
||||
excerpt={stripHtml(post.content_html || post.content?.root?.children?.[0]?.children?.[0]?.text || post.title)}
|
||||
category={getCategoryTitle(post)}
|
||||
date={formatDate(post.createdAt)}
|
||||
onClick={() => handlePostClick(post.slug)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{!loading && posts.length === 0 && !error && (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-gray-500 text-lg">该分类下暂无文章</p>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
116
src/pages/Home.tsx
Normal file
116
src/pages/Home.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { Header } from '../components/Header'
|
||||
import { Footer } from '../components/Footer'
|
||||
import { PostCard } from '../components/PostCard'
|
||||
import { PostCardSkeleton } from '../components/PostCardSkeleton'
|
||||
import { Posts } from '../clientsdk/sdk.gen'
|
||||
import { createClient } from '../clientsdk/client'
|
||||
import { customQuerySerializer } from '../clientsdk/querySerializer'
|
||||
import { TENANT_SLUG, TENANT_API_KEY, API_URL } from '../config'
|
||||
|
||||
const client = createClient({
|
||||
baseUrl: API_URL,
|
||||
querySerializer: customQuerySerializer,
|
||||
headers: {
|
||||
'X-Tenant-Slug': TENANT_SLUG,
|
||||
'X-API-Key': TENANT_API_KEY,
|
||||
},
|
||||
})
|
||||
|
||||
export const Home: React.FC = () => {
|
||||
const [posts, setPosts] = useState<any[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const fetchPosts = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
|
||||
const response = await Posts.listPosts({
|
||||
client,
|
||||
query: {
|
||||
limit: 10,
|
||||
sort: '-createdAt',
|
||||
},
|
||||
})
|
||||
|
||||
setPosts((response as any)?.data?.docs || [])
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : '加载失败')
|
||||
console.error('获取文章失败:', err)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
fetchPosts()
|
||||
}, [])
|
||||
|
||||
const stripHtml = (html: string): string => {
|
||||
const tmp = document.createElement('div')
|
||||
tmp.innerHTML = html
|
||||
return tmp.textContent || tmp.innerText || ''
|
||||
}
|
||||
|
||||
const formatDate = (dateString: string): string => {
|
||||
const date = new Date(dateString)
|
||||
return date.toLocaleDateString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
})
|
||||
}
|
||||
|
||||
const getCategoryTitle = (post: any): string | undefined => {
|
||||
// categories is an array, get the first one
|
||||
return post.categories?.[0]?.title
|
||||
}
|
||||
|
||||
const handlePostClick = (slug: string) => {
|
||||
window.location.href = `/posts/${slug}`
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<Header />
|
||||
|
||||
<main className="container mx-auto px-4 py-8">
|
||||
<section className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-2">📚 最新文章</h2>
|
||||
<p className="text-gray-600">探索我们的最新内容</p>
|
||||
</section>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6">
|
||||
<strong>错误：</strong> {error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{loading
|
||||
? Array.from({ length: 6 }).map((_, i) => <PostCardSkeleton key={i} />)
|
||||
: posts.map((post) => (
|
||||
<PostCard
|
||||
key={post.id}
|
||||
title={post.title}
|
||||
excerpt={stripHtml(post.content_html || post.content?.root?.children?.[0]?.children?.[0]?.text || post.title)}
|
||||
category={getCategoryTitle(post)}
|
||||
date={formatDate(post.createdAt)}
|
||||
onClick={() => handlePostClick(post.slug)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{!loading && posts.length === 0 && !error && (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-gray-500 text-lg">暂无文章</p>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
158
src/pages/PostDetail.tsx
Normal file
158
src/pages/PostDetail.tsx
Normal file
@@ -0,0 +1,158 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { useParams } from 'react-router-dom'
|
||||
import { Header } from '../components/Header'
|
||||
import { Footer } from '../components/Footer'
|
||||
import { Posts } from '../clientsdk/sdk.gen'
|
||||
import { createClient } from '../clientsdk/client'
|
||||
import { customQuerySerializer } from '../clientsdk/querySerializer'
|
||||
import { TENANT_SLUG, TENANT_API_KEY, API_URL } from '../config'
|
||||
|
||||
const client = createClient({
|
||||
baseUrl: API_URL,
|
||||
querySerializer: customQuerySerializer,
|
||||
headers: {
|
||||
'X-Tenant-Slug': TENANT_SLUG,
|
||||
'X-API-Key': TENANT_API_KEY,
|
||||
},
|
||||
})
|
||||
|
||||
export const PostDetail: React.FC = () => {
|
||||
const { slug } = useParams<{ slug: string }>()
|
||||
const [post, setPost] = useState<any>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!slug) return
|
||||
|
||||
const fetchPost = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
|
||||
// Use listPosts with where filter since findPostById doesn't support slug lookup
|
||||
const response = await Posts.listPosts({
|
||||
client,
|
||||
query: {
|
||||
where: {
|
||||
slug: {
|
||||
equals: slug,
|
||||
},
|
||||
},
|
||||
limit: 1,
|
||||
},
|
||||
})
|
||||
|
||||
const docs = (response as any)?.data?.docs || []
|
||||
setPost(docs[0] || null)
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : '加载失败')
|
||||
console.error('获取文章失败:', err)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
fetchPost()
|
||||
}, [slug])
|
||||
|
||||
const getCategoryTitle = (p: any): string | undefined => {
|
||||
// categories is an array, get the first one
|
||||
return p?.categories?.[0]?.title
|
||||
}
|
||||
|
||||
const formatDate = (dateString: string): string => {
|
||||
const date = new Date(dateString)
|
||||
return date.toLocaleDateString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
})
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<Header />
|
||||
<main className="container mx-auto px-4 py-8">
|
||||
<div className="animate-pulse">
|
||||
<div className="h-8 bg-gray-200 rounded w-1/2 mb-4"></div>
|
||||
<div className="h-4 bg-gray-200 rounded w-1/4 mb-6"></div>
|
||||
<div className="space-y-3">
|
||||
<div className="h-4 bg-gray-200 rounded"></div>
|
||||
<div className="h-4 bg-gray-200 rounded"></div>
|
||||
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (error || !post) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<Header />
|
||||
<main className="container mx-auto px-4 py-8">
|
||||
<div className="text-center py-12">
|
||||
<p className="text-red-600 text-lg">{error || '文章不存在'}</p>
|
||||
<button
|
||||
onClick={() => window.location.href = '/'}
|
||||
className="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
|
||||
>
|
||||
返回首页
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<Header />
|
||||
|
||||
<main className="container mx-auto px-4 py-8 max-w-4xl">
|
||||
<article>
|
||||
<header className="mb-8">
|
||||
{getCategoryTitle(post) && (
|
||||
<span className="inline-block px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm mb-4">
|
||||
{getCategoryTitle(post)}
|
||||
</span>
|
||||
)}
|
||||
<h1 className="text-4xl font-bold text-gray-900 mb-4">{post.title}</h1>
|
||||
<div className="flex items-center text-gray-600 text-sm">
|
||||
<span>{formatDate(post.createdAt)}</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{post.heroImage && (
|
||||
<img
|
||||
src={post.heroImage.url}
|
||||
alt={post.heroImage.alt || post.title}
|
||||
className="w-full h-auto rounded-lg mb-8"
|
||||
/>
|
||||
)}
|
||||
|
||||
<div
|
||||
className="prose prose-lg max-w-none"
|
||||
dangerouslySetInnerHTML={{ __html: post.content_html || '' }}
|
||||
/>
|
||||
|
||||
<div className="mt-12 pt-8 border-t border-gray-200">
|
||||
<button
|
||||
onClick={() => window.location.href = '/'}
|
||||
className="px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300"
|
||||
>
|
||||
返回首页
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user