Panel 面板

区域分区容器。默认使用玻璃配方，是整个组件库视觉基调的载体。

基础用法

面板标题

面板内容。默认就是玻璃观感——半透明底色加背景模糊。

<SrPanel title="面板标题">
  面板内容。
</SrPanel>

为什么默认是玻璃

Panel 的定位是页面区块，而页面上同时存在多个区块时， 如果每个都是实底，视觉上会叠成一摞互不相关的盒子。

玻璃配方让背景的渐变透出来一点，区块之间因此有了统一的「底」， 层次也更清楚——这是整个库的视觉基调，所以设成默认而非可选。

需要实底时用 variant="surface"。

实底变体

不透明，适合内容需要高对比度的场合。

玻璃变体（默认）

半透明加模糊。

<SrPanel variant="surface" title="实底变体">…</SrPanel>
<SrPanel variant="glass" title="玻璃变体">…</SrPanel>

头部操作区

筛选条件

面板主体

<SrPanel title="筛选条件">
  <template #extra>
    <SrSegmented v-model="filter" :options="options" size="sm" />
  </template>
  面板主体
</SrPanel>

圆角

只有两档：md（常规）与 lg（大区块）。

radius=md

常规圆角

radius=lg

大圆角

<SrPanel radius="md">…</SrPanel>
<SrPanel radius="lg">…</SrPanel>

无内边距

需要自己控制内边距（比如放一张贴边的图或表格）时用 padding="none"。

贴边内容

内边距由内部自己控制

<SrPanel padding="none" title="贴边内容">
  <div style="padding: 16px">…</div>
</SrPanel>

玻璃配方的组合规则

本库的容器配方（.sr-glass() / .sr-card() / .sr-popover() / .sr-modal-panel()）已封装好 backdrop-filter 与 box-shadow 的组合， 不要自行拼写——两者需要配套调整（模糊半径越大，阴影要越柔）， 拆开写很容易出现「模糊很重但阴影很硬」的割裂感。

Props

名称	类型	默认值	说明
title	string	—	标题，也可用 header 插槽自定义
variant	'glass' | 'surface'	'glass'	视觉变体
padding	'none' | 'sm' | 'md' | 'lg'	'md'	内边距
radius	'md' | 'lg'	'lg'	圆角档位

插槽

名称	说明
default	面板内容
header	自定义头部，覆盖 title
extra	头部右侧操作区

无障碍

• 有 title 时头部渲染为 <h3>，便于读屏软件按标题层级跳转
• 只作视觉分区、语义上并非独立区块时，加 role="presentation" 可避免 在无障碍树里多出一层无意义的容器