Add Beijing time clock to control header top-right.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -12,6 +12,33 @@ import MonitorPage from "./pages/Monitor";
|
|||||||
import SettingsPage from "./pages/Settings";
|
import SettingsPage from "./pages/Settings";
|
||||||
import StatsPage from "./pages/Stats";
|
import StatsPage from "./pages/Stats";
|
||||||
|
|
||||||
|
function formatBeijingTime(ms: number): string {
|
||||||
|
return new Date(ms).toLocaleString("zh-CN", {
|
||||||
|
timeZone: "Asia/Shanghai",
|
||||||
|
hour12: false,
|
||||||
|
year: "numeric",
|
||||||
|
month: "2-digit",
|
||||||
|
day: "2-digit",
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "2-digit",
|
||||||
|
second: "2-digit",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function BeijingClock() {
|
||||||
|
const [nowMs, setNowMs] = useState(() => Date.now());
|
||||||
|
useEffect(() => {
|
||||||
|
const t = window.setInterval(() => setNowMs(Date.now()), 1000);
|
||||||
|
return () => window.clearInterval(t);
|
||||||
|
}, []);
|
||||||
|
return (
|
||||||
|
<div className="header-beijing-time" title="Asia/Shanghai">
|
||||||
|
<span className="header-beijing-label">北京时间</span>
|
||||||
|
<span className="mono header-beijing-value">{formatBeijingTime(nowMs)}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
function Shell({ children }: { children: ReactNode }) {
|
function Shell({ children }: { children: ReactNode }) {
|
||||||
const user = getUsername();
|
const user = getUsername();
|
||||||
const [lanClient, setLanClient] = useState(false);
|
const [lanClient, setLanClient] = useState(false);
|
||||||
@@ -30,6 +57,7 @@ function Shell({ children }: { children: ReactNode }) {
|
|||||||
<div className="header-title">对冲舰队指挥中心</div>
|
<div className="header-title">对冲舰队指挥中心</div>
|
||||||
<div className="header-subtitle">—— 比特骆驼定制开发</div>
|
<div className="header-subtitle">—— 比特骆驼定制开发</div>
|
||||||
</div>
|
</div>
|
||||||
|
<BeijingClock />
|
||||||
</div>
|
</div>
|
||||||
<div className="header-bar">
|
<div className="header-bar">
|
||||||
<nav className="nav">
|
<nav className="nav">
|
||||||
|
|||||||
@@ -58,10 +58,12 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.header-top {
|
.header-top {
|
||||||
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
padding: 4px 0 2px;
|
padding: 4px 0 2px;
|
||||||
|
min-height: 3.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-title-wrap {
|
.header-title-wrap {
|
||||||
@@ -99,6 +101,48 @@ body {
|
|||||||
text-decoration-color: rgba(0, 200, 255, 0.45);
|
text-decoration-color: rgba(0, 200, 255, 0.45);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.header-beijing-time {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
gap: 2px;
|
||||||
|
z-index: 1;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-beijing-label {
|
||||||
|
font-size: 0.72rem;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-beijing-value {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
color: var(--accent);
|
||||||
|
text-shadow: var(--glow);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1100px) {
|
||||||
|
.header-top {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-beijing-time {
|
||||||
|
position: static;
|
||||||
|
transform: none;
|
||||||
|
align-items: center;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.header-bar {
|
.header-bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
Reference in New Issue
Block a user