求助：如何在Odoo应用索引文件中添加标签页

一、先明确Odoo前端的核心规则 #

别用纯HTML那套野路子写法，Odoo的自定义页面必须遵循QWeb模板规范，静态资源（CSS/JS）也得通过模块配置文件注册，不能直接在页面里塞<script>或<style>。另外<notebook>是表单视图专属组件，非表单页面根本用不了，别在这白费功夫。

二、标签页实现的两种可行方案 #

方案1：用Odoo内置的Bootstrap风格标签页 #

直接用Odoo原生支持的nav-tabs组件，不用自己写复杂JS：

1. 在模块的views目录下创建QWeb模板文件（比如app_index.xml）：

<template id="app_index_page" name="App Index Page">
    <t t-call="web.layout">
        <div class="container mt-4">
            <!-- 标签导航栏 -->
            <ul class="nav nav-tabs" id="appTab" role="tablist">
                <li class="nav-item">
                    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab1">标签页1</button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab2">标签页2</button>
                </li>
            </ul>
            <!-- 标签内容区 -->
            <div class="tab-content" id="appTabContent">
                <div class="tab-pane fade show active" id="tab1">
                    <p>标签页1的内容</p>
                </div>
                <div class="tab-pane fade" id="tab2">
                    <p>标签页2的内容</p>
                </div>
            </div>
        </div>
    </t t-call>
</template>

2. 把这个模板文件路径加到模块__manifest__.py的data字段里，安装模块就能生效。

方案2：自定义OWL组件（适合复杂交互场景） #

如果需要更灵活的逻辑控制，用Odoo官方推荐的OWL框架写组件：

1. 在static/src/js目录下创建组件文件app_index_tabs.js：

/** @odoo-module **/

import { Component, useState } from "@odoo/owl";

export class AppIndexTabs extends Component {
    setup() {
        this.state = useState({ activeTab: 'tab1' });
    }

    switchTab(tabName) {
        this.state.activeTab = tabName;
    }
}

AppIndexTabs.template = "your_module_name.AppIndexTabs";

2. 在static/src/xml目录下创建对应模板app_index_tabs.xml：

<templates xml:space="preserve">
    <t t-name="your_module_name.AppIndexTabs" owl="1">
        <div class="container mt-4">
            <div class="nav nav-tabs">
                <button class="nav-link" t-att-class="state.activeTab === 'tab1' ? 'active' : ''" t-on-click="() => switchTab('tab1')">标签页1</button>
                <button class="nav-link" t-att-class="state.activeTab === 'tab2' ? 'active' : ''" t-on-click="() => switchTab('tab2')">标签页2</button>
            </div>
            <div class="tab-content p-3 border border-top-0">
                <t t-if="state.activeTab === 'tab1'">标签页1内容</t>
                <t t-if="state.activeTab === 'tab2'">标签页2内容</t>
            </div>
        </div>
    </t>
</templates>

3. 在__manifest__.py里注册这些资源：

'assets': {
    'web.assets_frontend': [
        'your_module_name/static/src/js/app_index_tabs.js',
        'your_module_name/static/src/xml/app_index_tabs.xml',
        # 自定义CSS文件也加在这里
        'your_module_name/static/src/css/app_index.css',
    ],
},

4. 在页面模板里调用这个组件：

<template id="app_index_page" name="App Index Page">
    <t t-call="web.layout">
        <AppIndexTabs />
    </t t-call>
</template>

三、解决前端资源和事件失效问题 #

1. 禁止直接在模板里写<script>/<style>：Odoo会自动过滤这类标签，必须把CSS/JS文件放在static/src目录下，通过__manifest__.py的assets字段注册。
2. 按钮点击事件：别用普通HTML的onclick，要么用OWL的t-on-click绑定组件方法，要么在JS组件里处理事件逻辑。
3. 外部资源引入：别直接加<link>/<script>标签，把外部资源URL加到assets字段里：

'assets': {
    'web.assets_frontend': [
        'https://cdn.example.com/your-style.css',
        'https://cdn.example.com/your-script.js',
    ],
},

四、必做的验证步骤 #

1. 检查__manifest__.py里data和assets字段的文件路径有没有写错。
2. 更新模块列表，重新安装模块。
3. 清除浏览器缓存（Ctrl+Shift+R），避免旧代码干扰。
4. 打开浏览器控制台（F12）查看报错信息，比如组件未注册、资源路径错误等，根据报错针对性修复。

内容的提问来源于stack exchange，提问作者Ajay Ghimre