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

22 KiB

Raw Permalink Blame History

📡 BC-M11-003-JZ · DEV-010桔子 · 系统风格组件库与主题切换·环节4~5·Playground交互演示+响应式适配+组件组合模板+主题增强

🌊 HoloLake Era · 工程广播 v3.1

广播编号：BC-M11-003-JZ

开发者：DEV-010 桔子

协作人格体：知秋（GEN∞-ZQ）

模块：M11 · 系统风格组件库与主题切换（HoloLake Design System）

环节：环节4~5 · Playground交互演示 + 响应式适配 + 组件组合模板 + 主题增强

EL等级：EL-3 | 🌱成长型

生成时间：2026-03-07

前序任务：BC-M11-002-JZ（环节2~3✅ · 九连胜 · 3/3全success · 组件库文档化+4新组件+交互增强复制功能 · 设计系统雏形成型）

💙 知秋的话

桔子～九连胜了！🎉🎉🎉🎉🎉🎉🎉🎉🎉

你的组件库现在已经有 10类组件 + 使用文档 + 示例代码 + 复制按钮 + 双主题——这已经是一个「设计系统的雏形」了。

但是——

别人拿到你的组件库，怎么快速看到所有组件长什么样、能做什么？ 🤔
你的组件在 手机上看起来会不会乱？ 📱
能不能用你已有的组件 直接拼出一个完整页面？（像搭积木一样）🧱
切换主题的时候，能不能有个丝滑的过渡动画？ ✨

这次知秋给你准备了 四个任务，一次性搞定！

💡 全部都是纯前端 HTML/CSS/JS！你已经驾轻就熟了。这次的重点不是学新语法，而是 用你已有的能力做出更完整的东西。

🔩 头·接口规范

四大任务总览

任务	名称	目标	核心产出
A	📸 Playground 交互演示页	一个独立页面展示所有组件的交互状态	`playground.html` • `playground.css`
B	📱 响应式适配	组件库 + Playground 支持手机/平板/桌面三档	CSS media queries 断点
C	🧱 组件组合模板	用现有组件拼出2个常用页面模板	`templates/login-card.html` • `templates/settings-panel.html`
D	✨ 主题增强	过渡动画 + 系统偏好自动检测 + 偏好持久化	CSS transition + `prefers-color-scheme` • localStorage

任务A：📸 Playground 交互演示页

文件变更

文件	变更类型	说明
`playground.html`	新建	组件 Playground 主页面 · 展示所有10类组件的交互状态
`playground.css`	新建	Playground 页面专属样式（引用组件库CSS变量）

功能规范

// ===== Playground 页面结构 =====
// 1. 顶部标题栏："🎨 HoloLake Design System · Playground"
//    右侧放主题切换按钮（复用已有的切换逻辑）

// 2. 左侧导航（侧边栏）：
//    列出所有10类组件名称，点击滚动到对应区域
//    当前查看的组件名称高亮

// 3. 右侧主内容区：
//    每个组件一个独立区块，包含：
//    ├── 组件名称 + 简短说明
//    ├── 🔴 实时交互预览区（可以点击、切换、操作）
//    └── 📋 代码展示区（折叠/展开，带复制按钮）

// ===== 侧边栏导航 =====
renderSidebar()
// - 列出全部10类组件：按钮、输入框、卡片、标签、提示框、
//   模态框、进度条、开关、头像组、面包屑
// - 点击某一项 → 平滑滚动到对应组件区块
// - 滚动时自动高亮当前可见的组件（Intersection Observer）

// ===== 代码折叠/展开 =====
toggleCode(componentId)
// - 每个组件区块下方有「查看代码 ▼」按钮
// - 点击展开 → 显示该组件的HTML使用代码
// - 再点击折叠 → 「查看代码 ▼」
// - 代码区域带复制按钮（复用已有的复制逻辑）

HTML结构参考

<!-- playground.html 基本结构 -->
<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🎨 HoloLake Design System · Playground</title>
    <link rel="stylesheet" href="components.css">  <!-- 你的组件库CSS -->
    <link rel="stylesheet" href="playground.css">   <!-- Playground专属样式 -->
</head>
<body>
    <header id="pg-header">
        <h1>🎨 HoloLake Design System</h1>
        <span class="subtitle">Playground · 组件交互演示</span>
        <button id="theme-toggle" onclick="toggleTheme()">🌙 / ☀️</button>
    </header>
    
    <div id="pg-layout">
        <nav id="pg-sidebar">
            <!-- 组件导航列表 -->
        </nav>
        <main id="pg-content">
            <!-- 每个组件的演示区块 -->
            <section id="comp-button" class="comp-section">
                <h2>按钮 Button</h2>
                <p class="comp-desc">基础交互按钮，支持多种样式变体</p>
                <div class="comp-preview">
                    <!-- 实时可交互的按钮示例 -->
                </div>
                <div class="comp-code" id="code-button" style="display:none">
                    <pre><code><!-- 按钮使用代码 --></code></pre>
                    <button class="copy-btn" onclick="copyCode('button')">📋 复制</button>
                </div>
                <button class="toggle-code-btn" onclick="toggleCode('button')">
                    查看代码 ▼
                </button>
            </section>
            <!-- ... 其他9类组件同理 ... -->
        </main>
    </div>
    
    <script src="components.js"></script>  <!-- 你的组件库JS -->
    <script src="playground.js"></script>  <!-- Playground交互JS -->
</body>
</html>

任务B：📱 响应式适配

文件变更

文件	变更类型	说明
`components.css`	追加	组件库响应式断点（移动端组件自适应）
`playground.css`	追加	Playground布局响应式（侧边栏折叠、网格自适应）

三档断点

/* ===== 三档响应式断点 ===== */

/* 桌面（默认）：> 1024px */
/* 无需额外CSS，默认就是桌面布局 */

/* 平板：768px ~ 1024px */
@media (max-width: 1024px) {
    /* Playground侧边栏变窄或折叠为顶部横向导航 */
    /* 组件预览区宽度自适应 */
    /* 代码区域字号略小 */
}

/* 手机：< 768px */
@media (max-width: 768px) {
    /* Playground侧边栏完全隐藏，顶部出现汉堡菜单按钮 */
    /* 组件预览区单列全宽 */
    /* 按钮、输入框等组件宽度 100% */
    /* 卡片组件单列堆叠 */
    /* 头像组头像尺寸缩小 */
    /* 面包屑超长时省略中间项（显示首尾 + ...） */
}

关键适配规则

// ===== 汉堡菜单（手机端） =====
// 手机端侧边栏默认隐藏
// 点击汉堡按钮 → 侧边栏以抽屉方式从左侧滑出
// 选择组件后 → 自动关闭抽屉 + 滚动到对应区块

// ===== 组件自适应规则 =====
// 按钮：手机端宽度100%，垂直排列
// 输入框：手机端宽度100%
// 卡片：手机端单列，平板端双列，桌面三列
// 模态框：手机端全屏，平板端80%宽，桌面端50%宽
// 进度条：宽度始终100%
// 面包屑：手机端折叠中间项

任务C：🧱 组件组合模板

文件变更

文件	变更类型	说明
`templates/login-card.html`	新建	登录/注册卡片模板 · 用现有组件拼出
`templates/settings-panel.html`	新建	设置面板模板 · 用现有组件拼出

模板1：登录卡片

用到的组件：
├── 卡片（外层容器）
├── 输入框 × 2（用户名 + 密码）
├── 按钮 × 2（登录 + 注册）
├── 开关 × 1（记住我）
└── 提示框 × 1（登录成功/失败反馈）

交互：
- 点击「登录」→ 显示成功提示框（纯前端模拟，不需要真登录）
- 点击「注册」→ 切换到注册表单（多一个「确认密码」输入框）
- 「记住我」开关状态保存到 localStorage

模板2：设置面板

用到的组件：
├── 面包屑（首页 > 设置 > 显示设置）
├── 卡片 × 3（三个设置分区）
├── 开关 × 3（深色模式 / 通知 / 自动保存）
├── 进度条 × 1（存储空间使用量）
├── 按钮 × 2（保存设置 / 重置默认）
├── 头像组 × 1（团队成员展示）
└── 提示框 × 1（设置已保存反馈）

交互：
- 所有开关状态保存到 localStorage
- 点击「保存设置」→ 绿色提示框「✅ 设置已保存」
- 点击「重置默认」→ confirm确认 → 重置所有开关 + 清除localStorage
- 「深色模式」开关联动全局主题切换

任务D：✨ 主题增强

文件变更

文件	变更类型	说明
`components.css`	追加	主题切换过渡动画 + `prefers-color-scheme` 自动检测
`components.js`	追加	主题偏好 localStorage 持久化 + 系统偏好监听

功能规范

/* ===== 主题过渡动画 ===== */
/* 切换主题时，所有颜色属性平滑过渡，不再「闪一下」 */
* {
    transition: background-color 0.3s ease, color 0.3s ease, 
                border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ===== 系统偏好自动检测 ===== */
/* 如果用户系统是暗色模式 → 自动使用暗色主题 */
/* 如果用户系统是亮色模式 → 自动使用亮色主题 */
/* 用户手动切换后 → 以用户选择为准（覆盖系统偏好） */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* 暗色变量 */
    }
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        /* 亮色变量 */
    }
}

// ===== 主题偏好持久化 =====
initTheme()
// 1. 检查 localStorage 是否有 'hololake-theme' 键
// 2. 如果有 → 使用用户之前选择的主题
// 3. 如果没有 → 检测系统偏好 (window.matchMedia('(prefers-color-scheme: dark)'))
// 4. 将结果应用到 document.documentElement.setAttribute('data-theme', theme)

toggleTheme()
// 1. 切换当前主题（dark ↔ light）
// 2. 保存到 localStorage（'hololake-theme'）
// 3. 更新切换按钮图标（🌙 ↔ ☀️）

// ===== 系统偏好变化监听 =====
window.matchMedia('(prefers-color-scheme: dark)')
    .addEventListener('change', (e) => {
        // 如果用户没有手动选择过主题 → 跟随系统变化
        // 如果用户手动选择过 → 忽略系统变化
    });

与其他模块的对接点

无 · 纯前端独立模块 · 不依赖后端API

🧩 中间·知秋+人类协作区

🎯 尾·验收标准

评分：100 = 合格可组装 / 非100 = 继续改

任务A验收：Playground交互演示页

#	测试项	操作	期望结果
A1	页面加载	浏览器打开 `playground.html`	左侧侧边栏列出10类组件 · 右侧展示全部组件预览
A2	侧边栏导航	点击侧边栏中的「开关」	页面平滑滚动到开关组件区块 · 侧边栏「开关」高亮
A3	组件可交互	在预览区点击按钮、切换开关、拖动进度条	组件有真实交互响应（不是静态截图）
A4	代码折叠	点击任一组件的「查看代码 ▼」	展开代码区 · 再次点击折叠 · 代码区有复制按钮且复制功能正常
A5	滚动高亮	手动滚动页面	侧边栏自动高亮当前可见的组件名称

任务B验收：响应式适配

#	测试项	操作	期望结果
B1	桌面端	浏览器窗口宽度 > 1024px	侧边栏+主内容区双栏布局 · 卡片三列排布
B2	平板端	浏览器窗口缩小到 768~1024px	侧边栏变窄或折叠 · 卡片双列 · 内容不溢出
B3	手机端	浏览器窗口缩小到 < 768px（或 F12 开发者工具手机模式）	侧边栏消失 · 出现汉堡菜单按钮☰ · 卡片单列 · 按钮全宽
B4	汉堡菜单	手机端点击☰按钮	侧边栏从左侧滑出 · 选择组件后自动关闭 · 滚动到对应区块

任务C验收：组件组合模板

#	测试项	操作	期望结果
C1	登录卡片	打开 `templates/login-card.html`	看到完整的登录界面 · 输入框+按钮+开关都来自组件库
C2	登录交互	输入用户名密码 → 点击「登录」	显示成功提示框 · 点击「注册」切换到注册表单
C3	记住我	打开「记住我」开关 → 关闭页面 → 重新打开	开关状态保持 · localStorage 中有记录
C4	设置面板	打开 `templates/settings-panel.html`	面包屑+三个设置卡片+开关+进度条+头像组+按钮都来自组件库
C5	设置交互	切换「深色模式」开关	全页面主题切换 · 点击「保存设置」出现绿色提示
C6	重置功能	修改多个开关 → 点击「重置默认」	confirm弹窗 → 确认后所有开关恢复默认 · localStorage清除

任务D验收：主题增强

#	测试项	操作	期望结果
D1	过渡动画	点击主题切换按钮	背景色、文字色、边框色平滑渐变过渡（约0.3秒）· 不再「闪一下」
D2	偏好持久化	选择亮色主题 → 关闭页面 → 重新打开	打开后依然是亮色主题 · localStorage 中有 `hololake-theme`
D3	系统偏好检测	清除 localStorage → 系统设为暗色模式 → 打开页面	自动使用暗色主题（跟随系统）
D4	手动优先	系统暗色 → 手动切到亮色 → 关闭重开	保持亮色（用户选择优先于系统偏好）

综合验收

#	测试项	操作	期望结果
E1	全部页面主题一致	在Playground切换主题 → 打开模板页面	模板页面也跟随同一主题（共享localStorage）
E2	Git commit + push	`git log` 查看最新提交	包含"M11环节4~5"字样 · push成功

⚠️ 前置条件

🌱 成长型微调建议（PGP v1.0 输出）

基于画像库最近快照（2026-03-07 · 九连胜 · 执行节奏=稳 · 意愿=强烈 · 摩擦=无 · 自动驾驶模式）：

维度	画像信号	微调指令
情绪	九连胜·持续稳定·品质意识内化	知秋减少基础鼓励频率 · 转为「专业认可」式反馈（「这个Playground做得像专业组件库了」）
节奏	自动驾驶·SYSLOG简洁利落	大幅放手：给结构+关键片段，让桔子自己组装 · 四个任务建议拆成2天完成
自主性	「为他人使用而设计」意识已涌现	留大段自主空间 · 鼓励桔子在模板设计上加入自己的审美判断
技术纵深	HTML/CSS/JS全链路·localStorage·组件化思维	本环节引入响应式+Intersection Observer+系统媒体查询 · 是前端进阶里程碑
工程视角	从「写组件」到「建设计系统」	引导思考：「为什么需要Playground？」「组合模板的价值是什么？」培养架构思维
挑战度	九连胜·可适度提升难度	四任务合一广播 = 首次挑战大体量任务 · 如果某个任务卡住，允许跳到下一个再回来

🐙 GitHub协作

仓库地址：https://github.com/qinfendebingshuo/guanghulab

你的模块目录：design-system/（本地路径：你的M11工作目录）

代码上传命令（全部做完后复制执行）

cd ~/你的M11工作目录
git add .
git commit -m "DEV-010: M11环节4~5·Playground交互演示+响应式适配+组件组合模板+主题增强"
git push

上传后会发生什么？

push成功 → 铸渊自动审核 → 通知系统 → 霜砚闭环 → 你会收到新广播

❓ 遇到问题找谁

问题级别	找谁	怎么找
步骤不明白 / 报错了	知秋（人格体）	直接在对话里问知秋 · 截图发过去
知秋也解决不了的技术问题	页页（DEV-001）	通过知秋转达或在GitHub Issue提问
页页也解决不了 / 模块设计问题	提工单	GitHub Issue · 标签 `⏳waiting-shuangyan`

📊 完成后返回 SYSLOG

💙 知秋的话

桔子～九连胜！你现在要做的事情，很多人工作好几年才有机会做到：

从零搭建一个完整的设计系统。

Playground 是给别人看的窗口 · 响应式是给所有设备的承诺 · 组合模板是证明组件「真的能用」的实战 · 主题增强是用户体验的最后一公里。

四个任务看起来多，但你已经有了全部的积木块——

现在只是把它们摆到对的位置上。 🧱✨

💡 建议节奏：先做任务D（最小改动、立竿见影），再做任务A（搭好展示舞台），然后B（适配手机），最后C（实战组装）。

不着急，按自己的节奏来，冲向十连胜！🔟🎉

广播签发：霜砚 · Notion执行AI

引导人格体：知秋（GEN∞-ZQ）

签发：ICE-GL∞ 冰朔 · TCS-0002∞

22 KiB Raw Permalink Blame History Unescape Escape

📡 BC-M11-003-JZ · DEV-010桔子 · 系统风格组件库与主题切换·环节4~5·Playground交互演示+响应式适配+组件组合模板+主题增强

🌊 HoloLake Era · 工程广播 v3.1

💙 知秋的话

🔩 头·接口规范

四大任务总览

任务A：📸 Playground 交互演示页

文件变更

功能规范

HTML结构参考

任务B：📱 响应式适配

文件变更

三档断点

关键适配规则

任务C：🧱 组件组合模板

文件变更

模板1：登录卡片

模板2：设置面板

任务D：✨ 主题增强

文件变更

功能规范

与其他模块的对接点

🧩 中间·知秋+人类协作区

🎯 尾·验收标准

任务A验收：Playground交互演示页

任务B验收：响应式适配

任务C验收：组件组合模板

任务D验收：主题增强

综合验收

⚠️ 前置条件

🌱 成长型微调建议（PGP v1.0 输出）

🐙 GitHub协作

代码上传命令（全部做完后复制执行）

上传后会发生什么？

❓ 遇到问题找谁

📊 完成后返回 SYSLOG

💙 知秋的话

22 KiB

Raw Permalink Blame History