diff --git a/k_ry_mobile_form/README.md b/k_ry_mobile_form/README.md new file mode 100644 index 000000000..3cb50c564 --- /dev/null +++ b/k_ry_mobile_form/README.md @@ -0,0 +1,54 @@ +# k_ry_mobile_form - 科瑞移动端表单优化模块 + +## 功能说明 + +此模块为 Odoo 17 的 form 视图添加移动端优化功能: +- 在手机浏览器中,form 视图 header 的工具按钮栏会悬浮在屏幕底部 +- 提供类似正常 APP 的底部按钮栏体验 +- 桌面端不受影响,保持原有显示方式 + +## 依赖 + +- `base` +- `web` + +## 安装 + +1. 将模块放置在 Odoo 的 addons 目录下 +2. 更新应用列表 +3. 安装 `k_ry_mobile_form` 模块 + +## 技术实现 + +### 文件结构 + +``` +k_ry_mobile_form/ +├── __init__.py +├── __manifest__.py +├── README.md +└── static/ + └── src/ + ├── js/ + │ └── status_bar_buttons.js # 覆盖 StatusBarButtons 组件模板 + ├── xml/ + │ └── status_bar_buttons.xml # 新的模板定义 + └── scss/ + └── status_bar_buttons.scss # 移动端底部悬浮栏样式 +``` + +### 实现原理 + +1. **JavaScript 覆盖**:使用 `patch` 方法覆盖 `StatusBarButtons` 组件的模板 +2. **模板替换**:提供新的模板,根据 `env.isSmall` 判断显示方式 +3. **样式隔离**:使用媒体查询确保移动端和桌面端样式互不影响 + +## 使用说明 + +安装模块后,无需额外配置。在手机浏览器中打开任何包含 header 的 form 视图时,工具按钮栏会自动显示在底部。 + +## 注意事项 + +- 此模块只影响 form 视图的 header 按钮栏 +- 桌面端完全不受影响 +- 支持 iOS 设备的底部安全区域(safe area) diff --git a/k_ry_mobile_form/__init__.py b/k_ry_mobile_form/__init__.py new file mode 100644 index 000000000..40a96afc6 --- /dev/null +++ b/k_ry_mobile_form/__init__.py @@ -0,0 +1 @@ +# -*- coding: utf-8 -*- diff --git a/k_ry_mobile_form/__manifest__.py b/k_ry_mobile_form/__manifest__.py new file mode 100644 index 000000000..c2e17aa32 --- /dev/null +++ b/k_ry_mobile_form/__manifest__.py @@ -0,0 +1,33 @@ +# -*- coding: utf-8 -*- +{ + 'name': "k_ry_mobile_form", + + 'summary': "移动端表单优化", + + 'description': """ + 移动端表单优化模块 + """, + 'author': "josh.feng", + 'website': "", + 'category': '界面优化', + 'version': '17.0.0.1', + + # any module necessary for this one to work correctly + 'depends': ['base', 'web'], + + # always loaded + 'data': [ + ], + 'assets': { + 'web.assets_backend': [ + 'k_ry_mobile_form/static/src/js/status_bar_buttons.js', + 'k_ry_mobile_form/static/src/xml/status_bar_buttons.xml', + 'k_ry_mobile_form/static/src/scss/status_bar_buttons.scss', + ], + }, + 'application': False, + 'installable': True, + 'auto_install': False, + 'license': 'LGPL-3', + +} 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 new file mode 100644 index 000000000..6fa0ea98e --- /dev/null +++ b/k_ry_mobile_form/static/src/js/status_bar_buttons.js @@ -0,0 +1,9 @@ +/** @odoo-module **/ + +import { StatusBarButtons } from "@web/views/form/status_bar_buttons/status_bar_buttons"; +import { patch } from "@web/core/utils/patch"; + +// 覆盖 StatusBarButtons 组件的模板 +patch(StatusBarButtons, { + template: "k_ry_mobile_form.StatusBarButtons", +}); 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 new file mode 100644 index 000000000..d07f8d598 --- /dev/null +++ b/k_ry_mobile_form/static/src/scss/status_bar_buttons.scss @@ -0,0 +1,55 @@ +// 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); + // 为底部悬浮栏预留空间,避免内容被遮挡(支持 iOS safe area) + padding-bottom: calc(#{map-get($spacers, 2)} + env(safe-area-inset-bottom, 0px)); + + .o_statusbar_buttons { + max-width: 100%; + width: 100%; + + > * { + flex: 1; + min-width: 0; + + > button { + width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + // 确保按钮有足够的点击区域 + min-height: 44px; + } + } + } +} + +// 桌面端隐藏移动端悬浮栏 +@include media-breakpoint-up(md) { + .o_statusbar_buttons_mobile_fixed { + display: none !important; + } +} + +// 移动端隐藏原始状态栏中的按钮(避免重复显示) +@include media-breakpoint-down(md) { + .o_form_statusbar { + // 隐藏状态栏中的按钮容器,但保留字段等其他内容 + > .o_statusbar_buttons:not(.o_statusbar_buttons_mobile_fixed .o_statusbar_buttons) { + display: none; + } + } + + // 为 form view 添加底部 padding,避免内容被底部悬浮栏遮挡 + .o_form_view { + padding-bottom: 80px; // 为底部悬浮栏预留空间 + } +} diff --git a/k_ry_mobile_form/static/src/xml/status_bar_buttons.xml b/k_ry_mobile_form/static/src/xml/status_bar_buttons.xml new file mode 100644 index 000000000..f27a576d5 --- /dev/null +++ b/k_ry_mobile_form/static/src/xml/status_bar_buttons.xml @@ -0,0 +1,27 @@ + + + + + + + + +
+
+ + + +
+
+
+ + +
+ + + +
+
+
+ +