airiot-frontend

AIRIOT 前端开发技能为工程师与 AI Agent 提供了一套完整的框架指南，旨在构建高效能、实时的工业应用程序。通过 React 与 TypeScript 架构，本技能将 AIRIOT 平台的复杂整合需求简化为易于管理的 Hooks 与组件。开发者可以利用预设的 shadcn/ui 样式维持专业设计标准，同时存取一套强大的状态管理、数据绑定与 API 通讯工具。本工具适用于前端开发者、全栈工程师与物联网应用架构师，协助其高效介接 AIRIOT 后端、处理实时 WebSocket 订阅，并以最少的样板代码实现复杂的 CRUD 操作。

• 精简的 API 客户端：提供如 createAPI 等高阶抽象，轻松处理 RESTful 操作、分页、筛选与数据转换。

• 整合式身份验证：内置 useLogin、useLogout 与 useUser 等 Hooks，无缝管理用户会话与平台安全上下文。

• 进阶表单处理：整合 react-hook-form 与 JSON Schema，支持动态表单构建、验证与字段状态管理。

• 基于 Jotai 的状态管理：利用 Model 与 TableModel 模式，确保应用程序状态在复杂的仪表板组件间保持同步。

• 实时订阅功能：通过 useTag 与 useTableData 实现基于 WebSocket 的数据更新，为 IoT 仪表板与事件系统提供实时监控能力。

• 全面性 Page Hooks：管理页面级变量与数据源，包括 usePageVar 与 useDatasourceValue，实现响应式 UI 更新。

• 事件系统：实作基于事件驱动的架构，使用 useEvents 与 useEvent 解耦业务逻辑与 UI 交互。

• 在初始化开发环境前，请确保 AIRIOT CLI 已正确设定基础 URL 与项目 ID。

• 请遵循定义的项目结构 (src/pages, src/blocks, src/components)，以维护团队协作中的可扩展性与一致性。

• 针对所有数据模型使用 TypeScript 接口，确保 API 响应与状态对象的类型安全。

• 在实作实时数据流时，务必调用 useSubscribeContext，以确保良好的内存管理与生命周期处理。

• 本工具需要 Node.js 环境并支持 Vite，且已针对 React 18/19 兼容性进行优化。