本页内容

灵动岛设计令牌

经典岛以 WinIsland 的连续圆角和形变为设计参考,自定义组件行以 ClassIsland 为参考。 当前数值与行为以本仓库 shared 常量和渲染实现为准;本页不把上游音乐/歌词/媒体功能列为 ClassHelper 功能。

经典几何与外观

来源 内容
shared/src/constants.ts 的 DEFAULT_ISLAND_APPEARANCE 默认宽 268、高 44、圆角 20、字号 13、边距 8,顶部居中
ISLAND_APPEARANCE_RANGES 滑块与主进程归一化共用的范围
ISLAND_SIZE_DELTA 展开、紧急与叫人相对尺寸
ISLAND_SHADOW_PAD 窗口边界的透明留白
ISLAND_LIST_METRICS / islandListLayout 主进程和渲染层共用列表度量,控制行数与工作区高度
desktop-client/src/island/squircle.ts 超椭圆路径
desktop-client/src/island/classic-island.css 经典底色、文字、图形与状态样式

classic 的 black/glass/tinted 是本地 CSS 外观;glass 使用半透明色,不采样桌面模糊。 不要对透明岛调用 setBackgroundMaterial:系统材质作用于整窗矩形,可能破坏逐像素透明。 投影常驻,只随形态改参数,避免切换 filter 创建合成表面的闪帧。 默认停靠中线不受左右边距影响,只有左/右停靠使用水平边距。

自定义常驻行

CLASSISLAND_ISLAND_METRICS 位于 shared/src/island-layout.ts:

参数 本地值
单行基准高度 / 水平留白 40 / 12 px
次要/正文/强调/大字号 14 / 16 / 18 / 20 px
默认缩放 / 范围 1 / 0.75–2.5
默认圆角 / 最大 8 / 20 px
默认不透明度 / 行距 0.5 / 5 px
鼠标避让淡化比例 0.05

方案有常态 rows 和无通知展开 expandedRows,运行时由 CustomIslandRuntime.vue 测量自然内容, 再按屏幕工作区与方案缩放适配。字体与外观覆盖按组件契约生效,不能拿经典固定宽高解释自定义内容尺寸。

动画与命中

经典与自定义岛的形变都使用 src/island/spring.ts 的 SpringValue;默认 stiffness=0.10、damping=0.68, 换向保留部分动量,按剩余距离限速并钳制过冲。不同用途可能覆盖 snapThreshold 等参数,以调用点为准。 这是独立的帧积分,不等同于主窗口 shared/motion.ts 的 CSS 弹簧。 应用内动画开关、原生窗口可见性与文档可见性控制运行时动画和静止落定。

鼠标模式按光标命中控制穿透;触摸模式处理贴合、输入区域与失焦宽限,自定义常驻模式还维护独立交互入口和窗口形状。 几何改变时同步实际窗口、命中矩形和测量,不在动画中反推自然尺寸。 视觉验收必须显式 --visual;本页数值不代表本次已完成像素验收。

修改入口

外观范围改 shared,经典样式改 classic-island.css,自定义样式改 custom-runtime.css 和 custom-island.css, 原生窗口与命中改 main/island.ts。组件结构/设置改 shared/island-layout.ts 并同步编辑器和运行时。 展示行为见灵动岛,测试见验收与测试。