gavindiaz/PolyWeather
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine homepage chrome controls

Browse Source
This commit is contained in:
2569718930@qq.com
2026-04-23 07:31:05 +08:00
parent bda476556f
commit ecba404e88
3 changed files with 60 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/dashboard/Dashboard.module.css
+48 -98
View File
@@ -127,102 +127,6 @@
inset 0 0 0 1px rgba(34, 211, 238, 0.04);
}
.root :global(.home-map-toolbar) {
position: fixed;
top: calc(var(--header-height) + 30px);
right: 412px;
z-index: 930;
display: flex;
align-items: center;
gap: 10px;
}
.root :global(.home-map-header) {
position: fixed;
top: calc(var(--header-height) + 28px);
left: calc(var(--sidebar-width) + 42px);
z-index: 930;
display: flex;
align-items: center;
}
.root :global(.home-map-title) {
display: flex;
flex-direction: column;
gap: 4px;
}
.root :global(.home-map-title strong) {
color: #f8fafc;
font-size: 15px;
font-weight: 750;
}
.root :global(.home-map-title span) {
color: rgba(148, 163, 184, 0.76);
font-size: 11px;
font-weight: 600;
}
.root :global(.home-map-modes) {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px;
border-radius: 14px;
border: 1px solid rgba(115, 137, 161, 0.18);
background: rgba(6, 12, 22, 0.88);
backdrop-filter: blur(16px);
}
.root :global(.home-map-modes button),
.root :global(.home-map-expand) {
border: none;
color: rgba(203, 213, 225, 0.88);
background: transparent;
cursor: pointer;
font: inherit;
transition: var(--transition);
}
.root :global(.home-map-modes button) {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
border-radius: 10px;
font-size: 12px;
font-weight: 700;
}
.root :global(.home-map-modes button.active) {
background: linear-gradient(
180deg,
rgba(28, 100, 242, 0.76),
rgba(31, 72, 184, 0.76)
);
color: #f8fafc;
box-shadow: 0 10px 24px rgba(37, 99, 235, 0.24);
}
.root :global(.home-map-modes button:hover),
.root :global(.home-map-expand:hover) {
color: #f8fafc;
background: rgba(30, 41, 59, 0.72);
}
.root :global(.home-map-expand) {
width: 38px;
height: 38px;
border-radius: 12px;
border: 1px solid rgba(115, 137, 161, 0.18);
background: rgba(6, 12, 22, 0.88);
backdrop-filter: blur(16px);
display: inline-flex;
align-items: center;
justify-content: center;
}
.weatherAura {
position: absolute;
inset: 0;
@@ -525,6 +429,42 @@
animation: spin 1s linear infinite;
}
.root :global(.locale-switch) {
height: 32px;
padding: 3px;
border-radius: 10px;
border: 1px solid rgba(34, 211, 238, 0.2);
background: rgba(8, 15, 27, 0.82);
color: rgba(148, 163, 184, 0.86);
display: inline-flex;
align-items: center;
gap: 2px;
font-size: 11px;
font-weight: 750;
cursor: pointer;
transition: var(--transition);
}
.root :global(.locale-switch span) {
min-width: 32px;
height: 24px;
border-radius: 7px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.root :global(.locale-switch span.active) {
color: #f8fafc;
background: rgba(34, 211, 238, 0.16);
box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.24);
}
.root :global(.locale-switch:hover) {
border-color: rgba(34, 211, 238, 0.34);
background: rgba(11, 22, 40, 0.94);
}
.root :global(.header-utility-btn) {
min-width: 32px;
height: 32px;
@@ -2405,7 +2345,6 @@
);
}
:global(html.light) .root :global(.home-map-title strong),
:global(html.light) .root :global(.home-panel-city h2),
:global(html.light) .root :global(.home-weather-main strong),
:global(html.light) .root :global(.home-weather-stat strong),
@@ -2419,7 +2358,6 @@
color: #0b1726;
}
:global(html.light) .root :global(.home-map-title span),
:global(html.light) .root :global(.home-panel-subtitle),
:global(html.light) .root :global(.home-weather-sub),
:global(html.light) .root :global(.home-weather-label),
@@ -2450,6 +2388,18 @@
0 10px 24px rgba(31, 64, 104, 0.12);
}
:global(html.light) .root :global(.locale-switch) {
background: rgba(255, 255, 255, 0.82);
border-color: rgba(36, 68, 104, 0.16);
color: rgba(66, 84, 108, 0.78);
}
:global(html.light) .root :global(.locale-switch span.active) {
color: #075985;
background: rgba(14, 165, 233, 0.14);
box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.22);
}
:global(html.light) .root :global(.city-list),
:global(html.light) .root :global(.home-intelligence-panel),
:global(html.light) .root :global(.home-opportunity-strip) {
frontend/components/dashboard/HeaderBar.tsx
+12 -1
View File
@@ -39,7 +39,7 @@ export function HeaderBar({
refreshSpinning?: boolean;
}) {
const store = useDashboardStore();
const { locale, t } = useI18n();
const { locale, t, toggleLocale } = useI18n();
const pathname = usePathname();
const [theme, setTheme] = useState<"dark" | "light">("dark");
const isAuthenticated = store.proAccess.authenticated;
@@ -169,6 +169,17 @@ export function HeaderBar({
</nav>
<div className="header-right">
<button
type="button"
className="locale-switch"
aria-label={locale === "en-US" ? "Switch to Chinese" : "切换到英文"}
title={locale === "en-US" ? "Switch to Chinese" : "切换到英文"}
onClick={toggleLocale}
>
<span className={clsx(locale === "zh-CN" && "active")}>中文</span>
<span className={clsx(locale === "en-US" && "active")}>EN</span>
</button>
<div className="live-badge" id="liveBadge">
<span className="pulse-dot" />
<span>{t("header.live")}</span>
frontend/components/dashboard/PolyWeatherDashboard.tsx
-19
View File
@@ -457,24 +457,6 @@ function buildDashboardSummaryCards(
];
}
function HomeMapToolbar() {
const { locale } = useI18n();
return (
<div className="home-map-header">
<div className="home-map-title">
<strong>
{locale === "en-US" ? "Global weather regime" : "全球天气态势"}
</strong>
<span>
{locale === "en-US"
? "Live monitored weather derivatives board"
: "天气衍生品实时监控面板"}
</span>
</div>
</div>
);
}
function projectHomeTrendPoint(
x: number,
y: number,
@@ -1476,7 +1458,6 @@ function DashboardScreen() {
)}
>
<MapCanvas />
<HomeMapToolbar />
<HeaderBar />
<CitySidebar />
{showHomepageChrome ? (