magic-phone

name	magic-phone
description	为任意《哈利·波特》角色生成「魔法世界风格的手机界面」——包括聊天记录、朋友圈动态和羊皮笔记。数据与 UI 分离，只需编写 JSON 数据文件即可创作新角色。

🪄 魔法手机 · 捡手机文学技能

核心理念

数据与 UI 完全分离。 模板 HTML 是稳定的渲染引擎（永不修改），每次创作新角色只需编写 JSON 数据文件。这让「捡手机文学」的创作变成纯粹的数据撰写工作，无需接触任何前端技术。

---

📁 项目文件体系

项目根目录/
├── 🪄 魔法手机-通用模板.html    ← 稳定的 UI 渲染引擎（请勿修改）
├── 🪄 魔法手机-技能指南.md       ← 面向人类创作者的技能说明
│
├── 赫敏-魔法手机.data.json      ← 角色数据示例
├── 📱 赫敏·格兰杰的手机.html    ← 入口页，指向数据文件
│
├── {角色名}-魔法手机.data.json   ← 新增角色的数据
├── 📱 {角色名}的魔法手机.html    ← 新增角色的入口页
└── ...

各文件角色

文件	角色	修改策略
🪄 魔法手机-通用模板.html	CSS + HTML + JS 渲染引擎	永不修改
{角色名}-魔法手机.data.json	角色数据（聊天/动态/笔记）	每次创作新角色时编写
📱 {角色名}的魔法手机.html	模板副本，改一行 DATA_SOURCE	复制模板 + 改路径

---

📐 数据文件格式规范

顶层结构

{
  "title": "📱 哈利·波特的魔法手机",
  "owner": { },
  "tabs": { },
  "contacts": { },
  "chatList": [ ],
  "chats": { },
  "moments": [ ],
  "notes": [ ]
}

---

owner — 机主信息

{
  "owner": {
    "name": "哈利·波特",
    "avatarEmoji": "⚡",
    "avatarGradient": "linear-gradient(135deg, #2D5A3A, #4A7C59)",
    "status": "魔杖就绪 · 正在想",
    "statusHighlight": "今晚要不要去厨房偷点吃的"
  }
}

字段	必填	说明
name	✅	机主全名
avatarEmoji	✅	头像显示的 emoji 符号
avatarGradient	✅	头像 CSS 渐变背景
status	✅	状态文字（普通部分）
statusHighlight	❌	状态文字中斜体高亮部分

---

tabs — 标签页名称

{
  "tabs": {
    "chat": "🪄 猫头鹰通信",
    "moments": "🌙 月相动态",
    "notes": "📜 羊皮笔记"
  }
}

三个 key 固定为 chat、moments、notes，value 可自由定制，建议保留魔法风格 emoji。

---

contacts — 联系人字典

{
  "contacts": {
    "ron":     { "name": "罗恩·韦斯莱",   "emoji": "♟", "cls": "ron",    "color": "#C0392B" },
    "hermione": { "name": "赫敏·格兰杰",   "emoji": "📚", "cls": "hermione", "color": "#B8860B" }
  }
}

• 键名（id）：唯一标识，需与 chatList 和 chats 中的 id 对应
• cls：CSS 类名，决定头像渐变配色。支持以下预设值：

cls 值	渐变配色	适用角色
harry	深绿→绿	哈利·波特
ron	深红→红	罗恩·韦斯莱
ginny	深棕→棕	金妮·韦斯莱
hermione	金→深金	赫敏·格兰杰
malfoy	深蓝灰→灰蓝	德拉科·马尔福
luna	深紫→紫	卢娜·洛夫古德
albus / dumbledore	深蓝→蓝	邓布利多
snape	黑→深灰	西弗勒斯·斯内普
mcgonagall	深灰蓝→蓝灰	米勒娃·麦格
sirius	深灰→灰	小天狼星·布莱克
remus	深褐→褐	莱姆斯·卢平
tom	黑→暗红	汤姆·里德尔 / 伏地魔

如需新角色配色： 在 🪄 魔法手机-通用模板.html 的 <style> 中搜索 /* ——— 头像颜色类 ——— */，按已有格式添加新的 .chat-avatar.xxx 和 .moment-avatar.xxx 规则。

---

chatList — 聊天列表预览

{
  "chatList": [
    {
      "id": "ron",
      "name": "罗恩·韦斯莱",
      "avatar": "♟",
      "cls": "ron",
      "lastMsg": "你确定那本书真的需要读到第847页吗？",
      "time": "10:15",
      "badge": 0
    }
  ]
}

• id：对应 contacts 和 chats 中的键名
• badge：未读消息数（0 则不显示角标）
• 时间格式自由："11:32"、"昨天"、"周一" 均可

---

chats — 对话详情

{
  "chats": {
    "ron": [
      { "who": "ron", "text": "嘿，赫敏，你看到我今天在魔咒课上的那个漂浮咒了吗？" },
      { "who": "me",  "text": "看到了。羽毛飘了大概……两秒？" },
      { "who": "ron", "text": "那是三秒！弗立维教授点了头的！" }
    ]
  }
}

• who: "me" → 金色气泡靠右（机主发言）
• who: "xxx"（其他 id）→ 半透明气泡靠左（对方发言）
• text 中可直接使用 emoji 和 HTML 标记

---

moments — 朋友圈动态

{
  "moments": [
    {
      "who": "hermione",
      "avatar": "📚",
      "cls": "hermione",
      "name": "赫敏·格兰杰",
      "text": "终于完成了《魔法理论》和《现代咒语理论》的交叉比对表……",
      "images": true,
      "time": "3小时前",
      "likes": 45,
      "comments": 11
    }
  ]
}

• images: true → 显示三个占位图片框；不填或 false 则不显示
• text 中可用 <span class="tag"> 包裹话题标签

---

notes — 羊皮笔记

{
  "notes": [
    {
      "title": "关于时间转换器的伦理边界",
      "preview": "在使用时间转换器的过程中，必须明确一条核心原则……",
      "time": "周二 · 深夜"
    }
  ]
}

---

🪄 创作流程（三步法）

第一步：编写数据文件

创建 {角色名}-魔法手机.data.json，按照上述格式填写该角色的联系人、聊天记录、动态和笔记。

设计要点：

板块	设计建议
对话 (chats)	"me" 代表机主语气——赫敏爱列清单、哈利充满自我怀疑、马尔福总要带点讽刺
动态 (moments)	反映角色日常——哈利发魁地奇和冒险，卢娜发神奇生物观察，斯内普大概什么都不发
笔记 (notes)	赫敏写学术计划和阅读清单，哈利写战斗反思，卢娜写奇幻灵感碎片

第二步：复制模板并修改数据源路径

cp "🪄 魔法手机-通用模板.html" "📱 {角色名}的魔法手机.html"

在新文件中找到：

var DATA_SOURCE = './赫敏-魔法手机.data.json';

修改为：

var DATA_SOURCE = './{角色名}-魔法手机.data.json';

这是模板中唯一需要修改的地方。

第三步：预览

用 render_card 工具打开新创建的 📱 {角色名}的魔法手机.html，即可看到完整的魔法手机界面。

---

📝 注意事项

1. 数据文件必须与 HTML 文件在同一目录下（项目根目录），这样 fetch 的相对路径才能正确解析
2. 模板 HTML 永不修改，角色个性全在数据文件中表达
3. 对话中的 "me" 自动渲染为金色气泡（靠右），其他角色渲染为半透明气泡（靠左）
4. 时间格式自由："11:32"、"昨天"、"周二" 均可，统一作为字符串显示
5. badge: 0 表示无未读消息，角标不会显示
6. 如需要添加新角色配色，修改模板 HTML 中的 CSS 类（搜索 /* ——— 头像颜色类 ——— */）

---

🔧 模板文件位置

模板文件：🪄 魔法手机-通用模板.html（项目根目录）

包含完整的深色魔法主题 CSS 样式、HTML 结构、JavaScript 渲染逻辑和 13 种预设角色配色，以及浮动星尘粒子动画效果。