Next.js 项目搭建：三分钟快速搭建个人博客系统

import { NextRequest, NextResponse } from 'next/server'
import fs from 'fs'
import path from 'path'

// 数据文件路径
const dataFilePath = path.join(process.cwd(), 'data', 'posts.json')

// 文章接口定义
interface Post {
  id: string
  title: string
  content: string
  summary: string
  author: string
  createdAt: string
}

interface PostsData {
  posts: Post[]
  nextId: number
}

// 读取文章数据
function readPostsFromFile(): PostsData {
  try {
    if (!fs.existsSync(dataFilePath)) {
      const initialData: PostsData = { posts: [], nextId: 1 }
      writePostsToFile(initialData)
      return initialData
    }
    
    const fileContent = fs.readFileSync(dataFilePath, 'utf8')
    return JSON.parse(fileContent)
  } catch (error) {
    console.error('读取文章文件失败:', error)
    return { posts: [], nextId: 1 }
  }
}

// 写入文章数据
function writePostsToFile(data: PostsData): boolean {
  try {
    const dataDir = path.dirname(dataFilePath)
    if (!fs.existsSync(dataDir)) {
      fs.mkdirSync(dataDir, { recursive: true })
    }
    
    fs.writeFileSync(dataFilePath, JSON.stringify(data, null, 2))
    return true
  } catch (error) {
    console.error('写入文章文件失败:', error)
    return false
  }
}

// 获取所有文章 - GET请求
export async function GET() {
  try {
    const postsData = readPostsFromFile()
    
    // 按创建时间倒序排列（最新的在前面）
    const sortedPosts = postsData.posts.sort((a, b) => 
      new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
    )
    
    return NextResponse.json({
      posts: sortedPosts,
      total: sortedPosts.length
    })
  } catch (error) {
    console.error('获取文章列表失败:', error)
    return NextResponse.json(
      { error: '获取文章列表失败' },
      { status: 500 }
    )
  }
}

// 创建新文章 - POST请求
export async function POST(request: NextRequest) {
  try {
    const { title, content, summary, author } = await request.json()
    
    // 验证必填字段
    if (!title || !content || !author) {
      return NextResponse.json(
        { error: '标题、内容和作者不能为空' },
        { status: 400 }
      )
    }
    
    // 验证字段长度
    if (title.length > 100) {
      return NextResponse.json(
        { error: '标题不能超过100个字符' },
        { status: 400 }
      )
    }
    
    if (content.length > 10000) {
      return NextResponse.json(
        { error: '内容不能超过10000个字符' },
        { status: 400 }
      )
    }
    
    // 读取现有数据
    const postsData = readPostsFromFile()
    
    // 创建新文章
    const newPost: Post = {
      id: postsData.nextId.toString(),
      title: title.trim(),
      content: content.trim(),
      summary: summary ? summary.trim() : content.trim().substring(0, 150) + '...',
      author: author.trim(),
      createdAt: new Date().toISOString()
    }
    
    // 添加到文章列表
    postsData.posts.push(newPost)
    postsData.nextId += 1
    
    // 保存到文件
    const success = writePostsToFile(postsData)
    
    if (success) {
      return NextResponse.json({
        message: '文章创建成功！',
        post: newPost
      }, { status: 201 })
    } else {
      return NextResponse.json(
        { error: '保存文章失败，请重试' },
        { status: 500 }
      )
    }
    
  } catch (error) {
    console.error('创建文章API错误:', error)
    return NextResponse.json(
      { error: '服务器错误，请重试' },
      { status: 500 }
    )
  }
}

import { NextRequest, NextResponse } from 'next/server'
import fs from 'fs'
import path from 'path'

// 数据文件路径
const dataFilePath = path.join(process.cwd(), 'data', 'posts.json')

// 文章接口定义
interface Post {
  id: string
  title: string
  content: string
  summary: string
  author: string
  createdAt: string
}

interface PostsData {
  posts: Post[]
  nextId: number
}

// 读取文章数据
function readPostsFromFile(): PostsData {
  try {
    if (!fs.existsSync(dataFilePath)) {
      return { posts: [], nextId: 1 }
    }
    
    const fileContent = fs.readFileSync(dataFilePath, 'utf8')
    return JSON.parse(fileContent)
  } catch (error) {
    console.error('读取文章文件失败:', error)
    return { posts: [], nextId: 1 }
  }
}

// 写入文章数据
function writePostsToFile(data: PostsData): boolean {
  try {
    const dataDir = path.dirname(dataFilePath)
    if (!fs.existsSync(dataDir)) {
      fs.mkdirSync(dataDir, { recursive: true })
    }
    
    fs.writeFileSync(dataFilePath, JSON.stringify(data, null, 2))
    return true
  } catch (error) {
    console.error('写入文章文件失败:', error)
    return false
  }
}

// 获取单篇文章 - GET请求
export async function GET(
  request: NextRequest,
  { params }: { params: { id: string } }
) {
  try {
    const postId = params.id
    const postsData = readPostsFromFile()
    
    // 查找指定ID的文章
    const post = postsData.posts.find(p => p.id === postId)
    
    if (!post) {
      return NextResponse.json(
        { error: '文章不存在' },
        { status: 404 }
      )
    }
    
    return NextResponse.json({ post })
    
  } catch (error) {
    console.error('获取文章详情失败:', error)
    return NextResponse.json(
      { error: '获取文章详情失败' },
      { status: 500 }
    )
  }
}

// 删除文章 - DELETE请求
export async function DELETE(
  request: NextRequest,
  { params }: { params: { id: string } }
) {
  try {
    const postId = params.id
    const postsData = readPostsFromFile()
    
    // 查找文章索引
    const postIndex = postsData.posts.findIndex(p => p.id === postId)
    
    if (postIndex === -1) {
      return NextResponse.json(
        { error: '文章不存在' },
        { status: 404 }
      )
    }
    
    // 获取要删除的文章信息
    const deletedPost = postsData.posts[postIndex]
    
    // 从数组中删除文章
    postsData.posts.splice(postIndex, 1)
    
    // 保存到文件
    const success = writePostsToFile(postsData)
    
    if (success) {
      return NextResponse.json({
        message: '文章删除成功！',
        deletedPost: {
          id: deletedPost.id,
          title: deletedPost.title
        }
      })
    } else {
      return NextResponse.json(
        { error: '删除文章失败，请重试' },
        { status: 500 }
      )
    }
    
  } catch (error) {
    console.error('删除文章API错误:', error)
    return NextResponse.json(
      { error: '服务器错误，请重试' },
      { status: 500 }
    )
  }
}

// 更新文章 - PUT请求（可选功能）
export async function PUT(
  request: NextRequest,
  { params }: { params: { id: string } }
) {
  try {
    const postId = params.id
    const { title, content, summary } = await request.json()
    
    // 验证必填字段
    if (!title || !content) {
      return NextResponse.json(
        { error: '标题和内容不能为空' },
        { status: 400 }
      )
    }
    
    const postsData = readPostsFromFile()
    
    // 查找文章索引
    const postIndex = postsData.posts.findIndex(p => p.id === postId)
    
    if (postIndex === -1) {
      return NextResponse.json(
        { error: '文章不存在' },
        { status: 404 }
      )
    }
    
    // 更新文章
    postsData.posts[postIndex] = {
      ...postsData.posts[postIndex],
      title: title.trim(),
      content: content.trim(),
      summary: summary ? summary.trim() : content.trim().substring(0, 150) + '...'
    }
    
    // 保存到文件
    const success = writePostsToFile(postsData)
    
    if (success) {
      return NextResponse.json({
        message: '文章更新成功！',
        post: postsData.posts[postIndex]
      })
    } else {
      return NextResponse.json(
        { error: '更新文章失败，请重试' },
        { status: 500 }
      )
    }
    
  } catch (error) {
    console.error('更新文章API错误:', error)
    return NextResponse.json(
      { error: '服务器错误，请重试' },
      { status: 500 }
    )
  }
}

'use client'
import { useState } from 'react'
import { useRouter } from 'next/navigation'

export default function WritePage() {
  const router = useRouter()
  const [formData, setFormData] = useState({
    title: '',
    content: '',
    summary: '',
    author: '博主'
  })
  const [loading, setLoading] = useState(false)
  const [message, setMessage] = useState('')
  const [messageType, setMessageType] = useState<'success' | 'error'>('success')

  // 处理输入框变化
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData(prev => ({
      ...prev,
      [name]: value
    }))
  }

  // 提交表单
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    setMessage('')

    try {
      const response = await fetch('/api/posts', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData)
      })

      const data = await response.json()

      if (response.ok) {
        setMessage(`✅ ${data.message}`)
        setMessageType('success')
        
        // 清空表单
        setFormData({
          title: '',
          content: '',
          summary: '',
          author: '博主'
        })
        
        // 3秒后跳转到文章详情页
        setTimeout(() => {
          router.push(`/blog/${data.post.id}`)
        }, 2000)
      } else {
        setMessage(`❌ ${data.error}`)
        setMessageType('error')
      }
    } catch (error) {
      setMessage('❌ 网络错误，请重试')
      setMessageType('error')
    } finally {
      setLoading(false)
    }
  }

  // 字符计数
  const titleCount = formData.title.length
  const contentCount = formData.content.length
  const summaryCount = formData.summary.length

  return (
    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
      <div className="card">
        <h1 style={{ 
          fontSize: '2rem', 
          marginBottom: '0.5rem',
          color: '#1e293b'
        }}>
          ✍️ 写新文章
        </h1>
        <p style={{ 
          color: '#64748b', 
          marginBottom: '2rem' 
        }}>
          分享你的想法和见解
        </p>

        <form onSubmit={handleSubmit}>
          {/* 标题输入 */}
          <div className="form-group">
            <label htmlFor="title">
              文章标题 *
              <span style={{ 
                float: 'right', 
                color: titleCount > 100 ? '#dc2626' : '#64748b',
                fontSize: '0.9rem'
              }}>
                {titleCount}/100
              </span>
            </label>
            <input
              type="text"
              id="title"
              name="title"
              value={formData.title}
              onChange={handleInputChange}
              className="form-input"
              placeholder="请输入文章标题..."
              maxLength={100}
              required
              disabled={loading}
            />
          </div>

          {/* 摘要输入 */}
          <div className="form-group">
            <label htmlFor="summary">
              文章摘要（可选）
              <span style={{ 
                float: 'right', 
                color: summaryCount > 200 ? '#dc2626' : '#64748b',
                fontSize: '0.9rem'
              }}>
                {summaryCount}/200
              </span>
            </label>
            <textarea
              id="summary"
              name="summary"
              value={formData.summary}
              onChange={handleInputChange}
              className="form-input"
              placeholder="简短描述文章内容（如果不填写，将自动从正文提取）..."
              maxLength={200}
              rows={3}
              disabled={loading}
            />
          </div>

          {/* 作者输入 */}
          <div className="form-group">
            <label htmlFor="author">作者 *</label>
            <input
              type="text"
              id="author"
              name="author"
              value={formData.author}
              onChange={handleInputChange}
              className="form-input"
              placeholder="请输入作者名称..."
              maxLength={50}
              required
              disabled={loading}
            />
          </div>

          {/* 正文输入 */}
          <div className="form-group">
            <label htmlFor="content">
              文章正文 *
              <span style={{ 
                float: 'right', 
                color: contentCount > 10000 ? '#dc2626' : '#64748b',
                fontSize: '0.9rem'
              }}>
                {contentCount}/10000
              </span>
            </label>
            <textarea
              id="content"
              name="content"
              value={formData.content}
              onChange={handleInputChange}
              className="form-input form-textarea"
              placeholder="开始写你的文章内容..."
              maxLength={10000}
              required
              disabled={loading}
            />
          </div>

          {/* 提交按钮 */}
          <div style={{ 
            display: 'flex', 
            gap: '1rem', 
            justifyContent: 'flex-end' 
          }}>
            <button
              type="button"
              onClick={() => router.back()}
              className="btn btn-secondary"
              disabled={loading}
            >
              取消
            </button>
            <button
              type="submit"
              className="btn btn-primary"
              disabled={loading || !formData.title.trim() || !formData.content.trim()}
            >
              {loading ? '📝 发布中...' : '📝 发布文章'}
            </button>
          </div>
        </form>

        {/* 消息提示 */}
        {message && (
          <div className={`message message-${messageType}`} style={{ marginTop: '1.5rem' }}>
            {message}
            {messageType === 'success' && (
              <div style={{ fontSize: '0.9rem', marginTop: '0.5rem' }}>
                即将跳转到文章详情页...
              </div>
            )}
          </div>
        )}
      </div>

      {/* 写作提示 */}
      <div className="card" style={{ marginTop: '1.5rem' }}>
        <h3 style={{ fontSize: '1.2rem', marginBottom: '1rem', color: '#4338ca' }}>
          💡 写作小贴士
        </h3>
        <ul style={{ 
          listStyle: 'none', 
          padding: 0,
          color: '#64748b',
          lineHeight: '1.6'
        }}>
          <li style={{ marginBottom: '0.5rem' }}>
            📝 <strong>标题</strong>：简洁明了，能概括文章主要内容
          </li>
          <li style={{ marginBottom: '0.5rem' }}>
            📋 <strong>摘要</strong>：简短介绍，吸引读者继续阅读
          </li>
          <li style={{ marginBottom: '0.5rem' }}>
            📖 <strong>正文</strong>：结构清晰，段落分明，表达准确
          </li>
          <li>
            💾 <strong>保存</strong>：随时可以发布，数据会安全保存到文件中
          </li>
        </ul>
      </div>
    </div>
  )
}

'use client'
import { useState, useEffect } from 'react'
import Link from 'next/link'

interface Post {
  id: string
  title: string
  content: string
  summary: string
  author: string
  createdAt: string
}

export default function BlogListPage() {
  const [posts, setPosts] = useState<Post[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState('')

  // 获取文章列表
  const fetchPosts = async () => {
    try {
      setLoading(true)
      const response = await fetch('/api/posts')
      const data = await response.json()

      if (response.ok) {
        setPosts(data.posts)
        setError('')
      } else {
        setError(data.error || '获取文章列表失败')
      }
    } catch (error) {
      setError('网络错误，请重试')
      console.error('获取文章列表失败:', error)
    } finally {
      setLoading(false)
    }
  }

  // 删除文章
  const handleDeletePost = async (postId: string, postTitle: string) => {
    const confirmed = window.confirm(`确定要删除文章 "${postTitle}" 吗？此操作不可恢复。`)
    
    if (!confirmed) return

    try {
      const response = await fetch(`/api/posts/${postId}`, {
        method: 'DELETE'
      })

      const data = await response.json()

      if (response.ok) {
        // 从列表中移除已删除的文章
        setPosts(prev => prev.filter(post => post.id !== postId))
        alert(`✅ ${data.message}`)
      } else {
        alert(`❌ ${data.error}`)
      }
    } catch (error) {
      alert('❌ 删除失败，请重试')
      console.error('删除文章失败:', error)
    }
  }

  // 格式化日期
  const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    })
  }

  // 页面加载时获取文章
  useEffect(() => {
    fetchPosts()
  }, [])

  if (loading) {
    return (
      <div className="loading">
        <div style={{ fontSize: '1.2rem' }}>📚 加载文章中...</div>
      </div>
    )
  }

  if (error) {
    return (
      <div className="card" style={{ textAlign: 'center' }}>
        <h2 style={{ color: '#dc2626', marginBottom: '1rem' }}>❌ 加载失败</h2>
        <p style={{ marginBottom: '1.5rem', color: '#64748b' }}>{error}</p>
        <button 
          onClick={fetchPosts}
          className="btn btn-primary"
        >
          🔄 重新加载
        </button>
      </div>
    )
  }

  return (
    <div style={{ maxWidth: '900px', margin: '0 auto' }}>
      {/* 页面标题 */}
      <div style={{ 
        display: 'flex', 
        justifyContent: 'space-between', 
        alignItems: 'center',
        marginBottom: '2rem'
      }}>
        <div>
          <h1 style={{ 
            fontSize: '2.5rem', 
            marginBottom: '0.5rem',
            color: '#1e293b'
          }}>
            📚 文章列表
          </h1>
          <p style={{ color: '#64748b' }}>
            共 {posts.length} 篇文章
          </p>
        </div>
        
        <Link href="/write" className="btn btn-primary">
          ✍️ 写新文章
        </Link>
      </div>

      {/* 文章列表 */}
      {posts.length === 0 ? (
        <div className="empty-state">
          <h3>📝 还没有文章</h3>
          <p style={{ marginBottom: '1.5rem' }}>
            开始写你的第一篇文章吧！
          </p>
          <Link href="/write" className="btn btn-primary">
            ✍️ 写第一篇文章
          </Link>
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
          {posts.map((post) => (
            <article key={post.id} className="card">
              {/* 文章标题 */}
              <h2 style={{ 
                fontSize: '1.5rem', 
                marginBottom: '0.5rem',
                color: '#1e293b'
              }}>
                <Link 
                  href={`/blog/${post.id}`}
                  style={{ 
                    textDecoration: 'none', 
                    color: 'inherit',
                    transition: 'color 0.2s'
                  }}
                  onMouseEnter={(e) => e.currentTarget.style.color = '#4338ca'}
                  onMouseLeave={(e) => e.currentTarget.style.color = '#1e293b'}
                >
                  {post.title}
                </Link>
              </h2>

              {/* 文章元信息 */}
              <div style={{ 
                display: 'flex', 
                alignItems: 'center',
                gap: '1rem',
                marginBottom: '1rem',
                fontSize: '0.9rem',
                color: '#64748b'
              }}>
                <span>👤 {post.author}</span>
                <span>📅 {formatDate(post.createdAt)}</span>
                <span>📄 {post.content.length} 字</span>
              </div>

              {/* 文章摘要 */}
              <p style={{ 
                color: '#374151',
                lineHeight: '1.6',
                marginBottom: '1.5rem'
              }}>
                {post.summary}
              </p>

              {/* 操作按钮 */}
              <div style={{ 
                display: 'flex', 
                gap: '1rem',
                justifyContent: 'space-between',
                alignItems: 'center'
              }}>
                <Link 
                  href={`/blog/${post.id}`}
                  className="btn btn-primary"
                  style={{ textDecoration: 'none' }}
                >
                  📖 阅读全文
                </Link>
                
                <button
                  onClick={() => handleDeletePost(post.id, post.title)}
                  className="btn btn-danger"
                  style={{ fontSize: '0.9rem' }}
                >
                  🗑️ 删除
                </button>
              </div>
            </article>
          ))}
        </div>
      )}

      {/* 刷新按钮 */}
      {posts.length > 0 && (
        <div style={{ textAlign: 'center', marginTop: '2rem' }}>
          <button 
            onClick={fetchPosts}
            className="btn btn-secondary"
          >
            🔄 刷新列表
          </button>
        </div>
      )}
    </div>
  )
}

'use client'
import { useState, useEffect } from 'react'
import { useRouter, useParams } from 'next/navigation'
import Link from 'next/link'

interface Post {
  id: string
  title: string
  content: string
  summary: string
  author: string
  createdAt: string
}

export default function BlogDetailPage() {
  const router = useRouter()
  const params = useParams()
  const postId = params.id as string

  const [post, setPost] = useState<Post | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState('')

  // 获取文章详情
  const fetchPost = async () => {
    try {
      setLoading(true)
      const response = await fetch(`/api/posts/${postId}`)
      const data = await response.json()

      if (response.ok) {
        setPost(data.post)
        setError('')
      } else {
        setError(data.error || '获取文章失败')
      }
    } catch (error) {
      setError('网络错误，请重试')
      console.error('获取文章详情失败:', error)
    } finally {
      setLoading(false)
    }
  }

  // 删除文章
  const handleDeletePost = async () => {
    if (!post) return

    const confirmed = window.confirm(`确定要删除文章 "${post.title}" 吗？此操作不可恢复。`)
    
    if (!confirmed) return

    try {
      const response = await fetch(`/api/posts/${postId}`, {
        method: 'DELETE'
      })

      const data = await response.json()

      if (response.ok) {
        alert(`✅ ${data.message}`)
        router.push('/blog') // 删除成功后跳转到文章列表
      } else {
        alert(`❌ ${data.error}`)
      }
    } catch (error) {
      alert('❌ 删除失败，请重试')
      console.error('删除文章失败:', error)
    }
  }

  // 格式化日期
  const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
      weekday: 'long'
    })
  }

  // 格式化文章内容（将换行符转换为段落）
  const formatContent = (content: string) => {
    return content.split('\n').map((paragraph, index) => {
      if (paragraph.trim() === '') return null
      return (
        <p key={index} style={{ marginBottom: '1rem' }}>
          {paragraph}
        </p>
      )
    }).filter(Boolean)
  }

  // 页面加载时获取文章
  useEffect(() => {
    if (postId) {
      fetchPost()
    }
  }, [postId])

  if (loading) {
    return (
      <div className="loading">
        <div style={{ fontSize: '1.2rem' }}>📖 加载文章中...</div>
      </div>
    )
  }

  if (error) {
    return (
      <div className="card" style={{ textAlign: 'center' }}>
        <h2 style={{ color: '#dc2626', marginBottom: '1rem' }}>❌ 加载失败</h2>
        <p style={{ marginBottom: '1.5rem', color: '#64748b' }}>{error}</p>
        <div style={{ display: 'flex', gap: '1rem', justifyContent: 'center' }}>
          <button 
            onClick={fetchPost}
            className="btn btn-primary"
          >
            🔄 重新加载
          </button>
          <Link href="/blog" className="btn btn-secondary">
            📚 返回列表
          </Link>
        </div>
      </div>
    )
  }

  if (!post) {
    return (
      <div className="card" style={{ textAlign: 'center' }}>
        <h2 style={{ color: '#64748b', marginBottom: '1rem' }}>📄 文章不存在</h2>
        <p style={{ marginBottom: '1.5rem', color: '#64748b' }}>
          您要查看的文章可能已被删除或不存在
        </p>
        <Link href="/blog" className="btn btn-primary">
          📚 返回文章列表
        </Link>
      </div>
    )
  }

  return (
    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
      {/* 导航面包屑 */}
      <nav style={{ 
        marginBottom: '2rem',
        padding: '1rem',
        backgroundColor: '#f8fafc',
        borderRadius: '8px',
        fontSize: '0.9rem'
      }}>
        <Link href="/" style={{ color: '#4338ca', textDecoration: 'none' }}>
          🏠 首页
        </Link>
        <span style={{ margin: '0 0.5rem', color: '#64748b' }}>/</span>
        <Link href="/blog" style={{ color: '#4338ca', textDecoration: 'none' }}>
          📚 文章列表
        </Link>
        <span style={{ margin: '0 0.5rem', color: '#64748b' }}>/</span>
        <span style={{ color: '#64748b' }}>{post.title}</span>
      </nav>

      {/* 文章内容 */}
      <article className="card">
        {/* 文章标题 */}
        <h1 className="article-title">
          {post.title}
        </h1>

        {/* 文章元信息 */}
        <div className="article-meta">
          <div style={{ 
            display: 'flex', 
            flexWrap: 'wrap',
            gap: '1.5rem',
            alignItems: 'center'
          }}>
            <span>👤 <strong>作者:</strong> {post.author}</span>
            <span>📅 <strong>发布时间:</strong> {formatDate(post.createdAt)}</span>
            <span>📊 <strong>字数:</strong> {post.content.length} 字</span>
            <span>⏱️ <strong>预计阅读:</strong> {Math.ceil(post.content.length / 300)} 分钟</span>
          </div>
        </div>

        {/* 文章摘要 */}
        {post.summary && (
          <div style={{
            padding: '1rem',
            backgroundColor: '#f8fafc',
            borderLeft: '4px solid #4338ca',
            marginBottom: '2rem',
            borderRadius: '0 8px 8px 0'
          }}>
            <h3 style={{ 
              fontSize: '1rem', 
              marginBottom: '0.5rem',
              color: '#4338ca'
            }}>
              📋 文章摘要
            </h3>
            <p style={{ color: '#64748b', lineHeight: '1.6' }}>
              {post.summary}
            </p>
          </div>
        )}

        {/* 文章正文 */}
        <div className="article-content">
          {formatContent(post.content)}
        </div>
      </article>

      {/* 操作按钮 */}
      <div className="card" style={{ marginTop: '1.5rem' }}>
        <div style={{ 
          display: 'flex', 
          gap: '1rem',
          justifyContent: 'space-between',
          alignItems: 'center',
          flexWrap: 'wrap'
        }}>
          <div style={{ display: 'flex', gap: '1rem' }}>
            <Link href="/blog" className="btn btn-secondary">
              ⬅️ 返回列表
            </Link>
            <Link href="/write" className="btn btn-primary">
              ✍️ 写新文章
            </Link>
          </div>
          
          <button
            onClick={handleDeletePost}
            className="btn btn-danger"
          >
            🗑️ 删除文章
          </button>
        </div>
      </div>

      {/* 文章统计信息 */}
      <div className="card" style={{ marginTop: '1.5rem' }}>
        <h3 style={{ 
          fontSize: '1.2rem', 
          marginBottom: '1rem',
          color: '#4338ca'
        }}>
          📊 文章统计
        </h3>
        <div style={{ 
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
          gap: '1rem',
          fontSize: '0.9rem'
        }}>
          <div style={{ 
            padding: '0.75rem',
            backgroundColor: '#f1f5f9',
            borderRadius: '6px'
          }}>
            <div style={{ color: '#64748b' }}>总字数</div>
            <div style={{ fontSize: '1.2rem', fontWeight: '600', color: '#1e293b' }}>
              {post.content.length.toLocaleString()} 字
            </div>
          </div>
          <div style={{ 
            padding: '0.75rem',
            backgroundColor: '#f1f5f9',
            borderRadius: '6px'
          }}>
            <div style={{ color: '#64748b' }}>段落数</div>
            <div style={{ fontSize: '1.2rem', fontWeight: '600', color: '#1e293b' }}>
              {post.content.split('\n').filter(p => p.trim()).length} 段
            </div>
          </div>
          <div style={{ 
            padding: '0.75rem',
            backgroundColor: '#f1f5f9',
            borderRadius: '6px'
          }}>
            <div style={{ color: '#64748b' }}>预计阅读时间</div>
            <div style={{ fontSize: '1.2rem', fontWeight: '600', color: '#1e293b' }}>
              {Math.ceil(post.content.length / 300)} 分钟
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}