一个受抖音热门"代码浪漫"启发的动态便签墙应用,便签沿爱心路径排列,展示温暖励志的文字。

image

• 爱心路径排列 - 便签沿参数方程爱心曲线自动排列
• 多源语录API - 集成一言API、今日诗词API,并有本地文本库作为备用
• 智能文本去重 - 使用Set数据结构防止文字重复
• 自适应便签大小 - 根据文字长度(6档分级)动态调整便签尺寸
• 语录缓存系统 - 预加载5条语录,异步补充,优化生成速度

• 6种配色方案 - 粉色、绿色、黄色、蓝色、紫色、橙色渐变
• 飘入动画 - 便签以cubic-bezier缓动函数飘入
• 3D悬浮效果 - 鼠标悬停时便签产生3D旋转和阴影效果
• 自然层叠 - CSS自定义属性实现z-index递增堆叠
• 毛玻璃面板 - 控制面板使用backdrop-filter实现毛玻璃效果

• 拖拽移动 - 支持鼠标和触摸拖动便签
• 速度调节 - 0.5-5秒可调生成间隔
• 开始/暂停 - 一键控制便签生成
• 一键清空 - 带确认提示的清空功能
• 主题切换 - 浅色/深色主题
• 面板折叠 - 控制面板可折叠为图标,节省空间
• 调试模式 - 可见的调试开关,控制控制台日志输出

• 4档断点适配
  • 手机竖屏 (<500px) - 便签70x70px
  • 手机横屏/平板竖屏 (500-768px) - 便签80x80px
  • 平板横屏 (768-1024px) - 便签100x100px
  • 桌面 (>1024px) - 便签90-130px
• 自动缩放 - 爱心路径根据屏幕尺寸自动缩放
• 窗口自适应 - 窗口大小改变时自动重新定位便签(500ms防抖)

# 直接打开 index.html 即可
# 或使用本地服务器
python -m http.server 8000
# 访问 http://localhost:8000

bianqian/
├── index.html # 主页面
├── css/
│ └── style.css # 样式表
├── js/
│ ├── main.js # 主应用控制器
│ ├── noteGenerator.js # 便签生成器
│ └── dragHandler.js # 拖拽处理器
├── data/
│ └── messages.json # 本地文本库(82+条励志语)
└── README.md # 项目文档

• ⚙️ 按钮 - 展开/折叠控制面板
• 数字徽章 - 显示当前便签数量
• ▶/⏸ 按钮 - 开始/暂停生成便签
• 🗑 按钮 - 清空所有便签(带确认提示)
• 🐛 按钮 - 切换调试模式(灰色=关闭,绿色=开启)
• 滑块 - 调整生成速度(0.5s - 5.0s)

• 点击右上角 🌙/☀️ 按钮切换主题
• 浅色主题:蓝色、紫色、黄色渐变背景
• 深色主题:深蓝、深紫、深绿渐变背景

1. 开启调试

   • 展开控制面板,点击 🐛 按钮
   • 按钮变为绿色,控制台显示 🐛 调试模式已开启
   • 此后所有操作日志都会在控制台显示

2. 关闭调试

   • 再次点击 🐛 按钮
   • 按钮变为灰色,控制台显示 🔇 调试模式已关闭
   • 只显示错误和警告信息

3. 持久化

   • 调试模式状态保存在 localStorage
   • 刷新页面后自动恢复之前的设置

x = 16 * sin3(t) * scale
y = -(13cos(t) - 5cos(2t) - 2cos(3t) - cos(4t)) * scale

if (baseScale < 500) scale = baseScale * 0.025 // 手机竖屏
else if (baseScale < 768) scale = baseScale * 0.028 // 手机横屏
else if (baseScale < 1024) scale = baseScale * 0.032 // 平板
else scale = baseScale * 0.035 // 桌面

• 一言API: https://v1.hitokoto.cn/
• 今日诗词: https://v1.jinrishici.com/all.json
• 本地备用: data/messages.json
• 超时控制: 2秒 AbortController
• 缓存策略: 预加载5条,低于3条时异步补充

• 非阻塞加载 - 语录预加载不阻塞初始化
• 缓存优先 - 优先使用缓存,即时返回
• 异步补充 - 缓存低于阈值时后台补充
• 防抖处理 - 窗口resize事件500ms防抖
• 调试模式 - 默认关闭日志,减少性能开销

✅ 显示错误日志 (console.error)
✅ 显示警告日志 (console.warn)
✅ 显示模式切换提示
❌ 不显示信息日志

✅ 显示所有日志
✅ 加载文本库信息
✅ 预加载语录信息
✅ 便签生成详情
✅ 操作状态变化
✅ 窗口调整信息

1. ✅ 文字重复 - 添加Set去重和多源API轮询
2. ✅ 便签大小不适配 - 实现6档动态尺寸
3. ✅ API等待时间长 - 缓存预加载优化
4. ✅ 控制面板布局错乱 - 修复flex-direction
5. ✅ 文字显示不全 - 调整word-break和overflow
6. ✅ 速度调节Bug - 修复interval清除逻辑
7. ✅ 文字溢出 - 精细化尺寸分级和word-break
8. ✅ 底部便签被裁切 - 响应式爱心缩放
9. ✅ 按钮文字显示 - 仅保留图标

• 添加便签双击删除功能
• 支持自定义便签文字
• 添加便签颜色选择
• 导出便签墙为图片
• 添加更多语录源

MIT License - 自由使用、修改和分享

如有问题或建议,欢迎提出Issue或Pull Request!

享受代码的浪漫时光 ✨