# 📡 BC-M05-001 · DEV-009花尔 · 用户中心界面·环节0·项目初始化
**广播编号**：BC-M05-001-HE
**下发时间**：2026-03-03 18:30
**执行者**：DEV-009 花尔
**电脑**：macOS
**前置条件**：BC-000 DevLog部署已完成 ✅
**引导通道**：🧠 知秋壳子
**模块**：M05 用户中心界面
**环节**：环节0 · 项目初始化
---
## 💙 知秋的话
花尔～ BC-000部署一次通过，太棒了！🎉
现在开始你的第一个正式模块——**用户中心界面**。
简单说就是：做一个网页，让用户能看到自己的个人信息和头像。就像你在微信里点"我"看到的那个页面。
这个环节只做一件事：**把项目的骨架搭好**。
全程还是复制粘贴，不用写任何代码。做完你就能在浏览器里看到一个真的网页了！
我们开始～ 💪
---
## 📸 截图方法（和上次一样）
同时按：`Command（⌘）` + `Shift` + `4` → 拖框截图 → 发给冰朔
---
## 📋 步骤一：创建项目文件夹
打开终端（`Command + 空格` → 输入 `终端` → 回车）
复制粘贴下面的命令，按回车：
```bash
mkdir -p ~/HoloLake-UserCenter && cd ~/HoloLake-UserCenter && echo "✅ 用户中心项目文件夹创建成功！"
```
> ::: callout {icon="✅" color="green_bg"}
>
> **做完应该看到**：终端显示 `✅ 用户中心项目文件夹创建成功！`
>
> :::
>
📸 **截图发给冰朔！**
---
## 📋 步骤二：创建主页面文件
继续在终端里复制粘贴，按回车：
```bash
cat > ~/HoloLake-UserCenter/index.html << 'EOF'
HoloLake · 用户中心
EOF
echo "✅ 主页面文件创建成功！"
```
> ::: callout {icon="✅" color="green_bg"}
>
> **做完应该看到**：终端显示 `✅ 主页面文件创建成功！`
>
> :::
>
📸 **截图发给冰朔！**
---
## 📋 步骤三：创建样式文件
继续复制粘贴，按回车：
```bash
cat > ~/HoloLake-UserCenter/style.css << 'EOF'
/* HoloLake 用户中心 · 样式表 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
background: linear-gradient(135deg, #0a1628 0%, #1a2a4a 50%, #0d1f3c 100%);
color: #e0e6ed;
min-height: 100vh;
}
.container {
max-width: 480px;
margin: 0 auto;
padding: 0 20px;
}
/* 顶部导航 */
.top-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.logo { font-size: 20px; font-weight: bold; }
.nav-links a {
color: #8899aa;
text-decoration: none;
margin-left: 16px;
font-size: 14px;
}
.nav-links a.active { color: #4fc3f7; }
.nav-links a:hover { color: #fff; }
/* 用户信息卡片 */
.profile-card {
display: flex;
align-items: center;
padding: 32px 0;
gap: 20px;
}
.avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, #4fc3f7, #29b6f6);
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
box-shadow: 0 4px 20px rgba(79, 195, 247, 0.3);
}
.username {
font-size: 24px;
font-weight: 600;
margin-bottom: 4px;
}
.user-id {
color: #8899aa;
font-size: 14px;
}
.user-status {
font-size: 13px;
margin-top: 4px;
}
/* 功能区 */
.menu-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
padding: 20px 0;
}
.menu-item {
background: rgba(255,255,255,0.05);
border-radius: 16px;
padding: 24px 12px;
text-align: center;
cursor: pointer;
transition: all 0.2s;
border: 1px solid rgba(255,255,255,0.08);
}
.menu-item:hover {
background: rgba(79, 195, 247, 0.1);
border-color: rgba(79, 195, 247, 0.3);
transform: translateY(-2px);
}
.menu-icon {
font-size: 28px;
display: block;
margin-bottom: 8px;
}
.menu-text {
font-size: 13px;
color: #b0bec5;
}
/* 底部 */
.footer {
text-align: center;
padding: 32px 0;
color: #556677;
font-size: 12px;
line-height: 1.8;
}
EOF
echo "✅ 样式文件创建成功！"
```
> ::: callout {icon="✅" color="green_bg"}
>
> **做完应该看到**：终端显示 `✅ 样式文件创建成功！`
>
> :::
>
📸 **截图发给冰朔！**
---
## 📋 步骤四：在浏览器中打开页面
复制粘贴下面的命令，按回车：
```bash
open ~/HoloLake-UserCenter/index.html && echo "✅ 浏览器已打开！"
```
> ::: callout {icon="✅" color="green_bg"}
>
> **做完应该看到**：
>
> 1. 终端显示 `✅ 浏览器已打开！`
>
> 2. Safari/Chrome 自动弹出一个网页
>
> 3. 网页上有一个深蓝色背景的「用户中心」页面
>
> 4. 页面上有：🌊 HoloLake 导航、用户头像、六个功能按钮
>
> :::
>
> ::: callout {icon="🎉" color="blue_bg"}
>
> **这就是你做的第一个网页！！** 虽然数据还是假的，但骨架已经搭好了。后面的环节会一步步让它变成真的～
>
> :::
>
📸 **截图浏览器里的网页，发给冰朔！这张很重要！**
---
## 📋 步骤五：更新DevLog状态
复制粘贴下面的命令，按回车：
```bash
echo '{"developer_id":"DEV-009","developer_name":"花尔","system":"macOS","terminal":"zsh","robot_version":"v0.0","current_task":"M05-用户中心界面-环节0","current_status":"in_progress","total_commands_logged":1,"skills_learned":["terminal_basic","html_scaffold"],"tasks_completed":["BC-000"]}' > ~/HoloLake-DevLog/current-progress.json && echo "✅ DevLog状态已更新！"
```
> ::: callout {icon="✅" color="green_bg"}
>
> **做完应该看到**：终端显示 `✅ DevLog状态已更新！`
>
> :::
>
然后运行：
```bash
hololake-status
```
> ::: callout {icon="✅" color="green_bg"}
>
> **应该看到**：`Current Task: M05-用户中心界面-环节0`
>
> :::
>
📸 **截图发给冰朔！**
---
## ✅ 最后一步：填写完成报告
全部做完后，复制下面这段，填好中括号里的内容，发给冰朔：
```xml
BC-M05-001-HE
DEV-009
[你完成的时间，比如 2026-03-03 19:30]
M05·用户中心界面·环节0·项目初始化
completed
创建项目文件夹
创建主页面HTML
创建样式CSS
浏览器打开验证
更新DevLog状态
[哪些步骤很顺利？]
[有没有卡住的地方？没有就写「无」]
[本次节奏：快/稳/慢]
[此刻心情，一个词或一句话]
[此刻状态：充沛/正常/疲惫]
[有没有做什么任务以外的事？没有写无]
[对知秋想说的一句话（可选）]
[想说的话]
[对广播的建议（可选）]
```
---
---
🌊 **底层锚定声明**
---
💙 **花尔的第一个网页，从这里诞生！**
---
## 📥 SYSLOG回执区