@wendongfly/myhi 1.3.175 → 1.3.180

package/dist/index.html

@@ -10,6 +10,7 @@
   <link rel="manifest" href="/manifest.json">
   <link rel="apple-touch-icon" href="/icon.png">
   <title>myhi</title>
+  <script src="/lib/machine.js"></script>
   <script src="/sio-client/socket.io.min.js"></script>
   <script>
     (function(){try{var t=localStorage.getItem('myhi_theme')||'dark',f=localStorage.getItem('myhi_font')||'medium',r=document.documentElement;if(t&&t!=='dark')r.setAttribute('data-theme',t);r.setAttribute('data-font',f);}catch(e){}})();
@@ -470,6 +471,47 @@
     #update-btn { background: var(--yellow); color: #000; border: none; border-radius: 6px; padding: 0.35rem 0.75rem; font-size: 0.75rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
     #update-btn:active { opacity: 0.7; }
     #update-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+    /* ── 快速上手引导 ── */
+    #help-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); z-index: 30; }
+    #help-sheet { display: none; position: fixed; z-index: 31; background: var(--surface); border: 1px solid var(--border2);
+      left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 2rem)); max-height: 88vh; overflow-y: auto;
+      border-radius: 16px; padding: 1.4rem 1.5rem 0; box-shadow: 0 20px 60px rgba(0,0,0,0.5); animation: hsIn 0.22s ease-out; }
+    @keyframes hsIn { from { opacity: 0; transform: translate(-50%, -48%); } to { opacity: 1; transform: translate(-50%, -50%); } }
+    #help-sheet .hs-close { position: absolute; top: 0.8rem; right: 0.8rem; width: 2rem; height: 2rem; border-radius: 50%; border: none; background: transparent; color: var(--muted); font-size: 0.95rem; cursor: pointer; }
+    #help-sheet .hs-close:hover { background: var(--border); color: var(--text); }
+    .hs-hero { text-align: center; margin-bottom: 1rem; }
+    .hs-logo { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
+    .hs-logo span { color: var(--accent); }
+    .hs-sub { margin-top: 0.3rem; font-size: 0.86rem; color: var(--text2); }
+    .hs-steps { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; margin: 0 0 1rem; padding: 0; }
+    .hs-steps li { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.6rem 0.85rem; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; }
+    .hs-num { flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 0.05rem; }
+    .hs-steps b, .hs-tile b { font-size: 0.88rem; color: var(--text); font-weight: 600; }
+    .hs-steps p { margin: 0.15rem 0 0; font-size: 0.8rem; color: var(--text2); line-height: 1.55; }
+    #help-sheet kbd { display: inline-block; min-width: 1.3em; padding: 0 0.3em; border: 1px solid var(--border2); border-bottom-width: 2px; border-radius: 4px; background: var(--surface); font: inherit; font-size: 0.85em; text-align: center; color: var(--text); }
+    .hs-label { font-size: 0.72rem; color: var(--muted); letter-spacing: 0.06em; margin-bottom: 0.5rem; }
+    .hs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; margin-bottom: 1rem; }
+    .hs-tile { display: flex; gap: 0.6rem; align-items: center; padding: 0.5rem 0.7rem; border: 1px solid var(--border); border-radius: 10px; }
+    .hs-tile > span { font-size: 1.15rem; width: 1.6rem; text-align: center; flex-shrink: 0; }
+    .hs-tile b { font-size: 0.8rem; }
+    .hs-tile p { margin: 0.1rem 0 0; font-size: 0.72rem; color: var(--muted); line-height: 1.4; }
+    .hs-tip { font-size: 0.76rem; color: var(--text2); background: rgba(124,58,237,0.08); border: 1px solid rgba(124,58,237,0.25); border-radius: 10px; padding: 0.6rem 0.75rem; line-height: 1.55; margin-bottom: 0.2rem; }
+    .hs-actions { display: flex; gap: 0.6rem; position: sticky; bottom: 0; background: var(--surface); padding: 0.9rem 0 1.2rem; }   /* 内容超高滚动时按钮钉在底部 */
+    .hs-actions button { flex: 1; border-radius: 10px; padding: 0.72rem; font-size: 0.88rem; cursor: pointer; }
+    .hs-primary { flex: 1.6 !important; background: var(--accent); color: #fff; border: none; font-weight: 700; }
+    .hs-primary:hover { background: var(--accent2); }
+    .hs-ghost { background: transparent; color: var(--text2); border: 1px solid var(--border2); }
+    .hs-ghost:hover { color: var(--text); border-color: var(--muted); }
+    /* 手机：底部抽屉 + 功能格单列更易读 */
+    @media (max-width: 540px) {
+      #help-sheet { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: auto; border-radius: 16px 16px 0 0; border-bottom: none;
+        padding: 1.3rem 1rem 0; animation: hsUp 0.25s ease-out; }
+      @keyframes hsUp { from { transform: translateY(30%); opacity: 0; } to { transform: none; opacity: 1; } }
+      .hs-grid { grid-template-columns: 1fr 1fr; }
+      .hs-tile { padding: 0.5rem 0.55rem; }
+      .hs-tile p { display: none; }
+      .hs-actions { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
+    }
     /* 分屏是 PC 大屏功能，手机端(触屏)隐藏入口 */
     @media (pointer: coarse) { #grid-btn { display: none !important; } }
   </style>
@@ -482,6 +524,7 @@
       <span id="user-name" style="font-size:0.8rem;color:var(--muted)"></span>
       <button id="grid-btn" class="hd-btn" onclick="location.href='/grid'" title="分屏工作台（多任务并排）">▦ 分屏</button>
       <button id="appearance-btn" class="hd-btn" onclick="openAppearance()" title="外观">🎨</button>
+      <button id="help-btn" class="hd-btn" onclick="openHelpSheet()" title="使用说明 / 快速上手">❓<span class="hd-txt"> 帮助</span></button>
       <button id="doctor-btn" class="hd-btn" onclick="openDoctor()" title="会话体检">🩺<span class="hd-txt"> 体检</span></button>
       <button id="usage-btn" class="hd-btn" onclick="showUsage()" title="用量">📊<span class="hd-txt"> 用量</span></button>
       <button id="passwd-btn" class="hd-btn" onclick="openPasswdSheet()" title="修改我的密码" style="display:none">🔑<span class="hd-txt"> 改密码</span></button>
@@ -523,6 +566,35 @@
 <button id="fab" onclick="openSheet()">+</button>
 <button id="fab-note" onclick="openNoteSheet()" title="随手记：把想法先记进某个任务的草稿箱">📥</button>
 
+<!-- 使用说明 / 快速上手（首次访问自动弹出，之后从顶栏 ❓ 打开）。桌面居中卡片，手机底部抽屉 -->
+<div id="help-backdrop" onclick="closeHelpSheet()"></div>
+<div id="help-sheet" role="dialog" aria-label="快速上手">
+  <button class="hs-close" onclick="closeHelpSheet()" title="关闭">✕</button>
+  <div class="hs-hero">
+    <div class="hs-logo">my<span>hi</span></div>
+    <div class="hs-sub">用手机或电脑，把活儿交给 AI。三步就能开始：</div>
+  </div>
+  <ol class="hs-steps">
+    <li><span class="hs-num">1</span><div><b>建一个任务</b><p>点右下角 <kbd>＋</kbd>，选「默认」预设、起个名字，点创建。</p></div></li>
+    <li><span class="hs-num">2</span><div><b>像发微信一样说需求</b><p>进入任务就是对话界面，AI 会自己读文件、改代码、跑命令。</p></div></li>
+    <li><span class="hs-num">3</span><div><b>用 <kbd>@</kbd> 引用文件</b><p>消息里打 @ 弹出文件搜索，选中即插入路径，不用手打文件名。</p></div></li>
+  </ol>
+  <div class="hs-label">常用功能</div>
+  <div class="hs-grid">
+    <div class="hs-tile"><span>📥</span><div><b>草稿 / 随手记</b><p>AI 忙时先存想法，干完再发</p></div></div>
+    <div class="hs-tile"><span>📂</span><div><b>文件</b><p>查看、编辑、下载任务文件</p></div></div>
+    <div class="hs-tile"><span>▦</span><div><b>分屏</b><p>电脑上多个任务并排</p></div></div>
+    <div class="hs-tile"><span>🔄</span><div><b>恢复</b><p>翻历史对话继续聊</p></div></div>
+    <div class="hs-tile"><span>🛡</span><div><b>护栏 / 密钥</b><p>敏感信息不外泄</p></div></div>
+    <div class="hs-tile"><span>⚙️</span><div><b>会话设置</b><p>快捷栏、折叠、主题字号</p></div></div>
+  </div>
+  <div class="hs-tip">📱 手机浏览器打开同一地址即可（局域网 / Tailscale），建议「添加到主屏幕」当 App 用。</div>
+  <div class="hs-actions">
+    <button class="hs-ghost" onclick="closeHelpSheet()">我知道了</button>
+    <button class="hs-primary" onclick="closeHelpSheet(); openSheet();">＋ 新建第一个任务</button>
+  </div>
+</div>
+
 <!-- 随手记：不进会话也能记一条草稿，但必须指定归属任务 -->
 <div id="note-backdrop" onclick="closeNoteSheet()" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:30"></div>
 <div id="note-sheet" style="display:none;position:fixed;left:0;right:0;bottom:0;z-index:31;background:var(--surface,var(--surface));border-radius:16px 16px 0 0;padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom));max-height:88vh;overflow-y:auto">
@@ -1133,8 +1205,22 @@
   // ── 随手记：不在会话页也能记一条草稿 ──────────────────────────
   let _notePendingImage = null; // { path }
 
-  window.openNoteSheet = function() {
-    const sel = document.getElementById('note-session');
+  // ── 使用说明 / 首次引导 ─────────────────────────
+  window.openHelpSheet = function() {
+    document.getElementById('help-backdrop').style.display = 'block';
+    document.getElementById('help-sheet').style.display = 'block';
+  };
+  window.closeHelpSheet = function() {
+    document.getElementById('help-backdrop').style.display = 'none';
+    document.getElementById('help-sheet').style.display = 'none';
+    localStorage.setItem('myhi_onboarded', '1');   // 看过一次就不再自动弹
+  };
+  // 首次访问：自动弹快速上手，带着建第一个任务
+  if (!localStorage.getItem('myhi_onboarded') && !new URLSearchParams(location.search).get('embed')) {
+    setTimeout(openHelpSheet, 600);
+  }
+
+  window.openNoteSheet = function() {    const sel = document.getElementById('note-session');
     // AI 会话排前面（草稿最终是发给 AI 的），同项目的按最近活跃排
     const items = [..._allSessions].sort((a, b) =>
       (b.mode === 'agent') - (a.mode === 'agent') || sessionTime(b) - sessionTime(a));