diff --git a/web/display/index.html b/web/display/index.html
index 5941697..e3de263 100644
--- a/web/display/index.html
+++ b/web/display/index.html
@@ -4,6 +4,7 @@
MoShiro
+
diff --git a/web/display/src/App.tsx b/web/display/src/App.tsx
index a9279dd..3450991 100644
--- a/web/display/src/App.tsx
+++ b/web/display/src/App.tsx
@@ -1,3 +1,5 @@
+import { useRef } from 'react'
+import avatar from './assets/avatar.png'
import { BuildFooter } from './BuildFooter'
import { NavLink, Navigate, Route, Routes, useLocation, useParams } from 'react-router-dom'
import { SourceButton, ThemeToggle } from '@shared/ui'
@@ -22,10 +24,13 @@ export function App() {
(isActive ? 'active' : '')}>
总览
+
+
+ MoShiro
+
(isActive ? 'active' : '')}>
对比
- 管理
diff --git a/web/display/src/assets/avatar-64.png b/web/display/src/assets/avatar-64.png
new file mode 100644
index 0000000..ae5eea0
Binary files /dev/null and b/web/display/src/assets/avatar-64.png differ
diff --git a/web/display/src/assets/avatar.png b/web/display/src/assets/avatar.png
new file mode 100644
index 0000000..93b459c
Binary files /dev/null and b/web/display/src/assets/avatar.png differ
diff --git a/web/display/src/display.css b/web/display/src/display.css
index ebdd0b1..89102ad 100644
--- a/web/display/src/display.css
+++ b/web/display/src/display.css
@@ -10,8 +10,7 @@
}
.topbar .inner {
- max-width: 1200px;
- margin: 0 auto;
+ /* 不再限宽居中:站点名和头像贴着左边,导航、状态和主题按钮整体靠右 */
padding: 0 24px;
height: 60px;
display: flex;
@@ -20,11 +19,23 @@
}
.brand {
+ display: flex;
+ align-items: center;
+ gap: 10px;
font-size: 18px;
font-weight: 700;
+ letter-spacing: 0.01em;
color: var(--app-ink);
}
+.brand-logo {
+ width: 36px;
+ height: 36px;
+ object-fit: contain;
+ /* 头像是透明底的立绘,给一点投影让它在背景图上更清楚 */
+ filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--app-shadow) 35%, transparent));
+}
+
.brand:hover {
text-decoration: none;
}
@@ -52,9 +63,10 @@
color: var(--app-on-accent-container);
}
+/* 内容贴着屏幕左边排列(不居中),右边留给背景图 */
.page {
max-width: 1200px;
- margin: 0 auto;
+ margin: 0;
padding: 40px 24px 80px;
}