Huo15 Owl Dev — Huo15 猫头鹰 开发者

SKILL.md — huo15-owl-dev 触发条件 用户提到以下内容时激活本技能： OWL 组件开发 Odoo 前端 / Web 开发 QWeb 模板 OWL 组件生命周期 Odoo JS/Web 组件 odoo.define / owl.component Odoo 15+ 前端架构 OWL 核心概念 什么是 OWL？ OWL（Odoo Web Library）是 Odoo 15+ 引入的新一代前端框架，用于替代旧的 web.old（backbone-based）架构。它基于： QWeb 模板（XML） 响应式状态管理（PoP/Props） TypeScript（原生支持） OWL vs 旧架构 特性 OWL（新） web.old（旧） 模板 QWeb XML QWeb XML 状态 useState / useRefs 不存在 组件 类 + 装饰器 Widget 基类 生命周期 PoP (Props on Props) 不存在 TypeScript 原生支持 不支持 响应式 自动追踪依赖 手动绑定 性能 虚拟DOM + 懒加载 完整重渲染 OWL 组件结构 最小组件模板 / @odoo-module / import { Component, useState, useEnv } from "@odoo/owl"; export class MyComponent extends Component { static template = "my_module.MyComponent"; // 响应式状态 state = useState({ value: 0, items: [], loading: false, }); // 组件挂载时调用 onWillMount() { this.loadData(); } async loadData() { this.state.loading = true; try { const result = await this.rpc("/my_module/data"); this.state.items = result; } finally { this.state.loading = false; } } increment() { this.state.value++; } onClick() { this.trigger("custom-event", { payload: this.state.value }); } } 目录结构 my_module/ ├── static/ │ └── src/ │ ├── js/ │ │ ├── components/ │ │ │ ├── my_component/ │ │ │ │ ├── my_component.xml # QWeb 模板 │ │ │ │ └── my_component.ts # 组件逻辑 │ │ │ └── other_component/ │ │ │ ├── other_component.xml │ │ │ └── other_component.ts │ │ └── pages/ │ │ └── my_page.xml │ └── css/ │ └── my_component.scss ├── views/ │ └── templates.xml # Web 入口 └── __manifest__.py 组件注册与挂载 __manifest__.py 配置 { 'name': '我的模块', 'depends': ['web'], 'assets': { 'web.assets_backend': [ ('include', 'my_module.static.src.js.components.my_component.my_component_xml'), 'my_module/static/src/js/components/my_component/my_component.ts', 'my_module/static/src/css/my_component.scss', ], }, } XML 入口（views/templates.xml）