feat(h5): 首页 H5 壳从定稿原型抽取(#home 满屏,静态 mock,零桥)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-29 16:19:45 +08:00
parent 109aebaa16
commit 4be9848235
61 changed files with 10282 additions and 0 deletions
@@ -0,0 +1,34 @@
+<svg width="172" height="148" viewBox="0 0 172 148" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="buttonShadow" x="0" y="0" width="172" height="148" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="10" stdDeviation="7" flood-color="#D79A1E" flood-opacity=".22"/>
+      <feDropShadow dx="0" dy="2" stdDeviation="2" flood-color="#FFFFFF" flood-opacity=".88"/>
+    </filter>
+    <linearGradient id="buttonFill" x1="43" y1="16" x2="126" y2="135" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#FFFCE3"/>
+      <stop offset=".38" stop-color="#FFF2A8"/>
+      <stop offset=".72" stop-color="#FFE27A"/>
+      <stop offset="1" stop-color="#FFD15A"/>
+    </linearGradient>
+    <linearGradient id="buttonStroke" x1="35" y1="11" x2="136" y2="139" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#FFF7C2"/>
+      <stop offset=".48" stop-color="#FFE484"/>
+      <stop offset="1" stop-color="#EAB237"/>
+    </linearGradient>
+    <radialGradient id="buttonGlow" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(70 44) rotate(62) scale(86 66)">
+      <stop stop-color="#FFFFFF" stop-opacity=".86"/>
+      <stop offset=".58" stop-color="#FFFFFF" stop-opacity=".24"/>
+      <stop offset="1" stop-color="#FFFFFF" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="arrowStroke" x1="50" y1="49" x2="125" y2="98" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#FFAE16"/>
+      <stop offset="1" stop-color="#F08300"/>
+    </linearGradient>
+  </defs>
+  <g filter="url(#buttonShadow)">
+    <path d="M45 13H127C151.8 13 166 35.8 166 62V86C166 112.2 151.8 135 127 135H45C20.2 135 6 112.2 6 86V62C6 35.8 20.2 13 45 13Z" fill="url(#buttonFill)" stroke="url(#buttonStroke)" stroke-width="3"/>
+    <path d="M48 19H124C146.1 19 159 38.7 159 63V84C159 108.3 146.1 128 124 128H48C25.9 128 13 108.3 13 84V63C13 38.7 25.9 19 48 19Z" fill="url(#buttonGlow)"/>
+    <path d="M58 51L81 74L58 97" stroke="url(#arrowStroke)" stroke-width="15" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M93 51L116 74L93 97" stroke="url(#arrowStroke)" stroke-width="15" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+</svg>
@@ -0,0 +1,43 @@
+# Shared Icons
+
+通用图标的单一事实源（canonical source）。每个图标都是独立 SVG 文件，但**实际页面里必须内联 SVG markup**（不用 `<img src>` 或 `<svg src>` 引用），符合 prototypes 仓库"每个 HTML 自包含"原则。
+
+## 工作流
+
+1. 改图标 → 改这里的 SVG 文件
+2. 在所有用到的 HTML 里同步替换内联 SVG markup
+3. DESIGN.md 引用本目录路径作为基准
+
+## 现有图标
+
+| 文件 | 用途 | 推荐内联尺寸 |
+|---|---|---|
+| `back-chevron.svg` | 顶部导航返回按钮 | 24×24 |
+| `tab-home-outline.svg` | 底 tab "首页" 未选中态 | 24×24 |
+| `tab-home-filled.svg` | 底 tab "首页" 选中态（黄填充）| 24×24 |
+| `tab-welfare-outline.svg` | 底 tab "福利" 未选中态 | 24×24 |
+| `tab-welfare-filled.svg` | 底 tab "福利" 选中态（黄填充）| 24×24 |
+| `tab-profile-outline.svg` | 底 tab "我的" 未选中态 | 24×24 |
+| `tab-profile-filled.svg` | 底 tab "我的" 选中态（黄填充）| 24×24 |
+
+## 标准 button 包装
+
+```html
+<button class="btn-back" onclick="goBack()" aria-label="返回">
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15 6L9 12L15 18" stroke="#1A1A1A" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+</button>
+```
+
+```css
+.btn-back {
+  width: 44px; height: 44px;
+  display: flex; align-items: center; justify-content: center;
+  background: transparent; border: none; padding: 0;
+  cursor: pointer; -webkit-tap-highlight-color: transparent;
+  flex-shrink: 0;
+}
+.btn-back:active { opacity: 0.5; }
+.btn-back svg { width: 24px; height: 24px; display: block; }
+```
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M15 6L9 12L15 18" stroke="#1A1A1A" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3 12l9-8 9 8" stroke="#1A1A1A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M5 10v9a1 1 0 001 1h3v-5h6v5h3a1 1 0 001-1v-9" fill="#FFD600" stroke="#1A1A1A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#1A1A1A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3 12l9-8 9 8"/>
+  <path d="M5 10v9a1 1 0 001 1h3v-5h6v5h3a1 1 0 001-1v-9"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="12" cy="8" r="4" fill="#FFD600" stroke="#1A1A1A" stroke-width="2"/>
+  <path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="#FFD600" stroke="#1A1A1A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#1A1A1A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="12" cy="8" r="4"/>
+  <path d="M4 20c0-4 4-6 8-6s8 2 8 6"/>
+</svg>
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="3" y="8" width="18" height="4" rx="1" fill="#FFD600" stroke="#1A1A1A" stroke-width="2"/>
+  <path d="M5 12v7a1 1 0 001 1h12a1 1 0 001-1v-7" fill="#FFD600" stroke="#1A1A1A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M12 8v12" stroke="#1A1A1A" stroke-width="2"/>
+  <path d="M7.5 8C6 8 5 6.5 6 5.5S9 4 9.5 5.5c.4 1.2 2.5 2.5 2.5 2.5s2.1-1.3 2.5-2.5C15 4 17 4.5 18 5.5s-1 2.5-2.5 2.5" stroke="#1A1A1A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#1A1A1A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <rect x="3" y="8" width="18" height="4" rx="1"/>
+  <path d="M12 8v12"/>
+  <path d="M5 12v7a1 1 0 001 1h12a1 1 0 001-1v-7"/>
+  <path d="M7.5 8C6 8 5 6.5 6 5.5S9 4 9.5 5.5c.4 1.2 2.5 2.5 2.5 2.5s2.1-1.3 2.5-2.5C15 4 17 4.5 18 5.5s-1 2.5-2.5 2.5"/>
+</svg>
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
+  <defs>
+    <clipPath id="appIconClip">
+      <rect x="0" y="0" width="512" height="512" rx="105" ry="105"/>
+    </clipPath>
+  </defs>
+  <rect x="0" y="0" width="512" height="512" rx="105" ry="105" fill="rgb(255, 217, 61)"/>
+  <image href="sb-brand.png" x="0" y="0" width="512" height="512" preserveAspectRatio="none" clip-path="url(#appIconClip)"/>
+</svg>