FxSettingDrawer 设置抽屉

@fx/layouts 的布局偏好设置抽屉，rtl 方向 / 360px 宽，顶部 5 个 tab 分区 + 重置，直连 useLayoutStore.setting：

Tab	分组	配置项
外观	主题	主题模式卡片（亮色 / 暗色 / 跟随系统，切换带圆形扩散动画）
	内置主题	主色色板（11 内置色 + 自定义取色，每卡带色名标签）
	全局圆角	圆角系数滑块（0 / 0.25 / 0.5 / 0.75 / 1，默认 0.5）
	其他	色弱模式 / 灰色模式
布局	布局模式	7 种布局模式缩略图（vertical / two-column / horizontal / sidebar-nav / mixed-vertical / mixed-two-column / fullscreen）
	顶栏	显示顶栏 / 顶栏滚动隐藏
	标签栏	显示标签页 / 标签风格（卡片 / Chrome / 朴素）
	面包屑	开启导航 /（展开后）仅有一个时隐藏 / 显示图标 / 显示首页按钮 / 风格（常规·背景）
	页脚	显示页脚
	内容区	内容宽度（流式 / 定宽）
	通用	设置按钮位置 / 侧栏可拖拽
水印	水印	开启水印 /（展开后）类型（明·暗）/ 内容 / 字重 / 字体颜色 / 字号 / 透明度 / 旋转角度 / 密度
快捷键	快捷键	启用开关 + 内置快捷键列表（Ctrl+K 菜单搜索 / Ctrl+B 折叠侧栏 / Ctrl+, 打开设置）
动画	页面动画	页面切换动画总开关（关闭时无过渡，风格与速度收起）/（开启后）动画风格（7 种可预览卡片：无 / 渐隐 / 上滑 / 下滑 / 左滑 / 右滑 / 缩放，卡片内色块循环演示实际效果）/ 切换速度（快速 0.15s / 默认 0.25s / 缓慢 0.4s）

主题模式与全局圆角

主题模式：themeMode 取 light / dark / auto；auto 跟随系统 prefers-color-scheme，切换时通过 View Transitions API 做以点击点为圆心的圆形扩散动画（不支持或开启「减少动态效果」时自动降级为无动画直接切换）。
全局圆角：滑块写入 --fx-radius（rem），@fx/styles 的各圆角档位（small/base/md/lg/xl/2xl/3xl）基于它等比派生；默认 0.5 时与原固定档位视觉一致，拖动即可全局缩放。

快捷键与水印

快捷键：enableHotkeys 总开关；Ctrl+K（菜单搜索）由 FxLayoutMenuSearch 内置监听，Ctrl+B（折叠侧栏）/ Ctrl+,（打开设置）由 useHotkeys（BasicLayout 挂载）实现；输入框聚焦时 Ctrl+B / Ctrl+, 不触发，macOS 上 Ctrl 对应 ⌘ Command。
水印：类型 / 内容 / 字重 / 颜色 / 字号 / 透明度 / 旋转角度 / 密度统一收进 setting.watermark 嵌套对象（blind / content / fontWeight / color / fontSize / opacity / rotate / gap），经 BasicLayout 透传 FxWatermark 实时重绘；内容为空时回退应用标题，blind 为暗水印（肉眼几乎不可见，需解码工具还原）。

基础用法

vue

<FxSettingDrawer
  :visible="layout.settingDrawerVisible"
  @update:visible="(v) => (v ? layout.openSettingDrawer() : layout.closeSettingDrawer())"
/>

通常由 FxSettingButton（或 layout.openSettingDrawer()）驱动显隐，BasicLayout 已内置单实例挂载。

Attributes

参数	说明	类型	默认值
visible	抽屉显隐（v-model:visible）	`boolean`	—（必填）

Events

事件名	说明	回调参数
update:visible	显隐变化	`(value: boolean)`

FxSettingDrawer 设置抽屉 ​

基础用法 ​

Attributes ​

Events ​

FxSettingDrawer 设置抽屉

基础用法

Attributes

Events