fix(frontend): redraw status charts on container resize in narrow sidebar

observe the chart host width and force cpu/network chart remount when the sidebar width changes, preventing stale canvas dimensions after layout compression. add min-width/width constraints on chart containers and canvas to keep chart rendering bounded to the current panel width, improving responsiveness in tight layouts. archive the completed layout-parity proposal/tasks and sync changelog/module records to reflect the delivered frontend updates.
2026-04-16 00:47:25 +08:00
parent a28822ec79
commit 34d6c3f499
8 changed files with 260 additions and 172 deletions
@@ -1,126 +0,0 @@
-# 变更提案: status-monitor-reference-layout-parity
-
-## 元信息
-```yaml
-类型: 新功能/修复/重构/优化
-方案类型: implementation
-优先级: P0/P1/P2/P3
-状态: 草稿
-创建: 2026-04-15
-```
-
---
-
-## 1. 需求
-
-### 背景
-{为什么需要这个变更}
-
-### 目标
-{要达成什么目标}
-
-### 约束条件
-```yaml
-时间约束: {如有}
-性能约束: {如有}
-兼容性约束: {如有}
-业务约束: {如有}
-```
-
-### 验收标准
- [ ] {标准1}
- [ ] {标准2}
-
---
-
-## 2. 方案
-
-### 技术方案
-{简要描述实现方式}
-
-### 影响范围
-```yaml
-涉及模块:
-  - {模块1}: {影响说明}
-预计变更文件: {数量}
-```
-
-### 风险评估
-| 风险 | 等级 | 应对 |
-|------|------|------|
-| {风险} | 高/中/低 | {措施} |
-
---
-
-## 3. 技术设计（可选）
-
-> 涉及架构变更、API设计、数据模型变更时填写
-
-### 架构设计
-```mermaid
-flowchart TD
-    A[组件A] --> B[组件B]
-```
-
-### API设计
-#### {METHOD} {路径}
- **请求**: {结构}
- **响应**: {结构}
-
-### 数据模型
-| 字段 | 类型 | 说明 |
-|------|------|------|
-| {字段} | {类型} | {说明} |
-
---
-
-## 4. 核心场景
-
-> 执行完成后同步到对应模块文档
-
-### 场景: {场景名称}
-**模块**: {所属模块}
-**条件**: {前置条件}
-**行为**: {操作描述}
-**结果**: {预期结果}
-
---
-
-## 5. 技术决策
-
-> 本方案涉及的技术决策，归档后成为决策的唯一完整记录
-
-### status-monitor-reference-layout-parity#D001: {决策标题}
-**日期**: 2026-04-15
-**状态**: ✅采纳 / ❌废弃 / ⏸搁置
-**背景**: {为什么需要这个决策}
-**选项分析**:
-| 选项 | 优点 | 缺点 |
-|------|------|------|
-| A: {方案A} | {优点} | {缺点} |
-| B: {方案B} | {优点} | {缺点} |
-**决策**: 选择方案{X}
-**理由**: {详细理由}
-**影响**: {对哪些模块有影响}
-
---
-
-## 6. 成果设计
-
-> 含视觉产出的任务由 DESIGN Phase2 填充。非视觉任务整节标注"N/A"。
-
-### 设计方向
- **美学基调**: {鲜明的美学方向名称+具体描述 — 禁止"现代简洁"等空泛词}
- **记忆点**: {这个设计最令人难忘的一个特征}
- **参考**: {URL/截图/风格描述/无}
-
-### 视觉要素
- **配色**: {主色+强调色+背景色，色值或方向}
- **字体**: {展示字体(标题)+正文字体配对+选择理由，避免 Arial/Inter/Roboto 等通用字体}
- **布局**: {整体结构+空间策略}
- **动效**: {入场动画/状态切换/交互反馈的动态效果策略}
- **氛围**: {背景处理/纹理/阴影/透明叠层等纵深细节}
-
-### 技术约束
- **可访问性**: {对比度/语义化/导航要求/N/A}
- **响应式**: {断点/适配策略/N/A}
@@ -1,41 +0,0 @@
-# 任务清单: status-monitor-reference-layout-parity
-
-```yaml
-@feature: status-monitor-reference-layout-parity
-@created: 2026-04-15
-@status: pending
-@mode: {R2|R3}
-```
-
-## 进度概览
-
-| 完成 | 失败 | 跳过 | 总数 |
-|------|------|------|------|
-| 0 | 0 | 0 | X |
-
---
-
-## 任务列表
-
-### 1. {阶段/模块名称}
-
- [ ] 1.1 在 `{文件路径}` 中实现 {具体功能}
- [ ] 1.2 在 `{文件路径}` 中实现 {具体功能}
-  - 依赖: 1.1
-
-### 2. {阶段/模块名称}
-
- [ ] 2.1 {任务描述}
-
---
-
-## 执行日志
-
-| 时间 | 任务 | 状态 | 备注 |
-|------|------|------|------|
-
---
-
-## 执行备注
-
-> 记录执行过程中的重要说明、决策变更、风险提示等