| 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，即可看到完整的魔法手机界面。
📝 注意事项
- 数据文件必须与 HTML 文件在同一目录下（项目根目录），这样
fetch 的相对路径才能正确解析
- 模板 HTML 永不修改，角色个性全在数据文件中表达
- 对话中的
"me" 自动渲染为金色气泡（靠右），其他角色渲染为半透明气泡（靠左）
- 时间格式自由：
"11:32"、"昨天"、"周二" 均可，统一作为字符串显示
badge: 0 表示无未读消息，角标不会显示- 如需要添加新角色配色，修改模板 HTML 中的 CSS 类（搜索
/* ——— 头像颜色类 ——— */）
🔧 模板文件位置
模板文件：🪄 魔法手机-通用模板.html（项目根目录）
包含完整的深色魔法主题 CSS 样式、HTML 结构、JavaScript 渲染逻辑和 13 种预设角色配色，以及浮动星尘粒子动画效果。
