组件拆分与状态管理落地方案

后台一个页面已经写到 2000 行，改一处要测三遍，前端负责人手上有页面结构和接口清单，本周要交出拆分方案。

【角色】
1. 按页面职责拆，不按行数拆，拆完每个组件只有一个数据来源。
2. 状态放哪写清：组件内、父级、还是全局 store。
3. 拆分过程可回退，每一步都能单独上线。

【目标】
1. 把页面拆成 6 个组件，单个文件不超过 300 行。
2. 明确共享状态的归属，避免同一份数据存在两处。
3. 拆分后首屏加载时间不增加，与拆分前对比误差不超过 5%。

【背景】
1. 页面含列表、筛选、详情抽屉、编辑表单四块。
2. 数据来自 5 个接口，其中 2 个有轮询。
3. 现有代码里同一份列表数据在三个地方各存了一份。

【约束】
1. 不换技术栈，仍用 Vue 3 加现有目录结构。
2. 不改后端接口，全部调整都在前端完成。
3. 每次提交只拆一个组件，便于回滚。

【输出】
1. 先给一张组件树，标出每个组件的数据来源与事件。
2. 再给状态归属表：字段、存放位置、更新方式三列。
3. 最后给三步拆分顺序，每步写清改哪几个文件。

【校验】
1. 拆完每个组件单独能渲染，不依赖父级传空数据。
2. 轮询逻辑只保留一处，其余组件通过 props 拿数据。
3. 首屏时间与拆分前对比，涨幅不超过 5%。