feat(creator): 完成达人端前端页面开发

- 新增申诉中心页面（列表、详情、新建申诉）
- 新增申诉次数管理页面（按任务显示配额，支持向代理商申请）
- 新增个人中心页面（达人ID复制、菜单导航）
- 新增个人信息编辑、账户设置、消息通知设置页面
- 新增帮助中心和历史记录页面
- 新增脚本提交和视频提交页面
- 优化消息中心页面（消息详情跳转）
- 优化任务详情页面布局和交互
- 更新 ResponsiveLayout、Sidebar、ReviewSteps 通用组件

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/app/creator/appeals/new/page.tsx

@@ -0,0 +1,395 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import {
+  ArrowLeft,
+  Upload,
+  X,
+  FileText,
+  Image,
+  AlertTriangle,
+  CheckCircle
+} from 'lucide-react'
+import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
+import { cn } from '@/lib/utils'
+
+// 申诉原因选项
+const appealReasons = [
+  { id: 'misjudge', label: '误判', description: 'AI或审核员误判了内容' },
+  { id: 'unclear', label: '标准不清晰', description: '审核标准不明确或有歧义' },
+  { id: 'evidence', label: '有证据支持', description: '有证据证明内容符合要求' },
+  { id: 'context', label: '上下文理解', description: '审核未考虑完整上下文' },
+  { id: 'other', label: '其他原因', description: '其他需要说明的情况' },
+]
+
+// 任务信息（模拟从URL参数获取）
+const getTaskInfo = (taskId: string) => {
+  const tasks: Record<string, { title: string; issue: string; issueDesc: string; type: string; appealRemaining: number; agencyName: string }> = {
+    'task-003': {
+      title: 'ZZ饮品夏日',
+      issue: '检测到竞品提及',
+      issueDesc: '脚本第3段提及了竞品「百事可乐」，可能造成品牌冲突风险。',
+      type: 'ai',
+      appealRemaining: 1,
+      agencyName: '星辰传媒',
+    },
+    'task-010': {
+      title: 'GG智能手表',
+      issue: '品牌调性不符',
+      issueDesc: '脚本整体风格偏向娱乐化，与品牌科技专业形象不匹配。',
+      type: 'agency',
+      appealRemaining: 0,
+      agencyName: '星辰传媒',
+    },
+    'task-011': {
+      title: 'HH美妆代言',
+      issue: '创意不够新颖',
+      issueDesc: '脚本采用的是常见的口播形式，缺乏创新点和记忆点。',
+      type: 'brand',
+      appealRemaining: 1,
+      agencyName: '晨曦文化',
+    },
+    'task-013': {
+      title: 'JJ旅行vlog',
+      issue: '背景音乐版权问题',
+      issueDesc: '视频中使用的背景音乐存在版权风险。',
+      type: 'agency',
+      appealRemaining: 2,
+      agencyName: '晨曦文化',
+    },
+    'task-015': {
+      title: 'LL厨房电器',
+      issue: '使用场景不真实',
+      issueDesc: '视频中的厨房场景过于整洁，缺乏真实感。',
+      type: 'brand',
+      appealRemaining: 0,
+      agencyName: '星辰传媒',
+    },
+  }
+  return tasks[taskId] || { title: '未知任务', issue: '未知问题', issueDesc: '', type: 'ai', appealRemaining: 0, agencyName: '未知代理商' }
+}
+
+export default function NewAppealPage() {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const taskId = searchParams.get('taskId') || ''
+  const taskInfo = getTaskInfo(taskId)
+
+  const [selectedReason, setSelectedReason] = useState<string>('')
+  const [content, setContent] = useState('')
+  const [attachments, setAttachments] = useState<{ name: string; type: 'image' | 'document' }[]>([])
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [isSubmitted, setIsSubmitted] = useState(false)
+  const [isRequestingQuota, setIsRequestingQuota] = useState(false)
+  const [quotaRequested, setQuotaRequested] = useState(false)
+
+  const hasAppealQuota = taskInfo.appealRemaining > 0
+
+  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files
+    if (files) {
+      const newAttachments = Array.from(files).map(file => ({
+        name: file.name,
+        type: file.type.startsWith('image/') ? 'image' as const : 'document' as const,
+      }))
+      setAttachments([...attachments, ...newAttachments])
+    }
+  }
+
+  const removeAttachment = (index: number) => {
+    setAttachments(attachments.filter((_, i) => i !== index))
+  }
+
+  const handleSubmit = async () => {
+    if (!selectedReason || !content.trim()) return
+
+    setIsSubmitting(true)
+    // 模拟提交
+    await new Promise(resolve => setTimeout(resolve, 1500))
+    setIsSubmitting(false)
+    setIsSubmitted(true)
+
+    // 2秒后跳转到申诉列表
+    setTimeout(() => {
+      router.push('/creator/appeals')
+    }, 2000)
+  }
+
+  const canSubmit = selectedReason && content.trim().length >= 20 && hasAppealQuota
+
+  // 申请增加申诉次数
+  const handleRequestQuota = async () => {
+    setIsRequestingQuota(true)
+    await new Promise(resolve => setTimeout(resolve, 1000))
+    setIsRequestingQuota(false)
+    setQuotaRequested(true)
+  }
+
+  // 提交成功界面
+  if (isSubmitted) {
+    return (
+      <ResponsiveLayout role="creator">
+        <div className="flex items-center justify-center h-full">
+          <div className="flex flex-col items-center gap-6 max-w-md text-center">
+            <div className="w-20 h-20 rounded-full bg-accent-green/15 flex items-center justify-center">
+              <CheckCircle className="w-10 h-10 text-accent-green" />
+            </div>
+            <div className="flex flex-col gap-2">
+              <h2 className="text-2xl font-bold text-text-primary">申诉提交成功</h2>
+              <p className="text-text-secondary">
+                您的申诉已提交，我们将在 1-3 个工作日内处理完成。处理结果将通过消息中心通知您。
+              </p>
+            </div>
+            <p className="text-sm text-text-tertiary">正在跳转到申诉列表...</p>
+          </div>
+        </div>
+      </ResponsiveLayout>
+    )
+  }
+
+  return (
+    <ResponsiveLayout role="creator">
+      <div className="flex flex-col gap-6 h-full">
+        {/* 顶部栏 */}
+        <div className="flex items-center justify-between flex-wrap gap-4">
+          <div className="flex flex-col gap-1">
+            <button
+              type="button"
+              onClick={() => router.back()}
+              className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-bg-elevated text-text-secondary text-sm hover:bg-bg-card transition-colors w-fit mb-2"
+            >
+              <ArrowLeft className="w-4 h-4" />
+              返回
+            </button>
+            <h1 className="text-xl lg:text-[28px] font-bold text-text-primary">发起申诉</h1>
+            <p className="text-sm lg:text-[15px] text-text-secondary">对审核结果有异议？提交申诉让我们重新审核</p>
+          </div>
+          <div className={cn(
+            'flex items-center gap-2 px-4 py-2 rounded-xl',
+            hasAppealQuota ? 'bg-accent-indigo/15' : 'bg-accent-coral/15'
+          )}>
+            <AlertTriangle className={cn('w-5 h-5', hasAppealQuota ? 'text-accent-indigo' : 'text-accent-coral')} />
+            <span className={cn('text-sm font-medium', hasAppealQuota ? 'text-accent-indigo' : 'text-accent-coral')}>
+              本任务剩余 {taskInfo.appealRemaining} 次申诉机会
+            </span>
+          </div>
+        </div>
+
+        {/* 内容区 - 响应式布局 */}
+        <div className="flex flex-col lg:flex-row gap-6 flex-1 min-h-0 overflow-y-auto lg:overflow-hidden">
+          {/* 左侧：申诉表单 */}
+          <div className="flex-1 flex flex-col gap-5 lg:overflow-y-auto lg:pr-2">
+            {/* 关联任务 */}
+            <div className="bg-bg-card rounded-2xl p-4 lg:p-6 card-shadow">
+              <h3 className="text-base lg:text-lg font-semibold text-text-primary mb-4">关联任务</h3>
+              <div className="bg-bg-elevated rounded-xl p-4">
+                <div className="flex items-center justify-between mb-3">
+                  <span className="text-base font-semibold text-text-primary">{taskInfo.title}</span>
+                  <span className="px-2.5 py-1 rounded-full text-xs font-medium bg-accent-coral/15 text-accent-coral">
+                    {taskInfo.type === 'ai' ? 'AI审核' : taskInfo.type === 'agency' ? '代理商审核' : '品牌方审核'}
+                  </span>
+                </div>
+                <div className="flex items-start gap-2">
+                  <AlertTriangle className="w-4 h-4 text-accent-coral flex-shrink-0 mt-0.5" />
+                  <div>
+                    <span className="text-sm font-medium text-text-primary">{taskInfo.issue}</span>
+                    <p className="text-xs text-text-secondary mt-1">{taskInfo.issueDesc}</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* 申诉次数不足提示 */}
+            {!hasAppealQuota && (
+              <div className="bg-accent-coral/10 border border-accent-coral/30 rounded-2xl p-4 lg:p-6">
+                <div className="flex items-start gap-3">
+                  <AlertTriangle className="w-5 h-5 text-accent-coral flex-shrink-0 mt-0.5" />
+                  <div className="flex-1">
+                    <h3 className="text-base font-semibold text-accent-coral mb-2">申诉次数不足</h3>
+                    <p className="text-sm text-text-secondary mb-4">
+                      本任务的申诉次数已用完，无法提交新的申诉。您可以向代理商「{taskInfo.agencyName}」申请增加申诉次数。
+                    </p>
+                    {quotaRequested ? (
+                      <div className="flex items-center gap-2 text-accent-green">
+                        <CheckCircle className="w-4 h-4" />
+                        <span className="text-sm font-medium">申请已发送，等待代理商处理</span>
+                      </div>
+                    ) : (
+                      <button
+                        type="button"
+                        onClick={handleRequestQuota}
+                        disabled={isRequestingQuota}
+                        className="px-4 py-2 bg-accent-coral text-white rounded-lg text-sm font-medium hover:bg-accent-coral/90 transition-colors disabled:opacity-50"
+                      >
+                        {isRequestingQuota ? '申请中...' : '申请增加申诉次数'}
+                      </button>
+                    )}
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* 申诉原因 */}
+            <div className={cn('bg-bg-card rounded-2xl p-4 lg:p-6 card-shadow', !hasAppealQuota && 'opacity-50 pointer-events-none')}>
+              <h3 className="text-base lg:text-lg font-semibold text-text-primary mb-4">申诉原因 <span className="text-accent-coral">*</span></h3>
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+                {appealReasons.map((reason) => (
+                  <div
+                    key={reason.id}
+                    onClick={() => setSelectedReason(reason.id)}
+                    className={cn(
+                      'p-4 rounded-xl border-2 cursor-pointer transition-all',
+                      selectedReason === reason.id
+                        ? 'border-accent-indigo bg-accent-indigo/5'
+                        : 'border-border-subtle hover:border-text-tertiary'
+                    )}
+                  >
+                    <span className="text-sm font-semibold text-text-primary">{reason.label}</span>
+                    <p className="text-xs text-text-tertiary mt-1">{reason.description}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* 申诉说明 */}
+            <div className={cn('bg-bg-card rounded-2xl p-4 lg:p-6 card-shadow', !hasAppealQuota && 'opacity-50 pointer-events-none')}>
+              <h3 className="text-base lg:text-lg font-semibold text-text-primary mb-4">
+                申诉说明 <span className="text-accent-coral">*</span>
+                <span className="text-xs text-text-tertiary font-normal ml-2">至少20字</span>
+              </h3>
+              <textarea
+                value={content}
+                onChange={(e) => setContent(e.target.value)}
+                placeholder="请详细描述您的申诉理由，包括为什么您认为审核结果不合理..."
+                className="w-full h-32 lg:h-40 p-4 bg-bg-elevated rounded-xl text-sm text-text-primary placeholder-text-tertiary focus:outline-none focus:ring-2 focus:ring-accent-indigo resize-none"
+              />
+              <div className="flex justify-end mt-2">
+                <span className={cn(
+                  'text-xs',
+                  content.length >= 20 ? 'text-text-tertiary' : 'text-accent-coral'
+                )}>
+                  {content.length}/20 字
+                </span>
+              </div>
+            </div>
+
+            {/* 证明材料 */}
+            <div className={cn('bg-bg-card rounded-2xl p-4 lg:p-6 card-shadow', !hasAppealQuota && 'opacity-50 pointer-events-none')}>
+              <h3 className="text-base lg:text-lg font-semibold text-text-primary mb-4">
+                证明材料 <span className="text-xs text-text-tertiary font-normal">（可选）</span>
+              </h3>
+              <div className="flex flex-wrap gap-3">
+                {attachments.map((file, index) => (
+                  <div
+                    key={index}
+                    className="flex items-center gap-2 px-3 py-2 bg-bg-elevated rounded-lg"
+                  >
+                    {file.type === 'image' ? (
+                      <Image className="w-4 h-4 text-accent-indigo" />
+                    ) : (
+                      <FileText className="w-4 h-4 text-accent-indigo" />
+                    )}
+                    <span className="text-sm text-text-primary max-w-[150px] truncate">{file.name}</span>
+                    <button
+                      type="button"
+                      onClick={() => removeAttachment(index)}
+                      className="w-5 h-5 rounded-full bg-bg-page flex items-center justify-center hover:bg-accent-coral/15"
+                    >
+                      <X className="w-3 h-3 text-text-tertiary" />
+                    </button>
+                  </div>
+                ))}
+                <label className="flex items-center gap-2 px-4 py-2 bg-bg-elevated rounded-lg cursor-pointer hover:bg-bg-page transition-colors">
+                  <Upload className="w-4 h-4 text-accent-indigo" />
+                  <span className="text-sm text-accent-indigo">上传文件</span>
+                  <input
+                    type="file"
+                    multiple
+                    accept="image/*,.pdf,.doc,.docx"
+                    onChange={handleFileUpload}
+                    className="hidden"
+                  />
+                </label>
+              </div>
+              <p className="text-xs text-text-tertiary mt-3">支持图片、PDF、Word 文档，单个文件不超过 10MB</p>
+            </div>
+
+            {/* 移动端提交按钮 */}
+            <div className="lg:hidden">
+              <button
+                type="button"
+                onClick={handleSubmit}
+                disabled={!canSubmit || isSubmitting}
+                className={cn(
+                  'w-full py-4 rounded-xl text-base font-semibold',
+                  canSubmit && !isSubmitting
+                    ? 'bg-accent-indigo text-white'
+                    : 'bg-bg-elevated text-text-tertiary'
+                )}
+              >
+                {isSubmitting ? '提交中...' : '提交申诉'}
+              </button>
+            </div>
+          </div>
+
+          {/* 右侧：提交信息（仅桌面端显示） */}
+          <div className="hidden lg:block lg:w-[320px] lg:flex-shrink-0">
+            <div className="bg-bg-card rounded-2xl p-6 card-shadow sticky top-0">
+              <h3 className="text-lg font-semibold text-text-primary mb-5">提交确认</h3>
+
+              <div className="flex flex-col gap-4 mb-6">
+                <div className="flex items-center justify-between">
+                  <span className="text-sm text-text-tertiary">关联任务</span>
+                  <span className="text-sm text-text-primary">{taskInfo.title}</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-sm text-text-tertiary">申诉原因</span>
+                  <span className="text-sm text-text-primary">
+                    {appealReasons.find(r => r.id === selectedReason)?.label || '未选择'}
+                  </span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-sm text-text-tertiary">说明字数</span>
+                  <span className={cn(
+                    'text-sm',
+                    content.length >= 20 ? 'text-accent-green' : 'text-text-tertiary'
+                  )}>
+                    {content.length} 字
+                  </span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-sm text-text-tertiary">附件数量</span>
+                  <span className="text-sm text-text-primary">{attachments.length} 个</span>
+                </div>
+              </div>
+
+              <div className="bg-amber-500/10 rounded-xl p-4 mb-6">
+                <div className="flex items-start gap-2">
+                  <AlertTriangle className="w-4 h-4 text-amber-500 flex-shrink-0 mt-0.5" />
+                  <p className="text-xs text-text-secondary">
+                    提交后将消耗 1 次申诉机会。请确保信息准确，恶意申诉可能影响您的账号信誉。
+                  </p>
+                </div>
+              </div>
+
+              <button
+                type="button"
+                onClick={handleSubmit}
+                disabled={!canSubmit || isSubmitting}
+                className={cn(
+                  'w-full py-4 rounded-xl text-base font-semibold transition-colors',
+                  canSubmit && !isSubmitting
+                    ? 'bg-accent-indigo text-white hover:bg-accent-indigo/90'
+                    : 'bg-bg-elevated text-text-tertiary cursor-not-allowed'
+                )}
+              >
+                {isSubmitting ? '提交中...' : '提交申诉'}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ResponsiveLayout>
+  )
+}