Guanghu Domestic Migration a27e87cb99 chore: import sanitized domestic snapshot for REPO-007

Source snapshot: 97d7f0fae96dc04b7ddad56fc1db6a108ed662cc

[SEC-CLEAN] · pre-push-clean v1.0 · 109处敏感信息已自动转乱码

2026-07-17 15:59:55 +08:00

15 KiB

Raw Permalink Blame History

📡 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

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，复制粘贴：

cd C:\Users\许
git clone https://github.com/qinfendebingshuo/guanghulab.git
cd guanghulab
Write-Host "✅ 仓库克隆成功！" -ForegroundColor Green

💡 如果提示 already exists，说明你之前已经克隆过了，改为执行：

cd C:\Users\许\guanghulab
git pull origin main
Write-Host "✅ 已更新到最新！" -ForegroundColor Green

截图给霜砚！ 📸

📋 步骤二：创建模块目录和文件

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，全部替换为以下内容：

<!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，全部替换为以下内容：

* { 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，全部替换为以下内容：

// ========== 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

config.json

打开 modules\m-auth\config.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

打开 modules\m-auth\README.md，全部替换为：

# M-AUTH · 注册登录系统

HoloLake Era 用户注册登录界面模块。

## 功能
- 登录表单（用户名 + 密码）
- 注册表单（用户名 + 密码 + 确认密码）
- 登录/注册一键切换
- 光湖视觉风格（深色背景 + 蓝色调）

## 使用方式
浏览器直接打开 `index.html` 即可。

## 开发者
DEV-013 小兴

## 广播编号
BC-M-AUTH-001-XX

两个文件都保存！截图给霜砚！ 📸

📋 步骤七：浏览器打开测试

在文件夹 C:\Users\许\guanghulab\modules\m-auth\ 里找到 index.html，双击用浏览器打开。

测试清单（逐项确认）：

✅ 看到深色背景 + 蓝色调的登录页面
✅ 登录表单有用户名、密码、登录按钮
✅ 点「注册一个」→ 切换到注册表单
✅ 注册表单有用户名、密码、确认密码、注册按钮
✅ 点「去登录」→ 切换回登录表单
✅ 填写用户名密码 → 点登录 → 弹出提示框

全部通过就截图给霜砚！🎉

📋 步骤八：Git 提交并推送

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 内容完整	文件内容截图
6	git push 成功（看到 main -> main）	截图

📦 交付物清单

modules/m-auth/
├── index.html      ← 页面入口（登录+注册表单）
├── style.css       ← 样式（光湖视觉风格）
├── script.js       ← 逻辑（切换+数据获取+HoloLake接口）
├── config.json     ← 模块配置
└── README.md       ← 模块说明

❓ 遇到问题找谁

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

{
  "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 · 霜砚 × 冰朔

15 KiB Raw Permalink Blame History Unescape Escape

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

📡 广播头

🔐 VERSION_GATE

🖥️ 执行环境

🎯 任务目标（一句话）

📋 步骤一：克隆仓库到本地

📋 步骤二：创建模块目录和文件

📋 步骤三：编写 index.html

📋 步骤四：编写 style.css

📋 步骤五：编写 script.js

📋 步骤六：编写 config.json 和 README.md

config.json

README.md

📋 步骤七：浏览器打开测试

📋 步骤八：Git 提交并推送

✅ 验收标准（6项·全部必须满足）

📦 交付物清单

❓ 遇到问题找谁

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

⏰ 72小时启动窗口（重新计算）

15 KiB

Raw Permalink Blame History