fix: 修复前端代码质量问题

- 创建 Toast 通知组件,替换所有 alert() 调用
- 修复 useReview hook 内存泄漏(setInterval 清理)
- 移除所有 console.error 和 console.log 语句
- 为复制操作失败添加用户友好的 toast 提示

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Your Name
2026-02-09 12:48:22 +08:00
co-authored by Claude Opus 4.5
parent a5a005db0c
commit 37ac749071
33 changed files with 519 additions and 91 deletions
+201 -1
View File
@@ -2,6 +2,7 @@
import { useState, useEffect } from 'react'
import { useRouter, useParams, useSearchParams } from 'next/navigation'
import { useToast } from '@/components/ui/Toast'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
import { Button } from '@/components/ui/Button'
import { SuccessTag, WarningTag, ErrorTag, PendingTag } from '@/components/ui/Tag'
@@ -17,8 +18,48 @@ import {
Loader2,
RefreshCw,
Eye,
MessageSquare
MessageSquare,
Download,
File,
Target,
Ban,
ChevronDown,
ChevronUp
} from 'lucide-react'
import { Modal } from '@/components/ui/Modal'
// 代理商Brief文档(达人可查看)
type AgencyBriefFile = {
id: string
name: string
size: string
uploadedAt: string
description?: string
}
const mockAgencyBrief = {
// 代理商上传的Brief文档
files: [
{ id: 'af1', name: '达人拍摄指南.pdf', size: '1.5MB', uploadedAt: '2026-02-02', description: '详细的拍摄流程和注意事项' },
{ id: 'af2', name: '产品卖点话术.docx', size: '800KB', uploadedAt: '2026-02-02', description: '推荐使用的话术和表达方式' },
{ id: 'af3', name: '品牌视觉参考.pdf', size: '3.2MB', uploadedAt: '2026-02-02', description: '视觉风格和拍摄参考示例' },
] as AgencyBriefFile[],
// 卖点要求
sellingPoints: [
{ id: 'sp1', content: 'SPF50+ PA++++', required: true },
{ id: 'sp2', content: '轻薄质地,不油腻', required: true },
{ id: 'sp3', content: '延展性好,易推开', required: false },
{ id: 'sp4', content: '适合敏感肌', required: false },
{ id: 'sp5', content: '夏日必备防晒', required: true },
],
// 违禁词
blacklistWords: [
{ id: 'bw1', word: '最好', reason: '绝对化用语' },
{ id: 'bw2', word: '第一', reason: '绝对化用语' },
{ id: 'bw3', word: '神器', reason: '夸大宣传' },
{ id: 'bw4', word: '完美', reason: '绝对化用语' },
],
}
// 模拟任务数据
const mockTask = {
@@ -105,6 +146,161 @@ function getTaskByStatus(status: string) {
return task
}
// 代理商Brief文档查看组件
function AgencyBriefSection({ toast }: { toast: ReturnType<typeof useToast> }) {
const [isExpanded, setIsExpanded] = useState(true)
const [previewFile, setPreviewFile] = useState<AgencyBriefFile | null>(null)
const handleDownload = (file: AgencyBriefFile) => {
toast.info(`下载文件: ${file.name}`)
}
const handlePreview = (file: AgencyBriefFile) => {
setPreviewFile(file)
}
const requiredPoints = mockAgencyBrief.sellingPoints.filter(sp => sp.required)
const optionalPoints = mockAgencyBrief.sellingPoints.filter(sp => !sp.required)
return (
<>
<Card className="border-accent-indigo/30">
<CardHeader>
<CardTitle className="flex items-center justify-between">
<span className="flex items-center gap-2">
<File size={18} className="text-accent-indigo" />
Brief
</span>
<button
type="button"
onClick={() => setIsExpanded(!isExpanded)}
className="p-1 hover:bg-bg-elevated rounded"
>
{isExpanded ? (
<ChevronUp size={18} className="text-text-tertiary" />
) : (
<ChevronDown size={18} className="text-text-tertiary" />
)}
</button>
</CardTitle>
</CardHeader>
{isExpanded && (
<CardContent className="space-y-4">
{/* Brief文档列表 */}
<div>
<h4 className="text-sm font-medium text-text-primary mb-2 flex items-center gap-2">
<FileText size={14} className="text-accent-indigo" />
</h4>
<div className="space-y-2">
{mockAgencyBrief.files.map((file) => (
<div key={file.id} className="flex items-center justify-between p-3 bg-bg-elevated rounded-lg">
<div className="flex items-center gap-3 min-w-0">
<div className="w-8 h-8 rounded bg-accent-indigo/15 flex items-center justify-center flex-shrink-0">
<FileText size={16} className="text-accent-indigo" />
</div>
<div className="min-w-0">
<p className="text-sm font-medium text-text-primary truncate">{file.name}</p>
<p className="text-xs text-text-tertiary">{file.size}</p>
</div>
</div>
<div className="flex items-center gap-1 flex-shrink-0">
<Button variant="ghost" size="sm" onClick={() => handlePreview(file)}>
<Eye size={14} />
</Button>
<Button variant="ghost" size="sm" onClick={() => handleDownload(file)}>
<Download size={14} />
</Button>
</div>
</div>
))}
</div>
</div>
{/* 卖点要求 */}
<div>
<h4 className="text-sm font-medium text-text-primary mb-2 flex items-center gap-2">
<Target size={14} className="text-accent-green" />
</h4>
<div className="space-y-2">
{requiredPoints.length > 0 && (
<div className="p-3 bg-accent-coral/10 rounded-lg border border-accent-coral/30">
<p className="text-xs text-accent-coral font-medium mb-2"></p>
<div className="flex flex-wrap gap-2">
{requiredPoints.map((sp) => (
<span key={sp.id} className="px-2 py-1 text-xs bg-accent-coral/20 text-accent-coral rounded">
{sp.content}
</span>
))}
</div>
</div>
)}
{optionalPoints.length > 0 && (
<div className="p-3 bg-bg-elevated rounded-lg">
<p className="text-xs text-text-tertiary font-medium mb-2"></p>
<div className="flex flex-wrap gap-2">
{optionalPoints.map((sp) => (
<span key={sp.id} className="px-2 py-1 text-xs bg-bg-page text-text-secondary rounded">
{sp.content}
</span>
))}
</div>
</div>
)}
</div>
</div>
{/* 违禁词 */}
<div>
<h4 className="text-sm font-medium text-text-primary mb-2 flex items-center gap-2">
<Ban size={14} className="text-accent-coral" />
使
</h4>
<div className="flex flex-wrap gap-2">
{mockAgencyBrief.blacklistWords.map((bw) => (
<span key={bw.id} className="px-2 py-1 text-xs bg-accent-coral/15 text-accent-coral rounded border border-accent-coral/30">
{bw.word}
</span>
))}
</div>
</div>
</CardContent>
)}
</Card>
{/* 文件预览弹窗 */}
<Modal
isOpen={!!previewFile}
onClose={() => setPreviewFile(null)}
title={previewFile?.name || '文件预览'}
size="lg"
>
<div className="space-y-4">
<div className="aspect-[4/3] bg-bg-elevated rounded-lg flex items-center justify-center">
<div className="text-center">
<FileText size={48} className="mx-auto text-accent-indigo mb-4" />
<p className="text-text-secondary"></p>
<p className="text-xs text-text-tertiary mt-1"></p>
</div>
</div>
<div className="flex justify-end gap-2">
<Button variant="secondary" onClick={() => setPreviewFile(null)}>
</Button>
{previewFile && (
<Button onClick={() => handleDownload(previewFile)}>
<Download size={16} />
</Button>
)}
</div>
</div>
</Modal>
</>
)
}
function UploadSection({ onUpload }: { onUpload: () => void }) {
const [file, setFile] = useState<File | null>(null)
@@ -336,6 +532,7 @@ export default function CreatorScriptPage() {
const router = useRouter()
const params = useParams()
const searchParams = useSearchParams()
const toast = useToast()
const status = searchParams.get('status') || 'pending_upload'
const [task, setTask] = useState(getTaskByStatus(status))
@@ -390,6 +587,9 @@ export default function CreatorScriptPage() {
</CardContent>
</Card>
{/* Brief文档与要求(始终显示) */}
<AgencyBriefSection toast={toast} />
{/* 根据状态显示不同内容 */}
{task.scriptStatus === 'pending_upload' && (
<UploadSection onUpload={simulateUpload} />