彻底修复移动端按钮溢出和布局问题

主要改进:
- 添加overflow-x: hidden防止水平滚动
- Header按钮缩小字体和padding,确保不溢出
- 工具栏改为垂直布局,按钮支持flex换行
- 所有按钮添加white-space: nowrap防止内部换行
- 账号卡片操作区域改为垂直布局
- 模态窗口按钮改为100%宽度垂直堆叠
- 表格容器添加横向滚动支持
- 优化所有flex容器的flex-wrap属性
- 减小移动端所有元素的padding和font-size
- 确保所有输入框和选择框width: 100%

受影响文件:
- templates/index.html - 全面优化移动端布局
- templates/admin.html - 全面优化管理后台移动端布局

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

templates/admin.html

@@ -328,105 +328,196 @@
         /* 移动端优化 */
         @media (max-width: 767px) {
             * { -webkit-tap-highlight-color: transparent; }
+            body { overflow-x: hidden; }
 
-            .header { padding: 10px 12px; }
+            .header {
-            .header h1 { font-size: 15px; }
+                padding: 8px 10px;
-            .header-actions { gap: 6px; }
+                min-height: auto;
-            .header-actions > span { font-size: 11px; }
+            }
-            .btn { padding: 5px 10px; font-size: 11px; }
+            .header-content {
-            .btn-logout { padding: 5px 10px; }
+                flex-wrap: wrap;
+                gap: 6px;
+            }
+            .header h1 {
+                font-size: 14px;
+                flex: 1 1 auto;
+                min-width: 0;
+            }
+            .header-actions {
+                gap: 4px;
+                flex-wrap: wrap;
+                justify-content: flex-end;
+                flex: 0 0 auto;
+            }
+            .header-actions > span {
+                font-size: 10px;
+                max-width: 80px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+            .btn {
+                padding: 4px 8px;
+                font-size: 10px;
+                white-space: nowrap;
+            }
+            .btn-logout {
+                padding: 4px 8px;
+                font-size: 10px;
+            }
 
-            .container { padding: 12px; }
+            .container {
+                padding: 10px;
+                max-width: 100%;
+                overflow-x: hidden;
+            }
 
             .stats-grid {
                 grid-template-columns: repeat(2, 1fr);
-                gap: 8px;
+                gap: 6px;
-                margin-bottom: 15px;
+                margin-bottom: 12px;
             }
-            .stat-card { padding: 12px 10px; }
+            .stat-card { padding: 10px 8px; }
-            .stat-value { font-size: 24px; }
+            .stat-value { font-size: 20px; }
-            .stat-label { font-size: 11px; }
+            .stat-label { font-size: 10px; }
 
-            .panel { padding: 12px; margin-bottom: 12px; }
+            .panel {
-            .panel-title { font-size: 15px; margin-bottom: 12px; padding-bottom: 6px; }
+                padding: 10px;
+                margin-bottom: 10px;
+                overflow-x: hidden;
+            }
+            .panel-title {
+                font-size: 14px;
+                margin-bottom: 10px;
+                padding-bottom: 6px;
+            }
 
             .tabs {
-                gap: 3px;
+                gap: 4px;
-                margin-bottom: 12px;
+                margin-bottom: 10px;
                 padding-bottom: 0;
                 overflow-x: auto;
                 -webkit-overflow-scrolling: touch;
+                display: flex;
+                flex-wrap: nowrap;
             }
             .tab {
-                padding: 8px 12px;
+                padding: 7px 10px;
-                font-size: 12px;
+                font-size: 11px;
                 flex-shrink: 0;
+                white-space: nowrap;
             }
 
             .table-container {
-                margin: -12px;
+                margin: -10px;
-                padding: 12px 0;
+                padding: 10px 0;
+                overflow-x: auto;
+                -webkit-overflow-scrolling: touch;
             }
             table {
                 min-width: 800px;
-                font-size: 11px;
+                font-size: 10px;
             }
-            th { padding: 8px 6px; font-size: 11px; }
+            th { padding: 6px 4px; font-size: 10px; }
-            td { padding: 8px 6px; font-size: 11px; }
+            td { padding: 6px 4px; font-size: 10px; }
 
-            .status-badge { padding: 3px 8px; font-size: 10px; }
+            .status-badge {
+                padding: 2px 6px;
+                font-size: 9px;
+                white-space: nowrap;
+            }
 
-            .btn-small { padding: 4px 6px; font-size: 10px; margin: 1px; }
+            .btn-small {
+                padding: 3px 5px;
+                font-size: 9px;
+                margin: 1px;
+                white-space: nowrap;
+            }
 
-            .form-group { margin-bottom: 12px; }
+            .action-buttons {
-            .form-group label { font-size: 12px; margin-bottom: 5px; }
+                gap: 2px;
+                display: flex;
+                flex-wrap: wrap;
+            }
+
+            .form-group { margin-bottom: 10px; }
+            .form-group label {
+                font-size: 12px;
+                margin-bottom: 4px;
+            }
             .form-group input,
             .form-group select {
                 padding: 8px;
                 font-size: 14px;
+                width: 100%;
                 max-width: 100%;
+                box-sizing: border-box;
             }
 
             .notification {
                 top: 10px;
                 right: 10px;
                 left: 10px;
-                padding: 10px 12px;
+                padding: 8px 10px;
-                font-size: 12px;
+                font-size: 11px;
+                max-width: calc(100% - 20px);
             }
 
-            .user-info { font-size: 10px; margin-top: 2px; }
+            .user-info {
-            .vip-badge-inline, .normal-badge-inline {
                 font-size: 9px;
-                padding: 2px 6px;
+                margin-top: 2px;
+            }
+            .vip-badge-inline, .normal-badge-inline {
+                font-size: 8px;
+                padding: 2px 5px;
             }
 
-            .action-buttons { gap: 3px; }
+            .empty-message {
-
+                padding: 16px 8px;
-            .empty-message { padding: 20px 10px; font-size: 12px; }
+                font-size: 11px;
+            }
 
             /* 系统状态卡片优化 */
             [style*="display: flex"][style*="justify-content: space-between"] {
-                gap: 10px !important;
+                flex-wrap: wrap !important;
+                gap: 8px !important;
             }
 
             /* 系统配置表单优化 */
+            #scheduleWeekdaysGroup {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 4px;
+            }
             #scheduleWeekdaysGroup label {
-                font-size: 12px;
+                font-size: 11px;
-                padding: 4px 8px;
+                padding: 4px 7px;
+                flex: 0 0 auto;
             }
 
             /* 分页控件优化 */
             #logsPagination {
-                gap: 5px;
+                gap: 4px;
-                padding: 10px 0;
+                padding: 8px 0;
+                flex-wrap: wrap;
+                justify-content: center;
             }
             #logsPagination button {
-                padding: 5px 8px;
+                padding: 4px 7px;
-                font-size: 11px;
+                font-size: 10px;
             }
             #logsPagination span {
-                font-size: 11px;
+                font-size: 10px;
+            }
+
+            /* 模态窗口优化 */
+            .modal {
+                max-width: calc(100% - 20px) !important;
+            }
+
+            /* 操作按钮组优化 */
+            td .action-buttons,
+            .panel .action-buttons {
+                justify-content: flex-start;
             }
         }
 

templates/index.html

@@ -254,62 +254,254 @@
         .feedback-status-closed { background: #ECEFF1; color: #546E7A; }
 
         @media (max-width: 768px) {
-            .header { padding: 0 12px; min-height: auto; }
+            body { overflow-x: hidden; }
-            .header-title { font-size: 16px; }
-            .header-actions { gap: 4px; }
-            .header-actions .btn { padding: 5px 10px; font-size: 12px; }
-            .user-info { font-size: 12px; }
 
-            .sidebar { width: 100%; position: fixed; top: auto; bottom: 0; height: 60px; border-right: none; border-top: 1px solid var(--md-divider); display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; }
+            .header {
-            .nav-item { flex-direction: column; padding: 8px 12px; border-left: none; border-top: 3px solid transparent; min-width: 70px; text-align: center; flex-shrink: 0; }
+                padding: 8px 10px;
+                min-height: auto;
+                flex-wrap: wrap;
+            }
+            .header-title {
+                font-size: 15px;
+                flex: 1 1 auto;
+                min-width: 0;
+            }
+            .header-title span:last-child {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+            .header-actions {
+                gap: 4px;
+                flex-wrap: wrap;
+                justify-content: flex-end;
+            }
+            .header-actions .btn {
+                padding: 4px 8px;
+                font-size: 11px;
+                white-space: nowrap;
+            }
+            .user-info {
+                font-size: 11px;
+                gap: 4px;
+            }
+            .user-info #usernameDisplay {
+                max-width: 60px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+            .vip-badge, .normal-badge {
+                padding: 2px 6px;
+                font-size: 10px;
+            }
+
+            .sidebar {
+                width: 100%;
+                position: fixed;
+                top: auto;
+                bottom: 0;
+                height: 60px;
+                border-right: none;
+                border-top: 1px solid var(--md-divider);
+                display: flex;
+                overflow-x: auto;
+                -webkit-overflow-scrolling: touch;
+                z-index: 999;
+            }
+            .nav-item {
+                flex-direction: column;
+                padding: 8px 12px;
+                border-left: none;
+                border-top: 3px solid transparent;
+                min-width: 70px;
+                text-align: center;
+                flex-shrink: 0;
+            }
             .nav-item.active { border-left-color: transparent; border-top-color: var(--md-primary); }
             .nav-icon { font-size: 18px; }
             .nav-label { font-size: 10px; }
 
-            .main-content { margin-left: 0; margin-bottom: 60px; max-width: 100%; padding: 16px; }
+            .main-content {
+                margin-left: 0;
+                margin-bottom: 60px;
+                max-width: 100%;
+                width: 100%;
+                padding: 12px;
+                overflow-x: hidden;
+            }
             .accounts-grid { grid-template-columns: 1fr; gap: 12px; }
 
-            .card { padding: 16px; margin-bottom: 16px; }
+            .card { padding: 12px; margin-bottom: 12px; }
-            .card-header { flex-direction: column; align-items: flex-start; gap: 8px; }
+            .card-header {
-            .card-title { font-size: 16px; }
+                flex-direction: column;
+                align-items: stretch;
+                gap: 10px;
+            }
+            .card-header > div {
+                display: flex;
+                gap: 6px;
+                flex-wrap: wrap;
+            }
+            .card-header .btn {
+                flex: 1;
+                min-width: 0;
+                padding: 8px 12px;
+                font-size: 12px;
+            }
+            .card-title { font-size: 15px; }
 
-            .stats-row { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
+            .stats-row {
-            .stat-card { padding: 12px; }
+                grid-template-columns: repeat(2, 1fr);
-            .stat-value { font-size: 24px; }
+                gap: 8px;
-            .stat-label { font-size: 11px; }
+                margin-bottom: 12px;
+            }
+            .stat-card { padding: 10px 8px; }
+            .stat-value { font-size: 22px; }
+            .stat-label { font-size: 10px; }
 
-            .toolbar { padding: 12px; gap: 12px; }
+            .toolbar {
-            .toolbar-group { width: 100%; gap: 6px; }
+                padding: 10px;
-            .toolbar-group .select-inline { width: 100%; }
+                gap: 8px;
+                flex-direction: column;
+            }
+            .toolbar-group {
+                width: 100%;
+                gap: 6px;
+                flex-wrap: wrap;
+            }
+            .toolbar-group .select-inline {
+                flex: 1;
+                min-width: 100px;
+                max-width: 100%;
+            }
+            .toolbar-group .btn {
+                flex: 1 1 auto;
+                min-width: 0;
+                padding: 8px 10px;
+                font-size: 11px;
+                white-space: nowrap;
+            }
+            .toolbar-group .switch {
+                flex-shrink: 0;
+            }
             .toolbar-divider { display: none; }
 
-            .account-card-actions { padding: 12px; gap: 6px; }
+            .account-card { overflow: hidden; }
-            .account-card-actions .select-inline { width: 100%; min-width: auto; }
+            .account-card-actions {
-            .account-card-actions .btn-small { flex: 1; min-width: 60px; }
+                padding: 10px;
+                gap: 6px;
+                flex-direction: column;
+            }
+            .account-card-actions .select-inline {
+                width: 100%;
+                min-width: auto;
+                max-width: 100%;
+            }
+            .account-card-actions .btn {
+                width: 100%;
+                padding: 8px;
+                font-size: 12px;
+            }
 
-            .schedule-card { padding: 12px; gap: 12px; }
+            .schedule-card {
+                padding: 12px;
+                gap: 10px;
+                flex-direction: column;
+            }
             .schedule-info { min-width: 100%; }
-            .schedule-actions { width: 100%; justify-content: flex-start; }
+            .schedule-actions {
+                width: 100%;
+                justify-content: stretch;
+                gap: 6px;
+            }
+            .schedule-actions .btn {
+                flex: 1;
+                padding: 6px 10px;
+                font-size: 11px;
+            }
 
-            .modal { margin: 0; border-radius: 12px; }
+            .modal {
-            .modal-header { padding: 16px; }
+                margin: 0;
-            .modal-title { font-size: 16px; }
+                border-radius: 12px;
-            .modal-body { padding: 16px; }
+                max-width: calc(100% - 24px);
-            .modal-footer { padding: 12px 16px; }
+            }
+            .modal-header { padding: 14px; }
+            .modal-title { font-size: 15px; }
+            .modal-body { padding: 14px; }
+            .modal-footer {
+                padding: 10px 14px;
+                flex-direction: column;
+                gap: 8px;
+            }
+            .modal-footer .btn {
+                width: 100%;
+                padding: 10px;
+            }
 
-            .fab { bottom: 80px; min-width: 120px; height: 48px; border-radius: 24px; font-size: 14px; }
+            .fab {
-            .fab-icon { font-size: 20px; }
+                bottom: 80px;
-            .fab-text { font-size: 14px; }
+                min-width: 110px;
+                height: 46px;
+                border-radius: 23px;
+                font-size: 13px;
+                padding: 0 16px;
+            }
+            .fab-icon { font-size: 18px; }
+            .fab-text { font-size: 13px; }
 
-            .preview-controls { bottom: 80px; }
+            .preview-controls {
-            .preview-close { top: 16px; right: 16px; width: 40px; height: 40px; font-size: 20px; }
+                bottom: 80px;
-            .zoom-info { top: 16px; font-size: 12px; padding: 6px 12px; }
+                flex-wrap: wrap;
+                padding: 6px 12px;
+            }
+            .preview-controls .btn {
+                padding: 6px 10px;
+                font-size: 11px;
+            }
+            .preview-close {
+                top: 12px;
+                right: 12px;
+                width: 38px;
+                height: 38px;
+                font-size: 18px;
+            }
+            .zoom-info {
+                top: 12px;
+                font-size: 11px;
+                padding: 5px 10px;
+            }
 
-            .upgrade-banner { padding: 12px 16px; flex-direction: column; gap: 12px; text-align: center; }
+            .upgrade-banner {
-            .upgrade-banner-text { font-size: 13px; }
+                padding: 12px;
-            .upgrade-banner-text strong { font-size: 14px; }
+                flex-direction: column;
+                gap: 10px;
+                text-align: center;
+            }
+            .upgrade-banner-text { font-size: 12px; }
+            .upgrade-banner-text strong { font-size: 13px; }
+            .upgrade-banner .btn {
+                width: 100%;
+                padding: 10px;
+            }
 
-            .form-input, .form-select { font-size: 16px; } /* 防止iOS自动缩放 */
+            .form-input, .form-select {
+                font-size: 16px;
+                width: 100%;
+                max-width: 100%;
+            }
+
+            .weekday-selector {
+                gap: 6px;
+            }
+            .weekday-chip {
+                padding: 5px 10px;
+                font-size: 12px;
+            }
+
+            .screenshot-actions .btn {
+                padding: 5px 8px;
+                font-size: 11px;
+            }
         }
     </style>
 </head>