From 596f941bd8dc465cebaf8f95ae105989f1150671 Mon Sep 17 00:00:00 2001 From: pengyuthon Date: Fri, 23 Jan 2026 12:51:45 +0800 Subject: [PATCH] mobile --- .../static/src/js/status_bar_buttons.js | 109 +++++++++++++++--- .../static/src/scss/status_bar_buttons.scss | 89 ++++++++++++-- 2 files changed, 178 insertions(+), 20 deletions(-) diff --git a/k_ry_mobile_form/static/src/js/status_bar_buttons.js b/k_ry_mobile_form/static/src/js/status_bar_buttons.js index 7941b3edf..e87a68bcc 100644 --- a/k_ry_mobile_form/static/src/js/status_bar_buttons.js +++ b/k_ry_mobile_form/static/src/js/status_bar_buttons.js @@ -42,10 +42,28 @@ patch(StatusBarButtons, { container.style.setProperty('left', '0', 'important'); container.style.setProperty('right', '0', 'important'); container.style.setProperty('z-index', '9999', 'important'); - // 确保背景色可见 - if (!container.style.backgroundColor) { - container.style.setProperty('background-color', '#ffffff', 'important'); - } + // 强制设置背景色可见 + container.style.setProperty('background-color', '#ffffff', 'important'); + container.style.setProperty('background', '#ffffff', 'important'); + container.style.setProperty('min-height', '60px', 'important'); + container.style.setProperty('width', '100%', 'important'); + + // 同时修复容器内的按钮 + const buttons = container.querySelectorAll('button, a.btn, .btn, a[role="button"], .o_statusbar_buttons > * > button, .o_statusbar_buttons > * > a'); + buttons.forEach(button => { + button.style.setProperty('visibility', 'visible', 'important'); + button.style.setProperty('opacity', '1', 'important'); + button.style.setProperty('display', 'inline-block', 'important'); + button.style.setProperty('font-size', '14px', 'important'); + // 如果按钮没有可见的背景色，强制设置 + const computedStyle = getComputedStyle(button); + const bgColor = computedStyle.backgroundColor; + if (bgColor === 'transparent' || bgColor === 'rgba(0, 0, 0, 0)' || + (bgColor === 'rgb(255, 255, 255)' && computedStyle.color === 'rgb(255, 255, 255)')) { + button.style.setProperty('background-color', '#007bff', 'important'); + button.style.setProperty('color', '#ffffff', 'important'); + } + }); }); // 隐藏桌面端按钮 @@ -92,14 +110,15 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') { container.style.setProperty('left', '0', 'important'); container.style.setProperty('right', '0', 'important'); container.style.setProperty('z-index', '9999', 'important'); - // 确保背景色可见 - if (!container.style.backgroundColor || container.style.backgroundColor === 'transparent') { - container.style.setProperty('background-color', '#ffffff', 'important'); - } + // 强制设置背景色可见 + container.style.setProperty('background-color', '#ffffff', 'important'); + container.style.setProperty('background', '#ffffff', 'important'); + container.style.setProperty('min-height', '60px', 'important'); + container.style.setProperty('width', '100%', 'important'); } - // 修复按钮的交互性 - const buttons = container.querySelectorAll('button, a.btn, .btn, a[role="button"], .o_statusbar_buttons > * > button'); + // 修复按钮的交互性和可见性 + const buttons = container.querySelectorAll('button, a.btn, .btn, a[role="button"], .o_statusbar_buttons > * > button, .o_statusbar_buttons > * > a'); buttons.forEach(button => { // 使用 setProperty 强制设置样式 button.style.setProperty('pointer-events', 'auto', 'important'); @@ -108,9 +127,73 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') { button.style.setProperty('visibility', 'visible', 'important'); button.style.setProperty('opacity', '1', 'important'); button.style.setProperty('display', 'inline-block', 'important'); - // 确保按钮有最小高度 - if (!button.style.minHeight) { - button.style.setProperty('min-height', '44px', 'important'); + // 确保按钮有最小高度和宽度 + button.style.setProperty('min-height', '44px', 'important'); + button.style.setProperty('min-width', '60px', 'important'); + // 强制设置字体大小，确保文字可见 + button.style.setProperty('font-size', '14px', 'important'); + button.style.setProperty('font-weight', '500', 'important'); + button.style.setProperty('line-height', '1.5', 'important'); + // 强制设置内边距 + button.style.setProperty('padding', '8px 16px', 'important'); + // 确保文字对齐 + button.style.setProperty('text-align', 'center', 'important'); + button.style.setProperty('text-decoration', 'none', 'important'); + + // 检查按钮是否有背景色和文字颜色 + const computedStyle = getComputedStyle(button); + const bgColor = computedStyle.backgroundColor; + const textColor = computedStyle.color; + + // 如果背景色是透明或白色，且文字颜色也是白色或透明，强制设置颜色 + const isTransparent = bgColor === 'transparent' || bgColor === 'rgba(0, 0, 0, 0)'; + const isWhiteBg = bgColor === 'rgb(255, 255, 255)' || bgColor === '#ffffff' || bgColor === '#fff'; + const isWhiteText = textColor === 'rgb(255, 255, 255)' || textColor === '#ffffff' || textColor === '#fff'; + const isTransparentText = textColor === 'transparent' || textColor === 'rgba(0, 0, 0, 0)'; + + // 如果按钮不可见（白色背景+白色文字，或透明背景），强制设置颜色 + if (isTransparent || (isWhiteBg && (isWhiteText || isTransparentText))) { + // 根据按钮类型设置颜色 + const hasPrimary = button.classList.contains('btn-primary') || button.classList.contains('o_statusbar_status'); + const hasSecondary = button.classList.contains('btn-secondary'); + const hasSuccess = button.classList.contains('btn-success'); + const hasDanger = button.classList.contains('btn-danger'); + const hasWarning = button.classList.contains('btn-warning'); + const hasInfo = button.classList.contains('btn-info'); + + if (hasPrimary || hasSuccess) { + button.style.setProperty('background-color', '#007bff', 'important'); + button.style.setProperty('color', '#ffffff', 'important'); + button.style.setProperty('border-color', '#0056b3', 'important'); + } else if (hasSecondary) { + button.style.setProperty('background-color', '#6c757d', 'important'); + button.style.setProperty('color', '#ffffff', 'important'); + button.style.setProperty('border-color', '#545b62', 'important'); + } else if (hasDanger) { + button.style.setProperty('background-color', '#dc3545', 'important'); + button.style.setProperty('color', '#ffffff', 'important'); + button.style.setProperty('border-color', '#c82333', 'important'); + } else if (hasWarning) { + button.style.setProperty('background-color', '#ffc107', 'important'); + button.style.setProperty('color', '#212529', 'important'); + button.style.setProperty('border-color', '#e0a800', 'important'); + } else if (hasInfo) { + button.style.setProperty('background-color', '#17a2b8', 'important'); + button.style.setProperty('color', '#ffffff', 'important'); + button.style.setProperty('border-color', '#117a8b', 'important'); + } else { + // 默认蓝色按钮 + button.style.setProperty('background-color', '#007bff', 'important'); + button.style.setProperty('color', '#ffffff', 'important'); + button.style.setProperty('border-color', '#0056b3', 'important'); + } + + // 确保有边框 + if (!computedStyle.border || computedStyle.border === '0px none rgb(0, 0, 0)') { + button.style.setProperty('border', '1px solid', 'important'); + } + // 确保有圆角 + button.style.setProperty('border-radius', '4px', 'important'); } }); }); diff --git a/k_ry_mobile_form/static/src/scss/status_bar_buttons.scss b/k_ry_mobile_form/static/src/scss/status_bar_buttons.scss index 63b6c4850..8104c2d73 100644 --- a/k_ry_mobile_form/static/src/scss/status_bar_buttons.scss +++ b/k_ry_mobile_form/static/src/scss/status_bar_buttons.scss @@ -8,10 +8,11 @@ html body .o_statusbar_buttons_mobile_fixed { left: 0 !important; right: 0 !important; z-index: 9999 !important; // 提高z-index，确保在最上层 - background-color: $o-view-background-color !important; - background: $o-view-background-color !important; // 双重保险 - border-top: 1px solid $border-color !important; - box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1) !important; + // 强制设置背景色，确保容器可见 + background-color: #ffffff !important; + background: #ffffff !important; + border-top: 1px solid #dee2e6 !important; + box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15) !important; padding: map-get($spacers, 2) map-get($spacers, 3) !important; // 为底部悬浮栏预留空间，避免内容被遮挡（支持 iOS safe area） padding-bottom: calc(#{map-get($spacers, 2)} + env(safe-area-inset-bottom, 0px)) !important; @@ -29,6 +30,11 @@ html body .o_statusbar_buttons_mobile_fixed { overflow: visible !important; clip: auto !important; clip-path: none !important; + // 确保容器有最小高度 + min-height: 60px !important; + // 确保容器宽度 + width: 100% !important; + max-width: 100% !important; } .o_statusbar_buttons { @@ -62,6 +68,7 @@ html body .o_statusbar_buttons_mobile_fixed { text-overflow: ellipsis !important; // 确保按钮有足够的点击区域 min-height: 44px !important; + height: auto !important; // iOS Safari 修复：确保按钮可点击 cursor: pointer !important; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important; @@ -82,9 +89,77 @@ html body .o_statusbar_buttons_mobile_fixed { display: inline-block !important; visibility: visible !important; opacity: 1 !important; - // 确保按钮背景和文字可见 - background-color: inherit !important; - color: inherit !important; + // 强制设置按钮颜色和背景，确保可见性 + background-color: #007bff !important; + background: #007bff !important; + color: #ffffff !important; + // 确保文字大小可见 + font-size: 14px !important; + font-weight: 500 !important; + line-height: 1.5 !important; + // 添加边框和圆角，增强可见性 + border: 1px solid #0056b3 !important; + border-radius: 4px !important; + // 确保内边距 + padding: 8px 16px !important; + // 确保按钮内容可见 + text-align: center !important; + text-decoration: none !important; + } + + // 特殊处理不同类型的按钮，确保都有可见的样式 + > button.btn-primary, + > a.btn-primary, + > .btn-primary { + background-color: #007bff !important; + background: #007bff !important; + color: #ffffff !important; + border-color: #0056b3 !important; + } + + > button.btn-secondary, + > a.btn-secondary, + > .btn-secondary { + background-color: #6c757d !important; + background: #6c757d !important; + color: #ffffff !important; + border-color: #545b62 !important; + } + + > button.btn-success, + > a.btn-success, + > .btn-success { + background-color: #28a745 !important; + background: #28a745 !important; + color: #ffffff !important; + border-color: #1e7e34 !important; + } + + > button.btn-danger, + > a.btn-danger, + > .btn-danger { + background-color: #dc3545 !important; + background: #dc3545 !important; + color: #ffffff !important; + border-color: #c82333 !important; + } + + > button.btn-warning, + > a.btn-warning, + > .btn-warning { + background-color: #ffc107 !important; + background: #ffc107 !important; + color: #212529 !important; + border-color: #e0a800 !important; + } + + > button.btn-info, + > a.btn-info, + > .btn-info { + background-color: #17a2b8 !important; + background: #17a2b8 !important; + color: #ffffff !important; + border-color: #117a8b !important; } } }