SuperAPI AI 工具集

mobile-app-structure

前端与建站

查看项目

更新于 10-15 16:42

技能介绍

用途:作为 web/mobile 目录下代码组织方式的事实标准,在创建任何文件前先查阅,用于指导新文件与功能模块的放置。

主要能力与布局规则:目录分为 src/pages/(仅 Pages Router 路由壳,不含逻辑与布局 JSX)、src/features/<feature>/(每个功能一个文件夹,如 sessions/、chat/、agents/、settings/、nav/,内含组件、同名钩子与 .ts 辅助文件,以及 states/ 状态目录)、src/components/(全应用外壳如 AgentaLogo、ContentRail、PageTitle、ScreenScaffold、StatusTag,ui/ 放本地 shadcn 组件)、src/lib/(cn 工具、动效预设、api 粘合、上下文解析)、src/styles/ 与 scripts/。

约定:页面是薄壳,只解析路由参数并渲染一个功能屏幕组件;每个文件一个组件,不导出次要组件;每个带数据的组件都要有设计好的 states/ 同级文件(骨架、空态、错误态),骨架需镜像最终布局几何以避免切换抖动,空态需含行动号召,错误态需提供重试并保留用户输入;无数据屏幕的功能(app/、context/、nav/)不需要 states/ 文件夹。

数据流:组件通过 @agenta/* 包或 lib/ 中的薄 fetcher 获取数据,优先复用 @agenta/-ui 现成界面;严禁导入 @/oss/、@agenta/oss、@agenta/ee,移动端零应用层导入(由 lint 强制)。不设 provider 队列,_app.tsx 保持精简并挂载 features/app/AppProviders.tsx(query client、jotai store、上下文同步、auth gate、实体弹窗),仅在具体功能需要时按最小范围新增 provider。

新增功能清单:创建功能文件夹与屏幕组件,为每个带数据组件建 states/,在 src/pages/ 加路由壳,过渡使用 useMotionPresets(),最后运行 pnpm --filter @agenta/mobile lint && pnpm --filter @agenta/mobile types:check。限制:仅适用于 Agenta 移动端;文档未提供收费、平台支持等其它信息。