ReportView — 报表编辑面板重构为右侧固定内联面板（Dashboard 模式对齐）

[hotlong]

当前 ReportView 编辑报表时使用 DesignDrawer（Shadcn Sheet 覆盖层），而 DashboardView 已经采用了右侧固定内联配置面板的模式。需要将 ReportView 重构为与 DashboardView 一致的模式：编辑时配置面板固定在右侧，修改后左侧报表预览立即更新。

🎯 目标

参考 DashboardView (apps/console/src/components/DashboardView.tsx) 的实现模式，将 ReportView 的编辑体验从 Sheet 覆盖层重构为右侧内联固定面板 + 左侧实时预览。

---

✅ 修改细节清单

1. apps/console/src/components/ReportView.tsx — 主要重构

• 移除 DesignDrawer 导入和使用 — 删除 import { DesignDrawer } from './DesignDrawer' 和 L276-L295 的 <DesignDrawer> 组件
• 移除 handleCloseDrawer 回调 — 删除 L69-L71 的 handleCloseDrawer callback（不再需要 onOpenChange 模式）
• 将 drawerOpen 状态重命名为 configPanelOpen — 与 DashboardView 命名一致（L26）
• 添加 configVersion 状态计数器 — const [configVersion, setConfigVersion] = useState(0); 用于稳定 useConfigDraft 的 config 引用，防止每次 live field change 时 draft 被重置
• 重构 handleOpenDrawer → handleOpenConfigPanel — 改为：setEditSchema(reportData); setConfigPanelOpen(true); setConfigVersion(v => v + 1);
• 添加 handleCloseConfigPanel 回调 — setConfigPanelOpen(false);
• 添加 useAdapter 引入和 auto-save helper — 从 '../context/AdapterProvider' 导入 useAdapter，添加 saveSchema callback 用于调用 adapter.update('sys_report', reportName!, schema) + refresh()
• 添加 handleReportConfigSave 回调 — 保存 config 到 editSchema，调用 saveSchema，递增 configVersion
• 添加 handleReportFieldChange 回调 — setEditSchema(prev => ({ ...prev, [field]: value })) 用于实时 live preview
• 稳定 config 引用 — 使用 useMemo 基于 configVersion 计算 reportConfig，防止 useConfigDraft draft reset（与 DashboardView 的 dashboardConfig 模式一致）
• 修改 previewReport 计算 — 从 drawerOpen && editSchema ? editSchema : reportData 改为 editSchema || reportData（编辑后关闭面板仍保持 preview 直到 metadata 刷新）
• 修改主区域布局 — 将 <ReportConfigPanel> 从 <DesignDrawer> 的 children render prop 改为直接渲染在 flex 布局中，作为 <div className="flex-1 overflow-hidden flex flex-col sm:flex-row relative"> 的直接子元素
• 内联 ReportConfigPanel — 添加在左侧报表预览和 MetadataPanel 之间：

  <ReportConfigPanel
   open={configPanelOpen}
   onClose={handleCloseConfigPanel}
   config={reportConfig}
   onSave={handleReportConfigSave}
   onFieldChange={handleReportFieldChange}
   availableFields={availableFields}
  />

• 添加 metadata refresh 清理 — useEffect 在 configPanelOpen === false 时清除 stale editSchema（与 DashboardView L155-L160 一致）
• 添加 reportName 导航清理 — useEffect 在 reportName 变化时重置 editSchema、configPanelOpen（与 DashboardView L139-L145 一致）
• 修改 Edit 按钮 — onClick 从 handleOpenDrawer 改为 handleOpenConfigPanel

2. apps/console/src/__tests__/ReportView.test.tsx — 测试更新

• 移除 DesignDrawer 相关测试 mock — 不再需要 Sheet/SheetContent mock
• 添加内联面板渲染测试 — 点击 Edit 按钮后，config-panel test-id 应存在于 DOM 中
• 添加 live preview 测试 — 修改 config panel 中的 title 字段，左侧预览应立即反映变化
• 添加面板关闭测试 — 点击 close 按钮后，config-panel 应从 DOM 中移除
• 添加 auto-save 测试 — 保存 config 后验证 adapter.update 被调用
• 添加 metadata refresh 后 editSchema 清理测试 — 面板关闭后 metadata 刷新应清除 stale state
• 添加 reportName 导航清理测试 — 切换报表时应重置编辑状态

3. packages/plugin-report/src/ReportConfigPanel.tsx — 无需修改（确认）

• 确认 ReportConfigPanel 组件无需改动 — 已经基于 ConfigPanelRenderer + useConfigDraft 构建，open prop 控制渲染，内联布局由 CSS absolute inset-y-0 right-0 sm:relative 自动适配

4. packages/plugin-report/src/__tests__/ReportConfigPanel.test.tsx — 无需修改（确认）

• 确认现有 ReportConfigPanel 测试仍通过 — 组件接口不变

5. ROADMAP.md — 更新

• P2.1 条目更新 — 将 ReportView: Refactored to left-right split layout (preview + DesignDrawer) 更新为：ReportView: Refactored to inline right-side config panel (preview + ReportConfigPanel) — consistent with DashboardView inline config panel pattern
• P1.10 Phase 12 或新条目 — 添加 Report Config Panel 内联化条目：

  **Phase 12 — Report Config Panel Inline Refactor (Dashboard Parity):**
  - [x] Replace DesignDrawer overlay with inline ReportConfigPanel (same flex layout as DashboardView)
  - [x] Live preview: config field changes sync in real-time to ReportViewer
  - [x] Auto-save via useAdapter().update() on config save
  - [x] Config draft stabilization via configVersion counter
  - [x] Metadata refresh cleanup (editSchema cleared on panel close + metadata change)
  - [x] Report navigation cleanup (editSchema + panel state reset on reportName change)
  

• Executive Summary 更新 — 在 "What Remains" 或 "Current Priority" 中标记 Report Config Panel Inline 完成

6. 运行测试验证

• 运行 pnpm test packages/plugin-report — 确保 ReportConfigPanel 相关 13+ 测试全部通过
• 运行 pnpm test apps/console/src/__tests__/ReportView — 确保 ReportView 集成测试通过
• 运行 pnpm test apps/console — 确保 Console 全部测试通过（无回归）
• 运行 pnpm build — 确保 43/43 builds passing
• 运行 pnpm test — 全局测试套件无回归

---

📐 架构参考

DashboardView 模式（目标状态）：

┌──────────────────────────────────────────────────┐
│ Header (title + Edit button) │
├───────────────────────┬──────────────────────────┤
│ │ Edit Report: Sales Report │
│ Report Preview │ Report › Configuration │
│ (ReportViewer) │ ┌─ BASIC ──────────────┐ │
│ — live updates — │ │ Title │ │
│ │ │ Description │ │
│ │ ├─ DATA ──────────────┤ │
│ │ │ Data source │ │
│ │ │ Row limit │ │
│ │ ├─ FILTERS ───────────┤ │
│ │ │ + Add filter │ │
│ │ ├─ GROUP BY ──────────┤ │
│ │ │ + Add sort │ │
│ │ ├─ EXPORT ────────────┤ │
│ │ ├─ SCHEDULE ──────────┤ │
│ │ ├─ APPEARANCE ────────┤ │
│ │ └────────────────────┘ │
└───────────────────────┴──────────────────────────┘

关键文件参考：

• apps/console/src/components/DashboardView.tsx — 目标模式参考（L422-L465 主区域布局）
• apps/console/src/components/ReportView.tsx — 需要重构的文件
• packages/plugin-report/src/ReportConfigPanel.tsx — 已有的 config panel（无需改动）
• packages/components/src/custom/config-panel-renderer.tsx — 通用 ConfigPanelRenderer（CSS 已支持内联：sm:relative）

---