sundynix-pets/pets-be/web/admin/src/pages/Comments.tsx

import { useState } from 'react'
import { api } from '@/lib/api'
import { usePaged } from '@/lib/usePaged'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Card, CardContent } from '@/components/ui/card'
import { Pager } from '@/components/Pager'

const statusMap: Record<string, { label: string; variant: any }> = {
  pending: { label: '待审核', variant: 'warning' },
  published: { label: '正常', variant: 'success' },
  rejected: { label: '已打回', variant: 'destructive' },
  deleted: { label: '已删除', variant: 'destructive' },
}

const FILTERS = [
  { label: '待审核', status: 'pending' },
  { label: '正常', status: 'published' },
  { label: '全部', status: '' },
]

function isUrl(s: string) {
  return typeof s === 'string' && s.indexOf('http') === 0
}

export default function Comments() {
  const [status, setStatus] = useState('pending')
  const { page, setPage, data, totalPages, reload } = usePaged<any>(api.comments, { status })

  async function setStat(id: number, s: string) {
    await api.setCommentStatus(id, s)
    reload()
  }
  async function del(id: number) {
    await api.deleteComment(id)
    reload()
  }

  return (
    <div>
      <div className="mb-6 flex items-center justify-between">
        <h1 className="text-2xl font-bold">评论审核</h1>
        <div className="flex gap-1 rounded-lg border bg-card p-1">
          {FILTERS.map((f) => (
            <button
              key={f.status}
              onClick={() => { setStatus(f.status); setPage(1) }}
              className={`rounded-md px-3 py-1 text-sm transition ${
                status === f.status ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground'
              }`}
            >
              {f.label}
            </button>
          ))}
        </div>
      </div>
      <Card>
        <CardContent className="pt-6">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>作者</TableHead>
                <TableHead>内容</TableHead>
                <TableHead>配图</TableHead>
                <TableHead>帖子</TableHead>
                <TableHead>状态</TableHead>
                <TableHead className="text-right">操作</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {data?.list?.map((c) => {
                const imgs: string[] = Array.isArray(c.images) ? c.images.filter(isUrl) : []
                return (
                  <TableRow key={c.id}>
                    <TableCell className="whitespace-nowrap align-top">{c.author_name}</TableCell>
                    <TableCell className="max-w-xs align-top">
                      <div className="line-clamp-3 whitespace-pre-wrap text-sm">{c.content || '—'}</div>
                    </TableCell>
                    <TableCell className="align-top">
                      {imgs.length ? (
                        <div className="flex flex-wrap gap-1" style={{ maxWidth: 180 }}>
                          {imgs.map((u, i) => (
                            <a key={i} href={u} target="_blank" rel="noreferrer">
                              <img src={u} className="h-14 w-14 rounded-md border object-cover" loading="lazy" />
                            </a>
                          ))}
                        </div>
                      ) : (
                        <span className="text-xs text-muted-foreground">无</span>
                      )}
                    </TableCell>
                    <TableCell className="align-top text-xs text-muted-foreground">{c.post_id}</TableCell>
                    <TableCell className="align-top">
                      <Badge variant={statusMap[c.status]?.variant}>{statusMap[c.status]?.label ?? c.status}</Badge>
                    </TableCell>
                    <TableCell className="space-x-2 whitespace-nowrap text-right align-top">
                      {c.status !== 'published' && c.status !== 'deleted' && (
                        <Button variant="default" size="sm" onClick={() => setStat(c.id, 'published')}>
                          通过
                        </Button>
                      )}
                      {c.status !== 'deleted' && (
                        <Button variant="destructive" size="sm" onClick={() => del(c.id)}>
                          删除
                        </Button>
                      )}
                    </TableCell>
                  </TableRow>
                )
              })}
              {!data?.list?.length && (
                <TableRow>
                  <TableCell colSpan={6} className="py-10 text-center text-muted-foreground">
                    这个状态下暂无评论
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>
          <Pager page={page} totalPages={totalPages} total={data?.total ?? 0} onChange={setPage} />
        </CardContent>
      </Card>
    </div>
  )
}