界面组件

后台常用组件的交互原理：按钮、卡片、弹层、轮播、分页等，画布复现几何与状态，悬停读数 + 中文讲解。

技术栈: Canvas 2D, 组件状态机, Pointer Events

• 按钮 — 按钮变体、尺寸与禁用态。
• 卡片与弹窗 — 卡片布局与模态框。
• 输入控件 — 文本框聚焦时边框变主色并出现光晕；校验失败显示红框与提示。
• 导航样式 — 当前项用滑动指示器（下划线或胶囊）标出，指示器在项间平滑移动。
• 手风琴组件 — 手风琴：点击标题展开这一块内容，高度平滑过渡，其他块自动收起。
• 对话框 — 弹窗：在页面上盖一层半透明遮罩，中间弹出对话框，关闭后回到原页面。
• 走马灯组件 — 轮播：一排卡片横向排列，按位置平滑滑动切换，圆点显示当前第几张。
• 轻提示 Toast — 新消息从角落滑入，旧消息依次下移并淡出，几秒后自动消失。
• 下拉菜单 — Dropdown/Select。
• 悬浮提示 — Tooltip/Popover。
• 加载占位 — 骨架屏：内容加载前先显示灰色块勾勒布局，上面扫过一道亮光表示“正在加载”。
• 按钮动效 — 按钮微交互：按下时轻微缩小、松开回弹，让人感觉按钮“被按到了”。
• 开关弹簧 — 弹簧开关：滑块像挂在弹簧上，切换时先冲过头再回到位置。
• 底栏/浮层 — 底部抽屉：面板从屏幕底部滑出，可以拖动把手调整高度或拉下关闭。
• 标签页动效 — 指示条滑动 Tabs。
• 时间线 — 时间线：事件按时间顺序竖向排列，圆点和连线标出先后关系。
• 树形列表 — 树形目录：文件夹可以展开、收起，子项按层级缩进显示。
• 悬浮按钮 FAB — 主按钮旋转成 ×，子按钮依次弹出（竖排或扇形），带交错延迟。
• 芯片/标签 — 标签：小圆角块表示分类或筛选条件，点击可以选中或删除。
• 表格交互 — 表格交互：点表头排序、悬停高亮整行，长表格表头固定不动。
• 头像组 — 头像堆叠：多个圆形头像部分重叠排成一排，超出数量显示 “+N”。
• 步骤条动效 — 当前步骤之前打勾，连接线随进度填充主色，当前节点外圈脉冲。
• 看板 — Kanban 列布局。
• 取色器 — 色相环 + 预设色板。
• 通知中心 — 铃铛显示未读数并轻摇，面板列出通知，新通知从顶部插入，其余下移。
• 命令面板 — 输入关键字逐字出现，结果列表实时过滤，高亮项上下移动，回车执行。
• 分页器 — 当前页高亮块滑动到目标页；页数多时中间折叠成 …，始终显示首尾页。
• 面包屑 — 显示当前页面在站点中的层级路径，末级为当前页；新层级从右侧滑入，悬停项加下划线。
• 评分星 — 悬停预览分数（星星依次点亮放大），离开后回到当前分；支持半星。
• 空状态 — 列表没有数据时，用一幅轻微浮动的插画 + 说明文字 + 引导按钮，告诉用户下一步做什么。
• 顶栏横幅 — 页面顶部的提示条，从上方滑下；长文字可横向滚动，右侧有关闭按钮。