pure-note/web/src/pages/Note.tsx

import { Link, useNavigate, useParams } from 'react-router'
import { useQuery } from '@tanstack/react-query'
import { ArrowLeft, ArrowRight, Clock, Eye } from 'lucide-react'
import { Alert, Button, Card, Empty, Skeleton, Tag } from 'antd'
import { api } from '../lib/api'
import type { NoteDetail } from '../lib/api'
import { useAuth } from '../lib/auth'
import { useDocumentTitle } from '../features/site'
import MarkdownViewer from '../components/MarkdownViewer'
import { formatDateISO, readingMinutes } from '../lib/utils'

export default function Note() {
  const { slug = '' } = useParams()
  const navigate = useNavigate()
  const { authenticated } = useAuth()
  const { data: note, isLoading, error } = useQuery({
    queryKey: ['note', slug],
    queryFn: () => api<NoteDetail>(`/api/notes/${encodeURIComponent(slug)}`),
    retry: false,
  })
  useDocumentTitle(note?.title)

  if (isLoading) {
    return (
      <article className="pn-note-article">
        <Skeleton active title paragraph={{ rows: 6 }} />
      </article>
    )
  }
  if (error || !note) {
    return (
      <article className="pn-note-article">
        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="笔记不存在或未公开">
          <Button
            type="text"
            size="small"
            className="pn-note-back"
            icon={<ArrowLeft size={14} />}
            onClick={() => navigate('/')}
          >
            返回首页
          </Button>
        </Empty>
      </article>
    )
  }

  const privatePreview = note.status === 'private'

  return (
    <article className="pn-note-article">
      <Button type="text" size="small" className="pn-note-back" icon={<ArrowLeft size={14} />} onClick={() => navigate('/')}>
        返回首页
      </Button>

      {privatePreview && authenticated && (
        <Alert
          role="note"
          type="info"
          showIcon={false}
          className="pn-note-preview-alert"
          message={
            <>
              <Eye size={15} />
              私有预览：此笔记未公开，仅管理员可见
            </>
          }
        />
      )}

      <h1 className="pn-note-title">{note.title}</h1>

      <div className="pn-note-meta">
        <time className="pn-note-meta-date" dateTime={formatDateISO(note.published_at)}>
          {formatDateISO(note.published_at)}
        </time>
        <span className="pn-note-meta-sep">·</span>
        <span className="pn-note-meta-read"><Clock size={14} />约 {readingMinutes(note.content)} 分钟阅读</span>
        {note.tags.length > 0 && (
          <>
            <span className="pn-note-meta-sep">·</span>
            {note.tags.map((t) => (
              <Tag key={t}>
                <Link className="pn-tag-link" to={`/tags/${encodeURIComponent(t)}`}>{t}</Link>
              </Tag>
            ))}
          </>
        )}
      </div>

      <MarkdownViewer source={note.content} />

      <nav className="pn-note-postnav" aria-label="笔记导航">
        {note.prev ? (
          <Link to={`/notes/${encodeURIComponent(note.prev.slug)}`} className="pn-note-nav-link">
            <Card className="pn-note-nav-card" styles={{ body: { padding: 0 } }}>
              <span className="pn-note-nav-label"><ArrowLeft size={14} />上一篇</span>
              <span className="pn-note-nav-title">{note.prev.title}</span>
            </Card>
          </Link>
        ) : (
          <span />
        )}
        {note.next ? (
          <Link to={`/notes/${encodeURIComponent(note.next.slug)}`} className="pn-note-nav-link">
            <Card className="pn-note-nav-card pn-note-nav-next" styles={{ body: { padding: 0 } }}>
              <span className="pn-note-nav-label">下一篇<ArrowRight size={14} /></span>
              <span className="pn-note-nav-title">{note.next.title}</span>
            </Card>
          </Link>
        ) : (
          <span />
        )}
      </nav>
    </article>
  )
}