zyc
ffe92f7b15
- web/: React + Vite + TypeScript 前端 - backend/: Django + DRF + SimpleJWT 后端 - prototype/: HTML 设计原型 - docs/: PRD 和设计评审文档 - test: 单元测试 + E2E 极限测试
225 lines
10 KiB
HTML
225 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>即梦 Clone — 原型导航</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
font-family: 'Space Grotesk', 'Noto Sans SC', system-ui, sans-serif;
|
|
background: #0a0a0f;
|
|
color: #fff;
|
|
min-height: 100vh;
|
|
}
|
|
.card {
|
|
background: #16161e;
|
|
border: 1px solid #2a2a38;
|
|
border-radius: 16px;
|
|
padding: 28px;
|
|
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
display: block;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.card::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(135deg, rgba(0,184,230,0.05) 0%, transparent 60%);
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
}
|
|
.card:hover {
|
|
border-color: #00b8e6;
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 12px 40px rgba(0,184,230,0.1);
|
|
}
|
|
.card:hover::before { opacity: 1; }
|
|
.tag {
|
|
display: inline-block;
|
|
padding: 3px 10px;
|
|
border-radius: 6px;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.section-label {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 1.5px;
|
|
text-transform: uppercase;
|
|
color: #4a4a5a;
|
|
margin-bottom: 12px;
|
|
padding-left: 4px;
|
|
}
|
|
@keyframes fadeUp {
|
|
from { opacity: 0; transform: translateY(16px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.animate-in { animation: fadeUp 0.5s ease-out forwards; opacity: 0; }
|
|
.d1 { animation-delay: 0.05s; }
|
|
.d2 { animation-delay: 0.1s; }
|
|
.d3 { animation-delay: 0.15s; }
|
|
.d4 { animation-delay: 0.2s; }
|
|
.d5 { animation-delay: 0.25s; }
|
|
.d6 { animation-delay: 0.3s; }
|
|
.d7 { animation-delay: 0.35s; }
|
|
</style>
|
|
</head>
|
|
<body class="p-8">
|
|
<div class="max-w-3xl mx-auto">
|
|
|
|
<!-- Header -->
|
|
<div class="mb-12 pt-8 animate-in">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<svg width="36" height="36" viewBox="0 0 28 28" fill="none">
|
|
<path d="M4 8L14 2L24 8V20L14 26L4 20V8Z" fill="#00b8e6" opacity="0.9"/>
|
|
<path d="M14 2L24 8L14 14L4 8L14 2Z" fill="#33ccf0"/>
|
|
</svg>
|
|
<h1 class="text-3xl font-bold tracking-tight">即梦 Clone</h1>
|
|
</div>
|
|
<p class="text-[#5a5a6a] text-base leading-relaxed max-w-lg">
|
|
AI 视频生成平台 — Phase 3 可交互原型（管理后台 + 用户个人中心）
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Phase 1: Core -->
|
|
<div class="mb-8">
|
|
<div class="section-label animate-in d1">Phase 1 — 核心功能</div>
|
|
<div class="space-y-4">
|
|
<a href="video-generation.html" class="card group animate-in d1">
|
|
<div class="relative z-10">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-xl bg-[#00b8e6]/10 flex items-center justify-center">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#00b8e6" stroke-width="2"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-lg font-semibold text-white group-hover:text-[#00b8e6] transition-colors">视频生成页</h2>
|
|
<p class="text-xs text-[#5a5a6a]">/</p>
|
|
</div>
|
|
</div>
|
|
<span class="tag bg-[#00b8e6]/10 text-[#00b8e6]">P0 核心页面</span>
|
|
</div>
|
|
<p class="text-[#8a8a9a] text-sm leading-relaxed mb-3">
|
|
完整的 InputBar 交互原型，包含全能参考与首尾帧两种创作模式
|
|
</p>
|
|
<div class="flex gap-2 flex-wrap">
|
|
<span class="tag bg-white/5 text-[#8a8a9a]">全能参考</span>
|
|
<span class="tag bg-white/5 text-[#8a8a9a]">首尾帧</span>
|
|
<span class="tag bg-white/5 text-[#8a8a9a]">文件上传</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Phase 3: Admin -->
|
|
<div class="mb-8">
|
|
<div class="section-label animate-in d2">Phase 3 — 管理后台</div>
|
|
<div class="grid grid-cols-2 gap-4 max-sm:grid-cols-1">
|
|
<a href="admin-dashboard.html" class="card group animate-in d2">
|
|
<div class="relative z-10">
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<div class="w-9 h-9 rounded-lg bg-[#a78bfa]/10 flex items-center justify-center">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-base font-semibold text-white group-hover:text-[#a78bfa] transition-colors">仪表盘</h2>
|
|
<p class="text-xs text-[#5a5a6a]">/admin/dashboard</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-[#8a8a9a] text-sm leading-relaxed">统计卡片、消费趋势图、排行榜</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="admin-users.html" class="card group animate-in d3">
|
|
<div class="relative z-10">
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<div class="w-9 h-9 rounded-lg bg-[#34d399]/10 flex items-center justify-center">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#34d399" stroke-width="2"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/></svg>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-base font-semibold text-white group-hover:text-[#34d399] transition-colors">用户管理</h2>
|
|
<p class="text-xs text-[#5a5a6a]">/admin/users</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-[#8a8a9a] text-sm leading-relaxed">用户列表、配额编辑、状态管理</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="admin-records.html" class="card group animate-in d4">
|
|
<div class="relative z-10">
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<div class="w-9 h-9 rounded-lg bg-[#fbbf24]/10 flex items-center justify-center">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fbbf24" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-base font-semibold text-white group-hover:text-[#fbbf24] transition-colors">消费记录</h2>
|
|
<p class="text-xs text-[#5a5a6a]">/admin/records</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-[#8a8a9a] text-sm leading-relaxed">消费明细、时间筛选、导出 CSV</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="admin-settings.html" class="card group animate-in d5">
|
|
<div class="relative z-10">
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<div class="w-9 h-9 rounded-lg bg-[#f87171]/10 flex items-center justify-center">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#f87171" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9"/></svg>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-base font-semibold text-white group-hover:text-[#f87171] transition-colors">系统设置</h2>
|
|
<p class="text-xs text-[#5a5a6a]">/admin/settings</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-[#8a8a9a] text-sm leading-relaxed">全局配额、系统公告管理</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Phase 3: User -->
|
|
<div class="mb-8">
|
|
<div class="section-label animate-in d6">Phase 3 — 用户端</div>
|
|
<div class="space-y-4">
|
|
<a href="user-profile.html" class="card group animate-in d6">
|
|
<div class="relative z-10">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-xl bg-[#00b8e6]/10 flex items-center justify-center">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#00b8e6" stroke-width="2"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-lg font-semibold text-white group-hover:text-[#00b8e6] transition-colors">个人中心</h2>
|
|
<p class="text-xs text-[#5a5a6a]">/profile</p>
|
|
</div>
|
|
</div>
|
|
<span class="tag bg-[#34d399]/10 text-[#34d399]">Phase 3 新增</span>
|
|
</div>
|
|
<p class="text-[#8a8a9a] text-sm leading-relaxed mb-3">
|
|
消费概览（环形进度条）、消费趋势迷你图、消费记录列表、配额警告提示
|
|
</p>
|
|
<div class="flex gap-2 flex-wrap">
|
|
<span class="tag bg-white/5 text-[#8a8a9a]">环形图</span>
|
|
<span class="tag bg-white/5 text-[#8a8a9a]">Sparkline</span>
|
|
<span class="tag bg-white/5 text-[#8a8a9a]">消费记录</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="mt-16 pt-8 border-t border-[#1a1a24] text-center animate-in d7">
|
|
<p class="text-[#3a3a4a] text-xs">Jimeng Clone Prototype v3.0 · Phase 3 管理后台 + 用户个人中心</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|