浮窗应使用 position: fixed 定位并设 z-index≥1000，推荐锚点为右下角（bottom: 20px; right: 20px）；通过 classList.toggle() 切换 .feedback-modal--open 控制显隐，配合 opacity/visibility 过渡动画；表单提交需 preventDefault、校验字段、禁用按钮、清空表单；键盘操作须支持 Escape 关闭及焦点管理。
浮窗结构用 position: fixed 定位，别用 absolute
固定定位才能让浮窗始终贴在视口角落，滚动页面也不消失。absolute 会随父容器或文档流偏移，一滚动就“失踪”。必须给浮窗加 z-index（建议 ≥ 1000），否则可能被弹层、广告图遮住。常见错误是没设 top 和 right，导致浮窗卡在左上角挡内容；实际推荐锚点：右下角（bottom: 20px; right: 20px;）最不干扰主流程。
点击按钮触发显示/隐藏，用 classList.toggle() 控制类名
不要直接操作 style.display，否则后续 CSS 动画、过渡失效。定义两个类：.feedback-modal（默认 opacity: 0; visibility: hidden;）和 .feedback-modal--open（opacity: 1; visibility: visible; + transition: opacity 0.2s）。JS 里只管切换类名：
document.getElementById('feedback-btn').addEventListener('click', () => {
document.getElementById('feedback-modal').classList.toggle('feedback-modal--open');
});
注意：按钮和浮窗要共用同一份 DOM 结构，别在 JS 里拼 HTML 字符串——维护困难，还容易 XSS（用户输入没转义就插入 innerHTML）。
表单提交用 fetch 发送，禁用默认提交行为
表单默认提交会刷新整个页面，必须 event.preventDefault()。后端接口地址写死在 action 属性里不如写在 JS 中灵活；提交失败时别静默吞掉错误——至少 console.error 打印 response.status 和 response.statusText。常见疏漏：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 没校验必填字段（如
name、message），直接发空数据 - 没禁用提交按钮防止重复点击（加
disabled属性 + 提交后恢复） - 没清空表单字段，用户二次打开还是上次内容
示例关键逻辑：
form.addEventListener('submit', async (e) => {
e.preventDefault();
const btn = form.querySelector('button[type="submit"]');
btn.disabled = true;
const res = await fetch('/api/feedback', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
name: form.name.value.trim(),
message: form.message.value.trim()
})
});
if (res.ok) {
form.reset();
document.getElementById('feedback-modal').classList.remove('feedback-modal--open');
}
btn.disabled = false;
});
键盘操作要支持 Escape 关闭，且焦点管理不能丢
用户按 Esc 应关闭浮窗，这是基础可访问性要求。但更关键的是：浮窗打开时，焦点必须限制在内部（防止 Tab 跳到背景页面去），关闭后焦点要回到触发按钮上。否则屏幕阅读器用户或键盘党会迷失。实现要点：
- 监听
keydown判断e.key === 'Escape' - 浮窗显示时，用
focusableElements = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')获取可聚焦元素 - 拦截
Tab键，循环聚焦范围（第一个 → 最后一个 → 第一个） - 关闭后执行
triggerButton.focus()
这个环节最容易被跳过，但直接影响真实用户的使用流畅度——尤其在移动端 Safari 或 Windows 高对比度模式下，焦点丢失会导致功能“不可达”。
