ORBCAFE StdReport Workflow
Workflow
- 1. 执行安装与运行前置。
- 先对照
skills/orbcafe-ui-component-usage/references/module-contracts.md,确认这是 Hook-first 模块。 - 用
references/component-selection.md 选择 integrated 或 table-only。 - 基于
references/recipes.md 生成最小可运行代码。 - 用
references/guardrails.md 强制检查 identity、分页、持久化、i18n。 - 按官方 examples 补齐验收与排障步骤。
Installation and Bootstrapping (Mandatory)
CODEBLOCK0
本仓库联调时,严格按官方顺序:
CODEBLOCK1
参考实现:
Mandatory rules
-
metadata.id for
useStandardReport
-
id for
CStandardPage
-
appId for standalone
CTable /
CSmartFilter
- - 默认优先
useStandardReport + CStandardPage mode="integrated"。 - 始终从
orbcafe-ui 包入口导入,不导入私有 src/components/*。 - 需要 locale 时优先用
CAppPageLayout.locale 或 OrbcafeI18nProvider。 - INLINECODE20 开启时,始终给出 async 回调并写清 payload 结构。
- 后端不支持
limit=-1 时,在 fetchData 层显式转换,不要把 ALL 模式直接透传。
Examples-Based Experience Summary
- - 先用
useStandardReport 产出 pageProps,再注入 tableProps.quick* 扩展,稳定且可维护。 - 通过
metadata.variants 提供默认视图,再让用户落地保存,能减少首次空白配置。 - 列渲染尽量只做展示转换,筛选值保持机器稳定值(例如
active/pending/inactive)。 - 表格放在固定高度容器(例如
calc(100vh - 120px))可避免页面整体滚动抖动。
Output Contract
- 0.
Mode: Hook-first. - INLINECODE31 : integrated page or table-only.
- INLINECODE32 : paste-ready, imports from
orbcafe-ui only. - INLINECODE34 : columns/filters/rows/fetchData shape.
- INLINECODE35 : 启动页面、筛选生效、分页切换、quick 操作触发、刷新后配置保留。
- INLINECODE36 : 至少包含以下排查项:
- 忘记
metadata.id/id/appId 导致变体/布局“没效果”
- 没有先
npm run build(本地
file:.. 依赖场景)
- 错误导入路径或 Next 客户端边界导致组件不渲染
ORBCAFE StdReport 工作流
工作流
- 1. 执行安装与运行前置。
- 先对照 skills/orbcafe-ui-component-usage/references/module-contracts.md,确认这是 Hook-first 模块。
- 用 references/component-selection.md 选择 integrated 或 table-only。
- 基于 references/recipes.md 生成最小可运行代码。
- 用 references/guardrails.md 强制检查 identity、分页、持久化、i18n。
- 按官方 examples 补齐验收与排障步骤。
安装与启动(必选)
bash
npm install orbcafe-ui @mui/material @mui/icons-material @mui/x-date-pickers @emotion/react @emotion/styled dayjs
本仓库联调时,严格按官方顺序:
bash
仓库根目录
npm run build
cd examples
npm install
npm run dev
参考实现:
- - examples/app/_components/StdReportExampleClient.tsx
- examples/app/std-report/page.tsx
强制规则
- useStandardReport 的 metadata.id
- CStandardPage 的 id
- 独立 CTable / CSmartFilter 的 appId
- - 默认优先使用 useStandardReport + CStandardPage mode=integrated。
- 始终从 orbcafe-ui 包入口导入,不导入私有 src/components/*。
- 需要 locale 时优先用 CAppPageLayout.locale 或 OrbcafeI18nProvider。
- quickCreate/quickEdit/quickDelete 开启时,始终给出 async 回调并写清 payload 结构。
- 后端不支持 limit=-1 时,在 fetchData 层显式转换,不要把 ALL 模式直接透传。
基于示例的经验总结
- - 先用 useStandardReport 产出 pageProps,再注入 tableProps.quick* 扩展,稳定且可维护。
- 通过 metadata.variants 提供默认视图,再让用户落地保存,能减少首次空白配置。
- 列渲染尽量只做展示转换,筛选值保持机器稳定值(例如 active/pending/inactive)。
- 表格放在固定高度容器(例如 calc(100vh - 120px))可避免页面整体滚动抖动。
输出契约
- 0. 模式: Hook-first。
- 模式: integrated page 或 table-only。
- 代码: 可直接粘贴,仅从 orbcafe-ui 导入。
- 数据契约: columns/filters/rows/fetchData 结构。
- 验证: 启动页面、筛选生效、分页切换、quick 操作触发、刷新后配置保留。
- 排障: 至少包含以下排查项:
- 忘记 metadata.id/id/appId 导致变体/布局没效果
- 没有先 npm run build(本地 file:.. 依赖场景)
- 错误导入路径或 Next 客户端边界导致组件不渲染