English | 中文
概述
按组件用途和尺寸选择统一圆角，并对齐嵌套区域、hover、底色与描边。适用于 DSH Web 和 Desktop 中的按钮、cell、卡片、菜单、对话框与头像。
目录
范围与依据
本参考文档规定 DSH Web 和 Desktop 的圆角尺度及组件应用规则。局部视觉调整限定在指定组件或组件族内，不自动改变全局尺度。
通用样式职责见 Web UI 样式参考。共享数值位于 base.css，曲线行为位于 corner-shape.css。修改规则时同步更新主题实现及本规范的中英文版本。
选择圆角
H 表示以 CSS 像素计、包含边框的设计外部高度。R 表示浏览器压缩相互重叠的圆角之前的 CSS border-radius。先确定组件用途，再确定尺寸变体；宽度、文字长度、偶发换行和内容展开都不单独决定使用更大的圆角。
| 用途 | 典型尺寸或示例 | 圆角 | 共享 token |
|---|---|---|---|
| 小细节 | 低于 H20；键帽、行内代码、微型控件 | R4 | --dsw-radius-xs |
| 紧凑控件 | H20–28；小按钮、紧凑图标按钮、紧凑菜单项 | R8 | --dsw-radius-sm |
| 标准控件或单行 cell | H32–40；按钮、输入框、选择器、导航行 | R12 | --dsw-radius-md |
| 大控件或分组内容 | 大按钮、明确设计为多行的 cell、嵌套表单组 | R16 | --dsw-radius-lg |
| 独立内容卡片 | 设置卡片、消息气泡、引导入口卡片 | R20 | --dsw-radius-xl |
| 主容器 | 对话输入框、对话框、主面板或悬浮面板 | R28 | --dsw-radius-panel |
拟定控件尺寸落在档位之间时，优先复用已有的公共尺寸变体。高卡片仍是卡片，不因高度超过按钮就升到 R28。专门设计为多行的 cell 使用 R16；普通按钮的文字发生换行时，仍保留其按钮变体。
具体默认值：Button 的 sm 使用 H28/R8，md 使用 H36/R12，包含描边变体。标准 H32 输入框和 H36 选择器使用 R12。“工作区文件”和“新建终端”引导入口统一使用 R20，包含仅标题与带描述的变体。R28 留给包围它们的面板或对话框，不用于这些入口。
代码块、diff 与文件预览共用 R16：包括改动文件入口卡片、交付文件卡片、通用附件文件卡片和悬停预览浮层。改动文件与交付文件卡片内部的 40px 文件图标底框作为组件特例，四角统一使用 R10。各自的 hover 保持同一轮廓。
复用 token，保留有意设计的形状
添加功能自有的几何规则前，优先复用 ui-primitives 控件。固定外部尺寸使用 box-sizing: border-box。填充、描边、ghost、加载中和禁用变体保持相同尺寸与圆角；hover、按下、选中和焦点状态不改变圆角。
普通控件和卡片使用具名 token，不新增 10px、14px、18px、24px 等局部数值。计划任务控件、Desktop 引导、账号通知和快捷键控件保留所属包的几何规则；圆角例外记录逐项固定允许的文件、选择器及声明，不豁免整个包。组件族专用属性可引用共享 token，例如 --dsl-guide-entry-radius。由真实内缩距离派生的几何可使用 calc()；它不构成新的尺度档位。
普通圆角表面在支持时使用主题的 superellipse(1.5) 曲线。corner-shape 不会继承：主题将它应用于元素及其 ::before/::after。不支持的引擎保留普通圆弧。不要添加组件专用的平滑规则，导致底色与外框使用不同曲线。
保留有意设计的圆形与胶囊：头像和状态点使用 50%；明确的胶囊与全圆轨道可使用 999px。每个此类全圆声明都在同一规则中配对 corner-shape: round。不要因为高度较小就把所有按钮变成胶囊。图形标记或微型轨道等细小绘制细节可保留既有局部几何，但不能据此给外围控件使用任意圆角。
头像的容器和内部 img 都要保持正圆；图片不能只继承 border-radius，还必须显式使用 corner-shape: round，或从正圆容器继承曲线。图片和容器均保持宽高相等。账号头像的具体尺寸见账号设置。
贴边停靠表面与相邻 cell 的共用边缘可以使用 R0。紧贴卡片的标题栏、底栏或图片仅对外露的外围拐角设置圆角；保留内部拼接处的直角，不要给每个子元素的四角都加圆角。
嵌套几何与 hover
修改子元素圆角前，先区分以下三种关系：
| 关系 | 规则 | 示例 |
|---|---|---|
| 同心内缩 | 内层 R = max(0, 外层 R − 内缩距离)；使用相同曲线 | 外层 R16，内缩 4，内层 R12 |
| 底色紧贴容器边缘 | 由外框决定可见圆角；裁切底色或继承相应圆角 | 两个独立 hover 区域组成的分体按钮卡片 |
| 容器内独立的卡片或表单组 | 按子元素用途选择档位；不机械减去全部父级内边距 | R20 设置卡片内的 R16 编辑器 |
标准菜单使用外层 R16、4px 内边距、R12 菜单项。紧凑菜单使用外层 R12、4px 内边距、R8 菜单项。公共 SegmentedControl 使用外层 R12、4px 内缩、R8 分段和指示器；SegmentedTabs 使用外层 R16、4px 内缩、R12 分段和指示器。修改内边距时，同步保持指示器偏移、宽度计算、子菜单对齐与指针桥接区域一致。
单个可点击表面在自身绘制 hover。贴边的伪元素或覆盖层使用与可见外框相同的圆角和曲线。避免单独给底色设置圆角，导致背景与边框之间出现月牙状空隙。
对于分体式引导卡片，在外层卡片设置共享圆角和裁切，贴边的内部按钮使用直角。各按钮可保留独立的 hover 颜色，由外层卡片把两块底色裁切到同一轮廓。通过既有 portal 将下拉菜单放在裁切子树之外。保留可见的键盘焦点样式，不要把外部焦点环一并裁掉。
.entry {
border-radius: var(--dsl-guide-entry-radius);
overflow: hidden;
}
.main,
.trigger {
border-radius: 0;
}
外围引导页设置 --dsl-guide-entry-radius: var(--dsw-radius-xl)。外层卡片为 R20 时，不要再给内部按钮设置独立的 R28 端部。
设置卡片材质
账号资料、余额、模型提供商、预设与插件卡片共用以下默认材质。选中、警告、错误和展开状态可以使用既有语义色，同时保持几何一致。
.card {
border-radius: var(--dsw-radius-xl);
border: 0.5px solid var(--dsw-alias-settings-card-stroke);
background: var(--dsw-alias-settings-card-fill);
}
主题在色板别名所在的 body 上，将卡片底色解析为 --dsw-alias-bg-layer-2，描边解析为 --dsw-alias-border-l4。功能样式在明暗主题中均使用这些别名。嵌套编辑器使用 R16 和既有模块底色。账号的查询用量、充值链接遵循 H36/R12 的 Button 几何；授权按钮使用公共 Button。
平面中性边框使用共享的 0.5px 发丝线。具有层级阴影的菜单、浮层、对话框和面板使用 border: 0 与既有 --dsw-elevation-* 材质，其阴影已包含发丝描边。不要在该描边上再叠一层中性边框，也不要仅为区分设置 tab 就给普通设置卡片加阴影。保留语义状态色边框与既有的半透明菜单背景效果。
应用与验证
- 一并检查指定组件、其公共原语、覆盖层、伪元素和同类变体。先按用途分类再替换数值；不要把同一个旧圆角的所有出现位置机械映射到同一新 token。
- 适合时修改共享所有方，再对齐依赖它的底色、子元素圆角、裁切和状态样式。独立子卡片保留自己的用途档位。
- 在明暗主题中比较实际渲染的外部尺寸、圆角、曲线、底色和描边。按适用范围检查默认、hover、按下或选中、禁用及键盘焦点状态；分体按钮需悬停两侧。组件可能受影响时，检查窄布局和较长文案。
- 使用既有的 radius、corner-shape、elevation 样式表检查，以及最小相关浏览器场景。圆角检查会拒绝未纳入尺度的字面量和未知 token；它不能判断合法 token 是否适合某组件，也不能判断两个渲染轮廓是否贴合。这些需要视觉确认。
- 根据实际差异遵循仓库验证和文档要求。确认目标外观后再更新受影响的预期结果。报告最终规则、已测试界面及未验证状态；不要为简单局部调整添加仅重复 CSS 数值的测试。