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; }