FloatButton
悬浮固定在视口的可操作按钮，用于承载全局快捷入口（AI 编辑、搜索、帮助等）。严格对齐 Semi：纯 div + onClick（非 button/a），href 靠 JS 跳转（target=_blank 用 window.open，否则 location.href），disabled 时不触发。可选包裹 Badge。形状 round(默认)/square、尺寸 small/default/large、colorful AI 渐变。默认 position:fixed 于右下角（bottom/right 24px），经 style 覆盖定位。FloatButtonGroup 将多项平铺成胶囊工具条，点击委托直接读 e.target.dataset.value 回传 value。
如何引入
import { FloatButton, FloatButtonGroup } from '@chenzy-design/svelte';基础悬浮按钮
单个悬浮按钮（纯 div + onClick，对齐 Semi），经 style 覆盖定位
单个悬浮按钮（纯 div + onClick，经 style 覆盖定位）。
尺寸
small / default / large 三档（24 / 32 / 40px）
尺寸三档：small / default / large（24 / 32 / 40px）。此处用 static 定位以便并排预览。
形状
round=正圆（默认）/ square=方形（8px 圆角）
形状：round=正圆（默认）/ square=方形（8px 圆角）。此处用 static 定位以便并排预览。
href 跳转
有 href 时点击经 JS 跳转；target=_blank 用 window.open（对齐 Semi）
有 href 时点击经 JS 跳转（对齐 Semi）；target="_blank" 用 window.open 新开。
colorful 多彩
AI 风格多彩渐变外观（白字压 AI 渐变）
colorful：AI 风格多彩渐变外观（白字压 AI 渐变，对齐 Semi）。
带徽章
传入 badge 参数时 body 外层包裹 Badge，贴形状切点定位
带徽章：传 badge 参数时 body 外层包裹 Badge，徽章按 Semi 几何公式贴形状切点定位。
3
Group 胶囊工具条
FloatButtonGroup 圆角条内横排多项，点击委托直接读 e.target.dataset.value 回传（对齐 Semi）
FloatButtonGroup 胶囊工具条：一个圆角条内 inline-flex 横排多项，点击委托直接读 e.target.dataset.value 回传（对齐 Semi）。 最近点击：（无）
编辑
搜索
帮助
API 参考
FloatButton
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
icon | 图标内容（Snippet） | Snippet | undefined |
badge | 徽章参数（复用本库 Badge：dot/count/overflowCount/type/theme），有值时外层包裹 Badge | BadgeProps | undefined |
shape | 形状：round=正圆（默认）、square=方形（对齐 Semi） | 'round'|'square' | 'round' |
size | 尺寸三档（24/32/40px） | 'small'|'default'|'large' | 'default' |
colorful | AI 风格多彩渐变外观 | boolean | false |
disabled | 禁用（不触发跳转/onClick） | boolean | false |
href | 有值时点击经 JS 跳转（对齐 Semi：_blank 用 window.open，否则 location.href） | string | undefined |
target | 链接打开目标；'_blank' 时用 window.open 新开 | string | undefined |
onClick | 点击回调；disabled 时不触发 | (e: MouseEvent) => void | undefined |
class | 根节点自定义类名 | string | '' |
style | 定位方式：设 bottom/right 等覆盖默认 fixed 位置 | string | undefined |
Events
| 事件 | 载荷 | 说明 |
|---|---|---|
onClick | MouseEvent | 点击；disabled 时不触发 |
Slots
| 名称 | 说明 |
|---|---|
icon | 图标内容（也可用 icon prop） |
FloatButtonGroup
胶囊工具条（严格对齐 Semi）：一个背景圆角条内 inline-flex 横排多个「图标+文字」项（纯 div），点击委托直接读 e.target.dataset.value 回传 value。
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
items | 子项数组；每项 = FloatButtonProps + { value: string; content?: Snippet|string } | FloatButtonGroupItem[] | [] |
disabled | 组级禁用（不触发点击） | boolean | false |
onClick | 组级点击委托，回传被点项 value（直接读 e.target.dataset.value） | (value: string, e: MouseEvent) => void | undefined |
class | 根节点自定义类名 | string | '' |
style | 定位方式，同 FloatButton | string | undefined |
Accessibility
| ARIA role | none |
- 严格对齐 Semi：FloatButton 与 FloatButtonGroup 均为纯 div + onClick（非 button/a），无内置 ARIA 语义、无键盘可达、无 focus 环。href 经 JS 跳转而非原生链接。如需可访问性由消费方在业务层补充。
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-floatbutton-bg | var(--cd-color-fill-0) | 按钮背景色 - 默认 |
--cd-floatbutton-bg-active | var(--cd-color-fill-2) | 按钮背景色 - 按下 |
--cd-floatbutton-bg-hover | var(--cd-color-fill-1) | 按钮背景色 - 悬浮 |
--cd-floatbutton-color | var(--cd-color-primary) | 按钮内图标 / 文字颜色（Semi=primary） |
--cd-floatbutton-colorful-bg | var(--cd-color-ai-general) | colorful 外观 AI 渐变背景 - 默认 |
--cd-floatbutton-colorful-bg-active | var(--cd-color-ai-general-active) | colorful 外观 AI 渐变背景 - 按下 |
--cd-floatbutton-colorful-bg-hover | var(--cd-color-ai-general-hover) | colorful 外观 AI 渐变背景 - 悬浮 |
--cd-floatbutton-colorful-text | var(--cd-color-white) | colorful 外观图标 / 文字颜色（白） |
--cd-floatbutton-disabled-bg | var(--cd-color-disabled-bg) | 禁用态背景色 |
--cd-floatbutton-disabled-text | var(--cd-color-disabled-text) | 禁用态图标 / 文字颜色 |