feat(creator): 完成达人端前端页面开发
- 新增申诉中心页面（列表、详情、新建申诉） - 新增申诉次数管理页面（按任务显示配额，支持向代理商申请） - 新增个人中心页面（达人ID复制、菜单导航） - 新增个人信息编辑、账户设置、消息通知设置页面 - 新增帮助中心和历史记录页面 - 新增脚本提交和视频提交页面 - 优化消息中心页面（消息详情跳转） - 优化任务详情页面布局和交互 - 更新 ResponsiveLayout、Sidebar、ReviewSteps 通用组件 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Your Name
co-authored by
Claude Opus 4.5
Claude Opus 4.5
parent
1011e73643
commit
2f9b7f05fd
@@ -0,0 +1,269 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import {
|
||||
ArrowLeft,
|
||||
AlertCircle,
|
||||
CheckCircle,
|
||||
Clock,
|
||||
XCircle,
|
||||
Send,
|
||||
Info,
|
||||
} from 'lucide-react'
|
||||
import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
|
||||
import { Button } from '@/components/ui/Button'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
// 申请状态类型
|
||||
type RequestStatus = 'none' | 'pending' | 'approved' | 'rejected'
|
||||
|
||||
// 任务申诉次数数据
|
||||
interface TaskAppealQuota {
|
||||
id: string
|
||||
taskName: string
|
||||
agencyName: string
|
||||
remaining: number
|
||||
used: number
|
||||
requestStatus: RequestStatus
|
||||
requestTime?: string
|
||||
}
|
||||
|
||||
// 模拟任务申诉次数数据
|
||||
const mockTaskQuotas: TaskAppealQuota[] = [
|
||||
{
|
||||
id: '1',
|
||||
taskName: '618美妆推广视频',
|
||||
agencyName: '星辰传媒',
|
||||
remaining: 1,
|
||||
used: 0,
|
||||
requestStatus: 'none',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
taskName: '双11护肤品种草',
|
||||
agencyName: '星辰传媒',
|
||||
remaining: 0,
|
||||
used: 1,
|
||||
requestStatus: 'pending',
|
||||
requestTime: '2024-02-05 14:30',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
taskName: '春节限定礼盒开箱',
|
||||
agencyName: '晨曦文化',
|
||||
remaining: 2,
|
||||
used: 0,
|
||||
requestStatus: 'approved',
|
||||
requestTime: '2024-02-04 10:15',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
taskName: '情人节香水测评',
|
||||
agencyName: '晨曦文化',
|
||||
remaining: 0,
|
||||
used: 1,
|
||||
requestStatus: 'rejected',
|
||||
requestTime: '2024-02-03 16:20',
|
||||
},
|
||||
]
|
||||
|
||||
// 状态标签组件
|
||||
function StatusBadge({ status }: { status: RequestStatus }) {
|
||||
const config = {
|
||||
none: { label: '', icon: null, className: '' },
|
||||
pending: {
|
||||
label: '申请中',
|
||||
icon: Clock,
|
||||
className: 'bg-accent-amber/15 text-accent-amber',
|
||||
},
|
||||
approved: {
|
||||
label: '已同意',
|
||||
icon: CheckCircle,
|
||||
className: 'bg-accent-green/15 text-accent-green',
|
||||
},
|
||||
rejected: {
|
||||
label: '已拒绝',
|
||||
icon: XCircle,
|
||||
className: 'bg-accent-coral/15 text-accent-coral',
|
||||
},
|
||||
}
|
||||
|
||||
const { label, icon: Icon, className } = config[status]
|
||||
|
||||
if (status === 'none') return null
|
||||
|
||||
return (
|
||||
<span className={cn('inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium', className)}>
|
||||
{Icon && <Icon size={12} />}
|
||||
{label}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
// 任务卡片组件
|
||||
function TaskQuotaCard({
|
||||
task,
|
||||
onRequestIncrease,
|
||||
}: {
|
||||
task: TaskAppealQuota
|
||||
onRequestIncrease: (taskId: string) => void
|
||||
}) {
|
||||
const canRequest = task.requestStatus === 'none' || task.requestStatus === 'rejected'
|
||||
|
||||
return (
|
||||
<div className="bg-bg-card rounded-xl p-5 card-shadow flex flex-col gap-4">
|
||||
{/* 任务信息 */}
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex flex-col gap-1 min-w-0">
|
||||
<h3 className="text-[15px] font-medium text-text-primary truncate">{task.taskName}</h3>
|
||||
<p className="text-[13px] text-text-tertiary">{task.agencyName}</p>
|
||||
</div>
|
||||
<StatusBadge status={task.requestStatus} />
|
||||
</div>
|
||||
|
||||
{/* 申诉次数 */}
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-2xl font-bold text-accent-indigo">{task.remaining}</span>
|
||||
<span className="text-xs text-text-tertiary">剩余次数</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-2xl font-bold text-text-secondary">{task.used}</span>
|
||||
<span className="text-xs text-text-tertiary">已使用</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<div className="flex items-center justify-between pt-3 border-t border-border-subtle">
|
||||
{task.requestTime && (
|
||||
<span className="text-xs text-text-tertiary">
|
||||
{task.requestStatus === 'pending' ? '申请时间：' : '处理时间：'}
|
||||
{task.requestTime}
|
||||
</span>
|
||||
)}
|
||||
{!task.requestTime && <span />}
|
||||
|
||||
{canRequest ? (
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => onRequestIncrease(task.id)}
|
||||
className="gap-1.5"
|
||||
>
|
||||
<Send size={14} />
|
||||
申请增加
|
||||
</Button>
|
||||
) : task.requestStatus === 'pending' ? (
|
||||
<span className="text-xs text-accent-amber">等待代理商处理...</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function AppealQuotaPage() {
|
||||
const router = useRouter()
|
||||
const [tasks, setTasks] = useState(mockTaskQuotas)
|
||||
const [showSuccessToast, setShowSuccessToast] = useState(false)
|
||||
|
||||
// 申请增加申诉次数
|
||||
const handleRequestIncrease = (taskId: string) => {
|
||||
setTasks(prev =>
|
||||
prev.map(task =>
|
||||
task.id === taskId
|
||||
? {
|
||||
...task,
|
||||
requestStatus: 'pending' as RequestStatus,
|
||||
requestTime: new Date().toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
}),
|
||||
}
|
||||
: task
|
||||
)
|
||||
)
|
||||
setShowSuccessToast(true)
|
||||
setTimeout(() => setShowSuccessToast(false), 3000)
|
||||
}
|
||||
|
||||
// 统计数据
|
||||
const totalRemaining = tasks.reduce((sum, t) => sum + t.remaining, 0)
|
||||
const totalUsed = tasks.reduce((sum, t) => sum + t.used, 0)
|
||||
const pendingRequests = tasks.filter(t => t.requestStatus === 'pending').length
|
||||
|
||||
return (
|
||||
<ResponsiveLayout role="creator">
|
||||
<div className="flex flex-col gap-6 h-full">
|
||||
{/* 顶部栏 */}
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.back()}
|
||||
className="w-10 h-10 rounded-xl bg-bg-elevated flex items-center justify-center hover:bg-bg-elevated/80 transition-colors"
|
||||
>
|
||||
<ArrowLeft size={20} className="text-text-secondary" />
|
||||
</button>
|
||||
<div className="flex flex-col gap-1">
|
||||
<h1 className="text-2xl lg:text-[28px] font-bold text-text-primary">申诉次数</h1>
|
||||
<p className="text-sm lg:text-[15px] text-text-secondary">
|
||||
查看各任务的申诉次数，可向代理商申请增加
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 统计卡片 */}
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="bg-bg-card rounded-xl p-4 card-shadow flex flex-col items-center gap-1">
|
||||
<span className="text-2xl font-bold text-accent-indigo">{totalRemaining}</span>
|
||||
<span className="text-xs text-text-tertiary">总剩余次数</span>
|
||||
</div>
|
||||
<div className="bg-bg-card rounded-xl p-4 card-shadow flex flex-col items-center gap-1">
|
||||
<span className="text-2xl font-bold text-text-secondary">{totalUsed}</span>
|
||||
<span className="text-xs text-text-tertiary">总已使用</span>
|
||||
</div>
|
||||
<div className="bg-bg-card rounded-xl p-4 card-shadow flex flex-col items-center gap-1">
|
||||
<span className="text-2xl font-bold text-accent-amber">{pendingRequests}</span>
|
||||
<span className="text-xs text-text-tertiary">待处理申请</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 规则说明 */}
|
||||
<div className="bg-accent-indigo/10 rounded-xl p-4 flex gap-3">
|
||||
<Info size={20} className="text-accent-indigo flex-shrink-0 mt-0.5" />
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-sm font-medium text-text-primary">申诉次数规则</span>
|
||||
<span className="text-[13px] text-text-secondary leading-relaxed">
|
||||
每个任务初始有 1 次申诉机会，不同任务独立计算。如需更多次数，可点击"申请增加"向代理商发送请求，无需填写理由。代理商可增加的次数无上限。
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 任务列表 */}
|
||||
<div className="flex flex-col gap-4 flex-1 min-h-0 overflow-y-auto pb-4">
|
||||
<h2 className="text-base font-semibold text-text-primary sticky top-0 bg-bg-page py-2 -mt-2">
|
||||
任务申诉次数 ({tasks.length})
|
||||
</h2>
|
||||
{tasks.map(task => (
|
||||
<TaskQuotaCard
|
||||
key={task.id}
|
||||
task={task}
|
||||
onRequestIncrease={handleRequestIncrease}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 成功提示 */}
|
||||
{showSuccessToast && (
|
||||
<div className="fixed bottom-24 left-1/2 -translate-x-1/2 bg-accent-green text-white px-4 py-3 rounded-xl shadow-lg flex items-center gap-2 animate-fade-in z-50">
|
||||
<CheckCircle size={18} />
|
||||
<span className="text-sm font-medium">申请已发送，等待代理商处理</span>
|
||||
</div>
|
||||
)}
|
||||
</ResponsiveLayout>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user