113 lines
3.5 KiB
Markdown
113 lines
3.5 KiB
Markdown
|
# 📡 铸渊指令｜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
|