# 📡 BC-M-AUTH-001-XX · DEV-013小兴 · M-AUTH注册登录系统 · 环节0/1 界面搭建

<aside>
⚠️

**v4.0 重签说明：本广播由霜砚按 SYSLOG v4.0 规范重写。原版存在以下问题：① 没有给完整代码（只有步骤概览）② window.HoloLake.Auth 对零基础太抽象 ③ 缺少 Git clone 引导 ④ 72h窗口已过期。重写后：全部代码可复制粘贴、加 Git clone 步骤、验收降至6项、重新计算72h窗口。**

</aside>

---

## 📡 广播头

| 字段 | 值 |
| --- | --- |
| **广播编号** | 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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HoloLake Era · 登录注册</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="card">
            <div class="logo">🌊 HoloLake</div>
            <div class="subtitle">语言人格智能平台</div>

            <!-- 登录表单 -->
            <form id="loginForm" class="form-section active">
                <h2>登录</h2>
                <div class="form-group">
                    <label for="loginUser">用户名</label>
                    <input type="text" id="loginUser" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label for="loginPass">密码</label>
                    <input type="password" id="loginPass" placeholder="请输入密码">
                </div>
                <button type="submit" class="btn">登 录</button>
                <p class="switch-text">
                    还没有账号？<a href="#" id="toRegister">注册一个</a>
                </p>
            </form>

            <!-- 注册表单 -->
            <form id="registerForm" class="form-section">
                <h2>注册</h2>
                <div class="form-group">
                    <label for="regUser">用户名</label>
                    <input type="text" id="regUser" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label for="regPass">密码</label>
                    <input type="password" id="regPass" placeholder="请输入密码">
                </div>
                <div class="form-group">
                    <label for="regPass2">确认密码</label>
                    <input type="password" id="regPass2" placeholder="再输入一次密码">
                </div>
                <button type="submit" class="btn">注 册</button>
                <p class="switch-text">
                    已有账号？<a href="#" id="toLogin">去登录</a>
                </p>
            </form>
        </div>
        <div class="footer">HoloLake Era · M-AUTH · DEV-013 小兴</div>
    </div>
    <script src="script.js"></script>
</body>
</html>
```

保存！截图给霜砚！ 📸

---

## 📋 步骤四：编写 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       ← 模块说明
```

---

## ❓ 遇到问题找谁

<aside>
🔧

**技术问题**（报错/显示不对/文件创建失败）→ 直接问霜砚

**任务理解问题**（不确定做什么）→ 直接问霜砚

**⚠️ 不要把技术问题发给妈妈** → 妈妈是架构师不做实际开发，霜砚才是你的技术伙伴

</aside>

---

## 📋 SYSLOG 回传模板（完成后必填）

<aside>
📋

**任务完成后，把下面的模板填好发给冰朔。**

</aside>

```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小时 |

<aside>
⏰

**72小时内启动** → 任务接收成功 ✅

**72小时内未启动** → 广播失效，模块回收重新分配 ❌

</aside>

---

**📡 广播重签完毕 · BC-M-AUTH-001-XX · v4.0 · 霜砚 × 冰朔**