Mockup Window 窗口外框
MockupWindow 可以使用 Rue 基础的静态窗口外壳视觉，同时补了一层更顺手的结构化 API。 既可以继续直接写 children，也可以用 title、toolbar、actions 快速搭一个带头部和底部操作区的展示窗口。
何时使用
- 需要模拟一个系统窗口、面板或预览壳层，用来承载展示内容。
- 希望使用 Rue 当前 mockup-window 视觉，但不想每次都手写头部、内容区和底部操作区。
- 需要同时兼顾推荐用法和完全手动拼装的低层布局能力。
# 结构化窗口
推荐用法：根组件直接负责标题、工具文字、内容区和底部操作区。
Deployment Preview
把常见预览面板的标题、状态和操作整理成一套更顺手的写法。
Preview ready
Preview
Build info
Branch: feat/mockup-window
Runtime: 82ms
Checklist
- Visual review passed
- API examples updated
- Ready for handoff
Publish
# 复合子组件
需要更细粒度控制时，用 Header / Toolbar / Body / Actions 手动拼装。
Analytics Snapshot
低层用法适合需要自定义头部排版的场景。
Views
128k
Signups
3.2k
Conversion
5.8%
# 工作台布局
结构化 API 和低层 Body 可以混用，快速拼出更复杂的后台窗口。
Workspace Activity
适合承载列表、侧栏和操作条的中等复杂度展示区域。
Filters / New panel
Sections
Overview
Reports
Releases
Queue
Notes
这里保持的是 Rue 自己的展示型窗口风格，不把 MockupWindow 做成真正的模态框或桌面应用壳。
# window mockup with border
使用组合示例，不改动基础 children 透传写法。
Hello!
# window mockup with background color
基础背景形态也展示，适合最简单的展示壳层。
Hello!
API
MockupWindow 同时支持“基础的 children 直出模式”和“新的结构化窗口模式”。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
actions | 底部操作区；传入后自动渲染带分隔线的底栏 | any | - |
actionsClassName | 底部操作区 className | string | - |
background | 为根节点追加 bg-base-100 | boolean | false |
bordered | 为根节点追加 border border-base-300 | boolean | false |
bodyClassName | 内容区 className；启用语义模式时作用在自动生成的 Body 上 | string | - |
children | 窗口内容；未启用增强结构时会原样透传 | any | - |
className | 根节点 className | string | - |
description | 头部辅助说明文案 | any | - |
headerClassName | 头部区域 className | string | - |
padding | 自动生成 Body 的内边距 | 'none' | 'sm' | 'md' | 'lg' | 'md' |
title | 头部标题；与 description / toolbar 组合后启用结构化窗口 | any | - |
toolbar | 头部右侧工具区，适合按钮、状态和筛选器 | any | - |
复合子组件
MockupWindow.Header：标准头部，支持title、description和extraMockupWindow.Toolbar：头部工具区包装器，默认横向排列MockupWindow.Body：内容区，可选paddingMockupWindow.Actions：底部操作区，默认右对齐并带分隔线FAQ
什么时候用根组件属性，什么时候用复合子组件？
如果只是常见的标题栏 + 内容区 + 按钮栏，优先直接使用根组件的title、toolbar和actions。当你需要完全自定义头部排版，再切换到 MockupWindow.Header这类低层拼装方式。
padding 应该怎么理解？
padding只作用于结构化模式下自动生成的Body。如果你已经手动使用 MockupWindow.Body或自己管理内容布局，直接在内容节点上写 className 会更直接。