feat: implement PolyWeather dashboard layout and premium dark theme styles

This commit is contained in:
2569718930@qq.com
2026-04-23 03:43:05 +08:00
parent d0a98403e7
commit 83f16377a2
2 changed files with 71 additions and 58 deletions
@@ -1202,17 +1202,22 @@
.root :global(.home-intelligence-panel.full) { .root :global(.home-intelligence-panel.full) {
bottom: 18px; bottom: 18px;
width: min(360px, calc(100vw - var(--sidebar-width) - 56px)); width: min(372px, calc(100vw - var(--sidebar-width) - 56px));
gap: 12px; gap: 14px;
overflow-y: auto; overflow-y: auto;
border-color: rgba(34, 211, 238, 0.34); border-color: rgba(34, 211, 238, 0.22);
background: background:
radial-gradient( radial-gradient(
circle at 100% 0%, circle at 100% 0%,
rgba(37, 99, 235, 0.22), rgba(37, 99, 235, 0.18),
transparent 34% transparent 38%
), ),
linear-gradient(162deg, rgba(3, 12, 24, 0.94), rgba(6, 26, 48, 0.92)); radial-gradient(
circle at 0% 100%,
rgba(34, 211, 238, 0.06),
transparent 32%
),
linear-gradient(165deg, rgba(3, 10, 22, 0.96), rgba(5, 18, 38, 0.94));
} }
.root :global(.home-intelligence-panel.full::-webkit-scrollbar) { .root :global(.home-intelligence-panel.full::-webkit-scrollbar) {
@@ -1224,25 +1229,21 @@
border-radius: 999px; border-radius: 999px;
} }
.root :global(.home-panel-close) { /* Close button removed — panel always visible */
position: absolute;
top: 12px; .root :global(.home-panel-header-left) {
right: 14px; display: inline-flex;
z-index: 2; align-items: center;
width: 28px; gap: 8px;
height: 28px;
border: 0;
border-radius: 999px;
background: transparent;
color: rgba(226, 232, 240, 0.78);
cursor: pointer;
font-size: 24px;
line-height: 1;
} }
.root :global(.home-panel-close:hover) { .root :global(.home-panel-live-indicator) {
color: #fff; width: 7px;
background: rgba(148, 163, 184, 0.1); height: 7px;
border-radius: 999px;
background: #22c55e;
box-shadow: 0 0 10px rgba(34, 197, 94, 0.6);
animation: pulse 2s ease-in-out infinite;
} }
.root :global(.home-panel-header) { .root :global(.home-panel-header) {
@@ -1250,22 +1251,35 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 10px; gap: 10px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(115, 137, 161, 0.12);
} }
.root :global(.home-focus-title) { .root :global(.home-focus-title) {
color: #f8fafc; color: rgba(226, 232, 240, 0.92);
font-size: 12px; font-size: 10px;
font-weight: 700; font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
} }
.root :global(.home-why-link) { .root :global(.home-why-link) {
border: none; border: 1px solid rgba(96, 165, 250, 0.22);
background: transparent; border-radius: 999px;
color: #60a5fa; padding: 4px 10px;
background: rgba(96, 165, 250, 0.06);
color: #93c5fd;
cursor: pointer; cursor: pointer;
font: inherit; font: inherit;
font-size: 11px; font-size: 10px;
font-weight: 650; font-weight: 700;
transition: all 180ms ease;
}
.root :global(.home-why-link:hover) {
border-color: rgba(96, 165, 250, 0.42);
background: rgba(96, 165, 250, 0.12);
color: #bfdbfe;
} }
.root :global(.home-top-opportunity-label) { .root :global(.home-top-opportunity-label) {
@@ -1295,9 +1309,9 @@
.root :global(.home-card-titlebar) { .root :global(.home-card-titlebar) {
display: flex; display: flex;
align-items: flex-start;
justify-content: space-between; justify-content: space-between;
gap: 14px; gap: 14px;
padding-right: 26px;
} }
.root :global(.home-card-titlebar h2) { .root :global(.home-card-titlebar h2) {
@@ -1572,14 +1586,22 @@
.root :global(.home-deb-card), .root :global(.home-deb-card),
.root :global(.home-card-section) { .root :global(.home-card-section) {
border-radius: 18px; border-radius: 14px;
border: 1px solid rgba(115, 137, 161, 0.16); border: 1px solid rgba(115, 137, 161, 0.12);
background: linear-gradient( background: linear-gradient(
180deg, 180deg,
rgba(7, 14, 26, 0.92), rgba(8, 16, 30, 0.88),
rgba(9, 17, 30, 0.8) rgba(6, 12, 24, 0.74)
); );
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 2px 8px rgba(0, 0, 0, 0.18);
transition: border-color 200ms ease;
}
.root :global(.home-deb-card:hover),
.root :global(.home-card-section:hover) {
border-color: rgba(34, 211, 238, 0.18);
} }
.root :global(.home-deb-card) { .root :global(.home-deb-card) {
@@ -917,34 +917,25 @@ function HomeIntelligencePanel({ snapshots }: { snapshots: CitySnapshot[] }) {
aria-label={localizedCityName} aria-label={localizedCityName}
> >
<div className="home-panel-glow" aria-hidden="true" /> <div className="home-panel-glow" aria-hidden="true" />
<button
type="button"
className="home-panel-close"
aria-label={locale === "en-US" ? "Close city card" : "关闭城市卡片"}
onClick={store.clearCityFocus}
>
×
</button>
<div className="home-panel-header"> <div className="home-panel-header">
<span className="home-focus-title"> <div className="home-panel-header-left">
{locale === "en-US" ? "Focus city" : "焦点城市"} <span className="home-panel-live-indicator" aria-hidden="true" />
</span> <span className="home-focus-title">
{showOpportunityLabel
? locale === "en-US"
? "TOP OPPORTUNITY"
: "最佳机会"
: locale === "en-US"
? "FOCUS CITY"
: "焦点城市"}
</span>
</div>
<button type="button" className="home-why-link"> <button type="button" className="home-why-link">
{locale === "en-US" ? "Why this city?" : "为什么是它?"} {locale === "en-US" ? "Why this city?" : "为什么是它?"}
</button> </button>
</div> </div>
<div className="home-top-opportunity-label">
{showOpportunityLabel
? locale === "en-US"
? "Todays Top Opportunity"
: "今日最佳机会"
: locale === "en-US"
? "Focus City"
: "重点观察城市"}
</div>
<div className="home-card-titlebar"> <div className="home-card-titlebar">
<div> <div>
<h2>{localizedCityName}</h2> <h2>{localizedCityName}</h2>