first commit

This commit is contained in:
2026-09-11 01:45:04 +08:00
commit 0a8d60d87f
145 changed files with 40978 additions and 0 deletions
+626
View File
@@ -0,0 +1,626 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第 7 屏 | AI 穿搭推荐 - 纸条AI衣橱</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=PingFang+SC:wght@400;500;600;700&display=swap');
body {
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
background-color: #ECEEF2;
color: #1C1C1E;
margin: 0;
padding: 32px 24px;
-webkit-font-smoothing: antialiased;
}
.device-shell {
width: 375px;
height: 812px;
background-color: #F2F2F7;
border-radius: 44px;
position: relative;
overflow: hidden;
box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.16), 0 0 0 10px #1C1C1E, 0 0 0 12px #2C2C2E;
flex-shrink: 0;
display: flex;
flex-direction: column;
}
.status-bar {
height: 44px;
padding: 12px 20px 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
font-weight: 600;
z-index: 50;
}
.capsule {
height: 32px;
width: 87px;
border: 0.5px solid rgba(0, 0, 0, 0.18);
border-radius: 16px;
background-color: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: space-around;
padding: 0 8px;
}
.capsule-divider {
width: 0.5px;
height: 18px;
background-color: rgba(0, 0, 0, 0.15);
}
.nav-header {
height: 44px;
padding: 0 16px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
.safe-bottom {
padding-bottom: 24px;
}
.hairline-b {
border-bottom: 0.5px solid #E5E5EA;
}
.hairline-t {
border-top: 0.5px solid #E5E5EA;
}
.ios-scroll::-webkit-scrollbar {
display: none;
}
.pulse-glow {
animation: pulseGlow 2.4s ease-in-out infinite;
}
@keyframes pulseGlow {
0%, 100% { transform: scale(1); opacity: 0.85; }
50% { transform: scale(1.04); opacity: 1; filter: drop-shadow(0 8px 16px rgba(0, 122, 255, 0.25)); }
}
.spin-slow {
animation: spin 9s linear infinite;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
</style>
</head>
<body class="min-h-screen flex flex-col items-center justify-start gap-8">
<!-- 页面主画板 Header 标头信息 -->
<header class="w-full max-w-[1580px] flex items-center justify-between px-2 pt-2">
<div>
<div class="flex items-center gap-2.5">
<span class="w-3.5 h-3.5 rounded-full bg-[#007AFF] inline-block shadow-sm"></span>
<h1 class="text-2xl font-bold text-gray-900 tracking-tight">第 7 屏 | AI 穿搭推荐</h1>
<span class="text-xs px-2 py-0.5 rounded-md bg-blue-50 text-[#007AFF] font-medium border border-blue-100">二级页面 · 规范级高保真</span>
<span class="text-xs text-gray-500 font-mono">iPhone 375 × 812 pt · 微信小程序规范</span>
</div>
<p class="text-xs text-gray-500 mt-1">从穿搭页进入,涵盖场景选择半屏弹窗、生成中全屏动效、AI推荐结果页及伴生三态异常与180秒频率保护机制。</p>
</div>
<div class="flex gap-2">
<span class="text-xs font-semibold px-2.5 py-1 bg-white text-gray-700 rounded-full border border-gray-200 shadow-sm">主色:#007AFF</span>
<span class="text-xs font-semibold px-2.5 py-1 bg-white text-[#5856D6] rounded-full border border-gray-200 shadow-sm">辅助:#5856D6 靛蓝</span>
</div>
</header>
<!-- 原型展板主视口:三屏主要阶段横排 (弹窗态 / 生成中 / 推荐结果页) -->
<main class="w-full max-w-[1580px] flex flex-wrap gap-8 justify-center items-start">
<!-- 阶段 1:场景选择半屏弹窗 -->
<div class="flex flex-col items-center gap-3">
<div class="flex items-center gap-2">
<span class="text-xs font-bold px-2.5 py-1 rounded-full bg-white text-gray-800 shadow-sm border border-gray-200">
阶段 1 · 场景选择半屏弹窗 (可跳过)
</span>
</div>
<div class="device-shell">
<!-- 状态栏 -->
<div class="status-bar text-gray-900">
<span>9:41</span>
<div class="flex items-center gap-1.5 text-xs">
<i class="fa-solid fa-signal text-[11px]"></i>
<i class="fa-solid fa-wifi text-[11px]"></i>
<i class="fa-solid fa-battery-full text-[13px]"></i>
</div>
</div>
<!-- 页面底层毛玻璃蒙层 (底层穿搭页背景虚化) -->
<div class="relative flex-1 flex flex-col justify-between overflow-hidden">
<!-- 背景虚化展示已进入AI推荐底页 -->
<div class="p-4 opacity-40 filter blur-[2px] pointer-events-none">
<div class="h-10 flex items-center justify-between mb-4">
<span class="text-lg font-bold">AI 推荐</span>
<div class="capsule scale-90"></div>
</div>
<div class="w-full h-64 bg-white rounded-2xl mb-4 border border-gray-200"></div>
<div class="w-full h-32 bg-white rounded-2xl border border-gray-200"></div>
</div>
<!-- 半透明遮罩蒙层 -->
<div class="absolute inset-0 bg-black/45 backdrop-blur-[1px] transition-all"></div>
<!-- 半屏 ActionSheet 弹窗本体 (微信/iOS 规范圆角与手柄) -->
<div class="absolute bottom-0 inset-x-0 bg-white rounded-t-[24px] shadow-2xl z-20 flex flex-col pt-3 pb-8 px-5">
<!-- 顶部滑动指示条 -->
<div class="w-9 h-1 bg-[#D1D1D6] rounded-full mx-auto mb-3"></div>
<div class="flex items-center justify-between mb-3">
<div>
<h3 class="text-lg font-bold text-gray-900">选择推荐场景</h3>
<p class="text-[12px] text-gray-500 mt-0.5">结合你的衣橱 128 件衣物精准匹配</p>
</div>
<button class="text-[13px] text-[#8E8E93] hover:text-gray-900 px-2 py-1">跳过</button>
</div>
<!-- 两个大卡片单选 -->
<div class="space-y-3 my-2">
<!-- 卡片 1:每日推荐 (默认选中) -->
<div class="p-3.5 rounded-2xl border-2 border-[#007AFF] bg-[#F5F9FF] relative flex items-start justify-between transition-all">
<div class="flex items-start gap-3">
<div class="w-10 h-10 rounded-xl bg-blue-100/80 flex items-center justify-center text-[#007AFF] text-lg mt-0.5">
<i class="fa-solid fa-sparkles"></i>
</div>
<div>
<div class="flex items-center gap-2">
<span class="font-semibold text-gray-950 text-[15px]">每日推荐</span>
<span class="text-[10px] px-1.5 py-0.5 rounded bg-[#007AFF] text-white font-medium">默认</span>
</div>
<p class="text-[12px] text-gray-600 mt-1 leading-relaxed">
按今日白羊座运势、天气与衣橱自动搭配
</p>
</div>
</div>
<div class="w-5 h-5 rounded-full bg-[#007AFF] flex items-center justify-center text-white text-[11px] shadow-sm">
<i class="fa-solid fa-check"></i>
</div>
</div>
<!-- 卡片 2:自定义场景 -->
<div class="p-3.5 rounded-2xl border border-[#E5E5EA] bg-white relative flex flex-col gap-2.5">
<div class="flex items-start justify-between">
<div class="flex items-start gap-3">
<div class="w-10 h-10 rounded-xl bg-gray-100 flex items-center justify-center text-gray-600 text-lg">
<i class="fa-regular fa-compass"></i>
</div>
<div>
<span class="font-semibold text-gray-900 text-[15px]">自定义场景</span>
<p class="text-[12px] text-gray-500 mt-0.5">为特定活动或出行场合量身打造</p>
</div>
</div>
<div class="w-5 h-5 rounded-full border border-gray-300 bg-transparent"></div>
</div>
<!-- 自定义场景输入框 -->
<div class="mt-1">
<div class="relative flex items-center">
<input
type="text"
placeholder="例如:海边度假、周一例会、初次约会"
class="w-full h-10 rounded-xl bg-[#F2F2F7] px-3.5 text-[13px] text-gray-900 placeholder:text-[#8E8E93] focus:outline-none focus:ring-1 focus:ring-[#007AFF] border border-transparent"
/>
<span class="absolute right-3 text-xs text-gray-400"><i class="fa-solid fa-pen-nib"></i></span>
</div>
</div>
</div>
</div>
<!-- 提示与额度说明 -->
<div class="flex items-center justify-between px-1 my-2">
<span class="text-[11px] text-gray-500">
<i class="fa-regular fa-clock-rotate-left mr-1"></i>剩余 AI 推荐额度:<strong class="text-gray-800">5 次</strong>
</span>
<span class="text-[11px] text-blue-600 font-medium">额度说明</span>
</div>
<!-- 底部系统蓝操作主按钮 -->
<button class="w-full h-12 bg-[#007AFF] active:bg-blue-600 text-white font-semibold text-[15px] rounded-[14px] shadow-sm flex items-center justify-center gap-2 mt-1">
<i class="fa-solid fa-wand-magic-sparkles text-sm"></i>
开始生成 (消耗 1 次推荐额度)
</button>
<!-- 底部安全区横条 -->
<div class="w-32 h-1 bg-black rounded-full mx-auto mt-5"></div>
</div>
</div>
</div>
<p class="text-xs text-gray-500 text-center max-w-[340px]">半屏 Sheet 规范:375pt 贴合底边,支持点击遮罩/跳过直接按每日推荐生成。</p>
</div>
<!-- 阶段 2:生成中全屏动效状态页 -->
<div class="flex flex-col items-center gap-3">
<div class="flex items-center gap-2">
<span class="text-xs font-bold px-2.5 py-1 rounded-full bg-white text-[#5856D6] shadow-sm border border-purple-100">
阶段 2 · 生成中全屏动效页
</span>
</div>
<div class="device-shell bg-gradient-to-b from-[#F0F5FF] via-[#F8F9FD] to-[#F2F2F7]">
<!-- 状态栏 -->
<div class="status-bar text-gray-900">
<span>9:41</span>
<div class="flex items-center gap-1.5 text-xs">
<i class="fa-solid fa-signal text-[11px]"></i>
<i class="fa-solid fa-wifi text-[11px]"></i>
<i class="fa-solid fa-battery-full text-[13px]"></i>
</div>
</div>
<!-- 顶部导航条 -->
<div class="nav-header">
<button class="text-[#007AFF] text-base flex items-center gap-1">
<i class="fa-solid fa-chevron-left text-sm"></i>
<span class="text-sm">返回</span>
</button>
<span class="font-semibold text-[17px] text-gray-900">AI 正在搭配</span>
<div class="capsule">
<span class="text-xs tracking-wider text-gray-800 font-bold">···</span>
<div class="capsule-divider"></div>
<i class="fa-regular fa-circle-dot text-[11px] text-gray-800"></i>
</div>
</div>
<!-- 动效主体中央容器 -->
<div class="flex-1 flex flex-col items-center justify-center px-6 relative">
<!-- 装饰性星座星图光环粒子 -->
<div class="absolute w-72 h-72 rounded-full border border-blue-200/60 spin-slow pointer-events-none">
<span class="absolute -top-1.5 left-1/2 w-3 h-3 rounded-full bg-[#007AFF]/40"></span>
<span class="absolute bottom-6 right-6 w-2 h-2 rounded-full bg-[#5856D6]/50"></span>
<span class="absolute top-16 left-4 w-2 h-2 rounded-full bg-blue-300"></span>
</div>
<!-- 中央衣物线稿轮播与光晕 -->
<div class="relative w-44 h-44 rounded-3xl bg-white shadow-xl flex items-center justify-center p-6 border border-blue-100 pulse-glow">
<!-- 轮播线稿模拟:开衫、T恤、牛仔裤交错层叠 -->
<svg class="w-24 h-24 stroke-[#007AFF] stroke-[1.8] fill-none" viewBox="0 0 100 100">
<!-- 线条衣架与上装轮廓 -->
<path d="M 50 15 Q 50 10 46 8 A 5 5 0 0 0 42 16 L 50 22 L 78 35 L 70 48 L 62 44 L 62 82 L 38 82 L 38 44 L 30 48 L 22 35 Z" stroke-linejoin="round" stroke-linecap="round"/>
<line x1="50" y1="22" x2="50" y2="82" stroke-dasharray="3 3" stroke="#8E8E93" />
<!-- 星芒小图标 -->
<circle cx="76" cy="20" r="2.5" fill="#5856D6" stroke="none"/>
<path d="M 76 14 L 77.5 18.5 L 82 20 L 77.5 21.5 L 76 26 L 74.5 21.5 L 70 20 L 74.5 18.5 Z" fill="#5856D6" stroke="none"/>
</svg>
<!-- 悬浮小气泡标签 -->
<span class="absolute -bottom-3 bg-gradient-to-r from-[#007AFF] to-[#5856D6] text-white text-[11px] font-medium px-3 py-1 rounded-full shadow-md">
<i class="fa-solid fa-sparkles mr-1 text-[10px]"></i>智能匹配中
</span>
</div>
<!-- 引导提示文字 -->
<div class="text-center mt-8 space-y-2">
<h3 class="text-xl font-bold text-gray-900 tracking-tight">AI 正在为你搭配…</h3>
<p class="text-[13px] text-gray-500 max-w-[260px] leading-relaxed">
结合今日<span class="text-[#007AFF] font-medium">白羊座</span>运势与你的 <span class="font-semibold text-gray-800">128</span> 件衣物
</p>
</div>
<!-- 进度呼吸小点 -->
<div class="flex items-center gap-1.5 mt-6">
<span class="w-2 h-2 rounded-full bg-[#007AFF] animate-ping"></span>
<span class="w-2 h-2 rounded-full bg-[#007AFF]/60"></span>
<span class="w-2 h-2 rounded-full bg-[#007AFF]/30"></span>
</div>
<!-- 耗时温和说明 -->
<div class="mt-8 bg-white/70 backdrop-blur-sm border border-gray-200/80 px-4 py-2 rounded-full flex items-center gap-2">
<i class="fa-regular fa-clock text-xs text-gray-400"></i>
<span class="text-[11px] text-gray-500">预计耗时 2~3 秒,正在分析色彩和谐度</span>
</div>
</div>
<!-- 底部安全区 -->
<div class="safe-bottom flex justify-center">
<div class="w-32 h-1 bg-black/80 rounded-full"></div>
</div>
</div>
<p class="text-xs text-gray-500 text-center max-w-[340px]">生成中全屏态:中央矢量线稿交替,融合星座运势文案,增强感知价值。</p>
</div>
<!-- 阶段 3:推荐完成结果页 (标准态) -->
<div class="flex flex-col items-center gap-3">
<div class="flex items-center gap-2">
<span class="text-xs font-bold px-2.5 py-1 rounded-full bg-[#007AFF] text-white shadow-sm">
阶段 3 · AI 推荐结果页 (核心态)
</span>
</div>
<div class="device-shell">
<!-- 状态栏 -->
<div class="status-bar text-gray-900">
<span>9:41</span>
<div class="flex items-center gap-1.5 text-xs">
<i class="fa-solid fa-signal text-[11px]"></i>
<i class="fa-solid fa-wifi text-[11px]"></i>
<i class="fa-solid fa-battery-full text-[13px]"></i>
</div>
</div>
<!-- 顶部二级导航栏 -->
<div class="nav-header hairline-b bg-white/80 backdrop-blur-md">
<button class="text-[#007AFF] text-base flex items-center gap-1">
<i class="fa-solid fa-chevron-left text-sm"></i>
<span class="text-sm font-normal">返回</span>
</button>
<div class="flex items-center gap-1.5">
<span class="font-semibold text-[17px] text-gray-900">AI 穿搭推荐</span>
<!-- 待保存标签 -->
<span class="text-[10px] bg-amber-50 text-amber-700 font-medium px-1.5 py-0.5 rounded border border-amber-200">
待保存
</span>
</div>
<div class="capsule">
<span class="text-xs tracking-wider text-gray-800 font-bold">···</span>
<div class="capsule-divider"></div>
<i class="fa-regular fa-circle-dot text-[11px] text-gray-800"></i>
</div>
</div>
<!-- 页面滚动内容区 -->
<div class="flex-1 overflow-y-auto ios-scroll pb-24">
<!-- 1. 顶部推荐组合大幅拼图 (4~6 件衣物拼贴) -->
<div class="p-4">
<div class="w-full h-56 bg-white rounded-2xl border border-gray-200/80 shadow-sm relative overflow-hidden p-3 flex flex-col justify-between">
<!-- 顶部角标:AI推荐徽标与星座标签 -->
<div class="flex items-center justify-between z-10">
<span class="text-[11px] px-2.5 py-1 rounded-full bg-[#5856D6]/10 text-[#5856D6] font-semibold flex items-center gap-1">
<i class="fa-solid fa-wand-magic-sparkles text-[10px]"></i>AI 专属运势匹配
</span>
<span class="text-[11px] text-gray-500 font-mono bg-gray-100/90 px-2 py-0.5 rounded-md">
4 件单品组合
</span>
</div>
<!-- 拼图式线稿排列 (4件代表:米白针织开衫、白T、直筒牛仔裤、乐福鞋) -->
<div class="grid grid-cols-4 gap-2 items-center my-auto px-1">
<!-- 单品 1:米白针织开衫 -->
<div class="h-28 bg-[#F8F9FA] rounded-xl border border-gray-100 flex flex-col items-center justify-center p-1.5 transform hover:-translate-y-0.5 transition-all">
<svg class="w-12 h-12 stroke-[#007AFF] stroke-[1.6] fill-none" viewBox="0 0 64 64">
<path d="M14 18 L24 12 L40 12 L50 18 L58 32 L48 36 L44 26 L44 54 L20 54 L20 26 L16 36 L6 32 Z" stroke-linejoin="round"/>
<line x1="32" y1="12" x2="32" y2="54" stroke="#8E8E93" stroke-width="1.2"/>
</svg>
<span class="text-[10px] text-gray-700 font-medium mt-1 truncate w-full text-center">米白开衫</span>
</div>
<!-- 单品 2:基础纯棉T恤 -->
<div class="h-28 bg-[#F8F9FA] rounded-xl border border-gray-100 flex flex-col items-center justify-center p-1.5">
<svg class="w-12 h-12 stroke-[#007AFF] stroke-[1.6] fill-none" viewBox="0 0 64 64">
<path d="M16 16 L24 12 Q32 18 40 12 L48 16 L56 28 L46 32 L42 24 L42 54 L22 54 L22 24 L18 32 L8 28 Z" stroke-linejoin="round"/>
</svg>
<span class="text-[10px] text-gray-700 font-medium mt-1 truncate w-full text-center">白色纯棉T</span>
</div>
<!-- 单品 3:直筒牛仔裤 -->
<div class="h-28 bg-[#F8F9FA] rounded-xl border border-gray-100 flex flex-col items-center justify-center p-1.5">
<svg class="w-12 h-12 stroke-[#007AFF] stroke-[1.6] fill-none" viewBox="0 0 64 64">
<path d="M18 10 L46 10 L48 54 L36 54 L32 26 L28 54 L16 54 Z" stroke-linejoin="round"/>
<line x1="32" y1="10" x2="32" y2="22" stroke="#8E8E93" stroke-width="1.2"/>
</svg>
<span class="text-[10px] text-gray-700 font-medium mt-1 truncate w-full text-center">直筒牛仔裤</span>
</div>
<!-- 单品 4:乐福鞋 -->
<div class="h-28 bg-[#F8F9FA] rounded-xl border border-gray-100 flex flex-col items-center justify-center p-1.5">
<svg class="w-12 h-12 stroke-[#007AFF] stroke-[1.6] fill-none" viewBox="0 0 64 64">
<ellipse cx="32" cy="38" rx="20" ry="10" stroke-linejoin="round"/>
<path d="M14 38 Q22 24 38 28 Q48 30 50 38" />
</svg>
<span class="text-[10px] text-gray-700 font-medium mt-1 truncate w-full text-center">皮质乐福鞋</span>
</div>
</div>
<!-- 底部浅灰标签 -->
<div class="text-right">
<span class="text-[10px] text-gray-400">点击单品可查看衣物详情</span>
</div>
</div>
</div>
<!-- 2. AI 生成的标题与搭配说明卡片 -->
<div class="px-4 mb-3">
<div class="bg-white rounded-2xl p-4 border border-gray-200/80 shadow-sm space-y-2.5">
<div class="flex items-center justify-between">
<h2 class="text-lg font-bold text-gray-950 tracking-tight">晴日轻复古通勤组合</h2>
<span class="text-xs px-2.5 py-0.5 rounded-full bg-blue-50 text-[#007AFF] font-medium border border-blue-100">
通勤
</span>
</div>
<!-- 运势与搭配建议正文 -->
<div class="bg-[#F9F9FB] rounded-xl p-3 border border-gray-100 text-[13px] leading-relaxed text-gray-700">
<div class="flex items-center gap-1.5 text-amber-500 text-xs font-semibold mb-1">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-regular fa-star text-gray-300"></i>
<span class="text-gray-700 font-medium ml-1">今日综合运势 4 星</span>
</div>
<p>适合以<strong class="text-gray-900 font-medium">米白针织开衫</strong>搭配<strong class="text-gray-900 font-medium">直筒牛仔裤</strong>,清爽又有层次,兼顾室内空调温度与户外舒适度。</p>
</div>
<div class="flex items-center justify-between text-[11px] text-gray-400 pt-1">
<span>生成时间:今日 09:41</span>
<span>风格:法式轻复古 · 简约</span>
</div>
</div>
</div>
<!-- 3. 「推荐单品」横向滚动列表 -->
<div class="px-4 mb-4">
<div class="flex items-center justify-between mb-2">
<span class="text-[13px] font-bold text-gray-800">推荐单品清单 (4)</span>
<span class="text-[11px] text-gray-400">向右滑动查看</span>
</div>
<div class="flex gap-2.5 overflow-x-auto ios-scroll pb-1">
<!-- 单品卡 1 -->
<div class="flex-shrink-0 w-36 bg-white rounded-xl p-2.5 border border-gray-200 shadow-sm flex items-center gap-2.5">
<div class="w-11 h-11 rounded-lg bg-[#F2F2F7] flex items-center justify-center flex-shrink-0">
<i class="fa-solid fa-vest text-lg text-[#007AFF]"></i>
</div>
<div class="overflow-hidden">
<p class="text-[12px] font-bold text-gray-900 truncate">米白针织开衫</p>
<p class="text-[10px] text-gray-500 truncate">上装 · 针织</p>
</div>
</div>
<!-- 单品卡 2 -->
<div class="flex-shrink-0 w-36 bg-white rounded-xl p-2.5 border border-gray-200 shadow-sm flex items-center gap-2.5">
<div class="w-11 h-11 rounded-lg bg-[#F2F2F7] flex items-center justify-center flex-shrink-0">
<i class="fa-solid fa-shirt text-lg text-[#007AFF]"></i>
</div>
<div class="overflow-hidden">
<p class="text-[12px] font-bold text-gray-900 truncate">白色纯棉T恤</p>
<p class="text-[10px] text-gray-500 truncate">上装 · T恤</p>
</div>
</div>
<!-- 单品卡 3 -->
<div class="flex-shrink-0 w-36 bg-white rounded-xl p-2.5 border border-gray-200 shadow-sm flex items-center gap-2.5">
<div class="w-11 h-11 rounded-lg bg-[#F2F2F7] flex items-center justify-center flex-shrink-0">
<i class="fa-solid fa-socks text-lg text-[#007AFF]"></i>
</div>
<div class="overflow-hidden">
<p class="text-[12px] font-bold text-gray-900 truncate">复古高腰牛仔</p>
<p class="text-[10px] text-gray-500 truncate">下装 · 牛仔裤</p>
</div>
</div>
</div>
</div>
</div>
<!-- 底部固定操作栏 (安全区上方,白底 + hairline-t) -->
<div class="absolute bottom-0 inset-x-0 bg-white hairline-t px-4 pt-2.5 pb-7 z-30 shadow-[0_-4px_16px_rgba(0,0,0,0.04)]">
<div class="flex gap-2.5">
<!-- 次按钮:换一套 -->
<button class="flex-1 h-11 rounded-xl border border-[#007AFF] bg-white text-[#007AFF] font-semibold text-[14px] active:bg-blue-50 flex items-center justify-center gap-1.5 transition-all">
<i class="fa-solid fa-rotate text-xs"></i>
换一套
</button>
<!-- 主按钮:保存到我的穿搭 -->
<button class="flex-[1.6] h-11 rounded-xl bg-[#007AFF] text-white font-semibold text-[14px] active:bg-blue-600 flex items-center justify-center gap-1.5 shadow-sm">
<i class="fa-solid fa-bookmark text-xs"></i>
保存到我的穿搭
</button>
</div>
<!-- 额度与180秒频控说明小字 -->
<p class="text-center text-[10px] text-[#8E8E93] mt-2 font-mono">
换一套将再消耗 1 次推荐额度 · 受 180 秒频控保护
</p>
<div class="w-32 h-1 bg-black rounded-full mx-auto mt-2"></div>
</div>
</div>
<p class="text-xs text-gray-500 text-center max-w-[340px]">结果页:顶部大拼图 + 4星运势推荐语 + 单品横滑 + 底部固定双操作栏。</p>
</div>
</main>
<!-- 规范与异常态配套画板 (三种异常态 + 业务规则说明) -->
<section class="w-full max-w-[1580px] bg-white rounded-3xl p-6 shadow-sm border border-gray-200 mt-4">
<div class="flex items-center justify-between mb-5 border-b border-gray-100 pb-3">
<div class="flex items-center gap-2">
<span class="w-2.5 h-2.5 rounded-full bg-amber-500"></span>
<h2 class="text-lg font-bold text-gray-900">第 7 屏伴生交互状态与三种异常态规范</h2>
</div>
<span class="text-xs text-gray-400">微信小程序异常设计规范 (Empty States & Alerts)</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- 异常态 1:衣橱为空或无可用衣物 -->
<div class="bg-[#F9F9FB] rounded-2xl p-5 border border-gray-200 flex flex-col justify-between">
<div>
<div class="flex items-center justify-between mb-3">
<span class="text-xs font-bold text-gray-700 bg-white px-2 py-0.5 rounded border border-gray-200">异常态 1 · 缺少素材</span>
<span class="text-[11px] text-amber-600 font-medium">前置校验拦截</span>
</div>
<!-- 插画与空态内容 -->
<div class="text-center py-6">
<div class="w-16 h-16 rounded-full bg-blue-50 text-[#007AFF] flex items-center justify-center mx-auto mb-3 text-2xl">
<i class="fa-light fa-shirt"></i>
</div>
<h4 class="text-base font-bold text-gray-900">还没有可用衣物</h4>
<p class="text-xs text-gray-500 mt-1 max-w-[220px] mx-auto leading-relaxed">
先上传几件处理成功的衣物吧,AI 至少需要 2~3 件单品才能为您搭配
</p>
</div>
</div>
<button class="w-full h-10 bg-[#007AFF] text-white text-xs font-semibold rounded-xl active:bg-blue-600 shadow-sm flex items-center justify-center gap-1.5">
<i class="fa-solid fa-plus text-xs"></i>
去上传衣物
</button>
</div>
<!-- 异常态 2:额度不足 -->
<div class="bg-[#F9F9FB] rounded-2xl p-5 border border-gray-200 flex flex-col justify-between">
<div>
<div class="flex items-center justify-between mb-3">
<span class="text-xs font-bold text-gray-700 bg-white px-2 py-0.5 rounded border border-gray-200">异常态 2 · 商业化额度</span>
<span class="text-[11px] text-rose-500 font-medium">弹窗 Alert 态</span>
</div>
<!-- 模拟 iOS Alert 居中弹窗卡片 -->
<div class="bg-white rounded-2xl p-4 border border-gray-200 shadow-md text-center my-3">
<div class="w-10 h-10 rounded-full bg-rose-50 text-rose-500 flex items-center justify-center mx-auto mb-2 text-lg">
<i class="fa-solid fa-gem"></i>
</div>
<h5 class="text-sm font-bold text-gray-900">AI 推荐额度不足</h5>
<p class="text-[11px] text-gray-500 mt-1">
本月免费推荐额度已用完。开通会员或购买加油包,解锁无限次 AI 专属穿搭灵感。
</p>
<div class="flex gap-2 mt-4">
<button class="flex-1 h-8 rounded-lg bg-gray-100 text-gray-700 text-xs font-medium">取消</button>
<button class="flex-1 h-8 rounded-lg bg-[#007AFF] text-white text-xs font-medium">去购买</button>
</div>
</div>
</div>
<p class="text-[11px] text-gray-400 text-center">符合 Apple IAP / 微信小程序虚拟支付合规指引</p>
</div>
<!-- 异常态 3:请求过于频繁 (180秒并发频控) -->
<div class="bg-[#F9F9FB] rounded-2xl p-5 border border-gray-200 flex flex-col justify-between">
<div>
<div class="flex items-center justify-between mb-3">
<span class="text-xs font-bold text-gray-700 bg-white px-2 py-0.5 rounded border border-gray-200">异常态 3 · 180秒频控保护</span>
<span class="text-[11px] text-blue-600 font-medium">防抖 & HTTP 429</span>
</div>
<!-- 模拟 Toast 轻提示与按钮禁用态 -->
<div class="my-4 space-y-3">
<!-- iOS Toast 浮层 -->
<div class="bg-black/80 text-white rounded-full px-4 py-2 flex items-center gap-2 shadow-lg mx-auto w-fit">
<i class="fa-solid fa-hourglass-half text-amber-400 text-xs"></i>
<span class="text-xs">正在生成中,请稍候 (倒计时 142s)</span>
</div>
<!-- 禁用按钮样式展示 -->
<div class="space-y-1.5 pt-2">
<button disabled class="w-full h-10 rounded-xl bg-gray-100 text-gray-400 text-xs font-medium cursor-not-allowed border border-gray-200 flex items-center justify-center gap-1.5">
<i class="fa-solid fa-lock text-[10px]"></i>
换一套 (冷冻期中)
</button>
<p class="text-[10px] text-gray-400 text-center">上一套生成后 180s 内点击不向后端发起请求,仅轻提示</p>
</div>
</div>
</div>
<div class="bg-blue-50/70 rounded-xl p-2.5 border border-blue-100 text-[11px] text-blue-800">
<strong>保存交互规范:</strong>点击「保存到我的穿搭」后弹出轻提示「已保存到我的穿搭」,并平滑跳转至穿搭详情,标签由「待保存」变为「已保存」。
</div>
</div>
</div>
</section>
</body>
</html>