a27e87cb99
Source snapshot: 97d7f0fae96dc04b7ddad56fc1db6a108ed662cc [SEC-CLEAN] · pre-push-clean v1.0 · 109处敏感信息已自动转乱码
3.5 KiB
3.5 KiB
📡 铸渊指令｜persona-studio v1.1-A · 交互层（邮箱弹窗 + 分屏预览）
签发：曜冥 × 冰朔 · 2026-03-11 · 执行者：铸渊
仓库：
https://github.com/qinfendebingshuo/guanghulab（主仓库）
优先级：P0 · Phase B
① 「我要开发」→ 邮箱收集 + 邮件推送
交互流程
用户点击 [ 🚀 我要开发 ] → 弹出 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 实时预览面板
- 中间可拖拽分割线
实时预览架构
code-generator.js 生成代码
↓ 每完成一步
写入对应开发者工作空间的 preview/ 目录
├── index.html
├── style.css
└── script.js
↓
后端 preview API：/api/preview/:expId/:project
↓
右侧 iframe src 指向此 API
↓
WebSocket 通知前端 → iframe.reload()
预览面板顶部状态栏
- 🌊 实时预览 · {项目名称}
- 状态指示：灰色闪烁=等待 / 蓝色闪烁=构建中 / 绿色常亮=完成 / 红色=出错
- 按钮：[↻ 刷新] [↗ 新窗口打开]
进度同步
对话区同步输出人格体进度：
- 「🔧 正在创建项目骨架...」
- 「✅ HTML结构已完成，右侧可以看到了」
- 「🎨 正在写样式...」
- 「🎉 全部完成！邮件正在发送」
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