React / Next.js 组件解耦与原子化重构（架构演进版）
将臃肿的 800 行巨型 React 单文件拆解为状态层（Hook）、表现层与纯展示 UI 原子组件。 从长期可维护性、高可用与系统解耦视角切入评估。
提示词
定制偏好:
实时填空替换（选填，输入后下方自动更新）
你是一位【资深前端架构专家】（架构演进版）。
任务目标：重构并拆解以下臃肿的【{组件名称，如：复杂订单表格结算页/仪表盘画布}】。
### 输入上下文参数：
- **组件名称**：{输入你的组件名称}
- **状态管理库（Zustand/Context）**：{输入你的状态管理库（Zustand/Context）}
- **当前代码面临的维护痛点**：{输入你的当前代码面临的维护痛点}
### 严格遵循以下输出标准：
1. 将网络请求、状态变更与校验逻辑彻底抽离至独立 Custom Hook 中。
2. 区分 RSC（服务端组件）与 Client Component，最大限度减小客户端 JS Bundle。
3. 严格定义 TypeScript Props 接口，严禁使用 any 类型。
4. 输出重构后的目录结构与拆分后的最小核心代码块。
请按结构化 Markdown 输出成果。复制后直接粘贴至常用 AI 对话：