几何白 · 电子名片

一张极简几何风格的电子名片。访客看到的永远是简洁的公开视图；主人点 footer「编辑」即可在统一弹窗中修改所有内容。

简化版：移除了 Supabase 认证 / 云端同步 / 复杂的"编辑模式"。
数据全部存于浏览器 localStorage，配合 JSON 备份可在多设备迁移。

✨ 功能

• 📇 个人简介：姓名 / 头衔 / 简介 / 自定义头像
• 🏷️ 正在做：动态标签，支持上下排序
• 📔 每日感悟：每条独立设置心情（5 种低饱和色）+ 公开/私密
• 🌀 环形螺旋时间轴：Canvas 绘制阿基米德螺旋，心情色数据点，滚轮缩放、拖拽平移、悬停 tooltip
• 📬 联系方式：8 种图标自动识别，单条可见性切换
• 💾 JSON 备份 / 还原
• 📱 响应式：< 480px 自适应
• 🛡️ HTML 转义，防 XSS
• 🍞 极简 Toast

🚀 快速开始

直接双击 index.html 在浏览器中打开。
或者本地起一个服务器（推荐，避免部分浏览器对 file:// 的限制）：

cd /Users/pinkocean/Desktop/开发/mingpian
python3 -m http.server 8765
# 访问 http://127.0.0.1:8765/

🎮 使用指南

访客视图

• 浏览所有公开信息（姓名 / 简介 / 正在做 / 最新公开感悟 / 联系方式）
• 点击「每日感悟」下方的虚线螺旋图标 → 全屏螺旋时间轴
• 时间轴中：滚轮缩放、拖拽平移、点击圆点查看日期/心情/内容

主人编辑

进入编辑有 3 种方式：

1. footer 小字「编辑」链接（最显眼的入口）
2. 底部细线连点 3 次
3. 长按头像 2 秒

打开编辑弹窗后有 5 个 Tab，所有改动自动保存：

Tab	内容
基础	头像上传（自动压缩 200px）、姓名、头衔、简介
正在做	列表展示 + 上下移动 + 删除；下方输入框添加
感悟	一键写下今天；每条独立编辑日期/心情/内容/公开
联系方式	列表展示；点击 ◉ 切换可见性；下方输入框添加
数据	导出 JSON 备份 / 从 JSON 导入 / 清空所有数据

📁 文件结构

mingpian/
├─ index.html      # 结构
├─ style.css       # 样式
├─ app.js          # 逻辑（localStorage 持久化 / Canvas 螺旋 / 事件）
└─ README.md

🗃️ 数据结构

存在 localStorage 的 geometric-white-data-v2 key 下：

{
  "profile": { "name": "...", "tagline": "...", "bio": "...", "avatar": "data:image/..." },
  "doings":   [{ "id": "d1", "content": "...", "sort_order": 0, "visible": true }],
  "journals": [{ "id": "j1", "date": "2026-06-12", "mood": "平静", "content": "...", "is_public": true }],
  "contacts": [{ "id": "c1", "label": "邮箱", "value": "hi@x.com", "icon": "mail", "visible": true }]
}

v1 数据（旧版含 Supabase 字段）会自动迁移到 v2。

🎨 视觉规范

用途	颜色
底色	#F9F6F0 米白
主文字	#3E3A35 暖灰
次要文字	#5F5A53
主点缀	#C5B5A0 驼色
浅点缀	#D6CDBE
深点缀	#A5967C
分割线	rgba(180, 170, 150, 0.3)

心情色：开心 #D4C4A8 · 平静 #B5C0C8 · 思考 #B8C5B2 · 低落 #C4BCC8 · 能量 #D9C2A6

🌀 螺旋时间轴

• 阿基米德螺旋 r = 8 + 1.8·θ，角度步长 0.45 rad
• 中心 = 今天（带光晕），外圈 = 越早
• < 3 条感悟时，螺旋线分两段：已写部分（正常虚线）+ 生长提示（更淡更疏）
• 触屏：单指拖拽 · 双指缩放
• 滚轮缩放以鼠标为锚点

🔒 安全

• 所有用户输入（姓名/简介/标签/感悟/联系方式）均经过 escapeHTML 转义后插入 DOM
• 无外部网络请求（除非用户上传头像到 <img> 标签）
• 头像上传自动压缩到 200×200，限制 5MB

🐛 常见问题

Q: 怎么在多设备同步？
A: 在设备 A 编辑 → 打开编辑弹窗 → 数据 Tab → 导出 JSON → 复制到设备 B → 设备 B 打开编辑弹窗 → 数据 Tab → 导入。

Q: 清空浏览器缓存后数据丢失？
A: 是的。重要数据请定期 JSON 备份。

Q: 想换主题色？
A: 修改 style.css 顶部 :root 中的 CSS 变量即可。

Q: 想加自定义头像，但不想每次打开编辑器？
A: 可以直接把头像图片放到与 index.html 同级目录，命名为 avatar.jpg，然后在 JS 中加一行 state.data.profile.avatar = './avatar.jpg' 即可。

📝 许可

本项目为个人作品，自由使用、修改、分发。