小助教 · 组件演示

📌 这页怎么玩

右下角的 🤖 悬浮球 就是小助教：按住可拖动，松手自动吸到左右边、停一会儿半隐藏贴边；点一下打开面板，里面五件事——新手引导 / 常见问题FAQ / 意见反馈工单 / 联系客服 / 成长路线（学→练→考→进阶四步怎么走）。
显示范围：大厅、训练学院、个人中心显示；牌桌内默认收起（不挡牌），需要时从设置唤出。
边界：免费的小助教只答"平台怎么用"，不讲牌不算牌——讲牌是二期AI教练陪练的收费服务。

🧩 组件代码（可复制，大厅页直接引入）

<!-- ============================================
  小助教悬浮球组件 helper-widget（原型版）
  怎么引入：
    1. 在大厅/训练学院/个人中心页面的 </body> 前，
       把下面整段 <script> 贴进去即可（自包含，无依赖）；
    2. 牌桌页(07/07b)默认【不引入】——牌桌内小助教收起
       不挡牌，需要时由设置页开关唤出（UI定5显示范围）；
    3. 四个入口的跳转/弹层按各页实际情况接：下面
       HELPER_ACTIONS 里换成真实处理函数就行。
============================================ -->
<script>
(function () {
  // 四件事入口：接真实功能时替换这里
  var HELPER_ACTIONS = {
    guide:    function () { alert('新手引导：3步遮罩指引'); },
    faq:      function () { alert('常见问题FAQ'); },
    feedback: function () { alert('意见反馈：提交工单'); },
    service:  function () { alert('联系客服'); }
  };

  // 悬浮球
  var ball = document.createElement('div');
  ball.textContent = '🤖';
  ball.style.cssText = 'position:fixed;z-index:300;width:52px;height:52px;' +
    'border-radius:50%;background:linear-gradient(160deg,#35c48d,#1f7a58);' +
    'display:flex;align-items:center;justify-content:center;font-size:24px;' +
    'right:16px;bottom:80px;cursor:grab;user-select:none;touch-action:none;' +
    'box-shadow:0 6px 16px rgba(0,0,0,.4);border:2px solid rgba(232,238,245,.7)';
  document.body.appendChild(ball);

  // 拖动 + 松手吸边（吸到离得近的左/右边）
  var drag = null;
  ball.addEventListener('pointerdown', function (e) {
    var r = ball.getBoundingClientRect();
    drag = { dx: e.clientX - r.left, dy: e.clientY - r.top, moved: false };
    try { ball.setPointerCapture(e.pointerId); } catch (err) {}
    ball.style.transition = 'none';
  });
  ball.addEventListener('pointermove', function (e) {
    if (!drag) return;
    drag.moved = true;
    ball.style.left = (e.clientX - drag.dx) + 'px';
    ball.style.top = (e.clientY - drag.dy) + 'px';
    ball.style.right = 'auto'; ball.style.bottom = 'auto';
  });
  ball.addEventListener('pointerup', function () {
    if (!drag) return;
    var moved = drag.moved; drag = null;
    if (moved) {                       // 拖过：吸边
      var r = ball.getBoundingClientRect();
      var toLeft = r.left + r.width / 2 < window.innerWidth / 2;
      ball.style.transition = 'left .25s ease';
      ball.style.left = (toLeft ? 8 : window.innerWidth - r.width - 8) + 'px';
    } else {                           // 没拖：当点击，弹菜单
      var pick = prompt('小助教（免费版只答平台使用，不讲牌）：\n' +
        '1=新手引导 2=常见问题 3=意见反馈 4=联系客服');
      var map = { 1: 'guide', 2: 'faq', 3: 'feedback', 4: 'service' };
      if (map[pick]) HELPER_ACTIONS[map[pick]]();
    }
  });
})();
</script>

🤖 小助教 ✕