| name | file-modularization |
| description | Use when adding or refactoring frontend features in this repository and you need to prevent large single-file changes, oversized entry files, mixed responsibilities, or giant App.tsx/Home.tsx style implementations. Apply it when a task risks stuffing UI, state, effects, data access, and helper logic into one file instead of splitting focused components, hooks, services, utils, and types. |
File Modularization
先判断职责,再决定文件。App.tsx 是历史遗留的全局编排接缝,当前已经很大;新功能不要继续堆进它。Home.tsx、PlayerPanel.tsx、AppOverlays.tsx、AppDialogs.tsx 已有相邻的 model/helper 目录,应沿现有边界扩展。
Layer map
- 视图结构:
src/components/*
- app-level 装配和单区域协调:
src/components/app/*
- React 生命周期、异步副作用、可复用交互:
src/hooks/*
- 跨组件共享状态:
src/stores/*
- 请求、解析、provider、播放流程、缓存:
src/services/*
- 纯计算、排序、映射、格式化:
src/utils/*
- 跨层合同:
src/types.ts 或 src/types/*
如果一个文件同时新增 UI、请求、副作用、状态派生、事件处理和类型定义,说明拆分不足。
Current app boundaries
src/components/app/Home.tsx -> components/app/home/*,尤其 buildHomeModel.ts、collection adapters、GridViewOverlayHost.tsx、local/Navi grid views。
src/components/app/PlayerPanel.tsx -> components/app/player-panel/*。
src/components/app/overlays/AppOverlays.tsx -> components/app/overlays/*。
src/components/app/dialogs/AppDialogs.tsx -> components/app/dialogs/*。