From a1736c8a172a65b70515ce73806bca9846089fb2 Mon Sep 17 00:00:00 2001
From: Sakurasan <26715255+Sakurasan@users.noreply.github.com>
Date: Fri, 7 Aug 2026 14:03:40 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=83=AD=E7=82=B9=E7=A9=BF=E9=80=8F?=
 =?UTF-8?q?=E9=A1=B6=E6=A0=8F=E6=89=8B=E6=9C=BA=E7=AB=AF=E6=8D=A2=E8=A1=8C?=
 =?UTF-8?q?=E8=87=AA=E9=80=82=E5=BA=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 顶栏去掉固定 h-12，改为 flex-wrap + py-2，按钮组窄屏自动换行不再溢出
- 统计条 flex-wrap + whitespace-nowrap，题材/股票/穿透核心股窄屏自动换行
- 返回箭头/标题/刷新按钮 shrink-0 防压缩

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/routes/hot-map.tsx | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/routes/hot-map.tsx b/src/routes/hot-map.tsx
index dfb7387..bd0e6b3 100644
--- a/src/routes/hot-map.tsx
+++ b/src/routes/hot-map.tsx
@@ -57,21 +57,21 @@ function HotMapPage() {
     <div className="h-[100dvh] flex flex-col bg-background">
       {/* ── 顶栏 ── */}
       <header className="shrink-0 z-10 bg-background/95 backdrop-blur border-b">
-        <div className="max-w-6xl mx-auto px-4 h-12 flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <Link to="/themes" className="hover:opacity-70 transition-opacity">
+        <div className="max-w-6xl mx-auto px-4 py-2 flex flex-wrap items-center justify-between gap-x-3 gap-y-1.5">
+          <div className="flex items-center gap-3 shrink-0">
+            <Link to="/themes" className="hover:opacity-70 transition-opacity shrink-0">
               <ArrowLeft className="h-5 w-5" />
             </Link>
-            <h1 className="text-base font-semibold">热点穿透</h1>
+            <h1 className="text-base font-semibold whitespace-nowrap">热点穿透</h1>
           </div>
-          <div className="flex items-center gap-2">
+          <div className="flex flex-wrap items-center justify-end gap-1.5">
             {/* 涨幅/热度切换 */}
             <div className="flex gap-0.5 text-xs border rounded-md overflow-hidden">
               {MODES.map((m) => (
                 <button
                   key={m.key}
                   onClick={() => setMode(m.key)}
-                  className={`px-2.5 py-1 flex items-center gap-1 transition-colors ${
+                  className={`px-2.5 py-1 flex items-center gap-1 transition-colors whitespace-nowrap ${
                     mode === m.key
                       ? "bg-primary text-primary-foreground"
                       : "text-muted-foreground hover:text-foreground"
@@ -86,7 +86,7 @@ function HotMapPage() {
             <div className="flex gap-0.5 text-xs border rounded-md overflow-hidden">
               <button
                 onClick={() => setView("graph")}
-                className={`px-2.5 py-1 flex items-center gap-1 transition-colors ${
+                className={`px-2.5 py-1 flex items-center gap-1 transition-colors whitespace-nowrap ${
                   view === "graph"
                     ? "bg-primary text-primary-foreground"
                     : "text-muted-foreground hover:text-foreground"
@@ -97,7 +97,7 @@ function HotMapPage() {
               </button>
               <button
                 onClick={() => setView("list")}
-                className={`px-2.5 py-1 flex items-center gap-1 transition-colors ${
+                className={`px-2.5 py-1 flex items-center gap-1 transition-colors whitespace-nowrap ${
                   view === "list"
                     ? "bg-primary text-primary-foreground"
                     : "text-muted-foreground hover:text-foreground"
@@ -109,7 +109,7 @@ function HotMapPage() {
             </div>
             <button
               onClick={() => refetch()}
-              className="text-muted-foreground hover:text-foreground transition-colors"
+              className="text-muted-foreground hover:text-foreground transition-colors shrink-0"
               title="刷新"
             >
               <RefreshCw className={`h-4 w-4 ${isFetching ? "animate-spin" : ""}`} />
@@ -119,14 +119,14 @@ function HotMapPage() {
 
         {/* 统计条 */}
         {graph?.stats && !isLoading && (
-          <div className="max-w-6xl mx-auto px-4 pb-1.5 flex items-center gap-3 text-[10px] text-muted-foreground">
-            <span className="inline-flex items-center gap-1">
+          <div className="max-w-6xl mx-auto px-4 pb-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-[10px] text-muted-foreground">
+            <span className="inline-flex items-center gap-1 whitespace-nowrap">
               <MapIcon className="h-3 w-3 text-blue-500" /> 题材 {graph.stats.themeCount}
             </span>
-            <span className="inline-flex items-center gap-1">
+            <span className="inline-flex items-center gap-1 whitespace-nowrap">
               <Target className="h-3 w-3 text-slate-400" /> 股票 {graph.stats.stockCount}
             </span>
-            <span className="inline-flex items-center gap-1 text-red-500">
+            <span className="inline-flex items-center gap-1 text-red-500 whitespace-nowrap">
               <Search className="h-3 w-3" /> 穿透核心股 {graph.stats.coreCount}
               <span className="text-muted-foreground/70">(覆盖≥2个题材)</span>
             </span>