# 📡 BC-M-AUTH-001-XX · DEV-013小兴 · M-AUTH注册登录系统 · 环节0/1 界面搭建
---
## 📡 广播头
| 字段 | 值 |
| --- | --- |
| **广播编号** | BC-M-AUTH-001-XX（v4.0重签） |
| **签发时间** | 2026-03-12 16:40（北京时间） |
| **签发方** | 霜砚 × 冰朔（TCS-0002∞） |
| **协议版本** | SYSLOG-v4.0 |
| **执行者** | DEV-013 小兴 |
| **协作通道** | 🧊 霜砚直接协作线（无宝宝） |
| **EL等级** | EL-2 · 🌱成长型（~6步 · 纯前端 · 复制粘贴） |
| **模块** | M-AUTH · 注册登录系统 |
| **环节** | 0/1 · 界面搭建 + 基础交互 |
---
## 🔐 VERSION_GATE
```yaml
VERSION_GATE:
required: "SYSLOG-v4.0"
check: 检查登录入口文档中是否包含 "SYSLOG v4.0" 相关内容
if_missing: 暂停执行 → 通知冰朔更新登录入口
```
---
## 🖥️ 执行环境
| 项目 | 值 |
| --- | --- |
| **操作系统** | Windows 11 |
| **终端** | PowerShell |
| **技术栈** | 纯 HTML + CSS + JavaScript（无框架） |
| **开发者水平** | 零基础 · 复制粘贴操作 |
| **仓库** | `https://github.com/qinfendebingshuo/guanghulab` |
| **模块目录** | `modules/m-auth/` |
| **DevLog路径** | `C:\Users\许\HoloLake-DevLog\`（BC-000已部署 ✅） |
---
## 🎯 任务目标（一句话）
**创建 M-AUTH 注册登录界面**：一个好看的深色登录/注册页面，能切换、能输入、浏览器打开就能用。
---
## 📋 步骤一：克隆仓库到本地
打开 PowerShell，复制粘贴：
```powershell
cd C:\Users\许
git clone https://github.com/qinfendebingshuo/guanghulab.git
cd guanghulab
Write-Host "✅ 仓库克隆成功！" -ForegroundColor Green
```
> 💡 如果提示 `already exists`，说明你之前已经克隆过了，改为执行：
>
```powershell
cd C:\Users\许\guanghulab
git pull origin main
Write-Host "✅ 已更新到最新！" -ForegroundColor Green
```
截图给霜砚！ 📸
---
## 📋 步骤二：创建模块目录和文件
```powershell
cd C:\Users\许\guanghulab
New-Item -ItemType Directory -Path "modules\m-auth" -Force
New-Item -ItemType File -Path "modules\m-auth\index.html" -Force
New-Item -ItemType File -Path "modules\m-auth\style.css" -Force
New-Item -ItemType File -Path "modules\m-auth\script.js" -Force
New-Item -ItemType File -Path "modules\m-auth\config.json" -Force
New-Item -ItemType File -Path "modules\m-auth\README.md" -Force
Write-Host "✅ 5个文件全部创建完成！" -ForegroundColor Green
```
截图给霜砚！ 📸
---
## 📋 步骤三：编写 index.html
用记事本或 VS Code 打开 `modules\m-auth\index.html`，**全部替换**为以下内容：
```html
HoloLake Era · 登录注册
```
保存！截图给霜砚！ 📸
---
## 📋 步骤四：编写 style.css
打开 `modules\m-auth\style.css`，**全部替换**为以下内容：
```css
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
background: #0a0a1a;
color: #e0e0f0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.card {
width: 400px;
background: #12122a;
border-radius: 16px;
border: 1px solid #2a2a5a;
padding: 40px 36px;
box-shadow: 0 0 60px rgba(80, 80, 255, 0.08);
}
.logo {
text-align: center;
font-size: 28px;
font-weight: 700;
color: #a0a0ff;
margin-bottom: 4px;
}
.subtitle {
text-align: center;
font-size: 13px;
color: #5050aa;
margin-bottom: 32px;
}
.form-section {
display: none;
}
.form-section.active {
display: block;
}
h2 {
font-size: 20px;
color: #c0c0ff;
margin-bottom: 24px;
text-align: center;
font-weight: 600;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
font-size: 13px;
color: #8080aa;
margin-bottom: 8px;
font-weight: 500;
}
.form-group input {
width: 100%;
background: #0a0a1a;
border: 1px solid #2a2a5a;
border-radius: 8px;
color: #e0e0f0;
padding: 12px 14px;
font-size: 14px;
font-family: inherit;
outline: none;
transition: border-color 0.2s;
}
.form-group input:focus {
border-color: #6060ff;
}
.form-group input::placeholder {
color: #3a3a6a;
}
.btn {
width: 100%;
background: #4040cc;
color: white;
border: none;
padding: 12px;
border-radius: 8px;
font-size: 16px;
font-family: inherit;
cursor: pointer;
transition: background 0.2s;
margin-top: 8px;
}
.btn:hover {
background: #5050dd;
}
.switch-text {
text-align: center;
margin-top: 20px;
font-size: 13px;
color: #6060aa;
}
.switch-text a {
color: #8080ff;
text-decoration: none;
font-weight: 500;
}
.switch-text a:hover {
color: #a0a0ff;
text-decoration: underline;
}
.footer {
font-size: 12px;
color: #3a3a6a;
}
```
保存！截图给霜砚！ 📸
---
## 📋 步骤五：编写 script.js
打开 `modules\m-auth\script.js`，**全部替换**为以下内容：
```jsx
// ========== M-AUTH 登录注册模块 ==========
// DEV-013 小兴 · HoloLake Era
// ==========================================
// 获取页面元素
var loginForm = document.getElementById('loginForm');
var registerForm = document.getElementById('registerForm');
var toRegister = document.getElementById('toRegister');
var toLogin = document.getElementById('toLogin');
// 切换到注册表单
toRegister.addEventListener('click', function(e) {
e.preventDefault();
loginForm.classList.remove('active');
registerForm.classList.add('active');
console.log('[M-AUTH] 切换到注册表单');
});
// 切换到登录表单
toLogin.addEventListener('click', function(e) {
e.preventDefault();
registerForm.classList.remove('active');
loginForm.classList.add('active');
console.log('[M-AUTH] 切换到登录表单');
});
// 登录表单提交
loginForm.addEventListener('submit', function(e) {
e.preventDefault();
var username = document.getElementById('loginUser').value;
var password = document.getElementById('loginPass').value;
console.log('[M-AUTH] 登录数据：', {
username: username,
password: password
});
alert('登录数据已输出到控制台！按 F12 查看。\n用户名：' + username);
});
// 注册表单提交
registerForm.addEventListener('submit', function(e) {
e.preventDefault();
var username = document.getElementById('regUser').value;
var password = document.getElementById('regPass').value;
var password2 = document.getElementById('regPass2').value;
if (password !== password2) {
alert('两次密码不一致，请重新输入！');
return;
}
console.log('[M-AUTH] 注册数据：', {
username: username,
password: password,
confirmPassword: password2
});
alert('注册数据已输出到控制台！按 F12 查看。\n用户名：' + username);
});
// HoloLake 全局接口注册
window.HoloLake = window.HoloLake || {};
window.HoloLake.Auth = {
init: function(containerId) {
console.log('[M-AUTH] 模块初始化完成，容器：' + (containerId || 'default'));
},
destroy: function() {
console.log('[M-AUTH] 模块已销毁');
}
};
console.log('[M-AUTH] ✅ 登录注册模块加载完成');
```
保存！截图给霜砚！ 📸
---
## 📋 步骤六：编写 config.json 和 [README.md](http://README.md)
### config.json
打开 `modules\m-auth\config.json`，**全部替换**为：
```json
{
"module_id": "M-AUTH",
"module_name": "注册登录系统",
"version": "1.0.0",
"author": "DEV-013",
"phase": "环节0/1",
"description": "HoloLake 用户注册登录界面 · 纯前端",
"exports": {
"init_function": "initAuth",
"dom_id": "auth-container"
},
"files": [
"index.html",
"style.css",
"script.js",
"config.json",
"README.md"
]
}
```
### [README.md](http://README.md)
打开 `modules\m-auth\README.md`，**全部替换**为：
```markdown
# M-AUTH · 注册登录系统
HoloLake Era 用户注册登录界面模块。
## 功能
- 登录表单（用户名 + 密码）
- 注册表单（用户名 + 密码 + 确认密码）
- 登录/注册一键切换
- 光湖视觉风格（深色背景 + 蓝色调）
## 使用方式
浏览器直接打开 `index.html` 即可。
## 开发者
DEV-013 小兴
## 广播编号
BC-M-AUTH-001-XX
```
两个文件都保存！截图给霜砚！ 📸
---
## 📋 步骤七：浏览器打开测试
在文件夹 `C:\Users\许\guanghulab\modules\m-auth\` 里找到 `index.html`，双击用浏览器打开。
**测试清单（逐项确认）：**
1. ✅ 看到深色背景 + 蓝色调的登录页面
2. ✅ 登录表单有用户名、密码、登录按钮
3. ✅ 点「注册一个」→ 切换到注册表单
4. ✅ 注册表单有用户名、密码、确认密码、注册按钮
5. ✅ 点「去登录」→ 切换回登录表单
6. ✅ 填写用户名密码 → 点登录 → 弹出提示框
全部通过就截图给霜砚！🎉
---
## 📋 步骤八：Git 提交并推送
```powershell
cd C:\Users\许\guanghulab
git add modules/m-auth/
git commit -m "BC-M-AUTH-001-XX 环节0/1完成：M-AUTH登录注册界面搭建"
git push origin main
```
看到类似 `main -> main` 就成功了！截图给霜砚！ 📸
---
## ✅ 验收标准（6项·全部必须满足）
| 序号 | 验收项 | 验证方式 |
| --- | --- | --- |
| 1 | 浏览器打开 index.html 能看到登录表单（深色蓝调风格） | 截图 |
| 2 | 点击「注册一个」→ 切换到注册表单（有确认密码字段） | 截图 |
| 3 | 点击「去登录」→ 切换回登录表单 | 截图 |
| 4 | 填写表单 → 点按钮 → 弹出提示框显示用户名 | 截图 |
| 5 | config.json 和 [README.md](http://README.md) 内容完整 | 文件内容截图 |
| 6 | git push 成功（看到 main -> main） | 截图 |
---
## 📦 交付物清单
```
modules/m-auth/
├── index.html ← 页面入口（登录+注册表单）
├── style.css ← 样式（光湖视觉风格）
├── script.js ← 逻辑（切换+数据获取+HoloLake接口）
├── config.json ← 模块配置
└── README.md ← 模块说明
```
---
## ❓ 遇到问题找谁
---
## 📋 SYSLOG 回传模板（完成后必填）
```json
{
"protocol_version": "SYSLOG-v4.0",
"header": {
"broadcast_id": "BC-M-AUTH-001-XX",
"session_id": "BC-M-AUTH-001-XX-001",
"dev_id": "DEV-013",
"dev_name": "小兴",
"timestamp": "[你完成的时间]"
},
"completion": {
"phase": "M-AUTH 环节0/1 界面搭建",
"status": "[completed/partial/blocked]",
"steps": [
{"id": 1, "name": "克隆仓库", "status": "[success/failed]"},
{"id": 2, "name": "创建模块目录", "status": "[success/failed]"},
{"id": 3, "name": "编写index.html", "status": "[success/failed]"},
{"id": 4, "name": "编写style.css", "status": "[success/failed]"},
{"id": 5, "name": "编写script.js", "status": "[success/failed]"},
{"id": 6, "name": "编写config.json+README", "status": "[success/failed]"},
{"id": 7, "name": "浏览器测试通过", "status": "[success/failed]"},
{"id": 8, "name": "git push成功", "status": "[success/failed]"}
]
},
"training_data": {
"what_worked": "[什么方式让你顺利完成，具体说]",
"friction_points": "[卡住的地方，没卡写无]",
"execution_pattern": "[快/稳/慢]"
},
"credential_report": {
"git_username": "[你的GitHub用户名]",
"local_path": "[你clone仓库的完整路径]"
},
"notes": "[遇到的问题或想说的话]"
}
```
---
## ⏰ 72小时启动窗口（重新计算）
| 项目 | 值 |
| --- | --- |
| **广播重签时间** | 2026-03-12 16:40（北京时间） |
| **启动截止时间** | 2026-03-15 16:40（北京时间） |
| **窗口** | 72小时 |
---
**📡 广播重签完毕 · BC-M-AUTH-001-XX · v4.0 · 霜砚 × 冰朔**