From b547564befe97020b75d6b38eae563ef6ba89bc1 Mon Sep 17 00:00:00 2001
From: "liweiliang0905@gmail.com" <liweiliang0905@gmail.com>
Date: Fri, 23 Jan 2026 18:00:42 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E8=BF=90=E5=8A=A8/=E9=A5=AE=E9=A3=9F?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E7=A7=BB=E5=8A=A8=E7=AB=AF=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 运动页面: 响应式网格、表格转卡片、FAB 位置调整
- 饮食页面: 日历紧凑布局、照片网格优化
- 两页均添加底部 Tab 导航

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/vitals/web/app.py | 136 ++++++++++++++++++++++++++++++++++++------
 1 file changed, 119 insertions(+), 17 deletions(-)

diff --git a/src/vitals/web/app.py b/src/vitals/web/app.py
index 7e136c5..2c08488 100644
--- a/src/vitals/web/app.py
+++ b/src/vitals/web/app.py
@@ -4179,15 +4179,24 @@ def get_exercise_page_html() -> str:
         .nav a:hover {
             color: #667eea;
         }
+        /* 移动端适配 */
         @media (max-width: 768px) {
-            .nav {
-                flex-wrap: wrap;
-                gap: 10px;
-            }
-            .modal-content {
-                margin: 5% auto;
-                width: 95%;
-            }
+            .nav { display: none !important; }
+            body { padding-bottom: 80px; }
+            .container { padding: 12px; }
+            header { padding: 18px 14px; margin-bottom: 16px; }
+            header h1 { font-size: 1.4rem; }
+            .grid { grid-template-columns: 1fr 1fr; gap: 10px; }
+            .card { padding: 12px; }
+            .card .value { font-size: 1.4rem; }
+            .fab { bottom: 84px; right: 16px; width: 52px; height: 52px; }
+            .modal-content { margin: 5% auto; width: 95%; padding: 16px; }
+            /* 表格转卡片 */
+            table, thead, tbody, th, td, tr { display: block; }
+            thead { display: none; }
+            tr { background: white; margin-bottom: 12px; padding: 12px; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
+            td { padding: 6px 0; border: none; display: flex; justify-content: space-between; }
+            td:before { content: attr(data-label); font-weight: 600; color: #666; }
         }
     </style>
 </head>
@@ -4496,6 +4505,45 @@ def get_exercise_page_html() -> str:
         document.getElementById('addExerciseForm').addEventListener('submit', submitExerciseForm);
         loadExerciseStats();
         loadExerciseList();
+
+        // 检查管理员状态
+        const user = JSON.parse(localStorage.getItem('user') || '{}');
+        if (user.is_admin) {
+            const adminLink = document.getElementById('admin-link');
+            if (adminLink) adminLink.style.display = 'block';
+        }
+    </script>
+
+    <!-- 移动端底部导航 -->
+    <nav class="mobile-nav">
+        <a href="/" class="mobile-nav-item"><svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg><span class="nav-label">首页</span></a>
+        <a href="/exercise" class="mobile-nav-item active"><svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg><span class="nav-label">运动</span></a>
+        <a href="/meal" class="mobile-nav-item"><svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8h1a4 4 0 0 1 0 8h-1"/><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"/><line x1="6" y1="1" x2="6" y2="4"/><line x1="10" y1="1" x2="10" y2="4"/><line x1="14" y1="1" x2="14" y2="4"/></svg><span class="nav-label">饮食</span></a>
+        <a href="/sleep" class="mobile-nav-item"><svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg><span class="nav-label">睡眠</span></a>
+        <div class="mobile-nav-item more-trigger" onclick="toggleMoreMenu()"><svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg><span class="nav-label">更多</span></div>
+    </nav>
+    <div id="more-menu" class="more-menu hidden">
+        <a href="/weight" class="more-menu-item">体重</a>
+        <a href="/reading" class="more-menu-item">阅读</a>
+        <a href="/report" class="more-menu-item">报告</a>
+        <a href="/settings" class="more-menu-item">设置</a>
+        <a href="/admin" class="more-menu-item" id="admin-link" style="display:none">管理</a>
+    </div>
+    <style>
+    .mobile-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 64px; background: white; border-top: 1px solid #E2E8F0; display: none; justify-content: space-around; align-items: center; z-index: 50; }
+    .mobile-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 64px; min-height: 44px; color: #64748B; text-decoration: none; cursor: pointer; }
+    .mobile-nav-item.active { color: #11998e; }
+    .nav-icon { width: 24px; height: 24px; margin-bottom: 2px; }
+    .nav-label { font-size: 10px; font-weight: 500; }
+    .more-menu { position: fixed; bottom: 72px; right: 16px; background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); padding: 8px 0; z-index: 51; }
+    .more-menu.hidden { display: none; }
+    .more-menu-item { display: block; padding: 12px 24px; color: #1E293B; text-decoration: none; }
+    .more-menu-item:hover { background: #F1F5F9; }
+    @media (max-width: 768px) { .mobile-nav { display: flex; } }
+    </style>
+    <script>
+    function toggleMoreMenu() { document.getElementById('more-menu').classList.toggle('hidden'); }
+    document.addEventListener('click', function(e) { if (!e.target.closest('.more-trigger') && !e.target.closest('.more-menu')) { document.getElementById('more-menu').classList.add('hidden'); } });
     </script>
 </body>
 </html>
@@ -4754,16 +4802,31 @@ def get_meal_page_html() -> str:
         button:disabled { opacity: 0.7; cursor: not-allowed; }
         .nav a { transition: color 0.2s; }
         .nav a:hover { color: #f59e0b; }
+        /* 移动端适配 */
         @media (max-width: 768px) {
-            .nav {
-                flex-wrap: wrap;
-                gap: 10px;
-            }
-            .calendar .day {
-                min-height: 60px;
-                padding: 8px;
-            }
-            .modal-content { margin: 5% auto; width: 95%; }
+            .nav { display: none !important; }
+            body { padding-bottom: 80px; }
+            .container { padding: 12px; }
+            header { padding: 18px 14px; margin-bottom: 16px; }
+            header h1 { font-size: 1.4rem; }
+            .grid { grid-template-columns: 1fr 1fr; gap: 10px; }
+            .card { padding: 12px; }
+            .card .value { font-size: 1.4rem; }
+            .fab { bottom: 84px; right: 16px; width: 52px; height: 52px; }
+            .modal-content { margin: 5% auto; width: 95%; padding: 16px; }
+            .calendar { grid-template-columns: repeat(7, 1fr); gap: 4px; }
+            .calendar .day { min-height: 50px; padding: 6px; font-size: 0.75rem; }
+            .photo-grid { grid-template-columns: repeat(2, 1fr); }
+            .photo-grid img { height: 100px; }
+            /* 表格转卡片 */
+            table, thead, tbody, th, td, tr { display: block; }
+            thead { display: none; }
+            tr { background: white; margin-bottom: 12px; padding: 12px; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
+            td { padding: 6px 0; border: none; display: flex; justify-content: space-between; }
+            td:before { content: attr(data-label); font-weight: 600; color: #666; }
+        }
+        @media (max-width: 480px) {
+            .grid { grid-template-columns: 1fr; }
         }
     </style>
 </head>
@@ -5230,6 +5293,45 @@ def get_meal_page_html() -> str:
 
         document.getElementById('addMealForm').addEventListener('submit', submitMealForm);
         loadMealStats();
+
+        // 检查管理员状态
+        const user = JSON.parse(localStorage.getItem('user') || '{}');
+        if (user.is_admin) {
+            const adminLink = document.getElementById('admin-link');
+            if (adminLink) adminLink.style.display = 'block';
+        }
+    </script>
+
+    <!-- 移动端底部导航 -->
+    <nav class="mobile-nav">
+        <a href="/" class="mobile-nav-item"><svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg><span class="nav-label">首页</span></a>
+        <a href="/exercise" class="mobile-nav-item"><svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg><span class="nav-label">运动</span></a>
+        <a href="/meal" class="mobile-nav-item active"><svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8h1a4 4 0 0 1 0 8h-1"/><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"/><line x1="6" y1="1" x2="6" y2="4"/><line x1="10" y1="1" x2="10" y2="4"/><line x1="14" y1="1" x2="14" y2="4"/></svg><span class="nav-label">饮食</span></a>
+        <a href="/sleep" class="mobile-nav-item"><svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg><span class="nav-label">睡眠</span></a>
+        <div class="mobile-nav-item more-trigger" onclick="toggleMoreMenu()"><svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg><span class="nav-label">更多</span></div>
+    </nav>
+    <div id="more-menu" class="more-menu hidden">
+        <a href="/weight" class="more-menu-item">体重</a>
+        <a href="/reading" class="more-menu-item">阅读</a>
+        <a href="/report" class="more-menu-item">报告</a>
+        <a href="/settings" class="more-menu-item">设置</a>
+        <a href="/admin" class="more-menu-item" id="admin-link" style="display:none">管理</a>
+    </div>
+    <style>
+    .mobile-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 64px; background: white; border-top: 1px solid #E2E8F0; display: none; justify-content: space-around; align-items: center; z-index: 50; }
+    .mobile-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 64px; min-height: 44px; color: #64748B; text-decoration: none; cursor: pointer; }
+    .mobile-nav-item.active { color: #f59e0b; }
+    .nav-icon { width: 24px; height: 24px; margin-bottom: 2px; }
+    .nav-label { font-size: 10px; font-weight: 500; }
+    .more-menu { position: fixed; bottom: 72px; right: 16px; background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); padding: 8px 0; z-index: 51; }
+    .more-menu.hidden { display: none; }
+    .more-menu-item { display: block; padding: 12px 24px; color: #1E293B; text-decoration: none; }
+    .more-menu-item:hover { background: #F1F5F9; }
+    @media (max-width: 768px) { .mobile-nav { display: flex; } }
+    </style>
+    <script>
+    function toggleMoreMenu() { document.getElementById('more-menu').classList.toggle('hidden'); }
+    document.addEventListener('click', function(e) { if (!e.target.closest('.more-trigger') && !e.target.closest('.more-menu')) { document.getElementById('more-menu').classList.add('hidden'); } });
     </script>
 </body>
 </html>