Merge pull request !10457 from 李鹏宇/dev_wang
This commit is contained in:
李鹏宇
2026-03-31 12:57:15 +00:00
committed by Gitee
2 changed files with 170 additions and 62 deletions
@@ -21,6 +21,51 @@ const isMobileDevice = () => {
return hasTouch && (isIOS || isSmallScreen);
};
// soong_workflow 头部按钮 class 与 Odoo defaultRank 叠用;WebKit 上可能出现「能点但看不见」。
// 对底部固定栏内按钮强制前景/背景与 -webkit-text-fill(不依赖 getComputedStyle 误判)。
const WORKFLOW_BUTTON_STYLES = [
['btn-confirm', '#2563eb', '#ffffff'],
['btn-finish', '#1d4ed8', '#ffffff'],
['btn-transfer', '#166534', '#ffffff'],
['btn-distribute', '#16a34a', '#ffffff'],
['btn-recall', '#f59e0b', '#ffffff'],
['btn-return', '#ef4444', '#ffffff'],
['btn-archive', '#6b7280', '#ffffff'],
];
function forceMobileBarVisible(container) {
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', '99999', 'important');
// 强制设置容器可见背景与最小高度,避免“能点但看不见”
container.style.setProperty('background-color', '#ffffff', 'important');
container.style.setProperty('background', '#ffffff', 'important');
container.style.setProperty('border-top', '1px solid #d9d9d9', 'important');
container.style.setProperty('box-shadow', '0 -2px 8px rgba(0, 0, 0, 0.12)', 'important');
container.style.setProperty('min-height', '56px', 'important');
container.style.setProperty('pointer-events', 'auto', 'important');
}
function applyWorkflowButtonPaint(button) {
for (const [cls, bg, fg] of WORKFLOW_BUTTON_STYLES) {
if (button.classList.contains(cls)) {
button.style.setProperty('background-color', bg, 'important');
button.style.setProperty('border-color', bg, 'important');
button.style.setProperty('color', fg, 'important');
button.style.setProperty('-webkit-text-fill-color', fg, 'important');
button.style.setProperty('opacity', '1', 'important');
button.style.setProperty('visibility', 'visible', 'important');
return true;
}
}
return false;
}
// 覆盖 StatusBarButtons 组件,添加移动端检测逻辑
patch(StatusBarButtons, {
template: "k_ry_mobile_form.StatusBarButtons",
@@ -57,38 +102,26 @@ patch(StatusBarButtons, {
useEffect(() => {
const checkAndFixMobileButtons = () => {
try {
// 如果是移动设备但 env.isSmall 为 false,强制显示移动端按钮
if (isMobileDevice()) {
const mobileContainers = document.querySelectorAll('.o_statusbar_buttons_mobile_fixed');
if (mobileContainers.length === 0) return;
mobileContainers.forEach(container => {
try {
// 使用内联样式强制显示,优先级最高
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', '99999', 'important');
// 强制设置背景色,防止被主题覆盖
container.style.setProperty('background-color', '#ffffff', 'important');
container.style.setProperty('background', '#ffffff', 'important');
// 同时修复容器内的按钮
const buttons = container.querySelectorAll('button, a.btn, .btn, a[role="button"], .o_statusbar_buttons > * > button, .o_statusbar_buttons > * > a');
buttons.forEach(button => {
try {
// 强制设置按钮可见性
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');
button.style.setProperty('font-weight', '500', 'important');
// 防止文字被设置为透明
button.style.setProperty('text-indent', '0', 'important');
const mobileContainers = document.querySelectorAll('.o_statusbar_buttons_mobile_fixed');
if (mobileContainers.length === 0) return;
mobileContainers.forEach(container => {
try {
forceMobileBarVisible(container);
// 同时修复容器内的按钮
const buttons = container.querySelectorAll('button, a.btn, .btn, a[role="button"], .o_statusbar_buttons > * > button, .o_statusbar_buttons > * > a');
buttons.forEach(button => {
try {
applyWorkflowButtonPaint(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');
button.style.setProperty('font-weight', '500', 'important');
// 防止文字被设置为透明
button.style.setProperty('text-indent', '0', 'important');
// 检查按钮颜色
const computedStyle = getComputedStyle(button);
@@ -132,24 +165,23 @@ patch(StatusBarButtons, {
button.style.setProperty('color', '#ffffff', 'important');
}
}
} catch (e) {
console.warn('Error fixing button in setup:', e);
}
});
} catch (e) {
console.warn('Error fixing container in setup:', e);
}
});
// 隐藏桌面端按钮
try {
const desktopButtons = document.querySelectorAll('.o_form_statusbar > .o_statusbar_buttons:not(.o_statusbar_buttons_mobile_fixed .o_statusbar_buttons)');
desktopButtons.forEach(btn => {
btn.style.setProperty('display', 'none', 'important');
} catch (e) {
console.warn('Error fixing button in setup:', e);
}
});
} catch (e) {
console.warn('Error hiding desktop buttons in setup:', e);
console.warn('Error fixing container in setup:', e);
}
});
// 隐藏桌面端按钮
try {
const desktopButtons = document.querySelectorAll('.o_form_statusbar > .o_statusbar_buttons:not(.o_statusbar_buttons_mobile_fixed .o_statusbar_buttons)');
desktopButtons.forEach(btn => {
btn.style.setProperty('display', 'none', 'important');
});
} catch (e) {
console.warn('Error hiding desktop buttons in setup:', e);
}
} catch (e) {
console.warn('Error in checkAndFixMobileButtons:', e);
@@ -200,26 +232,14 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
containers.forEach(container => {
try {
// 如果是移动设备,确保容器可见
if (isMobileDevice()) {
// 使用 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', '99999', 'important');
// 强制设置背景色,防止被主题覆盖
container.style.setProperty('background-color', '#ffffff', 'important');
container.style.setProperty('background', '#ffffff', 'important');
}
// 无条件强制底栏可见,避免主题在特定机型上把栏绘制成透明
forceMobileBarVisible(container);
// 修复按钮的交互性和可见性
const buttons = container.querySelectorAll('button, a.btn, .btn, a[role="button"], .o_statusbar_buttons > * > button, .o_statusbar_buttons > * > a');
buttons.forEach(button => {
try {
applyWorkflowButtonPaint(button);
// 使用 setProperty 强制设置样式
button.style.setProperty('pointer-events', 'auto', 'important');
button.style.setProperty('cursor', 'pointer', 'important');
@@ -29,6 +29,94 @@
min-height: 44px;
}
}
// soong_workflow 流程按钮与 Odoo 注入的 defaultRank(如 btn-secondary)叠在同一
// button 上时,WebKit/iOS 上可能出现「可点击但看不见」(颜色/填充未按预期绘制)。
// 在此容器内用更高优先级强制绘制,与 soong_workflow/static/src/css/button_css.scss 对齐。
button.btn-confirm {
background-color: #2563eb !important;
color: #fff !important;
border-color: #2563eb !important;
-webkit-text-fill-color: #fff !important;
}
button.btn-finish {
background-color: #1d4ed8 !important;
color: #fff !important;
border-color: #1d4ed8 !important;
-webkit-text-fill-color: #fff !important;
}
button.btn-transfer {
background-color: #166534 !important;
color: #fff !important;
border-color: #166534 !important;
-webkit-text-fill-color: #fff !important;
}
button.btn-distribute {
background-color: #16a34a !important;
color: #fff !important;
border-color: #16a34a !important;
-webkit-text-fill-color: #fff !important;
}
button.btn-recall {
background-color: #f59e0b !important;
color: #fff !important;
border-color: #f59e0b !important;
-webkit-text-fill-color: #fff !important;
}
button.btn-return {
background-color: #ef4444 !important;
color: #fff !important;
border-color: #ef4444 !important;
-webkit-text-fill-color: #fff !important;
}
button.btn-archive {
background-color: #6b7280 !important;
color: #fff !important;
border-color: #6b7280 !important;
-webkit-text-fill-color: #fff !important;
}
// ViewButton 文案在内部 span 上;防止 WebKit 子节点仍使用透明或系统色
button span {
color: inherit !important;
-webkit-text-fill-color: inherit !important;
opacity: 1 !important;
}
}
}
// 最硬兜底:仅移动端启用,避免主题将底部栏渲染为透明/不可见
@include media-breakpoint-down(md) {
.o_form_view .o_statusbar_buttons_mobile_fixed {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
z-index: 99999 !important;
min-height: 56px !important;
background: #fff !important;
background-color: #fff !important;
border-top: 1px solid #d9d9d9 !important;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12) !important;
pointer-events: auto !important;
.o_statusbar_buttons,
.o_statusbar_buttons > * {
visibility: visible !important;
opacity: 1 !important;
}
.o_statusbar_buttons button,
.o_statusbar_buttons .btn,
.o_statusbar_buttons a.btn {
visibility: visible !important;
opacity: 1 !important;
text-indent: 0 !important;
-webkit-text-fill-color: currentColor !important;
}
}
}