Files
zt-closet-wxmini-frontend/stitch_ai_ui/9/code.html
T
2026-09-11 01:45:04 +08:00

669 lines
35 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第9屏 衣柜分享(全流程画板)</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&family=SF+Pro+Display:wght@400;500;600;700&display=swap');
body {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
background-color: #ECEEF2;
color: #1C1C1E;
-webkit-font-smoothing: antialiased;
}
.mock-screen {
width: 375px;
height: 812px;
background-color: #F2F2F7;
border-radius: 44px;
position: relative;
overflow: hidden;
box-shadow: 0 20px 40px -10px rgba(0,0,0,0.12), 0 0 0 10px #1E1E1E, 0 0 0 11px #D1D5DB;
flex-shrink: 0;
}
.status-bar {
height: 44px;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
font-weight: 600;
color: #000;
z-index: 50;
}
.wechat-nav {
height: 44px;
padding: 0 16px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
background: #F2F2F7;
}
.nav-capsule {
width: 87px;
height: 32px;
background: rgba(255, 255, 255, 0.7);
border: 0.5px solid rgba(0, 0, 0, 0.15);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.home-indicator {
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
width: 134px;
height: 5px;
background-color: #1C1C1E;
border-radius: 100px;
z-index: 50;
}
.hairline-b {
border-bottom: 0.5px solid #E5E5EA;
}
.hairline-t {
border-top: 0.5px solid #E5E5EA;
}
.cloth-grid-item {
aspect-ratio: 1/1;
background-color: #F2F2F7;
border-radius: 12px;
position: relative;
overflow: hidden;
}
.badge-corner {
position: absolute;
top: 0;
right: 0;
background: #8E8E93;
color: #fff;
font-size: 10px;
font-weight: 600;
padding: 3px 8px;
border-bottom-left-radius: 8px;
}
</style>
</head>
<body class="p-8 md:p-12 flex flex-col items-center">
<!-- Header / Meta Bar -->
<header class="w-full max-w-[1280px] bg-white rounded-3xl p-7 mb-10 shadow-sm border border-slate-200/80">
<div class="flex flex-wrap items-center justify-between gap-4">
<div>
<div class="flex items-center gap-3">
<span class="w-3.5 h-3.5 rounded-full bg-[#007AFF] inline-block shadow-sm shadow-blue-400"></span>
<h1 class="text-2xl font-bold tracking-tight text-gray-900">第 9 屏 | 衣柜分享( 3 个全状态核心画板 )</h1>
<span class="bg-blue-50 text-[#007AFF] text-xs font-semibold px-2.5 py-1 rounded-full border border-blue-100">微信小程序二级页面 · 375 × 812 pt</span>
</div>
<p class="text-xs text-gray-500 mt-2 leading-relaxed">
规范约束:主色 <span class="font-mono text-gray-700 font-semibold">#007AFF</span> · 背景底色 <span class="font-mono text-gray-700 font-semibold">#F2F2F7</span> · 纯白卡片圆角 16pt · 0.5px 发丝分割线 · 严格区分属主与访客权限 · 包含有效期面板、分享预览与失效态。
</p>
</div>
<div class="flex items-center gap-3 text-xs font-medium text-gray-600 bg-gray-50 p-2.5 rounded-2xl border border-gray-100">
<span class="flex items-center gap-1.5"><i class="fa-solid fa-layer-group text-[#007AFF]"></i> 3 核心画板</span>
<span class="text-gray-300">|</span>
<span class="flex items-center gap-1.5"><i class="fa-solid fa-clock text-amber-500"></i> 有效期面板</span>
<span class="text-gray-300">|</span>
<span class="flex items-center gap-1.5"><i class="fa-solid fa-share-nodes text-emerald-500"></i> 小程序分享卡</span>
</div>
</div>
</header>
<!-- Screens Container -->
<main class="w-full max-w-[1280px] flex flex-row flex-wrap justify-center gap-10">
<!-- ========================================== -->
<!-- ① 画板 1: 「衣柜分享 - 我的分享」列表页 -->
<!-- ========================================== -->
<div class="flex flex-col items-center">
<div class="flex items-center gap-2 mb-3">
<span class="w-2.5 h-2.5 rounded-full bg-[#007AFF]"></span>
<h2 class="text-sm font-bold text-gray-800">① 衣柜分享 - 我的分享</h2>
<span class="text-xs text-gray-400 font-medium">列表管理 · 正常/过期/取消全态</span>
</div>
<div class="mock-screen flex flex-col">
<!-- iOS Status Bar -->
<div class="status-bar">
<span>9:41</span>
<div class="flex items-center gap-1.5 text-xs">
<i class="fa-solid fa-signal text-[11px]"></i>
<span class="font-mono text-[10px]">5G</span>
<i class="fa-solid fa-battery-full text-[13px]"></i>
</div>
</div>
<!-- WeChat Navigation Bar -->
<div class="wechat-nav hairline-b">
<div class="flex items-center gap-1 text-[#007AFF] text-[15px] font-medium active:opacity-60 cursor-pointer">
<i class="fa-solid fa-chevron-left text-[14px]"></i>
<span>我的</span>
</div>
<span class="text-[17px] font-semibold text-gray-900 absolute left-1/2 -translate-x-1/2">衣柜分享</span>
<div class="nav-capsule">
<span class="text-[11px] text-gray-700"><i class="fa-solid fa-ellipsis"></i></span>
<span class="w-[0.5px] h-3 bg-gray-300"></span>
<span class="w-2.5 h-2.5 rounded-full border-[1.5px] border-gray-700"></span>
</div>
</div>
<!-- Screen Content Scroll Area -->
<div class="flex-1 overflow-y-auto px-4 pt-3 pb-20">
<!-- Top Action / Quota Banner -->
<div class="flex items-center justify-between mb-3 bg-white p-3 rounded-2xl border border-gray-100 shadow-sm">
<div>
<div class="text-[12px] font-semibold text-gray-800">衣柜分享额度</div>
<div class="text-[10px] text-gray-400 mt-0.5">当前剩余 <span class="text-[#007AFF] font-bold font-mono">4</span> 次分享</div>
</div>
<button class="px-3 py-1.5 border border-[#007AFF] text-[#007AFF] rounded-full text-[12px] font-semibold flex items-center gap-1 hover:bg-blue-50 active:scale-95 transition-all">
<i class="fa-solid fa-plus text-[10px]"></i>
<span>新建分享</span>
</button>
</div>
<div class="text-[12px] font-semibold text-gray-500 mb-2 px-1">分享记录 (3)</div>
<!-- List Item 1: 正常进行中态 -->
<div class="bg-white rounded-[16px] p-3.5 mb-3 border border-gray-100 shadow-sm relative overflow-hidden">
<div class="flex gap-3">
<!-- Left 2x2 Preview Grid -->
<div class="w-[76px] h-[76px] rounded-xl bg-[#F2F2F7] grid grid-cols-2 gap-1 p-1 flex-shrink-0">
<div class="bg-white rounded-md flex items-center justify-center text-gray-300 text-[10px]">
<i class="fa-solid fa-shirt"></i>
</div>
<div class="bg-white rounded-md flex items-center justify-center text-gray-300 text-[10px]">
<i class="fa-solid fa-vest"></i>
</div>
<div class="bg-white rounded-md flex items-center justify-center text-gray-300 text-[10px]">
<i class="fa-solid fa-socks"></i>
</div>
<div class="bg-white rounded-md flex items-center justify-center text-gray-300 text-[10px]">
<i class="fa-solid fa-mitten"></i>
</div>
</div>
<!-- Right Meta -->
<div class="flex-1 flex flex-col justify-between py-0.5">
<div>
<div class="flex items-center justify-between">
<h3 class="text-[14px] font-bold text-gray-900">衣柜分享 · 12 件</h3>
<span class="text-[#34C759] text-[10px] font-medium bg-green-50 px-1.5 py-0.5 rounded border border-green-100">有效中</span>
</div>
<div class="flex items-center gap-1.5 mt-1">
<span class="text-[10px] text-[#007AFF] bg-blue-50 px-1.5 py-0.5 rounded font-medium">部分衣物</span>
<span class="text-[10px] text-gray-400">已浏览 28 次</span>
</div>
</div>
<div class="flex items-center justify-between text-[11px] text-gray-400 mt-2">
<span class="flex items-center gap-1 font-mono text-[#FF9500] font-medium">
<i class="fa-regular fa-clock text-[10px]"></i> 3 天后过期
</span>
<span class="text-[#007AFF] text-[11px] font-medium flex items-center">
管理 <i class="fa-solid fa-chevron-right text-[9px] ml-0.5"></i>
</span>
</div>
</div>
</div>
</div>
<!-- List Item 2: 全量衣橱 & 长期有效 -->
<div class="bg-white rounded-[16px] p-3.5 mb-3 border border-gray-100 shadow-sm relative overflow-hidden">
<div class="flex gap-3">
<!-- Left 2x2 Preview Grid -->
<div class="w-[76px] h-[76px] rounded-xl bg-blue-50/60 grid grid-cols-2 gap-1 p-1 flex-shrink-0">
<div class="bg-white rounded-md flex items-center justify-center text-blue-300 text-[10px]">
<i class="fa-solid fa-vest-patches"></i>
</div>
<div class="bg-white rounded-md flex items-center justify-center text-blue-300 text-[10px]">
<i class="fa-solid fa-hat-wizard"></i>
</div>
<div class="bg-white rounded-md flex items-center justify-center text-blue-300 text-[10px]">
<i class="fa-solid fa-glasses"></i>
</div>
<div class="bg-white rounded-md flex items-center justify-center text-blue-400 font-bold text-[9px] font-mono">
+48
</div>
</div>
<!-- Right Meta -->
<div class="flex-1 flex flex-col justify-between py-0.5">
<div>
<div class="flex items-center justify-between">
<h3 class="text-[14px] font-bold text-gray-900">春夏季全量衣橱 · 52 件</h3>
</div>
<div class="flex items-center gap-1.5 mt-1">
<span class="text-[10px] text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded font-medium">全量衣橱</span>
<span class="text-[10px] text-gray-400">已浏览 142 次</span>
</div>
</div>
<div class="flex items-center justify-between text-[11px] text-gray-400 mt-2">
<span class="text-gray-500 font-medium">长期有效</span>
<span class="text-[#007AFF] text-[11px] font-medium flex items-center">
管理 <i class="fa-solid fa-chevron-right text-[9px] ml-0.5"></i>
</span>
</div>
</div>
</div>
</div>
<!-- List Item 3: 已过期态 (透明度降低 + 右上角灰色角标) -->
<div class="bg-white rounded-[16px] p-3.5 mb-3 border border-gray-100 shadow-sm relative overflow-hidden opacity-60">
<span class="badge-corner">已过期</span>
<div class="flex gap-3">
<div class="w-[76px] h-[76px] rounded-xl bg-[#F2F2F7] grid grid-cols-2 gap-1 p-1 flex-shrink-0">
<div class="bg-gray-100 rounded-md flex items-center justify-center text-gray-300 text-[10px]"><i class="fa-solid fa-shirt"></i></div>
<div class="bg-gray-100 rounded-md flex items-center justify-center text-gray-300 text-[10px]"><i class="fa-solid fa-shoe-prints"></i></div>
<div class="bg-gray-100 rounded-md flex items-center justify-center text-gray-300 text-[10px]"><i class="fa-solid fa-hat-cowboy"></i></div>
<div class="bg-gray-100 rounded-md flex items-center justify-center text-gray-300 text-[10px]"><i class="fa-solid fa-bag-shopping"></i></div>
</div>
<div class="flex-1 flex flex-col justify-between py-0.5">
<div>
<h3 class="text-[14px] font-bold text-gray-600">复古通勤胶囊 · 6 件</h3>
<div class="flex items-center gap-1.5 mt-1">
<span class="text-[10px] text-gray-400 bg-gray-100 px-1.5 py-0.5 rounded">部分衣物</span>
<span class="text-[10px] text-gray-400">2025.04.01 过期</span>
</div>
</div>
<div class="text-[11px] text-gray-400 mt-2">
已失效(不可再查看)
</div>
</div>
</div>
</div>
<!-- List Item 4: 已取消态 -->
<div class="bg-white rounded-[16px] p-3.5 mb-3 border border-gray-100 shadow-sm relative overflow-hidden opacity-60">
<span class="badge-corner bg-gray-400">已取消</span>
<div class="flex gap-3">
<div class="w-[76px] h-[76px] rounded-xl bg-[#F2F2F7] grid grid-cols-2 gap-1 p-1 flex-shrink-0">
<div class="bg-gray-100 rounded-md flex items-center justify-center text-gray-300 text-[10px]"><i class="fa-solid fa-shirt"></i></div>
<div class="bg-gray-100 rounded-md flex items-center justify-center text-gray-300 text-[10px]"><i class="fa-solid fa-vest"></i></div>
<div class="bg-gray-100 rounded-md flex items-center justify-center text-gray-300 text-[10px]"><i class="fa-solid fa-socks"></i></div>
<div class="bg-gray-100 rounded-md flex items-center justify-center text-gray-300 text-[10px]"><i class="fa-solid fa-mitten"></i></div>
</div>
<div class="flex-1 flex flex-col justify-between py-0.5">
<div>
<h3 class="text-[14px] font-bold text-gray-600">周末休闲风 · 4 件</h3>
<div class="flex items-center gap-1.5 mt-1">
<span class="text-[10px] text-gray-400 bg-gray-100 px-1.5 py-0.5 rounded">部分衣物</span>
<span class="text-[10px] text-gray-400">属主手动撤销</span>
</div>
</div>
<div class="text-[11px] text-gray-400 mt-2">
已手动取消公开分享
</div>
</div>
</div>
</div>
</div>
<!-- Safe Area Home Bar -->
<div class="home-indicator"></div>
</div>
</div>
<!-- ========================================== -->
<!-- ② 画板 2: 「衣柜分享 - 创建分享」含有效期面板与卡片预览 -->
<!-- ========================================== -->
<div class="flex flex-col items-center">
<div class="flex items-center gap-2 mb-3">
<span class="w-2.5 h-2.5 rounded-full bg-indigo-500"></span>
<h2 class="text-sm font-bold text-gray-800">② 衣柜分享 - 创建分享</h2>
<span class="text-xs text-gray-400 font-medium">多选网格 + 底部有效期面板 + 微信卡片预览</span>
</div>
<div class="mock-screen flex flex-col">
<!-- iOS Status Bar -->
<div class="status-bar">
<span>9:41</span>
<div class="flex items-center gap-1.5 text-xs">
<i class="fa-solid fa-signal text-[11px]"></i>
<span class="font-mono text-[10px]">5G</span>
<i class="fa-solid fa-battery-full text-[13px]"></i>
</div>
</div>
<!-- WeChat Navigation Bar -->
<div class="wechat-nav hairline-b">
<div class="flex items-center gap-1 text-[#007AFF] text-[15px] font-medium cursor-pointer">
<i class="fa-solid fa-chevron-left text-[14px]"></i>
<span>取消</span>
</div>
<span class="text-[17px] font-semibold text-gray-900 absolute left-1/2 -translate-x-1/2">创建衣柜分享</span>
<div class="nav-capsule">
<span class="text-[11px] text-gray-700"><i class="fa-solid fa-ellipsis"></i></span>
<span class="w-[0.5px] h-3 bg-gray-300"></span>
<span class="w-2.5 h-2.5 rounded-full border-[1.5px] border-gray-700"></span>
</div>
</div>
<!-- Underlying Page Content (Slightly dimmed behind action sheet) -->
<div class="flex-1 overflow-y-auto px-4 pt-3 pb-24">
<!-- Step 1: Two Big Selection Cards -->
<div class="text-[12px] font-semibold text-gray-500 mb-2 px-1">第 1 步:选择分享模式</div>
<div class="grid grid-cols-2 gap-2.5 mb-3">
<!-- Mode 1: 部分衣物 (Selected) -->
<div class="bg-blue-50/50 border-2 border-[#007AFF] rounded-[16px] p-3 relative cursor-pointer shadow-sm">
<div class="w-4 h-4 bg-[#007AFF] text-white rounded-full flex items-center justify-center text-[9px] absolute top-2.5 right-2.5">
<i class="fa-solid fa-check"></i>
</div>
<div class="w-7 h-7 rounded-lg bg-blue-100 text-[#007AFF] flex items-center justify-center text-xs mb-2">
<i class="fa-solid fa-check-double"></i>
</div>
<div class="text-[13px] font-bold text-gray-900">部分衣物</div>
<p class="text-[10px] text-gray-500 mt-1 leading-snug">挑选几件衣物分享给好友</p>
</div>
<!-- Mode 2: 全量快照 -->
<div class="bg-white border border-gray-200 rounded-[16px] p-3 relative cursor-pointer hover:border-gray-300">
<div class="w-7 h-7 rounded-lg bg-gray-100 text-gray-600 flex items-center justify-center text-xs mb-2">
<i class="fa-solid fa-boxes-stacked"></i>
</div>
<div class="text-[13px] font-bold text-gray-900">全量快照</div>
<p class="text-[10px] text-gray-500 mt-1 leading-snug">分享当前衣橱的全部衣物</p>
</div>
</div>
<!-- Step 2: Multi-select Grid (两列网格,间距 12pt,圆角 16pt,1:1图片区) -->
<div class="flex items-center justify-between mb-2 px-1">
<span class="text-[12px] font-semibold text-gray-500">挑选衣物 (已勾选 6 件)</span>
<span class="text-[11px] text-[#007AFF] font-medium">全选</span>
</div>
<div class="grid grid-cols-2 gap-3">
<!-- Item 1 (Checked) -->
<div class="bg-white rounded-[16px] p-2 border-2 border-[#007AFF] shadow-sm relative">
<div class="cloth-grid-item flex items-center justify-center text-gray-400">
<i class="fa-solid fa-shirt text-2xl text-slate-300"></i>
<div class="w-5 h-5 bg-[#007AFF] text-white rounded-full flex items-center justify-center text-[10px] absolute top-1.5 right-1.5 shadow-sm">
<i class="fa-solid fa-check"></i>
</div>
</div>
<div class="mt-2 text-[12px] font-medium text-gray-800 truncate">经典条纹海魂衫</div>
<div class="text-[10px] text-gray-400">上装 · T恤</div>
</div>
<!-- Item 2 (Checked) -->
<div class="bg-white rounded-[16px] p-2 border-2 border-[#007AFF] shadow-sm relative">
<div class="cloth-grid-item flex items-center justify-center text-gray-400">
<i class="fa-solid fa-vest text-2xl text-slate-300"></i>
<div class="w-5 h-5 bg-[#007AFF] text-white rounded-full flex items-center justify-center text-[10px] absolute top-1.5 right-1.5 shadow-sm">
<i class="fa-solid fa-check"></i>
</div>
</div>
<div class="mt-2 text-[12px] font-medium text-gray-800 truncate">米白针织马甲</div>
<div class="text-[10px] text-gray-400">上装 · 针织</div>
</div>
</div>
</div>
<!-- Dim Backdrop for Modal ActionSheet -->
<div class="absolute inset-0 bg-black/40 z-40"></div>
<!-- Bottom Modal: 有效期面板 & 确认分享 -->
<div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-[24px] z-50 p-4 pb-8 shadow-2xl animate-fade-in-up">
<!-- Grabber -->
<div class="w-10 h-1 bg-gray-300 rounded-full mx-auto mb-3"></div>
<div class="flex items-center justify-between mb-3">
<div>
<h4 class="text-[15px] font-bold text-gray-900">设置分享有效期</h4>
<p class="text-[11px] text-gray-400">已选 6 件衣物 · 到期后自动转为失效态</p>
</div>
<button class="w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center text-gray-400 text-xs">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
<!-- Radio List: 1天 / 7天 / 30天 / 长期有效 -->
<div class="space-y-1.5 mb-4">
<div class="flex items-center justify-between p-2.5 rounded-xl hover:bg-gray-50 cursor-pointer">
<span class="text-[13px] text-gray-700">1 天(临时私密分享)</span>
<span class="w-4 h-4 rounded-full border border-gray-300"></span>
</div>
<div class="flex items-center justify-between p-2.5 rounded-xl bg-blue-50/60 border border-blue-100 cursor-pointer">
<span class="text-[13px] font-semibold text-[#007AFF]">7 天(推荐常用)</span>
<div class="w-4 h-4 rounded-full bg-[#007AFF] text-white flex items-center justify-center text-[9px]">
<i class="fa-solid fa-check"></i>
</div>
</div>
<div class="flex items-center justify-between p-2.5 rounded-xl hover:bg-gray-50 cursor-pointer">
<span class="text-[13px] text-gray-700">30 天(整月搭配参考)</span>
<span class="w-4 h-4 rounded-full border border-gray-300"></span>
</div>
<div class="flex items-center justify-between p-2.5 rounded-xl hover:bg-gray-50 cursor-pointer">
<span class="text-[13px] text-gray-700">长期有效(随时可手动取消)</span>
<span class="w-4 h-4 rounded-full border border-gray-300"></span>
</div>
</div>
<!-- Mini WeChat Share Card Preview (分享成功后的卡片式样) -->
<div class="bg-[#F2F2F7] rounded-xl p-2.5 mb-4 border border-gray-200/80">
<div class="text-[10px] font-semibold text-gray-400 uppercase tracking-wider mb-1.5 flex items-center justify-between">
<span><i class="fa-brands fa-weixin text-emerald-500 mr-1"></i>分享给微信好友卡片样式预览</span>
<span class="text-blue-500 font-normal">7天有效</span>
</div>
<div class="bg-white rounded-lg p-2.5 border border-gray-200 shadow-sm">
<div class="flex items-center gap-2 mb-2">
<div class="w-6 h-6 rounded-full bg-blue-100 text-[#007AFF] font-bold text-[10px] flex items-center justify-center">雨</div>
<div class="text-[12px] font-medium text-gray-800">
<span class="font-bold">小雨</span> 向你分享了 6 件精选衣物
</div>
</div>
<div class="h-12 bg-gray-50 rounded-md border border-dashed border-gray-200 flex items-center justify-center gap-2 text-gray-400 text-xs">
<i class="fa-solid fa-shirt"></i>
<i class="fa-solid fa-vest"></i>
<i class="fa-solid fa-socks"></i>
<span class="text-[10px] text-gray-400 font-mono">+3 件</span>
</div>
<div class="mt-2 pt-1.5 border-t border-gray-100 flex items-center justify-between text-[10px] text-gray-400">
<span>纸条AI衣橱 · 衣柜快照</span>
<span class="text-[#007AFF] font-medium">查看衣橱 &gt;</span>
</div>
</div>
</div>
<!-- CTA Button -->
<button class="w-full h-11 bg-[#007AFF] text-white font-semibold text-[14px] rounded-xl shadow-md shadow-blue-500/20 active:scale-[0.99] transition-all flex items-center justify-center gap-1.5">
<i class="fa-solid fa-arrow-up-from-bracket text-xs"></i>
<span>确认分享(消耗 1 次衣柜分享额度)</span>
</button>
</div>
<!-- Safe Area Home Bar -->
<div class="home-indicator"></div>
</div>
</div>
<!-- ========================================== -->
<!-- ③ 画板 3: 「衣柜分享 - 分享详情」(属主与失效态画板) -->
<!-- ========================================== -->
<div class="flex flex-col items-center">
<div class="flex items-center gap-2 mb-3">
<span class="w-2.5 h-2.5 rounded-full bg-emerald-500"></span>
<h2 class="text-sm font-bold text-gray-800">③ 衣柜分享 - 分享详情</h2>
<span class="text-xs text-gray-400 font-medium">属主管理态(含取消操作)+ 失效态浮层</span>
</div>
<div class="mock-screen flex flex-col">
<!-- iOS Status Bar -->
<div class="status-bar">
<span>9:41</span>
<div class="flex items-center gap-1.5 text-xs">
<i class="fa-solid fa-signal text-[11px]"></i>
<span class="font-mono text-[10px]">5G</span>
<i class="fa-solid fa-battery-full text-[13px]"></i>
</div>
</div>
<!-- WeChat Navigation Bar -->
<div class="wechat-nav hairline-b">
<div class="flex items-center gap-1 text-[#007AFF] text-[15px] font-medium cursor-pointer">
<i class="fa-solid fa-chevron-left text-[14px]"></i>
<span>返回</span>
</div>
<span class="text-[17px] font-semibold text-gray-900 absolute left-1/2 -translate-x-1/2">衣橱快照详情</span>
<div class="nav-capsule">
<span class="text-[11px] text-gray-700"><i class="fa-solid fa-ellipsis"></i></span>
<span class="w-[0.5px] h-3 bg-gray-300"></span>
<span class="w-2.5 h-2.5 rounded-full border-[1.5px] border-gray-700"></span>
</div>
</div>
<!-- Scrollable Detail Body -->
<div class="flex-1 overflow-y-auto px-4 pt-3 pb-24">
<!-- Sharing Header Card (Sharer Avatar + Nickname + Expiry) -->
<div class="bg-white rounded-[16px] p-4 mb-3.5 border border-gray-100 shadow-sm">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-11 h-11 rounded-full bg-blue-50 border border-blue-100 text-[#007AFF] font-bold text-base flex items-center justify-center">
雨
</div>
<div>
<div class="flex items-center gap-1.5">
<span class="text-[15px] font-bold text-gray-900">小雨</span>
<span class="text-[10px] text-[#007AFF] bg-blue-50 px-1.5 py-0.5 rounded font-semibold">属主视角</span>
</div>
<div class="text-[11px] text-gray-500 mt-0.5">分享了 12 件衣橱单品</div>
</div>
</div>
<div class="text-right">
<span class="text-[10px] text-amber-600 bg-amber-50 px-2 py-0.5 rounded-full font-mono font-medium border border-amber-200">
<i class="fa-regular fa-clock text-[9px] mr-0.5"></i> 3 天后过期
</span>
<div class="text-[10px] text-gray-400 mt-1">访客仅可只读浏览</div>
</div>
</div>
<div class="mt-3 pt-3 border-t border-gray-100 flex items-center justify-between text-[11px] text-gray-500">
<span>已获 28 次浏览 · 4 次好友收藏</span>
<button class="text-[#007AFF] font-medium flex items-center gap-1">
<i class="fa-regular fa-share-from-square text-[10px]"></i> 再次转发
</button>
</div>
</div>
<!-- Read-only Clothes Grid (两列网格,间距 12pt,圆角 16pt,图片区 1:1) -->
<div class="flex items-center justify-between mb-2 px-1">
<span class="text-[12px] font-semibold text-gray-500">包含衣物清单 (12)</span>
<span class="text-[11px] text-gray-400">只读不可编辑</span>
</div>
<div class="grid grid-cols-2 gap-3">
<!-- Card 1 -->
<div class="bg-white rounded-[16px] p-2 border border-gray-100 shadow-sm">
<div class="cloth-grid-item flex items-center justify-center text-gray-400">
<i class="fa-solid fa-shirt text-2xl text-slate-300"></i>
</div>
<div class="mt-2 text-[12px] font-bold text-gray-800 truncate">经典条纹海魂衫</div>
<div class="text-[10px] text-gray-400">上装 · 棉质</div>
</div>
<!-- Card 2 -->
<div class="bg-white rounded-[16px] p-2 border border-gray-100 shadow-sm">
<div class="cloth-grid-item flex items-center justify-center text-gray-400">
<i class="fa-solid fa-vest text-2xl text-slate-300"></i>
</div>
<div class="mt-2 text-[12px] font-bold text-gray-800 truncate">米白针织开衫</div>
<div class="text-[10px] text-gray-400">上装 · 羊毛混纺</div>
</div>
<!-- Card 3 -->
<div class="bg-white rounded-[16px] p-2 border border-gray-100 shadow-sm">
<div class="cloth-grid-item flex items-center justify-center text-gray-400">
<i class="fa-solid fa-person-walking text-2xl text-slate-300"></i>
</div>
<div class="mt-2 text-[12px] font-bold text-gray-800 truncate">高腰阔腿西装裤</div>
<div class="text-[10px] text-gray-400">下装 · 垂坠面料</div>
</div>
<!-- Card 4 -->
<div class="bg-white rounded-[16px] p-2 border border-gray-100 shadow-sm">
<div class="cloth-grid-item flex items-center justify-center text-gray-400">
<i class="fa-solid fa-bag-shopping text-2xl text-slate-300"></i>
</div>
<div class="mt-2 text-[12px] font-bold text-gray-800 truncate">法式帆布托特包</div>
<div class="text-[10px] text-gray-400">配饰 · 帆布/皮</div>
</div>
</div>
</div>
<!-- 属主视角底部固定操作栏(安全区上方,白底 + 上分割线) -->
<div class="absolute bottom-0 left-0 right-0 bg-white/95 backdrop-blur hairline-t px-4 pt-2.5 pb-7 flex items-center justify-between z-30">
<div class="text-[11px] text-gray-400">
属主管理视角(访客无此栏)
</div>
<button class="px-4 py-2 text-[#FF3B30] font-semibold text-[13px] bg-red-50 hover:bg-red-100 rounded-xl active:scale-95 transition-all flex items-center gap-1.5">
<i class="fa-solid fa-ban text-[11px]"></i>
<span>取消分享</span>
</button>
</div>
<!-- Interactive Spec: 失效态说明悬浮卡(展示访客访问失效链接时的界面) -->
<div class="absolute inset-x-3 bottom-14 bg-gray-900/90 text-white backdrop-blur-md rounded-2xl p-3.5 z-40 border border-white/10 shadow-2xl">
<div class="flex items-center justify-between mb-2">
<span class="text-[11px] font-bold text-amber-400 flex items-center gap-1">
<i class="fa-solid fa-triangle-exclamation"></i> 伴随状态:失效态展示说明
</span>
<span class="text-[10px] text-gray-400">过期或撤回即触发</span>
</div>
<div class="bg-white/10 rounded-xl p-3 flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-gray-400 flex-shrink-0">
<i class="fa-regular fa-face-meh text-lg"></i>
</div>
<div class="flex-1">
<div class="text-[12px] font-semibold text-white">该分享已过期或已被取消</div>
<div class="text-[10px] text-gray-300 mt-0.5">属主已关闭查看权限,点击下方即可返回首页</div>
</div>
<button class="px-2.5 py-1 text-[11px] bg-white/20 text-white rounded-lg border border-white/20 whitespace-nowrap">
返回首页
</button>
</div>
</div>
<!-- Safe Area Home Bar -->
<div class="home-indicator"></div>
</div>
</div>
</main>
<!-- Bottom Spec Checklist Footer -->
<footer class="w-full max-w-[1280px] bg-white rounded-3xl p-6 mt-10 border border-slate-200/80 shadow-sm">
<h3 class="text-sm font-bold text-gray-800 mb-3 flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-amber-500"></span>
第 9 屏 衣柜分享规范设计核查表与权限映射
</h3>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 text-xs text-gray-600">
<div class="bg-gray-50 p-3 rounded-xl border border-gray-100">
<div class="font-bold text-gray-900 mb-1">1. ①「我的分享」全态列表</div>
<p>支持 2×2 衣物小图缩略、类型标签(部分/全量)、有效期计算。已取消或已过期卡片统一下降透明度并在右上角加盖灰色胶囊角标「已取消」「已过期」。</p>
</div>
<div class="bg-gray-50 p-3 rounded-xl border border-gray-100">
<div class="font-bold text-gray-900 mb-1">2. ② 创建分享与模式单选</div>
<p>「部分衣物」与「全量快照」大卡片单选;选部分进入双列勾选网格(蓝描边 + 对勾);底部操作栏呼起 1/7/30/长期 4 档单选面板与额度消耗提示。</p>
</div>
<div class="bg-gray-50 p-3 rounded-xl border border-gray-100">
<div class="font-bold text-gray-900 mb-1">3. ③ 分享卡片预览契约</div>
<p>微信原生卡片样式:展示分享者头像与昵称「小雨 向你分享了 6 件精选衣物」、横排衣物缩略图与「查看衣橱」跳转入口,符合社交传播心理。</p>
</div>
<div class="bg-gray-50 p-3 rounded-xl border border-gray-100">
<div class="font-bold text-gray-900 mb-1">4. ④ 属主权限与失效态兜底</div>
<p>属主底部固定栏专属「取消分享」高危按钮;访客视角纯净无操作栏;失效态整页呈现灰色插画 +「该分享已过期或已被取消」+「返回首页」。</p>
</div>
</div>
</footer>
</body>
</html>