- name
- orbcafe-pivot-ainav
- description
- Build ORBCAFE advanced analytics and voice navigation with CPivotTable/usePivotTable and CAINavProvider/useVoiceInput using official examples patterns. Use for drag-drop pivot dimensions, PivotChart companion views, aggregation controls, preset persistence, or space-key voice workflows, especially when interactions appear not to take effect.
ORBCAFE Pivot + AINav
Workflow
- 先对照
skills/orbcafe-ui-component-usage/references/module-contracts.md，确认这是Hook-first模块。 - 用
references/domain-patterns.md判定 pivot、voice 或组合模式。 - 执行安装与最小可运行接入。
- 用
references/recipes.md产出实现骨架。 - 对 pivot 需求额外检查是否需要三段式布局（配置区 + 图表区 + 结果区）、独立折叠、图表选择器和 preset 图表快照。
- 用
references/guardrails.md检查受控状态、preset 持久化、ASR 配置。 - 输出验收步骤与“没效果”排障。
Installation and Bootstrapping (Mandatory)
npm install orbcafe-ui @mui/material @mui/icons-material @mui/x-date-pickers @emotion/react @emotion/styled dayjs本仓库联调：
npm run build
cd examples
npm install
npm run dev参考实现：
examples/app/_components/PivotTableExampleClient.tsxexamples/app/_components/AINavExampleClient.tsxsrc/components/PivotTable/PivotChart/
Output Contract
Mode:Hook-first.Module choice: pivot or AINav (or both).Minimal implementation: controlled if persistence/integration needed.Ops note: preset 持久化、PivotChart 默认逻辑或 ASR 契约。Verify: 至少包括拖拽布局生效、聚合切换、图表切换、独立折叠、生效后持久化、语音触发与回调。Troubleshooting: 至少包含 3 条失效排查点。
Examples-Based Experience Summary
- 需要持久化时优先
usePivotTable受控模式，不要只依赖组件内部状态。 - preset 持久化应在
onPresetsChange回调落地（本地可用 localStorage，生产建议服务端）。 - Pivot 默认是三段式：配置区、PivotChart、结果表格；图表区和表格区都能独立折叠。
- PivotChart 最多只映射 1 个维度和 2 个度量。默认维度优先取
rows[0]，否则columns[0]；默认主度量取values[0]。 - 多维或多度量时，图表工具条应显示 4 个统一宽度的下拉：
Dimension / Measure / Compare measure / Chart type。 - preset 不只保存布局和筛选，也要保存图表维度、主度量、对比度量和图表类型。
- localStorage 读写放在浏览器安全边界（初始化判定
window，写入放useEffect）。 - AINav 强制提供
onVoiceSubmit，否则“录音了但业务不动作”。 - 空格热键建议保持
ignoreWhenFocusedInput=true，避免输入框场景误触。