From f9e586582f6445b4933245e81d3dee3b75ab697b Mon Sep 17 00:00:00 2001 From: "liweiliang0905@gmail.com" Date: Fri, 23 Jan 2026 18:08:35 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=20H5=20=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 - 添加移动端 CSS: 隐藏桌面导航，响应式布局 - 表格改为卡片列表: 使用 data-label 属性显示字段名 - 按钮触摸目标: 最小 44px 高度 - 表单输入框: 48px 高度，font-size 16px - 底部 Tab 导航: 包含更多菜单和管理入口 - Safe area 支持: 适配刘海屏设备 - 操作按钮组: 移动端水平排列 Co-Authored-By: Claude Opus 4.5 --- src/vitals/web/app.py | 88 ++++++++++++++++++++++++++++++++++++------- 1 file changed, 75 insertions(+), 13 deletions(-) diff --git a/src/vitals/web/app.py b/src/vitals/web/app.py index ea28bcf..e1903d0 100644 --- a/src/vitals/web/app.py +++ b/src/vitals/web/app.py @@ -3064,6 +3064,34 @@ def get_admin_page_html() -> str: color: #ef4444; margin-bottom: 16px; } + /* 移动端适配 */ + @media (max-width: 768px) { + .nav { display: none !important; } + body { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } + .container { padding: 12px; } + header { padding: 20px 16px; margin-bottom: 16px; } + header h1 { font-size: 1.5rem; } + .card { padding: 16px; margin-bottom: 16px; } + .card h2 { font-size: 1.1rem; flex-direction: column; align-items: flex-start; gap: 12px; } + /* 表格改为卡片列表 */ + table, thead, tbody, th, td, tr { display: block; } + thead { display: none; } + tr { background: #f8f9fa; border-radius: 8px; padding: 12px; margin-bottom: 12px; border: 1px solid #e2e8f0; } + td { padding: 8px 0; border: none; display: flex; justify-content: space-between; align-items: center; } + td:before { content: attr(data-label); font-weight: 600; color: #64748b; font-size: 0.85rem; } + /* 按钮触摸目标 */ + .btn { min-height: 44px; padding: 12px 16px; font-size: 1rem; } + .btn-sm { min-height: 40px; padding: 10px 14px; } + /* 表单输入框 */ + .form-group input, .form-group select { font-size: 16px; min-height: 48px; padding: 14px 16px; } + /* 模态框 */ + .modal-content { margin: 12px; padding: 20px; } + .modal-footer { flex-direction: column; gap: 10px; } + .modal-footer .btn { width: 100%; } + /* 操作按钮组 */ + .action-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } + .action-buttons .btn { flex: 1; min-width: 80px; } + } @@ -3283,22 +3311,24 @@ def get_admin_page_html() -> str: const tbody = document.getElementById('usersBody'); tbody.innerHTML = users.map(user => ` - ${user.id} - ${user.name} - + ${user.id} + ${user.name} + ${user.is_disabled ? '已禁用' : '正常'} - ${user.is_admin ? '是' : '否'} - ${user.created_at.split('T')[0]} - + ${user.is_admin ? '是' : '否'} + ${user.created_at.split('T')[0]} + ${user.id !== currentUser.id ? ` +
${user.is_disabled ? `` : `` } +
` : '当前用户'} @@ -3353,13 +3383,13 @@ def get_admin_page_html() -> str: return ` - ${invite.code} - ${status} - ${creator ? creator.name : invite.created_by} - ${usedBy ? usedBy.name : '-'} - ${invite.created_at.split('T')[0]} - - ${!invite.is_used ? `` : ''} + ${invite.code} + ${status} + ${creator ? creator.name : invite.created_by} + ${usedBy ? usedBy.name : '-'} + ${invite.created_at.split('T')[0]} + + ${!invite.is_used ? `` : '-'} `; @@ -3410,6 +3440,38 @@ def get_admin_page_html() -> str: loadInvites(); } + + + + + + """