Odoo15 web端如何修改搜索栏位置及调整三分区基础布局

一、搜索栏位置修改的正确实现 #

你一开始写的Legacy.ControlPanel继承代码有明显的适配问题：Odoo15是OWL框架替换旧视图层的过渡版本，直接给web.Legacy.ControlPanel加xpath的写法，只会对还没重构的旧版legacy视图生效，所有已经用OWL重写的原生列表、表单、看板视图的控制面板根本不会走这个模板渲染，自然达不到全局修改搜索栏位置的效果。
正确实现按以下步骤走：

• 先在自定义模块里把你写的xml、js、css文件注册到web.assets_backend资产包，确保资源能在后台加载
• 两类视图的模板要分开处理：
  • 对legacy旧视图，你原来的xpath锚点要调整，不要直接找o_cp_searchview节点插内容，要先定位到控制面板的顶层容器o_control_panel再做位置调整
  • 对OWL原生视图，要单独继承web.ControlPanel模板做修改，这部分视图根本不会加载legacy模板的内容
• 如果你的需求是把搜索栏完全移出原有控制面板区域，不要只用改模板的方式实现：先通过patch给ControlPanel组件加逻辑，阻止原生位置的搜索栏渲染，再在你的目标位置独立挂载SearchBar组件，记得传入正确的searchModel、viewId等props，不然搜索联想、筛选、分组这些功能会直接失效。

给个可以直接用的基础模板参考：

<!-- 处理legacy旧视图的控制面板 -->
<t t-inherit="web.Legacy.ControlPanel" t-inherit-mode="extension" owl="1">
  <xpath expr="//div[hasclass('o_cp_searchview')]" position="replace">
    <!-- 留空即可移除原生位置的搜索栏 -->
  </xpath>
</t>

<!-- 处理OWL原生视图的控制面板 -->
<t t-inherit="web.ControlPanel" t-inherit-mode="extension" owl="1">
  <xpath expr="//div[hasclass('o_cp_search')]" position="replace">
    <!-- 留空即可移除原生位置的搜索栏 -->
  </xpath>
</t>

二、侧边栏、搜索栏、内容区三分区布局实现方案 #

这个需求要改后台整体渲染框架，只改控制面板模板完全做不到，按以下步骤实现可以避免兼容问题：

• 第一步：重写后台主布局结构
  继承Odoo默认的后台主布局模板web.webclient_bootstrap，调整顶层DOM结构，拆成三个独立的同级分区：
  • 侧边栏分区：固定定位在页面最左侧，默认宽度240px，用来挂载原有的一级、二级菜单组件
  • 搜索栏分区：固定定位在侧边栏右侧、页面顶部，高度56px，宽度自适应占满剩余横向空间，z-index设置高于内容区，用来挂载你抽离出来的全局搜索栏
  • 内容区分区：设置对应的margin值避开侧边栏和顶部搜索栏的占位，所有视图内容、控制面板的操作按钮（创建、导出、动作按钮等）都保留在这个区域渲染
• 第二步：调整组件挂载逻辑
  通过patch修改WebClient主组件的挂载逻辑，把原来默认挂载在顶部导航的菜单组件、原来挂载在控制面板里的搜索栏组件，分别挂载到你新加的侧边栏、搜索栏分区容器里，不要用原生的默认挂载点。
• 第三步：写CSS做适配
  重点处理几个交互场景的样式：
  • 侧边栏折叠/展开状态下，搜索栏和内容区的左边距要同步跟随调整
  • 移动端小屏下，侧边栏改成覆盖式滑出菜单，搜索栏宽度占满屏幕全宽
  • 注意不要把控制面板里的动作按钮、筛选面板一起移到顶部搜索栏，保留在内容区顶部即可，符合用户原有操作习惯
• 注意所有修改都要在自定义模块里通过继承、patch的方式实现，不要直接改web模块的原生源码，不然版本升级或者安装第三方模块时很容易出现冲突。

内容的提问来源于stack exchange，提问作者kinjal birare