feat(web): add mobile-first read-only dashboard frontend

reaction_board/web/static/index.html

@@ -2,12 +2,32 @@
 <html lang="zh-CN">
 <head>
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <meta name="color-scheme" content="light dark">
   <title>咻咻满 Reaction 看板</title>
+  <link rel="icon" href="/static/favicon.svg" type="image/svg+xml">
   <link rel="stylesheet" href="/static/style.css">
 </head>
 <body>
-  <div id="app">正在加载…</div>
+  <div class="app" id="app">
+    <header class="topbar">
+      <a class="brand" href="#/home">
+        <span class="brand-mark">咻</span>
+        <span class="brand-text">
+          <strong>Reaction 看板</strong>
+          <small id="topbar-title">最新动态</small>
+        </span>
+      </a>
+      <span class="topbar-hint">只读</span>
+    </header>
+    <div class="preview-banner" id="preview-banner" hidden>预览数据 · 只读 · 不影响真实数据库</div>
+    <main class="main-shell">
+      <div id="view"></div>
+    </main>
+    <nav class="bottom-nav" id="bottom-nav" aria-label="主导航"></nav>
+  </div>
+  <div class="toast" id="toast" role="status" aria-live="polite"></div>
+  <script src="/static/vendor/echarts.min.js"></script>
   <script type="module" src="/static/app.js"></script>
 </body>
 </html>