feat: 完善审核台文件预览与消息通知系统

主要更新:
- 新增 FilePreview 通用组件,支持视频/图片/PDF 内嵌预览
- 审核详情页添加文件信息卡片、预览/下载功能
- 审核列表和详情页添加申诉标识和申诉理由显示
- 完善三端消息通知系统(达人/代理商/品牌)
- 新增达人 Brief 查看页面
- 新增品牌方消息中心页面
- 创建后端开发备忘文档

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Your Name
2026-02-09 12:20:47 +08:00
co-authored by Claude Opus 4.5
parent bbc8a4f641
commit a5a005db0c
16 changed files with 3251 additions and 269 deletions
+84 -10
View File
@@ -17,8 +17,12 @@ import {
User,
Clock,
CheckCircle,
XCircle
XCircle,
Download,
ExternalLink,
MessageSquareWarning
} from 'lucide-react'
import { FileInfoCard, FilePreviewModal, type FileInfo } from '@/components/ui/FilePreview'
// 模拟视频任务数据
const mockVideoTask = {
@@ -30,6 +34,20 @@ const mockVideoTask = {
duration: 135,
aiScore: 85,
status: 'agent_reviewing',
// 文件信息
file: {
id: 'file-video-001',
fileName: '夏日护肤_成片v2.mp4',
fileSize: '128 MB',
fileType: 'video/mp4',
fileUrl: '/demo/videos/video-001.mp4', // 实际开发时替换为真实URL
uploadedAt: '2026-02-06 15:00',
duration: '02:15',
thumbnail: '/demo/videos/video-001-thumb.jpg',
} as FileInfo,
// 申诉信息
isAppeal: false,
appealReason: '',
hardViolations: [
{
id: 'v1',
@@ -105,6 +123,8 @@ export default function AgencyVideoReviewPage() {
const [forcePassReason, setForcePassReason] = useState('')
const [saveAsException, setSaveAsException] = useState(false)
const [checkedViolations, setCheckedViolations] = useState<Record<string, boolean>>({})
const [showFilePreview, setShowFilePreview] = useState(false)
const [videoError, setVideoError] = useState(false)
const task = mockVideoTask
@@ -149,7 +169,15 @@ export default function AgencyVideoReviewPage() {
<ArrowLeft size={20} className="text-text-primary" />
</button>
<div className="flex-1">
<h1 className="text-xl font-bold text-text-primary">{task.title}</h1>
<div className="flex items-center gap-2">
<h1 className="text-xl font-bold text-text-primary">{task.title}</h1>
{task.isAppeal && (
<span className="flex items-center gap-1 px-2 py-1 text-xs bg-accent-amber/20 text-accent-amber rounded-full font-medium">
<MessageSquareWarning size={12} />
</span>
)}
</div>
<div className="flex items-center gap-4 mt-1 text-sm text-text-secondary">
<span className="flex items-center gap-1">
<User size={14} />
@@ -163,22 +191,61 @@ export default function AgencyVideoReviewPage() {
</div>
</div>
{/* 申诉理由 */}
{task.isAppeal && task.appealReason && (
<div className="p-4 rounded-xl bg-accent-amber/10 border border-accent-amber/30">
<p className="text-sm text-accent-amber font-medium mb-1 flex items-center gap-1">
<MessageSquareWarning size={14} />
</p>
<p className="text-text-secondary">{task.appealReason}</p>
</div>
)}
{/* 审核流程进度条 */}
<ReviewProgressBar taskStatus={task.status} />
<div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
{/* 左侧:视频播放器 (3/5) */}
<div className="lg:col-span-3 space-y-4">
{/* 文件信息卡片 */}
<FileInfoCard
file={task.file}
onPreview={() => setShowFilePreview(true)}
/>
<Card>
<CardContent className="p-0">
<div className="aspect-video bg-gray-900 rounded-t-lg flex items-center justify-center relative">
<button
type="button"
className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center hover:bg-white/30 transition-colors"
onClick={() => setIsPlaying(!isPlaying)}
>
{isPlaying ? <Pause size={32} className="text-white" /> : <Play size={32} className="text-white ml-1" />}
</button>
{/* 真实视频播放器 */}
<div className="aspect-video bg-gray-900 rounded-t-lg overflow-hidden relative">
{videoError ? (
<div className="w-full h-full flex items-center justify-center">
<div className="text-center">
<Play size={48} className="mx-auto text-white/50 mb-3" />
<p className="text-white/70 mb-3"></p>
<Button
variant="secondary"
size="sm"
onClick={() => window.open(task.file.fileUrl, '_blank')}
>
<ExternalLink size={14} />
</Button>
</div>
</div>
) : (
<video
className="w-full h-full"
controls
poster={task.file.thumbnail}
onError={() => setVideoError(true)}
onPlay={() => setIsPlaying(true)}
onPause={() => setIsPlaying(false)}
>
<source src={task.file.fileUrl} type={task.file.fileType} />
</video>
)}
</div>
{/* 智能进度条 */}
<div className="p-4 border-t border-border-subtle">
@@ -416,6 +483,13 @@ export default function AgencyVideoReviewPage() {
</div>
</div>
</Modal>
{/* 文件预览弹窗 */}
<FilePreviewModal
file={task.file}
isOpen={showFilePreview}
onClose={() => setShowFilePreview(false)}
/>
</div>
)
}