safety-eval-service-frontend/.cursor/skills/specs/05-页面布局与通用UI规范/01-页面Layout/SKILL.md

name	description
jjb-page-layout	定义 JJB 项目页面 Layout 规范。在使用 PageLayout、页面根容器或 jjb-react-admin-component 时使用。必须参考 MD/d.ts 文档，禁止猜测属性。

页面布局与通用 UI 规范

页面 Layout

• 除提示词明确不需要的情况下，所有页面 必须 使用：

  import PageLayout from '@cqsjjb/jjb-react-admin-component/PageLayout'
  

  必须严格参考node_modules中对应依赖包的 MD 文档或 d.ts 文件！不得猜测组件属性！

• 禁止自定义页面根容器（除提示语明确要求的除外）

• PageLayout 与外层包裹：

  • 不建议 再用无业务含义的 div（或其它块级节点）把 PageLayout 包一层，或把 PageLayout 当作仅用于套壳的子节点；页面组件应尽量 return 时以 PageLayout 为根（与上条「禁止自定义页面根容器」一致）。
  • 若确有强需求必须外层包裹（例如错误边界、权限包装、实验性布局容器），包裹层须保证占满可视布局区域，避免内容区高度塌陷、内部滚动异常：至少设置 style={{ width: '100%', height: '100%' }}，或使用等价的样式类（如 width: 100%; height: 100%）。

代码演示

import { Button } from 'antd';
import PageLayout from '@cqsjjb/jjb-react-admin-component/PageLayout';

function App() {
  return (
    <PageLayout title="用户中心">
      
    </PageLayout>
  )
}

API

属性	说明	类型	默认值
title	页面标题	string	-
extra	右上角扩展	ReactNode	-
header	自定义头部	ReactNode	-
footer	自定义底部	ReactNode	-
history	路由历史对象	History	-
noStyle	去除所有样式	boolean	false
noBorder	取消边框	boolean	false
formLine	form 表单行	ReactNode[]	-
formLineStyle	form 表单行样式	CSSProperties	-
previous	显示返回上一页	boolean	false
transparent	背景透明	boolean	false
contentStyle	内容区样式	CSSProperties	-
footerStyle	底部样式	CSSProperties	-
pageHeaderStyle	头部样式	CSSProperties	-
style	容器样式	CSSProperties	-
onBack	自定义返回事件	() => void	-

注意：previous 为 true 时 history 必传，否则点击返回无效。