feat: Kinetic Dark 设计语言 + Lucide 图标迁移 + 首页轻量个性化
- 建立 Lucide 子集 iconfont（49 字形），全站 emoji 替换为 fc-icon 组件 - 重塑 Design Token（冷中性近黑底 + Volt 荧光绿 #B6F24E），消除硬编码颜色 - 首页登录后个性化：我的计划 / 我的收藏 / 今日推荐（纯前端复用现有 API） - 后端 DEFAULT_EMOJI→Lucide 名，PALETTE 对齐 Kinetic Dark 语义色板 - 修复 person-standing 缺失字形；14 个官方组合 seed emoji 全部映射到现有字形
This commit is contained in:
121
home-personalization-mockup.svg
Normal file
121
home-personalization-mockup.svg
Normal file
@@ -0,0 +1,121 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 390 1200" width="390" height="1200" font-family="'PingFang SC','HarmonyOS Sans SC',sans-serif">
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#0B0F0E"/>
|
||||
<stop offset="1" stop-color="#0B0F0E"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="spark" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#FF6A3D" stop-opacity="0.18"/>
|
||||
<stop offset="1" stop-color="#FF6A3D" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<clipPath id="phone"><rect x="0" y="0" width="390" height="1200" rx="0"/></clipPath>
|
||||
</defs>
|
||||
|
||||
<g clip-path="url(#phone)">
|
||||
<rect x="0" y="0" width="390" height="1200" fill="url(#bg)"/>
|
||||
|
||||
<!-- Status bar -->
|
||||
<text x="24" y="30" fill="#ECF1EF" font-size="14" font-weight="600">16:04</text>
|
||||
<text x="320" y="30" fill="#9BA7A1" font-size="12">5G</text>
|
||||
<rect x="344" y="20" width="22" height="11" rx="2" fill="none" stroke="#9BA7A1" stroke-width="1"/>
|
||||
<rect x="346" y="22" width="14" height="7" rx="1" fill="#ECF1EF"/>
|
||||
|
||||
<!-- Hero -->
|
||||
<text x="24" y="76" fill="#FF6A3D" font-size="11" letter-spacing="2" font-weight="600">FITCOACH · 智能健身教练</text>
|
||||
<text x="24" y="112" fill="#ECF1EF" font-size="26" font-weight="700" letter-spacing="-0.5">今天，练点什么？</text>
|
||||
<text x="24" y="138" fill="#9BA7A1" font-size="13">精准匹配你的目标肌群，让每次训练更高效</text>
|
||||
|
||||
<!-- Search pill -->
|
||||
<rect x="24" y="158" width="342" height="44" rx="22" fill="#141A18" stroke="#1F2624" stroke-width="1"/>
|
||||
<circle cx="46" cy="180" r="7" fill="none" stroke="#6B7670" stroke-width="2"/>
|
||||
<line x1="51" y1="185" x2="56" y2="190" stroke="#6B7670" stroke-width="2" stroke-linecap="round"/>
|
||||
<text x="66" y="185" fill="#6B7670" font-size="13">搜索动作 / 器械 / 部位</text>
|
||||
|
||||
<!-- CTA -->
|
||||
<rect x="24" y="212" width="342" height="48" rx="24" fill="#FF6A3D"/>
|
||||
<path d="M150 230 l3 6 6 1 -4.5 4 1 6 -5.5 -3 -5.5 3 1 -6 -4.5 -4 6 -1 z" fill="#20100A"/>
|
||||
<text x="172" y="242" fill="#20100A" font-size="15" font-weight="700">智能推荐</text>
|
||||
<text x="344" y="242" fill="#20100A" font-size="20" font-weight="700" text-anchor="end">›</text>
|
||||
|
||||
<!-- ===== 本周概览 card ===== -->
|
||||
<rect x="24" y="284" width="342" height="208" rx="16" fill="#141A18" stroke="#1F2624" stroke-width="1"/>
|
||||
<text x="44" y="312" fill="#9BA7A1" font-size="11" letter-spacing="2" font-weight="600">OVERVIEW</text>
|
||||
<text x="44" y="334" fill="#ECF1EF" font-size="16" font-weight="600">本周概览</text>
|
||||
|
||||
<!-- progress ring -->
|
||||
<circle cx="96" cy="392" r="44" fill="none" stroke="#1F2624" stroke-width="9"/>
|
||||
<circle cx="96" cy="392" r="44" fill="none" stroke="#2BD9A6" stroke-width="9" stroke-linecap="round"
|
||||
stroke-dasharray="251 277" transform="rotate(-90 96 392)"/>
|
||||
<text x="96" y="388" fill="#ECF1EF" font-size="30" font-weight="700" text-anchor="middle" font-family="ui-monospace,monospace">4</text>
|
||||
<text x="96" y="408" fill="#9BA7A1" font-size="12" text-anchor="middle">/ 5 次</text>
|
||||
|
||||
<!-- streak -->
|
||||
<path d="M186 360 c4 -10 14 -10 14 0 c0 8 -8 12 -8 20 c-6 -4 -8 -10 -6 -16 c-2 4 -4 8 -2 12 c-6 -2 -8 -10 -8 -16z" fill="#FF6A3D"/>
|
||||
<text x="208" y="384" fill="#ECF1EF" font-size="22" font-weight="700" font-family="ui-monospace,monospace">12</text>
|
||||
<text x="232" y="384" fill="#9BA7A1" font-size="13">天连击</text>
|
||||
<text x="186" y="410" fill="#9BA7A1" font-size="12">连续训练</text>
|
||||
|
||||
<!-- sparkline -->
|
||||
<path d="M44 470 L70 458 L96 464 L122 444 L148 450 L174 432 L200 440 L226 420 L252 428 L278 410 L304 418 L330 400 L356 408 L356 478 L44 478 Z" fill="url(#spark)"/>
|
||||
<path d="M44 470 L70 458 L96 464 L122 444 L148 450 L174 432 L200 440 L226 420 L252 428 L278 410 L304 418 L330 400 L356 408" fill="none" stroke="#FF6A3D" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/>
|
||||
<circle cx="356" cy="408" r="3.5" fill="#FF6A3D"/>
|
||||
<path d="M326 392 l8 -10 6 6 8 -10" fill="none" stroke="#2BD9A6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(0,0)"/>
|
||||
<text x="332" y="396" fill="#2BD9A6" font-size="11" font-weight="600">↑ 8%</text>
|
||||
|
||||
<!-- ===== 我的计划 card ===== -->
|
||||
<rect x="24" y="512" width="342" height="96" rx="16" fill="#141A18" stroke="#1F2624" stroke-width="1"/>
|
||||
<rect x="44" y="536" width="32" height="32" rx="8" fill="#FF6A3D" fill-opacity="0.12"/>
|
||||
<path d="M52 552 h4 v-8 h4 v8 h4 v-12 h4 v12 h4 v-6 h4 v6" fill="none" stroke="#FF6A3D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(-6,0)"/>
|
||||
<text x="88" y="546" fill="#ECF1EF" font-size="15" font-weight="600">推胸日 · 第 3 周</text>
|
||||
<rect x="276" y="532" width="62" height="22" rx="11" fill="#FF6A3D" fill-opacity="0.14"/>
|
||||
<text x="307" y="547" fill="#FF6A3D" font-size="11" font-weight="600" text-anchor="middle">进行中</text>
|
||||
<text x="44" y="576" fill="#9BA7A1" font-size="12">今日 6 个动作 · 已完成 2 / 6</text>
|
||||
<rect x="44" y="588" width="302" height="8" rx="4" fill="#1F2624"/>
|
||||
<rect x="44" y="588" width="100" height="8" rx="4" fill="#FF6A3D"/>
|
||||
|
||||
<!-- ===== 今日推荐 row ===== -->
|
||||
<rect x="24" y="624" width="342" height="64" rx="16" fill="#141A18" stroke="#1F2624" stroke-width="1"/>
|
||||
<path d="M48 648 l4 8 8 1 -6 6 2 8 -8 -5 -8 5 2 -8 -6 -6 8 -1 z" fill="#FF6A3D"/>
|
||||
<text x="72" y="648" fill="#ECF1EF" font-size="14" font-weight="600">上斜哑铃推胸</text>
|
||||
<text x="72" y="668" fill="#9BA7A1" font-size="11">根据你的推胸计划，匹配度 92%</text>
|
||||
<text x="352" y="664" fill="#6B7670" font-size="18" text-anchor="end">›</text>
|
||||
|
||||
<!-- ===== 收藏的动作 ===== -->
|
||||
<text x="24" y="720" fill="#9BA7A1" font-size="11" letter-spacing="2" font-weight="600">FAVORITES</text>
|
||||
<text x="24" y="742" fill="#ECF1EF" font-size="16" font-weight="600">收藏的动作</text>
|
||||
<rect x="24" y="756" width="106" height="120" rx="12" fill="#141A18" stroke="#1F2624" stroke-width="1"/>
|
||||
<rect x="24" y="756" width="106" height="74" rx="12" fill="#1C2421"/>
|
||||
<path d="M44 792 h8 v-10 h8 v10 h8 v-14 h8 v14 h8 v-8 h8 v8" fill="none" stroke="#6B7670" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(-12,0)"/>
|
||||
<text x="34" y="852" fill="#ECF1EF" font-size="12">杠铃深蹲</text>
|
||||
<text x="34" y="868" fill="#6B7670" font-size="10">下肢 · 4 组</text>
|
||||
|
||||
<rect x="142" y="756" width="106" height="120" rx="12" fill="#141A18" stroke="#1F2624" stroke-width="1"/>
|
||||
<rect x="142" y="756" width="106" height="74" rx="12" fill="#1C2421"/>
|
||||
<path d="M170 792 h8 v-10 h8 v10 h8 v-14 h8 v14 h8 v-8 h8 v8" fill="none" stroke="#6B7670" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(0,0)"/>
|
||||
<text x="152" y="852" fill="#ECF1EF" font-size="12">硬拉</text>
|
||||
<text x="152" y="868" fill="#6B7670" font-size="10">全身 · 5 组</text>
|
||||
|
||||
<rect x="260" y="756" width="106" height="120" rx="12" fill="#141A18" stroke="#1F2624" stroke-width="1"/>
|
||||
<rect x="260" y="756" width="106" height="74" rx="12" fill="#1C2421"/>
|
||||
<path d="M288 792 h8 v-10 h8 v10 h8 v-14 h8 v14 h8 v-8 h8 v8" fill="none" stroke="#6B7670" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(12,0)"/>
|
||||
<text x="270" y="852" fill="#ECF1EF" font-size="12">引体向上</text>
|
||||
<text x="270" y="868" fill="#6B7670" font-size="10">背部 · 4 组</text>
|
||||
|
||||
<!-- ===== Bottom nav ===== -->
|
||||
<rect x="0" y="1116" width="390" height="84" fill="#0E1311" opacity="0.96"/>
|
||||
<rect x="0" y="1116" width="390" height="1" fill="#1F2624"/>
|
||||
<g fill="#6B7670">
|
||||
<path d="M58 1150 h20 v14 h-20 z M56 1146 h24 v4 h-24 z" />
|
||||
<path d="M138 1144 h4 v20 h16 v4 h-20 z M138 1144 v-4 h4 v4" />
|
||||
<path d="M214 1144 h20 v4 h-20 v-4 m0 8 h20 v4 h-20 v-4 m0 8 h20 v4 h-20 v-4" transform="translate(-2,0)"/>
|
||||
<circle cx="308" cy="1150" r="10" fill="none" stroke="#6B7670" stroke-width="2"/>
|
||||
<path d="M308 1145 v10 M303 1150 h10" stroke="#6B7670" stroke-width="2"/>
|
||||
</g>
|
||||
<!-- active item (home) -->
|
||||
<rect x="48" y="1128" width="40" height="3" rx="1.5" fill="#FF6A3D"/>
|
||||
<text x="68" y="1182" fill="#FF6A3D" font-size="10" text-anchor="middle" font-weight="600">首页</text>
|
||||
<text x="148" y="1182" fill="#6B7670" font-size="10" text-anchor="middle">分类</text>
|
||||
<text x="226" y="1182" fill="#6B7670" font-size="10" text-anchor="middle">计划</text>
|
||||
<text x="308" y="1182" fill="#6B7670" font-size="10" text-anchor="middle">我的</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.6 KiB |
Reference in New Issue
Block a user