mirrors2/auv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 热点穿透顶栏手机端换行自适应

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Sakurasan
2026-08-07 14:03:40 +08:00
co-authored by Claude
parent 548ebee47f
commit a1736c8a17
1 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/hot-map.tsx
+13 -13
View File
@@ -57,21 +57,21 @@ function HotMapPage() {
<div className="h-[100dvh] flex flex-col bg-background"> <div className="h-[100dvh] flex flex-col bg-background">
{/* ── 顶栏 ── */} {/* ── 顶栏 ── */}
<header className="shrink-0 z-10 bg-background/95 backdrop-blur border-b"> <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="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"> <div className="flex items-center gap-3 shrink-0">
<Link to="/themes" className="hover:opacity-70 transition-opacity"> <Link to="/themes" className="hover:opacity-70 transition-opacity shrink-0">
<ArrowLeft className="h-5 w-5" /> <ArrowLeft className="h-5 w-5" />
</Link> </Link>
<h1 className="text-base font-semibold">热点穿透</h1> <h1 className="text-base font-semibold whitespace-nowrap">热点穿透</h1>
</div> </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"> <div className="flex gap-0.5 text-xs border rounded-md overflow-hidden">
{MODES.map((m) => ( {MODES.map((m) => (
<button <button
key={m.key} key={m.key}
onClick={() => setMode(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 mode === m.key
? "bg-primary text-primary-foreground" ? "bg-primary text-primary-foreground"
: "text-muted-foreground hover:text-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"> <div className="flex gap-0.5 text-xs border rounded-md overflow-hidden">
<button <button
onClick={() => setView("graph")} 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" view === "graph"
? "bg-primary text-primary-foreground" ? "bg-primary text-primary-foreground"
: "text-muted-foreground hover:text-foreground" : "text-muted-foreground hover:text-foreground"
@@ -97,7 +97,7 @@ function HotMapPage() {
</button> </button>
<button <button
onClick={() => setView("list")} 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" view === "list"
? "bg-primary text-primary-foreground" ? "bg-primary text-primary-foreground"
: "text-muted-foreground hover:text-foreground" : "text-muted-foreground hover:text-foreground"
@@ -109,7 +109,7 @@ function HotMapPage() {
</div> </div>
<button <button
onClick={() => refetch()} onClick={() => refetch()}
className="text-muted-foreground hover:text-foreground transition-colors" className="text-muted-foreground hover:text-foreground transition-colors shrink-0"
title="刷新" title="刷新"
> >
<RefreshCw className={`h-4 w-4 ${isFetching ? "animate-spin" : ""}`} /> <RefreshCw className={`h-4 w-4 ${isFetching ? "animate-spin" : ""}`} />
@@ -119,14 +119,14 @@ function HotMapPage() {
{/* 统计条 */} {/* 统计条 */}
{graph?.stats && !isLoading && ( {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"> <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"> <span className="inline-flex items-center gap-1 whitespace-nowrap">
<MapIcon className="h-3 w-3 text-blue-500" /> 题材 {graph.stats.themeCount} <MapIcon className="h-3 w-3 text-blue-500" /> 题材 {graph.stats.themeCount}
</span> </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} <Target className="h-3 w-3 text-slate-400" /> 股票 {graph.stats.stockCount}
</span> </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} <Search className="h-3 w-3" /> 穿透核心股 {graph.stats.coreCount}
<span className="text-muted-foreground/70">(覆盖≥2个题材)</span> <span className="text-muted-foreground/70">(覆盖≥2个题材)</span>
</span> </span>