fix: P0 安全加固 + 前端错误边界 + ESLint 修复

后端:
- 实现登出 API(清除 refresh token)
- 清除 videos.py 中已被 Celery 任务取代的死代码
- 添加速率限制中间件(60次/分钟,登录10次/分钟)
- 添加 SECRET_KEY/ENCRYPTION_KEY 默认值警告
- OSS STS 方法回退到 Policy 签名(不再抛异常)

前端:
- 添加全局 404/error/loading 页面
- 添加三端 error.tsx + loading.tsx 错误边界
- 修复 useId 条件调用违反 Hooks 规则
- 修复未转义引号和 Image 命名冲突
- 添加 ESLint 配置

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Your Name 2026-02-09 17:18:04 +08:00
parent a8be7bbca9
commit 8eb8100cf4
25 changed files with 498 additions and 193 deletions

137
CLAUDE.md Normal file
View File

@ -0,0 +1,137 @@
# CLAUDE.md — 秒思智能审核平台
## 常用命令
### 前端 (frontend/)
```bash
cd frontend && npm run dev # 开发服务器 http://localhost:3000
cd frontend && npm run build # 生产构建(含类型检查)
cd frontend && npm run lint # ESLint 检查
cd frontend && npm test # Vitest 测试
cd frontend && npm run test:coverage # 覆盖率报告
```
### 后端 (backend/)
```bash
cd backend && uvicorn app.main:app --reload # 开发服务器 http://localhost:8000
cd backend && pytest # 运行测试
cd backend && pytest --cov # 带覆盖率
cd backend && pytest -m "not slow" # 跳过慢测试
cd backend && alembic upgrade head # 执行数据库迁移
cd backend && alembic revision --autogenerate -m "msg" # 生成迁移
```
### Docker
```bash
cd backend && docker-compose up # 启动 PostgreSQL + Redis + API + Celery
```
## 项目架构
**秒思智能审核平台** — AI 营销内容合规审核系统,支持品牌方/代理商/达人三端。
```
video-compliance-ai/
├── frontend/ Next.js 14 + TypeScript + TailwindCSS (App Router)
├── backend/ FastAPI + SQLAlchemy 2.0 (async) + PostgreSQL
├── documents/ 产品文档 (PRD, 设计稿, 约定等)
└── scripts/ 工具脚本
```
### 前端结构
```
frontend/
├── app/
│ ├── login/, register/ 认证页面
│ ├── creator/ 达人端(任务/上传/申诉)
│ ├── agency/ 代理商端(审核/管理/报表)
│ └── brand/ 品牌方端(项目/规则/AI配置
├── components/ui/ 通用 UI 组件
├── lib/api.ts Axios API 客户端(所有后端接口已封装)
├── lib/taskStageMapper.ts 任务阶段 → UI 状态映射
├── hooks/ 自定义 HooksuseOSSUpload 等)
├── contexts/ AuthContext, SSEContext
└── types/ TypeScript 类型定义(与后端 schema 对齐)
```
### 后端结构
```
backend/app/
├── main.py FastAPI 应用入口API 前缀 /api/v1
├── config.py Pydantic Settings 配置
├── database.py SQLAlchemy async session
├── celery_app.py Celery 配置
├── api/ 路由auth, tasks, projects, briefs, organizations, dashboard, sse, upload, scripts, videos, rules, ai_config
├── models/ SQLAlchemy ORM 模型
├── schemas/ Pydantic 请求/响应 schema
├── services/ 业务逻辑层
├── tasks/ Celery 异步任务
└── utils/ 工具函数
```
## 关键约定
### 认证与多租户
- JWT 双 Tokenaccess 15min + refresh 7天
- localStorage keys`miaosi_access_token`, `miaosi_refresh_token`, `miaosi_user`
- 品牌方 = 租户,数据按品牌方隔离
- 组织关系多对多:品牌方 ↔ 代理商 ↔ 达人
### ID 规范
- 语义化前缀 + 6位数字`BR`(品牌方), `AG`(代理商), `CR`(达人), `PJ`(项目), `TK`(任务), `BF`(Brief)
### Mock 模式
- `USE_MOCK` 标志从 `contexts/AuthContext.tsx` 导出
- 开发环境或 `NEXT_PUBLIC_USE_MOCK=true` 时为 true
- 每个页面在 `loadData()` 中先检查 `USE_MOCK`,为 true 则使用本地 mock 数据
### 前端数据加载模式
```typescript
const loadData = useCallback(async () => {
if (USE_MOCK) { setData(mockData); setLoading(false); return }
try {
const res = await api.someMethod()
setData(res)
} catch (err) {
toast.error('加载失败')
} finally {
setLoading(false)
}
}, [toast])
useEffect(() => { loadData() }, [loadData])
```
### AI 服务
- 通过中转服务商OneAPI/OneInAll调用不直连 AI 厂商
- 配置项:`AI_PROVIDER`, `AI_API_KEY`, `AI_API_BASE_URL`
### 文件上传
- 阿里云 OSS 直传,前端通过 `useOSSUpload` hook 处理
- 流程:`api.getUploadPolicy()` → POST 到 OSS → `api.fileUploaded()` 回调
### 实时推送
- SSE (Server-Sent Events),端点 `/api/v1/sse/events`
- 前端通过 `SSEContext` 提供 `subscribe(eventType, handler)` API
## 设计系统
### 暗色主题配色
- 背景:`bg-page`(#0B0B0E), `bg-card`(#16161A), `bg-elevated`(#1A1A1E)
- 文字:`text-primary`(#FAFAF9), `text-secondary`(#6B6B70), `text-tertiary`(#4A4A50)
- 强调色:`accent-indigo`(#6366F1), `accent-green`(#32D583), `accent-coral`(#E85A4F), `accent-amber`(#FFB547)
- 边框:`border-subtle`(#2A2A2E), `border-strong`(#3A3A40)
### 字体
- 正文DM Sans
- 展示Fraunces
## 任务审核流程
```
脚本上传 → AI审核 → 代理商审核 → 品牌终审 → 视频上传 → AI审核 → 代理商审核 → 品牌终审 → 完成
```
对应 `TaskStage``script_upload``script_ai_review``script_agency_review``script_brand_review``video_upload` → ... → `completed`
## 注意事项
- 后端 Celery 异步任务(视频审核处理)尚未完整实现
- 数据库已有 3 个 Alembic 迁移版本
- `.pen` 文件是加密设计文件,只能通过 Pencil MCP 工具访问

View File

@ -5,6 +5,8 @@ from fastapi import APIRouter, Depends, HTTPException, status
from sqlalchemy.ext.asyncio import AsyncSession
from app.database import get_db
from app.api.deps import get_current_user
from app.models.user import User
from app.schemas.auth import (
RegisterRequest,
LoginRequest,
@ -234,13 +236,15 @@ async def refresh_token(
@router.post("/logout")
async def logout(
current_user: User = Depends(get_current_user),
db: AsyncSession = Depends(get_db),
# TODO: 添加认证依赖
):
"""
退出登录
- 清除 refresh token
- 清除 refresh token使其失效
"""
# TODO: 实现退出登录
current_user.refresh_token = None
current_user.refresh_token_expires_at = None
await db.commit()
return {"message": "已退出登录"}

View File

@ -23,8 +23,6 @@ from app.schemas.review import (
ViolationSource,
SoftRiskWarning,
)
from app.services.ai_service import AIServiceFactory
from app.services.ai_client import OpenAICompatibleClient
router = APIRouter(prefix="/videos", tags=["videos"])
@ -205,177 +203,3 @@ async def get_review_result(
violations=violations,
soft_warnings=soft_warnings,
)
# ==================== AI 辅助审核方法 ====================
async def _perform_ai_video_review(
task: ReviewTask,
ai_client: OpenAICompatibleClient,
text_model: str,
vision_model: str,
audio_model: str,
db: AsyncSession,
) -> dict:
"""
使用 AI 执行视频审核
流程:
1. 下载视频
2. ASR 转写
3. 提取关键帧
4. 视觉分析 (竞品 Logo)
5. OCR 字幕
6. 生成报告
"""
violations = []
score = 100
try:
# 更新进度: 开始处理
task.status = DBTaskStatus.PROCESSING
task.progress = 10
task.current_step = "下载视频"
await db.flush()
# TODO: 实际实现需要集成视频处理库
# 1. 下载视频
# video_path = await download_video(task.video_url)
# 2. ASR 转写
task.progress = 30
task.current_step = "语音转写"
await db.flush()
# asr_result = await ai_client.audio_transcription(
# audio_url=task.video_url, # 需要提取音频
# model=audio_model,
# )
# transcript = asr_result.content
# 3. 提取关键帧
task.progress = 50
task.current_step = "提取关键帧"
await db.flush()
# frames = await extract_keyframes(video_path)
# 4. 视觉分析
task.progress = 70
task.current_step = "视觉分析"
await db.flush()
# 检测竞品 Logo
# if task.competitors:
# vision_prompt = f"""
# 分析这些视频截图,检测是否包含以下竞品品牌的 Logo 或标识:
# 竞品列表: {task.competitors}
#
# 如果发现竞品,请返回:
# 1. 竞品名称
# 2. 出现的帧编号
# 3. 置信度 (0-1)
# """
# vision_result = await ai_client.vision_analysis(
# image_urls=frames,
# prompt=vision_prompt,
# model=vision_model,
# )
# 5. 文本综合分析
task.progress = 85
task.current_step = "综合分析"
await db.flush()
# analysis_prompt = f"""
# 作为广告合规审核专家,请分析以下视频脚本内容:
#
# 脚本内容:
# {transcript}
#
# 请检查:
# 1. 是否包含广告法违禁词(最好、第一、最佳等极限词)
# 2. 是否包含虚假功效宣称
# 3. 品牌信息是否正确
#
# 返回 JSON 格式:
# {{"violations": [...], "score": 0-100, "summary": "..."}}
# """
# analysis_result = await ai_client.chat_completion(
# messages=[{"role": "user", "content": analysis_prompt}],
# model=text_model,
# )
# 6. 完成审核
task.progress = 100
task.current_step = "审核完成"
task.status = DBTaskStatus.COMPLETED
task.score = score
task.summary = "审核完成,未发现违规" if not violations else f"发现 {len(violations)} 处违规"
task.violations = [v.model_dump() for v in violations] if violations else []
await db.flush()
return {
"score": score,
"summary": task.summary,
"violations": violations,
}
except Exception as e:
task.status = DBTaskStatus.FAILED
task.error_message = str(e)
await db.flush()
raise
# ==================== 后台任务入口 ====================
async def process_video_review_task(
review_id: str,
tenant_id: str,
db: AsyncSession,
):
"""
处理视频审核任务 Celery 或后台任务调用
"""
# 获取任务
result = await db.execute(
select(ReviewTask).where(
and_(
ReviewTask.id == review_id,
ReviewTask.tenant_id == tenant_id,
)
)
)
task = result.scalar_one_or_none()
if not task:
return
# 获取 AI 客户端
ai_client = await AIServiceFactory.get_client(tenant_id, db)
if not ai_client:
# 没有配置 AI使用规则引擎审核
task.status = DBTaskStatus.COMPLETED
task.score = 100
task.summary = "审核完成(规则引擎)"
task.progress = 100
task.current_step = "审核完成"
await db.flush()
return
# 获取模型配置
config = await AIServiceFactory.get_config(tenant_id, db)
models = config.models
# 执行 AI 审核
await _perform_ai_video_review(
task=task,
ai_client=ai_client,
text_model=models.get("text", "gpt-4o"),
vision_model=models.get("vision", "gpt-4o"),
audio_model=models.get("audio", "whisper-1"),
db=db,
)

View File

@ -1,4 +1,5 @@
"""应用配置"""
import warnings
from pydantic_settings import BaseSettings
from functools import lru_cache
@ -34,9 +35,27 @@ class Settings(BaseSettings):
OSS_BUCKET_NAME: str = "miaosi-files"
OSS_BUCKET_DOMAIN: str = "" # 公开访问域名,如 https://miaosi-files.oss-cn-hangzhou.aliyuncs.com
# 加密密钥
ENCRYPTION_KEY: str = ""
# 文件上传限制
MAX_FILE_SIZE_MB: int = 500 # 最大文件大小 500MB
def __init__(self, **kwargs):
super().__init__(**kwargs)
if self.SECRET_KEY == "your-secret-key-change-in-production":
warnings.warn(
"SECRET_KEY 使用默认值,请在 .env 中设置安全的密钥!",
UserWarning,
stacklevel=2,
)
if not self.ENCRYPTION_KEY:
warnings.warn(
"ENCRYPTION_KEY 未设置API 密钥将无法安全存储!",
UserWarning,
stacklevel=2,
)
class Config:
env_file = ".env"
case_sensitive = True

View File

@ -2,6 +2,7 @@
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from app.config import settings
from app.middleware.rate_limit import RateLimitMiddleware
from app.api import health, auth, upload, scripts, videos, tasks, rules, ai_config, sse, projects, briefs, organizations, dashboard
# 创建应用
@ -22,6 +23,9 @@ app.add_middleware(
allow_headers=["*"],
)
# Rate limiting
app.add_middleware(RateLimitMiddleware, default_limit=60, window_seconds=60)
# 注册路由
app.include_router(health.router, prefix="/api/v1")
app.include_router(auth.router, prefix="/api/v1")

View File

View File

@ -0,0 +1,71 @@
"""
简单的速率限制中间件
基于内存的滑动窗口计数器
"""
import time
from collections import defaultdict
from fastapi import Request, Response
from starlette.middleware.base import BaseHTTPMiddleware
from starlette.responses import JSONResponse
class RateLimitMiddleware(BaseHTTPMiddleware):
"""
速率限制中间件
- 默认: 60 /分钟 per IP
- 登录/注册: 10 /分钟 per IP
"""
def __init__(self, app, default_limit: int = 60, window_seconds: int = 60):
super().__init__(app)
self.default_limit = default_limit
self.window_seconds = window_seconds
self.requests: dict[str, list[float]] = defaultdict(list)
# Stricter limits for auth endpoints
self.strict_paths = {"/api/v1/auth/login", "/api/v1/auth/register"}
self.strict_limit = 10
async def dispatch(self, request: Request, call_next):
client_ip = request.client.host if request.client else "unknown"
path = request.url.path
now = time.time()
# Determine rate limit
if path in self.strict_paths:
key = f"{client_ip}:{path}"
limit = self.strict_limit
else:
key = client_ip
limit = self.default_limit
# Clean old entries
window_start = now - self.window_seconds
self.requests[key] = [t for t in self.requests[key] if t > window_start]
# Check limit
if len(self.requests[key]) >= limit:
return JSONResponse(
status_code=429,
content={"detail": "请求过于频繁,请稍后再试"},
)
# Record request
self.requests[key].append(now)
# Periodic cleanup (every 1000 requests to this key)
if len(self.requests) > 10000:
self._cleanup(now)
response = await call_next(request)
return response
def _cleanup(self, now: float):
"""Clean up expired entries"""
window_start = now - self.window_seconds
expired_keys = [
k for k, v in self.requests.items()
if not v or v[-1] < window_start
]
for k in expired_keys:
del self.requests[k]

View File

@ -87,12 +87,14 @@ def generate_sts_token(
"""
生成 STS 临时凭证需要配置 RAM 角色
注意此方法需要安装 aliyun-python-sdk-sts
果不使用 STS可以使用上面的 generate_upload_policy 方法
当前使用 Policy 签名方式STS 方式为可选增强
需启用 STS请安装 aliyun-python-sdk-sts 并配置 RAM 角色
"""
# TODO: 实现 STS 临时凭证生成
# 需要安装 aliyun-python-sdk-core 和 aliyun-python-sdk-sts
raise NotImplementedError("STS 临时凭证生成暂未实现,请使用 generate_upload_policy")
# 回退到 Policy 签名方式
return generate_upload_policy(
max_size_mb=settings.MAX_FILE_SIZE_MB,
expire_seconds=duration_seconds,
)
def get_file_url(file_key: str) -> str:

1
frontend/.eslintrc.json Normal file
View File

@ -0,0 +1 @@
{"extends":"next/core-web-vitals"}

View File

@ -0,0 +1,44 @@
'use client'
import { useEffect } from 'react'
import { AlertTriangle, RefreshCw, Home } from 'lucide-react'
export default function AgencyError({
error,
reset,
}: {
error: Error & { digest?: string }
reset: () => void
}) {
useEffect(() => {
console.error('Agency section error:', error)
}, [error])
return (
<div className="flex flex-col items-center justify-center h-full min-h-[400px] gap-4">
<div className="w-14 h-14 bg-accent-coral/15 rounded-2xl flex items-center justify-center">
<AlertTriangle className="w-7 h-7 text-accent-coral" />
</div>
<h2 className="text-xl font-semibold text-text-primary"></h2>
<p className="text-text-secondary text-sm max-w-sm text-center">
{error.message || '发生未知错误,请重试'}
</p>
<div className="flex gap-3 mt-2">
<button
onClick={() => window.location.href = '/agency'}
className="flex items-center gap-2 px-4 py-2.5 bg-bg-elevated text-text-secondary rounded-xl text-sm font-medium hover:bg-bg-card transition-colors border border-border-subtle"
>
<Home className="w-4 h-4" />
</button>
<button
onClick={reset}
className="flex items-center gap-2 px-4 py-2.5 bg-accent-indigo text-white rounded-xl text-sm font-medium hover:bg-accent-indigo/90 transition-colors"
>
<RefreshCw className="w-4 h-4" />
</button>
</div>
</div>
)
}

View File

@ -0,0 +1,10 @@
export default function AgencyLoading() {
return (
<div className="flex items-center justify-center h-full min-h-[400px]">
<div className="flex flex-col items-center gap-4">
<div className="w-8 h-8 border-2 border-border-subtle border-t-accent-indigo rounded-full animate-spin" />
<p className="text-text-tertiary text-sm">...</p>
</div>
</div>
)
}

View File

@ -585,7 +585,7 @@ export default function AgencyCompanyPage() {
{isEditing && (
<div className="p-3 rounded-lg bg-accent-indigo/10 border border-accent-indigo/20">
<p className="text-sm text-accent-indigo">
💡 "查询企业"
💡 &ldquo;&rdquo;
</p>
</div>
)}

View File

@ -0,0 +1,44 @@
'use client'
import { useEffect } from 'react'
import { AlertTriangle, RefreshCw, Home } from 'lucide-react'
export default function BrandError({
error,
reset,
}: {
error: Error & { digest?: string }
reset: () => void
}) {
useEffect(() => {
console.error('Brand section error:', error)
}, [error])
return (
<div className="flex flex-col items-center justify-center h-full min-h-[400px] gap-4">
<div className="w-14 h-14 bg-accent-coral/15 rounded-2xl flex items-center justify-center">
<AlertTriangle className="w-7 h-7 text-accent-coral" />
</div>
<h2 className="text-xl font-semibold text-text-primary"></h2>
<p className="text-text-secondary text-sm max-w-sm text-center">
{error.message || '发生未知错误,请重试'}
</p>
<div className="flex gap-3 mt-2">
<button
onClick={() => window.location.href = '/brand'}
className="flex items-center gap-2 px-4 py-2.5 bg-bg-elevated text-text-secondary rounded-xl text-sm font-medium hover:bg-bg-card transition-colors border border-border-subtle"
>
<Home className="w-4 h-4" />
</button>
<button
onClick={reset}
className="flex items-center gap-2 px-4 py-2.5 bg-accent-indigo text-white rounded-xl text-sm font-medium hover:bg-accent-indigo/90 transition-colors"
>
<RefreshCw className="w-4 h-4" />
</button>
</div>
</div>
)
}

View File

@ -0,0 +1,10 @@
export default function BrandLoading() {
return (
<div className="flex items-center justify-center h-full min-h-[400px]">
<div className="flex flex-col items-center gap-4">
<div className="w-8 h-8 border-2 border-border-subtle border-t-accent-indigo rounded-full animate-spin" />
<p className="text-text-tertiary text-sm">...</p>
</div>
</div>
)
}

View File

@ -302,7 +302,7 @@ export default function CreateProjectPage() {
)}
<p className="text-xs text-text-tertiary mt-3">
"代理商管理"
&ldquo;&rdquo;
</p>
</div>

View File

@ -338,7 +338,7 @@ export default function BrandVideoReviewPage() {
} finally {
setLoading(false)
}
}, [taskId])
}, [taskId, toast])
useEffect(() => {
loadTask()

View File

@ -363,7 +363,7 @@ export default function AppealQuotaPage() {
<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 "申请增加"
1 &ldquo;&rdquo;
</span>
</div>
</div>

View File

@ -9,7 +9,7 @@ import {
CheckCircle,
XCircle,
FileText,
Image,
Image as ImageIcon,
Send,
AlertTriangle,
Loader2
@ -422,7 +422,7 @@ export default function AppealDetailPage() {
className="flex items-center gap-3 px-4 py-3 bg-bg-elevated rounded-xl cursor-pointer hover:bg-bg-page transition-colors"
>
{attachment.type === 'image' ? (
<Image className="w-5 h-5 text-accent-indigo" />
<ImageIcon className="w-5 h-5 text-accent-indigo" />
) : (
<FileText className="w-5 h-5 text-accent-indigo" />
)}

View File

@ -7,7 +7,7 @@ import {
Upload,
X,
FileText,
Image,
Image as ImageIcon,
AlertTriangle,
CheckCircle,
Loader2
@ -468,7 +468,7 @@ export default function NewAppealPage() {
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" />
<ImageIcon className="w-4 h-4 text-accent-indigo" />
) : (
<FileText className="w-4 h-4 text-accent-indigo" />
)}

View File

@ -0,0 +1,44 @@
'use client'
import { useEffect } from 'react'
import { AlertTriangle, RefreshCw, Home } from 'lucide-react'
export default function CreatorError({
error,
reset,
}: {
error: Error & { digest?: string }
reset: () => void
}) {
useEffect(() => {
console.error('Creator section error:', error)
}, [error])
return (
<div className="flex flex-col items-center justify-center h-full min-h-[400px] gap-4">
<div className="w-14 h-14 bg-accent-coral/15 rounded-2xl flex items-center justify-center">
<AlertTriangle className="w-7 h-7 text-accent-coral" />
</div>
<h2 className="text-xl font-semibold text-text-primary"></h2>
<p className="text-text-secondary text-sm max-w-sm text-center">
{error.message || '发生未知错误,请重试'}
</p>
<div className="flex gap-3 mt-2">
<button
onClick={() => window.location.href = '/creator'}
className="flex items-center gap-2 px-4 py-2.5 bg-bg-elevated text-text-secondary rounded-xl text-sm font-medium hover:bg-bg-card transition-colors border border-border-subtle"
>
<Home className="w-4 h-4" />
</button>
<button
onClick={reset}
className="flex items-center gap-2 px-4 py-2.5 bg-accent-indigo text-white rounded-xl text-sm font-medium hover:bg-accent-indigo/90 transition-colors"
>
<RefreshCw className="w-4 h-4" />
</button>
</div>
</div>
)
}

View File

@ -0,0 +1,10 @@
export default function CreatorLoading() {
return (
<div className="flex items-center justify-center h-full min-h-[400px]">
<div className="flex flex-col items-center gap-4">
<div className="w-8 h-8 border-2 border-border-subtle border-t-accent-indigo rounded-full animate-spin" />
<p className="text-text-tertiary text-sm">...</p>
</div>
</div>
)
}

47
frontend/app/error.tsx Normal file
View File

@ -0,0 +1,47 @@
'use client'
import { useEffect } from 'react'
export default function Error({
error,
reset,
}: {
error: Error & { digest?: string }
reset: () => void
}) {
useEffect(() => {
console.error('Application error:', error)
}, [error])
return (
<div className="min-h-screen bg-bg-page flex items-center justify-center">
<div className="text-center max-w-md">
<div className="w-16 h-16 bg-accent-coral/15 rounded-2xl flex items-center justify-center mx-auto mb-6">
<svg className="w-8 h-8 text-accent-coral" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
</svg>
</div>
<h2 className="text-2xl font-semibold text-text-primary mb-2">
</h2>
<p className="text-text-secondary mb-8">
</p>
<div className="flex gap-3 justify-center">
<button
onClick={() => window.location.href = '/'}
className="px-6 py-3 bg-bg-elevated text-text-secondary rounded-xl font-medium hover:bg-bg-card transition-colors border border-border-subtle"
>
</button>
<button
onClick={reset}
className="px-6 py-3 bg-accent-indigo text-white rounded-xl font-medium hover:bg-accent-indigo/90 transition-colors"
>
</button>
</div>
</div>
</div>
)
}

10
frontend/app/loading.tsx Normal file
View File

@ -0,0 +1,10 @@
export default function Loading() {
return (
<div className="min-h-screen bg-bg-page flex items-center justify-center">
<div className="flex flex-col items-center gap-4">
<div className="w-10 h-10 border-3 border-border-subtle border-t-accent-indigo rounded-full animate-spin" />
<p className="text-text-tertiary text-sm">...</p>
</div>
</div>
)
}

View File

@ -0,0 +1,23 @@
import Link from 'next/link'
export default function NotFound() {
return (
<div className="min-h-screen bg-bg-page flex items-center justify-center">
<div className="text-center">
<h1 className="text-8xl font-bold text-accent-indigo mb-4">404</h1>
<h2 className="text-2xl font-semibold text-text-primary mb-2">
</h2>
<p className="text-text-secondary mb-8">
访
</p>
<Link
href="/"
className="inline-flex items-center gap-2 px-6 py-3 bg-accent-indigo text-white rounded-xl font-medium hover:bg-accent-indigo/90 transition-colors"
>
</Link>
</div>
</div>
)
}

View File

@ -29,7 +29,8 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(({
id,
...props
}, ref) => {
const inputId = id ?? useId();
const generatedId = useId();
const inputId = id ?? generatedId;
return (
<div className={`${fullWidth ? 'w-full' : ''}`}>