safety-eval-service-frontend/.cursor/skills/specs/12-详情展示规范/02-数据呈现规范/SKILL.md

1.3 KiB
Raw Permalink Blame History

name description
jjb-detail-presentation 定义 JJB 详情展示数据呈现规范。在使用 antd/Descriptions、结构化展示或纯文本数据时使用。

详情展示规范

本规范旨在统一系统内所有详情类场景Modal、Drawer、独立页面的交互体验与视觉呈现。

数据呈现规范 (Data Presentation)

  • 结构化展示:详情页中的纯文本数据展示必须 使用 antd/Descriptions 组件进行结构化排版。

  • 适用范围:上述 Descriptions 约定对 独立详情页、Modal 内详情、Drawer 内详情 均适用,无例外。

  • 禁止行为

    • 禁止使用原生的 divp 标签进行简单的文本堆砌。

    • 禁止使用 Row / Col 手动模拟表单布局,除非 Descriptions 无法满足极特殊的排版需求。

    • 禁止Descriptions 设置 bordered 属性(含 bordered={true})。不要因「表格感」或习惯用法而添加;视觉规范以无表线样式为准。

  • 视觉一致性:应根据数据量的大小,合理配置 Descriptionscolumn 属性(通常建议为 2 或 3极窄区域如侧拉抽屉可用 column={1},需与可读性权衡)。

  • 实现自检:编写或 Code Review 详情区时,显式确认未使用 bordered