38b5e3190a
- 响应式项目首页 (Landing, 含 R2 APK 下载) + 路由 /home 调整 - OTA 升级: tauri-plugin-hotswap (lib.rs/main.rs 拆分, 客户端热替换) - OTA 服务端 (check/bundle/manifest-web) + build-ota/genkey/upload 脚本 - 密钥/凭据统一存配置中心 (signing + ota + cloudflare 分组) - Android CI (android-* 分支) + OTA CI (手动触发), 产物上传 R2 - 修复 tsc/构建阻塞问题
823 lines
36 KiB
HTML
823 lines
36 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=390, initial-scale=1.0">
|
||
<title>Wardrobe - 衣物管理系统 原型设计</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<div class="phone-frame">
|
||
<div class="status-bar">
|
||
<span class="time">9:41</span>
|
||
<div class="status-icons">
|
||
<svg width="17" height="12" viewBox="0 0 17 12"><rect x="0" y="3" width="3" height="9" rx="1" fill="#1a1a1a"/><rect x="4.5" y="2" width="3" height="10" rx="1" fill="#1a1a1a"/><rect x="9" y="0" width="3" height="12" rx="1" fill="#1a1a1a"/><rect x="13.5" y="1" width="3" height="11" rx="1" fill="#1a1a1a"/></svg>
|
||
<svg width="25" height="12" viewBox="0 0 25 12"><rect x="0" y="0.5" width="22" height="11" rx="2" stroke="#1a1a1a" fill="none" stroke-width="1"/><rect x="22.5" y="3.5" width="2" height="5" rx="1" fill="#1a1a1a"/><rect x="1.5" y="2" width="19" height="8" rx="1" fill="#1a1a1a"/></svg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Page: Home -->
|
||
<div class="page active" id="page-home">
|
||
<div class="page-header">
|
||
<div>
|
||
<p class="greeting">早上好 ☀️</p>
|
||
<h1 class="page-title">今日穿搭</h1>
|
||
</div>
|
||
<div class="header-actions">
|
||
<button class="icon-btn" onclick="showPage('page-add')">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="scroll-content">
|
||
<div class="weather-card">
|
||
<div class="weather-info">
|
||
<span class="weather-icon">🌤️</span>
|
||
<div>
|
||
<p class="weather-temp">24°C</p>
|
||
<p class="weather-desc">多云 · 适合轻薄外套</p>
|
||
</div>
|
||
</div>
|
||
<div class="weather-tags">
|
||
<span class="tag">春</span>
|
||
<span class="tag">通勤</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-header">
|
||
<h2>推荐搭配</h2>
|
||
<button class="text-btn" onclick="showPage('page-outfit')">查看更多</button>
|
||
</div>
|
||
|
||
<div class="outfit-card">
|
||
<div class="outfit-preview">
|
||
<div class="outfit-item-grid">
|
||
<div class="outfit-thumb" style="background:#E8DDD3;">
|
||
<span>👕</span><small>白衬衫</small>
|
||
</div>
|
||
<div class="outfit-thumb" style="background:#D4C5B5;">
|
||
<span>👖</span><small>卡其裤</small>
|
||
</div>
|
||
<div class="outfit-thumb" style="background:#C9B8A5;">
|
||
<span>🧥</span><small>米色风衣</small>
|
||
</div>
|
||
<div class="outfit-thumb" style="background:#E0D5C8;">
|
||
<span>👟</span><small>小白鞋</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="outfit-info">
|
||
<div class="outfit-tags">
|
||
<span class="occasion-tag">通勤</span>
|
||
<span class="rating">⭐ 4.8</span>
|
||
</div>
|
||
<p class="outfit-label">简约通勤风</p>
|
||
<div class="outfit-actions">
|
||
<button class="action-btn save-btn" onclick="showToast('已保存到日历')">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||
保存到日历
|
||
</button>
|
||
<button class="action-btn refresh-btn" onclick="refreshOutfit()">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
|
||
换一套
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-header">
|
||
<h2>衣橱概览</h2>
|
||
<button class="text-btn" onclick="showPage('page-closet')">查看全部</button>
|
||
</div>
|
||
|
||
<div class="stats-row">
|
||
<div class="stat-card">
|
||
<span class="stat-num">42</span>
|
||
<span class="stat-label">衣物总数</span>
|
||
</div>
|
||
<div class="stat-card">
|
||
<span class="stat-num">15</span>
|
||
<span class="stat-label">搭配收藏</span>
|
||
</div>
|
||
<div class="stat-card">
|
||
<span class="stat-num">73%</span>
|
||
<span class="stat-label">利用率</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="category-grid">
|
||
<div class="category-item" onclick="showPage('page-closet')">
|
||
<div class="category-icon" style="background:#F5EDE6;">👕</div>
|
||
<span>上衣</span>
|
||
<small>12件</small>
|
||
</div>
|
||
<div class="category-item" onclick="showPage('page-closet')">
|
||
<div class="category-icon" style="background:#EDE5DA;">👖</div>
|
||
<span>下装</span>
|
||
<small>8件</small>
|
||
</div>
|
||
<div class="category-item" onclick="showPage('page-closet')">
|
||
<div class="category-icon" style="background:#E5DDD4;">🧥</div>
|
||
<span>外套</span>
|
||
<small>6件</small>
|
||
</div>
|
||
<div class="category-item" onclick="showPage('page-closet')">
|
||
<div class="category-icon" style="background:#DDD5CC;">👗</div>
|
||
<span>连衣裙</span>
|
||
<small>5件</small>
|
||
</div>
|
||
<div class="category-item" onclick="showPage('page-closet')">
|
||
<div class="category-icon" style="background:#D8D0C7;">👟</div>
|
||
<span>鞋履</span>
|
||
<small>6件</small>
|
||
</div>
|
||
<div class="category-item" onclick="showPage('page-closet')">
|
||
<div class="category-icon" style="background:#F0E8DF;">👜</div>
|
||
<span>配饰</span>
|
||
<small>5件</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-header">
|
||
<h2>需要关注</h2>
|
||
</div>
|
||
<div class="alert-list">
|
||
<div class="alert-item">
|
||
<span class="alert-icon">🔔</span>
|
||
<div class="alert-text">
|
||
<p>3件衣物超过30天未穿</p>
|
||
<small>考虑搭配或整理</small>
|
||
</div>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||
</div>
|
||
<div class="alert-item">
|
||
<span class="alert-icon">🧺</span>
|
||
<div class="alert-text">
|
||
<p>2件衣物待清洁</p>
|
||
<small>白衬衫、运动T恤</small>
|
||
</div>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bottom-spacer"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Page: Closet -->
|
||
<div class="page" id="page-closet">
|
||
<div class="page-header">
|
||
<h1 class="page-title">我的衣橱</h1>
|
||
<button class="icon-btn" onclick="showPage('page-add')">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="scroll-content">
|
||
<div class="search-bar">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
||
<input type="text" placeholder="搜索衣物..." class="search-input">
|
||
</div>
|
||
|
||
<div class="filter-bar" id="filter-bar">
|
||
<button class="filter-btn active" onclick="filterCloset(this, 'all')">全部</button>
|
||
<button class="filter-btn" onclick="filterCloset(this, 'top')">上衣</button>
|
||
<button class="filter-btn" onclick="filterCloset(this, 'bottom')">下装</button>
|
||
<button class="filter-btn" onclick="filterCloset(this, 'outer')">外套</button>
|
||
<button class="filter-btn" onclick="filterCloset(this, 'dress')">连衣裙</button>
|
||
<button class="filter-btn" onclick="filterCloset(this, 'shoes')">鞋履</button>
|
||
<button class="filter-btn" onclick="filterCloset(this, 'acc')">配饰</button>
|
||
</div>
|
||
|
||
<div class="filter-bar" style="margin-top:8px;">
|
||
<button class="filter-btn small" onclick="this.classList.toggle('active')">春</button>
|
||
<button class="filter-btn small" onclick="this.classList.toggle('active')">夏</button>
|
||
<button class="filter-btn small" onclick="this.classList.toggle('active')">秋</button>
|
||
<button class="filter-btn small" onclick="this.classList.toggle('active')">冬</button>
|
||
<span class="filter-sep">|</span>
|
||
<button class="filter-btn small" onclick="this.classList.toggle('active')">黑</button>
|
||
<button class="filter-btn small" onclick="this.classList.toggle('active')">白</button>
|
||
<button class="filter-btn small" onclick="this.classList.toggle('active')">蓝</button>
|
||
<button class="filter-btn small" onclick="this.classList.toggle('active')">棕</button>
|
||
</div>
|
||
|
||
<div class="view-toggle">
|
||
<button class="view-btn active" id="grid-view-btn" onclick="setView('grid')">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
|
||
</button>
|
||
<button class="view-btn" id="list-view-btn" onclick="setView('list')">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><rect x="3" y="4" width="18" height="4" rx="1"/><rect x="3" y="10" width="18" height="4" rx="1"/><rect x="3" y="16" width="18" height="4" rx="1"/></svg>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="closet-grid" id="closet-grid">
|
||
<div class="clothing-card" data-cat="top" onclick="showPage('page-detail')">
|
||
<div class="clothing-img" style="background:#F0E8DF;"><span>👕</span></div>
|
||
<div class="clothing-meta">
|
||
<p class="clothing-name">白色衬衫</p>
|
||
<small>上衣 · 3次/月</small>
|
||
</div>
|
||
</div>
|
||
<div class="clothing-card" data-cat="bottom" onclick="showPage('page-detail')">
|
||
<div class="clothing-img" style="background:#E5DDD4;"><span>👖</span></div>
|
||
<div class="clothing-meta">
|
||
<p class="clothing-name">卡其休闲裤</p>
|
||
<small>下装 · 5次/月</small>
|
||
</div>
|
||
</div>
|
||
<div class="clothing-card" data-cat="outer" onclick="showPage('page-detail')">
|
||
<div class="clothing-img" style="background:#DDD5CC;"><span>🧥</span></div>
|
||
<div class="clothing-meta">
|
||
<p class="clothing-name">米色风衣</p>
|
||
<small>外套 · 2次/月</small>
|
||
</div>
|
||
</div>
|
||
<div class="clothing-card" data-cat="dress" onclick="showPage('page-detail')">
|
||
<div class="clothing-img" style="background:#F5EDE6;"><span>👗</span></div>
|
||
<div class="clothing-meta">
|
||
<p class="clothing-name">碎花连衣裙</p>
|
||
<small>连衣裙 · 1次/月</small>
|
||
</div>
|
||
</div>
|
||
<div class="clothing-card" data-cat="shoes" onclick="showPage('page-detail')">
|
||
<div class="clothing-img" style="background:#E8E0D7;"><span>👟</span></div>
|
||
<div class="clothing-meta">
|
||
<p class="clothing-name">白色运动鞋</p>
|
||
<small>鞋履 · 8次/月</small>
|
||
</div>
|
||
</div>
|
||
<div class="clothing-card" data-cat="acc" onclick="showPage('page-detail')">
|
||
<div class="clothing-img" style="background:#F0E8DF;"><span>👜</span></div>
|
||
<div class="clothing-meta">
|
||
<p class="clothing-name">棕色手提包</p>
|
||
<small>配饰 · 4次/月</small>
|
||
</div>
|
||
</div>
|
||
<div class="clothing-card" data-cat="top" onclick="showPage('page-detail')">
|
||
<div class="clothing-img" style="background:#E0D8CF;"><span>👔</span></div>
|
||
<div class="clothing-meta">
|
||
<p class="clothing-name">条纹T恤</p>
|
||
<small>上衣 · 6次/月</small>
|
||
</div>
|
||
</div>
|
||
<div class="clothing-card" data-cat="bottom" onclick="showPage('page-detail')">
|
||
<div class="clothing-img" style="background:#D8D0C7;"><span>👖</span></div>
|
||
<div class="clothing-meta">
|
||
<p class="clothing-name">蓝色牛仔裤</p>
|
||
<small>下装 · 7次/月</small>
|
||
</div>
|
||
</div>
|
||
<div class="clothing-card" data-cat="outer" onclick="showPage('page-detail')">
|
||
<div class="clothing-img" style="background:#C9C1B8;"><span>🧶</span></div>
|
||
<div class="clothing-meta">
|
||
<p class="clothing-name">灰色针织衫</p>
|
||
<small>外套 · 3次/月</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="closet-list hidden" id="closet-list">
|
||
<div class="list-item" onclick="showPage('page-detail')">
|
||
<div class="list-thumb" style="background:#F0E8DF;">👕</div>
|
||
<div class="list-info">
|
||
<p>白色衬衫</p>
|
||
<small>上衣 · 白色 · 春夏 · 购于2025-03</small>
|
||
</div>
|
||
<span class="list-freq">3次/月</span>
|
||
</div>
|
||
<div class="list-item" onclick="showPage('page-detail')">
|
||
<div class="list-thumb" style="background:#E5DDD4;">👖</div>
|
||
<div class="list-info">
|
||
<p>卡其休闲裤</p>
|
||
<small>下装 · 棕色 · 四季 · 购于2025-01</small>
|
||
</div>
|
||
<span class="list-freq">5次/月</span>
|
||
</div>
|
||
<div class="list-item" onclick="showPage('page-detail')">
|
||
<div class="list-thumb" style="background:#DDD5CC;">🧥</div>
|
||
<div class="list-info">
|
||
<p>米色风衣</p>
|
||
<small>外套 · 米色 · 春秋 · 购于2024-10</small>
|
||
</div>
|
||
<span class="list-freq">2次/月</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bottom-spacer"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Page: Add Clothing -->
|
||
<div class="page" id="page-add">
|
||
<div class="page-header">
|
||
<button class="icon-btn" onclick="showPage('page-closet')">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
|
||
</button>
|
||
<h1 class="page-title center-title">添加衣物</h1>
|
||
<button class="text-btn save-text" onclick="showToast('已保存');showPage('page-closet')">保存</button>
|
||
</div>
|
||
|
||
<div class="scroll-content">
|
||
<div class="photo-upload-area" onclick="simulateUpload()">
|
||
<div class="upload-placeholder" id="upload-placeholder">
|
||
<div class="upload-icon">
|
||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="1.5">
|
||
<rect x="3" y="3" width="18" height="18" rx="3"/>
|
||
<circle cx="8.5" cy="8.5" r="1.5"/>
|
||
<path d="M21 15l-5-5L5 21"/>
|
||
</svg>
|
||
</div>
|
||
<p>点击拍照或从相册选择</p>
|
||
<small>支持 AI 自动识别衣物信息</small>
|
||
</div>
|
||
<div class="upload-preview hidden" id="upload-preview">
|
||
<div class="preview-placeholder">
|
||
<span style="font-size:64px;">👕</span>
|
||
<small>已选择图片</small>
|
||
</div>
|
||
<button class="retake-btn" onclick="event.stopPropagation();resetUpload()">重新选择</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ai-badge">
|
||
<span>🤖</span> AI 将自动识别品类、颜色、材质
|
||
</div>
|
||
|
||
<div class="form-section">
|
||
<h3>基础信息</h3>
|
||
<div class="form-group">
|
||
<label>品类</label>
|
||
<select class="form-select">
|
||
<option>请选择品类</option>
|
||
<option>上衣</option>
|
||
<option>下装</option>
|
||
<option>外套</option>
|
||
<option>连衣裙</option>
|
||
<option>鞋履</option>
|
||
<option>配饰</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>名称</label>
|
||
<input type="text" class="form-input" placeholder="如：白色衬衫">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>颜色</label>
|
||
<div class="color-picker">
|
||
<span class="color-dot" style="background:#1a1a1a;" onclick="selectColor(this)"></span>
|
||
<span class="color-dot" style="background:#f5f5f5;border:1px solid #ddd;" onclick="selectColor(this)"></span>
|
||
<span class="color-dot" style="background:#4a6fa5;" onclick="selectColor(this)"></span>
|
||
<span class="color-dot" style="background:#8b7355;" onclick="selectColor(this)"></span>
|
||
<span class="color-dot" style="background:#c0392b;" onclick="selectColor(this)"></span>
|
||
<span class="color-dot" style="background:#27ae60;" onclick="selectColor(this)"></span>
|
||
<span class="color-dot" style="background:#f39c12;" onclick="selectColor(this)"></span>
|
||
<span class="color-dot" style="background:#8e44ad;" onclick="selectColor(this)"></span>
|
||
<span class="color-dot active" style="background:#ecdsa0;" onclick="selectColor(this)"></span>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>品牌</label>
|
||
<input type="text" class="form-input" placeholder="如：ZARA">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-section">
|
||
<h3>属性标签</h3>
|
||
<div class="tag-select">
|
||
<span class="selectable-tag active">春</span>
|
||
<span class="selectable-tag">夏</span>
|
||
<span class="selectable-tag active">秋</span>
|
||
<span class="selectable-tag">冬</span>
|
||
</div>
|
||
<div class="tag-select">
|
||
<span class="selectable-tag active">通勤</span>
|
||
<span class="selectable-tag">休闲</span>
|
||
<span class="selectable-tag">运动</span>
|
||
<span class="selectable-tag">约会</span>
|
||
<span class="selectable-tag">正式</span>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>正式度</label>
|
||
<input type="range" class="form-range" min="0" max="100" value="60">
|
||
<div class="range-labels"><span>休闲</span><span>正式</span></div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>厚度</label>
|
||
<input type="range" class="form-range" min="0" max="100" value="30">
|
||
<div class="range-labels"><span>薄</span><span>厚</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-section">
|
||
<h3>购买信息</h3>
|
||
<div class="form-row">
|
||
<div class="form-group half">
|
||
<label>购买日期</label>
|
||
<input type="date" class="form-input">
|
||
</div>
|
||
<div class="form-group half">
|
||
<label>购买价格</label>
|
||
<input type="number" class="form-input" placeholder="¥">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="primary-btn" onclick="showToast('已保存');showPage('page-closet')">保存到衣橱</button>
|
||
|
||
<div class="bottom-spacer"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Page: Clothing Detail -->
|
||
<div class="page" id="page-detail">
|
||
<div class="page-header">
|
||
<button class="icon-btn" onclick="showPage('page-closet')">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
|
||
</button>
|
||
<div class="header-actions">
|
||
<button class="icon-btn" onclick="showToast('已编辑')">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
|
||
</button>
|
||
<button class="icon-btn danger" onclick="confirmDelete()">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="scroll-content">
|
||
<div class="detail-hero">
|
||
<div class="detail-img" style="background:#F0E8DF;">
|
||
<span style="font-size:80px;">👕</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-info-card">
|
||
<h2>白色衬衫</h2>
|
||
<div class="detail-tags">
|
||
<span class="detail-tag">上衣</span>
|
||
<span class="detail-tag">白色</span>
|
||
<span class="detail-tag">春</span>
|
||
<span class="detail-tag">夏</span>
|
||
<span class="detail-tag">通勤</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-stats">
|
||
<div class="detail-stat">
|
||
<span class="detail-stat-num">3</span>
|
||
<span class="detail-stat-label">本月穿着</span>
|
||
</div>
|
||
<div class="detail-stat">
|
||
<span class="detail-stat-num">18</span>
|
||
<span class="detail-stat-label">总穿着次数</span>
|
||
</div>
|
||
<div class="detail-stat">
|
||
<span class="detail-stat-num">545</span>
|
||
<span class="detail-stat-label">拥有天数</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-section">
|
||
<h3>基本信息</h3>
|
||
<div class="info-row"><span>品类</span><span>上衣</span></div>
|
||
<div class="info-row"><span>颜色</span><span>白色</span></div>
|
||
<div class="info-row"><span>品牌</span><span>优衣库</span></div>
|
||
<div class="info-row"><span>材质</span><span>棉</span></div>
|
||
<div class="info-row"><span>购买日期</span><span>2025-03-15</span></div>
|
||
<div class="info-row"><span>购买价格</span><span>¥199</span></div>
|
||
</div>
|
||
|
||
<div class="detail-section">
|
||
<h3>上次清洁</h3>
|
||
<div class="info-row"><span>清洁日期</span><span>2026-09-05</span></div>
|
||
<div class="info-row"><span>清洁方式</span><span>机洗</span></div>
|
||
<div class="info-row"><span>距今</span><span>6天</span></div>
|
||
</div>
|
||
|
||
<div class="detail-section">
|
||
<h3>搭配记录</h3>
|
||
<div class="outfit-mini-list">
|
||
<div class="outfit-mini">
|
||
<div class="mini-items">
|
||
<span>👕</span><span>👖</span><span>👟</span>
|
||
</div>
|
||
<p>2026-09-10 · 通勤</p>
|
||
</div>
|
||
<div class="outfit-mini">
|
||
<div class="mini-items">
|
||
<span>👕</span><span>👗</span><span>👜</span>
|
||
</div>
|
||
<p>2026-09-05 · 约会</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bottom-spacer"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Page: Outfit Recommendations -->
|
||
<div class="page" id="page-outfit">
|
||
<div class="page-header">
|
||
<button class="icon-btn" onclick="showPage('page-home')">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
|
||
</button>
|
||
<h1 class="page-title center-title">搭配推荐</h1>
|
||
<div style="width:40px;"></div>
|
||
</div>
|
||
|
||
<div class="scroll-content">
|
||
<div class="outfit-filters">
|
||
<div class="filter-group">
|
||
<label>季节</label>
|
||
<div class="filter-btns">
|
||
<button class="filter-btn active">春</button>
|
||
<button class="filter-btn">夏</button>
|
||
<button class="filter-btn">秋</button>
|
||
<button class="filter-btn">冬</button>
|
||
</div>
|
||
</div>
|
||
<div class="filter-group">
|
||
<label>场合</label>
|
||
<div class="filter-btns">
|
||
<button class="filter-btn active">通勤</button>
|
||
<button class="filter-btn">休闲</button>
|
||
<button class="filter-btn">约会</button>
|
||
<button class="filter-btn">运动</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="outfit-result-list">
|
||
<div class="outfit-result-card">
|
||
<div class="outfit-result-header">
|
||
<span class="outfit-result-tag">通勤首选</span>
|
||
<span class="outfit-result-score">匹配度 92%</span>
|
||
</div>
|
||
<div class="outfit-result-items">
|
||
<div class="result-item" style="background:#F0E8DF;"><span>👕</span><small>白衬衫</small></div>
|
||
<div class="result-item" style="background:#E5DDD4;"><span>👖</span><small>卡其裤</small></div>
|
||
<div class="result-item" style="background:#DDD5CC;"><span>🧥</span><small>风衣</small></div>
|
||
<div class="result-item" style="background:#E8E0D7;"><span>👟</span><small>小白鞋</small></div>
|
||
</div>
|
||
<div class="outfit-result-ai">
|
||
<p class="ai-label">🤖 AI 解析</p>
|
||
<p class="ai-text">这套搭配以大地色系为主，白衬衫增添清爽感，适合春秋季通勤。风衣可应对早晚温差。</p>
|
||
</div>
|
||
<div class="outfit-result-actions">
|
||
<button class="action-btn" onclick="showToast('已保存')">保存搭配</button>
|
||
<button class="action-btn secondary">查看详情</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="outfit-result-card">
|
||
<div class="outfit-result-header">
|
||
<span class="outfit-result-tag">周末休闲</span>
|
||
<span class="outfit-result-score">匹配度 87%</span>
|
||
</div>
|
||
<div class="outfit-result-items">
|
||
<div class="result-item" style="background:#E0D8CF;"><span>👔</span><small>条纹T恤</small></div>
|
||
<div class="result-item" style="background:#D8D0C7;"><span>👖</span><small>牛仔裤</small></div>
|
||
<div class="result-item" style="background:#E8E0D7;"><span>👟</span><small>运动鞋</small></div>
|
||
</div>
|
||
<div class="outfit-result-ai">
|
||
<p class="ai-label">🤖 AI 解析</p>
|
||
<p class="ai-text">休闲舒适的日常搭配，条纹元素增添活力，牛仔裤百搭耐看，适合周末出游。</p>
|
||
</div>
|
||
<div class="outfit-result-actions">
|
||
<button class="action-btn" onclick="showToast('已保存')">保存搭配</button>
|
||
<button class="action-btn secondary">查看详情</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="outfit-result-card">
|
||
<div class="outfit-result-header">
|
||
<span class="outfit-result-tag">约会穿搭</span>
|
||
<span class="outfit-result-score">匹配度 85%</span>
|
||
</div>
|
||
<div class="outfit-result-items">
|
||
<div class="result-item" style="background:#F5EDE6;"><span>👗</span><small>碎花裙</small></div>
|
||
<div class="result-item" style="background:#F0E8DF;"><span>👜</span><small>手提包</small></div>
|
||
<div class="result-item" style="background:#E8E0D7;"><span>👠</span><small>单鞋</small></div>
|
||
</div>
|
||
<div class="outfit-result-ai">
|
||
<p class="ai-label">🤖 AI 解析</p>
|
||
<p class="ai-text">碎花连衣裙优雅浪漫，搭配精致手提包提升整体质感，适合约会或下午茶场合。</p>
|
||
</div>
|
||
<div class="outfit-result-actions">
|
||
<button class="action-btn" onclick="showToast('已保存')">保存搭配</button>
|
||
<button class="action-btn secondary">查看详情</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bottom-spacer"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Page: Calendar -->
|
||
<div class="page" id="page-calendar">
|
||
<div class="page-header">
|
||
<h1 class="page-title">穿搭日历</h1>
|
||
</div>
|
||
|
||
<div class="scroll-content">
|
||
<div class="calendar-month">
|
||
<div class="calendar-nav">
|
||
<button class="icon-btn small">‹</button>
|
||
<h3>2026年9月</h3>
|
||
<button class="icon-btn small">›</button>
|
||
</div>
|
||
<div class="calendar-weekdays">
|
||
<span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span>
|
||
</div>
|
||
<div class="calendar-days">
|
||
<span class="day empty"></span><span class="day empty"></span><span class="day">1</span><span class="day">2</span><span class="day">3</span><span class="day">4</span><span class="day">5</span>
|
||
<span class="day">6</span><span class="day">7</span><span class="day">8</span><span class="day">9</span><span class="day">10</span><span class="day active has-outfit">11</span><span class="day">12</span>
|
||
<span class="day">13</span><span class="day">14</span><span class="day">15</span><span class="day">16</span><span class="day">17</span><span class="day">18</span><span class="day">19</span>
|
||
<span class="day">20</span><span class="day">21</span><span class="day">22</span><span class="day">23</span><span class="day">24</span><span class="day">25</span><span class="day">26</span>
|
||
<span class="day">27</span><span class="day">28</span><span class="day">29</span><span class="day">30</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="calendar-detail">
|
||
<h3>9月11日 · 周四</h3>
|
||
<div class="calendar-outfit-card">
|
||
<div class="outfit-mini-items">
|
||
<span>👕</span><span>👖</span><span>🧥</span><span>👟</span>
|
||
</div>
|
||
<div class="calendar-outfit-info">
|
||
<p>简约通勤风</p>
|
||
<small>白衬衫 + 卡其裤 + 风衣 + 小白鞋</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="calendar-history">
|
||
<h3>最近穿搭</h3>
|
||
<div class="history-list">
|
||
<div class="history-item">
|
||
<div class="history-date">
|
||
<span class="history-day">10</span>
|
||
<small>周三</small>
|
||
</div>
|
||
<div class="history-items">
|
||
<span>👔</span><span>👖</span><span>👟</span>
|
||
</div>
|
||
<span class="history-label">休闲</span>
|
||
</div>
|
||
<div class="history-item">
|
||
<div class="history-date">
|
||
<span class="history-day">9</span>
|
||
<small>周二</small>
|
||
</div>
|
||
<div class="history-items">
|
||
<span>👕</span><span>👗</span><span>👜</span>
|
||
</div>
|
||
<span class="history-label">约会</span>
|
||
</div>
|
||
<div class="history-item">
|
||
<div class="history-date">
|
||
<span class="history-day">8</span>
|
||
<small>周一</small>
|
||
</div>
|
||
<div class="history-items">
|
||
<span>👕</span><span>👖</span><span>🧥</span>
|
||
</div>
|
||
<span class="history-label">通勤</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bottom-spacer"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Page: Profile -->
|
||
<div class="page" id="page-profile">
|
||
<div class="page-header">
|
||
<h1 class="page-title">我的</h1>
|
||
</div>
|
||
|
||
<div class="scroll-content">
|
||
<div class="profile-header">
|
||
<div class="avatar">👤</div>
|
||
<h2>时尚达人</h2>
|
||
<p>已使用 545 天</p>
|
||
</div>
|
||
|
||
<div class="profile-stats">
|
||
<div class="profile-stat">
|
||
<span class="ps-num">42</span>
|
||
<span class="ps-label">衣物</span>
|
||
</div>
|
||
<div class="profile-stat">
|
||
<span class="ps-num">15</span>
|
||
<span class="ps-label">搭配</span>
|
||
</div>
|
||
<div class="profile-stat">
|
||
<span class="ps-num">73%</span>
|
||
<span class="ps-label">利用率</span>
|
||
</div>
|
||
<div class="profile-stat">
|
||
<span class="ps-num">28</span>
|
||
<span class="ps-label">天连续</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="menu-section">
|
||
<div class="menu-item" onclick="showPage('page-calendar')">
|
||
<div class="menu-icon">📅</div>
|
||
<span>穿搭日历</span>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||
</div>
|
||
<div class="menu-item">
|
||
<div class="menu-icon">❤️</div>
|
||
<span>我的收藏</span>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||
</div>
|
||
<div class="menu-item">
|
||
<div class="menu-icon">🧺</div>
|
||
<span>清洁管理</span>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||
</div>
|
||
<div class="menu-item">
|
||
<div class="menu-icon">📊</div>
|
||
<span>风格统计</span>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="menu-section">
|
||
<div class="menu-item">
|
||
<div class="menu-icon">☁️</div>
|
||
<span>云端同步</span>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||
</div>
|
||
<div class="menu-item">
|
||
<div class="menu-icon">📤</div>
|
||
<span>导出数据</span>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||
</div>
|
||
<div class="menu-item">
|
||
<div class="menu-icon">⚙️</div>
|
||
<span>设置</span>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||
</div>
|
||
<div class="menu-item">
|
||
<div class="menu-icon">❓</div>
|
||
<span>帮助与反馈</span>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bottom-spacer"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Toast -->
|
||
<div class="toast hidden" id="toast"></div>
|
||
|
||
<!-- Delete Confirmation Modal -->
|
||
<div class="modal-overlay hidden" id="delete-modal">
|
||
<div class="modal">
|
||
<h3>确认删除</h3>
|
||
<p>确定要将这件衣物从衣橱中移除吗？此操作不可撤销。</p>
|
||
<div class="modal-actions">
|
||
<button class="modal-btn cancel" onclick="hideModal()">取消</button>
|
||
<button class="modal-btn confirm" onclick="hideModal();showToast('已删除');showPage('page-closet')">删除</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bottom Navigation -->
|
||
<nav class="bottom-nav">
|
||
<button class="nav-item active" onclick="navTo(this, 'page-home')">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
|
||
<span>首页</span>
|
||
</button>
|
||
<button class="nav-item" onclick="navTo(this, 'page-outfit')">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
|
||
<span>搭配</span>
|
||
</button>
|
||
<button class="nav-item center-btn" onclick="showPage('page-add')">
|
||
<div class="center-btn-circle">
|
||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||
</div>
|
||
</button>
|
||
<button class="nav-item" onclick="navTo(this, 'page-closet')">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
|
||
<span>衣橱</span>
|
||
</button>
|
||
<button class="nav-item" onclick="navTo(this, 'page-profile')">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||
<span>我的</span>
|
||
</button>
|
||
</nav>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|