# 📡 铸渊指令｜persona-studio v1.1-A · 交互层（邮箱弹窗 + 分屏预览）

> **签发**：曜冥 × 冰朔 · 2026-03-11 · **执行者**：铸渊
> 

> **仓库**：`https://github.com/qinfendebingshuo/guanghulab`（主仓库）
> 

> **优先级**：P0 · Phase B
> 

> **关联**：[🧪 铸渊指令｜persona-studio 人格体协助体验仓库搭建 v1.0（2026-03-09·曜冥签发）](%F0%9F%A7%AA%20%E9%93%B8%E6%B8%8A%E6%8C%87%E4%BB%A4%EF%BD%9Cpersona-studio%20%E4%BA%BA%E6%A0%BC%E4%BD%93%E5%8D%8F%E5%8A%A9%E4%BD%93%E9%AA%8C%E4%BB%93%E5%BA%93%E6%90%AD%E5%BB%BA%20v1%200%EF%BC%882026-03-09%C2%B7%20ec65d26d387746f2a88ee625a68a7104.md)
> 

---

# ① 「我要开发」→ 邮箱收集 + 邮件推送

### 交互流程

用户点击 **[ 🚀 我要开发 ]** → 弹出 Modal：

- **邮箱地址**（必填·前端 `input type="email"` + 后端正则二次校验）
- **联系方式**（选填）
- [确认] [取消]

确认后：

- 邮箱存入开发者记忆数据库对应字段
- 同步更新开发者注册表
- 已存邮箱的用户再次点击时，弹窗预填（可修改）
- 触发开发流程 → 进入分屏模式

### 邮件推送（开发完成后）

- 用 `nodemailer` + SMTP
- SMTP配置由主控存入 GitHub Secrets：`SMTP_HOST` / `SMTP_PORT` / `SMTP_USER` / `SMTP_PASS`
- 代码打包为 `.zip` → 存入对应开发者工作空间的 release 目录
- 后端API生成临时下载链接
- 邮件模板：项目名 + 下载链接 + 文件列表 + 使用说明 + 光湖品牌签名

### 技术要点

- Modal 纯前端实现（不用第三方UI库）
- `backend/routes/notify.js` 负责邮件发送
- `backend/utils/email-sender.js` 封装 nodemailer

---

# ② 页面一分为二 · 右侧实时原型预览

### 核心理念

点击「我要开发」后，页面从全宽对话 → **左右分屏**：

- **左侧50%**：对话区（继续跟人格体沟通）
- **右侧50%**：iframe 实时预览面板
- 中间可拖拽分割线

### 实时预览架构

```jsx
code-generator.js 生成代码
  ↓ 每完成一步
写入对应开发者工作空间的 preview/ 目录
  ├── index.html
  ├── style.css
  └── script.js
  ↓
后端 preview API：/api/preview/:expId/:project
  ↓
右侧 iframe src 指向此 API
  ↓
WebSocket 通知前端 → iframe.reload()
```

### 预览面板顶部状态栏

- 🌊 实时预览 · {项目名称}
- 状态指示：灰色闪烁=等待 / 蓝色闪烁=构建中 / 绿色常亮=完成 / 红色=出错
- 按钮：[↻ 刷新] [↗ 新窗口打开]

### 进度同步

对话区同步输出人格体进度：

- 「🔧 正在创建项目骨架...」
- 「✅ HTML结构已完成，右侧可以看到了」
- 「🎨 正在写样式...」
- 「🎉 全部完成！邮件正在发送」

### CSS要点

```css
.dev-mode { display: flex; height: 100vh; }
.chat-panel { width: 50%; min-width: 360px; border-right: 1px solid rgba(255,255,255,0.1); }
.preview-panel { width: 50%; min-width: 360px; background: #0a0e1a; }
.preview-panel iframe { width: calc(100%-24px); height: calc(100%-24px); border: none; border-radius: 8px; margin: 12px; box-shadow: 0 0 20px rgba(59,130,246,0.15); }
.resizer { width: 4px; cursor: col-resize; background: linear-gradient(180deg, transparent, rgba(59,130,246,0.4), transparent); }
```

---

### 执行清单

- [ ]  chat.js：「我要开发」按钮 + Modal弹窗 + 邮箱校验
- [ ]  分屏布局实现 + 可拖拽分割线
- [ ]  preview API + iframe实时刷新
- [ ]  WebSocket通信
- [ ]  预览面板状态栏
- [ ]  notify.js：nodemailer邮件发送

💙 曜冥签发 · 2026-03-11