feat(ui): mobile responsive admin pages and floating api key create modal with docs update

Author: TQZHR

README.cloudflare.md

@@ -7,6 +7,7 @@
 - **D1（SQLite）**：持久化 Tokens / API Keys / 管理员会话 / 配置 / 日志
 - **KV**：缓存 `/images/*` 的图片/视频资源（从 `assets.grok.com` 代理抓取）
 - **每天 0 点统一清除**：通过 KV `expiration` + Workers Cron 定时清理元数据（`wrangler.toml` 已配置，默认按北京时间 00:00）
+- **前端移动端适配一致生效**：Workers 与 FastAPI/Docker 复用同一套 `/static/*` 资源，包含手机端抽屉导航、表格横向滚动、API Key 居中悬浮新增弹窗等交互
 
 > 原 Python/FastAPI 版本仍保留用于本地/Docker；Cloudflare 部署请按本文件走 Worker 版本。
 
@@ -255,7 +256,11 @@ region = "aws:us-east-1"
 2. 管理页可访问性：
    - `GET /admin/token`
    - `GET /admin/keys`
-3. 可选 smoke test：
+3. 移动端回归（建议使用 `390x844`）：
+   - `/admin/keys`：点击“新增 Key”后应为居中悬浮弹窗（有遮罩，可点遮罩关闭，可 `Esc` 关闭）
+   - 顶部导航：手机端应为抽屉菜单（可打开/关闭，点击菜单项后自动收起）
+   - Token/Keys/Cache 表格：应保持横向滚动，不应压碎列布局
+4. 可选 smoke test：
 
 ```bash
 python scripts/smoke_test.py --base-url https://<你的域名或workers.dev>

app/static/cache/cache.css

@@ -302,3 +302,61 @@
   box-shadow: 0 0 0 2px #000;
   border-color: #000;
 }
+
+@media (max-width: 768px) {
+  .cache-card {
+    padding: 12px 12px;
+  }
+
+  .cache-card .flex.items-start.justify-between {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .cache-stat-value {
+    font-size: 18px;
+  }
+
+  #batch-actions {
+    left: 12px;
+    right: 12px;
+    bottom: 10px;
+    transform: none;
+    border-radius: 12px;
+    padding: 10px;
+    gap: 10px;
+    flex-wrap: wrap;
+    cursor: default;
+  }
+
+  #batch-actions .toolbar-sep {
+    display: none;
+  }
+
+  #batch-actions .batch-actions-meta,
+  #batch-actions #batch-progress {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  #batch-actions .batch-actions-buttons {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px;
+  }
+
+  #batch-actions .batch-actions-buttons button {
+    width: 100%;
+  }
+
+  #batch-actions #batch-progress {
+    order: 3;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  #batch-actions #batch-progress .toolbar-sep {
+    display: none;
+  }
+}

app/static/cache/cache.html

@@ -10,7 +10,7 @@
   <link href="https://cdn.jsdelivr.net/npm/geist@1.0.0/dist/fonts/geist-sans/style.css" rel="stylesheet">
   <link href="https://cdn.jsdelivr.net/npm/geist@1.0.0/dist/fonts/geist-mono/style.css" rel="stylesheet">
   <link href="/static/common/common.css" rel="stylesheet">
-  <link href="/static/cache/cache.css?v=3" rel="stylesheet">
+  <link href="/static/cache/cache.css?v=4" rel="stylesheet">
   <link href="/static/common/toast.css" rel="stylesheet">
 </head>
 
@@ -19,7 +19,7 @@
 
   <main class="space-y-6 flex-1 container mx-auto max-w-4xl px-6 py-8 fade-in">
     <div class="space-y-6">
-      <div class="flex justify-between items-center">
+      <div class="flex flex-wrap justify-between items-start gap-3">
         <div>
           <h2 class="text-2xl font-semibold tracking-tight">缓存管理</h2>
           <p class="text-[var(--accents-4)] mt-1 text-sm">管理本地资源与在线资产缓存。</p>
@@ -151,13 +151,13 @@ <h2 class="text-2xl font-semibold tracking-tight">缓存管理</h2>
 
   <div id="batch-actions"
     class="fixed bottom-8 left-1/2 -translate-x-1/2 z-20 bg-white border border-[var(--border)] rounded-full px-3 py-2 flex items-center shadow-lg gap-3 cursor-move select-none active:cursor-grabbing whitespace-nowrap">
-    <div class="text-sm font-medium flex items-center gap-2">
+    <div class="batch-actions-meta text-sm font-medium flex items-center gap-2">
       <span class="text-[var(--accents-5)] text-xs">已选择</span>
       <span class="bg-black text-white text-xs px-1.5 py-0.5 rounded-full" id="selected-count">0</span>
       <span class="text-[var(--accents-5)] text-xs">项</span>
     </div>
     <span class="toolbar-sep"></span>
-    <div class="flex items-center gap-1">
+    <div class="batch-actions-buttons flex items-center gap-1">
       <button id="btn-load-stats" onclick="handleLoadClick()"
         class="geist-button-outline text-xs px-3 gap-1 border-0 hover:bg-gray-100">
         加载

app/static/chat/chat.css

@@ -104,10 +104,16 @@
 .composer-row {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 10px;
   margin-bottom: 10px;
 }
 
+.composer-primary {
+  flex-shrink: 0;
+  min-width: 86px;
+}
+
 .attach-preview {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -161,3 +167,74 @@
   display: block;
 }
 
+@media (max-width: 1024px) {
+  .chat-messages {
+    height: 360px;
+  }
+
+  .results-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 767px) {
+  .chat-public-header {
+    height: auto;
+    min-height: 56px;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: 8px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+
+  .chat-top-actions {
+    width: 100%;
+    flex-wrap: wrap;
+  }
+
+  .chat-top-actions a {
+    flex: 1 1 140px;
+  }
+
+  .chat-messages {
+    height: 300px;
+    padding: 10px;
+  }
+
+  .msg {
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .msg-role {
+    width: auto;
+    font-size: 11px;
+  }
+
+  .composer-row {
+    align-items: stretch;
+    gap: 8px;
+  }
+
+  #chat-attach-info,
+  #video-attach-info {
+    width: 100%;
+  }
+
+  .composer-row .flex-1 {
+    display: none;
+  }
+
+  .composer-primary {
+    width: 100%;
+  }
+
+  .attach-preview {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .results-grid {
+    grid-template-columns: 1fr;
+  }
+}

app/static/chat/chat.html

@@ -10,20 +10,20 @@
   <link href="https://cdn.jsdelivr.net/npm/geist@1.0.0/dist/fonts/geist-sans/style.css" rel="stylesheet">
   <link href="https://cdn.jsdelivr.net/npm/geist@1.0.0/dist/fonts/geist-mono/style.css" rel="stylesheet">
   <link href="/static/common/common.css" rel="stylesheet">
-  <link href="/static/chat/chat.css?v=1" rel="stylesheet">
+  <link href="/static/chat/chat.css?v=2" rel="stylesheet">
   <link href="/static/common/toast.css" rel="stylesheet">
 </head>
 
 <body class="min-h-screen flex flex-col" style="background-color: var(--bg);">
   <div id="toast-container" class="toast-container"></div>
 
   <header class="border-b border-[var(--border)] bg-[var(--bg)]/80 backdrop-blur-md sticky top-0 z-10">
-    <div class="max-w-5xl mx-auto px-6 h-14 flex items-center justify-between">
+    <div class="chat-public-header max-w-5xl mx-auto px-6 h-14 flex items-center justify-between">
       <div class="flex items-center gap-3">
         <div class="font-semibold tracking-tight">Grok2API</div>
         <div class="text-xs text-[var(--accents-5)]">在线聊天</div>
       </div>
-      <div class="flex items-center gap-2">
+      <div class="chat-top-actions flex items-center gap-2">
         <a href="/login" class="geist-button-outline text-xs px-3 py-1.5">后台登录</a>
         <a href="/admin/chat" class="geist-button-outline text-xs px-3 py-1.5">后台聊天</a>
       </div>
@@ -47,7 +47,7 @@
           <input id="stream-toggle" type="checkbox" class="checkbox" checked>
           <label for="stream-toggle" class="text-sm">Stream</label>
         </div>
-        <div class="col-span-6 md:col-span-2 flex justify-end gap-2">
+        <div class="col-span-12 md:col-span-2 flex flex-wrap justify-end gap-2">
           <button class="geist-button-outline text-xs px-3" onclick="saveApiKey()">保存</button>
           <button class="geist-button-danger text-xs px-3" onclick="clearApiKey()">清除</button>
         </div>
@@ -70,7 +70,7 @@
             <button class="geist-button-outline text-xs px-3" onclick="pickChatImage()">上传图片</button>
             <div id="chat-attach-info" class="text-xs text-[var(--accents-5)]"></div>
             <div class="flex-1"></div>
-            <button class="geist-button text-xs px-4" onclick="sendChat()">发送</button>
+            <button class="geist-button text-xs px-4 composer-primary" onclick="sendChat()">发送</button>
           </div>
           <textarea id="chat-input" class="geist-input h-24" placeholder="输入消息..."></textarea>
           <div id="chat-attach-preview" class="attach-preview hidden"></div>
@@ -142,7 +142,7 @@
             <button class="geist-button-outline text-xs px-3" onclick="pickVideoImage()">上传参考图（可选）</button>
             <div id="video-attach-info" class="text-xs text-[var(--accents-5)]"></div>
             <div class="flex-1"></div>
-            <button class="geist-button text-xs px-4" onclick="generateVideo()">生成视频</button>
+            <button class="geist-button text-xs px-4 composer-primary" onclick="generateVideo()">生成视频</button>
           </div>
           <div id="video-attach-preview" class="attach-preview hidden"></div>
         </div>
@@ -157,4 +157,3 @@
 </body>
 
 </html>
-

app/static/chat/chat_admin.html

@@ -10,7 +10,7 @@
   <link href="https://cdn.jsdelivr.net/npm/geist@1.0.0/dist/fonts/geist-sans/style.css" rel="stylesheet">
   <link href="https://cdn.jsdelivr.net/npm/geist@1.0.0/dist/fonts/geist-mono/style.css" rel="stylesheet">
   <link href="/static/common/common.css" rel="stylesheet">
-  <link href="/static/chat/chat.css?v=1" rel="stylesheet">
+  <link href="/static/chat/chat.css?v=2" rel="stylesheet">
   <link href="/static/common/toast.css" rel="stylesheet">
   <script>
     window.__CHAT_ADMIN__ = true;
@@ -38,7 +38,7 @@
           <input id="stream-toggle" type="checkbox" class="checkbox" checked>
           <label for="stream-toggle" class="text-sm">Stream</label>
         </div>
-        <div class="col-span-6 md:col-span-2 flex justify-end gap-2">
+        <div class="col-span-12 md:col-span-2 flex flex-wrap justify-end gap-2">
           <button class="geist-button-outline text-xs px-3" onclick="saveApiKey()">保存</button>
           <button class="geist-button-danger text-xs px-3" onclick="clearApiKey()">清除</button>
         </div>
@@ -61,7 +61,7 @@
             <button class="geist-button-outline text-xs px-3" onclick="pickChatImage()">上传图片</button>
             <div id="chat-attach-info" class="text-xs text-[var(--accents-5)]"></div>
             <div class="flex-1"></div>
-            <button class="geist-button text-xs px-4" onclick="sendChat()">发送</button>
+            <button class="geist-button text-xs px-4 composer-primary" onclick="sendChat()">发送</button>
           </div>
           <textarea id="chat-input" class="geist-input h-24" placeholder="输入消息..."></textarea>
           <div id="chat-attach-preview" class="attach-preview hidden"></div>
@@ -133,7 +133,7 @@
             <button class="geist-button-outline text-xs px-3" onclick="pickVideoImage()">上传参考图（可选）</button>
             <div id="video-attach-info" class="text-xs text-[var(--accents-5)]"></div>
             <div class="flex-1"></div>
-            <button class="geist-button text-xs px-4" onclick="generateVideo()">生成视频</button>
+            <button class="geist-button text-xs px-4 composer-primary" onclick="generateVideo()">生成视频</button>
           </div>
           <div id="video-attach-preview" class="attach-preview hidden"></div>
         </div>
@@ -153,4 +153,3 @@
 </body>
 
 </html>
-

app/static/common/admin-auth.js

@@ -226,18 +226,20 @@ function formatStorageLabel(type) {
 }
 
 async function updateStorageModeButton() {
-  const btn = document.getElementById('storage-mode-btn');
-  if (!btn) return;
-  btn.textContent = '...';
-  btn.title = '存储模式';
-  btn.classList.remove('storage-ready');
+  const buttons = Array.from(document.querySelectorAll('#storage-mode-btn, [data-storage-mode-btn]'));
+  if (!buttons.length) return;
+  buttons.forEach((btn) => {
+    btn.textContent = '...';
+    btn.title = '存储模式';
+    btn.classList.remove('storage-ready');
+  });
   const storageType = await fetchStorageType();
   const label = formatStorageLabel(storageType);
-  btn.textContent = label === '-' ? label : label.toUpperCase();
-  btn.title = '存储模式';
-  if (label !== '-') {
-    btn.classList.add('storage-ready');
-  }
+  buttons.forEach((btn) => {
+    btn.textContent = label === '-' ? label : label.toUpperCase();
+    btn.title = '存储模式';
+    if (label !== '-') btn.classList.add('storage-ready');
+  });
 }
 
 if (document.readyState === 'loading') {