pengyuthon/yuthon_base
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
master
yuthon_base/omux_multi_tab/README.md
李鹏宇 cd653ce24c 1
2026-06-04 14:24:28 +08:00

4.6 KiB
Raw Permalink Blame History

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