137 lines
4.6 KiB
Markdown
137 lines
4.6 KiB
Markdown
# Omux 多标签页管理器
|
||
|
||
Odoo 18 的现代化多标签页面管理模块，为 udoo_om_ux 主题量身打造。
|
||
|
||
## 功能特性
|
||
|
||
### 🎯 核心功能
|
||
- **多标签页管理** - 支持同时打开多个页面，轻松切换
|
||
- **智能滚动** - 标签过多时支持横向滚动浏览
|
||
- **标签刷新** - 点击刷新按钮快速重载当前标签页
|
||
- **快捷关闭** - 支持关闭当前、其他或全部标签页
|
||
|
||
### 🎨 设计亮点
|
||
- **现代化界面** - 采用渐变色背景和平滑过渡动画
|
||
- **暗黑模式支持** - 完美适配夜间模式/暗黑主题
|
||
- **美观交互** - 悬停效果、激活状态和底部指示条
|
||
- **响应式布局** - 适配不同屏幕尺寸
|
||
- **智能控件** - 箭头按钮仅在标签溢出时显示，节省空间
|
||
- **右键菜单** - 简洁高效的快捷操作菜单
|
||
- **移动设备优化** - 手机模式（≤576px）完全隐藏标签栏，节省屏幕空间
|
||
|
||
### 🚀 交互体验
|
||
- **鼠标滚轮滚动** - 支持鼠标滚轮横向滚动标签栏
|
||
- **动画效果** - 刷新按钮旋转、关闭按钮缩放等流畅动画
|
||
- **自动滚动** - 新标签页自动滚动到可见区域
|
||
- **智能激活** - 关闭标签后自动激活最后一个标签
|
||
- **菜单联动** - 标签切换时左侧菜单自动高亮对应项
|
||
|
||
## 安装方法
|
||
|
||
1. 确保已安装 `web` 和 `omux_shared_lib` 模块
|
||
2. 将 `omux_multi_tab` 文件夹放入 Odoo addons 目录
|
||
3. 更新应用列表
|
||
4. 安装 "多标签页管理器" 模块
|
||
|
||
## 使用说明
|
||
|
||
### 基本操作
|
||
- **打开标签页** - 点击菜单项自动在新标签页中打开
|
||
- **切换标签页** - 点击标签栏中的标签进行切换，左侧菜单自动高亮
|
||
- **关闭标签页** - 点击标签右侧的 ✕ 按钮
|
||
|
||
### 快捷菜单
|
||
点击右上角菜单按钮（☰）可以：
|
||
- 关闭当前标签页
|
||
- 关闭其他标签页
|
||
- 关闭全部标签页
|
||
|
||
### 右键菜单
|
||
在标签页上点击鼠标右键可以：
|
||
- 刷新当前标签页
|
||
- 关闭当前标签页
|
||
- 关闭其他标签页
|
||
- 关闭全部标签页
|
||
|
||
### 刷新功能
|
||
- 激活的标签页左侧会显示刷新按钮（🔄）
|
||
- 点击刷新按钮重新加载当前页面
|
||
- 刷新时按钮会旋转动画
|
||
|
||
## 技术实现
|
||
|
||
### 架构设计
|
||
```
|
||
omux_multi_tab/
|
||
├── __init__.py
|
||
├── __manifest__.py
|
||
├── README.md
|
||
└── static/src/
|
||
├── services/
|
||
│ └── action_service.js # Action 服务扩展
|
||
└── components/
|
||
├── action_container.js # ActionContainer 补丁
|
||
├── action_container.scss
|
||
└── multi_tab/
|
||
├── multi_tab.js # 多标签页组件
|
||
├── multi_tab.xml # 组件模板
|
||
└── multi_tab.scss # 组件样式
|
||
```
|
||
|
||
### 核心组件
|
||
- **action_service.js** - 扩展 Odoo 的 action service，支持多标签页控制器堆栈管理
|
||
- **action_container.js** - 修补 ActionContainer 组件，集成多标签页功能
|
||
- **MultiTab** - 自定义 Owl 组件，实现标签页 UI 和交互
|
||
|
||
### 样式特点
|
||
- 使用渐变色和阴影效果
|
||
- CSS transitions 实现平滑动画
|
||
- 响应式设计支持移动端
|
||
- 符合 udoo_om_ux 设计规范
|
||
|
||
## 📝 最新更新 (v1.0.3)
|
||
|
||
### 🔧 面包屑显示修复
|
||
1. **精准隐藏** - 只隐藏导航栏中的面包屑容器，保留Control Panel中的正常面包屑
|
||
- 隐藏：`.o_main_navbar .o_navbar_breadcrumbs`（导航栏顶部）
|
||
- 保留：`.o_control_panel .breadcrumb`（内容区面包屑）
|
||
2. **正常显示路径** - 点击菜单跳转时，面包屑正常显示导航路径
|
||
3. **刷新逻辑优化** - 标签刷新时真正重载而不是跳转
|
||
- 清除controller stack后重新加载
|
||
- 使用 `clearBreadcrumbs: false` 保留面包屑
|
||
- 使用 `replace: true` 替换而不是创建新action
|
||
|
||
### 🎨 主题变量系统 (v1.0.2)
|
||
1. **完全集成主题** - 使用 `udoo_om_ux` 主题的SCSS变量和CSS变量
|
||
- 背景色：`$o-navbar-background`
|
||
- 激活颜色：`--NavBar-entry-backgroundColor--active`
|
||
- 文字颜色：`$o-navbar-entry-color`
|
||
2. **自动适配主题** - 亮色/暗色模式自动切换
|
||
3. **语义化颜色** - 使用主题的语义色系统
|
||
- 刷新：`$u-text-info`，关闭：`$u-text-danger`
|
||
|
||
### ✨ 之前功能 (v1.0.0)
|
||
- **智能箭头显示** - 箭头按钮仅在标签溢出时显示
|
||
- **简化菜单文字** - 右键菜单更简洁
|
||
- **左侧菜单联动** - 标签切换时自动高亮对应菜单
|
||
|
||
## 浏览器兼容性
|
||
|
||
- ✅ Chrome 90+
|
||
- ✅ Firefox 88+
|
||
- ✅ Safari 14+
|
||
- ✅ Edge 90+
|
||
|
||
## 许可证
|
||
|
||
LGPL-3
|
||
|
||
## 作者
|
||
|
||
Sveltware Solutions
|
||
|
||
## 技术支持
|
||
|
||
如有问题或建议，请联系: jupetern24@gmail.com
|
||
|