pengyuthon/gzth
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

!8238 mobile

Browse Source 
Merge pull request !8238 from 李鹏宇/dev
This commit is contained in:
李鹏宇
2026-01-23 04:34:21 +00:00
committed by Gitee
parent 10e9113c9c a2237f230d
commit f2e36555b3
2 changed files with 153 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
k_ry_mobile_form/static/src/js/status_bar_buttons.js
+58 -16
View File
@@ -33,15 +33,25 @@ patch(StatusBarButtons, {
if (isMobileDevice()) {
const mobileContainers = document.querySelectorAll('.o_statusbar_buttons_mobile_fixed');
mobileContainers.forEach(container => {
container.style.display = 'block';
container.style.visibility = 'visible';
container.style.opacity = '1';
// 使用内联样式强制显示，优先级最高
container.style.setProperty('display', 'block', 'important');
container.style.setProperty('visibility', 'visible', 'important');
container.style.setProperty('opacity', '1', 'important');
container.style.setProperty('position', 'fixed', 'important');
container.style.setProperty('bottom', '0', 'important');
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');
}
});
// 隐藏桌面端按钮
const desktopButtons = document.querySelectorAll('.o_form_statusbar > .o_statusbar_buttons:not(.o_statusbar_buttons_mobile_fixed .o_statusbar_buttons)');
desktopButtons.forEach(btn => {
btn.style.display = 'none';
btn.style.setProperty('display', 'none', 'important');
});
}
};
@@ -73,24 +83,35 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
// 如果是移动设备，确保容器可见
if (isMobileDevice()) {
const computedStyle = getComputedStyle(container);
if (computedStyle.display === 'none') {
container.style.display = 'block';
// 使用 setProperty 的 important 标志强制设置样式
container.style.setProperty('display', 'block', 'important');
container.style.setProperty('visibility', 'visible', 'important');
container.style.setProperty('opacity', '1', 'important');
container.style.setProperty('position', 'fixed', 'important');
container.style.setProperty('bottom', '0', 'important');
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.visibility = 'visible';
container.style.opacity = '1';
}
// 修复按钮的交互性
const buttons = container.querySelectorAll('button, a.btn, .btn, a[role="button"], .o_statusbar_buttons > * > button');
buttons.forEach(button => {
// 确保pointer-events正确设置
if (getComputedStyle(button).pointerEvents === 'none') {
button.style.pointerEvents = 'auto';
// 使用 setProperty 强制设置样式
button.style.setProperty('pointer-events', 'auto', 'important');
button.style.setProperty('cursor', 'pointer', 'important');
button.style.setProperty('touch-action', 'manipulation', 'important');
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.cursor = 'pointer';
button.style.touchAction = 'manipulation';
button.style.visibility = 'visible';
button.style.opacity = '1';
});
});
@@ -98,7 +119,7 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
if (isMobileDevice()) {
const desktopButtons = document.querySelectorAll('.o_form_statusbar > .o_statusbar_buttons:not(.o_statusbar_buttons_mobile_fixed .o_statusbar_buttons)');
desktopButtons.forEach(btn => {
btn.style.display = 'none';
btn.style.setProperty('display', 'none', 'important');
});
}
};
@@ -142,4 +163,25 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
window.addEventListener('orientationchange', () => {
setTimeout(fixIOSButtons, 200);
});
// 定期检查按钮是否可见（防止被其他样式覆盖）
if (isMobileDevice()) {
const checkInterval = setInterval(() => {
const containers = document.querySelectorAll('.o_statusbar_buttons_mobile_fixed');
containers.forEach(container => {
const computedStyle = getComputedStyle(container);
// 如果按钮被隐藏，强制显示
if (computedStyle.display === 'none' ||
computedStyle.visibility === 'hidden' ||
parseFloat(computedStyle.opacity) < 0.1) {
fixIOSButtons();
}
});
}, 1000); // 每秒检查一次
// 页面卸载时清除定时器
window.addEventListener('beforeunload', () => {
clearInterval(checkInterval);
});
}
}
k_ry_mobile_form/static/src/scss/status_bar_buttons.scss
+95 -42
View File
@@ -1,70 +1,100 @@
// Mobile: 底部悬浮栏样式
.o_statusbar_buttons_mobile_fixed {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1050; // 确保在其他元素之上，但低于模态框
background-color: $o-view-background-color;
border-top: 1px solid $border-color;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
padding: map-get($spacers, 2) map-get($spacers, 3);
// 使用高优先级选择器，防止被其他主题样式覆盖
.o_statusbar_buttons_mobile_fixed,
body .o_statusbar_buttons_mobile_fixed,
html body .o_statusbar_buttons_mobile_fixed {
position: fixed !important;
bottom: 0 !important;
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;
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));
padding-bottom: calc(#{map-get($spacers, 2)} + env(safe-area-inset-bottom, 0px)) !important;
// iOS Safari 修复：确保元素可交互
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transform: translateZ(0) !important;
transform: translateZ(0) !important;
// iOS Safari 修复：防止滚动时fixed定位失效
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-backface-visibility: hidden !important;
backface-visibility: hidden !important;
// 强制显示属性
display: block !important;
visibility: visible !important;
opacity: 1 !important;
// 确保元素不会被其他样式隐藏
overflow: visible !important;
clip: auto !important;
clip-path: none !important;
}
.o_statusbar_buttons {
max-width: 100%;
width: 100%;
max-width: 100% !important;
width: 100% !important;
// iOS Safari 修复：确保容器可交互
pointer-events: auto;
-webkit-transform: translateZ(0);
transform: translateZ(0);
pointer-events: auto !important;
-webkit-transform: translateZ(0) !important;
transform: translateZ(0) !important;
// 强制显示
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
> * {
flex: 1;
min-width: 0;
flex: 1 !important;
min-width: 0 !important;
// iOS Safari 修复：确保子元素可交互
pointer-events: auto;
pointer-events: auto !important;
// 强制显示
display: block !important;
visibility: visible !important;
opacity: 1 !important;
> button,
> a,
> .btn {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100% !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
// 确保按钮有足够的点击区域
min-height: 44px;
min-height: 44px !important;
// iOS Safari 修复：确保按钮可点击
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
touch-action: manipulation;
cursor: pointer !important;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
touch-action: manipulation !important;
// iOS Safari 修复：防止文本选择影响点击
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none !important;
user-select: none !important;
-webkit-touch-callout: none !important;
// iOS Safari 修复：确保按钮在层级之上
position: relative;
z-index: 1;
position: relative !important;
z-index: 1 !important;
// iOS Safari 修复：确保pointer-events正确
pointer-events: auto !important;
// iOS Safari 修复：防止transform影响点击
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transform: translateZ(0) !important;
transform: translateZ(0) !important;
// 强制显示按钮
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
// 确保按钮背景和文字可见
background-color: inherit !important;
color: inherit !important;
}
}
}
}
// 桌面端隐藏移动端悬浮栏（但保留触摸设备的显示）
@include media-breakpoint-up(md) {
.o_statusbar_buttons_mobile_fixed {
.o_statusbar_buttons_mobile_fixed,
body .o_statusbar_buttons_mobile_fixed,
html body .o_statusbar_buttons_mobile_fixed {
// 只在非触摸设备上隐藏（桌面浏览器）
@media (hover: hover) and (pointer: fine) {
display: none !important;
@@ -88,14 +118,37 @@
}
// iOS Safari 特殊处理：确保在 iOS 设备上按钮可见
// 使用高优先级选择器，防止被其他主题样式覆盖
@media (hover: none) and (pointer: coarse) {
.o_statusbar_buttons_mobile_fixed {
.o_statusbar_buttons_mobile_fixed,
body .o_statusbar_buttons_mobile_fixed,
html body .o_statusbar_buttons_mobile_fixed {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: fixed !important;
bottom: 0 !important;
z-index: 9999 !important;
}
.o_form_statusbar > .o_statusbar_buttons:not(.o_statusbar_buttons_mobile_fixed .o_statusbar_buttons) {
.o_form_statusbar > .o_statusbar_buttons:not(.o_statusbar_buttons_mobile_fixed .o_statusbar_buttons),
body .o_form_statusbar > .o_statusbar_buttons:not(.o_statusbar_buttons_mobile_fixed .o_statusbar_buttons) {
display: none !important;
}
}
// 通用移动设备强制显示规则（防止被其他主题覆盖）
@media (max-width: 767px) {
.o_statusbar_buttons_mobile_fixed,
body .o_statusbar_buttons_mobile_fixed,
html body .o_statusbar_buttons_mobile_fixed {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 9999 !important;
}
}