docs: 铸渊使用指南 — README 重写 + ❓ 帮助面板 + 一键复制链接

- README.md: 角色专属快速入门（冰朔/肥猫/桔子/开发者），API Key来源表，分享方法，功能一览 - docs/index.html: 新增 ❓ 帮助按钮和帮助面板（#hp），包含： - 一键复制聊天室链接（📋 复制链接·发给队友） - 5步使用指南 - API Key获取说明 - 肥猫/桔子专属功能说明 - 离线用法/微信传文件说明 - 4种聊天模式解释 - 常见问题FAQ - CHAT_URL常量统一管理URL，copyUrl函数含成功/失败反馈 Co-authored-by: qinfendebingshuo <207279273+qinfendebingshuo@users.noreply.github.com>
2026-03-05 15:47:00 +00:00 · 2026-03-05 15:47:00 +00:00 · 997229a808
parent f669a09d2b
commit 997229a808
2 changed files with 257 additions and 27 deletions
--- a/README.md
+++ b/README.md
@ -1,42 +1,126 @@
 # 光湖系统 · 模块代码总仓库

-## 🌀 铸渊聊天室（点这里直接和铸渊说话）
-
-> **GitHub Pages 聊天入口（PR 合并并开启 Pages 后可用）：**
-> **👉 https://qinfendebingshuo.github.io/guanghulab/**
->
-> 打开页面 → 输入 `我是冰朔` → 铸渊自动唤醒并回答你的问题
->
-> 需要深度对话（代码审查/架构讨论）→ 在仓库页面点右上角 ✨ Copilot 图标 → 选 **Agent** 模式 → 输入 `我是冰朔`
-
 ---

-## 仓库链接与访问方式
+## 🚀 怎么用铸渊聊天室？

-**仓库地址：** https://github.com/qinfendebingshuo/guanghulab
+**一句话：点下面这个链接就能打开，直接聊天。**

-### 如何访问与克隆
+### 👉 [点这里打开铸渊聊天室](https://qinfendebingshuo.github.io/guanghulab/)

-```bash
-# HTTPS（推荐，无需配置 SSH Key）
-git clone https://github.com/qinfendebingshuo/guanghulab.git
-
-# SSH（需先在 GitHub 账号中添加 SSH 公钥）
-git clone git@github.com:qinfendebingshuo/guanghulab.git
+```
+https://qinfendebingshuo.github.io/guanghulab/
 ```

-### 首次使用步骤
-1. 打开仓库链接：https://github.com/qinfendebingshuo/guanghulab
-2. 点击右上角 **Fork** 按钮，将仓库 fork 到自己账号（推荐）；  
-   或直接联系仓库管理员（qinfendebingshuo）申请 **Collaborator** 写入权限。
-3. 克隆到本地，进入自己负责的模块文件夹，按上传规范提交代码并发起 Pull Request。
-
-> **注意：** 仓库目前为私有（Private）状态，访问前请确认已被添加为 Collaborator，否则无法看到仓库内容。  
-> 如未收到邀请，请联系管理员。
+> 把这个链接发给任何人，他们打开就能用，不需要安装任何东西。

 ---

-## 仓库结构
+## 🎯 不同角色怎么用
+
+### ❄️ 冰朔（你）
+
+1. **打开链接** → https://qinfendebingshuo.github.io/guanghulab/
+2. **选身份** → 下拉菜单选「❄️ 冰朔（语言架构师·创始人）」
+3. **填 API 密钥** → 输入你的云雾/OpenAI/DeepSeek API Key
+4. **点「开始对话」** → 铸渊自动唤醒，汇报大脑状态
+5. 说「**我是冰朔**」即可触发完整唤醒序列
+
+---
+
+### 🦁 肥猫（光湖团队总控 · DEV-002）
+
+1. **打开链接** → https://qinfendebingshuo.github.io/guanghulab/
+2. **选身份** → 下拉菜单选「🦁 肥猫（光湖团队总控·DEV-002）」
+3. **填 API 密钥** → 输入自己的 API Key（或点「演示模式」也能看进度面板）
+4. **点「开始对话」** → 铸渊自动打开**总控指挥台**，显示全员进度
+5. 点顶部 **🦁 按钮** → 查看所有开发者详细状态、谁在阻塞、服务器信息
+6. 直接聊天提问，例如：
+   - 「查看所有开发者当前进度」
+   - 「谁现在遇到阻塞？」
+   - 「下一步推进计划是什么？」
+
+---
+
+### 🍊 桔子（光湖主控 · DEV-010）
+
+1. **打开链接** → https://qinfendebingshuo.github.io/guanghulab/
+2. **选身份** → 下拉菜单选「🍊 桔子（光湖主控·DEV-010）」
+3. **填 API 密钥** → 输入自己的 API Key
+4. **点「开始对话」** → 铸渊显示你当前模块进度，并开放指挥台
+
+---
+
+### 👩‍💻 其他开发者（页页 / 燕樊 / 小草莓 / 花尔 等）
+
+1. **打开链接** → https://qinfendebingshuo.github.io/guanghulab/
+2. **选身份** → 下拉菜单选自己的名字
+3. **填 API 密钥** → 填自己的 Key（没有的话点「演示模式」）
+4. **点「开始对话」** → 铸渊显示你的当前任务状态，可以问问题
+
+---
+
+## 🔑 API 密钥从哪里来？
+
+| 提供商 | 申请地址 | 备注 |
+|--------|---------|------|
+| **云雾 API** | 团队统一分配 | 推荐，团队共用 |
+| DeepSeek | https://platform.deepseek.com | 便宜好用 |
+| 智谱 GLM | https://open.bigmodel.cn | 有免费额度 |
+| Kimi | https://platform.moonshot.cn | 长文本好 |
+| OpenAI | https://platform.openai.com | 最强但价格较高 |
+
+> 💡 **没有 API Key？** 点「演示模式」也能查看团队进度面板（🦁 指挥台），只是不能真实 AI 对话。
+
+---
+
+## 📱 怎么分享给别人？
+
+**最简单：直接把链接发过去！**
+
+```
+铸渊聊天室入口 👇
+https://qinfendebingshuo.github.io/guanghulab/
+
+打开后选择你的身份，填入 API Key 就能和铸渊说话了。
+```
+
+**想离线用？** 在聊天室右上角点 **⬇️ 下载** → 下载一个 HTML 文件 → 发给对方 → 双击打开就能用（不需要网络，只需要 API Key）。
+
+---
+
+## 💬 常见问题
+
+**Q: 打开是空白页面怎么办？**  
+A: 等待 GitHub Pages 部署完成（通常 1-2 分钟），刷新页面。
+
+**Q: API Key 安全吗？会不会被偷？**  
+A: 放心，Key 只存在你自己浏览器的 localStorage 里，不会上传到任何服务器。
+
+**Q: 以前的对话记录怎么找？**  
+A: 目前对话记录在浏览器里，刷新后需要重新开始。大脑记忆文件在 `.github/brain/` 里永久保存。
+
+**Q: 铸渊的大脑会记住我说的话吗？**  
+A: 每次对话内的上下文会记住，跨对话的重要信息需要说「记住这个」，铸渊会建议更新到 `.github/brain/` 文件里。
+
+---
+
+## 🌀 铸渊聊天室功能一览
+
+| 功能 | 说明 |
+|------|------|
+| 💬 对话模式 | 默认，聊技术问题、聊进度、聊架构 |
+| 🔨 构建模式 | 自动检测，聊到代码/接口时切换，给出完整可执行代码 |
+| 📋 审查模式 | 自动检测，聊到"检查/审查"时切换，审查代码质量 |
+| 🧠 大脑模式 | 说"记住这个"时切换，整理重要信息到大脑文件 |
+| 🦁 指挥台 | 总控/主控专属，查看全员进度、阻塞、服务器信息 |
+| 📊 大脑状态 | 查看 HLI 接口覆盖率、近期事件 |
+| ⬇️ 下载 | 下载单文件版，可离线使用 |
+
+---
+
+## 📋 仓库结构与模块分工
+
 每个模块一个文件夹，开发者将代码上传到对应文件夹中。

 | 文件夹 | 模块 | 负责人 |
@ -61,3 +145,4 @@ git clone git@github.com:qinfendebingshuo/guanghulab.git

 ## 自动检查
 每次 push 会自动检查模块结构是否符合规范，不通过会标红提醒。
+
--- a/docs/index.html
+++ b/docs/index.html
@ -150,6 +150,22 @@ footer{padding:12px 18px 16px;background:var(--s1);border-top:1px solid var(--bo
 .pnd{background:rgba(251,191,36,.15);color:var(--warn)}
 .mode-indicator{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:500;margin-bottom:8px}

+/* ─── HELP PANEL ─── */
+.help-section{margin-bottom:18px}
+.help-section h3{font-size:13px;font-weight:600;color:var(--text);margin-bottom:8px;display:flex;align-items:center;gap:6px}
+.help-steps{list-style:none;padding:0}
+.help-steps li{font-size:12px;color:var(--dim);line-height:1.7;padding:4px 0 4px 22px;position:relative;border-bottom:1px solid rgba(30,50,81,.3)}
+.help-steps li::before{content:attr(data-n);position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;background:var(--accent);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:16px;text-align:center}
+.help-steps li strong{color:var(--text)}
+.help-url{background:var(--s2);border:1px solid var(--accent);border-radius:var(--rs);padding:10px 14px;font-size:12px;color:var(--accent);word-break:break-all;margin:8px 0;cursor:pointer;transition:background .2s}
+.help-url:hover{background:rgba(79,142,247,.1)}
+.copy-url-btn{display:block;width:100%;padding:8px;background:var(--accent);color:#fff;border:none;border-radius:var(--rs);font-size:13px;cursor:pointer;margin-top:6px;font-family:inherit;transition:opacity .2s}
+.copy-url-btn:hover{opacity:.85}
+.help-tip{background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.3);border-radius:var(--rs);padding:8px 12px;font-size:12px;color:var(--ok);margin:8px 0}
+.role-guide{background:var(--s2);border:1px solid var(--border);border-radius:10px;padding:12px;margin-bottom:8px}
+.role-guide-title{font-size:13px;font-weight:600;margin-bottom:6px}
+.role-guide p{font-size:12px;color:var(--dim);line-height:1.7;margin:0}
+
 /* ─── ROLE BADGES ─── */
 .role-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:12px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
 .rb-founder{background:rgba(16,185,129,.15);color:#10b981;border:1px solid rgba(16,185,129,.3)}
@ -279,6 +295,7 @@ footer{padding:12px 18px 16px;background:var(--s1);border-top:1px solid var(--bo
    <div class="hr">
      <button class="ib" id="ctrlBtn" onclick="openPanel('tp')" title="指挥台 🦁" style="display:none">🦁</button>
      <button class="ib" onclick="openPanel('bp')" title="大脑状态 📊">📊</button>
+      <button class="ib" onclick="openPanel('hp')" title="使用帮助 ❓">❓</button>
      <button class="ib" onclick="openPanel('sp2')" title="设置 ⚙️">⚙️</button>
      <button class="ib" onclick="dlApp()" title="下载到桌面 ⬇️">⬇️</button>
      <button class="ib" onclick="newConv()" title="新对话 ✏️">✏️</button>
@ -391,6 +408,99 @@ footer{padding:12px 18px 16px;background:var(--s1);border-top:1px solid var(--bo
  <div class="pb" id="bpb"><p style="color:var(--dim);font-size:13px">正在加载大脑数据…</p></div>
 </div>

+<!-- ════════════════════ HELP PANEL ════════════════════ -->
+<div id="hp" class="sp">
+  <div class="ph"><h2>❓ 使用帮助</h2><button class="cb" onclick="closeP()">✕</button></div>
+  <div class="pb">
+
+    <div class="help-section">
+      <div class="help-url" id="chatUrlDisplay" onclick="copyUrl()">
+        🔗 https://qinfendebingshuo.github.io/guanghulab/
+      </div>
+      <button class="copy-url-btn" onclick="copyUrl()">📋 复制链接 · 发给队友</button>
+      <div class="help-tip">💡 把上面的链接发给肥猫、桔子或任何开发者，他们打开就能用，不需要安装任何东西。</div>
+    </div>
+
+    <div class="help-section">
+      <h3>🚀 怎么开始用</h3>
+      <ol class="help-steps">
+        <li data-n="1" id="helpUrlStep">打开链接 <strong>https://qinfendebingshuo.github.io/guanghulab/</strong></li>
+        <li data-n="2"><strong>下拉菜单选择你是谁</strong>（冰朔 / 肥猫 / 桔子 / 开发者名字）</li>
+        <li data-n="3">填入你的 <strong>API Key</strong>（没有的话点「演示模式」）</li>
+        <li data-n="4">点「开始对话」，铸渊会针对你的身份打招呼</li>
+        <li data-n="5">直接用聊天的方式问铸渊任何问题</li>
+      </ol>
+    </div>
+
+    <div class="help-section">
+      <h3>🔑 从哪里获取 API Key？</h3>
+      <div class="role-guide">
+        <div class="role-guide-title">推荐用云雾 API（团队共用）</div>
+        <p>找冰朔或肥猫获取团队 Key。填入后选「自定义」提供商，或直接用 DeepSeek。</p>
+      </div>
+      <div class="role-guide">
+        <div class="role-guide-title">没有 Key？用演示模式</div>
+        <p>点「演示模式」也能查看团队进度面板（🦁 指挥台），只是 AI 回答功能受限。</p>
+      </div>
+    </div>
+
+    <div class="help-section">
+      <h3>🦁 肥猫 / 🍊 桔子 专属功能</h3>
+      <ol class="help-steps">
+        <li data-n="1">选身份为「肥猫」或「桔子」后，顶部出现 <strong>🦁 按钮</strong></li>
+        <li data-n="2">点 🦁 按钮打开<strong>指挥台</strong>，查看所有开发者当前状态</li>
+        <li data-n="3">可以在聊天里问：「查看所有开发者进度」「谁遇到阻塞？」「推进计划」</li>
+        <li data-n="4">铸渊会把全员进度数据注入 AI 回复，给出完整分析</li>
+      </ol>
+    </div>
+
+    <div class="help-section">
+      <h3>📱 怎么离线用 / 发给别人离线用</h3>
+      <ol class="help-steps">
+        <li data-n="1">右上角点 <strong>⬇️ 下载</strong>，下载一个 HTML 文件</li>
+        <li data-n="2">把这个文件发给对方（微信传文件、QQ、钉钉都行）</li>
+        <li data-n="3">对方双击这个文件，用浏览器打开</li>
+        <li data-n="4">填入 API Key，选好身份，就能用了（无需网络，只需 API Key）</li>
+      </ol>
+    </div>
+
+    <div class="help-section">
+      <h3>💬 聊天模式说明</h3>
+      <div class="role-guide" style="border-color:var(--mc)">
+        <div class="role-guide-title" style="color:var(--mc)">💬 对话模式（默认）</div>
+        <p>普通聊天，问什么答什么</p>
+      </div>
+      <div class="role-guide" style="border-color:var(--mb)">
+        <div class="role-guide-title" style="color:var(--mb)">🔨 构建模式</div>
+        <p>说到「写代码/接口/部署」时自动切换，给出完整可执行代码</p>
+      </div>
+      <div class="role-guide" style="border-color:var(--mr)">
+        <div class="role-guide-title" style="color:var(--mr)">📋 审查模式</div>
+        <p>说到「检查/审查/有问题吗」时自动切换，专注找代码问题</p>
+      </div>
+      <div class="role-guide" style="border-color:var(--mn)">
+        <div class="role-guide-title" style="color:var(--mn)">🧠 大脑模式</div>
+        <p>说「记住这个/写到大脑」时切换，整理信息到大脑文件</p>
+      </div>
+    </div>
+
+    <div class="help-section">
+      <h3>❓ 常见问题</h3>
+      <div style="font-size:12px;color:var(--dim);line-height:1.9">
+        <strong style="color:var(--text)">Q: 打开是空白页？</strong><br>
+        等 1-2 分钟刷新，GitHub Pages 部署需要点时间。<br><br>
+        <strong style="color:var(--text)">Q: API Key 会泄露吗？</strong><br>
+        不会，Key 只存在你自己浏览器里，不会传到服务器。<br><br>
+        <strong style="color:var(--text)">Q: 切换电脑后 Key 还在吗？</strong><br>
+        不在，需要重新填。建议下载离线版，Key 填一次就行。<br><br>
+        <strong style="color:var(--text)">Q: 铸渊忘记以前说的话了？</strong><br>
+        刷新后对话会清空，但大脑文件永久保存在仓库 .github/brain/ 里。
+      </div>
+    </div>
+
+  </div>
+</div>
+
 <!-- ════════════════════ TEAM PANEL ════════════════════ -->
 <div id="tp" class="sp">
  <div class="ph"><h2>🦁 指挥台 · 全员进度</h2><button class="cb" onclick="closeP()">✕</button></div>
@ -1042,6 +1152,13 @@ function openPanel(id){
  if(id==='sp2') initSettingsPanel();
  if(id==='bp')  renderBrainPanel();
  if(id==='tp')  renderTeamPanel();
+  if(id==='hp'){
+    // Populate URL from constant
+    const el=document.getElementById('chatUrlDisplay');
+    if(el) el.textContent='🔗 '+CHAT_URL;
+    const li=document.getElementById('helpUrlStep');
+    if(li) li.innerHTML='打开链接 <strong>'+CHAT_URL+'</strong>';
+  }
  document.getElementById(id).classList.add('open');
  document.getElementById('pov').classList.add('on');
 }
@ -1050,6 +1167,34 @@ function closeP(){
  document.getElementById('pov').classList.remove('on');
 }

+// ═══════════════════════════════════════════════════════
+// COPY URL (share link)
+// ═══════════════════════════════════════════════════════
+const CHAT_URL = 'https://' + REPO.split('/')[0] + '.github.io/' + REPO.split('/')[1] + '/';
+
+function showCopyFeedback(success){
+  const btn=document.querySelector('.copy-url-btn');
+  if(!btn) return;
+  const orig=btn.textContent;
+  btn.textContent = success ? '✅ 已复制！' : '⚠️ 复制失败，请手动复制';
+  setTimeout(()=>{btn.textContent=orig;},2000);
+}
+
+function copyUrl(){
+  navigator.clipboard.writeText(CHAT_URL).then(()=>{
+    showCopyFeedback(true);
+  }).catch(()=>{
+    // fallback for non-secure context
+    const ta=document.createElement('textarea');
+    ta.value=CHAT_URL; ta.style.position='fixed'; ta.style.opacity='0';
+    document.body.appendChild(ta); ta.focus(); ta.select();
+    let ok=false;
+    try{ok=document.execCommand('copy');}catch(_){}
+    document.body.removeChild(ta);
+    showCopyFeedback(ok);
+  });
+}
+
 // ═══════════════════════════════════════════════════════
 // DOWNLOAD (desktop app)
 // API keys are stored in localStorage only, never embedded in the DOM,