From 2f82197e2fc6ef2c44042820c2a9b2219af9494b Mon Sep 17 00:00:00 2001
From: cchis <hiscc2021@gmail.com>
Date: Mon, 29 Jun 2026 14:47:02 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=BA=95=E9=83=A8tab=20bar:?=
 =?UTF-8?q?=E8=B4=B4=E5=B1=8F=E5=B9=95=E5=BA=95+flex=E7=AD=89=E5=88=86+?=
 =?UTF-8?q?=E5=BA=95=E6=A0=8F=E5=9B=BE=E5=8E=BB=E5=9C=86=E8=A7=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 底部4个导航(商城/心动时刻/宠物/档案)从画布内百分比定位,
  改成贴device-stage底部的flex tab bar(absolute bottom-0,等分,宽度自适应)
- 几何验证:各比例下 bottom=屏幕高(贴底)、w=屏幕宽(满宽)、left=0
- 保留 bottom-icon-bar 发光底栏作背景,scale-x-1.12+overflow-hidden 裁掉两端圆角
- 解决:手机宽度变化导致的 tab 位置错乱(不再用百分比)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 vtubermini/src/pages/home-page.tsx | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/vtubermini/src/pages/home-page.tsx b/vtubermini/src/pages/home-page.tsx
index 90b3914..8872aac 100644
--- a/vtubermini/src/pages/home-page.tsx
+++ b/vtubermini/src/pages/home-page.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState, type PointerEvent as ReactPointerEvent, type ReactNode } from 'react'
-import { getDaysLeft, getElapsedDays } from '../lib/anniversary-rules'
+import { getDaysLeft, getElapsedDays } from '../lib/anniversary-rules'
+import bottomIconBar from "../assets/desktop-assets/home-icons/bottom-icon-bar.png"
 import { defaultHomeLayout } from '../lib/home-layout'
 import { shouldUseStaticBackgroundMedia } from '../lib/platform'
 import type {
@@ -19,7 +20,6 @@ import activityIcon from '../assets/desktop-assets/home-icons/activity.png'
 import albumIcon from '../assets/desktop-assets/home-icons/album.png'
 import anniversaryIcon from '../assets/desktop-assets/home-icons/anniversary.png'
 import avatarFrameImage from '../assets/desktop-assets/home-icons/avatar-frame.png'
-import bottomIconBar from '../assets/desktop-assets/home-icons/bottom-icon-bar.png'
 import momentsIcon from '../assets/desktop-assets/home-icons/moments.png'
 import petIcon from '../assets/desktop-assets/home-icons/pet.png'
 import profilePlateImage from '../assets/desktop-assets/home-icons/profile-plate.png'
@@ -609,10 +609,6 @@ export function HomePage({
         />
       </HomeLayoutBox>
 
-      <div aria-hidden="true" className="pointer-events-none absolute bottom-0 left-0 z-[5] h-[13%] w-full select-none overflow-hidden">
-        <img alt="" className="block h-full w-full object-fill" draggable={false} src={bottomIconBar} />
-      </div>
-
       <button
         aria-label="查看活动"
         className="hidden"
@@ -656,7 +652,7 @@ export function HomePage({
       </button>
 
       <div className="pointer-events-none absolute inset-0 z-10">
-        {hotspots.map((hotspot) => {
+        {hotspots.filter((h) => !["homeIconShop","homeIconMoments","homeIconPet","homeIconAlbum"].includes(h.layoutId ?? "")).map((hotspot) => {
           const rect = hotspot.layoutId
             ? homeLayout[hotspot.layoutId] ?? defaultHomeLayout[hotspot.layoutId]
             : hotspot
@@ -728,7 +724,8 @@ export function HomePage({
           <span className="relative">全新<br />系列</span>
         </div>
       </HomeLayoutBox>
-      </div>
+      </div>
+      <nav className="absolute inset-x-0 bottom-0 z-30 overflow-hidden flex items-stretch justify-around bg-gradient-to-t from-[#061124]/95 via-[#061124]/70 to-transparent pt-5" style={{ paddingBottom: "max(8px, env(safe-area-inset-bottom))" }}><img src={bottomIconBar} alt="" aria-hidden="true" draggable={false} className="pointer-events-none absolute inset-0 -z-10 h-full w-full object-cover scale-x-[1.12]" />{[{ label: "商城", route: "shop", icon: shopIcon }, { label: "心动时刻", route: "moments", icon: momentsIcon }, { label: "宠物", route: "pet", icon: petIcon }, { label: "心动档案", route: "album", icon: albumIcon }].map((tab) => (<button key={tab.route} type="button" aria-label={tab.label} onClick={() => onNavigate(tab.route as AppRoute)} className="flex flex-1 flex-col items-center gap-1 pb-1 active:scale-95"><img src={tab.icon} alt="" draggable={false} className="h-9 w-9 select-none object-contain drop-shadow-[0_0_10px_rgba(120,200,255,0.6)]" /><span className="text-[10px] font-medium leading-none text-white/90">{tab.label}</span></button>))}</nav>
     </div>
   )
 }