diff --git a/control/frontend/src/App.tsx b/control/frontend/src/App.tsx
index ca5d100..ddfacf4 100644
--- a/control/frontend/src/App.tsx
+++ b/control/frontend/src/App.tsx
@@ -25,18 +25,24 @@ function Shell({ children }: { children: ReactNode }) {
return (
- 比特骆驼中控
-
+
+
比特骆驼中控
+
+
+
{!lanClient ? (
{user}
diff --git a/control/frontend/src/styles.css b/control/frontend/src/styles.css
index 2aa37e8..f005f6a 100644
--- a/control/frontend/src/styles.css
+++ b/control/frontend/src/styles.css
@@ -47,14 +47,25 @@ body {
}
.header {
+ position: relative;
display: flex;
align-items: center;
+ justify-content: space-between;
gap: 20px;
margin-bottom: 20px;
flex-wrap: wrap;
padding-bottom: 12px;
border-bottom: 1px solid var(--line);
box-shadow: 0 1px 0 rgba(0, 200, 255, 0.08);
+ min-height: 52px;
+}
+
+.header-left {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ z-index: 1;
+ min-width: 0;
}
.brand {
@@ -64,6 +75,36 @@ body {
color: var(--accent);
text-shadow: var(--glow);
text-transform: none;
+ white-space: nowrap;
+}
+
+.header-center {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ text-align: center;
+ pointer-events: none;
+ z-index: 0;
+ max-width: min(42vw, 360px);
+}
+
+.header-title {
+ font-weight: 700;
+ letter-spacing: 0.12em;
+ font-size: 1.2rem;
+ line-height: 1.25;
+ color: var(--accent);
+ text-shadow: var(--glow);
+ white-space: nowrap;
+}
+
+.header-subtitle {
+ margin-top: 2px;
+ font-size: 0.72rem;
+ letter-spacing: 0.18em;
+ color: var(--muted);
+ white-space: nowrap;
}
.nav {
@@ -89,10 +130,24 @@ body {
}
.header-right {
- margin-left: auto;
display: flex;
align-items: center;
gap: 10px;
+ z-index: 1;
+ margin-left: auto;
+ flex-shrink: 0;
+}
+
+@media (max-width: 900px) {
+ .header-center {
+ position: static;
+ transform: none;
+ order: 3;
+ width: 100%;
+ max-width: none;
+ margin-top: 4px;
+ pointer-events: auto;
+ }
}
.main h2 {