feat(display): site name and avatar in the top bar, content aligned left [CI SKIP]

web/display/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>MoShiro</title>
+    <link rel="icon" type="image/png" href="/src/assets/avatar-64.png" />
   </head>
   <body>
     <div id="root"></div>

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() {
             <NavLink to={`/${familyQuery}`} end className={({ isActive }) => (isActive ? 'active' : '')}>
               总览
             </NavLink>
+          <NavLink to={`/${familyQuery}`} className="brand">
+            <img className="brand-logo" src={avatar} alt="" width={36} height={36} />
+            <span>MoShiro</span>
+          </NavLink>
             <NavLink to={`/compare${familyQuery}`} className={({ isActive }) => (isActive ? 'active' : '')}>
               对比
             </NavLink>
-            <a href="/admin/">管理</a>
           </nav>
           <SourceButton variant="status" />
           <ThemeToggle />

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